svelte-inline-edit

1.0.3 • Public • Published

Inline editing component for Svelte 3 demo

NPM version NPM downloads

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" {valueon: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

Dependents (0)

Package Sidebar

Install

npm i svelte-inline-edit

Weekly Downloads

16

Version

1.0.3

License

MIT

Unpacked Size

62.4 kB

Total Files

7

Last publish

Collaborators

  • paulmaly