@txstate-mws/svelte-components 1.2.1 → 1.2.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.
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
<script >import { onDestroy, tick, setContext, onMount } from 'svelte';
|
|
2
2
|
import { writable } from 'svelte/store';
|
|
3
|
-
import { browser } from '$app/env';
|
|
4
3
|
import { resize } from '../actions';
|
|
5
4
|
import { CARDLAYOUT } from '../types';
|
|
6
5
|
export let maxwidth = 500;
|
|
7
6
|
export let preserveorder = false;
|
|
8
7
|
export let gutter = 10;
|
|
9
8
|
export let className = '';
|
|
9
|
+
const ssr = navigator.userAgent.includes('jsdom');
|
|
10
10
|
const blocks = [];
|
|
11
11
|
const gutterstore = writable(gutter);
|
|
12
12
|
let defaultOrder = 0;
|
|
@@ -177,7 +177,7 @@ function onResize(e) {
|
|
|
177
177
|
onMount(() => triggerrecalc(layoutelement.clientWidth));
|
|
178
178
|
</script>
|
|
179
179
|
|
|
180
|
-
<ul class="cardlayout {className}" class:ssr
|
|
180
|
+
<ul class="cardlayout {className}" class:ssr style:height={ssr ? undefined : `${fullheight + gutter}px`} bind:this={layoutelement} use:resize on:resize={onResize}>
|
|
181
181
|
<slot></slot>
|
|
182
182
|
</ul>
|
|
183
183
|
|
|
@@ -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,18 +102,18 @@ $: 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
|
-
bind:this={inputelement} bind:value={inputvalue}
|
|
115
|
+
<input type="text" id={id} name={name} {disabled} placeholder={placeholder}
|
|
116
|
+
bind:this={inputelement} bind:value={inputvalue} on:blur
|
|
116
117
|
on:focus={inputfocus} on:keydown={inputkeydown}
|
|
117
118
|
autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list"
|
|
118
119
|
aria-describedby="{descriptionid}">
|
|
@@ -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);
|
|
@@ -5,6 +5,7 @@ declare const __propDef: {
|
|
|
5
5
|
props: {
|
|
6
6
|
id?: string;
|
|
7
7
|
name: string;
|
|
8
|
+
disabled?: boolean;
|
|
8
9
|
getOptions: (search: string) => Promise<PopupMenuItem[]> | PopupMenuItem[];
|
|
9
10
|
menuContainerClass?: string | undefined;
|
|
10
11
|
menuClass?: string | undefined;
|
|
@@ -19,6 +20,7 @@ declare const __propDef: {
|
|
|
19
20
|
PopupMenu?: typeof DefaultPopupMenu;
|
|
20
21
|
};
|
|
21
22
|
events: {
|
|
23
|
+
blur: FocusEvent;
|
|
22
24
|
change: CustomEvent<any>;
|
|
23
25
|
} & {
|
|
24
26
|
[evt: string]: CustomEvent<any>;
|