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

package/dist/shared/toast-store.d.ts

@@ -0,0 +1,98 @@
+import { type ComputedRef, type Ref, type VNodeChild } from 'vue';
+export type ToastId = string | number;
+/** The enter/exit phase, matching the rest of the library's animation hooks. */
+export type ToastTransitionStatus = 'enter' | 'leave' | undefined;
+export interface ToastOptions<Data = unknown> {
+    /** Reuse an id to replace a toast that is already showing. One is generated otherwise. */
+    id?: ToastId;
+    /** What `ToastTitle` shows unless given content of its own. */
+    title?: string;
+    /** What `ToastDescription` shows unless given content of its own. */
+    text?: string;
+    /** Free-form, for the template to branch on. `loading` never times out; move it on with `update`. */
+    type?: string;
+    /** Keeps the toast up until it is dismissed by hand. */
+    manualClose?: boolean;
+    /** Milliseconds before it dismisses itself. Ignored when `manualClose` is set. */
+    timeout?: number;
+    /**
+     * Renders this one toast instead of the viewport's registered template.
+     *
+     * The escape hatch for a toast that looks nothing like the others — it still
+     * has to render a `ToastRoot` to take part in the stack.
+     */
+    slot?: (toast: Toast<Data>) => VNodeChild;
+    /** Anything else the template needs. */
+    data?: Data;
+    /** Runs as it starts to leave, however it was dismissed. */
+    onClose?: () => void;
+}
+export interface Toast<Data = unknown> extends ToastOptions<Data> {
+    id: ToastId;
+    transitionStatus: ToastTransitionStatus;
+    /** Measured natural height, published so the stack can lay itself out. */
+    height: number;
+    /**
+     * How many times this toast has been raised again under the same id.
+     *
+     * `0` for one that has only been shown once. A repeat replaces the toast
+     * where it stands rather than stacking a duplicate, so this counter is the
+     * only trace of it — and what a stylesheet can hang a nudge on to show that
+     * something happened.
+     */
+    repeatCount: number;
+}
+/** A toast's place in the stack. Derived, so it never drifts from the list. */
+export interface ToastPlacement {
+    /** Position among the toasts still arriving or resting. `-1` once leaving. */
+    visibleIndex: number;
+    /** Combined height of everything in front of it, which is where it sits when expanded. */
+    offsetY: number;
+    /** Whether it is beyond the viewport's limit and should be held back. */
+    limited: boolean;
+}
+/** A toast's timeout, as a progress bar follows it. */
+export interface ToastTimer {
+    /** Its full length, in milliseconds. */
+    duration: number;
+    /** Whether it is held: while the stack is expanded, and once the toast is leaving. */
+    paused: boolean;
+    /** Goes up each time it starts over, after an update or a repeat. */
+    cycle: number;
+}
+export interface ToastStore {
+    /** Newest first, which is also front-to-back in the stack. */
+    toasts: Ref<Toast<any>[]>;
+    /** Whether the stack is fanned out, because it is hovered or holds focus. */
+    expanded: ComputedRef<boolean>;
+    placements: ComputedRef<Map<ToastId, ToastPlacement>>;
+    /** How many toasts stay visible. Set by the viewport. */
+    limit: Ref<number>;
+    /** The fallback timeout, for toasts that name none. Set by the viewport. */
+    timeout: Ref<number>;
+    add: <Data>(options: ToastOptions<Data>) => ToastId;
+    /** Changes a toast in place, keeping what `options` leaves out. Ignored once it is leaving. */
+    update: <Data>(id: ToastId, options: ToastOptions<Data>) => void;
+    /** Starts the toast leaving. It is removed once its exit animation finishes. */
+    close: (id: ToastId) => void;
+    /** Takes the toast out of the list, ending any animation immediately. */
+    remove: (id: ToastId) => void;
+    closeAll: () => void;
+    /** Its timeout, or `undefined` for one that never times out. */
+    timer: (id: ToastId) => ToastTimer | undefined;
+    setHeight: (id: ToastId, height: number) => void;
+    setTransitionStatus: (id: ToastId, status: ToastTransitionStatus) => void;
+    setHovering: (value: boolean) => void;
+    setFocused: (value: boolean) => void;
+}
+export declare const DEFAULT_TIMEOUT = 5000;
+export declare function createToastStore(): ToastStore;
+/**
+ * The store used when none is named.
+ *
+ * A module-level instance is what lets `useToast().setToast(...)` be called from
+ * a plain module — an API client, a router guard — with nothing to wire up.
+ * Anything that needs isolation, such as a server render or a second app on the
+ * page, should create its own with {@link createToastStore}.
+ */
+export declare const defaultToastStore: ToastStore;

