element-plus-secondary 0.1.4 → 0.1.6

package/es/components/color-picker/src/composables/use-alpha-slider.d.ts

@@ -0,0 +1,22 @@
+import type { AlphaSliderProps } from '../props/alpha-slider';
+export declare const useAlphaSlider: (props: AlphaSliderProps) => {
+    thumb: import("vue").ShallowRef<HTMLElement | undefined>;
+    bar: import("vue").ShallowRef<HTMLElement | undefined>;
+    handleDrag: (event: MouseEvent | TouchEvent) => void;
+    handleClick: (event: MouseEvent | TouchEvent) => void;
+};
+export declare const useAlphaSliderDOM: (props: AlphaSliderProps, { bar, thumb, handleDrag, }: Pick<ReturnType<typeof useAlphaSlider>, 'bar' | 'thumb' | 'handleDrag'>) => {
+    customInput: import("vue").Ref<number>;
+    rootKls: import("vue").ComputedRef<string[]>;
+    inputbKls: import("vue").ComputedRef<string>;
+    barKls: import("vue").ComputedRef<string>;
+    barStyle: import("vue").ComputedRef<{
+        background: string | undefined;
+    }>;
+    thumbKls: import("vue").ComputedRef<string>;
+    thumbStyle: import("vue").ComputedRef<{
+        left: string | undefined;
+        top: string | undefined;
+    }>;
+    update: () => void;
+};

package/es/components/color-picker/src/composables/use-alpha-slider.mjs

