juxscript 1.1.341 → 1.1.343
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/sidebar.d.ts.map +1 -0
- package/dist/components/{blocks/sidebar.js → sidebar.js} +4 -4
- package/dist/components/sidebar.js.map +1 -0
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/blocks/menu.d.ts +0 -62
- package/dist/components/blocks/menu.d.ts.map +0 -1
- package/dist/components/blocks/menu.js +0 -149
- package/dist/components/blocks/menu.js.map +0 -1
- package/dist/components/blocks/sidebar.d.ts.map +0 -1
- package/dist/components/blocks/sidebar.js.map +0 -1
- package/dist/lib/components/blocks/menu.d.ts +0 -40
- package/dist/lib/components/blocks/menu.d.ts.map +0 -1
- package/dist/lib/components/blocks/menu.js +0 -136
- package/dist/lib/components/button.d.ts +0 -33
- package/dist/lib/components/button.d.ts.map +0 -1
- package/dist/lib/components/button.js +0 -107
- package/dist/lib/components/checkbox.d.ts +0 -62
- package/dist/lib/components/checkbox.d.ts.map +0 -1
- package/dist/lib/components/checkbox.js +0 -178
- package/dist/lib/components/container.d.ts +0 -58
- package/dist/lib/components/container.d.ts.map +0 -1
- package/dist/lib/components/container.js +0 -151
- package/dist/lib/components/data.d.ts +0 -58
- package/dist/lib/components/data.d.ts.map +0 -1
- package/dist/lib/components/data.js +0 -130
- package/dist/lib/components/grid.d.ts +0 -58
- package/dist/lib/components/grid.d.ts.map +0 -1
- package/dist/lib/components/grid.js +0 -127
- package/dist/lib/components/include.d.ts +0 -86
- package/dist/lib/components/include.d.ts.map +0 -1
- package/dist/lib/components/include.js +0 -238
- package/dist/lib/components/input.d.ts +0 -58
- package/dist/lib/components/input.d.ts.map +0 -1
- package/dist/lib/components/input.js +0 -161
- package/dist/lib/components/link.d.ts +0 -35
- package/dist/lib/components/link.d.ts.map +0 -1
- package/dist/lib/components/link.js +0 -135
- package/dist/lib/components/list.d.ts +0 -48
- package/dist/lib/components/list.d.ts.map +0 -1
- package/dist/lib/components/list.js +0 -178
- package/dist/lib/components/nav.d.ts +0 -46
- package/dist/lib/components/nav.d.ts.map +0 -1
- package/dist/lib/components/nav.js +0 -189
- package/dist/lib/components/radio.d.ts +0 -40
- package/dist/lib/components/radio.d.ts.map +0 -1
- package/dist/lib/components/radio.js +0 -112
- package/dist/lib/components/select.d.ts +0 -41
- package/dist/lib/components/select.d.ts.map +0 -1
- package/dist/lib/components/select.js +0 -111
- package/dist/lib/components/store.d.ts +0 -78
- package/dist/lib/components/store.d.ts.map +0 -1
- package/dist/lib/components/store.js +0 -248
- package/dist/lib/components/style.d.ts +0 -27
- package/dist/lib/components/style.d.ts.map +0 -1
- package/dist/lib/components/style.js +0 -52
- package/dist/lib/components/table.d.ts +0 -56
- package/dist/lib/components/table.d.ts.map +0 -1
- package/dist/lib/components/table.js +0 -199
- package/dist/lib/components/tabs.d.ts +0 -52
- package/dist/lib/components/tabs.d.ts.map +0 -1
- package/dist/lib/components/tabs.js +0 -206
- package/dist/lib/components/tag.d.ts +0 -41
- package/dist/lib/components/tag.d.ts.map +0 -1
- package/dist/lib/components/tag.js +0 -103
- package/dist/lib/devtools/devtools.d.ts +0 -3
- package/dist/lib/devtools/devtools.d.ts.map +0 -1
- package/dist/lib/devtools/devtools.js +0 -181
- package/dist/lib/index.d.ts +0 -70
- package/dist/lib/index.d.ts.map +0 -1
- package/dist/lib/index.js +0 -65
- package/dist/lib/state/pageState.d.ts +0 -19
- package/dist/lib/state/pageState.d.ts.map +0 -1
- package/dist/lib/state/pageState.js +0 -360
- package/dist/lib/utils/codeHighlight.d.ts +0 -7
- package/dist/lib/utils/codeHighlight.d.ts.map +0 -1
- package/dist/lib/utils/codeHighlight.js +0 -105
- package/dist/lib/utils/codeparser.d.ts +0 -29
- package/dist/lib/utils/codeparser.d.ts.map +0 -1
- package/dist/lib/utils/codeparser.js +0 -384
- package/dist/lib/utils/fetch.d.ts +0 -176
- package/dist/lib/utils/fetch.d.ts.map +0 -1
- package/dist/lib/utils/fetch.js +0 -427
- package/dist/lib/utils/formatId.d.ts +0 -16
- package/dist/lib/utils/formatId.d.ts.map +0 -1
- package/dist/lib/utils/formatId.js +0 -27
- package/dist/lib/utils/idgen.d.ts +0 -2
- package/dist/lib/utils/idgen.d.ts.map +0 -1
- package/dist/lib/utils/idgen.js +0 -4
- package/dist/lib/utils/niceName.d.ts +0 -14
- package/dist/lib/utils/niceName.d.ts.map +0 -1
- package/dist/lib/utils/niceName.js +0 -22
- /package/dist/components/{blocks/sidebar.d.ts → sidebar.d.ts} +0 -0
|
@@ -1,206 +0,0 @@
|
|
|
1
|
-
import generateId from '../utils/idgen.js';
|
|
2
|
-
import { pageState } from '../state/pageState.js';
|
|
3
|
-
class Tabs {
|
|
4
|
-
constructor(id, options = {}) {
|
|
5
|
-
this._items = [];
|
|
6
|
-
this._value = null;
|
|
7
|
-
this._onChange = null;
|
|
8
|
-
this.id = id || generateId();
|
|
9
|
-
this.opts = {
|
|
10
|
-
tabListClass: 'jux-tabs-list',
|
|
11
|
-
tabClass: 'jux-tab',
|
|
12
|
-
tabActiveClass: 'jux-tab--active',
|
|
13
|
-
panelClass: 'jux-tab-panel',
|
|
14
|
-
...options
|
|
15
|
-
};
|
|
16
|
-
this._element = document.createElement('div');
|
|
17
|
-
this._element.id = this.id;
|
|
18
|
-
this._element.setAttribute('data-jux-tabs', '');
|
|
19
|
-
if (this.opts.class)
|
|
20
|
-
this._element.className = this.opts.class;
|
|
21
|
-
if (this.opts.style)
|
|
22
|
-
this._element.setAttribute('style', this.opts.style);
|
|
23
|
-
// Tab list (the clickable triggers)
|
|
24
|
-
this._tabList = document.createElement('div');
|
|
25
|
-
this._tabList.className = this.opts.tabListClass;
|
|
26
|
-
this._tabList.setAttribute('role', 'tablist');
|
|
27
|
-
this._element.appendChild(this._tabList);
|
|
28
|
-
// Panel container (the content areas)
|
|
29
|
-
this._panelContainer = document.createElement('div');
|
|
30
|
-
this._panelContainer.className = 'jux-tabs-panels';
|
|
31
|
-
this._element.appendChild(this._panelContainer);
|
|
32
|
-
const resolvedTarget = this.opts.target;
|
|
33
|
-
const container = resolvedTarget
|
|
34
|
-
? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
|
|
35
|
-
: document.getElementById('app');
|
|
36
|
-
container?.appendChild(this._element);
|
|
37
|
-
if (this.opts.items) {
|
|
38
|
-
this.addItems(this.opts.items);
|
|
39
|
-
}
|
|
40
|
-
if (this.opts.defaultTab) {
|
|
41
|
-
this.setValue(this.opts.defaultTab);
|
|
42
|
-
}
|
|
43
|
-
else if (this._items.length > 0) {
|
|
44
|
-
this.setValue(this._items[0].id);
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
// ═══════════════════════════════════════════════════════════
|
|
48
|
-
// STANDARD COLLECTION API
|
|
49
|
-
// ═══════════════════════════════════════════════════════════
|
|
50
|
-
addItem(item) {
|
|
51
|
-
const tabItem = { ...item, id: item.id || `${this.id}-tab-${this._items.length}` };
|
|
52
|
-
this._items.push(tabItem);
|
|
53
|
-
this._renderTab(tabItem);
|
|
54
|
-
this._renderPanel(tabItem);
|
|
55
|
-
if (this._items.length === 1)
|
|
56
|
-
this.setValue(tabItem.id);
|
|
57
|
-
this._dispatchChange();
|
|
58
|
-
return this;
|
|
59
|
-
}
|
|
60
|
-
addItems(items) {
|
|
61
|
-
for (const item of items) {
|
|
62
|
-
const tabItem = { ...item, id: item.id || `${this.id}-tab-${this._items.length}` };
|
|
63
|
-
this._items.push(tabItem);
|
|
64
|
-
this._renderTab(tabItem);
|
|
65
|
-
this._renderPanel(tabItem);
|
|
66
|
-
}
|
|
67
|
-
if (this._items.length > 0 && !this._value) {
|
|
68
|
-
this.setValue(this._items[0].id);
|
|
69
|
-
}
|
|
70
|
-
this._dispatchChange();
|
|
71
|
-
return this;
|
|
72
|
-
}
|
|
73
|
-
removeItem(key) {
|
|
74
|
-
const idx = typeof key === 'number' ? key : this._items.findIndex(i => i.id === key);
|
|
75
|
-
if (idx > -1) {
|
|
76
|
-
const removed = this._items.splice(idx, 1)[0];
|
|
77
|
-
this._renderAll();
|
|
78
|
-
if (this._value === removed.id && this._items.length > 0) {
|
|
79
|
-
this.setValue(this._items[0].id);
|
|
80
|
-
}
|
|
81
|
-
else if (this._items.length === 0) {
|
|
82
|
-
this._value = null;
|
|
83
|
-
}
|
|
84
|
-
this._dispatchChange();
|
|
85
|
-
}
|
|
86
|
-
return this;
|
|
87
|
-
}
|
|
88
|
-
updateItem(key, updates) {
|
|
89
|
-
const idx = typeof key === 'number' ? key : this._items.findIndex(i => i.id === key);
|
|
90
|
-
if (idx > -1) {
|
|
91
|
-
this._items[idx] = { ...this._items[idx], ...updates };
|
|
92
|
-
this._renderAll();
|
|
93
|
-
this._updateActiveState();
|
|
94
|
-
this._dispatchChange();
|
|
95
|
-
}
|
|
96
|
-
return this;
|
|
97
|
-
}
|
|
98
|
-
clearItems() {
|
|
99
|
-
this._items = [];
|
|
100
|
-
this._value = null;
|
|
101
|
-
this._tabList.innerHTML = '';
|
|
102
|
-
this._panelContainer.innerHTML = '';
|
|
103
|
-
this._dispatchChange();
|
|
104
|
-
return this;
|
|
105
|
-
}
|
|
106
|
-
getItems() { return [...this._items]; }
|
|
107
|
-
getCount() { return this._items.length; }
|
|
108
|
-
// ═══════════════════════════════════════════════════════════
|
|
109
|
-
// PANEL ACCESS (for rendering content into tab panels)
|
|
110
|
-
// ═══════════════════════════════════════════════════════════
|
|
111
|
-
/** Get the panel element for a tab so you can render jux components into it */
|
|
112
|
-
getPanel(tabId) {
|
|
113
|
-
return this._panelContainer.querySelector(`[data-tab-panel="${tabId}"]`);
|
|
114
|
-
}
|
|
115
|
-
// ═══════════════════════════════════════════════════════════
|
|
116
|
-
// PAGESTATE INTEGRATION
|
|
117
|
-
// ═══════════════════════════════════════════════════════════
|
|
118
|
-
getValue() { return this._value; }
|
|
119
|
-
setValue(val) {
|
|
120
|
-
this._value = val;
|
|
121
|
-
this._updateActiveState();
|
|
122
|
-
return this;
|
|
123
|
-
}
|
|
124
|
-
getElement() { return this._element; }
|
|
125
|
-
onChange(fn) {
|
|
126
|
-
this._onChange = fn;
|
|
127
|
-
return this;
|
|
128
|
-
}
|
|
129
|
-
// ═══════════════════════════════════════════════════════════
|
|
130
|
-
// INTERNAL
|
|
131
|
-
// ═══════════════════════════════════════════════════════════
|
|
132
|
-
_renderTab(item) {
|
|
133
|
-
const btn = document.createElement('button');
|
|
134
|
-
btn.id = `${item.id}-trigger`;
|
|
135
|
-
btn.className = this.opts.tabClass;
|
|
136
|
-
btn.setAttribute('role', 'tab');
|
|
137
|
-
btn.setAttribute('data-tab-id', item.id);
|
|
138
|
-
btn.textContent = item.label;
|
|
139
|
-
if (item.disabled) {
|
|
140
|
-
btn.disabled = true;
|
|
141
|
-
btn.setAttribute('data-disabled', 'true');
|
|
142
|
-
}
|
|
143
|
-
btn.addEventListener('click', () => {
|
|
144
|
-
if (item.disabled)
|
|
145
|
-
return;
|
|
146
|
-
this._value = item.id;
|
|
147
|
-
this._updateActiveState();
|
|
148
|
-
if (this._onChange)
|
|
149
|
-
this._onChange(this._value);
|
|
150
|
-
this._element.dispatchEvent(new Event('change', { bubbles: false }));
|
|
151
|
-
});
|
|
152
|
-
this._tabList.appendChild(btn);
|
|
153
|
-
}
|
|
154
|
-
_renderPanel(item) {
|
|
155
|
-
const panel = document.createElement('div');
|
|
156
|
-
panel.id = `${item.id}-panel`;
|
|
157
|
-
panel.className = this.opts.panelClass;
|
|
158
|
-
panel.setAttribute('role', 'tabpanel');
|
|
159
|
-
panel.setAttribute('data-tab-panel', item.id);
|
|
160
|
-
if (item.content)
|
|
161
|
-
panel.innerHTML = item.content;
|
|
162
|
-
panel.style.display = 'none';
|
|
163
|
-
this._panelContainer.appendChild(panel);
|
|
164
|
-
}
|
|
165
|
-
_renderAll() {
|
|
166
|
-
this._tabList.innerHTML = '';
|
|
167
|
-
this._panelContainer.innerHTML = '';
|
|
168
|
-
for (const item of this._items) {
|
|
169
|
-
this._renderTab(item);
|
|
170
|
-
this._renderPanel(item);
|
|
171
|
-
}
|
|
172
|
-
this._updateActiveState();
|
|
173
|
-
}
|
|
174
|
-
_updateActiveState() {
|
|
175
|
-
// Tabs
|
|
176
|
-
const tabs = this._tabList.querySelectorAll('[role="tab"]');
|
|
177
|
-
tabs.forEach(tab => {
|
|
178
|
-
const tabId = tab.getAttribute('data-tab-id');
|
|
179
|
-
if (tabId === this._value) {
|
|
180
|
-
tab.classList.add(this.opts.tabActiveClass);
|
|
181
|
-
tab.setAttribute('aria-selected', 'true');
|
|
182
|
-
}
|
|
183
|
-
else {
|
|
184
|
-
tab.classList.remove(this.opts.tabActiveClass);
|
|
185
|
-
tab.setAttribute('aria-selected', 'false');
|
|
186
|
-
}
|
|
187
|
-
});
|
|
188
|
-
// Panels
|
|
189
|
-
const panels = this._panelContainer.querySelectorAll('[role="tabpanel"]');
|
|
190
|
-
panels.forEach(panel => {
|
|
191
|
-
const panelId = panel.getAttribute('data-tab-panel');
|
|
192
|
-
panel.style.display = panelId === this._value ? '' : 'none';
|
|
193
|
-
});
|
|
194
|
-
}
|
|
195
|
-
_dispatchChange() {
|
|
196
|
-
this._element.setAttribute('data-count', String(this._items.length));
|
|
197
|
-
this._element.dispatchEvent(new Event('change', { bubbles: false }));
|
|
198
|
-
}
|
|
199
|
-
}
|
|
200
|
-
export function tabs(id, options = {}) {
|
|
201
|
-
const t = new Tabs(id, options);
|
|
202
|
-
pageState.__register(t);
|
|
203
|
-
return t;
|
|
204
|
-
}
|
|
205
|
-
export { Tabs };
|
|
206
|
-
export default tabs;
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
interface TagOptions {
|
|
2
|
-
content?: string;
|
|
3
|
-
class?: string;
|
|
4
|
-
style?: string;
|
|
5
|
-
target?: string;
|
|
6
|
-
[key: string]: any;
|
|
7
|
-
}
|
|
8
|
-
declare class Tag {
|
|
9
|
-
id: string;
|
|
10
|
-
tagName: string;
|
|
11
|
-
opts: TagOptions;
|
|
12
|
-
private _element;
|
|
13
|
-
constructor(id: string, tagName: string, options?: TagOptions);
|
|
14
|
-
content(value: string): this;
|
|
15
|
-
class(value: string): this;
|
|
16
|
-
style(value: string): this;
|
|
17
|
-
getValue(): string;
|
|
18
|
-
getContent(): string;
|
|
19
|
-
setValue(val: string): this;
|
|
20
|
-
setContent(val: string): this;
|
|
21
|
-
setClass(val: string): this;
|
|
22
|
-
setStyle(val: string): this;
|
|
23
|
-
setInnerHTML(val: string): this;
|
|
24
|
-
getElement(): HTMLElement | null;
|
|
25
|
-
render(target?: string | HTMLElement): this;
|
|
26
|
-
}
|
|
27
|
-
export declare function tag(id: string, tagName: string, options?: TagOptions): Tag;
|
|
28
|
-
export declare function div(id: string, options?: TagOptions): Tag;
|
|
29
|
-
export declare function span(id: string, options?: TagOptions): Tag;
|
|
30
|
-
export declare function p(id: string, options?: TagOptions): Tag;
|
|
31
|
-
export declare function code(id: string, options?: TagOptions): Tag;
|
|
32
|
-
export declare function pre(id: string, options?: TagOptions): Tag;
|
|
33
|
-
export declare function h1(id: string, options?: TagOptions): Tag;
|
|
34
|
-
export declare function h2(id: string, options?: TagOptions): Tag;
|
|
35
|
-
export declare function h3(id: string, options?: TagOptions): Tag;
|
|
36
|
-
export declare function h4(id: string, options?: TagOptions): Tag;
|
|
37
|
-
export declare function h5(id: string, options?: TagOptions): Tag;
|
|
38
|
-
export declare function h6(id: string, options?: TagOptions): Tag;
|
|
39
|
-
export { Tag, TagOptions };
|
|
40
|
-
export default tag;
|
|
41
|
-
//# sourceMappingURL=tag.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../lib/components/tag.ts"],"names":[],"mappings":"AAIA,UAAU,UAAU;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,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;AAED,cAAM,GAAG;IACL,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe;IAOjE,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC5B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAG1B,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IACpB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC3B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC7B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC3B,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAE/B,UAAU,IAAI,WAAW,GAAG,IAAI;IAEhC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW;CAuBvC;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAKxE;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAqC;AAC7F,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAsC;AAC/F,wBAAgB,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAmC;AAEzF,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAqCxD;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAqC;AAC7F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAE3F,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC;AAC3B,eAAe,GAAG,CAAC"}
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
import generateId from '../utils/idgen.js';
|
|
2
|
-
import { pageState } from '../state/pageState.js';
|
|
3
|
-
import codeparser from '../utils/codeparser.js';
|
|
4
|
-
class Tag {
|
|
5
|
-
constructor(id, tagName, options = {}) {
|
|
6
|
-
this._element = null;
|
|
7
|
-
this.id = id || generateId();
|
|
8
|
-
this.tagName = tagName;
|
|
9
|
-
this.opts = options;
|
|
10
|
-
}
|
|
11
|
-
// Fluent API
|
|
12
|
-
content(value) { this.opts.content = value; if (this._element)
|
|
13
|
-
this._element.textContent = value; return this; }
|
|
14
|
-
class(value) { this.opts.class = value; if (this._element)
|
|
15
|
-
this._element.className = value; return this; }
|
|
16
|
-
style(value) { this.opts.style = value; if (this._element)
|
|
17
|
-
this._element.setAttribute('style', value); return this; }
|
|
18
|
-
// Getters/Setters for pageState integration
|
|
19
|
-
getValue() { return this._element?.textContent ?? this.opts.content ?? ''; }
|
|
20
|
-
getContent() { return this._element?.textContent ?? this.opts.content ?? ''; }
|
|
21
|
-
setValue(val) { this.opts.content = val; if (this._element)
|
|
22
|
-
this._element.textContent = val; return this; }
|
|
23
|
-
setContent(val) { return this.setValue(val); }
|
|
24
|
-
setClass(val) { this.opts.class = val; if (this._element)
|
|
25
|
-
this._element.className = val; return this; }
|
|
26
|
-
setStyle(val) { this.opts.style = val; if (this._element)
|
|
27
|
-
this._element.setAttribute('style', val); return this; }
|
|
28
|
-
setInnerHTML(val) { if (this._element)
|
|
29
|
-
this._element.innerHTML = val; return this; }
|
|
30
|
-
getElement() { return this._element; }
|
|
31
|
-
render(target) {
|
|
32
|
-
const el = document.createElement(this.tagName);
|
|
33
|
-
el.id = this.id;
|
|
34
|
-
if (this.opts.content)
|
|
35
|
-
el.textContent = this.opts.content;
|
|
36
|
-
if (this.opts.class)
|
|
37
|
-
el.className = this.opts.class;
|
|
38
|
-
if (this.opts.style)
|
|
39
|
-
el.setAttribute('style', this.opts.style);
|
|
40
|
-
for (const [key, value] of Object.entries(this.opts)) {
|
|
41
|
-
if (['content', 'class', 'style', 'target'].includes(key))
|
|
42
|
-
continue;
|
|
43
|
-
el.setAttribute(key, String(value));
|
|
44
|
-
}
|
|
45
|
-
this._element = el;
|
|
46
|
-
// Resolve target: param > opts.target > #app
|
|
47
|
-
const resolvedTarget = target || this.opts.target;
|
|
48
|
-
const container = resolvedTarget
|
|
49
|
-
? (typeof resolvedTarget === 'string' ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget) : resolvedTarget)
|
|
50
|
-
: document.getElementById('app');
|
|
51
|
-
container?.appendChild(el);
|
|
52
|
-
return this;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
export function tag(id, tagName, options = {}) {
|
|
56
|
-
const t = new Tag(id, tagName, options);
|
|
57
|
-
t.render();
|
|
58
|
-
pageState.__register(t);
|
|
59
|
-
return t;
|
|
60
|
-
}
|
|
61
|
-
export function div(id, options = {}) { return tag(id, 'div', options); }
|
|
62
|
-
export function span(id, options = {}) { return tag(id, 'span', options); }
|
|
63
|
-
export function p(id, options = {}) { return tag(id, 'p', options); }
|
|
64
|
-
export function code(id, options = {}) {
|
|
65
|
-
// Inject highlight styles once
|
|
66
|
-
if (!document.getElementById('__jux-hl-styles')) {
|
|
67
|
-
const style = document.createElement('style');
|
|
68
|
-
style.id = '__jux-hl-styles';
|
|
69
|
-
style.textContent = codeparser.getCSS();
|
|
70
|
-
document.head.appendChild(style);
|
|
71
|
-
}
|
|
72
|
-
// Parse and highlight content
|
|
73
|
-
const raw = options.content || '';
|
|
74
|
-
const trimmed = raw.replace(/^\n+/, '').replace(/\n+$/, '');
|
|
75
|
-
const parsed = codeparser.parse(trimmed);
|
|
76
|
-
// Build line-by-line HTML
|
|
77
|
-
const linesHtml = parsed.map(line => `<div class="jux-code-line"><span class="jux-code-line-number">${line.lineNumber}</span><span class="jux-code-line-content">${line.html}</span></div>`).join('');
|
|
78
|
-
// Create as <pre> with inner code structure
|
|
79
|
-
const t = new Tag(id, 'pre', {
|
|
80
|
-
...options,
|
|
81
|
-
content: undefined,
|
|
82
|
-
class: `jux-code${options.class ? ' ' + options.class : ''}`
|
|
83
|
-
});
|
|
84
|
-
t.render();
|
|
85
|
-
const el = t.getElement();
|
|
86
|
-
if (el) {
|
|
87
|
-
const codeEl = document.createElement('code');
|
|
88
|
-
codeEl.className = 'jux-code-lines';
|
|
89
|
-
codeEl.innerHTML = linesHtml;
|
|
90
|
-
el.appendChild(codeEl);
|
|
91
|
-
}
|
|
92
|
-
pageState.__register(t);
|
|
93
|
-
return t;
|
|
94
|
-
}
|
|
95
|
-
export function pre(id, options = {}) { return tag(id, 'pre', options); }
|
|
96
|
-
export function h1(id, options = {}) { return tag(id, 'h1', options); }
|
|
97
|
-
export function h2(id, options = {}) { return tag(id, 'h2', options); }
|
|
98
|
-
export function h3(id, options = {}) { return tag(id, 'h3', options); }
|
|
99
|
-
export function h4(id, options = {}) { return tag(id, 'h4', options); }
|
|
100
|
-
export function h5(id, options = {}) { return tag(id, 'h5', options); }
|
|
101
|
-
export function h6(id, options = {}) { return tag(id, 'h6', options); }
|
|
102
|
-
export { Tag };
|
|
103
|
-
export default tag;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"devtools.d.ts","sourceRoot":"","sources":["../../../lib/devtools/devtools.ts"],"names":[],"mappings":"AAoJA,wBAAgB,QAAQ,CAAC,IAAI,GAAE,OAAc,GAAG,IAAI,CA0CnD;AAED,eAAe,QAAQ,CAAC"}
|
|
@@ -1,181 +0,0 @@
|
|
|
1
|
-
import { pageState } from '../state/pageState.js';
|
|
2
|
-
let panel = null;
|
|
3
|
-
let interval = null;
|
|
4
|
-
const STYLES = `
|
|
5
|
-
position: fixed;
|
|
6
|
-
bottom: 0;
|
|
7
|
-
right: 0;
|
|
8
|
-
width: 420px;
|
|
9
|
-
max-height: 60vh;
|
|
10
|
-
overflow-y: auto;
|
|
11
|
-
background: #1e1e2e;
|
|
12
|
-
color: #cdd6f4;
|
|
13
|
-
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
14
|
-
font-size: 11px;
|
|
15
|
-
line-height: 1.4;
|
|
16
|
-
padding: 0;
|
|
17
|
-
border-top-left-radius: 8px;
|
|
18
|
-
box-shadow: -2px -2px 12px rgba(0,0,0,0.4);
|
|
19
|
-
z-index: 99999;
|
|
20
|
-
border: 1px solid #45475a;
|
|
21
|
-
`;
|
|
22
|
-
const HEADER_STYLES = `
|
|
23
|
-
position: sticky;
|
|
24
|
-
top: 0;
|
|
25
|
-
background: #313244;
|
|
26
|
-
padding: 6px 10px;
|
|
27
|
-
display: flex;
|
|
28
|
-
justify-content: space-between;
|
|
29
|
-
align-items: center;
|
|
30
|
-
border-bottom: 1px solid #45475a;
|
|
31
|
-
cursor: move;
|
|
32
|
-
`;
|
|
33
|
-
function escapeHtml(str) {
|
|
34
|
-
return String(str)
|
|
35
|
-
.replace(/&/g, '&')
|
|
36
|
-
.replace(/</g, '<')
|
|
37
|
-
.replace(/>/g, '>')
|
|
38
|
-
.replace(/"/g, '"');
|
|
39
|
-
}
|
|
40
|
-
function formatValue(val) {
|
|
41
|
-
if (val === undefined)
|
|
42
|
-
return '<span style="color:#6c7086">undefined</span>';
|
|
43
|
-
if (val === null)
|
|
44
|
-
return '<span style="color:#6c7086">null</span>';
|
|
45
|
-
if (typeof val === 'boolean')
|
|
46
|
-
return `<span style="color:#fab387">${val}</span>`;
|
|
47
|
-
if (typeof val === 'number')
|
|
48
|
-
return `<span style="color:#fab387">${val}</span>`;
|
|
49
|
-
if (typeof val === 'string') {
|
|
50
|
-
const truncated = val.length > 40 ? escapeHtml(val.slice(0, 40)) + '…' : escapeHtml(val);
|
|
51
|
-
return `<span style="color:#a6e3a1">"${truncated}"</span>`;
|
|
52
|
-
}
|
|
53
|
-
if (Array.isArray(val))
|
|
54
|
-
return `<span style="color:#89b4fa">Array[${val.length}]</span>`;
|
|
55
|
-
if (typeof val === 'object') {
|
|
56
|
-
try {
|
|
57
|
-
const keys = Object.keys(val);
|
|
58
|
-
return `<span style="color:#89b4fa">{${keys.slice(0, 3).join(', ')}${keys.length > 3 ? '…' : ''}}</span>`;
|
|
59
|
-
}
|
|
60
|
-
catch {
|
|
61
|
-
return '<span style="color:#89b4fa">{…}</span>';
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
if (typeof val === 'function')
|
|
65
|
-
return '<span style="color:#cba6f7">ƒ()</span>';
|
|
66
|
-
return escapeHtml(String(val));
|
|
67
|
-
}
|
|
68
|
-
function buildContent() {
|
|
69
|
-
const keys = pageState.__keys?.() ?? [];
|
|
70
|
-
if (keys.length === 0) {
|
|
71
|
-
return '<div style="padding:10px;color:#6c7086">No components registered</div>';
|
|
72
|
-
}
|
|
73
|
-
let html = '';
|
|
74
|
-
for (const key of keys) {
|
|
75
|
-
const proxy = pageState[key];
|
|
76
|
-
if (!proxy)
|
|
77
|
-
continue;
|
|
78
|
-
// Read known props
|
|
79
|
-
const value = proxy.value;
|
|
80
|
-
const content = proxy.content;
|
|
81
|
-
const checked = proxy.checked;
|
|
82
|
-
// Read event flags
|
|
83
|
-
const events = [];
|
|
84
|
-
for (const evt of ['blur', 'focus', 'click', 'change', 'input', 'hover', 'active', 'focused']) {
|
|
85
|
-
try {
|
|
86
|
-
if (proxy[evt] === true)
|
|
87
|
-
events.push(evt);
|
|
88
|
-
}
|
|
89
|
-
catch { /* skip */ }
|
|
90
|
-
}
|
|
91
|
-
// Component type detection
|
|
92
|
-
const el = proxy.getElement?.();
|
|
93
|
-
let typeLabel = 'unknown';
|
|
94
|
-
let typeColor = '#6c7086';
|
|
95
|
-
if (el instanceof HTMLElement) {
|
|
96
|
-
const tag = el.tagName.toLowerCase();
|
|
97
|
-
const isStore = el.getAttribute('data-jux-store');
|
|
98
|
-
if (isStore) {
|
|
99
|
-
typeLabel = `store:${isStore}`;
|
|
100
|
-
typeColor = '#f38ba8';
|
|
101
|
-
}
|
|
102
|
-
else if (el instanceof HTMLInputElement) {
|
|
103
|
-
typeLabel = `input[${el.type}]`;
|
|
104
|
-
typeColor = '#89dceb';
|
|
105
|
-
}
|
|
106
|
-
else if (el instanceof HTMLSelectElement) {
|
|
107
|
-
typeLabel = 'select';
|
|
108
|
-
typeColor = '#89dceb';
|
|
109
|
-
}
|
|
110
|
-
else {
|
|
111
|
-
typeLabel = tag;
|
|
112
|
-
typeColor = '#94e2d5';
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
html += `
|
|
116
|
-
<div style="border-bottom:1px solid #313244;padding:6px 10px;">
|
|
117
|
-
<div style="display:flex;justify-content:space-between;margin-bottom:2px;">
|
|
118
|
-
<span style="color:#cba6f7;font-weight:bold;">${escapeHtml(key)}</span>
|
|
119
|
-
<span style="color:${typeColor};font-size:10px;">${escapeHtml(typeLabel)}</span>
|
|
120
|
-
</div>
|
|
121
|
-
<div style="padding-left:8px;">`;
|
|
122
|
-
if (value !== undefined) {
|
|
123
|
-
html += `<div><span style="color:#74c7ec">value:</span> ${formatValue(value)}</div>`;
|
|
124
|
-
}
|
|
125
|
-
if (content !== undefined && content !== value) {
|
|
126
|
-
html += `<div><span style="color:#74c7ec">content:</span> ${formatValue(content)}</div>`;
|
|
127
|
-
}
|
|
128
|
-
if (checked !== undefined) {
|
|
129
|
-
html += `<div><span style="color:#74c7ec">checked:</span> ${formatValue(checked)}</div>`;
|
|
130
|
-
}
|
|
131
|
-
if (events.length > 0) {
|
|
132
|
-
html += `<div><span style="color:#f9e2af">events:</span> <span style="color:#fab387">${events.join(', ')}</span></div>`;
|
|
133
|
-
}
|
|
134
|
-
html += `</div></div>`;
|
|
135
|
-
}
|
|
136
|
-
return html;
|
|
137
|
-
}
|
|
138
|
-
function refresh() {
|
|
139
|
-
if (!panel)
|
|
140
|
-
return;
|
|
141
|
-
const body = panel.querySelector('[data-devtools-body]');
|
|
142
|
-
if (body)
|
|
143
|
-
body.innerHTML = buildContent();
|
|
144
|
-
}
|
|
145
|
-
export function devtools(show = true) {
|
|
146
|
-
if (!show) {
|
|
147
|
-
if (panel) {
|
|
148
|
-
panel.remove();
|
|
149
|
-
panel = null;
|
|
150
|
-
}
|
|
151
|
-
if (interval) {
|
|
152
|
-
clearInterval(interval);
|
|
153
|
-
interval = null;
|
|
154
|
-
}
|
|
155
|
-
return;
|
|
156
|
-
}
|
|
157
|
-
if (panel) {
|
|
158
|
-
refresh();
|
|
159
|
-
return;
|
|
160
|
-
}
|
|
161
|
-
panel = document.createElement('div');
|
|
162
|
-
panel.id = '__jux-devtools';
|
|
163
|
-
panel.setAttribute('style', STYLES);
|
|
164
|
-
panel.innerHTML = `
|
|
165
|
-
<div style="${HEADER_STYLES}">
|
|
166
|
-
<span style="color:#f9e2af;font-weight:bold;">🔧 JUX DevTools</span>
|
|
167
|
-
<div>
|
|
168
|
-
<button data-devtools-refresh style="background:none;border:1px solid #45475a;color:#cdd6f4;cursor:pointer;padding:2px 6px;border-radius:3px;margin-right:4px;font-size:10px;">↻</button>
|
|
169
|
-
<button data-devtools-close style="background:none;border:1px solid #45475a;color:#cdd6f4;cursor:pointer;padding:2px 6px;border-radius:3px;font-size:10px;">✕</button>
|
|
170
|
-
</div>
|
|
171
|
-
</div>
|
|
172
|
-
<div data-devtools-body></div>
|
|
173
|
-
`;
|
|
174
|
-
document.body.appendChild(panel);
|
|
175
|
-
panel.querySelector('[data-devtools-close]')?.addEventListener('click', () => devtools(false));
|
|
176
|
-
panel.querySelector('[data-devtools-refresh]')?.addEventListener('click', () => refresh());
|
|
177
|
-
refresh();
|
|
178
|
-
// Auto-refresh every 500ms to catch async changes
|
|
179
|
-
interval = setInterval(refresh, 500);
|
|
180
|
-
}
|
|
181
|
-
export default devtools;
|
package/dist/lib/index.d.ts
DELETED
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { tag, div, h1, h2, h3, h4, h5, h6, p, span, pre, code } from "./components/tag.js";
|
|
2
|
-
import { include } from "./components/include.js";
|
|
3
|
-
import { input, email, password, number, tel, url, search, date, time, datetime, color, range, file, hidden } from "./components/input.js";
|
|
4
|
-
import { select } from "./components/select.js";
|
|
5
|
-
import { radio } from "./components/radio.js";
|
|
6
|
-
import { checkbox, checkboxGroup } from "./components/checkbox.js";
|
|
7
|
-
import { pageState } from "./state/pageState.js";
|
|
8
|
-
import { data } from "./components/data.js";
|
|
9
|
-
import { store } from "./components/store.js";
|
|
10
|
-
import { devtools } from "./devtools/devtools.js";
|
|
11
|
-
import { style } from "./components/style.js";
|
|
12
|
-
import { nav } from "./components/nav.js";
|
|
13
|
-
import { table } from "./components/table.js";
|
|
14
|
-
import { list } from "./components/list.js";
|
|
15
|
-
import { tabs } from "./components/tabs.js";
|
|
16
|
-
import { button, btn } from "./components/button.js";
|
|
17
|
-
import { link, a } from "./components/link.js";
|
|
18
|
-
import { container } from "./components/container.js";
|
|
19
|
-
import { grid } from "./components/grid.js";
|
|
20
|
-
import { menu } from "./components/blocks/menu.js";
|
|
21
|
-
export declare const jux: {
|
|
22
|
-
tag: typeof tag;
|
|
23
|
-
div: typeof div;
|
|
24
|
-
h1: typeof h1;
|
|
25
|
-
h2: typeof h2;
|
|
26
|
-
h3: typeof h3;
|
|
27
|
-
h4: typeof h4;
|
|
28
|
-
h5: typeof h5;
|
|
29
|
-
h6: typeof h6;
|
|
30
|
-
p: typeof p;
|
|
31
|
-
span: typeof span;
|
|
32
|
-
pre: typeof pre;
|
|
33
|
-
code: typeof code;
|
|
34
|
-
include: typeof include;
|
|
35
|
-
input: typeof input;
|
|
36
|
-
email: typeof email;
|
|
37
|
-
password: typeof password;
|
|
38
|
-
number: typeof number;
|
|
39
|
-
tel: typeof tel;
|
|
40
|
-
url: typeof url;
|
|
41
|
-
search: typeof search;
|
|
42
|
-
date: typeof date;
|
|
43
|
-
time: typeof time;
|
|
44
|
-
datetime: typeof datetime;
|
|
45
|
-
color: typeof color;
|
|
46
|
-
range: typeof range;
|
|
47
|
-
file: typeof file;
|
|
48
|
-
hidden: typeof hidden;
|
|
49
|
-
select: typeof select;
|
|
50
|
-
radio: typeof radio;
|
|
51
|
-
checkbox: typeof checkbox;
|
|
52
|
-
checkboxGroup: typeof checkboxGroup;
|
|
53
|
-
data: typeof data;
|
|
54
|
-
store: typeof store;
|
|
55
|
-
devtools: typeof devtools;
|
|
56
|
-
style: typeof style;
|
|
57
|
-
nav: typeof nav;
|
|
58
|
-
table: typeof table;
|
|
59
|
-
list: typeof list;
|
|
60
|
-
tabs: typeof tabs;
|
|
61
|
-
button: typeof button;
|
|
62
|
-
btn: typeof btn;
|
|
63
|
-
link: typeof link;
|
|
64
|
-
a: typeof a;
|
|
65
|
-
container: typeof container;
|
|
66
|
-
grid: typeof grid;
|
|
67
|
-
menu: typeof menu;
|
|
68
|
-
};
|
|
69
|
-
export { pageState };
|
|
70
|
-
//# sourceMappingURL=index.d.ts.map
|
package/dist/lib/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAEnD,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Cf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
|