@fusion.dev/helix-headless 0.54.0 → 0.56.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.
- package/custom-elements.json +53 -53
- package/dist/bar-chart/root/bar-chart-root.d.ts +15 -12
- package/dist/bar-chart/root/bar-chart-root.js +8 -8
- package/dist/data-table/root/data-table-root.d.ts +2 -2
- package/dist/data-table/root/data-table-root.js +1 -1
- package/dist/megamenu/root/megamenu-root.d.ts +16 -9
- package/dist/megamenu/root/megamenu-root.js +7 -7
- package/dist/table/column/table-column.d.ts +32 -24
- package/dist/table/column/table-column.js +4 -4
- package/dist/table/root/table-root.d.ts +1 -1
- package/dist/table/root/table-root.js +1 -1
- package/package.json +5 -5
- package/types/jsx.d.ts +272 -144
- package/types/vue.d.ts +84 -38
|
@@ -23,7 +23,7 @@ export declare const at: (row: Readonly<Record<string, unknown>>, path: string)
|
|
|
23
23
|
/**
|
|
24
24
|
* The edge a column names, where it names one of the three.
|
|
25
25
|
*
|
|
26
|
-
* **`align` is a string anybody can write**, the union on the property being a
|
|
26
|
+
* **`text-align` is a string anybody can write**, the union on the property being a
|
|
27
27
|
* compile-time claim and nothing else, and both tables put the value straight
|
|
28
28
|
* into CSS: `Table` into a rule in each row's shadow root, `DataTable` into the
|
|
29
29
|
* cell it draws. One guard, here with the property, rather than one in each
|
|
@@ -46,7 +46,7 @@ export declare const edgeOf: (align: string | undefined) => string | undefined;
|
|
|
46
46
|
*
|
|
47
47
|
* **It is also where every per-column fact goes**, which is the reason
|
|
48
48
|
* `DataTable` needs no column config object. `field` names the key the cell
|
|
49
|
-
* reads, `sortable` says a reader may reorder by it, `align` says which edge
|
|
49
|
+
* reads, `sortable` says a reader may reorder by it, `text-align` says which edge
|
|
50
50
|
* the values line up against, and `cell` takes a function for anything the
|
|
51
51
|
* field alone cannot express. The schema is markup and the data is a property:
|
|
52
52
|
* a schema is small, declarative, and something a reader should be able to see
|
|
@@ -96,28 +96,6 @@ export declare const edgeOf: (align: string | undefined) => string | undefined;
|
|
|
96
96
|
* @cssstate sorted-descending - While the table is sorted by this column, largest first.
|
|
97
97
|
*/
|
|
98
98
|
export declare class HelixHeadlessTableColumn extends HelixElement {
|
|
99
|
-
/**
|
|
100
|
-
* Which edge the values line up against.
|
|
101
|
-
*
|
|
102
|
-
* `end` is what a column of numbers wants, so digits of the same magnitude
|
|
103
|
-
* sit above each other. Left unset the cell inherits the table's own
|
|
104
|
-
* alignment, which is `start` for text in either writing direction.
|
|
105
|
-
* `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
|
|
106
|
-
* consumer wrote, so the table writes nothing onto them: it publishes the
|
|
107
|
-
* edge to each cell under this column as `--table-cell-align`, which
|
|
108
|
-
* `@fusion.dev/helix` reads. The heading is this element's own, and
|
|
109
|
-
* `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
|
|
110
|
-
* inline end, so in a right-to-left table it is the left.
|
|
111
|
-
*
|
|
112
|
-
* **Reflected, because the heading is drawn by a stylesheet and has no other
|
|
113
|
-
* way to learn it.** Set as a property, which is how React sets it, an
|
|
114
|
-
* unreflected `align` left no attribute to select on, so the heading stayed at
|
|
115
|
-
* the start over a column of digits set to the end. It is the author's
|
|
116
|
-
* declaration and nothing moves it afterwards, so an attribute cannot come to
|
|
117
|
-
* disagree with the element, which is the reason `open` records a custom
|
|
118
|
-
* state instead. No default, so an unset column writes nothing onto its host.
|
|
119
|
-
*/
|
|
120
|
-
align?: 'center' | 'end' | 'start';
|
|
121
99
|
/**
|
|
122
100
|
* How to read the cell, where the field alone will not do.
|
|
123
101
|
*
|
|
@@ -177,6 +155,36 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
|
|
|
177
155
|
* onto its host.
|
|
178
156
|
*/
|
|
179
157
|
sortable: boolean;
|
|
158
|
+
/**
|
|
159
|
+
* Which edge the values line up against.
|
|
160
|
+
*
|
|
161
|
+
* **Text alignment, and the name says so.** `Flex` and `Grid` ask the CSS
|
|
162
|
+
* box-alignment question, where a thing sits in a container, and they are
|
|
163
|
+
* named for the properties they mirror; this is `text-align` down a column of
|
|
164
|
+
* values, and `Dialog` answers the same question under the same name. One
|
|
165
|
+
* word for both questions is how a consumer who learned it on a layout writes
|
|
166
|
+
* it here and gets no error, a value a component does not have leaving the
|
|
167
|
+
* default in place and looking deliberate.
|
|
168
|
+
*
|
|
169
|
+
* `end` is what a column of numbers wants, so digits of the same magnitude
|
|
170
|
+
* sit above each other. Left unset the cell inherits the table's own
|
|
171
|
+
* alignment, which is `start` for text in either writing direction.
|
|
172
|
+
* `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
|
|
173
|
+
* consumer wrote, so the table writes nothing onto them: it publishes the
|
|
174
|
+
* edge to each cell under this column as `--table-cell-align`, which
|
|
175
|
+
* `@fusion.dev/helix` reads. The heading is this element's own, and
|
|
176
|
+
* `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
|
|
177
|
+
* inline end, so in a right-to-left table it is the left.
|
|
178
|
+
*
|
|
179
|
+
* **Reflected, because the heading is drawn by a stylesheet and has no other
|
|
180
|
+
* way to learn it.** Set as a property, which is how React sets it, an
|
|
181
|
+
* unreflected edge left no attribute to select on, so the heading stayed at
|
|
182
|
+
* the start over a column of digits set to the end. It is the author's
|
|
183
|
+
* declaration and nothing moves it afterwards, so an attribute cannot come to
|
|
184
|
+
* disagree with the element, which is the reason `open` records a custom
|
|
185
|
+
* state instead. No default, so an unset column writes nothing onto its host.
|
|
186
|
+
*/
|
|
187
|
+
textAlign?: 'center' | 'end' | 'start';
|
|
180
188
|
/**
|
|
181
189
|
* The track this column takes, as CSS.
|
|
182
190
|
*
|
|
@@ -137,7 +137,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
|
|
|
137
137
|
}
|
|
138
138
|
updated(changed) {
|
|
139
139
|
super.updated(changed);
|
|
140
|
-
if (changed.has('
|
|
140
|
+
if (changed.has('textAlign') || changed.has('width')) {
|
|
141
141
|
this.tellHolder();
|
|
142
142
|
}
|
|
143
143
|
}
|
|
@@ -192,9 +192,6 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
|
|
|
192
192
|
: nothing}</span>`;
|
|
193
193
|
}
|
|
194
194
|
};
|
|
195
|
-
__decorate([
|
|
196
|
-
property({ reflect: true })
|
|
197
|
-
], HelixHeadlessTableColumn.prototype, "align", void 0);
|
|
198
195
|
__decorate([
|
|
199
196
|
property({ attribute: false })
|
|
200
197
|
], HelixHeadlessTableColumn.prototype, "cell", void 0);
|
|
@@ -210,6 +207,9 @@ __decorate([
|
|
|
210
207
|
__decorate([
|
|
211
208
|
property({ reflect: true, type: Boolean })
|
|
212
209
|
], HelixHeadlessTableColumn.prototype, "sortable", void 0);
|
|
210
|
+
__decorate([
|
|
211
|
+
property({ attribute: 'text-align', reflect: true })
|
|
212
|
+
], HelixHeadlessTableColumn.prototype, "textAlign", void 0);
|
|
213
213
|
__decorate([
|
|
214
214
|
property()
|
|
215
215
|
], HelixHeadlessTableColumn.prototype, "width", void 0);
|
|
@@ -124,7 +124,7 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
|
|
|
124
124
|
protected get slotted(): Element[];
|
|
125
125
|
private assign;
|
|
126
126
|
/**
|
|
127
|
-
* The rules handing each column's `align` to the cells under it. One sheet for
|
|
127
|
+
* The rules handing each column's `text-align` to the cells under it. One sheet for
|
|
128
128
|
* every row this table holds, rewritten in place, so a column changing its
|
|
129
129
|
* edge reaches every row in one write.
|
|
130
130
|
*/
|
|
@@ -120,7 +120,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
|
|
|
120
120
|
return;
|
|
121
121
|
}
|
|
122
122
|
const rules = this.tableColumns.flatMap((column, index) => {
|
|
123
|
-
const edge = edgeOf(column.
|
|
123
|
+
const edge = edgeOf(column.textAlign);
|
|
124
124
|
return edge ? [`::slotted(:nth-child(${index + 1})) { --table-cell-align: ${edge}; }`] : [];
|
|
125
125
|
});
|
|
126
126
|
const text = ['::slotted(*) { --table-cell-align: initial; }', ...rules].join('\n');
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fusion.dev/helix-headless",
|
|
3
3
|
"description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.56.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Ross Sheppard <ross.sheppard@fusion.dev>",
|
|
7
7
|
"repository": {
|
|
@@ -46,14 +46,14 @@
|
|
|
46
46
|
},
|
|
47
47
|
"bugs": "https://github.com/project-fusion/fusion/issues",
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@fusion.dev/helix-core": "0.
|
|
50
|
-
"@fusion.dev/helix-icons": "0.
|
|
49
|
+
"@fusion.dev/helix-core": "0.56.0",
|
|
50
|
+
"@fusion.dev/helix-icons": "0.56.0",
|
|
51
51
|
"uqr": "^0.1.3"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@custom-elements-manifest/analyzer": "^0.11.0",
|
|
55
|
-
"@fusion.dev/helix-cem": "0.
|
|
56
|
-
"@fusion.dev/helix-testing": "0.
|
|
55
|
+
"@fusion.dev/helix-cem": "0.56.0",
|
|
56
|
+
"@fusion.dev/helix-testing": "0.56.0",
|
|
57
57
|
"@fusion.dev/scripts": "0.0.0-dev",
|
|
58
58
|
"@happy-dom/global-registrator": "^20.0.0",
|
|
59
59
|
"@lit-labs/ssr": "^4.1.0",
|