@element-plus/nightly 0.0.20260410 → 0.0.20260412

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

@@ -1 +1 @@
-{"version":3,"file":"panel-month-range.js","names":[],"sources":["../../../../../../../packages/components/date-picker-panel/src/date-picker-com/panel-month-range.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      ppNs.b(),\n      drpNs.b(),\n      ppNs.is('border', border),\n      ppNs.is('disabled', monthRangeDisabled),\n      {\n        'has-sidebar': Boolean($slots.sidebar) || hasShortcuts,\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          :class=\"ppNs.e('shortcut')\"\n          :disabled=\"monthRangeDisabled\"\n          @click=\"handleShortcutClick(shortcut)\"\n        >\n          {{ shortcut.text }}\n        </button>\n      </div>\n      <div :class=\"ppNs.e('body')\">\n        <div :class=\"[ppNs.e('content'), drpNs.e('content')]\" class=\"is-left\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              type=\"button\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"d-arrow-left\"\n              :disabled=\"monthRangeDisabled\"\n              @click=\"leftPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || monthRangeDisabled\"\n              :class=\"[\n                ppNs.e('icon-btn'),\n                ppNs.is('disabled', !enableYearArrow || monthRangeDisabled),\n              ]\"\n              class=\"d-arrow-right\"\n              @click=\"leftNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ leftLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"leftDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"monthRangeDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div :class=\"[ppNs.e('content'), drpNs.e('content')]\" class=\"is-right\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || monthRangeDisabled\"\n              :class=\"[\n                ppNs.e('icon-btn'),\n                ppNs.is('disabled', !enableYearArrow || monthRangeDisabled),\n              ]\"\n              class=\"d-arrow-left\"\n              @click=\"rightPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              type=\"button\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"d-arrow-right\"\n              :disabled=\"monthRangeDisabled\"\n              @click=\"rightNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ rightLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"rightDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"monthRangeDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, ref, toRef, unref, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'\nimport { PICKER_BASE_INJECTION_KEY } from '@element-plus/components/time-picker'\nimport {\n  correctlyParseUserInput,\n  getDefaultValue,\n  isValidRange,\n} from '../utils'\nimport {\n  panelMonthRangeEmits,\n  panelMonthRangeProps,\n} from '../props/panel-month-range'\nimport { useMonthRangeHeader } from '../composables/use-month-range-header'\nimport { useRangePicker } from '../composables/use-range-picker'\nimport { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants'\nimport MonthTable from './basic-month-table.vue'\nimport { useFormDisabled } from '@element-plus/components/form'\n\nimport type { Dayjs } from 'dayjs'\n\ndefineOptions({\n  name: 'DatePickerMonthRange',\n})\n\nconst props = defineProps(panelMonthRangeProps)\nconst emit = defineEmits(panelMonthRangeEmits)\nconst unit = 'year'\n\nconst { 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 } = pickerBase.props\nconst format = toRef(pickerBase.props, 'format')\nconst defaultValue = toRef(pickerBase.props, 'defaultValue')\nconst leftDate = ref(dayjs().locale(lang.value))\nconst rightDate = ref(dayjs().locale(lang.value).add(1, unit))\n\nconst {\n  minDate,\n  maxDate,\n  rangeState,\n  ppNs,\n  drpNs,\n\n  handleChangeRange,\n  handleRangeConfirm,\n  handleShortcutClick,\n  onSelect,\n  parseValue,\n} = useRangePicker(props, {\n  defaultValue,\n  leftDate,\n  rightDate,\n  unit,\n  sortDates,\n})\n\nconst hasShortcuts = computed(() => !!shortcuts.length)\n\nconst {\n  leftPrevYear,\n  rightNextYear,\n  leftNextYear,\n  rightPrevYear,\n  leftLabel,\n  rightLabel,\n  leftYear,\n  rightYear,\n} = useMonthRangeHeader({\n  unlinkPanels: toRef(props, 'unlinkPanels'),\n  leftDate,\n  rightDate,\n})\n\nconst enableYearArrow = computed(() => {\n  return props.unlinkPanels && rightYear.value > leftYear.value + 1\n})\n\ntype RangePickValue = {\n  minDate: Dayjs\n  maxDate: Dayjs\n}\n\nconst handleRangePick = (val: RangePickValue, close = true) => {\n  // const defaultTime = props.defaultTime || []\n  // const minDate_ = modifyWithTimeString(val.minDate, defaultTime[0])\n  // const maxDate_ = modifyWithTimeString(val.maxDate, defaultTime[1])\n  // todo\n  const minDate_ = val.minDate\n  const maxDate_ = val.maxDate\n  if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n    return\n  }\n  emit('calendar-change', [minDate_.toDate(), maxDate_ && maxDate_.toDate()])\n  maxDate.value = maxDate_\n  minDate.value = minDate_\n\n  if (!close) return\n  handleRangeConfirm()\n}\n\nconst handleClear = () => {\n  let valueOnClear = null\n  if (pickerBase?.emptyValues) {\n    valueOnClear = pickerBase.emptyValues.valueOnClear.value\n  }\n  leftDate.value = getDefaultValue(unref(defaultValue), {\n    lang: unref(lang),\n    unit: 'year',\n    unlinkPanels: props.unlinkPanels,\n  })[0]\n  rightDate.value = leftDate.value.add(1, 'year')\n  emit('pick', valueOnClear)\n}\n\nconst parseUserInput = (value: Dayjs | Dayjs[]) => {\n  return correctlyParseUserInput(\n    value,\n    format.value,\n    lang.value,\n    isDefaultFormat\n  )\n}\n\nfunction sortDates(minDate: Dayjs | undefined, maxDate: Dayjs | undefined) {\n  if (props.unlinkPanels && maxDate) {\n    const minDateYear = minDate?.year() || 0\n    const maxDateYear = maxDate.year()\n    rightDate.value =\n      minDateYear === maxDateYear ? maxDate.add(1, unit) : maxDate\n  } else {\n    rightDate.value = leftDate.value.add(1, unit)\n  }\n}\n\nconst monthRangeDisabled = useFormDisabled()\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible && rangeState.value.selecting) {\n      parseValue(props.parsedValue)\n      onSelect(false)\n    }\n  }\n)\n\nemit('set-picker-option', ['isValidValue', isValidRange])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleClear', handleClear])\n</script>\n"],"mappings":""}
+{"version":3,"file":"panel-month-range.js","names":[],"sources":["../../../../../../../packages/components/date-picker-panel/src/date-picker-com/panel-month-range.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      ppNs.b(),\n      drpNs.b(),\n      ppNs.is('border', border),\n      ppNs.is('disabled', monthRangeDisabled),\n      {\n        'has-sidebar': Boolean($slots.sidebar) || hasShortcuts,\n        'single-panel': singlePanel,\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          :class=\"ppNs.e('shortcut')\"\n          :disabled=\"monthRangeDisabled\"\n          @click=\"handleShortcutClick(shortcut)\"\n        >\n          {{ shortcut.text }}\n        </button>\n      </div>\n      <div :class=\"ppNs.e('body')\">\n        <div\n          :class=\"[\n            ppNs.e('content'),\n            drpNs.e('content'),\n            drpNs.is('left', !singlePanel),\n          ]\"\n        >\n          <div :class=\"drpNs.e('header')\">\n            <button\n              type=\"button\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"d-arrow-left\"\n              :disabled=\"monthRangeDisabled\"\n              @click=\"leftPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              v-if=\"unlinkPanels || singlePanel\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || monthRangeDisabled\"\n              :class=\"[\n                ppNs.e('icon-btn'),\n                ppNs.is('disabled', !enableYearArrow || monthRangeDisabled),\n              ]\"\n              class=\"d-arrow-right\"\n              @click=\"leftNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ leftLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"leftDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"monthRangeDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div\n          v-if=\"!singlePanel\"\n          :class=\"[ppNs.e('content'), drpNs.e('content')]\"\n          class=\"is-right\"\n        >\n          <div :class=\"drpNs.e('header')\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || monthRangeDisabled\"\n              :class=\"[\n                ppNs.e('icon-btn'),\n                ppNs.is('disabled', !enableYearArrow || monthRangeDisabled),\n              ]\"\n              class=\"d-arrow-left\"\n              @click=\"rightPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              type=\"button\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"d-arrow-right\"\n              :disabled=\"monthRangeDisabled\"\n              @click=\"rightNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ rightLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"rightDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"monthRangeDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, ref, toRef, unref, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'\nimport { PICKER_BASE_INJECTION_KEY } from '@element-plus/components/time-picker'\nimport {\n  correctlyParseUserInput,\n  getDefaultValue,\n  isValidRange,\n} from '../utils'\nimport {\n  panelMonthRangeEmits,\n  panelMonthRangeProps,\n} from '../props/panel-month-range'\nimport { useMonthRangeHeader } from '../composables/use-month-range-header'\nimport { useRangePicker } from '../composables/use-range-picker'\nimport { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants'\nimport MonthTable from './basic-month-table.vue'\nimport { useFormDisabled } from '@element-plus/components/form'\n\nimport type { Dayjs } from 'dayjs'\n\ndefineOptions({\n  name: 'DatePickerMonthRange',\n})\n\nconst props = defineProps(panelMonthRangeProps)\nconst emit = defineEmits(panelMonthRangeEmits)\nconst unit = 'year'\n\nconst { 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 } = pickerBase.props\nconst format = toRef(pickerBase.props, 'format')\nconst defaultValue = toRef(pickerBase.props, 'defaultValue')\nconst leftDate = ref(dayjs().locale(lang.value))\nconst rightDate = ref(dayjs().locale(lang.value).add(1, unit))\n\nconst {\n  minDate,\n  maxDate,\n  rangeState,\n  ppNs,\n  drpNs,\n\n  handleChangeRange,\n  handleRangeConfirm,\n  handleShortcutClick,\n  onSelect,\n  parseValue,\n} = useRangePicker(props, {\n  defaultValue,\n  leftDate,\n  rightDate,\n  unit,\n  sortDates,\n})\n\nconst hasShortcuts = computed(() => !!shortcuts.length)\n\nconst {\n  leftPrevYear,\n  rightNextYear,\n  leftNextYear,\n  rightPrevYear,\n  leftLabel,\n  rightLabel,\n  leftYear,\n  rightYear,\n} = useMonthRangeHeader({\n  unlinkPanels: toRef(props, 'unlinkPanels'),\n  leftDate,\n  rightDate,\n})\n\nconst enableYearArrow = computed(() => {\n  return (\n    props.singlePanel ||\n    (props.unlinkPanels && rightYear.value > leftYear.value + 1)\n  )\n})\n\ntype RangePickValue = {\n  minDate: Dayjs\n  maxDate: Dayjs\n}\n\nconst handleRangePick = (val: RangePickValue, close = true) => {\n  // const defaultTime = props.defaultTime || []\n  // const minDate_ = modifyWithTimeString(val.minDate, defaultTime[0])\n  // const maxDate_ = modifyWithTimeString(val.maxDate, defaultTime[1])\n  // todo\n  const minDate_ = val.minDate\n  const maxDate_ = val.maxDate\n  if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n    return\n  }\n  emit('calendar-change', [minDate_.toDate(), maxDate_ && maxDate_.toDate()])\n  maxDate.value = maxDate_\n  minDate.value = minDate_\n\n  if (!close) return\n  handleRangeConfirm()\n}\n\nconst handleClear = () => {\n  let valueOnClear = null\n  if (pickerBase?.emptyValues) {\n    valueOnClear = pickerBase.emptyValues.valueOnClear.value\n  }\n  leftDate.value = getDefaultValue(unref(defaultValue), {\n    lang: unref(lang),\n    unit: 'year',\n    unlinkPanels: props.unlinkPanels,\n  })[0]\n  rightDate.value = leftDate.value.add(1, 'year')\n  emit('pick', valueOnClear)\n}\n\nconst parseUserInput = (value: Dayjs | Dayjs[]) => {\n  return correctlyParseUserInput(\n    value,\n    format.value,\n    lang.value,\n    isDefaultFormat\n  )\n}\n\nfunction sortDates(minDate: Dayjs | undefined, maxDate: Dayjs | undefined) {\n  if (props.unlinkPanels && maxDate) {\n    const minDateYear = minDate?.year() || 0\n    const maxDateYear = maxDate.year()\n    rightDate.value =\n      minDateYear === maxDateYear ? maxDate.add(1, unit) : maxDate\n  } else {\n    rightDate.value = leftDate.value.add(1, unit)\n  }\n}\n\nconst monthRangeDisabled = useFormDisabled()\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible && rangeState.value.selecting) {\n      parseValue(props.parsedValue)\n      onSelect(false)\n    }\n  }\n)\n\nemit('set-picker-option', ['isValidValue', isValidRange])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleClear', handleClear])\n</script>\n"],"mappings":""}

package/lib/components/date-picker-panel/src/date-picker-com/panel-month-range.vue_vue_type_script_setup_true_lang.js

@@ -51,7 +51,7 @@ var panel_month_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			rightDate
 		});
 		const enableYearArrow = (0, vue.computed)(() => {
-			return props.unlinkPanels && rightYear.value > leftYear.value + 1;
+			return props.singlePanel || props.unlinkPanels && rightYear.value > leftYear.value + 1;
 		});
 		const handleRangePick = (val, close = true) => {
 			const minDate_ = val.minDate;
@@ -97,7 +97,10 @@ var panel_month_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				(0, vue.unref)(drpNs).b(),
 				(0, vue.unref)(ppNs).is("border", _ctx.border),
 				(0, vue.unref)(ppNs).is("disabled", (0, vue.unref)(monthRangeDisabled)),
-				{ "has-sidebar": Boolean(_ctx.$slots.sidebar) || hasShortcuts.value }
+				{
+					"has-sidebar": Boolean(_ctx.$slots.sidebar) || hasShortcuts.value,
+					"single-panel": _ctx.singlePanel
+				}
 			]) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("body-wrapper")) }, [
 				(0, vue.renderSlot)(_ctx.$slots, "sidebar", { class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("sidebar")) }),
 				hasShortcuts.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -112,7 +115,11 @@ var panel_month_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						onClick: ($event) => (0, vue.unref)(handleShortcutClick)(shortcut)
 					}, (0, vue.toDisplayString)(shortcut.text), 11, _hoisted_1);
 				}), 128))], 2)) : (0, vue.createCommentVNode)("v-if", true),
-				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("body")) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)([[(0, vue.unref)(ppNs).e("content"), (0, vue.unref)(drpNs).e("content")], "is-left"]) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("header")) }, [
+				(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ppNs).e("body")) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)([
+					(0, vue.unref)(ppNs).e("content"),
+					(0, vue.unref)(drpNs).e("content"),
+					(0, vue.unref)(drpNs).is("left", !_ctx.singlePanel)
+				]) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("header")) }, [
 					(0, vue.createElementVNode)("button", {
 						type: "button",
 						class: (0, vue.normalizeClass)([(0, vue.unref)(ppNs).e("icon-btn"), "d-arrow-left"]),
@@ -122,7 +129,7 @@ var panel_month_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.DArrowLeft))]),
 						_: 1
 					})])], 10, _hoisted_2),
-					_ctx.unlinkPanels ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+					_ctx.unlinkPanels || _ctx.singlePanel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 						key: 0,
 						type: "button",
 						disabled: !enableYearArrow.value || (0, vue.unref)(monthRangeDisabled),
@@ -155,7 +162,10 @@ var panel_month_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					"cell-class-name",
 					"onChangerange",
 					"onSelect"
-				])], 2), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)([[(0, vue.unref)(ppNs).e("content"), (0, vue.unref)(drpNs).e("content")], "is-right"]) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("header")) }, [
+				])], 2), !_ctx.singlePanel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: 0,
+					class: (0, vue.normalizeClass)([[(0, vue.unref)(ppNs).e("content"), (0, vue.unref)(drpNs).e("content")], "is-right"])
+				}, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("header")) }, [
 					_ctx.unlinkPanels ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 						key: 0,
 						type: "button",
@@ -198,7 +208,7 @@ var panel_month_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					"cell-class-name",
 					"onChangerange",
 					"onSelect"
-				])], 2)], 2)
+				])], 2)) : (0, vue.createCommentVNode)("v-if", true)], 2)
 			], 2)], 2);
 		};
 	}