package/dist/shared/toast-store.js

@@ -0,0 +1,220 @@
+import { computed, ref, shallowReactive } from "vue";
+//#region src/shared/toast-store.ts
+var DEFAULT_TIMEOUT = 5e3;
+function createToastStore() {
+	let counter = 0;
+	const toasts = ref([]);
+	const hovering = ref(false);
+	const focused = ref(false);
+	const limit = ref(3);
+	const timeout = ref(DEFAULT_TIMEOUT);
+	const expanded = computed(() => hovering.value || focused.value);
+	const timers = /* @__PURE__ */ new Map();
+	const runs = shallowReactive(/* @__PURE__ */ new Map());
+	let cycles = 0;
+	function find(id) {
+		return toasts.value.find((toast) => toast.id === id);
+	}
+	/**
+	* Where each toast sits, recomputed from the list rather than stored on it.
+	* A leaving toast drops out of the running total at once, so the ones behind
+	* close the gap while it fades rather than after it is gone.
+	*/
+	const placements = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		let resting = 0;
+		let depth = 0;
+		for (const toast of toasts.value) {
+			if (toast.transitionStatus === "leave") {
+				map.set(toast.id, {
+					visibleIndex: -1,
+					offsetY: depth,
+					limited: false
+				});
+				continue;
+			}
+			map.set(toast.id, {
+				visibleIndex: resting,
+				offsetY: depth,
+				limited: resting >= limit.value
+			});
+			resting += 1;
+			depth += toast.height;
+		}
+		return map;
+	});
+	function clearTimer(id) {
+		const timer = timers.get(id);
+		if (timer?.handle !== void 0) {
+			clearTimeout(timer.handle);
+			timer.handle = void 0;
+		}
+	}
+	function runTimer(id) {
+		const timer = timers.get(id);
+		if (!timer || timer.handle !== void 0 || expanded.value) return;
+		timer.deadline = Date.now() + timer.remaining;
+		timer.handle = setTimeout(() => {
+			timers.delete(id);
+			close(id);
+		}, timer.remaining);
+	}
+	function pauseTimer(id) {
+		const timer = timers.get(id);
+		if (!timer || timer.handle === void 0) return;
+		clearTimeout(timer.handle);
+		timer.handle = void 0;
+		timer.remaining = Math.max(0, timer.deadline - Date.now());
+	}
+	function startTimer(toast) {
+		if (toast.manualClose || toast.type === "loading") return;
+		const duration = toast.timeout ?? timeout.value;
+		if (duration <= 0) return;
+		runs.set(toast.id, {
+			duration,
+			cycle: ++cycles
+		});
+		if (typeof window === "undefined") return;
+		timers.set(toast.id, {
+			remaining: duration,
+			deadline: 0,
+			handle: void 0
+		});
+		runTimer(toast.id);
+	}
+	function add(options) {
+		let id = options.id;
+		while (id === void 0 || options.id === void 0 && find(id)) {
+			counter += 1;
+			id = `toast-${counter}`;
+		}
+		const toast = {
+			...options,
+			id,
+			transitionStatus: "enter",
+			height: 0,
+			repeatCount: 0
+		};
+		const existing = toasts.value.findIndex((entry) => entry.id === id);
+		if (existing !== -1) {
+			clearTimer(id);
+			timers.delete(id);
+			runs.delete(id);
+			const previous = toasts.value[existing];
+			const returning = previous.transitionStatus === "leave";
+			const next = toasts.value.slice();
+			next[existing] = {
+				...toast,
+				transitionStatus: returning ? "enter" : void 0,
+				height: previous.height,
+				repeatCount: returning ? 0 : previous.repeatCount + 1
+			};
+			toasts.value = next;
+		} else toasts.value = [toast, ...toasts.value];
+		startTimer(toast);
+		return id;
+	}
+	function update(id, options) {
+		const index = toasts.value.findIndex((entry) => entry.id === id);
+		const previous = toasts.value[index];
+		if (!previous || previous.transitionStatus === "leave") return;
+		clearTimer(id);
+		timers.delete(id);
+		runs.delete(id);
+		const next = toasts.value.slice();
+		next[index] = {
+			...previous,
+			...options,
+			id
+		};
+		toasts.value = next;
+		startTimer(next[index]);
+	}
+	function close(id) {
+		const toast = find(id);
+		if (!toast || toast.transitionStatus === "leave") return;
+		clearTimer(id);
+		timers.delete(id);
+		setTransitionStatus(id, "leave");
+		toast.onClose?.();
+	}
+	function remove(id) {
+		clearTimer(id);
+		timers.delete(id);
+		runs.delete(id);
+		toasts.value = toasts.value.filter((toast) => toast.id !== id);
+	}
+	function setTransitionStatus(id, status) {
+		const toast = find(id);
+		if (!toast || toast.transitionStatus === status) return;
+		toasts.value = toasts.value.map((entry) => entry.id === id ? {
+			...entry,
+			transitionStatus: status
+		} : entry);
+	}
+	function setHeight(id, height) {
+		const toast = find(id);
+		if (!toast || toast.height === height) return;
+		toasts.value = toasts.value.map((entry) => entry.id === id ? {
+			...entry,
+			height
+		} : entry);
+	}
+	/** Every timer halts while the stack is being read, not just the hovered one. */
+	function syncTimers() {
+		for (const id of timers.keys()) if (expanded.value) pauseTimer(id);
+		else runTimer(id);
+	}
+	return {
+		toasts,
+		expanded,
+		placements,
+		limit,
+		timeout,
+		add,
+		update,
+		close,
+		remove,
+		closeAll() {
+			for (const toast of toasts.value.slice()) close(toast.id);
+		},
+		timer(id) {
+			const run = runs.get(id);
+			if (!run) return void 0;
+			return {
+				...run,
+				paused: expanded.value || find(id)?.transitionStatus === "leave"
+			};
+		},
+		setHeight,
+		setTransitionStatus,
+		setHovering(value) {
+			hovering.value = value;
+			syncTimers();
+		},
+		setFocused(value) {
+			focused.value = value;
+			syncTimers();
+		}
+	};
+}
+/**
+* The store used when none is named.
+*
+* A module-level instance is what lets `useToast().setToast(...)` be called from
+* a plain module — an API client, a router guard — with nothing to wire up.
+* Anything that needs isolation, such as a server render or a second app on the
+* page, should create its own with {@link createToastStore}.
+*/
+var defaultToastStore = serverSafe(createToastStore());
+function serverSafe(store) {
+	const add = store.add;
+	store.add = (options) => {
+		if (typeof window !== "undefined") return add(options);
+		if (process.env.NODE_ENV !== "production") console.warn("[vunset] A toast added during a server render is ignored: give the request its own createToastStore().");
+		return options.id ?? "";
+	};
+	return store;
+}
+//#endregion
+export { DEFAULT_TIMEOUT, createToastStore, defaultToastStore };

