@element-plus/nightly 0.0.20220123 → 0.0.20220127

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

@@ -3,134 +3,51 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var core = require('@vueuse/core');
-require('../../../tokens/index.js');
-var error = require('../../../utils/error.js');
-var util = require('./util.js');
+var thumb = require('./thumb2.js');
 var bar = require('./bar.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var scrollbar = require('../../../tokens/scrollbar.js');
 
-const COMPONENT_NAME = "Bar";
 const _sfc_main = vue.defineComponent({
-  name: COMPONENT_NAME,
+  components: {
+    Thumb: thumb["default"]
+  },
   props: bar.barProps,
   setup(props) {
-    const scrollbar$1 = vue.inject(scrollbar.scrollbarContextKey);
-    if (!scrollbar$1)
-      error.throwError(COMPONENT_NAME, "can not inject scrollbar context");
-    const instance = vue.ref();
-    const thumb = vue.ref();
-    const barStore = vue.ref({});
-    const visible = vue.ref(false);
-    let cursorDown = false;
-    let cursorLeave = false;
-    let onselectstartStore = 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$1.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]);
-    const clickThumbHandler = (e) => {
-      e.stopPropagation();
-      if (e.ctrlKey || [1, 2].includes(e.button))
-        return;
-      window.getSelection()?.removeAllRanges();
-      startDrag(e);
-      const el = e.currentTarget;
-      if (!el)
-        return;
-      barStore.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
+    const moveX = vue.ref(0);
+    const moveY = vue.ref(0);
+    const GAP = 4;
+    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;
+      }
     };
-    const clickTrackHandler = (e) => {
-      if (!thumb.value || !instance.value || !scrollbar$1.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$1.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar$1.wrapElement[bar.value.scrollSize] / 100;
-    };
-    const startDrag = (e) => {
-      e.stopImmediatePropagation();
-      cursorDown = true;
-      document.addEventListener("mousemove", mouseMoveDocumentHandler);
-      document.addEventListener("mouseup", mouseUpDocumentHandler);
-      onselectstartStore = document.onselectstart;
-      document.onselectstart = () => false;
-    };
-    const mouseMoveDocumentHandler = (e) => {
-      if (!instance.value || !thumb.value)
-        return;
-      if (cursorDown === false)
-        return;
-      const prevPage = barStore.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$1.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar$1.wrapElement[bar.value.scrollSize] / 100;
-    };
-    const mouseUpDocumentHandler = () => {
-      cursorDown = false;
-      barStore.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 !== onselectstartStore)
-        document.onselectstart = onselectstartStore;
-    };
-    core.useEventListener(vue.toRef(scrollbar$1, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
-    core.useEventListener(vue.toRef(scrollbar$1, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
     return {
-      instance,
-      thumb,
-      bar,
-      thumbStyle,
-      visible,
-      clickTrackHandler,
-      clickThumbHandler
+      handleScroll,
+      moveX,
+      moveY
     };
   }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.openBlock(), vue.createBlock(vue.Transition, { name: "el-scrollbar-fade" }, {
-    default: vue.withCtx(() => [
-      vue.withDirectives(vue.createElementVNode("div", {
-        ref: "instance",
-        class: vue.normalizeClass(["el-scrollbar__bar", "is-" + _ctx.bar.key]),
-        onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.clickTrackHandler && _ctx.clickTrackHandler(...args))
-      }, [
-        vue.createElementVNode("div", {
-          ref: "thumb",
-          class: "el-scrollbar__thumb",
-          style: vue.normalizeStyle(_ctx.thumbStyle),
-          onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.clickThumbHandler && _ctx.clickThumbHandler(...args))
-        }, null, 36)
-      ], 34), [
-        [vue.vShow, _ctx.always || _ctx.visible]
-      ])
-    ]),
-    _: 1
-  });
+  const _component_thumb = vue.resolveComponent("thumb");
+  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+    vue.createVNode(_component_thumb, {
+      move: _ctx.moveX,
+      ratio: _ctx.ratioX,
+      size: _ctx.width,
+      always: _ctx.always
+    }, null, 8, ["move", "ratio", "size", "always"]),
+    vue.createVNode(_component_thumb, {
+      move: _ctx.moveY,
+      ratio: _ctx.ratioY,
+      size: _ctx.height,
+      vertical: "",
+      always: _ctx.always
+    }, null, 8, ["move", "ratio", "size", "always"])
+  ], 64);
 }
 var Bar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
 

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

