@element-plus/nightly 0.0.20220102 → 0.0.20220106

package/lib/components/cascader/src/index.vue_vue_type_script_lang.js

@@ -8,7 +8,7 @@ var debounce = require('lodash/debounce');
 var core = require('@vueuse/core');
 var index = require('../../cascader-panel/index.js');
 var index$1 = require('../../input/index.js');
-var index$2 = require('../../popper/index.js');
+var index$2 = require('../../tooltip/index.js');
 var index$3 = require('../../scrollbar/index.js');
 var index$4 = require('../../tag/index.js');
 var index$5 = require('../../icon/index.js');
@@ -26,7 +26,6 @@ var config = require('../../cascader-panel/src/config.js');
 var index$7 = require('../../../hooks/use-locale/index.js');
 var form = require('../../../tokens/form.js');
 var index$8 = require('../../../hooks/use-common-props/index.js');
-var defaults = require('../../popper/src/use-popper/defaults.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -59,7 +58,7 @@ var script = vue.defineComponent({
   components: {
     ElCascaderPanel: index["default"],
     ElInput: index$1.ElInput,
-    ElPopper: index$2["default"],
+    ElTooltip: index$2.ElTooltip,
     ElScrollbar: index$3.ElScrollbar,
     ElTag: index$4.ElTag,
     ElIcon: index$5.ElIcon,
@@ -127,7 +126,7 @@ var script = vue.defineComponent({
     const { t } = index$7.useLocale();
     const elForm = vue.inject(form.elFormKey, {});
     const elFormItem = vue.inject(form.elFormItemKey, {});
-    const popper = vue.ref(null);
+    const tooltipRef = vue.ref(null);
     const input = vue.ref(null);
     const tagWrapper = vue.ref(null);
     const panel = vue.ref(null);
@@ -173,8 +172,8 @@ var script = vue.defineComponent({
       }
     });
     const popperPaneRef = vue.computed(() => {
-      var _a;
-      return (_a = popper.value) == null ? void 0 : _a.popperRef;
+      var _a, _b;
+      return (_b = (_a = tooltipRef.value) == null ? void 0 : _a.popperRef) == null ? void 0 : _b.contentRef;
     });
     const togglePopperVisible = (visible) => {
       var _a, _b, _c;
@@ -196,8 +195,10 @@ var script = vue.defineComponent({
       }
     };
     const updatePopperPosition = () => {
-      var _a;
-      vue.nextTick((_a = popper.value) == null ? void 0 : _a.update);
+      vue.nextTick(() => {
+        var _a;
+        (_a = tooltipRef.value) == null ? void 0 : _a.updatePopper();
+      });
     };
     const hideSuggestionPanel = () => {
       filtering.value = false;
@@ -411,9 +412,8 @@ var script = vue.defineComponent({
       resizeEvent.removeResizeListener((_a = input.value) == null ? void 0 : _a.$el, updateStyle);
     });
     return {
-      Effect: defaults.Effect,
       popperOptions,
-      popper,
+      tooltipRef,
       popperPaneRef,
       input,
       tagWrapper,

package/lib/components/cascader/src/index.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/cascader/src/index.vue"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"popper\"\n    v-model:visible=\"popperVisible\"\n    manual-mode\n    :append-to-body=\"popperAppendToBody\"\n    placement=\"bottom-start\"\n    :popper-class=\"`el-cascader__dropdown ${popperClass}`\"\n    :popper-options=\"popperOptions\"\n    :fallback-placements=\"['bottom-start', 'top-start', 'right', 'left']\"\n    :stop-popper-mouse-event=\"false\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n    :effect=\"Effect.LIGHT\"\n    pure\n    @after-leave=\"hideSuggestionPanel\"\n  >\n    <template #trigger>\n      <div\n        v-clickoutside:[popperPaneRef]=\"() => togglePopperVisible(false)\"\n        :class=\"[\n          'el-cascader',\n          realSize && `el-cascader--${realSize}`,\n          { 'is-disabled': isDisabled },\n        ]\"\n        @click=\"() => togglePopperVisible(readonly ? undefined : true)\"\n        @keydown=\"handleKeyDown\"\n        @mouseenter=\"inputHover = true\"\n        @mouseleave=\"inputHover = false\"\n      >\n        <el-input\n          ref=\"input\"\n          v-model.trim=\"inputValue\"\n          :placeholder=\"inputPlaceholder\"\n          :readonly=\"readonly\"\n          :disabled=\"isDisabled\"\n          :validate-event=\"false\"\n          :size=\"realSize\"\n          :class=\"{ 'is-focus': popperVisible }\"\n          @compositionstart=\"handleComposition\"\n          @compositionupdate=\"handleComposition\"\n          @compositionend=\"handleComposition\"\n          @focus=\"(e) => $emit('focus', e)\"\n          @blur=\"(e) => $emit('blur', e)\"\n          @input=\"handleInput\"\n        >\n          <template #suffix>\n            <el-icon\n              v-if=\"clearBtnVisible\"\n              key=\"clear\"\n              class=\"el-input__icon icon-circle-close\"\n              @click.stop=\"handleClear\"\n            >\n              <circle-close />\n            </el-icon>\n            <el-icon\n              v-else\n              key=\"arrow-down\"\n              :class=\"[\n                'el-input__icon',\n                'icon-arrow-down',\n                popperVisible && 'is-reverse',\n              ]\"\n              @click.stop=\"togglePopperVisible()\"\n            >\n              <arrow-down />\n            </el-icon>\n          </template>\n        </el-input>\n\n        <div v-if=\"multiple\" ref=\"tagWrapper\" class=\"el-cascader__tags\">\n          <el-tag\n            v-for=\"tag in presentTags\"\n            :key=\"tag.key\"\n            type=\"info\"\n            :size=\"tagSize\"\n            :hit=\"tag.hitState\"\n            :closable=\"tag.closable\"\n            disable-transitions\n            @close=\"deleteTag(tag)\"\n          >\n            <span>{{ tag.text }}</span>\n          </el-tag>\n          <input\n            v-if=\"filterable && !isDisabled\"\n            v-model.trim=\"searchInputValue\"\n            type=\"text\"\n            class=\"el-cascader__search-input\"\n            :placeholder=\"presentText ? '' : inputPlaceholder\"\n            @input=\"(e) => handleInput(searchInputValue, e)\"\n            @click.stop=\"togglePopperVisible(true)\"\n            @keydown.delete=\"handleDelete\"\n            @compositionstart=\"handleComposition\"\n            @compositionupdate=\"handleComposition\"\n            @compositionend=\"handleComposition\"\n          />\n        </div>\n      </div>\n    </template>\n\n    <template #default>\n      <el-cascader-panel\n        v-show=\"!filtering\"\n        ref=\"panel\"\n        v-model=\"checkedValue\"\n        :options=\"options\"\n        :props=\"props\"\n        :border=\"false\"\n        :render-label=\"$slots.default\"\n        @expand-change=\"handleExpandChange\"\n        @close=\"togglePopperVisible(false)\"\n      />\n      <el-scrollbar\n        v-if=\"filterable\"\n        v-show=\"filtering\"\n        ref=\"suggestionPanel\"\n        tag=\"ul\"\n        class=\"el-cascader__suggestion-panel\"\n        view-class=\"el-cascader__suggestion-list\"\n        @keydown=\"handleSuggestionKeyDown\"\n      >\n        <template v-if=\"suggestions.length\">\n          <li\n            v-for=\"item in suggestions\"\n            :key=\"item.uid\"\n            :class=\"[\n              'el-cascader__suggestion-item',\n              item.checked && 'is-checked',\n            ]\"\n            :tabindex=\"-1\"\n            @click=\"handleSuggestionClick(item)\"\n          >\n            <span>{{ item.text }}</span>\n            <el-icon v-if=\"item.checked\"><check /></el-icon>\n          </li>\n        </template>\n        <slot v-else name=\"empty\">\n          <li class=\"el-cascader__empty-text\">\n            {{ t('el.cascader.noMatch') }}\n          </li>\n        </slot>\n      </el-scrollbar>\n    </template>\n  </el-popper>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  onBeforeUnmount,\n  ref,\n  watch,\n} from 'vue'\nimport { isPromise } from '@vue/shared'\nimport debounce from 'lodash/debounce'\n\nimport { isClient } from '@vueuse/core'\nimport ElCascaderPanel, {\n  CommonProps,\n} from '@element-plus/components/cascader-panel'\nimport ElInput from '@element-plus/components/input'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElTag from '@element-plus/components/tag'\nimport ElIcon from '@element-plus/components/icon'\n\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport { ClickOutside as Clickoutside } from '@element-plus/directives'\nimport { useLocale, useSize } from '@element-plus/hooks'\n\nimport { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport {\n  addResizeListener,\n  removeResizeListener,\n} from '@element-plus/utils/resize-event'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { isKorean } from '@element-plus/utils/isDef'\nimport { CircleClose, Check, ArrowDown } from '@element-plus/icons-vue'\n\nimport type { Options } from '@element-plus/components/popper'\nimport type { ComputedRef, PropType, Ref } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type {\n  CascaderValue,\n  CascaderNode,\n  Tag,\n} from '@element-plus/components/cascader-panel'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\ntype cascaderPanelType = InstanceType<typeof ElCascaderPanel>\ntype popperType = InstanceType<typeof ElPopper>\ntype inputType = InstanceType<typeof ElInput>\ntype suggestionPanelType = InstanceType<typeof ElScrollbar>\n\nconst DEFAULT_INPUT_HEIGHT = 40\n\nconst INPUT_HEIGHT_MAP = {\n  large: 36,\n  default: 32,\n  small: 28,\n}\n\nconst popperOptions: Partial<Options> = {\n  modifiers: [\n    {\n      name: 'arrowPosition',\n      enabled: true,\n      phase: 'main',\n      fn: ({ state }) => {\n        const { modifiersData, placement } = state as any\n        if (['right', 'left'].includes(placement)) return\n        modifiersData.arrow.x = 35\n      },\n      requires: ['arrow'],\n    },\n  ],\n}\n\nexport default defineComponent({\n  name: 'ElCascader',\n\n  components: {\n    ElCascaderPanel,\n    ElInput,\n    ElPopper,\n    ElScrollbar,\n    ElTag,\n    ElIcon,\n    CircleClose,\n    Check,\n    ArrowDown,\n  },\n\n  directives: {\n    Clickoutside,\n  },\n\n  props: {\n    ...CommonProps,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    placeholder: {\n      type: String,\n    },\n    disabled: Boolean,\n    clearable: Boolean,\n    filterable: Boolean,\n    filterMethod: {\n      type: Function as PropType<\n        (node: CascaderNode, keyword: string) => boolean\n      >,\n      default: (node: CascaderNode, keyword: string) =>\n        node.text.includes(keyword),\n    },\n    separator: {\n      type: String,\n      default: ' / ',\n    },\n    showAllLevels: {\n      type: Boolean,\n      default: true,\n    },\n    collapseTags: Boolean,\n    debounce: {\n      type: Number,\n      default: 300,\n    },\n    beforeFilter: {\n      type: Function as PropType<(value: string) => boolean | Promise<any>>,\n      default: () => true,\n    },\n    popperClass: {\n      type: String,\n      default: '',\n    },\n    popperAppendToBody: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  emits: [\n    UPDATE_MODEL_EVENT,\n    CHANGE_EVENT,\n    'focus',\n    'blur',\n    'visible-change',\n    'expand-change',\n    'remove-tag',\n  ],\n\n  setup(props, { emit }) {\n    let inputInitialHeight = 0\n    let pressDeleteCount = 0\n\n    const { t } = useLocale()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const popper: Ref<popperType | null> = ref(null)\n    const input: Ref<inputType | null> = ref(null)\n    const tagWrapper = ref(null)\n    const panel: Ref<cascaderPanelType | null> = ref(null)\n    const suggestionPanel: Ref<suggestionPanelType | null> = ref(null)\n    const popperVisible = ref(false)\n    const inputHover = ref(false)\n    const filtering = ref(false)\n    const inputValue = ref('')\n    const searchInputValue = ref('')\n    const presentTags: Ref<Tag[]> = ref([])\n    const suggestions: Ref<CascaderNode[]> = ref([])\n    const isOnComposition = ref(false)\n\n    const isDisabled = computed(() => props.disabled || elForm.disabled)\n    const inputPlaceholder = computed(\n      () => props.placeholder || t('el.cascader.placeholder')\n    )\n    const realSize = useSize()\n    const tagSize = computed(() =>\n      ['small'].includes(realSize.value) ? 'small' : 'default'\n    )\n    const multiple = computed(() => !!props.props.multiple)\n    const readonly = computed(() => !props.filterable || multiple.value)\n    const searchKeyword = computed(() =>\n      multiple.value ? searchInputValue.value : inputValue.value\n    )\n    const checkedNodes: ComputedRef<CascaderNode[]> = computed(\n      () => panel.value?.checkedNodes || []\n    )\n    const clearBtnVisible = computed(() => {\n      if (\n        !props.clearable ||\n        isDisabled.value ||\n        filtering.value ||\n        !inputHover.value\n      )\n        return false\n\n      return !!checkedNodes.value.length\n    })\n    const presentText = computed(() => {\n      const { showAllLevels, separator } = props\n      const nodes = checkedNodes.value\n      return nodes.length\n        ? multiple.value\n          ? ' '\n          : nodes[0].calcText(showAllLevels, separator)\n        : ''\n    })\n\n    const checkedValue = computed<CascaderValue>({\n      get() {\n        return props.modelValue\n      },\n      set(val) {\n        emit(UPDATE_MODEL_EVENT, val)\n        emit(CHANGE_EVENT, val)\n        elFormItem.validate?.('change')\n      },\n    })\n\n    const popperPaneRef = computed(() => {\n      return popper.value?.popperRef\n    })\n\n    const togglePopperVisible = (visible?: boolean) => {\n      if (isDisabled.value) return\n\n      visible = visible ?? !popperVisible.value\n\n      if (visible !== popperVisible.value) {\n        popperVisible.value = visible\n        input.value?.input?.setAttribute('aria-expanded', `${visible}`)\n\n        if (visible) {\n          updatePopperPosition()\n          nextTick(panel.value?.scrollToExpandingNode)\n        } else if (props.filterable) {\n          const { value } = presentText\n          inputValue.value = value\n          searchInputValue.value = value\n        }\n\n        emit('visible-change', visible)\n      }\n    }\n\n    const updatePopperPosition = () => {\n      nextTick(popper.value?.update)\n    }\n\n    const hideSuggestionPanel = () => {\n      filtering.value = false\n    }\n\n    const genTag = (node: CascaderNode): Tag => {\n      const { showAllLevels, separator } = props\n      return {\n        node,\n        key: node.uid,\n        text: node.calcText(showAllLevels, separator),\n        hitState: false,\n        closable: !isDisabled.value && !node.isDisabled,\n      }\n    }\n\n    const deleteTag = (tag: Tag) => {\n      const node = tag.node as CascaderNode\n      node.doCheck(false)\n      panel.value?.calculateCheckedValue()\n      emit('remove-tag', node.valueByOption)\n    }\n\n    const calculatePresentTags = () => {\n      if (!multiple.value) return\n\n      const nodes = checkedNodes.value\n      const tags: Tag[] = []\n\n      if (nodes.length) {\n        const [first, ...rest] = nodes\n        const restCount = rest.length\n\n        tags.push(genTag(first))\n\n        if (restCount) {\n          if (props.collapseTags) {\n            tags.push({\n              key: -1,\n              text: `+ ${restCount}`,\n              closable: false,\n            })\n          } else {\n            rest.forEach((node) => tags.push(genTag(node)))\n          }\n        }\n      }\n\n      presentTags.value = tags\n    }\n\n    const calculateSuggestions = () => {\n      const { filterMethod, showAllLevels, separator } = props\n      const res = panel.value\n        ?.getFlattedNodes(!props.props.checkStrictly)\n        ?.filter((node) => {\n          if (node.isDisabled) return false\n          node.calcText(showAllLevels, separator)\n          return filterMethod(node, searchKeyword.value)\n        })\n\n      if (multiple.value) {\n        presentTags.value.forEach((tag) => {\n          tag.hitState = false\n        })\n      }\n\n      filtering.value = true\n      suggestions.value = res!\n      updatePopperPosition()\n    }\n\n    const focusFirstNode = () => {\n      let firstNode!: HTMLElement\n\n      if (filtering.value && suggestionPanel.value) {\n        firstNode = suggestionPanel.value.$el.querySelector(\n          '.el-cascader__suggestion-item'\n        )\n      } else {\n        firstNode = panel.value?.$el.querySelector(\n          '.el-cascader-node[tabindex=\"-1\"]'\n        )\n      }\n\n      if (firstNode) {\n        firstNode.focus()\n        !filtering.value && firstNode.click()\n      }\n    }\n\n    const updateStyle = () => {\n      const inputInner = input.value?.input\n      const tagWrapperEl = tagWrapper.value\n      const suggestionPanelEl = suggestionPanel.value?.$el\n\n      if (!isClient || !inputInner) return\n\n      if (suggestionPanelEl) {\n        const suggestionList = suggestionPanelEl.querySelector(\n          '.el-cascader__suggestion-list'\n        )\n        suggestionList.style.minWidth = `${inputInner.offsetWidth}px`\n      }\n\n      if (tagWrapperEl) {\n        const { offsetHeight } = tagWrapperEl\n        const height =\n          presentTags.value.length > 0\n            ? `${Math.max(offsetHeight + 6, inputInitialHeight)}px`\n            : `${inputInitialHeight}px`\n        inputInner.style.height = height\n        updatePopperPosition()\n      }\n    }\n\n    const getCheckedNodes = (leafOnly: boolean) => {\n      return panel.value?.getCheckedNodes(leafOnly)\n    }\n\n    const handleExpandChange = (value: CascaderValue) => {\n      updatePopperPosition()\n      emit('expand-change', value)\n    }\n\n    const handleComposition = (event: CompositionEvent) => {\n      const text = (event.target as HTMLInputElement)?.value\n      if (event.type === 'compositionend') {\n        isOnComposition.value = false\n        nextTick(() => handleInput(text))\n      } else {\n        const lastCharacter = text[text.length - 1] || ''\n        isOnComposition.value = !isKorean(lastCharacter)\n      }\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (isOnComposition.value) return\n\n      switch (e.code) {\n        case EVENT_CODE.enter:\n          togglePopperVisible()\n          break\n        case EVENT_CODE.down:\n          togglePopperVisible(true)\n          nextTick(focusFirstNode)\n          e.preventDefault()\n          break\n        case EVENT_CODE.esc:\n        case EVENT_CODE.tab:\n          togglePopperVisible(false)\n          break\n      }\n    }\n\n    const handleClear = () => {\n      panel.value?.clearCheckedNodes()\n      togglePopperVisible(false)\n    }\n\n    const handleSuggestionClick = (node: CascaderNode) => {\n      const { checked } = node\n\n      if (multiple.value) {\n        panel.value?.handleCheckChange(node, !checked, false)\n      } else {\n        !checked && panel.value?.handleCheckChange(node, true, false)\n        togglePopperVisible(false)\n      }\n    }\n\n    const handleSuggestionKeyDown = (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          const distance = code === EVENT_CODE.up ? -1 : 1\n          focusNode(\n            getSibling(\n              target,\n              distance,\n              '.el-cascader__suggestion-item[tabindex=\"-1\"]'\n            )\n          )\n          break\n        }\n        case EVENT_CODE.enter:\n          target.click()\n          break\n        case EVENT_CODE.esc:\n        case EVENT_CODE.tab:\n          togglePopperVisible(false)\n          break\n      }\n    }\n\n    const handleDelete = () => {\n      const tags = presentTags.value\n      const lastTag = tags[tags.length - 1]\n      pressDeleteCount = searchInputValue.value ? 0 : pressDeleteCount + 1\n\n      if (!lastTag || !pressDeleteCount) return\n\n      if (lastTag.hitState) {\n        deleteTag(lastTag)\n      } else {\n        lastTag.hitState = true\n      }\n    }\n\n    const handleFilter = debounce(() => {\n      const { value } = searchKeyword\n\n      if (!value) return\n\n      const passed = props.beforeFilter(value)\n\n      if (isPromise(passed)) {\n        passed.then(calculateSuggestions).catch(() => {\n          /* prevent log error */\n        })\n      } else if (passed !== false) {\n        calculateSuggestions()\n      } else {\n        hideSuggestionPanel()\n      }\n    }, props.debounce)\n\n    const handleInput = (val: string, e?: KeyboardEvent) => {\n      !popperVisible.value && togglePopperVisible(true)\n\n      if (e?.isComposing) return\n\n      val ? handleFilter() : hideSuggestionPanel()\n    }\n\n    watch(filtering, updatePopperPosition)\n\n    watch([checkedNodes, isDisabled], calculatePresentTags)\n\n    watch(presentTags, () => {\n      nextTick(() => updateStyle())\n    })\n\n    watch(presentText, (val) => (inputValue.value = val), { immediate: true })\n\n    onMounted(() => {\n      const inputEl = input.value?.$el\n      inputInitialHeight =\n        inputEl?.offsetHeight ||\n        INPUT_HEIGHT_MAP[realSize.value] ||\n        DEFAULT_INPUT_HEIGHT\n      addResizeListener(inputEl, updateStyle)\n    })\n\n    onBeforeUnmount(() => {\n      removeResizeListener(input.value?.$el, updateStyle)\n    })\n\n    return {\n      Effect,\n      popperOptions,\n      popper,\n      popperPaneRef,\n      input,\n      tagWrapper,\n      panel,\n      suggestionPanel,\n      popperVisible,\n      inputHover,\n      inputPlaceholder,\n      filtering,\n      presentText,\n      checkedValue,\n      inputValue,\n      searchInputValue,\n      presentTags,\n      suggestions,\n      isDisabled,\n      isOnComposition,\n      realSize,\n      tagSize,\n      multiple,\n      readonly,\n      clearBtnVisible,\n      t,\n      togglePopperVisible,\n      hideSuggestionPanel,\n      deleteTag,\n      focusFirstNode,\n      getCheckedNodes,\n      handleExpandChange,\n      handleKeyDown,\n      handleComposition,\n      handleClear,\n      handleSuggestionClick,\n      handleSuggestionKeyDown,\n      handleDelete,\n      handleInput,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElCascaderPanel","ElScrollbar","ElTag","ElIcon","CommonProps","UPDATE_MODEL_EVENT","CHANGE_EVENT","useLocale","ref","useSize","computed","nextTick","isKorean","EVENT_CODE","focusNode","getSibling","isPromise","Effect"],"mappings":"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"}
+{"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/cascader/src/index.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"tooltipRef\"\n    v-model:visible=\"popperVisible\"\n    :append-to-body=\"popperAppendToBody\"\n    :popper-class=\"`el-cascader__dropdown ${popperClass}`\"\n    :popper-options=\"popperOptions\"\n    :fallback-placements=\"['bottom-start', 'top-start', 'right', 'left']\"\n    :stop-popper-mouse-event=\"false\"\n    :gpu-acceleration=\"false\"\n    placement=\"bottom-start\"\n    transition=\"el-zoom-in-top\"\n    effect=\"light\"\n    pure\n    persistent\n    @hide=\"hideSuggestionPanel\"\n  >\n    <template #default>\n      <div\n        v-clickoutside:[popperPaneRef]=\"() => togglePopperVisible(false)\"\n        :class=\"[\n          'el-cascader',\n          realSize && `el-cascader--${realSize}`,\n          { 'is-disabled': isDisabled },\n        ]\"\n        @click=\"() => togglePopperVisible(readonly ? undefined : true)\"\n        @keydown=\"handleKeyDown\"\n        @mouseenter=\"inputHover = true\"\n        @mouseleave=\"inputHover = false\"\n      >\n        <el-input\n          ref=\"input\"\n          v-model.trim=\"inputValue\"\n          :placeholder=\"inputPlaceholder\"\n          :readonly=\"readonly\"\n          :disabled=\"isDisabled\"\n          :validate-event=\"false\"\n          :size=\"realSize\"\n          :class=\"{ 'is-focus': popperVisible }\"\n          @compositionstart=\"handleComposition\"\n          @compositionupdate=\"handleComposition\"\n          @compositionend=\"handleComposition\"\n          @focus=\"(e) => $emit('focus', e)\"\n          @blur=\"(e) => $emit('blur', e)\"\n          @input=\"handleInput\"\n        >\n          <template #suffix>\n            <el-icon\n              v-if=\"clearBtnVisible\"\n              key=\"clear\"\n              class=\"el-input__icon icon-circle-close\"\n              @click.stop=\"handleClear\"\n            >\n              <circle-close />\n            </el-icon>\n            <el-icon\n              v-else\n              key=\"arrow-down\"\n              :class=\"[\n                'el-input__icon',\n                'icon-arrow-down',\n                popperVisible && 'is-reverse',\n              ]\"\n              @click.stop=\"togglePopperVisible()\"\n            >\n              <arrow-down />\n            </el-icon>\n          </template>\n        </el-input>\n\n        <div v-if=\"multiple\" ref=\"tagWrapper\" class=\"el-cascader__tags\">\n          <el-tag\n            v-for=\"tag in presentTags\"\n            :key=\"tag.key\"\n            type=\"info\"\n            :size=\"tagSize\"\n            :hit=\"tag.hitState\"\n            :closable=\"tag.closable\"\n            disable-transitions\n            @close=\"deleteTag(tag)\"\n          >\n            <span>{{ tag.text }}</span>\n          </el-tag>\n          <input\n            v-if=\"filterable && !isDisabled\"\n            v-model.trim=\"searchInputValue\"\n            type=\"text\"\n            class=\"el-cascader__search-input\"\n            :placeholder=\"presentText ? '' : inputPlaceholder\"\n            @input=\"(e) => handleInput(searchInputValue, e)\"\n            @click.stop=\"togglePopperVisible(true)\"\n            @keydown.delete=\"handleDelete\"\n            @compositionstart=\"handleComposition\"\n            @compositionupdate=\"handleComposition\"\n            @compositionend=\"handleComposition\"\n          />\n        </div>\n      </div>\n    </template>\n\n    <template #content>\n      <el-cascader-panel\n        v-show=\"!filtering\"\n        ref=\"panel\"\n        v-model=\"checkedValue\"\n        :options=\"options\"\n        :props=\"props\"\n        :border=\"false\"\n        :render-label=\"$slots.default\"\n        @expand-change=\"handleExpandChange\"\n        @close=\"$nextTick(() => togglePopperVisible(false))\"\n      />\n      <el-scrollbar\n        v-if=\"filterable\"\n        v-show=\"filtering\"\n        ref=\"suggestionPanel\"\n        tag=\"ul\"\n        class=\"el-cascader__suggestion-panel\"\n        view-class=\"el-cascader__suggestion-list\"\n        @keydown=\"handleSuggestionKeyDown\"\n      >\n        <template v-if=\"suggestions.length\">\n          <li\n            v-for=\"item in suggestions\"\n            :key=\"item.uid\"\n            :class=\"[\n              'el-cascader__suggestion-item',\n              item.checked && 'is-checked',\n            ]\"\n            :tabindex=\"-1\"\n            @click=\"handleSuggestionClick(item)\"\n          >\n            <span>{{ item.text }}</span>\n            <el-icon v-if=\"item.checked\"><check /></el-icon>\n          </li>\n        </template>\n        <slot v-else name=\"empty\">\n          <li class=\"el-cascader__empty-text\">\n            {{ t('el.cascader.noMatch') }}\n          </li>\n        </slot>\n      </el-scrollbar>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  onBeforeUnmount,\n  ref,\n  watch,\n} from 'vue'\nimport { isPromise } from '@vue/shared'\nimport debounce from 'lodash/debounce'\n\nimport { isClient } from '@vueuse/core'\nimport ElCascaderPanel, {\n  CommonProps,\n} from '@element-plus/components/cascader-panel'\nimport ElInput from '@element-plus/components/input'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElTag from '@element-plus/components/tag'\nimport ElIcon from '@element-plus/components/icon'\n\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport { ClickOutside as Clickoutside } from '@element-plus/directives'\nimport { useLocale, useSize } from '@element-plus/hooks'\n\nimport { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport {\n  addResizeListener,\n  removeResizeListener,\n} from '@element-plus/utils/resize-event'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { isKorean } from '@element-plus/utils/isDef'\nimport { CircleClose, Check, ArrowDown } from '@element-plus/icons-vue'\n\nimport type { Options } from '@element-plus/components/popper'\nimport type { ComputedRef, PropType, Ref } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type {\n  CascaderValue,\n  CascaderNode,\n  Tag,\n} from '@element-plus/components/cascader-panel'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\ntype cascaderPanelType = InstanceType<typeof ElCascaderPanel>\ntype tooltipType = InstanceType<typeof ElTooltip>\ntype inputType = InstanceType<typeof ElInput>\ntype suggestionPanelType = InstanceType<typeof ElScrollbar>\n\nconst DEFAULT_INPUT_HEIGHT = 40\n\nconst INPUT_HEIGHT_MAP = {\n  large: 36,\n  default: 32,\n  small: 28,\n}\n\nconst popperOptions: Partial<Options> = {\n  modifiers: [\n    {\n      name: 'arrowPosition',\n      enabled: true,\n      phase: 'main',\n      fn: ({ state }) => {\n        const { modifiersData, placement } = state as any\n        if (['right', 'left'].includes(placement)) return\n        modifiersData.arrow.x = 35\n      },\n      requires: ['arrow'],\n    },\n  ],\n}\n\nexport default defineComponent({\n  name: 'ElCascader',\n\n  components: {\n    ElCascaderPanel,\n    ElInput,\n    ElTooltip,\n    ElScrollbar,\n    ElTag,\n    ElIcon,\n    CircleClose,\n    Check,\n    ArrowDown,\n  },\n\n  directives: {\n    Clickoutside,\n  },\n\n  props: {\n    ...CommonProps,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    placeholder: {\n      type: String,\n    },\n    disabled: Boolean,\n    clearable: Boolean,\n    filterable: Boolean,\n    filterMethod: {\n      type: Function as PropType<\n        (node: CascaderNode, keyword: string) => boolean\n      >,\n      default: (node: CascaderNode, keyword: string) =>\n        node.text.includes(keyword),\n    },\n    separator: {\n      type: String,\n      default: ' / ',\n    },\n    showAllLevels: {\n      type: Boolean,\n      default: true,\n    },\n    collapseTags: Boolean,\n    debounce: {\n      type: Number,\n      default: 300,\n    },\n    beforeFilter: {\n      type: Function as PropType<(value: string) => boolean | Promise<any>>,\n      default: () => true,\n    },\n    popperClass: {\n      type: String,\n      default: '',\n    },\n    popperAppendToBody: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  emits: [\n    UPDATE_MODEL_EVENT,\n    CHANGE_EVENT,\n    'focus',\n    'blur',\n    'visible-change',\n    'expand-change',\n    'remove-tag',\n  ],\n\n  setup(props, { emit }) {\n    let inputInitialHeight = 0\n    let pressDeleteCount = 0\n\n    const { t } = useLocale()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const tooltipRef: Ref<tooltipType | null> = ref(null)\n    const input: Ref<inputType | null> = ref(null)\n    const tagWrapper = ref(null)\n    const panel: Ref<cascaderPanelType | null> = ref(null)\n    const suggestionPanel: Ref<suggestionPanelType | null> = ref(null)\n    const popperVisible = ref(false)\n    const inputHover = ref(false)\n    const filtering = ref(false)\n    const inputValue = ref('')\n    const searchInputValue = ref('')\n    const presentTags: Ref<Tag[]> = ref([])\n    const suggestions: Ref<CascaderNode[]> = ref([])\n    const isOnComposition = ref(false)\n\n    const isDisabled = computed(() => props.disabled || elForm.disabled)\n    const inputPlaceholder = computed(\n      () => props.placeholder || t('el.cascader.placeholder')\n    )\n    const realSize = useSize()\n    const tagSize = computed(() =>\n      ['small'].includes(realSize.value) ? 'small' : 'default'\n    )\n    const multiple = computed(() => !!props.props.multiple)\n    const readonly = computed(() => !props.filterable || multiple.value)\n    const searchKeyword = computed(() =>\n      multiple.value ? searchInputValue.value : inputValue.value\n    )\n    const checkedNodes: ComputedRef<CascaderNode[]> = computed(\n      () => panel.value?.checkedNodes || []\n    )\n    const clearBtnVisible = computed(() => {\n      if (\n        !props.clearable ||\n        isDisabled.value ||\n        filtering.value ||\n        !inputHover.value\n      )\n        return false\n\n      return !!checkedNodes.value.length\n    })\n    const presentText = computed(() => {\n      const { showAllLevels, separator } = props\n      const nodes = checkedNodes.value\n      return nodes.length\n        ? multiple.value\n          ? ' '\n          : nodes[0].calcText(showAllLevels, separator)\n        : ''\n    })\n\n    const checkedValue = computed<CascaderValue>({\n      get() {\n        return props.modelValue\n      },\n      set(val) {\n        emit(UPDATE_MODEL_EVENT, val)\n        emit(CHANGE_EVENT, val)\n        elFormItem.validate?.('change')\n      },\n    })\n\n    const popperPaneRef = computed(() => {\n      return tooltipRef.value?.popperRef?.contentRef\n    })\n\n    const togglePopperVisible = (visible?: boolean) => {\n      if (isDisabled.value) return\n\n      visible = visible ?? !popperVisible.value\n\n      if (visible !== popperVisible.value) {\n        popperVisible.value = visible\n        input.value?.input?.setAttribute('aria-expanded', `${visible}`)\n\n        if (visible) {\n          updatePopperPosition()\n          nextTick(panel.value?.scrollToExpandingNode)\n        } else if (props.filterable) {\n          const { value } = presentText\n          inputValue.value = value\n          searchInputValue.value = value\n        }\n\n        emit('visible-change', visible)\n      }\n    }\n\n    const updatePopperPosition = () => {\n      nextTick(() => {\n        tooltipRef.value?.updatePopper()\n      })\n    }\n\n    const hideSuggestionPanel = () => {\n      filtering.value = false\n    }\n\n    const genTag = (node: CascaderNode): Tag => {\n      const { showAllLevels, separator } = props\n      return {\n        node,\n        key: node.uid,\n        text: node.calcText(showAllLevels, separator),\n        hitState: false,\n        closable: !isDisabled.value && !node.isDisabled,\n      }\n    }\n\n    const deleteTag = (tag: Tag) => {\n      const node = tag.node as CascaderNode\n      node.doCheck(false)\n      panel.value?.calculateCheckedValue()\n      emit('remove-tag', node.valueByOption)\n    }\n\n    const calculatePresentTags = () => {\n      if (!multiple.value) return\n\n      const nodes = checkedNodes.value\n      const tags: Tag[] = []\n\n      if (nodes.length) {\n        const [first, ...rest] = nodes\n        const restCount = rest.length\n\n        tags.push(genTag(first))\n\n        if (restCount) {\n          if (props.collapseTags) {\n            tags.push({\n              key: -1,\n              text: `+ ${restCount}`,\n              closable: false,\n            })\n          } else {\n            rest.forEach((node) => tags.push(genTag(node)))\n          }\n        }\n      }\n\n      presentTags.value = tags\n    }\n\n    const calculateSuggestions = () => {\n      const { filterMethod, showAllLevels, separator } = props\n      const res = panel.value\n        ?.getFlattedNodes(!props.props.checkStrictly)\n        ?.filter((node) => {\n          if (node.isDisabled) return false\n          node.calcText(showAllLevels, separator)\n          return filterMethod(node, searchKeyword.value)\n        })\n\n      if (multiple.value) {\n        presentTags.value.forEach((tag) => {\n          tag.hitState = false\n        })\n      }\n\n      filtering.value = true\n      suggestions.value = res!\n      updatePopperPosition()\n    }\n\n    const focusFirstNode = () => {\n      let firstNode!: HTMLElement\n\n      if (filtering.value && suggestionPanel.value) {\n        firstNode = suggestionPanel.value.$el.querySelector(\n          '.el-cascader__suggestion-item'\n        )\n      } else {\n        firstNode = panel.value?.$el.querySelector(\n          '.el-cascader-node[tabindex=\"-1\"]'\n        )\n      }\n\n      if (firstNode) {\n        firstNode.focus()\n        !filtering.value && firstNode.click()\n      }\n    }\n\n    const updateStyle = () => {\n      const inputInner = input.value?.input\n      const tagWrapperEl = tagWrapper.value\n      const suggestionPanelEl = suggestionPanel.value?.$el\n\n      if (!isClient || !inputInner) return\n\n      if (suggestionPanelEl) {\n        const suggestionList = suggestionPanelEl.querySelector(\n          '.el-cascader__suggestion-list'\n        )\n        suggestionList.style.minWidth = `${inputInner.offsetWidth}px`\n      }\n\n      if (tagWrapperEl) {\n        const { offsetHeight } = tagWrapperEl\n        const height =\n          presentTags.value.length > 0\n            ? `${Math.max(offsetHeight + 6, inputInitialHeight)}px`\n            : `${inputInitialHeight}px`\n        inputInner.style.height = height\n        updatePopperPosition()\n      }\n    }\n\n    const getCheckedNodes = (leafOnly: boolean) => {\n      return panel.value?.getCheckedNodes(leafOnly)\n    }\n\n    const handleExpandChange = (value: CascaderValue) => {\n      updatePopperPosition()\n      emit('expand-change', value)\n    }\n\n    const handleComposition = (event: CompositionEvent) => {\n      const text = (event.target as HTMLInputElement)?.value\n      if (event.type === 'compositionend') {\n        isOnComposition.value = false\n        nextTick(() => handleInput(text))\n      } else {\n        const lastCharacter = text[text.length - 1] || ''\n        isOnComposition.value = !isKorean(lastCharacter)\n      }\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (isOnComposition.value) return\n\n      switch (e.code) {\n        case EVENT_CODE.enter:\n          togglePopperVisible()\n          break\n        case EVENT_CODE.down:\n          togglePopperVisible(true)\n          nextTick(focusFirstNode)\n          e.preventDefault()\n          break\n        case EVENT_CODE.esc:\n        case EVENT_CODE.tab:\n          togglePopperVisible(false)\n          break\n      }\n    }\n\n    const handleClear = () => {\n      panel.value?.clearCheckedNodes()\n      togglePopperVisible(false)\n    }\n\n    const handleSuggestionClick = (node: CascaderNode) => {\n      const { checked } = node\n\n      if (multiple.value) {\n        panel.value?.handleCheckChange(node, !checked, false)\n      } else {\n        !checked && panel.value?.handleCheckChange(node, true, false)\n        togglePopperVisible(false)\n      }\n    }\n\n    const handleSuggestionKeyDown = (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          const distance = code === EVENT_CODE.up ? -1 : 1\n          focusNode(\n            getSibling(\n              target,\n              distance,\n              '.el-cascader__suggestion-item[tabindex=\"-1\"]'\n            )\n          )\n          break\n        }\n        case EVENT_CODE.enter:\n          target.click()\n          break\n        case EVENT_CODE.esc:\n        case EVENT_CODE.tab:\n          togglePopperVisible(false)\n          break\n      }\n    }\n\n    const handleDelete = () => {\n      const tags = presentTags.value\n      const lastTag = tags[tags.length - 1]\n      pressDeleteCount = searchInputValue.value ? 0 : pressDeleteCount + 1\n\n      if (!lastTag || !pressDeleteCount) return\n\n      if (lastTag.hitState) {\n        deleteTag(lastTag)\n      } else {\n        lastTag.hitState = true\n      }\n    }\n\n    const handleFilter = debounce(() => {\n      const { value } = searchKeyword\n\n      if (!value) return\n\n      const passed = props.beforeFilter(value)\n\n      if (isPromise(passed)) {\n        passed.then(calculateSuggestions).catch(() => {\n          /* prevent log error */\n        })\n      } else if (passed !== false) {\n        calculateSuggestions()\n      } else {\n        hideSuggestionPanel()\n      }\n    }, props.debounce)\n\n    const handleInput = (val: string, e?: KeyboardEvent) => {\n      !popperVisible.value && togglePopperVisible(true)\n\n      if (e?.isComposing) return\n\n      val ? handleFilter() : hideSuggestionPanel()\n    }\n\n    watch(filtering, updatePopperPosition)\n\n    watch([checkedNodes, isDisabled], calculatePresentTags)\n\n    watch(presentTags, () => {\n      nextTick(() => updateStyle())\n    })\n\n    watch(presentText, (val) => (inputValue.value = val), { immediate: true })\n\n    onMounted(() => {\n      const inputEl = input.value?.$el\n      inputInitialHeight =\n        inputEl?.offsetHeight ||\n        INPUT_HEIGHT_MAP[realSize.value] ||\n        DEFAULT_INPUT_HEIGHT\n      addResizeListener(inputEl, updateStyle)\n    })\n\n    onBeforeUnmount(() => {\n      removeResizeListener(input.value?.$el, updateStyle)\n    })\n\n    return {\n      popperOptions,\n      tooltipRef,\n      popperPaneRef,\n      input,\n      tagWrapper,\n      panel,\n      suggestionPanel,\n      popperVisible,\n      inputHover,\n      inputPlaceholder,\n      filtering,\n      presentText,\n      checkedValue,\n      inputValue,\n      searchInputValue,\n      presentTags,\n      suggestions,\n      isDisabled,\n      isOnComposition,\n      realSize,\n      tagSize,\n      multiple,\n      readonly,\n      clearBtnVisible,\n      t,\n      togglePopperVisible,\n      hideSuggestionPanel,\n      deleteTag,\n      focusFirstNode,\n      getCheckedNodes,\n      handleExpandChange,\n      handleKeyDown,\n      handleComposition,\n      handleClear,\n      handleSuggestionClick,\n      handleSuggestionKeyDown,\n      handleDelete,\n      handleInput,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElCascaderPanel","ElScrollbar","ElTag","ElIcon","CommonProps","UPDATE_MODEL_EVENT","CHANGE_EVENT","useLocale","ref","useSize","computed","nextTick","isKorean","EVENT_CODE","focusNode","getSibling","isPromise"],"mappings":"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"}

package/lib/components/cascader/src/index.vue_vue_type_template_id_0429c2db_lang.js

@@ -21,26 +21,26 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_cascader_panel = vue.resolveComponent("el-cascader-panel");
   const _component_check = vue.resolveComponent("check");
   const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
-  const _component_el_popper = vue.resolveComponent("el-popper");
+  const _component_el_tooltip = vue.resolveComponent("el-tooltip");
   const _directive_clickoutside = vue.resolveDirective("clickoutside");
-  return vue.openBlock(), vue.createBlock(_component_el_popper, {
-    ref: "popper",
+  return vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+    ref: "tooltipRef",
     visible: _ctx.popperVisible,
     "onUpdate:visible": _cache[17] || (_cache[17] = ($event) => _ctx.popperVisible = $event),
-    "manual-mode": "",
     "append-to-body": _ctx.popperAppendToBody,
-    placement: "bottom-start",
     "popper-class": `el-cascader__dropdown ${_ctx.popperClass}`,
     "popper-options": _ctx.popperOptions,
     "fallback-placements": ["bottom-start", "top-start", "right", "left"],
     "stop-popper-mouse-event": false,
-    transition: "el-zoom-in-top",
     "gpu-acceleration": false,
-    effect: _ctx.Effect.LIGHT,
+    placement: "bottom-start",
+    transition: "el-zoom-in-top",
+    effect: "light",
     pure: "",
-    onAfterLeave: _ctx.hideSuggestionPanel
+    persistent: "",
+    onHide: _ctx.hideSuggestionPanel
   }, {
-    trigger: vue.withCtx(() => [
+    default: vue.withCtx(() => [
       vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass([
           "el-cascader",
@@ -139,7 +139,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         [_directive_clickoutside, () => _ctx.togglePopperVisible(false), _ctx.popperPaneRef]
       ])
     ]),
-    default: vue.withCtx(() => [
+    content: vue.withCtx(() => [
       vue.withDirectives(vue.createVNode(_component_el_cascader_panel, {
         ref: "panel",
         modelValue: _ctx.checkedValue,
@@ -149,7 +149,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         border: false,
         "render-label": _ctx.$slots.default,
         onExpandChange: _ctx.handleExpandChange,
-        onClose: _cache[16] || (_cache[16] = ($event) => _ctx.togglePopperVisible(false))
+        onClose: _cache[16] || (_cache[16] = ($event) => _ctx.$nextTick(() => _ctx.togglePopperVisible(false)))
       }, null, 8, ["modelValue", "options", "props", "render-label", "onExpandChange"]), [
         [vue.vShow, !_ctx.filtering]
       ]),
@@ -190,7 +190,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ]) : vue.createCommentVNode("v-if", true)
     ]),
     _: 3
-  }, 8, ["visible", "append-to-body", "popper-class", "popper-options", "effect", "onAfterLeave"]);
+  }, 8, ["visible", "append-to-body", "popper-class", "popper-options", "onHide"]);
 }
 
 exports.render = render;

package/lib/components/cascader/src/index.vue_vue_type_template_id_0429c2db_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_template_id_0429c2db_lang.js","sources":["../../../../../../packages/components/cascader/src/index.vue?vue&type=template&id=0429c2db&lang.js"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"popper\"\n    v-model:visible=\"popperVisible\"\n    manual-mode\n    :append-to-body=\"popperAppendToBody\"\n    placement=\"bottom-start\"\n    :popper-class=\"`el-cascader__dropdown ${popperClass}`\"\n    :popper-options=\"popperOptions\"\n    :fallback-placements=\"['bottom-start', 'top-start', 'right', 'left']\"\n    :stop-popper-mouse-event=\"false\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n    :effect=\"Effect.LIGHT\"\n    pure\n    @after-leave=\"hideSuggestionPanel\"\n  >\n    <template #trigger>\n      <div\n        v-clickoutside:[popperPaneRef]=\"() => togglePopperVisible(false)\"\n        :class=\"[\n          'el-cascader',\n          realSize && `el-cascader--${realSize}`,\n          { 'is-disabled': isDisabled },\n        ]\"\n        @click=\"() => togglePopperVisible(readonly ? undefined : true)\"\n        @keydown=\"handleKeyDown\"\n        @mouseenter=\"inputHover = true\"\n        @mouseleave=\"inputHover = false\"\n      >\n        <el-input\n          ref=\"input\"\n          v-model.trim=\"inputValue\"\n          :placeholder=\"inputPlaceholder\"\n          :readonly=\"readonly\"\n          :disabled=\"isDisabled\"\n          :validate-event=\"false\"\n          :size=\"realSize\"\n          :class=\"{ 'is-focus': popperVisible }\"\n          @compositionstart=\"handleComposition\"\n          @compositionupdate=\"handleComposition\"\n          @compositionend=\"handleComposition\"\n          @focus=\"(e) => $emit('focus', e)\"\n          @blur=\"(e) => $emit('blur', e)\"\n          @input=\"handleInput\"\n        >\n          <template #suffix>\n            <el-icon\n              v-if=\"clearBtnVisible\"\n              key=\"clear\"\n              class=\"el-input__icon icon-circle-close\"\n              @click.stop=\"handleClear\"\n            >\n              <circle-close />\n            </el-icon>\n            <el-icon\n              v-else\n              key=\"arrow-down\"\n              :class=\"[\n                'el-input__icon',\n                'icon-arrow-down',\n                popperVisible && 'is-reverse',\n              ]\"\n              @click.stop=\"togglePopperVisible()\"\n            >\n              <arrow-down />\n            </el-icon>\n          </template>\n        </el-input>\n\n        <div v-if=\"multiple\" ref=\"tagWrapper\" class=\"el-cascader__tags\">\n          <el-tag\n            v-for=\"tag in presentTags\"\n            :key=\"tag.key\"\n            type=\"info\"\n            :size=\"tagSize\"\n            :hit=\"tag.hitState\"\n            :closable=\"tag.closable\"\n            disable-transitions\n            @close=\"deleteTag(tag)\"\n          >\n            <span>{{ tag.text }}</span>\n          </el-tag>\n          <input\n            v-if=\"filterable && !isDisabled\"\n            v-model.trim=\"searchInputValue\"\n            type=\"text\"\n            class=\"el-cascader__search-input\"\n            :placeholder=\"presentText ? '' : inputPlaceholder\"\n            @input=\"(e) => handleInput(searchInputValue, e)\"\n            @click.stop=\"togglePopperVisible(true)\"\n            @keydown.delete=\"handleDelete\"\n            @compositionstart=\"handleComposition\"\n            @compositionupdate=\"handleComposition\"\n            @compositionend=\"handleComposition\"\n          />\n        </div>\n      </div>\n    </template>\n\n    <template #default>\n      <el-cascader-panel\n        v-show=\"!filtering\"\n        ref=\"panel\"\n        v-model=\"checkedValue\"\n        :options=\"options\"\n        :props=\"props\"\n        :border=\"false\"\n        :render-label=\"$slots.default\"\n        @expand-change=\"handleExpandChange\"\n        @close=\"togglePopperVisible(false)\"\n      />\n      <el-scrollbar\n        v-if=\"filterable\"\n        v-show=\"filtering\"\n        ref=\"suggestionPanel\"\n        tag=\"ul\"\n        class=\"el-cascader__suggestion-panel\"\n        view-class=\"el-cascader__suggestion-list\"\n        @keydown=\"handleSuggestionKeyDown\"\n      >\n        <template v-if=\"suggestions.length\">\n          <li\n            v-for=\"item in suggestions\"\n            :key=\"item.uid\"\n            :class=\"[\n              'el-cascader__suggestion-item',\n              item.checked && 'is-checked',\n            ]\"\n            :tabindex=\"-1\"\n            @click=\"handleSuggestionClick(item)\"\n          >\n            <span>{{ item.text }}</span>\n            <el-icon v-if=\"item.checked\"><check /></el-icon>\n          </li>\n        </template>\n        <slot v-else name=\"empty\">\n          <li class=\"el-cascader__empty-text\">\n            {{ t('el.cascader.noMatch') }}\n          </li>\n        </slot>\n      </el-scrollbar>\n    </template>\n  </el-popper>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  onBeforeUnmount,\n  ref,\n  watch,\n} from 'vue'\nimport { isPromise } from '@vue/shared'\nimport debounce from 'lodash/debounce'\n\nimport { isClient } from '@vueuse/core'\nimport ElCascaderPanel, {\n  CommonProps,\n} from '@element-plus/components/cascader-panel'\nimport ElInput from '@element-plus/components/input'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElTag from '@element-plus/components/tag'\nimport ElIcon from '@element-plus/components/icon'\n\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport { ClickOutside as Clickoutside } from '@element-plus/directives'\nimport { useLocale, useSize } from '@element-plus/hooks'\n\nimport { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport {\n  addResizeListener,\n  removeResizeListener,\n} from '@element-plus/utils/resize-event'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { isKorean } from '@element-plus/utils/isDef'\nimport { CircleClose, Check, ArrowDown } from '@element-plus/icons-vue'\n\nimport type { Options } from '@element-plus/components/popper'\nimport type { ComputedRef, PropType, Ref } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type {\n  CascaderValue,\n  CascaderNode,\n  Tag,\n} from '@element-plus/components/cascader-panel'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\ntype cascaderPanelType = InstanceType<typeof ElCascaderPanel>\ntype popperType = InstanceType<typeof ElPopper>\ntype inputType = InstanceType<typeof ElInput>\ntype suggestionPanelType = InstanceType<typeof ElScrollbar>\n\nconst DEFAULT_INPUT_HEIGHT = 40\n\nconst INPUT_HEIGHT_MAP = {\n  large: 36,\n  default: 32,\n  small: 28,\n}\n\nconst popperOptions: Partial<Options> = {\n  modifiers: [\n    {\n      name: 'arrowPosition',\n      enabled: true,\n      phase: 'main',\n      fn: ({ state }) => {\n        const { modifiersData, placement } = state as any\n        if (['right', 'left'].includes(placement)) return\n        modifiersData.arrow.x = 35\n      },\n      requires: ['arrow'],\n    },\n  ],\n}\n\nexport default defineComponent({\n  name: 'ElCascader',\n\n  components: {\n    ElCascaderPanel,\n    ElInput,\n    ElPopper,\n    ElScrollbar,\n    ElTag,\n    ElIcon,\n    CircleClose,\n    Check,\n    ArrowDown,\n  },\n\n  directives: {\n    Clickoutside,\n  },\n\n  props: {\n    ...CommonProps,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    placeholder: {\n      type: String,\n    },\n    disabled: Boolean,\n    clearable: Boolean,\n    filterable: Boolean,\n    filterMethod: {\n      type: Function as PropType<\n        (node: CascaderNode, keyword: string) => boolean\n      >,\n      default: (node: CascaderNode, keyword: string) =>\n        node.text.includes(keyword),\n    },\n    separator: {\n      type: String,\n      default: ' / ',\n    },\n    showAllLevels: {\n      type: Boolean,\n      default: true,\n    },\n    collapseTags: Boolean,\n    debounce: {\n      type: Number,\n      default: 300,\n    },\n    beforeFilter: {\n      type: Function as PropType<(value: string) => boolean | Promise<any>>,\n      default: () => true,\n    },\n    popperClass: {\n      type: String,\n      default: '',\n    },\n    popperAppendToBody: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  emits: [\n    UPDATE_MODEL_EVENT,\n    CHANGE_EVENT,\n    'focus',\n    'blur',\n    'visible-change',\n    'expand-change',\n    'remove-tag',\n  ],\n\n  setup(props, { emit }) {\n    let inputInitialHeight = 0\n    let pressDeleteCount = 0\n\n    const { t } = useLocale()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const popper: Ref<popperType | null> = ref(null)\n    const input: Ref<inputType | null> = ref(null)\n    const tagWrapper = ref(null)\n    const panel: Ref<cascaderPanelType | null> = ref(null)\n    const suggestionPanel: Ref<suggestionPanelType | null> = ref(null)\n    const popperVisible = ref(false)\n    const inputHover = ref(false)\n    const filtering = ref(false)\n    const inputValue = ref('')\n    const searchInputValue = ref('')\n    const presentTags: Ref<Tag[]> = ref([])\n    const suggestions: Ref<CascaderNode[]> = ref([])\n    const isOnComposition = ref(false)\n\n    const isDisabled = computed(() => props.disabled || elForm.disabled)\n    const inputPlaceholder = computed(\n      () => props.placeholder || t('el.cascader.placeholder')\n    )\n    const realSize = useSize()\n    const tagSize = computed(() =>\n      ['small'].includes(realSize.value) ? 'small' : 'default'\n    )\n    const multiple = computed(() => !!props.props.multiple)\n    const readonly = computed(() => !props.filterable || multiple.value)\n    const searchKeyword = computed(() =>\n      multiple.value ? searchInputValue.value : inputValue.value\n    )\n    const checkedNodes: ComputedRef<CascaderNode[]> = computed(\n      () => panel.value?.checkedNodes || []\n    )\n    const clearBtnVisible = computed(() => {\n      if (\n        !props.clearable ||\n        isDisabled.value ||\n        filtering.value ||\n        !inputHover.value\n      )\n        return false\n\n      return !!checkedNodes.value.length\n    })\n    const presentText = computed(() => {\n      const { showAllLevels, separator } = props\n      const nodes = checkedNodes.value\n      return nodes.length\n        ? multiple.value\n          ? ' '\n          : nodes[0].calcText(showAllLevels, separator)\n        : ''\n    })\n\n    const checkedValue = computed<CascaderValue>({\n      get() {\n        return props.modelValue\n      },\n      set(val) {\n        emit(UPDATE_MODEL_EVENT, val)\n        emit(CHANGE_EVENT, val)\n        elFormItem.validate?.('change')\n      },\n    })\n\n    const popperPaneRef = computed(() => {\n      return popper.value?.popperRef\n    })\n\n    const togglePopperVisible = (visible?: boolean) => {\n      if (isDisabled.value) return\n\n      visible = visible ?? !popperVisible.value\n\n      if (visible !== popperVisible.value) {\n        popperVisible.value = visible\n        input.value?.input?.setAttribute('aria-expanded', `${visible}`)\n\n        if (visible) {\n          updatePopperPosition()\n          nextTick(panel.value?.scrollToExpandingNode)\n        } else if (props.filterable) {\n          const { value } = presentText\n          inputValue.value = value\n          searchInputValue.value = value\n        }\n\n        emit('visible-change', visible)\n      }\n    }\n\n    const updatePopperPosition = () => {\n      nextTick(popper.value?.update)\n    }\n\n    const hideSuggestionPanel = () => {\n      filtering.value = false\n    }\n\n    const genTag = (node: CascaderNode): Tag => {\n      const { showAllLevels, separator } = props\n      return {\n        node,\n        key: node.uid,\n        text: node.calcText(showAllLevels, separator),\n        hitState: false,\n        closable: !isDisabled.value && !node.isDisabled,\n      }\n    }\n\n    const deleteTag = (tag: Tag) => {\n      const node = tag.node as CascaderNode\n      node.doCheck(false)\n      panel.value?.calculateCheckedValue()\n      emit('remove-tag', node.valueByOption)\n    }\n\n    const calculatePresentTags = () => {\n      if (!multiple.value) return\n\n      const nodes = checkedNodes.value\n      const tags: Tag[] = []\n\n      if (nodes.length) {\n        const [first, ...rest] = nodes\n        const restCount = rest.length\n\n        tags.push(genTag(first))\n\n        if (restCount) {\n          if (props.collapseTags) {\n            tags.push({\n              key: -1,\n              text: `+ ${restCount}`,\n              closable: false,\n            })\n          } else {\n            rest.forEach((node) => tags.push(genTag(node)))\n          }\n        }\n      }\n\n      presentTags.value = tags\n    }\n\n    const calculateSuggestions = () => {\n      const { filterMethod, showAllLevels, separator } = props\n      const res = panel.value\n        ?.getFlattedNodes(!props.props.checkStrictly)\n        ?.filter((node) => {\n          if (node.isDisabled) return false\n          node.calcText(showAllLevels, separator)\n          return filterMethod(node, searchKeyword.value)\n        })\n\n      if (multiple.value) {\n        presentTags.value.forEach((tag) => {\n          tag.hitState = false\n        })\n      }\n\n      filtering.value = true\n      suggestions.value = res!\n      updatePopperPosition()\n    }\n\n    const focusFirstNode = () => {\n      let firstNode!: HTMLElement\n\n      if (filtering.value && suggestionPanel.value) {\n        firstNode = suggestionPanel.value.$el.querySelector(\n          '.el-cascader__suggestion-item'\n        )\n      } else {\n        firstNode = panel.value?.$el.querySelector(\n          '.el-cascader-node[tabindex=\"-1\"]'\n        )\n      }\n\n      if (firstNode) {\n        firstNode.focus()\n        !filtering.value && firstNode.click()\n      }\n    }\n\n    const updateStyle = () => {\n      const inputInner = input.value?.input\n      const tagWrapperEl = tagWrapper.value\n      const suggestionPanelEl = suggestionPanel.value?.$el\n\n      if (!isClient || !inputInner) return\n\n      if (suggestionPanelEl) {\n        const suggestionList = suggestionPanelEl.querySelector(\n          '.el-cascader__suggestion-list'\n        )\n        suggestionList.style.minWidth = `${inputInner.offsetWidth}px`\n      }\n\n      if (tagWrapperEl) {\n        const { offsetHeight } = tagWrapperEl\n        const height =\n          presentTags.value.length > 0\n            ? `${Math.max(offsetHeight + 6, inputInitialHeight)}px`\n            : `${inputInitialHeight}px`\n        inputInner.style.height = height\n        updatePopperPosition()\n      }\n    }\n\n    const getCheckedNodes = (leafOnly: boolean) => {\n      return panel.value?.getCheckedNodes(leafOnly)\n    }\n\n    const handleExpandChange = (value: CascaderValue) => {\n      updatePopperPosition()\n      emit('expand-change', value)\n    }\n\n    const handleComposition = (event: CompositionEvent) => {\n      const text = (event.target as HTMLInputElement)?.value\n      if (event.type === 'compositionend') {\n        isOnComposition.value = false\n        nextTick(() => handleInput(text))\n      } else {\n        const lastCharacter = text[text.length - 1] || ''\n        isOnComposition.value = !isKorean(lastCharacter)\n      }\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (isOnComposition.value) return\n\n      switch (e.code) {\n        case EVENT_CODE.enter:\n          togglePopperVisible()\n          break\n        case EVENT_CODE.down:\n          togglePopperVisible(true)\n          nextTick(focusFirstNode)\n          e.preventDefault()\n          break\n        case EVENT_CODE.esc:\n        case EVENT_CODE.tab:\n          togglePopperVisible(false)\n          break\n      }\n    }\n\n    const handleClear = () => {\n      panel.value?.clearCheckedNodes()\n      togglePopperVisible(false)\n    }\n\n    const handleSuggestionClick = (node: CascaderNode) => {\n      const { checked } = node\n\n      if (multiple.value) {\n        panel.value?.handleCheckChange(node, !checked, false)\n      } else {\n        !checked && panel.value?.handleCheckChange(node, true, false)\n        togglePopperVisible(false)\n      }\n    }\n\n    const handleSuggestionKeyDown = (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          const distance = code === EVENT_CODE.up ? -1 : 1\n          focusNode(\n            getSibling(\n              target,\n              distance,\n              '.el-cascader__suggestion-item[tabindex=\"-1\"]'\n            )\n          )\n          break\n        }\n        case EVENT_CODE.enter:\n          target.click()\n          break\n        case EVENT_CODE.esc:\n        case EVENT_CODE.tab:\n          togglePopperVisible(false)\n          break\n      }\n    }\n\n    const handleDelete = () => {\n      const tags = presentTags.value\n      const lastTag = tags[tags.length - 1]\n      pressDeleteCount = searchInputValue.value ? 0 : pressDeleteCount + 1\n\n      if (!lastTag || !pressDeleteCount) return\n\n      if (lastTag.hitState) {\n        deleteTag(lastTag)\n      } else {\n        lastTag.hitState = true\n      }\n    }\n\n    const handleFilter = debounce(() => {\n      const { value } = searchKeyword\n\n      if (!value) return\n\n      const passed = props.beforeFilter(value)\n\n      if (isPromise(passed)) {\n        passed.then(calculateSuggestions).catch(() => {\n          /* prevent log error */\n        })\n      } else if (passed !== false) {\n        calculateSuggestions()\n      } else {\n        hideSuggestionPanel()\n      }\n    }, props.debounce)\n\n    const handleInput = (val: string, e?: KeyboardEvent) => {\n      !popperVisible.value && togglePopperVisible(true)\n\n      if (e?.isComposing) return\n\n      val ? handleFilter() : hideSuggestionPanel()\n    }\n\n    watch(filtering, updatePopperPosition)\n\n    watch([checkedNodes, isDisabled], calculatePresentTags)\n\n    watch(presentTags, () => {\n      nextTick(() => updateStyle())\n    })\n\n    watch(presentText, (val) => (inputValue.value = val), { immediate: true })\n\n    onMounted(() => {\n      const inputEl = input.value?.$el\n      inputInitialHeight =\n        inputEl?.offsetHeight ||\n        INPUT_HEIGHT_MAP[realSize.value] ||\n        DEFAULT_INPUT_HEIGHT\n      addResizeListener(inputEl, updateStyle)\n    })\n\n    onBeforeUnmount(() => {\n      removeResizeListener(input.value?.$el, updateStyle)\n    })\n\n    return {\n      Effect,\n      popperOptions,\n      popper,\n      popperPaneRef,\n      input,\n      tagWrapper,\n      panel,\n      suggestionPanel,\n      popperVisible,\n      inputHover,\n      inputPlaceholder,\n      filtering,\n      presentText,\n      checkedValue,\n      inputValue,\n      searchInputValue,\n      presentTags,\n      suggestions,\n      isDisabled,\n      isOnComposition,\n      realSize,\n      tagSize,\n      multiple,\n      readonly,\n      clearBtnVisible,\n      t,\n      togglePopperVisible,\n      hideSuggestionPanel,\n      deleteTag,\n      focusFirstNode,\n      getCheckedNodes,\n      handleExpandChange,\n      handleKeyDown,\n      handleComposition,\n      handleClear,\n      handleSuggestionClick,\n      handleSuggestionKeyDown,\n      handleDelete,\n      handleInput,\n    }\n  },\n})\n</script>\n"],"names":["_createVNode","_withCtx","_renderSlot"],"mappings":";;;;;;;;;EAsE6B,KAAI;EAAa;;;;8CAmED;;;;;;;;;;;;;;wBAxI3C;IACE;IACQ;;IACR;IACC,gBAAc,EAAE;IACjB;IACC;IACA;IACA;IACA,yBAAuB;IACxB;IACC,kBAAgB;;IAEjB;;;;;;;;;;QAWK,2CAAa;;QAEbA,eAAU;;;;UAIT;;;;UAEC;UACA,UAAU;UACV,4BAAoB;UACpB,kBAAgB;UAChB,mBAAc;UACd;UACA,kBAAgB,wBAAmB;UACnC;UACA;;UAEA,MAAI;iBACC;;;;;qBAKC,EAACC;;;;;;;;;;;uBASE;;;;;kBAKL;;;;;;;;;;;;;;qBAUC,EAAE,OAAO;;;sCAGK;;kBAElB;;;;;;;;;mCAMqB;;;sGACS;;;iCAGhB;;;;oBAIb;oBACA;;;;;;;;;;;;;;;;;sBAQP;;aAEM;;;;QAGH,KAAK;QACL;QACA;QACA;QACA;;;;;;;;;;;;;;;;;kCAca;;;;;sBAKTC,eAAY;+EACqB;;;;;;iCAGL,aAAS;;;;;;;;"}
+{"version":3,"file":"index.vue_vue_type_template_id_0429c2db_lang.js","sources":["../../../../../../packages/components/cascader/src/index.vue?vue&type=template&id=0429c2db&lang.js"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"tooltipRef\"\n    v-model:visible=\"popperVisible\"\n    :append-to-body=\"popperAppendToBody\"\n    :popper-class=\"`el-cascader__dropdown ${popperClass}`\"\n    :popper-options=\"popperOptions\"\n    :fallback-placements=\"['bottom-start', 'top-start', 'right', 'left']\"\n    :stop-popper-mouse-event=\"false\"\n    :gpu-acceleration=\"false\"\n    placement=\"bottom-start\"\n    transition=\"el-zoom-in-top\"\n    effect=\"light\"\n    pure\n    persistent\n    @hide=\"hideSuggestionPanel\"\n  >\n    <template #default>\n      <div\n        v-clickoutside:[popperPaneRef]=\"() => togglePopperVisible(false)\"\n        :class=\"[\n          'el-cascader',\n          realSize && `el-cascader--${realSize}`,\n          { 'is-disabled': isDisabled },\n        ]\"\n        @click=\"() => togglePopperVisible(readonly ? undefined : true)\"\n        @keydown=\"handleKeyDown\"\n        @mouseenter=\"inputHover = true\"\n        @mouseleave=\"inputHover = false\"\n      >\n        <el-input\n          ref=\"input\"\n          v-model.trim=\"inputValue\"\n          :placeholder=\"inputPlaceholder\"\n          :readonly=\"readonly\"\n          :disabled=\"isDisabled\"\n          :validate-event=\"false\"\n          :size=\"realSize\"\n          :class=\"{ 'is-focus': popperVisible }\"\n          @compositionstart=\"handleComposition\"\n          @compositionupdate=\"handleComposition\"\n          @compositionend=\"handleComposition\"\n          @focus=\"(e) => $emit('focus', e)\"\n          @blur=\"(e) => $emit('blur', e)\"\n          @input=\"handleInput\"\n        >\n          <template #suffix>\n            <el-icon\n              v-if=\"clearBtnVisible\"\n              key=\"clear\"\n              class=\"el-input__icon icon-circle-close\"\n              @click.stop=\"handleClear\"\n            >\n              <circle-close />\n            </el-icon>\n            <el-icon\n              v-else\n              key=\"arrow-down\"\n              :class=\"[\n                'el-input__icon',\n                'icon-arrow-down',\n                popperVisible && 'is-reverse',\n              ]\"\n              @click.stop=\"togglePopperVisible()\"\n            >\n              <arrow-down />\n            </el-icon>\n          </template>\n        </el-input>\n\n        <div v-if=\"multiple\" ref=\"tagWrapper\" class=\"el-cascader__tags\">\n          <el-tag\n            v-for=\"tag in presentTags\"\n            :key=\"tag.key\"\n            type=\"info\"\n            :size=\"tagSize\"\n            :hit=\"tag.hitState\"\n            :closable=\"tag.closable\"\n            disable-transitions\n            @close=\"deleteTag(tag)\"\n          >\n            <span>{{ tag.text }}</span>\n          </el-tag>\n          <input\n            v-if=\"filterable && !isDisabled\"\n            v-model.trim=\"searchInputValue\"\n            type=\"text\"\n            class=\"el-cascader__search-input\"\n            :placeholder=\"presentText ? '' : inputPlaceholder\"\n            @input=\"(e) => handleInput(searchInputValue, e)\"\n            @click.stop=\"togglePopperVisible(true)\"\n            @keydown.delete=\"handleDelete\"\n            @compositionstart=\"handleComposition\"\n            @compositionupdate=\"handleComposition\"\n            @compositionend=\"handleComposition\"\n          />\n        </div>\n      </div>\n    </template>\n\n    <template #content>\n      <el-cascader-panel\n        v-show=\"!filtering\"\n        ref=\"panel\"\n        v-model=\"checkedValue\"\n        :options=\"options\"\n        :props=\"props\"\n        :border=\"false\"\n        :render-label=\"$slots.default\"\n        @expand-change=\"handleExpandChange\"\n        @close=\"$nextTick(() => togglePopperVisible(false))\"\n      />\n      <el-scrollbar\n        v-if=\"filterable\"\n        v-show=\"filtering\"\n        ref=\"suggestionPanel\"\n        tag=\"ul\"\n        class=\"el-cascader__suggestion-panel\"\n        view-class=\"el-cascader__suggestion-list\"\n        @keydown=\"handleSuggestionKeyDown\"\n      >\n        <template v-if=\"suggestions.length\">\n          <li\n            v-for=\"item in suggestions\"\n            :key=\"item.uid\"\n            :class=\"[\n              'el-cascader__suggestion-item',\n              item.checked && 'is-checked',\n            ]\"\n            :tabindex=\"-1\"\n            @click=\"handleSuggestionClick(item)\"\n          >\n            <span>{{ item.text }}</span>\n            <el-icon v-if=\"item.checked\"><check /></el-icon>\n          </li>\n        </template>\n        <slot v-else name=\"empty\">\n          <li class=\"el-cascader__empty-text\">\n            {{ t('el.cascader.noMatch') }}\n          </li>\n        </slot>\n      </el-scrollbar>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  onBeforeUnmount,\n  ref,\n  watch,\n} from 'vue'\nimport { isPromise } from '@vue/shared'\nimport debounce from 'lodash/debounce'\n\nimport { isClient } from '@vueuse/core'\nimport ElCascaderPanel, {\n  CommonProps,\n} from '@element-plus/components/cascader-panel'\nimport ElInput from '@element-plus/components/input'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElTag from '@element-plus/components/tag'\nimport ElIcon from '@element-plus/components/icon'\n\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport { ClickOutside as Clickoutside } from '@element-plus/directives'\nimport { useLocale, useSize } from '@element-plus/hooks'\n\nimport { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport {\n  addResizeListener,\n  removeResizeListener,\n} from '@element-plus/utils/resize-event'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { isKorean } from '@element-plus/utils/isDef'\nimport { CircleClose, Check, ArrowDown } from '@element-plus/icons-vue'\n\nimport type { Options } from '@element-plus/components/popper'\nimport type { ComputedRef, PropType, Ref } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type {\n  CascaderValue,\n  CascaderNode,\n  Tag,\n} from '@element-plus/components/cascader-panel'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\ntype cascaderPanelType = InstanceType<typeof ElCascaderPanel>\ntype tooltipType = InstanceType<typeof ElTooltip>\ntype inputType = InstanceType<typeof ElInput>\ntype suggestionPanelType = InstanceType<typeof ElScrollbar>\n\nconst DEFAULT_INPUT_HEIGHT = 40\n\nconst INPUT_HEIGHT_MAP = {\n  large: 36,\n  default: 32,\n  small: 28,\n}\n\nconst popperOptions: Partial<Options> = {\n  modifiers: [\n    {\n      name: 'arrowPosition',\n      enabled: true,\n      phase: 'main',\n      fn: ({ state }) => {\n        const { modifiersData, placement } = state as any\n        if (['right', 'left'].includes(placement)) return\n        modifiersData.arrow.x = 35\n      },\n      requires: ['arrow'],\n    },\n  ],\n}\n\nexport default defineComponent({\n  name: 'ElCascader',\n\n  components: {\n    ElCascaderPanel,\n    ElInput,\n    ElTooltip,\n    ElScrollbar,\n    ElTag,\n    ElIcon,\n    CircleClose,\n    Check,\n    ArrowDown,\n  },\n\n  directives: {\n    Clickoutside,\n  },\n\n  props: {\n    ...CommonProps,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    placeholder: {\n      type: String,\n    },\n    disabled: Boolean,\n    clearable: Boolean,\n    filterable: Boolean,\n    filterMethod: {\n      type: Function as PropType<\n        (node: CascaderNode, keyword: string) => boolean\n      >,\n      default: (node: CascaderNode, keyword: string) =>\n        node.text.includes(keyword),\n    },\n    separator: {\n      type: String,\n      default: ' / ',\n    },\n    showAllLevels: {\n      type: Boolean,\n      default: true,\n    },\n    collapseTags: Boolean,\n    debounce: {\n      type: Number,\n      default: 300,\n    },\n    beforeFilter: {\n      type: Function as PropType<(value: string) => boolean | Promise<any>>,\n      default: () => true,\n    },\n    popperClass: {\n      type: String,\n      default: '',\n    },\n    popperAppendToBody: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  emits: [\n    UPDATE_MODEL_EVENT,\n    CHANGE_EVENT,\n    'focus',\n    'blur',\n    'visible-change',\n    'expand-change',\n    'remove-tag',\n  ],\n\n  setup(props, { emit }) {\n    let inputInitialHeight = 0\n    let pressDeleteCount = 0\n\n    const { t } = useLocale()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const tooltipRef: Ref<tooltipType | null> = ref(null)\n    const input: Ref<inputType | null> = ref(null)\n    const tagWrapper = ref(null)\n    const panel: Ref<cascaderPanelType | null> = ref(null)\n    const suggestionPanel: Ref<suggestionPanelType | null> = ref(null)\n    const popperVisible = ref(false)\n    const inputHover = ref(false)\n    const filtering = ref(false)\n    const inputValue = ref('')\n    const searchInputValue = ref('')\n    const presentTags: Ref<Tag[]> = ref([])\n    const suggestions: Ref<CascaderNode[]> = ref([])\n    const isOnComposition = ref(false)\n\n    const isDisabled = computed(() => props.disabled || elForm.disabled)\n    const inputPlaceholder = computed(\n      () => props.placeholder || t('el.cascader.placeholder')\n    )\n    const realSize = useSize()\n    const tagSize = computed(() =>\n      ['small'].includes(realSize.value) ? 'small' : 'default'\n    )\n    const multiple = computed(() => !!props.props.multiple)\n    const readonly = computed(() => !props.filterable || multiple.value)\n    const searchKeyword = computed(() =>\n      multiple.value ? searchInputValue.value : inputValue.value\n    )\n    const checkedNodes: ComputedRef<CascaderNode[]> = computed(\n      () => panel.value?.checkedNodes || []\n    )\n    const clearBtnVisible = computed(() => {\n      if (\n        !props.clearable ||\n        isDisabled.value ||\n        filtering.value ||\n        !inputHover.value\n      )\n        return false\n\n      return !!checkedNodes.value.length\n    })\n    const presentText = computed(() => {\n      const { showAllLevels, separator } = props\n      const nodes = checkedNodes.value\n      return nodes.length\n        ? multiple.value\n          ? ' '\n          : nodes[0].calcText(showAllLevels, separator)\n        : ''\n    })\n\n    const checkedValue = computed<CascaderValue>({\n      get() {\n        return props.modelValue\n      },\n      set(val) {\n        emit(UPDATE_MODEL_EVENT, val)\n        emit(CHANGE_EVENT, val)\n        elFormItem.validate?.('change')\n      },\n    })\n\n    const popperPaneRef = computed(() => {\n      return tooltipRef.value?.popperRef?.contentRef\n    })\n\n    const togglePopperVisible = (visible?: boolean) => {\n      if (isDisabled.value) return\n\n      visible = visible ?? !popperVisible.value\n\n      if (visible !== popperVisible.value) {\n        popperVisible.value = visible\n        input.value?.input?.setAttribute('aria-expanded', `${visible}`)\n\n        if (visible) {\n          updatePopperPosition()\n          nextTick(panel.value?.scrollToExpandingNode)\n        } else if (props.filterable) {\n          const { value } = presentText\n          inputValue.value = value\n          searchInputValue.value = value\n        }\n\n        emit('visible-change', visible)\n      }\n    }\n\n    const updatePopperPosition = () => {\n      nextTick(() => {\n        tooltipRef.value?.updatePopper()\n      })\n    }\n\n    const hideSuggestionPanel = () => {\n      filtering.value = false\n    }\n\n    const genTag = (node: CascaderNode): Tag => {\n      const { showAllLevels, separator } = props\n      return {\n        node,\n        key: node.uid,\n        text: node.calcText(showAllLevels, separator),\n        hitState: false,\n        closable: !isDisabled.value && !node.isDisabled,\n      }\n    }\n\n    const deleteTag = (tag: Tag) => {\n      const node = tag.node as CascaderNode\n      node.doCheck(false)\n      panel.value?.calculateCheckedValue()\n      emit('remove-tag', node.valueByOption)\n    }\n\n    const calculatePresentTags = () => {\n      if (!multiple.value) return\n\n      const nodes = checkedNodes.value\n      const tags: Tag[] = []\n\n      if (nodes.length) {\n        const [first, ...rest] = nodes\n        const restCount = rest.length\n\n        tags.push(genTag(first))\n\n        if (restCount) {\n          if (props.collapseTags) {\n            tags.push({\n              key: -1,\n              text: `+ ${restCount}`,\n              closable: false,\n            })\n          } else {\n            rest.forEach((node) => tags.push(genTag(node)))\n          }\n        }\n      }\n\n      presentTags.value = tags\n    }\n\n    const calculateSuggestions = () => {\n      const { filterMethod, showAllLevels, separator } = props\n      const res = panel.value\n        ?.getFlattedNodes(!props.props.checkStrictly)\n        ?.filter((node) => {\n          if (node.isDisabled) return false\n          node.calcText(showAllLevels, separator)\n          return filterMethod(node, searchKeyword.value)\n        })\n\n      if (multiple.value) {\n        presentTags.value.forEach((tag) => {\n          tag.hitState = false\n        })\n      }\n\n      filtering.value = true\n      suggestions.value = res!\n      updatePopperPosition()\n    }\n\n    const focusFirstNode = () => {\n      let firstNode!: HTMLElement\n\n      if (filtering.value && suggestionPanel.value) {\n        firstNode = suggestionPanel.value.$el.querySelector(\n          '.el-cascader__suggestion-item'\n        )\n      } else {\n        firstNode = panel.value?.$el.querySelector(\n          '.el-cascader-node[tabindex=\"-1\"]'\n        )\n      }\n\n      if (firstNode) {\n        firstNode.focus()\n        !filtering.value && firstNode.click()\n      }\n    }\n\n    const updateStyle = () => {\n      const inputInner = input.value?.input\n      const tagWrapperEl = tagWrapper.value\n      const suggestionPanelEl = suggestionPanel.value?.$el\n\n      if (!isClient || !inputInner) return\n\n      if (suggestionPanelEl) {\n        const suggestionList = suggestionPanelEl.querySelector(\n          '.el-cascader__suggestion-list'\n        )\n        suggestionList.style.minWidth = `${inputInner.offsetWidth}px`\n      }\n\n      if (tagWrapperEl) {\n        const { offsetHeight } = tagWrapperEl\n        const height =\n          presentTags.value.length > 0\n            ? `${Math.max(offsetHeight + 6, inputInitialHeight)}px`\n            : `${inputInitialHeight}px`\n        inputInner.style.height = height\n        updatePopperPosition()\n      }\n    }\n\n    const getCheckedNodes = (leafOnly: boolean) => {\n      return panel.value?.getCheckedNodes(leafOnly)\n    }\n\n    const handleExpandChange = (value: CascaderValue) => {\n      updatePopperPosition()\n      emit('expand-change', value)\n    }\n\n    const handleComposition = (event: CompositionEvent) => {\n      const text = (event.target as HTMLInputElement)?.value\n      if (event.type === 'compositionend') {\n        isOnComposition.value = false\n        nextTick(() => handleInput(text))\n      } else {\n        const lastCharacter = text[text.length - 1] || ''\n        isOnComposition.value = !isKorean(lastCharacter)\n      }\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (isOnComposition.value) return\n\n      switch (e.code) {\n        case EVENT_CODE.enter:\n          togglePopperVisible()\n          break\n        case EVENT_CODE.down:\n          togglePopperVisible(true)\n          nextTick(focusFirstNode)\n          e.preventDefault()\n          break\n        case EVENT_CODE.esc:\n        case EVENT_CODE.tab:\n          togglePopperVisible(false)\n          break\n      }\n    }\n\n    const handleClear = () => {\n      panel.value?.clearCheckedNodes()\n      togglePopperVisible(false)\n    }\n\n    const handleSuggestionClick = (node: CascaderNode) => {\n      const { checked } = node\n\n      if (multiple.value) {\n        panel.value?.handleCheckChange(node, !checked, false)\n      } else {\n        !checked && panel.value?.handleCheckChange(node, true, false)\n        togglePopperVisible(false)\n      }\n    }\n\n    const handleSuggestionKeyDown = (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          const distance = code === EVENT_CODE.up ? -1 : 1\n          focusNode(\n            getSibling(\n              target,\n              distance,\n              '.el-cascader__suggestion-item[tabindex=\"-1\"]'\n            )\n          )\n          break\n        }\n        case EVENT_CODE.enter:\n          target.click()\n          break\n        case EVENT_CODE.esc:\n        case EVENT_CODE.tab:\n          togglePopperVisible(false)\n          break\n      }\n    }\n\n    const handleDelete = () => {\n      const tags = presentTags.value\n      const lastTag = tags[tags.length - 1]\n      pressDeleteCount = searchInputValue.value ? 0 : pressDeleteCount + 1\n\n      if (!lastTag || !pressDeleteCount) return\n\n      if (lastTag.hitState) {\n        deleteTag(lastTag)\n      } else {\n        lastTag.hitState = true\n      }\n    }\n\n    const handleFilter = debounce(() => {\n      const { value } = searchKeyword\n\n      if (!value) return\n\n      const passed = props.beforeFilter(value)\n\n      if (isPromise(passed)) {\n        passed.then(calculateSuggestions).catch(() => {\n          /* prevent log error */\n        })\n      } else if (passed !== false) {\n        calculateSuggestions()\n      } else {\n        hideSuggestionPanel()\n      }\n    }, props.debounce)\n\n    const handleInput = (val: string, e?: KeyboardEvent) => {\n      !popperVisible.value && togglePopperVisible(true)\n\n      if (e?.isComposing) return\n\n      val ? handleFilter() : hideSuggestionPanel()\n    }\n\n    watch(filtering, updatePopperPosition)\n\n    watch([checkedNodes, isDisabled], calculatePresentTags)\n\n    watch(presentTags, () => {\n      nextTick(() => updateStyle())\n    })\n\n    watch(presentText, (val) => (inputValue.value = val), { immediate: true })\n\n    onMounted(() => {\n      const inputEl = input.value?.$el\n      inputInitialHeight =\n        inputEl?.offsetHeight ||\n        INPUT_HEIGHT_MAP[realSize.value] ||\n        DEFAULT_INPUT_HEIGHT\n      addResizeListener(inputEl, updateStyle)\n    })\n\n    onBeforeUnmount(() => {\n      removeResizeListener(input.value?.$el, updateStyle)\n    })\n\n    return {\n      popperOptions,\n      tooltipRef,\n      popperPaneRef,\n      input,\n      tagWrapper,\n      panel,\n      suggestionPanel,\n      popperVisible,\n      inputHover,\n      inputPlaceholder,\n      filtering,\n      presentText,\n      checkedValue,\n      inputValue,\n      searchInputValue,\n      presentTags,\n      suggestions,\n      isDisabled,\n      isOnComposition,\n      realSize,\n      tagSize,\n      multiple,\n      readonly,\n      clearBtnVisible,\n      t,\n      togglePopperVisible,\n      hideSuggestionPanel,\n      deleteTag,\n      focusFirstNode,\n      getCheckedNodes,\n      handleExpandChange,\n      handleKeyDown,\n      handleComposition,\n      handleClear,\n      handleSuggestionClick,\n      handleSuggestionKeyDown,\n      handleDelete,\n      handleInput,\n    }\n  },\n})\n</script>\n"],"names":["_createVNode","_withCtx","_renderSlot"],"mappings":";;;;;;;;;EAsE6B,KAAI;EAAa;;;;8CAmED;;;;;;;;;;;;;;wBAxI3C;IACE;IACQ;;IACP;IACA;IACA,kBAAgB;IAChB;IACA;IACA;IACD;IACA,UAAU,EAAC;IACX,MAAM,EAAC;;IAEP;;;;;;;;;;QAWK,2CAAa;;QAEbA,eAAU;;;;UAIT;;;;UAEC;UACA,UAAU;UACV,4BAAoB;UACpB,kBAAgB;UAChB,mBAAc;UACd;UACA,kBAAgB,wBAAmB;UACnC;UACA;;UAEA,MAAI;iBACC;;;;;qBAKC,EAACC;;;;;;;;;;;uBASE;;;;;kBAKL;;;;;;;;;;;;;;qBAUC,EAAE,OAAO;;;sCAGK;;kBAElB;;;;;;;;;mCAMqB;;;sGACS;;;iCAGhB;;;;oBAIb;oBACA;;;;;;;;;;;;;;;;;sBAQP;;aAEM;;;;QAGH,KAAK;QACL;QACA;QACA;QACA;;;;;;;;;;;;;;;;;kCAca;;;;;sBAKTC,eAAY;+EACqB;;;;;;iCAGL,aAAS;;;;;;;;"}

