@ticatec/uniface-element 0.1.9

package/dist/common-editor/NumberInput.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import utils from "../common/utils";
+    import {tick} from "svelte";
+
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let style: string = '';
+    export let value: number | null;
+    export let precision: number | null = null;
+    export let placeholder: string;
+    export let allowNegative: boolean = false;
+    export let max: number | null = null;
+    export let min: number | null = null;
+    export let onChange: OnChangeHandler<number | null> = null as unknown as OnChangeHandler<number | null>;
+
+    export const setFocus = () => {
+        editor.focus();
+    }
+
+    const ctrlKeys: Array<string> = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+
+    let regex: RegExp;
+
+    let editor: any;
+
+    const handleBlurEvent = (e: FocusEvent) => {
+        if (!readonly) {
+            value = parseFloat(textValue);
+            if (isNaN(value)) {
+                value = null;
+            }
+            if (value != null) {
+                if (min != null && value != null && value < min) {
+                    value = min;
+                }
+                if (max != null && value != null && value > max) {
+                    value = max;
+                }
+                textValue = utils.formatNumber(value, precision);
+            }
+            onChange?.(value);
+        } else {
+            e.stopPropagation();
+        }
+    }
+
+    const checkNewInputText = (s: string): boolean => {
+        const currentValue = editor.value;
+        const cursorStart = editor.selectionStart; // 光标起始位置
+        const cursorEnd = editor.selectionEnd; // 光标结束位置
+        let resultingString = currentValue.slice(0, cursorStart) + s + currentValue.slice(cursorEnd);
+        if (/[^0-9.\-]/.test(resultingString)) {
+            return false;
+        } else {
+            return regex.test(resultingString) && utils.isValidNumber(parseFloat(resultingString), precision, allowNegative, max, min);
+        }
+    }
+
+    const handleKeyDown = async (event: KeyboardEvent) => {
+        let accept = (ctrlKeys.indexOf(event.key) > -1 && !composing) || checkNewInputText(event.key);
+        // if (!accept) {
+        //     accept = checkNewInputText(event.key)
+        // }
+        if (!accept) {
+            event.stopPropagation();
+            event.preventDefault();
+        } else {
+            await tick();
+        }
+    }
+
+    let composing: boolean = false;
+    let currentText: string;
+
+    const handlePaste = (event: ClipboardEvent) => {
+        const pasteData = event.clipboardData?.getData('text') || '';
+        if (!checkNewInputText(pasteData)) {
+            event.preventDefault();
+        }
+    }
+
+
+    const handleCompositionStart = (event: CompositionEvent) => {
+        currentText = editor.value;
+        composing = true;
+    };
+
+    const handleCompositionEnd = (event: CompositionEvent) => {
+        composing = false;
+        editor.value = currentText;
+    };
+
+
+    let textValue: string = utils.formatNumber(value, precision);
+
+    $: textValue = value == null ? '' : utils.formatNumber(value, precision);
+    $: regex = new RegExp(utils.getNumberRegex(precision, allowNegative));
+
+</script>
+<input bind:this={editor} type="text" {readonly} {style} {disabled} placeholder={readonly || disabled ? '' : placeholder} bind:value={textValue}
+       on:keydown={handleKeyDown} on:focus on:blur={handleBlurEvent} on:compositionstart={handleCompositionStart}
+       on:compositionend={handleCompositionEnd} on:paste={handlePaste}/>

package/dist/common-editor/NumberInput.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { OnChangeHandler } from "../common/OnChangeHandler";
+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 NumberInput: $$__sveltets_2_IsomorphicComponent<{
+    disabled?: boolean;
+    readonly?: boolean;
+    style?: string;
+    value: number | null;
+    precision?: number | null;
+    placeholder: string;
+    allowNegative?: boolean;
+    max?: number | null;
+    min?: number | null;
+    onChange?: OnChangeHandler<number | null>;
+    setFocus?: () => void;
+}, {
+    focus: FocusEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    setFocus: () => void;
+}, string>;
+type NumberInput = InstanceType<typeof NumberInput>;
+export default NumberInput;

