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

package/dist/shared/input-filter.js

@@ -0,0 +1,66 @@
+//#region src/shared/input-filter.ts
+var compiled = /* @__PURE__ */ new Map();
+/**
+* Turns a filter into a predicate over the prospective value.
+*
+* Returns `null` for a source that will not compile, so a typo in a filter
+* leaves the control usable instead of rejecting every keystroke.
+*/
+function toFilterPredicate(filter) {
+	if (typeof filter === "function") return filter;
+	if (typeof filter === "string") {
+		if (!compiled.has(filter)) try {
+			compiled.set(filter, new RegExp(`^(?:${filter})$`));
+		} catch {
+			if (process.env.NODE_ENV !== "production") console.warn(`[useField] The filter ${JSON.stringify(filter)} is not a valid regular expression, so nothing is being filtered.`);
+			compiled.set(filter, null);
+		}
+		const expression = compiled.get(filter);
+		return expression && ((next) => expression.test(next));
+	}
+	const expression = filter.global || filter.sticky ? new RegExp(filter.source, filter.flags.replace(/[gy]/g, "")) : filter;
+	return (next) => expression.test(next);
+}
+/** The text an insertion is about to add, or `null` when it cannot be read. */
+function insertedText(event) {
+	if (event.data != null) return event.data;
+	return event.dataTransfer?.getData("text/plain") ?? null;
+}
+/**
+* The value the control would hold if the insertion went ahead.
+*
+* Returns `null` when the element exposes no selection — `number`, `email` and
+* `date` inputs among others — in which case only the inserted text itself can
+* be judged.
+*/
+function prospectiveValue(element, inserted) {
+	const start = element.selectionStart;
+	const end = element.selectionEnd;
+	if (start === null || end === null) return null;
+	return element.value.slice(0, start) + inserted + element.value.slice(end);
+}
+/** Digits, an optional leading sign and at most one decimal point. */
+var NUMERIC = /^-?\d*(?:\.\d*)?$/;
+/** The same without the sign, for a control whose `min` rules negatives out. */
+var NON_NEGATIVE_NUMERIC = /^\d*(?:\.\d*)?$/;
+var bound = (raw) => {
+	const number = raw === void 0 || raw === "" ? NaN : Number(raw);
+	return Number.isFinite(number) ? number : void 0;
+};
+/**
+* Whether a typed number breaks `min`, `max` or `step`, as a native number
+* input would judge it. A half-typed `-` or `.` is no number yet, so it passes.
+*/
+function outOfRange(value, limits) {
+	const number = value.trim() === "" ? NaN : Number(value);
+	if (!Number.isFinite(number)) return false;
+	const min = bound(limits.min);
+	const max = bound(limits.max);
+	if (min !== void 0 && number < min || max !== void 0 && number > max) return true;
+	const step = bound(limits.step);
+	if (step === void 0 || step <= 0) return false;
+	const steps = (number - (min ?? 0)) / step;
+	return Math.abs(steps - Math.round(steps)) > 1e-9;
+}
+//#endregion
+export { NON_NEGATIVE_NUMERIC, NUMERIC, insertedText, outOfRange, prospectiveValue, toFilterPredicate };

package/dist/shared/input-modality.d.ts

@@ -0,0 +1,3 @@
+export type InputModality = 'pointer' | 'keyboard';
+export declare function getInputModality(): InputModality;
+export declare function isKeyboardFocus(): boolean;

package/dist/shared/input-modality.js

@@ -0,0 +1,26 @@
+//#region src/shared/input-modality.ts
+/** How the user most recently interacted, used to decide whether focus deserves a visible response. */
+var modality = "keyboard";
+var listening = false;
+function onPointer() {
+	modality = "pointer";
+}
+function onKeydown(event) {
+	if (event.metaKey || event.altKey || event.ctrlKey) return;
+	modality = "keyboard";
+}
+function ensureListening() {
+	if (listening || typeof document === "undefined") return;
+	listening = true;
+	document.addEventListener("pointerdown", onPointer, true);
+	document.addEventListener("keydown", onKeydown, true);
+}
+function getInputModality() {
+	ensureListening();
+	return modality;
+}
+function isKeyboardFocus() {
+	return getInputModality() === "keyboard";
+}
+//#endregion
+export { getInputModality, isKeyboardFocus };

