@streamscloud/kit 0.17.0 → 0.19.0

package/dist/ui/table/cmp.table.svelte

@@ -1,128 +1,47 @@
-<script lang="ts" generics="T extends {id: string}">import { Button } from '../button';
-import { DynamicComponent } from '../dynamic-component';
+<script lang="ts" generics="T extends {id: string}">import { DynamicComponent } from '../dynamic-component';
 import { EmptyState } from '../empty-state';
-import { Icon } from '../icon';
-import { IconText } from '../icon-text';
-import { PopoverItem } from '../popover';
-import { TableActionsCell, TableBadgeCell, TableButtonCell, TableByCell, TableCheckboxCell, TableHideableCell, TableIconCell, TableImageCell, TableMoveRowCell, TableCustomCell, TableSelectCell, TableTextCell, TableTextInputCell } from './table-cells';
-import { ResolvedColumn } from './table-column-models.svelte';
+import { TableCell, TableHideableCell } from './table-cells';
 import { TableLocalization } from './table-localization';
-import IconReorderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_horizontal_20_regular.svg?raw';
-import { untrack } from 'svelte';
-import { flip } from 'svelte/animate';
-import { dndzone } from 'svelte-dnd-action';
-let { model, rowsDraggable = false, showPlaceholder = false, showAlternativeView = false, on, alternativeView, placeholderRow, customNoItemsPlaceholder } = $props();
+import { createTableView, cssWidth } from './table-view.svelte';
+let { model, showPlaceholder = false, showAlternativeView = false, grouping, on, alternativeView, placeholderRow, customNoItemsPlaceholder } = $props();
 const localization = new TableLocalization();
