@element-plus/nightly 0.0.20260805 → 0.0.20260807

package/es/components/collapse/src/collapse.vue.d.ts

@@ -10,8 +10,8 @@ declare const __VLS_base: _$vue.DefineComponent<CollapseProps, {
   /** @description active names */activeNames: _$vue.Ref<(string | number)[], (string | number)[]>; /** @description set active names */
   setActiveNames: (_activeNames: CollapseActiveName[]) => void;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  change: (value: CollapseModelValue) => void;
   "update:modelValue": (value: CollapseModelValue) => void;
+  change: (value: CollapseModelValue) => void;
 }, string, _$vue.PublicProps, Readonly<CollapseProps> & Readonly<{
   onChange?: ((value: CollapseModelValue) => any) | undefined;
   "onUpdate:modelValue"?: ((value: CollapseModelValue) => any) | undefined;

package/es/components/color-picker/src/color-picker.d.ts

@@ -84,7 +84,7 @@ declare const colorPickerProps: {
   readonly id: StringConstructor;
   readonly showAlpha: BooleanConstructor;
   readonly colorFormat: {
-    readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "name" | "hsl" | "hsv" | "cmyk") | (() => ColorFormats) | (((new (...args: any[]) => "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "name" | "hsl" | "hsv" | "cmyk") | (() => ColorFormats)) | null)[], unknown, unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => "name" | "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "hsl" | "hsv" | "cmyk") | (() => ColorFormats) | (((new (...args: any[]) => "name" | "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "hsl" | "hsv" | "cmyk") | (() => ColorFormats)) | null)[], unknown, unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -92,7 +92,7 @@ declare const colorPickerProps: {
   readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
   readonly clearable: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

package/es/components/color-picker/src/color-picker.vue.d.ts

@@ -30,30 +30,30 @@ declare const __VLS_export: _$vue.DefineComponent<ColorPickerProps, {
    */
   blur: typeof blur;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  change: (val: string | null) => void;
   clear: () => void;
-  "update:modelValue": (val: string | null) => void;
   blur: (evt: FocusEvent) => void;
   focus: (evt: FocusEvent) => void;
+  "update:modelValue": (val: string | null) => void;
+  change: (val: string | null) => void;
   activeChange: (val: string | null) => void;
 }, string, _$vue.PublicProps, Readonly<ColorPickerProps> & Readonly<{
-  onChange?: ((val: string | null) => any) | undefined;
   onClear?: (() => any) | undefined;
-  "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
   onBlur?: ((evt: FocusEvent) => any) | undefined;
+  onChange?: ((val: string | null) => any) | undefined;
   onFocus?: ((evt: FocusEvent) => any) | undefined;
+  "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
   onActiveChange?: ((val: string | null) => any) | undefined;
 }>, {
-  teleported: boolean;
-  modelValue: string | null;
   disabled: boolean;
   valueOnClear: string | number | boolean | Function | null;
-  clearable: boolean;
+  tabindex: string | number;
   popperClass: string | false | Record<string, any> | ClassValue[] | null;
   popperStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;
   persistent: boolean;
+  teleported: boolean;
+  modelValue: string | null;
+  clearable: boolean;
   validateEvent: boolean;
-  tabindex: string | number;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

package/es/components/color-picker-panel/src/color-picker-panel.d.ts

@@ -53,7 +53,7 @@ declare const colorPickerPanelProps: {
   readonly border: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly showAlpha: BooleanConstructor;
   readonly colorFormat: {
-    readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "name" | "hsl" | "hsv" | "cmyk") | (() => ColorFormats) | (((new (...args: any[]) => "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "name" | "hsl" | "hsv" | "cmyk") | (() => ColorFormats)) | null)[], unknown, unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<(new (...args: any[]) => "name" | "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "hsl" | "hsv" | "cmyk") | (() => ColorFormats) | (((new (...args: any[]) => "name" | "rgb" | "prgb" | "hex" | "hex3" | "hex4" | "hex6" | "hex8" | "hsl" | "hsv" | "cmyk") | (() => ColorFormats)) | null)[], unknown, unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

package/es/components/color-picker-panel/src/color-picker-panel.vue.d.ts

@@ -28,9 +28,9 @@ declare const __VLS_base: _$vue.DefineComponent<ColorPickerPanelProps, {
 }, string, _$vue.PublicProps, Readonly<ColorPickerPanelProps> & Readonly<{
   "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
 }>, {
+  border: boolean;
   modelValue: string | null;
   validateEvent: boolean;
-  border: boolean;
   showAlpha: boolean;
   hueSliderClass: string | false | Record<string, any> | ClassValue[] | null;
   hueSliderStyle: string | false | _$vue.CSSProperties | _$vue.StyleValue[] | null;

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

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

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

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

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

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

package/es/components/countdown/src/countdown.vue.d.ts

@@ -11,8 +11,8 @@ declare const __VLS_base: _$vue.DefineComponent<CountdownProps, {
    */
   displayValue: _$vue.ComputedRef<string>;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  change: (value: number) => void;
   finish: () => void;
+  change: (value: number) => void;
 }, string, _$vue.PublicProps, Readonly<CountdownProps> & Readonly<{
   onChange?: ((value: number) => any) | undefined;
   onFinish?: (() => any) | undefined;

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

@@ -8,7 +8,7 @@ import * as _$vue_jsx_runtime0 from "vue/jsx-runtime";
 
 //#region ../../packages/components/date-picker/src/date-picker.d.ts
 declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
-  readonly type: EpPropFinalized<(new (...args: any[]) => "year" | "month" | "months" | "date" | "years" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType) | (((new (...args: any[]) => "year" | "month" | "months" | "date" | "years" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType)) | null)[], unknown, unknown, "date", boolean>;
+  readonly type: EpPropFinalized<(new (...args: any[]) => "year" | "months" | "years" | "month" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType) | (((new (...args: any[]) => "year" | "months" | "years" | "month" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType)) | null)[], unknown, unknown, "date", boolean>;
   readonly showNow: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly showConfirm: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly showFooter: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
@@ -34,7 +34,7 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly unlinkPanels: BooleanConstructor;
   readonly singlePanel: BooleanConstructor;
-  readonly placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, "bottom", boolean>;
+  readonly placement: EpPropFinalized<(new (...args: any[]) => "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, "bottom", boolean>;
   readonly fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, readonly ["bottom", "top", "right", "left"], boolean>;
   readonly disabledHours: {
     readonly type: _$vue.PropType<GetDisabledHours>;
@@ -79,7 +79,7 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   readonly saveOnBlur: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly prefixIcon: EpPropFinalized<(new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component) | (((new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component)) | null)[], unknown, unknown, "", boolean>;
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -88,7 +88,7 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
   readonly placeholder: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
   readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => {}, boolean>;
-  readonly modelValue: EpPropFinalized<(new (...args: any[]) => string | number | string[] | Date | Date[] | number[]) | (() => ModelValueType | null) | (((new (...args: any[]) => string | number | string[] | Date | Date[] | number[]) | (() => ModelValueType | null)) | null)[], unknown, unknown, "", boolean>;
+  readonly modelValue: EpPropFinalized<(new (...args: any[]) => string | number | Date | string[] | number[] | Date[]) | (() => ModelValueType | null) | (((new (...args: any[]) => string | number | Date | string[] | number[] | Date[]) | (() => ModelValueType | null)) | null)[], unknown, unknown, "", boolean>;
   readonly rangeSeparator: EpPropFinalized<StringConstructor, unknown, unknown, "-", boolean>;
   readonly startPlaceholder: StringConstructor;
   readonly endPlaceholder: StringConstructor;
@@ -106,7 +106,7 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   };
   readonly isRange: BooleanConstructor;
 }>, () => _$vue_jsx_runtime0.JSX.Element, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
-  readonly type: EpPropFinalized<(new (...args: any[]) => "year" | "month" | "months" | "date" | "years" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType) | (((new (...args: any[]) => "year" | "month" | "months" | "date" | "years" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType)) | null)[], unknown, unknown, "date", boolean>;
+  readonly type: EpPropFinalized<(new (...args: any[]) => "year" | "months" | "years" | "month" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType) | (((new (...args: any[]) => "year" | "months" | "years" | "month" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType)) | null)[], unknown, unknown, "date", boolean>;
   readonly showNow: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly showConfirm: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly showFooter: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
@@ -132,7 +132,7 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly unlinkPanels: BooleanConstructor;
   readonly singlePanel: BooleanConstructor;
-  readonly placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, "bottom", boolean>;
+  readonly placement: EpPropFinalized<(new (...args: any[]) => "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, "bottom", boolean>;
   readonly fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, readonly ["bottom", "top", "right", "left"], boolean>;
   readonly disabledHours: {
     readonly type: _$vue.PropType<GetDisabledHours>;
@@ -177,7 +177,7 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   readonly saveOnBlur: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly prefixIcon: EpPropFinalized<(new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component) | (((new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component)) | null)[], unknown, unknown, "", boolean>;
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -186,7 +186,7 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
   readonly placeholder: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
   readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => {}, boolean>;
-  readonly modelValue: EpPropFinalized<(new (...args: any[]) => string | number | string[] | Date | Date[] | number[]) | (() => ModelValueType | null) | (((new (...args: any[]) => string | number | string[] | Date | Date[] | number[]) | (() => ModelValueType | null)) | null)[], unknown, unknown, "", boolean>;
+  readonly modelValue: EpPropFinalized<(new (...args: any[]) => string | number | Date | string[] | number[] | Date[]) | (() => ModelValueType | null) | (((new (...args: any[]) => string | number | Date | string[] | number[] | Date[]) | (() => ModelValueType | null)) | null)[], unknown, unknown, "", boolean>;
   readonly rangeSeparator: EpPropFinalized<StringConstructor, unknown, unknown, "-", boolean>;
   readonly startPlaceholder: StringConstructor;
   readonly endPlaceholder: StringConstructor;
@@ -206,22 +206,22 @@ declare const _default: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
 }>> & Readonly<{
   "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
-  readonly type: EpPropMergeType<(new (...args: any[]) => "year" | "month" | "months" | "date" | "years" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType) | (((new (...args: any[]) => "year" | "month" | "months" | "date" | "years" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType)) | null)[], unknown, unknown>;
-  readonly modelValue: EpPropMergeType<(new (...args: any[]) => string | number | string[] | Date | Date[] | number[]) | (() => ModelValueType | null) | (((new (...args: any[]) => string | number | string[] | Date | Date[] | number[]) | (() => ModelValueType | null)) | null)[], unknown, unknown>;
-  readonly placeholder: string;
   readonly disabled: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  readonly type: EpPropMergeType<(new (...args: any[]) => "year" | "months" | "years" | "month" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType) | (((new (...args: any[]) => "year" | "months" | "years" | "month" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType)) | null)[], unknown, unknown>;
+  readonly placeholder: string;
   readonly valueOnClear: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown>;
-  readonly clearable: EpPropMergeType<BooleanConstructor, unknown, unknown>;
-  readonly clearIcon: EpPropMergeType<(new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component) | (((new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component)) | null)[], unknown, unknown>;
-  readonly placement: EpPropMergeType<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown>;
-  readonly fallbackPlacements: Placement[];
-  readonly popperOptions: Partial<Options>;
+  readonly tabindex: EpPropMergeType<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown>;
   readonly popperClass: ClassValue;
   readonly popperStyle: _$vue.StyleValue;
-  readonly validateEvent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  readonly fallbackPlacements: Placement[];
+  readonly placement: EpPropMergeType<(new (...args: any[]) => "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown>;
+  readonly popperOptions: Partial<Options>;
+  readonly modelValue: EpPropMergeType<(new (...args: any[]) => string | number | Date | string[] | number[] | Date[]) | (() => ModelValueType | null) | (((new (...args: any[]) => string | number | Date | string[] | number[] | Date[]) | (() => ModelValueType | null)) | null)[], unknown, unknown>;
   readonly readonly: boolean;
+  readonly clearable: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  readonly clearIcon: EpPropMergeType<(new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component) | (((new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component)) | null)[], unknown, unknown>;
   readonly prefixIcon: EpPropMergeType<(new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component) | (((new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component)) | null)[], unknown, unknown>;
-  readonly tabindex: EpPropMergeType<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown>;
+  readonly validateEvent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly automaticDropdown: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly editable: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly saveOnBlur: EpPropMergeType<BooleanConstructor, unknown, unknown>;

package/es/components/date-picker/src/date-picker.mjs

@@ -1,10 +1,9 @@
 import { UPDATE_MODEL_EVENT } from "../../../constants/event.mjs";
 import { DEFAULT_FORMATS_DATEPICKER, PICKER_POPPER_OPTIONS_INJECTION_KEY } from "../../time-picker/src/constants.mjs";
 import picker_default from "../../time-picker/src/common/picker.mjs";
-import { ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from "../../date-picker-panel/src/constants.mjs";
 import { ElDatePickerPanel } from "../../date-picker-panel/index.mjs";
 import { datePickerProps } from "./props.mjs";
-import { computed, createVNode, defineComponent, isVNode, mergeProps, provide, reactive, ref, toRef } from "vue";
+import { createVNode, defineComponent, isVNode, mergeProps, provide, reactive, ref, toRef } from "vue";
 //#region ../../packages/components/date-picker/src/date-picker.tsx
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
@@ -15,9 +14,6 @@ var date_picker_default = /* @__PURE__ */ defineComponent({
 	props: datePickerProps,
 	emits: [UPDATE_MODEL_EVENT],
 	setup(props, { expose, emit, slots }) {
-		provide(ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY, computed(() => {
-			return !props.format;
-		}));
 		provide(PICKER_POPPER_OPTIONS_INJECTION_KEY, reactive(toRef(props, "popperOptions")));
 		const commonPicker = ref();
 		expose({

package/es/components/date-picker/src/date-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.mjs","names":["computed","defineComponent","provide","reactive","ref","toRef","mergeProps","_mergeProps","isVNode","_isVNode","createVNode","_createVNode","CommonPicker","DEFAULT_FORMATS_DATE","DEFAULT_FORMATS_DATEPICKER","PICKER_POPPER_OPTIONS_INJECTION_KEY","UPDATE_MODEL_EVENT","ElDatePickerPanel","ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY","datePickerProps","_isSlot","s","Object","prototype","toString","call","name","install","props","emits","setup","expose","emit","slots","isDefaultFormat","format","commonPicker","refProps","focus","value","blur","handleOpen","handleClose","onModelValueUpdated","val","type","default","scopedProps","disabled","editable"],"sources":["../../../../../../packages/components/date-picker/src/date-picker.tsx"],"sourcesContent":["import { computed, defineComponent, provide, reactive, ref, toRef } from 'vue'\nimport {\n  CommonPicker,\n  DEFAULT_FORMATS_DATE,\n  DEFAULT_FORMATS_DATEPICKER,\n  PICKER_POPPER_OPTIONS_INJECTION_KEY,\n} from '@element-plus/components/time-picker'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport {\n  ElDatePickerPanel,\n  ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY,\n} from '@element-plus/components/date-picker-panel'\nimport { datePickerProps } from './props'\n\nimport type {\n  DateModelType,\n  SingleOrRange,\n} from '@element-plus/components/time-picker'\nimport type { DatePickerExpose } from './instance'\n\nexport default defineComponent({\n  name: 'ElDatePicker',\n  install: null,\n  props: datePickerProps,\n  emits: [UPDATE_MODEL_EVENT],\n  setup(props, { expose, emit, slots }) {\n    const isDefaultFormat = computed(() => {\n      return !props.format\n    })\n    provide(ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY, isDefaultFormat)\n    provide(\n      PICKER_POPPER_OPTIONS_INJECTION_KEY,\n      reactive(toRef(props, 'popperOptions'))\n    )\n    const commonPicker = ref<InstanceType<typeof CommonPicker>>()\n    const refProps: DatePickerExpose = {\n      focus: () => {\n        commonPicker.value?.focus()\n      },\n      blur: () => {\n        commonPicker.value?.blur()\n      },\n      handleOpen: () => {\n        commonPicker.value?.handleOpen()\n      },\n      handleClose: () => {\n        commonPicker.value?.handleClose()\n      },\n    }\n\n    expose(refProps)\n\n    const onModelValueUpdated = (val: SingleOrRange<DateModelType> | null) => {\n      emit(UPDATE_MODEL_EVENT, val)\n    }\n\n    return () => {\n      // since props always have all defined keys on it, {format, ...props} will always overwrite format\n      // pick props.format or provide default value here before spreading\n      const format =\n        props.format ??\n        (DEFAULT_FORMATS_DATEPICKER[props.type] || DEFAULT_FORMATS_DATE)\n\n      return (\n        <CommonPicker\n          {...props}\n          format={format}\n          type={props.type}\n          ref={commonPicker}\n          onUpdate:modelValue={onModelValueUpdated}\n        >\n          {{\n            default: (scopedProps: /**FIXME: remove any type */ any) => (\n              <ElDatePickerPanel\n                disabled={props.disabled}\n                editable={props.editable}\n                border={false}\n                {...scopedProps}\n              >\n                {slots}\n              </ElDatePickerPanel>\n            ),\n            'range-separator': slots['range-separator'],\n          }}\n        </CommonPicker>\n      )\n    }\n  },\n})\n"],"mappings":";;;;;;;;AAYyC,SAAAoB,QAAAC,GAAA;CAAA,OAAA,OAAAA,MAAA,cAAAC,OAAAC,UAAAC,SAAAC,KAAAJ,EAAA,KAAA,qBAAA,CAAAZ,QAAAY,EAAA;;AAQzC,IAAA,sBAAepB,gCAAgB;CAC7ByB,MAAM;CACNC,SAAS;CACTC,OAAOT;CACPU,OAAO,CAACb,mBAAmB;CAC3Bc,MAAMF,OAAO,EAAEG,QAAQC,MAAMC,SAAS;EAIpC/B,QAAQgB,6CAHgBlB,eAAe;GACrC,OAAO,CAAC4B,MAAMO;IAEoD,CAAC;EACrEjC,QACEa,qCACAZ,SAASE,MAAMuB,OAAO,gBAAgB,CACxC,CAAC;EACD,MAAMQ,eAAehC,KAAwC;EAgB7D2B,OAAOM;GAdLC,aAAa;IACXF,aAAaG,OAAOD,OAAO;;GAE7BE,YAAY;IACVJ,aAAaG,OAAOC,MAAM;;GAE5BC,kBAAkB;IAChBL,aAAaG,OAAOE,YAAY;;GAElCC,mBAAmB;IACjBN,aAAaG,OAAOG,aAAa;;GAItB,CAAC;EAEhB,MAAMC,uBAAuBC,QAA6C;GACxEZ,KAAKhB,oBAAoB4B,IAAI;;EAG/B,aAAa;GAOX,OAAAjC,YAAAC,gBAAAL,WAEQqB,OAAK;IAAA,UALXA,MAAMO,WACLrB,2BAA2Bc,MAAMiB,SAAAA;IAKlB,QACRjB,MAAMiB;IAAI,OACXT;IAAY,uBACIO;IAAmB,CAAA,EAAA;IAGtCG,UAAUC,gBAA6CpC,YAAAM,mBAAAV,WAAA;KAAA,YAEzCqB,MAAMoB;KAAQ,YACdpB,MAAMqB;KAAQ,UAChB;KAAK,EACTF,YAAW,EAAA3B,QAEda,MAAK,GAALA,QAAK,EAAAa,eAAA,CAALb,MAAK,EAAA,CAET;IACD,mBAAmBA,MAAM;IAAkB,CAAA;;;CAMtD,CAAC"}
+{"version":3,"file":"date-picker.mjs","names":["defineComponent","provide","reactive","ref","toRef","mergeProps","_mergeProps","isVNode","_isVNode","createVNode","_createVNode","CommonPicker","DEFAULT_FORMATS_DATE","DEFAULT_FORMATS_DATEPICKER","PICKER_POPPER_OPTIONS_INJECTION_KEY","UPDATE_MODEL_EVENT","ElDatePickerPanel","datePickerProps","_isSlot","s","Object","prototype","toString","call","name","install","props","emits","setup","expose","emit","slots","commonPicker","refProps","focus","value","blur","handleOpen","handleClose","onModelValueUpdated","val","format","type","default","scopedProps","disabled","editable"],"sources":["../../../../../../packages/components/date-picker/src/date-picker.tsx"],"sourcesContent":["import { defineComponent, provide, reactive, ref, toRef } from 'vue'\nimport {\n  CommonPicker,\n  DEFAULT_FORMATS_DATE,\n  DEFAULT_FORMATS_DATEPICKER,\n  PICKER_POPPER_OPTIONS_INJECTION_KEY,\n} from '@element-plus/components/time-picker'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { ElDatePickerPanel } from '@element-plus/components/date-picker-panel'\nimport { datePickerProps } from './props'\n\nimport type {\n  DateModelType,\n  SingleOrRange,\n} from '@element-plus/components/time-picker'\nimport type { DatePickerExpose } from './instance'\n\nexport default defineComponent({\n  name: 'ElDatePicker',\n  install: null,\n  props: datePickerProps,\n  emits: [UPDATE_MODEL_EVENT],\n  setup(props, { expose, emit, slots }) {\n    provide(\n      PICKER_POPPER_OPTIONS_INJECTION_KEY,\n      reactive(toRef(props, 'popperOptions'))\n    )\n    const commonPicker = ref<InstanceType<typeof CommonPicker>>()\n    const refProps: DatePickerExpose = {\n      focus: () => {\n        commonPicker.value?.focus()\n      },\n      blur: () => {\n        commonPicker.value?.blur()\n      },\n      handleOpen: () => {\n        commonPicker.value?.handleOpen()\n      },\n      handleClose: () => {\n        commonPicker.value?.handleClose()\n      },\n    }\n\n    expose(refProps)\n\n    const onModelValueUpdated = (val: SingleOrRange<DateModelType> | null) => {\n      emit(UPDATE_MODEL_EVENT, val)\n    }\n\n    return () => {\n      // since props always have all defined keys on it, {format, ...props} will always overwrite format\n      // pick props.format or provide default value here before spreading\n      const format =\n        props.format ??\n        (DEFAULT_FORMATS_DATEPICKER[props.type] || DEFAULT_FORMATS_DATE)\n\n      return (\n        <CommonPicker\n          {...props}\n          format={format}\n          type={props.type}\n          ref={commonPicker}\n          onUpdate:modelValue={onModelValueUpdated}\n        >\n          {{\n            default: (scopedProps: /**FIXME: remove any type */ any) => (\n              <ElDatePickerPanel\n                disabled={props.disabled}\n                editable={props.editable}\n                border={false}\n                {...scopedProps}\n              >\n                {slots}\n              </ElDatePickerPanel>\n            ),\n            'range-separator': slots['range-separator'],\n          }}\n        </CommonPicker>\n      )\n    }\n  },\n})\n"],"mappings":";;;;;;;AASyC,SAAAkB,QAAAC,GAAA;CAAA,OAAA,OAAAA,MAAA,cAAAC,OAAAC,UAAAC,SAAAC,KAAAJ,EAAA,KAAA,qBAAA,CAAAX,QAAAW,EAAA;;AAQzC,IAAA,sBAAenB,gCAAgB;CAC7BwB,MAAM;CACNC,SAAS;CACTC,OAAOT;CACPU,OAAO,CAACZ,mBAAmB;CAC3Ba,MAAMF,OAAO,EAAEG,QAAQC,MAAMC,SAAS;EACpC9B,QACEa,qCACAZ,SAASE,MAAMsB,OAAO,gBAAgB,CACxC,CAAC;EACD,MAAMM,eAAe7B,KAAwC;EAgB7D0B,OAAOI;GAdLC,aAAa;IACXF,aAAaG,OAAOD,OAAO;;GAE7BE,YAAY;IACVJ,aAAaG,OAAOC,MAAM;;GAE5BC,kBAAkB;IAChBL,aAAaG,OAAOE,YAAY;;GAElCC,mBAAmB;IACjBN,aAAaG,OAAOG,aAAa;;GAItB,CAAC;EAEhB,MAAMC,uBAAuBC,QAA6C;GACxEV,KAAKf,oBAAoByB,IAAI;;EAG/B,aAAa;GAOX,OAAA9B,YAAAC,gBAAAL,WAEQoB,OAAK;IAAA,UALXA,MAAMe,WACL5B,2BAA2Ba,MAAMgB,SAAAA;IAKlB,QACRhB,MAAMgB;IAAI,OACXV;IAAY,uBACIO;IAAmB,CAAA,EAAA;IAGtCI,UAAUC,gBAA6ClC,YAAAM,mBAAAV,WAAA;KAAA,YAEzCoB,MAAMmB;KAAQ,YACdnB,MAAMoB;KAAQ,UAChB;KAAK,EACTF,YAAW,EAAA1B,QAEda,MAAK,GAALA,QAAK,EAAAY,eAAA,CAALZ,MAAK,EAAA,CAET;IACD,mBAAmBA,MAAM;IAAkB,CAAA;;;CAMtD,CAAC"}

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

@@ -8,7 +8,7 @@ import { ExtractPropTypes, ExtractPublicPropTypes } from "vue";
 
 //#region ../../packages/components/date-picker/src/props.d.ts
 declare const datePickerProps: {
-  readonly type: EpPropFinalized<(new (...args: any[]) => "year" | "month" | "months" | "date" | "years" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType) | (((new (...args: any[]) => "year" | "month" | "months" | "date" | "years" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType)) | null)[], unknown, unknown, "date", boolean>;
+  readonly type: EpPropFinalized<(new (...args: any[]) => "year" | "months" | "years" | "month" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType) | (((new (...args: any[]) => "year" | "months" | "years" | "month" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange" | "yearrange") | (() => DatePickerType)) | null)[], unknown, unknown, "date", boolean>;
   readonly showNow: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly showConfirm: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly showFooter: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
@@ -34,7 +34,7 @@ declare const datePickerProps: {
   readonly validateEvent: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly unlinkPanels: BooleanConstructor;
   readonly singlePanel: BooleanConstructor;
-  readonly placement: EpPropFinalized<(new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "top" | "auto" | "bottom" | "left" | "right" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, "bottom", boolean>;
+  readonly placement: EpPropFinalized<(new (...args: any[]) => "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement) | (((new (...args: any[]) => "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => Placement)) | null)[], Placement, unknown, "bottom", boolean>;
   readonly fallbackPlacements: EpPropFinalized<(new (...args: any[]) => Placement[]) | (() => Placement[]) | (((new (...args: any[]) => Placement[]) | (() => Placement[])) | null)[], unknown, unknown, readonly ["bottom", "top", "right", "left"], boolean>;
   readonly disabledHours: {
     readonly type: _$vue.PropType<GetDisabledHours>;
@@ -79,7 +79,7 @@ declare const datePickerProps: {
   readonly saveOnBlur: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly prefixIcon: EpPropFinalized<(new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component) | (((new (...args: any[]) => (string | _$vue.Component) & {}) | (() => string | _$vue.Component)) | null)[], unknown, unknown, "", boolean>;
   readonly size: {
-    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+    readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -88,7 +88,7 @@ declare const datePickerProps: {
   readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
   readonly placeholder: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
   readonly popperOptions: EpPropFinalized<(new (...args: any[]) => Partial<Options>) | (() => Partial<Options>) | (((new (...args: any[]) => Partial<Options>) | (() => Partial<Options>)) | null)[], unknown, unknown, () => {}, boolean>;
-  readonly modelValue: EpPropFinalized<(new (...args: any[]) => string | number | string[] | Date | Date[] | number[]) | (() => ModelValueType | null) | (((new (...args: any[]) => string | number | string[] | Date | Date[] | number[]) | (() => ModelValueType | null)) | null)[], unknown, unknown, "", boolean>;
+  readonly modelValue: EpPropFinalized<(new (...args: any[]) => string | number | Date | string[] | number[] | Date[]) | (() => ModelValueType | null) | (((new (...args: any[]) => string | number | Date | string[] | number[] | Date[]) | (() => ModelValueType | null)) | null)[], unknown, unknown, "", boolean>;
   readonly rangeSeparator: EpPropFinalized<StringConstructor, unknown, unknown, "-", boolean>;
   readonly startPlaceholder: StringConstructor;
   readonly endPlaceholder: StringConstructor;

package/es/components/date-picker-panel/index.d.ts

@@ -1,11 +1,11 @@
 import { SFCWithInstall } from "../../utils/vue/typescript.js";
 import { DateCell, DatePickerType } from "./src/types.js";
 import _default from "./src/date-picker-panel.js";
-import { ROOT_PICKER_INJECTION_KEY, ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from "./src/constants.js";
+import { ROOT_PICKER_INJECTION_KEY } from "./src/constants.js";
 import { DatePickerPanelProps, DatePickerPanelPropsPublic, datePickerPanelProps } from "./src/props/date-picker-panel.js";
 import { DatePickerPanelInstance } from "./src/instance.js";
 
 //#region ../../packages/components/date-picker-panel/index.d.ts
 declare const ElDatePickerPanel: SFCWithInstall<typeof _default>;
 //#endregion
-export { DateCell, type DatePickerPanelInstance, DatePickerPanelProps, DatePickerPanelPropsPublic, DatePickerType, ElDatePickerPanel, ElDatePickerPanel as default, ROOT_PICKER_INJECTION_KEY, ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY, datePickerPanelProps };
+export { DateCell, type DatePickerPanelInstance, DatePickerPanelProps, DatePickerPanelPropsPublic, DatePickerType, ElDatePickerPanel, ElDatePickerPanel as default, ROOT_PICKER_INJECTION_KEY, datePickerPanelProps };

package/es/components/date-picker-panel/index.mjs

@@ -1,10 +1,10 @@
 import { withInstall } from "../../utils/vue/install.mjs";
 import { datePickerPanelProps } from "./src/props/date-picker-panel.mjs";
-import { ROOT_PICKER_INJECTION_KEY, ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY } from "./src/constants.mjs";
+import { ROOT_PICKER_INJECTION_KEY } from "./src/constants.mjs";
 import date_picker_panel_default from "./src/date-picker-panel.mjs";
 //#region ../../packages/components/date-picker-panel/index.ts
 const ElDatePickerPanel = withInstall(date_picker_panel_default);
 //#endregion
-export { ElDatePickerPanel, ElDatePickerPanel as default, ROOT_PICKER_INJECTION_KEY, ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY, datePickerPanelProps };
+export { ElDatePickerPanel, ElDatePickerPanel as default, ROOT_PICKER_INJECTION_KEY, datePickerPanelProps };
 
 //# sourceMappingURL=index.mjs.map

package/es/components/date-picker-panel/src/composables/use-basic-date-table.d.ts

@@ -164,7 +164,7 @@ declare const useBasicDateTable: (props: BasicDateTableProps, emit: SetupContext
       isSameOrAfter: (date?: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
       isSameOrBefore: (date?: dayjs.ConfigType, unit?: dayjs.OpUnitType) => boolean;
     } | undefined;
-    type?: ("prev-month" | "next-month" | "today" | "week" | "normal") | undefined;
+    type?: ("normal" | "today" | "week" | "prev-month" | "next-month") | undefined;
   }[][]>;
   tbodyRef: _$vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;
   currentCellRef: _$vue.Ref<HTMLElement | undefined, HTMLElement | undefined>;

package/es/components/date-picker-panel/src/constants.d.ts

@@ -7,6 +7,5 @@ interface DatePickerContext {
   pickerNs: UseNamespaceReturn;
 }
 declare const ROOT_PICKER_INJECTION_KEY: InjectionKey<DatePickerContext>;
-declare const ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY = "ElIsDefaultFormat";
 //#endregion
-export { ROOT_PICKER_INJECTION_KEY, ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY };
+export { ROOT_PICKER_INJECTION_KEY };

package/es/components/date-picker-panel/src/constants.mjs

@@ -1,7 +1,6 @@
 //#region ../../packages/components/date-picker-panel/src/constants.ts
 const ROOT_PICKER_INJECTION_KEY = Symbol("rootPickerContextKey");
-const ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY = "ElIsDefaultFormat";
 //#endregion
-export { ROOT_PICKER_INJECTION_KEY, ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY };
+export { ROOT_PICKER_INJECTION_KEY };
 
 //# sourceMappingURL=constants.mjs.map

package/es/components/date-picker-panel/src/constants.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"constants.mjs","names":[],"sources":["../../../../../../packages/components/date-picker-panel/src/constants.ts"],"sourcesContent":["import type { InjectionKey, SetupContext } from 'vue'\nimport type { UseNamespaceReturn } from '@element-plus/hooks'\n\ninterface DatePickerContext {\n  slots: SetupContext['slots']\n  pickerNs: UseNamespaceReturn\n}\n\nexport const ROOT_PICKER_INJECTION_KEY: InjectionKey<DatePickerContext> =\n  Symbol('rootPickerContextKey')\n\nexport const ROOT_PICKER_IS_DEFAULT_FORMAT_INJECTION_KEY = 'ElIsDefaultFormat'\n"],"mappings":";AAQA,MAAa,4BACX,OAAO,uBAAuB;AAEhC,MAAa,8CAA8C"}
+{"version":3,"file":"constants.mjs","names":[],"sources":["../../../../../../packages/components/date-picker-panel/src/constants.ts"],"sourcesContent":["import type { InjectionKey, SetupContext } from 'vue'\nimport type { UseNamespaceReturn } from '@element-plus/hooks'\n\ninterface DatePickerContext {\n  slots: SetupContext['slots']\n  pickerNs: UseNamespaceReturn\n}\n\nexport const ROOT_PICKER_INJECTION_KEY: InjectionKey<DatePickerContext> =\n  Symbol('rootPickerContextKey')\n"],"mappings":";AAQA,MAAa,4BACX,OAAO,uBAAuB"}

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

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