npm - @element-plus/nightly - Versions diffs - 0.0.20220117 → 0.0.20220121 - Mend

@element-plus/nightly 0.0.20220117 → 0.0.20220121

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

Files changed (1335) hide show

package/lib/components/date-picker/src/date-picker-com/panel-date-range.vue_vue_type_script_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"panel-date-range.vue_vue_type_script_lang.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-date-range.vue"],"sourcesContent":["<template>\n <div\n class=\"el-picker-panel el-date-range-picker\"\n :class=\"[\n {\n 'has-sidebar': $slots.sidebar \|\| hasShortcuts,\n 'has-time': showTime,\n },\n ]\"\n >\n <div class=\"el-picker-panel__body-wrapper\">\n <slot name=\"sidebar\" class=\"el-picker-panel__sidebar\"></slot>\n <div v-if=\"hasShortcuts\" class=\"el-picker-panel__sidebar\">\n <button\n v-for=\"(shortcut, key) in shortcuts\"\n :key=\"key\"\n type=\"button\"\n class=\"el-picker-panel__shortcut\"\n @click=\"handleShortcutClick(shortcut)\"\n >\n {{ shortcut.text }}\n </button>\n </div>\n <div class=\"el-picker-panel__body\">\n <div v-if=\"showTime\" class=\"el-date-range-picker__time-header\">\n <span class=\"el-date-range-picker__editors-wrap\">\n <span class=\"el-date-range-picker__time-picker-wrap\">\n <el-input\n size=\"small\"\n :disabled=\"rangeState.selecting\"\n :placeholder=\"t('el.datepicker.startDate')\"\n class=\"el-date-range-picker__editor\"\n :model-value=\"minVisibleDate\"\n @input=\"(val) => handleDateInput(val, 'min')\"\n @change=\"(val) => handleDateChange(val, 'min')\"\n />\n </span>\n <span\n v-clickoutside=\"handleMinTimeClose\"\n class=\"el-date-range-picker__time-picker-wrap\"\n >\n <el-input\n size=\"small\"\n class=\"el-date-range-picker__editor\"\n :disabled=\"rangeState.selecting\"\n :placeholder=\"t('el.datepicker.startTime')\"\n :model-value=\"minVisibleTime\"\n @focus=\"minTimePickerVisible = true\"\n @input=\"(val) => handleTimeInput(val, 'min')\"\n @change=\"(val) => handleTimeChange(val, 'min')\"\n />\n <time-pick-panel\n :visible=\"minTimePickerVisible\"\n :format=\"timeFormat\"\n datetime-role=\"start\"\n :time-arrow-control=\"arrowControl\"\n :parsed-value=\"leftDate\"\n @pick=\"handleMinTimePick\"\n />\n </span>\n </span>\n <span>\n <el-icon><arrow-right /></el-icon>\n </span>\n <span class=\"el-date-range-picker__editors-wrap is-right\">\n <span class=\"el-date-range-picker__time-picker-wrap\">\n <el-input\n size=\"small\"\n class=\"el-date-range-picker__editor\"\n :disabled=\"rangeState.selecting\"\n :placeholder=\"t('el.datepicker.endDate')\"\n :model-value=\"maxVisibleDate\"\n :readonly=\"!minDate\"\n @input=\"(val) => handleDateInput(val, 'max')\"\n @change=\"(val) => handleDateChange(val, 'max')\"\n />\n </span>\n <span\n v-clickoutside=\"handleMaxTimeClose\"\n class=\"el-date-range-picker__time-picker-wrap\"\n >\n <el-input\n size=\"small\"\n class=\"el-date-range-picker__editor\"\n :disabled=\"rangeState.selecting\"\n :placeholder=\"t('el.datepicker.endTime')\"\n :model-value=\"maxVisibleTime\"\n :readonly=\"!minDate\"\n @focus=\"minDate && (maxTimePickerVisible = true)\"\n @input=\"(val) => handleTimeInput(val, 'max')\"\n @change=\"(val) => handleTimeChange(val, 'max')\"\n />\n <time-pick-panel\n datetime-role=\"end\"\n :visible=\"maxTimePickerVisible\"\n :format=\"timeFormat\"\n :time-arrow-control=\"arrowControl\"\n :parsed-value=\"rightDate\"\n @pick=\"handleMaxTimePick\"\n />\n </span>\n </span>\n </div>\n <div\n class=\"el-picker-panel__content el-date-range-picker__content is-left\"\n >\n <div class=\"el-date-range-picker__header\">\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn d-arrow-left\"\n @click=\"leftPrevYear\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn arrow-left\"\n @click=\"leftPrevMonth\"\n >\n <el-icon><arrow-left /></el-icon>\n </button>\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableYearArrow\"\n :class=\"{ 'is-disabled': !enableYearArrow }\"\n class=\"el-picker-panel__icon-btn d-arrow-right\"\n @click=\"leftNextYear\"\n >\n <el-icon><d-arrow-right /></el-icon>\n </button>\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableMonthArrow\"\n :class=\"{ 'is-disabled': !enableMonthArrow }\"\n class=\"el-picker-panel__icon-btn arrow-right\"\n @click=\"leftNextMonth\"\n >\n <el-icon><arrow-right /></el-icon>\n </button>\n <div>{{ leftLabel }}</div>\n </div>\n <date-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 :cell-class-name=\"cellClassName\"\n @changerange=\"handleChangeRange\"\n @pick=\"handleRangePick\"\n @select=\"onSelect\"\n />\n </div>\n <div\n class=\"el-picker-panel__content el-date-range-picker__content is-right\"\n >\n <div class=\"el-date-range-picker__header\">\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableYearArrow\"\n :class=\"{ 'is-disabled': !enableYearArrow }\"\n class=\"el-picker-panel__icon-btn d-arrow-left\"\n @click=\"rightPrevYear\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableMonthArrow\"\n :class=\"{ 'is-disabled': !enableMonthArrow }\"\n class=\"el-picker-panel__icon-btn arrow-left\"\n @click=\"rightPrevMonth\"\n >\n <el-icon><arrow-left /></el-icon>\n </button>\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn d-arrow-right\"\n @click=\"rightNextYear\"\n >\n <el-icon><d-arrow-right /></el-icon>\n </button>\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn arrow-right\"\n @click=\"rightNextMonth\"\n >\n <el-icon><arrow-right /></el-icon>\n </button>\n <div>{{ rightLabel }}</div>\n </div>\n <date-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 :cell-class-name=\"cellClassName\"\n @changerange=\"handleChangeRange\"\n @pick=\"handleRangePick\"\n @select=\"onSelect\"\n />\n </div>\n </div>\n </div>\n <div v-if=\"showTime\" class=\"el-picker-panel__footer\">\n <el-button\n v-if=\"clearable\"\n size=\"small\"\n type=\"text\"\n class=\"el-picker-panel__link-btn\"\n @click=\"handleClear\"\n >\n {{ t('el.datepicker.clear') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n class=\"el-picker-panel__link-btn\"\n :disabled=\"btnDisabled\"\n @click=\"handleConfirm(false)\"\n >\n {{ t('el.datepicker.confirm') }}\n </el-button>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, ref, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport ElButton from '@element-plus/components/button'\nimport { ClickOutside } from '@element-plus/directives'\nimport { useLocale } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport {\n extractDateFormat,\n extractTimeFormat,\n TimePickPanel,\n} from '@element-plus/components/time-picker'\nimport ElIcon from '@element-plus/components/icon'\nimport { isValidDatePickType } from '@element-plus/utils/validators'\nimport {\n DArrowLeft,\n ArrowLeft,\n DArrowRight,\n ArrowRight,\n} from '@element-plus/icons-vue'\nimport DateTable from './basic-date-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type { IDatePickerType } from '../date-picker.type'\n\nexport default defineComponent({\n directives: { clickoutside: ClickOutside },\n\n components: {\n TimePickPanel,\n DateTable,\n ElInput,\n ElButton,\n ElIcon,\n DArrowLeft,\n ArrowLeft,\n DArrowRight,\n ArrowRight,\n },\n\n props: {\n unlinkPanels: Boolean,\n parsedValue: {\n type: Array as PropType<Dayjs[]>,\n },\n type: {\n type: String as PropType<IDatePickerType>,\n required: true,\n validator: isValidDatePickType,\n },\n },\n\n emits: ['pick', 'set-picker-option', 'calendar-change'],\n\n setup(props, ctx) {\n const { t, lang } = useLocale()\n const leftDate = ref(dayjs().locale(lang.value))\n const rightDate = ref(dayjs().locale(lang.value).add(1, 'month'))\n const minDate = ref(null)\n const maxDate = ref(null)\n const dateUserInput = ref({\n min: null,\n max: null,\n })\n\n const timeUserInput = ref({\n min: null,\n max: null,\n })\n\n const leftLabel = computed(() => {\n return `${leftDate.value.year()} ${t('el.datepicker.year')} ${t(\n `el.datepicker.month${leftDate.value.month() + 1}`\n )}`\n })\n\n const rightLabel = computed(() => {\n return `${rightDate.value.year()} ${t('el.datepicker.year')} ${t(\n `el.datepicker.month${rightDate.value.month() + 1}`\n )}`\n })\n\n const leftYear = computed(() => {\n return leftDate.value.year()\n })\n\n const leftMonth = computed(() => {\n return leftDate.value.month()\n })\n\n const rightYear = computed(() => {\n return rightDate.value.year()\n })\n\n const rightMonth = computed(() => {\n return rightDate.value.month()\n })\n\n const hasShortcuts = computed(() => !!shortcuts.length)\n\n const minVisibleDate = computed(() => {\n if (dateUserInput.value.min !== null) return dateUserInput.value.min\n if (minDate.value) return minDate.value.format(dateFormat.value)\n return ''\n })\n\n const maxVisibleDate = computed(() => {\n if (dateUserInput.value.max !== null) return dateUserInput.value.max\n if (maxDate.value \|\| minDate.value)\n return (maxDate.value \|\| minDate.value).format(dateFormat.value)\n return ''\n })\n\n const minVisibleTime = computed(() => {\n if (timeUserInput.value.min !== null) return timeUserInput.value.min\n if (minDate.value) return minDate.value.format(timeFormat.value)\n return ''\n })\n\n const maxVisibleTime = computed(() => {\n if (timeUserInput.value.max !== null) return timeUserInput.value.max\n if (maxDate.value \|\| minDate.value)\n return (maxDate.value \|\| minDate.value).format(timeFormat.value)\n return ''\n })\n\n const timeFormat = computed(() => {\n return extractTimeFormat(format)\n })\n\n const dateFormat = computed(() => {\n return extractDateFormat(format)\n })\n\n const leftPrevYear = () => {\n leftDate.value = leftDate.value.subtract(1, 'year')\n if (!props.unlinkPanels) {\n rightDate.value = leftDate.value.add(1, 'month')\n }\n }\n\n const leftPrevMonth = () => {\n leftDate.value = leftDate.value.subtract(1, 'month')\n if (!props.unlinkPanels) {\n rightDate.value = leftDate.value.add(1, 'month')\n }\n }\n\n const rightNextYear = () => {\n if (!props.unlinkPanels) {\n leftDate.value = leftDate.value.add(1, 'year')\n rightDate.value = leftDate.value.add(1, 'month')\n } else {\n rightDate.value = rightDate.value.add(1, 'year')\n }\n }\n\n const rightNextMonth = () => {\n if (!props.unlinkPanels) {\n leftDate.value = leftDate.value.add(1, 'month')\n rightDate.value = leftDate.value.add(1, 'month')\n } else {\n rightDate.value = rightDate.value.add(1, 'month')\n }\n }\n\n const leftNextYear = () => {\n leftDate.value = leftDate.value.add(1, 'year')\n }\n\n const leftNextMonth = () => {\n leftDate.value = leftDate.value.add(1, 'month')\n }\n\n const rightPrevYear = () => {\n rightDate.value = rightDate.value.subtract(1, 'year')\n }\n\n const rightPrevMonth = () => {\n rightDate.value = rightDate.value.subtract(1, 'month')\n }\n\n const enableMonthArrow = computed(() => {\n const nextMonth = (leftMonth.value + 1) % 12\n const yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0\n return (\n props.unlinkPanels &&\n new Date(leftYear.value + yearOffset, nextMonth) <\n new Date(rightYear.value, rightMonth.value)\n )\n })\n\n const enableYearArrow = computed(() => {\n return (\n props.unlinkPanels &&\n rightYear.value * 12 +\n rightMonth.value -\n (leftYear.value * 12 + leftMonth.value + 1) >=\n 12\n )\n })\n\n const isValidValue = (value) => {\n return (\n Array.isArray(value) &&\n value[0] &&\n value[1] &&\n value[0].valueOf() <= value[1].valueOf()\n )\n }\n\n const rangeState = ref({\n endDate: null,\n selecting: false,\n })\n\n const btnDisabled = computed(() => {\n return !(\n minDate.value &&\n maxDate.value &&\n !rangeState.value.selecting &&\n isValidValue([minDate.value, maxDate.value])\n )\n })\n\n const handleChangeRange = (val) => {\n rangeState.value = val\n }\n\n const onSelect = (selecting) => {\n rangeState.value.selecting = selecting\n if (!selecting) {\n rangeState.value.endDate = null\n }\n }\n\n const showTime = computed(\n () => props.type === 'datetime' \|\| props.type === 'datetimerange'\n )\n\n const handleConfirm = (visible = false) => {\n if (isValidValue([minDate.value, maxDate.value])) {\n ctx.emit('pick', [minDate.value, maxDate.value], visible)\n }\n }\n\n const formatEmit = (emitDayjs: Dayjs, index?) => {\n if (!emitDayjs) return\n if (defaultTime) {\n const defaultTimeD = dayjs(defaultTime[index] \|\| defaultTime).locale(\n lang.value\n )\n return defaultTimeD\n .year(emitDayjs.year())\n .month(emitDayjs.month())\n .date(emitDayjs.date())\n }\n return emitDayjs\n }\n\n const handleRangePick = (val, close = true) => {\n const min_ = val.minDate\n const max_ = val.maxDate\n const minDate_ = formatEmit(min_, 0)\n const maxDate_ = formatEmit(max_, 1)\n\n if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n return\n }\n ctx.emit('calendar-change', [min_.toDate(), max_ && max_.toDate()])\n maxDate.value = maxDate_\n minDate.value = minDate_\n\n if (!close \|\| showTime.value) return\n handleConfirm()\n }\n\n const handleShortcutClick = (shortcut) => {\n const shortcutValues =\n typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n if (shortcutValues) {\n ctx.emit('pick', [\n dayjs(shortcutValues[0]).locale(lang.value),\n dayjs(shortcutValues[1]).locale(lang.value),\n ])\n return\n }\n if (shortcut.onClick) {\n shortcut.onClick(ctx)\n }\n }\n\n const minTimePickerVisible = ref(false)\n const maxTimePickerVisible = ref(false)\n\n const handleMinTimeClose = () => {\n minTimePickerVisible.value = false\n }\n\n const handleMaxTimeClose = () => {\n maxTimePickerVisible.value = false\n }\n\n const handleDateInput = (value, type) => {\n dateUserInput.value[type] = value\n const parsedValueD = dayjs(value, dateFormat.value).locale(lang.value)\n\n if (parsedValueD.isValid()) {\n if (disabledDate && disabledDate(parsedValueD.toDate())) {\n return\n }\n if (type === 'min') {\n leftDate.value = parsedValueD\n minDate.value = (minDate.value \|\| leftDate.value)\n .year(parsedValueD.year())\n .month(parsedValueD.month())\n .date(parsedValueD.date())\n if (!props.unlinkPanels) {\n rightDate.value = parsedValueD.add(1, 'month')\n maxDate.value = minDate.value.add(1, 'month')\n }\n } else {\n rightDate.value = parsedValueD\n maxDate.value = (maxDate.value \|\| rightDate.value)\n .year(parsedValueD.year())\n .month(parsedValueD.month())\n .date(parsedValueD.date())\n if (!props.unlinkPanels) {\n leftDate.value = parsedValueD.subtract(1, 'month')\n minDate.value = maxDate.value.subtract(1, 'month')\n }\n }\n }\n }\n\n const handleDateChange = (_, type) => {\n dateUserInput.value[type] = null\n }\n\n const handleTimeInput = (value, type) => {\n timeUserInput.value[type] = value\n const parsedValueD = dayjs(value, timeFormat.value).locale(lang.value)\n\n if (parsedValueD.isValid()) {\n if (type === 'min') {\n minTimePickerVisible.value = true\n minDate.value = (minDate.value \|\| leftDate.value)\n .hour(parsedValueD.hour())\n .minute(parsedValueD.minute())\n .second(parsedValueD.second())\n if (!maxDate.value \|\| maxDate.value.isBefore(minDate.value)) {\n maxDate.value = minDate.value\n }\n } else {\n maxTimePickerVisible.value = true\n maxDate.value = (maxDate.value \|\| rightDate.value)\n .hour(parsedValueD.hour())\n .minute(parsedValueD.minute())\n .second(parsedValueD.second())\n rightDate.value = maxDate.value\n if (maxDate.value && maxDate.value.isBefore(minDate.value)) {\n minDate.value = maxDate.value\n }\n }\n }\n }\n\n const handleTimeChange = (value, type) => {\n timeUserInput.value[type] = null\n if (type === 'min') {\n leftDate.value = minDate.value\n minTimePickerVisible.value = false\n } else {\n rightDate.value = maxDate.value\n maxTimePickerVisible.value = false\n }\n }\n\n const handleMinTimePick = (value, visible, first) => {\n if (timeUserInput.value.min) return\n if (value) {\n leftDate.value = value\n minDate.value = (minDate.value \|\| leftDate.value)\n .hour(value.hour())\n .minute(value.minute())\n .second(value.second())\n }\n\n if (!first) {\n minTimePickerVisible.value = visible\n }\n\n if (!maxDate.value \|\| maxDate.value.isBefore(minDate.value)) {\n maxDate.value = minDate.value\n rightDate.value = value\n }\n }\n\n const handleMaxTimePick = (value, visible, first) => {\n if (timeUserInput.value.max) return\n if (value) {\n rightDate.value = value\n maxDate.value = (maxDate.value \|\| rightDate.value)\n .hour(value.hour())\n .minute(value.minute())\n .second(value.second())\n }\n\n if (!first) {\n maxTimePickerVisible.value = visible\n }\n\n if (maxDate.value && maxDate.value.isBefore(minDate.value)) {\n minDate.value = maxDate.value\n }\n }\n\n const handleClear = () => {\n leftDate.value = getDefaultValue()[0]\n rightDate.value = leftDate.value.add(1, 'month')\n ctx.emit('pick', null)\n }\n\n const formatToString = (value: Dayjs \| Dayjs[]) => {\n return Array.isArray(value)\n ? value.map((_) => _.format(format))\n : value.format(format)\n }\n\n const parseUserInput = (value: Dayjs \| Dayjs[]) => {\n return Array.isArray(value)\n ? value.map((_) => dayjs(_, format).locale(lang.value))\n : dayjs(value, format).locale(lang.value)\n }\n\n const getDefaultValue = () => {\n let start: Dayjs\n if (Array.isArray(defaultValue)) {\n const left = dayjs(defaultValue[0])\n let right = dayjs(defaultValue[1])\n if (!props.unlinkPanels) {\n right = left.add(1, 'month')\n }\n return [left, right]\n } else if (defaultValue) {\n start = dayjs(defaultValue)\n } else {\n start = dayjs()\n }\n\n start = start.locale(lang.value)\n return [start, start.add(1, 'month')]\n }\n\n ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n ctx.emit('set-picker-option', ['formatToString', formatToString])\n ctx.emit('set-picker-option', ['handleClear', handleClear])\n\n const pickerBase = inject('EP_PICKER_BASE') as any\n const {\n shortcuts,\n disabledDate,\n cellClassName,\n format,\n defaultTime,\n defaultValue,\n arrowControl,\n clearable,\n } = pickerBase.props\n\n watch(\n () => props.parsedValue,\n (newVal) => {\n if (newVal && newVal.length === 2) {\n minDate.value = newVal[0]\n maxDate.value = newVal[1]\n leftDate.value = minDate.value\n if (props.unlinkPanels && maxDate.value) {\n const minDateYear = minDate.value.year()\n const minDateMonth = minDate.value.month()\n const maxDateYear = maxDate.value.year()\n const maxDateMonth = maxDate.value.month()\n rightDate.value =\n minDateYear === maxDateYear && minDateMonth === maxDateMonth\n ? maxDate.value.add(1, 'month')\n : maxDate.value\n } else {\n rightDate.value = leftDate.value.add(1, 'month')\n if (maxDate.value) {\n rightDate.value = rightDate.value\n .hour(maxDate.value.hour())\n .minute(maxDate.value.minute())\n .second(maxDate.value.second())\n }\n }\n } else {\n const defaultArr = getDefaultValue()\n minDate.value = null\n maxDate.value = null\n leftDate.value = defaultArr[0]\n rightDate.value = defaultArr[1]\n }\n },\n { immediate: true }\n )\n\n return {\n shortcuts,\n disabledDate,\n cellClassName,\n minTimePickerVisible,\n maxTimePickerVisible,\n handleMinTimeClose,\n handleMaxTimeClose,\n handleShortcutClick,\n rangeState,\n minDate,\n maxDate,\n handleRangePick,\n onSelect,\n handleChangeRange,\n btnDisabled,\n enableYearArrow,\n enableMonthArrow,\n rightPrevMonth,\n rightPrevYear,\n rightNextMonth,\n rightNextYear,\n leftPrevMonth,\n leftPrevYear,\n leftNextMonth,\n leftNextYear,\n hasShortcuts,\n leftLabel,\n rightLabel,\n leftDate,\n rightDate,\n showTime,\n t,\n minVisibleDate,\n maxVisibleDate,\n minVisibleTime,\n maxVisibleTime,\n arrowControl,\n handleDateInput,\n handleDateChange,\n handleTimeInput,\n handleTimeChange,\n handleMinTimePick,\n handleMaxTimePick,\n handleClear,\n handleConfirm,\n timeFormat,\n clearable,\n }\n },\n})\n</script>\n"],"names":["defineComponent","TimePickPanel","DateTable","ElButton","ElIcon","ArrowLeft","DArrowRight","ArrowRight","dayjs","ref","computed","extractTimeFormat","extractDateFormat","inject"],"mappings":"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"}
1	+ {"version":3,"file":"panel-date-range.vue_vue_type_script_lang.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-date-range.vue"],"sourcesContent":["<template>\n <div\n class=\"el-picker-panel el-date-range-picker\"\n :class=\"[\n {\n 'has-sidebar': $slots.sidebar \|\| hasShortcuts,\n 'has-time': showTime,\n },\n ]\"\n >\n <div class=\"el-picker-panel__body-wrapper\">\n <slot name=\"sidebar\" class=\"el-picker-panel__sidebar\"></slot>\n <div v-if=\"hasShortcuts\" class=\"el-picker-panel__sidebar\">\n <button\n v-for=\"(shortcut, key) in shortcuts\"\n :key=\"key\"\n type=\"button\"\n class=\"el-picker-panel__shortcut\"\n @click=\"handleShortcutClick(shortcut)\"\n >\n {{ shortcut.text }}\n </button>\n </div>\n <div class=\"el-picker-panel__body\">\n <div v-if=\"showTime\" class=\"el-date-range-picker__time-header\">\n <span class=\"el-date-range-picker__editors-wrap\">\n <span class=\"el-date-range-picker__time-picker-wrap\">\n <el-input\n size=\"small\"\n :disabled=\"rangeState.selecting\"\n :placeholder=\"t('el.datepicker.startDate')\"\n class=\"el-date-range-picker__editor\"\n :model-value=\"minVisibleDate\"\n @input=\"(val) => handleDateInput(val, 'min')\"\n @change=\"(val) => handleDateChange(val, 'min')\"\n />\n </span>\n <span\n v-clickoutside=\"handleMinTimeClose\"\n class=\"el-date-range-picker__time-picker-wrap\"\n >\n <el-input\n size=\"small\"\n class=\"el-date-range-picker__editor\"\n :disabled=\"rangeState.selecting\"\n :placeholder=\"t('el.datepicker.startTime')\"\n :model-value=\"minVisibleTime\"\n @focus=\"minTimePickerVisible = true\"\n @input=\"(val) => handleTimeInput(val, 'min')\"\n @change=\"(val) => handleTimeChange(val, 'min')\"\n />\n <time-pick-panel\n :visible=\"minTimePickerVisible\"\n :format=\"timeFormat\"\n datetime-role=\"start\"\n :time-arrow-control=\"arrowControl\"\n :parsed-value=\"leftDate\"\n @pick=\"handleMinTimePick\"\n />\n </span>\n </span>\n <span>\n <el-icon><arrow-right /></el-icon>\n </span>\n <span class=\"el-date-range-picker__editors-wrap is-right\">\n <span class=\"el-date-range-picker__time-picker-wrap\">\n <el-input\n size=\"small\"\n class=\"el-date-range-picker__editor\"\n :disabled=\"rangeState.selecting\"\n :placeholder=\"t('el.datepicker.endDate')\"\n :model-value=\"maxVisibleDate\"\n :readonly=\"!minDate\"\n @input=\"(val) => handleDateInput(val, 'max')\"\n @change=\"(val) => handleDateChange(val, 'max')\"\n />\n </span>\n <span\n v-clickoutside=\"handleMaxTimeClose\"\n class=\"el-date-range-picker__time-picker-wrap\"\n >\n <el-input\n size=\"small\"\n class=\"el-date-range-picker__editor\"\n :disabled=\"rangeState.selecting\"\n :placeholder=\"t('el.datepicker.endTime')\"\n :model-value=\"maxVisibleTime\"\n :readonly=\"!minDate\"\n @focus=\"minDate && (maxTimePickerVisible = true)\"\n @input=\"(val) => handleTimeInput(val, 'max')\"\n @change=\"(val) => handleTimeChange(val, 'max')\"\n />\n <time-pick-panel\n datetime-role=\"end\"\n :visible=\"maxTimePickerVisible\"\n :format=\"timeFormat\"\n :time-arrow-control=\"arrowControl\"\n :parsed-value=\"rightDate\"\n @pick=\"handleMaxTimePick\"\n />\n </span>\n </span>\n </div>\n <div\n class=\"el-picker-panel__content el-date-range-picker__content is-left\"\n >\n <div class=\"el-date-range-picker__header\">\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn d-arrow-left\"\n @click=\"leftPrevYear\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn arrow-left\"\n @click=\"leftPrevMonth\"\n >\n <el-icon><arrow-left /></el-icon>\n </button>\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableYearArrow\"\n :class=\"{ 'is-disabled': !enableYearArrow }\"\n class=\"el-picker-panel__icon-btn d-arrow-right\"\n @click=\"leftNextYear\"\n >\n <el-icon><d-arrow-right /></el-icon>\n </button>\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableMonthArrow\"\n :class=\"{ 'is-disabled': !enableMonthArrow }\"\n class=\"el-picker-panel__icon-btn arrow-right\"\n @click=\"leftNextMonth\"\n >\n <el-icon><arrow-right /></el-icon>\n </button>\n <div>{{ leftLabel }}</div>\n </div>\n <date-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 :cell-class-name=\"cellClassName\"\n @changerange=\"handleChangeRange\"\n @pick=\"handleRangePick\"\n @select=\"onSelect\"\n />\n </div>\n <div\n class=\"el-picker-panel__content el-date-range-picker__content is-right\"\n >\n <div class=\"el-date-range-picker__header\">\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableYearArrow\"\n :class=\"{ 'is-disabled': !enableYearArrow }\"\n class=\"el-picker-panel__icon-btn d-arrow-left\"\n @click=\"rightPrevYear\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableMonthArrow\"\n :class=\"{ 'is-disabled': !enableMonthArrow }\"\n class=\"el-picker-panel__icon-btn arrow-left\"\n @click=\"rightPrevMonth\"\n >\n <el-icon><arrow-left /></el-icon>\n </button>\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn d-arrow-right\"\n @click=\"rightNextYear\"\n >\n <el-icon><d-arrow-right /></el-icon>\n </button>\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn arrow-right\"\n @click=\"rightNextMonth\"\n >\n <el-icon><arrow-right /></el-icon>\n </button>\n <div>{{ rightLabel }}</div>\n </div>\n <date-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 :cell-class-name=\"cellClassName\"\n @changerange=\"handleChangeRange\"\n @pick=\"handleRangePick\"\n @select=\"onSelect\"\n />\n </div>\n </div>\n </div>\n <div v-if=\"showTime\" class=\"el-picker-panel__footer\">\n <el-button\n v-if=\"clearable\"\n size=\"small\"\n type=\"text\"\n class=\"el-picker-panel__link-btn\"\n @click=\"handleClear\"\n >\n {{ t('el.datepicker.clear') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n class=\"el-picker-panel__link-btn\"\n :disabled=\"btnDisabled\"\n @click=\"handleConfirm(false)\"\n >\n {{ t('el.datepicker.confirm') }}\n </el-button>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, ref, watch, toRef } from 'vue'\nimport dayjs from 'dayjs'\nimport ElButton from '@element-plus/components/button'\nimport { ClickOutside } from '@element-plus/directives'\nimport { useLocale } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport {\n extractDateFormat,\n extractTimeFormat,\n TimePickPanel,\n} from '@element-plus/components/time-picker'\nimport ElIcon from '@element-plus/components/icon'\nimport { isValidDatePickType } from '@element-plus/utils/validators'\nimport {\n DArrowLeft,\n ArrowLeft,\n DArrowRight,\n ArrowRight,\n} from '@element-plus/icons-vue'\nimport DateTable from './basic-date-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type { IDatePickerType } from '../date-picker.type'\n\nexport default defineComponent({\n directives: { clickoutside: ClickOutside },\n\n components: {\n TimePickPanel,\n DateTable,\n ElInput,\n ElButton,\n ElIcon,\n DArrowLeft,\n ArrowLeft,\n DArrowRight,\n ArrowRight,\n },\n\n props: {\n unlinkPanels: Boolean,\n parsedValue: {\n type: Array as PropType<Dayjs[]>,\n },\n type: {\n type: String as PropType<IDatePickerType>,\n required: true,\n validator: isValidDatePickType,\n },\n },\n\n emits: ['pick', 'set-picker-option', 'calendar-change', 'panel-change'],\n\n setup(props, ctx) {\n const { t, lang } = useLocale()\n const leftDate = ref(dayjs().locale(lang.value))\n const rightDate = ref(dayjs().locale(lang.value).add(1, 'month'))\n const minDate = ref(null)\n const maxDate = ref(null)\n const dateUserInput = ref({\n min: null,\n max: null,\n })\n\n const timeUserInput = ref({\n min: null,\n max: null,\n })\n\n const leftLabel = computed(() => {\n return `${leftDate.value.year()} ${t('el.datepicker.year')} ${t(\n `el.datepicker.month${leftDate.value.month() + 1}`\n )}`\n })\n\n const rightLabel = computed(() => {\n return `${rightDate.value.year()} ${t('el.datepicker.year')} ${t(\n `el.datepicker.month${rightDate.value.month() + 1}`\n )}`\n })\n\n const leftYear = computed(() => {\n return leftDate.value.year()\n })\n\n const leftMonth = computed(() => {\n return leftDate.value.month()\n })\n\n const rightYear = computed(() => {\n return rightDate.value.year()\n })\n\n const rightMonth = computed(() => {\n return rightDate.value.month()\n })\n\n const hasShortcuts = computed(() => !!shortcuts.length)\n\n const minVisibleDate = computed(() => {\n if (dateUserInput.value.min !== null) return dateUserInput.value.min\n if (minDate.value) return minDate.value.format(dateFormat.value)\n return ''\n })\n\n const maxVisibleDate = computed(() => {\n if (dateUserInput.value.max !== null) return dateUserInput.value.max\n if (maxDate.value \|\| minDate.value)\n return (maxDate.value \|\| minDate.value).format(dateFormat.value)\n return ''\n })\n\n const minVisibleTime = computed(() => {\n if (timeUserInput.value.min !== null) return timeUserInput.value.min\n if (minDate.value) return minDate.value.format(timeFormat.value)\n return ''\n })\n\n const maxVisibleTime = computed(() => {\n if (timeUserInput.value.max !== null) return timeUserInput.value.max\n if (maxDate.value \|\| minDate.value)\n return (maxDate.value \|\| minDate.value).format(timeFormat.value)\n return ''\n })\n\n const timeFormat = computed(() => {\n return extractTimeFormat(format)\n })\n\n const dateFormat = computed(() => {\n return extractDateFormat(format)\n })\n\n const leftPrevYear = () => {\n leftDate.value = leftDate.value.subtract(1, 'year')\n if (!props.unlinkPanels) {\n rightDate.value = leftDate.value.add(1, 'month')\n }\n handlePanelChange('year')\n }\n\n const leftPrevMonth = () => {\n leftDate.value = leftDate.value.subtract(1, 'month')\n if (!props.unlinkPanels) {\n rightDate.value = leftDate.value.add(1, 'month')\n }\n handlePanelChange('month')\n }\n\n const rightNextYear = () => {\n if (!props.unlinkPanels) {\n leftDate.value = leftDate.value.add(1, 'year')\n rightDate.value = leftDate.value.add(1, 'month')\n } else {\n rightDate.value = rightDate.value.add(1, 'year')\n }\n handlePanelChange('year')\n }\n\n const rightNextMonth = () => {\n if (!props.unlinkPanels) {\n leftDate.value = leftDate.value.add(1, 'month')\n rightDate.value = leftDate.value.add(1, 'month')\n } else {\n rightDate.value = rightDate.value.add(1, 'month')\n }\n handlePanelChange('month')\n }\n\n const leftNextYear = () => {\n leftDate.value = leftDate.value.add(1, 'year')\n handlePanelChange('year')\n }\n\n const leftNextMonth = () => {\n leftDate.value = leftDate.value.add(1, 'month')\n handlePanelChange('month')\n }\n\n const rightPrevYear = () => {\n rightDate.value = rightDate.value.subtract(1, 'year')\n handlePanelChange('year')\n }\n\n const rightPrevMonth = () => {\n rightDate.value = rightDate.value.subtract(1, 'month')\n handlePanelChange('month')\n }\n\n const handlePanelChange = (mode: 'month' \| 'year') => {\n ctx.emit(\n 'panel-change',\n [leftDate.value.toDate(), rightDate.value.toDate()],\n mode\n )\n }\n\n const enableMonthArrow = computed(() => {\n const nextMonth = (leftMonth.value + 1) % 12\n const yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0\n return (\n props.unlinkPanels &&\n new Date(leftYear.value + yearOffset, nextMonth) <\n new Date(rightYear.value, rightMonth.value)\n )\n })\n\n const enableYearArrow = computed(() => {\n return (\n props.unlinkPanels &&\n rightYear.value * 12 +\n rightMonth.value -\n (leftYear.value * 12 + leftMonth.value + 1) >=\n 12\n )\n })\n\n const isValidValue = (value) => {\n return (\n Array.isArray(value) &&\n value[0] &&\n value[1] &&\n value[0].valueOf() <= value[1].valueOf()\n )\n }\n\n const rangeState = ref({\n endDate: null,\n selecting: false,\n })\n\n const btnDisabled = computed(() => {\n return !(\n minDate.value &&\n maxDate.value &&\n !rangeState.value.selecting &&\n isValidValue([minDate.value, maxDate.value])\n )\n })\n\n const handleChangeRange = (val) => {\n rangeState.value = val\n }\n\n const onSelect = (selecting) => {\n rangeState.value.selecting = selecting\n if (!selecting) {\n rangeState.value.endDate = null\n }\n }\n\n const showTime = computed(\n () => props.type === 'datetime' \|\| props.type === 'datetimerange'\n )\n\n const handleConfirm = (visible = false) => {\n if (isValidValue([minDate.value, maxDate.value])) {\n ctx.emit('pick', [minDate.value, maxDate.value], visible)\n }\n }\n\n const formatEmit = (emitDayjs: Dayjs, index?) => {\n if (!emitDayjs) return\n if (defaultTime) {\n const defaultTimeD = dayjs(defaultTime[index] \|\| defaultTime).locale(\n lang.value\n )\n return defaultTimeD\n .year(emitDayjs.year())\n .month(emitDayjs.month())\n .date(emitDayjs.date())\n }\n return emitDayjs\n }\n\n const handleRangePick = (val, close = true) => {\n const min_ = val.minDate\n const max_ = val.maxDate\n const minDate_ = formatEmit(min_, 0)\n const maxDate_ = formatEmit(max_, 1)\n\n if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n return\n }\n ctx.emit('calendar-change', [min_.toDate(), max_ && max_.toDate()])\n maxDate.value = maxDate_\n minDate.value = minDate_\n\n if (!close \|\| showTime.value) return\n handleConfirm()\n }\n\n const handleShortcutClick = (shortcut) => {\n const shortcutValues =\n typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n if (shortcutValues) {\n ctx.emit('pick', [\n dayjs(shortcutValues[0]).locale(lang.value),\n dayjs(shortcutValues[1]).locale(lang.value),\n ])\n return\n }\n if (shortcut.onClick) {\n shortcut.onClick(ctx)\n }\n }\n\n const minTimePickerVisible = ref(false)\n const maxTimePickerVisible = ref(false)\n\n const handleMinTimeClose = () => {\n minTimePickerVisible.value = false\n }\n\n const handleMaxTimeClose = () => {\n maxTimePickerVisible.value = false\n }\n\n const handleDateInput = (value, type) => {\n dateUserInput.value[type] = value\n const parsedValueD = dayjs(value, dateFormat.value).locale(lang.value)\n\n if (parsedValueD.isValid()) {\n if (disabledDate && disabledDate(parsedValueD.toDate())) {\n return\n }\n if (type === 'min') {\n leftDate.value = parsedValueD\n minDate.value = (minDate.value \|\| leftDate.value)\n .year(parsedValueD.year())\n .month(parsedValueD.month())\n .date(parsedValueD.date())\n if (!props.unlinkPanels) {\n rightDate.value = parsedValueD.add(1, 'month')\n maxDate.value = minDate.value.add(1, 'month')\n }\n } else {\n rightDate.value = parsedValueD\n maxDate.value = (maxDate.value \|\| rightDate.value)\n .year(parsedValueD.year())\n .month(parsedValueD.month())\n .date(parsedValueD.date())\n if (!props.unlinkPanels) {\n leftDate.value = parsedValueD.subtract(1, 'month')\n minDate.value = maxDate.value.subtract(1, 'month')\n }\n }\n }\n }\n\n const handleDateChange = (_, type) => {\n dateUserInput.value[type] = null\n }\n\n const handleTimeInput = (value, type) => {\n timeUserInput.value[type] = value\n const parsedValueD = dayjs(value, timeFormat.value).locale(lang.value)\n\n if (parsedValueD.isValid()) {\n if (type === 'min') {\n minTimePickerVisible.value = true\n minDate.value = (minDate.value \|\| leftDate.value)\n .hour(parsedValueD.hour())\n .minute(parsedValueD.minute())\n .second(parsedValueD.second())\n if (!maxDate.value \|\| maxDate.value.isBefore(minDate.value)) {\n maxDate.value = minDate.value\n }\n } else {\n maxTimePickerVisible.value = true\n maxDate.value = (maxDate.value \|\| rightDate.value)\n .hour(parsedValueD.hour())\n .minute(parsedValueD.minute())\n .second(parsedValueD.second())\n rightDate.value = maxDate.value\n if (maxDate.value && maxDate.value.isBefore(minDate.value)) {\n minDate.value = maxDate.value\n }\n }\n }\n }\n\n const handleTimeChange = (value, type) => {\n timeUserInput.value[type] = null\n if (type === 'min') {\n leftDate.value = minDate.value\n minTimePickerVisible.value = false\n } else {\n rightDate.value = maxDate.value\n maxTimePickerVisible.value = false\n }\n }\n\n const handleMinTimePick = (value, visible, first) => {\n if (timeUserInput.value.min) return\n if (value) {\n leftDate.value = value\n minDate.value = (minDate.value \|\| leftDate.value)\n .hour(value.hour())\n .minute(value.minute())\n .second(value.second())\n }\n\n if (!first) {\n minTimePickerVisible.value = visible\n }\n\n if (!maxDate.value \|\| maxDate.value.isBefore(minDate.value)) {\n maxDate.value = minDate.value\n rightDate.value = value\n }\n }\n\n const handleMaxTimePick = (value, visible, first) => {\n if (timeUserInput.value.max) return\n if (value) {\n rightDate.value = value\n maxDate.value = (maxDate.value \|\| rightDate.value)\n .hour(value.hour())\n .minute(value.minute())\n .second(value.second())\n }\n\n if (!first) {\n maxTimePickerVisible.value = visible\n }\n\n if (maxDate.value && maxDate.value.isBefore(minDate.value)) {\n minDate.value = maxDate.value\n }\n }\n\n const handleClear = () => {\n leftDate.value = getDefaultValue()[0]\n rightDate.value = leftDate.value.add(1, 'month')\n ctx.emit('pick', null)\n }\n\n const formatToString = (value: Dayjs \| Dayjs[]) => {\n return Array.isArray(value)\n ? value.map((_) => _.format(format))\n : value.format(format)\n }\n\n const parseUserInput = (value: Dayjs \| Dayjs[]) => {\n return Array.isArray(value)\n ? value.map((_) => dayjs(_, format).locale(lang.value))\n : dayjs(value, format).locale(lang.value)\n }\n\n const getDefaultValue = () => {\n let start: Dayjs\n if (Array.isArray(defaultValue.value)) {\n const left = dayjs(defaultValue.value[0])\n let right = dayjs(defaultValue.value[1])\n if (!props.unlinkPanels) {\n right = left.add(1, 'month')\n }\n return [left, right]\n } else if (defaultValue.value) {\n start = dayjs(defaultValue.value)\n } else {\n start = dayjs()\n }\n\n start = start.locale(lang.value)\n return [start, start.add(1, 'month')]\n }\n\n ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n ctx.emit('set-picker-option', ['formatToString', formatToString])\n ctx.emit('set-picker-option', ['handleClear', handleClear])\n\n const pickerBase = inject('EP_PICKER_BASE') as any\n const {\n shortcuts,\n disabledDate,\n cellClassName,\n format,\n defaultTime,\n arrowControl,\n clearable,\n } = pickerBase.props\n const defaultValue = toRef(pickerBase.props, 'defaultValue')\n\n watch(\n () => defaultValue.value,\n (val) => {\n if (val) {\n const defaultArr = getDefaultValue()\n minDate.value = null\n maxDate.value = null\n leftDate.value = defaultArr[0]\n rightDate.value = defaultArr[1]\n }\n },\n { immediate: true }\n )\n\n watch(\n () => props.parsedValue,\n (newVal) => {\n if (newVal && newVal.length === 2) {\n minDate.value = newVal[0]\n maxDate.value = newVal[1]\n leftDate.value = minDate.value\n if (props.unlinkPanels && maxDate.value) {\n const minDateYear = minDate.value.year()\n const minDateMonth = minDate.value.month()\n const maxDateYear = maxDate.value.year()\n const maxDateMonth = maxDate.value.month()\n rightDate.value =\n minDateYear === maxDateYear && minDateMonth === maxDateMonth\n ? maxDate.value.add(1, 'month')\n : maxDate.value\n } else {\n rightDate.value = leftDate.value.add(1, 'month')\n if (maxDate.value) {\n rightDate.value = rightDate.value\n .hour(maxDate.value.hour())\n .minute(maxDate.value.minute())\n .second(maxDate.value.second())\n }\n }\n } else {\n const defaultArr = getDefaultValue()\n minDate.value = null\n maxDate.value = null\n leftDate.value = defaultArr[0]\n rightDate.value = defaultArr[1]\n }\n },\n { immediate: true }\n )\n\n return {\n shortcuts,\n disabledDate,\n cellClassName,\n minTimePickerVisible,\n maxTimePickerVisible,\n handleMinTimeClose,\n handleMaxTimeClose,\n handleShortcutClick,\n rangeState,\n minDate,\n maxDate,\n handleRangePick,\n onSelect,\n handleChangeRange,\n btnDisabled,\n enableYearArrow,\n enableMonthArrow,\n rightPrevMonth,\n rightPrevYear,\n rightNextMonth,\n rightNextYear,\n leftPrevMonth,\n leftPrevYear,\n leftNextMonth,\n leftNextYear,\n hasShortcuts,\n leftLabel,\n rightLabel,\n leftDate,\n rightDate,\n showTime,\n t,\n minVisibleDate,\n maxVisibleDate,\n minVisibleTime,\n maxVisibleTime,\n arrowControl,\n handleDateInput,\n handleDateChange,\n handleTimeInput,\n handleTimeChange,\n handleMinTimePick,\n handleMaxTimePick,\n handleClear,\n handleConfirm,\n timeFormat,\n clearable,\n }\n },\n})\n</script>\n"],"names":["defineComponent","TimePickPanel","DateTable","ElButton","ElIcon","ArrowLeft","DArrowRight","ArrowRight","dayjs","ref","computed","extractTimeFormat","extractDateFormat"],"mappings":"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"}

