@ibobbyts/svelte-ui-utils 0.3.9 → 0.4.0
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 +88 -21
- package/dist/data-table/DataTable.svelte +139 -22
- package/dist/data-table/DataTable.svelte.d.ts +2 -8
- package/dist/data-table/DataTable.svelte.d.ts.map +1 -1
- package/dist/data-table/FilterControl.svelte +64 -18
- 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 +37 -3
- package/dist/data-table/types.d.ts.map +1 -1
- package/dist/dropdown/DropdownMultiSelect.svelte +1 -1
- package/dist/dropdown-search/DropdownSearch.svelte +30 -0
- package/dist/dropdown-search/DropdownSearch.svelte.d.ts.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/ordered-list/OrderedListEditor.svelte +1 -1
- package/dist/pagination/Pagination.svelte +9 -0
- package/dist/pagination/Pagination.svelte.d.ts +1 -0
- package/dist/pagination/Pagination.svelte.d.ts.map +1 -1
- package/dist/sortable-list/SortableList.svelte +1 -1
- package/dist/sortable-table/SortableTable.svelte +1 -1
- package/dist/style.css +96 -12
- package/dist/tooltip/Tooltip.svelte +149 -0
- package/dist/tooltip/Tooltip.svelte.d.ts +22 -0
- package/dist/tooltip/Tooltip.svelte.d.ts.map +1 -0
- package/dist/tooltip/index.d.ts +2 -0
- package/dist/tooltip/index.d.ts.map +1 -0
- package/dist/tooltip/index.js +1 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { DropdownSearchChangeDetail, DropdownSearchItem, DropdownSearchItemValueGetter, DropdownSearchLoadOptions, DropdownSearchStatus } from '../dropdown-search/types.js';
|
|
2
|
-
import type { DropdownPlacement } from '../dropdown/types.js';
|
|
2
|
+
import type { DropdownMenuAlign, DropdownMultiChangeHandler, DropdownMultiValue, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownTriggerClickHandler } from '../dropdown/types.js';
|
|
3
3
|
export type SortDirection = 'asc' | 'desc';
|
|
4
4
|
export type DataTableLayout = 'auto' | 'fixed';
|
|
5
5
|
export interface SortState {
|
|
@@ -12,6 +12,17 @@ export interface PaginationState {
|
|
|
12
12
|
page: number;
|
|
13
13
|
pageSize: number;
|
|
14
14
|
}
|
|
15
|
+
export type DataTablePaginationQueryKey = string | number | boolean | null | undefined;
|
|
16
|
+
export type DataTableServerPagination = {
|
|
17
|
+
tableId: string;
|
|
18
|
+
totalRows: number;
|
|
19
|
+
defaultPageSize?: number;
|
|
20
|
+
pageSizeOptions?: number[];
|
|
21
|
+
pageSizeLabel?: string;
|
|
22
|
+
persistPageSize?: boolean;
|
|
23
|
+
queryKey?: DataTablePaginationQueryKey;
|
|
24
|
+
onRequest: (pagination: PaginationState) => void | Promise<void>;
|
|
25
|
+
};
|
|
15
26
|
export type PaginationDropdownPlacement = DropdownPlacement;
|
|
16
27
|
export type PaginationChangeHandler = (pagination: PaginationState) => void | Promise<void>;
|
|
17
28
|
export type FilterValue = string | number | boolean | null | undefined | DateRangeFilterValue | NumberRangeFilterValue | Array<string | number> | Record<string, unknown>;
|
|
@@ -71,6 +82,24 @@ export interface FilterSelectControl {
|
|
|
71
82
|
options: FilterOption[];
|
|
72
83
|
onChange: (value: string) => void | Promise<void>;
|
|
73
84
|
}
|
|
85
|
+
export interface DropdownMultiSelectFilterControl {
|
|
86
|
+
type: 'dropdownMultiSelect';
|
|
87
|
+
value: DropdownMultiValue;
|
|
88
|
+
options?: DropdownOption[];
|
|
89
|
+
optionGroups?: DropdownOptionGroup[];
|
|
90
|
+
ariaLabel?: string;
|
|
91
|
+
placement?: DropdownPlacement;
|
|
92
|
+
menuAlign?: DropdownMenuAlign;
|
|
93
|
+
fitViewport?: boolean;
|
|
94
|
+
fitContent?: boolean;
|
|
95
|
+
disabled?: boolean;
|
|
96
|
+
width?: string;
|
|
97
|
+
minWidth?: string;
|
|
98
|
+
maxWidth?: string;
|
|
99
|
+
portal?: boolean;
|
|
100
|
+
onChange: DropdownMultiChangeHandler;
|
|
101
|
+
onTriggerClick?: DropdownTriggerClickHandler;
|
|
102
|
+
}
|
|
74
103
|
export type DateRangePreset = 'last24Hours' | 'last7Days' | 'last30Days' | 'today' | 'thisWeek' | 'thisMonth' | 'thisYear';
|
|
75
104
|
export interface DateRangeFilterValue {
|
|
76
105
|
startDate: string;
|
|
@@ -87,6 +116,7 @@ export interface CheckboxFilterControl {
|
|
|
87
116
|
type: 'checkbox';
|
|
88
117
|
value: Array<string | number>;
|
|
89
118
|
options: FilterOption[];
|
|
119
|
+
optionGroups?: DropdownOptionGroup[];
|
|
90
120
|
onChange: (value: Array<string | number>) => void | Promise<void>;
|
|
91
121
|
}
|
|
92
122
|
export interface RadioFilterControl {
|
|
@@ -148,7 +178,7 @@ export interface FilterContainerControl {
|
|
|
148
178
|
type: 'container';
|
|
149
179
|
controls: FilterControl[];
|
|
150
180
|
}
|
|
151
|
-
export type FilterControl = CheckboxFilterControl | RadioFilterControl | DropdownSearchFilterControl | DateRangeFilterControl | NumberRangeFilterControl | FilterButtonControl | FilterLinkControl | FilterSelectControl | FilterContainerControl;
|
|
181
|
+
export type FilterControl = CheckboxFilterControl | RadioFilterControl | DropdownSearchFilterControl | DateRangeFilterControl | NumberRangeFilterControl | FilterButtonControl | FilterLinkControl | FilterSelectControl | DropdownMultiSelectFilterControl | FilterContainerControl;
|
|
152
182
|
export interface FilterTableRow {
|
|
153
183
|
key: string;
|
|
154
184
|
title: string;
|
|
@@ -166,6 +196,10 @@ export type DropdownSearchFilterDefinition = DropdownSearchFilterControl & {
|
|
|
166
196
|
key: string;
|
|
167
197
|
label: string;
|
|
168
198
|
};
|
|
199
|
+
export type DropdownMultiSelectFilterDefinition = DropdownMultiSelectFilterControl & {
|
|
200
|
+
key: string;
|
|
201
|
+
label: string;
|
|
202
|
+
};
|
|
169
203
|
export type DateRangeFilterDefinition = DateRangeFilterControl & {
|
|
170
204
|
key: string;
|
|
171
205
|
label: string;
|
|
@@ -174,5 +208,5 @@ export type NumberRangeFilterDefinition = NumberRangeFilterControl & {
|
|
|
174
208
|
key: string;
|
|
175
209
|
label: string;
|
|
176
210
|
};
|
|
177
|
-
export type FilterDefinition = CheckboxFilterDefinition | RadioFilterDefinition | DropdownSearchFilterDefinition | DateRangeFilterDefinition | NumberRangeFilterDefinition;
|
|
211
|
+
export type FilterDefinition = CheckboxFilterDefinition | RadioFilterDefinition | DropdownSearchFilterDefinition | DropdownMultiSelectFilterDefinition | DateRangeFilterDefinition | NumberRangeFilterDefinition;
|
|
178
212
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,0BAA0B,EAC1B,kBAAkB,EAClB,6BAA6B,EAC7B,yBAAyB,EACzB,oBAAoB,EACrB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,0BAA0B,EAC1B,kBAAkB,EAClB,6BAA6B,EAC7B,yBAAyB,EACzB,oBAAoB,EACrB,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EACV,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,sBAAsB,CAAC;AAE9B,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,aAAa,CAAC;CAC1B;AAED,MAAM,MAAM,0BAA0B,GAAG,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnF,MAAM,MAAM,2BAA2B,GAAG,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAE9F,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,2BAA2B,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;AAEvF,MAAM,MAAM,yBAAyB,GAAG;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC,SAAS,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAClE,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,iBAAiB,CAAC;AAE5D,MAAM,MAAM,uBAAuB,GAAG,CAAC,UAAU,EAAE,eAAe,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAE5F,MAAM,MAAM,WAAW,GACnB,MAAM,GACN,MAAM,GACN,OAAO,GACP,IAAI,GACJ,SAAS,GACT,oBAAoB,GACpB,sBAAsB,GACtB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GACtB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AAEtD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IACvB,UAAU,EAAE,eAAe,CAAC;IAC5B,OAAO,EAAE,WAAW,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC;AAEzC,MAAM,MAAM,mBAAmB,CAAC,GAAG,GAAG,OAAO,IACzC,MAAM,GACN,SAAS,GACT,IAAI,GACJ,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,EAAE,eAAe,CAAC,GAAG,CAAC,KAAK,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,CAAC;AAEvG,MAAM,MAAM,eAAe,CAAC,GAAG,GAAG,OAAO,IAAI,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC,CAAC;AAErG,MAAM,MAAM,sBAAsB,CAAC,GAAG,GAAG,OAAO,IAAI,CAClD,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,MAAM,KACV,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAElE,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEjE,MAAM,WAAW,eAAe,CAAC,GAAG,GAAG,OAAO;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,wBAAwB,CAAC;IACjD,mBAAmB,CAAC,EAAE,sBAAsB,CAAC;IAC7C,mBAAmB,CAAC,EAAE,wBAAwB,CAAC;IAC/C,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAC3C,KAAK,CAAC,EAAE,mBAAmB,CAAC,GAAG,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,eAAe,CAAC,GAAG,CAAC,KAAK,kBAAkB,CAAC;CACzE;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,IAAI,GAAG,GAAG,CAAC;AAErD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACnD;AAED,MAAM,WAAW,gCAAgC;IAC/C,IAAI,EAAE,qBAAqB,CAAC;IAC5B,KAAK,EAAE,kBAAkB,CAAC;IAC1B,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,0BAA0B,CAAC;IACrC,cAAc,CAAC,EAAE,2BAA2B,CAAC;CAC9C;AAED,MAAM,MAAM,eAAe,GACvB,aAAa,GACb,WAAW,GACX,YAAY,GACZ,OAAO,GACP,UAAU,GACV,WAAW,GACX,UAAU,CAAC;AAEf,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,eAAe,GAAG,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,sBAAsB;IACrC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IAC9B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,YAAY,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACnE;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5D;AAED,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACxC,MAAM,EAAE,oBAAoB,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,6BAA6B,CAAC;IAC7C,WAAW,EAAE,yBAAyB,CAAC;IACvC,QAAQ,EAAE,CAAC,MAAM,EAAE,0BAA0B,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACxE;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,oBAAoB,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;IACxD,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,IAAI,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACjE;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,sBAAsB,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACnE;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B;AAED,MAAM,MAAM,aAAa,GACrB,qBAAqB,GACrB,kBAAkB,GAClB,2BAA2B,GAC3B,sBAAsB,GACtB,wBAAwB,GACxB,mBAAmB,GACnB,iBAAiB,GACjB,mBAAmB,GACnB,gCAAgC,GAChC,sBAAsB,CAAC;AAE3B,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,MAAM,wBAAwB,GAAG,qBAAqB,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAC9F,MAAM,MAAM,qBAAqB,GAAG,kBAAkB,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACxF,MAAM,MAAM,8BAA8B,GAAG,2BAA2B,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAC1G,MAAM,MAAM,mCAAmC,GAAG,gCAAgC,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACpH,MAAM,MAAM,yBAAyB,GAAG,sBAAsB,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAChG,MAAM,MAAM,2BAA2B,GAAG,wBAAwB,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACpG,MAAM,MAAM,gBAAgB,GACxB,wBAAwB,GACxB,qBAAqB,GACrB,8BAA8B,GAC9B,mCAAmC,GACnC,yBAAyB,GACzB,2BAA2B,CAAC"}
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
export let placement: DropdownPlacement = 'auto';
|
|
21
21
|
export let menuAlign: DropdownMenuAlign = 'left';
|
|
22
22
|
export let fitViewport = true;
|
|
23
|
-
export let fitContent =
|
|
23
|
+
export let fitContent = true;
|
|
24
24
|
export let disabled = false;
|
|
25
25
|
export let width: string | undefined = undefined;
|
|
26
26
|
export let minWidth: string | undefined = undefined;
|
|
@@ -301,6 +301,33 @@
|
|
|
301
301
|
}, 0);
|
|
302
302
|
}
|
|
303
303
|
|
|
304
|
+
function handleFormReset() {
|
|
305
|
+
clearSearchTimer();
|
|
306
|
+
clearBlurTimer();
|
|
307
|
+
abortActiveSearch();
|
|
308
|
+
value = '';
|
|
309
|
+
inputValue = '';
|
|
310
|
+
lastHandledValue = '';
|
|
311
|
+
if (!multiselect) {
|
|
312
|
+
selectedItem = null;
|
|
313
|
+
}
|
|
314
|
+
exactMatch = null;
|
|
315
|
+
options = [];
|
|
316
|
+
showingFocusOptions = false;
|
|
317
|
+
setStatus(
|
|
318
|
+
resolveDropdownSearchStatus({
|
|
319
|
+
value,
|
|
320
|
+
selectedItem,
|
|
321
|
+
selectedItems,
|
|
322
|
+
exactMatch,
|
|
323
|
+
minLength,
|
|
324
|
+
validate,
|
|
325
|
+
multiselect,
|
|
326
|
+
}),
|
|
327
|
+
);
|
|
328
|
+
emitChange();
|
|
329
|
+
}
|
|
330
|
+
|
|
304
331
|
function handleFocus() {
|
|
305
332
|
clearBlurTimer();
|
|
306
333
|
focused = true;
|
|
@@ -526,12 +553,15 @@
|
|
|
526
553
|
});
|
|
527
554
|
|
|
528
555
|
onMount(() => {
|
|
556
|
+
const formElement = inputElement?.form;
|
|
557
|
+
formElement?.addEventListener('reset', handleFormReset);
|
|
529
558
|
if (showOptionsOnFocus && focused) {
|
|
530
559
|
showFocusOptions();
|
|
531
560
|
}
|
|
532
561
|
if (searchOnExternalValueChange && normalizeDropdownSearchValue(value)) {
|
|
533
562
|
handleExternalValue(value);
|
|
534
563
|
}
|
|
564
|
+
return () => formElement?.removeEventListener('reset', handleFormReset);
|
|
535
565
|
});
|
|
536
566
|
</script>
|
|
537
567
|
|
|
@@ -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;AAynBtB,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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export * from './toast/index.js';
|
|
|
2
2
|
export * from './dropdown/index.js';
|
|
3
3
|
export * from './dropdown-search/index.js';
|
|
4
4
|
export * from './dialog/index.js';
|
|
5
|
+
export * from './tooltip/index.js';
|
|
5
6
|
export * from './data-table/index.js';
|
|
6
7
|
export * from './sortable-list/index.js';
|
|
7
8
|
export * from './ordered-list/index.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC1E,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC1E,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -2,6 +2,7 @@ export * from './toast/index.js';
|
|
|
2
2
|
export * from './dropdown/index.js';
|
|
3
3
|
export * from './dropdown-search/index.js';
|
|
4
4
|
export * from './dialog/index.js';
|
|
5
|
+
export * from './tooltip/index.js';
|
|
5
6
|
export * from './data-table/index.js';
|
|
6
7
|
export * from './sortable-list/index.js';
|
|
7
8
|
export * from './ordered-list/index.js';
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
.suu-ordered-list-editor__row :global(label input) { flex: 0; }
|
|
55
55
|
.compact .suu-ordered-list-editor__row { gap: 3px; }
|
|
56
56
|
.suu-ordered-list-editor__current { margin-left: auto; }
|
|
57
|
-
.suu-ordered-list-editor__remove { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 6px; border: 1px solid transparent; border-radius:
|
|
57
|
+
.suu-ordered-list-editor__remove { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 6px; border: 1px solid transparent; border-radius: var(--suu-radius-sm); background: transparent; color: #dc2626; cursor: pointer; }
|
|
58
58
|
.suu-ordered-list-editor__remove svg { width: 16px; height: 16px; }
|
|
59
59
|
.suu-ordered-list-editor__remove:disabled { cursor: default; opacity: .35; }
|
|
60
60
|
</style>
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
export let pageSizeLabel: string | undefined = undefined;
|
|
15
15
|
export let maxPageButtons = 15;
|
|
16
16
|
export let pageSizeDropdownPlacement: PaginationDropdownPlacement = 'down';
|
|
17
|
+
export let disabled = false;
|
|
17
18
|
export let onPaginationChange: PaginationChangeHandler | undefined = undefined;
|
|
18
19
|
|
|
19
20
|
type PaginationItem = { kind: 'page'; page: number } | { kind: 'ellipsis' };
|
|
@@ -74,10 +75,16 @@
|
|
|
74
75
|
}
|
|
75
76
|
|
|
76
77
|
function setPage(page: number) {
|
|
78
|
+
if (disabled) {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
77
81
|
void onPaginationChange?.(normalizePagination({ ...normalized, page }, totalRows));
|
|
78
82
|
}
|
|
79
83
|
|
|
80
84
|
function setPageSize(nextValue: DropdownValue) {
|
|
85
|
+
if (disabled) {
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
81
88
|
const pageSize = typeof nextValue === 'number' ? nextValue : Number(nextValue);
|
|
82
89
|
if (!Number.isFinite(pageSize)) {
|
|
83
90
|
return;
|
|
@@ -95,6 +102,7 @@
|
|
|
95
102
|
class:suu-pagination__page-button={true}
|
|
96
103
|
class:suu-pagination__page-button--active={item.page === normalized.page}
|
|
97
104
|
aria-current={item.page === normalized.page ? 'page' : undefined}
|
|
105
|
+
{disabled}
|
|
98
106
|
on:click={() => setPage(item.page)}
|
|
99
107
|
>
|
|
100
108
|
{item.page}
|
|
@@ -111,6 +119,7 @@
|
|
|
111
119
|
options={pageSizeDropdownOptions}
|
|
112
120
|
ariaLabel={resolvedPageSizeLabel}
|
|
113
121
|
placement={pageSizeDropdownPlacement}
|
|
122
|
+
{disabled}
|
|
114
123
|
onChange={setPageSize}
|
|
115
124
|
/>
|
|
116
125
|
</div>
|
|
@@ -21,6 +21,7 @@ declare const Pagination: $$__sveltets_2_IsomorphicComponent<{
|
|
|
21
21
|
pageSizeLabel?: string | undefined;
|
|
22
22
|
maxPageButtons?: number;
|
|
23
23
|
pageSizeDropdownPlacement?: PaginationDropdownPlacement;
|
|
24
|
+
disabled?: boolean;
|
|
24
25
|
onPaginationChange?: PaginationChangeHandler | undefined;
|
|
25
26
|
}, {
|
|
26
27
|
[evt: string]: CustomEvent<any>;
|
|
@@ -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;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"}
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
left: 0;
|
|
157
157
|
z-index: 2;
|
|
158
158
|
height: 3px;
|
|
159
|
-
border-radius:
|
|
159
|
+
border-radius: var(--suu-radius-pill);
|
|
160
160
|
background: var(--suu-color-accent, #2563eb);
|
|
161
161
|
box-shadow: 0 0 8px color-mix(in srgb, var(--suu-color-accent, #2563eb) 65%, transparent);
|
|
162
162
|
content: '';
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
</div>
|
|
107
107
|
|
|
108
108
|
<style>
|
|
109
|
-
.suu-sortable-table-wrap { overflow: auto; border: 1px solid var(--suu-sortable-table-border, var(--suu-color-border, #d1d5db)); border-radius: var(--suu-radius
|
|
109
|
+
.suu-sortable-table-wrap { overflow: auto; border: 1px solid var(--suu-sortable-table-border, var(--suu-color-border, #d1d5db)); border-radius: var(--suu-radius); }
|
|
110
110
|
.suu-sortable-table { width: 100%; border-collapse: collapse; }
|
|
111
111
|
.suu-sortable-table__drag-column { width: 1%; }
|
|
112
112
|
.suu-sortable-table__remove-column { width: 38px; }
|
package/dist/style.css
CHANGED
|
@@ -12,7 +12,13 @@
|
|
|
12
12
|
--suu-color-warning: #d97706;
|
|
13
13
|
--suu-color-info: #2563eb;
|
|
14
14
|
--suu-shadow: 0 12px 30px rgb(15 23 42 / 0.14);
|
|
15
|
-
--suu-radius:
|
|
15
|
+
--suu-radius-xs: 4px;
|
|
16
|
+
--suu-radius-sm: 6px;
|
|
17
|
+
--suu-radius-md: 8px;
|
|
18
|
+
--suu-radius-pill: 999px;
|
|
19
|
+
--suu-radius: var(--suu-radius-md);
|
|
20
|
+
--suu-radius-lg: calc(var(--suu-radius) + 2px);
|
|
21
|
+
--suu-radius-inner: max(0px, calc(var(--suu-radius) - 1px));
|
|
16
22
|
--suu-font: inherit;
|
|
17
23
|
}
|
|
18
24
|
|
|
@@ -170,7 +176,7 @@
|
|
|
170
176
|
width: 28px;
|
|
171
177
|
height: 28px;
|
|
172
178
|
border: 0;
|
|
173
|
-
border-radius:
|
|
179
|
+
border-radius: var(--suu-radius-pill);
|
|
174
180
|
background: transparent;
|
|
175
181
|
color: var(--suu-color-muted);
|
|
176
182
|
cursor: pointer;
|
|
@@ -236,7 +242,7 @@
|
|
|
236
242
|
gap: 6px;
|
|
237
243
|
padding: 4px 6px 4px 10px;
|
|
238
244
|
border: 1px solid color-mix(in srgb, var(--suu-color-accent) 34%, var(--suu-color-border));
|
|
239
|
-
border-radius:
|
|
245
|
+
border-radius: var(--suu-radius-pill);
|
|
240
246
|
background: color-mix(in srgb, var(--suu-color-accent) 9%, var(--suu-color-bg));
|
|
241
247
|
color: var(--suu-color-text);
|
|
242
248
|
font-size: 0.875rem;
|
|
@@ -257,7 +263,7 @@
|
|
|
257
263
|
height: 1.25rem;
|
|
258
264
|
padding: 0;
|
|
259
265
|
border: 0;
|
|
260
|
-
border-radius:
|
|
266
|
+
border-radius: var(--suu-radius-pill);
|
|
261
267
|
background: transparent;
|
|
262
268
|
color: var(--suu-color-muted);
|
|
263
269
|
cursor: pointer;
|
|
@@ -349,7 +355,7 @@
|
|
|
349
355
|
height: 1.5rem;
|
|
350
356
|
padding: 0;
|
|
351
357
|
border: 0;
|
|
352
|
-
border-radius:
|
|
358
|
+
border-radius: var(--suu-radius-pill);
|
|
353
359
|
background: transparent;
|
|
354
360
|
color: var(--suu-color-muted);
|
|
355
361
|
cursor: pointer;
|
|
@@ -451,7 +457,7 @@
|
|
|
451
457
|
width: 1rem;
|
|
452
458
|
height: 1rem;
|
|
453
459
|
border: 1px solid var(--suu-color-border-strong);
|
|
454
|
-
border-radius:
|
|
460
|
+
border-radius: var(--suu-radius-xs);
|
|
455
461
|
color: transparent;
|
|
456
462
|
}
|
|
457
463
|
|
|
@@ -496,7 +502,7 @@
|
|
|
496
502
|
height: 0.875rem;
|
|
497
503
|
border: 2px solid color-mix(in srgb, var(--suu-color-muted) 28%, transparent);
|
|
498
504
|
border-top-color: var(--suu-color-accent);
|
|
499
|
-
border-radius:
|
|
505
|
+
border-radius: var(--suu-radius-pill);
|
|
500
506
|
animation: suu-dropdown-spinner 700ms linear infinite;
|
|
501
507
|
}
|
|
502
508
|
|
|
@@ -690,6 +696,22 @@
|
|
|
690
696
|
background: var(--suu-color-border);
|
|
691
697
|
}
|
|
692
698
|
|
|
699
|
+
.suu-filter-table__filters:not(.suu-filter-table__filters--borderless) tr:first-child th {
|
|
700
|
+
border-top-left-radius: var(--suu-radius-inner);
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
.suu-filter-table__filters:not(.suu-filter-table__filters--borderless) tr:first-child td {
|
|
704
|
+
border-top-right-radius: var(--suu-radius-inner);
|
|
705
|
+
}
|
|
706
|
+
|
|
707
|
+
.suu-filter-table__filters:not(.suu-filter-table__filters--borderless) tr:last-child th {
|
|
708
|
+
border-bottom-left-radius: var(--suu-radius-inner);
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
.suu-filter-table__filters:not(.suu-filter-table__filters--borderless) tr:last-child td {
|
|
712
|
+
border-bottom-right-radius: var(--suu-radius-inner);
|
|
713
|
+
}
|
|
714
|
+
|
|
693
715
|
.suu-filter-table__filters td {
|
|
694
716
|
min-width: 0;
|
|
695
717
|
}
|
|
@@ -712,6 +734,20 @@
|
|
|
712
734
|
align-items: center;
|
|
713
735
|
}
|
|
714
736
|
|
|
737
|
+
.suu-filter-table__option--group-end::after {
|
|
738
|
+
position: absolute;
|
|
739
|
+
top: 5%;
|
|
740
|
+
left: calc(100% + 12px);
|
|
741
|
+
bottom: 5%;
|
|
742
|
+
width: 1px;
|
|
743
|
+
background: var(--suu-color-border);
|
|
744
|
+
content: '';
|
|
745
|
+
}
|
|
746
|
+
|
|
747
|
+
.suu-filter-table__option--group-end {
|
|
748
|
+
margin-right: 10px;
|
|
749
|
+
}
|
|
750
|
+
|
|
715
751
|
.suu-filter-table__option {
|
|
716
752
|
position: relative;
|
|
717
753
|
display: inline-flex;
|
|
@@ -772,7 +808,7 @@
|
|
|
772
808
|
height: 1em;
|
|
773
809
|
place-items: center;
|
|
774
810
|
border: 1px solid var(--suu-color-border-strong);
|
|
775
|
-
border-radius:
|
|
811
|
+
border-radius: var(--suu-radius-pill);
|
|
776
812
|
color: transparent;
|
|
777
813
|
transform: translateY(0.06em);
|
|
778
814
|
}
|
|
@@ -1288,7 +1324,7 @@
|
|
|
1288
1324
|
width: 1em;
|
|
1289
1325
|
height: 1em;
|
|
1290
1326
|
border: 1px solid var(--suu-color-border);
|
|
1291
|
-
border-radius:
|
|
1327
|
+
border-radius: var(--suu-radius-xs);
|
|
1292
1328
|
background: var(--suu-color-bg);
|
|
1293
1329
|
}
|
|
1294
1330
|
|
|
@@ -1359,7 +1395,7 @@
|
|
|
1359
1395
|
max-height: min(720px, calc(100vh - 48px));
|
|
1360
1396
|
overflow: hidden;
|
|
1361
1397
|
border: 1px solid var(--suu-color-border);
|
|
1362
|
-
border-radius:
|
|
1398
|
+
border-radius: var(--suu-radius-lg);
|
|
1363
1399
|
background: var(--suu-color-bg);
|
|
1364
1400
|
box-shadow: var(--suu-shadow);
|
|
1365
1401
|
}
|
|
@@ -1431,7 +1467,7 @@
|
|
|
1431
1467
|
height: 2rem;
|
|
1432
1468
|
padding: 0;
|
|
1433
1469
|
border: 0;
|
|
1434
|
-
border-radius:
|
|
1470
|
+
border-radius: var(--suu-radius-pill);
|
|
1435
1471
|
background: transparent;
|
|
1436
1472
|
color: var(--suu-color-muted);
|
|
1437
1473
|
cursor: pointer;
|
|
@@ -1465,6 +1501,54 @@
|
|
|
1465
1501
|
background: color-mix(in srgb, var(--suu-color-surface) 64%, var(--suu-color-bg));
|
|
1466
1502
|
}
|
|
1467
1503
|
|
|
1504
|
+
.suu-tooltip {
|
|
1505
|
+
position: relative;
|
|
1506
|
+
display: inline-flex;
|
|
1507
|
+
vertical-align: middle;
|
|
1508
|
+
}
|
|
1509
|
+
|
|
1510
|
+
.suu-tooltip__panel {
|
|
1511
|
+
position: fixed;
|
|
1512
|
+
box-sizing: border-box;
|
|
1513
|
+
top: var(--suu-tooltip-top, 0px);
|
|
1514
|
+
left: var(--suu-tooltip-left, 0px);
|
|
1515
|
+
z-index: 1300;
|
|
1516
|
+
max-width: min(320px, calc(100vw - 16px));
|
|
1517
|
+
max-height: calc(100vh - 16px);
|
|
1518
|
+
padding: 8px 10px;
|
|
1519
|
+
border: 1px solid var(--suu-color-border);
|
|
1520
|
+
border-radius: var(--suu-radius);
|
|
1521
|
+
background: var(--suu-color-surface);
|
|
1522
|
+
color: var(--suu-color-text);
|
|
1523
|
+
box-shadow: var(--suu-shadow);
|
|
1524
|
+
font-size: 0.875rem;
|
|
1525
|
+
line-height: 1.4;
|
|
1526
|
+
overflow-wrap: anywhere;
|
|
1527
|
+
overflow-y: auto;
|
|
1528
|
+
pointer-events: none;
|
|
1529
|
+
}
|
|
1530
|
+
|
|
1531
|
+
.suu-tooltip__panel img {
|
|
1532
|
+
display: block;
|
|
1533
|
+
width: auto;
|
|
1534
|
+
max-width: calc(100vw - 36px);
|
|
1535
|
+
max-height: calc(100vh - 36px);
|
|
1536
|
+
height: auto;
|
|
1537
|
+
object-fit: contain;
|
|
1538
|
+
}
|
|
1539
|
+
|
|
1540
|
+
.suu-tooltip__panel:has(img) {
|
|
1541
|
+
display: flex;
|
|
1542
|
+
flex-direction: column;
|
|
1543
|
+
max-width: calc(100vw - 16px);
|
|
1544
|
+
overflow: hidden;
|
|
1545
|
+
}
|
|
1546
|
+
|
|
1547
|
+
.suu-tooltip__panel:has(img) img {
|
|
1548
|
+
flex: 1 1 auto;
|
|
1549
|
+
min-height: 0;
|
|
1550
|
+
}
|
|
1551
|
+
|
|
1468
1552
|
.suu-dialog__button {
|
|
1469
1553
|
min-height: 38px;
|
|
1470
1554
|
padding: 7px 14px;
|
|
@@ -1626,7 +1710,7 @@
|
|
|
1626
1710
|
height: 1rem;
|
|
1627
1711
|
border: 2px solid color-mix(in srgb, var(--suu-color-muted) 28%, transparent);
|
|
1628
1712
|
border-top-color: var(--suu-color-accent);
|
|
1629
|
-
border-radius:
|
|
1713
|
+
border-radius: var(--suu-radius-pill);
|
|
1630
1714
|
animation: suu-dropdown-spinner 700ms linear infinite;
|
|
1631
1715
|
}
|
|
1632
1716
|
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
<svelte:options runes={false} />
|
|
2
|
+
|
|
3
|
+
<script lang="ts">
|
|
4
|
+
import { afterUpdate, onDestroy } from 'svelte';
|
|
5
|
+
|
|
6
|
+
let rootElement: HTMLSpanElement | undefined;
|
|
7
|
+
let panelElement: HTMLDivElement | undefined;
|
|
8
|
+
let hovered = false;
|
|
9
|
+
let focused = false;
|
|
10
|
+
let visible = false;
|
|
11
|
+
let panelId = `suu-tooltip-${Math.random().toString(36).slice(2)}`;
|
|
12
|
+
let frame = 0;
|
|
13
|
+
let triggerElement: HTMLElement | undefined;
|
|
14
|
+
let panelObserver: ResizeObserver | undefined;
|
|
15
|
+
|
|
16
|
+
$: visible = hovered || focused;
|
|
17
|
+
|
|
18
|
+
function updatePosition() {
|
|
19
|
+
if (!visible || !rootElement || !panelElement || typeof window === 'undefined') {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const trigger = rootElement.getBoundingClientRect();
|
|
24
|
+
const panel = panelElement.getBoundingClientRect();
|
|
25
|
+
const gap = 8;
|
|
26
|
+
const canPlaceAbove = trigger.top >= panel.height + gap;
|
|
27
|
+
const preferredTop = canPlaceAbove ? trigger.top - panel.height - gap : trigger.bottom + gap;
|
|
28
|
+
const maxTop = Math.max(gap, window.innerHeight - panel.height - gap);
|
|
29
|
+
const top = Math.min(maxTop, Math.max(gap, preferredTop));
|
|
30
|
+
const maxLeft = Math.max(gap, window.innerWidth - panel.width - gap);
|
|
31
|
+
const left = Math.min(
|
|
32
|
+
Math.max(gap, trigger.left + (trigger.width - panel.width) / 2),
|
|
33
|
+
maxLeft,
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
panelElement.style.setProperty('--suu-tooltip-top', `${top}px`);
|
|
37
|
+
panelElement.style.setProperty('--suu-tooltip-left', `${left}px`);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
function schedulePosition() {
|
|
41
|
+
if (typeof window === 'undefined') return;
|
|
42
|
+
cancelAnimationFrame(frame);
|
|
43
|
+
frame = requestAnimationFrame(updatePosition);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
function showFromHover() {
|
|
47
|
+
hovered = true;
|
|
48
|
+
triggerElement = findTrigger();
|
|
49
|
+
schedulePosition();
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
function hideFromHover() {
|
|
53
|
+
hovered = false;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
function focusIn(event: FocusEvent) {
|
|
57
|
+
focused = true;
|
|
58
|
+
triggerElement = event.target instanceof HTMLElement ? event.target : findTrigger();
|
|
59
|
+
schedulePosition();
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
function focusOut(event: FocusEvent) {
|
|
63
|
+
const next = event.relatedTarget;
|
|
64
|
+
if (next instanceof Node && rootElement?.contains(next)) return;
|
|
65
|
+
focused = false;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
function handleViewportChange() {
|
|
69
|
+
schedulePosition();
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
function findTrigger() {
|
|
73
|
+
return rootElement?.querySelector<HTMLElement>(
|
|
74
|
+
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
|
|
75
|
+
) ?? undefined;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
function syncDescription() {
|
|
79
|
+
if (!rootElement || !$$slots.content) return;
|
|
80
|
+
const nextTrigger = triggerElement ?? findTrigger();
|
|
81
|
+
if (triggerElement && triggerElement !== nextTrigger) {
|
|
82
|
+
removePanelDescription(triggerElement);
|
|
83
|
+
}
|
|
84
|
+
triggerElement = nextTrigger;
|
|
85
|
+
if (triggerElement) {
|
|
86
|
+
if (visible) addPanelDescription(triggerElement);
|
|
87
|
+
else removePanelDescription(triggerElement);
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
function addPanelDescription(element: HTMLElement) {
|
|
92
|
+
const ids = new Set((element.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean));
|
|
93
|
+
ids.add(panelId);
|
|
94
|
+
element.setAttribute('aria-describedby', [...ids].join(' '));
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
function removePanelDescription(element: HTMLElement) {
|
|
98
|
+
const ids = (element.getAttribute('aria-describedby') ?? '')
|
|
99
|
+
.split(/\s+/)
|
|
100
|
+
.filter((id) => id && id !== panelId);
|
|
101
|
+
if (ids.length > 0) element.setAttribute('aria-describedby', ids.join(' '));
|
|
102
|
+
else element.removeAttribute('aria-describedby');
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
function syncPanelObserver() {
|
|
106
|
+
panelObserver?.disconnect();
|
|
107
|
+
panelObserver = undefined;
|
|
108
|
+
if (visible && panelElement && typeof ResizeObserver !== 'undefined') {
|
|
109
|
+
panelObserver = new ResizeObserver(() => schedulePosition());
|
|
110
|
+
panelObserver.observe(panelElement);
|
|
111
|
+
}
|
|
112
|
+
syncDescription();
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
if (typeof window !== 'undefined') {
|
|
116
|
+
window.addEventListener('resize', handleViewportChange);
|
|
117
|
+
window.addEventListener('scroll', handleViewportChange, true);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
afterUpdate(syncPanelObserver);
|
|
121
|
+
|
|
122
|
+
onDestroy(() => {
|
|
123
|
+
if (typeof window !== 'undefined') {
|
|
124
|
+
window.removeEventListener('resize', handleViewportChange);
|
|
125
|
+
window.removeEventListener('scroll', handleViewportChange, true);
|
|
126
|
+
cancelAnimationFrame(frame);
|
|
127
|
+
}
|
|
128
|
+
panelObserver?.disconnect();
|
|
129
|
+
if (triggerElement) removePanelDescription(triggerElement);
|
|
130
|
+
});
|
|
131
|
+
</script>
|
|
132
|
+
|
|
133
|
+
<span
|
|
134
|
+
bind:this={rootElement}
|
|
135
|
+
class="suu-tooltip"
|
|
136
|
+
role="group"
|
|
137
|
+
on:mouseenter={showFromHover}
|
|
138
|
+
on:mouseleave={hideFromHover}
|
|
139
|
+
on:focusin={focusIn}
|
|
140
|
+
on:focusout={focusOut}
|
|
141
|
+
>
|
|
142
|
+
<slot />
|
|
143
|
+
|
|
144
|
+
{#if visible && $$slots.content}
|
|
145
|
+
<div bind:this={panelElement} class="suu-tooltip__panel" id={panelId} role="tooltip">
|
|
146
|
+
<slot name="content" />
|
|
147
|
+
</div>
|
|
148
|
+
{/if}
|
|
149
|
+
</span>
|