package/dist/shared/use-collapsible.d.ts

@@ -0,0 +1,42 @@
+import { type ComputedRef, type MaybeRefOrGetter, type Ref, type WritableComputedRef } from 'vue';
+import { type TransitionStatus } from './use-transition-status';
+export declare const PANEL_HEIGHT_VAR = "--collapsible-panel-height";
+export declare const PANEL_WIDTH_VAR = "--collapsible-panel-width";
+export interface CollapsibleState {
+    /**
+     * Whether the panel is open.
+     * @attribute `data-open` while open, `data-closed` otherwise
+     */
+    open: boolean;
+    /** Whether the trigger ignores interaction. */
+    disabled: boolean;
+    /**
+     * Where the panel is in its opening or closing animation.
+     * @attribute `data-enter-from` as it opens, `data-leave-to` as it closes
+     */
+    transitionStatus: TransitionStatus;
+}
+export interface UseCollapsibleOptions {
+    /** The open state. Supplying this makes the value controlled. */
+    open?: MaybeRefOrGetter<boolean | undefined>;
+    /** The initial open state while uncontrolled. */
+    defaultOpen?: MaybeRefOrGetter<boolean>;
+    /** Whether the trigger ignores user interaction. */
+    disabled?: MaybeRefOrGetter<boolean>;
+    /** The panel id, referenced by the trigger's `aria-controls`. Generated when omitted. */
+    id?: MaybeRefOrGetter<string | undefined>;
+    /** Called whenever the open state changes. */
+    onChange?: (open: boolean) => void;
+}
+export interface UseCollapsibleReturn {
+    open: WritableComputedRef<boolean>;
+    state: ComputedRef<CollapsibleState>;
+    /** Whether the panel belongs in the DOM. */
+    present: Ref<boolean>;
+    rootProps: ComputedRef<Record<string, unknown>>;
+    triggerProps: ComputedRef<Record<string, unknown>>;
+    panelProps: ComputedRef<Record<string, unknown>>;
+    toggle: () => void;
+}
+export declare function useCollapsible(options?: UseCollapsibleOptions): UseCollapsibleReturn;
+export declare const provideCollapsibleContext: (value: UseCollapsibleReturn) => UseCollapsibleReturn, useCollapsibleContext: () => UseCollapsibleReturn;

