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

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

@@ -0,0 +1,542 @@
+import { dataAttrs } from "../../shared/data-attrs.js";
+import { useControlled } from "../../shared/use-controlled.js";
+import { visuallyHidden } from "../../shared/visually-hidden.js";
+import { createContext } from "../../shared/context.js";
+import { useFieldValue, useOptionalFieldContext } from "../../shared/use-field.js";
+import { isKeyboardFocus } from "../../shared/input-modality.js";
+import { clamp, dragTo, roomFor, snap, tidy, toPercent } from "./range-math.js";
+import { computed, onScopeDispose, ref, shallowReactive, toValue, useId, watch, watchEffect } from "vue";
+//#region src/components/range/use-range.ts
+/** The control's inner edges along its axis, from the end holding `min` to the one holding `max`. */
+function span(control, vertical, rtl) {
+	const rect = control.getBoundingClientRect();
+	const style = getComputedStyle(control);
+	const px = (property) => parseFloat(style.getPropertyValue(property)) || 0;
+	const inner = (side) => px(`padding-${side}`) + px(`border-${side}-width`);
+	if (vertical) return {
+		from: rect.bottom - inner("bottom"),
+		to: rect.top + inner("top")
+	};
+	const left = rect.left + inner("left");
+	const right = rect.right - inner("right");
+	return rtl ? {
+		from: right,
+		to: left
+	} : {
+		from: left,
+		to: right
+	};
+}
+var sameValues = (a, b) => a.length === b.length && a.every((value, i) => value === b[i]);
+function useRange(options = {}) {
+	const field = useOptionalFieldContext();
+	const config = computed(() => ({
+		min: toValue(options.min) ?? 0,
+		max: toValue(options.max) ?? 100,
+		step: toValue(options.step) ?? 1,
+		largeStep: toValue(options.largeStep) ?? 10,
+		minStepsBetweenValues: toValue(options.minStepsBetweenValues) ?? 0,
+		orientation: toValue(options.orientation) ?? "horizontal",
+		inset: toValue(options.thumbAlignment) === "edge",
+		disabled: (toValue(options.disabled) ?? false) || (field?.state.value.disabled ?? false),
+		format: toValue(options.format),
+		locale: toValue(options.locale),
+		name: toValue(options.name) ?? field?.name(),
+		form: toValue(options.form),
+		thumbCollisionBehavior: toValue(options.thumbCollisionBehavior) ?? "push"
+	}));
+	const scale = computed(() => {
+		const { min, max, step, minStepsBetweenValues } = config.value;
+		return {
+			min,
+			max,
+			step,
+			gap: tidy(minStepsBetweenValues * step, step)
+		};
+	});
+	const vertical = () => config.value.orientation === "vertical";
+	const invalid = () => (toValue(options.invalid) ?? false) || (field?.state.value.invalid ?? false);
+	const value = useControlled({
+		value: options.value,
+		defaultValue: toValue(options.defaultValue) ?? config.value.min,
+		prop: "modelValue",
+		empty: () => toValue(options.defaultValue) ?? config.value.min,
+		name: "RangeRoot"
+	});
+	const values = computed(() => {
+		const { min, max } = config.value;
+		return (Array.isArray(value.value) ? value.value : [value.value]).map((item) => clamp(item, min, max)).sort((a, b) => a - b);
+	});
+	useFieldValue(field, () => value.value);
+	field?.setFilled(true);
+	const formatter = computed(() => new Intl.NumberFormat(config.value.locale, config.value.format));
+	const formattedValues = computed(() => values.value.map((item) => formatter.value.format(item)));
+	const slots = shallowReactive([]);
+	const indexOf = (slot) => slot.explicitIndex() ?? slots.indexOf(slot);
+	const slotAt = (index) => slots.find((slot) => indexOf(slot) === index);
+	const thumbDisabled = (index) => config.value.disabled || (slotAt(index)?.disabled() ?? false);
+	function add(slot) {
+		slots.push(slot);
+		return () => {
+			const at = slots.indexOf(slot);
+			if (at >= 0) slots.splice(at, 1);
+		};
+	}
+	const thumbInputIds = computed(() => [...slots].sort((a, b) => indexOf(a) - indexOf(b)).map((slot) => slot.inputId()));
+	function focusThumb(index) {
+		slotAt(index)?.input.value?.focus({ preventScroll: true });
+	}
+	const activeIndex = ref(-1);
+	const lastUsedIndex = ref(-1);
+	const dragging = ref(false);
+	const positions = shallowReactive(/* @__PURE__ */ new Map());
+	function emitChange(next, reason, event, index) {
+		if (sameValues(next, values.value)) return false;
+		const shaped = Array.isArray(value.value) ? [...next] : next[0];
+		value.value = shaped;
+		options.onChange?.(shaped, {
+			reason,
+			event,
+			activeThumbIndex: index
+		});
+		return true;
+	}
+	function commit(next, reason, event, index) {
+		const shaped = Array.isArray(value.value) ? [...next] : next[0];
+		options.onCommit?.(shaped, {
+			reason,
+			event,
+			activeThumbIndex: index
+		});
+	}
+	/** Puts thumb `index` at `target`, snapped and kept within its neighbors. */
+	function placed(index, target) {
+		const next = [...values.value];
+		next[index] = clamp(snap(target, scale.value), ...roomFor(values.value, index, scale.value));
+		return next;
+	}
+	const controlEl = ref(null);
+	const rtl = ref(false);
+	function readDirection() {
+		if (controlEl.value) rtl.value = getComputedStyle(controlEl.value).direction === "rtl";
+	}
+	function onKeydown(index, event) {
+		const current = values.value[index];
+		if (current === void 0 || thumbDisabled(index)) return;
+		readDirection();
+		const { step, largeStep } = config.value;
+		const by = event.shiftKey ? largeStep : step;
+		const right = !vertical() && rtl.value ? -by : by;
+		const [low, high] = roomFor(values.value, index, scale.value);
+		const target = {
+			ArrowUp: current + by,
+			ArrowDown: current - by,
+			ArrowRight: current + right,
+			ArrowLeft: current - right,
+			PageUp: current + largeStep,
+			PageDown: current - largeStep,
+			Home: low,
+			End: high
+		}[event.key];
+		if (target === void 0) return;
+		event.preventDefault();
+		const next = placed(index, target);
+		if (emitChange(next, "keyboard", event, index)) commit(next, "keyboard", event, index);
+	}
+	function onChange(index, event) {
+		const typed = Number(event.target.value);
+		if (!Number.isFinite(typed) || thumbDisabled(index)) return;
+		const next = placed(index, typed);
+		if (emitChange(next, "input-change", event, index)) commit(next, "input-change", event, index);
+	}
+	function onFocus(index) {
+		activeIndex.value = index;
+		lastUsedIndex.value = index;
+		field?.setFocused(true);
+	}
+	function onBlur(index) {
+		if (activeIndex.value === index) activeIndex.value = -1;
+		field?.setFocused(false);
+		field?.setTouched(true);
+	}
+	let drag = null;
+	const along = (event) => vertical() ? event.clientY : event.clientX;
+	function centerOf(element) {
+		const rect = element.getBoundingClientRect();
+		return vertical() ? (rect.top + rect.bottom) / 2 : (rect.left + rect.right) / 2;
+	}
+	/** The value under a point on the control's axis. */
+	function valueAt(point) {
+		const control = controlEl.value;
+		if (!control) return void 0;
+		let { from, to } = span(control, vertical(), rtl.value);
+		if (config.value.inset) {
+			const rect = (slots.find((slot) => slot.element.value)?.element.value)?.getBoundingClientRect();
+			const half = ((vertical() ? rect?.height : rect?.width) ?? 0) / 2;
+			const direction = Math.sign(to - from);
+			from += half * direction;
+			to -= half * direction;
+		}
+		if (to === from) return void 0;
+		const { min, max } = scale.value;
+		const ratio = clamp((point - from) / (to - from), 0, 1);
+		return clamp(snap(min + ratio * (max - min), scale.value), min, max);
+	}
+	/** The enabled thumb nearest `target`; among thumbs sharing a spot, the one that can move towards it. */
+	function nearestThumb(target) {
+		let best = -1;
+		values.value.forEach((item, i) => {
+			if (thumbDisabled(i)) return;
+			const distance = Math.abs(item - target);
+			const bestDistance = best < 0 ? Infinity : Math.abs(values.value[best] - target);
+			if (distance < bestDistance || distance === bestDistance && target > item) best = i;
+		});
+		return best;
+	}
+	function moveTo(target, reason, event) {
+		if (!drag) return;
+		const result = dragTo(drag.latest, drag.index, target, scale.value, config.value.thumbCollisionBehavior, drag.origin);
+		drag.latest = result.values;
+		if (result.index !== drag.index) {
+			drag.index = result.index;
+			activeIndex.value = result.index;
+			lastUsedIndex.value = result.index;
+			focusThumb(result.index);
+		}
+		emitChange(result.values, reason, event, drag.index);
+	}
+	function onPointerdown(event) {
+		if (event.button !== 0 || config.value.disabled) return;
+		readDirection();
+		const point = along(event);
+		const pressed = valueAt(point);
+		if (pressed === void 0) return;
+		const grabbed = slots.find((slot) => !slot.disabled() && slot.element.value?.contains(event.target));
+		const index = grabbed ? indexOf(grabbed) : nearestThumb(pressed);
+		if (index < 0) return;
+		event.preventDefault();
+		drag = {
+			pointerId: event.pointerId,
+			index,
+			offset: grabbed ? point - centerOf(grabbed.element.value) : 0,
+			origin: values.value,
+			latest: values.value,
+			moved: false
+		};
+		dragging.value = true;
+		activeIndex.value = index;
+		lastUsedIndex.value = index;
+		focusThumb(index);
+		if (!grabbed) moveTo(pressed, "track-press", event);
+		document.addEventListener("pointermove", onPointermove);
+		document.addEventListener("pointerup", onPointerup);
+		document.addEventListener("pointercancel", onPointerup);
+	}
+	function onPointermove(event) {
+		if (!drag || event.pointerId !== drag.pointerId) return;
+		if (event.buttons === 0) return finish(event);
+		const target = valueAt(along(event) - drag.offset);
+		if (target === void 0) return;
+		drag.moved = true;
+		moveTo(target, "drag", event);
+	}
+	function onPointerup(event) {
+		if (drag && event.pointerId === drag.pointerId) finish(event);
+	}
+	function stopListening() {
+		document.removeEventListener("pointermove", onPointermove);
+		document.removeEventListener("pointerup", onPointerup);
+		document.removeEventListener("pointercancel", onPointerup);
+	}
+	function finish(event) {
+		if (!drag) return;
+		const { origin, latest, moved, index } = drag;
+		drag = null;
+		dragging.value = false;
+		stopListening();
+		if (!sameValues(latest, origin)) commit(latest, moved ? "drag" : "track-press", event, index);
+	}
+	onScopeDispose(stopListening);
+	const state = computed(() => ({
+		activeThumbIndex: activeIndex.value,
+		disabled: config.value.disabled,
+		dragging: dragging.value,
+		invalid: invalid(),
+		orientation: config.value.orientation,
+		max: config.value.max,
+		min: config.value.min,
+		minStepsBetweenValues: config.value.minStepsBetweenValues,
+		step: config.value.step,
+		values: values.value
+	}));
+	const hooks = computed(() => dataAttrs(state.value, {
+		activeThumbIndex: () => null,
+		max: () => null,
+		min: () => null,
+		minStepsBetweenValues: () => null,
+		step: () => null,
+		values: () => null
+	}));
+	const labelId = useId();
+	const labels = ref(0);
+	const labelledBy = computed(() => labels.value > 0 ? labelId : void 0);
+	function registerLabel() {
+		labels.value += 1;
+		return () => {
+			labels.value -= 1;
+		};
+	}
+	return {
+		value,
+		values,
+		formattedValues,
+		state,
+		config,
+		rootProps: computed(() => ({
+			...hooks.value,
+			"data-part": "root",
+			role: "group",
+			id: toValue(options.id),
+			"aria-labelledby": labelledBy.value
+		})),
+		labelProps: computed(() => ({
+			...hooks.value,
+			"data-part": "label",
+			id: labelId
+		})),
+		valueProps: computed(() => ({
+			...hooks.value,
+			"data-part": "value",
+			for: thumbInputIds.value.join(" ") || void 0,
+			"aria-live": "off"
+		})),
+		controlProps: computed(() => ({
+			...hooks.value,
+			"data-part": "control",
+			style: {
+				position: "relative",
+				touchAction: "none"
+			},
+			ref: (element) => {
+				controlEl.value = element ?? null;
+				readDirection();
+			},
+			onPointerdown
+		})),
+		trackProps: computed(() => ({
+			...hooks.value,
+			"data-part": "track",
+			style: { position: "relative" }
+		})),
+		indicatorProps: computed(() => {
+			const list = values.value;
+			const several = list.length > 1;
+			const percent = (item) => {
+				const p = toPercent(item, scale.value);
+				return Number.isFinite(p) ? p : 0;
+			};
+			let start;
+			let size;
+			let measured = {};
+			if (config.value.inset) {
+				const first = positions.get(0);
+				const last = positions.get(list.length - 1);
+				measured = {
+					"--start-position": `${first ?? 0}%`,
+					...several ? { "--relative-size": `${(last ?? 0) - (first ?? 0)}%` } : {},
+					visibility: first === void 0 || several && last === void 0 ? "hidden" : void 0
+				};
+				start = several ? "var(--start-position)" : "0";
+				size = several ? "var(--relative-size)" : "var(--start-position)";
+			} else {
+				const first = percent(list[0]);
+				start = several ? `${first}%` : "0";
+				size = `${percent(list[list.length - 1]) - (several ? first : 0)}%`;
+			}
+			const style = {
+				position: "absolute",
+				...vertical() ? {
+					left: 0,
+					right: 0,
+					bottom: start,
+					height: size
+				} : {
+					top: 0,
+					bottom: 0,
+					insetInlineStart: start,
+					width: size
+				},
+				...measured
+			};
+			return {
+				...hooks.value,
+				"data-part": "indicator",
+				style
+			};
+		}),
+		registerLabel,
+		thumbs: {
+			scale,
+			hooks,
+			controlEl,
+			rtl,
+			activeIndex,
+			lastUsedIndex,
+			labelledBy,
+			positions,
+			add,
+			indexOf,
+			onKeydown,
+			onChange,
+			onFocus,
+			onBlur
+		}
+	};
+}
+var { provideContext: provideRangeContext, useContext: useRangeContext } = createContext("Range");
+function useRangeThumb(options = {}) {
+	const range = useRangeContext();
+	const host = range.thumbs;
+	const field = useOptionalFieldContext();
+	const generatedId = useId();
+	const element = ref(null);
+	const input = ref(null);
+	const ownDisabled = () => toValue(options.disabled) ?? false;
+	const inputId = computed(() => (range.values.value.length === 1 ? field?.controlId.value : void 0) ?? generatedId);
+	const slot = {
+		explicitIndex: () => toValue(options.index),
+		disabled: ownDisabled,
+		inputId: () => inputId.value,
+		element,
+		input
+	};
+	onScopeDispose(host.add(slot));
+	const index = computed(() => host.indexOf(slot));
+	const value = computed(() => range.values.value[index.value] ?? range.config.value.min);
+	const vertical = () => range.config.value.orientation === "vertical";
+	const position = ref();
+	function measure() {
+		const control = host.controlEl.value;
+		const thumb = element.value;
+		if (!range.config.value.inset || !control || !thumb) {
+			position.value = void 0;
+			return;
+		}
+		const { from, to } = span(control, vertical(), false);
+		const length = Math.abs(to - from);
+		const rect = thumb.getBoundingClientRect();
+		const size = vertical() ? rect.height : rect.width;
+		const ratio = toPercent(value.value, host.scale.value) / 100;
+		const percent = (size / 2 + (length - size) * ratio) / length * 100;
+		position.value = Number.isFinite(percent) ? percent : void 0;
+	}
+	watch([
+		value,
+		range.config,
+		element,
+		host.controlEl
+	], measure, {
+		flush: "post",
+		immediate: true
+	});
+	watch([element, host.controlEl], ([thumb, control], _, onCleanup) => {
+		if (!thumb || !control || typeof ResizeObserver !== "function") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(thumb);
+		observer.observe(control);
+		onCleanup(() => observer.disconnect());
+	});
+	watchEffect((onCleanup) => {
+		const at = index.value;
+		const measured = position.value;
+		if (measured === void 0) return;
+		host.positions.set(at, measured);
+		onCleanup(() => host.positions.delete(at));
+	});
+	const thumbProps = computed(() => {
+		const at = index.value;
+		const active = host.activeIndex.value === at;
+		const base = {
+			...host.hooks.value,
+			"data-part": "thumb",
+			"data-index": at,
+			"data-focused": active ? "" : void 0,
+			"data-focus-visible": active && isKeyboardFocus() ? "" : void 0,
+			ref: (el) => {
+				element.value = el ?? null;
+			}
+		};
+		const percent = toPercent(value.value, host.scale.value);
+		if (!Number.isFinite(percent)) return {
+			...base,
+			style: visuallyHidden
+		};
+		const inset = range.config.value.inset;
+		const offset = inset ? "var(--position)" : `${percent}%`;
+		const style = {
+			position: "absolute",
+			...vertical() ? {
+				left: "50%",
+				bottom: offset,
+				translate: "-50% 50%"
+			} : {
+				top: "50%",
+				insetInlineStart: offset,
+				translate: `${host.rtl.value ? 50 : -50}% -50%`
+			},
+			zIndex: active ? 2 : host.lastUsedIndex.value === at ? 1 : void 0,
+			...inset ? {
+				"--position": `${position.value ?? 0}%`,
+				visibility: position.value === void 0 ? "hidden" : void 0
+			} : {}
+		};
+		return {
+			...base,
+			style
+		};
+	});
+	const inputProps = computed(() => {
+		const at = index.value;
+		const { min, max, step, name, form, orientation } = range.config.value;
+		const formatted = range.formattedValues.value[at] ?? String(value.value);
+		const pair = range.values.value.length === 2;
+		const label = toValue(options.ariaLabel);
+		return {
+			type: "range",
+			"data-part": "thumb-input",
+			id: inputId.value,
+			min,
+			max,
+			step,
+			value: value.value,
+			name,
+			form,
+			disabled: range.config.value.disabled || ownDisabled(),
+			tabindex: toValue(options.tabIndex),
+			"aria-label": label,
+			"aria-labelledby": label ? void 0 : host.labelledBy.value ?? field?.labelledBy.value,
+			"aria-describedby": field?.describedBy.value,
+			"aria-valuenow": value.value,
+			"aria-valuetext": options.getValueText?.(formatted, value.value, at) ?? toValue(options.valueText) ?? (pair ? `${formatted} ${at === 0 ? "start" : "end"} range` : formatted),
+			"aria-orientation": orientation,
+			"aria-invalid": range.state.value.invalid || void 0,
+			style: visuallyHidden,
+			ref: (el) => {
+				input.value = el ?? null;
+			},
+			onKeydown: (event) => host.onKeydown(at, event),
+			onChange: (event) => host.onChange(at, event),
+			onFocus: () => host.onFocus(at),
+			onBlur: () => host.onBlur(at)
+		};
+	});
+	return {
+		index,
+		value,
+		state: range.state,
+		thumbProps,
+		inputProps
+	};
+}
+//#endregion
+export { provideRangeContext, useRange, useRangeContext, useRangeThumb };

