Skip to content

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

Notifications You must be signed in to change notification settings

anotherempty/svelte-shift-select

Repository files navigation

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.

<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

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.

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published