element-plus-mobile 0.1.1 → 0.1.2

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_script_setup_true_lang.mjs","names":[],"sources":["../../../../../../packages/components/cascader-panel/src/index.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b('panel'), ns.is('bordered', border)]\"\n    @keydown=\"handleKeyDown\"\n  >\n    <el-cascader-menu\n      v-for=\"(menu, index) in menus\"\n      :key=\"index\"\n      :ref=\"(item) => (menuList[index] = item as CascaderMenuInstance)\"\n      :index=\"index\"\n      :nodes=\"[...menu]\"\n    >\n      <template #empty>\n        <slot name=\"empty\" />\n      </template>\n    </el-cascader-menu>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onBeforeUpdate,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  useSlots,\n  watch,\n} from 'vue'\nimport { cloneDeep, flattenDeep, isEqual } from 'lodash-unified'\nimport {\n  castArray,\n  focusNode,\n  getEventCode,\n  getSibling,\n  isClient,\n  isEmpty,\n  scrollIntoView,\n  unique,\n} from '@element-plus/utils'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport ElCascaderMenu from './menu.vue'\nimport Store from './store'\nimport Node from './node'\nimport { cascaderPanelEmits, useCascaderConfig } from './config'\nimport { checkNode, getMenuIndex, sortByOriginalOrder } from './utils'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\n\nimport type {\n  CascaderNode,\n  CascaderNodeValue,\n  CascaderOption,\n  CascaderValue,\n  ElCascaderPanelContext,\n} from './types'\nimport type { CascaderMenuInstance } from './instance'\nimport type { CascaderPanelProps } from './config'\n\ndefineOptions({\n  name: 'ElCascaderPanel',\n})\n\nconst props = withDefaults(defineProps<CascaderPanelProps>(), {\n  options: () => [],\n  props: () => ({}),\n  border: true,\n})\nconst emit = defineEmits(cascaderPanelEmits)\n\n// for interrupt sync check status in lazy mode\nlet manualChecked = false\n\nconst ns = useNamespace('cascader')\nconst config = useCascaderConfig(props)\nconst slots = useSlots()\n\nlet store: Store\nconst initialLoaded = ref(true)\nconst initialLoadedOnce = ref(false)\nconst menuList = ref<CascaderMenuInstance[]>([])\nconst checkedValue = ref<CascaderValue>()\nconst menus = ref<CascaderNode[][]>([])\nconst expandingNode = ref<CascaderNode>()\nconst checkedNodes = ref<CascaderNode[]>([])\n\nconst isHoverMenu = computed(() => config.value.expandTrigger === 'hover')\nconst renderLabelFn = computed(() => props.renderLabel || slots.default)\n\nconst initStore = () => {\n  const { options } = props\n  const cfg = config.value\n\n  manualChecked = false\n  store = new Store(options, cfg)\n  menus.value = [store.getNodes()]\n\n  if (cfg.lazy && isEmpty(props.options)) {\n    initialLoaded.value = false\n    lazyLoad(undefined, (list) => {\n      if (list) {\n        store = new Store(list, cfg)\n        menus.value = [store.getNodes()]\n      }\n      initialLoaded.value = true\n      syncCheckedValue(false, true)\n    })\n  } else {\n    syncCheckedValue(false, true)\n  }\n}\n\nconst 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    _node.loading = false\n    _node.loaded = true\n    _node.childrenData = _node.childrenData || []\n    dataList && store?.appendNodes(dataList, parent as Node)\n    dataList && cb?.(dataList)\n    if (node.level === 0) {\n      initialLoadedOnce.value = true\n    }\n  }\n\n  const reject = () => {\n    node!.loading = false\n    node!.loaded = false\n    if (node!.level === 0) {\n      initialLoaded.value = true\n    }\n  }\n\n  cfg.lazyLoad(node, resolve, reject)\n}\n\nconst expandNode: ElCascaderPanelContext['expandNode'] = (node, silent) => {\n  const { level } = node\n  const newMenus = menus.value.slice(0, level)\n  let newExpandingNode: 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\nconst 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 && expandParentNode(node)\n}\n\nconst expandParentNode = (node: Node | undefined) => {\n  if (!node) return\n  node = node.parent\n  expandParentNode(node)\n  node && expandNode(node)\n}\n\nconst getFlattedNodes = (leafOnly: boolean) => store?.getFlattedNodes(leafOnly)\n\nconst getCheckedNodes = (leafOnly: boolean) => {\n  return getFlattedNodes(leafOnly)?.filter(({ checked }) => checked !== false)\n}\n\nconst clearCheckedNodes = () => {\n  checkedNodes.value.forEach((node) => node.doCheck(false))\n  calculateCheckedValue()\n  menus.value = menus.value.slice(0, 1)\n  expandingNode.value = undefined\n  emit('expand-change', [])\n}\n\nconst 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\nconst syncCheckedValue = (loaded = false, forced = false) => {\n  const { modelValue } = props\n  const { lazy, multiple, checkStrictly } = config.value\n  const leafOnly = !checkStrictly\n\n  if (\n    !initialLoaded.value ||\n    manualChecked ||\n    (!forced && isEqual(modelValue, checkedValue.value))\n  )\n    return\n\n  if (lazy && !loaded) {\n    const values: CascaderNodeValue[] = unique(\n      flattenDeep(castArray(modelValue as CascaderNodeValue[]))\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 ? castArray(modelValue) : [modelValue]\n    const nodes = unique(\n      values.map((val) =>\n        store?.getNodeByValue(val as CascaderNodeValue, leafOnly)\n      )\n    ) as Node[]\n    syncMenuState(nodes, forced)\n    checkedValue.value = cloneDeep(modelValue ?? undefined)\n  }\n}\n\nconst 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 = undefined\n  }\n\n  oldNodes.forEach((node) => node.doCheck(false))\n  reactive(newNodes).forEach((node) => node.doCheck(true))\n  checkedNodes.value = newNodes\n  nextTick(scrollToExpandingNode)\n}\n\nconst scrollToExpandingNode = () => {\n  if (!isClient) return\n\n  menuList.value.forEach((menu) => {\n    const menuElement = menu?.$el\n    if (menuElement) {\n      const container = menuElement.querySelector(\n        `.${ns.namespace.value}-scrollbar__wrap`\n      )\n      let activeNode = menuElement.querySelector(\n        `.${ns.b('node')}.in-active-path`\n      )\n      if (!activeNode) {\n        const activeElements = menuElement.querySelectorAll(\n          `.${ns.b('node')}.${ns.is('active')}`\n        )\n        activeNode = activeElements[activeElements.length - 1]\n      }\n      scrollIntoView(container, activeNode)\n    }\n  })\n}\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  const target = e.target as HTMLElement\n  const code = getEventCode(e)\n\n  switch (code) {\n    case EVENT_CODE.up:\n    case EVENT_CODE.down: {\n      e.preventDefault()\n      const distance = code === EVENT_CODE.up ? -1 : 1\n      focusNode(\n        getSibling(\n          target,\n          distance,\n          `.${ns.b('node')}[tabindex=\"-1\"]`\n        ) as HTMLElement\n      )\n      break\n    }\n    case EVENT_CODE.left: {\n      e.preventDefault()\n      const preMenu = menuList.value[getMenuIndex(target) - 1]\n      const expandedNode = preMenu?.$el.querySelector(\n        `.${ns.b('node')}[aria-expanded=\"true\"]`\n      )\n      focusNode(expandedNode)\n      break\n    }\n    case EVENT_CODE.right: {\n      e.preventDefault()\n      const nextMenu = menuList.value[getMenuIndex(target) + 1]\n      const firstNode = nextMenu?.$el.querySelector(\n        `.${ns.b('node')}[tabindex=\"-1\"]`\n      )\n      focusNode(firstNode)\n      break\n    }\n    case EVENT_CODE.enter:\n    case EVENT_CODE.numpadEnter:\n      checkNode(target)\n      break\n  }\n}\n\nprovide(\n  CASCADER_PANEL_INJECTION_KEY,\n  reactive({\n    config,\n    expandingNode,\n    checkedNodes,\n    isHoverMenu,\n    initialLoaded,\n    renderLabelFn,\n    lazyLoad,\n    expandNode,\n    handleCheckChange,\n  })\n)\n\nwatch(\n  config,\n  (newVal, oldVal) => {\n    if (isEqual(newVal, oldVal)) return\n    initStore()\n  },\n  {\n    immediate: true,\n  }\n)\n\nwatch(() => props.options, initStore, {\n  deep: true,\n})\n\nwatch(\n  () => props.modelValue,\n  () => {\n    manualChecked = false\n    syncCheckedValue()\n  },\n  {\n    deep: true,\n  }\n)\n\nwatch(\n  () => checkedValue.value,\n  (val) => {\n    if (!isEqual(val, props.modelValue)) {\n      emit(UPDATE_MODEL_EVENT, val)\n      emit(CHANGE_EVENT, val)\n    }\n  }\n)\n\nconst loadLazyRootNodes = () => {\n  if (initialLoadedOnce.value) return\n  initStore()\n}\n\nonBeforeUpdate(() => (menuList.value = []))\n\nonMounted(() => !isEmpty(props.modelValue) && syncCheckedValue())\n\ndefineExpose({\n  menuList,\n  menus,\n  checkedNodes,\n  handleKeyDown,\n  handleCheckChange,\n  getFlattedNodes,\n  /**\n   * @description get an array of currently selected node,(leafOnly) whether only return the leaf checked nodes, default is `false`\n   */\n  getCheckedNodes,\n  /**\n   * @description clear checked nodes\n   */\n  clearCheckedNodes,\n  calculateCheckedValue,\n  scrollToExpandingNode,\n  loadLazyRootNodes,\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"index.vue_vue_type_script_setup_true_lang.mjs","names":[],"sources":["../../../../../../packages/components/cascader-panel/src/index.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"panelRef\"\n    :class=\"[ns.b('panel'), ns.is('bordered', border)]\"\n    @keydown=\"handleKeyDown\"\n  >\n    <el-cascader-menu\n      v-for=\"(menu, index) in menus\"\n      :key=\"index\"\n      :ref=\"(item) => (menuList[index] = item as CascaderMenuInstance)\"\n      :index=\"index\"\n      :nodes=\"[...menu]\"\n    >\n      <template #empty>\n        <slot name=\"empty\" />\n      </template>\n    </el-cascader-menu>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onBeforeUpdate,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  useSlots,\n  watch,\n} from 'vue'\nimport { cloneDeep, flattenDeep, isEqual } from 'lodash-unified'\nimport {\n  castArray,\n  focusNode,\n  getEventCode,\n  getSibling,\n  isClient,\n  isEmpty,\n  scrollIntoView,\n  unique,\n} from '@element-plus/utils'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport ElCascaderMenu from './menu.vue'\nimport Store from './store'\nimport Node from './node'\nimport { cascaderPanelEmits, useCascaderConfig } from './config'\nimport { checkNode, getMenuIndex, sortByOriginalOrder } from './utils'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\n\nimport type {\n  CascaderNode,\n  CascaderNodeValue,\n  CascaderOption,\n  CascaderValue,\n  ElCascaderPanelContext,\n} from './types'\nimport type { CascaderMenuInstance } from './instance'\nimport type { CascaderPanelProps } from './config'\n\ndefineOptions({\n  name: 'ElCascaderPanel',\n})\n\nconst props = withDefaults(defineProps<CascaderPanelProps>(), {\n  options: () => [],\n  props: () => ({}),\n  border: true,\n})\nconst emit = defineEmits(cascaderPanelEmits)\n\n// for interrupt sync check status in lazy mode\nlet manualChecked = false\n\nconst ns = useNamespace('cascader')\nconst config = useCascaderConfig(props)\nconst slots = useSlots()\n\nlet store: Store\nconst initialLoaded = ref(true)\nconst initialLoadedOnce = ref(false)\nconst menuList = ref<CascaderMenuInstance[]>([])\nconst panelRef = ref<HTMLDivElement>()\nconst checkedValue = ref<CascaderValue>()\nconst menus = ref<CascaderNode[][]>([])\nconst expandingNode = ref<CascaderNode>()\nconst checkedNodes = ref<CascaderNode[]>([])\n\nconst isHoverMenu = computed(() => config.value.expandTrigger === 'hover')\nconst renderLabelFn = computed(() => props.renderLabel || slots.default)\n\nconst initStore = () => {\n  const { options } = props\n  const cfg = config.value\n\n  manualChecked = false\n  store = new Store(options, cfg)\n  menus.value = [store.getNodes()]\n\n  if (cfg.lazy && isEmpty(props.options)) {\n    initialLoaded.value = false\n    lazyLoad(undefined, (list) => {\n      if (list) {\n        store = new Store(list, cfg)\n        menus.value = [store.getNodes()]\n      }\n      initialLoaded.value = true\n      syncCheckedValue(false, true)\n    })\n  } else {\n    syncCheckedValue(false, true)\n  }\n}\n\nconst 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    _node.loading = false\n    _node.loaded = true\n    _node.childrenData = _node.childrenData || []\n    dataList && store?.appendNodes(dataList, parent as Node)\n    dataList && cb?.(dataList)\n    if (node.level === 0) {\n      initialLoadedOnce.value = true\n    }\n  }\n\n  const reject = () => {\n    node!.loading = false\n    node!.loaded = false\n    if (node!.level === 0) {\n      initialLoaded.value = true\n    }\n  }\n\n  cfg.lazyLoad(node, resolve, reject)\n}\n\nconst expandNode: ElCascaderPanelContext['expandNode'] = (node, silent) => {\n  const { level } = node\n  const newMenus = menus.value.slice(0, level)\n  let newExpandingNode: 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\nconst 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 && expandParentNode(node)\n}\n\nconst expandParentNode = (node: Node | undefined) => {\n  if (!node) return\n  node = node.parent\n  expandParentNode(node)\n  node && expandNode(node)\n}\n\nconst getFlattedNodes = (leafOnly: boolean) => store?.getFlattedNodes(leafOnly)\n\nconst getCheckedNodes = (leafOnly: boolean) => {\n  return getFlattedNodes(leafOnly)?.filter(({ checked }) => checked !== false)\n}\n\nconst clearCheckedNodes = () => {\n  checkedNodes.value.forEach((node) => node.doCheck(false))\n  calculateCheckedValue()\n  menus.value = menus.value.slice(0, 1)\n  expandingNode.value = undefined\n  emit('expand-change', [])\n}\n\nconst 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\nconst syncCheckedValue = (loaded = false, forced = false) => {\n  const { modelValue } = props\n  const { lazy, multiple, checkStrictly } = config.value\n  const leafOnly = !checkStrictly\n\n  if (\n    !initialLoaded.value ||\n    manualChecked ||\n    (!forced && isEqual(modelValue, checkedValue.value))\n  )\n    return\n\n  if (lazy && !loaded) {\n    const values: CascaderNodeValue[] = unique(\n      flattenDeep(castArray(modelValue as CascaderNodeValue[]))\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 ? castArray(modelValue) : [modelValue]\n    const nodes = unique(\n      values.map((val) =>\n        store?.getNodeByValue(val as CascaderNodeValue, leafOnly)\n      )\n    ) as Node[]\n    syncMenuState(nodes, forced)\n    checkedValue.value = cloneDeep(modelValue ?? undefined)\n  }\n}\n\nconst 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 = undefined\n  }\n\n  oldNodes.forEach((node) => node.doCheck(false))\n  reactive(newNodes).forEach((node) => node.doCheck(true))\n  checkedNodes.value = newNodes\n  nextTick(scrollToExpandingNode)\n}\n\nconst scrollToExpandingNode = () => {\n  if (!isClient) return\n\n  menuList.value.forEach((menu) => {\n    const menuElement = menu?.$el\n    if (menuElement) {\n      const container = menuElement.querySelector(\n        `.${ns.namespace.value}-scrollbar__wrap`\n      )\n      let activeNode = menuElement.querySelector(\n        `.${ns.b('node')}.in-active-path`\n      )\n      if (!activeNode) {\n        const activeElements = menuElement.querySelectorAll(\n          `.${ns.b('node')}.${ns.is('active')}`\n        )\n        activeNode = activeElements[activeElements.length - 1]\n      }\n      scrollIntoView(container, activeNode)\n    }\n  })\n}\n\nwatch(\n  () => menus.value.length,\n  async (length, previousLength = 0) => {\n    if (\n      !isClient ||\n      !panelRef.value ||\n      length <= 1 ||\n      length <= previousLength\n    ) {\n      return\n    }\n\n    await nextTick()\n    panelRef.value.scrollLeft = panelRef.value.scrollWidth\n  }\n)\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  const target = e.target as HTMLElement\n  const code = getEventCode(e)\n\n  switch (code) {\n    case EVENT_CODE.up:\n    case EVENT_CODE.down: {\n      e.preventDefault()\n      const distance = code === EVENT_CODE.up ? -1 : 1\n      focusNode(\n        getSibling(\n          target,\n          distance,\n          `.${ns.b('node')}[tabindex=\"-1\"]`\n        ) as HTMLElement\n      )\n      break\n    }\n    case EVENT_CODE.left: {\n      e.preventDefault()\n      const preMenu = menuList.value[getMenuIndex(target) - 1]\n      const expandedNode = preMenu?.$el.querySelector(\n        `.${ns.b('node')}[aria-expanded=\"true\"]`\n      )\n      focusNode(expandedNode)\n      break\n    }\n    case EVENT_CODE.right: {\n      e.preventDefault()\n      const nextMenu = menuList.value[getMenuIndex(target) + 1]\n      const firstNode = nextMenu?.$el.querySelector(\n        `.${ns.b('node')}[tabindex=\"-1\"]`\n      )\n      focusNode(firstNode)\n      break\n    }\n    case EVENT_CODE.enter:\n    case EVENT_CODE.numpadEnter:\n      checkNode(target)\n      break\n  }\n}\n\nprovide(\n  CASCADER_PANEL_INJECTION_KEY,\n  reactive({\n    config,\n    expandingNode,\n    checkedNodes,\n    isHoverMenu,\n    initialLoaded,\n    renderLabelFn,\n    lazyLoad,\n    expandNode,\n    handleCheckChange,\n  })\n)\n\nwatch(\n  config,\n  (newVal, oldVal) => {\n    if (isEqual(newVal, oldVal)) return\n    initStore()\n  },\n  {\n    immediate: true,\n  }\n)\n\nwatch(() => props.options, initStore, {\n  deep: true,\n})\n\nwatch(\n  () => props.modelValue,\n  () => {\n    manualChecked = false\n    syncCheckedValue()\n  },\n  {\n    deep: true,\n  }\n)\n\nwatch(\n  () => checkedValue.value,\n  (val) => {\n    if (!isEqual(val, props.modelValue)) {\n      emit(UPDATE_MODEL_EVENT, val)\n      emit(CHANGE_EVENT, val)\n    }\n  }\n)\n\nconst loadLazyRootNodes = () => {\n  if (initialLoadedOnce.value) return\n  initStore()\n}\n\nonBeforeUpdate(() => (menuList.value = []))\n\nonMounted(() => !isEmpty(props.modelValue) && syncCheckedValue())\n\ndefineExpose({\n  menuList,\n  menus,\n  checkedNodes,\n  handleKeyDown,\n  handleCheckChange,\n  getFlattedNodes,\n  /**\n   * @description get an array of currently selected node,(leafOnly) whether only return the leaf checked nodes, default is `false`\n   */\n  getCheckedNodes,\n  /**\n   * @description clear checked nodes\n   */\n  clearCheckedNodes,\n  calculateCheckedValue,\n  scrollToExpandingNode,\n  loadLazyRootNodes,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;EAsEA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAGb,IAAI,gBAAgB;EAEpB,MAAM,KAAK,aAAa,WAAU;EAClC,MAAM,SAAS,kBAAkB,MAAK;EACtC,MAAM,QAAQ,UAAS;EAEvB,IAAI;EACJ,MAAM,gBAAgB,IAAI,KAAI;EAC9B,MAAM,oBAAoB,IAAI,MAAK;EACnC,MAAM,WAAW,IAA4B,EAAE,CAAA;EAC/C,MAAM,WAAW,KAAoB;EACrC,MAAM,eAAe,KAAmB;EACxC,MAAM,QAAQ,IAAsB,EAAE,CAAA;EACtC,MAAM,gBAAgB,KAAkB;EACxC,MAAM,eAAe,IAAoB,EAAE,CAAA;EAE3C,MAAM,cAAc,eAAe,OAAO,MAAM,kBAAkB,QAAO;EACzE,MAAM,gBAAgB,eAAe,MAAM,eAAe,MAAM,QAAO;EAEvE,MAAM,kBAAkB;GACtB,MAAM,EAAE,YAAY;GACpB,MAAM,MAAM,OAAO;AAEnB,mBAAgB;AAChB,WAAQ,IAAI,MAAM,SAAS,IAAG;AAC9B,SAAM,QAAQ,CAAC,MAAM,UAAU,CAAA;AAE/B,OAAI,IAAI,QAAQ,QAAQ,MAAM,QAAQ,EAAE;AACtC,kBAAc,QAAQ;AACtB,aAAS,SAAY,SAAS;AAC5B,SAAI,MAAM;AACR,cAAQ,IAAI,MAAM,MAAM,IAAG;AAC3B,YAAM,QAAQ,CAAC,MAAM,UAAU,CAAA;;AAEjC,mBAAc,QAAQ;AACtB,sBAAiB,OAAO,KAAI;MAC7B;SAED,kBAAiB,OAAO,KAAI;;EAIhC,MAAM,YAAgD,MAAM,OAAO;GACjE,MAAM,MAAM,OAAO;AACnB,UAAQ,QAAQ,IAAI,KAAK,EAAE,EAAE,KAAK,QAAW,KAAI;AACjD,QAAK,UAAU;GAEf,MAAM,WAAW,aAAgC;IAC/C,MAAM,QAAQ;IACd,MAAM,SAAS,MAAM,OAAO,OAAO;AACnC,UAAM,UAAU;AAChB,UAAM,SAAS;AACf,UAAM,eAAe,MAAM,gBAAgB,EAAC;AAC5C,gBAAY,OAAO,YAAY,UAAU,OAAc;AACvD,gBAAY,KAAK,SAAQ;AACzB,QAAI,KAAK,UAAU,EACjB,mBAAkB,QAAQ;;GAI9B,MAAM,eAAe;AACnB,SAAM,UAAU;AAChB,SAAM,SAAS;AACf,QAAI,KAAM,UAAU,EAClB,eAAc,QAAQ;;AAI1B,OAAI,SAAS,MAAM,SAAS,OAAM;;EAGpC,MAAM,cAAoD,MAAM,WAAW;GACzE,MAAM,EAAE,UAAU;GAClB,MAAM,WAAW,MAAM,MAAM,MAAM,GAAG,MAAK;GAC3C,IAAI;AAEJ,OAAI,KAAK,OACP,oBAAmB,KAAK,UAAU,QAAQ;QACrC;AACL,uBAAmB;AACnB,aAAS,KAAK,KAAK,SAAQ;;AAG7B,OAAI,cAAc,OAAO,QAAQ,kBAAkB,KAAK;AACtD,kBAAc,QAAQ;AACtB,UAAM,QAAQ;AACd,KAAC,UAAU,KAAK,iBAAiB,MAAM,cAAc,EAAE,CAAA;;;EAI3D,MAAM,qBACJ,MACA,SACA,YAAY,SACT;GACH,MAAM,EAAE,eAAe,aAAa,OAAO;GAC3C,MAAM,UAAU,aAAa,MAAM;AACnC,mBAAgB;AAEhB,IAAC,YAAY,SAAS,QAAQ,MAAK;AACnC,QAAK,QAAQ,QAAO;AACpB,0BAAsB;AACtB,gBAAa,CAAC,YAAY,CAAC,iBAAiB,KAAK,QAAO;AACxD,IAAC,aAAa,CAAC,YAAY,iBAAiB,KAAI;;EAGlD,MAAM,oBAAoB,SAA2B;AACnD,OAAI,CAAC,KAAM;AACX,UAAO,KAAK;AACZ,oBAAiB,KAAI;AACrB,WAAQ,WAAW,KAAI;;EAGzB,MAAM,mBAAmB,aAAsB,OAAO,gBAAgB,SAAQ;EAE9E,MAAM,mBAAmB,aAAsB;AAC7C,UAAO,gBAAgB,SAAS,EAAE,QAAQ,EAAE,cAAc,YAAY,MAAK;;EAG7E,MAAM,0BAA0B;AAC9B,gBAAa,MAAM,SAAS,SAAS,KAAK,QAAQ,MAAM,CAAA;AACxD,0BAAsB;AACtB,SAAM,QAAQ,MAAM,MAAM,MAAM,GAAG,EAAC;AACpC,iBAAc,QAAQ;AACtB,QAAK,iBAAiB,EAAE,CAAA;;EAG1B,MAAM,8BAA8B;GAClC,MAAM,EAAE,eAAe,aAAa,OAAO;GAC3C,MAAM,WAAW,aAAa;GAG9B,MAAM,QAAQ,oBAAoB,UAFjB,gBAAgB,CAAC,cAAc,CAEI;GACpD,MAAM,SAAS,MAAM,KAAK,SAAS,KAAK,cAAa;AACrD,gBAAa,QAAQ;AACrB,gBAAa,QAAQ,WAAW,SAAU,OAAO,MAAM;;EAGzD,MAAM,oBAAoB,SAAS,OAAO,SAAS,UAAU;GAC3D,MAAM,EAAE,eAAe;GACvB,MAAM,EAAE,MAAM,UAAU,kBAAkB,OAAO;GACjD,MAAM,WAAW,CAAC;AAElB,OACE,CAAC,cAAc,SACf,iBACC,CAAC,UAAU,QAAQ,YAAY,aAAa,MAAM,CAEnD;AAEF,OAAI,QAAQ,CAAC,QAAQ;IAInB,MAAM,QAH8B,OAClC,YAAY,UAAU,WAAkC,CAAA,CAC1D,CAEG,KAAK,QAAQ,OAAO,eAAe,IAAI,CAAA,CACvC,QAAQ,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAK,UAAU,CAAC,KAAK,QAAQ;AAE5D,QAAI,MAAM,OACR,OAAM,SAAS,SAAS;AACtB,cAAS,YAAY,iBAAiB,OAAO,OAAO,CAAA;MACrD;QAED,kBAAiB,MAAM,OAAM;UAE1B;AAOL,kBALc,QADC,WAAW,UAAU,WAAW,GAAG,CAAC,WAAU,EAEpD,KAAK,QACV,OAAO,eAAe,KAA0B,SAAQ,CAC1D,CACD,EACoB,OAAM;AAC3B,iBAAa,QAAQ,UAAU,cAAc,OAAS;;;EAI1D,MAAM,iBACJ,iBACA,wBAAwB,SACrB;GACH,MAAM,EAAE,kBAAkB,OAAO;GACjC,MAAM,WAAW,aAAa;GAC9B,MAAM,WAAW,gBAAgB,QAC9B,SAAS,CAAC,CAAC,SAAS,iBAAiB,KAAK,QAC7C;GACA,MAAM,mBAAmB,OAAO,YAAY,cAAc,MAAM;GAChE,MAAM,mBACH,yBAAyB,oBAAqB,SAAS;AAE1D,OAAI,iBACF,kBAAiB,UAAU,SAAS,SAAS,WAAW,MAAM,KAAK,CAAA;OAEnE,eAAc,QAAQ;AAGxB,YAAS,SAAS,SAAS,KAAK,QAAQ,MAAM,CAAA;AAC9C,YAAS,SAAS,CAAC,SAAS,SAAS,KAAK,QAAQ,KAAK,CAAA;AACvD,gBAAa,QAAQ;AACrB,YAAS,sBAAqB;;EAGhC,MAAM,8BAA8B;AAClC,OAAI,CAAC,SAAU;AAEf,YAAS,MAAM,SAAS,SAAS;IAC/B,MAAM,cAAc,MAAM;AAC1B,QAAI,aAAa;KACf,MAAM,YAAY,YAAY,cAC5B,IAAI,GAAG,UAAU,MAAM,kBACzB;KACA,IAAI,aAAa,YAAY,cAC3B,IAAI,GAAG,EAAE,OAAO,CAAC,iBACnB;AACA,SAAI,CAAC,YAAY;MACf,MAAM,iBAAiB,YAAY,iBACjC,IAAI,GAAG,EAAE,OAAO,CAAC,GAAG,GAAG,GAAG,SAAS,GACrC;AACA,mBAAa,eAAe,eAAe,SAAS;;AAEtD,oBAAe,WAAW,WAAU;;KAEvC;;AAGH,cACQ,MAAM,MAAM,QAClB,OAAO,QAAQ,iBAAiB,MAAM;AACpC,OACE,CAAC,YACD,CAAC,SAAS,SACV,UAAU,KACV,UAAU,eAEV;AAGF,SAAM,UAAS;AACf,YAAS,MAAM,aAAa,SAAS,MAAM;IAE/C;EAEA,MAAM,iBAAiB,MAAqB;GAC1C,MAAM,SAAS,EAAE;GACjB,MAAM,OAAO,aAAa,EAAC;AAE3B,WAAQ,MAAR;IACE,KAAK,WAAW;IAChB,KAAK,WAAW;AACd,OAAE,gBAAe;AAEjB,eACE,WACE,QAHa,SAAS,WAAW,KAAK,KAAK,GAK3C,IAAI,GAAG,EAAE,OAAO,CAAC,iBAClB,CACH;AACA;IAEF,KAAK,WAAW,MAAM;AACpB,OAAE,gBAAe;KAEjB,MAAM,eADU,SAAS,MAAM,aAAa,OAAO,GAAG,IACxB,IAAI,cAChC,IAAI,GAAG,EAAE,OAAO,CAAC,wBACnB;AACA,eAAU,aAAY;AACtB;;IAEF,KAAK,WAAW,OAAO;AACrB,OAAE,gBAAe;KAEjB,MAAM,YADW,SAAS,MAAM,aAAa,OAAO,GAAG,IAC3B,IAAI,cAC9B,IAAI,GAAG,EAAE,OAAO,CAAC,iBACnB;AACA,eAAU,UAAS;AACnB;;IAEF,KAAK,WAAW;IAChB,KAAK,WAAW;AACd,eAAU,OAAM;AAChB;;;AAIN,UACE,8BACA,SAAS;GACP;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAA,CACH;AAEA,QACE,SACC,QAAQ,WAAW;AAClB,OAAI,QAAQ,QAAQ,OAAO,CAAE;AAC7B,cAAU;KAEZ,EACE,WAAW,MACb,CACF;AAEA,cAAY,MAAM,SAAS,WAAW,EACpC,MAAM,MACP,CAAA;AAED,cACQ,MAAM,kBACN;AACJ,mBAAgB;AAChB,qBAAiB;KAEnB,EACE,MAAM,MACR,CACF;AAEA,cACQ,aAAa,QAClB,QAAQ;AACP,OAAI,CAAC,QAAQ,KAAK,MAAM,WAAW,EAAE;AACnC,SAAK,oBAAoB,IAAG;AAC5B,SAAK,cAAc,IAAG;;IAG5B;EAEA,MAAM,0BAA0B;AAC9B,OAAI,kBAAkB,MAAO;AAC7B,cAAU;;AAGZ,uBAAsB,SAAS,QAAQ,EAAE,CAAC;AAE1C,kBAAgB,CAAC,QAAQ,MAAM,WAAW,IAAI,kBAAkB,CAAA;AAEhE,WAAa;GACX;GACA;GACA;GACA;GACA;GACA;GAIA;GAIA;GACA;GACA;GACA;GACD,CAAA;;uBAxbC,mBAgBM,OAAA;aAfA;IAAJ,KAAI;IACH,OAAK,eAAA,CAAG,MAAA,GAAE,CAAC,EAAC,QAAA,EAAW,MAAA,GAAE,CAAC,GAAE,YAAa,QAAA,OAAM,CAAA,CAAA;IAC/C,WAAS;yBAEV,mBAUmB,UAAA,MAAA,WATO,MAAA,QAAhB,MAAM,UAAK;wBADrB,YAUmB,cAAA;KARhB,KAAK;;KACL,MAAM,SAAU,SAAA,MAAS,SAAS;KAC3B;KACP,OAAK,CAAA,GAAM,KAAI;;KAEL,OAAK,cACO,CAArB,WAAqB,KAAA,QAAA,QAAA"}

