@element-plus/nightly 0.0.20250528 → 0.0.20250530

package/lib/components/result/src/result2.js

@@ -2,70 +2,40 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-var result = require('./result.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var index = require('../../../hooks/use-namespace/index.js');
+var iconsVue = require('@element-plus/icons-vue');
+var runtime = require('../../../utils/vue/props/runtime.js');
 
-const __default__ = vue.defineComponent({
-  name: "ElResult"
-});
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: result.resultProps,
-  setup(__props) {
-    const props = __props;
-    const ns = index.useNamespace("result");
-    const resultIcon = vue.computed(() => {
-      const icon = props.icon;
-      const iconClass = icon && result.IconMap[icon] ? result.IconMap[icon] : "icon-info";
-      const iconComponent = result.IconComponentMap[iconClass] || result.IconComponentMap["icon-info"];
-      return {
-        class: iconClass,
-        component: iconComponent
-      };
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(vue.unref(ns).b())
-      }, [
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass(vue.unref(ns).e("icon"))
-        }, [
-          vue.renderSlot(_ctx.$slots, "icon", {}, () => [
-            vue.unref(resultIcon).component ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(resultIcon).component), {
-              key: 0,
-              class: vue.normalizeClass(vue.unref(resultIcon).class)
-            }, null, 8, ["class"])) : vue.createCommentVNode("v-if", true)
-          ])
-        ], 2),
-        _ctx.title || _ctx.$slots.title ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 0,
-          class: vue.normalizeClass(vue.unref(ns).e("title"))
-        }, [
-          vue.renderSlot(_ctx.$slots, "title", {}, () => [
-            vue.createElementVNode("p", null, vue.toDisplayString(_ctx.title), 1)
-          ])
-        ], 2)) : vue.createCommentVNode("v-if", true),
-        _ctx.subTitle || _ctx.$slots["sub-title"] ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 1,
-          class: vue.normalizeClass(vue.unref(ns).e("subtitle"))
-        }, [
-          vue.renderSlot(_ctx.$slots, "sub-title", {}, () => [
-            vue.createElementVNode("p", null, vue.toDisplayString(_ctx.subTitle), 1)
-          ])
-        ], 2)) : vue.createCommentVNode("v-if", true),
-        _ctx.$slots.extra ? (vue.openBlock(), vue.createElementBlock("div", {
-          key: 2,
-          class: vue.normalizeClass(vue.unref(ns).e("extra"))
-        }, [
-          vue.renderSlot(_ctx.$slots, "extra")
-        ], 2)) : vue.createCommentVNode("v-if", true)
-      ], 2);
-    };
+const IconMap = {
+  primary: "icon-primary",
+  success: "icon-success",
+  warning: "icon-warning",
+  error: "icon-error",
+  info: "icon-info"
+};
+const IconComponentMap = {
+  [IconMap.primary]: iconsVue.InfoFilled,
+  [IconMap.success]: iconsVue.CircleCheckFilled,
+  [IconMap.warning]: iconsVue.WarningFilled,
+  [IconMap.error]: iconsVue.CircleCloseFilled,
+  [IconMap.info]: iconsVue.InfoFilled
+};
+const resultProps = runtime.buildProps({
+  title: {
+    type: String,
+    default: ""
+  },
+  subTitle: {
+    type: String,
+    default: ""
+  },
+  icon: {
+    type: String,
+    values: ["primary", "success", "warning", "info", "error"],
+    default: "info"
   }
 });
-var Result = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "result.vue"]]);
 
-exports["default"] = Result;
+exports.IconComponentMap = IconComponentMap;
+exports.IconMap = IconMap;
+exports.resultProps = resultProps;
 //# sourceMappingURL=result2.js.map

package/lib/components/result/src/result2.js.map

