element-plus 2.13.6 → 2.13.7

package/lib/components/color-picker/src/color-picker.vue_vue_type_script_setup_true_lang.js

@@ -3,16 +3,16 @@ const require_aria = require('../../../constants/aria.js');
 const require_event = require('../../../constants/event.js');
 const require_event$1 = require('../../../utils/dom/event.js');
 const require_error = require('../../../utils/error.js');
-const require_index = require('../../../hooks/use-locale/index.js');
-const require_index$1 = require('../../../hooks/use-namespace/index.js');
-const require_index$2 = require('../../../hooks/use-focus-controller/index.js');
-const require_index$3 = require('../../../hooks/use-empty-values/index.js');
-const require_index$4 = require('../../icon/index.js');
+const require_index = require('../../../directives/click-outside/index.js');
+const require_index$1 = require('../../../hooks/use-locale/index.js');
+const require_index$2 = require('../../../hooks/use-namespace/index.js');
+const require_index$3 = require('../../../hooks/use-focus-controller/index.js');
+const require_index$4 = require('../../../hooks/use-empty-values/index.js');
+const require_index$5 = require('../../icon/index.js');
 const require_use_form_common_props = require('../../form/src/hooks/use-form-common-props.js');
 const require_use_form_item = require('../../form/src/hooks/use-form-item.js');
-const require_index$5 = require('../../tooltip/index.js');
-const require_index$6 = require('../../button/index.js');
-const require_index$7 = require('../../../directives/click-outside/index.js');
+const require_index$6 = require('../../tooltip/index.js');
+const require_index$7 = require('../../button/index.js');
 const require_color_picker_panel = require('../../color-picker-panel/src/color-picker-panel.js');
 const require_color = require('../../color-picker-panel/src/utils/color.js');
 const require_use_common_color = require('../../color-picker-panel/src/composables/use-common-color.js');
@@ -40,12 +40,12 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { t } = require_index.useLocale();
-		const ns = require_index$1.useNamespace("color");
+		const { t } = require_index$1.useLocale();
+		const ns = require_index$2.useNamespace("color");
 		const { formItem } = require_use_form_item.useFormItem();
 		const colorSize = require_use_form_common_props.useFormSize();
 		const colorDisabled = require_use_form_common_props.useFormDisabled();
-		const { valueOnClear, isEmptyValue } = require_index$3.useEmptyValues(props, null);
+		const { valueOnClear, isEmptyValue } = require_index$4.useEmptyValues(props, null);
 		const commonColor = require_use_common_color.useCommonColor(props, emit);
 		const { inputId: buttonId, isLabeledByFormItem } = require_use_form_item.useFormItemInputId(props, { formItemContext: formItem });
 		const popper = (0, vue.ref)();
@@ -54,7 +54,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
 		const showPicker = (0, vue.ref)(false);
 		const showPanelColor = (0, vue.ref)(false);
 		let shouldActiveChange = true;
-		const { isFocused, handleFocus, handleBlur } = require_index$2.useFocusController(triggerRef, {
+		const { isFocused, handleFocus, handleBlur } = require_index$3.useFocusController(triggerRef, {
 			disabled: colorDisabled,
 			beforeBlur(event) {
 				return popper.value?.isFocusInsideContent(event);
@@ -203,7 +203,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
 			blur
 		});
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$5.ElTooltip), {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$6.ElTooltip), {
 				ref_key: "popper",
 				ref: popper,
 				visible: showPicker.value,
@@ -239,7 +239,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
 					"validate-event": false,
 					onKeydown: (0, vue.withKeys)(handleEsc, ["esc"])
 				}), {
-					footer: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", null, [__props.clearable ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$6.ElButton), {
+					footer: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", null, [__props.clearable ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index$7.ElButton), {
 						key: 0,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ns).be("footer", "link-btn")),
 						text: "",
@@ -248,7 +248,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(t)("el.colorpicker.clear")), 1)]),
 						_: 1
-					}, 8, ["class"])) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)((0, vue.unref)(require_index$6.ElButton), {
+					}, 8, ["class"])) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)((0, vue.unref)(require_index$7.ElButton), {
 						plain: "",
 						size: "small",
 						class: (0, vue.normalizeClass)((0, vue.unref)(ns).be("footer", "btn")),
@@ -259,7 +259,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
 					}, 8, ["class"])])]),
 					_: 1
 				}, 16)), [[
-					(0, vue.unref)(require_index$7.default),
+					(0, vue.unref)(require_index.default),
 					handleClickOutside,
 					triggerRef.value
 				]])]),
@@ -284,10 +284,10 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
 				}, [(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)([(0, vue.unref)(ns).be("picker", "color"), (0, vue.unref)(ns).is("alpha", __props.showAlpha)]) }, [(0, vue.createElementVNode)("span", {
 					class: (0, vue.normalizeClass)((0, vue.unref)(ns).be("picker", "color-inner")),
 					style: (0, vue.normalizeStyle)({ backgroundColor: displayedColor.value })
-				}, [(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(require_index$4.ElIcon), { class: (0, vue.normalizeClass)([(0, vue.unref)(ns).be("picker", "icon"), (0, vue.unref)(ns).is("icon-arrow-down")]) }, {
+				}, [(0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(require_index$5.ElIcon), { class: (0, vue.normalizeClass)([(0, vue.unref)(ns).be("picker", "icon"), (0, vue.unref)(ns).is("icon-arrow-down")]) }, {
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.ArrowDown))]),
 					_: 1
-				}, 8, ["class"]), [[vue.vShow, __props.modelValue || showPanelColor.value]]), (0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(require_index$4.ElIcon), { class: (0, vue.normalizeClass)([(0, vue.unref)(ns).be("picker", "empty"), (0, vue.unref)(ns).is("icon-close")]) }, {
+				}, 8, ["class"]), [[vue.vShow, __props.modelValue || showPanelColor.value]]), (0, vue.withDirectives)((0, vue.createVNode)((0, vue.unref)(require_index$5.ElIcon), { class: (0, vue.normalizeClass)([(0, vue.unref)(ns).be("picker", "empty"), (0, vue.unref)(ns).is("icon-close")]) }, {
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.Close))]),
 					_: 1
 				}, 8, ["class"]), [[vue.vShow, !__props.modelValue && !showPanelColor.value]])], 6)], 2)], 2)], 16, _hoisted_1)]),

