vue3-snackbar
Version:
<p align="center"> <a href="https://evomark.co.uk" target="_blank" alt="Link to evoMark's website"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://evomark.co.uk/wp-content/uploads/static/evomark-logo--dark.svg
826 lines (825 loc) • 25.4 kB
JavaScript
import { Fragment, Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, getCurrentInstance, getCurrentScope, h, inject, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onScopeDispose, onUnmounted, openBlock, ref, renderList, renderSlot, shallowRef, toDisplayString, toRaw, toValue, unref, watch, withCtx, withModifiers } from "vue";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
key = keys[i];
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: ((k) => from[k]).bind(null, key),
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod));
var mdiAlertOctagonOutline = "M8.27,3L3,8.27V15.73L8.27,21H15.73C17.5,19.24 21,15.73 21,15.73V8.27L15.73,3M9.1,5H14.9L19,9.1V14.9L14.9,19H9.1L5,14.9V9.1M11,15H13V17H11V15M11,7H13V13H11V7";
var mdiAlertOutline = "M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16";
var mdiCheckCircle = "M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z";
var mdiClose = "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z";
var mdiInformationOutline = "M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z";
const y = { transform: "rotate(var(--r, 0deg)) scale(var(--sx, 1), var(--sy, 1))" }, o = {
mdi: {
size: 24,
viewbox: "0 0 24 24"
},
"simple-icons": {
size: 24,
viewbox: "0 0 24 24"
},
default: {
size: 0,
viewbox: "0 0 0 0"
}
}, v = {
props: {
type: {
type: String,
required: !0
},
path: {
type: [
String,
Object,
Array
],
required: !1
},
pathString: {
type: [
Array,
String,
Object
],
required: !1
}
},
setup(e) {
return () => e.type === "fad" ? (console.warn("vue3-icon does not currently support Duotone FontAwesome icons"), h("path")) : Array.isArray(e.path) ? h("g", { style: { fill: "currentcolor" } }, e.path.map((a) => typeof a == "string" ? h("path", { d: a }) : h("path", { ...a }))) : h("path", {
d: e.pathString,
style: { fill: "currentcolor" }
});
}
}, g = {
name: "icon",
props: {
type: {
type: String,
default: "mdi"
},
faIcon: {
type: Object,
default: null
},
path: { type: [
String,
Object,
Array
] },
size: {
type: [Number, String],
default: 24
},
viewbox: {
type: String,
required: !1
},
flip: {
type: String,
default: "",
validator: (e) => [
"",
"horizontal",
"vertical",
"both"
].includes(e)
},
rotate: {
type: [Number, String],
default: 0
},
noNamespace: {
type: Boolean,
default: !1
},
noStyles: {
type: Boolean,
default: !1
},
noDimensions: {
type: Boolean,
default: !1
}
},
setup(e) {
if (!e.path && !e.faIcon) return console.warn("vue3-icon requires either a 'path' or an 'fa-icon' property"), () => h("div");
const a = computed(() => {
var i;
return ((i = e.faIcon) == null ? void 0 : i.prefix) || e.type;
}), r = computed(() => parseInt(e.rotate, 10)), l = computed(() => o[a.value] || o.default), u = computed(() => parseInt(e.size, 10) || l.value.size), s = computed(() => e.faIcon ? `0 0 ${e.faIcon.icon[0]} ${e.faIcon.icon[1]}` : !1), c = computed(() => s.value || e.viewbox || l.value.viewbox), f = computed(() => {
if (e.noStyles !== !0) return {
...y,
"--sx": ["both", "horizontal"].includes(e.flip) ? "-1" : "1",
"--sy": ["both", "vertical"].includes(e.flip) ? "-1" : "1",
"--r": isNaN(r.value) ? r.value : r.value + "deg"
};
}), d = computed(() => {
var i;
return e.faIcon ? (i = e.faIcon) == null ? void 0 : i.icon[4] : e.type === "simple-icons" && typeof e.path == "object" ? e.path.path : e.path;
});
return () => h("svg", {
xmlns: e.noNamespace !== !0 ? "http://www.w3.org/2000/svg" : void 0,
style: f.value,
class: ["vue3-icon"],
width: e.noDimensions !== !0 ? u.value : void 0,
height: e.noDimensions !== !0 ? u.value : void 0,
viewBox: c.value
}, [h(v, {
path: e.path,
type: a.value,
pathString: d.value
})]);
}
};
const _hoisted_1 = ["role"];
const _hoisted_2 = { class: "vue3-snackbar-message-wrapper" };
const _hoisted_3 = {
key: 0,
class: "vue3-snackbar-message-icon"
};
const _hoisted_4 = { class: "vue3-snackbar-message-content" };
const _hoisted_5 = {
key: 0,
class: "vue3-snackbar-message-badge"
};
const _hoisted_6 = { class: "vue3-snackbar-message-title" };
const _hoisted_7 = {
key: 0,
class: "vue3-snackbar-message-additional"
};
const _hoisted_8 = { class: "vue3-snackbar-message-close" };
const _sfc_main$1 = {
__name: "Vue3SnackbarMessage",
props: {
borderClass: {
type: String,
default: ""
},
message: {
type: Object,
default: () => ({})
},
messageClass: {
type: String,
default: ""
},
messageActionClass: {
type: String,
default: "vue3-snackbar-message-action"
},
dense: {
type: Boolean,
default: false
},
iconPresets: {
type: Object,
required: true
}
},
emits: ["dismiss", "click:action"],
setup(__props, { emit: __emit }) {
const emit = __emit;
const props = __props;
let timeout = null, shakeTimeout = null;
let hasShake = ref(false);
const setMessageTimeout = () => {
const isZero = props.message.duration === 0 || props.message.duration === "0";
if (isZero && props.message.dismissible !== false) return;
const messageDuration = !props.message.duration && !props.message.dismissible ? 4e3 : props.message.duration;
timeout = setTimeout(dismiss, messageDuration);
};
onMounted(setMessageTimeout);
watch(() => props.message.count, (v$1) => {
if (v$1 === 1) return false;
clearTimeout(timeout);
clearTimeout(shakeTimeout);
shakeTimeout = setTimeout(() => {
hasShake.value = false;
}, 1e3);
hasShake.value = true;
setMessageTimeout();
});
const dismissClick = () => {
if (timeout) clearTimeout(timeout);
dismiss();
};
const dismiss = () => {
emit("dismiss", props.message);
};
const generatedIconPresets = computed(() => Object.assign({}, {
success: { path: mdiCheckCircle },
info: { path: mdiInformationOutline },
warning: { path: mdiAlertOutline },
error: { path: mdiAlertOctagonOutline }
}, props.iconPresets));
const icon = computed(() => {
const preset = generatedIconPresets.value[props.message.type];
if (props.message.type && !preset) console.warn("[Vue3 Snackbar] Couldn't find icon preset for type " + props.message.type);
if (preset) {
preset.type = "mdi";
return preset;
} else if (props.message.icon && typeof props.message.icon === "object") return props.message.icon;
else return {
path: "",
type: "default"
};
});
const messageRole = computed(() => props.message.type === "error" ? "alert" : props.message?.role ?? "status");
const RenderedAction = {
name: "RenderedAction",
render() {
const c = computed(() => toRaw(props.message.action));
return c.value ? h(c.value, {
message: props.message,
isDismissible: props.message.isDismissible,
dismiss: dismissClick
}) : null;
}
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock("article", {
class: normalizeClass(["vue3-snackbar-message", [
props.message.type || "custom",
props.messageClass,
props.borderClass,
{
"has-background": props.message.background,
"has-border": props.borderClass,
"is-dense": props.dense,
"shake-baby-shake": unref(hasShake)
}
]]),
role: messageRole.value,
style: normalizeStyle({
"--message-background": props.message.background,
"--message-text-color": props.message.textColor,
"--message-icon-color": props.message.iconColor
})
}, [renderSlot(_ctx.$slots, "message-inner", { message: props.message }, () => [createElementVNode("div", _hoisted_2, [
icon.value ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "message-icon", {
message: props.message,
icon: icon.value
}, () => [createVNode(unref(g), mergeProps(icon.value, { role: "img" }), null, 16)])])) : createCommentVNode("", true),
createElementVNode("div", _hoisted_4, [
renderSlot(_ctx.$slots, "message-badge", {
message: props.message,
count: props.message.count
}, () => [props.message.count > 1 ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(props.message.count), 1)) : createCommentVNode("", true)]),
renderSlot(_ctx.$slots, "message-content", {
message: props.message,
title: props.message.title,
text: props.message.text
}, () => [createElementVNode("div", _hoisted_6, toDisplayString(props.message.title || props.message.text), 1), props.message.title && props.message.text ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(props.message.text), 1)) : createCommentVNode("", true)]),
_ctx.$slots["message-action"] ? (openBlock(), createElementBlock("div", {
key: 0,
class: normalizeClass(props.messageActionClass),
onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("click:action", { message: props.message }), ["stop"]))
}, [renderSlot(_ctx.$slots, "message-action", {
message: props.message,
isDismissible: props.message.dismissible,
dismiss: dismissClick
}, () => [createVNode(RenderedAction)])], 2)) : createCommentVNode("", true)
]),
_cache[1] || (_cache[1] = createElementVNode("div", { class: "spacer" }, null, -1)),
createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "message-close-icon", {
message: props.message,
isDimissible: props.message.dismissible,
isDismissible: props.message.dismissible,
dismiss: dismissClick
}, () => [props.message.dismissible !== false ? (openBlock(), createElementBlock("button", {
key: 0,
onClick: withModifiers(dismissClick, ["stop"])
}, [createVNode(unref(g), {
type: "mdi",
path: unref(mdiClose)
}, null, 8, ["path"])])) : createCommentVNode("", true)])])
])])], 14, _hoisted_1);
};
}
};
var Vue3SnackbarMessage_default = _sfc_main$1;
const HTMLElementShim = typeof window !== "undefined" ? HTMLElement : Object;
const propsModel = {
top: {
type: Boolean,
default: false
},
bottom: {
type: Boolean,
default: false
},
left: {
type: Boolean,
default: false
},
right: {
type: Boolean,
default: false
},
start: {
type: Boolean,
default: false
},
end: {
type: Boolean,
default: false
},
success: {
type: String,
default: "#4caf50"
},
error: {
type: String,
default: "#ff5252"
},
warning: {
type: String,
default: "#fb8c00"
},
info: {
type: String,
default: "#2196f3"
},
iconPresets: {
type: Object,
default: () => ({})
},
messageTextColor: {
type: String,
default: "#fff"
},
messageIconColor: {
type: String,
default: "currentColor"
},
backgroundOpacity: {
type: [String, Number],
default: .12,
validator: (v$1) => {
return !isNaN(parseFloat(v$1)) && isFinite(v$1);
}
},
backgroundColor: {
type: String,
default: "currentColor"
},
baseBackgroundColor: {
type: String,
default: "#fff"
},
duration: {
type: [Number, String],
default: null
},
reverse: {
type: Boolean,
default: false
},
limit: {
type: Number,
default: null
},
dismissOnActionClick: {
type: Boolean,
default: true
},
groups: {
type: Boolean,
default: false
},
attach: {
type: [String, HTMLElementShim],
default: "body"
},
border: {
type: String,
default: "",
validator: (v$1) => [
"top",
"bottom",
"left",
"right",
"start",
"end",
""
].includes(v$1)
},
messageClass: { type: String },
messageActionClass: {
type: String,
default: "vue3-snackbar-message-action"
},
zIndex: {
type: Number,
default: 1e4
},
dense: {
type: Boolean,
default: false
},
shadow: {
type: [Boolean, String],
default: false,
validator: (v$1) => v$1 === true || v$1 === false || [
"xs",
"sm",
"md",
"lg",
"xl",
"2xl"
].includes(v$1)
},
contentWidth: {
type: String,
default: "min(50vw, 350px)"
},
borderWidth: {
type: [String, Number],
default: 8
},
transitionName: {
type: String,
default: "vue3-snackbar-message"
}
};
var require_tiny_emitter = /* @__PURE__ */ __commonJSMin(((exports, module) => {
function E$1() {}
E$1.prototype = {
on: function(name, callback, ctx) {
var e = this.e || (this.e = {});
(e[name] || (e[name] = [])).push({
fn: callback,
ctx
});
return this;
},
once: function(name, callback, ctx) {
var self$1 = this;
function listener() {
self$1.off(name, listener);
callback.apply(ctx, arguments);
}
listener._ = callback;
return this.on(name, listener, ctx);
},
emit: function(name) {
var data = [].slice.call(arguments, 1);
var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
var i = 0;
var len = evtArr.length;
for (; i < len; i++) evtArr[i].fn.apply(evtArr[i].ctx, data);
return this;
},
off: function(name, callback) {
var e = this.e || (this.e = {});
var evts = e[name];
var liveEvents = [];
if (evts && callback) {
for (var i = 0, len = evts.length; i < len; i++) if (evts[i].fn !== callback && evts[i].fn._ !== callback) liveEvents.push(evts[i]);
}
liveEvents.length ? e[name] = liveEvents : delete e[name];
return this;
}
};
module.exports = E$1;
module.exports.TinyEmitter = E$1;
}));
var require_instance = /* @__PURE__ */ __commonJSMin(((exports, module) => {
var E = require_tiny_emitter();
module.exports = new E();
}));
var import_instance = /* @__PURE__ */ __toESM(require_instance());
var eventbus_default = {
$on: (...args) => import_instance.default.on(...args),
$once: (...args) => import_instance.default.once(...args),
$off: (...args) => import_instance.default.off(...args),
$emit: (...args) => import_instance.default.emit(...args)
};
const messages = ref([]);
const SnackbarSymbol = Symbol();
const hashCode = (s) => Math.abs(s.split("").reduce((a, b) => (a << 5) - a + b.charCodeAt(0) | 0, 0));
let messageId = 1;
eventbus_default.$on("add", (ev) => {
ev = { ...ev };
if (!ev.group) ev.group = hashCode(`${ev.type}${ev.title}${ev.text}`).toString(16);
ev.id = messageId;
messageId++;
messages.value.push(ev);
});
function useSnackbar() {
const Snackbar = inject(SnackbarSymbol);
if (!Snackbar) throw new Error("No Snackbar provided!");
return Snackbar;
}
const SnackbarService = { install: (app, config = {}) => {
const { disableGlobals = false } = config;
const SnackbarService$1 = {
add: (message) => {
eventbus_default.$emit("add", message);
},
clear: () => {
eventbus_default.$emit("clear");
}
};
if (disableGlobals !== true) {
app.config.globalProperties.$snackbar = SnackbarService$1;
if (typeof window !== "undefined") window.$snackbar = SnackbarService$1;
}
app.provide(SnackbarSymbol, SnackbarService$1);
} };
function tryOnScopeDispose(fn) {
if (getCurrentScope()) {
onScopeDispose(fn);
return true;
}
return false;
}
const isClient = typeof window !== "undefined" && typeof document !== "undefined";
typeof WorkerGlobalScope !== "undefined" && globalThis instanceof WorkerGlobalScope;
const notNullish = (val) => val != null;
function toArray(value) {
return Array.isArray(value) ? value : [value];
}
function cacheStringFunction(fn) {
const cache = /* @__PURE__ */ Object.create(null);
return (str) => {
const hit = cache[str];
return hit || (cache[str] = fn(str));
};
}
const hyphenateRE = /\B([A-Z])/g;
cacheStringFunction((str) => str.replace(hyphenateRE, "-$1").toLowerCase());
const camelizeRE = /-(\w)/g;
cacheStringFunction((str) => {
return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
});
function getLifeCycleTarget(target) {
return target || getCurrentInstance();
}
function tryOnMounted(fn, sync = true, target) {
const instance = getLifeCycleTarget(target);
if (instance) onMounted(fn, target);
else if (sync) fn();
else nextTick(fn);
}
const defaultWindow = isClient ? window : void 0;
const defaultDocument = isClient ? window.document : void 0;
isClient && window.navigator;
isClient && window.location;
function unrefElement(elRef) {
var _a;
const plain = toValue(elRef);
return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
}
/* @__NO_SIDE_EFFECTS__ */
function useMounted() {
const isMounted = shallowRef(false);
const instance = getCurrentInstance();
if (instance) onMounted(() => {
isMounted.value = true;
}, instance);
return isMounted;
}
/* @__NO_SIDE_EFFECTS__ */
function useSupported(callback) {
const isMounted = /* @__PURE__ */ useMounted();
return computed(() => {
isMounted.value;
return Boolean(callback());
});
}
function useMutationObserver(target, callback, options = {}) {
const { window: window$1 = defaultWindow,...mutationOptions } = options;
let observer;
const isSupported = /* @__PURE__ */ useSupported(() => window$1 && "MutationObserver" in window$1);
const cleanup = () => {
if (observer) {
observer.disconnect();
observer = void 0;
}
};
const targets = computed(() => {
const value = toValue(target);
const items = toArray(value).map(unrefElement).filter(notNullish);
return new Set(items);
});
const stopWatch = watch(targets, (newTargets) => {
cleanup();
if (isSupported.value && newTargets.size) {
observer = new MutationObserver(callback);
newTargets.forEach((el) => observer.observe(el, mutationOptions));
}
}, {
immediate: true,
flush: "post"
});
const takeRecords = () => {
return observer == null ? void 0 : observer.takeRecords();
};
const stop = () => {
stopWatch();
cleanup();
};
tryOnScopeDispose(stop);
return {
isSupported,
stop,
takeRecords
};
}
/* @__NO_SIDE_EFFECTS__ */
function useTextDirection(options = {}) {
const { document: document$1 = defaultDocument, selector = "html", observe = false, initialValue = "ltr" } = options;
function getValue() {
var _a, _b;
return (_b = (_a = document$1 == null ? void 0 : document$1.querySelector(selector)) == null ? void 0 : _a.getAttribute("dir")) != null ? _b : initialValue;
}
const dir = ref(getValue());
tryOnMounted(() => dir.value = getValue());
if (observe && document$1) useMutationObserver(document$1.querySelector(selector), () => dir.value = getValue(), { attributes: true });
return computed({
get() {
return dir.value;
},
set(v$1) {
var _a, _b;
dir.value = v$1;
if (!document$1) return;
if (dir.value) (_a = document$1.querySelector(selector)) == null || _a.setAttribute("dir", dir.value);
else (_b = document$1.querySelector(selector)) == null || _b.removeAttribute("dir");
}
});
}
Number.POSITIVE_INFINITY;
const _sfc_main = {
__name: "Vue3Snackbar",
props: { ...propsModel },
emits: [
"added",
"group-added",
"dismissed",
"removed",
"cleared",
"click:action"
],
setup(__props, { emit: __emit }) {
const textDirection = /* @__PURE__ */ useTextDirection();
const props = __props;
const emit = __emit;
const generatedBaseClasses = computed(() => {
if ((props.left || props.right) && (props.start || props.end)) console.warn("[Vue3 Snackbar] The left/right and start/end position properties should not be used together.");
return {
"is-top": props.top,
"is-bottom": props.top === false && props.bottom,
"is-left": props.left,
"is-right": props.left === false && props.right,
"is-start": props.start,
"is-end": props.start === false && props.end,
"is-middle": props.top === false && props.bottom === false,
"is-centre": [
"left",
"right",
"start",
"end"
].every((pos) => props[pos] === false),
"shadow-md": props.shadow === true,
[`shadow-${props.shadow}`]: typeof props.shadow === "string",
"is-rtl": textDirection.value === "rtl"
};
});
const normaliseUnit = (unit) => {
if (typeof unit === "number" || /[^\d]/.test(unit) === false) return `${unit}px`;
else return unit;
};
const generatedBaseStyles = computed(() => {
return {
"--success-colour": props.success,
"--error-colour": props.error,
"--warning-colour": props.warning,
"--info-colour": props.info,
"--snackbar-zindex": props.zIndex,
"--background-opacity": props.backgroundOpacity,
"--background-color": props.backgroundColor,
"--base-background-color": props.baseBackgroundColor,
"--message-text-color": props.messageTextColor,
"--message-icon-color": props.messageIconColor,
"--snackbar-content-width": props.contentWidth,
"--snackbar-border-width": normaliseUnit(props.borderWidth)
};
});
const borderClass = computed(() => props.border ? `border-${props.border}` : "");
const remove = (ev, wasDismissed = false) => {
if (Object.hasOwn(ev, "onRemoved") && typeof ev.onRemoved === "function") ev.onRemoved(ev, wasDismissed);
if (wasDismissed) emit("dismissed", ev);
else emit("removed", ev);
messages.value = messages.value.filter((message) => {
if (props.groups) return message.group !== ev.group;
else return message.id !== ev.id;
});
};
const formattedMessagesAll = computed(() => {
const raw = [...messages.value];
const rawMap = raw.reduce((acc, curr) => {
if (props.duration && !curr.duration && curr.duration !== 0) curr.duration = +props.duration;
const msgId = props.groups ? curr.group : curr.id;
if (acc.has(msgId)) {
const group = acc.get(msgId);
curr.count = group.count + 1;
curr.id = group.id;
acc.set(msgId, curr);
emit("group-added", curr);
} else {
curr.count = 1;
emit("added", curr);
acc.set(msgId, curr);
}
return acc;
}, /* @__PURE__ */ new Map());
return Array.from(rawMap.values());
});
const formattedMessages = computed(() => {
const page = props.limit ? formattedMessagesAll.value.slice(props.limit * -1) : formattedMessagesAll.value;
if (props.reverse) return page.reverse();
else return page;
});
watch(formattedMessages, (msgs) => {
const pageIds = msgs.map((msg) => msg.id);
const fullIds = formattedMessagesAll.value.map((msg) => msg.id);
const diffIds = fullIds.filter((id) => !pageIds.includes(id));
for (const id of diffIds) {
const message = formattedMessagesAll.value.find((msg) => msg.id === id);
if (message) remove(message, false);
}
}, { immediate: true });
eventbus_default.$on("clear", () => {
emit("cleared");
messages.value = [];
});
onUnmounted(() => {
eventbus_default.$off("add");
eventbus_default.$off("clear");
});
const onClickAction = ($event) => {
emit("click:action", $event);
if (props.dismissOnActionClick) remove($event.message, true);
};
return (_ctx, _cache) => {
return openBlock(), createBlock(Teleport, { to: props.attach }, [createElementVNode("section", {
id: "vue3-snackbar--container",
class: normalizeClass(["vue3-snackbar", [generatedBaseClasses.value]]),
style: normalizeStyle(generatedBaseStyles.value),
"aria-live": "polite"
}, [createVNode(TransitionGroup, {
name: props.transitionName,
tag: "div",
class: "vue3-snackbar--messages"
}, {
default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(formattedMessages.value, (message) => {
return openBlock(), createBlock(Vue3SnackbarMessage_default, {
key: message.id,
message,
"message-class": props.messageClass,
"message-action-class": props.messageActionClass,
dense: props.dense,
"border-class": borderClass.value,
"icon-presets": props.iconPresets,
onDismiss: _cache[0] || (_cache[0] = ($event) => remove($event, true)),
"onClick:action": onClickAction
}, createSlots({ _: 2 }, [renderList(_ctx.$slots, (_, name) => {
return {
name,
fn: withCtx((slotData) => [renderSlot(_ctx.$slots, name, mergeProps({ ref_for: true }, slotData))])
};
})]), 1032, [
"message",
"message-class",
"message-action-class",
"dense",
"border-class",
"icon-presets"
]);
}), 128))]),
_: 3
}, 8, ["name"])], 6)], 8, ["to"]);
};
}
};
var Vue3Snackbar_default = _sfc_main;
export { messages as SnackbarMessages, SnackbarService, Vue3Snackbar_default as Vue3Snackbar, useSnackbar };