@element-plus/nightly 0.0.20211230

package/lib/components/select/src/select.vue_vue_type_template_id_33774f85_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.vue_vue_type_template_id_33774f85_lang.js","sources":["../../../../../../packages/components/select/src/select.vue?vue&type=template&id=33774f85&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"selectWrapper\"\n    v-click-outside:[popperPaneRef]=\"handleClose\"\n    class=\"el-select\"\n    :class=\"[selectSize ? 'el-select--' + selectSize : '']\"\n    @click.stop=\"toggleMenu\"\n  >\n    <el-popper\n      ref=\"popper\"\n      v-model:visible=\"dropMenuVisible\"\n      placement=\"bottom-start\"\n      :append-to-body=\"popperAppendToBody\"\n      :popper-class=\"`el-select__popper ${popperClass}`\"\n      :fallback-placements=\"['bottom-start', 'top-start', 'right', 'left']\"\n      manual-mode\n      :effect=\"Effect.LIGHT\"\n      pure\n      trigger=\"click\"\n      transition=\"el-zoom-in-top\"\n      :stop-popper-mouse-event=\"false\"\n      :gpu-acceleration=\"false\"\n      @before-enter=\"handleMenuEnter\"\n    >\n      <template #trigger>\n        <div class=\"select-trigger\">\n          <div\n            v-if=\"multiple\"\n            ref=\"tags\"\n            class=\"el-select__tags\"\n            :style=\"{ maxWidth: inputWidth - 32 + 'px', width: '100%' }\"\n          >\n            <span v-if=\"collapseTags && selected.length\">\n              <el-tag\n                :closable=\"!selectDisabled && !selected[0].isDisabled\"\n                :size=\"collapseTagSize\"\n                :hit=\"selected[0].hitState\"\n                :type=\"tagType\"\n                disable-transitions\n                @close=\"deleteTag($event, selected[0])\"\n              >\n                <span\n                  class=\"el-select__tags-text\"\n                  :style=\"{ maxWidth: inputWidth - 123 + 'px' }\"\n                  >{{ selected[0].currentLabel }}</span\n                >\n              </el-tag>\n              <el-tag\n                v-if=\"selected.length > 1\"\n                :closable=\"false\"\n                :size=\"collapseTagSize\"\n                :type=\"tagType\"\n                disable-transitions\n              >\n                <span class=\"el-select__tags-text\"\n                  >+ {{ selected.length - 1 }}</span\n                >\n              </el-tag>\n            </span>\n            <!-- <div> -->\n            <transition v-if=\"!collapseTags\" @after-leave=\"resetInputHeight\">\n              <span\n                :style=\"{\n                  marginLeft:\n                    prefixWidth && selected.length ? `${prefixWidth}px` : null,\n                }\"\n              >\n                <el-tag\n                  v-for=\"item in selected\"\n                  :key=\"getValueKey(item)\"\n                  :closable=\"!selectDisabled && !item.isDisabled\"\n                  :size=\"collapseTagSize\"\n                  :hit=\"item.hitState\"\n                  :type=\"tagType\"\n                  disable-transitions\n                  @close=\"deleteTag($event, item)\"\n                >\n                  <span\n                    class=\"el-select__tags-text\"\n                    :style=\"{ maxWidth: inputWidth - 75 + 'px' }\"\n                    >{{ item.currentLabel }}</span\n                  >\n                </el-tag>\n              </span>\n            </transition>\n            <!-- </div> -->\n            <input\n              v-if=\"filterable\"\n              ref=\"input\"\n              v-model=\"query\"\n              type=\"text\"\n              class=\"el-select__input\"\n              :class=\"[selectSize ? `is-${selectSize}` : '']\"\n              :disabled=\"selectDisabled\"\n              :autocomplete=\"autocomplete\"\n              :style=\"{\n                marginLeft:\n                  (prefixWidth && !selected.length) || tagInMultiLine\n                    ? `${prefixWidth}px`\n                    : null,\n                flexGrow: '1',\n                width: `${inputLength / (inputWidth - 32)}%`,\n                maxWidth: `${inputWidth - 42}px`,\n              }\"\n              @focus=\"handleFocus\"\n              @blur=\"handleBlur\"\n              @keyup=\"managePlaceholder\"\n              @keydown=\"resetInputState\"\n              @keydown.down.prevent=\"navigateOptions('next')\"\n              @keydown.up.prevent=\"navigateOptions('prev')\"\n              @keydown.esc.stop.prevent=\"visible = false\"\n              @keydown.enter.stop.prevent=\"selectOption\"\n              @keydown.delete=\"deletePrevTag\"\n              @keydown.tab=\"visible = false\"\n              @compositionstart=\"handleComposition\"\n              @compositionupdate=\"handleComposition\"\n              @compositionend=\"handleComposition\"\n              @input=\"debouncedQueryChange\"\n            />\n          </div>\n          <el-input\n            :id=\"id\"\n            ref=\"reference\"\n            v-model=\"selectedLabel\"\n            type=\"text\"\n            :placeholder=\"currentPlaceholder\"\n            :name=\"name\"\n            :autocomplete=\"autocomplete\"\n            :size=\"selectSize\"\n            :disabled=\"selectDisabled\"\n            :readonly=\"readonly\"\n            :validate-event=\"false\"\n            :class=\"{ 'is-focus': visible }\"\n            :tabindex=\"multiple && filterable ? '-1' : null\"\n            @focus=\"handleFocus\"\n            @blur=\"handleBlur\"\n            @input=\"debouncedOnInputChange\"\n            @paste=\"debouncedOnInputChange\"\n            @compositionstart=\"handleComposition\"\n            @compositionupdate=\"handleComposition\"\n            @compositionend=\"handleComposition\"\n            @keydown.down.stop.prevent=\"navigateOptions('next')\"\n            @keydown.up.stop.prevent=\"navigateOptions('prev')\"\n            @keydown.enter.stop.prevent=\"selectOption\"\n            @keydown.esc.stop.prevent=\"visible = false\"\n            @keydown.tab=\"visible = false\"\n            @mouseenter=\"inputHovering = true\"\n            @mouseleave=\"inputHovering = false\"\n          >\n            <template v-if=\"$slots.prefix\" #prefix>\n              <div\n                style=\"\n                  height: 100%;\n                  display: flex;\n                  justify-content: center;\n                  align-items: center;\n                \"\n              >\n                <slot name=\"prefix\"></slot>\n              </div>\n            </template>\n            <template #suffix>\n              <el-icon\n                v-if=\"iconComponent\"\n                v-show=\"!showClose\"\n                :class=\"['el-select__caret', 'el-input__icon', iconReverse]\"\n              >\n                <component :is=\"iconComponent\" />\n              </el-icon>\n              <el-icon\n                v-if=\"showClose && clearIcon\"\n                class=\"el-select__caret el-input__icon\"\n                @click=\"handleClearClick\"\n              >\n                <component :is=\"clearIcon\" />\n              </el-icon>\n            </template>\n          </el-input>\n        </div>\n      </template>\n      <template #default>\n        <el-select-menu>\n          <el-scrollbar\n            v-show=\"options.size > 0 && !loading\"\n            ref=\"scrollbar\"\n            tag=\"ul\"\n            wrap-class=\"el-select-dropdown__wrap\"\n            view-class=\"el-select-dropdown__list\"\n            :class=\"{\n              'is-empty': !allowCreate && query && filteredOptionsCount === 0,\n            }\"\n          >\n            <el-option v-if=\"showNewOption\" :value=\"query\" :created=\"true\" />\n            <slot></slot>\n          </el-scrollbar>\n          <template\n            v-if=\"\n              emptyText &&\n              (!allowCreate || loading || (allowCreate && options.size === 0))\n            \"\n          >\n            <slot v-if=\"$slots.empty\" name=\"empty\"></slot>\n            <p v-else class=\"el-select-dropdown__empty\">\n              {{ emptyText }}\n            </p>\n          </template>\n        </el-select-menu>\n      </template>\n    </el-popper>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  toRefs,\n  defineComponent,\n  onMounted,\n  onBeforeUnmount,\n  nextTick,\n  reactive,\n  provide,\n  computed,\n} from 'vue'\nimport { ClickOutside } from '@element-plus/directives'\nimport { useFocus, useLocale } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElTag from '@element-plus/components/tag'\nimport ElIcon from '@element-plus/components/icon'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport {\n  addResizeListener,\n  removeResizeListener,\n} from '@element-plus/utils/resize-event'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { CircleClose, ArrowUp } from '@element-plus/icons-vue'\nimport ElOption from './option.vue'\nimport ElSelectMenu from './select-dropdown.vue'\nimport { useSelect, useSelectStates } from './useSelect'\nimport { selectKey } from './token'\n\nimport type { PropType, Component } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { SelectContext } from './token'\n\nexport default defineComponent({\n  name: 'ElSelect',\n  componentName: 'ElSelect',\n  components: {\n    ElInput,\n    ElSelectMenu,\n    ElOption,\n    ElTag,\n    ElScrollbar,\n    ElPopper,\n    ElIcon,\n  },\n  directives: { ClickOutside },\n  props: {\n    name: String,\n    id: String,\n    modelValue: {\n      type: [Array, String, Number, Boolean, Object],\n      default: undefined,\n    },\n    autocomplete: {\n      type: String,\n      default: 'off',\n    },\n    automaticDropdown: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    disabled: Boolean,\n    clearable: Boolean,\n    filterable: Boolean,\n    allowCreate: Boolean,\n    loading: Boolean,\n    popperClass: {\n      type: String,\n      default: '',\n    },\n    remote: Boolean,\n    loadingText: String,\n    noMatchText: String,\n    noDataText: String,\n    remoteMethod: Function,\n    filterMethod: Function,\n    multiple: Boolean,\n    multipleLimit: {\n      type: Number,\n      default: 0,\n    },\n    placeholder: {\n      type: String,\n    },\n    defaultFirstOption: Boolean,\n    reserveKeyword: Boolean,\n    valueKey: {\n      type: String,\n      default: 'value',\n    },\n    collapseTags: Boolean,\n    popperAppendToBody: {\n      type: Boolean,\n      default: true,\n    },\n    clearIcon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: CircleClose,\n    },\n    fitInputWidth: {\n      type: Boolean,\n      default: false,\n    },\n    suffixIcon: {\n      type: [String, Object] as PropType<string | Component>,\n      default: ArrowUp,\n    },\n    tagType: {\n      type: String,\n      default: 'info',\n    },\n  },\n  emits: [\n    UPDATE_MODEL_EVENT,\n    CHANGE_EVENT,\n    'remove-tag',\n    'clear',\n    'visible-change',\n    'focus',\n    'blur',\n  ],\n\n  setup(props, ctx) {\n    const { t } = useLocale()\n    const states = useSelectStates(props)\n    const {\n      optionsArray,\n      selectSize,\n      readonly,\n      handleResize,\n      collapseTagSize,\n      debouncedOnInputChange,\n      debouncedQueryChange,\n      deletePrevTag,\n      deleteTag,\n      deleteSelected,\n      handleOptionSelect,\n      scrollToOption,\n      setSelected,\n      resetInputHeight,\n      managePlaceholder,\n      showClose,\n      selectDisabled,\n      iconComponent,\n      iconReverse,\n      showNewOption,\n      emptyText,\n      toggleLastOptionHitState,\n      resetInputState,\n      handleComposition,\n      onOptionCreate,\n      onOptionDestroy,\n      handleMenuEnter,\n      handleFocus,\n      blur,\n      handleBlur,\n      handleClearClick,\n      handleClose,\n      toggleMenu,\n      selectOption,\n      getValueKey,\n      navigateOptions,\n      dropMenuVisible,\n\n      reference,\n      input,\n      popper,\n      tags,\n      selectWrapper,\n      scrollbar,\n      queryChange,\n      groupQueryChange,\n    } = useSelect(props, states, ctx)\n\n    const { focus } = useFocus(reference)\n\n    const {\n      inputWidth,\n      selected,\n      inputLength,\n      filteredOptionsCount,\n      visible,\n      softFocus,\n      selectedLabel,\n      hoverIndex,\n      query,\n      inputHovering,\n      currentPlaceholder,\n      menuVisibleOnFocus,\n      isOnComposition,\n      isSilentBlur,\n      options,\n      cachedOptions,\n      optionsCount,\n      prefixWidth,\n      tagInMultiLine,\n    } = toRefs(states)\n\n    provide(\n      selectKey,\n      reactive({\n        props,\n        options,\n        optionsArray,\n        cachedOptions,\n        optionsCount,\n        filteredOptionsCount,\n        hoverIndex,\n        handleOptionSelect,\n        onOptionCreate,\n        onOptionDestroy,\n        selectWrapper,\n        selected,\n        setSelected,\n        queryChange,\n        groupQueryChange,\n      }) as unknown as SelectContext\n    )\n\n    onMounted(() => {\n      states.cachedPlaceHolder = currentPlaceholder.value =\n        props.placeholder || t('el.select.placeholder')\n      if (\n        props.multiple &&\n        Array.isArray(props.modelValue) &&\n        props.modelValue.length > 0\n      ) {\n        currentPlaceholder.value = ''\n      }\n      addResizeListener(selectWrapper.value as any, handleResize)\n      if (reference.value && reference.value.$el) {\n        const sizeMap = {\n          large: 36,\n          default: 32,\n          small: 28,\n        }\n        const input = reference.value.input\n        states.initialInputHeight =\n          input.getBoundingClientRect().height || sizeMap[selectSize.value]\n      }\n      if (props.remote && props.multiple) {\n        resetInputHeight()\n      }\n      nextTick(() => {\n        if (reference.value.$el) {\n          inputWidth.value = reference.value.$el.getBoundingClientRect().width\n        }\n        if (ctx.slots.prefix) {\n          const inputChildNodes = reference.value.$el.childNodes\n          const input = [].filter.call(\n            inputChildNodes,\n            (item) => item.tagName === 'INPUT'\n          )[0]\n          const prefix = reference.value.$el.querySelector('.el-input__prefix')\n          prefixWidth.value = Math.max(\n            prefix.getBoundingClientRect().width + 5,\n            30\n          )\n          if (states.prefixWidth) {\n            input.style.paddingLeft = `${Math.max(states.prefixWidth, 30)}px`\n          }\n        }\n      })\n      setSelected()\n    })\n\n    onBeforeUnmount(() => {\n      removeResizeListener(selectWrapper.value as any, handleResize)\n    })\n\n    if (props.multiple && !Array.isArray(props.modelValue)) {\n      ctx.emit(UPDATE_MODEL_EVENT, [])\n    }\n    if (!props.multiple && Array.isArray(props.modelValue)) {\n      ctx.emit(UPDATE_MODEL_EVENT, '')\n    }\n\n    const popperPaneRef = computed(() => {\n      return popper.value?.popperRef\n    })\n\n    return {\n      Effect,\n      tagInMultiLine,\n      prefixWidth,\n      selectSize,\n      readonly,\n      handleResize,\n      collapseTagSize,\n      debouncedOnInputChange,\n      debouncedQueryChange,\n      deletePrevTag,\n      deleteTag,\n      deleteSelected,\n      handleOptionSelect,\n      scrollToOption,\n      inputWidth,\n      selected,\n      inputLength,\n      filteredOptionsCount,\n      visible,\n      softFocus,\n      selectedLabel,\n      hoverIndex,\n      query,\n      inputHovering,\n      currentPlaceholder,\n      menuVisibleOnFocus,\n      isOnComposition,\n      isSilentBlur,\n      options,\n      resetInputHeight,\n      managePlaceholder,\n      showClose,\n      selectDisabled,\n      iconComponent,\n      iconReverse,\n      showNewOption,\n      emptyText,\n      toggleLastOptionHitState,\n      resetInputState,\n      handleComposition,\n      handleMenuEnter,\n      handleFocus,\n      blur,\n      handleBlur,\n      handleClearClick,\n      handleClose,\n      toggleMenu,\n      selectOption,\n      getValueKey,\n      navigateOptions,\n      dropMenuVisible,\n      focus,\n\n      reference,\n      input,\n      popper,\n      popperPaneRef,\n      tags,\n      selectWrapper,\n      scrollbar,\n    }\n  },\n})\n</script>\n"],"names":["_createVNode","_createCommentVNode","_withModifiers","_withDirectives","_createBlock"],"mappings":";;;;;;;qBAyBa,KAAK;;;;;;;EAiLI;;;;;;;;;;;;;;;IAtMlBA;WAEM;;;MAGJ;MACQ;;MACR;MACC;MACA;MACA;MACD;MACC;MACD;MACA;MACA;;MAEC,qBAAgB;;;;;;;;gBAOX;;gBAEC,mCAAmB;;sCAEQ;;;gCAEf,sDAA4C;;;;;yEAK7C,eAAU;;;;iCAGX;4BACJ;;;;;qCAKY;;;yCACJ;;;;;;8BAKX,qDACK;;;;;;;;;;;;;;;+BAOC;;;;;;qDAKN;iCAEM;oEAC2B;;;;8BAI/B;;;;;kCAIE,KAAKC;;+DAEI;;;;;;;;;;gBAKjB;;;;;;;;sBAQG,QAAQ;sBACR,cAAc;sBACd;;;;;;;;;6BASK;;;;;;;;;;;;sBAUL;;sBAEA;sBACA;;;;;;;;YAIF;YACD;;;YAEA;uBACY;;2BAECC,sBAAc;;oBAElB;;YAER,uBAAqB;YACrB;;YAEA;kBACI,iBAAYC;mBACX,EAAE;qBACA;;oCAEY;;;;;;;;;;;;;oCAwBGC;;;oBAElB;;;;;;;;;;eAKK;;;;;;;;;;;;;;;;;mCArB4B;;;;;;;;;;;aA+B1B;;;;;cAKZ;;;;;;;;;;;;"}

