@ibobbyts/svelte-ui-utils 0.3.8 → 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 +9 -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/style.css +13 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -557,6 +557,11 @@ tables that should render body rows without a header section. Sortable headers
|
|
|
557
557
|
preserve the current window scroll position by default and wait for an async
|
|
558
558
|
`onSortChange` before restoring scroll position.
|
|
559
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
|
+
|
|
560
565
|
Column alignment is configured separately for headers and body cells.
|
|
561
566
|
Horizontal alignment accepts `left`, `center`, or `right`; vertical alignment
|
|
562
567
|
accepts `top`, `middle`, or `bottom`. Header alignment defaults to
|
|
@@ -632,6 +637,10 @@ for the left column and a controlled filter created with the `filter` helper:
|
|
|
632
637
|
<FilterTable rows={filterRows} language="en_us" />
|
|
633
638
|
```
|
|
634
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
|
+
|
|
635
644
|
`filter.select` uses the shared `Dropdown` component, so select filters keep the
|
|
636
645
|
same menu, keyboard, and visual behavior as standalone dropdowns.
|
|
637
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"}
|
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