@element-plus/nightly 0.0.20220120 → 0.0.20220124

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"index.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=\"[\n      'bottom-start',\n      'bottom',\n      'top-start',\n      'top',\n      'right',\n      'left',\n    ]\"\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          $attrs.class,\n        ]\"\n        :style=\"$attrs.style\"\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', 'bottom', 'top'].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","ElInput","ElTooltip","ElScrollbar","ElTag","ElIcon","CircleClose","Check","ArrowDown","Clickoutside","CommonProps","isValidComponentSize","UPDATE_MODEL_EVENT","CHANGE_EVENT","useLocale","inject","elFormKey","elFormItemKey","ref","computed","useSize","nextTick","EVENT_CODE","isPromise","addResizeListener","removeResizeListener","_withCtx"],"mappings":"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"}

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

@@ -2,15 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./src/index.js');
+var index = require('./src/index.js');
 var types = require('./src/types.js');
 var config = require('./src/config.js');
-var index_vue_vue_type_script_lang = require('./src/index.vue_vue_type_script_lang.js');
 
-index_vue_vue_type_script_lang["default"].install = (app) => {
-  app.component(index_vue_vue_type_script_lang["default"].name, index_vue_vue_type_script_lang["default"]);
+index["default"].install = (app) => {
+  app.component(index["default"].name, index["default"]);
 };
-const _CascaderPanel = index_vue_vue_type_script_lang["default"];
+const _CascaderPanel = index["default"];
 const ElCascaderPanel = _CascaderPanel;
 
 exports.CASCADER_PANEL_INJECTION_KEY = types.CASCADER_PANEL_INJECTION_KEY;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/cascader-panel/index.ts"],"sourcesContent":["import CascaderPanel from './src/index.vue'\nimport type { App } from 'vue'\nimport type { SFCWithInstall } from '@element-plus/utils/types'\n\nCascaderPanel.install = (app: App): void => {\n  app.component(CascaderPanel.name, CascaderPanel)\n}\n\nconst _CascaderPanel = CascaderPanel as SFCWithInstall<typeof CascaderPanel>\n\nexport default _CascaderPanel\nexport const ElCascaderPanel = _CascaderPanel\nexport * from './src/types'\nexport * from './src/config'\n"],"names":["CascaderPanel"],"mappings":";;;;;;;;;AACAA,yCAAa,CAAC,OAAO,GAAG,CAAC,GAAG,KAAK;AACjC,EAAE,GAAG,CAAC,SAAS,CAACA,yCAAa,CAAC,IAAI,EAAEA,yCAAa,CAAC,CAAC;AACnD,CAAC,CAAC;AACG,MAAC,cAAc,GAAGA,0CAAc;AAEzB,MAAC,eAAe,GAAG;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/cascader-panel/index.ts"],"sourcesContent":["import CascaderPanel from './src/index.vue'\nimport type { App } from 'vue'\nimport type { SFCWithInstall } from '@element-plus/utils/types'\n\nCascaderPanel.install = (app: App): void => {\n  app.component(CascaderPanel.name, CascaderPanel)\n}\n\nconst _CascaderPanel = CascaderPanel as SFCWithInstall<typeof CascaderPanel>\n\nexport default _CascaderPanel\nexport const ElCascaderPanel = _CascaderPanel\nexport * from './src/types'\nexport * from './src/config'\n"],"names":["CascaderPanel"],"mappings":";;;;;;;;AACAA,gBAAa,CAAC,OAAO,GAAG,CAAC,GAAG,KAAK;AACjC,EAAE,GAAG,CAAC,SAAS,CAACA,gBAAa,CAAC,IAAI,EAAEA,gBAAa,CAAC,CAAC;AACnD,CAAC,CAAC;AACG,MAAC,cAAc,GAAGA,iBAAc;AAEzB,MAAC,eAAe,GAAG;;;;;;;;;;"}

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

@@ -2,11 +2,285 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_vue_vue_type_script_lang = require('./index.vue_vue_type_script_lang.js');
-var index_vue_vue_type_template_id_97c48f5c_lang = require('./index.vue_vue_type_template_id_97c48f5c_lang.js');
+var vue = require('vue');
+var isEqual = require('lodash/isEqual');
+var core = require('@vueuse/core');
+var aria = require('../../../utils/aria.js');
+var constants = require('../../../utils/constants.js');
+var scrollIntoView = require('../../../utils/scroll-into-view.js');
+var util = require('../../../utils/util.js');
+var menu = require('./menu.js');
+var store = require('./store.js');
+var node = require('./node.js');
+var config = require('./config.js');
+var utils = require('./utils.js');
+var types = require('./types.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 
-index_vue_vue_type_script_lang["default"].render = index_vue_vue_type_template_id_97c48f5c_lang.render;
-index_vue_vue_type_script_lang["default"].__file = "packages/components/cascader-panel/src/index.vue";
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-exports["default"] = index_vue_vue_type_script_lang["default"];
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+
+const _sfc_main = vue.defineComponent({
+  name: "ElCascaderPanel",
+  components: {
+    ElCascaderMenu: menu["default"]
+  },
+  props: {
+    ...config.CommonProps,
+    border: {
+      type: Boolean,
+      default: true
+    },
+    renderLabel: Function
+  },
+  emits: [constants.UPDATE_MODEL_EVENT, constants.CHANGE_EVENT, "close", "expand-change"],
+  setup(props, { emit, slots }) {
+    let manualChecked = false;
+    const config$1 = config.useCascaderConfig(props);
+    let store$1 = null;
+    const initialLoaded = vue.ref(true);
+    const menuList = vue.ref([]);
+    const checkedValue = vue.ref(null);
+    const menus = vue.ref([]);
+    const expandingNode = vue.ref(null);
+    const checkedNodes = vue.ref([]);
+    const isHoverMenu = vue.computed(() => config$1.value.expandTrigger === node.ExpandTrigger.HOVER);
+    const renderLabelFn = vue.computed(() => props.renderLabel || slots.default);
+    const initStore = () => {
+      const { options } = props;
+      const cfg = config$1.value;
+      manualChecked = false;
+      store$1 = new store["default"](options, cfg);
+      menus.value = [store$1.getNodes()];
+      if (cfg.lazy && util.isEmpty(props.options)) {
+        initialLoaded.value = false;
+        lazyLoad(void 0, (list) => {
+          if (list) {
+            store$1 = new store["default"](list, cfg);
+            menus.value = [store$1.getNodes()];
+          }
+          initialLoaded.value = true;
+          syncCheckedValue(false, true);
+        });
+      } else {
+        syncCheckedValue(false, true);
+      }
+    };
+    const lazyLoad = (node$1, cb) => {
+      const cfg = config$1.value;
+      node$1 = node$1 || new node["default"]({}, cfg, void 0, true);
+      node$1.loading = true;
+      const resolve = (dataList) => {
+        const _node = node$1;
+        const parent = _node.root ? null : _node;
+        dataList && (store$1 == null ? void 0 : store$1.appendNodes(dataList, parent));
+        _node.loading = false;
+        _node.loaded = true;
+        _node.childrenData = _node.childrenData || [];
+        cb && cb(dataList);
+      };
+      cfg.lazyLoad(node$1, resolve);
+    };
+    const expandNode = (node, silent) => {
+      var _a;
+      const { level } = node;
+      const newMenus = menus.value.slice(0, level);
+      let newExpandingNode;
+      if (node.isLeaf) {
+        newExpandingNode = node.pathNodes[level - 2];
+      } else {
+        newExpandingNode = node;
+        newMenus.push(node.children);
+      }
+      if (((_a = expandingNode.value) == null ? void 0 : _a.uid) !== (newExpandingNode == null ? void 0 : newExpandingNode.uid)) {
+        expandingNode.value = node;
+        menus.value = newMenus;
+        !silent && emit("expand-change", (node == null ? void 0 : node.pathValues) || []);
+      }
+    };
+    const handleCheckChange = (node, checked, emitClose = true) => {
+      const { checkStrictly, multiple } = config$1.value;
+      const oldNode = checkedNodes.value[0];
+      manualChecked = true;
+      !multiple && (oldNode == null ? void 0 : oldNode.doCheck(false));
+      node.doCheck(checked);
+      calculateCheckedValue();
+      emitClose && !multiple && !checkStrictly && emit("close");
+      !emitClose && !multiple && !checkStrictly && expandParentNode(node);
+    };
+    const expandParentNode = (node) => {
+      if (!node)
+        return;
+      node = node.parent;
+      expandParentNode(node);
+      node && expandNode(node);
+    };
+    const getFlattedNodes = (leafOnly) => {
+      return store$1 == null ? void 0 : store$1.getFlattedNodes(leafOnly);
+    };
+    const getCheckedNodes = (leafOnly) => {
+      var _a;
+      return (_a = getFlattedNodes(leafOnly)) == null ? void 0 : _a.filter((node) => node.checked !== false);
+    };
+    const clearCheckedNodes = () => {
+      checkedNodes.value.forEach((node) => node.doCheck(false));
+      calculateCheckedValue();
+    };
+    const calculateCheckedValue = () => {
+      var _a;
+      const { checkStrictly, multiple } = config$1.value;
+      const oldNodes = checkedNodes.value;
+      const newNodes = getCheckedNodes(!checkStrictly);
+      const nodes = utils.sortByOriginalOrder(oldNodes, newNodes);
+      const values = nodes.map((node) => node.valueByOption);
+      checkedNodes.value = nodes;
+      checkedValue.value = multiple ? values : (_a = values[0]) != null ? _a : null;
+    };
+    const syncCheckedValue = (loaded = false, forced = false) => {
+      const { modelValue } = props;
+      const { lazy, multiple, checkStrictly } = config$1.value;
+      const leafOnly = !checkStrictly;
+      if (!initialLoaded.value || manualChecked || !forced && isEqual__default["default"](modelValue, checkedValue.value))
+        return;
+      if (lazy && !loaded) {
+        const values = util.deduplicate(util.arrayFlat(util.coerceTruthyValueToArray(modelValue)));
+        const nodes = values.map((val) => store$1 == null ? void 0 : store$1.getNodeByValue(val)).filter((node) => !!node && !node.loaded && !node.loading);
+        if (nodes.length) {
+          nodes.forEach((node) => {
+            lazyLoad(node, () => syncCheckedValue(false, forced));
+          });
+        } else {
+          syncCheckedValue(true, forced);
+        }
+      } else {
+        const values = multiple ? util.coerceTruthyValueToArray(modelValue) : [modelValue];
+        const nodes = util.deduplicate(values.map((val) => store$1 == null ? void 0 : store$1.getNodeByValue(val, leafOnly)));
+        syncMenuState(nodes, false);
+        checkedValue.value = modelValue;
+      }
+    };
+    const syncMenuState = (newCheckedNodes, reserveExpandingState = true) => {
+      const { checkStrictly } = config$1.value;
+      const oldNodes = checkedNodes.value;
+      const newNodes = newCheckedNodes.filter((node) => !!node && (checkStrictly || node.isLeaf));
+      const oldExpandingNode = store$1 == null ? void 0 : store$1.getSameNode(expandingNode.value);
+      const newExpandingNode = reserveExpandingState && oldExpandingNode || newNodes[0];
+      if (newExpandingNode) {
+        newExpandingNode.pathNodes.forEach((node) => expandNode(node, true));
+      } else {
+        expandingNode.value = null;
+      }
+      oldNodes.forEach((node) => node.doCheck(false));
+      newNodes.forEach((node) => node.doCheck(true));
+      checkedNodes.value = newNodes;
+      vue.nextTick(scrollToExpandingNode);
+    };
+    const scrollToExpandingNode = () => {
+      if (!core.isClient)
+        return;
+      menuList.value.forEach((menu) => {
+        const menuElement = menu == null ? void 0 : menu.$el;
+        if (menuElement) {
+          const container = menuElement.querySelector(".el-scrollbar__wrap");
+          const activeNode = menuElement.querySelector(".el-cascader-node.is-active") || menuElement.querySelector(".el-cascader-node.in-active-path");
+          scrollIntoView["default"](container, activeNode);
+        }
+      });
+    };
+    const handleKeyDown = (e) => {
+      const target = e.target;
+      const { code } = e;
+      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);
+          break;
+        }
+        case aria.EVENT_CODE.enter:
+          utils.checkNode(target);
+          break;
+        case aria.EVENT_CODE.esc:
+        case aria.EVENT_CODE.tab:
+          emit("close");
+          break;
+      }
+    };
+    vue.provide(types.CASCADER_PANEL_INJECTION_KEY, vue.reactive({
+      config: config$1,
+      expandingNode,
+      checkedNodes,
+      isHoverMenu,
+      initialLoaded,
+      renderLabelFn,
+      lazyLoad,
+      expandNode,
+      handleCheckChange
+    }));
+    vue.watch([config$1, () => props.options], initStore, {
+      deep: true,
+      immediate: true
+    });
+    vue.watch(() => props.modelValue, () => {
+      manualChecked = false;
+      syncCheckedValue();
+    });
+    vue.watch(checkedValue, (val) => {
+      if (!isEqual__default["default"](val, props.modelValue)) {
+        emit(constants.UPDATE_MODEL_EVENT, val);
+        emit(constants.CHANGE_EVENT, val);
+      }
+    });
+    vue.onBeforeUpdate(() => menuList.value = []);
+    vue.onMounted(() => !util.isEmpty(props.modelValue) && syncCheckedValue());
+    return {
+      menuList,
+      menus,
+      checkedNodes,
+      handleKeyDown,
+      handleCheckChange,
+      getFlattedNodes,
+      getCheckedNodes,
+      clearCheckedNodes,
+      calculateCheckedValue,
+      scrollToExpandingNode
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_cascader_menu = vue.resolveComponent("el-cascader-menu");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass(["el-cascader-panel", _ctx.border && "is-bordered"]),
+    onKeydown: _cache[0] || (_cache[0] = (...args) => _ctx.handleKeyDown && _ctx.handleKeyDown(...args))
+  }, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.menus, (menu, index) => {
+      return vue.openBlock(), vue.createBlock(_component_el_cascader_menu, {
+        key: index,
+        ref_for: true,
+        ref: (item) => _ctx.menuList[index] = item,
+        index,
+        nodes: menu
+      }, null, 8, ["index", "nodes"]);
+    }), 128))
+  ], 34);
+}
+var CascaderPanel = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
+
+exports["default"] = CascaderPanel;
 //# sourceMappingURL=index.js.map

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

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

