feat(select): 重构use-select.ts文件，拆分特性

packages/devui-vue/devui/select/src/composables/use-allow-create.ts

@@ -0,0 +1,16 @@
+import { computed } from 'vue';
+import { SelectProps, allowCreateOption, useAllowCreateReturn } from '../select-types';
+
+export default function useAllowCreate(props: SelectProps, option: allowCreateOption): useAllowCreateReturn {
+  const { filterQuery, injectOptionsArray } = option;
+
+  // allow-create
+  const isShowCreateOption = computed(() => {
+    const hasCommonOption = injectOptionsArray.value.filter((item) => !item.create).some((item) => item.name === filterQuery.value);
+    return props.filter === true && props.allowCreate && !!filterQuery.value && !hasCommonOption;
+  });
+
+  return {
+    isShowCreateOption,
+  };
+}

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

@@ -0,0 +1,31 @@
+import { ref, computed } from 'vue';
+import { SelectProps, useFilterReturn } from '../select-types';
+import { isFunction, debounce } from 'lodash';
+
+export default function useFilter(props: SelectProps): useFilterReturn {
+  const filterQuery = ref('');
+  const debounceTime = computed(() => (props.remote ? 300 : 0));
+  const isSupportFilter = computed(() => isFunction(props.filter) || props.filter === true);
+
+  const queryChange = (query: string) => {
+    filterQuery.value = query;
+  };
+
+  const handlerQueryFunc = (query: string) => {
+    if (isFunction(props.filter)) {
+      props.filter(query);
+    } else {
+      queryChange(query);
+    }
+  };
+
+  const debounceQueryFilter = debounce((query: string) => {
+    handlerQueryFunc(query);
+  }, debounceTime.value);
+
+  return {
+    filterQuery,
+    isSupportFilter,
+    debounceQueryFilter,
+  };
+}

packages/devui-vue/devui/select/src/composables/use-multiple-select.ts

@@ -0,0 +1,68 @@
+import type { SetupContext } from 'vue';
+import { SelectProps, OptionObjectItem, useMultipleOption, useMultipleReturn } from '../select-types';
+
+export default function useMultipleSelect(props: SelectProps, ctx: SetupContext, multipleOption: useMultipleOption): useMultipleReturn {
+  const { filterQuery, isSupportFilter, isObjectOption, mergeOptions, injectOptions, getValuesOption, getInjectOptions } = multipleOption;
+
+  const getMultipleSelected = (items: (string | number)[]) => {
+    if (mergeOptions.value.length) {
+      ctx.emit(
+        'value-change',
+        getValuesOption(items).filter((item) => (item ? true : false))
+      );
+    } else if (isObjectOption.value) {
+      const selectItems = getInjectOptions(items).filter((item) => (item ? true : false));
+      ctx.emit('value-change', selectItems);
+    } else {
+      ctx.emit('value-change', items);
+    }
+  };
+  const multipleValueChange = (item: OptionObjectItem) => {
+    let { modelValue } = props;
+
+    const checkedItems = Array.isArray(modelValue) ? modelValue.slice() : [];
+    const index = checkedItems.indexOf(item.value);
+    const option = getInjectOptions([item.value])[0];
+    if (option) {
+      option._checked = !option._checked;
+    }
+    const mergeOption = getValuesOption([item.value])[0];
+    if (mergeOption) {
+      mergeOption._checked = !mergeOption._checked;
+    }
+    if (index > -1) {
+      checkedItems.splice(index, 1);
+    } else {
+      checkedItems.push(item.value);
+    }
+    modelValue = checkedItems;
+    ctx.emit('update:modelValue', modelValue);
+    if (item.create) {
+      filterQuery.value = '';
+    }
+    if (isSupportFilter.value) {
+      focus();
+    }
+    getMultipleSelected(checkedItems);
+  };
+
+  const tagDelete = (data: OptionObjectItem) => {
+    const checkedItems = [];
+    for (const child of injectOptions.value.values()) {
+      if (data.value === child.value) {
+        child._checked = false;
+      }
+      if (child._checked) {
+        checkedItems.push(child.value);
+      }
+    }
+    ctx.emit('update:modelValue', checkedItems);
+    ctx.emit('remove-tag', data.value);
+    getMultipleSelected(checkedItems);
+  };
+
+  return {
+    multipleValueChange,
+    tagDelete,
+  };
+}

packages/devui-vue/devui/select/src/composables/use-no-data-text.ts

