juxscript 1.0.123 → 1.0.125
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.
|
@@ -7,7 +7,6 @@ export type GridComponent = GridEngine & {
|
|
|
7
7
|
gap: (gap: string) => GridComponent;
|
|
8
8
|
width: (width: string) => GridComponent;
|
|
9
9
|
height: (height: string) => GridComponent;
|
|
10
|
-
gridder: (active?: boolean) => GridComponent;
|
|
11
10
|
getCellId: (row: number, col: number) => string;
|
|
12
11
|
};
|
|
13
12
|
export declare function Grid(id: string, options?: GridOptions): GridComponent;
|
|
@@ -15,38 +15,28 @@ export class GridSkin extends BaseSkin {
|
|
|
15
15
|
return structureCss;
|
|
16
16
|
}
|
|
17
17
|
bindEvents(root) {
|
|
18
|
-
root.addEventListener('click', (e) => {
|
|
19
|
-
if (this.engine.state.gridder) {
|
|
20
|
-
const cell = e.target.closest('.jux-grid-cell');
|
|
21
|
-
if (cell && cell.id) {
|
|
22
|
-
console.log(`[Ordinal Grid] Targeted Cell: #${cell.id}`);
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
});
|
|
26
18
|
}
|
|
27
19
|
updateSkin(state) {
|
|
28
20
|
if (!this.root)
|
|
29
21
|
return;
|
|
30
22
|
this.applySkinAttributes(this.root, state);
|
|
23
|
+
// 0. Ensure standard ID is set
|
|
24
|
+
this.root.id = state.id;
|
|
31
25
|
this.root.className = state.classes.join(' ');
|
|
32
26
|
// 1. Container Styles
|
|
33
27
|
this.root.style.width = state.width;
|
|
34
28
|
this.root.style.height = state.height;
|
|
35
29
|
this.root.style.gap = state.gap;
|
|
36
30
|
// CSS Grid Definitions
|
|
37
|
-
|
|
38
|
-
|
|
31
|
+
// We accept 'size', but also semantically valid 'height' (rows) and 'width' (cols)
|
|
32
|
+
// This allows mixing units: 1fr, 200px, auto, etc.
|
|
33
|
+
const rowSizes = state.rows.map(r => r.size || r.height || 'auto').join(' ');
|
|
34
|
+
const colSizes = state.columns.map(c => c.size || c.width || 'auto').join(' ');
|
|
39
35
|
this.root.style.gridTemplateRows = rowSizes;
|
|
40
36
|
this.root.style.gridTemplateColumns = colSizes;
|
|
41
|
-
// Toggle Debug Class
|
|
42
|
-
if (state.gridder) {
|
|
43
|
-
this.root.classList.add('jux-gridder-active');
|
|
44
|
-
}
|
|
45
|
-
else {
|
|
46
|
-
this.root.classList.remove('jux-gridder-active');
|
|
47
|
-
}
|
|
48
37
|
// 2. Structural Reconciliation
|
|
49
38
|
const validIds = new Set();
|
|
39
|
+
// create cells
|
|
50
40
|
state.rows.forEach((rowConfig, rIndex) => {
|
|
51
41
|
state.columns.forEach((colConfig, cIndex) => {
|
|
52
42
|
const cellId = `${state.id}-${rIndex}-${cIndex}`;
|