@jsekulowicz/ds-components 0.9.0 → 0.9.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.
Files changed (25) hide show
  1. package/custom-elements.json +147 -113
  2. package/dist/atoms/table/index.d.ts +1 -1
  3. package/dist/atoms/table/index.d.ts.map +1 -1
  4. package/dist/atoms/table/index.js.map +1 -1
  5. package/dist/atoms/table/table-rendering.d.ts +14 -0
  6. package/dist/atoms/table/table-rendering.d.ts.map +1 -0
  7. package/dist/atoms/table/table-rendering.js +65 -0
  8. package/dist/atoms/table/table-rendering.js.map +1 -0
  9. package/dist/atoms/table/table-responsive.styles.d.ts +2 -0
  10. package/dist/atoms/table/table-responsive.styles.d.ts.map +1 -0
  11. package/dist/atoms/table/table-responsive.styles.js +100 -0
  12. package/dist/atoms/table/table-responsive.styles.js.map +1 -0
  13. package/dist/atoms/table/table-skeleton.d.ts.map +1 -1
  14. package/dist/atoms/table/table-skeleton.js +14 -5
  15. package/dist/atoms/table/table-skeleton.js.map +1 -1
  16. package/dist/atoms/table/table.d.ts +6 -1
  17. package/dist/atoms/table/table.d.ts.map +1 -1
  18. package/dist/atoms/table/table.js +67 -72
  19. package/dist/atoms/table/table.js.map +1 -1
  20. package/dist/atoms/table/table.styles.d.ts.map +1 -1
  21. package/dist/atoms/table/table.styles.js +4 -0
  22. package/dist/atoms/table/table.styles.js.map +1 -1
  23. package/dist/atoms/table/types.d.ts +1 -0
  24. package/dist/atoms/table/types.d.ts.map +1 -1
  25. package/package.json +1 -1
package/custom-elements.json CHANGED
@@ -6495,6 +6495,14 @@
6495
6495
  "module": "./types.js"
6496
6496
  }
6497
6497
  },
6498
+ {
6499
+ "kind": "js",
6500
+ "name": "TableResponsiveMode",
6501
+ "declaration": {
6502
+ "name": "TableResponsiveMode",
6503
+ "module": "./types.js"
6504
+ }
6505
+ },
6498
6506
  {
6499
6507
  "kind": "js",
6500
6508
  "name": "TableRow",
@@ -7025,6 +7033,91 @@
7025
7033
  }
7026
7034
  ]
7027
7035
  },
7036
+ {
7037
+ "kind": "javascript-module",
7038
+ "path": "src/atoms/table/table-rendering.ts",
7039
+ "declarations": [
7040
+ {
7041
+ "kind": "function",
7042
+ "name": "renderTableBody",
7043
+ "return": {
7044
+ "type": {
7045
+ "text": "TemplateResult"
7046
+ }
7047
+ },
7048
+ "parameters": [
7049
+ {
7050
+ "name": "options",
7051
+ "type": {
7052
+ "text": "TableBodyOptions<T>"
7053
+ }
7054
+ }
7055
+ ]
7056
+ },
7057
+ {
7058
+ "kind": "function",
7059
+ "name": "renderTableHeader",
7060
+ "return": {
7061
+ "type": {
7062
+ "text": "TemplateResult[]"
7063
+ }
7064
+ },
7065
+ "parameters": [
7066
+ {
7067
+ "name": "columns",
7068
+ "type": {
7069
+ "text": "readonly TableColumn<T>[]"
7070
+ }
7071
+ },
7072
+ {
7073
+ "name": "ariaSort",
7074
+ "type": {
7075
+ "text": "(column: TableColumn<T>) => AriaSort"
7076
+ }
7077
+ }
7078
+ ]
7079
+ }
7080
+ ],
7081
+ "exports": [
7082
+ {
7083
+ "kind": "js",
7084
+ "name": "renderTableBody",
7085
+ "declaration": {
7086
+ "name": "renderTableBody",
7087
+ "module": "src/atoms/table/table-rendering.ts"
7088
+ }
7089
+ },
7090
+ {
7091
+ "kind": "js",
7092
+ "name": "renderTableHeader",
7093
+ "declaration": {
7094
+ "name": "renderTableHeader",
7095
+ "module": "src/atoms/table/table-rendering.ts"
7096
+ }
7097
+ }
7098
+ ]
7099
+ },
7100
+ {
7101
+ "kind": "javascript-module",
7102
+ "path": "src/atoms/table/table-responsive.styles.ts",
7103
+ "declarations": [
7104
+ {
7105
+ "kind": "variable",
7106
+ "name": "tableResponsiveStyles",
7107
+ "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, :host(:not([responsive=\"scroll\"])) thead { display: none; } :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:focus-visible { box-shadow: 0 0 0 2px var(--ds-color-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\"])) tbody td::before { content: attr(data-label); 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=\"\"]::before, :host(:not([responsive=\"scroll\"])) tbody td.empty::before, :host(:not([responsive=\"scroll\"])) .skeleton-table tbody td::before { content: none; } :host(:not([responsive=\"scroll\"])) .skeleton-table tbody td { padding: 0; border-bottom: 0; background: transparent; } :host(:not([responsive=\"scroll\"])) .skeleton-label { display: block; } } `"
7108
+ }
7109
+ ],
7110
+ "exports": [
7111
+ {
7112
+ "kind": "js",
7113
+ "name": "tableResponsiveStyles",
7114
+ "declaration": {
7115
+ "name": "tableResponsiveStyles",
7116
+ "module": "src/atoms/table/table-responsive.styles.ts"
7117
+ }
7118
+ }
7119
+ ]
7120
+ },
7028
7121
  {
7029
7122
  "kind": "javascript-module",
7030
7123
  "path": "src/atoms/table/table-skeleton.ts",
@@ -7204,7 +7297,7 @@
7204
7297
  {
7205
7298
  "kind": "variable",
7206
7299
  "name": "tableStyles",
7207
- "default": "css` :host { display: block; width: 100%; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } .toolbar { padding: var(--ds-space-3) 0; } .toolbar:empty { display: none; } .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-3); border-bottom: 1px solid var(--ds-color-border); white-space: nowrap; } tbody td { padding: 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; } .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; } .footer:empty { display: none; } `"
7300
+ "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); } .toolbar { padding: var(--ds-space-3) 0; } .toolbar:empty { display: none; } .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-3); border-bottom: 1px solid var(--ds-color-border); white-space: nowrap; } tbody td { padding: 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; } .footer:empty { display: none; } `"
7208
7301
  }
7209
7302
  ],
