svelte-multiselect 5.0.0 → 5.0.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 (5) hide show
  1. package/MultiSelect.svelte +10 -10
  2. package/MultiSelect.svelte.d.ts +4 -7
  3. package/index.d.ts +4 -1
  4. package/package.json +2 -1
  5. package/readme.md +4 -4
package/MultiSelect.svelte CHANGED
@@ -52,9 +52,9 @@ if (!Array.isArray(selected))
52
52
  console.error(`selected prop must be an array`);
53
53
  const dispatch = createEventDispatcher();
54
54
  let activeMsg = false; // controls active state of <li>{addOptionMsg}</li>
55
- // process proto options to full ones with mandatory labels
56
- const get_value = (option) => (option instanceof Object ? option.value : option);
57
- const get_label = (option) => (option instanceof Object ? option.label : option);
55
+ const get_label = (op) => (op instanceof Object ? op.label : op);
56
+ // fallback on label if option is object and value is undefined
57
+ const get_value = (op) => (op instanceof Object ? op.value ?? op.label : op);
58
58
  let wiggle = false; // controls wiggle animation when user tries to exceed maxSelect
59
59
  $: selectedLabels = selected.map(get_label);
60
60
  $: selectedValues = selected.map(get_value);
@@ -75,7 +75,7 @@ function add(label) {
75
75
  // to prevent duplicate selection, we could add `&& !selectedLabels.includes(label)`
76
76
  if (maxSelect === null || maxSelect === 1 || selected.length < maxSelect) {
77
77
  // first check if we find option in the options list
78
- let option = options.find((op) => get_value(op) === label);
78
+ let option = options.find((op) => get_label(op) === label);
79
79
  if (!option && // this has the side-effect of not allowing to user to add the same
80
80
  // custom option twice in append mode
81
81
  [true, `append`].includes(allowUserOptions) &&
@@ -212,14 +212,14 @@ async function handleKeydown(event) {
212
212
  remove(selectedLabels.at(-1));
213
213
  }
214
214
  }
215
- const removeAll = () => {
215
+ function remove_all() {
216
216
  dispatch(`removeAll`, { options: selected });
217
217
  dispatch(`change`, { options: selected, type: `removeAll` });
218
218
  selected = [];
219
219
  searchText = ``;
220
- };
220
+ }
221
221
  $: isSelected = (label) => selectedLabels.includes(label);
222
- const handleEnterAndSpaceKeys = (handler) => (event) => {
222
+ const if_enter_or_space = (handler) => (event) => {
223
223
  if ([`Enter`, `Space`].includes(event.code)) {
224
224
  event.preventDefault();
225
225
  handler();
@@ -267,7 +267,7 @@ const handleEnterAndSpaceKeys = (handler) => (event) => {
267
267
  {#if !disabled}
268
268
  <button
269
269
  on:mouseup|stopPropagation={() => remove(get_label(option))}
270
- on:keydown={handleEnterAndSpaceKeys(() => remove(get_label(option)))}
270
+ on:keydown={if_enter_or_space(() => remove(get_label(option)))}
271
271
  type="button"
272
272
  title="{removeBtnTitle} {get_label(option)}"
273
273
  >
@@ -316,8 +316,8 @@ const handleEnterAndSpaceKeys = (handler) => (event) => {
316
316
  type="button"
317
317
  class="remove-all"
318
318
  title={removeAllTitle}
319
- on:mouseup|stopPropagation={removeAll}
320
- on:keydown={handleEnterAndSpaceKeys(removeAll)}
319
+ on:mouseup|stopPropagation={remove_all}
320
+ on:keydown={if_enter_or_space(remove_all)}
321
321
  >
322
322
  <CrossIcon width="15px" />
323
323
  </button>
package/MultiSelect.svelte.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
- import { Option } from './';
2
+ import { CustomEvents, Option } from './';
3
3
  declare const __propDef: {
4
4
  props: {
5
5
  searchText?: string | undefined;
@@ -11,7 +11,7 @@ declare const __propDef: {
11
11
  options: Option[];
12
12
  selected?: Option[] | undefined;
13
13
  selectedLabels?: (string | number)[] | undefined;
14
- selectedValues?: (string | number)[] | undefined;
14
+ selectedValues?: unknown[] | undefined;
15
15
  input?: HTMLInputElement | null | undefined;
16
16
  outerDiv?: HTMLDivElement | null | undefined;
17
17
  placeholder?: string | undefined;
@@ -39,11 +39,6 @@ declare const __propDef: {
39
39
  invalid?: boolean | undefined;
40
40
  sortSelected?: boolean | ((op1: Option, op2: Option) => number) | undefined;
41
41
  };
42
- events: {
43
- mousedown: MouseEvent;
44
- } & {
45
- [evt: string]: CustomEvent<any>;
46
- };
47
42
  slots: {
48
43
  selected: {
49
44
  option: Option;
@@ -56,6 +51,8 @@ declare const __propDef: {
56
51
  idx: any;
57
52
  };
58
53
  };
54
+ getters: {};
55
+ events: CustomEvents;
59
56
  };
60
57
  export declare type MultiSelectProps = typeof __propDef.props;
61
58
  export declare type MultiSelectEvents = typeof __propDef.events;
package/index.d.ts CHANGED
@@ -2,7 +2,7 @@ export { default } from './MultiSelect.svelte';
2
2
  export declare type Option = string | number | ObjectOption;
3
3
  export declare type ObjectOption = {
4
4
  label: string | number;
5
- value: string | number;
5
+ value?: unknown;
6
6
  title?: string;
7
7
  disabled?: boolean;
8
8
  preselected?: boolean;
@@ -28,3 +28,6 @@ export declare type DispatchEvents = {
28
28
  focus: undefined;
29
29
  blur: undefined;
30
30
  };
31
+ export declare type CustomEvents = {
32
+ [key in keyof DispatchEvents]: CustomEvent<DispatchEvents[key]>;
33
+ };
package/package.json CHANGED
@@ -5,9 +5,10 @@
5
5
  "homepage": "https://svelte-multiselect.netlify.app",
6
6
  "repository": "https://github.com/janosh/svelte-multiselect",
7
7
  "license": "MIT",
8
- "version": "5.0.0",
8
+ "version": "5.0.1",
9
9
  "type": "module",
10
10
  "svelte": "index.js",
11
+ "main": "index.js",
11
12
  "bugs": "https://github.com/janosh/svelte-multiselect/issues",
12
13
  "devDependencies": {
13
14
  "@sveltejs/adapter-static": "^1.0.0-next.29",
package/readme.md CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  - v4.0.3 CSS variables starting with `--sms-input-<attr>` were renamed to just `--sms-<attr>`. E.g. `--sms-input-min-height` is now `--sms-min-height`.
46
46
 
47
- - v5.0.0 Support both simple and object options.Previously string or number options were converted to objects internally and returned by `bind:selected`. Now, if you pass in `string[]`, that's what you'll get from `bind:selected`.
47
+ - v5.0.0 Support both simple and object options. Previously string or number options were converted to objects internally and returned by `bind:selected`. Now, if you pass in `string[]`, that's what you'll get from `bind:selected`.
48
48
 
49
49
  ## Installation
50
50
 
@@ -79,14 +79,14 @@ Full list of props/bindable variables for this component:
79
79
  <!-- prettier-ignore -->
80
80
  | name | default | description |
81
81
  | :--------------------- | :---------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
82
- | `options` | required prop | Array of strings/numbers or `Option` objects that will be listed in the dropdown. See `src/lib/index.ts` for admissible fields. The `label` is the only mandatory one. It must also be unique. |
82
+ | `options` | required prop | Array of strings/numbers or `Option` objects to be listed in the dropdown. The only required key on objects is `label` which must also be unique. An object's `value` defaults to `label` if `undefined`. You can add arbitrary additional keys to your option objects. MultiSelect A few keys like `preselected` and `title` have special meaning though. See `src/lib/index.ts` for all special keys and their purpose. |
83
83
  | `showOptions` | `false` | Bindable boolean that controls whether the options dropdown is visible. |
84
84
  | `searchText` | `` | Text the user-entered to filter down on the list of options. Binds both ways, i.e. can also be used to set the input text. |
85
85
  | `activeOption` | `null` | Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys. |
86
86
  | `maxSelect` | `null` | Positive integer to limit the number of options users can pick. `null` means no limit. |
87
87
  | `selected` | `[]` | Array of currently/pre-selected options when binding/passing as props respectively. |
88
- | `selectedLabels` | `[]` | Labels of currently selected options. Supports binding but is read-only, i.e. since this value is reactive to `selected`, you cannot control `selected` by changing `selectedValues`. |
89
- | `selectedValues` | `[]` | Values of currently selected options. Supports binding but is read-only, i.e. since this value is reactive to `selected`, you cannot control `selected` by changing `selectedValues`. |
88
+ | `selectedLabels` | `[]` | Labels of currently selected options. Exposed just for convenience, equivalent to `selected.map(op => op.label)` when options are objects. If options are simple strings, `selected === selectedLabels`. Supports binding but is read-only, i.e. since this value is reactive to `selected`, you cannot control `selected` by changing `bind:selectedLabels`. |
89
+ | `selectedValues` | `[]` | Values of currently selected options. Exposed just for convenience, equivalent to `selected.map(op => op.value)` when options are objects. If options are simple strings, `selected === selectedValues`. Supports binding but is read-only, i.e. since this value is reactive to `selected`, you cannot control `selected` by changing `bind:selectedValues`. |
90
90
  | `sortSelected` | `boolean \| ((op1, op2) => number)` | 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. |
91
91
  | `noOptionsMsg` | `'No matching options'` | What message to show if no options match the user-entered search string. |
92
92
  | `disabled` | `false` | Disable the component. It will still be rendered but users won't be able to interact with it. |