pxd 0.0.64 → 0.1.3

package/dist/components/scrollable/index.vue

@@ -1,34 +1,86 @@
 <script setup>
 import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
-import { useMutationObserver, useResizeObserver } from "../../composables/use-browser-observer";
-import { getStyle } from "../../utils/dom";
-import { cachedOff, cachedOn, off, once } from "../../utils/event";
-import { raf } from "../../utils/event";
-import { isServer } from "../../utils/is";
-import { throttleByRaf } from "../../utils/timing";
+import { useMutationObserver } from "../../composables/use-mutation-observer.js";
+import { useResizeObserver } from "../../composables/use-resize-observer.js";
+import { getStyle } from "../../utils/dom.js";
+import { cachedOff, cachedOn, off, once } from "../../utils/event.js";
+import { raf, throttleByRaf } from "../../utils/event.js";
+import { isServer } from "../../utils/is.js";
 import PFader from "../fader/index.vue";
 defineOptions({
-  name: "PScrollable",
-  inheritAttrs: false
+	name: "PScrollable",
+	inheritAttrs: false
 });
 const props = defineProps({
-  fader: { type: Boolean, required: false, default: true },
-  loading: { type: Boolean, required: false },
-  scrollbar: { type: Boolean, required: false, default: true },
-  faderSize: { type: Number, required: false },
-  faderColor: { type: String, required: false },
-  faderDirection: { type: String, required: false },
-  wrapperClass: { type: [String, Array, Object], required: false },
-  contentClass: { type: [String, Array, Object], required: false },
-  contentStyle: { type: [Object, String], required: false },
-  scrollbarSize: { type: Number, required: false },
-  scrollbarColor: { type: String, required: false },
-  scrollbarHoverColor: { type: String, required: false },
-  bottomThreshold: { type: Number, required: false, default: 10 }
+	fader: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	loading: {
+		type: Boolean,
+		required: false
+	},
+	scrollbar: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	faderSize: {
+		type: Number,
+		required: false
+	},
+	faderColor: {
+		type: String,
+		required: false
+	},
+	faderDirection: {
+		type: String,
+		required: false
+	},
+	wrapperClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	contentClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	contentStyle: {
+		type: [Object, String],
+		required: false
+	},
+	scrollbarSize: {
+		type: Number,
+		required: false
+	},
+	scrollbarColor: {
+		type: String,
+		required: false
+	},
+	scrollbarHoverColor: {
+		type: String,
+		required: false
+	},
+	bottomThreshold: {
+		type: Number,
+		required: false,
+		default: 10
+	}
 });
 const emits = defineEmits(["scroll", "bottom"]);
 const wrapperRef = shallowRef();
 const contentRef = shallowRef();
+// Avoid using ref to guarantee all states to ensure that
+// computed will not cause meaningless updates when the state changes.
 const isScrollableX = shallowRef(false);
 const isScrollableY = shallowRef(false);
 const verticalThumbTop = shallowRef(0);