package/dist/components/scroll-area/ScrollArea.js

@@ -0,0 +1,5 @@
+import ScrollArea_vue_vue_type_script_setup_true_lang_default, { FADE_SIZE_VAR, OVERFLOW_X_END_VAR, OVERFLOW_X_START_VAR, OVERFLOW_Y_END_VAR, OVERFLOW_Y_START_VAR } from "./ScrollArea.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/scroll-area/ScrollArea.vue
+var ScrollArea_default = ScrollArea_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { FADE_SIZE_VAR, OVERFLOW_X_END_VAR, OVERFLOW_X_START_VAR, OVERFLOW_Y_END_VAR, OVERFLOW_Y_START_VAR, ScrollArea_default as default };

package/dist/components/scroll-area/ScrollArea.vue.d.ts

@@ -0,0 +1,94 @@
+export type ScrollAreaFade = boolean | 'x' | 'y' | 'both';
+export type ScrollAreaAxis = 'x' | 'y' | 'both';
+export declare const OVERFLOW_X_START_VAR = "--scroll-area-overflow-x-start";
+export declare const OVERFLOW_X_END_VAR = "--scroll-area-overflow-x-end";
+export declare const OVERFLOW_Y_START_VAR = "--scroll-area-overflow-y-start";
+export declare const OVERFLOW_Y_END_VAR = "--scroll-area-overflow-y-end";
+export declare const FADE_SIZE_VAR = "--scroll-area-fade-size";
+export interface ScrollAreaState {
+    /**
+     * Whether the content is wider than the area.
+     * @attribute `data-has-overflow-x` while true
+     */
+    hasOverflowX: boolean;
+    /**
+     * Whether the content is taller than the area.
+     * @attribute `data-has-overflow-y` while true
+     */
+    hasOverflowY: boolean;
+    /**
+     * Whether there is content hidden past the start edge.
+     * @attribute `data-overflow-x-start` while true
+     */
+    overflowXStart: boolean;
+    /**
+     * Whether there is content hidden past the end edge.
+     * @attribute `data-overflow-x-end` while true
+     */
+    overflowXEnd: boolean;
+    /**
+     * Whether there is content hidden above.
+     * @attribute `data-overflow-y-start` while true
+     */
+    overflowYStart: boolean;
+    /**
+     * Whether there is content hidden below.
+     * @attribute `data-overflow-y-end` while true
+     */
+    overflowYEnd: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Which axes scroll; the other is clipped. */
+    axis?: ScrollAreaAxis;
+    /** Fades the content out towards the edges it continues past: `true` on both axes, or `'x'` or `'y'` on one. */
+    fade?: ScrollAreaFade;
+    /** How far the fade reaches once fully scrolled. A number means pixels. @default '40px' */
+    fadeSize?: string | number;
+    /** Pixels from an edge still counted as sitting at it, so the state and the fade hold off until the content has moved. */
+    overflowThreshold?: number;
+    /** Element or component to render. */
+    as?: string | object;
+}, {
+    state: import("vue").Ref<{
+        hasOverflowX: boolean;
+        hasOverflowY: boolean;
+        overflowXStart: boolean;
+        overflowXEnd: boolean;
+        overflowYStart: boolean;
+        overflowYEnd: boolean;
+    }, ScrollAreaState | {
+        hasOverflowX: boolean;
+        hasOverflowY: boolean;
+        overflowXStart: boolean;
+        overflowXEnd: boolean;
+        overflowYStart: boolean;
+        overflowYEnd: boolean;
+    }>;
+    viewport: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    measure: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Which axes scroll; the other is clipped. */
+    axis?: ScrollAreaAxis;
+    /** Fades the content out towards the edges it continues past: `true` on both axes, or `'x'` or `'y'` on one. */
+    fade?: ScrollAreaFade;
+    /** How far the fade reaches once fully scrolled. A number means pixels. @default '40px' */
+    fadeSize?: string | number;
+    /** Pixels from an edge still counted as sitting at it, so the state and the fade hold off until the content has moved. */
+    overflowThreshold?: number;
+    /** Element or component to render. */
+    as?: string | object;
+}> & Readonly<{}>, {
+    axis: ScrollAreaAxis;
+    as: string | object;
+    fade: ScrollAreaFade;
+    overflowThreshold: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default(props: ScrollAreaState): unknown;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};