ropav 0.0.8 → 0.0.10

package/dist/toast.js

@@ -0,0 +1,679 @@
+import './toast.css';
+import { t as x_default } from "./x.js";
+import { t as bem } from "./bem.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 { VaporTeleport, VaporTransition, VaporTransitionGroup, computed, createComponent, createFor, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, extend, inject, nextTick, on, onBeforeUnmount, onMounted, provide, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, toValue, txt, unref, useId, 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
+function getToastColorStyle(color, variant, autoContrast) {
+	if (!color && !variant) return void 0;
+	const resolvedVariant = variant ?? "surface";
+	const roles = getComponentVariantColorRoles({
+		color,
+		variant: resolvedVariant,
+		defaultColor: "cyan",
+		autoContrast
+	});
+	if (!roles) return void 0;
+	return {
+		"--_rp-toast-bg": roles.background,
+		"--_rp-toast-fg": resolvedVariant === "solid" ? roles.color : "var(--rp-color-text)",
+		"--_rp-toast-title-fg": resolvedVariant === "solid" ? roles.color : "var(--rp-color-text)",
+		"--_rp-toast-icon-fg": roles.color,
+		"--_rp-toast-border": roles.border
+	};
+}
+//#endregion
+//#region src/components/toast/toast.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0$1 = template("<div data-v-face18fc class=rp-toast__icon aria-hidden=true>");
+var t1 = template(" ");
+var t2 = template("<div data-v-face18fc class=rp-toast__title>");
+var t3 = template("<p data-v-face18fc class=rp-toast__description> ");
+var t4 = template("<div data-v-face18fc class=rp-toast__body>");
+var t5 = template("<div data-v-face18fc class=rp-toast__content>");
+var t6 = template("<div data-v-face18fc class=rp-toast__action>");
+var t7 = template("<button data-v-face18fc class=rp-toast__close type=button>");
+var t8 = template("<div data-v-face18fc>");
+delegateEvents("click", "focusin", "focusout");
+//#endregion
+//#region src/components/toast/toast.vue
+var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpToast",
+	__name: "toast",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		title: { default: "" },
+		description: { default: "" },
+		variant: {},
+		color: {},
+		autoContrast: { type: Boolean },
+		radius: {},
+		role: { default: DEFAULT_TOAST_ROLE },
+		duration: { default: DEFAULT_TOAST_DURATION },
+		pauseOnHover: {
+			type: Boolean,
+			default: true
+		},
+		pauseOnFocus: {
+			type: Boolean,
+			default: true
+		},
+		closable: {
+			type: Boolean,
+			default: true
+		},
+		closeLabel: { default: DEFAULT_TOAST_CLOSE_LABEL }
+	},
+	emits: [
+		"update:open",
+		"close",
+		"after-leave"
+	],
+	setup(__props, { emit: __emit, slots: $slots }) {
+		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();
+		});
+		watch(() => props.pauseOnFocus, (pauseOnFocus) => {
+			if (pauseOnFocus || !pausedByFocus.value) return;
+			pausedByFocus.value = false;
+			resumeTimer();
+		});
+		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));
+		const resolvedRole = computed(() => props.role === "none" ? void 0 : props.role);
+		const hasIcon = computed(() => Boolean(slots.icon));
+		const rootClass = computed(() => bem("rp-toast", {
+			[props.variant ?? ""]: Boolean(props.variant),
+			[`radius-${props.radius}`]: Boolean(props.radius)
+		}));
+		const rootStyle = computed(() => getToastColorStyle(props.color, props.variant, props.autoContrast));
+		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, () => {
+				const n30 = t8();
+				renderEffect(() => {
+					setClass(n30, rootClass.value);
+					setStyle(n30, rootStyle.value);
+					setProp(n30, "role", resolvedRole.value);
+				});
+				setInsertionState(n30, null, 0);
+				createIf(() => hasIcon.value, () => {
+					const n5 = t0$1();
+					setInsertionState(n5, null, 0);
+					createSlot("icon", null, null, 1);
+					return n5;
+				});
+				setInsertionState(n30, null, 1);
+				createIf(() => hasContent.value, () => {
+					const n21 = t5();
+					setInsertionState(n21, null, 0);
+					createIf(() => hasTitle.value, () => {
+						const n13 = t2();
+						setInsertionState(n13, null, 0);
+						createSlot("title", null, () => {
+							const n12 = t1();
+							renderEffect(() => setText(n12, toDisplayString(__props.title)));
+							return n12;
+						}, 1);
+						return n13;
+					});
+					setInsertionState(n21, null, 1);
+					createIf(() => hasDescription.value, () => {
+						const n16 = t3();
+						const x16 = txt(n16);
+						renderEffect(() => setText(x16, toDisplayString(__props.description)));
+						return n16;
+					});
+					setInsertionState(n21, null, 2);
+					createIf(() => $slots.default, () => {
+						const n20 = t4();
+						setInsertionState(n20, null, 0);
+						createSlot("default", null, null, 1);
+						return n20;
+					});
+					return n21;
+				});
+				setInsertionState(n30, null, 2);
+				createIf(() => $slots.action, () => {
+					const n25 = t6();
+					setInsertionState(n25, null, 0);
+					createSlot("action", null, null, 1);
+					return n25;
+				});
+				setInsertionState(n30, null, 3);
+				createIf(() => __props.closable, () => {
+					const n29 = t7();
+					renderEffect(() => setAttr(n29, "aria-label", __props.closeLabel));
+					setInsertionState(n29, null, 0);
+					createComponent(unref(x_default), { "aria-hidden": "true" });
+					n29.$evtclick = createInvoker(() => closeToast("dismiss"));
+					return n29;
+				});
+				on(n30, "mouseenter", onMouseenter);
+				on(n30, "mouseleave", onMouseleave);
+				n30.$evtfocusin = createInvoker(onFocusin);
+				n30.$evtfocusout = createInvoker(onFocusout);
+				return n30;
+			}, null, 129);
+		}, { _: 8 }), true);
+	}
+}), [["__scopeId", "data-v-face18fc"]]);
+//#endregion
+//#region src/components/toast/types.ts
+var toastColors = componentColors;
+var toastVariants = [
+	"subtle",
+	"surface",
+	"outline",
+	"solid"
+];
+var toastRadiuses = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+var toastPositions = [
+	"top-left",
+	"top-center",
+	"top-right",
+	"bottom-left",
+	"bottom-center",
+	"bottom-right"
+];
+var toastTypes = [
+	"default",
+	"success",
+	"error",
+	"warning",
+	"info"
+];
+var toastProviderKey = Symbol("toast-provider");
+//#endregion
+//#region src/components/toast/useToast.ts
+var TYPE_DEFAULTS = {
+	default: {},
+	success: { color: "green" },
+	error: {
+		color: "red",
+		role: "alert"
+	},
+	warning: {
+		color: "yellow",
+		role: "alert"
+	},
+	info: { color: "blue" }
+};
+function withoutUndefined(value) {
+	return Object.fromEntries(Object.entries(value).filter(([, entry]) => entry !== void 0));
+}
+function normalizeMax(max) {
+	if (max === Infinity) return Infinity;
+	if (!Number.isFinite(max)) return 5;
+	return Math.max(1, Math.floor(max ?? 5));
+}
+function normalizeInput(input, options) {
+	return {
+		...typeof input === "string" ? { title: input } : input,
+		...options
+	};
+}
+function splitOptions(options) {
+	const { id, type, onClose, ...toastProps } = options;
+	return {
+		id,
+		type,
+		onClose,
+		toastProps: withoutUndefined(toastProps)
+	};
+}
+function getProviderDefaults(props) {
+	return withoutUndefined({
+		duration: props.duration ?? 5e3,
+		variant: props.variant,
+		color: props.color,
+		autoContrast: props.autoContrast,
+		radius: props.radius,
+		role: props.role,
+		pauseOnHover: props.pauseOnHover ?? true,
+		pauseOnFocus: props.pauseOnFocus ?? true,
+		closable: props.closable ?? true,
+		closeLabel: props.closeLabel ?? "Close toast"
+	});
+}
+function replaceAt(items, index, value) {
+	const nextItems = items.slice();
+	nextItems[index] = value;
+	return nextItems;
+}
+function notify(item, reason) {
+	item.onClose?.(reason);
+}
+function partitionOverflow(items, max) {
+	if (max === Infinity || items.length <= max) return {
+		kept: items,
+		evicted: []
+	};
+	const overflow = items.length - max;
+	return {
+		kept: items.slice(overflow),
+		evicted: items.slice(0, overflow)
+	};
+}
+function provideToast(props) {
+	const scopeId = useId();
+	const items = ref([]);
+	const toasts = computed(() => items.value);
+	const records = /* @__PURE__ */ new Map();
+	let sequence = 0;
+	function createInstanceId() {
+		sequence += 1;
+		return `${scopeId}-toast-${sequence}`;
+	}
+	function resolveItem(id, instanceId, record) {
+		return {
+			id,
+			instanceId,
+			type: record.type,
+			props: {
+				...TYPE_DEFAULTS[record.type],
+				...getProviderDefaults(props),
+				...record.props
+			},
+			onClose: record.onClose
+		};
+	}
+	function forget(removedItems) {
+		for (const item of removedItems) records.delete(item.instanceId);
+	}
+	function notifyAll(removedItems, reason) {
+		for (const item of removedItems) notify(item, reason);
+	}
+	function create(type, input, options) {
+		const split = splitOptions(normalizeInput(input, options));
+		const instanceId = createInstanceId();
+		const id = split.id ?? instanceId;
+		const record = {
+			type: split.type ?? type,
+			props: split.toastProps,
+			onClose: split.onClose
+		};
+		const item = resolveItem(id, instanceId, record);
+		const replaced = items.value.filter((current) => current.id === id);
+		const { kept, evicted } = partitionOverflow([...items.value.filter((current) => current.id !== id), item], normalizeMax(props.max));
+		records.set(instanceId, record);
+		forget([...replaced, ...evicted]);
+		items.value = kept;
+		notifyAll([...replaced, ...evicted], "dismiss");
+		return id;
+	}
+	function show(input, options) {
+		return create("default", input, options);
+	}
+	function success(input, options) {
+		return create("success", input, options);
+	}
+	function error(input, options) {
+		return create("error", input, options);
+	}
+	function warning(input, options) {
+		return create("warning", input, options);
+	}
+	function info(input, options) {
+		return create("info", input, options);
+	}
+	function update(id, options) {
+		const index = items.value.findIndex((item) => item.id === id);
+		if (index === -1) return;
+		const current = items.value[index];
+		const record = records.get(current.instanceId);
+		if (!record) return;
+		const { type, onClose, ...toastProps } = options;
+		const nextRecord = {
+			type: type ?? record.type,
+			props: {
+				...record.props,
+				...withoutUndefined(toastProps)
+			},
+			onClose: Object.hasOwn(options, "onClose") ? onClose : record.onClose
+		};
+		records.set(current.instanceId, nextRecord);
+		items.value = replaceAt(items.value, index, resolveItem(current.id, current.instanceId, nextRecord));
+	}
+	function closeAt(index, reason) {
+		if (index === -1) return;
+		const current = items.value[index];
+		records.delete(current.instanceId);
+		items.value = items.value.filter((_, currentIndex) => currentIndex !== index);
+		notify(current, reason);
+	}
+	function dismiss(id, reason = "dismiss") {
+		closeAt(items.value.findIndex((item) => item.id === id), reason);
+	}
+	function dismissInstance(instanceId, reason = "dismiss") {
+		closeAt(items.value.findIndex((item) => item.instanceId === instanceId), reason);
+	}
+	function dismissAll(reason = "dismiss") {
+		const dismissed = items.value;
+		records.clear();
+		items.value = [];
+		notifyAll(dismissed, reason);
+	}
+	const context = {
+		toasts,
+		show,
+		success,
+		error,
+		warning,
+		info,
+		update,
+		dismiss,
+		dismissAll,
+		dismissInstance
+	};
+	provide(toastProviderKey, context);
+	watch(() => normalizeMax(props.max), (max) => {
+		const { kept, evicted } = partitionOverflow(items.value, max);
+		if (evicted.length === 0) return;
+		forget(evicted);
+		items.value = kept;
+		notifyAll(evicted, "dismiss");
+	}, { flush: "sync" });
+	return context;
+}
+function useToastContext(consumer) {
+	const context = inject(toastProviderKey);
+	if (!context) throw new Error(`[Ropav] ${consumer} must be used inside <ToastProvider>.`);
+	return context;
+}
+function useToast() {
+	return useToastContext("useToast()");
+}
+//#endregion
+//#region src/components/toast/toast-provider.vue
+var toast_provider_default = /* @__PURE__ */ defineVaporComponent({
+	name: "RpToastProvider",
+	__name: "toast-provider",
+	props: {
+		max: { default: 5 },
+		duration: { default: DEFAULT_TOAST_DURATION },
+		variant: { default: void 0 },
+		color: { default: void 0 },
+		autoContrast: {
+			type: Boolean,
+			default: void 0
+		},
+		radius: { default: void 0 },
+		role: { default: void 0 },
+		pauseOnHover: {
+			type: Boolean,
+			default: true
+		},
+		pauseOnFocus: {
+			type: Boolean,
+			default: true
+		},
+		closable: {
+			type: Boolean,
+			default: true
+		},
+		closeLabel: { default: DEFAULT_TOAST_CLOSE_LABEL }
+	},
+	setup(__props) {
+		provideToast(__props);
+		return createSlot();
+	}
+});
+//#endregion
+//#region src/components/toast/toast-viewport.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<li data-v-e4c0bb63 class=rp-toast-viewport__item>");
+//#endregion
+//#region src/components/toast/toast-viewport.vue
+var toast_viewport_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpToastViewport",
+	__name: "toast-viewport",
+	props: {
+		position: { default: "top-right" },
+		label: { default: "Notifications" },
+		teleport: {
+			type: Boolean,
+			default: true
+		},
+		teleportTo: { default: "body" }
+	},
+	setup(__props, { slots: $slots }) {
+		const props = __props;
+		const context = useToastContext("<ToastViewport>");
+		function reverseToasts(toasts) {
+			return toasts.map((_, index) => toasts[toasts.length - index - 1]);
+		}
+		const orderedToasts = computed(() => props.position.startsWith("top") ? reverseToasts(context.toasts.value) : context.toasts.value);
+		function dismiss(toast) {
+			context.dismissInstance(toast.instanceId);
+		}
+		return createComponent(VaporTeleport, {
+			to: () => __props.teleportTo,
+			disabled: () => !__props.teleport
+		}, () => {
+			return createComponent(VaporTransitionGroup, {
+				tag: "ol",
+				name: "rp-toast-viewport-item",
+				class: () => [
+					"rp-toast-viewport",
+					`rp-toast-viewport--${__props.position}`,
+					{ "rp-toast-viewport--empty": orderedToasts.value.length === 0 }
+				],
+				"data-position": () => __props.position,
+				"aria-label": () => __props.label
+			}, extend(() => {
+				return createFor(() => orderedToasts.value, (_for_item0) => {
+					const n10 = t0();
+					setInsertionState(n10, null, 0);
+					createComponent(toast_default, { $: [() => _for_item0.value.props, {
+						open: true,
+						onClose: () => ($event) => unref(context).dismissInstance(_for_item0.value.instanceId, $event)
+					}] }, { $: [
+						() => $slots.icon ? {
+							name: "icon",
+							fn: () => {
+								return createSlot("icon", {
+									toast: () => _for_item0.value,
+									dismiss: () => (() => dismiss(_for_item0.value))
+								}, null, 1);
+							}
+						} : void 0,
+						() => $slots.action ? {
+							name: "action",
+							fn: () => {
+								return createSlot("action", {
+									toast: () => _for_item0.value,
+									dismiss: () => (() => dismiss(_for_item0.value))
+								}, null, 1);
+							}
+						} : void 0,
+						{ "default": extend(() => {
+							return createIf(() => $slots.default, () => {
+								return createSlot("default", {
+									toast: () => _for_item0.value,
+									dismiss: () => (() => dismiss(_for_item0.value))
+								}, null, 1);
+							}, null, 129);
+						}, { _: 8 }) }
+					] });
+					return n10;
+				}, (toast) => toast.instanceId, 40);
+			}, { _: 8 }));
+		}, true);
+	}
+}), [["__scopeId", "data-v-e4c0bb63"]]);
+//#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 lastCloseReason = computed(() => closeReason.value);
+	watch(controlledOpen, (nextOpen) => {
+		if (nextOpen === void 0) return;
+		uncontrolledOpen.value = nextOpen;
+		if (nextOpen) closeReason.value = null;
+	}, {
+		flush: "sync",
+		immediate: true
+	});
+	const toastProps = computed(() => ({
+		open: isOpen.value,
+		"onUpdate:open": setOpen,
+		onClose: handleToastClose
+	}));
+	function setOpen(nextOpen) {
+		if (nextOpen === isOpen.value) return;
+		if (controlledOpen.value === void 0) uncontrolledOpen.value = nextOpen;
+		if (nextOpen) closeReason.value = null;
+		options.onOpenChange?.(nextOpen);
+	}
+	function open() {
+		setOpen(true);
+	}
+	function close(reason = "dismiss") {
+		if (!isOpen.value) return;
+		setOpen(false);
+		handleToastClose(reason);
+	}
+	function toggle() {
+		if (isOpen.value) close();
+		else open();
+	}
+	function handleToastClose(reason) {
+		closeReason.value = reason;
+		options.onClose?.(reason);
+	}
+	return {
+		isOpen,
+		lastCloseReason,
+		toastProps,
+		setOpen,
+		open,
+		close,
+		toggle
+	};
+}
+//#endregion
+export { toastColors as a, toastTypes as c, useToast as i, toastVariants as l, toast_viewport_default as n, toastPositions as o, toast_provider_default as r, toastRadiuses as s, useToastState as t, toast_default as u };