package/es/components/color-picker/src/color-picker.d.ts

@@ -57,14 +57,6 @@ interface ColorPickerProps extends UseEmptyValuesProps, Pick<AriaProps, 'ariaLab
    * @description ColorPicker tabindex
    */
   tabindex?: string | number;
-  /**
-   * @description whether color-picker popper is teleported to the body
-   */
-  teleported?: ElTooltipContentProps['teleported'];
-  /**
-   * @description which color-picker panel appends to
-   */
-  appendTo?: ElTooltipContentProps['appendTo'];
   /**
    * @description predefined color options
    */
@@ -208,13 +200,6 @@ declare const colorPickerProps: {
     __epPropKey: true;
   };
   readonly tabindex: EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, 0, boolean>;
-  readonly teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-  readonly appendTo: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>) | (((new (...args: any[]) => string | HTMLElement) | (() => EpPropMergeType<(new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement) | (((new (...args: any[]) => string | HTMLElement) | (() => string | HTMLElement)) | null)[], unknown, unknown>)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
   readonly predefine: {
     readonly type: vue.PropType<string[]>;
     readonly required: false;
@@ -247,7 +232,6 @@ declare const colorPickerPropsDefaults: {
   readonly clearable: true;
   readonly popperStyle: undefined;
   readonly tabindex: 0;
-  readonly teleported: true;
   readonly validateEvent: true;
   readonly valueOnClear: undefined;
 };

package/es/components/color-picker/src/color-picker.mjs

@@ -38,8 +38,6 @@ const colorPickerProps = buildProps({
 		type: [String, Number],
 		default: 0
 	},
-	teleported: useTooltipContentProps.teleported,
-	appendTo: useTooltipContentProps.appendTo,
 	predefine: { type: definePropType(Array) },
 	validateEvent: {
 		type: Boolean,
@@ -66,7 +64,6 @@ const colorPickerPropsDefaults = {
 	clearable: true,
 	popperStyle: void 0,
 	tabindex: 0,
-	teleported: true,
 	validateEvent: true,
 	valueOnClear: void 0
 };

package/es/components/color-picker/src/color-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.mjs","names":[],"sources":["../../../../../../packages/components/color-picker/src/color-picker.ts"],"sourcesContent":["import { isNil } from 'lodash-unified'\nimport { buildProps, definePropType, isString } from '@element-plus/utils'\nimport {\n  useAriaProps,\n  useEmptyValuesProps,\n  useSizeProp,\n} from '@element-plus/hooks'\nimport { useTooltipContentProps } from '@element-plus/components/tooltip'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type { ColorFormats } from '@ctrl/tinycolor'\nimport type ColorPicker from './color-picker.vue'\nimport type { AriaProps, UseEmptyValuesProps } from '@element-plus/hooks'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { ElTooltipContentProps } from '@element-plus/components/tooltip'\n\nexport interface ColorPickerProps\n  extends UseEmptyValuesProps, Pick<AriaProps, 'ariaLabel'> {\n  /**\n   * @description when color-picker inactive and persistent is false, the color panel will be destroyed\n   */\n  persistent?: boolean\n  /**\n   * @description binding value\n   */\n  modelValue?: string | null\n  /**\n   * @description ColorPicker id\n   */\n  id?: string\n  /**\n   * @description whether to display the alpha slider\n   */\n  showAlpha?: boolean\n  /**\n   * @description color format of v-model\n   */\n  colorFormat?: ColorFormats\n  /**\n   * @description whether to disable the ColorPicker\n   */\n  disabled?: boolean\n  /**\n   * @description whether to show clear button\n   */\n  clearable?: boolean\n  /**\n   * @description size of ColorPicker\n   */\n  size?: ComponentSize\n  /**\n   * @description custom class name for ColorPicker's dropdown\n   */\n  popperClass?: ElTooltipContentProps['popperClass']\n  /**\n   * @description custom style for ColorPicker's dropdown\n   */\n  popperStyle?: ElTooltipContentProps['popperStyle']\n  /**\n   * @description ColorPicker tabindex\n   */\n  tabindex?: string | number\n  /**\n   * @description whether color-picker popper is teleported to the body\n   */\n  teleported?: ElTooltipContentProps['teleported']\n  /**\n   * @description which color-picker panel appends to\n   */\n  appendTo?: ElTooltipContentProps['appendTo']\n  /**\n   * @description predefined color options\n   */\n  predefine?: string[]\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ColorPickerProps` instead.\n */\nexport const colorPickerProps = buildProps({\n  /**\n   * @description when color-picker inactive and persistent is false, the color panel will be destroyed\n   */\n  persistent: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: definePropType<string | null>(String),\n    default: undefined,\n  },\n  /**\n   * @description ColorPicker id\n   */\n  id: String,\n  /**\n   * @description whether to display the alpha slider\n   */\n  showAlpha: Boolean,\n  /**\n   * @description color format of v-model\n   */\n  colorFormat: {\n    type: definePropType<ColorFormats>(String),\n  },\n  /**\n   * @description whether to disable the ColorPicker\n   */\n  disabled: {\n    type: Boolean,\n    default: undefined,\n  },\n  /**\n   * @description whether to show clear button\n   */\n  clearable: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description size of ColorPicker\n   */\n  size: useSizeProp,\n  /**\n   * @description custom class name for ColorPicker's dropdown\n   */\n  popperClass: useTooltipContentProps.popperClass,\n  /**\n   * @description custom style for ColorPicker's dropdown\n   */\n  popperStyle: useTooltipContentProps.popperStyle,\n  /**\n   * @description ColorPicker tabindex\n   */\n  tabindex: {\n    type: [String, Number],\n    default: 0,\n  },\n  /**\n   * @description whether color-picker popper is teleported to the body\n   */\n  teleported: useTooltipContentProps.teleported,\n  /**\n   * @description which color-picker panel appends to\n   */\n  appendTo: useTooltipContentProps.appendTo,\n  /**\n   * @description predefined color options\n   */\n  predefine: {\n    type: definePropType<string[]>(Array),\n  },\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  ...useEmptyValuesProps,\n  ...useAriaProps(['ariaLabel']),\n} as const)\nexport const colorPickerEmits = {\n  [UPDATE_MODEL_EVENT]: (val: string | null) => isString(val) || isNil(val),\n  [CHANGE_EVENT]: (val: string | null) => isString(val) || isNil(val),\n  activeChange: (val: string | null) => isString(val) || isNil(val),\n  focus: (evt: FocusEvent) => evt instanceof FocusEvent,\n  blur: (evt: FocusEvent) => evt instanceof FocusEvent,\n  clear: () => true,\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ColorPickerProps` instead.\n */\nexport type ColorPickerPropsPublic = ExtractPublicPropTypes<\n  typeof colorPickerProps\n>\nexport type ColorPickerEmits = typeof colorPickerEmits\nexport type ColorPickerInstance = InstanceType<typeof ColorPicker> & unknown\n\n/**\n * @description default values for ColorPickerProps, used in components that extend ColorPickerProps\n */\nexport const colorPickerPropsDefaults = {\n  persistent: true,\n  modelValue: undefined,\n  disabled: undefined,\n  clearable: true,\n  popperStyle: undefined,\n  tabindex: 0,\n  teleported: true,\n  validateEvent: true,\n  valueOnClear: undefined,\n} as const\n"],"mappings":";;;;;;;;;;;;;AAoFA,MAAa,mBAAmB,WAAW;CAIzC,YAAY;EACV,MAAM;EACN,SAAS;EACV;CAID,YAAY;EACV,MAAM,eAA8B,OAAO;EAC3C,SAAS;EACV;CAID,IAAI;CAIJ,WAAW;CAIX,aAAa,EACX,MAAM,eAA6B,OAAO,EAC3C;CAID,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;CAID,MAAM;CAIN,aAAa,uBAAuB;CAIpC,aAAa,uBAAuB;CAIpC,UAAU;EACR,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;CAID,YAAY,uBAAuB;CAInC,UAAU,uBAAuB;CAIjC,WAAW,EACT,MAAM,eAAyB,MAAM,EACtC;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CACD,GAAG;CACH,GAAG,aAAa,CAAC,YAAY,CAAC;CAC/B,CAAU;AACX,MAAa,mBAAmB;EAC7B,sBAAsB,QAAuB,SAAS,IAAI,IAAI,MAAM,IAAI;EACxE,gBAAgB,QAAuB,SAAS,IAAI,IAAI,MAAM,IAAI;CACnE,eAAe,QAAuB,SAAS,IAAI,IAAI,MAAM,IAAI;CACjE,QAAQ,QAAoB,eAAe;CAC3C,OAAO,QAAoB,eAAe;CAC1C,aAAa;CACd;;;;AAcD,MAAa,2BAA2B;CACtC,YAAY;CACZ,YAAY;CACZ,UAAU;CACV,WAAW;CACX,aAAa;CACb,UAAU;CACV,YAAY;CACZ,eAAe;CACf,cAAc;CACf"}
+{"version":3,"file":"color-picker.mjs","names":[],"sources":["../../../../../../packages/components/color-picker/src/color-picker.ts"],"sourcesContent":["import { isNil } from 'lodash-unified'\nimport { buildProps, definePropType, isString } from '@element-plus/utils'\nimport {\n  useAriaProps,\n  useEmptyValuesProps,\n  useSizeProp,\n} from '@element-plus/hooks'\nimport { useTooltipContentProps } from '@element-plus/components/tooltip'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type { ColorFormats } from '@ctrl/tinycolor'\nimport type ColorPicker from './color-picker.vue'\nimport type { AriaProps, UseEmptyValuesProps } from '@element-plus/hooks'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { ElTooltipContentProps } from '@element-plus/components/tooltip'\n\nexport interface ColorPickerProps\n  extends UseEmptyValuesProps, Pick<AriaProps, 'ariaLabel'> {\n  /**\n   * @description when color-picker inactive and persistent is false, the color panel will be destroyed\n   */\n  persistent?: boolean\n  /**\n   * @description binding value\n   */\n  modelValue?: string | null\n  /**\n   * @description ColorPicker id\n   */\n  id?: string\n  /**\n   * @description whether to display the alpha slider\n   */\n  showAlpha?: boolean\n  /**\n   * @description color format of v-model\n   */\n  colorFormat?: ColorFormats\n  /**\n   * @description whether to disable the ColorPicker\n   */\n  disabled?: boolean\n  /**\n   * @description whether to show clear button\n   */\n  clearable?: boolean\n  /**\n   * @description size of ColorPicker\n   */\n  size?: ComponentSize\n  /**\n   * @description custom class name for ColorPicker's dropdown\n   */\n  popperClass?: ElTooltipContentProps['popperClass']\n  /**\n   * @description custom style for ColorPicker's dropdown\n   */\n  popperStyle?: ElTooltipContentProps['popperStyle']\n  /**\n   * @description ColorPicker tabindex\n   */\n  tabindex?: string | number\n  /**\n   * @description predefined color options\n   */\n  predefine?: string[]\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ColorPickerProps` instead.\n */\nexport const colorPickerProps = buildProps({\n  /**\n   * @description when color-picker inactive and persistent is false, the color panel will be destroyed\n   */\n  persistent: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: definePropType<string | null>(String),\n    default: undefined,\n  },\n  /**\n   * @description ColorPicker id\n   */\n  id: String,\n  /**\n   * @description whether to display the alpha slider\n   */\n  showAlpha: Boolean,\n  /**\n   * @description color format of v-model\n   */\n  colorFormat: {\n    type: definePropType<ColorFormats>(String),\n  },\n  /**\n   * @description whether to disable the ColorPicker\n   */\n  disabled: {\n    type: Boolean,\n    default: undefined,\n  },\n  /**\n   * @description whether to show clear button\n   */\n  clearable: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description size of ColorPicker\n   */\n  size: useSizeProp,\n  /**\n   * @description custom class name for ColorPicker's dropdown\n   */\n  popperClass: useTooltipContentProps.popperClass,\n  /**\n   * @description custom style for ColorPicker's dropdown\n   */\n  popperStyle: useTooltipContentProps.popperStyle,\n  /**\n   * @description ColorPicker tabindex\n   */\n  tabindex: {\n    type: [String, Number],\n    default: 0,\n  },\n  /**\n   * @description predefined color options\n   */\n  predefine: {\n    type: definePropType<string[]>(Array),\n  },\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  ...useEmptyValuesProps,\n  ...useAriaProps(['ariaLabel']),\n} as const)\nexport const colorPickerEmits = {\n  [UPDATE_MODEL_EVENT]: (val: string | null) => isString(val) || isNil(val),\n  [CHANGE_EVENT]: (val: string | null) => isString(val) || isNil(val),\n  activeChange: (val: string | null) => isString(val) || isNil(val),\n  focus: (evt: FocusEvent) => evt instanceof FocusEvent,\n  blur: (evt: FocusEvent) => evt instanceof FocusEvent,\n  clear: () => true,\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ColorPickerProps` instead.\n */\nexport type ColorPickerPropsPublic = ExtractPublicPropTypes<\n  typeof colorPickerProps\n>\nexport type ColorPickerEmits = typeof colorPickerEmits\nexport type ColorPickerInstance = InstanceType<typeof ColorPicker> & unknown\n\n/**\n * @description default values for ColorPickerProps, used in components that extend ColorPickerProps\n */\nexport const colorPickerPropsDefaults = {\n  persistent: true,\n  modelValue: undefined,\n  disabled: undefined,\n  clearable: true,\n  popperStyle: undefined,\n  tabindex: 0,\n  validateEvent: true,\n  valueOnClear: undefined,\n} as const\n"],"mappings":";;;;;;;;;;;;;AA4EA,MAAa,mBAAmB,WAAW;CAIzC,YAAY;EACV,MAAM;EACN,SAAS;EACV;CAID,YAAY;EACV,MAAM,eAA8B,OAAO;EAC3C,SAAS;EACV;CAID,IAAI;CAIJ,WAAW;CAIX,aAAa,EACX,MAAM,eAA6B,OAAO,EAC3C;CAID,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;CAID,MAAM;CAIN,aAAa,uBAAuB;CAIpC,aAAa,uBAAuB;CAIpC,UAAU;EACR,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;CAID,WAAW,EACT,MAAM,eAAyB,MAAM,EACtC;CAID,eAAe;EACb,MAAM;EACN,SAAS;EACV;CACD,GAAG;CACH,GAAG,aAAa,CAAC,YAAY,CAAC;CAC/B,CAAU;AACX,MAAa,mBAAmB;EAC7B,sBAAsB,QAAuB,SAAS,IAAI,IAAI,MAAM,IAAI;EACxE,gBAAgB,QAAuB,SAAS,IAAI,IAAI,MAAM,IAAI;CACnE,eAAe,QAAuB,SAAS,IAAI,IAAI,MAAM,IAAI;CACjE,QAAQ,QAAoB,eAAe;CAC3C,OAAO,QAAoB,eAAe;CAC1C,aAAa;CACd;;;;AAcD,MAAa,2BAA2B;CACtC,YAAY;CACZ,YAAY;CACZ,UAAU;CACV,WAAW;CACX,aAAa;CACb,UAAU;CACV,eAAe;CACf,cAAc;CACf"}

package/es/components/color-picker/src/color-picker.vue.d.ts

@@ -43,7 +43,6 @@ declare const __VLS_export: vue.DefineComponent<ColorPickerProps, {
   "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
   onActiveChange?: ((val: string | null) => any) | undefined;
 }>, {
-  teleported: boolean;
   modelValue: string | null;
   popperStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
   disabled: boolean;

package/es/components/color-picker/src/color-picker.vue_vue_type_script_setup_true_lang.mjs

@@ -3,7 +3,6 @@ import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from "../../../constants/event.mjs";
 import { getEventCode } from "../../../utils/dom/event.mjs";
 import { debugWarn } from "../../../utils/error.mjs";
 import { ArrowDown, Close } from "../../../utils/vue/builtin-icons.mjs";
-import ClickOutside from "../../../directives/click-outside/index.mjs";
 import { useLocale } from "../../../hooks/use-locale/index.mjs";
 import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
 import { useFocusController } from "../../../hooks/use-focus-controller/index.mjs";
@@ -13,6 +12,7 @@ import { useFormDisabled, useFormSize } from "../../form/src/hooks/use-form-comm
 import { useFormItem, useFormItemInputId } from "../../form/src/hooks/use-form-item.mjs";
 import { ElTooltip } from "../../tooltip/index.mjs";
 import { ElButton } from "../../button/index.mjs";
+import ClickOutside from "../../../directives/click-outside/index.mjs";
 import { ROOT_COMMON_COLOR_INJECTION_KEY, colorPickerPanelProps } from "../../color-picker-panel/src/color-picker-panel.mjs";
 import Color from "../../color-picker-panel/src/utils/color.mjs";
 import { useCommonColor } from "../../color-picker-panel/src/composables/use-common-color.mjs";
@@ -207,13 +207,6 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				ref: popper,
 				visible: showPicker.value,
 				"show-arrow": false,
-				"fallback-placements": [
-					"bottom",
-					"top",
-					"right",
-					"left"
-				],
-				offset: 0,
 				"gpu-acceleration": false,
 				"popper-class": [unref(ns).be("picker", "panel"), __props.popperClass],
 				"popper-style": __props.popperStyle,
@@ -223,10 +216,9 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				role: "dialog",
 				effect: "light",
 				trigger: "click",
-				teleported: __props.teleported,
-				transition: `${unref(ns).namespace.value}-zoom-in-top`,
+				teleported: "",
+				transition: `${unref(ns).namespace.value}-fade-in-linear`,
 				persistent: __props.persistent,
-				"append-to": __props.appendTo,
 				onShow: handleShowTooltip,
 				onHide: _cache[2] || (_cache[2] = ($event) => setShowPicker(false))
 			}, {
@@ -295,10 +287,8 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				"visible",
 				"popper-class",
 				"popper-style",
-				"teleported",
 				"transition",
-				"persistent",
-				"append-to"
+				"persistent"
 			]);
 		};
 	}

package/es/components/color-picker/src/color-picker.vue_vue_type_script_setup_true_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.vue_vue_type_script_setup_true_lang.mjs","names":["$attrs"],"sources":["../../../../../../packages/components/color-picker/src/color-picker.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    :visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"[ns.be('picker', 'panel'), popperClass!]\"\n    :popper-style=\"popperStyle\"\n    :stop-popper-mouse-event=\"false\"\n    pure\n    loop\n    role=\"dialog\"\n    effect=\"light\"\n    trigger=\"click\"\n    :teleported=\"teleported\"\n    :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n    :persistent=\"persistent\"\n    :append-to=\"appendTo\"\n    @show=\"handleShowTooltip\"\n    @hide=\"setShowPicker(false)\"\n  >\n    <template #content>\n      <el-color-picker-panel\n        ref=\"pickerPanelRef\"\n        v-bind=\"panelProps\"\n        v-click-outside:[triggerRef]=\"handleClickOutside\"\n        :border=\"false\"\n        :validate-event=\"false\"\n        @keydown.esc=\"handleEsc\"\n      >\n        <template #footer>\n          <div>\n            <el-button\n              v-if=\"clearable\"\n              :class=\"ns.be('footer', 'link-btn')\"\n              text\n              size=\"small\"\n              @click=\"clear\"\n            >\n              {{ t('el.colorpicker.clear') }}\n            </el-button>\n            <el-button\n              plain\n              size=\"small\"\n              :class=\"ns.be('footer', 'btn')\"\n              @click=\"confirmValue\"\n            >\n              {{ t('el.colorpicker.confirm') }}\n            </el-button>\n          </div>\n        </template>\n      </el-color-picker-panel>\n    </template>\n    <template #default>\n      <div\n        :id=\"buttonId\"\n        ref=\"triggerRef\"\n        v-bind=\"$attrs\"\n        :class=\"btnKls\"\n        role=\"button\"\n        :aria-label=\"buttonAriaLabel\"\n        :aria-labelledby=\"buttonAriaLabelledby\"\n        :aria-description=\"\n          t('el.colorpicker.description', { color: modelValue || '' })\n        \"\n        :aria-disabled=\"colorDisabled\"\n        :tabindex=\"colorDisabled ? undefined : tabindex\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n      >\n        <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n          <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n            <span\n              :class=\"ns.be('picker', 'color-inner')\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-show=\"!modelValue && !showPanelColor\"\n                :class=\"[ns.be('picker', 'empty'), ns.is('icon-close')]\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, provide, ref, watch } from 'vue'\nimport { debounce, pick } from 'lodash-unified'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { reactiveComputed } from '@vueuse/core'\nimport { ClickOutside as vClickOutside } from '@element-plus/directives'\nimport { ElTooltip } from '@element-plus/components/tooltip'\nimport { ElButton } from '@element-plus/components/button'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport {\n  useEmptyValues,\n  useFocusController,\n  useLocale,\n  useNamespace,\n} from '@element-plus/hooks'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { ArrowDown, Close, debugWarn, getEventCode } from '@element-plus/utils'\nimport { colorPickerEmits, colorPickerPropsDefaults } from './color-picker'\nimport {\n  ElColorPickerPanel,\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelProps,\n} from '@element-plus/components/color-picker-panel'\nimport Color from '@element-plus/components/color-picker-panel/src/utils/color'\nimport { useCommonColor } from '@element-plus/components/color-picker-panel/src/composables/use-common-color'\n\nimport type { ColorPickerPanelInstance } from '@element-plus/components/color-picker-panel'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { ColorPickerProps } from './color-picker'\n\ndefineOptions({\n  name: 'ElColorPicker',\n})\nconst props = withDefaults(\n  defineProps<ColorPickerProps>(),\n  colorPickerPropsDefaults\n)\n\nconst emit = defineEmits(colorPickerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('color')\nconst { formItem } = useFormItem()\nconst colorSize = useFormSize()\nconst colorDisabled = useFormDisabled()\nconst { valueOnClear, isEmptyValue } = useEmptyValues(props, null)\nconst commonColor = useCommonColor(props, emit)\nconst { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst popper = ref<TooltipInstance>()\nconst triggerRef = ref()\nconst pickerPanelRef = ref<ColorPickerPanelInstance>()\nconst showPicker = ref(false)\nconst showPanelColor = ref(false)\n\n// active-change is used to prevent modelValue changes from triggering.\nlet shouldActiveChange = true\n\nconst { isFocused, handleFocus, handleBlur } = useFocusController(triggerRef, {\n  disabled: colorDisabled,\n  beforeBlur(event) {\n    return popper.value?.isFocusInsideContent(event)\n  },\n  afterBlur() {\n    setShowPicker(false)\n    resetColor()\n    if (props.validateEvent) {\n      formItem?.validate?.('blur').catch((err) => debugWarn(err))\n    }\n  },\n})\n\nconst color = reactiveComputed(\n  () => pickerPanelRef.value?.color ?? commonColor.color\n) as Color\n\nconst panelProps = computed(() =>\n  pick(props, Object.keys(colorPickerPanelProps))\n)\n\nconst displayedColor = computed(() => {\n  if (!props.modelValue && !showPanelColor.value) {\n    return 'transparent'\n  }\n  return displayedRgb(color, props.showAlpha)\n})\n\nconst currentColor = computed(() => {\n  return !props.modelValue && !showPanelColor.value ? '' : color.value\n})\n\nconst buttonAriaLabel = computed<string | undefined>(() => {\n  return !isLabeledByFormItem.value\n    ? props.ariaLabel || t('el.colorpicker.defaultLabel')\n    : undefined\n})\n\nconst buttonAriaLabelledby = computed<string | undefined>(() => {\n  return isLabeledByFormItem.value ? formItem?.labelId : undefined\n})\n\nconst btnKls = computed(() => {\n  return [\n    ns.b('picker'),\n    ns.is('disabled', colorDisabled.value),\n    ns.bm('picker', colorSize.value),\n    ns.is('focused', isFocused.value),\n  ]\n})\n\nfunction displayedRgb(color: Color, showAlpha: boolean) {\n  const { r, g, b, a } = color.toRgb()\n  return showAlpha ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`\n}\n\nfunction setShowPicker(value: boolean) {\n  showPicker.value = value\n}\n\nconst debounceSetShowPicker = debounce(setShowPicker, 100, { leading: true })\nfunction show() {\n  if (colorDisabled.value) return\n  setShowPicker(true)\n}\n\nfunction hide() {\n  debounceSetShowPicker(false)\n  resetColor()\n}\n\nfunction resetColor() {\n  nextTick(() => {\n    if (props.modelValue) {\n      color.fromString(props.modelValue)\n    } else {\n      color.value = ''\n      nextTick(() => {\n        showPanelColor.value = false\n      })\n    }\n  })\n}\n\nfunction handleTrigger() {\n  if (colorDisabled.value) return\n  if (showPicker.value) {\n    resetColor()\n  }\n  debounceSetShowPicker(!showPicker.value)\n}\n\nfunction confirmValue() {\n  const value = isEmptyValue(color.value) ? valueOnClear.value : color.value\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(CHANGE_EVENT, value)\n  if (props.validateEvent) {\n    formItem?.validate('change').catch((err) => debugWarn(err))\n  }\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      value: props.modelValue,\n    })\n    if (!color.compare(newColor)) {\n      resetColor()\n    }\n  })\n}\n\nfunction clear() {\n  debounceSetShowPicker(false)\n  emit(UPDATE_MODEL_EVENT, valueOnClear.value)\n  emit(CHANGE_EVENT, valueOnClear.value)\n  if (props.modelValue !== valueOnClear.value && props.validateEvent) {\n    formItem?.validate('change').catch((err) => debugWarn(err))\n  }\n  resetColor()\n  emit('clear')\n}\n\nfunction handleShowTooltip() {\n  pickerPanelRef?.value?.inputRef?.focus()\n}\n\nfunction handleClickOutside() {\n  if (!showPicker.value) return\n  hide()\n  isFocused.value && focus()\n}\n\nfunction handleEsc(event: KeyboardEvent) {\n  event.preventDefault()\n  event.stopPropagation()\n  setShowPicker(false)\n  resetColor()\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  const code = getEventCode(event)\n\n  switch (code) {\n    case EVENT_CODE.enter:\n    case EVENT_CODE.numpadEnter:\n    case EVENT_CODE.space:\n      event.preventDefault()\n      event.stopPropagation()\n      show()\n      break\n    case EVENT_CODE.esc:\n      handleEsc(event)\n      break\n  }\n}\n\nfunction focus() {\n  triggerRef.value.focus()\n}\n\nfunction blur() {\n  triggerRef.value.blur()\n}\n\nwatch(\n  () => currentColor.value,\n  (val) => {\n    shouldActiveChange && emit('activeChange', val)\n    shouldActiveChange = true\n  }\n)\n\nwatch(\n  () => color.value,\n  () => {\n    if (!props.modelValue && !showPanelColor.value) {\n      showPanelColor.value = true\n    }\n  }\n)\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (!newVal) {\n      showPanelColor.value = false\n    } else if (newVal && newVal !== color.value) {\n      shouldActiveChange = false\n      color.fromString(newVal)\n    }\n  }\n)\n\nwatch(\n  () => showPicker.value,\n  () => {\n    pickerPanelRef.value && nextTick(pickerPanelRef.value.update)\n  }\n)\n\nprovide(ROOT_COMMON_COLOR_INJECTION_KEY, commonColor)\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description manually show ColorPicker\n   */\n  show,\n  /**\n   * @description manually hide ColorPicker\n   */\n  hide,\n  /**\n   * @description focus the input element\n   */\n  focus,\n  /**\n   * @description blur the input element\n   */\n  blur,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+IA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAEb,MAAM,EAAE,MAAM,WAAU;EACxB,MAAM,KAAK,aAAa,QAAO;EAC/B,MAAM,EAAE,aAAa,aAAY;EACjC,MAAM,YAAY,aAAY;EAC9B,MAAM,gBAAgB,iBAAgB;EACtC,MAAM,EAAE,cAAc,iBAAiB,eAAe,OAAO,KAAI;EACjE,MAAM,cAAc,eAAe,OAAO,KAAI;EAC9C,MAAM,EAAE,SAAS,UAAU,wBAAwB,mBAAmB,OAAO,EAC3E,iBAAiB,UAClB,CAAA;EAED,MAAM,SAAS,KAAqB;EACpC,MAAM,aAAa,KAAI;EACvB,MAAM,iBAAiB,KAA8B;EACrD,MAAM,aAAa,IAAI,MAAK;EAC5B,MAAM,iBAAiB,IAAI,MAAK;EAGhC,IAAI,qBAAqB;EAEzB,MAAM,EAAE,WAAW,aAAa,eAAe,mBAAmB,YAAY;GAC5E,UAAU;GACV,WAAW,OAAO;AAChB,WAAO,OAAO,OAAO,qBAAqB,MAAK;;GAEjD,YAAY;AACV,kBAAc,MAAK;AACnB,gBAAW;AACX,QAAI,MAAM,cACR,WAAU,WAAW,OAAO,CAAC,OAAO,QAAQ,UAAU,IAAI,CAAA;;GAG/D,CAAA;EAED,MAAM,QAAQ,uBACN,eAAe,OAAO,SAAS,YAAY,MAClD;EAED,MAAM,aAAa,eACjB,KAAK,OAAO,OAAO,KAAK,sBAAsB,CAAA,CAChD;EAEA,MAAM,iBAAiB,eAAe;AACpC,OAAI,CAAC,MAAM,cAAc,CAAC,eAAe,MACvC,QAAO;AAET,UAAO,aAAa,OAAO,MAAM,UAAS;IAC3C;EAED,MAAM,eAAe,eAAe;AAClC,UAAO,CAAC,MAAM,cAAc,CAAC,eAAe,QAAQ,KAAK,MAAM;IAChE;EAED,MAAM,kBAAkB,eAAmC;AACzD,UAAO,CAAC,oBAAoB,QACxB,MAAM,aAAa,EAAE,8BAA6B,GAClD;IACL;EAED,MAAM,uBAAuB,eAAmC;AAC9D,UAAO,oBAAoB,QAAQ,UAAU,UAAU;IACxD;EAED,MAAM,SAAS,eAAe;AAC5B,UAAO;IACL,GAAG,EAAE,SAAS;IACd,GAAG,GAAG,YAAY,cAAc,MAAM;IACtC,GAAG,GAAG,UAAU,UAAU,MAAM;IAChC,GAAG,GAAG,WAAW,UAAU,MAAM;IACnC;IACD;EAED,SAAS,aAAa,OAAc,WAAoB;GACtD,MAAM,EAAE,GAAG,GAAG,GAAG,MAAM,MAAM,OAAM;AACnC,UAAO,YAAY,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE;;EAG3E,SAAS,cAAc,OAAgB;AACrC,cAAW,QAAQ;;EAGrB,MAAM,wBAAwB,SAAS,eAAe,KAAK,EAAE,SAAS,MAAM,CAAA;EAC5E,SAAS,OAAO;AACd,OAAI,cAAc,MAAO;AACzB,iBAAc,KAAI;;EAGpB,SAAS,OAAO;AACd,yBAAsB,MAAK;AAC3B,eAAW;;EAGb,SAAS,aAAa;AACpB,kBAAe;AACb,QAAI,MAAM,WACR,OAAM,WAAW,MAAM,WAAU;SAC5B;AACL,WAAM,QAAQ;AACd,oBAAe;AACb,qBAAe,QAAQ;OACxB;;KAEJ;;EAGH,SAAS,gBAAgB;AACvB,OAAI,cAAc,MAAO;AACzB,OAAI,WAAW,MACb,aAAW;AAEb,yBAAsB,CAAC,WAAW,MAAK;;EAGzC,SAAS,eAAe;GACtB,MAAM,QAAQ,aAAa,MAAM,MAAM,GAAG,aAAa,QAAQ,MAAM;AACrE,QAAK,oBAAoB,MAAK;AAC9B,QAAK,cAAc,MAAK;AACxB,OAAI,MAAM,cACR,WAAU,SAAS,SAAS,CAAC,OAAO,QAAQ,UAAU,IAAI,CAAA;AAE5D,yBAAsB,MAAK;AAE3B,kBAAe;IACb,MAAM,WAAW,IAAI,MAAM;KACzB,aAAa,MAAM;KACnB,QAAQ,MAAM,eAAe;KAC7B,OAAO,MAAM;KACd,CAAA;AACD,QAAI,CAAC,MAAM,QAAQ,SAAS,CAC1B,aAAW;KAEd;;EAGH,SAAS,QAAQ;AACf,yBAAsB,MAAK;AAC3B,QAAK,oBAAoB,aAAa,MAAK;AAC3C,QAAK,cAAc,aAAa,MAAK;AACrC,OAAI,MAAM,eAAe,aAAa,SAAS,MAAM,cACnD,WAAU,SAAS,SAAS,CAAC,OAAO,QAAQ,UAAU,IAAI,CAAA;AAE5D,eAAW;AACX,QAAK,QAAO;;EAGd,SAAS,oBAAoB;AAC3B,mBAAgB,OAAO,UAAU,OAAM;;EAGzC,SAAS,qBAAqB;AAC5B,OAAI,CAAC,WAAW,MAAO;AACvB,SAAK;AACL,aAAU,SAAS,OAAM;;EAG3B,SAAS,UAAU,OAAsB;AACvC,SAAM,gBAAe;AACrB,SAAM,iBAAgB;AACtB,iBAAc,MAAK;AACnB,eAAW;;EAGb,SAAS,cAAc,OAAsB;AAG3C,WAFa,aAAa,MAAK,EAE/B;IACE,KAAK,WAAW;IAChB,KAAK,WAAW;IAChB,KAAK,WAAW;AACd,WAAM,gBAAe;AACrB,WAAM,iBAAgB;AACtB,WAAK;AACL;IACF,KAAK,WAAW;AACd,eAAU,MAAK;AACf;;;EAIN,SAAS,QAAQ;AACf,cAAW,MAAM,OAAM;;EAGzB,SAAS,OAAO;AACd,cAAW,MAAM,MAAK;;AAGxB,cACQ,aAAa,QAClB,QAAQ;AACP,yBAAsB,KAAK,gBAAgB,IAAG;AAC9C,wBAAqB;IAEzB;AAEA,cACQ,MAAM,aACN;AACJ,OAAI,CAAC,MAAM,cAAc,CAAC,eAAe,MACvC,gBAAe,QAAQ;IAG7B;AAEA,cACQ,MAAM,aACX,WAAW;AACV,OAAI,CAAC,OACH,gBAAe,QAAQ;YACd,UAAU,WAAW,MAAM,OAAO;AAC3C,yBAAqB;AACrB,UAAM,WAAW,OAAM;;IAG7B;AAEA,cACQ,WAAW,aACX;AACJ,kBAAe,SAAS,SAAS,eAAe,MAAM,OAAM;IAEhE;AAEA,UAAQ,iCAAiC,YAAW;AAEpD,WAAa;GAIX;GAIA;GAIA;GAIA;GAIA;GACD,CAAA;;uBA3YC,YAiGa,MAAA,UAAA,EAAA;aAhGP;IAAJ,KAAI;IACH,SAAS,WAAA;IACT,cAAY;IACZ,uBAAqB;KAAA;KAAA;KAAA;KAAA;KAAkC;IACvD,QAAQ;IACR,oBAAkB;IAClB,gBAAY,CAAG,MAAA,GAAE,CAAC,GAAE,UAAA,QAAA,EAAqB,QAAA,YAAW;IACpD,gBAAc,QAAA;IACd,2BAAyB;IAC1B,MAAA;IACA,MAAA;IACA,MAAK;IACL,QAAO;IACP,SAAQ;IACP,YAAY,QAAA;IACZ,YAAU,GAAK,MAAA,GAAE,CAAC,UAAU,MAAK;IACjC,YAAY,QAAA;IACZ,aAAW,QAAA;IACX,QAAM;IACN,QAAI,OAAA,OAAA,OAAA,MAAA,WAAE,cAAa,MAAA;;IAET,SAAO,cA8BQ,8BA7BxB,YA6BwB,MAAA,mBAAA,EA7BxB,WA6BwB;cA5BlB;KAAJ,KAAI;OACI,WAAA,OAAU;KAEjB,QAAQ;KACR,kBAAgB;KAChB,WAAO,SAAM,WAAS,CAAA,MAAA,CAAA;;KAEZ,QAAM,cAmBT,CAlBN,mBAkBM,OAAA,MAAA,CAhBI,QAAA,0BADR,YAQY,MAAA,SAAA,EAAA;;MANT,OAAK,eAAE,MAAA,GAAE,CAAC,GAAE,UAAA,WAAA,CAAA;MACb,MAAA;MACA,MAAK;MACJ,SAAO;;6BAEuB,iCAA5B,MAAA,EAAC,CAAA,uBAAA,CAAA,EAAA,EAAA;;2DAEN,YAOY,MAAA,SAAA,EAAA;MANV,OAAA;MACA,MAAK;MACJ,OAAK,eAAE,MAAA,GAAE,CAAC,GAAE,UAAA,MAAA,CAAA;MACZ,SAAO;;6BAEyB,iCAA9B,MAAA,EAAC,CAAA,yBAAA,CAAA,EAAA,EAAA;;;;;;KAtBoB;KAAd,WAAA;KAAY;IA4BrB,SAAO,cAyCV,CAxCN,mBAwCM,OAxCN,WAwCM;KAvCH,IAAI,MAAA,SAAQ;cACT;KAAJ,KAAI;OACIA,KAAAA,QAAM;KACb,OAAO,OAAA;KACR,MAAK;KACJ,cAAY,gBAAA;KACZ,mBAAiB,qBAAA;KACjB,oBAA6B,MAAA,EAAC,CAAA,8BAAA,EAAA,OAAwC,QAAA,cAAU,IAAA,CAAA;KAGhF,iBAAe,MAAA,cAAa;KAC5B,UAAU,MAAA,cAAa,GAAG,SAAY,QAAA;KACtC,WAAS;KACT,SAAK,OAAA,OAAA,OAAA,kBAAE,MAAA,YAAA,IAAA,MAAA,YAAA,CAAA,GAAA,KAAW;KAClB,QAAI,OAAA,OAAA,OAAA,kBAAE,MAAA,WAAA,IAAA,MAAA,WAAA,CAAA,GAAA,KAAU;SAEjB,mBAsBM,OAAA;KAtBA,OAAK,eAAE,MAAA,GAAE,CAAC,GAAE,UAAA,UAAA,CAAA;KAAwB,SAAO;QAC/C,mBAoBO,QAAA,EApBA,OAAK,eAAA,CAAG,MAAA,GAAE,CAAC,GAAE,UAAA,QAAA,EAAqB,MAAA,GAAE,CAAC,GAAE,SAAU,QAAA,UAAS,CAAA,CAAA,KAC/D,mBAkBO,QAAA;KAjBJ,OAAK,eAAE,MAAA,GAAE,CAAC,GAAE,UAAA,cAAA,CAAA;KACZ,OAAK,eAAA,mBAAqC,eAAA;uBAI3C,YAKU,MAAA,OAAA,EAAA,EAHP,OAAK,eAAA,CAAG,MAAA,GAAE,CAAC,GAAE,UAAA,OAAA,EAAoB,MAAA,GAAE,CAAC,GAAE,kBAAA,CAAA,CAAA;4BAEzB,CAAd,YAAc,MAAA,UAAA,CAAA;;+BAHN,QAAA,cAAc,eAAA,MAAc,mBAKtC,YAKU,MAAA,OAAA,EAAA,EAHP,OAAK,eAAA,CAAG,MAAA,GAAE,CAAC,GAAE,UAAA,QAAA,EAAqB,MAAA,GAAE,CAAC,GAAE,aAAA,CAAA,CAAA;4BAE/B,CAAT,YAAS,MAAA,MAAA,CAAA;;gCAHA,QAAA,cAAU,CAAK,eAAA,MAAc"}
+{"version":3,"file":"color-picker.vue_vue_type_script_setup_true_lang.mjs","names":["$attrs"],"sources":["../../../../../../packages/components/color-picker/src/color-picker.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    :visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"[ns.be('picker', 'panel'), popperClass!]\"\n    :popper-style=\"popperStyle\"\n    :stop-popper-mouse-event=\"false\"\n    pure\n    loop\n    role=\"dialog\"\n    effect=\"light\"\n    trigger=\"click\"\n    teleported\n    :transition=\"`${ns.namespace.value}-fade-in-linear`\"\n    :persistent=\"persistent\"\n    @show=\"handleShowTooltip\"\n    @hide=\"setShowPicker(false)\"\n  >\n    <template #content>\n      <el-color-picker-panel\n        ref=\"pickerPanelRef\"\n        v-bind=\"panelProps\"\n        v-click-outside:[triggerRef]=\"handleClickOutside\"\n        :border=\"false\"\n        :validate-event=\"false\"\n        @keydown.esc=\"handleEsc\"\n      >\n        <template #footer>\n          <div>\n            <el-button\n              v-if=\"clearable\"\n              :class=\"ns.be('footer', 'link-btn')\"\n              text\n              size=\"small\"\n              @click=\"clear\"\n            >\n              {{ t('el.colorpicker.clear') }}\n            </el-button>\n            <el-button\n              plain\n              size=\"small\"\n              :class=\"ns.be('footer', 'btn')\"\n              @click=\"confirmValue\"\n            >\n              {{ t('el.colorpicker.confirm') }}\n            </el-button>\n          </div>\n        </template>\n      </el-color-picker-panel>\n    </template>\n    <template #default>\n      <div\n        :id=\"buttonId\"\n        ref=\"triggerRef\"\n        v-bind=\"$attrs\"\n        :class=\"btnKls\"\n        role=\"button\"\n        :aria-label=\"buttonAriaLabel\"\n        :aria-labelledby=\"buttonAriaLabelledby\"\n        :aria-description=\"\n          t('el.colorpicker.description', { color: modelValue || '' })\n        \"\n        :aria-disabled=\"colorDisabled\"\n        :tabindex=\"colorDisabled ? undefined : tabindex\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n      >\n        <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n          <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n            <span\n              :class=\"ns.be('picker', 'color-inner')\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-show=\"!modelValue && !showPanelColor\"\n                :class=\"[ns.be('picker', 'empty'), ns.is('icon-close')]\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, provide, ref, watch } from 'vue'\nimport { debounce, pick } from 'lodash-unified'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { reactiveComputed } from '@vueuse/core'\nimport { ClickOutside as vClickOutside } from '@element-plus/directives'\nimport { ElTooltip } from '@element-plus/components/tooltip'\nimport { ElButton } from '@element-plus/components/button'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport {\n  useEmptyValues,\n  useFocusController,\n  useLocale,\n  useNamespace,\n} from '@element-plus/hooks'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { ArrowDown, Close, debugWarn, getEventCode } from '@element-plus/utils'\nimport { colorPickerEmits, colorPickerPropsDefaults } from './color-picker'\nimport {\n  ElColorPickerPanel,\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelProps,\n} from '@element-plus/components/color-picker-panel'\nimport Color from '@element-plus/components/color-picker-panel/src/utils/color'\nimport { useCommonColor } from '@element-plus/components/color-picker-panel/src/composables/use-common-color'\n\nimport type { ColorPickerPanelInstance } from '@element-plus/components/color-picker-panel'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { ColorPickerProps } from './color-picker'\n\ndefineOptions({\n  name: 'ElColorPicker',\n})\nconst props = withDefaults(\n  defineProps<ColorPickerProps>(),\n  colorPickerPropsDefaults\n)\n\nconst emit = defineEmits(colorPickerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('color')\nconst { formItem } = useFormItem()\nconst colorSize = useFormSize()\nconst colorDisabled = useFormDisabled()\nconst { valueOnClear, isEmptyValue } = useEmptyValues(props, null)\nconst commonColor = useCommonColor(props, emit)\nconst { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst popper = ref<TooltipInstance>()\nconst triggerRef = ref()\nconst pickerPanelRef = ref<ColorPickerPanelInstance>()\nconst showPicker = ref(false)\nconst showPanelColor = ref(false)\n\n// active-change is used to prevent modelValue changes from triggering.\nlet shouldActiveChange = true\n\nconst { isFocused, handleFocus, handleBlur } = useFocusController(triggerRef, {\n  disabled: colorDisabled,\n  beforeBlur(event) {\n    return popper.value?.isFocusInsideContent(event)\n  },\n  afterBlur() {\n    setShowPicker(false)\n    resetColor()\n    if (props.validateEvent) {\n      formItem?.validate?.('blur').catch((err) => debugWarn(err))\n    }\n  },\n})\n\nconst color = reactiveComputed(\n  () => pickerPanelRef.value?.color ?? commonColor.color\n) as Color\n\nconst panelProps = computed(() =>\n  pick(props, Object.keys(colorPickerPanelProps))\n)\n\nconst displayedColor = computed(() => {\n  if (!props.modelValue && !showPanelColor.value) {\n    return 'transparent'\n  }\n  return displayedRgb(color, props.showAlpha)\n})\n\nconst currentColor = computed(() => {\n  return !props.modelValue && !showPanelColor.value ? '' : color.value\n})\n\nconst buttonAriaLabel = computed<string | undefined>(() => {\n  return !isLabeledByFormItem.value\n    ? props.ariaLabel || t('el.colorpicker.defaultLabel')\n    : undefined\n})\n\nconst buttonAriaLabelledby = computed<string | undefined>(() => {\n  return isLabeledByFormItem.value ? formItem?.labelId : undefined\n})\n\nconst btnKls = computed(() => {\n  return [\n    ns.b('picker'),\n    ns.is('disabled', colorDisabled.value),\n    ns.bm('picker', colorSize.value),\n    ns.is('focused', isFocused.value),\n  ]\n})\n\nfunction displayedRgb(color: Color, showAlpha: boolean) {\n  const { r, g, b, a } = color.toRgb()\n  return showAlpha ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`\n}\n\nfunction setShowPicker(value: boolean) {\n  showPicker.value = value\n}\n\nconst debounceSetShowPicker = debounce(setShowPicker, 100, { leading: true })\nfunction show() {\n  if (colorDisabled.value) return\n  setShowPicker(true)\n}\n\nfunction hide() {\n  debounceSetShowPicker(false)\n  resetColor()\n}\n\nfunction resetColor() {\n  nextTick(() => {\n    if (props.modelValue) {\n      color.fromString(props.modelValue)\n    } else {\n      color.value = ''\n      nextTick(() => {\n        showPanelColor.value = false\n      })\n    }\n  })\n}\n\nfunction handleTrigger() {\n  if (colorDisabled.value) return\n  if (showPicker.value) {\n    resetColor()\n  }\n  debounceSetShowPicker(!showPicker.value)\n}\n\nfunction confirmValue() {\n  const value = isEmptyValue(color.value) ? valueOnClear.value : color.value\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(CHANGE_EVENT, value)\n  if (props.validateEvent) {\n    formItem?.validate('change').catch((err) => debugWarn(err))\n  }\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      value: props.modelValue,\n    })\n    if (!color.compare(newColor)) {\n      resetColor()\n    }\n  })\n}\n\nfunction clear() {\n  debounceSetShowPicker(false)\n  emit(UPDATE_MODEL_EVENT, valueOnClear.value)\n  emit(CHANGE_EVENT, valueOnClear.value)\n  if (props.modelValue !== valueOnClear.value && props.validateEvent) {\n    formItem?.validate('change').catch((err) => debugWarn(err))\n  }\n  resetColor()\n  emit('clear')\n}\n\nfunction handleShowTooltip() {\n  pickerPanelRef?.value?.inputRef?.focus()\n}\n\nfunction handleClickOutside() {\n  if (!showPicker.value) return\n  hide()\n  isFocused.value && focus()\n}\n\nfunction handleEsc(event: KeyboardEvent) {\n  event.preventDefault()\n  event.stopPropagation()\n  setShowPicker(false)\n  resetColor()\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  const code = getEventCode(event)\n\n  switch (code) {\n    case EVENT_CODE.enter:\n    case EVENT_CODE.numpadEnter:\n    case EVENT_CODE.space:\n      event.preventDefault()\n      event.stopPropagation()\n      show()\n      break\n    case EVENT_CODE.esc:\n      handleEsc(event)\n      break\n  }\n}\n\nfunction focus() {\n  triggerRef.value.focus()\n}\n\nfunction blur() {\n  triggerRef.value.blur()\n}\n\nwatch(\n  () => currentColor.value,\n  (val) => {\n    shouldActiveChange && emit('activeChange', val)\n    shouldActiveChange = true\n  }\n)\n\nwatch(\n  () => color.value,\n  () => {\n    if (!props.modelValue && !showPanelColor.value) {\n      showPanelColor.value = true\n    }\n  }\n)\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (!newVal) {\n      showPanelColor.value = false\n    } else if (newVal && newVal !== color.value) {\n      shouldActiveChange = false\n      color.fromString(newVal)\n    }\n  }\n)\n\nwatch(\n  () => showPicker.value,\n  () => {\n    pickerPanelRef.value && nextTick(pickerPanelRef.value.update)\n  }\n)\n\nprovide(ROOT_COMMON_COLOR_INJECTION_KEY, commonColor)\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description manually show ColorPicker\n   */\n  show,\n  /**\n   * @description manually hide ColorPicker\n   */\n  hide,\n  /**\n   * @description focus the input element\n   */\n  focus,\n  /**\n   * @description blur the input element\n   */\n  blur,\n})\n</script>\n"],"mappings":"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"}

package/es/components/color-picker/src/color-picker2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker2.mjs","names":[],"sources":["../../../../../../packages/components/color-picker/src/color-picker.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    :visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"[ns.be('picker', 'panel'), popperClass!]\"\n    :popper-style=\"popperStyle\"\n    :stop-popper-mouse-event=\"false\"\n    pure\n    loop\n    role=\"dialog\"\n    effect=\"light\"\n    trigger=\"click\"\n    :teleported=\"teleported\"\n    :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n    :persistent=\"persistent\"\n    :append-to=\"appendTo\"\n    @show=\"handleShowTooltip\"\n    @hide=\"setShowPicker(false)\"\n  >\n    <template #content>\n      <el-color-picker-panel\n        ref=\"pickerPanelRef\"\n        v-bind=\"panelProps\"\n        v-click-outside:[triggerRef]=\"handleClickOutside\"\n        :border=\"false\"\n        :validate-event=\"false\"\n        @keydown.esc=\"handleEsc\"\n      >\n        <template #footer>\n          <div>\n            <el-button\n              v-if=\"clearable\"\n              :class=\"ns.be('footer', 'link-btn')\"\n              text\n              size=\"small\"\n              @click=\"clear\"\n            >\n              {{ t('el.colorpicker.clear') }}\n            </el-button>\n            <el-button\n              plain\n              size=\"small\"\n              :class=\"ns.be('footer', 'btn')\"\n              @click=\"confirmValue\"\n            >\n              {{ t('el.colorpicker.confirm') }}\n            </el-button>\n          </div>\n        </template>\n      </el-color-picker-panel>\n    </template>\n    <template #default>\n      <div\n        :id=\"buttonId\"\n        ref=\"triggerRef\"\n        v-bind=\"$attrs\"\n        :class=\"btnKls\"\n        role=\"button\"\n        :aria-label=\"buttonAriaLabel\"\n        :aria-labelledby=\"buttonAriaLabelledby\"\n        :aria-description=\"\n          t('el.colorpicker.description', { color: modelValue || '' })\n        \"\n        :aria-disabled=\"colorDisabled\"\n        :tabindex=\"colorDisabled ? undefined : tabindex\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n      >\n        <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n          <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n            <span\n              :class=\"ns.be('picker', 'color-inner')\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-show=\"!modelValue && !showPanelColor\"\n                :class=\"[ns.be('picker', 'empty'), ns.is('icon-close')]\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, provide, ref, watch } from 'vue'\nimport { debounce, pick } from 'lodash-unified'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { reactiveComputed } from '@vueuse/core'\nimport { ClickOutside as vClickOutside } from '@element-plus/directives'\nimport { ElTooltip } from '@element-plus/components/tooltip'\nimport { ElButton } from '@element-plus/components/button'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport {\n  useEmptyValues,\n  useFocusController,\n  useLocale,\n  useNamespace,\n} from '@element-plus/hooks'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { ArrowDown, Close, debugWarn, getEventCode } from '@element-plus/utils'\nimport { colorPickerEmits, colorPickerPropsDefaults } from './color-picker'\nimport {\n  ElColorPickerPanel,\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelProps,\n} from '@element-plus/components/color-picker-panel'\nimport Color from '@element-plus/components/color-picker-panel/src/utils/color'\nimport { useCommonColor } from '@element-plus/components/color-picker-panel/src/composables/use-common-color'\n\nimport type { ColorPickerPanelInstance } from '@element-plus/components/color-picker-panel'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { ColorPickerProps } from './color-picker'\n\ndefineOptions({\n  name: 'ElColorPicker',\n})\nconst props = withDefaults(\n  defineProps<ColorPickerProps>(),\n  colorPickerPropsDefaults\n)\n\nconst emit = defineEmits(colorPickerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('color')\nconst { formItem } = useFormItem()\nconst colorSize = useFormSize()\nconst colorDisabled = useFormDisabled()\nconst { valueOnClear, isEmptyValue } = useEmptyValues(props, null)\nconst commonColor = useCommonColor(props, emit)\nconst { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst popper = ref<TooltipInstance>()\nconst triggerRef = ref()\nconst pickerPanelRef = ref<ColorPickerPanelInstance>()\nconst showPicker = ref(false)\nconst showPanelColor = ref(false)\n\n// active-change is used to prevent modelValue changes from triggering.\nlet shouldActiveChange = true\n\nconst { isFocused, handleFocus, handleBlur } = useFocusController(triggerRef, {\n  disabled: colorDisabled,\n  beforeBlur(event) {\n    return popper.value?.isFocusInsideContent(event)\n  },\n  afterBlur() {\n    setShowPicker(false)\n    resetColor()\n    if (props.validateEvent) {\n      formItem?.validate?.('blur').catch((err) => debugWarn(err))\n    }\n  },\n})\n\nconst color = reactiveComputed(\n  () => pickerPanelRef.value?.color ?? commonColor.color\n) as Color\n\nconst panelProps = computed(() =>\n  pick(props, Object.keys(colorPickerPanelProps))\n)\n\nconst displayedColor = computed(() => {\n  if (!props.modelValue && !showPanelColor.value) {\n    return 'transparent'\n  }\n  return displayedRgb(color, props.showAlpha)\n})\n\nconst currentColor = computed(() => {\n  return !props.modelValue && !showPanelColor.value ? '' : color.value\n})\n\nconst buttonAriaLabel = computed<string | undefined>(() => {\n  return !isLabeledByFormItem.value\n    ? props.ariaLabel || t('el.colorpicker.defaultLabel')\n    : undefined\n})\n\nconst buttonAriaLabelledby = computed<string | undefined>(() => {\n  return isLabeledByFormItem.value ? formItem?.labelId : undefined\n})\n\nconst btnKls = computed(() => {\n  return [\n    ns.b('picker'),\n    ns.is('disabled', colorDisabled.value),\n    ns.bm('picker', colorSize.value),\n    ns.is('focused', isFocused.value),\n  ]\n})\n\nfunction displayedRgb(color: Color, showAlpha: boolean) {\n  const { r, g, b, a } = color.toRgb()\n  return showAlpha ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`\n}\n\nfunction setShowPicker(value: boolean) {\n  showPicker.value = value\n}\n\nconst debounceSetShowPicker = debounce(setShowPicker, 100, { leading: true })\nfunction show() {\n  if (colorDisabled.value) return\n  setShowPicker(true)\n}\n\nfunction hide() {\n  debounceSetShowPicker(false)\n  resetColor()\n}\n\nfunction resetColor() {\n  nextTick(() => {\n    if (props.modelValue) {\n      color.fromString(props.modelValue)\n    } else {\n      color.value = ''\n      nextTick(() => {\n        showPanelColor.value = false\n      })\n    }\n  })\n}\n\nfunction handleTrigger() {\n  if (colorDisabled.value) return\n  if (showPicker.value) {\n    resetColor()\n  }\n  debounceSetShowPicker(!showPicker.value)\n}\n\nfunction confirmValue() {\n  const value = isEmptyValue(color.value) ? valueOnClear.value : color.value\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(CHANGE_EVENT, value)\n  if (props.validateEvent) {\n    formItem?.validate('change').catch((err) => debugWarn(err))\n  }\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      value: props.modelValue,\n    })\n    if (!color.compare(newColor)) {\n      resetColor()\n    }\n  })\n}\n\nfunction clear() {\n  debounceSetShowPicker(false)\n  emit(UPDATE_MODEL_EVENT, valueOnClear.value)\n  emit(CHANGE_EVENT, valueOnClear.value)\n  if (props.modelValue !== valueOnClear.value && props.validateEvent) {\n    formItem?.validate('change').catch((err) => debugWarn(err))\n  }\n  resetColor()\n  emit('clear')\n}\n\nfunction handleShowTooltip() {\n  pickerPanelRef?.value?.inputRef?.focus()\n}\n\nfunction handleClickOutside() {\n  if (!showPicker.value) return\n  hide()\n  isFocused.value && focus()\n}\n\nfunction handleEsc(event: KeyboardEvent) {\n  event.preventDefault()\n  event.stopPropagation()\n  setShowPicker(false)\n  resetColor()\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  const code = getEventCode(event)\n\n  switch (code) {\n    case EVENT_CODE.enter:\n    case EVENT_CODE.numpadEnter:\n    case EVENT_CODE.space:\n      event.preventDefault()\n      event.stopPropagation()\n      show()\n      break\n    case EVENT_CODE.esc:\n      handleEsc(event)\n      break\n  }\n}\n\nfunction focus() {\n  triggerRef.value.focus()\n}\n\nfunction blur() {\n  triggerRef.value.blur()\n}\n\nwatch(\n  () => currentColor.value,\n  (val) => {\n    shouldActiveChange && emit('activeChange', val)\n    shouldActiveChange = true\n  }\n)\n\nwatch(\n  () => color.value,\n  () => {\n    if (!props.modelValue && !showPanelColor.value) {\n      showPanelColor.value = true\n    }\n  }\n)\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (!newVal) {\n      showPanelColor.value = false\n    } else if (newVal && newVal !== color.value) {\n      shouldActiveChange = false\n      color.fromString(newVal)\n    }\n  }\n)\n\nwatch(\n  () => showPicker.value,\n  () => {\n    pickerPanelRef.value && nextTick(pickerPanelRef.value.update)\n  }\n)\n\nprovide(ROOT_COMMON_COLOR_INJECTION_KEY, commonColor)\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description manually show ColorPicker\n   */\n  show,\n  /**\n   * @description manually hide ColorPicker\n   */\n  hide,\n  /**\n   * @description focus the input element\n   */\n  focus,\n  /**\n   * @description blur the input element\n   */\n  blur,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"color-picker2.mjs","names":[],"sources":["../../../../../../packages/components/color-picker/src/color-picker.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    :visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"[ns.be('picker', 'panel'), popperClass!]\"\n    :popper-style=\"popperStyle\"\n    :stop-popper-mouse-event=\"false\"\n    pure\n    loop\n    role=\"dialog\"\n    effect=\"light\"\n    trigger=\"click\"\n    teleported\n    :transition=\"`${ns.namespace.value}-fade-in-linear`\"\n    :persistent=\"persistent\"\n    @show=\"handleShowTooltip\"\n    @hide=\"setShowPicker(false)\"\n  >\n    <template #content>\n      <el-color-picker-panel\n        ref=\"pickerPanelRef\"\n        v-bind=\"panelProps\"\n        v-click-outside:[triggerRef]=\"handleClickOutside\"\n        :border=\"false\"\n        :validate-event=\"false\"\n        @keydown.esc=\"handleEsc\"\n      >\n        <template #footer>\n          <div>\n            <el-button\n              v-if=\"clearable\"\n              :class=\"ns.be('footer', 'link-btn')\"\n              text\n              size=\"small\"\n              @click=\"clear\"\n            >\n              {{ t('el.colorpicker.clear') }}\n            </el-button>\n            <el-button\n              plain\n              size=\"small\"\n              :class=\"ns.be('footer', 'btn')\"\n              @click=\"confirmValue\"\n            >\n              {{ t('el.colorpicker.confirm') }}\n            </el-button>\n          </div>\n        </template>\n      </el-color-picker-panel>\n    </template>\n    <template #default>\n      <div\n        :id=\"buttonId\"\n        ref=\"triggerRef\"\n        v-bind=\"$attrs\"\n        :class=\"btnKls\"\n        role=\"button\"\n        :aria-label=\"buttonAriaLabel\"\n        :aria-labelledby=\"buttonAriaLabelledby\"\n        :aria-description=\"\n          t('el.colorpicker.description', { color: modelValue || '' })\n        \"\n        :aria-disabled=\"colorDisabled\"\n        :tabindex=\"colorDisabled ? undefined : tabindex\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n      >\n        <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n          <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n            <span\n              :class=\"ns.be('picker', 'color-inner')\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-show=\"!modelValue && !showPanelColor\"\n                :class=\"[ns.be('picker', 'empty'), ns.is('icon-close')]\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, provide, ref, watch } from 'vue'\nimport { debounce, pick } from 'lodash-unified'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { reactiveComputed } from '@vueuse/core'\nimport { ClickOutside as vClickOutside } from '@element-plus/directives'\nimport { ElTooltip } from '@element-plus/components/tooltip'\nimport { ElButton } from '@element-plus/components/button'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport {\n  useEmptyValues,\n  useFocusController,\n  useLocale,\n  useNamespace,\n} from '@element-plus/hooks'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { ArrowDown, Close, debugWarn, getEventCode } from '@element-plus/utils'\nimport { colorPickerEmits, colorPickerPropsDefaults } from './color-picker'\nimport {\n  ElColorPickerPanel,\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelProps,\n} from '@element-plus/components/color-picker-panel'\nimport Color from '@element-plus/components/color-picker-panel/src/utils/color'\nimport { useCommonColor } from '@element-plus/components/color-picker-panel/src/composables/use-common-color'\n\nimport type { ColorPickerPanelInstance } from '@element-plus/components/color-picker-panel'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { ColorPickerProps } from './color-picker'\n\ndefineOptions({\n  name: 'ElColorPicker',\n})\nconst props = withDefaults(\n  defineProps<ColorPickerProps>(),\n  colorPickerPropsDefaults\n)\n\nconst emit = defineEmits(colorPickerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('color')\nconst { formItem } = useFormItem()\nconst colorSize = useFormSize()\nconst colorDisabled = useFormDisabled()\nconst { valueOnClear, isEmptyValue } = useEmptyValues(props, null)\nconst commonColor = useCommonColor(props, emit)\nconst { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst popper = ref<TooltipInstance>()\nconst triggerRef = ref()\nconst pickerPanelRef = ref<ColorPickerPanelInstance>()\nconst showPicker = ref(false)\nconst showPanelColor = ref(false)\n\n// active-change is used to prevent modelValue changes from triggering.\nlet shouldActiveChange = true\n\nconst { isFocused, handleFocus, handleBlur } = useFocusController(triggerRef, {\n  disabled: colorDisabled,\n  beforeBlur(event) {\n    return popper.value?.isFocusInsideContent(event)\n  },\n  afterBlur() {\n    setShowPicker(false)\n    resetColor()\n    if (props.validateEvent) {\n      formItem?.validate?.('blur').catch((err) => debugWarn(err))\n    }\n  },\n})\n\nconst color = reactiveComputed(\n  () => pickerPanelRef.value?.color ?? commonColor.color\n) as Color\n\nconst panelProps = computed(() =>\n  pick(props, Object.keys(colorPickerPanelProps))\n)\n\nconst displayedColor = computed(() => {\n  if (!props.modelValue && !showPanelColor.value) {\n    return 'transparent'\n  }\n  return displayedRgb(color, props.showAlpha)\n})\n\nconst currentColor = computed(() => {\n  return !props.modelValue && !showPanelColor.value ? '' : color.value\n})\n\nconst buttonAriaLabel = computed<string | undefined>(() => {\n  return !isLabeledByFormItem.value\n    ? props.ariaLabel || t('el.colorpicker.defaultLabel')\n    : undefined\n})\n\nconst buttonAriaLabelledby = computed<string | undefined>(() => {\n  return isLabeledByFormItem.value ? formItem?.labelId : undefined\n})\n\nconst btnKls = computed(() => {\n  return [\n    ns.b('picker'),\n    ns.is('disabled', colorDisabled.value),\n    ns.bm('picker', colorSize.value),\n    ns.is('focused', isFocused.value),\n  ]\n})\n\nfunction displayedRgb(color: Color, showAlpha: boolean) {\n  const { r, g, b, a } = color.toRgb()\n  return showAlpha ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`\n}\n\nfunction setShowPicker(value: boolean) {\n  showPicker.value = value\n}\n\nconst debounceSetShowPicker = debounce(setShowPicker, 100, { leading: true })\nfunction show() {\n  if (colorDisabled.value) return\n  setShowPicker(true)\n}\n\nfunction hide() {\n  debounceSetShowPicker(false)\n  resetColor()\n}\n\nfunction resetColor() {\n  nextTick(() => {\n    if (props.modelValue) {\n      color.fromString(props.modelValue)\n    } else {\n      color.value = ''\n      nextTick(() => {\n        showPanelColor.value = false\n      })\n    }\n  })\n}\n\nfunction handleTrigger() {\n  if (colorDisabled.value) return\n  if (showPicker.value) {\n    resetColor()\n  }\n  debounceSetShowPicker(!showPicker.value)\n}\n\nfunction confirmValue() {\n  const value = isEmptyValue(color.value) ? valueOnClear.value : color.value\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(CHANGE_EVENT, value)\n  if (props.validateEvent) {\n    formItem?.validate('change').catch((err) => debugWarn(err))\n  }\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      value: props.modelValue,\n    })\n    if (!color.compare(newColor)) {\n      resetColor()\n    }\n  })\n}\n\nfunction clear() {\n  debounceSetShowPicker(false)\n  emit(UPDATE_MODEL_EVENT, valueOnClear.value)\n  emit(CHANGE_EVENT, valueOnClear.value)\n  if (props.modelValue !== valueOnClear.value && props.validateEvent) {\n    formItem?.validate('change').catch((err) => debugWarn(err))\n  }\n  resetColor()\n  emit('clear')\n}\n\nfunction handleShowTooltip() {\n  pickerPanelRef?.value?.inputRef?.focus()\n}\n\nfunction handleClickOutside() {\n  if (!showPicker.value) return\n  hide()\n  isFocused.value && focus()\n}\n\nfunction handleEsc(event: KeyboardEvent) {\n  event.preventDefault()\n  event.stopPropagation()\n  setShowPicker(false)\n  resetColor()\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  const code = getEventCode(event)\n\n  switch (code) {\n    case EVENT_CODE.enter:\n    case EVENT_CODE.numpadEnter:\n    case EVENT_CODE.space:\n      event.preventDefault()\n      event.stopPropagation()\n      show()\n      break\n    case EVENT_CODE.esc:\n      handleEsc(event)\n      break\n  }\n}\n\nfunction focus() {\n  triggerRef.value.focus()\n}\n\nfunction blur() {\n  triggerRef.value.blur()\n}\n\nwatch(\n  () => currentColor.value,\n  (val) => {\n    shouldActiveChange && emit('activeChange', val)\n    shouldActiveChange = true\n  }\n)\n\nwatch(\n  () => color.value,\n  () => {\n    if (!props.modelValue && !showPanelColor.value) {\n      showPanelColor.value = true\n    }\n  }\n)\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (!newVal) {\n      showPanelColor.value = false\n    } else if (newVal && newVal !== color.value) {\n      shouldActiveChange = false\n      color.fromString(newVal)\n    }\n  }\n)\n\nwatch(\n  () => showPicker.value,\n  () => {\n    pickerPanelRef.value && nextTick(pickerPanelRef.value.update)\n  }\n)\n\nprovide(ROOT_COMMON_COLOR_INJECTION_KEY, commonColor)\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description manually show ColorPicker\n   */\n  show,\n  /**\n   * @description manually hide ColorPicker\n   */\n  hide,\n  /**\n   * @description focus the input element\n   */\n  focus,\n  /**\n   * @description blur the input element\n   */\n  blur,\n})\n</script>\n"],"mappings":""}

