svelte-inline-edit Svelte Themes

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

Top categories

Loading Svelte Themes