@element-plus/nightly 0.0.20220105 → 0.0.20220109

package/es/components/autocomplete/src/index.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_script_lang.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=\"`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":[],"mappings":"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"}
+{"version":3,"file":"index.vue_vue_type_script_lang.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=\"`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    persistent\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":[],"mappings":"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"}

package/es/components/autocomplete/src/index.vue_vue_type_template_id_2f09f285_lang.mjs

@@ -24,6 +24,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     effect: "light",
     trigger: "click",
     transition: "el-zoom-in-top",
+    persistent: "",
     onShow: _ctx.onSuggestionShow
   }, {
     content: withCtx(() => [

package/es/components/autocomplete/src/index.vue_vue_type_template_id_2f09f285_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_template_id_2f09f285_lang.mjs","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;gCACuB;;;;;;;;;QA8ClBA;YACG,EAAC;;;UAGF;UACD;;UAEA;gBACK;;;;;;;kCAGoC;;;;;;;gDAKb;;yDAED;;;;;;;;;;;;;;;;;QA5D9B;;QAEDA;uBACa,EAAC;uBACA;;;;UAMX,aAAW;UACX,SAAO;kBACD,EAAE;mBACD,gBAAW;;kCAEA;;;;;;;;WAMH;;;;;;;;;;6BAGsB;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.vue_vue_type_template_id_2f09f285_lang.mjs","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    persistent\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;IACA;;IAEA;gCACuB;;;;;;;;;QA8ClBA;YACG,EAAC;;;UAGF;UACD;;UAEA;gBACK;;;;;;;kCAGoC;;;;;;;gDAKb;;yDAED;;;;;;;;;;;;;;;;;QA5D9B;;QAEDA;uBACa,EAAC;uBACA;;;;UAMX,aAAW;UACX,SAAO;kBACD,EAAE;mBACD,gBAAW;;kCAEA;;;;;;;;WAMH;;;;;;;;;;6BAGsB;;;;;;;;;;;;;;;;;;;;"}

package/es/components/cascader/index.d.ts

@@ -877,6 +877,7 @@ declare const _Cascader: SFCWithInstall<import("vue").DefineComponent<{
             passwordVisible: import("vue").Ref<boolean>;
             inputOrTextarea: import("vue").ComputedRef<HTMLInputElement | HTMLTextAreaElement | undefined>;
             suffixVisible: import("vue").ComputedRef<boolean>;
+            needStatusIcon: import("vue").ComputedRef<boolean>;
             resizeTextarea: () => void;
             handleInput: (event: Event) => void;
             handleChange: (event: Event) => void;
@@ -1025,6 +1026,7 @@ declare const _Cascader: SFCWithInstall<import("vue").DefineComponent<{
         passwordVisible: import("vue").Ref<boolean>;
         inputOrTextarea: import("vue").ComputedRef<HTMLInputElement | HTMLTextAreaElement | undefined>;
         suffixVisible: import("vue").ComputedRef<boolean>;
+        needStatusIcon: import("vue").ComputedRef<boolean>;
         resizeTextarea: () => void;
         handleInput: (event: Event) => void;
         handleChange: (event: Event) => void;
@@ -2548,6 +2550,7 @@ export declare const ElCascader: SFCWithInstall<import("vue").DefineComponent<{
             passwordVisible: import("vue").Ref<boolean>;
             inputOrTextarea: import("vue").ComputedRef<HTMLInputElement | HTMLTextAreaElement | undefined>;
             suffixVisible: import("vue").ComputedRef<boolean>;
+            needStatusIcon: import("vue").ComputedRef<boolean>;
             resizeTextarea: () => void;
             handleInput: (event: Event) => void;
             handleChange: (event: Event) => void;
@@ -2696,6 +2699,7 @@ export declare const ElCascader: SFCWithInstall<import("vue").DefineComponent<{
         passwordVisible: import("vue").Ref<boolean>;
         inputOrTextarea: import("vue").ComputedRef<HTMLInputElement | HTMLTextAreaElement | undefined>;
         suffixVisible: import("vue").ComputedRef<boolean>;
+        needStatusIcon: import("vue").ComputedRef<boolean>;
         resizeTextarea: () => void;
         handleInput: (event: Event) => void;
         handleChange: (event: Event) => void;

package/es/components/cascader/src/index.vue.d.ts

@@ -881,6 +881,7 @@ declare const _default: import("vue").DefineComponent<{
             passwordVisible: Ref<boolean>;
             inputOrTextarea: ComputedRef<HTMLInputElement | HTMLTextAreaElement | undefined>;
             suffixVisible: ComputedRef<boolean>;
+            needStatusIcon: ComputedRef<boolean>;
             resizeTextarea: () => void;
             handleInput: (event: Event) => void;
             handleChange: (event: Event) => void;
@@ -1029,6 +1030,7 @@ declare const _default: import("vue").DefineComponent<{
         passwordVisible: Ref<boolean>;
         inputOrTextarea: ComputedRef<HTMLInputElement | HTMLTextAreaElement | undefined>;
         suffixVisible: ComputedRef<boolean>;
+        needStatusIcon: ComputedRef<boolean>;
         resizeTextarea: () => void;
         handleInput: (event: Event) => void;
         handleChange: (event: Event) => void;

package/es/components/cascader-panel/src/index.vue_vue_type_script_lang.mjs

@@ -28,10 +28,10 @@ var script = defineComponent({
   },
   emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, "close", "expand-change"],
   setup(props, { emit, slots }) {
-    let initialLoaded = true;
     let manualChecked = false;
     const config = useCascaderConfig(props);
     let store = null;
+    const initialLoaded = ref(true);
     const menuList = ref([]);
     const checkedValue = ref(null);
     const menus = ref([]);
@@ -46,13 +46,13 @@ var script = defineComponent({
       store = new Store(options, cfg);
       menus.value = [store.getNodes()];
       if (cfg.lazy && isEmpty(props.options)) {
-        initialLoaded = false;
+        initialLoaded.value = false;
         lazyLoad(void 0, (list) => {
           if (list) {
             store = new Store(list, cfg);
             menus.value = [store.getNodes()];
           }
-          initialLoaded = true;
+          initialLoaded.value = true;
           syncCheckedValue(false, true);
         });
       } else {
@@ -133,7 +133,7 @@ var script = defineComponent({
       const { modelValue } = props;
       const { lazy, multiple, checkStrictly } = config.value;
       const leafOnly = !checkStrictly;
-      if (!initialLoaded || manualChecked || !forced && isEqual(modelValue, checkedValue.value))
+      if (!initialLoaded.value || manualChecked || !forced && isEqual(modelValue, checkedValue.value))
         return;
       if (lazy && !loaded) {
         const values = deduplicate(arrayFlat(coerceTruthyValueToArray(modelValue)));
@@ -219,6 +219,7 @@ var script = defineComponent({
       expandingNode,
       checkedNodes,
       isHoverMenu,
+      initialLoaded,
       renderLabelFn,
       lazyLoad,
       expandNode,

package/es/components/cascader-panel/src/index.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/cascader-panel/src/index.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['el-cascader-panel', border && 'is-bordered']\"\n    @keydown=\"handleKeyDown\"\n  >\n    <el-cascader-menu\n      v-for=\"(menu, index) in menus\"\n      :key=\"index\"\n      :ref=\"(item) => (menuList[index] = item)\"\n      :index=\"index\"\n      :nodes=\"menu\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onBeforeUpdate,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport isEqual from 'lodash/isEqual'\nimport { isClient } from '@vueuse/core'\nimport { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport scrollIntoView from '@element-plus/utils/scroll-into-view'\nimport {\n  arrayFlat,\n  coerceTruthyValueToArray,\n  deduplicate,\n  isEmpty,\n} from '@element-plus/utils/util'\n\nimport ElCascaderMenu from './menu.vue'\nimport Store from './store'\nimport Node, { ExpandTrigger } from './node'\nimport { CommonProps, useCascaderConfig } from './config'\nimport { checkNode, getMenuIndex, sortByOriginalOrder } from './utils'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\n\nimport type { PropType } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\nimport type {\n  CascaderValue,\n  CascaderNodeValue,\n  CascaderOption,\n  RenderLabel,\n  default as CascaderNode,\n} from './node'\n\nimport type { ElCascaderPanelContext } from './types'\n\nexport default defineComponent({\n  name: 'ElCascaderPanel',\n\n  components: {\n    ElCascaderMenu,\n  },\n\n  props: {\n    ...CommonProps,\n    border: {\n      type: Boolean,\n      default: true,\n    },\n    renderLabel: Function as PropType<RenderLabel>,\n  },\n\n  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, 'close', 'expand-change'],\n\n  setup(props, { emit, slots }) {\n    let initialLoaded = true\n    // for interrupt sync check status in lazy mode\n    let manualChecked = false\n\n    const config = useCascaderConfig(props)\n\n    let store: Nullable<Store> = null\n    const menuList = ref<any[]>([])\n    const checkedValue = ref<Nullable<CascaderValue>>(null)\n    const menus = ref<CascaderNode[][]>([])\n    const expandingNode = ref<Nullable<CascaderNode>>(null)\n    const checkedNodes = ref<CascaderNode[]>([])\n\n    const isHoverMenu = computed(\n      () => config.value.expandTrigger === ExpandTrigger.HOVER\n    )\n    const renderLabelFn = computed(() => props.renderLabel || slots.default)\n\n    const initStore = () => {\n      const { options } = props\n      const cfg = config.value\n\n      manualChecked = false\n      store = new Store(options, cfg)\n      menus.value = [store.getNodes()]\n\n      if (cfg.lazy && isEmpty(props.options)) {\n        initialLoaded = false\n        lazyLoad(undefined, (list) => {\n          if (list) {\n            store = new Store(list, cfg)\n            menus.value = [store.getNodes()]\n          }\n          initialLoaded = true\n          syncCheckedValue(false, true)\n        })\n      } else {\n        syncCheckedValue(false, true)\n      }\n    }\n\n    const lazyLoad: ElCascaderPanelContext['lazyLoad'] = (node, cb) => {\n      const cfg = config.value\n      node! = node || new Node({}, cfg, undefined, true)\n      node.loading = true\n\n      const resolve = (dataList: CascaderOption[]) => {\n        const _node = node as Node\n        const parent = _node.root ? null : _node\n        dataList && store?.appendNodes(dataList, parent as any)\n        _node.loading = false\n        _node.loaded = true\n        _node.childrenData = _node.childrenData || []\n        cb && cb(dataList)\n      }\n\n      cfg.lazyLoad(node, resolve as any)\n    }\n\n    const expandNode: ElCascaderPanelContext['expandNode'] = (node, silent) => {\n      const { level } = node\n      const newMenus = menus.value.slice(0, level)\n      let newExpandingNode: Nullable<CascaderNode>\n\n      if (node.isLeaf) {\n        newExpandingNode = node.pathNodes[level - 2]\n      } else {\n        newExpandingNode = node\n        newMenus.push(node.children)\n      }\n\n      if (expandingNode.value?.uid !== newExpandingNode?.uid) {\n        expandingNode.value = node\n        menus.value = newMenus\n        !silent && emit('expand-change', node?.pathValues || [])\n      }\n    }\n\n    const handleCheckChange: ElCascaderPanelContext['handleCheckChange'] = (\n      node,\n      checked,\n      emitClose = true\n    ) => {\n      const { checkStrictly, multiple } = config.value\n      const oldNode = checkedNodes.value[0]\n      manualChecked = true\n\n      !multiple && oldNode?.doCheck(false)\n      node.doCheck(checked)\n      calculateCheckedValue()\n      emitClose && !multiple && !checkStrictly && emit('close')\n      !emitClose && !multiple && !checkStrictly && expandParentNode(node)\n    }\n\n    const expandParentNode = (node) => {\n      if (!node) return\n      node = node.parent\n      expandParentNode(node)\n      node && expandNode(node)\n    }\n\n    const getFlattedNodes = (leafOnly: boolean) => {\n      return store?.getFlattedNodes(leafOnly)\n    }\n\n    const getCheckedNodes = (leafOnly: boolean) => {\n      return getFlattedNodes(leafOnly)?.filter((node) => node.checked !== false)\n    }\n\n    const clearCheckedNodes = () => {\n      checkedNodes.value.forEach((node) => node.doCheck(false))\n      calculateCheckedValue()\n    }\n\n    const calculateCheckedValue = () => {\n      const { checkStrictly, multiple } = config.value\n      const oldNodes = checkedNodes.value\n      const newNodes = getCheckedNodes(!checkStrictly)!\n      // ensure the original order\n      const nodes = sortByOriginalOrder(oldNodes, newNodes)\n      const values = nodes.map((node) => node.valueByOption)\n      checkedNodes.value = nodes\n      checkedValue.value = multiple ? values : values[0] ?? null\n    }\n\n    const syncCheckedValue = (loaded = false, forced = false) => {\n      const { modelValue } = props\n      const { lazy, multiple, checkStrictly } = config.value\n      const leafOnly = !checkStrictly\n\n      if (\n        !initialLoaded ||\n        manualChecked ||\n        (!forced && isEqual(modelValue, checkedValue.value))\n      )\n        return\n\n      if (lazy && !loaded) {\n        const values: CascaderNodeValue[] = deduplicate(\n          arrayFlat(coerceTruthyValueToArray(modelValue))\n        )\n        const nodes = values\n          .map((val) => store?.getNodeByValue(val))\n          .filter((node) => !!node && !node.loaded && !node.loading) as Node[]\n\n        if (nodes.length) {\n          nodes.forEach((node) => {\n            lazyLoad(node, () => syncCheckedValue(false, forced))\n          })\n        } else {\n          syncCheckedValue(true, forced)\n        }\n      } else {\n        const values = multiple\n          ? coerceTruthyValueToArray(modelValue)\n          : [modelValue]\n        const nodes = deduplicate(\n          values.map((val) => store?.getNodeByValue(val, leafOnly))\n        ) as Node[]\n        syncMenuState(nodes, false)\n        checkedValue.value = modelValue!\n      }\n    }\n\n    const syncMenuState = (\n      newCheckedNodes: CascaderNode[],\n      reserveExpandingState = true\n    ) => {\n      const { checkStrictly } = config.value\n      const oldNodes = checkedNodes.value\n      const newNodes = newCheckedNodes.filter(\n        (node) => !!node && (checkStrictly || node.isLeaf)\n      )\n      const oldExpandingNode = store?.getSameNode(expandingNode.value!)\n      const newExpandingNode =\n        (reserveExpandingState && oldExpandingNode) || newNodes[0]\n\n      if (newExpandingNode) {\n        newExpandingNode.pathNodes.forEach((node) => expandNode(node, true))\n      } else {\n        expandingNode.value = null\n      }\n\n      oldNodes.forEach((node) => node.doCheck(false))\n      newNodes.forEach((node) => node.doCheck(true))\n\n      checkedNodes.value = newNodes\n      nextTick(scrollToExpandingNode)\n    }\n\n    const scrollToExpandingNode = () => {\n      if (!isClient) return\n\n      menuList.value.forEach((menu) => {\n        const menuElement = menu?.$el\n        if (menuElement) {\n          const container = menuElement.querySelector('.el-scrollbar__wrap')\n          const activeNode =\n            menuElement.querySelector('.el-cascader-node.is-active') ||\n            menuElement.querySelector('.el-cascader-node.in-active-path')\n          scrollIntoView(container, activeNode)\n        }\n      })\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const target = e.target as HTMLElement\n      const { code } = e\n\n      switch (code) {\n        case EVENT_CODE.up:\n        case EVENT_CODE.down: {\n          e.preventDefault()\n          const distance = code === EVENT_CODE.up ? -1 : 1\n          focusNode(\n            getSibling(target, distance, '.el-cascader-node[tabindex=\"-1\"]')\n          )\n          break\n        }\n        case EVENT_CODE.left: {\n          e.preventDefault()\n          const preMenu = menuList.value[getMenuIndex(target) - 1]\n          const expandedNode = preMenu?.$el.querySelector(\n            '.el-cascader-node[aria-expanded=\"true\"]'\n          )\n          focusNode(expandedNode)\n          break\n        }\n        case EVENT_CODE.right: {\n          e.preventDefault()\n          const nextMenu = menuList.value[getMenuIndex(target) + 1]\n          const firstNode = nextMenu?.$el.querySelector(\n            '.el-cascader-node[tabindex=\"-1\"]'\n          )\n          focusNode(firstNode)\n          break\n        }\n        case EVENT_CODE.enter:\n          checkNode(target)\n          break\n        case EVENT_CODE.esc:\n        case EVENT_CODE.tab:\n          emit('close')\n          break\n      }\n    }\n\n    provide(\n      CASCADER_PANEL_INJECTION_KEY,\n      reactive({\n        config,\n        expandingNode,\n        checkedNodes,\n        isHoverMenu,\n        renderLabelFn,\n        lazyLoad,\n        expandNode,\n        handleCheckChange,\n      })\n    )\n\n    watch([config, () => props.options], initStore, {\n      deep: true,\n      immediate: true,\n    })\n\n    watch(\n      () => props.modelValue,\n      () => {\n        manualChecked = false\n        syncCheckedValue()\n      }\n    )\n\n    watch(checkedValue, (val) => {\n      if (!isEqual(val, props.modelValue)) {\n        emit(UPDATE_MODEL_EVENT, val)\n        emit(CHANGE_EVENT, val)\n      }\n    })\n\n    onBeforeUpdate(() => (menuList.value = []))\n\n    onMounted(() => !isEmpty(props.modelValue) && syncCheckedValue())\n\n    return {\n      menuList,\n      menus,\n      checkedNodes,\n      handleKeyDown,\n      handleCheckChange,\n      getFlattedNodes,\n      getCheckedNodes,\n      clearCheckedNodes,\n      calculateCheckedValue,\n      scrollToExpandingNode,\n    }\n  },\n})\n</script>\n"],"names":["ElCascaderMenu"],"mappings":"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"}
+{"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/cascader-panel/src/index.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['el-cascader-panel', border && 'is-bordered']\"\n    @keydown=\"handleKeyDown\"\n  >\n    <el-cascader-menu\n      v-for=\"(menu, index) in menus\"\n      :key=\"index\"\n      :ref=\"(item) => (menuList[index] = item)\"\n      :index=\"index\"\n      :nodes=\"menu\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onBeforeUpdate,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport isEqual from 'lodash/isEqual'\nimport { isClient } from '@vueuse/core'\nimport { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport scrollIntoView from '@element-plus/utils/scroll-into-view'\nimport {\n  arrayFlat,\n  coerceTruthyValueToArray,\n  deduplicate,\n  isEmpty,\n} from '@element-plus/utils/util'\n\nimport ElCascaderMenu from './menu.vue'\nimport Store from './store'\nimport Node, { ExpandTrigger } from './node'\nimport { CommonProps, useCascaderConfig } from './config'\nimport { checkNode, getMenuIndex, sortByOriginalOrder } from './utils'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\n\nimport type { PropType } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\nimport type {\n  CascaderValue,\n  CascaderNodeValue,\n  CascaderOption,\n  RenderLabel,\n  default as CascaderNode,\n} from './node'\n\nimport type { ElCascaderPanelContext } from './types'\n\nexport default defineComponent({\n  name: 'ElCascaderPanel',\n\n  components: {\n    ElCascaderMenu,\n  },\n\n  props: {\n    ...CommonProps,\n    border: {\n      type: Boolean,\n      default: true,\n    },\n    renderLabel: Function as PropType<RenderLabel>,\n  },\n\n  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, 'close', 'expand-change'],\n\n  setup(props, { emit, slots }) {\n    // for interrupt sync check status in lazy mode\n    let manualChecked = false\n\n    const config = useCascaderConfig(props)\n\n    let store: Nullable<Store> = null\n    const initialLoaded = ref(true)\n    const menuList = ref<any[]>([])\n    const checkedValue = ref<Nullable<CascaderValue>>(null)\n    const menus = ref<CascaderNode[][]>([])\n    const expandingNode = ref<Nullable<CascaderNode>>(null)\n    const checkedNodes = ref<CascaderNode[]>([])\n\n    const isHoverMenu = computed(\n      () => config.value.expandTrigger === ExpandTrigger.HOVER\n    )\n    const renderLabelFn = computed(() => props.renderLabel || slots.default)\n\n    const initStore = () => {\n      const { options } = props\n      const cfg = config.value\n\n      manualChecked = false\n      store = new Store(options, cfg)\n      menus.value = [store.getNodes()]\n\n      if (cfg.lazy && isEmpty(props.options)) {\n        initialLoaded.value = false\n        lazyLoad(undefined, (list) => {\n          if (list) {\n            store = new Store(list, cfg)\n            menus.value = [store.getNodes()]\n          }\n          initialLoaded.value = true\n          syncCheckedValue(false, true)\n        })\n      } else {\n        syncCheckedValue(false, true)\n      }\n    }\n\n    const lazyLoad: ElCascaderPanelContext['lazyLoad'] = (node, cb) => {\n      const cfg = config.value\n      node! = node || new Node({}, cfg, undefined, true)\n      node.loading = true\n\n      const resolve = (dataList: CascaderOption[]) => {\n        const _node = node as Node\n        const parent = _node.root ? null : _node\n        dataList && store?.appendNodes(dataList, parent as any)\n        _node.loading = false\n        _node.loaded = true\n        _node.childrenData = _node.childrenData || []\n        cb && cb(dataList)\n      }\n\n      cfg.lazyLoad(node, resolve as any)\n    }\n\n    const expandNode: ElCascaderPanelContext['expandNode'] = (node, silent) => {\n      const { level } = node\n      const newMenus = menus.value.slice(0, level)\n      let newExpandingNode: Nullable<CascaderNode>\n\n      if (node.isLeaf) {\n        newExpandingNode = node.pathNodes[level - 2]\n      } else {\n        newExpandingNode = node\n        newMenus.push(node.children)\n      }\n\n      if (expandingNode.value?.uid !== newExpandingNode?.uid) {\n        expandingNode.value = node\n        menus.value = newMenus\n        !silent && emit('expand-change', node?.pathValues || [])\n      }\n    }\n\n    const handleCheckChange: ElCascaderPanelContext['handleCheckChange'] = (\n      node,\n      checked,\n      emitClose = true\n    ) => {\n      const { checkStrictly, multiple } = config.value\n      const oldNode = checkedNodes.value[0]\n      manualChecked = true\n\n      !multiple && oldNode?.doCheck(false)\n      node.doCheck(checked)\n      calculateCheckedValue()\n      emitClose && !multiple && !checkStrictly && emit('close')\n      !emitClose && !multiple && !checkStrictly && expandParentNode(node)\n    }\n\n    const expandParentNode = (node) => {\n      if (!node) return\n      node = node.parent\n      expandParentNode(node)\n      node && expandNode(node)\n    }\n\n    const getFlattedNodes = (leafOnly: boolean) => {\n      return store?.getFlattedNodes(leafOnly)\n    }\n\n    const getCheckedNodes = (leafOnly: boolean) => {\n      return getFlattedNodes(leafOnly)?.filter((node) => node.checked !== false)\n    }\n\n    const clearCheckedNodes = () => {\n      checkedNodes.value.forEach((node) => node.doCheck(false))\n      calculateCheckedValue()\n    }\n\n    const calculateCheckedValue = () => {\n      const { checkStrictly, multiple } = config.value\n      const oldNodes = checkedNodes.value\n      const newNodes = getCheckedNodes(!checkStrictly)!\n      // ensure the original order\n      const nodes = sortByOriginalOrder(oldNodes, newNodes)\n      const values = nodes.map((node) => node.valueByOption)\n      checkedNodes.value = nodes\n      checkedValue.value = multiple ? values : values[0] ?? null\n    }\n\n    const syncCheckedValue = (loaded = false, forced = false) => {\n      const { modelValue } = props\n      const { lazy, multiple, checkStrictly } = config.value\n      const leafOnly = !checkStrictly\n\n      if (\n        !initialLoaded.value ||\n        manualChecked ||\n        (!forced && isEqual(modelValue, checkedValue.value))\n      )\n        return\n\n      if (lazy && !loaded) {\n        const values: CascaderNodeValue[] = deduplicate(\n          arrayFlat(coerceTruthyValueToArray(modelValue))\n        )\n        const nodes = values\n          .map((val) => store?.getNodeByValue(val))\n          .filter((node) => !!node && !node.loaded && !node.loading) as Node[]\n\n        if (nodes.length) {\n          nodes.forEach((node) => {\n            lazyLoad(node, () => syncCheckedValue(false, forced))\n          })\n        } else {\n          syncCheckedValue(true, forced)\n        }\n      } else {\n        const values = multiple\n          ? coerceTruthyValueToArray(modelValue)\n          : [modelValue]\n        const nodes = deduplicate(\n          values.map((val) => store?.getNodeByValue(val, leafOnly))\n        ) as Node[]\n        syncMenuState(nodes, false)\n        checkedValue.value = modelValue!\n      }\n    }\n\n    const syncMenuState = (\n      newCheckedNodes: CascaderNode[],\n      reserveExpandingState = true\n    ) => {\n      const { checkStrictly } = config.value\n      const oldNodes = checkedNodes.value\n      const newNodes = newCheckedNodes.filter(\n        (node) => !!node && (checkStrictly || node.isLeaf)\n      )\n      const oldExpandingNode = store?.getSameNode(expandingNode.value!)\n      const newExpandingNode =\n        (reserveExpandingState && oldExpandingNode) || newNodes[0]\n\n      if (newExpandingNode) {\n        newExpandingNode.pathNodes.forEach((node) => expandNode(node, true))\n      } else {\n        expandingNode.value = null\n      }\n\n      oldNodes.forEach((node) => node.doCheck(false))\n      newNodes.forEach((node) => node.doCheck(true))\n\n      checkedNodes.value = newNodes\n      nextTick(scrollToExpandingNode)\n    }\n\n    const scrollToExpandingNode = () => {\n      if (!isClient) return\n\n      menuList.value.forEach((menu) => {\n        const menuElement = menu?.$el\n        if (menuElement) {\n          const container = menuElement.querySelector('.el-scrollbar__wrap')\n          const activeNode =\n            menuElement.querySelector('.el-cascader-node.is-active') ||\n            menuElement.querySelector('.el-cascader-node.in-active-path')\n          scrollIntoView(container, activeNode)\n        }\n      })\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const target = e.target as HTMLElement\n      const { code } = e\n\n      switch (code) {\n        case EVENT_CODE.up:\n        case EVENT_CODE.down: {\n          e.preventDefault()\n          const distance = code === EVENT_CODE.up ? -1 : 1\n          focusNode(\n            getSibling(target, distance, '.el-cascader-node[tabindex=\"-1\"]')\n          )\n          break\n        }\n        case EVENT_CODE.left: {\n          e.preventDefault()\n          const preMenu = menuList.value[getMenuIndex(target) - 1]\n          const expandedNode = preMenu?.$el.querySelector(\n            '.el-cascader-node[aria-expanded=\"true\"]'\n          )\n          focusNode(expandedNode)\n          break\n        }\n        case EVENT_CODE.right: {\n          e.preventDefault()\n          const nextMenu = menuList.value[getMenuIndex(target) + 1]\n          const firstNode = nextMenu?.$el.querySelector(\n            '.el-cascader-node[tabindex=\"-1\"]'\n          )\n          focusNode(firstNode)\n          break\n        }\n        case EVENT_CODE.enter:\n          checkNode(target)\n          break\n        case EVENT_CODE.esc:\n        case EVENT_CODE.tab:\n          emit('close')\n          break\n      }\n    }\n\n    provide(\n      CASCADER_PANEL_INJECTION_KEY,\n      reactive({\n        config,\n        expandingNode,\n        checkedNodes,\n        isHoverMenu,\n        initialLoaded,\n        renderLabelFn,\n        lazyLoad,\n        expandNode,\n        handleCheckChange,\n      })\n    )\n\n    watch([config, () => props.options], initStore, {\n      deep: true,\n      immediate: true,\n    })\n\n    watch(\n      () => props.modelValue,\n      () => {\n        manualChecked = false\n        syncCheckedValue()\n      }\n    )\n\n    watch(checkedValue, (val) => {\n      if (!isEqual(val, props.modelValue)) {\n        emit(UPDATE_MODEL_EVENT, val)\n        emit(CHANGE_EVENT, val)\n      }\n    })\n\n    onBeforeUpdate(() => (menuList.value = []))\n\n    onMounted(() => !isEmpty(props.modelValue) && syncCheckedValue())\n\n    return {\n      menuList,\n      menus,\n      checkedNodes,\n      handleKeyDown,\n      handleCheckChange,\n      getFlattedNodes,\n      getCheckedNodes,\n      clearCheckedNodes,\n      calculateCheckedValue,\n      scrollToExpandingNode,\n    }\n  },\n})\n</script>\n"],"names":["ElCascaderMenu"],"mappings":"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"}

package/es/components/cascader-panel/src/index.vue_vue_type_template_id_97c48f5c_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_template_id_97c48f5c_lang.mjs","sources":["../../../../../../packages/components/cascader-panel/src/index.vue?vue&type=template&id=97c48f5c&lang.js"],"sourcesContent":["<template>\n  <div\n    :class=\"['el-cascader-panel', border && 'is-bordered']\"\n    @keydown=\"handleKeyDown\"\n  >\n    <el-cascader-menu\n      v-for=\"(menu, index) in menus\"\n      :key=\"index\"\n      :ref=\"(item) => (menuList[index] = item)\"\n      :index=\"index\"\n      :nodes=\"menu\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onBeforeUpdate,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport isEqual from 'lodash/isEqual'\nimport { isClient } from '@vueuse/core'\nimport { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport scrollIntoView from '@element-plus/utils/scroll-into-view'\nimport {\n  arrayFlat,\n  coerceTruthyValueToArray,\n  deduplicate,\n  isEmpty,\n} from '@element-plus/utils/util'\n\nimport ElCascaderMenu from './menu.vue'\nimport Store from './store'\nimport Node, { ExpandTrigger } from './node'\nimport { CommonProps, useCascaderConfig } from './config'\nimport { checkNode, getMenuIndex, sortByOriginalOrder } from './utils'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\n\nimport type { PropType } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\nimport type {\n  CascaderValue,\n  CascaderNodeValue,\n  CascaderOption,\n  RenderLabel,\n  default as CascaderNode,\n} from './node'\n\nimport type { ElCascaderPanelContext } from './types'\n\nexport default defineComponent({\n  name: 'ElCascaderPanel',\n\n  components: {\n    ElCascaderMenu,\n  },\n\n  props: {\n    ...CommonProps,\n    border: {\n      type: Boolean,\n      default: true,\n    },\n    renderLabel: Function as PropType<RenderLabel>,\n  },\n\n  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, 'close', 'expand-change'],\n\n  setup(props, { emit, slots }) {\n    let initialLoaded = true\n    // for interrupt sync check status in lazy mode\n    let manualChecked = false\n\n    const config = useCascaderConfig(props)\n\n    let store: Nullable<Store> = null\n    const menuList = ref<any[]>([])\n    const checkedValue = ref<Nullable<CascaderValue>>(null)\n    const menus = ref<CascaderNode[][]>([])\n    const expandingNode = ref<Nullable<CascaderNode>>(null)\n    const checkedNodes = ref<CascaderNode[]>([])\n\n    const isHoverMenu = computed(\n      () => config.value.expandTrigger === ExpandTrigger.HOVER\n    )\n    const renderLabelFn = computed(() => props.renderLabel || slots.default)\n\n    const initStore = () => {\n      const { options } = props\n      const cfg = config.value\n\n      manualChecked = false\n      store = new Store(options, cfg)\n      menus.value = [store.getNodes()]\n\n      if (cfg.lazy && isEmpty(props.options)) {\n        initialLoaded = false\n        lazyLoad(undefined, (list) => {\n          if (list) {\n            store = new Store(list, cfg)\n            menus.value = [store.getNodes()]\n          }\n          initialLoaded = true\n          syncCheckedValue(false, true)\n        })\n      } else {\n        syncCheckedValue(false, true)\n      }\n    }\n\n    const lazyLoad: ElCascaderPanelContext['lazyLoad'] = (node, cb) => {\n      const cfg = config.value\n      node! = node || new Node({}, cfg, undefined, true)\n      node.loading = true\n\n      const resolve = (dataList: CascaderOption[]) => {\n        const _node = node as Node\n        const parent = _node.root ? null : _node\n        dataList && store?.appendNodes(dataList, parent as any)\n        _node.loading = false\n        _node.loaded = true\n        _node.childrenData = _node.childrenData || []\n        cb && cb(dataList)\n      }\n\n      cfg.lazyLoad(node, resolve as any)\n    }\n\n    const expandNode: ElCascaderPanelContext['expandNode'] = (node, silent) => {\n      const { level } = node\n      const newMenus = menus.value.slice(0, level)\n      let newExpandingNode: Nullable<CascaderNode>\n\n      if (node.isLeaf) {\n        newExpandingNode = node.pathNodes[level - 2]\n      } else {\n        newExpandingNode = node\n        newMenus.push(node.children)\n      }\n\n      if (expandingNode.value?.uid !== newExpandingNode?.uid) {\n        expandingNode.value = node\n        menus.value = newMenus\n        !silent && emit('expand-change', node?.pathValues || [])\n      }\n    }\n\n    const handleCheckChange: ElCascaderPanelContext['handleCheckChange'] = (\n      node,\n      checked,\n      emitClose = true\n    ) => {\n      const { checkStrictly, multiple } = config.value\n      const oldNode = checkedNodes.value[0]\n      manualChecked = true\n\n      !multiple && oldNode?.doCheck(false)\n      node.doCheck(checked)\n      calculateCheckedValue()\n      emitClose && !multiple && !checkStrictly && emit('close')\n      !emitClose && !multiple && !checkStrictly && expandParentNode(node)\n    }\n\n    const expandParentNode = (node) => {\n      if (!node) return\n      node = node.parent\n      expandParentNode(node)\n      node && expandNode(node)\n    }\n\n    const getFlattedNodes = (leafOnly: boolean) => {\n      return store?.getFlattedNodes(leafOnly)\n    }\n\n    const getCheckedNodes = (leafOnly: boolean) => {\n      return getFlattedNodes(leafOnly)?.filter((node) => node.checked !== false)\n    }\n\n    const clearCheckedNodes = () => {\n      checkedNodes.value.forEach((node) => node.doCheck(false))\n      calculateCheckedValue()\n    }\n\n    const calculateCheckedValue = () => {\n      const { checkStrictly, multiple } = config.value\n      const oldNodes = checkedNodes.value\n      const newNodes = getCheckedNodes(!checkStrictly)!\n      // ensure the original order\n      const nodes = sortByOriginalOrder(oldNodes, newNodes)\n      const values = nodes.map((node) => node.valueByOption)\n      checkedNodes.value = nodes\n      checkedValue.value = multiple ? values : values[0] ?? null\n    }\n\n    const syncCheckedValue = (loaded = false, forced = false) => {\n      const { modelValue } = props\n      const { lazy, multiple, checkStrictly } = config.value\n      const leafOnly = !checkStrictly\n\n      if (\n        !initialLoaded ||\n        manualChecked ||\n        (!forced && isEqual(modelValue, checkedValue.value))\n      )\n        return\n\n      if (lazy && !loaded) {\n        const values: CascaderNodeValue[] = deduplicate(\n          arrayFlat(coerceTruthyValueToArray(modelValue))\n        )\n        const nodes = values\n          .map((val) => store?.getNodeByValue(val))\n          .filter((node) => !!node && !node.loaded && !node.loading) as Node[]\n\n        if (nodes.length) {\n          nodes.forEach((node) => {\n            lazyLoad(node, () => syncCheckedValue(false, forced))\n          })\n        } else {\n          syncCheckedValue(true, forced)\n        }\n      } else {\n        const values = multiple\n          ? coerceTruthyValueToArray(modelValue)\n          : [modelValue]\n        const nodes = deduplicate(\n          values.map((val) => store?.getNodeByValue(val, leafOnly))\n        ) as Node[]\n        syncMenuState(nodes, false)\n        checkedValue.value = modelValue!\n      }\n    }\n\n    const syncMenuState = (\n      newCheckedNodes: CascaderNode[],\n      reserveExpandingState = true\n    ) => {\n      const { checkStrictly } = config.value\n      const oldNodes = checkedNodes.value\n      const newNodes = newCheckedNodes.filter(\n        (node) => !!node && (checkStrictly || node.isLeaf)\n      )\n      const oldExpandingNode = store?.getSameNode(expandingNode.value!)\n      const newExpandingNode =\n        (reserveExpandingState && oldExpandingNode) || newNodes[0]\n\n      if (newExpandingNode) {\n        newExpandingNode.pathNodes.forEach((node) => expandNode(node, true))\n      } else {\n        expandingNode.value = null\n      }\n\n      oldNodes.forEach((node) => node.doCheck(false))\n      newNodes.forEach((node) => node.doCheck(true))\n\n      checkedNodes.value = newNodes\n      nextTick(scrollToExpandingNode)\n    }\n\n    const scrollToExpandingNode = () => {\n      if (!isClient) return\n\n      menuList.value.forEach((menu) => {\n        const menuElement = menu?.$el\n        if (menuElement) {\n          const container = menuElement.querySelector('.el-scrollbar__wrap')\n          const activeNode =\n            menuElement.querySelector('.el-cascader-node.is-active') ||\n            menuElement.querySelector('.el-cascader-node.in-active-path')\n          scrollIntoView(container, activeNode)\n        }\n      })\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const target = e.target as HTMLElement\n      const { code } = e\n\n      switch (code) {\n        case EVENT_CODE.up:\n        case EVENT_CODE.down: {\n          e.preventDefault()\n          const distance = code === EVENT_CODE.up ? -1 : 1\n          focusNode(\n            getSibling(target, distance, '.el-cascader-node[tabindex=\"-1\"]')\n          )\n          break\n        }\n        case EVENT_CODE.left: {\n          e.preventDefault()\n          const preMenu = menuList.value[getMenuIndex(target) - 1]\n          const expandedNode = preMenu?.$el.querySelector(\n            '.el-cascader-node[aria-expanded=\"true\"]'\n          )\n          focusNode(expandedNode)\n          break\n        }\n        case EVENT_CODE.right: {\n          e.preventDefault()\n          const nextMenu = menuList.value[getMenuIndex(target) + 1]\n          const firstNode = nextMenu?.$el.querySelector(\n            '.el-cascader-node[tabindex=\"-1\"]'\n          )\n          focusNode(firstNode)\n          break\n        }\n        case EVENT_CODE.enter:\n          checkNode(target)\n          break\n        case EVENT_CODE.esc:\n        case EVENT_CODE.tab:\n          emit('close')\n          break\n      }\n    }\n\n    provide(\n      CASCADER_PANEL_INJECTION_KEY,\n      reactive({\n        config,\n        expandingNode,\n        checkedNodes,\n        isHoverMenu,\n        renderLabelFn,\n        lazyLoad,\n        expandNode,\n        handleCheckChange,\n      })\n    )\n\n    watch([config, () => props.options], initStore, {\n      deep: true,\n      immediate: true,\n    })\n\n    watch(\n      () => props.modelValue,\n      () => {\n        manualChecked = false\n        syncCheckedValue()\n      }\n    )\n\n    watch(checkedValue, (val) => {\n      if (!isEqual(val, props.modelValue)) {\n        emit(UPDATE_MODEL_EVENT, val)\n        emit(CHANGE_EVENT, val)\n      }\n    })\n\n    onBeforeUpdate(() => (menuList.value = []))\n\n    onMounted(() => !isEmpty(props.modelValue) && syncCheckedValue())\n\n    return {\n      menuList,\n      menus,\n      checkedNodes,\n      handleKeyDown,\n      handleCheckChange,\n      getFlattedNodes,\n      getCheckedNodes,\n      clearCheckedNodes,\n      calculateCheckedValue,\n      scrollToExpandingNode,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;wBACE;;;;;;QAMK,GAAG,EAAE,KAAK;;QACV;aACK,EAAE;QACP;;;;;;"}
+{"version":3,"file":"index.vue_vue_type_template_id_97c48f5c_lang.mjs","sources":["../../../../../../packages/components/cascader-panel/src/index.vue?vue&type=template&id=97c48f5c&lang.js"],"sourcesContent":["<template>\n  <div\n    :class=\"['el-cascader-panel', border && 'is-bordered']\"\n    @keydown=\"handleKeyDown\"\n  >\n    <el-cascader-menu\n      v-for=\"(menu, index) in menus\"\n      :key=\"index\"\n      :ref=\"(item) => (menuList[index] = item)\"\n      :index=\"index\"\n      :nodes=\"menu\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onBeforeUpdate,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport isEqual from 'lodash/isEqual'\nimport { isClient } from '@vueuse/core'\nimport { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport scrollIntoView from '@element-plus/utils/scroll-into-view'\nimport {\n  arrayFlat,\n  coerceTruthyValueToArray,\n  deduplicate,\n  isEmpty,\n} from '@element-plus/utils/util'\n\nimport ElCascaderMenu from './menu.vue'\nimport Store from './store'\nimport Node, { ExpandTrigger } from './node'\nimport { CommonProps, useCascaderConfig } from './config'\nimport { checkNode, getMenuIndex, sortByOriginalOrder } from './utils'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\n\nimport type { PropType } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\nimport type {\n  CascaderValue,\n  CascaderNodeValue,\n  CascaderOption,\n  RenderLabel,\n  default as CascaderNode,\n} from './node'\n\nimport type { ElCascaderPanelContext } from './types'\n\nexport default defineComponent({\n  name: 'ElCascaderPanel',\n\n  components: {\n    ElCascaderMenu,\n  },\n\n  props: {\n    ...CommonProps,\n    border: {\n      type: Boolean,\n      default: true,\n    },\n    renderLabel: Function as PropType<RenderLabel>,\n  },\n\n  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, 'close', 'expand-change'],\n\n  setup(props, { emit, slots }) {\n    // for interrupt sync check status in lazy mode\n    let manualChecked = false\n\n    const config = useCascaderConfig(props)\n\n    let store: Nullable<Store> = null\n    const initialLoaded = ref(true)\n    const menuList = ref<any[]>([])\n    const checkedValue = ref<Nullable<CascaderValue>>(null)\n    const menus = ref<CascaderNode[][]>([])\n    const expandingNode = ref<Nullable<CascaderNode>>(null)\n    const checkedNodes = ref<CascaderNode[]>([])\n\n    const isHoverMenu = computed(\n      () => config.value.expandTrigger === ExpandTrigger.HOVER\n    )\n    const renderLabelFn = computed(() => props.renderLabel || slots.default)\n\n    const initStore = () => {\n      const { options } = props\n      const cfg = config.value\n\n      manualChecked = false\n      store = new Store(options, cfg)\n      menus.value = [store.getNodes()]\n\n      if (cfg.lazy && isEmpty(props.options)) {\n        initialLoaded.value = false\n        lazyLoad(undefined, (list) => {\n          if (list) {\n            store = new Store(list, cfg)\n            menus.value = [store.getNodes()]\n          }\n          initialLoaded.value = true\n          syncCheckedValue(false, true)\n        })\n      } else {\n        syncCheckedValue(false, true)\n      }\n    }\n\n    const lazyLoad: ElCascaderPanelContext['lazyLoad'] = (node, cb) => {\n      const cfg = config.value\n      node! = node || new Node({}, cfg, undefined, true)\n      node.loading = true\n\n      const resolve = (dataList: CascaderOption[]) => {\n        const _node = node as Node\n        const parent = _node.root ? null : _node\n        dataList && store?.appendNodes(dataList, parent as any)\n        _node.loading = false\n        _node.loaded = true\n        _node.childrenData = _node.childrenData || []\n        cb && cb(dataList)\n      }\n\n      cfg.lazyLoad(node, resolve as any)\n    }\n\n    const expandNode: ElCascaderPanelContext['expandNode'] = (node, silent) => {\n      const { level } = node\n      const newMenus = menus.value.slice(0, level)\n      let newExpandingNode: Nullable<CascaderNode>\n\n      if (node.isLeaf) {\n        newExpandingNode = node.pathNodes[level - 2]\n      } else {\n        newExpandingNode = node\n        newMenus.push(node.children)\n      }\n\n      if (expandingNode.value?.uid !== newExpandingNode?.uid) {\n        expandingNode.value = node\n        menus.value = newMenus\n        !silent && emit('expand-change', node?.pathValues || [])\n      }\n    }\n\n    const handleCheckChange: ElCascaderPanelContext['handleCheckChange'] = (\n      node,\n      checked,\n      emitClose = true\n    ) => {\n      const { checkStrictly, multiple } = config.value\n      const oldNode = checkedNodes.value[0]\n      manualChecked = true\n\n      !multiple && oldNode?.doCheck(false)\n      node.doCheck(checked)\n      calculateCheckedValue()\n      emitClose && !multiple && !checkStrictly && emit('close')\n      !emitClose && !multiple && !checkStrictly && expandParentNode(node)\n    }\n\n    const expandParentNode = (node) => {\n      if (!node) return\n      node = node.parent\n      expandParentNode(node)\n      node && expandNode(node)\n    }\n\n    const getFlattedNodes = (leafOnly: boolean) => {\n      return store?.getFlattedNodes(leafOnly)\n    }\n\n    const getCheckedNodes = (leafOnly: boolean) => {\n      return getFlattedNodes(leafOnly)?.filter((node) => node.checked !== false)\n    }\n\n    const clearCheckedNodes = () => {\n      checkedNodes.value.forEach((node) => node.doCheck(false))\n      calculateCheckedValue()\n    }\n\n    const calculateCheckedValue = () => {\n      const { checkStrictly, multiple } = config.value\n      const oldNodes = checkedNodes.value\n      const newNodes = getCheckedNodes(!checkStrictly)!\n      // ensure the original order\n      const nodes = sortByOriginalOrder(oldNodes, newNodes)\n      const values = nodes.map((node) => node.valueByOption)\n      checkedNodes.value = nodes\n      checkedValue.value = multiple ? values : values[0] ?? null\n    }\n\n    const syncCheckedValue = (loaded = false, forced = false) => {\n      const { modelValue } = props\n      const { lazy, multiple, checkStrictly } = config.value\n      const leafOnly = !checkStrictly\n\n      if (\n        !initialLoaded.value ||\n        manualChecked ||\n        (!forced && isEqual(modelValue, checkedValue.value))\n      )\n        return\n\n      if (lazy && !loaded) {\n        const values: CascaderNodeValue[] = deduplicate(\n          arrayFlat(coerceTruthyValueToArray(modelValue))\n        )\n        const nodes = values\n          .map((val) => store?.getNodeByValue(val))\n          .filter((node) => !!node && !node.loaded && !node.loading) as Node[]\n\n        if (nodes.length) {\n          nodes.forEach((node) => {\n            lazyLoad(node, () => syncCheckedValue(false, forced))\n          })\n        } else {\n          syncCheckedValue(true, forced)\n        }\n      } else {\n        const values = multiple\n          ? coerceTruthyValueToArray(modelValue)\n          : [modelValue]\n        const nodes = deduplicate(\n          values.map((val) => store?.getNodeByValue(val, leafOnly))\n        ) as Node[]\n        syncMenuState(nodes, false)\n        checkedValue.value = modelValue!\n      }\n    }\n\n    const syncMenuState = (\n      newCheckedNodes: CascaderNode[],\n      reserveExpandingState = true\n    ) => {\n      const { checkStrictly } = config.value\n      const oldNodes = checkedNodes.value\n      const newNodes = newCheckedNodes.filter(\n        (node) => !!node && (checkStrictly || node.isLeaf)\n      )\n      const oldExpandingNode = store?.getSameNode(expandingNode.value!)\n      const newExpandingNode =\n        (reserveExpandingState && oldExpandingNode) || newNodes[0]\n\n      if (newExpandingNode) {\n        newExpandingNode.pathNodes.forEach((node) => expandNode(node, true))\n      } else {\n        expandingNode.value = null\n      }\n\n      oldNodes.forEach((node) => node.doCheck(false))\n      newNodes.forEach((node) => node.doCheck(true))\n\n      checkedNodes.value = newNodes\n      nextTick(scrollToExpandingNode)\n    }\n\n    const scrollToExpandingNode = () => {\n      if (!isClient) return\n\n      menuList.value.forEach((menu) => {\n        const menuElement = menu?.$el\n        if (menuElement) {\n          const container = menuElement.querySelector('.el-scrollbar__wrap')\n          const activeNode =\n            menuElement.querySelector('.el-cascader-node.is-active') ||\n            menuElement.querySelector('.el-cascader-node.in-active-path')\n          scrollIntoView(container, activeNode)\n        }\n      })\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const target = e.target as HTMLElement\n      const { code } = e\n\n      switch (code) {\n        case EVENT_CODE.up:\n        case EVENT_CODE.down: {\n          e.preventDefault()\n          const distance = code === EVENT_CODE.up ? -1 : 1\n          focusNode(\n            getSibling(target, distance, '.el-cascader-node[tabindex=\"-1\"]')\n          )\n          break\n        }\n        case EVENT_CODE.left: {\n          e.preventDefault()\n          const preMenu = menuList.value[getMenuIndex(target) - 1]\n          const expandedNode = preMenu?.$el.querySelector(\n            '.el-cascader-node[aria-expanded=\"true\"]'\n          )\n          focusNode(expandedNode)\n          break\n        }\n        case EVENT_CODE.right: {\n          e.preventDefault()\n          const nextMenu = menuList.value[getMenuIndex(target) + 1]\n          const firstNode = nextMenu?.$el.querySelector(\n            '.el-cascader-node[tabindex=\"-1\"]'\n          )\n          focusNode(firstNode)\n          break\n        }\n        case EVENT_CODE.enter:\n          checkNode(target)\n          break\n        case EVENT_CODE.esc:\n        case EVENT_CODE.tab:\n          emit('close')\n          break\n      }\n    }\n\n    provide(\n      CASCADER_PANEL_INJECTION_KEY,\n      reactive({\n        config,\n        expandingNode,\n        checkedNodes,\n        isHoverMenu,\n        initialLoaded,\n        renderLabelFn,\n        lazyLoad,\n        expandNode,\n        handleCheckChange,\n      })\n    )\n\n    watch([config, () => props.options], initStore, {\n      deep: true,\n      immediate: true,\n    })\n\n    watch(\n      () => props.modelValue,\n      () => {\n        manualChecked = false\n        syncCheckedValue()\n      }\n    )\n\n    watch(checkedValue, (val) => {\n      if (!isEqual(val, props.modelValue)) {\n        emit(UPDATE_MODEL_EVENT, val)\n        emit(CHANGE_EVENT, val)\n      }\n    })\n\n    onBeforeUpdate(() => (menuList.value = []))\n\n    onMounted(() => !isEmpty(props.modelValue) && syncCheckedValue())\n\n    return {\n      menuList,\n      menus,\n      checkedNodes,\n      handleKeyDown,\n      handleCheckChange,\n      getFlattedNodes,\n      getCheckedNodes,\n      clearCheckedNodes,\n      calculateCheckedValue,\n      scrollToExpandingNode,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;wBACE;;;;;;QAMK,GAAG,EAAE,KAAK;;QACV;aACK,EAAE;QACP;;;;;;"}

package/es/components/cascader-panel/src/menu.vue.d.ts

@@ -13,6 +13,7 @@ declare const _default: import("vue").DefineComponent<{
     panel: import("./types").ElCascaderPanelContext;
     hoverZone: import("vue").Ref<SVGSVGElement | null>;
     isEmpty: import("vue").ComputedRef<boolean>;
+    isLoading: import("vue").ComputedRef<boolean>;
     menuId: import("vue").ComputedRef<string>;
     t: import("element-plus/es/hooks").Translator;
     handleExpand: (e: MouseEvent) => void;

package/es/components/cascader-panel/src/menu.vue_vue_type_script_lang.mjs

@@ -2,6 +2,8 @@ import { defineComponent, getCurrentInstance, inject, ref, computed } from 'vue'
 import { ElScrollbar } from '../../scrollbar/index.mjs';
 import '../../../hooks/index.mjs';
 import { generateId } from '../../../utils/util.mjs';
+import { Loading } from '@element-plus/icons-vue';
+import { ElIcon } from '../../icon/index.mjs';
 import './node2.mjs';
 import { CASCADER_PANEL_INJECTION_KEY } from './types.mjs';
 import script$1 from './node.vue_vue_type_script_lang.mjs';
@@ -10,6 +12,8 @@ import { useLocale } from '../../../hooks/use-locale/index.mjs';
 var script = defineComponent({
   name: "ElCascaderMenu",
   components: {
+    Loading,
+    ElIcon,
     ElScrollbar,
     ElCascaderNode: script$1
   },
@@ -32,6 +36,7 @@ var script = defineComponent({
     const panel = inject(CASCADER_PANEL_INJECTION_KEY);
     const hoverZone = ref(null);
     const isEmpty = computed(() => !props.nodes.length);
+    const isLoading = computed(() => !panel.initialLoaded);
     const menuId = computed(() => `cascader-menu-${id}-${props.index}`);
     const handleExpand = (e) => {
       activeNode = e.target;
@@ -71,6 +76,7 @@ var script = defineComponent({
       panel,
       hoverZone,
       isEmpty,
+      isLoading,
       menuId,
       t,
       handleExpand,

package/es/components/cascader-panel/src/menu.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"menu.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/cascader-panel/src/menu.vue"],"sourcesContent":["<template>\n  <el-scrollbar\n    :key=\"menuId\"\n    tag=\"ul\"\n    role=\"menu\"\n    class=\"el-cascader-menu\"\n    wrap-class=\"el-cascader-menu__wrap\"\n    :view-class=\"['el-cascader-menu__list', isEmpty && 'is-empty']\"\n    @mousemove=\"handleMouseMove\"\n    @mouseleave=\"clearHoverZone\"\n  >\n    <el-cascader-node\n      v-for=\"node in nodes\"\n      :key=\"node.uid\"\n      :node=\"node\"\n      :menu-id=\"menuId\"\n      @expand=\"handleExpand\"\n    />\n    <div v-if=\"isEmpty\" class=\"el-cascader-menu__empty-text\">\n      {{ t('el.cascader.noData') }}\n    </div>\n    <svg\n      v-else-if=\"panel?.isHoverMenu\"\n      ref=\"hoverZone\"\n      class=\"el-cascader-menu__hover-zone\"\n    ></svg>\n  </el-scrollbar>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, getCurrentInstance, inject, ref } from 'vue'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport { useLocale } from '@element-plus/hooks'\nimport { generateId } from '@element-plus/utils/util'\nimport ElCascaderNode from './node.vue'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\nimport type { default as CascaderNode } from './node'\n\nimport type { PropType } from 'vue'\nimport type { TimeoutHandle, Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  name: 'ElCascaderMenu',\n\n  components: {\n    ElScrollbar,\n    ElCascaderNode,\n  },\n\n  props: {\n    nodes: {\n      type: Array as PropType<CascaderNode[]>,\n      required: true,\n    },\n    index: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  setup(props) {\n    const instance = getCurrentInstance()!\n    const { t } = useLocale()\n    const id = generateId()\n    let activeNode: Nullable<HTMLElement> = null\n    let hoverTimer: Nullable<TimeoutHandle> = null\n\n    const panel = inject(CASCADER_PANEL_INJECTION_KEY)!\n\n    const hoverZone = ref<null | SVGSVGElement>(null)\n\n    const isEmpty = computed(() => !props.nodes.length)\n    const menuId = computed(() => `cascader-menu-${id}-${props.index}`)\n\n    const handleExpand = (e: MouseEvent) => {\n      activeNode = e.target as HTMLElement\n    }\n\n    const handleMouseMove = (e: MouseEvent) => {\n      if (!panel.isHoverMenu || !activeNode || !hoverZone.value) return\n\n      if (activeNode.contains(e.target as HTMLElement)) {\n        clearHoverTimer()\n\n        const el = instance.vnode.el as HTMLElement\n        const { left } = el.getBoundingClientRect()\n        const { offsetWidth, offsetHeight } = el\n        const startX = e.clientX - left\n        const top = activeNode.offsetTop\n        const bottom = top + activeNode.offsetHeight\n\n        hoverZone.value.innerHTML = `\n          <path style=\"pointer-events: auto;\" fill=\"transparent\" d=\"M${startX} ${top} L${offsetWidth} 0 V${top} Z\" />\n          <path style=\"pointer-events: auto;\" fill=\"transparent\" d=\"M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z\" />\n        `\n      } else if (!hoverTimer) {\n        hoverTimer = window.setTimeout(\n          clearHoverZone,\n          panel.config.hoverThreshold\n        )\n      }\n    }\n\n    const clearHoverTimer = () => {\n      if (!hoverTimer) return\n      clearTimeout(hoverTimer)\n      hoverTimer = null\n    }\n\n    const clearHoverZone = () => {\n      if (!hoverZone.value) return\n      hoverZone.value.innerHTML = ''\n      clearHoverTimer()\n    }\n\n    return {\n      panel,\n      hoverZone,\n      isEmpty,\n      menuId,\n      t,\n      handleExpand,\n      handleMouseMove,\n      clearHoverZone,\n    }\n  },\n})\n</script>\n"],"names":["ElCascaderNode"],"mappings":";;;;;;;;;AAmCA,aAAe,eAAe,CAAC;AAC/B,EAAE,MAAM;;AAER,IAAI,WAAW;AACf,oBAAIA,QAAc;;AAElB,EAAE,KAAK,EAAE;IACL,KAAK,EAAE;;MAEL,QAAQ;KACT;IACD,KAAK,EAAE;;;KAGN;;OAEE,CAAC,KAAK,EAAE;UACL,QAAQ;IACd;IACA;QACI,UAAU;QACV,UAAU;IACd;;;IAGA,MAAM;IACN,MAAM,YAAY,GAAG,CAAC,CAAC,KAAK;MAC1B,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC;KACvB,CAAC;IACF,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK;MAC7B,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,CAAC,cAAc,CAAC;;MAE1C,IAAI,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE;;QAEjC,MAAM,EAAE,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC;;QAE7B,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC;QACzC,MAAM,MAAM,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;;QAEhC,MAAM,MAAM,GAAG,GAAG,GAAG,UAAU;QAC/B,SAAS,MAAM,CAAC,SAAS,GAAG,CAAC;;;QAG7B,EAAE;OACH,MAAM,IAAI,CAAC,YAAY;;OAEvB;;;UAGG,CAAC,UAAU;QACb;kBACU,CAAC,UAAU,CAAC,CAAC;gBACf,GAAG,IAAI,CAAC;;UAEd,cAAc,GAAG,MAAM;;QAEzB,OAAO;gBACC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;qBAChB,EAAE,CAAC;;WAEb;WACA;eACI;aACF;;MAEP;;;MAGA,cAAc;MACd;;;;;;"}
+{"version":3,"file":"menu.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/cascader-panel/src/menu.vue"],"sourcesContent":["<template>\n  <el-scrollbar\n    :key=\"menuId\"\n    tag=\"ul\"\n    role=\"menu\"\n    class=\"el-cascader-menu\"\n    wrap-class=\"el-cascader-menu__wrap\"\n    :view-class=\"['el-cascader-menu__list', isEmpty && 'is-empty']\"\n    @mousemove=\"handleMouseMove\"\n    @mouseleave=\"clearHoverZone\"\n  >\n    <el-cascader-node\n      v-for=\"node in nodes\"\n      :key=\"node.uid\"\n      :node=\"node\"\n      :menu-id=\"menuId\"\n      @expand=\"handleExpand\"\n    />\n    <div v-if=\"isLoading\" class=\"el-cascader-menu__empty-text\">\n      <el-icon size=\"14\" class=\"is-loading\">\n        <loading />\n      </el-icon>\n      {{ t('el.cascader.loading') }}\n    </div>\n    <div v-else-if=\"isEmpty\" class=\"el-cascader-menu__empty-text\">\n      {{ t('el.cascader.noData') }}\n    </div>\n    <svg\n      v-else-if=\"panel?.isHoverMenu\"\n      ref=\"hoverZone\"\n      class=\"el-cascader-menu__hover-zone\"\n    ></svg>\n  </el-scrollbar>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, getCurrentInstance, inject, ref } from 'vue'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport { useLocale } from '@element-plus/hooks'\nimport { generateId } from '@element-plus/utils/util'\nimport { Loading } from '@element-plus/icons-vue'\nimport ElIcon from '@element-plus/components/icon'\nimport ElCascaderNode from './node.vue'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\n\nimport type { default as CascaderNode } from './node'\nimport type { PropType } from 'vue'\nimport type { TimeoutHandle, Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  name: 'ElCascaderMenu',\n\n  components: {\n    Loading,\n    ElIcon,\n    ElScrollbar,\n    ElCascaderNode,\n  },\n\n  props: {\n    nodes: {\n      type: Array as PropType<CascaderNode[]>,\n      required: true,\n    },\n    index: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  setup(props) {\n    const instance = getCurrentInstance()!\n    const { t } = useLocale()\n    const id = generateId()\n    let activeNode: Nullable<HTMLElement> = null\n    let hoverTimer: Nullable<TimeoutHandle> = null\n\n    const panel = inject(CASCADER_PANEL_INJECTION_KEY)!\n\n    const hoverZone = ref<null | SVGSVGElement>(null)\n\n    const isEmpty = computed(() => !props.nodes.length)\n    const isLoading = computed(() => !panel.initialLoaded)\n    const menuId = computed(() => `cascader-menu-${id}-${props.index}`)\n\n    const handleExpand = (e: MouseEvent) => {\n      activeNode = e.target as HTMLElement\n    }\n\n    const handleMouseMove = (e: MouseEvent) => {\n      if (!panel.isHoverMenu || !activeNode || !hoverZone.value) return\n\n      if (activeNode.contains(e.target as HTMLElement)) {\n        clearHoverTimer()\n\n        const el = instance.vnode.el as HTMLElement\n        const { left } = el.getBoundingClientRect()\n        const { offsetWidth, offsetHeight } = el\n        const startX = e.clientX - left\n        const top = activeNode.offsetTop\n        const bottom = top + activeNode.offsetHeight\n\n        hoverZone.value.innerHTML = `\n          <path style=\"pointer-events: auto;\" fill=\"transparent\" d=\"M${startX} ${top} L${offsetWidth} 0 V${top} Z\" />\n          <path style=\"pointer-events: auto;\" fill=\"transparent\" d=\"M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z\" />\n        `\n      } else if (!hoverTimer) {\n        hoverTimer = window.setTimeout(\n          clearHoverZone,\n          panel.config.hoverThreshold\n        )\n      }\n    }\n\n    const clearHoverTimer = () => {\n      if (!hoverTimer) return\n      clearTimeout(hoverTimer)\n      hoverTimer = null\n    }\n\n    const clearHoverZone = () => {\n      if (!hoverZone.value) return\n      hoverZone.value.innerHTML = ''\n      clearHoverTimer()\n    }\n    return {\n      panel,\n      hoverZone,\n      isEmpty,\n      isLoading,\n      menuId,\n      t,\n      handleExpand,\n      handleMouseMove,\n      clearHoverZone,\n    }\n  },\n})\n</script>\n"],"names":["ElCascaderNode"],"mappings":";;;;;;;;;;;AA2CA,aAAe,eAAe,CAAC;;AAE/B,EAAE,UAAU,EAAE;AACd,IAAI;AACJ,IAAI,MAAM;;AAEV,oBAAIA,QAAc;GACf;;IAEC,KAAK,EAAE;MACL,IAAI;MACJ;KACD;IACD,KAAK,EAAE;;;KAGN;;OAEE,CAAC,KAAK,EAAE;UACL,QAAQ;IACd;IACA;QACI,UAAU;QACV,UAAU;IACd;;;IAGA,MAAM;IACN,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC;IAC/B,MAAM,YAAY,GAAG,CAAC,CAAC;MACrB,UAAU,GAAG,CAAC,CAAC;KAChB,CAAC;IACF,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK;;QAE3B;;QAEA,eAAe,EAAE,CAAC;;QAElB,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;QAC5C,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC;QACzC,MAAM,MAAM,GAAG,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;;QAEhC,MAAM,MAAM,GAAG,GAAG,GAAG,UAAU;QAC/B,SAAS,MAAM,CAAC,SAAS,GAAG,CAAC;;;QAG7B,EAAE;OACH,MAAM,IAAI,CAAC,YAAY;;OAEvB;;;UAGG,CAAC,UAAU;QACb;kBACU,CAAC,UAAU,CAAC,CAAC;gBACf,GAAG,IAAI,CAAC;;UAEd,cAAc,GAAG,MAAM;;QAEzB,OAAO;gBACC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC;qBAChB,EAAE,CAAC;;WAEb;WACA;eACI;aACF;;MAEP;;;MAGA,eAAe;MACf,cAAc;MACd;;;;;;"}

package/es/components/cascader-panel/src/menu.vue_vue_type_template_id_9c79e4e2_lang.mjs

@@ -1,4 +1,4 @@
-import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, toDisplayString, createCommentVNode } from 'vue';
+import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, createVNode, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 
 const _hoisted_1 = {
   key: 0,
@@ -6,11 +6,17 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = {
   key: 1,
+  class: "el-cascader-menu__empty-text"
+};
+const _hoisted_3 = {
+  key: 2,
   ref: "hoverZone",
   class: "el-cascader-menu__hover-zone"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_cascader_node = resolveComponent("el-cascader-node");
+  const _component_loading = resolveComponent("loading");
+  const _component_el_icon = resolveComponent("el-icon");
   const _component_el_scrollbar = resolveComponent("el-scrollbar");
   return openBlock(), createBlock(_component_el_scrollbar, {
     key: _ctx.menuId,
@@ -33,7 +39,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             onExpand: _ctx.handleExpand
           }, null, 8, ["node", "menu-id", "onExpand"]);
         }), 128)),
-        _ctx.isEmpty ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(_ctx.t("el.cascader.noData")), 1)) : ((_a = _ctx.panel) == null ? void 0 : _a.isHoverMenu) ? (openBlock(), createElementBlock("svg", _hoisted_2, null, 512)) : createCommentVNode("v-if", true)
+        _ctx.isLoading ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createVNode(_component_el_icon, {
+            size: "14",
+            class: "is-loading"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_loading)
+            ]),
+            _: 1
+          }),
+          createTextVNode(" " + toDisplayString(_ctx.t("el.cascader.loading")), 1)
+        ])) : _ctx.isEmpty ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(_ctx.t("el.cascader.noData")), 1)) : ((_a = _ctx.panel) == null ? void 0 : _a.isHoverMenu) ? (openBlock(), createElementBlock("svg", _hoisted_3, null, 512)) : createCommentVNode("v-if", true)
       ];
     }),
     _: 1

package/es/components/cascader-panel/src/menu.vue_vue_type_template_id_9c79e4e2_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"menu.vue_vue_type_template_id_9c79e4e2_lang.mjs","sources":["../../../../../../packages/components/cascader-panel/src/menu.vue?vue&type=template&id=9c79e4e2&lang.js"],"sourcesContent":["<template>\n  <el-scrollbar\n    :key=\"menuId\"\n    tag=\"ul\"\n    role=\"menu\"\n    class=\"el-cascader-menu\"\n    wrap-class=\"el-cascader-menu__wrap\"\n    :view-class=\"['el-cascader-menu__list', isEmpty && 'is-empty']\"\n    @mousemove=\"handleMouseMove\"\n    @mouseleave=\"clearHoverZone\"\n  >\n    <el-cascader-node\n      v-for=\"node in nodes\"\n      :key=\"node.uid\"\n      :node=\"node\"\n      :menu-id=\"menuId\"\n      @expand=\"handleExpand\"\n    />\n    <div v-if=\"isEmpty\" class=\"el-cascader-menu__empty-text\">\n      {{ t('el.cascader.noData') }}\n    </div>\n    <svg\n      v-else-if=\"panel?.isHoverMenu\"\n      ref=\"hoverZone\"\n      class=\"el-cascader-menu__hover-zone\"\n    ></svg>\n  </el-scrollbar>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, getCurrentInstance, inject, ref } from 'vue'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport { useLocale } from '@element-plus/hooks'\nimport { generateId } from '@element-plus/utils/util'\nimport ElCascaderNode from './node.vue'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\nimport type { default as CascaderNode } from './node'\n\nimport type { PropType } from 'vue'\nimport type { TimeoutHandle, Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  name: 'ElCascaderMenu',\n\n  components: {\n    ElScrollbar,\n    ElCascaderNode,\n  },\n\n  props: {\n    nodes: {\n      type: Array as PropType<CascaderNode[]>,\n      required: true,\n    },\n    index: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  setup(props) {\n    const instance = getCurrentInstance()!\n    const { t } = useLocale()\n    const id = generateId()\n    let activeNode: Nullable<HTMLElement> = null\n    let hoverTimer: Nullable<TimeoutHandle> = null\n\n    const panel = inject(CASCADER_PANEL_INJECTION_KEY)!\n\n    const hoverZone = ref<null | SVGSVGElement>(null)\n\n    const isEmpty = computed(() => !props.nodes.length)\n    const menuId = computed(() => `cascader-menu-${id}-${props.index}`)\n\n    const handleExpand = (e: MouseEvent) => {\n      activeNode = e.target as HTMLElement\n    }\n\n    const handleMouseMove = (e: MouseEvent) => {\n      if (!panel.isHoverMenu || !activeNode || !hoverZone.value) return\n\n      if (activeNode.contains(e.target as HTMLElement)) {\n        clearHoverTimer()\n\n        const el = instance.vnode.el as HTMLElement\n        const { left } = el.getBoundingClientRect()\n        const { offsetWidth, offsetHeight } = el\n        const startX = e.clientX - left\n        const top = activeNode.offsetTop\n        const bottom = top + activeNode.offsetHeight\n\n        hoverZone.value.innerHTML = `\n          <path style=\"pointer-events: auto;\" fill=\"transparent\" d=\"M${startX} ${top} L${offsetWidth} 0 V${top} Z\" />\n          <path style=\"pointer-events: auto;\" fill=\"transparent\" d=\"M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z\" />\n        `\n      } else if (!hoverTimer) {\n        hoverTimer = window.setTimeout(\n          clearHoverZone,\n          panel.config.hoverThreshold\n        )\n      }\n    }\n\n    const clearHoverTimer = () => {\n      if (!hoverTimer) return\n      clearTimeout(hoverTimer)\n      hoverTimer = null\n    }\n\n    const clearHoverZone = () => {\n      if (!hoverZone.value) return\n      hoverZone.value.innerHTML = ''\n      clearHoverTimer()\n    }\n\n    return {\n      panel,\n      hoverZone,\n      isEmpty,\n      menuId,\n      t,\n      handleExpand,\n      handleMouseMove,\n      clearHoverZone,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;EAkBwB;;;;EAKlB,KAAI;EACJ;;;;;;;;IAtBD,KAAK;IACN;IACA;IACA;IACA,YAAU,EAAC;;IAEV;;;;;;;;;oBAQU;;;OAEA;;;sDAGX;;;;;"}
+{"version":3,"file":"menu.vue_vue_type_template_id_9c79e4e2_lang.mjs","sources":["../../../../../../packages/components/cascader-panel/src/menu.vue?vue&type=template&id=9c79e4e2&lang.js"],"sourcesContent":["<template>\n  <el-scrollbar\n    :key=\"menuId\"\n    tag=\"ul\"\n    role=\"menu\"\n    class=\"el-cascader-menu\"\n    wrap-class=\"el-cascader-menu__wrap\"\n    :view-class=\"['el-cascader-menu__list', isEmpty && 'is-empty']\"\n    @mousemove=\"handleMouseMove\"\n    @mouseleave=\"clearHoverZone\"\n  >\n    <el-cascader-node\n      v-for=\"node in nodes\"\n      :key=\"node.uid\"\n      :node=\"node\"\n      :menu-id=\"menuId\"\n      @expand=\"handleExpand\"\n    />\n    <div v-if=\"isLoading\" class=\"el-cascader-menu__empty-text\">\n      <el-icon size=\"14\" class=\"is-loading\">\n        <loading />\n      </el-icon>\n      {{ t('el.cascader.loading') }}\n    </div>\n    <div v-else-if=\"isEmpty\" class=\"el-cascader-menu__empty-text\">\n      {{ t('el.cascader.noData') }}\n    </div>\n    <svg\n      v-else-if=\"panel?.isHoverMenu\"\n      ref=\"hoverZone\"\n      class=\"el-cascader-menu__hover-zone\"\n    ></svg>\n  </el-scrollbar>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, getCurrentInstance, inject, ref } from 'vue'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport { useLocale } from '@element-plus/hooks'\nimport { generateId } from '@element-plus/utils/util'\nimport { Loading } from '@element-plus/icons-vue'\nimport ElIcon from '@element-plus/components/icon'\nimport ElCascaderNode from './node.vue'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\n\nimport type { default as CascaderNode } from './node'\nimport type { PropType } from 'vue'\nimport type { TimeoutHandle, Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  name: 'ElCascaderMenu',\n\n  components: {\n    Loading,\n    ElIcon,\n    ElScrollbar,\n    ElCascaderNode,\n  },\n\n  props: {\n    nodes: {\n      type: Array as PropType<CascaderNode[]>,\n      required: true,\n    },\n    index: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  setup(props) {\n    const instance = getCurrentInstance()!\n    const { t } = useLocale()\n    const id = generateId()\n    let activeNode: Nullable<HTMLElement> = null\n    let hoverTimer: Nullable<TimeoutHandle> = null\n\n    const panel = inject(CASCADER_PANEL_INJECTION_KEY)!\n\n    const hoverZone = ref<null | SVGSVGElement>(null)\n\n    const isEmpty = computed(() => !props.nodes.length)\n    const isLoading = computed(() => !panel.initialLoaded)\n    const menuId = computed(() => `cascader-menu-${id}-${props.index}`)\n\n    const handleExpand = (e: MouseEvent) => {\n      activeNode = e.target as HTMLElement\n    }\n\n    const handleMouseMove = (e: MouseEvent) => {\n      if (!panel.isHoverMenu || !activeNode || !hoverZone.value) return\n\n      if (activeNode.contains(e.target as HTMLElement)) {\n        clearHoverTimer()\n\n        const el = instance.vnode.el as HTMLElement\n        const { left } = el.getBoundingClientRect()\n        const { offsetWidth, offsetHeight } = el\n        const startX = e.clientX - left\n        const top = activeNode.offsetTop\n        const bottom = top + activeNode.offsetHeight\n\n        hoverZone.value.innerHTML = `\n          <path style=\"pointer-events: auto;\" fill=\"transparent\" d=\"M${startX} ${top} L${offsetWidth} 0 V${top} Z\" />\n          <path style=\"pointer-events: auto;\" fill=\"transparent\" d=\"M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z\" />\n        `\n      } else if (!hoverTimer) {\n        hoverTimer = window.setTimeout(\n          clearHoverZone,\n          panel.config.hoverThreshold\n        )\n      }\n    }\n\n    const clearHoverTimer = () => {\n      if (!hoverTimer) return\n      clearTimeout(hoverTimer)\n      hoverTimer = null\n    }\n\n    const clearHoverZone = () => {\n      if (!hoverZone.value) return\n      hoverZone.value.innerHTML = ''\n      clearHoverTimer()\n    }\n    return {\n      panel,\n      hoverZone,\n      isEmpty,\n      isLoading,\n      menuId,\n      t,\n      handleExpand,\n      handleMouseMove,\n      clearHoverZone,\n    }\n  },\n})\n</script>\n"],"names":["_withCtx"],"mappings":";;;;;EAkB0B;;;;EAMG;;;;EAKvB,KAAI;EACJ;;;;;;;;;;IA5BD,KAAK;IACN;IACA;IACA;IACA,YAAU,EAAC;;IAEV;;;;;;;;;oBAQU;;;;;YAGT;;mBAAwB,EAACA;;;gBACvB;;;;;;;sDAIJ;;;;;"}

package/es/components/cascader-panel/src/types.d.ts

@@ -51,6 +51,7 @@ export interface ElCascaderPanelContext {
     expandingNode: Nullable<CascaderNode>;
     checkedNodes: CascaderNode[];
     isHoverMenu: boolean;
+    initialLoaded: boolean;
     renderLabelFn: RenderLabel;
     lazyLoad: (node?: CascaderNode, cb?: (dataList: CascaderOption[]) => void) => void;
     expandNode: (node: CascaderNode, silent?: boolean) => void;

package/es/components/cascader-panel/src/types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.mjs","sources":["../../../../../../packages/components/cascader-panel/src/types.ts"],"sourcesContent":["import type { VNode, InjectionKey } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\nimport type { default as CascaderNode } from './node'\n\nexport type { CascaderNode }\n\nexport type CascaderNodeValue = string | number\nexport type CascaderNodePathValue = CascaderNodeValue[]\nexport type CascaderValue =\n  | CascaderNodeValue\n  | CascaderNodePathValue\n  | (CascaderNodeValue | CascaderNodePathValue)[]\nexport type CascaderConfig = Required<CascaderProps>\nexport type isDisabled = (data: CascaderOption, node: CascaderNode) => boolean\nexport type isLeaf = (data: CascaderOption, node: CascaderNode) => boolean\nexport type Resolve = (dataList?: CascaderOption[]) => void\nexport type LazyLoad = (node: CascaderNode, resolve: Resolve) => void\nexport type RenderLabel = ({\n  node: CascaderNode,\n  data: CascaderOption,\n}) => VNode | VNode[]\n\nexport enum ExpandTrigger {\n  CLICK = 'click',\n  HOVER = 'hover',\n}\n\nexport interface CascaderOption extends Record<string, unknown> {\n  label?: string\n  value?: CascaderNodeValue\n  children?: CascaderOption[]\n  disabled?: boolean\n  leaf?: boolean\n}\n\nexport interface CascaderProps {\n  expandTrigger?: ExpandTrigger\n  multiple?: boolean\n  checkStrictly?: boolean\n  emitPath?: boolean\n  lazy?: boolean\n  lazyLoad?: LazyLoad\n  value?: string\n  label?: string\n  children?: string\n  disabled?: string | isDisabled\n  leaf?: string | isLeaf\n  hoverThreshold?: number\n}\n\nexport interface Tag {\n  node?: CascaderNode\n  key: number\n  text: string\n  hitState?: boolean\n  closable: boolean\n}\n\nexport interface ElCascaderPanelContext {\n  config: CascaderConfig\n  expandingNode: Nullable<CascaderNode>\n  checkedNodes: CascaderNode[]\n  isHoverMenu: boolean\n  renderLabelFn: RenderLabel\n  lazyLoad: (\n    node?: CascaderNode,\n    cb?: (dataList: CascaderOption[]) => void\n  ) => void\n  expandNode: (node: CascaderNode, silent?: boolean) => void\n  handleCheckChange: (\n    node: CascaderNode,\n    checked: boolean,\n    emitClose?: boolean\n  ) => void\n}\n\nexport const CASCADER_PANEL_INJECTION_KEY: InjectionKey<ElCascaderPanelContext> =\n  Symbol()\n"],"names":[],"mappings":"AAAU,IAAC,aAAa,mBAAmB,CAAC,CAAC,cAAc,KAAK;AAChE,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;AACpC,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;AACpC,EAAE,OAAO,cAAc,CAAC;AACxB,CAAC,EAAE,aAAa,IAAI,EAAE,EAAE;AACZ,MAAC,4BAA4B,GAAG,MAAM;;;;"}
+{"version":3,"file":"types.mjs","sources":["../../../../../../packages/components/cascader-panel/src/types.ts"],"sourcesContent":["import type { VNode, InjectionKey } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\nimport type { default as CascaderNode } from './node'\n\nexport type { CascaderNode }\n\nexport type CascaderNodeValue = string | number\nexport type CascaderNodePathValue = CascaderNodeValue[]\nexport type CascaderValue =\n  | CascaderNodeValue\n  | CascaderNodePathValue\n  | (CascaderNodeValue | CascaderNodePathValue)[]\nexport type CascaderConfig = Required<CascaderProps>\nexport type isDisabled = (data: CascaderOption, node: CascaderNode) => boolean\nexport type isLeaf = (data: CascaderOption, node: CascaderNode) => boolean\nexport type Resolve = (dataList?: CascaderOption[]) => void\nexport type LazyLoad = (node: CascaderNode, resolve: Resolve) => void\nexport type RenderLabel = ({\n  node: CascaderNode,\n  data: CascaderOption,\n}) => VNode | VNode[]\n\nexport enum ExpandTrigger {\n  CLICK = 'click',\n  HOVER = 'hover',\n}\n\nexport interface CascaderOption extends Record<string, unknown> {\n  label?: string\n  value?: CascaderNodeValue\n  children?: CascaderOption[]\n  disabled?: boolean\n  leaf?: boolean\n}\n\nexport interface CascaderProps {\n  expandTrigger?: ExpandTrigger\n  multiple?: boolean\n  checkStrictly?: boolean\n  emitPath?: boolean\n  lazy?: boolean\n  lazyLoad?: LazyLoad\n  value?: string\n  label?: string\n  children?: string\n  disabled?: string | isDisabled\n  leaf?: string | isLeaf\n  hoverThreshold?: number\n}\n\nexport interface Tag {\n  node?: CascaderNode\n  key: number\n  text: string\n  hitState?: boolean\n  closable: boolean\n}\n\nexport interface ElCascaderPanelContext {\n  config: CascaderConfig\n  expandingNode: Nullable<CascaderNode>\n  checkedNodes: CascaderNode[]\n  isHoverMenu: boolean\n  initialLoaded: boolean\n  renderLabelFn: RenderLabel\n  lazyLoad: (\n    node?: CascaderNode,\n    cb?: (dataList: CascaderOption[]) => void\n  ) => void\n  expandNode: (node: CascaderNode, silent?: boolean) => void\n  handleCheckChange: (\n    node: CascaderNode,\n    checked: boolean,\n    emitClose?: boolean\n  ) => void\n}\n\nexport const CASCADER_PANEL_INJECTION_KEY: InjectionKey<ElCascaderPanelContext> =\n  Symbol()\n"],"names":[],"mappings":"AAAU,IAAC,aAAa,mBAAmB,CAAC,CAAC,cAAc,KAAK;AAChE,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;AACpC,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;AACpC,EAAE,OAAO,cAAc,CAAC;AACxB,CAAC,EAAE,aAAa,IAAI,EAAE,EAAE;AACZ,MAAC,4BAA4B,GAAG,MAAM;;;;"}

package/es/components/checkbox/index.d.ts

@@ -64,9 +64,9 @@ export declare const ElCheckbox: import("../../utils/types").SFCWithInstall<impo
     checked: boolean;
 } & {
     size?: import("../../utils/types").ComponentSize | undefined;
-    name?: string | undefined;
     modelValue?: string | number | boolean | undefined;
     label?: string | number | boolean | Record<string, any> | undefined;
+    name?: string | undefined;
     id?: string | undefined;
     tabindex?: string | number | undefined;
     trueLabel?: string | number | undefined;
@@ -77,8 +77,8 @@ export declare const ElCheckbox: import("../../utils/types").SFCWithInstall<impo
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
-    name: string;
     modelValue: string | number | boolean;
+    name: string;
     border: boolean;
     id: string;
     indeterminate: boolean;
@@ -142,9 +142,9 @@ export declare const ElCheckbox: import("../../utils/types").SFCWithInstall<impo
         checked: boolean;
     } & {
         size?: string | undefined;
-        name?: string | undefined;
         modelValue?: string | number | boolean | undefined;
         label?: string | number | boolean | Record<string, any> | undefined;
+        name?: string | undefined;
         tabindex?: string | number | undefined;
         trueLabel?: string | number | undefined;
         falseLabel?: string | number | undefined;
@@ -153,8 +153,8 @@ export declare const ElCheckbox: import("../../utils/types").SFCWithInstall<impo
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     }, {
         disabled: boolean;
-        name: string;
         modelValue: string | number | boolean;
+        name: string;
         indeterminate: boolean;
         checked: boolean;
         trueLabel: string | number;
@@ -280,9 +280,9 @@ export declare const ElCheckboxButton: import("../../utils/types").SFCWithInstal
     checked: boolean;
 } & {
     size?: string | undefined;
-    name?: string | undefined;
     modelValue?: string | number | boolean | undefined;
     label?: string | number | boolean | Record<string, any> | undefined;
+    name?: string | undefined;
     tabindex?: string | number | undefined;
     trueLabel?: string | number | undefined;
     falseLabel?: string | number | undefined;
@@ -291,8 +291,8 @@ export declare const ElCheckboxButton: import("../../utils/types").SFCWithInstal
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
-    name: string;
     modelValue: string | number | boolean;
+    name: string;
     indeterminate: boolean;
     checked: boolean;
     trueLabel: string | number;