@ibobbyts/svelte-ui-utils 0.3.7 → 0.3.9
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 +18 -0
- package/dist/data-table/BaseDataTable.svelte +5 -0
- package/dist/data-table/BaseDataTable.svelte.d.ts +1 -0
- package/dist/data-table/BaseDataTable.svelte.d.ts.map +1 -1
- package/dist/data-table/DataTable.svelte +2 -0
- package/dist/data-table/DataTable.svelte.d.ts +1 -0
- package/dist/data-table/DataTable.svelte.d.ts.map +1 -1
- package/dist/data-table/FilterTable.svelte +2 -1
- package/dist/data-table/FilterTable.svelte.d.ts +1 -0
- package/dist/data-table/FilterTable.svelte.d.ts.map +1 -1
- package/dist/sortable-table/SortableTable.svelte +13 -3
- package/dist/sortable-table/SortableTable.svelte.d.ts +1 -0
- package/dist/sortable-table/SortableTable.svelte.d.ts.map +1 -1
- package/dist/sortable-table/SortableTableEnhanced.svelte +3 -0
- package/dist/sortable-table/SortableTableEnhanced.svelte.d.ts +1 -0
- package/dist/sortable-table/SortableTableEnhanced.svelte.d.ts.map +1 -1
- package/dist/style.css +13 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -238,6 +238,14 @@ controls need caller-owned accessible labels. Each label is applied to both
|
|
|
238
238
|
</SortableTable>
|
|
239
239
|
```
|
|
240
240
|
|
|
241
|
+
Set `verticalSeparators={true}` to show vertical lines between the drag,
|
|
242
|
+
content, and remove columns. The option is disabled by default. Override
|
|
243
|
+
`--suu-sortable-table-border` and `--suu-sortable-table-separator` to tune
|
|
244
|
+
light-mode borders. For dark mode, optionally override
|
|
245
|
+
`--suu-sortable-table-border-dark` and
|
|
246
|
+
`--suu-sortable-table-separator-dark`; both default to a higher-contrast
|
|
247
|
+
blue-gray color.
|
|
248
|
+
|
|
241
249
|
`SortableTableEnhanced` composes the same table and adds a controlled current
|
|
242
250
|
radio immediately after each drag handle. `currentId` is read-only input;
|
|
243
251
|
`onCurrentChange` asks the caller to persist a new current item. Use
|
|
@@ -259,6 +267,7 @@ light and dark defaults and expose `--suu-sortable-table-row-*-light` and
|
|
|
259
267
|
getRowColorPreset={(row) => row.exhausted ? 'red' : row.cooling ? 'yellow' : 'green'}
|
|
260
268
|
onReorder={reorder}
|
|
261
269
|
onRemove={remove}
|
|
270
|
+
verticalSeparators={true}
|
|
262
271
|
>
|
|
263
272
|
{#snippet header()}<th>Name</th><th>Protocol</th>{/snippet}
|
|
264
273
|
{#snippet children(row)}<td>{row.name}</td><td>{row.protocol}</td>{/snippet}
|
|
@@ -548,6 +557,11 @@ tables that should render body rows without a header section. Sortable headers
|
|
|
548
557
|
preserve the current window scroll position by default and wait for an async
|
|
549
558
|
`onSortChange` before restoring scroll position.
|
|
550
559
|
|
|
560
|
+
Body rows change background on pointer hover by default. Set
|
|
561
|
+
`hoverable={false}` to disable that behavior. When `zebra={false}`, the body
|
|
562
|
+
uses `var(--suu-color-bg)` as its explicit background instead of alternating
|
|
563
|
+
row colors.
|
|
564
|
+
|
|
551
565
|
Column alignment is configured separately for headers and body cells.
|
|
552
566
|
Horizontal alignment accepts `left`, `center`, or `right`; vertical alignment
|
|
553
567
|
accepts `top`, `middle`, or `bottom`. Header alignment defaults to
|
|
@@ -623,6 +637,10 @@ for the left column and a controlled filter created with the `filter` helper:
|
|
|
623
637
|
<FilterTable rows={filterRows} language="en_us" />
|
|
624
638
|
```
|
|
625
639
|
|
|
640
|
+
`FilterTable` uses the same `1px solid var(--suu-color-border)` outer border
|
|
641
|
+
and `var(--suu-radius)` corner radius as a bordered `DataTable`. Set
|
|
642
|
+
`bordered={false}` to remove both the border and outer corner radius.
|
|
643
|
+
|
|
626
644
|
`filter.select` uses the shared `Dropdown` component, so select filters keep the
|
|
627
645
|
same menu, keyboard, and visual behavior as standalone dropdowns.
|
|
628
646
|
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
export let sort: SortState | null = null;
|
|
20
20
|
export let showHeader = true;
|
|
21
21
|
export let zebra = true;
|
|
22
|
+
export let hoverable = true;
|
|
22
23
|
export let bordered = true;
|
|
23
24
|
export let verticalSeparators = false;
|
|
24
25
|
export let tableLayout: DataTableLayout = 'auto';
|
|
@@ -228,6 +229,8 @@
|
|
|
228
229
|
class:suu-table--layout-fixed={tableLayout === 'fixed'}
|
|
229
230
|
class:suu-table--sticky-header={stickyHeader}
|
|
230
231
|
class:suu-table--zebra={zebra}
|
|
232
|
+
class:suu-table--plain={!zebra}
|
|
233
|
+
class:suu-table--hoverable={hoverable}
|
|
231
234
|
class:suu-table--vertical-separators={verticalSeparators}
|
|
232
235
|
class="suu-table"
|
|
233
236
|
>
|
|
@@ -282,6 +285,8 @@
|
|
|
282
285
|
class:suu-table--sticky-header={stickyHeader}
|
|
283
286
|
class:suu-table--sticky-header-shadowed={showHeader && stickyHeaderVisible}
|
|
284
287
|
class:suu-table--zebra={zebra}
|
|
288
|
+
class:suu-table--plain={!zebra}
|
|
289
|
+
class:suu-table--hoverable={hoverable}
|
|
285
290
|
class:suu-table--vertical-separators={verticalSeparators}
|
|
286
291
|
class="suu-table"
|
|
287
292
|
>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseDataTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/BaseDataTable.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAE5D,OAAO,KAAK,EAER,eAAe,EACf,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,0BAA0B,EAC1B,SAAS,EACV,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseDataTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/BaseDataTable.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAE5D,OAAO,KAAK,EAER,eAAe,EACf,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,0BAA0B,EAC1B,SAAS,EACV,MAAM,YAAY,CAAC;AAoTtB,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;AAUD,QAAA,MAAM,aAAa;WAfif,OAAO,EAAE;cAAY,eAAe,EAAE;WAAS,SAAS,GAAG,IAAI;;;;;;kBAAgL,eAAe;;sBAAwD,MAAM,GAAG,SAAS;yBAAuB,MAAM,GAAG,SAAS;;eAAiE,UAAU;gBAAc,MAAM,GAAG,SAAS;aAAW,eAAe,GAAG,SAAS;eAAa,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,SAAS;oBAAkB,sBAAsB,GAAG,SAAS;mBAAiB,0BAA0B,GAAG,SAAS;;;;;;;;;;;;;cAevmC,CAAC;AACvF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAC1D,eAAe,aAAa,CAAC"}
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
export let maxPageButtons = 15;
|
|
33
33
|
export let onPaginationChange: PaginationChangeHandler | undefined = undefined;
|
|
34
34
|
export let zebra = true;
|
|
35
|
+
export let hoverable = true;
|
|
35
36
|
export let bordered = true;
|
|
36
37
|
export let verticalSeparators = true;
|
|
37
38
|
export let tableLayout: DataTableLayout = 'auto';
|
|
@@ -75,6 +76,7 @@
|
|
|
75
76
|
{sort}
|
|
76
77
|
{showHeader}
|
|
77
78
|
{zebra}
|
|
79
|
+
{hoverable}
|
|
78
80
|
{bordered}
|
|
79
81
|
{verticalSeparators}
|
|
80
82
|
{tableLayout}
|
|
@@ -31,6 +31,7 @@ declare const DataTable: $$__sveltets_2_IsomorphicComponent<{
|
|
|
31
31
|
maxPageButtons?: number;
|
|
32
32
|
onPaginationChange?: PaginationChangeHandler | undefined;
|
|
33
33
|
zebra?: boolean;
|
|
34
|
+
hoverable?: boolean;
|
|
34
35
|
bordered?: boolean;
|
|
35
36
|
verticalSeparators?: boolean;
|
|
36
37
|
tableLayout?: DataTableLayout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/DataTable.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EACR,eAAe,EACf,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,0BAA0B,EAC1B,uBAAuB,EAEvB,SAAS,EACV,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/DataTable.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EACR,eAAe,EACf,eAAe,EACf,sBAAsB,EACtB,eAAe,EACf,0BAA0B,EAC1B,uBAAuB,EAEvB,SAAS,EACV,MAAM,YAAY,CAAC;AAoEtB,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;AAUD,QAAA,MAAM,SAAS;WAf2tB,OAAO,EAAE;cAAY,eAAe,EAAE;aAAW,eAAe,GAAG,SAAS;eAAa,UAAU;gBAAc,MAAM,GAAG,SAAS;WAAS,SAAS,GAAG,IAAI;mBAAiB,0BAA0B,GAAG,SAAS;;;;;gBAAsI,MAAM,GAAG,SAAS;sBAAoB,MAAM,EAAE;oBAAkB,MAAM,GAAG,SAAS;;yBAA+D,uBAAuB,GAAG,SAAS;;;;;kBAAgJ,eAAe;;sBAAwD,MAAM,GAAG,SAAS;yBAAuB,MAAM,GAAG,SAAS;;eAAiE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,SAAS;oBAAkB,sBAAsB,GAAG,SAAS;;;;;;;;;;;;;;;cAe3mD,CAAC;AACnF,KAAK,SAAS,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC;AAClD,eAAe,SAAS,CAAC"}
|
|
@@ -7,10 +7,11 @@
|
|
|
7
7
|
|
|
8
8
|
export let rows: FilterTableRow[] = [];
|
|
9
9
|
export let language: UiLanguage = 'en_us';
|
|
10
|
+
export let bordered = true;
|
|
10
11
|
</script>
|
|
11
12
|
|
|
12
13
|
<div class="suu-filter-table">
|
|
13
|
-
<table class="suu-filter-table__filters">
|
|
14
|
+
<table class:suu-filter-table__filters--borderless={!bordered} class="suu-filter-table__filters">
|
|
14
15
|
<tbody>
|
|
15
16
|
{#each rows as row (row.key)}
|
|
16
17
|
<tr>
|
|
@@ -16,6 +16,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
16
16
|
declare const FilterTable: $$__sveltets_2_IsomorphicComponent<{
|
|
17
17
|
rows?: FilterTableRow[];
|
|
18
18
|
language?: UiLanguage;
|
|
19
|
+
bordered?: boolean;
|
|
19
20
|
}, {
|
|
20
21
|
[evt: string]: CustomEvent<any>;
|
|
21
22
|
}, {}, {}, string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/FilterTable.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"FilterTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/FilterTable.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AA+BjD,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,WAAW;WAViE,cAAc,EAAE;eAAa,UAAU;;;;kBAUzB,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
getId = (item: Item) => item.id,
|
|
9
9
|
disabled = false,
|
|
10
10
|
allowRemoveLast = false,
|
|
11
|
+
verticalSeparators = false,
|
|
11
12
|
tableClass = '',
|
|
12
13
|
getRowClass,
|
|
13
14
|
getDragLabel = (item: Item) => `Drag ${getId(item)}`,
|
|
@@ -22,6 +23,7 @@
|
|
|
22
23
|
getId?: (item: Item) => string;
|
|
23
24
|
disabled?: boolean;
|
|
24
25
|
allowRemoveLast?: boolean;
|
|
26
|
+
verticalSeparators?: boolean;
|
|
25
27
|
tableClass?: string;
|
|
26
28
|
getRowClass?: (item: Item, index: number) => string | undefined | null;
|
|
27
29
|
getDragLabel?: (item: Item, index: number) => string;
|
|
@@ -77,7 +79,7 @@
|
|
|
77
79
|
</script>
|
|
78
80
|
|
|
79
81
|
<div class="suu-sortable-table-wrap">
|
|
80
|
-
<table class={`suu-sortable-table ${tableClass}`.trim()}>
|
|
82
|
+
<table class:suu-sortable-table--vertical-separators={verticalSeparators} class={`suu-sortable-table ${tableClass}`.trim()}>
|
|
81
83
|
<thead><tr><th class="suu-sortable-table__drag-column" aria-hidden="true"></th>{@render header()}<th class="suu-sortable-table__remove-column" aria-hidden="true"></th></tr></thead>
|
|
82
84
|
<tbody>
|
|
83
85
|
{#each items as item, index (getId(item))}
|
|
@@ -104,7 +106,7 @@
|
|
|
104
106
|
</div>
|
|
105
107
|
|
|
106
108
|
<style>
|
|
107
|
-
.suu-sortable-table-wrap { overflow: auto; border: 1px solid var(--suu-color-border, #d1d5db); border-radius: var(--suu-radius, 8px); }
|
|
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, 8px); }
|
|
108
110
|
.suu-sortable-table { width: 100%; border-collapse: collapse; }
|
|
109
111
|
.suu-sortable-table__drag-column { width: 1%; }
|
|
110
112
|
.suu-sortable-table__remove-column { width: 38px; }
|
|
@@ -115,9 +117,17 @@
|
|
|
115
117
|
.suu-sortable-table__remove svg { width: 16px; height: 16px; }
|
|
116
118
|
.suu-sortable-table__drag-handle:active { cursor: grabbing; }
|
|
117
119
|
.suu-sortable-table__drag-handle:disabled, .suu-sortable-table__remove:disabled { cursor: default; opacity: .35; }
|
|
118
|
-
.suu-sortable-table__row { position: relative; border-bottom: 1px solid var(--suu-color-border, #d1d5db); }
|
|
120
|
+
.suu-sortable-table__row { position: relative; border-bottom: 1px solid var(--suu-sortable-table-border, var(--suu-color-border, #d1d5db)); }
|
|
119
121
|
.suu-sortable-table__row:last-child { border-bottom: 0; }
|
|
120
122
|
.suu-sortable-table :global(td) { border-bottom: 0; }
|
|
123
|
+
.suu-sortable-table--vertical-separators :global(th:not(:first-child)),
|
|
124
|
+
.suu-sortable-table--vertical-separators :global(td:not(:first-child)) { border-left: 1px solid var(--suu-sortable-table-separator, var(--suu-sortable-table-border, var(--suu-color-border, #d1d5db))); }
|
|
125
|
+
@media (prefers-color-scheme: dark) {
|
|
126
|
+
.suu-sortable-table-wrap { border-color: var(--suu-sortable-table-border-dark, var(--suu-sortable-table-border, #46516a)); }
|
|
127
|
+
.suu-sortable-table__row { border-bottom-color: var(--suu-sortable-table-border-dark, var(--suu-sortable-table-border, #46516a)); }
|
|
128
|
+
.suu-sortable-table--vertical-separators :global(th:not(:first-child)),
|
|
129
|
+
.suu-sortable-table--vertical-separators :global(td:not(:first-child)) { border-left-color: var(--suu-sortable-table-separator-dark, var(--suu-sortable-table-border-dark, var(--suu-sortable-table-separator, #46516a))); }
|
|
130
|
+
}
|
|
121
131
|
.suu-sortable-table__row--dragging { opacity: .55; }
|
|
122
132
|
.suu-sortable-table__row--drop-before :global(td) { box-shadow: inset 0 3px 0 var(--suu-color-accent, #2563eb); }
|
|
123
133
|
.suu-sortable-table__row--drop-after :global(td) { box-shadow: inset 0 -3px 0 var(--suu-color-accent, #2563eb); }
|
|
@@ -6,6 +6,7 @@ declare function $$render<Item extends SortableTableItem>(): {
|
|
|
6
6
|
getId?: (item: Item) => string;
|
|
7
7
|
disabled?: boolean;
|
|
8
8
|
allowRemoveLast?: boolean;
|
|
9
|
+
verticalSeparators?: boolean;
|
|
9
10
|
tableClass?: string;
|
|
10
11
|
getRowClass?: (item: Item, index: number) => string | undefined | null;
|
|
11
12
|
getDragLabel?: (item: Item, index: number) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortableTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/sortable-table/SortableTable.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAChF,iBAAS,QAAQ,CAAC,IAAI,SAAS,iBAAiB;;gBAKpC,IAAI,EAAE;gBACN,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM;mBACnB,OAAO;0BACA,OAAO;
|
|
1
|
+
{"version":3,"file":"SortableTable.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/sortable-table/SortableTable.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAChF,iBAAS,QAAQ,CAAC,IAAI,SAAS,iBAAiB;;gBAKpC,IAAI,EAAE;gBACN,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM;mBACnB,OAAO;0BACA,OAAO;6BACJ,OAAO;qBACf,MAAM;sBACL,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,GAAG,IAAI;uBACvD,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM;yBACnC,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM;oBAC1C,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,0BAA0B,KAAK,IAAI;mBAC5D,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI;wBACf,OAAO,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;gBAC/B,OAAO;kBACL,OAAO,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;;;;;;EA6FoF;AACzH,cAAM,iBAAiB,CAAC,IAAI,SAAS,iBAAiB;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;IACnD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IACrD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC;IACnD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,IAAI,SAAS,iBAAiB,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3a,CAAC,IAAI,SAAS,iBAAiB,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC9J,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,aAAa,EAAE,qBAAmC,CAAC;AACvC,KAAK,aAAa,CAAC,IAAI,SAAS,iBAAiB,IAAI,YAAY,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;AAChG,eAAe,aAAa,CAAC"}
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
getId = (item: Item) => item.id,
|
|
13
13
|
disabled = false,
|
|
14
14
|
allowRemoveLast = false,
|
|
15
|
+
verticalSeparators = false,
|
|
15
16
|
tableClass = '',
|
|
16
17
|
showCurrentControl = true,
|
|
17
18
|
currentId = null,
|
|
@@ -30,6 +31,7 @@
|
|
|
30
31
|
getId?: (item: Item) => string;
|
|
31
32
|
disabled?: boolean;
|
|
32
33
|
allowRemoveLast?: boolean;
|
|
34
|
+
verticalSeparators?: boolean;
|
|
33
35
|
tableClass?: string;
|
|
34
36
|
showCurrentControl?: boolean;
|
|
35
37
|
currentId?: string | null;
|
|
@@ -76,6 +78,7 @@
|
|
|
76
78
|
{getId}
|
|
77
79
|
{disabled}
|
|
78
80
|
{allowRemoveLast}
|
|
81
|
+
{verticalSeparators}
|
|
79
82
|
tableClass={`suu-sortable-table-enhanced ${tableClass}`.trim()}
|
|
80
83
|
getRowClass={rowClass}
|
|
81
84
|
{getDragLabel}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortableTableEnhanced.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/sortable-table/SortableTableEnhanced.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EACR,iBAAiB,EACjB,0BAA0B,EAC1B,2BAA2B,EAC5B,MAAM,YAAY,CAAC;AACtB,iBAAS,QAAQ,CAAC,IAAI,SAAS,iBAAiB;;gBAOpC,IAAI,EAAE;gBACN,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM;mBACnB,OAAO;0BACA,OAAO;
|
|
1
|
+
{"version":3,"file":"SortableTableEnhanced.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/sortable-table/SortableTableEnhanced.svelte.ts"],"names":[],"mappings":"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"}
|
package/dist/style.css
CHANGED
|
@@ -648,14 +648,20 @@
|
|
|
648
648
|
|
|
649
649
|
.suu-filter-table__filters {
|
|
650
650
|
width: 100%;
|
|
651
|
+
border: 1px solid var(--suu-color-border);
|
|
651
652
|
border-collapse: separate;
|
|
652
653
|
border-spacing: 0;
|
|
653
|
-
border-radius:
|
|
654
|
+
border-radius: var(--suu-radius);
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
.suu-filter-table__filters--borderless {
|
|
658
|
+
border: 0;
|
|
659
|
+
border-radius: 0;
|
|
654
660
|
}
|
|
655
661
|
|
|
656
662
|
.suu-filter-table__filters th,
|
|
657
663
|
.suu-filter-table__filters td {
|
|
658
|
-
padding:
|
|
664
|
+
padding: 10px 12px;
|
|
659
665
|
background: var(--suu-color-bg);
|
|
660
666
|
text-align: left;
|
|
661
667
|
vertical-align: middle;
|
|
@@ -684,22 +690,6 @@
|
|
|
684
690
|
background: var(--suu-color-border);
|
|
685
691
|
}
|
|
686
692
|
|
|
687
|
-
.suu-filter-table__filters tr:first-child th {
|
|
688
|
-
border-top-left-radius: calc(var(--suu-radius) + 3px);
|
|
689
|
-
}
|
|
690
|
-
|
|
691
|
-
.suu-filter-table__filters tr:first-child td {
|
|
692
|
-
border-top-right-radius: calc(var(--suu-radius) + 3px);
|
|
693
|
-
}
|
|
694
|
-
|
|
695
|
-
.suu-filter-table__filters tr:last-child th {
|
|
696
|
-
border-bottom-left-radius: calc(var(--suu-radius) + 3px);
|
|
697
|
-
}
|
|
698
|
-
|
|
699
|
-
.suu-filter-table__filters tr:last-child td {
|
|
700
|
-
border-bottom-right-radius: calc(var(--suu-radius) + 3px);
|
|
701
|
-
}
|
|
702
|
-
|
|
703
693
|
.suu-filter-table__filters td {
|
|
704
694
|
min-width: 0;
|
|
705
695
|
}
|
|
@@ -982,11 +972,15 @@
|
|
|
982
972
|
background: color-mix(in srgb, var(--suu-color-surface) 70%, transparent);
|
|
983
973
|
}
|
|
984
974
|
|
|
975
|
+
.suu-table--plain tbody {
|
|
976
|
+
background: var(--suu-color-bg);
|
|
977
|
+
}
|
|
978
|
+
|
|
985
979
|
.suu-table tbody tr:last-child td {
|
|
986
980
|
border-bottom: 0;
|
|
987
981
|
}
|
|
988
982
|
|
|
989
|
-
.suu-table tbody tr:hover {
|
|
983
|
+
.suu-table--hoverable tbody tr:hover {
|
|
990
984
|
background: color-mix(in srgb, var(--suu-color-surface) 88%, transparent);
|
|
991
985
|
}
|
|
992
986
|
|
package/package.json
CHANGED