@beeblock/svelar-datatable 0.1.0

package/src/ui/DataTableEditorField.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+  import type { EditorFieldDef, DataTableStore } from '../index.js';
+
+  interface Props {
+    field: EditorFieldDef;
+    store: DataTableStore;
+  }
+  let { field, store }: Props = $props();
+
+  let state = $state(store.getState());
+  $effect(() => {
+    return store.subscribe(() => {
+      state = store.getState();
+    });
+  });
+
+  let value = $derived(state.formData[field.name] ?? field.defaultValue ?? '');
+  let error = $derived(state.validationErrors[field.name]);
+  let visible = $derived(field.showWhen ? field.showWhen(state.formData) : true);
+
+  function handleChange(val: any) {
+    store.setFormField(field.name, val);
+  }
+</script>
+
+{#if visible}
+  <div class="sdt-editor-field" class:sdt-editor-field-error={!!error}>
+    {#if field.type !== 'hidden'}
+      <label class="sdt-editor-label" for="sdt-field-{field.name}">
+        {field.label}
+        {#if field.required}<span class="sdt-required">*</span>{/if}
+      </label>
+    {/if}
+
+    {#if field.type === 'text' || field.type === 'number' || field.type === 'date' || field.type === 'datetime'}
+      <input
+        id="sdt-field-{field.name}"
+        type={field.type === 'datetime' ? 'datetime-local' : field.type}
+        class="sdt-editor-input {field.className ?? ''}"
+        value={value}
+        placeholder={field.placeholder}
+        disabled={field.disabled}
+        required={field.required}
+        oninput={(e) => handleChange((e.target as HTMLInputElement).value)}
+      />
+    {:else if field.type === 'textarea'}
+      <textarea
+        id="sdt-field-{field.name}"
+        class="sdt-editor-input sdt-editor-textarea {field.className ?? ''}"
+        value={value}
+        placeholder={field.placeholder}
+        disabled={field.disabled}
+        required={field.required}
+        oninput={(e) => handleChange((e.target as HTMLTextAreaElement).value)}
+        rows="3"
+      ></textarea>
+    {:else if field.type === 'select'}
+      <select
+        id="sdt-field-{field.name}"
+        class="sdt-editor-input {field.className ?? ''}"
+        value={value}
+        disabled={field.disabled}
+        required={field.required}
+        onchange={(e) => handleChange((e.target as HTMLSelectElement).value)}
+      >
+        <option value="">{field.placeholder ?? 'Select...'}</option>
+        {#each field.options ?? [] as opt}
+          <option value={opt.value}>{opt.label}</option>
+        {/each}
+      </select>
+    {:else if field.type === 'multi-select'}
+      <select
+        id="sdt-field-{field.name}"
+        class="sdt-editor-input {field.className ?? ''}"
+        multiple
+        disabled={field.disabled}
+        onchange={(e) => {
+          const selected = Array.from((e.target as HTMLSelectElement).selectedOptions).map(o => o.value);
+          handleChange(selected);
+        }}
+      >
+        {#each field.options ?? [] as opt}
+          <option value={opt.value} selected={Array.isArray(value) && value.includes(opt.value)}>{opt.label}</option>
+        {/each}
+      </select>
+    {:else if field.type === 'checkbox'}
+      <label class="sdt-editor-checkbox">
+        <input
+          id="sdt-field-{field.name}"
+          type="checkbox"
+          checked={!!value}
+          disabled={field.disabled}
+          onchange={(e) => handleChange((e.target as HTMLInputElement).checked)}
+        />
+        <span>{field.placeholder ?? field.label}</span>
+      </label>
+    {:else if field.type === 'radio'}
+      <div class="sdt-editor-radios">
+        {#each field.options ?? [] as opt}
+          <label class="sdt-editor-radio">
+            <input
+              type="radio"
+              name="sdt-field-{field.name}"
+              value={opt.value}
+              checked={value === opt.value}
+              disabled={field.disabled}
+              onchange={() => handleChange(opt.value)}
+            />
+            <span>{opt.label}</span>
+          </label>
+        {/each}
+      </div>
+    {:else if field.type === 'readonly'}
+      <div class="sdt-editor-readonly">{value}</div>
+    {:else if field.type === 'hidden'}
+      <input type="hidden" value={value} />
+    {/if}
+
+    {#if error}
+      <span class="sdt-editor-error">{error}</span>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .sdt-editor-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    margin-bottom: 0.75rem;
+  }
+  .sdt-editor-label {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--sdt-text, #111827);
+  }
+  .sdt-required {
+    color: #ef4444;
+    margin-left: 0.125rem;
+  }
+  .sdt-editor-input {
+    padding: 0.5rem 0.625rem;
+    border: 1px solid var(--sdt-border, #e5e7eb);
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    background: var(--sdt-input-bg, #fff);
+    color: var(--sdt-text, #111827);
+    outline: none;
+    transition: border-color 0.15s;
+  }
+  .sdt-editor-input:focus {
+    border-color: var(--sdt-primary, #3b82f6);
+    box-shadow: 0 0 0 2px var(--sdt-primary-ring, rgba(59, 130, 246, 0.2));
+  }
+  .sdt-editor-input:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  .sdt-editor-textarea {
+    resize: vertical;
+    min-height: 4rem;
+  }
+  .sdt-editor-checkbox,
+  .sdt-editor-radio {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    cursor: pointer;
+  }
+  .sdt-editor-radios {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+  .sdt-editor-readonly {
+    padding: 0.5rem 0.625rem;
+    background: var(--sdt-hover, #f3f4f6);
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    color: var(--sdt-text-muted, #6b7280);
+  }
+  .sdt-editor-error {
+    font-size: 0.75rem;
+    color: #ef4444;
+  }
+  .sdt-editor-field-error .sdt-editor-input {
+    border-color: #ef4444;
+  }
+</style>

package/src/ui/DataTableEditorForm.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import type { EditorFieldDef, DataTableStore } from '../index.js';
+  import DataTableEditorField from './DataTableEditorField.svelte';
+
+  interface Props {
+    fields: EditorFieldDef[];
+    store: DataTableStore;
+    onsubmit: (formData: Record<string, any>) => void | Promise<void>;
+    oncancel: () => void;
+    submitLabel?: string;
+  }
+  let { fields, store, onsubmit, oncancel, submitLabel = 'Save' }: Props = $props();
+
+  let submitting = $state(false);
+
+  async function handleSubmit(e: Event) {
+    e.preventDefault();
+    submitting = true;
+    try {
+      const state = store.getState();
+      await onsubmit(state.formData);
+    } finally {
+      submitting = false;
+    }
+  }
+</script>
+
+<form class="sdt-editor-form" onsubmit={handleSubmit}>
+  <div class="sdt-editor-fields">
+    {#each fields as field}
+      <DataTableEditorField {field} {store} />
+    {/each}
+  </div>
+
+  <div class="sdt-editor-actions">
+    <button type="button" class="sdt-btn sdt-btn-cancel" onclick={oncancel} disabled={submitting}>
+      Cancel
+    </button>
+    <button type="submit" class="sdt-btn sdt-btn-submit" disabled={submitting}>
+      {#if submitting}
+        Saving...
+      {:else}
+        {submitLabel}
+      {/if}
+    </button>
+  </div>
+</form>
+
+<style>
+  .sdt-editor-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .sdt-editor-fields {
+    display: flex;
+    flex-direction: column;
+  }
+  .sdt-editor-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--sdt-border, #e5e7eb);
+  }
+  .sdt-btn {
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    cursor: pointer;
+    border: 1px solid transparent;
+    transition: background-color 0.15s;
+  }
+  .sdt-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .sdt-btn-cancel {
+    background: var(--sdt-input-bg, #fff);
+    border-color: var(--sdt-border, #e5e7eb);
+    color: var(--sdt-text, #111827);
+  }
+  .sdt-btn-cancel:hover:not(:disabled) {
+    background: var(--sdt-hover, #f3f4f6);
+  }
+  .sdt-btn-submit {
+    background: var(--sdt-primary, #3b82f6);
+    color: #fff;
+  }
+  .sdt-btn-submit:hover:not(:disabled) {
+    background: var(--sdt-primary-hover, #2563eb);
+  }
+</style>

package/src/ui/DataTableEmpty.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  interface Props {
+    text?: string;
+    colSpan?: number;
+  }
+  let { text = 'No data available', colSpan = 1 }: Props = $props();
+</script>
+
+<tr class="sdt-empty-row">
+  <td colspan={colSpan} class="sdt-empty-cell">
+    <div class="sdt-empty-content">
+      <svg class="sdt-empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path d="M20 13V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v7m16 0v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-5m16 0h-2.586a1 1 0 0 0-.707.293l-2.414 2.414a1 1 0 0 1-.707.293h-3.172a1 1 0 0 1-.707-.293l-2.414-2.414A1 1 0 0 0 6.586 13H4" />
+      </svg>
+      <span>{text}</span>
+    </div>
+  </td>
+</tr>
+
+<style>
+  .sdt-empty-row {
+    height: 120px;
+  }
+  .sdt-empty-cell {
+    text-align: center;
+    padding: 2rem;
+    color: var(--sdt-text-muted, #6b7280);
+  }
+  .sdt-empty-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .sdt-empty-icon {
+    width: 2rem;
+    height: 2rem;
+    opacity: 0.5;
+  }
+</style>

package/src/ui/DataTableExpandedRow.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    row: any;
+    colSpan: number;
+    expandContent?: Snippet<[{ row: any }]>;
+  }
+  let { row, colSpan, expandContent }: Props = $props();
+</script>
+
+<tr class="sdt-expanded-row">
+  <td colspan={colSpan} class="sdt-expanded-cell">
+    {#if expandContent}
+      {@render expandContent({ row })}
+    {:else}
+      <pre class="sdt-expanded-default">{JSON.stringify(row, null, 2)}</pre>
+    {/if}
+  </td>
+</tr>
+
+<style>
+  .sdt-expanded-row {
+    background: var(--sdt-expanded-bg, #f9fafb);
+  }
+  .sdt-expanded-cell {
+    padding: 1rem;
+    border-bottom: 1px solid var(--sdt-border, #e5e7eb);
+  }
+  .sdt-expanded-default {
+    margin: 0;
+    font-size: 0.75rem;
+    color: var(--sdt-text-muted, #6b7280);
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+</style>

package/src/ui/DataTableFooter.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { ColumnDef, DataTableStore, SelectionMode, DataTableClassNames } from '../index.js';
+
+  interface Props {
+    columns: ColumnDef[];
+    store: DataTableStore;
+    selectable?: SelectionMode;
+    expandable?: boolean;
+    classNames?: DataTableClassNames;
+  }
+  let { columns, store, selectable = 'none', expandable = false, classNames = {} }: Props = $props();
+
+  let state = $state(store.getState());
+  $effect(() => {
+    return store.subscribe(() => {
+      state = store.getState();
+    });
+  });
+
+  let visibleColumns = $derived(
+    state.columnOrder
+      .filter((key) => state.columnVisibility[key] !== false)
+      .map((key) => columns.find((c) => c.key === key))
+      .filter(Boolean) as ColumnDef[]
+  );
+
+  let hasFooter = $derived(visibleColumns.some((c) => c.footer !== undefined));
+
+  function getFooterValue(col: ColumnDef): string {
+    if (!col.footer) return '';
+    if (typeof col.footer === 'function') {
+      return String(col.footer(state.filteredRows));
+    }
+    return col.footer;
+  }
+</script>
+
+{#if hasFooter}
+  <tfoot class="sdt-tfoot {classNames.tfoot ?? ''}">
+    <tr>
+      {#if selectable !== 'none'}
+        <td class="sdt-tf {classNames.tf ?? ''}"></td>
+      {/if}
+      {#if expandable}
+        <td class="sdt-tf {classNames.tf ?? ''}"></td>
+      {/if}
+      {#each visibleColumns as col}
+        <td class="sdt-tf {classNames.tf ?? ''}">{getFooterValue(col)}</td>
+      {/each}
+    </tr>
+  </tfoot>
+{/if}
+
+<style>
+  .sdt-tfoot {
+    background: var(--sdt-head-bg, #f9fafb);
+  }
+  .sdt-tf {
+    padding: var(--sdt-cell-padding, 0.625rem 0.75rem);
+    border-top: 2px solid var(--sdt-border, #e5e7eb);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--sdt-text, #111827);
+  }
+</style>

package/src/ui/DataTableHead.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  import type { ColumnDef, DataTableStore, SelectionMode, DataTableClassNames } from '../index.js';
+
+  interface Props {
+    columns: ColumnDef[];
+    store: DataTableStore;
+    selectable?: SelectionMode;
+    sortable?: boolean;
+    expandable?: boolean;
+    classNames?: DataTableClassNames;
+  }
+  let { columns, store, selectable = 'none', sortable = true, expandable = false, classNames = {} }: Props = $props();
+
+  let state = $state(store.getState());
+  $effect(() => {
+    return store.subscribe(() => {
+      state = store.getState();
+    });
+  });
+
+  let visibleColumns = $derived(
+    state.columnOrder
+      .filter((key) => state.columnVisibility[key] !== false)
+      .map((key) => columns.find((c) => c.key === key))
+      .filter(Boolean) as ColumnDef[]
+  );
+
+  let allSelected = $derived(() => {
+    if (state.filteredRows.length === 0) return false;
+    return state.filteredRows.every((r) => state.selectedIds.has(store.getRowId(r)));
+  });
+
+  function getSortDirection(key: string): 'asc' | 'desc' | null {
+    const s = state.sort.find((s) => s.column === key);
+    return s?.direction ?? null;
+  }
+
+  function getSortIndex(key: string): number {
+    if (state.sort.length <= 1) return -1;
+    return state.sort.findIndex((s) => s.column === key);
+  }
+
+  function handleSort(col: ColumnDef, e: MouseEvent) {
+    if (!sortable || col.sortable === false) return;
+    store.toggleSort(col.key, e.shiftKey);
+  }
+
+  function handleSelectAll() {
+    if (allSelected()) {
+      store.deselectAll();
+    } else {
+      store.selectAll();
+    }
+  }
+</script>
+
+<thead class="sdt-thead {classNames.thead ?? ''}">
+  <tr>
+    {#if selectable === 'multi'}
+      <th class="sdt-th sdt-th-checkbox {classNames.th ?? ''}" style="width: 40px;">
+        <input
+          type="checkbox"
+          checked={allSelected()}
+          onchange={handleSelectAll}
+          aria-label="Select all"
+        />
+      </th>
+    {:else if selectable === 'single'}
+      <th class="sdt-th sdt-th-checkbox {classNames.th ?? ''}" style="width: 40px;"></th>
+    {/if}
+
+    {#if expandable}
+      <th class="sdt-th sdt-th-expand {classNames.th ?? ''}" style="width: 32px;"></th>
+    {/if}
+
+    {#each visibleColumns as col}
+      <th
+        class="sdt-th {col.headerClassName ?? ''} {classNames.th ?? ''}"
+        class:sdt-th-sortable={sortable && col.sortable !== false}
+        style:width={col.width}
+        style:min-width={col.minWidth}
+        style:max-width={col.maxWidth}
+      >
+        {#if sortable && col.sortable !== false}
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div class="sdt-th-sort" onclick={(e) => handleSort(col, e)}>
+            <span>{col.header}</span>
+            <span class="sdt-sort-indicator">
+              {#if getSortDirection(col.key) === 'asc'}
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+                  <path d="m18 15-6-6-6 6" />
+                </svg>
+              {:else if getSortDirection(col.key) === 'desc'}
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+                  <path d="m6 9 6 6 6-6" />
+                </svg>
+              {:else}
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14" class="sdt-sort-idle">
+                  <path d="m7 15 5 5 5-5M7 9l5-5 5 5" />
+                </svg>
+              {/if}
+              {#if getSortIndex(col.key) >= 0}
+                <span class="sdt-sort-index">{getSortIndex(col.key) + 1}</span>
+              {/if}
+            </span>
+          </div>
+        {:else}
+          <span>{col.header}</span>
+        {/if}
+      </th>
+    {/each}
+  </tr>
+</thead>
+
+<style>
+  .sdt-thead {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background: var(--sdt-head-bg, #f9fafb);
+  }
+  .sdt-th {
+    padding: var(--sdt-cell-padding, 0.625rem 0.75rem);
+    text-align: left;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--sdt-text-muted, #6b7280);
+    border-bottom: 2px solid var(--sdt-border, #e5e7eb);
+    white-space: nowrap;
+    user-select: none;
+  }
+  .sdt-th-expand {
+    padding: var(--sdt-cell-padding, 0.625rem 0.5rem);
+  }
+  .sdt-th-checkbox {
+    text-align: center;
+  }
+  .sdt-th-checkbox input {
+    accent-color: var(--sdt-primary, #3b82f6);
+  }
+  .sdt-th-sortable {
+    cursor: pointer;
+  }
+  .sdt-th-sortable:hover {
+    color: var(--sdt-text, #111827);
+    background: var(--sdt-hover, #f3f4f6);
+  }
+  .sdt-th-sort {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .sdt-sort-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.125rem;
+  }
+  .sdt-sort-idle {
+    opacity: 0.3;
+  }
+  .sdt-sort-index {
+    font-size: 0.625rem;
+    color: var(--sdt-primary, #3b82f6);
+    font-weight: 700;
+  }
+</style>

package/src/ui/DataTableLoading.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  interface Props {
+    text?: string;
+    colSpan?: number;
+  }
+  let { text = 'Loading...', colSpan = 1 }: Props = $props();
+</script>
+
+<tr class="sdt-loading-row">
+  <td colspan={colSpan} class="sdt-loading-cell">
+    <div class="sdt-loading-content">
+      <svg class="sdt-spinner" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.25" />
+        <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
+      </svg>
+      <span>{text}</span>
+    </div>
+  </td>
+</tr>
+
+<style>
+  .sdt-loading-row {
+    height: 120px;
+  }
+  .sdt-loading-cell {
+    text-align: center;
+    padding: 2rem;
+    color: var(--sdt-text-muted, #6b7280);
+  }
+  .sdt-loading-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+  }
+  .sdt-spinner {
+    width: 1.25rem;
+    height: 1.25rem;
+    animation: sdt-spin 0.75s linear infinite;
+  }
+  @keyframes sdt-spin {
+    to { transform: rotate(360deg); }
+  }
+</style>