npm - @element-plus/nightly - Versions diffs - 0.0.20220105 → 0.0.20220109 - Mend

@element-plus/nightly 0.0.20220105 → 0.0.20220109

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (380) hide show

package/lib/components/cascader/src/index.vue.d.ts CHANGED Viewed

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

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

@@ -36,10 +36,10 @@ var script = vue.defineComponent({
   },
   emits: [constants.UPDATE_MODEL_EVENT, constants.CHANGE_EVENT, "close", "expand-change"],
   setup(props, { emit, slots }) {
-    let initialLoaded = true;
     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([]);
@@ -54,13 +54,13 @@ var script = vue.defineComponent({
       store$1 = new store["default"](options, cfg);
       menus.value = [store$1.getNodes()];
       if (cfg.lazy && util.isEmpty(props.options)) {
-        initialLoaded = false;
+        initialLoaded.value = false;
         lazyLoad(void 0, (list) => {
           if (list) {
             store$1 = new store["default"](list, cfg);
             menus.value = [store$1.getNodes()];
           }
-          initialLoaded = true;
+          initialLoaded.value = true;
           syncCheckedValue(false, true);
         });
       } else {
@@ -141,7 +141,7 @@ var script = vue.defineComponent({
       const { modelValue } = props;
       const { lazy, multiple, checkStrictly } = config$1.value;
       const leafOnly = !checkStrictly;
-      if (!initialLoaded || manualChecked || !forced && isEqual__default["default"](modelValue, checkedValue.value))
+      if (!initialLoaded.value || manualChecked || !forced && isEqual__default["default"](modelValue, checkedValue.value))
         return;
       if (lazy && !loaded) {
         const values = util.deduplicate(util.arrayFlat(util.coerceTruthyValueToArray(modelValue)));
@@ -227,6 +227,7 @@ var script = vue.defineComponent({
       expandingNode,
       checkedNodes,
       isHoverMenu,
+      initialLoaded,
       renderLabelFn,
       lazyLoad,
       expandNode,

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

	@@ -1 +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 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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"}
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 // 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","node","Node","deduplicate","nextTick","isClient","EVENT_CODE","focusNode","getSibling","checkNode","provide","isEqual","isEmpty"],"mappings":"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"}

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

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

package/lib/components/cascader-panel/src/menu.vue.d.ts CHANGED Viewed

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

package/lib/components/cascader-panel/src/menu.vue_vue_type_script_lang.js CHANGED Viewed

@@ -3,18 +3,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
-var index = require('../../scrollbar/index.js');
+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');
 require('./node2.js');
 var types = require('./types.js');
 var node_vue_vue_type_script_lang = require('./node.vue_vue_type_script_lang.js');
-var index$1 = require('../../../hooks/use-locale/index.js');
+var index$2 = require('../../../hooks/use-locale/index.js');
 var script = vue.defineComponent({
   name: "ElCascaderMenu",
   components: {
-    ElScrollbar: index.ElScrollbar,
+    Loading: iconsVue.Loading,
+    ElIcon: index.ElIcon,
+    ElScrollbar: index$1.ElScrollbar,
     ElCascaderNode: node_vue_vue_type_script_lang["default"]
   },
   props: {
@@ -29,13 +33,14 @@ var script = vue.defineComponent({
   },
   setup(props) {
     const instance = vue.getCurrentInstance();
-    const { t } = index$1.useLocale();
+    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;
@@ -75,6 +80,7 @@ var script = vue.defineComponent({
       panel,
       hoverZone,
       isEmpty,
+      isLoading,
       menuId,
       t,
       handleExpand,

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

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

package/lib/components/cascader-panel/src/menu.vue_vue_type_template_id_9c79e4e2_lang.js CHANGED Viewed

@@ -10,11 +10,17 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = {
   key: 1,
+  class: "el-cascader-menu__empty-text"
+};
+const _hoisted_3 = {
+  key: 2,
   ref: "hoverZone",
   class: "el-cascader-menu__hover-zone"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_cascader_node = 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,
@@ -37,7 +43,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             onExpand: _ctx.handleExpand
           }, null, 8, ["node", "menu-id", "onExpand"]);
         }), 128)),
-        _ctx.isEmpty ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString(_ctx.t("el.cascader.noData")), 1)) : ((_a = _ctx.panel) == null ? void 0 : _a.isHoverMenu) ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2, null, 512)) : vue.createCommentVNode("v-if", true)
+        _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

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

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

package/lib/components/cascader-panel/src/types.d.ts CHANGED Viewed

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

package/lib/components/cascader-panel/src/types.js.map CHANGED Viewed

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

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

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

package/lib/components/checkbox/src/checkbox-button.vue.d.ts CHANGED Viewed

@@ -53,9 +53,9 @@ declare const _default: import("vue").DefineComponent<{
     checked: boolean;
 } & {
     size?: string | undefined;
-    name?: string | undefined;
     modelValue?: string | number | boolean | undefined;
     label?: string | number | boolean | Record<string, any> | undefined;
+    name?: string | undefined;
     tabindex?: string | number | undefined;
     trueLabel?: string | number | undefined;
     falseLabel?: string | number | undefined;
@@ -64,8 +64,8 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
-    name: string;
     modelValue: string | number | boolean;
+    name: string;
     indeterminate: boolean;
     checked: boolean;
     trueLabel: string | number;

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

@@ -66,9 +66,9 @@ declare const _default: import("vue").DefineComponent<{
     checked: boolean;
 } & {
     size?: ComponentSize | undefined;
-    name?: string | undefined;
     modelValue?: string | number | boolean | undefined;
     label?: string | number | boolean | Record<string, any> | undefined;
+    name?: string | undefined;
     id?: string | undefined;
     tabindex?: string | number | undefined;
     trueLabel?: string | number | undefined;
@@ -79,8 +79,8 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
-    name: string;
     modelValue: string | number | boolean;
+    name: string;
     border: boolean;
     id: string;
     indeterminate: boolean;

package/lib/components/color-picker/src/index.vue_vue_type_script_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/color-picker/src/index.vue"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"popper\"\n v-model:visible=\"showPicker\"\n :show-arrow=\"false\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :offset=\"0\"\n :gpu-acceleration=\"false\"\n :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n :stop-popper-mouse-event=\"false\"\n effect=\"light\"\n trigger=\"click\"\n transition=\"el-zoom-in-top\"\n >\n <template #content>\n <div v-click-outside=\"hide\">\n <div class=\"el-color-dropdown__main-wrapper\">\n <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n <sv-panel ref=\"svPanel\" :color=\"color\" />\n </div>\n <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n <predefine\n v-if=\"predefine\"\n ref=\"predefine\"\n :color=\"color\"\n :colors=\"predefine\"\n />\n <div class=\"el-color-dropdown__btns\">\n <span class=\"el-color-dropdown__value\">\n <el-input\n v-model=\"customInput\"\n :validate-event=\"false\"\n size=\"small\"\n @keyup.enter=\"handleConfirm\"\n @blur=\"handleConfirm\"\n />\n </span>\n <el-button\n size=\"small\"\n type=\"text\"\n class=\"el-color-dropdown__link-btn\"\n @click=\"clear\"\n >\n {{ t('el.colorpicker.clear') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n class=\"el-color-dropdown__btn\"\n @click=\"confirmValue\"\n >\n {{ t('el.colorpicker.confirm') }}\n </el-button>\n </div>\n </div>\n </template>\n <template #default>\n <div\n :class=\"[\n 'el-color-picker',\n colorDisabled ? 'is-disabled' : '',\n colorSize ? `el-color-picker--${colorSize}` : '',\n ]\"\n >\n <div v-if=\"colorDisabled\" class=\"el-color-picker__mask\"></div>\n <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n <span\n class=\"el-color-picker__color\"\n :class=\"{ 'is-alpha': showAlpha }\"\n >\n <span\n class=\"el-color-picker__color-inner\"\n :style=\"{\n backgroundColor: displayedColor,\n }\"\n >\n <el-icon\n v-show=\"modelValue \|\| showPanelColor\"\n class=\"el-color-picker__icon is-icon-arrow-down\"\n >\n <arrow-down />\n </el-icon>\n <el-icon\n v-if=\"!modelValue && !showPanelColor\"\n class=\"el-color-picker__empty is-icon-close\"\n >\n <close />\n </el-icon>\n </span>\n </span>\n </div>\n </div>\n </template>\n </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n inject,\n nextTick,\n onMounted,\n provide,\n reactive,\n ref,\n watch,\n} from 'vue'\nimport debounce from 'lodash/debounce'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n name: 'ElColorPicker',\n components: {\n ElButton,\n ElTooltip,\n ElInput,\n ElIcon,\n Close,\n ArrowDown,\n SvPanel,\n HueSlider,\n AlphaSlider,\n Predefine,\n },\n directives: {\n ClickOutside,\n },\n props: {\n modelValue: String,\n showAlpha: Boolean,\n colorFormat: String,\n disabled: Boolean,\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n popperClass: String,\n predefine: Array,\n },\n emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n setup(props, { emit }) {\n const { t } = useLocale()\n const elForm = inject(elFormKey, {} as ElFormContext)\n const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n const hue = ref(null)\n const svPanel = ref(null)\n const alpha = ref(null)\n const popper = ref(null)\n // data\n const color = reactive(\n new Color({\n enableAlpha: props.showAlpha,\n format: props.colorFormat,\n })\n )\n const showPicker = ref(false)\n const showPanelColor = ref(false)\n const customInput = ref('')\n // computed\n const displayedColor = computed(() => {\n if (!props.modelValue && !showPanelColor.value) {\n return 'transparent'\n }\n return displayedRgb(color, props.showAlpha)\n })\n const colorSize = useSize()\n const colorDisabled = computed(() => {\n return props.disabled \|\| elForm.disabled\n })\n\n const currentColor = computed(() => {\n return !props.modelValue && !showPanelColor.value ? '' : color.value\n })\n // watch\n watch(\n () => props.modelValue,\n (newVal) => {\n if (!newVal) {\n showPanelColor.value = false\n } else if (newVal && newVal !== color.value) {\n color.fromString(newVal)\n }\n }\n )\n watch(\n () => currentColor.value,\n (val) => {\n customInput.value = val\n emit('active-change', val)\n // showPanelColor.value = true\n }\n )\n\n watch(\n () => color.value,\n () => {\n if (!props.modelValue && !showPanelColor.value) {\n showPanelColor.value = true\n }\n }\n )\n\n // methods\n function displayedRgb(color, showAlpha) {\n if (!(color instanceof Color)) {\n throw Error('color should be instance of _color Class')\n }\n\n const { r, g, b } = color.toRgb()\n return showAlpha\n ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n : `rgb(${r}, ${g}, ${b})`\n }\n\n function setShowPicker(value) {\n showPicker.value = value\n }\n\n const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n function hide() {\n debounceSetShowPicker(false)\n resetColor()\n }\n\n function resetColor() {\n nextTick(() => {\n if (props.modelValue) {\n color.fromString(props.modelValue)\n } else {\n showPanelColor.value = false\n }\n })\n }\n\n function handleTrigger() {\n if (colorDisabled.value) return\n debounceSetShowPicker(!showPicker.value)\n }\n\n function handleConfirm() {\n color.fromString(customInput.value)\n }\n\n function confirmValue() {\n const value = color.value\n emit(UPDATE_MODEL_EVENT, value)\n emit('change', value)\n elFormItem.validate?.('change')\n debounceSetShowPicker(false)\n // check if modelValue change, if not change, then reset color.\n nextTick(() => {\n const newColor = new Color({\n enableAlpha: props.showAlpha,\n format: props.colorFormat,\n })\n newColor.fromString(props.modelValue)\n if (!color.compare(newColor)) {\n resetColor()\n }\n })\n }\n\n function clear() {\n debounceSetShowPicker(false)\n emit(UPDATE_MODEL_EVENT, null)\n emit('change', null)\n if (props.modelValue !== null) {\n elFormItem.validate?.('change')\n }\n resetColor()\n }\n\n onMounted(() => {\n if (props.modelValue) {\n color.fromString(props.modelValue)\n customInput.value = currentColor.value\n }\n })\n watch(\n () => showPicker.value,\n () => {\n nextTick(() => {\n hue.value?.update()\n svPanel.value?.update()\n alpha.value?.update()\n })\n }\n )\n\n provide<IUseOptions>(OPTIONS_KEY, {\n currentColor,\n })\n\n return {\n color: color as Color,\n colorDisabled,\n colorSize,\n displayedColor,\n showPanelColor,\n showPicker,\n customInput,\n handleConfirm,\n hide,\n handleTrigger,\n clear,\n confirmValue,\n t,\n hue,\n svPanel,\n alpha,\n popper,\n }\n },\n})\n</script>\n"],"names":["defineComponent","ElButton","ElTooltip","ElInput","Close","ArrowDown","SvPanel","HueSlider","AlphaSlider","Predefine","ClickOutside","useLocale","inject","ref","color","reactive","computed","UPDATE_MODEL_EVENT","nextTick","watch","OPTIONS_KEY"],"mappings":"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"}
1	+ {"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/color-picker/src/index.vue"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"popper\"\n v-model:visible=\"showPicker\"\n :show-arrow=\"false\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :offset=\"0\"\n :gpu-acceleration=\"false\"\n :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n :stop-popper-mouse-event=\"false\"\n effect=\"light\"\n trigger=\"click\"\n transition=\"el-zoom-in-top\"\n persistent\n >\n <template #content>\n <div v-click-outside=\"hide\">\n <div class=\"el-color-dropdown__main-wrapper\">\n <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n <sv-panel ref=\"svPanel\" :color=\"color\" />\n </div>\n <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n <predefine\n v-if=\"predefine\"\n ref=\"predefine\"\n :color=\"color\"\n :colors=\"predefine\"\n />\n <div class=\"el-color-dropdown__btns\">\n <span class=\"el-color-dropdown__value\">\n <el-input\n v-model=\"customInput\"\n :validate-event=\"false\"\n size=\"small\"\n @keyup.enter=\"handleConfirm\"\n @blur=\"handleConfirm\"\n />\n </span>\n <el-button\n size=\"small\"\n type=\"text\"\n class=\"el-color-dropdown__link-btn\"\n @click=\"clear\"\n >\n {{ t('el.colorpicker.clear') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n class=\"el-color-dropdown__btn\"\n @click=\"confirmValue\"\n >\n {{ t('el.colorpicker.confirm') }}\n </el-button>\n </div>\n </div>\n </template>\n <template #default>\n <div\n :class=\"[\n 'el-color-picker',\n colorDisabled ? 'is-disabled' : '',\n colorSize ? `el-color-picker--${colorSize}` : '',\n ]\"\n >\n <div v-if=\"colorDisabled\" class=\"el-color-picker__mask\"></div>\n <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n <span\n class=\"el-color-picker__color\"\n :class=\"{ 'is-alpha': showAlpha }\"\n >\n <span\n class=\"el-color-picker__color-inner\"\n :style=\"{\n backgroundColor: displayedColor,\n }\"\n >\n <el-icon\n v-show=\"modelValue \|\| showPanelColor\"\n class=\"el-color-picker__icon is-icon-arrow-down\"\n >\n <arrow-down />\n </el-icon>\n <el-icon\n v-if=\"!modelValue && !showPanelColor\"\n class=\"el-color-picker__empty is-icon-close\"\n >\n <close />\n </el-icon>\n </span>\n </span>\n </div>\n </div>\n </template>\n </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n inject,\n nextTick,\n onMounted,\n provide,\n reactive,\n ref,\n watch,\n} from 'vue'\nimport debounce from 'lodash/debounce'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n name: 'ElColorPicker',\n components: {\n ElButton,\n ElTooltip,\n ElInput,\n ElIcon,\n Close,\n ArrowDown,\n SvPanel,\n HueSlider,\n AlphaSlider,\n Predefine,\n },\n directives: {\n ClickOutside,\n },\n props: {\n modelValue: String,\n showAlpha: Boolean,\n colorFormat: String,\n disabled: Boolean,\n size: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n popperClass: String,\n predefine: Array,\n },\n emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n setup(props, { emit }) {\n const { t } = useLocale()\n const elForm = inject(elFormKey, {} as ElFormContext)\n const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n const hue = ref(null)\n const svPanel = ref(null)\n const alpha = ref(null)\n const popper = ref(null)\n // data\n const color = reactive(\n new Color({\n enableAlpha: props.showAlpha,\n format: props.colorFormat,\n })\n )\n const showPicker = ref(false)\n const showPanelColor = ref(false)\n const customInput = ref('')\n // computed\n const displayedColor = computed(() => {\n if (!props.modelValue && !showPanelColor.value) {\n return 'transparent'\n }\n return displayedRgb(color, props.showAlpha)\n })\n const colorSize = useSize()\n const colorDisabled = computed(() => {\n return props.disabled \|\| elForm.disabled\n })\n\n const currentColor = computed(() => {\n return !props.modelValue && !showPanelColor.value ? '' : color.value\n })\n // watch\n watch(\n () => props.modelValue,\n (newVal) => {\n if (!newVal) {\n showPanelColor.value = false\n } else if (newVal && newVal !== color.value) {\n color.fromString(newVal)\n }\n }\n )\n watch(\n () => currentColor.value,\n (val) => {\n customInput.value = val\n emit('active-change', val)\n // showPanelColor.value = true\n }\n )\n\n watch(\n () => color.value,\n () => {\n if (!props.modelValue && !showPanelColor.value) {\n showPanelColor.value = true\n }\n }\n )\n\n // methods\n function displayedRgb(color, showAlpha) {\n if (!(color instanceof Color)) {\n throw Error('color should be instance of _color Class')\n }\n\n const { r, g, b } = color.toRgb()\n return showAlpha\n ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n : `rgb(${r}, ${g}, ${b})`\n }\n\n function setShowPicker(value) {\n showPicker.value = value\n }\n\n const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n function hide() {\n debounceSetShowPicker(false)\n resetColor()\n }\n\n function resetColor() {\n nextTick(() => {\n if (props.modelValue) {\n color.fromString(props.modelValue)\n } else {\n showPanelColor.value = false\n }\n })\n }\n\n function handleTrigger() {\n if (colorDisabled.value) return\n debounceSetShowPicker(!showPicker.value)\n }\n\n function handleConfirm() {\n color.fromString(customInput.value)\n }\n\n function confirmValue() {\n const value = color.value\n emit(UPDATE_MODEL_EVENT, value)\n emit('change', value)\n elFormItem.validate?.('change')\n debounceSetShowPicker(false)\n // check if modelValue change, if not change, then reset color.\n nextTick(() => {\n const newColor = new Color({\n enableAlpha: props.showAlpha,\n format: props.colorFormat,\n })\n newColor.fromString(props.modelValue)\n if (!color.compare(newColor)) {\n resetColor()\n }\n })\n }\n\n function clear() {\n debounceSetShowPicker(false)\n emit(UPDATE_MODEL_EVENT, null)\n emit('change', null)\n if (props.modelValue !== null) {\n elFormItem.validate?.('change')\n }\n resetColor()\n }\n\n onMounted(() => {\n if (props.modelValue) {\n color.fromString(props.modelValue)\n customInput.value = currentColor.value\n }\n })\n watch(\n () => showPicker.value,\n () => {\n nextTick(() => {\n hue.value?.update()\n svPanel.value?.update()\n alpha.value?.update()\n })\n }\n )\n\n provide<IUseOptions>(OPTIONS_KEY, {\n currentColor,\n })\n\n return {\n color: color as Color,\n colorDisabled,\n colorSize,\n displayedColor,\n showPanelColor,\n showPicker,\n customInput,\n handleConfirm,\n hide,\n handleTrigger,\n clear,\n confirmValue,\n t,\n hue,\n svPanel,\n alpha,\n popper,\n }\n },\n})\n</script>\n"],"names":["defineComponent","ElButton","ElTooltip","ElInput","Close","ArrowDown","SvPanel","HueSlider","AlphaSlider","Predefine","ClickOutside","useLocale","inject","ref","color","reactive","computed","UPDATE_MODEL_EVENT","nextTick","watch","OPTIONS_KEY"],"mappings":"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"}

package/lib/components/color-picker/src/index.vue_vue_type_template_id_46a474d5_lang.js CHANGED Viewed

@@ -35,7 +35,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "stop-popper-mouse-event": false,
     effect: "light",
     trigger: "click",
-    transition: "el-zoom-in-top"
+    transition: "el-zoom-in-top",
+    persistent: ""
   }, {
     content: vue.withCtx(() => [
       vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", null, [