element-pe 2.0.5 → 2.0.6

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

@@ -1,15 +1,15 @@
-export declare const ElScrollbar: import("element-pe/utils").SFCWithInstall<import("vue").DefineComponent<{
-    readonly height: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
-    readonly maxHeight: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
-    readonly native: import("element-pe/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly wrapStyle: import("element-pe/utils").BuildPropReturn<import("element-pe/utils").PropWrapper<import("vue").StyleValue>, "", unknown, unknown, unknown>;
-    readonly wrapClass: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
-    readonly viewClass: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
-    readonly viewStyle: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], "", unknown, unknown, unknown>;
+export declare const ElScrollbar: import("element-pe/es/utils").SFCWithInstall<import("vue").DefineComponent<{
+    readonly height: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly maxHeight: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly native: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly wrapStyle: import("element-pe/es/utils").BuildPropReturn<import("element-pe/es/utils").PropWrapper<import("vue").StyleValue>, "", unknown, unknown, unknown>;
+    readonly wrapClass: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly viewClass: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly viewStyle: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], "", unknown, unknown, unknown>;
     readonly noresize: BooleanConstructor;
-    readonly tag: import("element-pe/utils").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
-    readonly always: import("element-pe/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly minSize: import("element-pe/utils").BuildPropReturn<NumberConstructor, 20, unknown, unknown, unknown>;
+    readonly tag: import("element-pe/es/utils").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
+    readonly always: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly minSize: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, 20, unknown, unknown, unknown>;
 }, {
     ns: {
         namespace: import("vue").ComputedRef<string>;
@@ -50,31 +50,31 @@ export declare const ElScrollbar: import("element-pe/utils").SFCWithInstall<impo
         scrollLeft: number;
     }) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly height: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
-    readonly maxHeight: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
-    readonly native: import("element-pe/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly wrapStyle: import("element-pe/utils").BuildPropReturn<import("element-pe/utils").PropWrapper<import("vue").StyleValue>, "", unknown, unknown, unknown>;
-    readonly wrapClass: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
-    readonly viewClass: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
-    readonly viewStyle: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], "", unknown, unknown, unknown>;
+    readonly height: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly maxHeight: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly native: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly wrapStyle: import("element-pe/es/utils").BuildPropReturn<import("element-pe/es/utils").PropWrapper<import("vue").StyleValue>, "", unknown, unknown, unknown>;
+    readonly wrapClass: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly viewClass: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly viewStyle: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], "", unknown, unknown, unknown>;
     readonly noresize: BooleanConstructor;
