From 6b4b1f2e57a9dfd9f1d9cb087f3b5662e2366d30 Mon Sep 17 00:00:00 2001
From: aalizzwell <aalizzwell@126.com>
Date: Wed, 12 Oct 2022 19:56:12 +0800
Subject: [PATCH] chore: add clear event handler

---
 .../combo-list/src/combo-list.component.tsx          |  4 +++-
 .../components/combo-list/src/composition/types.ts   |  9 ++++++++-
 .../combo-list/src/composition/use-event-handlers.ts | 12 ++++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 packages/ui-vue/components/combo-list/src/composition/use-event-handlers.ts

diff --git a/packages/ui-vue/components/combo-list/src/combo-list.component.tsx b/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
index 5ca670b..965715d 100644
--- a/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
+++ b/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 && (
diff --git a/packages/ui-vue/components/combo-list/src/composition/types.ts b/packages/ui-vue/components/combo-list/src/composition/types.ts
index 4c5a8ab..32cedad 100644
--- a/packages/ui-vue/components/combo-list/src/composition/types.ts
+++ b/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];
\ No newline at end of file
+export type UseState<T> = [Readonly<Ref<UnwrapRef<T>>>, (state: UnwrapRef<T>) => void];
+
+export interface UseEventHandlers {
+  /**
+   * 清除事件
+   */
+  onClear: ($event: Event) => void;
+}
\ No newline at end of file
diff --git a/packages/ui-vue/components/combo-list/src/composition/use-event-handlers.ts b/packages/ui-vue/components/combo-list/src/composition/use-event-handlers.ts
new file mode 100644
index 0000000..5825ca1
--- /dev/null
+++ b/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
+  };
+}
\ No newline at end of file