package/es/components/countdown/src/countdown.vue_vue_type_script_setup_true_lang.mjs

@@ -1,7 +1,7 @@
 import { CHANGE_EVENT } from "../../../constants/event.mjs";
 import { cAF, rAF } from "../../../utils/raf.mjs";
-import { ElStatistic } from "../../statistic/index.mjs";
 import { countdownEmits, countdownProps } from "./countdown.mjs";
+import { ElStatistic } from "../../statistic/index.mjs";
 import { formatTime, getTime } from "./utils.mjs";
 import { computed, createBlock, createSlots, defineComponent, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, unref, watch, withCtx } from "vue";
 

package/es/components/date-picker/src/date-picker.d.ts

@@ -33,7 +33,6 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
     __epPropKey: true;
   };
   readonly shortcuts: EpPropFinalized<ArrayConstructor, unknown, unknown, () => never[], boolean>;
-  readonly arrowControl: BooleanConstructor;
   readonly tabindex: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown, 0, boolean>;
   readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly unlinkPanels: BooleanConstructor;
@@ -238,7 +237,6 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
     __epPropKey: true;
   };
   readonly shortcuts: EpPropFinalized<ArrayConstructor, unknown, unknown, () => never[], boolean>;
-  readonly arrowControl: BooleanConstructor;
   readonly tabindex: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown, 0, boolean>;
   readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly unlinkPanels: BooleanConstructor;
