@ticatec/uniface-element 0.1.10 → 0.1.12

package/dist/base-calendar/dateUtils.js

@@ -1,4 +1,4 @@
-import dayjs from "dayjs";
+import dayjs, { isDayjs } from "dayjs";
 /**
  * 获取今日的日期，时间清空
  */

package/dist/cascade-options-select/CascadeOptionSelect.svelte

@@ -3,9 +3,10 @@
     import {DisplayMode} from "../common/DisplayMode";
     import iconLoading from "../assets/loading.gif";
     import OptionsBox from "./OptionsBox.svelte";
-    import {tick} from "svelte";
+    import {onMount, tick} from "svelte";
     import CommonPicker from "../common/CommonPicker.svelte";
     import type {OnChangeHandler} from "../common/OnChangeHandler";
+    import type {IsLeafDetermine} from "./isLeafDetermine";
 
     type OnSelectOption = (item: any) => Promise<Array<any>>;
 
@@ -18,12 +19,14 @@
     export let keyField: string = "code";
     export let textField: string = "text";
     export let abbrField: string = 'abbr';
+    export let childrenField: string = 'children';
     export let style: string = '';
     export let placeholder: string = "";
     export let displayMode: DisplayMode = DisplayMode.Edit;
     export let emptyText: string | null = null;
+    export let checkLeaf: IsLeafDetermine | null = null;
     export let text: string = '';
-    export let nodes: Array<Array<any>> = [];
+    export let nodes: Array<any> = [];
     export let menu$height: number = 150;
     export let onSelect: OnSelectOption;
     export let box$style: string = "";
@@ -32,22 +35,45 @@
     let oldValue = value;
     let selectedItems: Array<any> = [];
     let busy: boolean = false;
