@element-plus/nightly 0.0.20260426 → 0.0.20260428

package/lib/components/table-v2/src/cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"cell.js","names":["buildProps","definePropType"],"sources":["../../../../../../packages/components/table-v2/src/cell.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport { column } from './common'\n\nimport type { ExtractPropTypes, ExtractPublicPropTypes, StyleValue } from 'vue'\n\nexport const tableV2CellProps = buildProps({\n  class: String,\n  cellData: {\n    type: definePropType<any>([String, Boolean, Number, Object]),\n  },\n  column,\n  columnIndex: Number,\n  style: {\n    type: definePropType<StyleValue>([String, Array, Object]),\n  },\n  rowData: {\n    type: definePropType<any>(Object),\n  },\n  rowIndex: Number,\n} as const)\n\nexport type TableV2CellProps = ExtractPropTypes<typeof tableV2CellProps>\nexport type TableV2CellPropsPublic = ExtractPublicPropTypes<\n  typeof tableV2CellProps\n>\n"],"mappings":";;;;;AAKA,MAAa,mBAAmBA,2BAAW;CACzC,OAAO;CACP,UAAU,EACR,MAAMC,+BAAoB;EAAC;EAAQ;EAAS;EAAQ;EAAO,CAAC,EAC7D;CACD;CACA,aAAa;CACb,OAAO,EACL,MAAMA,+BAA2B;EAAC;EAAQ;EAAO;EAAO,CAAC,EAC1D;CACD,SAAS,EACP,MAAMA,+BAAoB,OAAO,EAClC;CACD,UAAU;CACX,CAAU"}
+{"version":3,"file":"cell.js","names":["buildProps","definePropType"],"sources":["../../../../../../packages/components/table-v2/src/cell.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils'\nimport { column } from './common'\n\nimport type { ExtractPropTypes, ExtractPublicPropTypes, StyleValue } from 'vue'\n\nexport const tableV2CellProps = buildProps({\n  class: String,\n  cellData: {\n    type: definePropType<any>([String, Boolean, Number, Object]),\n  },\n  column,\n  columnIndex: Number,\n  style: {\n    type: definePropType<StyleValue>([String, Array, Object, Boolean]),\n    default: undefined,\n  },\n  rowData: {\n    type: definePropType<any>(Object),\n  },\n  rowIndex: Number,\n} as const)\n\nexport type TableV2CellProps = ExtractPropTypes<typeof tableV2CellProps>\nexport type TableV2CellPropsPublic = ExtractPublicPropTypes<\n  typeof tableV2CellProps\n>\n"],"mappings":";;;;;AAKA,MAAa,mBAAmBA,2BAAW;CACzC,OAAO;CACP,UAAU,EACR,MAAMC,+BAAoB;EAAC;EAAQ;EAAS;EAAQ;EAAO,CAAC,EAC7D;CACD;CACA,aAAa;CACb,OAAO;EACL,MAAMA,+BAA2B;GAAC;GAAQ;GAAO;GAAQ;GAAQ,CAAC;EAClE,SAAS;EACV;CACD,SAAS,EACP,MAAMA,+BAAoB,OAAO,EAClC;CACD,UAAU;CACX,CAAU"}

package/lib/components/time-picker/src/common/picker.vue.d.ts