package/dist/shared/labeling.d.ts

@@ -0,0 +1,12 @@
+import { type ComputedRef, type Ref } from 'vue';
+export type RegisterId = (id: string) => () => void;
+export interface Labeling {
+    titleId: Ref<string | undefined>;
+    descriptionId: Ref<string | undefined>;
+    registerTitle: RegisterId;
+    registerDescription: RegisterId;
+}
+/** The ids a root's title and description register, for its `aria-labelledby`/`-describedby`. */
+export declare function useLabeling(): Labeling;
+/** The part's id, registered with its root while mounted. */
+export declare function useRegisteredId(register: RegisterId): ComputedRef<string>;

package/dist/shared/labeling.js

@@ -0,0 +1,29 @@
+import { computed, ref, useAttrs, useId, watch } from "vue";
+//#region src/shared/labeling.ts
+/** The ids a root's title and description register, for its `aria-labelledby`/`-describedby`. */
+function useLabeling() {
+	const titleId = ref();
+	const descriptionId = ref();
+	const slot = (target) => (id) => {
+		target.value = id;
+		return () => {
+			if (target.value === id) target.value = void 0;
+		};
+	};
+	return {
+		titleId,
+		descriptionId,
+		registerTitle: slot(titleId),
+		registerDescription: slot(descriptionId)
+	};
+}
+/** The part's id, registered with its root while mounted. */
+function useRegisteredId(register) {
+	const attrs = useAttrs();
+	const generated = useId();
+	const id = computed(() => attrs.id ?? generated);
+	watch(id, (next, _, onCleanup) => onCleanup(register(next)), { immediate: true });
+	return id;
+}
+//#endregion
+export { useLabeling, useRegisteredId };

package/dist/shared/link.d.ts

@@ -0,0 +1,12 @@
+import type { Component } from 'vue';
+/**
+ * What a link the library draws renders as when it isn't told: a page of a
+ * paginator, a menu item with `to`. `a` by default, with `to` as its `href`;
+ * a router link takes `to` as it is. The Nuxt module sets `NuxtLink`.
+ *
+ * ```ts
+ * configureLink(RouterLink);
+ * ```
+ */
+export declare function configureLink(component: string | Component): void;
+export declare function defaultLink(): string | Component;

package/dist/shared/link.js

@@ -0,0 +1,19 @@
+//#region src/shared/link.ts
+var link = "a";
+/**
+* What a link the library draws renders as when it isn't told: a page of a
+* paginator, a menu item with `to`. `a` by default, with `to` as its `href`;
+* a router link takes `to` as it is. The Nuxt module sets `NuxtLink`.
+*
+* ```ts
+* configureLink(RouterLink);
+* ```
+*/
+function configureLink(component) {
+	link = component;
+}
+function defaultLink() {
+	return link;
+}
+//#endregion
+export { configureLink, defaultLink };

package/dist/shared/merge-props.d.ts

@@ -0,0 +1,18 @@
+/** A DOM event whose caller-side handler can stop the library's own handler. */
+export type PreventableEvent<E extends Event = Event> = E & {
+    /** Skips the handlers merged in before this one — the library's own. */
+    preventInternalHandler: () => void;
+};
+export type EventHandler = (...args: any[]) => any;
+type Props = Record<string, any>;
+/**
+ * Merges sets of Vue props; a later set wins a conflict, as with `Object.assign`.
+ *
+ * - `class` and `style` from every set are combined, later declarations winning.
+ * - `onXxx` listeners from every set all run, the last set's first. The library
+ *   passes its own bag first and the caller's attrs last, so the caller's
+ *   handler runs first and can call `event.preventInternalHandler()` to skip
+ *   the ones before it.
+ */
+export declare function mergeProps(...sets: (Props | undefined)[]): Props;
+export {};

package/dist/shared/merge-props.js

