vira 25.13.1 → 25.14.0

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 (5) hide show
  1. package/dist/elements/table/create-table.d.ts +26 -21
  2. package/dist/elements/table/create-table.js +4 -4
  3. package/dist/elements/table/vira-table.element.d.ts +14 -7
  4. package/dist/elements/table/vira-table.element.js +115 -59
  5. package/package.json +7 -7
package/dist/elements/table/create-table.d.ts CHANGED
@@ -5,48 +5,53 @@ import { type HtmlInterpolation } from 'element-vir';
5
5
  *
6
6
  * @category Internal
7
7
  */
8
- export type ViraTableCell<Columns extends ViraTableColumns | undefined = undefined> = undefined extends Columns ? Record<PropertyKey, HtmlInterpolation> : Record<ArrayElement<Exclude<Columns, undefined>>['key'], HtmlInterpolation>;
8
+ export type ViraTableCells<Keys extends ViraTableKeys | undefined = undefined> = undefined extends Keys ? Record<PropertyKey, HtmlInterpolation> : Record<ArrayElement<Exclude<Keys, undefined>>['key'], HtmlInterpolation>;
9
9
  /**
10
- * An individual column definition in {@link ViraTableColumns}.
10
+ * An individual key definition in {@link ViraTableKeys}. In default table orientation, this will
11
+ * define each column's key. In horizontal orientation, this will define each row's key.
11
12
  *
12
13
  * @category Internal
13
14
  */
