juxscript 1.1.313 → 1.1.315
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.
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
type GridDensity = 'dense' | 'normal' | 'inflated';
|
|
2
|
+
interface GridColumn {
|
|
3
|
+
name: string;
|
|
4
|
+
width?: string;
|
|
5
|
+
}
|
|
6
|
+
interface GridOptions {
|
|
7
|
+
rows?: number;
|
|
8
|
+
cols?: number | GridColumn[];
|
|
9
|
+
density?: GridDensity;
|
|
10
|
+
class?: string;
|
|
11
|
+
style?: string;
|
|
12
|
+
target?: string;
|
|
13
|
+
[key: string]: any;
|
|
14
|
+
}
|
|
15
|
+
declare class Grid {
|
|
16
|
+
id: string;
|
|
17
|
+
opts: GridOptions;
|
|
18
|
+
private _element;
|
|
19
|
+
private _columns;
|
|
20
|
+
constructor(id: string, options?: GridOptions);
|
|
21
|
+
getValue(): string;
|
|
22
|
+
getContent(): string;
|
|
23
|
+
setContent(val: string): this;
|
|
24
|
+
setClass(val: string): this;
|
|
25
|
+
setStyle(val: string): this;
|
|
26
|
+
setInnerHTML(val: string): this;
|
|
27
|
+
getElement(): HTMLElement;
|
|
28
|
+
/** Get a named column cell element */
|
|
29
|
+
getColumn(name: string): HTMLElement | null;
|
|
30
|
+
getColumns(): GridColumn[];
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Create a CSS grid layout container.
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* // Simple: 3 equal columns
|
|
37
|
+
* jux.grid('cards', { cols: 3 });
|
|
38
|
+
*
|
|
39
|
+
* // Named columns with custom widths
|
|
40
|
+
* jux.grid('layout', {
|
|
41
|
+
* cols: [
|
|
42
|
+
* { name: 'sidebar', width: '260px' },
|
|
43
|
+
* { name: 'content', width: '3fr' },
|
|
44
|
+
* { name: 'aside', width: '1fr' },
|
|
45
|
+
* ]
|
|
46
|
+
* });
|
|
47
|
+
* // Then target into them:
|
|
48
|
+
* jux.nav('main-nav', { target: 'sidebar' });
|
|
49
|
+
* jux.h1('title', { content: 'Hello', target: 'content' });
|
|
50
|
+
*
|
|
51
|
+
* // Density options
|
|
52
|
+
* jux.grid('tight', { cols: 4, density: 'dense' });
|
|
53
|
+
* jux.grid('spacious', { cols: 2, density: 'inflated' });
|
|
54
|
+
*/
|
|
55
|
+
export declare function grid(id: string, options?: GridOptions): Grid;
|
|
56
|
+
export { Grid, GridOptions, GridColumn, GridDensity };
|
|
57
|
+
export default grid;
|
|
58
|
+
//# sourceMappingURL=grid.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../lib/components/grid.ts"],"names":[],"mappings":"AAGA,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEnD,UAAU,UAAU;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,WAAW;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAQD,cAAM,IAAI;IACN,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,QAAQ,CAAoB;gBAExB,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAoEjD,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IAEpB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK7B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK/B,UAAU,IAAI,WAAW;IAEzB,sCAAsC;IACtC,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;IAI3C,UAAU,IAAI,UAAU,EAAE;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAIhE;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;AACtD,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import generateId from '../utils/idgen.js';
|
|
2
|
+
import { pageState } from '../state/pageState.js';
|
|
3
|
+
const DENSITY_MAP = {
|
|
4
|
+
dense: { gap: '4px', padding: '4px' },
|
|
5
|
+
normal: { gap: '12px', padding: '12px' },
|
|
6
|
+
inflated: { gap: '24px', padding: '24px' },
|
|
7
|
+
};
|
|
8
|
+
class Grid {
|
|
9
|
+
constructor(id, options = {}) {
|
|
10
|
+
this._columns = [];
|
|
11
|
+
this.id = id || generateId();
|
|
12
|
+
this.opts = {
|
|
13
|
+
cols: 2,
|
|
14
|
+
density: 'normal',
|
|
15
|
+
...options
|
|
16
|
+
};
|
|
17
|
+
this._element = document.createElement('div');
|
|
18
|
+
this._element.id = this.id;
|
|
19
|
+
if (this.opts.class)
|
|
20
|
+
this._element.className = this.opts.class;
|
|
21
|
+
// Resolve columns
|
|
22
|
+
const cols = this.opts.cols;
|
|
23
|
+
let templateCols;
|
|
24
|
+
if (Array.isArray(cols)) {
|
|
25
|
+
this._columns = cols.map(c => ({
|
|
26
|
+
name: c.name,
|
|
27
|
+
width: c.width || '1fr'
|
|
28
|
+
}));
|
|
29
|
+
templateCols = this._columns.map(c => c.width).join(' ');
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
const count = cols || 2;
|
|
33
|
+
templateCols = `repeat(${count}, 1fr)`;
|
|
34
|
+
}
|
|
35
|
+
const d = DENSITY_MAP[this.opts.density] || DENSITY_MAP.normal;
|
|
36
|
+
const parts = [
|
|
37
|
+
'display:grid',
|
|
38
|
+
`grid-template-columns:${templateCols}`,
|
|
39
|
+
`gap:${d.gap}`,
|
|
40
|
+
`padding:${d.padding}`,
|
|
41
|
+
];
|
|
42
|
+
if (this.opts.rows) {
|
|
43
|
+
parts.push(`grid-template-rows:repeat(${this.opts.rows}, auto)`);
|
|
44
|
+
}
|
|
45
|
+
if (this.opts.style)
|
|
46
|
+
parts.push(this.opts.style);
|
|
47
|
+
this._element.setAttribute('style', parts.join(';'));
|
|
48
|
+
// Extra attributes
|
|
49
|
+
for (const [key, value] of Object.entries(this.opts)) {
|
|
50
|
+
if (['rows', 'cols', 'density', 'class', 'style', 'target'].includes(key))
|
|
51
|
+
continue;
|
|
52
|
+
this._element.setAttribute(`data-${key}`, String(value));
|
|
53
|
+
}
|
|
54
|
+
// Mount
|
|
55
|
+
const resolvedTarget = this.opts.target;
|
|
56
|
+
const parent = resolvedTarget
|
|
57
|
+
? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
|
|
58
|
+
: document.getElementById('app');
|
|
59
|
+
parent?.appendChild(this._element);
|
|
60
|
+
// Create named column cells if using array cols
|
|
61
|
+
if (this._columns.length > 0) {
|
|
62
|
+
for (const col of this._columns) {
|
|
63
|
+
const cell = document.createElement('div');
|
|
64
|
+
cell.id = col.name;
|
|
65
|
+
cell.setAttribute('data-grid-col', col.name);
|
|
66
|
+
this._element.appendChild(cell);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
// ═══════════════════════════════════════════════════════════
|
|
71
|
+
// PAGESTATE INTEGRATION
|
|
72
|
+
// ═══════════════════════════════════════════════════════════
|
|
73
|
+
getValue() { return ''; }
|
|
74
|
+
getContent() { return this._element.textContent ?? ''; }
|
|
75
|
+
setContent(val) {
|
|
76
|
+
this._element.textContent = val;
|
|
77
|
+
return this;
|
|
78
|
+
}
|
|
79
|
+
setClass(val) {
|
|
80
|
+
this._element.className = val;
|
|
81
|
+
return this;
|
|
82
|
+
}
|
|
83
|
+
setStyle(val) {
|
|
84
|
+
this._element.setAttribute('style', val);
|
|
85
|
+
return this;
|
|
86
|
+
}
|
|
87
|
+
setInnerHTML(val) {
|
|
88
|
+
this._element.innerHTML = val;
|
|
89
|
+
return this;
|
|
90
|
+
}
|
|
91
|
+
getElement() { return this._element; }
|
|
92
|
+
/** Get a named column cell element */
|
|
93
|
+
getColumn(name) {
|
|
94
|
+
return this._element.querySelector(`[data-grid-col="${name}"]`);
|
|
95
|
+
}
|
|
96
|
+
getColumns() { return [...this._columns]; }
|
|
97
|
+
}
|
|
98
|
+
/**
|
|
99
|
+
* Create a CSS grid layout container.
|
|
100
|
+
*
|
|
101
|
+
* @example
|
|
102
|
+
* // Simple: 3 equal columns
|
|
103
|
+
* jux.grid('cards', { cols: 3 });
|
|
104
|
+
*
|
|
105
|
+
* // Named columns with custom widths
|
|
106
|
+
* jux.grid('layout', {
|
|
107
|
+
* cols: [
|
|
108
|
+
* { name: 'sidebar', width: '260px' },
|
|
109
|
+
* { name: 'content', width: '3fr' },
|
|
110
|
+
* { name: 'aside', width: '1fr' },
|
|
111
|
+
* ]
|
|
112
|
+
* });
|
|
113
|
+
* // Then target into them:
|
|
114
|
+
* jux.nav('main-nav', { target: 'sidebar' });
|
|
115
|
+
* jux.h1('title', { content: 'Hello', target: 'content' });
|
|
116
|
+
*
|
|
117
|
+
* // Density options
|
|
118
|
+
* jux.grid('tight', { cols: 4, density: 'dense' });
|
|
119
|
+
* jux.grid('spacious', { cols: 2, density: 'inflated' });
|
|
120
|
+
*/
|
|
121
|
+
export function grid(id, options = {}) {
|
|
122
|
+
const g = new Grid(id, options);
|
|
123
|
+
pageState.__register(g);
|
|
124
|
+
return g;
|
|
125
|
+
}
|
|
126
|
+
export { Grid };
|
|
127
|
+
export default grid;
|
package/dist/lib/index.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ import { tabs } from "./components/tabs.js";
|
|
|
16
16
|
import { button, btn } from "./components/button.js";
|
|
17
17
|
import { link, a } from "./components/link.js";
|
|
18
18
|
import { container } from "./components/container.js";
|
|
19
|
+
import { grid } from "./components/grid.js";
|
|
19
20
|
export declare const jux: {
|
|
20
21
|
tag: typeof tag;
|
|
21
22
|
div: typeof div;
|
|
@@ -61,6 +62,7 @@ export declare const jux: {
|
|
|
61
62
|
link: typeof link;
|
|
62
63
|
a: typeof a;
|
|
63
64
|
container: typeof container;
|
|
65
|
+
grid: typeof grid;
|
|
64
66
|
};
|
|
65
67
|
export { pageState };
|
|
66
68
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/lib/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC3I,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC3I,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
package/dist/lib/index.js
CHANGED
|
@@ -16,6 +16,7 @@ import { tabs } from "./components/tabs.js";
|
|
|
16
16
|
import { button, btn } from "./components/button.js";
|
|
17
17
|
import { link, a } from "./components/link.js";
|
|
18
18
|
import { container } from "./components/container.js";
|
|
19
|
+
import { grid } from "./components/grid.js";
|
|
19
20
|
export const jux = {
|
|
20
21
|
tag,
|
|
21
22
|
div,
|
|
@@ -55,7 +56,8 @@ export const jux = {
|
|
|
55
56
|
btn,
|
|
56
57
|
link,
|
|
57
58
|
a,
|
|
58
|
-
container
|
|
59
|
+
container,
|
|
60
|
+
grid
|
|
59
61
|
};
|
|
60
62
|
export { pageState };
|
|
61
63
|
jux.watch = pageState.__watch;
|