@streamscloud/kit 0.50.0 → 0.51.0

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

@@ -7,9 +7,9 @@ import { columnWidthStyle, createTableView } from './table-view.svelte';
 import IconReorderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_horizontal_20_regular.svg?raw';
 import { flip } from 'svelte/animate';
 import { dndzone } from 'svelte-dnd-action';
-let { model, showPlaceholder = false, showAlternativeView = false, on, alternativeView, placeholderRow, customNoItemsPlaceholder } = $props();
+let { model, showAlternativeView = false, noItemsPlaceholder, on, alternativeView, customNoItemsPlaceholder } = $props();
 const localization = new TableLocalization();
-const view = createTableView(() => model, () => on);
+const view = createTableView(() => model, () => on, () => noItemsPlaceholder);
 const flipDurationMs = 200;
 let tableRef = $state.raw(null);
 let dndItems = $state.raw(null);
@@ -51,18 +51,20 @@ const transformDraggedElement = (draggedRow) => {
 };
 </script>
 
+{#snippet noItemsContent()}
+  {#if customNoItemsPlaceholder}
+    {@render customNoItemsPlaceholder()}
+  {:else}
+    <EmptyState graphic="zero-content" title={localization.noItemsFoundTitle} description={localization.noItemsFoundBody} />
+  {/if}
+{/snippet}
+
 <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 || view.showNoItemsPlaceholder}
-      <div class="alternative-view__placeholder">
-        {#if showPlaceholder}
-          {@render placeholderRow?.()}
-        {:else if customNoItemsPlaceholder}
-          {@render customNoItemsPlaceholder()}
-        {/if}
-      </div>
+    {#if view.showNoItemsPlaceholder}
+      <div class="alternative-view__placeholder">{@render noItemsContent()}</div>
     {:else}
       {@render alternativeView()}
     {/if}
@@ -91,18 +93,10 @@ const transformDraggedElement = (draggedRow) => {
         }}
         onconsider={handleConsider}
         onfinalize={handleFinalize}>
-        {#if showPlaceholder || view.showNoItemsPlaceholder}
+        {#if view.showNoItemsPlaceholder}
           <tr class="table__tr table__tr--placeholder">
             <td colspan={visibleColspan}>
-              <div class="table__placeholder">
-                {#if showPlaceholder}
-                  {@render placeholderRow?.()}
-                {:else if customNoItemsPlaceholder}
-                  {@render customNoItemsPlaceholder()}
-                {:else}
-                  <EmptyState graphic="zero-content" title={localization.noItemsFoundTitle} description={localization.noItemsFoundBody} />
-                {/if}
-              </div>
+              <div class="table__placeholder">{@render noItemsContent()}</div>
             </td>
           </tr>
         {:else}

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

@@ -5,8 +5,14 @@ declare function $$render<T extends {
 }>(): {
     props: {
         model: TableModel<T>;
-        showPlaceholder?: boolean;
         showAlternativeView?: boolean;
+        /**
+         * When an empty list turns into the no-items placeholder. A number delays it by that many ms (anti-flicker while the first page is in flight); a boolean
+         * decides outright — `true` shows it as soon as the list is empty, `false` never shows it (pair it with your own loading / empty UI). Rows always win:
+         * the placeholder is never rendered over a non-empty list.
+         * @default 700
+         */
+        noItemsPlaceholder?: number | boolean;
         on?: {
             selectionChanged?: (e: T[]) => void;
             itemsSelected?: (e: T[]) => void;
@@ -14,7 +20,6 @@ declare function $$render<T extends {
             itemsReordered?: (e: T[]) => void;
         };
         alternativeView?: Snippet;
-        placeholderRow?: Snippet;
         customNoItemsPlaceholder?: Snippet;
     };
     exports: {};

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

@@ -3,9 +3,9 @@ import { EmptyState } from '../empty-state';
 import { TableCell, TableHideableCell } from './table-cells';
 import { TableLocalization } from './table-localization';
 import { columnWidthStyle, createTableView } from './table-view.svelte';
-let { model, showPlaceholder = false, showAlternativeView = false, grouping, on, alternativeView, placeholderRow, customNoItemsPlaceholder } = $props();
+let { model, showAlternativeView = false, noItemsPlaceholder, grouping, on, alternativeView, customNoItemsPlaceholder } = $props();
 const localization = new TableLocalization();
-const view = createTableView(() => model, () => on);
+const view = createTableView(() => model, () => on, () => noItemsPlaceholder);
 const displayRows = $derived.by(() => {
     const items = model.items;
     const grp = grouping;
@@ -37,18 +37,20 @@ const displayRows = $derived.by(() => {
 const visibleColspan = $derived(model.columns.filter((column) => !column.hidden).length);
 </script>
 
+{#snippet noItemsContent()}
+  {#if customNoItemsPlaceholder}
+    {@render customNoItemsPlaceholder()}
+  {:else}
+    <EmptyState graphic="zero-content" title={localization.noItemsFoundTitle} description={localization.noItemsFoundBody} />
+  {/if}
+{/snippet}
+
 <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 || view.showNoItemsPlaceholder}
-      <div class="alternative-view__placeholder">
-        {#if showPlaceholder}
-          {@render placeholderRow?.()}
-        {:else if customNoItemsPlaceholder}
-          {@render customNoItemsPlaceholder()}
-        {/if}
-      </div>
+    {#if view.showNoItemsPlaceholder}
+      <div class="alternative-view__placeholder">{@render noItemsContent()}</div>
     {:else}
       {@render alternativeView()}
     {/if}
@@ -66,18 +68,10 @@ const visibleColspan = $derived(model.columns.filter((column) => !column.hidden)
         </tr>
       </thead>
       <tbody>
-        {#if showPlaceholder || view.showNoItemsPlaceholder}
+        {#if view.showNoItemsPlaceholder}
           <tr class="table__tr table__tr--placeholder">
             <td colspan={visibleColspan}>
-              <div class="table__placeholder">
-                {#if showPlaceholder}
-                  {@render placeholderRow?.()}
-                {:else if customNoItemsPlaceholder}
-                  {@render customNoItemsPlaceholder()}
-                {:else}
-                  <EmptyState graphic="zero-content" title={localization.noItemsFoundTitle} description={localization.noItemsFoundBody} />
-                {/if}
-              </div>
+              <div class="table__placeholder">{@render noItemsContent()}</div>
             </td>
           </tr>
         {:else}

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

@@ -5,8 +5,14 @@ declare function $$render<T extends {
 }>(): {
     props: {
         model: TableModel<T>;
-        showPlaceholder?: boolean;
         showAlternativeView?: boolean;
+        /**
+         * When an empty list turns into the no-items placeholder. A number delays it by that many ms (anti-flicker while the first page is in flight); a boolean
+         * decides outright — `true` shows it as soon as the list is empty, `false` never shows it (pair it with your own loading / empty UI). Rows always win:
+         * the placeholder is never rendered over a non-empty list.
+         * @default 700
+         */
+        noItemsPlaceholder?: number | 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;
@@ -26,7 +32,6 @@ declare function $$render<T extends {
             itemsReordered?: (e: T[]) => void;
         };
         alternativeView?: Snippet;
-        placeholderRow?: Snippet;
         customNoItemsPlaceholder?: Snippet;
     };
     exports: {};

package/dist/ui/table/table-view.svelte.d.ts

@@ -8,8 +8,8 @@ type SelectionCallbacks<T> = {
 };
 /** Inline width declarations for a column's `th` / `td`: the preferred width plus, when set, the floor the browser must honour. */
 export declare const columnWidthStyle: <T extends WithId>(column: ResolvedColumn<T>) => string;
-/** Shared presentation wiring for the table views: selection-event subscriptions + the debounced no-items placeholder. */
-export declare const createTableView: <T extends WithId>(model: () => TableModel<T>, on: () => SelectionCallbacks<T> | undefined) => {
+/** Shared presentation wiring for the table views: selection-event subscriptions + the no-items placeholder decision (`number` = delay in ms, boolean = explicit). */
+export declare const createTableView: <T extends WithId>(model: () => TableModel<T>, on: () => SelectionCallbacks<T> | undefined, noItemsPlaceholder?: () => number | boolean | undefined) => {
     readonly showNoItemsPlaceholder: boolean;
 };
 export {};

package/dist/ui/table/table-view.svelte.js

@@ -4,8 +4,9 @@ export const columnWidthStyle = (column) => {
     const width = column.cssWidth ? `width: ${column.cssWidth};` : 'width: auto;';
     return column.minCssWidth ? `${width} min-width: ${column.minCssWidth};` : width;
 };
-/** Shared presentation wiring for the table views: selection-event subscriptions + the debounced no-items placeholder. */
-export const createTableView = (model, on) => {
+const NO_ITEMS_PLACEHOLDER_DELAY_MS = 700;
+/** Shared presentation wiring for the table views: selection-event subscriptions + the no-items placeholder decision (`number` = delay in ms, boolean = explicit). */
+export const createTableView = (model, on, noItemsPlaceholder = () => undefined) => {
     let showNoItemsPlaceholder = $state(false);
     let timeout = 0;
     $effect(() => untrack(() => {
@@ -18,14 +19,20 @@ export const createTableView = (model, on) => {
         return () => subscriptions.forEach((unsubscribe) => unsubscribe());
     }));
     $effect(() => {
+        const decision = noItemsPlaceholder() ?? NO_ITEMS_PLACEHOLDER_DELAY_MS;
         if (model().items.length) {
             clearTimeout(timeout);
             showNoItemsPlaceholder = false;
             return;
         }
+        if (typeof decision === 'boolean') {
+            clearTimeout(timeout);
+            showNoItemsPlaceholder = decision;
+            return;
+        }
         timeout = window.setTimeout(() => {
             showNoItemsPlaceholder = !model().items.length;
-        }, 700);
+        }, decision);
         return () => clearTimeout(timeout);
     });
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",