@element-plus/nightly 0.0.20240206 → 0.0.20240208

package/es/components/index.mjs

@@ -166,7 +166,7 @@ export { selectGroupKey, selectKey } from './select/src/token.mjs';
 export { selectV2InjectionKey } from './select-v2/src/token.mjs';
 export { skeletonProps } from './skeleton/src/skeleton.mjs';
 export { skeletonItemProps } from './skeleton/src/skeleton-item.mjs';
-export { sliderEmits, sliderProps } from './slider/src/slider.mjs';
+export { sliderEmits, sliderProps } from './slider/src/slider2.mjs';
 export { sliderContextKey } from './slider/src/constants.mjs';
 export { spaceProps } from './space/src/space.mjs';
 export { useSpace } from './space/src/use-space.mjs';

package/es/components/scrollbar/index.d.ts

@@ -75,22 +75,20 @@ export declare const ElScrollbar: import("@element-plus/nightly/es/utils").SFCWi
     scrollbarRef: import("vue").Ref<HTMLDivElement | undefined>;
     wrapRef: import("vue").Ref<HTMLDivElement | undefined>;
     resizeRef: import("vue").Ref<HTMLElement | undefined>;
-    sizeWidth: import("vue").Ref<string>;
-    sizeHeight: import("vue").Ref<string>;
     barRef: import("vue").Ref<({
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
             readonly always: import("@element-plus/nightly/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-            readonly ratioX: number;
-            readonly ratioY: number;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-            readonly width: StringConstructor;
-            readonly height: StringConstructor;
-            readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-            readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "always" | "ratioX" | "ratioY">;
+            readonly minSize: {
+                readonly type: import("vue").PropType<number>;
+                readonly required: true;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "always">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -106,23 +104,33 @@ export declare const ElScrollbar: import("@element-plus/nightly/es/utils").SFCWi
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-            readonly width: StringConstructor;
-            readonly height: StringConstructor;
-            readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-            readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+            readonly minSize: {
+                readonly type: import("vue").PropType<number>;
+                readonly required: true;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
         }>>, {
             props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
                 readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-                readonly width: StringConstructor;
-                readonly height: StringConstructor;
-                readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-                readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+                readonly minSize: {
+                    readonly type: import("vue").PropType<number>;
+                    readonly required: true;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
+                    __epPropKey: true;
+                };
             }>> & {
                 [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
             }>>;
+            scrollbar: import("./src/constants").ScrollbarContext | undefined;
             moveX: import("vue").Ref<number>;
             moveY: import("vue").Ref<number>;
+            sizeWidth: import("vue").Ref<string>;
+            sizeHeight: import("vue").Ref<string>;
+            ratioY: import("vue").Ref<number>;
+            ratioX: import("vue").Ref<number>;
             handleScroll: (wrap: HTMLDivElement) => void;
+            update: () => void;
             Thumb: import("vue").DefineComponent<{
                 readonly vertical: BooleanConstructor;
                 readonly size: StringConstructor;
@@ -225,8 +233,6 @@ export declare const ElScrollbar: import("@element-plus/nightly/es/utils").SFCWi
             }>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
             readonly always: import("@element-plus/nightly/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-            readonly ratioX: number;
-            readonly ratioY: number;
         }> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -249,23 +255,33 @@ export declare const ElScrollbar: import("@element-plus/nightly/es/utils").SFCWi
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
         readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-        readonly width: StringConstructor;
-        readonly height: StringConstructor;
-        readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-        readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+        readonly minSize: {
+            readonly type: import("vue").PropType<number>;
+            readonly required: true;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
     }>> & import("vue").ShallowUnwrapRef<{
         props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
             readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-            readonly width: StringConstructor;
-            readonly height: StringConstructor;
-            readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-            readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+            readonly minSize: {
+                readonly type: import("vue").PropType<number>;
+                readonly required: true;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
         }>> & {
             [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
         }>>;
+        scrollbar: import("./src/constants").ScrollbarContext | undefined;
         moveX: import("vue").Ref<number>;
         moveY: import("vue").Ref<number>;
+        sizeWidth: import("vue").Ref<string>;
+        sizeHeight: import("vue").Ref<string>;
+        ratioY: import("vue").Ref<number>;
+        ratioX: import("vue").Ref<number>;
         handleScroll: (wrap: HTMLDivElement) => void;
+        update: () => void;
         Thumb: import("vue").DefineComponent<{
             readonly vertical: BooleanConstructor;
             readonly size: StringConstructor;
@@ -367,8 +383,6 @@ export declare const ElScrollbar: import("@element-plus/nightly/es/utils").SFCWi
             readonly always: boolean;
         }>;
     }> & {} & import("vue").ComponentCustomProperties) | undefined>;
-    ratioY: import("vue").Ref<number>;
-    ratioX: import("vue").Ref<number>;
     wrapStyle: import("vue").ComputedRef<import("vue").StyleValue>;
     wrapKls: import("vue").ComputedRef<(string | unknown[] | {
         [x: string]: boolean;
@@ -381,23 +395,33 @@ export declare const ElScrollbar: import("@element-plus/nightly/es/utils").SFCWi
     update: () => void;
     Bar: import("vue").DefineComponent<{
         readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-        readonly width: StringConstructor;
-        readonly height: StringConstructor;
-        readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-        readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+        readonly minSize: {
+            readonly type: import("vue").PropType<number>;
+            readonly required: true;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
     }, {
         props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
             readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-            readonly width: StringConstructor;
-            readonly height: StringConstructor;
-            readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-            readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+            readonly minSize: {
+                readonly type: import("vue").PropType<number>;
+                readonly required: true;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
         }>> & {
             [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
         }>>;
+        scrollbar: import("./src/constants").ScrollbarContext | undefined;
         moveX: import("vue").Ref<number>;
         moveY: import("vue").Ref<number>;
+        sizeWidth: import("vue").Ref<string>;
+        sizeHeight: import("vue").Ref<string>;
+        ratioY: import("vue").Ref<number>;
+        ratioX: import("vue").Ref<number>;
         handleScroll: (wrap: HTMLDivElement) => void;
+        update: () => void;
         Thumb: import("vue").DefineComponent<{
             readonly vertical: BooleanConstructor;
             readonly size: StringConstructor;
@@ -500,14 +524,14 @@ export declare const ElScrollbar: import("@element-plus/nightly/es/utils").SFCWi
         }>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-        readonly width: StringConstructor;
-        readonly height: StringConstructor;
-        readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-        readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+        readonly minSize: {
+            readonly type: import("vue").PropType<number>;
+            readonly required: true;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
     }>>, {
         readonly always: import("@element-plus/nightly/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-        readonly ratioX: number;
-        readonly ratioY: number;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     scroll: ({ scrollTop, scrollLeft, }: {

package/es/components/scrollbar/src/bar.d.ts

@@ -2,10 +2,12 @@ import type { ExtractPropTypes } from 'vue';
 import type Bar from './bar.vue';
 export declare const barProps: {
     readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-    readonly width: StringConstructor;
-    readonly height: StringConstructor;
-    readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-    readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+    readonly minSize: {
+        readonly type: import("vue").PropType<number>;
+        readonly required: true;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
 };
 export declare type BarProps = ExtractPropTypes<typeof barProps>;
 export declare type BarInstance = InstanceType<typeof Bar>;

package/es/components/scrollbar/src/bar.mjs

@@ -6,15 +6,9 @@ const barProps = buildProps({
     type: Boolean,
     default: true
   },
-  width: String,
-  height: String,
-  ratioX: {
+  minSize: {
     type: Number,
-    default: 1
-  },
-  ratioY: {
-    type: Number,
-    default: 1
+    required: true
   }
 });
 

package/es/components/scrollbar/src/bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"bar.mjs","sources":["../../../../../../packages/components/scrollbar/src/bar.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type Bar from './bar.vue'\n\nexport const barProps = buildProps({\n  always: {\n    type: Boolean,\n    default: true,\n  },\n  width: String,\n  height: String,\n  ratioX: {\n    type: Number,\n    default: 1,\n  },\n  ratioY: {\n    type: Number,\n    default: 1,\n  },\n} as const)\nexport type BarProps = ExtractPropTypes<typeof barProps>\n\nexport type BarInstance = InstanceType<typeof Bar>\n"],"names":[],"mappings":";;;AACY,MAAC,QAAQ,GAAG,UAAU,CAAC;AACnC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,KAAK,EAAE,MAAM;AACf,EAAE,MAAM,EAAE,MAAM;AAChB,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,CAAC;;;;"}
+{"version":3,"file":"bar.mjs","sources":["../../../../../../packages/components/scrollbar/src/bar.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type Bar from './bar.vue'\n\nexport const barProps = buildProps({\n  always: {\n    type: Boolean,\n    default: true,\n  },\n  minSize: {\n    type: Number,\n    required: true,\n  },\n} as const)\nexport type BarProps = ExtractPropTypes<typeof barProps>\n\nexport type BarInstance = InstanceType<typeof Bar>\n"],"names":[],"mappings":";;;AACY,MAAC,QAAQ,GAAG,UAAU,CAAC;AACnC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,QAAQ,EAAE,IAAI;AAClB,GAAG;AACH,CAAC;;;;"}

package/es/components/scrollbar/src/bar.vue.d.ts

@@ -1,22 +1,32 @@
 declare const _default: import("vue").DefineComponent<{
     readonly always: import("../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-    readonly width: StringConstructor;
-    readonly height: StringConstructor;
-    readonly ratioX: import("../../../utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-    readonly ratioY: import("../../../utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+    readonly minSize: {
+        readonly type: import("vue").PropType<number>;
+        readonly required: true;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         readonly always: import("../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-        readonly width: StringConstructor;
-        readonly height: StringConstructor;
-        readonly ratioX: import("../../../utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-        readonly ratioY: import("../../../utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+        readonly minSize: {
+            readonly type: import("vue").PropType<number>;
+            readonly required: true;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
     }>> & {
         [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
     }>>;
+    scrollbar: import("./constants").ScrollbarContext | undefined;
     moveX: import("vue").Ref<number>;
     moveY: import("vue").Ref<number>;
+    sizeWidth: import("vue").Ref<string>;
+    sizeHeight: import("vue").Ref<string>;
+    ratioY: import("vue").Ref<number>;
+    ratioX: import("vue").Ref<number>;
     handleScroll: (wrap: HTMLDivElement) => void;
+    update: () => void;
     Thumb: import("vue").DefineComponent<{
         readonly vertical: BooleanConstructor;
         readonly size: StringConstructor;
@@ -119,13 +129,13 @@ declare const _default: import("vue").DefineComponent<{
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly always: import("../../../utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-    readonly width: StringConstructor;
-    readonly height: StringConstructor;
-    readonly ratioX: import("../../../utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-    readonly ratioY: import("../../../utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+    readonly minSize: {
+        readonly type: import("vue").PropType<number>;
+        readonly required: true;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
 }>>, {
     readonly always: import("../../../utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-    readonly ratioX: number;
-    readonly ratioY: number;
 }>;
 export default _default;

package/es/components/scrollbar/src/bar2.mjs

@@ -1,7 +1,8 @@
-import { defineComponent, ref, openBlock, createElementBlock, Fragment, createVNode } from 'vue';
+import { defineComponent, inject, ref, openBlock, createElementBlock, Fragment, createVNode } from 'vue';
 import { GAP } from './util.mjs';
 import Thumb from './thumb2.mjs';
 import { barProps } from './bar.mjs';
+import { scrollbarContextKey } from './constants.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -9,31 +10,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: barProps,
   setup(__props, { expose }) {
     const props = __props;
+    const scrollbar = inject(scrollbarContextKey);
     const moveX = ref(0);
     const moveY = ref(0);
+    const sizeWidth = ref("");
+    const sizeHeight = ref("");
+    const ratioY = ref(1);
+    const ratioX = ref(1);
     const handleScroll = (wrap) => {
       if (wrap) {
         const offsetHeight = wrap.offsetHeight - GAP;
         const offsetWidth = wrap.offsetWidth - GAP;
-        moveY.value = wrap.scrollTop * 100 / offsetHeight * props.ratioY;
-        moveX.value = wrap.scrollLeft * 100 / offsetWidth * props.ratioX;
+        moveY.value = wrap.scrollTop * 100 / offsetHeight * ratioY.value;
+        moveX.value = wrap.scrollLeft * 100 / offsetWidth * ratioX.value;
       }
     };
+    const update = () => {
+      const wrap = scrollbar == null ? void 0 : scrollbar.wrapElement;
+      if (!wrap)
+        return;
+      const offsetHeight = wrap.offsetHeight - GAP;
+      const offsetWidth = wrap.offsetWidth - GAP;
+      const originalHeight = offsetHeight ** 2 / wrap.scrollHeight;
+      const originalWidth = offsetWidth ** 2 / wrap.scrollWidth;
+      const height = Math.max(originalHeight, props.minSize);
+      const width = Math.max(originalWidth, props.minSize);
+      ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
+      ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
+      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : "";
+      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : "";
+    };
     expose({
-      handleScroll
+      handleScroll,
+      update
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createVNode(Thumb, {
           move: moveX.value,
-          ratio: _ctx.ratioX,
-          size: _ctx.width,
+          ratio: ratioX.value,
+          size: sizeWidth.value,
           always: _ctx.always
         }, null, 8, ["move", "ratio", "size", "always"]),
         createVNode(Thumb, {
           move: moveY.value,
-          ratio: _ctx.ratioY,
-          size: _ctx.height,
+          ratio: ratioY.value,
+          size: sizeHeight.value,
           vertical: "",
           always: _ctx.always
         }, null, 8, ["move", "ratio", "size", "always"])

package/es/components/scrollbar/src/bar2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"bar2.mjs","sources":["../../../../../../packages/components/scrollbar/src/bar.vue"],"sourcesContent":["<template>\n  <thumb :move=\"moveX\" :ratio=\"ratioX\" :size=\"width\" :always=\"always\" />\n  <thumb\n    :move=\"moveY\"\n    :ratio=\"ratioY\"\n    :size=\"height\"\n    vertical\n    :always=\"always\"\n  />\n</template>\n<script lang=\"ts\" setup>\nimport { ref } from 'vue'\nimport { GAP } from './util'\nimport Thumb from './thumb.vue'\nimport { barProps } from './bar'\n\nconst props = defineProps(barProps)\n\nconst moveX = ref(0)\nconst moveY = ref(0)\n\nconst handleScroll = (wrap: HTMLDivElement) => {\n  if (wrap) {\n    const offsetHeight = wrap.offsetHeight - GAP\n    const offsetWidth = wrap.offsetWidth - GAP\n\n    moveY.value = ((wrap.scrollTop * 100) / offsetHeight) * props.ratioY\n    moveX.value = ((wrap.scrollLeft * 100) / offsetWidth) * props.ratioX\n  }\n}\n\ndefineExpose({\n  handleScroll,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;AAkBA,IAAM,MAAA,KAAA,GAAQ,IAAI,CAAC,CAAA,CAAA;AACnB,IAAM,MAAA,KAAA,GAAQ,IAAI,CAAC,CAAA,CAAA;AAEnB,IAAM,MAAA,YAAA,GAAe,CAAC,IAAyB,KAAA;AAC7C,MAAA,IAAI,IAAM,EAAA;AACR,QAAM,MAAA,YAAA,GAAe,KAAK,YAAe,GAAA,GAAA,CAAA;AACzC,QAAM,MAAA,WAAA,GAAc,KAAK,WAAc,GAAA,GAAA,CAAA;AAEvC,QAAA,KAAA,CAAM,KAAU,GAAA,IAAA,CAAK,SAAY,GAAA,GAAA,GAAO,eAAgB,KAAM,CAAA,MAAA,CAAA;AAC9D,QAAA,KAAA,CAAM,KAAU,GAAA,IAAA,CAAK,UAAa,GAAA,GAAA,GAAO,cAAe,KAAM,CAAA,MAAA,CAAA;AAAA,OAChE;AAAA,KACF,CAAA;AAEA,IAAa,MAAA,CAAA;AAAA,MACX,YAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"bar2.mjs","sources":["../../../../../../packages/components/scrollbar/src/bar.vue"],"sourcesContent":["<template>\n  <thumb :move=\"moveX\" :ratio=\"ratioX\" :size=\"sizeWidth\" :always=\"always\" />\n  <thumb\n    :move=\"moveY\"\n    :ratio=\"ratioY\"\n    :size=\"sizeHeight\"\n    vertical\n    :always=\"always\"\n  />\n</template>\n<script lang=\"ts\" setup>\nimport { inject, ref } from 'vue'\nimport { GAP } from './util'\nimport Thumb from './thumb.vue'\nimport { barProps } from './bar'\nimport { scrollbarContextKey } from './constants'\n\nconst props = defineProps(barProps)\n\nconst scrollbar = inject(scrollbarContextKey)\n\nconst moveX = ref(0)\nconst moveY = ref(0)\nconst sizeWidth = ref('')\nconst sizeHeight = ref('')\nconst ratioY = ref(1)\nconst ratioX = ref(1)\n\nconst handleScroll = (wrap: HTMLDivElement) => {\n  if (wrap) {\n    const offsetHeight = wrap.offsetHeight - GAP\n    const offsetWidth = wrap.offsetWidth - GAP\n\n    moveY.value = ((wrap.scrollTop * 100) / offsetHeight) * ratioY.value\n    moveX.value = ((wrap.scrollLeft * 100) / offsetWidth) * ratioX.value\n  }\n}\n\nconst update = () => {\n  const wrap = scrollbar?.wrapElement\n  if (!wrap) return\n  const offsetHeight = wrap.offsetHeight - GAP\n  const offsetWidth = wrap.offsetWidth - GAP\n\n  const originalHeight = offsetHeight ** 2 / wrap.scrollHeight\n  const originalWidth = offsetWidth ** 2 / wrap.scrollWidth\n  const height = Math.max(originalHeight, props.minSize)\n  const width = Math.max(originalWidth, props.minSize)\n\n  ratioY.value =\n    originalHeight /\n    (offsetHeight - originalHeight) /\n    (height / (offsetHeight - height))\n  ratioX.value =\n    originalWidth /\n    (offsetWidth - originalWidth) /\n    (width / (offsetWidth - width))\n\n  sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ''\n  sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ''\n}\n\ndefineExpose({\n  handleScroll,\n  update,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;AAmBA,IAAM,MAAA,SAAA,GAAY,OAAO,mBAAmB,CAAA,CAAA;AAE5C,IAAM,MAAA,KAAA,GAAQ,IAAI,CAAC,CAAA,CAAA;AACnB,IAAM,MAAA,KAAA,GAAQ,IAAI,CAAC,CAAA,CAAA;AACnB,IAAM,MAAA,SAAA,GAAY,IAAI,EAAE,CAAA,CAAA;AACxB,IAAM,MAAA,UAAA,GAAa,IAAI,EAAE,CAAA,CAAA;AACzB,IAAM,MAAA,MAAA,GAAS,IAAI,CAAC,CAAA,CAAA;AACpB,IAAM,MAAA,MAAA,GAAS,IAAI,CAAC,CAAA,CAAA;AAEpB,IAAM,MAAA,YAAA,GAAe,CAAC,IAAyB,KAAA;AAC7C,MAAA,IAAI,IAAM,EAAA;AACR,QAAM,MAAA,YAAA,GAAe,KAAK,YAAe,GAAA,GAAA,CAAA;AACzC,QAAM,MAAA,WAAA,GAAc,KAAK,WAAc,GAAA,GAAA,CAAA;AAEvC,QAAA,KAAA,CAAM,KAAU,GAAA,IAAA,CAAK,SAAY,GAAA,GAAA,GAAO,eAAgB,MAAO,CAAA,KAAA,CAAA;AAC/D,QAAA,KAAA,CAAM,KAAU,GAAA,IAAA,CAAK,UAAa,GAAA,GAAA,GAAO,cAAe,MAAO,CAAA,KAAA,CAAA;AAAA,OACjE;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,MAAM,OAAO,SAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,WAAA,CAAA;AACxB,MAAA,IAAI,CAAC,IAAA;AAAM,QAAA,OAAA;AACX,MAAM,MAAA,YAAA,GAAe,KAAK,YAAe,GAAA,GAAA,CAAA;AACzC,MAAM,MAAA,WAAA,GAAc,KAAK,WAAc,GAAA,GAAA,CAAA;AAEvC,MAAM,MAAA,cAAA,GAAiB,YAAgB,IAAA,CAAA,GAAI,IAAK,CAAA,YAAA,CAAA;AAChD,MAAM,MAAA,aAAA,GAAgB,WAAe,IAAA,CAAA,GAAI,IAAK,CAAA,WAAA,CAAA;AAC9C,MAAA,MAAM,MAAS,GAAA,IAAA,CAAK,GAAI,CAAA,cAAA,EAAgB,MAAM,OAAO,CAAA,CAAA;AACrD,MAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,GAAI,CAAA,aAAA,EAAe,MAAM,OAAO,CAAA,CAAA;AAEnD,MAAA,MAAA,CAAO,KACL,GAAA,cAAA,IACgB,YAAA,GAAA,cAAA,CAAA,cACU,YAAA,GAAA,MAAA,CAAA,CAAA,CAAA;AAC5B,MAAA,MAAA,CAAO,KACL,GAAA,aAAA,IACe,WAAA,GAAA,aAAA,CAAA,aACS,WAAA,GAAA,KAAA,CAAA,CAAA,CAAA;AAE1B,MAAA,UAAA,CAAW,KAAQ,GAAA,MAAA,GAAS,GAAM,GAAA,YAAA,GAAe,GAAG,MAAa,CAAA,EAAA,CAAA,GAAA,EAAA,CAAA;AACjE,MAAA,SAAA,CAAU,KAAQ,GAAA,KAAA,GAAQ,GAAM,GAAA,WAAA,GAAc,GAAG,KAAY,CAAA,EAAA,CAAA,GAAA,EAAA,CAAA;AAAA,KAC/D,CAAA;AAEA,IAAa,MAAA,CAAA;AAAA,MACX,YAAA;AAAA,MACA,MAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -77,22 +77,20 @@ declare const _default: import("vue").DefineComponent<{
     scrollbarRef: import("vue").Ref<HTMLDivElement | undefined>;
     wrapRef: import("vue").Ref<HTMLDivElement | undefined>;
     resizeRef: import("vue").Ref<HTMLElement | undefined>;
-    sizeWidth: import("vue").Ref<string>;
-    sizeHeight: import("vue").Ref<string>;
     barRef: import("vue").Ref<({
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
             readonly always: import("@element-plus/nightly/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-            readonly ratioX: number;
-            readonly ratioY: number;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-            readonly width: StringConstructor;
-            readonly height: StringConstructor;
-            readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-            readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "always" | "ratioX" | "ratioY">;
+            readonly minSize: {
+                readonly type: import("vue").PropType<number>;
+                readonly required: true;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "always">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -108,23 +106,33 @@ declare const _default: import("vue").DefineComponent<{
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
             readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-            readonly width: StringConstructor;
-            readonly height: StringConstructor;
-            readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-            readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+            readonly minSize: {
+                readonly type: import("vue").PropType<number>;
+                readonly required: true;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
         }>>, {
             props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
                 readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-                readonly width: StringConstructor;
-                readonly height: StringConstructor;
-                readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-                readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+                readonly minSize: {
+                    readonly type: import("vue").PropType<number>;
+                    readonly required: true;
+                    readonly validator: ((val: unknown) => boolean) | undefined;
+                    __epPropKey: true;
+                };
             }>> & {
                 [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
             }>>;
+            scrollbar: import("./constants").ScrollbarContext | undefined;
             moveX: import("vue").Ref<number>;
             moveY: import("vue").Ref<number>;
+            sizeWidth: import("vue").Ref<string>;
+            sizeHeight: import("vue").Ref<string>;
+            ratioY: import("vue").Ref<number>;
+            ratioX: import("vue").Ref<number>;
             handleScroll: (wrap: HTMLDivElement) => void;
+            update: () => void;
             Thumb: import("vue").DefineComponent<{
                 readonly vertical: BooleanConstructor;
                 readonly size: StringConstructor;
@@ -227,8 +235,6 @@ declare const _default: import("vue").DefineComponent<{
             }>;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
             readonly always: import("@element-plus/nightly/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-            readonly ratioX: number;
-            readonly ratioY: number;
         }> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -251,23 +257,33 @@ declare const _default: import("vue").DefineComponent<{
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
         readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-        readonly width: StringConstructor;
-        readonly height: StringConstructor;
-        readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-        readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+        readonly minSize: {
+            readonly type: import("vue").PropType<number>;
+            readonly required: true;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
     }>> & import("vue").ShallowUnwrapRef<{
         props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
             readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-            readonly width: StringConstructor;
-            readonly height: StringConstructor;
-            readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-            readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+            readonly minSize: {
+                readonly type: import("vue").PropType<number>;
+                readonly required: true;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
         }>> & {
             [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
         }>>;
+        scrollbar: import("./constants").ScrollbarContext | undefined;
         moveX: import("vue").Ref<number>;
         moveY: import("vue").Ref<number>;
+        sizeWidth: import("vue").Ref<string>;
+        sizeHeight: import("vue").Ref<string>;
+        ratioY: import("vue").Ref<number>;
+        ratioX: import("vue").Ref<number>;
         handleScroll: (wrap: HTMLDivElement) => void;
+        update: () => void;
         Thumb: import("vue").DefineComponent<{
             readonly vertical: BooleanConstructor;
             readonly size: StringConstructor;
@@ -369,8 +385,6 @@ declare const _default: import("vue").DefineComponent<{
             readonly always: boolean;
         }>;
     }> & {} & import("vue").ComponentCustomProperties) | undefined>;
-    ratioY: import("vue").Ref<number>;
-    ratioX: import("vue").Ref<number>;
     wrapStyle: import("vue").ComputedRef<StyleValue>;
     wrapKls: import("vue").ComputedRef<(string | unknown[] | {
         [x: string]: boolean;
@@ -383,23 +397,33 @@ declare const _default: import("vue").DefineComponent<{
     update: () => void;
     Bar: import("vue").DefineComponent<{
         readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-        readonly width: StringConstructor;
-        readonly height: StringConstructor;
-        readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-        readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+        readonly minSize: {
+            readonly type: import("vue").PropType<number>;
+            readonly required: true;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
     }, {
         props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
             readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-            readonly width: StringConstructor;
-            readonly height: StringConstructor;
-            readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-            readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+            readonly minSize: {
+                readonly type: import("vue").PropType<number>;
+                readonly required: true;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
         }>> & {
             [x: string & `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
         }>>;
+        scrollbar: import("./constants").ScrollbarContext | undefined;
         moveX: import("vue").Ref<number>;
         moveY: import("vue").Ref<number>;
+        sizeWidth: import("vue").Ref<string>;
+        sizeHeight: import("vue").Ref<string>;
+        ratioY: import("vue").Ref<number>;
+        ratioX: import("vue").Ref<number>;
         handleScroll: (wrap: HTMLDivElement) => void;
+        update: () => void;
         Thumb: import("vue").DefineComponent<{
             readonly vertical: BooleanConstructor;
             readonly size: StringConstructor;
@@ -502,14 +526,14 @@ declare const _default: import("vue").DefineComponent<{
         }>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         readonly always: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-        readonly width: StringConstructor;
-        readonly height: StringConstructor;
-        readonly ratioX: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
-        readonly ratioY: import("@element-plus/nightly/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1, boolean>;
+        readonly minSize: {
+            readonly type: import("vue").PropType<number>;
+            readonly required: true;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
     }>>, {
         readonly always: import("@element-plus/nightly/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-        readonly ratioX: number;
-        readonly ratioY: number;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     scroll: ({ scrollTop, scrollLeft, }: {