feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
+12
View File
@@ -0,0 +1,12 @@
import { SFCWithInstall } from "../../utils/vue/typescript.js";
import "../../utils/index.js";
import { ScrollbarDirection, ScrollbarEmits, ScrollbarInstance, ScrollbarProps, ScrollbarPropsPublic, scrollbarEmits, scrollbarProps } from "./src/scrollbar.js";
import { _default } from "./src/scrollbar.vue.js";
import { ThumbInstance, ThumbProps, ThumbPropsPublic, thumbProps } from "./src/thumb.js";
import { BAR_MAP, GAP, renderThumbStyle } from "./src/util.js";
import { ScrollbarContext, scrollbarContextKey } from "./src/constants.js";
//#region ../../packages/components/scrollbar/index.d.ts
declare const ElScrollbar: SFCWithInstall<typeof _default>;
//#endregion
export { BAR_MAP, ElScrollbar, ElScrollbar as default, GAP, ScrollbarContext, ScrollbarDirection, ScrollbarEmits, ScrollbarInstance, ScrollbarProps, ScrollbarPropsPublic, ThumbInstance, ThumbProps, ThumbPropsPublic, renderThumbStyle, scrollbarContextKey, scrollbarEmits, scrollbarProps, thumbProps };
+13
View File
@@ -0,0 +1,13 @@
import { withInstall } from "../../utils/vue/install.mjs";
import { scrollbarEmits, scrollbarProps } from "./src/scrollbar.mjs";
import { BAR_MAP, GAP, renderThumbStyle } from "./src/util.mjs";
import { thumbProps } from "./src/thumb.mjs";
import { scrollbarContextKey } from "./src/constants.mjs";
import scrollbar_default from "./src/scrollbar2.mjs";
//#region ../../packages/components/scrollbar/index.ts
const ElScrollbar = withInstall(scrollbar_default);
//#endregion
export { BAR_MAP, ElScrollbar, ElScrollbar as default, GAP, renderThumbStyle, scrollbarContextKey, scrollbarEmits, scrollbarProps, thumbProps };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["Scrollbar"],"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"],"mappings":";;;;;;;;AAKA,MAAa,cACX,YAAYA,kBAAU"}
+20
View File
@@ -0,0 +1,20 @@
import { buildProps } from "../../../utils/vue/props/runtime.mjs";
//#region ../../packages/components/scrollbar/src/bar.ts
/**
* @deprecated Removed after 3.0.0, Use `BarProps` instead.
*/
const barProps = buildProps({
always: {
type: Boolean,
default: true
},
minSize: {
type: Number,
required: true
}
});
//#endregion
export { barProps };
//# sourceMappingURL=bar.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"bar.mjs","names":[],"sources":["../../../../../../packages/components/scrollbar/src/bar.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type Bar from './bar.vue'\n\nexport interface BarProps {\n always?: boolean\n minSize: number\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `BarProps` instead.\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)\n\n/**\n * @deprecated Removed after 3.0.0, Use `BarProps` instead.\n */\nexport type BarPropsPublic = ExtractPublicPropTypes<typeof barProps>\n\nexport type BarInstance = InstanceType<typeof Bar> & unknown\n"],"mappings":";;;;;;AAaA,MAAa,WAAW,WAAW;CACjC,QAAQ;EACN,MAAM;EACN,SAAS;EACV;CACD,SAAS;EACP,MAAM;EACN,UAAU;EACX;CACF,CAAU"}
@@ -0,0 +1,75 @@
import { barProps } from "./bar.mjs";
import { GAP } from "./util.mjs";
import { scrollbarContextKey } from "./constants.mjs";
import thumb_default from "./thumb2.mjs";
import { Fragment, createElementBlock, createVNode, defineComponent, inject, openBlock, ref } from "vue";
//#region ../../packages/components/scrollbar/src/bar.vue?vue&type=script&setup=true&lang.ts
var bar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
__name: "bar",
props: barProps,
setup(__props, { expose: __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?.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_default, {
move: moveX.value,
ratio: ratioX.value,
size: sizeWidth.value,
always: __props.always
}, null, 8, [
"move",
"ratio",
"size",
"always"
]), createVNode(thumb_default, {
move: moveY.value,
ratio: ratioY.value,
size: sizeHeight.value,
vertical: "",
always: __props.always
}, null, 8, [
"move",
"ratio",
"size",
"always"
])], 64);
};
}
});
//#endregion
export { bar_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=bar.vue_vue_type_script_setup_true_lang.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"bar.vue_vue_type_script_setup_true_lang.mjs","names":[],"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 { scrollbarContextKey } from './constants'\n\nimport type { BarProps } from './bar'\n\nconst props = withDefaults(defineProps<BarProps>(), {\n always: true,\n})\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"],"mappings":";;;;;;;;;;;EAmBA,MAAM,QAAQ;EAId,MAAM,YAAY,OAAO,oBAAmB;EAE5C,MAAM,QAAQ,IAAI,EAAC;EACnB,MAAM,QAAQ,IAAI,EAAC;EACnB,MAAM,YAAY,IAAI,GAAE;EACxB,MAAM,aAAa,IAAI,GAAE;EACzB,MAAM,SAAS,IAAI,EAAC;EACpB,MAAM,SAAS,IAAI,EAAC;EAEpB,MAAM,gBAAgB,SAAyB;AAC7C,OAAI,MAAM;IACR,MAAM,eAAe,KAAK,eAAe;IACzC,MAAM,cAAc,KAAK,cAAc;AAEvC,UAAM,QAAU,KAAK,YAAY,MAAO,eAAgB,OAAO;AAC/D,UAAM,QAAU,KAAK,aAAa,MAAO,cAAe,OAAO;;;EAInE,MAAM,eAAe;GACnB,MAAM,OAAO,WAAW;AACxB,OAAI,CAAC,KAAM;GACX,MAAM,eAAe,KAAK,eAAe;GACzC,MAAM,cAAc,KAAK,cAAc;GAEvC,MAAM,iBAAiB,gBAAgB,IAAI,KAAK;GAChD,MAAM,gBAAgB,eAAe,IAAI,KAAK;GAC9C,MAAM,SAAS,KAAK,IAAI,gBAAgB,MAAM,QAAO;GACrD,MAAM,QAAQ,KAAK,IAAI,eAAe,MAAM,QAAO;AAEnD,UAAO,QACL,kBACC,eAAe,mBACf,UAAU,eAAe;AAC5B,UAAO,QACL,iBACC,cAAc,kBACd,SAAS,cAAc;AAE1B,cAAW,QAAQ,SAAS,MAAM,eAAe,GAAG,OAAO,MAAM;AACjE,aAAU,QAAQ,QAAQ,MAAM,cAAc,GAAG,MAAM,MAAM;;AAG/D,WAAa;GACX;GACA;GACD,CAAA;;2DApEC,YAA0E,eAAA;IAAlE,MAAM,MAAA;IAAQ,OAAO,OAAA;IAAS,MAAM,UAAA;IAAY,QAAQ,QAAA;;;;;;OAChE,YAME,eAAA;IALC,MAAM,MAAA;IACN,OAAO,OAAA;IACP,MAAM,WAAA;IACP,UAAA;IACC,QAAQ,QAAA"}
@@ -0,0 +1,8 @@
import bar_vue_vue_type_script_setup_true_lang_default from "./bar.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/scrollbar/src/bar.vue
var bar_default = bar_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { bar_default as default };
//# sourceMappingURL=bar2.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"bar2.mjs","names":[],"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 { scrollbarContextKey } from './constants'\n\nimport type { BarProps } from './bar'\n\nconst props = withDefaults(defineProps<BarProps>(), {\n always: true,\n})\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"],"mappings":""}
@@ -0,0 +1,10 @@
import { InjectionKey } from "vue";
//#region ../../packages/components/scrollbar/src/constants.d.ts
interface ScrollbarContext {
scrollbarElement: HTMLDivElement | undefined;
wrapElement: HTMLDivElement | undefined;
}
declare const scrollbarContextKey: InjectionKey<ScrollbarContext>;
//#endregion
export { ScrollbarContext, scrollbarContextKey };
@@ -0,0 +1,6 @@
//#region ../../packages/components/scrollbar/src/constants.ts
const scrollbarContextKey = Symbol("scrollbarContextKey");
//#endregion
export { scrollbarContextKey };
//# sourceMappingURL=constants.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"constants.mjs","names":[],"sources":["../../../../../../packages/components/scrollbar/src/constants.ts"],"sourcesContent":["import type { InjectionKey } from 'vue'\n\nexport interface ScrollbarContext {\n scrollbarElement: HTMLDivElement | undefined\n wrapElement: HTMLDivElement | undefined\n}\n\nexport const scrollbarContextKey: InjectionKey<ScrollbarContext> = Symbol(\n 'scrollbarContextKey'\n)\n"],"mappings":";AAOA,MAAa,sBAAsD,OACjE,sBACD"}
@@ -0,0 +1,133 @@
import { EpPropFinalized } from "../../../utils/vue/props/types.js";
import "../../../utils/index.js";
import { _default } from "./scrollbar.vue.js";
import * as vue from "vue";
import { ExtractPublicPropTypes, StyleValue } from "vue";
//#region ../../packages/components/scrollbar/src/scrollbar.d.ts
interface ScrollbarProps {
/**
* @description trigger distance(px)
* @default 0
*/
distance?: number;
/**
* @description height of scrollbar
* @default ''
*/
height?: number | string;
/**
* @description max height of scrollbar
* @default ''
*/
maxHeight?: number | string;
/**
* @description whether to use the native scrollbar
*/
native?: boolean;
/**
* @description style of wrap
* @default ''
*/
wrapStyle?: StyleValue;
/**
* @description class of wrap
* @default ''
*/
wrapClass?: string | string[];
/**
* @description class of view
* @default ''
*/
viewClass?: string | string[];
/**
* @description style of view
* @default ''
*/
viewStyle?: StyleValue;
/**
* @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance
*/
noresize?: boolean;
/**
* @description element tag of the view
* @default 'div'
*/
tag?: keyof HTMLElementTagNameMap | (string & {});
/**
* @description always show
*/
always?: boolean;
/**
* @description minimum size of scrollbar
* @default 20
*/
minSize?: number;
/**
* @description Wrap tabindex
* @default undefined
*/
tabindex?: number | string;
/**
* @description id of view
*/
id?: string;
/**
* @description role of view
*/
role?: string;
/**
* @description native `aria-label` attribute
*/
ariaLabel?: string;
/**
* @description native `aria-orientation` attribute
*/
ariaOrientation?: 'horizontal' | 'vertical' | 'undefined';
}
/**
* @deprecated Removed after 3.0.0, Use `ScrollbarProps` instead.
*/
declare const scrollbarProps: {
readonly ariaLabel: StringConstructor;
readonly ariaOrientation: {
readonly type: vue.PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly distance: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly height: EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
readonly maxHeight: EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
readonly native: BooleanConstructor;
readonly wrapStyle: EpPropFinalized<(new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue) | (((new (...args: any[]) => string | false | vue.CSSProperties | StyleValue[]) | (() => StyleValue)) | null)[], unknown, unknown, "", boolean>;
readonly wrapClass: EpPropFinalized<readonly [StringConstructor, ArrayConstructor], unknown, unknown, "", boolean>;
readonly viewClass: EpPropFinalized<readonly [StringConstructor, ArrayConstructor], unknown, unknown, "", boolean>;
readonly viewStyle: EpPropFinalized<readonly [StringConstructor, ArrayConstructor, ObjectConstructor], unknown, unknown, "", boolean>;
readonly noresize: BooleanConstructor;
readonly tag: EpPropFinalized<StringConstructor, unknown, unknown, "div", boolean>;
readonly always: BooleanConstructor;
readonly minSize: EpPropFinalized<NumberConstructor, unknown, unknown, 20, boolean>;
readonly tabindex: EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, undefined, boolean>;
readonly id: StringConstructor;
readonly role: StringConstructor;
};
/**
* @deprecated Removed after 3.0.0, Use `ScrollbarProps` instead.
*/
type ScrollbarPropsPublic = ExtractPublicPropTypes<typeof scrollbarProps>;
declare const scrollbarEmits: {
'end-reached': (direction: ScrollbarDirection) => boolean;
scroll: ({
scrollTop,
scrollLeft
}: {
scrollTop: number;
scrollLeft: number;
}) => boolean;
};
type ScrollbarEmits = typeof scrollbarEmits;
type ScrollbarDirection = 'top' | 'bottom' | 'left' | 'right';
type ScrollbarInstance = InstanceType<typeof _default> & unknown;
//#endregion
export { ScrollbarDirection, ScrollbarEmits, ScrollbarInstance, ScrollbarProps, ScrollbarPropsPublic, scrollbarEmits, scrollbarProps };
@@ -0,0 +1,77 @@
import { isNumber } from "../../../utils/types.mjs";
import { buildProps, definePropType } from "../../../utils/vue/props/runtime.mjs";
import { useAriaProps } from "../../../hooks/use-aria/index.mjs";
//#region ../../packages/components/scrollbar/src/scrollbar.ts
/**
* @deprecated Removed after 3.0.0, Use `ScrollbarProps` instead.
*/
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)
};
//#endregion
export { scrollbarEmits, scrollbarProps };
//# sourceMappingURL=scrollbar.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,51 @@
import { ScrollbarDirection, ScrollbarProps } from "./scrollbar.js";
import * as vue from "vue";
import { CSSProperties, StyleValue } from "vue";
//#region ../../packages/components/scrollbar/src/scrollbar.vue.d.ts
declare function scrollTo(xCord: number, yCord?: number): void;
declare function scrollTo(options: ScrollToOptions): void;
declare var __VLS_9: {};
type __VLS_Slots = {} & {
default?: (props: typeof __VLS_9) => any;
};
declare const __VLS_base: vue.DefineComponent<ScrollbarProps, {
/** @description scrollbar wrap ref */wrapRef: vue.Ref<HTMLDivElement | undefined, 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;
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
scroll: (args_0: {
scrollTop: number;
scrollLeft: number;
}) => void;
"end-reached": (direction: ScrollbarDirection) => void;
}, string, vue.PublicProps, Readonly<ScrollbarProps> & Readonly<{
onScroll?: ((args_0: {
scrollTop: number;
scrollLeft: number;
}) => any) | undefined;
"onEnd-reached"?: ((direction: ScrollbarDirection) => any) | undefined;
}>, {
tabindex: number | string;
height: number | string;
maxHeight: number | string;
tag: keyof HTMLElementTagNameMap | (string & {});
distance: number;
wrapStyle: string | false | CSSProperties | StyleValue[] | null;
wrapClass: string | string[];
viewClass: string | string[];
viewStyle: string | false | CSSProperties | StyleValue[] | null;
minSize: number;
}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
declare const _default: typeof __VLS_export;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};
//#endregion
export { _default };
@@ -0,0 +1,208 @@
import { isNumber, isObject } from "../../../utils/types.mjs";
import { debugWarn } from "../../../utils/error.mjs";
import { addUnit } from "../../../utils/dom/style.mjs";
import { isGreaterThan } from "../../../utils/numbers.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { scrollbarEmits, scrollbarProps } from "./scrollbar.mjs";
import { scrollbarContextKey } from "./constants.mjs";
import bar_default from "./bar2.mjs";
import { useEventListener, useResizeObserver } from "@vueuse/core";
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onActivated, onMounted, onUpdated, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, unref, watch, withCtx } from "vue";
//#region ../../packages/components/scrollbar/src/scrollbar.vue?vue&type=script&setup=true&lang.ts
const _hoisted_1 = ["tabindex"];
const COMPONENT_NAME = "ElScrollbar";
var scrollbar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
name: COMPONENT_NAME,
__name: "scrollbar",
props: scrollbarProps,
emits: scrollbarEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
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 = {};
const height = addUnit(props.height);
const maxHeight = addUnit(props.maxHeight);
if (height) style.height = height;
if (maxHeight) style.maxHeight = 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 = (direction) => {
return distanceScrollState[direction] ?? 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 = () => {
if (wrapRef.value) {
barRef.value?.handleScroll(wrapRef.value);
const prevTop = wrapScrollTop;
const prevLeft = wrapScrollLeft;
wrapScrollTop = wrapRef.value.scrollTop;
wrapScrollLeft = wrapRef.value.scrollLeft;
const arrivedStates = {
bottom: !isGreaterThan(wrapRef.value.scrollHeight - props.distance, wrapRef.value.clientHeight + wrapScrollTop),
top: wrapScrollTop <= props.distance && prevTop !== 0,
right: !isGreaterThan(wrapRef.value.scrollWidth - props.distance, wrapRef.value.clientWidth + wrapScrollLeft) && 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)) {
debugWarn(COMPONENT_NAME, "value must be a number");
return;
}
wrapRef.value.scrollTop = value;
};
const setScrollLeft = (value) => {
if (!isNumber(value)) {
debugWarn(COMPONENT_NAME, "value must be a number");
return;
}
wrapRef.value.scrollLeft = value;
};
const update = () => {
barRef.value?.update();
distanceScrollState[direction] = false;
if (wrapRef.value) barRef.value?.handleScroll(wrapRef.value);
};
watch(() => props.noresize, (noresize) => {
if (noresize) {
stopResizeObserver?.();
stopWrapResizeObserver?.();
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(() => {
update();
});
});
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(wrapKls.value),
style: normalizeStyle(wrapStyle.value),
tabindex: __props.tabindex,
onScroll: handleScroll
}, [(openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
id: __props.id,
ref_key: "resizeRef",
ref: resizeRef,
class: normalizeClass(resizeKls.value),
style: normalizeStyle(__props.viewStyle),
role: __props.role,
"aria-label": __props.ariaLabel,
"aria-orientation": __props.ariaOrientation
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 8, [
"id",
"class",
"style",
"role",
"aria-label",
"aria-orientation"
]))], 46, _hoisted_1), !__props.native ? (openBlock(), createBlock(bar_default, {
key: 0,
ref_key: "barRef",
ref: barRef,
always: __props.always,
"min-size": __props.minSize
}, null, 8, ["always", "min-size"])) : createCommentVNode("v-if", true)], 2);
};
}
});
//#endregion
export { scrollbar_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=scrollbar.vue_vue_type_script_setup_true_lang.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
import scrollbar_vue_vue_type_script_setup_true_lang_default from "./scrollbar.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/scrollbar/src/scrollbar.vue
var scrollbar_default = scrollbar_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { scrollbar_default as default };
//# sourceMappingURL=scrollbar2.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,34 @@
import { _default } from "./thumb.vue.js";
import * as vue from "vue";
import { ExtractPublicPropTypes } from "vue";
//#region ../../packages/components/scrollbar/src/thumb.d.ts
interface ThumbProps {
vertical?: boolean;
size?: string;
move?: number;
ratio: number;
always?: boolean;
}
/**
* @deprecated Removed after 3.0.0, Use `ThumbProps` instead.
*/
declare const thumbProps: {
readonly vertical: BooleanConstructor;
readonly size: StringConstructor;
readonly move: NumberConstructor;
readonly ratio: {
readonly type: vue.PropType<number>;
readonly required: true;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
readonly always: BooleanConstructor;
};
/**
* @deprecated Removed after 3.0.0, Use `ThumbProps` instead.
*/
type ThumbPropsPublic = ExtractPublicPropTypes<typeof thumbProps>;
type ThumbInstance = InstanceType<typeof _default> & unknown;
//#endregion
export { ThumbInstance, ThumbProps, ThumbPropsPublic, thumbProps };
@@ -0,0 +1,20 @@
import { buildProps } from "../../../utils/vue/props/runtime.mjs";
//#region ../../packages/components/scrollbar/src/thumb.ts
/**
* @deprecated Removed after 3.0.0, Use `ThumbProps` instead.
*/
const thumbProps = buildProps({
vertical: Boolean,
size: String,
move: Number,
ratio: {
type: Number,
required: true
},
always: Boolean
});
//#endregion
export { thumbProps };
//# sourceMappingURL=thumb.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"thumb.mjs","names":[],"sources":["../../../../../../packages/components/scrollbar/src/thumb.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils'\n\nimport type { ExtractPublicPropTypes } from 'vue'\nimport type Thumb from './thumb.vue'\n\nexport interface ThumbProps {\n vertical?: boolean\n size?: string\n move?: number\n ratio: number\n always?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ThumbProps` instead.\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)\n\n/**\n * @deprecated Removed after 3.0.0, Use `ThumbProps` instead.\n */\nexport type ThumbPropsPublic = ExtractPublicPropTypes<typeof thumbProps>\n\nexport type ThumbInstance = InstanceType<typeof Thumb> & unknown\n"],"mappings":";;;;;;AAgBA,MAAa,aAAa,WAAW;CACnC,UAAU;CACV,MAAM;CACN,MAAM;CACN,OAAO;EACL,MAAM;EACN,UAAU;EACX;CACD,QAAQ;CACT,CAAU"}
@@ -0,0 +1,8 @@
import { ThumbProps } from "./thumb.js";
import * as vue from "vue";
//#region ../../packages/components/scrollbar/src/thumb.vue.d.ts
declare const __VLS_export: vue.DefineComponent<ThumbProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ThumbProps> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
declare const _default: typeof __VLS_export;
//#endregion
export { _default };
@@ -0,0 +1,120 @@
import { isClient as isClient$1 } from "../../../utils/browser.mjs";
import { throwError } from "../../../utils/error.mjs";
import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
import { BAR_MAP, renderThumbStyle } from "./util.mjs";
import { thumbProps } from "./thumb.mjs";
import { scrollbarContextKey } from "./constants.mjs";
import { useEventListener } from "@vueuse/core";
import { Transition, computed, createBlock, createElementVNode, defineComponent, inject, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, toRef, unref, vShow, withCtx, withDirectives, withModifiers } from "vue";
//#region ../../packages/components/scrollbar/src/thumb.vue?vue&type=script&setup=true&lang.ts
const COMPONENT_NAME = "Thumb";
var thumb_vue_vue_type_script_setup_true_lang_default = /* @__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$1 ? 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) => {
e.stopPropagation();
if (e.ctrlKey || [1, 2].includes(e.button)) return;
window.getSelection()?.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 thumbPositionPercentage = (Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) - thumb.value[bar.value.offset] / 2) * 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 thumbPositionPercentage = ((instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1 - (thumb.value[bar.value.offset] - prevPage)) * 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(bar.value.key)]),
onMousedown: clickTrackHandler,
onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
}, [createElementVNode("div", {
ref_key: "thumb",
ref: thumb,
class: normalizeClass(unref(ns).e("thumb")),
style: normalizeStyle(thumbStyle.value),
onMousedown: clickThumbHandler
}, null, 38)], 34), [[vShow, __props.always || visible.value]])]),
_: 1
}, 8, ["name"]);
};
}
});
//#endregion
export { thumb_vue_vue_type_script_setup_true_lang_default as default };
//# sourceMappingURL=thumb.vue_vue_type_script_setup_true_lang.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,8 @@
import thumb_vue_vue_type_script_setup_true_lang_default from "./thumb.vue_vue_type_script_setup_true_lang.mjs";
//#region ../../packages/components/scrollbar/src/thumb.vue
var thumb_default = thumb_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { thumb_default as default };
//# sourceMappingURL=thumb2.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,36 @@
import { ThumbProps } from "./thumb.js";
import { CSSProperties } from "vue";
//#region ../../packages/components/scrollbar/src/util.d.ts
declare const GAP = 4;
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";
};
};
declare const renderThumbStyle: ({
move,
size,
bar
}: Pick<ThumbProps, "move" | "size"> & {
bar: (typeof BAR_MAP)[keyof typeof BAR_MAP];
}) => CSSProperties;
//#endregion
export { BAR_MAP, GAP, renderThumbStyle };
@@ -0,0 +1,32 @@
//#region ../../packages/components/scrollbar/src/util.ts
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}%)`
});
//#endregion
export { BAR_MAP, GAP, renderThumbStyle };
//# sourceMappingURL=util.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"util.mjs","names":[],"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"],"mappings":";AAGA,MAAa,MAAM;AAEnB,MAAa,UAAU;CACrB,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,YAAY;EACZ,MAAM;EACN,KAAK;EACL,MAAM;EACN,QAAQ;EACR,WAAW;EACZ;CACD,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,YAAY;EACZ,MAAM;EACN,KAAK;EACL,MAAM;EACN,QAAQ;EACR,WAAW;EACZ;CACF;AAED,MAAa,oBAAoB,EAC/B,MACA,MACA,WAGoB;EACnB,IAAI,OAAO;CACZ,WAAW,YAAY,IAAI,KAAK,GAAG,KAAK;CACzC"}
@@ -0,0 +1,2 @@
import "../../base/style/css.mjs";
import "element-plus/theme-chalk/el-scrollbar.css";
@@ -0,0 +1,2 @@
import "../../base/style/index.mjs";
import "element-plus/theme-chalk/src/scrollbar.scss";