@@ -1 +1 @@
-{"version":3,"file":"bar2.js","sources":["../../../../../../packages/components/scrollbar/src/bar.vue"],"sourcesContent":["<template>\n  <transition name=\"el-scrollbar-fade\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"['el-scrollbar__bar', 'is-' + bar.key]\"\n      @mousedown=\"clickTrackHandler\"\n    >\n      <div\n        ref=\"thumb\"\n        class=\"el-scrollbar__thumb\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n      ></div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  onBeforeUnmount,\n  ref,\n  toRef,\n} from 'vue'\nimport { useEventListener, isClient } from '@vueuse/core'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport { throwError } from '@element-plus/utils/error'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport { barProps } from './bar'\n\nconst COMPONENT_NAME = 'Bar'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: barProps,\n\n  setup(props) {\n    const scrollbar = inject(scrollbarContextKey)\n    if (!scrollbar)\n      throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\n    const instance = ref<HTMLDivElement>()\n    const thumb = ref<HTMLDivElement>()\n\n    const barStore = ref({})\n    const visible = ref(false)\n\n    let cursorDown = false\n    let cursorLeave = false\n    let onselectstartStore:\n      | ((this: GlobalEventHandlers, ev: Event) => any)\n      | null = isClient ? document.onselectstart : null\n\n    const bar = computed(\n      () => BAR_MAP[props.vertical ? 'vertical' : 'horizontal']\n    )\n\n    const thumbStyle = computed(() =>\n      renderThumbStyle({\n        size: props.size,\n        move: props.move,\n        bar: bar.value,\n      })\n    )\n\n    const 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\n    const 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      barStore.value[bar.value.axis] =\n        el[bar.value.offset] -\n        (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n    }\n\n    const 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 *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const startDrag = (e: MouseEvent) => {\n      e.stopImmediatePropagation()\n      cursorDown = true\n      document.addEventListener('mousemove', mouseMoveDocumentHandler)\n      document.addEventListener('mouseup', mouseUpDocumentHandler)\n      onselectstartStore = document.onselectstart\n      document.onselectstart = () => false\n    }\n\n    const mouseMoveDocumentHandler = (e: MouseEvent) => {\n      if (!instance.value || !thumb.value) return\n      if (cursorDown === false) return\n\n      const prevPage = barStore.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 *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const mouseUpDocumentHandler = () => {\n      cursorDown = false\n      barStore.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\n    const mouseMoveScrollbarHandler = () => {\n      cursorLeave = false\n      visible.value = !!props.size\n    }\n\n    const mouseLeaveScrollbarHandler = () => {\n      cursorLeave = true\n      visible.value = cursorDown\n    }\n\n    onBeforeUnmount(() => {\n      restoreOnselectstart()\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n    })\n\n    const restoreOnselectstart = () => {\n      if (document.onselectstart !== onselectstartStore)\n        document.onselectstart = onselectstartStore\n    }\n\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mousemove',\n      mouseMoveScrollbarHandler\n    )\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mouseleave',\n      mouseLeaveScrollbarHandler\n    )\n\n    return {\n      instance,\n      thumb,\n      bar,\n      thumbStyle,\n      visible,\n      clickTrackHandler,\n      clickThumbHandler,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","barProps","scrollbar","inject","scrollbarContextKey","ref","isClient","computed","BAR_MAP","renderThumbStyle","toRef","_createBlock","_createElementVNode"],"mappings":"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"}
+{"version":3,"file":"bar2.js","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\">\nimport { defineComponent, ref } from 'vue'\nimport Thumb from './thumb.vue'\nimport { barProps } from './bar'\n\nexport default defineComponent({\n  components: {\n    Thumb,\n  },\n  props: barProps,\n  setup(props) {\n    const moveX = ref(0)\n    const moveY = ref(0)\n    const GAP = 4 // top 2 + bottom 2 of bar instance\n\n    const 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\n    return {\n      handleScroll,\n      moveX,\n      moveY,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","Thumb","barProps","ref","_openBlock","_createElementBlock"],"mappings":";;;;;;;;;AAeA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,YAAY;AAAA,WACVC;AAAA;AAAA,EAEF,OAAOC;AAAA,EACP,MAAM,OAAO;AACX,UAAM,QAAQC,QAAI;AAClB,UAAM,QAAQA,QAAI;AAClB,UAAM,MAAM;AAEZ,UAAM,eAAe,CAAC,SAAyB;AAC7C,UAAI,MAAM;AACR,cAAM,eAAe,KAAK,eAAe;AACzC,cAAM,cAAc,KAAK,cAAc;AAEvC,cAAM,QAAU,KAAK,YAAY,MAAO,eAAgB,MAAM;AAC9D,cAAM,QAAU,KAAK,aAAa,MAAO,cAAe,MAAM;AAAA;AAAA;AAIlE,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;SArCJC,iBAAsEC;AAAA,oBAAxD,kBAAK;AAAA,MAAG,MAAK,KAAE;AAAA,MAAS,OAAM;AAAA,MAAQ,MAAM,KAAE;AAAA;OAC5D,SAME;AAAA,oBALO,kBAAK;AAAA,MACX,MAAK,KAAE;AAAA,MACP,OAAM;AAAA,MACP;AAAA,MACC,UAAQ;AAAA;;;;;;;;"}

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

@@ -15,6 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     scrollbar$: import("vue").Ref<HTMLDivElement | undefined>;
     wrap$: import("vue").Ref<HTMLDivElement | undefined>;
     resize$: import("vue").Ref<HTMLElement | undefined>;
+    barRef: import("vue").Ref<any>;
     moveX: import("vue").Ref<number>;
     moveY: import("vue").Ref<number>;
     ratioX: import("vue").Ref<number>;

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

