@ticatec/topside-elements 1.0.0

package/dist/data_table/parts/FixedHeaderPanel.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+    import type DataColumn from "../lib/DataColumn";
+    import type { IndicatorColumn } from "..";
+    import { type OnSelectAll, SelectionMode, type OnWidthChange } from "../UniDataTable";
+    import { OrderDirection } from "../lib/OrderDirection";
+    import i18nRes from "../../i18nRes";
+
+    interface Props {
+        columns: Array<DataColumn>;
+        indicatorColumn?: IndicatorColumn | null;
+        onWidthChange?: OnWidthChange;
+        rowHeight?: number;
+        headerHeight?: number;
+        onCellClick?: (col: DataColumn) => any;
+        orderColumn?: DataColumn;
+        orderDirection?: OrderDirection;
+        selectionMode?: SelectionMode;
+        onToggleSelectAll?: OnSelectAll;
+    }
+
+    let {
+        columns,
+        indicatorColumn,
+        onWidthChange,
+        rowHeight,
+        headerHeight,
+        onCellClick,
+        orderColumn,
+        orderDirection,
+        selectionMode = SelectionMode.None,
+        onToggleSelectAll,
+    }: Props = $props();
+
+    let checked = $state(false);
+    let indeterminate = $state(false);
+
+    const handleHeaderCheckBoxChange = (e: Event) => {
+        const newValue = (e.target as HTMLInputElement).checked;
+        checked = newValue;
+        indeterminate = false;
+        onToggleSelectAll?.(newValue);
+    };
+
+    // React to selectionMode changes — replaces the old `$:` block
+    $effect(() => {
+        if (selectionMode == SelectionMode.All) {
+            indeterminate = false;
+            checked = true;
+        } else if (selectionMode == SelectionMode.None) {
+            indeterminate = false;
+            checked = false;
+        } else {
+            indeterminate = true;
+        }
+    });
+
+    let resizeCol = $state.raw<DataColumn | null>(null);
+    let startX = $state(0);
+    let startWidth = $state(0);
+
+    const handleResizeMouseDown = (col: DataColumn) => (event: MouseEvent) => {
+        if (col.resizable) {
+            resizeCol = col;
+            startX = event.clientX;
+            startWidth = resizeCol.width;
+
+            document.body.style.cursor = 'col-resize';
+            window.addEventListener('mousemove', onMouseMove);
+            window.addEventListener('mouseup', onMouseUp);
+        }
+    };
+
+    const onMouseMove = (event: MouseEvent) => {
+        if (resizeCol !== null) {
+            const diff = event.clientX - startX;
+            let w = startWidth + diff;
+            if (w > (resizeCol.minWidth ?? 50)) {
+                resizeCol.width = startWidth + diff;
+            }
+        }
+        onWidthChange?.();
+    };
+
+    function onMouseUp() {
+        resizeCol = null;
+        document.body.style.cursor = 'default';
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    }
+
+    const handleHeaderKeyDown = (column: DataColumn) => (e: KeyboardEvent) => {
+        if (column.compareFunction != null && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            onCellClick?.(column);
+        }
+    };
+</script>
+
+<div class="header-row" style="height: {headerHeight}px">
+    {#if indicatorColumn}
+        <div class="data-cell" style="width: {indicatorColumn.width}px">
+            {#if indicatorColumn?.selectable === true}
+                <div style="text-align: center" class="vertical-center">
+                    <input type="checkbox" tabindex="-1" checked={checked} {indeterminate} onchange={handleHeaderCheckBoxChange} />
+                </div>
+            {:else}
+                <div style="text-align: center" class="vertical-center">
+                    {#if indicatorColumn.showRowNo}
+                        <span>{i18nRes.dataTable.rowNo()}</span>
+                    {/if}
+                </div>
+            {/if}
+            <div class="header-cell-divider"></div>
+        </div>
+    {/if}
+    {#each columns as column, index (index)}
+        <div class="fz_col-{index} data-cell" class:sortable={column.compareFunction != null} style="text-align: center">
+            <!-- role/tabindex are only ever both set together (sortable columns);
+                 svelte-check can't verify that pairing statically across the ternary. -->
+            <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+            <div
+                class:sortable={column.compareFunction != null}
+                onclick={() => onCellClick?.(column)}
+                onkeydown={handleHeaderKeyDown(column)}
+                role={column.compareFunction != null ? 'button' : undefined}
+                tabindex={column.compareFunction != null ? 0 : undefined}
+                aria-sort={column.field === orderColumn?.field
+                    ? (orderDirection === OrderDirection.Ascending ? 'ascending' : 'descending')
+                    : undefined}
+                class="vertical-center"
+            >
+                <span>{column.title}</span>
+                {#if column.field === orderColumn?.field}
+                    <i
+                        style="margin-left: 2px; font-size: 12px; position: absolute; top: 0; right: 4px"
+                        class={orderDirection === OrderDirection.Ascending
+                            ? 'icon_google_keyboard_arrow_up'
+                            : 'icon_google_keyboard_arrow_down'}
+                    ></i>
+                {/if}
+            </div>
+            <div
+                class="header-cell-divider"
+                class:resizer={column.resizable}
+                role={column.resizable ? 'separator' : undefined}
+                aria-orientation={column.resizable ? 'vertical' : undefined}
+                onmousedown={handleResizeMouseDown(column)}
+            ></div>
+        </div>
+    {/each}
+</div>

package/dist/data_table/parts/FixedHeaderPanel.svelte.d.ts

@@ -0,0 +1,19 @@
+import type DataColumn from "../lib/DataColumn";
+import type { IndicatorColumn } from "..";
+import { type OnSelectAll, SelectionMode, type OnWidthChange } from "../UniDataTable";
+import { OrderDirection } from "../lib/OrderDirection";
+interface Props {
+    columns: Array<DataColumn>;
+    indicatorColumn?: IndicatorColumn | null;
+    onWidthChange?: OnWidthChange;
+    rowHeight?: number;
+    headerHeight?: number;
+    onCellClick?: (col: DataColumn) => any;
+    orderColumn?: DataColumn;
+    orderDirection?: OrderDirection;
+    selectionMode?: SelectionMode;
+    onToggleSelectAll?: OnSelectAll;
+}
+declare const FixedHeaderPanel: import("svelte").Component<Props, {}, "">;
+type FixedHeaderPanel = ReturnType<typeof FixedHeaderPanel>;
+export default FixedHeaderPanel;

package/dist/data_table/parts/FixedRow.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import type TableRow from "./TableRow";
+    import type { OnRowExpand, OnRowSelect } from "../UniDataTable";
+    import DataCell from "./DataCell.svelte";
+    import type DataColumn from "../lib/DataColumn";
+    import type { IndicatorColumn } from "..";
+
+    interface Props {
+        selectable?: boolean;
+        rowNo: number;
+        rowIndex: number;
+        cols?: Array<DataColumn>;
+        expandable?: boolean;
+        row: TableRow;
+        alternative: boolean;
+        onRowExpand?: OnRowExpand;
+        onRowSelectChange?: (rowIndex: number, value: boolean) => void;
+        selected?: boolean;
+        expandRow?: any;
+        rowHeight?: number;
+        indicatorColumn?: IndicatorColumn | null;
+    }
+
+    let {
+        selectable = false,
+        rowNo,
+        rowIndex,
+        cols = [],
+        expandable = false,
+        row,
+        alternative,
+        onRowExpand,
+        onRowSelectChange,
+        selected = false,
+        expandRow = null,
+        rowHeight,
+        indicatorColumn = null,
+    }: Props = $props();
+
+    let style = $derived(rowHeight == null ? '' : `height: ${rowHeight}px`);
+
+    const showInlineData = (e: MouseEvent) => {
+        onRowExpand?.(row);
+        e.preventDefault();
+        e.stopPropagation();
+    };
+
+    const handleExpandKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            e.stopPropagation();
+            onRowExpand?.(row);
+        }
+    };
+
+    const handleSelectChange = (e: Event) => {
+        const checked = (e.target as HTMLInputElement).checked;
+        onRowSelectChange?.(rowIndex, checked);
+    };
+</script>
+
+<div class="data-row" class:alternative style="width: 100%; {style}">
+    {#if indicatorColumn}
+        <div class="data-cell indicator-cell" style="width: {indicatorColumn.width}px">
+            {#if selectable}
+                <input type="checkbox" checked={selected} onchange={handleSelectChange} />
+            {/if}
+            {#if indicatorColumn.showRowNo}
+                <div style="margin-left: 4px; flex: 1 1 auto; text-align: center">
+                    <span>{rowNo}</span>
+                </div>
+            {/if}
+            {#if expandable}
+                <div class="expand-icon" style="flex: 0 0 auto">
+                    <i
+                        class={row == expandRow ? 'icon_google_folder' : 'icon_google_folder_open'}
+                        role="button" tabindex="0" aria-label={row == expandRow ? 'Collapse row' : 'Expand row'}
+                        onclick={showInlineData}
+                        onkeydown={handleExpandKeyDown}
+                    ></i>
+                </div>
+            {/if}
+        </div>
+    {/if}
+    {#each cols as column, colIdx (colIdx)}
+        <DataCell frozen={true} {colIdx} {column} data={row.data} />
+    {/each}
+</div>

package/dist/data_table/parts/FixedRow.svelte.d.ts

@@ -0,0 +1,22 @@
+import type TableRow from "./TableRow";
+import type { OnRowExpand } from "../UniDataTable";
+import type DataColumn from "../lib/DataColumn";
+import type { IndicatorColumn } from "..";
+interface Props {
+    selectable?: boolean;
+    rowNo: number;
+    rowIndex: number;
+    cols?: Array<DataColumn>;
+    expandable?: boolean;
+    row: TableRow;
+    alternative: boolean;
+    onRowExpand?: OnRowExpand;
+    onRowSelectChange?: (rowIndex: number, value: boolean) => void;
+    selected?: boolean;
+    expandRow?: any;
+    rowHeight?: number;
+    indicatorColumn?: IndicatorColumn | null;
+}
+declare const FixedRow: import("svelte").Component<Props, {}, "">;
+type FixedRow = ReturnType<typeof FixedRow>;
+export default FixedRow;

package/dist/data_table/parts/HrefCell.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import type HrefLink from "../lib/HrefLink";
+    import type { HrefBuilder } from "../lib/HrefLink";
+
+    interface Props {
+        data: any;
+        href: HrefBuilder;
+    }
+
+    let { data, href }: Props = $props();
+
+    let list = $derived.by(() => {
+        let h = href(data);
+        return Array.isArray(h) ? h : [h];
+    });
+</script>
+
+<div style="display: flex; flex-direction: row; gap: 8px; justify-content: center">
+    {#each list as item, idx (idx)}
+        {#if typeof item == 'string'}
+            <span>{item}</span>
+        {:else}
+            <button type="button" class="link-style" onclick={(e) => { e.preventDefault(); item.handler(); }}>{item.label}</button>
+        {/if}
+    {/each}
+</div>
+
+<style>
+    button.link-style {
+        background: none;
+        border: none;
+        color: blue;
+        text-decoration: underline;
+        cursor: pointer;
+        font: inherit;
+        padding: 0;
+    }
+
+    button.link-style:focus {
+        outline: none;
+    }
+
+    button.link-style:active {
+        outline: none;
+        box-shadow: none;
+    }
+</style>

package/dist/data_table/parts/HrefCell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HrefBuilder } from "../lib/HrefLink";
+interface Props {
+    data: any;
+    href: HrefBuilder;
+}
+declare const HrefCell: import("svelte").Component<Props, {}, "">;
+type HrefCell = ReturnType<typeof HrefCell>;
+export default HrefCell;

package/dist/data_table/parts/PopupMenu.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    import { clickOutside } from "../../overlay/common/topside-utils";
+    import { onDestroy, onMount, type Snippet } from "svelte";
+
+    interface Props {
+        onclose?: () => void;
+        parentRect: DOMRect;
+        children?: Snippet;
+    }
+
+    let { onclose, parentRect, children }: Props = $props();
+
+    const close = () => {
+        onclose?.();
+    };
+
+    let panel: HTMLDivElement;
+    let rect: DOMRect;
+    let resizeObserver: ResizeObserver;
+    let style = $state('top: 50%;');
+
+    const checkPosition = () => {
+        rect = panel.getBoundingClientRect();
+        if (rect.y + 10 > parentRect.height) {
+            style = 'bottom: 50%;';
+        } else {
+            style = 'top: 50%;';
+        }
+    };
+
+    /**
+     * Svelte action: fires callback when a click lands outside the given node.
+     */
+    function outerClick(node: HTMLElement, callback: () => void) {
+        const handleClick = (event: MouseEvent) => {
+            if (!node.contains(event.target as Node)) {
+                callback();
+            }
+        };
+        document.addEventListener('click', handleClick, true);
+        onDestroy(() => {
+            document.removeEventListener('click', handleClick, true);
+        });
+        return {
+            destroy() {
+                document.removeEventListener('click', handleClick, true);
+            },
+        };
+    }
+
+    onMount(() => {
+        resizeObserver = new ResizeObserver(() => {
+            checkPosition();
+        });
+        resizeObserver.observe(panel);
+        checkPosition();
+    });
+
+    onDestroy(() => {
+        resizeObserver?.disconnect();
+    });
+</script>
+
+<div
+    bind:this={panel}
+    style="position: absolute; right: 8px; {style}; background-color: #FFFFFF; border: 1px solid #e1e1e1; z-index: 5"
+    use:clickOutside
+    use:outerClick={close}
+>
+    {@render children?.()}
+</div>

package/dist/data_table/parts/PopupMenu.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Snippet } from "svelte";
+interface Props {
+    onclose?: () => void;
+    parentRect: DOMRect;
+    children?: Snippet;
+}
+declare const PopupMenu: import("svelte").Component<Props, {}, "">;
+type PopupMenu = ReturnType<typeof PopupMenu>;
+export default PopupMenu;

package/dist/data_table/parts/TableHeaderPanel.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+    import { OrderDirection } from "../lib/OrderDirection";
+    import { type OnWidthChange } from "../UniDataTable";
+    import type DataColumn from "../lib/DataColumn";
+
+    interface Props {
+        scrollLeft?: number;
+        onWidthChange?: OnWidthChange;
+        dataCols?: Array<any>;
+        width?: number;
+        whitespace?: boolean;
+        onCellClick?: (col: DataColumn) => any;
+        orderColumn?: DataColumn;
+        orderDirection?: OrderDirection;
+        headerHeight?: number;
+    }
+
+    let {
+        scrollLeft = 0,
+        onWidthChange,
+        dataCols = [],
+        width = 0,
+        whitespace = false,
+        onCellClick,
+        orderColumn,
+        orderDirection,
+        headerHeight,
+    }: Props = $props();
+
+    let resizeCol = $state.raw<DataColumn | null>(null);
+    let startX = $state(0);
+    let startWidth = $state(0);
+
+    const handleResizeMouseDown = (col: DataColumn) => (event: MouseEvent) => {
+        if (col.resizable) {
+            resizeCol = col;
+            startX = event.clientX;
+            startWidth = resizeCol.width;
+
+            document.body.style.cursor = 'col-resize';
+            window.addEventListener('mousemove', onMouseMove);
+            window.addEventListener('mouseup', onMouseUp);
+        }
+    };
+
+    const onMouseMove = (event: MouseEvent) => {
+        if (resizeCol !== null) {
+            const diff = event.clientX - startX;
+            let w = startWidth + diff;
+            if (w > (resizeCol.minWidth ?? 50)) {
+                resizeCol.width = startWidth + diff;
+            }
+            onWidthChange?.();
+        }
+    };
+
+    function onMouseUp() {
+        resizeCol = null;
+        document.body.style.cursor = 'default';
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    }
+
+    const handleHeaderKeyDown = (col: DataColumn) => (e: KeyboardEvent) => {
+        if (col.compareFunction != null && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            onCellClick?.(col);
+        }
+    };
+</script>
+
+<div class="header-row" style="height: {headerHeight}px">
+    <div style="left: {-scrollLeft}px; width: {width}px">
+        {#each dataCols ?? [] as col, index (index)}
+            <div class="col-{index} data-cell" class:sortable={col.compareFunction != null} class:whitespace>
+                <!-- role/tabindex are only ever both set together (sortable columns);
+                     svelte-check can't verify that pairing statically across the ternary. -->
+                <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+                <div
+                    class:sortable={col.compareFunction != null}
+                    onclick={() => onCellClick?.(col)}
+                    onkeydown={handleHeaderKeyDown(col)}
+                    role={col.compareFunction != null ? 'button' : undefined}
+                    tabindex={col.compareFunction != null ? 0 : undefined}
+                    aria-sort={col.field === orderColumn?.field
+                        ? (orderDirection === OrderDirection.Ascending ? 'ascending' : 'descending')
+                        : undefined}
+                    class="vertical-center"
+                >
+                    <span>{col.title}</span>
+                    {#if col.field === orderColumn?.field}
+                        <i
+                            style="margin-left: 2px; font-size: 12px; position: absolute; top: 0; right: 4px"
+                            class={orderDirection === OrderDirection.Ascending
+                                ? 'icon_google_keyboard_arrow_up'
+                                : 'icon_google_keyboard_arrow_down'}
+                        ></i>
+                    {/if}
+                </div>
+                <div
+                    class="header-cell-divider"
+                    class:resizer={col.resizable}
+                    role={col.resizable ? 'separator' : undefined}
+                    aria-orientation={col.resizable ? 'vertical' : undefined}
+                    onmousedown={handleResizeMouseDown(col)}
+                ></div>
+            </div>
+        {/each}
+        <!-- Filler takes the :last-child spot so the last real column keeps its right border. -->
+        <div class="data-cell" style="border-right: none; width: unset"></div>
+    </div>
+</div>

package/dist/data_table/parts/TableHeaderPanel.svelte.d.ts

@@ -0,0 +1,17 @@
+import { OrderDirection } from "../lib/OrderDirection";
+import { type OnWidthChange } from "../UniDataTable";
+import type DataColumn from "../lib/DataColumn";
+interface Props {
+    scrollLeft?: number;
+    onWidthChange?: OnWidthChange;
+    dataCols?: Array<any>;
+    width?: number;
+    whitespace?: boolean;
+    onCellClick?: (col: DataColumn) => any;
+    orderColumn?: DataColumn;
+    orderDirection?: OrderDirection;
+    headerHeight?: number;
+}
+declare const TableHeaderPanel: import("svelte").Component<Props, {}, "">;
+type TableHeaderPanel = ReturnType<typeof TableHeaderPanel>;
+export default TableHeaderPanel;

package/dist/data_table/parts/TableRow.d.ts

@@ -0,0 +1,4 @@
+export default class TableRow {
+    readonly data: any;
+    constructor(data: any);
+}

package/dist/data_table/parts/TableRow.js

@@ -0,0 +1,6 @@
+export default class TableRow {
+    data;
+    constructor(data) {
+        this.data = data;
+    }
+}

package/dist/data_table/parts/TableRows.d.ts

@@ -0,0 +1,7 @@
+import TableRow from "./TableRow";
+export default class TableRows {
+    private _rows;
+    constructor();
+    set data(list: Array<any>);
+    get rows(): Array<TableRow>;
+}

package/dist/data_table/parts/TableRows.js

@@ -0,0 +1,13 @@
+import TableRow from "./TableRow";
+export default class TableRows {
+    _rows;
+    constructor() {
+        this._rows = [];
+    }
+    set data(list) {
+        this._rows = list.map(item => { return new TableRow(item); });
+    }
+    get rows() {
+        return this._rows;
+    }
+}

package/dist/data_table/parts/TextCell.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import type DataColumn from "../lib/DataColumn";
+    import tableUtils from "../lib/TableUtils";
+
+    interface Props {
+        column: DataColumn;
+        data: any;
+    }
+
+    let { column, data }: Props = $props();
+
+    let text = $derived.by(() => {
+        let value = tableUtils.extractFieldValue(data, column.field);
+        if (column.formatter) {
+            return column.formatter(value);
+        }
+        return value ?? '';
+    });
+
+    let renderAsHtml = $derived(column.renderHTML == true);
+</script>
+
+{#if renderAsHtml == true}
+    {@html text}
+{:else}
+    <span>{text}</span>
+{/if}

package/dist/data_table/parts/TextCell.svelte.d.ts

@@ -0,0 +1,8 @@
+import type DataColumn from "../lib/DataColumn";
+interface Props {
+    column: DataColumn;
+    data: any;
+}
+declare const TextCell: import("svelte").Component<Props, {}, "">;
+type TextCell = ReturnType<typeof TextCell>;
+export default TextCell;

package/dist/data_table/parts/TreeRootCell.svelte

@@ -0,0 +1,2 @@
+<script lang="ts">
+</script>

package/dist/data_table/parts/TreeRootCell.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TreeRootCell: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TreeRootCell = InstanceType<typeof TreeRootCell>;
+export default TreeRootCell;