package/lib/components/date-picker-panel/src/date-picker-com/panel-month-range.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel-month-range.vue_vue_type_script_setup_true_lang.js","names":["border","$slots","unlinkPanels"],"sources":["../../../../../../../packages/components/date-picker-panel/src/date-picker-com/panel-month-range.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      ppNs.b(),\n      drpNs.b(),\n      ppNs.is('border', border),\n      ppNs.is('disabled', monthRangeDisabled),\n      {\n        'has-sidebar': Boolean($slots.sidebar) || hasShortcuts,\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          :class=\"ppNs.e('shortcut')\"\n          :disabled=\"monthRangeDisabled\"\n          @click=\"handleShortcutClick(shortcut)\"\n        >\n          {{ shortcut.text }}\n        </button>\n      </div>\n      <div :class=\"ppNs.e('body')\">\n        <div :class=\"[ppNs.e('content'), drpNs.e('content')]\" class=\"is-left\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              type=\"button\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"d-arrow-left\"\n              :disabled=\"monthRangeDisabled\"\n              @click=\"leftPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || monthRangeDisabled\"\n              :class=\"[\n                ppNs.e('icon-btn'),\n                ppNs.is('disabled', !enableYearArrow || monthRangeDisabled),\n              ]\"\n              class=\"d-arrow-right\"\n              @click=\"leftNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ leftLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"leftDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"monthRangeDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div :class=\"[ppNs.e('content'), drpNs.e('content')]\" class=\"is-right\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || monthRangeDisabled\"\n              :class=\"[\n                ppNs.e('icon-btn'),\n                ppNs.is('disabled', !enableYearArrow || monthRangeDisabled),\n              ]\"\n              class=\"d-arrow-left\"\n              @click=\"rightPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              type=\"button\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"d-arrow-right\"\n              :disabled=\"monthRangeDisabled\"\n              @click=\"rightNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ rightLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"rightDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"monthRangeDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, ref, toRef, unref, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'\nimport { PICKER_BASE_INJECTION_KEY } from '@element-plus/components/time-picker'\nimport {\n  correctlyParseUserInput,\n  getDefaultValue,\n  isValidRange,\n} from '../utils'\nimport {\n  panelMonthRangeEmits,\n  panelMonthRangeProps,\n} from '../props/panel-month-range'\nimport { useMonthRangeHeader } from '../composables/use-month-range-header'\nimport { useRangePicker } from '../composables/use-range-picker'\nimport { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants'\nimport MonthTable from './basic-month-table.vue'\nimport { useFormDisabled } from '@element-plus/components/form'\n\nimport type { Dayjs } from 'dayjs'\n\ndefineOptions({\n  name: 'DatePickerMonthRange',\n})\n\nconst props = defineProps(panelMonthRangeProps)\nconst emit = defineEmits(panelMonthRangeEmits)\nconst unit = 'year'\n\nconst { 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 } = pickerBase.props\nconst format = toRef(pickerBase.props, 'format')\nconst defaultValue = toRef(pickerBase.props, 'defaultValue')\nconst leftDate = ref(dayjs().locale(lang.value))\nconst rightDate = ref(dayjs().locale(lang.value).add(1, unit))\n\nconst {\n  minDate,\n  maxDate,\n  rangeState,\n  ppNs,\n  drpNs,\n\n  handleChangeRange,\n  handleRangeConfirm,\n  handleShortcutClick,\n  onSelect,\n  parseValue,\n} = useRangePicker(props, {\n  defaultValue,\n  leftDate,\n  rightDate,\n  unit,\n  sortDates,\n})\n\nconst hasShortcuts = computed(() => !!shortcuts.length)\n\nconst {\n  leftPrevYear,\n  rightNextYear,\n  leftNextYear,\n  rightPrevYear,\n  leftLabel,\n  rightLabel,\n  leftYear,\n  rightYear,\n} = useMonthRangeHeader({\n  unlinkPanels: toRef(props, 'unlinkPanels'),\n  leftDate,\n  rightDate,\n})\n\nconst enableYearArrow = computed(() => {\n  return props.unlinkPanels && rightYear.value > leftYear.value + 1\n})\n\ntype RangePickValue = {\n  minDate: Dayjs\n  maxDate: Dayjs\n}\n\nconst handleRangePick = (val: RangePickValue, close = true) => {\n  // const defaultTime = props.defaultTime || []\n  // const minDate_ = modifyWithTimeString(val.minDate, defaultTime[0])\n  // const maxDate_ = modifyWithTimeString(val.maxDate, defaultTime[1])\n  // todo\n  const minDate_ = val.minDate\n  const maxDate_ = val.maxDate\n  if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n    return\n  }\n  emit('calendar-change', [minDate_.toDate(), maxDate_ && maxDate_.toDate()])\n  maxDate.value = maxDate_\n  minDate.value = minDate_\n\n  if (!close) return\n  handleRangeConfirm()\n}\n\nconst handleClear = () => {\n  let valueOnClear = null\n  if (pickerBase?.emptyValues) {\n    valueOnClear = pickerBase.emptyValues.valueOnClear.value\n  }\n  leftDate.value = getDefaultValue(unref(defaultValue), {\n    lang: unref(lang),\n    unit: 'year',\n    unlinkPanels: props.unlinkPanels,\n  })[0]\n  rightDate.value = leftDate.value.add(1, 'year')\n  emit('pick', valueOnClear)\n}\n\nconst parseUserInput = (value: Dayjs | Dayjs[]) => {\n  return correctlyParseUserInput(\n    value,\n    format.value,\n    lang.value,\n    isDefaultFormat\n  )\n}\n\nfunction sortDates(minDate: Dayjs | undefined, maxDate: Dayjs | undefined) {\n  if (props.unlinkPanels && maxDate) {\n    const minDateYear = minDate?.year() || 0\n    const maxDateYear = maxDate.year()\n    rightDate.value =\n      minDateYear === maxDateYear ? maxDate.add(1, unit) : maxDate\n  } else {\n    rightDate.value = leftDate.value.add(1, unit)\n  }\n}\n\nconst monthRangeDisabled = useFormDisabled()\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible && rangeState.value.selecting) {\n      parseValue(props.parsedValue)\n      onSelect(false)\n    }\n  }\n)\n\nemit('set-picker-option', ['isValidValue', isValidRange])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleClear', handleClear])\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"panel-month-range.vue_vue_type_script_setup_true_lang.js","names":["border","$slots","singlePanel","unlinkPanels"],"sources":["../../../../../../../packages/components/date-picker-panel/src/date-picker-com/panel-month-range.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      ppNs.b(),\n      drpNs.b(),\n      ppNs.is('border', border),\n      ppNs.is('disabled', monthRangeDisabled),\n      {\n        'has-sidebar': Boolean($slots.sidebar) || hasShortcuts,\n        'single-panel': singlePanel,\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          :class=\"ppNs.e('shortcut')\"\n          :disabled=\"monthRangeDisabled\"\n          @click=\"handleShortcutClick(shortcut)\"\n        >\n          {{ shortcut.text }}\n        </button>\n      </div>\n      <div :class=\"ppNs.e('body')\">\n        <div\n          :class=\"[\n            ppNs.e('content'),\n            drpNs.e('content'),\n            drpNs.is('left', !singlePanel),\n          ]\"\n        >\n          <div :class=\"drpNs.e('header')\">\n            <button\n              type=\"button\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"d-arrow-left\"\n              :disabled=\"monthRangeDisabled\"\n              @click=\"leftPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              v-if=\"unlinkPanels || singlePanel\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || monthRangeDisabled\"\n              :class=\"[\n                ppNs.e('icon-btn'),\n                ppNs.is('disabled', !enableYearArrow || monthRangeDisabled),\n              ]\"\n              class=\"d-arrow-right\"\n              @click=\"leftNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ leftLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"leftDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"monthRangeDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div\n          v-if=\"!singlePanel\"\n          :class=\"[ppNs.e('content'), drpNs.e('content')]\"\n          class=\"is-right\"\n        >\n          <div :class=\"drpNs.e('header')\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || monthRangeDisabled\"\n              :class=\"[\n                ppNs.e('icon-btn'),\n                ppNs.is('disabled', !enableYearArrow || monthRangeDisabled),\n              ]\"\n              class=\"d-arrow-left\"\n              @click=\"rightPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              type=\"button\"\n              :class=\"ppNs.e('icon-btn')\"\n              class=\"d-arrow-right\"\n              :disabled=\"monthRangeDisabled\"\n              @click=\"rightNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ rightLabel }}</div>\n          </div>\n          <month-table\n            selection-mode=\"range\"\n            :date=\"rightDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"monthRangeDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, ref, toRef, unref, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'\nimport { PICKER_BASE_INJECTION_KEY } from '@element-plus/components/time-picker'\nimport {\n  correctlyParseUserInput,\n  getDefaultValue,\n  isValidRange,\n} from '../utils'\nimport {\n  panelMonthRangeEmits,\n  panelMonthRangeProps,\n} from '../props/panel-month-range'\nimport { useMonthRangeHeader } from '../composables/use-month-range-header'\nimport { useRangePicker } from '../composables/use-range-picker'\nimport { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants'\nimport MonthTable from './basic-month-table.vue'\nimport { useFormDisabled } from '@element-plus/components/form'\n\nimport type { Dayjs } from 'dayjs'\n\ndefineOptions({\n  name: 'DatePickerMonthRange',\n})\n\nconst props = defineProps(panelMonthRangeProps)\nconst emit = defineEmits(panelMonthRangeEmits)\nconst unit = 'year'\n\nconst { 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 } = pickerBase.props\nconst format = toRef(pickerBase.props, 'format')\nconst defaultValue = toRef(pickerBase.props, 'defaultValue')\nconst leftDate = ref(dayjs().locale(lang.value))\nconst rightDate = ref(dayjs().locale(lang.value).add(1, unit))\n\nconst {\n  minDate,\n  maxDate,\n  rangeState,\n  ppNs,\n  drpNs,\n\n  handleChangeRange,\n  handleRangeConfirm,\n  handleShortcutClick,\n  onSelect,\n  parseValue,\n} = useRangePicker(props, {\n  defaultValue,\n  leftDate,\n  rightDate,\n  unit,\n  sortDates,\n})\n\nconst hasShortcuts = computed(() => !!shortcuts.length)\n\nconst {\n  leftPrevYear,\n  rightNextYear,\n  leftNextYear,\n  rightPrevYear,\n  leftLabel,\n  rightLabel,\n  leftYear,\n  rightYear,\n} = useMonthRangeHeader({\n  unlinkPanels: toRef(props, 'unlinkPanels'),\n  leftDate,\n  rightDate,\n})\n\nconst enableYearArrow = computed(() => {\n  return (\n    props.singlePanel ||\n    (props.unlinkPanels && rightYear.value > leftYear.value + 1)\n  )\n})\n\ntype RangePickValue = {\n  minDate: Dayjs\n  maxDate: Dayjs\n}\n\nconst handleRangePick = (val: RangePickValue, close = true) => {\n  // const defaultTime = props.defaultTime || []\n  // const minDate_ = modifyWithTimeString(val.minDate, defaultTime[0])\n  // const maxDate_ = modifyWithTimeString(val.maxDate, defaultTime[1])\n  // todo\n  const minDate_ = val.minDate\n  const maxDate_ = val.maxDate\n  if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n    return\n  }\n  emit('calendar-change', [minDate_.toDate(), maxDate_ && maxDate_.toDate()])\n  maxDate.value = maxDate_\n  minDate.value = minDate_\n\n  if (!close) return\n  handleRangeConfirm()\n}\n\nconst handleClear = () => {\n  let valueOnClear = null\n  if (pickerBase?.emptyValues) {\n    valueOnClear = pickerBase.emptyValues.valueOnClear.value\n  }\n  leftDate.value = getDefaultValue(unref(defaultValue), {\n    lang: unref(lang),\n    unit: 'year',\n    unlinkPanels: props.unlinkPanels,\n  })[0]\n  rightDate.value = leftDate.value.add(1, 'year')\n  emit('pick', valueOnClear)\n}\n\nconst parseUserInput = (value: Dayjs | Dayjs[]) => {\n  return correctlyParseUserInput(\n    value,\n    format.value,\n    lang.value,\n    isDefaultFormat\n  )\n}\n\nfunction sortDates(minDate: Dayjs | undefined, maxDate: Dayjs | undefined) {\n  if (props.unlinkPanels && maxDate) {\n    const minDateYear = minDate?.year() || 0\n    const maxDateYear = maxDate.year()\n    rightDate.value =\n      minDateYear === maxDateYear ? maxDate.add(1, unit) : maxDate\n  } else {\n    rightDate.value = leftDate.value.add(1, unit)\n  }\n}\n\nconst monthRangeDisabled = useFormDisabled()\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible && rangeState.value.selecting) {\n      parseValue(props.parsedValue)\n      onSelect(false)\n    }\n  }\n)\n\nemit('set-picker-option', ['isValidValue', isValidRange])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleClear', handleClear])\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiKA,MAAM,OAAO;;;;;;;EAFb,MAAM,QAAQ;EACd,MAAM,OAAO;EAGb,MAAM,EAAE,SAAS,yBAAU;EAC3B,MAAM,6BAAoB,4CAA0B;EACpD,MAAM,kCACJ,iEACA,OACD;EACD,MAAM,EAAE,WAAW,cAAc,kBAAkB,WAAW;EAC9D,MAAM,wBAAe,WAAW,OAAO,SAAQ;EAC/C,MAAM,8BAAqB,WAAW,OAAO,eAAc;EAC3D,MAAM,4CAAsB,CAAC,OAAO,KAAK,MAAM,CAAA;EAC/C,MAAM,6CAAuB,CAAC,OAAO,KAAK,MAAM,CAAC,IAAI,GAAG,KAAK,CAAA;EAE7D,MAAM,EACJ,SACA,SACA,YACA,MACA,OAEA,mBACA,oBACA,qBACA,UACA,eACE,wCAAe,OAAO;GACxB;GACA;GACA;GACA;GACA;GACD,CAAA;EAED,MAAM,uCAA8B,CAAC,CAAC,UAAU,OAAM;EAEtD,MAAM,EACJ,cACA,eACA,cACA,eACA,WACA,YACA,UACA,cACE,mDAAoB;GACtB,6BAAoB,OAAO,eAAe;GAC1C;GACA;GACD,CAAA;EAED,MAAM,0CAAiC;AACrC,UACE,MAAM,eACL,MAAM,gBAAgB,UAAU,QAAQ,SAAS,QAAQ;IAE7D;EAOD,MAAM,mBAAmB,KAAqB,QAAQ,SAAS;GAK7D,MAAM,WAAW,IAAI;GACrB,MAAM,WAAW,IAAI;AACrB,OAAI,QAAQ,UAAU,YAAY,QAAQ,UAAU,SAClD;AAEF,QAAK,mBAAmB,CAAC,SAAS,QAAQ,EAAE,YAAY,SAAS,QAAQ,CAAC,CAAA;AAC1E,WAAQ,QAAQ;AAChB,WAAQ,QAAQ;AAEhB,OAAI,CAAC,MAAO;AACZ,uBAAmB;;EAGrB,MAAM,oBAAoB;GACxB,IAAI,eAAe;AACnB,OAAI,YAAY,YACd,gBAAe,WAAW,YAAY,aAAa;AAErD,YAAS,QAAQ,6CAAsB,aAAa,EAAE;IACpD,qBAAY,KAAK;IACjB,MAAM;IACN,cAAc,MAAM;IACrB,CAAC,CAAC;AACH,aAAU,QAAQ,SAAS,MAAM,IAAI,GAAG,OAAM;AAC9C,QAAK,QAAQ,aAAY;;EAG3B,MAAM,kBAAkB,UAA2B;AACjD,UAAO,sCACL,OACA,OAAO,OACP,KAAK,OACL,gBACF;;EAGF,SAAS,UAAU,SAA4B,SAA4B;AACzE,OAAI,MAAM,gBAAgB,QAGxB,WAAU,SAFU,SAAS,MAAM,IAAI,OACnB,QAAQ,MAAK,GAED,QAAQ,IAAI,GAAG,KAAK,GAAG;OAEvD,WAAU,QAAQ,SAAS,MAAM,IAAI,GAAG,KAAI;;EAIhD,MAAM,qBAAqB,+CAAgB;AAE3C,uBACQ,MAAM,UACX,YAAY;AACX,OAAI,CAAC,WAAW,WAAW,MAAM,WAAW;AAC1C,eAAW,MAAM,YAAW;AAC5B,aAAS,MAAK;;IAGpB;AAEA,OAAK,qBAAqB,CAAC,gBAAgB,2BAAa,CAAA;AACxD,OAAK,qBAAqB,CAAC,kBAAkB,eAAe,CAAA;AAC5D,OAAK,qBAAqB,CAAC,eAAe,YAAY,CAAA;;4DAlK9C,OAAA,EA9HH,+BAAK;mBAAU,KAAI,CAAC,GAAC;mBAAU,MAAK,CAAC,GAAC;mBAAU,KAAI,CAAC,GAAE,UAAWA,KAAAA,OAAM;mBAAS,KAAI,CAAC,GAAE,2BAAa,mBAAkB,CAAA;;oBAAkC,QAAQC,KAAAA,OAAO,QAAO,IAAK,aAAA;qBAAsCC,KAAAA;;sCA6HrN,OAAA,EAlHA,8CAAO,KAAI,CAAC,EAAC,eAAA,CAAA;wBACiC,KAAA,QAAA,WAAA,EAA5B,8CAAO,KAAI,CAAC,EAAC,UAAA,CAAA;IACxB,aAAA,2DAWL,OAAA;;KAXoB,8CAAO,KAAI,CAAC,EAAC,UAAA,CAAA;+DAU5B,cAAA,yCARmB,UAAS,GAA3B,UAAU,QAAG;8DAQd,UAAA;MAPD;MACN,MAAK;MACJ,8CAAO,KAAI,CAAC,EAAC,WAAA,CAAA;MACb,yBAAU,mBAAkB;MAC5B,UAAK,0BAAE,oBAAmB,CAAC,SAAQ;iCAEjC,SAAS,KAAI,EAAA,IAAA,WAAA;;gCAsGd,OAAA,EAnGA,8CAAO,KAAI,CAAC,EAAC,OAAA,CAAA,iCAkDX,OAAA,EAhDH,+BAAK;oBAAgB,KAAI,CAAC,EAAC,UAAA;oBAAyB,MAAK,CAAC,EAAC,UAAA;oBAAyB,MAAK,CAAC,GAAE,QAAA,CAAUA,KAAAA,YAAW;uCAkC5G,OAAA,EA5BA,8CAAO,MAAK,CAAC,EAAC,SAAA,CAAA;iCAWT,UAAA;MATP,MAAK;MACJ,+BAAK,gBAAE,KAAI,CAAC,EAAC,WAAA,EACR,eAAc,CAAA;MACnB,yBAAU,mBAAkB;MAC5B,SAAK,OAAA,OAAA,OAAA,iCAAE,aAAA,mBAAA,aAAA,CAAA,GAAA,KAAY;6BAIb,KAAA,QAAA,aAAA,EAAA,QAAA,qCAD8B,uBAAA,EAAA,MAAA;sCAAV,qCAAA,mCAAA,CAAA;;;KAIrBC,KAAAA,gBAAgBD,KAAAA,iEAaf,UAAA;;MAZP,MAAK;MACJ,UAAQ,CAAG,gBAAA,wBAAmB,mBAAkB;MAChD,+BAAK,CAAA,gBAAoB,KAAI,CAAC,EAAC,WAAA,iBAA8B,KAAI,CAAC,GAAE,YAAA,CAAc,gBAAA,wBAAmB,mBAAkB,CAAA,GAIlH,gBAAe,CAAA;MACpB,SAAK,OAAA,OAAA,OAAA,iCAAE,aAAA,mBAAA,aAAA,CAAA,GAAA,KAAY;6BAIb,KAAA,QAAA,aAAA,EAAA,QAAA,qCAD+B,uBAAA,EAAA,MAAA;sCAAV,qCAAA,oCAAA,CAAA;;;iCAGJ,OAAA,8CAAlB,UAAS,CAAA,EAAA,EAAA;gCAcjB,mCAAA;KAXA,kBAAe;KACd,MAAM,SAAA;KACN,2BAAU,QAAO;KACjB,2BAAU,QAAO;KACjB,8BAAa,WAAU;KACvB,gCAAe,aAAY;KAC3B,yBAAU,mBAAkB;KAC5B,kCAAiB,cAAa;KAC9B,8BAAa,kBAAiB;KAC9B,QAAM;KACN,yBAAQ,SAAQ;;;;;;;;;;;cAIZA,KAAAA,iEA8CH,OAAA;;KA7CH,+BAAK,CAAA,gBAAG,KAAI,CAAC,EAAC,UAAA,iBAAa,MAAK,CAAC,EAAC,UAAA,CAAA,EAC7B,WAAU,CAAA;oCA8BV,OAAA,EA5BA,8CAAO,MAAK,CAAC,EAAC,SAAA,CAAA;KAEVC,KAAAA,kEAaC,UAAA;;MAZP,MAAK;MACJ,UAAQ,CAAG,gBAAA,wBAAmB,mBAAkB;MAChD,+BAAK,CAAA,gBAAoB,KAAI,CAAC,EAAC,WAAA,iBAA8B,KAAI,CAAC,GAAE,YAAA,CAAc,gBAAA,wBAAmB,mBAAkB,CAAA,GAIlH,eAAc,CAAA;MACnB,SAAK,OAAA,OAAA,OAAA,iCAAE,cAAA,mBAAA,cAAA,CAAA,GAAA,KAAa;6BAId,KAAA,QAAA,aAAA,EAAA,QAAA,qCAD8B,uBAAA,EAAA,MAAA;sCAAV,qCAAA,mCAAA,CAAA;;;iCAapB,UAAA;MATP,MAAK;MACJ,+BAAK,gBAAE,KAAI,CAAC,EAAC,WAAA,EACR,gBAAe,CAAA;MACpB,yBAAU,mBAAkB;MAC5B,SAAK,OAAA,OAAA,OAAA,iCAAE,cAAA,mBAAA,cAAA,CAAA,GAAA,KAAa;6BAId,KAAA,QAAA,aAAA,EAAA,QAAA,qCAD+B,uBAAA,EAAA,MAAA;sCAAV,qCAAA,oCAAA,CAAA;;;iCAGH,OAAA,8CAAnB,WAAU,CAAA,EAAA,EAAA;gCAclB,mCAAA;KAXA,kBAAe;KACd,MAAM,UAAA;KACN,2BAAU,QAAO;KACjB,2BAAU,QAAO;KACjB,8BAAa,WAAU;KACvB,gCAAe,aAAY;KAC3B,yBAAU,mBAAkB;KAC5B,kCAAiB,cAAa;KAC9B,8BAAa,kBAAiB;KAC9B,QAAM;KACN,yBAAQ,SAAQ"}

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

@@ -1 +1 @@
-{"version":3,"file":"panel-year-range.js","names":[],"sources":["../../../../../../../packages/components/date-picker-panel/src/date-picker-com/panel-year-range.vue"],"sourcesContent":["<template>\n  <div :class=\"panelKls\">\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          :class=\"ppNs.e('shortcut')\"\n          :disabled=\"yearRangeDisabled\"\n          @click=\"handleShortcutClick(shortcut)\"\n        >\n          {{ shortcut.text }}\n        </button>\n      </div>\n      <div :class=\"ppNs.e('body')\">\n        <div :class=\"leftPanelKls.content\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              type=\"button\"\n              :class=\"leftPanelKls.arrowLeftBtn\"\n              :disabled=\"yearRangeDisabled\"\n              @click=\"leftPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || yearRangeDisabled\"\n              :class=\"leftPanelKls.arrowRightBtn\"\n              @click=\"leftNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ leftLabel }}</div>\n          </div>\n          <year-table\n            selection-mode=\"range\"\n            :date=\"leftDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"yearRangeDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div :class=\"rightPanelKls.content\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || yearRangeDisabled\"\n              :class=\"rightPanelKls.arrowLeftBtn\"\n              @click=\"rightPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              type=\"button\"\n              :class=\"rightPanelKls.arrowRightBtn\"\n              :disabled=\"yearRangeDisabled\"\n              @click=\"rightNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ rightLabel }}</div>\n          </div>\n          <year-table\n            selection-mode=\"range\"\n            :date=\"rightDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"yearRangeDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, ref, toRef, unref, useSlots, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { PICKER_BASE_INJECTION_KEY } from '@element-plus/components/time-picker'\nimport {\n  panelYearRangeEmits,\n  panelYearRangeProps,\n} from '../props/panel-year-range'\nimport { useYearRangeHeader } from '../composables/use-year-range-header'\nimport { useRangePicker } from '../composables/use-range-picker'\nimport {\n  correctlyParseUserInput,\n  getDefaultValue,\n  isValidRange,\n} from '../utils'\nimport { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants'\nimport YearTable from './basic-year-table.vue'\nimport { useFormDisabled } from '@element-plus/components/form'\n\nimport type { Dayjs } from 'dayjs'\n\ndefineOptions({\n  name: 'DatePickerYearRange',\n})\n\nconst props = defineProps(panelYearRangeProps)\nconst emit = defineEmits(panelYearRangeEmits)\nconst step = 10\nconst unit = 'year'\n\nconst { lang } = useLocale()\nconst leftDate = ref(dayjs().locale(lang.value))\nconst rightDate = ref(dayjs().locale(lang.value).add(step, unit))\nconst isDefaultFormat = inject(\n  ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY,\n  undefined\n) as any\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst { shortcuts, disabledDate, cellClassName } = pickerBase.props\nconst format = toRef(pickerBase.props, 'format')\nconst defaultValue = toRef(pickerBase.props, 'defaultValue')\n\nconst {\n  minDate,\n  maxDate,\n  rangeState,\n  ppNs,\n  drpNs,\n\n  handleChangeRange,\n  handleRangeConfirm,\n  handleShortcutClick,\n  onSelect,\n  parseValue,\n} = useRangePicker(props, {\n  defaultValue,\n  leftDate,\n  rightDate,\n  step,\n  unit,\n  sortDates,\n})\n\nconst {\n  leftPrevYear,\n  rightNextYear,\n  leftNextYear,\n  rightPrevYear,\n  leftLabel,\n  rightLabel,\n  leftYear,\n  rightYear,\n} = useYearRangeHeader({\n  unlinkPanels: toRef(props, 'unlinkPanels'),\n  leftDate,\n  rightDate,\n})\n\nconst yearRangeDisabled = useFormDisabled()\n\nconst hasShortcuts = computed(() => !!shortcuts.length)\n\nconst panelKls = computed(() => [\n  ppNs.b(),\n  drpNs.b(),\n  ppNs.is('border', props.border),\n  ppNs.is('disabled', yearRangeDisabled.value),\n  {\n    'has-sidebar': Boolean(useSlots().sidebar) || hasShortcuts.value,\n  },\n])\n\nconst leftPanelKls = computed(() => {\n  return {\n    content: [ppNs.e('content'), drpNs.e('content'), 'is-left'],\n    arrowLeftBtn: [ppNs.e('icon-btn'), 'd-arrow-left'],\n    arrowRightBtn: [\n      ppNs.e('icon-btn'),\n      ppNs.is('disabled', !enableYearArrow.value || yearRangeDisabled.value),\n      'd-arrow-right',\n    ],\n  }\n})\n\nconst rightPanelKls = computed(() => {\n  return {\n    content: [ppNs.e('content'), drpNs.e('content'), 'is-right'],\n    arrowLeftBtn: [\n      ppNs.e('icon-btn'),\n      ppNs.is('disabled', !enableYearArrow.value || yearRangeDisabled.value),\n      'd-arrow-left',\n    ],\n    arrowRightBtn: [ppNs.e('icon-btn'), 'd-arrow-right'],\n  }\n})\n\nconst enableYearArrow = computed(() => {\n  return props.unlinkPanels && rightYear.value > leftYear.value + 1\n})\n\ntype RangePickValue = {\n  minDate: Dayjs\n  maxDate: Dayjs\n}\nconst handleRangePick = (val: RangePickValue, close = true) => {\n  const minDate_ = val.minDate\n  const maxDate_ = val.maxDate\n  if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n    return\n  }\n  emit('calendar-change', [minDate_.toDate(), maxDate_ && maxDate_.toDate()])\n  maxDate.value = maxDate_\n  minDate.value = minDate_\n\n  if (!close) return\n  handleRangeConfirm()\n}\n\nconst parseUserInput = (value: Dayjs | Dayjs[]) => {\n  return correctlyParseUserInput(\n    value,\n    format.value,\n    lang.value,\n    isDefaultFormat\n  )\n}\n\nconst isValidValue = (date: [Dayjs, Dayjs]) => {\n  return (\n    isValidRange(date) &&\n    (disabledDate\n      ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate())\n      : true)\n  )\n}\n\nconst handleClear = () => {\n  let valueOnClear = null\n  if (pickerBase?.emptyValues) {\n    valueOnClear = pickerBase.emptyValues.valueOnClear.value\n  }\n  const defaultArr = getDefaultValue(unref(defaultValue), {\n    lang: unref(lang),\n    step,\n    unit,\n    unlinkPanels: props.unlinkPanels,\n  })\n  leftDate.value = defaultArr[0]\n  rightDate.value = defaultArr[1]\n  emit('pick', valueOnClear)\n}\n\nfunction sortDates(minDate: Dayjs | undefined, maxDate: Dayjs | undefined) {\n  if (props.unlinkPanels && maxDate) {\n    const minDateYear = minDate?.year() || 0\n    const maxDateYear = maxDate.year()\n\n    rightDate.value =\n      minDateYear + step > maxDateYear ? maxDate.add(step, unit) : maxDate\n  } else {\n    rightDate.value = leftDate.value.add(step, unit)\n  }\n}\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible && rangeState.value.selecting) {\n      parseValue(props.parsedValue)\n      onSelect(false)\n    }\n  }\n)\n\nemit('set-picker-option', ['isValidValue', isValidValue])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleClear', handleClear])\n</script>\n"],"mappings":""}
+{"version":3,"file":"panel-year-range.js","names":[],"sources":["../../../../../../../packages/components/date-picker-panel/src/date-picker-com/panel-year-range.vue"],"sourcesContent":["<template>\n  <div :class=\"panelKls\">\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          :class=\"ppNs.e('shortcut')\"\n          :disabled=\"yearRangeDisabled\"\n          @click=\"handleShortcutClick(shortcut)\"\n        >\n          {{ shortcut.text }}\n        </button>\n      </div>\n      <div :class=\"ppNs.e('body')\">\n        <div :class=\"leftPanelKls.content\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              type=\"button\"\n              :class=\"leftPanelKls.arrowLeftBtn\"\n              :disabled=\"yearRangeDisabled\"\n              @click=\"leftPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              v-if=\"unlinkPanels || singlePanel\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || yearRangeDisabled\"\n              :class=\"leftPanelKls.arrowRightBtn\"\n              @click=\"leftNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ leftLabel }}</div>\n          </div>\n          <year-table\n            selection-mode=\"range\"\n            :date=\"leftDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"yearRangeDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div v-if=\"!singlePanel\" :class=\"rightPanelKls.content\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || yearRangeDisabled\"\n              :class=\"rightPanelKls.arrowLeftBtn\"\n              @click=\"rightPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              type=\"button\"\n              :class=\"rightPanelKls.arrowRightBtn\"\n              :disabled=\"yearRangeDisabled\"\n              @click=\"rightNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ rightLabel }}</div>\n          </div>\n          <year-table\n            selection-mode=\"range\"\n            :date=\"rightDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"yearRangeDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, ref, toRef, unref, useSlots, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { PICKER_BASE_INJECTION_KEY } from '@element-plus/components/time-picker'\nimport {\n  panelYearRangeEmits,\n  panelYearRangeProps,\n} from '../props/panel-year-range'\nimport { useYearRangeHeader } from '../composables/use-year-range-header'\nimport { useRangePicker } from '../composables/use-range-picker'\nimport {\n  correctlyParseUserInput,\n  getDefaultValue,\n  isValidRange,\n} from '../utils'\nimport { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants'\nimport YearTable from './basic-year-table.vue'\nimport { useFormDisabled } from '@element-plus/components/form'\n\nimport type { Dayjs } from 'dayjs'\n\ndefineOptions({\n  name: 'DatePickerYearRange',\n})\n\nconst props = defineProps(panelYearRangeProps)\nconst emit = defineEmits(panelYearRangeEmits)\nconst step = 10\nconst unit = 'year'\n\nconst { lang } = useLocale()\nconst leftDate = ref(dayjs().locale(lang.value))\nconst rightDate = ref(dayjs().locale(lang.value).add(step, unit))\nconst isDefaultFormat = inject(\n  ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY,\n  undefined\n) as any\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst { shortcuts, disabledDate, cellClassName } = pickerBase.props\nconst format = toRef(pickerBase.props, 'format')\nconst defaultValue = toRef(pickerBase.props, 'defaultValue')\n\nconst {\n  minDate,\n  maxDate,\n  rangeState,\n  ppNs,\n  drpNs,\n\n  handleChangeRange,\n  handleRangeConfirm,\n  handleShortcutClick,\n  onSelect,\n  parseValue,\n} = useRangePicker(props, {\n  defaultValue,\n  leftDate,\n  rightDate,\n  step,\n  unit,\n  sortDates,\n})\n\nconst {\n  leftPrevYear,\n  rightNextYear,\n  leftNextYear,\n  rightPrevYear,\n  leftLabel,\n  rightLabel,\n  leftYear,\n  rightYear,\n} = useYearRangeHeader({\n  unlinkPanels: toRef(props, 'unlinkPanels'),\n  leftDate,\n  rightDate,\n})\n\nconst yearRangeDisabled = useFormDisabled()\n\nconst hasShortcuts = computed(() => !!shortcuts.length)\n\nconst panelKls = computed(() => [\n  ppNs.b(),\n  drpNs.b(),\n  ppNs.is('border', props.border),\n  ppNs.is('disabled', yearRangeDisabled.value),\n  {\n    'has-sidebar': Boolean(useSlots().sidebar) || hasShortcuts.value,\n    'single-panel': props.singlePanel,\n  },\n])\n\nconst leftPanelKls = computed(() => {\n  return {\n    content: [\n      ppNs.e('content'),\n      drpNs.e('content'),\n      drpNs.is('left', !props.singlePanel),\n    ],\n    arrowLeftBtn: [ppNs.e('icon-btn'), 'd-arrow-left'],\n    arrowRightBtn: [\n      ppNs.e('icon-btn'),\n      ppNs.is('disabled', !enableYearArrow.value || yearRangeDisabled.value),\n      'd-arrow-right',\n    ],\n  }\n})\n\nconst rightPanelKls = computed(() => {\n  return {\n    content: [ppNs.e('content'), drpNs.e('content'), 'is-right'],\n    arrowLeftBtn: [\n      ppNs.e('icon-btn'),\n      ppNs.is('disabled', !enableYearArrow.value || yearRangeDisabled.value),\n      'd-arrow-left',\n    ],\n    arrowRightBtn: [ppNs.e('icon-btn'), 'd-arrow-right'],\n  }\n})\n\nconst enableYearArrow = computed(() => {\n  return (\n    props.singlePanel ||\n    (props.unlinkPanels && rightYear.value > leftYear.value + 1)\n  )\n})\n\ntype RangePickValue = {\n  minDate: Dayjs\n  maxDate: Dayjs\n}\nconst handleRangePick = (val: RangePickValue, close = true) => {\n  const minDate_ = val.minDate\n  const maxDate_ = val.maxDate\n  if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n    return\n  }\n  emit('calendar-change', [minDate_.toDate(), maxDate_ && maxDate_.toDate()])\n  maxDate.value = maxDate_\n  minDate.value = minDate_\n\n  if (!close) return\n  handleRangeConfirm()\n}\n\nconst parseUserInput = (value: Dayjs | Dayjs[]) => {\n  return correctlyParseUserInput(\n    value,\n    format.value,\n    lang.value,\n    isDefaultFormat\n  )\n}\n\nconst isValidValue = (date: [Dayjs, Dayjs]) => {\n  return (\n    isValidRange(date) &&\n    (disabledDate\n      ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate())\n      : true)\n  )\n}\n\nconst handleClear = () => {\n  let valueOnClear = null\n  if (pickerBase?.emptyValues) {\n    valueOnClear = pickerBase.emptyValues.valueOnClear.value\n  }\n  const defaultArr = getDefaultValue(unref(defaultValue), {\n    lang: unref(lang),\n    step,\n    unit,\n    unlinkPanels: props.unlinkPanels,\n  })\n  leftDate.value = defaultArr[0]\n  rightDate.value = defaultArr[1]\n  emit('pick', valueOnClear)\n}\n\nfunction sortDates(minDate: Dayjs | undefined, maxDate: Dayjs | undefined) {\n  if (props.unlinkPanels && maxDate) {\n    const minDateYear = minDate?.year() || 0\n    const maxDateYear = maxDate.year()\n\n    rightDate.value =\n      minDateYear + step > maxDateYear ? maxDate.add(step, unit) : maxDate\n  } else {\n    rightDate.value = leftDate.value.add(step, unit)\n  }\n}\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible && rangeState.value.selecting) {\n      parseValue(props.parsedValue)\n      onSelect(false)\n    }\n  }\n)\n\nemit('set-picker-option', ['isValidValue', isValidValue])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleClear', handleClear])\n</script>\n"],"mappings":""}

package/lib/components/date-picker-panel/src/date-picker-com/panel-year-range.vue_vue_type_script_setup_true_lang.js

@@ -58,14 +58,17 @@ var panel_year_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			drpNs.b(),
 			ppNs.is("border", props.border),
 			ppNs.is("disabled", yearRangeDisabled.value),
-			{ "has-sidebar": Boolean((0, vue.useSlots)().sidebar) || hasShortcuts.value }
+			{
+				"has-sidebar": Boolean((0, vue.useSlots)().sidebar) || hasShortcuts.value,
+				"single-panel": props.singlePanel
+			}
 		]);
 		const leftPanelKls = (0, vue.computed)(() => {
 			return {
 				content: [
 					ppNs.e("content"),
 					drpNs.e("content"),
-					"is-left"
+					drpNs.is("left", !props.singlePanel)
 				],
 				arrowLeftBtn: [ppNs.e("icon-btn"), "d-arrow-left"],
 				arrowRightBtn: [
@@ -91,7 +94,7 @@ var panel_year_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			};
 		});
 		const enableYearArrow = (0, vue.computed)(() => {
-			return props.unlinkPanels && rightYear.value > leftYear.value + 1;
+			return props.singlePanel || props.unlinkPanels && rightYear.value > leftYear.value + 1;
 		});
 		const handleRangePick = (val, close = true) => {
 			const minDate_ = val.minDate;
@@ -163,7 +166,7 @@ var panel_year_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.DArrowLeft))]),
 						_: 1
 					})])], 10, _hoisted_2),
