@beeblock/svelar-datatable 0.1.0

package/src/ui/DataTableButtons.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+  import type { ButtonDef, ExportFormat, DataTableStore, ColumnDef } from '../index.js';
+  import { ExportManager } from '../export/ExportManager.js';
+
+  interface Props {
+    buttons: (ButtonDef | ExportFormat)[];
+    store: DataTableStore;
+    columns: ColumnDef[];
+  }
+  let { buttons, store, columns }: Props = $props();
+
+  const exportManager = new ExportManager();
+
+  const exportLabels: Record<ExportFormat, string> = {
+    csv: 'CSV',
+    excel: 'Excel',
+    pdf: 'PDF',
+    clipboard: 'Copy',
+    print: 'Print',
+  };
+
+  function isExportFormat(btn: ButtonDef | ExportFormat): btn is ExportFormat {
+    return typeof btn === 'string';
+  }
+
+  async function handleExport(format: ExportFormat) {
+    const state = store.getState();
+    const data = state.filteredRows;
+    const visibleCols = columns.filter((c) => state.columnVisibility[c.key] !== false);
+    await exportManager.export(format, data, visibleCols);
+  }
+
+  async function handleAction(btn: ButtonDef) {
+    if (typeof btn.action === 'function') {
+      const selected = store.getSelectedRows();
+      const state = store.getState();
+      await btn.action(selected, state.allRows);
+    }
+  }
+
+  function isDisabled(btn: ButtonDef): boolean {
+    if (typeof btn.disabled === 'function') {
+      return btn.disabled(store.getSelectedRows());
+    }
+    return btn.disabled ?? false;
+  }
+</script>
+
+<div class="sdt-buttons">
+  {#each buttons as btn}
+    {#if isExportFormat(btn)}
+      <button type="button" class="sdt-btn sdt-btn-outline" onclick={() => handleExport(btn)}>
+        {exportLabels[btn]}
+      </button>
+    {:else if btn.collection}
+      <div class="sdt-btn-group">
+        <button type="button" class="sdt-btn sdt-btn-{btn.variant ?? 'default'}" disabled={isDisabled(btn)}>
+          {btn.label}
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12">
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
+      </div>
+    {:else}
+      <button
+        type="button"
+        class="sdt-btn sdt-btn-{btn.variant ?? 'default'}"
+        disabled={isDisabled(btn)}
+        onclick={() => handleAction(btn)}
+      >
+        {btn.label}
+      </button>
+    {/if}
+  {/each}
+</div>
+
+<style>
+  .sdt-buttons {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    flex-wrap: wrap;
+  }
+  .sdt-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.375rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.15s, border-color 0.15s;
+    border: 1px solid transparent;
+  }
+  .sdt-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  .sdt-btn-default {
+    background: var(--sdt-primary, #3b82f6);
+    color: #fff;
+  }
+  .sdt-btn-default:hover:not(:disabled) {
+    background: var(--sdt-primary-hover, #2563eb);
+  }
+  .sdt-btn-destructive {
+    background: #ef4444;
+    color: #fff;
+  }
+  .sdt-btn-destructive:hover:not(:disabled) {
+    background: #dc2626;
+  }
+  .sdt-btn-outline {
+    background: var(--sdt-input-bg, #fff);
+    border-color: var(--sdt-border, #e5e7eb);
+    color: var(--sdt-text, #111827);
+  }
+  .sdt-btn-outline:hover:not(:disabled) {
+    background: var(--sdt-hover, #f3f4f6);
+  }
+  .sdt-btn-secondary {
+    background: var(--sdt-hover, #f3f4f6);
+    color: var(--sdt-text, #111827);
+  }
+  .sdt-btn-secondary:hover:not(:disabled) {
+    background: #e5e7eb;
+  }
+  .sdt-btn-ghost {
+    background: transparent;
+    color: var(--sdt-text, #111827);
+  }
+  .sdt-btn-ghost:hover:not(:disabled) {
+    background: var(--sdt-hover, #f3f4f6);
+  }
+  .sdt-btn-group {
+    position: relative;
+  }
+</style>

package/src/ui/DataTableCell.svelte

@@ -0,0 +1,381 @@
+<script lang="ts">
+  import type { ColumnDef, DataTableStore } from '../index.js';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    row: any;
+    rowIndex: number;
+    column: ColumnDef;
+    store: DataTableStore;
+    editorMode?: string | null;
+    customCell?: Snippet<[{ row: any; column: ColumnDef; value: any }]>;
+    onExcelNavigate?: (direction: 'up' | 'down' | 'left' | 'right') => void;
+    onExcelCommit?: () => void;
+    onInlineCommit?: (row: any, columnKey: string, newValue: any, oldValue: any) => void;
+    tdClass?: string;
+  }
+  let {
+    row, rowIndex, column, store, editorMode = null, customCell,
+    onExcelNavigate, onExcelCommit, onInlineCommit, tdClass = '',
+  }: Props = $props();
+
+  let value = $derived(row[column.key]);
+
+  let state = $state(store.getState());
+  $effect(() => {
+    return store.subscribe(() => {
+      state = store.getState();
+    });
+  });
+
+  let isExcelMode = $derived(editorMode === 'excel');
+  let isFocused = $derived(
+    isExcelMode
+    && state.excelFocusedCell?.rowIndex === rowIndex
+    && state.excelFocusedCell?.columnKey === column.key
+  );
+  let isEditing = $derived(
+    isExcelMode
+    && state.excelEditingCell?.rowIndex === rowIndex
+    && state.excelEditingCell?.columnKey === column.key
+  );
+
+  // Inline editor state
+  let isInlineEditing = $derived(
+    editorMode === 'inline'
+    && state.editorMode === 'inline'
+    && state.editingRowId === store.getRowId(row)
+    && state.editingColumn === column.key
+  );
+  let inlineValue = $state('');
+
+  $effect(() => {
+    if (isInlineEditing) {
+      inlineValue = value != null ? String(value) : '';
+    }
+  });
+
+  let cellEl: HTMLTableCellElement | undefined = $state();
+  let inputEl: HTMLInputElement | HTMLSelectElement | undefined = $state();
+
+  let inlineInputEl: HTMLInputElement | HTMLSelectElement | undefined = $state();
+
+  // Auto-focus input when entering edit mode (excel or inline)
+  $effect(() => {
+    if (isEditing && inputEl) {
+      inputEl.focus();
+      if (inputEl instanceof HTMLInputElement) {
+        inputEl.select();
+      }
+    }
+  });
+
+  $effect(() => {
+    if (isInlineEditing && inlineInputEl) {
+      inlineInputEl.focus();
+      if (inlineInputEl instanceof HTMLInputElement) {
+        inlineInputEl.select();
+      }
+    }
+  });
+
+  function commitInlineEdit() {
+    if (!isInlineEditing) return;
+    const col = column;
+    const oldVal = value;
+    let newVal: any = inlineValue;
+    if (col.type === 'number') newVal = newVal === '' ? null : Number(newVal);
+    else if (col.type === 'boolean') newVal = newVal === 'true' || newVal === '1';
+    else if (newVal === '') newVal = null;
+
+    store.closeEditor();
+    if (newVal !== oldVal) {
+      onInlineCommit?.(row, col.key, newVal, oldVal);
+    }
+  }
+
+  function cancelInlineEdit() {
+    store.closeEditor();
+  }
+
+  function handleInlineKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      commitInlineEdit();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      cancelInlineEdit();
+    }
+  }
+
+  function formatValue(val: any, type?: string): string {
+    if (val === null || val === undefined) return '';
+    if (type === 'boolean') return val ? 'Yes' : 'No';
+    if (type === 'date' && val) {
+      try { return new Date(val).toLocaleDateString(); } catch { return String(val); }
+    }
+    if (type === 'number') return String(val);
+    return String(val);
+  }
+
+  function handleDblClick() {
+    if (column.editable && editorMode === 'inline') {
+      store.openEditor(store.getRowId(row), column.key, 'inline');
+    }
+  }
+
+  function handleCellClick() {
+    if (isExcelMode && column.editable !== false) {
+      store.focusCell(rowIndex, column.key);
+    }
+  }
+
+  function handleCellKeydown(e: KeyboardEvent) {
+    if (!isExcelMode || !isFocused) return;
+
+    if (isEditing) {
+      switch (e.key) {
+        case 'Enter':
+          e.preventDefault();
+          onExcelCommit?.();
+          break;
+        case 'Escape':
+          e.preventDefault();
+          store.cancelCellEdit();
+          cellEl?.focus();
+          break;
+        case 'Tab':
+          e.preventDefault();
+          onExcelCommit?.();
+          onExcelNavigate?.(e.shiftKey ? 'left' : 'right');
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          onExcelCommit?.();
+          onExcelNavigate?.('up');
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          onExcelCommit?.();
+          onExcelNavigate?.('down');
+          break;
+        case 'ArrowLeft':
+        case 'ArrowRight':
+          // Allow cursor movement inside text inputs
+          break;
+      }
+      return;
+    }
+
+    // While focused (not editing)
+    switch (e.key) {
+      case 'Enter':
+      case 'F2':
+        e.preventDefault();
+        if (column.editable !== false) {
+          store.startCellEdit();
+        }
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        onExcelNavigate?.('up');
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        onExcelNavigate?.('down');
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        onExcelNavigate?.('left');
+        break;
+      case 'ArrowRight':
+      case 'Tab':
+        e.preventDefault();
+        onExcelNavigate?.(e.shiftKey ? 'left' : 'right');
+        break;
+      case 'Escape':
+        e.preventDefault();
+        store.clearExcelFocus();
+        break;
+      default:
+        // Typing a character starts editing
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && column.editable !== false) {
+          store.startCellEdit();
+          // Let the character through to the input
+          store.setExcelEditValue(e.key);
+        }
+        break;
+    }
+  }
+
+  function handleInputKeydown(e: KeyboardEvent) {
+    // For select/boolean: left/right arrows also commit+navigate (no cursor to move)
+    if (column.type === 'boolean' || column.editorField?.type === 'select') {
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        e.preventDefault();
+        onExcelCommit?.();
+        onExcelNavigate?.(e.key === 'ArrowLeft' ? 'left' : 'right');
+        return;
+      }
+    }
+    handleCellKeydown(e);
+  }
+
+  // Auto-focus cell element when it becomes focused in excel mode
+  $effect(() => {
+    if (isFocused && !isEditing && cellEl) {
+      cellEl.focus();
+    }
+  });
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<td
+  bind:this={cellEl}
+  class="sdt-cell {column.className ?? ''} {tdClass}"
+  class:sdt-cell-editable={column.editable !== false}
+  class:sdt-excel-focused={isFocused && !isEditing}
+  class:sdt-excel-editing={isEditing}
+  style:width={column.width}
+  style:min-width={column.minWidth}
+  style:max-width={column.maxWidth}
+  ondblclick={handleDblClick}
+  onclick={handleCellClick}
+  onkeydown={handleCellKeydown}
+  tabindex={isExcelMode && column.editable !== false ? 0 : undefined}
+>
+  {#if isInlineEditing}
+    {#if column.type === 'boolean'}
+      <select
+        bind:this={inlineInputEl}
+        class="sdt-inline-input"
+        value={inlineValue}
+        onchange={(e) => { inlineValue = e.currentTarget.value; commitInlineEdit(); }}
+        onkeydown={handleInlineKeydown}
+        onblur={commitInlineEdit}
+      >
+        <option value="true">Yes</option>
+        <option value="false">No</option>
+      </select>
+    {:else if column.editorField?.type === 'select' && column.editorField.options}
+      <select
+        bind:this={inlineInputEl}
+        class="sdt-inline-input"
+        value={inlineValue}
+        onchange={(e) => { inlineValue = e.currentTarget.value; commitInlineEdit(); }}
+        onkeydown={handleInlineKeydown}
+        onblur={commitInlineEdit}
+      >
+        {#each column.editorField.options as opt}
+          <option value={opt.value}>{opt.label}</option>
+        {/each}
+      </select>
+    {:else}
+      <input
+        bind:this={inlineInputEl}
+        class="sdt-inline-input"
+        type={column.type === 'number' ? 'number' : 'text'}
+        bind:value={inlineValue}
+        onkeydown={handleInlineKeydown}
+        onblur={commitInlineEdit}
+      />
+    {/if}
+  {:else if isEditing}
+    {#if column.type === 'boolean'}
+      <select
+        bind:this={inputEl}
+        class="sdt-excel-input"
+        value={state.excelEditValue}
+        onchange={(e) => store.setExcelEditValue(e.currentTarget.value)}
+        onkeydown={handleInputKeydown}
+      >
+        <option value="true">Yes</option>
+        <option value="false">No</option>
+      </select>
+    {:else if column.editorField?.type === 'select' && column.editorField.options}
+      <select
+        bind:this={inputEl}
+        class="sdt-excel-input"
+        value={state.excelEditValue}
+        onchange={(e) => store.setExcelEditValue(e.currentTarget.value)}
+        onkeydown={handleInputKeydown}
+      >
+        {#each column.editorField.options as opt}
+          <option value={opt.value}>{opt.label}</option>
+        {/each}
+      </select>
+    {:else}
+      <input
+        bind:this={inputEl}
+        class="sdt-excel-input"
+        type={column.type === 'number' ? 'number' : 'text'}
+        value={state.excelEditValue}
+        oninput={(e) => store.setExcelEditValue(e.currentTarget.value)}
+        onkeydown={handleInputKeydown}
+      />
+    {/if}
+  {:else if customCell}
+    {@render customCell({ row, column, value })}
+  {:else if column.type === 'html'}
+    {@html value}
+  {:else}
+    {formatValue(value, column.type)}
+  {/if}
+</td>
+
+<style>
+  .sdt-cell {
+    padding: var(--sdt-cell-padding, 0.625rem 0.75rem);
+    border-bottom: 1px solid var(--sdt-border, #e5e7eb);
+    font-size: 0.875rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .sdt-cell-editable {
+    cursor: pointer;
+  }
+  .sdt-cell-editable:hover {
+    background-color: var(--sdt-cell-edit-hover, rgba(59, 130, 246, 0.05));
+  }
+  .sdt-excel-focused {
+    outline: 2px solid var(--sdt-primary, #3b82f6);
+    outline-offset: -2px;
+    background-color: var(--sdt-excel-focus-bg, rgba(59, 130, 246, 0.06));
+  }
+  .sdt-excel-editing {
+    padding: 0.125rem;
+    background-color: var(--sdt-excel-edit-bg, #fff);
+    outline: 2px solid var(--sdt-primary, #3b82f6);
+    outline-offset: -2px;
+  }
+  .sdt-excel-input {
+    width: 100%;
+    height: 100%;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 0.875rem;
+    font-family: inherit;
+    padding: 0.375rem 0.5rem;
+    box-sizing: border-box;
+  }
+  .sdt-excel-input:focus {
+    outline: none;
+  }
+  .sdt-inline-input {
+    width: 100%;
+    border: 1px solid var(--sdt-primary, #3b82f6);
+    border-radius: 0.25rem;
+    outline: none;
+    background: var(--sdt-bg, #fff);
+    font-size: 0.875rem;
+    font-family: inherit;
+    padding: 0.25rem 0.375rem;
+    box-sizing: border-box;
+  }
+  .sdt-inline-input:focus {
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+  }
+</style>

package/src/ui/DataTableColumnToggle.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import type { ColumnDef, DataTableStore } from '../index.js';
+
+  interface Props {
+    store: DataTableStore;
+    columns: ColumnDef[];
+  }
+  let { store, columns }: Props = $props();
+
+  let open = $state(false);
+  let state = $state(store.getState());
+
+  $effect(() => {
+    return store.subscribe(() => {
+      state = store.getState();
+    });
+  });
+
+  function toggle(key: string) {
+    store.toggleColumnVisibility(key);
+  }
+
+  function handleClickOutside(e: MouseEvent) {
+    const target = e.target as HTMLElement;
+    if (!target.closest('.sdt-col-toggle')) {
+      open = false;
+    }
+  }
+
+  $effect(() => {
+    if (open) {
+      document.addEventListener('click', handleClickOutside);
+      return () => document.removeEventListener('click', handleClickOutside);
+    }
+  });
+</script>
+
+<div class="sdt-col-toggle">
+  <button type="button" class="sdt-col-toggle-btn" onclick={() => (open = !open)} aria-label="Toggle columns">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+      <path d="M12 3v18M3 12h18M9 3h6M9 21h6M3 9v6M21 9v6" />
+    </svg>
+    Columns
+  </button>
+
+  {#if open}
+    <div class="sdt-col-toggle-menu">
+      {#each columns as col}
+        <label class="sdt-col-toggle-item">
+          <input
+            type="checkbox"
+            checked={state.columnVisibility[col.key] !== false}
+            onchange={() => toggle(col.key)}
+          />
+          <span>{col.header}</span>
+        </label>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sdt-col-toggle {
+    position: relative;
+  }
+  .sdt-col-toggle-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--sdt-border, #e5e7eb);
+    border-radius: 0.375rem;
+    background: var(--sdt-input-bg, #fff);
+    color: var(--sdt-text, #111827);
+    font-size: 0.8125rem;
+    cursor: pointer;
+    transition: background-color 0.15s;
+  }
+  .sdt-col-toggle-btn:hover {
+    background-color: var(--sdt-hover, #f3f4f6);
+  }
+  .sdt-col-toggle-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 0.25rem;
+    min-width: 180px;
+    padding: 0.5rem;
+    background: var(--sdt-bg, #fff);
+    border: 1px solid var(--sdt-border, #e5e7eb);
+    border-radius: 0.375rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    z-index: 20;
+  }
+  .sdt-col-toggle-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0.5rem;
+    font-size: 0.8125rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    color: var(--sdt-text, #111827);
+  }
+  .sdt-col-toggle-item:hover {
+    background-color: var(--sdt-hover, #f3f4f6);
+  }
+  .sdt-col-toggle-item input {
+    accent-color: var(--sdt-primary, #3b82f6);
+  }
+</style>

package/src/ui/DataTableEditor.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { EditorFieldDef, DataTableStore, DataTableClassNames } from '../index.js';
+  import DataTableModalEditor from './DataTableModalEditor.svelte';
+  import DataTableBubbleEditor from './DataTableBubbleEditor.svelte';
+
+  interface Props {
+    fields: EditorFieldDef[];
+    store: DataTableStore;
+    classNames?: DataTableClassNames;
+    onsubmit: (formData: Record<string, any>) => void | Promise<void>;
+    anchorEl?: HTMLElement | null;
+  }
+  let { fields, store, classNames = {}, onsubmit, anchorEl = null }: Props = $props();
+
+  let state = $state(store.getState());
+  $effect(() => {
+    return store.subscribe(() => {
+      state = store.getState();
+    });
+  });
+</script>
+
+{#if state.editorMode === 'modal'}
+  <DataTableModalEditor {fields} {store} {onsubmit} {classNames} />
+{:else if state.editorMode === 'bubble'}
+  <DataTableBubbleEditor {fields} {store} {onsubmit} {anchorEl} {classNames} />
+{/if}