feature: implament clear button

packages/ui-vue/components/button-edit/src/button-edit.component.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, computed, toRefs } from 'vue';
+import { defineComponent, computed, toRefs, ref } from 'vue';
 import type { SetupContext } from 'vue';
 import { buttonEditProps, ButtonEditProps } from './button-edit.props';
 import { useButton } from './composition/use-button';
@@ -12,12 +12,13 @@ export default defineComponent({
     'updateExtendInfo',
     'clear',
     'change',
-    'clickHandle',
-    'blurHandle',
-    'focusHandle',
-    'enterHandle',
-    'iconMouseEnter',
-    'iconMouseLeave',
+    'click',
+    'clickButton',
+    'blur',
+    'focus',
+    'mouseEnter',
+    'mouseEnterIcon',
+    'mouseLeaveIcon',
     'keyup',
     'keydown',
     'inputClick',
@@ -25,11 +26,11 @@ export default defineComponent({
     'update:modelValue',
   ],
   setup(props: ButtonEditProps, context: SetupContext) {
-    const { modelValue } = toRefs(props);
+    const modelValue = ref(props.modelValue);
 
     const { buttonClass, onClickButton, onMouseEnterButton, onMouseLeaveButton } = useButton(props, context);
 
-    const { showClearButton, onClearValue, onMouseEnterTextBox, onMouseLeaveTextBox } = useClear(props, context);
+    const { showClearButton, onClearValue, onMouseEnterTextBox, onMouseLeaveTextBox } = useClear(props, context, modelValue);
 
     const {
       hasFocusedTextBox,
@@ -45,7 +46,7 @@ export default defineComponent({
       onKeyUpTextBox,
       onMouseDownTextBox,
       onTextBoxValueChange,
-    } = useTextBox(props, context);
+    } = useTextBox(props, context, modelValue);
 
     const inputGroupClass = computed(() => ({
       'input-group': true,
@@ -73,6 +74,7 @@ export default defineComponent({
               type={props.inputType}
               value={modelValue.value}
               onBlur={onBlurTextBox}
+              onChange={onTextBoxValueChange}
               onClick={onClickTextBox}
               onFocus={onFocusTextBox}
               onInput={onInput}

packages/ui-vue/components/button-edit/src/composition/types.ts

@@ -60,6 +60,10 @@ export interface UseTextBox {
    * 输入框提示标签
    */
   textBoxTitle: ComputedRef<string>;
+  /**
+   * 更新输入框的值并触发change事件
+   */
+  changeTextBoxValue: (newValue: string, showEmitChangeEmit: boolean) => void;
   /**
    * 输入框失去焦点事件响应函数
    */
@@ -91,5 +95,5 @@ export interface UseTextBox {
   /**
    * 输入框值变化事件响应函数
    */
-  onTextBoxValueChange: (value: string, emit: boolean) => void;
+  onTextBoxValueChange: ($event: Event) => void;
 }

packages/ui-vue/components/button-edit/src/composition/use-button.ts

@@ -12,7 +12,7 @@ export function useButton(props: ButtonEditProps, context: SetupContext): UseBut
 
   function onClickButton($event: Event) {
     if (canClickAppendButton.value) {
-      context.emit('clickButton', { origin: $event, value: this.value });
+      context.emit('clickButton', { origin: $event, value: props.modelValue });
     }
     $event.stopPropagation();
   }

packages/ui-vue/components/button-edit/src/composition/use-clear.ts

@@ -1,13 +1,13 @@
-import { computed, ref, SetupContext } from 'vue';
+import { computed, Ref, ref, SetupContext } from 'vue';
 import { ButtonEditProps } from '../button-edit.props';
 import { UseClear } from './types';
 import { useTextBox } from './use-text-box';
 
-export function useClear(props: ButtonEditProps, context: SetupContext): UseClear {
+export function useClear(props: ButtonEditProps, context: SetupContext, modelValue: Ref<string>): UseClear {
   const hasShownClearButton = ref(false);
   const showClearButton = computed(() => props.enableClear && !props.readonly && !props.disable);
 
-  const { onTextBoxValueChange } = useTextBox(props, context);
+  const { changeTextBoxValue } = useTextBox(props, context, modelValue);
 
   function toggleClearIcon($event: any, isShow = false) {
     const display = isShow ? '' : 'none';
@@ -22,7 +22,7 @@ export function useClear(props: ButtonEditProps, context: SetupContext): UseClea
     const flag2 = !props.editable;
     $event.stopPropagation();
     if (flag1 || flag2) {
-      onTextBoxValueChange('', false);
+      changeTextBoxValue('', false);
       hasShownClearButton.value = false;
       context.emit('clear');
     }
@@ -32,7 +32,7 @@ export function useClear(props: ButtonEditProps, context: SetupContext): UseClea
     if (!showClearButton.value) {
       return;
     }
-    if (this.value) {
+    if (modelValue.value) {
       if (!props.editable) {
         if (!props.disable) {
           hasShownClearButton.value = true;
@@ -42,7 +42,7 @@ export function useClear(props: ButtonEditProps, context: SetupContext): UseClea
       }
     }
     if (hasShownClearButton.value) {
-      this.toggleClearIcon($event, true);
+      toggleClearIcon($event, true);
     }
   }
 

packages/ui-vue/components/button-edit/src/composition/use-text-box.ts

@@ -1,10 +1,9 @@
-import { isContext } from 'vm';
-import { computed, ref, SetupContext, watch } from 'vue';
+import { computed, Ref, SetupContext, watch } from 'vue';
 import { ButtonEditProps } from '../button-edit.props';
 import { UseTextBox } from './types';
 
-export function useTextBox(props: ButtonEditProps, context: SetupContext): UseTextBox {
-  const textBoxTitle = computed(() => (props.enableTitle ? props.modelValue : ''));
+export function useTextBox(props: ButtonEditProps, context: SetupContext, modelValue: Ref<string>): UseTextBox {
+  const textBoxTitle = computed(() => (props.enableTitle ? modelValue.value : ''));
 
   const textBoxPlaceholder = computed(() => ((props.disable || props.readonly) && !props.forcePlaceholder ? '' : props.placeholder));
 
@@ -68,21 +67,27 @@ export function useTextBox(props: ButtonEditProps, context: SetupContext): UseTe
     context.emit('keyup', $event);
   }
 
-  function onTextBoxValueChange(newValue: string, emit = true) {
-    if (props.modelValue !== newValue) {
-      props.modelValue = newValue;
-      if (emit) {
+  function changeTextBoxValue(newValue: string, showEmitChangeEmit = true) {
+    if (modelValue.value !== newValue) {
+      modelValue.value = newValue;
+      if (showEmitChangeEmit) {
         context.emit('change', newValue);
       }
     }
   }
 
+  function onTextBoxValueChange($event: Event) {
+    const newValue = ($event.target as HTMLInputElement).value;
+    changeTextBoxValue(newValue);
+  }
+
   return {
     hasFocusedTextBox,
     isTextBoxReadonly,
     textBoxClass,
     textBoxPlaceholder,
     textBoxTitle,
+    changeTextBoxValue,
     onBlurTextBox,
     onClickTextBox,
     onFocusTextBox,