fix(editable-select):修复Eslint错误

packages/devui-vue/devui/editable-select/src/composables/use-filter-options.ts

@@ -4,11 +4,11 @@ import { OptionObjectItem } from '../editable-select-type';
 const getFilterFunc = () => (val: string, option: OptionObjectItem) =>
   option.label.toLocaleLowerCase().indexOf(val.toLocaleLowerCase()) > -1;
 
-export const userFilterOptions: (
+export const userFilterOptions = (
   normalizeOptions: ComputedRef<OptionObjectItem[]>,
   inputValue: Ref<string>,
-  filteredOptions: boolean | ((val: string, option: OptionObjectItem) => boolean)
-) => ComputedRef<OptionObjectItem[]> = (normalizeOptions, inputValue, filterOption) =>
+  filterOption: boolean | ((val: string, option: OptionObjectItem) => boolean) | undefined
+): ComputedRef<OptionObjectItem[]> =>
   computed(() => {
     const filteredOptions: OptionObjectItem[] = [];
 
@@ -23,6 +23,5 @@ export const userFilterOptions: (
         filteredOptions.push(option);
       }
     });
-
     return filteredOptions;
   });

packages/devui-vue/devui/editable-select/src/composables/use-input.ts

@@ -2,10 +2,7 @@ import { SetupContext, Ref } from 'vue';
 interface userInputReturnType {
   handleInput: (event: Event) => void;
 }
-export const useInput: (inputValue: Ref<string>, ctx: SetupContext) => userInputReturnType = (
-  inputValue,
-  ctx
-) => {
+export const useInput = (inputValue: Ref<string>, ctx: SetupContext): userInputReturnType => {
   const onInputChange = (value: string) => {
     ctx.emit('search', value);
   };
@@ -17,6 +14,6 @@ export const useInput: (inputValue: Ref<string>, ctx: SetupContext) => userInput
   };
 
   return {
-    handleInput
+    handleInput,
   };
 };

packages/devui-vue/devui/editable-select/src/composables/use-keyboard-select.ts

@@ -1,30 +1,24 @@
-import { ComputedRef, nextTick, Ref } from 'vue';
+import { ref, nextTick, ComputedRef, Ref } from 'vue';
 import { OptionObjectItem } from '../editable-select-type';
-
 interface useKeyboardSelectReturnType {
   handleKeydown: (event: KeyboardEvent) => void;
+  hoverIndex: Ref<number>;
+  selectedIndex: Ref<number>;
 }
-export const useKeyboardSelect: (
-  dropdownRef: Ref<any>,
-  disabled: string,
+export const useKeyboardSelect = (
+  dropdownRef: Ref,
   visible: Ref<boolean>,
-  hoverIndex: Ref<number>,
-  selectedIndex: Ref<number>,
-  options: ComputedRef<OptionObjectItem[]>,
-  toggleMenu: () => void,
+  inputValue: Ref<string>,
+  filteredOptions: ComputedRef<OptionObjectItem[]>,
+  optionDisabledKey: string,
+  filterOption: boolean | ((val: string, option: OptionObjectItem) => boolean) | undefined,
+  loading: Ref<boolean>,
+  handleClick: (options: OptionObjectItem) => void,
   closeMenu: () => void,
-  handleClick: (options: OptionObjectItem) => void
-) => useKeyboardSelectReturnType = (
-  dropdownRef,
-  disabled,
-  visible,
-  hoverIndex,
-  selectedIndex,
-  options,
-  toggleMenu,
-  closeMenu,
-  handleClick
-) => {
+  toggleMenu: () => void
+): useKeyboardSelectReturnType => {
+  const hoverIndex = ref(0);
+  const selectedIndex = ref(0);
   const updateHoveringIndex = (index: number) => {
     hoverIndex.value = index;
   };
@@ -43,68 +37,74 @@ export const useKeyboardSelect: (
       }
     });
   };
