@hypen-space/web 0.4.35 → 0.4.37
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/dist/canvas/accessibility.js +174 -174
- package/dist/canvas/accessibility.js.map +1 -10
- package/dist/canvas/events.js +264 -360
- package/dist/canvas/events.js.map +1 -11
- package/dist/canvas/index.js +11 -47
- package/dist/canvas/index.js.map +1 -9
- package/dist/canvas/input.js +178 -289
- package/dist/canvas/input.js.map +1 -11
- package/dist/canvas/layout.js +349 -547
- package/dist/canvas/layout.js.map +1 -12
- package/dist/canvas/paint.js +1122 -1146
- package/dist/canvas/paint.js.map +1 -12
- package/dist/canvas/renderer.js +352 -2259
- package/dist/canvas/renderer.js.map +1 -17
- package/dist/canvas/text.js +129 -264
- package/dist/canvas/text.js.map +1 -11
- package/dist/canvas/types.js +7 -2
- package/dist/canvas/types.js.map +1 -9
- package/dist/canvas/utils.js +158 -161
- package/dist/canvas/utils.js.map +1 -10
- package/dist/client.js +19 -45
- package/dist/client.js.map +1 -9
- package/dist/dom/applicators/advanced-layout.js +105 -138
- package/dist/dom/applicators/advanced-layout.js.map +1 -10
- package/dist/dom/applicators/background.js +36 -76
- package/dist/dom/applicators/background.js.map +1 -10
- package/dist/dom/applicators/border.js +82 -106
- package/dist/dom/applicators/border.js.map +1 -10
- package/dist/dom/applicators/color.js +17 -58
- package/dist/dom/applicators/color.js.map +1 -10
- package/dist/dom/applicators/display.js +39 -79
- package/dist/dom/applicators/display.js.map +1 -10
- package/dist/dom/applicators/effects.js +121 -147
- package/dist/dom/applicators/effects.js.map +1 -10
- package/dist/dom/applicators/events.js +413 -450
- package/dist/dom/applicators/events.js.map +1 -11
- package/dist/dom/applicators/font.js +119 -140
- package/dist/dom/applicators/font.js.map +1 -10
- package/dist/dom/applicators/index.js +386 -1770
- package/dist/dom/applicators/index.js.map +1 -26
- package/dist/dom/applicators/layout.js +143 -149
- package/dist/dom/applicators/layout.js.map +1 -10
- package/dist/dom/applicators/margin.js +64 -105
- package/dist/dom/applicators/margin.js.map +1 -10
- package/dist/dom/applicators/padding.js +64 -105
- package/dist/dom/applicators/padding.js.map +1 -10
- package/dist/dom/applicators/size.js +169 -172
- package/dist/dom/applicators/size.js.map +1 -10
- package/dist/dom/applicators/transform.js +73 -114
- package/dist/dom/applicators/transform.js.map +1 -10
- package/dist/dom/applicators/transition.js +47 -88
- package/dist/dom/applicators/transition.js.map +1 -10
- package/dist/dom/applicators/types.js +7 -2
- package/dist/dom/applicators/types.js.map +1 -9
- package/dist/dom/applicators/typography.js +68 -109
- package/dist/dom/applicators/typography.js.map +1 -10
- package/dist/dom/canvas/index.js +49 -83
- package/dist/dom/canvas/index.js.map +1 -10
- package/dist/dom/components/app.js +16 -63
- package/dist/dom/components/app.js.map +1 -10
- package/dist/dom/components/audio.js +31 -76
- package/dist/dom/components/audio.js.map +1 -10
- package/dist/dom/components/avatar.js +41 -87
- package/dist/dom/components/avatar.js.map +1 -10
- package/dist/dom/components/badge.js +35 -83
- package/dist/dom/components/badge.js.map +1 -10
- package/dist/dom/components/button.js +26 -69
- package/dist/dom/components/button.js.map +1 -10
- package/dist/dom/components/card.js +13 -63
- package/dist/dom/components/card.js.map +1 -10
- package/dist/dom/components/center.js +21 -65
- package/dist/dom/components/center.js.map +1 -10
- package/dist/dom/components/checkbox.js +37 -82
- package/dist/dom/components/checkbox.js.map +1 -10
- package/dist/dom/components/column.js +16 -62
- package/dist/dom/components/column.js.map +1 -10
- package/dist/dom/components/container.js +11 -59
- package/dist/dom/components/container.js.map +1 -10
- package/dist/dom/components/divider.js +27 -73
- package/dist/dom/components/divider.js.map +1 -10
- package/dist/dom/components/grid.js +41 -80
- package/dist/dom/components/grid.js.map +1 -10
- package/dist/dom/components/heading.js +28 -74
- package/dist/dom/components/heading.js.map +1 -10
- package/dist/dom/components/hypenapp.js +291 -288
- package/dist/dom/components/hypenapp.js.map +1 -10
- package/dist/dom/components/image.js +18 -67
- package/dist/dom/components/image.js.map +1 -10
- package/dist/dom/components/index.js +109 -1427
- package/dist/dom/components/index.js.map +1 -42
- package/dist/dom/components/input.js +19 -69
- package/dist/dom/components/input.js.map +1 -10
- package/dist/dom/components/link.js +23 -70
- package/dist/dom/components/link.js.map +1 -10
- package/dist/dom/components/list.js +26 -72
- package/dist/dom/components/list.js.map +1 -10
- package/dist/dom/components/paragraph.js +14 -63
- package/dist/dom/components/paragraph.js.map +1 -10
- package/dist/dom/components/progressbar.js +38 -85
- package/dist/dom/components/progressbar.js.map +1 -10
- package/dist/dom/components/route.js +27 -73
- package/dist/dom/components/route.js.map +1 -10
- package/dist/dom/components/router.js +15 -62
- package/dist/dom/components/router.js.map +1 -10
- package/dist/dom/components/row.js +25 -70
- package/dist/dom/components/row.js.map +1 -10
- package/dist/dom/components/select.js +42 -85
- package/dist/dom/components/select.js.map +1 -10
- package/dist/dom/components/slider.js +31 -76
- package/dist/dom/components/slider.js.map +1 -10
- package/dist/dom/components/spacer.js +10 -60
- package/dist/dom/components/spacer.js.map +1 -10
- package/dist/dom/components/spinner.js +41 -88
- package/dist/dom/components/spinner.js.map +1 -10
- package/dist/dom/components/stack.js +19 -67
- package/dist/dom/components/stack.js.map +1 -10
- package/dist/dom/components/switch.js +50 -93
- package/dist/dom/components/switch.js.map +1 -10
- package/dist/dom/components/text.js +24 -69
- package/dist/dom/components/text.js.map +1 -10
- package/dist/dom/components/textarea.js +35 -79
- package/dist/dom/components/textarea.js.map +1 -10
- package/dist/dom/components/video.js +35 -79
- package/dist/dom/components/video.js.map +1 -10
- package/dist/dom/debug.js +159 -160
- package/dist/dom/debug.js.map +1 -10
- package/dist/dom/element-data.js +181 -143
- package/dist/dom/element-data.js.map +1 -10
- package/dist/dom/events.js +133 -142
- package/dist/dom/events.js.map +1 -10
- package/dist/dom/index.js +11 -48
- package/dist/dom/index.js.map +1 -9
- package/dist/dom/renderer.js +311 -3596
- package/dist/dom/renderer.js.map +1 -62
- package/dist/hypen.js +385 -3880
- package/dist/hypen.js.map +1 -63
- package/dist/index.js +36 -53
- package/dist/index.js.map +1 -9
- package/package.json +2 -2
|
@@ -1,67 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
function __accessProp(key) {
|
|
6
|
-
return this[key];
|
|
7
|
-
}
|
|
8
|
-
var __toCommonJS = (from) => {
|
|
9
|
-
var entry = (__moduleCache ??= new WeakMap).get(from), desc;
|
|
10
|
-
if (entry)
|
|
11
|
-
return entry;
|
|
12
|
-
entry = __defProp({}, "__esModule", { value: true });
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (var key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(entry, key))
|
|
16
|
-
__defProp(entry, key, {
|
|
17
|
-
get: __accessProp.bind(from, key),
|
|
18
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
__moduleCache.set(from, entry);
|
|
22
|
-
return entry;
|
|
23
|
-
};
|
|
24
|
-
var __moduleCache;
|
|
25
|
-
var __returnValue = (v) => v;
|
|
26
|
-
function __exportSetter(name, newValue) {
|
|
27
|
-
this[name] = __returnValue.bind(null, newValue);
|
|
28
|
-
}
|
|
29
|
-
var __export = (target, all) => {
|
|
30
|
-
for (var name in all)
|
|
31
|
-
__defProp(target, name, {
|
|
32
|
-
get: all[name],
|
|
33
|
-
enumerable: true,
|
|
34
|
-
configurable: true,
|
|
35
|
-
set: __exportSetter.bind(all, name)
|
|
36
|
-
});
|
|
37
|
-
};
|
|
38
|
-
var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
|
|
39
|
-
|
|
40
|
-
// src/dom/components/paragraph.ts
|
|
41
|
-
var exports_paragraph = {};
|
|
42
|
-
__export(exports_paragraph, {
|
|
43
|
-
paragraphHandler: () => paragraphHandler
|
|
44
|
-
});
|
|
45
|
-
var paragraphHandler;
|
|
46
|
-
var init_paragraph = __esm(() => {
|
|
47
|
-
paragraphHandler = {
|
|
1
|
+
/**
|
|
2
|
+
* Paragraph Component
|
|
3
|
+
*/
|
|
4
|
+
export const paragraphHandler = {
|
|
48
5
|
create() {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
6
|
+
const el = document.createElement("p");
|
|
7
|
+
el.dataset.hypenType = "paragraph";
|
|
8
|
+
return el;
|
|
52
9
|
},
|
|
53
10
|
applyProps(el, props) {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
});
|
|
61
|
-
init_paragraph();
|
|
62
|
-
|
|
63
|
-
export {
|
|
64
|
-
paragraphHandler
|
|
11
|
+
// Text content
|
|
12
|
+
const text = props["0"] || props.text;
|
|
13
|
+
if (text !== undefined) {
|
|
14
|
+
el.textContent = String(text);
|
|
15
|
+
}
|
|
16
|
+
},
|
|
65
17
|
};
|
|
66
|
-
|
|
67
|
-
//# debugId=9B24C7A5A23D8D9464756E2164756E21
|
|
18
|
+
//# sourceMappingURL=paragraph.js.map
|
|
@@ -1,10 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/dom/components/paragraph.ts"],
|
|
4
|
-
"sourcesContent": [
|
|
5
|
-
"/**\n * Paragraph Component\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const paragraphHandler: ComponentHandler = {\n create(): HTMLElement {\n const el = document.createElement(\"p\");\n el.dataset.hypenType = \"paragraph\";\n return el;\n },\n\n applyProps(el: HTMLElement, props: Record<string, any>): void {\n // Text content\n const text = props[\"0\"] || props.text;\n if (text !== undefined) {\n el.textContent = String(text);\n }\n },\n};\n\n\n"
|
|
6
|
-
],
|
|
7
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMa;AAAA;AAAA,qBAAqC;AAAA,IAChD,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,GAAG;AAAA,MACrC,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAE5D,MAAM,OAAO,MAAM,QAAQ,MAAM;AAAA,MACjC,IAAI,SAAS,WAAW;AAAA,QACtB,GAAG,cAAc,OAAO,IAAI;AAAA,MAC9B;AAAA;AAAA,EAEJ;AAAA;",
|
|
8
|
-
"debugId": "9B24C7A5A23D8D9464756E2164756E21",
|
|
9
|
-
"names": []
|
|
10
|
-
}
|
|
1
|
+
{"version":3,"file":"paragraph.js","sourceRoot":"","sources":["../../../src/dom/components/paragraph.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,MAAM,CAAC,MAAM,gBAAgB,GAAqB;IAChD,MAAM;QACJ,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACvC,EAAE,CAAC,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC;QACnC,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,UAAU,CAAC,EAAe,EAAE,KAA0B;QACpD,eAAe;QACf,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC;QACtC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,EAAE,CAAC,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC;IACH,CAAC;CACF,CAAC"}
|
|
@@ -1,89 +1,42 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
function __accessProp(key) {
|
|
6
|
-
return this[key];
|
|
7
|
-
}
|
|
8
|
-
var __toCommonJS = (from) => {
|
|
9
|
-
var entry = (__moduleCache ??= new WeakMap).get(from), desc;
|
|
10
|
-
if (entry)
|
|
11
|
-
return entry;
|
|
12
|
-
entry = __defProp({}, "__esModule", { value: true });
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (var key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(entry, key))
|
|
16
|
-
__defProp(entry, key, {
|
|
17
|
-
get: __accessProp.bind(from, key),
|
|
18
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
__moduleCache.set(from, entry);
|
|
22
|
-
return entry;
|
|
23
|
-
};
|
|
24
|
-
var __moduleCache;
|
|
25
|
-
var __returnValue = (v) => v;
|
|
26
|
-
function __exportSetter(name, newValue) {
|
|
27
|
-
this[name] = __returnValue.bind(null, newValue);
|
|
28
|
-
}
|
|
29
|
-
var __export = (target, all) => {
|
|
30
|
-
for (var name in all)
|
|
31
|
-
__defProp(target, name, {
|
|
32
|
-
get: all[name],
|
|
33
|
-
enumerable: true,
|
|
34
|
-
configurable: true,
|
|
35
|
-
set: __exportSetter.bind(all, name)
|
|
36
|
-
});
|
|
37
|
-
};
|
|
38
|
-
var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
|
|
39
|
-
|
|
40
|
-
// src/dom/components/progressbar.ts
|
|
41
|
-
var exports_progressbar = {};
|
|
42
|
-
__export(exports_progressbar, {
|
|
43
|
-
progressBarHandler: () => progressBarHandler
|
|
44
|
-
});
|
|
45
|
-
var progressBarHandler;
|
|
46
|
-
var init_progressbar = __esm(() => {
|
|
47
|
-
progressBarHandler = {
|
|
1
|
+
/**
|
|
2
|
+
* ProgressBar Component
|
|
3
|
+
*/
|
|
4
|
+
export const progressBarHandler = {
|
|
48
5
|
create() {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
6
|
+
const wrapper = document.createElement("div");
|
|
7
|
+
wrapper.dataset.hypenType = "progressbar";
|
|
8
|
+
wrapper.style.width = "100%";
|
|
9
|
+
wrapper.style.height = "8px";
|
|
10
|
+
wrapper.style.backgroundColor = "#e0e0e0";
|
|
11
|
+
wrapper.style.borderRadius = "4px";
|
|
12
|
+
wrapper.style.overflow = "hidden";
|
|
13
|
+
const bar = document.createElement("div");
|
|
14
|
+
bar.dataset.hypenBar = "true";
|
|
15
|
+
bar.style.height = "100%";
|
|
16
|
+
bar.style.backgroundColor = "#2196F3";
|
|
17
|
+
bar.style.transition = "width 0.3s ease";
|
|
18
|
+
bar.style.width = "0%";
|
|
19
|
+
wrapper.appendChild(bar);
|
|
20
|
+
return wrapper;
|
|
64
21
|
},
|
|
65
22
|
applyProps(el, props) {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
export {
|
|
86
|
-
progressBarHandler
|
|
23
|
+
const bar = el.querySelector('[data-hypen-bar="true"]');
|
|
24
|
+
if (!bar)
|
|
25
|
+
return;
|
|
26
|
+
// Value and max
|
|
27
|
+
const value = Number(props.value || 0);
|
|
28
|
+
const max = Number(props.max || 100);
|
|
29
|
+
const percentage = Math.min(100, Math.max(0, (value / max) * 100));
|
|
30
|
+
bar.style.width = `${percentage}%`;
|
|
31
|
+
// Color
|
|
32
|
+
if (props.color !== undefined) {
|
|
33
|
+
bar.style.backgroundColor = String(props.color);
|
|
34
|
+
}
|
|
35
|
+
// Height
|
|
36
|
+
if (props.height !== undefined) {
|
|
37
|
+
const height = typeof props.height === "number" ? `${props.height}px` : String(props.height);
|
|
38
|
+
el.style.height = height;
|
|
39
|
+
}
|
|
40
|
+
},
|
|
87
41
|
};
|
|
88
|
-
|
|
89
|
-
//# debugId=4D4E5EABC721032364756E2164756E21
|
|
42
|
+
//# sourceMappingURL=progressbar.js.map
|
|
@@ -1,10 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/dom/components/progressbar.ts"],
|
|
4
|
-
"sourcesContent": [
|
|
5
|
-
"/**\n * ProgressBar Component\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const progressBarHandler: ComponentHandler = {\n create(): HTMLElement {\n const wrapper = document.createElement(\"div\");\n wrapper.dataset.hypenType = \"progressbar\";\n wrapper.style.width = \"100%\";\n wrapper.style.height = \"8px\";\n wrapper.style.backgroundColor = \"#e0e0e0\";\n wrapper.style.borderRadius = \"4px\";\n wrapper.style.overflow = \"hidden\";\n\n const bar = document.createElement(\"div\");\n bar.dataset.hypenBar = \"true\";\n bar.style.height = \"100%\";\n bar.style.backgroundColor = \"#2196F3\";\n bar.style.transition = \"width 0.3s ease\";\n bar.style.width = \"0%\";\n\n wrapper.appendChild(bar);\n return wrapper;\n },\n\n applyProps(el: HTMLElement, props: Record<string, any>): void {\n const bar = el.querySelector('[data-hypen-bar=\"true\"]') as HTMLElement;\n if (!bar) return;\n\n // Value and max\n const value = Number(props.value || 0);\n const max = Number(props.max || 100);\n const percentage = Math.min(100, Math.max(0, (value / max) * 100));\n bar.style.width = `${percentage}%`;\n\n // Color\n if (props.color !== undefined) {\n bar.style.backgroundColor = String(props.color);\n }\n\n // Height\n if (props.height !== undefined) {\n const height = typeof props.height === \"number\" ? `${props.height}px` : String(props.height);\n el.style.height = height;\n }\n },\n};\n\n\n"
|
|
6
|
-
],
|
|
7
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMa;AAAA;AAAA,uBAAuC;AAAA,IAClD,MAAM,GAAgB;AAAA,MACpB,MAAM,UAAU,SAAS,cAAc,KAAK;AAAA,MAC5C,QAAQ,QAAQ,YAAY;AAAA,MAC5B,QAAQ,MAAM,QAAQ;AAAA,MACtB,QAAQ,MAAM,SAAS;AAAA,MACvB,QAAQ,MAAM,kBAAkB;AAAA,MAChC,QAAQ,MAAM,eAAe;AAAA,MAC7B,QAAQ,MAAM,WAAW;AAAA,MAEzB,MAAM,MAAM,SAAS,cAAc,KAAK;AAAA,MACxC,IAAI,QAAQ,WAAW;AAAA,MACvB,IAAI,MAAM,SAAS;AAAA,MACnB,IAAI,MAAM,kBAAkB;AAAA,MAC5B,IAAI,MAAM,aAAa;AAAA,MACvB,IAAI,MAAM,QAAQ;AAAA,MAElB,QAAQ,YAAY,GAAG;AAAA,MACvB,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAC5D,MAAM,MAAM,GAAG,cAAc,yBAAyB;AAAA,MACtD,IAAI,CAAC;AAAA,QAAK;AAAA,MAGV,MAAM,QAAQ,OAAO,MAAM,SAAS,CAAC;AAAA,MACrC,MAAM,MAAM,OAAO,MAAM,OAAO,GAAG;AAAA,MACnC,MAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;AAAA,MACjE,IAAI,MAAM,QAAQ,GAAG;AAAA,MAGrB,IAAI,MAAM,UAAU,WAAW;AAAA,QAC7B,IAAI,MAAM,kBAAkB,OAAO,MAAM,KAAK;AAAA,MAChD;AAAA,MAGA,IAAI,MAAM,WAAW,WAAW;AAAA,QAC9B,MAAM,SAAS,OAAO,MAAM,WAAW,WAAW,GAAG,MAAM,aAAa,OAAO,MAAM,MAAM;AAAA,QAC3F,GAAG,MAAM,SAAS;AAAA,MACpB;AAAA;AAAA,EAEJ;AAAA;",
|
|
8
|
-
"debugId": "4D4E5EABC721032364756E2164756E21",
|
|
9
|
-
"names": []
|
|
10
|
-
}
|
|
1
|
+
{"version":3,"file":"progressbar.js","sourceRoot":"","sources":["../../../src/dom/components/progressbar.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,MAAM,CAAC,MAAM,kBAAkB,GAAqB;IAClD,MAAM;QACJ,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,OAAO,CAAC,OAAO,CAAC,SAAS,GAAG,aAAa,CAAC;QAC1C,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAC7B,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;QAC7B,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC;QAC1C,OAAO,CAAC,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC;QACnC,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAElC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,GAAG,CAAC,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC;QAC9B,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAC1B,GAAG,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC;QACtC,GAAG,CAAC,KAAK,CAAC,UAAU,GAAG,iBAAiB,CAAC;QACzC,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;QAEvB,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACzB,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,UAAU,CAAC,EAAe,EAAE,KAA0B;QACpD,MAAM,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,yBAAyB,CAAgB,CAAC;QACvE,IAAI,CAAC,GAAG;YAAE,OAAO;QAEjB,gBAAgB;QAChB,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;QACrC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QACnE,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,UAAU,GAAG,CAAC;QAEnC,QAAQ;QACR,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC9B,GAAG,CAAC,KAAK,CAAC,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAClD,CAAC;QAED,SAAS;QACT,IAAI,KAAK,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;YAC/B,MAAM,MAAM,GAAG,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAC7F,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAC3B,CAAC;IACH,CAAC;CACF,CAAC"}
|
|
@@ -1,78 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
function __accessProp(key) {
|
|
6
|
-
return this[key];
|
|
7
|
-
}
|
|
8
|
-
var __toCommonJS = (from) => {
|
|
9
|
-
var entry = (__moduleCache ??= new WeakMap).get(from), desc;
|
|
10
|
-
if (entry)
|
|
11
|
-
return entry;
|
|
12
|
-
entry = __defProp({}, "__esModule", { value: true });
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (var key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(entry, key))
|
|
16
|
-
__defProp(entry, key, {
|
|
17
|
-
get: __accessProp.bind(from, key),
|
|
18
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
__moduleCache.set(from, entry);
|
|
22
|
-
return entry;
|
|
23
|
-
};
|
|
24
|
-
var __moduleCache;
|
|
25
|
-
var __returnValue = (v) => v;
|
|
26
|
-
function __exportSetter(name, newValue) {
|
|
27
|
-
this[name] = __returnValue.bind(null, newValue);
|
|
28
|
-
}
|
|
29
|
-
var __export = (target, all) => {
|
|
30
|
-
for (var name in all)
|
|
31
|
-
__defProp(target, name, {
|
|
32
|
-
get: all[name],
|
|
33
|
-
enumerable: true,
|
|
34
|
-
configurable: true,
|
|
35
|
-
set: __exportSetter.bind(all, name)
|
|
36
|
-
});
|
|
37
|
-
};
|
|
38
|
-
var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
|
|
39
|
-
|
|
40
|
-
// src/dom/components/route.ts
|
|
41
|
-
var exports_route = {};
|
|
42
|
-
__export(exports_route, {
|
|
43
|
-
routeHandler: () => routeHandler
|
|
44
|
-
});
|
|
1
|
+
/**
|
|
2
|
+
* Route Component - Lazy rendering container for route content
|
|
3
|
+
* Stores component name as metadata, Router handles actual rendering
|
|
4
|
+
*/
|
|
45
5
|
import { frameworkLoggers } from "@hypen-space/core/logger";
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
log = frameworkLoggers.router;
|
|
49
|
-
routeHandler = {
|
|
6
|
+
const log = frameworkLoggers.router;
|
|
7
|
+
export const routeHandler = {
|
|
50
8
|
create() {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
9
|
+
const el = document.createElement("div");
|
|
10
|
+
el.style.display = "flex";
|
|
11
|
+
el.style.flexDirection = "column";
|
|
12
|
+
el.style.width = "100%";
|
|
13
|
+
el.dataset.hypenType = "route";
|
|
14
|
+
el.dataset.routeRendered = "false"; // Track if component has been rendered
|
|
15
|
+
return el;
|
|
58
16
|
},
|
|
59
17
|
applyProps(el, props) {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
});
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
export {
|
|
75
|
-
routeHandler
|
|
18
|
+
// Extract route path from props
|
|
19
|
+
const path = props.path || props["0"] || "/";
|
|
20
|
+
el.dataset.routePath = String(path);
|
|
21
|
+
// Check if this is a lazy route (has __lazy flag)
|
|
22
|
+
const isLazy = props.__lazy === true;
|
|
23
|
+
el.dataset.routeLazy = String(isLazy);
|
|
24
|
+
// Store component name - either from explicit prop or from lazy child
|
|
25
|
+
const componentName = props.component || props.__lazy_child;
|
|
26
|
+
if (componentName) {
|
|
27
|
+
el.dataset.routeComponent = String(componentName);
|
|
28
|
+
}
|
|
29
|
+
log.debug(`Route created: path="${path}", lazy=${isLazy}, component="${el.dataset.routeComponent || 'none'}"`);
|
|
30
|
+
},
|
|
76
31
|
};
|
|
77
|
-
|
|
78
|
-
//# debugId=F1CD15A56E1EC21B64756E2164756E21
|
|
32
|
+
//# sourceMappingURL=route.js.map
|
|
@@ -1,10 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/dom/components/route.ts"],
|
|
4
|
-
"sourcesContent": [
|
|
5
|
-
"/**\n * Route Component - Lazy rendering container for route content\n * Stores component name as metadata, Router handles actual rendering\n */\n\nimport type { ComponentHandler } from \"./index.js\";\nimport { frameworkLoggers } from \"@hypen-space/core/logger\";\n\nconst log = frameworkLoggers.router;\n\nexport const routeHandler: ComponentHandler = {\n create(): HTMLElement {\n const el = document.createElement(\"div\");\n el.style.display = \"flex\";\n el.style.flexDirection = \"column\";\n el.style.width = \"100%\";\n el.dataset.hypenType = \"route\";\n el.dataset.routeRendered = \"false\"; // Track if component has been rendered\n return el;\n },\n\n applyProps(el: HTMLElement, props: Record<string, any>): void {\n // Extract route path from props\n const path = props.path || props[\"0\"] || \"/\";\n el.dataset.routePath = String(path);\n \n // Check if this is a lazy route (has __lazy flag)\n const isLazy = props.__lazy === true;\n el.dataset.routeLazy = String(isLazy);\n \n // Store component name - either from explicit prop or from lazy child\n const componentName = props.component || props.__lazy_child;\n if (componentName) {\n el.dataset.routeComponent = String(componentName);\n }\n \n log.debug(`Route created: path=\"${path}\", lazy=${isLazy}, component=\"${el.dataset.routeComponent || 'none'}\"`);\n },\n};\n\n"
|
|
6
|
-
],
|
|
7
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;AAAA,IAEM,KAEO;AAAA;AAAA,EAFP,MAAM,iBAAiB;AAAA,EAEhB,eAAiC;AAAA,IAC5C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,KAAK;AAAA,MACvC,GAAG,MAAM,UAAU;AAAA,MACnB,GAAG,MAAM,gBAAgB;AAAA,MACzB,GAAG,MAAM,QAAQ;AAAA,MACjB,GAAG,QAAQ,YAAY;AAAA,MACvB,GAAG,QAAQ,gBAAgB;AAAA,MAC3B,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,MAE5D,MAAM,OAAO,MAAM,QAAQ,MAAM,QAAQ;AAAA,MACzC,GAAG,QAAQ,YAAY,OAAO,IAAI;AAAA,MAGlC,MAAM,SAAS,MAAM,WAAW;AAAA,MAChC,GAAG,QAAQ,YAAY,OAAO,MAAM;AAAA,MAGpC,MAAM,gBAAgB,MAAM,aAAa,MAAM;AAAA,MAC/C,IAAI,eAAe;AAAA,QACjB,GAAG,QAAQ,iBAAiB,OAAO,aAAa;AAAA,MAClD;AAAA,MAEA,IAAI,MAAM,wBAAwB,eAAe,sBAAsB,GAAG,QAAQ,kBAAkB,SAAS;AAAA;AAAA,EAEjH;AAAA;",
|
|
8
|
-
"debugId": "F1CD15A56E1EC21B64756E2164756E21",
|
|
9
|
-
"names": []
|
|
10
|
-
}
|
|
1
|
+
{"version":3,"file":"route.js","sourceRoot":"","sources":["../../../src/dom/components/route.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,MAAM,GAAG,GAAG,gBAAgB,CAAC,MAAM,CAAC;AAEpC,MAAM,CAAC,MAAM,YAAY,GAAqB;IAC5C,MAAM;QACJ,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1B,EAAE,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;QAClC,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QACxB,EAAE,CAAC,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC;QAC/B,EAAE,CAAC,OAAO,CAAC,aAAa,GAAG,OAAO,CAAC,CAAC,uCAAuC;QAC3E,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,UAAU,CAAC,EAAe,EAAE,KAA0B;QACpD,gCAAgC;QAChC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;QAC7C,EAAE,CAAC,OAAO,CAAC,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;QAEpC,kDAAkD;QAClD,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC;QACrC,EAAE,CAAC,OAAO,CAAC,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;QAEtC,sEAAsE;QACtE,MAAM,aAAa,GAAG,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,YAAY,CAAC;QAC5D,IAAI,aAAa,EAAE,CAAC;YAClB,EAAE,CAAC,OAAO,CAAC,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;QACpD,CAAC;QAED,GAAG,CAAC,KAAK,CAAC,wBAAwB,IAAI,WAAW,MAAM,gBAAgB,EAAE,CAAC,OAAO,CAAC,cAAc,IAAI,MAAM,GAAG,CAAC,CAAC;IACjH,CAAC;CACF,CAAC"}
|
|
@@ -1,65 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
function __accessProp(key) {
|
|
6
|
-
return this[key];
|
|
7
|
-
}
|
|
8
|
-
var __toCommonJS = (from) => {
|
|
9
|
-
var entry = (__moduleCache ??= new WeakMap).get(from), desc;
|
|
10
|
-
if (entry)
|
|
11
|
-
return entry;
|
|
12
|
-
entry = __defProp({}, "__esModule", { value: true });
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (var key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(entry, key))
|
|
16
|
-
__defProp(entry, key, {
|
|
17
|
-
get: __accessProp.bind(from, key),
|
|
18
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
__moduleCache.set(from, entry);
|
|
22
|
-
return entry;
|
|
23
|
-
};
|
|
24
|
-
var __moduleCache;
|
|
25
|
-
var __returnValue = (v) => v;
|
|
26
|
-
function __exportSetter(name, newValue) {
|
|
27
|
-
this[name] = __returnValue.bind(null, newValue);
|
|
28
|
-
}
|
|
29
|
-
var __export = (target, all) => {
|
|
30
|
-
for (var name in all)
|
|
31
|
-
__defProp(target, name, {
|
|
32
|
-
get: all[name],
|
|
33
|
-
enumerable: true,
|
|
34
|
-
configurable: true,
|
|
35
|
-
set: __exportSetter.bind(all, name)
|
|
36
|
-
});
|
|
37
|
-
};
|
|
38
|
-
var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
|
|
39
|
-
|
|
40
|
-
// src/dom/components/router.ts
|
|
41
|
-
var exports_router = {};
|
|
42
|
-
__export(exports_router, {
|
|
43
|
-
routerHandler: () => routerHandler
|
|
44
|
-
});
|
|
45
|
-
var routerHandler;
|
|
46
|
-
var init_router = __esm(() => {
|
|
47
|
-
routerHandler = {
|
|
1
|
+
/**
|
|
2
|
+
* Router Component - Container for routes
|
|
3
|
+
*/
|
|
4
|
+
export const routerHandler = {
|
|
48
5
|
create() {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
6
|
+
const el = document.createElement("div");
|
|
7
|
+
el.style.display = "flex";
|
|
8
|
+
el.style.flexDirection = "column";
|
|
9
|
+
el.style.width = "100%";
|
|
10
|
+
el.dataset.hypenType = "router";
|
|
11
|
+
return el;
|
|
12
|
+
},
|
|
13
|
+
applyProps(el, props) {
|
|
14
|
+
// Router doesn't need special prop handling
|
|
15
|
+
// The routing logic is handled by the Router module
|
|
55
16
|
},
|
|
56
|
-
applyProps(el, props) {}
|
|
57
|
-
};
|
|
58
|
-
});
|
|
59
|
-
init_router();
|
|
60
|
-
|
|
61
|
-
export {
|
|
62
|
-
routerHandler
|
|
63
17
|
};
|
|
64
|
-
|
|
65
|
-
//# debugId=1FB1746476B20ADE64756E2164756E21
|
|
18
|
+
//# sourceMappingURL=router.js.map
|
|
@@ -1,10 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/dom/components/router.ts"],
|
|
4
|
-
"sourcesContent": [
|
|
5
|
-
"/**\n * Router Component - Container for routes\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const routerHandler: ComponentHandler = {\n create(): HTMLElement {\n const el = document.createElement(\"div\");\n el.style.display = \"flex\";\n el.style.flexDirection = \"column\";\n el.style.width = \"100%\";\n el.dataset.hypenType = \"router\";\n return el;\n },\n\n applyProps(el: HTMLElement, props: Record<string, any>): void {\n // Router doesn't need special prop handling\n // The routing logic is handled by the Router module\n },\n};\n\n"
|
|
6
|
-
],
|
|
7
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMa;AAAA;AAAA,kBAAkC;AAAA,IAC7C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,KAAK;AAAA,MACvC,GAAG,MAAM,UAAU;AAAA,MACnB,GAAG,MAAM,gBAAgB;AAAA,MACzB,GAAG,MAAM,QAAQ;AAAA,MACjB,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,IAGT,UAAU,CAAC,IAAiB,OAAkC;AAAA,EAIhE;AAAA;",
|
|
8
|
-
"debugId": "1FB1746476B20ADE64756E2164756E21",
|
|
9
|
-
"names": []
|
|
10
|
-
}
|
|
1
|
+
{"version":3,"file":"router.js","sourceRoot":"","sources":["../../../src/dom/components/router.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,MAAM,CAAC,MAAM,aAAa,GAAqB;IAC7C,MAAM;QACJ,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1B,EAAE,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;QAClC,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QACxB,EAAE,CAAC,OAAO,CAAC,SAAS,GAAG,QAAQ,CAAC;QAChC,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,UAAU,CAAC,EAAe,EAAE,KAA0B;QACpD,4CAA4C;QAC5C,oDAAoD;IACtD,CAAC;CACF,CAAC"}
|
|
@@ -1,80 +1,35 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
var __toCommonJS = (from) => {
|
|
9
|
-
var entry = (__moduleCache ??= new WeakMap).get(from), desc;
|
|
10
|
-
if (entry)
|
|
11
|
-
return entry;
|
|
12
|
-
entry = __defProp({}, "__esModule", { value: true });
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (var key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(entry, key))
|
|
16
|
-
__defProp(entry, key, {
|
|
17
|
-
get: __accessProp.bind(from, key),
|
|
18
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
__moduleCache.set(from, entry);
|
|
22
|
-
return entry;
|
|
23
|
-
};
|
|
24
|
-
var __moduleCache;
|
|
25
|
-
var __returnValue = (v) => v;
|
|
26
|
-
function __exportSetter(name, newValue) {
|
|
27
|
-
this[name] = __returnValue.bind(null, newValue);
|
|
28
|
-
}
|
|
29
|
-
var __export = (target, all) => {
|
|
30
|
-
for (var name in all)
|
|
31
|
-
__defProp(target, name, {
|
|
32
|
-
get: all[name],
|
|
33
|
-
enumerable: true,
|
|
34
|
-
configurable: true,
|
|
35
|
-
set: __exportSetter.bind(all, name)
|
|
36
|
-
});
|
|
37
|
-
};
|
|
38
|
-
var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
|
|
39
|
-
|
|
40
|
-
// src/dom/components/row.ts
|
|
41
|
-
var exports_row = {};
|
|
42
|
-
__export(exports_row, {
|
|
43
|
-
rowHandler: () => rowHandler
|
|
44
|
-
});
|
|
1
|
+
/**
|
|
2
|
+
* Row Component - Horizontal Stack
|
|
3
|
+
* Children keep their intrinsic size by default (matching iOS/Android behavior).
|
|
4
|
+
* Use .weight(1) on children to make them expand equally.
|
|
5
|
+
*/
|
|
6
|
+
// Inject global styles for Row with flex/weighted children
|
|
7
|
+
let rowStylesInjected = false;
|
|
45
8
|
function ensureRowStyles() {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
9
|
+
if (rowStylesInjected)
|
|
10
|
+
return;
|
|
11
|
+
rowStylesInjected = true;
|
|
12
|
+
const style = document.createElement("style");
|
|
13
|
+
style.id = "hypen-row-styles";
|
|
14
|
+
style.textContent = `
|
|
52
15
|
/* Row expands to fill width when it has children with flex/weight */
|
|
53
16
|
/* This matches iOS/Android behavior where weighted children cause parent to expand */
|
|
54
17
|
[data-hypen-type="row"]:has(> [data-hypen-flex]) {
|
|
55
18
|
width: 100%;
|
|
56
19
|
}
|
|
57
20
|
`;
|
|
58
|
-
|
|
21
|
+
document.head.appendChild(style);
|
|
59
22
|
}
|
|
60
|
-
|
|
61
|
-
var init_row = __esm(() => {
|
|
62
|
-
rowHandler = {
|
|
23
|
+
export const rowHandler = {
|
|
63
24
|
create() {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
});
|
|
74
|
-
init_row();
|
|
75
|
-
|
|
76
|
-
export {
|
|
77
|
-
rowHandler
|
|
25
|
+
ensureRowStyles();
|
|
26
|
+
const el = document.createElement("div");
|
|
27
|
+
el.style.display = "flex";
|
|
28
|
+
el.style.flexDirection = "row";
|
|
29
|
+
// Wrap to content by default (match iOS/Android behavior)
|
|
30
|
+
el.style.alignItems = "flex-start";
|
|
31
|
+
el.dataset.hypenType = "row";
|
|
32
|
+
return el;
|
|
33
|
+
},
|
|
78
34
|
};
|
|
79
|
-
|
|
80
|
-
//# debugId=4D16A4B26CC4536564756E2164756E21
|
|
35
|
+
//# sourceMappingURL=row.js.map
|
|
@@ -1,10 +1 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/dom/components/row.ts"],
|
|
4
|
-
"sourcesContent": [
|
|
5
|
-
"/**\n * Row Component - Horizontal Stack\n * Children keep their intrinsic size by default (matching iOS/Android behavior).\n * Use .weight(1) on children to make them expand equally.\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\n// Inject global styles for Row with flex/weighted children\nlet rowStylesInjected = false;\nfunction ensureRowStyles(): void {\n if (rowStylesInjected) return;\n rowStylesInjected = true;\n\n const style = document.createElement(\"style\");\n style.id = \"hypen-row-styles\";\n style.textContent = `\n /* Row expands to fill width when it has children with flex/weight */\n /* This matches iOS/Android behavior where weighted children cause parent to expand */\n [data-hypen-type=\"row\"]:has(> [data-hypen-flex]) {\n width: 100%;\n }\n `;\n document.head.appendChild(style);\n}\n\nexport const rowHandler: ComponentHandler = {\n create(): HTMLElement {\n ensureRowStyles();\n\n const el = document.createElement(\"div\");\n el.style.display = \"flex\";\n el.style.flexDirection = \"row\";\n // Wrap to content by default (match iOS/Android behavior)\n el.style.alignItems = \"flex-start\";\n el.dataset.hypenType = \"row\";\n return el;\n },\n};\n"
|
|
6
|
-
],
|
|
7
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,SAAS,eAAe,GAAS;AAAA,EAC/B,IAAI;AAAA,IAAmB;AAAA,EACvB,oBAAoB;AAAA,EAEpB,MAAM,QAAQ,SAAS,cAAc,OAAO;AAAA,EAC5C,MAAM,KAAK;AAAA,EACX,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOpB,SAAS,KAAK,YAAY,KAAK;AAAA;AAAA,IAd7B,oBAAoB,OAiBX;AAAA;AAAA,eAA+B;AAAA,IAC1C,MAAM,GAAgB;AAAA,MACpB,gBAAgB;AAAA,MAEhB,MAAM,KAAK,SAAS,cAAc,KAAK;AAAA,MACvC,GAAG,MAAM,UAAU;AAAA,MACnB,GAAG,MAAM,gBAAgB;AAAA,MAEzB,GAAG,MAAM,aAAa;AAAA,MACtB,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,EAEX;AAAA;",
|
|
8
|
-
"debugId": "4D16A4B26CC4536564756E2164756E21",
|
|
9
|
-
"names": []
|
|
10
|
-
}
|
|
1
|
+
{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../src/dom/components/row.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,2DAA2D;AAC3D,IAAI,iBAAiB,GAAG,KAAK,CAAC;AAC9B,SAAS,eAAe;IACtB,IAAI,iBAAiB;QAAE,OAAO;IAC9B,iBAAiB,GAAG,IAAI,CAAC;IAEzB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,kBAAkB,CAAC;IAC9B,KAAK,CAAC,WAAW,GAAG;;;;;;GAMnB,CAAC;IACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnC,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAqB;IAC1C,MAAM;QACJ,eAAe,EAAE,CAAC;QAElB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1B,EAAE,CAAC,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC;QAC/B,0DAA0D;QAC1D,EAAE,CAAC,KAAK,CAAC,UAAU,GAAG,YAAY,CAAC;QACnC,EAAE,CAAC,OAAO,CAAC,SAAS,GAAG,KAAK,CAAC;QAC7B,OAAO,EAAE,CAAC;IACZ,CAAC;CACF,CAAC"}
|