@v-c/virtual-list 0.0.1 → 1.0.0

package/dist/ScrollBar.cjs

@@ -1 +1,259 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue");function L(e,c){return("touches"in e?e.touches[0]:e)[c?"pageX":"pageY"]-window[c?"scrollX":"scrollY"]}const C=t.defineComponent({name:"ScrollBar",props:{prefixCls:{type:String,required:!0},scrollOffset:{type:Number,required:!0},scrollRange:{type:Number,required:!0},rtl:{type:Boolean,default:!1},onScroll:{type:Function,required:!0},onStartMove:{type:Function,required:!0},onStopMove:{type:Function,required:!0},horizontal:{type:Boolean,default:!1},style:Object,thumbStyle:Object,spinSize:{type:Number,required:!0},containerSize:{type:Number,required:!0},showScrollBar:{type:[Boolean,String]}},setup(e,{expose:c}){const a=t.ref(!1),v=t.ref(null),d=t.ref(null),h=t.computed(()=>!e.rtl),g=t.shallowRef(),y=t.shallowRef(),f=t.ref(e.showScrollBar==="optional"?!0:e.showScrollBar);let i=null;const m=()=>{e.showScrollBar===!0||e.showScrollBar===!1||(i&&clearTimeout(i),f.value=!0,i=setTimeout(()=>{f.value=!1},3e3))},b=t.computed(()=>e.scrollRange-e.containerSize||0),M=t.computed(()=>e.containerSize-e.spinSize||0),u=t.computed(()=>e.scrollOffset===0||b.value===0?0:e.scrollOffset/b.value*M.value),w=t.shallowRef({top:u.value,dragging:a.value,pageY:v.value,startTop:d.value});t.watch([u,a,v,d],()=>{w.value={top:u.value,dragging:a.value,pageY:v.value,startTop:d.value}});const O=o=>{o.stopPropagation(),o.preventDefault()},S=o=>{a.value=!0,v.value=L(o,e.horizontal||!1),d.value=w.value.top,e.onStartMove(),o.stopPropagation(),o.preventDefault()};return t.onMounted(()=>{const o=r=>{r.preventDefault()},n=g.value,l=y.value;n&&l&&(n.addEventListener("touchstart",o,{passive:!1}),l.addEventListener("touchstart",S,{passive:!1}),t.onUnmounted(()=>{n.removeEventListener("touchstart",o),l.removeEventListener("touchstart",S)}))}),t.watch(a,o=>{if(o){let n=null;const l=x=>{const{dragging:B,pageY:q,startTop:$}=w.value;n&&cancelAnimationFrame(n);const z=g.value.getBoundingClientRect(),j=e.containerSize/(e.horizontal?z.width:z.height);if(B){const E=(L(x,e.horizontal||!1)-(q||0))*j;let p=$||0;!h.value&&e.horizontal?p-=E:p+=E;const R=b.value,T=M.value,Y=T?p/T:0;let s=Math.ceil(Y*R);s=Math.max(s,0),s=Math.min(s,R),n=requestAnimationFrame(()=>{e.onScroll(s,e.horizontal)})}},r=()=>{a.value=!1,e.onStopMove()};window.addEventListener("mousemove",l,{passive:!0}),window.addEventListener("touchmove",l,{passive:!0}),window.addEventListener("mouseup",r,{passive:!0}),window.addEventListener("touchend",r,{passive:!0}),t.onUnmounted(()=>{window.removeEventListener("mousemove",l),window.removeEventListener("touchmove",l),window.removeEventListener("mouseup",r),window.removeEventListener("touchend",r),n&&cancelAnimationFrame(n)})}}),t.watch(()=>e.scrollOffset,()=>{m()}),t.onUnmounted(()=>{i&&clearTimeout(i)}),c({delayHidden:m}),()=>{const o=`${e.prefixCls}-scrollbar`,n={position:"absolute",visibility:f.value?void 0:"hidden"},l={position:"absolute",borderRadius:"99px",background:"var(--vc-virtual-list-scrollbar-bg, rgba(0, 0, 0, 0.5))",cursor:"pointer",userSelect:"none"};return e.horizontal?(Object.assign(n,{height:"8px",left:0,right:0,bottom:0}),Object.assign(l,{height:"100%",width:`${e.spinSize}px`,[h.value?"left":"right"]:`${u.value}px`})):(Object.assign(n,{width:"8px",top:0,bottom:0,[h.value?"right":"left"]:0}),Object.assign(l,{width:"100%",height:`${e.spinSize}px`,top:`${u.value}px`})),t.createVNode("div",{ref:g,class:[o,{[`${o}-horizontal`]:e.horizontal,[`${o}-vertical`]:!e.horizontal,[`${o}-visible`]:f.value}],style:{...n,...e.style},onMousedown:O,onMousemove:m},[t.createVNode("div",{ref:y,class:[`${o}-thumb`,{[`${o}-thumb-moving`]:a.value}],style:{...l,...e.thumbStyle},onMousedown:S},null)])}}});exports.default=C;
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+let __v_c_util_dist_raf = require("@v-c/util/dist/raf");
+__v_c_util_dist_raf = require_rolldown_runtime.__toESM(__v_c_util_dist_raf);
+function getPageXY(e, horizontal) {
+	return ("touches" in e ? e.touches[0] : e)[horizontal ? "pageX" : "pageY"] - window[horizontal ? "scrollX" : "scrollY"];
+}
+var ScrollBar_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	props: {
+		prefixCls: {
+			type: String,
+			required: true,
+			default: void 0
+		},
+		scrollOffset: {
+			type: Number,
+			required: true,
+			default: void 0
+		},
+		scrollRange: {
+			type: Number,
+			required: true,
+			default: void 0
+		},
+		rtl: {
+			type: Boolean,
+			required: true,
+			default: void 0
+		},
+		onScroll: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		onStartMove: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		onStopMove: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		horizontal: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		thumbStyle: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		spinSize: {
+			type: Number,
+			required: true,
+			default: void 0
+		},
+		containerSize: {
+			type: Number,
+			required: true,
+			default: void 0
+		},
+		showScrollBar: {
+			type: [Boolean, String],
+			required: false,
+			default: void 0
+		}
+	},
+	name: "ScrollBar",
+	setup(props, { expose }) {
+		const dragging = (0, vue.ref)(false);
+		const pageXY = (0, vue.ref)(null);
+		const startTop = (0, vue.ref)(null);
+		const isLTR = (0, vue.computed)(() => !props.rtl);
+		const scrollbarRef = (0, vue.shallowRef)();
+		const thumbRef = (0, vue.shallowRef)();
+		const visible = (0, vue.ref)(props.showScrollBar === "optional" ? true : props.showScrollBar);
+		let visibleTimeout = null;
+		const delayHidden = () => {
+			if (props.showScrollBar === true || props.showScrollBar === false) return;
+			if (visibleTimeout) clearTimeout(visibleTimeout);
+			visible.value = true;
+			visibleTimeout = setTimeout(() => {
+				visible.value = false;
+			}, 3e3);
+		};
+		const enableScrollRange = (0, vue.computed)(() => props.scrollRange - props.containerSize || 0);
+		const enableOffsetRange = (0, vue.computed)(() => props.containerSize - props.spinSize || 0);
+		const top = (0, vue.computed)(() => {
+			if (props.scrollOffset === 0 || enableScrollRange.value === 0) return 0;
+			return props.scrollOffset / enableScrollRange.value * enableOffsetRange.value;
+		});
+		const stateRef = (0, vue.shallowRef)({
+			top: top.value,
+			dragging: dragging.value,
+			pageY: pageXY.value,
+			startTop: startTop.value
+		});
+		(0, vue.watch)([
+			top,
+			dragging,
+			pageXY,
+			startTop
+		], () => {
+			stateRef.value = {
+				top: top.value,
+				dragging: dragging.value,
+				pageY: pageXY.value,
+				startTop: startTop.value
+			};
+		});
+		const onContainerMouseDown = (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+		};
+		const onThumbMouseDown = (e) => {
+			dragging.value = true;
+			pageXY.value = getPageXY(e, props.horizontal || false);
+			startTop.value = stateRef.value.top;
+			props?.onStartMove?.();
+			e.stopPropagation();
+			e.preventDefault();
+		};
+		(0, vue.onMounted)(() => {
+			const onScrollbarTouchStart = (e) => {
+				e.preventDefault();
+			};
+			const scrollbarEle = scrollbarRef.value;
+			const thumbEle = thumbRef.value;
+			if (scrollbarEle && thumbEle) {
+				scrollbarEle.addEventListener("touchstart", onScrollbarTouchStart, { passive: false });
+				thumbEle.addEventListener("touchstart", onThumbMouseDown, { passive: false });
+				(0, vue.onUnmounted)(() => {
+					scrollbarEle.removeEventListener("touchstart", onScrollbarTouchStart);
+					thumbEle.removeEventListener("touchstart", onThumbMouseDown);
+				});
+			}
+		});
+		(0, vue.watch)(dragging, (isDragging, _O, onCleanup) => {
+			if (isDragging) {
+				let moveRafId = null;
+				const onMouseMove = (e) => {
+					const { dragging: stateDragging, pageY: statePageY, startTop: stateStartTop } = stateRef.value;
+					__v_c_util_dist_raf.default.cancel(moveRafId);
+					const rect = scrollbarRef.value.getBoundingClientRect();
+					const scale = props.containerSize / (props.horizontal ? rect.width : rect.height);
+					if (stateDragging) {
+						const offset = (getPageXY(e, props.horizontal || false) - (statePageY || 0)) * scale;
+						let newTop = stateStartTop || 0;
+						if (!isLTR.value && props.horizontal) newTop -= offset;
+						else newTop += offset;
+						const tmpEnableScrollRange = enableScrollRange.value;
+						const tmpEnableOffsetRange = enableOffsetRange.value;
+						const ptg = tmpEnableOffsetRange ? newTop / tmpEnableOffsetRange : 0;
+						let newScrollTop = Math.ceil(ptg * tmpEnableScrollRange);
+						newScrollTop = Math.max(newScrollTop, 0);
+						newScrollTop = Math.min(newScrollTop, tmpEnableScrollRange);
+						moveRafId = (0, __v_c_util_dist_raf.default)(() => {
+							props?.onScroll?.(newScrollTop, props.horizontal);
+						});
+					}
+				};
+				const onMouseUp = () => {
+					dragging.value = false;
+					props.onStopMove();
+				};
+				window.addEventListener("mousemove", onMouseMove, { passive: true });
+				window.addEventListener("touchmove", onMouseMove, { passive: true });
+				window.addEventListener("mouseup", onMouseUp, { passive: true });
+				window.addEventListener("touchend", onMouseUp, { passive: true });
+				onCleanup(() => {
+					window.removeEventListener("mousemove", onMouseMove);
+					window.removeEventListener("touchmove", onMouseMove);
+					window.removeEventListener("mouseup", onMouseUp);
+					window.removeEventListener("touchend", onMouseUp);
+					__v_c_util_dist_raf.default.cancel(moveRafId);
+				});
+			}
+		});
+		(0, vue.watch)(() => props.scrollOffset, (_n, _o, onCleanup) => {
+			delayHidden();
+			onCleanup(() => {
+				if (visibleTimeout) clearTimeout(visibleTimeout);
+			});
+		});
+		expose({ delayHidden });
+		return () => {
+			const { prefixCls, horizontal } = props;
+			const scrollbarPrefixCls = `${prefixCls}-scrollbar`;
+			const containerStyle = {
+				position: "absolute",
+				visibility: visible.value ? void 0 : "hidden"
+			};
+			const thumbStyle = {
+				position: "absolute",
+				borderRadius: "99px",
+				background: "var(--vc-virtual-list-scrollbar-bg, rgba(0, 0, 0, 0.5))",
+				cursor: "pointer",
+				userSelect: "none"
+			};
+			if (props.horizontal) {
+				Object.assign(containerStyle, {
+					height: "8px",
+					left: 0,
+					right: 0,
+					bottom: 0
+				});
+				Object.assign(thumbStyle, {
+					height: "100%",
+					width: `${props.spinSize}px`,
+					[isLTR.value ? "left" : "right"]: `${top.value}px`
+				});
+			} else {
+				Object.assign(containerStyle, {
+					width: "8px",
+					top: 0,
+					bottom: 0,
+					[isLTR.value ? "right" : "left"]: 0
+				});
+				Object.assign(thumbStyle, {
+					width: "100%",
+					height: `${props.spinSize}px`,
+					top: `${top.value}px`
+				});
+			}
+			return (0, vue.createVNode)("div", {
+				"ref": scrollbarRef,
+				"class": [scrollbarPrefixCls, {
+					[`${scrollbarPrefixCls}-horizontal`]: horizontal,
+					[`${scrollbarPrefixCls}-vertical`]: !horizontal,
+					[`${scrollbarPrefixCls}-visible`]: visible.value
+				}],
+				"style": {
+					...containerStyle,
+					...props.style
+				},
+				"onMousedown": onContainerMouseDown,
+				"onMousemove": delayHidden
+			}, [(0, vue.createVNode)("div", {
+				"ref": thumbRef,
+				"class": [`${scrollbarPrefixCls}-thumb`, { [`${scrollbarPrefixCls}-thumb-moving`]: dragging.value }],
+				"style": {
+					...thumbStyle,
+					...props.thumbStyle
+				},
+				"onMousedown": onThumbMouseDown
+			}, null)]);
+		};
+	}
+});
+exports.default = ScrollBar_default;