@@ -447,7 +445,6 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
   readonly showConfirm: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly showFooter: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly showWeekNumber: boolean;
-  readonly arrowControl: boolean;
   readonly unlinkPanels: boolean;
   readonly isRange: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

package/es/components/date-picker/src/props.d.ts

@@ -32,7 +32,6 @@ declare const datePickerProps: {
     __epPropKey: true;
   };
   readonly shortcuts: EpPropFinalized<ArrayConstructor, unknown, unknown, () => never[], boolean>;
-  readonly arrowControl: BooleanConstructor;
   readonly tabindex: EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown, 0, boolean>;
   readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly unlinkPanels: BooleanConstructor;

package/es/components/date-picker-panel/src/date-picker-com/panel-date-pick.vue_vue_type_script_setup_true_lang.mjs

@@ -3,7 +3,6 @@ import { getEventCode } from "../../../../utils/dom/event.mjs";
 import { isArray, isFunction } from "../../../../utils/types.mjs";
 import { ArrowLeft, ArrowRight, DArrowLeft, DArrowRight } from "../../../../utils/vue/builtin-icons.mjs";
 import { extractFirst } from "../../../../utils/arrays.mjs";
-import ClickOutside from "../../../../directives/click-outside/index.mjs";
 import { useLocale } from "../../../../hooks/use-locale/index.mjs";
 import { useNamespace } from "../../../../hooks/use-namespace/index.mjs";
 import { ElIcon } from "../../../icon/index.mjs";
