pxd 0.0.64 → 0.1.2

package/dist/components/reveal/index.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { computed, shallowRef } from "vue";
+import { useIntersectionObserver } from "../../composables/use-intersection-observer.js";
+import { getCssUnitValue } from "../../utils/format.js";
+defineOptions({
+	name: "PReveal",
+	inheritAttrs: false
+});
+const props = defineProps({
+	duration: {
+		type: [Number, String],
+		required: false,
+		default: 1
+	},
+	delay: {
+		type: [Number, String],
+		required: false,
+		default: 0
+	},
+	distance: {
+		type: [Number, String],
+		required: false,
+		default: 16
+	},
+	direction: {
+		type: String,
+		required: false,
+		default: "bottom"
+	},
+	trigger: {
+		type: String,
+		required: false,
+		default: "mount"
+	},
+	root: {
+		type: null,
+		required: false
+	},
+	rootMargin: {
+		type: String,
+		required: false,
+		default: "0px"
+	},
+	threshold: {
+		type: [Number, Array],
+		required: false,
+		default: 0
+	}
+});
+const containerRef = shallowRef();
+const revealed = shallowRef(props.trigger === "mount");
+/** Bare numbers are seconds, matching the CSS `animation-*` time grammar. */
+function getTimeUnitValue(value) {
+	return typeof value === "number" ? `${value}s` : value;
+}
+const computedStyle = computed(() => ({
+	"--reveal-duration": getTimeUnitValue(props.duration),
+	"--reveal-delay": getTimeUnitValue(props.delay),
+	"--reveal-distance": getCssUnitValue(props.distance)
+}));
+// Mount mode leaves the target unresolved, so the observer is never acquired.
+const target = computed(() => props.trigger === "viewport" ? containerRef.value : undefined);
+const observerOptions = computed(() => ({
+	root: props.root,
+	rootMargin: props.rootMargin,
+	threshold: props.threshold
+}));
+const { observer, stop } = useIntersectionObserver(target, ([{ entry }]) => {
+	if (!entry.isIntersecting || revealed.value) {
+		return;
+	}
+	revealed.value = true;
+	// One-shot: a reveal never plays twice, so drop the subscription immediately.
+	stop();
+}, observerOptions);
+/**
+* Gating arms only once an observer actually exists. Without it the paused `from`
+* frame would apply to a server-rendered element that can never be observed,
+* leaving that content permanently invisible.
+*/
+const gated = computed(() => props.trigger === "viewport" && !!observer.value);
+</script>
+
+<template>
+  <div
+    data-reveal
+    ref="containerRef"
+    class="pxd-reveal motion-reduce:animate-none!"
+    :data-direction="direction"
+    :data-play-state="gated && !revealed ? 'paused' : 'running'"
+    :style="computedStyle"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<style>
+.pxd-reveal{--reveal-duration:0.5s;--reveal-delay:0s;--reveal-distance:16px;--reveal-x:0px;--reveal-y:0px;animation-delay:var(--reveal-delay);animation-duration:var(--reveal-duration);animation-fill-mode:backwards;animation-name:pxd-reveal-in;animation-timing-function:var(--default-transition-timing-function)}.pxd-reveal[data-play-state=paused]{animation-play-state:paused}.pxd-reveal[data-direction=top]{--reveal-y:calc(var(--reveal-distance)*-1)}.pxd-reveal[data-direction=bottom]{--reveal-y:var(--reveal-distance)}.pxd-reveal[data-direction=left]{--reveal-x:calc(var(--reveal-distance)*-1)}.pxd-reveal[data-direction=right]{--reveal-x:var(--reveal-distance)}@keyframes pxd-reveal-in{0%{opacity:0;transform:translate(var(--reveal-x),var(--reveal-y))}}
+</style>

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

@@ -0,0 +1,15 @@
+import type { BasePosition } from '../../types/shared'
+
+export type RevealTrigger = 'mount' | 'viewport'
+
+export interface RevealProps {
+  duration?: number | string
+  delay?: number | string
+  /** Initial offset along the reveal axis, before the element settles at its place. */
+  distance?: number | string
+  direction?: BasePosition
+  trigger?: RevealTrigger
+  root?: Element | Document | null
+  rootMargin?: string
+  threshold?: number | number[]
+}

package/dist/components/rolling-number/index.d.vue.ts