package/dist/ScrollBar.d.ts

@@ -1,4 +1,5 @@
-import { CSSProperties, PropType } from 'vue';
+import { CSSProperties } from 'vue';
+export type ScrollBarDirectionType = 'ltr' | 'rtl';
 export interface ScrollBarProps {
     prefixCls: string;
     scrollOffset: number;
@@ -17,100 +18,5 @@ export interface ScrollBarProps {
 export interface ScrollBarRef {
     delayHidden: () => void;
 }
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    prefixCls: {
-        type: StringConstructor;
-        required: true;
-    };
-    scrollOffset: {
-        type: NumberConstructor;
-        required: true;
-    };
-    scrollRange: {
-        type: NumberConstructor;
-        required: true;
-    };
-    rtl: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onScroll: {
-        type: PropType<(scrollOffset: number, horizontal?: boolean) => void>;
-        required: true;
-    };
-    onStartMove: {
-        type: PropType<() => void>;
-        required: true;
-    };
-    onStopMove: {
-        type: PropType<() => void>;
-        required: true;
-    };
-    horizontal: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    style: PropType<CSSProperties>;
-    thumbStyle: PropType<CSSProperties>;
-    spinSize: {
-        type: NumberConstructor;
-        required: true;
-    };
-    containerSize: {
-        type: NumberConstructor;
-        required: true;
-    };
-    showScrollBar: {
-        type: PropType<boolean | "optional">;
-    };
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    prefixCls: {
-        type: StringConstructor;
-        required: true;
-    };
-    scrollOffset: {
-        type: NumberConstructor;
-        required: true;
-    };
-    scrollRange: {
-        type: NumberConstructor;
-        required: true;
-    };
-    rtl: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    onScroll: {
-        type: PropType<(scrollOffset: number, horizontal?: boolean) => void>;
-        required: true;
-    };
-    onStartMove: {
-        type: PropType<() => void>;
-        required: true;
-    };
-    onStopMove: {
-        type: PropType<() => void>;
-        required: true;
-    };
-    horizontal: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    style: PropType<CSSProperties>;
-    thumbStyle: PropType<CSSProperties>;
-    spinSize: {
-        type: NumberConstructor;
-        required: true;
-    };
-    containerSize: {
-        type: NumberConstructor;
-        required: true;
-    };
-    showScrollBar: {
-        type: PropType<boolean | "optional">;
-    };
-}>> & Readonly<{}>, {
-    rtl: boolean;
-    horizontal: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: import('vue').DefineComponent<ScrollBarProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ScrollBarProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;