This commit is contained in:
2025-09-19 14:25:20 +08:00
parent 269893a435
commit fbf3f77229
24949 changed files with 2839404 additions and 0 deletions

View File

@@ -0,0 +1,8 @@
import Scrollbar from './src/scrollbar.vue';
import type { SFCWithInstall } from 'element-plus/es/utils';
export declare const ElScrollbar: SFCWithInstall<typeof Scrollbar>;
export default ElScrollbar;
export * from './src/util';
export * from './src/scrollbar';
export * from './src/thumb';
export * from './src/constants';

View File

@@ -0,0 +1,11 @@
import Scrollbar from './src/scrollbar2.mjs';
export { BAR_MAP, GAP, renderThumbStyle } from './src/util.mjs';
export { scrollbarEmits, scrollbarProps } from './src/scrollbar.mjs';
export { thumbProps } from './src/thumb.mjs';
export { scrollbarContextKey } from './src/constants.mjs';
import { withInstall } from '../../utils/vue/install.mjs';
const ElScrollbar = withInstall(Scrollbar);
export { ElScrollbar, ElScrollbar as default };
//# sourceMappingURL=index.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","sources":["../../../../../packages/components/scrollbar/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils'\nimport Scrollbar from './src/scrollbar.vue'\n\nimport type { SFCWithInstall } from '@element-plus/utils'\n\nexport const ElScrollbar: SFCWithInstall<typeof Scrollbar> =\n withInstall(Scrollbar)\nexport default ElScrollbar\n\nexport * from './src/util'\nexport * from './src/scrollbar'\nexport * from './src/thumb'\nexport * from './src/constants'\n"],"names":[],"mappings":";;;;;;;AAEY,MAAC,WAAW,GAAG,WAAW,CAAC,SAAS;;;;"}

View File

@@ -0,0 +1,14 @@
import type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue';
import type Bar from './bar.vue';
export declare const barProps: {
readonly always: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly minSize: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
};
export type BarProps = ExtractPropTypes<typeof barProps>;
export type BarPropsPublic = __ExtractPublicPropTypes<typeof barProps>;
export type BarInstance = InstanceType<typeof Bar> & unknown;

View File

@@ -0,0 +1,15 @@
import { buildProps } from '../../../utils/vue/props/runtime.mjs';
const barProps = buildProps({
always: {
type: Boolean,
default: true
},
minSize: {
type: Number,
required: true
}
});
export { barProps };
//# sourceMappingURL=bar.mjs.map

View File

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

View File

