@urbicon-ui/table 6.1.4

package/dist/core/TableHead.svelte

@@ -0,0 +1,314 @@
+<script lang="ts">
+  import {
+    resolveIcon,
+    Checkbox,
+    createDraggable,
+    findDropTarget,
+    ChevronDownIcon as ChevronDownIconDefault,
+    ChevronUpIcon as ChevronUpIconDefault
+  } from '@urbicon-ui/blocks';
+  import { getTableContext } from '../stores/TableStore.svelte';
+  import { resolveColumnId } from '../utils';
+
+  const ChevronDownIcon = resolveIcon('chevronDown', ChevronDownIconDefault);
+  const ChevronUpIcon = resolveIcon('chevronUp', ChevronUpIconDefault);
+  import HeaderMenu from '../features/HeaderMenu.svelte';
+  import { useTableI18n } from '../i18n';
+  import { tableHeaderVariants, headerIndicatorVariants } from '../variants';
+  import { TABLE_INDICATORS, TABLE_RESPONSIVE } from '../variants/table.system';
+  import { getTableStyleConfig, resolveSlotClass } from './table-style-context';
+  import { getStickyContext } from './sticky-context.svelte';
+  import { measureToCssVar } from '../utils/sticky-measure';
+
+  const tt = useTableI18n();
+
+  let { expandable = false, enableColumnReorder = false, size = 'md' as const } = $props();
+
+  const tableContext = getTableContext();
+  const { state: tableState, handleSort, toggleAllGroups } = tableContext;
+  const styleConfig = getTableStyleConfig();
+  const stickyContext = getStickyContext();
+
+  let selectable = $derived(tableState.selectionMode !== 'none');
+  let multiSelect = $derived(tableState.selectionMode === 'multi');
+
+  // Column reorder state
+  let dragFromIndex = $state<number | null>(null);
+  let dropIndicatorIndex = $state<number | null>(null);
+
+  // Use orderedColumns when column reorder is enabled
+  const displayColumns = $derived(
+    enableColumnReorder ? tableContext.orderedColumns : tableState.columns
+  );
+
+  function makeDraggable(colIndex: number) {
+    if (!enableColumnReorder) {
+      // No-op attachment when reorder is disabled.
+      return () => {};
+    }
+
+    return createDraggable({
+      axis: 'horizontal',
+      threshold: 8,
+      cursor: 'grabbing',
+      disabled: !enableColumnReorder,
+      onDragStart: ({ element }) => {
+        dragFromIndex = colIndex;
+        element.style.opacity = '0.5';
+      },
+      onDragMove: ({ clientX, clientY }) => {
+        const target = findDropTarget(clientX, clientY, 'reorderCol');
+        if (target) {
+          dropIndicatorIndex = Number(target.dataset.reorderCol);
+        }
+      },
+      onDragEnd: ({ element, didDrag }) => {
+        element.style.opacity = '';
+        if (
+          didDrag &&
+          dragFromIndex !== null &&
+          dropIndicatorIndex !== null &&
+          dragFromIndex !== dropIndicatorIndex
+        ) {
+          tableContext.reorderColumn(dragFromIndex, dropIndicatorIndex);
+        }
+        dragFromIndex = null;
+        dropIndicatorIndex = null;
+      }
+    });
+  }
+
+  function handleHeaderKeyDown(e: KeyboardEvent, colIndex: number) {
+    if (!enableColumnReorder) return;
+    if (!e.shiftKey) return;
+
+    if (e.key === 'ArrowLeft' && colIndex > 0) {
+      e.preventDefault();
+      tableContext.reorderColumn(colIndex, colIndex - 1);
+    } else if (e.key === 'ArrowRight' && colIndex < displayColumns.length - 1) {
+      e.preventDefault();
+      tableContext.reorderColumn(colIndex, colIndex + 1);
+    }
+  }
+
+  function hasActiveFilter(columnKey: string): boolean {
+    return tableState.activeFilters.some((filter) => filter.column === columnKey);
+  }
+
+  function isGroupedColumn(columnKey: string): boolean {
+    return tableState.groupByKey === columnKey;
+  }
+
+  function hasSummary(columnKey: string): boolean {
+    return tableState.summaryConfigs.some((config) => config.column === columnKey);
+  }
+
+  function getSummaryTypes(columnKey: string): string[] {
+    return tableState.summaryConfigs
+      .filter((config) => config.column === columnKey)
+      .map((config) => {
+        switch (config.type) {
+          case 'sum':
+            return '∑';
+          case 'avg':
+            return '⌀';
+          case 'count':
+            return '#';
+          case 'min':
+            return '↓';
+          case 'max':
+            return '↑';
+          default:
+            return '?';
+        }
+      });
+  }
+
+  function getActionIndicators(columnKey: string) {
+    const indicators: Array<{ type: 'filter' | 'group' | 'summary' }> = [];
+    if (hasActiveFilter(columnKey)) indicators.push({ type: 'filter' });
+    if (isGroupedColumn(columnKey)) indicators.push({ type: 'group' });
+    if (hasSummary(columnKey)) indicators.push({ type: 'summary' });
+    return indicators;
+  }
+
+  const INDICATOR_BG: Record<string, string> = {
+    filter: TABLE_INDICATORS.dot.intent.filter,
+    group: TABLE_INDICATORS.dot.intent.group,
+    summary: TABLE_INDICATORS.dot.intent.summary
+  };
+
+  const headerStyles = $derived(tableHeaderVariants({ size, sticky: stickyContext.mode.header }));
+</script>
+
+<thead
+  class={resolveSlotClass(
+    headerStyles.header(),
+    styleConfig.slotClasses.thead,
+    styleConfig.unstyled
+  )}
+  {@attach stickyContext.mode.header ? measureToCssVar('--blocks-table-thead-h') : () => {}}
+>
+  <tr
+    class={resolveSlotClass(
+      headerStyles.row(),
+      styleConfig.slotClasses.headerRow,
+      styleConfig.unstyled
+    )}
+  >
+    {#if tableState.groupByKey}
+      <th class="{headerStyles.cell()} w-10 text-center">
+        <button
+          onclick={() => toggleAllGroups()}
+          class="text-text-secondary hover:text-text-primary hover:bg-surface-hover rounded-modify flex h-6 w-6 items-center justify-center transition-colors"
+          aria-label={tableState.allGroupsExpanded
+            ? tt('header.collapseAllGroups')
+            : tt('header.expandAllGroups')}
+          data-testid="toggle-all-groups"
+        >
+          {#if tableState.allGroupsExpanded}
+            <ChevronUpIcon class="h-4 w-4" />
+          {:else}
+            <ChevronDownIcon class="h-4 w-4" />
+          {/if}
+        </button>
+      </th>
+    {/if}
+
+    {#if selectable}
+      <th class="{headerStyles.cell()} w-12 text-center" data-testid="selection-header">
+        {#if multiSelect}
+          <Checkbox
+            checked={tableContext.allSelected}
+            indeterminate={tableContext.someSelected}
+            onchange={() => tableContext.toggleAll()}
+            aria-label={tableContext.allSelected
+              ? tt('selection.deselectAllRows')
+              : tt('selection.selectAllRows')}
+            size="sm"
+          />
+        {/if}
+      </th>
+    {/if}
+
+    {#if expandable}
+      <th class="{headerStyles.cell()} w-10 text-center" aria-hidden="true"></th>
+    {/if}
+
+    {#each displayColumns as column, colIdx (resolveColumnId(column))}
+      {@const columnId = resolveColumnId(column)}
+      {@const hasFilter = hasActiveFilter(columnId)}
+      {@const isGrouped = isGroupedColumn(columnId)}
+      {@const columnHasSummary = hasSummary(columnId)}
+      {@const summaryTypes = getSummaryTypes(columnId)}
+      {@const actionIndicators = getActionIndicators(columnId)}
+      {@const isActiveSorted = tableState.sortColumn === columnId}
+      {@const sortedState = isActiveSorted ? tableState.sortDirection : 'none'}
+      {@const isSortable =
+        column.accessor !== undefined && (column.sortable === undefined || column.sortable)}
+      {@const columnStyles = tableHeaderVariants({
+        size,
+        sortable: isSortable,
+        sorted: sortedState
+      })}
+      {@const isDragOver =
+        dropIndicatorIndex === colIdx && dragFromIndex !== null && dragFromIndex !== colIdx}
+
+      <th
+        {@attach makeDraggable(colIdx)}
+        style={column.width
+          ? `width: ${column.width}; min-width: ${column.minWidth || '4rem'};`
+          : ''}
+        class="{columnStyles.cell()} whitespace-nowrap {column.flex
+          ? 'flex-col'
+          : ''} {column.priority
+          ? (TABLE_RESPONSIVE.priority[column.priority as keyof typeof TABLE_RESPONSIVE.priority] ??
+            '')
+          : ''} {enableColumnReorder ? 'cursor-grab' : ''} {isDragOver
+          ? 'outline-primary outline outline-2 outline-offset-[-2px]'
+          : ''}"
+        aria-sort={isActiveSorted
+          ? tableState.sortDirection === 'asc'
+            ? 'ascending'
+            : 'descending'
+          : 'none'}
+        onkeydown={(e) => handleHeaderKeyDown(e, colIdx)}
+        data-reorder-col={colIdx}
+        data-testid={`column-header-${columnId}`}
+      >
+        <div class={columnStyles.cellContent()}>
+          <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+          <div
+            class="{columnStyles.titleContainer()} {isSortable ? 'cursor-pointer' : ''}"
+            onclick={() => isSortable && handleSort(columnId)}
+            role={isSortable ? 'button' : undefined}
+            tabindex={isSortable ? 0 : undefined}
+            onkeydown={(e) => {
+              if (isSortable && (e.key === 'Enter' || e.key === ' ')) {
+                e.preventDefault();
+                handleSort(columnId);
+              }
+            }}
+          >
+            <div class={columnStyles.titleContent()}>
+              <span class={columnStyles.title()}>{column.title}</span>
+
+              <div class={columnStyles.indicators()}>
+                {#if hasFilter}
+                  <div
+                    class={headerIndicatorVariants({ type: 'filter', state: 'default' })}
+                    title={tt('header.activeFilter')}
+                    data-testid={`filter-indicator-${columnId}`}
+                  ></div>
+                {/if}
+
+                {#if isGrouped}
+                  <div
+                    class={headerIndicatorVariants({ type: 'group', state: 'default' })}
+                    title={tt('header.groupedColumn')}
+                    data-testid={`group-indicator-${columnId}`}
+                  ></div>
+                {/if}
+
+                {#if columnHasSummary}
+                  <div
+                    class={headerIndicatorVariants({ type: 'summary', state: 'default' })}
+                    title={tt('header.summarizedColumn') + ': ' + summaryTypes.join(', ')}
+                    data-testid={`summary-indicator-${columnId}`}
+                  ></div>
+                {/if}
+              </div>
+            </div>
+
+            {#if isActiveSorted}
+              <span class={columnStyles.sortIcon()} aria-hidden="true">
+                {#if tableState.sortDirection === 'asc'}
+                  <ChevronUpIcon class="h-4 w-4" />
+                {:else}
+                  <ChevronDownIcon class="h-4 w-4" />
+                {/if}
+              </span>
+            {/if}
+          </div>
+
+          <HeaderMenu {column} isActive={isActiveSorted || isGrouped || columnHasSummary} />
+        </div>
+
+        {#if actionIndicators.length > 0}
+          <div
+            class={columnStyles.actionIndicators()}
+            data-testid={`action-indicators-${columnId}`}
+          >
+            {#each actionIndicators as indicator (indicator.type)}
+              <div
+                class="{columnStyles.actionIndicatorBar()} {INDICATOR_BG[indicator.type]}"
+                title={tt('header.activeIndicator', { type: indicator.type })}
+                data-action={indicator.type}
+              ></div>
+            {/each}
+          </div>
+        {/if}
+      </th>
+    {/each}
+  </tr>
+</thead>

package/dist/core/TableHead.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const TableHead: import("svelte").Component<{
+    expandable?: boolean;
+    enableColumnReorder?: boolean;
+    size?: const;
+}, {}, "">;
+type TableHead = ReturnType<typeof TableHead>;
+export default TableHead;

package/dist/core/TableMobile.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { getTableContext } from '../stores/TableStore.svelte';
+  import { useTableI18n } from '../i18n';
+  import MobileCard from './MobileCard.svelte';
+  import { resolveColumnId } from '../utils';
+  import type { Column, TableItem } from '../types/tableTypes';
+  import type { Snippet } from 'svelte';
+
+  const tt = useTableI18n();
+
+  let {
+    size = 'md' as 'sm' | 'md' | 'lg',
+    expandable = false,
+    expandedRowContent = undefined as Snippet<[item: TableItem]> | undefined,
+    cell = undefined as Snippet<[item: TableItem, value: unknown, column: Column]> | undefined,
+    empty = undefined as Snippet | undefined,
+    noDataText = '',
+    onRowClick = undefined as ((item: TableItem) => void) | undefined
+  } = $props();
+
+  const tableContext = getTableContext();
+  const { state: tableState, groupedSummaryData } = tableContext;
+  const filteredItems = $derived(tableContext.filteredItems);
+  const paginatedItems = $derived(tableContext.paginatedItems);
+  const grouped = $derived(tableContext.grouped);
+</script>
+
+<div class="mobile-only md:hidden" data-testid="mobile-table">
+  {#if filteredItems.length === 0}
+    {#if empty}
+      {@render empty()}
+    {:else}
+      <div class="text-text-secondary py-6 text-center text-sm" data-testid="empty-state-mobile">
+        {noDataText}
+      </div>
+    {/if}
+  {:else if tableState.groupByKey}
+    {#each Object.entries(grouped) as [groupName, groupItems] (groupName)}
+      <div class="mb-6">
+        <h3
+          class="text-text-primary border-border-subtle mb-3 flex min-h-11 items-center border-b pb-2 text-base font-semibold"
+        >
+          {groupName}
+          <span class="text-text-tertiary ml-1.5 text-sm font-normal">
+            ({groupItems.length}
+            {groupItems.length === 1 ? tt('group.item') : tt('group.items')})
+          </span>
+        </h3>
+        {#each groupItems as item, i (item.id ?? i)}
+          <MobileCard {item} {expandable} {expandedRowContent} {cell} {size} onClick={onRowClick} />
+        {/each}
+
+        {#if tableState.showSummary && tableState.summaryConfigs.length > 0}
+          <div class="bg-surface-elevated border-border-subtle rounded-contain mt-3 border p-4">
+            <h4 class="text-text-primary mb-2 text-sm font-semibold">
+              {tt('group.summaryFor')}
+              {groupName}:
+            </h4>
+            <div class="space-y-1.5 text-sm">
+              {#each tableState.summaryConfigs as config (config.column)}
+                {#if groupedSummaryData[groupName] && groupedSummaryData[groupName][config.column] !== undefined}
+                  <div class="flex min-h-8 items-center justify-between">
+                    <span class="text-text-secondary">
+                      {tableState.columns.find((c) => resolveColumnId(c) === config.column)
+                        ?.title || config.column}:
+                    </span>
+                    <span class="text-text-primary font-medium">
+                      {tableContext.getFormattedSummaryValue(
+                        config.column,
+                        groupedSummaryData[groupName][config.column]
+                      )}
+                    </span>
+                  </div>
+                {/if}
+              {/each}
+            </div>
+          </div>
+        {/if}
+      </div>
+    {/each}
+  {:else}
+    {#each Array.isArray(paginatedItems) ? paginatedItems : [] as item, i (item.id ?? i)}
+      <MobileCard {item} {expandable} {expandedRowContent} {cell} {size} onClick={onRowClick} />
+    {/each}
+
+    {#if tableState.showSummary && tableState.summaryConfigs.length > 0}
+      <div class="bg-surface-elevated border-border-subtle rounded-contain mt-4 border p-4">
+        <h4 class="text-text-primary mb-2 text-sm font-semibold">
+          {tt('table.summary.totalSummary')}
+        </h4>
+        <div class="space-y-1.5 text-sm">
+          {#each tableState.summaryConfigs as config (config.column)}
+            {#if tableContext.summaryData[config.column] !== undefined}
+              <div class="flex min-h-8 items-center justify-between">
+                <span class="text-text-secondary">
+                  {tableState.columns.find((c) => resolveColumnId(c) === config.column)?.title ||
+                    config.column}:
+                </span>
+                <span class="text-text-primary font-medium">
+                  {tableContext.getFormattedSummaryValue(
+                    config.column,
+                    tableContext.summaryData[config.column]
+                  )}
+                </span>
+              </div>
+            {/if}
+          {/each}
+        </div>
+      </div>
+    {/if}
+  {/if}
+</div>

package/dist/core/TableMobile.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Column, TableItem } from '../types/tableTypes';
+import type { Snippet } from 'svelte';
+declare const TableMobile: import("svelte").Component<{
+    size?: "sm" | "md" | "lg";
+    expandable?: boolean;
+    expandedRowContent?: Snippet<[item: TableItem]> | undefined;
+    cell?: Snippet<[item: TableItem, value: unknown, column: Column]> | undefined;
+    empty?: Snippet | undefined;
+    noDataText?: string;
+    onRowClick?: ((item: TableItem) => void) | undefined;
+}, {}, "">;
+type TableMobile = ReturnType<typeof TableMobile>;
+export default TableMobile;