@@ -1 +1 @@
-{"version":3,"file":"result2.js","sources":["../../../../../../packages/components/result/src/result.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <div :class=\"ns.e('icon')\">\n      <slot name=\"icon\">\n        <component\n          :is=\"resultIcon.component\"\n          v-if=\"resultIcon.component\"\n          :class=\"resultIcon.class\"\n        />\n      </slot>\n    </div>\n    <div v-if=\"title || $slots.title\" :class=\"ns.e('title')\">\n      <slot name=\"title\">\n        <p>{{ title }}</p>\n      </slot>\n    </div>\n    <div v-if=\"subTitle || $slots['sub-title']\" :class=\"ns.e('subtitle')\">\n      <slot name=\"sub-title\">\n        <p>{{ subTitle }}</p>\n      </slot>\n    </div>\n    <div v-if=\"$slots.extra\" :class=\"ns.e('extra')\">\n      <slot name=\"extra\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { IconComponentMap, IconMap, resultProps } from './result'\n\ndefineOptions({\n  name: 'ElResult',\n})\n\nconst props = defineProps(resultProps)\n\nconst ns = useNamespace('result')\n\nconst resultIcon = computed(() => {\n  const icon = props.icon\n  const iconClass = icon && IconMap[icon] ? IconMap[icon] : 'icon-info'\n  const iconComponent =\n    IconComponentMap[iconClass] || IconComponentMap['icon-info']\n\n  return {\n    class: iconClass,\n    component: iconComponent,\n  }\n})\n</script>\n"],"names":["useNamespace","computed","IconMap","IconComponentMap"],"mappings":";;;;;;;;;uCAgCc,CAAA;AAAA,EACZ,IAAM,EAAA,UAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAIA,IAAM,MAAA,EAAA,GAAKA,mBAAa,QAAQ,CAAA,CAAA;AAEhC,IAAM,MAAA,UAAA,GAAaC,aAAS,MAAM;AAChC,MAAA,MAAM,OAAO,KAAM,CAAA,IAAA,CAAA;AACnB,MAAA,MAAM,YAAY,IAAQ,IAAAC,cAAA,CAAQ,IAAI,CAAI,GAAAA,cAAA,CAAQ,IAAI,CAAI,GAAA,WAAA,CAAA;AAC1D,MAAA,MAAM,aACJ,GAAAC,uBAAA,CAAiB,SAAS,CAAA,IAAKA,wBAAiB,WAAW,CAAA,CAAA;AAE7D,MAAO,OAAA;AAAA,QACL,KAAO,EAAA,SAAA;AAAA,QACP,SAAW,EAAA,aAAA;AAAA,OACb,CAAA;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"result2.js","sources":["../../../../../../packages/components/result/src/result.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport {\n  CircleCheckFilled,\n  CircleCloseFilled,\n  InfoFilled,\n  WarningFilled,\n} from '@element-plus/icons-vue'\nimport type { Component, ExtractPropTypes } from 'vue'\nimport type Result from './result.vue'\n\nexport const IconMap = {\n  primary: 'icon-primary',\n  success: 'icon-success',\n  warning: 'icon-warning',\n  error: 'icon-error',\n  info: 'icon-info',\n} as const\n\nexport const IconComponentMap: Record<\n  typeof IconMap[keyof typeof IconMap],\n  Component\n> = {\n  [IconMap.primary]: InfoFilled,\n  [IconMap.success]: CircleCheckFilled,\n  [IconMap.warning]: WarningFilled,\n  [IconMap.error]: CircleCloseFilled,\n  [IconMap.info]: InfoFilled,\n}\n\nexport const resultProps = buildProps({\n  /**\n   * @description title of result\n   */\n  title: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description sub title of result\n   */\n  subTitle: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description icon type of result\n   */\n  icon: {\n    type: String,\n    values: ['primary', 'success', 'warning', 'info', 'error'],\n    default: 'info',\n  },\n} as const)\n\nexport type ResultProps = ExtractPropTypes<typeof resultProps>\n\nexport type ResultInstance = InstanceType<typeof Result> & unknown\n"],"names":["InfoFilled","CircleCheckFilled","WarningFilled","CircleCloseFilled","buildProps"],"mappings":";;;;;;;AAOY,MAAC,OAAO,GAAG;AACvB,EAAE,OAAO,EAAE,cAAc;AACzB,EAAE,OAAO,EAAE,cAAc;AACzB,EAAE,OAAO,EAAE,cAAc;AACzB,EAAE,KAAK,EAAE,YAAY;AACrB,EAAE,IAAI,EAAE,WAAW;AACnB,EAAE;AACU,MAAC,gBAAgB,GAAG;AAChC,EAAE,CAAC,OAAO,CAAC,OAAO,GAAGA,mBAAU;AAC/B,EAAE,CAAC,OAAO,CAAC,OAAO,GAAGC,0BAAiB;AACtC,EAAE,CAAC,OAAO,CAAC,OAAO,GAAGC,sBAAa;AAClC,EAAE,CAAC,OAAO,CAAC,KAAK,GAAGC,0BAAiB;AACpC,EAAE,CAAC,OAAO,CAAC,IAAI,GAAGH,mBAAU;AAC5B,EAAE;AACU,MAAC,WAAW,GAAGI,kBAAU,CAAC;AACtC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC;AAC9D,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,CAAC;;;;;;"}

package/lib/components/scrollbar/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var scrollbar$1 = require('./src/scrollbar2.js');
 var util = require('./src/util.js');
 var scrollbar = require('./src/scrollbar.js');
-var thumb = require('./src/thumb2.js');
+var thumb = require('./src/thumb.js');
 var constants = require('./src/constants.js');
 var install = require('../../utils/vue/install.js');
 

package/lib/components/scrollbar/src/bar2.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var util = require('./util.js');
-var thumb = require('./thumb.js');
+var thumb = require('./thumb2.js');
 var bar = require('./bar.js');
 var constants = require('./constants.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');

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

@@ -25,10 +25,12 @@ export declare const scrollbarProps: {
 };
 export type ScrollbarProps = ExtractPropTypes<typeof scrollbarProps>;
 export declare const scrollbarEmits: {
+    'end-reached': (direction: ScrollbarDirection) => boolean;
     scroll: ({ scrollTop, scrollLeft, }: {
         scrollTop: number;
         scrollLeft: number;
     }) => boolean;
 };
 export type ScrollbarEmits = typeof scrollbarEmits;
+export type ScrollbarDirection = 'top' | 'bottom' | 'left' | 'right';
 export type ScrollbarInstance = InstanceType<typeof Scrollbar> & unknown;

package/lib/components/scrollbar/src/scrollbar.js

@@ -54,6 +54,7 @@ const scrollbarProps = runtime.buildProps({
   ...index.useAriaProps(["ariaLabel", "ariaOrientation"])
 });
 const scrollbarEmits = {
+  "end-reached": (direction) => ["left", "right", "top", "bottom"].includes(direction),
   scroll: ({
     scrollTop,
     scrollLeft

package/lib/components/scrollbar/src/scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.js","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.ts"],"sourcesContent":["import { buildProps, definePropType, isNumber } from '@element-plus/utils'\nimport { useAriaProps } from '@element-plus/hooks'\nimport type { ExtractPropTypes, StyleValue } from 'vue'\nimport type Scrollbar from './scrollbar.vue'\n\nexport const scrollbarProps = buildProps({\n  /**\n   * @description height of scrollbar\n   */\n  height: {\n    type: [String, Number],\n    default: '',\n  },\n  /**\n   * @description max height of scrollbar\n   */\n  maxHeight: {\n    type: [String, Number],\n    default: '',\n  },\n  /**\n   * @description whether to use the native scrollbar\n   */\n  native: {\n    type: Boolean,\n    default: false,\n  },\n  /**\n   * @description style of wrap\n   */\n  wrapStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n    default: '',\n  },\n  /**\n   * @description class of wrap\n   */\n  wrapClass: {\n    type: [String, Array],\n    default: '',\n  },\n  /**\n   * @description class of view\n   */\n  viewClass: {\n    type: [String, Array],\n    default: '',\n  },\n  /**\n   * @description style of view\n   */\n  viewStyle: {\n    type: [String, Array, Object],\n    default: '',\n  },\n  /**\n   * @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance\n   */\n  noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能\n  /**\n   * @description element tag of the view\n   */\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  /**\n   * @description always show\n   */\n  always: Boolean,\n  /**\n   * @description minimum size of scrollbar\n   */\n  minSize: {\n    type: Number,\n    default: 20,\n  },\n  /**\n   * @description Wrap tabindex\n   */\n  tabindex: {\n    type: [String, Number],\n    default: undefined,\n  },\n  /**\n   * @description id of view\n   */\n  id: String,\n  /**\n   * @description role of view\n   */\n  role: String,\n  ...useAriaProps(['ariaLabel', 'ariaOrientation']),\n} as const)\nexport type ScrollbarProps = ExtractPropTypes<typeof scrollbarProps>\n\nexport const scrollbarEmits = {\n  scroll: ({\n    scrollTop,\n    scrollLeft,\n  }: {\n    scrollTop: number\n    scrollLeft: number\n  }) => [scrollTop, scrollLeft].every(isNumber),\n}\nexport type ScrollbarEmits = typeof scrollbarEmits\n\nexport type ScrollbarInstance = InstanceType<typeof Scrollbar> & unknown\n"],"names":["buildProps","definePropType","useAriaProps","isNumber"],"mappings":";;;;;;;;AAEY,MAAC,cAAc,GAAGA,kBAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAEC,sBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;AACzB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;AACzB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;AACjC,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,EAAE,EAAE,MAAM;AACZ,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,GAAGC,kBAAY,CAAC,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;AACnD,CAAC,EAAE;AACS,MAAC,cAAc,GAAG;AAC9B,EAAE,MAAM,EAAE,CAAC;AACX,IAAI,SAAS;AACb,IAAI,UAAU;AACd,GAAG,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,KAAK,CAACC,cAAQ,CAAC;AAC/C;;;;;"}
+{"version":3,"file":"scrollbar.js","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.ts"],"sourcesContent":["import { buildProps, definePropType, isNumber } from '@element-plus/utils'\nimport { useAriaProps } from '@element-plus/hooks'\nimport type { ExtractPropTypes, StyleValue } from 'vue'\nimport type Scrollbar from './scrollbar.vue'\n\nexport const scrollbarProps = buildProps({\n  /**\n   * @description height of scrollbar\n   */\n  height: {\n    type: [String, Number],\n    default: '',\n  },\n  /**\n   * @description max height of scrollbar\n   */\n  maxHeight: {\n    type: [String, Number],\n    default: '',\n  },\n  /**\n   * @description whether to use the native scrollbar\n   */\n  native: {\n    type: Boolean,\n    default: false,\n  },\n  /**\n   * @description style of wrap\n   */\n  wrapStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n    default: '',\n  },\n  /**\n   * @description class of wrap\n   */\n  wrapClass: {\n    type: [String, Array],\n    default: '',\n  },\n  /**\n   * @description class of view\n   */\n  viewClass: {\n    type: [String, Array],\n    default: '',\n  },\n  /**\n   * @description style of view\n   */\n  viewStyle: {\n    type: [String, Array, Object],\n    default: '',\n  },\n  /**\n   * @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance\n   */\n  noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能\n  /**\n   * @description element tag of the view\n   */\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  /**\n   * @description always show\n   */\n  always: Boolean,\n  /**\n   * @description minimum size of scrollbar\n   */\n  minSize: {\n    type: Number,\n    default: 20,\n  },\n  /**\n   * @description Wrap tabindex\n   */\n  tabindex: {\n    type: [String, Number],\n    default: undefined,\n  },\n  /**\n   * @description id of view\n   */\n  id: String,\n  /**\n   * @description role of view\n   */\n  role: String,\n  ...useAriaProps(['ariaLabel', 'ariaOrientation']),\n} as const)\nexport type ScrollbarProps = ExtractPropTypes<typeof scrollbarProps>\n\nexport const scrollbarEmits = {\n  'end-reached': (direction: ScrollbarDirection) =>\n    ['left', 'right', 'top', 'bottom'].includes(direction),\n  scroll: ({\n    scrollTop,\n    scrollLeft,\n  }: {\n    scrollTop: number\n    scrollLeft: number\n  }) => [scrollTop, scrollLeft].every(isNumber),\n}\nexport type ScrollbarEmits = typeof scrollbarEmits\nexport type ScrollbarDirection = 'top' | 'bottom' | 'left' | 'right'\n\nexport type ScrollbarInstance = InstanceType<typeof Scrollbar> & unknown\n"],"names":["buildProps","definePropType","useAriaProps","isNumber"],"mappings":";;;;;;;;AAEY,MAAC,cAAc,GAAGA,kBAAU,CAAC;AACzC,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAEC,sBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;AACzB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;AACzB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;AACjC,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,EAAE,EAAE,MAAM;AACZ,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,GAAGC,kBAAY,CAAC,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;AACnD,CAAC,EAAE;AACS,MAAC,cAAc,GAAG;AAC9B,EAAE,aAAa,EAAE,CAAC,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC;AACtF,EAAE,MAAM,EAAE,CAAC;AACX,IAAI,SAAS;AACb,IAAI,UAAU;AACd,GAAG,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,KAAK,CAACC,cAAQ,CAAC;AAC/C;;;;;"}

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

@@ -1,3 +1,4 @@
+import type { ScrollbarDirection } from './scrollbar';
 import type { CSSProperties, StyleValue } from 'vue';
 declare function scrollTo(xCord: number, yCord?: number): void;
 declare function scrollTo(options: ScrollToOptions): void;
@@ -44,6 +45,7 @@ declare const __VLS_component: import("vue").DefineComponent<{
         scrollTop: number;
         scrollLeft: number;
     }) => void;
+    "end-reached": (direction: ScrollbarDirection) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly ariaLabel: StringConstructor;
     readonly ariaOrientation: {
@@ -71,6 +73,7 @@ declare const __VLS_component: import("vue").DefineComponent<{
         scrollTop: number;
         scrollLeft: number;
     }) => any) | undefined;
