juxscript 1.1.36 → 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.
Files changed (5) hide show
  1. package/lib/components/tabs.d.ts +1 -1
  2. package/lib/components/tabs.d.ts.map +1 -1
  3. package/lib/components/tabs.js +18 -8
  4. package/lib/components/tabs.ts +22 -10
  5. package/package.json +1 -1
package/lib/components/tabs.d.ts CHANGED
@@ -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
  */
package/lib/components/tabs.d.ts.map 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,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"}
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
@@ -95,8 +95,7 @@ export class Tabs extends BaseComponent {
95
95
  tabList.appendChild(tabButton);
96
96
  // Panel with unique ID
97
97
  const tabPanel = document.createElement('div');
98
- const tabId = `${this._id}-${tab.id}-panel`;
99
- tabPanel.id = tabId;
98
+ tabPanel.id = `${this._id}-${tab.id}-panel`;
100
99
  tabPanel.className = 'jux-tabs-panel';
101
100
  tabPanel.setAttribute('data-tab-id', tab.id);
102
101
  if (tab.id === this.state.activeTab) {
@@ -105,11 +104,15 @@ export class Tabs extends BaseComponent {
105
104
  else {
106
105
  tabPanel.style.display = 'none';
107
106
  }
107
+ // ✅ Render content (string or component)
108
108
  if (typeof tab.content === 'string') {
109
109
  tabPanel.innerHTML = tab.content;
110
110
  }
111
111
  else if (tab.content instanceof BaseComponent) {
112
- tabPanel.innerHTML = tab.content.render(tabId).container?.outerHTML || '';
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
113
116
  }
114
117
  tabPanels.appendChild(tabPanel);
115
118
  });
@@ -152,7 +155,13 @@ export class Tabs extends BaseComponent {
152
155
  // Update DOM if rendered
153
156
  const panel = document.getElementById(`${this._id}-${tabId}-panel`);
154
157
  if (panel) {
155
- 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
+ }
156
165
  }
157
166
  return this;
158
167
  }
@@ -217,14 +226,15 @@ export class Tabs extends BaseComponent {
217
226
  else {
218
227
  tabPanel.style.display = 'none';
219
228
  }
229
+ // ✅ Render content (string or component)
220
230
  if (typeof tab.content === 'string') {
221
231
  tabPanel.innerHTML = tab.content;
222
232
  }
223
233
  else if (tab.content instanceof BaseComponent) {
224
- tabPanel.innerHTML = tab.content.render(tabPanel.id).container?.outerHTML || '';
225
- }
226
- else {
227
- tabPanel.innerHTML = '';
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
228
238
  }
229
239
  tabPanels.appendChild(tabPanel);
230
240
  });
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 | BaseComponent<any>;
10
+ content: string | BaseComponent<any>; // ✅ Support component instances
11
11
  icon?: string;
12
12
  }
13
13
 
@@ -137,8 +137,7 @@ export class Tabs extends BaseComponent<TabsState> {
137
137
 
138
138
  // Panel with unique ID
139
139
  const tabPanel = document.createElement('div');
140
- const tabId = `${this._id}-${tab.id}-panel`;
141
- tabPanel.id = tabId;
140
+ tabPanel.id = `${this._id}-${tab.id}-panel`;
142
141
  tabPanel.className = 'jux-tabs-panel';
143
142
  tabPanel.setAttribute('data-tab-id', tab.id);
144
143
 
@@ -148,12 +147,16 @@ export class Tabs extends BaseComponent<TabsState> {
148
147
  tabPanel.style.display = 'none';
149
148
  }
150
149
 
151
-
150
+ // ✅ Render content (string or component)
152
151
  if (typeof tab.content === 'string') {
153
152
  tabPanel.innerHTML = tab.content;
154
153
  } else if (tab.content instanceof BaseComponent) {
155
- tabPanel.innerHTML = tab.content.render(tabId).container?.outerHTML || '';
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
156
158
  }
159
+
157
160
  tabPanels.appendChild(tabPanel);
158
161
  });
159
162
  }
@@ -196,7 +199,7 @@ export class Tabs extends BaseComponent<TabsState> {
196
199
  /**
197
200
  * Update content of a specific tab by ID
198
201
  */
199
- updateTabContent(tabId: string, content: string): this {
202
+ updateTabContent(tabId: string, content: string | BaseComponent<any>): this {
200
203
  const tab = this.state.tabs.find(t => t.id === tabId);
201
204
  if (!tab) return this;
202
205
 
@@ -205,7 +208,13 @@ export class Tabs extends BaseComponent<TabsState> {
205
208
  // Update DOM if rendered
206
209
  const panel = document.getElementById(`${this._id}-${tabId}-panel`);
207
210
  if (panel) {
208
- 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
+ }
209
218
  }
210
219
 
211
220
  return this;
@@ -284,13 +293,16 @@ export class Tabs extends BaseComponent<TabsState> {
284
293
  tabPanel.style.display = 'none';
285
294
  }
286
295
 
296
+ // ✅ Render content (string or component)
287
297
  if (typeof tab.content === 'string') {
288
298
  tabPanel.innerHTML = tab.content;
289
299
  } else if (tab.content instanceof BaseComponent) {
290
- tabPanel.innerHTML = tab.content.render(tabPanel.id).container?.outerHTML || '';
291
- } else {
292
- tabPanel.innerHTML = '';
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
293
304
  }
305
+
294
306
  tabPanels.appendChild(tabPanel);
295
307
  });
296
308
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "juxscript",
3
- "version": "1.1.36",
3
+ "version": "1.1.37",
4
4
  "type": "module",
5
5
  "description": "A JavaScript UX authorship platform",
6
6
  "main": "index.js",