@ticatec/uniface-element 0.2.3 → 0.3.0

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

@@ -3,11 +3,9 @@
     import {DisplayMode} from "../common/DisplayMode";
     import type {OnChangeHandler} from "../common/OnChangeHandler";
     import {tick} from "svelte";
-    import type {LazyLoader} from "../list-box/types"
-    import i18nRes from "../i18nRes";
-
-    import loading from "../assets/loading.gif"
     import CommonPicker from "../common/CommonPicker.svelte";
+    import loadingGif from "../assets/loading.gif";
+    import type {LazyLoader} from "../list-box/types";
 
     export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
     export let disabled: boolean = false;
@@ -22,84 +20,157 @@
     export let placeholder: string = "";
     export let displayMode: DisplayMode = DisplayMode.Edit;
     export let itemRender: any = null;
-    export let onChange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
+    export let onchange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
+    export let oninput: OnChangeHandler<string> = null as unknown as OnChangeHandler<string>;
+    export let onfocus: (() => void) | null = null;
+    export let onblur: (() => void) | null = null;
     export let lazyLoader: LazyLoader = null as unknown as LazyLoader;
 
     let editor: any;
     let inputText: string;
     let oldValue: any = value;
-    let options: Array<any> = [];
     let scrollElement: any;
-
+    let options: Array<any> = [];
+    
     let idleTime = 0;
     let interval: any;
     let pageNo: number;
     let isBusy: boolean;
     let hasMore: boolean;