@@ -0,0 +1,23 @@
declare const _default: import("vue").DefineComponent<{
readonly always: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly minSize: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}, {
handleScroll: (wrap: HTMLDivElement) => void;
update: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly always: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
readonly minSize: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
}>>, {
readonly always: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
}>;
export default _default;

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"file":"bar2.mjs","sources":["../../../../../../packages/components/scrollbar/src/bar.vue"],"sourcesContent":["<template>\n <thumb :move=\"moveX\" :ratio=\"ratioX\" :size=\"sizeWidth\" :always=\"always\" />\n <thumb\n :move=\"moveY\"\n :ratio=\"ratioY\"\n :size=\"sizeHeight\"\n vertical\n :always=\"always\"\n />\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, ref } from 'vue'\nimport { GAP } from './util'\nimport Thumb from './thumb.vue'\nimport { barProps } from './bar'\nimport { scrollbarContextKey } from './constants'\n\nconst props = defineProps(barProps)\n\nconst scrollbar = inject(scrollbarContextKey)\n\nconst moveX = ref(0)\nconst moveY = ref(0)\nconst sizeWidth = ref('')\nconst sizeHeight = ref('')\nconst ratioY = ref(1)\nconst ratioX = ref(1)\n\nconst handleScroll = (wrap: HTMLDivElement) => {\n if (wrap) {\n const offsetHeight = wrap.offsetHeight - GAP\n const offsetWidth = wrap.offsetWidth - GAP\n\n moveY.value = ((wrap.scrollTop * 100) / offsetHeight) * ratioY.value\n moveX.value = ((wrap.scrollLeft * 100) / offsetWidth) * ratioX.value\n }\n}\n\nconst update = () => {\n const wrap = scrollbar?.wrapElement\n if (!wrap) return\n const offsetHeight = wrap.offsetHeight - GAP\n const offsetWidth = wrap.offsetWidth - GAP\n\n const originalHeight = offsetHeight ** 2 / wrap.scrollHeight\n const originalWidth = offsetWidth ** 2 / wrap.scrollWidth\n const height = Math.max(originalHeight, props.minSize)\n const width = Math.max(originalWidth, props.minSize)\n\n ratioY.value =\n originalHeight /\n (offsetHeight - originalHeight) /\n (height / (offsetHeight - height))\n ratioX.value =\n originalWidth /\n (offsetWidth - originalWidth) /\n (width / (offsetWidth - width))\n\n sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : ''\n sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : ''\n}\n\ndefineExpose({\n handleScroll,\n update,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;AAoBA,IAAM,MAAA,SAAA,GAAY,OAAO,mBAAmB,CAAA,CAAA;AAE5C,IAAM,MAAA,KAAA,GAAQ,IAAI,CAAC,CAAA,CAAA;AACnB,IAAM,MAAA,KAAA,GAAQ,IAAI,CAAC,CAAA,CAAA;AACnB,IAAM,MAAA,SAAA,GAAY,IAAI,EAAE,CAAA,CAAA;AACxB,IAAM,MAAA,UAAA,GAAa,IAAI,EAAE,CAAA,CAAA;AACzB,IAAM,MAAA,MAAA,GAAS,IAAI,CAAC,CAAA,CAAA;AACpB,IAAM,MAAA,MAAA,GAAS,IAAI,CAAC,CAAA,CAAA;AAEpB,IAAM,MAAA,YAAA,GAAe,CAAC,IAAyB,KAAA;AAC7C,MAAA,IAAI,IAAM,EAAA;AACR,QAAM,MAAA,YAAA,GAAe,KAAK,YAAe,GAAA,GAAA,CAAA;AACzC,QAAM,MAAA,WAAA,GAAc,KAAK,WAAc,GAAA,GAAA,CAAA;AAEvC,QAAA,KAAA,CAAM,KAAU,GAAA,IAAA,CAAK,SAAY,GAAA,GAAA,GAAO,eAAgB,MAAO,CAAA,KAAA,CAAA;AAC/D,QAAA,KAAA,CAAM,KAAU,GAAA,IAAA,CAAK,UAAa,GAAA,GAAA,GAAO,cAAe,MAAO,CAAA,KAAA,CAAA;AAAA,OACjE;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,MAAM,OAAO,SAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,WAAA,CAAA;AACxB,MAAA,IAAI,CAAC,IAAM;AACX,QAAM,OAAA;AACN,MAAM,MAAA,YAAA,OAAmB,CAAc,YAAA,GAAA,GAAA,CAAA;AAEvC,MAAM,MAAA,WAAA,GAAA,IAAiC,CAAA,WAAA,GAAA,GAAA,CAAI;AAC3C,MAAM,MAAA,cAAA,GAA+B,YAAA,IAAA,CAAA,GAAS,IAAA,CAAA,YAAA,CAAA;AAC9C,MAAA,MAAM,aAAS,GAAS,WAAA,IAAA,CAAA,QAAsB,WAAO,CAAA;AACrD,MAAA,MAAM,MAAQ,GAAA,IAAK,CAAI,GAAA,CAAA,cAAe,OAAa,CAAA,OAAA,CAAA,CAAA;AAEnD,MAAA,MAAA,KACE,GAAA,IAAA,CAAA,GAAA,CAAA,aACgB,EAAA,KAAA,CAAA,OAAA,CAAA,CAAA;AAElB,MAAA,MAAA,CAAO,KACL,GAAA,cAAA,IACe,YAAA,GAAA,cAAA,CAAA,UACL,IAAc,YAAA,GAAA,MAAA,CAAA,CAAA,CAAA;AAE1B,MAAA,MAAA,CAAA,qBAA4B,IAAA,WAAqB,GAAA,aAAgB,CAAA,IAAA,KAAA,IAAA,WAAA,GAAA,KAAA,CAAA,CAAA,CAAA;AACjE,MAAA,UAAU,SAAgB,MAAA,GAAA,GAAA,GAAoB,YAAA,GAAG,SAAY,CAAA,EAAA,CAAA,GAAA,EAAA,CAAA;AAAA,MAC/D,SAAA,CAAA,KAAA,GAAA,KAAA,GAAA,GAAA,GAAA,WAAA,GAAA,CAAA,EAAA,KAAA,CAAA,EAAA,CAAA,GAAA,EAAA,CAAA;AAEA,KAAa,CAAA;AAAA,IACX,MAAA,CAAA;AAAA,MACA,YAAA;AAAA,MACD,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

View File

@@ -0,0 +1,6 @@
import type { InjectionKey } from 'vue';
export interface ScrollbarContext {
scrollbarElement: HTMLDivElement;
wrapElement: HTMLDivElement;
}
export declare const scrollbarContextKey: InjectionKey<ScrollbarContext>;

View File

@@ -0,0 +1,4 @@
const scrollbarContextKey = Symbol("scrollbarContextKey");
export { scrollbarContextKey };
//# sourceMappingURL=constants.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"constants.mjs","sources":["../../../../../../packages/components/scrollbar/src/constants.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\n\nexport interface ScrollbarContext {\n scrollbarElement: HTMLDivElement\n wrapElement: HTMLDivElement\n}\n\nexport const scrollbarContextKey: InjectionKey<ScrollbarContext> = Symbol(\n 'scrollbarContextKey'\n)\n"],"names":[],"mappings":"AAAY,MAAC,mBAAmB,GAAG,MAAM,CAAC,qBAAqB;;;;"}

View File

@@ -0,0 +1,38 @@
import type { ExtractPropTypes, StyleValue, __ExtractPublicPropTypes } from 'vue';
import type Scrollbar from './scrollbar.vue';
export declare const scrollbarProps: {
readonly ariaLabel: StringConstructor;
readonly ariaOrientation: {
readonly type: import("vue").PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly distance: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly height: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
readonly maxHeight: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
readonly native: BooleanConstructor;
readonly wrapStyle: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | import("vue").CSSProperties | StyleValue[]) | (() => StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | StyleValue[]) | (() => StyleValue))[], unknown, unknown, "", boolean>;
readonly wrapClass: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ArrayConstructor], unknown, unknown, "", boolean>;
readonly viewClass: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ArrayConstructor], unknown, unknown, "", boolean>;
readonly viewStyle: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], unknown, unknown, "", boolean>;
readonly noresize: BooleanConstructor;
readonly tag: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "div", boolean>;
readonly always: BooleanConstructor;
readonly minSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 20, boolean>;
readonly tabindex: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, undefined, boolean>;
readonly id: StringConstructor;
readonly role: StringConstructor;
};
export type ScrollbarProps = ExtractPropTypes<typeof scrollbarProps>;
export type ScrollbarPropsPublic = __ExtractPublicPropTypes<typeof scrollbarProps>;
export declare const scrollbarEmits: {
'end-reached': (direction: ScrollbarDirection) => boolean;
scroll: ({ scrollTop, scrollLeft, }: {
scrollTop: number;
scrollLeft: number;
}) => boolean;
};
export type ScrollbarEmits = typeof scrollbarEmits;
export type ScrollbarDirection = 'top' | 'bottom' | 'left' | 'right';
export type ScrollbarInstance = InstanceType<typeof Scrollbar> & unknown;

