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

* feat(editable-select): 新增单元测试 * fix(editable-select): update components status * fix: 修复eslint的错误和警告 * fix: 解决冲突 * fix: 解决冲突 * fix: 修复文档错误

Author: chenxi24

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;
  }
 }