juxscript 1.1.333 → 1.1.334
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/components/blocks/menu.d.ts +62 -0
- package/dist/components/blocks/menu.d.ts.map +1 -0
- package/dist/components/blocks/menu.js +149 -0
- package/dist/components/blocks/menu.js.map +1 -0
- package/dist/components/button.d.ts +33 -0
- package/dist/components/button.d.ts.map +1 -0
- package/dist/components/button.js +108 -0
- package/dist/components/button.js.map +1 -0
- package/dist/components/checkbox.d.ts +62 -0
- package/dist/components/checkbox.d.ts.map +1 -0
- package/dist/components/checkbox.js +179 -0
- package/dist/components/checkbox.js.map +1 -0
- package/dist/components/container.d.ts +58 -0
- package/dist/components/container.d.ts.map +1 -0
- package/dist/components/container.js +152 -0
- package/dist/components/container.js.map +1 -0
- package/dist/components/data.d.ts +58 -0
- package/dist/components/data.d.ts.map +1 -0
- package/dist/components/data.js +131 -0
- package/dist/components/data.js.map +1 -0
- package/dist/components/grid.d.ts +58 -0
- package/dist/components/grid.d.ts.map +1 -0
- package/dist/components/grid.js +128 -0
- package/dist/components/grid.js.map +1 -0
- package/dist/components/include.d.ts +86 -0
- package/dist/components/include.d.ts.map +1 -0
- package/dist/components/include.js +239 -0
- package/dist/components/include.js.map +1 -0
- package/dist/components/input.d.ts +58 -0
- package/dist/components/input.d.ts.map +1 -0
- package/dist/components/input.js +162 -0
- package/dist/components/input.js.map +1 -0
- package/dist/components/link.d.ts +35 -0
- package/dist/components/link.d.ts.map +1 -0
- package/dist/components/link.js +136 -0
- package/dist/components/link.js.map +1 -0
- package/dist/components/list.d.ts +48 -0
- package/dist/components/list.d.ts.map +1 -0
- package/dist/components/list.js +179 -0
- package/dist/components/list.js.map +1 -0
- package/dist/components/nav.d.ts +46 -0
- package/dist/components/nav.d.ts.map +1 -0
- package/dist/components/nav.js +190 -0
- package/dist/components/nav.js.map +1 -0
- package/dist/components/radio.d.ts +40 -0
- package/dist/components/radio.d.ts.map +1 -0
- package/dist/components/radio.js +113 -0
- package/dist/components/radio.js.map +1 -0
- package/dist/components/select.d.ts +41 -0
- package/dist/components/select.d.ts.map +1 -0
- package/dist/components/select.js +112 -0
- package/dist/components/select.js.map +1 -0
- package/dist/components/store.d.ts +78 -0
- package/dist/components/store.d.ts.map +1 -0
- package/dist/components/store.js +249 -0
- package/dist/components/store.js.map +1 -0
- package/dist/components/style.d.ts +27 -0
- package/dist/components/style.d.ts.map +1 -0
- package/dist/components/style.js +53 -0
- package/dist/components/style.js.map +1 -0
- package/dist/components/table.d.ts +56 -0
- package/dist/components/table.d.ts.map +1 -0
- package/dist/components/table.js +200 -0
- package/dist/components/table.js.map +1 -0
- package/dist/components/tabs.d.ts +52 -0
- package/dist/components/tabs.d.ts.map +1 -0
- package/dist/components/tabs.js +207 -0
- package/dist/components/tabs.js.map +1 -0
- package/dist/components/tag.d.ts +41 -0
- package/dist/components/tag.d.ts.map +1 -0
- package/dist/components/tag.js +104 -0
- package/dist/components/tag.js.map +1 -0
- package/dist/devtools/devtools.d.ts +3 -0
- package/dist/devtools/devtools.d.ts.map +1 -0
- package/dist/devtools/devtools.js +182 -0
- package/dist/devtools/devtools.js.map +1 -0
- package/dist/index.d.ts +71 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +66 -0
- package/dist/index.js.map +1 -0
- package/dist/state/pageState.d.ts +19 -0
- package/dist/state/pageState.d.ts.map +1 -0
- package/dist/state/pageState.js +361 -0
- package/dist/state/pageState.js.map +1 -0
- package/dist/utils/codeHighlight.d.ts +7 -0
- package/dist/utils/codeHighlight.d.ts.map +1 -0
- package/dist/utils/codeHighlight.js +106 -0
- package/dist/utils/codeHighlight.js.map +1 -0
- package/dist/utils/codeparser.d.ts +29 -0
- package/dist/utils/codeparser.d.ts.map +1 -0
- package/dist/utils/codeparser.js +385 -0
- package/dist/utils/codeparser.js.map +1 -0
- package/dist/utils/fetch.d.ts +176 -0
- package/dist/utils/fetch.d.ts.map +1 -0
- package/dist/utils/fetch.js +428 -0
- package/dist/utils/fetch.js.map +1 -0
- package/dist/utils/formatId.d.ts +16 -0
- package/dist/utils/formatId.d.ts.map +1 -0
- package/dist/utils/formatId.js +28 -0
- package/dist/utils/formatId.js.map +1 -0
- package/dist/utils/idgen.d.ts +2 -0
- package/dist/utils/idgen.d.ts.map +1 -0
- package/dist/utils/idgen.js +5 -0
- package/dist/utils/idgen.js.map +1 -0
- package/dist/utils/niceName.d.ts +14 -0
- package/dist/utils/niceName.d.ts.map +1 -0
- package/dist/utils/niceName.js +23 -0
- package/dist/utils/niceName.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
export interface MenuItem {
|
|
2
|
+
id?: string;
|
|
3
|
+
label?: string;
|
|
4
|
+
path?: string;
|
|
5
|
+
icon?: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
[key: string]: any;
|
|
8
|
+
}
|
|
9
|
+
export interface MenuSection {
|
|
10
|
+
label?: string;
|
|
11
|
+
items: (string | MenuItem)[];
|
|
12
|
+
}
|
|
13
|
+
export interface MenuOptions {
|
|
14
|
+
title?: string;
|
|
15
|
+
logo?: string;
|
|
16
|
+
footer?: string;
|
|
17
|
+
width?: string;
|
|
18
|
+
target?: string;
|
|
19
|
+
density?: 'dense' | 'normal' | 'inflated';
|
|
20
|
+
}
|
|
21
|
+
export interface MenuApi {
|
|
22
|
+
id: string;
|
|
23
|
+
title(val: string): MenuApi;
|
|
24
|
+
logo(val: string): MenuApi;
|
|
25
|
+
footer(val: string): MenuApi;
|
|
26
|
+
width(val: string): MenuApi;
|
|
27
|
+
target(val: string): MenuApi;
|
|
28
|
+
density(val: 'dense' | 'normal' | 'inflated'): MenuApi;
|
|
29
|
+
section(label: string, items: (string | MenuItem)[]): MenuApi;
|
|
30
|
+
items(items: (string | MenuItem)[]): MenuApi;
|
|
31
|
+
render(): MenuApi;
|
|
32
|
+
addSection(label: string, items: (string | MenuItem)[]): MenuApi;
|
|
33
|
+
setTitle(val: string): MenuApi;
|
|
34
|
+
setFooter(val: string): MenuApi;
|
|
35
|
+
show(): MenuApi;
|
|
36
|
+
hide(): MenuApi;
|
|
37
|
+
toggle(): MenuApi;
|
|
38
|
+
getElement(): HTMLElement | null;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Create a sidebar menu with fluent API.
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* // One-liner
|
|
45
|
+
* jux.menu('m1', ['home', 'about', 'contact'], { title: 'App', target: 'sidebar' });
|
|
46
|
+
*
|
|
47
|
+
* // Sectioned
|
|
48
|
+
* jux.menu('m2', [
|
|
49
|
+
* { label: 'Main', items: [{ icon: '⌂', label: 'Home', path: '/' }] },
|
|
50
|
+
* { label: 'Settings', items: ['/profile', '/security'] },
|
|
51
|
+
* ], { title: 'App', density: 'inflated' });
|
|
52
|
+
*
|
|
53
|
+
* // Fluent chain
|
|
54
|
+
* jux.menu('m3')
|
|
55
|
+
* .title('Dashboard').logo('D').target('sidebar')
|
|
56
|
+
* .section('Nav', ['/home', '/about'])
|
|
57
|
+
* .section('Admin', ['/settings'])
|
|
58
|
+
* .footer('v1.0');
|
|
59
|
+
*/
|
|
60
|
+
export declare function menu(id: string, sections?: (string | MenuSection | MenuItem)[], options?: MenuOptions): MenuApi;
|
|
61
|
+
export default menu;
|
|
62
|
+
//# sourceMappingURL=menu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../lib/components/blocks/menu.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,QAAQ;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,WAAW;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,CAAC,MAAM,GAAG,QAAQ,CAAC,EAAE,CAAC;CAChC;AAED,MAAM,WAAW,WAAW;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;CAC7C;AAED,MAAM,WAAW,OAAO;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,KAAK,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,OAAO,CAAC,GAAG,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IACvD,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,MAAM,GAAG,QAAQ,CAAC,EAAE,GAAG,OAAO,CAAC;IAC9D,KAAK,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,QAAQ,CAAC,EAAE,GAAG,OAAO,CAAC;IAC7C,MAAM,IAAI,OAAO,CAAC;IAClB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,MAAM,GAAG,QAAQ,CAAC,EAAE,GAAG,OAAO,CAAC;IACjE,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,IAAI,IAAI,OAAO,CAAC;IAChB,IAAI,IAAI,OAAO,CAAC;IAChB,MAAM,IAAI,OAAO,CAAC;IAClB,UAAU,IAAI,WAAW,GAAG,IAAI,CAAC;CACpC;AAyDD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,CAAC,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAsE/G;AAED,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
import { div, span } from '../tag.js';
|
|
2
|
+
import { nav } from '../nav.js';
|
|
3
|
+
import { style } from '../style.js';
|
|
4
|
+
import { pageState } from '../../state/pageState.js';
|
|
5
|
+
const DENSITY_CONFIG = {
|
|
6
|
+
dense: { headerPad: '10px', itemPad: '4px 10px', labelPad: '6px 10px 2px', footerPad: '8px 12px', gap: '0px', fontSize: '12px', iconSize: '13px' },
|
|
7
|
+
normal: { headerPad: '16px', itemPad: '8px 12px', labelPad: '8px 12px 4px', footerPad: '12px 16px', gap: '1px', fontSize: '13px', iconSize: '15px' },
|
|
8
|
+
inflated: { headerPad: '20px', itemPad: '12px 16px', labelPad: '12px 16px 6px', footerPad: '16px 20px', gap: '4px', fontSize: '14px', iconSize: '17px' }
|
|
9
|
+
};
|
|
10
|
+
function normalizeItem(menuId, item) {
|
|
11
|
+
if (typeof item === 'string') {
|
|
12
|
+
const path = item.startsWith('/') ? item : '/' + item;
|
|
13
|
+
const seg = path.split('/').filter(Boolean).pop() || 'Home';
|
|
14
|
+
return {
|
|
15
|
+
id: menuId + '-' + seg.toLowerCase().replace(/[^a-z0-9]/g, '-'),
|
|
16
|
+
label: seg.charAt(0).toUpperCase() + seg.slice(1),
|
|
17
|
+
path
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
return item;
|
|
21
|
+
}
|
|
22
|
+
function normalizeSections(menuId, input) {
|
|
23
|
+
if (!input || !Array.isArray(input) || input.length === 0)
|
|
24
|
+
return [];
|
|
25
|
+
const isFlat = input.every((i) => typeof i === 'string' || (typeof i === 'object' && !i.items));
|
|
26
|
+
if (isFlat)
|
|
27
|
+
return [{ items: input.map(i => normalizeItem(menuId, i)) }];
|
|
28
|
+
return input.map((s) => {
|
|
29
|
+
if (typeof s === 'string')
|
|
30
|
+
return { items: [normalizeItem(menuId, s)] };
|
|
31
|
+
return { label: s.label, items: (s.items || []).map((i) => normalizeItem(menuId, i)) };
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
function injectMenuStyles(density) {
|
|
35
|
+
const d = DENSITY_CONFIG;
|
|
36
|
+
const css = `
|
|
37
|
+
body { margin: 0; }
|
|
38
|
+
.jux-sidebar { display:flex; flex-direction:column; min-height:100vh; background:hsl(var(--card)); color:hsl(var(--card-foreground)); border-right:1px solid hsl(var(--border)); font-family:var(--font-sans,system-ui,sans-serif); }
|
|
39
|
+
.jux-sidebar-header { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; border-bottom:1px solid hsl(var(--border)); }
|
|
40
|
+
.jux-sidebar-logo { width:20px; height:20px; border-radius:6px; background:hsl(var(--primary)); display:flex; align-items:center; justify-content:center; color:hsl(var(--primary-foreground)); font-size:11px; font-weight:700; }
|
|
41
|
+
.jux-sidebar-label { font-size:11px; font-weight:500; color:hsl(var(--muted-foreground)); text-transform:uppercase; letter-spacing:0.05em; }
|
|
42
|
+
.jux-sidebar-footer { margin-top:auto; border-top:1px solid hsl(var(--border)); font-size:11px; color:hsl(var(--muted-foreground)); }
|
|
43
|
+
.jux-sidebar-divider { height:1px; background:hsl(var(--border)); margin:4px 8px; }
|
|
44
|
+
.jux-nav-item { display:flex; align-items:center; border-radius:var(--radius,6px); font-weight:500; color:hsl(var(--foreground)); cursor:pointer; transition:background 0.15s; user-select:none; text-decoration:none; }
|
|
45
|
+
.jux-nav-item:hover { background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); }
|
|
46
|
+
.jux-nav-item--active { background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); font-weight:600; }
|
|
47
|
+
.jux-nav-item-icon { text-align:center; flex-shrink:0; }
|
|
48
|
+
` + ['dense', 'normal', 'inflated'].map(k => {
|
|
49
|
+
const v = d[k];
|
|
50
|
+
return `.jux-sidebar--${k} .jux-sidebar-header { padding:${v.headerPad}; }
|
|
51
|
+
.jux-sidebar--${k} .jux-sidebar-label { padding:${v.labelPad}; }
|
|
52
|
+
.jux-sidebar--${k} .jux-sidebar-footer { padding:${v.footerPad}; }
|
|
53
|
+
.jux-sidebar--${k} .jux-nav-item { padding:${v.itemPad}; margin:${v.gap} 0; font-size:${v.fontSize}; gap:${k === 'dense' ? '8px' : k === 'normal' ? '10px' : '12px'}; }
|
|
54
|
+
.jux-sidebar--${k} .jux-nav-item-icon { width:${k === 'dense' ? '16px' : k === 'normal' ? '18px' : '20px'}; font-size:${v.iconSize}; }`;
|
|
55
|
+
}).join('\n');
|
|
56
|
+
style('menu-styles', css);
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Create a sidebar menu with fluent API.
|
|
60
|
+
*
|
|
61
|
+
* @example
|
|
62
|
+
* // One-liner
|
|
63
|
+
* jux.menu('m1', ['home', 'about', 'contact'], { title: 'App', target: 'sidebar' });
|
|
64
|
+
*
|
|
65
|
+
* // Sectioned
|
|
66
|
+
* jux.menu('m2', [
|
|
67
|
+
* { label: 'Main', items: [{ icon: '⌂', label: 'Home', path: '/' }] },
|
|
68
|
+
* { label: 'Settings', items: ['/profile', '/security'] },
|
|
69
|
+
* ], { title: 'App', density: 'inflated' });
|
|
70
|
+
*
|
|
71
|
+
* // Fluent chain
|
|
72
|
+
* jux.menu('m3')
|
|
73
|
+
* .title('Dashboard').logo('D').target('sidebar')
|
|
74
|
+
* .section('Nav', ['/home', '/about'])
|
|
75
|
+
* .section('Admin', ['/settings'])
|
|
76
|
+
* .footer('v1.0');
|
|
77
|
+
*/
|
|
78
|
+
export function menu(id, sections, options) {
|
|
79
|
+
const opts = options || {};
|
|
80
|
+
let _title = opts.title || 'App';
|
|
81
|
+
let _logo = opts.logo || _title.charAt(0).toUpperCase();
|
|
82
|
+
let _footer = opts.footer || '';
|
|
83
|
+
let _width = opts.width || '260px';
|
|
84
|
+
let _target = opts.target;
|
|
85
|
+
let _density = opts.density || 'normal';
|
|
86
|
+
let _sectionCount = 0;
|
|
87
|
+
let _rendered = false;
|
|
88
|
+
let _footerRendered = false;
|
|
89
|
+
function ensureShell() {
|
|
90
|
+
if (_rendered)
|
|
91
|
+
return;
|
|
92
|
+
_rendered = true;
|
|
93
|
+
injectMenuStyles(_density);
|
|
94
|
+
div(id, { class: 'jux-sidebar jux-sidebar--' + _density, style: 'width:' + _width, target: _target });
|
|
95
|
+
div(id + '-header', { class: 'jux-sidebar-header', target: id });
|
|
96
|
+
div(id + '-logo', { class: 'jux-sidebar-logo', content: _logo, target: id + '-header' });
|
|
97
|
+
span(id + '-title', { content: _title, target: id + '-header' });
|
|
98
|
+
}
|
|
99
|
+
function renderSection(section) {
|
|
100
|
+
ensureShell();
|
|
101
|
+
const i = _sectionCount++;
|
|
102
|
+
if (i > 0)
|
|
103
|
+
div(id + '-divider-' + i, { class: 'jux-sidebar-divider', target: id });
|
|
104
|
+
if (section.label)
|
|
105
|
+
div(id + '-label-' + i, { class: 'jux-sidebar-label', content: section.label, target: id });
|
|
106
|
+
nav(id + '-nav-' + i, { target: id, items: section.items });
|
|
107
|
+
}
|
|
108
|
+
function renderFooter() {
|
|
109
|
+
if (_footerRendered || !_footer)
|
|
110
|
+
return;
|
|
111
|
+
_footerRendered = true;
|
|
112
|
+
div(id + '-footer', { class: 'jux-sidebar-footer', content: _footer, target: id });
|
|
113
|
+
}
|
|
114
|
+
const api = {
|
|
115
|
+
id,
|
|
116
|
+
title(val) { _title = val; return api; },
|
|
117
|
+
logo(val) { _logo = val; return api; },
|
|
118
|
+
footer(val) { _footer = val; if (_rendered)
|
|
119
|
+
renderFooter(); return api; },
|
|
120
|
+
width(val) { _width = val; return api; },
|
|
121
|
+
target(val) { _target = val; return api; },
|
|
122
|
+
density(val) { _density = val; return api; },
|
|
123
|
+
section(label, items) {
|
|
124
|
+
renderSection({ label, items: (items || []).map(i => normalizeItem(id, i)) });
|
|
125
|
+
return api;
|
|
126
|
+
},
|
|
127
|
+
items(items) {
|
|
128
|
+
renderSection({ items: (items || []).map(i => normalizeItem(id, i)) });
|
|
129
|
+
return api;
|
|
130
|
+
},
|
|
131
|
+
render() { ensureShell(); renderFooter(); return api; },
|
|
132
|
+
addSection(label, items) { return api.section(label, items); },
|
|
133
|
+
setTitle(val) { pageState[id + '-title'].content = val; return api; },
|
|
134
|
+
setFooter(val) { pageState[id + '-footer'].content = val; return api; },
|
|
135
|
+
show() { pageState[id].visible = true; return api; },
|
|
136
|
+
hide() { pageState[id].visible = false; return api; },
|
|
137
|
+
toggle() { pageState[id].visible = !pageState[id].visible; return api; },
|
|
138
|
+
getElement() { return document.getElementById(id); }
|
|
139
|
+
};
|
|
140
|
+
// Auto-render if sections passed
|
|
141
|
+
if (sections && Array.isArray(sections) && sections.length > 0) {
|
|
142
|
+
const normalized = normalizeSections(id, sections);
|
|
143
|
+
normalized.forEach(renderSection);
|
|
144
|
+
renderFooter();
|
|
145
|
+
}
|
|
146
|
+
return api;
|
|
147
|
+
}
|
|
148
|
+
export default menu;
|
|
149
|
+
//# sourceMappingURL=menu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../lib/components/blocks/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AA6CrD,MAAM,cAAc,GAA2C;IAC3D,KAAK,EAAK,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE;IACrJ,MAAM,EAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE;IACtJ,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE;CAC3J,CAAC;AAEF,SAAS,aAAa,CAAC,MAAc,EAAE,IAAuB;IAC1D,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3B,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC;QACtD,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,IAAI,MAAM,CAAC;QAC5D,OAAO;YACH,EAAE,EAAE,MAAM,GAAG,GAAG,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC;YAC/D,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;YACjD,IAAI;SACP,CAAC;IACN,CAAC;IACD,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,SAAS,iBAAiB,CAAC,MAAc,EAAE,KAAY;IACnD,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IACrE,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IACrG,IAAI,MAAM;QAAE,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACzE,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE;QACxB,IAAI,OAAO,CAAC,KAAK,QAAQ;YAAE,OAAO,EAAE,KAAK,EAAE,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACxE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAChG,CAAC,CAAC,CAAC;AACP,CAAC;AAED,SAAS,gBAAgB,CAAC,OAAe;IACrC,MAAM,CAAC,GAAG,cAAc,CAAC;IACzB,MAAM,GAAG,GAAG;;;;;;;;;;;;CAYf,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;QACpC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACf,OAAO,iBAAiB,CAAC,kCAAkC,CAAC,CAAC,SAAS;gBAC9D,CAAC,iCAAiC,CAAC,CAAC,QAAQ;gBAC5C,CAAC,kCAAkC,CAAC,CAAC,SAAS;gBAC9C,CAAC,4BAA4B,CAAC,CAAC,OAAO,YAAY,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,QAAQ,SAAS,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;gBACnJ,CAAC,+BAA+B,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,eAAe,CAAC,CAAC,QAAQ,KAAK,CAAC;IACpI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEd,KAAK,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC;AAC9B,CAAC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,IAAI,CAAC,EAAU,EAAE,QAA8C,EAAE,OAAqB;IAClG,MAAM,IAAI,GAAG,OAAO,IAAI,EAAE,CAAC;IAC3B,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC;IACjC,IAAI,KAAK,GAAG,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IACxD,IAAI,OAAO,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC;IAChC,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,IAAI,OAAO,CAAC;IACnC,IAAI,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC;IAC1B,IAAI,QAAQ,GAAG,IAAI,CAAC,OAAO,IAAI,QAAQ,CAAC;IACxC,IAAI,aAAa,GAAG,CAAC,CAAC;IACtB,IAAI,SAAS,GAAG,KAAK,CAAC;IACtB,IAAI,eAAe,GAAG,KAAK,CAAC;IAE5B,SAAS,WAAW;QAChB,IAAI,SAAS;YAAE,OAAO;QACtB,SAAS,GAAG,IAAI,CAAC;QACjB,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,2BAA2B,GAAG,QAAQ,EAAE,KAAK,EAAE,QAAQ,GAAG,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;QACtG,GAAG,CAAC,EAAE,GAAG,SAAS,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;QACjE,GAAG,CAAC,EAAE,GAAG,OAAO,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,GAAG,SAAS,EAAE,CAAC,CAAC;QACzF,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,GAAG,SAAS,EAAE,CAAC,CAAC;IACrE,CAAC;IAED,SAAS,aAAa,CAAC,OAAoB;QACvC,WAAW,EAAE,CAAC;QACd,MAAM,CAAC,GAAG,aAAa,EAAE,CAAC;QAC1B,IAAI,CAAC,GAAG,CAAC;YAAE,GAAG,CAAC,EAAE,GAAG,WAAW,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;QACnF,IAAI,OAAO,CAAC,KAAK;YAAE,GAAG,CAAC,EAAE,GAAG,SAAS,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;QAC/G,GAAG,CAAC,EAAE,GAAG,OAAO,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAY,EAAE,CAAC,CAAC;IACvE,CAAC;IAED,SAAS,YAAY;QACjB,IAAI,eAAe,IAAI,CAAC,OAAO;YAAE,OAAO;QACxC,eAAe,GAAG,IAAI,CAAC;QACvB,GAAG,CAAC,EAAE,GAAG,SAAS,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACvF,CAAC;IAED,MAAM,GAAG,GAAY;QACjB,EAAE;QACF,KAAK,CAAC,GAAG,IAAI,MAAM,GAAG,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACxC,IAAI,CAAC,GAAG,IAAI,KAAK,GAAG,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACtC,MAAM,CAAC,GAAG,IAAI,OAAO,GAAG,GAAG,CAAC,CAAC,IAAI,SAAS;YAAE,YAAY,EAAE,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACzE,KAAK,CAAC,GAAG,IAAI,MAAM,GAAG,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACxC,MAAM,CAAC,GAAG,IAAI,OAAO,GAAG,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QAC1C,OAAO,CAAC,GAAG,IAAI,QAAQ,GAAG,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QAC5C,OAAO,CAAC,KAAK,EAAE,KAAK;YAChB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YAC9E,OAAO,GAAG,CAAC;QACf,CAAC;QACD,KAAK,CAAC,KAAK;YACP,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACvE,OAAO,GAAG,CAAC;QACf,CAAC;QACD,MAAM,KAAK,WAAW,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACvD,UAAU,CAAC,KAAK,EAAE,KAAK,IAAI,OAAO,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;QAC9D,QAAQ,CAAC,GAAG,IAAI,SAAS,CAAC,EAAE,GAAG,QAAQ,CAAC,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACrE,SAAS,CAAC,GAAG,IAAI,SAAS,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACvE,IAAI,KAAK,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACpD,IAAI,KAAK,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACrD,MAAM,KAAK,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACxE,UAAU,KAAK,OAAO,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;KACvD,CAAC;IAEF,iCAAiC;IACjC,IAAI,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAC7D,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;QACnD,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QAClC,YAAY,EAAE,CAAC;IACnB,CAAC;IAED,OAAO,GAAG,CAAC;AACf,CAAC;AAED,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
interface ButtonOptions {
|
|
2
|
+
content?: string;
|
|
3
|
+
variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
|
|
4
|
+
size?: 'default' | 'sm' | 'lg' | 'icon';
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
type?: 'button' | 'submit' | 'reset';
|
|
7
|
+
class?: string;
|
|
8
|
+
style?: string;
|
|
9
|
+
target?: string;
|
|
10
|
+
icon?: string;
|
|
11
|
+
[key: string]: any;
|
|
12
|
+
}
|
|
13
|
+
declare class Button {
|
|
14
|
+
id: string;
|
|
15
|
+
opts: ButtonOptions;
|
|
16
|
+
private _element;
|
|
17
|
+
private _onChange;
|
|
18
|
+
constructor(id: string, options?: ButtonOptions);
|
|
19
|
+
getValue(): string;
|
|
20
|
+
getContent(): string;
|
|
21
|
+
setValue(val: string): this;
|
|
22
|
+
setContent(val: string): this;
|
|
23
|
+
setDisabled(val: boolean): this;
|
|
24
|
+
setClass(val: string): this;
|
|
25
|
+
setStyle(val: string): this;
|
|
26
|
+
getElement(): HTMLButtonElement;
|
|
27
|
+
onChange(fn: (value: string) => void): this;
|
|
28
|
+
}
|
|
29
|
+
export declare function button(id: string, options?: ButtonOptions): Button;
|
|
30
|
+
export declare function btn(id: string, options?: ButtonOptions): Button;
|
|
31
|
+
export { Button, ButtonOptions };
|
|
32
|
+
export default button;
|
|
33
|
+
//# sourceMappingURL=button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../lib/components/button.ts"],"names":[],"mappings":"AAIA,UAAU,aAAa;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;IACjF,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,cAAM,MAAM;IACR,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,QAAQ,CAAoB;IACpC,OAAO,CAAC,SAAS,CAA0C;gBAE/C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;IA4DnD,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IAEpB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAW3B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAE7B,WAAW,CAAC,GAAG,EAAE,OAAO,GAAG,IAAI;IAM/B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,UAAU,IAAI,iBAAiB;IAE/B,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,IAAI;CAI9C;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAItE;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAInE;AAED,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC;AACjC,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import generateId from '../utils/idgen.js';
|
|
2
|
+
import niceName from '../utils/niceName.js';
|
|
3
|
+
import { pageState } from '../state/pageState.js';
|
|
4
|
+
class Button {
|
|
5
|
+
constructor(id, options = {}) {
|
|
6
|
+
this._onChange = null;
|
|
7
|
+
this.id = id || generateId();
|
|
8
|
+
this.opts = {
|
|
9
|
+
variant: 'default',
|
|
10
|
+
size: 'default',
|
|
11
|
+
type: 'button',
|
|
12
|
+
disabled: false,
|
|
13
|
+
...options
|
|
14
|
+
};
|
|
15
|
+
// Auto-generate content from ID if not provided
|
|
16
|
+
if (!this.opts.content && this.id) {
|
|
17
|
+
this.opts.content = niceName(this.id);
|
|
18
|
+
}
|
|
19
|
+
this._element = document.createElement('button');
|
|
20
|
+
this._element.id = this.id;
|
|
21
|
+
this._element.type = this.opts.type;
|
|
22
|
+
if (this.opts.disabled)
|
|
23
|
+
this._element.disabled = true;
|
|
24
|
+
// Build class list
|
|
25
|
+
const classes = ['jux-button'];
|
|
26
|
+
if (this.opts.variant)
|
|
27
|
+
classes.push(`jux-button--${this.opts.variant}`);
|
|
28
|
+
if (this.opts.size && this.opts.size !== 'default')
|
|
29
|
+
classes.push(`jux-button--${this.opts.size}`);
|
|
30
|
+
if (this.opts.class)
|
|
31
|
+
classes.push(this.opts.class);
|
|
32
|
+
this._element.className = classes.join(' ');
|
|
33
|
+
if (this.opts.style)
|
|
34
|
+
this._element.setAttribute('style', this.opts.style);
|
|
35
|
+
// Content
|
|
36
|
+
if (this.opts.icon) {
|
|
37
|
+
const iconSpan = document.createElement('span');
|
|
38
|
+
iconSpan.className = 'jux-button-icon';
|
|
39
|
+
iconSpan.textContent = this.opts.icon;
|
|
40
|
+
this._element.appendChild(iconSpan);
|
|
41
|
+
}
|
|
42
|
+
if (this.opts.content) {
|
|
43
|
+
const textSpan = document.createElement('span');
|
|
44
|
+
textSpan.className = 'jux-button-text';
|
|
45
|
+
textSpan.textContent = this.opts.content;
|
|
46
|
+
this._element.appendChild(textSpan);
|
|
47
|
+
}
|
|
48
|
+
// Extra attributes
|
|
49
|
+
for (const [key, value] of Object.entries(this.opts)) {
|
|
50
|
+
if (['content', 'class', 'style', 'target', 'variant', 'size', 'type', 'disabled', 'icon'].includes(key))
|
|
51
|
+
continue;
|
|
52
|
+
this._element.setAttribute(`data-${key}`, String(value));
|
|
53
|
+
}
|
|
54
|
+
const resolvedTarget = this.opts.target;
|
|
55
|
+
const container = resolvedTarget
|
|
56
|
+
? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
|
|
57
|
+
: document.getElementById('app');
|
|
58
|
+
container?.appendChild(this._element);
|
|
59
|
+
}
|
|
60
|
+
// ═══════════════════════════════════════════════════════════
|
|
61
|
+
// PAGESTATE INTEGRATION
|
|
62
|
+
// ═══════════════════════════════════════════════════════════
|
|
63
|
+
getValue() { return this.opts.content ?? ''; }
|
|
64
|
+
getContent() { return this.opts.content ?? ''; }
|
|
65
|
+
setValue(val) {
|
|
66
|
+
this.opts.content = val;
|
|
67
|
+
const textEl = this._element.querySelector('.jux-button-text');
|
|
68
|
+
if (textEl) {
|
|
69
|
+
textEl.textContent = val;
|
|
70
|
+
}
|
|
71
|
+
else {
|
|
72
|
+
this._element.textContent = val;
|
|
73
|
+
}
|
|
74
|
+
return this;
|
|
75
|
+
}
|
|
76
|
+
setContent(val) { return this.setValue(val); }
|
|
77
|
+
setDisabled(val) {
|
|
78
|
+
this.opts.disabled = val;
|
|
79
|
+
this._element.disabled = val;
|
|
80
|
+
return this;
|
|
81
|
+
}
|
|
82
|
+
setClass(val) {
|
|
83
|
+
this._element.className = val;
|
|
84
|
+
return this;
|
|
85
|
+
}
|
|
86
|
+
setStyle(val) {
|
|
87
|
+
this._element.setAttribute('style', val);
|
|
88
|
+
return this;
|
|
89
|
+
}
|
|
90
|
+
getElement() { return this._element; }
|
|
91
|
+
onChange(fn) {
|
|
92
|
+
this._onChange = fn;
|
|
93
|
+
return this;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
export function button(id, options = {}) {
|
|
97
|
+
const b = new Button(id, options);
|
|
98
|
+
pageState.__register(b);
|
|
99
|
+
return b;
|
|
100
|
+
}
|
|
101
|
+
export function btn(id, options = {}) {
|
|
102
|
+
const b = new Button(id, options);
|
|
103
|
+
pageState.__register(b);
|
|
104
|
+
return b;
|
|
105
|
+
}
|
|
106
|
+
export { Button };
|
|
107
|
+
export default button;
|
|
108
|
+
//# sourceMappingURL=button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../lib/components/button.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
interface CheckboxOption {
|
|
2
|
+
label: string;
|
|
3
|
+
value: string;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
checked?: boolean;
|
|
6
|
+
}
|
|
7
|
+
interface CheckboxOptions {
|
|
8
|
+
label?: string;
|
|
9
|
+
checked?: boolean;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
class?: string;
|
|
12
|
+
style?: string;
|
|
13
|
+
}
|
|
14
|
+
interface CheckboxGroupOptions {
|
|
15
|
+
label?: string;
|
|
16
|
+
options?: CheckboxOption[];
|
|
17
|
+
values?: string[];
|
|
18
|
+
direction?: 'vertical' | 'horizontal';
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
class?: string;
|
|
21
|
+
style?: string;
|
|
22
|
+
}
|
|
23
|
+
declare class Checkbox {
|
|
24
|
+
id: string;
|
|
25
|
+
opts: CheckboxOptions;
|
|
26
|
+
private _element;
|
|
27
|
+
private _wrapper;
|
|
28
|
+
private _onChange;
|
|
29
|
+
constructor(id: string, options?: CheckboxOptions);
|
|
30
|
+
label(value: string): this;
|
|
31
|
+
checked(value?: boolean): this;
|
|
32
|
+
disabled(value?: boolean): this;
|
|
33
|
+
style(value: string): this;
|
|
34
|
+
class(value: string): this;
|
|
35
|
+
onChange(fn: (checked: boolean, event: Event) => void): this;
|
|
36
|
+
getValue(): boolean;
|
|
37
|
+
render(target?: string | HTMLElement): this;
|
|
38
|
+
}
|
|
39
|
+
declare class CheckboxGroup {
|
|
40
|
+
id: string;
|
|
41
|
+
opts: CheckboxGroupOptions;
|
|
42
|
+
private _wrapper;
|
|
43
|
+
private _inputs;
|
|
44
|
+
private _onChange;
|
|
45
|
+
constructor(id: string, options?: CheckboxGroupOptions);
|
|
46
|
+
label(value: string): this;
|
|
47
|
+
direction(value: 'vertical' | 'horizontal'): this;
|
|
48
|
+
disabled(value?: boolean): this;
|
|
49
|
+
style(value: string): this;
|
|
50
|
+
class(value: string): this;
|
|
51
|
+
options(opts: CheckboxOption[]): this;
|
|
52
|
+
values(vals: string[]): this;
|
|
53
|
+
onChange(fn: (values: string[], event: Event) => void): this;
|
|
54
|
+
getValues(): string[];
|
|
55
|
+
private _rebuild;
|
|
56
|
+
private _buildOptions;
|
|
57
|
+
render(target?: string | HTMLElement): this;
|
|
58
|
+
}
|
|
59
|
+
export declare function checkbox(id: string, options?: CheckboxOptions): Checkbox;
|
|
60
|
+
export declare function checkboxGroup(id: string, options?: CheckboxGroupOptions): CheckboxGroup;
|
|
61
|
+
export { Checkbox, CheckboxGroup, CheckboxOption, CheckboxOptions, CheckboxGroupOptions };
|
|
62
|
+
//# sourceMappingURL=checkbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../lib/components/checkbox.ts"],"names":[],"mappings":"AAGA,UAAU,cAAc;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,eAAe;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,oBAAoB;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAMD,cAAM,QAAQ;IACV,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,eAAe,CAAC;IACtB,OAAO,CAAC,QAAQ,CAAiC;IACjD,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,SAAS,CAA2D;gBAEhE,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB;IAKrD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,OAAO,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IACpC,QAAQ,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IACrC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAE1B,QAAQ,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,IAAI;IAK5D,QAAQ,IAAI,OAAO;IAInB,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;CAqC9C;AAMD,cAAM,aAAa;IACf,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,oBAAoB,CAAC;IAC3B,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,OAAO,CAA0B;IACzC,OAAO,CAAC,SAAS,CAA2D;gBAEhE,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,oBAAyB;IAU1D,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,SAAS,CAAC,KAAK,EAAE,UAAU,GAAG,YAAY,GAAG,IAAI;IACjD,QAAQ,CAAC,KAAK,GAAE,OAAc,GAAG,IAAI;IACrC,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAE1B,OAAO,CAAC,IAAI,EAAE,cAAc,EAAE,GAAG,IAAI;IAMrC,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI;IAQ5B,QAAQ,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,IAAI;IAK5D,SAAS,IAAI,MAAM,EAAE;IAIrB,OAAO,CAAC,QAAQ;IAShB,OAAO,CAAC,aAAa;IA2BrB,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;CA4B9C;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,eAAoB,GAAG,QAAQ,CAK5E;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,oBAAyB,GAAG,aAAa,CAK3F;AAED,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,cAAc,EAAE,eAAe,EAAE,oBAAoB,EAAE,CAAC"}
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
import generateId from '../utils/idgen.js';
|
|
2
|
+
import { pageState } from '../state/pageState.js';
|
|
3
|
+
// ═══════════════════════════════════════════════════════════
|
|
4
|
+
// Standalone Checkbox (boolean toggle)
|
|
5
|
+
// ═══════════════════════════════════════════════════════════
|
|
6
|
+
class Checkbox {
|
|
7
|
+
constructor(id, options = {}) {
|
|
8
|
+
this._element = null;
|
|
9
|
+
this._wrapper = null;
|
|
10
|
+
this._onChange = null;
|
|
11
|
+
this.id = id || generateId();
|
|
12
|
+
this.opts = options;
|
|
13
|
+
}
|
|
14
|
+
label(value) { this.opts.label = value; return this; }
|
|
15
|
+
checked(value = true) { this.opts.checked = value; if (this._element)
|
|
16
|
+
this._element.checked = value; return this; }
|
|
17
|
+
disabled(value = true) { this.opts.disabled = value; if (this._element)
|
|
18
|
+
this._element.disabled = value; return this; }
|
|
19
|
+
style(value) { this.opts.style = value; return this; }
|
|
20
|
+
class(value) { this.opts.class = value; return this; }
|
|
21
|
+
onChange(fn) {
|
|
22
|
+
this._onChange = fn;
|
|
23
|
+
return this;
|
|
24
|
+
}
|
|
25
|
+
getValue() {
|
|
26
|
+
return this._element?.checked ?? this.opts.checked ?? false;
|
|
27
|
+
}
|
|
28
|
+
render(target) {
|
|
29
|
+
const wrapper = document.createElement('label');
|
|
30
|
+
wrapper.className = 'jux-checkbox';
|
|
31
|
+
wrapper.id = `${this.id}-wrapper`;
|
|
32
|
+
if (this.opts.class)
|
|
33
|
+
wrapper.className += ` ${this.opts.class}`;
|
|
34
|
+
if (this.opts.style)
|
|
35
|
+
wrapper.setAttribute('style', this.opts.style);
|
|
36
|
+
const inp = document.createElement('input');
|
|
37
|
+
inp.type = 'checkbox';
|
|
38
|
+
inp.id = this.id;
|
|
39
|
+
inp.className = 'jux-checkbox-input';
|
|
40
|
+
if (this.opts.checked)
|
|
41
|
+
inp.checked = true;
|
|
42
|
+
if (this.opts.disabled)
|
|
43
|
+
inp.disabled = true;
|
|
44
|
+
inp.addEventListener('change', (e) => {
|
|
45
|
+
if (this._onChange)
|
|
46
|
+
this._onChange(inp.checked, e);
|
|
47
|
+
});
|
|
48
|
+
wrapper.appendChild(inp);
|
|
49
|
+
if (this.opts.label) {
|
|
50
|
+
const text = document.createElement('span');
|
|
51
|
+
text.className = 'jux-checkbox-label';
|
|
52
|
+
text.textContent = this.opts.label;
|
|
53
|
+
wrapper.appendChild(text);
|
|
54
|
+
}
|
|
55
|
+
this._element = inp;
|
|
56
|
+
this._wrapper = wrapper;
|
|
57
|
+
const container = target
|
|
58
|
+
? (typeof target === 'string' ? document.getElementById(target) || document.querySelector(target) : target)
|
|
59
|
+
: document.getElementById('app');
|
|
60
|
+
container?.appendChild(wrapper);
|
|
61
|
+
return this;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
// ═══════════════════════════════════════════════════════════
|
|
65
|
+
// CheckboxGroup (multi-select from options)
|
|
66
|
+
// ═══════════════════════════════════════════════════════════
|
|
67
|
+
class CheckboxGroup {
|
|
68
|
+
constructor(id, options = {}) {
|
|
69
|
+
this._wrapper = null;
|
|
70
|
+
this._inputs = [];
|
|
71
|
+
this._onChange = null;
|
|
72
|
+
this.id = id || generateId();
|
|
73
|
+
this.opts = {
|
|
74
|
+
options: [],
|
|
75
|
+
values: [],
|
|
76
|
+
direction: 'vertical',
|
|
77
|
+
...options
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
label(value) { this.opts.label = value; return this; }
|
|
81
|
+
direction(value) { this.opts.direction = value; return this; }
|
|
82
|
+
disabled(value = true) { this.opts.disabled = value; return this; }
|
|
83
|
+
style(value) { this.opts.style = value; return this; }
|
|
84
|
+
class(value) { this.opts.class = value; return this; }
|
|
85
|
+
options(opts) {
|
|
86
|
+
this.opts.options = opts;
|
|
87
|
+
if (this._wrapper)
|
|
88
|
+
this._rebuild();
|
|
89
|
+
return this;
|
|
90
|
+
}
|
|
91
|
+
values(vals) {
|
|
92
|
+
this.opts.values = vals;
|
|
93
|
+
this._inputs.forEach(inp => {
|
|
94
|
+
inp.checked = vals.includes(inp.value);
|
|
95
|
+
});
|
|
96
|
+
return this;
|
|
97
|
+
}
|
|
98
|
+
onChange(fn) {
|
|
99
|
+
this._onChange = fn;
|
|
100
|
+
return this;
|
|
101
|
+
}
|
|
102
|
+
getValues() {
|
|
103
|
+
return this._inputs.filter(i => i.checked).map(i => i.value);
|
|
104
|
+
}
|
|
105
|
+
_rebuild() {
|
|
106
|
+
if (!this._wrapper)
|
|
107
|
+
return;
|
|
108
|
+
const group = this._wrapper.querySelector('.jux-checkbox-options');
|
|
109
|
+
if (!group)
|
|
110
|
+
return;
|
|
111
|
+
group.innerHTML = '';
|
|
112
|
+
this._inputs = [];
|
|
113
|
+
this._buildOptions(group);
|
|
114
|
+
}
|
|
115
|
+
_buildOptions(container) {
|
|
116
|
+
for (const opt of this.opts.options || []) {
|
|
117
|
+
const item = document.createElement('label');
|
|
118
|
+
item.className = 'jux-checkbox-item';
|
|
119
|
+
const inp = document.createElement('input');
|
|
120
|
+
inp.type = 'checkbox';
|
|
121
|
+
inp.value = opt.value;
|
|
122
|
+
inp.className = 'jux-checkbox-input';
|
|
123
|
+
if (opt.checked || this.opts.values?.includes(opt.value))
|
|
124
|
+
inp.checked = true;
|
|
125
|
+
if (opt.disabled || this.opts.disabled)
|
|
126
|
+
inp.disabled = true;
|
|
127
|
+
inp.addEventListener('change', (e) => {
|
|
128
|
+
if (this._onChange)
|
|
129
|
+
this._onChange(this.getValues(), e);
|
|
130
|
+
});
|
|
131
|
+
const text = document.createElement('span');
|
|
132
|
+
text.className = 'jux-checkbox-label';
|
|
133
|
+
text.textContent = opt.label;
|
|
134
|
+
item.appendChild(inp);
|
|
135
|
+
item.appendChild(text);
|
|
136
|
+
container.appendChild(item);
|
|
137
|
+
this._inputs.push(inp);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
render(target) {
|
|
141
|
+
const wrapper = document.createElement('fieldset');
|
|
142
|
+
wrapper.className = 'jux-checkbox-group';
|
|
143
|
+
wrapper.id = this.id;
|
|
144
|
+
if (this.opts.class)
|
|
145
|
+
wrapper.className += ` ${this.opts.class}`;
|
|
146
|
+
if (this.opts.style)
|
|
147
|
+
wrapper.setAttribute('style', this.opts.style);
|
|
148
|
+
if (this.opts.label) {
|
|
149
|
+
const legend = document.createElement('legend');
|
|
150
|
+
legend.textContent = this.opts.label;
|
|
151
|
+
legend.className = 'jux-checkbox-group-label';
|
|
152
|
+
wrapper.appendChild(legend);
|
|
153
|
+
}
|
|
154
|
+
const optionsDiv = document.createElement('div');
|
|
155
|
+
optionsDiv.className = `jux-checkbox-options jux-checkbox-${this.opts.direction}`;
|
|
156
|
+
this._buildOptions(optionsDiv);
|
|
157
|
+
wrapper.appendChild(optionsDiv);
|
|
158
|
+
this._wrapper = wrapper;
|
|
159
|
+
const container = target
|
|
160
|
+
? (typeof target === 'string' ? document.getElementById(target) || document.querySelector(target) : target)
|
|
161
|
+
: document.getElementById('app');
|
|
162
|
+
container?.appendChild(wrapper);
|
|
163
|
+
return this;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
export function checkbox(id, options = {}) {
|
|
167
|
+
const c = new Checkbox(id, options);
|
|
168
|
+
c.render();
|
|
169
|
+
pageState.__register(c);
|
|
170
|
+
return c;
|
|
171
|
+
}
|
|
172
|
+
export function checkboxGroup(id, options = {}) {
|
|
173
|
+
const g = new CheckboxGroup(id, options);
|
|
174
|
+
g.render();
|
|
175
|
+
pageState.__register(g);
|
|
176
|
+
return g;
|
|
177
|
+
}
|
|
178
|
+
export { Checkbox, CheckboxGroup };
|
|
179
|
+
//# sourceMappingURL=checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../lib/components/checkbox.ts"],"names":[],"mappings":"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"}
|