@element-plus/nightly 0.0.20220101 → 0.0.20220105

package/lib/components/autocomplete/src/index.vue_vue_type_template_id_2f09f285_lang.js

@@ -12,9 +12,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_loading = vue.resolveComponent("loading");
   const _component_el_icon = vue.resolveComponent("el-icon");
   const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
-  const _component_el_popper = vue.resolveComponent("el-popper");
+  const _component_el_tooltip = vue.resolveComponent("el-tooltip");
   const _directive_clickoutside = vue.resolveDirective("clickoutside");
-  return vue.openBlock(), vue.createBlock(_component_el_popper, {
+  return vue.openBlock(), vue.createBlock(_component_el_tooltip, {
     ref: "popper",
     visible: _ctx.suggestionVisible,
     "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => _ctx.suggestionVisible = $event),
@@ -22,14 +22,59 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "fallback-placements": ["bottom-start", "top-start"],
     "popper-class": `el-autocomplete__popper ${_ctx.popperClass}`,
     "append-to-body": _ctx.popperAppendToBody,
+    "gpu-acceleration": false,
     pure: "",
     "manual-mode": "",
-    effect: _ctx.Effect.LIGHT,
+    effect: "light",
     trigger: "click",
     transition: "el-zoom-in-top",
-    "gpu-acceleration": false
+    onShow: _ctx.onSuggestionShow
   }, {
-    trigger: vue.withCtx(() => [
+    content: vue.withCtx(() => [
+      vue.createElementVNode("div", {
+        ref: "regionRef",
+        class: vue.normalizeClass([
+          "el-autocomplete-suggestion",
+          _ctx.suggestionLoading && "is-loading"
+        ]),
+        style: vue.normalizeStyle({ minWidth: _ctx.dropdownWidth, outline: "none" }),
+        role: "region"
+      }, [
+        vue.createVNode(_component_el_scrollbar, {
+          id: _ctx.id,
+          tag: "ul",
+          "wrap-class": "el-autocomplete-suggestion__wrap",
+          "view-class": "el-autocomplete-suggestion__list",
+          role: "listbox"
+        }, {
+          default: vue.withCtx(() => [
+            _ctx.suggestionLoading ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2, [
+              vue.createVNode(_component_el_icon, { class: "is-loading" }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_loading)
+                ]),
+                _: 1
+              })
+            ])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.suggestions, (item, index) => {
+              return vue.openBlock(), vue.createElementBlock("li", {
+                id: `${_ctx.id}-item-${index}`,
+                key: index,
+                class: vue.normalizeClass({ highlighted: _ctx.highlightedIndex === index }),
+                role: "option",
+                "aria-selected": _ctx.highlightedIndex === index,
+                onClick: ($event) => _ctx.select(item)
+              }, [
+                vue.renderSlot(_ctx.$slots, "default", { item }, () => [
+                  vue.createTextVNode(vue.toDisplayString(item[_ctx.valueKey]), 1)
+                ])
+              ], 10, _hoisted_3);
+            }), 128))
+          ]),
+          _: 3
+        }, 8, ["id"])
+      ], 6)
+    ]),
+    default: vue.withCtx(() => [
       vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["el-autocomplete", _ctx.$attrs.class]),
         style: vue.normalizeStyle(_ctx.$attrs.style),
@@ -81,50 +126,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         [_directive_clickoutside, _ctx.close]
       ])
     ]),
-    default: vue.withCtx(() => [
-      vue.createElementVNode("div", {
-        ref: "regionRef",
-        class: vue.normalizeClass([
-          "el-autocomplete-suggestion",
-          _ctx.suggestionLoading && "is-loading"
-        ]),
-        style: vue.normalizeStyle({ minWidth: _ctx.dropdownWidth, outline: "none" }),
-        role: "region"
-      }, [
-        vue.createVNode(_component_el_scrollbar, {
-          tag: "ul",
-          "wrap-class": "el-autocomplete-suggestion__wrap",
-          "view-class": "el-autocomplete-suggestion__list"
-        }, {
-          default: vue.withCtx(() => [
-            _ctx.suggestionLoading ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2, [
-              vue.createVNode(_component_el_icon, { class: "is-loading" }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(_component_loading)
-                ]),
-                _: 1
-              })
-            ])) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.suggestions, (item, index) => {
-              return vue.openBlock(), vue.createElementBlock("li", {
-                id: `${_ctx.id}-item-${index}`,
-                key: index,
-                class: vue.normalizeClass({ highlighted: _ctx.highlightedIndex === index }),
-                role: "option",
-                "aria-selected": _ctx.highlightedIndex === index,
-                onClick: ($event) => _ctx.select(item)
-              }, [
-                vue.renderSlot(_ctx.$slots, "default", { item }, () => [
-                  vue.createTextVNode(vue.toDisplayString(item[_ctx.valueKey]), 1)
-                ])
-              ], 10, _hoisted_3);
-            }), 128))
-          ]),
-          _: 3
-        })
-      ], 6)
-    ]),
     _: 3
