@streamscloud/kit 0.49.0 → 0.51.0

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

@@ -3,13 +3,13 @@ import { EmptyState } from '../empty-state';
 import { Icon } from '../icon';
 import { TableCell, TableHideableCell } from './table-cells';
 import { TableLocalization } from './table-localization';
-import { createTableView, cssWidth } from './table-view.svelte';
+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}
@@ -73,7 +75,7 @@ const transformDraggedElement = (draggedRow) => {
           <th class="table__th table__drag-handle">&nbsp;</th>
           {#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}>
+              <th class="table__th" class:table__th--centered={column.centered} style={columnWidthStyle(column)} title={column.title}>
                 <DynamicComponent model={column.headerView} />
               </th>
             </TableHideableCell>
@@ -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}
@@ -132,7 +126,7 @@ const transformDraggedElement = (draggedRow) => {
                     class:table__td--centered={column.centered}
                     class:table__td--clickable={!!column.onClick}
                     class:table__td--flush={flushBottom}
-                    style={cssWidth(column)}
+                    style={columnWidthStyle(column)}
                     onclick={() => column.onClick && column.onClick(item)}>
                     <TableCell model={model} item={item} column={column} itemIndex={itemIndex} on={{ itemsReordered: on?.itemsReordered }} />
                   </td>

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

@@ -2,10 +2,10 @@
 import { EmptyState } from '../empty-state';
 import { TableCell, TableHideableCell } from './table-cells';
 import { TableLocalization } from './table-localization';
-import { createTableView, cssWidth } from './table-view.svelte';
-let { model, showPlaceholder = false, showAlternativeView = false, grouping, on, alternativeView, placeholderRow, customNoItemsPlaceholder } = $props();
+import { columnWidthStyle, createTableView } from './table-view.svelte';
+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}
@@ -58,7 +60,7 @@ const visibleColspan = $derived(model.columns.filter((column) => !column.hidden)
         <tr>
           {#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}>
+              <th class="table__th" class:table__th--centered={column.centered} style={columnWidthStyle(column)} title={column.title}>
                 <DynamicComponent model={column.headerView} />
               </th>
             </TableHideableCell>
@@ -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}
@@ -112,7 +106,7 @@ const visibleColspan = $derived(model.columns.filter((column) => !column.hidden)
                       class:table__td--centered={column.centered}
                       class:table__td--clickable={!!column.onClick}
                       class:table__td--flush={flushBottom}
-                      style={cssWidth(column)}
+                      style={columnWidthStyle(column)}
                       onclick={() => column.onClick && column.onClick(item)}>
                       <TableCell model={model} item={item} column={column} itemIndex={itemIndex} on={{ itemsReordered: on?.itemsReordered }} />
                     </td>

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-column-models.svelte.d.ts

@@ -24,7 +24,8 @@ export declare class ResolvedColumn<T extends WithId> {
     get id(): keyof T;
     get title(): string;
     get centered(): boolean;
-    get fixedCssWidth(): string;
+    get cssWidth(): string;
+    get minCssWidth(): string;
     get hideable(): boolean;
     get sortLabelsOverride(): {
         asc: string;

package/dist/ui/table/table-column-models.svelte.js

@@ -31,8 +31,11 @@ export class ResolvedColumn {
     get centered() {
         return this.def.centered ?? false;
     }
-    get fixedCssWidth() {
-        return this.def.fixedCssWidth ?? '';
+    get cssWidth() {
+        return this.def.cssWidth ?? '';
+    }
+    get minCssWidth() {
+        return this.def.minCssWidth ?? '';
     }
     get hideable() {
         if ('hideable' in this.def) {

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

@@ -113,7 +113,7 @@ export class TableModel {
         }
         // Append actions column if needed
         if (this._itemActions.length) {
-            const actionsColumn = new ResolvedColumn({ type: 'actions', centered: true, fixedCssWidth: Css.em(75) });
+            const actionsColumn = new ResolvedColumn({ type: 'actions', centered: true, cssWidth: Css.em(75) });
             actionsColumn.headerView = new DynamicComponentModel({
                 component: TableHeader,
                 props: { column: { title: 'Actions' } }
@@ -151,7 +151,7 @@ export class TableModel {
                 const resolved = new ResolvedColumn({
                     ...column,
                     centered: true,
-                    fixedCssWidth: column.fixedCssWidth || Css.em(50)
+                    cssWidth: column.cssWidth || Css.em(50)
                 });
                 resolved.headerView = new DynamicComponentModel({
                     component: TableCheckboxHeader,
@@ -163,7 +163,7 @@ export class TableModel {
                 const resolved = new ResolvedColumn({
                     ...column,
                     centered: true,
-                    fixedCssWidth: column.fixedCssWidth || Css.em(75)
+                    cssWidth: column.cssWidth || Css.em(75)
                 });
                 resolved.headerView = resolveSortableHeader(resolved);
                 return resolved;

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

@@ -6,9 +6,10 @@ type SelectionCallbacks<T> = {
     itemsSelected?: (e: T[]) => void;
     itemsDeselected?: (e: T[]) => void;
 };
-export declare const cssWidth: <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) => {
+/** 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 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

@@ -1,7 +1,12 @@
 import { untrack } from 'svelte';
-export const cssWidth = (column) => (column.fixedCssWidth ? `width: ${column.fixedCssWidth};` : 'width: auto;');
-/** Shared presentation wiring for the table views: selection-event subscriptions + the debounced no-items placeholder. */
-export const createTableView = (model, on) => {
+/** Inline width declarations for a column's `th` / `td`: the preferred width plus, when set, the floor the browser must honour. */
+export const columnWidthStyle = (column) => {
+    const width = column.cssWidth ? `width: ${column.cssWidth};` : 'width: auto;';
+    return column.minCssWidth ? `${width} min-width: ${column.minCssWidth};` : width;
+};
+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(() => {
@@ -14,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/dist/ui/table/types.d.ts

@@ -11,7 +11,13 @@ export type IOneOfTableColumn<T> = ITableBadgeColumn<T> | ITableButtonColumn<T>
 export type TableColumnType = 'actions' | 'badge' | 'button' | 'by' | 'checkbox' | 'icon' | 'image' | 'move-row' | 'snippet' | 'text';
 interface ITableColumnBase {
     type: TableColumnType;
-    fixedCssWidth?: string;
+    /**
+     * Preferred column width. Under the table's `table-layout: auto` this is a suggestion: content can push a column wider, and a column with no width of its
+     * own is left with whatever the others do not claim. Use `minCssWidth` for a width the browser must honour.
+     */
+    cssWidth?: string;
+    /** Floor the column will not shrink below, taken out of columns whose `cssWidth` is merely a suggestion. Use it on the column that must keep space. */
+    minCssWidth?: string;
     centered?: boolean;
 }
 export interface ITableColumn<T> extends ITableColumnBase {

package/package.json

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