package/lib/components/color-picker/src/color-picker.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.vue_vue_type_script_setup_true_lang.js","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 { debugWarn, getEventCode } from '@element-plus/utils'\nimport { ArrowDown, Close } from '@element-plus/icons-vue'\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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"}
+{"version":3,"file":"color-picker.vue_vue_type_script_setup_true_lang.js","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 { debugWarn, getEventCode } from '@element-plus/utils'\nimport { ArrowDown, Close } from '@element-plus/icons-vue'\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/lib/components/color-picker-panel/src/color-picker-panel.vue.d.ts

@@ -28,8 +28,8 @@ declare const __VLS_base: vue.DefineComponent<ColorPickerPanelProps, {
 }, string, vue.PublicProps, Readonly<ColorPickerPanelProps> & Readonly<{
   "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
 }>, {
-  validateEvent: boolean;
   modelValue: string | null;
+  validateEvent: boolean;
   border: boolean;
   showAlpha: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;

package/lib/components/color-picker-panel/src/composables/use-predefine.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-predefine.js","names":["colorPickerPanelContextKey","Color","useNamespace"],"sources":["../../../../../../../packages/components/color-picker-panel/src/composables/use-predefine.ts"],"sourcesContent":["import { computed, inject, ref, watch, watchEffect } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { PredefineProps } from '../props/predefine'\nimport { colorPickerPanelContextKey } from '../color-picker-panel'\nimport Color from '../utils/color'\n\nimport type { Ref } from 'vue'\n\nexport const usePredefine = (props: PredefineProps) => {\n  const { currentColor } = inject(colorPickerPanelContextKey)!\n\n  const rgbaColors = ref(parseColors(props.colors, props.color)) as Ref<Color[]>\n\n  watch(\n    () => currentColor.value,\n    (val) => {\n      const color = new Color({\n        value: val,\n        enableAlpha: props.enableAlpha,\n      })\n\n      rgbaColors.value.forEach((item) => {\n        item.selected = color.compare(item)\n      })\n    }\n  )\n\n  watchEffect(() => {\n    rgbaColors.value = parseColors(props.colors, props.color)\n  })\n\n  function handleSelect(index: number) {\n    props.color.fromString(props.colors[index])\n  }\n\n  function parseColors(colors: string[], color: Color) {\n    return colors.map((value) => {\n      const c = new Color({\n        value,\n        enableAlpha: props.enableAlpha,\n      })\n      c.selected = c.compare(color)\n      return c\n    })\n  }\n\n  return {\n    rgbaColors,\n    handleSelect,\n  }\n}\n\nexport const usePredefineDOM = (props: PredefineProps) => {\n  const ns = useNamespace('color-predefine')\n\n  const rootKls = computed(() => [ns.b(), ns.is('disabled', props.disabled)])\n\n  const colorsKls = computed(() => ns.e('colors'))\n\n  function colorSelectorKls(item: Color) {\n    return [\n      ns.e('color-selector'),\n      ns.is('alpha', item.get('alpha') < 100),\n      { selected: item.selected },\n    ]\n  }\n\n  return {\n    rootKls,\n    colorsKls,\n    colorSelectorKls,\n  }\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,gBAAgB,UAA0B;CACrD,MAAM,EAAE,iCAAwBA,sDAA2B;CAE3D,MAAM,0BAAiB,YAAY,MAAM,QAAQ,MAAM,MAAM,CAAC;AAE9D,sBACQ,aAAa,QAClB,QAAQ;EACP,MAAM,QAAQ,IAAIC,sBAAM;GACtB,OAAO;GACP,aAAa,MAAM;GACpB,CAAC;AAEF,aAAW,MAAM,SAAS,SAAS;AACjC,QAAK,WAAW,MAAM,QAAQ,KAAK;IACnC;GAEL;AAED,4BAAkB;AAChB,aAAW,QAAQ,YAAY,MAAM,QAAQ,MAAM,MAAM;GACzD;CAEF,SAAS,aAAa,OAAe;AACnC,QAAM,MAAM,WAAW,MAAM,OAAO,OAAO;;CAG7C,SAAS,YAAY,QAAkB,OAAc;AACnD,SAAO,OAAO,KAAK,UAAU;GAC3B,MAAM,IAAI,IAAIA,sBAAM;IAClB;IACA,aAAa,MAAM;IACpB,CAAC;AACF,KAAE,WAAW,EAAE,QAAQ,MAAM;AAC7B,UAAO;IACP;;AAGJ,QAAO;EACL;EACA;EACD;;AAGH,MAAa,mBAAmB,UAA0B;CACxD,MAAM,KAAKC,2BAAa,kBAAkB;CAE1C,MAAM,kCAAyB,CAAC,GAAG,GAAG,EAAE,GAAG,GAAG,YAAY,MAAM,SAAS,CAAC,CAAC;CAE3E,MAAM,oCAA2B,GAAG,EAAE,SAAS,CAAC;CAEhD,SAAS,iBAAiB,MAAa;AACrC,SAAO;GACL,GAAG,EAAE,iBAAiB;GACtB,GAAG,GAAG,SAAS,KAAK,IAAI,QAAQ,GAAG,IAAI;GACvC,EAAE,UAAU,KAAK,UAAU;GAC5B;;AAGH,QAAO;EACL;EACA;EACA;EACD"}
+{"version":3,"file":"use-predefine.js","names":["colorPickerPanelContextKey","Color","useNamespace"],"sources":["../../../../../../../packages/components/color-picker-panel/src/composables/use-predefine.ts"],"sourcesContent":["import { computed, inject, ref, watch, watchEffect } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { colorPickerPanelContextKey } from '../color-picker-panel'\nimport Color from '../utils/color'\n\nimport type { Ref } from 'vue'\nimport type { PredefineProps } from '../props/predefine'\n\nexport const usePredefine = (props: PredefineProps) => {\n  const { currentColor } = inject(colorPickerPanelContextKey)!\n\n  const rgbaColors = ref(parseColors(props.colors, props.color)) as Ref<Color[]>\n\n  watch(\n    () => currentColor.value,\n    (val) => {\n      const color = new Color({\n        value: val,\n        enableAlpha: props.enableAlpha,\n      })\n\n      rgbaColors.value.forEach((item) => {\n        item.selected = color.compare(item)\n      })\n    }\n  )\n\n  watchEffect(() => {\n    rgbaColors.value = parseColors(props.colors, props.color)\n  })\n\n  function handleSelect(index: number) {\n    props.color.fromString(props.colors[index])\n  }\n\n  function parseColors(colors: string[], color: Color) {\n    return colors.map((value) => {\n      const c = new Color({\n        value,\n        enableAlpha: props.enableAlpha,\n      })\n      c.selected = c.compare(color)\n      return c\n    })\n  }\n\n  return {\n    rgbaColors,\n    handleSelect,\n  }\n}\n\nexport const usePredefineDOM = (props: PredefineProps) => {\n  const ns = useNamespace('color-predefine')\n\n  const rootKls = computed(() => [ns.b(), ns.is('disabled', props.disabled)])\n\n  const colorsKls = computed(() => ns.e('colors'))\n\n  function colorSelectorKls(item: Color) {\n    return [\n      ns.e('color-selector'),\n      ns.is('alpha', item.get('alpha') < 100),\n      { selected: item.selected },\n    ]\n  }\n\n  return {\n    rootKls,\n    colorsKls,\n    colorSelectorKls,\n  }\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,gBAAgB,UAA0B;CACrD,MAAM,EAAE,iCAAwBA,sDAA2B;CAE3D,MAAM,0BAAiB,YAAY,MAAM,QAAQ,MAAM,MAAM,CAAC;AAE9D,sBACQ,aAAa,QAClB,QAAQ;EACP,MAAM,QAAQ,IAAIC,sBAAM;GACtB,OAAO;GACP,aAAa,MAAM;GACpB,CAAC;AAEF,aAAW,MAAM,SAAS,SAAS;AACjC,QAAK,WAAW,MAAM,QAAQ,KAAK;IACnC;GAEL;AAED,4BAAkB;AAChB,aAAW,QAAQ,YAAY,MAAM,QAAQ,MAAM,MAAM;GACzD;CAEF,SAAS,aAAa,OAAe;AACnC,QAAM,MAAM,WAAW,MAAM,OAAO,OAAO;;CAG7C,SAAS,YAAY,QAAkB,OAAc;AACnD,SAAO,OAAO,KAAK,UAAU;GAC3B,MAAM,IAAI,IAAIA,sBAAM;IAClB;IACA,aAAa,MAAM;IACpB,CAAC;AACF,KAAE,WAAW,EAAE,QAAQ,MAAM;AAC7B,UAAO;IACP;;AAGJ,QAAO;EACL;EACA;EACD;;AAGH,MAAa,mBAAmB,UAA0B;CACxD,MAAM,KAAKC,2BAAa,kBAAkB;CAE1C,MAAM,kCAAyB,CAAC,GAAG,GAAG,EAAE,GAAG,GAAG,YAAY,MAAM,SAAS,CAAC,CAAC;CAE3E,MAAM,oCAA2B,GAAG,EAAE,SAAS,CAAC;CAEhD,SAAS,iBAAiB,MAAa;AACrC,SAAO;GACL,GAAG,EAAE,iBAAiB;GACtB,GAAG,GAAG,SAAS,KAAK,IAAI,QAAQ,GAAG,IAAI;GACvC,EAAE,UAAU,KAAK,UAAU;GAC5B;;AAGH,QAAO;EACL;EACA;EACA;EACD"}

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

@@ -29,7 +29,7 @@ declare const configProviderProps: {
     __epPropKey: true;
   };
   readonly size: {
-    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
+    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

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

@@ -25,7 +25,7 @@ declare const ConfigProvider: vue.DefineComponent<vue.ExtractPropTypes<{
     __epPropKey: true;
   };
   readonly size: {
-    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
+    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -88,7 +88,7 @@ declare const ConfigProvider: vue.DefineComponent<vue.ExtractPropTypes<{
     __epPropKey: true;
   };
   readonly size: {
-    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
+    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -139,10 +139,10 @@ declare const ConfigProvider: vue.DefineComponent<vue.ExtractPropTypes<{
     __epPropKey: true;
   };
 }>> & Readonly<{}>, {
-  readonly valueOnClear: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown>;
   readonly a11y: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly keyboardNavigation: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly namespace: string;
+  readonly valueOnClear: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown>;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 type ConfigProviderInstance = InstanceType<typeof ConfigProvider> & unknown;
 //#endregion

package/lib/components/config-provider/src/hooks/use-global-config.d.ts

@@ -35,7 +35,7 @@ declare function useGlobalComponentSettings(block: string, sizeFallback?: MaybeR
     currentZIndex: vue.ComputedRef<number>;
     nextZIndex: () => number;
   };
-  size: vue.ComputedRef<"default" | "" | "large" | "small">;
+  size: vue.ComputedRef<"default" | "" | "small" | "large">;
 };
 declare const provideGlobalConfig: (config: MaybeRef<ConfigProviderContext>, app?: App, global?: boolean) => vue.ComputedRef<Partial<ConfigProviderProps>> | undefined;
 //#endregion

package/lib/components/countdown/src/countdown.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 const require_runtime = require('../../../_virtual/_rolldown/runtime.js');
 const require_event = require('../../../constants/event.js');
 const require_raf = require('../../../utils/raf.js');
-const require_countdown = require('./countdown.js');
 const require_index = require('../../statistic/index.js');
+const require_countdown = require('./countdown.js');
 const require_utils = require('./utils.js');
 let vue = require("vue");
 

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

@@ -36,7 +36,7 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
   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;
-  readonly placement: EpPropFinalized<(new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, "bottom", boolean>;
+  readonly placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, "bottom", boolean>;
   readonly fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, readonly ["bottom", "top", "right", "left"], boolean>;
   readonly disabledHours: {
     readonly type: vue.PropType<GetDisabledHours>;
@@ -187,7 +187,7 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
   readonly saveOnBlur: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly prefixIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, "", boolean>;
   readonly size: {
-    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
+    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -239,7 +239,7 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
   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;
-  readonly placement: EpPropFinalized<(new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, "bottom", boolean>;
+  readonly placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, "bottom", boolean>;
   readonly fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, readonly ["bottom", "top", "right", "left"], boolean>;
   readonly disabledHours: {
     readonly type: vue.PropType<GetDisabledHours>;
@@ -390,7 +390,7 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
   readonly saveOnBlur: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly prefixIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, "", boolean>;
   readonly size: {
-    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
+    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -421,21 +421,21 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
 }>, {
   readonly type: EpPropMergeType<(new (...args: any[]) => "year" | "months" | "years" | "month" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType) | (((new (...args: any[]) => "year" | "months" | "years" | "month" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType)) | null)[], unknown, unknown>;
   readonly disabled: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  readonly modelValue: EpPropMergeType<(new (...args: any[]) => string | number | string[] | Date | number[] | Date[]) | (() => ModelValueType | null) | (((new (...args: any[]) => string | number | string[] | Date | number[] | Date[]) | (() => ModelValueType | null)) | null)[], unknown, unknown>;
   readonly placeholder: string;
+  readonly readonly: boolean;
   readonly clearable: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly clearIcon: EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>;
-  readonly placement: EpPropMergeType<(new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown>;
-  readonly fallbackPlacements: Placement[];
-  readonly validateEvent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
-  readonly modelValue: EpPropMergeType<(new (...args: any[]) => string | number | string[] | Date | number[] | Date[]) | (() => ModelValueType | null) | (((new (...args: any[]) => string | number | string[] | Date | number[] | Date[]) | (() => ModelValueType | null)) | null)[], unknown, unknown>;
-  readonly valueOnClear: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown>;
-  readonly popperOptions: Partial<Options>;
-  readonly readonly: boolean;
   readonly prefixIcon: EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>;
   readonly tabindex: EpPropMergeType<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown>;
-  readonly saveOnBlur: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  readonly validateEvent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  readonly fallbackPlacements: Placement[];
+  readonly placement: EpPropMergeType<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown>;
+  readonly popperOptions: Partial<Options>;
+  readonly valueOnClear: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown>;
   readonly automaticDropdown: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly editable: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  readonly saveOnBlur: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly rangeSeparator: string;
   readonly shortcuts: unknown[];
   readonly showNow: EpPropMergeType<BooleanConstructor, unknown, unknown>;

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

@@ -35,7 +35,7 @@ declare const datePickerProps: {
   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;
-  readonly placement: EpPropFinalized<(new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "bottom-start" | "bottom" | "auto" | "auto-start" | "auto-end" | "top" | "right" | "left" | "top-start" | "top-end" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, "bottom", boolean>;
+  readonly placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, "bottom", boolean>;
   readonly fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, readonly ["bottom", "top", "right", "left"], boolean>;
   readonly disabledHours: {
     readonly type: vue.PropType<GetDisabledHours>;
@@ -186,7 +186,7 @@ declare const datePickerProps: {
   readonly saveOnBlur: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly prefixIcon: EpPropFinalized<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown, "", boolean>;
   readonly size: {
-    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
+    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

package/lib/components/date-picker-panel/src/date-picker-com/panel-date-pick.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel-date-pick.js","names":[],"sources":["../../../../../../../packages/components/date-picker-panel/src/date-picker-com/panel-date-pick.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      ppNs.b(),\n      dpNs.b(),\n      ppNs.is('border', border),\n      ppNs.is('disabled', dateDisabled),\n      {\n        'has-sidebar': $slots.sidebar || hasShortcuts,\n        'has-time': showTime,\n      },\n    ]\"\n  >\n    <div :class=\"ppNs.e('body-wrapper')\">\n      <slot name=\"sidebar\" :class=\"ppNs.e('sidebar')\" />\n      <div v-if=\"hasShortcuts\" :class=\"ppNs.e('sidebar')\">\n        <button\n          v-for=\"(shortcut, key) in shortcuts\"\n          :key=\"key\"\n          type=\"button\"\n          :disabled=\"dateDisabled\"\n          :class=\"ppNs.e('shortcut')\"\n          @click=\"handleShortcutClick(shortcut)\"\n        >\n          {{ shortcut.text }}\n        </button>\n      </div>\n      <div :class=\"ppNs.e('body')\">\n        <div v-if=\"showTime\" :class=\"dpNs.e('time-header')\">\n          <span :class=\"dpNs.e('editor-wrap')\">\n            <el-input\n              :placeholder=\"t('el.datepicker.selectDate')\"\n              :model-value=\"visibleDate\"\n              size=\"small\"\n              :validate-event=\"false\"\n              :disabled=\"dateDisabled\"\n              :readonly=\"!editable\"\n              @input=\"(val) => (userInputDate = val)\"\n              @change=\"handleVisibleDateChange\"\n            />\n          </span>\n          <span\n            v-click-outside=\"handleTimePickClose\"\n            :class=\"dpNs.e('editor-wrap')\"\n          >\n            <el-input\n              :placeholder=\"t('el.datepicker.selectTime')\"\n              :model-value=\"visibleTime\"\n              size=\"small\"\n              :validate-event=\"false\"\n              :disabled=\"dateDisabled\"\n              :readonly=\"!editable\"\n              @focus=\"onTimePickerInputFocus\"\n              @input=\"(val) => (userInputTime = val)\"\n              @change=\"handleVisibleTimeChange\"\n            />\n            <time-pick-panel\n              :visible=\"timePickerVisible\"\n              :format=\"timeFormat\"\n              :parsed-value=\"innerDate\"\n              @pick=\"handleTimePick\"\n            />\n          </span>\n        </div>\n        <div\n          v-show=\"currentView !== 'time'\"\n          :class=\"[\n            dpNs.e('header'),\n            (currentView === 'year' || currentView === 'month') &&\n              dpNs.em('header', 'bordered'),\n          ]\"\n        >\n          <span :class=\"dpNs.e('prev-btn')\">\n            <button\n              type=\"button\"\n              :aria-label=\"t(`el.datepicker.prevYear`)\"\n              class=\"d-arrow-left\"\n              :class=\"ppNs.e('icon-btn')\"\n              :disabled=\"dateDisabled\"\n              @click=\"moveByYear(false)\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              v-show=\"currentView === 'date'\"\n              type=\"button\"\n              :aria-label=\"t(`el.datepicker.prevMonth`)\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"arrow-left\"\n              :disabled=\"dateDisabled\"\n              @click=\"moveByMonth(false)\"\n            >\n              <slot name=\"prev-month\">\n                <el-icon><arrow-left /></el-icon>\n              </slot>\n            </button>\n          </span>\n          <span\n            role=\"button\"\n            :class=\"dpNs.e('header-label')\"\n            aria-live=\"polite\"\n            :tabindex=\"disabled ? undefined : 0\"\n            :aria-disabled=\"disabled\"\n            @keydown.enter=\"showPicker('year')\"\n            @click=\"showPicker('year')\"\n            >{{ yearLabel }}</span\n          >\n          <span\n            v-show=\"currentView === 'date'\"\n            role=\"button\"\n            aria-live=\"polite\"\n            :tabindex=\"disabled ? undefined : 0\"\n            :aria-disabled=\"disabled\"\n            :class=\"[\n              dpNs.e('header-label'),\n              { active: currentView === 'month' },\n            ]\"\n            @keydown.enter=\"showPicker('month')\"\n            @click=\"showPicker('month')\"\n            >{{ t(`el.datepicker.month${month + 1}`) }}</span\n          >\n          <span :class=\"dpNs.e('next-btn')\">\n            <button\n              v-show=\"currentView === 'date'\"\n              type=\"button\"\n              :aria-label=\"t(`el.datepicker.nextMonth`)\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"arrow-right\"\n              :disabled=\"dateDisabled\"\n              @click=\"moveByMonth(true)\"\n            >\n              <slot name=\"next-month\">\n                <el-icon><arrow-right /></el-icon>\n              </slot>\n            </button>\n            <button\n              type=\"button\"\n              :aria-label=\"t(`el.datepicker.nextYear`)\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"d-arrow-right\"\n              :disabled=\"dateDisabled\"\n              @click=\"moveByYear(true)\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n          </span>\n        </div>\n        <div :class=\"ppNs.e('content')\" @keydown=\"handleKeydownTable\">\n          <date-table\n            v-if=\"currentView === 'date'\"\n            ref=\"currentViewRef\"\n            :selection-mode=\"selectionMode\"\n            :date=\"innerDate\"\n            :parsed-value=\"parsedValue\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"dateDisabled\"\n            :cell-class-name=\"cellClassName\"\n            :show-week-number=\"showWeekNumber\"\n            @pick=\"handleDatePick\"\n          />\n          <year-table\n            v-if=\"currentView === 'year'\"\n            ref=\"currentViewRef\"\n            :selection-mode=\"selectionMode\"\n            :date=\"innerDate\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"dateDisabled\"\n            :parsed-value=\"parsedValue\"\n            :cell-class-name=\"cellClassName\"\n            @pick=\"handleYearPick\"\n          />\n          <month-table\n            v-if=\"currentView === 'month'\"\n            ref=\"currentViewRef\"\n            :selection-mode=\"selectionMode\"\n            :date=\"innerDate\"\n            :parsed-value=\"parsedValue\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"dateDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @pick=\"handleMonthPick\"\n          />\n        </div>\n      </div>\n    </div>\n    <div\n      v-if=\"showFooter && footerVisible && footerFilled\"\n      :class=\"ppNs.e('footer')\"\n    >\n      <el-button\n        v-show=\"!isMultipleType && showNow\"\n        text\n        size=\"small\"\n        :class=\"ppNs.e('link-btn')\"\n        :disabled=\"disabledNow\"\n        @click=\"changeToNow\"\n      >\n        {{ t('el.datepicker.now') }}\n      </el-button>\n      <el-button\n        v-if=\"showConfirm\"\n        plain\n        size=\"small\"\n        :class=\"ppNs.e('link-btn')\"\n        :disabled=\"disabledConfirm\"\n        @click=\"onConfirm\"\n      >\n        {{ t('el.datepicker.confirm') }}\n      </el-button>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  inject,\n  nextTick,\n  ref,\n  toRef,\n  useAttrs,\n  useSlots,\n  watch,\n} from 'vue'\nimport dayjs from 'dayjs'\nimport ElButton from '@element-plus/components/button'\nimport { ClickOutside as vClickOutside } from '@element-plus/directives'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport {\n  DEFAULT_FORMATS_DATE,\n  DEFAULT_FORMATS_TIME,\n  PICKER_BASE_INJECTION_KEY,\n  TimePickPanel,\n  extractDateFormat,\n  extractTimeFormat,\n} from '@element-plus/components/time-picker'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n  extractFirst,\n  getEventCode,\n  isArray,\n  isFunction,\n} from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport {\n  ArrowLeft,\n  ArrowRight,\n  DArrowLeft,\n  DArrowRight,\n} from '@element-plus/icons-vue'\nimport { panelDatePickProps } from '../props/panel-date-pick'\nimport {\n  correctlyParseUserInput,\n  getValidDateOfMonth,\n  getValidDateOfYear,\n} from '../utils'\nimport { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants'\nimport DateTable from './basic-date-table.vue'\nimport MonthTable from './basic-month-table.vue'\nimport YearTable from './basic-year-table.vue'\nimport { useFormDisabled } from '@element-plus/components/form'\n\nimport type { SetupContext } from 'vue'\nimport type { ConfigType, Dayjs } from 'dayjs'\nimport type { PanelDatePickProps } from '../props/panel-date-pick'\nimport type {\n  DateTableEmits,\n  DatesPickerEmits,\n  MonthsPickerEmits,\n  WeekPickerEmits,\n  YearsPickerEmits,\n} from '../props/basic-date-table'\n\ntype DatePickType = PanelDatePickProps['type']\n// todo\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst timeWithinRange = (_: ConfigType, __: any, ___: string) => true\nconst props = defineProps(panelDatePickProps)\nconst contextEmit = defineEmits(['pick', 'set-picker-option', 'panel-change'])\nconst ppNs = useNamespace('picker-panel')\nconst dpNs = useNamespace('date-picker')\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst { t, lang } = useLocale()\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst isDefaultFormat = inject(\n  ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY,\n  undefined\n) as any\nconst { shortcuts, disabledDate, cellClassName, defaultTime } = pickerBase.props\nconst defaultValue = toRef(pickerBase.props, 'defaultValue')\n\nconst currentViewRef = ref<{ focus: () => void }>()\n\nconst innerDate = ref(dayjs().locale(lang.value))\n\nconst isChangeToNow = ref(false)\n\nlet isShortcut = false\n\nconst defaultTimeD = computed(() => {\n  return dayjs(defaultTime).locale(lang.value)\n})\n\nconst month = computed(() => {\n  return innerDate.value.month()\n})\n\nconst year = computed(() => {\n  return innerDate.value.year()\n})\n\nconst selectableRange = ref([])\nconst userInputDate = ref<string | null>(null)\nconst userInputTime = ref<string | null>(null)\n// todo update to disableHour\nconst checkDateWithinRange = (date: ConfigType) => {\n  return selectableRange.value.length > 0\n    ? timeWithinRange(date, selectableRange.value, props.format || 'HH:mm:ss')\n    : true\n}\nconst formatEmit = (emitDayjs: Dayjs) => {\n  if (\n    defaultTime &&\n    !visibleTime.value &&\n    !isChangeToNow.value &&\n    !isShortcut\n  ) {\n    return defaultTimeD.value\n      .year(emitDayjs.year())\n      .month(emitDayjs.month())\n      .date(emitDayjs.date())\n  }\n  if (showTime.value) return emitDayjs.millisecond(0)\n  return emitDayjs.startOf('day')\n}\nconst emit = (value: Dayjs | Dayjs[], ...args: any[]) => {\n  if (!value) {\n    contextEmit('pick', value, ...args)\n  } else if (isArray(value)) {\n    const dates = value.map(formatEmit)\n    contextEmit('pick', dates, ...args)\n  } else {\n    contextEmit('pick', formatEmit(value), ...args)\n  }\n  userInputDate.value = null\n  userInputTime.value = null\n  isChangeToNow.value = false\n  isShortcut = false\n}\nconst handleDatePick = async (value: DateTableEmits, keepOpen?: boolean) => {\n  if (selectionMode.value === 'date' && dayjs.isDayjs(value)) {\n    const parsedDateValue = extractFirst(props.parsedValue)\n    let newDate = parsedDateValue\n      ? parsedDateValue\n          .year(value.year())\n          .month(value.month())\n          .date(value.date())\n      : value\n    // change default time while out of selectableRange\n    if (!checkDateWithinRange(newDate)) {\n      newDate = (selectableRange.value[0][0] as Dayjs)\n        .year(value.year())\n        .month(value.month())\n        .date(value.date())\n    }\n    innerDate.value = newDate\n    emit(newDate, showTime.value || keepOpen)\n  } else if (selectionMode.value === 'week') {\n    emit((value as WeekPickerEmits).date)\n  } else if (selectionMode.value === 'dates') {\n    emit(value as DatesPickerEmits, true) // set true to keep panel open\n  }\n}\n\nconst moveByMonth = (forward: boolean) => {\n  const action = forward ? 'add' : 'subtract'\n  innerDate.value = innerDate.value[action](1, 'month')\n  handlePanelChange('month')\n}\n\nconst moveByYear = (forward: boolean) => {\n  const currentDate = innerDate.value\n  const action = forward ? 'add' : 'subtract'\n\n  innerDate.value =\n    currentView.value === 'year'\n      ? currentDate[action](10, 'year')\n      : currentDate[action](1, 'year')\n\n  handlePanelChange('year')\n}\n\nconst currentView = ref('date')\n\nconst yearLabel = computed(() => {\n  const yearTranslation = t('el.datepicker.year')\n  if (currentView.value === 'year') {\n    const startYear = Math.floor(year.value / 10) * 10\n    if (yearTranslation) {\n      return `${startYear} ${yearTranslation} - ${\n        startYear + 9\n      } ${yearTranslation}`\n    }\n    return `${startYear} - ${startYear + 9}`\n  }\n  return `${year.value} ${yearTranslation}`\n})\n\ntype Shortcut = {\n  value: (() => Dayjs) | Dayjs\n  onClick?: (ctx: Omit<SetupContext, 'expose'>) => void\n}\n\nconst handleShortcutClick = (shortcut: Shortcut) => {\n  const shortcutValue = isFunction(shortcut.value)\n    ? shortcut.value()\n    : shortcut.value\n  if (shortcutValue) {\n    isShortcut = true\n    emit(dayjs(shortcutValue).locale(lang.value))\n    return\n  }\n  if (shortcut.onClick) {\n    shortcut.onClick({\n      attrs,\n      slots,\n      emit: contextEmit as SetupContext['emit'],\n    })\n  }\n}\n\nconst selectionMode = computed<DatePickType>(() => {\n  const { type } = props\n  if (['week', 'month', 'months', 'year', 'years', 'dates'].includes(type))\n    return type\n  return 'date'\n})\n\nconst isMultipleType = computed(() => {\n  return (\n    selectionMode.value === 'dates' ||\n    selectionMode.value === 'months' ||\n    selectionMode.value === 'years'\n  )\n})\n\nconst keyboardMode = computed<string>(() => {\n  return selectionMode.value === 'date'\n    ? currentView.value\n    : selectionMode.value\n})\n\nconst hasShortcuts = computed(() => !!shortcuts.length)\n\nconst handleMonthPick = async (\n  month: number | MonthsPickerEmits,\n  keepOpen?: boolean\n) => {\n  if (selectionMode.value === 'month') {\n    innerDate.value = getValidDateOfMonth(\n      innerDate.value,\n      innerDate.value.year(),\n      month as number,\n      lang.value,\n      disabledDate\n    )\n    emit(innerDate.value, false)\n  } else if (selectionMode.value === 'months') {\n    emit(month as MonthsPickerEmits, keepOpen ?? true)\n  } else {\n    innerDate.value = getValidDateOfMonth(\n      innerDate.value,\n      innerDate.value.year(),\n      month as number,\n      lang.value,\n      disabledDate\n    )\n    currentView.value = 'date'\n    if (['month', 'year', 'date', 'week'].includes(selectionMode.value)) {\n      emit(innerDate.value, true)\n      await nextTick()\n      handleFocusPicker()\n    }\n  }\n  handlePanelChange('month')\n}\n\nconst handleYearPick = async (\n  year: number | YearsPickerEmits,\n  keepOpen?: boolean\n) => {\n  if (selectionMode.value === 'year') {\n    const data = innerDate.value.startOf('year').year(year as number)\n    innerDate.value = getValidDateOfYear(data, lang.value, disabledDate)\n    emit(innerDate.value, false)\n  } else if (selectionMode.value === 'years') {\n    emit(year as YearsPickerEmits, keepOpen ?? true)\n  } else {\n    const data = innerDate.value.year(year as number)\n    innerDate.value = getValidDateOfYear(data, lang.value, disabledDate)\n    currentView.value = 'month'\n    if (['month', 'year', 'date', 'week'].includes(selectionMode.value)) {\n      emit(innerDate.value, true)\n      await nextTick()\n      handleFocusPicker()\n    }\n  }\n  handlePanelChange('year')\n}\n\nconst dateDisabled = useFormDisabled()\n\nconst showPicker = async (view: 'month' | 'year') => {\n  if (dateDisabled.value) return\n  currentView.value = view\n  await nextTick()\n  handleFocusPicker()\n}\n\nconst showTime = computed(\n  () => props.type === 'datetime' || props.type === 'datetimerange'\n)\n\nconst footerVisible = computed(() => {\n  const showDateFooter = showTime.value || selectionMode.value === 'dates'\n  const showYearFooter = selectionMode.value === 'years'\n  const showMonthFooter = selectionMode.value === 'months'\n  const isDateView = currentView.value === 'date'\n  const isYearView = currentView.value === 'year'\n  const isMonthView = currentView.value === 'month'\n  return (\n    (showDateFooter && isDateView) ||\n    (showYearFooter && isYearView) ||\n    (showMonthFooter && isMonthView)\n  )\n})\n\nconst footerFilled = computed(\n  () => (!isMultipleType.value && props.showNow) || props.showConfirm\n)\n\nconst disabledConfirm = computed(() => {\n  if (!disabledDate) return false\n  if (!props.parsedValue) return true\n  if (isArray(props.parsedValue)) {\n    return disabledDate(props.parsedValue[0].toDate())\n  }\n  return disabledDate(props.parsedValue.toDate())\n})\nconst onConfirm = () => {\n  if (isMultipleType.value) {\n    emit(props.parsedValue as Dayjs[])\n  } else {\n    // deal with the scenario where: user opens the date time picker, then confirm without doing anything\n    let result = extractFirst(props.parsedValue)\n    if (!result) {\n      const defaultTimeD = dayjs(defaultTime).locale(lang.value)\n      const defaultValueD = getDefaultValue()\n      result = defaultTimeD\n        .year(defaultValueD.year())\n        .month(defaultValueD.month())\n        .date(defaultValueD.date())\n    }\n    innerDate.value = result\n    emit(result)\n  }\n}\n\nconst disabledNow = computed(() => {\n  if (!disabledDate) return false\n  return disabledDate(dayjs().locale(lang.value).toDate())\n})\nconst changeToNow = () => {\n  // NOTE: not a permanent solution\n  //       consider disable \"now\" button in the future\n  const now = dayjs().locale(lang.value)\n  const nowDate = now.toDate()\n  isChangeToNow.value = true\n  if (\n    (!disabledDate || !disabledDate(nowDate)) &&\n    checkDateWithinRange(nowDate)\n  ) {\n    innerDate.value = dayjs().locale(lang.value)\n    emit(innerDate.value)\n  }\n}\n\nconst timeFormat = computed(() => {\n  return (\n    props.timeFormat || extractTimeFormat(props.format) || DEFAULT_FORMATS_TIME\n  )\n})\n\nconst dateFormat = computed(() => {\n  return (\n    props.dateFormat || extractDateFormat(props.format) || DEFAULT_FORMATS_DATE\n  )\n})\n\nconst visibleTime = computed(() => {\n  if (userInputTime.value) return userInputTime.value\n  if (!props.parsedValue && !defaultValue.value) return\n  const dateValue = extractFirst(props.parsedValue) || innerDate.value\n  return dateValue.format(timeFormat.value)\n})\n\nconst visibleDate = computed(() => {\n  if (userInputDate.value) return userInputDate.value\n  if (!props.parsedValue && !defaultValue.value) return\n  const dateValue = extractFirst(props.parsedValue) || innerDate.value\n  return dateValue.format(dateFormat.value)\n})\n\nconst timePickerVisible = ref(false)\nconst onTimePickerInputFocus = () => {\n  timePickerVisible.value = true\n}\nconst handleTimePickClose = () => {\n  timePickerVisible.value = false\n}\n\nconst getUnits = (date: Dayjs) => {\n  return {\n    hour: date.hour(),\n    minute: date.minute(),\n    second: date.second(),\n    year: date.year(),\n    month: date.month(),\n    date: date.date(),\n  }\n}\n\nconst handleTimePick = (value: Dayjs, visible: boolean, first: boolean) => {\n  const { hour, minute, second } = getUnits(value)\n  const parsedDateValue = extractFirst(props.parsedValue)\n  const newDate = parsedDateValue\n    ? parsedDateValue.hour(hour).minute(minute).second(second)\n    : value\n  innerDate.value = newDate\n  emit(innerDate.value, true)\n  if (!first) {\n    timePickerVisible.value = visible\n  }\n}\n\nconst handleVisibleTimeChange = (value: string) => {\n  const newDate = dayjs(value, timeFormat.value).locale(lang.value)\n  if (newDate.isValid() && checkDateWithinRange(newDate)) {\n    const { year, month, date } = getUnits(innerDate.value)\n    innerDate.value = newDate.year(year).month(month).date(date)\n    userInputTime.value = null\n    timePickerVisible.value = false\n    emit(innerDate.value, true)\n  }\n}\n\nconst handleVisibleDateChange = (value: string) => {\n  const newDate = correctlyParseUserInput(\n    value,\n    dateFormat.value,\n    lang.value,\n    isDefaultFormat\n  ) as Dayjs\n  if (newDate.isValid()) {\n    if (disabledDate && disabledDate(newDate.toDate())) {\n      return\n    }\n    const { hour, minute, second } = getUnits(innerDate.value)\n    innerDate.value = newDate.hour(hour).minute(minute).second(second)\n    userInputDate.value = null\n    emit(innerDate.value, true)\n  }\n}\n\nconst isValidValue = (date: unknown) => {\n  return (\n    dayjs.isDayjs(date) &&\n    date.isValid() &&\n    (disabledDate ? !disabledDate(date.toDate()) : true)\n  )\n}\n\nconst parseUserInput = (value: Dayjs) => {\n  return correctlyParseUserInput(\n    value,\n    props.format,\n    lang.value,\n    isDefaultFormat\n  )\n}\n\nconst getDefaultValue = () => {\n  const parseDate = dayjs(defaultValue.value).locale(lang.value)\n  if (!defaultValue.value) {\n    const defaultTimeDValue = defaultTimeD.value\n    return dayjs()\n      .hour(defaultTimeDValue.hour())\n      .minute(defaultTimeDValue.minute())\n      .second(defaultTimeDValue.second())\n      .locale(lang.value)\n  }\n  return parseDate\n}\n\nconst handleFocusPicker = () => {\n  if (['week', 'month', 'year', 'date'].includes(selectionMode.value)) {\n    currentViewRef.value?.focus()\n  }\n}\n\nconst _handleFocusPicker = () => {\n  handleFocusPicker()\n  // TODO: After focus the date input, the first time you use the ArrowDown keys, you cannot focus on the date cell\n  if (selectionMode.value === 'week') {\n    handleKeyControl(EVENT_CODE.down)\n  }\n}\n\nconst handleKeydownTable = (event: KeyboardEvent) => {\n  const code = getEventCode(event)\n\n  const validCode = [\n    EVENT_CODE.up,\n    EVENT_CODE.down,\n    EVENT_CODE.left,\n    EVENT_CODE.right,\n    EVENT_CODE.home,\n    EVENT_CODE.end,\n    EVENT_CODE.pageUp,\n    EVENT_CODE.pageDown,\n  ]\n  if (validCode.includes(code)) {\n    handleKeyControl(code)\n    event.stopPropagation()\n    event.preventDefault()\n  }\n  if (\n    [EVENT_CODE.enter, EVENT_CODE.space, EVENT_CODE.numpadEnter].includes(\n      code\n    ) &&\n    userInputDate.value === null &&\n    userInputTime.value === null\n  ) {\n    event.preventDefault()\n    emit(innerDate.value, false)\n  }\n}\n\nconst handleKeyControl = (code: string) => {\n  type KeyControlMappingCallableOffset = (date: Date, step?: number) => number\n  type KeyControl = {\n    [key: string]:\n      | number\n      | KeyControlMappingCallableOffset\n      | ((date: Date, step: number) => any)\n    offset: (date: Date, step: number) => any\n  }\n  interface KeyControlMapping {\n    [key: string]: KeyControl\n  }\n\n  const { up, down, left, right, home, end, pageUp, pageDown } = EVENT_CODE\n  const mapping: KeyControlMapping = {\n    year: {\n      [up]: -4,\n      [down]: 4,\n      [left]: -1,\n      [right]: 1,\n      offset: (date: Date, step: number) =>\n        date.setFullYear(date.getFullYear() + step),\n    },\n    month: {\n      [up]: -4,\n      [down]: 4,\n      [left]: -1,\n      [right]: 1,\n      offset: (date: Date, step: number) =>\n        date.setMonth(date.getMonth() + step),\n    },\n    week: {\n      [up]: -1,\n      [down]: 1,\n      [left]: -1,\n      [right]: 1,\n      offset: (date: Date, step: number) =>\n        date.setDate(date.getDate() + step * 7),\n    },\n    date: {\n      [up]: -7,\n      [down]: 7,\n      [left]: -1,\n      [right]: 1,\n      [home]: (date: Date) => -date.getDay(),\n      [end]: (date: Date) => -date.getDay() + 6,\n      [pageUp]: (date: Date) =>\n        -new Date(date.getFullYear(), date.getMonth(), 0).getDate(),\n      [pageDown]: (date: Date) =>\n        new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(),\n      offset: (date: Date, step: number) => date.setDate(date.getDate() + step),\n    },\n  }\n\n  const newDate = innerDate.value.toDate()\n  while (Math.abs(innerDate.value.diff(newDate, 'year', true)) < 1) {\n    const map = mapping[keyboardMode.value]\n    if (!map) return\n    map.offset(\n      newDate,\n      isFunction(map[code])\n        ? (map[code] as unknown as KeyControlMappingCallableOffset)(newDate)\n        : ((map[code] as number) ?? 0)\n    )\n    if (disabledDate && disabledDate(newDate)) {\n      break\n    }\n    const result = dayjs(newDate).locale(lang.value)\n    innerDate.value = result\n    contextEmit('pick', result, true)\n    break\n  }\n}\n\nconst handlePanelChange = (mode: 'month' | 'year') => {\n  contextEmit('panel-change', innerDate.value.toDate(), mode, currentView.value)\n}\n\nwatch(\n  () => selectionMode.value,\n  (val) => {\n    if (['month', 'year'].includes(val)) {\n      currentView.value = val\n      return\n    } else if (val === 'years') {\n      currentView.value = 'year'\n      return\n    } else if (val === 'months') {\n      currentView.value = 'month'\n      return\n    }\n    currentView.value = 'date'\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => defaultValue.value,\n  (val) => {\n    if (val) {\n      innerDate.value = getDefaultValue()\n    }\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => props.parsedValue,\n  (val) => {\n    if (val) {\n      if (isMultipleType.value) return\n      if (isArray(val)) return\n      innerDate.value = val\n    } else {\n      innerDate.value = getDefaultValue()\n    }\n  },\n  { immediate: true }\n)\n\ncontextEmit('set-picker-option', ['isValidValue', isValidValue])\ncontextEmit('set-picker-option', ['parseUserInput', parseUserInput])\ncontextEmit('set-picker-option', ['handleFocusPicker', _handleFocusPicker])\n</script>\n"],"mappings":""}
+{"version":3,"file":"panel-date-pick.js","names":[],"sources":["../../../../../../../packages/components/date-picker-panel/src/date-picker-com/panel-date-pick.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      ppNs.b(),\n      dpNs.b(),\n      ppNs.is('border', border),\n      ppNs.is('disabled', dateDisabled),\n      {\n        'has-sidebar': $slots.sidebar || hasShortcuts,\n        'has-time': showTime,\n      },\n    ]\"\n  >\n    <div :class=\"ppNs.e('body-wrapper')\">\n      <slot name=\"sidebar\" :class=\"ppNs.e('sidebar')\" />\n      <div v-if=\"hasShortcuts\" :class=\"ppNs.e('sidebar')\">\n        <button\n          v-for=\"(shortcut, key) in shortcuts\"\n          :key=\"key\"\n          type=\"button\"\n          :disabled=\"dateDisabled\"\n          :class=\"ppNs.e('shortcut')\"\n          @click=\"handleShortcutClick(shortcut)\"\n        >\n          {{ shortcut.text }}\n        </button>\n      </div>\n      <div :class=\"ppNs.e('body')\">\n        <div v-if=\"showTime\" :class=\"dpNs.e('time-header')\">\n          <span :class=\"dpNs.e('editor-wrap')\">\n            <el-input\n              :placeholder=\"t('el.datepicker.selectDate')\"\n              :model-value=\"visibleDate\"\n              size=\"small\"\n              :validate-event=\"false\"\n              :disabled=\"dateDisabled\"\n              :readonly=\"!editable\"\n              @input=\"(val) => (userInputDate = val)\"\n              @change=\"handleVisibleDateChange\"\n            />\n          </span>\n          <span\n            v-click-outside=\"handleTimePickClose\"\n            :class=\"dpNs.e('editor-wrap')\"\n          >\n            <el-input\n              :placeholder=\"t('el.datepicker.selectTime')\"\n              :model-value=\"visibleTime\"\n              size=\"small\"\n              :validate-event=\"false\"\n              :disabled=\"dateDisabled\"\n              :readonly=\"!editable\"\n              @focus=\"onTimePickerInputFocus\"\n              @input=\"(val) => (userInputTime = val)\"\n              @change=\"handleVisibleTimeChange\"\n            />\n            <time-pick-panel\n              :visible=\"timePickerVisible\"\n              :format=\"timeFormat\"\n              :parsed-value=\"innerDate\"\n              @pick=\"handleTimePick\"\n            />\n          </span>\n        </div>\n        <div\n          v-show=\"currentView !== 'time'\"\n          :class=\"[\n            dpNs.e('header'),\n            (currentView === 'year' || currentView === 'month') &&\n              dpNs.em('header', 'bordered'),\n          ]\"\n        >\n          <span :class=\"dpNs.e('prev-btn')\">\n            <button\n              type=\"button\"\n              :aria-label=\"t(`el.datepicker.prevYear`)\"\n              class=\"d-arrow-left\"\n              :class=\"ppNs.e('icon-btn')\"\n              :disabled=\"dateDisabled\"\n              @click=\"moveByYear(false)\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              v-show=\"currentView === 'date'\"\n              type=\"button\"\n              :aria-label=\"t(`el.datepicker.prevMonth`)\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"arrow-left\"\n              :disabled=\"dateDisabled\"\n              @click=\"moveByMonth(false)\"\n            >\n              <slot name=\"prev-month\">\n                <el-icon><arrow-left /></el-icon>\n              </slot>\n            </button>\n          </span>\n          <span\n            role=\"button\"\n            :class=\"dpNs.e('header-label')\"\n            aria-live=\"polite\"\n            :tabindex=\"disabled ? undefined : 0\"\n            :aria-disabled=\"disabled\"\n            @keydown.enter=\"showPicker('year')\"\n            @click=\"showPicker('year')\"\n            >{{ yearLabel }}</span\n          >\n          <span\n            v-show=\"currentView === 'date'\"\n            role=\"button\"\n            aria-live=\"polite\"\n            :tabindex=\"disabled ? undefined : 0\"\n            :aria-disabled=\"disabled\"\n            :class=\"[\n              dpNs.e('header-label'),\n              { active: currentView === 'month' },\n            ]\"\n            @keydown.enter=\"showPicker('month')\"\n            @click=\"showPicker('month')\"\n            >{{ t(`el.datepicker.month${month + 1}`) }}</span\n          >\n          <span :class=\"dpNs.e('next-btn')\">\n            <button\n              v-show=\"currentView === 'date'\"\n              type=\"button\"\n              :aria-label=\"t(`el.datepicker.nextMonth`)\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"arrow-right\"\n              :disabled=\"dateDisabled\"\n              @click=\"moveByMonth(true)\"\n            >\n              <slot name=\"next-month\">\n                <el-icon><arrow-right /></el-icon>\n              </slot>\n            </button>\n            <button\n              type=\"button\"\n              :aria-label=\"t(`el.datepicker.nextYear`)\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"d-arrow-right\"\n              :disabled=\"dateDisabled\"\n              @click=\"moveByYear(true)\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n          </span>\n        </div>\n        <div :class=\"ppNs.e('content')\" @keydown=\"handleKeydownTable\">\n          <date-table\n            v-if=\"currentView === 'date'\"\n            ref=\"currentViewRef\"\n            :selection-mode=\"selectionMode\"\n            :date=\"innerDate\"\n            :parsed-value=\"parsedValue\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"dateDisabled\"\n            :cell-class-name=\"cellClassName\"\n            :show-week-number=\"showWeekNumber\"\n            @pick=\"handleDatePick\"\n          />\n          <year-table\n            v-if=\"currentView === 'year'\"\n            ref=\"currentViewRef\"\n            :selection-mode=\"selectionMode\"\n            :date=\"innerDate\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"dateDisabled\"\n            :parsed-value=\"parsedValue\"\n            :cell-class-name=\"cellClassName\"\n            @pick=\"handleYearPick\"\n          />\n          <month-table\n            v-if=\"currentView === 'month'\"\n            ref=\"currentViewRef\"\n            :selection-mode=\"selectionMode\"\n            :date=\"innerDate\"\n            :parsed-value=\"parsedValue\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"dateDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @pick=\"handleMonthPick\"\n          />\n        </div>\n      </div>\n    </div>\n    <div\n      v-if=\"showFooter && footerVisible && footerFilled\"\n      :class=\"ppNs.e('footer')\"\n    >\n      <el-button\n        v-show=\"!isMultipleType && showNow\"\n        text\n        size=\"small\"\n        :class=\"ppNs.e('link-btn')\"\n        :disabled=\"disabledNow\"\n        @click=\"changeToNow\"\n      >\n        {{ t('el.datepicker.now') }}\n      </el-button>\n      <el-button\n        v-if=\"showConfirm\"\n        plain\n        size=\"small\"\n        :class=\"ppNs.e('link-btn')\"\n        :disabled=\"disabledConfirm\"\n        @click=\"onConfirm\"\n      >\n        {{ t('el.datepicker.confirm') }}\n      </el-button>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  inject,\n  nextTick,\n  ref,\n  toRef,\n  useAttrs,\n  useSlots,\n  watch,\n} from 'vue'\nimport dayjs from 'dayjs'\nimport ElButton from '@element-plus/components/button'\nimport { ClickOutside as vClickOutside } from '@element-plus/directives'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport {\n  DEFAULT_FORMATS_DATE,\n  DEFAULT_FORMATS_TIME,\n  PICKER_BASE_INJECTION_KEY,\n  TimePickPanel,\n  extractDateFormat,\n  extractTimeFormat,\n} from '@element-plus/components/time-picker'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n  extractFirst,\n  getEventCode,\n  isArray,\n  isFunction,\n} from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport {\n  ArrowLeft,\n  ArrowRight,\n  DArrowLeft,\n  DArrowRight,\n} from '@element-plus/icons-vue'\nimport { panelDatePickProps } from '../props/panel-date-pick'\nimport {\n  correctlyParseUserInput,\n  getValidDateOfMonth,\n  getValidDateOfYear,\n} from '../utils'\nimport { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants'\nimport DateTable from './basic-date-table.vue'\nimport MonthTable from './basic-month-table.vue'\nimport YearTable from './basic-year-table.vue'\nimport { useFormDisabled } from '@element-plus/components/form'\n\nimport type { SetupContext } from 'vue'\nimport type { ConfigType, Dayjs } from 'dayjs'\nimport type { PanelDatePickProps } from '../props/panel-date-pick'\nimport type {\n  DateTableEmits,\n  DatesPickerEmits,\n  MonthsPickerEmits,\n  WeekPickerEmits,\n  YearsPickerEmits,\n} from '../props/basic-date-table'\n\ntype DatePickType = PanelDatePickProps['type']\n// todo\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nconst timeWithinRange = (_: ConfigType, __: any, ___: string) => true\nconst props = defineProps(panelDatePickProps)\nconst contextEmit = defineEmits(['pick', 'set-picker-option', 'panel-change'])\nconst ppNs = useNamespace('picker-panel')\nconst dpNs = useNamespace('date-picker')\nconst attrs = useAttrs()\nconst slots = useSlots()\n\nconst { t, lang } = useLocale()\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst isDefaultFormat = inject(\n  ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY,\n  undefined\n) as any\nconst { shortcuts, disabledDate, cellClassName, defaultTime } = pickerBase.props\nconst defaultValue = toRef(pickerBase.props, 'defaultValue')\n\nconst currentViewRef = ref<{ focus: () => void }>()\n\nconst innerDate = ref(dayjs().locale(lang.value))\n\nconst isChangeToNow = ref(false)\n\nlet isShortcut = false\n\nconst defaultTimeD = computed(() => {\n  return dayjs(defaultTime).locale(lang.value)\n})\n\nconst month = computed(() => {\n  return innerDate.value.month()\n})\n\nconst year = computed(() => {\n  return innerDate.value.year()\n})\n\nconst selectableRange = ref([])\nconst userInputDate = ref<string | null>(null)\nconst userInputTime = ref<string | null>(null)\n// todo update to disableHour\nconst checkDateWithinRange = (date: ConfigType) => {\n  return selectableRange.value.length > 0\n    ? timeWithinRange(\n        date,\n        selectableRange.value,\n        props.format || DEFAULT_FORMATS_TIME\n      )\n    : true\n}\nconst formatEmit = (emitDayjs: Dayjs) => {\n  if (\n    defaultTime &&\n    !visibleTime.value &&\n    !isChangeToNow.value &&\n    !isShortcut\n  ) {\n    return defaultTimeD.value\n      .year(emitDayjs.year())\n      .month(emitDayjs.month())\n      .date(emitDayjs.date())\n  }\n  if (showTime.value) return emitDayjs.millisecond(0)\n  return emitDayjs.startOf('day')\n}\nconst emit = (value: Dayjs | Dayjs[], ...args: any[]) => {\n  if (!value) {\n    contextEmit('pick', value, ...args)\n  } else if (isArray(value)) {\n    const dates = value.map(formatEmit)\n    contextEmit('pick', dates, ...args)\n  } else {\n    contextEmit('pick', formatEmit(value), ...args)\n  }\n  userInputDate.value = null\n  userInputTime.value = null\n  isChangeToNow.value = false\n  isShortcut = false\n}\nconst handleDatePick = async (value: DateTableEmits, keepOpen?: boolean) => {\n  if (selectionMode.value === 'date' && dayjs.isDayjs(value)) {\n    const parsedDateValue = extractFirst(props.parsedValue)\n    let newDate = parsedDateValue\n      ? parsedDateValue\n          .year(value.year())\n          .month(value.month())\n          .date(value.date())\n      : value\n    // change default time while out of selectableRange\n    if (!checkDateWithinRange(newDate)) {\n      newDate = (selectableRange.value[0][0] as Dayjs)\n        .year(value.year())\n        .month(value.month())\n        .date(value.date())\n    }\n    innerDate.value = newDate\n    emit(newDate, showTime.value || keepOpen)\n  } else if (selectionMode.value === 'week') {\n    emit((value as WeekPickerEmits).date)\n  } else if (selectionMode.value === 'dates') {\n    emit(value as DatesPickerEmits, true) // set true to keep panel open\n  }\n}\n\nconst moveByMonth = (forward: boolean) => {\n  const action = forward ? 'add' : 'subtract'\n  innerDate.value = innerDate.value[action](1, 'month')\n  handlePanelChange('month')\n}\n\nconst moveByYear = (forward: boolean) => {\n  const currentDate = innerDate.value\n  const action = forward ? 'add' : 'subtract'\n\n  innerDate.value =\n    currentView.value === 'year'\n      ? currentDate[action](10, 'year')\n      : currentDate[action](1, 'year')\n\n  handlePanelChange('year')\n}\n\nconst currentView = ref('date')\n\nconst yearLabel = computed(() => {\n  const yearTranslation = t('el.datepicker.year')\n  if (currentView.value === 'year') {\n    const startYear = Math.floor(year.value / 10) * 10\n    if (yearTranslation) {\n      return `${startYear} ${yearTranslation} - ${\n        startYear + 9\n      } ${yearTranslation}`\n    }\n    return `${startYear} - ${startYear + 9}`\n  }\n  return `${year.value} ${yearTranslation}`\n})\n\ntype Shortcut = {\n  value: (() => Dayjs) | Dayjs\n  onClick?: (ctx: Omit<SetupContext, 'expose'>) => void\n}\n\nconst handleShortcutClick = (shortcut: Shortcut) => {\n  const shortcutValue = isFunction(shortcut.value)\n    ? shortcut.value()\n    : shortcut.value\n  if (shortcutValue) {\n    isShortcut = true\n    emit(dayjs(shortcutValue).locale(lang.value))\n    return\n  }\n  if (shortcut.onClick) {\n    shortcut.onClick({\n      attrs,\n      slots,\n      emit: contextEmit as SetupContext['emit'],\n    })\n  }\n}\n\nconst selectionMode = computed<DatePickType>(() => {\n  const { type } = props\n  if (['week', 'month', 'months', 'year', 'years', 'dates'].includes(type))\n    return type\n  return 'date'\n})\n\nconst isMultipleType = computed(() => {\n  return (\n    selectionMode.value === 'dates' ||\n    selectionMode.value === 'months' ||\n    selectionMode.value === 'years'\n  )\n})\n\nconst keyboardMode = computed<string>(() => {\n  return selectionMode.value === 'date'\n    ? currentView.value\n    : selectionMode.value\n})\n\nconst hasShortcuts = computed(() => !!shortcuts.length)\n\nconst handleMonthPick = async (\n  month: number | MonthsPickerEmits,\n  keepOpen?: boolean\n) => {\n  if (selectionMode.value === 'month') {\n    innerDate.value = getValidDateOfMonth(\n      innerDate.value,\n      innerDate.value.year(),\n      month as number,\n      lang.value,\n      disabledDate\n    )\n    emit(innerDate.value, false)\n  } else if (selectionMode.value === 'months') {\n    emit(month as MonthsPickerEmits, keepOpen ?? true)\n  } else {\n    innerDate.value = getValidDateOfMonth(\n      innerDate.value,\n      innerDate.value.year(),\n      month as number,\n      lang.value,\n      disabledDate\n    )\n    currentView.value = 'date'\n    if (['month', 'year', 'date', 'week'].includes(selectionMode.value)) {\n      emit(innerDate.value, true)\n      await nextTick()\n      handleFocusPicker()\n    }\n  }\n  handlePanelChange('month')\n}\n\nconst handleYearPick = async (\n  year: number | YearsPickerEmits,\n  keepOpen?: boolean\n) => {\n  if (selectionMode.value === 'year') {\n    const data = innerDate.value.startOf('year').year(year as number)\n    innerDate.value = getValidDateOfYear(data, lang.value, disabledDate)\n    emit(innerDate.value, false)\n  } else if (selectionMode.value === 'years') {\n    emit(year as YearsPickerEmits, keepOpen ?? true)\n  } else {\n    const data = innerDate.value.year(year as number)\n    innerDate.value = getValidDateOfYear(data, lang.value, disabledDate)\n    currentView.value = 'month'\n    if (['month', 'year', 'date', 'week'].includes(selectionMode.value)) {\n      emit(innerDate.value, true)\n      await nextTick()\n      handleFocusPicker()\n    }\n  }\n  handlePanelChange('year')\n}\n\nconst dateDisabled = useFormDisabled()\n\nconst showPicker = async (view: 'month' | 'year') => {\n  if (dateDisabled.value) return\n  currentView.value = view\n  await nextTick()\n  handleFocusPicker()\n}\n\nconst showTime = computed(\n  () => props.type === 'datetime' || props.type === 'datetimerange'\n)\n\nconst footerVisible = computed(() => {\n  const showDateFooter = showTime.value || selectionMode.value === 'dates'\n  const showYearFooter = selectionMode.value === 'years'\n  const showMonthFooter = selectionMode.value === 'months'\n  const isDateView = currentView.value === 'date'\n  const isYearView = currentView.value === 'year'\n  const isMonthView = currentView.value === 'month'\n  return (\n    (showDateFooter && isDateView) ||\n    (showYearFooter && isYearView) ||\n    (showMonthFooter && isMonthView)\n  )\n})\n\nconst footerFilled = computed(\n  () => (!isMultipleType.value && props.showNow) || props.showConfirm\n)\n\nconst disabledConfirm = computed(() => {\n  if (!disabledDate) return false\n  if (!props.parsedValue) return true\n  if (isArray(props.parsedValue)) {\n    return disabledDate(props.parsedValue[0].toDate())\n  }\n  return disabledDate(props.parsedValue.toDate())\n})\nconst onConfirm = () => {\n  if (isMultipleType.value) {\n    emit(props.parsedValue as Dayjs[])\n  } else {\n    // deal with the scenario where: user opens the date time picker, then confirm without doing anything\n    let result = extractFirst(props.parsedValue)\n    if (!result) {\n      const defaultTimeD = dayjs(defaultTime).locale(lang.value)\n      const defaultValueD = getDefaultValue()\n      result = defaultTimeD\n        .year(defaultValueD.year())\n        .month(defaultValueD.month())\n        .date(defaultValueD.date())\n    }\n    innerDate.value = result\n    emit(result)\n  }\n}\n\nconst disabledNow = computed(() => {\n  if (!disabledDate) return false\n  return disabledDate(dayjs().locale(lang.value).toDate())\n})\nconst changeToNow = () => {\n  // NOTE: not a permanent solution\n  //       consider disable \"now\" button in the future\n  const now = dayjs().locale(lang.value)\n  const nowDate = now.toDate()\n  isChangeToNow.value = true\n  if (\n    (!disabledDate || !disabledDate(nowDate)) &&\n    checkDateWithinRange(nowDate)\n  ) {\n    innerDate.value = dayjs().locale(lang.value)\n    emit(innerDate.value)\n  }\n}\n\nconst timeFormat = computed(() => {\n  return (\n    props.timeFormat || extractTimeFormat(props.format) || DEFAULT_FORMATS_TIME\n  )\n})\n\nconst dateFormat = computed(() => {\n  return (\n    props.dateFormat || extractDateFormat(props.format) || DEFAULT_FORMATS_DATE\n  )\n})\n\nconst visibleTime = computed(() => {\n  if (userInputTime.value) return userInputTime.value\n  if (!props.parsedValue && !defaultValue.value) return\n  const dateValue = extractFirst(props.parsedValue) || innerDate.value\n  return dateValue.format(timeFormat.value)\n})\n\nconst visibleDate = computed(() => {\n  if (userInputDate.value) return userInputDate.value\n  if (!props.parsedValue && !defaultValue.value) return\n  const dateValue = extractFirst(props.parsedValue) || innerDate.value\n  return dateValue.format(dateFormat.value)\n})\n\nconst timePickerVisible = ref(false)\nconst onTimePickerInputFocus = () => {\n  timePickerVisible.value = true\n}\nconst handleTimePickClose = () => {\n  timePickerVisible.value = false\n}\n\nconst getUnits = (date: Dayjs) => {\n  return {\n    hour: date.hour(),\n    minute: date.minute(),\n    second: date.second(),\n    year: date.year(),\n    month: date.month(),\n    date: date.date(),\n  }\n}\n\nconst handleTimePick = (value: Dayjs, visible: boolean, first: boolean) => {\n  const { hour, minute, second } = getUnits(value)\n  const parsedDateValue = extractFirst(props.parsedValue)\n  const newDate = parsedDateValue\n    ? parsedDateValue.hour(hour).minute(minute).second(second)\n    : value\n  innerDate.value = newDate\n  emit(innerDate.value, true)\n  if (!first) {\n    timePickerVisible.value = visible\n  }\n}\n\nconst handleVisibleTimeChange = (value: string) => {\n  const newDate = dayjs(value, timeFormat.value).locale(lang.value)\n  if (newDate.isValid() && checkDateWithinRange(newDate)) {\n    const { year, month, date } = getUnits(innerDate.value)\n    innerDate.value = newDate.year(year).month(month).date(date)\n    userInputTime.value = null\n    timePickerVisible.value = false\n    emit(innerDate.value, true)\n  }\n}\n\nconst handleVisibleDateChange = (value: string) => {\n  const newDate = correctlyParseUserInput(\n    value,\n    dateFormat.value,\n    lang.value,\n    isDefaultFormat\n  ) as Dayjs\n  if (newDate.isValid()) {\n    if (disabledDate && disabledDate(newDate.toDate())) {\n      return\n    }\n    const { hour, minute, second } = getUnits(innerDate.value)\n    innerDate.value = newDate.hour(hour).minute(minute).second(second)\n    userInputDate.value = null\n    emit(innerDate.value, true)\n  }\n}\n\nconst isValidValue = (date: unknown) => {\n  return (\n    dayjs.isDayjs(date) &&\n    date.isValid() &&\n    (disabledDate ? !disabledDate(date.toDate()) : true)\n  )\n}\n\nconst parseUserInput = (value: Dayjs) => {\n  return correctlyParseUserInput(\n    value,\n    props.format,\n    lang.value,\n    isDefaultFormat\n  )\n}\n\nconst getDefaultValue = () => {\n  const parseDate = dayjs(defaultValue.value).locale(lang.value)\n  if (!defaultValue.value) {\n    const defaultTimeDValue = defaultTimeD.value\n    return dayjs()\n      .hour(defaultTimeDValue.hour())\n      .minute(defaultTimeDValue.minute())\n      .second(defaultTimeDValue.second())\n      .locale(lang.value)\n  }\n  return parseDate\n}\n\nconst handleFocusPicker = () => {\n  if (['week', 'month', 'year', 'date'].includes(selectionMode.value)) {\n    currentViewRef.value?.focus()\n  }\n}\n\nconst _handleFocusPicker = () => {\n  handleFocusPicker()\n  // TODO: After focus the date input, the first time you use the ArrowDown keys, you cannot focus on the date cell\n  if (selectionMode.value === 'week') {\n    handleKeyControl(EVENT_CODE.down)\n  }\n}\n\nconst handleKeydownTable = (event: KeyboardEvent) => {\n  const code = getEventCode(event)\n\n  const validCode = [\n    EVENT_CODE.up,\n    EVENT_CODE.down,\n    EVENT_CODE.left,\n    EVENT_CODE.right,\n    EVENT_CODE.home,\n    EVENT_CODE.end,\n    EVENT_CODE.pageUp,\n    EVENT_CODE.pageDown,\n  ]\n  if (validCode.includes(code)) {\n    handleKeyControl(code)\n    event.stopPropagation()\n    event.preventDefault()\n  }\n  if (\n    [EVENT_CODE.enter, EVENT_CODE.space, EVENT_CODE.numpadEnter].includes(\n      code\n    ) &&\n    userInputDate.value === null &&\n    userInputTime.value === null\n  ) {\n    event.preventDefault()\n    emit(innerDate.value, false)\n  }\n}\n\nconst handleKeyControl = (code: string) => {\n  type KeyControlMappingCallableOffset = (date: Date, step?: number) => number\n  type KeyControl = {\n    [key: string]:\n      | number\n      | KeyControlMappingCallableOffset\n      | ((date: Date, step: number) => any)\n    offset: (date: Date, step: number) => any\n  }\n  interface KeyControlMapping {\n    [key: string]: KeyControl\n  }\n\n  const { up, down, left, right, home, end, pageUp, pageDown } = EVENT_CODE\n  const mapping: KeyControlMapping = {\n    year: {\n      [up]: -4,\n      [down]: 4,\n      [left]: -1,\n      [right]: 1,\n      offset: (date: Date, step: number) =>\n        date.setFullYear(date.getFullYear() + step),\n    },\n    month: {\n      [up]: -4,\n      [down]: 4,\n      [left]: -1,\n      [right]: 1,\n      offset: (date: Date, step: number) =>\n        date.setMonth(date.getMonth() + step),\n    },\n    week: {\n      [up]: -1,\n      [down]: 1,\n      [left]: -1,\n      [right]: 1,\n      offset: (date: Date, step: number) =>\n        date.setDate(date.getDate() + step * 7),\n    },\n    date: {\n      [up]: -7,\n      [down]: 7,\n      [left]: -1,\n      [right]: 1,\n      [home]: (date: Date) => -date.getDay(),\n      [end]: (date: Date) => -date.getDay() + 6,\n      [pageUp]: (date: Date) =>\n        -new Date(date.getFullYear(), date.getMonth(), 0).getDate(),\n      [pageDown]: (date: Date) =>\n        new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(),\n      offset: (date: Date, step: number) => date.setDate(date.getDate() + step),\n    },\n  }\n\n  const newDate = innerDate.value.toDate()\n  while (Math.abs(innerDate.value.diff(newDate, 'year', true)) < 1) {\n    const map = mapping[keyboardMode.value]\n    if (!map) return\n    map.offset(\n      newDate,\n      isFunction(map[code])\n        ? (map[code] as unknown as KeyControlMappingCallableOffset)(newDate)\n        : ((map[code] as number) ?? 0)\n    )\n    if (disabledDate && disabledDate(newDate)) {\n      break\n    }\n    const result = dayjs(newDate).locale(lang.value)\n    innerDate.value = result\n    contextEmit('pick', result, true)\n    break\n  }\n}\n\nconst handlePanelChange = (mode: 'month' | 'year') => {\n  contextEmit('panel-change', innerDate.value.toDate(), mode, currentView.value)\n}\n\nwatch(\n  () => selectionMode.value,\n  (val) => {\n    if (['month', 'year'].includes(val)) {\n      currentView.value = val\n      return\n    } else if (val === 'years') {\n      currentView.value = 'year'\n      return\n    } else if (val === 'months') {\n      currentView.value = 'month'\n      return\n    }\n    currentView.value = 'date'\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => defaultValue.value,\n  (val) => {\n    if (val) {\n      innerDate.value = getDefaultValue()\n    }\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => props.parsedValue,\n  (val) => {\n    if (val) {\n      if (isMultipleType.value) return\n      if (isArray(val)) return\n      innerDate.value = val\n    } else {\n      innerDate.value = getDefaultValue()\n    }\n  },\n  { immediate: true }\n)\n\ncontextEmit('set-picker-option', ['isValidValue', isValidValue])\ncontextEmit('set-picker-option', ['parseUserInput', parseUserInput])\ncontextEmit('set-picker-option', ['handleFocusPicker', _handleFocusPicker])\n</script>\n"],"mappings":""}