@@ -39,247 +91,254 @@ const MIN_THUMB = 30;
 let triggerRightFired = false;
 let triggerBottomFired = false;
 let dragState = {
-  isDragging: false,
-  direction: null,
-  startClientPos: 0,
-  startThumbPos: 0
+	isDragging: false,
+	direction: null,
+	startClientPos: 0,
+	startThumbPos: 0
 };
 let cachedPadding = {
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0
+	top: 0,
+	bottom: 0,
+	left: 0,
+	right: 0
 };
 const computedStyle = computed(() => {
-  return {
-    "--scrollbar-size": props.scrollbarSize,
-    "--scrollbar-color": props.scrollbarColor,
-    "--scrollbar-hover-color": props.scrollbarHoverColor
-  };
+	return {
+		"--scrollbar-size": props.scrollbarSize,
+		"--scrollbar-color": props.scrollbarColor,
+		"--scrollbar-hover-color": props.scrollbarHoverColor
+	};
 });
 const verticalThumbStyle = computed(() => ({
-  height: `${verticalThumbHeight.value}px`,
-  transform: `translateY(${verticalThumbTop.value}px)`
+	height: `${verticalThumbHeight.value}px`,
+	transform: `translateY(${verticalThumbTop.value}px)`
 }));
 const horizontalThumbStyle = computed(() => ({
-  width: `${horizontalThumbWidth.value}px`,
-  transform: `translateX(${horizontalThumbLeft.value}px)`
+	width: `${horizontalThumbWidth.value}px`,
+	transform: `translateX(${horizontalThumbLeft.value}px)`
 }));
 function updateScrollbarMetrics() {
-  if (!props.scrollbar) {
-    return;
-  }
-  const contentEl = contentRef.value;
-  if (!contentEl || !contentEl.isConnected) {
-    return;
-  }
-  const { top: pt, bottom: pb, left: pl, right: pr } = cachedPadding;
-  const {
-    clientWidth: clientW,
-    clientHeight: clientH,
-    scrollWidth: scrollW,
-    scrollHeight: scrollH
-  } = contentEl;
-  const trackW = wrapperRef.value.clientWidth ?? clientW;
-  const trackH = wrapperRef.value.clientHeight ?? clientH;
-  const effClientW = Math.max(0, clientW - pl - pr);
-  const effClientH = Math.max(0, clientH - pt - pb);
-  const effScrollW = Math.max(effClientW, scrollW - pl - pr);
-  const effScrollH = Math.max(effClientH, scrollH - pt - pb);
-  const _isScrollableX = effScrollW > effClientW;
-  const _isScrollableY = effScrollH > effClientH;
-  const verticalRatio = effScrollH > 0 ? effClientH / effScrollH : 0;
-  const horizontalRatio = effScrollW > 0 ? effClientW / effScrollW : 0;
-  const _verticalThumbHeight = Math.max(Math.round(trackH * verticalRatio), MIN_THUMB);
-  const _horizontalThumbWidth = Math.max(Math.round(trackW * horizontalRatio), MIN_THUMB);
-  const scrollableWidth = Math.max(0, trackW - _horizontalThumbWidth);
-  const scrollableHeight = Math.max(0, trackH - _verticalThumbHeight);
-  const maxScrollX = Math.max(1, scrollW - clientW);
-  const maxScrollY = Math.max(1, scrollH - clientH);
-  const verticalScrollPercentage = Math.min(1, Math.max(0, contentEl.scrollTop / maxScrollY));
-  const horizontalScrollPercentage = Math.min(1, Math.max(0, contentEl.scrollLeft / maxScrollX));
-  const _verticalThumbTop = verticalScrollPercentage * scrollableHeight;
-  const _horizontalThumbLeft = horizontalScrollPercentage * scrollableWidth;
-  isScrollableX.value = _isScrollableX;
-  isScrollableY.value = _isScrollableY;
-  verticalThumbHeight.value = _verticalThumbHeight;
-  horizontalThumbWidth.value = _horizontalThumbWidth;
-  verticalThumbTop.value = _verticalThumbTop;
-  horizontalThumbLeft.value = _horizontalThumbLeft;
+	if (!props.scrollbar) {
+		return;
+	}
+	const contentEl = contentRef.value;
+	if (!contentEl || !contentEl.isConnected) {
+		return;
+	}
+	const { top: pt, bottom: pb, left: pl, right: pr } = cachedPadding;
+	const { clientWidth: clientW, clientHeight: clientH, scrollWidth: scrollW, scrollHeight: scrollH } = contentEl;
+	// Track size uses the wrapper's padding-box so outer padding is accounted for.
+	const trackW = wrapperRef.value.clientWidth ?? clientW;
+	const trackH = wrapperRef.value.clientHeight ?? clientH;
+	const effClientW = Math.max(0, clientW - pl - pr);
+	const effClientH = Math.max(0, clientH - pt - pb);
+	const effScrollW = Math.max(effClientW, scrollW - pl - pr);
+	const effScrollH = Math.max(effClientH, scrollH - pt - pb);
+	// Scrollability and ratios use effective sizes, while thumb pixels use track size.
+	const _isScrollableX = effScrollW > effClientW;
+	const _isScrollableY = effScrollH > effClientH;
+	const verticalRatio = effScrollH > 0 ? effClientH / effScrollH : 0;
+	const horizontalRatio = effScrollW > 0 ? effClientW / effScrollW : 0;
+	const _verticalThumbHeight = Math.max(Math.round(trackH * verticalRatio), MIN_THUMB);
+	const _horizontalThumbWidth = Math.max(Math.round(trackW * horizontalRatio), MIN_THUMB);
+	const scrollableWidth = Math.max(0, trackW - _horizontalThumbWidth);
+	const scrollableHeight = Math.max(0, trackH - _verticalThumbHeight);
+	const maxScrollX = Math.max(1, scrollW - clientW);
+	const maxScrollY = Math.max(1, scrollH - clientH);
+	const verticalScrollPercentage = Math.min(1, Math.max(0, contentEl.scrollTop / maxScrollY));
+	const horizontalScrollPercentage = Math.min(1, Math.max(0, contentEl.scrollLeft / maxScrollX));
+	const _verticalThumbTop = verticalScrollPercentage * scrollableHeight;
+	const _horizontalThumbLeft = horizontalScrollPercentage * scrollableWidth;
+	isScrollableX.value = _isScrollableX;
+	isScrollableY.value = _isScrollableY;
+	verticalThumbHeight.value = _verticalThumbHeight;
+	horizontalThumbWidth.value = _horizontalThumbWidth;
+	verticalThumbTop.value = _verticalThumbTop;
+	horizontalThumbLeft.value = _horizontalThumbLeft;
 }
 const throttledUpdate = throttleByRaf(updateScrollbarMetrics);
 let lastScrollTop = 0;
 let lastScrollLeft = 0;
 let lastScrollInit = false;
 function onContainerScroll(ev) {
-  emits("scroll", ev);
-  if (props.scrollbar && !dragState.isDragging) {
-    throttledUpdate();
-  }
-  const el = contentRef.value;
-  if (!el) {
-    return;
-  }
-  if (props.loading) {
-    lastScrollTop = el.scrollTop;
-    lastScrollLeft = el.scrollLeft;
-    lastScrollInit = true;
-    return;
-  }
-  const currTop = el.scrollTop;
-  const currLeft = el.scrollLeft;
-  let movedY = false;
-  let movedX = false;
-  if (!lastScrollInit) {
-    lastScrollTop = currTop;
-    lastScrollLeft = currLeft;
-    lastScrollInit = true;
-  } else {
-    movedY = currTop !== lastScrollTop;
-    movedX = currLeft !== lastScrollLeft;
-  }
-  const threshold = props.bottomThreshold ?? 0;
-  if (movedY) {
-    const scrollBottom = Math.floor(currTop + el.clientHeight);
-    if (scrollBottom >= el.scrollHeight - threshold) {
-      if (!triggerBottomFired) {
-        triggerBottomFired = true;
-        emits("bottom", "vertical", ev);
-      }
-    } else {
-      triggerBottomFired = false;
-    }
-  } else if (movedX) {
-    const scrollRight = Math.floor(currLeft + el.clientWidth);
-    if (scrollRight >= el.scrollWidth - threshold) {
-      if (!triggerRightFired) {
-        triggerRightFired = true;
-        emits("bottom", "horizontal", ev);
-      }
-    } else {
-      triggerRightFired = false;
-    }
-  }
-  lastScrollTop = currTop;
-  lastScrollLeft = currLeft;
+	emits("scroll", ev);
+	if (props.scrollbar && !dragState.isDragging) {
+		throttledUpdate();
+	}
+	const el = contentRef.value;
+	if (!el) {
+		return;
+	}
+	if (props.loading) {
+		// While loading, only snapshot the position without firing end events.
+		lastScrollTop = el.scrollTop;
+		lastScrollLeft = el.scrollLeft;
+		lastScrollInit = true;
+		return;
+	}
+	const currTop = el.scrollTop;
+	const currLeft = el.scrollLeft;
+	let movedY = false;
+	let movedX = false;
+	if (!lastScrollInit) {
+		lastScrollTop = currTop;
+		lastScrollLeft = currLeft;
+		lastScrollInit = true;
+	} else {
+		movedY = currTop !== lastScrollTop;
+		movedX = currLeft !== lastScrollLeft;
+	}
+	const threshold = props.bottomThreshold ?? 0;
+	// Only run the end check for the direction that actually scrolled.
+	if (movedY) {
+		const scrollBottom = Math.floor(currTop + el.clientHeight);
+		if (scrollBottom >= el.scrollHeight - threshold) {
+			if (!triggerBottomFired) {
+				triggerBottomFired = true;
+				emits("bottom", "vertical", ev);
+			}
+		} else {
+			triggerBottomFired = false;
+		}
+	} else if (movedX) {
+		const scrollRight = Math.floor(currLeft + el.clientWidth);
+		if (scrollRight >= el.scrollWidth - threshold) {
+			if (!triggerRightFired) {
+				triggerRightFired = true;
+				emits("bottom", "horizontal", ev);
+			}
+		} else {
+			triggerRightFired = false;
+		}
+	}
+	lastScrollTop = currTop;
+	lastScrollLeft = currLeft;
 }
 function startDragVertical(e) {
-  e.preventDefault();
-  e.stopPropagation();
-  if (!contentRef.value) {
-    return;
-  }
-  dragState = {
-    isDragging: true,
-    direction: "vertical",
-    startClientPos: e.clientY,
-    startThumbPos: verticalThumbTop.value
-  };
-  cachedOn(document, "mousemove", onDragMove);
-  once(document, "mouseup", onEndDrag);
+	e.preventDefault();
+	e.stopPropagation();
+	if (!contentRef.value) {
+		return;
+	}
+	dragState = {
+		isDragging: true,
+		direction: "vertical",
+		startClientPos: e.clientY,
+		startThumbPos: verticalThumbTop.value
+	};
+	cachedOn(document, "mousemove", onDragMove);
+	once(document, "mouseup", onEndDrag);
 }
 function startDragHorizontal(e) {
-  e.preventDefault();
-  e.stopPropagation();
-  if (!contentRef.value) {
-    return;
-  }
-  dragState = {
-    isDragging: true,
-    direction: "horizontal",
-    startClientPos: e.clientX,
-    startThumbPos: horizontalThumbLeft.value
-  };
-  cachedOn(document, "mousemove", onDragMove);
-  once(document, "mouseup", onEndDrag);
+	e.preventDefault();
+	e.stopPropagation();
+	if (!contentRef.value) {
+		return;
+	}
+	dragState = {
+		isDragging: true,
+		direction: "horizontal",
+		startClientPos: e.clientX,
+		startThumbPos: horizontalThumbLeft.value
+	};
+	cachedOn(document, "mousemove", onDragMove);
+	once(document, "mouseup", onEndDrag);
 }
 function onDragMove(e) {
-  if (!dragState.isDragging || !dragState.direction) {
-    return;
-  }
-  const contentEl = contentRef.value;
-  if (!contentEl) {
-    return;
-  }
-  if (dragState.direction === "vertical") {
-    const trackH = wrapperRef.value.clientHeight ?? contentEl.clientHeight;
-    const thumbH = verticalThumbHeight.value;
-    const scrollableH = Math.max(0, trackH - thumbH);
-    const delta2 = e.clientY - dragState.startClientPos;
-    const newThumbTop = Math.max(0, Math.min(scrollableH, dragState.startThumbPos + delta2));
-    const maxScroll2 = Math.max(0, contentEl.scrollHeight - contentEl.clientHeight);
-    contentEl.scrollTop = scrollableH > 0 ? newThumbTop / scrollableH * maxScroll2 : 0;
-    verticalThumbTop.value = newThumbTop;
-    return;
-  }
-  const trackW = wrapperRef.value.clientWidth ?? contentEl.clientWidth;
-  const thumbW = horizontalThumbWidth.value;
-  const scrollableW = Math.max(0, trackW - thumbW);
-  const delta = e.clientX - dragState.startClientPos;
-  const newThumbLeft = Math.max(0, Math.min(scrollableW, dragState.startThumbPos + delta));
-  const maxScroll = Math.max(0, contentEl.scrollWidth - contentEl.clientWidth);
-  contentEl.scrollLeft = scrollableW > 0 ? newThumbLeft / scrollableW * maxScroll : 0;
-  horizontalThumbLeft.value = newThumbLeft;
+	if (!dragState.isDragging || !dragState.direction) {
+		return;
+	}
+	const contentEl = contentRef.value;
+	if (!contentEl) {
+		return;
+	}
+	if (dragState.direction === "vertical") {
+		const trackH = wrapperRef.value.clientHeight ?? contentEl.clientHeight;
+		const thumbH = verticalThumbHeight.value;
+		const scrollableH = Math.max(0, trackH - thumbH);
+		const delta = e.clientY - dragState.startClientPos;
+		const newThumbTop = Math.max(0, Math.min(scrollableH, dragState.startThumbPos + delta));
+		const maxScroll = Math.max(0, contentEl.scrollHeight - contentEl.clientHeight);
+		contentEl.scrollTop = scrollableH > 0 ? newThumbTop / scrollableH * maxScroll : 0;
+		verticalThumbTop.value = newThumbTop;
+		return;
+	}
+	const trackW = wrapperRef.value.clientWidth ?? contentEl.clientWidth;
+	const thumbW = horizontalThumbWidth.value;
+	const scrollableW = Math.max(0, trackW - thumbW);
+	const delta = e.clientX - dragState.startClientPos;
+	const newThumbLeft = Math.max(0, Math.min(scrollableW, dragState.startThumbPos + delta));
+	const maxScroll = Math.max(0, contentEl.scrollWidth - contentEl.clientWidth);
+	contentEl.scrollLeft = scrollableW > 0 ? newThumbLeft / scrollableW * maxScroll : 0;
+	horizontalThumbLeft.value = newThumbLeft;
 }
 function onEndDrag(ev) {
-  ev.stopPropagation();
-  dragState.isDragging = false;
-  dragState.direction = null;
-  cachedOff(document, "mousemove", onDragMove);
-  throttledUpdate.cancel();
-  raf(updateScrollbarMetrics);
+	ev.stopPropagation();
+	dragState.isDragging = false;
+	dragState.direction = null;
+	cachedOff(document, "mousemove", onDragMove);
+	throttledUpdate.cancel();
+	raf(updateScrollbarMetrics);
 }
 function scrollTo(top, left) {
-  if (!contentRef.value) {
-    return;
-  }
-  contentRef.value.scrollTo({ top, left });
+	if (!contentRef.value) {
+		return;
+	}
+	contentRef.value.scrollTo({
+		top,
+		left,
+		behavior: "instant"
+	});
 }
 if (props.scrollbar) {
-  useResizeObserver(wrapperRef, throttledUpdate);
-  useMutationObserver(contentRef, throttledUpdate, { childList: true, subtree: true });
+	useResizeObserver(wrapperRef, throttledUpdate);
+	useMutationObserver(contentRef, throttledUpdate, {
+		childList: true,
+		subtree: true
+	});
 }
 function getContainerPadding() {
-  const contentEl = contentRef.value;
-  if (!contentEl) {
-    return;
-  }
-  const { paddingTop, paddingRight, paddingBottom, paddingLeft } = getStyle(contentEl);
-  cachedPadding = {
-    top: Number.parseFloat(paddingTop) || 0,
-    bottom: Number.parseFloat(paddingBottom) || 0,
-    left: Number.parseFloat(paddingLeft) || 0,
-    right: Number.parseFloat(paddingRight) || 0
-  };
+	const contentEl = contentRef.value;
+	if (!contentEl) {
+		return;
+	}
+	const { paddingTop, paddingRight, paddingBottom, paddingLeft } = getStyle(contentEl);
+	cachedPadding = {
+		top: Number.parseFloat(paddingTop) || 0,
+		bottom: Number.parseFloat(paddingBottom) || 0,
+		left: Number.parseFloat(paddingLeft) || 0,
+		right: Number.parseFloat(paddingRight) || 0
+	};
 }
 function forceUpdate() {
-  throttledUpdate.cancel();
-  getContainerPadding();
-  updateScrollbarMetrics();
+	throttledUpdate.cancel();
+	getContainerPadding();
+	updateScrollbarMetrics();
 }
 onMounted(async () => {
-  if (isServer()) {
-    return;
-  }
-  if (!props.scrollbar && !props.fader) {
-    return;
-  }
-  getContainerPadding();
-  raf(updateScrollbarMetrics);
+	if (isServer()) {
+		return;
+	}
+	if (!props.scrollbar && !props.fader) {
+		return;
+	}
+	getContainerPadding();
+	raf(updateScrollbarMetrics);
 });
 onBeforeUnmount(() => {
-  throttledUpdate.cancel();
-  cachedOff(document, "mousemove", onDragMove);
-  off(document, "mouseup", onEndDrag);
+	throttledUpdate.cancel();
+	cachedOff(document, "mousemove", onDragMove);
+	off(document, "mouseup", onEndDrag);
 });
 defineExpose({
-  scrollTo,
-  forceUpdate
+	scrollTo,
+	forceUpdate
 });
 </script>
 
 <template>
   <div
