@ticatec/uniface-element 0.1.35 → 0.1.46

package/dist/lib/TreeNodes.js

@@ -0,0 +1,172 @@
+export function compareNumber(a, b) {
+    return a === b ? 0 : a > b ? 1 : -1;
+}
+export default class TreeNodes {
+    checkIsRoot;
+    keyField;
+    parentKeyField;
+    textField;
+    nodeMap;
+    compareFun;
+    expendDeep;
+    #nodes = [];
+    constructor(options) {
+        this.checkIsRoot = options.checkIsRoot;
+        this.compareFun = options.compareFun;
+        this.keyField = options.keyField ?? 'id';
+        this.textField = options.textField ?? 'text';
+        this.parentKeyField = options.parentKeyField ?? 'parentId';
+        this.nodeMap = new Map();
+        this.expendDeep = options.expendDeep ?? 999;
+    }
+    setData(list) {
+        this.nodeMap = new Map();
+        this.#nodes = [];
+        // 初始化每个节点
+        for (const item of list) {
+            const node = {
+                item,
+                expand: true
+            };
+            const key = item[this.keyField];
+            this.nodeMap.set(key, node);
+        }
+        for (const item of list) {
+            const node = this.nodeMap.get(item[this.keyField]);
+            if (node) {
+                this.appendNode(node);
+            }
+        }
+    }
+    appendNode(node, doSort = false) {
+        let item = node.item;
+        const parentKey = item[this.parentKeyField];
+        if (this.checkIsRoot(item) || !this.nodeMap.has(parentKey)) {
+            this.#nodes.push(node);
+        }
+        else {
+            const parentNode = this.nodeMap.get(parentKey);
+            if (parentNode) {
+                parentNode.expand = true;
+                parentNode.children = [...(parentNode.children ?? []), node];
+                if (doSort && this.compareFun) {
+                    parentNode.children = parentNode.children.sort(this.compareFun);
+                }
+            }
+        }
+    }
+    collectExpandedNodes(tree) {
+        const result = [];
+        function traverse(nodes) {
+            for (const node of nodes) {
+                result.push(node);
+                if (node.expand && node.children) {
+                    traverse(node.children);
+                }
+            }
+        }
+        traverse(tree);
+        return result;
+    }
+    /**
+     * 获取展开的展示列表
+     */
+    getHierarchyList() {
+        return this.collectExpandedNodes(this.#nodes);
+    }
+    /**
+     * 获取节点
+     */
+    get nodes() {
+        return this.#nodes;
+    }
+    /**
+     * 增加一个新节点
+     * @param item
+     */
+    append(item) {
+        const node = {
+            item,
+            expand: true
+        };
+        this.appendNode(node, true);
+        this.nodeMap.set(item[this.keyField], node);
+    }
+    /**
+     * 替换一个节点的数据
+     * @param item
+     */
+    replace(item) {
+        let node = this.nodeMap.get(item[this.keyField]);
+        if (node) {
+            node.item = item;
+            let parent = this.nodeMap.get(item[this.parentKeyField]);
+            if (parent && parent.children && parent.children.length > 0) {
+                parent.children = parent.children.sort(this.compareFun);
+            }
+        }
+    }
+    remove(item) {
+        let idKey = item[this.keyField];
+        let node = this.nodeMap.get(idKey);
+        if (node) {
+            let parent = this.nodeMap.get(node.item[this.parentKeyField]);
+            this.nodeMap.delete(idKey);
+            if (parent && parent.children) {
+                let pos = parent.children.findIndex(el => el.item[this.keyField] == idKey);
+                if (pos > -1) {
+                    parent.children.splice(pos, 1);
+                }
+            }
+        }
+    }
+    /**
+     * 将一个节点移动到另外一个节点下
+     * @param item
+     * @param parentId
+     */
+    moveTo(item, parentId) {
+        let newParent = this.nodeMap.get(parentId);
+        let node = this.nodeMap.get(item[this.keyField]);
+        let currentParent = this.nodeMap.get(item[this.parentKeyField]);
+        if (newParent && node && currentParent && currentParent.children) {
+            let pos = currentParent.children.findIndex(el => el.item[this.keyField] == item[this.keyField]);
+            if (pos > -1) {
+                currentParent.children.splice(pos, 1);
+            }
+            newParent.children = [...(newParent.children ?? []), node];
+            if (this.compareFun) {
+                newParent.children = newParent.children.sort(this.compareFun);
+            }
+        }
+    }
+    extractChildrenDirectories(node, exclusiveValue) {
+        if (node.children && node.item[this.keyField] != exclusiveValue) {
+            let newNode = {
+                item: node.item,
+                expand: true,
+                children: []
+            };
+            for (let childNode of node.children) {
+                let ncNode = this.extractChildrenDirectories(childNode, exclusiveValue);
+                if (ncNode) {
+                    newNode.children?.push(ncNode);
+                }
+            }
+            return newNode;
+        }
+        else {
+            return;
+        }
+    }
+    extractDirectories(exclusiveValue) {
+        let dirNodes = [];
+        for (let node of this.nodes) {
+            let newNode = this.extractChildrenDirectories(node, exclusiveValue);
+            if (newNode) {
+                dirNodes.push(newNode);
+            }
+        }
+        return dirNodes;
+    }
+}

package/dist/list-box/ListBox.svelte

@@ -68,7 +68,6 @@
     }
 
     const lazyLoad = async (clean: boolean = true) => {
-        console.log('加载数据...')
         isBusy = true;
         try {
             let result = await lazyLoader?.(filterText, pageNo);
@@ -81,7 +80,6 @@
                 selectedItem = null;
                 filteredList = list;
                 hasMore = result.hasMore;
-                console.log('加载数据完成')
             }
         } finally {
             isBusy = false;
@@ -157,7 +155,7 @@
     let searchBox: any;
 
     const handleScroll = () => {
-        const bottom = scrollElement.scrollHeight - scrollElement.scrollTop === scrollElement.clientHeight;
+        const bottom = scrollElement.scrollHeight - scrollElement.scrollTop - scrollElement.clientHeight < 2;
         if (bottom && lazyLoader && !isBusy && hasMore) {
             fetchMore();
         }
@@ -167,18 +165,22 @@
 
 </script>
 
-<div {style} class="uniface-box {className}" class:round>
-    {#if title || $$slots['header']}
-        <slot name="header">
-            <div class="title" style={boxHeaderStyle}>
-                <span>{title}</span>
-            </div>
-        </slot>
-    {/if}
-    {#if readonly === false && (filter || lazyLoader)}
-        <div class="header-search">
-            <SearchBox bind:this={searchBox} compact variant="plain" disabled={isBusy} style="width: 100%" bind:value={filterText}
-                       onChange={handleCriteriaChange}/>
+<div {style} class="uniface-listbox {className}" class:round>
+    {#if title || $$slots['header'] || (readonly === false && (filter || lazyLoader))}
+        <div class="box-header">
+            {#if title || $$slots['header']}
+                <slot name="header">
+                    <div class="title" style={boxHeaderStyle}>
+                        <span>{title}</span>
+                    </div>
+                </slot>
+            {/if}
+            {#if readonly === false && (filter || lazyLoader)}
+                <div class="header-search">
+                    <SearchBox bind:this={searchBox} compact variant="plain" disabled={isBusy} style="width: 100%" bind:value={filterText}
+                               onChange={handleCriteriaChange}/>
+                </div>
+            {/if}
         </div>
     {/if}
     <div class="listbox-content" class:selectable={selectMode==='single'} bind:this={scrollElement} on:scroll={handleScroll}>

package/dist/lookup-editor/LookupEditor.svelte

@@ -38,7 +38,7 @@
 
 </script>
 
-<CommonPicker {displayMode} {variant} {style} {compact} className="multiple" dropDownIcon="uniface-icon-more-horizontal"
+<CommonPicker {displayMode} {variant} {style} {compact} className="multiple" dropDownIcon="icon_google_keyboard_control"
                canClean={!mandatory && value!=null} autoFit {clean} textValue={text} {readonly} {disabled} iconClickHandler={handleActionIconClick}>
     <input style="width: 100%" {placeholder} class="text-editor" readonly value={text??''} {disabled}
            on:keydown on:focus on:click={handleActionIconClick}/>

package/dist/message-box/MessageBoxBoard.svelte

@@ -114,7 +114,7 @@
                 <div style="top: {top}px; left: {left}px">
                     <div class="title-bar" aria-hidden="true" on:mousedown={handleMouseDown} on:mouseup={handleMouseUp}>
                         <div>
-                            <i class="uniface-icon-x dialog-action-button" aria-hidden="true" on:click={handleCloseClick}></i>
+                            <i class="icon_google_clear dialog-action-button" aria-hidden="true" on:click={handleCloseClick}></i>
                         </div>
                     </div>
                     <div class="box-content" style="min-height: 40px">

package/dist/navigator/Navigator.svelte

@@ -8,6 +8,7 @@
     export let items: Array<any>;
     export let activeItem: any = null;
     export let style: string = "";
+    export let highlights: Array<any> = [];
     export let itemClickHandler: ItemClickHandler;
     export let retrieveStatus: RetrieveItemStatus;
 
@@ -22,6 +23,7 @@
     <div class="navigator-content">
         {#each items as item}
             <div class="uniface-navigator-item {retrieveStatus?.(item)??NavItemStatus.Completed}" class:active={activeItem===item}
+                 class:highlight={highlights.indexOf(item)>-1}
                  aria-hidden="true" on:click={handleItemClick(item)}>
                 <span>{item.text}</span>
             </div>

package/dist/navigator/Navigator.svelte.d.ts

@@ -16,6 +16,7 @@ declare const Navigator: $$__sveltets_2_IsomorphicComponent<{
     items: Array<any>;
     activeItem?: any;
     style?: string;
+    highlights?: Array<any>;
     itemClickHandler: (item: any) => void;
     retrieveStatus: (item: any) => NavItemStatus;
 }, {

package/dist/search-box/SearchBox.svelte

@@ -48,8 +48,8 @@
 </script>
 
 <CommonEditor {variant} {compact} {style} showActionIcon={value != null && value.length > 0} {clean}>
-    <div slot='leading-icon'>
-        <i class="uniface-icon-search"></i>
+    <div slot='leading-icon' style="line-height: 16px; font-size: 18px">
+        <i class="icon_google_search"></i>
     </div>
     <input bind:this={editor} style="width: 100%" bind:value={inputText} {disabled}  on:input={handleInput} on:compositionstart={handleCompositionStart}
            on:compositionend={handleCompositionEnd} {placeholder}/>

package/dist/tabs/Tabs.svelte

@@ -1,17 +1,17 @@
 <script lang="ts">
 
-    import {onMount, onDestroy} from "svelte";
+    import {onMount, onDestroy, tick} from "svelte";
     import {Tween} from 'svelte/motion';
     import {cubicOut} from 'svelte/easing';
     import type {TabActionHandler, TabCloseHandler, TabRender} from "./types";
 
 
-
     export {className as class};
     export let simple: boolean = false;
     export let textField: string = 'text';
     export let style: string = '';
     export let tabs: Array<any> = [];
+    export let scrollStep = 100;
     export let closable: boolean | TabActionHandler = false;
     export let activeTab: any = null;
     export let tabRender: TabRender = null as unknown as TabRender;
@@ -30,25 +30,26 @@
         if (activeTab == null && tabs.length > 0) {
             activeTab = tabs[0];
         }
-
         checkOverflow();
-        container.addEventListener('scroll', checkOverflow);
         window.addEventListener('resize', checkOverflow);
-        checkOverflow();
+        container.addEventListener('scroll', checkOverflow);
     });
 
     onDestroy(() => {
         window.removeEventListener('resize', checkOverflow);
+        container.removeEventListener('scroll', checkOverflow);
     });
 
+
     const checkOverflow = () => {
         if (container) {
-            if (currentLeft + container.clientWidth > container.scrollWidth) {
+            console.log(currentLeft, container.clientWidth, container.scrollWidth);
+            if (currentLeft + container.clientWidth >= container.scrollWidth) {
                 currentLeft = container.scrollWidth - container.clientWidth;
                 scrollX.set(currentLeft);
             }
-            if (currentLeft > 0 && container.clientWidth <= container.scrollWidth) {
-                currentLeft = container.scrollWidth - container.clientWidth;
+            if (currentLeft > 0 && container.clientWidth >= container.scrollWidth) {
+                currentLeft = 0;
                 scrollX.set(currentLeft);
             }
             showRight = currentLeft + container.clientWidth < container.scrollWidth;
@@ -56,18 +57,13 @@
         }
     };
 
-    const scroll = (direction: any) => {
-        if (container) {
-            const scrollAmount = 100;
-            currentLeft = currentLeft + direction * scrollAmount;
-            if (currentLeft < 0) {
-                currentLeft = 0;
-            } else if (currentLeft + container.clientWidth > container.scrollWidth) {
-                currentLeft = container.scrollWidth - container.clientWidth + 1;
-            }
-            scrollX.set(currentLeft);
-            checkOverflow();
-        }
+    const scroll = (dir: 1 | -1) => {
+        const maxScroll = container.scrollWidth - container.clientWidth;
+        currentLeft += dir * scrollStep;
+        if (currentLeft < 0) currentLeft = 0;
+        if (currentLeft > maxScroll) currentLeft = maxScroll;
+        scrollX.set(currentLeft);
+        checkOverflow();
     };
 
 
@@ -85,18 +81,12 @@
                 tabs.splice(pos, 1);
                 tabs = [...tabs];
                 if (tab == activeTab) {
-                    if (tabs.length > 0) {
-                        if (pos > tabs.length) {
-                            pos = tabs.length - 1;
-                        }
-                        if (pos == -1) {
-                            pos = 0;
-                        }
-                        activeTab = tabs[pos];
-                    } else {
-                        activeTab = null;
+                    if (pos >= tabs.length) {
+                        pos = tabs.length - 1;
                     }
+                    activeTab = tabs[pos];
                 }
+                await tick();
                 checkOverflow();
             }
         }
@@ -107,7 +97,7 @@
     const reloadTab = (tab: any) => (e: MouseEvent) => {
         reloadHandler?.(tab);
     }
-
+    //
 
 </script>
 <div class="uniface-tab-panel {className}" {style}>
@@ -123,14 +113,14 @@
                             {#if tabRender != null}
                                 <svelte:component this={tabRender} {tab} closeTab={closeHandler != null ? closeTab(tab) : null}
                                                   reloadTab={reloadHandler != null ? reloadTab(tab) : null}
-                                                  closable={closable === true || (typeof (closable) == "function" && closable(tab))}  />
+                                                  closable={closable === true || (typeof (closable) == "function" && closable(tab))}/>
                             {:else}
                                 <span>{tab[textField]}</span>
                                 {#if reloadHandler != null}
                                     <i class="icon_google_refresh tab-refresh" on:click={reloadTab(tab)} aria-hidden="true"></i>
                                 {/if}
-                                {#if closable === true || (typeof (closable) == "function" && closable(tab))}
-                                    <i class="icon_google_clear tab-action" on:click={closeTab(tab)} aria-hidden="true"></i>
+                                {#if tabs.length > 1 && (closable === true || (typeof (closable) == "function" && closable(tab)))}
+                                    <i class="icon_google_clear tab-action" on:click|stopPropagation={closeTab(tab)} aria-hidden="true"></i>
                                 {/if}
                             {/if}
                         </div>

package/dist/tabs/Tabs.svelte.d.ts

@@ -23,6 +23,7 @@ declare const Tabs: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithC
     textField?: string;
     style?: string;
     tabs?: Array<any>;
+    scrollStep?: number;
     closable?: boolean | TabActionHandler;
     activeTab?: any;
     tabRender?: TabRender;

package/dist/tag/Tag.svelte

@@ -20,8 +20,10 @@
 
 </script>
 <div class="uniface-tag" {style}>
-    <div class="{size} {variant} {className} {colorClass}" class:removable={removable} >
+    <div class="{size} {variant} {className} {colorClass}" class:removable={removable}>
         <span>{text}</span>
-        <Icon name="icon_google_clear" clickable class="uniface-remove-icon" onClick={removeHandler}/>
+        {#if removable}
+            <Icon name="icon_google_clear" class="uniface-remove-icon" onClick={removeHandler}/>
+        {/if}
     </div>
 </div>

package/dist/text-editor/PasswordEditor.svelte

@@ -28,7 +28,7 @@
 
 
 </script>
-<CommonEditor {style} {value} type="password" {readonly} {variant} {compact} class={className}>
+<CommonEditor {style} {value} {readonly} {variant} {compact} class={className}>
     {#if type=="password"}
         <input type="password" style="flex: 1 1 auto" bind:value={value} {disabled} {...input$}
            on:blur on:focus />
@@ -36,9 +36,9 @@
         <input type="text" style="flex: 1 1 auto" bind:value={value} {disabled} {...input$}
                on:blur on:focus />
     {/if}
-    <div slot="trailing-icon" class="editor-embed-icon password-icon">
+    <div slot="trailing-icon" class="editor-embed-icon">
         {#if (!readonly && !disabled)}
-            <i class={type == "password" ? "uniface-icon-eye" : "uniface-icon-eye-off"} on:click={toggleType}></i>
+            <i class={type == "password" ? "icon_google_remove_red_eye" : "icon_google_visibility_off"} on:click={toggleType}></i>
         {/if}
     </div>
 </CommonEditor>