svelte-multiselect 3.1.1 → 3.2.0
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.
- package/MultiSelect.svelte +11 -4
- package/MultiSelect.svelte.d.ts +1 -1
- package/package.json +10 -10
- package/readme.md +17 -14
package/MultiSelect.svelte
CHANGED
|
@@ -12,8 +12,8 @@ export let readonly = false;
|
|
|
12
12
|
export let options;
|
|
13
13
|
export let input = null;
|
|
14
14
|
export let placeholder = undefined;
|
|
15
|
-
export let name = undefined;
|
|
16
15
|
export let id = undefined;
|
|
16
|
+
export let name = id;
|
|
17
17
|
export let noOptionsMsg = `No matching options`;
|
|
18
18
|
export let activeOption = null;
|
|
19
19
|
export let outerDivClass = ``;
|
|
@@ -200,11 +200,10 @@ const handleEnterAndSpaceKeys = (handler) => (event) => {
|
|
|
200
200
|
<!-- z-index: 2 when showOptions is true ensures the ul.selected of one <MultiSelect />
|
|
201
201
|
display above those of another following shortly after it -->
|
|
202
202
|
<div
|
|
203
|
-
{id}
|
|
204
203
|
class="multiselect {outerDivClass}"
|
|
205
204
|
class:readonly
|
|
206
205
|
class:single={maxSelect == 1}
|
|
207
|
-
|
|
206
|
+
class:open={showOptions}
|
|
208
207
|
on:mouseup|stopPropagation={() => setOptionsVisible(true)}
|
|
209
208
|
use:onClickOutside={() => setOptionsVisible(false)}
|
|
210
209
|
use:onClickOutside={() => dispatch(`blur`)}
|
|
@@ -235,6 +234,7 @@ display above those of another following shortly after it -->
|
|
|
235
234
|
on:mouseup|self|stopPropagation={() => setOptionsVisible(true)}
|
|
236
235
|
on:keydown={handleKeydown}
|
|
237
236
|
on:focus={() => setOptionsVisible(true)}
|
|
237
|
+
{id}
|
|
238
238
|
{name}
|
|
239
239
|
placeholder={selectedLabels.length ? `` : placeholder}
|
|
240
240
|
/>
|
|
@@ -284,7 +284,7 @@ display above those of another following shortly after it -->
|
|
|
284
284
|
</slot>
|
|
285
285
|
</li>
|
|
286
286
|
{:else}
|
|
287
|
-
{noOptionsMsg}
|
|
287
|
+
<span>{noOptionsMsg}</span>
|
|
288
288
|
{/each}
|
|
289
289
|
</ul>
|
|
290
290
|
{/key}
|
|
@@ -304,6 +304,9 @@ display above those of another following shortly after it -->
|
|
|
304
304
|
cursor: text;
|
|
305
305
|
padding: 0 3pt;
|
|
306
306
|
}
|
|
307
|
+
:where(div.multiselect.open) {
|
|
308
|
+
z-index: var(--sms-open-z-index, 4);
|
|
309
|
+
}
|
|
307
310
|
:where(div.multiselect:focus-within) {
|
|
308
311
|
border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue));
|
|
309
312
|
}
|
|
@@ -383,6 +386,10 @@ display above those of another following shortly after it -->
|
|
|
383
386
|
padding: 3pt 2ex;
|
|
384
387
|
cursor: pointer;
|
|
385
388
|
}
|
|
389
|
+
/* for noOptionsMsg */
|
|
390
|
+
:where(ul.options span) {
|
|
391
|
+
padding: 3pt 2ex;
|
|
392
|
+
}
|
|
386
393
|
:where(ul.options li.selected) {
|
|
387
394
|
border-left: var(
|
|
388
395
|
--sms-li-selected-border-left,
|
package/MultiSelect.svelte.d.ts
CHANGED
|
@@ -11,8 +11,8 @@ declare const __propDef: {
|
|
|
11
11
|
options: ProtoOption[];
|
|
12
12
|
input?: HTMLInputElement | null | undefined;
|
|
13
13
|
placeholder?: string | undefined;
|
|
14
|
-
name?: string | undefined;
|
|
15
14
|
id?: string | undefined;
|
|
15
|
+
name?: string | undefined;
|
|
16
16
|
noOptionsMsg?: string | undefined;
|
|
17
17
|
activeOption?: Option | null | undefined;
|
|
18
18
|
outerDivClass?: string | undefined;
|
package/package.json
CHANGED
|
@@ -5,29 +5,29 @@
|
|
|
5
5
|
"homepage": "https://svelte-multiselect.netlify.app",
|
|
6
6
|
"repository": "https://github.com/janosh/svelte-multiselect",
|
|
7
7
|
"license": "MIT",
|
|
8
|
-
"version": "3.
|
|
8
|
+
"version": "3.2.0",
|
|
9
9
|
"type": "module",
|
|
10
10
|
"svelte": "index.js",
|
|
11
11
|
"bugs": "https://github.com/janosh/svelte-multiselect/issues",
|
|
12
12
|
"devDependencies": {
|
|
13
13
|
"@sveltejs/adapter-static": "^1.0.0-next.26",
|
|
14
|
-
"@sveltejs/kit": "^1.0.0-next.
|
|
15
|
-
"@typescript-eslint/eslint-plugin": "^5.10.
|
|
16
|
-
"@typescript-eslint/parser": "^5.10.
|
|
17
|
-
"eslint": "^8.
|
|
14
|
+
"@sveltejs/kit": "^1.0.0-next.259",
|
|
15
|
+
"@typescript-eslint/eslint-plugin": "^5.10.2",
|
|
16
|
+
"@typescript-eslint/parser": "^5.10.2",
|
|
17
|
+
"eslint": "^8.8.0",
|
|
18
18
|
"eslint-plugin-svelte3": "^3.4.0",
|
|
19
19
|
"hastscript": "^7.0.2",
|
|
20
|
-
"mdsvex": "^0.
|
|
20
|
+
"mdsvex": "^0.10.5",
|
|
21
21
|
"prettier": "^2.5.1",
|
|
22
22
|
"prettier-plugin-svelte": "^2.6.0",
|
|
23
23
|
"rehype-autolink-headings": "^6.1.1",
|
|
24
24
|
"rehype-slug": "^5.0.1",
|
|
25
|
-
"svelte": "^3.46.
|
|
26
|
-
"svelte-check": "^2.
|
|
25
|
+
"svelte": "^3.46.3",
|
|
26
|
+
"svelte-check": "^2.4.2",
|
|
27
27
|
"svelte-github-corner": "^0.1.0",
|
|
28
28
|
"svelte-preprocess": "^4.10.2",
|
|
29
|
-
"svelte-toc": "^0.2.
|
|
30
|
-
"svelte2tsx": "^0.
|
|
29
|
+
"svelte-toc": "^0.2.3",
|
|
30
|
+
"svelte2tsx": "^0.5.2",
|
|
31
31
|
"tslib": "^2.3.1",
|
|
32
32
|
"typescript": "^4.5.5",
|
|
33
33
|
"vite": "^2.7.13"
|
package/readme.md
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
[](https://app.netlify.com/sites/svelte-multiselect/deploys)
|
|
9
9
|
[](https://npmjs.com/package/svelte-multiselect)
|
|
10
10
|
[](https://results.pre-commit.ci/latest/github/janosh/svelte-multiselect/main)
|
|
11
|
+
|
|
11
12
|
|
|
12
13
|
</h4>
|
|
13
14
|
|
|
@@ -87,20 +88,20 @@ Full list of props/bindable variables for this component:
|
|
|
87
88
|
<div class="table">
|
|
88
89
|
|
|
89
90
|
<!-- prettier-ignore -->
|
|
90
|
-
| name | default | description
|
|
91
|
-
| :--------------- | :--------------------------------------------------------- |
|
|
92
|
-
| `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.
|
|
93
|
-
| `activeOption` | `null` | Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys.
|
|
94
|
-
| `maxSelect` | `null` | Positive integer to limit the number of options users can pick. `null` means no limit.
|
|
95
|
-
| `maxSelectMsg` | ``(current: number, max: number) => `${current}/${max}` `` | Function that returns a string informing the user how many of the maximum allowed options they have currently selected. Return empty string to disable, i.e. `() => ''`.
|
|
96
|
-
| `selected` | `[]` | Array of currently/pre-selected options when binding/passing as props respectively.
|
|
97
|
-
| `selectedLabels` | `[]` | Labels of currently selected options.
|
|
98
|
-
| `selectedValues` | `[]` | Values of currently selected options.
|
|
99
|
-
| `readonly` | `false` | Disable the component. It will still be rendered but users won't be able to interact with it.
|
|
100
|
-
| `placeholder` | `undefined` | String shown in the text input when no option is selected.
|
|
101
|
-
| `input` | `undefined` | Handle to the `<input>` DOM node.
|
|
102
|
-
| `
|
|
103
|
-
| `
|
|
91
|
+
| name | default | description |
|
|
92
|
+
| :--------------- | :--------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
93
|
+
| `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. |
|
|
94
|
+
| `activeOption` | `null` | Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys. |
|
|
95
|
+
| `maxSelect` | `null` | Positive integer to limit the number of options users can pick. `null` means no limit. |
|
|
96
|
+
| `maxSelectMsg` | ``(current: number, max: number) => `${current}/${max}` `` | Function that returns a string informing the user how many of the maximum allowed options they have currently selected. Return empty string to disable, i.e. `() => ''`. |
|
|
97
|
+
| `selected` | `[]` | Array of currently/pre-selected options when binding/passing as props respectively. |
|
|
98
|
+
| `selectedLabels` | `[]` | Labels of currently selected options. |
|
|
99
|
+
| `selectedValues` | `[]` | Values of currently selected options. |
|
|
100
|
+
| `readonly` | `false` | Disable the component. It will still be rendered but users won't be able to interact with it. |
|
|
101
|
+
| `placeholder` | `undefined` | String shown in the text input when no option is selected. |
|
|
102
|
+
| `input` | `undefined` | Handle to the `<input>` DOM node. |
|
|
103
|
+
| `id` | `undefined` | Applied to the `<input>` element for associating HTML form `<label>`s with this component for accessibility. Also, clicking a `<label>` with same `for` attribute as `id` will focus this component. |
|
|
104
|
+
| `name` | `id` | Applied to the `<input>` element. If not provided, will be set to the value of `id`. Sets the key of this field in a submitted form data object. Not useful at the moment since the value is stored in Svelte state, not on the `<input>`. |
|
|
104
105
|
|
|
105
106
|
</div>
|
|
106
107
|
|
|
@@ -200,6 +201,8 @@ If you only want to make small adjustments, you can pass the following CSS varia
|
|
|
200
201
|
- `height: var(--sms-input-height, 2em)`: Input height.
|
|
201
202
|
- `border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue))`: Border when focused. Falls back to `--sms-active-color` if not set which in turn falls back on `cornflowerblue`.
|
|
202
203
|
- `background: var(--sms-readonly-bg, lightgray)`: Background when in readonly state.
|
|
204
|
+
- `div.multiselect.open`:
|
|
205
|
+
- `z-index: var(--sms-open-z-index, 4)`: Useful to ensure the dropdown list of options is displayed on top of other page elements of increased `z-index`.
|
|
203
206
|
- `div.multiselect input`
|
|
204
207
|
- `color: var(--sms-text-color, inherit)`: Input text color.
|
|
205
208
|
- `ul.selected > li`:
|