@ticatec/uniface-element 0.1.9

package/dist/tree-view/TreeNodeView.svelte.d.ts

@@ -0,0 +1,30 @@
+import type TreeNode from "./TreeNode";
+import type { LazyLoader, NodeVisibleFun, OnNodeSelectionChange } from "./TreeNode";
+import type { OnContextMenu } from "../context-menu/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 TreeNodeView: $$__sveltets_2_IsomorphicComponent<{
+    node: TreeNode;
+    lazyLoader: LazyLoader;
+    activeNode: any;
+    isVisible: NodeVisibleFun;
+    level?: number;
+    dispLevels?: number;
+    onContextMenu: OnContextMenu;
+    onNodeSelectionChange: OnNodeSelectionChange;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TreeNodeView = InstanceType<typeof TreeNodeView>;
+export default TreeNodeView;

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

@@ -0,0 +1,10 @@
+import type TreeNode from "./TreeNode";
+/**
+ * 把数组构建成一棵树
+ * @param arr
+ * @param keyField
+ * @param textField
+ * @param parentField
+ * @param rootParentCode
+ */
+export declare const buildTree: (arr: Array<any>, keyField: string, textField: string, parentField: string, rootParentCode?: string | null) => Array<TreeNode>;

package/dist/tree-view/TreeUtils.js

@@ -0,0 +1,36 @@
+/**
+ *
+ * @param data
+ * @param keyField
+ * @param textField
+ * @param parentField
+ * @param parentCode
+ * @param parent
+ */
+const convertArrayToTree = (data, keyField, textField, parentField, parentCode = null, parent = null) => {
+    let nodes = [];
+    for (let i = 0; i < data.length; i++) {
+        let pCode = data[i][parentField];
+        if ((parentCode == null && pCode == null) || (pCode == parentCode)) {
+            let code = data[i][keyField];
+            let node = { value: code, text: data[i][textField], data: data[i], parent };
+            let children = convertArrayToTree(data, keyField, textField, parentField, code, node);
+            if (children.length > 0) {
+                node.children = children;
+            }
+            nodes.push(node);
+        }
+    }
+    return nodes;
+};
+/**
+ * 把数组构建成一棵树
+ * @param arr
+ * @param keyField
+ * @param textField
+ * @param parentField
+ * @param rootParentCode
+ */
+export const buildTree = (arr, keyField, textField, parentField, rootParentCode = null) => {
+    return convertArrayToTree(arr, keyField, textField, parentField, rootParentCode);
+};

package/dist/tree-view/TreeView.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+
+    import type TreeNode from "./TreeNode";
+    import type {LazyLoader, NodeVisibleFun, OnNodeSelectionChange} from "./TreeNode";
+    import TreeNodeView from "./TreeNodeView.svelte";
+    import type {OnContextMenu} from "../context-menu/ContextMenuItem";
+
+
+    export let nodes: Array<TreeNode>;
+    export let style: string = "";
+    export let lazyLoader: LazyLoader;
+    export let activeNode: any = null;
+    export {className as class};
+    export let isVisible: NodeVisibleFun = null as unknown as NodeVisibleFun;
+    export let onSelectionChange: OnNodeSelectionChange = null as unknown as OnNodeSelectionChange;
+    export let onContextMenu: OnContextMenu = null as unknown as OnContextMenu;
+
+    let className: string = "";
+
+    const onNodeSelectionChange = async (node: TreeNode): Promise<boolean> => {
+        let accept: boolean = (await onSelectionChange?.(node));
+        accept = accept == null ? true : accept;
+        if (accept == null || accept == true) {
+            activeNode = node;
+        }
+        return accept;
+    }
+
+</script>
+<div class="uniface-tree-view {className}" {style}>
+    <div>
+        {#each nodes as node}
+            <TreeNodeView {activeNode} {node} {lazyLoader} {isVisible} {onNodeSelectionChange} {onContextMenu}/>
+        {/each}
+    </div>
+</div>

package/dist/tree-view/TreeView.svelte.d.ts

@@ -0,0 +1,32 @@
+import type TreeNode from "./TreeNode";
+import type { LazyLoader, NodeVisibleFun, OnNodeSelectionChange } from "./TreeNode";
+import type { OnContextMenu } from "../context-menu/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 TreeView: $$__sveltets_2_IsomorphicComponent<{
+    nodes: Array<TreeNode>;
+    style?: string;
+    lazyLoader: LazyLoader;
+    activeNode?: any;
+    class?: string;
+    isVisible?: NodeVisibleFun;
+    onSelectionChange?: OnNodeSelectionChange;
+    onContextMenu?: OnContextMenu;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    class: string;
+}, string>;
+type TreeView = InstanceType<typeof TreeView>;
+export default TreeView;

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

