{"version":3,"file":"index.vue.mjs","sources":["../../../../../packages/components/autocomplete/src/index.vue"],"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=\"`${ns.e('popper')} ${popperClass}`\"\n    :teleported=\"compatTeleported\"\n    :gpu-acceleration=\"false\"\n    pure\n    manual-mode\n    effect=\"light\"\n    trigger=\"click\"\n    :transition=\"`${ns.namespace}-zoom-in-top`\"\n    persistent\n    @show=\"onSuggestionShow\"\n  >\n    <div\n      v-clickoutside=\"close\"\n      :class=\"[ns.b(), 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=\"[ns.b('suggestion'), ns.is('loading', suggestionLoading)]\"\n        :style=\"{ minWidth: dropdownWidth, outline: 'none' }\"\n        role=\"region\"\n      >\n        <el-scrollbar\n          :id=\"id\"\n          tag=\"ul\"\n          :wrap-class=\"ns.be('suggestion', 'wrap')\"\n          :view-class=\"ns.be('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 {\n  defineComponent,\n  ref,\n  computed,\n  onMounted,\n  nextTick,\n  useAttrs,\n} from 'vue'\nimport { NOOP } from '@vue/shared'\nimport { debounce } from 'lodash-unified'\nimport { useNamespace } from '@element-ultra/hooks'\nimport { ClickOutside } from '@element-ultra/directives'\nimport { generateId, isArray, throwError } from '@element-ultra/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-ultra/shared'\nimport ElInput from '@element-ultra/components/input'\nimport ElScrollbar from '@element-ultra/components/scrollbar'\nimport ElTooltip, {\n  useTooltipContentProps,\n} from '@element-ultra/components/tooltip'\nimport { useDeprecateAppendToBody } from '@element-ultra/components/popper'\nimport ElIcon from '@element-ultra/components/icon'\nimport { Loading } from 'icon-ultra'\n\nimport type { Placement } from '@element-ultra/components/popper'\nimport type { PropType } from 'vue'\n\nconst COMPONENT_NAME = 'ElAutocomplete'\nexport default defineComponent({\n  name: COMPONENT_NAME,\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: undefined,\n    },\n    teleported: useTooltipContentProps.teleported,\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 ns = useNamespace('autocomplete')\n    const { compatTeleported } = useDeprecateAppendToBody(\n      COMPONENT_NAME,\n      'popperAppendToBody'\n    )\n\n    const attrs = useAttrs() as Record<string, any>\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      inputRef: 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 ns.b(String(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      const { inputRef: inputDom } = inputRef.value!\n      inputDom.setAttribute('role', 'textbox')\n      inputDom.setAttribute('aria-autocomplete', 'list')\n      inputDom.setAttribute('aria-controls', 'id')\n      inputDom.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        `.${ns.be('suggestion', 'wrap')}`\n      )!\n      const suggestionList = suggestion.querySelectorAll(\n        `.${ns.be('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!.inputRef.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      // deprecation in 2.1.0\n      compatTeleported,\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      ns,\n    }\n  },\n})\n</script>\n"],"names":["_resolveDirective","_openBlock","_createBlock","_withCtx","_createElementVNode","_normalizeClass","_normalizeStyle","_createVNode","_createElementBlock","_Fragment","_renderList","_withDirectives","_mergeProps","_withKeys","_withModifiers"],"mappings":"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"}