npm - element-plus - Versions diffs - 1.3.0-beta.3 → 1.3.0-beta.4 - Mend

element-plus 1.3.0-beta.3 → 1.3.0-beta.4

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

package/es/components/date-picker/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { SFCWithInstall } from 'element-plus/es/utils/types';
+import type { SFCWithInstall } from '@element-plus/utils/types';
 declare const _DatePicker: SFCWithInstall<import("vue").DefineComponent<{
     type: {
         type: import("vue").PropType<import("./src/date-picker.type").IDatePickerType>;
@@ -38,7 +38,7 @@ declare const _DatePicker: SFCWithInstall<import("vue").DefineComponent<{
         default: string;
     };
     size: {
-        type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
+        type: import("vue").PropType<import("@element-plus/utils/types").ComponentSize>;
         validator: (val: string) => boolean;
     };
     readonly: {
@@ -141,17 +141,17 @@ declare const _DatePicker: SFCWithInstall<import("vue").DefineComponent<{
     unlinkPanels?: unknown;
 } & {
     type: import("./src/date-picker.type").IDatePickerType;
+    name: string | unknown[];
     disabled: boolean;
+    readonly: boolean;
+    placeholder: string;
     modelValue: string | number | Date | (string | number | Date)[];
-    name: string | unknown[];
     editable: boolean;
-    popperOptions: Partial<import("@popperjs/core").Options>;
-    popperClass: string;
-    placeholder: string;
-    readonly: boolean;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     validateEvent: boolean;
+    popperOptions: Partial<import("@popperjs/core").Options>;
+    popperClass: string;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     rangeSeparator: string;
     isRange: boolean;
@@ -159,8 +159,8 @@ declare const _DatePicker: SFCWithInstall<import("vue").DefineComponent<{
     arrowControl: boolean;
     unlinkPanels: boolean;
 } & {
-    size?: import("element-plus/es/utils/types").ComponentSize | undefined;
     id?: string | unknown[] | undefined;
+    size?: import("@element-plus/utils/types").ComponentSize | undefined;
     format?: string | undefined;
     valueFormat?: string | undefined;
     startPlaceholder?: string | undefined;
@@ -176,17 +176,17 @@ declare const _DatePicker: SFCWithInstall<import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     type: import("./src/date-picker.type").IDatePickerType;
+    name: string | unknown[];
     disabled: boolean;
+    readonly: boolean;
+    placeholder: string;
     modelValue: string | number | Date | (string | number | Date)[];
-    name: string | unknown[];
     editable: boolean;
-    popperOptions: Partial<import("@popperjs/core").Options>;
-    popperClass: string;
-    placeholder: string;
-    readonly: boolean;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     validateEvent: boolean;
+    popperOptions: Partial<import("@popperjs/core").Options>;
+    popperClass: string;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     rangeSeparator: string;
     isRange: boolean;
@@ -234,7 +234,7 @@ export declare const ElDatePicker: SFCWithInstall<import("vue").DefineComponent<
         default: string;
     };
     size: {
-        type: import("vue").PropType<import("element-plus/es/utils/types").ComponentSize>;
+        type: import("vue").PropType<import("@element-plus/utils/types").ComponentSize>;
         validator: (val: string) => boolean;
     };
     readonly: {
@@ -337,17 +337,17 @@ export declare const ElDatePicker: SFCWithInstall<import("vue").DefineComponent<
     unlinkPanels?: unknown;
 } & {
     type: import("./src/date-picker.type").IDatePickerType;
+    name: string | unknown[];
     disabled: boolean;
+    readonly: boolean;
+    placeholder: string;
     modelValue: string | number | Date | (string | number | Date)[];
-    name: string | unknown[];
     editable: boolean;
-    popperOptions: Partial<import("@popperjs/core").Options>;
-    popperClass: string;
-    placeholder: string;
-    readonly: boolean;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     validateEvent: boolean;
+    popperOptions: Partial<import("@popperjs/core").Options>;
+    popperClass: string;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     rangeSeparator: string;
     isRange: boolean;
@@ -355,8 +355,8 @@ export declare const ElDatePicker: SFCWithInstall<import("vue").DefineComponent<
     arrowControl: boolean;
     unlinkPanels: boolean;
 } & {
-    size?: import("element-plus/es/utils/types").ComponentSize | undefined;
     id?: string | unknown[] | undefined;
+    size?: import("@element-plus/utils/types").ComponentSize | undefined;
     format?: string | undefined;
     valueFormat?: string | undefined;
     startPlaceholder?: string | undefined;
@@ -372,17 +372,17 @@ export declare const ElDatePicker: SFCWithInstall<import("vue").DefineComponent<
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     type: import("./src/date-picker.type").IDatePickerType;
+    name: string | unknown[];
     disabled: boolean;
+    readonly: boolean;
+    placeholder: string;
     modelValue: string | number | Date | (string | number | Date)[];
-    name: string | unknown[];
     editable: boolean;
-    popperOptions: Partial<import("@popperjs/core").Options>;
-    popperClass: string;
-    placeholder: string;
-    readonly: boolean;
     clearable: boolean;
     prefixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     validateEvent: boolean;
+    popperOptions: Partial<import("@popperjs/core").Options>;
+    popperClass: string;
     clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     rangeSeparator: string;
     isRange: boolean;

package/es/components/date-picker/src/date-picker-com/basic-cell-render.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import type { DateCell } from '../date-picker.type';
 declare const _default: import("vue").DefineComponent<{
-    cell: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<DateCell>, unknown, unknown, unknown, unknown>;
+    cell: import("@element-plus/utils/props").BuildPropReturn<import("@element-plus/utils/props").PropWrapper<DateCell>, unknown, unknown, unknown, unknown>;
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {

package/es/components/date-picker/src/date-picker-com/basic-date-table.vue.d.ts CHANGED Viewed

@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     handleMouseMove: (event: any) => void;
-    t: import("element-plus/es/hooks").Translator;
+    t: import("@element-plus/hooks").Translator;
     rows: import("vue").ComputedRef<{
         column?: number | undefined;
         customClass?: string | undefined;
@@ -86,7 +86,7 @@ declare const _default: import("vue").DefineComponent<{
             startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
             endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
             format: (template?: string | undefined) => string;
-            diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "M" | "s" | "y" | "year" | "month" | "date" | "dates" | "week" | "weeks" | "months" | "hours" | "minutes" | "seconds" | "h" | "day" | "millisecond" | "second" | "minute" | "hour" | "milliseconds" | "days" | "years" | "d" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+            diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "Q" | "s" | "day" | "hour" | "minute" | "month" | "second" | "year" | "M" | "m" | "y" | "date" | "d" | "week" | "weeks" | "months" | "h" | "ms" | "millisecond" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "years" | "dates" | "w" | "quarter" | "quarters" | undefined, float?: boolean | undefined) => number;
             valueOf: () => number;
             unix: () => number;
             daysInMonth: () => number;
@@ -222,7 +222,7 @@ declare const _default: import("vue").DefineComponent<{
             startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
             endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
             format: (template?: string | undefined) => string;
-            diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "M" | "s" | "y" | "year" | "month" | "date" | "dates" | "week" | "weeks" | "months" | "hours" | "minutes" | "seconds" | "h" | "day" | "millisecond" | "second" | "minute" | "hour" | "milliseconds" | "days" | "years" | "d" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+            diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "Q" | "s" | "day" | "hour" | "minute" | "month" | "second" | "year" | "M" | "m" | "y" | "date" | "d" | "week" | "weeks" | "months" | "h" | "ms" | "millisecond" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "years" | "dates" | "w" | "quarter" | "quarters" | undefined, float?: boolean | undefined) => number;
             valueOf: () => number;
             unix: () => number;
             daysInMonth: () => number;
@@ -251,7 +251,7 @@ declare const _default: import("vue").DefineComponent<{
             isSameOrAfter: (date: string | number | Date | dayjs.Dayjs | null | undefined, unit?: dayjs.OpUnitType | undefined) => boolean;
             isSameOrBefore: (date: string | number | Date | dayjs.Dayjs | null | undefined, unit?: dayjs.OpUnitType | undefined) => boolean;
         } | undefined;
-        type?: ("week" | "normal" | "today" | "prev-month" | "next-month") | undefined;
+        type?: ("normal" | "week" | "today" | "prev-month" | "next-month") | undefined;
     }[][]>;
     isWeekActive: (cell: any) => boolean;
     getCellClasses: (cell: any) => string;

package/es/components/date-picker/src/date-picker-com/basic-month-table.vue.d.ts CHANGED Viewed

@@ -32,7 +32,7 @@ declare const _default: import("vue").DefineComponent<{
     handleMonthTableClick: (event: any) => void;
     rows: import("vue").ComputedRef<never[][]>;
     getCellStyle: (cell: any) => any;
-    t: import("element-plus/es/hooks").Translator;
+    t: import("@element-plus/hooks").Translator;
     months: import("vue").Ref<string[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "pick" | "changerange")[], "select" | "pick" | "changerange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     disabledDate?: unknown;

package/es/components/date-picker/src/date-picker-com/panel-date-pick.vue.d.ts CHANGED Viewed

@@ -39,7 +39,7 @@ declare const _default: import("vue").DefineComponent<{
     arrowControl: any;
     disabledDate: any;
     cellClassName: any;
-    selectionMode: import("vue").ComputedRef<IDatePickerType | "day">;
+    selectionMode: import("vue").ComputedRef<"day" | IDatePickerType>;
     handleShortcutClick: (shortcut: any) => void;
     prevYear_: () => void;
     nextYear_: () => void;
@@ -87,7 +87,7 @@ declare const _default: import("vue").DefineComponent<{
         startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
         endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
         format: (template?: string | undefined) => string;
-        diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "M" | "s" | "y" | "year" | "month" | "date" | "dates" | "week" | "weeks" | "months" | "hours" | "minutes" | "seconds" | "h" | "day" | "millisecond" | "second" | "minute" | "hour" | "milliseconds" | "days" | "years" | "d" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+        diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "Q" | "s" | "day" | "hour" | "minute" | "month" | "second" | "year" | "M" | "m" | "y" | "date" | "d" | "week" | "weeks" | "months" | "h" | "ms" | "millisecond" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "years" | "dates" | "w" | "quarter" | "quarters" | undefined, float?: boolean | undefined) => number;
         valueOf: () => number;
         unix: () => number;
         daysInMonth: () => number;
@@ -116,7 +116,7 @@ declare const _default: import("vue").DefineComponent<{
         isSameOrAfter: (date: string | number | Date | dayjs.Dayjs | null | undefined, unit?: dayjs.OpUnitType | undefined) => boolean;
         isSameOrBefore: (date: string | number | Date | dayjs.Dayjs | null | undefined, unit?: dayjs.OpUnitType | undefined) => boolean;
     }>;
-    t: import("element-plus/es/hooks").Translator;
+    t: import("@element-plus/hooks").Translator;
     yearLabel: import("vue").ComputedRef<string>;
     currentView: import("vue").Ref<string>;
     month: import("vue").ComputedRef<number>;

package/es/components/date-picker/src/date-picker-com/panel-date-pick.vue_vue_type_script_lang.mjs CHANGED Viewed

@@ -9,6 +9,7 @@ import { ElIcon } from '../../../icon/index.mjs';
 import { EVENT_CODE } from '../../../../utils/aria.mjs';
 import { isValidDatePickType } from '../../../../utils/validators.mjs';
 import { DArrowLeft, ArrowLeft, DArrowRight, ArrowRight } from '@element-plus/icons-vue';
+import '../../../tooltip/index.mjs';
 import './basic-date-table.mjs';
 import './basic-month-table.mjs';
 import './basic-year-table.mjs';
@@ -18,6 +19,7 @@ import script$3 from './basic-month-table.vue_vue_type_script_lang.mjs';
 import script$4 from './basic-year-table.vue_vue_type_script_lang.mjs';
 import ClickOutside from '../../../../directives/click-outside/index.mjs';
 import { useLocale } from '../../../../hooks/use-locale/index.mjs';
+import { TOOLTIP_INJECTION_KEY } from '../../../tooltip/src/tokens.mjs';
 import { extractTimeFormat, extractDateFormat } from '../../../time-picker/src/common/date-utils.mjs';
 const timeWithinRange = (_, __, ___) => true;
@@ -58,6 +60,7 @@ var script = defineComponent({
   setup(props, ctx) {
     const { t, lang } = useLocale();
     const pickerBase = inject("EP_PICKER_BASE");
+    const popper = inject(TOOLTIP_INJECTION_KEY);
     const {
       shortcuts,
       disabledDate,
@@ -171,6 +174,9 @@ var script = defineComponent({
       }
       currentView.value = "date";
     }, { immediate: true });
+    watch(() => currentView.value, () => {
+      popper == null ? void 0 : popper.updatePopper();
+    });
     const hasShortcuts = computed(() => !!shortcuts.length);
     const handleMonthPick = (month2) => {
       innerDate.value = innerDate.value.startOf("month").month(month2);

package/es/components/date-picker/src/date-picker-com/panel-date-pick.vue_vue_type_script_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"panel-date-pick.vue_vue_type_script_lang.mjs","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 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'],\n setup(props, ctx) {\n const { t, lang } = useLocale()\n const pickerBase = inject('EP_PICKER_BASE') as any\n\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 }\n\n const nextMonth_ = () => {\n innerDate.value = innerDate.value.add(1, '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 }\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 }\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 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 }\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 }\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 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","TimePickPanel","MonthTable"],"mappings":"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"}
1	+ {"version":3,"file":"panel-date-pick.vue_vue_type_script_lang.mjs","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'],\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 }\n\n const nextMonth_ = () => {\n innerDate.value = innerDate.value.add(1, '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 }\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 }\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 }\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 }\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 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","TimePickPanel","MonthTable"],"mappings":"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"}

package/es/components/date-picker/src/date-picker-com/panel-date-pick.vue_vue_type_template_id_78e07aa7_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"panel-date-pick.vue_vue_type_template_id_78e07aa7_lang.mjs","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 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'],\n setup(props, ctx) {\n const { t, lang } = useLocale()\n const pickerBase = inject('EP_PICKER_BASE') as any\n\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 }\n\n const nextMonth_ = () => {\n innerDate.value = innerDate.value.add(1, '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 }\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 }\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 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 }\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 }\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 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;;;;;;;;;;;;;;;;;;;;;;;;;iDAjIqB;;;;;;gBAKvB;;;;;;;iCAOJ;;;cAEI;;;;uBAIS;yBACC;;;;6CAIV;;;;;2BAQY;;4BAEC;;;;;;iCAMM;uBACVA;;;;;;;wBAIX;;;;;;;gBASQ;;;;;YAKJ;gCAAS,CAAgB;;;;;;;gBAIrB;;;;;YAKJ;;gBAAS;;;;;;;;;YAIT,MAAM;YACL;6BACG;0BAEN;YAEE;YACA,KAAK;YAEJ,OAAK;;;;;gBAIF;;;;;YAKJ;gCAAS,CAAiB;;;;;;;gBAItB;;;;;YAKJ;;;;;;;;;;;;;;;;kCAMiB;;;+BAGH;;;;;6BAGhB;;oBAEO,EAAE;;;;;;;;;sBAOA;;;0CAGe;;;;;;;;QAW1B,IAAI,EAAC;QACL;QACA,OAAM;;;yBAGN;;;;;;;MAEF;;;;;"}
1	+ {"version":3,"file":"panel-date-pick.vue_vue_type_template_id_78e07aa7_lang.mjs","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'],\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 }\n\n const nextMonth_ = () => {\n innerDate.value = innerDate.value.add(1, '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 }\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 }\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 }\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 }\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 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;;;;;;;;;;;;;;;;;;;;;;;;;iDAjIqB;;;;;;gBAKvB;;;;;;;iCAOJ;;;cAEI;;;;uBAIS;yBACC;;;;6CAIV;;;;;2BAQY;;4BAEC;;;;;;iCAMM;uBACVA;;;;;;;wBAIX;;;;;;;gBASQ;;;;;YAKJ;gCAAS,CAAgB;;;;;;;gBAIrB;;;;;YAKJ;;gBAAS;;;;;;;;;YAIT,MAAM;YACL;6BACG;0BAEN;YAEE;YACA,KAAK;YAEJ,OAAK;;;;;gBAIF;;;;;YAKJ;gCAAS,CAAiB;;;;;;;gBAItB;;;;;YAKJ;;;;;;;;;;;;;;;;kCAMiB;;;+BAGH;;;;;6BAGhB;;oBAEO,EAAE;;;;;;;;;sBAOA;;;0CAGe;;;;;;;;QAW1B,IAAI,EAAC;QACL;QACA,OAAM;;;yBAGN;;;;;;;MAEF;;;;;"}

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

@@ -85,7 +85,7 @@ declare const _default: import("vue").DefineComponent<{
         startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
         endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
         format: (template?: string | undefined) => string;
-        diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "M" | "s" | "y" | "year" | "month" | "date" | "dates" | "week" | "weeks" | "months" | "hours" | "minutes" | "seconds" | "h" | "day" | "millisecond" | "second" | "minute" | "hour" | "milliseconds" | "days" | "years" | "d" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+        diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "Q" | "s" | "day" | "hour" | "minute" | "month" | "second" | "year" | "M" | "m" | "y" | "date" | "d" | "week" | "weeks" | "months" | "h" | "ms" | "millisecond" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "years" | "dates" | "w" | "quarter" | "quarters" | undefined, float?: boolean | undefined) => number;
         valueOf: () => number;
         unix: () => number;
         daysInMonth: () => number;
@@ -156,7 +156,7 @@ declare const _default: import("vue").DefineComponent<{
         startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
         endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
         format: (template?: string | undefined) => string;
-        diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "M" | "s" | "y" | "year" | "month" | "date" | "dates" | "week" | "weeks" | "months" | "hours" | "minutes" | "seconds" | "h" | "day" | "millisecond" | "second" | "minute" | "hour" | "milliseconds" | "days" | "years" | "d" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+        diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "Q" | "s" | "day" | "hour" | "minute" | "month" | "second" | "year" | "M" | "m" | "y" | "date" | "d" | "week" | "weeks" | "months" | "h" | "ms" | "millisecond" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "years" | "dates" | "w" | "quarter" | "quarters" | undefined, float?: boolean | undefined) => number;
         valueOf: () => number;
         unix: () => number;
         daysInMonth: () => number;
@@ -186,7 +186,7 @@ declare const _default: import("vue").DefineComponent<{
         isSameOrBefore: (date: string | number | Date | dayjs.Dayjs | null | undefined, unit?: dayjs.OpUnitType | undefined) => boolean;
     }>;
     showTime: import("vue").ComputedRef<boolean>;
-    t: import("element-plus/es/hooks").Translator;
+    t: import("@element-plus/hooks").Translator;
     minVisibleDate: import("vue").ComputedRef<any>;
     maxVisibleDate: import("vue").ComputedRef<any>;
     minVisibleTime: import("vue").ComputedRef<any>;
@@ -202,7 +202,7 @@ 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" | "pick" | "set-picker-option")[], "pick" | "calendar-change" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("calendar-change" | "pick" | "set-picker-option")[], "calendar-change" | "pick" | "set-picker-option", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     unlinkPanels?: unknown;
     parsedValue?: unknown;
     type?: unknown;
@@ -212,8 +212,8 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     parsedValue?: dayjs.Dayjs[] | undefined;
 }> & {
-    onPick?: ((...args: any[]) => any) | undefined;
     "onCalendar-change"?: ((...args: any[]) => any) | undefined;
+    onPick?: ((...args: any[]) => any) | undefined;
     "onSet-picker-option"?: ((...args: any[]) => any) | undefined;
 }, {
     unlinkPanels: boolean;

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

@@ -24,7 +24,7 @@ declare const _default: import("vue").DefineComponent<{
     leftPrevYear: () => void;
     rightNextYear: () => void;
     rightPrevYear: () => void;
-    t: import("element-plus/es/hooks").Translator;
+    t: import("@element-plus/hooks").Translator;
     leftDate: import("vue").Ref<{
         clone: () => dayjs.Dayjs;
         isValid: () => boolean;
@@ -67,7 +67,7 @@ declare const _default: import("vue").DefineComponent<{
         startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
         endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
         format: (template?: string | undefined) => string;
-        diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "M" | "s" | "y" | "year" | "month" | "date" | "dates" | "week" | "weeks" | "months" | "hours" | "minutes" | "seconds" | "h" | "day" | "millisecond" | "second" | "minute" | "hour" | "milliseconds" | "days" | "years" | "d" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+        diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "Q" | "s" | "day" | "hour" | "minute" | "month" | "second" | "year" | "M" | "m" | "y" | "date" | "d" | "week" | "weeks" | "months" | "h" | "ms" | "millisecond" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "years" | "dates" | "w" | "quarter" | "quarters" | undefined, float?: boolean | undefined) => number;
         valueOf: () => number;
         unix: () => number;
         daysInMonth: () => number;
@@ -138,7 +138,7 @@ declare const _default: import("vue").DefineComponent<{
         startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
         endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
         format: (template?: string | undefined) => string;
-        diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "M" | "s" | "y" | "year" | "month" | "date" | "dates" | "week" | "weeks" | "months" | "hours" | "minutes" | "seconds" | "h" | "day" | "millisecond" | "second" | "minute" | "hour" | "milliseconds" | "days" | "years" | "d" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+        diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "Q" | "s" | "day" | "hour" | "minute" | "month" | "second" | "year" | "M" | "m" | "y" | "date" | "d" | "week" | "weeks" | "months" | "h" | "ms" | "millisecond" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "years" | "dates" | "w" | "quarter" | "quarters" | undefined, float?: boolean | undefined) => number;
         valueOf: () => number;
         unix: () => number;
         daysInMonth: () => number;