@ticatec/uniface-element 0.1.15 → 0.1.17

package/dist/form-field/FormField.svelte

@@ -5,18 +5,20 @@
     export {className as class}
     export let label: string = "Label:"
     export let style: string = '';
-    export let label$style: string = '';
+    export let label$style: string | null = null;
     export let required: boolean = false;
     export let error: string = '';
     export let arrangement: 'vertical' | 'horizontal' = 'vertical';
     export let labelSuffix: string = ':';
 
+    export let label$alignment: 'center' | 'top' = 'center'
+
     let className: string = '';
 
 </script>
 <div class="uniface-form-field {arrangement} {className}" {style}>
     <div class="form-content" style="width: 100%">
-        <div class="field-label" style="align-self: center; {label$style};">
+        <div class="field-label" style={label$style} class:vert-top={arrangement== 'horizontal' && label$alignment=='top'}>
             {#if required}
                 <span class="required-indicator">*</span>
             {/if}
@@ -25,14 +27,10 @@
         <div class="field">
             <slot/>
         </div>
-    </div>
-    {#if !utils.isEmpty(error)}
-        <div class="form-content" style="width: 100%">
-            {#if arrangement == "horizontal"}
-                <div class="field-label" style={label$style}>
-                </div>
-            {/if}
+        {#if !utils.isEmpty(error)}
+            <div class="empty-field"></div>
             <div class="field-hint"><span>{error}</span></div>
-        </div>
-    {/if}
+        {/if}
+    </div>
+
 </div>

package/dist/form-field/FormField.svelte.d.ts

@@ -20,11 +20,12 @@ declare const FormField: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Props
     class?: string;
     label?: string;
     style?: string;
-    label$style?: string;
+    label$style?: string | null;
     required?: boolean;
     error?: string;
     arrangement?: "vertical" | "horizontal";
     labelSuffix?: string;
+    label$alignment?: "center" | "top";
 }, {
     default: {};
 }>, {

package/dist/i18n_resources/index.d.ts

@@ -0,0 +1,3 @@
+import cn_resource from "./uniface_cn_resource";
+import en_resource from "./uniface_en_resource";
+export { cn_resource, en_resource };

package/dist/i18n_resources/index.js

@@ -0,0 +1,3 @@
+import cn_resource from "./uniface_cn_resource";
+import en_resource from "./uniface_en_resource";
+export { cn_resource, en_resource };

package/dist/i18n_resources/uniface_cn_resource.d.ts

@@ -0,0 +1,29 @@
+declare const langRes: {
+    uniface: {
+        btnClose: string;
+        btnCancel: string;
+        btnConfirm: string;
+        calendar: {
+            months: string[];
+            monthsAbbr: string[];
+            weekTitle: string[];
+            weekTitleAbbr: string[];
+            confirmText: string;
+        };
+        upload: {
+            btnCancel: string;
+            btnRetry: string;
+            btnRemove: string;
+            btnPickup: string;
+        };
+        propertyEditor: {
+            colName: string;
+            colValue: string;
+        };
+        dataTable: {
+            rowNo: string;
+            actions: string;
+        };
+    };
+};
+export default langRes;

package/dist/i18n_resources/uniface_cn_resource.js

@@ -0,0 +1,37 @@
+const langRes = {
+    uniface: {
+        btnClose: "关闭",
+        btnCancel: '取消',
+        btnConfirm: "确认",
+        calendar: {
+            months: [
+                '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
+            ],
+            monthsAbbr: [
+                '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
+            ],
+            weekTitle: [
+                "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"
+            ],
+            weekTitleAbbr: [
+                "日", "一", "二", "三", "四", "五", "六"
+            ],
+            confirmText: "确认"
+        },
+        upload: {
+            btnCancel: '取消',
+            btnRetry: "重试",
+            btnRemove: "删除",
+            btnPickup: "选择文件"
+        },
+        propertyEditor: {
+            colName: "属性",
+            colValue: "值"
+        },
+        dataTable: {
+            rowNo: "序号",
+            actions: "操作"
+        }
+    }
+};
+export default langRes;

package/dist/i18n_resources/uniface_en_resource.d.ts

@@ -0,0 +1,29 @@
+declare const langRes: {
+    uniface: {
+        btnClose: string;
+        btnCancel: string;
+        btnConfirm: string;
+        calendar: {
+            months: string[];
+            monthsAbbr: string[];
+            weekTitle: string[];
+            weekTitleAbbr: string[];
+            confirmText: string;
+        };
+        upload: {
+            btnCancel: string;
+            btnRetry: string;
+            btnRemove: string;
+            btnPickup: string;
+        };
+        propertyEditor: {
+            colName: string;
+            colValue: string;
+        };
+        dataTable: {
+            rowNo: string;
+            actions: string;
+        };
+    };
+};
+export default langRes;

package/dist/i18n_resources/uniface_en_resource.js

@@ -0,0 +1,37 @@
+const langRes = {
+    uniface: {
+        btnClose: "Close",
+        btnCancel: 'Cancel',
+        btnConfirm: "OK",
+        calendar: {
+            months: [
+                'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
+            ],
+            monthsAbbr: [
+                'Jan', 'Feb', 'Mar', 'Api', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+            ],
+            weekTitle: [
+                "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
+            ],
+            weekTitleAbbr: [
+                "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat"
+            ],
+            confirmText: "OK"
+        },
+        upload: {
+            btnCancel: 'Cancel',
+            btnRetry: "Retry",
+            btnRemove: "Delete",
+            btnPickup: "Pickup files"
+        },
+        propertyEditor: {
+            colName: "Attribute",
+            colValue: "Value"
+        },
+        dataTable: {
+            rowNo: "Row#",
+            actions: "Actions"
+        }
+    }
+};
+export default langRes;

package/dist/input-options-select/InputOptionsSelect.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 
     import {DisplayMode} from "../common/DisplayMode";
-    import Popover from "../common/Popover.svelte";
     import type {OnChangeHandler} from "../common/OnChangeHandler";
-    import CommonPicker from "../common/CommonPicker.svelte";
+    import {tick} from "svelte";
+    import type {LazyLoader} from "../list-box/types"
 
-    type OnInputHandler = (s: string) => void;
+    import loading from "../assets/loading.gif"
+    import CommonPicker from "../common/CommonPicker.svelte";
+    import i18n from "@ticatec/i18n";
 
     export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
     export let disabled: boolean = false;
@@ -13,7 +15,6 @@
     export let compact: boolean = false;
     export let text: string = '';
     export let value: any = null;
-    export let options: Array<any> = [];
     export let keyField: string = "code";
     export let textField: string = "text";
     export let menu$height: number = 0;
@@ -22,17 +23,69 @@
     export let displayMode: DisplayMode = DisplayMode.Edit;
     export let itemRender: any = null;
     export let onChange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
-    export let onInput: OnInputHandler = null as unknown as OnInputHandler;
+    export let lazyLoader: LazyLoader;
 
     let editor: any;
     let inputText: string;
     let oldValue: any = value;
+    let options: Array<any> = [];
+    let scrollElement: any;
+
+    let idleTime = 0;
+    let interval: any;
+    let pageNo: number;
+    let isBusy: boolean;
+    let hasMore: boolean;
+
+    const handleInputText = () => {
+        if ((text ?? '').trim().length > 0 && lazyLoader != null) {
+            if (interval == null) {
+                idleTime = 0;
+                interval = setInterval(delayReload, 50)
+            } else {
+                idleTime = 0;
+            }
+        }
+    }
+    const lazyLoad = async (clean: boolean = true) => {
+        console.log('开始读取数据...', text)
+        isBusy = true;
+        try {
+            let result = await lazyLoader?.(text, pageNo);
+            if (result) {
+                if (clean) {
+                    options = result.list;
+                } else {
+                    options = [...options, ...result.list];
+                }
+                hasMore = result.hasMore;
+            }
+            showPopup = true;
+        } finally {
+            isBusy = false;
+        }
+    }
+
+    const delayReload = async () => {
+        idleTime++;
+        if (idleTime > 10) {
+            clearInterval(interval);
+            interval = null;
+            pageNo = 1;
+            if (showPopup) {
+                scrollElement.scrollTop = 0;
+            }
+            await lazyLoad();
+            await tick();
+            editor.focus();
+        }
+    }
 
     const handleItemClick = (data: any) => () => {
         value = data[keyField];
         text = data[textField];
         if (value != oldValue) {
-            onChange?.(value);
+            onChange?.(data);
         }
         editor.focus();
         showPopup = false;
@@ -44,7 +97,7 @@
         if (composing == false) {
             text = inputText;
             value = null;
-            onInput?.(text);
+            handleInputText();
         }
     };
     const handleCompositionStart = (event: CompositionEvent) => {
@@ -55,31 +108,39 @@
         composing = false;
         text = inputText;
         value = null;
-        onInput?.(text);
+        handleInputText();
     };
 
-    const handleBlurEvent = (e: FocusEvent) => {
-        if (value == null) {
-            text = '';
-        }
-    }
-
     const clean = () => {
         value = null;
         text = '';
         onChange?.(value);
+        showPopup = false;
+        editor.focus();
     }
 
     let showPopup: boolean = false;
 
     let mh;
 
-    $: mh = `height: ${menu$height > 0 ? menu$height + 'px' : 'auto'}`;
+    $: mh = `min-height: 80px; height: ${menu$height > 0 ? menu$height + 'px' : 'auto'}`;
 
     $: showPopup = options && options.length > 0;
 
     $: inputText = text;
 
+    const loadMore = async () => {
+        editor.focus();
+        if (lazyLoader && !isBusy && hasMore) {
+            pageNo++;
+            await lazyLoad(false);
+        }
+    }
+
+    $: if (!showPopup && value == null) {
+        text = '';
+    }
+
 
 </script>
 <!-- 待解决浏览模式显示的问题 -->
@@ -87,21 +148,37 @@
 <CommonPicker {displayMode} {variant} {style} {compact}
               bind:showPopup canClean={value!=null} autoFit {clean} textValue={text} {readonly} {disabled}>
     <input style="width: 100%" bind:this={editor} {placeholder}
-           class="text-editor" bind:value={inputText} {disabled}
+           class="text-editor" bind:value={inputText} readonly={isBusy}
            on:input={handleInput}
-           on:compositionstart={handleCompositionStart} on:compositionend={handleCompositionEnd}
-           on:blur={handleBlurEvent} on:focus/>
-
-    <div class="options-popover" style={mh} slot="popup-panel">
+           on:compositionstart={handleCompositionStart} on:compositionend={handleCompositionEnd}/>
+    {#if isBusy}
+        <div style="position: absolute; top: 0px; bottom: 0px; right: 8px">
+            <div style="position: relative; top: 50%; transform: translateY(-50%)">
+                <img src={loading} width="16" height="16"/>
+            </div>
+        </div>
+    {/if}
+    <div class="options-popover" bind:this={scrollElement} style={mh} slot="popup-panel">
         {#each options as op}
-            {#if itemRender != null}
-                <svelte:component this={itemRender} item={op}
-                                  on:click={handleItemClick(op)}/>
-            {:else}
-                <div on:click={handleItemClick(op)} aria-hidden="true">
-                    <span>{op[textField]}</span>
-                </div>
-            {/if}
+            <div class="option-item" on:click={handleItemClick(op)} aria-hidden="true">
+                {#if itemRender != null}
+                    <svelte:component this={itemRender} item={op}/>
+                {:else}
+                    <div style="padding: 6px 8px">
+                        <span>{op[textField]}</span>
+                    </div>
+                {/if}
+            </div>
         {/each}
+        {#if hasMore}
+            <div class="more-indicator-footer" on:click={loadMore}>
+                {i18n.getText('uniface.loadMore', 'Load more')}
+            </div>
+        {/if}
+        {#if isBusy}
+            <div class="popover-mask-overlay">
+
+            </div>
+        {/if}
     </div>
 </CommonPicker>

package/dist/input-options-select/InputOptionsSelect.svelte.d.ts

@@ -1,5 +1,6 @@
 import { DisplayMode } from "../common/DisplayMode";
 import type { OnChangeHandler } from "../common/OnChangeHandler";
+import type { LazyLoader } from "../list-box/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;
@@ -20,7 +21,6 @@ declare const InputOptionsSelect: $$__sveltets_2_IsomorphicComponent<{
     compact?: boolean;
     text?: string;
     value?: any;
-    options?: Array<any>;
     keyField?: string;
     textField?: string;
     menu$height?: number;
@@ -29,10 +29,8 @@ declare const InputOptionsSelect: $$__sveltets_2_IsomorphicComponent<{
     displayMode?: DisplayMode;
     itemRender?: any;
     onChange?: OnChangeHandler<any>;
-    onInput?: (s: string) => void;
+    lazyLoader: LazyLoader;
 }, {
-    focus: FocusEvent;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
 type InputOptionsSelect = InstanceType<typeof InputOptionsSelect>;

package/dist/list-box/ListBox.svelte

@@ -1,30 +1,36 @@
 <script lang="ts">
-    import {onMount} from "svelte";
+    import {onMount, tick} from "svelte";
     import SearchBox from "../search-box"
     import type {FunFilter} from "./types";
     import type {LazyLoader} from "./types";
     import CheckBox from "../checkbox/CheckBox.svelte";
+    import Box from "../box";
+    import loading from "../assets/loading.gif"
 
     let className: string = '';
 
     type OnSelectChange = (item: any) => void;
     type OnItemDblClick = (item: any) => void;
 
-    export let readonly:boolean = false;
-    export let style: string = '';
-    export let header$style: string = '';
-    export let list:Array<any>;
+    export let readonly: boolean = false;
+    export let style: string | null = null;
+    export let header$style: string | null = null;
+    export let list: Array<any>;
     export let itemRender: any;
     export let selectMode: 'none' | 'single' | 'multiple' = 'none';
-    export let filter: FunFilter | null;
+    export let filter: FunFilter | null = null;
     export let lazyLoader: LazyLoader | null = null;
     export let selectedItem: any = null;
     export let selectedList: Array<any> = [];
     export {className as class};
     export let item$props: any = null;
-    export let onSelectChange: OnSelectChange= null as unknown as OnSelectChange;
+    export let onSelectChange: OnSelectChange = null as unknown as OnSelectChange;
     export let onItemDblClick: OnItemDblClick = null as unknown as OnItemDblClick;
 
+    export let title: string = null as unknown as string;
+    export let round: boolean = false;
+    export let footer$style: string | null = null;
+
     let filterText: string;
     let hasMore: boolean;
     let isBusy: boolean = false;
@@ -32,8 +38,8 @@
 
     let filteredList: Array<any>;
 
-    const handleItemClick = (item:any) => (e: MouseEvent) => {
-        if (selectMode == 'single' && readonly==false) {
+    const handleItemClick = (item: any) => (e: MouseEvent) => {
+        if (selectMode == 'single' && readonly == false) {
             if (selectedItem != item) {
                 selectedItem = item;
                 onSelectChange?.(item);
@@ -41,14 +47,14 @@
         }
     }
 
-    const handleItemDblClick = (item:any) => (e: MouseEvent) => {
+    const handleItemDblClick = (item: any) => (e: MouseEvent) => {
         if (selectMode == 'single') {
             onItemDblClick?.(item);
         }
     }
 
     const doFilter = () => {
-        const newList:Array<any> = [];
+        const newList: Array<any> = [];
         list.forEach(item => {
             if (filter?.(item, filterText)) {
                 newList.push(item)
@@ -62,6 +68,7 @@
     }
 
     const lazyLoad = async (clean: boolean = true) => {
+        console.log('加载数据...')
         isBusy = true;
         try {
             let result = await lazyLoader?.(filterText, pageNo);
@@ -71,18 +78,40 @@
                 } else {
                     list = [...list, ...result.list];
                 }
+                selectedItem = null;
                 filteredList = list;
                 hasMore = result.hasMore;
+                console.log('加载数据完成')
             }
         } finally {
             isBusy = false;
         }
     }
 
-    const handleCriteriaChange = (e) => {
-        if (lazyLoader != null) {
+    let idleTime = 0;
+    const delayReload = async () => {
+        idleTime ++;
+        if (idleTime > 10) {
+            clearInterval(interval);
+            interval = null;
             pageNo = 1;
-            lazyLoad();
+            scrollElement.scrollTop = 0;
+            await lazyLoad();
+            await tick();
+            searchBox.focus();
+        }
+    }
+
+    let interval: any;
+    const handleCriteriaChange = () => {
+        if (lazyLoader != null) {
+            if (interval == null) {
+                idleTime = 0;
+                interval = setInterval(delayReload, 50)
+            } else {
+                idleTime = 0;
+            }
+
         } else {
             if (filterText.length > 0) {
                 doFilter();
@@ -100,22 +129,20 @@
         }
     }
 
-    const handleSelectionChanged = (item: any) => (e) => {
+    const handleSelectionChanged = (item: any) => () => {
+        console.log('选择项目', item);
         let idx = selectedList.indexOf(item);
-        if (e.detail) {
-            if (idx < 0) {
-                selectedList = [...selectedList, item];
-            }
+        if (idx < 0) {
+            selectedList = [...selectedList, item];
         } else {
-            if (idx>-1) {
-                selectedList.splice(idx, 1);
-                selectedList = [...selectedList];
-            }
+            selectedList.splice(idx, 1);
+            selectedList = [...selectedList];
         }
     }
 
     onMount(async () => {
         if (lazyLoader != null) {
+            console.log('加载数据...')
             filterText = '';
             await lazyLoad();
         }
@@ -126,7 +153,8 @@
         await lazyLoad(false);
     }
 
-    let scrollElement:any;
+    let scrollElement: any;
+    let searchBox: any;
 
     const handleScroll = () => {
         const bottom = scrollElement.scrollHeight - scrollElement.scrollTop === scrollElement.clientHeight;
@@ -135,27 +163,36 @@
         }
     }
 
+    $: boxHeaderStyle = `${header$style ?? ''}; height: auto; ${($$slots.header || filter || lazyLoader || title) ? '' : 'display: none'}`
 
 </script>
 
-<div class="uniface-listbox {className}" {style}>
-    {#if $$slots.header || filter || lazyLoader}
-        <div class="listbox-header" style={header$style}>
-            {#if $$slots.header}
-                <slot name="header"></slot>
-            {/if}
-            {#if readonly===false && (filter!=null || lazyLoader!=null)}
-                <SearchBox loading={isBusy} variant="plain" style="width: 100%" bind:value={filterText} on:change={handleCriteriaChange}/>
-            {/if}
-        </div>
-    {/if}
+<Box class="uniface-listbox {className}" {round} {footer$style} {style} showFooter={$$slots.footer!=null}
+     header$style={boxHeaderStyle}>
+    <svelte:fragment slot="header">
+        {#if title || $$slots['header']}
+            <slot name="header">
+                <div class="title">
+                    <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}
+    </svelte:fragment>
     <div class="listbox-content" class:selectable={selectMode==='single'} bind:this={scrollElement} on:scroll={handleScroll}>
         {#if filteredList && itemRender}
             {#each filteredList as item}
                 {#if selectMode === "multiple"}
-                    <div class="listview-item" style="display: flex; flex-direction: row; align-items: center">
-                        <CheckBox style="flex: 0 0 auto; margin-left: 8px" {readonly} value={selectedList.indexOf(item) > -1} on:change={handleSelectionChanged(item)}/>
-                        <svelte:component this={itemRender} {readonly} {item} {...item$props}/>
+                    <div class="listview-item" style="display: flex; flex-direction: row; align-items: center; gap: 8px">
+                        <CheckBox style="flex: 0 0 auto" {readonly} value={selectedList.indexOf(item) > -1}
+                                  onChange={handleSelectionChanged(item)}/>
+                        <div style="flex: 1 1 auto; cursor: pointer" aria-hidden="true" on:click={handleSelectionChanged(item)}>
+                            <svelte:component this={itemRender} {readonly} {item} {...item$props}/>
+                        </div>
                     </div>
                 {:else }
                     <div class="listview-item" class:selected={item===selectedItem} aria-hidden="true"
@@ -166,19 +203,16 @@
                 {/if}
             {/each}
         {/if}
-        <slot></slot>
         {#if hasMore}
             <slot name="loadMoreIndicator"></slot>
         {/if}
     </div>
-    {#if $$slots.footer}
-        <div class="listbox-footer">
-            <slot name="footer"></slot>
-        </div>
-    {/if}
+    <slot name="footer" slot="footer"/>
     {#if isBusy}
-        <div class="uniface-mask">
-
+        <div class="list-view-mask">
+            <div style="height: 100%; height: 100%; text-align: center">
+                <img width="48" height="48" style="position: relative; top: 50%; transform: translateY(-50%)" src={loading} alt="nothing">
+            </div>
         </div>
     {/if}
-</div>
+</Box>