@ticatec/uniface-element 0.2.3 → 0.3.0

package/dist/group-box/group-check-box/GroupCheckBox.svelte

@@ -20,11 +20,23 @@
     export let hideOptions: Array<string> = [];
     export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
     export let compact: boolean = false;
-    export let onChange: OnChangeHandler<string | number> = null as unknown as OnChangeHandler<string | number>;
+    export let onchange: OnChangeHandler<string | number> = null as unknown as OnChangeHandler<string | number>;
+    export let onfocus: (() => void) | null = null;
+    export let onblur: (() => void) | null = null;
 
-    let textValue: string;
+    export const setFocus = () => {
+        const firstCheckbox = groupContainer?.querySelector('input[type="checkbox"]:not(:disabled)') as HTMLInputElement;
+        if (firstCheckbox) {
+            firstCheckbox.focus();
+        }
+    }
 
+    let textValue: string;
     let selectedList: Array<any> = [];
+    let oldValue = value;
+    let isUserChange: boolean = false;
+    let hasFocus: boolean = false;
+    let groupContainer: HTMLDivElement;
 
     const generateText = (list: Array<string>) => {
         if (list.length > 0) {
@@ -43,6 +55,7 @@
 
 
     const handleCheckboxChange = (key: string) => async (checked: boolean) => {
+        isUserChange = true;
         if (checked) {
             selectedList.push(key);
         } else {
@@ -51,6 +64,7 @@
                 selectedList.splice(idx, 1);
             }
         }
+        selectedList = [...selectedList]; // 触发reactive更新
         if (bitBase) {
             let v = 0;
             for (let i=0; i<options.length; i++) {
@@ -62,7 +76,6 @@
         } else {
             value = selectedList.length==0 ?  '' : selectedList.join(delimiter)
         }
-        onChange?.(value);
     }
 
     const generateSelectedListViaBits = (v: number): void => {
@@ -87,6 +100,47 @@
     $: bitBase ? generateSelectedListViaBits(utils.getNumberValue(value)??0) : generateSelectedListViaString(utils.getStringValue(value)??'');
     $: generateText(selectedList);
 
+    // 处理onchange事件
+    $: if (oldValue != value) {
+        if (isUserChange) {
+            onchange?.(value);
+            isUserChange = false;
+        }
+        oldValue = value;
+    }
+
+    // 处理focus/blur事件
+    const handleFocus = () => {
+        if (!hasFocus) {
+            hasFocus = true;
+            onfocus?.();
+        }
+    }
+
+    const handleBlur = () => {
+        if (hasFocus) {
+            hasFocus = false;
+            onblur?.();
+        }
+    }
+
+    const handleContainerClick = (e: MouseEvent) => {
+        if (!disabled && !readonly && e.target === groupContainer) {
+            handleFocus();
+            setFocus();
+        }
+    }
+
+    const handleContainerBlur = (e: FocusEvent) => {
+        // 检查焦点是否移到了组件外部
+        setTimeout(() => {
+            const activeElement = document.activeElement;
+            if (!groupContainer?.contains(activeElement)) {
+                handleBlur();
+            }
+        }, 0);
+    }
+
 
 </script>
 {#if displayMode === DisplayMode.View}
@@ -94,12 +148,15 @@
         <span>{textValue}</span>
     </div>
 {:else}
-    <div class="uniface-group-box {variant}" {style} class:compact class:disabled>
+    <div bind:this={groupContainer} class="uniface-group-box {variant}" {style} class:compact class:disabled on:click={handleContainerClick} on:focusout={handleContainerBlur}>
         {#each options as op}
             {#if (hideOptions??[]).indexOf(op[keyField]) === -1}
                 <CheckBox {compact} {readonly} disabled={disabled || disabledOptions.indexOf(op[keyField]) > -1}
                       label={op[textField]} style={item$style} value={selectedList.indexOf(op[keyField]) > -1}
-                      onChange={handleCheckboxChange(op[keyField])}/>
+                      onChange={handleCheckboxChange(op[keyField])} 
+                      onClick={handleFocus} 
+                      on:focus={handleFocus} 
+                      on:blur={handleContainerBlur}/>
             {/if}
         {/each}
     </div>

package/dist/group-box/group-check-box/GroupCheckBox.svelte.d.ts

@@ -29,9 +29,14 @@ declare const GroupCheckBox: $$__sveltets_2_IsomorphicComponent<{
     hideOptions?: Array<string>;
     variant?: "" | "plain" | "outlined" | "filled";
     compact?: boolean;
-    onChange?: OnChangeHandler<string | number>;
+    onchange?: OnChangeHandler<string | number>;
+    onfocus?: (() => void) | null;
+    onblur?: (() => void) | null;
+    setFocus?: () => void;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    setFocus: () => void;
+}, string>;
 type GroupCheckBox = InstanceType<typeof GroupCheckBox>;
 export default GroupCheckBox;