+    let list: Array<Array<any>> = [];
+
+    onMount(async () => {
+        list = [...nodes];
+    })
 
     const selectOption = (level: number) => async (item: any) => {
         value = item?.[keyField];
-        let newArr = nodes.slice(0, level + 1)
+        let newList = list.slice(0, level + 1)
         if (level == 0) {
             selectedItems = [item];
         } else {
             selectedItems = [...selectedItems.slice(0, level), item];
         }
-        busy = true;
-        let list = await (onSelect?.(item));
-        busy = false;
-        if (list && list.length > 0) {
-            nodes = [...newArr, list];
-            await tick();
-            contentPanel.scrollLeft = contentPanel.scrollWidth;
+        let isLeaf = checkLeaf == null ? false : checkLeaf(item);
+        if (!isLeaf) {
+            if (item[childrenField] == null && onSelect != null) {
+                busy = true;
+                let children = (await (onSelect(item))) ?? [];
+                busy = false;
+                item[childrenField] = children;
+                if (children.length > 0) {
+                    list = [...newList, children];
+                    await tick();
+                    contentPanel.scrollLeft = contentPanel.scrollWidth;
+                } else {
+                    showPopup = false;
+                }
+            } else {
+
+                if (item[childrenField] && item[childrenField].length > 0) {
+                    console.log('存在子节点')
+                    list = [...newList, item[childrenField]];
+                    await tick();
+                    contentPanel.scrollLeft = contentPanel.scrollWidth;
+                } else {
+                    showPopup = false;
+                }
+            }
         } else {
             showPopup = false;
         }
@@ -68,6 +94,8 @@
 
     $: mh = `height: ${menu$height}px`;
 
+    $: list = [...nodes];
+
     $: text = selectedItems && selectedItems.length > 0 ? selectedItems[selectedItems.length - 1][textField] : emptyText ?? '';
 
     const cleanData = () => {
@@ -91,7 +119,7 @@
     <div class="cascade-options-popover" style={mh} slot="popup-panel">
         <div style="width: 100%; height: 100%; position: relative">
             <div bind:this={contentPanel} style="width: 100%; height: 100%; display: flex; flex-direction: row; overflow: auto">
-                {#each nodes as node, idx}
+                {#each list as node, idx}
                     <OptionsBox options={node} {keyField} textField={abbrField} {box$style} onSelect={selectOption(idx)}
                                 selectedItem={selectedItems[idx]}/>
                 {/each}

package/dist/cascade-options-select/isLeafDetermine.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 判断当前节点是否为末端节点
+ */
+export type IsLeafDetermine = (item: any) => boolean;

package/dist/cascade-options-select/isLeafDetermine.js

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

package/dist/common/FullscreenOverlay.svelte

@@ -9,7 +9,7 @@
 {#if visible}
     <Portal target="body">
         <div class="uniface-mask-overlay">
-            <div style="position: relative; width: 100%; height: 100%;"
+            <div style="position: relative; width: 100%; height: 100%; overflow: hidden"
                  on:click={()=>{visible = false}} aria-hidden="true">
                 <slot></slot>
             </div>

package/dist/common-editor/DateInput.svelte

@@ -3,7 +3,7 @@
     import type {OnChangeHandler} from "../common/OnChangeHandler";
     import type {UniDate} from "../base-calendar/dateUtils";
     import {DateFormats} from "../common/DateFormats";
-    import dateUtils from "../common/date-utils";
+    import dateUtils from "../base-calendar/dateUtils";
 
     export let disabled: boolean = false;
     export let readonly: boolean = false;

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

@@ -45,15 +45,18 @@
 
 </script>
 
-<div class="action-panel" bind:this={panel}  style="user-select: none; width: {actionsColumn.width}px;">
+<div class="action-panel" bind:this={panel} style="user-select: none; width: {actionsColumn.width}px;">
     <div bind:this={scrollPanel} class="scroll-panel" on:scroll|passive={handleActionPanelScroll}>
-        {#each rows as row, idx}
-            <ActionsRow {row} {rowHeight} parentRect={rect} alternative={idx % 2 == 1} width={actionsColumn.width} actions={actionsColumn.getActions(row)}/>
-            {#if row == expandRow}
-                <div class="inline-panel" style="height: {inlineRowHeight??0}px">
-                </div>
-            {/if}
-        {/each}
+        <div>
+            {#each rows as row, idx}
+                <ActionsRow {row} {rowHeight} parentRect={rect} alternative={idx % 2 == 1} width={actionsColumn.width}
+                            actions={actionsColumn.getActions(row.data)}/>
+                {#if row == expandRow}
+                    <div class="inline-panel" style="height: {inlineRowHeight??0}px">
+                    </div>
+                {/if}
+            {/each}
+        </div>
     </div>
     <div class="bottom-mask-overlay">
         <!-- 用于匹配中间数据区域的滚动条 -->

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

@@ -27,7 +27,7 @@
 
     $: if (row.selected != selected) {
         row.selected = selected;
-        handleRowSelectChange(row.selected);
+        handleRowSelectChange(row);
     }
 
     $: style = rowHeight== null ? '' : `height: ${rowHeight}px`

package/dist/date-picker/TimePanel.svelte

@@ -4,7 +4,7 @@
     import dayjs from "dayjs";
     import type {OnChangeHandler} from "../common/OnChangeHandler";
     import type {UniDate} from "../base-calendar/dateUtils";
-    import {dateUtils} from "../../lib/base-calendar";
+    import dateUtils from "../base-calendar/dateUtils";
 
     export let value: UniDate;
     export let style: string = '';

package/dist/text-editor/TextEditor.svelte

@@ -41,7 +41,7 @@
 
 </script>
 <CommonEditor {displayMode} {style} {value} {suffix} {prefix} {readonly} {disabled} {variant} {compact}
-              showActionIcon={!readonly && !disabled && removable && value?.length > 0}
+              showActionIcon={!readonly && !disabled && removable && value?.length > 0} placeholder={input$['placeholder']}
               class={className} clean={clean}>
     <svelte:fragment slot="leading-icon">
         {#if $$slots['leading-icon']}

package/dist/ticatec-uniface-web.css

@@ -203,6 +203,9 @@
   --uniface-context-menu-box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
 }
 
+.uniface-common-picker {
+  padding: 0 8px;
+}
 .uniface-common-picker .editor-dropdown {
   visibility: hidden;
   margin-left: 8px;
@@ -213,7 +216,6 @@
   font-size: 18px;
   color: var(--uniface-editor-text-color, #374151);
   align-self: center;
-  margin-right: 4px;
   cursor: pointer;
 }
 .uniface-common-picker .action-icon:active {
@@ -3632,6 +3634,11 @@
   flex-wrap: nowrap;
   flex-direction: row;
   align-items: center;
+  background-color: var(--uniface-data-table-background-color, #ffffff);
+  height: 36px;
+}
+.uniface-data-table .table-row.alternative {
+  background-color: var(--uniface-data-table-background-color, #f7f7f7);
 }
 .uniface-data-table.row-border .table-row {
   border-bottom: 1px solid var(--uniface-data-table-row-border-color, #f0f0f0);

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

@@ -50,3 +50,11 @@ export interface LazyLoader {
      */
     load: LoadChildrenFun;
 }
+/**
+ * 判断是否是根节点
+ */
+export type RootDetermine = (item: any) => boolean;
+/**
+ * 层级排序
+ */
+export type NodeLevelCompare = (e1: any, e2: any) => number;

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

@@ -1,10 +1,6 @@
 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>;
+import type { NodeLevelCompare, RootDetermine } from "./TreeNode";
+declare const _default: {
+    buildTreeNode: (list: Array<any>, idKey: string, joinKey: string, textField: string, valueField?: string, isRoot?: RootDetermine, sortFun?: NodeLevelCompare) => Array<TreeNode>;
+};
+export default _default;

package/dist/tree-view/TreeUtils.js

@@ -1,36 +1,53 @@
 /**
- *
- * @param data
- * @param keyField
- * @param textField
- * @param parentField
- * @param parentCode
- * @param parent
+ * 将一个数组转换成树状结构
+ * @param list 待转换的数组
+ * @param idKey 元素的主键
+ * @param joinKey 父子间连接字段
+ * @param valueField 取值的字段
+ * @param textField 显示文字的字段
+ * @param isRoot 判断是否是根节点，如果函数不存在，通过连接字段查询，无法获取到父节点就是根节点
+ * @param sortFun 比较函数，用于曾经排序
  */
-const convertArrayToTree = (data, keyField, textField, parentField, parentCode = null, parent = null) => {
+const buildTreeNode = (list, idKey, joinKey, textField, valueField, isRoot, sortFun) => {
+    if (sortFun != null) {
+        list = list.sort(sortFun);
+    }
     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;
+    let map = new Map();
+    list.forEach(item => {
+        let node = { value: item[valueField ?? idKey], text: item[textField], data: item };
+        if (isRoot != null) {
+            if (isRoot(item)) {
+                nodes.push(node);
+                map.set(item[idKey], node);
+            }
+            else {
+                let parent = map.get(item[joinKey]);
+                if (parent != null) {
+                    parent.children = [...parent.children, node];
+                    node.parent = parent;
+                    map.set(item[idKey], node);
+                }
+                else {
+                    console.warn('Isolated node：', item);
+                }
             }
-            nodes.push(node);
         }
-    }
+        else {
+            let parent = map.get(item[joinKey]);
+            if (parent != null) {
+                parent.children = [...parent.children, item];
+                node.parent = parent;
+                map.set(item[idKey], node);
+            }
+            else {
+                nodes.push(node);
+                map.set(item[idKey], 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);
+export default {
+    buildTreeNode
 };

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

@@ -1,7 +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";
+import type { LazyLoader, NodeVisibleFun, OnNodeSelectionChange, CheckBranchFun, LoadChildrenFun, NodeLevelCompare, RootDetermine } from "./TreeNode";
+import treeUtils from "./TreeUtils";
 export default TreeView;
-export { buildTree };
-export type { TreeNode, LazyLoader, NodeVisibleFun, OnNodeSelectionChange, CheckBranchFun, LoadChildrenFun };
+export { treeUtils };
+export type { TreeNode, LazyLoader, NodeVisibleFun, OnNodeSelectionChange, CheckBranchFun, LoadChildrenFun, NodeLevelCompare, RootDetermine };

package/dist/tree-view/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "uniface web elements",
   "scripts": {
     "dev": "vite dev",
@@ -96,7 +96,7 @@
       "types": "./dist/checkbox/index.d.ts",
       "import": "./dist/checkbox/index.js"
     },
-    "./FullscreenOverlay": {
+    "./FullScreenOverlay": {
       "types": "./dist/common/FullscreenOverlay.svelte.d.ts",
       "import": "./dist/common/FullscreenOverlay.svelte"
     },

package/dist/common/date-utils.d.ts

@@ -1,5 +0,0 @@
-import type { UniDate } from "../calendar/dateUtils";
-declare const _default: {
-    formatDate: (d: UniDate, fmt: string) => string;
-};
-export default _default;

package/dist/common/date-utils.js

@@ -1,7 +0,0 @@
-import dayjs, { isDayjs } from "dayjs";
-const formatDate = (d, fmt) => {
-    return (d == null) ? '' : isDayjs(d) ? d.format(fmt) : dayjs(d).format(fmt);
-};
-export default {
-    formatDate
-};