@v-c/virtual-list 0.0.1 → 1.0.0

package/dist/ScrollBar.js

@@ -1,193 +1,256 @@
-import { defineComponent as X, ref as f, computed as g, shallowRef as z, watch as E, onMounted as A, onUnmounted as M, createVNode as $ } from "vue";
-function q(e, u) {
-  return ("touches" in e ? e.touches[0] : e)[u ? "pageX" : "pageY"] - window[u ? "scrollX" : "scrollY"];
+import { computed, createVNode, defineComponent, onMounted, onUnmounted, ref, shallowRef, watch } from "vue";
+import raf from "@v-c/util/dist/raf";
+function getPageXY(e, horizontal) {
+	return ("touches" in e ? e.touches[0] : e)[horizontal ? "pageX" : "pageY"] - window[horizontal ? "scrollX" : "scrollY"];
 }
-const k = /* @__PURE__ */ X({
-  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: u
-  }) {
-    const l = f(!1), c = f(null), v = f(null), h = g(() => !e.rtl), m = z(), R = z(), d = f(e.showScrollBar === "optional" ? !0 : e.showScrollBar);
-    let r = null;
-    const b = () => {
-      e.showScrollBar === !0 || e.showScrollBar === !1 || (r && clearTimeout(r), d.value = !0, r = setTimeout(() => {
-        d.value = !1;
-      }, 3e3));
-    }, w = g(() => e.scrollRange - e.containerSize || 0), T = g(() => e.containerSize - e.spinSize || 0), i = g(() => e.scrollOffset === 0 || w.value === 0 ? 0 : e.scrollOffset / w.value * T.value), S = z({
-      top: i.value,
-      dragging: l.value,
-      pageY: c.value,
-      startTop: v.value
-    });
-    E([i, l, c, v], () => {
-      S.value = {
-        top: i.value,
-        dragging: l.value,
-        pageY: c.value,
-        startTop: v.value
-      };
-    });
-    const j = (t) => {
-      t.stopPropagation(), t.preventDefault();
-    }, p = (t) => {
-      l.value = !0, c.value = q(t, e.horizontal || !1), v.value = S.value.top, e.onStartMove(), t.stopPropagation(), t.preventDefault();
-    };
-    return A(() => {
-      const t = (a) => {
-        a.preventDefault();
-      }, o = m.value, n = R.value;
-      o && n && (o.addEventListener("touchstart", t, {
-        passive: !1
-      }), n.addEventListener("touchstart", p, {
-        passive: !1
-      }), M(() => {
-        o.removeEventListener("touchstart", t), n.removeEventListener("touchstart", p);
-      }));
-    }), E(l, (t) => {
-      if (t) {
-        let o = null;
-        const n = (Y) => {
-          const {
-            dragging: C,
-            pageY: D,
-            startTop: F
-          } = S.value;
-          o && cancelAnimationFrame(o);
-          const L = m.value.getBoundingClientRect(), N = e.containerSize / (e.horizontal ? L.width : L.height);
-          if (C) {
-            const x = (q(Y, e.horizontal || !1) - (D || 0)) * N;
-            let y = F || 0;
-            !h.value && e.horizontal ? y -= x : y += x;
-            const O = w.value, B = T.value, P = B ? y / B : 0;
-            let s = Math.ceil(P * O);
-            s = Math.max(s, 0), s = Math.min(s, O), o = requestAnimationFrame(() => {
-              e.onScroll(s, e.horizontal);
-            });
-          }
-        }, a = () => {
-          l.value = !1, e.onStopMove();
-        };
-        window.addEventListener("mousemove", n, {
-          passive: !0
-        }), window.addEventListener("touchmove", n, {
-          passive: !0
-        }), window.addEventListener("mouseup", a, {
-          passive: !0
-        }), window.addEventListener("touchend", a, {
-          passive: !0
-        }), M(() => {
-          window.removeEventListener("mousemove", n), window.removeEventListener("touchmove", n), window.removeEventListener("mouseup", a), window.removeEventListener("touchend", a), o && cancelAnimationFrame(o);
-        });
-      }
-    }), E(() => e.scrollOffset, () => {
-      b();
-    }), M(() => {
-      r && clearTimeout(r);
-    }), u({
-      delayHidden: b
-    }), () => {
-      const t = `${e.prefixCls}-scrollbar`, o = {
-        position: "absolute",
-        visibility: d.value ? void 0 : "hidden"
-      }, n = {
-        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(o, {
-        height: "8px",
-        left: 0,
-        right: 0,
-        bottom: 0
-      }), Object.assign(n, {
-        height: "100%",
-        width: `${e.spinSize}px`,
-        [h.value ? "left" : "right"]: `${i.value}px`
-      })) : (Object.assign(o, {
-        width: "8px",
-        top: 0,
-        bottom: 0,
-        [h.value ? "right" : "left"]: 0
-      }), Object.assign(n, {
-        width: "100%",
-        height: `${e.spinSize}px`,
-        top: `${i.value}px`
-      })), $("div", {
-        ref: m,
-        class: [t, {
-          [`${t}-horizontal`]: e.horizontal,
-          [`${t}-vertical`]: !e.horizontal,
-          [`${t}-visible`]: d.value
-        }],
-        style: {
-          ...o,
-          ...e.style
-        },
-        onMousedown: j,
-        onMousemove: b
-      }, [$("div", {
-        ref: R,
-        class: [`${t}-thumb`, {
-          [`${t}-thumb-moving`]: l.value
-        }],
-        style: {
-          ...n,
-          ...e.thumbStyle
-        },
-        onMousedown: p
-      }, null)]);
-    };
-  }
+var ScrollBar_default = /* @__PURE__ */ 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 = ref(false);
+		const pageXY = ref(null);
+		const startTop = ref(null);
+		const isLTR = computed(() => !props.rtl);
+		const scrollbarRef = shallowRef();
+		const thumbRef = shallowRef();
+		const visible = 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 = computed(() => props.scrollRange - props.containerSize || 0);
+		const enableOffsetRange = computed(() => props.containerSize - props.spinSize || 0);
+		const top = computed(() => {
+			if (props.scrollOffset === 0 || enableScrollRange.value === 0) return 0;
+			return props.scrollOffset / enableScrollRange.value * enableOffsetRange.value;
+		});
+		const stateRef = shallowRef({
+			top: top.value,
+			dragging: dragging.value,
+			pageY: pageXY.value,
+			startTop: startTop.value
+		});
+		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();
+		};
+		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 });
+				onUnmounted(() => {
+					scrollbarEle.removeEventListener("touchstart", onScrollbarTouchStart);
+					thumbEle.removeEventListener("touchstart", onThumbMouseDown);
+				});
+			}
+		});
+		watch(dragging, (isDragging, _O, onCleanup) => {
+			if (isDragging) {
+				let moveRafId = null;
+				const onMouseMove = (e) => {
+					const { dragging: stateDragging, pageY: statePageY, startTop: stateStartTop } = stateRef.value;
+					raf.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 = raf(() => {
+							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);
+					raf.cancel(moveRafId);
+				});
+			}
+		});
+		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 createVNode("div", {
+				"ref": scrollbarRef,
+				"class": [scrollbarPrefixCls, {
+					[`${scrollbarPrefixCls}-horizontal`]: horizontal,
+					[`${scrollbarPrefixCls}-vertical`]: !horizontal,
+					[`${scrollbarPrefixCls}-visible`]: visible.value
+				}],
+				"style": {
+					...containerStyle,
+					...props.style
+				},
+				"onMousedown": onContainerMouseDown,
+				"onMousemove": delayHidden
+			}, [createVNode("div", {
+				"ref": thumbRef,
+				"class": [`${scrollbarPrefixCls}-thumb`, { [`${scrollbarPrefixCls}-thumb-moving`]: dragging.value }],
+				"style": {
+					...thumbStyle,
+					...props.thumbStyle
+				},
+				"onMousedown": onThumbMouseDown
+			}, null)]);
+		};
+	}
 });
