@element-plus/nightly 0.0.20211230

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

@@ -0,0 +1,318 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+require('../../../directives/index.js');
+require('../../../hooks/index.js');
+var index = require('../../input/index.js');
+var index$3 = require('../../popper/index.js');
+var index$2 = require('../../scrollbar/index.js');
+var index$1 = require('../../tag/index.js');
+var index$4 = require('../../icon/index.js');
+var constants = require('../../../utils/constants.js');
+var resizeEvent = require('../../../utils/resize-event.js');
+var validators = require('../../../utils/validators.js');
+var iconsVue = require('@element-plus/icons-vue');
+require('./option.js');
+require('./select-dropdown.js');
+var useSelect = require('./useSelect.js');
+var token = require('./token.js');
+var selectDropdown_vue_vue_type_script_lang = require('./select-dropdown.vue_vue_type_script_lang.js');
+var option_vue_vue_type_script_lang = require('./option.vue_vue_type_script_lang.js');
+var index$5 = require('../../../directives/click-outside/index.js');
+var index$6 = require('../../../hooks/use-locale/index.js');
+var index$7 = require('../../../hooks/use-focus/index.js');
+var defaults = require('../../popper/src/use-popper/defaults.js');
+
+var script = vue.defineComponent({
+  name: "ElSelect",
+  componentName: "ElSelect",
+  components: {
+    ElInput: index.ElInput,
+    ElSelectMenu: selectDropdown_vue_vue_type_script_lang["default"],
+    ElOption: option_vue_vue_type_script_lang["default"],
+    ElTag: index$1.ElTag,
+    ElScrollbar: index$2.ElScrollbar,
+    ElPopper: index$3["default"],
+    ElIcon: index$4.ElIcon
+  },
+  directives: { ClickOutside: index$5["default"] },
+  props: {
+    name: String,
+    id: String,
+    modelValue: {
+      type: [Array, String, Number, Boolean, Object],
+      default: void 0
+    },
+    autocomplete: {
+      type: String,
+      default: "off"
+    },
+    automaticDropdown: Boolean,
+    size: {
+      type: String,
+      validator: validators.isValidComponentSize
+    },
+    disabled: Boolean,
+    clearable: Boolean,
+    filterable: Boolean,
+    allowCreate: Boolean,
+    loading: Boolean,
+    popperClass: {
+      type: String,
+      default: ""
+    },
+    remote: Boolean,
+    loadingText: String,
+    noMatchText: String,
+    noDataText: String,
+    remoteMethod: Function,
+    filterMethod: Function,
+    multiple: Boolean,
+    multipleLimit: {
+      type: Number,
+      default: 0
+    },
+    placeholder: {
+      type: String
+    },
+    defaultFirstOption: Boolean,
+    reserveKeyword: Boolean,
+    valueKey: {
+      type: String,
+      default: "value"
+    },
+    collapseTags: Boolean,
+    popperAppendToBody: {
+      type: Boolean,
+      default: true
+    },
+    clearIcon: {
+      type: [String, Object],
+      default: iconsVue.CircleClose
+    },
+    fitInputWidth: {
+      type: Boolean,
+      default: false
+    },
+    suffixIcon: {
+      type: [String, Object],
+      default: iconsVue.ArrowUp
+    },
+    tagType: {
+      type: String,
+      default: "info"
+    }
+  },
+  emits: [
+    constants.UPDATE_MODEL_EVENT,
+    constants.CHANGE_EVENT,
+    "remove-tag",
+    "clear",
+    "visible-change",
+    "focus",
+    "blur"
+  ],
+  setup(props, ctx) {
+    const { t } = index$6.useLocale();
+    const states = useSelect.useSelectStates(props);
+    const {
+      optionsArray,
+      selectSize,
+      readonly,
+      handleResize,
+      collapseTagSize,
+      debouncedOnInputChange,
+      debouncedQueryChange,
+      deletePrevTag,
+      deleteTag,
+      deleteSelected,
+      handleOptionSelect,
+      scrollToOption,
+      setSelected,
+      resetInputHeight,
+      managePlaceholder,
+      showClose,
+      selectDisabled,
+      iconComponent,
+      iconReverse,
+      showNewOption,
+      emptyText,
+      toggleLastOptionHitState,
+      resetInputState,
+      handleComposition,
+      onOptionCreate,
+      onOptionDestroy,
+      handleMenuEnter,
+      handleFocus,
+      blur,
+      handleBlur,
+      handleClearClick,
+      handleClose,
+      toggleMenu,
+      selectOption,
+      getValueKey,
+      navigateOptions,
+      dropMenuVisible,
+      reference,
+      input,
+      popper,
+      tags,
+      selectWrapper,
+      scrollbar,
+      queryChange,
+      groupQueryChange
+    } = useSelect.useSelect(props, states, ctx);
+    const { focus } = index$7.useFocus(reference);
+    const {
+      inputWidth,
+      selected,
+      inputLength,
+      filteredOptionsCount,
+      visible,
+      softFocus,
+      selectedLabel,
+      hoverIndex,
+      query,
+      inputHovering,
+      currentPlaceholder,
+      menuVisibleOnFocus,
+      isOnComposition,
+      isSilentBlur,
+      options,
+      cachedOptions,
+      optionsCount,
+      prefixWidth,
+      tagInMultiLine
+    } = vue.toRefs(states);
+    vue.provide(token.selectKey, vue.reactive({
+      props,
+      options,
+      optionsArray,
+      cachedOptions,
+      optionsCount,
+      filteredOptionsCount,
+      hoverIndex,
+      handleOptionSelect,
+      onOptionCreate,
+      onOptionDestroy,
+      selectWrapper,
+      selected,
+      setSelected,
+      queryChange,
+      groupQueryChange
+    }));
+    vue.onMounted(() => {
+      states.cachedPlaceHolder = currentPlaceholder.value = props.placeholder || t("el.select.placeholder");
+      if (props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 0) {
+        currentPlaceholder.value = "";
+      }
+      resizeEvent.addResizeListener(selectWrapper.value, handleResize);
+      if (reference.value && reference.value.$el) {
+        const sizeMap = {
+          large: 36,
+          default: 32,
+          small: 28
+        };
+        const input2 = reference.value.input;
+        states.initialInputHeight = input2.getBoundingClientRect().height || sizeMap[selectSize.value];
+      }
+      if (props.remote && props.multiple) {
+        resetInputHeight();
+      }
+      vue.nextTick(() => {
+        if (reference.value.$el) {
+          inputWidth.value = reference.value.$el.getBoundingClientRect().width;
+        }
+        if (ctx.slots.prefix) {
+          const inputChildNodes = reference.value.$el.childNodes;
+          const input2 = [].filter.call(inputChildNodes, (item) => item.tagName === "INPUT")[0];
+          const prefix = reference.value.$el.querySelector(".el-input__prefix");
+          prefixWidth.value = Math.max(prefix.getBoundingClientRect().width + 5, 30);
+          if (states.prefixWidth) {
+            input2.style.paddingLeft = `${Math.max(states.prefixWidth, 30)}px`;
+          }
+        }
+      });
+      setSelected();
+    });
+    vue.onBeforeUnmount(() => {
+      resizeEvent.removeResizeListener(selectWrapper.value, handleResize);
+    });
+    if (props.multiple && !Array.isArray(props.modelValue)) {
+      ctx.emit(constants.UPDATE_MODEL_EVENT, []);
+    }
+    if (!props.multiple && Array.isArray(props.modelValue)) {
+      ctx.emit(constants.UPDATE_MODEL_EVENT, "");
+    }
+    const popperPaneRef = vue.computed(() => {
+      var _a;
+      return (_a = popper.value) == null ? void 0 : _a.popperRef;
+    });
+    return {
+      Effect: defaults.Effect,
+      tagInMultiLine,
+      prefixWidth,
+      selectSize,
+      readonly,
+      handleResize,
+      collapseTagSize,
+      debouncedOnInputChange,
+      debouncedQueryChange,
+      deletePrevTag,
+      deleteTag,
+      deleteSelected,
+      handleOptionSelect,
+      scrollToOption,
+      inputWidth,
+      selected,
+      inputLength,
+      filteredOptionsCount,
+      visible,
+      softFocus,
+      selectedLabel,
+      hoverIndex,
+      query,
+      inputHovering,
+      currentPlaceholder,
+      menuVisibleOnFocus,
+      isOnComposition,
+      isSilentBlur,
+      options,
+      resetInputHeight,
+      managePlaceholder,
+      showClose,
+      selectDisabled,
+      iconComponent,
+      iconReverse,
+      showNewOption,
+      emptyText,
+      toggleLastOptionHitState,
+      resetInputState,
+      handleComposition,
+      handleMenuEnter,
+      handleFocus,
+      blur,
+      handleBlur,
+      handleClearClick,
+      handleClose,
+      toggleMenu,
+      selectOption,
+      getValueKey,
+      navigateOptions,
+      dropMenuVisible,
+      focus,
+      reference,
+      input,
+      popper,
+      popperPaneRef,
+      tags,
+      selectWrapper,
+      scrollbar
+    };
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=select.vue_vue_type_script_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/select/src/select.vue"],"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":["defineComponent","ElInput","ElOption","ElTag","ElScrollbar","ElPopper","ElIcon","isValidComponentSize","CircleClose","ArrowUp","UPDATE_MODEL_EVENT","useSelectStates","useSelect","toRefs","selectKey","reactive","nextTick","removeResizeListener","computed"],"mappings":"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"}

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

@@ -0,0 +1,261 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = { class: "select-trigger" };
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = { class: "el-select__tags-text" };
+const _hoisted_4 = ["disabled", "autocomplete"];
+const _hoisted_5 = { style: { "height": "100%", "display": "flex", "justify-content": "center", "align-items": "center" } };
+const _hoisted_6 = {
+  key: 1,
+  class: "el-select-dropdown__empty"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_tag = vue.resolveComponent("el-tag");
+  const _component_el_icon = vue.resolveComponent("el-icon");
+  const _component_el_input = vue.resolveComponent("el-input");
+  const _component_el_option = vue.resolveComponent("el-option");
+  const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
+  const _component_el_select_menu = vue.resolveComponent("el-select-menu");
+  const _component_el_popper = vue.resolveComponent("el-popper");
+  const _directive_click_outside = vue.resolveDirective("click-outside");
+  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+    ref: "selectWrapper",
+    class: vue.normalizeClass(["el-select", [_ctx.selectSize ? "el-select--" + _ctx.selectSize : ""]]),
+    onClick: _cache[24] || (_cache[24] = vue.withModifiers((...args) => _ctx.toggleMenu && _ctx.toggleMenu(...args), ["stop"]))
+  }, [
+    vue.createVNode(_component_el_popper, {
+      ref: "popper",
+      visible: _ctx.dropMenuVisible,
+      "onUpdate:visible": _cache[23] || (_cache[23] = ($event) => _ctx.dropMenuVisible = $event),
+      placement: "bottom-start",
+      "append-to-body": _ctx.popperAppendToBody,
+      "popper-class": `el-select__popper ${_ctx.popperClass}`,
+      "fallback-placements": ["bottom-start", "top-start", "right", "left"],
+      "manual-mode": "",
+      effect: _ctx.Effect.LIGHT,
+      pure: "",
+      trigger: "click",
+      transition: "el-zoom-in-top",
+      "stop-popper-mouse-event": false,
+      "gpu-acceleration": false,
+      onBeforeEnter: _ctx.handleMenuEnter
+    }, {
+      trigger: vue.withCtx(() => [
+        vue.createElementVNode("div", _hoisted_1, [
+          _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            ref: "tags",
+            class: "el-select__tags",
+            style: vue.normalizeStyle({ maxWidth: _ctx.inputWidth - 32 + "px", width: "100%" })
+          }, [
+            _ctx.collapseTags && _ctx.selected.length ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
+              vue.createVNode(_component_el_tag, {
+                closable: !_ctx.selectDisabled && !_ctx.selected[0].isDisabled,
+                size: _ctx.collapseTagSize,
+                hit: _ctx.selected[0].hitState,
+                type: _ctx.tagType,
+                "disable-transitions": "",
+                onClose: _cache[0] || (_cache[0] = ($event) => _ctx.deleteTag($event, _ctx.selected[0]))
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("span", {
+                    class: "el-select__tags-text",
+                    style: vue.normalizeStyle({ maxWidth: _ctx.inputWidth - 123 + "px" })
+                  }, vue.toDisplayString(_ctx.selected[0].currentLabel), 5)
+                ]),
+                _: 1
+              }, 8, ["closable", "size", "hit", "type"]),
+              _ctx.selected.length > 1 ? (vue.openBlock(), vue.createBlock(_component_el_tag, {
+                key: 0,
+                closable: false,
+                size: _ctx.collapseTagSize,
+                type: _ctx.tagType,
+                "disable-transitions": ""
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("span", _hoisted_3, "+ " + vue.toDisplayString(_ctx.selected.length - 1), 1)
+                ]),
+                _: 1
+              }, 8, ["size", "type"])) : vue.createCommentVNode("v-if", true)
+            ])) : vue.createCommentVNode("v-if", true),
+            vue.createCommentVNode(" <div> "),
+            !_ctx.collapseTags ? (vue.openBlock(), vue.createBlock(vue.Transition, {
+              key: 1,
+              onAfterLeave: _ctx.resetInputHeight
+            }, {
+              default: vue.withCtx(() => [
+                vue.createElementVNode("span", {
+                  style: vue.normalizeStyle({
+                    marginLeft: _ctx.prefixWidth && _ctx.selected.length ? `${_ctx.prefixWidth}px` : null
+                  })
+                }, [
+                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.selected, (item) => {
+                    return vue.openBlock(), vue.createBlock(_component_el_tag, {
+                      key: _ctx.getValueKey(item),
+                      closable: !_ctx.selectDisabled && !item.isDisabled,
+                      size: _ctx.collapseTagSize,
+                      hit: item.hitState,
+                      type: _ctx.tagType,
+                      "disable-transitions": "",
+                      onClose: ($event) => _ctx.deleteTag($event, item)
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createElementVNode("span", {
+                          class: "el-select__tags-text",
+                          style: vue.normalizeStyle({ maxWidth: _ctx.inputWidth - 75 + "px" })
+                        }, vue.toDisplayString(item.currentLabel), 5)
+                      ]),
+                      _: 2
+                    }, 1032, ["closable", "size", "hit", "type", "onClose"]);
+                  }), 128))
+                ], 4)
+              ]),
+              _: 1
+            }, 8, ["onAfterLeave"])) : vue.createCommentVNode("v-if", true),
+            vue.createCommentVNode(" </div> "),
+            _ctx.filterable ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+              key: 2,
+              ref: "input",
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.query = $event),
+              type: "text",
+              class: vue.normalizeClass(["el-select__input", [_ctx.selectSize ? `is-${_ctx.selectSize}` : ""]]),
+              disabled: _ctx.selectDisabled,
+              autocomplete: _ctx.autocomplete,
+              style: vue.normalizeStyle({
+                marginLeft: _ctx.prefixWidth && !_ctx.selected.length || _ctx.tagInMultiLine ? `${_ctx.prefixWidth}px` : null,
+                flexGrow: "1",
+                width: `${_ctx.inputLength / (_ctx.inputWidth - 32)}%`,
+                maxWidth: `${_ctx.inputWidth - 42}px`
+              }),
+              onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+              onBlur: _cache[3] || (_cache[3] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
+              onKeyup: _cache[4] || (_cache[4] = (...args) => _ctx.managePlaceholder && _ctx.managePlaceholder(...args)),
+              onKeydown: [
+                _cache[5] || (_cache[5] = (...args) => _ctx.resetInputState && _ctx.resetInputState(...args)),
+                _cache[6] || (_cache[6] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["prevent"]), ["down"])),
+                _cache[7] || (_cache[7] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["prevent"]), ["up"])),
+                _cache[8] || (_cache[8] = vue.withKeys(vue.withModifiers(($event) => _ctx.visible = false, ["stop", "prevent"]), ["esc"])),
+                _cache[9] || (_cache[9] = vue.withKeys(vue.withModifiers((...args) => _ctx.selectOption && _ctx.selectOption(...args), ["stop", "prevent"]), ["enter"])),
+                _cache[10] || (_cache[10] = vue.withKeys((...args) => _ctx.deletePrevTag && _ctx.deletePrevTag(...args), ["delete"])),
+                _cache[11] || (_cache[11] = vue.withKeys(($event) => _ctx.visible = false, ["tab"]))
+              ],
+              onCompositionstart: _cache[12] || (_cache[12] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
+              onCompositionupdate: _cache[13] || (_cache[13] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
+              onCompositionend: _cache[14] || (_cache[14] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
+              onInput: _cache[15] || (_cache[15] = (...args) => _ctx.debouncedQueryChange && _ctx.debouncedQueryChange(...args))
+            }, null, 46, _hoisted_4)), [
+              [vue.vModelText, _ctx.query]
+            ]) : vue.createCommentVNode("v-if", true)
+          ], 4)) : vue.createCommentVNode("v-if", true),
+          vue.createVNode(_component_el_input, {
+            id: _ctx.id,
+            ref: "reference",
+            modelValue: _ctx.selectedLabel,
+            "onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => _ctx.selectedLabel = $event),
+            type: "text",
+            placeholder: _ctx.currentPlaceholder,
+            name: _ctx.name,
+            autocomplete: _ctx.autocomplete,
+            size: _ctx.selectSize,
+            disabled: _ctx.selectDisabled,
+            readonly: _ctx.readonly,
+            "validate-event": false,
+            class: vue.normalizeClass({ "is-focus": _ctx.visible }),
+            tabindex: _ctx.multiple && _ctx.filterable ? "-1" : null,
+            onFocus: _ctx.handleFocus,
+            onBlur: _ctx.handleBlur,
+            onInput: _ctx.debouncedOnInputChange,
+            onPaste: _ctx.debouncedOnInputChange,
+            onCompositionstart: _ctx.handleComposition,
+            onCompositionupdate: _ctx.handleComposition,
+            onCompositionend: _ctx.handleComposition,
+            onKeydown: [
+              _cache[17] || (_cache[17] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["stop", "prevent"]), ["down"])),
+              _cache[18] || (_cache[18] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["stop", "prevent"]), ["up"])),
+              vue.withKeys(vue.withModifiers(_ctx.selectOption, ["stop", "prevent"]), ["enter"]),
+              _cache[19] || (_cache[19] = vue.withKeys(vue.withModifiers(($event) => _ctx.visible = false, ["stop", "prevent"]), ["esc"])),
+              _cache[20] || (_cache[20] = vue.withKeys(($event) => _ctx.visible = false, ["tab"]))
+            ],
+            onMouseenter: _cache[21] || (_cache[21] = ($event) => _ctx.inputHovering = true),
+            onMouseleave: _cache[22] || (_cache[22] = ($event) => _ctx.inputHovering = false)
+          }, vue.createSlots({
+            suffix: vue.withCtx(() => [
+              _ctx.iconComponent ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_icon, {
+                key: 0,
+                class: vue.normalizeClass(["el-select__caret", "el-input__icon", _ctx.iconReverse])
+              }, {
+                default: vue.withCtx(() => [
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
+                ]),
+                _: 1
+              }, 8, ["class"])), [
+                [vue.vShow, !_ctx.showClose]
+              ]) : vue.createCommentVNode("v-if", true),
+              _ctx.showClose && _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+                key: 1,
+                class: "el-select__caret el-input__icon",
+                onClick: _ctx.handleClearClick
+              }, {
+                default: vue.withCtx(() => [
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon)))
+                ]),
+                _: 1
+              }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
+            ]),
+            _: 2
+          }, [
+            _ctx.$slots.prefix ? {
+              name: "prefix",
+              fn: vue.withCtx(() => [
+                vue.createElementVNode("div", _hoisted_5, [
+                  vue.renderSlot(_ctx.$slots, "prefix")
+                ])
+              ])
+            } : void 0
+          ]), 1032, ["id", "modelValue", "placeholder", "name", "autocomplete", "size", "disabled", "readonly", "class", "tabindex", "onFocus", "onBlur", "onInput", "onPaste", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onKeydown"])
+        ])
+      ]),
+      default: vue.withCtx(() => [
+        vue.createVNode(_component_el_select_menu, null, {
+          default: vue.withCtx(() => [
+            vue.withDirectives(vue.createVNode(_component_el_scrollbar, {
+              ref: "scrollbar",
+              tag: "ul",
+              "wrap-class": "el-select-dropdown__wrap",
+              "view-class": "el-select-dropdown__list",
+              class: vue.normalizeClass({
+                "is-empty": !_ctx.allowCreate && _ctx.query && _ctx.filteredOptionsCount === 0
+              })
+            }, {
+              default: vue.withCtx(() => [
+                _ctx.showNewOption ? (vue.openBlock(), vue.createBlock(_component_el_option, {
+                  key: 0,
+                  value: _ctx.query,
+                  created: true
+                }, null, 8, ["value"])) : vue.createCommentVNode("v-if", true),
+                vue.renderSlot(_ctx.$slots, "default")
+              ]),
+              _: 3
+            }, 8, ["class"]), [
+              [vue.vShow, _ctx.options.size > 0 && !_ctx.loading]
+            ]),
+            _ctx.emptyText && (!_ctx.allowCreate || _ctx.loading || _ctx.allowCreate && _ctx.options.size === 0) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              _ctx.$slots.empty ? vue.renderSlot(_ctx.$slots, "empty", { key: 0 }) : (vue.openBlock(), vue.createElementBlock("p", _hoisted_6, vue.toDisplayString(_ctx.emptyText), 1))
+            ], 2112)) : vue.createCommentVNode("v-if", true)
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["visible", "append-to-body", "popper-class", "effect", "onBeforeEnter"])
+  ], 2)), [
+    [_directive_click_outside, _ctx.handleClose, _ctx.popperPaneRef]
+  ]);
+}
+
+exports.render = render;
+//# sourceMappingURL=select.vue_vue_type_template_id_33774f85_lang.js.map