@ticatec/uniface-element 0.1.9

package/dist/data-table/index.js

@@ -0,0 +1,2 @@
+import DataTable from "./DataTable.svelte";
+export default DataTable;

package/dist/data-table/lib/ActionsColumn.d.ts

@@ -0,0 +1,15 @@
+import type { GetRowActions } from "./RowAction";
+export default interface ActionsColumn {
+    /**
+     * 栏标题
+     */
+    title: string;
+    /**
+     * 宽度
+     */
+    width: number;
+    /**
+     *
+     */
+    getActions: GetRowActions;
+}

package/dist/data-table/lib/ActionsColumn.js

@@ -0,0 +1 @@
+export {};

package/dist/data-table/lib/AdvColumn.d.ts

@@ -0,0 +1,36 @@
+import type { HrefBuilder } from "./HrefLink";
+import type { CellHint, FormatCell } from "./FormatCell";
+export default interface AdvColumn {
+    /**
+     * 对齐方式，文本，可以取值：left, center, right
+     */
+    align: string;
+    /**
+     * 对应的字段/属性名
+     */
+    field?: string;
+    /**
+     * 超链接设置
+     */
+    href?: HrefBuilder | null;
+    /**
+     * 单元格转换函数
+     */
+    formatter?: FormatCell;
+    /**
+     * 是否忽略html的转义符
+     */
+    escapeHTML: boolean;
+    /**
+     * 待显示的提示
+     */
+    hint?: CellHint;
+    /**
+     * 渲染器
+     */
+    render?: any;
+    /**
+     * 宽度
+     */
+    width: number;
+}

package/dist/data-table/lib/AdvColumn.js

@@ -0,0 +1 @@
+export {};

package/dist/data-table/lib/CommonHeaderCell.d.ts

@@ -0,0 +1,37 @@
+import type { CompareFunction } from "./CompareFunction";
+export default interface CommonHeaderCell {
+    /**
+     * 栏目的标题
+     */
+    text: string;
+    /**
+     * 合并的行数
+     */
+    rowSpan: number;
+    /**
+     * 所做的列
+     */
+    col: number;
+    /**
+     * 所在的行
+     */
+    row: number;
+}
+export interface DataHeaderCell extends CommonHeaderCell {
+    /**
+     * 宽度
+     */
+    width: number;
+    /**
+     *
+     */
+    field?: string;
+    /**
+     * 是否可以更改大小
+     */
+    resizable?: boolean;
+    /**
+     * 排序的比较函数
+     */
+    compareFunction?: CompareFunction;
+}

package/dist/data-table/lib/CommonHeaderCell.js

@@ -0,0 +1 @@
+export {};

package/dist/data-table/lib/CompareFunction.d.ts

@@ -0,0 +1,3 @@
+export type CompareFunction = (o1: any, o2: any) => number;
+declare const compareObject: CompareFunction;
+export { compareObject };

package/dist/data-table/lib/CompareFunction.js

@@ -0,0 +1,2 @@
+const compareObject = (o1, o2) => o1 == o2 ? 0 : o1 < o2 ? -1 : 1;
+export { compareObject };

package/dist/data-table/lib/DataColumn.d.ts

@@ -0,0 +1,58 @@
+import type { CellHint, FormatCell } from "./FormatCell";
+import type { HrefBuilder } from "./HrefLink";
+import type { CompareFunction } from "./CompareFunction";
+export default interface DataColumn {
+    /**
+     * 列头文字
+     */
+    text: string;
+    /**
+     * 对应的字段/属性名
+     */
+    field?: string;
+    /**
+     * 是否冻结在数据表中，如果前面的frozen是false，那么就无效
+     */
+    frozen?: boolean;
+    /**
+     * 对齐方式
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     *
+     */
+    width: number;
+    minWidth?: number;
+    /**
+     * 单元格转换函数
+     */
+    formatter?: FormatCell;
+    /**
+     * 是否忽略html的转义符
+     */
+    escapeHTML?: boolean;
+    /**
+     * 超链接设置
+     */
+    href?: HrefBuilder;
+    /**
+     * 是否生产hint
+     */
+    hint?: CellHint;
+    /**
+     * 渲染器
+     */
+    render?: any;
+    /**
+     *
+     */
+    visible?: boolean;
+    /**
+     *
+     */
+    resizable?: boolean;
+    /**
+     *
+     */
+    compareFunction?: CompareFunction;
+}