package/lib/components/date-picker/src/date-picker-com/panel-date-range.vue_vue_type_template_id_62b45ab2_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"panel-date-range.vue_vue_type_template_id_62b45ab2_lang.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-date-range.vue?vue&type=template&id=62b45ab2&lang.js"],"sourcesContent":["<template>\n <div\n class=\"el-picker-panel el-date-range-picker\"\n :class=\"[\n {\n 'has-sidebar': $slots.sidebar \|\| hasShortcuts,\n 'has-time': showTime,\n },\n ]\"\n >\n <div class=\"el-picker-panel__body-wrapper\">\n <slot name=\"sidebar\" class=\"el-picker-panel__sidebar\"></slot>\n <div v-if=\"hasShortcuts\" class=\"el-picker-panel__sidebar\">\n <button\n v-for=\"(shortcut, key) in shortcuts\"\n :key=\"key\"\n type=\"button\"\n class=\"el-picker-panel__shortcut\"\n @click=\"handleShortcutClick(shortcut)\"\n >\n {{ shortcut.text }}\n </button>\n </div>\n <div class=\"el-picker-panel__body\">\n <div v-if=\"showTime\" class=\"el-date-range-picker__time-header\">\n <span class=\"el-date-range-picker__editors-wrap\">\n <span class=\"el-date-range-picker__time-picker-wrap\">\n <el-input\n size=\"small\"\n :disabled=\"rangeState.selecting\"\n :placeholder=\"t('el.datepicker.startDate')\"\n class=\"el-date-range-picker__editor\"\n :model-value=\"minVisibleDate\"\n @input=\"(val) => handleDateInput(val, 'min')\"\n @change=\"(val) => handleDateChange(val, 'min')\"\n />\n </span>\n <span\n v-clickoutside=\"handleMinTimeClose\"\n class=\"el-date-range-picker__time-picker-wrap\"\n >\n <el-input\n size=\"small\"\n class=\"el-date-range-picker__editor\"\n :disabled=\"rangeState.selecting\"\n :placeholder=\"t('el.datepicker.startTime')\"\n :model-value=\"minVisibleTime\"\n @focus=\"minTimePickerVisible = true\"\n @input=\"(val) => handleTimeInput(val, 'min')\"\n @change=\"(val) => handleTimeChange(val, 'min')\"\n />\n <time-pick-panel\n :visible=\"minTimePickerVisible\"\n :format=\"timeFormat\"\n datetime-role=\"start\"\n :time-arrow-control=\"arrowControl\"\n :parsed-value=\"leftDate\"\n @pick=\"handleMinTimePick\"\n />\n </span>\n </span>\n <span>\n <el-icon><arrow-right /></el-icon>\n </span>\n <span class=\"el-date-range-picker__editors-wrap is-right\">\n <span class=\"el-date-range-picker__time-picker-wrap\">\n <el-input\n size=\"small\"\n class=\"el-date-range-picker__editor\"\n :disabled=\"rangeState.selecting\"\n :placeholder=\"t('el.datepicker.endDate')\"\n :model-value=\"maxVisibleDate\"\n :readonly=\"!minDate\"\n @input=\"(val) => handleDateInput(val, 'max')\"\n @change=\"(val) => handleDateChange(val, 'max')\"\n />\n </span>\n <span\n v-clickoutside=\"handleMaxTimeClose\"\n class=\"el-date-range-picker__time-picker-wrap\"\n >\n <el-input\n size=\"small\"\n class=\"el-date-range-picker__editor\"\n :disabled=\"rangeState.selecting\"\n :placeholder=\"t('el.datepicker.endTime')\"\n :model-value=\"maxVisibleTime\"\n :readonly=\"!minDate\"\n @focus=\"minDate && (maxTimePickerVisible = true)\"\n @input=\"(val) => handleTimeInput(val, 'max')\"\n @change=\"(val) => handleTimeChange(val, 'max')\"\n />\n <time-pick-panel\n datetime-role=\"end\"\n :visible=\"maxTimePickerVisible\"\n :format=\"timeFormat\"\n :time-arrow-control=\"arrowControl\"\n :parsed-value=\"rightDate\"\n @pick=\"handleMaxTimePick\"\n />\n </span>\n </span>\n </div>\n <div\n class=\"el-picker-panel__content el-date-range-picker__content is-left\"\n >\n <div class=\"el-date-range-picker__header\">\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn d-arrow-left\"\n @click=\"leftPrevYear\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn arrow-left\"\n @click=\"leftPrevMonth\"\n >\n <el-icon><arrow-left /></el-icon>\n </button>\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableYearArrow\"\n :class=\"{ 'is-disabled': !enableYearArrow }\"\n class=\"el-picker-panel__icon-btn d-arrow-right\"\n @click=\"leftNextYear\"\n >\n <el-icon><d-arrow-right /></el-icon>\n </button>\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableMonthArrow\"\n :class=\"{ 'is-disabled': !enableMonthArrow }\"\n class=\"el-picker-panel__icon-btn arrow-right\"\n @click=\"leftNextMonth\"\n >\n <el-icon><arrow-right /></el-icon>\n </button>\n <div>{{ leftLabel }}</div>\n </div>\n <date-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 :cell-class-name=\"cellClassName\"\n @changerange=\"handleChangeRange\"\n @pick=\"handleRangePick\"\n @select=\"onSelect\"\n />\n </div>\n <div\n class=\"el-picker-panel__content el-date-range-picker__content is-right\"\n >\n <div class=\"el-date-range-picker__header\">\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableYearArrow\"\n :class=\"{ 'is-disabled': !enableYearArrow }\"\n class=\"el-picker-panel__icon-btn d-arrow-left\"\n @click=\"rightPrevYear\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableMonthArrow\"\n :class=\"{ 'is-disabled': !enableMonthArrow }\"\n class=\"el-picker-panel__icon-btn arrow-left\"\n @click=\"rightPrevMonth\"\n >\n <el-icon><arrow-left /></el-icon>\n </button>\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn d-arrow-right\"\n @click=\"rightNextYear\"\n >\n <el-icon><d-arrow-right /></el-icon>\n </button>\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn arrow-right\"\n @click=\"rightNextMonth\"\n >\n <el-icon><arrow-right /></el-icon>\n </button>\n <div>{{ rightLabel }}</div>\n </div>\n <date-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 :cell-class-name=\"cellClassName\"\n @changerange=\"handleChangeRange\"\n @pick=\"handleRangePick\"\n @select=\"onSelect\"\n />\n </div>\n </div>\n </div>\n <div v-if=\"showTime\" class=\"el-picker-panel__footer\">\n <el-button\n v-if=\"clearable\"\n size=\"small\"\n type=\"text\"\n class=\"el-picker-panel__link-btn\"\n @click=\"handleClear\"\n >\n {{ t('el.datepicker.clear') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n class=\"el-picker-panel__link-btn\"\n :disabled=\"btnDisabled\"\n @click=\"handleConfirm(false)\"\n >\n {{ t('el.datepicker.confirm') }}\n </el-button>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, ref, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport ElButton from '@element-plus/components/button'\nimport { ClickOutside } from '@element-plus/directives'\nimport { useLocale } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport {\n extractDateFormat,\n extractTimeFormat,\n TimePickPanel,\n} from '@element-plus/components/time-picker'\nimport ElIcon from '@element-plus/components/icon'\nimport { isValidDatePickType } from '@element-plus/utils/validators'\nimport {\n DArrowLeft,\n ArrowLeft,\n DArrowRight,\n ArrowRight,\n} from '@element-plus/icons-vue'\nimport DateTable from './basic-date-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type { IDatePickerType } from '../date-picker.type'\n\nexport default defineComponent({\n directives: { clickoutside: ClickOutside },\n\n components: {\n TimePickPanel,\n DateTable,\n ElInput,\n ElButton,\n ElIcon,\n DArrowLeft,\n ArrowLeft,\n DArrowRight,\n ArrowRight,\n },\n\n props: {\n unlinkPanels: Boolean,\n parsedValue: {\n type: Array as PropType<Dayjs[]>,\n },\n type: {\n type: String as PropType<IDatePickerType>,\n required: true,\n validator: isValidDatePickType,\n },\n },\n\n emits: ['pick', 'set-picker-option', 'calendar-change'],\n\n setup(props, ctx) {\n const { t, lang } = useLocale()\n const leftDate = ref(dayjs().locale(lang.value))\n const rightDate = ref(dayjs().locale(lang.value).add(1, 'month'))\n const minDate = ref(null)\n const maxDate = ref(null)\n const dateUserInput = ref({\n min: null,\n max: null,\n })\n\n const timeUserInput = ref({\n min: null,\n max: null,\n })\n\n const leftLabel = computed(() => {\n return `${leftDate.value.year()} ${t('el.datepicker.year')} ${t(\n `el.datepicker.month${leftDate.value.month() + 1}`\n )}`\n })\n\n const rightLabel = computed(() => {\n return `${rightDate.value.year()} ${t('el.datepicker.year')} ${t(\n `el.datepicker.month${rightDate.value.month() + 1}`\n )}`\n })\n\n const leftYear = computed(() => {\n return leftDate.value.year()\n })\n\n const leftMonth = computed(() => {\n return leftDate.value.month()\n })\n\n const rightYear = computed(() => {\n return rightDate.value.year()\n })\n\n const rightMonth = computed(() => {\n return rightDate.value.month()\n })\n\n const hasShortcuts = computed(() => !!shortcuts.length)\n\n const minVisibleDate = computed(() => {\n if (dateUserInput.value.min !== null) return dateUserInput.value.min\n if (minDate.value) return minDate.value.format(dateFormat.value)\n return ''\n })\n\n const maxVisibleDate = computed(() => {\n if (dateUserInput.value.max !== null) return dateUserInput.value.max\n if (maxDate.value \|\| minDate.value)\n return (maxDate.value \|\| minDate.value).format(dateFormat.value)\n return ''\n })\n\n const minVisibleTime = computed(() => {\n if (timeUserInput.value.min !== null) return timeUserInput.value.min\n if (minDate.value) return minDate.value.format(timeFormat.value)\n return ''\n })\n\n const maxVisibleTime = computed(() => {\n if (timeUserInput.value.max !== null) return timeUserInput.value.max\n if (maxDate.value \|\| minDate.value)\n return (maxDate.value \|\| minDate.value).format(timeFormat.value)\n return ''\n })\n\n const timeFormat = computed(() => {\n return extractTimeFormat(format)\n })\n\n const dateFormat = computed(() => {\n return extractDateFormat(format)\n })\n\n const leftPrevYear = () => {\n leftDate.value = leftDate.value.subtract(1, 'year')\n if (!props.unlinkPanels) {\n rightDate.value = leftDate.value.add(1, 'month')\n }\n }\n\n const leftPrevMonth = () => {\n leftDate.value = leftDate.value.subtract(1, 'month')\n if (!props.unlinkPanels) {\n rightDate.value = leftDate.value.add(1, 'month')\n }\n }\n\n const rightNextYear = () => {\n if (!props.unlinkPanels) {\n leftDate.value = leftDate.value.add(1, 'year')\n rightDate.value = leftDate.value.add(1, 'month')\n } else {\n rightDate.value = rightDate.value.add(1, 'year')\n }\n }\n\n const rightNextMonth = () => {\n if (!props.unlinkPanels) {\n leftDate.value = leftDate.value.add(1, 'month')\n rightDate.value = leftDate.value.add(1, 'month')\n } else {\n rightDate.value = rightDate.value.add(1, 'month')\n }\n }\n\n const leftNextYear = () => {\n leftDate.value = leftDate.value.add(1, 'year')\n }\n\n const leftNextMonth = () => {\n leftDate.value = leftDate.value.add(1, 'month')\n }\n\n const rightPrevYear = () => {\n rightDate.value = rightDate.value.subtract(1, 'year')\n }\n\n const rightPrevMonth = () => {\n rightDate.value = rightDate.value.subtract(1, 'month')\n }\n\n const enableMonthArrow = computed(() => {\n const nextMonth = (leftMonth.value + 1) % 12\n const yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0\n return (\n props.unlinkPanels &&\n new Date(leftYear.value + yearOffset, nextMonth) <\n new Date(rightYear.value, rightMonth.value)\n )\n })\n\n const enableYearArrow = computed(() => {\n return (\n props.unlinkPanels &&\n rightYear.value * 12 +\n rightMonth.value -\n (leftYear.value * 12 + leftMonth.value + 1) >=\n 12\n )\n })\n\n const isValidValue = (value) => {\n return (\n Array.isArray(value) &&\n value[0] &&\n value[1] &&\n value[0].valueOf() <= value[1].valueOf()\n )\n }\n\n const rangeState = ref({\n endDate: null,\n selecting: false,\n })\n\n const btnDisabled = computed(() => {\n return !(\n minDate.value &&\n maxDate.value &&\n !rangeState.value.selecting &&\n isValidValue([minDate.value, maxDate.value])\n )\n })\n\n const handleChangeRange = (val) => {\n rangeState.value = val\n }\n\n const onSelect = (selecting) => {\n rangeState.value.selecting = selecting\n if (!selecting) {\n rangeState.value.endDate = null\n }\n }\n\n const showTime = computed(\n () => props.type === 'datetime' \|\| props.type === 'datetimerange'\n )\n\n const handleConfirm = (visible = false) => {\n if (isValidValue([minDate.value, maxDate.value])) {\n ctx.emit('pick', [minDate.value, maxDate.value], visible)\n }\n }\n\n const formatEmit = (emitDayjs: Dayjs, index?) => {\n if (!emitDayjs) return\n if (defaultTime) {\n const defaultTimeD = dayjs(defaultTime[index] \|\| defaultTime).locale(\n lang.value\n )\n return defaultTimeD\n .year(emitDayjs.year())\n .month(emitDayjs.month())\n .date(emitDayjs.date())\n }\n return emitDayjs\n }\n\n const handleRangePick = (val, close = true) => {\n const min_ = val.minDate\n const max_ = val.maxDate\n const minDate_ = formatEmit(min_, 0)\n const maxDate_ = formatEmit(max_, 1)\n\n if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n return\n }\n ctx.emit('calendar-change', [min_.toDate(), max_ && max_.toDate()])\n maxDate.value = maxDate_\n minDate.value = minDate_\n\n if (!close \|\| showTime.value) return\n handleConfirm()\n }\n\n const handleShortcutClick = (shortcut) => {\n const shortcutValues =\n typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n if (shortcutValues) {\n ctx.emit('pick', [\n dayjs(shortcutValues[0]).locale(lang.value),\n dayjs(shortcutValues[1]).locale(lang.value),\n ])\n return\n }\n if (shortcut.onClick) {\n shortcut.onClick(ctx)\n }\n }\n\n const minTimePickerVisible = ref(false)\n const maxTimePickerVisible = ref(false)\n\n const handleMinTimeClose = () => {\n minTimePickerVisible.value = false\n }\n\n const handleMaxTimeClose = () => {\n maxTimePickerVisible.value = false\n }\n\n const handleDateInput = (value, type) => {\n dateUserInput.value[type] = value\n const parsedValueD = dayjs(value, dateFormat.value).locale(lang.value)\n\n if (parsedValueD.isValid()) {\n if (disabledDate && disabledDate(parsedValueD.toDate())) {\n return\n }\n if (type === 'min') {\n leftDate.value = parsedValueD\n minDate.value = (minDate.value \|\| leftDate.value)\n .year(parsedValueD.year())\n .month(parsedValueD.month())\n .date(parsedValueD.date())\n if (!props.unlinkPanels) {\n rightDate.value = parsedValueD.add(1, 'month')\n maxDate.value = minDate.value.add(1, 'month')\n }\n } else {\n rightDate.value = parsedValueD\n maxDate.value = (maxDate.value \|\| rightDate.value)\n .year(parsedValueD.year())\n .month(parsedValueD.month())\n .date(parsedValueD.date())\n if (!props.unlinkPanels) {\n leftDate.value = parsedValueD.subtract(1, 'month')\n minDate.value = maxDate.value.subtract(1, 'month')\n }\n }\n }\n }\n\n const handleDateChange = (_, type) => {\n dateUserInput.value[type] = null\n }\n\n const handleTimeInput = (value, type) => {\n timeUserInput.value[type] = value\n const parsedValueD = dayjs(value, timeFormat.value).locale(lang.value)\n\n if (parsedValueD.isValid()) {\n if (type === 'min') {\n minTimePickerVisible.value = true\n minDate.value = (minDate.value \|\| leftDate.value)\n .hour(parsedValueD.hour())\n .minute(parsedValueD.minute())\n .second(parsedValueD.second())\n if (!maxDate.value \|\| maxDate.value.isBefore(minDate.value)) {\n maxDate.value = minDate.value\n }\n } else {\n maxTimePickerVisible.value = true\n maxDate.value = (maxDate.value \|\| rightDate.value)\n .hour(parsedValueD.hour())\n .minute(parsedValueD.minute())\n .second(parsedValueD.second())\n rightDate.value = maxDate.value\n if (maxDate.value && maxDate.value.isBefore(minDate.value)) {\n minDate.value = maxDate.value\n }\n }\n }\n }\n\n const handleTimeChange = (value, type) => {\n timeUserInput.value[type] = null\n if (type === 'min') {\n leftDate.value = minDate.value\n minTimePickerVisible.value = false\n } else {\n rightDate.value = maxDate.value\n maxTimePickerVisible.value = false\n }\n }\n\n const handleMinTimePick = (value, visible, first) => {\n if (timeUserInput.value.min) return\n if (value) {\n leftDate.value = value\n minDate.value = (minDate.value \|\| leftDate.value)\n .hour(value.hour())\n .minute(value.minute())\n .second(value.second())\n }\n\n if (!first) {\n minTimePickerVisible.value = visible\n }\n\n if (!maxDate.value \|\| maxDate.value.isBefore(minDate.value)) {\n maxDate.value = minDate.value\n rightDate.value = value\n }\n }\n\n const handleMaxTimePick = (value, visible, first) => {\n if (timeUserInput.value.max) return\n if (value) {\n rightDate.value = value\n maxDate.value = (maxDate.value \|\| rightDate.value)\n .hour(value.hour())\n .minute(value.minute())\n .second(value.second())\n }\n\n if (!first) {\n maxTimePickerVisible.value = visible\n }\n\n if (maxDate.value && maxDate.value.isBefore(minDate.value)) {\n minDate.value = maxDate.value\n }\n }\n\n const handleClear = () => {\n leftDate.value = getDefaultValue()[0]\n rightDate.value = leftDate.value.add(1, 'month')\n ctx.emit('pick', null)\n }\n\n const formatToString = (value: Dayjs \| Dayjs[]) => {\n return Array.isArray(value)\n ? value.map((_) => _.format(format))\n : value.format(format)\n }\n\n const parseUserInput = (value: Dayjs \| Dayjs[]) => {\n return Array.isArray(value)\n ? value.map((_) => dayjs(_, format).locale(lang.value))\n : dayjs(value, format).locale(lang.value)\n }\n\n const getDefaultValue = () => {\n let start: Dayjs\n if (Array.isArray(defaultValue)) {\n const left = dayjs(defaultValue[0])\n let right = dayjs(defaultValue[1])\n if (!props.unlinkPanels) {\n right = left.add(1, 'month')\n }\n return [left, right]\n } else if (defaultValue) {\n start = dayjs(defaultValue)\n } else {\n start = dayjs()\n }\n\n start = start.locale(lang.value)\n return [start, start.add(1, 'month')]\n }\n\n ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n ctx.emit('set-picker-option', ['formatToString', formatToString])\n ctx.emit('set-picker-option', ['handleClear', handleClear])\n\n const pickerBase = inject('EP_PICKER_BASE') as any\n const {\n shortcuts,\n disabledDate,\n cellClassName,\n format,\n defaultTime,\n defaultValue,\n arrowControl,\n clearable,\n } = pickerBase.props\n\n watch(\n () => props.parsedValue,\n (newVal) => {\n if (newVal && newVal.length === 2) {\n minDate.value = newVal[0]\n maxDate.value = newVal[1]\n leftDate.value = minDate.value\n if (props.unlinkPanels && maxDate.value) {\n const minDateYear = minDate.value.year()\n const minDateMonth = minDate.value.month()\n const maxDateYear = maxDate.value.year()\n const maxDateMonth = maxDate.value.month()\n rightDate.value =\n minDateYear === maxDateYear && minDateMonth === maxDateMonth\n ? maxDate.value.add(1, 'month')\n : maxDate.value\n } else {\n rightDate.value = leftDate.value.add(1, 'month')\n if (maxDate.value) {\n rightDate.value = rightDate.value\n .hour(maxDate.value.hour())\n .minute(maxDate.value.minute())\n .second(maxDate.value.second())\n }\n }\n } else {\n const defaultArr = getDefaultValue()\n minDate.value = null\n maxDate.value = null\n leftDate.value = defaultArr[0]\n rightDate.value = defaultArr[1]\n }\n },\n { immediate: true }\n )\n\n return {\n shortcuts,\n disabledDate,\n cellClassName,\n minTimePickerVisible,\n maxTimePickerVisible,\n handleMinTimeClose,\n handleMaxTimeClose,\n handleShortcutClick,\n rangeState,\n minDate,\n maxDate,\n handleRangePick,\n onSelect,\n handleChangeRange,\n btnDisabled,\n enableYearArrow,\n enableMonthArrow,\n rightPrevMonth,\n rightPrevYear,\n rightNextMonth,\n rightNextYear,\n leftPrevMonth,\n leftPrevYear,\n leftNextMonth,\n leftNextYear,\n hasShortcuts,\n leftLabel,\n rightLabel,\n leftDate,\n rightDate,\n showTime,\n t,\n minVisibleDate,\n maxVisibleDate,\n minVisibleTime,\n maxVisibleTime,\n arrowControl,\n handleDateInput,\n handleDateChange,\n handleTimeInput,\n handleTimeChange,\n handleMinTimePick,\n handleMaxTimePick,\n handleClear,\n handleConfirm,\n timeFormat,\n clearable,\n }\n },\n})\n</script>\n"],"names":["_createVNode"],"mappings":";;;;;;;;;;EAY+B;;;;;;EAYF;;qBACb,KAAK,EAAC;qBACJ,KAAK,EAAC,wCAAwC;qBAalD,KAAK,EAAC;;sBA0BF,KAAK,EAAC,wCAAwC;sBAclD,KAAK,EAAC;sBAyBV,KAAK,EAAC;;;;sBAqDN,KAAK,EAAC;;;;;;EAsDS;;;;;;;;;;;;;;;;;;;;;;;;yDAxMQ;;;;;;gBAKvB;;;;;;;;;2BAQF;;gBAEI;;wBAEQ,EAAC;;;8BAGC;;oBAEL;;;;;;;;;;;;;;;;2BAmBO;;;;;;;;;;;cASd;;uCACW;;;;;;;gBAGT;;;;;;;;oBAQK;;;;;;;yBAUI;8CACiB;uCACP;;+BAEH;;;;;;;;;;;;;;;;;;;;;;kBAqBV;mBACC;;;;;;;;;;;kBAMD;mBACC;;;;;kBAGI;;;;;;;;kBAIT;;;;;;;sBAMS;;;;;;iCAGS;;;;;;;;;;sBAOT;;;;;;YAEX;;;;;;YAMC;;;6BAGe;;;;;;;;;;;;;kBAcb;yBAEK;;;;;;;;;;aAKA,iBAAY;kCADpB;;;6BAGc;;;;kBAKZA;;;;;;;;;;cAIAA;;;;;;;;;;YAKF;kBACM;;;;;mCAIoB;+BAAA;;;;;;;;;;YAOzB;YACA;0CACuB;;;4BAGZ;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"panel-date-range.vue_vue_type_template_id_62b45ab2_lang.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-date-range.vue?vue&type=template&id=62b45ab2&lang.js"],"sourcesContent":["<template>\n <div\n class=\"el-picker-panel el-date-range-picker\"\n :class=\"[\n {\n 'has-sidebar': $slots.sidebar \|\| hasShortcuts,\n 'has-time': showTime,\n },\n ]\"\n >\n <div class=\"el-picker-panel__body-wrapper\">\n <slot name=\"sidebar\" class=\"el-picker-panel__sidebar\"></slot>\n <div v-if=\"hasShortcuts\" class=\"el-picker-panel__sidebar\">\n <button\n v-for=\"(shortcut, key) in shortcuts\"\n :key=\"key\"\n type=\"button\"\n class=\"el-picker-panel__shortcut\"\n @click=\"handleShortcutClick(shortcut)\"\n >\n {{ shortcut.text }}\n </button>\n </div>\n <div class=\"el-picker-panel__body\">\n <div v-if=\"showTime\" class=\"el-date-range-picker__time-header\">\n <span class=\"el-date-range-picker__editors-wrap\">\n <span class=\"el-date-range-picker__time-picker-wrap\">\n <el-input\n size=\"small\"\n :disabled=\"rangeState.selecting\"\n :placeholder=\"t('el.datepicker.startDate')\"\n class=\"el-date-range-picker__editor\"\n :model-value=\"minVisibleDate\"\n @input=\"(val) => handleDateInput(val, 'min')\"\n @change=\"(val) => handleDateChange(val, 'min')\"\n />\n </span>\n <span\n v-clickoutside=\"handleMinTimeClose\"\n class=\"el-date-range-picker__time-picker-wrap\"\n >\n <el-input\n size=\"small\"\n class=\"el-date-range-picker__editor\"\n :disabled=\"rangeState.selecting\"\n :placeholder=\"t('el.datepicker.startTime')\"\n :model-value=\"minVisibleTime\"\n @focus=\"minTimePickerVisible = true\"\n @input=\"(val) => handleTimeInput(val, 'min')\"\n @change=\"(val) => handleTimeChange(val, 'min')\"\n />\n <time-pick-panel\n :visible=\"minTimePickerVisible\"\n :format=\"timeFormat\"\n datetime-role=\"start\"\n :time-arrow-control=\"arrowControl\"\n :parsed-value=\"leftDate\"\n @pick=\"handleMinTimePick\"\n />\n </span>\n </span>\n <span>\n <el-icon><arrow-right /></el-icon>\n </span>\n <span class=\"el-date-range-picker__editors-wrap is-right\">\n <span class=\"el-date-range-picker__time-picker-wrap\">\n <el-input\n size=\"small\"\n class=\"el-date-range-picker__editor\"\n :disabled=\"rangeState.selecting\"\n :placeholder=\"t('el.datepicker.endDate')\"\n :model-value=\"maxVisibleDate\"\n :readonly=\"!minDate\"\n @input=\"(val) => handleDateInput(val, 'max')\"\n @change=\"(val) => handleDateChange(val, 'max')\"\n />\n </span>\n <span\n v-clickoutside=\"handleMaxTimeClose\"\n class=\"el-date-range-picker__time-picker-wrap\"\n >\n <el-input\n size=\"small\"\n class=\"el-date-range-picker__editor\"\n :disabled=\"rangeState.selecting\"\n :placeholder=\"t('el.datepicker.endTime')\"\n :model-value=\"maxVisibleTime\"\n :readonly=\"!minDate\"\n @focus=\"minDate && (maxTimePickerVisible = true)\"\n @input=\"(val) => handleTimeInput(val, 'max')\"\n @change=\"(val) => handleTimeChange(val, 'max')\"\n />\n <time-pick-panel\n datetime-role=\"end\"\n :visible=\"maxTimePickerVisible\"\n :format=\"timeFormat\"\n :time-arrow-control=\"arrowControl\"\n :parsed-value=\"rightDate\"\n @pick=\"handleMaxTimePick\"\n />\n </span>\n </span>\n </div>\n <div\n class=\"el-picker-panel__content el-date-range-picker__content is-left\"\n >\n <div class=\"el-date-range-picker__header\">\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn d-arrow-left\"\n @click=\"leftPrevYear\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn arrow-left\"\n @click=\"leftPrevMonth\"\n >\n <el-icon><arrow-left /></el-icon>\n </button>\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableYearArrow\"\n :class=\"{ 'is-disabled': !enableYearArrow }\"\n class=\"el-picker-panel__icon-btn d-arrow-right\"\n @click=\"leftNextYear\"\n >\n <el-icon><d-arrow-right /></el-icon>\n </button>\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableMonthArrow\"\n :class=\"{ 'is-disabled': !enableMonthArrow }\"\n class=\"el-picker-panel__icon-btn arrow-right\"\n @click=\"leftNextMonth\"\n >\n <el-icon><arrow-right /></el-icon>\n </button>\n <div>{{ leftLabel }}</div>\n </div>\n <date-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 :cell-class-name=\"cellClassName\"\n @changerange=\"handleChangeRange\"\n @pick=\"handleRangePick\"\n @select=\"onSelect\"\n />\n </div>\n <div\n class=\"el-picker-panel__content el-date-range-picker__content is-right\"\n >\n <div class=\"el-date-range-picker__header\">\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableYearArrow\"\n :class=\"{ 'is-disabled': !enableYearArrow }\"\n class=\"el-picker-panel__icon-btn d-arrow-left\"\n @click=\"rightPrevYear\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableMonthArrow\"\n :class=\"{ 'is-disabled': !enableMonthArrow }\"\n class=\"el-picker-panel__icon-btn arrow-left\"\n @click=\"rightPrevMonth\"\n >\n <el-icon><arrow-left /></el-icon>\n </button>\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn d-arrow-right\"\n @click=\"rightNextYear\"\n >\n <el-icon><d-arrow-right /></el-icon>\n </button>\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn arrow-right\"\n @click=\"rightNextMonth\"\n >\n <el-icon><arrow-right /></el-icon>\n </button>\n <div>{{ rightLabel }}</div>\n </div>\n <date-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 :cell-class-name=\"cellClassName\"\n @changerange=\"handleChangeRange\"\n @pick=\"handleRangePick\"\n @select=\"onSelect\"\n />\n </div>\n </div>\n </div>\n <div v-if=\"showTime\" class=\"el-picker-panel__footer\">\n <el-button\n v-if=\"clearable\"\n size=\"small\"\n type=\"text\"\n class=\"el-picker-panel__link-btn\"\n @click=\"handleClear\"\n >\n {{ t('el.datepicker.clear') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n class=\"el-picker-panel__link-btn\"\n :disabled=\"btnDisabled\"\n @click=\"handleConfirm(false)\"\n >\n {{ t('el.datepicker.confirm') }}\n </el-button>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, ref, watch, toRef } from 'vue'\nimport dayjs from 'dayjs'\nimport ElButton from '@element-plus/components/button'\nimport { ClickOutside } from '@element-plus/directives'\nimport { useLocale } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport {\n extractDateFormat,\n extractTimeFormat,\n TimePickPanel,\n} from '@element-plus/components/time-picker'\nimport ElIcon from '@element-plus/components/icon'\nimport { isValidDatePickType } from '@element-plus/utils/validators'\nimport {\n DArrowLeft,\n ArrowLeft,\n DArrowRight,\n ArrowRight,\n} from '@element-plus/icons-vue'\nimport DateTable from './basic-date-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type { IDatePickerType } from '../date-picker.type'\n\nexport default defineComponent({\n directives: { clickoutside: ClickOutside },\n\n components: {\n TimePickPanel,\n DateTable,\n ElInput,\n ElButton,\n ElIcon,\n DArrowLeft,\n ArrowLeft,\n DArrowRight,\n ArrowRight,\n },\n\n props: {\n unlinkPanels: Boolean,\n parsedValue: {\n type: Array as PropType<Dayjs[]>,\n },\n type: {\n type: String as PropType<IDatePickerType>,\n required: true,\n validator: isValidDatePickType,\n },\n },\n\n emits: ['pick', 'set-picker-option', 'calendar-change', 'panel-change'],\n\n setup(props, ctx) {\n const { t, lang } = useLocale()\n const leftDate = ref(dayjs().locale(lang.value))\n const rightDate = ref(dayjs().locale(lang.value).add(1, 'month'))\n const minDate = ref(null)\n const maxDate = ref(null)\n const dateUserInput = ref({\n min: null,\n max: null,\n })\n\n const timeUserInput = ref({\n min: null,\n max: null,\n })\n\n const leftLabel = computed(() => {\n return `${leftDate.value.year()} ${t('el.datepicker.year')} ${t(\n `el.datepicker.month${leftDate.value.month() + 1}`\n )}`\n })\n\n const rightLabel = computed(() => {\n return `${rightDate.value.year()} ${t('el.datepicker.year')} ${t(\n `el.datepicker.month${rightDate.value.month() + 1}`\n )}`\n })\n\n const leftYear = computed(() => {\n return leftDate.value.year()\n })\n\n const leftMonth = computed(() => {\n return leftDate.value.month()\n })\n\n const rightYear = computed(() => {\n return rightDate.value.year()\n })\n\n const rightMonth = computed(() => {\n return rightDate.value.month()\n })\n\n const hasShortcuts = computed(() => !!shortcuts.length)\n\n const minVisibleDate = computed(() => {\n if (dateUserInput.value.min !== null) return dateUserInput.value.min\n if (minDate.value) return minDate.value.format(dateFormat.value)\n return ''\n })\n\n const maxVisibleDate = computed(() => {\n if (dateUserInput.value.max !== null) return dateUserInput.value.max\n if (maxDate.value \|\| minDate.value)\n return (maxDate.value \|\| minDate.value).format(dateFormat.value)\n return ''\n })\n\n const minVisibleTime = computed(() => {\n if (timeUserInput.value.min !== null) return timeUserInput.value.min\n if (minDate.value) return minDate.value.format(timeFormat.value)\n return ''\n })\n\n const maxVisibleTime = computed(() => {\n if (timeUserInput.value.max !== null) return timeUserInput.value.max\n if (maxDate.value \|\| minDate.value)\n return (maxDate.value \|\| minDate.value).format(timeFormat.value)\n return ''\n })\n\n const timeFormat = computed(() => {\n return extractTimeFormat(format)\n })\n\n const dateFormat = computed(() => {\n return extractDateFormat(format)\n })\n\n const leftPrevYear = () => {\n leftDate.value = leftDate.value.subtract(1, 'year')\n if (!props.unlinkPanels) {\n rightDate.value = leftDate.value.add(1, 'month')\n }\n handlePanelChange('year')\n }\n\n const leftPrevMonth = () => {\n leftDate.value = leftDate.value.subtract(1, 'month')\n if (!props.unlinkPanels) {\n rightDate.value = leftDate.value.add(1, 'month')\n }\n handlePanelChange('month')\n }\n\n const rightNextYear = () => {\n if (!props.unlinkPanels) {\n leftDate.value = leftDate.value.add(1, 'year')\n rightDate.value = leftDate.value.add(1, 'month')\n } else {\n rightDate.value = rightDate.value.add(1, 'year')\n }\n handlePanelChange('year')\n }\n\n const rightNextMonth = () => {\n if (!props.unlinkPanels) {\n leftDate.value = leftDate.value.add(1, 'month')\n rightDate.value = leftDate.value.add(1, 'month')\n } else {\n rightDate.value = rightDate.value.add(1, 'month')\n }\n handlePanelChange('month')\n }\n\n const leftNextYear = () => {\n leftDate.value = leftDate.value.add(1, 'year')\n handlePanelChange('year')\n }\n\n const leftNextMonth = () => {\n leftDate.value = leftDate.value.add(1, 'month')\n handlePanelChange('month')\n }\n\n const rightPrevYear = () => {\n rightDate.value = rightDate.value.subtract(1, 'year')\n handlePanelChange('year')\n }\n\n const rightPrevMonth = () => {\n rightDate.value = rightDate.value.subtract(1, 'month')\n handlePanelChange('month')\n }\n\n const handlePanelChange = (mode: 'month' \| 'year') => {\n ctx.emit(\n 'panel-change',\n [leftDate.value.toDate(), rightDate.value.toDate()],\n mode\n )\n }\n\n const enableMonthArrow = computed(() => {\n const nextMonth = (leftMonth.value + 1) % 12\n const yearOffset = leftMonth.value + 1 >= 12 ? 1 : 0\n return (\n props.unlinkPanels &&\n new Date(leftYear.value + yearOffset, nextMonth) <\n new Date(rightYear.value, rightMonth.value)\n )\n })\n\n const enableYearArrow = computed(() => {\n return (\n props.unlinkPanels &&\n rightYear.value * 12 +\n rightMonth.value -\n (leftYear.value * 12 + leftMonth.value + 1) >=\n 12\n )\n })\n\n const isValidValue = (value) => {\n return (\n Array.isArray(value) &&\n value[0] &&\n value[1] &&\n value[0].valueOf() <= value[1].valueOf()\n )\n }\n\n const rangeState = ref({\n endDate: null,\n selecting: false,\n })\n\n const btnDisabled = computed(() => {\n return !(\n minDate.value &&\n maxDate.value &&\n !rangeState.value.selecting &&\n isValidValue([minDate.value, maxDate.value])\n )\n })\n\n const handleChangeRange = (val) => {\n rangeState.value = val\n }\n\n const onSelect = (selecting) => {\n rangeState.value.selecting = selecting\n if (!selecting) {\n rangeState.value.endDate = null\n }\n }\n\n const showTime = computed(\n () => props.type === 'datetime' \|\| props.type === 'datetimerange'\n )\n\n const handleConfirm = (visible = false) => {\n if (isValidValue([minDate.value, maxDate.value])) {\n ctx.emit('pick', [minDate.value, maxDate.value], visible)\n }\n }\n\n const formatEmit = (emitDayjs: Dayjs, index?) => {\n if (!emitDayjs) return\n if (defaultTime) {\n const defaultTimeD = dayjs(defaultTime[index] \|\| defaultTime).locale(\n lang.value\n )\n return defaultTimeD\n .year(emitDayjs.year())\n .month(emitDayjs.month())\n .date(emitDayjs.date())\n }\n return emitDayjs\n }\n\n const handleRangePick = (val, close = true) => {\n const min_ = val.minDate\n const max_ = val.maxDate\n const minDate_ = formatEmit(min_, 0)\n const maxDate_ = formatEmit(max_, 1)\n\n if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n return\n }\n ctx.emit('calendar-change', [min_.toDate(), max_ && max_.toDate()])\n maxDate.value = maxDate_\n minDate.value = minDate_\n\n if (!close \|\| showTime.value) return\n handleConfirm()\n }\n\n const handleShortcutClick = (shortcut) => {\n const shortcutValues =\n typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n if (shortcutValues) {\n ctx.emit('pick', [\n dayjs(shortcutValues[0]).locale(lang.value),\n dayjs(shortcutValues[1]).locale(lang.value),\n ])\n return\n }\n if (shortcut.onClick) {\n shortcut.onClick(ctx)\n }\n }\n\n const minTimePickerVisible = ref(false)\n const maxTimePickerVisible = ref(false)\n\n const handleMinTimeClose = () => {\n minTimePickerVisible.value = false\n }\n\n const handleMaxTimeClose = () => {\n maxTimePickerVisible.value = false\n }\n\n const handleDateInput = (value, type) => {\n dateUserInput.value[type] = value\n const parsedValueD = dayjs(value, dateFormat.value).locale(lang.value)\n\n if (parsedValueD.isValid()) {\n if (disabledDate && disabledDate(parsedValueD.toDate())) {\n return\n }\n if (type === 'min') {\n leftDate.value = parsedValueD\n minDate.value = (minDate.value \|\| leftDate.value)\n .year(parsedValueD.year())\n .month(parsedValueD.month())\n .date(parsedValueD.date())\n if (!props.unlinkPanels) {\n rightDate.value = parsedValueD.add(1, 'month')\n maxDate.value = minDate.value.add(1, 'month')\n }\n } else {\n rightDate.value = parsedValueD\n maxDate.value = (maxDate.value \|\| rightDate.value)\n .year(parsedValueD.year())\n .month(parsedValueD.month())\n .date(parsedValueD.date())\n if (!props.unlinkPanels) {\n leftDate.value = parsedValueD.subtract(1, 'month')\n minDate.value = maxDate.value.subtract(1, 'month')\n }\n }\n }\n }\n\n const handleDateChange = (_, type) => {\n dateUserInput.value[type] = null\n }\n\n const handleTimeInput = (value, type) => {\n timeUserInput.value[type] = value\n const parsedValueD = dayjs(value, timeFormat.value).locale(lang.value)\n\n if (parsedValueD.isValid()) {\n if (type === 'min') {\n minTimePickerVisible.value = true\n minDate.value = (minDate.value \|\| leftDate.value)\n .hour(parsedValueD.hour())\n .minute(parsedValueD.minute())\n .second(parsedValueD.second())\n if (!maxDate.value \|\| maxDate.value.isBefore(minDate.value)) {\n maxDate.value = minDate.value\n }\n } else {\n maxTimePickerVisible.value = true\n maxDate.value = (maxDate.value \|\| rightDate.value)\n .hour(parsedValueD.hour())\n .minute(parsedValueD.minute())\n .second(parsedValueD.second())\n rightDate.value = maxDate.value\n if (maxDate.value && maxDate.value.isBefore(minDate.value)) {\n minDate.value = maxDate.value\n }\n }\n }\n }\n\n const handleTimeChange = (value, type) => {\n timeUserInput.value[type] = null\n if (type === 'min') {\n leftDate.value = minDate.value\n minTimePickerVisible.value = false\n } else {\n rightDate.value = maxDate.value\n maxTimePickerVisible.value = false\n }\n }\n\n const handleMinTimePick = (value, visible, first) => {\n if (timeUserInput.value.min) return\n if (value) {\n leftDate.value = value\n minDate.value = (minDate.value \|\| leftDate.value)\n .hour(value.hour())\n .minute(value.minute())\n .second(value.second())\n }\n\n if (!first) {\n minTimePickerVisible.value = visible\n }\n\n if (!maxDate.value \|\| maxDate.value.isBefore(minDate.value)) {\n maxDate.value = minDate.value\n rightDate.value = value\n }\n }\n\n const handleMaxTimePick = (value, visible, first) => {\n if (timeUserInput.value.max) return\n if (value) {\n rightDate.value = value\n maxDate.value = (maxDate.value \|\| rightDate.value)\n .hour(value.hour())\n .minute(value.minute())\n .second(value.second())\n }\n\n if (!first) {\n maxTimePickerVisible.value = visible\n }\n\n if (maxDate.value && maxDate.value.isBefore(minDate.value)) {\n minDate.value = maxDate.value\n }\n }\n\n const handleClear = () => {\n leftDate.value = getDefaultValue()[0]\n rightDate.value = leftDate.value.add(1, 'month')\n ctx.emit('pick', null)\n }\n\n const formatToString = (value: Dayjs \| Dayjs[]) => {\n return Array.isArray(value)\n ? value.map((_) => _.format(format))\n : value.format(format)\n }\n\n const parseUserInput = (value: Dayjs \| Dayjs[]) => {\n return Array.isArray(value)\n ? value.map((_) => dayjs(_, format).locale(lang.value))\n : dayjs(value, format).locale(lang.value)\n }\n\n const getDefaultValue = () => {\n let start: Dayjs\n if (Array.isArray(defaultValue.value)) {\n const left = dayjs(defaultValue.value[0])\n let right = dayjs(defaultValue.value[1])\n if (!props.unlinkPanels) {\n right = left.add(1, 'month')\n }\n return [left, right]\n } else if (defaultValue.value) {\n start = dayjs(defaultValue.value)\n } else {\n start = dayjs()\n }\n\n start = start.locale(lang.value)\n return [start, start.add(1, 'month')]\n }\n\n ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n ctx.emit('set-picker-option', ['formatToString', formatToString])\n ctx.emit('set-picker-option', ['handleClear', handleClear])\n\n const pickerBase = inject('EP_PICKER_BASE') as any\n const {\n shortcuts,\n disabledDate,\n cellClassName,\n format,\n defaultTime,\n arrowControl,\n clearable,\n } = pickerBase.props\n const defaultValue = toRef(pickerBase.props, 'defaultValue')\n\n watch(\n () => defaultValue.value,\n (val) => {\n if (val) {\n const defaultArr = getDefaultValue()\n minDate.value = null\n maxDate.value = null\n leftDate.value = defaultArr[0]\n rightDate.value = defaultArr[1]\n }\n },\n { immediate: true }\n )\n\n watch(\n () => props.parsedValue,\n (newVal) => {\n if (newVal && newVal.length === 2) {\n minDate.value = newVal[0]\n maxDate.value = newVal[1]\n leftDate.value = minDate.value\n if (props.unlinkPanels && maxDate.value) {\n const minDateYear = minDate.value.year()\n const minDateMonth = minDate.value.month()\n const maxDateYear = maxDate.value.year()\n const maxDateMonth = maxDate.value.month()\n rightDate.value =\n minDateYear === maxDateYear && minDateMonth === maxDateMonth\n ? maxDate.value.add(1, 'month')\n : maxDate.value\n } else {\n rightDate.value = leftDate.value.add(1, 'month')\n if (maxDate.value) {\n rightDate.value = rightDate.value\n .hour(maxDate.value.hour())\n .minute(maxDate.value.minute())\n .second(maxDate.value.second())\n }\n }\n } else {\n const defaultArr = getDefaultValue()\n minDate.value = null\n maxDate.value = null\n leftDate.value = defaultArr[0]\n rightDate.value = defaultArr[1]\n }\n },\n { immediate: true }\n )\n\n return {\n shortcuts,\n disabledDate,\n cellClassName,\n minTimePickerVisible,\n maxTimePickerVisible,\n handleMinTimeClose,\n handleMaxTimeClose,\n handleShortcutClick,\n rangeState,\n minDate,\n maxDate,\n handleRangePick,\n onSelect,\n handleChangeRange,\n btnDisabled,\n enableYearArrow,\n enableMonthArrow,\n rightPrevMonth,\n rightPrevYear,\n rightNextMonth,\n rightNextYear,\n leftPrevMonth,\n leftPrevYear,\n leftNextMonth,\n leftNextYear,\n hasShortcuts,\n leftLabel,\n rightLabel,\n leftDate,\n rightDate,\n showTime,\n t,\n minVisibleDate,\n maxVisibleDate,\n minVisibleTime,\n maxVisibleTime,\n arrowControl,\n handleDateInput,\n handleDateChange,\n handleTimeInput,\n handleTimeChange,\n handleMinTimePick,\n handleMaxTimePick,\n handleClear,\n handleConfirm,\n timeFormat,\n clearable,\n }\n },\n})\n</script>\n"],"names":["_createVNode"],"mappings":";;;;;;;;;;EAY+B;;;;;;EAYF;;qBACb,KAAK,EAAC;qBACJ,KAAK,EAAC,wCAAwC;qBAalD,KAAK,EAAC;;sBA0BF,KAAK,EAAC,wCAAwC;sBAclD,KAAK,EAAC;sBAyBV,KAAK,EAAC;;;;sBAqDN,KAAK,EAAC;;;;;;EAsDS;;;;;;;;;;;;;;;;;;;;;;;;yDAxMQ;;;;;;gBAKvB;;;;;;;;;2BAQF;;gBAEI;;wBAEQ,EAAC;;;8BAGC;;oBAEL;;;;;;;;;;;;;;;;2BAmBO;;;;;;;;;;;cASd;;uCACW;;;;;;;gBAGT;;;;;;;;oBAQK;;;;;;;yBAUI;8CACiB;uCACP;;+BAEH;;;;;;;;;;;;;;;;;;;;;;kBAqBV;mBACC;;;;;;;;;;;kBAMD;mBACC;;;;;kBAGI;;;;;;;;kBAIT;;;;;;;sBAMS;;;;;;iCAGS;;;;;;;;;;sBAOT;;;;;;YAEX;;;;;;YAMC;;;6BAGe;;;;;;;;;;;;;kBAcb;yBAEK;;;;;;;;;;aAKA,iBAAY;kCADpB;;;6BAGc;;;;kBAKZA;;;;;;;;;;cAIAA;;;;;;;;;;YAKF;kBACM;;;;;mCAIoB;+BAAA;;;;;;;;;;YAOzB;YACA;0CACuB;;;4BAGZ;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/date-picker/src/date-picker-com/panel-month-range.vue.d.ts CHANGED Viewed