View File

@@ -0,0 +1,62 @@
import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
import { useAriaProps } from '../../../hooks/use-aria/index.mjs';
import { isNumber } from '../../../utils/types.mjs';
const scrollbarProps = buildProps({
distance: {
type: Number,
default: 0
},
height: {
type: [String, Number],
default: ""
},
maxHeight: {
type: [String, Number],
default: ""
},
native: Boolean,
wrapStyle: {
type: definePropType([String, Object, Array]),
default: ""
},
wrapClass: {
type: [String, Array],
default: ""
},
viewClass: {
type: [String, Array],
default: ""
},
viewStyle: {
type: [String, Array, Object],
default: ""
},
noresize: Boolean,
tag: {
type: String,
default: "div"
},
always: Boolean,
minSize: {
type: Number,
default: 20
},
tabindex: {
type: [String, Number],
default: void 0
},
id: String,
role: String,
...useAriaProps(["ariaLabel", "ariaOrientation"])
});
const scrollbarEmits = {
"end-reached": (direction) => ["left", "right", "top", "bottom"].includes(direction),
scroll: ({
scrollTop,
scrollLeft
}) => [scrollTop, scrollLeft].every(isNumber)
};
export { scrollbarEmits, scrollbarProps };
//# sourceMappingURL=scrollbar.mjs.map

