@streamscloud/kit 0.49.0 → 0.50.0

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

@@ -3,7 +3,7 @@ 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';
@@ -73,7 +73,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>
@@ -132,7 +132,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.svelte

@@ -2,7 +2,7 @@
 import { EmptyState } from '../empty-state';
 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';
 let { model, showPlaceholder = false, showAlternativeView = false, grouping, on, alternativeView, placeholderRow, customNoItemsPlaceholder } = $props();
 const localization = new TableLocalization();
 const view = createTableView(() => model, () => on);
@@ -58,7 +58,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>
@@ -112,7 +112,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/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,7 +6,8 @@ type SelectionCallbacks<T> = {
     itemsSelected?: (e: T[]) => void;
     itemsDeselected?: (e: T[]) => void;
 };
-export declare const cssWidth: <T extends WithId>(column: ResolvedColumn<T>) => string;
+/** 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) => {
     readonly showNoItemsPlaceholder: boolean;

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

@@ -1,5 +1,9 @@
 import { untrack } from 'svelte';
-export const cssWidth = (column) => (column.fixedCssWidth ? `width: ${column.fixedCssWidth};` : 'width: auto;');
+/** 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;
+};
 /** Shared presentation wiring for the table views: selection-event subscriptions + the debounced no-items placeholder. */
 export const createTableView = (model, on) => {
     let showNoItemsPlaceholder = $state(false);

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.50.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",