@@ -0,0 +1,67 @@
+import { normalizeClass, normalizeStyle } from "vue";
+//#region src/shared/merge-props.ts
+var LISTENER = /^on[A-Z]/;
+/**
+* Merges sets of Vue props; a later set wins a conflict, as with `Object.assign`.
+*
+* - `class` and `style` from every set are combined, later declarations winning.
+* - `onXxx` listeners from every set all run, the last set's first. The library
+*   passes its own bag first and the caller's attrs last, so the caller's
+*   handler runs first and can call `event.preventInternalHandler()` to skip
+*   the ones before it.
+*/
+function mergeProps$1(...sets) {
+	const merged = {};
+	const listeners = /* @__PURE__ */ new Map();
+	const classes = [];
+	const styles = [];
+	for (const set of sets) {
+		if (!set) continue;
+		for (const [key, value] of Object.entries(set)) if (key === "class") classes.push(value);
+		else if (key === "style") styles.push(value);
+		else if (LISTENER.test(key) && isListenerValue(value)) addListeners(listeners, key, value);
+		else merged[key] = value;
+	}
+	const className = normalizeClass(classes);
+	if (className) merged.class = className;
+	const style = normalizeStyle(styles);
+	if (style && Object.keys(style).length > 0) merged.style = style;
+	for (const [key, groups] of listeners) merged[key] = dispatcher(groups);
+	return merged;
+}
+/** A listener prop may hold one function, several (as Vue itself merges them), or nothing. */
+function isListenerValue(value) {
+	return value === void 0 || typeof value === "function" || Array.isArray(value);
+}
+/** Keeps each set's listeners as a group, so an array keeps its own order. */
+function addListeners(listeners, key, value) {
+	const group = [value].flat().filter((handler) => typeof handler === "function");
+	if (group.length === 0) return;
+	const groups = listeners.get(key);
+	if (groups) groups.push(group);
+	else listeners.set(key, [group]);
+}
+/**
+* One listener running the sets' groups from the last to the first. A DOM
+* event gets `preventInternalHandler` even when there is a single handler, so a
+* caller can call it without knowing whether the library attached one; its
+* effect ends with this element's handlers, not with the event.
+*/
+function dispatcher(groups) {
+	const [outermost, ...inner] = [...groups].reverse().flat();
+	return (...args) => {
+		const [event] = args;
+		let skipRest = false;
+		if (typeof Event !== "undefined" && event instanceof Event) event.preventInternalHandler = () => {
+			skipRest = true;
+		};
+		const result = outermost(...args);
+		for (const handler of inner) {
+			if (skipRest) break;
+			handler(...args);
+		}
+		return result;
+	};
+}
+//#endregion
+export { mergeProps$1 as mergeProps };

package/dist/shared/model-modifiers.d.ts

@@ -0,0 +1,11 @@
+/** `v-model.optional` writes `undefined` once the value is emptied: `''`, `[]` or `null`. */
+export interface ModelModifiers {
+    optional?: boolean;
+}
+/** A text input's: `.trim` and `.number` as on an `<input>`, which Vue applies to the emitted value. */
+export interface InputModelModifiers extends ModelModifiers {
+    trim?: boolean;
+    number?: boolean;
+}
+/** The value as `v-model` receives it under `modifiers`. */
+export declare function applyModelModifiers<T>(value: T, modifiers?: InputModelModifiers): T | undefined;

package/dist/shared/model-modifiers.js

@@ -0,0 +1,9 @@
+//#region src/shared/model-modifiers.ts
+/** The value as `v-model` receives it under `modifiers`. */
+function applyModelModifiers(value, modifiers) {
+	if (!modifiers?.optional) return value;
+	const text = modifiers.trim && typeof value === "string" ? value.trim() : value;
+	return text === null || text === "" || Array.isArray(text) && text.length === 0 ? void 0 : value;
+}
+//#endregion
+export { applyModelModifiers };

package/dist/shared/part.d.ts

@@ -0,0 +1,16 @@
+import { type Component, type FunctionalComponent, type VNode } from 'vue';
+/** The one element or component among `nodes`, past fragments, comments and blank text; `undefined` for none or several. */
+export declare function singleChild(nodes: VNode[] | undefined): VNode | undefined;
+/**
+ * Renders a part's `as` with `h()`. `<component :is="'button'">` first looks for
+ * a registered component of that name, case-insensitively, so an app's global
+ * `Button` would stand in for every native button the library renders.
+ *
+ * `as="child"` renders no element of its own: the one element or component in
+ * the slot becomes the part. Its props merge with the part's as a caller's do:
+ * its own win, and its handlers run first. A ref on a functional component is
+ * the element it renders, so the part still gets its element.
+ */
+export declare const Part: FunctionalComponent<{
+    as: string | Component;
+}>;

