@ticatec/uniface-element 0.2.4 → 0.3.0

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

@@ -30,18 +30,23 @@
     export let menu$height: number = 150;
     export let onSelect: OnSelectOption;
     export let box$style: string = "";
-    export let onChange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
+    export let onchange: OnChangeHandler<any> = null as unknown as OnChangeHandler<any>;
+    export let onfocus: (() => void) | null = null;
+    export let onblur: (() => void) | null = null;
 
     let oldValue = value;
     let selectedItems: Array<any> = [];
     let busy: boolean = false;
     let list: Array<Array<any>> = [];
+    let hasFocus: boolean = false;
+    let isUserChange: boolean = false;
 
     onMount(async () => {
         list = [...nodes];
     })
 
     const selectOption = (level: number) => async (item: any) => {
+        isUserChange = true;
         value = item?.[keyField];
         let newList = list.slice(0, level + 1)
         if (level == 0) {
@@ -62,20 +67,22 @@
                     contentPanel.scrollLeft = contentPanel.scrollWidth;
                 } else {
                     showPopup = false;
+                    editor.focus();
                 }
             } else {
 
                 if (item[childrenField] && item[childrenField].length > 0) {
-                    console.log('存在子节点')
-                    list = [...newList, item[childrenField]];
+                        list = [...newList, item[childrenField]];
                     await tick();
                     contentPanel.scrollLeft = contentPanel.scrollWidth;
                 } else {
                     showPopup = false;
+                    editor.focus();
                 }
             }
         } else {
             showPopup = false;
+            editor.focus();
         }
     }
 
@@ -88,24 +95,53 @@
     }
 
     $: if (oldValue != value) {
+        if (isUserChange) {
+            onchange?.(value);
+            isUserChange = false;
+        }
         oldValue = value;
-        onChange?.(value)
     }
 
     $: mh = `height: ${menu$height}px`;
 
-    $: list = [...nodes];
+    $: if (nodes && nodes.length > 0) {
+        list = [...nodes];
+    }
 
     $: text = selectedItems && selectedItems.length > 0 ? selectedItems[selectedItems.length - 1][textField] : emptyText ?? '';
 
     const cleanData = () => {
+        isUserChange = true;
         value = null;
         text = '';
-        onChange?.(null)
     }
 
     let editor: any;
 
+    const handleFocus = () => {
+        if (!hasFocus) {
+            hasFocus = true;
+            onfocus?.();
+        }
+    }
+
+    const handleBlur = (event: FocusEvent) => {
+        if (!showPopup) {
+            hasFocus = false;
+            onblur?.();
+        }
+    }
+
+    // 监听popup关闭，如果是点击外部关闭且之前有焦点，触发blur
+    $: if (!showPopup && hasFocus) {
+        setTimeout(() => {
+            if (document.activeElement !== editor) {
+                hasFocus = false;
+                onblur?.();
+            }
+        }, 50);
+    }
+
     $: if (showPopup) {
         editor.focus();
     }
@@ -115,7 +151,7 @@
 <CommonPicker {displayMode} {variant} {style} {compact} className="multiple" dropDownIcon="icon_google_keyboard_arrow_down"
               bind:showPopup canClean={!mandatory && text!=null} autoFit clean={cleanData} textValue={text??''} {readonly} {disabled}>
     <input style="width: 100%" bind:this={editor} on:click={openPopup} {placeholder}
-           class="text-editor" bind:value={text} on:blur on:focus/>
+           class="text-editor" bind:value={text} on:blur={handleBlur} on:focus={handleFocus}/>
     <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">

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

@@ -35,11 +35,10 @@ declare const CascadeOptionSelect: $$__sveltets_2_IsomorphicComponent<{
     menu$height?: number;
     onSelect: (item: any) => Promise<Array<any>>;
     box$style?: string;
-    onChange?: OnChangeHandler<any>;
+    onchange?: OnChangeHandler<any>;
+    onfocus?: (() => void) | null;
+    onblur?: (() => void) | null;
 }, {
-    blur: FocusEvent;
-    focus: FocusEvent;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
 type CascadeOptionSelect = InstanceType<typeof CascadeOptionSelect>;