@ticatec/uniface-element 0.1.9

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

@@ -0,0 +1,30 @@
+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;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type PopupMenu = InstanceType<typeof PopupMenu>;
+export default PopupMenu;

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

@@ -0,0 +1,109 @@
+<script lang="ts">
+
+    import {OrderDirection} from "../lib/OrderDirection";
+    import type IndicatorColumn from "../lib/IndicatorColumn";
+    import type ActionsColumn from "../lib/ActionsColumn";
+    import type {CompareFunction} from "../lib/CompareFunction";
+    import {type SelectionEventHandler, SelectionMode, type TableEventHandler} from "../UniDataTable";
+    import FixedHeaderPanel from "./FixedHeaderPanel.svelte";
+    import type DataColumn from "../lib/DataColumn";
+
+    export let actionsColumn: ActionsColumn | null;
+    export let indicatorColumn: IndicatorColumn;
+    export let scrollLeft: number = 0;
+    export let handleToggleSelectAll: SelectionEventHandler;
+    export let handleWidthChange: TableEventHandler;
+    export let sortData: (compareFun: CompareFunction, descending: boolean) => void;
+    export let dataCols: Array<any>;
+    export let frozenCols: Array<DataColumn> = [];
+    export let selectionMode: SelectionMode;
+
+    export let width: number = 0;
+
+    let resizeCol: any;
+    let orderColumn: DataColumn | null = null;
+    let orderDirection: OrderDirection = OrderDirection.Ascending;
+
+    let startX: number = 0;
+    let startWidth: number = 0;
+
+
+    const handleResizeMouseDown = (col: DataColumn) => (event: MouseEvent) => {
+        resizeCol = col;
+        startX = event.clientX;
+        startWidth = resizeCol.width;
+
+        // 绑定鼠标移动和松开事件
+        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;
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    }
+
+
+    const handleCellClick = (col: DataColumn) => (e: MouseEvent) => {
+        if (col.compareFunction != null) {
+            if (col == orderColumn) {
+                orderDirection = orderDirection == OrderDirection.Ascending ? OrderDirection.Descending : OrderDirection.Ascending;
+            } else {
+                orderColumn = col;
+                orderDirection = OrderDirection.Ascending;
+            }
+            sortData?.(col.compareFunction, orderDirection == OrderDirection.Descending);
+        }
+    }
+
+
+</script>
+<div class="table-header-panel">
+    <FixedHeaderPanel {selectionMode} columns={frozenCols} {indicatorColumn} {handleToggleSelectAll}/>
+    <div style="width: 100%; overflow: hidden">
+        <div class="header-row-panel" style="left: {-scrollLeft}px; width: {width}px">
+            {#each dataCols ?? [] as col, index}
+                <div class="table-cell col-{index}">
+                    <div class:sortable={col.compareFunction != null} on:click={handleCellClick(col)} aria-hidden="true">
+                        <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 class="header-cell" style="border-right: unset;">
+            </div>
+        </div>
+    </div>
+    {#if actionsColumn}
+        <div class="header-actions" style="width: {actionsColumn.width}px">
+            <div>
+                <span>{actionsColumn.title ?? ''}</span>
+            </div>
+
+        </div>
+    {/if}
+</div>
+
+<style>
+
+
+</style>

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

@@ -0,0 +1,34 @@
+import type IndicatorColumn from "../lib/IndicatorColumn";
+import type ActionsColumn from "../lib/ActionsColumn";
+import type { CompareFunction } from "../lib/CompareFunction";
+import { type SelectionEventHandler, SelectionMode, 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<{
+    actionsColumn: ActionsColumn | null;
+    indicatorColumn: IndicatorColumn;
+    scrollLeft?: number;
+    handleToggleSelectAll: SelectionEventHandler;
+    handleWidthChange: TableEventHandler;
+    sortData: (compareFun: CompareFunction, descending: boolean) => void;
+    dataCols: Array<any>;
+    frozenCols?: Array<DataColumn>;
+    selectionMode: SelectionMode;
+    width?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TableHeaderPanel = InstanceType<typeof TableHeaderPanel>;
+export default TableHeaderPanel;

package/dist/data-table/parts/TableRow.d.ts

@@ -0,0 +1,14 @@
+export default class TableRow {
+    private _expand;
+    private _height;
+    readonly data: any;
+    private _isBusy;
+    selected: boolean;
+    constructor(data: any);
+    get height(): number;
+    set height(value: number);
+    get expand(): boolean;
+    set expand(value: boolean);
+    get isBusy(): boolean;
+    set isBusy(value: boolean);
+}

package/dist/data-table/parts/TableRow.js

@@ -0,0 +1,35 @@
+export default class TableRow {
+    _expand = false;
+    _height = 0;
+    data;
+    _isBusy = false;
+    selected = false;
+    constructor(data) {
+        this.data = data;
+    }
+    get height() {
+        return this._height;
+    }
+    set height(value) {
+        this._height = value;
+    }
+    get expand() {
+        return this._expand;
+    }
+    set expand(value) {
+        this._expand = value;
+    }
+    // get selected(): boolean {
+    //     return this._selected;
+    // }
+    //
+    // set selected(value: boolean) {
+    //     this._selected = value;
+    // }
+    get isBusy() {
+        return this._isBusy;
+    }
+    set isBusy(value) {
+        this._isBusy = value;
+    }
+}

package/dist/data-table/parts/TableRows.d.ts

@@ -0,0 +1,9 @@
+import type { CompareFunction } from "../lib/CompareFunction";
+import TableRow from "./TableRow";
+export default class TableRows {
+    private _rows;
+    constructor();
+    set data(list: Array<any>);
+    get rows(): Array<TableRow>;
+    sort(compareFun: CompareFunction, descending: boolean): void;
+}

package/dist/data-table/parts/TableRows.js

@@ -0,0 +1,15 @@
+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;
+    }
+    sort(compareFun, descending) {
+    }
+}

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

@@ -0,0 +1,35 @@
+<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>
+
+<div class="cell-text">
+    {#if escapeHTML == true}
+        {@html text}
+    {:else}
+        <span>{text}</span>
+    {/if}
+</div>

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

@@ -0,0 +1,22 @@
+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/date-picker/DatePicker.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+
+    import {onMount} from "svelte";
+    import {DisplayMode} from "../common/DisplayMode";
+    import Popover from "../common/Popover.svelte";
+    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>;
+
+    let textValue: string;
+    let editor: any;
+    let oldValue = value;
+
+    onMount(() => {
+    })
+
+    const generateText = (v: string) => {
+        textValue = value == null ? '' : dayjs(value).format('YYYY-MM-DD');
+    }
+
+    const openPopup = () => {
+        editor.focus();
+        showPopup = true;
+    }
+
+    $: generateText(value);
+
+    $: if (oldValue != value) {
+        oldValue = value;
+        onChange?.(value);
+    }
+
+    const handleCalendarSelect = (d: dayjs.Dayjs) => {
+        value = d;
+        showPopup = false;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+        if (!disabled) {
+            if (e.key == 'Backspace' || e.key == 'Delete') {
+                value = null;
+                textValue = '';
+                showPopup = false;
+            } else if (e.key == 'Escape') {
+                showPopup = false;
+            } else {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }
+    }
+
+    let showPopup: boolean = false;
+
+    const cleanData = () => {
+        value = null;
+    }
+
+</script>
+
+<CommonPicker {displayMode} {variant} {style} className="uniface-date-time-editor" {compact} dropDownIcon="uniface-icon-calendar"
+              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 on:focus/>
+
+    <div class="date-popover" slot="popup-panel">
+            <Calendar {value}  {min} {max} onSelect={handleCalendarSelect}/>
+    </div>
+</CommonPicker>

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

@@ -0,0 +1,37 @@
+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>;
+}, {
+    blur: FocusEvent;
+    focus: FocusEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DatePicker = InstanceType<typeof DatePicker>;
+export default DatePicker;

package/dist/date-picker/DateTimePicker.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+
+    import {onMount} from "svelte";
+    import dayjs from "dayjs";
+    import {DisplayMode} from "../common/DisplayMode";
+    import dateUtils, {type UniDate} from "../base-calendar/dateUtils";
+    import Calendar, {DateContext} from "../base-calendar";
+    import TimePanel from "./TimePanel.svelte";
+    import {TextButton} from "../button";
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import CommonPicker from "../common/CommonPicker.svelte";
+
+    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>;
+
+    let confirmText = DateContext.getInstance().confirmText;
+    let textValue: string;
+    let editor: any;
+    let oldValue: Date = dateUtils.toDayjs(value)?.toDate();
+    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;
+
+    onMount(async () => {
+
+    })
+
+    const extractDisplayTime = () => {
+        displayTime = dateUtils.formatDate(value, format);
+        editor && editor.focus();
+    }
+
+    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 == 'Escape') {
+            showPopup = false;
+        }
+    }
+
+    const confirm = () => {
+        if (dateUtils.toDayjs(value)?.toDate() != currentValue.toDate()) {
+            value = currentValue;
+            onChange?.(currentValue.toDate());
+        }
+        showPopup = false;
+    }
+
+    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;
+    }
+
+</script>
+
+<CommonPicker {displayMode} {variant} {style} className="uniface-date-time-editor" {compact} dropDownIcon="uniface-icon-calendar"
+              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 on:focus/>
+
+    <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} disabled={btnDisabled} onClick={confirm}/>
+            </div>
+        </div>
+    </div>
+</CommonPicker>

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

@@ -0,0 +1,38 @@
+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>;
+}, {
+    blur: FocusEvent;
+    focus: FocusEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DateTimePicker = InstanceType<typeof DateTimePicker>;
+export default DateTimePicker;