@urbicon-ui/table 6.1.4

package/dist/core/MobileCard.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+  import { resolveIcon, ChevronDownIcon as ChevronDownIconDefault } from '@urbicon-ui/blocks';
+  import { getTableContext } from '../stores/TableStore.svelte.js';
+
+  const ChevronDownIcon = resolveIcon('chevronDown', ChevronDownIconDefault);
+  import { formatCellValue, resolveColumnId, resolveColumnValue } from '../utils';
+  import type { Column, TableItem } from '../types/tableTypes';
+  import { mobileCardVariants } from '../variants';
+  import { getTableStyleConfig, resolveSlotClass } from './table-style-context';
+  import type { Snippet } from 'svelte';
+
+  export type MobileCardProps = {
+    item: TableItem;
+    expandable?: boolean;
+    expandedRowContent?: Snippet<[item: TableItem]>;
+    cell?: Snippet<[item: TableItem, value: unknown, column: Column]>;
+    onClick?: (item: TableItem) => void;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    testId?: string;
+  };
+
+  let {
+    item,
+    expandable = false,
+    expandedRowContent = undefined,
+    cell = undefined,
+    onClick = undefined,
+    size = 'md',
+    class: className = '',
+    testId = undefined
+  }: MobileCardProps = $props();
+
+  const tableContext = getTableContext();
+  const { state: tableState, toggleExpand, isItemExpanded: checkExpanded } = tableContext;
+  const styleConfig = getTableStyleConfig();
+
+  const itemId = $derived.by((): string | number => {
+    const candidate = item.id ?? item.__index;
+    return typeof candidate === 'string' || typeof candidate === 'number' ? candidate : -1;
+  });
+  let isExpanded = $derived(checkExpanded(itemId));
+
+  const computedTestId = $derived.by(() => {
+    if (testId) return testId;
+    return `mobile-card-${itemId}`;
+  });
+
+  function handleClick() {
+    if (onClick) {
+      onClick(item);
+    } else if (expandable) {
+      toggleExpand(itemId);
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleClick();
+    }
+  }
+
+  function getComponentProps(column: Column, row: TableItem) {
+    const baseProps = column.componentProps ? column.componentProps(row) : {};
+    return { ...baseProps, item: row };
+  }
+
+  const primaryColumns = $derived(
+    tableState.columns.filter((col) => col.priority === 1 || !col.priority)
+  );
+
+  const secondaryColumns = $derived(tableState.columns.filter((col) => col.priority === 2));
+
+  const cardStyles = $derived(
+    mobileCardVariants({
+      size,
+      interactive: !!(expandable || onClick),
+      expanded: isExpanded
+    })
+  );
+</script>
+
+{#snippet renderCellContent(column: Column)}
+  {@const cellValue = resolveColumnValue(column, item)}
+  {#if cell}
+    {@render cell(item, cellValue, column)}
+  {:else if column.cell}
+    {@render column.cell(item, cellValue)}
+  {:else if column.component}
+    {@const CellComponent = column.component}
+    <CellComponent {...getComponentProps(column, item)} />
+  {:else if cellValue !== undefined}
+    <span class={cardStyles.value()}>
+      {formatCellValue(item, column)}
+    </span>
+  {/if}
+{/snippet}
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class={resolveSlotClass(
+    cardStyles.card(),
+    styleConfig.slotClasses.mobileCard,
+    styleConfig.unstyled,
+    className
+  )}
+  data-testid={computedTestId}
+  role={expandable || onClick ? 'button' : undefined}
+  tabindex={expandable || onClick ? 0 : undefined}
+  onclick={handleClick}
+  onkeydown={handleKeyDown}
+>
+  <div class={cardStyles.content()}>
+    <div class={cardStyles.content()}>
+      {#each primaryColumns as column (resolveColumnId(column))}
+        <div class={cardStyles.field()}>
+          <span class={cardStyles.label()}>{column.title}</span>
+          <div class={cardStyles.value()}>
+            {@render renderCellContent(column)}
+          </div>
+        </div>
+      {/each}
+    </div>
+
+    {#if secondaryColumns.length > 0}
+      <div class={cardStyles.content()}>
+        {#each secondaryColumns as column (resolveColumnId(column))}
+          <div class={cardStyles.field()}>
+            <span class={cardStyles.label()}>{column.title}</span>
+            <div class={cardStyles.value()}>
+              {@render renderCellContent(column)}
+            </div>
+          </div>
+        {/each}
+      </div>
+    {/if}
+
+    {#if expandable}
+      <div class={cardStyles.actions()}>
+        <ChevronDownIcon class="{cardStyles.expandIcon()} h-5 w-5" />
+      </div>
+    {/if}
+  </div>
+
+  {#if isExpanded && expandedRowContent}
+    <div class={cardStyles.expandedContent()}>
+      {@render expandedRowContent(item)}
+    </div>
+  {/if}
+</div>

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

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

package/dist/core/TableCell.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { formatCellValue, resolveColumnId, resolveColumnValue } from '../utils';
+  import { customCellVariants } from '../variants';
+  import { TABLE_RESPONSIVE } from '../variants/table.system';
+  import { getTableContext } from '../stores/TableStore.svelte';
+  import SearchHighlight from '../features/SearchHighlight.svelte';
+  import type { Column, TableItem } from '../types/tableTypes';
+  import type { Snippet } from 'svelte';
+
+  const { state: tableState } = getTableContext();
+
+  export type TableCellProps = {
+    item: TableItem;
+    column: Column;
+    size?: 'sm' | 'md' | 'lg';
+    cellClass?: string;
+    testIdPrefix?: string;
+    colIndex?: number;
+    cell?: Snippet<[item: TableItem, value: unknown, column: Column]>;
+  };
+
+  let {
+    item,
+    column,
+    size = 'md',
+    cellClass = '',
+    testIdPrefix = 'cell',
+    colIndex = undefined,
+    cell = undefined
+  }: TableCellProps = $props();
+
+  function getComponentProps(col: Column, row: TableItem) {
+    const baseProps = col.componentProps ? col.componentProps(row) : {};
+    const componentSize = size === 'lg' ? 'md' : size;
+    return {
+      ...baseProps,
+      item: row,
+      size: componentSize,
+      align: col.align
+    };
+  }
+
+  const value = $derived(resolveColumnValue(column, item));
+  const titleText = $derived(value === undefined || value === null ? undefined : String(value));
+  const columnId = $derived(resolveColumnId(column));
+
+  const defaultCellStyles = $derived(
+    customCellVariants({
+      size,
+      align: 'left',
+      interactive: false
+    })
+  );
+
+  const itemId = $derived(item.id ?? item.__index);
+</script>
+
+<td
+  class="{cellClass} {column.flex ? 'flex-col' : ''} {column.priority
+    ? (TABLE_RESPONSIVE.priority[column.priority as keyof typeof TABLE_RESPONSIVE.priority] ?? '')
+    : ''}"
+  style={column.width ? `width: ${column.width}; min-width: ${column.minWidth || '4rem'};` : ''}
+  role={colIndex !== undefined ? 'gridcell' : undefined}
+  aria-colindex={colIndex !== undefined ? colIndex + 1 : undefined}
+  title={titleText}
+  data-testid={`${testIdPrefix}-${itemId}-${columnId}`}
+>
+  {#if cell}
+    {@render cell(item, value, column)}
+  {:else if column.cell}
+    {@render column.cell(item, value)}
+  {:else if column.component}
+    {@const CellComponent = column.component}
+    <CellComponent {...getComponentProps(column, item)} />
+  {:else if value !== undefined}
+    <div
+      class="{defaultCellStyles.container()} {column.align === 'center'
+        ? 'justify-center'
+        : column.align === 'right'
+          ? 'justify-end'
+          : 'justify-start'}"
+    >
+      <div class={defaultCellStyles.content()}>
+        <span
+          class="text-text-primary block max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
+        >
+          {#if tableState.searchTerm}
+            <SearchHighlight
+              text={formatCellValue(item, column)}
+              searchTerm={tableState.searchTerm}
+            />
+          {:else}
+            {formatCellValue(item, column)}
+          {/if}
+        </span>
+      </div>
+    </div>
+  {:else}
+    <div class={defaultCellStyles.container()}>
+      <div class={defaultCellStyles.content()}>
+        <span class="text-text-tertiary">—</span>
+      </div>
+    </div>
+  {/if}
+</td>

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

@@ -0,0 +1,14 @@
+import type { Column, TableItem } from '../types/tableTypes';
+import type { Snippet } from 'svelte';
+export type TableCellProps = {
+    item: TableItem;
+    column: Column;
+    size?: 'sm' | 'md' | 'lg';
+    cellClass?: string;
+    testIdPrefix?: string;
+    colIndex?: number;
+    cell?: Snippet<[item: TableItem, value: unknown, column: Column]>;
+};
+declare const TableCell: import("svelte").Component<TableCellProps, {}, "">;
+type TableCell = ReturnType<typeof TableCell>;
+export default TableCell;