ropav 0.0.10 → 0.0.12

package/dist/toast.js

@@ -1,9 +1,11 @@
 import './toast.css';
 import { t as x_default } from "./x.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 { 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";
+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";
 //#region src/components/toast/defaults.ts
 var DEFAULT_TOAST_DURATION = 5e3;
 var DEFAULT_TOAST_ROLE = "status";
@@ -30,20 +32,17 @@ function getToastColorStyle(color, variant, autoContrast) {
 }
 //#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 t0$1 = template("<div data-v-6944ac43>");
 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");
+var t2 = template("<p data-v-6944ac43> ");
+var t3 = template("<div data-v-6944ac43 class=rp-toast__content>");
+var t4 = template("<button data-v-6944ac43>");
+delegateEvents("click");
 //#endregion
 //#region src/components/toast/toast.vue
 var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpToast",
+	inheritAttrs: false,
 	__name: "toast",
 	props: {
 		open: {
@@ -70,7 +69,9 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			type: Boolean,
 			default: true
 		},
-		closeLabel: { default: DEFAULT_TOAST_CLOSE_LABEL }
+		closeLabel: { default: DEFAULT_TOAST_CLOSE_LABEL },
+		classNames: {},
+		styles: {}
 	},
 	emits: [
 		"update:open",
@@ -114,6 +115,16 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			[`radius-${props.radius}`]: Boolean(props.radius)
 		}));
 		const rootStyle = computed(() => getToastColorStyle(props.color, props.variant, props.autoContrast));
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			style: rootStyle.value,
+			role: resolvedRole.value,
+			onMouseenter,
+			onMouseleave,
+			onFocusin,
+			onFocusout
+		}));
 		watch([isOpen, () => props.duration], ([open], [wasOpen]) => {
 			if (!isMounted.value) return;
 			if (!open || !wasOpen) {
@@ -201,25 +212,23 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			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);
-				});
+				const n30 = t0$1();
+				renderEffect(() => setDynamicProps(n30, [rootAttrs.value]));
 				setInsertionState(n30, null, 0);
 				createIf(() => hasIcon.value, () => {
 					const n5 = t0$1();
+					renderEffect(() => setDynamicProps(n5, [unref(getPartAttrs)("icon", { class: "rp-toast__icon" }), { "aria-hidden": "true" }]));
 					setInsertionState(n5, null, 0);
 					createSlot("icon", null, null, 1);
 					return n5;
 				});
 				setInsertionState(n30, null, 1);
 				createIf(() => hasContent.value, () => {
-					const n21 = t5();
+					const n21 = t3();
 					setInsertionState(n21, null, 0);
 					createIf(() => hasTitle.value, () => {
-						const n13 = t2();
+						const n13 = t0$1();
+						renderEffect(() => setDynamicProps(n13, [unref(getPartAttrs)("title", { class: "rp-toast__title" })]));
 						setInsertionState(n13, null, 0);
 						createSlot("title", null, () => {
 							const n12 = t1();
@@ -230,14 +239,18 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 					});
 					setInsertionState(n21, null, 1);
 					createIf(() => hasDescription.value, () => {
-						const n16 = t3();
+						const n16 = t2();
 						const x16 = txt(n16);
-						renderEffect(() => setText(x16, toDisplayString(__props.description)));
+						renderEffect(() => {
+							setDynamicProps(n16, [unref(getPartAttrs)("description", { class: "rp-toast__description" })]);
+							setText(x16, toDisplayString(__props.description));
+						});
 						return n16;
 					});
 					setInsertionState(n21, null, 2);
 					createIf(() => $slots.default, () => {
-						const n20 = t4();
+						const n20 = t0$1();
+						renderEffect(() => setDynamicProps(n20, [unref(getPartAttrs)("body", { class: "rp-toast__body" })]));
 						setInsertionState(n20, null, 0);
 						createSlot("default", null, null, 1);
 						return n20;
@@ -246,64 +259,31 @@ var toast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				});
 				setInsertionState(n30, null, 2);
 				createIf(() => $slots.action, () => {
-					const n25 = t6();
+					const n25 = t0$1();
+					renderEffect(() => setDynamicProps(n25, [unref(getPartAttrs)("action", { class: "rp-toast__action" })]));
 					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));
+					const n29 = t4();
+					renderEffect(() => setDynamicProps(n29, [unref(getPartAttrs)("close", { class: "rp-toast__close" }), {
+						type: "button",
+						"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");
+}), [["__scopeId", "data-v-6944ac43"]]);
 //#endregion
-//#region src/components/toast/useToast.ts
+//#region src/components/toast/toast-store.ts
 var TYPE_DEFAULTS = {
 	default: {},
 	success: { color: "green" },
@@ -340,18 +320,18 @@ function splitOptions(options) {
 		toastProps: withoutUndefined(toastProps)
 	};
 }
-function getProviderDefaults(props) {
+function getStoreDefaults(options) {
 	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"
+		duration: options.duration ?? 5e3,
+		variant: options.variant,
+		color: options.color,
+		autoContrast: options.autoContrast,
+		radius: options.radius,
+		role: options.role,
+		pauseOnHover: options.pauseOnHover ?? true,
+		pauseOnFocus: options.pauseOnFocus ?? true,
+		closable: options.closable ?? true,
+		closeLabel: options.closeLabel ?? "Close toast"
 	});
 }
 function replaceAt(items, index, value) {
@@ -373,15 +353,14 @@ function partitionOverflow(items, max) {
 		evicted: items.slice(0, overflow)
 	};
 }
-function provideToast(props) {
-	const scopeId = useId();
+function createToastStore(options = {}) {
 	const items = ref([]);
 	const toasts = computed(() => items.value);
 	const records = /* @__PURE__ */ new Map();
 	let sequence = 0;
 	function createInstanceId() {
 		sequence += 1;
-		return `${scopeId}-toast-${sequence}`;
+		return `rp-toast-${sequence}`;
 	}
 	function resolveItem(id, instanceId, record) {
 		return {
@@ -390,7 +369,7 @@ function provideToast(props) {
 			type: record.type,
 			props: {
 				...TYPE_DEFAULTS[record.type],
-				...getProviderDefaults(props),
+				...getStoreDefaults(options),
 				...record.props
 			},
 			onClose: record.onClose
@@ -402,8 +381,8 @@ function provideToast(props) {
 	function notifyAll(removedItems, reason) {
 		for (const item of removedItems) notify(item, reason);
 	}
-	function create(type, input, options) {
-		const split = splitOptions(normalizeInput(input, options));
+	function create(type, input, createOptions) {
+		const split = splitOptions(normalizeInput(input, createOptions));
 		const instanceId = createInstanceId();
 		const id = split.id ?? instanceId;
 		const record = {
@@ -413,42 +392,43 @@ function provideToast(props) {
 		};
 		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));
+		const { kept, evicted } = partitionOverflow([...items.value.filter((current) => current.id !== id), item], normalizeMax(options.max));
 		records.set(instanceId, record);
 		forget([...replaced, ...evicted]);
 		items.value = kept;
-		notifyAll([...replaced, ...evicted], "dismiss");
+		notifyAll(replaced, "replace");
+		notifyAll(evicted, "overflow");
 		return id;
 	}
-	function show(input, options) {
-		return create("default", input, options);
+	function show(input, createOptions) {
+		return create("default", input, createOptions);
 	}
-	function success(input, options) {
-		return create("success", input, options);
+	function success(input, createOptions) {
+		return create("success", input, createOptions);
 	}
-	function error(input, options) {
-		return create("error", input, options);
+	function error(input, createOptions) {
+		return create("error", input, createOptions);
 	}
-	function warning(input, options) {
-		return create("warning", input, options);
+	function warning(input, createOptions) {
+		return create("warning", input, createOptions);
 	}
-	function info(input, options) {
-		return create("info", input, options);
+	function info(input, createOptions) {
+		return create("info", input, createOptions);
 	}
-	function update(id, options) {
+	function update(id, updateOptions) {
 		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 { type, onClose, ...toastProps } = updateOptions;
 		const nextRecord = {
 			type: type ?? record.type,
 			props: {
 				...record.props,
 				...withoutUndefined(toastProps)
 			},
-			onClose: Object.hasOwn(options, "onClose") ? onClose : record.onClose
+			onClose: Object.hasOwn(updateOptions, "onClose") ? onClose : record.onClose
 		};
 		records.set(current.instanceId, nextRecord);
 		items.value = replaceAt(items.value, index, resolveItem(current.id, current.instanceId, nextRecord));
@@ -463,16 +443,13 @@ function provideToast(props) {
 	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 = {
+	const store = {
 		toasts,
 		show,
 		success,
@@ -481,17 +458,82 @@ function provideToast(props) {
 		info,
 		update,
 		dismiss,
-		dismissAll,
-		dismissInstance
+		dismissAll
 	};
-	provide(toastProviderKey, context);
-	watch(() => normalizeMax(props.max), (max) => {
+	watch(() => normalizeMax(options.max), (max) => {
 		const { kept, evicted } = partitionOverflow(items.value, max);
 		if (evicted.length === 0) return;
 		forget(evicted);
 		items.value = kept;
-		notifyAll(evicted, "dismiss");
+		notifyAll(evicted, "overflow");
 	}, { flush: "sync" });
+	return store;
+}
+//#endregion
+//#region src/components/toast/types.ts
+var toastParts = [
+	"root",
+	"icon",
+	"title",
+	"description",
+	"body",
+	"action",
+	"close"
+];
+var toastViewportParts = [
+	"root",
+	"item",
+	"toast",
+	"toastIcon",
+	"toastTitle",
+	"toastDescription",
+	"toastBody",
+	"toastAction",
+	"toastClose"
+];
+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
+function provideToast(store) {
+	function dismissInstance(instanceId, reason = "dismiss") {
+		const item = store.toasts.value.find((current) => current.instanceId === instanceId);
+		if (item) store.dismiss(item.id, reason);
+	}
+	const context = {
+		...store,
+		dismissInstance
+	};
+	provide(toastProviderKey, context);
 	return context;
 }
 function useToastContext(consumer) {
@@ -508,6 +550,7 @@ var toast_provider_default = /* @__PURE__ */ defineVaporComponent({
 	name: "RpToastProvider",
 	__name: "toast-provider",
 	props: {
+		store: {},
 		max: { default: 5 },
 		duration: { default: DEFAULT_TOAST_DURATION },
 		variant: { default: void 0 },
@@ -533,17 +576,19 @@ var toast_provider_default = /* @__PURE__ */ defineVaporComponent({
 		closeLabel: { default: DEFAULT_TOAST_CLOSE_LABEL }
 	},
 	setup(__props) {
-		provideToast(__props);
+		const props = __props;
+		provideToast(props.store ?? createToastStore(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>");
+var t0 = template("<li data-v-e14bb4e0>");
 //#endregion
 //#region src/components/toast/toast-viewport.vue
 var toast_viewport_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpToastViewport",
+	inheritAttrs: false,
 	__name: "toast-viewport",
 	props: {
 		position: { default: "top-right" },
@@ -552,38 +597,64 @@ var toast_viewport_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			type: Boolean,
 			default: true
 		},
-		teleportTo: { default: "body" }
+		teleportTo: {},
+		classNames: {},
+		styles: {}
 	},
 	setup(__props, { slots: $slots }) {
 		const props = __props;
+		const resolvedTeleportTo = useTeleportTarget(() => props.teleportTo);
 		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);
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			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
+		}));
+		const viewportToastPartMap = {
+			root: "toast",
+			icon: "toastIcon",
+			title: "toastTitle",
+			description: "toastDescription",
+			body: "toastBody",
+			action: "toastAction",
+			close: "toastClose"
+		};
+		function getToastClassNames(toast) {
+			return Object.fromEntries(Object.entries(viewportToastPartMap).map(([toastPart, viewportPart]) => [toastPart, [toast.props.classNames?.[toastPart], props.classNames?.[viewportPart]]]));
+		}
+		function getToastStyles(toast) {
+			return Object.fromEntries(Object.entries(viewportToastPartMap).map(([toastPart, viewportPart]) => [toastPart, [toast.props.styles?.[toastPart], props.styles?.[viewportPart]]]));
+		}
 		function dismiss(toast) {
 			context.dismissInstance(toast.instanceId);
 		}
 		return createComponent(VaporTeleport, {
-			to: () => __props.teleportTo,
+			to: () => unref(resolvedTeleportTo),
 			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
+				$: [() => rootAttrs.value]
 			}, extend(() => {
 				return createFor(() => orderedToasts.value, (_for_item0) => {
 					const n10 = t0();
+					renderEffect(() => setDynamicProps(n10, [unref(getPartAttrs)("item", { class: "rp-toast-viewport__item" }), { "data-type": _for_item0.value.type }]));
 					setInsertionState(n10, null, 0);
 					createComponent(toast_default, { $: [() => _for_item0.value.props, {
 						open: true,
+						"class-names": () => getToastClassNames(_for_item0.value),
+						styles: () => getToastStyles(_for_item0.value),
+						"data-type": () => _for_item0.value.type,
 						onClose: () => ($event) => unref(context).dismissInstance(_for_item0.value.instanceId, $event)
 					}] }, { $: [
 						() => $slots.icon ? {
@@ -618,7 +689,7 @@ var toast_viewport_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			}, { _: 8 }));
 		}, true);
 	}
-}), [["__scopeId", "data-v-e4c0bb63"]]);
+}), [["__scopeId", "data-v-e14bb4e0"]]);
 //#endregion
 //#region src/components/toast/useToastState.ts
 function optionValue(value) {
@@ -676,4 +747,4 @@ function useToastState(options = {}) {
 	};
 }
 //#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 };
+export { toastColors as a, toastRadiuses as c, toastViewportParts as d, createToastStore as f, useToast as i, toastTypes as l, toast_viewport_default as n, toastParts as o, toast_default as p, toast_provider_default as r, toastPositions as s, useToastState as t, toastVariants as u };