-    readonly tag: import("element-pe/utils").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
-    readonly always: import("element-pe/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly minSize: import("element-pe/utils").BuildPropReturn<NumberConstructor, 20, unknown, unknown, unknown>;
+    readonly tag: import("element-pe/es/utils").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
+    readonly always: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly minSize: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, 20, unknown, unknown, unknown>;
 }>> & {
     onScroll?: ((args_0: {
         scrollTop: number;
         scrollLeft: number;
     }) => any) | undefined;
 }, {
-    height: import("element-pe/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    maxHeight: import("element-pe/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    always: import("element-pe/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
-    native: import("element-pe/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
+    height: import("element-pe/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
+    maxHeight: import("element-pe/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
+    always: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
+    native: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     wrapStyle: import("vue").StyleValue;
-    wrapClass: import("element-pe/utils").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
-    viewClass: import("element-pe/utils").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
-    viewStyle: import("element-pe/utils").BuildPropType<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], unknown, unknown>;
+    wrapClass: import("element-pe/es/utils").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
+    viewClass: import("element-pe/es/utils").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
+    viewStyle: import("element-pe/es/utils").BuildPropType<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], unknown, unknown>;
     tag: string;
     minSize: number;
     noresize: boolean;

package/es/components/scrollbar/index.mjs

@@ -2,7 +2,7 @@ import '../../utils/index.mjs';
 import Scrollbar from './src/scrollbar2.mjs';
 export { BAR_MAP, renderThumbStyle } from './src/util.mjs';
 export { scrollbarEmits, scrollbarProps } from './src/scrollbar.mjs';
-export { thumbProps } from './src/thumb2.mjs';
+export { thumbProps } from './src/thumb.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 
 const ElScrollbar = withInstall(Scrollbar);

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

@@ -1,9 +1,9 @@
 import type { ExtractPropTypes } from 'vue';
 export declare const barProps: {
-    readonly always: import("element-pe/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
-    readonly width: import("element-pe/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
-    readonly height: import("element-pe/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
-    readonly ratioX: import("element-pe/utils").BuildPropReturn<NumberConstructor, 1, unknown, unknown, unknown>;
-    readonly ratioY: import("element-pe/utils").BuildPropReturn<NumberConstructor, 1, unknown, unknown, unknown>;
+    readonly always: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly width: import("element-pe/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly height: import("element-pe/es/utils").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly ratioX: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, 1, unknown, unknown, unknown>;
+    readonly ratioY: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, 1, unknown, unknown, unknown>;
 };
 export declare type BarProps = ExtractPropTypes<typeof barProps>;

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

@@ -1,5 +1,5 @@
 import { defineComponent, ref, resolveComponent, openBlock, createElementBlock, Fragment, createVNode } from 'vue';
-import Thumb from './thumb.mjs';
+import Thumb from './thumb2.mjs';
 import { barProps } from './bar.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 

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

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

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

@@ -1,16 +1,16 @@
 import type { StyleValue } from 'vue';
 declare const _default: import("vue").DefineComponent<{
-    readonly height: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
-    readonly maxHeight: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
-    readonly native: import("element-pe/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly wrapStyle: import("element-pe/utils").BuildPropReturn<import("element-pe/utils").PropWrapper<StyleValue>, "", unknown, unknown, unknown>;
-    readonly wrapClass: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
-    readonly viewClass: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
-    readonly viewStyle: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], "", unknown, unknown, unknown>;
+    readonly height: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly maxHeight: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly native: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly wrapStyle: import("element-pe/es/utils").BuildPropReturn<import("element-pe/es/utils").PropWrapper<StyleValue>, "", unknown, unknown, unknown>;
+    readonly wrapClass: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly viewClass: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly viewStyle: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], "", unknown, unknown, unknown>;
     readonly noresize: BooleanConstructor;
-    readonly tag: import("element-pe/utils").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
-    readonly always: import("element-pe/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly minSize: import("element-pe/utils").BuildPropReturn<NumberConstructor, 20, unknown, unknown, unknown>;
+    readonly tag: import("element-pe/es/utils").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
+    readonly always: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly minSize: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, 20, unknown, unknown, unknown>;
 }, {
     ns: {
         namespace: import("vue").ComputedRef<string>;
@@ -51,31 +51,31 @@ declare const _default: import("vue").DefineComponent<{
         scrollLeft: number;
     }) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly height: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
-    readonly maxHeight: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
-    readonly native: import("element-pe/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly wrapStyle: import("element-pe/utils").BuildPropReturn<import("element-pe/utils").PropWrapper<StyleValue>, "", unknown, unknown, unknown>;
-    readonly wrapClass: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
-    readonly viewClass: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
-    readonly viewStyle: import("element-pe/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], "", unknown, unknown, unknown>;
+    readonly height: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly maxHeight: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, NumberConstructor], "", unknown, unknown, unknown>;
+    readonly native: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly wrapStyle: import("element-pe/es/utils").BuildPropReturn<import("element-pe/es/utils").PropWrapper<StyleValue>, "", unknown, unknown, unknown>;
+    readonly wrapClass: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly viewClass: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor], "", unknown, unknown, unknown>;
+    readonly viewStyle: import("element-pe/es/utils").BuildPropReturn<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], "", unknown, unknown, unknown>;
     readonly noresize: BooleanConstructor;
-    readonly tag: import("element-pe/utils").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
-    readonly always: import("element-pe/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly minSize: import("element-pe/utils").BuildPropReturn<NumberConstructor, 20, unknown, unknown, unknown>;
+    readonly tag: import("element-pe/es/utils").BuildPropReturn<StringConstructor, "div", unknown, unknown, unknown>;
+    readonly always: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly minSize: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, 20, unknown, unknown, unknown>;
 }>> & {
     onScroll?: ((args_0: {
         scrollTop: number;
         scrollLeft: number;
     }) => any) | undefined;
 }, {
-    height: import("element-pe/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    maxHeight: import("element-pe/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
-    always: import("element-pe/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
-    native: import("element-pe/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
+    height: import("element-pe/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
+    maxHeight: import("element-pe/es/utils").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
+    always: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
+    native: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     wrapStyle: StyleValue;
-    wrapClass: import("element-pe/utils").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
-    viewClass: import("element-pe/utils").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
-    viewStyle: import("element-pe/utils").BuildPropType<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], unknown, unknown>;
+    wrapClass: import("element-pe/es/utils").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
+    viewClass: import("element-pe/es/utils").BuildPropType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
+    viewStyle: import("element-pe/es/utils").BuildPropType<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], unknown, unknown>;
     tag: string;
     minSize: number;
     noresize: boolean;

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

@@ -3,7 +3,7 @@ export declare const thumbProps: {
     readonly vertical: BooleanConstructor;
     readonly size: StringConstructor;
     readonly move: NumberConstructor;
-    readonly ratio: import("element-pe/utils").BuildPropReturn<NumberConstructor, unknown, true, unknown, unknown>;
+    readonly ratio: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, unknown, true, unknown, unknown>;
     readonly always: BooleanConstructor;
 };
 export declare type ThumbProps = ExtractPropTypes<typeof thumbProps>;

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

@@ -1,142 +1,16 @@
-import { defineComponent, inject, ref, computed, onBeforeUnmount, toRef, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, vShow } from 'vue';
-import { isClient, useEventListener } from '@vueuse/core';
-import '../../../tokens/index.mjs';
 import '../../../utils/index.mjs';
-import '../../../hooks/index.mjs';
-import { BAR_MAP, renderThumbStyle } from './util.mjs';
-import { thumbProps } from './thumb2.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { scrollbarContextKey } from '../../../tokens/scrollbar.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { throwError } from '../../../utils/error.mjs';
+import { buildProps } from '../../../utils/vue/props.mjs';
 
-const COMPONENT_NAME = "Thumb";
-const _sfc_main = defineComponent({
-  name: COMPONENT_NAME,
-  props: thumbProps,
-  setup(props) {
-    const scrollbar = inject(scrollbarContextKey);
-    const ns = useNamespace("scrollbar");
-    if (!scrollbar)
-      throwError(COMPONENT_NAME, "can not inject scrollbar context");
-    const instance = ref();
-    const thumb = ref();
-    const thumbState = ref({});
-    const visible = ref(false);
-    let cursorDown = false;
-    let cursorLeave = false;
-    let originalOnSelectStart = isClient ? document.onselectstart : 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;
-      thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
-    };
-    const clickTrackHandler = (e) => {
-      if (!thumb.value || !instance.value || !scrollbar.wrapElement)
-        return;
-      const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
-      const thumbHalf = thumb.value[bar.value.offset] / 2;
-      const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.value / instance.value[bar.value.offset];
-      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
-    };
-    const startDrag = (e) => {
-      e.stopImmediatePropagation();
-      cursorDown = true;
-      document.addEventListener("mousemove", mouseMoveDocumentHandler);
-      document.addEventListener("mouseup", mouseUpDocumentHandler);
-      originalOnSelectStart = document.onselectstart;
-      document.onselectstart = () => false;
-    };
-    const mouseMoveDocumentHandler = (e) => {
-      if (!instance.value || !thumb.value)
-        return;
-      if (cursorDown === false)
-        return;
-      const prevPage = thumbState.value[bar.value.axis];
-      if (!prevPage)
-        return;
-      const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
-      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
-      const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
-      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
-    };
-    const mouseUpDocumentHandler = () => {
-      cursorDown = false;
-      thumbState.value[bar.value.axis] = 0;
-      document.removeEventListener("mousemove", mouseMoveDocumentHandler);
-      document.removeEventListener("mouseup", mouseUpDocumentHandler);
-      restoreOnselectstart();
-      if (cursorLeave)
-        visible.value = false;
-    };
-    const mouseMoveScrollbarHandler = () => {
-      cursorLeave = false;
-      visible.value = !!props.size;
-    };
-    const mouseLeaveScrollbarHandler = () => {
-      cursorLeave = true;
-      visible.value = cursorDown;
-    };
-    onBeforeUnmount(() => {
-      restoreOnselectstart();
-      document.removeEventListener("mouseup", mouseUpDocumentHandler);
-    });
-    const restoreOnselectstart = () => {
-      if (document.onselectstart !== originalOnSelectStart)
-        document.onselectstart = originalOnSelectStart;
-    };
-    useEventListener(toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
-    useEventListener(toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
-    return {
-      ns,
-      instance,
-      thumb,
-      bar,
-      thumbStyle,
-      visible,
-      clickTrackHandler,
-      clickThumbHandler
-    };
-  }
+const thumbProps = buildProps({
+  vertical: Boolean,
+  size: String,
+  move: Number,
+  ratio: {
+    type: Number,
+    required: true
+  },
+  always: Boolean
 });
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createBlock(Transition, {
-    name: _ctx.ns.b("fade")
-  }, {
-    default: withCtx(() => [
-      withDirectives(createElementVNode("div", {
-        ref: "instance",
-        class: normalizeClass([_ctx.ns.e("bar"), _ctx.ns.is(_ctx.bar.key)]),
-        onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.clickTrackHandler && _ctx.clickTrackHandler(...args))
-      }, [
-        createElementVNode("div", {
-          ref: "thumb",
-          class: normalizeClass(_ctx.ns.e("thumb")),
-          style: normalizeStyle(_ctx.thumbStyle),
-          onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.clickThumbHandler && _ctx.clickThumbHandler(...args))
-        }, null, 38)
-      ], 34), [
-        [vShow, _ctx.always || _ctx.visible]
-      ])
-    ]),
-    _: 1
-  }, 8, ["name"]);
-}
-var Thumb = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/meng/workspace/element-pe/packages/components/scrollbar/src/thumb.vue"]]);
 
-export { Thumb as default };
+export { thumbProps };
 //# sourceMappingURL=thumb.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"thumb.mjs","sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<template>\n  <transition :name=\"ns.b('fade')\">\n    <div\n      v-show=\"always || visible\"\n      ref=\"instance\"\n      :class=\"[ns.e('bar'), ns.is(bar.key)]\"\n      @mousedown=\"clickTrackHandler\"\n    >\n      <div\n        ref=\"thumb\"\n        :class=\"ns.e('thumb')\"\n        :style=\"thumbStyle\"\n        @mousedown=\"clickThumbHandler\"\n      />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  onBeforeUnmount,\n  ref,\n  toRef,\n} from 'vue'\nimport { isClient, useEventListener } from '@vueuse/core'\nimport { scrollbarContextKey } from '@element-plus/tokens'\nimport { throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\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    const ns = useNamespace('scrollbar')\n\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      ns,\n      instance,\n      thumb,\n      bar,\n      thumbStyle,\n      visible,\n      clickTrackHandler,\n      clickThumbHandler,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createBlock","_Transition","_withCtx","_withDirectives","_createElementVNode","_normalizeClass","_vShow"],"mappings":"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"}
+{"version":3,"file":"thumb.mjs","sources":["../../../../../../packages/components/scrollbar/src/thumb.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\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":[],"mappings":";;;AACY,MAAC,UAAU,GAAG,UAAU,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/es/components/scrollbar/src/thumb.vue.d.ts

@@ -2,7 +2,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly vertical: BooleanConstructor;
     readonly size: StringConstructor;
     readonly move: NumberConstructor;
-    readonly ratio: import("element-pe/utils").BuildPropReturn<NumberConstructor, unknown, true, unknown, unknown>;
+    readonly ratio: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, unknown, true, unknown, unknown>;
     readonly always: BooleanConstructor;
 }, {
     ns: {
@@ -48,7 +48,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly vertical: BooleanConstructor;
     readonly size: StringConstructor;
     readonly move: NumberConstructor;
-    readonly ratio: import("element-pe/utils").BuildPropReturn<NumberConstructor, unknown, true, unknown, unknown>;
+    readonly ratio: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, unknown, true, unknown, unknown>;
     readonly always: BooleanConstructor;
 }>>, {
     vertical: boolean;

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

@@ -1,16 +1,142 @@
+import { defineComponent, inject, ref, computed, onBeforeUnmount, toRef, openBlock, createBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, vShow } from 'vue';
+import { isClient, useEventListener } from '@vueuse/core';
+import '../../../tokens/index.mjs';
 import '../../../utils/index.mjs';
-import { buildProps } from '../../../utils/vue/props.mjs';
+import '../../../hooks/index.mjs';
+import { BAR_MAP, renderThumbStyle } from './util.mjs';
+import { thumbProps } from './thumb.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { scrollbarContextKey } from '../../../tokens/scrollbar.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { throwError } from '../../../utils/error.mjs';
 
-const thumbProps = buildProps({
-  vertical: Boolean,
-  size: String,
-  move: Number,
-  ratio: {
-    type: Number,
-    required: true
-  },
-  always: Boolean
+const COMPONENT_NAME = "Thumb";
+const _sfc_main = defineComponent({
+  name: COMPONENT_NAME,
+  props: thumbProps,
+  setup(props) {
+    const scrollbar = inject(scrollbarContextKey);
+    const ns = useNamespace("scrollbar");
+    if (!scrollbar)
+      throwError(COMPONENT_NAME, "can not inject scrollbar context");
+    const instance = ref();
+    const thumb = ref();
+    const thumbState = ref({});
+    const visible = ref(false);
+    let cursorDown = false;
+    let cursorLeave = false;
+    let originalOnSelectStart = isClient ? document.onselectstart : 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;
+      thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
+    };
+    const clickTrackHandler = (e) => {
+      if (!thumb.value || !instance.value || !scrollbar.wrapElement)
+        return;
+      const offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
+      const thumbHalf = thumb.value[bar.value.offset] / 2;
+      const thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.value / instance.value[bar.value.offset];
+      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
+    };
+    const startDrag = (e) => {
+      e.stopImmediatePropagation();
+      cursorDown = true;
+      document.addEventListener("mousemove", mouseMoveDocumentHandler);
+      document.addEventListener("mouseup", mouseUpDocumentHandler);
+      originalOnSelectStart = document.onselectstart;
+      document.onselectstart = () => false;
+    };
+    const mouseMoveDocumentHandler = (e) => {
+      if (!instance.value || !thumb.value)
+        return;
+      if (cursorDown === false)
+        return;
+      const prevPage = thumbState.value[bar.value.axis];
+      if (!prevPage)
+        return;
+      const offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
+      const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
+      const thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
+      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
+    };
+    const mouseUpDocumentHandler = () => {
+      cursorDown = false;
+      thumbState.value[bar.value.axis] = 0;
+      document.removeEventListener("mousemove", mouseMoveDocumentHandler);
+      document.removeEventListener("mouseup", mouseUpDocumentHandler);
+      restoreOnselectstart();
+      if (cursorLeave)
+        visible.value = false;
+    };
+    const mouseMoveScrollbarHandler = () => {
+      cursorLeave = false;
+      visible.value = !!props.size;
+    };
+    const mouseLeaveScrollbarHandler = () => {
+      cursorLeave = true;
+      visible.value = cursorDown;
+    };
+    onBeforeUnmount(() => {
+      restoreOnselectstart();
+      document.removeEventListener("mouseup", mouseUpDocumentHandler);
+    });
+    const restoreOnselectstart = () => {
+      if (document.onselectstart !== originalOnSelectStart)
+        document.onselectstart = originalOnSelectStart;
+    };
+    useEventListener(toRef(scrollbar, "scrollbarElement"), "mousemove", mouseMoveScrollbarHandler);
+    useEventListener(toRef(scrollbar, "scrollbarElement"), "mouseleave", mouseLeaveScrollbarHandler);
+    return {
+      ns,
+      instance,
+      thumb,
+      bar,
+      thumbStyle,
+      visible,
+      clickTrackHandler,
+      clickThumbHandler
+    };
+  }
 });
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(Transition, {
+    name: _ctx.ns.b("fade")
+  }, {
+    default: withCtx(() => [
+      withDirectives(createElementVNode("div", {
+        ref: "instance",
+        class: normalizeClass([_ctx.ns.e("bar"), _ctx.ns.is(_ctx.bar.key)]),
+        onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.clickTrackHandler && _ctx.clickTrackHandler(...args))
+      }, [
+        createElementVNode("div", {
+          ref: "thumb",
+          class: normalizeClass(_ctx.ns.e("thumb")),
+          style: normalizeStyle(_ctx.thumbStyle),
+          onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.clickThumbHandler && _ctx.clickThumbHandler(...args))
+        }, null, 38)
+      ], 34), [
+        [vShow, _ctx.always || _ctx.visible]
+      ])
+    ]),
+    _: 1
+  }, 8, ["name"]);
+}
+var Thumb = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/meng/workspace/element-pe/packages/components/scrollbar/src/thumb.vue"]]);
 
-export { thumbProps };
+export { Thumb as default };
 //# sourceMappingURL=thumb2.mjs.map