@@ -12,6 +11,7 @@ import { ElInput } from "../../../input/index.mjs";
 import { ElButton } from "../../../button/index.mjs";
 import { DEFAULT_FORMATS_DATE, DEFAULT_FORMATS_TIME, PICKER_BASE_INJECTION_KEY } from "../../../time-picker/src/constants.mjs";
 import { extractDateFormat, extractTimeFormat } from "../../../time-picker/src/utils.mjs";
+import ClickOutside from "../../../../directives/click-outside/index.mjs";
 import panel_time_pick_default from "../../../time-picker/src/time-picker-com/panel-time-pick.mjs";
 import { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from "../constants.mjs";
 import { panelDatePickProps } from "../props/panel-date-pick.mjs";

package/es/components/date-picker-panel/src/date-picker-com/panel-date-range.vue_vue_type_script_setup_true_lang.mjs

@@ -1,5 +1,4 @@
 import { ArrowLeft, ArrowRight, DArrowLeft, DArrowRight } from "../../../../utils/vue/builtin-icons.mjs";
-import ClickOutside from "../../../../directives/click-outside/index.mjs";
 import { useLocale } from "../../../../hooks/use-locale/index.mjs";
 import { ElIcon } from "../../../icon/index.mjs";
 import { useFormDisabled } from "../../../form/src/hooks/use-form-common-props.mjs";
@@ -7,6 +6,7 @@ import { ElInput } from "../../../input/index.mjs";
 import { ElButton } from "../../../button/index.mjs";
 import { DEFAULT_FORMATS_DATE, DEFAULT_FORMATS_TIME, PICKER_BASE_INJECTION_KEY } from "../../../time-picker/src/constants.mjs";
 import { extractDateFormat, extractTimeFormat } from "../../../time-picker/src/utils.mjs";
+import ClickOutside from "../../../../directives/click-outside/index.mjs";
 import panel_time_pick_default from "../../../time-picker/src/time-picker-com/panel-time-pick.mjs";
 import { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from "../constants.mjs";
 import { correctlyParseUserInput, getDefaultValue, isValidRange } from "../utils.mjs";

package/es/components/date-picker-panel/src/date-picker-panel.d.ts

@@ -146,9 +146,9 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
   readonly showConfirm: boolean;
   readonly showFooter: boolean;
   readonly showWeekNumber: boolean;
-  readonly arrowControl: boolean;
   readonly unlinkPanels: boolean;
   readonly isRange: boolean;
+  readonly arrowControl: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 //#endregion
 export { _default };

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

@@ -1,7 +1,7 @@
 import { SFCWithInstall } from "../../utils/vue/typescript.js";
 import "../../utils/index.js";
 import { FormItemProp, FormItemProps, FormItemPropsPublic, FormItemValidateState, formItemProps, formItemValidateStates } from "./src/form-item.js";
-import { FormContext, FormItemContext, FormItemRule, FormLabelWidthContext, FormRules, FormValidateCallback, FormValidateFailure, FormValidationResult } from "./src/types.js";
+import { FormContext, FormItemContext, FormItemRule, FormRules, FormValidateCallback, FormValidateFailure, FormValidationResult } from "./src/types.js";
 import { FormEmits, FormMetaProps, FormMetaPropsPublic, FormProps, FormPropsPublic, formEmits, formMetaProps, formProps } from "./src/form.js";
 import { _default } from "./src/form.vue.js";
 import { _default as _default$1 } from "./src/form-item.vue.js";
@@ -18,4 +18,4 @@ declare const ElFormItem: SFCWithInstall<typeof _default$1>;
 type FormInstance = InstanceType<typeof _default> & unknown;
 type FormItemInstance = InstanceType<typeof _default$1> & unknown;
 //#endregion
-export { ElForm, ElForm as default, ElFormItem, FormContext, FormEmits, FormInstance, FormItemContext, FormItemInstance, FormItemProp, FormItemProps, FormItemPropsPublic, FormItemRule, FormItemValidateState, FormLabelWidthContext, FormMetaProps, FormMetaPropsPublic, FormProps, FormPropsPublic, FormRules, FormValidateCallback, FormValidateFailure, FormValidationResult, IUseFormItemInputCommonProps, formContextKey, formEmits, formItemContextKey, formItemProps, formItemValidateStates, formMetaProps, formProps, useDisabled, useFormDisabled, useFormItem, useFormItemInputId, useFormSize, useSize };
+export { ElForm, ElForm as default, ElFormItem, FormContext, FormEmits, FormInstance, FormItemContext, FormItemInstance, FormItemProp, FormItemProps, FormItemPropsPublic, FormItemRule, FormItemValidateState, FormMetaProps, FormMetaPropsPublic, FormProps, FormPropsPublic, FormRules, FormValidateCallback, FormValidateFailure, FormValidationResult, IUseFormItemInputCommonProps, formContextKey, formEmits, formItemContextKey, formItemProps, formItemValidateStates, formMetaProps, formProps, useDisabled, useFormDisabled, useFormItem, useFormItemInputId, useFormSize, useSize };

package/es/components/form/src/form-item.d.ts

@@ -15,14 +15,6 @@ interface FormItemProps {
    * @description Label text.
    */
   label?: string;
-  /**
-   * @description Width of label, e.g. `'50px'`. `'auto'` is supported.
-   */
-  labelWidth?: string | number;
-  /**
-   * @description Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required. The default is extend from `form label-position`.
-   */
-  labelPosition?: 'left' | 'right' | 'top' | '';
   /**
    * @description  A key of `model`. It could be an array of property paths (e.g `['a', 'b', '0']`). In the use of `validate` and `resetFields` method, the attribute is required.
    */
@@ -65,13 +57,6 @@ interface FormItemProps {
  */
 declare const formItemProps: {
   readonly label: StringConstructor;
-  readonly labelWidth: {
-    readonly type: vue.PropType<EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
-  readonly labelPosition: EpPropFinalized<StringConstructor, "" | "top" | "left" | "right", unknown, "", boolean>;
   readonly prop: {
     readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | string[]) | (() => FormItemProp) | (((new (...args: any[]) => string | string[]) | (() => FormItemProp)) | null)[], unknown, unknown>>;
     readonly required: false;

package/es/components/form/src/form-item.mjs

@@ -13,17 +13,6 @@ const formItemValidateStates = [
 */
 const formItemProps = buildProps({
 	label: String,
-	labelWidth: { type: [String, Number] },
-	labelPosition: {
-		type: String,
-		values: [
-			"left",
-			"right",
-			"top",
-			""
-		],
-		default: ""
-	},
 	prop: { type: definePropType([String, Array]) },
 	required: {
 		type: Boolean,

package/es/components/form/src/form-item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"form-item.mjs","names":[],"sources":["../../../../../../packages/components/form/src/form-item.ts"],"sourcesContent":["import { componentSizes } from '@element-plus/constants'\nimport { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { Arrayable } from '@element-plus/utils'\nimport type { FormItemRule } from './types'\n\nexport const formItemValidateStates = [\n  '',\n  'error',\n  'validating',\n  'success',\n] as const\nexport type FormItemValidateState = (typeof formItemValidateStates)[number]\n\nexport type FormItemProp = Arrayable<string>\n\nexport interface FormItemProps {\n  /**\n   * @description Label text.\n   */\n  label?: string\n  /**\n   * @description Width of label, e.g. `'50px'`. `'auto'` is supported.\n   */\n  labelWidth?: string | number\n  /**\n   * @description Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required. The default is extend from `form label-position`.\n   */\n  labelPosition?: 'left' | 'right' | 'top' | ''\n  /**\n   * @description  A key of `model`. It could be an array of property paths (e.g `['a', 'b', '0']`). In the use of `validate` and `resetFields` method, the attribute is required.\n   */\n  prop?: FormItemProp\n  /**\n   * @description Whether the field is required or not, will be determined by validation rules if omitted.\n   */\n  required?: boolean\n  /**\n   * @description Validation rules of form, see the [following table](#formitemrule), more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).\n   */\n  rules?: Arrayable<FormItemRule>\n  /**\n   * @description Field error message, set its value and the field will validate error and show this message immediately.\n   */\n  error?: string\n  /**\n   * @description Validation state of formItem.\n   */\n  validateStatus?: FormItemValidateState\n  /**\n   * @description Same as for in native label.\n   */\n  for?: string\n  /**\n   * @description Inline style validate message.\n   */\n  inlineMessage?: boolean\n  /**\n   * @description Whether to show the error message.\n   */\n  showMessage?: boolean\n  /**\n   * @description Control the size of components in this form-item.\n   */\n  size?: ComponentSize\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `FormItemProps` instead.\n */\nexport const formItemProps = buildProps({\n  /**\n   * @description Label text.\n   */\n  label: String,\n  /**\n   * @description Width of label, e.g. `'50px'`. `'auto'` is supported.\n   */\n  labelWidth: {\n    type: [String, Number],\n  },\n  /**\n   * @description Position of label. If set to `'left'` or `'right'`, `label-width` prop is also required. The default is extend from `form label-position`.\n   */\n  labelPosition: {\n    type: String,\n    values: ['left', 'right', 'top', ''],\n    default: '',\n  },\n  /**\n   * @description  A key of `model`. It could be an array of property paths (e.g `['a', 'b', '0']`). In the use of `validate` and `resetFields` method, the attribute is required.\n   */\n  prop: {\n    type: definePropType<FormItemProp>([String, Array]),\n  },\n  /**\n   * @description Whether the field is required or not, will be determined by validation rules if omitted.\n   */\n  required: {\n    type: Boolean,\n    default: undefined,\n  },\n  /**\n   * @description Validation rules of form, see the [following table](#formitemrule), more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).\n   */\n  rules: {\n    type: definePropType<Arrayable<FormItemRule>>([Object, Array]),\n  },\n  /**\n   * @description Field error message, set its value and the field will validate error and show this message immediately.\n   */\n  error: String,\n  /**\n   * @description Validation state of formItem.\n   */\n  validateStatus: {\n    type: String,\n    values: formItemValidateStates,\n  },\n  /**\n   * @description Same as for in native label.\n   */\n  for: String,\n  /**\n   * @description Inline style validate message.\n   */\n  inlineMessage: {\n    type: Boolean,\n    default: undefined,\n  },\n  /**\n   * @description Whether to show the error message.\n   */\n  showMessage: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description Control the size of components in this form-item.\n   */\n  size: {\n    type: String,\n    values: componentSizes,\n  },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `FormItemProps` instead.\n */\nexport type FormItemPropsPublic = ExtractPublicPropTypes<typeof formItemProps>\n"],"mappings":";;;;AAQA,MAAa,yBAAyB;CACpC;CACA;CACA;CACA;CACD;;;;AA2DD,MAAa,gBAAgB,WAAW;CAItC,OAAO;CAIP,YAAY,EACV,MAAM,CAAC,QAAQ,OAAO,EACvB;CAID,eAAe;EACb,MAAM;EACN,QAAQ;GAAC;GAAQ;GAAS;GAAO;GAAG;EACpC,SAAS;EACV;CAID,MAAM,EACJ,MAAM,eAA6B,CAAC,QAAQ,MAAM,CAAC,EACpD;CAID,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,OAAO,EACL,MAAM,eAAwC,CAAC,QAAQ,MAAM,CAAC,EAC/D;CAID,OAAO;CAIP,gBAAgB;EACd,MAAM;EACN,QAAQ;EACT;CAID,KAAK;CAIL,eAAe;EACb,MAAM;EACN,SAAS;EACV;CAID,aAAa;EACX,MAAM;EACN,SAAS;EACV;CAID,MAAM;EACJ,MAAM;EACN,QAAQ;EACT;CACF,CAAU"}
+{"version":3,"file":"form-item.mjs","names":[],"sources":["../../../../../../packages/components/form/src/form-item.ts"],"sourcesContent":["import { componentSizes } from '@element-plus/constants'\nimport { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type { ComponentSize } from '@element-plus/constants'\nimport type { Arrayable } from '@element-plus/utils'\nimport type { FormItemRule } from './types'\n\nexport const formItemValidateStates = [\n  '',\n  'error',\n  'validating',\n  'success',\n] as const\nexport type FormItemValidateState = (typeof formItemValidateStates)[number]\n\nexport type FormItemProp = Arrayable<string>\n\nexport interface FormItemProps {\n  /**\n   * @description Label text.\n   */\n  label?: string\n  /**\n   * @description  A key of `model`. It could be an array of property paths (e.g `['a', 'b', '0']`). In the use of `validate` and `resetFields` method, the attribute is required.\n   */\n  prop?: FormItemProp\n  /**\n   * @description Whether the field is required or not, will be determined by validation rules if omitted.\n   */\n  required?: boolean\n  /**\n   * @description Validation rules of form, see the [following table](#formitemrule), more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).\n   */\n  rules?: Arrayable<FormItemRule>\n  /**\n   * @description Field error message, set its value and the field will validate error and show this message immediately.\n   */\n  error?: string\n  /**\n   * @description Validation state of formItem.\n   */\n  validateStatus?: FormItemValidateState\n  /**\n   * @description Same as for in native label.\n   */\n  for?: string\n  /**\n   * @description Inline style validate message.\n   */\n  inlineMessage?: boolean\n  /**\n   * @description Whether to show the error message.\n   */\n  showMessage?: boolean\n  /**\n   * @description Control the size of components in this form-item.\n   */\n  size?: ComponentSize\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `FormItemProps` instead.\n */\nexport const formItemProps = buildProps({\n  /**\n   * @description Label text.\n   */\n  label: String,\n  /**\n   * @description  A key of `model`. It could be an array of property paths (e.g `['a', 'b', '0']`). In the use of `validate` and `resetFields` method, the attribute is required.\n   */\n  prop: {\n    type: definePropType<FormItemProp>([String, Array]),\n  },\n  /**\n   * @description Whether the field is required or not, will be determined by validation rules if omitted.\n   */\n  required: {\n    type: Boolean,\n    default: undefined,\n  },\n  /**\n   * @description Validation rules of form, see the [following table](#formitemrule), more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).\n   */\n  rules: {\n    type: definePropType<Arrayable<FormItemRule>>([Object, Array]),\n  },\n  /**\n   * @description Field error message, set its value and the field will validate error and show this message immediately.\n   */\n  error: String,\n  /**\n   * @description Validation state of formItem.\n   */\n  validateStatus: {\n    type: String,\n    values: formItemValidateStates,\n  },\n  /**\n   * @description Same as for in native label.\n   */\n  for: String,\n  /**\n   * @description Inline style validate message.\n   */\n  inlineMessage: {\n    type: Boolean,\n    default: undefined,\n  },\n  /**\n   * @description Whether to show the error message.\n   */\n  showMessage: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description Control the size of components in this form-item.\n   */\n  size: {\n    type: String,\n    values: componentSizes,\n  },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `FormItemProps` instead.\n */\nexport type FormItemPropsPublic = ExtractPublicPropTypes<typeof formItemProps>\n"],"mappings":";;;;AAQA,MAAa,yBAAyB;CACpC;CACA;CACA;CACA;CACD;;;;AAmDD,MAAa,gBAAgB,WAAW;CAItC,OAAO;CAIP,MAAM,EACJ,MAAM,eAA6B,CAAC,QAAQ,MAAM,CAAC,EACpD;CAID,UAAU;EACR,MAAM;EACN,SAAS;EACV;CAID,OAAO,EACL,MAAM,eAAwC,CAAC,QAAQ,MAAM,CAAC,EAC/D;CAID,OAAO;CAIP,gBAAgB;EACd,MAAM;EACN,QAAQ;EACT;CAID,KAAK;CAIL,eAAe;EACb,MAAM;EACN,SAAS;EACV;CAID,aAAa;EACX,MAAM;EACN,SAAS;EACV;CAID,MAAM;EACJ,MAAM;EACN,QAAQ;EACT;CACF,CAAU"}

package/es/components/form/src/form-item.vue.d.ts

@@ -3,17 +3,17 @@ import { FormValidateCallback, FormValidationResult } from "./types.js";
 import * as vue from "vue";
 
 //#region ../../packages/components/form/src/form-item.vue.d.ts
-declare var __VLS_13: {
+declare var __VLS_7: {
     label: string;
-  }, __VLS_15: {}, __VLS_23: {
+  }, __VLS_9: {}, __VLS_17: {
     error: string;
   };
 type __VLS_Slots = {} & {
-  label?: (props: typeof __VLS_13) => any;
+  label?: (props: typeof __VLS_7) => any;
 } & {
-  default?: (props: typeof __VLS_15) => any;
+  default?: (props: typeof __VLS_9) => any;
 } & {
-  error?: (props: typeof __VLS_23) => any;
+  error?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_base: vue.DefineComponent<FormItemProps, {
   /**
@@ -46,7 +46,6 @@ declare const __VLS_base: vue.DefineComponent<FormItemProps, {
   setInitialValue: (value: any) => void;
 }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<FormItemProps> & Readonly<{}>, {
   required: boolean;
-  labelPosition: "left" | "right" | "top" | "";
   inlineMessage: boolean;
   showMessage: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;