@ibobbyts/svelte-ui-utils 0.4.2 → 0.4.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.
- package/README.md +107 -10
- package/dist/data-table/FilterControl.svelte +30 -4
- package/dist/data-table/FilterControl.svelte.d.ts.map +1 -1
- package/dist/data-table/filter.d.ts +3 -1
- package/dist/data-table/filter.d.ts.map +1 -1
- package/dist/data-table/filter.js +4 -0
- package/dist/data-table/index.d.ts +1 -1
- package/dist/data-table/index.d.ts.map +1 -1
- package/dist/data-table/types.d.ts +41 -11
- package/dist/data-table/types.d.ts.map +1 -1
- package/dist/dialog/ConfirmDialog.svelte +2 -0
- package/dist/dialog/ConfirmDialog.svelte.d.ts +1 -0
- package/dist/dialog/ConfirmDialog.svelte.d.ts.map +1 -1
- package/dist/dialog/Dialog.svelte +22 -2
- package/dist/dialog/Dialog.svelte.d.ts +1 -0
- package/dist/dialog/Dialog.svelte.d.ts.map +1 -1
- package/dist/dropdown/Dropdown.svelte +419 -44
- package/dist/dropdown/Dropdown.svelte.d.ts +13 -1
- package/dist/dropdown/Dropdown.svelte.d.ts.map +1 -1
- package/dist/dropdown/DropdownMultiSelect.svelte +4 -0
- package/dist/dropdown/DropdownMultiSelect.svelte.d.ts +2 -0
- package/dist/dropdown/DropdownMultiSelect.svelte.d.ts.map +1 -1
- package/dist/dropdown/index.d.ts +1 -1
- package/dist/dropdown/index.d.ts.map +1 -1
- package/dist/dropdown/types.d.ts +21 -2
- package/dist/dropdown/types.d.ts.map +1 -1
- package/dist/dropdown-search/DropdownSearch.svelte +12 -10
- package/dist/dropdown-search/DropdownSearch.svelte.d.ts +2 -2
- package/dist/dropdown-search/DropdownSearch.svelte.d.ts.map +1 -1
- package/dist/dropdown-search/DropdownSearchMultiSelect.svelte +3 -3
- package/dist/dropdown-search/DropdownSearchMultiSelect.svelte.d.ts +2 -2
- package/dist/dropdown-search/index.d.ts +1 -1
- package/dist/dropdown-search/types.d.ts +10 -3
- package/dist/dropdown-search/types.d.ts.map +1 -1
- package/dist/pagination/Pagination.svelte +5 -4
- package/dist/pagination/Pagination.svelte.d.ts.map +1 -1
- package/dist/style.css +87 -0
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type UiLanguage } from '../i18n.js';
|
|
2
|
+
import type { DropdownLoadOptions, DropdownMenuAlign, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelectionChangeHandler, DropdownSelection, DropdownTriggerClickHandler } from './types.js';
|
|
2
3
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
4
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
5
|
$$bindings?: Bindings;
|
|
@@ -18,6 +19,17 @@ declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
|
|
|
18
19
|
multiselect?: boolean;
|
|
19
20
|
options?: DropdownOption[];
|
|
20
21
|
optionGroups?: DropdownOptionGroup[] | undefined;
|
|
22
|
+
/** Labels for controlled values that are not present in the current search result. */ selectedOptions?: DropdownOption[];
|
|
23
|
+
groupsCollapsedByDefault?: "true" | "false" | "auto";
|
|
24
|
+
search?: boolean;
|
|
25
|
+
loadOptions?: DropdownLoadOptions | undefined;
|
|
26
|
+
searchDebounceMs?: number;
|
|
27
|
+
searchLimit?: number;
|
|
28
|
+
searchPlaceholder?: string | undefined;
|
|
29
|
+
language?: UiLanguage;
|
|
30
|
+
loadingText?: string | undefined;
|
|
31
|
+
noResultsText?: string | undefined;
|
|
32
|
+
errorText?: string | undefined;
|
|
21
33
|
ariaLabel?: string | undefined;
|
|
22
34
|
placement?: DropdownPlacement;
|
|
23
35
|
menuAlign?: DropdownMenuAlign;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAER,mBAAmB,EAGnB,iBAAiB,EAGjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,iBAAiB,EACjB,2BAA2B,EAE5B,MAAM,YAAY,CAAC;AA81BtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,QAAQ;SAXswB,MAAM,GAAG,SAAS;YAAU,iBAAiB;;cAA8C,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;IACj7B,sFAAsF,mBAAkB,cAAc,EAAE;+BAA6B,MAAM,GAAG,OAAO,GAAG,MAAM;;kBAAwC,mBAAmB,GAAG,SAAS;;;wBAAoG,MAAM,GAAG,SAAS;eAAa,UAAU;kBAAgB,MAAM,GAAG,SAAS;oBAAkB,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;WAAuG,MAAM,GAAG,SAAS;;YAAsC,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAqC,8BAA8B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAUj4B,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}
|
|
@@ -16,6 +16,8 @@
|
|
|
16
16
|
export let value: DropdownMultiValue = [];
|
|
17
17
|
export let options: DropdownOption[] = [];
|
|
18
18
|
export let optionGroups: DropdownOptionGroup[] | undefined = undefined;
|
|
19
|
+
export let selectedOptions: DropdownOption[] = [];
|
|
20
|
+
export let groupsCollapsedByDefault: 'true' | 'false' | 'auto' = 'false';
|
|
19
21
|
export let ariaLabel: string | undefined = undefined;
|
|
20
22
|
export let placement: DropdownPlacement = 'auto';
|
|
21
23
|
export let menuAlign: DropdownMenuAlign = 'left';
|
|
@@ -37,6 +39,8 @@
|
|
|
37
39
|
multiselect={true}
|
|
38
40
|
{options}
|
|
39
41
|
{optionGroups}
|
|
42
|
+
{selectedOptions}
|
|
43
|
+
{groupsCollapsedByDefault}
|
|
40
44
|
{ariaLabel}
|
|
41
45
|
{placement}
|
|
42
46
|
{menuAlign}
|
|
@@ -17,6 +17,8 @@ declare const DropdownMultiSelect: $$__sveltets_2_IsomorphicComponent<{
|
|
|
17
17
|
value?: DropdownMultiValue;
|
|
18
18
|
options?: DropdownOption[];
|
|
19
19
|
optionGroups?: DropdownOptionGroup[] | undefined;
|
|
20
|
+
selectedOptions?: DropdownOption[];
|
|
21
|
+
groupsCollapsedByDefault?: "true" | "false" | "auto";
|
|
20
22
|
ariaLabel?: string | undefined;
|
|
21
23
|
placement?: DropdownPlacement;
|
|
22
24
|
menuAlign?: DropdownMenuAlign;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/DropdownMultiSelect.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACR,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownMultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/DropdownMultiSelect.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACR,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,YAAY,CAAC;AAiCtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,mBAAmB;SAVqc,MAAM,GAAG,SAAS;YAAU,kBAAkB;cAAY,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;sBAAoB,cAAc,EAAE;+BAA6B,MAAM,GAAG,OAAO,GAAG,MAAM;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;YAAwG,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAqC,0BAA0B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAUvgC,CAAC;AACvF,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACtE,eAAe,mBAAmB,CAAC"}
|
package/dist/dropdown/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { default as Dropdown } from './Dropdown.svelte';
|
|
2
2
|
export { default as DropdownMultiSelect } from './DropdownMultiSelect.svelte';
|
|
3
|
-
export type { DropdownChangeHandler, DropdownMenuAlign, DropdownMultiChangeHandler, DropdownMultiValue, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelectionChangeHandler, DropdownSelection, DropdownTriggerClickHandler, DropdownValue } from './types.js';
|
|
3
|
+
export type { DropdownChangeHandler, DropdownLoadContext, DropdownLoadOptions, DropdownLoadOptionsResult, DropdownLoadStatus, DropdownMenuAlign, DropdownMultiChangeHandler, DropdownMultiValue, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelectionChangeHandler, DropdownSelection, DropdownTriggerClickHandler, DropdownValue } from './types.js';
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,YAAY,EACV,qBAAqB,EACrB,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,iBAAiB,EACjB,2BAA2B,EAC3B,aAAa,EACd,MAAM,YAAY,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,YAAY,EACV,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,yBAAyB,EACzB,kBAAkB,EAClB,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,iBAAiB,EACjB,2BAA2B,EAC3B,aAAa,EACd,MAAM,YAAY,CAAC"}
|
package/dist/dropdown/types.d.ts
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* Every dropdown submits string values. Callers that keep numeric domain
|
|
3
|
+
* state (e.g. a numeric page size) convert with String/Number at the
|
|
4
|
+
* component boundary so the submitted business value stays unchanged.
|
|
5
|
+
*/
|
|
6
|
+
export type DropdownValue = string;
|
|
7
|
+
export type DropdownMultiValue = string[];
|
|
3
8
|
export type DropdownSelection = DropdownValue | DropdownMultiValue;
|
|
4
9
|
export type DropdownPlacement = 'auto' | 'up' | 'down';
|
|
5
10
|
export type DropdownMenuAlign = 'left' | 'right';
|
|
@@ -20,4 +25,18 @@ export type DropdownSelectionChangeHandler = {
|
|
|
20
25
|
bivarianceHack(value: DropdownSelection): void | Promise<void>;
|
|
21
26
|
}['bivarianceHack'];
|
|
22
27
|
export type DropdownTriggerClickHandler = (event: MouseEvent) => void;
|
|
28
|
+
export type DropdownLoadStatus = 'idle' | 'loading' | 'success' | 'error';
|
|
29
|
+
export interface DropdownLoadContext {
|
|
30
|
+
limit: number;
|
|
31
|
+
signal: AbortSignal;
|
|
32
|
+
}
|
|
33
|
+
export interface DropdownLoadOptionsResult {
|
|
34
|
+
/**
|
|
35
|
+
* Flat options. Ignored whenever `optionGroups` is present on the same
|
|
36
|
+
* result — groups are then the sole render source.
|
|
37
|
+
*/
|
|
38
|
+
options?: DropdownOption[];
|
|
39
|
+
optionGroups?: DropdownOptionGroup[];
|
|
40
|
+
}
|
|
41
|
+
export type DropdownLoadOptions = (query: string, context: DropdownLoadContext) => Promise<DropdownLoadOptionsResult> | DropdownLoadOptionsResult;
|
|
23
42
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC;AAEnC,MAAM,MAAM,kBAAkB,GAAG,MAAM,EAAE,CAAC;AAE1C,MAAM,MAAM,iBAAiB,GAAG,aAAa,GAAG,kBAAkB,CAAC;AAEnE,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEjD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,mGAAmG;IACnG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,MAAM,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnF,MAAM,MAAM,0BAA0B,GAAG,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAE7F,MAAM,MAAM,8BAA8B,GAAG;IAC5C,cAAc,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/D,CAAC,gBAAgB,CAAC,CAAC;AAEpB,MAAM,MAAM,2BAA2B,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1E,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACtC;AAED,MAAM,MAAM,mBAAmB,GAAG,CAChC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,mBAAmB,KACzB,OAAO,CAAC,yBAAyB,CAAC,GAAG,yBAAyB,CAAC"}
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
DropdownSearchChangeDetail,
|
|
13
13
|
DropdownSearchEnterDetail,
|
|
14
14
|
DropdownSearchItem,
|
|
15
|
-
|
|
15
|
+
DropdownSearchItemLabelGetter,
|
|
16
16
|
DropdownSearchLoadOptions,
|
|
17
17
|
DropdownSearchSelectedItemLabelGetter,
|
|
18
18
|
DropdownSearchSelectedItemsChangeHandler,
|
|
@@ -51,7 +51,9 @@
|
|
|
51
51
|
export let removeSelectedItemLabel:
|
|
52
52
|
| DropdownSearchSelectedItemLabelGetter
|
|
53
53
|
| undefined = undefined;
|
|
54
|
-
|
|
54
|
+
// The input text for a selected item defaults to its display label, never to
|
|
55
|
+
// the submitted `value`.
|
|
56
|
+
export let getItemLabel: DropdownSearchItemLabelGetter = (item) => item.label;
|
|
55
57
|
export let onChange:
|
|
56
58
|
| ((detail: DropdownSearchChangeDetail) => void)
|
|
57
59
|
| undefined = undefined;
|
|
@@ -377,7 +379,7 @@
|
|
|
377
379
|
showingFocusOptions = false;
|
|
378
380
|
selectedItem = item;
|
|
379
381
|
exactMatch = validate ? item : null;
|
|
380
|
-
value =
|
|
382
|
+
value = getItemLabel(item);
|
|
381
383
|
inputValue = value;
|
|
382
384
|
lastHandledValue = value;
|
|
383
385
|
setStatus(validate ? 'valid' : 'empty');
|
|
@@ -387,7 +389,7 @@
|
|
|
387
389
|
}
|
|
388
390
|
|
|
389
391
|
function selectedItemKey(item: DropdownSearchItem): string {
|
|
390
|
-
return
|
|
392
|
+
return item.value;
|
|
391
393
|
}
|
|
392
394
|
|
|
393
395
|
function isSelectedItem(item: DropdownSearchItem): boolean {
|
|
@@ -396,7 +398,7 @@
|
|
|
396
398
|
}
|
|
397
399
|
|
|
398
400
|
function resolveRemoveSelectedItemLabel(item: DropdownSearchItem): string {
|
|
399
|
-
return removeSelectedItemLabel?.(item) ?? `Remove ${item.
|
|
401
|
+
return removeSelectedItemLabel?.(item) ?? `Remove ${item.label}`;
|
|
400
402
|
}
|
|
401
403
|
|
|
402
404
|
function setSelectedItems(nextItems: DropdownSearchItem[]) {
|
|
@@ -597,9 +599,9 @@
|
|
|
597
599
|
class="suu-dropdown-search__selected-items"
|
|
598
600
|
aria-label={selectedItemsLabel}
|
|
599
601
|
>
|
|
600
|
-
{#each selectedItems as item (item.
|
|
602
|
+
{#each selectedItems as item (item.value)}
|
|
601
603
|
<span class="suu-dropdown-search__selected-item">
|
|
602
|
-
<span class="suu-dropdown-search__selected-title">{item.
|
|
604
|
+
<span class="suu-dropdown-search__selected-title">{item.label}</span>
|
|
603
605
|
{#if !disabled}
|
|
604
606
|
<button
|
|
605
607
|
type="button"
|
|
@@ -682,7 +684,7 @@
|
|
|
682
684
|
<span>{resolvedLoadingText}</span>
|
|
683
685
|
</div>
|
|
684
686
|
{:else if options.length > 0}
|
|
685
|
-
{#each options as option (option.
|
|
687
|
+
{#each options as option (option.value)}
|
|
686
688
|
<button
|
|
687
689
|
type="button"
|
|
688
690
|
class="suu-dropdown-search__option"
|
|
@@ -692,7 +694,7 @@
|
|
|
692
694
|
role="option"
|
|
693
695
|
aria-selected={multiselect
|
|
694
696
|
? isSelectedItem(option)
|
|
695
|
-
: selectedItem?.
|
|
697
|
+
: selectedItem?.value === option.value}
|
|
696
698
|
disabled={option.disabled}
|
|
697
699
|
on:mousedown|preventDefault={() => selectItem(option)}
|
|
698
700
|
>
|
|
@@ -703,7 +705,7 @@
|
|
|
703
705
|
</svg>
|
|
704
706
|
</span>
|
|
705
707
|
{/if}
|
|
706
|
-
<span class="suu-dropdown-search__title">{option.
|
|
708
|
+
<span class="suu-dropdown-search__title">{option.label}</span>
|
|
707
709
|
{#if formatParamDict(option.param_dict).length > 0}
|
|
708
710
|
<span class="suu-dropdown-search__meta"
|
|
709
711
|
>{formatParamDict(option.param_dict).join(' · ')}</span
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type UiLanguage } from '../i18n.js';
|
|
2
|
-
import type { DropdownSearchChangeDetail, DropdownSearchEnterDetail, DropdownSearchItem,
|
|
2
|
+
import type { DropdownSearchChangeDetail, DropdownSearchEnterDetail, DropdownSearchItem, DropdownSearchItemLabelGetter, DropdownSearchLoadOptions, DropdownSearchSelectedItemLabelGetter, DropdownSearchSelectedItemsChangeHandler, DropdownSearchStatus } from './types.js';
|
|
3
3
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
4
4
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
5
5
|
$$bindings?: Bindings;
|
|
@@ -44,7 +44,7 @@ declare const DropdownSearch: $$__sveltets_2_IsomorphicComponent<{
|
|
|
44
44
|
maxWidth?: string | undefined;
|
|
45
45
|
selectedItemsLabel?: string;
|
|
46
46
|
removeSelectedItemLabel?: DropdownSearchSelectedItemLabelGetter | undefined;
|
|
47
|
-
|
|
47
|
+
getItemLabel?: DropdownSearchItemLabelGetter;
|
|
48
48
|
onChange?: ((detail: DropdownSearchChangeDetail) => void) | undefined;
|
|
49
49
|
onSelect?: ((item: DropdownSearchItem) => void) | undefined;
|
|
50
50
|
onDeselect?: ((item: DropdownSearchItem) => void) | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownSearch.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown-search/DropdownSearch.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAM5D,OAAO,KAAK,EACR,0BAA0B,EAC1B,yBAAyB,EACzB,kBAAkB,EAClB,6BAA6B,EAC7B,yBAAyB,EACzB,qCAAqC,EACrC,wCAAwC,EACxC,oBAAoB,EACrB,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"DropdownSearch.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown-search/DropdownSearch.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAM5D,OAAO,KAAK,EACR,0BAA0B,EAC1B,yBAAyB,EACzB,kBAAkB,EAClB,6BAA6B,EAC7B,yBAAyB,EACzB,qCAAqC,EACrC,wCAAwC,EACxC,oBAAoB,EACrB,MAAM,YAAY,CAAC;AA4oBtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,cAAc;;mBAdihC,kBAAkB,GAAG,IAAI;oBAAkB,kBAAkB,EAAE;aAAW,oBAAoB;;;;;;;;;mBAAyR,kBAAkB,EAAE;iBAAe,MAAM,GAAG,SAAS;iBAAe,yBAAyB;SAAO,MAAM,GAAG,SAAS;WAAS,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAyC,UAAU;oBAAkB,MAAM,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;iBAAe,MAAM,GAAG,SAAS;;YAA4E,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;;8BAA8E,qCAAqC,GAChhE,SAAS;mBAAiB,6BAA6B;eAAe,CAAC,CAAC,MAAM,EAAE,0BAA0B,KAAK,IAAI,CAAC,GACpH,SAAS;eAAa,CAAC,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS;iBAAe,CAAC,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS;4BAA4B,wCAAwC,GACzM,SAAS;qBAAqB,CAAC,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC,GACtE,SAAS;kBAAgB,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS;cAAY,CAAC,CAAC,MAAM,EAAE,yBAAyB,KAAK,IAAI,CAAC,GAAG,SAAS;;;;;kBAU1C,CAAC;AAClF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,eAAe,cAAc,CAAC"}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import type {
|
|
7
7
|
DropdownSearchChangeDetail,
|
|
8
8
|
DropdownSearchItem,
|
|
9
|
-
|
|
9
|
+
DropdownSearchItemLabelGetter,
|
|
10
10
|
DropdownSearchLoadOptions,
|
|
11
11
|
DropdownSearchSelectedItemLabelGetter,
|
|
12
12
|
DropdownSearchSelectedItemsChangeHandler,
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
export let removeSelectedItemLabel:
|
|
41
41
|
| DropdownSearchSelectedItemLabelGetter
|
|
42
42
|
| undefined = undefined;
|
|
43
|
-
export let
|
|
43
|
+
export let getItemLabel: DropdownSearchItemLabelGetter = (item) => item.label;
|
|
44
44
|
export let onChange:
|
|
45
45
|
| ((detail: DropdownSearchChangeDetail) => void)
|
|
46
46
|
| undefined = undefined;
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
{maxWidth}
|
|
85
85
|
{selectedItemsLabel}
|
|
86
86
|
{removeSelectedItemLabel}
|
|
87
|
-
{
|
|
87
|
+
{getItemLabel}
|
|
88
88
|
{onChange}
|
|
89
89
|
{onSelect}
|
|
90
90
|
{onDeselect}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { UiLanguage } from '../i18n.js';
|
|
2
|
-
import type { DropdownSearchChangeDetail, DropdownSearchItem,
|
|
2
|
+
import type { DropdownSearchChangeDetail, DropdownSearchItem, DropdownSearchItemLabelGetter, DropdownSearchLoadOptions, DropdownSearchSelectedItemLabelGetter, DropdownSearchSelectedItemsChangeHandler, DropdownSearchStatus } from './types.js';
|
|
3
3
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
4
4
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
5
5
|
$$bindings?: Bindings;
|
|
@@ -39,7 +39,7 @@ declare const DropdownSearchMultiSelect: $$__sveltets_2_IsomorphicComponent<{
|
|
|
39
39
|
maxWidth?: string | undefined;
|
|
40
40
|
selectedItemsLabel?: string;
|
|
41
41
|
removeSelectedItemLabel?: DropdownSearchSelectedItemLabelGetter | undefined;
|
|
42
|
-
|
|
42
|
+
getItemLabel?: DropdownSearchItemLabelGetter;
|
|
43
43
|
onChange?: ((detail: DropdownSearchChangeDetail) => void) | undefined;
|
|
44
44
|
onSelect?: ((item: DropdownSearchItem) => void) | undefined;
|
|
45
45
|
onDeselect?: ((item: DropdownSearchItem) => void) | undefined;
|
|
@@ -3,5 +3,5 @@ export { default as DropdownSearchMultiSelect } from './DropdownSearchMultiSelec
|
|
|
3
3
|
export { getUiMessages, resolveUiLanguage, uiLanguages } from '../i18n.js';
|
|
4
4
|
export { clampDropdownSearchLimit, formatParamDict, isUsableExactMatch, normalizeDropdownSearchValue, resolveDropdownSearchStatus, } from './state.js';
|
|
5
5
|
export type { UiLanguage, UiMessages } from '../i18n.js';
|
|
6
|
-
export type { DropdownSearchChangeDetail, DropdownSearchEnterDetail, DropdownSearchItem,
|
|
6
|
+
export type { DropdownSearchChangeDetail, DropdownSearchEnterDetail, DropdownSearchItem, DropdownSearchItemLabelGetter, DropdownSearchLoadContext, DropdownSearchLoadOptions, DropdownSearchSelectedItemLabelGetter, DropdownSearchSelectedItemsChangeHandler, DropdownSearchResult, DropdownSearchStatus, } from './types.js';
|
|
7
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
export type DropdownSearchStatus = 'empty' | 'loading' | 'valid' | 'invalid' | 'error';
|
|
2
|
+
/**
|
|
3
|
+
* Search options and selected chips use the unified label/value contract:
|
|
4
|
+
* `label` is the display text, `value` is the submitted string identifier.
|
|
5
|
+
* Extra business fields (e.g. `param_dict`) are preserved as metadata.
|
|
6
|
+
*/
|
|
2
7
|
export interface DropdownSearchItem {
|
|
3
|
-
|
|
4
|
-
|
|
8
|
+
label: string;
|
|
9
|
+
value: string;
|
|
5
10
|
param_dict?: Record<string, string | number | null>;
|
|
6
11
|
disabled?: boolean;
|
|
7
12
|
[key: string]: unknown;
|
|
@@ -16,6 +21,7 @@ export interface DropdownSearchResult {
|
|
|
16
21
|
}
|
|
17
22
|
export type DropdownSearchLoadOptions = (query: string, context: DropdownSearchLoadContext) => Promise<DropdownSearchResult> | DropdownSearchResult;
|
|
18
23
|
export interface DropdownSearchChangeDetail {
|
|
24
|
+
/** Free-text input content; distinct from the submitted `DropdownSearchItem.value`. */
|
|
19
25
|
value: string;
|
|
20
26
|
selectedItem: DropdownSearchItem | null;
|
|
21
27
|
selectedItems: DropdownSearchItem[];
|
|
@@ -26,7 +32,8 @@ export interface DropdownSearchEnterDetail extends DropdownSearchChangeDetail {
|
|
|
26
32
|
exactMatch: DropdownSearchItem | null;
|
|
27
33
|
options: DropdownSearchItem[];
|
|
28
34
|
}
|
|
29
|
-
|
|
35
|
+
/** Returns the input text shown for a selected item; defaults to the item label. */
|
|
36
|
+
export type DropdownSearchItemLabelGetter = (item: DropdownSearchItem) => string;
|
|
30
37
|
export type DropdownSearchSelectedItemsChangeHandler = (items: DropdownSearchItem[]) => void | Promise<void>;
|
|
31
38
|
export type DropdownSearchSelectedItemLabelGetter = (item: DropdownSearchItem) => string;
|
|
32
39
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown-search/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEvF,MAAM,WAAW,kBAAkB;IACjC,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown-search/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEvF;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,UAAU,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;CACxC;AAED,MAAM,MAAM,yBAAyB,GAAG,CACtC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,yBAAyB,KAC/B,OAAO,CAAC,oBAAoB,CAAC,GAAG,oBAAoB,CAAC;AAE1D,MAAM,WAAW,0BAA0B;IACzC,uFAAuF;IACvF,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACxC,aAAa,EAAE,kBAAkB,EAAE,CAAC;IACpC,MAAM,EAAE,oBAAoB,CAAC;CAC9B;AAED,MAAM,WAAW,yBAA0B,SAAQ,0BAA0B;IAC3E,KAAK,EAAE,aAAa,CAAC;IACrB,UAAU,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACtC,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B;AAED,oFAAoF;AACpF,MAAM,MAAM,6BAA6B,GAAG,CAAC,IAAI,EAAE,kBAAkB,KAAK,MAAM,CAAC;AACjF,MAAM,MAAM,wCAAwC,GAAG,CAAC,KAAK,EAAE,kBAAkB,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAC7G,MAAM,MAAM,qCAAqC,GAAG,CAAC,IAAI,EAAE,kBAAkB,KAAK,MAAM,CAAC"}
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
$: normalized = normalizePagination(pagination, totalRows);
|
|
25
25
|
$: pageCount = getPageCount(totalRows, normalized.pageSize);
|
|
26
26
|
$: pageItems = buildPaginationItems(normalized.page, pageCount, maxPageButtons);
|
|
27
|
-
$: pageSizeDropdownOptions = pageSizeOptions.map((option) => ({ label: String(option), value: option }));
|
|
27
|
+
$: pageSizeDropdownOptions = pageSizeOptions.map((option) => ({ label: String(option), value: String(option) }));
|
|
28
28
|
|
|
29
29
|
function buildPaginationItems(currentPage: number, totalPages: number, maxButtons: number): PaginationItem[] {
|
|
30
30
|
if (totalPages < 1) {
|
|
@@ -81,12 +81,13 @@
|
|
|
81
81
|
void onPaginationChange?.(normalizePagination({ ...normalized, page }, totalRows));
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
+
// The dropdown submits string page sizes; the pagination state itself keeps numbers.
|
|
84
85
|
function setPageSize(nextValue: DropdownValue) {
|
|
85
86
|
if (disabled) {
|
|
86
87
|
return;
|
|
87
88
|
}
|
|
88
|
-
const pageSize =
|
|
89
|
-
if (!Number.
|
|
89
|
+
const pageSize = Number(nextValue);
|
|
90
|
+
if (!Number.isInteger(pageSize) || pageSize <= 0) {
|
|
90
91
|
return;
|
|
91
92
|
}
|
|
92
93
|
void onPaginationChange?.(normalizePagination({ page: 1, pageSize }, totalRows));
|
|
@@ -115,7 +116,7 @@
|
|
|
115
116
|
<div class="suu-pagination__size">
|
|
116
117
|
<span>{resolvedPageSizeLabel}</span>
|
|
117
118
|
<Dropdown
|
|
118
|
-
value={normalized.pageSize}
|
|
119
|
+
value={String(normalized.pageSize)}
|
|
119
120
|
options={pageSizeDropdownOptions}
|
|
120
121
|
ariaLabel={resolvedPageSizeLabel}
|
|
121
122
|
placement={pageSizeDropdownPlacement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAE5D,OAAO,KAAK,EAAE,uBAAuB,EAAE,2BAA2B,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAE5D,OAAO,KAAK,EAAE,uBAAuB,EAAE,2BAA2B,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAsHpH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,UAAU;iBAV8S,eAAe;;sBAAkD,MAAM,EAAE;eAAa,UAAU;oBAAkB,MAAM,GAAG,SAAS;;gCAAsE,2BAA2B;;yBAAmD,uBAAuB,GAAG,SAAS;;;kBAU1hB,CAAC;AAC9E,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}
|
package/dist/style.css
CHANGED
|
@@ -1293,12 +1293,33 @@
|
|
|
1293
1293
|
}
|
|
1294
1294
|
|
|
1295
1295
|
.suu-dropdown__group-label {
|
|
1296
|
+
display: flex;
|
|
1297
|
+
width: 100%;
|
|
1298
|
+
border: 0;
|
|
1296
1299
|
padding: 8px 14px 6px;
|
|
1297
1300
|
background: var(--suu-color-surface);
|
|
1298
1301
|
color: var(--suu-color-muted);
|
|
1302
|
+
cursor: pointer;
|
|
1299
1303
|
font-size: 0.75em;
|
|
1300
1304
|
font-weight: 700;
|
|
1301
1305
|
letter-spacing: 0.02em;
|
|
1306
|
+
font: inherit;
|
|
1307
|
+
text-align: left;
|
|
1308
|
+
align-items: center;
|
|
1309
|
+
justify-content: space-between;
|
|
1310
|
+
}
|
|
1311
|
+
|
|
1312
|
+
.suu-dropdown__group-chevron {
|
|
1313
|
+
width: 7px;
|
|
1314
|
+
height: 7px;
|
|
1315
|
+
border-right: 2px solid currentColor;
|
|
1316
|
+
border-bottom: 2px solid currentColor;
|
|
1317
|
+
transform: rotate(225deg);
|
|
1318
|
+
transition: transform 120ms ease;
|
|
1319
|
+
}
|
|
1320
|
+
|
|
1321
|
+
.suu-dropdown__group-label[aria-expanded='true'] .suu-dropdown__group-chevron {
|
|
1322
|
+
transform: rotate(45deg);
|
|
1302
1323
|
}
|
|
1303
1324
|
|
|
1304
1325
|
.suu-dropdown__option {
|
|
@@ -1373,6 +1394,72 @@
|
|
|
1373
1394
|
opacity: 0.55;
|
|
1374
1395
|
}
|
|
1375
1396
|
|
|
1397
|
+
.suu-dropdown__search {
|
|
1398
|
+
display: flex;
|
|
1399
|
+
flex: 0 0 auto;
|
|
1400
|
+
gap: 8px;
|
|
1401
|
+
align-items: center;
|
|
1402
|
+
padding: 8px 14px;
|
|
1403
|
+
border-bottom: 1px solid var(--suu-color-border);
|
|
1404
|
+
background: var(--suu-color-bg);
|
|
1405
|
+
}
|
|
1406
|
+
|
|
1407
|
+
.suu-dropdown__search-icon {
|
|
1408
|
+
flex: 0 0 auto;
|
|
1409
|
+
width: 14px;
|
|
1410
|
+
height: 14px;
|
|
1411
|
+
fill: none;
|
|
1412
|
+
stroke: var(--suu-color-muted);
|
|
1413
|
+
stroke-width: 2;
|
|
1414
|
+
stroke-linecap: round;
|
|
1415
|
+
}
|
|
1416
|
+
|
|
1417
|
+
.suu-dropdown__search-input {
|
|
1418
|
+
flex: 1 1 auto;
|
|
1419
|
+
min-width: 0;
|
|
1420
|
+
border: 0;
|
|
1421
|
+
padding: 2px 0;
|
|
1422
|
+
background: transparent;
|
|
1423
|
+
color: var(--suu-color-text);
|
|
1424
|
+
font: inherit;
|
|
1425
|
+
line-height: 1.2;
|
|
1426
|
+
}
|
|
1427
|
+
|
|
1428
|
+
.suu-dropdown__search-input:focus {
|
|
1429
|
+
outline: none;
|
|
1430
|
+
}
|
|
1431
|
+
|
|
1432
|
+
.suu-dropdown__search-input::placeholder {
|
|
1433
|
+
color: var(--suu-color-muted);
|
|
1434
|
+
}
|
|
1435
|
+
|
|
1436
|
+
.suu-dropdown__status {
|
|
1437
|
+
padding: 12px 14px;
|
|
1438
|
+
color: var(--suu-color-muted);
|
|
1439
|
+
font-size: 0.9em;
|
|
1440
|
+
line-height: 1.4;
|
|
1441
|
+
}
|
|
1442
|
+
|
|
1443
|
+
.suu-dropdown__status--loading {
|
|
1444
|
+
display: flex;
|
|
1445
|
+
gap: 10px;
|
|
1446
|
+
align-items: center;
|
|
1447
|
+
}
|
|
1448
|
+
|
|
1449
|
+
.suu-dropdown__status--error {
|
|
1450
|
+
color: var(--suu-color-error);
|
|
1451
|
+
}
|
|
1452
|
+
|
|
1453
|
+
.suu-dropdown__spinner {
|
|
1454
|
+
flex: 0 0 auto;
|
|
1455
|
+
width: 14px;
|
|
1456
|
+
height: 14px;
|
|
1457
|
+
border: 2px solid var(--suu-color-border);
|
|
1458
|
+
border-top-color: var(--suu-color-accent);
|
|
1459
|
+
border-radius: var(--suu-radius-pill);
|
|
1460
|
+
animation: suu-dropdown-spinner 700ms linear infinite;
|
|
1461
|
+
}
|
|
1462
|
+
|
|
1376
1463
|
.suu-dialog-backdrop {
|
|
1377
1464
|
position: fixed;
|
|
1378
1465
|
inset: 0;
|
package/package.json
CHANGED