View File

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

View File

@@ -0,0 +1,100 @@
import type { ScrollbarDirection } from './scrollbar';
import type { CSSProperties, StyleValue } from 'vue';
declare function scrollTo(xCord: number, yCord?: number): void;
declare function scrollTo(options: ScrollToOptions): void;
declare function __VLS_template(): {
default?(_: {}): any;
};
declare const __VLS_component: import("vue").DefineComponent<{
readonly ariaLabel: StringConstructor;
readonly ariaOrientation: {
readonly type: import("vue").PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly distance: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly height: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
readonly maxHeight: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
readonly native: BooleanConstructor;
readonly wrapStyle: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | CSSProperties | StyleValue[]) | (() => StyleValue) | ((new (...args: any[]) => string | CSSProperties | StyleValue[]) | (() => StyleValue))[], unknown, unknown, "", boolean>;
readonly wrapClass: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ArrayConstructor], unknown, unknown, "", boolean>;
readonly viewClass: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ArrayConstructor], unknown, unknown, "", boolean>;
readonly viewStyle: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], unknown, unknown, "", boolean>;
readonly noresize: BooleanConstructor;
readonly tag: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "div", boolean>;
readonly always: BooleanConstructor;
readonly minSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 20, boolean>;
readonly tabindex: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, undefined, boolean>;
readonly id: StringConstructor;
readonly role: StringConstructor;
}, {
/** @description scrollbar wrap ref */
wrapRef: import("vue").Ref<HTMLDivElement | undefined>;
/** @description update scrollbar state manually */
update: () => void;
/** @description scrolls to a particular set of coordinates */
scrollTo: typeof scrollTo;
/** @description set distance to scroll top */
setScrollTop: (value: number) => void;
/** @description set distance to scroll left */
setScrollLeft: (value: number) => void;
/** @description handle scroll event */
handleScroll: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
scroll: (args_0: {
scrollTop: number;
scrollLeft: number;
}) => void;
"end-reached": (direction: ScrollbarDirection) => void;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly ariaLabel: StringConstructor;
readonly ariaOrientation: {
readonly type: import("vue").PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly distance: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly height: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
readonly maxHeight: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
readonly native: BooleanConstructor;
readonly wrapStyle: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | CSSProperties | StyleValue[]) | (() => StyleValue) | ((new (...args: any[]) => string | CSSProperties | StyleValue[]) | (() => StyleValue))[], unknown, unknown, "", boolean>;
readonly wrapClass: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ArrayConstructor], unknown, unknown, "", boolean>;
readonly viewClass: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ArrayConstructor], unknown, unknown, "", boolean>;
readonly viewStyle: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], unknown, unknown, "", boolean>;
readonly noresize: BooleanConstructor;
readonly tag: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "div", boolean>;
readonly always: BooleanConstructor;
readonly minSize: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 20, boolean>;
readonly tabindex: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, undefined, boolean>;
readonly id: StringConstructor;
readonly role: StringConstructor;
}>> & {
onScroll?: ((args_0: {
scrollTop: number;
scrollLeft: number;
}) => any) | undefined;
"onEnd-reached"?: ((direction: ScrollbarDirection) => any) | undefined;
}, {
readonly tabindex: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
readonly height: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
readonly maxHeight: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
readonly always: boolean;
readonly minSize: number;
readonly distance: number;
readonly wrapStyle: StyleValue;
readonly wrapClass: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
readonly viewClass: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, ArrayConstructor], unknown, unknown>;
readonly viewStyle: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], unknown, unknown>;
readonly tag: string;
readonly native: boolean;
readonly noresize: boolean;
}>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};

View File