@@ -27,6 +27,7 @@ const _sfc_main = vue.defineComponent({
     const resize$ = vue.ref();
     const sizeWidth = vue.ref("0");
     const sizeHeight = vue.ref("0");
+    const barRef = vue.ref();
     const moveX = vue.ref(0);
     const moveY = vue.ref(0);
     const ratioY = vue.ref(1);
@@ -42,11 +43,9 @@ const _sfc_main = vue.defineComponent({
       return [props.wrapStyle, style2];
     });
     const handleScroll = () => {
+      var _a;
       if (wrap$.value) {
-        const offsetHeight = wrap$.value.offsetHeight - GAP;
-        const offsetWidth = wrap$.value.offsetWidth - GAP;
-        moveY.value = wrap$.value.scrollTop * 100 / offsetHeight * ratioY.value;
-        moveX.value = wrap$.value.scrollLeft * 100 / offsetWidth * ratioX.value;
+        (_a = barRef.value) == null ? void 0 : _a.handleScroll(wrap$.value);
         emit("scroll", {
           scrollTop: wrap$.value.scrollTop,
           scrollLeft: wrap$.value.scrollLeft
@@ -83,8 +82,8 @@ const _sfc_main = vue.defineComponent({
     };
     vue.watch(() => props.noresize, (noresize) => {
       if (noresize) {
-        stopResizeObserver?.();
-        stopResizeListener?.();
+        stopResizeObserver == null ? void 0 : stopResizeObserver();
+        stopResizeListener == null ? void 0 : stopResizeListener();
       } else {
         ;
         ({ stop: stopResizeObserver } = core.useResizeObserver(resize$, update));
@@ -103,6 +102,7 @@ const _sfc_main = vue.defineComponent({
       scrollbar$,
       wrap$,
       resize$,
+      barRef,
       moveX,
       moveY,
       ratioX,
@@ -145,21 +145,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 3
       }, 8, ["class", "style"]))
     ], 38),
-    !_ctx.native ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-      vue.createVNode(_component_bar, {
-        move: _ctx.moveX,
-        ratio: _ctx.ratioX,
-        size: _ctx.sizeWidth,
-        always: _ctx.always
-      }, null, 8, ["move", "ratio", "size", "always"]),
-      vue.createVNode(_component_bar, {
-        move: _ctx.moveY,
-        ratio: _ctx.ratioY,
-        size: _ctx.sizeHeight,
-        vertical: "",
-        always: _ctx.always
-      }, null, 8, ["move", "ratio", "size", "always"])
-    ], 64)) : vue.createCommentVNode("v-if", true)
+    !_ctx.native ? (vue.openBlock(), vue.createBlock(_component_bar, {
+      key: 0,
+      ref: "barRef",
+      height: _ctx.sizeHeight,
+      width: _ctx.sizeWidth,
+      always: _ctx.always,
+      "ratio-x": _ctx.ratioX,
+      "ratio-y": _ctx.ratioY
+    }, null, 8, ["height", "width", "always", "ratio-x", "ratio-y"])) : vue.createCommentVNode("v-if", true)
   ], 512);
 }
 var Scrollbar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

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=\"scrollbar$\" class=\"el-scrollbar\">\n    <div\n      ref=\"wrap$\"\n      :class=\"[\n        wrapClass,\n        'el-scrollbar__wrap',\n        native ? '' : 'el-scrollbar__wrap--hidden-default',\n      ]\"\n      :style=\"style\"\n      @scroll=\"handleScroll\"\n    >\n      <component\n        :is=\"tag\"\n        ref=\"resize$\"\n        :class=\"['el-scrollbar__view', viewClass]\"\n        :style=\"viewStyle\"\n      >\n        <slot />\n      </component>\n    </div>\n    <template v-if=\"!native\">\n      <bar :move=\"moveX\" :ratio=\"ratioX\" :size=\"sizeWidth\" :always=\"always\" />\n      <bar\n        :move=\"moveY\"\n        :ratio=\"ratioY\"\n        :size=\"sizeHeight\"\n        vertical\n        :always=\"always\"\n      />\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onMounted,\n  provide,\n  ref,\n  watch,\n  reactive,\n} from 'vue'\nimport { useResizeObserver, useEventListener } from '@vueuse/core'\nimport { addUnit, isNumber } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport Bar from './bar.vue'\n\nimport { scrollbarProps, scrollbarEmits } from './scrollbar'\nimport type { StyleValue, CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElScrollbar',\n  components: {\n    Bar,\n  },\n  props: scrollbarProps,\n  emits: scrollbarEmits,\n\n  setup(props, { emit }) {\n    let stopResizeObserver: (() => void) | undefined = undefined\n    let stopResizeListener: (() => void) | undefined = undefined\n\n    const scrollbar$ = ref<HTMLDivElement>()\n    const wrap$ = ref<HTMLDivElement>()\n    const resize$ = ref<HTMLElement>()\n\n    const sizeWidth = ref('0')\n    const sizeHeight = ref('0')\n    const moveX = ref(0)\n    const moveY = ref(0)\n    const ratioY = ref(1)\n    const ratioX = ref(1)\n    const SCOPE = 'ElScrollbar'\n    const GAP = 4 // top 2 + bottom 2 of bar instance\n\n    const style = 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\n    const handleScroll = () => {\n      if (wrap$.value) {\n        const offsetHeight = wrap$.value.offsetHeight - GAP\n        const offsetWidth = wrap$.value.offsetWidth - GAP\n\n        moveY.value =\n          ((wrap$.value.scrollTop * 100) / offsetHeight) * ratioY.value\n        moveX.value =\n          ((wrap$.value.scrollLeft * 100) / offsetWidth) * ratioX.value\n\n        emit('scroll', {\n          scrollTop: wrap$.value.scrollTop,\n          scrollLeft: wrap$.value.scrollLeft,\n        })\n      }\n    }\n\n    const setScrollTop = (value: number) => {\n      if (!isNumber(value)) {\n        debugWarn(SCOPE, 'value must be a number')\n        return\n      }\n      wrap$.value!.scrollTop = value\n    }\n\n    const setScrollLeft = (value: number) => {\n      if (!isNumber(value)) {\n        debugWarn(SCOPE, 'value must be a number')\n        return\n      }\n      wrap$.value!.scrollLeft = value\n    }\n\n    const update = () => {\n      if (!wrap$.value) return\n\n      const offsetHeight = wrap$.value.offsetHeight - GAP\n      const offsetWidth = wrap$.value.offsetWidth - GAP\n\n      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight\n      const originalWidth = offsetWidth ** 2 / wrap$.value.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\n    watch(\n      () => props.noresize,\n      (noresize) => {\n        if (noresize) {\n          stopResizeObserver?.()\n          stopResizeListener?.()\n        } else {\n          ;({ stop: stopResizeObserver } = useResizeObserver(resize$, update))\n          stopResizeListener = useEventListener('resize', update)\n        }\n      },\n      { immediate: true }\n    )\n\n    provide(\n      scrollbarContextKey,\n      reactive({\n        scrollbarElement: scrollbar$,\n        wrapElement: wrap$,\n      })\n    )\n\n    onMounted(() => {\n      if (!props.native) nextTick(() => update())\n    })\n\n    return {\n      scrollbar$,\n      wrap$,\n      resize$,\n\n      moveX,\n      moveY,\n      ratioX,\n      ratioY,\n      sizeWidth,\n      sizeHeight,\n      style,\n      update,\n      handleScroll,\n      setScrollTop,\n      setScrollLeft,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","Bar","scrollbarProps","scrollbarEmits","ref","computed","addUnit","isNumber","useResizeObserver","useEventListener","scrollbarContextKey","reactive","_openBlock","_createElementBlock","_normalizeClass","_createBlock","_resolveDynamicComponent","_withCtx"],"mappings":"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"}
+{"version":3,"file":"scrollbar2.js","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue"],"sourcesContent":["<template>\n  <div ref=\"scrollbar$\" class=\"el-scrollbar\">\n    <div\n      ref=\"wrap$\"\n      :class=\"[\n        wrapClass,\n        'el-scrollbar__wrap',\n        native ? '' : 'el-scrollbar__wrap--hidden-default',\n      ]\"\n      :style=\"style\"\n      @scroll=\"handleScroll\"\n    >\n      <component\n        :is=\"tag\"\n        ref=\"resize$\"\n        :class=\"['el-scrollbar__view', viewClass]\"\n        :style=\"viewStyle\"\n      >\n        <slot />\n      </component>\n    </div>\n    <template v-if=\"!native\">\n      <bar\n        ref=\"barRef\"\n        :height=\"sizeHeight\"\n        :width=\"sizeWidth\"\n        :always=\"always\"\n        :ratio-x=\"ratioX\"\n        :ratio-y=\"ratioY\"\n      ></bar>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onMounted,\n  provide,\n  ref,\n  watch,\n  reactive,\n} from 'vue'\nimport { useResizeObserver, useEventListener } from '@vueuse/core'\nimport { addUnit, isNumber } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport Bar from './bar.vue'\n\nimport { scrollbarProps, scrollbarEmits } from './scrollbar'\nimport type { StyleValue, CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElScrollbar',\n  components: {\n    Bar,\n  },\n  props: scrollbarProps,\n  emits: scrollbarEmits,\n\n  setup(props, { emit }) {\n    let stopResizeObserver: (() => void) | undefined = undefined\n    let stopResizeListener: (() => void) | undefined = undefined\n\n    const scrollbar$ = ref<HTMLDivElement>()\n    const wrap$ = ref<HTMLDivElement>()\n    const resize$ = ref<HTMLElement>()\n\n    const sizeWidth = ref('0')\n    const sizeHeight = ref('0')\n    const barRef = ref()\n    const moveX = ref(0)\n    const moveY = ref(0)\n    const ratioY = ref(1)\n    const ratioX = ref(1)\n    const SCOPE = 'ElScrollbar'\n    const GAP = 4 // top 2 + bottom 2 of bar instance\n\n    const style = 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\n    const handleScroll = () => {\n      if (wrap$.value) {\n        barRef.value?.handleScroll(wrap$.value)\n\n        emit('scroll', {\n          scrollTop: wrap$.value.scrollTop,\n          scrollLeft: wrap$.value.scrollLeft,\n        })\n      }\n    }\n\n    const setScrollTop = (value: number) => {\n      if (!isNumber(value)) {\n        debugWarn(SCOPE, 'value must be a number')\n        return\n      }\n      wrap$.value!.scrollTop = value\n    }\n\n    const setScrollLeft = (value: number) => {\n      if (!isNumber(value)) {\n        debugWarn(SCOPE, 'value must be a number')\n        return\n      }\n      wrap$.value!.scrollLeft = value\n    }\n\n    const update = () => {\n      if (!wrap$.value) return\n\n      const offsetHeight = wrap$.value.offsetHeight - GAP\n      const offsetWidth = wrap$.value.offsetWidth - GAP\n\n      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight\n      const originalWidth = offsetWidth ** 2 / wrap$.value.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\n    watch(\n      () => props.noresize,\n      (noresize) => {\n        if (noresize) {\n          stopResizeObserver?.()\n          stopResizeListener?.()\n        } else {\n          ;({ stop: stopResizeObserver } = useResizeObserver(resize$, update))\n          stopResizeListener = useEventListener('resize', update)\n        }\n      },\n      { immediate: true }\n    )\n\n    provide(\n      scrollbarContextKey,\n      reactive({\n        scrollbarElement: scrollbar$,\n        wrapElement: wrap$,\n      })\n    )\n\n    onMounted(() => {\n      if (!props.native) nextTick(() => update())\n    })\n\n    return {\n      scrollbar$,\n      wrap$,\n      resize$,\n      barRef,\n      moveX,\n      moveY,\n      ratioX,\n      ratioY,\n      sizeWidth,\n      sizeHeight,\n      style,\n      update,\n      handleScroll,\n      setScrollTop,\n      setScrollLeft,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","Bar","scrollbarProps","scrollbarEmits","ref","computed","addUnit"],"mappings":";;;;;;;;;;;;;;AAqDA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,SACVC;AAAA;AAAA,EAEF,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,QAAI,qBAA+C;AACnD,QAAI,qBAA+C;AAEnD,UAAM,aAAaC;AACnB,UAAM,QAAQA;AACd,UAAM,UAAUA;AAEhB,UAAM,YAAYA,QAAI;AACtB,UAAM,aAAaA,QAAI;AACvB,UAAM,SAASA;AACf,UAAM,QAAQA,QAAI;AAClB,UAAM,QAAQA,QAAI;AAClB,UAAM,SAASA,QAAI;AACnB,UAAM,SAASA,QAAI;AACnB,UAAM,QAAQ;AACd,UAAM,MAAM;AAEZ,UAAM,QAAQC,aAAqB,MAAM;AACvC,YAAM,SAAuB;AAC7B,UAAI,MAAM;AAAQ,eAAM,SAASC,aAAQ,MAAM;AAC/C,UAAI,MAAM;AAAW,eAAM,YAAYA,aAAQ,MAAM;AACrD,aAAO,CAAC,MAAM,WAAW;AAAA;AAG3B,UAAM,eAAe,MAAM;AACzB,UAAI;AACF,eAAO;AAEP;AAAe,qBACF;AAAY,UACvB;AAAwB;AAAA;AAAA;AAK9B;AACE,UAAI;AACF,8BAAiB;AACjB;AAAA;AAEF;AAAyB;AAG3B;AACE,UAAI;AACF,8BAAiB;AACjB;AAAA;AAEF;AAA0B;AAG5B;AACE,UAAI;AAAc;AAElB;AACA,YAAM,oBAAoB,MAAM;AAEhC,YAAM,qCAAqC,MAAM;AACjD,YAAM;AACN,YAAM,wCAAwC;AAC9C,YAAM,aAAa,IAAI,eAAe;AAEtC;AAIA,aAAO,QACL,gDAEC;AAEH,kCAA4B;AAC5B,gBAAU,oCAAoC,GAAG,YAAY;AAAA;AAG/D;AAGI,cAAI;AACF;AACA;AAAA;AAEA;AAAC,QAAC;AACF;AAAgD;AAAA,OAGpD;AAGF;AAEW;AACW,MAClB;AAAa;AAIjB;AACE;AAAmB,iBAAS,MAAM;AAAA;AAGpC;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;AAjLiB;AAAM;;;;;AAmBnB;AAjBO;AACL;AAAqB;QAAwC;AAAA;;;AAM5D;;;AAIQ;AACP,QACL;AAAgB;;;AAET;;;;OAGK;AAAA;;AAET,MACH;AAAA,MACA;AAAO,MACP,YAAQ;AAAA,MACR;AAAS,MACT;AAAS;;;;;;;;;"}

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

