@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.
Files changed (38) hide show
  1. package/README.md +107 -10
  2. package/dist/data-table/FilterControl.svelte +30 -4
  3. package/dist/data-table/FilterControl.svelte.d.ts.map +1 -1
  4. package/dist/data-table/filter.d.ts +3 -1
  5. package/dist/data-table/filter.d.ts.map +1 -1
  6. package/dist/data-table/filter.js +4 -0
  7. package/dist/data-table/index.d.ts +1 -1
  8. package/dist/data-table/index.d.ts.map +1 -1
  9. package/dist/data-table/types.d.ts +41 -11
  10. package/dist/data-table/types.d.ts.map +1 -1
  11. package/dist/dialog/ConfirmDialog.svelte +2 -0
  12. package/dist/dialog/ConfirmDialog.svelte.d.ts +1 -0
  13. package/dist/dialog/ConfirmDialog.svelte.d.ts.map +1 -1
  14. package/dist/dialog/Dialog.svelte +22 -2
  15. package/dist/dialog/Dialog.svelte.d.ts +1 -0
  16. package/dist/dialog/Dialog.svelte.d.ts.map +1 -1
  17. package/dist/dropdown/Dropdown.svelte +419 -44
  18. package/dist/dropdown/Dropdown.svelte.d.ts +13 -1
  19. package/dist/dropdown/Dropdown.svelte.d.ts.map +1 -1
  20. package/dist/dropdown/DropdownMultiSelect.svelte +4 -0
  21. package/dist/dropdown/DropdownMultiSelect.svelte.d.ts +2 -0
  22. package/dist/dropdown/DropdownMultiSelect.svelte.d.ts.map +1 -1
  23. package/dist/dropdown/index.d.ts +1 -1
  24. package/dist/dropdown/index.d.ts.map +1 -1
  25. package/dist/dropdown/types.d.ts +21 -2
  26. package/dist/dropdown/types.d.ts.map +1 -1
  27. package/dist/dropdown-search/DropdownSearch.svelte +12 -10
  28. package/dist/dropdown-search/DropdownSearch.svelte.d.ts +2 -2
  29. package/dist/dropdown-search/DropdownSearch.svelte.d.ts.map +1 -1
  30. package/dist/dropdown-search/DropdownSearchMultiSelect.svelte +3 -3
  31. package/dist/dropdown-search/DropdownSearchMultiSelect.svelte.d.ts +2 -2
  32. package/dist/dropdown-search/index.d.ts +1 -1
  33. package/dist/dropdown-search/types.d.ts +10 -3
  34. package/dist/dropdown-search/types.d.ts.map +1 -1
  35. package/dist/pagination/Pagination.svelte +5 -4
  36. package/dist/pagination/Pagination.svelte.d.ts.map +1 -1
  37. package/dist/style.css +87 -0
  38. package/package.json +1 -1
@@ -1,4 +1,5 @@
1
- import type { DropdownMenuAlign, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelectionChangeHandler, DropdownSelection, DropdownTriggerClickHandler } from './types.js';
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":"AAIA,OAAO,KAAK,EAER,iBAAiB,EAGjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,iBAAiB,EACjB,2BAA2B,EAE5B,MAAM,YAAY,CAAC;AA+ftB,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;SAVqb,MAAM,GAAG,SAAS;YAAU,iBAAiB;;cAA8C,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,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;;;kBAUz/B,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}
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;AA+BtB,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;SAV6W,MAAM,GAAG,SAAS;YAAU,kBAAkB;cAAY,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;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;;;kBAUr1B,CAAC;AACvF,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACtE,eAAe,mBAAmB,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"}
@@ -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"}
@@ -1,5 +1,10 @@
1
- export type DropdownValue = string | number;
2
- export type DropdownMultiValue = DropdownValue[];
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,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG,aAAa,EAAE,CAAC;AAEjD,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"}
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
- DropdownSearchItemValueGetter,
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
- export let getItemValue: DropdownSearchItemValueGetter = (item) => item.title;
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 = getItemValue(item);
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 String(item.id);
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.title}`;
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.id)}
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.title}</span>
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.id)}
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?.id === option.id}
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.title}</span>
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, DropdownSearchItemValueGetter, DropdownSearchLoadOptions, DropdownSearchSelectedItemLabelGetter, DropdownSearchSelectedItemsChangeHandler, DropdownSearchStatus } from './types.js';
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
- getItemValue?: DropdownSearchItemValueGetter;
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;AA0oBtB,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"}
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
- DropdownSearchItemValueGetter,
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 getItemValue: DropdownSearchItemValueGetter = (item) => item.title;
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
- {getItemValue}
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, DropdownSearchItemValueGetter, DropdownSearchLoadOptions, DropdownSearchSelectedItemLabelGetter, DropdownSearchSelectedItemsChangeHandler, DropdownSearchStatus } from './types.js';
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
- getItemValue?: DropdownSearchItemValueGetter;
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, DropdownSearchItemValueGetter, DropdownSearchLoadContext, DropdownSearchLoadOptions, DropdownSearchSelectedItemLabelGetter, DropdownSearchSelectedItemsChangeHandler, DropdownSearchResult, DropdownSearchStatus, } from './types.js';
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
- id: string | number;
4
- title: string;
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
- export type DropdownSearchItemValueGetter = (item: DropdownSearchItem) => string;
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,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,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,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,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"}
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 = typeof nextValue === 'number' ? nextValue : Number(nextValue);
89
- if (!Number.isFinite(pageSize)) {
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;AAqHpH,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"}
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ibobbyts/svelte-ui-utils",
3
- "version": "0.4.2",
3
+ "version": "0.4.4",
4
4
  "description": "Reusable Svelte 5 UI utilities for dialogs, toast notifications, dropdown search, and data tables.",
5
5
  "type": "module",
6
6
  "license": "MIT",