+    "onEnd-reached"?: ((direction: ScrollbarDirection) => any) | undefined;
 }, {
     readonly height: import("@element-plus/nightly/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     readonly maxHeight: import("@element-plus/nightly/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;

package/lib/components/scrollbar/src/scrollbar2.js

@@ -29,6 +29,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     let stopResizeListener = void 0;
     let wrapScrollTop = 0;
     let wrapScrollLeft = 0;
+    let direction = "";
     const scrollbarRef = vue.ref();
     const wrapRef = vue.ref();
     const resizeRef = vue.ref();
@@ -55,12 +56,28 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       var _a;
       if (wrapRef.value) {
         (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
+        const prevTop = wrapScrollTop;
+        const prevLeft = wrapScrollLeft;
         wrapScrollTop = wrapRef.value.scrollTop;
         wrapScrollLeft = wrapRef.value.scrollLeft;
+        const arrivedStates = {
+          bottom: wrapScrollTop + wrapRef.value.clientHeight >= wrapRef.value.scrollHeight,
+          top: wrapScrollTop <= 0 && prevTop !== 0,
+          right: wrapScrollLeft + wrapRef.value.clientWidth >= wrapRef.value.scrollWidth && prevLeft !== wrapScrollLeft,
+          left: wrapScrollLeft <= 0 && prevLeft !== 0
+        };
+        if (prevTop !== wrapScrollTop) {
+          direction = wrapScrollTop > prevTop ? "bottom" : "top";
+        }
+        if (prevLeft !== wrapScrollLeft) {
+          direction = wrapScrollLeft > prevLeft ? "right" : "left";
+        }
         emit("scroll", {
-          scrollTop: wrapRef.value.scrollTop,
-          scrollLeft: wrapRef.value.scrollLeft
+          scrollTop: wrapScrollTop,
+          scrollLeft: wrapScrollLeft
         });
+        if (arrivedStates[direction])
+          emit("end-reached", direction);
       }
     };
     function scrollTo(arg1, arg2) {

package/lib/components/scrollbar/src/scrollbar2.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbar2.js","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbarRef\" :class=\"ns.b()\">\n    <div\n      ref=\"wrapRef\"\n      :class=\"wrapKls\"\n      :style=\"wrapStyle\"\n      :tabindex=\"tabindex\"\n      @scroll=\"handleScroll\"\n    >\n      <component\n        :is=\"tag\"\n        :id=\"id\"\n        ref=\"resizeRef\"\n        :class=\"resizeKls\"\n        :style=\"viewStyle\"\n        :role=\"role\"\n        :aria-label=\"ariaLabel\"\n        :aria-orientation=\"ariaOrientation\"\n      >\n        <slot />\n      </component>\n    </div>\n    <template v-if=\"!native\">\n      <bar ref=\"barRef\" :always=\"always\" :min-size=\"minSize\" />\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onActivated,\n  onMounted,\n  onUpdated,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport { addUnit, debugWarn, isNumber, isObject } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport Bar from './bar.vue'\nimport { scrollbarContextKey } from './constants'\nimport { scrollbarEmits, scrollbarProps } from './scrollbar'\nimport type { BarInstance } from './bar'\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst COMPONENT_NAME = 'ElScrollbar'\n\ndefineOptions({\n  name: COMPONENT_NAME,\n})\n\nconst props = defineProps(scrollbarProps)\nconst emit = defineEmits(scrollbarEmits)\n\nconst ns = useNamespace('scrollbar')\n\nlet stopResizeObserver: (() => void) | undefined = undefined\nlet stopResizeListener: (() => void) | undefined = undefined\nlet wrapScrollTop = 0\nlet wrapScrollLeft = 0\n\nconst scrollbarRef = ref<HTMLDivElement>()\nconst wrapRef = ref<HTMLDivElement>()\nconst resizeRef = ref<HTMLElement>()\nconst barRef = ref<BarInstance>()\n\nconst wrapStyle = computed<StyleValue>(() => {\n  const style: CSSProperties = {}\n  if (props.height) style.height = addUnit(props.height)\n  if (props.maxHeight) style.maxHeight = addUnit(props.maxHeight)\n  return [props.wrapStyle, style]\n})\n\nconst wrapKls = computed(() => {\n  return [\n    props.wrapClass,\n    ns.e('wrap'),\n    { [ns.em('wrap', 'hidden-default')]: !props.native },\n  ]\n})\n\nconst resizeKls = computed(() => {\n  return [ns.e('view'), props.viewClass]\n})\n\nconst handleScroll = () => {\n  if (wrapRef.value) {\n    barRef.value?.handleScroll(wrapRef.value)\n    wrapScrollTop = wrapRef.value.scrollTop\n    wrapScrollLeft = wrapRef.value.scrollLeft\n\n    emit('scroll', {\n      scrollTop: wrapRef.value.scrollTop,\n      scrollLeft: wrapRef.value.scrollLeft,\n    })\n  }\n}\n\n// TODO: refactor method overrides, due to script setup dts\n// @ts-nocheck\nfunction scrollTo(xCord: number, yCord?: number): void\nfunction scrollTo(options: ScrollToOptions): void\nfunction scrollTo(arg1: unknown, arg2?: number) {\n  if (isObject(arg1)) {\n    wrapRef.value!.scrollTo(arg1)\n  } else if (isNumber(arg1) && isNumber(arg2)) {\n    wrapRef.value!.scrollTo(arg1, arg2)\n  }\n}\n\nconst setScrollTop = (value: number) => {\n  if (!isNumber(value)) {\n    debugWarn(COMPONENT_NAME, 'value must be a number')\n    return\n  }\n  wrapRef.value!.scrollTop = value\n}\n\nconst setScrollLeft = (value: number) => {\n  if (!isNumber(value)) {\n    debugWarn(COMPONENT_NAME, 'value must be a number')\n    return\n  }\n  wrapRef.value!.scrollLeft = value\n}\n\nconst update = () => {\n  barRef.value?.update()\n}\n\nwatch(\n  () => props.noresize,\n  (noresize) => {\n    if (noresize) {\n      stopResizeObserver?.()\n      stopResizeListener?.()\n    } else {\n      ;({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update))\n      stopResizeListener = useEventListener('resize', update)\n    }\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => [props.maxHeight, props.height],\n  () => {\n    if (!props.native)\n      nextTick(() => {\n        update()\n        if (wrapRef.value) {\n          barRef.value?.handleScroll(wrapRef.value)\n        }\n      })\n  }\n)\n\nprovide(\n  scrollbarContextKey,\n  reactive({\n    scrollbarElement: scrollbarRef,\n    wrapElement: wrapRef,\n  })\n)\n\nonActivated(() => {\n  if (wrapRef.value) {\n    wrapRef.value.scrollTop = wrapScrollTop\n    wrapRef.value.scrollLeft = wrapScrollLeft\n  }\n})\n\nonMounted(() => {\n  if (!props.native)\n    nextTick(() => {\n      update()\n    })\n})\nonUpdated(() => update())\n\ndefineExpose({\n  /** @description scrollbar wrap ref */\n  wrapRef,\n  /** @description update scrollbar state manually */\n  update,\n  /** @description scrolls to a particular set of coordinates */\n  scrollTo,\n  /** @description set distance to scroll top */\n  setScrollTop,\n  /** @description set distance to scroll left */\n  setScrollLeft,\n  /** @description handle scroll event */\n  handleScroll,\n})\n</script>\n"],"names":["useNamespace","ref","computed","style","addUnit","isObject","isNumber","debugWarn","watch","useResizeObserver","useEventListener","nextTick","provide","scrollbarContextKey","reactive","onActivated","onMounted","onUpdated","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_normalizeStyle"],"mappings":";;;;;;;;;;;;;;;;;uCAmDc,CAAA;AAAA,EACZ,IAAM,EAAA,cAAA;AACR;;;;;;;AAKA,IAAM,MAAA,EAAA,GAAKA,mBAAa,WAAW,CAAA,CAAA;AAEnC,IAAA,IAAI,kBAA+C,GAAA,KAAA,CAAA,CAAA;AACnD,IAAA,IAAI,kBAA+C,GAAA,KAAA,CAAA,CAAA;AACnD,IAAA,IAAI,aAAgB,GAAA,CAAA,CAAA;AACpB,IAAA,IAAI,cAAiB,GAAA,CAAA,CAAA;AAErB,IAAA,MAAM,eAAeC,OAAoB,EAAA,CAAA;AACzC,IAAA,MAAM,UAAUA,OAAoB,EAAA,CAAA;AACpC,IAAA,MAAM,YAAYA,OAAiB,EAAA,CAAA;AACnC,IAAA,MAAM,SAASA,OAAiB,EAAA,CAAA;AAEhC,IAAM,MAAA,SAAA,GAAYC,aAAqB,MAAM;AAC3C,MAAA,MAAMC,UAAuB,EAAC,CAAA;AAC9B,MAAA,IAAI,MAAM,MAAQ;AAClB,QAAAA,cAAqB,GAAAC,aAAA,CAAA,KAAkB,CAAA,MAAA,CAAA,CAAA;AACvC,MAAO,IAAA,KAAO,CAAA,SAAA;AAAgB,QAC/BD,OAAA,CAAA,SAAA,GAAAC,aAAA,CAAA,KAAA,CAAA,SAAA,CAAA,CAAA;AAED,MAAM,OAAA,CAAA,KAAA,CAAU,SAAS,EAAMD,OAAA,CAAA,CAAA;AAC7B,KAAO,CAAA,CAAA;AAAA,IAAA,MACC,OAAA,GAAAD,YAAA,CAAA,MAAA;AAAA,MACN,OAAK;AAAM,QACX,KAAG,CAAG,SAAG;AAA0C,QACrD,EAAA,CAAA,CAAA,CAAA,MAAA,CAAA;AAAA,QACD,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA,MAAA,EAAA,gBAAA,CAAA,GAAA,CAAA,KAAA,CAAA,MAAA,EAAA;AAED,OAAM,CAAA;AACJ,KAAA,CAAA,CAAA;AAAqC,IACvC,MAAC,SAAA,GAAAA,YAAA,CAAA,MAAA;AAED,MAAA,mBAAqB,CAAM,EAAA,KAAA,CAAA,SAAA,CAAA,CAAA;AACzB,KAAA,CAAA,CAAA;AACE,IAAO,MAAA,YAAO,GAAa,MAAA;AAC3B,MAAA,IAAA,EAAA,CAAA;AACA,MAAA,IAAA,OAAA,CAAA,KAAA,EAAiB;AAEjB,QAAA,CAAA,EAAA,GAAe,MAAA,CAAA,KAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA,CAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,QACb,aAAW,UAAc,CAAA,KAAA,CAAA,SAAA,CAAA;AAAA,QACzB,cAAY,UAAc,CAAA,KAAA,CAAA,UAAA,CAAA;AAAA,QAC5B,IAAC,CAAA,QAAA,EAAA;AAAA,UACH,SAAA,EAAA,OAAA,CAAA,KAAA,CAAA,SAAA;AAAA,UACF,UAAA,EAAA,OAAA,CAAA,KAAA,CAAA,UAAA;AAMA,SAAS,CAAA,CAAA;AACP,OAAI;AACF,KAAQ,CAAA;AAAoB,IAAA,iBACV,CAAA,IAAA,EAAA,IAAS,EAAA;AAC3B,MAAQ,IAAAG,eAAA,CAAA,IAAgB,CAAA,EAAA;AAAU,QACpC,OAAA,CAAA,KAAA,CAAA,QAAA,CAAA,IAAA,CAAA,CAAA;AAAA,OACF,MAAA,IAAAC,cAAA,CAAA,IAAA,CAAA,IAAAA,cAAA,CAAA,IAAA,CAAA,EAAA;AAEA,QAAM,OAAA,CAAA,KAAA,CAAA,QAAkC,CAAA,IAAA,EAAA,IAAA,CAAA,CAAA;AACtC,OAAI;AACF,KAAA;AACA,IAAA,MAAA,YAAA,GAAA,CAAA,KAAA,KAAA;AAAA,MACF,IAAA,CAAAA,cAAA,CAAA,KAAA,CAAA,EAAA;AACA,QAAAC,8BAA2B,EAAA,wBAAA,CAAA,CAAA;AAAA,QAC7B,OAAA;AAEA,OAAM;AACJ,MAAI,OAAU,CAAA,KAAA,CAAA,SAAQ,GAAA,KAAA,CAAA;AACpB,KAAA,CAAA;AACA,IAAA,MAAA,aAAA,GAAA,CAAA,KAAA,KAAA;AAAA,MACF,IAAA,CAAAD,cAAA,CAAA,KAAA,CAAA,EAAA;AACA,QAAAC,8BAA4B,EAAA,wBAAA,CAAA,CAAA;AAAA,QAC9B,OAAA;AAEA,OAAA;AACE,MAAA,OAAO,OAAO,UAAO,GAAA,KAAA,CAAA;AAAA,KACvB,CAAA;AAEA,IAAA,MAAA,MAAA,GAAA,MAAA;AAAA,MACE,MAAM,CAAM;AAAA,MACZ,CAAC,EAAa,GAAA,MAAA,CAAA,KAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAA,EAAA,CAAA;AACZ,KAAA,CAAA;AACE,IAAqBC,SAAA,CAAA,MAAA,KAAA,CAAA,QAAA,EAAA,CAAA,QAAA,KAAA;AACrB,MAAqB,IAAA,QAAA,EAAA;AAAA,QACvB,kBAAO,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA,EAAA,CAAA;AACL,QAAA,kBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA,EAAA,CAAA;AAAC,OAAA,MAAG;AACkD,QACxD,CAAA,EAAA,IAAA,EAAA,kBAAA,EAAA,GAAAC,sBAAA,CAAA,SAAA,EAAA,MAAA,CAAA,EAAA;AAAA,QACF,kBAAA,GAAAC,qBAAA,CAAA,QAAA,EAAA,MAAA,CAAA,CAAA;AAAA,OACA;AAAkB,KACpB,EAAA,EAAA,SAAA,EAAA,IAAA,EAAA,CAAA,CAAA;AAEA,IAAAF,SAAA,CAAA,MAAA,CAAA,KAAA,CAAA,SAAA,EAAA,KAAA,CAAA,MAAA,CAAA,EAAA,MAAA;AAAA,MACE,IAAM,CAAA,KAAO,CAAA,MAAA;AAAuB,QAC9BG,YAAA,CAAA,MAAA;AACJ,UAAA,IAAW,EAAA,CAAA;AACT,UAAA,MAAA,EAAA,CAAS;AACP,UAAO,IAAA,OAAA,CAAA,KAAA,EAAA;AACP,YAAA,CAAA,EAAA,SAAY,CAAO,KAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA,CAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AACjB,WAAO;AAAiC,SAC1C,CAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AACD,IACLC,WAAA,CAAAC,6BAAA,EAAAC,YAAA,CAAA;AAAA,MACF,gBAAA,EAAA,YAAA;AAEA,MAAA,WAAA,EAAA,OAAA;AAAA,KACE,CAAA,CAAA,CAAA;AAAA,IAAAC,eACS,CAAA,MAAA;AAAA,MAAA,IACW,OAAA,CAAA,KAAA,EAAA;AAAA,QAClB,OAAa,CAAA,KAAA,CAAA,SAAA,GAAA,aAAA,CAAA;AAAA,QACd,OAAA,CAAA,KAAA,CAAA,UAAA,GAAA,cAAA,CAAA;AAAA,OACH;AAEA,KAAA,CAAA,CAAA;AACE,IAAAC,oBAAmB;AACjB,MAAA,IAAA,CAAA,KAAQ,OAAkB;AAC1B,QAAAL,YAAQ,OAAmB;AAAA,UAC7B,MAAA,EAAA,CAAA;AAAA,SACD,CAAA,CAAA;AAED,KAAA,CAAA,CAAA;AACE,IAAAM,aAAW,CAAA,MAAA,MAAA,EAAA,CAAA,CAAA;AACT,IAAA,MAAA,CAAA;AACE,MAAO,OAAA;AAAA,MAAA,MACR;AAAA,MACJ,QAAA;AACD,MAAU,YAAA;AAEV,MAAa,aAAA;AAAA,MAAA,YAAA;AAAA,KAEX,CAAA,CAAA;AAAA,IAAA,OAAA,CAAA,IAAA,EAAA,MAAA,KAAA;AAAA,MAEA,OAAAC,aAAA,EAAA,EAAAC,sBAAA,CAAA,KAAA,EAAA;AAAA,QAAA,OAAA,EAAA,cAAA;AAAA,QAEA,GAAA,EAAA,YAAA;AAAA,QAAA,KAAA,EAAAC,kBAAA,CAAAC,SAAA,CAAA,EAAA,CAAA,CAAA,CAAA,EAAA,CAAA;AAAA,OAEA,EAAA;AAAA,QAAAC,sBAAA,CAAA,KAAA,EAAA;AAAA,UAEA,OAAA,EAAA,SAAA;AAAA,UAAA,GAAA,EAAA,OAAA;AAAA,UAEA,KAAA,EAAAF,kBAAA,CAAAC,SAAA,CAAA,OAAA,CAAA,CAAA;AAAA,UACD,KAAA,EAAAE,kBAAA,CAAAF,SAAA,CAAA,SAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"scrollbar2.js","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbarRef\" :class=\"ns.b()\">\n    <div\n      ref=\"wrapRef\"\n      :class=\"wrapKls\"\n      :style=\"wrapStyle\"\n      :tabindex=\"tabindex\"\n      @scroll=\"handleScroll\"\n    >\n      <component\n        :is=\"tag\"\n        :id=\"id\"\n        ref=\"resizeRef\"\n        :class=\"resizeKls\"\n        :style=\"viewStyle\"\n        :role=\"role\"\n        :aria-label=\"ariaLabel\"\n        :aria-orientation=\"ariaOrientation\"\n      >\n        <slot />\n      </component>\n    </div>\n    <template v-if=\"!native\">\n      <bar ref=\"barRef\" :always=\"always\" :min-size=\"minSize\" />\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onActivated,\n  onMounted,\n  onUpdated,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport { addUnit, debugWarn, isNumber, isObject } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport Bar from './bar.vue'\nimport { scrollbarContextKey } from './constants'\nimport { scrollbarEmits, scrollbarProps } from './scrollbar'\nimport type { ScrollbarDirection } from './scrollbar'\nimport type { BarInstance } from './bar'\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst COMPONENT_NAME = 'ElScrollbar'\n\ndefineOptions({\n  name: COMPONENT_NAME,\n})\n\nconst props = defineProps(scrollbarProps)\nconst emit = defineEmits(scrollbarEmits)\n\nconst ns = useNamespace('scrollbar')\n\nlet stopResizeObserver: (() => void) | undefined = undefined\nlet stopResizeListener: (() => void) | undefined = undefined\nlet wrapScrollTop = 0\nlet wrapScrollLeft = 0\nlet direction = '' as ScrollbarDirection\n\nconst scrollbarRef = ref<HTMLDivElement>()\nconst wrapRef = ref<HTMLDivElement>()\nconst resizeRef = ref<HTMLElement>()\nconst barRef = ref<BarInstance>()\n\nconst wrapStyle = computed<StyleValue>(() => {\n  const style: CSSProperties = {}\n  if (props.height) style.height = addUnit(props.height)\n  if (props.maxHeight) style.maxHeight = addUnit(props.maxHeight)\n  return [props.wrapStyle, style]\n})\n\nconst wrapKls = computed(() => {\n  return [\n    props.wrapClass,\n    ns.e('wrap'),\n    { [ns.em('wrap', 'hidden-default')]: !props.native },\n  ]\n})\n\nconst resizeKls = computed(() => {\n  return [ns.e('view'), props.viewClass]\n})\n\nconst handleScroll = () => {\n  if (wrapRef.value) {\n    barRef.value?.handleScroll(wrapRef.value)\n    const prevTop = wrapScrollTop\n    const prevLeft = wrapScrollLeft\n    wrapScrollTop = wrapRef.value.scrollTop\n    wrapScrollLeft = wrapRef.value.scrollLeft\n\n    const arrivedStates = {\n      bottom:\n        wrapScrollTop + wrapRef.value.clientHeight >=\n        wrapRef.value.scrollHeight,\n      top: wrapScrollTop <= 0 && prevTop !== 0,\n      right:\n        wrapScrollLeft + wrapRef.value.clientWidth >=\n          wrapRef.value.scrollWidth && prevLeft !== wrapScrollLeft,\n      left: wrapScrollLeft <= 0 && prevLeft !== 0,\n    }\n\n    if (prevTop !== wrapScrollTop) {\n      direction = wrapScrollTop > prevTop ? 'bottom' : 'top'\n    }\n    if (prevLeft !== wrapScrollLeft) {\n      direction = wrapScrollLeft > prevLeft ? 'right' : 'left'\n    }\n\n    emit('scroll', {\n      scrollTop: wrapScrollTop,\n      scrollLeft: wrapScrollLeft,\n    })\n    if (arrivedStates[direction]) emit('end-reached', direction)\n  }\n}\n\n// TODO: refactor method overrides, due to script setup dts\n// @ts-nocheck\nfunction scrollTo(xCord: number, yCord?: number): void\nfunction scrollTo(options: ScrollToOptions): void\nfunction scrollTo(arg1: unknown, arg2?: number) {\n  if (isObject(arg1)) {\n    wrapRef.value!.scrollTo(arg1)\n  } else if (isNumber(arg1) && isNumber(arg2)) {\n    wrapRef.value!.scrollTo(arg1, arg2)\n  }\n}\n\nconst setScrollTop = (value: number) => {\n  if (!isNumber(value)) {\n    debugWarn(COMPONENT_NAME, 'value must be a number')\n    return\n  }\n  wrapRef.value!.scrollTop = value\n}\n\nconst setScrollLeft = (value: number) => {\n  if (!isNumber(value)) {\n    debugWarn(COMPONENT_NAME, 'value must be a number')\n    return\n  }\n  wrapRef.value!.scrollLeft = value\n}\n\nconst update = () => {\n  barRef.value?.update()\n}\n\nwatch(\n  () => props.noresize,\n  (noresize) => {\n    if (noresize) {\n      stopResizeObserver?.()\n      stopResizeListener?.()\n    } else {\n      ;({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update))\n      stopResizeListener = useEventListener('resize', update)\n    }\n  },\n  { immediate: true }\n)\n\nwatch(\n  () => [props.maxHeight, props.height],\n  () => {\n    if (!props.native)\n      nextTick(() => {\n        update()\n        if (wrapRef.value) {\n          barRef.value?.handleScroll(wrapRef.value)\n        }\n      })\n  }\n)\n\nprovide(\n  scrollbarContextKey,\n  reactive({\n    scrollbarElement: scrollbarRef,\n    wrapElement: wrapRef,\n  })\n)\n\nonActivated(() => {\n  if (wrapRef.value) {\n    wrapRef.value.scrollTop = wrapScrollTop\n    wrapRef.value.scrollLeft = wrapScrollLeft\n  }\n})\n\nonMounted(() => {\n  if (!props.native)\n    nextTick(() => {\n      update()\n    })\n})\nonUpdated(() => update())\n\ndefineExpose({\n  /** @description scrollbar wrap ref */\n  wrapRef,\n  /** @description update scrollbar state manually */\n  update,\n  /** @description scrolls to a particular set of coordinates */\n  scrollTo,\n  /** @description set distance to scroll top */\n  setScrollTop,\n  /** @description set distance to scroll left */\n  setScrollLeft,\n  /** @description handle scroll event */\n  handleScroll,\n})\n</script>\n"],"names":["useNamespace","ref","computed","style","addUnit","isObject","isNumber","debugWarn","watch","useResizeObserver","useEventListener","nextTick","provide","scrollbarContextKey","reactive","onActivated","onMounted","onUpdated","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode"],"mappings":";;;;;;;;;;;;;;;;;uCAoDc,CAAA;AAAA,EACZ,IAAM,EAAA,cAAA;AACR;;;;;;;AAKA,IAAM,MAAA,EAAA,GAAKA,mBAAa,WAAW,CAAA,CAAA;AAEnC,IAAA,IAAI,kBAA+C,GAAA,KAAA,CAAA,CAAA;AACnD,IAAA,IAAI,kBAA+C,GAAA,KAAA,CAAA,CAAA;AACnD,IAAA,IAAI,aAAgB,GAAA,CAAA,CAAA;AACpB,IAAA,IAAI,cAAiB,GAAA,CAAA,CAAA;AACrB,IAAA,IAAI,SAAY,GAAA,EAAA,CAAA;AAEhB,IAAA,MAAM,eAAeC,OAAoB,EAAA,CAAA;AACzC,IAAA,MAAM,UAAUA,OAAoB,EAAA,CAAA;AACpC,IAAA,MAAM,YAAYA,OAAiB,EAAA,CAAA;AACnC,IAAA,MAAM,SAASA,OAAiB,EAAA,CAAA;AAEhC,IAAM,MAAA,SAAA,GAAYC,aAAqB,MAAM;AAC3C,MAAA,MAAMC,UAAuB,EAAC,CAAA;AAC9B,MAAA,IAAI,MAAM,MAAQ;AAClB,QAAAA,cAAqB,GAAAC,aAAA,CAAA,KAAkB,CAAA,MAAA,CAAA,CAAA;AACvC,MAAO,IAAA,KAAO,CAAA,SAAA;AAAgB,QAC/BD,OAAA,CAAA,SAAA,GAAAC,aAAA,CAAA,KAAA,CAAA,SAAA,CAAA,CAAA;AAED,MAAM,OAAA,CAAA,KAAA,CAAU,SAAS,EAAMD,OAAA,CAAA,CAAA;AAC7B,KAAO,CAAA,CAAA;AAAA,IAAA,MACC,OAAA,GAAAD,YAAA,CAAA,MAAA;AAAA,MACN,OAAK;AAAM,QACX,KAAG,CAAG,SAAG;AAA0C,QACrD,EAAA,CAAA,CAAA,CAAA,MAAA,CAAA;AAAA,QACD,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA,MAAA,EAAA,gBAAA,CAAA,GAAA,CAAA,KAAA,CAAA,MAAA,EAAA;AAED,OAAM,CAAA;AACJ,KAAA,CAAA,CAAA;AAAqC,IACvC,MAAC,SAAA,GAAAA,YAAA,CAAA,MAAA;AAED,MAAA,mBAAqB,CAAM,EAAA,KAAA,CAAA,SAAA,CAAA,CAAA;AACzB,KAAA,CAAA,CAAA;AACE,IAAO,MAAA,YAAO,GAAa,MAAA;AAC3B,MAAA,IAAA,EAAA,CAAA;AACA,MAAA,IAAA,OAAiB,CAAA,KAAA,EAAA;AACjB,QAAA,CAAA,EAAA,GAAA,MAAA,CAAA,cAA8B,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA,CAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAC9B,QAAA,MAAA,OAAA,GAAA,aAA+B,CAAA;AAE/B,QAAA,MAAM,QAAgB,GAAA,cAAA,CAAA;AAAA,QAAA,aAEF,GAAA,OAAA,CAAA,KAAA,CAAA,SAAc,CAAA;AAChB,QAChB,cAAsB,GAAA,OAAA,CAAA,KAAiB,CAAA,UAAA,CAAA;AAAA,QACvC,MAAA;AAE8C,UAC9C,MAAM,EAAkB,aAAA,GAAA,OAAkB,CAAA,KAAA,CAAA,YAAA,IAAA,OAAA,CAAA,KAAA,CAAA,YAAA;AAAA,UAC5C,GAAA,EAAA,aAAA,IAAA,CAAA,IAAA,OAAA,KAAA,CAAA;AAEA,UAAA,qBAA+B,GAAA,OAAA,CAAA,KAAA,CAAA,WAAA,IAAA,OAAA,CAAA,KAAA,CAAA,WAAA,IAAA,QAAA,KAAA,cAAA;AAC7B,UAAY,IAAA,EAAA,cAAA,IAAA,CAAA,iBAAqC,CAAA;AAAA,SACnD,CAAA;AACA,QAAA,IAAI,yBAA6B,EAAA;AAC/B,UAAY,SAAA,GAAA,aAAA,GAAA,kBAAsC,GAAA,KAAA,CAAA;AAAA,SACpD;AAEA,QAAA,IAAA,QAAe,KAAA,cAAA,EAAA;AAAA,UACb,SAAW,GAAA,cAAA,GAAA,QAAA,GAAA,OAAA,GAAA,MAAA,CAAA;AAAA,SAAA;AACC,QACd,IAAC,CAAA,QAAA,EAAA;AACD,UAAA,SAAkB,EAAA,aAAA;AAAyC,UAC7D,UAAA,EAAA,cAAA;AAAA,SACF,CAAA,CAAA;AAMA,QAAS,IAAA,uBAAuC,CAAA;AAC9C,UAAI,IAAA,CAAA,aAAgB,EAAA,SAAA,CAAA,CAAA;AAClB,OAAQ;AAAoB,KAAA,CAC9B;AACE,IAAQ,SAAA,QAAA,CAAO,IAAS,EAAA,IAAA,EAAA;AAAU,MACpC,IAAAG,eAAA,CAAA,IAAA,CAAA,EAAA;AAAA,QACF,OAAA,CAAA,KAAA,CAAA,QAAA,CAAA,IAAA,CAAA,CAAA;AAEA,OAAM,MAAA,IAAAC,cAAe,CAAC,IAAkB,CAAA,IAAAA,cAAA,CAAA,IAAA,CAAA,EAAA;AACtC,QAAI,OAAU,CAAA,KAAA,CAAA,QAAQ,CAAA,IAAA,EAAA,IAAA,CAAA,CAAA;AACpB,OAAA;AACA,KAAA;AAAA,IACF,MAAA,YAAA,GAAA,CAAA,KAAA,KAAA;AACA,MAAA,IAAA,CAAAA,eAAe,KAAY,CAAA,EAAA;AAAA,QAC7BC,eAAA,CAAA,cAAA,EAAA,wBAAA,CAAA,CAAA;AAEA,QAAM,OAAA;AACJ,OAAI;AACF,MAAA,OAAA,CAAA,uBAAkD,CAAA;AAClD,KAAA,CAAA;AAAA,IACF,MAAA,aAAA,GAAA,CAAA,KAAA,KAAA;AACA,MAAA,IAAA,CAAAD,eAAe,KAAa,CAAA,EAAA;AAAA,QAC9BC,eAAA,CAAA,cAAA,EAAA,wBAAA,CAAA,CAAA;AAEA,QAAA;AACE,OAAA;AAAqB,MACvB,OAAA,CAAA,KAAA,CAAA,UAAA,GAAA,KAAA,CAAA;AAEA,KAAA,CAAA;AAAA,IAAA,YACc,GAAA,MAAA;AAAA,MACZ,IAAc,EAAA,CAAA;AACZ,MAAA,CAAA,EAAA,GAAI,MAAU,CAAA,KAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAA,EAAA,CAAA;AACZ,KAAqB,CAAA;AACrB,IAAqBC,SAAA,CAAA,MAAA,KAAA,CAAA,QAAA,EAAA,CAAA,QAAA,KAAA;AAAA,MAAA,IAChB,QAAA,EAAA;AACL,QAAA,kBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA,EAAA,CAAA;AAAC,QAAA,kBAAS,IAAA,IAAA,GAAA,KAAuB,CAAA,GAAA;AACjC,OAAqB,MAAA;AACvB,QACF,CAAA,EAAA,IAAA,EAAA,kBAAA,EAAA,GAAAC,sBAAA,CAAA,SAAA,EAAA,MAAA,CAAA,EAAA;AAAA,QACE,kBAAgB,GAAAC,qBAAA,CAAA,QAAA,EAAA,MAAA,CAAA,CAAA;AAAA,OACpB;AAEA,KAAA,EAAA,EAAA,SAAA,EAAA,IAAA,EAAA,CAAA,CAAA;AAAA,IAAAF,SACQ,CAAA,MAAO,CAAA,KAAA,CAAA,gBAAuB,CAAA,MAAA,CAAA,EAAA,MAAA;AAAA,MACpC,IAAM,CAAA,KAAA,CAAA,MAAA;AACJ,QAAAG,YAAW,CAAA,MAAA;AACT,UAAA,IAAA,EAAA,CAAA;AACE,UAAO,MAAA,EAAA,CAAA;AACP,UAAA,IAAA,aAAmB,EAAA;AACjB,YAAO,CAAA,EAAA,GAAA,MAAA,CAAA,KAAoB,KAAA,IAAA,GAAA,KAAA,CAAA,GAAa,EAAA,CAAA,YAAA,CAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,WAC1C;AAAA,SAAA,CACF,CAAC;AAAA,KACL,CAAA,CAAA;AAAA,IACFC,WAAA,CAAAC,6BAAA,EAAAC,YAAA,CAAA;AAEA,MAAA,gBAAA,EAAA,YAAA;AAAA,MACE,WAAA,EAAA,OAAA;AAAA,KAAA,CACA,CAAS,CAAA;AAAA,IAAAC,eACW,CAAA,MAAA;AAAA,MAAA,IACL,OAAA,CAAA,KAAA,EAAA;AAAA,QACd,OAAA,CAAA,KAAA,CAAA,SAAA,GAAA,aAAA,CAAA;AAAA,QACH,OAAA,CAAA,KAAA,CAAA,UAAA,GAAA,cAAA,CAAA;AAEA,OAAA;AACE,KAAA,CAAA,CAAA;AACE,IAAAC,aAAA,CAAA;AACA,MAAA,IAAA,CAAA,KAAQ,OAAmB;AAAA,QAC7BL,YAAA,CAAA,MAAA;AAAA,UACD,MAAA,EAAA,CAAA;AAED,SAAA,CAAA,CAAA;AACE,KAAA,CAAA,CAAA;AACE,IAAAM,aAAA,CAAA,MAAe,MAAA,EAAA,CAAA,CAAA;AACb,IAAO,MAAA,CAAA;AAAA,MAAA,OACR;AAAA,MACJ,MAAA;AACD,MAAU,QAAA;AAEV,MAAa,YAAA;AAAA,MAAA,aAAA;AAAA,MAEX,YAAA;AAAA,KAAA,CAAA,CAAA;AAAA,IAEA,OAAA,CAAA,IAAA,EAAA,MAAA,KAAA;AAAA,MAAA,OAAAC,aAAA,EAAA,EAAAC,sBAAA,CAAA,KAAA,EAAA;AAAA,QAEA,OAAA,EAAA,cAAA;AAAA,QAAA,GAAA,EAAA,YAAA;AAAA,QAEA,KAAA,EAAAC,kBAAA,CAAAC,SAAA,CAAA,EAAA,CAAA,CAAA,CAAA,EAAA,CAAA;AAAA,OAAA,EAAA;AAAA,QAEAC,sBAAA,CAAA,KAAA,EAAA;AAAA,UAAA,OAAA,EAAA,SAAA;AAAA,UAEA,GAAA,EAAA,OAAA;AAAA,UACD,KAAA,EAAAF,kBAAA,CAAAC,SAAA,CAAA,OAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/scrollbar/src/thumb.js

@@ -2,138 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-var core = require('@vueuse/core');
-var constants = require('./constants.js');
-var util = require('./util.js');
-var thumb = require('./thumb2.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var index = require('../../../hooks/use-namespace/index.js');
-var error = require('../../../utils/error.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
 
-const COMPONENT_NAME = "Thumb";
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  __name: "thumb",
-  props: thumb.thumbProps,
-  setup(__props) {
-    const props = __props;
-    const scrollbar = vue.inject(constants.scrollbarContextKey);
-    const ns = index.useNamespace("scrollbar");
-    if (!scrollbar)
-      error.throwError(COMPONENT_NAME, "can not inject scrollbar context");
-    const instance = vue.ref();
-    const thumb = vue.ref();
-    const thumbState = vue.ref({});
-    const visible = vue.ref(false);
-    let cursorDown = false;
-    let cursorLeave = false;
-    let originalOnSelectStart = core.isClient ? document.onselectstart : null;
-    const bar = vue.computed(() => util.BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
-    const thumbStyle = vue.computed(() => util.renderThumbStyle({
-      size: props.size,
-      move: props.move,
-      bar: bar.value
-    }));
-    const offsetRatio = vue.computed(() => instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]);
-    const clickThumbHandler = (e) => {
-      var _a;
-      e.stopPropagation();
-      if (e.ctrlKey || [1, 2].includes(e.button))
-        return;
-      (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
-      startDrag(e);
-      const el = e.currentTarget;
-      if (!el)
-        return;
-      thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
-    };
-    const clickTrackHandler = (e) => {
-      if (!thumb.value || !instance.value || !scrollbar.wrapElement)
-        return;
-      const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
-      const thumbHalf = thumb.value[bar.value.offset] / 2;
-      const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.value / instance.value[bar.value.offset];
-      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
-    };
-    const startDrag = (e) => {
-      e.stopImmediatePropagation();
-      cursorDown = true;
-      document.addEventListener("mousemove", mouseMoveDocumentHandler);
-      document.addEventListener("mouseup", mouseUpDocumentHandler);
-      originalOnSelectStart = document.onselectstart;
-      document.onselectstart = () => false;
-    };
-    const mouseMoveDocumentHandler = (e) => {
-      if (!instance.value || !thumb.value)
-        return;
-      if (cursorDown === false)
-        return;
-      const prevPage = thumbState.value[bar.value.axis];
-      if (!prevPage)
-        return;
-      const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
-      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
-      const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
-      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
-    };
-    const mouseUpDocumentHandler = () => {
-      cursorDown = false;
-      thumbState.value[bar.value.axis] = 0;
-      document.removeEventListener("mousemove", mouseMoveDocumentHandler);
-      document.removeEventListener("mouseup", mouseUpDocumentHandler);
-      restoreOnselectstart();
-      if (cursorLeave)
-        visible.value = false;
-    };
-    const mouseMoveScrollbarHandler = () => {
-      cursorLeave = false;
-      visible.value = !!props.size;
-    };
-    const mouseLeaveScrollbarHandler = () => {
-      cursorLeave = true;
-      visible.value = cursorDown;
-    };
-    vue.onBeforeUnmount(() => {
-      restoreOnselectstart();
-      document.removeEventListener("mouseup", mouseUpDocumentHandler);
-    });
-    const restoreOnselectstart = () => {
-      if (document.onselectstart !== originalOnSelectStart)
-        document.onselectstart = originalOnSelectStart;
-    };
-    core.useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
-    core.useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.Transition, {
-        name: vue.unref(ns).b("fade"),
-        persisted: ""
-      }, {
-        default: vue.withCtx(() => [
-          vue.withDirectives(vue.createElementVNode("div", {
-            ref_key: "instance",
-            ref: instance,
-            class: vue.normalizeClass([vue.unref(ns).e("bar"), vue.unref(ns).is(vue.unref(bar).key)]),
-            onMousedown: clickTrackHandler,
-            onClick: vue.withModifiers(() => {
-            }, ["stop"])
-          }, [
-            vue.createElementVNode("div", {
-              ref_key: "thumb",
-              ref: thumb,
-              class: vue.normalizeClass(vue.unref(ns).e("thumb")),
-              style: vue.normalizeStyle(vue.unref(thumbStyle)),
-              onMousedown: clickThumbHandler
-            }, null, 38)
-          ], 42, ["onClick"]), [
-            [vue.vShow, _ctx.always || visible.value]
-          ])
-        ]),
-        _: 1
-      }, 8, ["name"]);
-    };
-  }
+const thumbProps = runtime.buildProps({
+  vertical: Boolean,
+  size: String,
+  move: Number,
+  ratio: {
+    type: Number,
+    required: true
+  },
+  always: Boolean
 });
-var Thumb = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "thumb.vue"]]);
 