@@ -0,0 +1,9 @@
+import type { ExtractPropTypes } from 'vue';
+export declare const thumbProps: {
+    readonly vertical: BooleanConstructor;
+    readonly size: StringConstructor;
+    readonly move: NumberConstructor;
+    readonly ratio: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, unknown, true, unknown, unknown>;
+    readonly always: BooleanConstructor;
+};
+export declare type ThumbProps = ExtractPropTypes<typeof thumbProps>;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var props = require('../../../utils/props.js');
+
+const thumbProps = props.buildProps({
+  vertical: Boolean,
+  size: String,
+  move: Number,
+  ratio: {
+    type: Number,
+    required: true
+  },
+  always: Boolean
+});
+
+exports.thumbProps = thumbProps;
+//# sourceMappingURL=thumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"thumb.js","sources":["../../../../../../packages/components/scrollbar/src/thumb.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from '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"],"names":["buildProps"],"mappings":";;;;;;AACY,MAAC,UAAU,GAAGA,gBAAU,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/thumb.vue.d.ts

@@ -0,0 +1,43 @@
+declare const _default: import("vue").DefineComponent<{
+    readonly vertical: BooleanConstructor;
+    readonly size: StringConstructor;
+    readonly move: NumberConstructor;
+    readonly ratio: import("../../../utils/props").BuildPropReturn<NumberConstructor, unknown, true, unknown, unknown>;
+    readonly always: BooleanConstructor;
+}, {
+    instance: import("vue").Ref<HTMLDivElement | undefined>;
+    thumb: import("vue").Ref<HTMLDivElement | undefined>;
+    bar: import("vue").ComputedRef<{
+        offset: string;
+        scroll: string;
+        scrollSize: string;
+        size: string;
+        key: string;
+        axis: string;
+        client: string;
+        direction: string;
+    } | {
+        offset: string;
+        scroll: string;
+        scrollSize: string;
+        size: string;
+        key: string;
+        axis: string;
+        client: string;
+        direction: string;
+    }>;
+    thumbStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+    visible: import("vue").Ref<boolean>;
+    clickTrackHandler: (e: MouseEvent) => void;
+    clickThumbHandler: (e: MouseEvent) => void;
+}, 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 vertical: BooleanConstructor;
+    readonly size: StringConstructor;
+    readonly move: NumberConstructor;
+    readonly ratio: import("../../../utils/props").BuildPropReturn<NumberConstructor, unknown, true, unknown, unknown>;
+    readonly always: BooleanConstructor;
+}>>, {
+    always: boolean;
+    vertical: boolean;
+}>;
+export default _default;

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