@@ -0,0 +1,17 @@
+import type { RollingNumberProps } from './types';
+declare const __VLS_export: import("vue").DefineComponent<RollingNumberProps, {
+    displayValue: import("vue").Ref<number, number>;
+    formattedValue: import("vue").ComputedRef<string>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    finish: () => any;
+}, string, import("vue").PublicProps, Readonly<RollingNumberProps> & Readonly<{
+    onFinish?: (() => any) | undefined;
+}>, {
+    value: number | string;
+    mode: "tween" | "scroll";
+    durations: number;
+    thousands: boolean;
+    animateOnMount: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/rolling-number/index.vue

@@ -0,0 +1,252 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { caf, raf } from "../../utils/event.js";
+import { parseUnitValue } from "../../utils/format.js";
+import { isServer, isUndefined } from "../../utils/is.js";
+defineOptions({
+	name: "PRollingNumber",
+	inheritAttrs: false
+});
+const props = defineProps({
+	mode: {
+		type: String,
+		required: false,
+		default: "tween"
+	},
+	value: {
+		type: [Number, String],
+		required: false,
+		default: 0
+	},
+	durations: {
+		type: Number,
+		required: false,
+		default: 2e3
+	},
+	thousands: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	animateOnMount: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
+});
+const emits = defineEmits(["finish"]);
+const DIGIT_LIST = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9
+];
+let rafId = -1;
+let startTime = -1;
+let startValue = 0;
+let targetValue = 0;
+let finishTimer = null;
+const displayValue = ref(0);
+const scrollTransition = ref(false);
+const scrollText = ref(null);
+const parsedValueWithUnit = computed(() => parseUnitValue(props.value));
+const isScrollMode = computed(() => props.mode === "scroll");
+const decimalPlaces = computed(() => {
+	const str = String(props.value);
+	const dotIndex = str.indexOf(".");
+	if (dotIndex === -1) {
+		return 0;
+	}
+	return Math.min(str.length - dotIndex - 1, 10);
+});
+function formatNumber(rawValue) {
+	// avoid -0
+	const d = decimalPlaces.value;
+	const raw = Math.abs(rawValue) < 5 * 10 ** -(d + 1) ? 0 : rawValue;
+	const val = raw.toFixed(d);
+	if (!props.thousands) {
+		return val;
+	}
+	const [intPart, decPart] = val.split(".");
+	const formatted = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+	return isUndefined(decPart) ? formatted : `${formatted}.${decPart}`;
+}
+function maskDigitsAsZero(formatted) {
+	return formatted.replace(/\d/g, "0");
+}
+const formattedValue = computed(() => formatNumber(displayValue.value));
+const scrollChars = computed(() => {
+	const chars = (scrollText.value ?? formattedValue.value).split("");
+	const len = chars.length;
+	return chars.map((char, index) => {
+		const fromRight = len - 1 - index;
+		const isDigit = char >= "0" && char <= "9";
+		return {
+			key: isDigit ? `d-${fromRight}` : `s-${fromRight}-${char}`,
+			char,
+			isDigit,
+			digit: isDigit ? Number(char) : 0
+		};
+	});
+});
+const scrollStyle = computed(() => ({ "--pxd-rolling-duration": `${Math.max(props.durations, 0)}ms` }));
+function easeOutCubic(t) {
+	return t === 1 ? 1 : 1 - 2 ** (-10 * t);
+}
+function clearFinishTimer() {
+	if (finishTimer != null) {
+		clearTimeout(finishTimer);
+		finishTimer = null;
+	}
+}
+function stopAnimation() {
+	caf(rafId);
+	rafId = -1;
+	startTime = -1;
+	clearFinishTimer();
+}
+function animate(timestamp) {
+	if (startTime < 0) {
+		startTime = timestamp;
+	}
+	const elapsed = timestamp - startTime;
+	const progress = Math.min(elapsed / props.durations, 1);
+	const eased = easeOutCubic(progress);
+	displayValue.value = startValue + (targetValue - startValue) * eased;
+	if (progress < 1) {
+		rafId = raf(animate);
+	} else {
+		displayValue.value = targetValue;
+		rafId = -1;
+		emits("finish");
+	}
+}
+function startTweenAnimation(target) {
+	stopAnimation();
+	scrollTransition.value = false;
+	scrollText.value = null;
+	startValue = displayValue.value;
+	targetValue = target;
+	startTime = -1;
+	if (props.durations <= 0) {
+		displayValue.value = target;
+		emits("finish");
+		return;
+	}
+	rafId = raf(animate);
+}
+function scheduleScrollFinish() {
+	clearFinishTimer();
+	finishTimer = setTimeout(() => {
+		finishTimer = null;
+		emits("finish");
+	}, props.durations);
+}
+async function startScrollAnimation(target, fromMasked = false) {
+	stopAnimation();
+	const targetText = formatNumber(target);
+	if (props.durations <= 0) {
+		scrollTransition.value = false;
+		scrollText.value = null;
+		displayValue.value = target;
+		emits("finish");
+		return;
+	}
+	displayValue.value = target;
+	if (fromMasked) {
+		scrollTransition.value = false;
+		scrollText.value = maskDigitsAsZero(targetText);
+		await nextTick();
+	}
+	scrollTransition.value = true;
+	scrollText.value = targetText;
+	scheduleScrollFinish();
+}
+function startAnimation(target) {
+	if (isScrollMode.value) {
+		startScrollAnimation(target);
+		return;
+	}
+	startTweenAnimation(target);
+}
+watch(() => props.value, () => {
+	startAnimation(parsedValueWithUnit.value.number);
+});
+watch(() => props.mode, () => {
+	startAnimation(parsedValueWithUnit.value.number);
+});
+onMounted(() => {
+	if (isServer()) {
+		return;
+	}
+	const numberValue = parsedValueWithUnit.value.number;
+	if (props.animateOnMount) {
+		if (isScrollMode.value) {
+			startScrollAnimation(numberValue, true);
+			return;
+		}
+		startAnimation(numberValue);
+	} else {
+		displayValue.value = numberValue;
+		scrollText.value = null;
+	}
+});
+onBeforeUnmount(() => {
+	stopAnimation();
+});
+defineExpose({
+	displayValue,
+	formattedValue
+});
+</script>
+
+<template>
+  <span
+    data-rolling-number
+    class="pxd-rolling-number tabular-nums text-trim-both"
+    role="status"
+    aria-live="polite"
+    aria-atomic="true"
+    :style="isScrollMode ? scrollStyle : void 0"
+    v-bind="$attrs"
+  >
+    <template v-if="isScrollMode">
+      <span class="pxd-rolling-number--scroll inline-flex items-baseline" aria-hidden="true">
+        <template v-for="item in scrollChars" :key="item.key">
+          <span
+            v-if="item.isDigit"
+            class="pxd-rolling-number--digit relative inline-block h-em overflow-hidden align-bottom leading-none"
+          >
+            <span
+              class="pxd-rolling-number--digit-strip inline-flex flex-col will-change-transform"
+              :class="{
+  'motion-safe:transition-transform motion-safe:duration-(--pxd-rolling-duration)': scrollTransition
+}"
+              :style="{ transform: `translate3d(0, -${item.digit}em, 0)` }"
+            >
+              <span
+                v-for="digit in DIGIT_LIST"
+                :key="digit"
+                class="inline-block h-em w-full text-center leading-none"
+              >
+                {{ digit }}
+              </span>
+            </span>
+          </span>
+          <span v-else class="inline-block">{{ item.char }}</span>
+        </template>
+        <span v-if="parsedValueWithUnit.unit">{{ parsedValueWithUnit.unit }}</span>
+      </span>
+    </template>
+
+    <span :class="{ 'visually-hidden': isScrollMode }">
+      {{ formattedValue }}{{ parsedValueWithUnit.unit }}
+    </span>
+  </span>
+</template>

