element-pe 1.0.8 → 1.0.9-alpha.12

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

@@ -1,7 +1,15 @@
-import script from './bar.vue_vue&type=script&lang.mjs';
-export { default } from './bar.vue_vue&type=script&lang.mjs';
-import { render } from './bar.vue_vue&type=template&id=2f63f10a&lang.mjs';
+import { buildProps } from '../../../utils/props.mjs';
 
-script.render = render;
-script.__file = "packages/components/scrollbar/src/bar.vue";
+const barProps = buildProps({
+  vertical: Boolean,
+  size: String,
+  move: Number,
+  ratio: {
+    type: Number,
+    required: true
+  },
+  always: Boolean
+});
+
+export { barProps };
 //# sourceMappingURL=bar.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"bar.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{"version":3,"file":"bar.mjs","sources":["../../../../../../packages/components/scrollbar/src/bar.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const barProps = 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 BarProps = ExtractPropTypes<typeof barProps>\n"],"names":[],"mappings":";;MAGa,WAAW,WAAW;AAAA,EACjC,UAAU;AAAA,EACV,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,IACL,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EAEZ,QAAQ;AAAA;;;;"}

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

@@ -1,13 +1,12 @@
-import type { Ref } from 'vue';
 declare const _default: import("vue").DefineComponent<{
-    vertical: BooleanConstructor;
-    size: StringConstructor;
-    move: NumberConstructor;
-    ratio: NumberConstructor;
-    always: BooleanConstructor;
+    readonly vertical: BooleanConstructor;
+    readonly size: StringConstructor;
+    readonly move: NumberConstructor;
+    readonly ratio: import("../../../utils/props").BuildPropReturn<NumberConstructor, unknown, true, unknown, unknown>;
+    readonly always: BooleanConstructor;
 }, {
-    instance: Ref<null>;
-    thumb: Ref<null>;
+    instance: import("vue").Ref<HTMLDivElement | undefined>;
+    thumb: import("vue").Ref<HTMLDivElement | undefined>;
     bar: import("vue").ComputedRef<{
         offset: string;
         scroll: string;
@@ -27,23 +26,23 @@ declare const _default: import("vue").DefineComponent<{
         client: string;
         direction: string;
     }>;
+    thumbStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
+    visible: import("vue").Ref<boolean>;
     clickTrackHandler: (e: MouseEvent) => void;
     clickThumbHandler: (e: MouseEvent) => void;
-    thumbStyle: import("vue").ComputedRef<any>;
-    visible: Ref<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    vertical?: unknown;
-    size?: unknown;
-    move?: unknown;
-    ratio?: unknown;
-    always?: unknown;
+    readonly vertical?: unknown;
+    readonly size?: unknown;
+    readonly move?: unknown;
+    readonly ratio?: unknown;
+    readonly always?: unknown;
 } & {
     always: boolean;
     vertical: boolean;
+    ratio: number;
 } & {
     size?: string | undefined;
     move?: number | undefined;
-    ratio?: number | undefined;
 }>, {
     always: boolean;
     vertical: boolean;

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

@@ -0,0 +1,105 @@
+import { defineComponent, inject, ref, computed, onBeforeUnmount, toRef } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import '../../../tokens/index.mjs';
+import { throwError } from '../../../utils/error.mjs';
+import { BAR_MAP, renderThumbStyle } from './util.mjs';
+import { barProps } from './bar.mjs';
+import { scrollbarContextKey } from '../../../tokens/scrollbar.mjs';
+
+const COMPONENT_NAME = "Bar";
+var script = defineComponent({
+  name: COMPONENT_NAME,
+  props: barProps,
+  setup(props) {
+    const scrollbar = inject(scrollbarContextKey);
+    if (!scrollbar)
+      throwError(COMPONENT_NAME, "can not inject scrollbar context");
+    const instance = ref();
+    const thumb = ref();
+    const barStore = ref({});
+    const visible = ref(false);
+    let cursorDown = false;
+    let cursorLeave = false;
+    let onselectstartStore = null;
+    const bar = computed(() => BAR_MAP[props.vertical ? "vertical" : "horizontal"]);
+    const thumbStyle = computed(() => renderThumbStyle({
+      size: props.size,
+      move: props.move,
+      bar: bar.value
+    }));
+    const offsetRatio = 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;
+      barStore.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);
+      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.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
+    };
+    const mouseUpDocumentHandler = () => {
+      cursorDown = false;
+      barStore.value[bar.value.axis] = 0;
+      document.removeEventListener("mousemove", mouseMoveDocumentHandler);
+      document.removeEventListener("mouseup", mouseUpDocumentHandler);
+      document.onselectstart = onselectstartStore;
+      if (cursorLeave)
+        visible.value = false;
+    };
+    const mouseMoveScrollbarHandler = () => {
+      cursorLeave = false;
+      visible.value = !!props.size;
+    };
+    const mouseLeaveScrollbarHandler = () => {
+      cursorLeave = true;
+      visible.value = cursorDown;
+    };
+    onBeforeUnmount(() => document.removeEventListener("mouseup", mouseUpDocumentHandler));
+    useEventListener(toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
+    useEventListener(toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
+    return {
+      instance,
+      thumb,
+      bar,
+      thumbStyle,
+      visible,
+      clickTrackHandler,
+      clickThumbHandler
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=bar.vue_vue_type_script_lang.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar.vue_vue_type_script_lang.mjs","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 } 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 = 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      document.onselectstart = onselectstartStore\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      document.removeEventListener('mouseup', mouseUpDocumentHandler)\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":[],"mappings":";;;;;;;;AAkCA,MAAM,iBAAiB;AACvB,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,YAAY,OAAO;AACzB,QAAI,CAAC;AACH,iBAAW,gBAAgB;AAE7B,UAAM,WAAW;AACjB,UAAM,QAAQ;AAEd,UAAM,WAAW,IAAI;AACrB,UAAM,UAAU,IAAI;AAEpB,QAAI,aAAa;AACjB,QAAI,cAAc;AAClB,QAAI,qBAEO;AAEX,UAAM,MAAM,SACV,MAAM,QAAQ,MAAM,WAAW,aAAa;AAG9C,UAAM,aAAa,SAAS,MAC1B,iBAAiB;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,MAAM,MAAM;AAAA,MACZ,KAAK,IAAI;AAAA;AAIb,UAAM,cAAc,SAClB,MAIE,SAAS,MAAO,IAAI,MAAM,WAAW,IACrC,UAAU,YAAa,IAAI,MAAM,cACjC,MAAM,QACN,MAAM,MAAO,IAAI,MAAM;AAG3B,UAAM,oBAAoB,CAAC,MAAkB;;AAE3C,QAAE;AACF,UAAI,EAAE,WAAW,CAAC,GAAG,GAAG,SAAS,EAAE;AAAS;AAE5C,mBAAO,mBAAP,mBAAuB;AACvB,gBAAU;AAEV,YAAM,KAAK,EAAE;AACb,UAAI,CAAC;AAAI;AACT,eAAS,MAAM,IAAI,MAAM,QACvB,GAAG,IAAI,MAAM,aACV,IAAI,MAAM,UAAU,GAAG,wBAAwB,IAAI,MAAM;AAAA;AAGhE,UAAM,oBAAoB,CAAC,MAAkB;AAC3C,UAAI,CAAC,MAAM,SAAS,CAAC,SAAS,SAAS,CAAC,UAAU;AAAa;AAE/D,YAAM,SAAS,KAAK,IACjB,EAAE,OAAuB,wBAAwB,IAAI,MAAM,aAC1D,EAAE,IAAI,MAAM;AAEhB,YAAM,YAAY,MAAM,MAAM,IAAI,MAAM,UAAU;AAClD,YAAM,0BACF,UAAS,aAAa,MAAM,YAAY,QAC1C,SAAS,MAAM,IAAI,MAAM;AAE3B,gBAAU,YAAY,IAAI,MAAM,UAC7B,0BACC,UAAU,YAAY,IAAI,MAAM,cAClC;AAAA;AAGJ,UAAM,YAAY,CAAC,MAAkB;AACnC,QAAE;AACF,mBAAa;AACb,eAAS,iBAAiB,aAAa;AACvC,eAAS,iBAAiB,WAAW;AACrC,2BAAqB,SAAS;AAC9B,eAAS,gBAAgB,MAAM;AAAA;AAGjC,UAAM,2BAA2B,CAAC,MAAkB;AAClD,UAAI,CAAC,SAAS,SAAS,CAAC,MAAM;AAAO;AACrC,UAAI,eAAe;AAAO;AAE1B,YAAM,WAAW,SAAS,MAAM,IAAI,MAAM;AAC1C,UAAI,CAAC;AAAU;AAEf,YAAM,SACH,UAAS,MAAM,wBAAwB,IAAI,MAAM,aAChD,EAAE,IAAI,MAAM,WACd;AACF,YAAM,qBAAqB,MAAM,MAAM,IAAI,MAAM,UAAU;AAC3D,YAAM,0BACF,UAAS,sBAAsB,MAAM,YAAY,QACnD,SAAS,MAAM,IAAI,MAAM;AAC3B,gBAAU,YAAY,IAAI,MAAM,UAC7B,0BACC,UAAU,YAAY,IAAI,MAAM,cAClC;AAAA;AAGJ,UAAM,yBAAyB,MAAM;AACnC,mBAAa;AACb,eAAS,MAAM,IAAI,MAAM,QAAQ;AACjC,eAAS,oBAAoB,aAAa;AAC1C,eAAS,oBAAoB,WAAW;AACxC,eAAS,gBAAgB;AACzB,UAAI;AAAa,gBAAQ,QAAQ;AAAA;AAGnC,UAAM,4BAA4B,MAAM;AACtC,oBAAc;AACd,cAAQ,QAAQ,CAAC,CAAC,MAAM;AAAA;AAG1B,UAAM,6BAA6B,MAAM;AACvC,oBAAc;AACd,cAAQ,QAAQ;AAAA;AAGlB,oBAAgB,MACd,SAAS,oBAAoB,WAAW;AAG1C,qBACE,MAAM,WAAW,qBACjB,aACA;AAEF,qBACE,MAAM,WAAW,qBACjB,cACA;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

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

@@ -0,0 +1,26 @@
+import { openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, vShow } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(Transition, { name: "el-scrollbar-fade" }, {
+    default: withCtx(() => [
+      withDirectives(createElementVNode("div", {
+        ref: "instance",
+        class: normalizeClass(["el-scrollbar__bar", "is-" + _ctx.bar.key]),
+        onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.clickTrackHandler && _ctx.clickTrackHandler(...args))
+      }, [
+        createElementVNode("div", {
+          ref: "thumb",
+          class: "el-scrollbar__thumb",
+          style: normalizeStyle(_ctx.thumbStyle),
+          onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.clickThumbHandler && _ctx.clickThumbHandler(...args))
+        }, null, 36)
+      ], 34), [
+        [vShow, _ctx.always || _ctx.visible]
+      ])
+    ]),
+    _: 1
+  });
+}
+
+export { render };
+//# sourceMappingURL=bar.vue_vue_type_template_id_2f63f10a_lang.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar.vue_vue_type_template_id_2f63f10a_lang.mjs","sources":["../../../../../../packages/components/scrollbar/src/bar.vue?vue&type=template&id=2f63f10a&lang.js"],"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 } 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 = 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      document.onselectstart = onselectstartStore\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      document.removeEventListener('mouseup', mouseUpDocumentHandler)\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":["_createBlock","_createElementVNode"],"mappings":";;;sBACEA,0BAAY,MAAK;qBACf;qBAAAC;QAEE,KAAI;AAAA,QACH,oDAAqC,SAAI;AAAA,QACzC,oDAAW;;QAEZA;UACE,KAAI;AAAA,UACJ,OAAM;AAAA,UACL,sBAAO;UACP,oDAAW;;;gBATN,eAAU;;;;;;;;;"}

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

@@ -0,0 +1,7 @@
+import script from './bar.vue_vue_type_script_lang.mjs';
+export { default } from './bar.vue_vue_type_script_lang.mjs';
+import { render } from './bar.vue_vue_type_template_id_2f63f10a_lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/scrollbar/src/bar.vue";
+//# sourceMappingURL=bar2.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar2.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

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

@@ -0,0 +1,22 @@
+import type { StyleValue, ExtractPropTypes } from 'vue';
+export declare const scrollbarProps: {
+    readonly height: import("element-pe/es/utils/props").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly maxHeight: import("element-pe/es/utils/props").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly native: import("element-pe/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly wrapStyle: import("element-pe/es/utils/props").BuildPropReturn<import("element-pe/es/utils/props").PropWrapper<StyleValue>, "", unknown, unknown, unknown>;
+    readonly wrapClass: import("element-pe/es/utils/props").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly viewClass: import("element-pe/es/utils/props").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly viewStyle: import("element-pe/es/utils/props").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly noresize: BooleanConstructor;
+    readonly tag: import("element-pe/es/utils/props").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
+    readonly always: import("element-pe/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly minSize: import("element-pe/es/utils/props").BuildPropReturn<NumberConstructor, 20, unknown, unknown, unknown>;
+};
+export declare type ScrollbarProps = ExtractPropTypes<typeof scrollbarProps>;
+export declare const scrollbarEmits: {
+    scroll: ({ scrollTop, scrollLeft, }: {
+        scrollTop: number;
+        scrollLeft: number;
+    }) => boolean;
+};
+export declare type ScrollbarEmits = typeof scrollbarEmits;

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

@@ -0,0 +1,55 @@
+import { buildProps, definePropType } from '../../../utils/props.mjs';
+import { isNumber } from '../../../utils/util.mjs';
+
+const scrollbarProps = buildProps({
+  height: {
+    type: [String, Number],
+    default: ""
+  },
+  maxHeight: {
+    type: [String, Number],
+    default: ""
+  },
+  native: {
+    type: Boolean,
+    default: false
+  },
+  wrapStyle: {
+    type: definePropType([String, Object, Array]),
+    default: ""
+  },
+  wrapClass: {
+    type: [String, Array],
+    default: ""
+  },
+  viewClass: {
+    type: [String, Array],
+    default: ""
+  },
+  viewStyle: {
+    type: [String, Array],
+    default: ""
+  },
+  noresize: Boolean,
+  tag: {
+    type: String,
+    default: "div"
+  },
+  always: {
+    type: Boolean,
+    default: false
+  },
+  minSize: {
+    type: Number,
+    default: 20
+  }
+});
+const scrollbarEmits = {
+  scroll: ({
+    scrollTop,
+    scrollLeft
+  }) => isNumber(scrollTop) && isNumber(scrollLeft)
+};
+
+export { scrollbarEmits, scrollbarProps };
+//# sourceMappingURL=scrollbar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbar.mjs","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils/props'\nimport { isNumber } from '@element-plus/utils/util'\nimport type { StyleValue, ExtractPropTypes } from 'vue'\n\nexport const scrollbarProps = buildProps({\n  height: {\n    type: [String, Number],\n    default: '',\n  },\n  maxHeight: {\n    type: [String, Number],\n    default: '',\n  },\n  native: {\n    type: Boolean,\n    default: false,\n  },\n  wrapStyle: {\n    type: definePropType<StyleValue>([String, Object, Array]),\n    default: '',\n  },\n  wrapClass: {\n    type: [String, Array],\n    default: '',\n  },\n  viewClass: {\n    type: [String, Array],\n    default: '',\n  },\n  viewStyle: {\n    type: [String, Array],\n    default: '',\n  },\n  noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能\n  tag: {\n    type: String,\n    default: 'div',\n  },\n  always: {\n    type: Boolean,\n    default: false,\n  },\n  minSize: {\n    type: Number,\n    default: 20,\n  },\n} as const)\n\nexport type ScrollbarProps = ExtractPropTypes<typeof scrollbarProps>\n\nexport const scrollbarEmits = {\n  scroll: ({\n    scrollTop,\n    scrollLeft,\n  }: {\n    scrollTop: number\n    scrollLeft: number\n  }) => isNumber(scrollTop) && isNumber(scrollLeft),\n}\nexport type ScrollbarEmits = typeof scrollbarEmits\n"],"names":[],"mappings":";;;MAIa,iBAAiB,WAAW;AAAA,EACvC,QAAQ;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAEX,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM,eAA2B,CAAC,QAAQ,QAAQ;AAAA,IAClD,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA,EACV,KAAK;AAAA,IACH,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;MAMA,iBAAiB;AAAA,EAC5B,QAAQ,CAAC;AAAA,IACP;AAAA,IACA;AAAA,QAII,SAAS,cAAc,SAAS;AAAA;;;;"}

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

@@ -0,0 +1,76 @@
+import type { StyleValue } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    readonly height: import("../../../utils/props").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly maxHeight: import("../../../utils/props").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly native: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly wrapStyle: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<StyleValue>, "", unknown, unknown, unknown>;
+    readonly wrapClass: import("../../../utils/props").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly viewClass: import("../../../utils/props").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly viewStyle: import("../../../utils/props").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly noresize: BooleanConstructor;
+    readonly tag: import("../../../utils/props").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
+    readonly always: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly minSize: import("../../../utils/props").BuildPropReturn<NumberConstructor, 20, unknown, unknown, unknown>;
+}, {
+    scrollbar$: import("vue").Ref<HTMLDivElement | undefined>;
+    wrap$: import("vue").Ref<HTMLDivElement | undefined>;
+    resize$: import("vue").Ref<HTMLElement | undefined>;
+    moveX: import("vue").Ref<number>;
+    moveY: import("vue").Ref<number>;
+    ratioX: import("vue").Ref<number>;
+    ratioY: import("vue").Ref<number>;
+    sizeWidth: import("vue").Ref<string>;
+    sizeHeight: import("vue").Ref<string>;
+    style: import("vue").ComputedRef<StyleValue>;
+    update: () => void;
+    handleScroll: () => void;
+    setScrollTop: (value: number) => void;
+    setScrollLeft: (value: number) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    scroll: ({ scrollTop, scrollLeft, }: {
+        scrollTop: number;
+        scrollLeft: number;
+    }) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    readonly height?: unknown;
+    readonly maxHeight?: unknown;
+    readonly native?: unknown;
+    readonly wrapStyle?: unknown;
+    readonly wrapClass?: unknown;
+    readonly viewClass?: unknown;
+    readonly viewStyle?: unknown;
+    readonly noresize?: unknown;
+    readonly tag?: unknown;
+    readonly always?: unknown;
+    readonly minSize?: unknown;
+} & {
+    height: import("../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
+    maxHeight: import("../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
+    always: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    native: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    wrapStyle: StyleValue;
+    wrapClass: import("../../../utils/props").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
+    viewClass: import("../../../utils/props").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
+    viewStyle: import("../../../utils/props").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
+    tag: string;
+    minSize: number;
+    noresize: boolean;
+} & {}> & {
+    onScroll?: ((args_0: {
+        scrollTop: number;
+        scrollLeft: number;
+    }) => any) | undefined;
+}, {
+    height: import("../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
+    maxHeight: import("../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
+    always: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    native: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    wrapStyle: StyleValue;
+    wrapClass: import("../../../utils/props").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
+    viewClass: import("../../../utils/props").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
+    viewStyle: import("../../../utils/props").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
+    tag: string;
+    minSize: number;
+    noresize: boolean;
+}>;
+export default _default;

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

@@ -0,0 +1,118 @@
+import { defineComponent, ref, computed, watch, provide, reactive, onMounted, nextTick } from 'vue';
+import { useResizeObserver, useEventListener } from '@vueuse/core';
+import { addUnit, isNumber } from '../../../utils/util.mjs';
+import { debugWarn } from '../../../utils/error.mjs';
+import '../../../tokens/index.mjs';
+import './bar2.mjs';
+import { scrollbarProps, scrollbarEmits } from './scrollbar.mjs';
+import script$1 from './bar.vue_vue_type_script_lang.mjs';
+import { scrollbarContextKey } from '../../../tokens/scrollbar.mjs';
+
+var script = defineComponent({
+  name: "ElScrollbar",
+  components: {
+    Bar: script$1
+  },
+  props: scrollbarProps,
+  emits: scrollbarEmits,
+  setup(props, { emit }) {
+    let stopResizeObserver = void 0;
+    let stopResizeListener = void 0;
+    const scrollbar$ = ref();
+    const wrap$ = ref();
+    const resize$ = ref();
+    const sizeWidth = ref("0");
+    const sizeHeight = ref("0");
+    const moveX = ref(0);
+    const moveY = ref(0);
+    const ratioY = ref(1);
+    const ratioX = ref(1);
+    const SCOPE = "ElScrollbar";
+    const GAP = 4;
+    const style = computed(() => {
+      const style2 = {};
+      if (props.height)
+        style2.height = addUnit(props.height);
+      if (props.maxHeight)
+        style2.maxHeight = addUnit(props.maxHeight);
+      return [props.wrapStyle, style2];
+    });
+    const handleScroll = () => {
+      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;
+        emit("scroll", {
+          scrollTop: wrap$.value.scrollTop,
+          scrollLeft: wrap$.value.scrollLeft
+        });
+      }
+    };
+    const setScrollTop = (value) => {
+      if (!isNumber(value)) {
+        debugWarn(SCOPE, "value must be a number");
+        return;
+      }
+      wrap$.value.scrollTop = value;
+    };
+    const setScrollLeft = (value) => {
+      if (!isNumber(value)) {
+        debugWarn(SCOPE, "value must be a number");
+        return;
+      }
+      wrap$.value.scrollLeft = value;
+    };
+    const update = () => {
+      if (!wrap$.value)
+        return;
+      const offsetHeight = wrap$.value.offsetHeight - GAP;
+      const offsetWidth = wrap$.value.offsetWidth - GAP;
+      const originalHeight = offsetHeight ** 2 / wrap$.value.scrollHeight;
+      const originalWidth = offsetWidth ** 2 / wrap$.value.scrollWidth;
+      const height = Math.max(originalHeight, props.minSize);
+      const width = Math.max(originalWidth, props.minSize);
+      ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
+      ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
+      sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : "";
+      sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : "";
+    };
+    watch(() => props.noresize, (noresize) => {
+      if (noresize) {
+        stopResizeObserver == null ? void 0 : stopResizeObserver();
+        stopResizeListener == null ? void 0 : stopResizeListener();
+      } else {
+        ;
+        ({ stop: stopResizeObserver } = useResizeObserver(resize$, update));
+        stopResizeListener = useEventListener("resize", update);
+      }
+    }, { immediate: true });
+    provide(scrollbarContextKey, reactive({
+      scrollbarElement: scrollbar$,
+      wrapElement: wrap$
+    }));
+    onMounted(() => {
+      if (!props.native)
+        nextTick(() => update());
+    });
+    return {
+      scrollbar$,
+      wrap$,
+      resize$,
+      moveX,
+      moveY,
+      ratioX,
+      ratioY,
+      sizeWidth,
+      sizeHeight,
+      style,
+      update,
+      handleScroll,
+      setScrollTop,
+      setScrollLeft
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=scrollbar.vue_vue_type_script_lang.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbar.vue_vue_type_script_lang.mjs","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":["Bar"],"mappings":";;;;;;;;;;AAqDA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,SACVA;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,QAAI,qBAA+C;AACnD,QAAI,qBAA+C;AAEnD,UAAM,aAAa;AACnB,UAAM,QAAQ;AACd,UAAM,UAAU;AAEhB,UAAM,YAAY,IAAI;AACtB,UAAM,aAAa,IAAI;AACvB,UAAM,QAAQ,IAAI;AAClB,UAAM,QAAQ,IAAI;AAClB,UAAM,SAAS,IAAI;AACnB,UAAM,SAAS,IAAI;AACnB,UAAM,QAAQ;AACd,UAAM,MAAM;AAEZ,UAAM,QAAQ,SAAqB,MAAM;AACvC,YAAM,SAAuB;AAC7B,UAAI,MAAM;AAAQ,eAAM,SAAS,QAAQ,MAAM;AAC/C,UAAI,MAAM;AAAW,eAAM,YAAY,QAAQ,MAAM;AACrD,aAAO,CAAC,MAAM,WAAW;AAAA;AAG3B,UAAM,eAAe,MAAM;AACzB,UAAI,MAAM,OAAO;AACf,cAAM,eAAe,MAAM,MAAM,eAAe;AAChD,cAAM,cAAc,MAAM,MAAM,cAAc;AAE9C,cAAM,QACF,MAAM,MAAM,YAAY,MAAO,eAAgB,OAAO;AAC1D,cAAM,QACF,MAAM,MAAM,aAAa,MAAO,cAAe,OAAO;AAE1D,aAAK,UAAU;AAAA,UACb,WAAW,MAAM,MAAM;AAAA,UACvB,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA;AAK9B,UAAM,eAAe,CAAC,UAAkB;AACtC,UAAI,CAAC,SAAS,QAAQ;AACpB,kBAAU,OAAO;AACjB;AAAA;AAEF,YAAM,MAAO,YAAY;AAAA;AAG3B,UAAM,gBAAgB,CAAC,UAAkB;AACvC,UAAI,CAAC,SAAS,QAAQ;AACpB,kBAAU,OAAO;AACjB;AAAA;AAEF,YAAM,MAAO,aAAa;AAAA;AAG5B,UAAM,SAAS,MAAM;AACnB,UAAI,CAAC,MAAM;AAAO;AAElB,YAAM,eAAe,MAAM,MAAM,eAAe;AAChD,YAAM,cAAc,MAAM,MAAM,cAAc;AAE9C,YAAM,iBAAiB,gBAAgB,IAAI,MAAM,MAAM;AACvD,YAAM,gBAAgB,eAAe,IAAI,MAAM,MAAM;AACrD,YAAM,SAAS,KAAK,IAAI,gBAAgB,MAAM;AAC9C,YAAM,QAAQ,KAAK,IAAI,eAAe,MAAM;AAE5C,aAAO,QACL,iCACgB,4CACU;AAC5B,aAAO,QACL,+BACe,yCACS;AAE1B,iBAAW,QAAQ,SAAS,MAAM,eAAe,GAAG,aAAa;AACjE,gBAAU,QAAQ,QAAQ,MAAM,cAAc,GAAG,YAAY;AAAA;AAG/D,UACE,MAAM,MAAM,UACZ,CAAC,aAAa;AACZ,UAAI,UAAU;AACZ;AACA;AAAA,aACK;AACL;AAAC,QAAC,GAAE,MAAM,uBAAuB,kBAAkB,SAAS;AAC5D,6BAAqB,iBAAiB,UAAU;AAAA;AAAA,OAGpD,EAAE,WAAW;AAGf,YACE,qBACA,SAAS;AAAA,MACP,kBAAkB;AAAA,MAClB,aAAa;AAAA;AAIjB,cAAU,MAAM;AACd,UAAI,CAAC,MAAM;AAAQ,iBAAS,MAAM;AAAA;AAGpC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}

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

@@ -0,0 +1,50 @@
+import { resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, createBlock, resolveDynamicComponent, withCtx, renderSlot, Fragment, createVNode, createCommentVNode } from 'vue';
+
+const _hoisted_1 = {
+  ref: "scrollbar$",
+  class: "el-scrollbar"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_bar = resolveComponent("bar");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", {
+      ref: "wrap$",
+      class: normalizeClass([
+        _ctx.wrapClass,
+        "el-scrollbar__wrap",
+        _ctx.native ? "" : "el-scrollbar__wrap--hidden-default"
+      ]),
+      style: normalizeStyle(_ctx.style),
+      onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.handleScroll && _ctx.handleScroll(...args))
+    }, [
+      (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+        ref: "resize$",
+        class: normalizeClass(["el-scrollbar__view", _ctx.viewClass]),
+        style: normalizeStyle(_ctx.viewStyle)
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["class", "style"]))
+    ], 38),
+    !_ctx.native ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+      createVNode(_component_bar, {
+        move: _ctx.moveX,
+        ratio: _ctx.ratioX,
+        size: _ctx.sizeWidth,
+        always: _ctx.always
+      }, null, 8, ["move", "ratio", "size", "always"]),
+      createVNode(_component_bar, {
+        move: _ctx.moveY,
+        ratio: _ctx.ratioY,
+        size: _ctx.sizeHeight,
+        vertical: "",
+        always: _ctx.always
+      }, null, 8, ["move", "ratio", "size", "always"])
+    ], 64)) : createCommentVNode("v-if", true)
+  ], 512);
+}
+
+export { render };
+//# sourceMappingURL=scrollbar.vue_vue_type_template_id_303f965d_lang.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbar.vue_vue_type_template_id_303f965d_lang.mjs","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.vue?vue&type=template&id=303f965d&lang.js"],"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":["_createElementBlock","_createElementVNode","_createBlock","_renderSlot","_createVNode"],"mappings":";;;EACO,KAAI;AAAA,EAAa,OAAM;AAAA;;;sBAA5BA,0BAAA;IACEC;MACE,KAAI;AAAA,MACH;;;;;MAKA,sBAAO;MACP,iDAAQ;;oBAETC,oCACO;QACL,KAAI;AAAA,QACH,6CAA8B;QAC9B,sBAAO;;yBAER;UAAAC;;;;;KAGa,4BAAjBH;MACEI;QAAM,MAAM;QAAQ,OAAO;QAAS,MAAM;QAAY,QAAQ;;MAC9DA;QACG,MAAM;QACN,OAAO;QACP,MAAM;QACP,UAAA;AAAA,QACC,QAAQ;;;;;;;;"}

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

@@ -0,0 +1,7 @@
+import script from './scrollbar.vue_vue_type_script_lang.mjs';
+export { default } from './scrollbar.vue_vue_type_script_lang.mjs';
+import { render } from './scrollbar.vue_vue_type_template_id_303f965d_lang.mjs';
+
+script.render = render;
+script.__file = "packages/components/scrollbar/src/scrollbar.vue";
+//# sourceMappingURL=scrollbar2.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbar2.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}