@@ -0,0 +1,139 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var core = require('@vueuse/core');
+require('../../../tokens/index.js');
+var error = require('../../../utils/error.js');
+var util = require('./util.js');
+var thumb = require('./thumb.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var scrollbar = require('../../../tokens/scrollbar.js');
+
+const COMPONENT_NAME = "Thumb";
+const _sfc_main = vue.defineComponent({
+  name: COMPONENT_NAME,
+  props: thumb.thumbProps,
+  setup(props) {
+    const scrollbar$1 = vue.inject(scrollbar.scrollbarContextKey);
+    if (!scrollbar$1)
+      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$1.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$1.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$1.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar$1.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$1.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar$1.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$1, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
+    core.useEventListener(vue.toRef(scrollbar$1, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
+    return {
+      instance,
+      thumb,
+      bar,
+      thumbStyle,
+      visible,
+      clickTrackHandler,
+      clickThumbHandler
+    };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createBlock(vue.Transition, { name: "el-scrollbar-fade" }, {
+    default: vue.withCtx(() => [
+      vue.withDirectives(vue.createElementVNode("div", {
+        ref: "instance",
+        class: vue.normalizeClass(["el-scrollbar__bar", "is-" + _ctx.bar.key]),
+        onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.clickTrackHandler && _ctx.clickTrackHandler(...args))
+      }, [
+        vue.createElementVNode("div", {
+          ref: "thumb",
+          class: "el-scrollbar__thumb",
+          style: vue.normalizeStyle(_ctx.thumbStyle),
+          onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.clickThumbHandler && _ctx.clickThumbHandler(...args))
+        }, null, 36)
+      ], 34), [
+        [vue.vShow, _ctx.always || _ctx.visible]
+      ])
+    ]),
+    _: 1
+  });
+}
+var Thumb = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
+
+exports["default"] = Thumb;
+//# sourceMappingURL=thumb2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"thumb2.js","sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<template>\n  <transition name=\"el-scrollbar-fade\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"['el-scrollbar__bar', 'is-' + bar.key]\"\n      @mousedown=\"clickTrackHandler\"\n    >\n      <div\n        ref=\"thumb\"\n        class=\"el-scrollbar__thumb\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n      ></div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  onBeforeUnmount,\n  ref,\n  toRef,\n} from 'vue'\nimport { useEventListener, isClient } from '@vueuse/core'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport { throwError } from '@element-plus/utils/error'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nimport { thumbProps } from './thumb'\n\nconst COMPONENT_NAME = 'Thumb'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: thumbProps,\n\n  setup(props) {\n    const scrollbar = inject(scrollbarContextKey)\n    if (!scrollbar)\n      throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\n    const instance = ref<HTMLDivElement>()\n    const thumb = ref<HTMLDivElement>()\n\n    const thumbState = ref({})\n    const visible = ref(false)\n\n    let cursorDown = false\n    let cursorLeave = false\n    let originalOnSelectStart:\n      | ((this: GlobalEventHandlers, ev: Event) => any)\n      | null = isClient ? document.onselectstart : null\n\n    const bar = computed(\n      () => BAR_MAP[props.vertical ? 'vertical' : 'horizontal']\n    )\n\n    const thumbStyle = computed(() =>\n      renderThumbStyle({\n        size: props.size,\n        move: props.move,\n        bar: bar.value,\n      })\n    )\n\n    const 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\n    const 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\n    const 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 *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const 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\n    const 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 *\n          scrollbar.wrapElement[bar.value.scrollSize]) /\n        100\n    }\n\n    const 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\n    const mouseMoveScrollbarHandler = () => {\n      cursorLeave = false\n      visible.value = !!props.size\n    }\n\n    const mouseLeaveScrollbarHandler = () => {\n      cursorLeave = true\n      visible.value = cursorDown\n    }\n\n    onBeforeUnmount(() => {\n      restoreOnselectstart()\n      document.removeEventListener('mouseup', mouseUpDocumentHandler)\n    })\n\n    const restoreOnselectstart = () => {\n      if (document.onselectstart !== originalOnSelectStart)\n        document.onselectstart = originalOnSelectStart\n    }\n\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mousemove',\n      mouseMoveScrollbarHandler\n    )\n    useEventListener(\n      toRef(scrollbar, 'scrollbarElement'),\n      'mouseleave',\n      mouseLeaveScrollbarHandler\n    )\n\n    return {\n      instance,\n      thumb,\n      bar,\n      thumbStyle,\n      visible,\n      clickTrackHandler,\n      clickThumbHandler,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","thumbProps","scrollbar","inject","scrollbarContextKey","ref","isClient","computed","BAR_MAP","renderThumbStyle","toRef"],"mappings":";;;;;;;;;;;;;AAkCA,MAAM,iBAAiB;AACvB,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,OAAOC;AAAA,EAEP,MAAM,OAAO;AACX,UAAMC,cAAYC,WAAOC;AACzB,QAAI,CAACF;AACH,uBAAW,gBAAgB;AAE7B,UAAM,WAAWG;AACjB,UAAM,QAAQA;AAEd,UAAM,aAAaA,QAAI;AACvB,UAAM,UAAUA,QAAI;AAEpB,QAAI,aAAa;AACjB,QAAI,cAAc;AAClB,QAAI,wBAEOC,gBAAW,SAAS,gBAAgB;AAE/C,UAAM,MAAMC,aACV,MAAMC,aAAQ,MAAM,WAAW,aAAa;AAG9C,UAAM,aAAaD,aAAS,MAC1BE,sBAAiB;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,KAAK,IAAI;AAAA;AAIb,UAAM,cAAcF,aAClB,MAIE,SAAS,MAAO,IAAI,MAAM,WAAW,IACrCL,YAAU,YAAa,IAAI,MAAM,cACjC,MAAM,QACN,MAAM,MAAO,IAAI,MAAM;AAG3B,UAAM,oBAAoB,CAAC,MAAkB;AAE3C;AACA,uBAAiB;AAA2B;AAE5C;AACA;AAEA,iBAAW,EAAE;AACb;AAAS;AACT;AAE8D;AAGhE;AACE,UAAI,iBAAiB;AAA0C;AAE/D;AAIA,YAAM,kBAAkB;AACxB,YAAM;AAIN,sCAAgC,UAC7B,oCACW,YAAY,UAAU,cAClC;AAAA;AAGJ;AACE;AACA;AACA;AACA,eAAS,iBAAiB,WAAW;AACrC;AACA;AAA+B;AAGjC;AACE,UAAI;AAAiC;AACrC;AAA0B;AAE1B;AACA;AAAe;AAEf;AAIA,YAAM,qDAAqD;AAC3D,YAAM,0BACF,UAAS;AAEb,sCAAgC,UAC7B,gDACuB,wBACxB;AAAA;AAGJ;AACE;AACA;AACA;AACA,eAAS,oBAAoB,WAAW;AACxC;AACA;AAAiB;AAAgB;AAGnC;AACE;AACA;AAAwB;AAG1B;AACE;AACA;AAAgB;AAGlB;AACE;AACA;AAAwC;AAG1C;AACE,UAAI;AACF;AAAyB;AAG7B;AAKA,0BACEQ,UAAMR,aAAW,qBACjB;AAIF;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;AA/KI;AAZN,yBAEM;AAAU;AACR,QACL;AAAW;;AAEZ;AACa;AACN,UACJ;AAAK,UACL;AAAS;;;AATM;;;;;;;;;;;"}

package/lib/components/select/src/option-group.js

@@ -31,9 +31,10 @@ const _sfc_main = vue.defineComponent({
       const children2 = [];
       if (Array.isArray(node.children)) {
         node.children.forEach((child) => {
+          var _a;
           if (child.type && child.type.name === "ElOption" && child.component && child.component.proxy) {
             children2.push(child.component.proxy);
-          } else if (child.children?.length) {
+          } else if ((_a = child.children) == null ? void 0 : _a.length) {
             children2.push(...flattedChildren(child));
           }
         });

package/lib/components/select/src/option-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"option-group.js","sources":["../../../../../../packages/components/select/src/option-group.vue"],"sourcesContent":["<template>\n  <ul v-show=\"visible\" class=\"el-select-group__wrap\">\n    <li class=\"el-select-group__title\">{{ label }}</li>\n    <li>\n      <ul class=\"el-select-group\">\n        <slot></slot>\n      </ul>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  provide,\n  inject,\n  ref,\n  reactive,\n  toRefs,\n  getCurrentInstance,\n  onMounted,\n  watch,\n  toRaw,\n} from 'vue'\nimport { selectGroupKey, selectKey } from './token'\n\nexport default defineComponent({\n  name: 'ElOptionGroup',\n  componentName: 'ElOptionGroup',\n\n  props: {\n    label: String,\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const visible = ref(true)\n    const instance = getCurrentInstance()\n    const children = ref([])\n\n    provide(\n      selectGroupKey,\n      reactive({\n        ...toRefs(props),\n      })\n    )\n\n    const select = inject(selectKey)\n\n    onMounted(() => {\n      children.value = flattedChildren(instance.subTree)\n    })\n\n    // get all instances of options\n    const flattedChildren = (node) => {\n      const children = []\n      if (Array.isArray(node.children)) {\n        node.children.forEach((child) => {\n          if (\n            child.type &&\n            child.type.name === 'ElOption' &&\n            child.component &&\n            child.component.proxy\n          ) {\n            children.push(child.component.proxy)\n          } else if (child.children?.length) {\n            children.push(...flattedChildren(child))\n          }\n        })\n      }\n      return children\n    }\n\n    const { groupQueryChange } = toRaw(select)\n    watch(groupQueryChange, () => {\n      visible.value = children.value.some((option) => option.visible === true)\n    })\n\n    return {\n      visible,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ref","getCurrentInstance","selectGroupKey","reactive","toRefs","inject","selectKey","toRaw","_withDirectives","_createElementVNode"],"mappings":";;;;;;;;AA0BA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,eAAe;AAAA,EAEf,OAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAGb,MAAM,OAAO;AACX,UAAM,UAAUC,QAAI;AACpB,UAAM,WAAWC;AACjB,UAAM,WAAWD,QAAI;AAErB,gBACEE,sBACAC,aAAS;AAAA,SACJC,WAAO;AAAA;AAId,UAAM,SAASC,WAAOC;AAEtB,kBAAU,MAAM;AACd,eAAS,QAAQ,gBAAgB,SAAS;AAAA;AAI5C,UAAM,kBAAkB,CAAC,SAAS;AAChC,YAAM,YAAW;AACjB,UAAI,MAAM,QAAQ,KAAK,WAAW;AAChC,aAAK,SAAS,QAAQ,CAAC,UAAU;AAC/B,cACE,MAAM,QACN,MAAM,KAAK,SAAS,cACpB,MAAM,aACN,MAAM,UAAU,OAChB;AACA,sBAAS,KAAK,MAAM,UAAU;AAAA,qBACrB,MAAM,UAAU,QAAQ;AACjC,sBAAS,KAAK,GAAG,gBAAgB;AAAA;AAAA;AAAA;AAIvC,aAAO;AAAA;AAGT,UAAM,EAAE,qBAAqBC,UAAM;AACnC,cAAM,kBAAkB,MAAM;AAC5B,cAAQ,QAAQ,SAAS,MAAM,KAAK,CAAC,WAAW,OAAO,YAAY;AAAA;AAGrE,WAAO;AAAA,MACL;AAAA;AAAA;AAAA;qBA/EE,OAAM;qBAEJ,OAAM;;2CAHd;SACEC,4DAAsC,kBAAK;AAAA,IAC3CC,uBAIK;AAAA,2BAHH,MAEK,MAFL;AAAA,6BACe;AAAA;;;YAJA;AAAA;;;;;;;"}
+{"version":3,"file":"option-group.js","sources":["../../../../../../packages/components/select/src/option-group.vue"],"sourcesContent":["<template>\n  <ul v-show=\"visible\" class=\"el-select-group__wrap\">\n    <li class=\"el-select-group__title\">{{ label }}</li>\n    <li>\n      <ul class=\"el-select-group\">\n        <slot></slot>\n      </ul>\n    </li>\n  </ul>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  provide,\n  inject,\n  ref,\n  reactive,\n  toRefs,\n  getCurrentInstance,\n  onMounted,\n  watch,\n  toRaw,\n} from 'vue'\nimport { selectGroupKey, selectKey } from './token'\n\nexport default defineComponent({\n  name: 'ElOptionGroup',\n  componentName: 'ElOptionGroup',\n\n  props: {\n    label: String,\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const visible = ref(true)\n    const instance = getCurrentInstance()\n    const children = ref([])\n\n    provide(\n      selectGroupKey,\n      reactive({\n        ...toRefs(props),\n      })\n    )\n\n    const select = inject(selectKey)\n\n    onMounted(() => {\n      children.value = flattedChildren(instance.subTree)\n    })\n\n    // get all instances of options\n    const flattedChildren = (node) => {\n      const children = []\n      if (Array.isArray(node.children)) {\n        node.children.forEach((child) => {\n          if (\n            child.type &&\n            child.type.name === 'ElOption' &&\n            child.component &&\n            child.component.proxy\n          ) {\n            children.push(child.component.proxy)\n          } else if (child.children?.length) {\n            children.push(...flattedChildren(child))\n          }\n        })\n      }\n      return children\n    }\n\n    const { groupQueryChange } = toRaw(select)\n    watch(groupQueryChange, () => {\n      visible.value = children.value.some((option) => option.visible === true)\n    })\n\n    return {\n      visible,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ref","getCurrentInstance","selectGroupKey","reactive","toRefs","inject","selectKey"],"mappings":";;;;;;;;AA0BA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,eAAe;AAAA,EAEf,OAAO;AAAA,IACL,OAAO;AAAA,IACP,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAGb,MAAM,OAAO;AACX,UAAM,UAAUC,QAAI;AACpB,UAAM,WAAWC;AACjB,UAAM,WAAWD,QAAI;AAErB,gBACEE,sBACAC,aAAS;AAAA,SACJC,WAAO;AAAA;AAId,UAAM,SAASC,WAAOC;AAEtB,kBAAU,MAAM;AACd,eAAS,QAAQ,gBAAgB,SAAS;AAAA;AAI5C,UAAM,kBAAkB,CAAC,SAAS;AAChC,YAAM,YAAW;AACjB,UAAI,MAAM,QAAQ,KAAK,WAAW;AAChC,aAAK,SAAS,QAAQ,CAAC,UAAU;AAC/B,cACE;AAKA,iCAAoB,UAAU;AAAA,qBACrB,MAAM;AACf,sBAAS,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAIvC;AAAO;AAGT;AACA,UAAM,kBAAkB;AACtB;AAAmE;AAGrE;AAAO;AACL;AAAA;AAAA;;qBA7EI,OAAM;;;SAFZ,gBAAmD;AAAR,2BAKtC;AAAA,2BAHH,MAEK;AAFL;AACe;;;;AAJA;;;;;;;;"}

package/lib/components/select/src/select-dropdown.js

@@ -17,7 +17,8 @@ const _sfc_main = vue.defineComponent({
     const isFitInputWidth = vue.computed(() => select.props.fitInputWidth);
     const minWidth = vue.ref("");
     function updateMinWidth() {
-      minWidth.value = `${select.selectWrapper?.getBoundingClientRect().width}px`;
+      var _a;
+      minWidth.value = `${(_a = select.selectWrapper) == null ? void 0 : _a.getBoundingClientRect().width}px`;
     }
     vue.onMounted(() => {
       updateMinWidth();

package/lib/components/select/src/select-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-dropdown.js","sources":["../../../../../../packages/components/select/src/select-dropdown.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-select-dropdown\"\n    :class=\"[{ 'is-multiple': isMultiple }, popperClass]\"\n    :style=\"{ [isFitInputWidth ? 'width' : 'minWidth']: minWidth }\"\n  >\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  onMounted,\n  onBeforeUnmount,\n  inject,\n  ref,\n} from 'vue'\nimport {\n  addResizeListener,\n  removeResizeListener,\n} from '@element-plus/utils/resize-event'\nimport { selectKey } from './token'\nimport type { ResizableElement } from '@element-plus/utils/resize-event'\n\nexport default defineComponent({\n  name: 'ElSelectDropdown',\n\n  componentName: 'ElSelectDropdown',\n\n  setup() {\n    const select = inject(selectKey)!\n\n    // computed\n    const popperClass = computed(() => select.props.popperClass)\n    const isMultiple = computed(() => select.props.multiple)\n    const isFitInputWidth = computed(() => select.props.fitInputWidth)\n    const minWidth = ref('')\n\n    function updateMinWidth() {\n      minWidth.value = `${\n        select.selectWrapper?.getBoundingClientRect().width\n      }px`\n    }\n\n    onMounted(() => {\n      // TODO: updatePopper\n      // popper.value.update()\n      updateMinWidth()\n      addResizeListener(\n        select.selectWrapper as ResizableElement,\n        updateMinWidth\n      )\n    })\n\n    onBeforeUnmount(() => {\n      removeResizeListener(\n        select.selectWrapper as ResizableElement,\n        updateMinWidth\n      )\n    })\n\n    return {\n      minWidth,\n      popperClass,\n      isMultiple,\n      isFitInputWidth,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","inject","selectKey","computed","ref","_openBlock","_normalizeClass"],"mappings":";;;;;;;;;AA0BA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,eAAe;AAAA,EAEf,QAAQ;AACN,UAAM,SAASC,WAAOC;AAGtB,UAAM,cAAcC,aAAS,MAAM,OAAO,MAAM;AAChD,UAAM,aAAaA,aAAS,MAAM,OAAO,MAAM;AAC/C,UAAM,kBAAkBA,aAAS,MAAM,OAAO,MAAM;AACpD,UAAM,WAAWC,QAAI;AAErB,8BAA0B;AACxB,eAAS,QAAQ,GACf,OAAO,eAAe,wBAAwB;AAAA;AAIlD,kBAAU,MAAM;AAGd;AACA,oCACE,OAAO,eACP;AAAA;AAIJ,wBAAgB,MAAM;AACpB,uCACE,OAAO,eACP;AAAA;AAIJ,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;2BAlEJ,wBAMM;SALCC,wCAAC,OAAoB;AAAA,IAEzB,OAAKC,0CAAoB,qCAA0B,KAAQ;AAAA;KAE5D;AAAA;;;;;;;"}
+{"version":3,"file":"select-dropdown.js","sources":["../../../../../../packages/components/select/src/select-dropdown.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-select-dropdown\"\n    :class=\"[{ 'is-multiple': isMultiple }, popperClass]\"\n    :style=\"{ [isFitInputWidth ? 'width' : 'minWidth']: minWidth }\"\n  >\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  onMounted,\n  onBeforeUnmount,\n  inject,\n  ref,\n} from 'vue'\nimport {\n  addResizeListener,\n  removeResizeListener,\n} from '@element-plus/utils/resize-event'\nimport { selectKey } from './token'\nimport type { ResizableElement } from '@element-plus/utils/resize-event'\n\nexport default defineComponent({\n  name: 'ElSelectDropdown',\n\n  componentName: 'ElSelectDropdown',\n\n  setup() {\n    const select = inject(selectKey)!\n\n    // computed\n    const popperClass = computed(() => select.props.popperClass)\n    const isMultiple = computed(() => select.props.multiple)\n    const isFitInputWidth = computed(() => select.props.fitInputWidth)\n    const minWidth = ref('')\n\n    function updateMinWidth() {\n      minWidth.value = `${\n        select.selectWrapper?.getBoundingClientRect().width\n      }px`\n    }\n\n    onMounted(() => {\n      // TODO: updatePopper\n      // popper.value.update()\n      updateMinWidth()\n      addResizeListener(\n        select.selectWrapper as ResizableElement,\n        updateMinWidth\n      )\n    })\n\n    onBeforeUnmount(() => {\n      removeResizeListener(\n        select.selectWrapper as ResizableElement,\n        updateMinWidth\n      )\n    })\n\n    return {\n      minWidth,\n      popperClass,\n      isMultiple,\n      isFitInputWidth,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","inject","selectKey","computed","ref"],"mappings":";;;;;;;;;AA0BA,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,eAAe;AAAA,EAEf,QAAQ;AACN,UAAM,SAASC,WAAOC;AAGtB,UAAM,cAAcC,aAAS,MAAM,OAAO,MAAM;AAChD,UAAM,aAAaA,aAAS,MAAM,OAAO,MAAM;AAC/C,UAAM,kBAAkBA,aAAS,MAAM,OAAO,MAAM;AACpD,UAAM,WAAWC,QAAI;AAErB,8BAA0B;AACxB;AACgD;AAIlD;AAGE;AACA;AAEE;AAIJ;AACE;AAEE;AAIJ;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;SAjEG,kCAAC;AAAoB,wDAEA;AAAkC;;AAE5D;;;;;;;;"}