package/dist/common-range-editor/CommonRangeEditor.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+
+    import Icon from "../icon";
+
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let compact: boolean = false;
+    export {className as class};
+    export let style: string = '';
+    export let showActionIcon: boolean = false;
+    export let clean: () => void;
+
+    let className: string = '';
+
+</script>
+<div class="uniface-range-wrapper {className}" tabindex="-1" class:compact {style} on:blur>
+    <div class="uniface-range-editor uniface-common-picker {variant}">
+        <slot name="from"/>
+        <div class="divider"></div>
+        <slot name="to"/>
+        <div class="uniface-editor-clean-icon {showActionIcon ? '' : 'hidden'}">
+            <i class="uniface-icon-x clickable" aria-hidden="true" on:click={clean}></i>
+        </div>
+        {#if $$slots['trailing-icon']}
+            <div class="action-icon">
+                <slot name="trailing-icon"/>
+            </div>
+        {/if}
+    </div>
+    <slot></slot>
+</div>

package/dist/common-range-editor/CommonRangeEditor.svelte.d.ts

@@ -0,0 +1,44 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const CommonRangeEditor: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    variant?: "" | "plain" | "outlined" | "filled";
+    compact?: boolean;
+    class?: string;
+    style?: string;
+    showActionIcon?: boolean;
+    clean: () => void;
+}, {
+    from: {};
+    to: {};
+    'trailing-icon': {};
+    default: {};
+}>, {
+    blur: FocusEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    from: {};
+    to: {};
+    'trailing-icon': {};
+    default: {};
+}, {
+    class: string;
+}, string>;
+type CommonRangeEditor = InstanceType<typeof CommonRangeEditor>;
+export default CommonRangeEditor;

package/dist/common-range-editor/index.d.ts

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

package/dist/common-range-editor/index.js

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

package/dist/context-menu/ContextMenu.svelte