package/dist/components/rolling-number/types.d.ts

@@ -0,0 +1,11 @@
+export interface RollingNumberProps {
+  mode?: 'tween' | 'scroll'
+  value?: number | string
+  durations?: number
+  thousands?: boolean
+  animateOnMount?: boolean
+}
+
+export interface RollingNumberEmits {
+  finish: []
+}

package/dist/components/scalable-text/index.vue

@@ -1,142 +1,145 @@
 <script setup>
 import { prepareWithSegments, measureNaturalWidth } from "@chenglou/pretext";
-import { shallowRef, computed, watch, nextTick, onBeforeUnmount } from "vue";
-import { useResizeObserver } from "../../composables/use-browser-observer";
-import { getStyle } from "../../utils/dom";
-import { caf, raf } from "../../utils/event";
-import { isServer } from "../../utils/is";
+import { shallowRef, computed, watch, onBeforeUnmount } from "vue";
+import { useResizeObserver } from "../../composables/use-resize-observer.js";
+import { getStyle } from "../../utils/dom.js";
+import { scheduleByRaf } from "../../utils/event.js";
+import { isServer } from "../../utils/is.js";
 defineOptions({
-  name: "PScalableText",
-  inheritAttrs: false
+	name: "PScalableText",
+	inheritAttrs: false
 });
 const props = defineProps({
-  text: { type: String, required: true },
-  minFontSize: { type: Number, required: false, default: 12 }
+	text: {
+		type: String,
+		required: true
+	},
+	minFontSize: {
+		type: Number,
+		required: false,
+		default: 12
+	}
 });