@@ -0,0 +1,7 @@
+import TreeView from "./TreeView.svelte";
+import type TreeNode from "./TreeNode";
+import type { LazyLoader, NodeVisibleFun, OnNodeSelectionChange, CheckBranchFun, LoadChildrenFun } from "./TreeNode";
+import { buildTree } from "./TreeUtils";
+export default TreeView;
+export { buildTree };
+export type { TreeNode, LazyLoader, NodeVisibleFun, OnNodeSelectionChange, CheckBranchFun, LoadChildrenFun };

package/dist/tree-view/index.js

@@ -0,0 +1,4 @@
+import TreeView from "./TreeView.svelte";
+import { buildTree } from "./TreeUtils";
+export default TreeView;
+export { buildTree };

package/dist/unit-number-editor/README.md

@@ -0,0 +1,26 @@
+# NumberEditor
+
+## 使用方法
+
+```sveltehtml
+<NumberEditor filled max={500} suffix="KG" compact/>
+```
+
+## 属性
+| 属性            | 描述               | 类型              |
+|---|------------------|-----------------|
+| 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/unit-number-editor/UnitNumberEditor.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+
+    import {DisplayMode} from "../common/DisplayMode";
+    import CommonEditor from "../common-editor/CommonEditor.svelte";
+    import {onMount} from "svelte";
+    import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import Popover from "../common/Popover.svelte";
+    import type UnitOption from "./UnitOption";
+    import NumberInput from "../common-editor/NumberInput.svelte";
+
+
+    export let disabled: boolean = false;
+    export let readonly: boolean = false;
+    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
+    export let compact: boolean = false;
+    export {className as class};
+    export let style: string = '';
+    export let value: number | null;
+    export let prefix: string = '';
+    export let allowNegative: boolean = false;
+    export let displayMode: DisplayMode = DisplayMode.Edit;
+    export let removable: boolean = true;
+    export let unitCode: string = null as unknown as string;
+    export let onChange: OnChangeHandler<number | null> = null as unknown as OnChangeHandler<number | null>;
+    export let units: Array<UnitOption>;
+    export let menu$height: number = 0;
+    export let placeholder: string = '';
+
+
+    let className: string = '';
+    let editor: any;
+    let unit: UnitOption = null as unknown as UnitOption;
+    let standardUnit: UnitOption | undefined;
+
+    let unitValue: number | null = value;
+
+    let showPopup: boolean = false;
+    let divPanel: any;
+    let mh;
+
+    $: mh = `height: ${menu$height > 0 ? menu$height + 'px' : 'auto'}`;
+
+    const openPopup = () => {
+        showPopup = true;
+    }
+
+    const handleValueChange = (uv: number | null) => {
+        if (uv == null) {
+            value = null;
+        } else if (standardUnit) {
+            value = uv / (unit.ratio ?? 1)
+        } else {
+            value = uv;
+        }
+        onChange?.()
+    }
+
+    const handleUnitClick = (item: any) => (e: MouseEvent) => {
+        unit = item;
+        unitCode = unit.code;
+        if (standardUnit == null) {
+            onChange?.(value);
+        }
+        showPopup = false;
+        calculateUnitValue();
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+    const calculateUnitValue = () => {
+        if (standardUnit) {
+            unitValue = value == null ? null : value * (unit.ratio ?? 1)
+        } else {
+            unitValue = value
+        }
+    }
+    const clean = () => {
+        value = null;
+        unitValue = null;
+        editor.setFocus();
+    }
+
+
+    onMount(async () => {
+        unit = units.find(item => item.code == unitCode) ?? units[0];
+        standardUnit = units.find(item => item.ratio == 1);
+        calculateUnitValue();
+    })
+
+    const determineValueChangeFormOutside = (uc: string, v: number | null) => {
+        unit = units.find(item => item.code == uc) ?? units[0];
+        calculateUnitValue();
+    }
+
+    $: determineValueChangeFormOutside(unitCode, value);
+
+</script>
+
+<div bind:this={divPanel}>
+    <CommonEditor {displayMode} {style} {value} {prefix} suffix={unit?.text??unit?.code} {readonly} {variant} {compact} class={className}
+                  showActionIcon={removable && !readonly && !disabled && value != null} {clean}>
+        <svelte:fragment slot="leading-icon">
+            {#if $$slots['leading-icon']}
+                <div class="editor-embed-icon">
+                    <slot name="leading-icon"/>
+                </div>
+            {/if}
+        </svelte:fragment>
+        <NumberInput bind:this={editor} style="flex: 1 1 auto" {disabled} {placeholder} bind:value={unitValue} precision={unit?.precision}
+                     {allowNegative}
+                     max={unit?.max} min={unit?.min} {readonly} onChange={handleValueChange}/>
+        <div class="editor-embed-icon" slot="trailing-icon">
+            {#if !disabled && !readonly}
+                <i class="option-dropdown uniface-icon-chevron-down" aria-hidden="true" on:click={openPopup}></i>
+            {/if}
+        </div>
+    </CommonEditor>
+
+    {#if showPopup}
+        <Popover target={divPanel} autoFit={false} align="right" on:close={()=>{showPopup=false}}>
+            <div class="options-popover" style="min-width: 90px; box-sizing: border-box; text-align: center; {mh}" >
+                {#each units as op}
+                    <div style="padding-left: 12px; padding-right: 12px" on:click={handleUnitClick(op)} aria-hidden="true">
+                        <span>{op.text ?? op.code}</span>
+                    </div>
+                {/each}
+            </div>
+        </Popover>
+    {/if}
+</div>

package/dist/unit-number-editor/UnitNumberEditor.svelte.d.ts

@@ -0,0 +1,42 @@
+import { DisplayMode } from "../common/DisplayMode";
+import type { OnChangeHandler } from "../common/OnChangeHandler";
+import type UnitOption from "./UnitOption";
+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 UnitNumberEditor: $$__sveltets_2_IsomorphicComponent<{
+    disabled?: boolean;
+    readonly?: boolean;
+    variant?: "" | "plain" | "outlined" | "filled";
+    compact?: boolean;
+    class?: string;
+    style?: string;
+    value: number | null;
+    prefix?: string;
+    allowNegative?: boolean;
+    displayMode?: DisplayMode;
+    removable?: boolean;
+    unitCode?: string;
+    onChange?: OnChangeHandler<number | null>;
+    units: Array<UnitOption>;
+    menu$height?: number;
+    placeholder?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'leading-icon': {};
+}, {
+    class: string;
+}, string>;
+type UnitNumberEditor = InstanceType<typeof UnitNumberEditor>;
+export default UnitNumberEditor;

package/dist/unit-number-editor/UnitOption.d.ts

@@ -0,0 +1,26 @@
+export default interface UnitOption {
+    /**
+     * 单位编码
+     */
+    code: string;
+    /**
+     * 单位文字
+     */
+    text?: string;
+    /**
+     * 标准比例
+     */
+    ratio?: number;
+    /**
+     * 小数位
+     */
+    precision?: number | null;
+    /**
+     * 最大值
+     */
+    max?: number | null;
+    /**
+     * 最小值
+     */
+    min?: number | null;
+}

package/dist/unit-number-editor/UnitOption.js

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

package/dist/unit-number-editor/index.d.ts

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

package/dist/unit-number-editor/index.js

@@ -0,0 +1,3 @@
+import UnitNumberEditor from "./UnitNumberEditor.svelte";
+export default UnitNumberEditor;
+export {};

package/dist/utils/exclude.d.ts

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

package/dist/utils/exclude.js

@@ -0,0 +1,3 @@
+"use strict";
+const exclude = (obj, props) => {
+};

package/dist/utils/prefixFilter.d.ts

@@ -0,0 +1,2 @@
+declare const prefixFilter: (attrs: any, prefix: string, excludes?: Array<string>) => any;
+export default prefixFilter;

package/dist/utils/prefixFilter.js

@@ -0,0 +1,15 @@
+const prefixFilter = (attrs, prefix, excludes = []) => {
+    let obj = {};
+    let len = prefix.length;
+    for (let attr in attrs) {
+        if (attr.startsWith(prefix) && attr.length > len) {
+            let newAttr = attr.substring(len);
+            if (excludes.indexOf(newAttr) < 0) {
+                // @ts-ignore
+                obj[newAttr] = attrs[attr];
+            }
+        }
+    }
+    return obj;
+};
+export default prefixFilter;