@ticatec/uniface-element 0.3.23 → 5.0.1

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

@@ -1,68 +0,0 @@
-<script lang="ts">
-
-    import {clickOutside} from "../../common/uniface-utils";
-    import {onDestroy, onMount} from "svelte";
-
-    export let closeCallback: ()=>void;
-    export let parentRect: DOMRect;
-
-    const close = () => {
-        closeCallback?.();
-    }
-
-    let panel: any;
-    let rect: DOMRect;
-    let resizeObserver: ResizeObserver;
-    let style: string = "top: 50%;"
-
-    const checkPosition = () => {
-        rect = panel.getBoundingClientRect();
-        if (rect.y + 10 > parentRect.height) {
-            style = "bottom: 50%;"
-        } else {
-            style = "top: 50%;"
-        }
-    }
-
-    export function outerClick(node: HTMLElement, callback: () => void) {
-        const handleClick = (event: MouseEvent) => {
-            // 如果点击目标不在node内，则触发回调
-            if (!node.contains(event.target as Node)) {
-                callback();
-            }
-        };
-
-        // 监听全局点击事件（useCapture=true，避免事件冒泡造成的问题）
-        document.addEventListener('click', handleClick, true);
-
-        // 清理事件监听器
-        onDestroy(() => {
-            document.removeEventListener('click', handleClick, true);
-        });
-
-        // action 必须返回一个对象，可以选实现 update 和 destroy
-        return {
-            destroy() {
-                document.removeEventListener('click', handleClick, true);
-            }
-        };
-    }
-
-    onMount(async () => {
-        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}>
-    <slot></slot>
-</div>

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

@@ -1,37 +0,0 @@
-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 PopupMenu: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    closeCallback: () => void;
-    parentRect: DOMRect;
-    outerClick?: (node: HTMLElement, callback: () => void) => {
-        destroy(): void;
-    };
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
-    outerClick: (node: HTMLElement, callback: () => void) => {
-        destroy(): void;
-    };
-}, string>;
-type PopupMenu = InstanceType<typeof PopupMenu>;
-export default PopupMenu;

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