@@ -0,0 +1,35 @@
+import { computed } from 'vue';
+import { SelectProps, useNoDataOption, useNoDataReturn } from '../select-types';
+
+export default function useNoDataText(props: SelectProps, option: useNoDataOption): useNoDataReturn {
+  const { filterQuery, isSupportFilter, injectOptionsArray, t } = option;
+
+  // no-data-text
+  const isLoading = computed(() => typeof props.loading === 'boolean' && props.loading);
+  const emptyText = computed(() => {
+    const visibleOptionsCount = injectOptionsArray.value.filter((item) => {
+      const label = item.name || item.value;
+      return label.toString().toLocaleLowerCase().includes(filterQuery.value.toLocaleLowerCase());
+    }).length;
+    if (isLoading.value) {
+      return props.loadingText || (t('loadingText') as string);
+    }
+    if (isSupportFilter.value && filterQuery.value && injectOptionsArray.value.length > 0 && visibleOptionsCount === 0) {
+      return props.noMatchText || (t('noMatchText') as string);
+    }
+    if (injectOptionsArray.value.length === 0) {
+      return props.noDataText || (t('noDataText') as string);
+    }
+    return '';
+  });
+
+  const isShowEmptyText = computed(() => {
+    return !!emptyText.value && (!props.allowCreate || isLoading.value || (props.allowCreate && injectOptionsArray.value.length === 0));
+  });
+
+  return {
+    isLoading,
+    emptyText,
+    isShowEmptyText,
+  };
+}

packages/devui-vue/devui/select/src/composables/use-option.ts

@@ -3,6 +3,7 @@ import { OptionProps, UseOptionReturnType } from '../select-types';
 import { SELECT_TOKEN, OPTION_GROUP_TOKEN } from '../const';
 import { className } from '../utils';
 import { useNamespace } from '../../../shared/hooks/use-namespace';