package/dist/data-table/lib/DataColumn.js

@@ -0,0 +1 @@
+export {};

package/dist/data-table/lib/FixedColumns.d.ts

@@ -0,0 +1,15 @@
+import type { IndicatorColumn } from "..";
+import type DataColumn from "./DataColumn";
+/**
+ * 数据表左边的固定栏
+ */
+export default interface FixedColumns {
+    /**
+     * 指示栏，用于选中器，行号，展开图标
+     */
+    indicator: IndicatorColumn;
+    /**
+     * 固定的数据列
+     */
+    columns: Array<DataColumn>;
+}

package/dist/data-table/lib/FixedColumns.js

@@ -0,0 +1 @@
+export {};

package/dist/data-table/lib/FormatCell.d.ts

@@ -0,0 +1,2 @@
+export type FormatCell = (value: any) => string;
+export type CellHint = (value: any) => string;

package/dist/data-table/lib/FormatCell.js

@@ -0,0 +1 @@
+export {};

package/dist/data-table/lib/HrefLink.d.ts

@@ -0,0 +1,12 @@
+export type HrefBuilder = (item: any) => Array<HrefLink | string> | HrefLink;
+export type HrefAction = () => void;
+export default interface HrefLink {
+    /**
+     * 显示超链接的文字
+     */
+    text: string;
+    /**
+     * 点击的处理函数
+     */
+    action: HrefAction;
+}

package/dist/data-table/lib/HrefLink.js

@@ -0,0 +1 @@
+export {};

package/dist/data-table/lib/IndicatorColumn.d.ts

@@ -0,0 +1,27 @@
+export default interface IndicatorColumn {
+    /**
+     *
+     */
+    width: number;
+    /**
+     *
+     */
+    selectable: boolean;
+    /**
+     *
+     */
+    buildInlineComponent?: (data: any) => Promise<any>;
+    /**
+     *
+     * @param ex
+     */
+    getInlineError?: (ex: Error) => string;
+    /**
+     * 读取数据的指示信息
+     */
+    loadingIndicator?: string;
+    /**
+     *  空数据指示信息
+     */
+    emptyIndicator?: string;
+}

package/dist/data-table/lib/IndicatorColumn.js

@@ -0,0 +1 @@
+export {};

package/dist/data-table/lib/OrderDirection.d.ts

@@ -0,0 +1,4 @@
+export declare enum OrderDirection {
+    Ascending = 0,
+    Descending = 1
+}

package/dist/data-table/lib/OrderDirection.js

@@ -0,0 +1,5 @@
+export var OrderDirection;
+(function (OrderDirection) {
+    OrderDirection[OrderDirection["Ascending"] = 0] = "Ascending";
+    OrderDirection[OrderDirection["Descending"] = 1] = "Descending";
+})(OrderDirection || (OrderDirection = {}));

package/dist/data-table/lib/RowAction.d.ts

@@ -0,0 +1,21 @@
+/**
+ *
+ */
+export type ActionFunction = (item: any) => void;
+/**
+ *
+ */
+export default interface RowAction {
+    /**
+     *
+     */
+    label: string;
+    /**
+     *
+     */
+    callback: ActionFunction;
+}
+/**
+ *
+ */
+export type GetRowActions = (item: any) => Array<RowAction>;

package/dist/data-table/lib/RowAction.js

@@ -0,0 +1 @@
+export {};

package/dist/data-table/lib/TabContext.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    isDebugEnable: () => boolean;
+};
+export default _default;

package/dist/data-table/lib/TabContext.js

@@ -0,0 +1,4 @@
+let debugEnable = false;
+const isDebugEnable = () => debugEnable;
+const setDebugEnable = (value) => { debugEnable = value; };
+export default { isDebugEnable };

package/dist/data-table/lib/TableColumns.d.ts