@@ -169,14 +169,12 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     hasShortcuts: import("vue").ComputedRef<boolean>;
     handleShortcutClick: (shortcut: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "set-picker-option")[], "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    unlinkPanels?: unknown;
-    parsedValue?: unknown;
-} & {
-    unlinkPanels: boolean;
-} & {
-    parsedValue?: dayjs.Dayjs[] | undefined;
-}> & {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("pick" | "set-picker-option")[], "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    unlinkPanels: BooleanConstructor;
+    parsedValue: {
+        type: PropType<dayjs.Dayjs[]>;
+    };
+}>> & {
     onPick?: ((...args: any[]) => any) | undefined;
     "onSet-picker-option"?: ((...args: any[]) => any) | undefined;
 }, {

package/lib/components/date-picker/src/date-picker-com/panel-month-range.vue_vue_type_script_lang.js CHANGED Viewed

@@ -115,15 +115,15 @@ var script = vue.defineComponent({
     };
     const getDefaultValue = () => {
       let start;
-      if (Array.isArray(defaultValue)) {
-        const left = dayjs__default["default"](defaultValue[0]);
-        let right = dayjs__default["default"](defaultValue[1]);
+      if (Array.isArray(defaultValue.value)) {
+        const left = dayjs__default["default"](defaultValue.value[0]);
+        let right = dayjs__default["default"](defaultValue.value[1]);
         if (!props.unlinkPanels) {
           right = left.add(1, "year");
         }
         return [left, right];
-      } else if (defaultValue) {
-        start = dayjs__default["default"](defaultValue);
+      } else if (defaultValue.value) {
+        start = dayjs__default["default"](defaultValue.value);
       } else {
         start = dayjs__default["default"]();
       }
@@ -132,7 +132,15 @@ var script = vue.defineComponent({
     };
     ctx.emit("set-picker-option", ["formatToString", formatToString]);
     const pickerBase = vue.inject("EP_PICKER_BASE");
-    const { shortcuts, disabledDate, format, defaultValue } = pickerBase.props;
+    const { shortcuts, disabledDate, format } = pickerBase.props;
+    const defaultValue = vue.toRef(pickerBase.props, "defaultValue");
+    vue.watch(() => defaultValue.value, (val) => {
+      if (val) {
+        const defaultArr = getDefaultValue();
+        leftDate.value = defaultArr[0];
+        rightDate.value = defaultArr[1];
+      }
+    }, { immediate: true });
     vue.watch(() => props.parsedValue, (newVal) => {
       if (newVal && newVal.length === 2) {
         minDate.value = newVal[0];

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

	@@ -1 +1 @@
1	- {"version":3,"file":"panel-month-range.vue_vue_type_script_lang.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-month-range.vue"],"sourcesContent":["<template>\n <div\n class=\"el-picker-panel el-date-range-picker\"\n :class=\"[\n {\n 'has-sidebar': $slots.sidebar \|\| hasShortcuts,\n },\n ]\"\n >\n <div class=\"el-picker-panel__body-wrapper\">\n <slot name=\"sidebar\" class=\"el-picker-panel__sidebar\"></slot>\n <div v-if=\"hasShortcuts\" class=\"el-picker-panel__sidebar\">\n <button\n v-for=\"(shortcut, key) in shortcuts\"\n :key=\"key\"\n type=\"button\"\n class=\"el-picker-panel__shortcut\"\n @click=\"handleShortcutClick(shortcut)\"\n >\n {{ shortcut.text }}\n </button>\n </div>\n <div class=\"el-picker-panel__body\">\n <div\n class=\"el-picker-panel__content el-date-range-picker__content is-left\"\n >\n <div class=\"el-date-range-picker__header\">\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn d-arrow-left\"\n @click=\"leftPrevYear\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableYearArrow\"\n :class=\"{ 'is-disabled': !enableYearArrow }\"\n class=\"el-picker-panel__icon-btn d-arrow-right\"\n @click=\"leftNextYear\"\n >\n <el-icon><d-arrow-right /></el-icon>\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 @changerange=\"handleChangeRange\"\n @pick=\"handleRangePick\"\n @select=\"onSelect\"\n />\n </div>\n <div\n class=\"el-picker-panel__content el-date-range-picker__content is-right\"\n >\n <div class=\"el-date-range-picker__header\">\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableYearArrow\"\n :class=\"{ 'is-disabled': !enableYearArrow }\"\n class=\"el-picker-panel__icon-btn d-arrow-left\"\n @click=\"rightPrevYear\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn d-arrow-right\"\n @click=\"rightNextYear\"\n >\n <el-icon><d-arrow-right /></el-icon>\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 @changerange=\"handleChangeRange\"\n @pick=\"handleRangePick\"\n @select=\"onSelect\"\n />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, watch, inject } 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 MonthTable from './basic-month-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nexport default defineComponent({\n components: { MonthTable, ElIcon, DArrowLeft, DArrowRight },\n\n props: {\n unlinkPanels: Boolean,\n parsedValue: {\n type: Array as PropType<Dayjs[]>,\n },\n },\n\n emits: ['pick', 'set-picker-option'],\n\n setup(props, ctx) {\n const { t, lang } = useLocale()\n const leftDate = ref(dayjs().locale(lang.value))\n const rightDate = ref(dayjs().locale(lang.value).add(1, 'year'))\n\n const hasShortcuts = computed(() => !!shortcuts.length)\n\n const handleShortcutClick = (shortcut) => {\n const shortcutValues =\n typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n if (shortcutValues) {\n ctx.emit('pick', [\n dayjs(shortcutValues[0]).locale(lang.value),\n dayjs(shortcutValues[1]).locale(lang.value),\n ])\n return\n }\n if (shortcut.onClick) {\n shortcut.onClick(ctx)\n }\n }\n\n const leftPrevYear = () => {\n leftDate.value = leftDate.value.subtract(1, 'year')\n if (!props.unlinkPanels) {\n rightDate.value = rightDate.value.subtract(1, 'year')\n }\n }\n\n const rightNextYear = () => {\n if (!props.unlinkPanels) {\n leftDate.value = leftDate.value.add(1, 'year')\n }\n rightDate.value = rightDate.value.add(1, 'year')\n }\n\n const leftNextYear = () => {\n leftDate.value = leftDate.value.add(1, 'year')\n }\n\n const rightPrevYear = () => {\n rightDate.value = rightDate.value.subtract(1, 'year')\n }\n const leftLabel = computed(() => {\n return `${leftDate.value.year()} ${t('el.datepicker.year')}`\n })\n\n const rightLabel = computed(() => {\n return `${rightDate.value.year()} ${t('el.datepicker.year')}`\n })\n\n const leftYear = computed(() => {\n return leftDate.value.year()\n })\n\n const rightYear = computed(() => {\n return rightDate.value.year() === leftDate.value.year()\n ? leftDate.value.year() + 1\n : rightDate.value.year()\n })\n\n const enableYearArrow = computed(() => {\n return props.unlinkPanels && rightYear.value > leftYear.value + 1\n })\n\n const minDate = ref(null)\n const maxDate = ref(null)\n\n const rangeState = ref({\n endDate: null,\n selecting: false,\n })\n\n const handleChangeRange = (val) => {\n rangeState.value = val\n }\n\n const handleRangePick = (val, 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 maxDate.value = maxDate_\n minDate.value = minDate_\n\n if (!close) return\n handleConfirm()\n }\n\n const isValidValue = (value) => {\n return (\n Array.isArray(value) &&\n value &&\n value[0] &&\n value[1] &&\n value[0].valueOf() <= value[1].valueOf()\n )\n }\n\n const handleConfirm = (visible = false) => {\n if (isValidValue([minDate.value, maxDate.value])) {\n ctx.emit('pick', [minDate.value, maxDate.value], visible)\n }\n }\n\n const onSelect = (selecting) => {\n rangeState.value.selecting = selecting\n if (!selecting) {\n rangeState.value.endDate = null\n }\n }\n\n const formatToString = (value) => {\n return value.map((_) => _.format(format))\n }\n\n const getDefaultValue = () => {\n let start: Dayjs\n if (Array.isArray(defaultValue)) {\n const left = dayjs(defaultValue[0])\n let right = dayjs(defaultValue[1])\n if (!props.unlinkPanels) {\n right = left.add(1, 'year')\n }\n return [left, right]\n } else if (defaultValue) {\n start = dayjs(defaultValue)\n } else {\n start = dayjs()\n }\n start = start.locale(lang.value)\n return [start, start.add(1, 'year')]\n }\n\n // pickerBase.hub.emit('SetPickerOption', ['isValidValue', isValidValue])\n ctx.emit('set-picker-option', ['formatToString', formatToString])\n const pickerBase = inject('EP_PICKER_BASE') as any\n const { shortcuts, disabledDate, format, defaultValue } = pickerBase.props\n\n watch(\n () => props.parsedValue,\n (newVal) => {\n if (newVal && newVal.length === 2) {\n minDate.value = newVal[0]\n maxDate.value = newVal[1]\n leftDate.value = minDate.value\n if (props.unlinkPanels && maxDate.value) {\n const minDateYear = minDate.value.year()\n const maxDateYear = maxDate.value.year()\n rightDate.value =\n minDateYear === maxDateYear\n ? maxDate.value.add(1, 'year')\n : maxDate.value\n } else {\n rightDate.value = leftDate.value.add(1, 'year')\n }\n } else {\n const defaultArr = getDefaultValue()\n minDate.value = null\n maxDate.value = null\n leftDate.value = defaultArr[0]\n rightDate.value = defaultArr[1]\n }\n },\n { immediate: true }\n )\n\n return {\n shortcuts,\n disabledDate,\n onSelect,\n handleRangePick,\n rangeState,\n handleChangeRange,\n minDate,\n maxDate,\n enableYearArrow,\n leftLabel,\n rightLabel,\n leftNextYear,\n leftPrevYear,\n rightNextYear,\n rightPrevYear,\n t,\n leftDate,\n rightDate,\n hasShortcuts,\n handleShortcutClick,\n }\n },\n})\n</script>\n"],"names":["defineComponent","ref","dayjs","computed"],"mappings":"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"}
1	+ {"version":3,"file":"panel-month-range.vue_vue_type_script_lang.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-month-range.vue"],"sourcesContent":["<template>\n <div\n class=\"el-picker-panel el-date-range-picker\"\n :class=\"[\n {\n 'has-sidebar': $slots.sidebar \|\| hasShortcuts,\n },\n ]\"\n >\n <div class=\"el-picker-panel__body-wrapper\">\n <slot name=\"sidebar\" class=\"el-picker-panel__sidebar\"></slot>\n <div v-if=\"hasShortcuts\" class=\"el-picker-panel__sidebar\">\n <button\n v-for=\"(shortcut, key) in shortcuts\"\n :key=\"key\"\n type=\"button\"\n class=\"el-picker-panel__shortcut\"\n @click=\"handleShortcutClick(shortcut)\"\n >\n {{ shortcut.text }}\n </button>\n </div>\n <div class=\"el-picker-panel__body\">\n <div\n class=\"el-picker-panel__content el-date-range-picker__content is-left\"\n >\n <div class=\"el-date-range-picker__header\">\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn d-arrow-left\"\n @click=\"leftPrevYear\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableYearArrow\"\n :class=\"{ 'is-disabled': !enableYearArrow }\"\n class=\"el-picker-panel__icon-btn d-arrow-right\"\n @click=\"leftNextYear\"\n >\n <el-icon><d-arrow-right /></el-icon>\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 @changerange=\"handleChangeRange\"\n @pick=\"handleRangePick\"\n @select=\"onSelect\"\n />\n </div>\n <div\n class=\"el-picker-panel__content el-date-range-picker__content is-right\"\n >\n <div class=\"el-date-range-picker__header\">\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableYearArrow\"\n :class=\"{ 'is-disabled': !enableYearArrow }\"\n class=\"el-picker-panel__icon-btn d-arrow-left\"\n @click=\"rightPrevYear\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn d-arrow-right\"\n @click=\"rightNextYear\"\n >\n <el-icon><d-arrow-right /></el-icon>\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 @changerange=\"handleChangeRange\"\n @pick=\"handleRangePick\"\n @select=\"onSelect\"\n />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, watch, inject, toRef } 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 MonthTable from './basic-month-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nexport default defineComponent({\n components: { MonthTable, ElIcon, DArrowLeft, DArrowRight },\n\n props: {\n unlinkPanels: Boolean,\n parsedValue: {\n type: Array as PropType<Dayjs[]>,\n },\n },\n\n emits: ['pick', 'set-picker-option'],\n\n setup(props, ctx) {\n const { t, lang } = useLocale()\n const leftDate = ref(dayjs().locale(lang.value))\n const rightDate = ref(dayjs().locale(lang.value).add(1, 'year'))\n\n const hasShortcuts = computed(() => !!shortcuts.length)\n\n const handleShortcutClick = (shortcut) => {\n const shortcutValues =\n typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n if (shortcutValues) {\n ctx.emit('pick', [\n dayjs(shortcutValues[0]).locale(lang.value),\n dayjs(shortcutValues[1]).locale(lang.value),\n ])\n return\n }\n if (shortcut.onClick) {\n shortcut.onClick(ctx)\n }\n }\n\n const leftPrevYear = () => {\n leftDate.value = leftDate.value.subtract(1, 'year')\n if (!props.unlinkPanels) {\n rightDate.value = rightDate.value.subtract(1, 'year')\n }\n }\n\n const rightNextYear = () => {\n if (!props.unlinkPanels) {\n leftDate.value = leftDate.value.add(1, 'year')\n }\n rightDate.value = rightDate.value.add(1, 'year')\n }\n\n const leftNextYear = () => {\n leftDate.value = leftDate.value.add(1, 'year')\n }\n\n const rightPrevYear = () => {\n rightDate.value = rightDate.value.subtract(1, 'year')\n }\n const leftLabel = computed(() => {\n return `${leftDate.value.year()} ${t('el.datepicker.year')}`\n })\n\n const rightLabel = computed(() => {\n return `${rightDate.value.year()} ${t('el.datepicker.year')}`\n })\n\n const leftYear = computed(() => {\n return leftDate.value.year()\n })\n\n const rightYear = computed(() => {\n return rightDate.value.year() === leftDate.value.year()\n ? leftDate.value.year() + 1\n : rightDate.value.year()\n })\n\n const enableYearArrow = computed(() => {\n return props.unlinkPanels && rightYear.value > leftYear.value + 1\n })\n\n const minDate = ref(null)\n const maxDate = ref(null)\n\n const rangeState = ref({\n endDate: null,\n selecting: false,\n })\n\n const handleChangeRange = (val) => {\n rangeState.value = val\n }\n\n const handleRangePick = (val, 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 maxDate.value = maxDate_\n minDate.value = minDate_\n\n if (!close) return\n handleConfirm()\n }\n\n const isValidValue = (value) => {\n return (\n Array.isArray(value) &&\n value &&\n value[0] &&\n value[1] &&\n value[0].valueOf() <= value[1].valueOf()\n )\n }\n\n const handleConfirm = (visible = false) => {\n if (isValidValue([minDate.value, maxDate.value])) {\n ctx.emit('pick', [minDate.value, maxDate.value], visible)\n }\n }\n\n const onSelect = (selecting) => {\n rangeState.value.selecting = selecting\n if (!selecting) {\n rangeState.value.endDate = null\n }\n }\n\n const formatToString = (value) => {\n return value.map((_) => _.format(format))\n }\n\n const getDefaultValue = () => {\n let start: Dayjs\n if (Array.isArray(defaultValue.value)) {\n const left = dayjs(defaultValue.value[0])\n let right = dayjs(defaultValue.value[1])\n if (!props.unlinkPanels) {\n right = left.add(1, 'year')\n }\n return [left, right]\n } else if (defaultValue.value) {\n start = dayjs(defaultValue.value)\n } else {\n start = dayjs()\n }\n start = start.locale(lang.value)\n return [start, start.add(1, 'year')]\n }\n\n // pickerBase.hub.emit('SetPickerOption', ['isValidValue', isValidValue])\n ctx.emit('set-picker-option', ['formatToString', formatToString])\n const pickerBase = inject('EP_PICKER_BASE') as any\n const { shortcuts, disabledDate, format } = pickerBase.props\n const defaultValue = toRef(pickerBase.props, 'defaultValue')\n\n watch(\n () => defaultValue.value,\n (val) => {\n if (val) {\n const defaultArr = getDefaultValue()\n leftDate.value = defaultArr[0]\n rightDate.value = defaultArr[1]\n }\n },\n { immediate: true }\n )\n\n watch(\n () => props.parsedValue,\n (newVal) => {\n if (newVal && newVal.length === 2) {\n minDate.value = newVal[0]\n maxDate.value = newVal[1]\n leftDate.value = minDate.value\n if (props.unlinkPanels && maxDate.value) {\n const minDateYear = minDate.value.year()\n const maxDateYear = maxDate.value.year()\n rightDate.value =\n minDateYear === maxDateYear\n ? maxDate.value.add(1, 'year')\n : maxDate.value\n } else {\n rightDate.value = leftDate.value.add(1, 'year')\n }\n } else {\n const defaultArr = getDefaultValue()\n minDate.value = null\n maxDate.value = null\n leftDate.value = defaultArr[0]\n rightDate.value = defaultArr[1]\n }\n },\n { immediate: true }\n )\n\n return {\n shortcuts,\n disabledDate,\n onSelect,\n handleRangePick,\n rangeState,\n handleChangeRange,\n minDate,\n maxDate,\n enableYearArrow,\n leftLabel,\n rightLabel,\n leftNextYear,\n leftPrevYear,\n rightNextYear,\n rightPrevYear,\n t,\n leftDate,\n rightDate,\n hasShortcuts,\n handleShortcutClick,\n }\n },\n})\n</script>\n"],"names":["defineComponent","ref","dayjs","computed","watch"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"panel-month-range.vue_vue_type_template_id_2e377892_lang.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-month-range.vue?vue&type=template&id=2e377892&lang.js"],"sourcesContent":["<template>\n <div\n class=\"el-picker-panel el-date-range-picker\"\n :class=\"[\n {\n 'has-sidebar': $slots.sidebar \|\| hasShortcuts,\n },\n ]\"\n >\n <div class=\"el-picker-panel__body-wrapper\">\n <slot name=\"sidebar\" class=\"el-picker-panel__sidebar\"></slot>\n <div v-if=\"hasShortcuts\" class=\"el-picker-panel__sidebar\">\n <button\n v-for=\"(shortcut, key) in shortcuts\"\n :key=\"key\"\n type=\"button\"\n class=\"el-picker-panel__shortcut\"\n @click=\"handleShortcutClick(shortcut)\"\n >\n {{ shortcut.text }}\n </button>\n </div>\n <div class=\"el-picker-panel__body\">\n <div\n class=\"el-picker-panel__content el-date-range-picker__content is-left\"\n >\n <div class=\"el-date-range-picker__header\">\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn d-arrow-left\"\n @click=\"leftPrevYear\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableYearArrow\"\n :class=\"{ 'is-disabled': !enableYearArrow }\"\n class=\"el-picker-panel__icon-btn d-arrow-right\"\n @click=\"leftNextYear\"\n >\n <el-icon><d-arrow-right /></el-icon>\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 @changerange=\"handleChangeRange\"\n @pick=\"handleRangePick\"\n @select=\"onSelect\"\n />\n </div>\n <div\n class=\"el-picker-panel__content el-date-range-picker__content is-right\"\n >\n <div class=\"el-date-range-picker__header\">\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableYearArrow\"\n :class=\"{ 'is-disabled': !enableYearArrow }\"\n class=\"el-picker-panel__icon-btn d-arrow-left\"\n @click=\"rightPrevYear\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn d-arrow-right\"\n @click=\"rightNextYear\"\n >\n <el-icon><d-arrow-right /></el-icon>\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 @changerange=\"handleChangeRange\"\n @pick=\"handleRangePick\"\n @select=\"onSelect\"\n />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, watch, inject } 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 MonthTable from './basic-month-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nexport default defineComponent({\n components: { MonthTable, ElIcon, DArrowLeft, DArrowRight },\n\n props: {\n unlinkPanels: Boolean,\n parsedValue: {\n type: Array as PropType<Dayjs[]>,\n },\n },\n\n emits: ['pick', 'set-picker-option'],\n\n setup(props, ctx) {\n const { t, lang } = useLocale()\n const leftDate = ref(dayjs().locale(lang.value))\n const rightDate = ref(dayjs().locale(lang.value).add(1, 'year'))\n\n const hasShortcuts = computed(() => !!shortcuts.length)\n\n const handleShortcutClick = (shortcut) => {\n const shortcutValues =\n typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n if (shortcutValues) {\n ctx.emit('pick', [\n dayjs(shortcutValues[0]).locale(lang.value),\n dayjs(shortcutValues[1]).locale(lang.value),\n ])\n return\n }\n if (shortcut.onClick) {\n shortcut.onClick(ctx)\n }\n }\n\n const leftPrevYear = () => {\n leftDate.value = leftDate.value.subtract(1, 'year')\n if (!props.unlinkPanels) {\n rightDate.value = rightDate.value.subtract(1, 'year')\n }\n }\n\n const rightNextYear = () => {\n if (!props.unlinkPanels) {\n leftDate.value = leftDate.value.add(1, 'year')\n }\n rightDate.value = rightDate.value.add(1, 'year')\n }\n\n const leftNextYear = () => {\n leftDate.value = leftDate.value.add(1, 'year')\n }\n\n const rightPrevYear = () => {\n rightDate.value = rightDate.value.subtract(1, 'year')\n }\n const leftLabel = computed(() => {\n return `${leftDate.value.year()} ${t('el.datepicker.year')}`\n })\n\n const rightLabel = computed(() => {\n return `${rightDate.value.year()} ${t('el.datepicker.year')}`\n })\n\n const leftYear = computed(() => {\n return leftDate.value.year()\n })\n\n const rightYear = computed(() => {\n return rightDate.value.year() === leftDate.value.year()\n ? leftDate.value.year() + 1\n : rightDate.value.year()\n })\n\n const enableYearArrow = computed(() => {\n return props.unlinkPanels && rightYear.value > leftYear.value + 1\n })\n\n const minDate = ref(null)\n const maxDate = ref(null)\n\n const rangeState = ref({\n endDate: null,\n selecting: false,\n })\n\n const handleChangeRange = (val) => {\n rangeState.value = val\n }\n\n const handleRangePick = (val, 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 maxDate.value = maxDate_\n minDate.value = minDate_\n\n if (!close) return\n handleConfirm()\n }\n\n const isValidValue = (value) => {\n return (\n Array.isArray(value) &&\n value &&\n value[0] &&\n value[1] &&\n value[0].valueOf() <= value[1].valueOf()\n )\n }\n\n const handleConfirm = (visible = false) => {\n if (isValidValue([minDate.value, maxDate.value])) {\n ctx.emit('pick', [minDate.value, maxDate.value], visible)\n }\n }\n\n const onSelect = (selecting) => {\n rangeState.value.selecting = selecting\n if (!selecting) {\n rangeState.value.endDate = null\n }\n }\n\n const formatToString = (value) => {\n return value.map((_) => _.format(format))\n }\n\n const getDefaultValue = () => {\n let start: Dayjs\n if (Array.isArray(defaultValue)) {\n const left = dayjs(defaultValue[0])\n let right = dayjs(defaultValue[1])\n if (!props.unlinkPanels) {\n right = left.add(1, 'year')\n }\n return [left, right]\n } else if (defaultValue) {\n start = dayjs(defaultValue)\n } else {\n start = dayjs()\n }\n start = start.locale(lang.value)\n return [start, start.add(1, 'year')]\n }\n\n // pickerBase.hub.emit('SetPickerOption', ['isValidValue', isValidValue])\n ctx.emit('set-picker-option', ['formatToString', formatToString])\n const pickerBase = inject('EP_PICKER_BASE') as any\n const { shortcuts, disabledDate, format, defaultValue } = pickerBase.props\n\n watch(\n () => props.parsedValue,\n (newVal) => {\n if (newVal && newVal.length === 2) {\n minDate.value = newVal[0]\n maxDate.value = newVal[1]\n leftDate.value = minDate.value\n if (props.unlinkPanels && maxDate.value) {\n const minDateYear = minDate.value.year()\n const maxDateYear = maxDate.value.year()\n rightDate.value =\n minDateYear === maxDateYear\n ? maxDate.value.add(1, 'year')\n : maxDate.value\n } else {\n rightDate.value = leftDate.value.add(1, 'year')\n }\n } else {\n const defaultArr = getDefaultValue()\n minDate.value = null\n maxDate.value = null\n leftDate.value = defaultArr[0]\n rightDate.value = defaultArr[1]\n }\n },\n { immediate: true }\n )\n\n return {\n shortcuts,\n disabledDate,\n onSelect,\n handleRangePick,\n rangeState,\n handleChangeRange,\n minDate,\n maxDate,\n enableYearArrow,\n leftLabel,\n rightLabel,\n leftNextYear,\n leftPrevYear,\n rightNextYear,\n rightPrevYear,\n t,\n leftDate,\n rightDate,\n hasShortcuts,\n handleShortcutClick,\n }\n },\n})\n</script>\n"],"names":["_createVNode"],"mappings":";;;;;;;;;;EAW+B;;;qBAWpB,KAAK,EAAC;qBAEP,KAAK,EAAC;;;qBAmCN,KAAK,EAAC;qBAED;;;;;;;;;;;;;;;;;yDAnDkB;;;;;;gBAKvB;;;;;;;;;;;;;;;;;;;;;;8BAoBsB;;;;kBAEjBA;kBACA;;;;0CAIyB;;;;;;;YAE5B;;;YAGA;YACC;sBACQ;;8BAEK;gCACE;YACf;oBACM;oBACA;;;;;;;;kBASL;;;sEAIQ;;kBAER;;;;;;;;;;cAIA;;;;;kBAGS;;;;;YAEX;;;;;;;;;;;;"}
1	+ {"version":3,"file":"panel-month-range.vue_vue_type_template_id_2e377892_lang.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-month-range.vue?vue&type=template&id=2e377892&lang.js"],"sourcesContent":["<template>\n <div\n class=\"el-picker-panel el-date-range-picker\"\n :class=\"[\n {\n 'has-sidebar': $slots.sidebar \|\| hasShortcuts,\n },\n ]\"\n >\n <div class=\"el-picker-panel__body-wrapper\">\n <slot name=\"sidebar\" class=\"el-picker-panel__sidebar\"></slot>\n <div v-if=\"hasShortcuts\" class=\"el-picker-panel__sidebar\">\n <button\n v-for=\"(shortcut, key) in shortcuts\"\n :key=\"key\"\n type=\"button\"\n class=\"el-picker-panel__shortcut\"\n @click=\"handleShortcutClick(shortcut)\"\n >\n {{ shortcut.text }}\n </button>\n </div>\n <div class=\"el-picker-panel__body\">\n <div\n class=\"el-picker-panel__content el-date-range-picker__content is-left\"\n >\n <div class=\"el-date-range-picker__header\">\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn d-arrow-left\"\n @click=\"leftPrevYear\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableYearArrow\"\n :class=\"{ 'is-disabled': !enableYearArrow }\"\n class=\"el-picker-panel__icon-btn d-arrow-right\"\n @click=\"leftNextYear\"\n >\n <el-icon><d-arrow-right /></el-icon>\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 @changerange=\"handleChangeRange\"\n @pick=\"handleRangePick\"\n @select=\"onSelect\"\n />\n </div>\n <div\n class=\"el-picker-panel__content el-date-range-picker__content is-right\"\n >\n <div class=\"el-date-range-picker__header\">\n <button\n v-if=\"unlinkPanels\"\n type=\"button\"\n :disabled=\"!enableYearArrow\"\n :class=\"{ 'is-disabled': !enableYearArrow }\"\n class=\"el-picker-panel__icon-btn d-arrow-left\"\n @click=\"rightPrevYear\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n type=\"button\"\n class=\"el-picker-panel__icon-btn d-arrow-right\"\n @click=\"rightNextYear\"\n >\n <el-icon><d-arrow-right /></el-icon>\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 @changerange=\"handleChangeRange\"\n @pick=\"handleRangePick\"\n @select=\"onSelect\"\n />\n </div>\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, watch, inject, toRef } 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 MonthTable from './basic-month-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\nexport default defineComponent({\n components: { MonthTable, ElIcon, DArrowLeft, DArrowRight },\n\n props: {\n unlinkPanels: Boolean,\n parsedValue: {\n type: Array as PropType<Dayjs[]>,\n },\n },\n\n emits: ['pick', 'set-picker-option'],\n\n setup(props, ctx) {\n const { t, lang } = useLocale()\n const leftDate = ref(dayjs().locale(lang.value))\n const rightDate = ref(dayjs().locale(lang.value).add(1, 'year'))\n\n const hasShortcuts = computed(() => !!shortcuts.length)\n\n const handleShortcutClick = (shortcut) => {\n const shortcutValues =\n typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n if (shortcutValues) {\n ctx.emit('pick', [\n dayjs(shortcutValues[0]).locale(lang.value),\n dayjs(shortcutValues[1]).locale(lang.value),\n ])\n return\n }\n if (shortcut.onClick) {\n shortcut.onClick(ctx)\n }\n }\n\n const leftPrevYear = () => {\n leftDate.value = leftDate.value.subtract(1, 'year')\n if (!props.unlinkPanels) {\n rightDate.value = rightDate.value.subtract(1, 'year')\n }\n }\n\n const rightNextYear = () => {\n if (!props.unlinkPanels) {\n leftDate.value = leftDate.value.add(1, 'year')\n }\n rightDate.value = rightDate.value.add(1, 'year')\n }\n\n const leftNextYear = () => {\n leftDate.value = leftDate.value.add(1, 'year')\n }\n\n const rightPrevYear = () => {\n rightDate.value = rightDate.value.subtract(1, 'year')\n }\n const leftLabel = computed(() => {\n return `${leftDate.value.year()} ${t('el.datepicker.year')}`\n })\n\n const rightLabel = computed(() => {\n return `${rightDate.value.year()} ${t('el.datepicker.year')}`\n })\n\n const leftYear = computed(() => {\n return leftDate.value.year()\n })\n\n const rightYear = computed(() => {\n return rightDate.value.year() === leftDate.value.year()\n ? leftDate.value.year() + 1\n : rightDate.value.year()\n })\n\n const enableYearArrow = computed(() => {\n return props.unlinkPanels && rightYear.value > leftYear.value + 1\n })\n\n const minDate = ref(null)\n const maxDate = ref(null)\n\n const rangeState = ref({\n endDate: null,\n selecting: false,\n })\n\n const handleChangeRange = (val) => {\n rangeState.value = val\n }\n\n const handleRangePick = (val, 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 maxDate.value = maxDate_\n minDate.value = minDate_\n\n if (!close) return\n handleConfirm()\n }\n\n const isValidValue = (value) => {\n return (\n Array.isArray(value) &&\n value &&\n value[0] &&\n value[1] &&\n value[0].valueOf() <= value[1].valueOf()\n )\n }\n\n const handleConfirm = (visible = false) => {\n if (isValidValue([minDate.value, maxDate.value])) {\n ctx.emit('pick', [minDate.value, maxDate.value], visible)\n }\n }\n\n const onSelect = (selecting) => {\n rangeState.value.selecting = selecting\n if (!selecting) {\n rangeState.value.endDate = null\n }\n }\n\n const formatToString = (value) => {\n return value.map((_) => _.format(format))\n }\n\n const getDefaultValue = () => {\n let start: Dayjs\n if (Array.isArray(defaultValue.value)) {\n const left = dayjs(defaultValue.value[0])\n let right = dayjs(defaultValue.value[1])\n if (!props.unlinkPanels) {\n right = left.add(1, 'year')\n }\n return [left, right]\n } else if (defaultValue.value) {\n start = dayjs(defaultValue.value)\n } else {\n start = dayjs()\n }\n start = start.locale(lang.value)\n return [start, start.add(1, 'year')]\n }\n\n // pickerBase.hub.emit('SetPickerOption', ['isValidValue', isValidValue])\n ctx.emit('set-picker-option', ['formatToString', formatToString])\n const pickerBase = inject('EP_PICKER_BASE') as any\n const { shortcuts, disabledDate, format } = pickerBase.props\n const defaultValue = toRef(pickerBase.props, 'defaultValue')\n\n watch(\n () => defaultValue.value,\n (val) => {\n if (val) {\n const defaultArr = getDefaultValue()\n leftDate.value = defaultArr[0]\n rightDate.value = defaultArr[1]\n }\n },\n { immediate: true }\n )\n\n watch(\n () => props.parsedValue,\n (newVal) => {\n if (newVal && newVal.length === 2) {\n minDate.value = newVal[0]\n maxDate.value = newVal[1]\n leftDate.value = minDate.value\n if (props.unlinkPanels && maxDate.value) {\n const minDateYear = minDate.value.year()\n const maxDateYear = maxDate.value.year()\n rightDate.value =\n minDateYear === maxDateYear\n ? maxDate.value.add(1, 'year')\n : maxDate.value\n } else {\n rightDate.value = leftDate.value.add(1, 'year')\n }\n } else {\n const defaultArr = getDefaultValue()\n minDate.value = null\n maxDate.value = null\n leftDate.value = defaultArr[0]\n rightDate.value = defaultArr[1]\n }\n },\n { immediate: true }\n )\n\n return {\n shortcuts,\n disabledDate,\n onSelect,\n handleRangePick,\n rangeState,\n handleChangeRange,\n minDate,\n maxDate,\n enableYearArrow,\n leftLabel,\n rightLabel,\n leftNextYear,\n leftPrevYear,\n rightNextYear,\n rightPrevYear,\n t,\n leftDate,\n rightDate,\n hasShortcuts,\n handleShortcutClick,\n }\n },\n})\n</script>\n"],"names":["_createVNode"],"mappings":";;;;;;;;;;EAW+B;;;qBAWpB,KAAK,EAAC;qBAEP,KAAK,EAAC;;;qBAmCN,KAAK,EAAC;qBAED;;;;;;;;;;;;;;;;;yDAnDkB;;;;;;gBAKvB;;;;;;;;;;;;;;;;;;;;;;8BAoBsB;;;;kBAEjBA;kBACA;;;;0CAIyB;;;;;;;YAE5B;;;YAGA;YACC;sBACQ;;8BAEK;gCACE;YACf;oBACM;oBACA;;;;;;;;kBASL;;;sEAIQ;;kBAER;;;;;;;;;;cAIA;;;;;kBAGS;;;;;YAEX;;;;;;;;;;;;"}