@@ -0,0 +1,85 @@
+<!-- ContextMenu.svelte -->
+<script lang="ts">
+    import Portal from "svelte-portal";
+    import {onMount, onDestroy, tick} from 'svelte';
+    import type {ContextMenuItem} from "./ContextMenuItem";
+
+    let items: Array<ContextMenuItem> = [];  // 菜单项，应该是一个数组
+    let menuWidth = 150; // 菜单的宽度
+    let menuHeight = 150; // 菜单的高度
+
+    let menuVisible = false;
+    let menuPosition = {x: 0, y: 0};
+
+    // 处理右键点击事件
+    export const show = async (event: MouseEvent, list: Array<ContextMenuItem>, width: number = 150, height: number = 150) => {
+        event.preventDefault(); // 阻止默认的右键菜单
+
+        if (menuVisible) {
+            menuVisible = false;
+            await tick();
+        }
+
+        let x = event.clientX;
+        let y = event.clientY;
+
+        items = list;
+        menuWidth = width;
+        menuHeight = height;
+
+        // 获取视窗宽高
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+
+        // 判断右键点击位置，调整菜单位置
+        if (x + menuWidth > windowWidth) {
+            x = windowWidth - menuWidth;
+        }
+
+        if (y + menuHeight > windowHeight) {
+            y = windowHeight - menuHeight;
+        }
+
+        menuPosition = {x, y};
+        menuVisible = true;
+    }
+
+
+
+    // 在页面其他地方点击时隐藏菜单
+    const handleClickOutside = (event: MouseEvent) => {
+        if (menuPanel && !menuPanel.contains(event.target as Node)) {
+            event.stopPropagation();
+            event.preventDefault();
+            menuVisible = false;
+        }
+    }
+
+    let menuPanel: any;
+
+    onMount(() => {
+        window.addEventListener('click', handleClickOutside);
+    });
+
+    onDestroy(() => {
+        window.removeEventListener('click', handleClickOutside);
+    });
+
+    const handleMenuItemClick = (item: ContextMenuItem) => (event: MouseEvent) => {
+        item.action?.();
+        menuVisible = false;
+    }
+</script>
+
+{#if menuVisible}
+<Portal>
+    <div bind:this={menuPanel} class="uniface-context-menu" style="left: {menuPosition.x}px; top: {menuPosition.y}px">
+        {#each items as item}
+            <div class="menu-item" on:click={handleMenuItemClick(item)} aria-hidden="true">
+                {item.text}
+            </div>
+        {/each}
+    </div>
+</Portal>
+{/if}
+

package/dist/context-menu/ContextMenu.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { ContextMenuItem } from "./ContextMenuItem";
+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 ContextMenu: $$__sveltets_2_IsomorphicComponent<{
+    show?: (event: MouseEvent, list: Array<ContextMenuItem>, width?: number, height?: number) => Promise<void>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    show: (event: MouseEvent, list: Array<ContextMenuItem>, width?: number, height?: number) => Promise<void>;
+}, string>;
+type ContextMenu = InstanceType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/context-menu/ContextMenuItem.d.ts

@@ -0,0 +1,15 @@
+export type ActionCallback = () => void;
+export interface ContextMenuItem {
+    /**
+     *
+     */
+    text: string;
+    /**
+     *
+     */
+    action: ActionCallback;
+}
+/**
+ *
+ */
+export type OnContextMenu = (event: MouseEvent, data: any) => void;

package/dist/context-menu/ContextMenuItem.js

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

package/dist/context-menu/index.d.ts

@@ -0,0 +1,5 @@
+import ContextMenu from "./ContextMenu.svelte";
+import type { ContextMenuItem } from "./ContextMenuItem";
+import type { OnContextMenu, ActionCallback } from "./ContextMenuItem";
+export default ContextMenu;
+export type { ContextMenuItem, OnContextMenu, ActionCallback };

package/dist/context-menu/index.js

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

package/dist/criteria-field/CriteriaField.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+
+    export {className as class }
+    export let label: string = "Label"
+    export let style: string = '';
+    export let label$style: string = '';
+    export let arrangement: 'vertical' | 'horizontal' = 'vertical' ;
+    export let size: '' | 'x15' | 'x20' | 'x25' | 'x30' | 'x35' | 'x40' = '';
+
+    let className: string = '';
+
+</script>
+<div class="uniface-filter-field {size} {arrangement} {className}" {style} >
+    <div>
+        <div class="field-label" style={label$style}>
+            <span>{label}</span>
+        </div>
+        <div class="field">
+            <slot/>
+        </div>
+    </div>
+</div>

package/dist/criteria-field/CriteriaField.svelte.d.ts

@@ -0,0 +1,36 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const CriteriaField: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string;
+    label?: string;
+    style?: string;
+    label$style?: string;
+    arrangement?: "vertical" | "horizontal";
+    size?: "" | "x15" | "x20" | "x25" | "x30" | "x35" | "x40";
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {
+    class: string;
+}, string>;
+type CriteriaField = InstanceType<typeof CriteriaField>;
+export default CriteriaField;

package/dist/criteria-field/index.d.ts

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

package/dist/criteria-field/index.js

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

package/dist/data-table/DataTable.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+
+
+    import TableHeaderPanel from "./parts/TableHeaderPanel.svelte";
+    import ContentPanel from "./parts/ContentPanel.svelte";
+    import type DataColumn from "./lib/DataColumn";
+    import type ActionsColumn from "./lib/ActionsColumn";
+    import type IndicatorColumn from "./lib/IndicatorColumn";
+    import type TableRow from "./parts/TableRow";
+    import type {CompareFunction} from "./lib/CompareFunction";
+    import UniDataTable, {SelectionMode} from "./UniDataTable";
+    import {onMount, tick} from "svelte";
+
+    export let columns: Array<DataColumn>;
+    export let actionsColumn: ActionsColumn | null;
+    export let indicatorColumn: IndicatorColumn;
+    export let rowHeight: number = null as unknown as number;  //{ rowHeight}
+    export let list;
+    export let selectedRows: Array<any> = [];
+
+    let dataColumns: Array<DataColumn> = [];
+
+    let colStyle: string = '';
+    let scrollLeft: number = 0;
+    let rows: Array<TableRow>;
+    let table: UniDataTable = null as unknown as UniDataTable;
+    export let selectionMode: SelectionMode = SelectionMode.None;
+
+    let id: string = `${(new Date()).getTime().toString(16)}-${(Math.round(1000 * Math.random()) + 10000).toString(16)}`;
+
+    onMount(() => {
+        table = new UniDataTable(id, indicatorColumn.width);
+    })
+    const sortRows = (compareFun: CompareFunction, descending: boolean) => {
+        //table.(compareFun, descending);
+        rows = table.rows;
+    }
+
+    const handleDataSelected = async (value: boolean) => {
+        rows.forEach(row => row.selected = value);
+        selectedRows = rows.filter(item => item.selected).map(item => item.data);
+        await tick();
+        selectionMode = value ? SelectionMode.All : SelectionMode.None;
+        rows = [...rows];
+    }
+
+    $: selectedRows = selectedRows ?? [];
+
+
+    $: {
+        if (table && columns) {
+            table.setColumns(columns)
+            table.data = list;
+            rows = table.rows;
+            dataColumns = table.columns;
+            colStyle = table.generateTemplateStyle();
+            tabWidth = table.width;
+        }
+    }
+
+    let tabWidth: number;
+
+    const handleWidthChange = () => {
+        colStyle = table.generateTemplateStyle();
+        tabWidth = table.width;
+    }
+
+
+    const handleRowSelectChange = async () => {
+        selectedRows = rows.filter(item => item.selected).map(item => item.data);
+        selectionMode = selectedRows.length == rows.length ? SelectionMode.All : selectedRows.length == 0 ? SelectionMode.None : SelectionMode.Partial;
+    }
+
+</script>
+
+<div id="tab-{id}" class="uniface-data-table">
+    {@html colStyle}
+    {#if table}
+        <div>
+            <TableHeaderPanel sortData={sortRows} {selectionMode} frozenCols={[]} dataCols={dataColumns}
+                              {scrollLeft} width={tabWidth}
+                              {indicatorColumn} {actionsColumn} handleToggleSelectAll={handleDataSelected} {handleWidthChange}/>
+            {#if colStyle.length > 0 && list}
+                <ContentPanel columns={dataColumns} {rows} {indicatorColumn} {actionsColumn}
+                              bind:scrollLeft {rowHeight} width={tabWidth} {handleRowSelectChange}/>
+            {/if}
+        </div>
+    {/if}
+</div>

package/dist/data-table/DataTable.svelte.d.ts

@@ -0,0 +1,30 @@
+import type DataColumn from "./lib/DataColumn";
+import type ActionsColumn from "./lib/ActionsColumn";
+import type IndicatorColumn from "./lib/IndicatorColumn";
+import { SelectionMode } from "./UniDataTable";
+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 DataTable: $$__sveltets_2_IsomorphicComponent<{
+    columns: Array<DataColumn>;
+    actionsColumn: ActionsColumn | null;
+    indicatorColumn: IndicatorColumn;
+    rowHeight?: number;
+    list: any;
+    selectedRows?: Array<any>;
+    selectionMode?: SelectionMode;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DataTable = InstanceType<typeof DataTable>;
+export default DataTable;

package/dist/data-table/UniDataTable.d.ts

@@ -0,0 +1,28 @@
+import type DataColumn from "./lib/DataColumn";
+import type TableRow from "./parts/TableRow";
+export type RowEventHandler = (row: TableRow) => void;
+export type TableEventHandler = () => void;
+export type SelectionEventHandler = (value: boolean) => void;
+export declare enum SelectionMode {
+    All = 1,
+    Partial = 0,
+    None = -1
+}
+export default class UniDataTable {
+    private _frozenColumns;
+    private _columns;
+    private tableRows;
+    private indicatorWidth;
+    readonly id: string;
+    private _width;
+    private _frozenWidth;
+    constructor(id: string, indicatorWidth: number);
+    set data(value: Array<any>);
+    get data(): Array<any>;
+    setColumns(columns: Array<DataColumn>): void;
+    generateTemplateStyle(): string;
+    get width(): number;
+    get frozenWidth(): number;
+    get rows(): Array<TableRow>;
+    get columns(): DataColumn[];
+}

package/dist/data-table/UniDataTable.js

@@ -0,0 +1,79 @@
+import TableRows from "./parts/TableRows";
+export var SelectionMode;
+(function (SelectionMode) {
+    SelectionMode[SelectionMode["All"] = 1] = "All";
+    SelectionMode[SelectionMode["Partial"] = 0] = "Partial";
+    SelectionMode[SelectionMode["None"] = -1] = "None";
+})(SelectionMode || (SelectionMode = {}));
+export default class UniDataTable {
+    _frozenColumns = [];
+    _columns = [];
+    tableRows;
+    indicatorWidth;
+    id;
+    _width = 0;
+    _frozenWidth = 0;
+    constructor(id, indicatorWidth) {
+        this.id = id;
+        this.indicatorWidth = indicatorWidth;
+        this.tableRows = new TableRows();
+    }
+    set data(value) {
+        this.tableRows.data = value;
+    }
+    get data() {
+        return this.tableRows.data;
+    }
+    setColumns(columns) {
+        let frozen = true;
+        this._frozenColumns = [];
+        this._columns = [];
+        (columns ?? []).forEach(col => {
+            frozen = frozen && col.frozen == true;
+            if (frozen) {
+                this._frozenColumns.push(col);
+            }
+            else {
+                this._columns.push(col);
+            }
+        });
+    }
+    generateTemplateStyle() {
+        this._width = 0;
+        this._frozenWidth = this.indicatorWidth;
+        let colStyle = '';
+        let inv = 0;
+        this._frozenColumns.forEach((col, idx) => {
+            if (col.visible != false) {
+                this.indicatorWidth += col.width;
+                colStyle += `#tab-${this.id} .fz_col-${idx - inv} {width: ${col.width}px; ext-align: ${col.align ?? 'left'}}\n`;
+            }
+            else {
+                inv++;
+            }
+        });
+        inv = 0;
+        this._columns.forEach((col, idx) => {
+            if (col.visible != false) {
+                this._width += col.width;
+                colStyle += `#tab-${this.id} .col-${idx - inv} { width: ${col.width}px ; text-align: ${col.align ?? 'left'} }\n`;
+            }
+            else {
+                inv++;
+            }
+        });
+        return `<style>${colStyle}</style>`;
+    }
+    get width() {
+        return this._width;
+    }
+    get frozenWidth() {
+        return this._frozenWidth;
+    }
+    get rows() {
+        return [...this.tableRows.rows];
+    }
+    get columns() {
+        return this._columns;
+    }
+}

package/dist/data-table/index.d.ts

@@ -0,0 +1,10 @@
+import DataTable from "./DataTable.svelte";
+import type ActionsColumn from "./lib/ActionsColumn";
+import type { FormatCell, CellHint } from "./lib/FormatCell";
+import type IndicatorColumn from "./lib/IndicatorColumn";
+import type RowAction from "./lib/RowAction";
+import type { GetRowActions, ActionFunction } from "./lib/RowAction";
+import type DataColumn from "./lib/DataColumn";
+export default DataTable;
+export type { ActionsColumn, IndicatorColumn, FormatCell, CellHint, DataColumn };
+export type { RowAction, GetRowActions, ActionFunction };