package/lib/components/cascader-panel/src/menu.js

@@ -2,11 +2,150 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var menu_vue_vue_type_script_lang = require('./menu.vue_vue_type_script_lang.js');
-var menu_vue_vue_type_template_id_9c79e4e2_lang = require('./menu.vue_vue_type_template_id_9c79e4e2_lang.js');
+var vue = require('vue');
+var index$1 = require('../../scrollbar/index.js');
+require('../../../hooks/index.js');
+var util = require('../../../utils/util.js');
+var iconsVue = require('@element-plus/icons-vue');
+var index = require('../../icon/index.js');
+var node = require('./node2.js');
+var types = require('./types.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index$2 = require('../../../hooks/use-locale/index.js');
 
-menu_vue_vue_type_script_lang["default"].render = menu_vue_vue_type_template_id_9c79e4e2_lang.render;
-menu_vue_vue_type_script_lang["default"].__file = "packages/components/cascader-panel/src/menu.vue";
+const _sfc_main = vue.defineComponent({
+  name: "ElCascaderMenu",
+  components: {
+    Loading: iconsVue.Loading,
+    ElIcon: index.ElIcon,
+    ElScrollbar: index$1.ElScrollbar,
+    ElCascaderNode: node["default"]
+  },
+  props: {
+    nodes: {
+      type: Array,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  },
+  setup(props) {
+    const instance = vue.getCurrentInstance();
+    const { t } = index$2.useLocale();
+    const id = util.generateId();
+    let activeNode = null;
+    let hoverTimer = null;
+    const panel = vue.inject(types.CASCADER_PANEL_INJECTION_KEY);
+    const hoverZone = vue.ref(null);
+    const isEmpty = vue.computed(() => !props.nodes.length);
+    const isLoading = vue.computed(() => !panel.initialLoaded);
+    const menuId = vue.computed(() => `cascader-menu-${id}-${props.index}`);
+    const handleExpand = (e) => {
+      activeNode = e.target;
+    };
+    const handleMouseMove = (e) => {
+      if (!panel.isHoverMenu || !activeNode || !hoverZone.value)
+        return;
+      if (activeNode.contains(e.target)) {
+        clearHoverTimer();
+        const el = instance.vnode.el;
+        const { left } = el.getBoundingClientRect();
+        const { offsetWidth, offsetHeight } = el;
+        const startX = e.clientX - left;
+        const top = activeNode.offsetTop;
+        const bottom = top + activeNode.offsetHeight;
+        hoverZone.value.innerHTML = `
+          <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${top} L${offsetWidth} 0 V${top} Z" />
+          <path style="pointer-events: auto;" fill="transparent" d="M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z" />
+        `;
+      } else if (!hoverTimer) {
+        hoverTimer = window.setTimeout(clearHoverZone, panel.config.hoverThreshold);
+      }
+    };
+    const clearHoverTimer = () => {
+      if (!hoverTimer)
+        return;
+      clearTimeout(hoverTimer);
+      hoverTimer = null;
+    };
+    const clearHoverZone = () => {
+      if (!hoverZone.value)
+        return;
+      hoverZone.value.innerHTML = "";
+      clearHoverTimer();
+    };
+    return {
+      panel,
+      hoverZone,
+      isEmpty,
+      isLoading,
+      menuId,
+      t,
+      handleExpand,
+      handleMouseMove,
+      clearHoverZone
+    };
+  }
+});
+const _hoisted_1 = {
+  key: 0,
+  class: "el-cascader-menu__empty-text"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "el-cascader-menu__empty-text"
+};
+const _hoisted_3 = {
+  key: 2,
+  ref: "hoverZone",
+  class: "el-cascader-menu__hover-zone"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_cascader_node = vue.resolveComponent("el-cascader-node");
+  const _component_loading = vue.resolveComponent("loading");
+  const _component_el_icon = vue.resolveComponent("el-icon");
+  const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
+  return vue.openBlock(), vue.createBlock(_component_el_scrollbar, {
+    key: _ctx.menuId,
+    tag: "ul",
+    role: "menu",
+    class: "el-cascader-menu",
+    "wrap-class": "el-cascader-menu__wrap",
+    "view-class": ["el-cascader-menu__list", _ctx.isEmpty && "is-empty"],
+    onMousemove: _ctx.handleMouseMove,
+    onMouseleave: _ctx.clearHoverZone
+  }, {
+    default: vue.withCtx(() => {
+      var _a;
+      return [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.nodes, (node) => {
+          return vue.openBlock(), vue.createBlock(_component_el_cascader_node, {
+            key: node.uid,
+            node,
+            "menu-id": _ctx.menuId,
+            onExpand: _ctx.handleExpand
+          }, null, 8, ["node", "menu-id", "onExpand"]);
+        }), 128)),
+        _ctx.isLoading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          vue.createVNode(_component_el_icon, {
+            size: "14",
+            class: "is-loading"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_loading)
+            ]),
+            _: 1
+          }),
+          vue.createTextVNode(" " + vue.toDisplayString(_ctx.t("el.cascader.loading")), 1)
+        ])) : _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, vue.toDisplayString(_ctx.t("el.cascader.noData")), 1)) : ((_a = _ctx.panel) == null ? void 0 : _a.isHoverMenu) ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_3, null, 512)) : vue.createCommentVNode("v-if", true)
+      ];
+    }),
+    _: 1
+  }, 8, ["view-class", "onMousemove", "onMouseleave"]);
+}
+var ElCascaderMenu = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
 
