@ticatec/uniface-element 0.1.9

package/dist/time-editor/README.md

@@ -0,0 +1,26 @@
+# NumberEditor
+
+## 使用方法
+
+```sveltehtml
+<TimeEditor filled />
+```
+
+## 属性
+| 属性            | 描述               | 类型              |
+|---|------------------|-----------------|
+| disabled      | 当前的数字输入框是否可用     | true / false    |
+| readonly      | 当前的数字输入框为只读或者可编辑 | true / false    |
+| outlined      | 当前的是否带边框         | true / false    |
+| filled        | 当前输入框是否填充        | true / false    |
+| compact       | 按照紧凑格式显示         | true / false    |
+| style         | 自定义style         | 字符串             |
+| value         | 值                | true / false    |
+| precision     | 精度               | 整数              |
+| suffix        | 后缀               | 字符              |
+| prefix        | 前缀               | 字符              |
+| allowNegative | 是否可以是负数          | true / false    |
+| displayMode   | 最小值              | 0(格式显示) / 1（正常） |
+| max           | 最大值              | 数字              |
+
+

package/dist/time-editor/TimeEditor.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+
+    import {DisplayMode} from "../common/DisplayMode";
+    import CommonEditor from "../common-editor/CommonEditor.svelte";
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import {tick} from "svelte";
+
+    const excludeAttrs = ['readonly', 'disabled', 'required', "form", "wrap", "type"]
+
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let mandatory: boolean = false;
+    export let precision: 'M' | 'S' = 'M';
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let compact: boolean = false;
+    export {className as class};
+    export let style: string = '';
+    export let value: number = null as unknown as number;
+    export let suffix: string = '';
+    export let prefix: string = '';
+    export let displayMode: DisplayMode = DisplayMode.Edit;
+    export let onChange: OnChangeHandler<number> = null as unknown as OnChangeHandler<number>;
+
+    let className: string = '';
+    let editor: any;
+    let textValue: string;
+    let oldValue: any = value;
+
+    let cursorIndex = 0; // 当前光标位置
+
+    let lastPos = precision == "M" ? 4 : 7;
+
+    let emptyStr: string;
+
+    $: emptyStr = precision == 'M' ? '__:__' : '__:__:__';
+
+    const handleFocusEvent = (e: FocusEvent) => {
+        if (!readonly) {
+            editor.setSelectionRange(cursorIndex, cursorIndex + 1);
+        }
+    }
+
+    const toTimeText = (v: number): string => {
+        if (v == null) {
+            let s = emptyStr;
+            return mandatory ? s.replaceAll('_', '0') : s;
+        } else {
+            let mins = Math.floor(value);
+            let hh = Math.floor(mins / 60);
+            let mm = mins % 60;
+            let ss = Math.floor((value - mins) * 100) % 60;
+            let time = String(hh).padStart(2, "0") + ":" + String(mm).padStart(2, "0");
+            if (precision == "S") {
+                time += ":" + String(ss).padStart(2, "0");
+            }
+            return time;
+        }
+    }
+
+
+    const handleBlurEvent = (e: FocusEvent) => {
+        if (!readonly) {
+            if (/^[_:]*$/.test(textValue)) {
+                value = null as unknown as number;
+            } else {
+                value = toTimeValue();
+            }
+            if (oldValue != value) {
+                onChange?.(value);
+            }
+
+        }
+    }
+
+    const moveCursor = (direction: number) => {
+        cursorIndex = cursorIndex + direction;
+        if (cursorIndex > lastPos) {
+            cursorIndex = 0;
+        } else if (cursorIndex < 0) {
+            cursorIndex = lastPos;
+        }
+        if (cursorIndex == 2 || cursorIndex == 5) {
+            cursorIndex += direction;
+        }
+        editor.setSelectionRange(cursorIndex, cursorIndex + 1);
+    }
+
+    const handleMouseDown = (e: MouseEvent) => {
+        editor.focus();
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+    const replaceChar = (position: number, newChar: string): string => {
+        const arr = textValue.split('');
+        arr[position] = newChar;
+        return arr.join('');
+    }
+
+    const toTimeValue = (): number => {
+        let tt = textValue.replaceAll('_', '0').split(':');
+        let h = parseInt(tt[0]);
+        let m = parseInt(tt[1]);
+        let ss = tt.length == 3 ? parseInt(tt[2]) : 0;
+        return h * 60 + m + ss / 100;
+    }
+
+    const isValidTime = (s: string) => {
+        let tt = s.replaceAll('_', '0').split(':');
+        let h = parseInt(tt[0]);
+        let m = parseInt(tt[1]);
+        let ss = tt.length == 3 ? parseInt(tt[2]) : 0;
+        return m < 60 && h * 60 + m < 1440 && ss < 60;
+    }
+
+
+    const handleKeyDown = async (e: KeyboardEvent) => {
+        if (e.key != 'Tab') {
+            switch (e.key) {
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    moveCursor(-1);
+                    break;
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    moveCursor(1);
+                    break;
+                case 'Delete':
+                    textValue = replaceChar(cursorIndex, mandatory ? '0' : '_');
+                    break
+                case 'Backspace':
+                    textValue = replaceChar(cursorIndex, mandatory ? '0' : '_');
+                    await tick();
+                    moveCursor(cursorIndex > 0 ? -1 : 0);
+                    break;
+                case '0':
+                case '1':
+                case '2':
+                case '3':
+                case '4':
+                case '5':
+                case '6':
+                case '7':
+                case '8':
+                case '9':
+                    let s = replaceChar(cursorIndex, e.key);
+                    if (isValidTime(s)) {
+                        textValue = s;
+                        await tick();
+                        moveCursor(1);
+                    }
+                    break;
+                default:
+                    break
+            }
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+
+    const handleDeleteButton = async () => {
+        value = null as unknown as number;
+        textValue = emptyStr;
+        await tick();
+        cursorIndex = 0;
+        editor.setSelectionRange(cursorIndex, cursorIndex + 1);
+        editor.focus();
+    }
+
+    $: textValue = toTimeText(value);
+
+</script>
+<CommonEditor {displayMode} {style} value={toTimeText(value)} {suffix} {prefix} {disabled} {readonly} {variant} {compact} class={className}
+              showActionIcon={textValue!=emptyStr} clean={handleDeleteButton}>
+    <svelte:fragment slot="leading-icon">
+        {#if $$slots['leading-icon']}
+            <div class="editor-embed-icon">
+                <slot name="leading-icon"/>
+            </div>
+        {/if}
+    </svelte:fragment>
+    <input bind:this={editor} type="text" style="flex: 1 1 auto" bind:value={textValue} {disabled}
+           on:keydown={handleKeyDown} on:focus={handleFocusEvent} on:blur={handleBlurEvent}
+           on:mousedown={handleMouseDown}/>
+
+</CommonEditor>

package/dist/time-editor/TimeEditor.svelte.d.ts

@@ -0,0 +1,38 @@
+import { DisplayMode } from "../common/DisplayMode";
+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 TimeEditor: $$__sveltets_2_IsomorphicComponent<{
+    disabled?: boolean;
+    readonly?: boolean;
+    mandatory?: boolean;
+    precision?: "M" | "S";
+    variant?: "" | "plain" | "outlined" | "filled";
+    compact?: boolean;
+    class?: string;
+    style?: string;
+    value?: number;
+    suffix?: string;
+    prefix?: string;
+    displayMode?: DisplayMode;
+    onChange?: OnChangeHandler<number>;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'leading-icon': {};
+}, {
+    class: string;
+}, string>;
+type TimeEditor = InstanceType<typeof TimeEditor>;
+export default TimeEditor;

package/dist/time-editor/index.d.ts

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

package/dist/time-editor/index.js

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

package/dist/toast/Toast.d.ts

@@ -0,0 +1,6 @@
+export type ShowToast = (msg: string, type?: "error" | "info" | "success", duration?: number) => void;
+export default interface Toast {
+    show: ShowToast;
+}
+declare const initialize: (show: ShowToast) => void;
+export { initialize };

package/dist/toast/Toast.js

@@ -0,0 +1,6 @@
+const initialize = (show) => {
+    window.Toast = {
+        show
+    };
+};
+export { initialize };

package/dist/toast/ToastBoard.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    import {onDestroy, onMount} from "svelte";
+    import {fly} from "svelte/transition";
+    import {initialize, type ShowToast} from "./Toast";
+
+    export let fromBottom: boolean = false;
+    let message: string;
+    let timer = 0;
+    let interval:any = null;
+    let infoType: string;
+    let height: string = "height: 0";
+    let gap: number = 0;
+
+    export const show: ShowToast = (msg: string, type: "error" | "info" | "success" = "error", duration: number = 3) => {
+        message = msg;
+        infoType = type;
+        visible = true;
+        timer = duration * 1000;
+        if (interval == null) {
+            height = "height: 48px";
+            interval = setInterval(()=>{
+                timer -= 100;
+                if (timer <= 0) {
+                    visible = false;
+                    clearInterval(interval);
+                    interval = null;
+                }
+            }, 100);
+        }
+
+    }
+
+
+    let board:any;
+    let visible: boolean = false;
+    let style: string = "";
+
+    $: style = fromBottom ? `bottom: ${gap}px` : `top: ${gap}px`;
+
+    onMount(() => {
+        document.body.appendChild(board);
+        initialize(show)
+        return () => {
+            board && board.remove();
+        };
+    });
+
+    onDestroy(() => {
+        board && board.remove();
+    });
+
+//
+
+</script>
+<div bind:this={board} class="uniface-toast-board" style="{height}; {style}">
+    {#if visible}
+        <div transition:fly={{duration: 300, y: fromBottom ? "100%" : "-100%"}} on:outroend={() => {height="height: 0"}} class={infoType}  style="padding: 0 18px">
+            <span>{message}</span>
+        </div>
+    {/if}
+</div>

package/dist/toast/ToastBoard.svelte.d.ts

@@ -0,0 +1,24 @@
+import { type ShowToast } from "./Toast";
+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 ToastBoard: $$__sveltets_2_IsomorphicComponent<{
+    fromBottom?: boolean;
+    show?: ShowToast;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    show: ShowToast;
+}, string>;
+type ToastBoard = InstanceType<typeof ToastBoard>;
+export default ToastBoard;

package/dist/toast/index.d.ts

@@ -0,0 +1,4 @@
+import ToastBoard from "./ToastBoard.svelte";
+import type Toast from "./Toast";
+export type { Toast };
+export default ToastBoard;

package/dist/toast/index.js

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

package/dist/transfer-field/TransferField.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+    import ListBox from "../list-box";
+    import IconButton from "../button";
+    import {onMount, SvelteComponent} from "svelte";
+    import type {FunFilter} from "./types";
+
+    export let height: string = '';
+    export let width: string = '';
+    export let style: string = '';
+    export let sourceList = [];
+    export let disabled: boolean = false;
+    export let itemRender: SvelteComponent = null;
+    export let filter: FunFilter = null;
+    export let sourceSelectedList = [];
+    export let header$style: string = '';
+    export let footer$style: string = 'width: 100%; background-color: #f0f0f0; padding: 2px 6px; text-align: right; box-sizing: border-box';
+    export let echoValue = [];
+    export let echoData: () => void;
+
+    let targetList = [];
+    let targetSelectedList = [];
+    let sourceSelectedItem = null;
+    let targetSelectedItem = null;
+
+    const moveToTarget = () => {
+        if (sourceSelectedList.length > 0) {
+            targetList = [...targetList, ...sourceSelectedList];
+            sourceList = sourceList.filter(item => sourceSelectedList.indexOf(item) === -1);
+            sourceSelectedList = [];
+        } else if (sourceSelectedItem) {
+            targetList = [...targetList, sourceSelectedItem];
+            sourceList = sourceList.filter(item => item !== sourceSelectedItem);
+            sourceSelectedItem = null;
+        }
+    }
+
+    const moveToSource = () => {
+        if (targetSelectedList.length > 0) {
+            sourceList = [...sourceList, ...targetSelectedList];
+            targetList = targetList.filter(item => targetSelectedList.indexOf(item) === -1);
+            targetSelectedList = [];
+        } else if (targetSelectedItem) {
+            sourceList = [...sourceList, targetSelectedItem];
+            targetList = targetList.filter(item => item !== targetSelectedItem);
+            targetSelectedItem = null;
+        }
+    }
+
+    onMount(() => {
+        if (echoValue.length > 0) {
+            targetList = [...targetList, ...echoValue];
+            sourceList = sourceList.filter(item => echoValue.indexOf(item) === -1);
+        }
+    })
+
+    $: {
+        if (echoData) {
+            echoData();
+        }
+    }
+
+</script>
+
+<div class="container" style="height: {height}px; width: {width}px">
+    <ListBox class="list-container" {filter} {style} list={sourceList} selectMode="multiple" bind:selectedList={sourceSelectedList}
+             {itemRender} bind:selectedItem={sourceSelectedItem}>
+        <div slot="header" style={header$style}>
+            <slot name="sourceHeader"></slot>
+        </div>
+        <div slot="footer" style={footer$style}>
+            <span>选中：{sourceSelectedList.length}/{sourceList.length}</span>
+        </div>
+    </ListBox>
+    <div class="icon-button-container">
+        <IconButton on:click={moveToSource} type="primary" disabled={targetSelectedList.length === 0}>
+            <i class="uniface-icon-chevron-left"></i>
+        </IconButton>
+        <IconButton on:click={moveToTarget} type="primary" disabled={sourceSelectedList.length === 0}>
+            <i class="uniface-icon-chevron-right"></i>
+        </IconButton>
+    </div>
+    <ListBox class="list-container" {style} {filter} list={targetList} selectMode="multiple" bind:selectedList={targetSelectedList}
+             {itemRender} bind:selectedItem={targetSelectedItem}>
+        <div slot="header" style={header$style}>
+            <slot name="targetHeader"></slot>
+        </div>
+        <div slot="footer" style={footer$style}>
+            <span>选中：{targetSelectedList.length}/{targetList.length}</span>
+        </div>
+    </ListBox>
+</div>

package/dist/transfer-field/TransferField.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+import type { FunFilter } from "./types";
+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 TransferField: $$__sveltets_2_IsomorphicComponent<{
+    height?: string;
+    width?: string;
+    style?: string;
+    sourceList?: any[];
+    disabled?: boolean;
+    itemRender?: SvelteComponent;
+    filter?: FunFilter;
+    sourceSelectedList?: any[];
+    header$style?: string;
+    footer$style?: string;
+    echoValue?: any[];
+    echoData: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    sourceHeader: {};
+    targetHeader: {};
+}, {}, string>;
+type TransferField = InstanceType<typeof TransferField>;
+export default TransferField;

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

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

package/dist/transfer-field/index.js

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

package/dist/transfer-field/types.d.ts

@@ -0,0 +1,6 @@
+export interface LoadResult {
+    hasMore: boolean;
+    list: Array<any>;
+}
+export type FunFilter = (item: any, text: string) => boolean;
+export type LazyLoader = (text: string) => Promise<LoadResult>;

package/dist/transfer-field/types.js

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

package/dist/tree-view/TreeNode.d.ts

@@ -0,0 +1,52 @@
+export type OnNodeSelectionChange = (node: TreeNode) => Promise<boolean>;
+export default interface TreeNode {
+    /**
+     * 节点的值
+     */
+    value: string;
+    /**
+     * 节点的文字
+     */
+    text: string;
+    /**
+     * 对应节点的数据
+     */
+    data?: any;
+    /**
+     * 子节点
+     */
+    children?: Array<TreeNode> | null;
+    /**
+     * 父节点
+     */
+    parent?: TreeNode | null;
+    /**
+     * 是否是叶节点
+     */
+    isLeaf?: boolean;
+}
+/**
+ * 节点是否显示
+ */
+export type NodeVisibleFun = (node: TreeNode) => boolean;
+/**
+ * 检查当前是否是叶节点
+ */
+export type CheckBranchFun = (item: TreeNode) => boolean;
+/**
+ * 加载子节点
+ */
+export type LoadChildrenFun = (item: TreeNode) => Promise<Array<TreeNode>>;
+/**
+ * 按需数据加载器
+ */
+export interface LazyLoader {
+    /**
+     * 检查是否是枝节点
+     */
+    isBranch: CheckBranchFun;
+    /**
+     * 数据加载器
+     */
+    load: LoadChildrenFun;
+}

package/dist/tree-view/TreeNode.js

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

package/dist/tree-view/TreeNodeView.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+    import type TreeNode from "./TreeNode";
+    import type {LazyLoader, NodeVisibleFun, OnNodeSelectionChange} from "./TreeNode";
+    import iconLoading from "../assets/loading.gif"
+    import utils from "../common/utils";
+    import type {OnContextMenu} from "../context-menu/ContextMenuItem";
+
+    export let node: TreeNode;
+    export let lazyLoader: LazyLoader;
+    export let activeNode: any;
+    export let isVisible: NodeVisibleFun;
+    export let level: number = 1;
+    export let dispLevels: number = 1;
+    export let onContextMenu: OnContextMenu;
+    export let onNodeSelectionChange: OnNodeSelectionChange;
+
+
+    let expanded: boolean = dispLevels <= level;
+    let loading: boolean = false;
+
+    const isBranch = () => {
+        return lazyLoader == null ? (node.children && node.children.length > 0) : lazyLoader.isBranch(node);
+    }
+
+    const loadChildren = async () => {
+        if (node.children == null && lazyLoader != null) {
+            try {
+                loading = true;
+                node.children = await lazyLoader.load(node);
+            } finally {
+                loading = false;
+            }
+        }
+    }
+
+    const handleNodeIconClick = async (e: MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (respond) {
+            respond = false;
+            if (isBranch()) {
+                expanded = !expanded;
+                await loadChildren();
+            }
+            dispLevels = expanded ? level + 1 : level;
+            await utils.sleep(0.2);
+            respond = true;
+        }
+    }
+
+    let respond: boolean = true;
+    const handleNodeClick = async (e: MouseEvent) => {
+        if (respond) {
+            respond = false;
+            await onNodeSelectionChange(node);
+            await utils.sleep(0.2);
+            respond = true;
+        }
+    }
+
+    $: expanded = dispLevels > level;
+
+    const handleContextMenu = (event: MouseEvent) => {
+        onContextMenu?.(event, node);
+    }
+
+</script>
+
+
+{#if isVisible == null || isVisible(node)}
+    <div class="tree-node" class:expanded>
+        <div class="node-item" class:selected={activeNode===node} on:click={handleNodeClick} aria-hidden="true"
+             on:contextmenu={handleContextMenu}>
+            <div class="item-icon">
+                {#if loading}
+                    <img alt="" style="cursor: default" src={iconLoading}/>
+                {:else }
+                    <span aria-hidden="true" on:click={handleNodeIconClick}>{expanded ? '▼' : '▶'}</span>
+                {/if}
+            </div>
+            <div class="item-icon" style="margin-left: 4px;">
+                <i class={isBranch() ? "uniface-icon-folder" : "uniface-icon-file"}
+                   aria-hidden="true"></i>
+            </div>
+            <span class="item-text">{node.text}</span>
+        </div>
+        {#if expanded && node.children}
+            <div class="sub-tree">
+                {#each node.children as child}
+                    <svelte:self node={child} {lazyLoader} {onContextMenu}
+                                 {dispLevels} {isVisible} level={level+1} {activeNode} {onNodeSelectionChange}/>
+                {/each}
+            </div>
+        {/if}
+    </div>
+{/if}