@visitwonders/assembly 0.1.0

package/dist/data/table.js

@@ -0,0 +1,478 @@
+import "./table.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import { fn } from '@ember/helper';
+import Checkbox from '../form/checkbox.js';
+import Skeleton from '../status/skeleton.js';
+import { helper } from '@ember/component/helper';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime';
+
+;
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+/**
+ * Safely converts any value to a string for display or comparison.
+ */
+function stringifyValue(value) {
+  if (value === null || value === undefined) {
+    return '';
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return String(value);
+  }
+  if (typeof value === 'object') {
+    return JSON.stringify(value);
+  }
+  // For symbols, functions, etc.
+  return '';
+}
+// ============================================================================
+// Types
+// ============================================================================
+
+// ============================================================================
+// Component Signature
+// ============================================================================
+
+// ============================================================================
+// Main Component
+// ============================================================================
+class Table extends Component {
+  static {
+    g(this.prototype, "focusedRowIndex", [tracked], function () {
+      return null;
+    });
+  }
+  #focusedRowIndex = (i(this, "focusedRowIndex"), void 0);
+  static {
+    g(this.prototype, "internalSortState", [tracked], function () {
+      return null;
+    });
+  }
+  #internalSortState = (i(this, "internalSortState"), void 0);
+  static {
+    g(this.prototype, "internalSelectedIds", [tracked], function () {
+      return [];
+    });
+  }
+  #internalSelectedIds = (i(this, "internalSelectedIds"), void 0);
+  static {
+    g(this.prototype, "lastSelectedIndex", [tracked], function () {
+      return null;
+    });
+  }
+  #lastSelectedIndex = (i(this, "lastSelectedIndex"), void 0);
+  static {
+    g(this.prototype, "isKeyboardFocused", [tracked], function () {
+      return false;
+    });
+  }
+  #isKeyboardFocused = (i(this, "isKeyboardFocused"), void 0);
+  elementRef = null;
+  pendingMouseFocus = false;
+  constructor(owner, args) {
+    super(owner, args);
+  }
+  // ============================================================================
+  // Computed Properties
+  // ============================================================================
+  get componentId() {
+    return guidFor(this);
+  }
+  get visibleColumns() {
+    return this.args.columns.filter(col => !col.hidden);
+  }
+  get isControlledSelection() {
+    return this.args.selectedIds !== undefined;
+  }
+  get selectedIds() {
+    return this.isControlledSelection ? this.args.selectedIds ?? [] : this.internalSelectedIds;
+  }
+  get isControlledSort() {
+    return this.args.sortBy !== undefined || this.args.onSortChange !== undefined;
+  }
+  get sortState() {
+    return this.isControlledSort ? this.args.sortBy ?? null : this.internalSortState;
+  }
+  get sortedData() {
+    const data = this.args.data ?? [];
+    const sort = this.sortState;
+    if (!sort) return data;
+    const column = this.args.columns.find(col => col.id === sort.columnId);
+    if (!column) return data;
+    const sorted = [...data];
+    sorted.sort((a, b) => {
+      // Use custom sort function if provided
+      if (column.sortFn) {
+        const result = column.sortFn(a, b);
+        return sort.direction === 'desc' ? -result : result;
+      }
+      // Default sort using accessor
+      const aVal = this.getCellValue(a, column);
+      const bVal = this.getCellValue(b, column);
+      let result = 0;
+      if (aVal === bVal) {
+        result = 0;
+      } else if (aVal === null || aVal === undefined) {
+        result = 1;
+      } else if (bVal === null || bVal === undefined) {
+        result = -1;
+      } else if (typeof aVal === 'string' && typeof bVal === 'string') {
+        result = aVal.localeCompare(bVal);
+      } else if (typeof aVal === 'number' && typeof bVal === 'number') {
+        result = aVal - bVal;
+      } else {
+        // Handle other types by converting to string safely
+        const aStr = stringifyValue(aVal);
+        const bStr = stringifyValue(bVal);
+        result = aStr.localeCompare(bStr);
+      }
+      return sort.direction === 'desc' ? -result : result;
+    });
+    return sorted;
+  }
+  get displayData() {
+    if (this.args.isLoading) {
+      return [];
+    }
+    return this.sortedData;
+  }
+  get isEmpty() {
+    return !this.args.isLoading && this.displayData.length === 0;
+  }
+  get loadingRowCount() {
+    return this.args.loadingRows ?? 5;
+  }
+  get allRowsSelected() {
+    if (this.displayData.length === 0) return false;
+    return this.displayData.every(row => {
+      const id = this.getRowId(row);
+      return this.selectedIds.includes(id);
+    });
+  }
+  get someRowsSelected() {
+    return this.selectedIds.length > 0 && !this.allRowsSelected;
+  }
+  get enabledRows() {
+    return this.displayData.filter(row => !this.args.isRowDisabled?.(row));
+  }
+  // ============================================================================
+  // Methods
+  // ============================================================================
+  getRowId = row => {
+    if (this.args.getRowId) {
+      return this.args.getRowId(row);
+    }
+    // Fallback: try to use 'id' property or generate from index
+    const rowRecord = row;
+    if (typeof rowRecord['id'] === 'string') {
+      return rowRecord['id'];
+    }
+    if (typeof rowRecord['id'] === 'number') {
+      return String(rowRecord['id']);
+    }
+    return String(this.args.data.indexOf(row));
+  };
+  getCellValue = (row, column) => {
+    if (column.accessorFn) {
+      return column.accessorFn(row);
+    }
+    if (column.accessorKey) {
+      return row[column.accessorKey];
+    }
+    return undefined;
+  };
+  formatCellValue = (row, column) => {
+    const value = this.getCellValue(row, column);
+    return stringifyValue(value);
+  };
+  getRowElementId = row => {
+    return `${this.componentId}-row-${this.getRowId(row)}`;
+  };
+  isRowSelected = row => {
+    const id = this.getRowId(row);
+    return this.selectedIds.includes(id);
+  };
+  isRowFocused = rowIndex => {
+    return this.isKeyboardFocused && this.focusedRowIndex === rowIndex;
+  };
+  isColumnSortable = column => {
+    // Column-level sortable overrides table-level
+    if (column.sortable !== undefined) {
+      return column.sortable;
+    }
+    return this.args.isSortable ?? false;
+  };
+  getColumnSortDirection = column => {
+    if (this.sortState?.columnId === column.id) {
+      return this.sortState.direction;
+    }
+    return null;
+  };
+  getAriaSortValue = column => {
+    if (!this.isColumnSortable(column)) {
+      return undefined;
+    }
+    const direction = this.getColumnSortDirection(column);
+    if (direction === 'asc') return 'ascending';
+    if (direction === 'desc') return 'descending';
+    return 'none';
+  };
+  updateSelection(newIds) {
+    if (this.isControlledSelection) {
+      this.args.onSelectionChange?.(newIds);
+    } else {
+      this.internalSelectedIds = newIds;
+    }
+  }
+  updateSort(newSort) {
+    if (this.isControlledSort) {
+      this.args.onSortChange?.(newSort);
+    } else {
+      this.internalSortState = newSort;
+    }
+  }
+  moveFocus(direction) {
+    const rows = this.displayData;
+    if (rows.length === 0) return;
+    const currentIndex = this.focusedRowIndex ?? -1;
+    let newIndex;
+    switch (direction) {
+      case 'first':
+        newIndex = 0;
+        break;
+      case 'last':
+        newIndex = rows.length - 1;
+        break;
+      case 'next':
+        newIndex = currentIndex < rows.length - 1 ? currentIndex + 1 : currentIndex;
+        break;
+      case 'prev':
+        newIndex = currentIndex > 0 ? currentIndex - 1 : 0;
+        break;
+    }
+    this.focusedRowIndex = newIndex;
+    // Scroll into view
+    const row = rows[newIndex];
+    if (row) {
+      const rowId = this.getRowElementId(row);
+      const rowElement = document.getElementById(rowId);
+      rowElement?.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+  }
+  // ============================================================================
+  // Event Handlers
+  // ============================================================================
+  handleSort = column => {
+    if (!this.isColumnSortable(column)) return;
+    const currentSort = this.sortState;
+    if (currentSort?.columnId === column.id) {
+      // Toggle direction or clear
+      if (currentSort.direction === 'asc') {
+        this.updateSort({
+          columnId: column.id,
+          direction: 'desc'
+        });
+      } else {
+        this.updateSort(null);
+      }
+    } else {
+      // New column, start with ascending
+      this.updateSort({
+        columnId: column.id,
+        direction: 'asc'
+      });
+    }
+  };
+  handleSelectAll = () => {
+    if (!this.args.isSelectable) return;
+    if (this.allRowsSelected) {
+      // Deselect all
+      this.updateSelection([]);
+    } else {
+      // Select all enabled rows
+      const allIds = this.enabledRows.map(row => this.getRowId(row));
+      this.updateSelection(allIds);
+    }
+  };
+  handleRowSelect = (row, event) => {
+    if (!this.args.isSelectable) return;
+    if (this.args.isRowDisabled?.(row)) return;
+    const id = this.getRowId(row);
+    const current = [...this.selectedIds];
+    const rowIndex = this.displayData.indexOf(row);
+    // Shift+click for range selection
+    if (event?.shiftKey && this.lastSelectedIndex !== null) {
+      const start = Math.min(this.lastSelectedIndex, rowIndex);
+      const end = Math.max(this.lastSelectedIndex, rowIndex);
+      const rangeIds = this.displayData.slice(start, end + 1).filter(r => !this.args.isRowDisabled?.(r)).map(r => this.getRowId(r));
+      // Add range to selection (union)
+      const newIds = [...new Set([...current, ...rangeIds])];
+      this.updateSelection(newIds);
+      return;
+    }
+    // Ctrl/Cmd+click for toggle
+    const isCtrlClick = event?.ctrlKey || event?.metaKey;
+    if (isCtrlClick) {
+      const index = current.indexOf(id);
+      if (index >= 0) {
+        current.splice(index, 1);
+      } else {
+        current.push(id);
+      }
+      this.updateSelection(current);
+    } else {
+      // Toggle selection
+      const index = current.indexOf(id);
+      if (index >= 0) {
+        current.splice(index, 1);
+      } else {
+        current.push(id);
+      }
+      this.updateSelection(current);
+    }
+    this.lastSelectedIndex = rowIndex;
+  };
+  handleRowClick = (row, event) => {
+    // Don't trigger row click if clicking on checkbox
+    const target = event.target;
+    if (target.closest('[data-table-checkbox]')) {
+      return;
+    }
+    if (this.args.isRowDisabled?.(row)) return;
+    this.args.onRowClick?.(row);
+  };
+  handleKeyDown = event => {
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.moveFocus('next');
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.moveFocus('prev');
+        break;
+      case 'Home':
+        event.preventDefault();
+        this.moveFocus('first');
+        break;
+      case 'End':
+        event.preventDefault();
+        this.moveFocus('last');
+        break;
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        if (this.focusedRowIndex !== null) {
+          const row = this.displayData[this.focusedRowIndex];
+          if (row) {
+            if (this.args.isSelectable) {
+              this.handleRowSelect(row);
+            } else if (this.args.onRowClick) {
+              this.args.onRowClick(row);
+            }
+          }
+        }
+        break;
+      case 'a':
+      case 'A':
+        // Ctrl/Cmd+A to select all
+        if ((event.ctrlKey || event.metaKey) && this.args.isSelectable) {
+          event.preventDefault();
+          this.handleSelectAll();
+        }
+        break;
+    }
+  };
+  handleMouseDown = () => {
+    // Mark that focus is coming from a mouse click
+    this.pendingMouseFocus = true;
+  };
+  handleFocus = () => {
+    // Only show focus ring when focus is from keyboard, not mouse
+    if (this.pendingMouseFocus) {
+      this.pendingMouseFocus = false;
+      this.isKeyboardFocused = false;
+    } else {
+      this.isKeyboardFocused = true;
+      if (this.focusedRowIndex === null && this.displayData.length > 0) {
+        this.focusedRowIndex = 0;
+      }
+    }
+  };
+  handleBlur = () => {
+    this.focusedRowIndex = null;
+    this.isKeyboardFocused = false;
+  };
+  // ============================================================================
+  // Modifiers
+  // ============================================================================
+  setupRef = modifier(element => {
+    this.elementRef = element;
+    return () => {
+      this.elementRef = null;
+    };
+  });
+  // ============================================================================
+  // Template Helpers
+  // ============================================================================
+  getCellContext = (row, column, rowIndex) => {
+    return {
+      row,
+      value: this.getCellValue(row, column),
+      rowIndex,
+      column
+    };
+  };
+  // ============================================================================
+  // Template
+  // ============================================================================
+  static {
+    setComponentTemplate(precompileTemplate("<table class=\"table\" data-sticky-header={{if @hasStickyHeader \"true\"}} data-striped={{if @isStriped \"true\"}} data-bordered={{if @isBordered \"true\"}} data-compact={{if @isCompact \"true\"}} data-loading={{if @isLoading \"true\"}} data-test-table tabindex=\"0\" {{this.setupRef}} {{!-- template-lint-disable no-pointer-down-event-binding --}} {{on \"mousedown\" this.handleMouseDown}} {{on \"keydown\" this.handleKeyDown}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} ...attributes>\n  {{#if @caption}}\n    <caption class=\"caption\" data-test-table-caption>\n      {{@caption}}\n    </caption>\n  {{/if}}\n\n  <thead class=\"thead\" data-test-table-header>\n    <tr class=\"header-row\">\n      {{#if @isSelectable}}\n        <th class=\"header-cell checkbox-cell\" data-test-table-header-checkbox>\n          <Checkbox @isChecked={{this.allRowsSelected}} @isIndeterminate={{this.someRowsSelected}} @isLabelHidden={{true}} @label=\"Select all rows\" @size=\"sm\" data-table-checkbox {{on \"change\" this.handleSelectAll}} />\n        </th>\n      {{/if}}\n\n      {{#each this.visibleColumns as |column|}}\n        <th class=\"header-cell\" data-align={{column.align}} data-sortable={{if (this.isColumnSortable column) \"true\"}} data-sorted={{if (this.getColumnSortDirection column) \"true\"}} data-sort-direction={{this.getColumnSortDirection column}} aria-sort={{this.getAriaSortValue column}} style={{if column.width (concat \"width:\" column.width \";\")}} data-test-table-header-cell data-test-column-id={{column.id}}>\n          {{#if (this.isColumnSortable column)}}\n            <button type=\"button\" class=\"sort-button\" {{on \"click\" (fn this.handleSort column)}} data-test-table-sort-button>\n              <span class=\"header-text\">{{column.header}}</span>\n              <span class=\"sort-icon\" aria-hidden=\"true\">\n                {{#if (this.getColumnSortDirection column)}}\n                  {{#if (eq (this.getColumnSortDirection column) \"asc\")}}\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\">\n                      <path d=\"M4 10l4-4 4 4\" />\n                    </svg>\n                  {{else}}\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\">\n                      <path d=\"M4 6l4 4 4-4\" />\n                    </svg>\n                  {{/if}}\n                {{else}}\n                  <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-unsorted\">\n                    <path d=\"M4 6l4-3 4 3M4 10l4 3 4-3\" />\n                  </svg>\n                {{/if}}\n              </span>\n            </button>\n          {{else}}\n            <span class=\"header-text\">{{column.header}}</span>\n          {{/if}}\n        </th>\n      {{/each}}\n    </tr>\n  </thead>\n\n  <tbody class=\"tbody\" data-test-table-body>\n    {{#if @isLoading}}\n      {{#if (has-block \"loading\")}}\n        {{yield to=\"loading\"}}\n      {{else}}\n        {{!-- template-lint-disable no-unused-block-params --}}\n        {{#each (repeat this.loadingRowCount)}}\n          <tr class=\"row skeleton-row\" data-test-table-skeleton-row>\n            {{#if @isSelectable}}\n              <td class=\"cell checkbox-cell\">\n                <Skeleton @width={{16}} @height={{16}} @radius=\"sm\" />\n              </td>\n            {{/if}}\n            {{#each this.visibleColumns as |column|}}\n              <td class=\"cell\" data-align={{column.align}}>\n                <Skeleton @width=\"70%\" @height={{16}} />\n              </td>\n            {{/each}}\n          </tr>\n        {{/each}}\n      {{/if}}\n    {{else if this.isEmpty}}\n      {{#if (has-block \"empty\")}}\n        <tr class=\"empty-row\">\n          <td colspan={{if @isSelectable (add (len this.visibleColumns) 1) (len this.visibleColumns)}}>\n            {{yield to=\"empty\"}}\n          </td>\n        </tr>\n      {{else}}\n        <tr class=\"empty-row\" data-test-table-empty>\n          <td class=\"empty-cell\" colspan={{if @isSelectable (add (len this.visibleColumns) 1) (len this.visibleColumns)}}>\n            {{#if @emptyMessage}}\n              {{@emptyMessage}}\n            {{else}}\n              No data available\n            {{/if}}\n          </td>\n        </tr>\n      {{/if}}\n    {{else}}\n      {{#each this.displayData as |row rowIndex|}}\n        {{!-- template-lint-disable no-invalid-interactive --}}\n        <tr id={{this.getRowElementId row}} class=\"row\" data-selected={{if (this.isRowSelected row) \"true\" \"false\"}} data-focused={{if (this.isRowFocused rowIndex) \"true\" \"false\"}} data-disabled={{if (@isRowDisabled row) \"true\" \"false\"}} data-clickable={{if @onRowClick \"true\"}} aria-selected={{if @isSelectable (if (this.isRowSelected row) \"true\" \"false\")}} data-test-table-row data-test-row-id={{this.getRowId row}} {{on \"click\" (fn this.handleRowClick row)}}>\n          {{#if @isSelectable}}\n            <td class=\"cell checkbox-cell\" data-test-table-row-checkbox>\n              <Checkbox @isChecked={{this.isRowSelected row}} @isDisabled={{@isRowDisabled row}} @isLabelHidden={{true}} @label=\"Select row\" @size=\"sm\" data-table-checkbox {{on \"click\" (fn this.handleRowSelect row)}} />\n            </td>\n          {{/if}}\n\n          {{#each this.visibleColumns as |column|}}\n            <td class=\"cell\" data-align={{column.align}} data-test-table-cell data-test-column-id={{column.id}}>\n              {{#if (has-block \"cell\")}}\n                {{yield (this.getCellContext row column rowIndex) to=\"cell\"}}\n              {{else}}\n                {{this.formatCellValue row column}}\n              {{/if}}\n            </td>\n          {{/each}}\n        </tr>\n      {{/each}}\n    {{/if}}\n  </tbody>\n</table>", {
+      strictMode: true,
+      scope: () => ({
+        on,
+        Checkbox,
+        concat,
+        fn,
+        eq,
+        repeat,
+        Skeleton,
+        add,
+        len
+      })
+    }), this);
+  }
+}
+const repeat = helper(function ([count]) {
+  return Array.from({
+    length: count
+  }, (_, i) => i);
+});
+const len = helper(function ([arr]) {
+  return arr?.length ?? 0;
+});
+const add = helper(function ([a, b]) {
+  return a + b;
+});
+const eq = helper(function ([a, b]) {
+  return a === b;
+});
+const concat = helper(function (parts) {
+  return parts.join('');
+});
+
+export { Table as default };
+//# sourceMappingURL=table.js.map

package/dist/data/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}