-const PRECISION = 0.5;
+const PRECISION = .5;
 const needsWrap = shallowRef(false);
 const containerRef = shallowRef();
 const fittedFontSize = shallowRef(null);
-let rafId = 0;
-let pendingAdjust = false;
 function parseSize(value) {
-  return Number.parseFloat(value) || 0;
+	return Number.parseFloat(value) || 0;
 }
 function buildFont(style, sizePx) {
-  const fontStyle = style.fontStyle || "normal";
-  const fontWeight = style.fontWeight || "400";
-  const fontFamily = style.fontFamily || "sans-serif";
-  return `${fontStyle} ${fontWeight} ${sizePx}px ${fontFamily}`;
+	const fontStyle = style.fontStyle || "normal";
+	const fontWeight = style.fontWeight || "400";
+	const fontFamily = style.fontFamily || "sans-serif";
+	return `${fontStyle} ${fontWeight} ${sizePx}px ${fontFamily}`;
 }
 function measureWidth(text, font) {
-  return measureNaturalWidth(prepareWithSegments(text, font));
+	return measureNaturalWidth(prepareWithSegments(text, font));
 }
 function adjust() {
-  if (isServer()) {
-    return;
-  }
-  const el = containerRef.value;
-  if (!el?.isConnected) {
-    return;
-  }
-  const text = props.text ?? "";
-  if (!text) {
-    fittedFontSize.value = null;
-    needsWrap.value = false;
-    return;
-  }
-  const saved = el.style.fontSize;
-  el.style.fontSize = "";
-  const style = getStyle(el);
-  const defaultSize = parseSize(style.fontSize);
-  el.style.fontSize = saved;
-  if (defaultSize <= 0) {
-    return;
-  }
-  const padLeft = parseSize(style.paddingLeft);
-  const padRight = parseSize(style.paddingRight);
-  const available = el.clientWidth - padLeft - padRight;
-  if (available <= 0) {
-    return;
-  }
-  const min = Math.max(0, props.minFontSize);
-  const defaultWidth = measureWidth(text, buildFont(style, defaultSize));
-  if (defaultWidth <= available) {
-    fittedFontSize.value = null;
-    needsWrap.value = false;
-    return;
-  }
-  const minWidth = measureWidth(text, buildFont(style, min));
-  if (minWidth > available) {
-    fittedFontSize.value = min;
-    needsWrap.value = true;
-    return;
-  }
-  const prevFit = fittedFontSize.value;
-  const seed = prevFit !== null && prevFit > min && prevFit < defaultSize ? prevFit : available / defaultWidth * defaultSize;
-  const clampedEst = Math.max(min, Math.min(defaultSize, seed));
-  const estWidth = measureWidth(text, buildFont(style, clampedEst));
-  let best;
-  if (estWidth <= available) {
-    best = clampedEst;
-    let lo = clampedEst;
-    let hi = Math.min(defaultSize, clampedEst + PRECISION * 4);
-    while (hi - lo > PRECISION) {
-      const mid = (lo + hi) / 2;
-      if (measureWidth(text, buildFont(style, mid)) <= available) {
-        best = mid;
-        lo = mid;
-      } else {
-        hi = mid;
-      }
-    }
-  } else {
-    best = min;
-    let lo = min;
-    let hi = clampedEst;
-    while (hi - lo > PRECISION) {
-      const mid = (lo + hi) / 2;
-      if (measureWidth(text, buildFont(style, mid)) <= available) {
-        best = mid;
-        lo = mid;
-      } else {
-        hi = mid;
-      }
-    }
-  }
-  fittedFontSize.value = best;
-  needsWrap.value = false;
-}
-function scheduleAdjust() {
-  if (pendingAdjust) {
-    return;
-  }
-  pendingAdjust = true;
-  rafId = raf(() => {
-    pendingAdjust = false;
-    nextTick(adjust);
-  });
+	if (isServer()) {
+		return;
+	}
+	const el = containerRef.value;
+	if (!el?.isConnected) {
+		return;
+	}
+	const text = props.text ?? "";
+	if (!text) {
+		fittedFontSize.value = null;
+		needsWrap.value = false;
+		return;
+	}
+	// Temporarily remove inline font-size to read the CSS-computed value
+	const saved = el.style.fontSize;
+	el.style.fontSize = "";
+	const style = getStyle(el);
+	const defaultSize = parseSize(style.fontSize);
+	el.style.fontSize = saved;
+	if (defaultSize <= 0) {
+		return;
+	}
+	const padLeft = parseSize(style.paddingLeft);
+	const padRight = parseSize(style.paddingRight);
+	const available = el.clientWidth - padLeft - padRight;
+	if (available <= 0) {
+		return;
+	}
+	const min = Math.max(0, props.minFontSize);
+	// Measure at default size first
+	const defaultWidth = measureWidth(text, buildFont(style, defaultSize));
+	// Text fits at default size — no adjustment needed
+	if (defaultWidth <= available) {
+		fittedFontSize.value = null;
+		needsWrap.value = false;
+		return;
+	}
+	// Check if even minFontSize still overflows
+	const minWidth = measureWidth(text, buildFont(style, min));
+	if (minWidth > available) {
+		fittedFontSize.value = min;
+		needsWrap.value = true;
+		return;
+	}
+	// Seed from previous result when available for faster convergence on resize
+	const prevFit = fittedFontSize.value;
+	const seed = prevFit !== null && prevFit > min && prevFit < defaultSize ? prevFit : available / defaultWidth * defaultSize;
+	const clampedEst = Math.max(min, Math.min(defaultSize, seed));
+	const estWidth = measureWidth(text, buildFont(style, clampedEst));
+	let best;
+	if (estWidth <= available) {
+		best = clampedEst;
+		let lo = clampedEst;
+		let hi = Math.min(defaultSize, clampedEst + PRECISION * 4);
+		while (hi - lo > PRECISION) {
+			const mid = (lo + hi) / 2;
+			if (measureWidth(text, buildFont(style, mid)) <= available) {
+				best = mid;
+				lo = mid;
+			} else {
+				hi = mid;
+			}
+		}
+	} else {
+		best = min;
+		let lo = min;
+		let hi = clampedEst;
+		while (hi - lo > PRECISION) {
+			const mid = (lo + hi) / 2;
+			if (measureWidth(text, buildFont(style, mid)) <= available) {
+				best = mid;
+				lo = mid;
+			} else {
+				hi = mid;
+			}
+		}
+	}
+	fittedFontSize.value = best;
+	needsWrap.value = false;
 }
