@classic-homes/theme-svelte 1.42.3 → 1.44.0

package/dist/lib/components/DataTable.svelte

@@ -637,6 +637,8 @@
                   >
                     {#if canEdit && column.enableEditing}
                       <DataTableEditableCell {row} {column} onSave={handleCellEdit} />
+                    {:else if column.cell}
+                      {@render column.cell(value, row.original)}
                     {:else}
                       {table.getFormattedCellValue(row.original, column)}
                     {/if}

package/dist/lib/components/MultiSelect.svelte

@@ -47,6 +47,12 @@
     onSearch?: (query: string) => void;
     /** Debounce delay in ms for search callback (default: 300) */
     debounceMs?: number;
+    /**
+     * Selected tags shown before the rest fold into a "+N more" toggle
+     * (default 6), so a long selection (e.g. a select-all) doesn't push the
+     * layout down. `Infinity` always shows every tag.
+     */
+    maxVisibleTags?: number;
     /** Additional class for the trigger */
     class?: string;
   }
@@ -68,6 +74,7 @@
     loading = false,
     onSearch,
     debounceMs = 300,
+    maxVisibleTags = 6,
     class: className,
   }: Props = $props();
 
@@ -85,11 +92,23 @@
   let debounceTimer: ReturnType<typeof setTimeout> | null = null;
   let open = $state(false);
 
-  // Get labels for selected values
-  const selectedLabels = $derived(
-    value.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean) as string[]
+  // The selected values that have an option, with their labels (tag order = pick order)
+  const selectedTags = $derived(
+    value.flatMap((v) => {
+      const label = options.find((opt) => opt.value === v)?.label;
+      return label ? [{ value: v, label }] : [];
+    })
   );
 
+  // Past maxVisibleTags the rest fold behind a "+N more" toggle.
+  let tagsExpanded = $state(false);
+  const tagLimit = $derived(Math.max(0, maxVisibleTags));
+  const hiddenTagCount = $derived(Math.max(0, selectedTags.length - tagLimit));
+  const visibleTags = $derived(
+    tagsExpanded || hiddenTagCount === 0 ? selectedTags : selectedTags.slice(0, tagLimit)
+  );
+  const tagsId = $derived(`${componentId}-tags`);
+
   // Always filter options locally based on search query
   const filteredOptions = $derived.by(() => {
     if (!searchQuery) return options;
@@ -203,10 +222,11 @@
 
   <div class={cn('w-full', className)}>
     <!-- Selected tags -->
-    {#if selectedLabels.length > 0}
-      <div class="flex flex-wrap gap-1 mb-2">
-        {#each value as selectedValue}
-          {@const labelText = options.find((o) => o.value === selectedValue)?.label}
+    {#if selectedTags.length > 0}
+      <div id={tagsId} class="flex flex-wrap gap-1 mb-2">
+        {#each visibleTags as tag (tag.value)}
+          {@const selectedValue = tag.value}
+          {@const labelText = tag.label}
           {#if labelText}
             <span
               class="inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs font-medium text-foreground"
@@ -237,6 +257,17 @@
             </span>
           {/if}
         {/each}
+        {#if hiddenTagCount > 0}
+          <button
+            type="button"
+            onclick={() => (tagsExpanded = !tagsExpanded)}
+            class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium text-primary underline-offset-2 hover:underline focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+            aria-expanded={tagsExpanded}
+            aria-controls={tagsId}
+          >
+            {tagsExpanded ? 'Show less' : `+${hiddenTagCount} more`}
+          </button>
+        {/if}
       </div>
     {/if}
 

package/dist/lib/components/MultiSelect.svelte.d.ts

@@ -36,6 +36,12 @@ interface Props {
     onSearch?: (query: string) => void;
     /** Debounce delay in ms for search callback (default: 300) */
     debounceMs?: number;
+    /**
+     * Selected tags shown before the rest fold into a "+N more" toggle
+     * (default 6), so a long selection (e.g. a select-all) doesn't push the
+     * layout down. `Infinity` always shows every tag.
+     */
+    maxVisibleTags?: number;
     /** Additional class for the trigger */
     class?: string;
 }

package/dist/lib/components/data-table/DataTableEditableCell.svelte

@@ -146,12 +146,20 @@
     onkeydown={(e: KeyboardEvent) => e.key === 'Enter' && startEditing()}
   >
     <span class="border-b border-dashed border-transparent hover:border-primary">
-      {displayValue}
+      {#if column.cell}
+        {@render column.cell(getColumnValue(row.original, column), row.original)}
+      {:else}
+        {displayValue}
+      {/if}
     </span>
     <span class="sr-only">(double-click to edit)</span>
   </button>
 {:else}
   <span class={cn('relative', className)}>
-    {displayValue}
+    {#if column.cell}
+      {@render column.cell(getColumnValue(row.original, column), row.original)}
+    {:else}
+      {displayValue}
+    {/if}
   </span>
 {/if}

package/dist/lib/components/data-table/DataTableVirtual.svelte

@@ -243,7 +243,11 @@
               style={column.width ? `width: ${column.width}` : 'flex: 1'}
               role="cell"
             >
-              {table.getFormattedCellValue(row.original, column)}
+              {#if column.cell}
+                {@render column.cell(getColumnValue(row.original, column), row.original)}
+              {:else}
+                {table.getFormattedCellValue(row.original, column)}
+              {/if}
             </div>
           {/each}
         </div>

package/dist/lib/types/components.d.ts

@@ -4,6 +4,7 @@
  * These types are exported from components but need to be
  * re-exported from a TypeScript file for proper type inference.
  */
+import type { Snippet } from 'svelte';
 import type { IconName } from '../components/Icon.svelte';
 /**
  * Dropdown Menu Types
@@ -102,8 +103,18 @@ export interface DataTableColumn<T = object> {
      * mirror the guard themselves so cell counts stay in sync.
      */
     hideBelow?: 'sm' | 'md' | 'lg';
-    /** Custom cell render function returning string */
+    /**
+     * Custom cell text. Global search matches it, and it stays the cell's text
+     * (e.g. for `getFormattedCellValue` and exports) when `cell` renders it.
+     */
     format?: (value: unknown, row: T) => string;
+    /**
+     * Custom cell content (e.g. a value with its change underneath). Rendered
+     * in place of the formatted text whenever the cell is not being edited
+     * (editable cells still edit the raw value); `format` still supplies the
+     * cell's text for search and exports.
+     */
+    cell?: Snippet<[value: unknown, row: T]>;
     /** Filter function type or custom filter function */
     filterFn?: DataTableFilterFn<T>;
     /** Options for select/faceted filters */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.42.3",
+  "version": "1.44.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",