@@ -0,0 +1,9 @@
+import type DataColumn from "./DataColumn";
+export default class TableColumns {
+    private _columns;
+    constructor(columns: Array<DataColumn>);
+    /**
+     * 获取当前所有可视的列
+     */
+    get columns(): boolean[];
+}

package/dist/data-table/lib/TableColumns.js

@@ -0,0 +1,12 @@
+export default class TableColumns {
+    _columns;
+    constructor(columns) {
+        this._columns = columns;
+    }
+    /**
+     * 获取当前所有可视的列
+     */
+    get columns() {
+        return this._columns.map(item => item.visible == true);
+    }
+}

package/dist/data-table/lib/TableUtils.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    extractFieldValue: (data: any, field?: string) => any;
+};
+export default _default;

package/dist/data-table/lib/TableUtils.js

@@ -0,0 +1,18 @@
+/**
+ * 根据字段名获取对于的值，支持"."嵌套获取
+ * @param data
+ * @param field
+ */
+const extractFieldValue = (data, field) => {
+    let v = data;
+    if (field != null) {
+        let attrs = field.split(".");
+        for (let attr of attrs) {
+            v = v == null ? null : v[attr];
+        }
+    }
+    return v;
+};
+export default {
+    extractFieldValue
+};

package/dist/data-table/lib/clickOutSide.d.ts

@@ -0,0 +1,3 @@
+export declare function clickOutside(node: Node): {
+    destroy(): void;
+};

package/dist/data-table/lib/clickOutSide.js

@@ -0,0 +1,16 @@
+export function clickOutside(node) {
+    const handleClick = (event) => {
+        // @ts-ignore
+        if (node && !node.contains(event.target) && !event.defaultPrevented) {
+            node.dispatchEvent(
+            // @ts-ignore
+            new CustomEvent('outerClick', node));
+        }
+    };
+    document.addEventListener('click', handleClick, true);
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        }
+    };
+}

