npm - @element-plus/nightly - Versions diffs - 0.0.20220118 → 0.0.20220119 - Mend

@element-plus/nightly 0.0.20220118 → 0.0.20220119

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 (1042) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"panel-date-pick.vue_vue_type_script_lang.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-date-pick.vue"],"sourcesContent":["<template>\n <div\n class=\"el-picker-panel el-date-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-picker__time-header\">\n <span class=\"el-date-picker__editor-wrap\">\n <el-input\n :placeholder=\"t('el.datepicker.selectDate')\"\n :model-value=\"visibleDate\"\n size=\"small\"\n @input=\"(val) => (userInputDate = val)\"\n @change=\"handleVisibleDateChange\"\n />\n </span>\n <span\n v-clickoutside=\"handleTimePickClose\"\n class=\"el-date-picker__editor-wrap\"\n >\n <el-input\n :placeholder=\"t('el.datepicker.selectTime')\"\n :model-value=\"visibleTime\"\n size=\"small\"\n @focus=\"onTimePickerInputFocus\"\n @input=\"(val) => (userInputTime = val)\"\n @change=\"handleVisibleTimeChange\"\n />\n <time-pick-panel\n :visible=\"timePickerVisible\"\n :format=\"timeFormat\"\n :time-arrow-control=\"arrowControl\"\n :parsed-value=\"innerDate\"\n @pick=\"handleTimePick\"\n />\n </span>\n </div>\n <div\n v-show=\"currentView !== 'time'\"\n class=\"el-date-picker__header\"\n :class=\"{\n 'el-date-picker__header--bordered':\n currentView === 'year' \|\| currentView === 'month',\n }\"\n >\n <button\n type=\"button\"\n :aria-label=\"t(`el.datepicker.prevYear`)\"\n class=\"el-picker-panel__icon-btn el-date-picker__prev-btn d-arrow-left\"\n @click=\"prevYear_\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n v-show=\"currentView === 'date'\"\n type=\"button\"\n :aria-label=\"t(`el.datepicker.prevMonth`)\"\n class=\"el-picker-panel__icon-btn el-date-picker__prev-btn arrow-left\"\n @click=\"prevMonth_\"\n >\n <el-icon><arrow-left /></el-icon>\n </button>\n <span\n role=\"button\"\n class=\"el-date-picker__header-label\"\n @click=\"showYearPicker\"\n >{{ yearLabel }}</span\n >\n <span\n v-show=\"currentView === 'date'\"\n role=\"button\"\n class=\"el-date-picker__header-label\"\n :class=\"{ active: currentView === 'month' }\"\n @click=\"showMonthPicker\"\n >{{ t(`el.datepicker.month${month + 1}`) }}</span\n >\n <button\n type=\"button\"\n :aria-label=\"t(`el.datepicker.nextYear`)\"\n class=\"el-picker-panel__icon-btn el-date-picker__next-btn d-arrow-right\"\n @click=\"nextYear_\"\n >\n <el-icon><d-arrow-right /></el-icon>\n </button>\n <button\n v-show=\"currentView === 'date'\"\n type=\"button\"\n :aria-label=\"t(`el.datepicker.nextMonth`)\"\n class=\"el-picker-panel__icon-btn el-date-picker__next-btn arrow-right\"\n @click=\"nextMonth_\"\n >\n <el-icon><arrow-right /></el-icon>\n </button>\n </div>\n <div class=\"el-picker-panel__content\">\n <date-table\n v-if=\"currentView === 'date'\"\n :selection-mode=\"selectionMode\"\n :date=\"innerDate\"\n :parsed-value=\"parsedValue\"\n :disabled-date=\"disabledDate\"\n @pick=\"handleDatePick\"\n />\n <year-table\n v-if=\"currentView === 'year'\"\n :date=\"innerDate\"\n :disabled-date=\"disabledDate\"\n :parsed-value=\"parsedValue\"\n @pick=\"handleYearPick\"\n />\n <month-table\n v-if=\"currentView === 'month'\"\n :date=\"innerDate\"\n :parsed-value=\"parsedValue\"\n :disabled-date=\"disabledDate\"\n @pick=\"handleMonthPick\"\n />\n </div>\n </div>\n </div>\n <div\n v-show=\"footerVisible && currentView === 'date'\"\n class=\"el-picker-panel__footer\"\n >\n <el-button\n v-show=\"selectionMode !== 'dates'\"\n size=\"small\"\n type=\"text\"\n class=\"el-picker-panel__link-btn\"\n @click=\"changeToNow\"\n >\n {{ t('el.datepicker.now') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n class=\"el-picker-panel__link-btn\"\n @click=\"onConfirm\"\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 { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidDatePickType } from '@element-plus/utils/validators'\nimport {\n DArrowLeft,\n ArrowLeft,\n DArrowRight,\n ArrowRight,\n} from '@element-plus/icons-vue'\nimport { TOOLTIP_INJECTION_KEY } from '@element-plus/components/tooltip'\nimport DateTable from './basic-date-table.vue'\nimport MonthTable from './basic-month-table.vue'\nimport YearTable from './basic-year-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { ConfigType, Dayjs } from 'dayjs'\nimport type { IDatePickerType } from '../date-picker.type'\n\n// todo\n/* eslint-disable-next-line /\nconst timeWithinRange = (_: ConfigType, __: any, ___: string) => true\n\nexport default defineComponent({\n components: {\n DateTable,\n ElInput,\n ElButton,\n ElIcon,\n TimePickPanel,\n MonthTable,\n YearTable,\n DArrowLeft,\n ArrowLeft,\n DArrowRight,\n ArrowRight,\n },\n\n directives: { clickoutside: ClickOutside },\n props: {\n visible: {\n type: Boolean,\n default: false,\n },\n parsedValue: {\n type: [Object, Array] as PropType<Dayjs \| Dayjs[]>,\n },\n format: {\n type: String,\n default: '',\n },\n type: {\n type: String as PropType<IDatePickerType>,\n required: true,\n validator: isValidDatePickType,\n },\n },\n emits: ['pick', 'set-picker-option', 'panel-change'],\n setup(props, ctx) {\n const { t, lang } = useLocale()\n const pickerBase = inject('EP_PICKER_BASE') as any\n const popper = inject(TOOLTIP_INJECTION_KEY)\n const {\n shortcuts,\n disabledDate,\n cellClassName,\n defaultTime,\n defaultValue,\n arrowControl,\n } = pickerBase.props\n\n const innerDate = ref(dayjs().locale(lang.value))\n\n const defaultTimeD = computed(() => {\n return dayjs(defaultTime).locale(lang.value)\n })\n\n const month = computed(() => {\n return innerDate.value.month()\n })\n\n const year = computed(() => {\n return innerDate.value.year()\n })\n\n const selectableRange = ref([])\n const userInputDate = ref(null)\n const userInputTime = ref(null)\n // todo update to disableHour\n const checkDateWithinRange = (date: ConfigType) => {\n return selectableRange.value.length > 0\n ? timeWithinRange(\n date,\n selectableRange.value,\n props.format \|\| 'HH:mm:ss'\n )\n : true\n }\n const formatEmit = (emitDayjs: Dayjs) => {\n if (defaultTime && !visibleTime.value) {\n return defaultTimeD.value\n .year(emitDayjs.year())\n .month(emitDayjs.month())\n .date(emitDayjs.date())\n }\n if (showTime.value) return emitDayjs.millisecond(0)\n return emitDayjs.startOf('day')\n }\n const emit = (value, ...args) => {\n if (!value) {\n ctx.emit('pick', value, ...args)\n } else if (Array.isArray(value)) {\n const dates = value.map(formatEmit)\n ctx.emit('pick', dates, ...args)\n } else {\n ctx.emit('pick', formatEmit(value), ...args)\n }\n userInputDate.value = null\n userInputTime.value = null\n }\n const handleDatePick = (value: Dayjs) => {\n if (selectionMode.value === 'day') {\n let newDate = props.parsedValue\n ? (props.parsedValue as Dayjs)\n .year(value.year())\n .month(value.month())\n .date(value.date())\n : value\n // change default time while out of selectableRange\n if (!checkDateWithinRange(newDate)) {\n newDate = (selectableRange.value[0][0] as Dayjs)\n .year(value.year())\n .month(value.month())\n .date(value.date())\n }\n innerDate.value = newDate\n emit(newDate, showTime.value)\n } else if (selectionMode.value === 'week') {\n emit(value.date)\n } else if (selectionMode.value === 'dates') {\n emit(value, true) // set false to keep panel open\n }\n }\n const prevMonth_ = () => {\n innerDate.value = innerDate.value.subtract(1, 'month')\n handlePanelChange('month')\n }\n\n const nextMonth_ = () => {\n innerDate.value = innerDate.value.add(1, 'month')\n handlePanelChange('month')\n }\n\n const prevYear_ = () => {\n if (currentView.value === 'year') {\n innerDate.value = innerDate.value.subtract(10, 'year')\n } else {\n innerDate.value = innerDate.value.subtract(1, 'year')\n }\n handlePanelChange('year')\n }\n\n const nextYear_ = () => {\n if (currentView.value === 'year') {\n innerDate.value = innerDate.value.add(10, 'year')\n } else {\n innerDate.value = innerDate.value.add(1, 'year')\n }\n handlePanelChange('year')\n }\n\n const currentView = ref('date')\n\n const yearLabel = computed(() => {\n const yearTranslation = t('el.datepicker.year')\n if (currentView.value === 'year') {\n const startYear = Math.floor(year.value / 10) 10\n if (yearTranslation) {\n return `${startYear} ${yearTranslation} - ${\n startYear + 9\n } ${yearTranslation}`\n }\n return `${startYear} - ${startYear + 9}`\n }\n return `${year.value} ${yearTranslation}`\n })\n\n const handleShortcutClick = (shortcut) => {\n const shortcutValue =\n typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n if (shortcutValue) {\n emit(dayjs(shortcutValue).locale(lang.value))\n return\n }\n if (shortcut.onClick) {\n shortcut.onClick(ctx)\n }\n }\n\n const selectionMode = computed(() => {\n if (['week', 'month', 'year', 'dates'].includes(props.type)) {\n return props.type\n }\n return 'day'\n })\n\n watch(\n () => selectionMode.value,\n (val) => {\n if (['month', 'year'].includes(val)) {\n currentView.value = val\n return\n }\n currentView.value = 'date'\n },\n { immediate: true }\n )\n\n watch(\n () => currentView.value,\n () => {\n popper?.updatePopper()\n }\n )\n\n const hasShortcuts = computed(() => !!shortcuts.length)\n\n const handleMonthPick = (month) => {\n innerDate.value = innerDate.value.startOf('month').month(month)\n if (selectionMode.value === 'month') {\n emit(innerDate.value)\n } else {\n currentView.value = 'date'\n }\n handlePanelChange('month')\n }\n\n const handleYearPick = (year) => {\n if (selectionMode.value === 'year') {\n innerDate.value = innerDate.value.startOf('year').year(year)\n emit(innerDate.value)\n } else {\n innerDate.value = innerDate.value.year(year)\n currentView.value = 'month'\n }\n handlePanelChange('year')\n }\n\n const showMonthPicker = () => {\n currentView.value = 'month'\n }\n\n const showYearPicker = () => {\n currentView.value = 'year'\n }\n\n const showTime = computed(\n () => props.type === 'datetime' \|\| props.type === 'datetimerange'\n )\n\n const footerVisible = computed(() => {\n return showTime.value \|\| selectionMode.value === 'dates'\n })\n\n const onConfirm = () => {\n if (selectionMode.value === 'dates') {\n emit(props.parsedValue)\n } else {\n // deal with the scenario where: user opens the date time picker, then confirm without doing anything\n let result = props.parsedValue as Dayjs\n if (!result) {\n const defaultTimeD = dayjs(defaultTime).locale(lang.value)\n const defaultValueD = getDefaultValue()\n result = defaultTimeD\n .year(defaultValueD.year())\n .month(defaultValueD.month())\n .date(defaultValueD.date())\n }\n innerDate.value = result\n emit(result)\n }\n }\n\n const changeToNow = () => {\n // NOTE: not a permanent solution\n // consider disable \"now\" button in the future\n const now = dayjs().locale(lang.value)\n const nowDate = now.toDate()\n if (\n (!disabledDate \|\| !disabledDate(nowDate)) &&\n checkDateWithinRange(nowDate)\n ) {\n innerDate.value = dayjs().locale(lang.value)\n emit(innerDate.value)\n }\n }\n\n const timeFormat = computed(() => {\n return extractTimeFormat(props.format)\n })\n\n const dateFormat = computed(() => {\n return extractDateFormat(props.format)\n })\n\n const visibleTime = computed(() => {\n if (userInputTime.value) return userInputTime.value\n if (!props.parsedValue && !defaultValue) return\n return ((props.parsedValue \|\| innerDate.value) as Dayjs).format(\n timeFormat.value\n )\n })\n\n const visibleDate = computed(() => {\n if (userInputDate.value) return userInputDate.value\n if (!props.parsedValue && !defaultValue) return\n return ((props.parsedValue \|\| innerDate.value) as Dayjs).format(\n dateFormat.value\n )\n })\n\n const timePickerVisible = ref(false)\n const onTimePickerInputFocus = () => {\n timePickerVisible.value = true\n }\n const handleTimePickClose = () => {\n timePickerVisible.value = false\n }\n\n const handleTimePick = (value, visible, first) => {\n const newDate = props.parsedValue\n ? (props.parsedValue as Dayjs)\n .hour(value.hour())\n .minute(value.minute())\n .second(value.second())\n : value\n innerDate.value = newDate\n emit(innerDate.value, true)\n if (!first) {\n timePickerVisible.value = visible\n }\n }\n\n const handleVisibleTimeChange = (value) => {\n const newDate = dayjs(value, timeFormat.value).locale(lang.value)\n if (newDate.isValid() && checkDateWithinRange(newDate)) {\n innerDate.value = newDate\n .year(innerDate.value.year())\n .month(innerDate.value.month())\n .date(innerDate.value.date())\n userInputTime.value = null\n timePickerVisible.value = false\n emit(innerDate.value, true)\n }\n }\n\n const handleVisibleDateChange = (value) => {\n const newDate = dayjs(value, dateFormat.value).locale(lang.value)\n if (newDate.isValid()) {\n if (disabledDate && disabledDate(newDate.toDate())) {\n return\n }\n innerDate.value = newDate\n .hour(innerDate.value.hour())\n .minute(innerDate.value.minute())\n .second(innerDate.value.second())\n userInputDate.value = null\n emit(innerDate.value, true)\n }\n }\n\n const isValidValue = (date: unknown) => {\n return (\n dayjs.isDayjs(date) &&\n date.isValid() &&\n (disabledDate ? !disabledDate(date.toDate()) : true)\n )\n }\n\n const formatToString = (value) => {\n if (selectionMode.value === 'dates') {\n return value.map((_) => _.format(props.format))\n }\n return value.format(props.format)\n }\n\n const parseUserInput = (value) => {\n return dayjs(value, props.format).locale(lang.value)\n }\n\n const getDefaultValue = () => {\n const parseDate = dayjs(defaultValue).locale(lang.value)\n if (!defaultValue) {\n const defaultTimeDValue = defaultTimeD.value\n return dayjs()\n .hour(defaultTimeDValue.hour())\n .minute(defaultTimeDValue.minute())\n .second(defaultTimeDValue.second())\n .locale(lang.value)\n }\n return parseDate\n }\n\n const handleKeydown = (event) => {\n const { code, keyCode } = event\n const list = [\n EVENT_CODE.up,\n EVENT_CODE.down,\n EVENT_CODE.left,\n EVENT_CODE.right,\n ]\n if (props.visible && !timePickerVisible.value) {\n if (list.includes(code)) {\n handleKeyControl(keyCode)\n event.stopPropagation()\n event.preventDefault()\n }\n if (\n code === EVENT_CODE.enter &&\n userInputDate.value === null &&\n userInputTime.value === null\n ) {\n // Enter\n emit(innerDate, false)\n }\n }\n }\n\n const handleKeyControl = (keyCode) => {\n const mapping = {\n year: {\n 38: -4,\n 40: 4,\n 37: -1,\n 39: 1,\n offset: (date, step) => date.setFullYear(date.getFullYear() + step),\n },\n month: {\n 38: -4,\n 40: 4,\n 37: -1,\n 39: 1,\n offset: (date, step) => date.setMonth(date.getMonth() + step),\n },\n week: {\n 38: -1,\n 40: 1,\n 37: -1,\n 39: 1,\n offset: (date, step) => date.setDate(date.getDate() + step * 7),\n },\n day: {\n 38: -7,\n 40: 7,\n 37: -1,\n 39: 1,\n offset: (date, step) => date.setDate(date.getDate() + step),\n },\n }\n\n const newDate = innerDate.value.toDate()\n while (Math.abs(innerDate.value.diff(newDate, 'year', true)) < 1) {\n const map = mapping[selectionMode.value]\n map.offset(newDate, map[keyCode])\n if (disabledDate && disabledDate(newDate)) {\n continue\n }\n const result = dayjs(newDate).locale(lang.value)\n innerDate.value = result\n ctx.emit('pick', result, true)\n break\n }\n }\n\n const handlePanelChange = (mode: 'month' \| 'year') => {\n ctx.emit(\n 'panel-change',\n innerDate.value.toDate(),\n mode,\n currentView.value\n )\n }\n\n ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n ctx.emit('set-picker-option', ['formatToString', formatToString])\n ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n ctx.emit('set-picker-option', ['handleKeydown', handleKeydown])\n\n watch(\n () => props.parsedValue,\n (val) => {\n if (val) {\n if (selectionMode.value === 'dates') return\n if (Array.isArray(val)) return\n innerDate.value = val\n } else {\n innerDate.value = getDefaultValue()\n }\n },\n { immediate: true }\n )\n\n return {\n handleTimePick,\n handleTimePickClose,\n onTimePickerInputFocus,\n timePickerVisible,\n visibleTime,\n visibleDate,\n showTime,\n changeToNow,\n onConfirm,\n footerVisible,\n handleYearPick,\n showMonthPicker,\n showYearPicker,\n handleMonthPick,\n hasShortcuts,\n shortcuts,\n arrowControl,\n disabledDate,\n cellClassName,\n selectionMode,\n handleShortcutClick,\n prevYear_,\n nextYear_,\n prevMonth_,\n nextMonth_,\n innerDate,\n t,\n yearLabel,\n currentView,\n month,\n handleDatePick,\n handleVisibleTimeChange,\n handleVisibleDateChange,\n timeFormat,\n userInputTime,\n userInputDate,\n }\n },\n})\n</script>\n"],"names":["DateTable","ElInput","ElIcon","TimePickPanel","MonthTable","DArrowLeft","ArrowLeft","DArrowRight","ArrowRight","isValidDatePickType","dayjs","computed","ref","watch","extractTimeFormat","extractDateFormat","EVENT_CODE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2LA,wBAAwB,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;;AAE7C,EAAE,UAAU,EAAE;AACd,eAAIA;AACJ,aAAIC;;AAEJ,YAAIC;AACJ,mBAAIC,iDAAa;AACjB,gBAAIC,mDAAU;;AAEd,gBAAIC;eACAC;iBACAC;gBACAC;;;OAGG,EAAE;IACL,OAAO,EAAE;MACP,IAAI,EAAE;MACN,OAAO;KACR;IACD,WAAW;MACT,IAAI,EAAE,CAAC;;;MAGP,IAAI,EAAE,MAAM;MACZ;KACD;QACG,EAAE;MACJ,IAAI,EAAE,MAAM;;MAEZ,SAAS,EAAEC;;;OAGV,EAAE,CAAC;OACH,CAAC,KAAK,EAAE,GAAG;UACR,EAAE,CAAC,EAAE;IACX;IACA,MAAM;UACA;MACJ;MACA,YAAY;;;MAGZ,YAAY;MACZ,YAAY;KACb,GAAG,UAAU,MAAM,CAAC;IACrB,MAAM,SAAS,UAAM,CAACC,yBAAK,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACjD,MAAM,YAAY,GAAGC,YAAQ,CAAC,MAAM;MAClC;MACA,CAAC;UACG,KAAK,GAAGA;MACZ,OAAO;MACP,CAAC;UACG,IAAI,GAAGA;MACX,OAAO;MACP;;IAEF,MAAM,aAAa,GAAGC,OAAG,CAAC,IAAI,CAAC,CAAC;;IAEhC,MAAM,oBAAoB,GAAG,CAAC,IAAI;MAChC,OAAO,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG;KAC3C;;MAEC,IAAI,WAAW,IAAI,CAAC;QAClB,OAAO,YAAY,CAAC,KAAK,CAAC;;;QAG1B,OAAO,SAAS,CAAC;MACnB,OAAO,SAAS,CAAC,OAAO,CAAC;KAC1B;;MAEC,IAAI,CAAC,KAAK,EAAE;QACV,GAAG,CAAC,IAAI,CAAC,aAAa,EAAE;OACzB,MAAM,IAAI,KAAK,QAAQ,CAAC;QACvB,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC;QACxB,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,KAAK,CAAC;OAClC,MAAM;QACL,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE;;mBAEN,CAAC,KAAK,GAAG,IAAI,CAAC;mBACd,CAAC,KAAK,GAAG,IAAI,CAAC;;UAEvB;;QAEF,IAAI,OAAO,QAAQ,CAAC,WAAW,GAAG;YAC9B,CAAC,oBAAoB,CAAC,OAAO,CAAC;UAChC,OAAO,GAAG;;iBAEH,CAAC,KAAK,GAAG,OAAO,CAAC;YACtB,CAAC,OAAO,EAAE,QAAQ,CAAC;;YAEnB,CAAC,KAAK,CAAC,IAAI,CAAC;OACjB,MAAM,IAAI,aAAa,CAAC,KAAK;;OAE7B;MACD;UACI,UAAU,GAAG,MAAM;MACvB,UAAU,KAAK,GAAG,SAAS,CAAC,KAAK;uBAChB,CAAC,OAAO,CAAC,CAAC;;UAEvB;eACK,CAAC,KAAK,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;MACzC;MACA;UACI,SAAS,GAAG,MAAM;;QAEpB,SAAS,CAAC,KAAK,YAAY,CAAC,MAAM;OACnC,MAAM;QACL,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC;;uBAEb,CAAC,MAAM,CAAC,CAAC;;mBAEb,GAAG,MAAM;UAClB;QACF,UAAU,KAAK,GAAG,SAAS,MAAM,CAAC,GAAG,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;aAC7C;kBACK,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;;uBAElC,CAAC,MAAM,CAAC,CAAC;;;UAGtB,SAAS,GAAGD,YAAQ,CAAC;YACnB,eAAe,GAAG,CAAC,CAAC;MAC1B,IAAI,WAAW,CAAC,KAAK,KAAK,MAAM;QAC9B,MAAM,SAAS;QACf,mBAAmB,EAAE;UACnB,OAAO,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE,eAAe,CAAC,KAAK;;;OAG/C;MACD,OAAO,CAAC,EAAE,IAAI,MAAM,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC;MAC1C,CAAC;IACH;;MAEE,IAAI,aAAa;QACf,IAAI,CAACD,yBAAK,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC;QAC9C,OAAO;;;QAGP,QAAQ,CAAC,QAAQ,GAAG;OACrB;;UAEG;UACA,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,SAAS,KAAK,CAAC;;OAErD;;;IAGHG,UAAM,MAAM;MACV,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,GAAG;QAChC,WAAW,CAAC,QAAQ,GAAG,CAAC;QACxB;;MAEF;OACC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACxBA;;KAEC,CAAC,CAAC;;IAEH,MAAM,eAAe,GAAG,CAAC,MAAM;MAC7B,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC;MAC1C,IAAI,aAAa,CAAC,KAAK,KAAK;QAC1B,IAAI,UAAU,MAAM,CAAC,CAAC;aACjB;mBACM,CAAC,KAAK,GAAG,MAAM,CAAC;;uBAEZ,CAAC;;UAEd,cAAc,GAAG,MAAM,KAAK;MAChC;QACE,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;;;QAGlC,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,KAAK;QACtC,WAAW,CAAC;;MAEd,iBAAiB;;UAEb;MACJ;MACA;UACI,cAAc,GAAG;MACrB;;;IAGF,MAAM,gBAAgBF,YAAQ,CAAC,MAAM;MACnC,OAAO,QAAQ,CAAC,SAAS,aAAa,CAAC,KAAK,KAAK,OAAO,CAAC;;;MAGzD,IAAI;;;QAGF;YACI,CAAC,MAAM,EAAE;UACX;gBACM,aAAa,GAAG;UACtB,MAAM,GAAG,aAAa;;QAExB;QACA,IAAI,CAAC,MAAM,CAAC,CAAC;OACd;MACD;IACF;;MAEE;MACA,IAAI,EAAE,YAAY,IAAI,CAAC;;QAErB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;;;;MAIvB,OAAOG,2BAAiB,CAAC,MAAM,MAAM,CAAC,CAAC;;IAEzC,MAAM,UAAU,GAAGH,YAAQ,CAAC;MAC1B,OAAOI,2BAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;MACvC,CAAC;UACG,WAAW,GAAGJ;MAClB,IAAI;QACF,OAAO,aAAa,CAAC;MACvB;QACE,OAAO;;;IAGX,MAAM,WAAW,eAAW;MAC1B,IAAI,aAAa,CAAC;QAChB,OAAO,aAAa,CAAC,KAAK,CAAC;UACzB,CAAC,KAAK,CAAC,WAAW;QACpB;aACK,CAAC,KAAK,CAAC,WAAW,IAAI,SAAS,CAAC,KAAK;;;UAGxC;;;IAGN,MAAM,mBAAmB,GAAG;MAC1B,kBAAkB,KAAK,GAAG;;;MAG1B,MAAM,OAAO,GAAG,KAAK,CAAC;MACtB,SAAS,CAAC,KAAK,GAAG,OAAO;;;QAGvB,iBAAiB,CAAC;OACnB;;;MAGD,MAAM,OAAO,GAAGD,yBAAK,CAAC,KAAK,EAAE;MAC7B,IAAI,OAAO,CAAC,OAAO,MAAM,oBAAoB,CAAC,OAAO,CAAC;;;QAGpD,iBAAiB,CAAC;YACd,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;;MAE9B;oCAC8B,CAAC,KAAK,KAAK;YACnC,OAAO,GAAGA,yBAAK,CAAC,KAAK,EAAE,UAAU,CAAC;iBAC7B,CAAC;YACN,YAAY,gBAAgB,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE;UAClD,OAAO;;iBAEA,CAAC,KAAK,GAAG,OAAO,CAAC,IAAI;qBACjB,CAAC,KAAK,GAAG,IAAI,CAAC;YACvB,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;;;UAG1B;MACJ;;;MAGA,IAAI,cAAc;eACT,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;OAC3B;MACD,OAAO,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;MAClC;;aAEOA,yBAAK,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI;;;YAGvC,SAAS,GAAGA,yBAAK,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC;UACzC,CAAC,YAAY,EAAE;;;;MAInB,OAAO,UAAU;MACjB;IACF;;MAEE,MAAM,IAAI,GAAG;QACXM,eAAU,CAAC,EAAE;;;QAGbA,eAAU,CAAC,KAAK;OACjB;MACD,IAAI,KAAK,CAAC,OAAO,IAAI,kBAAkB,MAAM;QAC3C,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;UACvB;;;;QAIF,IAAI,IAAI,oBAAe,CAAC,KAAK;UAC3B,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;SACxB;OACF;;;;;UAKG,EAAE,EAAE,CAAC,CAAC;UACN,EAAE,EAAE,CAAC;UACL,EAAE,EAAE,CAAC,CAAC;;UAEN,MAAM,EAAE,CAAC,IAAI,EAAE,aAAa;SAC7B;;;UAGC,EAAE,EAAE,CAAC;UACL,EAAE,EAAE,CAAC,CAAC;UACN,EAAE,EAAE,CAAC;gBACC,EAAE,CAAC,IAAI,EAAE,IAAI;;YAEjB,EAAE;UACJ,EAAE,EAAE;UACJ,EAAE,EAAE,CAAC;UACL,EAAE,EAAE,CAAC,CAAC;UACN,EAAE,EAAE,CAAC;UACL,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;;;;UAI7B,EAAE,EAAE,CAAC;UACL,EAAE,EAAE,CAAC,CAAC;UACN,EAAE,EAAE,CAAC;UACL,MAAM,EAAE,CAAC,UAAU;;;YAGjB,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC;aACzB,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC;QACxB,MAAM,GAAG,GAAG,OAAO,CAAC;QACpB,GAAG,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,CAAC;;;;QAIxB,MAAM,MAAM,GAAGN,yBAAK,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;QACrC,SAAS,CAAC,KAAK,GAAG,MAAM,CAAC;WACtB,CAAC,IAAI,CAAC,MAAM,EAAE;QACjB,MAAM;;;UAGJ,iBAAiB,GAAG,CAAC;UACrB,IAAI,CAAC,cAAc,EAAE;;YAEnB,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,mBAAmB;QACxB,IAAI,CAAC,mBAAmB,EAAE;;IAE9BG;;QAEI,IAAI,aAAa,CAAC,UAAU;UAC1B;QACF,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG;UACnB,OAAO;QACT,SAAS,CAAC,QAAQ,GAAG,CAAC;;;;KAIzB,EAAE,WAAW,EAAE,OAAO,CAAC;WACjB;oBACS;MACd;MACA,sBAAsB;;;MAGtB,WAAW;MACX,QAAQ;;;MAGR,aAAa;MACb,cAAc;MACd,eAAe;oBACD;qBACC;kBACH;eACH;kBACG;kBACA;MACZ;MACA,aAAa;;;MAGb,SAAS;MACT,UAAU;MACV;eACS;;eAEA;iBACE;MACX;MACA,cAAc;6BACS;6BACA;gBACb;mBACG;;;;;;;;"}
1	+ {"version":3,"file":"panel-date-pick.vue_vue_type_script_lang.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-date-pick.vue"],"sourcesContent":["<template>\n <div\n class=\"el-picker-panel el-date-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-picker__time-header\">\n <span class=\"el-date-picker__editor-wrap\">\n <el-input\n :placeholder=\"t('el.datepicker.selectDate')\"\n :model-value=\"visibleDate\"\n size=\"small\"\n @input=\"(val) => (userInputDate = val)\"\n @change=\"handleVisibleDateChange\"\n />\n </span>\n <span\n v-clickoutside=\"handleTimePickClose\"\n class=\"el-date-picker__editor-wrap\"\n >\n <el-input\n :placeholder=\"t('el.datepicker.selectTime')\"\n :model-value=\"visibleTime\"\n size=\"small\"\n @focus=\"onTimePickerInputFocus\"\n @input=\"(val) => (userInputTime = val)\"\n @change=\"handleVisibleTimeChange\"\n />\n <time-pick-panel\n :visible=\"timePickerVisible\"\n :format=\"timeFormat\"\n :time-arrow-control=\"arrowControl\"\n :parsed-value=\"innerDate\"\n @pick=\"handleTimePick\"\n />\n </span>\n </div>\n <div\n v-show=\"currentView !== 'time'\"\n class=\"el-date-picker__header\"\n :class=\"{\n 'el-date-picker__header--bordered':\n currentView === 'year' \|\| currentView === 'month',\n }\"\n >\n <button\n type=\"button\"\n :aria-label=\"t(`el.datepicker.prevYear`)\"\n class=\"el-picker-panel__icon-btn el-date-picker__prev-btn d-arrow-left\"\n @click=\"prevYear_\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n v-show=\"currentView === 'date'\"\n type=\"button\"\n :aria-label=\"t(`el.datepicker.prevMonth`)\"\n class=\"el-picker-panel__icon-btn el-date-picker__prev-btn arrow-left\"\n @click=\"prevMonth_\"\n >\n <el-icon><arrow-left /></el-icon>\n </button>\n <span\n role=\"button\"\n class=\"el-date-picker__header-label\"\n @click=\"showYearPicker\"\n >{{ yearLabel }}</span\n >\n <span\n v-show=\"currentView === 'date'\"\n role=\"button\"\n class=\"el-date-picker__header-label\"\n :class=\"{ active: currentView === 'month' }\"\n @click=\"showMonthPicker\"\n >{{ t(`el.datepicker.month${month + 1}`) }}</span\n >\n <button\n type=\"button\"\n :aria-label=\"t(`el.datepicker.nextYear`)\"\n class=\"el-picker-panel__icon-btn el-date-picker__next-btn d-arrow-right\"\n @click=\"nextYear_\"\n >\n <el-icon><d-arrow-right /></el-icon>\n </button>\n <button\n v-show=\"currentView === 'date'\"\n type=\"button\"\n :aria-label=\"t(`el.datepicker.nextMonth`)\"\n class=\"el-picker-panel__icon-btn el-date-picker__next-btn arrow-right\"\n @click=\"nextMonth_\"\n >\n <el-icon><arrow-right /></el-icon>\n </button>\n </div>\n <div class=\"el-picker-panel__content\">\n <date-table\n v-if=\"currentView === 'date'\"\n :selection-mode=\"selectionMode\"\n :date=\"innerDate\"\n :parsed-value=\"parsedValue\"\n :disabled-date=\"disabledDate\"\n @pick=\"handleDatePick\"\n />\n <year-table\n v-if=\"currentView === 'year'\"\n :date=\"innerDate\"\n :disabled-date=\"disabledDate\"\n :parsed-value=\"parsedValue\"\n @pick=\"handleYearPick\"\n />\n <month-table\n v-if=\"currentView === 'month'\"\n :date=\"innerDate\"\n :parsed-value=\"parsedValue\"\n :disabled-date=\"disabledDate\"\n @pick=\"handleMonthPick\"\n />\n </div>\n </div>\n </div>\n <div\n v-show=\"footerVisible && currentView === 'date'\"\n class=\"el-picker-panel__footer\"\n >\n <el-button\n v-show=\"selectionMode !== 'dates'\"\n size=\"small\"\n type=\"text\"\n class=\"el-picker-panel__link-btn\"\n @click=\"changeToNow\"\n >\n {{ t('el.datepicker.now') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n class=\"el-picker-panel__link-btn\"\n @click=\"onConfirm\"\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 { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidDatePickType } from '@element-plus/utils/validators'\nimport {\n DArrowLeft,\n ArrowLeft,\n DArrowRight,\n ArrowRight,\n} from '@element-plus/icons-vue'\nimport { TOOLTIP_INJECTION_KEY } from '@element-plus/components/tooltip'\nimport DateTable from './basic-date-table.vue'\nimport MonthTable from './basic-month-table.vue'\nimport YearTable from './basic-year-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { ConfigType, Dayjs } from 'dayjs'\nimport type { IDatePickerType } from '../date-picker.type'\n\n// todo\n/* eslint-disable-next-line /\nconst timeWithinRange = (_: ConfigType, __: any, ___: string) => true\n\nexport default defineComponent({\n components: {\n DateTable,\n ElInput,\n ElButton,\n ElIcon,\n TimePickPanel,\n MonthTable,\n YearTable,\n DArrowLeft,\n ArrowLeft,\n DArrowRight,\n ArrowRight,\n },\n\n directives: { clickoutside: ClickOutside },\n props: {\n visible: {\n type: Boolean,\n default: false,\n },\n parsedValue: {\n type: [Object, Array] as PropType<Dayjs \| Dayjs[]>,\n },\n format: {\n type: String,\n default: '',\n },\n type: {\n type: String as PropType<IDatePickerType>,\n required: true,\n validator: isValidDatePickType,\n },\n },\n emits: ['pick', 'set-picker-option', 'panel-change'],\n setup(props, ctx) {\n const { t, lang } = useLocale()\n const pickerBase = inject('EP_PICKER_BASE') as any\n const popper = inject(TOOLTIP_INJECTION_KEY)\n const {\n shortcuts,\n disabledDate,\n cellClassName,\n defaultTime,\n arrowControl,\n } = pickerBase.props\n const defaultValue = toRef(pickerBase.props, 'defaultValue')\n\n const innerDate = ref(dayjs().locale(lang.value))\n\n const defaultTimeD = computed(() => {\n return dayjs(defaultTime).locale(lang.value)\n })\n\n const month = computed(() => {\n return innerDate.value.month()\n })\n\n const year = computed(() => {\n return innerDate.value.year()\n })\n\n const selectableRange = ref([])\n const userInputDate = ref(null)\n const userInputTime = ref(null)\n // todo update to disableHour\n const checkDateWithinRange = (date: ConfigType) => {\n return selectableRange.value.length > 0\n ? timeWithinRange(\n date,\n selectableRange.value,\n props.format \|\| 'HH:mm:ss'\n )\n : true\n }\n const formatEmit = (emitDayjs: Dayjs) => {\n if (defaultTime && !visibleTime.value) {\n return defaultTimeD.value\n .year(emitDayjs.year())\n .month(emitDayjs.month())\n .date(emitDayjs.date())\n }\n if (showTime.value) return emitDayjs.millisecond(0)\n return emitDayjs.startOf('day')\n }\n const emit = (value, ...args) => {\n if (!value) {\n ctx.emit('pick', value, ...args)\n } else if (Array.isArray(value)) {\n const dates = value.map(formatEmit)\n ctx.emit('pick', dates, ...args)\n } else {\n ctx.emit('pick', formatEmit(value), ...args)\n }\n userInputDate.value = null\n userInputTime.value = null\n }\n const handleDatePick = (value: Dayjs) => {\n if (selectionMode.value === 'day') {\n let newDate = props.parsedValue\n ? (props.parsedValue as Dayjs)\n .year(value.year())\n .month(value.month())\n .date(value.date())\n : value\n // change default time while out of selectableRange\n if (!checkDateWithinRange(newDate)) {\n newDate = (selectableRange.value[0][0] as Dayjs)\n .year(value.year())\n .month(value.month())\n .date(value.date())\n }\n innerDate.value = newDate\n emit(newDate, showTime.value)\n } else if (selectionMode.value === 'week') {\n emit(value.date)\n } else if (selectionMode.value === 'dates') {\n emit(value, true) // set false to keep panel open\n }\n }\n const prevMonth_ = () => {\n innerDate.value = innerDate.value.subtract(1, 'month')\n handlePanelChange('month')\n }\n\n const nextMonth_ = () => {\n innerDate.value = innerDate.value.add(1, 'month')\n handlePanelChange('month')\n }\n\n const prevYear_ = () => {\n if (currentView.value === 'year') {\n innerDate.value = innerDate.value.subtract(10, 'year')\n } else {\n innerDate.value = innerDate.value.subtract(1, 'year')\n }\n handlePanelChange('year')\n }\n\n const nextYear_ = () => {\n if (currentView.value === 'year') {\n innerDate.value = innerDate.value.add(10, 'year')\n } else {\n innerDate.value = innerDate.value.add(1, 'year')\n }\n handlePanelChange('year')\n }\n\n const currentView = ref('date')\n\n const yearLabel = computed(() => {\n const yearTranslation = t('el.datepicker.year')\n if (currentView.value === 'year') {\n const startYear = Math.floor(year.value / 10) 10\n if (yearTranslation) {\n return `${startYear} ${yearTranslation} - ${\n startYear + 9\n } ${yearTranslation}`\n }\n return `${startYear} - ${startYear + 9}`\n }\n return `${year.value} ${yearTranslation}`\n })\n\n const handleShortcutClick = (shortcut) => {\n const shortcutValue =\n typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n if (shortcutValue) {\n emit(dayjs(shortcutValue).locale(lang.value))\n return\n }\n if (shortcut.onClick) {\n shortcut.onClick(ctx)\n }\n }\n\n const selectionMode = computed(() => {\n if (['week', 'month', 'year', 'dates'].includes(props.type)) {\n return props.type\n }\n return 'day'\n })\n\n watch(\n () => selectionMode.value,\n (val) => {\n if (['month', 'year'].includes(val)) {\n currentView.value = val\n return\n }\n currentView.value = 'date'\n },\n { immediate: true }\n )\n\n watch(\n () => currentView.value,\n () => {\n popper?.updatePopper()\n }\n )\n\n const hasShortcuts = computed(() => !!shortcuts.length)\n\n const handleMonthPick = (month) => {\n innerDate.value = innerDate.value.startOf('month').month(month)\n if (selectionMode.value === 'month') {\n emit(innerDate.value)\n } else {\n currentView.value = 'date'\n }\n handlePanelChange('month')\n }\n\n const handleYearPick = (year) => {\n if (selectionMode.value === 'year') {\n innerDate.value = innerDate.value.startOf('year').year(year)\n emit(innerDate.value)\n } else {\n innerDate.value = innerDate.value.year(year)\n currentView.value = 'month'\n }\n handlePanelChange('year')\n }\n\n const showMonthPicker = () => {\n currentView.value = 'month'\n }\n\n const showYearPicker = () => {\n currentView.value = 'year'\n }\n\n const showTime = computed(\n () => props.type === 'datetime' \|\| props.type === 'datetimerange'\n )\n\n const footerVisible = computed(() => {\n return showTime.value \|\| selectionMode.value === 'dates'\n })\n\n const onConfirm = () => {\n if (selectionMode.value === 'dates') {\n emit(props.parsedValue)\n } else {\n // deal with the scenario where: user opens the date time picker, then confirm without doing anything\n let result = props.parsedValue as Dayjs\n if (!result) {\n const defaultTimeD = dayjs(defaultTime).locale(lang.value)\n const defaultValueD = getDefaultValue()\n result = defaultTimeD\n .year(defaultValueD.year())\n .month(defaultValueD.month())\n .date(defaultValueD.date())\n }\n innerDate.value = result\n emit(result)\n }\n }\n\n const changeToNow = () => {\n // NOTE: not a permanent solution\n // consider disable \"now\" button in the future\n const now = dayjs().locale(lang.value)\n const nowDate = now.toDate()\n if (\n (!disabledDate \|\| !disabledDate(nowDate)) &&\n checkDateWithinRange(nowDate)\n ) {\n innerDate.value = dayjs().locale(lang.value)\n emit(innerDate.value)\n }\n }\n\n const timeFormat = computed(() => {\n return extractTimeFormat(props.format)\n })\n\n const dateFormat = computed(() => {\n return extractDateFormat(props.format)\n })\n\n const visibleTime = computed(() => {\n if (userInputTime.value) return userInputTime.value\n if (!props.parsedValue && !defaultValue.value) return\n return ((props.parsedValue \|\| innerDate.value) as Dayjs).format(\n timeFormat.value\n )\n })\n\n const visibleDate = computed(() => {\n if (userInputDate.value) return userInputDate.value\n if (!props.parsedValue && !defaultValue.value) return\n return ((props.parsedValue \|\| innerDate.value) as Dayjs).format(\n dateFormat.value\n )\n })\n\n const timePickerVisible = ref(false)\n const onTimePickerInputFocus = () => {\n timePickerVisible.value = true\n }\n const handleTimePickClose = () => {\n timePickerVisible.value = false\n }\n\n const handleTimePick = (value, visible, first) => {\n const newDate = props.parsedValue\n ? (props.parsedValue as Dayjs)\n .hour(value.hour())\n .minute(value.minute())\n .second(value.second())\n : value\n innerDate.value = newDate\n emit(innerDate.value, true)\n if (!first) {\n timePickerVisible.value = visible\n }\n }\n\n const handleVisibleTimeChange = (value) => {\n const newDate = dayjs(value, timeFormat.value).locale(lang.value)\n if (newDate.isValid() && checkDateWithinRange(newDate)) {\n innerDate.value = newDate\n .year(innerDate.value.year())\n .month(innerDate.value.month())\n .date(innerDate.value.date())\n userInputTime.value = null\n timePickerVisible.value = false\n emit(innerDate.value, true)\n }\n }\n\n const handleVisibleDateChange = (value) => {\n const newDate = dayjs(value, dateFormat.value).locale(lang.value)\n if (newDate.isValid()) {\n if (disabledDate && disabledDate(newDate.toDate())) {\n return\n }\n innerDate.value = newDate\n .hour(innerDate.value.hour())\n .minute(innerDate.value.minute())\n .second(innerDate.value.second())\n userInputDate.value = null\n emit(innerDate.value, true)\n }\n }\n\n const isValidValue = (date: unknown) => {\n return (\n dayjs.isDayjs(date) &&\n date.isValid() &&\n (disabledDate ? !disabledDate(date.toDate()) : true)\n )\n }\n\n const formatToString = (value) => {\n if (selectionMode.value === 'dates') {\n return value.map((_) => _.format(props.format))\n }\n return value.format(props.format)\n }\n\n const parseUserInput = (value) => {\n return dayjs(value, props.format).locale(lang.value)\n }\n\n const getDefaultValue = () => {\n const parseDate = dayjs(defaultValue.value).locale(lang.value)\n if (!defaultValue.value) {\n const defaultTimeDValue = defaultTimeD.value\n return dayjs()\n .hour(defaultTimeDValue.hour())\n .minute(defaultTimeDValue.minute())\n .second(defaultTimeDValue.second())\n .locale(lang.value)\n }\n return parseDate\n }\n\n const handleKeydown = (event) => {\n const { code, keyCode } = event\n const list = [\n EVENT_CODE.up,\n EVENT_CODE.down,\n EVENT_CODE.left,\n EVENT_CODE.right,\n ]\n if (props.visible && !timePickerVisible.value) {\n if (list.includes(code)) {\n handleKeyControl(keyCode)\n event.stopPropagation()\n event.preventDefault()\n }\n if (\n code === EVENT_CODE.enter &&\n userInputDate.value === null &&\n userInputTime.value === null\n ) {\n // Enter\n emit(innerDate, false)\n }\n }\n }\n\n const handleKeyControl = (keyCode) => {\n const mapping = {\n year: {\n 38: -4,\n 40: 4,\n 37: -1,\n 39: 1,\n offset: (date, step) => date.setFullYear(date.getFullYear() + step),\n },\n month: {\n 38: -4,\n 40: 4,\n 37: -1,\n 39: 1,\n offset: (date, step) => date.setMonth(date.getMonth() + step),\n },\n week: {\n 38: -1,\n 40: 1,\n 37: -1,\n 39: 1,\n offset: (date, step) => date.setDate(date.getDate() + step * 7),\n },\n day: {\n 38: -7,\n 40: 7,\n 37: -1,\n 39: 1,\n offset: (date, step) => date.setDate(date.getDate() + step),\n },\n }\n\n const newDate = innerDate.value.toDate()\n while (Math.abs(innerDate.value.diff(newDate, 'year', true)) < 1) {\n const map = mapping[selectionMode.value]\n map.offset(newDate, map[keyCode])\n if (disabledDate && disabledDate(newDate)) {\n continue\n }\n const result = dayjs(newDate).locale(lang.value)\n innerDate.value = result\n ctx.emit('pick', result, true)\n break\n }\n }\n\n const handlePanelChange = (mode: 'month' \| 'year') => {\n ctx.emit(\n 'panel-change',\n innerDate.value.toDate(),\n mode,\n currentView.value\n )\n }\n\n ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n ctx.emit('set-picker-option', ['formatToString', formatToString])\n ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n ctx.emit('set-picker-option', ['handleKeydown', handleKeydown])\n\n watch(\n () => defaultValue.value,\n (val) => {\n if (val) {\n innerDate.value = getDefaultValue()\n }\n },\n { immediate: true }\n )\n\n watch(\n () => props.parsedValue,\n (val) => {\n if (val) {\n if (selectionMode.value === 'dates') return\n if (Array.isArray(val)) return\n innerDate.value = val\n } else {\n innerDate.value = getDefaultValue()\n }\n },\n { immediate: true }\n )\n\n return {\n handleTimePick,\n handleTimePickClose,\n onTimePickerInputFocus,\n timePickerVisible,\n visibleTime,\n visibleDate,\n showTime,\n changeToNow,\n onConfirm,\n footerVisible,\n handleYearPick,\n showMonthPicker,\n showYearPicker,\n handleMonthPick,\n hasShortcuts,\n shortcuts,\n arrowControl,\n disabledDate,\n cellClassName,\n selectionMode,\n handleShortcutClick,\n prevYear_,\n nextYear_,\n prevMonth_,\n nextMonth_,\n innerDate,\n t,\n yearLabel,\n currentView,\n month,\n handleDatePick,\n handleVisibleTimeChange,\n handleVisibleDateChange,\n timeFormat,\n userInputTime,\n userInputDate,\n }\n },\n})\n</script>\n"],"names":["DateTable","ElInput","ElIcon","TimePickPanel","MonthTable","DArrowLeft","ArrowLeft","DArrowRight","ArrowRight","isValidDatePickType","toRef","dayjs","computed","ref","watch","extractTimeFormat","extractDateFormat","EVENT_CODE"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"panel-date-pick.vue_vue_type_template_id_78e07aa7_lang.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-date-pick.vue?vue&type=template&id=78e07aa7&lang.js"],"sourcesContent":["<template>\n <div\n class=\"el-picker-panel el-date-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-picker__time-header\">\n <span class=\"el-date-picker__editor-wrap\">\n <el-input\n :placeholder=\"t('el.datepicker.selectDate')\"\n :model-value=\"visibleDate\"\n size=\"small\"\n @input=\"(val) => (userInputDate = val)\"\n @change=\"handleVisibleDateChange\"\n />\n </span>\n <span\n v-clickoutside=\"handleTimePickClose\"\n class=\"el-date-picker__editor-wrap\"\n >\n <el-input\n :placeholder=\"t('el.datepicker.selectTime')\"\n :model-value=\"visibleTime\"\n size=\"small\"\n @focus=\"onTimePickerInputFocus\"\n @input=\"(val) => (userInputTime = val)\"\n @change=\"handleVisibleTimeChange\"\n />\n <time-pick-panel\n :visible=\"timePickerVisible\"\n :format=\"timeFormat\"\n :time-arrow-control=\"arrowControl\"\n :parsed-value=\"innerDate\"\n @pick=\"handleTimePick\"\n />\n </span>\n </div>\n <div\n v-show=\"currentView !== 'time'\"\n class=\"el-date-picker__header\"\n :class=\"{\n 'el-date-picker__header--bordered':\n currentView === 'year' \|\| currentView === 'month',\n }\"\n >\n <button\n type=\"button\"\n :aria-label=\"t(`el.datepicker.prevYear`)\"\n class=\"el-picker-panel__icon-btn el-date-picker__prev-btn d-arrow-left\"\n @click=\"prevYear_\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n v-show=\"currentView === 'date'\"\n type=\"button\"\n :aria-label=\"t(`el.datepicker.prevMonth`)\"\n class=\"el-picker-panel__icon-btn el-date-picker__prev-btn arrow-left\"\n @click=\"prevMonth_\"\n >\n <el-icon><arrow-left /></el-icon>\n </button>\n <span\n role=\"button\"\n class=\"el-date-picker__header-label\"\n @click=\"showYearPicker\"\n >{{ yearLabel }}</span\n >\n <span\n v-show=\"currentView === 'date'\"\n role=\"button\"\n class=\"el-date-picker__header-label\"\n :class=\"{ active: currentView === 'month' }\"\n @click=\"showMonthPicker\"\n >{{ t(`el.datepicker.month${month + 1}`) }}</span\n >\n <button\n type=\"button\"\n :aria-label=\"t(`el.datepicker.nextYear`)\"\n class=\"el-picker-panel__icon-btn el-date-picker__next-btn d-arrow-right\"\n @click=\"nextYear_\"\n >\n <el-icon><d-arrow-right /></el-icon>\n </button>\n <button\n v-show=\"currentView === 'date'\"\n type=\"button\"\n :aria-label=\"t(`el.datepicker.nextMonth`)\"\n class=\"el-picker-panel__icon-btn el-date-picker__next-btn arrow-right\"\n @click=\"nextMonth_\"\n >\n <el-icon><arrow-right /></el-icon>\n </button>\n </div>\n <div class=\"el-picker-panel__content\">\n <date-table\n v-if=\"currentView === 'date'\"\n :selection-mode=\"selectionMode\"\n :date=\"innerDate\"\n :parsed-value=\"parsedValue\"\n :disabled-date=\"disabledDate\"\n @pick=\"handleDatePick\"\n />\n <year-table\n v-if=\"currentView === 'year'\"\n :date=\"innerDate\"\n :disabled-date=\"disabledDate\"\n :parsed-value=\"parsedValue\"\n @pick=\"handleYearPick\"\n />\n <month-table\n v-if=\"currentView === 'month'\"\n :date=\"innerDate\"\n :parsed-value=\"parsedValue\"\n :disabled-date=\"disabledDate\"\n @pick=\"handleMonthPick\"\n />\n </div>\n </div>\n </div>\n <div\n v-show=\"footerVisible && currentView === 'date'\"\n class=\"el-picker-panel__footer\"\n >\n <el-button\n v-show=\"selectionMode !== 'dates'\"\n size=\"small\"\n type=\"text\"\n class=\"el-picker-panel__link-btn\"\n @click=\"changeToNow\"\n >\n {{ t('el.datepicker.now') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n class=\"el-picker-panel__link-btn\"\n @click=\"onConfirm\"\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 { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidDatePickType } from '@element-plus/utils/validators'\nimport {\n DArrowLeft,\n ArrowLeft,\n DArrowRight,\n ArrowRight,\n} from '@element-plus/icons-vue'\nimport { TOOLTIP_INJECTION_KEY } from '@element-plus/components/tooltip'\nimport DateTable from './basic-date-table.vue'\nimport MonthTable from './basic-month-table.vue'\nimport YearTable from './basic-year-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { ConfigType, Dayjs } from 'dayjs'\nimport type { IDatePickerType } from '../date-picker.type'\n\n// todo\n/* eslint-disable-next-line /\nconst timeWithinRange = (_: ConfigType, __: any, ___: string) => true\n\nexport default defineComponent({\n components: {\n DateTable,\n ElInput,\n ElButton,\n ElIcon,\n TimePickPanel,\n MonthTable,\n YearTable,\n DArrowLeft,\n ArrowLeft,\n DArrowRight,\n ArrowRight,\n },\n\n directives: { clickoutside: ClickOutside },\n props: {\n visible: {\n type: Boolean,\n default: false,\n },\n parsedValue: {\n type: [Object, Array] as PropType<Dayjs \| Dayjs[]>,\n },\n format: {\n type: String,\n default: '',\n },\n type: {\n type: String as PropType<IDatePickerType>,\n required: true,\n validator: isValidDatePickType,\n },\n },\n emits: ['pick', 'set-picker-option', 'panel-change'],\n setup(props, ctx) {\n const { t, lang } = useLocale()\n const pickerBase = inject('EP_PICKER_BASE') as any\n const popper = inject(TOOLTIP_INJECTION_KEY)\n const {\n shortcuts,\n disabledDate,\n cellClassName,\n defaultTime,\n defaultValue,\n arrowControl,\n } = pickerBase.props\n\n const innerDate = ref(dayjs().locale(lang.value))\n\n const defaultTimeD = computed(() => {\n return dayjs(defaultTime).locale(lang.value)\n })\n\n const month = computed(() => {\n return innerDate.value.month()\n })\n\n const year = computed(() => {\n return innerDate.value.year()\n })\n\n const selectableRange = ref([])\n const userInputDate = ref(null)\n const userInputTime = ref(null)\n // todo update to disableHour\n const checkDateWithinRange = (date: ConfigType) => {\n return selectableRange.value.length > 0\n ? timeWithinRange(\n date,\n selectableRange.value,\n props.format \|\| 'HH:mm:ss'\n )\n : true\n }\n const formatEmit = (emitDayjs: Dayjs) => {\n if (defaultTime && !visibleTime.value) {\n return defaultTimeD.value\n .year(emitDayjs.year())\n .month(emitDayjs.month())\n .date(emitDayjs.date())\n }\n if (showTime.value) return emitDayjs.millisecond(0)\n return emitDayjs.startOf('day')\n }\n const emit = (value, ...args) => {\n if (!value) {\n ctx.emit('pick', value, ...args)\n } else if (Array.isArray(value)) {\n const dates = value.map(formatEmit)\n ctx.emit('pick', dates, ...args)\n } else {\n ctx.emit('pick', formatEmit(value), ...args)\n }\n userInputDate.value = null\n userInputTime.value = null\n }\n const handleDatePick = (value: Dayjs) => {\n if (selectionMode.value === 'day') {\n let newDate = props.parsedValue\n ? (props.parsedValue as Dayjs)\n .year(value.year())\n .month(value.month())\n .date(value.date())\n : value\n // change default time while out of selectableRange\n if (!checkDateWithinRange(newDate)) {\n newDate = (selectableRange.value[0][0] as Dayjs)\n .year(value.year())\n .month(value.month())\n .date(value.date())\n }\n innerDate.value = newDate\n emit(newDate, showTime.value)\n } else if (selectionMode.value === 'week') {\n emit(value.date)\n } else if (selectionMode.value === 'dates') {\n emit(value, true) // set false to keep panel open\n }\n }\n const prevMonth_ = () => {\n innerDate.value = innerDate.value.subtract(1, 'month')\n handlePanelChange('month')\n }\n\n const nextMonth_ = () => {\n innerDate.value = innerDate.value.add(1, 'month')\n handlePanelChange('month')\n }\n\n const prevYear_ = () => {\n if (currentView.value === 'year') {\n innerDate.value = innerDate.value.subtract(10, 'year')\n } else {\n innerDate.value = innerDate.value.subtract(1, 'year')\n }\n handlePanelChange('year')\n }\n\n const nextYear_ = () => {\n if (currentView.value === 'year') {\n innerDate.value = innerDate.value.add(10, 'year')\n } else {\n innerDate.value = innerDate.value.add(1, 'year')\n }\n handlePanelChange('year')\n }\n\n const currentView = ref('date')\n\n const yearLabel = computed(() => {\n const yearTranslation = t('el.datepicker.year')\n if (currentView.value === 'year') {\n const startYear = Math.floor(year.value / 10) 10\n if (yearTranslation) {\n return `${startYear} ${yearTranslation} - ${\n startYear + 9\n } ${yearTranslation}`\n }\n return `${startYear} - ${startYear + 9}`\n }\n return `${year.value} ${yearTranslation}`\n })\n\n const handleShortcutClick = (shortcut) => {\n const shortcutValue =\n typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n if (shortcutValue) {\n emit(dayjs(shortcutValue).locale(lang.value))\n return\n }\n if (shortcut.onClick) {\n shortcut.onClick(ctx)\n }\n }\n\n const selectionMode = computed(() => {\n if (['week', 'month', 'year', 'dates'].includes(props.type)) {\n return props.type\n }\n return 'day'\n })\n\n watch(\n () => selectionMode.value,\n (val) => {\n if (['month', 'year'].includes(val)) {\n currentView.value = val\n return\n }\n currentView.value = 'date'\n },\n { immediate: true }\n )\n\n watch(\n () => currentView.value,\n () => {\n popper?.updatePopper()\n }\n )\n\n const hasShortcuts = computed(() => !!shortcuts.length)\n\n const handleMonthPick = (month) => {\n innerDate.value = innerDate.value.startOf('month').month(month)\n if (selectionMode.value === 'month') {\n emit(innerDate.value)\n } else {\n currentView.value = 'date'\n }\n handlePanelChange('month')\n }\n\n const handleYearPick = (year) => {\n if (selectionMode.value === 'year') {\n innerDate.value = innerDate.value.startOf('year').year(year)\n emit(innerDate.value)\n } else {\n innerDate.value = innerDate.value.year(year)\n currentView.value = 'month'\n }\n handlePanelChange('year')\n }\n\n const showMonthPicker = () => {\n currentView.value = 'month'\n }\n\n const showYearPicker = () => {\n currentView.value = 'year'\n }\n\n const showTime = computed(\n () => props.type === 'datetime' \|\| props.type === 'datetimerange'\n )\n\n const footerVisible = computed(() => {\n return showTime.value \|\| selectionMode.value === 'dates'\n })\n\n const onConfirm = () => {\n if (selectionMode.value === 'dates') {\n emit(props.parsedValue)\n } else {\n // deal with the scenario where: user opens the date time picker, then confirm without doing anything\n let result = props.parsedValue as Dayjs\n if (!result) {\n const defaultTimeD = dayjs(defaultTime).locale(lang.value)\n const defaultValueD = getDefaultValue()\n result = defaultTimeD\n .year(defaultValueD.year())\n .month(defaultValueD.month())\n .date(defaultValueD.date())\n }\n innerDate.value = result\n emit(result)\n }\n }\n\n const changeToNow = () => {\n // NOTE: not a permanent solution\n // consider disable \"now\" button in the future\n const now = dayjs().locale(lang.value)\n const nowDate = now.toDate()\n if (\n (!disabledDate \|\| !disabledDate(nowDate)) &&\n checkDateWithinRange(nowDate)\n ) {\n innerDate.value = dayjs().locale(lang.value)\n emit(innerDate.value)\n }\n }\n\n const timeFormat = computed(() => {\n return extractTimeFormat(props.format)\n })\n\n const dateFormat = computed(() => {\n return extractDateFormat(props.format)\n })\n\n const visibleTime = computed(() => {\n if (userInputTime.value) return userInputTime.value\n if (!props.parsedValue && !defaultValue) return\n return ((props.parsedValue \|\| innerDate.value) as Dayjs).format(\n timeFormat.value\n )\n })\n\n const visibleDate = computed(() => {\n if (userInputDate.value) return userInputDate.value\n if (!props.parsedValue && !defaultValue) return\n return ((props.parsedValue \|\| innerDate.value) as Dayjs).format(\n dateFormat.value\n )\n })\n\n const timePickerVisible = ref(false)\n const onTimePickerInputFocus = () => {\n timePickerVisible.value = true\n }\n const handleTimePickClose = () => {\n timePickerVisible.value = false\n }\n\n const handleTimePick = (value, visible, first) => {\n const newDate = props.parsedValue\n ? (props.parsedValue as Dayjs)\n .hour(value.hour())\n .minute(value.minute())\n .second(value.second())\n : value\n innerDate.value = newDate\n emit(innerDate.value, true)\n if (!first) {\n timePickerVisible.value = visible\n }\n }\n\n const handleVisibleTimeChange = (value) => {\n const newDate = dayjs(value, timeFormat.value).locale(lang.value)\n if (newDate.isValid() && checkDateWithinRange(newDate)) {\n innerDate.value = newDate\n .year(innerDate.value.year())\n .month(innerDate.value.month())\n .date(innerDate.value.date())\n userInputTime.value = null\n timePickerVisible.value = false\n emit(innerDate.value, true)\n }\n }\n\n const handleVisibleDateChange = (value) => {\n const newDate = dayjs(value, dateFormat.value).locale(lang.value)\n if (newDate.isValid()) {\n if (disabledDate && disabledDate(newDate.toDate())) {\n return\n }\n innerDate.value = newDate\n .hour(innerDate.value.hour())\n .minute(innerDate.value.minute())\n .second(innerDate.value.second())\n userInputDate.value = null\n emit(innerDate.value, true)\n }\n }\n\n const isValidValue = (date: unknown) => {\n return (\n dayjs.isDayjs(date) &&\n date.isValid() &&\n (disabledDate ? !disabledDate(date.toDate()) : true)\n )\n }\n\n const formatToString = (value) => {\n if (selectionMode.value === 'dates') {\n return value.map((_) => _.format(props.format))\n }\n return value.format(props.format)\n }\n\n const parseUserInput = (value) => {\n return dayjs(value, props.format).locale(lang.value)\n }\n\n const getDefaultValue = () => {\n const parseDate = dayjs(defaultValue).locale(lang.value)\n if (!defaultValue) {\n const defaultTimeDValue = defaultTimeD.value\n return dayjs()\n .hour(defaultTimeDValue.hour())\n .minute(defaultTimeDValue.minute())\n .second(defaultTimeDValue.second())\n .locale(lang.value)\n }\n return parseDate\n }\n\n const handleKeydown = (event) => {\n const { code, keyCode } = event\n const list = [\n EVENT_CODE.up,\n EVENT_CODE.down,\n EVENT_CODE.left,\n EVENT_CODE.right,\n ]\n if (props.visible && !timePickerVisible.value) {\n if (list.includes(code)) {\n handleKeyControl(keyCode)\n event.stopPropagation()\n event.preventDefault()\n }\n if (\n code === EVENT_CODE.enter &&\n userInputDate.value === null &&\n userInputTime.value === null\n ) {\n // Enter\n emit(innerDate, false)\n }\n }\n }\n\n const handleKeyControl = (keyCode) => {\n const mapping = {\n year: {\n 38: -4,\n 40: 4,\n 37: -1,\n 39: 1,\n offset: (date, step) => date.setFullYear(date.getFullYear() + step),\n },\n month: {\n 38: -4,\n 40: 4,\n 37: -1,\n 39: 1,\n offset: (date, step) => date.setMonth(date.getMonth() + step),\n },\n week: {\n 38: -1,\n 40: 1,\n 37: -1,\n 39: 1,\n offset: (date, step) => date.setDate(date.getDate() + step * 7),\n },\n day: {\n 38: -7,\n 40: 7,\n 37: -1,\n 39: 1,\n offset: (date, step) => date.setDate(date.getDate() + step),\n },\n }\n\n const newDate = innerDate.value.toDate()\n while (Math.abs(innerDate.value.diff(newDate, 'year', true)) < 1) {\n const map = mapping[selectionMode.value]\n map.offset(newDate, map[keyCode])\n if (disabledDate && disabledDate(newDate)) {\n continue\n }\n const result = dayjs(newDate).locale(lang.value)\n innerDate.value = result\n ctx.emit('pick', result, true)\n break\n }\n }\n\n const handlePanelChange = (mode: 'month' \| 'year') => {\n ctx.emit(\n 'panel-change',\n innerDate.value.toDate(),\n mode,\n currentView.value\n )\n }\n\n ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n ctx.emit('set-picker-option', ['formatToString', formatToString])\n ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n ctx.emit('set-picker-option', ['handleKeydown', handleKeydown])\n\n watch(\n () => props.parsedValue,\n (val) => {\n if (val) {\n if (selectionMode.value === 'dates') return\n if (Array.isArray(val)) return\n innerDate.value = val\n } else {\n innerDate.value = getDefaultValue()\n }\n },\n { immediate: true }\n )\n\n return {\n handleTimePick,\n handleTimePickClose,\n onTimePickerInputFocus,\n timePickerVisible,\n visibleTime,\n visibleDate,\n showTime,\n changeToNow,\n onConfirm,\n footerVisible,\n handleYearPick,\n showMonthPicker,\n showYearPicker,\n handleMonthPick,\n hasShortcuts,\n shortcuts,\n arrowControl,\n disabledDate,\n cellClassName,\n selectionMode,\n handleShortcutClick,\n prevYear_,\n nextYear_,\n prevMonth_,\n nextMonth_,\n innerDate,\n t,\n yearLabel,\n currentView,\n month,\n handleDatePick,\n handleVisibleTimeChange,\n handleVisibleDateChange,\n timeFormat,\n userInputTime,\n userInputDate,\n }\n },\n})\n</script>\n"],"names":["_createElementVNode"],"mappings":";;;;;;;;;;EAY+B;;;;;;EAYF;;qBACb,KAAK,EAAC,6BAA6B;;;;;;sBAuFtC,KAAK,EAAC;eA4Bb,KAAK,EAAC;;;;;;;;;;;;;;;;;;;;;;;;;yDAjIqB;;;;;;gBAKvB;;;;;;;iCAOJ;;;cAEI;;;;2BAIS;yBACC;;;;6CAIV;;;;;2BAQY;;4BAEC;;;;;;qCAMM;2BACVA;;;;;;;wBAIX;;;;;;;gBASQ;;;;;YAKJ;gCAAS,CAAgB;;;;;;;gBAIrB;;;;;YAKJ;;gBAAS;;;;;;;;;YAIT,UAAM;YACL;iCACG;0BAEN;YAEE;YACA,KAAK;YAEJ,OAAK;;;;;gBAIF;;;;;YAKJ;gCAAS,CAAiB;;;;;;;gBAItB;;;;;YAKJ;;;;;;;;;;;;;;;;kCAMiB;;;+BAGH;;;;;6BAGhB;;oBAEO,EAAE;;;;;;;;;sBAOA;;;kDAGe;;;;;;;;QAW1B,IAAI,EAAC;QACL;QACA,OAAM;;;6BAGN;;;;;;;MAEF;;;;;"}
1	+ {"version":3,"file":"panel-date-pick.vue_vue_type_template_id_78e07aa7_lang.js","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-date-pick.vue?vue&type=template&id=78e07aa7&lang.js"],"sourcesContent":["<template>\n <div\n class=\"el-picker-panel el-date-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-picker__time-header\">\n <span class=\"el-date-picker__editor-wrap\">\n <el-input\n :placeholder=\"t('el.datepicker.selectDate')\"\n :model-value=\"visibleDate\"\n size=\"small\"\n @input=\"(val) => (userInputDate = val)\"\n @change=\"handleVisibleDateChange\"\n />\n </span>\n <span\n v-clickoutside=\"handleTimePickClose\"\n class=\"el-date-picker__editor-wrap\"\n >\n <el-input\n :placeholder=\"t('el.datepicker.selectTime')\"\n :model-value=\"visibleTime\"\n size=\"small\"\n @focus=\"onTimePickerInputFocus\"\n @input=\"(val) => (userInputTime = val)\"\n @change=\"handleVisibleTimeChange\"\n />\n <time-pick-panel\n :visible=\"timePickerVisible\"\n :format=\"timeFormat\"\n :time-arrow-control=\"arrowControl\"\n :parsed-value=\"innerDate\"\n @pick=\"handleTimePick\"\n />\n </span>\n </div>\n <div\n v-show=\"currentView !== 'time'\"\n class=\"el-date-picker__header\"\n :class=\"{\n 'el-date-picker__header--bordered':\n currentView === 'year' \|\| currentView === 'month',\n }\"\n >\n <button\n type=\"button\"\n :aria-label=\"t(`el.datepicker.prevYear`)\"\n class=\"el-picker-panel__icon-btn el-date-picker__prev-btn d-arrow-left\"\n @click=\"prevYear_\"\n >\n <el-icon><d-arrow-left /></el-icon>\n </button>\n <button\n v-show=\"currentView === 'date'\"\n type=\"button\"\n :aria-label=\"t(`el.datepicker.prevMonth`)\"\n class=\"el-picker-panel__icon-btn el-date-picker__prev-btn arrow-left\"\n @click=\"prevMonth_\"\n >\n <el-icon><arrow-left /></el-icon>\n </button>\n <span\n role=\"button\"\n class=\"el-date-picker__header-label\"\n @click=\"showYearPicker\"\n >{{ yearLabel }}</span\n >\n <span\n v-show=\"currentView === 'date'\"\n role=\"button\"\n class=\"el-date-picker__header-label\"\n :class=\"{ active: currentView === 'month' }\"\n @click=\"showMonthPicker\"\n >{{ t(`el.datepicker.month${month + 1}`) }}</span\n >\n <button\n type=\"button\"\n :aria-label=\"t(`el.datepicker.nextYear`)\"\n class=\"el-picker-panel__icon-btn el-date-picker__next-btn d-arrow-right\"\n @click=\"nextYear_\"\n >\n <el-icon><d-arrow-right /></el-icon>\n </button>\n <button\n v-show=\"currentView === 'date'\"\n type=\"button\"\n :aria-label=\"t(`el.datepicker.nextMonth`)\"\n class=\"el-picker-panel__icon-btn el-date-picker__next-btn arrow-right\"\n @click=\"nextMonth_\"\n >\n <el-icon><arrow-right /></el-icon>\n </button>\n </div>\n <div class=\"el-picker-panel__content\">\n <date-table\n v-if=\"currentView === 'date'\"\n :selection-mode=\"selectionMode\"\n :date=\"innerDate\"\n :parsed-value=\"parsedValue\"\n :disabled-date=\"disabledDate\"\n @pick=\"handleDatePick\"\n />\n <year-table\n v-if=\"currentView === 'year'\"\n :date=\"innerDate\"\n :disabled-date=\"disabledDate\"\n :parsed-value=\"parsedValue\"\n @pick=\"handleYearPick\"\n />\n <month-table\n v-if=\"currentView === 'month'\"\n :date=\"innerDate\"\n :parsed-value=\"parsedValue\"\n :disabled-date=\"disabledDate\"\n @pick=\"handleMonthPick\"\n />\n </div>\n </div>\n </div>\n <div\n v-show=\"footerVisible && currentView === 'date'\"\n class=\"el-picker-panel__footer\"\n >\n <el-button\n v-show=\"selectionMode !== 'dates'\"\n size=\"small\"\n type=\"text\"\n class=\"el-picker-panel__link-btn\"\n @click=\"changeToNow\"\n >\n {{ t('el.datepicker.now') }}\n </el-button>\n <el-button\n plain\n size=\"small\"\n class=\"el-picker-panel__link-btn\"\n @click=\"onConfirm\"\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 { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidDatePickType } from '@element-plus/utils/validators'\nimport {\n DArrowLeft,\n ArrowLeft,\n DArrowRight,\n ArrowRight,\n} from '@element-plus/icons-vue'\nimport { TOOLTIP_INJECTION_KEY } from '@element-plus/components/tooltip'\nimport DateTable from './basic-date-table.vue'\nimport MonthTable from './basic-month-table.vue'\nimport YearTable from './basic-year-table.vue'\n\nimport type { PropType } from 'vue'\nimport type { ConfigType, Dayjs } from 'dayjs'\nimport type { IDatePickerType } from '../date-picker.type'\n\n// todo\n/* eslint-disable-next-line /\nconst timeWithinRange = (_: ConfigType, __: any, ___: string) => true\n\nexport default defineComponent({\n components: {\n DateTable,\n ElInput,\n ElButton,\n ElIcon,\n TimePickPanel,\n MonthTable,\n YearTable,\n DArrowLeft,\n ArrowLeft,\n DArrowRight,\n ArrowRight,\n },\n\n directives: { clickoutside: ClickOutside },\n props: {\n visible: {\n type: Boolean,\n default: false,\n },\n parsedValue: {\n type: [Object, Array] as PropType<Dayjs \| Dayjs[]>,\n },\n format: {\n type: String,\n default: '',\n },\n type: {\n type: String as PropType<IDatePickerType>,\n required: true,\n validator: isValidDatePickType,\n },\n },\n emits: ['pick', 'set-picker-option', 'panel-change'],\n setup(props, ctx) {\n const { t, lang } = useLocale()\n const pickerBase = inject('EP_PICKER_BASE') as any\n const popper = inject(TOOLTIP_INJECTION_KEY)\n const {\n shortcuts,\n disabledDate,\n cellClassName,\n defaultTime,\n arrowControl,\n } = pickerBase.props\n const defaultValue = toRef(pickerBase.props, 'defaultValue')\n\n const innerDate = ref(dayjs().locale(lang.value))\n\n const defaultTimeD = computed(() => {\n return dayjs(defaultTime).locale(lang.value)\n })\n\n const month = computed(() => {\n return innerDate.value.month()\n })\n\n const year = computed(() => {\n return innerDate.value.year()\n })\n\n const selectableRange = ref([])\n const userInputDate = ref(null)\n const userInputTime = ref(null)\n // todo update to disableHour\n const checkDateWithinRange = (date: ConfigType) => {\n return selectableRange.value.length > 0\n ? timeWithinRange(\n date,\n selectableRange.value,\n props.format \|\| 'HH:mm:ss'\n )\n : true\n }\n const formatEmit = (emitDayjs: Dayjs) => {\n if (defaultTime && !visibleTime.value) {\n return defaultTimeD.value\n .year(emitDayjs.year())\n .month(emitDayjs.month())\n .date(emitDayjs.date())\n }\n if (showTime.value) return emitDayjs.millisecond(0)\n return emitDayjs.startOf('day')\n }\n const emit = (value, ...args) => {\n if (!value) {\n ctx.emit('pick', value, ...args)\n } else if (Array.isArray(value)) {\n const dates = value.map(formatEmit)\n ctx.emit('pick', dates, ...args)\n } else {\n ctx.emit('pick', formatEmit(value), ...args)\n }\n userInputDate.value = null\n userInputTime.value = null\n }\n const handleDatePick = (value: Dayjs) => {\n if (selectionMode.value === 'day') {\n let newDate = props.parsedValue\n ? (props.parsedValue as Dayjs)\n .year(value.year())\n .month(value.month())\n .date(value.date())\n : value\n // change default time while out of selectableRange\n if (!checkDateWithinRange(newDate)) {\n newDate = (selectableRange.value[0][0] as Dayjs)\n .year(value.year())\n .month(value.month())\n .date(value.date())\n }\n innerDate.value = newDate\n emit(newDate, showTime.value)\n } else if (selectionMode.value === 'week') {\n emit(value.date)\n } else if (selectionMode.value === 'dates') {\n emit(value, true) // set false to keep panel open\n }\n }\n const prevMonth_ = () => {\n innerDate.value = innerDate.value.subtract(1, 'month')\n handlePanelChange('month')\n }\n\n const nextMonth_ = () => {\n innerDate.value = innerDate.value.add(1, 'month')\n handlePanelChange('month')\n }\n\n const prevYear_ = () => {\n if (currentView.value === 'year') {\n innerDate.value = innerDate.value.subtract(10, 'year')\n } else {\n innerDate.value = innerDate.value.subtract(1, 'year')\n }\n handlePanelChange('year')\n }\n\n const nextYear_ = () => {\n if (currentView.value === 'year') {\n innerDate.value = innerDate.value.add(10, 'year')\n } else {\n innerDate.value = innerDate.value.add(1, 'year')\n }\n handlePanelChange('year')\n }\n\n const currentView = ref('date')\n\n const yearLabel = computed(() => {\n const yearTranslation = t('el.datepicker.year')\n if (currentView.value === 'year') {\n const startYear = Math.floor(year.value / 10) 10\n if (yearTranslation) {\n return `${startYear} ${yearTranslation} - ${\n startYear + 9\n } ${yearTranslation}`\n }\n return `${startYear} - ${startYear + 9}`\n }\n return `${year.value} ${yearTranslation}`\n })\n\n const handleShortcutClick = (shortcut) => {\n const shortcutValue =\n typeof shortcut.value === 'function' ? shortcut.value() : shortcut.value\n if (shortcutValue) {\n emit(dayjs(shortcutValue).locale(lang.value))\n return\n }\n if (shortcut.onClick) {\n shortcut.onClick(ctx)\n }\n }\n\n const selectionMode = computed(() => {\n if (['week', 'month', 'year', 'dates'].includes(props.type)) {\n return props.type\n }\n return 'day'\n })\n\n watch(\n () => selectionMode.value,\n (val) => {\n if (['month', 'year'].includes(val)) {\n currentView.value = val\n return\n }\n currentView.value = 'date'\n },\n { immediate: true }\n )\n\n watch(\n () => currentView.value,\n () => {\n popper?.updatePopper()\n }\n )\n\n const hasShortcuts = computed(() => !!shortcuts.length)\n\n const handleMonthPick = (month) => {\n innerDate.value = innerDate.value.startOf('month').month(month)\n if (selectionMode.value === 'month') {\n emit(innerDate.value)\n } else {\n currentView.value = 'date'\n }\n handlePanelChange('month')\n }\n\n const handleYearPick = (year) => {\n if (selectionMode.value === 'year') {\n innerDate.value = innerDate.value.startOf('year').year(year)\n emit(innerDate.value)\n } else {\n innerDate.value = innerDate.value.year(year)\n currentView.value = 'month'\n }\n handlePanelChange('year')\n }\n\n const showMonthPicker = () => {\n currentView.value = 'month'\n }\n\n const showYearPicker = () => {\n currentView.value = 'year'\n }\n\n const showTime = computed(\n () => props.type === 'datetime' \|\| props.type === 'datetimerange'\n )\n\n const footerVisible = computed(() => {\n return showTime.value \|\| selectionMode.value === 'dates'\n })\n\n const onConfirm = () => {\n if (selectionMode.value === 'dates') {\n emit(props.parsedValue)\n } else {\n // deal with the scenario where: user opens the date time picker, then confirm without doing anything\n let result = props.parsedValue as Dayjs\n if (!result) {\n const defaultTimeD = dayjs(defaultTime).locale(lang.value)\n const defaultValueD = getDefaultValue()\n result = defaultTimeD\n .year(defaultValueD.year())\n .month(defaultValueD.month())\n .date(defaultValueD.date())\n }\n innerDate.value = result\n emit(result)\n }\n }\n\n const changeToNow = () => {\n // NOTE: not a permanent solution\n // consider disable \"now\" button in the future\n const now = dayjs().locale(lang.value)\n const nowDate = now.toDate()\n if (\n (!disabledDate \|\| !disabledDate(nowDate)) &&\n checkDateWithinRange(nowDate)\n ) {\n innerDate.value = dayjs().locale(lang.value)\n emit(innerDate.value)\n }\n }\n\n const timeFormat = computed(() => {\n return extractTimeFormat(props.format)\n })\n\n const dateFormat = computed(() => {\n return extractDateFormat(props.format)\n })\n\n const visibleTime = computed(() => {\n if (userInputTime.value) return userInputTime.value\n if (!props.parsedValue && !defaultValue.value) return\n return ((props.parsedValue \|\| innerDate.value) as Dayjs).format(\n timeFormat.value\n )\n })\n\n const visibleDate = computed(() => {\n if (userInputDate.value) return userInputDate.value\n if (!props.parsedValue && !defaultValue.value) return\n return ((props.parsedValue \|\| innerDate.value) as Dayjs).format(\n dateFormat.value\n )\n })\n\n const timePickerVisible = ref(false)\n const onTimePickerInputFocus = () => {\n timePickerVisible.value = true\n }\n const handleTimePickClose = () => {\n timePickerVisible.value = false\n }\n\n const handleTimePick = (value, visible, first) => {\n const newDate = props.parsedValue\n ? (props.parsedValue as Dayjs)\n .hour(value.hour())\n .minute(value.minute())\n .second(value.second())\n : value\n innerDate.value = newDate\n emit(innerDate.value, true)\n if (!first) {\n timePickerVisible.value = visible\n }\n }\n\n const handleVisibleTimeChange = (value) => {\n const newDate = dayjs(value, timeFormat.value).locale(lang.value)\n if (newDate.isValid() && checkDateWithinRange(newDate)) {\n innerDate.value = newDate\n .year(innerDate.value.year())\n .month(innerDate.value.month())\n .date(innerDate.value.date())\n userInputTime.value = null\n timePickerVisible.value = false\n emit(innerDate.value, true)\n }\n }\n\n const handleVisibleDateChange = (value) => {\n const newDate = dayjs(value, dateFormat.value).locale(lang.value)\n if (newDate.isValid()) {\n if (disabledDate && disabledDate(newDate.toDate())) {\n return\n }\n innerDate.value = newDate\n .hour(innerDate.value.hour())\n .minute(innerDate.value.minute())\n .second(innerDate.value.second())\n userInputDate.value = null\n emit(innerDate.value, true)\n }\n }\n\n const isValidValue = (date: unknown) => {\n return (\n dayjs.isDayjs(date) &&\n date.isValid() &&\n (disabledDate ? !disabledDate(date.toDate()) : true)\n )\n }\n\n const formatToString = (value) => {\n if (selectionMode.value === 'dates') {\n return value.map((_) => _.format(props.format))\n }\n return value.format(props.format)\n }\n\n const parseUserInput = (value) => {\n return dayjs(value, props.format).locale(lang.value)\n }\n\n const getDefaultValue = () => {\n const parseDate = dayjs(defaultValue.value).locale(lang.value)\n if (!defaultValue.value) {\n const defaultTimeDValue = defaultTimeD.value\n return dayjs()\n .hour(defaultTimeDValue.hour())\n .minute(defaultTimeDValue.minute())\n .second(defaultTimeDValue.second())\n .locale(lang.value)\n }\n return parseDate\n }\n\n const handleKeydown = (event) => {\n const { code, keyCode } = event\n const list = [\n EVENT_CODE.up,\n EVENT_CODE.down,\n EVENT_CODE.left,\n EVENT_CODE.right,\n ]\n if (props.visible && !timePickerVisible.value) {\n if (list.includes(code)) {\n handleKeyControl(keyCode)\n event.stopPropagation()\n event.preventDefault()\n }\n if (\n code === EVENT_CODE.enter &&\n userInputDate.value === null &&\n userInputTime.value === null\n ) {\n // Enter\n emit(innerDate, false)\n }\n }\n }\n\n const handleKeyControl = (keyCode) => {\n const mapping = {\n year: {\n 38: -4,\n 40: 4,\n 37: -1,\n 39: 1,\n offset: (date, step) => date.setFullYear(date.getFullYear() + step),\n },\n month: {\n 38: -4,\n 40: 4,\n 37: -1,\n 39: 1,\n offset: (date, step) => date.setMonth(date.getMonth() + step),\n },\n week: {\n 38: -1,\n 40: 1,\n 37: -1,\n 39: 1,\n offset: (date, step) => date.setDate(date.getDate() + step * 7),\n },\n day: {\n 38: -7,\n 40: 7,\n 37: -1,\n 39: 1,\n offset: (date, step) => date.setDate(date.getDate() + step),\n },\n }\n\n const newDate = innerDate.value.toDate()\n while (Math.abs(innerDate.value.diff(newDate, 'year', true)) < 1) {\n const map = mapping[selectionMode.value]\n map.offset(newDate, map[keyCode])\n if (disabledDate && disabledDate(newDate)) {\n continue\n }\n const result = dayjs(newDate).locale(lang.value)\n innerDate.value = result\n ctx.emit('pick', result, true)\n break\n }\n }\n\n const handlePanelChange = (mode: 'month' \| 'year') => {\n ctx.emit(\n 'panel-change',\n innerDate.value.toDate(),\n mode,\n currentView.value\n )\n }\n\n ctx.emit('set-picker-option', ['isValidValue', isValidValue])\n ctx.emit('set-picker-option', ['formatToString', formatToString])\n ctx.emit('set-picker-option', ['parseUserInput', parseUserInput])\n ctx.emit('set-picker-option', ['handleKeydown', handleKeydown])\n\n watch(\n () => defaultValue.value,\n (val) => {\n if (val) {\n innerDate.value = getDefaultValue()\n }\n },\n { immediate: true }\n )\n\n watch(\n () => props.parsedValue,\n (val) => {\n if (val) {\n if (selectionMode.value === 'dates') return\n if (Array.isArray(val)) return\n innerDate.value = val\n } else {\n innerDate.value = getDefaultValue()\n }\n },\n { immediate: true }\n )\n\n return {\n handleTimePick,\n handleTimePickClose,\n onTimePickerInputFocus,\n timePickerVisible,\n visibleTime,\n visibleDate,\n showTime,\n changeToNow,\n onConfirm,\n footerVisible,\n handleYearPick,\n showMonthPicker,\n showYearPicker,\n handleMonthPick,\n hasShortcuts,\n shortcuts,\n arrowControl,\n disabledDate,\n cellClassName,\n selectionMode,\n handleShortcutClick,\n prevYear_,\n nextYear_,\n prevMonth_,\n nextMonth_,\n innerDate,\n t,\n yearLabel,\n currentView,\n month,\n handleDatePick,\n handleVisibleTimeChange,\n handleVisibleDateChange,\n timeFormat,\n userInputTime,\n userInputDate,\n }\n },\n})\n</script>\n"],"names":["_createElementVNode"],"mappings":";;;;;;;;;;EAY+B;;;;;;EAYF;;qBACb,KAAK,EAAC,6BAA6B;;;;;;sBAuFtC,KAAK,EAAC;eA4Bb,KAAK,EAAC;;;;;;;;;;;;;;;;;;;;;;;;;yDAjIqB;;;;;;gBAKvB;;;;;;;iCAOJ;;;cAEI;;;;2BAIS;yBACC;;;;6CAIV;;;;;2BAQY;;4BAEC;;;;;;qCAMM;2BACVA;;;;;;;wBAIX;;;;;;;gBASQ;;;;;YAKJ;gCAAS,CAAgB;;;;;;;gBAIrB;;;;;YAKJ;;gBAAS;;;;;;;;;YAIT,UAAM;YACL;iCACG;0BAEN;YAEE;YACA,KAAK;YAEJ,OAAK;;;;;gBAIF;;;;;YAKJ;gCAAS,CAAiB;;;;;;;gBAItB;;;;;YAKJ;;;;;;;;;;;;;;;;kCAMiB;;;+BAGH;;;;;6BAGhB;;oBAEO,EAAE;;;;;;;;;sBAOA;;;kDAGe;;;;;;;;QAW1B,IAAI,EAAC;QACL;QACA,OAAM;;;6BAGN;;;;;;;MAEF;;;;;"}

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