package/dist/shared/use-collapsible.js

@@ -0,0 +1,104 @@
+import { dataAttrs } from "./data-attrs.js";
+import { useControlled } from "./use-controlled.js";
+import { createContext } from "./context.js";
+import { popupStateAttrs } from "./popup-state-attrs.js";
+import { useTransitionStatus } from "./use-transition-status.js";
+import { waitForAnimationsToFinish } from "./animations.js";
+import { computed, onScopeDispose, ref, toValue, useId, watch } from "vue";
+//#region src/shared/use-collapsible.ts
+var PANEL_HEIGHT_VAR = "--collapsible-panel-height";
+var PANEL_WIDTH_VAR = "--collapsible-panel-width";
+function useCollapsible(options = {}) {
+	const generatedId = useId();
+	const panelEl = ref(null);
+	const disabled = () => toValue(options.disabled) ?? false;
+	const panelId = computed(() => toValue(options.id) ?? generatedId);
+	const open = useControlled({
+		value: () => toValue(options.open),
+		defaultValue: () => toValue(options.defaultOpen) ?? false,
+		onChange: options.onChange,
+		prop: "open",
+		empty: false,
+		name: "useCollapsible",
+		label: "open"
+	});
+	const { mounted, transitionStatus, setMounted } = useTransitionStatus(() => open.value);
+	const state = computed(() => ({
+		open: open.value,
+		disabled: disabled(),
+		transitionStatus: transitionStatus.value
+	}));
+	const hooks = computed(() => dataAttrs(state.value, { ...popupStateAttrs }));
+	let abort = null;
+	let observer = null;
+	function measure(panel) {
+		panel.style.setProperty(PANEL_HEIGHT_VAR, `${panel.scrollHeight}px`);
+		panel.style.setProperty(PANEL_WIDTH_VAR, `${panel.scrollWidth}px`);
+	}
+	function observe(panel) {
+		observer?.disconnect();
+		observer = null;
+		if (typeof ResizeObserver === "undefined") return;
+		observer = new ResizeObserver(() => measure(panel));
+		observer.observe(panel);
+	}
+	watch(() => [
+		open.value,
+		mounted.value,
+		panelEl.value
+	], ([isOpen, isMounted, panel]) => {
+		if (!panel || !isMounted) return;
+		abort?.abort();
+		abort = new AbortController();
+		measure(panel);
+		if (isOpen) {
+			observe(panel);
+			return;
+		}
+		observer?.disconnect();
+		observer = null;
+		const { signal } = abort;
+		waitForAnimationsToFinish(panel, signal).then(() => {
+			if (!signal.aborted && !open.value) setMounted(false);
+		});
+	}, { flush: "post" });
+	onScopeDispose(() => {
+		abort?.abort();
+		observer?.disconnect();
+	});
+	function toggle() {
+		if (disabled()) return;
+		open.value = !open.value;
+	}
+	return {
+		open,
+		state,
+		present: mounted,
+		rootProps: computed(() => ({
+			...hooks.value,
+			"data-part": "collapsible"
+		})),
+		triggerProps: computed(() => ({
+			...hooks.value,
+			"data-part": "collapsible-trigger",
+			type: "button",
+			disabled: disabled(),
+			"aria-expanded": open.value,
+			"aria-controls": panelId.value,
+			onClick: toggle
+		})),
+		panelProps: computed(() => ({
+			...hooks.value,
+			"data-part": "collapsible-panel",
+			id: panelId.value,
+			hidden: !mounted.value ? true : void 0,
+			ref: (el) => {
+				panelEl.value = el ?? null;
+			}
+		})),
+		toggle
+	};
+}
+var { provideContext: provideCollapsibleContext, useContext: useCollapsibleContext } = createContext("Collapsible");
+//#endregion
+export { PANEL_HEIGHT_VAR, PANEL_WIDTH_VAR, provideCollapsibleContext, useCollapsible, useCollapsibleContext };