+    data-scrollable
     ref="wrapperRef"
     class="pxd-scrollable group/scrollable relative flex flex-col overflow-hidden hover:[--o:1] pointer-fine:[--o:0]"
     :class="wrapperClass"
@@ -300,7 +359,7 @@ defineExpose({
       v-if="fader"
       :size="faderSize"
       :color="faderColor"
-      :container="contentRef"
+      :scroll-target="contentRef"
       :direction="faderDirection"
     />
 
@@ -311,7 +370,7 @@ defineExpose({
         class="pxd-scrollable--scrollbar-x left-0 right-0 bottom-0 absolute touch-none opacity-(--o) delay-1000 select-none group-hover/scrollable:delay-0 active:opacity-100 motion-safe:transition-opacity"
       >
         <div
-          class="pxd-scrollable--thumb h-inherit rounded-full hover:will-change-transform active:opacity-100 motion-safe:transition-colors"
+          class="pxd-scrollable--thumb h-inherit rounded-full group-hover/scrollable:will-change-transform active:opacity-100 motion-safe:transition-colors"
           :style="horizontalThumbStyle"
           @mousedown="startDragHorizontal"
         />
@@ -323,7 +382,7 @@ defineExpose({
         class="pxd-scrollable--scrollbar-y top-0 right-0 bottom-0 absolute touch-none opacity-(--o) delay-1000 select-none group-hover/scrollable:delay-0 active:opacity-100 motion-safe:transition-opacity"
       >
         <div
-          class="pxd-scrollable--thumb w-inherit rounded-full hover:will-change-transform active:opacity-100 motion-safe:transition-colors"
+          class="pxd-scrollable--thumb w-inherit rounded-full group-hover/scrollable:will-change-transform active:opacity-100 motion-safe:transition-colors"
           :style="verticalThumbStyle"
           @mousedown="startDragVertical"
         />

package/dist/components/scrollable/types.d.ts

@@ -1,4 +1,5 @@
-import type { ComponentClass, ComponentDirection, Nullable } from '../../types/shared'
+import type { ComponentClass, ComponentDirection } from '../../types/shared/props'
+import type { Nullable } from '../../types/shared/utils'
 import type { CSSProperties } from 'vue'
 
 export interface ScrollableProps {