-export {
-  k as default
-};
+export { ScrollBar_default as default };

package/dist/_virtual/rolldown_runtime.cjs

@@ -0,0 +1,21 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+exports.__toESM = __toESM;

package/dist/hooks/useDiffItem.cjs

@@ -1 +1,19 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue");function d(i,u){const r=t.ref([]),o=t.ref();return t.watch(i,e=>{const f=r.value;if(e!==f){const s=e.find(n=>{const a=u(n);return!f.some(c=>u(c)===a)});o.value=s,r.value=e}},{immediate:!0}),o}exports.default=d;
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let vue = require("vue");
+function useDiffItem(data, getKey) {
+	const prevDataRef = (0, vue.ref)([]);
+	const diffItem = (0, vue.ref)();
+	(0, vue.watch)(data, (newData) => {
+		const prevData = prevDataRef.value;
+		if (newData !== prevData) {
+			diffItem.value = newData.find((item) => {
+				const key = getKey(item);
+				return !prevData.some((prevItem) => getKey(prevItem) === key);
+			});
+			prevDataRef.value = newData;
+		}
+	}, { immediate: true });
+	return diffItem;
+}
+exports.default = useDiffItem;

package/dist/hooks/useDiffItem.js

@@ -1,21 +1,17 @@
-import { ref as u, watch as c } from "vue";
-function v(a, t) {
-  const f = u([]), r = u();
-  return c(
-    a,
-    (e) => {
-      const o = f.value;
-      if (e !== o) {
-        const i = e.find((m) => {
-          const n = t(m);
-          return !o.some((s) => t(s) === n);
-        });
-        r.value = i, f.value = e;
-      }
-    },
-    { immediate: !0 }
-  ), r;
+import { ref, watch } from "vue";
+function useDiffItem(data, getKey) {
+	const prevDataRef = ref([]);
+	const diffItem = ref();
+	watch(data, (newData) => {
+		const prevData = prevDataRef.value;
+		if (newData !== prevData) {
+			diffItem.value = newData.find((item) => {
+				const key = getKey(item);
+				return !prevData.some((prevItem) => getKey(prevItem) === key);
+			});
+			prevDataRef.value = newData;
+		}
+	}, { immediate: true });
+	return diffItem;
 }
-export {
-  v as default
-};
+export { useDiffItem as default };

package/dist/hooks/useFrameWheel.cjs

@@ -1 +1,63 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("vue"),F=require("../utils/isFirefox.cjs"),X=require("./useOriginScroll.cjs");function _(c,h,b,g,x,A,v){const r=i.ref(0);let a=null;const m=i.ref(null),d=i.ref(!1),M=X.default(h,b,g,x);function S(e,l){if(a&&cancelAnimationFrame(a),M(!1,l))return;const t=e;if(!t._virtualHandled)t._virtualHandled=!0;else return;r.value+=l,m.value=l,F.default||t.preventDefault(),a=requestAnimationFrame(()=>{const o=d.value?10:1;v(r.value*o,!1),r.value=0})}function p(e,l){v(l,!0),F.default||e.preventDefault()}const n=i.ref(null);let u=null;function q(e){if(!c.value)return;u&&cancelAnimationFrame(u),u=requestAnimationFrame(()=>{n.value=null});const{deltaX:l,deltaY:t,shiftKey:o}=e;let f=l,s=t;(n.value==="sx"||!n.value&&o&&t&&!l)&&(f=t,s=0,n.value="sx");const y=Math.abs(f),R=Math.abs(s);n.value===null&&(n.value=A&&y>R?"x":"y"),n.value==="y"?S(e,s):p(e,f)}function D(e){c.value&&(d.value=e.detail===m.value)}return i.onUnmounted(()=>{a&&cancelAnimationFrame(a),u&&cancelAnimationFrame(u)}),[q,D]}exports.default=_;
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+const require_isFirefox = require("../utils/isFirefox.cjs");
+const require_useOriginScroll = require("./useOriginScroll.cjs");
+let vue = require("vue");
+function useFrameWheel(inVirtual, isScrollAtTop, isScrollAtBottom, isScrollAtLeft, isScrollAtRight, horizontalScroll, onWheelDelta) {
+	const offsetRef = (0, vue.ref)(0);
+	let nextFrame = null;
+	const wheelValueRef = (0, vue.ref)(null);
+	const isMouseScrollRef = (0, vue.ref)(false);
+	const originScroll = require_useOriginScroll.default(isScrollAtTop, isScrollAtBottom, isScrollAtLeft, isScrollAtRight);
+	function onWheelY(e, deltaY) {
+		if (nextFrame) cancelAnimationFrame(nextFrame);
+		if (originScroll(false, deltaY)) return;
+		const event = e;
+		if (!event._virtualHandled) event._virtualHandled = true;
+		else return;
+		offsetRef.value += deltaY;
+		wheelValueRef.value = deltaY;
+		if (!require_isFirefox.default) event.preventDefault();
+		nextFrame = requestAnimationFrame(() => {
+			const patchMultiple = isMouseScrollRef.value ? 10 : 1;
+			onWheelDelta(offsetRef.value * patchMultiple, false);
+			offsetRef.value = 0;
+		});
+	}
+	function onWheelX(event, deltaX) {
+		onWheelDelta(deltaX, true);
+		if (!require_isFirefox.default) event.preventDefault();
+	}
+	const wheelDirectionRef = (0, vue.ref)(null);
+	let wheelDirectionClean = null;
+	function onWheel(event) {
+		if (!inVirtual.value) return;
+		if (wheelDirectionClean) cancelAnimationFrame(wheelDirectionClean);
+		wheelDirectionClean = requestAnimationFrame(() => {
+			wheelDirectionRef.value = null;
+		});
+		const { deltaX, deltaY, shiftKey } = event;
+		let mergedDeltaX = deltaX;
+		let mergedDeltaY = deltaY;
+		if (wheelDirectionRef.value === "sx" || !wheelDirectionRef.value && (shiftKey || false) && deltaY && !deltaX) {
+			mergedDeltaX = deltaY;
+			mergedDeltaY = 0;
+			wheelDirectionRef.value = "sx";
+		}
+		const absX = Math.abs(mergedDeltaX);
+		const absY = Math.abs(mergedDeltaY);
+		if (wheelDirectionRef.value === null) wheelDirectionRef.value = horizontalScroll && absX > absY ? "x" : "y";
+		if (wheelDirectionRef.value === "y") onWheelY(event, mergedDeltaY);
+		else onWheelX(event, mergedDeltaX);
+	}
+	function onFireFoxScroll(event) {
+		if (!inVirtual.value) return;
+		isMouseScrollRef.value = event.detail === wheelValueRef.value;
+	}
+	(0, vue.onUnmounted)(() => {
+		if (nextFrame) cancelAnimationFrame(nextFrame);
+		if (wheelDirectionClean) cancelAnimationFrame(wheelDirectionClean);
+	});
+	return [onWheel, onFireFoxScroll];
+}
+exports.default = useFrameWheel;