-let showNoItemsPlaceholder = $state(false);
-let showNoItemsTimeout = 0;
-let showNoItemsPlaceholderFn = null;
-let hideNoItemsPlaceholderFn = null;
-// One-time setup: selection subscriptions + no-items placeholder logic
-$effect(() => untrack(() => {
-    const subscriptions = [
-        model.selection.subscribeOnChange((values) => on?.selectionChanged?.(values)),
-        model.selection.subscribeOnAdd((values) => on?.itemsSelected?.(values)),
-        model.selection.subscribeOnRemove((values) => on?.itemsDeselected?.(values))
-    ];
-    showNoItemsPlaceholderFn = () => {
-        showNoItemsTimeout = window.setTimeout(() => {
-            showNoItemsPlaceholder = !model.items.length;
-        }, 700);
-    };
-    hideNoItemsPlaceholderFn = () => {
-        clearTimeout(showNoItemsTimeout);
-        showNoItemsPlaceholder = false;
-    };
-    return () => {
-        subscriptions.forEach((unsubscribe) => unsubscribe());
-    };
-}));
-$effect(() => {
-    if (!model.items.length) {
-        untrack(() => showNoItemsPlaceholderFn?.());
+const view = createTableView(() => model, () => on);
+const displayRows = $derived.by(() => {
+    const items = model.items;
+    const grp = grouping;
+    if (!grp) {
+        return items.map((item, index) => ({ kind: 'item', item, index }));
     }
-    else {
-        untrack(() => hideNoItemsPlaceholderFn?.());
+    const keys = items.map((item) => grp.key(item));
+    const out = [];
+    let i = 0;
+    while (i < items.length) {
+        const key = keys[i];
+        if (key === null) {
+            out.push({ kind: 'item', item: items[i], index: i });
+            i += 1;
+            continue;
+        }
+        let j = i + 1;
+        while (j < items.length && keys[j] === key) {
+            j += 1;
+        }
+        out.push({ kind: 'group', key, label: grp.label ? grp.label(key, items[i]) : key, count: j - i });
+        for (let k = i; k < j; k += 1) {
+            out.push({ kind: 'item', item: items[k], index: k });
+        }
+        i = j;
     }
+    return out;
 });
-// region Drag and Drop
-const flipDurationMs = 200;
-let tableRef = $state.raw(null);
-const handleConsider = (e) => {
-    const { items: newItems } = e.detail;
-    model.items = newItems;
-};
-const handleFinalize = (e) => {
-    const { items: newItems } = e.detail;
-    model.items = newItems;
-    on?.itemsReordered?.(newItems);
-};
-const startDrag = (e) => {
-    // preventing default to prevent lag on touch devices (because of the browser checking for screen scrolling)
-    e.preventDefault();
-};
-const transformDraggedElement = (draggedRow) => {
-    if (!draggedRow) {
-        return;
-    }
-    const referenceRow = tableRef.querySelector('tbody tr:not([data-is-dnd-shadow-item-internal])') ?? tableRef.querySelector('tbody tr');
-    const referenceColumns = referenceRow?.querySelectorAll('td') ?? [];
-    const draggedColumns = draggedRow.querySelectorAll('td');
-    if (!referenceRow || referenceColumns.length !== draggedColumns.length) {
-        console.error('not equal count of model.columns withing table rows');
-        return;
-    }
-    for (let i = 0, length = referenceColumns.length; i < length; i++) {
-        draggedColumns[i].style.width = `${referenceColumns[i].clientWidth}px`;
-        draggedColumns[i].style.height = `${referenceColumns[i].clientHeight}px`;
-    }
-    // Clone is reparented to <body>, losing the .table-container --_table--* vars; cells collapse without this.
-    const cellStyle = window.getComputedStyle(referenceColumns[0]);
-    draggedRow.style.setProperty('--_table--cell--font-size', cellStyle.fontSize);
-    draggedRow.style.setProperty('--_table--cell--horizontal-padding', cellStyle.paddingInlineStart);
-    draggedRow.style.setProperty('--_table--border-color', cellStyle.borderBottomColor);
-};
-// endregion Drag and Drop
-const changeItemPosition = (item, positionChange) => {
-    const index = model.items.indexOf(item);
-    const newIndex = index + positionChange;
-    const newItems = [...model.items];
-    newItems.splice(index, 1);
-    newItems.splice(newIndex, 0, item);
-    model.items = newItems;
-    on?.itemsReordered?.(newItems);
-};
-const disableMoveRowCell = (def) => {
-    if (!def.disableFactory) {
-        return false;
-    }
-    return def.disableFactory();
-};
-const cssWidth = (column) => {
-    if (column.fixedCssWidth) {
-        return `width: ${column.fixedCssWidth};`;
-    }
-    return 'width: auto;';
-};
-const anyVisibleItemActions = (item) => {
-    return model.itemActions.some((action) => (action.visibilityFactory ? action.visibilityFactory(item) : true));
-};
-const getEditorColumnOrDefault = (column, editMode) => {
-    if (!editMode) {
-        return column;
-    }
-    if (column.editorColumn) {
-        return column.editorColumn;
-    }
-    return column;
-};
+const visibleColspan = $derived(model.columns.filter((column) => !column.hidden).length);
 </script>
 
 <div
   class="table-container table-container--{model.styles?.size ?? 'md'} table-container--{model.styles?.variant ?? 'plain'}"
   class:table-container--zebra={model.styles?.zebra === true}>
   {#if alternativeView && showAlternativeView}
-    {#if showPlaceholder || showNoItemsPlaceholder}
+    {#if showPlaceholder || view.showNoItemsPlaceholder}
       <div class="alternative-view__placeholder">
         {#if showPlaceholder}
           {@render placeholderRow?.()}
@@ -134,12 +53,9 @@ const getEditorColumnOrDefault = (column, editMode) => {
       {@render alternativeView()}
     {/if}
   {:else}
-    <table class="table" class:table--sticky-header={model.styles?.stickyHeader === true} bind:this={tableRef}>
+    <table class="table" class:table--sticky-header={model.styles?.stickyHeader === true}>
       <thead class="table__head">
         <tr>
-          {#if rowsDraggable && !model.editingItem}
-            <th class="table__th table__drag-handle">&nbsp;</th>
-          {/if}
           {#each model.columns as column (column)}
             <TableHideableCell column={column}>
               <th class="table__th" class:table__th--centered={column.centered} style={cssWidth(column)} title={column.title}>
@@ -149,21 +65,10 @@ const getEditorColumnOrDefault = (column, editMode) => {
           {/each}
         </tr>
       </thead>
-      <tbody
-        use:dndzone={{
-          items: model.items,
-          dragDisabled: !rowsDraggable,
-          dropFromOthersDisabled: true,
-          flipDurationMs,
-          dropTargetStyle: {},
-          transformDraggedElement,
-          type: 'table'
-        }}
-        onconsider={handleConsider}
-        onfinalize={handleFinalize}>
-        {#if showPlaceholder || showNoItemsPlaceholder}
+      <tbody>
+        {#if showPlaceholder || view.showNoItemsPlaceholder}
           <tr class="table__tr table__tr--placeholder">
-            <td colspan={model.columns.length}>
+            <td colspan={visibleColspan}>
               <div class="table__placeholder">
                 {#if showPlaceholder}
                   {@render placeholderRow?.()}
@@ -176,107 +81,45 @@ const getEditorColumnOrDefault = (column, editMode) => {
             </td>
           </tr>
         {:else}
-          {#snippet cell({ item, column, itemIndex }: { item: T; column: ResolvedColumn<T>; itemIndex: Number })}
-            {@const editMode = model.editingItem?.id === item.id}
-            {@const def = column.def}
-            {#if def.type === 'actions'}
-              {#if anyVisibleItemActions(item)}
-                {#if editMode}
-                  <div class="table__save-cancel">
-                    <Button type="button" size="sm" variant="success" on={{ click: () => on?.saveChanges?.(item) }}>{localization.save}</Button>
-                    <Button type="button" size="sm" variant="ghost" on={{ click: () => on?.cancelChanges?.() }}>{localization.cancel}</Button>
-                  </div>
-                {:else}
-                  <TableActionsCell popoverPosition={model.styles?.actionsPopoverTopDirection ? 'top' : 'bottom'}>
-                    <div class="table__actions">
-                      {#each model.itemActions as action (action)}
-                        {#if action.visibilityFactory ? action.visibilityFactory(item) : true}
-                          <PopoverItem on={{ click: () => action.action(item) }}>
-                            <IconText icon={action.icon} size="md">
-                              {action.title}
-                            </IconText>
-                          </PopoverItem>
-                        {/if}
-                      {/each}
-                    </div>
-                  </TableActionsCell>
-                {/if}
-              {/if}
-            {:else if def.type === 'badge'}
-              <TableBadgeCell column={def} item={item} />
-            {:else if def.type === 'button'}
-              <TableButtonCell column={def} item={item} />
-            {:else if def.type === 'by'}
-              <TableByCell column={def} item={item} />
-            {:else if def.type === 'checkbox'}
-              <TableCheckboxCell item={item} selection={model.selection} />
-            {:else if def.type === 'custom'}
-              <TableCustomCell column={def} item={item} />
-            {:else if def.type === 'icon'}
-              <TableIconCell column={def} item={item} />
-            {:else if def.type === 'image'}
-              <TableImageCell column={def} item={item} centered={column.centered} />
-            {:else if def.type === 'move-row'}
-              {#if !editMode}
-                <TableMoveRowCell
-                  on={{
-                    up: disableMoveRowCell(def) || itemIndex < 1 ? undefined : () => changeItemPosition(item, -1),
-                    down: disableMoveRowCell(def) || itemIndex >= model.items.length - 1 ? undefined : () => changeItemPosition(item, 1)
-                  }} />
-              {/if}
-            {:else if def.type === 'select'}
-              <TableSelectCell column={def} item={item} />
-            {:else if def.type === 'snippet'}
-              {@render def.cell(item)}
-            {:else if def.type === 'text'}
-              <TableTextCell column={def} item={item} centered={column.centered} />
-            {:else if def.type === 'text-input'}
-              <TableTextInputCell column={def} item={item}></TableTextInputCell>
+          {#each displayRows as row (row.kind === 'group' ? 'g:' + row.key : 'i:' + row.item.id)}
+            {#if row.kind === 'group'}
+              <tr>
+                <td class="table__group-header" colspan={visibleColspan}>
+                  {#if grouping?.header}
+                    {@render grouping.header({ key: row.key, label: row.label, count: row.count })}
+                  {:else}
+                    {row.label}
+                  {/if}
+                </td>
+              </tr>
             {:else}
-              <TableTextCell column={def} item={item} centered={false} />
+              {@const item = row.item}
+              {@const itemIndex = row.index}
+              {@const isSelected = model.selection.has(item.id)}
+              {@const isHighlighted = model.highlightedItemIds.includes(item.id)}
+              {@const flushBottom = model.styles?.variant === 'card' && itemIndex === model.items.length - 1}
+              {@const zebra = model.styles?.zebra === true && itemIndex % 2 === 1 && !isSelected && !isHighlighted}
+              <tr
+                class="table__tr"
+                id={item.id}
+                class:table__tr--selected={isSelected}
+                class:table__tr--highlighted={isHighlighted}
+                class:table__tr--zebra={zebra}>
+                {#each model.columns as column (column)}
+                  <TableHideableCell column={column}>
+                    <td
+                      class="table__td"
+                      class:table__td--centered={column.centered}
+                      class:table__td--clickable={!!column.onClick}
+                      class:table__td--flush={flushBottom}
+                      style={cssWidth(column)}
+                      onclick={() => column.onClick && column.onClick(item)}>
+                      <TableCell model={model} item={item} column={column} itemIndex={itemIndex} on={{ itemsReordered: on?.itemsReordered }} />
+                    </td>
+                  </TableHideableCell>
+                {/each}
+              </tr>
             {/if}
-          {/snippet}
-          {#each model.items as item, itemIndex (item)}
-            {@const editMode = model.editingItem?.id === item.id}
-            {@const isSelected = model.selection.has(item.id)}
-            {@const isHighlighted = model.highlightedItemIds.includes(item.id)}
-            {@const flushBottom = model.styles?.variant === 'card' && itemIndex === model.items.length - 1}
-            {@const zebra = model.styles?.zebra === true && itemIndex % 2 === 1 && !isSelected && !isHighlighted}
-            <tr
-              animate:flip={{ duration: flipDurationMs }}
-              class="table__tr"
-              id={item.id}
-              class:table__tr--selected={isSelected}
-              class:table__tr--highlighted={isHighlighted}
-              class:table__tr--zebra={zebra}>
-              {#if rowsDraggable && !model.editingItem}
-                <td
-                  class="table__td table__drag-handle table__drag-handle--dragging"
-                  class:table__td--flush={flushBottom}
-                  onmousedown={startDrag}
-                  ontouchstart={startDrag}>
-                  <Icon src={IconReorderDotsHorizontal} />
-                </td>
-              {/if}
-
-              {#each model.columns as column (column)}
-                <TableHideableCell column={column}>
-                  <td
-                    class="table__td"
-                    class:table__td--centered={column.centered}
-                    class:table__td--clickable={!!column.onClick && !editMode}
-                    class:table__td--flush={flushBottom}
-                    style={cssWidth(column)}
-                    onclick={() => !editMode && column.onClick && column.onClick(item)}>
-                    {@render cell({
-                      item: editMode && model.editingItem ? model.editingItem : item,
-                      column: getEditorColumnOrDefault(column, editMode),
-                      itemIndex
-                    })}
-                  </td>
-                </TableHideableCell>
-              {/each}
-            </tr>
           {/each}
         {/if}
       </tbody>
@@ -286,7 +129,9 @@ const getEditorColumnOrDefault = (column, editMode) => {
 
 <!--
 @component
-Data table component with support for sorting, selection, drag-and-drop row reordering, inline editing, column visibility management, and group actions.
+Data table with sorting, selection, column visibility management, optional consumer-driven row grouping
+(`grouping`), and group actions. For drag-and-drop row reordering use `DraggableTable` instead (this static
+variant ships no dnd code).
 
 ### TableStyles (via `model.styles`)
 | Field | Type | Effect |
@@ -312,9 +157,6 @@ Data table component with support for sorting, selection, drag-and-drop row reor
 | `--sc-kit--table--card--background` | Card variant background | `--sc-kit--color--bg--panel` |
 | `--sc-kit--table--card--border-color` | Card variant border | `--sc-kit--color--border` |
 | `--sc-kit--table--card--border-radius` | Card variant radius | `--sc-kit--radius--lg` |
-| `--sc-kit--table-actions-cell--trigger--border-color` | Actions trigger border | `--sc-kit--color--accent--soft` |
-| `--sc-kit--table-actions-cell--trigger--icon-color` | Actions trigger icon | `--sc-kit--color--accent` |
-| `--sc-kit--table-text-cell--clickable--color` | Clickable text cell color | `--sc-kit--color--accent` |
 -->
 
 <style>.alternative-view__placeholder {
@@ -327,10 +169,10 @@ Data table component with support for sorting, selection, drag-and-drop row reor
 }
 
 .table-container {
-  --_table--row--height: var(--sc-kit--table--row--height);
-  --_table--cell--font-size: var(--sc-kit--table--cell--font-size);
-  --_table--cell--horizontal-padding: var(--sc-kit--table--cell--horizontal-padding);
-  --_table--head--height: var(--sc-kit--table--head--height, var(--_table--row--height));
+  --_table--row--height: var(--sc-kit--table--row--height, var(--_table--size-row-height));
+  --_table--cell--font-size: var(--sc-kit--table--cell--font-size, var(--_table--size-cell-font-size));
+  --_table--cell--horizontal-padding: var(--sc-kit--table--cell--horizontal-padding, var(--_table--size-cell-padding));
+  --_table--head--height: var(--sc-kit--table--head--height, var(--_table--size-head-height, var(--_table--row--height)));
   --_table--head--background-color: var(--sc-kit--table--head--background-color, var(--sc-kit--color--bg--field-alt));
   --_table--head--color: var(--sc-kit--table--head--color, var(--sc-kit--color--text--secondary));
   --_table--border-color: var(--sc-kit--table--border-color, var(--sc-kit--color--border));
@@ -367,16 +209,16 @@ Data table component with support for sorting, selection, drag-and-drop row reor
   }
 }
 .table-container--md {
-  --sc-kit--table--row--height: 2.75rem;
-  --sc-kit--table--head--height: 2.5rem;
-  --sc-kit--table--cell--font-size: var(--sc-kit--font-size--md);
-  --sc-kit--table--cell--horizontal-padding: var(--sc-kit--space--4);
+  --_table--size-row-height: 2.75rem;
+  --_table--size-head-height: 2.5rem;
+  --_table--size-cell-font-size: var(--sc-kit--font-size--md);
+  --_table--size-cell-padding: var(--sc-kit--space--4);
 }
 .table-container--sm {
-  --sc-kit--table--row--height: 2.25rem;
-  --sc-kit--table--head--height: 2rem;
-  --sc-kit--table--cell--font-size: var(--sc-kit--font-size--sm);
-  --sc-kit--table--cell--horizontal-padding: var(--sc-kit--space--3);
+  --_table--size-row-height: 2.25rem;
+  --_table--size-head-height: 2rem;
+  --_table--size-cell-font-size: var(--sc-kit--font-size--sm);
+  --_table--size-cell-padding: var(--sc-kit--space--3);
 }
 .table-container--card {
   background: var(--_table--card--background);
@@ -452,12 +294,6 @@ Data table component with support for sorting, selection, drag-and-drop row reor
 .table__td--flush {
   border-bottom: none;
 }
-.table__save-cancel {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sc-kit--space--2);
-  --sc-kit--button--min-width: 4.6875rem;
-}
 .table__placeholder {
   display: flex;
   align-items: center;
@@ -465,21 +301,16 @@ Data table component with support for sorting, selection, drag-and-drop row reor
   font-size: 80%;
   user-select: none;
 }
-.table__actions {
-  display: contents;
-}
-.table__drag-handle {
-  width: 2.25rem;
-  cursor: grab;
-  text-align: center;
-  --sc-kit--icon--size: 1.25rem;
-  --sc-kit--icon--color: var(--sc-kit--color--text--muted);
-}
-.table__drag-handle--dragging {
-  cursor: grabbing;
-}
 .table--sticky-header thead {
   position: sticky;
   top: 0;
   z-index: 1;
+}
+
+.table__group-header {
+  padding-block: var(--sc-kit--space--6) var(--sc-kit--space--2);
+  padding-inline: var(--_table--cell--horizontal-padding);
+  font-size: var(--sc-kit--font-size--sm);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  color: var(--sc-kit--color--text--secondary);
 }</style>

package/dist/ui/table/cmp.table.svelte.d.ts

@@ -1,20 +1,29 @@
 import type { TableModel } from './table-model.svelte';
-import { type Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 declare function $$render<T extends {
     id: string;
 }>(): {
     props: {
         model: TableModel<T>;
-        rowsDraggable?: boolean;
         showPlaceholder?: boolean;
         showAlternativeView?: boolean;
+        /** Group consecutive (already-sorted) rows under section headers. `key` returns a group id per item (`null` = ungrouped); a header row renders wherever the key changes between neighbours. */
+        grouping?: {
+            key: (item: T) => string | null;
+            /** Header text — defaults to the group key. */
+            label?: (key: string, firstItem: T) => string;
+            /** Custom header rendering; receives the group key, resolved label, and row count. */
+            header?: Snippet<[{
+                key: string;
+                label: string;
+                count: number;
+            }]>;
+        };
         on?: {
             selectionChanged?: (e: T[]) => void;
             itemsSelected?: (e: T[]) => void;
             itemsDeselected?: (e: T[]) => void;
             itemsReordered?: (e: T[]) => void;
-            saveChanges?: (e: T) => void;
-            cancelChanges?: () => void;
         };
         alternativeView?: Snippet;
         placeholderRow?: Snippet;
@@ -46,7 +55,9 @@ interface $$IsomorphicComponent {
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /**
- * Data table component with support for sorting, selection, drag-and-drop row reordering, inline editing, column visibility management, and group actions.
+ * Data table with sorting, selection, column visibility management, optional consumer-driven row grouping
+ * (`grouping`), and group actions. For drag-and-drop row reordering use `DraggableTable` instead (this static
+ * variant ships no dnd code).
  *
  * ### TableStyles (via `model.styles`)
  * | Field | Type | Effect |
@@ -72,9 +83,6 @@ interface $$IsomorphicComponent {
  * | `--sc-kit--table--card--background` | Card variant background | `--sc-kit--color--bg--panel` |
  * | `--sc-kit--table--card--border-color` | Card variant border | `--sc-kit--color--border` |
  * | `--sc-kit--table--card--border-radius` | Card variant radius | `--sc-kit--radius--lg` |
- * | `--sc-kit--table-actions-cell--trigger--border-color` | Actions trigger border | `--sc-kit--color--accent--soft` |
- * | `--sc-kit--table-actions-cell--trigger--icon-color` | Actions trigger icon | `--sc-kit--color--accent` |
- * | `--sc-kit--table-text-cell--clickable--color` | Clickable text cell color | `--sc-kit--color--accent` |
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends {

package/dist/ui/table/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Table } from './cmp.table.svelte';
+export { default as DraggableTable } from './cmp.table-draggable.svelte';
 export { default as TableColumnsManager } from './table-columns-manager/cmp.table-columns-manager.svelte';
 export { default as TableGroupActions } from './table-group-actions/cmp.table-group-actions.svelte';
 export type { ColumnsConfig, TableColumnSortDirection, TableColumnType, TableImageColumnFormat, TableItemAction, TableTextColumnFormat, TableOrderByState, PageQuery, IAnyTableColumn } from './types';

package/dist/ui/table/index.js

@@ -1,4 +1,5 @@
 export { default as Table } from './cmp.table.svelte';
+export { default as DraggableTable } from './cmp.table-draggable.svelte';
 export { default as TableColumnsManager } from './table-columns-manager/cmp.table-columns-manager.svelte';
 export { default as TableGroupActions } from './table-group-actions/cmp.table-group-actions.svelte';
 export { TableModel } from './table-model.svelte';

package/dist/ui/table/table-cells/index.d.ts

@@ -1,13 +1,2 @@
-export { default as TableActionsCell } from './table-actions-cell.svelte';
-export { default as TableBadgeCell } from './table-badge-cell.svelte';
-export { default as TableButtonCell } from './table-button-cell.svelte';
-export { default as TableByCell } from './table-by-cell.svelte';
-export { default as TableCheckboxCell } from './table-checkbox-cell.svelte';
-export { default as TableCustomCell } from './table-custom-cell.svelte';
-export { default as TableIconCell } from './table-icon-cell.svelte';
-export { default as TableImageCell } from './table-image-cell.svelte';
-export { default as TableMoveRowCell } from './table-move-row-cell.svelte';
-export { default as TableSelectCell } from './table-select-cell.svelte';
-export { default as TableTextCell } from './table-text-cell.svelte';
-export { default as TableTextInputCell } from './table-text-input-cell.svelte';
+export { default as TableCell } from './table-cell.svelte';
 export { default as TableHideableCell } from './table-hideable-cell.svelte';

package/dist/ui/table/table-cells/index.js

@@ -1,13 +1,2 @@
-export { default as TableActionsCell } from './table-actions-cell.svelte';
-export { default as TableBadgeCell } from './table-badge-cell.svelte';
-export { default as TableButtonCell } from './table-button-cell.svelte';
-export { default as TableByCell } from './table-by-cell.svelte';
-export { default as TableCheckboxCell } from './table-checkbox-cell.svelte';
-export { default as TableCustomCell } from './table-custom-cell.svelte';
-export { default as TableIconCell } from './table-icon-cell.svelte';
-export { default as TableImageCell } from './table-image-cell.svelte';
-export { default as TableMoveRowCell } from './table-move-row-cell.svelte';
-export { default as TableSelectCell } from './table-select-cell.svelte';
-export { default as TableTextCell } from './table-text-cell.svelte';
-export { default as TableTextInputCell } from './table-text-input-cell.svelte';
+export { default as TableCell } from './table-cell.svelte';
 export { default as TableHideableCell } from './table-hideable-cell.svelte';

package/dist/ui/table/table-cells/table-cell.svelte

@@ -0,0 +1,77 @@
+<script lang="ts" generics="T extends {id: string}">import { IconText } from '../../icon-text';
+import { PopoverItem } from '../../popover';
+import { default as TableActionsCell } from './table-actions-cell.svelte';
+import { default as TableBadgeCell } from './table-badge-cell.svelte';
+import { default as TableButtonCell } from './table-button-cell.svelte';
+import { default as TableByCell } from './table-by-cell.svelte';
+import { default as TableCheckboxCell } from './table-checkbox-cell.svelte';
+import { default as TableCustomCell } from './table-custom-cell.svelte';
+import { default as TableIconCell } from './table-icon-cell.svelte';
+import { default as TableImageCell } from './table-image-cell.svelte';
+import { default as TableMoveRowCell } from './table-move-row-cell.svelte';
+import { default as TableTextCell } from './table-text-cell.svelte';
+const { model, item, column, itemIndex, on } = $props();
+const def = $derived(column.def);
+const visibleActions = $derived(model.itemActions.filter((action) => (action.visibilityFactory ? action.visibilityFactory(item) : true)));
+const disableMoveRowCell = (moveRowDef) => {
+    if (!moveRowDef.disableFactory) {
+        return false;
+    }
+    return moveRowDef.disableFactory();
+};
+const changeItemPosition = (target, positionChange) => {
+    const index = model.items.indexOf(target);
+    const newIndex = index + positionChange;
+    const newItems = [...model.items];
+    newItems.splice(index, 1);
+    newItems.splice(newIndex, 0, target);
+    model.reorderItems(newItems);
+    on?.itemsReordered?.(newItems);
+};
+</script>
+
+{#if def.type === 'actions'}
+  {#if visibleActions.length}
+    <TableActionsCell popoverPosition={model.styles?.actionsPopoverTopDirection ? 'top' : 'bottom'}>
+      <div class="actions">
+        {#each visibleActions as action (action)}
+          <PopoverItem on={{ click: () => action.action(item) }}>
+            <IconText icon={action.icon} size="md">
+              {action.title}
+            </IconText>
+          </PopoverItem>
+        {/each}
+      </div>
+    </TableActionsCell>
+  {/if}
+{:else if def.type === 'badge'}
+  <TableBadgeCell column={def} item={item} />
+{:else if def.type === 'button'}
+  <TableButtonCell column={def} item={item} />
+{:else if def.type === 'by'}
+  <TableByCell column={def} item={item} />
+{:else if def.type === 'checkbox'}
+  <TableCheckboxCell item={item} selection={model.selection} />
+{:else if def.type === 'custom'}
+  <TableCustomCell column={def} item={item} />
+{:else if def.type === 'icon'}
+  <TableIconCell column={def} item={item} />
+{:else if def.type === 'image'}
+  <TableImageCell column={def} item={item} centered={column.centered} />
+{:else if def.type === 'move-row'}
+  <TableMoveRowCell
+    on={{
+      up: disableMoveRowCell(def) || itemIndex < 1 ? undefined : () => changeItemPosition(item, -1),
+      down: disableMoveRowCell(def) || itemIndex >= model.items.length - 1 ? undefined : () => changeItemPosition(item, 1)
+    }} />
+{:else if def.type === 'snippet'}
+  {@render def.cell(item)}
+{:else if def.type === 'text'}
+  <TableTextCell column={def} item={item} centered={column.centered} />
+{:else}
+  <TableTextCell column={def} item={item} centered={false} />
+{/if}
+
+<style>.actions {
+  display: contents;
+}</style>

package/dist/ui/table/table-cells/{table-select-cell.svelte.d.ts → table-cell.svelte.d.ts}

@@ -1,10 +1,16 @@
-import type { ITableSelectColumn } from '../types';
+import type { ResolvedColumn } from '../table-column-models.svelte';
+import type { TableModel } from '../table-model.svelte';
 declare function $$render<T extends {
     id: string;
 }>(): {
     props: {
+        model: TableModel<T>;
         item: T;
-        column: ITableSelectColumn<T, keyof T>;
+        column: ResolvedColumn<T>;
+        itemIndex: number;
+        on?: {
+            itemsReordered?: (items: T[]) => void;
+        };
     };
     exports: {};
     bindings: "";
@@ -31,8 +37,8 @@ interface $$IsomorphicComponent {
     }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const TableSelectCell: $$IsomorphicComponent;
-type TableSelectCell<T extends {
+declare const TableCell: $$IsomorphicComponent;
+type TableCell<T extends {
     id: string;
-}> = InstanceType<typeof TableSelectCell<T>>;
-export default TableSelectCell;
+}> = InstanceType<typeof TableCell<T>>;
+export default TableCell;