package/dist/shared/part.js

@@ -0,0 +1,42 @@
+import { mergeProps as mergeProps$1 } from "./merge-props.js";
+import { Comment, Fragment, Text, cloneVNode, h } from "vue";
+//#region src/shared/part.ts
+/** The one element or component among `nodes`, past fragments, comments and blank text; `undefined` for none or several. */
+function singleChild(nodes) {
+	const found = [];
+	const walk = (list) => {
+		for (const node of list) if (node.type === Fragment) walk(node.children);
+		else if (node.type === Comment) continue;
+		else if (node.type === Text && !String(node.children).trim()) continue;
+		else found.push(node);
+	};
+	walk(nodes ?? []);
+	return found.length === 1 && found[0].type !== Text ? found[0] : void 0;
+}
+/**
+* Renders a part's `as` with `h()`. `<component :is="'button'">` first looks for
+* a registered component of that name, case-insensitively, so an app's global
+* `Button` would stand in for every native button the library renders.
+*
+* `as="child"` renders no element of its own: the one element or component in
+* the slot becomes the part. Its props merge with the part's as a caller's do:
+* its own win, and its handlers run first. A ref on a functional component is
+* the element it renders, so the part still gets its element.
+*/
+var Part = (props, { attrs, slots }) => {
+	if (props.as === "child") {
+		const child = singleChild(slots.default?.());
+		if (child) {
+			const clone = cloneVNode(child, {});
+			clone.props = mergeProps$1(attrs, child.props ?? {});
+			return clone;
+		}
+		if (process.env.NODE_ENV !== "production") console.warn("[vunset] `as=\"child\"` needs exactly one element or component in its slot.");
+		return null;
+	}
+	return typeof props.as === "string" ? h(props.as, attrs, slots.default?.()) : h(props.as, attrs, slots);
+};
+Part.props = ["as"];
+Part.inheritAttrs = false;
+//#endregion
+export { Part, singleChild };

package/dist/shared/popup-state-attrs.d.ts

@@ -0,0 +1,46 @@
+import type { TransitionStatus } from './use-transition-status';
+/**
+ * The `data-*` mapping every dismissable surface shares.
+ *
+ * `open` is emitted in both positions so CSS needs no `:not()` selector, and the
+ * transition phases become the "from" hooks an enter or exit animation needs.
+ * `idle` deliberately emits nothing — it is the resting state, not a phase.
+ */
+export declare const popupStateAttrs: {
+    open: (value: boolean) => {
+        'data-open': string;
+        'data-closed'?: undefined;
+    } | {
+        'data-closed': string;
+        'data-open'?: undefined;
+    };
+    transitionStatus: (value: TransitionStatus) => {
+        'data-enter-from': string;
+        'data-leave-to'?: undefined;
+    } | {
+        'data-leave-to': string;
+        'data-enter-from'?: undefined;
+    } | null;
+};
+export declare const anchoredStateAttrs: {
+    side: (value: string) => {
+        'data-side': string;
+    };
+    align: (value: string) => {
+        'data-align': string;
+    };
+    open: (value: boolean) => {
+        'data-open': string;
+        'data-closed'?: undefined;
+    } | {
+        'data-closed': string;
+        'data-open'?: undefined;
+    };
+    transitionStatus: (value: TransitionStatus) => {
+        'data-enter-from': string;
+        'data-leave-to'?: undefined;
+    } | {
+        'data-leave-to': string;
+        'data-enter-from'?: undefined;
+    } | null;
+};

package/dist/shared/popup-state-attrs.js