@@ -0,0 +1,134 @@
+import { getCurrentInstance, shallowRef, ref, watch, onMounted, computed } from 'vue';
+import '../../../../utils/index.mjs';
+import '../../../../hooks/index.mjs';
+import { draggable } from '../utils/draggable.mjs';
+import { getClientXY } from '../../../../utils/dom/position.mjs';
+import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
+import { addUnit } from '../../../../utils/dom/style.mjs';
+
+const useAlphaSlider = (props) => {
+  const instance = getCurrentInstance();
+  const thumb = shallowRef();
+  const bar = shallowRef();
+  function handleClick(event) {
+    const target = event.target;
+    if (target !== thumb.value) {
+      handleDrag(event);
+    }
+  }
+  function handleDrag(event) {
+    if (!bar.value || !thumb.value)
+      return;
+    const el = instance.vnode.el;
+    const rect = el.getBoundingClientRect();
+    const { clientX, clientY } = getClientXY(event);
+    if (!props.vertical) {
+      let left = clientX - rect.left;
+      left = Math.max(thumb.value.offsetWidth / 2, left);
+      left = Math.min(left, rect.width - thumb.value.offsetWidth / 2);
+      props.color.set("alpha", Math.round((left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 100));
+    } else {
+      let top = clientY - rect.top;
+      top = Math.max(thumb.value.offsetHeight / 2, top);
+      top = Math.min(top, rect.height - thumb.value.offsetHeight / 2);
+      props.color.set("alpha", Math.round((top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 100));
+    }
+  }
+  return {
+    thumb,
+    bar,
+    handleDrag,
+    handleClick
+  };
+};
+const useAlphaSliderDOM = (props, {
+  bar,
+  thumb,
+  handleDrag
+}) => {
+  const instance = getCurrentInstance();
+  const ns = useNamespace("color-alpha-slider");
+  const thumbLeft = ref(0);
+  const thumbTop = ref(0);
+  const background = ref();
+  function getThumbLeft() {
+    if (!thumb.value)
+      return 0;
+    if (props.vertical)
+      return 0;
+    const el = instance.vnode.el;
+    const alpha = props.color.get("alpha");
+    if (!el)
+      return 0;
+    return Math.round(alpha * (el.offsetWidth - thumb.value.offsetWidth / 2) / 100);
+  }
+  function getThumbTop() {
+    if (!thumb.value)
+      return 0;
+    const el = instance.vnode.el;
+    if (!props.vertical)
+      return 0;
+    const alpha = props.color.get("alpha");
+    if (!el)
+      return 0;
+    return Math.round(alpha * (el.offsetHeight - thumb.value.offsetHeight / 2) / 100);
+  }
+  function getBackground() {
+    if (props.color && props.color.value) {
+      const { r, g, b } = props.color.toRgb();
+      return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
+    }
+    return "";
+  }
+  function getCustomValue() {
+    if (!thumb.value)
+      return 0;
+    if (props.vertical)
+      return 0;
+    const el = instance.vnode.el;
+    const alpha = props.color.get("alpha");
+    if (!el)
+      return 0;
+    return Math.round(alpha);
+  }
+  const customInput = ref(0);
+  watch(customInput, (val) => {
+    props.color.set("alpha", Math.round(val));
+  });
+  function update() {
+    thumbLeft.value = getThumbLeft();
+    customInput.value = getCustomValue();
+    thumbTop.value = getThumbTop();
+    background.value = getBackground();
+  }
+  onMounted(() => {
+    if (!bar.value || !thumb.value)
+      return;
+    const dragConfig = {
+      drag: (event) => {
+        handleDrag(event);
+      },
+      end: (event) => {
+        handleDrag(event);
+      }
+    };
+    draggable(bar.value, dragConfig);
+    draggable(thumb.value, dragConfig);
+    update();
+  });
+  watch(() => props.color.get("alpha"), () => update());
+  watch(() => props.color.value, () => update());
+  const rootKls = computed(() => [ns.b(), ns.is("vertical", props.vertical)]);
+  const barKls = computed(() => ns.e("bar"));
+  const thumbKls = computed(() => ns.e("thumb"));
+  const inputbKls = computed(() => ns.e("input"));
+  const barStyle = computed(() => ({ background: background.value }));
+  const thumbStyle = computed(() => ({
+    left: addUnit(thumbLeft.value),
+    top: addUnit(thumbTop.value)
+  }));
+  return { customInput, rootKls, inputbKls, barKls, barStyle, thumbKls, thumbStyle, update };
+};
+
+export { useAlphaSlider, useAlphaSliderDOM };
+//# sourceMappingURL=use-alpha-slider.mjs.map

package/es/components/color-picker/src/composables/use-alpha-slider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-alpha-slider.mjs","sources":["../../../../../../../packages/components/color-picker/src/composables/use-alpha-slider.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentInstance,\n  onMounted,\n  ref,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { addUnit, getClientXY } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { draggable } from '../utils/draggable'\n\nimport type { AlphaSliderProps } from '../props/alpha-slider'\n\nexport const useAlphaSlider = (props: AlphaSliderProps) => {\n  const instance = getCurrentInstance()!\n\n  const thumb = shallowRef<HTMLElement>()\n  const bar = shallowRef<HTMLElement>()\n\n  function handleClick(event: MouseEvent | TouchEvent) {\n    const target = event.target\n\n    if (target !== thumb.value) {\n      handleDrag(event)\n    }\n  }\n\n  function handleDrag(event: MouseEvent | TouchEvent) {\n    if (!bar.value || !thumb.value) return\n\n    const el = instance.vnode.el as HTMLElement\n    const rect = el.getBoundingClientRect()\n    const { clientX, clientY } = getClientXY(event)\n\n    if (!props.vertical) {\n      let left = clientX - rect.left\n      left = Math.max(thumb.value.offsetWidth / 2, left)\n      left = Math.min(left, rect.width - thumb.value.offsetWidth / 2)\n\n      props.color.set(\n        'alpha',\n        Math.round(\n          ((left - thumb.value.offsetWidth / 2) /\n            (rect.width - thumb.value.offsetWidth)) *\n            100\n        )\n      )\n    } else {\n      let top = clientY - rect.top\n      top = Math.max(thumb.value.offsetHeight / 2, top)\n      top = Math.min(top, rect.height - thumb.value.offsetHeight / 2)\n\n      props.color.set(\n        'alpha',\n        Math.round(\n          ((top - thumb.value.offsetHeight / 2) /\n            (rect.height - thumb.value.offsetHeight)) *\n            100\n        )\n      )\n    }\n  }\n\n  return {\n    thumb,\n    bar,\n    handleDrag,\n    handleClick,\n  }\n}\n\nexport const useAlphaSliderDOM = (\n  props: AlphaSliderProps,\n  {\n    bar,\n    thumb,\n    handleDrag,\n  }: Pick<ReturnType<typeof useAlphaSlider>, 'bar' | 'thumb' | 'handleDrag'>\n) => {\n  const instance = getCurrentInstance()!\n\n  const ns = useNamespace('color-alpha-slider')\n  // refs\n\n  const thumbLeft = ref(0)\n  const thumbTop = ref(0)\n  const background = ref<string>()\n\n  function getThumbLeft() {\n    if (!thumb.value) return 0\n\n    if (props.vertical) return 0\n    const el = instance.vnode.el\n    const alpha = props.color.get('alpha')\n\n    if (!el) return 0\n    return Math.round(\n      (alpha * (el.offsetWidth - thumb.value.offsetWidth / 2)) / 100\n    )\n  }\n\n  function getThumbTop() {\n    if (!thumb.value) return 0\n\n    const el = instance.vnode.el\n    if (!props.vertical) return 0\n    const alpha = props.color.get('alpha')\n\n    if (!el) return 0\n    return Math.round(\n      (alpha * (el.offsetHeight - thumb.value.offsetHeight / 2)) / 100\n    )\n  }\n\n  function getBackground() {\n    if (props.color && props.color.value) {\n      const { r, g, b } = props.color.toRgb()\n      return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`\n    }\n    return ''\n  }\n\n  function getCustomValue() {\n    if (!thumb.value) return 0\n    if (props.vertical) return 0\n    const el = instance.vnode.el\n    const alpha = props.color.get('alpha')\n    if (!el) return 0\n    return Math.round(alpha)\n  }\nconst customInput = ref(0)\nwatch(\n  customInput,\n  (val) => {\n    props.color.set(\n      'alpha',\n      Math.round(val)\n    )\n  }\n)\n\n  function update() {\n    thumbLeft.value = getThumbLeft()\n    customInput.value = getCustomValue()\n    thumbTop.value = getThumbTop()\n    background.value = getBackground()\n  }\n\n  onMounted(() => {\n    if (!bar.value || !thumb.value) return\n\n    const dragConfig = {\n      drag: (event: MouseEvent | TouchEvent) => {\n        handleDrag(event)\n      },\n      end: (event: MouseEvent | TouchEvent) => {\n        handleDrag(event)\n      },\n    }\n\n    draggable(bar.value, dragConfig)\n    draggable(thumb.value, dragConfig)\n    update()\n  })\n\n  watch(\n    () => props.color.get('alpha'),\n    () => update()\n  )\n  watch(\n    () => props.color.value,\n    () => update()\n  )\n\n  const rootKls = computed(() => [ns.b(), ns.is('vertical', props.vertical)])\n  const barKls = computed(() => ns.e('bar'))\n  const thumbKls = computed(() => ns.e('thumb'))\n  const inputbKls = computed(() => ns.e('input'))\n  const barStyle = computed(() => ({ background: background.value }))\n  const thumbStyle = computed(() => ({\n    left: addUnit(thumbLeft.value),\n    top: addUnit(thumbTop.value),\n  }))\n\n  return { customInput, rootKls, inputbKls, barKls, barStyle, thumbKls, thumbStyle, update }\n}\n"],"names":[],"mappings":"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"}

package/es/components/color-picker/src/props/alpha-slider.d.ts

@@ -0,0 +1,13 @@
+import type { ExtractPropTypes } from 'vue';
+import type Color from '../utils/color';
+export declare const alphaSliderProps: {
+    readonly color: {
+        readonly type: import("vue").PropType<Color>;
+        readonly required: true;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly vertical: import("element-plus-secondary/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly customInput: import("element-plus-secondary/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
+};
+export declare type AlphaSliderProps = ExtractPropTypes<typeof alphaSliderProps>;

package/es/components/color-picker/src/props/alpha-slider.mjs

@@ -0,0 +1,20 @@
+import '../../../../utils/index.mjs';
+import { buildProps, definePropType } from '../../../../utils/vue/props/runtime.mjs';
+
+const alphaSliderProps = buildProps({
+  color: {
+    type: definePropType(Object),
+    required: true
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  customInput: {
+    type: Number,
+    default: 0
+  }
+});
+
+export { alphaSliderProps };
+//# sourceMappingURL=alpha-slider.mjs.map

package/es/components/color-picker/src/props/alpha-slider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"alpha-slider.mjs","sources":["../../../../../../../packages/components/color-picker/src/props/alpha-slider.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Color from '../utils/color'\n\nexport const alphaSliderProps = buildProps({\n  color: {\n    type: definePropType<Color>(Object),\n    required: true,\n  },\n  vertical: {\n    type: Boolean,\n    default: false,\n  },\n  customInput: {\n    type: Number,\n    default: 0,\n  },\n} as const)\n\nexport type AlphaSliderProps = ExtractPropTypes<typeof alphaSliderProps>\n"],"names":[],"mappings":";;;AACY,MAAC,gBAAgB,GAAG,UAAU,CAAC;AAC3C,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,QAAQ,EAAE,IAAI;AAClB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,CAAC;;;;"}

package/es/components/config-provider/src/config-provider.mjs

@@ -2,7 +2,7 @@ import { defineComponent, watch, renderSlot } from 'vue';
 import '../../../utils/index.mjs';
 import '../../../hooks/index.mjs';
 import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
-import { useSizeProp } from '../../../hooks/use-common-props/index.mjs';
+import { useSizeProp } from '../../../hooks/use-size/index.mjs';
 import { provideGlobalConfig } from '../../../hooks/use-global-config/index.mjs';
 
 const messageConfig = {};

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

@@ -167,9 +167,9 @@ declare const _DatePicker: SFCWithInstall<import("vue").DefineComponent<{
     modelValue: import("element-plus-secondary/es/utils").EpPropMergeType<(new (...args: any[]) => import("..").ModelValueType & {}) | (() => import("..").ModelValueType) | ((new (...args: any[]) => import("..").ModelValueType & {}) | (() => import("..").ModelValueType))[], unknown, unknown>;
     validateEvent: import("element-plus-secondary/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     editable: import("element-plus-secondary/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    placeholder: string;
     popperClass: string;
     popperOptions: Partial<import("@popperjs/core").Options>;
-    placeholder: string;
     readonly: import("element-plus-secondary/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     clearable: import("element-plus-secondary/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     prefixIcon: import("element-plus-secondary/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) | ((new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>))[], unknown, unknown>;
@@ -350,9 +350,9 @@ export declare const ElDatePicker: SFCWithInstall<import("vue").DefineComponent<
     modelValue: import("element-plus-secondary/es/utils").EpPropMergeType<(new (...args: any[]) => import("..").ModelValueType & {}) | (() => import("..").ModelValueType) | ((new (...args: any[]) => import("..").ModelValueType & {}) | (() => import("..").ModelValueType))[], unknown, unknown>;
     validateEvent: import("element-plus-secondary/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     editable: import("element-plus-secondary/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    placeholder: string;
     popperClass: string;
     popperOptions: Partial<import("@popperjs/core").Options>;
-    placeholder: string;
     readonly: import("element-plus-secondary/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     clearable: import("element-plus-secondary/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     prefixIcon: import("element-plus-secondary/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) | ((new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>))[], unknown, unknown>;

package/es/components/date-picker/src/composables/use-range-picker.d.ts

@@ -55,7 +55,7 @@ export declare const useRangePicker: (props: PanelRangeSharedProps, { defaultVal
             startOf: (unit: import("dayjs").OpUnitType) => Dayjs;
             endOf: (unit: import("dayjs").OpUnitType) => Dayjs;
             format: (template?: string | undefined) => string;
-            diff: (date?: string | number | Date | Dayjs | null | undefined, unit?: "year" | "month" | "date" | "dates" | "week" | "D" | "M" | "y" | "weeks" | "months" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "s" | "milliseconds" | "days" | "years" | "d" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+            diff: (date?: string | number | Date | Dayjs | null | undefined, unit?: "year" | "month" | "date" | "dates" | "week" | "D" | "M" | "y" | "weeks" | "months" | "s" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "milliseconds" | "days" | "years" | "d" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
             valueOf: () => number;
             unix: () => number;
             daysInMonth: () => number;

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

@@ -168,7 +168,7 @@ declare const _default: import("vue").DefineComponent<{
             startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
             endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
             format: (template?: string | undefined) => string;
-            diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "year" | "month" | "date" | "dates" | "week" | "D" | "M" | "y" | "weeks" | "months" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "s" | "milliseconds" | "days" | "years" | "d" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+            diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "year" | "month" | "date" | "dates" | "week" | "D" | "M" | "y" | "weeks" | "months" | "s" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "milliseconds" | "days" | "years" | "d" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
             valueOf: () => number;
             unix: () => number;
             daysInMonth: () => number;
@@ -304,7 +304,7 @@ declare const _default: import("vue").DefineComponent<{
             startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
             endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
             format: (template?: string | undefined) => string;
-            diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "year" | "month" | "date" | "dates" | "week" | "D" | "M" | "y" | "weeks" | "months" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "s" | "milliseconds" | "days" | "years" | "d" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+            diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "year" | "month" | "date" | "dates" | "week" | "D" | "M" | "y" | "weeks" | "months" | "s" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "milliseconds" | "days" | "years" | "d" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
             valueOf: () => number;
             unix: () => number;
             daysInMonth: () => number;
@@ -333,7 +333,7 @@ declare const _default: import("vue").DefineComponent<{
             isSameOrAfter: (date: string | number | Date | dayjs.Dayjs | null | undefined, unit?: dayjs.OpUnitType | undefined) => boolean;
             isSameOrBefore: (date: string | number | Date | dayjs.Dayjs | null | undefined, unit?: dayjs.OpUnitType | undefined) => boolean;
         } | undefined;
-        type?: ("week" | "normal" | "prev-month" | "next-month" | "today") | undefined;
+        type?: ("week" | "today" | "normal" | "prev-month" | "next-month") | undefined;
     }[][]>;
     customStyle: CustomStyle;
     focusWithClick: boolean;
@@ -408,7 +408,7 @@ declare const _default: import("vue").DefineComponent<{
             startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
             endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
             format: (template?: string | undefined) => string;
-            diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "year" | "month" | "date" | "dates" | "week" | "D" | "M" | "y" | "weeks" | "months" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "s" | "milliseconds" | "days" | "years" | "d" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+            diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "year" | "month" | "date" | "dates" | "week" | "D" | "M" | "y" | "weeks" | "months" | "s" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "milliseconds" | "days" | "years" | "d" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
             valueOf: () => number;
             unix: () => number;
             daysInMonth: () => number;
@@ -544,7 +544,7 @@ declare const _default: import("vue").DefineComponent<{
             startOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
             endOf: (unit: dayjs.OpUnitType) => dayjs.Dayjs;
             format: (template?: string | undefined) => string;
-            diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "year" | "month" | "date" | "dates" | "week" | "D" | "M" | "y" | "weeks" | "months" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "s" | "milliseconds" | "days" | "years" | "d" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
+            diff: (date?: string | number | Date | dayjs.Dayjs | null | undefined, unit?: "year" | "month" | "date" | "dates" | "week" | "D" | "M" | "y" | "weeks" | "months" | "s" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "milliseconds" | "days" | "years" | "d" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
             valueOf: () => number;
             unix: () => number;
             daysInMonth: () => number;
@@ -573,7 +573,7 @@ declare const _default: import("vue").DefineComponent<{
             isSameOrAfter: (date: string | number | Date | dayjs.Dayjs | null | undefined, unit?: dayjs.OpUnitType | undefined) => boolean;
             isSameOrBefore: (date: string | number | Date | dayjs.Dayjs | null | undefined, unit?: dayjs.OpUnitType | undefined) => boolean;
         } | undefined;
-        type?: ("week" | "normal" | "prev-month" | "next-month" | "today") | undefined;
+        type?: ("week" | "today" | "normal" | "prev-month" | "next-month") | undefined;
     }[][]>;
     focus: () => Promise<void>;
     isNormalDay: (type?: string) => boolean;

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

@@ -121,7 +121,7 @@ declare const _default: import("vue").DefineComponent<{
         start: boolean;
         end: boolean;
         text: number;
-        type: "normal" | "today";
+        type: "today" | "normal";
         inRange: boolean;
     }[][]>;
     lastRow: import("vue").Ref<number | undefined>;