+const scheduleAdjust = scheduleByRaf(adjust, { defer: true });
 const computedStyle = computed(() => {
-  const size = fittedFontSize.value;
-  if (size === null) {
-    return void 0;
-  }
-  return { fontSize: `${size}px` };
+	const size = fittedFontSize.value;
+	if (size === null) {
+		return undefined;
+	}
+	return { fontSize: `${size}px` };
 });
+// Watch only the specific props that matter, no deep traversal
 watch(() => [props.text, props.minFontSize], scheduleAdjust, { flush: "post" });
 useResizeObserver(containerRef, scheduleAdjust);
 onBeforeUnmount(() => {
-  caf(rafId);
+	scheduleAdjust.cancel();
 });
 defineExpose({
-  fittedFontSize,
-  needsWrap
+	fittedFontSize,
+	needsWrap
 });
 </script>
 
 <template>
   <div
+    data-scalable-text
     ref="containerRef"
     class="pxd-scalable-text max-w-full"
     :style="computedStyle"

package/dist/components/scroll-progress/index.d.vue.ts

@@ -0,0 +1,22 @@
+import type { ScrollProgressProps } from './types';
+declare var __VLS_1: {
+    percentage: number;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ScrollProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (percentage: number) => any;
+}, string, import("vue").PublicProps, Readonly<ScrollProgressProps> & Readonly<{
+    onChange?: ((percentage: number) => any) | undefined;
+}>, {
+    scrollTarget: string | HTMLElement | import("vue").ComponentPublicInstance | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};