@@ -1,78 +0,0 @@
-<script lang="ts">
-
-    import {OrderDirection} from "../lib/OrderDirection";
-    import {type TableEventHandler} from "../UniDataTable";
-    import type DataColumn from "../lib/DataColumn";
-
-    export let scrollLeft: number = 0;
-    export let handleWidthChange: TableEventHandler;
-    export let dataCols: Array<any>;
-    export let width: number = 0;
-    export let hasWhitespace: boolean = false;
-    export let  handleCellClick: (col: DataColumn) => any;
-    export let orderColumn: DataColumn ;
-    export let orderDirection: OrderDirection;
-
-    let resizeCol: any;
-
-
-    let startX: number = 0;
-    let startWidth: number = 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;
-            }
-
-        }
-        handleWidthChange?.();
-    }
-
-    // 结束拖动
-    function onMouseUp() {
-        resizeCol = null;
-        document.body.style.cursor = 'default';
-        window.removeEventListener('mousemove', onMouseMove);
-        window.removeEventListener('mouseup', onMouseUp);
-    }
-
-
-
-
-
-</script>
-<div class="header-row">
-    <div style="left: {-scrollLeft}px; width: {width}px">
-        {#each dataCols ?? [] as col, index}
-            <div class="col-{index} data-cell" class:sortable={col.compareFunction!=null} class:whitespace={hasWhitespace}>
-                <div class:sortable={col.compareFunction != null} on:click={handleCellClick(col)} aria-hidden="true" class="vertical-center">
-                    <span>{col.text}</span>
-                    {#if col === orderColumn}
-                        <i style="margin-left: 2px; font-size: 12px; position: absolute; top: 0; right: 4px"
-                           class={orderDirection===OrderDirection.Ascending ? 'uniface-icon-chevron-up' : 'uniface-icon-chevron-down'}></i>
-                    {/if}
-                </div>
-                <div class="header-cell-divider" class:resizer={col.resizable} aria-hidden="true"
-                     on:mousedown={handleResizeMouseDown(col)}></div>
-
-            </div>
-        {/each}
-    </div>
-</div>

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

@@ -1,30 +0,0 @@
-import { OrderDirection } from "../lib/OrderDirection";
-import { type TableEventHandler } from "../UniDataTable";
-import type DataColumn from "../lib/DataColumn";
-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 TableHeaderPanel: $$__sveltets_2_IsomorphicComponent<{
-    scrollLeft?: number;
-    handleWidthChange: TableEventHandler;
-    dataCols: Array<any>;
-    width?: number;
-    hasWhitespace?: boolean;
-    handleCellClick: (col: DataColumn) => any;
-    orderColumn: DataColumn;
-    orderDirection: OrderDirection;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TableHeaderPanel = InstanceType<typeof TableHeaderPanel>;
-export default TableHeaderPanel;

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

@@ -1,32 +0,0 @@
-<script lang="ts">
-
-    import type DataColumn from "../lib/DataColumn";
-    import tableUtils from "../lib/TableUtils";
-
-    export let column: DataColumn;
-    export let data: any;
-
-    let text: string;
-    let escapeHTML: boolean = false;
-
-
-    $: {
-        let value = tableUtils.extractFieldValue(data, column.field);
-        if (column.formatter) {
-            escapeHTML = column.escapeHTML == true;
-            text = column.formatter(value);
-        } else {
-            escapeHTML = false;
-            text = value ?? '';
-        }
-    }
-
-
-</script>
-
-
-{#if escapeHTML == true}
-    {@html text}
-{:else}
-    <span>{text}</span>
-{/if}

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

@@ -1,22 +0,0 @@
-import type DataColumn from "../lib/DataColumn";
-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 TextCell: $$__sveltets_2_IsomorphicComponent<{
-    column: DataColumn;
-    data: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TextCell = InstanceType<typeof TextCell>;
-export default TextCell;

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

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

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

@@ -1,20 +0,0 @@
-import type { ButtonType } from "../button";
-/**
- * Action cell中的事件处理
- */
-export type HandleAction = (data: any) => Promise<void>;
-export interface CellAction {
-    /**
-     * action的文本
-     */
-    text: string;
-    /**
-     * action的类型
-     */
-    type?: ButtonType;
-    /**
-     * 点击处理
-     */
-    handle: HandleAction;
-}
-export type GetCellAction = (data: any) => CellAction | undefined;

package/dist/data-table/types.js

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

package/dist/date-picker/DatePicker.svelte

@@ -1,132 +0,0 @@
-<script lang="ts">
-
-    import {DisplayMode} from "../common/DisplayMode";
-    import dayjs from "dayjs";
-    import Calendar from "../base-calendar";
-    import type {OnChangeHandler} from "../common/OnChangeHandler";
-    import type {UniDate} from "../base-calendar/dateUtils";
-    import CommonPicker from "../common/CommonPicker.svelte";
-
-    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
-    export let disabled: boolean = false;
-    export let readonly: boolean = false;
-    export let compact: boolean = false;
-    export let mandatory: boolean = false;
-    export let value: any = null;
-    export let style: string = '';
-    export let placeholder: string = "";
-    export let displayMode: DisplayMode = DisplayMode.Edit;
-    export let min: UniDate = null;
-    export let max: UniDate = null;
-    export let onchange: OnChangeHandler<Date> = null as unknown as OnChangeHandler<Date>;
-    export let onfocus: (() => void) | null = null;
-    export let onblur: (() => void) | null = null;
-    export const setFocus = () => {
-        setTimeout(()=> {
-            editor && editor.focus();
-        }, 50);
-    }
-
-
-    let textValue: string;
-    let editor: any;
-    let oldValue = value;
-    let hasFocus: boolean = false;
-    let isUserChange: boolean = false;
-
-
-    const generateText = (v: string) => {
-        textValue = value == null ? '' : dayjs(value).format('YYYY-MM-DD');
-    }
-
-    const openPopup = () => {
-        showPopup = true;
-    }
-
-    $: generateText(value);
-
-    $: if (oldValue != value) {
-        if (isUserChange) {
-            if (value != null) {
-                // 确保传递的是Date对象
-                const dateValue = value instanceof Date ? value : (dayjs.isDayjs(value) ? value.toDate() : new Date(value));
-                onchange?.(dateValue);
-            } else {
-                onchange?.(null);
-            }
-            isUserChange = false;
-        }
-        oldValue = value;
-    }
-
-    const handleCalendarSelect = (d: dayjs.Dayjs) => {
-        isUserChange = true;
-        value = d.toDate();
-        showPopup = false;
-        editor.focus();
-    }
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-        if (!disabled) {
-            if (e.key == 'Backspace' || e.key == 'Delete') {
-                isUserChange = true;
-                value = null;
-                textValue = '';
-                showPopup = false;
-            } else if (e.key == 'Tab') {
-                if (showPopup) {
-                    e.preventDefault();
-                    e.stopPropagation();
-                }
-            } else if (e.key == 'Escape') {
-                showPopup = false;
-            } else {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        }
-    }
-
-    let showPopup: boolean = false;
-
-    const cleanData = () => {
-        isUserChange = true;
-        value = null;
-    }
-
-    const handleFocus = () => {
-        if (!hasFocus) {
-            hasFocus = true;
-            onfocus?.();
-        }
-    }
-
-    const handleBlur = (event: FocusEvent) => {
-        if (!showPopup) {
-            hasFocus = false;
-            onblur?.();
-        }
-    }
-
-    // 监听popup关闭，如果是点击外部关闭且之前有焦点，触发blur
-    $: if (!showPopup && hasFocus) {
-        setTimeout(() => {
-            if (document.activeElement !== editor) {
-                hasFocus = false;
-                onblur?.();
-            }
-        }, 50);
-    }
-
-</script>
-
-<CommonPicker {displayMode} {variant} {style} className="uniface-date-time-editor" {compact} dropDownIcon="icon_google_event_available"
-              bind:showPopup canClean={!mandatory && value!=null} autoFit={false} clean={cleanData} {textValue} {readonly} {disabled}>
-
-    <input style="width: 100%" bind:this={editor} on:click={openPopup} {placeholder} on:keydown={handleKeyDown}
-           class="text-editor" bind:value={textValue} on:blur={handleBlur} on:focus={handleFocus}/>
-
-    <div class="date-popover" slot="popup-panel">
-            <Calendar {value}  {min} {max} onSelect={handleCalendarSelect}/>
-    </div>
-</CommonPicker>

package/dist/date-picker/DatePicker.svelte.d.ts

@@ -1,39 +0,0 @@
-import { DisplayMode } from "../common/DisplayMode";
-import type { OnChangeHandler } from "../common/OnChangeHandler";
-import type { UniDate } from "../base-calendar/dateUtils";
-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 DatePicker: $$__sveltets_2_IsomorphicComponent<{
-    variant?: "" | "plain" | "outlined" | "filled";
-    disabled?: boolean;
-    readonly?: boolean;
-    compact?: boolean;
-    mandatory?: boolean;
-    value?: any;
-    style?: string;
-    placeholder?: string;
-    displayMode?: DisplayMode;
-    min?: UniDate;
-    max?: UniDate;
-    onchange?: OnChangeHandler<Date>;
-    onfocus?: (() => void) | null;
-    onblur?: (() => void) | null;
-    setFocus?: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
-    setFocus: () => void;
-}, string>;
-type DatePicker = InstanceType<typeof DatePicker>;
-export default DatePicker;

package/dist/date-picker/DateTimePicker.svelte

@@ -1,169 +0,0 @@
-<script lang="ts">
-
-    import dayjs from "dayjs";
-    import {DisplayMode} from "../common/DisplayMode";
-    import dateUtils, {type UniDate} from "../base-calendar/dateUtils";
-    import Calendar from "../base-calendar";
-    import TimePanel from "./TimePanel.svelte";
-    import {TextButton} from "../button";
-    import type {OnChangeHandler} from "../common/OnChangeHandler";
-    import CommonPicker from "../common/CommonPicker.svelte";
-    import i18nRes from "../i18nRes";
-
-    export let disabled: boolean = false;
-    export let readonly: boolean = false;
-    export let style: string = '';
-    export let value: UniDate;
-    export let placeholder: string = "";
-    export let min: UniDate = null;
-    export let max: UniDate = null;
-    export let precision: "H" | "M" | "S" = "M"; //精确到时分秒，
-    export let displayMode: DisplayMode = DisplayMode.Edit;
-    export let compact: boolean = false;
-    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
-    export let mandatory: boolean = false;
-    export let onchange: OnChangeHandler<Date> = null as unknown as OnChangeHandler<Date>;
-    export let onfocus: (() => void) | null = null;
-    export let onblur: (() => void) | null = null;
-    export const setFocus = () => {
-        setTimeout(()=> {
-            editor && editor.focus();
-        }, 50);
-    }
-
-
-    let confirmText = i18nRes.calendar.confirmText;
-    let textValue: string;
-    let editor: any;
-    let hasFocus: boolean = false;
-
-    let currentValue: dayjs.Dayjs;
-
-    const dateFmts = {
-        "H": "YYYY-MM-DD HH:mm",
-        "M": "YYYY-MM-DD HH:mm",
-        "S": "YYYY-MM-DD HH:mm:ss"
-    }
-
-    let format: string;
-
-    let btnDisabled;
-
-
-    const openPopup = () => {
-        displayTime = dateUtils.formatDate(currentValue, format);
-        showPopup = true;
-    }
-
-    const handleCalendarSelect = (d: dayjs.Dayjs) => {
-        currentValue = currentValue.set("year", d.year()).set("month", d.month()).set("date", d.date());
-        editor.focus();
-        displayTime = dateUtils.formatDate(currentValue, format);
-    }
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-        if (e.key == 'Backspace' || e.key == 'Delete') {
-            value = null;
-            showPopup = false;
-        } else if (e.key == 'Tab') {
-            if (showPopup) {
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        } else if (e.key == 'Escape') {
-            showPopup = false;
-        }
-    }
-
-    const confirm = async () => {
-        if (dateUtils.toDayjs(value)?.toDate() != currentValue.toDate()) {
-            value = currentValue;
-            onchange?.(currentValue.toDate());
-        }
-        showPopup = false;
-        editor.focus();
-    }
-
-    let displayTime: string = '';
-
-    const generateCurrentValue = (v: UniDate, p: string) => {
-        if (value) {
-            currentValue = dateUtils.toDayjs(v) ?? dayjs()
-        } else {
-            currentValue = dayjs();
-        }
-        currentValue = currentValue.set("milliseconds", 0);
-        if (p == "H") {
-            currentValue = currentValue.set("minutes", 0);
-            currentValue = currentValue.set("seconds", 0);
-        } else if (p == "M") {
-            currentValue = currentValue.set("seconds", 0);
-        }
-    }
-
-
-    $: generateCurrentValue(value, precision);
-    $: textValue = dateUtils.formatDate(value, format);
-    $: btnDisabled = currentValue == null;
-
-    let showPopup: boolean = false;
-
-    $: format = dateFmts[precision];
-
-    const handleTimeChange = (t: dayjs.Dayjs) => {
-        currentValue = t;
-        displayTime = dateUtils.formatDate(currentValue, format);
-    }
-
-    const cleanData = () => {
-        value = null;
-    }
-
-    const handleFocus = () => {
-        if (!hasFocus) {
-            hasFocus = true;
-            onfocus?.();
-        }
-    }
-
-    const handleBlur = (event: FocusEvent) => {
-        if (!showPopup) {
-            hasFocus = false;
-            onblur?.();
-        }
-    }
-
-    // 监听popup关闭，如果是点击外部关闭且之前有焦点，触发blur
-    $: if (!showPopup && hasFocus) {
-        setTimeout(() => {
-            if (document.activeElement !== editor) {
-                hasFocus = false;
-                onblur?.();
-            }
-        }, 50);
-    }
-
-</script>
-
-<CommonPicker {displayMode} {variant} {style} className="uniface-date-time-editor" {compact} dropDownIcon="icon_google_access_time"
-              bind:showPopup canClean={!mandatory && value!=null} autoFit={false} clean={cleanData} {textValue} {readonly} {disabled}>
-
-    <input style="width: 100%" bind:this={editor} on:click={openPopup} {placeholder} on:keydown={handleKeyDown}
-           class="text-editor" bind:value={textValue} on:blur={handleBlur} on:focus={handleFocus}/>
-
-    <div class="date-popover" slot="popup-panel">
-        <div style="display: flex; flex-direction: row">
-            <Calendar style="border-right: 1px solid var(--uniface-inside-border-color, #f0f0f0)" value={currentValue}
-                      onSelect={handleCalendarSelect} {min} {max}/>
-            <TimePanel style="width: 120px" value={currentValue} {precision} onchange={handleTimeChange}/>
-        </div>
-        <div style="border-top: 1px solid var(--uniface-inside-border-color, #f0f0f0); display: flex; flex-direction: row; box-sizing: border-box; padding: 4px 8px; text-align: left; align-items: center">
-            <div style="flex: 1 1 auto">
-                <span>{displayTime}</span>
-            </div>
-            <div style="flex: 0 0 auto;">
-                <TextButton label={confirmText} type="primary" disabled={btnDisabled} onclick={confirm}/>
-            </div>
-        </div>
-    </div>
-</CommonPicker>

package/dist/date-picker/DateTimePicker.svelte.d.ts

@@ -1,40 +0,0 @@
-import { DisplayMode } from "../common/DisplayMode";
-import { type UniDate } from "../base-calendar/dateUtils";
-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 DateTimePicker: $$__sveltets_2_IsomorphicComponent<{
-    disabled?: boolean;
-    readonly?: boolean;
-    style?: string;
-    value: UniDate;
-    placeholder?: string;
-    min?: UniDate;
-    max?: UniDate;
-    precision?: "H" | "M" | "S";
-    displayMode?: DisplayMode;
-    compact?: boolean;
-    variant?: "" | "plain" | "outlined" | "filled";
-    mandatory?: boolean;
-    onchange?: OnChangeHandler<Date>;
-    onfocus?: (() => void) | null;
-    onblur?: (() => void) | null;
-    setFocus?: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
-    setFocus: () => void;
-}, string>;
-type DateTimePicker = InstanceType<typeof DateTimePicker>;
-export default DateTimePicker;