@txstate-mws/svelte-components 1.3.8 → 1.3.9
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.
|
@@ -11,6 +11,7 @@ export let menuContainerClass = undefined;
|
|
|
11
11
|
export let menuClass = undefined;
|
|
12
12
|
export let menuItemClass = undefined;
|
|
13
13
|
export let menuItemHilitedClass = undefined;
|
|
14
|
+
export let maxSelections = 0;
|
|
14
15
|
export let selected = [];
|
|
15
16
|
export let placeholder = '';
|
|
16
17
|
export let emptyText = undefined;
|
|
@@ -29,6 +30,8 @@ const optionsCache = new Cache(async (ipt) => {
|
|
|
29
30
|
return await getOptions(ipt);
|
|
30
31
|
}, { freshseconds: 5 });
|
|
31
32
|
$: selectedSet = new Set(selected.map(s => s.value));
|
|
33
|
+
$: if (maxSelections > 1 && selected.length >= maxSelections && menushown)
|
|
34
|
+
menushown = false;
|
|
32
35
|
let optionsTimer;
|
|
33
36
|
async function reactToInput(..._) {
|
|
34
37
|
loading = true;
|
|
@@ -49,7 +52,7 @@ $: availablemessage = options.filter(o => o.value).length + ' autocomplete choic
|
|
|
49
52
|
function addSelection(e) {
|
|
50
53
|
inputvalue = '';
|
|
51
54
|
const opt = { ...e.detail, label: e.detail.label || e.detail.value };
|
|
52
|
-
selected = [...selected, opt];
|
|
55
|
+
selected = maxSelections === 1 ? [opt] : [...selected, opt];
|
|
53
56
|
popupvalue = undefined;
|
|
54
57
|
dispatch('change', selected);
|
|
55
58
|
}
|
|
@@ -90,6 +93,9 @@ function inputkeydown(e) {
|
|
|
90
93
|
e.preventDefault();
|
|
91
94
|
}
|
|
92
95
|
}
|
|
96
|
+
else if (e.key !== 'Tab' && maxSelections > 1 && selected.length >= maxSelections) {
|
|
97
|
+
e.preventDefault();
|
|
98
|
+
}
|
|
93
99
|
}
|
|
94
100
|
async function inputfocus() {
|
|
95
101
|
reactToInput();
|
|
@@ -130,7 +136,7 @@ $: reactToHilite(hilitedpill, id);
|
|
|
130
136
|
</li>
|
|
131
137
|
</ul>
|
|
132
138
|
<ScreenReaderOnly id={descriptionid} arialive="assertive">
|
|
133
|
-
<span>{selected.length ? selected.length + ' selected' : '
|
|
139
|
+
<span>{selected.length ? selected.length + ' selected' : 'none selected'}, select {maxSelections ? 'up to ' + maxSelections : 'multiple'}, up down to choose, left right to hilite existing choices</span>
|
|
134
140
|
{#if menushown}<span>{availablemessage}, touch users explore to find autocomplete menu</span>{/if}
|
|
135
141
|
</ScreenReaderOnly>
|
|
136
142
|
<slot></slot>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@txstate-mws/svelte-components",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.9",
|
|
4
4
|
"description": "Svelte components that are generically useful.",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"@txstate-mws/svelte-store": "^1.0.3",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
},
|
|
10
10
|
"devDependencies": {
|
|
11
11
|
"@playwright/test": "^1.18.1",
|
|
12
|
-
"@sveltejs/adapter-auto": "^
|
|
12
|
+
"@sveltejs/adapter-auto": "^2.0.0",
|
|
13
13
|
"@sveltejs/kit": "^1.0.1",
|
|
14
14
|
"@sveltejs/package": "^1.0.1",
|
|
15
15
|
"@types/tabbable": "^3.1.2",
|