-					_ctx.unlinkPanels ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+					_ctx.unlinkPanels || _ctx.singlePanel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 						key: 0,
 						type: "button",
 						disabled: !enableYearArrow.value || (0, vue.unref)(yearRangeDisabled),
@@ -196,7 +199,10 @@ var panel_year_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					"cell-class-name",
 					"onChangerange",
 					"onSelect"
-				])], 2), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)(rightPanelKls.value.content) }, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("header")) }, [
+				])], 2), !_ctx.singlePanel ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					key: 0,
+					class: (0, vue.normalizeClass)(rightPanelKls.value.content)
+				}, [(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(drpNs).e("header")) }, [
 					_ctx.unlinkPanels ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
 						key: 0,
 						type: "button",
@@ -239,7 +245,7 @@ var panel_year_range_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					"cell-class-name",
 					"onChangerange",
 					"onSelect"
-				])], 2)], 2)
+				])], 2)) : (0, vue.createCommentVNode)("v-if", true)], 2)
 			], 2)], 2);
 		};
 	}

package/lib/components/date-picker-panel/src/date-picker-com/panel-year-range.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel-year-range.vue_vue_type_script_setup_true_lang.js","names":["unlinkPanels"],"sources":["../../../../../../../packages/components/date-picker-panel/src/date-picker-com/panel-year-range.vue"],"sourcesContent":["<template>\n  <div :class=\"panelKls\">\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          :class=\"ppNs.e('shortcut')\"\n          :disabled=\"yearRangeDisabled\"\n          @click=\"handleShortcutClick(shortcut)\"\n        >\n          {{ shortcut.text }}\n        </button>\n      </div>\n      <div :class=\"ppNs.e('body')\">\n        <div :class=\"leftPanelKls.content\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              type=\"button\"\n              :class=\"leftPanelKls.arrowLeftBtn\"\n              :disabled=\"yearRangeDisabled\"\n              @click=\"leftPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || yearRangeDisabled\"\n              :class=\"leftPanelKls.arrowRightBtn\"\n              @click=\"leftNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ leftLabel }}</div>\n          </div>\n          <year-table\n            selection-mode=\"range\"\n            :date=\"leftDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"yearRangeDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div :class=\"rightPanelKls.content\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || yearRangeDisabled\"\n              :class=\"rightPanelKls.arrowLeftBtn\"\n              @click=\"rightPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              type=\"button\"\n              :class=\"rightPanelKls.arrowRightBtn\"\n              :disabled=\"yearRangeDisabled\"\n              @click=\"rightNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ rightLabel }}</div>\n          </div>\n          <year-table\n            selection-mode=\"range\"\n            :date=\"rightDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"yearRangeDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, ref, toRef, unref, useSlots, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { PICKER_BASE_INJECTION_KEY } from '@element-plus/components/time-picker'\nimport {\n  panelYearRangeEmits,\n  panelYearRangeProps,\n} from '../props/panel-year-range'\nimport { useYearRangeHeader } from '../composables/use-year-range-header'\nimport { useRangePicker } from '../composables/use-range-picker'\nimport {\n  correctlyParseUserInput,\n  getDefaultValue,\n  isValidRange,\n} from '../utils'\nimport { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants'\nimport YearTable from './basic-year-table.vue'\nimport { useFormDisabled } from '@element-plus/components/form'\n\nimport type { Dayjs } from 'dayjs'\n\ndefineOptions({\n  name: 'DatePickerYearRange',\n})\n\nconst props = defineProps(panelYearRangeProps)\nconst emit = defineEmits(panelYearRangeEmits)\nconst step = 10\nconst unit = 'year'\n\nconst { lang } = useLocale()\nconst leftDate = ref(dayjs().locale(lang.value))\nconst rightDate = ref(dayjs().locale(lang.value).add(step, unit))\nconst isDefaultFormat = inject(\n  ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY,\n  undefined\n) as any\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst { shortcuts, disabledDate, cellClassName } = pickerBase.props\nconst format = toRef(pickerBase.props, 'format')\nconst defaultValue = toRef(pickerBase.props, 'defaultValue')\n\nconst {\n  minDate,\n  maxDate,\n  rangeState,\n  ppNs,\n  drpNs,\n\n  handleChangeRange,\n  handleRangeConfirm,\n  handleShortcutClick,\n  onSelect,\n  parseValue,\n} = useRangePicker(props, {\n  defaultValue,\n  leftDate,\n  rightDate,\n  step,\n  unit,\n  sortDates,\n})\n\nconst {\n  leftPrevYear,\n  rightNextYear,\n  leftNextYear,\n  rightPrevYear,\n  leftLabel,\n  rightLabel,\n  leftYear,\n  rightYear,\n} = useYearRangeHeader({\n  unlinkPanels: toRef(props, 'unlinkPanels'),\n  leftDate,\n  rightDate,\n})\n\nconst yearRangeDisabled = useFormDisabled()\n\nconst hasShortcuts = computed(() => !!shortcuts.length)\n\nconst panelKls = computed(() => [\n  ppNs.b(),\n  drpNs.b(),\n  ppNs.is('border', props.border),\n  ppNs.is('disabled', yearRangeDisabled.value),\n  {\n    'has-sidebar': Boolean(useSlots().sidebar) || hasShortcuts.value,\n  },\n])\n\nconst leftPanelKls = computed(() => {\n  return {\n    content: [ppNs.e('content'), drpNs.e('content'), 'is-left'],\n    arrowLeftBtn: [ppNs.e('icon-btn'), 'd-arrow-left'],\n    arrowRightBtn: [\n      ppNs.e('icon-btn'),\n      ppNs.is('disabled', !enableYearArrow.value || yearRangeDisabled.value),\n      'd-arrow-right',\n    ],\n  }\n})\n\nconst rightPanelKls = computed(() => {\n  return {\n    content: [ppNs.e('content'), drpNs.e('content'), 'is-right'],\n    arrowLeftBtn: [\n      ppNs.e('icon-btn'),\n      ppNs.is('disabled', !enableYearArrow.value || yearRangeDisabled.value),\n      'd-arrow-left',\n    ],\n    arrowRightBtn: [ppNs.e('icon-btn'), 'd-arrow-right'],\n  }\n})\n\nconst enableYearArrow = computed(() => {\n  return props.unlinkPanels && rightYear.value > leftYear.value + 1\n})\n\ntype RangePickValue = {\n  minDate: Dayjs\n  maxDate: Dayjs\n}\nconst handleRangePick = (val: RangePickValue, close = true) => {\n  const minDate_ = val.minDate\n  const maxDate_ = val.maxDate\n  if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n    return\n  }\n  emit('calendar-change', [minDate_.toDate(), maxDate_ && maxDate_.toDate()])\n  maxDate.value = maxDate_\n  minDate.value = minDate_\n\n  if (!close) return\n  handleRangeConfirm()\n}\n\nconst parseUserInput = (value: Dayjs | Dayjs[]) => {\n  return correctlyParseUserInput(\n    value,\n    format.value,\n    lang.value,\n    isDefaultFormat\n  )\n}\n\nconst isValidValue = (date: [Dayjs, Dayjs]) => {\n  return (\n    isValidRange(date) &&\n    (disabledDate\n      ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate())\n      : true)\n  )\n}\n\nconst handleClear = () => {\n  let valueOnClear = null\n  if (pickerBase?.emptyValues) {\n    valueOnClear = pickerBase.emptyValues.valueOnClear.value\n  }\n  const defaultArr = getDefaultValue(unref(defaultValue), {\n    lang: unref(lang),\n    step,\n    unit,\n    unlinkPanels: props.unlinkPanels,\n  })\n  leftDate.value = defaultArr[0]\n  rightDate.value = defaultArr[1]\n  emit('pick', valueOnClear)\n}\n\nfunction sortDates(minDate: Dayjs | undefined, maxDate: Dayjs | undefined) {\n  if (props.unlinkPanels && maxDate) {\n    const minDateYear = minDate?.year() || 0\n    const maxDateYear = maxDate.year()\n\n    rightDate.value =\n      minDateYear + step > maxDateYear ? maxDate.add(step, unit) : maxDate\n  } else {\n    rightDate.value = leftDate.value.add(step, unit)\n  }\n}\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible && rangeState.value.selecting) {\n      parseValue(props.parsedValue)\n      onSelect(false)\n    }\n  }\n)\n\nemit('set-picker-option', ['isValidValue', isValidValue])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleClear', handleClear])\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"panel-year-range.vue_vue_type_script_setup_true_lang.js","names":["unlinkPanels","singlePanel"],"sources":["../../../../../../../packages/components/date-picker-panel/src/date-picker-com/panel-year-range.vue"],"sourcesContent":["<template>\n  <div :class=\"panelKls\">\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          :class=\"ppNs.e('shortcut')\"\n          :disabled=\"yearRangeDisabled\"\n          @click=\"handleShortcutClick(shortcut)\"\n        >\n          {{ shortcut.text }}\n        </button>\n      </div>\n      <div :class=\"ppNs.e('body')\">\n        <div :class=\"leftPanelKls.content\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              type=\"button\"\n              :class=\"leftPanelKls.arrowLeftBtn\"\n              :disabled=\"yearRangeDisabled\"\n              @click=\"leftPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              v-if=\"unlinkPanels || singlePanel\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || yearRangeDisabled\"\n              :class=\"leftPanelKls.arrowRightBtn\"\n              @click=\"leftNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ leftLabel }}</div>\n          </div>\n          <year-table\n            selection-mode=\"range\"\n            :date=\"leftDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"yearRangeDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div v-if=\"!singlePanel\" :class=\"rightPanelKls.content\">\n          <div :class=\"drpNs.e('header')\">\n            <button\n              v-if=\"unlinkPanels\"\n              type=\"button\"\n              :disabled=\"!enableYearArrow || yearRangeDisabled\"\n              :class=\"rightPanelKls.arrowLeftBtn\"\n              @click=\"rightPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <el-icon><d-arrow-left /></el-icon>\n              </slot>\n            </button>\n            <button\n              type=\"button\"\n              :class=\"rightPanelKls.arrowRightBtn\"\n              :disabled=\"yearRangeDisabled\"\n              @click=\"rightNextYear\"\n            >\n              <slot name=\"next-year\">\n                <el-icon><d-arrow-right /></el-icon>\n              </slot>\n            </button>\n            <div>{{ rightLabel }}</div>\n          </div>\n          <year-table\n            selection-mode=\"range\"\n            :date=\"rightDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            :disabled=\"yearRangeDisabled\"\n            :cell-class-name=\"cellClassName\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, ref, toRef, unref, useSlots, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { PICKER_BASE_INJECTION_KEY } from '@element-plus/components/time-picker'\nimport {\n  panelYearRangeEmits,\n  panelYearRangeProps,\n} from '../props/panel-year-range'\nimport { useYearRangeHeader } from '../composables/use-year-range-header'\nimport { useRangePicker } from '../composables/use-range-picker'\nimport {\n  correctlyParseUserInput,\n  getDefaultValue,\n  isValidRange,\n} from '../utils'\nimport { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from '../constants'\nimport YearTable from './basic-year-table.vue'\nimport { useFormDisabled } from '@element-plus/components/form'\n\nimport type { Dayjs } from 'dayjs'\n\ndefineOptions({\n  name: 'DatePickerYearRange',\n})\n\nconst props = defineProps(panelYearRangeProps)\nconst emit = defineEmits(panelYearRangeEmits)\nconst step = 10\nconst unit = 'year'\n\nconst { lang } = useLocale()\nconst leftDate = ref(dayjs().locale(lang.value))\nconst rightDate = ref(dayjs().locale(lang.value).add(step, unit))\nconst isDefaultFormat = inject(\n  ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY,\n  undefined\n) as any\nconst pickerBase = inject(PICKER_BASE_INJECTION_KEY) as any\nconst { shortcuts, disabledDate, cellClassName } = pickerBase.props\nconst format = toRef(pickerBase.props, 'format')\nconst defaultValue = toRef(pickerBase.props, 'defaultValue')\n\nconst {\n  minDate,\n  maxDate,\n  rangeState,\n  ppNs,\n  drpNs,\n\n  handleChangeRange,\n  handleRangeConfirm,\n  handleShortcutClick,\n  onSelect,\n  parseValue,\n} = useRangePicker(props, {\n  defaultValue,\n  leftDate,\n  rightDate,\n  step,\n  unit,\n  sortDates,\n})\n\nconst {\n  leftPrevYear,\n  rightNextYear,\n  leftNextYear,\n  rightPrevYear,\n  leftLabel,\n  rightLabel,\n  leftYear,\n  rightYear,\n} = useYearRangeHeader({\n  unlinkPanels: toRef(props, 'unlinkPanels'),\n  leftDate,\n  rightDate,\n})\n\nconst yearRangeDisabled = useFormDisabled()\n\nconst hasShortcuts = computed(() => !!shortcuts.length)\n\nconst panelKls = computed(() => [\n  ppNs.b(),\n  drpNs.b(),\n  ppNs.is('border', props.border),\n  ppNs.is('disabled', yearRangeDisabled.value),\n  {\n    'has-sidebar': Boolean(useSlots().sidebar) || hasShortcuts.value,\n    'single-panel': props.singlePanel,\n  },\n])\n\nconst leftPanelKls = computed(() => {\n  return {\n    content: [\n      ppNs.e('content'),\n      drpNs.e('content'),\n      drpNs.is('left', !props.singlePanel),\n    ],\n    arrowLeftBtn: [ppNs.e('icon-btn'), 'd-arrow-left'],\n    arrowRightBtn: [\n      ppNs.e('icon-btn'),\n      ppNs.is('disabled', !enableYearArrow.value || yearRangeDisabled.value),\n      'd-arrow-right',\n    ],\n  }\n})\n\nconst rightPanelKls = computed(() => {\n  return {\n    content: [ppNs.e('content'), drpNs.e('content'), 'is-right'],\n    arrowLeftBtn: [\n      ppNs.e('icon-btn'),\n      ppNs.is('disabled', !enableYearArrow.value || yearRangeDisabled.value),\n      'd-arrow-left',\n    ],\n    arrowRightBtn: [ppNs.e('icon-btn'), 'd-arrow-right'],\n  }\n})\n\nconst enableYearArrow = computed(() => {\n  return (\n    props.singlePanel ||\n    (props.unlinkPanels && rightYear.value > leftYear.value + 1)\n  )\n})\n\ntype RangePickValue = {\n  minDate: Dayjs\n  maxDate: Dayjs\n}\nconst handleRangePick = (val: RangePickValue, close = true) => {\n  const minDate_ = val.minDate\n  const maxDate_ = val.maxDate\n  if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n    return\n  }\n  emit('calendar-change', [minDate_.toDate(), maxDate_ && maxDate_.toDate()])\n  maxDate.value = maxDate_\n  minDate.value = minDate_\n\n  if (!close) return\n  handleRangeConfirm()\n}\n\nconst parseUserInput = (value: Dayjs | Dayjs[]) => {\n  return correctlyParseUserInput(\n    value,\n    format.value,\n    lang.value,\n    isDefaultFormat\n  )\n}\n\nconst isValidValue = (date: [Dayjs, Dayjs]) => {\n  return (\n    isValidRange(date) &&\n    (disabledDate\n      ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate())\n      : true)\n  )\n}\n\nconst handleClear = () => {\n  let valueOnClear = null\n  if (pickerBase?.emptyValues) {\n    valueOnClear = pickerBase.emptyValues.valueOnClear.value\n  }\n  const defaultArr = getDefaultValue(unref(defaultValue), {\n    lang: unref(lang),\n    step,\n    unit,\n    unlinkPanels: props.unlinkPanels,\n  })\n  leftDate.value = defaultArr[0]\n  rightDate.value = defaultArr[1]\n  emit('pick', valueOnClear)\n}\n\nfunction sortDates(minDate: Dayjs | undefined, maxDate: Dayjs | undefined) {\n  if (props.unlinkPanels && maxDate) {\n    const minDateYear = minDate?.year() || 0\n    const maxDateYear = maxDate.year()\n\n    rightDate.value =\n      minDateYear + step > maxDateYear ? maxDate.add(step, unit) : maxDate\n  } else {\n    rightDate.value = leftDate.value.add(step, unit)\n  }\n}\n\nwatch(\n  () => props.visible,\n  (visible) => {\n    if (!visible && rangeState.value.selecting) {\n      parseValue(props.parsedValue)\n      onSelect(false)\n    }\n  }\n)\n\nemit('set-picker-option', ['isValidValue', isValidValue])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleClear', handleClear])\n</script>\n"],"mappings":"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"}

