element-plus 1.2.0-beta.4 → 1.2.0-beta.5

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/cascader-panel/src/index.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['el-cascader-panel', border && 'is-bordered']\"\n    @keydown=\"handleKeyDown\"\n  >\n    <el-cascader-menu\n      v-for=\"(menu, index) in menus\"\n      :key=\"index\"\n      :ref=\"(item) => (menuList[index] = item)\"\n      :index=\"index\"\n      :nodes=\"menu\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onBeforeUpdate,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport isEqual from 'lodash/isEqual'\nimport { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport isServer from '@element-plus/utils/isServer'\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    const store = ref<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.value = new Store(options, cfg)\n      menus.value = [store.value.getNodes()]\n\n      if (cfg.lazy && isEmpty(props.options)) {\n        initialLoaded = false\n        lazyLoad(undefined, () => {\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.value?.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.value?.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.value?.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.value?.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.value?.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 (isServer) return\n\n      menuList.value.forEach((menu) => {\n        const menuElement = menu?.$el\n        if (menuElement) {\n          const container = menuElement.querySelector('.el-scrollbar__wrap')\n          const activeNode =\n            menuElement.querySelector('.el-cascader-node.is-active') ||\n            menuElement.querySelector('.el-cascader-node.in-active-path')\n          scrollIntoView(container, activeNode)\n        }\n      })\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const target = e.target as HTMLElement\n      const { code } = e\n\n      switch (code) {\n        case EVENT_CODE.up:\n        case EVENT_CODE.down: {\n          const distance = code === EVENT_CODE.up ? -1 : 1\n          focusNode(\n            getSibling(target, distance, '.el-cascader-node[tabindex=\"-1\"]')\n          )\n          break\n        }\n        case EVENT_CODE.left: {\n          const preMenu = menuList.value[getMenuIndex(target) - 1]\n          const expandedNode = preMenu?.$el.querySelector(\n            '.el-cascader-node[aria-expanded=\"true\"]'\n          )\n          focusNode(expandedNode)\n          break\n        }\n        case EVENT_CODE.right: {\n          const nextMenu = menuList.value[getMenuIndex(target) + 1]\n          const firstNode = nextMenu?.$el.querySelector(\n            '.el-cascader-node[tabindex=\"-1\"]'\n          )\n          focusNode(firstNode)\n          break\n        }\n        case EVENT_CODE.enter:\n          checkNode(target)\n          break\n        case EVENT_CODE.esc:\n        case EVENT_CODE.tab:\n          emit('close')\n          break\n      }\n    }\n\n    provide(\n      CASCADER_PANEL_INJECTION_KEY,\n      reactive({\n        config,\n        expandingNode,\n        checkedNodes,\n        isHoverMenu,\n        renderLabelFn,\n        lazyLoad,\n        expandNode,\n        handleCheckChange,\n      })\n    )\n\n    watch([config, () => props.options], initStore, {\n      deep: true,\n      immediate: true,\n    })\n\n    watch(\n      () => props.modelValue,\n      () => {\n        manualChecked = false\n        syncCheckedValue()\n      }\n    )\n\n    watch(checkedValue, (val) => {\n      if (!isEqual(val, props.modelValue)) {\n        emit(UPDATE_MODEL_EVENT, val)\n        emit(CHANGE_EVENT, val)\n      }\n    })\n\n    onBeforeUpdate(() => (menuList.value = []))\n\n    onMounted(() => !isEmpty(props.modelValue) && syncCheckedValue())\n\n    return {\n      menuList,\n      menus,\n      checkedNodes,\n      handleKeyDown,\n      handleCheckChange,\n      getFlattedNodes,\n      getCheckedNodes,\n      clearCheckedNodes,\n      calculateCheckedValue,\n      scrollToExpandingNode,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElCascaderMenu","CommonProps","UPDATE_MODEL_EVENT","CHANGE_EVENT","config","useCascaderConfig","store","ref","computed","ExpandTrigger","Store","isEmpty","node","Node","sortByOriginalOrder","isEqual","deduplicate","arrayFlat","coerceTruthyValueToArray","isServer","EVENT_CODE","getSibling","getMenuIndex","CASCADER_PANEL_INJECTION_KEY","reactive"],"mappings":"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"}
+{"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/cascader-panel/src/index.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['el-cascader-panel', border && 'is-bordered']\"\n    @keydown=\"handleKeyDown\"\n  >\n    <el-cascader-menu\n      v-for=\"(menu, index) in menus\"\n      :key=\"index\"\n      :ref=\"(item) => (menuList[index] = item)\"\n      :index=\"index\"\n      :nodes=\"menu\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onBeforeUpdate,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport isEqual from 'lodash/isEqual'\nimport { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport isServer from '@element-plus/utils/isServer'\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 (isServer) return\n\n      menuList.value.forEach((menu) => {\n        const menuElement = menu?.$el\n        if (menuElement) {\n          const container = menuElement.querySelector('.el-scrollbar__wrap')\n          const activeNode =\n            menuElement.querySelector('.el-cascader-node.is-active') ||\n            menuElement.querySelector('.el-cascader-node.in-active-path')\n          scrollIntoView(container, activeNode)\n        }\n      })\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const target = e.target as HTMLElement\n      const { code } = e\n\n      switch (code) {\n        case EVENT_CODE.up:\n        case EVENT_CODE.down: {\n          const distance = code === EVENT_CODE.up ? -1 : 1\n          focusNode(\n            getSibling(target, distance, '.el-cascader-node[tabindex=\"-1\"]')\n          )\n          break\n        }\n        case EVENT_CODE.left: {\n          const preMenu = menuList.value[getMenuIndex(target) - 1]\n          const expandedNode = preMenu?.$el.querySelector(\n            '.el-cascader-node[aria-expanded=\"true\"]'\n          )\n          focusNode(expandedNode)\n          break\n        }\n        case EVENT_CODE.right: {\n          const nextMenu = menuList.value[getMenuIndex(target) + 1]\n          const firstNode = nextMenu?.$el.querySelector(\n            '.el-cascader-node[tabindex=\"-1\"]'\n          )\n          focusNode(firstNode)\n          break\n        }\n        case EVENT_CODE.enter:\n          checkNode(target)\n          break\n        case EVENT_CODE.esc:\n        case EVENT_CODE.tab:\n          emit('close')\n          break\n      }\n    }\n\n    provide(\n      CASCADER_PANEL_INJECTION_KEY,\n      reactive({\n        config,\n        expandingNode,\n        checkedNodes,\n        isHoverMenu,\n        renderLabelFn,\n        lazyLoad,\n        expandNode,\n        handleCheckChange,\n      })\n    )\n\n    watch([config, () => props.options], initStore, {\n      deep: true,\n      immediate: true,\n    })\n\n    watch(\n      () => props.modelValue,\n      () => {\n        manualChecked = false\n        syncCheckedValue()\n      }\n    )\n\n    watch(checkedValue, (val) => {\n      if (!isEqual(val, props.modelValue)) {\n        emit(UPDATE_MODEL_EVENT, val)\n        emit(CHANGE_EVENT, val)\n      }\n    })\n\n    onBeforeUpdate(() => (menuList.value = []))\n\n    onMounted(() => !isEmpty(props.modelValue) && syncCheckedValue())\n\n    return {\n      menuList,\n      menus,\n      checkedNodes,\n      handleKeyDown,\n      handleCheckChange,\n      getFlattedNodes,\n      getCheckedNodes,\n      clearCheckedNodes,\n      calculateCheckedValue,\n      scrollToExpandingNode,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElCascaderMenu","CommonProps","UPDATE_MODEL_EVENT","CHANGE_EVENT","config","useCascaderConfig","store","ref","computed","ExpandTrigger","Store","isEmpty","node","Node","sortByOriginalOrder","isEqual","deduplicate","arrayFlat","coerceTruthyValueToArray","isServer","EVENT_CODE","getSibling","getMenuIndex","CASCADER_PANEL_INJECTION_KEY","reactive"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_template_id_97c48f5c_lang.js","sources":["../../../../../../packages/components/cascader-panel/src/index.vue?vue&type=template&id=97c48f5c&lang.js"],"sourcesContent":["<template>\n  <div\n    :class=\"['el-cascader-panel', border && 'is-bordered']\"\n    @keydown=\"handleKeyDown\"\n  >\n    <el-cascader-menu\n      v-for=\"(menu, index) in menus\"\n      :key=\"index\"\n      :ref=\"(item) => (menuList[index] = item)\"\n      :index=\"index\"\n      :nodes=\"menu\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onBeforeUpdate,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport isEqual from 'lodash/isEqual'\nimport { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport isServer from '@element-plus/utils/isServer'\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    const store = ref<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.value = new Store(options, cfg)\n      menus.value = [store.value.getNodes()]\n\n      if (cfg.lazy && isEmpty(props.options)) {\n        initialLoaded = false\n        lazyLoad(undefined, () => {\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.value?.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.value?.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.value?.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.value?.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.value?.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 (isServer) return\n\n      menuList.value.forEach((menu) => {\n        const menuElement = menu?.$el\n        if (menuElement) {\n          const container = menuElement.querySelector('.el-scrollbar__wrap')\n          const activeNode =\n            menuElement.querySelector('.el-cascader-node.is-active') ||\n            menuElement.querySelector('.el-cascader-node.in-active-path')\n          scrollIntoView(container, activeNode)\n        }\n      })\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const target = e.target as HTMLElement\n      const { code } = e\n\n      switch (code) {\n        case EVENT_CODE.up:\n        case EVENT_CODE.down: {\n          const distance = code === EVENT_CODE.up ? -1 : 1\n          focusNode(\n            getSibling(target, distance, '.el-cascader-node[tabindex=\"-1\"]')\n          )\n          break\n        }\n        case EVENT_CODE.left: {\n          const preMenu = menuList.value[getMenuIndex(target) - 1]\n          const expandedNode = preMenu?.$el.querySelector(\n            '.el-cascader-node[aria-expanded=\"true\"]'\n          )\n          focusNode(expandedNode)\n          break\n        }\n        case EVENT_CODE.right: {\n          const nextMenu = menuList.value[getMenuIndex(target) + 1]\n          const firstNode = nextMenu?.$el.querySelector(\n            '.el-cascader-node[tabindex=\"-1\"]'\n          )\n          focusNode(firstNode)\n          break\n        }\n        case EVENT_CODE.enter:\n          checkNode(target)\n          break\n        case EVENT_CODE.esc:\n        case EVENT_CODE.tab:\n          emit('close')\n          break\n      }\n    }\n\n    provide(\n      CASCADER_PANEL_INJECTION_KEY,\n      reactive({\n        config,\n        expandingNode,\n        checkedNodes,\n        isHoverMenu,\n        renderLabelFn,\n        lazyLoad,\n        expandNode,\n        handleCheckChange,\n      })\n    )\n\n    watch([config, () => props.options], initStore, {\n      deep: true,\n      immediate: true,\n    })\n\n    watch(\n      () => props.modelValue,\n      () => {\n        manualChecked = false\n        syncCheckedValue()\n      }\n    )\n\n    watch(checkedValue, (val) => {\n      if (!isEqual(val, props.modelValue)) {\n        emit(UPDATE_MODEL_EVENT, val)\n        emit(CHANGE_EVENT, val)\n      }\n    })\n\n    onBeforeUpdate(() => (menuList.value = []))\n\n    onMounted(() => !isEmpty(props.modelValue) && syncCheckedValue())\n\n    return {\n      menuList,\n      menus,\n      checkedNodes,\n      handleKeyDown,\n      handleCheckChange,\n      getFlattedNodes,\n      getCheckedNodes,\n      clearCheckedNodes,\n      calculateCheckedValue,\n      scrollToExpandingNode,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createBlock"],"mappings":";;;;;;;;0BACEA;IACG,gDAA6B;IAC7B,kDAAS;;0BAEVA,0DAC0B,aAAhB,MAAM;8BADhBC;QAEG,KAAK;AAAA,QACL,MAAM,SAAU,cAAS,SAAS;AAAA,QAClC;AAAA,QACA,OAAO;AAAA;;;;;;;"}
+{"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 { EVENT_CODE, focusNode, getSibling } from '@element-plus/utils/aria'\nimport { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'\nimport isServer from '@element-plus/utils/isServer'\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 (isServer) return\n\n      menuList.value.forEach((menu) => {\n        const menuElement = menu?.$el\n        if (menuElement) {\n          const container = menuElement.querySelector('.el-scrollbar__wrap')\n          const activeNode =\n            menuElement.querySelector('.el-cascader-node.is-active') ||\n            menuElement.querySelector('.el-cascader-node.in-active-path')\n          scrollIntoView(container, activeNode)\n        }\n      })\n    }\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const target = e.target as HTMLElement\n      const { code } = e\n\n      switch (code) {\n        case EVENT_CODE.up:\n        case EVENT_CODE.down: {\n          const distance = code === EVENT_CODE.up ? -1 : 1\n          focusNode(\n            getSibling(target, distance, '.el-cascader-node[tabindex=\"-1\"]')\n          )\n          break\n        }\n        case EVENT_CODE.left: {\n          const preMenu = menuList.value[getMenuIndex(target) - 1]\n          const expandedNode = preMenu?.$el.querySelector(\n            '.el-cascader-node[aria-expanded=\"true\"]'\n          )\n          focusNode(expandedNode)\n          break\n        }\n        case EVENT_CODE.right: {\n          const nextMenu = menuList.value[getMenuIndex(target) + 1]\n          const firstNode = nextMenu?.$el.querySelector(\n            '.el-cascader-node[tabindex=\"-1\"]'\n          )\n          focusNode(firstNode)\n          break\n        }\n        case EVENT_CODE.enter:\n          checkNode(target)\n          break\n        case EVENT_CODE.esc:\n        case EVENT_CODE.tab:\n          emit('close')\n          break\n      }\n    }\n\n    provide(\n      CASCADER_PANEL_INJECTION_KEY,\n      reactive({\n        config,\n        expandingNode,\n        checkedNodes,\n        isHoverMenu,\n        renderLabelFn,\n        lazyLoad,\n        expandNode,\n        handleCheckChange,\n      })\n    )\n\n    watch([config, () => props.options], initStore, {\n      deep: true,\n      immediate: true,\n    })\n\n    watch(\n      () => props.modelValue,\n      () => {\n        manualChecked = false\n        syncCheckedValue()\n      }\n    )\n\n    watch(checkedValue, (val) => {\n      if (!isEqual(val, props.modelValue)) {\n        emit(UPDATE_MODEL_EVENT, val)\n        emit(CHANGE_EVENT, val)\n      }\n    })\n\n    onBeforeUpdate(() => (menuList.value = []))\n\n    onMounted(() => !isEmpty(props.modelValue) && syncCheckedValue())\n\n    return {\n      menuList,\n      menus,\n      checkedNodes,\n      handleKeyDown,\n      handleCheckChange,\n      getFlattedNodes,\n      getCheckedNodes,\n      clearCheckedNodes,\n      calculateCheckedValue,\n      scrollToExpandingNode,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createBlock"],"mappings":";;;;;;;;0BACEA;IACG,gDAA6B;IAC7B,kDAAS;;0BAEVA,0DAC0B,aAAhB,MAAM;8BADhBC;QAEG,KAAK;AAAA,QACL,MAAM,SAAU,cAAS,SAAS;AAAA,QAClC;AAAA,QACA,OAAO;AAAA;;;;;;;"}

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