@@ -0,0 +1,228 @@
import { defineComponent, ref, computed, watch, nextTick, provide, reactive, onActivated, onMounted, onUpdated, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, normalizeStyle, createBlock, resolveDynamicComponent, withCtx, renderSlot, createCommentVNode } from 'vue';
import { useResizeObserver, useEventListener } from '@vueuse/core';
import Bar from './bar2.mjs';
import { scrollbarContextKey } from './constants.mjs';
import { scrollbarProps, scrollbarEmits } from './scrollbar.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { addUnit } from '../../../utils/dom/style.mjs';
import { isObject } from '@vue/shared';
import { isNumber } from '../../../utils/types.mjs';
const COMPONENT_NAME = "ElScrollbar";
const __default__ = defineComponent({
name: COMPONENT_NAME
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: scrollbarProps,
emits: scrollbarEmits,
setup(__props, { expose, emit }) {
const props = __props;
const ns = useNamespace("scrollbar");
let stopResizeObserver = void 0;
let stopWrapResizeObserver = void 0;
let stopResizeListener = void 0;
let wrapScrollTop = 0;
let wrapScrollLeft = 0;
let direction = "";
const distanceScrollState = {
bottom: false,
top: false,
right: false,
left: false
};
const scrollbarRef = ref();
const wrapRef = ref();
const resizeRef = ref();
const barRef = ref();
const wrapStyle = computed(() => {
const style = {};
if (props.height)
style.height = addUnit(props.height);
if (props.maxHeight)
style.maxHeight = addUnit(props.maxHeight);
return [props.wrapStyle, style];
});
const wrapKls = computed(() => {
return [
props.wrapClass,
ns.e("wrap"),
{ [ns.em("wrap", "hidden-default")]: !props.native }
];
});
const resizeKls = computed(() => {
return [ns.e("view"), props.viewClass];
});
const shouldSkipDirection = (direction2) => {
var _a;
return (_a = distanceScrollState[direction2]) != null ? _a : false;
};
const DIRECTION_PAIRS = {
top: "bottom",
bottom: "top",
left: "right",
right: "left"
};
const updateTriggerStatus = (arrivedStates) => {
const oppositeDirection = DIRECTION_PAIRS[direction];
if (!oppositeDirection)
return;
const arrived = arrivedStates[direction];
const oppositeArrived = arrivedStates[oppositeDirection];
if (arrived && !distanceScrollState[direction]) {
distanceScrollState[direction] = true;
}
if (!oppositeArrived && distanceScrollState[oppositeDirection]) {
distanceScrollState[oppositeDirection] = false;
}
};
const handleScroll = () => {
var _a;
if (wrapRef.value) {
(_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
const prevTop = wrapScrollTop;
const prevLeft = wrapScrollLeft;
wrapScrollTop = wrapRef.value.scrollTop;
wrapScrollLeft = wrapRef.value.scrollLeft;
const arrivedStates = {
bottom: wrapScrollTop + wrapRef.value.clientHeight >= wrapRef.value.scrollHeight - props.distance,
top: wrapScrollTop <= props.distance && prevTop !== 0,
right: wrapScrollLeft + wrapRef.value.clientWidth >= wrapRef.value.scrollWidth - props.distance && prevLeft !== wrapScrollLeft,
left: wrapScrollLeft <= props.distance && prevLeft !== 0
};
emit("scroll", {
scrollTop: wrapScrollTop,
scrollLeft: wrapScrollLeft
});
if (prevTop !== wrapScrollTop) {
direction = wrapScrollTop > prevTop ? "bottom" : "top";
}
if (prevLeft !== wrapScrollLeft) {
direction = wrapScrollLeft > prevLeft ? "right" : "left";
}
if (props.distance > 0) {
if (shouldSkipDirection(direction)) {
return;
}
updateTriggerStatus(arrivedStates);
}
if (arrivedStates[direction])
emit("end-reached", direction);
}
};
function scrollTo(arg1, arg2) {
if (isObject(arg1)) {
wrapRef.value.scrollTo(arg1);
} else if (isNumber(arg1) && isNumber(arg2)) {
wrapRef.value.scrollTo(arg1, arg2);
}
}
const setScrollTop = (value) => {
if (!isNumber(value)) {
return;
}
wrapRef.value.scrollTop = value;
};
const setScrollLeft = (value) => {
if (!isNumber(value)) {
return;
}
wrapRef.value.scrollLeft = value;
};
const update = () => {
var _a;
(_a = barRef.value) == null ? void 0 : _a.update();
distanceScrollState[direction] = false;
};
watch(() => props.noresize, (noresize) => {
if (noresize) {
stopResizeObserver == null ? void 0 : stopResizeObserver();
stopWrapResizeObserver == null ? void 0 : stopWrapResizeObserver();
stopResizeListener == null ? void 0 : stopResizeListener();
} else {
({ stop: stopResizeObserver } = useResizeObserver(resizeRef, update));
({ stop: stopWrapResizeObserver } = useResizeObserver(wrapRef, update));
stopResizeListener = useEventListener("resize", update);
}
}, { immediate: true });
watch(() => [props.maxHeight, props.height], () => {
if (!props.native)
nextTick(() => {
var _a;
update();
if (wrapRef.value) {
(_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
}
});
});
provide(scrollbarContextKey, reactive({
scrollbarElement: scrollbarRef,
wrapElement: wrapRef
}));
onActivated(() => {
if (wrapRef.value) {
wrapRef.value.scrollTop = wrapScrollTop;
wrapRef.value.scrollLeft = wrapScrollLeft;
}
});
onMounted(() => {
if (!props.native)
nextTick(() => {
update();
});
});
onUpdated(() => update());
expose({
wrapRef,
update,
scrollTo,
setScrollTop,
setScrollLeft,
handleScroll
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "scrollbarRef",
ref: scrollbarRef,
class: normalizeClass(unref(ns).b())
}, [
createElementVNode("div", {
ref_key: "wrapRef",
ref: wrapRef,
class: normalizeClass(unref(wrapKls)),
style: normalizeStyle(unref(wrapStyle)),
tabindex: _ctx.tabindex,
onScroll: handleScroll
}, [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
id: _ctx.id,
ref_key: "resizeRef",
ref: resizeRef,
class: normalizeClass(unref(resizeKls)),
style: normalizeStyle(_ctx.viewStyle),
role: _ctx.role,
"aria-label": _ctx.ariaLabel,
"aria-orientation": _ctx.ariaOrientation
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["id", "class", "style", "role", "aria-label", "aria-orientation"]))
], 46, ["tabindex"]),
!_ctx.native ? (openBlock(), createBlock(Bar, {
key: 0,
ref_key: "barRef",
ref: barRef,
always: _ctx.always,
"min-size": _ctx.minSize
}, null, 8, ["always", "min-size"])) : createCommentVNode("v-if", true)
], 2);
};
}
});
var Scrollbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "scrollbar.vue"]]);
export { Scrollbar as default };
//# sourceMappingURL=scrollbar2.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,17 @@
import type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue';
import type Thumb from './thumb.vue';
export declare const thumbProps: {
readonly vertical: BooleanConstructor;
readonly size: StringConstructor;
readonly move: NumberConstructor;
readonly ratio: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly always: BooleanConstructor;
};
export type ThumbProps = ExtractPropTypes<typeof thumbProps>;
export type ThumbPropsPublic = __ExtractPublicPropTypes<typeof thumbProps>;
export type ThumbInstance = InstanceType<typeof Thumb> & unknown;

