juxscript 1.1.215 → 1.1.216

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 (11) hide show
  1. package/lib/components/dataframe.d.ts.map +1 -1
  2. package/lib/components/dataframe.js +7 -1
  3. package/lib/components/dataframe.ts +8 -1
  4. package/lib/components/table.d.ts.map +1 -1
  5. package/lib/components/table.js +36 -100
  6. package/lib/components/table.ts +68 -130
  7. package/lib/components/tabs.d.ts +2 -3
  8. package/lib/components/tabs.d.ts.map +1 -1
  9. package/lib/components/tabs.js +6 -9
  10. package/lib/components/tabs.ts +7 -11
  11. package/package.json +1 -1
package/lib/components/dataframe.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dataframe.d.ts","sourceRoot":"","sources":["dataframe.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"dataframe.d.ts","sourceRoot":"","sources":["dataframe.ts"],"names":[],"mappings":"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"}
package/lib/components/dataframe.js CHANGED
@@ -422,11 +422,17 @@ export class DataFrameComponent extends BaseComponent {
422
422
  sheetNames.forEach((sheetName) => {
423
423
  const df = sheets[sheetName];
424
424
  const safeId = sanitizeId(sheetName);
425
+ // ✅ DEBUG: Log table options
426
+ console.log(`[DataFrame] Creating table for sheet "${sheetName}" with options:`, {
427
+ filterable: this._tableOptions.filterable,
428
+ paginated: this._tableOptions.paginated,
429
+ sortable: this._tableOptions.sortable
430
+ });
425
431
  const table = new Table(`${this._id}-table-${safeId}`, {
426
432
  striped: this._tableOptions.striped,
427
433
  hoverable: this._tableOptions.hoverable,
428
434
  sortable: this._tableOptions.sortable,
429
- filterable: this._tableOptions.filterable, // ✅ Use actual option
435
+ filterable: this._tableOptions.filterable,
430
436
  paginated: this._tableOptions.paginated,
431
437
  rowsPerPage: this._tableOptions.rowsPerPage
432
438
  });
package/lib/components/dataframe.ts CHANGED
@@ -514,11 +514,18 @@ export class DataFrameComponent extends BaseComponent<DataFrameState> {
514
514
  const df = sheets[sheetName];
515
515
  const safeId = sanitizeId(sheetName);
516
516
 
517
+ // ✅ DEBUG: Log table options
518
+ console.log(`[DataFrame] Creating table for sheet "${sheetName}" with options:`, {
519
+ filterable: this._tableOptions.filterable,
520
+ paginated: this._tableOptions.paginated,
521
+ sortable: this._tableOptions.sortable
522
+ });
523
+
517
524
  const table = new Table(`${this._id}-table-${safeId}`, {
518
525
  striped: this._tableOptions.striped,
519
526
  hoverable: this._tableOptions.hoverable,
520
527
  sortable: this._tableOptions.sortable,
521
- filterable: this._tableOptions.filterable, // ✅ Use actual option
528
+ filterable: this._tableOptions.filterable,
522
529
  paginated: this._tableOptions.paginated,
523
530
  rowsPerPage: this._tableOptions.rowsPerPage
524
531
  });
package/lib/components/table.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAiBxD,MAAM,MAAM,6BAA6B,GAAG,OAAO,GAAG,UAAU,CAAC;AACjE,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,UAAU,CAAC;AAElD,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,MAAM,GAAG,WAAW,CAAC;IAExD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAGD,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,KAAK,GAAG,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,WAAW,CAAC;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IACjC,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,6BAA6B,CAAC;CACnD;AAED,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,eAAe,EAAE,GAAG,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IAChD,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,KAAK,GAAG,MAAM,CAAC;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,6BAA6B,CAAC;CAClD,CAAC;AAOF,qBAAa,KAAM,SAAQ,aAAa,CAAC,UAAU,CAAC;IAClD,OAAO,CAAC,aAAa,CAAiC;gBAE1C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAwClD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAWhD,OAAO,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GAAG,IAAI;IAmB5C,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI;IAwCxB;;;;;;;;OAQG;IACH,cAAc,CACZ,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,KAAK,GAAG,EAC5C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,GAAG,WAAW,EACzE,KAAK,CAAC,EAAE,MAAM,GACb,IAAI;IA8CP;;OAEG;IACH,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IA0BvC,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAI7B,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAI7B,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAI/B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAI9B,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAM7B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAI9B,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAIhC,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAI/B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAMhC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAIhC,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAOjC,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAoBpC,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAsBtC,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI;IAmB/C,SAAS,IAAI,IAAI;IAiBjB,WAAW,IAAI,IAAI;IAenB,cAAc,IAAI,IAAI;IAKtB,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI;IAYnC,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI;IAOrC,kBAAkB,IAAI,MAAM,EAAE;IAG9B,eAAe,IAAI,GAAG,EAAE;IASxB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAItC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAYlE,SAAS,CAAC,eAAe,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,WAAW;IAqC5F,OAAO,CAAC,aAAa;IAyBrB,OAAO,CAAC,iBAAiB;IAmCzB,OAAO,CAAC,WAAW;IAoBnB,OAAO,CAAC,iBAAiB;IAuBzB,OAAO,CAAC,sBAAsB;IAuB9B,OAAO,CAAC,kBAAkB;IAuC1B,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,kBAAkB;IAoJ1B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,aAAa;IAmDrB,OAAO,CAAC,gBAAgB;IAgCxB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,cAAc;IAkCtB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,gBAAgB;IA4ExB,OAAO,CAAC,qBAAqB;IAqC7B,OAAO,CAAC,wBAAwB;IAkBhC,OAAO,CAAC,qBAAqB;IA8B7B,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,iBAAiB;CAiD1B;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAEnE"}
1
+ {"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"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"}
package/lib/components/table.js CHANGED
@@ -48,6 +48,9 @@ export class Table extends BaseComponent {
48
48
  selectionBehavior: options.selectionBehavior ?? 'clear'
49
49
  });
50
50
  this._tableElement = null;
51
+ // ✅ DEBUG: Log what was passed vs what was stored
52
+ console.log(`[Table ${id}] constructor options.filterable:`, options.filterable);
53
+ console.log(`[Table ${id}] this.state.filterable:`, this.state.filterable);
51
54
  }
52
55
  /* ═════════════════════════════════════════════════════════════════
53
56
  * ABSTRACT METHOD IMPLEMENTATIONS
@@ -412,24 +415,20 @@ export class Table extends BaseComponent {
412
415
  input.type = 'text';
413
416
  input.placeholder = 'Filter...';
414
417
  input.className = 'jux-table-filter';
415
- input.style.cssText = 'margin-bottom: 10px; padding: 5px; width: 100%;';
416
- // Add event listener to handle filtering
418
+ input.id = `${this._id}-filter`;
419
+ input.style.cssText = 'margin-bottom: 10px; padding: 5px; width: 100%; box-sizing: border-box;';
417
420
  input.addEventListener('input', (e) => {
418
421
  const target = e.target;
419
422
  this.state.filterText = target.value;
420
- // Re-render table body
421
423
  const tbody = this._tableElement?.querySelector('tbody');
422
424
  if (tbody) {
423
425
  this._renderTableBody(tbody);
424
- // Update pagination if enabled
425
426
  const wrapper = this._tableElement?.closest('.jux-table-wrapper');
426
427
  if (wrapper && this.state.paginated) {
427
- // Reset to page 1 when filtering
428
428
  this.state.currentPage = 1;
429
429
  this._updatePagination(wrapper, tbody);
430
430
  }
431
431
  }
432
- // Fire callback
433
432
  this._triggerCallback('filterChange', target.value, e);
434
433
  });
435
434
  return input;
@@ -462,19 +461,37 @@ export class Table extends BaseComponent {
462
461
  const headerRow = document.createElement('tr');
463
462
  // Add bulk checkbox or empty checkbox column
464
463
  if (this.state.showBulkCheckbox) {
465
- headerRow.appendChild(this._buildBulkCheckboxCell());
464
+ const bulkTh = document.createElement('th');
465
+ bulkTh.style.width = '40px';
466
+ bulkTh.style.textAlign = 'center';
467
+ const bulkCheckbox = document.createElement('input');
468
+ bulkCheckbox.type = 'checkbox';
469
+ bulkCheckbox.className = 'jux-bulk-checkbox';
470
+ bulkCheckbox.style.cursor = 'pointer';
471
+ bulkCheckbox.title = 'Select all';
472
+ bulkCheckbox.addEventListener('change', (e) => {
473
+ if (bulkCheckbox.checked) {
474
+ this.selectAll();
475
+ }
476
+ else {
477
+ this.deselectAll();
478
+ }
479
+ });
480
+ bulkTh.appendChild(bulkCheckbox);
481
+ headerRow.insertBefore(bulkTh, headerRow.firstChild);
466
482
  }
467
483
  else if (this.state.showCheckboxes) {
468
- const emptyTh = document.createElement('th');
469
- emptyTh.style.width = '40px';
470
- headerRow.appendChild(emptyTh);
484
+ const checkboxTh = document.createElement('th');
485
+ checkboxTh.style.width = '40px';
486
+ headerRow.insertBefore(checkboxTh, headerRow.firstChild);
471
487
  }
472
- // Add column headers with optional sort
488
+ // Add column headers with optional sorts
473
489
  this.state.columns.forEach(col => {
474
490
  const th = this._buildColumnHeader(col);
475
491
  headerRow.appendChild(th);
476
492
  });
477
493
  thead.appendChild(headerRow);
494
+ thead.appendChild(headerRow);
478
495
  return thead;
479
496
  }
480
497
  _buildBulkCheckboxCell() {
@@ -507,7 +524,6 @@ export class Table extends BaseComponent {
507
524
  th.style.cursor = 'pointer';
508
525
  th.style.userSelect = 'none';
509
526
  th.addEventListener('click', (e) => {
510
- // Update state
511
527
  if (this.state.sortColumn === col.key) {
512
528
  this.state.sortDirection = this.state.sortDirection === 'asc' ? 'desc' : 'asc';
513
529
  }
@@ -515,36 +531,30 @@ export class Table extends BaseComponent {
515
531
  this.state.sortColumn = col.key;
516
532
  this.state.sortDirection = 'asc';
517
533
  }
518
- // Re-render
519
534
  const tbody = this._tableElement.querySelector('tbody');
520
535
  this._renderTableBody(tbody);
521
- // Update UI indicators
522
536
  const headerRow = th.parentElement;
523
537
  headerRow.querySelectorAll('th[data-column-key]').forEach(h => {
524
538
  h.textContent = h.textContent?.replace(' ▲', '').replace(' ▼', '') || '';
525
539
  });
526
540
  th.textContent = col.label + (this.state.sortDirection === 'asc' ? ' ▲' : ' ▼');
527
- // Fire callback
528
541
  this._triggerCallback('sortChange', col.key, this.state.sortDirection, e);
529
542
  });
530
543
  }
531
544
  return th;
532
545
  }
533
- // Step 4: WIRE orchestrator
534
546
  _wireAllEvents(wrapper, tbody) {
535
547
  this._wireTriggerEvents(tbody);
536
548
  if (this.state.paginated) {
537
549
  this._updatePagination(wrapper, tbody);
538
550
  }
539
- this._wireStandardEvents(wrapper); // ✅ Use inherited method
551
+ this._wireStandardEvents(wrapper);
540
552
  this._wireSyncBindings(wrapper, tbody);
541
553
  }
542
554
  /* ═════════════════════════════════════════════════════════════════
543
555
  * SECTION 6: EVENT WIRING
544
- * WIRE phase - connects storage to actual DOM listeners/subscriptions
545
556
  * ═════════════════════════════════════════════════════════════════ */
546
557
  _wireTriggerEvents(tbody) {
547
- // === rowClick: Fire immediately when row is clicked ===
548
558
  if (this._triggerHandlers.has('rowClick')) {
549
559
  const handler = this._triggerHandlers.get('rowClick');
550
560
  tbody.addEventListener('click', (e) => {
@@ -555,14 +565,12 @@ export class Table extends BaseComponent {
555
565
  rows = this._getSortedRows(rows);
556
566
  rows = this._getPaginatedRows(rows);
557
567
  const rowData = rows[rowIndex];
558
- if (rowData) {
568
+ if (rowData)
559
569
  handler(rowData, rowIndex, e);
560
- }
561
570
  }
562
571
  });
563
572
  tbody.style.cursor = 'pointer';
564
573
  }
565
- // === cellClick: Fire immediately when cell is clicked ===
566
574
  if (this._triggerHandlers.has('cellClick')) {
567
575
  const handler = this._triggerHandlers.get('cellClick');
568
576
  tbody.addEventListener('click', (e) => {
@@ -585,21 +593,16 @@ export class Table extends BaseComponent {
585
593
  }
586
594
  });
587
595
  }
588
- // === Selection events: Fire with internal logic ===
589
596
  if (this.state.selectable) {
590
597
  tbody.addEventListener('click', (e) => {
591
598
  const target = e.target;
592
- // Check if click was on checkbox
593
599
  const isCheckboxClick = target.tagName === 'INPUT' && target.getAttribute('type') === 'checkbox';
594
- // If trigger is 'checkbox' and click wasn't on checkbox, ignore
595
- if (this.state.selectionTrigger === 'checkbox' && !isCheckboxClick) {
600
+ if (this.state.selectionTrigger === 'checkbox' && !isCheckboxClick)
596
601
  return;
597
- }
598
- // ✨ FIX: If trigger is 'row' and click WAS on checkbox, toggle it manually
599
602
  if (this.state.selectionTrigger === 'row' && isCheckboxClick) {
600
- e.preventDefault(); // Prevent default checkbox behavior
603
+ e.preventDefault();
601
604
  const checkbox = target;
602
- checkbox.checked = !checkbox.checked; // ✨ Toggle the checkbox
605
+ checkbox.checked = !checkbox.checked;
603
606
  }
604
607
  const tr = target.closest('tr');
605
608
  if (tr && tbody.contains(tr)) {
@@ -611,11 +614,9 @@ export class Table extends BaseComponent {
611
614
  return;
612
615
  const wasSelected = this.state.selectedIndexes.has(actualRowIndex);
613
616
  if (this.state.multiSelect) {
614
- // Toggle selection
615
617
  if (wasSelected) {
616
618
  this.state.selectedIndexes.delete(actualRowIndex);
617
619
  tr.classList.remove('jux-table-row-selected');
618
- // Update checkbox if present
619
620
  const checkbox = tr.querySelector('input[type="checkbox"]');
620
621
  if (checkbox)
621
622
  checkbox.checked = false;
@@ -626,7 +627,6 @@ export class Table extends BaseComponent {
626
627
  else {
627
628
  this.state.selectedIndexes.add(actualRowIndex);
628
629
  tr.classList.add('jux-table-row-selected');
629
- // Update checkbox if present
630
630
  const checkbox = tr.querySelector('input[type="checkbox"]');
631
631
  if (checkbox)
632
632
  checkbox.checked = true;
@@ -636,7 +636,6 @@ export class Table extends BaseComponent {
636
636
  }
637
637
  }
638
638
  else {
639
- // Single select
640
639
  const previousSelection = Array.from(this.state.selectedIndexes);
641
640
  this.state.selectedIndexes.clear();
642
641
  tbody.querySelectorAll('tr').forEach(row => {
@@ -648,7 +647,6 @@ export class Table extends BaseComponent {
648
647
  if (!wasSelected) {
649
648
  this.state.selectedIndexes.add(actualRowIndex);
650
649
  tr.classList.add('jux-table-row-selected');
651
- // Update checkbox if present
652
650
  const checkbox = tr.querySelector('input[type="checkbox"]');
653
651
  if (checkbox)
654
652
  checkbox.checked = true;
@@ -664,15 +662,12 @@ export class Table extends BaseComponent {
664
662
  });
665
663
  }
666
664
  }
667
- // Update bulk checkbox state if present
668
665
  this._updateBulkCheckboxState();
669
- // Fire selectionChange
670
666
  if (this._triggerHandlers.has('selectionChange')) {
671
667
  this._triggerHandlers.get('selectionChange')(this.getSelectedRows(), this.getSelectedIndexes(), e);
672
668
  }
673
669
  }
674
670
  });
675
- // Only set pointer cursor if row is trigger
676
671
  if (this.state.selectionTrigger === 'row') {
677
672
  tbody.style.cursor = 'pointer';
678
673
  }
@@ -693,7 +688,6 @@ export class Table extends BaseComponent {
693
688
  stateObj.subscribe((val) => {
694
689
  const previousRows = this.state.rows;
695
690
  const transformed = transform(val);
696
- // Handle selections
697
691
  const hadSelections = this.state.selectedIndexes.size > 0;
698
692
  if (this.state.selectionBehavior === 'preserve' && this.state.rowIdField) {
699
693
  this._preserveSelections(previousRows, transformed);
@@ -714,7 +708,6 @@ export class Table extends BaseComponent {
714
708
  }
715
709
  }
716
710
  this.state.rows = transformed;
717
- // Auto-reset pagination
718
711
  if (this.state.paginated) {
719
712
  const totalPages = Math.ceil(transformed.length / this.state.rowsPerPage);
720
713
  if (this.state.currentPage > totalPages && totalPages > 0) {
@@ -724,12 +717,10 @@ export class Table extends BaseComponent {
724
717
  this.state.currentPage = 1;
725
718
  }
726
719
  }
727
- // Re-render
728
720
  this._renderTableBody(tbody);
729
721
  if (this.state.paginated) {
730
722
  this._updatePagination(wrapper, tbody);
731
723
  }
732
- // Fire callbacks
733
724
  this._triggerCallback('dataChange', transformed, previousRows);
734
725
  if (hadSelections || this.state.selectedIndexes.size > 0) {
735
726
  this._triggerHandlers.get('selectionChange')?.(this.getSelectedRows(), this.getSelectedIndexes(), new CustomEvent('dataChange'));
@@ -741,7 +732,6 @@ export class Table extends BaseComponent {
741
732
  stateObj.subscribe((val) => {
742
733
  const transformed = transform(val);
743
734
  this.state.columns = transformed;
744
- // Full re-render needed for columns
745
735
  const table = this._tableElement;
746
736
  table.innerHTML = '';
747
737
  const thead = this._buildTableHeader();
@@ -749,7 +739,6 @@ export class Table extends BaseComponent {
749
739
  const newTbody = document.createElement('tbody');
750
740
  this._renderTableBody(newTbody);
751
741
  table.appendChild(newTbody);
752
- // Re-wire events
753
742
  this._wireTriggerEvents(newTbody);
754
743
  if (this.state.paginated) {
755
744
  this._updatePagination(wrapper, newTbody);
@@ -758,9 +747,7 @@ export class Table extends BaseComponent {
758
747
  }
759
748
  /* ═════════════════════════════════════════════════════════════════
760
749
  * SECTION 7: INTERNAL HELPERS
761
- * Data processing, DOM updates, selection management
762
750
  * ═════════════════════════════════════════════════════════════════ */
763
- // Data processing
764
751
  _getFilteredRows() {
765
752
  if (!this.state.filterText)
766
753
  return this.state.rows;
@@ -775,24 +762,20 @@ export class Table extends BaseComponent {
775
762
  _getSortedRows(rows) {
776
763
  if (!this.state.sortColumn)
777
764
  return rows;
778
- // ✨ Check if sorting by computed column
779
765
  const computedDef = this.state.computedColumns.get(this.state.sortColumn);
780
766
  const sorted = [...rows].sort((a, b) => {
781
767
  let aVal;
782
768
  let bVal;
783
769
  if (computedDef) {
784
- // ✨ Compute values on the fly for computed columns
785
770
  const aIndex = this.state.rows.indexOf(a);
786
771
  const bIndex = this.state.rows.indexOf(b);
787
772
  aVal = computedDef.compute(a, aIndex);
788
773
  bVal = computedDef.compute(b, bIndex);
789
774
  }
790
775
  else {
791
- // Normal column: get value from row data
792
776
  aVal = a[this.state.sortColumn];
793
777
  bVal = b[this.state.sortColumn];
794
778
  }
795
- // Standard comparison logic
796
779
  if (aVal === bVal)
797
780
  return 0;
798
781
  if (aVal == null)
@@ -811,16 +794,13 @@ export class Table extends BaseComponent {
811
794
  const end = start + this.state.rowsPerPage;
812
795
  return rows.slice(start, end);
813
796
  }
814
- // DOM updates
815
797
  _updateTable() {
816
798
  if (!this._tableElement)
817
799
  return;
818
800
  const tbody = this._tableElement.querySelector('tbody');
819
801
  if (!tbody)
820
802
  return;
821
- // Re-render using the same logic as initial render
822
803
  this._renderTableBody(tbody);
823
- // Update pagination if enabled
824
804
  const wrapper = this._tableElement.closest('.jux-table-wrapper');
825
805
  if (wrapper && this.state.paginated) {
826
806
  this._updatePagination(wrapper, tbody);
@@ -830,17 +810,14 @@ export class Table extends BaseComponent {
830
810
  tbody.innerHTML = '';
831
811
  let rows = this._getFilteredRows();
832
812
  rows = this._getSortedRows(rows);
833
- const totalPages = Math.ceil(rows.length / this.state.rowsPerPage);
834
813
  rows = this._getPaginatedRows(rows);
835
- rows.forEach((row, visualIndex) => {
814
+ rows.forEach((row) => {
836
815
  const tr = document.createElement('tr');
837
- // Check if this row is selected
838
816
  const actualRowIndex = this.state.rows.indexOf(row);
839
817
  const isSelected = this.state.selectedIndexes.has(actualRowIndex);
840
818
  if (isSelected) {
841
819
  tr.classList.add('jux-table-row-selected');
842
820
  }
843
- // Add checkbox column if enabled
844
821
  if (this.state.showCheckboxes) {
845
822
  const checkboxTd = document.createElement('td');
846
823
  checkboxTd.style.width = '40px';
@@ -852,29 +829,22 @@ export class Table extends BaseComponent {
852
829
  checkboxTd.appendChild(checkbox);
853
830
  tr.appendChild(checkboxTd);
854
831
  }
855
- // Add data columns (including computed columns)
856
832
  this.state.columns.forEach(col => {
857
833
  const td = document.createElement('td');
858
- // ✨ NEW: Check if this is a computed column
859
834
  const computedDef = this.state.computedColumns.get(col.key);
860
835
  let cellValue;
861
836
  let rendered;
862
837
  if (computedDef) {
863
- // ✨ Computed column: Evaluate compute function
864
838
  cellValue = computedDef.compute(row, actualRowIndex);
865
- // Use computed column's custom renderer if provided
866
839
  if (computedDef.render) {
867
840
  rendered = computedDef.render(cellValue, row, actualRowIndex);
868
841
  }
869
842
  else {
870
- // Default: stringify the computed value
871
843
  rendered = cellValue != null ? String(cellValue) : '';
872
844
  }
873
845
  }
874
846
  else {
875
- // Normal column: Get value from row data
876
847
  cellValue = row[col.key];
877
- // Use column's render function if provided
878
848
  if (col.render) {
879
849
  rendered = col.render(cellValue, row);
880
850
  }
@@ -882,7 +852,6 @@ export class Table extends BaseComponent {
882
852
  rendered = cellValue != null ? String(cellValue) : '';
883
853
  }
884
854
  }
885
- // Insert rendered content
886
855
  if (typeof rendered === 'string') {
887
856
  td.innerHTML = rendered;
888
857
  }
@@ -898,36 +867,17 @@ export class Table extends BaseComponent {
898
867
  const headerRow = thead.querySelector('tr');
899
868
  if (!headerRow)
900
869
  return;
901
- // Remove existing checkbox column(s)
902
870
  const existingCheckboxThs = headerRow.querySelectorAll('th:first-child');
903
871
  existingCheckboxThs.forEach(th => {
904
872
  if (th.querySelector('.jux-bulk-checkbox') || th.textContent === '') {
905
873
  th.remove();
906
874
  }
907
875
  });
908
- // Add bulk checkbox or empty checkbox column
909
876
  if (this.state.showBulkCheckbox) {
910
- const bulkTh = document.createElement('th');
911
- bulkTh.style.width = '40px';
912
- bulkTh.style.textAlign = 'center';
913
- const bulkCheckbox = document.createElement('input');
914
- bulkCheckbox.type = 'checkbox';
915
- bulkCheckbox.className = 'jux-bulk-checkbox';
916
- bulkCheckbox.style.cursor = 'pointer';
917
- bulkCheckbox.title = 'Select all';
918
- bulkCheckbox.addEventListener('change', (e) => {
919
- if (bulkCheckbox.checked) {
920
- this.selectAll();
921
- }
922
- else {
923
- this.deselectAll();
924
- }
925
- });
926
- bulkTh.appendChild(bulkCheckbox);
877
+ const bulkTh = this._buildBulkCheckboxCell();
927
878
  headerRow.insertBefore(bulkTh, headerRow.firstChild);
928
879
  }
929
880
  else if (this.state.showCheckboxes) {
930
- // Add empty header cell for checkbox column (no bulk select)
931
881
  const checkboxTh = document.createElement('th');
932
882
  checkboxTh.style.width = '40px';
933
883
  headerRow.insertBefore(checkboxTh, headerRow.firstChild);
@@ -960,38 +910,31 @@ export class Table extends BaseComponent {
960
910
  const tbody = this._tableElement.querySelector('tbody');
961
911
  if (!tbody)
962
912
  return;
963
- // Get current page rows
964
913
  let rows = this._getFilteredRows();
965
914
  rows = this._getSortedRows(rows);
966
915
  const pageRows = this._getPaginatedRows(rows);
967
- // Update each visible row's selection state
968
916
  Array.from(tbody.children).forEach((tr, visualIndex) => {
969
917
  const pageRowData = pageRows[visualIndex];
970
918
  const actualRowIndex = this.state.rows.indexOf(pageRowData);
971
919
  const isSelected = this.state.selectedIndexes.has(actualRowIndex);
972
- // Update row highlight
973
920
  if (isSelected) {
974
921
  tr.classList.add('jux-table-row-selected');
975
922
  }
976
923
  else {
977
924
  tr.classList.remove('jux-table-row-selected');
978
925
  }
979
- // Update checkbox if present
980
926
  const checkbox = tr.querySelector('input[type="checkbox"]');
981
927
  if (checkbox) {
982
928
  checkbox.checked = isSelected;
983
929
  }
984
930
  });
985
- // Update bulk checkbox state
986
931
  this._updateBulkCheckboxState();
987
932
  }
988
- // Selection management
989
933
  _preserveSelections(previousRows, newRows) {
990
934
  if (!this.state.rowIdField || this.state.selectionBehavior === 'clear') {
991
935
  this.state.selectedIndexes.clear();
992
936
  return;
993
937
  }
994
- // Build map of old selections by ID
995
938
  const selectedIds = new Set();
996
939
  Array.from(this.state.selectedIndexes).forEach(index => {
997
940
  const row = previousRows[index];
@@ -999,7 +942,6 @@ export class Table extends BaseComponent {
999
942
  selectedIds.add(row[this.state.rowIdField]);
1000
943
  }
1001
944
  });
1002
- // Find new indexes for selected IDs
1003
945
  this.state.selectedIndexes.clear();
1004
946
  newRows.forEach((row, index) => {
1005
947
  const rowId = row[this.state.rowIdField];
@@ -1008,13 +950,10 @@ export class Table extends BaseComponent {
1008
950
  }
1009
951
  });
1010
952
  }
1011
- // Pagination
1012
953
  _updatePagination(wrapper, tbody) {
1013
- // Remove existing pagination
1014
954
  const existingPagination = wrapper.querySelector('.jux-table-pagination');
1015
- if (existingPagination) {
955
+ if (existingPagination)
1016
956
  existingPagination.remove();
1017
- }
1018
957
  let rows = this._getFilteredRows();
1019
958
  rows = this._getSortedRows(rows);
1020
959
  const totalPages = Math.ceil(rows.length / this.state.rowsPerPage);
@@ -1023,7 +962,6 @@ export class Table extends BaseComponent {
1023
962
  const pagination = document.createElement('div');
1024
963
  pagination.className = 'jux-table-pagination';
1025
964
  pagination.style.cssText = 'margin-top: 10px; display: flex; gap: 5px; justify-content: center;';
1026
- // Previous button
1027
965
  const prevBtn = document.createElement('button');
1028
966
  prevBtn.textContent = 'Previous';
1029
967
  prevBtn.disabled = this.state.currentPage === 1;
@@ -1037,12 +975,10 @@ export class Table extends BaseComponent {
1037
975
  }
1038
976
  });
1039
977
  pagination.appendChild(prevBtn);
1040
- // Page info
1041
978
  const pageInfo = document.createElement('span');
1042
979
  pageInfo.textContent = `Page ${this.state.currentPage} of ${totalPages}`;
1043
980
  pageInfo.style.cssText = 'display: flex; align-items: center; padding: 0 10px;';
1044
981
  pagination.appendChild(pageInfo);
1045
- // Next button
1046
982
  const nextBtn = document.createElement('button');
1047
983
  nextBtn.textContent = 'Next';
1048
984
  nextBtn.disabled = this.state.currentPage === totalPages;
package/lib/components/table.ts CHANGED
@@ -28,7 +28,6 @@ export interface ColumnDef {
28
28
  label: string;
29
29
  width?: string;
30
30
  render?: (value: any, row: any) => string | HTMLElement;
31
- // ✨ NEW: Mark as computed column
32
31
  computed?: boolean;
33
32
  }
34
33
 
@@ -135,6 +134,10 @@ export class Table extends BaseComponent<TableState> {
135
134
  rowIdField: options.rowIdField,
136
135
  selectionBehavior: options.selectionBehavior ?? 'clear'
137
136
  });
137
+
138
+ // ✅ DEBUG: Log what was passed vs what was stored
139
+ console.log(`[Table ${id}] constructor options.filterable:`, options.filterable);
140
+ console.log(`[Table ${id}] this.state.filterable:`, this.state.filterable);
138
141
  }
139
142
 
140
143
  /* ═════════════════════════════════════════════════════════════════
@@ -567,30 +570,25 @@ export class Table extends BaseComponent<TableState> {
567
570
  const input = document.createElement('input');
568
571
  input.type = 'text';
569
572
  input.placeholder = 'Filter...';
570
-
571
573
  input.className = 'jux-table-filter';
572
- input.style.cssText = 'margin-bottom: 10px; padding: 5px; width: 100%;';
574
+ input.id = `${this._id}-filter`;
575
+ input.style.cssText = 'margin-bottom: 10px; padding: 5px; width: 100%; box-sizing: border-box;';
573
576
 
574
- // Add event listener to handle filtering
575
577
  input.addEventListener('input', (e) => {
576
578
  const target = e.target as HTMLInputElement;
577
579
  this.state.filterText = target.value;
578
580
 
579
- // Re-render table body
580
581
  const tbody = this._tableElement?.querySelector('tbody');
581
582
  if (tbody) {
582
583
  this._renderTableBody(tbody);
583
584
 
584
- // Update pagination if enabled
585
585
  const wrapper = this._tableElement?.closest('.jux-table-wrapper') as HTMLElement;
586
586
  if (wrapper && this.state.paginated) {
587
- // Reset to page 1 when filtering
588
587
  this.state.currentPage = 1;
589
588
  this._updatePagination(wrapper, tbody);
590
589
  }
591
590
  }
592
591
 
593
- // Fire callback
594
592
  this._triggerCallback('filterChange', target.value, e);
595
593
  });
596
594
 
@@ -617,41 +615,51 @@ export class Table extends BaseComponent<TableState> {
617
615
  wrapper.appendChild(table);
618
616
  return table;
619
617
  }
620
-
621
618
  private _buildTableHeader(): HTMLTableSectionElement {
622
619
  const thead = document.createElement('thead');
623
620
  const headerRow = document.createElement('tr');
624
-
625
621
  // Add bulk checkbox or empty checkbox column
626
622
  if (this.state.showBulkCheckbox) {
627
- headerRow.appendChild(this._buildBulkCheckboxCell());
623
+ const bulkTh = document.createElement('th');
624
+ bulkTh.style.width = '40px';
625
+ bulkTh.style.textAlign = 'center';
626
+ const bulkCheckbox = document.createElement('input');
627
+ bulkCheckbox.type = 'checkbox';
628
+ bulkCheckbox.className = 'jux-bulk-checkbox';
629
+ bulkCheckbox.style.cursor = 'pointer';
630
+ bulkCheckbox.title = 'Select all';
631
+ bulkCheckbox.addEventListener('change', (e) => {
632
+ if (bulkCheckbox.checked) {
633
+ this.selectAll();
634
+ } else {
635
+ this.deselectAll();
636
+ }
637
+ });
638
+ bulkTh.appendChild(bulkCheckbox);
639
+ headerRow.insertBefore(bulkTh, headerRow.firstChild);
628
640
  } else if (this.state.showCheckboxes) {
629
- const emptyTh = document.createElement('th');
630
- emptyTh.style.width = '40px';
631
- headerRow.appendChild(emptyTh);
641
+ const checkboxTh = document.createElement('th');
642
+ checkboxTh.style.width = '40px';
643
+ headerRow.insertBefore(checkboxTh, headerRow.firstChild);
632
644
  }
633
-
634
- // Add column headers with optional sort
645
+ // Add column headers with optional sorts
635
646
  this.state.columns.forEach(col => {
636
647
  const th = this._buildColumnHeader(col);
637
648
  headerRow.appendChild(th);
638
649
  });
639
-
650
+ thead.appendChild(headerRow);
640
651
  thead.appendChild(headerRow);
641
652
  return thead;
642
653
  }
643
-
644
654
  private _buildBulkCheckboxCell(): HTMLTableCellElement {
645
655
  const bulkTh = document.createElement('th');
646
656
  bulkTh.style.width = '40px';
647
657
  bulkTh.style.textAlign = 'center';
648
-
649
658
  const bulkCheckbox = document.createElement('input');
650
659
  bulkCheckbox.type = 'checkbox';
651
660
  bulkCheckbox.className = 'jux-bulk-checkbox';
652
661
  bulkCheckbox.style.cursor = 'pointer';
653
662
  bulkCheckbox.title = 'Select all';
654
-
655
663
  bulkCheckbox.addEventListener('change', (e) => {
656
664
  if (bulkCheckbox.checked) {
657
665
  this.selectAll();
@@ -659,23 +667,19 @@ export class Table extends BaseComponent<TableState> {
659
667
  this.deselectAll();
660
668
  }
661
669
  });
662
-
663
670
  bulkTh.appendChild(bulkCheckbox);
664
671
  return bulkTh;
665
672
  }
666
-
667
673
  private _buildColumnHeader(col: ColumnDef): HTMLTableCellElement {
668
674
  const th = document.createElement('th');
669
675
  th.textContent = col.label;
670
676
  th.setAttribute('data-column-key', col.key);
671
677
  if (col.width) th.style.width = col.width;
672
-
673
678
  if (this.state.sortable) {
674
679
  th.style.cursor = 'pointer';
675
680
  th.style.userSelect = 'none';
676
681
 
677
682
  th.addEventListener('click', (e) => {
678
- // Update state
679
683
  if (this.state.sortColumn === col.key) {
680
684
  this.state.sortDirection = this.state.sortDirection === 'asc' ? 'desc' : 'asc';
681
685
  } else {
@@ -683,18 +687,15 @@ export class Table extends BaseComponent<TableState> {
683
687
  this.state.sortDirection = 'asc';
684
688
  }
685
689
 
686
- // Re-render
687
690
  const tbody = this._tableElement!.querySelector('tbody')!;
688
691
  this._renderTableBody(tbody);
689
692
 
690
- // Update UI indicators
691
693
  const headerRow = th.parentElement!;
692
694
  headerRow.querySelectorAll('th[data-column-key]').forEach(h => {
693
695
  h.textContent = h.textContent?.replace(' ▲', '').replace(' ▼', '') || '';
694
696
  });
695
697
  th.textContent = col.label + (this.state.sortDirection === 'asc' ? ' ▲' : ' ▼');
696
698
 
697
- // Fire callback
698
699
  this._triggerCallback('sortChange', col.key, this.state.sortDirection, e);
699
700
  });
700
701
  }
@@ -702,25 +703,20 @@ export class Table extends BaseComponent<TableState> {
702
703
  return th;
703
704
  }
704
705
 
705
- // Step 4: WIRE orchestrator
706
706
  private _wireAllEvents(wrapper: HTMLElement, tbody: HTMLTableSectionElement): void {
707
707
  this._wireTriggerEvents(tbody);
708
-
709
708
  if (this.state.paginated) {
710
709
  this._updatePagination(wrapper, tbody);
711
710
  }
712
-
713
- this._wireStandardEvents(wrapper); // ✅ Use inherited method
711
+ this._wireStandardEvents(wrapper);
714
712
  this._wireSyncBindings(wrapper, tbody);
715
713
  }
716
714
 
717
715
  /* ═════════════════════════════════════════════════════════════════
718
716
  * SECTION 6: EVENT WIRING
719
- * WIRE phase - connects storage to actual DOM listeners/subscriptions
720
717
  * ═════════════════════════════════════════════════════════════════ */
721
718
 
722
719
  private _wireTriggerEvents(tbody: HTMLTableSectionElement): void {
723
- // === rowClick: Fire immediately when row is clicked ===
724
720
  if (this._triggerHandlers.has('rowClick')) {
725
721
  const handler = this._triggerHandlers.get('rowClick')!;
726
722
  tbody.addEventListener('click', (e) => {
@@ -731,14 +727,12 @@ export class Table extends BaseComponent<TableState> {
731
727
  rows = this._getSortedRows(rows);
732
728
  rows = this._getPaginatedRows(rows);
733
729
  const rowData = rows[rowIndex];
734
- if (rowData) {
735
- handler(rowData, rowIndex, e);
736
- }
730
+ if (rowData) handler(rowData, rowIndex, e);
737
731
  }
738
732
  });
739
733
  tbody.style.cursor = 'pointer';
740
734
  }
741
- // === cellClick: Fire immediately when cell is clicked ===
735
+
742
736
  if (this._triggerHandlers.has('cellClick')) {
743
737
  const handler = this._triggerHandlers.get('cellClick')!;
744
738
  tbody.addEventListener('click', (e) => {
@@ -761,24 +755,18 @@ export class Table extends BaseComponent<TableState> {
761
755
  }
762
756
  });
763
757
  }
764
- // === Selection events: Fire with internal logic ===
758
+
765
759
  if (this.state.selectable) {
766
760
  tbody.addEventListener('click', (e) => {
767
761
  const target = e.target as HTMLElement;
768
-
769
- // Check if click was on checkbox
770
762
  const isCheckboxClick = target.tagName === 'INPUT' && target.getAttribute('type') === 'checkbox';
771
763
 
772
- // If trigger is 'checkbox' and click wasn't on checkbox, ignore
773
- if (this.state.selectionTrigger === 'checkbox' && !isCheckboxClick) {
774
- return;
775
- }
764
+ if (this.state.selectionTrigger === 'checkbox' && !isCheckboxClick) return;
776
765
 
777
- // ✨ FIX: If trigger is 'row' and click WAS on checkbox, toggle it manually
778
766
  if (this.state.selectionTrigger === 'row' && isCheckboxClick) {
779
- e.preventDefault(); // Prevent default checkbox behavior
767
+ e.preventDefault();
780
768
  const checkbox = target as HTMLInputElement;
781
- checkbox.checked = !checkbox.checked; // ✨ Toggle the checkbox
769
+ checkbox.checked = !checkbox.checked;
782
770
  }
783
771
 
784
772
  const tr = target.closest('tr');
@@ -794,32 +782,24 @@ export class Table extends BaseComponent<TableState> {
794
782
  const wasSelected = this.state.selectedIndexes.has(actualRowIndex);
795
783
 
796
784
  if (this.state.multiSelect) {
797
- // Toggle selection
798
785
  if (wasSelected) {
799
786
  this.state.selectedIndexes.delete(actualRowIndex);
800
787
  tr.classList.remove('jux-table-row-selected');
801
-
802
- // Update checkbox if present
803
788
  const checkbox = tr.querySelector('input[type="checkbox"]') as HTMLInputElement;
804
789
  if (checkbox) checkbox.checked = false;
805
-
806
790
  if (this._triggerHandlers.has('deselected')) {
807
791
  this._triggerHandlers.get('deselected')!(this.state.rows[actualRowIndex], actualRowIndex, e);
808
792
  }
809
793
  } else {
810
794
  this.state.selectedIndexes.add(actualRowIndex);
811
795
  tr.classList.add('jux-table-row-selected');
812
-
813
- // Update checkbox if present
814
796
  const checkbox = tr.querySelector('input[type="checkbox"]') as HTMLInputElement;
815
797
  if (checkbox) checkbox.checked = true;
816
-
817
798
  if (this._triggerHandlers.has('selected')) {
818
799
  this._triggerHandlers.get('selected')!(this.state.rows[actualRowIndex], actualRowIndex, e);
819
800
  }
820
801
  }
821
802
  } else {
822
- // Single select
823
803
  const previousSelection = Array.from(this.state.selectedIndexes);
824
804
  this.state.selectedIndexes.clear();
825
805
  tbody.querySelectorAll('tr').forEach(row => {
@@ -831,11 +811,8 @@ export class Table extends BaseComponent<TableState> {
831
811
  if (!wasSelected) {
832
812
  this.state.selectedIndexes.add(actualRowIndex);
833
813
  tr.classList.add('jux-table-row-selected');
834
-
835
- // Update checkbox if present
836
814
  const checkbox = tr.querySelector('input[type="checkbox"]') as HTMLInputElement;
837
815
  if (checkbox) checkbox.checked = true;
838
-
839
816
  if (this._triggerHandlers.has('selected')) {
840
817
  this._triggerHandlers.get('selected')!(this.state.rows[actualRowIndex], actualRowIndex, e);
841
818
  }
@@ -850,17 +827,14 @@ export class Table extends BaseComponent<TableState> {
850
827
  }
851
828
  }
852
829
 
853
- // Update bulk checkbox state if present
854
830
  this._updateBulkCheckboxState();
855
831
 
856
- // Fire selectionChange
857
832
  if (this._triggerHandlers.has('selectionChange')) {
858
833
  this._triggerHandlers.get('selectionChange')!(this.getSelectedRows(), this.getSelectedIndexes(), e);
859
834
  }
860
835
  }
861
836
  });
862
837
 
863
- // Only set pointer cursor if row is trigger
864
838
  if (this.state.selectionTrigger === 'row') {
865
839
  tbody.style.cursor = 'pointer';
866
840
  }
@@ -887,8 +861,8 @@ export class Table extends BaseComponent<TableState> {
887
861
  stateObj.subscribe((val: any) => {
888
862
  const previousRows = this.state.rows;
889
863
  const transformed = transform(val);
890
- // Handle selections
891
864
  const hadSelections = this.state.selectedIndexes.size > 0;
865
+
892
866
  if (this.state.selectionBehavior === 'preserve' && this.state.rowIdField) {
893
867
  this._preserveSelections(previousRows, transformed);
894
868
  } else {
@@ -904,8 +878,9 @@ export class Table extends BaseComponent<TableState> {
904
878
  this.state.selectedIndexes.clear();
905
879
  }
906
880
  }
881
+
907
882
  this.state.rows = transformed;
908
- // Auto-reset pagination
883
+
909
884
  if (this.state.paginated) {
910
885
  const totalPages = Math.ceil(transformed.length / this.state.rowsPerPage);
911
886
  if (this.state.currentPage > totalPages && totalPages > 0) {
@@ -915,12 +890,12 @@ export class Table extends BaseComponent<TableState> {
915
890
  this.state.currentPage = 1;
916
891
  }
917
892
  }
918
- // Re-render
893
+
919
894
  this._renderTableBody(tbody);
920
895
  if (this.state.paginated) {
921
896
  this._updatePagination(wrapper, tbody);
922
897
  }
923
- // Fire callbacks
898
+
924
899
  this._triggerCallback('dataChange', transformed, previousRows);
925
900
  if (hadSelections || this.state.selectedIndexes.size > 0) {
926
901
  this._triggerHandlers.get('selectionChange')?.(this.getSelectedRows(), this.getSelectedIndexes(), new CustomEvent('dataChange'));
@@ -938,7 +913,7 @@ export class Table extends BaseComponent<TableState> {
938
913
  stateObj.subscribe((val: any) => {
939
914
  const transformed = transform(val);
940
915
  this.state.columns = transformed;
941
- // Full re-render needed for columns
916
+
942
917
  const table = this._tableElement!;
943
918
  table.innerHTML = '';
944
919
  const thead = this._buildTableHeader();
@@ -946,7 +921,7 @@ export class Table extends BaseComponent<TableState> {
946
921
  const newTbody = document.createElement('tbody');
947
922
  this._renderTableBody(newTbody);
948
923
  table.appendChild(newTbody);
949
- // Re-wire events
924
+
950
925
  this._wireTriggerEvents(newTbody);
951
926
  if (this.state.paginated) {
952
927
  this._updatePagination(wrapper, newTbody);
@@ -956,10 +931,8 @@ export class Table extends BaseComponent<TableState> {
956
931
 
957
932
  /* ═════════════════════════════════════════════════════════════════
958
933
  * SECTION 7: INTERNAL HELPERS
959
- * Data processing, DOM updates, selection management
960
934
  * ═════════════════════════════════════════════════════════════════ */
961
935
 
962
- // Data processing
963
936
  private _getFilteredRows(): any[] {
964
937
  if (!this.state.filterText) return this.state.rows;
965
938
  const searchText = this.state.filterText.toLowerCase();
@@ -974,7 +947,6 @@ export class Table extends BaseComponent<TableState> {
974
947
  private _getSortedRows(rows: any[]): any[] {
975
948
  if (!this.state.sortColumn) return rows;
976
949
 
977
- // ✨ Check if sorting by computed column
978
950
  const computedDef = this.state.computedColumns.get(this.state.sortColumn);
979
951
 
980
952
  const sorted = [...rows].sort((a, b) => {
@@ -982,22 +954,18 @@ export class Table extends BaseComponent<TableState> {
982
954
  let bVal: any;
983
955
 
984
956
  if (computedDef) {
985
- // ✨ Compute values on the fly for computed columns
986
957
  const aIndex = this.state.rows.indexOf(a);
987
958
  const bIndex = this.state.rows.indexOf(b);
988
959
  aVal = computedDef.compute(a, aIndex);
989
960
  bVal = computedDef.compute(b, bIndex);
990
961
  } else {
991
- // Normal column: get value from row data
992
962
  aVal = a[this.state.sortColumn! as keyof typeof a];
993
963
  bVal = b[this.state.sortColumn! as keyof typeof b];
994
964
  }
995
965
 
996
- // Standard comparison logic
997
966
  if (aVal === bVal) return 0;
998
967
  if (aVal == null) return 1;
999
968
  if (bVal == null) return -1;
1000
-
1001
969
  const comparison = aVal < bVal ? -1 : 1;
1002
970
  return this.state.sortDirection === 'asc' ? comparison : -comparison;
1003
971
  });
@@ -1012,14 +980,13 @@ export class Table extends BaseComponent<TableState> {
1012
980
  return rows.slice(start, end);
1013
981
  }
1014
982
 
1015
- // DOM updates
1016
983
  private _updateTable(): void {
1017
984
  if (!this._tableElement) return;
1018
985
  const tbody = this._tableElement.querySelector('tbody');
1019
986
  if (!tbody) return;
1020
- // Re-render using the same logic as initial render
987
+
1021
988
  this._renderTableBody(tbody);
1022
- // Update pagination if enabled
989
+
1023
990
  const wrapper = this._tableElement.closest('.jux-table-wrapper');
1024
991
  if (wrapper && this.state.paginated) {
1025
992
  this._updatePagination(wrapper as HTMLElement, tbody);
@@ -1030,20 +997,17 @@ export class Table extends BaseComponent<TableState> {
1030
997
  tbody.innerHTML = '';
1031
998
  let rows = this._getFilteredRows();
1032
999
  rows = this._getSortedRows(rows);
1033
- const totalPages = Math.ceil(rows.length / this.state.rowsPerPage);
1034
1000
  rows = this._getPaginatedRows(rows);
1035
1001
 
1036
- rows.forEach((row, visualIndex) => {
1002
+ rows.forEach((row) => {
1037
1003
  const tr = document.createElement('tr');
1038
-
1039
- // Check if this row is selected
1040
1004
  const actualRowIndex = this.state.rows.indexOf(row);
1041
1005
  const isSelected = this.state.selectedIndexes.has(actualRowIndex);
1006
+
1042
1007
  if (isSelected) {
1043
1008
  tr.classList.add('jux-table-row-selected');
1044
1009
  }
1045
1010
 
1046
- // Add checkbox column if enabled
1047
1011
  if (this.state.showCheckboxes) {
1048
1012
  const checkboxTd = document.createElement('td');
1049
1013
  checkboxTd.style.width = '40px';
@@ -1055,32 +1019,23 @@ export class Table extends BaseComponent<TableState> {
1055
1019
  checkboxTd.appendChild(checkbox);
1056
1020
  tr.appendChild(checkboxTd);
1057
1021
  }
1058
- // Add data columns (including computed columns)
1022
+
1059
1023
  this.state.columns.forEach(col => {
1060
1024
  const td = document.createElement('td');
1061
-
1062
- // ✨ NEW: Check if this is a computed column
1063
1025
  const computedDef = this.state.computedColumns.get(col.key);
1064
1026
 
1065
1027
  let cellValue: any;
1066
1028
  let rendered: string | HTMLElement;
1067
1029
 
1068
1030
  if (computedDef) {
1069
- // ✨ Computed column: Evaluate compute function
1070
1031
  cellValue = computedDef.compute(row, actualRowIndex);
1071
-
1072
- // Use computed column's custom renderer if provided
1073
1032
  if (computedDef.render) {
1074
1033
  rendered = computedDef.render(cellValue, row, actualRowIndex);
1075
1034
  } else {
1076
- // Default: stringify the computed value
1077
1035
  rendered = cellValue != null ? String(cellValue) : '';
1078
1036
  }
1079
1037
  } else {
1080
- // Normal column: Get value from row data
1081
1038
  cellValue = row[col.key as keyof typeof row];
1082
-
1083
- // Use column's render function if provided
1084
1039
  if (col.render) {
1085
1040
  rendered = col.render(cellValue, row);
1086
1041
  } else {
@@ -1088,7 +1043,6 @@ export class Table extends BaseComponent<TableState> {
1088
1043
  }
1089
1044
  }
1090
1045
 
1091
- // Insert rendered content
1092
1046
  if (typeof rendered === 'string') {
1093
1047
  td.innerHTML = rendered;
1094
1048
  } else {
@@ -1105,34 +1059,18 @@ export class Table extends BaseComponent<TableState> {
1105
1059
  private _updateHeaderCheckbox(thead: HTMLTableSectionElement): void {
1106
1060
  const headerRow = thead.querySelector('tr');
1107
1061
  if (!headerRow) return;
1108
- // Remove existing checkbox column(s)
1062
+
1109
1063
  const existingCheckboxThs = headerRow.querySelectorAll('th:first-child');
1110
1064
  existingCheckboxThs.forEach(th => {
1111
1065
  if (th.querySelector('.jux-bulk-checkbox') || th.textContent === '') {
1112
1066
  th.remove();
1113
1067
  }
1114
1068
  });
1115
- // Add bulk checkbox or empty checkbox column
1069
+
1116
1070
  if (this.state.showBulkCheckbox) {
1117
- const bulkTh = document.createElement('th');
1118
- bulkTh.style.width = '40px';
1119
- bulkTh.style.textAlign = 'center';
1120
- const bulkCheckbox = document.createElement('input');
1121
- bulkCheckbox.type = 'checkbox';
1122
- bulkCheckbox.className = 'jux-bulk-checkbox';
1123
- bulkCheckbox.style.cursor = 'pointer';
1124
- bulkCheckbox.title = 'Select all';
1125
- bulkCheckbox.addEventListener('change', (e) => {
1126
- if (bulkCheckbox.checked) {
1127
- this.selectAll();
1128
- } else {
1129
- this.deselectAll();
1130
- }
1131
- });
1132
- bulkTh.appendChild(bulkCheckbox);
1071
+ const bulkTh = this._buildBulkCheckboxCell();
1133
1072
  headerRow.insertBefore(bulkTh, headerRow.firstChild);
1134
1073
  } else if (this.state.showCheckboxes) {
1135
- // Add empty header cell for checkbox column (no bulk select)
1136
1074
  const checkboxTh = document.createElement('th');
1137
1075
  checkboxTh.style.width = '40px';
1138
1076
  headerRow.insertBefore(checkboxTh, headerRow.firstChild);
@@ -1143,8 +1081,10 @@ export class Table extends BaseComponent<TableState> {
1143
1081
  if (!this.state.showBulkCheckbox || !this._tableElement) return;
1144
1082
  const bulkCheckbox = this._tableElement.querySelector('.jux-bulk-checkbox') as HTMLInputElement;
1145
1083
  if (!bulkCheckbox) return;
1084
+
1146
1085
  const totalRows = this.state.rows.length;
1147
1086
  const selectedRows = this.state.selectedIndexes.size;
1087
+
1148
1088
  if (selectedRows === 0) {
1149
1089
  bulkCheckbox.checked = false;
1150
1090
  bulkCheckbox.indeterminate = false;
@@ -1161,38 +1101,37 @@ export class Table extends BaseComponent<TableState> {
1161
1101
  if (!this._tableElement) return;
1162
1102
  const tbody = this._tableElement.querySelector('tbody');
1163
1103
  if (!tbody) return;
1164
- // Get current page rows
1104
+
1165
1105
  let rows = this._getFilteredRows();
1166
1106
  rows = this._getSortedRows(rows);
1167
1107
  const pageRows = this._getPaginatedRows(rows);
1168
- // Update each visible row's selection state
1108
+
1169
1109
  Array.from(tbody.children).forEach((tr, visualIndex) => {
1170
1110
  const pageRowData = pageRows[visualIndex];
1171
1111
  const actualRowIndex = this.state.rows.indexOf(pageRowData);
1172
1112
  const isSelected = this.state.selectedIndexes.has(actualRowIndex);
1173
- // Update row highlight
1113
+
1174
1114
  if (isSelected) {
1175
1115
  tr.classList.add('jux-table-row-selected');
1176
1116
  } else {
1177
1117
  tr.classList.remove('jux-table-row-selected');
1178
1118
  }
1179
- // Update checkbox if present
1119
+
1180
1120
  const checkbox = tr.querySelector('input[type="checkbox"]') as HTMLInputElement;
1181
1121
  if (checkbox) {
1182
1122
  checkbox.checked = isSelected;
1183
1123
  }
1184
1124
  });
1185
- // Update bulk checkbox state
1125
+
1186
1126
  this._updateBulkCheckboxState();
1187
1127
  }
1188
1128
 
1189
- // Selection management
1190
- private _preserveSelections(previousRows: any[][], newRows: any[][]): void {
1129
+ private _preserveSelections(previousRows: any[], newRows: any[]): void {
1191
1130
  if (!this.state.rowIdField || this.state.selectionBehavior === 'clear') {
1192
1131
  this.state.selectedIndexes.clear();
1193
1132
  return;
1194
1133
  }
1195
- // Build map of old selections by ID
1134
+
1196
1135
  const selectedIds = new Set<any>();
1197
1136
  Array.from(this.state.selectedIndexes).forEach(index => {
1198
1137
  const row = previousRows[index];
@@ -1200,7 +1139,7 @@ export class Table extends BaseComponent<TableState> {
1200
1139
  selectedIds.add(row[this.state.rowIdField! as keyof typeof row]);
1201
1140
  }
1202
1141
  });
1203
- // Find new indexes for selected IDs
1142
+
1204
1143
  this.state.selectedIndexes.clear();
1205
1144
  newRows.forEach((row, index) => {
1206
1145
  const rowId = row[this.state.rowIdField! as keyof typeof row];
@@ -1210,21 +1149,20 @@ export class Table extends BaseComponent<TableState> {
1210
1149
  });
1211
1150
  }
1212
1151
 
1213
- // Pagination
1214
1152
  private _updatePagination(wrapper: HTMLElement, tbody: HTMLTableSectionElement): void {
1215
- // Remove existing pagination
1216
1153
  const existingPagination = wrapper.querySelector('.jux-table-pagination');
1217
- if (existingPagination) {
1218
- existingPagination.remove();
1219
- }
1154
+ if (existingPagination) existingPagination.remove();
1155
+
1220
1156
  let rows = this._getFilteredRows();
1221
1157
  rows = this._getSortedRows(rows);
1222
1158
  const totalPages = Math.ceil(rows.length / this.state.rowsPerPage);
1159
+
1223
1160
  if (totalPages <= 1) return;
1161
+
1224
1162
  const pagination = document.createElement('div');
1225
1163
  pagination.className = 'jux-table-pagination';
1226
1164
  pagination.style.cssText = 'margin-top: 10px; display: flex; gap: 5px; justify-content: center;';
1227
- // Previous button
1165
+
1228
1166
  const prevBtn = document.createElement('button');
1229
1167
  prevBtn.textContent = 'Previous';
1230
1168
  prevBtn.disabled = this.state.currentPage === 1;
@@ -1238,12 +1176,12 @@ export class Table extends BaseComponent<TableState> {
1238
1176
  }
1239
1177
  });
1240
1178
  pagination.appendChild(prevBtn);
1241
- // Page info
1179
+
1242
1180
  const pageInfo = document.createElement('span');
1243
1181
  pageInfo.textContent = `Page ${this.state.currentPage} of ${totalPages}`;
1244
1182
  pageInfo.style.cssText = 'display: flex; align-items: center; padding: 0 10px;';
1245
1183
  pagination.appendChild(pageInfo);
1246
- // Next button
1184
+
1247
1185
  const nextBtn = document.createElement('button');
1248
1186
  nextBtn.textContent = 'Next';
1249
1187
  nextBtn.disabled = this.state.currentPage === totalPages;
@@ -1257,9 +1195,9 @@ export class Table extends BaseComponent<TableState> {
1257
1195
  }
1258
1196
  });
1259
1197
  pagination.appendChild(nextBtn);
1198
+
1260
1199
  wrapper.appendChild(pagination);
1261
1200
  }
1262
-
1263
1201
  }
1264
1202
 
1265
1203
  export function table(id: string, options: TableOptions = {}): Table {
package/lib/components/tabs.d.ts CHANGED
@@ -35,10 +35,9 @@ export declare class Tabs extends BaseComponent<TabsState> {
35
35
  */
36
36
  updateTabContent(tabId: string, content: string | BaseComponent<any>): this;
37
37
  /**
38
- * ✅ NEW: Append content to a specific tab
39
- * Accepts single item or array of strings/BaseComponents
38
+ * Add content to a specific tab panel
40
39
  */
41
- addTabContent(tabId: string, content: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this;
40
+ addTabContent(tabId: string, content: (string | BaseComponent<any>)[]): this;
42
41
  /**
43
42
  * Get tab by ID
44
43
  */
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;IAoEpB,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;;;OAGG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI;IA2B7G;;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"}
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;IAqEpB,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,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,IAAI;IAuB5E;;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
@@ -111,6 +111,7 @@ export class Tabs extends BaseComponent {
111
111
  tabPanel.innerHTML = tab.content;
112
112
  }
113
113
  else if (tab.content instanceof BaseComponent) {
114
+ // Now panel exists in DOM, so render() can find it
114
115
  tab.content.render(`#${tabPanel.id}`);
115
116
  }
116
117
  });
@@ -164,8 +165,7 @@ export class Tabs extends BaseComponent {
164
165
  return this;
165
166
  }
166
167
  /**
167
- * ✅ NEW: Append content to a specific tab
168
- * Accepts single item or array of strings/BaseComponents
168
+ * Add content to a specific tab panel
169
169
  */
170
170
  addTabContent(tabId, content) {
171
171
  const panel = document.getElementById(`${this._id}-${tabId}-panel`);
@@ -173,20 +173,17 @@ export class Tabs extends BaseComponent {
173
173
  console.warn(`[Tabs] Panel not found for tab: ${tabId}`);
174
174
  return this;
175
175
  }
176
- // Normalize to array
177
- const items = Array.isArray(content) ? content : [content];
178
- items.forEach(item => {
176
+ content.forEach(item => {
179
177
  if (typeof item === 'string') {
180
- // Append HTML string
181
178
  const tempDiv = document.createElement('div');
182
179
  tempDiv.innerHTML = item;
183
180
  while (tempDiv.firstChild) {
184
181
  panel.appendChild(tempDiv.firstChild);
185
182
  }
186
183
  }
187
- else if (item instanceof BaseComponent) {
188
- // Render component into panel
189
- item.render(`#${panel.id}`);
184
+ else if (item && typeof item.render === 'function') {
185
+ // ✅ Render the component into the panel
186
+ item.render(panel);
190
187
  }
191
188
  });
192
189
  return this;
package/lib/components/tabs.ts CHANGED
@@ -154,6 +154,7 @@ export class Tabs extends BaseComponent<TabsState> {
154
154
  if (typeof tab.content === 'string') {
155
155
  tabPanel.innerHTML = tab.content;
156
156
  } else if (tab.content instanceof BaseComponent) {
157
+ // Now panel exists in DOM, so render() can find it
157
158
  tab.content.render(`#${tabPanel.id}`);
158
159
  }
159
160
  });
@@ -219,30 +220,25 @@ export class Tabs extends BaseComponent<TabsState> {
219
220
  }
220
221
 
221
222
  /**
222
- * ✅ NEW: Append content to a specific tab
223
- * Accepts single item or array of strings/BaseComponents
223
+ * Add content to a specific tab panel
224
224
  */
225
- addTabContent(tabId: string, content: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this {
225
+ addTabContent(tabId: string, content: (string | BaseComponent<any>)[]): this {
226
226
  const panel = document.getElementById(`${this._id}-${tabId}-panel`);
227
227
  if (!panel) {
228
228
  console.warn(`[Tabs] Panel not found for tab: ${tabId}`);
229
229
  return this;
230
230
  }
231
231
 
232
- // Normalize to array
233
- const items = Array.isArray(content) ? content : [content];
234
-
235
- items.forEach(item => {
232
+ content.forEach(item => {
236
233
  if (typeof item === 'string') {
237
- // Append HTML string
238
234
  const tempDiv = document.createElement('div');
239
235
  tempDiv.innerHTML = item;
240
236
  while (tempDiv.firstChild) {
241
237
  panel.appendChild(tempDiv.firstChild);
242
238
  }
243
- } else if (item instanceof BaseComponent) {
244
- // Render component into panel
245
- item.render(`#${panel.id}`);
239
+ } else if (item && typeof item.render === 'function') {
240
+ // ✅ Render the component into the panel
241
+ item.render(panel);
246
242
  }
247
243
  });
248
244
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "juxscript",
3
- "version": "1.1.215",
3
+ "version": "1.1.216",
4
4
  "type": "module",
5
5
  "description": "A JavaScript UX authorship platform",
6
6
  "main": "index.js",