package/dist/shared/use-controlled.d.ts

@@ -0,0 +1,24 @@
+import { type MaybeRefOrGetter, type WritableComputedRef } from 'vue';
+export interface UseControlledOptions<T> {
+    /** The controlled value. Anything but `undefined` makes the value controlled. */
+    value: MaybeRefOrGetter<T | undefined>;
+    /** The initial value used while uncontrolled. */
+    defaultValue: MaybeRefOrGetter<T>;
+    /**
+     * The component prop holding the value. Bound at all, it makes the value controlled too, even to
+     * `undefined`: a `v-model` on a ref that starts out empty.
+     */
+    prop?: string;
+    /** What a bound `undefined` reads as. */
+    empty?: MaybeRefOrGetter<T>;
+    /** Notified on every write. Wire this to `update:<name>` to support `v-model`. */
+    onChange?: (value: T) => void;
+    /** Component name, used in the development warning. */
+    name?: string;
+    /** Value name, used in the development warning. */
+    label?: string;
+}
+/** Whether the current component's caller bound `prop`, whatever it holds. */
+export declare function isPropBound(prop: string): boolean;
+/** A value that may be owned by the caller or by the component. */
+export declare function useControlled<T>(options: UseControlledOptions<T>): WritableComputedRef<T>;

package/dist/shared/use-controlled.js

