@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/components/range/RangeTrack.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,24 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useRangeContext } from "./use-range.js";
+import { createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/range/RangeTrack.vue?vue&type=script&setup=true&lang.ts
+var RangeTrack_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RangeTrack",
+	inheritAttrs: false,
+	__name: "RangeTrack",
+	props: { as: { default: "div" } },
+	setup(__props) {
+		const props = __props;
+		const { trackProps, state } = useRangeContext();
+		const merged = usePartProps(trackProps);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(state))))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { RangeTrack_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/range/RangeValue.js

@@ -0,0 +1,5 @@
+import RangeValue_vue_vue_type_script_setup_true_lang_default from "./RangeValue.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/range/RangeValue.vue
+var RangeValue_default = RangeValue_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RangeValue_default as default };

package/dist/components/range/RangeValue.vue.d.ts

@@ -0,0 +1,25 @@
+import { type RangeState } from './use-range';
+type __VLS_Props = {
+    /** Element or component to render. */
+    as?: string | object;
+};
+type __VLS_Slots = {
+    default(props: RangeState & {
+        /**
+         * Each value written with the root's `format`.
+         * @attribute none
+         */
+        formattedValues: string[];
+    }): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, 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;
+    };
+};

package/dist/components/range/RangeValue.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,25 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useRangeContext } from "./use-range.js";
+import { computed, createBlock, createTextVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+//#region src/components/range/RangeValue.vue?vue&type=script&setup=true&lang.ts
+var RangeValue_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RangeValue",
+	inheritAttrs: false,
+	__name: "RangeValue",
+	props: { as: { default: "output" } },
+	setup(__props) {
+		const props = __props;
+		const { valueProps, state, formattedValues } = useRangeContext();
+		const merged = usePartProps(valueProps);
+		const text = computed(() => formattedValues.value.join(" – "));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", mergeProps({ formattedValues: unref(formattedValues) }, unref(state)), () => [createTextVNode(toDisplayString(text.value), 1)])]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { RangeValue_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/range/range-math.d.ts

@@ -0,0 +1,31 @@
+/** What a dragged thumb does on meeting another. */
+export type ThumbCollisionBehavior = 'push' | 'swap' | 'none';
+/** The numbers every value is measured against. */
+export interface Scale {
+    min: number;
+    max: number;
+    step: number;
+    /** The smallest distance between neighboring thumbs. */
+    gap: number;
+}
+export declare const clamp: (value: number, low: number, high: number) => number;
+/** Where `value` sits between `min` and `max`, in percent. `NaN` for an empty interval. */
+export declare const toPercent: (value: number, { min, max }: Scale) => number;
+/** Rounds away float noise at the finest precision any of `sources` carries. */
+export declare function tidy(value: number, ...sources: number[]): number;
+/** The grid value nearest `value`, counting from `min`. */
+export declare function snap(value: number, { min, step }: Scale): number;
+/** How far thumb `index` may go without crowding a neighbor. */
+export declare function roomFor(values: readonly number[], index: number, scale: Scale): [low: number, high: number];
+export interface DragResult {
+    values: number[];
+    /** The thumb holding the drag afterwards; only a swap changes it. */
+    index: number;
+}
+/**
+ * Moves thumb `index` towards `target` during a drag.
+ *
+ * `origin` is the values as the drag began: a pushed thumb falls back towards
+ * where it stood then, and never past it.
+ */
+export declare function dragTo(values: readonly number[], index: number, target: number, scale: Scale, behavior: ThumbCollisionBehavior, origin?: readonly number[]): DragResult;

package/dist/components/range/range-math.js

@@ -0,0 +1,82 @@
+//#region src/components/range/range-math.ts
+var clamp = (value, low, high) => Math.min(Math.max(value, low), high);
+/** Where `value` sits between `min` and `max`, in percent. `NaN` for an empty interval. */
+var toPercent = (value, { min, max }) => (value - min) / (max - min) * 100;
+/** Digits after the point, read off the exponent form so `1e-7` counts as seven. */
+function decimals(value) {
+	if (!Number.isFinite(value)) return 0;
+	const [mantissa = "", exponent = "0"] = value.toExponential().split("e");
+	return Math.max(0, (mantissa.split(".")[1]?.length ?? 0) - Number(exponent));
+}
+/** Rounds away float noise at the finest precision any of `sources` carries. */
+function tidy(value, ...sources) {
+	return Number(value.toFixed(Math.max(0, ...sources.map(decimals))));
+}
+/** The grid value nearest `value`, counting from `min`. */
+function snap(value, { min, step }) {
+	return tidy(min + Math.round((value - min) / step) * step, min, step);
+}
+/** How far thumb `index` may go without crowding a neighbor. */
+function roomFor(values, index, scale) {
+	const below = values[index - 1];
+	const above = values[index + 1];
+	const low = below === void 0 ? scale.min : tidy(below + scale.gap, below, scale.gap);
+	const high = above === void 0 ? scale.max : tidy(above - scale.gap, above, scale.gap);
+	return [Math.max(low, scale.min), Math.min(high, scale.max)];
+}
+/**
+* Moves thumb `index` towards `target` during a drag.
+*
+* `origin` is the values as the drag began: a pushed thumb falls back towards
+* where it stood then, and never past it.
+*/
+function dragTo(values, index, target, scale, behavior, origin = values) {
+	const last = values.length - 1;
+	const reachable = clamp(target, tidy(scale.min + index * scale.gap, scale.min, scale.gap), tidy(scale.max - (last - index) * scale.gap, scale.max, scale.gap));
+	if (behavior === "push") return {
+		values: push(origin, index, reachable, scale.gap),
+		index
+	};
+	if (behavior === "swap") return swap(values, index, target, scale);
+	const next = [...values];
+	next[index] = clamp(reachable, ...roomFor(values, index, scale));
+	return {
+		values: next,
+		index
+	};
+}
+/** Each thumb beyond the dragged one keeps a gap from its neighbor, or its own origin, whichever is further out. */
+function push(origin, index, target, gap) {
+	const next = [...origin];
+	next[index] = target;
+	for (let i = index + 1; i < next.length; i += 1) next[i] = Math.max(origin[i], tidy(next[i - 1] + gap, next[i - 1], gap));
+	for (let i = index - 1; i >= 0; i -= 1) next[i] = Math.min(origin[i], tidy(next[i + 1] - gap, next[i + 1], gap));
+	return next;
+}
+/**
+* The drag moves into whichever slot `target` now falls in. The thumbs it
+* passed keep their values; only a thumb moved strictly past counts, so
+* meeting a neighbor exactly is not yet a swap.
+*/
+function swap(values, index, target, scale) {
+	const others = values.filter((_, i) => i !== index);
+	const slot = others.filter((value, i) => value < target || value === target && i < index).length;
+	const next = [...others];
+	next.splice(slot, 0, target);
+	const [low, high] = roomFor(next, slot, scale);
+	if (low > high) {
+		const stay = [...values];
+		stay[index] = clamp(target, ...roomFor(values, index, scale));
+		return {
+			values: stay,
+			index
+		};
+	}
+	next[slot] = clamp(target, low, high);
+	return {
+		values: next,
+		index: slot
+	};
+}
+//#endregion
+export { clamp, dragTo, roomFor, snap, tidy, toPercent };

package/dist/components/range/use-range.d.ts

@@ -0,0 +1,189 @@
+import { type ComputedRef, type MaybeRefOrGetter, type Ref, type WritableComputedRef } from 'vue';
+import { type Scale, type ThumbCollisionBehavior } from './range-math';
+export type { ThumbCollisionBehavior };
+export type RangeOrientation = 'horizontal' | 'vertical';
+export type ThumbAlignment = 'center' | 'edge';
+export type RangeChangeReason = 'input-change' | 'track-press' | 'drag' | 'keyboard' | 'none';
+export interface RangeChangeDetails {
+    reason: RangeChangeReason;
+    event: Event;
+    activeThumbIndex: number;
+}
+export interface RangeState {
+    /**
+     * The thumb currently focused, or `-1`.
+     * @attribute none
+     */
+    activeThumbIndex: number;
+    /** Whether it ignores interaction. */
+    disabled: boolean;
+    /** Whether a pointer is down on it. */
+    dragging: boolean;
+    /** Whether the value is invalid. */
+    invalid: boolean;
+    /** Which way the control runs. */
+    orientation: RangeOrientation;
+    /**
+     * The highest value.
+     * @attribute none
+     */
+    max: number;
+    /**
+     * The lowest value.
+     * @attribute none
+     */
+    min: number;
+    /**
+     * The least gap between thumbs, in steps.
+     * @attribute none
+     */
+    minStepsBetweenValues: number;
+    /**
+     * The grid values snap to.
+     * @attribute none
+     */
+    step: number;
+    /**
+     * Every thumb's value, in order.
+     * @attribute none
+     */
+    values: readonly number[];
+}
+export interface RangeConfig {
+    min: number;
+    max: number;
+    step: number;
+    largeStep: number;
+    minStepsBetweenValues: number;
+    orientation: RangeOrientation;
+    /** Whether thumbs are inset within the control — `thumbAlignment: 'edge'`. */
+    inset: boolean;
+    disabled: boolean;
+    format: Intl.NumberFormatOptions | undefined;
+    locale: Intl.LocalesArgument | undefined;
+    name: string | undefined;
+    form: string | undefined;
+    thumbCollisionBehavior: ThumbCollisionBehavior;
+}
+export interface UseRangeOptions {
+    value?: MaybeRefOrGetter<number | number[] | undefined>;
+    /** The initial value while uncontrolled. Defaults to `min`. */
+    defaultValue?: MaybeRefOrGetter<number | number[] | undefined>;
+    /** The smallest value. @default 0 */
+    min?: MaybeRefOrGetter<number>;
+    /** The largest value. @default 100 */
+    max?: MaybeRefOrGetter<number>;
+    /** The granularity values snap to, counting from `min`. @default 1 */
+    step?: MaybeRefOrGetter<number>;
+    /** The step taken by Page Up/Page Down, or by a shifted arrow key. @default 10 */
+    largeStep?: MaybeRefOrGetter<number>;
+    /** How many steps must separate neighboring thumbs. @default 0 */
+    minStepsBetweenValues?: MaybeRefOrGetter<number>;
+    disabled?: MaybeRefOrGetter<boolean>;
+    /** Whether the value is invalid. Also read from a surrounding field. */
+    invalid?: MaybeRefOrGetter<boolean>;
+    orientation?: MaybeRefOrGetter<RangeOrientation>;
+    /** @default 'center' */
+    thumbAlignment?: MaybeRefOrGetter<ThumbAlignment>;
+    /**
+     * What happens when a dragged thumb meets another.
+     *
+     * - `push` shoves the others along
+     * - `swap` hands the drag over to the thumb in the way
+     * - `none` stops the dragged thumb at its neighbor
+     *
+     * @default 'push'
+     */
+    thumbCollisionBehavior?: MaybeRefOrGetter<ThumbCollisionBehavior>;
+    /** Passed to `Intl.NumberFormat` when the value is displayed or announced. */
+    format?: MaybeRefOrGetter<Intl.NumberFormatOptions | undefined>;
+    /** Defaults to the runtime locale. */
+    locale?: MaybeRefOrGetter<Intl.LocalesArgument | undefined>;
+    /** The id of the single-thumb input. One is generated when omitted. */
+    id?: MaybeRefOrGetter<string | undefined>;
+    /** Name submitted with the form, on each thumb's input. */
+    name?: MaybeRefOrGetter<string | undefined>;
+    /** Id of the form to associate with, when the inputs are not descendants of it. */
+    form?: MaybeRefOrGetter<string | undefined>;
+    /** Called on every change, including each move of a drag. */
+    onChange?: (value: number | number[], details: RangeChangeDetails) => void;
+    /**
+     * Called once an interaction settles: on pointer release, or straight after a
+     * keyboard step. Never called for a change that did not move the value.
+     */
+    onCommit?: (value: number | number[], details: RangeChangeDetails) => void;
+}
+/** What a thumb hands its root so the root can find, measure and focus it. */
+interface ThumbSlot {
+    /** The `index` prop, when given; otherwise the slot's mount order decides. */
+    explicitIndex: () => number | undefined;
+    disabled: () => boolean;
+    inputId: () => string;
+    element: Ref<HTMLElement | null>;
+    input: Ref<HTMLInputElement | null>;
+}
+export interface UseRangeReturn {
+    /** The value in the shape it was given — a number, or an array. Writable. */
+    value: WritableComputedRef<number | number[]>;
+    /** The value normalized: clamped, sorted, and always an array. */
+    values: ComputedRef<readonly number[]>;
+    /** Each value run through `Intl.NumberFormat`. */
+    formattedValues: ComputedRef<string[]>;
+    state: ComputedRef<RangeState>;
+    /** The options resolved to plain values. */
+    config: ComputedRef<RangeConfig>;
+    rootProps: ComputedRef<Record<string, unknown>>;
+    labelProps: ComputedRef<Record<string, unknown>>;
+    valueProps: ComputedRef<Record<string, unknown>>;
+    controlProps: ComputedRef<Record<string, unknown>>;
+    trackProps: ComputedRef<Record<string, unknown>>;
+    indicatorProps: ComputedRef<Record<string, unknown>>;
+    /** Names the range with the label element. Returns the undo. */
+    registerLabel: () => () => void;
+    /** @internal The rest is what `useRangeThumb` works through. */
+    thumbs: RangeThumbHost;
+}
+/** @internal */
+export interface RangeThumbHost {
+    scale: ComputedRef<Scale>;
+    hooks: ComputedRef<Record<string, string>>;
+    controlEl: Ref<HTMLElement | null>;
+    rtl: Ref<boolean>;
+    activeIndex: Ref<number>;
+    lastUsedIndex: Ref<number>;
+    labelledBy: ComputedRef<string | undefined>;
+    /** Measured positions of edge-aligned thumbs, by index, for the indicator. */
+    positions: Map<number, number>;
+    add: (slot: ThumbSlot) => () => void;
+    indexOf: (slot: ThumbSlot) => number;
+    onKeydown: (index: number, event: KeyboardEvent) => void;
+    onChange: (index: number, event: Event) => void;
+    onFocus: (index: number) => void;
+    onBlur: (index: number) => void;
+}
+export declare function useRange(options?: UseRangeOptions): UseRangeReturn;
+export declare const provideRangeContext: (value: UseRangeReturn) => UseRangeReturn, useRangeContext: () => UseRangeReturn;
+export interface UseRangeThumbOptions {
+    index?: MaybeRefOrGetter<number | undefined>;
+    /** Whether this thumb alone ignores user interaction. */
+    disabled?: MaybeRefOrGetter<boolean>;
+    /** Names the thumb, for a range whose ends need distinguishing. */
+    ariaLabel?: MaybeRefOrGetter<string | undefined>;
+    /** Overrides what is announced in place of the raw number. */
+    valueText?: MaybeRefOrGetter<string | undefined>;
+    /** Builds what is announced, from the formatted value. Wins over `valueText`. */
+    getValueText?: (formattedValue: string, value: number, index: number) => string;
+    tabIndex?: MaybeRefOrGetter<number | undefined>;
+}
+export interface UseRangeThumbReturn {
+    /** This thumb's position in the value list. */
+    index: ComputedRef<number>;
+    /** This thumb's value. */
+    value: ComputedRef<number>;
+    state: ComputedRef<RangeState>;
+    /** Bind to the element that looks like a thumb. Positions itself. */
+    thumbProps: ComputedRef<Record<string, unknown>>;
+    /** Bind to the `<input type="range">` inside it. Required. */
+    inputProps: ComputedRef<Record<string, unknown>>;
+}
+export declare function useRangeThumb(options?: UseRangeThumbOptions): UseRangeThumbReturn;