+  const handleEscape = () => {
+    if (inputValue.value) {
+      inputValue.value = '';
+    } else {
+      closeMenu();
+    }
+  };
+
+  const handleEnter = () => {
+    const len = filteredOptions.value.length;
+    if (!visible.value) {
+      toggleMenu();
+    } else if (!len || len === 1) {
+      closeMenu();
+    } else if (len && len !== 1) {
+      handleClick(filteredOptions.value[hoverIndex.value]);
+      closeMenu();
+    }
+  };
+
+  const handleKeyboardNavigation = (direction: string): void => {
+    const len = filteredOptions.value.length;
+    if (!len || len === 1) {
+      return;
+    }
+    if (!['ArrowDown', 'ArrowUp'].includes(direction)) {
+      return;
+    }
 
-  const onKeyboardNavigation = (direction: string, newIndex?: number) => {
-    if (!newIndex) {
-      newIndex = hoverIndex.value;
+    if (filterOption === false && loading.value) {
+      return;
     }
-    if (!['ArrowDown', 'ArrowUp'].includes(direction)) {return;}
+    let newIndex = 0;
+    newIndex = hoverIndex.value;
+
     if (direction === 'ArrowUp') {
-      if (newIndex === 0) {
-        newIndex = options.value.length - 1;
-        scrollToItem(newIndex);
-        updateHoveringIndex(newIndex);
-        return;
+      newIndex -= 1;
+      if (newIndex === -1) {
+        newIndex = len - 1;
       }
-      newIndex = newIndex - 1;
     } else if (direction === 'ArrowDown') {
-      if (newIndex === options.value.length - 1) {
+      newIndex += 1;
+      if (newIndex === len) {
         newIndex = 0;
-        scrollToItem(newIndex);
-        updateHoveringIndex(newIndex);
-        return;
       }
-      newIndex = newIndex + 1;
     }
-
-    const option = options.value[newIndex];
-    if (option[disabled]) {
-      return onKeyboardNavigation(direction, newIndex);
+    hoverIndex.value = newIndex;
+    const option = filteredOptions.value[newIndex];
+    if (option[optionDisabledKey]) {
+      return handleKeyboardNavigation(direction);
     }
-    scrollToItem(newIndex);
     updateHoveringIndex(newIndex);
+    scrollToItem(newIndex);
   };
 
   const handleKeydown = (event: KeyboardEvent) => {
     const keyCode = event.key || event.code;
-
-    if (options.value.length === 0) {return;}
-
-    if (!visible.value) {
-      return toggleMenu();
-    }
-
-    const onKeydownEnter = () => {
-      handleClick(options.value[hoverIndex.value]);
-      closeMenu();
-    };
-
-    const onKeydownEsc = () => {
-      closeMenu();
-    };
-
     switch (keyCode) {
-    case 'Enter':
-      onKeydownEnter();
-      break;
     case 'Escape':
-      onKeydownEsc();
+      event.preventDefault();
+      handleEscape();
+      break;
+    case 'Enter':
+      handleEnter();
       break;
     default:
-      onKeyboardNavigation(keyCode);
+      handleKeyboardNavigation(keyCode);
     }
   };
-  return {
-    handleKeydown
-  };
+  return { handleKeydown, hoverIndex, selectedIndex };
 };

packages/devui-vue/devui/editable-select/src/composables/use-lazy-load.ts

@@ -1,25 +1,25 @@
-import { Ref } from 'vue';
+import { Ref, SetupContext } from 'vue';
 import { OptionObjectItem } from '../editable-select-type';
 
 interface useLazyLoadReturenType {
   loadMore: () => void;
 }
-export const useLazyLoad: (
-  dropdownRef: Ref,
+export const useLazyLoad = (
+  dropdownRef: Ref<HTMLElement>,
   inputValue: Ref<string>,
-  filterOtion: boolean | ((val: string, option: OptionObjectItem) => boolean),
-  load: (val: string) => void
-) => useLazyLoadReturenType = (dropdownRef, inputValue, filterOtion, load) => {
+  filterOtion: boolean | ((val: string, option: OptionObjectItem) => boolean) | undefined,
+  ctx: SetupContext
+): useLazyLoadReturenType => {
   const loadMore = () => {
-    if (filterOtion !== false) {return;}
+    const dropdownVal = dropdownRef.value;
 
-    if (
-      dropdownRef.value.clientHeight + dropdownRef.value.scrollTop >=
-      dropdownRef.value.scrollHeight
-    ) {
-      load(inputValue.value);
+    if (filterOtion !== false) {
+      return;
     }
-  };
 
+    if (dropdownVal.clientHeight + dropdownVal.scrollTop >= dropdownVal.scrollHeight) {
+      ctx.emit('loadMore', inputValue.value);
+    }
+  };
   return { loadMore };
 };

packages/devui-vue/devui/editable-select/src/editable-select-type.ts

@@ -1,7 +1,8 @@
-export type OptionsType = Array<OptionType>;
-export type OptionType = string | number | OptionObjectItem;
 export interface OptionObjectItem {
   label: string;
   value: string | number;
-  [key: string]: any;
+  [key: string]: unknown;
 }
+export type OptionType = string | number | OptionObjectItem;
+
+export type OptionsType = Array<OptionType>;

packages/devui-vue/devui/editable-select/src/editable-select-types.ts

@@ -1,47 +1,36 @@
 import type { PropType, ExtractPropTypes } from 'vue';
 import { OptionObjectItem, OptionsType } from './editable-select-type';
 export const editableSelectProps = {
-  /* test: {
-    type: Object as PropType<{ xxx: xxx }>
-  } */
-  appendToBody: {
-    type: Boolean
-  },
   options: {
     type: Array as PropType<OptionsType>,
-    default: () => []
+    default: () => [],
   },
   disabled: {
-    type: Boolean
+    type: Boolean,
   },
   loading: {
-    type: Boolean
+    type: Boolean,
   },
   optionDisabledKey: {
     type: String,
-    default: ''
+    default: '',
   },
   placeholder: {
     type: String,
-    default: 'Search'
+    default: 'Search',
   },
   modelValue: {
-    type: String
+    type: String,
   },
   width: {
-    type: Number
+    type: Number,
   },
   maxHeight: {
-    type: Number
+    type: Number,
   },
   filterOption: {
-    type: [Function, Boolean] as PropType<
-    boolean | ((input: string, option: OptionObjectItem) => boolean)
-    >
+    type: [Function, Boolean] as PropType<boolean | ((input: string, option: OptionObjectItem) => boolean)>,
   },
-  loadMore: {
-    type: Function as PropType<(val: string) => void>
-  }
 } as const;
 
 export type EditableSelectProps = ExtractPropTypes<typeof editableSelectProps>;

packages/devui-vue/devui/editable-select/src/editable-select.scss

@@ -190,7 +190,7 @@
   }
 
   .devui-popup-tips {
-    color: $devui-text-weak; // TODO: Color-Question
+    color: $devui-text-weak;
     padding: 4px 12px;
   }
 }