@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<{
     hoverZone: import("vue").Ref<SVGSVGElement | null>;
     isEmpty: import("vue").ComputedRef<boolean>;
     menuId: import("vue").ComputedRef<string>;
-    t: (...args: any[]) => string;
+    t: import("element-plus/es/hooks").Translator;
     handleExpand: (e: MouseEvent) => void;
     handleMouseMove: (e: MouseEvent) => void;
     clearHoverZone: () => void;

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

@@ -29,7 +29,7 @@ var script = vue.defineComponent({
   },
   setup(props) {
     const instance = vue.getCurrentInstance();
-    const { t } = index$1.useLocaleInject();
+    const { t } = index$1.useLocale();
     const id = util.generateId();
     let activeNode = null;
     let hoverTimer = null;

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

@@ -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 { useLocaleInject } 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 } = useLocaleInject()\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","getCurrentInstance","useLocaleInject","generateId","inject","CASCADER_PANEL_INJECTION_KEY","ref","computed"],"mappings":";;;;;;;;;;;;;AAyCA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,iBACVC;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,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;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}
+{"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","getCurrentInstance","useLocale","generateId","inject","CASCADER_PANEL_INJECTION_KEY","ref","computed"],"mappings":";;;;;;;;;;;;;AAyCA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,iBACVC;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,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;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

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

@@ -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 { useLocaleInject } 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 } = useLocaleInject()\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":["_createBlock","_createElementBlock"],"mappings":";;;;;;;;EAkBwB,OAAM;AAAA;;;EAKxB,KAAI;AAAA,EACJ,OAAM;AAAA;;;;0BAvBVA;IACG,KAAK;IACN,KAAI;AAAA,IACJ,MAAK;AAAA,IACL,OAAM;AAAA,IACN,cAAW;AAAA,IACV,yCAAuC;IACvC,aAAW;IACX,cAAY;;yBAGX;;;8BADFC,0DACiB,aAAR;kCADTD;YAEG,KAAK,KAAK;AAAA,YACV;AAAA,YACA,WAAS;YACT,UAAQ;;;QAEA,iCAAXC,8BAAA,gCACK,qCAGQ,sBAAA,mBAAO,iCADpBA,8BAAA;;;;;;;;;"}
+{"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":["_createBlock","_createElementBlock"],"mappings":";;;;;;;;EAkBwB,OAAM;AAAA;;;EAKxB,KAAI;AAAA,EACJ,OAAM;AAAA;;;;0BAvBVA;IACG,KAAK;IACN,KAAI;AAAA,IACJ,MAAK;AAAA,IACL,OAAM;AAAA,IACN,cAAW;AAAA,IACV,yCAAuC;IACvC,aAAW;IACX,cAAY;;yBAGX;;;8BADFC,0DACiB,aAAR;kCADTD;YAEG,KAAK,KAAK;AAAA,YACV;AAAA,YACA,WAAS;YACT,UAAQ;;;QAEA,iCAAXC,8BAAA,gCACK,qCAGQ,sBAAA,mBAAO,iCADpBA,8BAAA;;;;;;;;;"}

