@ibobbyts/svelte-ui-utils 0.3.7 → 0.3.8
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/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/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}
|
|
@@ -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/package.json
CHANGED