@jsekulowicz/ds-components 0.16.1 → 0.16.2
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/custom-elements.json +22 -6
- package/dist/atoms/table/table-pagination.styles.d.ts.map +1 -1
- package/dist/atoms/table/table-pagination.styles.js +10 -2
- package/dist/atoms/table/table-pagination.styles.js.map +1 -1
- package/dist/atoms/table/table-rendering.d.ts +4 -2
- package/dist/atoms/table/table-rendering.d.ts.map +1 -1
- package/dist/atoms/table/table-rendering.js +33 -9
- package/dist/atoms/table/table-rendering.js.map +1 -1
- package/dist/atoms/table/table-responsive.styles.d.ts.map +1 -1
- package/dist/atoms/table/table-responsive.styles.js +22 -10
- package/dist/atoms/table/table-responsive.styles.js.map +1 -1
- package/dist/atoms/table/table-sort-button.d.ts.map +1 -1
- package/dist/atoms/table/table-sort-button.js +0 -1
- package/dist/atoms/table/table-sort-button.js.map +1 -1
- package/dist/atoms/table/table-sort-button.styles.d.ts.map +1 -1
- package/dist/atoms/table/table-sort-button.styles.js +5 -3
- package/dist/atoms/table/table-sort-button.styles.js.map +1 -1
- package/dist/atoms/table/table.d.ts +2 -0
- package/dist/atoms/table/table.d.ts.map +1 -1
- package/dist/atoms/table/table.js +27 -14
- package/dist/atoms/table/table.js.map +1 -1
- package/dist/atoms/table/table.styles.d.ts.map +1 -1
- package/dist/atoms/table/table.styles.js +61 -1
- package/dist/atoms/table/table.styles.js.map +1 -1
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -7505,7 +7505,7 @@
|
|
|
7505
7505
|
{
|
|
7506
7506
|
"kind": "variable",
|
|
7507
7507
|
"name": "tablePaginationStyles",
|
|
7508
|
-
"default": "css` :host { display: flex; align-items: center; justify-content: space-between; column-gap: var(--ds-space-4); row-gap: var(--ds-space-3); flex-wrap: wrap; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } nav { display: flex; align-items: center; gap: var(--ds-space-2); } .list { display: flex; align-items: center; gap: var(--ds-space-2); list-style: none; padding: 0; margin: 0; } button { min-width: 2rem; height: 2rem; padding: 0 var(--ds-space-2); background: transparent; color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); } button:hover:not(:disabled) { background: var(--ds-color-bg-muted); } button:focus-visible { outline:
|
|
7508
|
+
"default": "css` :host { display: flex; align-items: center; justify-content: space-between; column-gap: var(--ds-space-4); row-gap: var(--ds-space-3); flex-wrap: wrap; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } nav { display: flex; align-items: center; gap: var(--ds-space-2); } .list { display: flex; align-items: center; gap: var(--ds-space-2); list-style: none; padding: 0; margin: 0; } button { position: relative; min-width: 2rem; height: 2rem; padding: 0 var(--ds-space-2); background: transparent; color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); } button:hover:not(:disabled) { background: var(--ds-color-bg-muted); } button:focus-visible { outline: none; border-color: var(--ds-color-focus); box-shadow: var(--ds-shadow-focus); z-index: 1; } button:disabled { color: var(--ds-color-fg-subtle); cursor: not-allowed; opacity: 0.6; } button[aria-current=\"page\"] { background: var(--ds-color-accent); color: var(--ds-color-accent-fg); border-color: var(--ds-color-accent); } /* Without this override the generic button:hover:not(:disabled) rule wins on specificity (it carries an extra :not pseudo-class) and the current-page button briefly flashes back to the muted surface colour on hover. Keep the active button on-brand by stepping to the accent-hover token instead. */ button[aria-current=\"page\"]:hover:not(:disabled) { background: var(--ds-color-accent-hover); border-color: var(--ds-color-accent-hover); } .ellipsis { display: inline-flex; min-width: 2rem; justify-content: center; color: var(--ds-color-fg-muted); } .size { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-color-fg-muted); } select { padding: var(--ds-space-1) var(--ds-space-2); background: var(--ds-color-bg); color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; } select:focus-visible { outline: none; border-color: var(--ds-color-focus); box-shadow: var(--ds-shadow-focus); } .summary { color: var(--ds-color-fg-muted); } svg { width: 1em; height: 1em; } /* Compact mode is driven by the host's [compact] attribute, which ds-table-pagination toggles automatically via ResizeObserver when the host is narrower than ~480px. We hide the Previous / Next text label here so the buttons collapse to icons; the page-number range shrinks via the JS path (maxVisiblePages → 3, siblingCount → 0). The slot itself stays in the DOM so consumer overrides via ::part(prev-next-label) still work if labels are wanted even when compact. */ :host([compact]) .label { display: none; } `"
|
|
7509
7509
|
}
|
|
7510
7510
|
],
|
|
7511
7511
|
"exports": [
|
|
@@ -8016,7 +8016,7 @@
|
|
|
8016
8016
|
{
|
|
8017
8017
|
"kind": "variable",
|
|
8018
8018
|
"name": "tableResponsiveStyles",
|
|
8019
|
-
"default": "css` @container (max-width: ${mobileBreakpoint}) { :host(:not([responsive=\"scroll\"])) .scroll { overflow-x: visible; border: 0; border-radius: 0; background: transparent; } :host(:not([responsive=\"scroll\"])) table, :host(:not([responsive=\"scroll\"])) tbody, :host(:not([responsive=\"scroll\"])) tr { display: block; } :host(:not([responsive=\"scroll\"])) table { border-collapse: separate; border-spacing: 0; } :host(:not([responsive=\"scroll\"])) .skeleton-table { min-width: 0; } :host(:not([responsive=\"scroll\"])) caption { display: block; padding-inline: 0; } :host(:not([responsive=\"scroll\"])) colgroup
|
|
8019
|
+
"default": "css` @container (max-width: ${mobileBreakpoint}) { :host(:not([responsive=\"scroll\"])) .scroll { overflow-x: visible; border: 0; border-radius: 0; background: transparent; } :host(:not([responsive=\"scroll\"])) table, :host(:not([responsive=\"scroll\"])) tbody, :host(:not([responsive=\"scroll\"])) tr { display: block; } :host(:not([responsive=\"scroll\"])) table { border-collapse: separate; border-spacing: 0; } :host(:not([responsive=\"scroll\"])) .skeleton-table { min-width: 0; } :host(:not([responsive=\"scroll\"])) caption { display: block; padding-inline: 0; } :host(:not([responsive=\"scroll\"])) colgroup { display: none; } :host(:not([responsive=\"scroll\"])) thead { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); border: 0; white-space: nowrap; } :host(:not([responsive=\"scroll\"])) tbody { display: grid; gap: var(--ds-space-3); } :host(:not([responsive=\"scroll\"])) tbody tr { overflow: hidden; border: 1px solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-md); background: var(--ds-color-bg); } :host(:not([responsive=\"scroll\"])) tbody tr.clickable:has(.row-action:focus-visible) { box-shadow: var(--ds-shadow-focus); } :host(:not([responsive=\"scroll\"])) .skeleton-table tbody tr { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-3); } :host(:not([responsive=\"scroll\"])) tbody td { display: grid; grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr); gap: var(--ds-space-3); align-items: start; min-width: 0; overflow-wrap: anywhere; text-align: left; } :host(:not([responsive=\"scroll\"])) .cell-label { display: block; color: var(--ds-color-fg-muted); font-weight: var(--ds-font-weight-medium); min-width: 0; overflow-wrap: anywhere; } :host(:not([responsive=\"scroll\"])) tbody td[data-label=\"\"], :host(:not([responsive=\"scroll\"])) tbody td.empty { display: block; } :host(:not([responsive=\"scroll\"])) tbody td[data-label=\"\"] .cell-label, :host(:not([responsive=\"scroll\"])) tbody td.empty .cell-label, :host(:not([responsive=\"scroll\"])) .skeleton-table .cell-label { display: none; } :host(:not([responsive=\"scroll\"])) .skeleton-table tbody td { padding: 0; border-bottom: 0; background: transparent; } :host(:not([responsive=\"scroll\"])) .skeleton-label { display: block; } } `"
|
|
8020
8020
|
}
|
|
8021
8021
|
],
|
|
8022
8022
|
"exports": [
|
|
@@ -8097,7 +8097,7 @@
|
|
|
8097
8097
|
{
|
|
8098
8098
|
"kind": "variable",
|
|
8099
8099
|
"name": "tableSortButtonStyles",
|
|
8100
|
-
"default": "css` :host { display: inline-flex; } button { display: inline-flex; align-items: center; gap: var(--ds-space-1); background: transparent; color: inherit; border: 0; padding:
|
|
8100
|
+
"default": "css` :host { display: inline-flex; } button { position: relative; display: inline-flex; align-items: center; gap: var(--ds-space-1); background: transparent; color: inherit; border: 0; padding: var(--ds-space-1); font: inherit; cursor: pointer; border-radius: var(--ds-radius-sm); } button:focus-visible { outline: none; background: var(--ds-color-bg); box-shadow: var(--ds-shadow-focus); } button:hover { color: var(--ds-color-accent); } .icon { display: inline-flex; width: 1em; height: 1em; color: var(--ds-color-fg-muted); } :host([direction]) .icon { color: var(--ds-color-accent); } svg { width: 100%; height: 100%; } `"
|
|
8101
8101
|
}
|
|
8102
8102
|
],
|
|
8103
8103
|
"exports": [
|
|
@@ -8230,7 +8230,7 @@
|
|
|
8230
8230
|
{
|
|
8231
8231
|
"kind": "variable",
|
|
8232
8232
|
"name": "tableStyles",
|
|
8233
|
-
"default": "css` :host { display: block; container-type: inline-size; width: 100%; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); /* Header row height (used as the top scroll-fade offset in scroll-body mode). Single-line by construction; override to taste. */ --ds-table-header-height: calc(var(--ds-space-2) * 2 + var(--ds-font-size-sm) * 1.5 + 1px); } .toolbar { padding: var(--ds-space-3) 0; } .scroll { position: relative; width: 100%; overflow-x: auto; border: 1px solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-md); background: var(--ds-color-bg); } table { width: 100%; border-collapse: collapse; text-align: left; } caption { caption-side: top; padding: var(--ds-space-3); color: var(--ds-color-fg-muted); text-align: left; } caption:empty { display: none; padding: 0; } thead th { background: var(--ds-color-bg-subtle); color: var(--ds-color-fg); font-weight: var(--ds-font-weight-medium); padding: var(--ds-space-2) var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border); /* Headers never wrap, so the header row keeps a constant height (a long header widens its column / scrolls rather than growing taller). */ white-space: nowrap; } tbody td { padding: var(--ds-space-2) var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border-subtle); vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr:nth-child(even) td { background: var(--ds-color-bg-subtle); } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } tbody tr.clickable { cursor: pointer; outline: none; } tbody tr.clickable:hover td { background: var(--ds-color-bg-muted); } tbody tr.clickable:focus-visible { box-shadow: inset 0 0 0 2px var(--ds-color-focus); } .skeleton-table { min-width: 32rem; } .skeleton-label { display: none; } .loading { position: absolute; inset: 0; display: grid; place-items: center; min-height: 100%; background: color-mix(in srgb, var(--ds-color-bg) 78%, transparent); color: var(--ds-color-fg); pointer-events: auto; } .loading span { padding: var(--ds-space-2) var(--ds-space-3); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.12)); font-weight: var(--ds-font-weight-medium); } .empty { padding: var(--ds-space-6); text-align: center; color: var(--ds-color-fg-muted); } .footer { padding: var(--ds-space-3) 0; } `"
|
|
8233
|
+
"default": "css` :host { display: block; container-type: inline-size; width: 100%; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); /* Header row height (used as the top scroll-fade offset in scroll-body mode). Single-line by construction; override to taste. */ --ds-table-header-height: calc(var(--ds-space-2) * 2 + var(--ds-font-size-sm) * 1.5 + 1px); } .toolbar { padding: var(--ds-space-3) 0; } .scroll { position: relative; width: 100%; overflow-x: auto; border: 1px solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-md); background: var(--ds-color-bg); } table { width: 100%; border-collapse: collapse; text-align: left; } caption { caption-side: top; padding: var(--ds-space-3); color: var(--ds-color-fg-muted); text-align: left; } caption:empty { display: none; padding: 0; } thead th { background: var(--ds-color-bg-subtle); color: var(--ds-color-fg); font-weight: var(--ds-font-weight-medium); padding: var(--ds-space-2) var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border); /* Headers never wrap, so the header row keeps a constant height (a long header widens its column / scrolls rather than growing taller). */ white-space: nowrap; } tbody td { padding: var(--ds-space-2) var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border-subtle); vertical-align: middle; } .cell-label { display: none; } .cell-content { display: block; min-width: 0; } tbody tr:last-child td { border-bottom: 0; } tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--ds-radius-md) - 1px); } tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--ds-radius-md) - 1px); } tbody tr:nth-child(even) td { background: var(--ds-color-bg-subtle); } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } tbody tr.clickable { position: relative; cursor: pointer; outline: none; } tbody tr.clickable:hover td { background: var(--ds-color-bg-muted); } tbody tr.clickable:has(.row-action:focus-visible) td { background: var(--ds-color-bg-muted); box-shadow: inset 0 2px 0 var(--ds-color-focus), inset 0 -2px 0 var(--ds-color-focus); } tbody tr.clickable:has(.row-action:focus-visible) td:first-child { box-shadow: inset 2px 0 0 var(--ds-color-focus), inset 0 2px 0 var(--ds-color-focus), inset 0 -2px 0 var(--ds-color-focus); } tbody tr.clickable:has(.row-action:focus-visible) td:last-child { box-shadow: inset -2px 0 0 var(--ds-color-focus), inset 0 2px 0 var(--ds-color-focus), inset 0 -2px 0 var(--ds-color-focus); } tbody tr.clickable:has(.row-action:focus-visible) td:first-child:last-child { box-shadow: inset 0 0 0 2px var(--ds-color-focus); } .row-action { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); border: 0; white-space: nowrap; } .skeleton-table { min-width: 32rem; } .skeleton-label { display: none; } .loading { position: absolute; inset: 0; display: grid; place-items: center; min-height: 100%; background: color-mix(in srgb, var(--ds-color-bg) 78%, transparent); color: var(--ds-color-fg); pointer-events: auto; } .loading span { padding: var(--ds-space-2) var(--ds-space-3); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.12)); font-weight: var(--ds-font-weight-medium); } .loading-status { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); border: 0; white-space: nowrap; } .empty { padding: var(--ds-space-6); text-align: center; color: var(--ds-color-fg-muted); } .footer { padding: var(--ds-space-3) 0; } `"
|
|
8234
8234
|
}
|
|
8235
8235
|
],
|
|
8236
8236
|
"exports": [
|
|
@@ -8279,6 +8279,10 @@
|
|
|
8279
8279
|
"description": "Each body `<tr>` when `clickable-rows` is set.",
|
|
8280
8280
|
"name": "row-clickable"
|
|
8281
8281
|
},
|
|
8282
|
+
{
|
|
8283
|
+
"description": "The native row action button rendered in the first cell when `clickable-rows` is set.",
|
|
8284
|
+
"name": "row-action"
|
|
8285
|
+
},
|
|
8282
8286
|
{
|
|
8283
8287
|
"description": "Each body `<td>`.",
|
|
8284
8288
|
"name": "cell"
|
|
@@ -8363,6 +8367,13 @@
|
|
|
8363
8367
|
},
|
|
8364
8368
|
"default": "null"
|
|
8365
8369
|
},
|
|
8370
|
+
{
|
|
8371
|
+
"kind": "field",
|
|
8372
|
+
"name": "rowActionLabel",
|
|
8373
|
+
"type": {
|
|
8374
|
+
"text": "(row: T, index: number) => string | undefined"
|
|
8375
|
+
}
|
|
8376
|
+
},
|
|
8366
8377
|
{
|
|
8367
8378
|
"kind": "field",
|
|
8368
8379
|
"name": "clickableRows",
|
|
@@ -8483,7 +8494,7 @@
|
|
|
8483
8494
|
},
|
|
8484
8495
|
{
|
|
8485
8496
|
"kind": "field",
|
|
8486
|
-
"name": "#
|
|
8497
|
+
"name": "#onRowAction",
|
|
8487
8498
|
"privacy": "private"
|
|
8488
8499
|
},
|
|
8489
8500
|
{
|
|
@@ -8510,7 +8521,7 @@
|
|
|
8510
8521
|
"privacy": "private",
|
|
8511
8522
|
"return": {
|
|
8512
8523
|
"type": {
|
|
8513
|
-
"text": "'ascending' | 'descending' |
|
|
8524
|
+
"text": "'ascending' | 'descending' | undefined"
|
|
8514
8525
|
}
|
|
8515
8526
|
},
|
|
8516
8527
|
"parameters": [
|
|
@@ -8522,6 +8533,11 @@
|
|
|
8522
8533
|
}
|
|
8523
8534
|
]
|
|
8524
8535
|
},
|
|
8536
|
+
{
|
|
8537
|
+
"kind": "field",
|
|
8538
|
+
"name": "#rowActionLabel",
|
|
8539
|
+
"privacy": "private"
|
|
8540
|
+
},
|
|
8525
8541
|
{
|
|
8526
8542
|
"kind": "method",
|
|
8527
8543
|
"name": "#renderLoading",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-pagination.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"table-pagination.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,yBAyHjC,CAAC"}
|
|
@@ -28,6 +28,7 @@ export const tablePaginationStyles = css `
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
button {
|
|
31
|
+
position: relative;
|
|
31
32
|
min-width: 2rem;
|
|
32
33
|
height: 2rem;
|
|
33
34
|
padding: 0 var(--ds-space-2);
|
|
@@ -46,8 +47,10 @@ export const tablePaginationStyles = css `
|
|
|
46
47
|
background: var(--ds-color-bg-muted);
|
|
47
48
|
}
|
|
48
49
|
button:focus-visible {
|
|
49
|
-
outline:
|
|
50
|
-
|
|
50
|
+
outline: none;
|
|
51
|
+
border-color: var(--ds-color-focus);
|
|
52
|
+
box-shadow: var(--ds-shadow-focus);
|
|
53
|
+
z-index: 1;
|
|
51
54
|
}
|
|
52
55
|
button:disabled {
|
|
53
56
|
color: var(--ds-color-fg-subtle);
|
|
@@ -91,6 +94,11 @@ export const tablePaginationStyles = css `
|
|
|
91
94
|
border-radius: var(--ds-radius-sm);
|
|
92
95
|
font: inherit;
|
|
93
96
|
}
|
|
97
|
+
select:focus-visible {
|
|
98
|
+
outline: none;
|
|
99
|
+
border-color: var(--ds-color-focus);
|
|
100
|
+
box-shadow: var(--ds-shadow-focus);
|
|
101
|
+
}
|
|
94
102
|
|
|
95
103
|
.summary {
|
|
96
104
|
color: var(--ds-color-fg-muted);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-pagination.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"table-pagination.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHvC,CAAC"}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { type TemplateResult } from 'lit';
|
|
2
2
|
import type { TableColumn, TableRow } from './types.js';
|
|
3
|
-
type AriaSort = 'ascending' | 'descending' |
|
|
3
|
+
type AriaSort = 'ascending' | 'descending' | undefined;
|
|
4
4
|
type TableBodyOptions<T extends TableRow> = {
|
|
5
5
|
rows: readonly T[];
|
|
6
6
|
columns: readonly TableColumn<T>[];
|
|
7
7
|
clickableRows: boolean;
|
|
8
|
+
rowActionsDisabled: boolean;
|
|
9
|
+
rowActionLabel: (row: T, index: number) => string;
|
|
8
10
|
onRowClick: (event: MouseEvent, row: T, index: number) => void;
|
|
9
|
-
|
|
11
|
+
onRowAction: (row: T, index: number) => void;
|
|
10
12
|
};
|
|
11
13
|
export declare function renderTableBody<T extends TableRow>(options: TableBodyOptions<T>): TemplateResult;
|
|
12
14
|
export declare function renderTableHeader<T extends TableRow>(columns: readonly TableColumn<T>[], ariaSort: (column: TableColumn<T>) => AriaSort): TemplateResult[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-rendering.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-rendering.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"table-rendering.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-rendering.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAExD,KAAK,QAAQ,GAAG,WAAW,GAAG,YAAY,GAAG,SAAS,CAAC;AAEvD,KAAK,gBAAgB,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC1C,IAAI,EAAE,SAAS,CAAC,EAAE,CAAC;IACnB,OAAO,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClD,UAAU,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/D,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AA0FF,wBAAgB,eAAe,CAAC,CAAC,SAAS,QAAQ,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,cAAc,CAWhG;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,QAAQ,EAClD,OAAO,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,EAClC,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,QAAQ,GAC7C,cAAc,EAAE,CAWlB"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
1
|
+
import { html, nothing } from 'lit';
|
|
2
2
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
3
3
|
function renderCell(column, row, index) {
|
|
4
4
|
if (column.render) {
|
|
@@ -7,10 +7,37 @@ function renderCell(column, row, index) {
|
|
|
7
7
|
const value = row[column.field];
|
|
8
8
|
return value == null ? '' : String(value);
|
|
9
9
|
}
|
|
10
|
-
function
|
|
11
|
-
|
|
10
|
+
function renderCellLabel(column) {
|
|
11
|
+
if (!column.label) {
|
|
12
|
+
return nothing;
|
|
13
|
+
}
|
|
14
|
+
return html `<span class="cell-label" aria-hidden="true">${column.label}</span>`;
|
|
15
|
+
}
|
|
16
|
+
function renderRowAction(options, row, index) {
|
|
17
|
+
return html `
|
|
18
|
+
<button
|
|
19
|
+
class="row-action"
|
|
20
|
+
part="row-action"
|
|
21
|
+
type="button"
|
|
22
|
+
aria-label=${options.rowActionLabel(row, index)}
|
|
23
|
+
?disabled=${options.rowActionsDisabled}
|
|
24
|
+
@click=${() => options.onRowAction(row, index)}
|
|
25
|
+
></button>
|
|
26
|
+
`;
|
|
27
|
+
}
|
|
28
|
+
function renderCellContent(options, column, row, rowIndex, columnIndex) {
|
|
29
|
+
return html `
|
|
30
|
+
<span class="cell-content">
|
|
31
|
+
${options.clickableRows && columnIndex === 0 ? renderRowAction(options, row, rowIndex) : nothing}
|
|
32
|
+
${renderCell(column, row, rowIndex)}
|
|
33
|
+
</span>
|
|
34
|
+
`;
|
|
35
|
+
}
|
|
36
|
+
function renderCells(options, columns, row, index) {
|
|
37
|
+
return columns.map((column, columnIndex) => html `
|
|
12
38
|
<td part="cell" class=${`align-${column.align ?? 'left'}`} data-label=${column.label}>
|
|
13
|
-
${
|
|
39
|
+
${renderCellLabel(column)}
|
|
40
|
+
${renderCellContent(options, column, row, index, columnIndex)}
|
|
14
41
|
</td>
|
|
15
42
|
`);
|
|
16
43
|
}
|
|
@@ -19,12 +46,9 @@ function renderClickableRow(options, row, index) {
|
|
|
19
46
|
<tr
|
|
20
47
|
part="row row-clickable"
|
|
21
48
|
class="clickable"
|
|
22
|
-
role="button"
|
|
23
|
-
tabindex="0"
|
|
24
49
|
@click=${(e) => options.onRowClick(e, row, index)}
|
|
25
|
-
@keydown=${(e) => options.onRowKeydown(e, row, index)}
|
|
26
50
|
>
|
|
27
|
-
${renderCells(options.columns, row, index)}
|
|
51
|
+
${renderCells(options, options.columns, row, index)}
|
|
28
52
|
</tr>
|
|
29
53
|
`;
|
|
30
54
|
}
|
|
@@ -34,7 +58,7 @@ function renderRow(options, row, index) {
|
|
|
34
58
|
}
|
|
35
59
|
return html `
|
|
36
60
|
<tr part="row">
|
|
37
|
-
${renderCells(options.columns, row, index)}
|
|
61
|
+
${renderCells(options, options.columns, row, index)}
|
|
38
62
|
</tr>
|
|
39
63
|
`;
|
|
40
64
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-rendering.js","sourceRoot":"","sources":["../../../src/atoms/table/table-rendering.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"table-rendering.js","sourceRoot":"","sources":["../../../src/atoms/table/table-rendering.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-responsive.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-responsive.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"table-responsive.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-responsive.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,qBAAqB,yBA2GjC,CAAC"}
|
|
@@ -30,11 +30,23 @@ export const tableResponsiveStyles = css `
|
|
|
30
30
|
padding-inline: 0;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
:host(:not([responsive="scroll"])) colgroup
|
|
34
|
-
:host(:not([responsive="scroll"])) thead {
|
|
33
|
+
:host(:not([responsive="scroll"])) colgroup {
|
|
35
34
|
display: none;
|
|
36
35
|
}
|
|
37
36
|
|
|
37
|
+
:host(:not([responsive="scroll"])) thead {
|
|
38
|
+
position: absolute;
|
|
39
|
+
inline-size: 1px;
|
|
40
|
+
block-size: 1px;
|
|
41
|
+
margin: -1px;
|
|
42
|
+
padding: 0;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
clip: rect(0, 0, 0, 0);
|
|
45
|
+
clip-path: inset(50%);
|
|
46
|
+
border: 0;
|
|
47
|
+
white-space: nowrap;
|
|
48
|
+
}
|
|
49
|
+
|
|
38
50
|
:host(:not([responsive="scroll"])) tbody {
|
|
39
51
|
display: grid;
|
|
40
52
|
gap: var(--ds-space-3);
|
|
@@ -47,8 +59,8 @@ export const tableResponsiveStyles = css `
|
|
|
47
59
|
background: var(--ds-color-bg);
|
|
48
60
|
}
|
|
49
61
|
|
|
50
|
-
:host(:not([responsive="scroll"])) tbody tr.clickable:focus-visible {
|
|
51
|
-
box-shadow:
|
|
62
|
+
:host(:not([responsive="scroll"])) tbody tr.clickable:has(.row-action:focus-visible) {
|
|
63
|
+
box-shadow: var(--ds-shadow-focus);
|
|
52
64
|
}
|
|
53
65
|
|
|
54
66
|
:host(:not([responsive="scroll"])) .skeleton-table tbody tr {
|
|
@@ -67,8 +79,8 @@ export const tableResponsiveStyles = css `
|
|
|
67
79
|
text-align: left;
|
|
68
80
|
}
|
|
69
81
|
|
|
70
|
-
:host(:not([responsive="scroll"]))
|
|
71
|
-
|
|
82
|
+
:host(:not([responsive="scroll"])) .cell-label {
|
|
83
|
+
display: block;
|
|
72
84
|
color: var(--ds-color-fg-muted);
|
|
73
85
|
font-weight: var(--ds-font-weight-medium);
|
|
74
86
|
min-width: 0;
|
|
@@ -80,10 +92,10 @@ export const tableResponsiveStyles = css `
|
|
|
80
92
|
display: block;
|
|
81
93
|
}
|
|
82
94
|
|
|
83
|
-
:host(:not([responsive="scroll"])) tbody td[data-label=""]
|
|
84
|
-
:host(:not([responsive="scroll"])) tbody td.empty
|
|
85
|
-
:host(:not([responsive="scroll"])) .skeleton-table
|
|
86
|
-
|
|
95
|
+
:host(:not([responsive="scroll"])) tbody td[data-label=""] .cell-label,
|
|
96
|
+
:host(:not([responsive="scroll"])) tbody td.empty .cell-label,
|
|
97
|
+
:host(:not([responsive="scroll"])) .skeleton-table .cell-label {
|
|
98
|
+
display: none;
|
|
87
99
|
}
|
|
88
100
|
|
|
89
101
|
:host(:not([responsive="scroll"])) .skeleton-table tbody td {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-responsive.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-responsive.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAElD,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;2BACb,gBAAgB
|
|
1
|
+
{"version":3,"file":"table-responsive.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-responsive.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAElD,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;2BACb,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0G1C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-sort-button.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-sort-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAA0B,MAAM,KAAK,CAAC;AAE7E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAgBrD;;;;;;;GAOG;AACH,qBAAa,iBAAkB,SAAQ,SAAS;;IAC9C,OAAgB,MAAM,4BAAgD;IAEzC,SAAS,EAAE,kBAAkB,CAAQ;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IA4BnB,MAAM,IAAI,cAAc;
|
|
1
|
+
{"version":3,"file":"table-sort-button.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-sort-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAA0B,MAAM,KAAK,CAAC;AAE7E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAgBrD;;;;;;;GAOG;AACH,qBAAa,iBAAkB,SAAQ,SAAS;;IAC9C,OAAgB,MAAM,4BAAgD;IAEzC,SAAS,EAAE,kBAAkB,CAAQ;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IA4BnB,MAAM,IAAI,cAAc;CAalC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-sort-button.js","sourceRoot":"","sources":["../../../src/atoms/table/table-sort-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAA+C,MAAM,KAAK,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAGtE,MAAM,YAAY,GAAG,GAAG,CAAA,0MAA0M,CAAC;AACnO,MAAM,QAAQ,GAAG,GAAG,CAAA,kLAAkL,CAAC;AACvM,MAAM,SAAS,GAAG,GAAG,CAAA,iLAAiL,CAAC;AAEvM,SAAS,aAAa,CAAC,OAA2B;IAChD,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACrB,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,EAAE,CAAC;QACtB,OAAO,MAAM,CAAC;IAChB,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,OAAO,iBAAkB,SAAQ,SAAS;IAAhD;;QAG+B,cAAS,GAAuB,IAAI,CAAC;QAGlE,aAAQ,GAAG,GAAS,EAAE;YACpB,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAChD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;QAClD,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"table-sort-button.js","sourceRoot":"","sources":["../../../src/atoms/table/table-sort-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAA+C,MAAM,KAAK,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAGtE,MAAM,YAAY,GAAG,GAAG,CAAA,0MAA0M,CAAC;AACnO,MAAM,QAAQ,GAAG,GAAG,CAAA,kLAAkL,CAAC;AACvM,MAAM,SAAS,GAAG,GAAG,CAAA,iLAAiL,CAAC;AAEvM,SAAS,aAAa,CAAC,OAA2B;IAChD,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;QACrB,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,EAAE,CAAC;QACtB,OAAO,MAAM,CAAC;IAChB,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,OAAO,iBAAkB,SAAQ,SAAS;IAAhD;;QAG+B,cAAS,GAAuB,IAAI,CAAC;QAGlE,aAAQ,GAAG,GAAS,EAAE;YACpB,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAChD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;QAClD,CAAC,CAAC;IAoCJ,CAAC;aA5CiB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,qBAAqB,CAAC,AAA/C,CAAgD;IAKtE,QAAQ,CAGN;IAEF,KAAK;QACH,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;YAC7B,OAAO,QAAQ,CAAC;QAClB,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,EAAE,CAAC;YAC9B,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,UAAU;QACR,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;QAC7D,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;YAC7B,OAAO,GAAG,IAAI,cAAc,CAAC;QAC/B,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,KAAK,MAAM,EAAE,CAAC;YAC9B,OAAO,GAAG,IAAI,eAAe,CAAC;QAChC,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;qBAIM,IAAI,CAAC,UAAU,EAAE;iBACrB,IAAI,CAAC,QAAQ;;;yCAGW,IAAI,CAAC,KAAK,EAAE;;KAEhD,CAAC;IACJ,CAAC;;AAzC4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAsC;AACtD;IAAX,QAAQ,EAAE;iDAAiB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-sort-button.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-sort-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"table-sort-button.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-sort-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,yBAwCjC,CAAC"}
|
|
@@ -5,20 +5,22 @@ export const tableSortButtonStyles = css `
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
button {
|
|
8
|
+
position: relative;
|
|
8
9
|
display: inline-flex;
|
|
9
10
|
align-items: center;
|
|
10
11
|
gap: var(--ds-space-1);
|
|
11
12
|
background: transparent;
|
|
12
13
|
color: inherit;
|
|
13
14
|
border: 0;
|
|
14
|
-
padding:
|
|
15
|
+
padding: var(--ds-space-1);
|
|
15
16
|
font: inherit;
|
|
16
17
|
cursor: pointer;
|
|
17
18
|
border-radius: var(--ds-radius-sm);
|
|
18
19
|
}
|
|
19
20
|
button:focus-visible {
|
|
20
|
-
outline:
|
|
21
|
-
|
|
21
|
+
outline: none;
|
|
22
|
+
background: var(--ds-color-bg);
|
|
23
|
+
box-shadow: var(--ds-shadow-focus);
|
|
22
24
|
}
|
|
23
25
|
button:hover {
|
|
24
26
|
color: var(--ds-color-accent);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-sort-button.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-sort-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"table-sort-button.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-sort-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCvC,CAAC"}
|
|
@@ -20,6 +20,7 @@ import type { TableColumn, TableResponsiveMode, TableRow, TableSortState } from
|
|
|
20
20
|
* @csspart tbody - The `<tbody>` element.
|
|
21
21
|
* @csspart row - Each body `<tr>`.
|
|
22
22
|
* @csspart row-clickable - Each body `<tr>` when `clickable-rows` is set.
|
|
23
|
+
* @csspart row-action - The native row action button rendered in the first cell when `clickable-rows` is set.
|
|
23
24
|
* @csspart cell - Each body `<td>`.
|
|
24
25
|
* @csspart header-cell - Each header `<th>`.
|
|
25
26
|
* @csspart caption - The `<caption>` wrapper.
|
|
@@ -35,6 +36,7 @@ export declare class DsTable<T extends TableRow = TableRow> extends DsElement {
|
|
|
35
36
|
rows: readonly T[];
|
|
36
37
|
columns: readonly TableColumn<T>[];
|
|
37
38
|
sortState: TableSortState | null;
|
|
39
|
+
rowActionLabel?: (row: T, index: number) => string;
|
|
38
40
|
clickableRows: boolean;
|
|
39
41
|
loading: boolean;
|
|
40
42
|
skeletonRows: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,uBAAuB,CAAC;AAQ/B,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAyB7F;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,OAAO,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,CAAE,SAAQ,SAAS;;IACnE,OAAgB,MAAM,4BAMpB;IAE8B,IAAI,EAAE,SAAS,CAAC,EAAE,CAAM;IACxB,OAAO,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAM;IACxC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAQ;IACxC,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACV,aAAa,UAAS;IAC3C,OAAO,UAAS;IACZ,YAAY,SAAK;IACd,eAAe,SAAK;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,mBAAmB,CAAW;IACD,UAAU,UAAS;IAChF,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAIO,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IAiI5B,MAAM,IAAI,cAAc;CAUlC"}
|
|
@@ -22,6 +22,11 @@ const INTERACTIVE_TAGS = new Set([
|
|
|
22
22
|
'ds-searchable-select', 'ds-text-field', 'ds-table-sort-button',
|
|
23
23
|
'ds-table-pagination',
|
|
24
24
|
]);
|
|
25
|
+
const INTERACTIVE_ROLES = new Set([
|
|
26
|
+
'button', 'checkbox', 'link', 'menuitem', 'menuitemcheckbox',
|
|
27
|
+
'menuitemradio', 'option', 'radio', 'searchbox', 'slider',
|
|
28
|
+
'spinbutton', 'switch', 'textbox',
|
|
29
|
+
]);
|
|
25
30
|
const FALSE_BOOLEAN_ATTRIBUTES = new Set(['false', '0']);
|
|
26
31
|
function parseBooleanAttribute(value) {
|
|
27
32
|
return value !== null && !FALSE_BOOLEAN_ATTRIBUTES.has(value.trim().toLowerCase());
|
|
@@ -47,6 +52,7 @@ const booleanAttributeConverter = {
|
|
|
47
52
|
* @csspart tbody - The `<tbody>` element.
|
|
48
53
|
* @csspart row - Each body `<tr>`.
|
|
49
54
|
* @csspart row-clickable - Each body `<tr>` when `clickable-rows` is set.
|
|
55
|
+
* @csspart row-action - The native row action button rendered in the first cell when `clickable-rows` is set.
|
|
50
56
|
* @csspart cell - Each body `<td>`.
|
|
51
57
|
* @csspart header-cell - Each header `<th>`.
|
|
52
58
|
* @csspart caption - The `<caption>` wrapper.
|
|
@@ -87,16 +93,15 @@ export class DsTable extends DsElement {
|
|
|
87
93
|
}
|
|
88
94
|
this.emit('ds-row-click', { detail: { row, index } });
|
|
89
95
|
};
|
|
90
|
-
this.#
|
|
96
|
+
this.#onRowAction = (row, index) => {
|
|
91
97
|
if (this.loading) {
|
|
92
98
|
return;
|
|
93
99
|
}
|
|
94
|
-
if (event.key !== 'Enter' && event.key !== ' ') {
|
|
95
|
-
return;
|
|
96
|
-
}
|
|
97
|
-
event.preventDefault();
|
|
98
100
|
this.emit('ds-row-click', { detail: { row, index } });
|
|
99
101
|
};
|
|
102
|
+
this.#rowActionLabel = (row, index) => {
|
|
103
|
+
return this.rowActionLabel?.(row, index) ?? `Activate row ${index + 1}`;
|
|
104
|
+
};
|
|
100
105
|
}
|
|
101
106
|
static { this.styles = [
|
|
102
107
|
...DsElement.styles,
|
|
@@ -124,7 +129,7 @@ export class DsTable extends DsElement {
|
|
|
124
129
|
}
|
|
125
130
|
#syncSlotPresence;
|
|
126
131
|
#onRowClick;
|
|
127
|
-
#
|
|
132
|
+
#onRowAction;
|
|
128
133
|
#pathHasInteractiveBeforeRow(event) {
|
|
129
134
|
const path = event.composedPath();
|
|
130
135
|
for (const node of path) {
|
|
@@ -138,28 +143,31 @@ export class DsTable extends DsElement {
|
|
|
138
143
|
if (INTERACTIVE_TAGS.has(tag)) {
|
|
139
144
|
return true;
|
|
140
145
|
}
|
|
141
|
-
|
|
146
|
+
const role = node.getAttribute('role');
|
|
147
|
+
if (role && INTERACTIVE_ROLES.has(role)) {
|
|
142
148
|
return true;
|
|
143
149
|
}
|
|
144
150
|
}
|
|
145
151
|
return false;
|
|
146
152
|
}
|
|
147
153
|
#ariaSort(column) {
|
|
148
|
-
if (!column.sortable) {
|
|
154
|
+
if (!column.sortable || this.sortState?.name !== column.name || !this.sortState.direction) {
|
|
149
155
|
return undefined;
|
|
150
156
|
}
|
|
151
|
-
if (this.sortState?.name !== column.name || !this.sortState.direction) {
|
|
152
|
-
return 'none';
|
|
153
|
-
}
|
|
154
157
|
return this.sortState.direction === 'asc' ? 'ascending' : 'descending';
|
|
155
158
|
}
|
|
159
|
+
#rowActionLabel;
|
|
156
160
|
#renderLoading() {
|
|
157
|
-
if (!this.loading
|
|
161
|
+
if (!this.loading) {
|
|
158
162
|
return null;
|
|
159
163
|
}
|
|
164
|
+
const content = html `<slot name="loading">Loading...</slot>`;
|
|
165
|
+
if (this.rows.length === 0) {
|
|
166
|
+
return html `<div class="loading-status" role="status" aria-live="polite">${content}</div>`;
|
|
167
|
+
}
|
|
160
168
|
return html `
|
|
161
169
|
<div class="loading" part="loading" role="status" aria-live="polite">
|
|
162
|
-
<span
|
|
170
|
+
<span>${content}</span>
|
|
163
171
|
</div>
|
|
164
172
|
`;
|
|
165
173
|
}
|
|
@@ -190,8 +198,10 @@ export class DsTable extends DsElement {
|
|
|
190
198
|
rows: this.rows,
|
|
191
199
|
columns: this.columns,
|
|
192
200
|
clickableRows: this.clickableRows,
|
|
201
|
+
rowActionsDisabled: this.loading,
|
|
202
|
+
rowActionLabel: this.#rowActionLabel,
|
|
193
203
|
onRowClick: this.#onRowClick,
|
|
194
|
-
|
|
204
|
+
onRowAction: this.#onRowAction,
|
|
195
205
|
})}</tbody>
|
|
196
206
|
</table>
|
|
197
207
|
`;
|
|
@@ -228,6 +238,9 @@ __decorate([
|
|
|
228
238
|
__decorate([
|
|
229
239
|
property({ attribute: false })
|
|
230
240
|
], DsTable.prototype, "sortState", void 0);
|
|
241
|
+
__decorate([
|
|
242
|
+
property({ attribute: false })
|
|
243
|
+
], DsTable.prototype, "rowActionLabel", void 0);
|
|
231
244
|
__decorate([
|
|
232
245
|
property({ type: Boolean, reflect: true, attribute: 'clickable-rows' })
|
|
233
246
|
], DsTable.prototype, "clickableRows", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG1E,MAAM,gBAAgB,GAAG,IAAI,GAAG,CAAC;IAC/B,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO;IACrD,WAAW,EAAE,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW;IAC9D,sBAAsB,EAAE,eAAe,EAAE,sBAAsB;IAC/D,qBAAqB;CACtB,CAAC,CAAC;AAEH,MAAM,wBAAwB,GAAG,IAAI,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;AAEzD,SAAS,qBAAqB,CAAC,KAAoB;IACjD,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC;AACrF,CAAC;AAED,MAAM,yBAAyB,GAAG;IAChC,aAAa,EAAE,qBAAqB;CACrC,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAmLvB,CAAC"}
|
|
@@ -59,9 +59,24 @@ export const tableStyles = css `
|
|
|
59
59
|
vertical-align: middle;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
+
.cell-label {
|
|
63
|
+
display: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.cell-content {
|
|
67
|
+
display: block;
|
|
68
|
+
min-width: 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
62
71
|
tbody tr:last-child td {
|
|
63
72
|
border-bottom: 0;
|
|
64
73
|
}
|
|
74
|
+
tbody tr:last-child td:first-child {
|
|
75
|
+
border-bottom-left-radius: calc(var(--ds-radius-md) - 1px);
|
|
76
|
+
}
|
|
77
|
+
tbody tr:last-child td:last-child {
|
|
78
|
+
border-bottom-right-radius: calc(var(--ds-radius-md) - 1px);
|
|
79
|
+
}
|
|
65
80
|
|
|
66
81
|
tbody tr:nth-child(even) td {
|
|
67
82
|
background: var(--ds-color-bg-subtle);
|
|
@@ -72,16 +87,48 @@ export const tableStyles = css `
|
|
|
72
87
|
.align-center { text-align: center; }
|
|
73
88
|
|
|
74
89
|
tbody tr.clickable {
|
|
90
|
+
position: relative;
|
|
75
91
|
cursor: pointer;
|
|
76
92
|
outline: none;
|
|
77
93
|
}
|
|
78
94
|
tbody tr.clickable:hover td {
|
|
79
95
|
background: var(--ds-color-bg-muted);
|
|
80
96
|
}
|
|
81
|
-
tbody tr.clickable:focus-visible {
|
|
97
|
+
tbody tr.clickable:has(.row-action:focus-visible) td {
|
|
98
|
+
background: var(--ds-color-bg-muted);
|
|
99
|
+
box-shadow:
|
|
100
|
+
inset 0 2px 0 var(--ds-color-focus),
|
|
101
|
+
inset 0 -2px 0 var(--ds-color-focus);
|
|
102
|
+
}
|
|
103
|
+
tbody tr.clickable:has(.row-action:focus-visible) td:first-child {
|
|
104
|
+
box-shadow:
|
|
105
|
+
inset 2px 0 0 var(--ds-color-focus),
|
|
106
|
+
inset 0 2px 0 var(--ds-color-focus),
|
|
107
|
+
inset 0 -2px 0 var(--ds-color-focus);
|
|
108
|
+
}
|
|
109
|
+
tbody tr.clickable:has(.row-action:focus-visible) td:last-child {
|
|
110
|
+
box-shadow:
|
|
111
|
+
inset -2px 0 0 var(--ds-color-focus),
|
|
112
|
+
inset 0 2px 0 var(--ds-color-focus),
|
|
113
|
+
inset 0 -2px 0 var(--ds-color-focus);
|
|
114
|
+
}
|
|
115
|
+
tbody tr.clickable:has(.row-action:focus-visible) td:first-child:last-child {
|
|
82
116
|
box-shadow: inset 0 0 0 2px var(--ds-color-focus);
|
|
83
117
|
}
|
|
84
118
|
|
|
119
|
+
.row-action {
|
|
120
|
+
position: absolute;
|
|
121
|
+
inline-size: 1px;
|
|
122
|
+
block-size: 1px;
|
|
123
|
+
margin: -1px;
|
|
124
|
+
padding: 0;
|
|
125
|
+
overflow: hidden;
|
|
126
|
+
clip: rect(0, 0, 0, 0);
|
|
127
|
+
clip-path: inset(50%);
|
|
128
|
+
border: 0;
|
|
129
|
+
white-space: nowrap;
|
|
130
|
+
}
|
|
131
|
+
|
|
85
132
|
.skeleton-table {
|
|
86
133
|
min-width: 32rem;
|
|
87
134
|
}
|
|
@@ -109,6 +156,19 @@ export const tableStyles = css `
|
|
|
109
156
|
font-weight: var(--ds-font-weight-medium);
|
|
110
157
|
}
|
|
111
158
|
|
|
159
|
+
.loading-status {
|
|
160
|
+
position: absolute;
|
|
161
|
+
inline-size: 1px;
|
|
162
|
+
block-size: 1px;
|
|
163
|
+
margin: -1px;
|
|
164
|
+
padding: 0;
|
|
165
|
+
overflow: hidden;
|
|
166
|
+
clip: rect(0, 0, 0, 0);
|
|
167
|
+
clip-path: inset(50%);
|
|
168
|
+
border: 0;
|
|
169
|
+
white-space: nowrap;
|
|
170
|
+
}
|
|
171
|
+
|
|
112
172
|
.empty {
|
|
113
173
|
padding: var(--ds-space-6);
|
|
114
174
|
text-align: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"table.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmL7B,CAAC"}
|
package/package.json
CHANGED