svelte-multiselect 8.1.0 → 8.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CircleSpinner.svelte.d.ts +3 -3
  2. package/MultiSelect.svelte +53 -6
  3. package/MultiSelect.svelte.d.ts +5 -4
  4. package/Wiggle.svelte.d.ts +3 -3
  5. package/changelog.md +481 -0
  6. package/index.d.ts +4 -4
  7. package/package.json +15 -14
  8. package/readme.md +28 -31
package/CircleSpinner.svelte.d.ts CHANGED
@@ -10,9 +10,9 @@ declare const __propDef: {
10
10
  };
11
11
  slots: {};
12
12
  };
13
- export declare type CircleSpinnerProps = typeof __propDef.props;
14
- export declare type CircleSpinnerEvents = typeof __propDef.events;
15
- export declare type CircleSpinnerSlots = typeof __propDef.slots;
13
+ export type CircleSpinnerProps = typeof __propDef.props;
14
+ export type CircleSpinnerEvents = typeof __propDef.events;
15
+ export type CircleSpinnerSlots = typeof __propDef.slots;
16
16
  export default class CircleSpinner extends SvelteComponentTyped<CircleSpinnerProps, CircleSpinnerEvents, CircleSpinnerSlots> {
17
17
  }
18
18
  export {};
package/MultiSelect.svelte CHANGED
@@ -1,4 +1,5 @@
1
1
  <script>import { createEventDispatcher, tick } from 'svelte';
2
+ import { flip } from 'svelte/animate';
2
3
  import CircleSpinner from './CircleSpinner.svelte';
3
4
  import { CrossIcon, DisabledIcon, ExpandIcon } from './icons';
4
5
  import Wiggle from './Wiggle.svelte';
@@ -22,7 +23,7 @@ export let filterFunc = (op, searchText) => {
22
23
  return `${get_label(op)}`.toLowerCase().includes(searchText.toLowerCase());
23
24
  };
24
25
  export let focusInputOnSelect = `desktop`;
25
- export let form_input;
26
+ export let form_input = null;
26
27
  export let id = null;
27
28
  export let input = null;
28
29
  export let inputClass = ``;
@@ -54,6 +55,7 @@ export let searchText = ``;
54
55
  export let selected = options
55
56
  ?.filter((op) => op?.preselected)
56
57
  .slice(0, maxSelect ?? undefined) ?? [];
58
+ export let selectedOptionsDraggable = true;
57
59
  export let sortSelected = false;
58
60
  export let ulOptionsClass = ``;
59
61
  export let ulSelectedClass = ``;
@@ -236,7 +238,7 @@ async function handle_keydown(event) {
236
238
  activeIndex = 0;
237
239
  return;
238
240
  }
239
- else if (allowUserOptions && searchText.length > 0) {
241
+ else if (allowUserOptions && !matchingOptions.length && searchText.length > 0) {
240
242
  // if allowUserOptions is truthy and user entered text but no options match, we make
241
243
  // <li>{addUserMsg}</li> active on keydown (or toggle it if already active)
242
244
  add_option_msg_is_active = !add_option_msg_is_active;
@@ -246,7 +248,8 @@ async function handle_keydown(event) {
246
248
  // if no option is active and no options are matching, do nothing
247
249
  return;
248
250
  }
249
- // if none of the abvove special cases apply, we make next/prev option
251
+ event.preventDefault();
252
+ // if none of the above special cases apply, we make next/prev option
250
253
  // active with wrap around at both ends
251
254
  const increment = event.key === `ArrowUp` ? -1 : 1;
252
255
  activeIndex = (activeIndex + increment) % matchingOptions.length;
@@ -284,6 +287,33 @@ function on_click_outside(event) {
284
287
  close_dropdown(event);
285
288
  }
286
289
  }
290
+ let drag_idx = null;
291
+ // event handlers enable dragging to reorder selected options
292
+ const drop = (target_idx) => (event) => {
293
+ if (!event.dataTransfer)
294
+ return;
295
+ event.dataTransfer.dropEffect = `move`;
296
+ const start_idx = parseInt(event.dataTransfer.getData(`text/plain`));
297
+ const new_selected = selected;
298
+ if (start_idx < target_idx) {
299
+ new_selected.splice(target_idx + 1, 0, new_selected[start_idx]);
300
+ new_selected.splice(start_idx, 1);
301
+ }
302
+ else {
303
+ new_selected.splice(target_idx, 0, new_selected[start_idx]);
304
+ new_selected.splice(start_idx + 1, 1);
305
+ }
306
+ selected = new_selected;
307
+ drag_idx = null;
308
+ };
309
+ const dragstart = (idx) => (event) => {
310
+ if (!event.dataTransfer)
311
+ return;
312
+ // only allow moving, not copying (also affects the cursor during drag)
313
+ event.dataTransfer.effectAllowed = `move`;
314
+ event.dataTransfer.dropEffect = `move`;
315
+ event.dataTransfer.setData(`text/plain`, `${idx}`);
316
+ };
287
317
  </script>
288
318
 
289
319
  <svelte:window
@@ -326,13 +356,23 @@ function on_click_outside(event) {
326
356
  } else {
327
357
  msg = `Please select an option`
328
358
  }
329
- form_input.setCustomValidity(msg)
359
+ form_input?.setCustomValidity(msg)
330
360
  }}
331
361
  />
332
362
  <ExpandIcon width="15px" style="min-width: 1em; padding: 0 1pt;" />
333
363
  <ul class="selected {ulSelectedClass}">