@@ -0,0 +1,39 @@
+import { onRecycle } from "./recycle.js";
+import { computed, getCurrentInstance, ref, toValue, watchEffect } from "vue";
+//#region src/shared/use-controlled.ts
+/** Whether the current component's caller bound `prop`, whatever it holds. */
+function isPropBound(prop) {
+	const props = getCurrentInstance()?.vnode.props;
+	if (!props) return false;
+	return prop in props || prop.replace(/\B([A-Z])/g, "-$1").toLowerCase() in props;
+}
+/** A value that may be owned by the caller or by the component. */
+function useControlled(options) {
+	const { value, defaultValue, prop, empty, onChange, name = "Component", label = "value" } = options;
+	const isControlled = prop !== void 0 && isPropBound(prop) || toValue(value) !== void 0;
+	const internal = ref(toValue(defaultValue));
+	if (!isControlled) onRecycle(() => internal.value = toValue(defaultValue));
+	if (process.env.NODE_ENV !== "production") {
+		let warned = false;
+		watchEffect(() => {
+			const defined = toValue(value) !== void 0;
+			if (!warned && (prop ? !isControlled && defined : defined !== isControlled)) {
+				warned = true;
+				console.warn(`[${name}] The ${label} changed from ${isControlled ? "" : "un"}controlled to ${isControlled ? "un" : ""}controlled. Pick one for the lifetime of the component.`);
+			}
+		});
+	}
+	const read = () => {
+		const current = toValue(value);
+		return current === void 0 ? toValue(empty) : current;
+	};
+	return computed({
+		get: () => isControlled ? read() : internal.value,
+		set(next) {
+			if (!isControlled) internal.value = next;
+			onChange?.(next);
+		}
+	});
+}
+//#endregion
+export { isPropBound, useControlled };

package/dist/shared/use-dialog.d.ts

@@ -0,0 +1,58 @@
+import { type ComputedRef, type MaybeRefOrGetter, type Ref, type WritableComputedRef } from 'vue';
+import { type TransitionStatus } from './use-transition-status';
+import { type RegisterId } from './labeling';
+export interface DialogState {
+    /**
+     * Whether it is open.
+     * @attribute `data-open` while open, `data-closed` otherwise
+     */
+    open: boolean;
+    /**
+     * Whether focus is trapped and the page behind made inert.
+     * @attribute none
+     */
+    modal: boolean;
+    /**
+     * Where it is in its enter or exit animation.
+     * @attribute `data-enter-from` as it enters, `data-leave-to` as it leaves
+     */
+    transitionStatus: TransitionStatus;
+    /** Whether a dialog opened from inside this one is currently showing. */
+    nested: boolean;
+    /**
+     * How many dialogs are stacked on top of this one. `0` is whichever is in front.
+     * @attribute `data-level="…"` above 0; always `--dialog-level` on the backdrop and popup
+     */
+    level: number;
+}
+export interface UseDialogOptions {
+    open?: MaybeRefOrGetter<boolean | undefined>;
+    defaultOpen?: MaybeRefOrGetter<boolean | undefined>;
+    /** Trap focus, lock page scrolling and hide the rest of the page from assistive technology. */
+    modal?: MaybeRefOrGetter<boolean | undefined>;
+    escapeKey?: MaybeRefOrGetter<boolean | undefined>;
+    /** Close when the backdrop is pressed. @default false */
+    outsidePress?: MaybeRefOrGetter<boolean | undefined>;
+    /** `'alertdialog'` asks for a response: always modal, never closed by an outside press. */
+    role?: MaybeRefOrGetter<DialogRole | undefined>;
+    onChange?: (open: boolean) => void;
+}
+export type DialogRole = 'dialog' | 'alertdialog';
+export interface UseDialogReturn {
+    open: WritableComputedRef<boolean>;
+    state: ComputedRef<DialogState>;
+    present: Ref<boolean>;
+    triggerProps: ComputedRef<Record<string, unknown>>;
+    backdropProps: ComputedRef<Record<string, unknown>>;
+    popupProps: ComputedRef<Record<string, unknown>>;
+    closeProps: ComputedRef<Record<string, unknown>>;
+    registerTitle: RegisterId;
+    registerDescription: RegisterId;
+    /** The dialog surface, for composables layered on top such as a drawer. */
+    popupRef: Ref<HTMLElement | null>;
+    close: () => void;
+    /** Closes this dialog and every dialog it was opened from. */
+    closeAll: () => void;
+}
+export declare function useDialog(options?: UseDialogOptions): UseDialogReturn;
+export declare const provideDialogContext: (value: UseDialogReturn) => UseDialogReturn, useDialogContext: () => UseDialogReturn;