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 }}
    />
    {items[index].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

Parameter	Type	Description
bind	boolean	Optional but Required if the checked attribute of the input is binded and the action isn't using an array of object. Defaults to false.
change	boolean	Optional. Is used to set whether to trigger a change when changing the checked attribute of each checkboxes after a Shift-Click. Defaults to true.
checkboxes	array	Optional but Required if used with svelte-tiny-virtual-list. Default value is undefined.
index	integer	Optional but Required if the checkboxes parameter is set. Defaults to undefined.

License

Distributed under the MIT License.