@txstate-mws/svelte-components 1.2.2 → 1.2.3
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.
|
@@ -5,6 +5,7 @@ import DefaultPopupMenu from './PopupMenu.svelte';
|
|
|
5
5
|
import { debouncedPromise, modifierKey, selectionIsLeft } from '../util';
|
|
6
6
|
export let id = randomid();
|
|
7
7
|
export let name;
|
|
8
|
+
export let disabled = false;
|
|
8
9
|
export let getOptions;
|
|
9
10
|
export let menuContainerClass = undefined;
|
|
10
11
|
export let menuClass = undefined;
|
|
@@ -101,17 +102,17 @@ $: dispatch('change', selected);
|
|
|
101
102
|
</script>
|
|
102
103
|
|
|
103
104
|
<fieldset>
|
|
104
|
-
<ul class="multiselect-selected" role="listbox">
|
|
105
|
+
<ul class="multiselect-selected" class:disabled role="listbox">
|
|
105
106
|
{#each selected as option, i}
|
|
106
107
|
<li id={id + option.value} role="option" tabindex="-1" class="multiselect-pill" class:hilited={hilitedpill === option.value}
|
|
107
|
-
on:click|preventDefault|stopPropagation={() => removeSelection(option, i, 1)}
|
|
108
|
+
on:click|preventDefault|stopPropagation={() => !disabled && removeSelection(option, i, 1)} on:mousedown={e => disabled && e.preventDefault()}
|
|
108
109
|
aria-selected="true">
|
|
109
110
|
{option.label || option.value}
|
|
110
111
|
<ScreenReaderOnly>, click to remove</ScreenReaderOnly>
|
|
111
112
|
</li>
|
|
112
113
|
{/each}
|
|
113
114
|
<li class="input">
|
|
114
|
-
<input type="text" id={id} name={name} placeholder={placeholder}
|
|
115
|
+
<input type="text" id={id} name={name} {disabled} placeholder={placeholder}
|
|
115
116
|
bind:this={inputelement} bind:value={inputvalue}
|
|
116
117
|
on:focus={inputfocus} on:keydown={inputkeydown}
|
|
117
118
|
autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list"
|
|
@@ -172,6 +173,12 @@ $: dispatch('change', selected);
|
|
|
172
173
|
color: var(--multiselect-pill-text, black);
|
|
173
174
|
padding: var(--multiselect-pill-padding, 0.3em 0.5em);
|
|
174
175
|
}
|
|
176
|
+
.multiselect-selected.disabled {
|
|
177
|
+
opacity: 0.5;
|
|
178
|
+
}
|
|
179
|
+
.multiselect-selected.disabled .multiselect-pill {
|
|
180
|
+
cursor: default;
|
|
181
|
+
}
|
|
175
182
|
.multiselect-pill.hilited {
|
|
176
183
|
outline: 0;
|
|
177
184
|
background-color: var(--multiselect-pill-selected, gray);
|