-exports["default"] = Thumb;
+exports.thumbProps = thumbProps;
 //# sourceMappingURL=thumb.js.map

package/lib/components/scrollbar/src/thumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumb.js","sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<template>\n  <transition :name=\"ns.b('fade')\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"[ns.e('bar'), ns.is(bar.key)]\"\n      @mousedown=\"clickTrackHandler\"\n      @click.stop\n    >\n      <div\n        ref=\"thumb\"\n        :class=\"ns.e('thumb')\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n      />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, ref, toRef } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { isClient, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { scrollbarContextKey } from './constants'\nimport { BAR_MAP, renderThumbStyle } from './util'\nimport { thumbProps } from './thumb'\n\nconst COMPONENT_NAME = 'Thumb'\nconst props = defineProps(thumbProps)\n\nconst scrollbar = inject(scrollbarContextKey)\nconst ns = useNamespace('scrollbar')\n\nif (!scrollbar) throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\nconst instance = ref<HTMLDivElement>()\nconst thumb = ref<HTMLDivElement>()\n\nconst thumbState = ref<Partial<Record<'X' | 'Y', number>>>({})\nconst visible = ref(false)\n\nlet cursorDown = false\nlet cursorLeave = false\nlet originalOnSelectStart:\n  | ((this: GlobalEventHandlers, ev: Event) => any)\n  | null = isClient ? document.onselectstart : null\n\nconst bar = computed(() => BAR_MAP[props.vertical ? 'vertical' : 'horizontal'])\n\nconst thumbStyle = computed(() =>\n  renderThumbStyle({\n    size: props.size,\n    move: props.move,\n    bar: bar.value,\n  })\n)\n\nconst offsetRatio = computed(\n  () =>\n    // offsetRatioX = original width of thumb / current width of thumb / ratioX\n    // offsetRatioY = original height of thumb / current height of thumb / ratioY\n    // instance height = wrap height - GAP\n    instance.value![bar.value.offset] ** 2 /\n    scrollbar.wrapElement![bar.value.scrollSize] /\n    props.ratio /\n    thumb.value![bar.value.offset]\n)\n\nconst clickThumbHandler = (e: MouseEvent) => {\n  // prevent click event of middle and right button\n  e.stopPropagation()\n  if (e.ctrlKey || [1, 2].includes(e.button)) return\n\n  window.getSelection()?.removeAllRanges()\n  startDrag(e)\n\n  const el = e.currentTarget as HTMLDivElement\n  if (!el) return\n  thumbState.value[bar.value.axis] =\n    el[bar.value.offset] -\n    (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n}\n\nconst clickTrackHandler = (e: MouseEvent) => {\n  if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n  const offset = Math.abs(\n    (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n      e[bar.value.client]\n  )\n  const thumbHalf = thumb.value[bar.value.offset] / 2\n  const thumbPositionPercentage =\n    ((offset - thumbHalf) * 100 * offsetRatio.value) /\n    instance.value[bar.value.offset]\n\n  scrollbar.wrapElement[bar.value.scroll] =\n    (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /\n    100\n}\n\nconst startDrag = (e: MouseEvent) => {\n  e.stopImmediatePropagation()\n  cursorDown = true\n  document.addEventListener('mousemove', mouseMoveDocumentHandler)\n  document.addEventListener('mouseup', mouseUpDocumentHandler)\n  originalOnSelectStart = document.onselectstart\n  document.onselectstart = () => false\n}\n\nconst mouseMoveDocumentHandler = (e: MouseEvent) => {\n  if (!instance.value || !thumb.value) return\n  if (cursorDown === false) return\n\n  const prevPage = thumbState.value[bar.value.axis]\n  if (!prevPage) return\n\n  const offset =\n    (instance.value.getBoundingClientRect()[bar.value.direction] -\n      e[bar.value.client]) *\n    -1\n  const thumbClickPosition = thumb.value[bar.value.offset] - prevPage\n  const thumbPositionPercentage =\n    ((offset - thumbClickPosition) * 100 * offsetRatio.value) /\n    instance.value[bar.value.offset]\n  scrollbar.wrapElement[bar.value.scroll] =\n    (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /\n    100\n}\n\nconst mouseUpDocumentHandler = () => {\n  cursorDown = false\n  thumbState.value[bar.value.axis] = 0\n  document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n  document.removeEventListener('mouseup', mouseUpDocumentHandler)\n  restoreOnselectstart()\n  if (cursorLeave) visible.value = false\n}\n\nconst mouseMoveScrollbarHandler = () => {\n  cursorLeave = false\n  visible.value = !!props.size\n}\n\nconst mouseLeaveScrollbarHandler = () => {\n  cursorLeave = true\n  visible.value = cursorDown\n}\n\nonBeforeUnmount(() => {\n  restoreOnselectstart()\n  document.removeEventListener('mouseup', mouseUpDocumentHandler)\n})\n\nconst restoreOnselectstart = () => {\n  if (document.onselectstart !== originalOnSelectStart)\n    document.onselectstart = originalOnSelectStart\n}\n\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'mousemove',\n  mouseMoveScrollbarHandler\n)\nuseEventListener(\n  toRef(scrollbar, 'scrollbarElement'),\n  'mouseleave',\n  mouseLeaveScrollbarHandler\n)\n</script>\n"],"names":["inject","scrollbarContextKey","useNamespace","throwError","ref","isClient","computed","BAR_MAP","renderThumbStyle","onBeforeUnmount","useEventListener","toRef","_createBlock","_Transition","_unref","_withCtx","_withDirectives","_createElementVNode","_normalizeClass"],"mappings":"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"}
+{"version":3,"file":"thumb.js","sources":["../../../../../../packages/components/scrollbar/src/thumb.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\nimport type Thumb from './thumb.vue'\n\nexport const thumbProps = buildProps({\n  vertical: Boolean,\n  size: String,\n  move: Number,\n  ratio: {\n    type: Number,\n    required: true,\n  },\n  always: Boolean,\n} as const)\nexport type ThumbProps = ExtractPropTypes<typeof thumbProps>\n\nexport type ThumbInstance = InstanceType<typeof Thumb> & unknown\n"],"names":["buildProps"],"mappings":";;;;;;AACY,MAAC,UAAU,GAAGA,kBAAU,CAAC;AACrC,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,QAAQ,EAAE,IAAI;AAClB,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,CAAC;;;;"}