+
 export default function useOption(props: OptionProps): UseOptionReturnType {
   const ns = useNamespace('select');
   const select = inject(SELECT_TOKEN, null);
@@ -43,7 +44,12 @@ export default function useOption(props: OptionProps): UseOptionReturnType {
   });
 
   const optionSelect = (): void => {
-    if (!isDisabled.value) {
+    if (isDisabled.value) {
+      return;
+    }
+    if (select?.multiple) {
+      select?.multipleValueChange(optionItem.value);
+    } else {
       select?.valueChange(optionItem.value);
     }
   };

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

@@ -1,5 +1,5 @@
 import { PropType, ComputedRef, ExtractPropTypes, Ref } from 'vue';
-
+import { KeyType } from './utils';
 export interface OptionObjectItem {
   name: string;
   value: string | number;
@@ -116,23 +116,23 @@ export interface UseSelectReturnType {
   dropdownRef: Ref<HTMLElement | undefined>;
   isOpen: Ref<boolean>;
   selectCls: ComputedRef<string>;
+  isObjectOption: Ref<boolean>;
   mergeOptions: Ref<OptionObjectItem[]>;
+  injectOptions: Ref<Map<string | number, Record<string, unknown>>>;
+  injectOptionsArray: ComputedRef<OptionObjectItem[]>;
   selectedOptions: ComputedRef<OptionObjectItem[]>;
-  filterQuery: Ref<string>;
-  emptyText: ComputedRef<string>;
-  isLoading: Ref<boolean>;
-  isShowEmptyText: ComputedRef<boolean>;
+  dropdownWidth: ComputedRef<string>;
+  onClick: (e: MouseEvent) => void;
   handleClear: (e: MouseEvent) => void;
   valueChange: (item: OptionObjectItem) => void;
   handleClose: () => void;
   updateInjectOptions: (item: Record<string, unknown>, operation: string, isObject: boolean) => void;
-  tagDelete: (data: OptionObjectItem) => void;
   onFocus: (e: FocusEvent) => void;
   onBlur: (e: FocusEvent) => void;
   isDisabled: (item: OptionObjectItem) => boolean;
   toggleChange: (bool: boolean) => void;
-  debounceQueryFilter: (query: string) => void;
-  isShowCreateOption: ComputedRef<boolean>;
+  getValuesOption: (values: KeyType<OptionObjectItem, 'value'>[]) => unknown[];
+  getInjectOptions: (values: KeyType<OptionObjectItem, 'value'>[]) => unknown[];
 }
 
 export interface SelectContext extends SelectProps {
@@ -142,6 +142,7 @@ export interface SelectContext extends SelectProps {
   selectedOptions: OptionObjectItem[];
   filterQuery: string;
   valueChange: (item: OptionObjectItem) => void;
+  multipleValueChange: (item: OptionObjectItem) => void;
   handleClear: () => void;
   updateInjectOptions: (item: Record<string, unknown>, operation: string, isObject: boolean) => void;
   tagDelete: (data: OptionObjectItem) => void;
@@ -217,3 +218,46 @@ export const optionGroupProps = {
 export type OptionGroupProps = ExtractPropTypes<typeof optionGroupProps>;
 
 export type OptionGroupContext = OptionGroupProps;
+
+export interface allowCreateOption {
+  filterQuery: Ref<string>;
+  injectOptionsArray: ComputedRef<OptionObjectItem[]>;
+}
+
+export interface useAllowCreateReturn {
+  isShowCreateOption: ComputedRef<boolean>;
+}
+
+export interface useFilterReturn {
+  filterQuery: Ref<string>;
+  isSupportFilter: ComputedRef<boolean>;
+  debounceQueryFilter: (query: string) => void;
+}
+
+export interface useMultipleOption {
+  filterQuery: Ref<string>;
+  isSupportFilter: ComputedRef<boolean>;
+  isObjectOption: Ref<boolean>;
+  mergeOptions: Ref<OptionObjectItem[]>;
+  injectOptions: Ref<Map<string | number, Record<string, unknown>>>;
+  getValuesOption: (values: KeyType<OptionObjectItem, 'value'>[]) => unknown[];
+  getInjectOptions: (values: KeyType<OptionObjectItem, 'value'>[]) => unknown[];
+}
+
+export interface useMultipleReturn {
+  multipleValueChange: (item: OptionObjectItem) => void;
+  tagDelete: (data: OptionObjectItem) => void;
+}
+
+export interface useNoDataOption {
+  filterQuery: Ref<string>;
+  isSupportFilter: ComputedRef<boolean>;
+  injectOptionsArray: ComputedRef<OptionObjectItem[]>;
+  t: (path: string) => unknown;
+}
+
+export interface useNoDataReturn {
+  isLoading: Ref<boolean>;
+  emptyText: ComputedRef<string>;
+  isShowEmptyText: ComputedRef<boolean>;
+}

packages/devui-vue/devui/select/src/select.tsx

@@ -21,6 +21,10 @@ import Option from './components/option';
 import { useNamespace } from '../../shared/hooks/use-namespace';
 import SelectContent from './components/select-content';
 import useSelectFunction from './composables/use-select-function';
+import useFilter from './composables/use-filter';
+import useMultipleSelect from './composables/use-multiple-select';
+import useNoDataText from './composables/use-no-data-text';
+import useAllowCreate from './composables/use-allow-create';
 import './select.scss';
 import { createI18nTranslate } from '../../locale/create';
 import { FlexibleOverlay, Placement } from '../../overlay';
@@ -35,30 +39,50 @@ export default defineComponent({
 
     const selectRef = ref();
     const { isSelectFocus, focus, blur } = useSelectFunction(props, selectRef);
+    const { filterQuery, isSupportFilter, debounceQueryFilter } = useFilter(props);
     const {
       selectDisabled,
       selectSize,
       originRef,
       dropdownRef,
       isOpen,
       selectCls,
+      isObjectOption,
       mergeOptions,
+      injectOptions,
+      injectOptionsArray,
       selectedOptions,
-      filterQuery,
-      emptyText,
-      isLoading,
-      isShowEmptyText,
+      dropdownWidth,
+      onClick,
       valueChange,
       handleClear,
       updateInjectOptions,
-      tagDelete,
       onFocus,
       onBlur,
-      debounceQueryFilter,
       isDisabled,
       toggleChange,
-      isShowCreateOption,
-    } = useSelect(props, selectRef, ctx, focus, blur, isSelectFocus, t);
+      getValuesOption,
+      getInjectOptions,
+    } = useSelect(props, ctx, focus, blur, isSelectFocus);
+
+    const { multipleValueChange, tagDelete } = useMultipleSelect(props, ctx, {
+      filterQuery,
+      isSupportFilter,
+      isObjectOption,
+      mergeOptions,
+      injectOptions,
+      getValuesOption,
+      getInjectOptions,
+    });
+
+    const { isShowCreateOption } = useAllowCreate(props, { filterQuery, injectOptionsArray });
+
+    const { isLoading, emptyText, isShowEmptyText } = useNoDataText(props, {
+      filterQuery,
+      isSupportFilter,
+      injectOptionsArray,
+      t,
+    });
 
     const scrollbarNs = useNamespace('scrollbar');
     const ns = useNamespace('select');
@@ -104,6 +128,7 @@ export default defineComponent({
         selectedOptions,
         filterQuery,
         valueChange,
+        multipleValueChange,
         handleClear,
         updateInjectOptions,
         tagDelete,