sv5ui 2.0.0 → 2.2.0

package/dist/components/Table/Table.svelte

@@ -0,0 +1,644 @@
+<script lang="ts" module></script>
+
+<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+<script lang="ts" generics="T extends Record<string, any>">import { tableVariants, tableDefaults } from "./table.variants.js";
+import { getComponentConfig, iconsDefaults } from "../../config.js";
+import Icon from "../Icon/Icon.svelte";
+import Button from "../Button/Button.svelte";
+import Checkbox from "../Checkbox/Checkbox.svelte";
+import { useThrottle } from "../../hooks/useThrottle/index.js";
+import {
+  autoGenerateColumns,
+  getRowKey,
+  sortData,
+  filterByGlobal,
+  filterByColumns,
+  paginateData,
+  resolveVisibleColumns,
+  computePinOffsets,
+  formatCellValue
+} from "./table.utils.js";
+const config = getComponentConfig("table", tableDefaults);
+const icons = getComponentConfig("icons", iconsDefaults);
+let {
+  ref = $bindable(null),
+  as = "div",
+  data = [],
+  columns: columnsProp,
+  rowKey,
+  caption,
+  // Sorting
+  sorting = $bindable([]),
+  multiSort = false,
+  manualSorting = false,
+  onSortingChange,
+  // Global Filter
+  globalFilter = $bindable(""),
+  globalFilterKeys,
+  manualFiltering = false,
+  onGlobalFilterChange,
+  // Column Filters
+  columnFilters = $bindable({}),
+  onColumnFiltersChange,
+  // Pagination
+  page = $bindable(0),
+  pageSize = 10,
+  manualPagination = false,
+  onPageChange,
+  // Row Selection
+  selection,
+  selectedRows = $bindable([]),
+  onSelectionChange,
+  // Column Visibility
+  columnVisibility = $bindable(),
+  onColumnVisibilityChange,
+  // Column Pinning
+  columnPinning = $bindable(),
+  // Row Pinning
+  pinnedRows = $bindable([]),
+  onPinnedRowsChange,
+  // Row Expanding
+  expandedRows = $bindable([]),
+  onExpandedChange,
+  // Column Resizing
+  columnSizing = $bindable({}),
+  onColumnSizingChange,
+  // Visual
+  loading = false,
+  loadingColor = config.defaultVariants.loadingColor ?? "primary",
+  loadingAnimation = config.defaultVariants.loadingAnimation ?? "carousel",
+  empty = "No data.",
+  striped = false,
+  hoverable = config.defaultVariants.hoverable ?? true,
+  sticky = false,
+  action,
+  // Callbacks
+  onRowClick,
+  onRowHover,
+  onRowContextmenu,
+  // Styling
+  ui,
+  class: className,
+  // Slots
+  captionSlot,
+  emptySlot,
+  loadingSlot,
+  expandedSlot,
+  bodyTopSlot,
+  bodyBottomSlot,
+  headerSlot,
+  cellSlot,
+  ...restProps
+} = $props();
+$effect(() => {
+  if (ref && action) {
+    const result = action(ref);
+    return () => result?.destroy?.();
+  }
+});
+let _prevGlobalFilter = globalFilter;
+let _prevColumnFilters = columnFilters;
+let _prevPage = page;
+let _prevColumnVisibility = columnVisibility;
+let _prevPinnedRows = pinnedRows;
+let _prevExpandedRows = expandedRows;
+$effect(() => {
+  if (globalFilter !== _prevGlobalFilter) {
+    _prevGlobalFilter = globalFilter;
+    onGlobalFilterChange?.(globalFilter);
+  }
+});
+$effect(() => {
+  if (columnFilters !== _prevColumnFilters) {
+    _prevColumnFilters = columnFilters;
+    onColumnFiltersChange?.(columnFilters);
+  }
+});
+$effect(() => {
+  if (page !== _prevPage) {
+    _prevPage = page;
+    onPageChange?.(page);
+  }
+});
+$effect(() => {
+  if (columnVisibility !== _prevColumnVisibility) {
+    _prevColumnVisibility = columnVisibility;
+    if (columnVisibility !== void 0) onColumnVisibilityChange?.(columnVisibility);
+  }
+});
+$effect(() => {
+  if (pinnedRows !== _prevPinnedRows) {
+    _prevPinnedRows = pinnedRows;
+    onPinnedRowsChange?.(pinnedRows);
+  }
+});
+$effect(() => {
+  if (expandedRows !== _prevExpandedRows) {
+    _prevExpandedRows = expandedRows;
+    onExpandedChange?.(expandedRows);
+  }
+});
+const resolvedColumns = $derived.by(() => {
+  if (columnsProp && columnsProp.length > 0) return columnsProp;
+  return autoGenerateColumns(data);
+});
+const visibleColumns = $derived(
+  resolveVisibleColumns(resolvedColumns, columnVisibility, columnPinning)
+);
+const hasFooter = $derived(visibleColumns.some((col) => col.footer));
+const totalColspan = $derived(visibleColumns.length + (selection === "multiple" ? 1 : 0));
+const filteredData = $derived.by(() => {
+  if (manualFiltering) return data;
+  let result = data;
+  if (globalFilter) {
+    result = filterByGlobal(result, globalFilter, globalFilterKeys);
+  }
+  if (columnFilters && Object.keys(columnFilters).length > 0) {
+    result = filterByColumns(result, columnFilters, resolvedColumns);
+  }
+  return result;
+});
+const sortedData = $derived.by(() => {
+  if (manualSorting || sorting.length === 0) return filteredData;
+  return sortData(filteredData, sorting, resolvedColumns);
+});
+const paginatedData = $derived.by(() => {
+  if (manualPagination) return sortedData;
+  if (pageSize <= 0) return sortedData;
+  return paginateData(sortedData, page, pageSize);
+});
+const pinnedKeySet = $derived(new Set(pinnedRows));
+const pinnedData = $derived.by(() => {
+  if (pinnedRows.length === 0) return [];
+  return sortedData.filter((row, i) => pinnedKeySet.has(getRowKey(row, rowKey, i)));
+});
+const unpinnedPaginatedData = $derived.by(() => {
+  if (pinnedRows.length === 0) return paginatedData;
+  return paginatedData.filter((row, i) => {
+    const absIdx = manualPagination ? i : page * pageSize + i;
+    return !pinnedKeySet.has(getRowKey(row, rowKey, absIdx));
+  });
+});
+const hasVisibleRows = $derived(pinnedData.length > 0 || unpinnedPaginatedData.length > 0);
+function getSortDirection(key) {
+  const item = sorting.find((s) => s.key === key);
+  return item ? item.direction : null;
+}
+function toggleSort(key, event) {
+  const current = getSortDirection(key);
+  let next;
+  if (current === null) next = { key, direction: "asc" };
+  else if (current === "asc") next = { key, direction: "desc" };
+  else next = null;
+  let newSorting;
+  if (multiSort && event?.shiftKey) {
+    const without = sorting.filter((s) => s.key !== key);
+    newSorting = next ? [...without, next] : without;
+  } else {
+    newSorting = next ? [next] : [];
+  }
+  sorting = newSorting;
+  onSortingChange?.(newSorting);
+}
+const selectedKeySet = $derived.by(() => {
+  if (!selection) return /* @__PURE__ */ new Set();
+  return new Set(selectedRows.map((row, i) => getRowKey(row, rowKey, i)));
+});
+const actualVisibleRows = $derived.by(() => {
+  const rows = [];
+  for (let i = 0; i < pinnedData.length; i++) {
+    rows.push({ row: pinnedData[i], absIdx: i });
+  }
+  for (let i = 0; i < unpinnedPaginatedData.length; i++) {
+    const absIdx = manualPagination ? i : page * pageSize + i;
+    rows.push({ row: unpinnedPaginatedData[i], absIdx });
+  }
+  return rows;
+});
+function isRowSelected(row, index) {
+  return selectedKeySet.has(getRowKey(row, rowKey, index));
+}
+function toggleRowSelect(row, index) {
+  if (!selection) return;
+  const key = getRowKey(row, rowKey, index);
+  if (selection === "single") {
+    const isSelected2 = selectedKeySet.has(key);
+    const next2 = isSelected2 ? [] : [row];
+    selectedRows = next2;
+    onSelectionChange?.(next2);
+    return;
+  }
+  const isSelected = selectedKeySet.has(key);
+  let next;
+  if (isSelected) {
+    next = selectedRows.filter((r, i) => getRowKey(r, rowKey, i) !== key);
+  } else {
+    next = [...selectedRows, row];
+  }
+  selectedRows = next;
+  onSelectionChange?.(next);
+}
+const allVisibleSelected = $derived(
+  selection === "multiple" && actualVisibleRows.length > 0 && actualVisibleRows.every(({ row, absIdx }) => isRowSelected(row, absIdx))
+);
+const someVisibleSelected = $derived(
+  selection === "multiple" && actualVisibleRows.length > 0 && actualVisibleRows.some(({ row, absIdx }) => isRowSelected(row, absIdx)) && !allVisibleSelected
+);
+function toggleSelectAll() {
+  if (!selection || selection !== "multiple") return;
+  let next;
+  if (allVisibleSelected) {
+    const visibleKeys = new Set(
+      actualVisibleRows.map(({ row, absIdx }) => getRowKey(row, rowKey, absIdx))
+    );
+    next = selectedRows.filter((r, i) => !visibleKeys.has(getRowKey(r, rowKey, i)));
+  } else {
+    const existing = new Set(selectedRows.map((r, i) => getRowKey(r, rowKey, i)));
+    const toAdd = actualVisibleRows.filter(({ row, absIdx }) => !existing.has(getRowKey(row, rowKey, absIdx))).map(({ row }) => row);
+    next = [...selectedRows, ...toAdd];
+  }
+  selectedRows = next;
+  onSelectionChange?.(next);
+}
+function isRowExpanded(key) {
+  return expandedRows.includes(key);
+}
+let resizing = $state(null);
+const resizeThrottle = useThrottle({ delay: 16 });
+function onResizeStart(e, col) {
+  e.preventDefault();
+  const currentWidth = columnSizing[col.key] ?? col.width ?? 150;
+  resizing = { key: col.key, startX: e.clientX, startWidth: currentWidth };
+  const onMove = (ev) => {
+    if (!resizing) return;
+    const { key, startX, startWidth } = resizing;
+    const diff = ev.clientX - startX;
+    const min = col.minWidth ?? 50;
+    const max = col.maxWidth ?? Infinity;
+    const newWidth = Math.max(min, Math.min(max, startWidth + diff));
+    resizeThrottle.run(() => {
+      columnSizing = { ...columnSizing, [key]: newWidth };
+      onColumnSizingChange?.(columnSizing);
+    });
+  };
+  const onUp = () => {
+    resizing = null;
+    document.removeEventListener("mousemove", onMove);
+    document.removeEventListener("mouseup", onUp);
+  };
+  document.addEventListener("mousemove", onMove);
+  document.addEventListener("mouseup", onUp);
+}
+const isSelectable = $derived(!!onRowClick || !!selection || !!onRowHover || !!onRowContextmenu);
+function handleRowClick(e, row, index) {
+  const target = e.target;
+  if (target.closest('button, a, input, select, textarea, [role="checkbox"]')) return;
+  if (selection) toggleRowSelect(row, index);
+  onRowClick?.(row, index, e);
+}
+function handleRowKeyDown(e, row, index) {
+  if (!onRowClick && !selection) return;
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    if (selection) toggleRowSelect(row, index);
+    onRowClick?.(row, index, e);
+  }
+}
+function handleRowPointerEnter(e, row, index) {
+  onRowHover?.(row, index, e);
+}
+function handleRowPointerLeave(e, row, index) {
+  onRowHover?.(null, index, e);
+}
+function handleRowContextmenu(e, row, index) {
+  onRowContextmenu?.(row, index, e);
+}
+const pinOffsets = $derived(computePinOffsets(visibleColumns, columnSizing, columnPinning));
+function getPinStyle(key) {
+  const pin = pinOffsets.get(key);
+  if (!pin) return "";
+  return `${pin.side}: ${pin.offset}px`;
+}
+function isPinned(key) {
+  return pinOffsets.has(key);
+}
+function getColWidth(col) {
+  const w = columnSizing[col.key] ?? col.width;
+  return w ? `${w}px` : void 0;
+}
+function getAlignClass(align) {
+  if (align === "center") return "text-center";
+  if (align === "right") return "text-right";
+  return "";
+}
+const variantSlots = $derived(
+  tableVariants({
+    hoverable: hoverable || void 0,
+    striped: striped || void 0,
+    sticky: sticky || void 0,
+    loading: loading || void 0,
+    loadingColor,
+    loadingAnimation
+  })
+);
+const pinnedVariantSlots = $derived(
+  tableVariants({ pinned: true })
+);
+const classes = $derived({
+  root: variantSlots.root({ class: [config.slots.root, className, ui?.root] }),
+  base: variantSlots.base({ class: [config.slots.base, ui?.base] }),
+  caption: variantSlots.caption({ class: [config.slots.caption, ui?.caption] }),
+  thead: variantSlots.thead({ class: [config.slots.thead, ui?.thead] }),
+  tbody: variantSlots.tbody({ class: [config.slots.tbody, ui?.tbody] }),
+  tfoot: variantSlots.tfoot({ class: [config.slots.tfoot, ui?.tfoot] }),
+  tr: variantSlots.tr({ class: [config.slots.tr, ui?.tr] }),
+  th: variantSlots.th({ class: [config.slots.th, ui?.th] }),
+  thPinned: pinnedVariantSlots.th({ class: [config.slots.th, ui?.th] }),
+  td: variantSlots.td({ class: [config.slots.td, ui?.td] }),
+  tdPinned: pinnedVariantSlots.td({ class: [config.slots.td, ui?.td] }),
+  separator: variantSlots.separator({ class: [config.slots.separator, ui?.separator] }),
+  empty: variantSlots.empty({ class: [config.slots.empty, ui?.empty] }),
+  loading: variantSlots.loading({ class: [config.slots.loading, ui?.loading] })
+});
+function thClass(key) {
+  return isPinned(key) ? classes.thPinned : classes.th;
+}
+function tdClass(key) {
+  return isPinned(key) ? classes.tdPinned : classes.td;
+}
+</script>
+
+{#snippet tableRow(row: T, absIdx: number, rowKeyVal: string | number, rowPinned: boolean)}
+    {@const selected = isRowSelected(row, absIdx)}
+    {@const expanded = isRowExpanded(rowKeyVal)}
+    <tr
+        class={classes.tr}
+        data-selected={selected || undefined}
+        data-selectable={isSelectable || undefined}
+        data-expanded={expanded || undefined}
+        data-pinned-row={rowPinned || undefined}
+        aria-selected={selection ? selected : undefined}
+        tabindex={onRowClick || selection ? 0 : undefined}
+        onclick={isSelectable ? (e) => handleRowClick(e, row, absIdx) : undefined}
+        onkeydown={onRowClick || selection ? (e) => handleRowKeyDown(e, row, absIdx) : undefined}
+        onpointerenter={onRowHover ? (e) => handleRowPointerEnter(e, row, absIdx) : undefined}
+        onpointerleave={onRowHover ? (e) => handleRowPointerLeave(e, row, absIdx) : undefined}
+        oncontextmenu={onRowContextmenu ? (e) => handleRowContextmenu(e, row, absIdx) : undefined}
+    >
+        {#if selection === 'multiple'}
+            <td class={classes.td} style="width: 48px">
+                <Checkbox
+                    checked={selected}
+                    onCheckedChange={() => toggleRowSelect(row, absIdx)}
+                    size="sm"
+                    aria-label="Select row {absIdx + 1}"
+                />
+            </td>
+        {/if}
+
+        {#each visibleColumns as col, colIdx (col.key)}
+            <td
+                class="{tdClass(col.key)} {getAlignClass(col.align)} {col.cellClass ?? ''}"
+                data-pinned={isPinned(col.key) || undefined}
+                style={getPinStyle(col.key)}
+                colspan={col.cellColspan}
+                rowspan={col.cellRowspan}
+            >
+                {#if col.cell}
+                    {@render col.cell({
+                        row,
+                        column: col,
+                        rowIndex: absIdx,
+                        columnIndex: colIdx,
+                        value: row[col.key]
+                    })}
+                {:else if cellSlot}
+                    {@render cellSlot({
+                        row,
+                        column: col,
+                        rowIndex: absIdx,
+                        columnIndex: colIdx,
+                        value: row[col.key]
+                    })}
+                {:else}
+                    {formatCellValue(row[col.key])}
+                {/if}
+            </td>
+        {/each}
+    </tr>
+
+    {#if expanded && expandedSlot}
+        <tr class={classes.tr}>
+            <td class={classes.td} colspan={totalColspan}>
+                {@render expandedSlot({ row, rowIndex: absIdx })}
+            </td>
+        </tr>
+    {/if}
+{/snippet}
+
+<svelte:element
+    this={as}
+    bind:this={ref}
+    class={classes.root}
+    role="region"
+    aria-label={caption ?? 'Data table'}
+    {...restProps}
+>
+    <table class={classes.base}>
+        {#if captionSlot}
+            <caption class={classes.caption}>
+                {@render captionSlot()}
+            </caption>
+        {:else if caption}
+            <caption class={classes.caption}>{caption}</caption>
+        {/if}
+
+        {#if visibleColumns.length > 0}
+            <colgroup>
+                {#if selection === 'multiple'}
+                    <col style="width: 48px" />
+                {/if}
+                {#each visibleColumns as col (col.key)}
+                    <col style:width={getColWidth(col)} />
+                {/each}
+            </colgroup>
+        {/if}
+
+        <!-- THEAD -->
+        <thead class={classes.thead}>
+            <tr class={classes.tr}>
+                {#if selection === 'multiple'}
+                    <th
+                        class={classes.th}
+                        scope="col"
+                        style="width: 48px"
+                        aria-label="Select all rows"
+                    >
+                        <Checkbox
+                            checked={allVisibleSelected}
+                            indeterminate={someVisibleSelected}
+                            onCheckedChange={toggleSelectAll}
+                            size="sm"
+                        />
+                    </th>
+                {/if}
+
+                {#each visibleColumns as col, colIdx (col.key)}
+                    {@const sortDir = getSortDirection(col.key)}
+                    {@const sortable = col.sortable === true}
+                    <th
+                        class="{thClass(col.key)} {getAlignClass(col.align)} {col.headerClass ??
+                            ''}"
+                        scope="col"
+                        data-pinned={isPinned(col.key) || undefined}
+                        style="{getPinStyle(col.key)}{getColWidth(col)
+                            ? `; width: ${getColWidth(col)}`
+                            : ''}"
+                        aria-sort={sortDir === 'asc'
+                            ? 'ascending'
+                            : sortDir === 'desc'
+                              ? 'descending'
+                              : undefined}
+                        colspan={col.colspan}
+                        rowspan={col.rowspan}
+                    >
+                        {#if col.header}
+                            {@render col.header({
+                                column: col,
+                                columnIndex: colIdx,
+                                sortDirection: sortDir,
+                                toggleSort: () => toggleSort(col.key)
+                            })}
+                        {:else if headerSlot}
+                            {@render headerSlot({
+                                column: col,
+                                columnIndex: colIdx,
+                                sortDirection: sortDir,
+                                toggleSort: () => toggleSort(col.key)
+                            })}
+                        {:else if sortable}
+                            <Button
+                                variant="ghost"
+                                color="surface"
+                                size="xs"
+                                label={col.label ?? col.key}
+                                trailingIcon={sortDir === 'asc'
+                                    ? icons.sortAsc
+                                    : sortDir === 'desc'
+                                      ? icons.sortDesc
+                                      : icons.sortDefault}
+                                onclick={(e) => toggleSort(col.key, e)}
+                                aria-label="Sort by {col.label ?? col.key}"
+                                class="-ms-2 font-semibold tracking-wider uppercase {sortDir
+                                    ? ''
+                                    : '*:last:opacity-30'}"
+                            />
+                        {:else}
+                            {col.label ?? col.key}
+                        {/if}
+
+                        {#if col.resizable}
+                            <!-- svelte-ignore a11y_no_static_element_interactions -->
+                            <span
+                                class="group/resize absolute top-0 -right-px flex h-full w-4 cursor-col-resize touch-none items-center justify-center select-none"
+                                onmousedown={(e) => onResizeStart(e, col)}
+                            >
+                                <span
+                                    class="h-4 w-0.5 rounded-full bg-outline-variant/50 transition-all group-hover/resize:h-5 group-hover/resize:bg-primary group-active/resize:bg-primary"
+                                ></span>
+                            </span>
+                        {/if}
+                    </th>
+                {/each}
+            </tr>
+        </thead>
+
+        <!-- TBODY -->
+        <tbody class={classes.tbody}>
+            {#if bodyTopSlot}
+                {@render bodyTopSlot()}
+            {/if}
+
+            {#if hasVisibleRows}
+                <!-- Pinned rows at top -->
+                {#each pinnedData as row, rowIdx (getRowKey(row, rowKey, rowIdx))}
+                    {@const rowKeyVal = getRowKey(row, rowKey, rowIdx)}
+                    {@render tableRow(row, rowIdx, rowKeyVal, true)}
+                {/each}
+
+                <!-- Separator between pinned and unpinned -->
+                {#if pinnedData.length > 0 && unpinnedPaginatedData.length > 0}
+                    <tr><td colspan={totalColspan} class="h-0.5 bg-primary/20 p-0"></td></tr>
+                {/if}
+
+                <!-- Regular rows -->
+                {#each unpinnedPaginatedData as row, rowIdx (getRowKey(row, rowKey, page * pageSize + rowIdx))}
+                    {@const absIdx = manualPagination ? rowIdx : page * pageSize + rowIdx}
+                    {@const rowKeyVal = getRowKey(row, rowKey, absIdx)}
+                    {@render tableRow(row, absIdx, rowKeyVal, false)}
+                {/each}
+            {:else if loading && loadingSlot}
+                <tr>
+                    <td colspan={totalColspan} class={classes.loading}>
+                        {@render loadingSlot()}
+                    </td>
+                </tr>
+            {:else}
+                <tr>
+                    <td colspan={totalColspan} class={classes.empty}>
+                        {#if emptySlot}
+                            {@render emptySlot()}
+                        {:else}
+                            {empty}
+                        {/if}
+                    </td>
+                </tr>
+            {/if}
+
+            {#if bodyBottomSlot}
+                {@render bodyBottomSlot()}
+            {/if}
+        </tbody>
+
+        <!-- TFOOT -->
+        {#if hasFooter}
+            <tfoot class={classes.tfoot}>
+                <tr class={classes.tr}>
+                    {#if selection === 'multiple'}
+                        <th class={classes.th}></th>
+                    {/if}
+
+                    {#each visibleColumns as col, colIdx (col.key)}
+                        <th
+                            class="{thClass(col.key)} {getAlignClass(col.align)}"
+                            data-pinned={isPinned(col.key) || undefined}
+                            style={getPinStyle(col.key)}
+                        >
+                            {#if col.footer}
+                                {@render col.footer({
+                                    column: col,
+                                    columnIndex: colIdx,
+                                    rows: sortedData
+                                })}
+                            {/if}
+                        </th>
+                    {/each}
+                </tr>
+            </tfoot>
+        {/if}
+    </table>
+
+    {#if loading && hasVisibleRows}
+        <div
+            class="absolute inset-0 z-20 flex items-center justify-center rounded-xl bg-surface/60 backdrop-blur-[1px] transition-opacity duration-200"
+            role="status"
+            aria-label="Loading"
+        >
+            {#if loadingSlot}
+                {@render loadingSlot()}
+            {:else}
+                <Icon name={icons.loading} class="size-6 animate-spin text-primary" />
+            {/if}
+        </div>
+    {/if}
+</svelte:element>

package/dist/{Table → components/Table}/table.utils.d.ts

@@ -35,17 +35,20 @@ export declare function resolveVisibleColumns<T extends Record<string, any>>(col
     left?: string[];
     right?: string[];
 }): TableColumn<T>[];
+type PinOffset = {
+    side: 'left' | 'right';
+    offset: number;
+};
+type PinOffsets = Map<string, PinOffset>;
 /**
  * Compute cumulative left/right offsets for pinned columns.
  */
 export declare function computePinOffsets<T extends Record<string, any>>(columns: TableColumn<T>[], columnSizing: Record<string, number>, columnPinning?: {
     left?: string[];
     right?: string[];
-}): Map<string, {
-    side: 'left' | 'right';
-    offset: number;
-}>;
+}): PinOffsets;
 /**
  * Format cell value for display — handles null/undefined/empty string.
  */
 export declare function formatCellValue(value: unknown): string;
+export {};