package/lib/components/scrollbar/src/thumb2.js

@@ -2,18 +2,140 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var runtime = require('../../../utils/vue/props/runtime.js');
+var vue = require('vue');
+var core = require('@vueuse/core');
+var constants = require('./constants.js');
+var util = require('./util.js');
+var thumb = require('./thumb.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index = require('../../../hooks/use-namespace/index.js');
+var error = require('../../../utils/error.js');
 
-const thumbProps = runtime.buildProps({
-  vertical: Boolean,
-  size: String,
-  move: Number,
-  ratio: {
-    type: Number,
-    required: true
-  },
-  always: Boolean
+const COMPONENT_NAME = "Thumb";
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "thumb",
+  props: thumb.thumbProps,
+  setup(__props) {
+    const props = __props;
+    const scrollbar = vue.inject(constants.scrollbarContextKey);
+    const ns = index.useNamespace("scrollbar");
+    if (!scrollbar)
+      error.throwError(COMPONENT_NAME, "can not inject scrollbar context");
+    const instance = vue.ref();
+    const thumb = vue.ref();
+    const thumbState = vue.ref({});
+    const visible = vue.ref(false);
+    let cursorDown = false;
+    let cursorLeave = false;
+    let baseScrollHeight = 0;
+    let originalOnSelectStart = core.isClient ? document.onselectstart : null;
+    const bar = vue.computed(() => util.BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
+    const thumbStyle = vue.computed(() => util.renderThumbStyle({
+      size: props.size,
+      move: props.move,
+      bar: bar.value
+    }));
+    const offsetRatio = vue.computed(() => instance.value[bar.value.offset] ** 2 / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]);
+    const clickThumbHandler = (e) => {
+      var _a;
+      e.stopPropagation();
+      if (e.ctrlKey || [1, 2].includes(e.button))
+        return;
+      (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+      startDrag(e);
+      const el = e.currentTarget;
+      if (!el)
+        return;
+      thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
+    };
+    const clickTrackHandler = (e) => {
+      if (!thumb.value || !instance.value || !scrollbar.wrapElement)
+        return;
+      const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
+      const thumbHalf = thumb.value[bar.value.offset] / 2;
+      const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.value / instance.value[bar.value.offset];
+      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
+    };
+    const startDrag = (e) => {
+      e.stopImmediatePropagation();
+      cursorDown = true;
+      baseScrollHeight = scrollbar.wrapElement.scrollHeight;
+      document.addEventListener("mousemove", mouseMoveDocumentHandler);
+      document.addEventListener("mouseup", mouseUpDocumentHandler);
+      originalOnSelectStart = document.onselectstart;
+      document.onselectstart = () => false;
+    };
+    const mouseMoveDocumentHandler = (e) => {
+      if (!instance.value || !thumb.value)
+        return;
+      if (cursorDown === false)
+        return;
+      const prevPage = thumbState.value[bar.value.axis];
+      if (!prevPage)
+        return;
+      const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
+      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
+      const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
+      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollHeight / 100;
+    };
+    const mouseUpDocumentHandler = () => {
+      cursorDown = false;
+      thumbState.value[bar.value.axis] = 0;
+      document.removeEventListener("mousemove", mouseMoveDocumentHandler);
+      document.removeEventListener("mouseup", mouseUpDocumentHandler);
+      restoreOnselectstart();
+      if (cursorLeave)
+        visible.value = false;
+    };
+    const mouseMoveScrollbarHandler = () => {
+      cursorLeave = false;
+      visible.value = !!props.size;
+    };
+    const mouseLeaveScrollbarHandler = () => {
+      cursorLeave = true;
+      visible.value = cursorDown;
+    };
+    vue.onBeforeUnmount(() => {
+      restoreOnselectstart();
+      document.removeEventListener("mouseup", mouseUpDocumentHandler);
+    });
+    const restoreOnselectstart = () => {
+      if (document.onselectstart !== originalOnSelectStart)
+        document.onselectstart = originalOnSelectStart;
+    };
+    core.useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
+    core.useEventListener(vue.toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.Transition, {
+        name: vue.unref(ns).b("fade"),
+        persisted: ""
+      }, {
+        default: vue.withCtx(() => [
+          vue.withDirectives(vue.createElementVNode("div", {
+            ref_key: "instance",
+            ref: instance,
+            class: vue.normalizeClass([vue.unref(ns).e("bar"), vue.unref(ns).is(vue.unref(bar).key)]),
+            onMousedown: clickTrackHandler,
+            onClick: vue.withModifiers(() => {
+            }, ["stop"])
+          }, [
+            vue.createElementVNode("div", {
+              ref_key: "thumb",
+              ref: thumb,
+              class: vue.normalizeClass(vue.unref(ns).e("thumb")),
+              style: vue.normalizeStyle(vue.unref(thumbStyle)),
+              onMousedown: clickThumbHandler
+            }, null, 38)
+          ], 42, ["onClick"]), [
+            [vue.vShow, _ctx.always || visible.value]
+          ])
+        ]),
+        _: 1
+      }, 8, ["name"]);
+    };
+  }
 });
+var Thumb = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "thumb.vue"]]);
 
-exports.thumbProps = thumbProps;
+exports["default"] = Thumb;
 //# sourceMappingURL=thumb2.js.map