@@ -202,16 +202,17 @@ declare const _default: import("vue").DefineComponent<{
     handleConfirm: (visible?: boolean) => void;
     timeFormat: import("vue").ComputedRef<string>;
     clearable: any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("calendar-change" | "panel-change" | "pick" | "set-picker-option")[], "pick" | "calendar-change" | "panel-change" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    unlinkPanels?: unknown;
-    parsedValue?: unknown;
-    type?: unknown;
-} & {
-    type: IDatePickerType;
-    unlinkPanels: boolean;
-} & {
-    parsedValue?: dayjs.Dayjs[] | undefined;
-}> & {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("calendar-change" | "panel-change" | "pick" | "set-picker-option")[], "pick" | "calendar-change" | "panel-change" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    unlinkPanels: BooleanConstructor;
+    parsedValue: {
+        type: PropType<dayjs.Dayjs[]>;
+    };
+    type: {
+        type: PropType<IDatePickerType>;
+        required: true;
+        validator: (val: string) => boolean;
+    };
+}>> & {
     onPick?: ((...args: any[]) => any) | undefined;
     "onCalendar-change"?: ((...args: any[]) => any) | undefined;
     "onPanel-change"?: ((...args: any[]) => any) | undefined;

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

@@ -343,15 +343,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, "month");
         }
         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"]();
       }
@@ -369,10 +369,19 @@ var script = vue.defineComponent({
       cellClassName,
       format,
       defaultTime,
-      defaultValue,
       arrowControl,
       clearable
     } = pickerBase.props;
+    const defaultValue = vue.toRef(pickerBase.props, "defaultValue");
+    vue.watch(() => defaultValue.value, (val) => {
+      if (val) {
+        const defaultArr = getDefaultValue();
+        minDate.value = null;
+        maxDate.value = null;
+        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-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', '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)) {\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"],"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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"}