package/dist/data-table/parts/ActionsPanel.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+
+    import ActionsRow from "./ActionsRow.svelte";
+    import type {ActionsColumn} from "..";
+    import type TableRow from "./TableRow";
+    import {onDestroy, onMount} from "svelte";
+
+    export let actionsColumn: ActionsColumn;
+    export let scrollTop: number = 0;
+    export let rows: Array<TableRow>;
+
+    export let inlineRowHeight: number = 0;
+
+    export let expandRow: TableRow;
+
+    const handleActionPanelScroll = (e: Event) => {
+        scrollTop = e.target?.scrollTop;
+    }
+
+    let scrollPanel: any;
+
+    $: if (scrollTop > -1) {
+        if (scrollPanel) {
+            scrollPanel.scrollTop = scrollTop
+        }
+    }
+
+    let resizeObserver: ResizeObserver;
+    let panel: any;
+    let rect: DOMRect;
+
+    onMount(async () => {
+        resizeObserver = new ResizeObserver(() => {
+            rect = panel.getBoundingClientRect();
+        });
+        resizeObserver.observe(panel);
+    });
+
+    onDestroy(() => {
+        resizeObserver.disconnect();
+    });
+
+
+</script>
+
+<div class="action-panel" bind:this={panel}  style="user-select: none; width: {actionsColumn.width}px;">
+    <div bind:this={scrollPanel} class="scroll-panel" on:scroll|passive={handleActionPanelScroll}>
+        {#each rows as row, idx}
+            <ActionsRow {row} parentRect={rect} alternative={idx % 2 == 1} width={actionsColumn.width} actions={actionsColumn.getActions(row)}/>
+            {#if row == expandRow}
+                <div class="inline-panel" style="height: {inlineRowHeight??0}px">
+                </div>
+            {/if}
+        {/each}
+    </div>
+    <div class="bottom-mask-overlay">
+        <!-- 用于匹配中间数据区域的滚动条 -->
+    </div>
+</div>

package/dist/data-table/parts/ActionsPanel.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { ActionsColumn } from "..";
+import type TableRow from "./TableRow";
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ActionsPanel: $$__sveltets_2_IsomorphicComponent<{
+    actionsColumn: ActionsColumn;
+    scrollTop?: number;
+    rows: Array<TableRow>;
+    inlineRowHeight?: number;
+    expandRow: TableRow;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ActionsPanel = InstanceType<typeof ActionsPanel>;
+export default ActionsPanel;

package/dist/data-table/parts/ActionsRow.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+
+    import type RowAction from "../lib/RowAction";
+    import {TextButton} from "../../button";
+    import type TableRow from "./TableRow";
+    import {onDestroy, onMount, tick} from "svelte";
+    import utils from "../../common/utils";
+    import PopupMenu from "./PopupMenu.svelte";
+
+
+    export let row: TableRow;
+    export let actions: Array<RowAction>;
+    export let alternative: boolean;
+    export let parentRect: DOMRect;
+
+    export let width: number;
+
+    let actionList: Array<RowAction> = [...actions]
+    let popupList: Array<RowAction> = [];
+
+
+    let cell: any;
+    let showPopup: boolean = false;
+
+
+    let isOverflowing = false; // 是否溢出
+    let resizeObserver: ResizeObserver;
+
+    onMount(async () => {
+        resizeObserver = new ResizeObserver(() => {
+            // 每次 div 尺寸变化时，更新 clientWidth
+            //opWidth = hiddenCell.clientWidth;
+            checkOverflow();
+        });
+        resizeObserver.observe(cell);
+    });
+
+    onDestroy(() => {
+        resizeObserver.disconnect();
+    });
+
+    const checkOverflow = async () => {
+        if (actions.length > 0) {
+            await tick();
+            while (cell == null) {
+                await tick();
+            }
+            isOverflowing = width < cell.clientWidth;
+            while (actionList.length > 0 && isOverflowing) {
+                let action = actionList.pop();
+                if (action) {
+                    popupList = [...popupList, action];
+                }
+                actionList = [...actionList];
+                await tick();
+                isOverflowing = width < cell.clientWidth + 8;
+            }
+        } else {
+            isOverflowing = false;
+        }
+    }
+
+    let enableClick: boolean = true;
+    const showPopupMenu = async (e: MouseEvent) => {
+        e.stopPropagation();
+        if (enableClick) {
+            enableClick = false;
+            await utils.sleep(0.1);
+            showPopup = true;
+            await utils.sleep(0.1);
+            enableClick = true;
+        }
+    }
+
+    $: if (actions) {
+        actionList = [...actions];
+        popupList = [];
+        checkOverflow();
+    }
+
+</script>
+<div class="table-row" class:alternative style="position: relative; width: {width}px; height: 36px; display: block;">
+    <div bind:this={cell}
+         style="width: max-content; overflow-x: auto; white-space: nowrap; top: 50%; position: relative; transform: translateY(-50%);">
+        {#each actionList as action}
+            <TextButton style="flex-shrink: 0; top: 0" size="mini" type="primary" label={action.label} onClick={()=>action.callback(row.data)}/>
+        {/each}
+        {#if popupList.length > 0}
+            <TextButton size="mini" type="primary" style="flex-shrink: 0; top: 0" label="..." onClick={showPopupMenu}/>
+        {/if}
+    </div>
+
+    {#if showPopup}
+        <PopupMenu {parentRect} closeCallback={()=>{showPopup = false}}>
+            <div style="padding: 4px 6px; box-sizing: border-box; background-color: #ffffff;">
+                {#each popupList as action}
+                    <div class="action-popover" style="padding: 4px 6px">
+                        <TextButton size="mini" type="primary" label={action.label}
+                                    onClick={()=>{action.callback?.(row.data); showPopup=false}}/>
+                    </div>
+                {/each}
+            </div>
+        </PopupMenu>
+    {/if}
+</div>

package/dist/data-table/parts/ActionsRow.svelte.d.ts

@@ -0,0 +1,26 @@
+import type RowAction from "../lib/RowAction";
+import type TableRow from "./TableRow";
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ActionsRow: $$__sveltets_2_IsomorphicComponent<{
+    row: TableRow;
+    actions: Array<RowAction>;
+    alternative: boolean;
+    parentRect: DOMRect;
+    width: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ActionsRow = InstanceType<typeof ActionsRow>;
+export default ActionsRow;