Svelte Shift Select

A Svelte action to mutli-select checkboxes with shift-click

See the Demo

Installation

npm install svelte-shift-select

Usage

See the REPL

Default usage example

<script>
  import shiftSelect from "svelte-shift-select";
  let someValues = [];
</script>

<label>
  <input type="checkbox" bind:group={someValues} name="checkboxes" use:shiftSelect value={1}>
  Checkbox 1
</label>
<label>
  <input type="checkbox" bind:group={someValues} name="checkboxes" use:shiftSelect value={2}>
  Checkbox 2
</label>
<label>
  <input type="checkbox" bind:group={someValues} name="checkboxes" use:shiftSelect value={3}>
  Checkbox 3
</label>
<label>
  <input type="checkbox" bind:group={someValues} name="checkboxes" use:shiftSelect value={4}>
  Checkbox 4
</label>

Note:
The checkbox input must have a name attribute. The action will automatically look for all the chekboxes with the same name attribute.
A shift click triggers a change event, but can be deactivated by setting the change parameter to false.

<input type="checkbox" name="checkboxes" use:shiftSelect={{ change: false }}>

Example using array

<script>
  import shiftSelect from "svelte-shift-select";

  let items = new Array(30).fill(0).map((x, i) => ({
    id: i,
    checked: false,
  }));
</script>

{#each items as item, index}
  <label>
    <input
      type="checkbox"
      name="checkboxes"
      use:shiftSelect={{ checkboxes: items, index }}
    />
    {item.id}
  </label>
{/each}

Note:
If an array is provided for the checkboxes parameter, the action will use it instead of the checkbox-input nodes to set the checked value. So the provided array must be an array of object containing a checked property.

Can work with svelte-tiny-virtual-list

<script>
  import VirtualList from 'svelte-tiny-virtual-list';
  import shiftSelect from "svelte-shift-select";

  let items = new Array(30).fill(0).map((x, i) => ({
    id: i,
    checked: false,
  }));
</script>

<VirtualList width="100%" height={300} itemCount={items.length} itemSize={22}>
  <label slot="item" let:index let:style {style}>
    <input
      type="checkbox"
      name="checkboxes"
      bind:checked={items[index].checked}
      use:shiftSelect={{ checkboxes: items, index }}
    />
    {item.id}
  </label>
</VirtualList>

Note:
An array must be provided to the checkboxes parameter, an integer to the index parameter and each input must be binded to the provided array.

Props

License

Distributed under the MIT License.