svelte-multiselect 8.0.2 → 8.0.4

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 (4) hide show
  1. package/MultiSelect.svelte +9 -10
  2. package/icons/Disabled.svelte +2 -2
  3. package/package.json +6 -5
  4. package/readme.md +8 -11
package/MultiSelect.svelte CHANGED
@@ -63,11 +63,12 @@ const get_label = (op) => (op instanceof Object ? op.label : op);
63
63
  $: value = maxSelect === 1 ? selected[0] ?? null : selected;
64
64
  let wiggle = false; // controls wiggle animation when user tries to exceed maxSelect
65
65
  if (!(options?.length > 0)) {
66
- if (allowUserOptions) {
66
+ if (allowUserOptions || loading || disabled) {
67
67
  options = []; // initializing as array avoids errors when component mounts
68
68
  }
69
69
  else {
70
- // only error for empty options if user is not allowed to create custom options
70
+ // only error for empty options if user is not allowed to create custom
71
+ // options and loading is false
71
72
  console.error(`MultiSelect received no options`);
72
73
  }
73
74
  }
@@ -237,21 +238,19 @@ async function handle_keydown(event) {
237
238
  // if no option is active and no options are matching, do nothing
238
239
  return;
239
240
  }
241
+ // if none of the abvove special cases apply, we make next/prev option
242
+ // active with wrap around at both ends
240
243
  const increment = event.key === `ArrowUp` ? -1 : 1;
241
244
  activeIndex = (activeIndex + increment) % matchingOptions.length;
242
- // % in JS behaves like remainder operator, not real modulo, so negative numbers stay negative
245
+ // in JS % behaves like remainder operator, not real modulo, so negative numbers stay negative
243
246
  // need to do manual wrap around at 0
244
247
  if (activeIndex < 0)
245
248
  activeIndex = matchingOptions.length - 1;
246
249
  if (autoScroll) {
247
- // TODO This ugly timeout hack is needed to properly scroll element into view when wrapping
248
- // around start/end of option list. Find a better solution than waiting 10 ms.
249
250
  await tick();
250
251
  const li = document.querySelector(`ul.options > li.active`);
251
- if (li) {
252
- li.parentNode?.scrollIntoView?.({ block: `center` });
252
+ if (li)
253
253
  li.scrollIntoViewIfNeeded?.();
254
- }
255
254
  }
256
255
  }
257
256
  // on backspace key: remove last selected option