7210
7303
  "exports": [
@@ -7344,8 +7437,7 @@
7344
7437
  "text": "boolean"
7345
7438
  },
7346
7439
  "default": "false",
7347
- "attribute": "loading",
7348
- "reflects": true
7440
+ "attribute": "loading"
7349
7441
  },
7350
7442
  {
7351
7443
  "kind": "field",
@@ -7373,6 +7465,39 @@
7373
7465
  },
7374
7466
  "attribute": "row-key"
7375
7467
  },
7468
+ {
7469
+ "kind": "field",
7470
+ "name": "responsive",
7471
+ "type": {
7472
+ "text": "TableResponsiveMode"
7473
+ },
7474
+ "default": "'stack'",
7475
+ "attribute": "responsive",
7476
+ "reflects": true
7477
+ },
7478
+ {
7479
+ "kind": "field",
7480
+ "name": "_hasCaption",
7481
+ "type": {
7482
+ "text": "boolean"
7483
+ },
7484
+ "privacy": "private",
7485
+ "default": "false"
7486
+ },
7487
+ {
7488
+ "kind": "field",
7489
+ "name": "#captionObserver",
7490
+ "privacy": "private",
7491
+ "type": {
7492
+ "text": "MutationObserver | null"
7493
+ },
7494
+ "default": "null"
7495
+ },
7496
+ {
7497
+ "kind": "field",
7498
+ "name": "#syncCaptionPresence",
7499
+ "privacy": "private"
7500
+ },
7376
7501
  {
7377
7502
  "kind": "field",
7378
7503
  "name": "#onRowClick",
@@ -7421,141 +7546,41 @@
7421
7546
  },
7422
7547
  {
7423
7548
  "kind": "method",
7424
- "name": "#renderCell",
7425
- "privacy": "private",
7426
- "return": {
7427
- "type": {
7428
- "text": "unknown"
7429
- }
7430
- },
7431
- "parameters": [
7432
- {
7433
- "name": "column",
7434
- "type": {
7435
- "text": "TableColumn<T>"
7436
- }
7437
- },
7438
- {
7439
- "name": "row",
7440
- "type": {
7441
- "text": "T"
7442
- }
7443
- },
7444
- {
7445
- "name": "index",
7446
- "type": {
7447
- "text": "number"
7448
- }
7449
- }
7450
- ]
7451
- },
7452
- {
7453
- "kind": "method",
7454
- "name": "#renderHeader",
7455
- "privacy": "private",
7456
- "return": {
7457
- "type": {
7458
- "text": "TemplateResult"
7459
- }
7460
- },
7461
- "parameters": [
7462
- {
7463
- "name": "column",
7464
- "type": {
7465
- "text": "TableColumn<T>"
7466
- }
7467
- }
7468
- ]
7469
- },
7470
- {
7471
- "kind": "method",
7472
- "name": "#renderClickableRow",
7473
- "privacy": "private",
7474
- "return": {
7475
- "type": {
7476
- "text": "TemplateResult"
7477
- }
7478
- },
7479
- "parameters": [
7480
- {
7481
- "name": "row",
7482
- "type": {
7483
- "text": "T"
7484
- }
7485
- },
7486
- {
7487
- "name": "index",
7488
- "type": {
7489
- "text": "number"
7490
- }
7491
- }
7492
- ]
7493
- },
7494
- {
7495
- "kind": "method",
7496
- "name": "#renderRow",
7549
+ "name": "#renderLoading",
7497
7550
  "privacy": "private",
7498
7551
  "return": {
7499
7552
  "type": {
7500
- "text": "TemplateResult"
7501
- }
7502
- },
7503
- "parameters": [
7504
- {
7505
- "name": "row",
7506
- "type": {
7507
- "text": "T"
7508
- }
7509
- },
7510
- {
7511
- "name": "index",
7512
- "type": {
7513
- "text": "number"
7514
- }
7553
+ "text": "TemplateResult | null"
7515
7554
  }
7516
- ]
7555
+ }
7517
7556
  },
7518
7557
  {
7519
7558
  "kind": "method",
7520
- "name": "#renderCells",
7559
+ "name": "#renderCaption",
7521
7560
  "privacy": "private",
7522
7561
  "return": {
7523
7562
  "type": {
7524
- "text": "TemplateResult[]"
7525
- }
7526
- },
7527
- "parameters": [
7528
- {
7529
- "name": "row",
7530
- "type": {
7531
- "text": "T"
7532
- }
7533
- },
7534
- {
7535
- "name": "index",
7536
- "type": {
7537
- "text": "number"
7538
- }
7563
+ "text": "TemplateResult | null"
7539
7564
  }
7540
- ]
7565
+ }
7541
7566
  },
