math

Number kept inside [min, max].

Usage

import { useClamp, useRound, useProjection } from "@vizejs/composable/math";

Runtime contract

API

useClamp

Number kept inside [min, max]. A writable source (a number or a writable ref) yields a writable ref whose reads and writes are clamped; writes go through to the source ref. A getter or computed source yields a readonly computed. Bounds are reactive. Pure derived state: SSR-safe and nothing to dispose.

function useClamp( value: (() => number) | ComputedRef<number>, min: MaybeRefOrGetter<number>, max: MaybeRefOrGetter<number>, ): ComputedRef<number>

const volume = useClamp(50, 0, 100);
volume.value = 150; // 100
const progress = useClamp(() => loaded.value / total.value, 0, 1);

useClamp

function useClamp( value: number | Ref<number>, min: MaybeRefOrGetter<number>, max: MaybeRefOrGetter<number>, ): WritableComputedRef<number>

useClamp

function useClamp( value: MaybeRefOrGetter<number>, min: MaybeRefOrGetter<number>, max: MaybeRefOrGetter<number>, ): ComputedRef<number> | WritableComputedRef<number>

useRound

Reactive rounding with decimal precision. Uses exponent shifting instead of multiplying by powers of ten, so values such as 1.005 round to 1.01 at two decimals. Pure derived state.

function useRound( value: MaybeRefOrGetter<number>, options: UseRoundOptions = {}, ): ComputedRef<number>

const price = useRound(rawPrice, { precision: 2 });

useProjection

Linearly map a value from one domain to another. Domains are reactive tuples and may be reversed ([100, 0]). A degenerate source domain maps everything to the target start. Pure derived state.

function useProjection( value: MaybeRefOrGetter<number>, from: MaybeRefOrGetter<ProjectionDomain>, to: MaybeRefOrGetter<ProjectionDomain>, options: UseProjectionOptions = {}, ): ComputedRef<number>

const percent = useProjection(scrollY, () => [0, maxScroll.value], [0, 100], { clamp: true });

Types

UseRoundOptions

Options for useRound.

UseProjectionOptions

Options for useProjection.