juxscript 1.1.35 → 1.1.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/lib/components/tabs.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { BaseComponent, BaseState } from './base/BaseComponent.js';
|
|
|
2
2
|
export interface Tab {
|
|
3
3
|
id: string;
|
|
4
4
|
label: string;
|
|
5
|
-
content: string
|
|
5
|
+
content: string | BaseComponent<any>;
|
|
6
6
|
icon?: string;
|
|
7
7
|
}
|
|
8
8
|
export interface TabsOptions {
|
|
@@ -33,7 +33,7 @@ export declare class Tabs extends BaseComponent<TabsState> {
|
|
|
33
33
|
/**
|
|
34
34
|
* Update content of a specific tab by ID
|
|
35
35
|
*/
|
|
36
|
-
updateTabContent(tabId: string, content: string): this;
|
|
36
|
+
updateTabContent(tabId: string, content: string | BaseComponent<any>): this;
|
|
37
37
|
/**
|
|
38
38
|
* Get tab by ID
|
|
39
39
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAMnE,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAMnE,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG,SAAS,GAAG;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;IAChD,OAAO,CAAC,YAAY,CAA4B;gBAEpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAUjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAQhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAuBtC,OAAO,CAAC,gBAAgB;IAsBxB,OAAO,CAAC,YAAY;IAsEpB,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI;IAKxB,MAAM,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI;IAKtB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAW9B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK9B,OAAO,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,WAAW,GAAG,IAAI;IAKvD;;OAEG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAqB3E;;OAEG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,GAAG,SAAS;IAItC;;OAEG;IACH,aAAa,IAAI,GAAG,GAAG,SAAS;IAQhC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA+EnE;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}
|
package/lib/components/tabs.js
CHANGED
|
@@ -104,7 +104,16 @@ export class Tabs extends BaseComponent {
|
|
|
104
104
|
else {
|
|
105
105
|
tabPanel.style.display = 'none';
|
|
106
106
|
}
|
|
107
|
-
|
|
107
|
+
// ✅ Render content (string or component)
|
|
108
|
+
if (typeof tab.content === 'string') {
|
|
109
|
+
tabPanel.innerHTML = tab.content;
|
|
110
|
+
}
|
|
111
|
+
else if (tab.content instanceof BaseComponent) {
|
|
112
|
+
// Component needs to be appended after panel is in DOM
|
|
113
|
+
tabPanels.appendChild(tabPanel);
|
|
114
|
+
tab.content.render(`#${tabPanel.id}`);
|
|
115
|
+
return; // Skip the second appendChild below
|
|
116
|
+
}
|
|
108
117
|
tabPanels.appendChild(tabPanel);
|
|
109
118
|
});
|
|
110
119
|
}
|
|
@@ -146,7 +155,13 @@ export class Tabs extends BaseComponent {
|
|
|
146
155
|
// Update DOM if rendered
|
|
147
156
|
const panel = document.getElementById(`${this._id}-${tabId}-panel`);
|
|
148
157
|
if (panel) {
|
|
149
|
-
panel.innerHTML = content
|
|
158
|
+
panel.innerHTML = ''; // Clear existing content
|
|
159
|
+
if (typeof content === 'string') {
|
|
160
|
+
panel.innerHTML = content;
|
|
161
|
+
}
|
|
162
|
+
else if (content instanceof BaseComponent) {
|
|
163
|
+
content.render(`#${panel.id}`);
|
|
164
|
+
}
|
|
150
165
|
}
|
|
151
166
|
return this;
|
|
152
167
|
}
|
|
@@ -211,7 +226,16 @@ export class Tabs extends BaseComponent {
|
|
|
211
226
|
else {
|
|
212
227
|
tabPanel.style.display = 'none';
|
|
213
228
|
}
|
|
214
|
-
|
|
229
|
+
// ✅ Render content (string or component)
|
|
230
|
+
if (typeof tab.content === 'string') {
|
|
231
|
+
tabPanel.innerHTML = tab.content;
|
|
232
|
+
}
|
|
233
|
+
else if (tab.content instanceof BaseComponent) {
|
|
234
|
+
// Component needs to be appended after panel is in DOM
|
|
235
|
+
tabPanels.appendChild(tabPanel);
|
|
236
|
+
tab.content.render(`#${tabPanel.id}`);
|
|
237
|
+
return; // Skip the second appendChild below
|
|
238
|
+
}
|
|
215
239
|
tabPanels.appendChild(tabPanel);
|
|
216
240
|
});
|
|
217
241
|
wrapper.appendChild(tabList);
|
package/lib/components/tabs.ts
CHANGED
|
@@ -7,7 +7,7 @@ const CALLBACK_EVENTS = ['tabChange'] as const;
|
|
|
7
7
|
export interface Tab {
|
|
8
8
|
id: string;
|
|
9
9
|
label: string;
|
|
10
|
-
content: string
|
|
10
|
+
content: string | BaseComponent<any>; // ✅ Support component instances
|
|
11
11
|
icon?: string;
|
|
12
12
|
}
|
|
13
13
|
|
|
@@ -147,7 +147,16 @@ export class Tabs extends BaseComponent<TabsState> {
|
|
|
147
147
|
tabPanel.style.display = 'none';
|
|
148
148
|
}
|
|
149
149
|
|
|
150
|
-
|
|
150
|
+
// ✅ Render content (string or component)
|
|
151
|
+
if (typeof tab.content === 'string') {
|
|
152
|
+
tabPanel.innerHTML = tab.content;
|
|
153
|
+
} else if (tab.content instanceof BaseComponent) {
|
|
154
|
+
// Component needs to be appended after panel is in DOM
|
|
155
|
+
tabPanels.appendChild(tabPanel);
|
|
156
|
+
tab.content.render(`#${tabPanel.id}`);
|
|
157
|
+
return; // Skip the second appendChild below
|
|
158
|
+
}
|
|
159
|
+
|
|
151
160
|
tabPanels.appendChild(tabPanel);
|
|
152
161
|
});
|
|
153
162
|
}
|
|
@@ -190,7 +199,7 @@ export class Tabs extends BaseComponent<TabsState> {
|
|
|
190
199
|
/**
|
|
191
200
|
* Update content of a specific tab by ID
|
|
192
201
|
*/
|
|
193
|
-
updateTabContent(tabId: string, content: string): this {
|
|
202
|
+
updateTabContent(tabId: string, content: string | BaseComponent<any>): this {
|
|
194
203
|
const tab = this.state.tabs.find(t => t.id === tabId);
|
|
195
204
|
if (!tab) return this;
|
|
196
205
|
|
|
@@ -199,7 +208,13 @@ export class Tabs extends BaseComponent<TabsState> {
|
|
|
199
208
|
// Update DOM if rendered
|
|
200
209
|
const panel = document.getElementById(`${this._id}-${tabId}-panel`);
|
|
201
210
|
if (panel) {
|
|
202
|
-
panel.innerHTML = content
|
|
211
|
+
panel.innerHTML = ''; // Clear existing content
|
|
212
|
+
|
|
213
|
+
if (typeof content === 'string') {
|
|
214
|
+
panel.innerHTML = content;
|
|
215
|
+
} else if (content instanceof BaseComponent) {
|
|
216
|
+
content.render(`#${panel.id}`);
|
|
217
|
+
}
|
|
203
218
|
}
|
|
204
219
|
|
|
205
220
|
return this;
|
|
@@ -225,7 +240,6 @@ export class Tabs extends BaseComponent<TabsState> {
|
|
|
225
240
|
|
|
226
241
|
render(targetId?: string | HTMLElement | BaseComponent<any>): this {
|
|
227
242
|
const container = this._setupContainer(targetId);
|
|
228
|
-
|
|
229
243
|
const { tabs, activeTab, variant, style, class: className } = this.state;
|
|
230
244
|
|
|
231
245
|
const wrapper = document.createElement('div');
|
|
@@ -279,7 +293,16 @@ export class Tabs extends BaseComponent<TabsState> {
|
|
|
279
293
|
tabPanel.style.display = 'none';
|
|
280
294
|
}
|
|
281
295
|
|
|
282
|
-
|
|
296
|
+
// ✅ Render content (string or component)
|
|
297
|
+
if (typeof tab.content === 'string') {
|
|
298
|
+
tabPanel.innerHTML = tab.content;
|
|
299
|
+
} else if (tab.content instanceof BaseComponent) {
|
|
300
|
+
// Component needs to be appended after panel is in DOM
|
|
301
|
+
tabPanels.appendChild(tabPanel);
|
|
302
|
+
tab.content.render(`#${tabPanel.id}`);
|
|
303
|
+
return; // Skip the second appendChild below
|
|
304
|
+
}
|
|
305
|
+
|
|
283
306
|
tabPanels.appendChild(tabPanel);
|
|
284
307
|
});
|
|
285
308
|
|