pxd 0.1.2 → 0.1.3

package/dist/components/resizable/index.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { computed, shallowRef, watch } from "vue";
+import { computed, onMounted, shallowRef, watch } from "vue";
 import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useResizeObserver } from "../../composables/use-resize-observer.js";
 import { throttleByRaf } from "../../utils/event.js";
+import { clampValue } from "../../utils/format.js";
 import { getUniqueId } from "../../utils/helper.js";
 import { isNil } from "../../utils/is.js";
-import { clamp, PERCENT_TOTAL, roundSize, toPair } from "./utils";
 defineOptions({
 	name: "PResizable",
 	inheritAttrs: false,
@@ -19,6 +20,11 @@ const props = defineProps({
 		required: false,
 		default: "horizontal"
 	},
+	unit: {
+		type: String,
+		required: false,
+		default: "percent"
+	},
 	minSize: {
 		type: Array,
 		required: false,
@@ -50,93 +56,115 @@ const emits = defineEmits([
 	"reset",
 	"update:modelValue"
 ]);
+const PERCENT_TOTAL = 100;
+const KEYBOARD_STEP = 1;
+const KEYBOARD_STEP_LARGE = 10;
 const uid = getUniqueId("pxd-resizable");
+const leadingId = `${uid}-leading`;
+const trailingId = `${uid}-trailing`;
+const initialSizes = toPair(isNil(props.modelValue) ? props.defaultValue : props.modelValue);
+let drag = null;
+const flushResize = throttleByRaf(applyPendingDelta);
 const containerRef = shallowRef();
 const handleRef = shallowRef();
-const modelValue = useModelValue(props, emits, { withChange: false });
+const containerSize = shallowRef(0);
 const isControlled = computed(() => !isNil(props.modelValue));
+const isPixel = computed(() => props.unit === "px");
 const innerSizes = shallowRef(toPair(props.defaultValue));
-const sizes = computed(() => isControlled.value ? toPair(props.modelValue) : innerSizes.value);
-/**
-* The range the leading panel may travel through. The trailing panel needs no
-* bounds of its own: the pair always sums to 100, so the leading panel's floor
-* already is the trailing panel's ceiling and the other way round.
-*/
+/** Percent sizes are measured against 100; pixel sizes fill the measured container. */
+const totalSize = computed(() => isPixel.value ? containerSize.value : PERCENT_TOTAL);
+/** Only the leading size of a pixel group comes from the caller. */
+const sizes = computed(() => {
+	const source = toPair(isControlled.value ? props.modelValue : innerSizes.value);
+	const leading = source[0];
+	return isPixel.value ? [leading, Math.max(totalSize.value - leading, 0)] : source;
+});
+/** The pair the panel slots are handed, updated only when a change settles. */
+const settledSizes = shallowRef(sizes.value);
+const restoreSizes = shallowRef(null);
+const collapsed = computed(() => restoreSizes.value !== null);
+const unitSuffix = computed(() => isPixel.value ? "px" : "%");
 const bounds = computed(() => {
 	const [leading, trailing] = toPair(props.minSize);
-	if (leading + trailing > PERCENT_TOTAL) {
+	const total = totalSize.value;
+	if (total <= 0) {
+		return {
+			min: sizes.value[0],
+			max: sizes.value[0]
+		};
+	}
+	if (leading + trailing > total) {
 		return {
 			min: 0,
-			max: PERCENT_TOTAL
+			max: total
 		};
 	}
 	return {
 		min: leading,
-		max: PERCENT_TOTAL - trailing
+		max: total - trailing
 	};
 });
-const leadingId = `${uid}-leading`;
-const trailingId = `${uid}-trailing`;
-const collapsed = shallowRef(false);
-// The pair as it was before folding, so expanding gives back what the user was
-// working with rather than the configured starting point.
-let expandedPair = null;
-let initialPair = null;
-watch(sizes, ([leading, trailing]) => {
-	initialPair ??= [leading, trailing];
-}, {
-	immediate: true,
-	flush: "sync"
-});
-function setSizes(next) {
-	const current = sizes.value;
-	const rounded = [roundSize(next[0]), roundSize(next[1])];
-	if (rounded[0] === current[0] && rounded[1] === current[1]) {
+const ariaValueNow = computed(() => roundSize(sizes.value[0]));
+const ariaValueText = computed(() => `${ariaValueNow.value}${unitSuffix.value}${collapsed.value ? ", folded" : ""}`);
+const modelValue = useModelValue(props, emits, { withChange: false });
+useResizeObserver(containerRef, syncContainerSize);
+function roundSize(value) {
+	return Math.round(value * 100) / 100;
+}
+function toPair(value) {
+	return [value?.[0] ?? 0, value?.[1] ?? 0];
+}
+function setSizes([leading, trailing]) {
+	const [currentLeading, currentTrailing] = sizes.value;
+	const nextLeading = roundSize(leading);
+	const next = isPixel.value ? [nextLeading, roundSize(Math.max(totalSize.value - nextLeading, 0))] : [nextLeading, roundSize(trailing)];
+	if (next[0] === currentLeading && next[1] === currentTrailing) {
 		return false;
 	}
 	if (!isControlled.value) {
-		innerSizes.value = rounded;
+		innerSizes.value = next;
 	}
-	modelValue.value = rounded;
+	modelValue.value = next;
 	return true;
 }
-function resize(deltaPercent) {
+function applyDelta(delta) {
 	const [leading, trailing] = sizes.value;
 	const { min, max } = bounds.value;
-	// Clamp the movement so the leading panel stays inside its own range, then
-	// hand the trailing panel the same delta so the pair keeps summing to 100%.
-	const applied = clamp(deltaPercent, min - leading, max - leading);
+	const applied = clampValue(delta, min - leading, max - leading);
 	if (applied === 0) {
 		return false;
 	}
-	// The trailing panel is derived from the already rounded value, so the pair
-	// keeps the exact sum it had and repeated drags cannot drift.
-	const newLeading = roundSize(leading + applied);
-	return setSizes([newLeading, roundSize(leading + trailing - newLeading)]);
-}
-/**
-* Moving the divider brings a folded pair back, so a collapsed panel is never a
-* dead end. The remembered sizes go with it: they described a pair that no
-* longer exists once it has been moved somewhere else.
-*/
-function applyDelta(deltaPercent) {
-	const changed = resize(deltaPercent);
-	if (changed && collapsed.value) {
-		collapsed.value = false;
-		expandedPair = null;
+	const nextLeading = roundSize(leading + applied);
+	const changed = setSizes([nextLeading, roundSize(leading + trailing - nextLeading)]);
+	if (changed) {
+		restoreSizes.value = null;
 	}
 	return changed;
 }
-function resizeByPixels(delta) {
+function syncContainerSize() {
 	const container = containerRef.value;
 	if (!container) {
-		return false;
+		containerSize.value = 0;
+		return;
 	}
-	const containerSize = props.direction === "horizontal" ? container.offsetWidth : container.offsetHeight;
-	if (containerSize <= 0) {
+	containerSize.value = props.direction === "horizontal" ? container.offsetWidth : container.offsetHeight;
+}
+function applyPendingDelta() {
+	if (!drag || drag.delta === 0) {
+		return;
+	}
+	const delta = drag.delta;
+	drag.delta = 0;
+	drag.resized = applyPointerDelta(delta) || drag.resized;
+}
+function applyPointerDelta(delta) {
+	if (isPixel.value) {
+		return applyDelta(delta);
+	}
+	if (containerSize.value <= 0) {
 		return false;
 	}
-	return applyDelta(delta / containerSize * PERCENT_TOTAL);
+	return applyDelta(delta / containerSize.value * PERCENT_TOTAL);
 }
 function commitChange() {
 	emits("change", sizes.value.slice());
@@ -145,121 +173,91 @@ function toggleCollapse() {
 	if (props.disabled) {
 		return;
 	}
-	const [leading, trailing] = sizes.value;
-	if (collapsed.value) {
-		const restore = expandedPair ?? initialPair ?? [leading, trailing];
-		expandedPair = null;
-		collapsed.value = false;
-		if (setSizes([restore[0], restore[1]])) {
+	const restore = restoreSizes.value;
+	if (restore) {
+		restoreSizes.value = null;
+		if (setSizes(restore)) {
 			commitChange();
 		}
 		return;
 	}
-	expandedPair = [leading, trailing];
-	collapsed.value = true;
+	restoreSizes.value = [sizes.value[0], sizes.value[1]];
 	const { min } = bounds.value;
-	// Whatever the leading panel gives up goes to its neighbour, so the pair keeps
-	// summing to 100% while folded.
-	if (setSizes([min, PERCENT_TOTAL - min])) {
+	if (setSizes([min, totalSize.value - min])) {
 		commitChange();
 	}
 }
 function reset() {
-	const restore = initialPair ?? toPair(props.defaultValue);
-	expandedPair = null;
-	collapsed.value = false;
-	if (setSizes([restore[0], restore[1]])) {
+	restoreSizes.value = null;
+	if (setSizes(initialSizes)) {
 		emits("reset", sizes.value.slice());
 	}
 }
-let activePointerId = null;
-let startPosition = 0;
-let accumulated = 0;
-let resized = false;
 function axisOf(event) {
 	return props.direction === "horizontal" ? event.clientX : event.clientY;
 }
-const flushResize = throttleByRaf(() => {
-	if (accumulated === 0) {
-		return;
-	}
-	const delta = accumulated;
-	accumulated = 0;
-	resized = resizeByPixels(delta) || resized;
-});
-// The capture target is the handle itself, never `event.target`: a child element
-// can be swapped mid-drag, which would both throw on release and strand the drag.
-// Holding the capture also keeps the drag alive when the pointer leaves the window.
-function releaseCapture() {
-	const id = activePointerId;
-	const el = handleRef.value;
-	activePointerId = null;
-	if (!el || id === null) {
+function resetDragging() {
+	const pointerId = drag?.pointerId;
+	const handle = handleRef.value;
+	flushResize.cancel();
+	drag = null;
+	settledSizes.value = sizes.value;
+	if (pointerId === undefined || !handle) {
 		return;
 	}
 	try {
-		el.releasePointerCapture(id);
+		handle.releasePointerCapture(pointerId);
 	} catch {}
 }
-function resetDragging() {
-	startPosition = 0;
-	accumulated = 0;
-	resized = false;
-	flushResize.cancel();
-	releaseCapture();
-}
 function handlePointerDown(event) {
 	if (props.disabled) {
 		return;
 	}
-	activePointerId = event.pointerId;
-	startPosition = axisOf(event);
-	accumulated = 0;
-	resized = false;
+	drag = {
+		pointerId: event.pointerId,
+		position: axisOf(event),
+		delta: 0,
+		resized: false
+	};
+	syncContainerSize();
 	try {
 		handleRef.value?.setPointerCapture(event.pointerId);
 	} catch {}
 }
 function handlePointerMove(event) {
-	if (event.pointerId !== activePointerId) {
+	if (!drag || event.pointerId !== drag.pointerId) {
 		return;
 	}
 	event.preventDefault();
 	const position = axisOf(event);
-	accumulated += position - startPosition;
-	startPosition = position;
+	drag.delta += position - drag.position;
+	drag.position = position;
 	flushResize();
 }
 function handlePointerUp(event) {
-	if (event.pointerId !== activePointerId) {
+	if (!drag || event.pointerId !== drag.pointerId) {
 		return;
 	}
 	flushResize.cancel();
-	if (accumulated !== 0) {
-		const delta = accumulated;
-		accumulated = 0;
-		resized = resizeByPixels(delta) || resized;
-	}
-	const didResize = resized;
+	applyPendingDelta();
+	const didResize = drag.resized;
 	resetDragging();
 	if (didResize) {
 		commitChange();
 	}
 }
 function handlePointerCancel(event) {
-	if (event.pointerId !== activePointerId) {
+	if (!drag || event.pointerId !== drag.pointerId) {
 		return;
 	}
 	resetDragging();
 }
 function handleLostCapture() {
-	if (activePointerId === null) {
+	if (!drag) {
 		return;
 	}
 	resetDragging();
 }
-const KEYBOARD_STEP = 1;
-const KEYBOARD_STEP_LARGE = 10;
 function handleKeydown(event) {
 	if (props.disabled) {
 		return;
@@ -272,9 +270,9 @@ function handleKeydown(event) {
 	} else if (event.key === (horizontal ? "ArrowRight" : "ArrowDown")) {
 		delta = step;
 	} else if (event.key === "Home") {
-		delta = bounds.value.min - position.value;
+		delta = bounds.value.min - sizes.value[0];
 	} else if (event.key === "End") {
-		delta = bounds.value.max - position.value;
+		delta = bounds.value.max - sizes.value[0];
 	}
 	if (delta === null) {
 		return;
@@ -284,75 +282,19 @@ function handleKeydown(event) {
 		commitChange();
 	}
 }
-function isPercent(value) {
-	return value >= 0 && value <= PERCENT_TOTAL;
-}
-function warnLength(name, value) {
-	warn(`${name} holds ${value.length} value${value.length === 1 ? "" : "s"} but the group has 2 panels; only the first two are used.`);
-}
-function warn(message) {
-	if (import.meta.env?.DEV) {
-		console.warn(`[pxd] PResizable: ${message}`);
-	}
-}
-function warnSum(name, value) {
-	const total = roundSize(value[0] + value[1]);
-	if (Math.abs(total - PERCENT_TOTAL) > .01) {
-		warn(`${name} adds up to ${total}% instead of ${PERCENT_TOTAL}%; the panels keep the sizes they were given.`);
+/** Only the leading panel of a pixel group gets a basis; the trailing one fills. */
+function panelStyle(index) {
+	if (isPixel.value && index === 1) {
+		return {};
 	}
+	return { flexBasis: `${sizes.value[index]}${unitSuffix.value}` };
 }
-// The model is the caller's truth, so a value the group would rather correct is
-// reported rather than rewritten: silently rewriting it would fight whatever
-// writes it back.
-watch(() => [
-	props.modelValue,
-	props.minSize,
-	props.defaultValue
-], () => {
-	if (!import.meta.env?.DEV) {
-		return;
-	}
-	const mins = toPair(props.minSize);
-	if (props.minSize.length !== 2) {
-		warnLength("min-size", props.minSize);
-	}
-	if (!isPercent(mins[0]) || !isPercent(mins[1])) {
-		warn(`min-size values must be between 0 and ${PERCENT_TOTAL}, got [${mins.join(", ")}].`);
-	} else if (mins[0] + mins[1] > PERCENT_TOTAL) {
-		warn(`min-size [${mins.join(", ")}] adds up to more than ${PERCENT_TOTAL}%, so no split fits and the constraint is ignored.`);
-	}
-	for (const [name, value] of [["model-value", props.modelValue], ["default-value", props.defaultValue]]) {
-		if (isNil(value)) {
-			continue;
-		}
-		if (value.length !== 2) {
-			warnLength(name, value);
-			continue;
-		}
-		warnSum(name, [value[0], value[1]]);
-	}
-	const { min, max } = bounds.value;
-	const leading = sizes.value[0];
-	if (leading < min || leading > max) {
-		warn(`the leading panel sits at ${leading}%, outside its ${min}-${max}% range; it keeps that size until it is dragged.`);
+watch(sizes, (value) => {
+	if (!drag) {
+		settledSizes.value = value;
 	}
-}, {
-	immediate: true,
-	flush: "post"
 });
-const position = computed(() => sizes.value[0]);
-const ariaValueNow = computed(() => roundSize(position.value));
-// A bare number is announced as "30" - no unit, and nothing about the fold.
-// valuetext is the only place a separator can put either, since it has no
-// aria-expanded to lean on.
-const ariaValueText = computed(() => collapsed.value ? `${ariaValueNow.value}%, folded` : `${ariaValueNow.value}%`);
-function panelStyle(index) {
-	return {
-		flexBasis: `${sizes.value[index]}%`,
-		flexGrow: 0,
-		flexShrink: 1
-	};
-}
+onMounted(syncContainerSize);
 defineExpose({
 	getPanelSizes: () => sizes.value.slice(),
 	reset
@@ -364,6 +306,7 @@ defineExpose({
     data-resizable
     ref="containerRef"
     :data-orientation="direction"
+    :data-unit="unit"
     class="pxd-resizable flex size-full max-w-full flex-row overflow-hidden data-[orientation=vertical]:flex-col"
     v-bind="$attrs"
   >
@@ -372,17 +315,9 @@ defineExpose({
       class="pxd-resizable-panel min-w-0 min-h-0 overflow-hidden"
       :style="panelStyle(0)"
     >
-      <slot name="leading" :size="sizes[0]" />
+      <slot name="leading" :size="settledSizes[0]" />
     </div>
 
-    <!--
-      A *focusable* separator is a widget, and only that flavour may carry
-      aria-valuenow / aria-valuemin / aria-valuemax - which is why it takes a
-      tabindex and the key handler below, not just a pointer drag. aria-expanded
-      is not a separator state at any focusability: it marks control over
-      visibility, and folding a panel never hides it. The fold therefore rides
-      on aria-valuetext.
-    -->
     <div
       ref="handleRef"
       role="separator"
@@ -398,7 +333,7 @@ defineExpose({
       :data-collapsed="collapsed || void 0"
       :data-handler="handle"
       :data-orientation="direction"
-      class="pxd-resizable-handle relative shrink-0 touch-none bg-border self-focus-ring select-none hover:after:bg-primary/15 active:after:bg-primary/20 aria-disabled:cursor-default motion-safe:transition-colors after:motion-safe:transition-colors"
+      class="pxd-resizable-handle relative shrink-0 touch-none self-focus-ring select-none aria-disabled:cursor-default after:motion-safe:transition-colors"
       @pointerdown.prevent="handlePointerDown"
       @pointermove="handlePointerMove"
       @pointerup="handlePointerUp"
@@ -413,11 +348,11 @@ defineExpose({
       class="pxd-resizable-panel min-w-0 min-h-0 overflow-hidden"
       :style="panelStyle(1)"
     >
-      <slot name="trailing" :size="sizes[1]" />
+      <slot name="trailing" :size="settledSizes[1]" />
     </div>
   </div>
 </template>
 
 <style>
-.pxd-resizable-handle[data-handler=true]:before{background-color:var(--color-gray-300);border-radius:.5rem;content:"";left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.pxd-resizable-handle[data-collapsed=true]:before{opacity:.4}.pxd-resizable-handle:after{content:"";left:50%;padding:4px;position:absolute;top:50%;transform:translate(-50%,-50%)}.pxd-resizable-handle[data-orientation=horizontal]{cursor:ew-resize;height:100%;width:1px}.pxd-resizable-handle[data-orientation=horizontal]:before{height:1.5rem;width:.375rem}.pxd-resizable-handle[data-orientation=horizontal]:after{height:100%}.pxd-resizable-handle[data-orientation=vertical]{cursor:ns-resize;height:1px;width:100%}.pxd-resizable-handle[data-orientation=vertical]:before{height:.375rem;width:1.5rem}.pxd-resizable-handle[data-orientation=vertical]:after{width:100%}
+.pxd-resizable-panel{flex-grow:0;flex-shrink:1}.pxd-resizable[data-unit=px] .pxd-resizable-panel:first-child{flex-shrink:0}.pxd-resizable[data-unit=px] .pxd-resizable-panel:last-child{flex-basis:0;flex-grow:1}.pxd-resizable-handle[data-handler=true]:before{background-color:var(--color-gray-300);border-radius:.5rem;content:"";left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.pxd-resizable-handle[data-collapsed=true]:before{opacity:.4}.pxd-resizable-handle:after{content:"";left:50%;padding:2px;position:absolute;top:50%;transform:translate(-50%,-50%)}.pxd-resizable-handle:hover:after{background-color:var(--color-primary)}.pxd-resizable-handle[data-orientation=horizontal]{border-left-width:1px;cursor:ew-resize;height:100%}.pxd-resizable-handle[data-orientation=horizontal]:before{height:1.5rem;width:.375rem}.pxd-resizable-handle[data-orientation=horizontal]:after{height:100%}.pxd-resizable-handle[data-orientation=vertical]{border-bottom-width:1px;cursor:ns-resize;width:100%}.pxd-resizable-handle[data-orientation=vertical]:before{height:.375rem;width:1.5rem}.pxd-resizable-handle[data-orientation=vertical]:after{width:100%}
 </style>

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

@@ -1,19 +1,11 @@
-import type { ComponentDirection } from '../../types/shared'
+import type { ComponentDirection } from '../../types/shared/props'
 
 export interface ResizableProps {
   direction?: ComponentDirection
-  /**
-   * Per-panel floors as percentages. The group always sums to 100, so one panel's
-   * floor is the other panel's ceiling: `[20, 40]` means leading 20-60 and
-   * trailing 40-80. Adding up to more than 100 leaves no split that fits, so the
-   * constraint is ignored.
-   */
+  unit?: 'percent' | 'px'
   minSize?: number[]
-  /** Draw the grip in the middle of the handle. */
   handle?: boolean
-  /** Stop the handle from dragging or folding. */
   disabled?: boolean
-  /** Starting sizes when uncontrolled. Read once, on setup. */
   defaultValue?: number[]
   modelValue?: number[] | null
 }

package/dist/components/reveal/index.d.vue.ts

@@ -4,13 +4,13 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<RevealProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RevealProps> & Readonly<{}>, {
-    delay: number | string;
-    duration: number | string;
+    delay: string | number;
+    duration: string | number;
     threshold: number | number[];
     direction: import("../../types/shared/props.js").BasePosition;
     trigger: import("./types").RevealTrigger;
     rootMargin: string;
-    distance: number | string;
+    distance: string | number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/reveal/index.vue

@@ -49,10 +49,6 @@ const props = defineProps({
 });
 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),
@@ -79,6 +75,10 @@ const { observer, stop } = useIntersectionObserver(target, ([{ entry }]) => {
 * leaving that content permanently invisible.
 */
 const gated = computed(() => props.trigger === "viewport" && !!observer.value);
+/** Bare numbers are seconds, matching the CSS `animation-*` time grammar. */
+function getTimeUnitValue(value) {
+	return typeof value === "number" ? `${value}s` : value;
+}
 </script>
 
 <template>

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

@@ -1,4 +1,4 @@
-import type { BasePosition } from '../../types/shared'
+import type { BasePosition } from '../../types/shared/props'
 
 export type RevealTrigger = 'mount' | 'viewport'
 

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

@@ -7,8 +7,8 @@ declare const __VLS_export: import("vue").DefineComponent<RollingNumberProps, {
 }, string, import("vue").PublicProps, Readonly<RollingNumberProps> & Readonly<{
     onFinish?: (() => any) | undefined;
 }>, {
-    value: number | string;
-    mode: "tween" | "scroll";
+    value: string | number;
+    mode: "scroll" | "tween";
     durations: number;
     thousands: boolean;
     animateOnMount: boolean;

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

@@ -65,21 +65,6 @@ const decimalPlaces = computed(() => {
 	}
 	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("");
@@ -96,6 +81,21 @@ const scrollChars = computed(() => {
 	});
 });
 const scrollStyle = computed(() => ({ "--pxd-rolling-duration": `${Math.max(props.durations, 0)}ms` }));
+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");
+}
 function easeOutCubic(t) {
 	return t === 1 ? 1 : 1 - 2 ** (-10 * t);
 }

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

@@ -21,9 +21,18 @@ const props = defineProps({
 	}
 });
 const PRECISION = .5;
+const scheduleAdjust = scheduleByRaf(adjust, { defer: true });
 const needsWrap = shallowRef(false);
 const containerRef = shallowRef();
 const fittedFontSize = shallowRef(null);
+const computedStyle = computed(() => {
+	const size = fittedFontSize.value;
+	if (size === null) {
+		return undefined;
+	}
+	return { fontSize: `${size}px` };
+});
+useResizeObserver(containerRef, scheduleAdjust);
 function parseSize(value) {
 	return Number.parseFloat(value) || 0;
 }
@@ -117,17 +126,8 @@ function adjust() {
 	fittedFontSize.value = best;
 	needsWrap.value = false;
 }
-const scheduleAdjust = scheduleByRaf(adjust, { defer: true });
-const computedStyle = computed(() => {
-	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(() => {
 	scheduleAdjust.cancel();
 });