@@ -197,12 +197,7 @@ declare const __VLS_base: vue.DefineComponent<vue.ExtractPropTypes<{
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  readonly popperStyle: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly popperStyle: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly format: StringConstructor;
   readonly valueFormat: StringConstructor;
   readonly dateFormat: StringConstructor;
@@ -263,10 +258,10 @@ declare const __VLS_base: vue.DefineComponent<vue.ExtractPropTypes<{
   onPick: (date?: any, visible?: boolean) => void;
 }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
   change: (...args: any[]) => void;
+  clear: (...args: any[]) => void;
   "update:modelValue": (...args: any[]) => void;
   focus: (...args: any[]) => void;
   blur: (...args: any[]) => void;
-  clear: (...args: any[]) => void;
   keydown: (...args: any[]) => void;
   "calendar-change": (...args: any[]) => void;
   "panel-change": (...args: any[]) => void;
@@ -432,12 +427,7 @@ declare const __VLS_base: vue.DefineComponent<vue.ExtractPropTypes<{
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  readonly popperStyle: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly popperStyle: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly format: StringConstructor;
   readonly valueFormat: StringConstructor;
   readonly dateFormat: StringConstructor;
@@ -477,10 +467,10 @@ declare const __VLS_base: vue.DefineComponent<vue.ExtractPropTypes<{
   readonly isRange: BooleanConstructor;
 }>> & Readonly<{
   onChange?: ((...args: any[]) => any) | undefined;
+  onClear?: ((...args: any[]) => any) | undefined;
   "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
   onFocus?: ((...args: any[]) => any) | undefined;
   onBlur?: ((...args: any[]) => any) | undefined;
-  onClear?: ((...args: any[]) => any) | undefined;
   onKeydown?: ((...args: any[]) => any) | undefined;
   "onCalendar-change"?: ((...args: any[]) => any) | undefined;
   "onPanel-change"?: ((...args: any[]) => any) | undefined;
@@ -496,6 +486,7 @@ declare const __VLS_base: vue.DefineComponent<vue.ExtractPropTypes<{
   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 popperStyle: vue.StyleValue;
   readonly fallbackPlacements: Placement$1[];
   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$1) | (((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$1)) | null)[], Placement$1, unknown>;
   readonly popperOptions: Partial<Options>;

package/lib/components/time-picker/src/common/props.d.ts

@@ -177,12 +177,7 @@ declare const timePickerDefaultProps: {
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  readonly popperStyle: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly popperStyle: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly format: StringConstructor;
   readonly valueFormat: StringConstructor;
   readonly dateFormat: StringConstructor;

package/lib/components/time-picker/src/time-picker.d.ts

@@ -172,12 +172,7 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  popperStyle: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  popperStyle: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   format: StringConstructor;
   valueFormat: StringConstructor;
   dateFormat: StringConstructor;
@@ -379,12 +374,7 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  popperStyle: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  popperStyle: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   format: StringConstructor;
   valueFormat: StringConstructor;
   dateFormat: StringConstructor;
@@ -434,6 +424,7 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
   prefixIcon: EpPropMergeType<(new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component) | (((new (...args: any[]) => (string | vue.Component) & {}) | (() => string | vue.Component)) | null)[], unknown, unknown>;
   tabindex: EpPropMergeType<(new (...args: any[]) => string | number) | (() => string | number) | (((new (...args: any[]) => string | number) | (() => string | number)) | null)[], unknown, unknown>;
   validateEvent: EpPropMergeType<BooleanConstructor, unknown, unknown>;
+  popperStyle: vue.StyleValue;
   fallbackPlacements: Placement[];
   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>;
   popperOptions: Partial<Options>;

package/lib/components/time-select/src/time-select.vue.d.ts

@@ -17,16 +17,16 @@ declare const __VLS_export: vue.DefineComponent<TimeSelectProps, {
   focus: () => void;
 }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
   change: (...args: any[]) => void;
+  clear: (...args: any[]) => void;
   "update:modelValue": (...args: any[]) => void;
   focus: (...args: any[]) => void;
   blur: (...args: any[]) => void;
-  clear: (...args: any[]) => void;
 }, string, vue.PublicProps, Readonly<TimeSelectProps> & Readonly<{
   onChange?: ((...args: any[]) => any) | undefined;
+  onClear?: ((...args: any[]) => any) | undefined;
   "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
   onFocus?: ((...args: any[]) => any) | undefined;
   onBlur?: ((...args: any[]) => any) | undefined;
-  onClear?: ((...args: any[]) => any) | undefined;
 }>, {
   effect: PopperEffect;
   disabled: boolean;

package/lib/components/tooltip/src/content.d.ts

@@ -92,12 +92,7 @@ declare const useTooltipContentProps: {
   readonly disabled: BooleanConstructor;
   readonly loop: BooleanConstructor;
   readonly id: StringConstructor;
-  readonly style: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly style: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly className: {
     readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | {
       [x: string]: boolean;
@@ -307,12 +302,7 @@ declare const useTooltipContentProps: {
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  readonly popperStyle: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly popperStyle: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly referenceEl: {
     readonly type: vue.PropType<HTMLElement>;
     readonly required: false;

package/lib/components/tooltip/src/tooltip.d.ts

@@ -109,12 +109,7 @@ declare const useTooltipProps: {
   transition: StringConstructor;
   teleported: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   loop: BooleanConstructor;
-  style: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  style: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   className: {
     readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | {
       [x: string]: boolean;
@@ -324,12 +319,7 @@ declare const useTooltipProps: {
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
   };
-  popperStyle: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  popperStyle: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   referenceEl: {
     readonly type: vue.PropType<HTMLElement>;
     readonly required: false;

package/lib/components/tree/src/tree.vue.d.ts

@@ -1,6 +1,5 @@
 import { SFCWithInstall } from "../../../utils/vue/typescript.js";
 import { EpPropFinalized, EpPropMergeType } from "../../../utils/vue/props/types.js";
-import { ComponentSize } from "../../../constants/size.js";
 import { Nullable } from "../../../utils/typescript.js";
 import "../../../utils/index.js";
 import { Translator } from "../../../hooks/use-locale/index.js";
@@ -1544,28 +1543,26 @@ declare const __VLS_export: vue.DefineComponent<vue.ExtractPropTypes<{
         default?: (props: {}) => any;
       };
     }) & vue.ObjectPlugin & {
-      setPropsDefaults: (defaults: Partial<Omit<{
-        readonly modelValue?: number | string | boolean | undefined;
-        readonly label?: string | boolean | number | object | undefined;
-        readonly value?: string | boolean | number | object | undefined;
-        readonly indeterminate?: boolean | undefined;
-        readonly disabled?: boolean | undefined;
-        readonly checked?: boolean | undefined;
-        readonly name?: string | undefined;
-        readonly trueValue?: string | number | undefined;
-        readonly falseValue?: string | number | undefined;
-        readonly trueLabel?: string | number | undefined;
-        readonly falseLabel?: string | number | undefined;
-        readonly id?: string | undefined;
-        readonly border?: boolean | undefined;
-        readonly size?: ComponentSize | undefined;
-        readonly tabindex?: string | number | undefined;
-        readonly validateEvent?: boolean | undefined;
-        readonly ariaLabel?: string | undefined;
-        readonly ariaControls?: string | undefined;
-        readonly onChange?: ((val: CheckboxValueType) => any) | undefined;
-        readonly "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
-      } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "onChange" | "onUpdate:modelValue" | keyof vue.VNodeProps | keyof vue.AllowedComponentProps>>) => void;
+      setPropsDefaults: (defaults: {
+        readonly modelValue?: string | number | boolean | (() => string | number | boolean) | undefined;
+        readonly label?: string | number | boolean | (() => string | number | boolean | object) | undefined;
+        readonly value?: string | number | boolean | (() => string | number | boolean | object) | undefined;
+        readonly indeterminate?: boolean | (() => boolean) | undefined;
+        readonly disabled?: boolean | (() => boolean) | undefined;
+        readonly checked?: boolean | (() => boolean) | undefined;
+        readonly name?: string | (() => string) | undefined;
+        readonly trueValue?: string | number | (() => string | number) | undefined;
+        readonly falseValue?: string | number | (() => string | number) | undefined;
+        readonly trueLabel?: string | number | (() => string | number) | undefined;
+        readonly falseLabel?: string | number | (() => string | number) | undefined;
+        readonly id?: string | (() => string) | undefined;
+        readonly border?: boolean | (() => boolean) | undefined;
+        readonly size?: "" | "default" | "small" | "large" | (() => "" | "default" | "small" | "large") | undefined;
+        readonly tabindex?: string | number | (() => string | number) | undefined;
+        readonly validateEvent?: boolean | (() => boolean) | undefined;
+        readonly ariaLabel?: string | (() => string) | undefined;
+        readonly ariaControls?: string | (() => string) | undefined;
+      }) => void;
     } & {
       CheckboxButton: typeof _default$1;
       CheckboxGroup: typeof _default$2;

package/lib/components/virtual-list/src/builders/build-grid.d.ts

@@ -37,12 +37,7 @@ declare const createGrid: ({
   };
   readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
   readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
-  readonly style: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly style: EpPropFinalized<(new (...args: any[]) => string | false | CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly useIsScrolling: BooleanConstructor;
   readonly width: {
     readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
@@ -133,12 +128,7 @@ declare const createGrid: ({
   };
   readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
   readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
-  readonly style: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly style: EpPropFinalized<(new (...args: any[]) => string | false | CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly useIsScrolling: BooleanConstructor;
   readonly width: {
     readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
@@ -218,6 +208,7 @@ declare const createGrid: ({
   onScroll?: ((...args: any[]) => any) | undefined;
   onItemRendered?: ((...args: any[]) => any) | undefined;
 }>, {
+  readonly style: StyleValue;
   readonly className: string;
   readonly direction: EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
   readonly data: any[];

package/lib/components/virtual-list/src/components/dynamic-size-grid.d.ts

@@ -23,12 +23,7 @@ declare const DynamicSizeGrid: vue.DefineComponent<vue.ExtractPropTypes<{
   };
   readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
   readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
-  readonly style: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly style: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly useIsScrolling: BooleanConstructor;
   readonly width: {
     readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
@@ -119,12 +114,7 @@ declare const DynamicSizeGrid: vue.DefineComponent<vue.ExtractPropTypes<{
   };
   readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
   readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
-  readonly style: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly style: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly useIsScrolling: BooleanConstructor;
   readonly width: {
     readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
@@ -204,6 +194,7 @@ declare const DynamicSizeGrid: vue.DefineComponent<vue.ExtractPropTypes<{
   onScroll?: ((...args: any[]) => any) | undefined;
   onItemRendered?: ((...args: any[]) => any) | undefined;
 }>, {
+  readonly style: vue.StyleValue;
   readonly className: string;
   readonly direction: EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
   readonly data: any[];

package/lib/components/virtual-list/src/components/dynamic-size-list.d.ts

@@ -18,12 +18,7 @@ declare const DynamicSizeList: vue.DefineComponent<vue.ExtractPropTypes<{
   };
   readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
   readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
-  readonly style: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly style: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly useIsScrolling: BooleanConstructor;
   readonly width: {
     readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
@@ -137,12 +132,7 @@ declare const DynamicSizeList: vue.DefineComponent<vue.ExtractPropTypes<{
   };
   readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
   readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
-  readonly style: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly style: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly useIsScrolling: BooleanConstructor;
   readonly width: {
     readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
@@ -185,6 +175,7 @@ declare const DynamicSizeList: vue.DefineComponent<vue.ExtractPropTypes<{
   "onEnd-reached"?: ((...args: any[]) => any) | undefined;
 }>, {
   readonly layout: EpPropMergeType<StringConstructor, "horizontal" | "vertical", never>;
+  readonly style: vue.StyleValue;
   readonly className: string;
   readonly direction: EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
   readonly data: any[];

package/lib/components/virtual-list/src/components/fixed-size-grid.d.ts

@@ -18,12 +18,7 @@ declare const FixedSizeGrid: vue.DefineComponent<vue.ExtractPropTypes<{
   };
   readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
   readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
-  readonly style: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly style: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly useIsScrolling: BooleanConstructor;
   readonly width: {
     readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
@@ -114,12 +109,7 @@ declare const FixedSizeGrid: vue.DefineComponent<vue.ExtractPropTypes<{
   };
   readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
   readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
-  readonly style: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly style: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly useIsScrolling: BooleanConstructor;
   readonly width: {
     readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
@@ -199,6 +189,7 @@ declare const FixedSizeGrid: vue.DefineComponent<vue.ExtractPropTypes<{
   onScroll?: ((...args: any[]) => any) | undefined;
   onItemRendered?: ((...args: any[]) => any) | undefined;
 }>, {
+  readonly style: vue.StyleValue;
   readonly className: string;
   readonly direction: EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
   readonly data: any[];

package/lib/components/virtual-list/src/components/fixed-size-list.d.ts

@@ -18,12 +18,7 @@ declare const FixedSizeList: vue.DefineComponent<vue.ExtractPropTypes<{
   };
   readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
   readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
-  readonly style: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly style: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly useIsScrolling: BooleanConstructor;
   readonly width: {
     readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
@@ -137,12 +132,7 @@ declare const FixedSizeList: vue.DefineComponent<vue.ExtractPropTypes<{
   };
   readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
   readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
-  readonly style: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly style: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | vue.StyleValue[]) | (() => vue.StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly useIsScrolling: BooleanConstructor;
   readonly width: {
     readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
@@ -185,6 +175,7 @@ declare const FixedSizeList: vue.DefineComponent<vue.ExtractPropTypes<{
   "onEnd-reached"?: ((...args: any[]) => any) | undefined;
 }>, {
   readonly layout: EpPropMergeType<StringConstructor, "horizontal" | "vertical", never>;
+  readonly style: vue.StyleValue;
   readonly className: string;
   readonly direction: EpPropMergeType<StringConstructor, "ltr" | "rtl", never>;
   readonly data: any[];

package/lib/components/virtual-list/src/props.d.ts

@@ -18,12 +18,7 @@ declare const virtualizedProps: {
   };
   readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
   readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
-  readonly style: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly style: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly useIsScrolling: BooleanConstructor;
   readonly width: {
     readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
@@ -53,12 +48,7 @@ declare const virtualizedListProps: {
   };
   readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
   readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
-  readonly style: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly style: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly useIsScrolling: BooleanConstructor;
   readonly width: {
     readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;
@@ -109,12 +99,7 @@ declare const virtualizedGridProps: {
   };
   readonly innerElement: EpPropFinalized<readonly [StringConstructor, ObjectConstructor], unknown, unknown, "div", boolean>;
   readonly innerProps: EpPropFinalized<(new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>) | (((new (...args: any[]) => Record<string, unknown>) | (() => Record<string, unknown>)) | null)[], unknown, unknown, () => {}, boolean>;
-  readonly style: {
-    readonly type: vue.PropType<EpPropMergeType<(new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown>>;
-    readonly required: false;
-    readonly validator: ((val: unknown) => boolean) | undefined;
-    __epPropKey: true;
-  };
+  readonly style: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown, undefined, boolean>;
   readonly useIsScrolling: BooleanConstructor;
   readonly width: {
     readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], unknown, unknown>>;

package/lib/components/virtual-list/src/props.js

@@ -57,11 +57,15 @@ const virtualizedProps = require_runtime.buildProps({
 		type: require_runtime.definePropType(Object),
 		default: () => ({})
 	},
-	style: { type: require_runtime.definePropType([
-		Object,
-		String,
-		Array
-	]) },
+	style: {
+		type: require_runtime.definePropType([
+			Object,
+			String,
+			Array,
+			Boolean
+		]),
+		default: void 0
+	},
 	useIsScrolling: Boolean,
 	width: {
 		type: [Number, String],

package/lib/components/virtual-list/src/props.js.map

@@ -1 +1 @@
-{"version":3,"file":"props.js","names":["buildProp","definePropType","VERTICAL","buildProps","mutable"],"sources":["../../../../../../packages/components/virtual-list/src/props.ts"],"sourcesContent":["import {\n  buildProp,\n  buildProps,\n  definePropType,\n  mutable,\n} from '@element-plus/utils'\nimport { VERTICAL } from './defaults'\n\nimport type { ExtractPropTypes, ExtractPublicPropTypes, StyleValue } from 'vue'\nimport type { GridItemKeyGetter, ItemSize } from './types'\n\nconst itemSize = buildProp({\n  type: definePropType<number | ItemSize>([Number, Function]),\n  required: true,\n} as const)\n\nconst estimatedItemSize = buildProp({\n  type: Number,\n} as const)\n\nconst cache = buildProp({\n  type: Number,\n  default: 2,\n} as const)\n\nconst direction = buildProp({\n  type: String,\n  values: ['ltr', 'rtl'],\n  default: 'ltr',\n} as const)\n\nconst initScrollOffset = buildProp({\n  type: Number,\n  default: 0,\n} as const)\n\nconst total = buildProp({\n  type: Number,\n  required: true,\n} as const)\n\nconst layout = buildProp({\n  type: String,\n  values: ['horizontal', 'vertical'],\n  default: VERTICAL,\n} as const)\n\nexport const virtualizedProps = buildProps({\n  className: {\n    type: String,\n    default: '',\n  },\n\n  containerElement: {\n    type: definePropType<string | Element>([String, Object]),\n    default: 'div',\n  },\n\n  data: {\n    type: definePropType<any[]>(Array),\n    default: () => mutable([] as const),\n  },\n\n  /**\n   * @description controls the horizontal direction.\n   */\n  direction,\n\n  height: {\n    type: [String, Number],\n    required: true,\n  },\n\n  innerElement: {\n    type: [String, Object],\n    default: 'div',\n  },\n\n  innerProps: {\n    type: definePropType<Record<string, unknown>>(Object),\n    default: () => ({}),\n  },\n\n  style: {\n    type: definePropType<StyleValue>([Object, String, Array]),\n  },\n\n  useIsScrolling: Boolean,\n\n  width: {\n    type: [Number, String],\n    required: false,\n  },\n\n  innerWidth: {\n    type: [Number, String],\n    required: false,\n  },\n\n  perfMode: {\n    type: Boolean,\n    default: true,\n  },\n  scrollbarAlwaysOn: Boolean,\n} as const)\n\nexport const virtualizedListProps = buildProps({\n  /**\n   * @description describes how many items should be pre rendered to the head\n   * and the tail of the window\n   */\n  cache,\n\n  estimatedItemSize,\n\n  /**\n   * @description controls the list's orientation\n   */\n  layout,\n\n  initScrollOffset,\n\n  /**\n   * @description describes the total number of the list.\n   */\n  total,\n\n  itemSize,\n  ...virtualizedProps,\n} as const)\n\nconst scrollbarSize = {\n  type: Number,\n  default: 6,\n} as const\n\nconst startGap = { type: Number, default: 0 } as const\nconst endGap = { type: Number, default: 2 } as const\n\nexport const virtualizedGridProps = buildProps({\n  columnCache: cache,\n  columnWidth: itemSize,\n  estimatedColumnWidth: estimatedItemSize,\n  estimatedRowHeight: estimatedItemSize,\n  initScrollLeft: initScrollOffset,\n  initScrollTop: initScrollOffset,\n  itemKey: {\n    type: definePropType<GridItemKeyGetter>(Function),\n    default: ({\n      columnIndex,\n      rowIndex,\n    }: {\n      columnIndex: number\n      rowIndex: number\n    }) => `${rowIndex}:${columnIndex}`,\n  },\n  rowCache: cache,\n  rowHeight: itemSize,\n  totalColumn: total,\n  totalRow: total,\n  hScrollbarSize: scrollbarSize,\n  vScrollbarSize: scrollbarSize,\n  scrollbarStartGap: startGap,\n  scrollbarEndGap: endGap,\n  role: String,\n  ...virtualizedProps,\n} as const)\n\nexport const virtualizedScrollbarProps = buildProps({\n  alwaysOn: Boolean,\n  class: String,\n  layout,\n  total,\n  ratio: {\n    type: Number,\n    required: true,\n  },\n  clientSize: {\n    type: Number,\n    required: true,\n  },\n  scrollFrom: {\n    type: Number,\n    required: true,\n  },\n  scrollbarSize,\n  startGap,\n  endGap,\n\n  visible: Boolean,\n} as const)\n\nexport type VirtualizedProps = ExtractPropTypes<typeof virtualizedProps>\nexport type VirtualizedPropsPublic = ExtractPublicPropTypes<\n  typeof virtualizedProps\n>\nexport type VirtualizedListProps = ExtractPropTypes<typeof virtualizedListProps>\nexport type VirtualizedListPropsPublic = ExtractPublicPropTypes<\n  typeof virtualizedListProps\n>\nexport type VirtualizedGridProps = ExtractPropTypes<typeof virtualizedGridProps>\nexport type VirtualizedGridPropsPublic = ExtractPublicPropTypes<\n  typeof virtualizedGridProps\n>\n\nexport type VirtualizedScrollbarProps = ExtractPropTypes<\n  typeof virtualizedScrollbarProps\n>\nexport type VirtualizedScrollbarPropsPublic = ExtractPublicPropTypes<\n  typeof virtualizedScrollbarProps\n>\n"],"mappings":";;;;;;AAWA,MAAM,WAAWA,0BAAU;CACzB,MAAMC,+BAAkC,CAAC,QAAQ,SAAS,CAAC;CAC3D,UAAU;CACX,CAAU;AAEX,MAAM,oBAAoBD,0BAAU,EAClC,MAAM,QACP,CAAU;AAEX,MAAM,QAAQA,0BAAU;CACtB,MAAM;CACN,SAAS;CACV,CAAU;AAEX,MAAM,YAAYA,0BAAU;CAC1B,MAAM;CACN,QAAQ,CAAC,OAAO,MAAM;CACtB,SAAS;CACV,CAAU;AAEX,MAAM,mBAAmBA,0BAAU;CACjC,MAAM;CACN,SAAS;CACV,CAAU;AAEX,MAAM,QAAQA,0BAAU;CACtB,MAAM;CACN,UAAU;CACX,CAAU;AAEX,MAAM,SAASA,0BAAU;CACvB,MAAM;CACN,QAAQ,CAAC,cAAc,WAAW;CAClC,SAASE;CACV,CAAU;AAEX,MAAa,mBAAmBC,2BAAW;CACzC,WAAW;EACT,MAAM;EACN,SAAS;EACV;CAED,kBAAkB;EAChB,MAAMF,+BAAiC,CAAC,QAAQ,OAAO,CAAC;EACxD,SAAS;EACV;CAED,MAAM;EACJ,MAAMA,+BAAsB,MAAM;EAClC,eAAeG,2BAAQ,EAAE,CAAU;EACpC;CAKD;CAEA,QAAQ;EACN,MAAM,CAAC,QAAQ,OAAO;EACtB,UAAU;EACX;CAED,cAAc;EACZ,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;CAED,YAAY;EACV,MAAMH,+BAAwC,OAAO;EACrD,gBAAgB,EAAE;EACnB;CAED,OAAO,EACL,MAAMA,+BAA2B;EAAC;EAAQ;EAAQ;EAAM,CAAC,EAC1D;CAED,gBAAgB;CAEhB,OAAO;EACL,MAAM,CAAC,QAAQ,OAAO;EACtB,UAAU;EACX;CAED,YAAY;EACV,MAAM,CAAC,QAAQ,OAAO;EACtB,UAAU;EACX;CAED,UAAU;EACR,MAAM;EACN,SAAS;EACV;CACD,mBAAmB;CACpB,CAAU;AAEX,MAAa,uBAAuBE,2BAAW;CAK7C;CAEA;CAKA;CAEA;CAKA;CAEA;CACA,GAAG;CACJ,CAAU;AAEX,MAAM,gBAAgB;CACpB,MAAM;CACN,SAAS;CACV;AAED,MAAM,WAAW;CAAE,MAAM;CAAQ,SAAS;CAAG;AAC7C,MAAM,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAG;AAE3C,MAAa,uBAAuBA,2BAAW;CAC7C,aAAa;CACb,aAAa;CACb,sBAAsB;CACtB,oBAAoB;CACpB,gBAAgB;CAChB,eAAe;CACf,SAAS;EACP,MAAMF,+BAAkC,SAAS;EACjD,UAAU,EACR,aACA,eAII,GAAG,SAAS,GAAG;EACtB;CACD,UAAU;CACV,WAAW;CACX,aAAa;CACb,UAAU;CACV,gBAAgB;CAChB,gBAAgB;CAChB,mBAAmB;CACnB,iBAAiB;CACjB,MAAM;CACN,GAAG;CACJ,CAAU;AAEX,MAAa,4BAA4BE,2BAAW;CAClD,UAAU;CACV,OAAO;CACP;CACA;CACA,OAAO;EACL,MAAM;EACN,UAAU;EACX;CACD,YAAY;EACV,MAAM;EACN,UAAU;EACX;CACD,YAAY;EACV,MAAM;EACN,UAAU;EACX;CACD;CACA;CACA;CAEA,SAAS;CACV,CAAU"}
+{"version":3,"file":"props.js","names":["buildProp","definePropType","VERTICAL","buildProps","mutable"],"sources":["../../../../../../packages/components/virtual-list/src/props.ts"],"sourcesContent":["import {\n  buildProp,\n  buildProps,\n  definePropType,\n  mutable,\n} from '@element-plus/utils'\nimport { VERTICAL } from './defaults'\n\nimport type { ExtractPropTypes, ExtractPublicPropTypes, StyleValue } from 'vue'\nimport type { GridItemKeyGetter, ItemSize } from './types'\n\nconst itemSize = buildProp({\n  type: definePropType<number | ItemSize>([Number, Function]),\n  required: true,\n} as const)\n\nconst estimatedItemSize = buildProp({\n  type: Number,\n} as const)\n\nconst cache = buildProp({\n  type: Number,\n  default: 2,\n} as const)\n\nconst direction = buildProp({\n  type: String,\n  values: ['ltr', 'rtl'],\n  default: 'ltr',\n} as const)\n\nconst initScrollOffset = buildProp({\n  type: Number,\n  default: 0,\n} as const)\n\nconst total = buildProp({\n  type: Number,\n  required: true,\n} as const)\n\nconst layout = buildProp({\n  type: String,\n  values: ['horizontal', 'vertical'],\n  default: VERTICAL,\n} as const)\n\nexport const virtualizedProps = buildProps({\n  className: {\n    type: String,\n    default: '',\n  },\n\n  containerElement: {\n    type: definePropType<string | Element>([String, Object]),\n    default: 'div',\n  },\n\n  data: {\n    type: definePropType<any[]>(Array),\n    default: () => mutable([] as const),\n  },\n\n  /**\n   * @description controls the horizontal direction.\n   */\n  direction,\n\n  height: {\n    type: [String, Number],\n    required: true,\n  },\n\n  innerElement: {\n    type: [String, Object],\n    default: 'div',\n  },\n\n  innerProps: {\n    type: definePropType<Record<string, unknown>>(Object),\n    default: () => ({}),\n  },\n\n  style: {\n    type: definePropType<StyleValue>([Object, String, Array, Boolean]),\n    default: undefined,\n  },\n\n  useIsScrolling: Boolean,\n\n  width: {\n    type: [Number, String],\n    required: false,\n  },\n\n  innerWidth: {\n    type: [Number, String],\n    required: false,\n  },\n\n  perfMode: {\n    type: Boolean,\n    default: true,\n  },\n  scrollbarAlwaysOn: Boolean,\n} as const)\n\nexport const virtualizedListProps = buildProps({\n  /**\n   * @description describes how many items should be pre rendered to the head\n   * and the tail of the window\n   */\n  cache,\n\n  estimatedItemSize,\n\n  /**\n   * @description controls the list's orientation\n   */\n  layout,\n\n  initScrollOffset,\n\n  /**\n   * @description describes the total number of the list.\n   */\n  total,\n\n  itemSize,\n  ...virtualizedProps,\n} as const)\n\nconst scrollbarSize = {\n  type: Number,\n  default: 6,\n} as const\n\nconst startGap = { type: Number, default: 0 } as const\nconst endGap = { type: Number, default: 2 } as const\n\nexport const virtualizedGridProps = buildProps({\n  columnCache: cache,\n  columnWidth: itemSize,\n  estimatedColumnWidth: estimatedItemSize,\n  estimatedRowHeight: estimatedItemSize,\n  initScrollLeft: initScrollOffset,\n  initScrollTop: initScrollOffset,\n  itemKey: {\n    type: definePropType<GridItemKeyGetter>(Function),\n    default: ({\n      columnIndex,\n      rowIndex,\n    }: {\n      columnIndex: number\n      rowIndex: number\n    }) => `${rowIndex}:${columnIndex}`,\n  },\n  rowCache: cache,\n  rowHeight: itemSize,\n  totalColumn: total,\n  totalRow: total,\n  hScrollbarSize: scrollbarSize,\n  vScrollbarSize: scrollbarSize,\n  scrollbarStartGap: startGap,\n  scrollbarEndGap: endGap,\n  role: String,\n  ...virtualizedProps,\n} as const)\n\nexport const virtualizedScrollbarProps = buildProps({\n  alwaysOn: Boolean,\n  class: String,\n  layout,\n  total,\n  ratio: {\n    type: Number,\n    required: true,\n  },\n  clientSize: {\n    type: Number,\n    required: true,\n  },\n  scrollFrom: {\n    type: Number,\n    required: true,\n  },\n  scrollbarSize,\n  startGap,\n  endGap,\n\n  visible: Boolean,\n} as const)\n\nexport type VirtualizedProps = ExtractPropTypes<typeof virtualizedProps>\nexport type VirtualizedPropsPublic = ExtractPublicPropTypes<\n  typeof virtualizedProps\n>\nexport type VirtualizedListProps = ExtractPropTypes<typeof virtualizedListProps>\nexport type VirtualizedListPropsPublic = ExtractPublicPropTypes<\n  typeof virtualizedListProps\n>\nexport type VirtualizedGridProps = ExtractPropTypes<typeof virtualizedGridProps>\nexport type VirtualizedGridPropsPublic = ExtractPublicPropTypes<\n  typeof virtualizedGridProps\n>\n\nexport type VirtualizedScrollbarProps = ExtractPropTypes<\n  typeof virtualizedScrollbarProps\n>\nexport type VirtualizedScrollbarPropsPublic = ExtractPublicPropTypes<\n  typeof virtualizedScrollbarProps\n>\n"],"mappings":";;;;;;AAWA,MAAM,WAAWA,0BAAU;CACzB,MAAMC,+BAAkC,CAAC,QAAQ,SAAS,CAAC;CAC3D,UAAU;CACX,CAAU;AAEX,MAAM,oBAAoBD,0BAAU,EAClC,MAAM,QACP,CAAU;AAEX,MAAM,QAAQA,0BAAU;CACtB,MAAM;CACN,SAAS;CACV,CAAU;AAEX,MAAM,YAAYA,0BAAU;CAC1B,MAAM;CACN,QAAQ,CAAC,OAAO,MAAM;CACtB,SAAS;CACV,CAAU;AAEX,MAAM,mBAAmBA,0BAAU;CACjC,MAAM;CACN,SAAS;CACV,CAAU;AAEX,MAAM,QAAQA,0BAAU;CACtB,MAAM;CACN,UAAU;CACX,CAAU;AAEX,MAAM,SAASA,0BAAU;CACvB,MAAM;CACN,QAAQ,CAAC,cAAc,WAAW;CAClC,SAASE;CACV,CAAU;AAEX,MAAa,mBAAmBC,2BAAW;CACzC,WAAW;EACT,MAAM;EACN,SAAS;EACV;CAED,kBAAkB;EAChB,MAAMF,+BAAiC,CAAC,QAAQ,OAAO,CAAC;EACxD,SAAS;EACV;CAED,MAAM;EACJ,MAAMA,+BAAsB,MAAM;EAClC,eAAeG,2BAAQ,EAAE,CAAU;EACpC;CAKD;CAEA,QAAQ;EACN,MAAM,CAAC,QAAQ,OAAO;EACtB,UAAU;EACX;CAED,cAAc;EACZ,MAAM,CAAC,QAAQ,OAAO;EACtB,SAAS;EACV;CAED,YAAY;EACV,MAAMH,+BAAwC,OAAO;EACrD,gBAAgB,EAAE;EACnB;CAED,OAAO;EACL,MAAMA,+BAA2B;GAAC;GAAQ;GAAQ;GAAO;GAAQ,CAAC;EAClE,SAAS;EACV;CAED,gBAAgB;CAEhB,OAAO;EACL,MAAM,CAAC,QAAQ,OAAO;EACtB,UAAU;EACX;CAED,YAAY;EACV,MAAM,CAAC,QAAQ,OAAO;EACtB,UAAU;EACX;CAED,UAAU;EACR,MAAM;EACN,SAAS;EACV;CACD,mBAAmB;CACpB,CAAU;AAEX,MAAa,uBAAuBE,2BAAW;CAK7C;CAEA;CAKA;CAEA;CAKA;CAEA;CACA,GAAG;CACJ,CAAU;AAEX,MAAM,gBAAgB;CACpB,MAAM;CACN,SAAS;CACV;AAED,MAAM,WAAW;CAAE,MAAM;CAAQ,SAAS;CAAG;AAC7C,MAAM,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAG;AAE3C,MAAa,uBAAuBA,2BAAW;CAC7C,aAAa;CACb,aAAa;CACb,sBAAsB;CACtB,oBAAoB;CACpB,gBAAgB;CAChB,eAAe;CACf,SAAS;EACP,MAAMF,+BAAkC,SAAS;EACjD,UAAU,EACR,aACA,eAII,GAAG,SAAS,GAAG;EACtB;CACD,UAAU;CACV,WAAW;CACX,aAAa;CACb,UAAU;CACV,gBAAgB;CAChB,gBAAgB;CAChB,mBAAmB;CACnB,iBAAiB;CACjB,MAAM;CACN,GAAG;CACJ,CAAU;AAEX,MAAa,4BAA4BE,2BAAW;CAClD,UAAU;CACV,OAAO;CACP;CACA;CACA,OAAO;EACL,MAAM;EACN,UAAU;EACX;CACD,YAAY;EACV,MAAM;EACN,UAAU;EACX;CACD,YAAY;EACV,MAAM;EACN,UAAU;EACX;CACD;CACA;CACA;CAEA,SAAS;CACV,CAAU"}

package/lib/hooks/use-draggable/index.js

@@ -1,6 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../_virtual/_rolldown/runtime.js');
 const require_style = require('../../utils/dom/style.js');
+let lodash_unified = require("lodash-unified");
 let vue = require("vue");
 
 //#region ../../packages/hooks/use-draggable/index.ts
@@ -14,8 +15,8 @@ const useDraggable = (targetRef, dragRef, draggable, overflow) => {
 		if (targetRef.value) {
 			const { offsetX, offsetY } = transform;
 			const targetRect = targetRef.value.getBoundingClientRect();
-			const targetLeft = targetRect.left;
-			const targetTop = targetRect.top;
+			const targetLeft = Math.max(targetRect.left, 0);
+			const targetTop = Math.max(targetRect.top, 0);
 			const targetWidth = targetRect.width;
 			const targetHeight = targetRect.height;
 			const clientWidth = document.documentElement.clientWidth;
@@ -25,8 +26,8 @@ const useDraggable = (targetRef, dragRef, draggable, overflow) => {
 			const maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
 			const maxTop = clientHeight - targetTop - (targetHeight < clientHeight ? targetHeight : 0) + offsetY;
 			if (!overflow?.value) {
-				moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
-				moveY = Math.min(Math.max(moveY, minTop), maxTop);
+				moveX = (0, lodash_unified.clamp)(moveX, minLeft, maxLeft);
+				moveY = (0, lodash_unified.clamp)(moveY, minTop, maxTop);
 			}
 			transform.offsetX = moveX;
 			transform.offsetY = moveY;

package/lib/hooks/use-draggable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["addUnit"],"sources":["../../../../../packages/hooks/use-draggable/index.ts"],"sourcesContent":["import { onBeforeUnmount, onMounted, ref, watchEffect } from 'vue'\nimport { addUnit } from '@element-plus/utils'\n\nimport type { ComputedRef, Ref } from 'vue'\n\nexport const useDraggable = (\n  targetRef: Ref<HTMLElement | undefined>,\n  dragRef: Ref<HTMLElement | undefined>,\n  draggable: ComputedRef<boolean>,\n  overflow?: ComputedRef<boolean>\n) => {\n  const transform = {\n    offsetX: 0,\n    offsetY: 0,\n  }\n\n  const isDragging = ref(false)\n\n  const adjustPosition = (moveX: number, moveY: number) => {\n    if (targetRef.value) {\n      const { offsetX, offsetY } = transform\n      const targetRect = targetRef.value.getBoundingClientRect()\n      const targetLeft = targetRect.left\n      const targetTop = targetRect.top\n      const targetWidth = targetRect.width\n      const targetHeight = targetRect.height\n\n      const clientWidth = document.documentElement.clientWidth\n      const clientHeight = document.documentElement.clientHeight\n\n      const minLeft = -targetLeft + offsetX\n      const minTop = -targetTop + offsetY\n      const maxLeft = clientWidth - targetLeft - targetWidth + offsetX\n      const maxTop =\n        clientHeight -\n        targetTop -\n        (targetHeight < clientHeight ? targetHeight : 0) +\n        offsetY\n\n      if (!overflow?.value) {\n        moveX = Math.min(Math.max(moveX, minLeft), maxLeft)\n        moveY = Math.min(Math.max(moveY, minTop), maxTop)\n      }\n\n      transform.offsetX = moveX\n      transform.offsetY = moveY\n\n      targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(\n        moveY\n      )})`\n    }\n  }\n\n  const onMousedown = (e: MouseEvent) => {\n    const downX = e.clientX\n    const downY = e.clientY\n    const { offsetX, offsetY } = transform\n\n    const onMousemove = (e: MouseEvent) => {\n      if (!isDragging.value) {\n        isDragging.value = true\n      }\n      const moveX = offsetX + e.clientX - downX\n      const moveY = offsetY + e.clientY - downY\n\n      adjustPosition(moveX, moveY)\n    }\n\n    const onMouseup = () => {\n      isDragging.value = false\n      document.removeEventListener('mousemove', onMousemove)\n      document.removeEventListener('mouseup', onMouseup)\n    }\n\n    document.addEventListener('mousemove', onMousemove)\n    document.addEventListener('mouseup', onMouseup)\n  }\n\n  const onDraggable = () => {\n    if (dragRef.value && targetRef.value) {\n      dragRef.value.addEventListener('mousedown', onMousedown)\n      window.addEventListener('resize', updatePosition)\n    }\n  }\n\n  const offDraggable = () => {\n    if (dragRef.value && targetRef.value) {\n      dragRef.value.removeEventListener('mousedown', onMousedown)\n      window.removeEventListener('resize', updatePosition)\n    }\n  }\n\n  const resetPosition = () => {\n    transform.offsetX = 0\n    transform.offsetY = 0\n\n    if (targetRef.value) {\n      targetRef.value.style.transform = ''\n    }\n  }\n\n  const updatePosition = () => {\n    const { offsetX, offsetY } = transform\n\n    adjustPosition(offsetX, offsetY)\n  }\n\n  onMounted(() => {\n    watchEffect(() => {\n      if (draggable.value) {\n        onDraggable()\n      } else {\n        offDraggable()\n      }\n    })\n  })\n\n  onBeforeUnmount(() => {\n    offDraggable()\n  })\n\n  return {\n    isDragging,\n    resetPosition,\n    updatePosition,\n  }\n}\n"],"mappings":";;;;;;AAKA,MAAa,gBACX,WACA,SACA,WACA,aACG;CACH,MAAM,YAAY;EAChB,SAAS;EACT,SAAS;EACV;CAED,MAAM,0BAAiB,MAAM;CAE7B,MAAM,kBAAkB,OAAe,UAAkB;AACvD,MAAI,UAAU,OAAO;GACnB,MAAM,EAAE,SAAS,YAAY;GAC7B,MAAM,aAAa,UAAU,MAAM,uBAAuB;GAC1D,MAAM,aAAa,WAAW;GAC9B,MAAM,YAAY,WAAW;GAC7B,MAAM,cAAc,WAAW;GAC/B,MAAM,eAAe,WAAW;GAEhC,MAAM,cAAc,SAAS,gBAAgB;GAC7C,MAAM,eAAe,SAAS,gBAAgB;GAE9C,MAAM,UAAU,CAAC,aAAa;GAC9B,MAAM,SAAS,CAAC,YAAY;GAC5B,MAAM,UAAU,cAAc,aAAa,cAAc;GACzD,MAAM,SACJ,eACA,aACC,eAAe,eAAe,eAAe,KAC9C;AAEF,OAAI,CAAC,UAAU,OAAO;AACpB,YAAQ,KAAK,IAAI,KAAK,IAAI,OAAO,QAAQ,EAAE,QAAQ;AACnD,YAAQ,KAAK,IAAI,KAAK,IAAI,OAAO,OAAO,EAAE,OAAO;;AAGnD,aAAU,UAAU;AACpB,aAAU,UAAU;AAEpB,aAAU,MAAM,MAAM,YAAY,aAAaA,sBAAQ,MAAM,CAAC,IAAIA,sBAChE,MACD,CAAC;;;CAIN,MAAM,eAAe,MAAkB;EACrC,MAAM,QAAQ,EAAE;EAChB,MAAM,QAAQ,EAAE;EAChB,MAAM,EAAE,SAAS,YAAY;EAE7B,MAAM,eAAe,MAAkB;AACrC,OAAI,CAAC,WAAW,MACd,YAAW,QAAQ;AAKrB,kBAHc,UAAU,EAAE,UAAU,OACtB,UAAU,EAAE,UAAU,MAER;;EAG9B,MAAM,kBAAkB;AACtB,cAAW,QAAQ;AACnB,YAAS,oBAAoB,aAAa,YAAY;AACtD,YAAS,oBAAoB,WAAW,UAAU;;AAGpD,WAAS,iBAAiB,aAAa,YAAY;AACnD,WAAS,iBAAiB,WAAW,UAAU;;CAGjD,MAAM,oBAAoB;AACxB,MAAI,QAAQ,SAAS,UAAU,OAAO;AACpC,WAAQ,MAAM,iBAAiB,aAAa,YAAY;AACxD,UAAO,iBAAiB,UAAU,eAAe;;;CAIrD,MAAM,qBAAqB;AACzB,MAAI,QAAQ,SAAS,UAAU,OAAO;AACpC,WAAQ,MAAM,oBAAoB,aAAa,YAAY;AAC3D,UAAO,oBAAoB,UAAU,eAAe;;;CAIxD,MAAM,sBAAsB;AAC1B,YAAU,UAAU;AACpB,YAAU,UAAU;AAEpB,MAAI,UAAU,MACZ,WAAU,MAAM,MAAM,YAAY;;CAItC,MAAM,uBAAuB;EAC3B,MAAM,EAAE,SAAS,YAAY;AAE7B,iBAAe,SAAS,QAAQ;;AAGlC,0BAAgB;AACd,6BAAkB;AAChB,OAAI,UAAU,MACZ,cAAa;OAEb,eAAc;IAEhB;GACF;AAEF,gCAAsB;AACpB,gBAAc;GACd;AAEF,QAAO;EACL;EACA;EACA;EACD"}
+{"version":3,"file":"index.js","names":["addUnit"],"sources":["../../../../../packages/hooks/use-draggable/index.ts"],"sourcesContent":["import { onBeforeUnmount, onMounted, ref, watchEffect } from 'vue'\nimport { addUnit } from '@element-plus/utils'\nimport { clamp } from 'lodash-unified'\n\nimport type { ComputedRef, Ref } from 'vue'\n\nexport const useDraggable = (\n  targetRef: Ref<HTMLElement | undefined>,\n  dragRef: Ref<HTMLElement | undefined>,\n  draggable: ComputedRef<boolean>,\n  overflow?: ComputedRef<boolean>\n) => {\n  const transform = {\n    offsetX: 0,\n    offsetY: 0,\n  }\n\n  const isDragging = ref(false)\n\n  const adjustPosition = (moveX: number, moveY: number) => {\n    if (targetRef.value) {\n      const { offsetX, offsetY } = transform\n      const targetRect = targetRef.value.getBoundingClientRect()\n      const targetLeft = Math.max(targetRect.left, 0)\n      const targetTop = Math.max(targetRect.top, 0)\n      const targetWidth = targetRect.width\n      const targetHeight = targetRect.height\n\n      const clientWidth = document.documentElement.clientWidth\n      const clientHeight = document.documentElement.clientHeight\n\n      const minLeft = -targetLeft + offsetX\n      const minTop = -targetTop + offsetY\n      const maxLeft = clientWidth - targetLeft - targetWidth + offsetX\n      const maxTop =\n        clientHeight -\n        targetTop -\n        (targetHeight < clientHeight ? targetHeight : 0) +\n        offsetY\n\n      if (!overflow?.value) {\n        moveX = clamp(moveX, minLeft, maxLeft)\n        moveY = clamp(moveY, minTop, maxTop)\n      }\n\n      transform.offsetX = moveX\n      transform.offsetY = moveY\n\n      targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(\n        moveY\n      )})`\n    }\n  }\n\n  const onMousedown = (e: MouseEvent) => {\n    const downX = e.clientX\n    const downY = e.clientY\n    const { offsetX, offsetY } = transform\n\n    const onMousemove = (e: MouseEvent) => {\n      if (!isDragging.value) {\n        isDragging.value = true\n      }\n      const moveX = offsetX + e.clientX - downX\n      const moveY = offsetY + e.clientY - downY\n\n      adjustPosition(moveX, moveY)\n    }\n\n    const onMouseup = () => {\n      isDragging.value = false\n      document.removeEventListener('mousemove', onMousemove)\n      document.removeEventListener('mouseup', onMouseup)\n    }\n\n    document.addEventListener('mousemove', onMousemove)\n    document.addEventListener('mouseup', onMouseup)\n  }\n\n  const onDraggable = () => {\n    if (dragRef.value && targetRef.value) {\n      dragRef.value.addEventListener('mousedown', onMousedown)\n      window.addEventListener('resize', updatePosition)\n    }\n  }\n\n  const offDraggable = () => {\n    if (dragRef.value && targetRef.value) {\n      dragRef.value.removeEventListener('mousedown', onMousedown)\n      window.removeEventListener('resize', updatePosition)\n    }\n  }\n\n  const resetPosition = () => {\n    transform.offsetX = 0\n    transform.offsetY = 0\n\n    if (targetRef.value) {\n      targetRef.value.style.transform = ''\n    }\n  }\n\n  const updatePosition = () => {\n    const { offsetX, offsetY } = transform\n\n    adjustPosition(offsetX, offsetY)\n  }\n\n  onMounted(() => {\n    watchEffect(() => {\n      if (draggable.value) {\n        onDraggable()\n      } else {\n        offDraggable()\n      }\n    })\n  })\n\n  onBeforeUnmount(() => {\n    offDraggable()\n  })\n\n  return {\n    isDragging,\n    resetPosition,\n    updatePosition,\n  }\n}\n"],"mappings":";;;;;;;AAMA,MAAa,gBACX,WACA,SACA,WACA,aACG;CACH,MAAM,YAAY;EAChB,SAAS;EACT,SAAS;EACV;CAED,MAAM,0BAAiB,MAAM;CAE7B,MAAM,kBAAkB,OAAe,UAAkB;AACvD,MAAI,UAAU,OAAO;GACnB,MAAM,EAAE,SAAS,YAAY;GAC7B,MAAM,aAAa,UAAU,MAAM,uBAAuB;GAC1D,MAAM,aAAa,KAAK,IAAI,WAAW,MAAM,EAAE;GAC/C,MAAM,YAAY,KAAK,IAAI,WAAW,KAAK,EAAE;GAC7C,MAAM,cAAc,WAAW;GAC/B,MAAM,eAAe,WAAW;GAEhC,MAAM,cAAc,SAAS,gBAAgB;GAC7C,MAAM,eAAe,SAAS,gBAAgB;GAE9C,MAAM,UAAU,CAAC,aAAa;GAC9B,MAAM,SAAS,CAAC,YAAY;GAC5B,MAAM,UAAU,cAAc,aAAa,cAAc;GACzD,MAAM,SACJ,eACA,aACC,eAAe,eAAe,eAAe,KAC9C;AAEF,OAAI,CAAC,UAAU,OAAO;AACpB,sCAAc,OAAO,SAAS,QAAQ;AACtC,sCAAc,OAAO,QAAQ,OAAO;;AAGtC,aAAU,UAAU;AACpB,aAAU,UAAU;AAEpB,aAAU,MAAM,MAAM,YAAY,aAAaA,sBAAQ,MAAM,CAAC,IAAIA,sBAChE,MACD,CAAC;;;CAIN,MAAM,eAAe,MAAkB;EACrC,MAAM,QAAQ,EAAE;EAChB,MAAM,QAAQ,EAAE;EAChB,MAAM,EAAE,SAAS,YAAY;EAE7B,MAAM,eAAe,MAAkB;AACrC,OAAI,CAAC,WAAW,MACd,YAAW,QAAQ;AAKrB,kBAHc,UAAU,EAAE,UAAU,OACtB,UAAU,EAAE,UAAU,MAER;;EAG9B,MAAM,kBAAkB;AACtB,cAAW,QAAQ;AACnB,YAAS,oBAAoB,aAAa,YAAY;AACtD,YAAS,oBAAoB,WAAW,UAAU;;AAGpD,WAAS,iBAAiB,aAAa,YAAY;AACnD,WAAS,iBAAiB,WAAW,UAAU;;CAGjD,MAAM,oBAAoB;AACxB,MAAI,QAAQ,SAAS,UAAU,OAAO;AACpC,WAAQ,MAAM,iBAAiB,aAAa,YAAY;AACxD,UAAO,iBAAiB,UAAU,eAAe;;;CAIrD,MAAM,qBAAqB;AACzB,MAAI,QAAQ,SAAS,UAAU,OAAO;AACpC,WAAQ,MAAM,oBAAoB,aAAa,YAAY;AAC3D,UAAO,oBAAoB,UAAU,eAAe;;;CAIxD,MAAM,sBAAsB;AAC1B,YAAU,UAAU;AACpB,YAAU,UAAU;AAEpB,MAAI,UAAU,MACZ,WAAU,MAAM,MAAM,YAAY;;CAItC,MAAM,uBAAuB;EAC3B,MAAM,EAAE,SAAS,YAAY;AAE7B,iBAAe,SAAS,QAAQ;;AAGlC,0BAAgB;AACd,6BAAkB;AAChB,OAAI,UAAU,MACZ,cAAa;OAEb,eAAc;IAEhB;GACF;AAEF,gCAAsB;AACpB,gBAAc;GACd;AAEF,QAAO;EACL;EACA;EACA;EACD"}