-exports["default"] = menu_vue_vue_type_script_lang["default"];
+exports["default"] = ElCascaderMenu;
 //# sourceMappingURL=menu.js.map

package/lib/components/cascader-panel/src/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"menu.js","sources":["../../../../../../packages/components/cascader-panel/src/menu.vue"],"sourcesContent":["<template>\n  <el-scrollbar\n    :key=\"menuId\"\n    tag=\"ul\"\n    role=\"menu\"\n    class=\"el-cascader-menu\"\n    wrap-class=\"el-cascader-menu__wrap\"\n    :view-class=\"['el-cascader-menu__list', isEmpty && 'is-empty']\"\n    @mousemove=\"handleMouseMove\"\n    @mouseleave=\"clearHoverZone\"\n  >\n    <el-cascader-node\n      v-for=\"node in nodes\"\n      :key=\"node.uid\"\n      :node=\"node\"\n      :menu-id=\"menuId\"\n      @expand=\"handleExpand\"\n    />\n    <div v-if=\"isLoading\" class=\"el-cascader-menu__empty-text\">\n      <el-icon size=\"14\" class=\"is-loading\">\n        <loading />\n      </el-icon>\n      {{ t('el.cascader.loading') }}\n    </div>\n    <div v-else-if=\"isEmpty\" class=\"el-cascader-menu__empty-text\">\n      {{ t('el.cascader.noData') }}\n    </div>\n    <svg\n      v-else-if=\"panel?.isHoverMenu\"\n      ref=\"hoverZone\"\n      class=\"el-cascader-menu__hover-zone\"\n    ></svg>\n  </el-scrollbar>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, getCurrentInstance, inject, ref } from 'vue'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport { useLocale } from '@element-plus/hooks'\nimport { generateId } from '@element-plus/utils/util'\nimport { Loading } from '@element-plus/icons-vue'\nimport ElIcon from '@element-plus/components/icon'\nimport ElCascaderNode from './node.vue'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\n\nimport type { default as CascaderNode } from './node'\nimport type { PropType } from 'vue'\nimport type { TimeoutHandle, Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  name: 'ElCascaderMenu',\n\n  components: {\n    Loading,\n    ElIcon,\n    ElScrollbar,\n    ElCascaderNode,\n  },\n\n  props: {\n    nodes: {\n      type: Array as PropType<CascaderNode[]>,\n      required: true,\n    },\n    index: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  setup(props) {\n    const instance = getCurrentInstance()!\n    const { t } = useLocale()\n    const id = generateId()\n    let activeNode: Nullable<HTMLElement> = null\n    let hoverTimer: Nullable<TimeoutHandle> = null\n\n    const panel = inject(CASCADER_PANEL_INJECTION_KEY)!\n\n    const hoverZone = ref<null | SVGSVGElement>(null)\n\n    const isEmpty = computed(() => !props.nodes.length)\n    const isLoading = computed(() => !panel.initialLoaded)\n    const menuId = computed(() => `cascader-menu-${id}-${props.index}`)\n\n    const handleExpand = (e: MouseEvent) => {\n      activeNode = e.target as HTMLElement\n    }\n\n    const handleMouseMove = (e: MouseEvent) => {\n      if (!panel.isHoverMenu || !activeNode || !hoverZone.value) return\n\n      if (activeNode.contains(e.target as HTMLElement)) {\n        clearHoverTimer()\n\n        const el = instance.vnode.el as HTMLElement\n        const { left } = el.getBoundingClientRect()\n        const { offsetWidth, offsetHeight } = el\n        const startX = e.clientX - left\n        const top = activeNode.offsetTop\n        const bottom = top + activeNode.offsetHeight\n\n        hoverZone.value.innerHTML = `\n          <path style=\"pointer-events: auto;\" fill=\"transparent\" d=\"M${startX} ${top} L${offsetWidth} 0 V${top} Z\" />\n          <path style=\"pointer-events: auto;\" fill=\"transparent\" d=\"M${startX} ${bottom} L${offsetWidth} ${offsetHeight} V${bottom} Z\" />\n        `\n      } else if (!hoverTimer) {\n        hoverTimer = window.setTimeout(\n          clearHoverZone,\n          panel.config.hoverThreshold\n        )\n      }\n    }\n\n    const clearHoverTimer = () => {\n      if (!hoverTimer) return\n      clearTimeout(hoverTimer)\n      hoverTimer = null\n    }\n\n    const clearHoverZone = () => {\n      if (!hoverZone.value) return\n      hoverZone.value.innerHTML = ''\n      clearHoverTimer()\n    }\n    return {\n      panel,\n      hoverZone,\n      isEmpty,\n      isLoading,\n      menuId,\n      t,\n      handleExpand,\n      handleMouseMove,\n      clearHoverZone,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","Loading","ElIcon","ElScrollbar","ElCascaderNode","getCurrentInstance","useLocale","generateId","inject","CASCADER_PANEL_INJECTION_KEY","ref","computed","_openBlock","_createBlock"],"mappings":";;;;;;;;;;;;;;;AAiDA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,aACVC;AAAA,YACAC;AAAA,iBACAC;AAAA,oBACAC;AAAA;AAAA,EAGF,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;AAAA,IAEZ,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;AAAA;AAAA,EAId,MAAM,OAAO;AACX,UAAM,WAAWC;AACjB,UAAM,EAAE,MAAMC;AACd,UAAM,KAAKC;AACX,QAAI,aAAoC;AACxC,QAAI,aAAsC;AAE1C,UAAM,QAAQC,WAAOC;AAErB,UAAM,YAAYC,QAA0B;AAE5C,UAAM,UAAUC,aAAS,MAAM,CAAC,MAAM,MAAM;AAC5C,UAAM,YAAYA,aAAS,MAAM,CAAC,MAAM;AACxC,UAAM,SAASA,aAAS,MAAM,iBAAiB,MAAM,MAAM;AAE3D,UAAM,eAAe,CAAC,MAAkB;AACtC,mBAAa,EAAE;AAAA;AAGjB,UAAM,kBAAkB,CAAC,MAAkB;AACzC,UAAI,CAAC,MAAM,eAAe,CAAC,cAAc,CAAC,UAAU;AAAO;AAE3D,UAAI,WAAW,SAAS,EAAE,SAAwB;AAChD;AAEA,cAAM,KAAK,SAAS,MAAM;AAC1B,cAAM,EAAE,SAAS,GAAG;AACpB,cAAM,EAAE,aAAa,iBAAiB;AACtC,cAAM,SAAS,EAAE,UAAU;AAC3B,cAAM,MAAM,WAAW;AACvB,cAAM,SAAS,MAAM,WAAW;AAEhC,kBAAU,MAAM,YAAY;AAAA,uEACmC,UAAU,QAAQ,kBAAkB;AAAA,uEACpC,UAAU,WAAW,eAAe,iBAAiB;AAAA;AAAA,iBAE3G,CAAC,YAAY;AACtB,qBAAa,OAAO,WAClB,gBACA,MAAM,OAAO;AAAA;AAAA;AAKnB,UAAM,kBAAkB,MAAM;AAC5B,UAAI,CAAC;AAAY;AACjB,mBAAa;AACb,mBAAa;AAAA;AAGf,UAAM,iBAAiB,MAAM;AAC3B,UAAI,CAAC,UAAU;AAAO;AACtB,gBAAU,MAAM,YAAY;AAC5B;AAAA;AAEF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;EApHoB,KAAK;AAAA;;;EAMF,KAAK;AAAA;;;EAK5B,KAAI;AAAA,EACJ,KAAK;AAAA;;;;;;;SA5BDC,iBAAMC;AAAA,IACZ,KAAI,KAAI;AAAA,IACR,KAAI;AAAA,IACJ,MAAK;AAAA,IACL;AAAA,IACC,cAAU;AAAA,IACV,cAAW,2BAAe;AAAA,IAC1B,aAAU,KAAE;AAAA;;+BAEb;AAAA;;AAEgB,uBACH;AAAA,UACV;AAAA,qBACQ;AAAA;;;AAEA;AAGC;AAFQ;AAAM;;mBACtB;AAAW;;;;;;;;;;;;;;;;;"}

package/lib/components/cascader-panel/src/node.vue.d.ts

@@ -21,6 +21,7 @@ declare const _default: import("vue").DefineComponent<{
     handleExpand: () => void;
     handleClick: () => void;
     handleCheck: (checked: boolean) => void;
+    handleSelectCheck: (checked: boolean) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "expand"[], "expand", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     node: {
         type: PropType<CascaderNode>;