ropav 0.1.5 → 0.1.7

package/dist/toast.css

@@ -1,5 +1,5 @@
 @layer ropav.components {
-.rp-toast[data-v-a830edcc] {
+.rp-toast[data-v-441adf44] {
     --_rp-toast-bg: var(--rp-color-default);
     --_rp-toast-fg: var(--rp-color-text);
     --_rp-toast-title-fg: var(--rp-color-text);
@@ -24,25 +24,25 @@
     box-shadow: var(--rp-shadow-md);
     transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast);
 }
-.rp-toast--radius-none[data-v-a830edcc] {
+.rp-toast--radius-none[data-v-441adf44] {
     --_rp-toast-radius: var(--rp-radius-none);
 }
-.rp-toast--radius-xs[data-v-a830edcc] {
+.rp-toast--radius-xs[data-v-441adf44] {
     --_rp-toast-radius: var(--rp-radius-xs);
 }
-.rp-toast--radius-sm[data-v-a830edcc] {
+.rp-toast--radius-sm[data-v-441adf44] {
     --_rp-toast-radius: var(--rp-radius-sm);
 }
-.rp-toast--radius-md[data-v-a830edcc] {
+.rp-toast--radius-md[data-v-441adf44] {
     --_rp-toast-radius: var(--rp-radius-md);
 }
-.rp-toast--radius-lg[data-v-a830edcc] {
+.rp-toast--radius-lg[data-v-441adf44] {
     --_rp-toast-radius: var(--rp-radius-lg);
 }
-.rp-toast--radius-xl[data-v-a830edcc] {
+.rp-toast--radius-xl[data-v-441adf44] {
     --_rp-toast-radius: var(--rp-radius-xl);
 }
-.rp-toast__icon[data-v-a830edcc] {
+.rp-toast__icon[data-v-441adf44] {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
@@ -51,37 +51,37 @@
     color: var(--_rp-toast-icon-fg);
     line-height: 0;
 }
-.rp-toast__icon[data-v-a830edcc] >  svg {
+.rp-toast__icon[data-v-441adf44] >  svg {
     display: block;
     width: 1rem;
     height: 1rem;
 }
-.rp-toast__content[data-v-a830edcc] {
+.rp-toast__content[data-v-441adf44] {
     display: grid;
     flex: 1 1 auto;
     min-width: 0;
     gap: var(--rp-spacing-1);
 }
-.rp-toast__title[data-v-a830edcc] {
+.rp-toast__title[data-v-441adf44] {
     color: var(--_rp-toast-title-fg);
     font-size: var(--rp-font-size-md);
     font-weight: var(--rp-font-weight-semibold);
     line-height: var(--rp-line-height-xs);
 }
-.rp-toast__description[data-v-a830edcc] {
+.rp-toast__description[data-v-441adf44] {
     margin: 0;
 }
-.rp-toast__body[data-v-a830edcc], .rp-toast__description[data-v-a830edcc] {
+.rp-toast__body[data-v-441adf44], .rp-toast__description[data-v-441adf44] {
     min-width: 0;
     color: var(--_rp-toast-fg);
 }
-.rp-toast__action[data-v-a830edcc] {
+.rp-toast__action[data-v-441adf44] {
     display: inline-flex;
     flex: 0 0 auto;
     align-items: center;
     margin-left: auto;
 }
-.rp-toast__close[data-v-a830edcc] {
+.rp-toast__close[data-v-441adf44] {
     box-sizing: border-box;
     display: inline-flex;
     flex: 0 0 auto;
@@ -98,36 +98,36 @@
     cursor: pointer;
     transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
 }
-.rp-toast__close[data-v-a830edcc]:hover {
+.rp-toast__close[data-v-441adf44]:hover {
     background-color: color-mix(in srgb, var(--_rp-toast-icon-fg) 12%, transparent);
 }
-.rp-toast__close[data-v-a830edcc]:focus-visible {
+.rp-toast__close[data-v-441adf44]:focus-visible {
     outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
     outline-offset: 2px;
 }
-.rp-toast__close[data-v-a830edcc] >  svg {
+.rp-toast__close[data-v-441adf44] >  svg {
     display: block;
     width: 1rem;
     height: 1rem;
 }
-.rp-toast-enter-active[data-v-a830edcc],
-  .rp-toast-leave-active[data-v-a830edcc] {
+.rp-toast-enter-active[data-v-441adf44],
+  .rp-toast-leave-active[data-v-441adf44] {
     will-change: opacity, transform;
 }
-.rp-toast-enter-active[data-v-a830edcc] {
+.rp-toast-enter-active[data-v-441adf44] {
     transition: opacity 180ms ease-out, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
 }
-.rp-toast-leave-active[data-v-a830edcc] {
+.rp-toast-leave-active[data-v-441adf44] {
     transition: opacity 120ms ease-in, transform 180ms cubic-bezier(0.4, 0, 1, 1);
 }
-.rp-toast-enter-from[data-v-a830edcc],
-  .rp-toast-leave-to[data-v-a830edcc] {
+.rp-toast-enter-from[data-v-441adf44],
+  .rp-toast-leave-to[data-v-441adf44] {
     opacity: 0;
     transform: translate3d(0, calc(var(--rp-spacing-2) * -1), 0) scale(0.98);
 }
 @media (prefers-reduced-motion: reduce) {
-.rp-toast-enter-active[data-v-a830edcc],
-    .rp-toast-leave-active[data-v-a830edcc] {
+.rp-toast-enter-active[data-v-441adf44],
+    .rp-toast-leave-active[data-v-441adf44] {
       transition: none;
 }
 }

package/dist/toast.js

@@ -1,18 +1,20 @@
 import './toast.css';
-import { t as x_default } from "./x.js";
+import { t as useControllableValue } from "./useControllableValue.js";
+import { t as useStylesApi } from "./styles-api.js";
 import { t as bem } from "./bem.js";
-import { n as useStylesApi } from "./styles-api.js";
-import { i as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as x_default } from "./x.js";
+import { a as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
+import { i as isNodeWithinElement } from "./events.js";
 import { n as useOverlayZIndex } from "./useOverlayZIndex.js";
-import { r as useTeleportTarget } from "./useTeleportTarget.js";
-import { VaporTeleport, VaporTransition, VaporTransitionGroup, computed, createComponent, createFor, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, extend, inject, nextTick, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, toValue, txt, unref, useSlots, watch } from "vue";
+import { n as useTeleportTarget } from "./useTeleportTarget.js";
+import { VaporTeleport, VaporTransition, VaporTransitionGroup, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, extend, inject, nextTick, on, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, toValue, txt, unref, useSlots, watch } from "vue";
 //#region src/components/toast/defaults.ts
 var DEFAULT_TOAST_DURATION = 5e3;
 var DEFAULT_TOAST_ROLE = "status";
 var DEFAULT_TOAST_CLOSE_LABEL = "Close toast";
 //#endregion
-//#region src/components/toast/useToastColor.ts
+//#region src/components/toast/toastColor.ts
 function getToastColorStyle(color, variant, autoContrast, contrastColor) {
 	if (!color && !variant) return void 0;
 	const resolvedVariant = variant ?? "surface";
@@ -33,13 +35,131 @@ function getToastColorStyle(color, variant, autoContrast, contrastColor) {
 	};
 }
 //#endregion
+//#region src/components/toast/useToastLifecycle.ts
+function useToastLifecycle(options) {
+	const isOpen = computed(() => toValue(options.isOpen));
+	const duration = computed(() => toValue(options.duration));
+	const pauseOnHover = computed(() => toValue(options.pauseOnHover));
+	const pauseOnFocus = computed(() => toValue(options.pauseOnFocus));
+	let isMounted = false;
+	let closePending = false;
+	let pausedByHover = false;
+	let pausedByFocus = false;
+	let timer;
+	let timerStartedAt = 0;
+	let remainingDuration = 0;
+	function getDuration() {
+		return Number.isFinite(duration.value) && duration.value > 0 ? duration.value : 0;
+	}
+	function clearTimer() {
+		if (timer === void 0) return;
+		clearTimeout(timer);
+		timer = void 0;
+	}
+	function scheduleTimer() {
+		if (!isOpen.value || remainingDuration <= 0 || pausedByHover || pausedByFocus) return;
+		timerStartedAt = Date.now();
+		timer = setTimeout(() => {
+			timer = void 0;
+			remainingDuration = 0;
+			close("timeout");
+		}, remainingDuration);
+	}
+	function resetTimer() {
+		clearTimer();
+		remainingDuration = getDuration();
+		scheduleTimer();
+	}
+	function pauseTimer() {
+		if (timer === void 0) return;
+		remainingDuration = Math.max(0, remainingDuration - (Date.now() - timerStartedAt));
+		clearTimer();
+		if (remainingDuration === 0) close("timeout");
+	}
+	function resumeTimer() {
+		if (pausedByHover || pausedByFocus) return;
+		scheduleTimer();
+	}
+	function resetPauseState() {
+		pausedByHover = false;
+		pausedByFocus = false;
+	}
+	function onMouseenter() {
+		if (!pauseOnHover.value) return;
+		pausedByHover = true;
+		pauseTimer();
+	}
+	function onMouseleave() {
+		if (!pauseOnHover.value) return;
+		pausedByHover = false;
+		resumeTimer();
+	}
+	function onFocusin() {
+		if (!pauseOnFocus.value) return;
+		pausedByFocus = true;
+		pauseTimer();
+	}
+	function onFocusout(event) {
+		if (!pauseOnFocus.value) return;
+		if (isNodeWithinElement(event.relatedTarget, event.currentTarget)) return;
+		pausedByFocus = false;
+		resumeTimer();
+	}
+	function close(reason) {
+		if (closePending) return;
+		closePending = true;
+		clearTimer();
+		options.requestClose(reason);
+		if (isOpen.value) {
+			resetTimer();
+			nextTick(() => {
+				if (isOpen.value) closePending = false;
+			});
+		}
+	}
+	watch(isOpen, (open) => {
+		if (open) closePending = false;
+	});
+	watch(pauseOnHover, (enabled) => {
+		if (enabled || !pausedByHover) return;
+		pausedByHover = false;
+		resumeTimer();
+	});
+	watch(pauseOnFocus, (enabled) => {
+		if (enabled || !pausedByFocus) return;
+		pausedByFocus = false;
+		resumeTimer();
+	});
+	watch([isOpen, duration], ([open], [wasOpen]) => {
+		if (!isMounted) return;
+		if (!open || !wasOpen) resetPauseState();
+		resetTimer();
+	});
+	onMounted(() => {
+		isMounted = true;
+		resetTimer();
+	});
+	onBeforeUnmount(() => {
+		isMounted = false;
+		clearTimer();
+	});
+	return {
+		close,
+		rootEvents: {
+			onMouseenter,
+			onMouseleave,
+			onFocusin,
+			onFocusout
+		}
+	};
+}
+//#endregion
 //#region src/components/toast/toast.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$1 = template("<div data-v-a830edcc>");
+var t0$1 = template("<div data-v-441adf44>");
 var t1 = template(" ");
-var t2 = template("<p data-v-a830edcc> ");
-var t3 = template("<div data-v-a830edcc class=rp-toast__content>");
-var t4 = template("<button data-v-a830edcc>");
-delegateEvents("click");
+var t2 = template("<p data-v-441adf44> ");
+var t3 = template("<div data-v-441adf44 class=rp-toast__content>");
+var t4 = template("<button data-v-441adf44>");
 //#endregion
 //#region src/components/toast/toast.vue
 var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -88,29 +208,22 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const props = __props;
 		const emit = __emit;
 		const slots = useSlots();
-		const localOpen = ref(props.open ?? true);
-		const isMounted = ref(false);
-		const pausedByHover = ref(false);
-		const pausedByFocus = ref(false);
-		let closePending = false;
-		let timer;
-		let timerStartedAt = 0;
-		let remainingDuration = 0;
-		watch(() => props.open, (open) => {
-			if (open !== void 0) localOpen.value = open;
-			if (open) closePending = false;
-		});
-		watch(() => props.pauseOnHover, (pauseOnHover) => {
-			if (pauseOnHover || !pausedByHover.value) return;
-			pausedByHover.value = false;
-			resumeTimer();
+		const controllableOpen = useControllableValue({
+			modelValue: () => props.open,
+			defaultValue: () => true,
+			onChange: (open) => emit("update:open", open)
 		});
-		watch(() => props.pauseOnFocus, (pauseOnFocus) => {
-			if (pauseOnFocus || !pausedByFocus.value) return;
-			pausedByFocus.value = false;
-			resumeTimer();
+		const isOpen = controllableOpen.value;
+		const { close: closeToast, rootEvents } = useToastLifecycle({
+			isOpen,
+			duration: () => props.duration,
+			pauseOnHover: () => props.pauseOnHover,
+			pauseOnFocus: () => props.pauseOnFocus,
+			requestClose(reason) {
+				controllableOpen.setValue(false);
+				emit("close", reason);
+			}
 		});
-		const isOpen = computed(() => props.open ?? localOpen.value);
 		const hasTitle = computed(() => Boolean(props.title || slots.title));
 		const hasDescription = computed(() => Boolean(props.description));
 		const hasContent = computed(() => Boolean(hasTitle.value || hasDescription.value || slots.default));
@@ -126,98 +239,14 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			class: rootClass.value,
 			style: rootStyle.value,
 			role: resolvedRole.value,
-			onMouseenter,
-			onMouseleave,
-			onFocusin,
-			onFocusout
+			...rootEvents
 		}));
-		watch([isOpen, () => props.duration], ([open], [wasOpen]) => {
-			if (!isMounted.value) return;
-			if (!open || !wasOpen) {
-				pausedByHover.value = false;
-				pausedByFocus.value = false;
-			}
-			resetTimer();
-		});
-		onMounted(() => {
-			isMounted.value = true;
-			resetTimer();
-		});
-		onBeforeUnmount(clearTimer);
-		function getDuration() {
-			return Number.isFinite(props.duration) && props.duration > 0 ? props.duration : 0;
-		}
-		function resetTimer() {
-			clearTimer();
-			remainingDuration = getDuration();
-			scheduleTimer();
-		}
-		function scheduleTimer() {
-			if (!isOpen.value || remainingDuration <= 0 || pausedByHover.value || pausedByFocus.value) return;
-			timerStartedAt = Date.now();
-			timer = setTimeout(() => {
-				timer = void 0;
-				remainingDuration = 0;
-				closeToast("timeout");
-			}, remainingDuration);
-		}
-		function clearTimer() {
-			if (timer === void 0) return;
-			clearTimeout(timer);
-			timer = void 0;
-		}
-		function pauseTimer() {
-			if (timer === void 0) return;
-			remainingDuration = Math.max(0, remainingDuration - (Date.now() - timerStartedAt));
-			clearTimer();
-			if (remainingDuration === 0) closeToast("timeout");
-		}
-		function resumeTimer() {
-			if (pausedByHover.value || pausedByFocus.value) return;
-			scheduleTimer();
-		}
-		function onMouseenter() {
-			if (!props.pauseOnHover) return;
-			pausedByHover.value = true;
-			pauseTimer();
-		}
-		function onMouseleave() {
-			if (!props.pauseOnHover) return;
-			pausedByHover.value = false;
-			resumeTimer();
-		}
-		function onFocusin() {
-			if (!props.pauseOnFocus) return;
-			pausedByFocus.value = true;
-			pauseTimer();
-		}
-		function onFocusout(event) {
-			if (!props.pauseOnFocus) return;
-			const currentTarget = event.currentTarget;
-			if (currentTarget instanceof HTMLElement && event.relatedTarget instanceof Node && currentTarget.contains(event.relatedTarget)) return;
-			pausedByFocus.value = false;
-			resumeTimer();
-		}
-		function closeToast(reason) {
-			if (closePending) return;
-			closePending = true;
-			clearTimer();
-			localOpen.value = false;
-			emit("update:open", false);
-			emit("close", reason);
-			if (isOpen.value) {
-				resetTimer();
-				nextTick(() => {
-					if (isOpen.value) closePending = false;
-				});
-			}
-		}
 		const _on_after_leave = () => emit("after-leave");
 		return createComponent(VaporTransition, {
 			name: "rp-toast",
 			onAfterLeave: () => _on_after_leave
 		}, extend(() => {
-			return createIf(() => isOpen.value, () => {
+			return createIf(() => unref(isOpen), () => {
 				const n30 = t0$1();
 				renderEffect(() => setDynamicProps(n30, [rootAttrs.value]));
 				setInsertionState(n30, null, 0);
@@ -280,14 +309,14 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 					}]));
 					setInsertionState(n29, null, 0);
 					createComponent(unref(x_default), { "aria-hidden": "true" });
-					n29.$evtclick = createInvoker(() => closeToast("dismiss"));
+					on(n29, "click", () => unref(closeToast)("dismiss"));
 					return n29;
 				});
 				return n30;
 			}, null, 129);
 		}, { _: 8 }), true);
 	}
-}), [["__scopeId", "data-v-a830edcc"]]);
+}), [["__scopeId", "data-v-441adf44"]]);
 //#endregion
 //#region src/components/toast/toast-store.ts
 var TYPE_DEFAULTS = {
@@ -707,18 +736,18 @@ var toast_viewport_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 }), [["__scopeId", "data-v-480d3e51"]]);
 //#endregion
 //#region src/components/toast/useToastState.ts
-function optionValue(value) {
-	return toValue(value);
-}
 function useToastState(options = {}) {
-	const uncontrolledOpen = ref(options.defaultOpen ?? false);
 	const closeReason = ref(null);
-	const controlledOpen = computed(() => optionValue(options.open));
-	const isOpen = computed(() => controlledOpen.value ?? uncontrolledOpen.value);
+	const controlledOpen = computed(() => toValue(options.open));
+	const controllableOpen = useControllableValue({
+		modelValue: () => controlledOpen.value,
+		defaultValue: () => options.defaultOpen ?? false,
+		onChange: (nextOpen) => options.onOpenChange?.(nextOpen)
+	});
+	const isOpen = controllableOpen.value;
 	const lastCloseReason = computed(() => closeReason.value);
 	watch(controlledOpen, (nextOpen) => {
 		if (nextOpen === void 0) return;
-		uncontrolledOpen.value = nextOpen;
 		if (nextOpen) closeReason.value = null;
 	}, {
 		flush: "sync",
@@ -731,9 +760,8 @@ function useToastState(options = {}) {
 	}));
 	function setOpen(nextOpen) {
 		if (nextOpen === isOpen.value) return;
-		if (controlledOpen.value === void 0) uncontrolledOpen.value = nextOpen;
 		if (nextOpen) closeReason.value = null;
-		options.onOpenChange?.(nextOpen);
+		controllableOpen.setValue(nextOpen);
 	}
 	function open() {
 		setOpen(true);

package/dist/tooltip.css

@@ -1,11 +1,11 @@
 @layer ropav.components {
-.rp-tooltip[data-v-9457a843] {
+.rp-tooltip[data-v-19aad69c] {
     position: relative;
     display: inline-flex;
     font-family: var(--rp-font-family);
     vertical-align: middle;
 }
-.rp-tooltip__content[data-v-9457a843] {
+.rp-tooltip__content[data-v-19aad69c] {
     --_rp-tooltip-main-axis-offset: var(--rp-spacing-2);
     --_rp-tooltip-cross-axis-offset: 0px;
     --_rp-tooltip-arrow-size: 0.4375rem;
@@ -29,10 +29,10 @@
     border-radius: var(--rp-radius-sm);
     box-shadow: var(--rp-shadow-md);
 }
-.rp-tooltip--target[data-v-9457a843] {
+.rp-tooltip--target[data-v-19aad69c] {
     display: contents;
 }
-.rp-tooltip__arrow[data-v-9457a843] {
+.rp-tooltip__arrow[data-v-19aad69c] {
     position: absolute;
     width: var(--_rp-tooltip-arrow-size);
     height: var(--_rp-tooltip-arrow-size);
@@ -40,24 +40,24 @@
     background-color: inherit;
     rotate: 45deg;
 }
-.rp-tooltip__arrow[data-side=top][data-v-9457a843] {
+.rp-tooltip__arrow[data-side=top][data-v-19aad69c] {
     bottom: calc(-1 * var(--_rp-tooltip-arrow-size) / 2);
 }
-.rp-tooltip__arrow[data-side=right][data-v-9457a843] {
+.rp-tooltip__arrow[data-side=right][data-v-19aad69c] {
     left: calc(-1 * var(--_rp-tooltip-arrow-size) / 2);
 }
-.rp-tooltip__arrow[data-side=bottom][data-v-9457a843] {
+.rp-tooltip__arrow[data-side=bottom][data-v-19aad69c] {
     top: calc(-1 * var(--_rp-tooltip-arrow-size) / 2);
 }
-.rp-tooltip__arrow[data-side=left][data-v-9457a843] {
+.rp-tooltip__arrow[data-side=left][data-v-19aad69c] {
     right: calc(-1 * var(--_rp-tooltip-arrow-size) / 2);
 }
-.rp-tooltip-content-enter-active[data-v-9457a843],
-  .rp-tooltip-content-leave-active[data-v-9457a843] {
+.rp-tooltip-content-enter-active[data-v-19aad69c],
+  .rp-tooltip-content-leave-active[data-v-19aad69c] {
     transition: opacity var(--rp-transition-fast);
 }
-.rp-tooltip-content-enter-from[data-v-9457a843],
-  .rp-tooltip-content-leave-to[data-v-9457a843] {
+.rp-tooltip-content-enter-from[data-v-19aad69c],
+  .rp-tooltip-content-leave-to[data-v-19aad69c] {
     opacity: 0;
 }
 }