Inline editing component for Svelte 3 demo

Features

• Simple
• Cancelable
• Different positioning of controls
• edit, save, cancel events

Install

npm i svelte-inline-edit --save-dev

yarn add svelte-inline-edit

CDN: UNPKG | jsDelivr (available as window.InlineEdit)

Usage

<InlineEdit bind:value />

<script>
    import InlineEdit from './InlineEdit.svelte';

    let value;
</script>

Using events

<InlineEdit type="email" {value} on:save={save} on:cancel={cancel} on:edit={edit} />

<script>
    import InlineEdit from './InlineEdit.svelte';

    let value;

    function save({ detail: input }) {
        if (input.checkValidity()) {
            value = input.value;
        }
    }

    function edit() {
        console.log('Start editing');
    }

    function cancel() {
        console.log('Cancel editing');
    }
</script>

If you are not using using es6, instead of importing add

<script src="/path/to/svelte-inline-edit/index.js"></script>

just before closing body tag.

API

Props

| Name | Type | Description | Required | Default | | --- | --- | --- | --- | --- | | value | String or Number | Editable value | No | empty string | | options | Array | A list of permissible or recommended options of value | No | empty array | | rows | Number | Define number of rows for editable. | No | 1 | | position | String | Position of controls: left, right, top-left, top-right, bottom-left, bottom-right | No | right |

Slots

• save - element to be placed as save control
• cancel - element to be placed as cancel control

Events

• edit - on start editing
• save - on save
• cancel - on cancel editing

You can use direct access to input element via event.detail.

License

MIT © PaulMaly