package/lib/components/cascader-panel/src/index.vue_vue_type_script_lang.js

@@ -194,17 +194,20 @@ var script = vue.defineComponent({
       switch (code) {
         case aria.EVENT_CODE.up:
         case aria.EVENT_CODE.down: {
+          e.preventDefault();
           const distance = code === aria.EVENT_CODE.up ? -1 : 1;
           aria.focusNode(aria.getSibling(target, distance, '.el-cascader-node[tabindex="-1"]'));
           break;
         }
         case aria.EVENT_CODE.left: {
+          e.preventDefault();
           const preMenu = menuList.value[utils.getMenuIndex(target) - 1];
           const expandedNode = preMenu == null ? void 0 : preMenu.$el.querySelector('.el-cascader-node[aria-expanded="true"]');
           aria.focusNode(expandedNode);
           break;
         }
         case aria.EVENT_CODE.right: {
+          e.preventDefault();
           const nextMenu = menuList.value[utils.getMenuIndex(target) + 1];
           const firstNode = nextMenu == null ? void 0 : nextMenu.$el.querySelector('.el-cascader-node[tabindex="-1"]');
           aria.focusNode(firstNode);

package/lib/components/cascader-panel/src/index.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_script_lang.js","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          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          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          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":["defineComponent","ElCascaderMenu","CommonProps","UPDATE_MODEL_EVENT","CHANGE_EVENT","store","config","Store","node","Node","deduplicate","nextTick","isClient","EVENT_CODE","focusNode","checkNode","provide","CASCADER_PANEL_INJECTION_KEY","isEqual","onBeforeUpdate"],"mappings":"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"}
+{"version":3,"file":"index.vue_vue_type_script_lang.js","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":["defineComponent","ElCascaderMenu","CommonProps","UPDATE_MODEL_EVENT","CHANGE_EVENT","store","config","Store","node","Node","deduplicate","nextTick","isClient","EVENT_CODE","focusNode","getSibling","checkNode","provide","isEqual"],"mappings":"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"}

package/lib/components/cascader-panel/src/index.vue_vue_type_template_id_97c48f5c_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_template_id_97c48f5c_lang.js","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          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          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          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.js","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;;;;;;"}

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

@@ -67,8 +67,8 @@ export declare const ElCheckbox: import("../../utils/types").SFCWithInstall<impo
     name?: string | undefined;
     modelValue?: string | number | boolean | undefined;
     label?: string | number | boolean | Record<string, any> | undefined;
-    tabindex?: string | number | undefined;
     id?: string | undefined;
+    tabindex?: string | number | undefined;
     trueLabel?: string | number | undefined;
     falseLabel?: string | number | undefined;
     controls?: string | undefined;

package/lib/components/checkbox/src/checkbox.vue.d.ts

@@ -69,8 +69,8 @@ declare const _default: import("vue").DefineComponent<{
     name?: string | undefined;
     modelValue?: string | number | boolean | undefined;
     label?: string | number | boolean | Record<string, any> | undefined;
-    tabindex?: string | number | undefined;
     id?: string | undefined;
+    tabindex?: string | number | undefined;
     trueLabel?: string | number | undefined;
     falseLabel?: string | number | undefined;
     controls?: string | undefined;