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,23 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var scrollbar$1 = require('./src/scrollbar2.js');
var util = require('./src/util.js');
var scrollbar = require('./src/scrollbar.js');
var thumb = require('./src/thumb.js');
var constants = require('./src/constants.js');
var install = require('../../utils/vue/install.js');
const ElScrollbar = install.withInstall(scrollbar$1["default"]);
exports.BAR_MAP = util.BAR_MAP;
exports.GAP = util.GAP;
exports.renderThumbStyle = util.renderThumbStyle;
exports.scrollbarEmits = scrollbar.scrollbarEmits;
exports.scrollbarProps = scrollbar.scrollbarProps;
exports.thumbProps = thumb.thumbProps;
exports.scrollbarContextKey = constants.scrollbarContextKey;
exports.ElScrollbar = ElScrollbar;
exports["default"] = ElScrollbar;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"index.js","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":["withInstall","Scrollbar"],"mappings":";;;;;;;;;;;AAEY,MAAC,WAAW,GAAGA,mBAAW,CAACC,sBAAS;;;;;;;;;;;;"}

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,19 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var runtime = require('../../../utils/vue/props/runtime.js');
const barProps = runtime.buildProps({
always: {
type: Boolean,
default: true
},
minSize: {
type: Number,
required: true
}
});
exports.barProps = barProps;
//# sourceMappingURL=bar.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"bar.js","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":["buildProps"],"mappings":";;;;;;AACY,MAAC,QAAQ,GAAGA,kBAAU,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,73 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var util = require('./util.js');
var thumb = require('./thumb2.js');
var bar = require('./bar.js');
var constants = require('./constants.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "bar",
props: bar.barProps,
setup(__props, { expose }) {
const props = __props;
const scrollbar = vue.inject(constants.scrollbarContextKey);
const moveX = vue.ref(0);
const moveY = vue.ref(0);
const sizeWidth = vue.ref("");
const sizeHeight = vue.ref("");
const ratioY = vue.ref(1);
const ratioX = vue.ref(1);
const handleScroll = (wrap) => {
if (wrap) {
const offsetHeight = wrap.offsetHeight - util.GAP;
const offsetWidth = wrap.offsetWidth - util.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 - util.GAP;
const offsetWidth = wrap.offsetWidth - util.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 + util.GAP < offsetHeight ? `${height}px` : "";
sizeWidth.value = width + util.GAP < offsetWidth ? `${width}px` : "";
};
expose({
handleScroll,
update
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
vue.createVNode(thumb["default"], {
move: moveX.value,
ratio: ratioX.value,
size: sizeWidth.value,
always: _ctx.always
}, null, 8, ["move", "ratio", "size", "always"]),
vue.createVNode(thumb["default"], {
move: moveY.value,
ratio: ratioY.value,
size: sizeHeight.value,
vertical: "",
always: _ctx.always
}, null, 8, ["move", "ratio", "size", "always"])
], 64);
};
}
});
var Bar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "bar.vue"]]);
exports["default"] = Bar;
//# sourceMappingURL=bar2.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"bar2.js","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":["inject","scrollbarContextKey","ref","GAP"],"mappings":";;;;;;;;;;;;;;;;AAoBA,IAAM,MAAA,SAAA,GAAYA,WAAOC,6BAAmB,CAAA,CAAA;AAE5C,IAAM,MAAA,KAAA,GAAQC,QAAI,CAAC,CAAA,CAAA;AACnB,IAAM,MAAA,KAAA,GAAQA,QAAI,CAAC,CAAA,CAAA;AACnB,IAAM,MAAA,SAAA,GAAYA,QAAI,EAAE,CAAA,CAAA;AACxB,IAAM,MAAA,UAAA,GAAaA,QAAI,EAAE,CAAA,CAAA;AACzB,IAAM,MAAA,MAAA,GAASA,QAAI,CAAC,CAAA,CAAA;AACpB,IAAM,MAAA,MAAA,GAASA,QAAI,CAAC,CAAA,CAAA;AAEpB,IAAM,MAAA,YAAA,GAAe,CAAC,IAAyB,KAAA;AAC7C,MAAA,IAAI,IAAM,EAAA;AACR,QAAM,MAAA,YAAA,GAAe,KAAK,YAAe,GAAAC,QAAA,CAAA;AACzC,QAAM,MAAA,WAAA,GAAc,KAAK,WAAc,GAAAA,QAAA,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,GAAAA,QAAA,CAAA;AAEvC,MAAM,MAAA,WAAA,GAAA,IAAiC,CAAA,WAAA,GAAAA,QAAA,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,GAAAA,QAAA,GAAoB,YAAA,GAAG,SAAY,CAAA,EAAA,CAAA,GAAA,EAAA,CAAA;AAAA,MAC/D,SAAA,CAAA,KAAA,GAAA,KAAA,GAAAA,QAAA,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,8 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const scrollbarContextKey = Symbol("scrollbarContextKey");
exports.scrollbarContextKey = scrollbarContextKey;
//# sourceMappingURL=constants.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"constants.js","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,67 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var runtime = require('../../../utils/vue/props/runtime.js');
var index = require('../../../hooks/use-aria/index.js');
var types = require('../../../utils/types.js');
const scrollbarProps = runtime.buildProps({
distance: {
type: Number,
default: 0
},
height: {
type: [String, Number],
default: ""
},
maxHeight: {
type: [String, Number],
default: ""
},
native: Boolean,
wrapStyle: {
type: runtime.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,
...index.useAriaProps(["ariaLabel", "ariaOrientation"])
});
const scrollbarEmits = {
"end-reached": (direction) => ["left", "right", "top", "bottom"].includes(direction),
scroll: ({
scrollTop,
scrollLeft
}) => [scrollTop, scrollLeft].every(types.isNumber)
};
exports.scrollbarEmits = scrollbarEmits;
exports.scrollbarProps = scrollbarProps;
//# sourceMappingURL=scrollbar.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"scrollbar.js","sources":["../../../../../../packages/components/scrollbar/src/scrollbar.ts"],"sourcesContent":["import { buildProps, definePropType, isNumber } from '@element-plus/utils'\nimport { useAriaProps } from '@element-plus/hooks'\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":["buildProps","definePropType","useAriaProps","isNumber"],"mappings":";;;;;;;;AAEY,MAAC,cAAc,GAAGA,kBAAU,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,EAAEC,sBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;AACzB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;AACzB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;AACjC,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,EAAE,EAAE,MAAM;AACZ,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,GAAGC,kBAAY,CAAC,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;AACnD,CAAC,EAAE;AACS,MAAC,cAAc,GAAG;AAC9B,EAAE,aAAa,EAAE,CAAC,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC;AACtF,EAAE,MAAM,EAAE,CAAC;AACX,IAAI,SAAS;AACb,IAAI,UAAU;AACd,GAAG,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,KAAK,CAACC,cAAQ,CAAC;AAC/C;;;;;"}

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,232 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var core = require('@vueuse/core');
var bar = require('./bar2.js');
var constants = require('./constants.js');
var scrollbar = require('./scrollbar.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-namespace/index.js');
var style = require('../../../utils/dom/style.js');
var shared = require('@vue/shared');
var types = require('../../../utils/types.js');
const COMPONENT_NAME = "ElScrollbar";
const __default__ = vue.defineComponent({
name: COMPONENT_NAME
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: scrollbar.scrollbarProps,
emits: scrollbar.scrollbarEmits,
setup(__props, { expose, emit }) {
const props = __props;
const ns = index.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 = vue.ref();
const wrapRef = vue.ref();
const resizeRef = vue.ref();
const barRef = vue.ref();
const wrapStyle = vue.computed(() => {
const style$1 = {};
if (props.height)
style$1.height = style.addUnit(props.height);
if (props.maxHeight)
style$1.maxHeight = style.addUnit(props.maxHeight);
return [props.wrapStyle, style$1];
});
const wrapKls = vue.computed(() => {
return [
props.wrapClass,
ns.e("wrap"),
{ [ns.em("wrap", "hidden-default")]: !props.native }
];
});
const resizeKls = vue.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 (shared.isObject(arg1)) {
wrapRef.value.scrollTo(arg1);
} else if (types.isNumber(arg1) && types.isNumber(arg2)) {
wrapRef.value.scrollTo(arg1, arg2);
}
}
const setScrollTop = (value) => {
if (!types.isNumber(value)) {
return;
}
wrapRef.value.scrollTop = value;
};
const setScrollLeft = (value) => {
if (!types.isNumber(value)) {
return;
}
wrapRef.value.scrollLeft = value;
};
const update = () => {
var _a;
(_a = barRef.value) == null ? void 0 : _a.update();
distanceScrollState[direction] = false;
};
vue.watch(() => props.noresize, (noresize) => {
if (noresize) {
stopResizeObserver == null ? void 0 : stopResizeObserver();
stopWrapResizeObserver == null ? void 0 : stopWrapResizeObserver();
stopResizeListener == null ? void 0 : stopResizeListener();
} else {
({ stop: stopResizeObserver } = core.useResizeObserver(resizeRef, update));
({ stop: stopWrapResizeObserver } = core.useResizeObserver(wrapRef, update));
stopResizeListener = core.useEventListener("resize", update);
}
}, { immediate: true });
vue.watch(() => [props.maxHeight, props.height], () => {
if (!props.native)
vue.nextTick(() => {
var _a;
update();
if (wrapRef.value) {
(_a = barRef.value) == null ? void 0 : _a.handleScroll(wrapRef.value);
}
});
});
vue.provide(constants.scrollbarContextKey, vue.reactive({
scrollbarElement: scrollbarRef,
wrapElement: wrapRef
}));
vue.onActivated(() => {
if (wrapRef.value) {
wrapRef.value.scrollTop = wrapScrollTop;
wrapRef.value.scrollLeft = wrapScrollLeft;
}
});
vue.onMounted(() => {
if (!props.native)
vue.nextTick(() => {
update();
});
});
vue.onUpdated(() => update());
expose({
wrapRef,
update,
scrollTo,
setScrollTop,
setScrollLeft,
handleScroll
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
ref_key: "scrollbarRef",
ref: scrollbarRef,
class: vue.normalizeClass(vue.unref(ns).b())
}, [
vue.createElementVNode("div", {
ref_key: "wrapRef",
ref: wrapRef,
class: vue.normalizeClass(vue.unref(wrapKls)),
style: vue.normalizeStyle(vue.unref(wrapStyle)),
tabindex: _ctx.tabindex,
onScroll: handleScroll
}, [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
id: _ctx.id,
ref_key: "resizeRef",
ref: resizeRef,
class: vue.normalizeClass(vue.unref(resizeKls)),
style: vue.normalizeStyle(_ctx.viewStyle),
role: _ctx.role,
"aria-label": _ctx.ariaLabel,
"aria-orientation": _ctx.ariaOrientation
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["id", "class", "style", "role", "aria-label", "aria-orientation"]))
], 46, ["tabindex"]),
!_ctx.native ? (vue.openBlock(), vue.createBlock(bar["default"], {
key: 0,
ref_key: "barRef",
ref: barRef,
always: _ctx.always,
"min-size": _ctx.minSize
}, null, 8, ["always", "min-size"])) : vue.createCommentVNode("v-if", true)
], 2);
};
}
});
var Scrollbar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "scrollbar.vue"]]);
exports["default"] = Scrollbar;
//# sourceMappingURL=scrollbar2.js.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,19 @@
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var runtime = require('../../../utils/vue/props/runtime.js');
const thumbProps = runtime.buildProps({
vertical: Boolean,
size: String,
move: Number,
ratio: {
type: Number,
required: true
},
always: Boolean
});
exports.thumbProps = thumbProps;
//# sourceMappingURL=thumb.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"thumb.js","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":["buildProps"],"mappings":";;;;;;AACY,MAAC,UAAU,GAAGA,kBAAU,CAAC;AACrC,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,IAAI,EAAE,MAAM;AACd,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,QAAQ,EAAE,IAAI;AAClB,GAAG;AACH,EAAE,MAAM,EAAE,OAAO;AACjB,CAAC;;;;"}

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

View File

@@ -0,0 +1 @@
{"version":3,"file":"util.js","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,6 @@
'use strict';
require('../../base/style/css.js');
require('element-plus/theme-chalk/el-scrollbar.css');
//# sourceMappingURL=css.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"css.js","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,6 @@
'use strict';
require('../../base/style/index.js');
require('element-plus/theme-chalk/src/scrollbar.scss');
//# sourceMappingURL=index.js.map

View File

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