juxscript 1.1.35 → 1.1.36
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
|
@@ -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;IAmEpB,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,IAAI;IAetD;;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;CA4EnE;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}
|
package/lib/components/tabs.js
CHANGED
|
@@ -95,7 +95,8 @@ export class Tabs extends BaseComponent {
|
|
|
95
95
|
tabList.appendChild(tabButton);
|
|
96
96
|
// Panel with unique ID
|
|
97
97
|
const tabPanel = document.createElement('div');
|
|
98
|
-
|
|
98
|
+
const tabId = `${this._id}-${tab.id}-panel`;
|
|
99
|
+
tabPanel.id = tabId;
|
|
99
100
|
tabPanel.className = 'jux-tabs-panel';
|
|
100
101
|
tabPanel.setAttribute('data-tab-id', tab.id);
|
|
101
102
|
if (tab.id === this.state.activeTab) {
|
|
@@ -104,7 +105,12 @@ export class Tabs extends BaseComponent {
|
|
|
104
105
|
else {
|
|
105
106
|
tabPanel.style.display = 'none';
|
|
106
107
|
}
|
|
107
|
-
|
|
108
|
+
if (typeof tab.content === 'string') {
|
|
109
|
+
tabPanel.innerHTML = tab.content;
|
|
110
|
+
}
|
|
111
|
+
else if (tab.content instanceof BaseComponent) {
|
|
112
|
+
tabPanel.innerHTML = tab.content.render(tabId).container?.outerHTML || '';
|
|
113
|
+
}
|
|
108
114
|
tabPanels.appendChild(tabPanel);
|
|
109
115
|
});
|
|
110
116
|
}
|
|
@@ -211,7 +217,15 @@ export class Tabs extends BaseComponent {
|
|
|
211
217
|
else {
|
|
212
218
|
tabPanel.style.display = 'none';
|
|
213
219
|
}
|
|
214
|
-
|
|
220
|
+
if (typeof tab.content === 'string') {
|
|
221
|
+
tabPanel.innerHTML = tab.content;
|
|
222
|
+
}
|
|
223
|
+
else if (tab.content instanceof BaseComponent) {
|
|
224
|
+
tabPanel.innerHTML = tab.content.render(tabPanel.id).container?.outerHTML || '';
|
|
225
|
+
}
|
|
226
|
+
else {
|
|
227
|
+
tabPanel.innerHTML = '';
|
|
228
|
+
}
|
|
215
229
|
tabPanels.appendChild(tabPanel);
|
|
216
230
|
});
|
|
217
231
|
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>;
|
|
11
11
|
icon?: string;
|
|
12
12
|
}
|
|
13
13
|
|
|
@@ -137,7 +137,8 @@ export class Tabs extends BaseComponent<TabsState> {
|
|
|
137
137
|
|
|
138
138
|
// Panel with unique ID
|
|
139
139
|
const tabPanel = document.createElement('div');
|
|
140
|
-
|
|
140
|
+
const tabId = `${this._id}-${tab.id}-panel`;
|
|
141
|
+
tabPanel.id = tabId;
|
|
141
142
|
tabPanel.className = 'jux-tabs-panel';
|
|
142
143
|
tabPanel.setAttribute('data-tab-id', tab.id);
|
|
143
144
|
|
|
@@ -147,7 +148,12 @@ export class Tabs extends BaseComponent<TabsState> {
|
|
|
147
148
|
tabPanel.style.display = 'none';
|
|
148
149
|
}
|
|
149
150
|
|
|
150
|
-
|
|
151
|
+
|
|
152
|
+
if (typeof tab.content === 'string') {
|
|
153
|
+
tabPanel.innerHTML = tab.content;
|
|
154
|
+
} else if (tab.content instanceof BaseComponent) {
|
|
155
|
+
tabPanel.innerHTML = tab.content.render(tabId).container?.outerHTML || '';
|
|
156
|
+
}
|
|
151
157
|
tabPanels.appendChild(tabPanel);
|
|
152
158
|
});
|
|
153
159
|
}
|
|
@@ -225,7 +231,6 @@ export class Tabs extends BaseComponent<TabsState> {
|
|
|
225
231
|
|
|
226
232
|
render(targetId?: string | HTMLElement | BaseComponent<any>): this {
|
|
227
233
|
const container = this._setupContainer(targetId);
|
|
228
|
-
|
|
229
234
|
const { tabs, activeTab, variant, style, class: className } = this.state;
|
|
230
235
|
|
|
231
236
|
const wrapper = document.createElement('div');
|
|
@@ -279,7 +284,13 @@ export class Tabs extends BaseComponent<TabsState> {
|
|
|
279
284
|
tabPanel.style.display = 'none';
|
|
280
285
|
}
|
|
281
286
|
|
|
282
|
-
|
|
287
|
+
if (typeof tab.content === 'string') {
|
|
288
|
+
tabPanel.innerHTML = tab.content;
|
|
289
|
+
} else if (tab.content instanceof BaseComponent) {
|
|
290
|
+
tabPanel.innerHTML = tab.content.render(tabPanel.id).container?.outerHTML || '';
|
|
291
|
+
} else {
|
|
292
|
+
tabPanel.innerHTML = '';
|
|
293
|
+
}
|
|
283
294
|
tabPanels.appendChild(tabPanel);
|
|
284
295
|
});
|
|
285
296
|
|