package/lib/components/date-picker-panel/src/props/shared.js

@@ -72,7 +72,8 @@ const panelRangeSharedProps = require_runtime$1.buildProps({
 	},
 	border: Boolean,
 	disabled: Boolean,
-	parsedValue: { type: require_runtime$1.definePropType(Array) }
+	parsedValue: { type: require_runtime$1.definePropType(Array) },
+	singlePanel: Boolean
 });
 const selectionModeWithDefault = (mode) => {
 	return {

package/lib/components/date-picker-panel/src/props/shared.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared.js","names":["buildProps","definePropType","datePickTypes"],"sources":["../../../../../../../packages/components/date-picker-panel/src/props/shared.ts"],"sourcesContent":["import { buildProps, definePropType, isArray } from '@element-plus/utils'\nimport { datePickTypes } from '@element-plus/constants'\n\nimport type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type { DatePickType } from '@element-plus/constants'\nimport type { DayOrDays } from '@element-plus/components/time-picker'\n\nconst selectionModes = [\n  'date',\n  'dates',\n  'year',\n  'years',\n  'month',\n  'months',\n  'week',\n  'range',\n]\n\nexport type RangeState = {\n  endDate: null | Dayjs\n  selecting: boolean\n}\n\nexport type DisabledDateType = (date: Date) => boolean\nexport type CellClassNameType = (date: Date) => string\n\nexport const datePickerSharedProps = buildProps({\n  cellClassName: {\n    type: definePropType<CellClassNameType>(Function),\n  },\n  disabledDate: {\n    type: definePropType<DisabledDateType>(Function),\n  },\n  date: {\n    type: definePropType<Dayjs>(Object),\n    required: true,\n  },\n  minDate: {\n    type: definePropType<Dayjs | null>(Object),\n  },\n  maxDate: {\n    type: definePropType<Dayjs | null>(Object),\n  },\n  parsedValue: {\n    type: definePropType<Dayjs | Dayjs[]>([Object, Array]),\n  },\n  rangeState: {\n    type: definePropType<RangeState>(Object),\n    default: () => ({\n      endDate: null,\n      selecting: false,\n    }),\n  },\n  disabled: Boolean,\n} as const)\n\nexport const panelSharedProps = buildProps({\n  type: {\n    type: definePropType<DatePickType>(String),\n    required: true,\n    values: datePickTypes,\n  },\n  dateFormat: String,\n  timeFormat: String,\n  showNow: {\n    type: Boolean,\n    default: true,\n  },\n  showConfirm: Boolean,\n  showFooter: {\n    type: Boolean,\n    default: true,\n  },\n  showWeekNumber: Boolean,\n  border: Boolean,\n  disabled: Boolean,\n  editable: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\n\nexport const panelRangeSharedProps = buildProps({\n  unlinkPanels: Boolean,\n  visible: {\n    type: Boolean,\n    default: true,\n  },\n  showConfirm: Boolean,\n  showFooter: {\n    type: Boolean,\n    default: true,\n  },\n  border: Boolean,\n  disabled: Boolean,\n  parsedValue: {\n    type: definePropType<DayOrDays>(Array),\n  },\n} as const)\n\nexport const selectionModeWithDefault = (\n  mode: (typeof selectionModes)[number]\n) => {\n  return {\n    type: String,\n    values: selectionModes,\n    default: mode,\n  }\n}\n\nexport const rangePickerSharedEmits = {\n  pick: (range: [Dayjs, Dayjs]) => isArray(range),\n}\n\nexport type RangePickerSharedEmits = typeof rangePickerSharedEmits\nexport type PanelRangeSharedProps = ExtractPropTypes<\n  typeof panelRangeSharedProps\n>\nexport type PanelRangeSharedPropsPublic = ExtractPublicPropTypes<\n  typeof panelRangeSharedProps\n>\n"],"mappings":";;;;;;;AAQA,MAAM,iBAAiB;CACrB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAUD,MAAa,wBAAwBA,6BAAW;CAC9C,eAAe,EACb,MAAMC,iCAAkC,SAAS,EAClD;CACD,cAAc,EACZ,MAAMA,iCAAiC,SAAS,EACjD;CACD,MAAM;EACJ,MAAMA,iCAAsB,OAAO;EACnC,UAAU;EACX;CACD,SAAS,EACP,MAAMA,iCAA6B,OAAO,EAC3C;CACD,SAAS,EACP,MAAMA,iCAA6B,OAAO,EAC3C;CACD,aAAa,EACX,MAAMA,iCAAgC,CAAC,QAAQ,MAAM,CAAC,EACvD;CACD,YAAY;EACV,MAAMA,iCAA2B,OAAO;EACxC,gBAAgB;GACd,SAAS;GACT,WAAW;GACZ;EACF;CACD,UAAU;CACX,CAAU;AAEX,MAAa,mBAAmBD,6BAAW;CACzC,MAAM;EACJ,MAAMC,iCAA6B,OAAO;EAC1C,UAAU;EACV,QAAQC;EACT;CACD,YAAY;CACZ,YAAY;CACZ,SAAS;EACP,MAAM;EACN,SAAS;EACV;CACD,aAAa;CACb,YAAY;EACV,MAAM;EACN,SAAS;EACV;CACD,gBAAgB;CAChB,QAAQ;CACR,UAAU;CACV,UAAU;EACR,MAAM;EACN,SAAS;EACV;CACF,CAAU;AAEX,MAAa,wBAAwBF,6BAAW;CAC9C,cAAc;CACd,SAAS;EACP,MAAM;EACN,SAAS;EACV;CACD,aAAa;CACb,YAAY;EACV,MAAM;EACN,SAAS;EACV;CACD,QAAQ;CACR,UAAU;CACV,aAAa,EACX,MAAMC,iCAA0B,MAAM,EACvC;CACF,CAAU;AAEX,MAAa,4BACX,SACG;AACH,QAAO;EACL,MAAM;EACN,QAAQ;EACR,SAAS;EACV;;AAGH,MAAa,yBAAyB,EACpC,OAAO,mCAAkC,MAAM,EAChD"}
+{"version":3,"file":"shared.js","names":["buildProps","definePropType","datePickTypes"],"sources":["../../../../../../../packages/components/date-picker-panel/src/props/shared.ts"],"sourcesContent":["import { buildProps, definePropType, isArray } from '@element-plus/utils'\nimport { datePickTypes } from '@element-plus/constants'\n\nimport type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type { DatePickType } from '@element-plus/constants'\nimport type { DayOrDays } from '@element-plus/components/time-picker'\n\nconst selectionModes = [\n  'date',\n  'dates',\n  'year',\n  'years',\n  'month',\n  'months',\n  'week',\n  'range',\n]\n\nexport type RangeState = {\n  endDate: null | Dayjs\n  selecting: boolean\n}\n\nexport type DisabledDateType = (date: Date) => boolean\nexport type CellClassNameType = (date: Date) => string\n\nexport const datePickerSharedProps = buildProps({\n  cellClassName: {\n    type: definePropType<CellClassNameType>(Function),\n  },\n  disabledDate: {\n    type: definePropType<DisabledDateType>(Function),\n  },\n  date: {\n    type: definePropType<Dayjs>(Object),\n    required: true,\n  },\n  minDate: {\n    type: definePropType<Dayjs | null>(Object),\n  },\n  maxDate: {\n    type: definePropType<Dayjs | null>(Object),\n  },\n  parsedValue: {\n    type: definePropType<Dayjs | Dayjs[]>([Object, Array]),\n  },\n  rangeState: {\n    type: definePropType<RangeState>(Object),\n    default: () => ({\n      endDate: null,\n      selecting: false,\n    }),\n  },\n  disabled: Boolean,\n} as const)\n\nexport const panelSharedProps = buildProps({\n  type: {\n    type: definePropType<DatePickType>(String),\n    required: true,\n    values: datePickTypes,\n  },\n  dateFormat: String,\n  timeFormat: String,\n  showNow: {\n    type: Boolean,\n    default: true,\n  },\n  showConfirm: Boolean,\n  showFooter: {\n    type: Boolean,\n    default: true,\n  },\n  showWeekNumber: Boolean,\n  border: Boolean,\n  disabled: Boolean,\n  editable: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\n\nexport const panelRangeSharedProps = buildProps({\n  unlinkPanels: Boolean,\n  visible: {\n    type: Boolean,\n    default: true,\n  },\n  showConfirm: Boolean,\n  showFooter: {\n    type: Boolean,\n    default: true,\n  },\n  border: Boolean,\n  disabled: Boolean,\n  parsedValue: {\n    type: definePropType<DayOrDays>(Array),\n  },\n  singlePanel: Boolean,\n} as const)\n\nexport const selectionModeWithDefault = (\n  mode: (typeof selectionModes)[number]\n) => {\n  return {\n    type: String,\n    values: selectionModes,\n    default: mode,\n  }\n}\n\nexport const rangePickerSharedEmits = {\n  pick: (range: [Dayjs, Dayjs]) => isArray(range),\n}\n\nexport type RangePickerSharedEmits = typeof rangePickerSharedEmits\nexport type PanelRangeSharedProps = ExtractPropTypes<\n  typeof panelRangeSharedProps\n>\nexport type PanelRangeSharedPropsPublic = ExtractPublicPropTypes<\n  typeof panelRangeSharedProps\n>\n"],"mappings":";;;;;;;AAQA,MAAM,iBAAiB;CACrB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAUD,MAAa,wBAAwBA,6BAAW;CAC9C,eAAe,EACb,MAAMC,iCAAkC,SAAS,EAClD;CACD,cAAc,EACZ,MAAMA,iCAAiC,SAAS,EACjD;CACD,MAAM;EACJ,MAAMA,iCAAsB,OAAO;EACnC,UAAU;EACX;CACD,SAAS,EACP,MAAMA,iCAA6B,OAAO,EAC3C;CACD,SAAS,EACP,MAAMA,iCAA6B,OAAO,EAC3C;CACD,aAAa,EACX,MAAMA,iCAAgC,CAAC,QAAQ,MAAM,CAAC,EACvD;CACD,YAAY;EACV,MAAMA,iCAA2B,OAAO;EACxC,gBAAgB;GACd,SAAS;GACT,WAAW;GACZ;EACF;CACD,UAAU;CACX,CAAU;AAEX,MAAa,mBAAmBD,6BAAW;CACzC,MAAM;EACJ,MAAMC,iCAA6B,OAAO;EAC1C,UAAU;EACV,QAAQC;EACT;CACD,YAAY;CACZ,YAAY;CACZ,SAAS;EACP,MAAM;EACN,SAAS;EACV;CACD,aAAa;CACb,YAAY;EACV,MAAM;EACN,SAAS;EACV;CACD,gBAAgB;CAChB,QAAQ;CACR,UAAU;CACV,UAAU;EACR,MAAM;EACN,SAAS;EACV;CACF,CAAU;AAEX,MAAa,wBAAwBF,6BAAW;CAC9C,cAAc;CACd,SAAS;EACP,MAAM;EACN,SAAS;EACV;CACD,aAAa;CACb,YAAY;EACV,MAAM;EACN,SAAS;EACV;CACD,QAAQ;CACR,UAAU;CACV,aAAa,EACX,MAAMC,iCAA0B,MAAM,EACvC;CACD,aAAa;CACd,CAAU;AAEX,MAAa,4BACX,SACG;AACH,QAAO;EACL,MAAM;EACN,QAAQ;EACR,SAAS;EACV;;AAGH,MAAa,yBAAyB,EACpC,OAAO,mCAAkC,MAAM,EAChD"}

package/lib/components/message/src/message.d.ts

@@ -134,7 +134,7 @@ declare const messageProps: {
   readonly type: EpPropFinalized<StringConstructor, "error" | "info" | "primary" | "success" | "warning", unknown, "info", boolean>;
   readonly plain: EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
   readonly offset: EpPropFinalized<NumberConstructor, unknown, unknown, 16, boolean>;
-  readonly placement: EpPropFinalized<StringConstructor, "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", unknown, undefined, boolean>;
+  readonly placement: EpPropFinalized<StringConstructor, "top" | "bottom" | "top-right" | "top-left" | "bottom-right" | "bottom-left", unknown, undefined, boolean>;
   readonly zIndex: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
   readonly grouping: EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
   readonly repeatNum: EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;

package/lib/components/notification/src/notification.d.ts

@@ -110,7 +110,7 @@ declare const notificationProps: {
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  readonly position: EpPropFinalized<StringConstructor, "top-left" | "top-right" | "bottom-left" | "bottom-right", unknown, "top-right", boolean>;
+  readonly position: EpPropFinalized<StringConstructor, "top-right" | "top-left" | "bottom-right" | "bottom-left", unknown, "top-right", boolean>;
   readonly showClose: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly title: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
   readonly type: EpPropFinalized<StringConstructor, "" | "error" | "info" | "primary" | "success" | "warning", unknown, "", boolean>;

package/lib/components/time-picker/src/common/picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"picker.js","names":[],"sources":["../../../../../../../packages/components/time-picker/src/common/picker.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"refPopper\"\n    :visible=\"pickerVisible\"\n    effect=\"light\"\n    pure\n    trigger=\"click\"\n    v-bind=\"$attrs\"\n    role=\"dialog\"\n    teleported\n    :transition=\"`${nsDate.namespace.value}-zoom-in-top`\"\n    :popper-class=\"[`${nsDate.namespace.value}-picker__popper`, popperClass!]\"\n    :popper-style=\"popperStyle\"\n    :popper-options=\"elPopperOptions\"\n    :fallback-placements=\"fallbackPlacements\"\n    :gpu-acceleration=\"false\"\n    :placement=\"placement\"\n    :stop-popper-mouse-event=\"false\"\n    :hide-after=\"0\"\n    persistent\n    @before-show=\"onBeforeShow\"\n    @show=\"onShow\"\n    @hide=\"onHide\"\n  >\n    <template #default>\n      <el-input\n        v-if=\"!isRangeInput\"\n        :id=\"\n          // https://github.com/vuejs/language-tools/issues/2104#issuecomment-3092541527\n          id as string\n        \"\n        ref=\"inputRef\"\n        container-role=\"combobox\"\n        :model-value=\"\n          // https://github.com/vuejs/language-tools/issues/2104#issuecomment-3092541527\n          displayValue as string\n        \"\n        :name=\"\n          // https://github.com/vuejs/language-tools/issues/2104#issuecomment-3092541527\n          name as string\n        \"\n        :size=\"pickerSize\"\n        :disabled=\"pickerDisabled\"\n        :placeholder=\"placeholder\"\n        :class=\"[\n          nsDate.b('editor'),\n          nsDate.bm('editor', type),\n          nsDate.is('focus', pickerVisible),\n          $attrs.class,\n        ]\"\n        :style=\"$attrs.style\"\n        :readonly=\"\n          !editable ||\n          readonly ||\n          isDatesPicker ||\n          isMonthsPicker ||\n          isYearsPicker ||\n          type === 'week'\n        \"\n        :aria-label=\"ariaLabel\"\n        :tabindex=\"tabindex\"\n        :validate-event=\"false\"\n        @input=\"onUserInput\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @keydown=\"handleKeydownInput\"\n        @change=\"handleChange\"\n        @mousedown=\"onMouseDownInput\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n        @touchstart.passive=\"onTouchStartInput\"\n        @click.stop\n      >\n        <template #prefix>\n          <el-icon\n            v-if=\"triggerIcon\"\n            :class=\"nsInput.e('icon')\"\n            @mousedown.prevent=\"onMouseDownInput\"\n            @touchstart.passive=\"onTouchStartInput\"\n          >\n            <component :is=\"triggerIcon\" />\n          </el-icon>\n        </template>\n        <template #suffix>\n          <el-icon\n            v-if=\"showClearBtn && clearIcon\"\n            :class=\"`${nsInput.e('icon')} clear-icon`\"\n            @mousedown.prevent=\"NOOP\"\n            @click=\"onClear\"\n          >\n            <component :is=\"clearIcon\" />\n          </el-icon>\n        </template>\n      </el-input>\n      <picker-range-trigger\n        v-else\n        :id=\"\n          // https://github.com/vuejs/language-tools/issues/2104#issuecomment-3092541527\n          id as string[]\n        \"\n        ref=\"inputRef\"\n        :model-value=\"displayValue\"\n        :name=\"\n          // https://github.com/vuejs/language-tools/issues/2104#issuecomment-3092541527\n          name as string[]\n        \"\n        :disabled=\"pickerDisabled\"\n        :readonly=\"!editable || readonly\"\n        :start-placeholder=\"startPlaceholder\"\n        :end-placeholder=\"endPlaceholder\"\n        :class=\"rangeInputKls\"\n        :style=\"$attrs.style\"\n        :aria-label=\"ariaLabel\"\n        :tabindex=\"tabindex\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        @click=\"onMouseDownInput\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @start-input=\"handleStartInput\"\n        @start-change=\"handleStartChange\"\n        @end-input=\"handleEndInput\"\n        @end-change=\"handleEndChange\"\n        @mousedown=\"onMouseDownInput\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n        @touchstart.passive=\"onTouchStartInput\"\n        @keydown=\"handleKeydownInput\"\n      >\n        <template #prefix>\n          <el-icon\n            v-if=\"triggerIcon\"\n            :class=\"[nsInput.e('icon'), nsRange.e('icon')]\"\n          >\n            <component :is=\"triggerIcon\" />\n          </el-icon>\n        </template>\n        <template #range-separator>\n          <slot name=\"range-separator\">\n            <span :class=\"nsRange.b('separator')\">{{ rangeSeparator }}</span>\n          </slot>\n        </template>\n        <template #suffix>\n          <el-icon\n            v-if=\"clearIcon\"\n            :class=\"clearIconKls\"\n            @mousedown.prevent=\"NOOP\"\n            @click=\"onClear\"\n          >\n            <component :is=\"clearIcon\" />\n          </el-icon>\n        </template>\n      </picker-range-trigger>\n    </template>\n    <template #content>\n      <slot\n        :visible=\"pickerVisible\"\n        :actual-visible=\"pickerActualVisible\"\n        :parsed-value=\"parsedValue\"\n        :format=\"format\"\n        :date-format=\"dateFormat\"\n        :time-format=\"timeFormat\"\n        :unlink-panels=\"unlinkPanels\"\n        :type=\"type\"\n        :default-value=\"defaultValue\"\n        :show-now=\"showNow\"\n        :show-confirm=\"showConfirm\"\n        :show-footer=\"showFooter\"\n        :show-week-number=\"showWeekNumber\"\n        @pick=\"onPick\"\n        @select-range=\"setSelectionRange\"\n        @set-picker-option=\"onSetPickerOption\"\n        @calendar-change=\"onCalendarChange\"\n        @clear=\"onClear\"\n        @panel-change=\"onPanelChange\"\n        @mousedown.stop\n      />\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  inject,\n  nextTick,\n  onBeforeUnmount,\n  provide,\n  ref,\n  unref,\n  useAttrs,\n  watch,\n} from 'vue'\nimport { onClickOutside, unrefElement } from '@vueuse/core'\nimport {\n  useEmptyValues,\n  useFocusController,\n  useNamespace,\n} from '@element-plus/hooks'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormSize,\n} from '@element-plus/components/form'\nimport ElInput from '@element-plus/components/input'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { NOOP, debugWarn, getEventCode, isArray } from '@element-plus/utils'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { Calendar, Clock } from '@element-plus/icons-vue'\nimport { dayOrDaysToDate, valueEquals } from '../utils'\nimport {\n  PICKER_BASE_INJECTION_KEY,\n  PICKER_POPPER_OPTIONS_INJECTION_KEY,\n  ROOT_COMMON_PICKER_INJECTION_KEY,\n} from '../constants'\nimport { useCommonPicker } from '../composables/use-common-picker'\nimport { timePickerDefaultProps } from './props'\nimport PickerRangeTrigger from './picker-range-trigger.vue'\n\nimport type { InputInstance } from '@element-plus/components/input'\nimport type { Dayjs } from 'dayjs'\nimport type { ComponentPublicInstance, Ref } from 'vue'\nimport type { Options } from '@popperjs/core'\nimport type { DayOrDays, TimePickerDefaultProps, UserInput } from './props'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\n\ndefineOptions({\n  name: 'Picker',\n})\n\nconst props = defineProps(timePickerDefaultProps)\nconst emit = defineEmits([\n  UPDATE_MODEL_EVENT,\n  CHANGE_EVENT,\n  'focus',\n  'blur',\n  'clear',\n  'calendar-change',\n  'panel-change',\n  'visible-change',\n  'keydown',\n])\nconst attrs = useAttrs()\n\nconst nsDate = useNamespace('date')\nconst nsInput = useNamespace('input')\nconst nsRange = useNamespace('range')\n\nconst { formItem } = useFormItem()\nconst elPopperOptions = inject(\n  PICKER_POPPER_OPTIONS_INJECTION_KEY,\n  {} as Options\n)\nconst emptyValues = useEmptyValues(props, null)\n\nconst refPopper = ref<TooltipInstance>()\nconst inputRef = ref<InputInstance>()\nconst valueOnOpen = ref<TimePickerDefaultProps['modelValue'] | null>(null)\nlet hasJustTabExitedInput = false\n\nconst pickerDisabled = useFormDisabled()\n\nconst commonPicker = useCommonPicker(props, emit)\nconst {\n  parsedValue,\n  pickerActualVisible,\n  userInput,\n  pickerVisible,\n  pickerOptions,\n  valueIsEmpty,\n  emitInput,\n  onPick,\n  onSetPickerOption,\n  onCalendarChange,\n  onPanelChange,\n} = commonPicker\n\nconst { isFocused, handleFocus, handleBlur } = useFocusController(inputRef, {\n  disabled: pickerDisabled,\n  beforeFocus() {\n    return props.readonly\n  },\n  afterFocus() {\n    if (!props.automaticDropdown) return\n    pickerVisible.value = true\n  },\n  beforeBlur(event) {\n    return (\n      !hasJustTabExitedInput && refPopper.value?.isFocusInsideContent(event)\n    )\n  },\n  afterBlur() {\n    if (isTimePicker.value && !props.saveOnBlur) {\n      if (!valueIsEmpty.value) {\n        pickerOptions.value.handleCancel?.()\n      }\n    } else {\n      handleChange()\n    }\n    pickerVisible.value = false\n    hasJustTabExitedInput = false\n    props.validateEvent &&\n      formItem?.validate('blur').catch((err) => debugWarn(err))\n  },\n})\n\nconst hovering = ref(false)\n\nconst rangeInputKls = computed(() => [\n  nsDate.b('editor'),\n  nsDate.bm('editor', props.type),\n  nsInput.e('wrapper'),\n  nsDate.is('disabled', pickerDisabled.value),\n  nsDate.is('active', pickerVisible.value),\n  nsRange.b('editor'),\n  pickerSize ? nsRange.bm('editor', pickerSize.value) : '',\n  attrs.class,\n])\n\nconst clearIconKls = computed(() => [\n  nsInput.e('icon'),\n  nsRange.e('close-icon'),\n  !showClearBtn.value ? nsRange.em('close-icon', 'hidden') : '',\n])\n\nwatch(pickerVisible, (val) => {\n  if (!val) {\n    userInput.value = null\n    nextTick(() => {\n      emitChange(props.modelValue)\n    })\n  } else {\n    nextTick(() => {\n      if (val) {\n        valueOnOpen.value = props.modelValue\n      }\n    })\n  }\n})\nconst emitChange = (\n  val: TimePickerDefaultProps['modelValue'] | null,\n  isClear?: boolean\n) => {\n  // determine user real change only\n  if (isClear || !valueEquals(val, valueOnOpen.value)) {\n    emit(CHANGE_EVENT, val)\n    // Set the value of valueOnOpen when clearing to avoid triggering change events multiple times.\n    isClear && (valueOnOpen.value = val)\n    props.validateEvent &&\n      formItem?.validate('change').catch((err) => debugWarn(err))\n  }\n}\nconst emitKeydown = (e: KeyboardEvent) => {\n  emit('keydown', e)\n}\n\nconst refInput = computed<HTMLInputElement[]>(() => {\n  if (inputRef.value) {\n    return Array.from<HTMLInputElement>(\n      inputRef.value.$el.querySelectorAll('input')\n    )\n  }\n  return []\n})\n\n// @ts-ignore\nconst setSelectionRange = (start: number, end: number, pos?: 'min' | 'max') => {\n  const _inputs = refInput.value\n  if (!_inputs.length) return\n  if (!pos || pos === 'min') {\n    _inputs[0].setSelectionRange(start, end)\n    _inputs[0].focus()\n  } else if (pos === 'max') {\n    _inputs[1].setSelectionRange(start, end)\n    _inputs[1].focus()\n  }\n}\n\nconst onBeforeShow = () => {\n  pickerActualVisible.value = true\n}\n\nconst onShow = () => {\n  emit('visible-change', true)\n}\n\nconst onHide = () => {\n  pickerActualVisible.value = false\n  pickerVisible.value = false\n  emit('visible-change', false)\n}\n\nconst handleOpen = () => {\n  pickerVisible.value = true\n}\n\nconst handleClose = () => {\n  pickerVisible.value = false\n}\n\nconst displayValue = computed<UserInput>(() => {\n  const formattedValue = formatToString(parsedValue.value)\n  if (isArray(userInput.value)) {\n    return [\n      userInput.value[0] ?? (formattedValue && formattedValue[0]) ?? '',\n      userInput.value[1] ?? (formattedValue && formattedValue[1]) ?? '',\n    ]\n  } else if (userInput.value !== null) {\n    return userInput.value\n  }\n  if (isTimePicker.value && valueIsEmpty.value && !props.saveOnBlur) return ''\n  if (!isTimePicker.value && valueIsEmpty.value) return ''\n  if (!pickerVisible.value && valueIsEmpty.value) return ''\n  if (formattedValue) {\n    return isDatesPicker.value || isMonthsPicker.value || isYearsPicker.value\n      ? (formattedValue as Array<string>).join(', ')\n      : formattedValue\n  }\n  return ''\n})\n\nconst isTimeLikePicker = computed(() => props.type.includes('time'))\n\nconst isTimePicker = computed(() => props.type.startsWith('time'))\n\nconst isDatesPicker = computed(() => props.type === 'dates')\n\nconst isMonthsPicker = computed(() => props.type === 'months')\n\nconst isYearsPicker = computed(() => props.type === 'years')\n\nconst triggerIcon = computed(\n  () => props.prefixIcon || (isTimeLikePicker.value ? Clock : Calendar)\n)\n\nconst showClearBtn = computed(\n  () =>\n    props.clearable &&\n    !pickerDisabled.value &&\n    !props.readonly &&\n    !valueIsEmpty.value &&\n    (hovering.value || isFocused.value)\n)\n\nconst onClear = (event?: MouseEvent) => {\n  if (props.readonly || pickerDisabled.value) return\n  if (showClearBtn.value) {\n    event?.stopPropagation()\n    // When the handleClear Function was provided, emit null will be executed inside it\n    // There is no need for us to execute emit null twice. #14752\n    if (pickerOptions.value.handleClear) {\n      pickerOptions.value.handleClear()\n    } else {\n      emitInput(emptyValues.valueOnClear.value)\n    }\n    emitChange(emptyValues.valueOnClear.value, true)\n    onHide()\n  }\n  emit('clear')\n}\n\nconst onMouseDownInput = async (event: MouseEvent) => {\n  if (props.readonly || pickerDisabled.value) return\n  if (\n    (event.target as HTMLElement)?.tagName !== 'INPUT' ||\n    isFocused.value ||\n    !props.automaticDropdown\n  ) {\n    pickerVisible.value = true\n  }\n}\nconst onMouseEnter = () => {\n  if (props.readonly || pickerDisabled.value) return\n  if (!valueIsEmpty.value && props.clearable) {\n    hovering.value = true\n  }\n}\nconst onMouseLeave = () => {\n  hovering.value = false\n}\n\nconst onTouchStartInput = (event: TouchEvent) => {\n  if (props.readonly || pickerDisabled.value) return\n  if (\n    (event.touches[0].target as HTMLElement)?.tagName !== 'INPUT' ||\n    isFocused.value ||\n    !props.automaticDropdown\n  ) {\n    pickerVisible.value = true\n  }\n}\n\nconst isRangeInput = computed(() => {\n  return props.type.includes('range')\n})\n\nconst pickerSize = useFormSize()\n\nconst popperEl = computed(() => unref(refPopper)?.popperRef?.contentRef)\n\nconst stophandle = onClickOutside(\n  inputRef as Ref<ComponentPublicInstance>,\n  (e: PointerEvent) => {\n    const unrefedPopperEl = unref(popperEl)\n    const inputEl = unrefElement(inputRef as Ref<ComponentPublicInstance>)\n    if (\n      (unrefedPopperEl &&\n        (e.target === unrefedPopperEl ||\n          e.composedPath().includes(unrefedPopperEl))) ||\n      e.target === inputEl ||\n      (inputEl && e.composedPath().includes(inputEl))\n    )\n      return\n    pickerVisible.value = false\n  }\n)\n\nonBeforeUnmount(() => {\n  stophandle?.()\n})\n\nconst handleChange = () => {\n  if (isTimePicker.value && !props.saveOnBlur) return\n\n  const isRangeEmpty =\n    isArray(userInput.value) && userInput.value.every((v) => v === '')\n\n  if (userInput.value && !isRangeEmpty) {\n    const value = parseUserInputToDayjs(displayValue.value)\n    if (value) {\n      if (isValidValue(value)) {\n        emitInput(dayOrDaysToDate(value))\n      }\n      userInput.value = null\n    }\n  }\n  if (userInput.value === '' || isRangeEmpty) {\n    emitInput(emptyValues.valueOnClear.value)\n    emitChange(emptyValues.valueOnClear.value, true)\n    userInput.value = null\n  }\n}\n\nconst parseUserInputToDayjs = (value: UserInput) => {\n  if (!value) return null\n  return pickerOptions.value.parseUserInput!(value)\n}\n\nconst formatToString = (value: DayOrDays) => {\n  if (!value) return null\n  const res = isArray(value)\n    ? value.map((_) => _.format(props.format))\n    : value.format(props.format)\n  return res as UserInput\n}\n\nconst isValidValue = (value: DayOrDays) => {\n  return pickerOptions.value.isValidValue!(value)\n}\n\nconst handleKeydownInput = async (event: Event | KeyboardEvent) => {\n  if (props.readonly || pickerDisabled.value) return\n\n  const code = getEventCode(event as KeyboardEvent)\n  emitKeydown(event as KeyboardEvent)\n  if (code === EVENT_CODE.esc) {\n    if (pickerVisible.value === true) {\n      pickerVisible.value = false\n      event.preventDefault()\n      event.stopPropagation()\n    }\n    return\n  }\n\n  if (code === EVENT_CODE.down) {\n    if (pickerOptions.value.handleFocusPicker) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n    if (pickerVisible.value === false) {\n      pickerVisible.value = true\n      await nextTick()\n    }\n    if (pickerOptions.value.handleFocusPicker) {\n      pickerOptions.value.handleFocusPicker()\n      return\n    }\n  }\n\n  if (code === EVENT_CODE.tab) {\n    hasJustTabExitedInput = true\n    return\n  }\n\n  if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {\n    if (!pickerVisible.value) {\n      pickerVisible.value = true\n    } else if (\n      userInput.value === null ||\n      userInput.value === '' ||\n      isValidValue(parseUserInputToDayjs(displayValue.value) as DayOrDays)\n    ) {\n      handleChange()\n      pickerVisible.value = false\n    }\n    event.preventDefault()\n    event.stopPropagation()\n    return\n  }\n\n  // if user is typing, do not let picker handle key input\n  if (userInput.value) {\n    event.stopPropagation()\n    return\n  }\n  if (pickerOptions.value.handleKeydownInput) {\n    pickerOptions.value.handleKeydownInput(event as KeyboardEvent)\n  }\n}\nconst onUserInput = (e: string) => {\n  userInput.value = e\n  // Temporary fix when the picker is dismissed and the input box\n  // is focused, just mimic the behavior of antdesign.\n  if (!pickerVisible.value) {\n    pickerVisible.value = true\n  }\n}\n\nconst handleStartInput = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  if (userInput.value) {\n    userInput.value = [target.value, userInput.value[1]]\n  } else {\n    userInput.value = [target.value, null]\n  }\n}\n\nconst handleEndInput = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  if (userInput.value) {\n    userInput.value = [userInput.value[0], target.value]\n  } else {\n    userInput.value = [null, target.value]\n  }\n}\n\nconst handleStartChange = () => {\n  const values = userInput.value as string[]\n  const value = parseUserInputToDayjs(values && values[0]) as Dayjs\n  const parsedVal = unref(parsedValue) as [Dayjs, Dayjs]\n  if (value && value.isValid()) {\n    userInput.value = [\n      formatToString(value) as string,\n      displayValue.value?.[1] || null,\n    ]\n    const newValue = [value, parsedVal && (parsedVal[1] || null)] as DayOrDays\n    if (isValidValue(newValue)) {\n      emitInput(dayOrDaysToDate(newValue))\n      userInput.value = null\n    }\n  }\n}\n\nconst handleEndChange = () => {\n  const values = unref(userInput) as string[]\n  const value = parseUserInputToDayjs(values && values[1]) as Dayjs\n  const parsedVal = unref(parsedValue) as [Dayjs, Dayjs]\n  if (value && value.isValid()) {\n    userInput.value = [\n      unref(displayValue)?.[0] || null,\n      formatToString(value) as string,\n    ]\n    const newValue = [parsedVal && parsedVal[0], value] as DayOrDays\n    if (isValidValue(newValue)) {\n      emitInput(dayOrDaysToDate(newValue))\n      userInput.value = null\n    }\n  }\n}\n\nconst focus = () => {\n  inputRef.value?.focus()\n}\n\nconst blur = () => {\n  inputRef.value?.blur()\n}\n\nprovide(PICKER_BASE_INJECTION_KEY, {\n  props,\n  emptyValues,\n})\nprovide(ROOT_COMMON_PICKER_INJECTION_KEY, commonPicker)\n\ndefineExpose({\n  /**\n   * @description focus input box.\n   */\n  focus,\n  /**\n   * @description blur input box.\n   */\n  blur,\n  /**\n   * @description opens picker\n   */\n  handleOpen,\n  /**\n   * @description closes picker\n   */\n  handleClose,\n  /**\n   * @description pick item manually\n   */\n  onPick,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"picker.js","names":[],"sources":["../../../../../../../packages/components/time-picker/src/common/picker.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"refPopper\"\n    :visible=\"pickerVisible\"\n    effect=\"light\"\n    pure\n    trigger=\"click\"\n    v-bind=\"$attrs\"\n    role=\"dialog\"\n    teleported\n    :transition=\"`${nsDate.namespace.value}-zoom-in-top`\"\n    :popper-class=\"[`${nsDate.namespace.value}-picker__popper`, popperClass!]\"\n    :popper-style=\"popperStyle\"\n    :popper-options=\"elPopperOptions\"\n    :fallback-placements=\"fallbackPlacements\"\n    :gpu-acceleration=\"false\"\n    :placement=\"placement\"\n    :stop-popper-mouse-event=\"false\"\n    :hide-after=\"0\"\n    persistent\n    @before-show=\"onBeforeShow\"\n    @show=\"onShow\"\n    @hide=\"onHide\"\n  >\n    <template #default>\n      <el-input\n        v-if=\"!isRangeInput\"\n        :id=\"\n          // https://github.com/vuejs/language-tools/issues/2104#issuecomment-3092541527\n          id as string\n        \"\n        ref=\"inputRef\"\n        container-role=\"combobox\"\n        :model-value=\"\n          // https://github.com/vuejs/language-tools/issues/2104#issuecomment-3092541527\n          displayValue as string\n        \"\n        :name=\"\n          // https://github.com/vuejs/language-tools/issues/2104#issuecomment-3092541527\n          name as string\n        \"\n        :size=\"pickerSize\"\n        :disabled=\"pickerDisabled\"\n        :placeholder=\"placeholder\"\n        :class=\"[\n          nsDate.b('editor'),\n          nsDate.bm('editor', type),\n          nsDate.is('focus', pickerVisible),\n          $attrs.class,\n        ]\"\n        :style=\"$attrs.style\"\n        :readonly=\"\n          !editable ||\n          readonly ||\n          isDatesPicker ||\n          isMonthsPicker ||\n          isYearsPicker ||\n          type === 'week'\n        \"\n        :aria-label=\"ariaLabel\"\n        :tabindex=\"tabindex\"\n        :validate-event=\"false\"\n        @input=\"onUserInput\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @keydown=\"handleKeydownInput\"\n        @change=\"handleChange\"\n        @mousedown=\"onMouseDownInput\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n        @touchstart.passive=\"onTouchStartInput\"\n        @click.stop\n      >\n        <template #prefix>\n          <el-icon\n            v-if=\"triggerIcon\"\n            :class=\"nsInput.e('icon')\"\n            @mousedown.prevent=\"onMouseDownInput\"\n            @touchstart.passive=\"onTouchStartInput\"\n          >\n            <component :is=\"triggerIcon\" />\n          </el-icon>\n        </template>\n        <template #suffix>\n          <el-icon\n            v-if=\"showClearBtn && clearIcon\"\n            :class=\"`${nsInput.e('icon')} clear-icon`\"\n            @mousedown.prevent=\"NOOP\"\n            @click=\"onClear\"\n          >\n            <component :is=\"clearIcon\" />\n          </el-icon>\n        </template>\n      </el-input>\n      <picker-range-trigger\n        v-else\n        :id=\"\n          // https://github.com/vuejs/language-tools/issues/2104#issuecomment-3092541527\n          id as string[]\n        \"\n        ref=\"inputRef\"\n        :model-value=\"displayValue\"\n        :name=\"\n          // https://github.com/vuejs/language-tools/issues/2104#issuecomment-3092541527\n          name as string[]\n        \"\n        :disabled=\"pickerDisabled\"\n        :readonly=\"!editable || readonly\"\n        :start-placeholder=\"startPlaceholder\"\n        :end-placeholder=\"endPlaceholder\"\n        :class=\"rangeInputKls\"\n        :style=\"$attrs.style\"\n        :aria-label=\"ariaLabel\"\n        :tabindex=\"tabindex\"\n        autocomplete=\"off\"\n        role=\"combobox\"\n        @click=\"onMouseDownInput\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @start-input=\"handleStartInput\"\n        @start-change=\"handleStartChange\"\n        @end-input=\"handleEndInput\"\n        @end-change=\"handleEndChange\"\n        @mousedown=\"onMouseDownInput\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n        @touchstart.passive=\"onTouchStartInput\"\n        @keydown=\"handleKeydownInput\"\n      >\n        <template #prefix>\n          <el-icon\n            v-if=\"triggerIcon\"\n            :class=\"[nsInput.e('icon'), nsRange.e('icon')]\"\n          >\n            <component :is=\"triggerIcon\" />\n          </el-icon>\n        </template>\n        <template #range-separator>\n          <slot name=\"range-separator\">\n            <span :class=\"nsRange.b('separator')\">{{ rangeSeparator }}</span>\n          </slot>\n        </template>\n        <template #suffix>\n          <el-icon\n            v-if=\"clearIcon\"\n            :class=\"clearIconKls\"\n            @mousedown.prevent=\"NOOP\"\n            @click=\"onClear\"\n          >\n            <component :is=\"clearIcon\" />\n          </el-icon>\n        </template>\n      </picker-range-trigger>\n    </template>\n    <template #content>\n      <slot\n        :visible=\"pickerVisible\"\n        :actual-visible=\"pickerActualVisible\"\n        :parsed-value=\"parsedValue\"\n        :format=\"format\"\n        :date-format=\"dateFormat\"\n        :time-format=\"timeFormat\"\n        :unlink-panels=\"unlinkPanels\"\n        :type=\"type\"\n        :default-value=\"defaultValue\"\n        :show-now=\"showNow\"\n        :show-confirm=\"showConfirm\"\n        :show-footer=\"showFooter\"\n        :show-week-number=\"showWeekNumber\"\n        :single-panel=\"singlePanel\"\n        @pick=\"onPick\"\n        @select-range=\"setSelectionRange\"\n        @set-picker-option=\"onSetPickerOption\"\n        @calendar-change=\"onCalendarChange\"\n        @clear=\"onClear\"\n        @panel-change=\"onPanelChange\"\n        @mousedown.stop\n      />\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  inject,\n  nextTick,\n  onBeforeUnmount,\n  provide,\n  ref,\n  unref,\n  useAttrs,\n  watch,\n} from 'vue'\nimport { onClickOutside, unrefElement } from '@vueuse/core'\nimport {\n  useEmptyValues,\n  useFocusController,\n  useNamespace,\n} from '@element-plus/hooks'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormSize,\n} from '@element-plus/components/form'\nimport ElInput from '@element-plus/components/input'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { NOOP, debugWarn, getEventCode, isArray } from '@element-plus/utils'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { Calendar, Clock } from '@element-plus/icons-vue'\nimport { dayOrDaysToDate, valueEquals } from '../utils'\nimport {\n  PICKER_BASE_INJECTION_KEY,\n  PICKER_POPPER_OPTIONS_INJECTION_KEY,\n  ROOT_COMMON_PICKER_INJECTION_KEY,\n} from '../constants'\nimport { useCommonPicker } from '../composables/use-common-picker'\nimport { timePickerDefaultProps } from './props'\nimport PickerRangeTrigger from './picker-range-trigger.vue'\n\nimport type { InputInstance } from '@element-plus/components/input'\nimport type { Dayjs } from 'dayjs'\nimport type { ComponentPublicInstance, Ref } from 'vue'\nimport type { Options } from '@popperjs/core'\nimport type { DayOrDays, TimePickerDefaultProps, UserInput } from './props'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\n\ndefineOptions({\n  name: 'Picker',\n})\n\nconst props = defineProps(timePickerDefaultProps)\nconst emit = defineEmits([\n  UPDATE_MODEL_EVENT,\n  CHANGE_EVENT,\n  'focus',\n  'blur',\n  'clear',\n  'calendar-change',\n  'panel-change',\n  'visible-change',\n  'keydown',\n])\nconst attrs = useAttrs()\n\nconst nsDate = useNamespace('date')\nconst nsInput = useNamespace('input')\nconst nsRange = useNamespace('range')\n\nconst { formItem } = useFormItem()\nconst elPopperOptions = inject(\n  PICKER_POPPER_OPTIONS_INJECTION_KEY,\n  {} as Options\n)\nconst emptyValues = useEmptyValues(props, null)\n\nconst refPopper = ref<TooltipInstance>()\nconst inputRef = ref<InputInstance>()\nconst valueOnOpen = ref<TimePickerDefaultProps['modelValue'] | null>(null)\nlet hasJustTabExitedInput = false\n\nconst pickerDisabled = useFormDisabled()\n\nconst commonPicker = useCommonPicker(props, emit)\nconst {\n  parsedValue,\n  pickerActualVisible,\n  userInput,\n  pickerVisible,\n  pickerOptions,\n  valueIsEmpty,\n  emitInput,\n  onPick,\n  onSetPickerOption,\n  onCalendarChange,\n  onPanelChange,\n} = commonPicker\n\nconst { isFocused, handleFocus, handleBlur } = useFocusController(inputRef, {\n  disabled: pickerDisabled,\n  beforeFocus() {\n    return props.readonly\n  },\n  afterFocus() {\n    if (!props.automaticDropdown) return\n    pickerVisible.value = true\n  },\n  beforeBlur(event) {\n    return (\n      !hasJustTabExitedInput && refPopper.value?.isFocusInsideContent(event)\n    )\n  },\n  afterBlur() {\n    if (isTimePicker.value && !props.saveOnBlur) {\n      if (!valueIsEmpty.value) {\n        pickerOptions.value.handleCancel?.()\n      }\n    } else {\n      handleChange()\n    }\n    pickerVisible.value = false\n    hasJustTabExitedInput = false\n    props.validateEvent &&\n      formItem?.validate('blur').catch((err) => debugWarn(err))\n  },\n})\n\nconst hovering = ref(false)\n\nconst rangeInputKls = computed(() => [\n  nsDate.b('editor'),\n  nsDate.bm('editor', props.type),\n  nsInput.e('wrapper'),\n  nsDate.is('disabled', pickerDisabled.value),\n  nsDate.is('active', pickerVisible.value),\n  nsRange.b('editor'),\n  pickerSize ? nsRange.bm('editor', pickerSize.value) : '',\n  attrs.class,\n])\n\nconst clearIconKls = computed(() => [\n  nsInput.e('icon'),\n  nsRange.e('close-icon'),\n  !showClearBtn.value ? nsRange.em('close-icon', 'hidden') : '',\n])\n\nwatch(pickerVisible, (val) => {\n  if (!val) {\n    userInput.value = null\n    nextTick(() => {\n      emitChange(props.modelValue)\n    })\n  } else {\n    nextTick(() => {\n      if (val) {\n        valueOnOpen.value = props.modelValue\n      }\n    })\n  }\n})\nconst emitChange = (\n  val: TimePickerDefaultProps['modelValue'] | null,\n  isClear?: boolean\n) => {\n  // determine user real change only\n  if (isClear || !valueEquals(val, valueOnOpen.value)) {\n    emit(CHANGE_EVENT, val)\n    // Set the value of valueOnOpen when clearing to avoid triggering change events multiple times.\n    isClear && (valueOnOpen.value = val)\n    props.validateEvent &&\n      formItem?.validate('change').catch((err) => debugWarn(err))\n  }\n}\nconst emitKeydown = (e: KeyboardEvent) => {\n  emit('keydown', e)\n}\n\nconst refInput = computed<HTMLInputElement[]>(() => {\n  if (inputRef.value) {\n    return Array.from<HTMLInputElement>(\n      inputRef.value.$el.querySelectorAll('input')\n    )\n  }\n  return []\n})\n\n// @ts-ignore\nconst setSelectionRange = (start: number, end: number, pos?: 'min' | 'max') => {\n  const _inputs = refInput.value\n  if (!_inputs.length) return\n  if (!pos || pos === 'min') {\n    _inputs[0].setSelectionRange(start, end)\n    _inputs[0].focus()\n  } else if (pos === 'max') {\n    _inputs[1].setSelectionRange(start, end)\n    _inputs[1].focus()\n  }\n}\n\nconst onBeforeShow = () => {\n  pickerActualVisible.value = true\n}\n\nconst onShow = () => {\n  emit('visible-change', true)\n}\n\nconst onHide = () => {\n  pickerActualVisible.value = false\n  pickerVisible.value = false\n  emit('visible-change', false)\n}\n\nconst handleOpen = () => {\n  pickerVisible.value = true\n}\n\nconst handleClose = () => {\n  pickerVisible.value = false\n}\n\nconst displayValue = computed<UserInput>(() => {\n  const formattedValue = formatToString(parsedValue.value)\n  if (isArray(userInput.value)) {\n    return [\n      userInput.value[0] ?? (formattedValue && formattedValue[0]) ?? '',\n      userInput.value[1] ?? (formattedValue && formattedValue[1]) ?? '',\n    ]\n  } else if (userInput.value !== null) {\n    return userInput.value\n  }\n  if (isTimePicker.value && valueIsEmpty.value && !props.saveOnBlur) return ''\n  if (!isTimePicker.value && valueIsEmpty.value) return ''\n  if (!pickerVisible.value && valueIsEmpty.value) return ''\n  if (formattedValue) {\n    return isDatesPicker.value || isMonthsPicker.value || isYearsPicker.value\n      ? (formattedValue as Array<string>).join(', ')\n      : formattedValue\n  }\n  return ''\n})\n\nconst isTimeLikePicker = computed(() => props.type.includes('time'))\n\nconst isTimePicker = computed(() => props.type.startsWith('time'))\n\nconst isDatesPicker = computed(() => props.type === 'dates')\n\nconst isMonthsPicker = computed(() => props.type === 'months')\n\nconst isYearsPicker = computed(() => props.type === 'years')\n\nconst triggerIcon = computed(\n  () => props.prefixIcon || (isTimeLikePicker.value ? Clock : Calendar)\n)\n\nconst showClearBtn = computed(\n  () =>\n    props.clearable &&\n    !pickerDisabled.value &&\n    !props.readonly &&\n    !valueIsEmpty.value &&\n    (hovering.value || isFocused.value)\n)\n\nconst onClear = (event?: MouseEvent) => {\n  if (props.readonly || pickerDisabled.value) return\n  if (showClearBtn.value) {\n    event?.stopPropagation()\n    // When the handleClear Function was provided, emit null will be executed inside it\n    // There is no need for us to execute emit null twice. #14752\n    if (pickerOptions.value.handleClear) {\n      pickerOptions.value.handleClear()\n    } else {\n      emitInput(emptyValues.valueOnClear.value)\n    }\n    emitChange(emptyValues.valueOnClear.value, true)\n    onHide()\n  }\n  emit('clear')\n}\n\nconst onMouseDownInput = async (event: MouseEvent) => {\n  if (props.readonly || pickerDisabled.value) return\n  if (\n    (event.target as HTMLElement)?.tagName !== 'INPUT' ||\n    isFocused.value ||\n    !props.automaticDropdown\n  ) {\n    pickerVisible.value = true\n  }\n}\nconst onMouseEnter = () => {\n  if (props.readonly || pickerDisabled.value) return\n  if (!valueIsEmpty.value && props.clearable) {\n    hovering.value = true\n  }\n}\nconst onMouseLeave = () => {\n  hovering.value = false\n}\n\nconst onTouchStartInput = (event: TouchEvent) => {\n  if (props.readonly || pickerDisabled.value) return\n  if (\n    (event.touches[0].target as HTMLElement)?.tagName !== 'INPUT' ||\n    isFocused.value ||\n    !props.automaticDropdown\n  ) {\n    pickerVisible.value = true\n  }\n}\n\nconst isRangeInput = computed(() => {\n  return props.type.includes('range')\n})\n\nconst pickerSize = useFormSize()\n\nconst popperEl = computed(() => unref(refPopper)?.popperRef?.contentRef)\n\nconst stophandle = onClickOutside(\n  inputRef as Ref<ComponentPublicInstance>,\n  (e: PointerEvent) => {\n    const unrefedPopperEl = unref(popperEl)\n    const inputEl = unrefElement(inputRef as Ref<ComponentPublicInstance>)\n    if (\n      (unrefedPopperEl &&\n        (e.target === unrefedPopperEl ||\n          e.composedPath().includes(unrefedPopperEl))) ||\n      e.target === inputEl ||\n      (inputEl && e.composedPath().includes(inputEl))\n    )\n      return\n    pickerVisible.value = false\n  }\n)\n\nonBeforeUnmount(() => {\n  stophandle?.()\n})\n\nconst handleChange = () => {\n  if (isTimePicker.value && !props.saveOnBlur) return\n\n  const isRangeEmpty =\n    isArray(userInput.value) && userInput.value.every((v) => v === '')\n\n  if (userInput.value && !isRangeEmpty) {\n    const value = parseUserInputToDayjs(displayValue.value)\n    if (value) {\n      if (isValidValue(value)) {\n        emitInput(dayOrDaysToDate(value))\n      }\n      userInput.value = null\n    }\n  }\n  if (userInput.value === '' || isRangeEmpty) {\n    emitInput(emptyValues.valueOnClear.value)\n    emitChange(emptyValues.valueOnClear.value, true)\n    userInput.value = null\n  }\n}\n\nconst parseUserInputToDayjs = (value: UserInput) => {\n  if (!value) return null\n  return pickerOptions.value.parseUserInput!(value)\n}\n\nconst formatToString = (value: DayOrDays) => {\n  if (!value) return null\n  const res = isArray(value)\n    ? value.map((_) => _.format(props.format))\n    : value.format(props.format)\n  return res as UserInput\n}\n\nconst isValidValue = (value: DayOrDays) => {\n  return pickerOptions.value.isValidValue!(value)\n}\n\nconst handleKeydownInput = async (event: Event | KeyboardEvent) => {\n  if (props.readonly || pickerDisabled.value) return\n\n  const code = getEventCode(event as KeyboardEvent)\n  emitKeydown(event as KeyboardEvent)\n  if (code === EVENT_CODE.esc) {\n    if (pickerVisible.value === true) {\n      pickerVisible.value = false\n      event.preventDefault()\n      event.stopPropagation()\n    }\n    return\n  }\n\n  if (code === EVENT_CODE.down) {\n    if (pickerOptions.value.handleFocusPicker) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n    if (pickerVisible.value === false) {\n      pickerVisible.value = true\n      await nextTick()\n    }\n    if (pickerOptions.value.handleFocusPicker) {\n      pickerOptions.value.handleFocusPicker()\n      return\n    }\n  }\n\n  if (code === EVENT_CODE.tab) {\n    hasJustTabExitedInput = true\n    return\n  }\n\n  if (code === EVENT_CODE.enter || code === EVENT_CODE.numpadEnter) {\n    if (!pickerVisible.value) {\n      pickerVisible.value = true\n    } else if (\n      userInput.value === null ||\n      userInput.value === '' ||\n      isValidValue(parseUserInputToDayjs(displayValue.value) as DayOrDays)\n    ) {\n      handleChange()\n      pickerVisible.value = false\n    }\n    event.preventDefault()\n    event.stopPropagation()\n    return\n  }\n\n  // if user is typing, do not let picker handle key input\n  if (userInput.value) {\n    event.stopPropagation()\n    return\n  }\n  if (pickerOptions.value.handleKeydownInput) {\n    pickerOptions.value.handleKeydownInput(event as KeyboardEvent)\n  }\n}\nconst onUserInput = (e: string) => {\n  userInput.value = e\n  // Temporary fix when the picker is dismissed and the input box\n  // is focused, just mimic the behavior of antdesign.\n  if (!pickerVisible.value) {\n    pickerVisible.value = true\n  }\n}\n\nconst handleStartInput = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  if (userInput.value) {\n    userInput.value = [target.value, userInput.value[1]]\n  } else {\n    userInput.value = [target.value, null]\n  }\n}\n\nconst handleEndInput = (event: Event) => {\n  const target = event.target as HTMLInputElement\n  if (userInput.value) {\n    userInput.value = [userInput.value[0], target.value]\n  } else {\n    userInput.value = [null, target.value]\n  }\n}\n\nconst handleStartChange = () => {\n  const values = userInput.value as string[]\n  const value = parseUserInputToDayjs(values && values[0]) as Dayjs\n  const parsedVal = unref(parsedValue) as [Dayjs, Dayjs]\n  if (value && value.isValid()) {\n    userInput.value = [\n      formatToString(value) as string,\n      displayValue.value?.[1] || null,\n    ]\n    const newValue = [value, parsedVal && (parsedVal[1] || null)] as DayOrDays\n    if (isValidValue(newValue)) {\n      emitInput(dayOrDaysToDate(newValue))\n      userInput.value = null\n    }\n  }\n}\n\nconst handleEndChange = () => {\n  const values = unref(userInput) as string[]\n  const value = parseUserInputToDayjs(values && values[1]) as Dayjs\n  const parsedVal = unref(parsedValue) as [Dayjs, Dayjs]\n  if (value && value.isValid()) {\n    userInput.value = [\n      unref(displayValue)?.[0] || null,\n      formatToString(value) as string,\n    ]\n    const newValue = [parsedVal && parsedVal[0], value] as DayOrDays\n    if (isValidValue(newValue)) {\n      emitInput(dayOrDaysToDate(newValue))\n      userInput.value = null\n    }\n  }\n}\n\nconst focus = () => {\n  inputRef.value?.focus()\n}\n\nconst blur = () => {\n  inputRef.value?.blur()\n}\n\nprovide(PICKER_BASE_INJECTION_KEY, {\n  props,\n  emptyValues,\n})\nprovide(ROOT_COMMON_PICKER_INJECTION_KEY, commonPicker)\n\ndefineExpose({\n  /**\n   * @description focus input box.\n   */\n  focus,\n  /**\n   * @description blur input box.\n   */\n  blur,\n  /**\n   * @description opens picker\n   */\n  handleOpen,\n  /**\n   * @description closes picker\n   */\n  handleClose,\n  /**\n   * @description pick item manually\n   */\n  onPick,\n})\n</script>\n"],"mappings":""}

package/lib/components/time-picker/src/common/picker.vue.d.ts

@@ -21,6 +21,7 @@ declare var __VLS_97: {}, __VLS_115: {
     showConfirm: EpPropMergeType<BooleanConstructor, unknown, unknown>;
     showFooter: EpPropMergeType<BooleanConstructor, unknown, unknown>;
     showWeekNumber: boolean;
+    singlePanel: boolean;
     onMousedown: () => void;
     onPanelChange: (value: [Dayjs, Dayjs], mode: "month" | "year", view: unknown) => void;
     onClear: (event?: MouseEvent) => void;
@@ -59,6 +60,7 @@ declare const __VLS_base: 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 singlePanel: BooleanConstructor;
   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") | (() => _popperjs_core0.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") | (() => _popperjs_core0.Placement)) | null)[], _popperjs_core0.Placement, unknown, "bottom", boolean>;
   readonly fallbackPlacements: EpPropFinalized<(new (...args: any[]) => _popperjs_core0.Placement[]) | (() => _popperjs_core0.Placement[]) | (((new (...args: any[]) => _popperjs_core0.Placement[]) | (() => _popperjs_core0.Placement[])) | null)[], unknown, unknown, readonly ["bottom", "top", "right", "left"], boolean>;
   readonly disabledHours: {
@@ -293,6 +295,7 @@ declare const __VLS_base: 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 singlePanel: BooleanConstructor;
   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") | (() => _popperjs_core0.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") | (() => _popperjs_core0.Placement)) | null)[], _popperjs_core0.Placement, unknown, "bottom", boolean>;
   readonly fallbackPlacements: EpPropFinalized<(new (...args: any[]) => _popperjs_core0.Placement[]) | (() => _popperjs_core0.Placement[]) | (((new (...args: any[]) => _popperjs_core0.Placement[]) | (() => _popperjs_core0.Placement[])) | null)[], unknown, unknown, readonly ["bottom", "top", "right", "left"], boolean>;
   readonly disabledHours: {
@@ -507,6 +510,7 @@ declare const __VLS_base: vue.DefineComponent<vue.ExtractPropTypes<{
   readonly showWeekNumber: boolean;
   readonly arrowControl: boolean;
   readonly unlinkPanels: boolean;
+  readonly singlePanel: boolean;
   readonly isRange: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/lib/components/time-picker/src/common/picker.vue_vue_type_script_setup_true_lang.js

@@ -499,6 +499,7 @@ var picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue
 					showConfirm: _ctx.showConfirm,
 					showFooter: _ctx.showFooter,
 					showWeekNumber: _ctx.showWeekNumber,
+					singlePanel: _ctx.singlePanel,
 					onPick: _cache[1] || (_cache[1] = (...args) => (0, vue.unref)(onPick) && (0, vue.unref)(onPick)(...args)),
 					onSelectRange: setSelectionRange,
 					onSetPickerOption: _cache[2] || (_cache[2] = (...args) => (0, vue.unref)(onSetPickerOption) && (0, vue.unref)(onSetPickerOption)(...args)),