View File

@@ -0,0 +1,15 @@
import { buildProps } from '../../../utils/vue/props/runtime.mjs';
const thumbProps = buildProps({
vertical: Boolean,
size: String,
move: Number,
ratio: {
type: Number,
required: true
},
always: Boolean
});
export { thumbProps };
//# sourceMappingURL=thumb.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"thumb.mjs","sources":["../../../../../../packages/components/scrollbar/src/thumb.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'\nimport type Thumb from './thumb.vue'\n\nexport const thumbProps = buildProps({\n vertical: Boolean,\n size: String,\n move: Number,\n ratio: {\n type: Number,\n required: true,\n },\n always: Boolean,\n} as const)\nexport type ThumbProps = ExtractPropTypes<typeof thumbProps>\nexport type ThumbPropsPublic = __ExtractPublicPropTypes<typeof thumbProps>\n\nexport type ThumbInstance = InstanceType<typeof Thumb> & unknown\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;;;;"}

View File

@@ -0,0 +1,27 @@
declare const _default: import("vue").DefineComponent<{
readonly vertical: BooleanConstructor;
readonly size: StringConstructor;
readonly move: NumberConstructor;
readonly ratio: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly always: BooleanConstructor;
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
readonly vertical: BooleanConstructor;
readonly size: StringConstructor;
readonly move: NumberConstructor;
readonly ratio: {
readonly type: import("vue").PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly always: BooleanConstructor;
}>>, {
readonly always: boolean;
readonly vertical: boolean;
}>;
export default _default;

View File

@@ -0,0 +1,143 @@
import { defineComponent, inject, ref, computed, onBeforeUnmount, toRef, openBlock, createBlock, Transition, unref, withCtx, withDirectives, createElementVNode, normalizeClass, withModifiers, normalizeStyle, vShow } from 'vue';
import { useEventListener, isClient } from '@vueuse/core';
import { scrollbarContextKey } from './constants.mjs';
import { BAR_MAP, renderThumbStyle } from './util.mjs';
import { thumbProps } from './thumb.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { throwError } from '../../../utils/error.mjs';
const COMPONENT_NAME = "Thumb";
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "thumb",
props: thumbProps,
setup(__props) {
const props = __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 baseScrollHeight = 0;
let baseScrollWidth = 0;
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;
baseScrollHeight = scrollbar.wrapElement.scrollHeight;
baseScrollWidth = scrollbar.wrapElement.scrollWidth;
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];
if (bar.value.scroll === "scrollLeft") {
scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollWidth / 100;
} else {
scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * baseScrollHeight / 100;
}
};
const mouseUpDocumentHandler = () => {
cursorDown = false;
thumbState.value[bar.value.axis] = 0;
document.removeEventListener("mousemove", mouseMoveDocumentHandler);
document.removeEventListener("mouseup", mouseUpDocumentHandler);
restoreOnselectstart();
if (cursorLeave)
visible.value = false;
};
const mouseMoveScrollbarHandler = () => {
cursorLeave = false;
visible.value = !!props.size;
};
const mouseLeaveScrollbarHandler = () => {
cursorLeave = true;
visible.value = cursorDown;
};
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 (_ctx, _cache) => {
return openBlock(), createBlock(Transition, {
name: unref(ns).b("fade"),
persisted: ""
}, {
default: withCtx(() => [
withDirectives(createElementVNode("div", {
ref_key: "instance",
ref: instance,
class: normalizeClass([unref(ns).e("bar"), unref(ns).is(unref(bar).key)]),
onMousedown: clickTrackHandler,
onClick: withModifiers(() => {
}, ["stop"])
}, [
createElementVNode("div", {
ref_key: "thumb",
ref: thumb,
class: normalizeClass(unref(ns).e("thumb")),
style: normalizeStyle(unref(thumbStyle)),
onMousedown: clickThumbHandler
}, null, 38)
], 42, ["onClick"]), [
[vShow, _ctx.always || visible.value]
])
]),
_: 1
}, 8, ["name"]);
};
}
});
var Thumb = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "thumb.vue"]]);
export { Thumb as default };
//# sourceMappingURL=thumb2.mjs.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,28 @@
import type { CSSProperties } from 'vue';
import type { ThumbProps } from './thumb';
export declare const GAP = 4;
export declare const BAR_MAP: {
readonly vertical: {
readonly offset: "offsetHeight";
readonly scroll: "scrollTop";
readonly scrollSize: "scrollHeight";
readonly size: "height";
readonly key: "vertical";
readonly axis: "Y";
readonly client: "clientY";
readonly direction: "top";
};
readonly horizontal: {
readonly offset: "offsetWidth";
readonly scroll: "scrollLeft";
readonly scrollSize: "scrollWidth";
readonly size: "width";
readonly key: "horizontal";
readonly axis: "X";
readonly client: "clientX";
readonly direction: "left";
};
};
export declare const renderThumbStyle: ({ move, size, bar, }: Pick<ThumbProps, "move" | "size"> & {
bar: (typeof BAR_MAP)[keyof typeof BAR_MAP];
}) => CSSProperties;