-  }, 8, ["visible", "placement", "popper-class", "append-to-body", "effect"]);
+  }, 8, ["visible", "placement", "popper-class", "append-to-body", "onShow"]);
 }
 
 exports.render = render;

package/lib/components/autocomplete/src/index.vue_vue_type_template_id_2f09f285_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_template_id_2f09f285_lang.js","sources":["../../../../../../packages/components/autocomplete/src/index.vue?vue&type=template&id=2f09f285&lang.js"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"popper\"\n    v-model:visible=\"suggestionVisible\"\n    :placement=\"placement\"\n    :fallback-placements=\"['bottom-start', 'top-start']\"\n    :popper-class=\"`el-autocomplete__popper ${popperClass}`\"\n    :append-to-body=\"popperAppendToBody\"\n    pure\n    manual-mode\n    :effect=\"Effect.LIGHT\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n  >\n    <template #trigger>\n      <div\n        v-clickoutside=\"close\"\n        :class=\"['el-autocomplete', $attrs.class]\"\n        :style=\"$attrs.style\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        :aria-expanded=\"suggestionVisible\"\n        :aria-owns=\"id\"\n      >\n        <el-input\n          ref=\"inputRef\"\n          v-bind=\"attrs\"\n          :model-value=\"modelValue\"\n          @input=\"handleInput\"\n          @change=\"handleChange\"\n          @focus=\"handleFocus\"\n          @blur=\"handleBlur\"\n          @clear=\"handleClear\"\n          @keydown.up.prevent=\"highlight(highlightedIndex - 1)\"\n          @keydown.down.prevent=\"highlight(highlightedIndex + 1)\"\n          @keydown.enter=\"handleKeyEnter\"\n          @keydown.tab=\"close\"\n        >\n          <template v-if=\"$slots.prepend\" #prepend>\n            <slot name=\"prepend\"></slot>\n          </template>\n          <template v-if=\"$slots.append\" #append>\n            <slot name=\"append\"></slot>\n          </template>\n          <template v-if=\"$slots.prefix\" #prefix>\n            <slot name=\"prefix\"></slot>\n          </template>\n          <template v-if=\"$slots.suffix\" #suffix>\n            <slot name=\"suffix\"></slot>\n          </template>\n        </el-input>\n      </div>\n    </template>\n    <template #default>\n      <div\n        ref=\"regionRef\"\n        :class=\"[\n          'el-autocomplete-suggestion',\n          suggestionLoading && 'is-loading',\n        ]\"\n        :style=\"{ minWidth: dropdownWidth, outline: 'none' }\"\n        role=\"region\"\n      >\n        <el-scrollbar\n          tag=\"ul\"\n          wrap-class=\"el-autocomplete-suggestion__wrap\"\n          view-class=\"el-autocomplete-suggestion__list\"\n        >\n          <li v-if=\"suggestionLoading\">\n            <el-icon class=\"is-loading\"><loading /></el-icon>\n          </li>\n          <template v-else>\n            <li\n              v-for=\"(item, index) in suggestions\"\n              :id=\"`${id}-item-${index}`\"\n              :key=\"index\"\n              :class=\"{ highlighted: highlightedIndex === index }\"\n              role=\"option\"\n              :aria-selected=\"highlightedIndex === index\"\n              @click=\"select(item)\"\n            >\n              <slot :item=\"item\">{{ item[valueKey] }}</slot>\n            </li>\n          </template>\n        </el-scrollbar>\n      </div>\n    </template>\n  </el-popper>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  ref,\n  computed,\n  onMounted,\n  onUpdated,\n  nextTick,\n  watch,\n} from 'vue'\nimport { NOOP } from '@vue/shared'\nimport debounce from 'lodash/debounce'\nimport { useAttrs } from '@element-plus/hooks'\nimport { ClickOutside } from '@element-plus/directives'\nimport { generateId, isArray } from '@element-plus/utils/util'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { throwError } from '@element-plus/utils/error'\nimport ElInput from '@element-plus/components/input'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElIcon from '@element-plus/components/icon'\nimport { Loading } from '@element-plus/icons-vue'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAutocomplete',\n  components: {\n    ElPopper,\n    ElInput,\n    ElScrollbar,\n    ElIcon,\n    Loading,\n  },\n  directives: {\n    clickoutside: ClickOutside,\n  },\n  inheritAttrs: false,\n  props: {\n    valueKey: {\n      type: String,\n      default: 'value',\n    },\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n    debounce: {\n      type: Number,\n      default: 300,\n    },\n    placement: {\n      type: String as PropType<Placement>,\n      validator: (val: string): boolean => {\n        return [\n          'top',\n          'top-start',\n          'top-end',\n          'bottom',\n          'bottom-start',\n          'bottom-end',\n        ].includes(val)\n      },\n      default: 'bottom-start',\n    },\n    fetchSuggestions: {\n      type: Function as PropType<\n        (queryString: string, cb: (data: any[]) => void) => void\n      >,\n      default: NOOP,\n    },\n    popperClass: {\n      type: String,\n      default: '',\n    },\n    triggerOnFocus: {\n      type: Boolean,\n      default: true,\n    },\n    selectWhenUnmatched: {\n      type: Boolean,\n      default: false,\n    },\n    hideLoading: {\n      type: Boolean,\n      default: false,\n    },\n    popperAppendToBody: {\n      type: Boolean,\n      default: true,\n    },\n    highlightFirstItem: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: [\n    UPDATE_MODEL_EVENT,\n    'input',\n    'change',\n    'focus',\n    'blur',\n    'clear',\n    'select',\n  ],\n  setup(props, ctx) {\n    const attrs = useAttrs()\n    const suggestions = ref([])\n    const highlightedIndex = ref(-1)\n    const dropdownWidth = ref('')\n    const activated = ref(false)\n    const suggestionDisabled = ref(false)\n    const loading = ref(false)\n    const inputRef = ref(null)\n    const regionRef = ref(null)\n    const popper = ref(null)\n\n    const id = computed(() => {\n      return `el-autocomplete-${generateId()}`\n    })\n    const suggestionVisible = computed(() => {\n      const isValidData =\n        isArray(suggestions.value) && suggestions.value.length > 0\n      return (isValidData || loading.value) && activated.value\n    })\n    const suggestionLoading = computed(() => {\n      return !props.hideLoading && loading.value\n    })\n\n    const updatePopperPosition = () => {\n      nextTick(popper.value.update)\n    }\n\n    watch(suggestionVisible, () => {\n      dropdownWidth.value = `${inputRef.value.$el.offsetWidth}px`\n    })\n\n    onMounted(() => {\n      inputRef.value.inputOrTextarea.setAttribute('role', 'textbox')\n      inputRef.value.inputOrTextarea.setAttribute('aria-autocomplete', 'list')\n      inputRef.value.inputOrTextarea.setAttribute('aria-controls', 'id')\n      inputRef.value.inputOrTextarea.setAttribute(\n        'aria-activedescendant',\n        `${id.value}-item-${highlightedIndex.value}`\n      )\n      const $ul = regionRef.value.querySelector(\n        '.el-autocomplete-suggestion__list'\n      )\n      $ul.setAttribute('role', 'listbox')\n      $ul.setAttribute('id', id.value)\n    })\n\n    onUpdated(updatePopperPosition)\n\n    const getData = (queryString) => {\n      if (suggestionDisabled.value) {\n        return\n      }\n      loading.value = true\n      updatePopperPosition()\n      props.fetchSuggestions(queryString, (suggestionsArg) => {\n        loading.value = false\n        if (suggestionDisabled.value) {\n          return\n        }\n        if (isArray(suggestionsArg)) {\n          suggestions.value = suggestionsArg\n          highlightedIndex.value = props.highlightFirstItem ? 0 : -1\n        } else {\n          throwError(\n            'ElAutocomplete',\n            'autocomplete suggestions must be an array'\n          )\n        }\n      })\n    }\n    const debouncedGetData = debounce(getData, props.debounce)\n    const handleInput = (value) => {\n      ctx.emit('input', value)\n      ctx.emit(UPDATE_MODEL_EVENT, value)\n      suggestionDisabled.value = false\n      if (!props.triggerOnFocus && !value) {\n        suggestionDisabled.value = true\n        suggestions.value = []\n        return\n      }\n      debouncedGetData(value)\n    }\n    const handleChange = (value) => {\n      ctx.emit('change', value)\n    }\n    const handleFocus = (e) => {\n      activated.value = true\n      ctx.emit('focus', e)\n      if (props.triggerOnFocus) {\n        debouncedGetData(props.modelValue)\n      }\n    }\n    const handleBlur = (e) => {\n      ctx.emit('blur', e)\n    }\n    const handleClear = () => {\n      activated.value = false\n      ctx.emit(UPDATE_MODEL_EVENT, '')\n      ctx.emit('clear')\n    }\n    const handleKeyEnter = () => {\n      if (\n        suggestionVisible.value &&\n        highlightedIndex.value >= 0 &&\n        highlightedIndex.value < suggestions.value.length\n      ) {\n        select(suggestions.value[highlightedIndex.value])\n      } else if (props.selectWhenUnmatched) {\n        ctx.emit('select', { value: props.modelValue })\n        nextTick(() => {\n          suggestions.value = []\n          highlightedIndex.value = -1\n        })\n      }\n    }\n    const close = () => {\n      activated.value = false\n    }\n    const focus = () => {\n      inputRef.value.focus()\n    }\n    const select = (item) => {\n      ctx.emit('input', item[props.valueKey])\n      ctx.emit(UPDATE_MODEL_EVENT, item[props.valueKey])\n      ctx.emit('select', item)\n      nextTick(() => {\n        suggestions.value = []\n        highlightedIndex.value = -1\n      })\n    }\n    const highlight = (index) => {\n      if (!suggestionVisible.value || loading.value) {\n        return\n      }\n      if (index < 0) {\n        highlightedIndex.value = -1\n        return\n      }\n      if (index >= suggestions.value.length) {\n        index = suggestions.value.length - 1\n      }\n      const suggestion = regionRef.value.querySelector(\n        '.el-autocomplete-suggestion__wrap'\n      )\n      const suggestionList = suggestion.querySelectorAll(\n        '.el-autocomplete-suggestion__list li'\n      )\n      const highlightItem = suggestionList[index]\n      const scrollTop = suggestion.scrollTop\n      const { offsetTop, scrollHeight } = highlightItem\n\n      if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) {\n        suggestion.scrollTop += scrollHeight\n      }\n      if (offsetTop < scrollTop) {\n        suggestion.scrollTop -= scrollHeight\n      }\n      highlightedIndex.value = index\n      inputRef.value.inputOrTextarea.setAttribute(\n        'aria-activedescendant',\n        `${id.value}-item-${highlightedIndex.value}`\n      )\n    }\n\n    return {\n      Effect,\n\n      attrs,\n      suggestions,\n      highlightedIndex,\n      dropdownWidth,\n      activated,\n      suggestionDisabled,\n      loading,\n      inputRef,\n      regionRef,\n      popper,\n\n      id,\n      suggestionVisible,\n      suggestionLoading,\n\n      getData,\n      handleInput,\n      handleChange,\n      handleFocus,\n      handleBlur,\n      handleClear,\n      handleKeyEnter,\n      close,\n      focus,\n      select,\n      highlight,\n    }\n  },\n})\n</script>\n"],"names":["_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;wBACE;IACE;IACQ;;IACP;IACA;IACA;IACA;IACD;IACA;IACC,oBAAe,KAAK;;IAErB;;;;;QAMK;QACA;QACD;;QAECA;;;;UAME,aAAW;UACX;UACA;UACA,SAAO;kBACD,eAAU;mBACT,gBAAW;;;;;sBAIL,UAAK;;;iCAEW;;;;kBAC5B;;;;WAEc;;;;;;;;;;iCAGsB;;;;;;;;yBAGN;;;;;;;;;;;;;;;;;;;;;;eAiB5B;;;;;;;;;;;;;;;;;;;;;oBAeC;;;;;"}
+{"version":3,"file":"index.vue_vue_type_template_id_2f09f285_lang.js","sources":["../../../../../../packages/components/autocomplete/src/index.vue?vue&type=template&id=2f09f285&lang.js"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    v-model:visible=\"suggestionVisible\"\n    :placement=\"placement\"\n    :fallback-placements=\"['bottom-start', 'top-start']\"\n    :popper-class=\"`el-autocomplete__popper ${popperClass}`\"\n    :append-to-body=\"popperAppendToBody\"\n    :gpu-acceleration=\"false\"\n    pure\n    manual-mode\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n    @show=\"onSuggestionShow\"\n  >\n    <div\n      v-clickoutside=\"close\"\n      :class=\"['el-autocomplete', $attrs.class]\"\n      :style=\"$attrs.style\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      :aria-expanded=\"suggestionVisible\"\n      :aria-owns=\"id\"\n    >\n      <el-input\n        ref=\"inputRef\"\n        v-bind=\"attrs\"\n        :model-value=\"modelValue\"\n        @input=\"handleInput\"\n        @change=\"handleChange\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @clear=\"handleClear\"\n        @keydown.up.prevent=\"highlight(highlightedIndex - 1)\"\n        @keydown.down.prevent=\"highlight(highlightedIndex + 1)\"\n        @keydown.enter=\"handleKeyEnter\"\n        @keydown.tab=\"close\"\n      >\n        <template v-if=\"$slots.prepend\" #prepend>\n          <slot name=\"prepend\"></slot>\n        </template>\n        <template v-if=\"$slots.append\" #append>\n          <slot name=\"append\"></slot>\n        </template>\n        <template v-if=\"$slots.prefix\" #prefix>\n          <slot name=\"prefix\"></slot>\n        </template>\n        <template v-if=\"$slots.suffix\" #suffix>\n          <slot name=\"suffix\"></slot>\n        </template>\n      </el-input>\n    </div>\n    <template #content>\n      <div\n        ref=\"regionRef\"\n        :class=\"[\n          'el-autocomplete-suggestion',\n          suggestionLoading && 'is-loading',\n        ]\"\n        :style=\"{ minWidth: dropdownWidth, outline: 'none' }\"\n        role=\"region\"\n      >\n        <el-scrollbar\n          :id=\"id\"\n          tag=\"ul\"\n          wrap-class=\"el-autocomplete-suggestion__wrap\"\n          view-class=\"el-autocomplete-suggestion__list\"\n          role=\"listbox\"\n        >\n          <li v-if=\"suggestionLoading\">\n            <el-icon class=\"is-loading\"><loading /></el-icon>\n          </li>\n          <template v-else>\n            <li\n              v-for=\"(item, index) in suggestions\"\n              :id=\"`${id}-item-${index}`\"\n              :key=\"index\"\n              :class=\"{ highlighted: highlightedIndex === index }\"\n              role=\"option\"\n              :aria-selected=\"highlightedIndex === index\"\n              @click=\"select(item)\"\n            >\n              <slot :item=\"item\">{{ item[valueKey] }}</slot>\n            </li>\n          </template>\n        </el-scrollbar>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, onMounted, nextTick } from 'vue'\nimport { NOOP } from '@vue/shared'\nimport debounce from 'lodash/debounce'\nimport { useAttrs } from '@element-plus/hooks'\nimport { ClickOutside } from '@element-plus/directives'\nimport { generateId, isArray } from '@element-plus/utils/util'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { throwError } from '@element-plus/utils/error'\nimport ElInput from '@element-plus/components/input'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElIcon from '@element-plus/components/icon'\nimport { Loading } from '@element-plus/icons-vue'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAutocomplete',\n  components: {\n    ElTooltip,\n    ElInput,\n    ElScrollbar,\n    ElIcon,\n    Loading,\n  },\n  directives: {\n    clickoutside: ClickOutside,\n  },\n  inheritAttrs: false,\n  props: {\n    valueKey: {\n      type: String,\n      default: 'value',\n    },\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n    debounce: {\n      type: Number,\n      default: 300,\n    },\n    placement: {\n      type: String as PropType<Placement>,\n      validator: (val: string): boolean => {\n        return [\n          'top',\n          'top-start',\n          'top-end',\n          'bottom',\n          'bottom-start',\n          'bottom-end',\n        ].includes(val)\n      },\n      default: 'bottom-start',\n    },\n    fetchSuggestions: {\n      type: Function as PropType<\n        (queryString: string, cb: (data: any[]) => void) => void\n      >,\n      default: NOOP,\n    },\n    popperClass: {\n      type: String,\n      default: '',\n    },\n    triggerOnFocus: {\n      type: Boolean,\n      default: true,\n    },\n    selectWhenUnmatched: {\n      type: Boolean,\n      default: false,\n    },\n    hideLoading: {\n      type: Boolean,\n      default: false,\n    },\n    popperAppendToBody: {\n      type: Boolean,\n      default: true,\n    },\n    highlightFirstItem: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: [\n    UPDATE_MODEL_EVENT,\n    'input',\n    'change',\n    'focus',\n    'blur',\n    'clear',\n    'select',\n  ],\n  setup(props, ctx) {\n    const attrs = useAttrs()\n    const suggestions = ref<any[]>([])\n    const highlightedIndex = ref(-1)\n    const dropdownWidth = ref('')\n    const activated = ref(false)\n    const suggestionDisabled = ref(false)\n    const loading = ref(false)\n    const inputRef = ref<{\n      inputOrTextarea: HTMLInputElement | HTMLTextAreaElement\n      focus: () => void\n      $el: HTMLElement\n    } | null>(null)\n    const regionRef = ref<HTMLElement | null>(null)\n    const popper = ref(null)\n\n    const id = computed(() => {\n      return `el-autocomplete-${generateId()}`\n    })\n    const suggestionVisible = computed(() => {\n      const isValidData =\n        isArray(suggestions.value) && suggestions.value.length > 0\n      return (isValidData || loading.value) && activated.value\n    })\n    const suggestionLoading = computed(() => {\n      return !props.hideLoading && loading.value\n    })\n\n    const onSuggestionShow = () => {\n      nextTick(() => {\n        if (suggestionVisible.value) {\n          dropdownWidth.value = `${inputRef.value!.$el.offsetWidth}px`\n        }\n      })\n    }\n\n    onMounted(() => {\n      inputRef.value!.inputOrTextarea.setAttribute('role', 'textbox')\n      inputRef.value!.inputOrTextarea.setAttribute('aria-autocomplete', 'list')\n      inputRef.value!.inputOrTextarea.setAttribute('aria-controls', 'id')\n      inputRef.value!.inputOrTextarea.setAttribute(\n        'aria-activedescendant',\n        `${id.value}-item-${highlightedIndex.value}`\n      )\n    })\n\n    const getData = (queryString: string) => {\n      if (suggestionDisabled.value) {\n        return\n      }\n      loading.value = true\n      props.fetchSuggestions(queryString, (suggestionsArg) => {\n        loading.value = false\n        if (suggestionDisabled.value) {\n          return\n        }\n        if (isArray(suggestionsArg)) {\n          suggestions.value = suggestionsArg\n          highlightedIndex.value = props.highlightFirstItem ? 0 : -1\n        } else {\n          throwError(\n            'ElAutocomplete',\n            'autocomplete suggestions must be an array'\n          )\n        }\n      })\n    }\n    const debouncedGetData = debounce(getData, props.debounce)\n    const handleInput = (value: string) => {\n      ctx.emit('input', value)\n      ctx.emit(UPDATE_MODEL_EVENT, value)\n      suggestionDisabled.value = false\n      if (!props.triggerOnFocus && !value) {\n        suggestionDisabled.value = true\n        suggestions.value = []\n        return\n      }\n      debouncedGetData(value)\n    }\n    const handleChange = (value) => {\n      ctx.emit('change', value)\n    }\n    const handleFocus = (e) => {\n      activated.value = true\n      ctx.emit('focus', e)\n      if (props.triggerOnFocus) {\n        debouncedGetData(String(props.modelValue))\n      }\n    }\n    const handleBlur = (e) => {\n      ctx.emit('blur', e)\n    }\n    const handleClear = () => {\n      activated.value = false\n      ctx.emit(UPDATE_MODEL_EVENT, '')\n      ctx.emit('clear')\n    }\n    const handleKeyEnter = () => {\n      if (\n        suggestionVisible.value &&\n        highlightedIndex.value >= 0 &&\n        highlightedIndex.value < suggestions.value.length\n      ) {\n        select(suggestions.value[highlightedIndex.value])\n      } else if (props.selectWhenUnmatched) {\n        ctx.emit('select', { value: props.modelValue })\n        nextTick(() => {\n          suggestions.value = []\n          highlightedIndex.value = -1\n        })\n      }\n    }\n    const close = () => {\n      activated.value = false\n    }\n    const focus = () => {\n      inputRef.value?.focus()\n    }\n    const select = (item) => {\n      ctx.emit('input', item[props.valueKey])\n      ctx.emit(UPDATE_MODEL_EVENT, item[props.valueKey])\n      ctx.emit('select', item)\n      nextTick(() => {\n        suggestions.value = []\n        highlightedIndex.value = -1\n      })\n    }\n    const highlight = (index: number) => {\n      if (!suggestionVisible.value || loading.value) {\n        return\n      }\n      if (index < 0) {\n        highlightedIndex.value = -1\n        return\n      }\n      if (index >= suggestions.value.length) {\n        index = suggestions.value.length - 1\n      }\n      const suggestion = regionRef.value!.querySelector(\n        '.el-autocomplete-suggestion__wrap'\n      )!\n      const suggestionList = suggestion.querySelectorAll(\n        '.el-autocomplete-suggestion__list li'\n      )!\n      const highlightItem = suggestionList[index]\n      const scrollTop = suggestion.scrollTop\n      const { offsetTop, scrollHeight } = highlightItem as HTMLElement\n\n      if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) {\n        suggestion.scrollTop += scrollHeight\n      }\n      if (offsetTop < scrollTop) {\n        suggestion.scrollTop -= scrollHeight\n      }\n      highlightedIndex.value = index\n      inputRef.value!.inputOrTextarea.setAttribute(\n        'aria-activedescendant',\n        `${id.value}-item-${highlightedIndex.value}`\n      )\n    }\n\n    return {\n      attrs,\n      suggestions,\n      highlightedIndex,\n      dropdownWidth,\n      activated,\n      suggestionDisabled,\n      loading,\n      inputRef,\n      regionRef,\n      popper,\n\n      id,\n      suggestionVisible,\n      suggestionLoading,\n\n      getData,\n      handleInput,\n      handleChange,\n      handleFocus,\n      handleBlur,\n      handleClear,\n      handleKeyEnter,\n      close,\n      focus,\n      select,\n      highlight,\n      onSuggestionShow,\n    }\n  },\n})\n</script>\n"],"names":["_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;wBACE;IACE;IACQ;;IACP;IACA;IACA;IACA;IACA;IACD;IACA;IACA,MAAM,EAAC;;IAEP;oCACuB;;;;;;;;;QA8ClBA;YACG,EAAC;;;UAGF;UACD;;UAEA;gBACK;;;;;;;sCAGoC;;;;;;;gDAKb;;6DAED;;;;;;;;;;;;;;;;;QA5D9B;;QAEDA;uBACa,EAAC;uBACA;;;;UAMX,aAAW;UACX,SAAO;kBACD,EAAE;mBACD,gBAAW;;sCAEA;;;;;;;;WAMH;;;;;;;;;;iCAGsB;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/carousel/index.d.ts

@@ -101,13 +101,13 @@ export declare const ElCarousel: import("../../utils/types").SFCWithInstall<impo
 } & {
     type: string;
     height: string;
-    trigger: string;
     direction: string;
+    trigger: string;
+    indicator: boolean;
     initialIndex: number;
     autoplay: boolean;
     interval: number;
     indicatorPosition: string;
-    indicator: boolean;
     arrow: string;
     loop: boolean;
     pauseOnHover: boolean;
@@ -116,13 +116,13 @@ export declare const ElCarousel: import("../../utils/types").SFCWithInstall<impo
 }, {
     type: string;
     height: string;
-    trigger: string;
     direction: string;
+    trigger: string;
+    indicator: boolean;
     initialIndex: number;
     autoplay: boolean;
     interval: number;
     indicatorPosition: string;
-    indicator: boolean;
     arrow: string;
     loop: boolean;
     pauseOnHover: boolean;

package/lib/components/carousel/src/main.vue.d.ts

@@ -102,13 +102,13 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     type: string;
     height: string;
-    trigger: string;
     direction: string;
+    trigger: string;
+    indicator: boolean;
     initialIndex: number;
     autoplay: boolean;
     interval: number;
     indicatorPosition: string;
-    indicator: boolean;
     arrow: string;
     loop: boolean;
     pauseOnHover: boolean;
@@ -117,13 +117,13 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     type: string;
     height: string;
-    trigger: string;
     direction: string;
+    trigger: string;
+    indicator: boolean;
     initialIndex: number;
     autoplay: boolean;
     interval: number;
     indicatorPosition: string;
-    indicator: boolean;
     arrow: string;
     loop: boolean;
     pauseOnHover: boolean;