14
- export type ViraTableColumn = Readonly<{
15
- /** The key that cells must use to set a value for this column. */
15
+ export type ViraTableKey = Readonly<{
16
+ /** The key that cells must set a value to. */
16
17
  key: PropertyKey;
17
18
  } & PartialWithUndefined<{
18
19
  /**
19
- * This will be displayed in the header for this column. If no `label` is provided, the
20
- * `key` will be used.
20
+ * This will be displayed in the header for this key. If no `label` is provided, the `key`
21
+ * will be used.
21
22
  */
22
23
  label: HtmlInterpolation;
23
- /** If set to `true`, this column will not be rendered. */
24
+ /** If set to `true`, all cells for this key will not be rendered. */
24
25
  hide: boolean;
25
- /** If true, this column is a header column, so all cells in it will be rendered as headers. */
26
+ /** In horizontal table orientation, this prevents this key's row from being clicked. */
27
+ disabled: boolean;
28
+ /** If true, will be rendered as headers. */
26
29
  isHeader: boolean;
27
30
  }>>;
28
31
  /**
29
- * A column definition for {@link ViraTableSetup}.
32
+ * All key definitions for a {@link ViraTableSetup} instance. In default table orientation, these
33
+ * will define each column. In horizontal orientation, this will define each row header.
30
34
  *
31
35
  * @category Internal
32
36
  */
33
- export type ViraTableColumns = ReadonlyArray<ViraTableColumn>;
37
+ export type ViraTableKeys = ReadonlyArray<ViraTableKey>;
34
38
  /**
35
- * An individual row in {@link ViraTableSetup}.
39
+ * An individual entry in {@link ViraTableSetup}. In default table orientation, this will be a row.
40
+ * In horizontal orientation, this will be a column.
36
41
  *
37
42
  * @category Internal
38
43
  */
39
- export type ViraTableRow<Columns extends ViraTableColumns | undefined = undefined> = {
40
- cells: ViraTableCell<Columns>;
44
+ export type ViraTableEntry<Keys extends ViraTableKeys | undefined = undefined> = {
45
+ cells: ViraTableCells<Keys>;
41
46
  } & PartialWithUndefined<{
42
47
  /**
43
- * If `true`, no actions will be fired from this row (like row clicks). No disable styles are
48
+ * If `true`, no actions will be fired from this entry (like clicks). No disable styles are
44
49
  * applied.
45
50
  *
46
51
  * @default false
47
52
  */
48
53
  disabled: boolean;
49
- /** Optional: keep track of which row is which by attaching an id to it. */
54
+ /** Optional: keep track of which entry is which by attaching an id to it. */
50
55
  id: PropertyKey;
51
56
  }>;
52
57
  /**
@@ -55,15 +60,15 @@ export type ViraTableRow<Columns extends ViraTableColumns | undefined = undefine
55
60
  * @category Internal
56
61
  */
57
62
  export type ViraTableSetup = Readonly<{
58
- /** The order of these columns determines the order that they render in. */
59
- columns: ViraTableColumns;
60
- rows: ReadonlyArray<Readonly<ViraTableRow>>;
63
+ /** The order of these keys determines the order that they render in. */
64
+ keys: ViraTableKeys;
65
+ entries: ReadonlyArray<Readonly<ViraTableEntry>>;
61
66
  }>;
62
67
  /**
63
68
  * Create a type-safe {@link ViraTableSetup} object to be used with the `ViraTable` element.
64
69
  *
65
70
  * @category Internal
66
71
  */
67
- export declare function createTable<const Columns extends ViraTableColumns>(
68
- /** The order of these columns determines the order that they render in. */
69
- columns: Readonly<Columns>, rows: ReadonlyArray<Readonly<ViraTableRow<Columns>>>): ViraTableSetup;
72
+ export declare function createTable<const Keys extends ViraTableKeys>(
73
+ /** The order of these keys determines the order that they render in. */
74
+ keys: Readonly<Keys>, entries: ReadonlyArray<Readonly<ViraTableEntry<Keys>>>): ViraTableSetup;
package/dist/elements/table/create-table.js CHANGED
@@ -4,10 +4,10 @@
4
4
  * @category Internal
5
5
  */
6
6
  export function createTable(
7
- /** The order of these columns determines the order that they render in. */
8
- columns, rows) {
7
+ /** The order of these keys determines the order that they render in. */
8
+ keys, entries) {
9
9
  return {
10
- columns,
11
- rows,
10
+ keys,
11
+ entries,
12
12
  };
13
13
  }
package/dist/elements/table/vira-table.element.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { type PartialWithUndefined } from '@augment-vir/common';
2
2
  import { type AttributeValues, type CSSResult } from 'element-vir';
3
- import { type ViraTableRow, type ViraTableSetup } from './create-table.js';
3
+ import { type ViraTableEntry, type ViraTableSetup } from './create-table.js';
4
4
  /**
5
5
  * Element tagnames that have passthroughs setup for them in {@link ViraTable}.
6
6
  *
@@ -22,11 +22,17 @@ export declare const ViraTable: import("element-vir").DeclarativeElementDefiniti
22
22
  table: ViraTableSetup;
23
23
  } & PartialWithUndefined<{
24
24
  /**
25
- * Block all rows from being clickable.
25
+ * Key headers are rendered on the left, rows become columns.
26
26
  *
27
27
  * @default false
28
28
  */
29
- preventRowClicks: boolean;
29
+ horizontalOrientation: boolean;
30
+ /**
31
+ * Allow all rows to be clickable. Each row can override this for itself.
32
+ *
33
+ * @default false
34
+ */
35
+ allowRowClicks: boolean;
30
36
  /**
31
37
  * Block the sticky table header.
32
38
  *
@@ -34,13 +40,14 @@ export declare const ViraTable: import("element-vir").DeclarativeElementDefiniti
34
40
  */
35
41
  preventStickyHeader: boolean;
36
42
  /**
37
- * Hide header row entirely.
43
+ * Hide header row (in default orientation) or column (in horizontal orientation)
44
+ * entirely.
38
45
  *
39
46
  * @default false
40
47
  */
41
- hideHeaderRow: boolean;
48
+ hideKeyHeaders: boolean;
42
49
  /**
43
- * Pixel value of the header row sticky offset.
50
+ * Pixel value of the header's sticky offset.
44
51
  *
45
52
  * @default 0
46
53
  */
@@ -51,7 +58,7 @@ export declare const ViraTable: import("element-vir").DeclarativeElementDefiniti
51
58
  stylePassthrough: Readonly<PartialWithUndefined<Record<ViraTableElementsForPassthrough, CSSResult>>>;
52
59
  }>>, {}, {
53
60
  rowClick: import("element-vir").DefineEvent<{
54
- row: ViraTableRow;
61
+ entry: ViraTableEntry;
55
62
  originalEvent: MouseEvent;
56
63
  }>;
57
64
  }, "vira-table-", "vira-table-", readonly []>;
package/dist/elements/table/vira-table.element.js CHANGED
@@ -54,65 +54,117 @@ export const ViraTable = defineViraElement()({
54
54
  rowClick: defineElementEvent(),
55
55
  },
56
56
  render({ inputs, events, dispatch }) {
57
- const rows = inputs.table.rows.map((row) => {
58
- const cells = inputs.table.columns.map((column) => {
59
- if (column.hide) {
57
+ const rowTemplates = inputs.horizontalOrientation
58
+ ? inputs.table.keys.map((key) => {
59
+ if (key.hide) {
60
60
  return nothing;
61
61
  }
62
- const cellElement = column.isHeader ? 'th' : 'td';
62
+ const cells = inputs.table.entries.map((entry) => {
63
+ const cellElement = key.isHeader ? 'th' : 'td';
64
+ return html `
65
+ <${cellElement}
66
+ ${listen('click', (event) => {
67
+ if (isClickable) {
68
+ dispatch(new events.rowClick({ originalEvent: event, entry: entry }));
69
+ }
70
+ })}
71
+ ${key.isHeader
72
+ ? inputs.attributePassthrough?.th
73
+ ? attributes(inputs.attributePassthrough.th)
74
+ : nothing
75
+ : inputs.attributePassthrough?.td
76
+ ? attributes(inputs.attributePassthrough.td)
77
+ : nothing}
78
+ style=${key.isHeader
79
+ ? ifDefined(inputs.stylePassthrough?.th)
80
+ : ifDefined(inputs.stylePassthrough?.td)}
81
+ >
82
+ ${entry.cells[key.key]}
83
+ </${cellElement}>
84
+ `;
85
+ });
86
+ const isClickable = !!inputs.allowRowClicks && !key.disabled;
63
87
  return html `
64
- <${cellElement}
65
- ${column.isHeader
66
- ? inputs.attributePassthrough?.th
67
- ? attributes(inputs.attributePassthrough.th)
68
- : nothing
69
- : inputs.attributePassthrough?.td
70
- ? attributes(inputs.attributePassthrough.td)
71
- : nothing}
72
- style=${column.isHeader
73
- ? ifDefined(inputs.stylePassthrough?.th)
74
- : ifDefined(inputs.stylePassthrough?.td)}
75
- >
76
- ${row.cells[column.key]}
77
- </${cellElement}>
78
- `;
88
+ <tr
89
+ class=${classMap({
90
+ clickable: isClickable,
91
+ })}
92
+ ${inputs.attributePassthrough?.tr
93
+ ? attributes(inputs.attributePassthrough.tr)
94
+ : nothing}
95
+ style=${ifDefined(inputs.stylePassthrough?.tr)}
96
+ >
97
+ <th
98
+ ${inputs.attributePassthrough?.th
99
+ ? attributes(inputs.attributePassthrough.th)
100
+ : nothing}
101
+ style=${ifDefined(inputs.stylePassthrough?.th)}
102
+ >
103
+ ${key.label}
104
+ </th>
105
+ ${cells}
106
+ </tr>
107
+ `;
108
+ })
109
+ : inputs.table.entries.map((entry) => {
110
+ const cells = inputs.table.keys.map((key) => {
111
+ if (key.hide) {
112
+ return nothing;
113
+ }
114
+ const cellElement = key.isHeader ? 'th' : 'td';
115
+ return html `
116
+ <${cellElement}
117
+ ${key.isHeader
118
+ ? inputs.attributePassthrough?.th
119
+ ? attributes(inputs.attributePassthrough.th)
120
+ : nothing
121
+ : inputs.attributePassthrough?.td
122
+ ? attributes(inputs.attributePassthrough.td)
123
+ : nothing}
124
+ style=${key.isHeader
125
+ ? ifDefined(inputs.stylePassthrough?.th)
126
+ : ifDefined(inputs.stylePassthrough?.td)}
127
+ >
128
+ ${entry.cells[key.key]}
129
+ </${cellElement}>
130
+ `;
131
+ });
132
+ const isClickable = !!inputs.allowRowClicks && !entry.disabled;
133
+ return html `
134
+ <tr
135
+ class=${classMap({
136
+ clickable: isClickable,
137
+ })}
138
+ ${inputs.attributePassthrough?.tr
139
+ ? attributes(inputs.attributePassthrough.tr)
140
+ : nothing}
141
+ style=${ifDefined(inputs.stylePassthrough?.tr)}
142
+ ${listen('click', (event) => {
143
+ if (isClickable) {
144
+ dispatch(new events.rowClick({ originalEvent: event, entry: entry }));
145
+ }
146
+ })}
147
+ >
148
+ ${cells}
149
+ </tr>
150
+ `;
79
151
  });
80
- const isClickable = !inputs.preventRowClicks && !row.disabled;
81
- return html `
82
- <tr
83
- class=${classMap({
84
- clickable: isClickable,
85
- })}
86
- ${inputs.attributePassthrough?.tr
87
- ? attributes(inputs.attributePassthrough.tr)
88
- : nothing}
89
- style=${ifDefined(inputs.stylePassthrough?.tr)}
90
- ${listen('click', (event) => {
91
- if (isClickable) {
92
- dispatch(new events.rowClick({ originalEvent: event, row }));
93
- }
94
- })}
95
- >
96
- ${cells}
97
- </tr>
98
- `;
99
- });
100
- const headerCells = inputs.hideHeaderRow
152
+ const headerCells = inputs.hideKeyHeaders || inputs.horizontalOrientation
101
153
  ? undefined
102
- : inputs.table.columns.map((column) => {
103
- if (column.hide) {
154
+ : inputs.table.keys.map((key) => {
155
+ if (key.hide) {
104
156
  return nothing;
105
157
  }
106
158
  return html `
107
- <th
108
- ${inputs.attributePassthrough?.th
159
+ <th
160
+ ${inputs.attributePassthrough?.th
109
161
  ? attributes(inputs.attributePassthrough.th)
110
162
  : nothing}
111
- style=${ifDefined(inputs.stylePassthrough?.th)}
112
- >
113
- ${column.label}
114
- </th>
115
- `;
163
+ style=${ifDefined(inputs.stylePassthrough?.th)}
164
+ >
165
+ ${key.label}
166
+ </th>
167
+ `;
116
168
  });
117
169
  const headerRow = headerCells
118
170
  ? html `
@@ -125,11 +177,11 @@ export const ViraTable = defineViraElement()({
125
177
  ${headerCells}
126
178
  </tr>
127
179
  `
128
- : nothing;
180
+ : undefined;
129
181
  const theadStyles = css `
130
182
  ${inputs.stylePassthrough?.thead || css ``}
131
183
  top: ${inputs.stickyOffset || 0}px;
132
- ${inputs.preventStickyHeader || inputs.hideHeaderRow
184
+ ${inputs.preventStickyHeader || inputs.hideKeyHeaders
133
185
  ? css ``
134
186
  : css `
135
187
  position: sticky;
@@ -142,21 +194,25 @@ export const ViraTable = defineViraElement()({
142
194
  : nothing}
143
195
  style=${ifDefined(inputs.stylePassthrough?.table)}
144
196
  >
145
- <thead
146
- ${inputs.attributePassthrough?.thead
147
- ? attributes(inputs.attributePassthrough.thead)
197
+ ${headerRow
198
+ ? html `
199
+ <thead
200
+ ${inputs.attributePassthrough?.thead
201
+ ? attributes(inputs.attributePassthrough.thead)
202
+ : nothing}
203
+ style=${theadStyles}
204
+ >
205
+ ${headerRow}
206
+ </thead>
207
+ `
148
208
  : nothing}
149
- style=${theadStyles}
150
- >
151
- ${headerRow}
152
- </thead>
153
209
  <tbody
154
210
  ${inputs.attributePassthrough?.tbody
155
211
  ? attributes(inputs.attributePassthrough.tbody)
156
212
  : nothing}
157
213
  style=${ifDefined(inputs.stylePassthrough?.tbody)}
158
214
  >
159
- ${rows}
215
+ ${rowTemplates}
160
216
  </tbody>
161
217
  </table>
162
218
  `;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vira",
3
- "version": "25.13.1",
3
+ "version": "25.14.0",
4
4
  "description": "A simple and highly versatile design system using element-vir.",
5
5
  "keywords": [
6
6
  "design",
@@ -38,21 +38,21 @@
38
38
  "test:docs": "virmator docs check"
39
39
  },
40
40
  "dependencies": {
41
- "@augment-vir/assert": "^31.21.1",
42
- "@augment-vir/common": "^31.21.1",
43
- "@augment-vir/web": "^31.21.1",
41
+ "@augment-vir/assert": "^31.23.3",
42
+ "@augment-vir/common": "^31.23.3",
43
+ "@augment-vir/web": "^31.23.3",
44
44
  "colorjs.io": "^0.5.2",
45
45
  "date-vir": "^7.3.1",
46
46
  "device-navigation": "^4.5.5",
47
47
  "lit-css-vars": "^3.0.11",
48
48
  "observavir": "^2.0.5",
49
49
  "page-active": "^1.0.1",
50
- "spa-router-vir": "^5.5.0",
50
+ "spa-router-vir": "^6.0.0",
51
51
  "type-fest": "^4.41.0",
52
52
  "typed-event-target": "^4.1.0"
53
53
  },
54
54
  "devDependencies": {
55
- "@augment-vir/test": "^31.21.1",
55
+ "@augment-vir/test": "^31.23.3",
56
56
  "@web/dev-server-esbuild": "^1.0.4",
57
57
  "@web/test-runner": "^0.20.2",
58
58
  "@web/test-runner-commands": "^0.9.0",
@@ -67,7 +67,7 @@
67
67
  "vite-tsconfig-paths": "^5.1.4"
68
68
  },
69
69
  "peerDependencies": {
70
- "element-vir": "^25.13.1"
70
+ "element-vir": "^25.14.0"
71
71
  },
72
72
  "engines": {
73
73
  "node": ">=22"