@ticatec/uniface-element 0.2.4 → 0.3.0

package/dist/group-box/group-radio-box/GroupRadioBox.svelte

@@ -6,6 +6,7 @@
 
     export let disabled: boolean = false;
     export let readonly: boolean = false;
+    export let style: string = "";
     export let value: any;
     export let options: Array<any>;
     export let keyField: string = "code";
@@ -15,14 +16,29 @@
     export let disabledOptions: Array<string> = [];
     export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
     export let compact: boolean = false;
-    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;
+
+    export const setFocus = () => {
+        const firstRadio = groupContainer?.querySelector('input[type="radio"]:not(:disabled)') as HTMLInputElement;
+        if (firstRadio) {
+            firstRadio.focus();
+        }
+    }
 
     let textValue: string;
     let oldValue = value;
+    let isUserChange: boolean = false;
+    let hasFocus: boolean = false;
+    let groupContainer: HTMLDivElement;
 
     $: if (oldValue != value) {
+        if (isUserChange) {
+            onchange?.(value);
+            isUserChange = false;
+        }
         oldValue = value;
-        onChange?.(value);
     }
 
     $: {
@@ -30,6 +46,51 @@
         textValue = item == null ? '' : item[textField];
     }
 
+    // 处理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);
+    }
+
+    const handleRadioFocus = (e: FocusEvent) => {
+        handleFocus();
+    }
+
+    const handleRadioClick = (e: MouseEvent) => {
+        handleFocus();
+    }
+
+    const handleRadioChange = (e: Event) => {
+        isUserChange = true;
+        handleFocus();
+    }
+
 </script>
 
 {#if displayMode === DisplayMode.View}
@@ -37,10 +98,14 @@
         <span>{textValue}</span>
     </div>
 {:else}
-    <div style="width: 100%;" class="uniface-group-box {variant}" class:compact >
+    <div bind:this={groupContainer} {style} class="uniface-group-box {variant}" class:compact class:disabled on:click={handleContainerClick} on:focusout={handleContainerBlur}>
         {#each options as op}
             <RadioButton {readonly} {compact} disabled={disabled || disabledOptions.indexOf(op[keyField]) > -1}
-                         bind:group={value} label={op[textField]} style={item$style} value={op[keyField]}/>
+                         bind:group={value} label={op[textField]} style={item$style} value={op[keyField]}
+                         on:click={handleRadioClick}
+                         on:change={handleRadioChange}
+                         on:focus={handleRadioFocus} 
+                         on:blur={handleContainerBlur}/>
         {/each}
     </div>
 {/if}

package/dist/group-box/group-radio-box/GroupRadioBox.svelte.d.ts

@@ -16,6 +16,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const GroupRadioBox: $$__sveltets_2_IsomorphicComponent<{
     disabled?: boolean;
     readonly?: boolean;
+    style?: string;
     value: any;
     options: Array<any>;
     keyField?: string;
@@ -25,9 +26,14 @@ declare const GroupRadioBox: $$__sveltets_2_IsomorphicComponent<{
     disabledOptions?: Array<string>;
     variant?: "" | "plain" | "outlined" | "filled";
     compact?: boolean;
-    onChange?: OnChangeHandler<any>;
+    onchange?: OnChangeHandler<any>;
+    onfocus?: (() => void) | null;
+    onblur?: (() => void) | null;
+    setFocus?: () => void;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    setFocus: () => void;
+}, string>;
 type GroupRadioBox = InstanceType<typeof GroupRadioBox>;
 export default GroupRadioBox;