334
- {#each selected as option, idx}
335
- <li class={liSelectedClass} aria-selected="true">
364
+ {#each selected as option, idx (get_label(option))}
365
+ <li
366
+ class={liSelectedClass}
367
+ aria-selected="true"
368
+ animate:flip={{ duration: 100 }}
369
+ draggable={selectedOptionsDraggable}
370
+ on:dragstart={dragstart(idx)}
371
+ on:drop|preventDefault={drop(idx)}
372
+ on:dragenter={() => (drag_idx = idx)}
373
+ class:active={drag_idx === idx}
374
+ ondragover="return false"
375
+ >
336
376
  <slot name="selected" {option} {idx}>
337
377
  {#if parseLabelsAsHtml}
338
378
  {@html get_label(option)}
@@ -370,6 +410,7 @@ function on_click_outside(event) {
370
410
  {pattern}
371
411
  placeholder={selected.length == 0 ? placeholder : null}
372
412
  aria-invalid={invalid ? `true` : null}
413
+ ondrop="return false"
373
414
  on:blur
374
415
  on:change
375
416
  on:click
@@ -535,6 +576,12 @@ function on_click_outside(event) {
535
576
  padding: var(--sms-selected-li-padding, 1pt 5pt);
536
577
  color: var(--sms-selected-text-color, var(--sms-text-color));
537
578
  }
579
+ :where(div.multiselect > ul.selected > li[draggable]) {
580
+ cursor: grab;
581
+ }
582
+ :where(div.multiselect > ul.selected > li.active) {
583
+ background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
584
+ }
538
585
  :where(div.multiselect button) {
539
586
  border-radius: 50%;
540
587
  display: flex;
package/MultiSelect.svelte.d.ts CHANGED
@@ -17,7 +17,7 @@ declare const __propDef: {
17
17
  duplicates?: boolean | undefined;
18
18
  filterFunc?: ((op: Option, searchText: string) => boolean) | undefined;
19
19
  focusInputOnSelect?: boolean | "desktop" | undefined;
20
- form_input: HTMLInputElement;
20
+ form_input?: HTMLInputElement | null | undefined;
21
21
  id?: string | null | undefined;
22
22
  input?: HTMLInputElement | null | undefined;
23
23
  inputClass?: string | undefined;
@@ -47,6 +47,7 @@ declare const __propDef: {
47
47
  resetFilterOnAdd?: boolean | undefined;
48
48
  searchText?: string | undefined;
49
49
  selected?: Option[] | undefined;
50
+ selectedOptionsDraggable?: boolean | undefined;
50
51
  sortSelected?: boolean | ((op1: Option, op2: Option) => number) | undefined;
51
52
  ulOptionsClass?: string | undefined;
52
53
  ulSelectedClass?: string | undefined;
@@ -68,9 +69,9 @@ declare const __propDef: {
68
69
  getters: {};
69
70
  events: MultiSelectEvents;
70
71
  };
71
- export declare type MultiSelectProps = typeof __propDef.props;
72
- export declare type MultiSelectEvents = typeof __propDef.events;
73
- export declare type MultiSelectSlots = typeof __propDef.slots;
72
+ export type MultiSelectProps = typeof __propDef.props;
73
+ export type MultiSelectEvents = typeof __propDef.events;
74
+ export type MultiSelectSlots = typeof __propDef.slots;
74
75
  export default class MultiSelect extends SvelteComponentTyped<MultiSelectProps, MultiSelectEvents, MultiSelectSlots> {
75
76
  }
76
77
  export {};
package/Wiggle.svelte.d.ts CHANGED
@@ -17,9 +17,9 @@ declare const __propDef: {
17
17
  default: {};
18
18
  };
19
19
  };
20
- export declare type WiggleProps = typeof __propDef.props;
21
- export declare type WiggleEvents = typeof __propDef.events;
22
- export declare type WiggleSlots = typeof __propDef.slots;
20
+ export type WiggleProps = typeof __propDef.props;
21
+ export type WiggleEvents = typeof __propDef.events;
22
+ export type WiggleSlots = typeof __propDef.slots;
23
23
  export default class Wiggle extends SvelteComponentTyped<WiggleProps, WiggleEvents, WiggleSlots> {
24
24
  }
25
25
  export {};
package/changelog.md ADDED
@@ -0,0 +1,481 @@
1
+ ### Changelog
2
+
3
+ All notable changes to this project will be documented in this file. Dates are displayed in UTC.
4
+
5
+ #### [v8.2.1](https://github.com/janosh/svelte-multiselect/compare/v8.2.0...v8.2.1)
6
+
7
+ - Fix `allowUserOptions` preventing dropdown list navigation with up/down arrow keys [`#184`](https://github.com/janosh/svelte-multiselect/pull/184)
8
+ - Mdsvexamples [`#182`](https://github.com/janosh/svelte-multiselect/pull/182)
9
+ - Add changelog & contributing pages to site [`#181`](https://github.com/janosh/svelte-multiselect/pull/181)
10
+ - tweak contributing.md and css-classes example [`6f78033`](https://github.com/janosh/svelte-multiselect/commit/6f78033826beb34cd00bf3282c93ac5328905735)
11
+ - fix build error [`b896d36`](https://github.com/janosh/svelte-multiselect/commit/b896d3643a0988b0d0bed832ba46bcad0e2c4494)
12
+ - fix readme badge for gh-pages.yml status [`906b560`](https://github.com/janosh/svelte-multiselect/commit/906b56024a826ed45263197b1267015d88f0a660)
13
+
14
+ <!-- auto-changelog-above -->
15
+
16
+ #### [v8.2.0](https://github.com/janosh/svelte-multiselect/compare/v8.1.0...v8.2.0)
17
+
18
+ > 30 November 2022
19
+
20
+ - Draggable selected options [`#178`](https://github.com/janosh/svelte-multiselect/pull/178)
21
+ - Fix page navigation in GH pages, broken because served from non-apex domain [`#172`](https://github.com/janosh/svelte-multiselect/pull/172)
22
+ - Publish docs to GitHub pages [`#170`](https://github.com/janosh/svelte-multiselect/pull/170)
23
+ - Contributing docs plus issue and PR templates with StackBlitz repro starter [`#169`](https://github.com/janosh/svelte-multiselect/pull/169)
24
+ - add missing about field to bug-report issue template (closes #171) [`#171`](https://github.com/janosh/svelte-multiselect/issues/171)
25
+ - add changelog.md [`236d238`](https://github.com/janosh/svelte-multiselect/commit/236d238c5fa1ce5f07cf08c09861da4d8446acb2)
26
+ - fix prop form_input: set default value null to make it optional [`b150fe0`](https://github.com/janosh/svelte-multiselect/commit/b150fe0032ebde82a319b23bd5e6b573e0c31721)
27
+ - set `aliveStatusCodes: [200, 429]` in `.github/workflows/link-check-config.json` [`b34c7bf`](https://github.com/janosh/svelte-multiselect/commit/b34c7bf99d4afa96dcd3c9c322ab4e94b1ef3a39)
28
+ - add changelog script to `package.json` [`c943617`](https://github.com/janosh/svelte-multiselect/commit/c9436171033e06e8098f4443ed40d48ddee35167)
29
+
30
+ #### [v8.1.0](https://github.com/janosh/svelte-multiselect/compare/v8.0.4...v8.1.0)
31
+
32
+ > 18 November 2022
33
+
34
+ - Add minSelect prop [`#166`](https://github.com/janosh/svelte-multiselect/pull/166)
35
+ - Add `pnpm test` to readme [`#168`](https://github.com/janosh/svelte-multiselect/pull/168)
36
+ - Add class for maxSelectMsg [`#167`](https://github.com/janosh/svelte-multiselect/pull/167)
37
+ - Allow `required=1 | 2 | ...` to set minimum number of selected options for form submission [`#161`](https://github.com/janosh/svelte-multiselect/pull/161)
38
+ - Add minSelect prop (#166) [`#163`](https://github.com/janosh/svelte-multiselect/issues/163) [`#163`](https://github.com/janosh/svelte-multiselect/issues/163) [`#163`](https://github.com/janosh/svelte-multiselect/issues/163)
39
+ - mv /max-select example to /min-max-select [`9838db8`](https://github.com/janosh/svelte-multiselect/commit/9838db87d044a0d3d261c82ac1d654b9e32310d1)
40
+
41
+ #### [v8.0.4](https://github.com/janosh/svelte-multiselect/compare/v8.0.3...v8.0.4)
42
+
43
+ > 15 November 2022
44
+
45
+ - Form validation docs [`#159`](https://github.com/janosh/svelte-multiselect/pull/159)
46
+ - Don't `console.error` about missing `options` if `disabled=true` [`#158`](https://github.com/janosh/svelte-multiselect/pull/158)
47
+
48
+ #### [v8.0.3](https://github.com/janosh/svelte-multiselect/compare/v8.0.2...v8.0.3)
49
+
50
+ > 15 November 2022
51
+
52
+ - Test uncovered lines [`#157`](https://github.com/janosh/svelte-multiselect/pull/157)
53
+ - Don't `console.error` about missing `options` if `loading=true` [`#156`](https://github.com/janosh/svelte-multiselect/pull/156)
54
+ - Measure `vitest` coverage with `c8` [`#155`](https://github.com/janosh/svelte-multiselect/pull/155)
55
+ - increase --sms-min-height 19->`22pt [`5d0e081`](<https://github.com/janosh/svelte-multiselect/commit/5d0e0815d0b488ae23b439a3f085dd083138c326>)
56
+
57
+ #### [v8.0.2](https://github.com/janosh/svelte-multiselect/compare/v8.0.1...v8.0.2)
58
+
59
+ > 7 November 2022
60
+
61
+ - Pass JSON.stringified selected options to form submission handlers [`#152`](https://github.com/janosh/svelte-multiselect/pull/152)
62
+ - Link check CI and readme housekeeping [`#149`](https://github.com/janosh/svelte-multiselect/pull/149)
63
+ - REPL links for landing page examples [`#148`](https://github.com/janosh/svelte-multiselect/pull/148)
64
+ - Add Collapsible code blocks to usage examples [`#143`](https://github.com/janosh/svelte-multiselect/pull/143)
65
+ - REPL links for landing page examples (#148) [`#144`](https://github.com/janosh/svelte-multiselect/issues/144) [`#145`](https://github.com/janosh/svelte-multiselect/issues/145) [`#146`](https://github.com/janosh/svelte-multiselect/issues/146) [`#147`](https://github.com/janosh/svelte-multiselect/issues/147)
66
+
67
+ #### [v8.0.1](https://github.com/janosh/svelte-multiselect/compare/v8.0.0...v8.0.1)
68
+
69
+ > 30 October 2022
70
+
71
+ - Revert SCSS preprocessing [`#141`](https://github.com/janosh/svelte-multiselect/pull/141)
72
+ - Add unit tests for 2-/1-way binding of `activeIndex` and `activeOption` [`#139`](https://github.com/janosh/svelte-multiselect/pull/139)
73
+
74
+ ### [v8.0.0](https://github.com/janosh/svelte-multiselect/compare/v7.1.0...v8.0.0)
75
+
76
+ > 22 October 2022
77
+
78
+ - Add new prop `value` [`#138`](https://github.com/janosh/svelte-multiselect/pull/138)
79
+ - New prop resetFilterOnAdd [`#137`](https://github.com/janosh/svelte-multiselect/pull/137)
80
+ - `yarn` to `pnpm` [`#134`](https://github.com/janosh/svelte-multiselect/pull/134)
81
+ - Rename prop `noOptionsMsg -> noMatchingOptionsMsg` [`#133`](https://github.com/janosh/svelte-multiselect/pull/133)
82
+ - remove props selectedLabels and selectedValues [`ef6598e`](https://github.com/janosh/svelte-multiselect/commit/ef6598e8b0dc1f2f8cb687074463cb73b2f9ebff)
83
+
84
+ #### [v7.1.0](https://github.com/janosh/svelte-multiselect/compare/v7.0.2...v7.1.0)
85
+
86
+ > 13 October 2022
87
+
88
+ - Allow preventing duplicate options when allowUserOptions is thruthy [`#132`](https://github.com/janosh/svelte-multiselect/pull/132)
89
+
90
+ #### [v7.0.2](https://github.com/janosh/svelte-multiselect/compare/v7.0.1...v7.0.2)
91
+
92
+ > 8 October 2022
93
+
94
+ - Fix TypeError: Cannot read properties of null (reading 'get_label') - take 2 [`#131`](https://github.com/janosh/svelte-multiselect/pull/131)
95
+ - Fix selecting options with falsy labels (like 0) [`#130`](https://github.com/janosh/svelte-multiselect/pull/130)
96
+
97
+ #### [v7.0.1](https://github.com/janosh/svelte-multiselect/compare/v7.0.0...v7.0.1)
98
+
99
+ > 6 October 2022
100
+
101
+ - Fix single select with arrow and enter keys [`#128`](https://github.com/janosh/svelte-multiselect/pull/128)
102
+ - Add SCSS preprocessing [`#126`](https://github.com/janosh/svelte-multiselect/pull/126)
103
+ - [pre-commit.ci] pre-commit autoupdate [`#124`](https://github.com/janosh/svelte-multiselect/pull/124)
104
+ - more unit tests [`1adbc99`](https://github.com/janosh/svelte-multiselect/commit/1adbc994b746b39c4ad081dc2573bf37f27c96c0)
105
+ - test required but empty MultiSelect fails form validity check (i.e. causes unsubmittable form) and filled one passes it [`fd8b377`](https://github.com/janosh/svelte-multiselect/commit/fd8b37782cd508aacfc8125c6647cefe56144b80)
106
+
107
+ ### [v7.0.0](https://github.com/janosh/svelte-multiselect/compare/v6.1.0...v7.0.0)
108
+
109
+ > 3 October 2022
110
+
111
+ - Make selected a single value (not a length-1 array) if maxSelect=1 [`#123`](https://github.com/janosh/svelte-multiselect/pull/123)
112
+ - Fix TypeError: Cannot read properties of null (reading 'get_label') at MultiSelect.svelte:75 [`#122`](https://github.com/janosh/svelte-multiselect/pull/122)
113
+ - add stopPropagation to keydown handler (closes #114) [`#114`](https://github.com/janosh/svelte-multiselect/issues/114)
114
+
115
+ #### [v6.1.0](https://github.com/janosh/svelte-multiselect/compare/v6.0.3...v6.1.0)
116
+
117
+ > 30 September 2022
118
+
119
+ - Forward input DOM events [`#120`](https://github.com/janosh/svelte-multiselect/pull/120)
120
+ - Props to manipulating inputmode and pattern attributes [`#116`](https://github.com/janosh/svelte-multiselect/pull/116)
121
+ - docs: remove `userInputAs` prop reference [`#115`](https://github.com/janosh/svelte-multiselect/pull/115)
122
+ - Fix top option not selectable with enter key [`#113`](https://github.com/janosh/svelte-multiselect/pull/113)
123
+
124
+ #### [v6.0.3](https://github.com/janosh/svelte-multiselect/compare/v6.0.2...v6.0.3)
125
+
126
+ > 20 September 2022
127
+
128
+ - Fix using arrow keys to control active option in dropdown list [`#111`](https://github.com/janosh/svelte-multiselect/pull/111)
129
+ - eslintrc set @typescript-eslint/no-inferrable-types: off [`c688773`](https://github.com/janosh/svelte-multiselect/commit/c6887737871709cdadc2ef0835795d6c1696e34c)
130
+
131
+ #### [v6.0.2](https://github.com/janosh/svelte-multiselect/compare/v6.0.1...v6.0.2)
132
+
133
+ > 17 September 2022
134
+
135
+ - Test readme docs on CSS variables [`#109`](https://github.com/janosh/svelte-multiselect/pull/109)
136
+ - Fix selected array not being initialized to options with preselected=true [`#108`](https://github.com/janosh/svelte-multiselect/pull/108)
137
+
138
+ #### [v6.0.1](https://github.com/janosh/svelte-multiselect/compare/v6.0.0...v6.0.1)
139
+
140
+ > 13 September 2022
141
+
142
+ - Better props docs and test [`#105`](https://github.com/janosh/svelte-multiselect/pull/105)
143
+ - fix breaking change sveltekit:prefetch renamed to data-sveltekit-prefetch [`65ddbb9`](https://github.com/janosh/svelte-multiselect/commit/65ddbb93c720e3d92d7bc3fec232f58e87c0ea6d)
144
+ - fix .svx demo routes [`fde53f1`](https://github.com/janosh/svelte-multiselect/commit/fde53f1225fda928412303256d48b77d122d19f1)
145
+ - revert from adapter-netlify to adapter-static [`224144d`](https://github.com/janosh/svelte-multiselect/commit/224144dce012d1eef515abafa542c6a6b7e063e8)
146
+
147
+ ### [v6.0.0](https://github.com/janosh/svelte-multiselect/compare/v5.0.6...v6.0.0)
148
+
149
+ > 3 September 2022
150
+
151
+ - Better on mobile and better about which option is active [`#103`](https://github.com/janosh/svelte-multiselect/pull/103)
152
+ - SvelteKit routes auto migration [`#101`](https://github.com/janosh/svelte-multiselect/pull/101)
153
+
154
+ #### [v5.0.6](https://github.com/janosh/svelte-multiselect/compare/v5.0.5...v5.0.6)
155
+
156
+ > 2 August 2022
157
+
158
+ - Fix 'Cannot find module `scroll-into-view-if-needed`' [`#99`](https://github.com/janosh/svelte-multiselect/pull/99)
159
+
160
+ #### [v5.0.5](https://github.com/janosh/svelte-multiselect/compare/v5.0.4...v5.0.5)
161
+
162
+ > 2 August 2022
163
+
164
+ - Add `scroll-into-view-if-needed` ponyfill [`#97`](https://github.com/janosh/svelte-multiselect/pull/97)
165
+
166
+ #### [v5.0.4](https://github.com/janosh/svelte-multiselect/compare/v5.0.3...v5.0.4)
167
+
168
+ > 17 July 2022
169
+
170
+ - Convert E2E tests from`vitest` to `@playwright/test` [`#95`](https://github.com/janosh/svelte-multiselect/pull/95)
171
+ - Allow empty Multiselect [`#94`](https://github.com/janosh/svelte-multiselect/pull/94)
172
+ - Add new slot `'remove-icon'` [`#93`](https://github.com/janosh/svelte-multiselect/pull/93)
173
+ - [pre-commit.ci] pre-commit autoupdate [`#92`](https://github.com/janosh/svelte-multiselect/pull/92)
174
+
175
+ #### [v5.0.3](https://github.com/janosh/svelte-multiselect/compare/v5.0.2...v5.0.3)
176
+
177
+ > 1 July 2022
178
+
179
+ - Reset `activeOption` to `null` if not in `matchingOptions` [`#90`](https://github.com/janosh/svelte-multiselect/pull/90)
180
+
181
+ #### [v5.0.2](https://github.com/janosh/svelte-multiselect/compare/v5.0.1...v5.0.2)
182
+
183
+ > 27 June 2022
184
+
185
+ - Replace `li.scrollIntoViewIfNeeded()` with `li.scrollIntoView()` [`#88`](https://github.com/janosh/svelte-multiselect/pull/88)
186
+ - Add new prop `parseLabelsAsHtml` [`#84`](https://github.com/janosh/svelte-multiselect/pull/84)
187
+ - try fix flaky test 'multiselect >`can select and remove many options' [`2b0c453`](<https://github.com/janosh/svelte-multiselect/commit/2b0c453c794c0b3b82e81c5b994c10bc305a98d6>)
188
+ - bump netlify node to v18, update readme + deps [`586c724`](https://github.com/janosh/svelte-multiselect/commit/586c724d471aece2b5a3726bb5eb145e36073fe3)
189
+ - remove plausible.js analytics [`cd4c9f6`](https://github.com/janosh/svelte-multiselect/commit/cd4c9f6e18e13959dfb4fcebe9acba7a875b83a2)
190
+
191
+ #### [v5.0.1](https://github.com/janosh/svelte-multiselect/compare/v5.0.0...v5.0.1)
192
+
193
+ > 23 April 2022
194
+
195
+ - Strongly typed custom events [`#79`](https://github.com/janosh/svelte-multiselect/pull/79)
196
+
197
+ ### [v5.0.0](https://github.com/janosh/svelte-multiselect/compare/v4.0.6...v5.0.0)
198
+
199
+ > 21 April 2022
200
+
201
+ - v5 release [`#76`](https://github.com/janosh/svelte-multiselect/pull/76)
202
+ - Work with string options as is, don't convert to objects internally [`#75`](https://github.com/janosh/svelte-multiselect/pull/75)
203
+ - v5 release (#76) [`#57`](https://github.com/janosh/svelte-multiselect/issues/57)
204
+
205
+ #### [v4.0.6](https://github.com/janosh/svelte-multiselect/compare/v4.0.5...v4.0.6)
206
+
207
+ > 7 April 2022
208
+
209
+ - Fix backspace deleting multiple selected options if identical labels [`#72`](https://github.com/janosh/svelte-multiselect/pull/72)
210
+ - Several fixes for `allowUserOptions` [`#69`](https://github.com/janosh/svelte-multiselect/pull/69)
211
+ - [pre-commit.ci] pre-commit autoupdate [`#70`](https://github.com/janosh/svelte-multiselect/pull/70)
212
+
213
+ #### [v4.0.5](https://github.com/janosh/svelte-multiselect/compare/v4.0.4...v4.0.5)
214
+
215
+ > 2 April 2022
216
+
217
+ - Fix MultiSelect `localStorage` binding [`#66`](https://github.com/janosh/svelte-multiselect/pull/66)
218
+
219
+ #### [v4.0.4](https://github.com/janosh/svelte-multiselect/compare/v4.0.3...v4.0.4)
220
+
221
+ > 30 March 2022
222
+
223
+ - Move examples to new `src/routes/demos` dir [`#63`](https://github.com/janosh/svelte-multiselect/pull/63)
224
+ - make ToC position fixed (closes #64) [`#64`](https://github.com/janosh/svelte-multiselect/issues/64)
225
+ - check for undefined (not falsy) value in rawOp processing (fixes #65) [`#65`](https://github.com/janosh/svelte-multiselect/issues/65)
226
+ - LanguageSlot change SVG icons src repo to vscode-icons for more coverage [`92390e9`](https://github.com/janosh/svelte-multiselect/commit/92390e937a063b2b0c88e0ac6f9a9d8f3cb1eadd)
227
+ - more preselected slots in Examples.svelte [`cd0a01a`](https://github.com/janosh/svelte-multiselect/commit/cd0a01a7a6b319299642b3c24c5caea8dc9dc24d)
228
+
229
+ #### [v4.0.3](https://github.com/janosh/svelte-multiselect/compare/v4.0.2...v4.0.3)
230
+
231
+ > 23 March 2022
232
+
233
+ - Add `aria-label` to hidden `.form-control` input [`#62`](https://github.com/janosh/svelte-multiselect/pull/62)
234
+ - Add `aria-label` to hidden `.form-control` input (#62) [`#58`](https://github.com/janosh/svelte-multiselect/issues/58) [`#35`](https://github.com/janosh/svelte-multiselect/issues/35)
235
+ - fix dropdown closing when clicking between list items (closes #61) [`#61`](https://github.com/janosh/svelte-multiselect/issues/61)
236
+ - `svelte.config.js` add `kit.prerender.default: true`, `mv src/{global,app}.d.ts` [`4a84913`](https://github.com/janosh/svelte-multiselect/commit/4a8491380e08bad137ca7bdda9ee4ddd38abe3d6)
237
+
238
+ #### [v4.0.2](https://github.com/janosh/svelte-multiselect/compare/v4.0.1...v4.0.2)
239
+
240
+ > 13 March 2022
241
+
242
+ - Improve a11y [`#60`](https://github.com/janosh/svelte-multiselect/pull/60)
243
+ - Convert tests to Playwright [`#59`](https://github.com/janosh/svelte-multiselect/pull/59)
244
+ - Convert tests to Playwright (#59) [`#58`](https://github.com/janosh/svelte-multiselect/issues/58)
245
+ - add and document prop invalid (closes #47) [`#47`](https://github.com/janosh/svelte-multiselect/issues/47)
246
+ - set width (not height) on svg icons and as px (not em) so they don't shrink with fluid typography on mobile screens [`ba77f93`](https://github.com/janosh/svelte-multiselect/commit/ba77f93b23b375bb650411b580406f1f7d55f365)
247
+
248
+ #### [v4.0.1](https://github.com/janosh/svelte-multiselect/compare/v4.0.0...v4.0.1)
249
+
250
+ > 5 March 2022
251
+
252
+ - Rename readonly to disabled [`#55`](https://github.com/janosh/svelte-multiselect/pull/55)
253
+ - CSS and UX tweaks [`#52`](https://github.com/janosh/svelte-multiselect/pull/52)
254
+ - Readme document test runner config to avoid transpiling errors in downstream testing [`#54`](https://github.com/janosh/svelte-multiselect/pull/54)
255
+ - More tests [`#51`](https://github.com/janosh/svelte-multiselect/pull/51)
256
+ - Add `vitest` [`#50`](https://github.com/janosh/svelte-multiselect/pull/50)
257
+ - Rename readonly to disabled (#55) [`#45`](https://github.com/janosh/svelte-multiselect/issues/45)
258
+ - close options dropdown list on input blur (fixes #53) [`#53`](https://github.com/janosh/svelte-multiselect/issues/53)
259
+ - CSS and UX tweaks (#52) [`#44`](https://github.com/janosh/svelte-multiselect/issues/44) [`#44`](https://github.com/janosh/svelte-multiselect/issues/44) [`#44`](https://github.com/janosh/svelte-multiselect/issues/44)
260
+ - Readme document test runner config to avoid transpiling errors in downstream testing (#54) [`#48`](https://github.com/janosh/svelte-multiselect/issues/48)
261
+
262
+ ### [v4.0.0](https://github.com/janosh/svelte-multiselect/compare/v3.3.0...v4.0.0)
263
+
264
+ > 21 February 2022
265
+
266
+ - Implement `allowUserOptions`, `autoScroll` and `loading` (closes #39) [`#41`](https://github.com/janosh/svelte-multiselect/pull/41)
267
+ - define DispatchEvents type used to annotate createEventDispatcher() [`#32`](https://github.com/janosh/svelte-multiselect/pull/32)
268
+ - add prop required to prevent form submission if no options selected (closes #42) [`#42`](https://github.com/janosh/svelte-multiselect/issues/42)
269
+ - Implement `allowUserOptions`, `autoScroll` and `loading` (closes #39) (#41) [`#39`](https://github.com/janosh/svelte-multiselect/issues/39) [`#39`](https://github.com/janosh/svelte-multiselect/issues/39)
270
+
271
+ #### [v3.3.0](https://github.com/janosh/svelte-multiselect/compare/v3.2.3...v3.3.0)
272
+
273
+ > 20 February 2022
274
+
275
+ - by default, only show maxSelectMsg if maxSelect != null and >`1 (closes #37) [`#37`](<https://github.com/janosh/svelte-multiselect/issues/37>)
276
+ - add CSS var --sms-options-shadow defaults to subtle black shadow around dropdown list (0 0 14pt -8pt black) (closes #36) [`#36`](https://github.com/janosh/svelte-multiselect/issues/36)
277
+ - add prop liActiveOptionClass = '' (closes #35) [`#35`](https://github.com/janosh/svelte-multiselect/issues/35)
278
+ - turn searchText = and showOptions = false into bindable props (closes #33) [`#33`](https://github.com/janosh/svelte-multiselect/issues/33)
279
+ - document missing noOptionsMsg prop (closes #34) [`#34`](https://github.com/janosh/svelte-multiselect/issues/34)
280
+ - ensure custom class names (outerDivClass, ulOptionsClass) come last (closes #38) [`#38`](https://github.com/janosh/svelte-multiselect/issues/38)
281
+ - fix ToC scroll to heading (closes #31) [`#31`](https://github.com/janosh/svelte-multiselect/issues/31)
282
+ - only show remove all btn when maxSelect !== 1 (for #37) [`64cfd8a`](https://github.com/janosh/svelte-multiselect/commit/64cfd8a1108e19aae12e65c3ad17177f09a066d8)
283
+
284
+ #### [v3.2.3](https://github.com/janosh/svelte-multiselect/compare/v3.2.2...v3.2.3)
285
+
286
+ > 19 February 2022
287
+
288
+ - Fixes for focus on click and wiggle on hitting maxSelect [`#30`](https://github.com/janosh/svelte-multiselect/pull/30)
289
+
290
+ #### [v3.2.2](https://github.com/janosh/svelte-multiselect/compare/v3.2.1...v3.2.2)
291
+
292
+ > 16 February 2022
293
+
294
+ - Expose filter method [`#29`](https://github.com/janosh/svelte-multiselect/pull/29)
295
+ - readme improve docs on css variables and granular control through :global() selectors (closes #27) [`#27`](https://github.com/janosh/svelte-multiselect/issues/27)
296
+
297
+ #### [v3.2.1](https://github.com/janosh/svelte-multiselect/compare/v3.2.0...v3.2.1)
298
+
299
+ > 7 February 2022
300
+
301
+ - mv input outside ul.selected for better HTML semantics (closes #26) [`#26`](https://github.com/janosh/svelte-multiselect/issues/26)
302
+
303
+ #### [v3.2.0](https://github.com/janosh/svelte-multiselect/compare/v3.1.1...v3.2.0)
304
+
305
+ > 3 February 2022
306
+
307
+ - apply id prop to `<input>` instead of outer div (closes #25) [`#25`](https://github.com/janosh/svelte-multiselect/issues/25)
308
+ - add eslint commit hook + update deps [`6ad44b8`](https://github.com/janosh/svelte-multiselect/commit/6ad44b85057aef71eae19293de80f9d42f91f87b)
309
+ - v.3.2.0 [`71ff2d1`](https://github.com/janosh/svelte-multiselect/commit/71ff2d192caccacbe41f83949c14d7d4ca87d590)
310
+ - add readme badge to document minimum svelte version (for #24) [`7d9fe5a`](https://github.com/janosh/svelte-multiselect/commit/7d9fe5a977b56dab95069b64321f0718e0d61f08)
311
+
312
+ #### [v3.1.1](https://github.com/janosh/svelte-multiselect/compare/v3.1.0...v3.1.1)
313
+
314
+ > 25 January 2022
315
+
316
+ - wiggle the maxSelect msg on hitting selection limit (closes #19) [`#19`](https://github.com/janosh/svelte-multiselect/issues/19)
317
+ - readme better docs for CSS variables, rename slots `{options,selected}Renderer -> render{options,selected}` [`c8ab724`](https://github.com/janosh/svelte-multiselect/commit/c8ab7241506cfe6b5930d098150a251e85c52afd)
318
+
319
+ #### [v3.1.0](https://github.com/janosh/svelte-multiselect/compare/v3.0.1...v3.1.0)
320
+
321
+ > 22 January 2022
322
+
323
+ - add selectedRenderer + optionRenderer named slots (closes #21) [`#21`](https://github.com/janosh/svelte-multiselect/issues/21)
324
+ - docs site use unmodified readme with slot to insert examples, yarn add svelte-github-corner [`1072691`](https://github.com/janosh/svelte-multiselect/commit/10726916ea2a72560cd8ee6f2806526bf932e771)
325
+ - readme add note on type exports for TS users, add error page that redirects to index [`dde76c8`](https://github.com/janosh/svelte-multiselect/commit/dde76c8b92408b7fddca0b555a63c2b1bfd0dbe8)
326
+
327
+ #### [v3.0.1](https://github.com/janosh/svelte-multiselect/compare/v3.0.0...v3.0.1)
328
+
329
+ > 7 January 2022
330
+
331
+ - favorite web framework show Confetti.svelte on:add Svelte [`8d109ee`](https://github.com/janosh/svelte-multiselect/commit/8d109ee5c7755e447fcb72419f3b7ecc19cac0b2)
332
+ - bump svelte@3.45.0 to silence warning: MultiSelect has unused export property 'defaultDisabledTitle' (sveltejs/svelte#6964) [`f80a7a6`](https://github.com/janosh/svelte-multiselect/commit/f80a7a622310005407585298f2611597c0941990)
333
+ - update readme + svelte-toc@0.2.0 [`40013ba`](https://github.com/janosh/svelte-multiselect/commit/40013badd61dd0fcade7ab295dabd26693e3cc51)
334
+ - [pre-commit.ci] pre-commit autoupdate [`0d05864`](https://github.com/janosh/svelte-multiselect/commit/0d05864d19987460dd30d667eb22deb91a520668)
335
+ - iOS Safari prevent zoom into page on focus MultiSelect input [`44f17be`](https://github.com/janosh/svelte-multiselect/commit/44f17be53378e38f4a8748b815737d25cdebc85f)
336
+
337
+ ### [v3.0.0](https://github.com/janosh/svelte-multiselect/compare/v2.0.0...v3.0.0)
338
+
339
+ > 29 December 2021
340
+
341
+ - ensure active option is scrolled into view if needed (closes #15), breaking change: renames tokens to options [`#15`](https://github.com/janosh/svelte-multiselect/issues/15)
342
+
343
+ ### [v2.0.0](https://github.com/janosh/svelte-multiselect/compare/v1.2.2...v2.0.0)
344
+
345
+ > 24 December 2021
346
+
347
+ - Convert options from simple strings to objects [`#16`](https://github.com/janosh/svelte-multiselect/pull/16)
348
+ - Add local to transition:fly [`#14`](https://github.com/janosh/svelte-multiselect/pull/14)
349
+ - add onClickOutside action, used to replace input.on:blur() for hiding options (closes #18) [`#18`](https://github.com/janosh/svelte-multiselect/issues/18)
350
+ - update deps [`fb90f93`](https://github.com/janosh/svelte-multiselect/commit/fb90f936fa0d49f81e6c9c60986dd04749ea6a67)
351
+ - more keyboard friendliness by showing remove button focus and triggering on space bar or enter key [`b87d22b`](https://github.com/janosh/svelte-multiselect/commit/b87d22bc5706acd18e1e79c40b3845f2ee3615b2)
352
+ - add plausible [`0557c0f`](https://github.com/janosh/svelte-multiselect/commit/0557c0f2bbef80820540302af29c79b7ac89023b)
353
+
354
+ #### [v1.2.2](https://github.com/janosh/svelte-multiselect/compare/v1.2.1...v1.2.2)
355
+
356
+ > 27 October 2021
357
+
358
+ - set `<input>` width back to 1pt as it's only needed to tab into, focus and blur `<MultiSelect>` (closes #12) [`#12`](https://github.com/janosh/svelte-multiselect/issues/12)
359
+ - update readme [`45c7993`](https://github.com/janosh/svelte-multiselect/commit/45c7993398c986499d4c0729177620cbec719cb7)
360
+
361
+ #### [v1.2.1](https://github.com/janosh/svelte-multiselect/compare/v1.2.0...v1.2.1)
362
+
363
+ > 21 October 2021
364
+
365
+ - make internal CSS easily overridable (sveltejs/svelte#6859) [`d15a445`](https://github.com/janosh/svelte-multiselect/commit/d15a44504707c178c67e22318b2cc6095b1b192f)
366
+
367
+ #### [v1.2.0](https://github.com/janosh/svelte-multiselect/compare/v1.1.13...v1.2.0)
368
+
369
+ > 12 October 2021
370
+
371
+ - add src/lib/index.ts for package path export '.' (closes #11) [`#11`](https://github.com/janosh/svelte-multiselect/issues/11)
372
+
373
+ #### [v1.1.13](https://github.com/janosh/svelte-multiselect/compare/v1.1.12...v1.1.13)
374
+
375
+ > 12 October 2021
376
+
377
+ - add src/lib/index.ts for package path export '.' (closes #11) [`#11`](https://github.com/janosh/svelte-multiselect/issues/11)
378
+
379
+ #### [v1.1.12](https://github.com/janosh/svelte-multiselect/compare/v1.1.11...v1.1.12)
380
+
381
+ > 11 October 2021
382
+
383
+ - Add new prop disabledOptions [`#9`](https://github.com/janosh/svelte-multiselect/pull/9)
384
+ - add pre-commit hooks [`dfb6399`](https://github.com/janosh/svelte-multiselect/commit/dfb6399a77b705f8e5979eb887d345a5f52ff929)
385
+ - [pre-commit.ci] pre-commit autoupdate [`b69425d`](https://github.com/janosh/svelte-multiselect/commit/b69425d18473122f1af889d2f48c60d02e43b99f)
386
+
387
+ #### [v1.1.11](https://github.com/janosh/svelte-multiselect/compare/v1.1.10...v1.1.11)
388
+
389
+ > 3 September 2021
390
+
391
+ - fix removeAll button not dispatching remove and change events (closes #7) [`#7`](https://github.com/janosh/svelte-multiselect/issues/7)
392
+ - remove @tsconfig/svelte, update deps [`9b2c231`](https://github.com/janosh/svelte-multiselect/commit/9b2c23181f4a96bd9d002f535dd669153e772b72)
393
+ - add type=(add|remove) detail to 'change' event dispatch [`8290458`](https://github.com/janosh/svelte-multiselect/commit/8290458b898292a28d65710d6941f193fb9964aa)
394
+
395
+ #### [v1.1.10](https://github.com/janosh/svelte-multiselect/compare/v1.1.9...v1.1.10)
396
+
397
+ > 12 August 2021
398
+
399
+ - add `on:change` event and document events in readme (closes #5) [`#5`](https://github.com/janosh/svelte-multiselect/issues/5)
400
+
401
+ #### [v1.1.9](https://github.com/janosh/svelte-multiselect/compare/v1.1.8...v1.1.9)
402
+
403
+ > 12 July 2021
404
+
405
+ - convert to typescript [`bd391c5`](https://github.com/janosh/svelte-multiselect/commit/bd391c5aba615ab41e2f561f81e057928a7064a8)
406
+ - update to @sveltejs/kit@1.0.0-next.124+ to use svelte field in `package.json` [`2367e38`](https://github.com/janosh/svelte-multiselect/commit/2367e38d699e503e6dc98808904278f96eb54ee7)
407
+
408
+ #### [v1.1.8](https://github.com/janosh/svelte-multiselect/compare/v1.1.7...v1.1.8)
409
+
410
+ > 7 July 2021
411
+
412
+ - turn hard-coded remove button titles into props [`c35162b`](https://github.com/janosh/svelte-multiselect/commit/c35162b0d0c1ed183bc23dbf15b0ff46638cbb3b)
413
+ - guard against selected being nullish, keep ul.options in the DOM even if showoptions is false to allow selecting in dev tools for styling [`b9bd576`](https://github.com/janosh/svelte-multiselect/commit/b9bd576f6f76ec86ebeff1d899d8947bef64f66f)
414
+
415
+ #### [v1.1.7](https://github.com/janosh/svelte-multiselect/compare/v1.1.6...v1.1.7)
416
+
417
+ > 5 July 2021
418
+
419
+ - add css classes as props for use with tailwind (closes #3) [`#3`](https://github.com/janosh/svelte-multiselect/issues/3)
420
+
421
+ #### [v1.1.6](https://github.com/janosh/svelte-multiselect/compare/v1.1.5...v1.1.6)
422
+
423
+ > 23 June 2021
424
+
425
+ - fix: don't remove tags if search string is non-empty, open options on clicking selected tags (#2) [`5ffed50`](https://github.com/janosh/svelte-multiselect/commit/5ffed50617f47dba6ffbafd6ce266fa6e064c7de)
426
+ - update svelte-toc to fix deploy [`d5279dd`](https://github.com/janosh/svelte-multiselect/commit/d5279dd11279509493030aeb26295873929b2253)
427
+
428
+ #### [v1.1.5](https://github.com/janosh/svelte-multiselect/compare/v1.1.4...v1.1.5)
429
+
430
+ > 22 June 2021
431
+
432
+ - convert to `svelte-kit package` [`9db3cfb`](https://github.com/janosh/svelte-multiselect/commit/9db3cfb5b6e2db844961be5bc59fc12e5d5b6b76)
433
+
434
+ #### [v1.1.4](https://github.com/janosh/svelte-multiselect/compare/v1.1.3...v1.1.4)
435
+
436
+ > 21 June 2021
437
+
438
+ - fix setting initial value for selected, fix setting class `'selected'` in single mode [`16d11de`](https://github.com/janosh/svelte-multiselect/commit/16d11de77567f9d30e37e815dfcb9a7d580d6500)
439
+
440
+ #### [v1.1.3](https://github.com/janosh/svelte-multiselect/compare/v1.1.2...v1.1.3)
441
+
442
+ > 20 June 2021
443
+
444
+ - replace prop single with maxSelect to specify any number of selectable options, add class single to div.multiselect if maxSelect===1 (#2) [`36e916f`](https://github.com/janosh/svelte-multiselect/commit/36e916f4a42d395c394ddff47364a17fd22a7ec1)
445
+ - add linked headings [`2eedf9a`](https://github.com/janosh/svelte-multiselect/commit/2eedf9aa24512ff96f8ccff564d3a1fa7615388a)
446
+
447
+ #### [v1.1.2](https://github.com/janosh/svelte-multiselect/compare/v1.1.1...v1.1.2)
448
+
449
+ > 28 May 2021
450
+
451
+ - add css var props [`f591814`](https://github.com/janosh/svelte-multiselect/commit/f5918141805cfc6acda28c836a57c3df81fa758f)
452
+
453
+ #### [v1.1.1](https://github.com/janosh/svelte-multiselect/compare/v1.1.0...v1.1.1)
454
+
455
+ > 25 May 2021
456
+
457
+ - add GitHubCorner.svelte for link to repo [`e80a402`](https://github.com/janosh/svelte-multiselect/commit/e80a402556783108bc5dc626f9816b647e2c937f)
458
+ - remove selected tokens with backspace [`c5d7495`](https://github.com/janosh/svelte-multiselect/commit/c5d7495a43b945dd56ad06fbe639de0db542d5f4)
459
+ - add readme badges [`992eaa4`](https://github.com/janosh/svelte-multiselect/commit/992eaa43ec19841b3035a5dcf9996eaf58316fa8)
460
+ - demo site fix stripping start of readme for docs [`107273d`](https://github.com/janosh/svelte-multiselect/commit/107273de356f176cb0fc94f28ae4f2e773b62d42)
461
+ - add `svelte-toc` table of contents to demo site [`36aa1c5`](https://github.com/janosh/svelte-multiselect/commit/36aa1c523c5bc3acb14e9613b61c04ffd54c6100)
462
+
463
+ #### [v1.1.0](https://github.com/janosh/svelte-multiselect/compare/v1.0.1...v1.1.0)
464
+
465
+ > 9 May 2021
466
+
467
+ - import readme on demo site (more DRY) [`c0e4924`](https://github.com/janosh/svelte-multiselect/commit/c0e49246e76a81600bb35931fd7d30f6f6aeb550)
468
+ - remove unused `example.svx` [`2138caa`](https://github.com/janosh/svelte-multiselect/commit/2138caa171f20a2f80c2e75d0dffd066caf17a83)
469
+ - rename package dir, improve readme [`0150378`](https://github.com/janosh/svelte-multiselect/commit/015037848f666a76b24b93603764084b41611740)
470
+
471
+ #### [v1.0.1](https://github.com/janosh/svelte-multiselect/compare/v1.0.0...v1.0.1)
472
+
473
+ > 8 May 2021
474
+
475
+ - remove hidden input for storing currently selected options as JSON [`802a219`](https://github.com/janosh/svelte-multiselect/commit/802a2195a28986c219298d7d9e7ca47f2aaf7db6)
476
+
477
+ #### v1.0.0
478
+
479
+ > 7 May 2021
480
+
481
+ - initial commit [`14dd38a`](https://github.com/janosh/svelte-multiselect/commit/14dd38adb06a8899e39efabdb114faab943cedf0)
package/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export { default } from './MultiSelect.svelte';
2
- export declare type Option = string | number | ObjectOption;
3
- export declare type ObjectOption = {
2
+ export type Option = string | number | ObjectOption;
3
+ export type ObjectOption = {
4
4
  label: string | number;
5
5
  value?: unknown;
6
6
  title?: string;
@@ -10,7 +10,7 @@ export declare type ObjectOption = {
10
10
  selectedTitle?: string;
11
11
  [key: string]: unknown;
12
12
  };
13
- export declare type DispatchEvents = {
13
+ export type DispatchEvents = {
14
14
  add: {
15
15
  option: Option;
16
16
  };
@@ -32,7 +32,7 @@ export declare type DispatchEvents = {
32
32
  event: Event;
33
33
  };
34
34
  };
35
- export declare type MultiSelectEvents = {
35
+ export type MultiSelectEvents = {
36
36
  [key in keyof DispatchEvents]: CustomEvent<DispatchEvents[key]>;
37
37
  } & {
38
38
  blur: FocusEvent;
package/package.json CHANGED
@@ -2,32 +2,33 @@
2
2
  "name": "svelte-multiselect",
3
3
  "description": "Svelte multi-select component",
4
4
  "author": "Janosh Riebesell <janosh.riebesell@gmail.com>",
5
- "homepage": "https://svelte-multiselect.netlify.app",
5
+ "homepage": "https://janosh.github.io/svelte-multiselect",
6
6
  "repository": "https://github.com/janosh/svelte-multiselect",
7
7
  "license": "MIT",
8
- "version": "8.1.0",
8
+ "version": "8.2.1",
9
9
  "type": "module",
10
10
  "svelte": "index.js",
11
11
  "main": "index.js",
12
12
  "bugs": "https://github.com/janosh/svelte-multiselect/issues",
13
13
  "devDependencies": {
14
14
  "@iconify/svelte": "^3.0.0",
15
- "@playwright/test": "^1.27.1",
15
+ "@playwright/test": "^1.28.0",
16
16
  "@sveltejs/adapter-static": "1.0.0-next.48",
17
- "@sveltejs/kit": "1.0.0-next.544",
18
- "@sveltejs/package": "1.0.0-next.5",
19
- "@sveltejs/vite-plugin-svelte": "^1.1.1",
20
- "@typescript-eslint/eslint-plugin": "^5.42.1",
21
- "@typescript-eslint/parser": "^5.42.1",
22
- "@vitest/coverage-c8": "^0.25.1",
23
- "eslint": "^8.27.0",
17
+ "@sveltejs/kit": "1.0.0-next.553",
18
+ "@sveltejs/package": "1.0.0-next.6",
19
+ "@sveltejs/vite-plugin-svelte": "^1.2.0",
20
+ "@typescript-eslint/eslint-plugin": "^5.43.0",
21
+ "@typescript-eslint/parser": "^5.43.0",
22
+ "@vitest/coverage-c8": "^0.25.2",
23
+ "eslint": "^8.28.0",
24
24
  "eslint-plugin-svelte3": "^4.0.0",
25
25
  "hastscript": "^7.1.0",
26
26
  "highlight.js": "^11.6.0",
27
27
  "jsdom": "^20.0.2",
28
28
  "mdsvex": "^0.10.6",
29
+ "mdsvexamples": "^0.3.2",
29
30
  "prettier": "^2.7.1",
30
- "prettier-plugin-svelte": "^2.8.0",
31
+ "prettier-plugin-svelte": "^2.8.1",
31
32
  "rehype-autolink-headings": "^6.1.1",
32
33
  "rehype-slug": "^5.1.0",
33
34
  "svelte": "^3.53.1",
@@ -37,9 +38,9 @@
37
38
  "svelte-toc": "^0.4.1",
38
39
  "svelte2tsx": "^0.5.20",
39
40
  "tslib": "^2.4.1",
40
- "typescript": "^4.8.4",
41
- "vite": "^3.2.3",
42
- "vitest": "^0.25.1"
41
+ "typescript": "^4.9.3",
42
+ "vite": "^3.2.4",
43
+ "vitest": "^0.25.2"
43
44
  },
44
45
  "keywords": [
45
46
  "svelte",
package/readme.md CHANGED
@@ -6,7 +6,7 @@
6
6
  <h4 align="center">
7
7
 
8
8
  [![Tests](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml)
9
- [![Netlify Status](https://api.netlify.com/api/v1/badges/a45b62c3-ea45-4cfd-9912-77ec4fc8d7e8/deploy-status)](https://app.netlify.com/sites/svelte-multiselect/deploys)
9
+ [![GitHub Pages](https://github.com/janosh/svelte-multiselect/actions/workflows/gh-pages.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/gh-pages.yml)
10
10
  [![NPM version](https://img.shields.io/npm/v/svelte-multiselect?logo=NPM&color=purple)](https://npmjs.com/package/svelte-multiselect)
11
11
  [![Needs Svelte version](https://img.shields.io/npm/dependency-version/svelte-multiselect/dev/svelte?color=teal&logo=Svelte&label=Svelte)](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
12
12
  [![REPL](https://img.shields.io/badge/Svelte-REPL-blue?label=Try%20it!)](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05)
@@ -16,12 +16,12 @@
16
16
 
17
17
  <p align="center"><strong>
18
18
  Keyboard-friendly, accessible and highly customizable multi-select component.
19
- <a class="hide-in-docs" href="https://svelte-multiselect.netlify.app">View the docs</a>
19
+ <a class="hide-in-docs" href="https://janosh.github.io/svelte-multiselect">View the docs</a>
20
20
  </strong></p>
21
21
 
22
22
  <slot name="examples" />
23
23
 
24
- ## Features
24
+ ## 💡 &nbsp; Features
25
25
 
26
26
  - **Bindable:** `bind:selected` gives you an array of the currently selected options. Thanks to Svelte's 2-way binding, it can also control the component state externally through assignment `selected = ['foo', 42]`.
27
27
  - **Keyboard friendly** for mouse-less form completion
@@ -30,11 +30,11 @@
30
30
  - **Searchable:** start typing to filter options
31
31
  - **Tagging:** selected options are listed as tags within the input
32
32
  - **Single / multiple select:** pass `maxSelect={1, 2, 3, ...}` prop to restrict the number of selectable options
33
- - **Configurable:** see [props](#props)
33
+ - **Configurable:** see props
34
34
 
35
35
  <slot name="nav" />
36
36
 
37
- ## Recent breaking changes
37
+ ## 📜 &nbsp; Breaking changes
38
38
 
39
39
  - **6.1.0**&nbsp; The `dispatch` events `focus` and `blur` were renamed to `open` and `close`, respectively. These actions refer to the dropdown list, i.e. `<MultiSelect on:open={(event) => console.log(event)}>` will trigger when the dropdown list opens. The focus and blur events are now regular DOM (not Svelte `dispatch`) events emitted by the `<input>` node. [PR 120](https://github.com/janosh/svelte-multiselect/pull/120).
40
40
  - **v7.0.0**&nbsp; `selected` (as well `selectedLabels` and `selectedValues`) used to be arrays always. Now, if `maxSelect=1`, they will no longer be a length-1 array but simply a single a option (label/value respectively) or `null` if no option is selected. [PR 123](https://github.com/janosh/svelte-multiselect/pull/123).
@@ -42,7 +42,7 @@
42
42
  - Props `selectedLabels` and `selectedValues` were removed. If you were using them, they were equivalent to assigning `bind:selected` to a local variable and then running `selectedLabels = selected.map(option => option.label)` and `selectedValues = selected.map(option => option.value)` if your options were objects with `label` and `value` keys. If they were simple strings/numbers, there was no point in using `selected{Labels,Values}` anyway. [PR 138](https://github.com/janosh/svelte-multiselect/pull/138)
43
43
  - Prop `noOptionsMsg` was renamed to `noMatchingOptionsMsg`. [PR 133](https://github.com/janosh/svelte-multiselect/pull/133).
44
44
 
45
- ## Installation
45
+ ## 🔨 &nbsp; Installation
46
46
 
47
47
  ```sh
48
48
  npm install -D svelte-multiselect
@@ -50,7 +50,7 @@ pnpm add -D svelte-multiselect
50
50
  yarn add -D svelte-multiselect
51
51
  ```
52
52
 
53
- ## Usage
53
+ ## 📙 &nbsp; Usage
54
54
 
55
55
  ```svelte
56
56
  <script>
@@ -61,14 +61,14 @@ yarn add -D svelte-multiselect
61
61
  let selected = []
62
62
  </script>
63
63
 
64
- Favorite Frontend Frameworks?
64
+ Favorite Frontend Tools?
65
65
 
66
66
  <code>selected = {JSON.stringify(selected)}</code>
67
67
 
68
68
  <MultiSelect bind:selected options={ui_libs} />
69
69
  ```
70
70
 
71
- ## Props
71
+ ## 🔣 &nbsp; Props
72
72
 
73
73
  Full list of props/bindable variables for this component. The `Option` type you see below is defined in [`src/lib/index.ts`](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/index.ts) and can be imported as `import { type Option } from 'svelte-multiselect'`.
74
74
 
@@ -169,7 +169,7 @@ Full list of props/bindable variables for this component. The `Option` type you
169
169
  One of `true`, `false` or `'desktop'`. Whether to set the cursor back to the input element after selecting an element. 'desktop' means only do so if current window width is larger than the current value of `breakpoint` prop (default 800).
170
170
 
171
171
  1. ```ts
172
- form_input: HTMLInputElement
172
+ form_input: HTMLInputElement | null = null
173
173
  ```
174
174
 
175
175
  Handle to the `<input>` DOM node that's responsible for form validity checks and passing selected options to form submission handlers. Only available after component mounts (`null` before then).
@@ -243,7 +243,7 @@ Full list of props/bindable variables for this component. The `Option` type you
243
243
  name: string | null = null
244
244
  ```
245
245
 
246
- Applied to the `<input>` element. Sets the key of this field in a submitted form data object. See [form example](https://svelte-multiselect.netlify.app/form).
246
+ Applied to the `<input>` element. Sets the key of this field in a submitted form data object. See [form example](https://janosh.github.io/svelte-multiselect/form).
247
247
 
248
248
  1. ```ts
249
249
  noMatchingOptionsMsg: string = `No matching options`
@@ -326,11 +326,17 @@ Full list of props/bindable variables for this component. The `Option` type you
326
326
 
327
327
  Array of currently selected options. Supports 2-way binding `bind:selected={[1, 2, 3]}` to control component state externally. Can be passed as prop to set pre-selected options that will already be populated when component mounts before any user interaction.
328
328
 
329
+ 1. ```ts
330
+ selectedOptionsDraggable: boolean = true
331
+ ```
332
+
333
+ Whether selected options are draggable so users can change their order.
334
+
329
335
  1. ```ts
330
336
  sortSelected: boolean | ((op1: Option, op2: Option) => number) = false
331
337
  ```
332
338
 
333
- Default behavior is to render selected items in the order they were chosen. `sortSelected={true}` uses default JS array sorting. A compare function enables custom logic for sorting selected options. See the [`/sort-selected`](https://svelte-multiselect.netlify.app/sort-selected) example.
339
+ Default behavior is to render selected items in the order they were chosen. `sortSelected={true}` uses default JS array sorting. A compare function enables custom logic for sorting selected options. See the [`/sort-selected`](https://janosh.github.io/svelte-multiselect/sort-selected) example.
334
340
 
335
341
  1. ```ts
336
342
  value: Option | Option[] | null = null
@@ -338,7 +344,7 @@ Full list of props/bindable variables for this component. The `Option` type you
338
344
 
339
345
  If `maxSelect={1}`, `value` will be the single item in `selected` (or `null` if `selected` is empty). If `maxSelect != 1`, `maxSelect` and `selected` are equal. Warning: `value` supports 1-way binding only, meaning `bind:value` will update `value` when internal component state changes but changing `value` externally will not update internal component state. This is because `value` is already reactive to `selected` and making `selected` reactive to `value` would be cyclic. Suggestions for better solutions that solve both [#86](https://github.com/janosh/svelte-multiselect/issues/86) and [#136](https://github.com/janosh/svelte-multiselect/issues/136) welcome!
340
346
 
341
- ## Slots
347
+ ## 🎰 &nbsp; Slots
342
348
 
343
349
  `MultiSelect.svelte` has 3 named slots:
344
350
 
@@ -369,7 +375,7 @@ Example:
369
375
  </MultiSelect>
370
376
  ```
371
377
 
372
- ## Events
378
+ ## 🎬 &nbsp; Events
373
379
 
374
380
  `MultiSelect.svelte` dispatches the following events:
375
381
 
@@ -432,7 +438,7 @@ The above list of events are [Svelte `dispatch` events](https://svelte.dev/tutor
432
438
  />
433
439
  ```
434
440
 
435
- ## TypeScript
441
+ ## 🦺 &nbsp; TypeScript
436
442
 
437
443
  TypeScript users can import the types used for internal type safety:
438
444
 
@@ -450,7 +456,7 @@ TypeScript users can import the types used for internal type safety:
450
456
  </script>
451
457
  ```
452
458
 
453
- ## Styling
459
+ ## ✨ &nbsp; Styling
454
460
 
455
461
  There are 3 ways to style this component. To understand which options do what, it helps to keep in mind this simplified DOM structure of the component:
456
462
 
@@ -509,7 +515,7 @@ If you only want to make small adjustments, you can pass the following CSS varia
509
515
  - `background: var(--sms-li-selected-bg)`: Background of selected list items in options pane.
510
516
  - `color: var(--sms-li-selected-color)`: Text color of selected list items in options pane.
511
517
  - `div.multiselect > ul.options > li.active`
512
- - `background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)))`: Background of active dropdown item. Items become active either by mouseover or by navigating to them with arrow keys.
518
+ - `background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)))`: Background of active options. Options in the dropdown list become active either by mouseover or by navigating to them with arrow keys. Selected options become active when `selectedOptionsDraggable=true` and an option is being dragged to a new position. Note the active option in that case is not the dragged option but the option under it whose place it will take on drag end.
513
519
  - `div.multiselect > ul.options > li.disabled`
514
520
  - `background: var(--sms-li-disabled-bg, #f5f5f6)`: Background of disabled options in the dropdown list.
515
521
  - `color: var(--sms-li-disabled-text, #b8b8b8)`: Text color of disabled option in the dropdown list.
@@ -553,7 +559,7 @@ This simplified version of the DOM structure of the component shows where these
553
559
 
554
560
  ### With global CSS
555
561
 
556
- Odd as it may seem, you get the most fine-grained control over the styling of every part of this component by using the following `:global()` CSS selectors. `ul.selected` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component is in its `open` state. See also [simplified DOM structure](#styling).
562
+ Odd as it may seem, you get the most fine-grained control over the styling of every part of this component by using the following `:global()` CSS selectors. `ul.selected` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component is in its `open` state. See also [simplified DOM structure](#--styling).
557
563
 
558
564
  ```css
559
565
  :global(div.multiselect) {
@@ -601,19 +607,10 @@ Odd as it may seem, you get the most fine-grained control over the styling of ev
601
607
  }
602
608
  ```
603
609
 
604
- ## Want to contribute?
610
+ ## 🆕 &nbsp; Changelog
605
611
 
606
- To submit a PR, clone the repo, install dependencies and start the dev server to see changes as you make them.
612
+ [View the changelog](changelog.md).
607
613
 
608
- ```sh
609
- git clone https://github.com/janosh/svelte-multiselect
610
- cd svelte-multiselect
611
- pnpm install
612
- pnpm dev
613
- ```
614
-
615
- To make sure your changes didn't break anything, you can run the full test suite (which also runs in CI) using:
614
+ ## 🙏 &nbsp; Contributing
616
615
 
617
- ```sh
618
- pnpm test
619
- ```
616
+ Here are some steps to [get you started](contributing.md) if you'd like to contribute to this project!