+    let loading: boolean = false;
+    let loadingController: AbortController | null = null;
 
     const handleInputText = () => {
-        if ((text ?? '').trim().length > 0 && lazyLoader != null) {
-            if (interval == null) {
-                idleTime = 0;
-                interval = setInterval(delayReload, 50)
-            } else {
-                idleTime = 0;
-            }
+        if (lazyLoader != null) {
+            delayReload();
         }
     }
-    const lazyLoad = async (clean: boolean = true) => {
-        console.log('开始读取数据...', text)
-        isBusy = true;
+
+    const lazyLoad = async (searchText: string, page: number, isLoadMore: boolean = false) => {
+        // 取消之前的加载请求
+        if (loadingController) {
+            loadingController.abort();
+        }
+        
+        // 创建新的AbortController
+        loadingController = new AbortController();
+        const currentController = loadingController;
+        
+        loading = true;
+        if (!isLoadMore) {
+            isBusy = true;
+        }
+        
         try {
-            let result = await lazyLoader?.(text, pageNo);
-            if (result) {
-                if (clean) {
-                    options = result.list;
-                } else {
-                    options = [...options, ...result.list];
-                }
-                hasMore = result.hasMore;
+            let res = await lazyLoader(searchText, page);
+            
+            // 检查请求是否被取消
+            if (currentController.signal.aborted) {
+                return;
+            }
+            
+            if (page == 1) {
+                options = res.list;
+            } else {
+                options = [...options, ...res.list];
+            }
+            hasMore = res.hasMore;
+            pageNo = page;
+        } catch (e) {
+            // 如果是取消请求的错误，忽略它
+            if (currentController.signal.aborted) {
+                return;
+            }
+            console.error('LazyLoader error:', e);
+            if (page == 1) {
+                options = [];
+                hasMore = false;
             }
-            showPopup = true;
         } finally {
-            isBusy = false;
+            // 只有当前请求没有被取消时才更新loading状态
+            if (!currentController.signal.aborted) {
+                loading = false;
+                isBusy = false;
+                loadingController = null;
+            }
         }
     }
 
-    const delayReload = async () => {
-        idleTime++;
-        if (idleTime > 10) {
+    const delayReload = () => {
+        // 取消之前的延迟加载
+        if (interval) {
             clearInterval(interval);
-            interval = null;
-            pageNo = 1;
-            if (showPopup) {
-                scrollElement.scrollTop = 0;
+        }
+        
+        // 取消当前正在进行的加载
+        if (loadingController) {
+            loadingController.abort();
+            loadingController = null;
+            loading = false;
+            isBusy = false;
+        }
+        
+        // 重置状态
+        options = [];
+        hasMore = false;
+        
+        // 设置新的延迟加载
+        idleTime = 0;
+        interval = setInterval(() => {
+            idleTime += 100;
+            if (idleTime >= 500) {
+                clearInterval(interval);
+                lazyLoad(text, 1, false);
             }
-            await lazyLoad();
-            await tick();
-            editor.focus();
+        }, 100);
+    }
+
+    const loadMore = () => {
+        if (hasMore && !isBusy) {
+            lazyLoad(text, pageNo + 1, true);
+        }
+    }
+
+    const handleScroll = (event: Event) => {
+        const target = event.target as HTMLElement;
+        const scrollTop = target.scrollTop;
+        const scrollHeight = target.scrollHeight;
+        const clientHeight = target.clientHeight;
+        
+        console.log('Scroll event:', { scrollTop, scrollHeight, clientHeight, hasMore, isBusy });
+        
+        // 当滚动到距离底部20px以内时，自动加载下一页
+        if (scrollTop + clientHeight >= scrollHeight - 20 && hasMore && !isBusy) {
+            console.log('Auto loading more...');
+            loadMore();
         }
     }
 
     const handleItemClick = (data: any) => () => {
+        isUserTyping = false;
         value = data[keyField];
         text = data[textField];
         if (value != oldValue) {
-            onChange?.(data);
+            onchange?.(data);
         }
         editor.focus();
         showPopup = false;
     }
 
     let composing: boolean = false;
+    let hasFocus: boolean = false;
+    let isUserTyping: boolean = false;
 
     const handleInput = () => {
-        if (composing == false) {
+        if (!composing) {
+            isUserTyping = true;
             text = inputText;
             value = null;
+            oninput?.(text);
             handleInputText();
         }
     };
+    
     const handleCompositionStart = (event: CompositionEvent) => {
         composing = true;
     };
@@ -108,13 +179,28 @@
         composing = false;
         text = inputText;
         value = null;
+        oninput?.(text);
         handleInputText();
     };
 
+    const handleFocus = () => {
+        if (!hasFocus) {
+            hasFocus = true;
+            onfocus?.();
+        }
+    };
+
+    const handleBlur = (event: FocusEvent) => {
+        if (!showPopup) {
+            hasFocus = false;
+            onblur?.();
+        }
+    };
+
     const clean = () => {
         value = null;
         text = '';
-        onChange?.(value);
+        onchange?.(value);
         showPopup = false;
         editor.focus();
     }
@@ -123,24 +209,43 @@
 
     let mh;
 
-    $: mh = `min-height: 80px; height: ${menu$height > 0 ? menu$height + 'px' : 'auto'}`;
+    $: mh = `min-height: 80px; ${menu$height > 0 ? 'height: ' + menu$height + 'px;' : 'max-height: 300px;'} overflow-y: auto;`;
 
-    $: showPopup = options && options.length > 0;
+    $: showPopup = (options && options.length > 0) || loading;
 
-    $: inputText = text;
-
-    const loadMore = async () => {
-        editor.focus();
-        if (lazyLoader != null && !isBusy && hasMore) {
-            pageNo++;
-            await lazyLoad(false);
+    $: {
+        // 不要在用户正在输入时更新inputText
+        if (!isUserTyping) {
+            if (value == null) {
+                inputText = text;
+            } else {
+                // 如果已选择值，根据焦点状态显示keyField或textField
+                let selectedItem = options.find(op => op[keyField] == value);
+                if (selectedItem) {
+                    inputText = hasFocus ? selectedItem[keyField] : selectedItem[textField];
+                } else {
+                    inputText = hasFocus ? value : text;
+                }
+            }
         }
     }
 
-    $: if (!showPopup && value == null) {
+
+    $: if (!showPopup && value == null && !isUserTyping) {
         text = '';
     }
 
+    // 监听popup关闭，如果是点击外部关闭且之前有焦点，触发blur
+    $: if (!showPopup && hasFocus) {
+        // 延迟检查，如果input仍然有焦点，说明是选择项目导致的关闭
+        setTimeout(() => {
+            if (document.activeElement !== editor) {
+                hasFocus = false;
+                onblur?.();
+            }
+        }, 50);
+    }
+
 
 </script>
 <!-- 待解决浏览模式显示的问题 -->
@@ -148,17 +253,18 @@
 <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} readonly={isBusy}
+           class="text-editor" bind:value={inputText} {readonly}
            on:input={handleInput}
-           on:compositionstart={handleCompositionStart} on:compositionend={handleCompositionEnd}/>
-    {#if isBusy}
+           on:compositionstart={handleCompositionStart} on:compositionend={handleCompositionEnd}
+           on:focus={handleFocus} on:blur={handleBlur}/>
+    {#if loading}
         <div style="position: absolute; top: 0px; bottom: 0px; right: 8px">
             <div style="position: relative; top: 50%; transform: translateY(-50%)">
-                <img src={loading} alt="loading" width="16" height="16"/>
+                <img src={loadingGif} alt="loading" width="16" height="16"/>
             </div>
         </div>
     {/if}
-    <div class="options-popover" bind:this={scrollElement} style={mh} slot="popup-panel">
+    <div class="options-popover" bind:this={scrollElement} style={mh} slot="popup-panel" on:scroll={handleScroll}>
         {#each options as op}
             <div class="option-item" on:click={handleItemClick(op)} aria-hidden="true">
                 {#if itemRender != null}
@@ -170,15 +276,5 @@
                 {/if}
             </div>
         {/each}
-        {#if hasMore}
-            <div class="more-indicator-footer" aria-hidden="true" on:click={loadMore}>
-                {i18nRes.common.textMore}
-            </div>
-        {/if}
-        {#if isBusy}
-            <div class="popover-mask-overlay">
-
-            </div>
-        {/if}
     </div>
 </CommonPicker>

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

@@ -28,7 +28,10 @@ declare const InputOptionsSelect: $$__sveltets_2_IsomorphicComponent<{
     placeholder?: string;
     displayMode?: DisplayMode;
     itemRender?: any;
-    onChange?: OnChangeHandler<any>;
+    onchange?: OnChangeHandler<any>;
+    oninput?: OnChangeHandler<string>;
+    onfocus?: (() => void) | null;
+    onblur?: (() => void) | null;
     lazyLoader?: LazyLoader;
 }, {
     [evt: string]: CustomEvent<any>;

package/dist/lib/forwardAllEvents.d.ts

@@ -0,0 +1,3 @@
+export declare function forwardAllEvents<T extends HTMLElement>(node: T, props: Record<string, any>, internalHandlers?: Partial<Record<string, (e: Event) => void>>): {
+    destroy(): void;
+};

package/dist/lib/forwardAllEvents.js

@@ -0,0 +1,24 @@
+// forwardAllEvents.ts
+export function forwardAllEvents(node, props, internalHandlers = {}) {
+    const removeFns = [];
+    Object.keys(props).forEach(key => {
+        if (key.startsWith("on") && typeof props[key] === "function") {
+            const eventName = key.slice(2).toLowerCase(); // onblur -> blur
+            const externalHandler = props[key];
+            const internalHandler = internalHandlers[eventName];
+            const listener = (e) => {
+                // 先执行内部逻辑
+                internalHandler?.(e);
+                // 再执行外部逻辑
+                externalHandler?.(e);
+            };
+            node.addEventListener(eventName, listener);
+            removeFns.push(() => node.removeEventListener(eventName, listener));
+        }
+    });
+    return {
+        destroy() {
+            removeFns.forEach(fn => fn());
+        }
+    };
+}