package/lib/components/select/src/token.d.ts

@@ -0,0 +1,48 @@
+import type { InjectionKey, Ref } from 'vue';
+interface SelectGroupContext {
+    disabled: boolean;
+}
+export interface QueryChangeCtx {
+    query: string;
+}
+export interface SelectContext {
+    props: {
+        multiple?: boolean;
+        multipleLimit?: number;
+        valueKey?: string;
+        modelValue?: string | number | unknown | unknown[];
+        popperClass?: string;
+        remote?: boolean;
+    };
+    queryChange: Ref<QueryChangeCtx>;
+    groupQueryChange: Ref<string>;
+    selectWrapper: HTMLElement;
+    cachedOptions: Map<any, any>;
+    hoverIndex: number;
+    optionsCount: number;
+    filteredOptionsCount: number;
+    options: Map<any, any>;
+    optionsArray: any[];
+    selected: any | any[];
+    setSelected(): void;
+    onOptionCreate(vm: SelectOptionProxy): void;
+    onOptionDestroy(key: number | string | Record<string, any>): void;
+    handleOptionSelect(vm: unknown, byClick: boolean): void;
+}
+export declare const selectGroupKey: InjectionKey<SelectGroupContext>;
+export declare const selectKey: InjectionKey<SelectContext>;
+export interface SelectOptionProxy {
+    value: string | number | Record<string, string>;
+    label: string | number;
+    created: boolean;
+    disabled: boolean;
+    currentLabel: string;
+    itemSelected: boolean;
+    isDisabled: boolean;
+    select: SelectContext;
+    hoverItem: () => void;
+    visible: boolean;
+    hover: boolean;
+    selectOptionClick: () => void;
+}
+export {};

