@streamscloud/kit 0.2.10 → 0.2.11

package/dist/ui/table/table-headers/table-header-sortable.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">import { Checkbox } from '../../checkbox';
+import { Dropdown } from '../../dropdown';
+import { Icon } from '../../icon';
+import TableHeader from './table-header.svelte';
+import IconCaretDownFilled from '@fluentui/svg-icons/icons/caret_down_16_filled.svg?raw';
+import {} from 'svelte';
+let { column, on, children } = $props();
+const changeSort = (direction) => {
+    if (column.sortDirection === direction) {
+        direction = 'none';
+    }
+    column.sortDirection = direction;
+    on?.sortApplied?.();
+    column.onSort?.(column.sortDirection);
+};
+</script>
+
+<TableHeader column={column}>
+  <div class="th-sortable" class:th-sortable--centered={column.centered}>
+    {@render children?.()}
+    <span>&nbsp;</span>
+    <Dropdown position="bottom-start">
+      {#snippet trigger()}
+        <button type="button" class="th-sortable__marker">
+          <span class="th-sortable__title">
+            {column.title}
+          </span>
+          <Icon src={IconCaretDownFilled} />
+        </button>
+      {/snippet}
+
+      <div class="th-sortable__dropdown">
+        <div class="th-sortable__dropdown-title">Order by:</div>
+        {#if column.type === 'by'}
+          <div class="th-sortable__dropdown-option">
+            Newest first
+            <Checkbox checked={column.sortDirection === 'desc'} on={{ change: () => changeSort('desc') }} />
+          </div>
+          <div class="th-sortable__dropdown-option">
+            Oldest first
+            <Checkbox checked={column.sortDirection === 'asc'} on={{ change: () => changeSort('asc') }} />
+          </div>
+        {:else}
+          <div class="th-sortable__dropdown-option">
+            A → Z
+            <Checkbox checked={column.sortDirection === 'asc'} on={{ change: () => changeSort('asc') }} />
+          </div>
+          <div class="th-sortable__dropdown-option">
+            Z → A
+            <Checkbox checked={column.sortDirection === 'desc'} on={{ change: () => changeSort('desc') }} />
+          </div>
+        {/if}
+      </div>
+    </Dropdown>
+  </div>
+</TableHeader>
+
+<style>.th-sortable {
+  font-size: 1em;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.th-sortable--centered {
+  justify-content: center;
+}
+.th-sortable__title, .th-sortable__marker {
+  color: inherit;
+  display: inline-block;
+  white-space: nowrap;
+  align-self: center;
+  text-transform: inherit;
+}
+.th-sortable__dropdown {
+  font-size: 0.875em;
+  min-width: 14.5625em;
+  padding: 1.375em 1.75em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.625em;
+}
+.th-sortable__dropdown-title {
+  font-weight: 600;
+}
+.th-sortable__dropdown-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.th-sortable__marker {
+  --sc-kit--icon--size: 0.75em;
+}</style>

package/dist/ui/table/table-headers/table-header-sortable.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { SortableTableColumn } from '../table-column-models.svelte';
+import { type Snippet } from 'svelte';
+type Props = {
+    column: SortableTableColumn;
+    on?: {
+        sortApplied?: () => void;
+    };
+    children?: Snippet;
+};
+declare const TableHeaderSortable: import("svelte").Component<Props, {}, "">;
+type TableHeaderSortable = ReturnType<typeof TableHeaderSortable>;
+export default TableHeaderSortable;

package/dist/ui/table/table-headers/table-header.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">let { column, children } = $props();
+export {};
+</script>
+
+<div class="table-header">
+  {#if children}
+    {@render children()}
+  {:else}
+    {column.title}
+  {/if}
+</div>
+
+<style>.table-header {
+  font-size: var(--_table--cell--font-size);
+  font-weight: 400;
+  text-transform: none;
+  white-space: nowrap;
+}</style>

package/dist/ui/table/table-headers/table-header.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    column: {
+        title: string;
+    };
+    children?: Snippet;
+};
+declare const TableHeader: import("svelte").Component<Props, {}, "">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;

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

@@ -0,0 +1,42 @@
+import { type Repository } from '../../core/repository';
+import { ResolvedColumn } from './table-column-models.svelte';
+import type { TableGroupAction } from './table-group-actions/types.svelte';
+import type { TableItemAction, TableStyles, WithId, SelectionSettings, IAnyTableColumn } from './types';
+type TableModelInit<T extends WithId> = {
+    columns: IAnyTableColumn<T>[];
+    items?: T[];
+    itemActions?: TableItemAction<T>[];
+    itemGroupActions?: TableGroupAction<T>[];
+    styles?: TableStyles;
+    selectionSettings?: SelectionSettings<T>;
+};
+export declare class TableModel<T extends WithId> {
+    private _init;
+    private _items;
+    private _columns;
+    private _itemActions;
+    private _itemGroupActions;
+    private _styles;
+    private _selection;
+    private _preserveSelection;
+    private _dataProvider;
+    private _editingItem;
+    private _highlightedItemIds;
+    constructor(init: TableModelInit<T>);
+    get items(): T[];
+    get columns(): ResolvedColumn<T>[];
+    get itemActions(): TableItemAction<T>[];
+    get itemGroupActions(): TableGroupAction<T>[];
+    get styles(): TableStyles;
+    get selection(): Repository<T>;
+    get editingItem(): T | null;
+    get highlightedItemIds(): string[];
+    set items(value: T[]);
+    set itemActions(value: TableItemAction<T>[]);
+    set columns(value: IAnyTableColumn<T>[]);
+    set editingItem(value: T | null);
+    set highlightedItemIds(value: string[]);
+    private reconcileColumns;
+    private mapColumn;
+}
+export {};

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

@@ -0,0 +1,207 @@
+import { Css } from '../../core/css';
+import { createRepository } from '../../core/repository';
+import { Utils } from '../../core/utils';
+import { DynamicComponentModel } from '../dynamic-component';
+import { ResolvedColumn } from './table-column-models.svelte';
+import { TableCheckboxHeader, TableHeader, TableHeaderSortable } from './table-headers';
+import { untrack } from 'svelte';
+export class TableModel {
+    _init;
+    _items = $state.raw([]);
+    _columns = $state.raw([]);
+    _itemActions = $state.raw([]);
+    _itemGroupActions = $state.raw([]);
+    _styles;
+    _selection;
+    _preserveSelection = false;
+    _dataProvider;
+    _editingItem = $state(null);
+    _highlightedItemIds = $state.raw([]);
+    constructor(init) {
+        this._init = init;
+        this._selection = init.selectionSettings?.repository ?? createRepository();
+        this._preserveSelection = init.selectionSettings?.preserveSelection || false;
+        this._dataProvider = createRepository();
+        this._itemActions = init.itemActions || [];
+        this._itemGroupActions = init.itemGroupActions || [];
+        this._styles = init.styles || { stickyHeader: true };
+        // Use setter to also populate _dataProvider for checkbox header
+        if (init.items?.length) {
+            this.items = init.items;
+        }
+        // Reactive reconciliation: columns + itemActions
+        $effect(() => {
+            const columnDefs = this._init.columns;
+            const actions = this._init.itemActions;
+            untrack(() => {
+                this._itemActions = actions || [];
+                this.reconcileColumns(columnDefs);
+            });
+        });
+        // Reactive reconciliation: itemGroupActions
+        $effect(() => {
+            const groupActions = this._init.itemGroupActions;
+            untrack(() => {
+                this._itemGroupActions = groupActions || [];
+            });
+        });
+    }
+    get items() {
+        return this._items;
+    }
+    get columns() {
+        return this._columns;
+    }
+    get itemActions() {
+        return this._itemActions;
+    }
+    get itemGroupActions() {
+        return this._itemGroupActions;
+    }
+    get styles() {
+        return this._styles;
+    }
+    get selection() {
+        return this._selection;
+    }
+    get editingItem() {
+        return this._editingItem;
+    }
+    get highlightedItemIds() {
+        return this._highlightedItemIds;
+    }
+    set items(value) {
+        this._items = value;
+        this._dataProvider.set(...value);
+        if (!this._preserveSelection) {
+            this._selection.clear();
+        }
+        if (this._editingItem && !this._items.find((x) => x.id === this._editingItem?.id)) {
+            this._editingItem = null;
+        }
+    }
+    set itemActions(value) {
+        this._itemActions = value;
+    }
+    set columns(value) {
+        this.reconcileColumns(value);
+    }
+    set editingItem(value) {
+        if (!this._items.find((x) => x.id === value?.id)) {
+            this._editingItem = null;
+        }
+        else {
+            this._editingItem = structuredClone($state.snapshot(value));
+        }
+    }
+    set highlightedItemIds(value) {
+        this._highlightedItemIds = value;
+    }
+    reconcileColumns = (newDefs) => {
+        // Save state from current columns
+        const stateMap = new Map();
+        for (const col of this._columns) {
+            stateMap.set(`${String(col.id)}:${col.type}`, {
+                hidden: col.hidden,
+                sortDirection: col.sortDirection
+            });
+        }
+        // Create new instances from definitions
+        const result = newDefs.map(this.mapColumn);
+        // Restore persisted state
+        for (const col of result) {
+            const state = stateMap.get(`${String(col.id)}:${col.type}`);
+            if (state) {
+                col.hidden = state.hidden;
+                col.sortDirection = state.sortDirection;
+            }
+        }
+        // Append actions column if needed
+        if (this._itemActions.length) {
+            const actionsColumn = new ResolvedColumn({ type: 'actions', centered: true, fixedCssWidth: Css.em(75) });
+            actionsColumn.headerView = new DynamicComponentModel({
+                component: TableHeader,
+                props: { column: { title: 'Actions' } }
+            });
+            result.push(actionsColumn);
+        }
+        this._columns = result;
+    };
+    mapColumn = (column) => {
+        const resolveSortableHeader = (resolved) => {
+            if (resolved.onSort) {
+                return new DynamicComponentModel({
+                    component: TableHeaderSortable,
+                    props: {
+                        column: resolved,
+                        on: {
+                            sortApplied: () => {
+                                for (const col of this._columns) {
+                                    if (col.uniqueId !== resolved.uniqueId) {
+                                        col.sortDirection = 'none';
+                                    }
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+            return new DynamicComponentModel({
+                component: TableHeader,
+                props: { column: resolved }
+            });
+        };
+        const resolveEditorColumn = (column) => {
+            switch (column.type) {
+                case 'text-input':
+                case 'select': {
+                    const resolved = new ResolvedColumn(column);
+                    resolved.headerView = new DynamicComponentModel({
+                        component: TableHeader,
+                        props: { column: resolved }
+                    });
+                    return resolved;
+                }
+                default: {
+                    Utils.assertUnreachable(column);
+                }
+            }
+        };
+        switch (column.type) {
+            case 'checkbox': {
+                const resolved = new ResolvedColumn({
+                    ...column,
+                    centered: true,
+                    fixedCssWidth: column.fixedCssWidth || Css.em(50)
+                });
+                resolved.headerView = new DynamicComponentModel({
+                    component: TableCheckboxHeader,
+                    props: { column: { title: '', data: this._dataProvider, selection: this._selection } }
+                });
+                return resolved;
+            }
+            case 'move-row': {
+                const resolved = new ResolvedColumn({
+                    ...column,
+                    centered: true,
+                    fixedCssWidth: column.fixedCssWidth || Css.em(75)
+                });
+                resolved.headerView = resolveSortableHeader(resolved);
+                return resolved;
+            }
+            case 'text': {
+                const resolved = new ResolvedColumn(column);
+                resolved.headerView = resolveSortableHeader(resolved);
+                if (column.editorColumn) {
+                    resolved.editorColumn = resolveEditorColumn(column.editorColumn);
+                }
+                return resolved;
+            }
+            default: {
+                const resolved = new ResolvedColumn(column);
+                resolved.headerView = resolveSortableHeader(resolved);
+                return resolved;
+            }
+        }
+    };
+}

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

@@ -0,0 +1,144 @@
+import type { Repository } from '../../core/repository';
+import type { BadgeColor } from '../badge';
+import type { ButtonSize, ButtonVariant } from '../button';
+import { DynamicComponentModel } from '../dynamic-component';
+import type { IconColor } from '../icon';
+import type { SelectOption } from '../selects';
+import type { ISchema } from 'yup';
+export type WithId = {
+    id: string;
+};
+export type IAnyTableColumn<T> = {
+    [P in keyof T]: IOneOfTableColumn<T, P>;
+}[keyof T];
+export type IOneOfTableColumn<T, K extends keyof T> = ITableBadgeColumn<T> | ITableButtonColumn<T> | ITableByColumn<T> | ITableCheckboxColumn | ITableCustomColumn<T> | ITableIconColumn<T> | ITableImageColumn<T> | ITableMoveRowColumn | ITableSelectColumn<T, K> | ITableTextColumn<T> | ITableTextInputColumn<T>;
+export type IEditorColumn<T> = ITableTextInputColumn<T> | ITableSelectColumn<T, keyof T>;
+export type TableColumnType = 'actions' | 'badge' | 'button' | 'by' | 'checkbox' | 'custom' | 'icon' | 'image' | 'move-row' | 'select' | 'text' | 'text-input';
+interface ITableColumnBase {
+    type: TableColumnType;
+    fixedCssWidth?: string;
+    centered?: boolean;
+}
+export interface ITableColumn<T> extends ITableColumnBase {
+    id: keyof T;
+    title: string;
+    onSort?: ((state: TableColumnSortDirection) => Promise<void>) | null;
+    sortDirection?: TableColumnSortDirection;
+    onClick?: ((item: T) => Promise<void> | void) | null;
+    hidden?: boolean;
+    hideable?: boolean;
+}
+export interface ITableActionsColumn extends ITableColumnBase {
+    type: 'actions';
+}
+export interface ITableBadgeColumn<T> extends ITableColumn<T> {
+    type: 'badge';
+    colorFactory?: ((item: T) => BadgeColor) | null;
+    valueFactory?: ((item: T) => string) | null;
+    roundedBadge?: boolean;
+}
+export interface ITableByColumn<T> extends ITableColumn<T> {
+    type: 'by';
+    valueFactory?: ((item: T) => Date) | null;
+    byValueFactory?: ((item: T) => {
+        id: string;
+        name: string;
+        handle: string;
+        image: string;
+    }) | null;
+    /** Returns href for the user link. If not provided, no link is rendered. */
+    hrefFactory?: ((by: {
+        id: string;
+        handle: string;
+    }) => string) | null;
+    /** Called when user clicks the avatar link. Use for SPA navigation. */
+    onNavigate?: ((by: {
+        id: string;
+        handle: string;
+    }) => void) | null;
+}
+export interface ITableButtonColumn<T> extends ITableColumn<T> {
+    type: 'button';
+    styleFactory?: ((item: T) => ButtonVariant) | null;
+    sizeFactory?: ((item: T) => ButtonSize) | null;
+    valueFactory?: ((item: T) => string) | null;
+}
+export interface ITableCheckboxColumn extends ITableColumnBase {
+    type: 'checkbox';
+}
+export interface ITableCustomColumn<T> extends ITableColumn<T> {
+    type: 'custom';
+    componentFactory: (item: T) => DynamicComponentModel;
+}
+export interface ITableIconColumn<T> extends ITableColumn<T> {
+    type: 'icon';
+    colorFactory?: ((item: T) => IconColor) | null;
+    iconSrcFactory?: ((item: T) => string) | null;
+    tooltipTextFactory?: ((item: T) => string) | null;
+}
+export interface ITableImageColumn<T> extends ITableColumn<T> {
+    type: 'image';
+    valueFactory?: ((item: T) => string) | null;
+    format?: TableImageColumnFormat;
+    coverAspectRatio?: number;
+    sizeCss?: string;
+}
+export interface ITableMoveRowColumn extends ITableColumnBase {
+    type: 'move-row';
+    disableFactory?: (() => boolean) | null;
+}
+export interface ITableSelectColumn<T, K extends keyof T> extends ITableColumn<T> {
+    id: K;
+    type: 'select';
+    valueFactory?: ((item: T) => T[K]) | null;
+    optionsFactory: (item: T) => SelectOption<T[K]>[];
+    placeholder?: string | null;
+    disabledFactory?: ((item: T) => boolean) | null;
+    visibilityFactory?: ((item: T) => boolean) | null;
+    allowReset?: boolean;
+    onSelected: (item: T, value: T[K] | null) => void;
+}
+export interface ITableTextColumn<T> extends ITableColumn<T> {
+    type: 'text';
+    format?: TableTextColumnFormat | null;
+    maxLines?: number | 'single-line-no-trim' | null;
+    valueFactory?: ((item: T) => string) | null;
+    editorColumn?: IEditorColumn<T> | null;
+}
+export interface ITableTextInputColumn<T> extends ITableColumn<T> {
+    type: 'text-input';
+    inputType?: 'text' | 'number' | null;
+    validationSchema?: ISchema<unknown> | null;
+    onValidated?: ((item: T, error: string) => void) | null;
+    onInput?: ((item: T, value: string) => void) | null;
+}
+export type TableTextColumnFormat = 'text' | 'html' | 'money' | 'date' | 'date-time';
+export type TableImageColumnFormat = 'circle' | 'square-contain' | 'square-cover';
+export type TableItemAction<T> = {
+    title: string;
+    icon?: string;
+    color?: IconColor;
+    action: (item: T) => void;
+    visibilityFactory?: (item: T) => boolean;
+};
+export type TableStyles = {
+    stickyHeader?: boolean;
+    actionsDropdownTopDirection?: boolean;
+};
+export type TableOrderByState<TOrder> = {
+    orderBy: TOrder;
+    ascendingOrder: boolean;
+};
+export type PageQuery<TOrder> = {
+    ascendingOrder: boolean;
+    fetchTotal: boolean;
+    orderBy: TOrder;
+    page: number;
+    perPage: number;
+};
+export type SelectionSettings<T extends WithId> = {
+    preserveSelection?: boolean;
+    repository?: Repository<T>;
+};
+export type TableColumnSortDirection = 'none' | 'asc' | 'desc';
+export {};

package/dist/ui/table/types.js

@@ -0,0 +1 @@
+import { DynamicComponentModel } from '../dynamic-component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -221,6 +221,10 @@
       "types": "./dist/ui/swipe-indicator/index.d.ts",
       "svelte": "./dist/ui/swipe-indicator/index.js"
     },
+    "./ui/table": {
+      "types": "./dist/ui/table/index.d.ts",
+      "svelte": "./dist/ui/table/index.js"
+    },
     "./ui/time-ago": {
       "types": "./dist/ui/time-ago/index.d.ts",
       "svelte": "./dist/ui/time-ago/index.js"