package/lib/components/color-picker/index.d.ts

@@ -24,7 +24,7 @@ declare const _ColorPicker: SFCWithInstall<import("vue").DefineComponent<{
     handleTrigger: () => void;
     clear: () => void;
     confirmValue: () => void;
-    t: (...args: any[]) => string;
+    t: import("../..").Translator;
     hue: import("vue").Ref<null>;
     svPanel: import("vue").Ref<null>;
     alpha: import("vue").Ref<null>;
@@ -80,7 +80,7 @@ export declare const ElColorPicker: SFCWithInstall<import("vue").DefineComponent
     handleTrigger: () => void;
     clear: () => void;
     confirmValue: () => void;
-    t: (...args: any[]) => string;
+    t: import("../..").Translator;
     hue: import("vue").Ref<null>;
     svPanel: import("vue").Ref<null>;
     alpha: import("vue").Ref<null>;

package/lib/components/color-picker/src/index.vue.d.ts

@@ -27,7 +27,7 @@ declare const _default: import("vue").DefineComponent<{
     handleTrigger: () => void;
     clear: () => void;
     confirmValue: () => void;
-    t: (...args: any[]) => string;
+    t: import("element-plus/es/hooks").Translator;
     hue: import("vue").Ref<null>;
     svPanel: import("vue").Ref<null>;
     alpha: import("vue").Ref<null>;

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

@@ -66,7 +66,7 @@ var script = vue.defineComponent({
   emits: ["change", "active-change", constants.UPDATE_MODEL_EVENT],
   setup(props, { emit }) {
     const ELEMENT = util.useGlobalConfig();
-    const { t } = index$5.useLocaleInject();
+    const { t } = index$5.useLocale();
     const elForm = vue.inject(form.elFormKey, {});
     const elFormItem = vue.inject(form.elFormItemKey, {});
     const hue = vue.ref(null);

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/color-picker/src/index.vue"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :effect=\"Effect.LIGHT\"\n    manual-mode\n    trigger=\"click\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n  >\n    <template #default>\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=\"mini\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"mini\"\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=\"mini\"\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 #trigger>\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            ></span>\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          <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        </div>\n      </div>\n    </template>\n  </el-popper>\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 { useLocaleInject } from '@element-plus/hooks'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useGlobalConfig } from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons'\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    ElPopper,\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 ELEMENT = useGlobalConfig()\n    const { t } = useLocaleInject()\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 = computed(() => {\n      return props.size || elFormItem.size || ELEMENT.size\n    })\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      Effect,\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","ElPopper","ElInput","ElIcon","Close","ArrowDown","SvPanel","HueSlider","AlphaSlider","Predefine","ClickOutside","isValidComponentSize","UPDATE_MODEL_EVENT","useGlobalConfig","useLocaleInject","inject","elFormKey","elFormItemKey","ref","color","reactive","Color","computed","debounce","OPTIONS_KEY","Effect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoIA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,cACVC;AAAA,cACAC;AAAA,aACAC;AAAA,YACAC;AAAA,WACAC;AAAA,eACAC;AAAA,aACAC;AAAA,eACAC;AAAA,iBACAC;AAAA,eACAC;AAAA;AAAA,EAEF,YAAY;AAAA,kBACVC;AAAA;AAAA,EAEF,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,aAAa;AAAA,IACb,UAAU;AAAA,IACV,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,WAAWC;AAAA;AAAA,IAEb,aAAa;AAAA,IACb,WAAW;AAAA;AAAA,EAEb,OAAO,CAAC,UAAU,iBAAiBC;AAAA,EACnC,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,UAAUC;AAChB,UAAM,EAAE,MAAMC;AACd,UAAM,SAASC,WAAOC,gBAAW;AACjC,UAAM,aAAaD,WAAOE,oBAAe;AAEzC,UAAM,MAAMC,QAAI;AAChB,UAAM,UAAUA,QAAI;AACpB,UAAM,QAAQA,QAAI;AAClB,UAAM,SAASA,QAAI;AAEnB,UAAMC,UAAQC,aACZ,IAAIC,iBAAM;AAAA,MACR,aAAa,MAAM;AAAA,MACnB,QAAQ,MAAM;AAAA;AAGlB,UAAM,aAAaH,QAAI;AACvB,UAAM,iBAAiBA,QAAI;AAC3B,UAAM,cAAcA,QAAI;AAExB,UAAM,iBAAiBI,aAAS,MAAM;AACpC,UAAI,CAAC,MAAM,cAAc,CAAC,eAAe,OAAO;AAC9C,eAAO;AAAA;AAET,aAAO,aAAaH,SAAO,MAAM;AAAA;AAEnC,UAAM,YAAYG,aAAS,MAAM;AAC/B,aAAO,MAAM,QAAQ,WAAW,QAAQ,QAAQ;AAAA;AAElD,UAAM,gBAAgBA,aAAS,MAAM;AACnC,aAAO,MAAM,YAAY,OAAO;AAAA;AAGlC,UAAM,eAAeA,aAAS,MAAM;AAClC,aAAO,CAAC,MAAM,cAAc,CAAC,eAAe,QAAQ,KAAKH,QAAM;AAAA;AAGjE,cACE,MAAM,MAAM,YACZ,CAAC,WAAW;AACV,UAAI,CAAC,QAAQ;AACX,uBAAe,QAAQ;AAAA,iBACd,UAAU,WAAWA,QAAM,OAAO;AAC3C,gBAAM,WAAW;AAAA;AAAA;AAIvB,cACE,MAAM,aAAa,OACnB,CAAC,QAAQ;AACP,kBAAY,QAAQ;AACpB,WAAK,iBAAiB;AAAA;AAK1B,cACE,MAAMA,QAAM,OACZ,MAAM;AACJ,UAAI,CAAC,MAAM,cAAc,CAAC,eAAe,OAAO;AAC9C,uBAAe,QAAQ;AAAA;AAAA;AAM7B,0BAAsB,QAAO,WAAW;AACtC,UAAI,oBAAmBE,mBAAQ;AAC7B,cAAM,MAAM;AAAA;AAGd,YAAM,EAAE,GAAG,GAAG,MAAM,OAAM;AAC1B,aAAO,YACH,QAAQ,MAAM,MAAM,MAAM,OAAM,IAAI,WAAW,SAC/C,OAAO,MAAM,MAAM;AAAA;AAGzB,2BAAuB,OAAO;AAC5B,iBAAW,QAAQ;AAAA;AAGrB,UAAM,wBAAwBE,6BAAS,eAAe;AAEtD,oBAAgB;AACd,4BAAsB;AACtB;AAAA;AAGF,0BAAsB;AACpB,mBAAS,MAAM;AACb,YAAI,MAAM,YAAY;AACpB,kBAAM,WAAW,MAAM;AAAA,eAClB;AACL,yBAAe,QAAQ;AAAA;AAAA;AAAA;AAK7B,6BAAyB;AACvB,UAAI,cAAc;AAAO;AACzB,4BAAsB,CAAC,WAAW;AAAA;AAGpC,6BAAyB;AACvB,cAAM,WAAW,YAAY;AAAA;AAG/B,4BAAwB;;AACtB,YAAM,QAAQJ,QAAM;AACpB,WAAKP,8BAAoB;AACzB,WAAK,UAAU;AACf,uBAAW,aAAX,oCAAsB;AACtB,4BAAsB;AAEtB,mBAAS,MAAM;AACb,cAAM,WAAW,IAAIS,iBAAM;AAAA,UACzB,aAAa,MAAM;AAAA,UACnB,QAAQ,MAAM;AAAA;AAEhB,iBAAS,WAAW,MAAM;AAC1B,YAAI,CAACF,QAAM,QAAQ,WAAW;AAC5B;AAAA;AAAA;AAAA;AAKN,qBAAiB;;AACf,4BAAsB;AACtB,WAAKP,8BAAoB;AACzB,WAAK,UAAU;AACf,UAAI,MAAM,eAAe,MAAM;AAC7B,yBAAW,aAAX,oCAAsB;AAAA;AAExB;AAAA;AAGF,kBAAU,MAAM;AACd,UAAI,MAAM,YAAY;AACpB,gBAAM,WAAW,MAAM;AACvB,oBAAY,QAAQ,aAAa;AAAA;AAAA;AAGrC,cACE,MAAM,WAAW,OACjB,MAAM;AACJ,mBAAS,MAAM;;AACb,kBAAI,UAAJ,mBAAW;AACX,sBAAQ,UAAR,mBAAe;AACf,oBAAM,UAAN,mBAAa;AAAA;AAAA;AAKnB,gBAAqBY,uBAAa;AAAA,MAChC;AAAA;AAGF,WAAO;AAAA,cACLC;AAAA,aACAN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/color-picker/src/index.vue"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :effect=\"Effect.LIGHT\"\n    manual-mode\n    trigger=\"click\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n  >\n    <template #default>\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=\"mini\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"mini\"\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=\"mini\"\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 #trigger>\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            ></span>\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          <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        </div>\n      </div>\n    </template>\n  </el-popper>\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 } from '@element-plus/hooks'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useGlobalConfig } from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons'\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    ElPopper,\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 ELEMENT = useGlobalConfig()\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 = computed(() => {\n      return props.size || elFormItem.size || ELEMENT.size\n    })\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      Effect,\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","ElPopper","ElInput","ElIcon","Close","ArrowDown","SvPanel","HueSlider","AlphaSlider","Predefine","ClickOutside","isValidComponentSize","UPDATE_MODEL_EVENT","useGlobalConfig","useLocale","inject","elFormKey","elFormItemKey","ref","color","reactive","Color","computed","debounce","OPTIONS_KEY","Effect"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_template_id_46a474d5_lang.js","sources":["../../../../../../packages/components/color-picker/src/index.vue?vue&type=template&id=46a474d5&lang.js"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :effect=\"Effect.LIGHT\"\n    manual-mode\n    trigger=\"click\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n  >\n    <template #default>\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=\"mini\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"mini\"\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=\"mini\"\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 #trigger>\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            ></span>\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          <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        </div>\n      </div>\n    </template>\n  </el-popper>\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 { useLocaleInject } from '@element-plus/hooks'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useGlobalConfig } from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons'\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    ElPopper,\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 ELEMENT = useGlobalConfig()\n    const { t } = useLocaleInject()\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 = computed(() => {\n      return props.size || elFormItem.size || ELEMENT.size\n    })\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      Effect,\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":["_createBlock","_createElementVNode","_createVNode","_createElementBlock"],"mappings":";;;;;;qBAiBa,OAAM;qBAWN,OAAM;qBACH,OAAM;;;EAoCY,OAAM;AAAA;;;;;;;;;;;;;0BAhEtCA;IACE,KAAI;AAAA,IACI,SAAS;8DAAA;IAChB,QAAQ,YAAO;AAAA,IAChB,eAAA;AAAA,IACA,SAAQ;AAAA,IACP,cAAY;AAAA,IACZ,uBAAqB;IACrB,QAAQ;AAAA,IACT,YAAW;AAAA,IACV,oBAAkB;AAAA,IAClB,4DAA0D;IAC1D,2BAAyB;AAAA;IAEf,qBACT;yBAAAC;QACEA,8BAAA;UACEC;YAAY,KAAI;AAAA,YAAM,OAAM;AAAA,YAAc,OAAO;YAAO,UAAA;AAAA;UACxDA;YAAU,KAAI;AAAA,YAAW,OAAO;;;QAEd,mCAApBF;;UAA+B,KAAI;AAAA,UAAS,OAAO;;QAE3C,mCADRA;;UAEE,KAAI;AAAA,UACH,OAAO;UACP,QAAQ;;QAEXC,8BAAA;UACEA,+BAAA;YACEC;0BACW;2EAAA;cACR,kBAAgB;AAAA,cACjB,MAAK;AAAA,cACJ,sBAAa;cACb,QAAM;;;UAGXA;YACE,MAAK;AAAA,YACL,MAAK;AAAA,YACL,OAAM;AAAA,YACL,SAAO;;iCAER;sDAAG;;;;UAELA;YACE,OAAA;AAAA,YACA,MAAK;AAAA,YACL,OAAM;AAAA,YACL,SAAO;;iCAER;sDAAG;;;;;;mCApCa;;;IAyCb,qBACT;MAAAD;QACG;;;;;;QAMU,uCAAXE,8BAAA;QACAF;UAAK,OAAM;AAAA,UAA4B,gDAAO;;UAC5CA;YACE,2BAAM,wCACgB;;YAEtBA;cACE,OAAM;AAAA,cACL;;;;aAKM,oBAAe,wCADxBD;;cAEE,OAAM;AAAA;mCAEN;gBAAAE;;;;;6BAGJA,sCAEE,OAAM;iCAEN;cAAAA;;;;wBAHQ,mBAAc;;;;;;;;;;;"}
+{"version":3,"file":"index.vue_vue_type_template_id_46a474d5_lang.js","sources":["../../../../../../packages/components/color-picker/src/index.vue?vue&type=template&id=46a474d5&lang.js"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :effect=\"Effect.LIGHT\"\n    manual-mode\n    trigger=\"click\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n  >\n    <template #default>\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=\"mini\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"mini\"\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=\"mini\"\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 #trigger>\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            ></span>\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          <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        </div>\n      </div>\n    </template>\n  </el-popper>\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 } from '@element-plus/hooks'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { useGlobalConfig } from '@element-plus/utils/util'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons'\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    ElPopper,\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 ELEMENT = useGlobalConfig()\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 = computed(() => {\n      return props.size || elFormItem.size || ELEMENT.size\n    })\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      Effect,\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":["_createBlock","_createElementVNode","_createVNode","_createElementBlock"],"mappings":";;;;;;qBAiBa,OAAM;qBAWN,OAAM;qBACH,OAAM;;;EAoCY,OAAM;AAAA;;;;;;;;;;;;;0BAhEtCA;IACE,KAAI;AAAA,IACI,SAAS;8DAAA;IAChB,QAAQ,YAAO;AAAA,IAChB,eAAA;AAAA,IACA,SAAQ;AAAA,IACP,cAAY;AAAA,IACZ,uBAAqB;IACrB,QAAQ;AAAA,IACT,YAAW;AAAA,IACV,oBAAkB;AAAA,IAClB,4DAA0D;IAC1D,2BAAyB;AAAA;IAEf,qBACT;yBAAAC;QACEA,8BAAA;UACEC;YAAY,KAAI;AAAA,YAAM,OAAM;AAAA,YAAc,OAAO;YAAO,UAAA;AAAA;UACxDA;YAAU,KAAI;AAAA,YAAW,OAAO;;;QAEd,mCAApBF;;UAA+B,KAAI;AAAA,UAAS,OAAO;;QAE3C,mCADRA;;UAEE,KAAI;AAAA,UACH,OAAO;UACP,QAAQ;;QAEXC,8BAAA;UACEA,+BAAA;YACEC;0BACW;2EAAA;cACR,kBAAgB;AAAA,cACjB,MAAK;AAAA,cACJ,sBAAa;cACb,QAAM;;;UAGXA;YACE,MAAK;AAAA,YACL,MAAK;AAAA,YACL,OAAM;AAAA,YACL,SAAO;;iCAER;sDAAG;;;;UAELA;YACE,OAAA;AAAA,YACA,MAAK;AAAA,YACL,OAAM;AAAA,YACL,SAAO;;iCAER;sDAAG;;;;;;mCApCa;;;IAyCb,qBACT;MAAAD;QACG;;;;;;QAMU,uCAAXE,8BAAA;QACAF;UAAK,OAAM;AAAA,UAA4B,gDAAO;;UAC5CA;YACE,2BAAM,wCACgB;;YAEtBA;cACE,OAAM;AAAA,cACL;;;;aAKM,oBAAe,wCADxBD;;cAEE,OAAM;AAAA;mCAEN;gBAAAE;;;;;6BAGJA,sCAEE,OAAM;iCAEN;cAAAA;;;;wBAHQ,mBAAc;;;;;;;;;;;"}

package/lib/components/config-provider/index.d.ts

@@ -2,7 +2,7 @@ export declare const ElConfigProvider: import("../../utils/types").SFCWithInstal
     button: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("..").ButtonConfigContext>, import("../../utils/types").Mutable<{
         readonly autoInsertSpace: true;
     }>, false, never, never>;
-    locale: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("../../locale").Language>, never, false, never, never>;
+    locale: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("../../locale").Language>, unknown, unknown, unknown, unknown>;
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
@@ -17,3 +17,4 @@ export declare const ElConfigProvider: import("../../utils/types").SFCWithInstal
     locale: import("../../locale").Language;
 }>> & Record<string, any>;
 export default ElConfigProvider;
+export * from './src/config-provider';

package/lib/components/config-provider/index.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var withInstall = require('../../utils/with-install.js');
 var index = require('./src/index.js');
+var configProvider = require('./src/config-provider.js');
 
 const ElConfigProvider = withInstall.withInstall(index.ConfigProvider);
 
+exports.configProviderProps = configProvider.configProviderProps;
 exports.ElConfigProvider = ElConfigProvider;
 exports["default"] = ElConfigProvider;
 //# sourceMappingURL=index.js.map

package/lib/components/config-provider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/config-provider/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\nimport { ConfigProvider } from './src'\n\nexport const ElConfigProvider = withInstall(ConfigProvider)\nexport default ElConfigProvider\n"],"names":["withInstall","ConfigProvider"],"mappings":";;;;;;;MAGa,mBAAmBA,wBAAYC;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/config-provider/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\nimport { ConfigProvider } from './src'\n\nexport const ElConfigProvider = withInstall(ConfigProvider)\nexport default ElConfigProvider\n\nexport * from './src/config-provider'\n"],"names":["withInstall","ConfigProvider"],"mappings":";;;;;;;;MAGa,mBAAmBA,wBAAYC;;;;;;"}

package/lib/components/config-provider/src/config-provider.d.ts

@@ -3,5 +3,5 @@ export declare const configProviderProps: {
     button: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<ButtonConfigContext>, import("../../../utils/types").Mutable<{
         readonly autoInsertSpace: true;
     }>, false, never, never>;
-    locale: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<import("../../../locale").Language>, never, false, never, never>;
+    locale: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<import("../../../locale").Language>, unknown, unknown, unknown, unknown>;
 };

package/lib/components/config-provider/src/index.d.ts

@@ -2,7 +2,7 @@ export declare const ConfigProvider: import("vue").DefineComponent<{
     button: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<import("../..").ButtonConfigContext>, import("../../../utils/types").Mutable<{
         readonly autoInsertSpace: true;
     }>, false, never, never>;
-    locale: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<import("../../../locale").Language>, never, false, never, never>;
+    locale: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<import("../../../locale").Language>, unknown, unknown, unknown, unknown>;
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>[] | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{

package/lib/components/config-provider/src/index.js

@@ -13,7 +13,7 @@ const ConfigProvider = vue.defineComponent({
   name: "ElConfigProvider",
   props: configProvider.configProviderProps,
   setup(props, { slots }) {
-    index.useLocale();
+    index.provideLocale();
     vue.provide(configProvider$1.configProviderContextKey, props);
     return () => {
       var _a;

package/lib/components/config-provider/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../packages/components/config-provider/src/index.ts"],"sourcesContent":["import { provide, defineComponent } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport { configProviderContextKey } from '@element-plus/tokens'\nimport { configProviderProps } from './config-provider'\n\nexport const ConfigProvider = defineComponent({\n  name: 'ElConfigProvider',\n  props: configProviderProps,\n  setup(props, { slots }) {\n    useLocale()\n    provide(configProviderContextKey, props)\n    return () => slots.default?.()\n  },\n})\n"],"names":["defineComponent","configProviderProps","configProviderContextKey"],"mappings":";;;;;;;;;;;MAKa,iBAAiBA,oBAAgB;AAAA,EAC5C,MAAM;AAAA,EACN,OAAOC;AAAA,EACP,MAAM,OAAO,EAAE,SAAS;AACtB;AACA,gBAAQC,2CAA0B;AAClC,WAAO,MAAG;AAXd;AAWiB,yBAAM,YAAN;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../packages/components/config-provider/src/index.ts"],"sourcesContent":["import { provide, defineComponent } from 'vue'\nimport { provideLocale } from '@element-plus/hooks'\nimport { configProviderContextKey } from '@element-plus/tokens'\nimport { configProviderProps } from './config-provider'\n\nexport const ConfigProvider = defineComponent({\n  name: 'ElConfigProvider',\n  props: configProviderProps,\n  setup(props, { slots }) {\n    provideLocale()\n    provide(configProviderContextKey, props)\n    return () => slots.default?.()\n  },\n})\n"],"names":["defineComponent","configProviderProps","configProviderContextKey"],"mappings":";;;;;;;;;;;MAKa,iBAAiBA,oBAAgB;AAAA,EAC5C,MAAM;AAAA,EACN,OAAOC;AAAA,EACP,MAAM,OAAO,EAAE,SAAS;AACtB;AACA,gBAAQC,2CAA0B;AAClC,WAAO,MAAG;AAXd;AAWiB,yBAAM,YAAN;AAAA;AAAA;AAAA;;;;"}

package/lib/components/date-picker/src/date-picker-com/basic-date-table.vue.d.ts

@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     handleMouseMove: (event: any) => void;
-    t: (...args: any[]) => string;
+    t: import("element-plus/es/hooks").Translator;
     rows: import("vue").ComputedRef<{
         column?: number | undefined;
         customClass?: string | undefined;

package/lib/components/date-picker/src/date-picker-com/basic-date-table.vue_vue_type_script_lang.js

@@ -54,7 +54,7 @@ var script = vue.defineComponent({
   },
   emits: ["changerange", "pick", "select"],
   setup(props, ctx) {
-    const { t, lang } = index.useLocaleInject();
+    const { t, lang } = index.useLocale();
     const lastRow = vue.ref(null);
     const lastColumn = vue.ref(null);
     const tableRows = vue.ref([[], [], [], [], [], []]);

package/lib/components/date-picker/src/date-picker-com/basic-date-table.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"basic-date-table.vue_vue_type_script_lang.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/basic-date-table.vue"],"sourcesContent":["<template>\n  <table\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n    class=\"el-date-table\"\n    :class=\"{ 'is-week-mode': selectionMode === 'week' }\"\n    @click=\"handleClick\"\n    @mousemove=\"handleMouseMove\"\n  >\n    <tbody>\n      <tr>\n        <th v-if=\"showWeekNumber\">{{ t('el.datepicker.week') }}</th>\n        <th v-for=\"(week, key) in WEEKS\" :key=\"key\">\n          {{ t('el.datepicker.weeks.' + week) }}\n        </th>\n      </tr>\n      <tr\n        v-for=\"(row, key) in rows\"\n        :key=\"key\"\n        class=\"el-date-table__row\"\n        :class=\"{ current: isWeekActive(row[1]) }\"\n      >\n        <td\n          v-for=\"(cell, key_) in row\"\n          :key=\"key_\"\n          :class=\"getCellClasses(cell)\"\n        >\n          <el-date-picker-cell :cell=\"cell\" />\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport dayjs from 'dayjs'\nimport { useLocaleInject } from '@element-plus/hooks'\nimport { coerceTruthyValueToArray } from '@element-plus/utils/util'\nimport ElDatePickerCell from './basic-cell-render'\nimport type { PropType } from 'vue'\n\nimport type { Dayjs } from 'dayjs'\nimport type { DateCell } from '../date-picker.type'\n\nexport default defineComponent({\n  components: {\n    ElDatePickerCell,\n  },\n  props: {\n    date: {\n      type: Object as PropType<Dayjs>,\n    },\n    minDate: {\n      type: Object as PropType<Dayjs>,\n    },\n    maxDate: {\n      type: Object as PropType<Dayjs>,\n    },\n    parsedValue: {\n      type: [Object, Array] as PropType<Dayjs | Dayjs[]>,\n    },\n    selectionMode: {\n      type: String,\n      default: 'day',\n    },\n    showWeekNumber: {\n      type: Boolean,\n      default: false,\n    },\n    disabledDate: {\n      type: Function,\n    },\n    cellClassName: {\n      type: Function,\n    },\n    rangeState: {\n      type: Object,\n      default: () => ({\n        endDate: null,\n        selecting: false,\n      }),\n    },\n  },\n  emits: ['changerange', 'pick', 'select'],\n\n  setup(props, ctx) {\n    const { t, lang } = useLocaleInject()\n    // data\n    const lastRow = ref(null)\n    const lastColumn = ref(null)\n    const tableRows = ref<DateCell[][]>([[], [], [], [], [], []])\n\n    // todo better way to get Day.js locale object\n    const firstDayOfWeek = (props.date as any).$locale().weekStart || 7\n    const WEEKS_CONSTANT = props.date\n      .locale('en')\n      .localeData()\n      .weekdaysShort()\n      .map((_) => _.toLowerCase())\n\n    const offsetDay = computed(() => {\n      // Sunday 7(0), cal the left and right offset days, 3217654, such as Monday is -1, the is to adjust the position of the first two rows of dates\n      return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek\n    })\n\n    const startDate = computed(() => {\n      const startDayOfMonth = props.date.startOf('month')\n      return startDayOfMonth.subtract(startDayOfMonth.day() || 7, 'day')\n    })\n\n    const WEEKS = computed(() => {\n      return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(\n        firstDayOfWeek,\n        firstDayOfWeek + 7\n      )\n    })\n\n    const rows = computed(() => {\n      // TODO: refactory rows / getCellClasses\n      const startOfMonth = props.date.startOf('month')\n      const startOfMonthDay = startOfMonth.day() || 7 // day of first day\n      const dateCountOfMonth = startOfMonth.daysInMonth()\n      const dateCountOfLastMonth = startOfMonth\n        .subtract(1, 'month')\n        .daysInMonth()\n\n      const offset = offsetDay.value\n      const rows_ = tableRows.value\n      let count = 1\n\n      const selectedDate: Dayjs[] =\n        props.selectionMode === 'dates'\n          ? coerceTruthyValueToArray(props.parsedValue)\n          : []\n\n      const calNow = dayjs().locale(lang.value).startOf('day')\n\n      for (let i = 0; i < 6; i++) {\n        const row = rows_[i]\n\n        if (props.showWeekNumber) {\n          if (!row[0]) {\n            row[0] = {\n              type: 'week',\n              text: startDate.value.add(i * 7 + 1, 'day').week(),\n            }\n          }\n        }\n\n        for (let j = 0; j < 7; j++) {\n          let cell = row[props.showWeekNumber ? j + 1 : j]\n          if (!cell) {\n            cell = {\n              row: i,\n              column: j,\n              type: 'normal',\n              inRange: false,\n              start: false,\n              end: false,\n            }\n          }\n          const index = i * 7 + j\n          const calTime = startDate.value.add(index - offset, 'day')\n          cell.dayjs = calTime\n          cell.date = calTime.toDate()\n          cell.timestamp = calTime.valueOf()\n          cell.type = 'normal'\n\n          const calEndDate =\n            props.rangeState.endDate ||\n            props.maxDate ||\n            (props.rangeState.selecting && props.minDate)\n\n          cell.inRange =\n            (props.minDate &&\n              calTime.isSameOrAfter(props.minDate, 'day') &&\n              calEndDate &&\n              calTime.isSameOrBefore(calEndDate, 'day')) ||\n            (props.minDate &&\n              calTime.isSameOrBefore(props.minDate, 'day') &&\n              calEndDate &&\n              calTime.isSameOrAfter(calEndDate, 'day'))\n\n          if (props.minDate?.isSameOrAfter(calEndDate)) {\n            cell.start = calEndDate && calTime.isSame(calEndDate, 'day')\n            cell.end = props.minDate && calTime.isSame(props.minDate, 'day')\n          } else {\n            cell.start = props.minDate && calTime.isSame(props.minDate, 'day')\n            cell.end = calEndDate && calTime.isSame(calEndDate, 'day')\n          }\n\n          const isToday = calTime.isSame(calNow, 'day')\n\n          if (isToday) {\n            cell.type = 'today'\n          }\n\n          if (i >= 0 && i <= 1) {\n            const numberOfDaysFromPreviousMonth =\n              startOfMonthDay + offset < 0\n                ? 7 + startOfMonthDay + offset\n                : startOfMonthDay + offset\n\n            if (j + i * 7 >= numberOfDaysFromPreviousMonth) {\n              cell.text = count++\n            } else {\n              cell.text =\n                dateCountOfLastMonth -\n                (numberOfDaysFromPreviousMonth - (j % 7)) +\n                1 +\n                i * 7\n              cell.type = 'prev-month'\n            }\n          } else {\n            if (count <= dateCountOfMonth) {\n              cell.text = count++\n            } else {\n              cell.text = count++ - dateCountOfMonth\n              cell.type = 'next-month'\n            }\n          }\n\n          const cellDate = calTime.toDate()\n          cell.selected = selectedDate.find(\n            (_) => _.valueOf() === calTime.valueOf()\n          )\n          cell.isSelected = !!cell.selected\n          cell.isCurrent = isCurrent(cell)\n          cell.disabled = props.disabledDate && props.disabledDate(cellDate)\n          cell.customClass =\n            props.cellClassName && props.cellClassName(cellDate)\n          row[props.showWeekNumber ? j + 1 : j] = cell\n        }\n\n        if (props.selectionMode === 'week') {\n          const start = props.showWeekNumber ? 1 : 0\n          const end = props.showWeekNumber ? 7 : 6\n          const isActive = isWeekActive(row[start + 1])\n          row[start].inRange = isActive\n          row[start].start = isActive\n          row[end].inRange = isActive\n          row[end].end = isActive\n        }\n      }\n      return rows_\n    })\n\n    const isCurrent = (cell): boolean => {\n      return (\n        props.selectionMode === 'day' &&\n        (cell.type === 'normal' || cell.type === 'today') &&\n        cellMatchesDate(cell, props.parsedValue)\n      )\n    }\n\n    const cellMatchesDate = (cell, date) => {\n      if (!date) return false\n      return dayjs(date)\n        .locale(lang.value)\n        .isSame(props.date.date(Number(cell.text)), 'day')\n    }\n\n    const getCellClasses = (cell) => {\n      const classes: string[] = []\n      if ((cell.type === 'normal' || cell.type === 'today') && !cell.disabled) {\n        classes.push('available')\n        if (cell.type === 'today') {\n          classes.push('today')\n        }\n      } else {\n        classes.push(cell.type)\n      }\n\n      if (isCurrent(cell)) {\n        classes.push('current')\n      }\n\n      if (\n        cell.inRange &&\n        (cell.type === 'normal' ||\n          cell.type === 'today' ||\n          props.selectionMode === 'week')\n      ) {\n        classes.push('in-range')\n\n        if (cell.start) {\n          classes.push('start-date')\n        }\n\n        if (cell.end) {\n          classes.push('end-date')\n        }\n      }\n\n      if (cell.disabled) {\n        classes.push('disabled')\n      }\n\n      if (cell.selected) {\n        classes.push('selected')\n      }\n\n      if (cell.customClass) {\n        classes.push(cell.customClass)\n      }\n\n      return classes.join(' ')\n    }\n\n    const getDateOfCell = (row, column) => {\n      const offsetFromStart =\n        row * 7 + (column - (props.showWeekNumber ? 1 : 0)) - offsetDay.value\n      return startDate.value.add(offsetFromStart, 'day')\n    }\n\n    const handleMouseMove = (event) => {\n      if (!props.rangeState.selecting) return\n\n      let target = event.target\n      if (target.tagName === 'SPAN') {\n        target = target.parentNode.parentNode\n      }\n      if (target.tagName === 'DIV') {\n        target = target.parentNode\n      }\n      if (target.tagName !== 'TD') return\n\n      const row = target.parentNode.rowIndex - 1\n      const column = target.cellIndex\n\n      // can not select disabled date\n      if (rows.value[row][column].disabled) return\n\n      // only update rangeState when mouse moves to a new cell\n      // this avoids frequent Date object creation and improves performance\n      if (row !== lastRow.value || column !== lastColumn.value) {\n        lastRow.value = row\n        lastColumn.value = column\n        ctx.emit('changerange', {\n          selecting: true,\n          endDate: getDateOfCell(row, column),\n        })\n      }\n    }\n\n    const handleClick = (event) => {\n      let target = event.target\n\n      while (target) {\n        if (target.tagName === 'TD') {\n          break\n        }\n        target = target.parentNode\n      }\n\n      if (!target || target.tagName !== 'TD') return\n\n      const row = target.parentNode.rowIndex - 1\n      const column = target.cellIndex\n      const cell = rows.value[row][column]\n\n      if (cell.disabled || cell.type === 'week') return\n\n      const newDate = getDateOfCell(row, column)\n\n      if (props.selectionMode === 'range') {\n        if (!props.rangeState.selecting) {\n          ctx.emit('pick', { minDate: newDate, maxDate: null })\n          ctx.emit('select', true)\n        } else {\n          if (newDate >= props.minDate) {\n            ctx.emit('pick', { minDate: props.minDate, maxDate: newDate })\n          } else {\n            ctx.emit('pick', { minDate: newDate, maxDate: props.minDate })\n          }\n          ctx.emit('select', false)\n        }\n      } else if (props.selectionMode === 'day') {\n        ctx.emit('pick', newDate)\n      } else if (props.selectionMode === 'week') {\n        const weekNumber = newDate.week()\n        const value = `${newDate.year()}w${weekNumber}`\n        ctx.emit('pick', {\n          year: newDate.year(),\n          week: weekNumber,\n          value,\n          date: newDate.startOf('week'),\n        })\n      } else if (props.selectionMode === 'dates') {\n        const newValue = cell.selected\n          ? coerceTruthyValueToArray(props.parsedValue).filter(\n              (_) => _.valueOf() !== newDate.valueOf()\n            )\n          : coerceTruthyValueToArray(props.parsedValue).concat([newDate])\n        ctx.emit('pick', newValue)\n      }\n    }\n\n    const isWeekActive = (cell) => {\n      if (props.selectionMode !== 'week') return false\n      let newDate = props.date.startOf('day')\n\n      if (cell.type === 'prev-month') {\n        newDate = newDate.subtract(1, 'month')\n      }\n\n      if (cell.type === 'next-month') {\n        newDate = newDate.add(1, 'month')\n      }\n\n      newDate = newDate.date(parseInt(cell.text, 10))\n\n      if (props.parsedValue && !Array.isArray(props.parsedValue)) {\n        const dayOffset =\n          ((props.parsedValue.day() - firstDayOfWeek + 7) % 7) - 1\n        const weekDate = props.parsedValue.subtract(dayOffset, 'day')\n        return weekDate.isSame(newDate, 'day')\n      }\n      return false\n    }\n\n    return {\n      handleMouseMove,\n      t,\n      rows,\n      isWeekActive,\n      getCellClasses,\n      WEEKS,\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElDatePickerCell","useLocaleInject","ref","computed","coerceTruthyValueToArray","dayjs"],"mappings":"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"}
+{"version":3,"file":"basic-date-table.vue_vue_type_script_lang.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/basic-date-table.vue"],"sourcesContent":["<template>\n  <table\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n    class=\"el-date-table\"\n    :class=\"{ 'is-week-mode': selectionMode === 'week' }\"\n    @click=\"handleClick\"\n    @mousemove=\"handleMouseMove\"\n  >\n    <tbody>\n      <tr>\n        <th v-if=\"showWeekNumber\">{{ t('el.datepicker.week') }}</th>\n        <th v-for=\"(week, key) in WEEKS\" :key=\"key\">\n          {{ t('el.datepicker.weeks.' + week) }}\n        </th>\n      </tr>\n      <tr\n        v-for=\"(row, key) in rows\"\n        :key=\"key\"\n        class=\"el-date-table__row\"\n        :class=\"{ current: isWeekActive(row[1]) }\"\n      >\n        <td\n          v-for=\"(cell, key_) in row\"\n          :key=\"key_\"\n          :class=\"getCellClasses(cell)\"\n        >\n          <el-date-picker-cell :cell=\"cell\" />\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref } from 'vue'\nimport dayjs from 'dayjs'\nimport { useLocale } from '@element-plus/hooks'\nimport { coerceTruthyValueToArray } from '@element-plus/utils/util'\nimport ElDatePickerCell from './basic-cell-render'\nimport type { PropType } from 'vue'\n\nimport type { Dayjs } from 'dayjs'\nimport type { DateCell } from '../date-picker.type'\n\nexport default defineComponent({\n  components: {\n    ElDatePickerCell,\n  },\n  props: {\n    date: {\n      type: Object as PropType<Dayjs>,\n    },\n    minDate: {\n      type: Object as PropType<Dayjs>,\n    },\n    maxDate: {\n      type: Object as PropType<Dayjs>,\n    },\n    parsedValue: {\n      type: [Object, Array] as PropType<Dayjs | Dayjs[]>,\n    },\n    selectionMode: {\n      type: String,\n      default: 'day',\n    },\n    showWeekNumber: {\n      type: Boolean,\n      default: false,\n    },\n    disabledDate: {\n      type: Function,\n    },\n    cellClassName: {\n      type: Function,\n    },\n    rangeState: {\n      type: Object,\n      default: () => ({\n        endDate: null,\n        selecting: false,\n      }),\n    },\n  },\n  emits: ['changerange', 'pick', 'select'],\n\n  setup(props, ctx) {\n    const { t, lang } = useLocale()\n    // data\n    const lastRow = ref(null)\n    const lastColumn = ref(null)\n    const tableRows = ref<DateCell[][]>([[], [], [], [], [], []])\n\n    // todo better way to get Day.js locale object\n    const firstDayOfWeek = (props.date as any).$locale().weekStart || 7\n    const WEEKS_CONSTANT = props.date\n      .locale('en')\n      .localeData()\n      .weekdaysShort()\n      .map((_) => _.toLowerCase())\n\n    const offsetDay = computed(() => {\n      // Sunday 7(0), cal the left and right offset days, 3217654, such as Monday is -1, the is to adjust the position of the first two rows of dates\n      return firstDayOfWeek > 3 ? 7 - firstDayOfWeek : -firstDayOfWeek\n    })\n\n    const startDate = computed(() => {\n      const startDayOfMonth = props.date.startOf('month')\n      return startDayOfMonth.subtract(startDayOfMonth.day() || 7, 'day')\n    })\n\n    const WEEKS = computed(() => {\n      return WEEKS_CONSTANT.concat(WEEKS_CONSTANT).slice(\n        firstDayOfWeek,\n        firstDayOfWeek + 7\n      )\n    })\n\n    const rows = computed(() => {\n      // TODO: refactory rows / getCellClasses\n      const startOfMonth = props.date.startOf('month')\n      const startOfMonthDay = startOfMonth.day() || 7 // day of first day\n      const dateCountOfMonth = startOfMonth.daysInMonth()\n      const dateCountOfLastMonth = startOfMonth\n        .subtract(1, 'month')\n        .daysInMonth()\n\n      const offset = offsetDay.value\n      const rows_ = tableRows.value\n      let count = 1\n\n      const selectedDate: Dayjs[] =\n        props.selectionMode === 'dates'\n          ? coerceTruthyValueToArray(props.parsedValue)\n          : []\n\n      const calNow = dayjs().locale(lang.value).startOf('day')\n\n      for (let i = 0; i < 6; i++) {\n        const row = rows_[i]\n\n        if (props.showWeekNumber) {\n          if (!row[0]) {\n            row[0] = {\n              type: 'week',\n              text: startDate.value.add(i * 7 + 1, 'day').week(),\n            }\n          }\n        }\n\n        for (let j = 0; j < 7; j++) {\n          let cell = row[props.showWeekNumber ? j + 1 : j]\n          if (!cell) {\n            cell = {\n              row: i,\n              column: j,\n              type: 'normal',\n              inRange: false,\n              start: false,\n              end: false,\n            }\n          }\n          const index = i * 7 + j\n          const calTime = startDate.value.add(index - offset, 'day')\n          cell.dayjs = calTime\n          cell.date = calTime.toDate()\n          cell.timestamp = calTime.valueOf()\n          cell.type = 'normal'\n\n          const calEndDate =\n            props.rangeState.endDate ||\n            props.maxDate ||\n            (props.rangeState.selecting && props.minDate)\n\n          cell.inRange =\n            (props.minDate &&\n              calTime.isSameOrAfter(props.minDate, 'day') &&\n              calEndDate &&\n              calTime.isSameOrBefore(calEndDate, 'day')) ||\n            (props.minDate &&\n              calTime.isSameOrBefore(props.minDate, 'day') &&\n              calEndDate &&\n              calTime.isSameOrAfter(calEndDate, 'day'))\n\n          if (props.minDate?.isSameOrAfter(calEndDate)) {\n            cell.start = calEndDate && calTime.isSame(calEndDate, 'day')\n            cell.end = props.minDate && calTime.isSame(props.minDate, 'day')\n          } else {\n            cell.start = props.minDate && calTime.isSame(props.minDate, 'day')\n            cell.end = calEndDate && calTime.isSame(calEndDate, 'day')\n          }\n\n          const isToday = calTime.isSame(calNow, 'day')\n\n          if (isToday) {\n            cell.type = 'today'\n          }\n\n          if (i >= 0 && i <= 1) {\n            const numberOfDaysFromPreviousMonth =\n              startOfMonthDay + offset < 0\n                ? 7 + startOfMonthDay + offset\n                : startOfMonthDay + offset\n\n            if (j + i * 7 >= numberOfDaysFromPreviousMonth) {\n              cell.text = count++\n            } else {\n              cell.text =\n                dateCountOfLastMonth -\n                (numberOfDaysFromPreviousMonth - (j % 7)) +\n                1 +\n                i * 7\n              cell.type = 'prev-month'\n            }\n          } else {\n            if (count <= dateCountOfMonth) {\n              cell.text = count++\n            } else {\n              cell.text = count++ - dateCountOfMonth\n              cell.type = 'next-month'\n            }\n          }\n\n          const cellDate = calTime.toDate()\n          cell.selected = selectedDate.find(\n            (_) => _.valueOf() === calTime.valueOf()\n          )\n          cell.isSelected = !!cell.selected\n          cell.isCurrent = isCurrent(cell)\n          cell.disabled = props.disabledDate && props.disabledDate(cellDate)\n          cell.customClass =\n            props.cellClassName && props.cellClassName(cellDate)\n          row[props.showWeekNumber ? j + 1 : j] = cell\n        }\n\n        if (props.selectionMode === 'week') {\n          const start = props.showWeekNumber ? 1 : 0\n          const end = props.showWeekNumber ? 7 : 6\n          const isActive = isWeekActive(row[start + 1])\n          row[start].inRange = isActive\n          row[start].start = isActive\n          row[end].inRange = isActive\n          row[end].end = isActive\n        }\n      }\n      return rows_\n    })\n\n    const isCurrent = (cell): boolean => {\n      return (\n        props.selectionMode === 'day' &&\n        (cell.type === 'normal' || cell.type === 'today') &&\n        cellMatchesDate(cell, props.parsedValue)\n      )\n    }\n\n    const cellMatchesDate = (cell, date) => {\n      if (!date) return false\n      return dayjs(date)\n        .locale(lang.value)\n        .isSame(props.date.date(Number(cell.text)), 'day')\n    }\n\n    const getCellClasses = (cell) => {\n      const classes: string[] = []\n      if ((cell.type === 'normal' || cell.type === 'today') && !cell.disabled) {\n        classes.push('available')\n        if (cell.type === 'today') {\n          classes.push('today')\n        }\n      } else {\n        classes.push(cell.type)\n      }\n\n      if (isCurrent(cell)) {\n        classes.push('current')\n      }\n\n      if (\n        cell.inRange &&\n        (cell.type === 'normal' ||\n          cell.type === 'today' ||\n          props.selectionMode === 'week')\n      ) {\n        classes.push('in-range')\n\n        if (cell.start) {\n          classes.push('start-date')\n        }\n\n        if (cell.end) {\n          classes.push('end-date')\n        }\n      }\n\n      if (cell.disabled) {\n        classes.push('disabled')\n      }\n\n      if (cell.selected) {\n        classes.push('selected')\n      }\n\n      if (cell.customClass) {\n        classes.push(cell.customClass)\n      }\n\n      return classes.join(' ')\n    }\n\n    const getDateOfCell = (row, column) => {\n      const offsetFromStart =\n        row * 7 + (column - (props.showWeekNumber ? 1 : 0)) - offsetDay.value\n      return startDate.value.add(offsetFromStart, 'day')\n    }\n\n    const handleMouseMove = (event) => {\n      if (!props.rangeState.selecting) return\n\n      let target = event.target\n      if (target.tagName === 'SPAN') {\n        target = target.parentNode.parentNode\n      }\n      if (target.tagName === 'DIV') {\n        target = target.parentNode\n      }\n      if (target.tagName !== 'TD') return\n\n      const row = target.parentNode.rowIndex - 1\n      const column = target.cellIndex\n\n      // can not select disabled date\n      if (rows.value[row][column].disabled) return\n\n      // only update rangeState when mouse moves to a new cell\n      // this avoids frequent Date object creation and improves performance\n      if (row !== lastRow.value || column !== lastColumn.value) {\n        lastRow.value = row\n        lastColumn.value = column\n        ctx.emit('changerange', {\n          selecting: true,\n          endDate: getDateOfCell(row, column),\n        })\n      }\n    }\n\n    const handleClick = (event) => {\n      let target = event.target\n\n      while (target) {\n        if (target.tagName === 'TD') {\n          break\n        }\n        target = target.parentNode\n      }\n\n      if (!target || target.tagName !== 'TD') return\n\n      const row = target.parentNode.rowIndex - 1\n      const column = target.cellIndex\n      const cell = rows.value[row][column]\n\n      if (cell.disabled || cell.type === 'week') return\n\n      const newDate = getDateOfCell(row, column)\n\n      if (props.selectionMode === 'range') {\n        if (!props.rangeState.selecting) {\n          ctx.emit('pick', { minDate: newDate, maxDate: null })\n          ctx.emit('select', true)\n        } else {\n          if (newDate >= props.minDate) {\n            ctx.emit('pick', { minDate: props.minDate, maxDate: newDate })\n          } else {\n            ctx.emit('pick', { minDate: newDate, maxDate: props.minDate })\n          }\n          ctx.emit('select', false)\n        }\n      } else if (props.selectionMode === 'day') {\n        ctx.emit('pick', newDate)\n      } else if (props.selectionMode === 'week') {\n        const weekNumber = newDate.week()\n        const value = `${newDate.year()}w${weekNumber}`\n        ctx.emit('pick', {\n          year: newDate.year(),\n          week: weekNumber,\n          value,\n          date: newDate.startOf('week'),\n        })\n      } else if (props.selectionMode === 'dates') {\n        const newValue = cell.selected\n          ? coerceTruthyValueToArray(props.parsedValue).filter(\n              (_) => _.valueOf() !== newDate.valueOf()\n            )\n          : coerceTruthyValueToArray(props.parsedValue).concat([newDate])\n        ctx.emit('pick', newValue)\n      }\n    }\n\n    const isWeekActive = (cell) => {\n      if (props.selectionMode !== 'week') return false\n      let newDate = props.date.startOf('day')\n\n      if (cell.type === 'prev-month') {\n        newDate = newDate.subtract(1, 'month')\n      }\n\n      if (cell.type === 'next-month') {\n        newDate = newDate.add(1, 'month')\n      }\n\n      newDate = newDate.date(parseInt(cell.text, 10))\n\n      if (props.parsedValue && !Array.isArray(props.parsedValue)) {\n        const dayOffset =\n          ((props.parsedValue.day() - firstDayOfWeek + 7) % 7) - 1\n        const weekDate = props.parsedValue.subtract(dayOffset, 'day')\n        return weekDate.isSame(newDate, 'day')\n      }\n      return false\n    }\n\n    return {\n      handleMouseMove,\n      t,\n      rows,\n      isWeekActive,\n      getCellClasses,\n      WEEKS,\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElDatePickerCell","useLocale","ref","computed","coerceTruthyValueToArray","dayjs"],"mappings":"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"}