7542
7567
  {
7543
7568
  "kind": "method",
7544
- "name": "#renderBody",
7569
+ "name": "#skeletonColumnCount",
7545
7570
  "privacy": "private",
7546
7571
  "return": {
7547
7572
  "type": {
7548
- "text": "TemplateResult"
7573
+ "text": "number"
7549
7574
  }
7550
7575
  }
7551
7576
  },
7552
7577
  {
7553
7578
  "kind": "method",
7554
- "name": "#renderLoading",
7579
+ "name": "#shouldRenderSkeleton",
7555
7580
  "privacy": "private",
7556
7581
  "return": {
7557
7582
  "type": {
7558
- "text": "TemplateResult | null"
7583
+ "text": "boolean"
7559
7584
  }
7560
7585
  }
7561
7586
  },
@@ -7577,6 +7602,15 @@
7577
7602
  }
7578
7603
  ],
7579
7604
  "attributes": [
7605
+ {
7606
+ "description": "`stack` stacks cells on small screens; `scroll` preserves horizontal scrolling.",
7607
+ "name": "responsive",
7608
+ "type": {
7609
+ "text": "TableResponsiveMode"
7610
+ },
7611
+ "default": "'stack'",
7612
+ "fieldName": "responsive"
7613
+ },
7580
7614
  {
7581
7615
  "name": "clickable-rows",
7582
7616
  "type": {
package/dist/atoms/table/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export { DsTable } from './table.js';
2
2
  export { DsTableSortButton } from './table-sort-button.js';
3
3
  export { DsTablePagination } from './table-pagination.js';
4
- export type { TableColumn, TableColumnAlign, TableRow, TableSortDirection, TableSortState, TableRowClickDetail, TableSortDetail, TablePageChangeDetail, TablePageSizeChangeDetail, } from './types.js';
4
+ export type { TableColumn, TableColumnAlign, TableResponsiveMode, TableRow, TableSortDirection, TableSortState, TableRowClickDetail, TableSortDetail, TablePageChangeDetail, TablePageSizeChangeDetail, } from './types.js';
5
5
  export { buildPaginationRange, type PaginationRangeItem, type PaginationRangeInput } from './pagination-range.js';
6
6
  //# sourceMappingURL=index.d.ts.map
package/dist/atoms/table/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,KAAK,mBAAmB,EAAE,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EACV,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,QAAQ,EACR,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,qBAAqB,EACrB,yBAAyB,GAC1B,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,oBAAoB,EAAE,KAAK,mBAAmB,EAAE,KAAK,oBAAoB,EAAE,MAAM,uBAAuB,CAAC"}
package/dist/atoms/table/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAY1D,OAAO,EAAE,oBAAoB,EAAuD,MAAM,uBAAuB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAa1D,OAAO,EAAE,oBAAoB,EAAuD,MAAM,uBAAuB,CAAC"}
package/dist/atoms/table/table-rendering.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { type TemplateResult } from 'lit';
2
+ import type { TableColumn, TableRow } from './types.js';
3
+ type AriaSort = 'ascending' | 'descending' | 'none' | undefined;
4
+ type TableBodyOptions<T extends TableRow> = {
5
+ rows: readonly T[];
6
+ columns: readonly TableColumn<T>[];
7
+ clickableRows: boolean;
8
+ onRowClick: (event: MouseEvent, row: T, index: number) => void;
9
+ onRowKeydown: (event: KeyboardEvent, row: T, index: number) => void;
10
+ };
11
+ export declare function renderTableBody<T extends TableRow>(options: TableBodyOptions<T>): TemplateResult;
12
+ export declare function renderTableHeader<T extends TableRow>(columns: readonly TableColumn<T>[], ariaSort: (column: TableColumn<T>) => AriaSort): TemplateResult[];
13
+ export {};
14
+ //# sourceMappingURL=table-rendering.d.ts.map
package/dist/atoms/table/table-rendering.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"table-rendering.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-rendering.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAExD,KAAK,QAAQ,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhE,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,UAAU,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/D,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE,CAAC;AAoDF,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"}
package/dist/atoms/table/table-rendering.js ADDED
@@ -0,0 +1,65 @@
1
+ import { html } from 'lit';
2
+ import { ifDefined } from 'lit/directives/if-defined.js';
3
+ function renderCell(column, row, index) {
4
+ if (column.render) {
5
+ return column.render(row, index);
6
+ }
7
+ const value = row[column.field];
8
+ return value == null ? '' : String(value);
9
+ }
10
+ function renderCells(columns, row, index) {
11
+ return columns.map(column => html `
12
+ <td part="cell" class=${`align-${column.align ?? 'left'}`} data-label=${column.label}>
13
+ ${renderCell(column, row, index)}
14
+ </td>
15
+ `);
16
+ }
17
+ function renderClickableRow(options, row, index) {
18
+ return html `
19
+ <tr
20
+ part="row row-clickable"
21
+ class="clickable"
22
+ role="button"
23
+ tabindex="0"
24
+ @click=${(e) => options.onRowClick(e, row, index)}
25
+ @keydown=${(e) => options.onRowKeydown(e, row, index)}
26
+ >
27
+ ${renderCells(options.columns, row, index)}
28
+ </tr>
29
+ `;
30
+ }
31
+ function renderRow(options, row, index) {
32
+ if (options.clickableRows) {
33
+ return renderClickableRow(options, row, index);
34
+ }
35
+ return html `
36
+ <tr part="row">
37
+ ${renderCells(options.columns, row, index)}
38
+ </tr>
39
+ `;
40
+ }
41
+ export function renderTableBody(options) {
42
+ if (options.rows.length === 0) {
43
+ return html `
44
+ <tr>
45
+ <td part="empty" class="empty" colspan=${options.columns.length || 1}>
46
+ <slot name="empty">No data</slot>
47
+ </td>
48
+ </tr>
49
+ `;
50
+ }
51
+ return html `${options.rows.map((row, index) => renderRow(options, row, index))}`;
52
+ }
53
+ export function renderTableHeader(columns, ariaSort) {
54
+ return columns.map(column => html `
55
+ <th
56
+ part="header-cell"
57
+ scope="col"
58
+ class=${`align-${column.align ?? 'left'}`}
59
+ aria-sort=${ifDefined(ariaSort(column))}
60
+ >
61
+ <slot name=${`header-${column.name}`}>${column.label}</slot>
62
+ </th>
63
+ `);
64
+ }
65
+ //# sourceMappingURL=table-rendering.js.map
package/dist/atoms/table/table-rendering.js.map ADDED
@@ -0,0 +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;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAazD,SAAS,UAAU,CAAqB,MAAsB,EAAE,GAAM,EAAE,KAAa;IACnF,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;QAClB,OAAO,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;IACD,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChC,OAAO,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AAC5C,CAAC;AAED,SAAS,WAAW,CAClB,OAAkC,EAClC,GAAM,EACN,KAAa;IAEb,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;4BACP,SAAS,MAAM,CAAC,KAAK,IAAI,MAAM,EAAE,eAAe,MAAM,CAAC,KAAK;QAChF,UAAU,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,kBAAkB,CACzB,OAA4B,EAC5B,GAAM,EACN,KAAa;IAEb,OAAO,IAAI,CAAA;;;;;;eAME,CAAC,CAAa,EAAE,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC;iBAClD,CAAC,CAAgB,EAAE,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC;;QAElE,WAAW,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC;;GAE7C,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAqB,OAA4B,EAAE,GAAM,EAAE,KAAa;IACxF,IAAI,OAAO,CAAC,aAAa,EAAE,CAAC;QAC1B,OAAO,kBAAkB,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;IACjD,CAAC;IACD,OAAO,IAAI,CAAA;;QAEL,WAAW,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC;;GAE7C,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,eAAe,CAAqB,OAA4B;IAC9E,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC9B,OAAO,IAAI,CAAA;;iDAEkC,OAAO,CAAC,OAAO,CAAC,MAAM,IAAI,CAAC;;;;KAIvE,CAAC;IACJ,CAAC;IACD,OAAO,IAAI,CAAA,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,SAAS,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC;AACnF,CAAC;AAED,MAAM,UAAU,iBAAiB,CAC/B,OAAkC,EAClC,QAA8C;IAE9C,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA;;;;cAIrB,SAAS,MAAM,CAAC,KAAK,IAAI,MAAM,EAAE;kBAC7B,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;;mBAE1B,UAAU,MAAM,CAAC,IAAI,EAAE,IAAI,MAAM,CAAC,KAAK;;GAEvD,CAAC,CAAC;AACL,CAAC"}
package/dist/atoms/table/table-responsive.styles.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export declare const tableResponsiveStyles: import("lit").CSSResult;
2
+ //# sourceMappingURL=table-responsive.styles.d.ts.map
package/dist/atoms/table/table-responsive.styles.d.ts.map ADDED
@@ -0,0 +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,yBA+FjC,CAAC"}
package/dist/atoms/table/table-responsive.styles.js ADDED
@@ -0,0 +1,100 @@
1
+ import { css, unsafeCSS } from 'lit';
2
+ import { breakpoint } from '@jsekulowicz/ds-tokens';
3
+ const mobileBreakpoint = unsafeCSS(breakpoint.sm);
4
+ export const tableResponsiveStyles = css `
5
+ @container (max-width: ${mobileBreakpoint}) {
6
+ :host(:not([responsive="scroll"])) .scroll {
7
+ overflow-x: visible;
8
+ border: 0;
9
+ border-radius: 0;
10
+ background: transparent;
11
+ }
12
+
13
+ :host(:not([responsive="scroll"])) table,
14
+ :host(:not([responsive="scroll"])) tbody,
15
+ :host(:not([responsive="scroll"])) tr {
16
+ display: block;
17
+ }
18
+
19
+ :host(:not([responsive="scroll"])) table {
20
+ border-collapse: separate;
21
+ border-spacing: 0;
22
+ }
23
+
24
+ :host(:not([responsive="scroll"])) .skeleton-table {
25
+ min-width: 0;
26
+ }
27
+
28
+ :host(:not([responsive="scroll"])) caption {
29
+ display: block;
30
+ padding-inline: 0;
31
+ }
32
+
33
+ :host(:not([responsive="scroll"])) colgroup,
34
+ :host(:not([responsive="scroll"])) thead {
35
+ display: none;
36
+ }
37
+
38
+ :host(:not([responsive="scroll"])) tbody {
39
+ display: grid;
40
+ gap: var(--ds-space-3);
41
+ }
42
+
43
+ :host(:not([responsive="scroll"])) tbody tr {
44
+ overflow: hidden;
45
+ border: 1px solid var(--ds-color-border-subtle);
46
+ border-radius: var(--ds-radius-md);
47
+ background: var(--ds-color-bg);
48
+ }
49
+
50
+ :host(:not([responsive="scroll"])) tbody tr.clickable:focus-visible {
51
+ box-shadow: 0 0 0 2px var(--ds-color-focus);
52
+ }
53
+
54
+ :host(:not([responsive="scroll"])) .skeleton-table tbody tr {
55
+ display: grid;
56
+ gap: var(--ds-space-3);
57
+ padding: var(--ds-space-3);
58
+ }
59
+
60
+ :host(:not([responsive="scroll"])) tbody td {
61
+ display: grid;
62
+ grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
63
+ gap: var(--ds-space-3);
64
+ align-items: start;
65
+ min-width: 0;
66
+ overflow-wrap: anywhere;
67
+ text-align: left;
68
+ }
69
+
70
+ :host(:not([responsive="scroll"])) tbody td::before {
71
+ content: attr(data-label);
72
+ color: var(--ds-color-fg-muted);
73
+ font-weight: var(--ds-font-weight-medium);
74
+ min-width: 0;
75
+ overflow-wrap: anywhere;
76
+ }
77
+
78
+ :host(:not([responsive="scroll"])) tbody td[data-label=""],
79
+ :host(:not([responsive="scroll"])) tbody td.empty {
80
+ display: block;
81
+ }
82
+
83
+ :host(:not([responsive="scroll"])) tbody td[data-label=""]::before,
84
+ :host(:not([responsive="scroll"])) tbody td.empty::before,
85
+ :host(:not([responsive="scroll"])) .skeleton-table tbody td::before {
86
+ content: none;
87
+ }
88
+
89
+ :host(:not([responsive="scroll"])) .skeleton-table tbody td {
90
+ padding: 0;
91
+ border-bottom: 0;
92
+ background: transparent;
93
+ }
94
+
95
+ :host(:not([responsive="scroll"])) .skeleton-label {
96
+ display: block;
97
+ }
98
+ }
99
+ `;
100
+ //# sourceMappingURL=table-responsive.styles.js.map
package/dist/atoms/table/table-responsive.styles.js.map ADDED
@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8F1C,CAAC"}
package/dist/atoms/table/table-skeleton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"table-skeleton.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAkBhD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,cAAc,CA6BzF"}
1
+ {"version":3,"file":"table-skeleton.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AA4BhD,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,cAAc,CA8BzF"}
package/dist/atoms/table/table-skeleton.js CHANGED
@@ -8,10 +8,18 @@ function count(value, fallback) {
8
8
  function range(length) {
9
9
  return Array.from({ length }, (_, index) => index);
10
10
  }
11
- function cellWidth(index) {
11
+ function headerWidth(index) {
12
12
  const widths = ['70%', '52%', '62%', '44%', '58%'];
13
13
  return widths[index % widths.length] ?? '60%';
14
14
  }
15
+ function labelWidth(index) {
16
+ const widths = ['52%', '68%', '46%', '60%', '42%'];
17
+ return widths[index % widths.length] ?? '56%';
18
+ }
19
+ function valueWidth(rowIndex, columnIndex) {
20
+ const widths = ['74%', '58%', '86%', '48%', '66%', '92%', '54%'];
21
+ return widths[(rowIndex + columnIndex) % widths.length] ?? '70%';
22
+ }
15
23
  export function renderTableSkeleton(rowCount, columnCount) {
16
24
  const rows = range(count(rowCount, 5));
17
25
  const columns = range(count(columnCount, 4));
@@ -22,17 +30,18 @@ export function renderTableSkeleton(rowCount, columnCount) {
22
30
  <tr>
23
31
  ${columns.map(index => html `
24
32
  <th part="header-cell" scope="col">
25
- <ds-skeleton width=${cellWidth(index)}></ds-skeleton>
33
+ <ds-skeleton width=${headerWidth(index)}></ds-skeleton>
26
34
  </th>
27
35
  `)}
28
36
  </tr>
29
37
  </thead>
30
38
  <tbody part="tbody">
31
- ${rows.map(() => html `
39
+ ${rows.map(rowIndex => html `
32
40
  <tr part="row">
33
- ${columns.map(index => html `
41
+ ${columns.map(columnIndex => html `
34
42
  <td part="cell">
35
- <ds-skeleton width=${cellWidth(index)}></ds-skeleton>
43
+ <ds-skeleton class="skeleton-label" width=${labelWidth(columnIndex)}></ds-skeleton>
44
+ <ds-skeleton class="skeleton-value" width=${valueWidth(rowIndex, columnIndex)}></ds-skeleton>
36
45
  </td>
37
46
  `)}
38
47
  </tr>
package/dist/atoms/table/table-skeleton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"table-skeleton.js","sourceRoot":"","sources":["../../../src/atoms/table/table-skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAEhD,SAAS,KAAK,CAAC,KAAa,EAAE,QAAgB;IAC5C,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QAC5B,OAAO,QAAQ,CAAC;IAClB,CAAC;IACD,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACxC,CAAC;AAED,SAAS,KAAK,CAAC,MAAc;IAC3B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;AACrD,CAAC;AAED,SAAS,SAAS,CAAC,KAAa;IAC9B,MAAM,MAAM,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IACnD,OAAO,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC;AAChD,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,QAAgB,EAAE,WAAmB;IACvE,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;IACvC,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;IAE7C,OAAO,IAAI,CAAA;;kBAEK,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAA,OAAO,CAAC;;;YAGpC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;;mCAEF,SAAS,CAAC,KAAK,CAAC;;WAExC,CAAC;;;;UAIF,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAA;;cAEf,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;;qCAEF,SAAS,CAAC,KAAK,CAAC;;aAExC,CAAC;;SAEL,CAAC;;;GAGP,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"table-skeleton.js","sourceRoot":"","sources":["../../../src/atoms/table/table-skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAEhD,SAAS,KAAK,CAAC,KAAa,EAAE,QAAgB;IAC5C,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QAC5B,OAAO,QAAQ,CAAC;IAClB,CAAC;IACD,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AACxC,CAAC;AAED,SAAS,KAAK,CAAC,MAAc;IAC3B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;AACrD,CAAC;AAED,SAAS,WAAW,CAAC,KAAa;IAChC,MAAM,MAAM,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IACnD,OAAO,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC;AAChD,CAAC;AAED,SAAS,UAAU,CAAC,KAAa;IAC/B,MAAM,MAAM,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IACnD,OAAO,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC;AAChD,CAAC;AAED,SAAS,UAAU,CAAC,QAAgB,EAAE,WAAmB;IACvD,MAAM,MAAM,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IACjE,OAAO,MAAM,CAAC,CAAC,QAAQ,GAAG,WAAW,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC;AACnE,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,QAAgB,EAAE,WAAmB;IACvE,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;IACvC,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;IAE7C,OAAO,IAAI,CAAA;;kBAEK,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,CAAA,OAAO,CAAC;;;YAGpC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAA;;mCAEF,WAAW,CAAC,KAAK,CAAC;;WAE1C,CAAC;;;;UAIF,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAA;;cAErB,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAA;;4DAEe,UAAU,CAAC,WAAW,CAAC;4DACvB,UAAU,CAAC,QAAQ,EAAE,WAAW,CAAC;;aAEhF,CAAC;;SAEL,CAAC;;;GAGP,CAAC;AACJ,CAAC"}
package/dist/atoms/table/table.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { type TemplateResult } from 'lit';
2
2
  import { DsElement } from '@jsekulowicz/ds-core';
3
3
  import '../skeleton/define.js';
4
- import type { TableColumn, TableRow, TableSortState } from './types.js';
4
+ import type { TableColumn, TableResponsiveMode, TableRow, TableSortState } from './types.js';
5
5
  /**
6
6
  * @tag ds-table
7
7
  * @summary Data table driven by `rows` + `columns` props with optional clickable rows and header slots.
@@ -11,6 +11,7 @@ import type { TableColumn, TableRow, TableSortState } from './types.js';
11
11
  * @slot empty - Shown when `rows` is empty.
12
12
  * @slot loading - Shown inside the loading overlay when `loading` is true.
13
13
  * @slot header-{columnName} - Per-column header override (e.g. inject a ds-table-sort-button).
14
+ * @attr responsive - `stack` stacks cells on small screens; `scroll` preserves horizontal scrolling.
14
15
  * @event ds-row-click - Emitted when `clickable-rows` is set and a row is activated. Detail: `{ row, index }`.
15
16
  * @csspart table - The internal `<table>` element.
16
17
  * @csspart thead - The `<thead>` element.
@@ -36,6 +37,10 @@ export declare class DsTable<T extends TableRow = TableRow> extends DsElement {
36
37
  skeletonRows: number;
37
38
  skeletonColumns: number;
38
39
  rowKey?: string;
40
+ responsive: TableResponsiveMode;
41
+ private _hasCaption;
42
+ connectedCallback(): void;
43
+ disconnectedCallback(): void;
39
44
  render(): TemplateResult;
40
45
  }
41
46
  //# sourceMappingURL=table.d.ts.map
package/dist/atoms/table/table.d.ts.map CHANGED
@@ -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;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AASxE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,OAAO,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,CAAE,SAAQ,SAAS;;IACnE,OAAgB,MAAM,4BAAsC;IAE5B,IAAI,EAAE,SAAS,CAAC,EAAE,CAAM;IACxB,OAAO,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAM;IACxC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAQ;IACC,aAAa,UAAS;IACnD,OAAO,UAAS;IACJ,YAAY,SAAK;IACd,eAAe,SAAK;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IAqJ3C,MAAM,IAAI,cAAc;CAUlC"}
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;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAmB7F;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBAAa,OAAO,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,CAAE,SAAQ,SAAS;;IACnE,OAAgB,MAAM,4BAA6D;IAEnD,IAAI,EAAE,SAAS,CAAC,EAAE,CAAM;IACxB,OAAO,EAAE,SAAS,WAAW,CAAC,CAAC,CAAC,EAAE,CAAM;IACxC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAQ;IACC,aAAa,UAAS;IAC3C,OAAO,UAAS;IACZ,YAAY,SAAK;IACd,eAAe,SAAK;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,mBAAmB,CAAW;IAC9D,OAAO,CAAC,WAAW,CAAS;IAI5B,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IA6G5B,MAAM,IAAI,cAAc;CAUlC"}
package/dist/atoms/table/table.js CHANGED
@@ -5,18 +5,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
5
5
  return c > 3 && r && Object.defineProperty(target, key, r), r;
6
6
  };
7
7
  import { html } from 'lit';
8
- import { property } from 'lit/decorators.js';
8
+ import { property, state } from 'lit/decorators.js';
9
9
  import { ifDefined } from 'lit/directives/if-defined.js';
10
10
  import { DsElement } from '@jsekulowicz/ds-core';
11
11
  import '../skeleton/define.js';
12
12
  import { tableStyles } from './table.styles.js';
13
+ import { tableResponsiveStyles } from './table-responsive.styles.js';
13
14
  import { renderTableSkeleton } from './table-skeleton.js';
15
+ import { renderTableBody, renderTableHeader } from './table-rendering.js';
14
16
  const INTERACTIVE_TAGS = new Set([
15
17
  'a', 'button', 'input', 'select', 'textarea', 'label',
16
18
  'ds-button', 'ds-link', 'ds-checkbox', 'ds-radio', 'ds-select',
17
19
  'ds-searchable-select', 'ds-text-field', 'ds-table-sort-button',
18
20
  'ds-table-pagination',
19
21
  ]);
22
+ const FALSE_BOOLEAN_ATTRIBUTES = new Set(['false', '0']);
23
+ function parseBooleanAttribute(value) {
24
+ return value !== null && !FALSE_BOOLEAN_ATTRIBUTES.has(value.trim().toLowerCase());
25
+ }
26
+ const booleanAttributeConverter = {
27
+ fromAttribute: parseBooleanAttribute,
28
+ };
20
29
  /**
21
30
  * @tag ds-table
22
31
  * @summary Data table driven by `rows` + `columns` props with optional clickable rows and header slots.
@@ -26,6 +35,7 @@ const INTERACTIVE_TAGS = new Set([
26
35
  * @slot empty - Shown when `rows` is empty.
27
36
  * @slot loading - Shown inside the loading overlay when `loading` is true.
28
37
  * @slot header-{columnName} - Per-column header override (e.g. inject a ds-table-sort-button).
38
+ * @attr responsive - `stack` stacks cells on small screens; `scroll` preserves horizontal scrolling.
29
39
  * @event ds-row-click - Emitted when `clickable-rows` is set and a row is activated. Detail: `{ row, index }`.
30
40
  * @csspart table - The internal `<table>` element.
31
41
  * @csspart thead - The `<thead>` element.
@@ -50,6 +60,12 @@ export class DsTable extends DsElement {
50
60
  this.loading = false;
51
61
  this.skeletonRows = 5;
52
62
  this.skeletonColumns = 4;
63
+ this.responsive = 'stack';
64
+ this._hasCaption = false;
65
+ this.#captionObserver = null;
66
+ this.#syncCaptionPresence = () => {
67
+ this._hasCaption = this.querySelector('[slot="caption"]') !== null;
68
+ };
53
69
  this.#onRowClick = (event, row, index) => {
54
70
  if (this.loading) {
55
71
  return;
@@ -70,7 +86,25 @@ export class DsTable extends DsElement {
70
86
  this.emit('ds-row-click', { detail: { row, index } });
71
87
  };
72
88
  }
73
- static { this.styles = [...DsElement.styles, tableStyles]; }
89
+ static { this.styles = [...DsElement.styles, tableStyles, tableResponsiveStyles]; }
90
+ #captionObserver;
91
+ connectedCallback() {
92
+ super.connectedCallback();
93
+ this.#syncCaptionPresence();
94
+ this.#captionObserver = new MutationObserver(this.#syncCaptionPresence);
95
+ this.#captionObserver.observe(this, {
96
+ attributeFilter: ['slot'],
97
+ attributes: true,
98
+ childList: true,
99
+ subtree: true,
100
+ });
101
+ }
102
+ disconnectedCallback() {
103
+ this.#captionObserver?.disconnect();
104
+ this.#captionObserver = null;
105
+ super.disconnectedCallback();
106
+ }
107
+ #syncCaptionPresence;
74
108
  #onRowClick;
75
109
  #onRowKeydown;
76
110
  #pathHasInteractiveBeforeRow(event) {
@@ -101,71 +135,8 @@ export class DsTable extends DsElement {
101
135
  }
102
136
  return this.sortState.direction === 'asc' ? 'ascending' : 'descending';
103
137
  }
104
- #renderCell(column, row, index) {
105
- if (column.render) {
106
- return column.render(row, index);
107
- }
108
- const value = row[column.field];
109
- return value == null ? '' : String(value);
110
- }
111
- #renderHeader(column) {
112
- const align = column.align ?? 'left';
113
- return html `
114
- <th
115
- part="header-cell"
116
- scope="col"
117
- class=${`align-${align}`}
118
- aria-sort=${ifDefined(this.#ariaSort(column))}
119
- >
120
- <slot name=${`header-${column.name}`}>${column.label}</slot>
121
- </th>
122
- `;
123
- }
124
- #renderClickableRow(row, index) {
125
- return html `
126
- <tr
127
- part="row row-clickable"
128
- class="clickable"
129
- role="button"
130
- tabindex="0"
131
- @click=${(e) => this.#onRowClick(e, row, index)}
132
- @keydown=${(e) => this.#onRowKeydown(e, row, index)}
133
- >
134
- ${this.#renderCells(row, index)}
135
- </tr>
136
- `;
137
- }
138
- #renderRow(row, index) {
139
- if (this.clickableRows) {
140
- return this.#renderClickableRow(row, index);
141
- }
142
- return html `
143
- <tr part="row">
144
- ${this.#renderCells(row, index)}
145
- </tr>
146
- `;
147
- }
148
- #renderCells(row, index) {
149
- return this.columns.map(column => html `
150
- <td part="cell" class=${`align-${column.align ?? 'left'}`}>
151
- ${this.#renderCell(column, row, index)}
152
- </td>
153
- `);
154
- }
155
- #renderBody() {
156
- if (this.rows.length === 0) {
157
- return html `
158
- <tr>
159
- <td part="empty" class="empty" colspan=${this.columns.length || 1}>
160
- <slot name="empty">No data</slot>
161
- </td>
162
- </tr>
163
- `;
164
- }
165
- return html `${this.rows.map((row, i) => this.#renderRow(row, i))}`;
166
- }
167
138
  #renderLoading() {
168
- if (!this.loading || this.columns.length === 0) {
139
+ if (!this.loading || this.rows.length === 0) {
169
140
  return null;
170
141
  }
171
142
  return html `
@@ -174,18 +145,36 @@ export class DsTable extends DsElement {
174
145
  </div>
175
146
  `;
176
147
  }
148
+ #renderCaption() {
149
+ if (!this._hasCaption) {
150
+ return null;
151
+ }
152
+ return html `<caption part="caption"><slot name="caption"></slot></caption>`;
153
+ }
154
+ #skeletonColumnCount() {
155
+ return this.columns.length || this.skeletonColumns;
156
+ }
157
+ #shouldRenderSkeleton() {
158
+ return this.columns.length === 0 || (this.loading && this.rows.length === 0);
159
+ }
177
160
  #renderTable() {
178
- if (this.columns.length === 0) {
179
- return renderTableSkeleton(this.skeletonRows, this.skeletonColumns);
161
+ if (this.#shouldRenderSkeleton()) {
162
+ return renderTableSkeleton(this.skeletonRows, this.#skeletonColumnCount());
180
163
  }
181
164
  return html `
182
165
  <table part="table" aria-busy=${ifDefined(this.loading ? 'true' : undefined)}>
183
- <caption part="caption"><slot name="caption"></slot></caption>
166
+ ${this.#renderCaption()}
184
167
  <colgroup>${this.columns.map(col => html `<col style=${col.width ? `width: ${col.width}` : ''}>`)}</colgroup>
185
168
  <thead part="thead">
186
- <tr>${this.columns.map(col => this.#renderHeader(col))}</tr>
169
+ <tr>${renderTableHeader(this.columns, column => this.#ariaSort(column))}</tr>
187
170
  </thead>
188
- <tbody part="tbody">${this.#renderBody()}</tbody>
171
+ <tbody part="tbody">${renderTableBody({
172
+ rows: this.rows,
173
+ columns: this.columns,
174
+ clickableRows: this.clickableRows,
175
+ onRowClick: this.#onRowClick,
176
+ onRowKeydown: this.#onRowKeydown,
177
+ })}</tbody>
189
178
  </table>
190
179
  `;
191
180
  }
@@ -213,7 +202,7 @@ __decorate([
213
202
  property({ type: Boolean, reflect: true, attribute: 'clickable-rows' })
214
203
  ], DsTable.prototype, "clickableRows", void 0);
215
204
  __decorate([
216
- property({ type: Boolean, reflect: true })
205
+ property({ converter: booleanAttributeConverter })
217
206
  ], DsTable.prototype, "loading", void 0);
218
207
  __decorate([
219
208
  property({ type: Number, attribute: 'skeleton-rows' })
@@ -224,4 +213,10 @@ __decorate([
224
213
  __decorate([
225
214
  property({ attribute: 'row-key' })
226
215
  ], DsTable.prototype, "rowKey", void 0);
216
+ __decorate([
217
+ property({ reflect: true })
218
+ ], DsTable.prototype, "responsive", void 0);
219
+ __decorate([
220
+ state()
221
+ ], DsTable.prototype, "_hasCaption", void 0);
227
222
  //# sourceMappingURL=table.js.map
package/dist/atoms/table/table.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/atoms/table/table.ts"],"names":[],"mappings":"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"}
package/dist/atoms/table/table.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAoHvB,CAAC"}
1
+ {"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yBAwHvB,CAAC"}
package/dist/atoms/table/table.styles.js CHANGED
@@ -2,6 +2,7 @@ import { css } from 'lit';
2
2
  export const tableStyles = css `
3
3
  :host {
4
4
  display: block;
5
+ container-type: inline-size;
5
6
  width: 100%;
6
7
  color: var(--ds-color-fg);
7
8
  font-family: var(--ds-font-body);
@@ -82,6 +83,9 @@ export const tableStyles = css `
82
83
  .skeleton-table {
83
84
  min-width: 32rem;
84
85
  }
86
+ .skeleton-label {
87
+ display: none;
88
+ }
85
89
 
86
90
  .loading {
87
91
  position: absolute;
package/dist/atoms/table/table.styles.js.map CHANGED
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoH7B,CAAC"}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwH7B,CAAC"}
package/dist/atoms/table/types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { TemplateResult } from 'lit';
2
2
  export type TableColumnAlign = 'left' | 'right' | 'center';
3
+ export type TableResponsiveMode = 'stack' | 'scroll';
3
4
  export type TableSortDirection = 'asc' | 'desc' | null;
4
5
  export type TableRow = Record<string, unknown>;
5
6
  export type TableColumn<T extends TableRow = TableRow> = {
package/dist/atoms/table/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE3D,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;AAEvD,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE/C,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,IAAI;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,kBAAkB,CAAA;CAAE,CAAC;AAE7E,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,IAAI;IAC/D,GAAG,EAAE,CAAC,CAAC;IACP,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAAE,SAAS,EAAE,kBAAkB,CAAA;CAAE,CAAC;AAEhE,MAAM,MAAM,qBAAqB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvE,MAAM,MAAM,yBAAyB,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;AAEvD,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE/C,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,IAAI;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC,GAAG,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,cAAc,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,kBAAkB,CAAA;CAAE,CAAC;AAE7E,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,IAAI;IAC/D,GAAG,EAAE,CAAC,CAAC;IACP,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAAE,SAAS,EAAE,kBAAkB,CAAA;CAAE,CAAC;AAEhE,MAAM,MAAM,qBAAqB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvE,MAAM,MAAM,yBAAyB,GAAG;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jsekulowicz/ds-components",
3
- "version": "0.9.0",
3
+ "version": "0.9.2",
4
4
  "description": "Lit web components for the Design System Library (atoms, molecules, organisms, templates, pages).",
5
5
  "license": "UNLICENSED",
6
6
  "repository": {