element-plus-secondary 0.6.13 → 0.6.15

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

@@ -98,8 +98,8 @@ declare const _default: import("vue").DefineComponent<{
             };
             readonly validateEvent: import("../../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
         }>> & {
-            onChange?: ((prev: number | undefined, cur: number | undefined) => any) | undefined;
             "onUpdate:modelValue"?: ((val: number | undefined) => any) | undefined;
+            onChange?: ((prev: number | undefined, cur: number | undefined) => any) | undefined;
             onInput?: ((val: number | null | undefined) => any) | undefined;
             onFocus?: ((e: FocusEvent) => any) | undefined;
             onBlur?: ((e: FocusEvent) => any) | undefined;
@@ -222,18 +222,18 @@ declare const _default: import("vue").DefineComponent<{
                 readonly validateEvent: import("../../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
                 readonly inputStyle: import("../../../../utils").EpPropFinalized<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown, () => import("../../../../utils").Mutable<{}>, boolean>;
             }>> & {
-                onChange?: ((value: string) => any) | undefined;
                 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+                onChange?: ((value: string) => any) | undefined;
+                onClear?: (() => any) | undefined;
                 onInput?: ((value: string) => any) | undefined;
                 onFocus?: ((evt: FocusEvent) => any) | undefined;
                 onBlur?: ((evt: FocusEvent) => any) | undefined;
-                onClear?: (() => any) | undefined;
-                onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-                onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-                onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+                onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
                 onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
                 onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
-                onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
+                onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+                onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+                onMouseleave?: ((evt: MouseEvent) => any) | undefined;
             } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "disabled" | "label" | "modelValue" | "validateEvent" | "id" | "effect" | "autosize" | "autocomplete" | "readonly" | "clearable" | "showPassword" | "showWordLimit" | "containerRole" | "tabindex" | "inputStyle">;
             $attrs: {
                 [x: string]: unknown;
@@ -246,7 +246,7 @@ declare const _default: import("vue").DefineComponent<{
             }>;
             $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
             $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-            $emit: ((event: "update:modelValue", value: string) => void) & ((event: "change", value: string) => void) & ((event: "input", value: string) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "clear") => void) & ((event: "mouseleave", evt: MouseEvent) => void) & ((event: "mouseenter", evt: MouseEvent) => void) & ((event: "keydown", evt: Event | KeyboardEvent) => void) & ((event: "compositionstart", evt: CompositionEvent) => void) & ((event: "compositionupdate", evt: CompositionEvent) => void) & ((event: "compositionend", evt: CompositionEvent) => void);
+            $emit: ((event: "update:modelValue", value: string) => void) & ((event: "change", value: string) => void) & ((event: "input", value: string) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "compositionend", evt: CompositionEvent) => void) & ((event: "compositionstart", evt: CompositionEvent) => void) & ((event: "compositionupdate", evt: CompositionEvent) => void) & ((event: "keydown", evt: Event | KeyboardEvent) => void) & ((event: "mouseenter", evt: MouseEvent) => void) & ((event: "mouseleave", evt: MouseEvent) => void) & ((event: "clear") => void);
             $el: any;
             $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
                 readonly id: import("../../../../utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
@@ -326,18 +326,18 @@ declare const _default: import("vue").DefineComponent<{
                 readonly validateEvent: import("../../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
                 readonly inputStyle: import("../../../../utils").EpPropFinalized<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown, () => import("../../../../utils").Mutable<{}>, boolean>;
             }>> & {
-                onChange?: ((value: string) => any) | undefined;
                 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+                onChange?: ((value: string) => any) | undefined;
+                onClear?: (() => any) | undefined;
                 onInput?: ((value: string) => any) | undefined;
                 onFocus?: ((evt: FocusEvent) => any) | undefined;
                 onBlur?: ((evt: FocusEvent) => any) | undefined;
-                onClear?: (() => any) | undefined;
-                onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-                onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-                onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+                onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
                 onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
                 onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
-                onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
+                onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+                onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+                onMouseleave?: ((evt: MouseEvent) => any) | undefined;
             }, {
                 props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
                     readonly id: import("../../../../utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
@@ -417,20 +417,20 @@ declare const _default: import("vue").DefineComponent<{
                     readonly validateEvent: import("../../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
                     readonly inputStyle: import("../../../../utils").EpPropFinalized<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown, () => import("../../../../utils").Mutable<{}>, boolean>;
                 }>> & {
-                    onChange?: ((value: string) => any) | undefined;
                     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+                    onChange?: ((value: string) => any) | undefined;
+                    onClear?: (() => any) | undefined;
                     onInput?: ((value: string) => any) | undefined;
                     onFocus?: ((evt: FocusEvent) => any) | undefined;
                     onBlur?: ((evt: FocusEvent) => any) | undefined;
-                    onClear?: (() => any) | undefined;
-                    onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-                    onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-                    onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+                    onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
                     onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
                     onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
-                    onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
+                    onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+                    onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+                    onMouseleave?: ((evt: MouseEvent) => any) | undefined;
                 }>>;
-                emit: ((event: "update:modelValue", value: string) => void) & ((event: "change", value: string) => void) & ((event: "input", value: string) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "clear") => void) & ((event: "mouseleave", evt: MouseEvent) => void) & ((event: "mouseenter", evt: MouseEvent) => void) & ((event: "keydown", evt: Event | KeyboardEvent) => void) & ((event: "compositionstart", evt: CompositionEvent) => void) & ((event: "compositionupdate", evt: CompositionEvent) => void) & ((event: "compositionend", evt: CompositionEvent) => void);
+                emit: ((event: "update:modelValue", value: string) => void) & ((event: "change", value: string) => void) & ((event: "input", value: string) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "compositionend", evt: CompositionEvent) => void) & ((event: "compositionstart", evt: CompositionEvent) => void) & ((event: "compositionupdate", evt: CompositionEvent) => void) & ((event: "keydown", evt: Event | KeyboardEvent) => void) & ((event: "mouseenter", evt: MouseEvent) => void) & ((event: "mouseleave", evt: MouseEvent) => void) & ((event: "clear") => void);
                 rawAttrs: {
                     [x: string]: unknown;
                 };
@@ -721,18 +721,18 @@ declare const _default: import("vue").DefineComponent<{
             readonly validateEvent: import("../../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
             readonly inputStyle: import("../../../../utils").EpPropFinalized<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown, () => import("../../../../utils").Mutable<{}>, boolean>;
         }>> & {
-            onChange?: ((value: string) => any) | undefined;
             "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+            onChange?: ((value: string) => any) | undefined;
+            onClear?: (() => any) | undefined;
             onInput?: ((value: string) => any) | undefined;
             onFocus?: ((evt: FocusEvent) => any) | undefined;
             onBlur?: ((evt: FocusEvent) => any) | undefined;
-            onClear?: (() => any) | undefined;
-            onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-            onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-            onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+            onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
             onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
             onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
-            onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
+            onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+            onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+            onMouseleave?: ((evt: MouseEvent) => any) | undefined;
         } & import("vue").ShallowUnwrapRef<{
             props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
                 readonly id: import("../../../../utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
@@ -812,20 +812,20 @@ declare const _default: import("vue").DefineComponent<{
                 readonly validateEvent: import("../../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
                 readonly inputStyle: import("../../../../utils").EpPropFinalized<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown, () => import("../../../../utils").Mutable<{}>, boolean>;
             }>> & {
-                onChange?: ((value: string) => any) | undefined;
                 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+                onChange?: ((value: string) => any) | undefined;
+                onClear?: (() => any) | undefined;
                 onInput?: ((value: string) => any) | undefined;
                 onFocus?: ((evt: FocusEvent) => any) | undefined;
                 onBlur?: ((evt: FocusEvent) => any) | undefined;
-                onClear?: (() => any) | undefined;
-                onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-                onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-                onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+                onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
                 onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
                 onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
-                onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
+                onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+                onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+                onMouseleave?: ((evt: MouseEvent) => any) | undefined;
             }>>;
-            emit: ((event: "update:modelValue", value: string) => void) & ((event: "change", value: string) => void) & ((event: "input", value: string) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "clear") => void) & ((event: "mouseleave", evt: MouseEvent) => void) & ((event: "mouseenter", evt: MouseEvent) => void) & ((event: "keydown", evt: Event | KeyboardEvent) => void) & ((event: "compositionstart", evt: CompositionEvent) => void) & ((event: "compositionupdate", evt: CompositionEvent) => void) & ((event: "compositionend", evt: CompositionEvent) => void);
+            emit: ((event: "update:modelValue", value: string) => void) & ((event: "change", value: string) => void) & ((event: "input", value: string) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "compositionend", evt: CompositionEvent) => void) & ((event: "compositionstart", evt: CompositionEvent) => void) & ((event: "compositionupdate", evt: CompositionEvent) => void) & ((event: "keydown", evt: Event | KeyboardEvent) => void) & ((event: "mouseenter", evt: MouseEvent) => void) & ((event: "mouseleave", evt: MouseEvent) => void) & ((event: "clear") => void);
             rawAttrs: {
                 [x: string]: unknown;
             };
@@ -1170,20 +1170,20 @@ declare const _default: import("vue").DefineComponent<{
                 readonly validateEvent: import("../../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
                 readonly inputStyle: import("../../../../utils").EpPropFinalized<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown, () => import("../../../../utils").Mutable<{}>, boolean>;
             }>> & {
-                onChange?: ((value: string) => any) | undefined;
                 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+                onChange?: ((value: string) => any) | undefined;
+                onClear?: (() => any) | undefined;
                 onInput?: ((value: string) => any) | undefined;
                 onFocus?: ((evt: FocusEvent) => any) | undefined;
                 onBlur?: ((evt: FocusEvent) => any) | undefined;
-                onClear?: (() => any) | undefined;
-                onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-                onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-                onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+                onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
                 onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
                 onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
-                onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
+                onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+                onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+                onMouseleave?: ((evt: MouseEvent) => any) | undefined;
             }>>;
-            emit: ((event: "update:modelValue", value: string) => void) & ((event: "change", value: string) => void) & ((event: "input", value: string) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "clear") => void) & ((event: "mouseleave", evt: MouseEvent) => void) & ((event: "mouseenter", evt: MouseEvent) => void) & ((event: "keydown", evt: Event | KeyboardEvent) => void) & ((event: "compositionstart", evt: CompositionEvent) => void) & ((event: "compositionupdate", evt: CompositionEvent) => void) & ((event: "compositionend", evt: CompositionEvent) => void);
+            emit: ((event: "update:modelValue", value: string) => void) & ((event: "change", value: string) => void) & ((event: "input", value: string) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "compositionend", evt: CompositionEvent) => void) & ((event: "compositionstart", evt: CompositionEvent) => void) & ((event: "compositionupdate", evt: CompositionEvent) => void) & ((event: "keydown", evt: Event | KeyboardEvent) => void) & ((event: "mouseenter", evt: MouseEvent) => void) & ((event: "mouseleave", evt: MouseEvent) => void) & ((event: "clear") => void);
             rawAttrs: {
                 [x: string]: unknown;
             };
@@ -1437,18 +1437,18 @@ declare const _default: import("vue").DefineComponent<{
             readonly validateEvent: import("../../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
             readonly inputStyle: import("../../../../utils").EpPropFinalized<(new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue) | ((new (...args: any[]) => import("vue").StyleValue & {}) | (() => import("vue").StyleValue))[], unknown, unknown, () => import("../../../../utils").Mutable<{}>, boolean>;
         }>> & {
-            onChange?: ((value: string) => any) | undefined;
             "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+            onChange?: ((value: string) => any) | undefined;
+            onClear?: (() => any) | undefined;
             onInput?: ((value: string) => any) | undefined;
             onFocus?: ((evt: FocusEvent) => any) | undefined;
             onBlur?: ((evt: FocusEvent) => any) | undefined;
-            onClear?: (() => any) | undefined;
-            onMouseleave?: ((evt: MouseEvent) => any) | undefined;
-            onMouseenter?: ((evt: MouseEvent) => any) | undefined;
-            onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+            onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
             onCompositionstart?: ((evt: CompositionEvent) => any) | undefined;
             onCompositionupdate?: ((evt: CompositionEvent) => any) | undefined;
-            onCompositionend?: ((evt: CompositionEvent) => any) | undefined;
+            onKeydown?: ((evt: Event | KeyboardEvent) => any) | undefined;
+            onMouseenter?: ((evt: MouseEvent) => any) | undefined;
+            onMouseleave?: ((evt: MouseEvent) => any) | undefined;
         }, {
             readonly type: string;
             readonly disabled: boolean;
@@ -1569,8 +1569,8 @@ declare const _default: import("vue").DefineComponent<{
         };
         readonly validateEvent: import("../../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     }>> & {
-        onChange?: ((prev: number | undefined, cur: number | undefined) => any) | undefined;
         "onUpdate:modelValue"?: ((val: number | undefined) => any) | undefined;
+        onChange?: ((prev: number | undefined, cur: number | undefined) => any) | undefined;
         onInput?: ((val: number | null | undefined) => any) | undefined;
         onFocus?: ((e: FocusEvent) => any) | undefined;
         onBlur?: ((e: FocusEvent) => any) | undefined;

package/es/components/color-picker/src/components/sv-panel.mjs

@@ -32,6 +32,8 @@ const _sfc_main = defineComponent({
       const { clientWidth: width, clientHeight: height } = el;
       cursorLeft.value = saturation * width / 100;
       cursorTop.value = (100 - value) * height / 100;
+      if (props.color.get("hue") === 0)
+        return;
       background.value = `hsl(${props.color.get("hue")}, 100%, 50%)`;
     }
     function handleDrag(event) {

package/es/components/color-picker/src/components/sv-panel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sv-panel.mjs","sources":["../../../../../../../packages/components/color-picker/src/components/sv-panel.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"ns.b()\"\n    :style=\"{\n      backgroundColor: background,\n    }\"\n  >\n    <div :class=\"ns.e('white')\" />\n    <div :class=\"ns.e('black')\" />\n    <div\n      :class=\"ns.e('cursor')\"\n      :style=\"{\n        top: cursorTop + 'px',\n        left: cursorLeft + 'px',\n      }\"\n    >\n      <div />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  onMounted,\n  ref,\n  watch,\n} from 'vue'\nimport { getClientXY } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { draggable } from '../utils/draggable'\n\nimport type { PropType } from 'vue'\nimport type Color from '../utils/color'\n\nexport default defineComponent({\n  name: 'ElSlPanel',\n\n  props: {\n    color: {\n      type: Object as PropType<Color>,\n      required: true,\n    },\n  },\n\n  setup(props) {\n    const ns = useNamespace('color-svpanel')\n\n    // instance\n    const instance = getCurrentInstance()!\n\n    // data\n    const cursorTop = ref(0)\n    const cursorLeft = ref(0)\n    const background = ref('hsl(0, 100%, 50%)')\n    const colorValue = computed(() => {\n      const hue = props.color.get('hue')\n      const value = props.color.get('value')\n      return { hue, value }\n    })\n\n    // methods\n    function update() {\n      const saturation = props.color.get('saturation')\n      const value = props.color.get('value')\n\n      const el = instance.vnode.el!\n      const { clientWidth: width, clientHeight: height } = el\n\n      cursorLeft.value = (saturation * width) / 100\n      cursorTop.value = ((100 - value) * height) / 100\n\n      background.value = `hsl(${props.color.get('hue')}, 100%, 50%)`\n    }\n\n    function handleDrag(event: MouseEvent | TouchEvent) {\n      const el = instance.vnode.el!\n      const rect = el.getBoundingClientRect()\n      const { clientX, clientY } = getClientXY(event)\n\n      let left = clientX - rect.left\n      let top = clientY - rect.top\n      left = Math.max(0, left)\n      left = Math.min(left, rect.width)\n\n      top = Math.max(0, top)\n      top = Math.min(top, rect.height)\n\n      cursorLeft.value = left\n      cursorTop.value = top\n      props.color.set({\n        saturation: (left / rect.width) * 100,\n        value: 100 - (top / rect.height) * 100,\n      })\n    }\n\n    // watch\n    watch(\n      () => colorValue.value,\n      () => {\n        update()\n      }\n    )\n    // mounted\n    onMounted(() => {\n      draggable(instance.vnode.el as HTMLElement, {\n        drag: (event) => {\n          handleDrag(event)\n        },\n        end: (event) => {\n          handleDrag(event)\n        },\n      })\n\n      update()\n    })\n    return {\n      cursorTop,\n      cursorLeft,\n      background,\n      colorValue,\n      handleDrag,\n      update,\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode","_createElementBlock","_normalizeClass","_normalizeStyle"],"mappings":"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"}
+{"version":3,"file":"sv-panel.mjs","sources":["../../../../../../../packages/components/color-picker/src/components/sv-panel.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"ns.b()\"\n    :style=\"{\n      backgroundColor: background,\n    }\"\n  >\n    <div :class=\"ns.e('white')\" />\n    <div :class=\"ns.e('black')\" />\n    <div\n      :class=\"ns.e('cursor')\"\n      :style=\"{\n        top: cursorTop + 'px',\n        left: cursorLeft + 'px',\n      }\"\n    >\n      <div />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  onMounted,\n  ref,\n  watch,\n} from \"vue\";\nimport { getClientXY } from \"@element-plus/utils\";\nimport { useNamespace } from \"@element-plus/hooks\";\nimport { draggable } from \"../utils/draggable\";\n\nimport type { PropType } from \"vue\";\nimport type Color from \"../utils/color\";\n\nexport default defineComponent({\n  name: \"ElSlPanel\",\n\n  props: {\n    color: {\n      type: Object as PropType<Color>,\n      required: true,\n    },\n  },\n\n  setup(props) {\n    const ns = useNamespace(\"color-svpanel\");\n\n    // instance\n    const instance = getCurrentInstance()!;\n\n    // data\n    const cursorTop = ref(0);\n    const cursorLeft = ref(0);\n    const background = ref(\"hsl(0, 100%, 50%)\");\n    const colorValue = computed(() => {\n      const hue = props.color.get(\"hue\");\n      const value = props.color.get(\"value\");\n      return { hue, value };\n    });\n\n    // methods\n    function update() {\n      const saturation = props.color.get(\"saturation\");\n      const value = props.color.get(\"value\");\n\n      const el = instance.vnode.el!;\n      const { clientWidth: width, clientHeight: height } = el;\n\n      cursorLeft.value = (saturation * width) / 100;\n      cursorTop.value = ((100 - value) * height) / 100;\n      if (props.color.get(\"hue\") === 0) return;\n\n      background.value = `hsl(${props.color.get(\"hue\")}, 100%, 50%)`;\n    }\n\n    function handleDrag(event: MouseEvent | TouchEvent) {\n      const el = instance.vnode.el!;\n      const rect = el.getBoundingClientRect();\n      const { clientX, clientY } = getClientXY(event);\n\n      let left = clientX - rect.left;\n      let top = clientY - rect.top;\n      left = Math.max(0, left);\n      left = Math.min(left, rect.width);\n\n      top = Math.max(0, top);\n      top = Math.min(top, rect.height);\n\n      cursorLeft.value = left;\n      cursorTop.value = top;\n\n      props.color.set({\n        saturation: (left / rect.width) * 100,\n        value: 100 - (top / rect.height) * 100,\n      });\n    }\n\n    // watch\n    watch(\n      () => colorValue.value,\n      () => {\n        update();\n      }\n    );\n    // mounted\n    onMounted(() => {\n      draggable(instance.vnode.el as HTMLElement, {\n        drag: (event) => {\n          handleDrag(event);\n        },\n        end: (event) => {\n          handleDrag(event);\n        },\n      });\n\n      update();\n    });\n    return {\n      cursorTop,\n      cursorLeft,\n      background,\n      colorValue,\n      handleDrag,\n      update,\n      ns,\n    };\n  },\n});\n</script>\n"],"names":["_createElementVNode","_createElementBlock","_normalizeClass","_normalizeStyle"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import type { PropType } from 'vue';
-import type Color from '../utils/color';
+import type { PropType } from "vue";
+import type Color from "../utils/color";
 declare const _default: import("vue").DefineComponent<{
     color: {
         type: PropType<Color>;

package/es/components/color-picker/src/utils/draggable.mjs

@@ -34,7 +34,7 @@ function draggable(element, options) {
     (_a = options.start) == null ? void 0 : _a.call(options, event);
   };
   element.addEventListener("mousedown", downFn);
-  element.addEventListener("touchstart", downFn);
+  element.addEventListener("touchstart", downFn, { passive: false });
 }
 
 export { draggable };

package/es/components/color-picker/src/utils/draggable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"draggable.mjs","sources":["../../../../../../../packages/components/color-picker/src/utils/draggable.ts"],"sourcesContent":["import { isClient } from '@vueuse/core'\n\nlet isDragging = false\n\nexport interface DraggableOptions {\n  drag?: (event: MouseEvent | TouchEvent) => void\n  start?: (event: MouseEvent | TouchEvent) => void\n  end?: (event: MouseEvent | TouchEvent) => void\n}\n\nexport function draggable(element: HTMLElement, options: DraggableOptions) {\n  if (!isClient) return\n\n  const moveFn = function (event: MouseEvent | TouchEvent) {\n    options.drag?.(event)\n  }\n\n  const upFn = function (event: MouseEvent | TouchEvent) {\n    document.removeEventListener('mousemove', moveFn)\n    document.removeEventListener('mouseup', upFn)\n    document.removeEventListener('touchmove', moveFn)\n    document.removeEventListener('touchend', upFn)\n    document.onselectstart = null\n    document.ondragstart = null\n\n    isDragging = false\n\n    options.end?.(event)\n  }\n\n  const downFn = function (event: MouseEvent | TouchEvent) {\n    if (isDragging) return\n    event.preventDefault()\n    document.onselectstart = () => false\n    document.ondragstart = () => false\n    document.addEventListener('mousemove', moveFn)\n    document.addEventListener('mouseup', upFn)\n    document.addEventListener('touchmove', moveFn)\n    document.addEventListener('touchend', upFn)\n\n    isDragging = true\n\n    options.start?.(event)\n  }\n\n  element.addEventListener('mousedown', downFn)\n  element.addEventListener('touchstart', downFn)\n}\n"],"names":[],"mappings":";;AACA,IAAI,UAAU,GAAG,KAAK,CAAC;AAChB,SAAS,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE;AAC5C,EAAE,IAAI,CAAC,QAAQ;AACf,IAAI,OAAO;AACX,EAAE,MAAM,MAAM,GAAG,SAAS,KAAK,EAAE;AACjC,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,IAAI,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AACnE,GAAG,CAAC;AACJ,EAAE,MAAM,IAAI,GAAG,SAAS,KAAK,EAAE;AAC/B,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AACtD,IAAI,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAClD,IAAI,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AACtD,IAAI,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;AACnD,IAAI,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC;AAClC,IAAI,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC;AAChC,IAAI,UAAU,GAAG,KAAK,CAAC;AACvB,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAClE,GAAG,CAAC;AACJ,EAAE,MAAM,MAAM,GAAG,SAAS,KAAK,EAAE;AACjC,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,IAAI,UAAU;AAClB,MAAM,OAAO;AACb,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;AAC3B,IAAI,QAAQ,CAAC,aAAa,GAAG,MAAM,KAAK,CAAC;AACzC,IAAI,QAAQ,CAAC,WAAW,GAAG,MAAM,KAAK,CAAC;AACvC,IAAI,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AACnD,IAAI,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAC/C,IAAI,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AACnD,IAAI,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;AAChD,IAAI,UAAU,GAAG,IAAI,CAAC;AACtB,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AACpE,GAAG,CAAC;AACJ,EAAE,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AAChD,EAAE,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AACjD;;;;"}
+{"version":3,"file":"draggable.mjs","sources":["../../../../../../../packages/components/color-picker/src/utils/draggable.ts"],"sourcesContent":["import { isClient } from '@vueuse/core'\n\nlet isDragging = false\n\nexport interface DraggableOptions {\n  drag?: (event: MouseEvent | TouchEvent) => void\n  start?: (event: MouseEvent | TouchEvent) => void\n  end?: (event: MouseEvent | TouchEvent) => void\n}\n\nexport function draggable(element: HTMLElement, options: DraggableOptions) {\n  if (!isClient) return\n\n  const moveFn = function (event: MouseEvent | TouchEvent) {\n    options.drag?.(event)\n  }\n\n  const upFn = function (event: MouseEvent | TouchEvent) {\n    document.removeEventListener('mousemove', moveFn)\n    document.removeEventListener('mouseup', upFn)\n    document.removeEventListener('touchmove', moveFn)\n    document.removeEventListener('touchend', upFn)\n    document.onselectstart = null\n    document.ondragstart = null\n\n    isDragging = false\n\n    options.end?.(event)\n  }\n\n  const downFn = function (event: MouseEvent | TouchEvent) {\n    if (isDragging) return\n    event.preventDefault()\n    document.onselectstart = () => false\n    document.ondragstart = () => false\n    document.addEventListener('mousemove', moveFn)\n    document.addEventListener('mouseup', upFn)\n    document.addEventListener('touchmove', moveFn)\n    document.addEventListener('touchend', upFn)\n\n    isDragging = true\n\n    options.start?.(event)\n  }\n\n  element.addEventListener('mousedown', downFn)\n  element.addEventListener('touchstart', downFn, { passive: false })\n}\n"],"names":[],"mappings":";;AACA,IAAI,UAAU,GAAG,KAAK,CAAC;AAChB,SAAS,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE;AAC5C,EAAE,IAAI,CAAC,QAAQ;AACf,IAAI,OAAO;AACX,EAAE,MAAM,MAAM,GAAG,SAAS,KAAK,EAAE;AACjC,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,IAAI,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AACnE,GAAG,CAAC;AACJ,EAAE,MAAM,IAAI,GAAG,SAAS,KAAK,EAAE;AAC/B,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AACtD,IAAI,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAClD,IAAI,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AACtD,IAAI,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;AACnD,IAAI,QAAQ,CAAC,aAAa,GAAG,IAAI,CAAC;AAClC,IAAI,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC;AAChC,IAAI,UAAU,GAAG,KAAK,CAAC;AACvB,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAClE,GAAG,CAAC;AACJ,EAAE,MAAM,MAAM,GAAG,SAAS,KAAK,EAAE;AACjC,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,IAAI,UAAU;AAClB,MAAM,OAAO;AACb,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;AAC3B,IAAI,QAAQ,CAAC,aAAa,GAAG,MAAM,KAAK,CAAC;AACzC,IAAI,QAAQ,CAAC,WAAW,GAAG,MAAM,KAAK,CAAC;AACvC,IAAI,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AACnD,IAAI,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AAC/C,IAAI,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AACnD,IAAI,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;AAChD,IAAI,UAAU,GAAG,IAAI,CAAC;AACtB,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AACpE,GAAG,CAAC;AACJ,EAAE,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;AAChD,EAAE,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;AACrE;;;;"}

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" | "d" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "s" | "milliseconds" | "days" | "years" | "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" | "d" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "milliseconds" | "days" | "years" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
             valueOf: () => number;
             unix: () => number;
             daysInMonth: () => number;
@@ -175,7 +175,7 @@ export declare const useYearRangePicker: (props: PanelRangeSharedProps, { defaul
             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" | "d" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "s" | "milliseconds" | "days" | "years" | "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" | "d" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "milliseconds" | "days" | "years" | "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

@@ -180,7 +180,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" | "d" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "s" | "milliseconds" | "days" | "years" | "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" | "d" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "milliseconds" | "days" | "years" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
             valueOf: () => number;
             unix: () => number;
             daysInMonth: () => number;
@@ -316,7 +316,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" | "d" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "s" | "milliseconds" | "days" | "years" | "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" | "d" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "milliseconds" | "days" | "years" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
             valueOf: () => number;
             unix: () => number;
             daysInMonth: () => number;
@@ -345,7 +345,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;
@@ -420,7 +420,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" | "d" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "s" | "milliseconds" | "days" | "years" | "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" | "d" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "milliseconds" | "days" | "years" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
             valueOf: () => number;
             unix: () => number;
             daysInMonth: () => number;
@@ -556,7 +556,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" | "d" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "s" | "milliseconds" | "days" | "years" | "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" | "d" | "day" | "hour" | "minute" | "second" | "millisecond" | "hours" | "minutes" | "seconds" | "milliseconds" | "days" | "years" | "h" | "m" | "ms" | "w" | "quarter" | "quarters" | "Q" | undefined, float?: boolean | undefined) => number;
             valueOf: () => number;
             unix: () => number;
             daysInMonth: () => number;
@@ -585,7 +585,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

@@ -133,7 +133,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>;