From 10ef216d4e791841e27d0c92a3864e75d56879d1 Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Sat, 17 Sep 2022 09:04:34 +0800
Subject: [PATCH] feature: append button-edit event

---
 .../button-edit/src/button-edit.component.tsx | 23 +++++++++++++------
 .../button-edit/src/composition/types.ts      | 16 +++++++++----
 .../button-edit/src/composition/use-clear.ts  |  6 +++++
 .../src/composition/use-text-box.ts           | 11 ++++++---
 4 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/packages/ui-vue/components/button-edit/src/button-edit.component.tsx b/packages/ui-vue/components/button-edit/src/button-edit.component.tsx
index e2b5d7e..3e67a3e 100644
--- a/packages/ui-vue/components/button-edit/src/button-edit.component.tsx
+++ b/packages/ui-vue/components/button-edit/src/button-edit.component.tsx
@@ -18,8 +18,8 @@ export default defineComponent({
     'enterHandle',
     'iconMouseEnter',
     'iconMouseLeave',
-    'keyupHandle',
-    'keydownHandle',
+    'keyup',
+    'keydown',
     'inputClick',
     'input',
     'update:modelValue',
@@ -41,8 +41,9 @@ export default defineComponent({
       onClickTextBox,
       onFocusTextBox,
       onInput,
+      onKeyDownTextBox,
+      onKeyUpTextBox,
       onMouseDownTextBox,
-      onMouseOverTextBox,
       onTextBoxValueChange,
     } = useTextBox(props, context);
 
@@ -57,7 +58,7 @@ export default defineComponent({
     return () => {
       return (
         <div class="f-cmp-inputgroup" id={props.id}>
-          <div class={[props.customClass, inputGroupClass.value]}>
+          <div class={[props.customClass, inputGroupClass.value]} onMouseenter={onMouseEnterTextBox} onMouseleave={onMouseLeaveTextBox}>
             <input
               name="input-group-value"
               autocomplete={'' + props.autoComplete}
@@ -75,16 +76,24 @@ export default defineComponent({
               onClick={onClickTextBox}
               onFocus={onFocusTextBox}
               onInput={onInput}
-              onKeydown={onMouseEnterTextBox}
+              onKeydown={onKeyDownTextBox}
+              onKeyup={onKeyUpTextBox}
               onMousedown={onMouseDownTextBox}
             />
             <div class={buttonClass.value}>
               {showClearButton.value && (
-                <span class="input-group-text input-group-clear">
+                <span class="input-group-text input-group-clear" onClick={onClearValue}>
                   <i class="f-icon modal_close"></i>
                 </span>
               )}
-              {props.buttonContent && <span class="input-group-text" v-html={props.buttonContent}></span>}
+              {props.buttonContent && (
+                <span
+                  class="input-group-text"
+                  onClick={onClickButton}
+                  onMouseenter={onMouseEnterButton}
+                  onMouseleave={onMouseLeaveButton}
+                  v-html={props.buttonContent}></span>
+              )}
             </div>
           </div>
         </div>
diff --git a/packages/ui-vue/components/button-edit/src/composition/types.ts b/packages/ui-vue/components/button-edit/src/composition/types.ts
index d4c8edd..43a9a64 100644
--- a/packages/ui-vue/components/button-edit/src/composition/types.ts
+++ b/packages/ui-vue/components/button-edit/src/composition/types.ts
@@ -35,9 +35,11 @@ export interface UseClear {
   /**
    * 鼠标进入输入框事件响应函数
    */
-  onMouseEnterTextBox: ($event: KeyboardEvent) => void;
-
-  onMouseLeaveTextBox: ($event: Event) => void;
+  onMouseEnterTextBox: ($event: MouseEvent) => void;
+  /**
+   * 鼠标移出输入框事件响应函数
+   */
+  onMouseLeaveTextBox: ($event: MouseEvent) => void;
 }
 
 export interface UseTextBox {
@@ -79,9 +81,13 @@ export interface UseTextBox {
    */
   onMouseDownTextBox: ($event: MouseEvent) => void;
   /**
-   * 鼠标滑过输入框事件响应函数
+   * 键盘在输入框按下事件
    */
-  onMouseOverTextBox: ($event: Event) => void;
+  onKeyDownTextBox: ($event: Event) => void;
+  /**
+   * 键盘在输入框抬起事件
+   */
+  onKeyUpTextBox: ($event: Event) => void;
   /**
    * 输入框值变化事件响应函数
    */
diff --git a/packages/ui-vue/components/button-edit/src/composition/use-clear.ts b/packages/ui-vue/components/button-edit/src/composition/use-clear.ts
index eabf597..39afd06 100644
--- a/packages/ui-vue/components/button-edit/src/composition/use-clear.ts
+++ b/packages/ui-vue/components/button-edit/src/composition/use-clear.ts
@@ -29,6 +29,9 @@ export function useClear(props: ButtonEditProps, context: SetupContext): UseClea
   }
 
   function onMouseEnterTextBox($event: Event) {
+    if (!showClearButton.value) {
+      return;
+    }
     if (this.value) {
       if (!props.editable) {
         if (!props.disable) {
@@ -44,6 +47,9 @@ export function useClear(props: ButtonEditProps, context: SetupContext): UseClea
   }
 
   function onMouseLeaveTextBox($event: Event) {
+    if (!showClearButton.value) {
+      return;
+    }
     hasShownClearButton.value = false;
     toggleClearIcon($event, false);
   }
diff --git a/packages/ui-vue/components/button-edit/src/composition/use-text-box.ts b/packages/ui-vue/components/button-edit/src/composition/use-text-box.ts
index e4bcf7e..3b676a1 100644
--- a/packages/ui-vue/components/button-edit/src/composition/use-text-box.ts
+++ b/packages/ui-vue/components/button-edit/src/composition/use-text-box.ts
@@ -60,8 +60,12 @@ export function useTextBox(props: ButtonEditProps, context: SetupContext): UseTe
     $event.stopPropagation();
   }
 
-  function onMouseOverTextBox($event: Event) {
-    console.log('on onMouseOverInExtentInfo');
+  function onKeyDownTextBox($event: Event) {
+    context.emit('keydown', $event);
+  }
+
+  function onKeyUpTextBox($event: Event) {
+    context.emit('keyup', $event);
   }
 
   function onTextBoxValueChange(newValue: string, emit = true) {
@@ -83,8 +87,9 @@ export function useTextBox(props: ButtonEditProps, context: SetupContext): UseTe
     onClickTextBox,
     onFocusTextBox,
     onInput,
+    onKeyDownTextBox,
+    onKeyUpTextBox,
     onMouseDownTextBox,
-    onMouseOverTextBox,
     onTextBoxValueChange,
   };
 }