View File

@@ -0,0 +1,34 @@
const GAP = 4;
const BAR_MAP = {
vertical: {
offset: "offsetHeight",
scroll: "scrollTop",
scrollSize: "scrollHeight",
size: "height",
key: "vertical",
axis: "Y",
client: "clientY",
direction: "top"
},
horizontal: {
offset: "offsetWidth",
scroll: "scrollLeft",
scrollSize: "scrollWidth",
size: "width",
key: "horizontal",
axis: "X",
client: "clientX",
direction: "left"
}
};
const renderThumbStyle = ({
move,
size,
bar
}) => ({
[bar.size]: size,
transform: `translate${bar.axis}(${move}%)`
});
export { BAR_MAP, GAP, renderThumbStyle };
//# sourceMappingURL=util.mjs.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"util.mjs","sources":["../../../../../../packages/components/scrollbar/src/util.ts"],"sourcesContent":["import type { CSSProperties } from 'vue'\nimport type { ThumbProps } from './thumb'\n\nexport const GAP = 4 // top 2 + bottom 2 of bar instance\n\nexport const BAR_MAP = {\n vertical: {\n offset: 'offsetHeight',\n scroll: 'scrollTop',\n scrollSize: 'scrollHeight',\n size: 'height',\n key: 'vertical',\n axis: 'Y',\n client: 'clientY',\n direction: 'top',\n },\n horizontal: {\n offset: 'offsetWidth',\n scroll: 'scrollLeft',\n scrollSize: 'scrollWidth',\n size: 'width',\n key: 'horizontal',\n axis: 'X',\n client: 'clientX',\n direction: 'left',\n },\n} as const\n\nexport const renderThumbStyle = ({\n move,\n size,\n bar,\n}: Pick<ThumbProps, 'move' | 'size'> & {\n bar: typeof BAR_MAP[keyof typeof BAR_MAP]\n}): CSSProperties => ({\n [bar.size]: size,\n transform: `translate${bar.axis}(${move}%)`,\n})\n"],"names":[],"mappings":"AAAY,MAAC,GAAG,GAAG,EAAE;AACT,MAAC,OAAO,GAAG;AACvB,EAAE,QAAQ,EAAE;AACZ,IAAI,MAAM,EAAE,cAAc;AAC1B,IAAI,MAAM,EAAE,WAAW;AACvB,IAAI,UAAU,EAAE,cAAc;AAC9B,IAAI,IAAI,EAAE,QAAQ;AAClB,IAAI,GAAG,EAAE,UAAU;AACnB,IAAI,IAAI,EAAE,GAAG;AACb,IAAI,MAAM,EAAE,SAAS;AACrB,IAAI,SAAS,EAAE,KAAK;AACpB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,MAAM,EAAE,aAAa;AACzB,IAAI,MAAM,EAAE,YAAY;AACxB,IAAI,UAAU,EAAE,aAAa;AAC7B,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,GAAG,EAAE,YAAY;AACrB,IAAI,IAAI,EAAE,GAAG;AACb,IAAI,MAAM,EAAE,SAAS;AACrB,IAAI,SAAS,EAAE,MAAM;AACrB,GAAG;AACH,EAAE;AACU,MAAC,gBAAgB,GAAG,CAAC;AACjC,EAAE,IAAI;AACN,EAAE,IAAI;AACN,EAAE,GAAG;AACL,CAAC,MAAM;AACP,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI;AAClB,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC;AAC7C,CAAC;;;;"}

View File

@@ -0,0 +1,2 @@
import 'element-plus/es/components/base/style/css';
import 'element-plus/theme-chalk/el-scrollbar.css';

View File

@@ -0,0 +1,3 @@
import '../../base/style/css.mjs';
import 'element-plus/theme-chalk/el-scrollbar.css';
//# sourceMappingURL=css.mjs.map

View File

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

View File

@@ -0,0 +1,2 @@
import 'element-plus/es/components/base/style';
import 'element-plus/theme-chalk/src/scrollbar.scss';

View File

@@ -0,0 +1,3 @@
import '../../base/style/index.mjs';
import 'element-plus/theme-chalk/src/scrollbar.scss';
//# sourceMappingURL=index.mjs.map

View File

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