chore: add clear event handler

packages/ui-vue/components/combo-list/src/combo-list.component.tsx

@@ -3,6 +3,7 @@ import { comboListProps, ComboListProps } from './combo-list.props';
 import { ButtonEdit } from '../../button-edit';
 import { groupIcon, ViewType } from './types';
 import { useState } from './composition/use-state';
+import { useEventHandlers } from './composition/use-event-handlers';
 export default defineComponent({
   name: 'FComboList',
   props: comboListProps,
@@ -13,6 +14,7 @@ export default defineComponent({
     // is panel visible
     const [isPanelVisible] = useState<boolean>(false);
     const [displayText, setDisplayText] = useState(props.displayText);
+    const { onClear } = useEventHandlers(props, context, modelValue);
     return () => {
       return (
         <>
@@ -29,7 +31,7 @@ export default defineComponent({
             maxLength={props.maxLength}
             style="display:block"
             modelValue={displayText.value}
-            onClear={() => setDisplayText('')}
+            onClear={onClear}
           />
           {/** tag area */}
           {props.viewType === ViewType.Tag && (

packages/ui-vue/components/combo-list/src/composition/types.ts

@@ -4,4 +4,11 @@ import { Ref, UnwrapRef } from "vue";
  * UseState type
  * @description 受vue类型系统限制，仅在类型定义中约定state只读，实际返回对象可写
  */
-export type UseState<T> = [Readonly<Ref<UnwrapRef<T>>>, (state: UnwrapRef<T>) => void];
+export type UseState<T> = [Readonly<Ref<UnwrapRef<T>>>, (state: UnwrapRef<T>) => void];
+
+export interface UseEventHandlers {
+  /**
+   * 清除事件
+   */
+  onClear: ($event: Event) => void;
+}

packages/ui-vue/components/combo-list/src/composition/use-event-handlers.ts

@@ -0,0 +1,12 @@
+import { Ref, SetupContext } from "vue";
+import { ComboListProps } from "../combo-list.props";
+import { UseEventHandlers } from "./types";
+
+export function useEventHandlers(props: ComboListProps, context: SetupContext, modelValue: Ref<string | undefined>): UseEventHandlers {
+  function onClear($event: Event) {
+    modelValue.value = '';
+  }
+  return {
+    onClear
+  };
+}