@@ -373,7 +372,7 @@ function on_click_outside(event) {
373
372
  {/if}
374
373
  {#if disabled}
375
374
  <slot name="disabled-icon">
376
- <DisabledIcon width="15px" />
375
+ <DisabledIcon width="14pt" style="margin: 0 2pt;" data-name="disabled-icon" />
377
376
  </slot>
378
377
  {:else if selected.length > 0}
379
378
  {#if maxSelect && (maxSelect > 1 || maxSelectMsg)}
@@ -480,7 +479,7 @@ function on_click_outside(event) {
480
479
  padding: var(--sms-padding, 0 3pt);
481
480
  color: var(--sms-text-color);
482
481
  font-size: var(--sms-font-size, inherit);
483
- min-height: var(--sms-min-height, 19pt);
482
+ min-height: var(--sms-min-height, 22pt);
484
483
  margin: var(--sms-margin);
485
484
  }
486
485
  :where(div.multiselect.open) {
package/icons/Disabled.svelte CHANGED
@@ -1,6 +1,6 @@
1
+ <!-- https://api.iconify.design/fe:disabled.svg -->
1
2
  <svg {...$$props} viewBox="0 0 24 24" fill="currentColor">
2
- <path fill="none" d="M0 0h24v24H0V0z" />
3
3
  <path
4
- d="M14.48 11.95c.17.02.34.05.52.05 2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4c0 .18.03.35.05.52l3.43 3.43zm2.21 2.21L22.53 20H23v-2c0-2.14-3.56-3.5-6.31-3.84zM0 3.12l4 4V10H1v2h3v3h2v-3h2.88l2.51 2.51C9.19 15.11 7 16.3 7 18v2h9.88l4 4 1.41-1.41L1.41 1.71 0 3.12zM6.88 10H6v-.88l.88.88z"
4
+ d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Zm-4.906-3.68L18.32 7.094A8 8 0 0 1 7.094 18.32ZM5.68 16.906A8 8 0 0 1 16.906 5.68L5.68 16.906Z"
5
5
  />
6
6
  </svg>
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "homepage": "https://svelte-multiselect.netlify.app",
6
6
  "repository": "https://github.com/janosh/svelte-multiselect",
7
7
  "license": "MIT",
8
- "version": "8.0.2",
8
+ "version": "8.0.4",
9
9
  "type": "module",
10
10
  "svelte": "index.js",
11
11
  "main": "index.js",
@@ -14,11 +14,12 @@
14
14
  "@iconify/svelte": "^3.0.0",
15
15
  "@playwright/test": "^1.27.1",
16
16
  "@sveltejs/adapter-static": "1.0.0-next.48",
17
- "@sveltejs/kit": "1.0.0-next.538",
17
+ "@sveltejs/kit": "1.0.0-next.544",
18
18
  "@sveltejs/package": "1.0.0-next.5",
19
- "@sveltejs/vite-plugin-svelte": "^1.1.0",
19
+ "@sveltejs/vite-plugin-svelte": "^1.1.1",
20
20
  "@typescript-eslint/eslint-plugin": "^5.42.1",
21
21
  "@typescript-eslint/parser": "^5.42.1",
22
+ "@vitest/coverage-c8": "^0.25.1",
22
23
  "eslint": "^8.27.0",
23
24
  "eslint-plugin-svelte3": "^4.0.0",
24
25
  "hastscript": "^7.1.0",
@@ -29,7 +30,7 @@
29
30
  "prettier-plugin-svelte": "^2.8.0",
30
31
  "rehype-autolink-headings": "^6.1.1",
31
32
  "rehype-slug": "^5.1.0",
32
- "svelte": "^3.52.0",
33
+ "svelte": "^3.53.1",
33
34
  "svelte-check": "^2.9.2",
34
35
  "svelte-github-corner": "^0.1.0",
35
36
  "svelte-preprocess": "^4.10.7",
@@ -38,7 +39,7 @@
38
39
  "tslib": "^2.4.1",
39
40
  "typescript": "^4.8.4",
40
41
  "vite": "^3.2.3",
41
- "vitest": "^0.25.0"
42
+ "vitest": "^0.25.1"
42
43
  },
43
44
  "keywords": [
44
45
  "svelte",
package/readme.md CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  <slot name="examples" />
23
23
 
24
- ## Key features
24
+ ## 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
@@ -36,14 +36,11 @@
36
36
 
37
37
  ## Recent breaking changes
38
38
 
39
- - **v6.0.0**&nbsp; The prop `showOptions` which controls whether the list of dropdown options is currently open or closed was renamed to `open`. See [PR 103](https://github.com/janosh/svelte-multiselect/pull/103).
40
- - **v6.0.1**&nbsp; The prop `disabledTitle` which sets the title of the `<MultiSelect>` `<input>` node if in `disabled` mode was renamed to `disabledInputTitle`. See [PR 105](https://github.com/janosh/svelte-multiselect/pull/105).
41
- - **v6.0.1**&nbsp; The default margin of `1em 0` on the wrapper `div.multiselect` was removed. Instead, there is now a new CSS variable `--sms-margin`. Set it to `--sms-margin: 1em 0;` to restore the old appearance. See [PR 105](https://github.com/janosh/svelte-multiselect/pull/105).
42
- - **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. See [PR 120](https://github.com/janosh/svelte-multiselect/pull/120).
43
- - **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. See [PR 123](https://github.com/janosh/svelte-multiselect/pull/123).
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
+ - **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).
44
41
  - **8.0.0**&nbsp;
45
- - 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. See [PR 138](https://github.com/janosh/svelte-multiselect/pull/138)
46
- - Prop `noOptionsMsg` was renamed to `noMatchingOptionsMsg`. See [PR 133](https://github.com/janosh/svelte-multiselect/pull/133).
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
+ - Prop `noOptionsMsg` was renamed to `noMatchingOptionsMsg`. [PR 133](https://github.com/janosh/svelte-multiselect/pull/133).
47
44
 
48
45
  ## Installation
49
46
 
@@ -98,7 +95,7 @@ Full list of props/bindable variables for this component. The `Option` type you
98
95
  ```
99
96
 
100
97
  Whether users can enter values that are not in the dropdown list. `true` means add user-defined options to the selected list only, `'append'` means add to both options and selected.
101
- If `allowUserOptions` is `true` or `'append'` then the type `object | number | string` of entered value is determined from the first option of the list to keep type homogeneity.
98
+ If `allowUserOptions` is `true` or `'append'` then the type `object | number | string` of entered value is determined by `typeof options[0]` (i.e. the first option in the dropdown list) to keep type homogeneity.
102
99
 
103
100
  1. ```ts
104
101
  autocomplete: string = `off`
@@ -410,7 +407,7 @@ For example, here's how you might annoy your users with an alert every time one
410
407
 
411
408
  > Note: Depending on the data passed to the component the `options(s)` payload will either be objects or simple strings/numbers.
412
409
 
413
- This component also forwards many DOM events from the `<input>` node: `blur`, `change`, `click`, `keydown`, `keyup`, `mousedown`, `mouseenter`, `mouseleave`, `touchcancel`, `touchend`, `touchmove`, `touchstart`. You can register listeners for these just like for the above [Svelte `dispatch` events](https://svelte.dev/tutorial/component-events):
410
+ The above list of events are [Svelte `dispatch` events](https://svelte.dev/tutorial/component-events). This component also forwards many DOM events from the `<input>` node: `blur`, `change`, `click`, `keydown`, `keyup`, `mousedown`, `mouseenter`, `mouseleave`, `touchcancel`, `touchend`, `touchmove`, `touchstart`. Registering listeners for these events works the same:
414
411
 
415
412
  ```svelte
416
413
  <MultiSelect
@@ -464,7 +461,7 @@ If you only want to make small adjustments, you can pass the following CSS varia
464
461
  - `padding: var(--sms-padding, 0 3pt)`
465
462
  - `background: var(--sms-bg)`
466
463
  - `color: var(--sms-text-color)`
467
- - `min-height: var(--sms-min-height, 19pt)`
464
+ - `min-height: var(--sms-min-height, 22pt)`
468
465
  - `width: var(--sms-width)`
469
466
  - `max-width: var(--sms-max-width)`
470
467
  - `margin: var(--sms-margin)`