plain-design 1.0.0-beta.147 → 1.0.0-beta.149

package/src/packages/components/Select/createPublicSelectRender.tsx

@@ -1,411 +1,411 @@
-import {reactive, RenderNode, useRefs} from "@peryl/react-compose";
-import {createSelectHover, iSelectCompositionParams, iSelectOptionProps, SelectDefaultVirtualRowSize, SelectUtils} from "./select.utils";
-import {decodeSelectRenderNode} from './decodeSelectRenderNode';
-import {Input} from "../Input";
-import {Scroll} from "../Scroll";
-import {SelectPanel} from "./SelectPanel";
-import {unit} from "@peryl/utils/unit";
-import {SelectOption} from "../SelectOption";
-import {VirtualList} from "../VirtualList";
-import {delay} from "@peryl/utils/delay";
-import {handleKeyboard} from "@peryl/utils/keyboard";
-import {useRenderReference} from "../../uses/useRenderReference";
-import {iEffects} from "@peryl/utils/createEffects";
-import {createPopupEditor} from "../usePopupEditor";
-
-export function createPublicSelectRender(
-  {
-    props,
-    emit,
-    hooks,
-    getPublicPopperAttrs,
-    slots,
-    editComputed,
-    styleComputed,
-    scrollHeight,
-  }: iSelectCompositionParams,
-  {
-    isActivated,
-    model,
-    handlePrevWhenNotShow,
-    handleNextWhenNotShow,
-    onSelectOption,
-    alwaysShowOnClickReference,
-    defaultCurrent,
-    multiple,
-    processRenderPanel,
-    effects,
-  }: {
-    /**
-     * 判断选项是否已经选中，用来provide给option组件判断自身是否已经选中
-     * @author  韦胜健
-     * @date    2022.8.1 22:25
-     */
-    isActivated: (optionProps: iSelectOptionProps) => boolean,
-    /**
-     * 非受控组件绑定值
-     * @author  韦胜健
-     * @date    2022/8/23 10:52
-     */
-    model: { value: any },
-    /**
-     * 处理没有打开popper的时候，input中上快捷键的点击动作，单选时直接切换值
-     * @author  韦胜健
-     * @date    2022/8/8 20:53
-     */
-    handlePrevWhenNotShow?: (e: KeyboardEvent) => void,
-    /**
-     * 吹了没有打开popper的时候，input中下快捷键的点击动作，单选时直接切换值
-     * @author  韦胜健
-     * @date    2022/8/8 20:53
-     */
-    handleNextWhenNotShow?: (e: KeyboardEvent) => void,
-    /**
-     * 处理选中某个选项的动作
-     * @author  韦胜健
-     * @date    2022/8/8 20:54
-     */
-    onSelectOption: (optionProps: iSelectOptionProps) => void,
-    /**
-     * 是否再点击reference的时候一直开启popper
-     * @author  韦胜健
-     * @date    2022/8/9 11:14
-     */
-    alwaysShowOnClickReference?: () => boolean,
-    /**
-     * 重置hover current的时候，current的默认值
-     * @author  韦胜健
-     * @date    2022/8/11 17:25
-     */
-    defaultCurrent: number | undefined,
-    /**
-     * 是否为多选
-     * @author  韦胜健
-     * @date    2022/8/12 10:04
-     */
-    multiple?: boolean,
-    /**
-     * 处理panel的render内容
-     * @author  韦胜健
-     * @date    2022/8/16 8:40
-     */
-    processRenderPanel?: (defaultRender: () => RenderNode) => RenderNode,
-    /**
-     * 副作用收集函数
-     * @author  韦胜健
-     * @date    2024.9.3 22:45
-     */
-    effects: iEffects,
-  }) {
-
-  const { refs, onRef } = useRefs({
-    /*用来创建popper的reference对象*/
-    input: Input,
-    /*用来上移下移hover元素的时候滚动到目标位置，如果用的是虚拟列表，则不会有这个对象，暂定虚拟列表不支持滚动*/
-    scroll: Scroll,
-  }, { effects });
-
-  const reference = useRenderReference();
-
-  const state = reactive({
-    /*给Panel用的搜索关键字，只有在输入change的时候这里才会有值*/
-    searchText: null as any,
-    /*当前是否focus*/
-    isFocus: false,
-    /*当前是否show*/
-    isShow: false,
-  });
-
-  /**
-   * 管理select option的hover状态
-   * @author  韦胜健
-   * @date    2022.7.23 19:49
-   */
-  const hover = createSelectHover({
-    defaultCurrent,
-    refs,
-    scrollHeight: () => scrollHeight.value,
-    getMatchOptionsLength: () => optionListHandler.getMatchOptionPropsList().length
-  });
-
-  const popper = createPopupEditor({
-    option: {
-      alwaysShowOnClickReference,
-      popperAttrs: getPublicPopperAttrs,
-      reference: () => (editComputed.value.disabled || editComputed.value.readonly) ? null : (reference.getReference() || refs.input?.refs.el),
-      // reference: () => refs.input?.refs.el,
-      onShow: () => {
-        state.isShow = true;
-        hooks.onPopperShow.exec(undefined);
-      },
-      onHide: () => {
-        state.isShow = false;
-        hooks.onPopperHide.exec(undefined);
-      },
-      onClose: () => {
-        hooks.onPopperClose.exec(undefined);
-        /*清空搜索关键字*/
-        state.searchText = null;
-        /*重置当前hover*/
-        hover.resetCurrent();
-        /*滚动回最开始的位置*/
-        !!refs.scroll && refs.scroll.methods.scrollTop(0);
-      },
-      popper: () => {
-        const { render, optionPropsList, matchOptionPropsList } = optionListHandler.decode();
-        return (
-          <SelectPanel
-            multiple={multiple}
-            onSelect={onSelectOption}
-            onMouseDown={handler.onMousedownPanel}
-            onEnterOption={hover.onEnterOption}
-            size={styleComputed.value.size}
-            optionAlign={props.optionAlign}
-            searchText={state.searchText}
-            isMatchSearch={props.isMatchSearch}
-            current={hover.state.current}
-            isActivated={isActivated}
-            dataLength={optionPropsList.length}
-            matchLength={matchOptionPropsList.length}
-            noMatchLabel={props.noMatchLabel}
-            noDataLabel={props.noDataLabel}
-            loading={!!editComputed.value.loading}
-          >
-            {(() => {
-              const passSlot: any = {};
-              passSlot.default = () => (processRenderPanel ? processRenderPanel(render) : render());
-              (['noMatch', 'noData', 'loadingContent'] as const).forEach((slotName) => {
-                if (slots[slotName].isExist()) {passSlot[slotName] = slots[slotName];}
-              });
-              return passSlot;
-            })()}
-          </SelectPanel>
-        );
-      },
-    },
-  });
-
-  effects.push(
-    hooks.onTriggerShow.use(() => {popper.methods.show();})
-  );
-
-  effects.push(
-    hooks.onTriggerHide.use(() => {popper.methods.hide();})
-  );
-
-  effects.push(() => popper.methods.dispose());
-
-  /**
-   * 从插槽内容中解析出来option信息
-   * @author  韦胜健
-   * @date    2022.7.23 20:07
-   */
-  const optionListHandler = (() => {
-    const innerState = reactive({ renderKey: '', });
-    /*所有的option的props数组，每次render的时候更新，是一个非响应式的静态数组*/
-    let optionPropsList: iSelectOptionProps[] = [];
-    /*匹配到搜搜关键字的option的props数组，每次render的时候更新，是一个非响应式的静态数组*/
-    let matchOptionPropsList: iSelectOptionProps[] = [];
-
-    function getMatchLabel(): any
-    function getMatchLabel(isMultiple: true): any[]
-    function getMatchLabel(isMultiple?: true): any {
-      if (model.value == null) {return null;}
-      if (!isMultiple) {
-        return optionPropsList.find(isActivated)?.label || model.value;
-      } else {
-        return optionPropsList.filter(isActivated).map(i => i.label || i.val);
-      }
-    }
-
-    function getActivated(): iSelectOptionProps[] {return optionPropsList.filter(isActivated);}
-
-    return {
-      decode: (): {
-        optionPropsList: iSelectOptionProps[],
-        matchOptionPropsList: iSelectOptionProps[],
-        render: (() => RenderNode),
-      } => {
-        if (!!props.virtualData) {
-          /**
-           * 虚拟滚动
-           * @author  韦胜健
-           * @date    2022/7/25 10:53
-           */
-          optionPropsList = [...props.virtualData];
-          matchOptionPropsList = optionPropsList.filter(i => SelectUtils.isMatchSearch(state.searchText, i, props));
-          const render = () => {
-            /*如果显示的选项大于6个，则使用虚拟滚动显示，否则直接显示*/
-            return (matchOptionPropsList.length > props.scrollNum ?
-              (<div style={{ height: unit(scrollHeight.value)! }}>
-                <VirtualList data={matchOptionPropsList} size={(() => {
-                  const { virtualRowSize } = props;
-                  return virtualRowSize == null ? SelectDefaultVirtualRowSize[styleComputed.value.size] : virtualRowSize;
-                })()}>
-                  {{ default: ({ item, index, vIndex }: { item: iSelectOptionProps, index: number, vIndex: number }) => <SelectOption {...item} index={index} key={vIndex}/> }}
-                </VirtualList>
-              </div>) : (
-                matchOptionPropsList.map((i, index) => (<SelectOption {...i} index={index}/>))
-              ));
-          };
-          return { optionPropsList, matchOptionPropsList, render };
-        } else {
-          /**
-           * 非虚拟滚动，从node中解析select option props
-           * @author  韦胜健
-           * @date    2022/7/25 10:54
-           */
-          const ret = decodeSelectRenderNode({
-            renderNode: slots.default(),
-            searchText: state.searchText,
-            props,
-            onRefScroll: onRef.scroll,
-            innerState,
-            scrollHeight,
-          });
-          optionPropsList = ret.optionPropsList;
-          matchOptionPropsList = ret.matchOptionPropsList;
-          const currentRenderKey = optionPropsList.map(i => `${i.label}${i.val}`).join('');
-          if (innerState.renderKey !== currentRenderKey) {innerState.renderKey = currentRenderKey;}
-          return ret;
-        }
-      },
-      getOptionPropsList: () => optionPropsList,
-      getMatchOptionPropsList: () => matchOptionPropsList,
-      getMatchLabel,
-      getActivated,
-    };
-  })();
-
-  const methods = {
-    ...(() => {
-      /*如果已经打开，则hover上一个option，(否则选中上一个option, 单选)*/
-      const handlePrev = (e: KeyboardEvent) => {
-        e.preventDefault();
-        if (state.isShow) {
-          /*当前已经打开，则移动panel中的高亮元素，enter或者space的时候再确定选中*/
-          hover.prev();
-        } else {
-          handlePrevWhenNotShow?.(e);
-        }
-      };
-      /*如果已经打开，则hover下一个option，(否则选中下一个option, 单选)*/
-      const handleNext = (e: KeyboardEvent) => {
-        e.preventDefault();
-        if (state.isShow) {
-          /*当前已经打开，则移动panel中的高亮元素，enter或者space的时候再确定选中*/
-          hover.next();
-        } else {
-          handleNextWhenNotShow?.(e);
-        }
-      };
-      return { handlePrev, handleNext };
-    })()
-  };
-
-  const handler = {
-    /**
-     * input中的快捷键
-     * @author  韦胜健
-     * @date    2022/8/8 20:16
-     */
-    onInputKeydown: handleKeyboard<KeyboardEvent>({
-      up: methods.handlePrev,
-      down: methods.handleNext,
-      enter: (): void => handler.onInputEnter(),
-      esc: () => popper.methods.hide(),
-      space: (e): void => {
-        e.preventDefault();
-        e.stopPropagation();
-        handler.onInputEnter();
-      },
-    }),
-    /**
-     * 鼠标点下面板的动作，立即让input重新获取焦点
-     * @author  韦胜健
-     * @date    2022/8/8 20:15
-     */
-    onMousedownPanel: () => {delay().then(() => refs.input?.refs.input?.focus());},
-    /**
-     * 记录input focus
-     * @author  韦胜健
-     * @date    2022/8/8 20:16
-     */
-    onInputFocus: (e: FocusEvent) => {
-      state.isFocus = true;
-      emit.onFocus(e);
-    },
-    /**
-     * 记录input focus
-     * @author  韦胜健
-     * @date    2022/8/8 20:16
-     */
-    onInputBlur: (e: FocusEvent) => {
-      state.isFocus = false;
-      emit.onBlur(e);
-    },
-    /**
-     * change的时候应用搜索关键字
-     * @author  韦胜健
-     * @date    2022/8/8 20:16
-     */
-    onInputChange: (val: any) => {
-      if (!!props.handleFilterChange) {
-        props.handleFilterChange(val);
-      } else {
-        if (!props.disableFilter) {
-          hover.resetCurrent();
-          hooks.onInputTextChange.exec(val);
-          /*应用搜索关键字*/
-          state.searchText = val;
-        }
-      }
-      /*没有不打开popper的话就打开popper*/
-      if (!state.isShow) {
-        popper.methods.show();
-      }
-    },
-    /**
-     * input回车动作
-     * @author  韦胜健
-     * @date    2022/8/8 20:16
-     */
-    onInputEnter: () => {
-      /*enter按键的时候，如果已经打开则应用当前hover的值，没有则打开popper*/
-      if (state.isShow) {
-        const matchOptionPropsList = optionListHandler.getMatchOptionPropsList();
-        if (hover.state.current == null || matchOptionPropsList[hover.state.current] == null) {
-          popper.methods.toggle();
-        } else {
-          onSelectOption(matchOptionPropsList[hover.state.current]);
-        }
-      } else {
-        popper.methods.show();
-      }
-    },
-    /**
-     * 清空绑定值
-     * @author  韦胜健
-     * @date    2022.7.23 19:54
-     */
-    onInputClear: () => {
-      model.value = null;
-      state.searchText = null;
-      hooks.onInputClear.exec(undefined);
-    },
-    onSelectOption,
-    isActivated,
-  };
-
-  return {
-    refs,
-    onRef,
-    state,
-    hover,
-    popper,
-    optionListHandler,
-    methods,
-    handler,
-    reference,
-  };
-}
+import {reactive, RenderNode, useRefs} from "@peryl/react-compose";
+import {createSelectHover, iSelectCompositionParams, iSelectOptionProps, SelectDefaultVirtualRowSize, SelectUtils} from "./select.utils";
+import {decodeSelectRenderNode} from './decodeSelectRenderNode';
+import {Input} from "../Input";
+import {Scroll} from "../Scroll";
+import {SelectPanel} from "./SelectPanel";
+import {unit} from "@peryl/utils/unit";
+import {SelectOption} from "../SelectOption";
+import {VirtualList} from "../VirtualList";
+import {delay} from "@peryl/utils/delay";
+import {handleKeyboard} from "@peryl/utils/keyboard";
+import {useRenderReference} from "../../uses/useRenderReference";
+import {iEffects} from "@peryl/utils/createEffects";
+import {createPopupEditor} from "../usePopupEditor";
+
+export function createPublicSelectRender(
+  {
+    props,
+    emit,
+    hooks,
+    getPublicPopperAttrs,
+    slots,
+    editComputed,
+    styleComputed,
+    scrollHeight,
+  }: iSelectCompositionParams,
+  {
+    isActivated,
+    model,
+    handlePrevWhenNotShow,
+    handleNextWhenNotShow,
+    onSelectOption,
+    alwaysShowOnClickReference,
+    defaultCurrent,
+    multiple,
+    processRenderPanel,
+    effects,
+  }: {
+    /**
+     * 判断选项是否已经选中，用来provide给option组件判断自身是否已经选中
+     * @author  韦胜健
+     * @date    2022.8.1 22:25
+     */
+    isActivated: (optionProps: iSelectOptionProps) => boolean,
+    /**
+     * 非受控组件绑定值
+     * @author  韦胜健
+     * @date    2022/8/23 10:52
+     */
+    model: { value: any },
+    /**
+     * 处理没有打开popper的时候，input中上快捷键的点击动作，单选时直接切换值
+     * @author  韦胜健
+     * @date    2022/8/8 20:53
+     */
+    handlePrevWhenNotShow?: (e: KeyboardEvent) => void,
+    /**
+     * 吹了没有打开popper的时候，input中下快捷键的点击动作，单选时直接切换值
+     * @author  韦胜健
+     * @date    2022/8/8 20:53
+     */
+    handleNextWhenNotShow?: (e: KeyboardEvent) => void,
+    /**
+     * 处理选中某个选项的动作
+     * @author  韦胜健
+     * @date    2022/8/8 20:54
+     */
+    onSelectOption: (optionProps: iSelectOptionProps) => void,
+    /**
+     * 是否再点击reference的时候一直开启popper
+     * @author  韦胜健
+     * @date    2022/8/9 11:14
+     */
+    alwaysShowOnClickReference?: () => boolean,
+    /**
+     * 重置hover current的时候，current的默认值
+     * @author  韦胜健
+     * @date    2022/8/11 17:25
+     */
+    defaultCurrent: number | undefined,
+    /**
+     * 是否为多选
+     * @author  韦胜健
+     * @date    2022/8/12 10:04
+     */
+    multiple?: boolean,
+    /**
+     * 处理panel的render内容
+     * @author  韦胜健
+     * @date    2022/8/16 8:40
+     */
+    processRenderPanel?: (defaultRender: () => RenderNode) => RenderNode,
+    /**
+     * 副作用收集函数
+     * @author  韦胜健
+     * @date    2024.9.3 22:45
+     */
+    effects: iEffects,
+  }) {
+
+  const { refs, onRef } = useRefs({
+    /*用来创建popper的reference对象*/
+    input: Input,
+    /*用来上移下移hover元素的时候滚动到目标位置，如果用的是虚拟列表，则不会有这个对象，暂定虚拟列表不支持滚动*/
+    scroll: Scroll,
+  }, { effects });
+
+  const reference = useRenderReference();
+
+  const state = reactive({
+    /*给Panel用的搜索关键字，只有在输入change的时候这里才会有值*/
+    searchText: null as any,
+    /*当前是否focus*/
+    isFocus: false,
+    /*当前是否show*/
+    isShow: false,
+  });
+
+  /**
+   * 管理select option的hover状态
+   * @author  韦胜健
+   * @date    2022.7.23 19:49
+   */
+  const hover = createSelectHover({
+    defaultCurrent,
+    refs,
+    scrollHeight: () => scrollHeight.value,
+    getMatchOptionsLength: () => optionListHandler.getMatchOptionPropsList().length
+  });
+
+  const popper = createPopupEditor({
+    option: {
+      alwaysShowOnClickReference,
+      popperAttrs: getPublicPopperAttrs,
+      reference: () => (editComputed.value.disabled || editComputed.value.readonly) ? null : (reference.getReference() || refs.input?.refs.el),
+      // reference: () => refs.input?.refs.el,
+      onShow: () => {
+        state.isShow = true;
+        hooks.onPopperShow.exec(undefined);
+      },
+      onHide: () => {
+        state.isShow = false;
+        hooks.onPopperHide.exec(undefined);
+      },
+      onClose: () => {
+        hooks.onPopperClose.exec(undefined);
+        /*清空搜索关键字*/
+        state.searchText = null;
+        /*重置当前hover*/
+        hover.resetCurrent();
+        /*滚动回最开始的位置*/
+        !!refs.scroll && refs.scroll.methods.scrollTop(0);
+      },
+      popper: () => {
+        const { render, optionPropsList, matchOptionPropsList } = optionListHandler.decode();
+        return (
+          <SelectPanel
+            multiple={multiple}
+            onSelect={onSelectOption}
+            onMouseDown={handler.onMousedownPanel}
+            onEnterOption={hover.onEnterOption}
+            size={styleComputed.value.size}
+            optionAlign={props.optionAlign}
+            searchText={state.searchText}
+            isMatchSearch={props.isMatchSearch}
+            current={hover.state.current}
+            isActivated={isActivated}
+            dataLength={optionPropsList.length}
+            matchLength={matchOptionPropsList.length}
+            noMatchLabel={props.noMatchLabel}
+            noDataLabel={props.noDataLabel}
+            loading={!!editComputed.value.loading}
+          >
+            {(() => {
+              const passSlot: any = {};
+              passSlot.default = () => (processRenderPanel ? processRenderPanel(render) : render());
+              (['noMatch', 'noData', 'loadingContent'] as const).forEach((slotName) => {
+                if (slots[slotName].isExist()) {passSlot[slotName] = slots[slotName];}
+              });
+              return passSlot;
+            })()}
+          </SelectPanel>
+        );
+      },
+    },
+  });
+
+  effects.push(
+    hooks.onTriggerShow.use(() => {popper.methods.show();})
+  );
+
+  effects.push(
+    hooks.onTriggerHide.use(() => {popper.methods.hide();})
+  );
+
+  effects.push(() => popper.methods.dispose());
+
+  /**
+   * 从插槽内容中解析出来option信息
+   * @author  韦胜健
+   * @date    2022.7.23 20:07
+   */
+  const optionListHandler = (() => {
+    const innerState = reactive({ renderKey: '', });
+    /*所有的option的props数组，每次render的时候更新，是一个非响应式的静态数组*/
+    let optionPropsList: iSelectOptionProps[] = [];
+    /*匹配到搜搜关键字的option的props数组，每次render的时候更新，是一个非响应式的静态数组*/
+    let matchOptionPropsList: iSelectOptionProps[] = [];
+
+    function getMatchLabel(): any
+    function getMatchLabel(isMultiple: true): any[]
+    function getMatchLabel(isMultiple?: true): any {
+      if (model.value == null) {return null;}
+      if (!isMultiple) {
+        return optionPropsList.find(isActivated)?.label || model.value;
+      } else {
+        return optionPropsList.filter(isActivated).map(i => i.label || i.val);
+      }
+    }
+
+    function getActivated(): iSelectOptionProps[] {return optionPropsList.filter(isActivated);}
+
+    return {
+      decode: (): {
+        optionPropsList: iSelectOptionProps[],
+        matchOptionPropsList: iSelectOptionProps[],
+        render: (() => RenderNode),
+      } => {
+        if (!!props.virtualData) {
+          /**
+           * 虚拟滚动
+           * @author  韦胜健
+           * @date    2022/7/25 10:53
+           */
+          optionPropsList = [...props.virtualData];
+          matchOptionPropsList = optionPropsList.filter(i => SelectUtils.isMatchSearch(state.searchText, i, props));
+          const render = () => {
+            /*如果显示的选项大于6个，则使用虚拟滚动显示，否则直接显示*/
+            return (matchOptionPropsList.length > props.scrollNum ?
+              (<div style={{ height: unit(scrollHeight.value)! }}>
+                <VirtualList data={matchOptionPropsList} size={(() => {
+                  const { virtualRowSize } = props;
+                  return virtualRowSize == null ? SelectDefaultVirtualRowSize[styleComputed.value.size] : virtualRowSize;
+                })()}>
+                  {{ default: ({ item, index, vIndex }: { item: iSelectOptionProps, index: number, vIndex: number }) => <SelectOption {...item} index={index} key={vIndex}/> }}
+                </VirtualList>
+              </div>) : (
+                matchOptionPropsList.map((i, index) => (<SelectOption {...i} index={index}/>))
+              ));
+          };
+          return { optionPropsList, matchOptionPropsList, render };
+        } else {
+          /**
+           * 非虚拟滚动，从node中解析select option props
+           * @author  韦胜健
+           * @date    2022/7/25 10:54
+           */
+          const ret = decodeSelectRenderNode({
+            renderNode: slots.default(),
+            searchText: state.searchText,
+            props,
+            onRefScroll: onRef.scroll,
+            innerState,
+            scrollHeight,
+          });
+          optionPropsList = ret.optionPropsList;
+          matchOptionPropsList = ret.matchOptionPropsList;
+          const currentRenderKey = optionPropsList.map(i => `${i.label}${i.val}`).join('');
+          if (innerState.renderKey !== currentRenderKey) {innerState.renderKey = currentRenderKey;}
+          return ret;
+        }
+      },
+      getOptionPropsList: () => optionPropsList,
+      getMatchOptionPropsList: () => matchOptionPropsList,
+      getMatchLabel,
+      getActivated,
+    };
+  })();
+
+  const methods = {
+    ...(() => {
+      /*如果已经打开，则hover上一个option，(否则选中上一个option, 单选)*/
+      const handlePrev = (e: KeyboardEvent) => {
+        e.preventDefault();
+        if (state.isShow) {
+          /*当前已经打开，则移动panel中的高亮元素，enter或者space的时候再确定选中*/
+          hover.prev();
+        } else {
+          handlePrevWhenNotShow?.(e);
+        }
+      };
+      /*如果已经打开，则hover下一个option，(否则选中下一个option, 单选)*/
+      const handleNext = (e: KeyboardEvent) => {
+        e.preventDefault();
+        if (state.isShow) {
+          /*当前已经打开，则移动panel中的高亮元素，enter或者space的时候再确定选中*/
+          hover.next();
+        } else {
+          handleNextWhenNotShow?.(e);
+        }
+      };
+      return { handlePrev, handleNext };
+    })()
+  };
+
+  const handler = {
+    /**
+     * input中的快捷键
+     * @author  韦胜健
+     * @date    2022/8/8 20:16
+     */
+    onInputKeydown: handleKeyboard<KeyboardEvent>({
+      up: methods.handlePrev,
+      down: methods.handleNext,
+      enter: (): void => handler.onInputEnter(),
+      esc: () => popper.methods.hide(),
+      space: (e): void => {
+        e.preventDefault();
+        e.stopPropagation();
+        handler.onInputEnter();
+      },
+    }),
+    /**
+     * 鼠标点下面板的动作，立即让input重新获取焦点
+     * @author  韦胜健
+     * @date    2022/8/8 20:15
+     */
+    onMousedownPanel: () => {delay().then(() => refs.input?.refs.input?.focus());},
+    /**
+     * 记录input focus
+     * @author  韦胜健
+     * @date    2022/8/8 20:16
+     */
+    onInputFocus: (e: FocusEvent) => {
+      state.isFocus = true;
+      emit.onFocus(e);
+    },
+    /**
+     * 记录input focus
+     * @author  韦胜健
+     * @date    2022/8/8 20:16
+     */
+    onInputBlur: (e: FocusEvent) => {
+      state.isFocus = false;
+      emit.onBlur(e);
+    },
+    /**
+     * change的时候应用搜索关键字
+     * @author  韦胜健
+     * @date    2022/8/8 20:16
+     */
+    onInputChange: (val: any) => {
+      if (!!props.handleFilterChange) {
+        props.handleFilterChange(val);
+      } else {
+        if (!props.disableFilter) {
+          hover.resetCurrent();
+          hooks.onInputTextChange.exec(val);
+          /*应用搜索关键字*/
+          state.searchText = val;
+        }
+      }
+      /*没有不打开popper的话就打开popper*/
+      if (!state.isShow) {
+        popper.methods.show();
+      }
+    },
+    /**
+     * input回车动作
+     * @author  韦胜健
+     * @date    2022/8/8 20:16
+     */
+    onInputEnter: () => {
+      /*enter按键的时候，如果已经打开则应用当前hover的值，没有则打开popper*/
+      if (state.isShow) {
+        const matchOptionPropsList = optionListHandler.getMatchOptionPropsList();
+        if (hover.state.current == null || matchOptionPropsList[hover.state.current] == null) {
+          popper.methods.toggle();
+        } else {
+          onSelectOption(matchOptionPropsList[hover.state.current]);
+        }
+      } else {
+        popper.methods.show();
+      }
+    },
+    /**
+     * 清空绑定值
+     * @author  韦胜健
+     * @date    2022.7.23 19:54
+     */
+    onInputClear: () => {
+      model.value = null;
+      state.searchText = null;
+      hooks.onInputClear.exec(undefined);
+    },
+    onSelectOption,
+    isActivated,
+  };
+
+  return {
+    refs,
+    onRef,
+    state,
+    hover,
+    popper,
+    optionListHandler,
+    methods,
+    handler,
+    reference,
+  };
+}