@@ -0,0 +1,23 @@
+//#region src/shared/popup-state-attrs.ts
+/**
+* The `data-*` mapping every dismissable surface shares.
+*
+* `open` is emitted in both positions so CSS needs no `:not()` selector, and the
+* transition phases become the "from" hooks an enter or exit animation needs.
+* `idle` deliberately emits nothing — it is the resting state, not a phase.
+*/
+var popupStateAttrs = {
+	open: (value) => value ? { "data-open": "" } : { "data-closed": "" },
+	transitionStatus: (value) => {
+		if (value === "enter") return { "data-enter-from": "" };
+		if (value === "leave") return { "data-leave-to": "" };
+		return null;
+	}
+};
+var anchoredStateAttrs = {
+	...popupStateAttrs,
+	side: (value) => ({ "data-side": value }),
+	align: (value) => ({ "data-align": value })
+};
+//#endregion
+export { anchoredStateAttrs, popupStateAttrs };

package/dist/shared/recycle.d.ts

@@ -0,0 +1,4 @@
+/** Marks everything below as drawn for `item`, which may change in place. */
+export declare function provideRecycle(item: () => unknown): void;
+/** Runs `reset` whenever the item this part is drawn for changes in place. */
+export declare function onRecycle(reset: () => void): void;

package/dist/shared/recycle.js

@@ -0,0 +1,14 @@
+import { inject, provide, watch } from "vue";
+//#region src/shared/recycle.ts
+var recycleKey = Symbol("recycle");
+/** Marks everything below as drawn for `item`, which may change in place. */
+function provideRecycle(item) {
+	provide(recycleKey, item);
+}
+/** Runs `reset` whenever the item this part is drawn for changes in place. */
+function onRecycle(reset) {
+	const item = inject(recycleKey, null);
+	if (item) watch(item, reset);
+}
+//#endregion
+export { onRecycle, provideRecycle };

package/dist/shared/route-query.d.ts

@@ -0,0 +1,23 @@
+import type { InjectionKey } from 'vue';
+/**
+ * The app's URL query, for a part that keeps its state there: a data table's
+ * sort. The library has no router; an app provides one through this, and the
+ * Nuxt module provides Nuxt's. `get` must be reactive.
+ *
+ * ```ts
+ * app.provide(routeQueryKey, {
+ *   get: (key) => router.currentRoute.value.query[key] as string | undefined,
+ *   set: (key, value) => router.push({ query: { ...router.currentRoute.value.query, [key]: value } })
+ * });
+ * ```
+ */
+export interface RouteQuery {
+    get: (key: string) => string | undefined;
+    /** `undefined` removes the key. */
+    set: (key: string, value: string | undefined) => void;
+    /** Several keys in one navigation, so the second write doesn't start from a URL without the first. */
+    setMany?: (entries: Record<string, string | undefined>) => void;
+}
+/** Writes made in the same tick, sent together: one navigation through `setMany`, or one `set` each. */
+export declare function batchRouteQuery(routeQuery: RouteQuery): (key: string, value: string | undefined) => void;
+export declare const routeQueryKey: InjectionKey<RouteQuery>;

package/dist/shared/route-query.js

@@ -0,0 +1,20 @@
+//#region src/shared/route-query.ts
+/** Writes made in the same tick, sent together: one navigation through `setMany`, or one `set` each. */
+function batchRouteQuery(routeQuery) {
+	let pending = null;
+	return (key, value) => {
+		if (!pending) {
+			pending = {};
+			queueMicrotask(() => {
+				const entries = pending;
+				pending = null;
+				if (routeQuery.setMany) routeQuery.setMany(entries);
+				else for (const [name, next] of Object.entries(entries)) routeQuery.set(name, next);
+			});
+		}
+		pending[key] = value;
+	};
+}
+var routeQueryKey = Symbol("vunset:route-query");
+//#endregion
+export { batchRouteQuery, routeQueryKey };

package/dist/shared/surface.d.ts

