svelte-inline-edit

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