package/lib/components/select/src/token.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const selectGroupKey = "ElSelectGroup";
+const selectKey = "ElSelect";
+
+exports.selectGroupKey = selectGroupKey;
+exports.selectKey = selectKey;
+//# sourceMappingURL=token.js.map

package/lib/components/select/src/token.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"token.js","sources":["../../../../../../packages/components/select/src/token.ts"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue'\n\ninterface SelectGroupContext {\n  disabled: boolean\n}\n\nexport interface QueryChangeCtx {\n  query: string\n}\n\nexport interface SelectContext {\n  props: {\n    multiple?: boolean\n    multipleLimit?: number\n    valueKey?: string\n    modelValue?: string | number | unknown | unknown[]\n    popperClass?: string\n    remote?: boolean\n  }\n  queryChange: Ref<QueryChangeCtx>\n  groupQueryChange: Ref<string>\n  selectWrapper: HTMLElement\n  cachedOptions: Map<any, any>\n  hoverIndex: number\n  optionsCount: number\n  filteredOptionsCount: number\n  options: Map<any, any>\n  optionsArray: any[]\n  selected: any | any[]\n  setSelected(): void\n  onOptionCreate(vm: SelectOptionProxy): void\n  onOptionDestroy(key: number | string | Record<string, any>): void\n  handleOptionSelect(vm: unknown, byClick: boolean): void\n}\n\n// For individual build sharing injection key, we had to make `Symbol` to string\nexport const selectGroupKey =\n  'ElSelectGroup' as unknown as InjectionKey<SelectGroupContext>\n\nexport const selectKey = 'ElSelect' as unknown as InjectionKey<SelectContext>\n\nexport interface SelectOptionProxy {\n  value: string | number | Record<string, string>\n  label: string | number\n  created: boolean\n  disabled: boolean\n  currentLabel: string\n  itemSelected: boolean\n  isDisabled: boolean\n  select: SelectContext\n  hoverItem: () => void\n  visible: boolean\n  hover: boolean\n  selectOptionClick: () => void\n}\n"],"names":[],"mappings":";;;;AAAY,MAAC,cAAc,GAAG,gBAAgB;AAClC,MAAC,SAAS,GAAG;;;;;"}

package/lib/components/select/src/useOption.d.ts

@@ -0,0 +1,8 @@
+export declare function useOption(props: any, states: any): {
+    select: import("./token").SelectContext | undefined;
+    currentLabel: import("vue").ComputedRef<any>;
+    currentValue: import("vue").ComputedRef<any>;
+    itemSelected: import("vue").ComputedRef<boolean>;
+    isDisabled: import("vue").ComputedRef<any>;
+    hoverItem: () => void;
+};

package/lib/components/select/src/useOption.js

@@ -0,0 +1,99 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var util = require('../../../utils/util.js');
+var token = require('./token.js');
+
+function useOption(props, states) {
+  const select = vue.inject(token.selectKey);
+  const selectGroup = vue.inject(token.selectGroupKey, { disabled: false });
+  const isObject = vue.computed(() => {
+    return Object.prototype.toString.call(props.value).toLowerCase() === "[object object]";
+  });
+  const itemSelected = vue.computed(() => {
+    if (!select.props.multiple) {
+      return isEqual(props.value, select.props.modelValue);
+    } else {
+      return contains(select.props.modelValue, props.value);
+    }
+  });
+  const limitReached = vue.computed(() => {
+    if (select.props.multiple) {
+      const modelValue = select.props.modelValue || [];
+      return !itemSelected.value && modelValue.length >= select.props.multipleLimit && select.props.multipleLimit > 0;
+    } else {
+      return false;
+    }
+  });
+  const currentLabel = vue.computed(() => {
+    return props.label || (isObject.value ? "" : props.value);
+  });
+  const currentValue = vue.computed(() => {
+    return props.value || props.label || "";
+  });
+  const isDisabled = vue.computed(() => {
+    return props.disabled || states.groupDisabled || limitReached.value;
+  });
+  const instance = vue.getCurrentInstance();
+  const contains = (arr = [], target) => {
+    if (!isObject.value) {
+      return arr && arr.indexOf(target) > -1;
+    } else {
+      const valueKey = select.props.valueKey;
+      return arr && arr.some((item) => {
+        return util.getValueByPath(item, valueKey) === util.getValueByPath(target, valueKey);
+      });
+    }
+  };
+  const isEqual = (a, b) => {
+    if (!isObject.value) {
+      return a === b;
+    } else {
+      const { valueKey } = select.props;
+      return util.getValueByPath(a, valueKey) === util.getValueByPath(b, valueKey);
+    }
+  };
+  const hoverItem = () => {
+    if (!props.disabled && !selectGroup.disabled) {
+      select.hoverIndex = select.optionsArray.indexOf(instance);
+    }
+  };
+  vue.watch(() => currentLabel.value, () => {
+    if (!props.created && !select.props.remote)
+      select.setSelected();
+  });
+  vue.watch(() => props.value, (val, oldVal) => {
+    const { remote, valueKey } = select.props;
+    if (!props.created && !remote) {
+      if (valueKey && typeof val === "object" && typeof oldVal === "object" && val[valueKey] === oldVal[valueKey]) {
+        return;
+      }
+      select.setSelected();
+    }
+  });
+  vue.watch(() => selectGroup.disabled, () => {
+    states.groupDisabled = selectGroup.disabled;
+  }, { immediate: true });
+  const { queryChange } = vue.toRaw(select);
+  vue.watch(queryChange, (changes) => {
+    const { query } = vue.unref(changes);
+    const regexp = new RegExp(util.escapeRegexpString(query), "i");
+    states.visible = regexp.test(currentLabel.value) || props.created;
+    if (!states.visible) {
+      select.filteredOptionsCount--;
+    }
+  });
+  return {
+    select,
+    currentLabel,
+    currentValue,
+    itemSelected,
+    isDisabled,
+    hoverItem
+  };
+}
+
+exports.useOption = useOption;
+//# sourceMappingURL=useOption.js.map

package/lib/components/select/src/useOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOption.js","sources":["../../../../../../packages/components/select/src/useOption.ts"],"sourcesContent":["import { inject, computed, getCurrentInstance, watch, toRaw, unref } from 'vue'\nimport { getValueByPath, escapeRegexpString } from '@element-plus/utils/util'\nimport { selectKey, selectGroupKey } from './token'\n\nimport type { Ref } from 'vue'\nimport type { QueryChangeCtx } from './token'\n\nexport function useOption(props, states) {\n  // inject\n  const select = inject(selectKey)\n  const selectGroup = inject(selectGroupKey, { disabled: false })\n\n  // computed\n  const isObject = computed(() => {\n    return (\n      Object.prototype.toString.call(props.value).toLowerCase() ===\n      '[object object]'\n    )\n  })\n\n  const itemSelected = computed(() => {\n    if (!select.props.multiple) {\n      return isEqual(props.value, select.props.modelValue)\n    } else {\n      return contains(select.props.modelValue as unknown[], props.value)\n    }\n  })\n\n  const limitReached = computed(() => {\n    if (select.props.multiple) {\n      const modelValue = (select.props.modelValue || []) as unknown[]\n      return (\n        !itemSelected.value &&\n        modelValue.length >= select.props.multipleLimit &&\n        select.props.multipleLimit > 0\n      )\n    } else {\n      return false\n    }\n  })\n\n  const currentLabel = computed(() => {\n    return props.label || (isObject.value ? '' : props.value)\n  })\n\n  const currentValue = computed(() => {\n    return props.value || props.label || ''\n  })\n\n  const isDisabled = computed(() => {\n    return props.disabled || states.groupDisabled || limitReached.value\n  })\n\n  const instance = getCurrentInstance()\n\n  const contains = (arr = [], target) => {\n    if (!isObject.value) {\n      return arr && arr.indexOf(target) > -1\n    } else {\n      const valueKey = select.props.valueKey\n      return (\n        arr &&\n        arr.some((item) => {\n          return (\n            getValueByPath(item, valueKey) === getValueByPath(target, valueKey)\n          )\n        })\n      )\n    }\n  }\n\n  const isEqual = (a: unknown, b: unknown) => {\n    if (!isObject.value) {\n      return a === b\n    } else {\n      const { valueKey } = select.props\n      return getValueByPath(a, valueKey) === getValueByPath(b, valueKey)\n    }\n  }\n\n  const hoverItem = () => {\n    if (!props.disabled && !selectGroup.disabled) {\n      select.hoverIndex = select.optionsArray.indexOf(instance)\n    }\n  }\n\n  watch(\n    () => currentLabel.value,\n    () => {\n      if (!props.created && !select.props.remote) select.setSelected()\n    }\n  )\n\n  watch(\n    () => props.value,\n    (val, oldVal) => {\n      const { remote, valueKey } = select.props\n      if (!props.created && !remote) {\n        if (\n          valueKey &&\n          typeof val === 'object' &&\n          typeof oldVal === 'object' &&\n          val[valueKey] === oldVal[valueKey]\n        ) {\n          return\n        }\n        select.setSelected()\n      }\n    }\n  )\n\n  watch(\n    () => selectGroup.disabled,\n    () => {\n      states.groupDisabled = selectGroup.disabled\n    },\n    { immediate: true }\n  )\n\n  const { queryChange } = toRaw(select)\n  watch(queryChange, (changes: Ref<QueryChangeCtx>) => {\n    const { query } = unref(changes)\n\n    const regexp = new RegExp(escapeRegexpString(query), 'i')\n    states.visible = regexp.test(currentLabel.value) || props.created\n    if (!states.visible) {\n      select.filteredOptionsCount--\n    }\n  })\n\n  return {\n    select,\n    currentLabel,\n    currentValue,\n    itemSelected,\n    isDisabled,\n    hoverItem,\n  }\n}\n"],"names":["inject","selectKey","selectGroupKey","computed","getCurrentInstance","getValueByPath","watch","toRaw","unref","escapeRegexpString"],"mappings":"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"}

package/lib/components/select/src/useSelect.d.ts

@@ -0,0 +1,76 @@
+import type { QueryChangeCtx, SelectOptionProxy } from './token';
+export declare function useSelectStates(props: any): {
+    options: Map<any, any>;
+    cachedOptions: Map<any, any>;
+    createdLabel: null;
+    createdSelected: boolean;
+    selected: any;
+    inputLength: number;
+    inputWidth: number;
+    initialInputHeight: number;
+    optionsCount: number;
+    filteredOptionsCount: number;
+    visible: boolean;
+    softFocus: boolean;
+    selectedLabel: string;
+    hoverIndex: number;
+    query: string;
+    previousQuery: null;
+    inputHovering: boolean;
+    cachedPlaceHolder: string;
+    currentPlaceholder: string;
+    menuVisibleOnFocus: boolean;
+    isOnComposition: boolean;
+    isSilentBlur: boolean;
+    prefixWidth: null;
+    tagInMultiLine: boolean;
+};
+declare type States = ReturnType<typeof useSelectStates>;
+export declare const useSelect: (props: any, states: States, ctx: any) => {
+    optionsArray: import("vue").ComputedRef<any[]>;
+    selectSize: import("vue").ComputedRef<"medium" | "mini" | import("../../../utils/types").ComponentSize>;
+    handleResize: () => void;
+    debouncedOnInputChange: import("lodash").DebouncedFunc<() => void>;
+    debouncedQueryChange: import("lodash").DebouncedFunc<(e: any) => void>;
+    deletePrevTag: (e: any) => void;
+    deleteTag: (event: any, tag: any) => void;
+    deleteSelected: (event: any) => void;
+    handleOptionSelect: (option: any, byClick: any) => void;
+    scrollToOption: (option: any) => void;
+    readonly: import("vue").ComputedRef<any>;
+    resetInputHeight: () => void;
+    showClose: import("vue").ComputedRef<any>;
+    iconComponent: import("vue").ComputedRef<any>;
+    iconReverse: import("vue").ComputedRef<"" | "is-reverse">;
+    showNewOption: import("vue").ComputedRef<any>;
+    collapseTagSize: import("vue").ComputedRef<"default" | "small">;
+    setSelected: () => void;
+    managePlaceholder: () => void;
+    selectDisabled: import("vue").ComputedRef<any>;
+    emptyText: import("vue").ComputedRef<any>;
+    toggleLastOptionHitState: (hit?: boolean | undefined) => any;
+    resetInputState: (e: KeyboardEvent) => void;
+    handleComposition: (event: any) => void;
+    onOptionCreate: (vm: SelectOptionProxy) => void;
+    onOptionDestroy: (key: any) => void;
+    handleMenuEnter: () => void;
+    handleFocus: (event: any) => void;
+    blur: () => void;
+    handleBlur: (event: Event) => void;
+    handleClearClick: (event: Event) => void;
+    handleClose: () => void;
+    toggleMenu: () => void;
+    selectOption: () => void;
+    getValueKey: (item: any) => any;
+    navigateOptions: (direction: any) => void;
+    dropMenuVisible: import("vue").ComputedRef<boolean>;
+    queryChange: import("vue").ShallowRef<QueryChangeCtx>;
+    groupQueryChange: import("vue").ShallowRef<string>;
+    reference: import("vue").Ref<null>;
+    input: import("vue").Ref<null>;
+    popper: import("vue").Ref<null>;
+    tags: import("vue").Ref<null>;
+    selectWrapper: import("vue").Ref<HTMLElement | null>;
+    scrollbar: import("vue").Ref<null>;
+};
+export {};