@@ -0,0 +1,27 @@
+import type { ComputedRef, Ref } from 'vue';
+/**
+ * The nearest dismissable surface: a dialog, drawer, popover, menu, tooltip or
+ * listbox popup.
+ *
+ * Every such composable publishes its parts here under one shared key, which is
+ * what lets a single `<Portal>`, `<Positioner>` and `<Popup>` serve all of them.
+ * Without it each component needs its own three components whose only
+ * distinguishing feature is which context they read — eleven files that differed
+ * by one identifier.
+ *
+ * `inject` resolves to the nearest provider, so a menu inside a dialog gets the
+ * menu's surface rather than the dialog's, which is what nesting should mean.
+ */
+export interface SurfaceContext {
+    /** Whether the surface belongs in the DOM. */
+    present: Ref<boolean>;
+    /** The surface's own state, handed to every part's slot. */
+    state: ComputedRef<object>;
+    /** The animated surface. */
+    popupProps: ComputedRef<Record<string, unknown>>;
+    /** The box that owns the position. */
+    positionerProps?: ComputedRef<Record<string, unknown>>;
+    /** The pointer towards the anchor, on surfaces that draw one. */
+    arrowProps?: ComputedRef<Record<string, unknown>>;
+}
+export declare const provideSurface: (value: SurfaceContext) => SurfaceContext, useSurface: () => SurfaceContext, useOptionalSurface: () => SurfaceContext | null;

package/dist/shared/surface.js

@@ -0,0 +1,5 @@
+import { createContext } from "./context.js";
+//#region src/shared/surface.ts
+var { provideContext: provideSurface, useContext: useSurface, useOptionalContext: useOptionalSurface } = createContext("Surface");
+//#endregion
+export { provideSurface, useSurface };

package/dist/shared/swipe-dismiss.d.ts

@@ -0,0 +1,25 @@
+/** The release rules for everything dismissed with a swipe: drawer and toast. */
+/**
+ * Rubber-banding for a pull the element cannot follow: it gives at first, then
+ * stiffens towards {@link OVER_PULL_LIMIT}. Keeps the sign of `distance`.
+ */
+export declare function resist(distance: number): number;
+export interface SwipeRelease {
+    /** Distance traveled towards dismissal, in pixels; negative the other way. */
+    traveled: number;
+    /** Speed towards dismissal at release, in pixels per millisecond. */
+    velocity: number;
+    /** The element's size along the swipe. */
+    size: number;
+    /** Fraction of `size` past which a release dismisses. @default 0.4 */
+    distanceRatio?: number;
+    /** Speed past which a shorter release still dismisses, as a flick. @default 0.4 */
+    flickSpeed?: number;
+}
+export declare function dismissesOnRelease(release: SwipeRelease): boolean;
+/** Speed along one coordinate, taken from the two most recent samples. */
+export declare function createVelocity(position: number, time: number): {
+    sample(position: number, time: number): void;
+    /** Pixels per millisecond, signed along the coordinate. */
+    speed: () => number;
+};

package/dist/shared/swipe-dismiss.js

@@ -0,0 +1,37 @@
+//#region src/shared/swipe-dismiss.ts
+/** The release rules for everything dismissed with a swipe: drawer and toast. */
+/** How far, in pixels, a pull the wrong way can stretch at most. */
+var OVER_PULL_LIMIT = 48;
+/**
+* Rubber-banding for a pull the element cannot follow: it gives at first, then
+* stiffens towards {@link OVER_PULL_LIMIT}. Keeps the sign of `distance`.
+*/
+function resist(distance) {
+	const pull = Math.abs(distance);
+	return Math.sign(distance) * pull * OVER_PULL_LIMIT / (pull + OVER_PULL_LIMIT);
+}
+function dismissesOnRelease(release) {
+	const { traveled, velocity, size, distanceRatio = .4, flickSpeed = .4 } = release;
+	if (size <= 0) return false;
+	const flicked = velocity > flickSpeed && traveled > Math.max(16, size * .05);
+	return traveled > distanceRatio * size || flicked;
+}
+/** Speed along one coordinate, taken from the two most recent samples. */
+function createVelocity(position, time) {
+	let lastPosition = position;
+	let lastTime = time;
+	let speed = 0;
+	return {
+		sample(position, time) {
+			const elapsed = time - lastTime;
+			if (elapsed <= 0) return;
+			speed = (position - lastPosition) / elapsed;
+			lastPosition = position;
+			lastTime = time;
+		},
+		/** Pixels per millisecond, signed along the coordinate. */
+		speed: () => speed
+	};
+}
+//#endregion
+export { createVelocity, dismissesOnRelease, resist };