@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
102 lines (101 loc) • 4.2 kB
JavaScript
import A from "./NeonAlertContainer.es.js";
import { resolveComponent as p, openBlock as o, createElementBlock as i, normalizeClass as b, createVNode as u, TransitionGroup as $, withCtx as d, Fragment as f, renderList as h, createElementVNode as s, withKeys as a, withModifiers as _, toDisplayString as c, createCommentVNode as l, createBlock as k } from "vue";
import C from "../../../../_virtual/_plugin-vue_export-helper.es.js";
const w = ["aria-describedby", "aria-labelledby", "role", "onClick"], M = ["role", "tabindex", "onKeydown"], m = ["id"], K = ["id"], N = {
key: 0,
class: "neon-alert__actions"
}, V = { class: "neon-alert__action-label" }, B = { class: "neon-alert__action-label" };
function T(e, E, z, D, F, G) {
const v = p("neon-icon"), y = p("neon-link");
return o(), i("div", {
class: b([`neon-alert--${e.placement}`, "neon-alert"])
}, [
u($, { name: "neon-alert-transition" }, {
default: d(() => [
(o(!0), i(f, null, h(e.modelValue, (n, r) => (o(), i("div", {
key: n.id,
"aria-describedby": n.message ? `alertMessage${r}` : void 0,
"aria-labelledby": n.title ? `alertTitle${r}` : void 0,
class: b([[
`neon-alert__message--${n.level}`,
{
"neon-alert__message--dismissible": n.dismissible,
"neon-alert__message--with-actions": n.primaryAction
}
], "neon-alert__message"]),
role: n.primaryAction ? "dialog" : n.duration && n.duration > 0 ? "alert" : "alertdialog",
onClick: (t) => !n.primaryAction && n.dismissible && e.closeMessage(n.id)
}, [
u(v, {
color: n.level,
name: e.icon(n.level)
}, null, 8, ["color", "name"]),
s("div", {
role: n.primaryAction ? void 0 : "button",
tabindex: n.primaryAction ? -1 : 0,
class: "neon-alert__content",
onKeydown: [
a(_((t) => !n.primaryAction && n.dismissible && e.closeMessage(n.id), ["prevent"]), ["space"]),
a((t) => !n.primaryAction && n.dismissible && e.closeMessage(n.id), ["enter"])
]
}, [
n.title ? (o(), i("div", {
key: 0,
id: `alertTitle${r}`,
class: "neon-alert__title"
}, c(n.title), 9, m)) : l("", !0),
n.message ? (o(), i("div", {
key: 1,
id: `alertMessage${r}`,
class: "neon-alert__body"
}, c(n.message), 9, K)) : l("", !0)
], 40, M),
n.primaryAction ? (o(), i("div", N, [
n.primaryAction ? (o(), k(y, {
key: 0,
class: "neon-alert__action",
"outline-style": "none",
role: "button",
tabindex: "0",
onClick: (t) => {
n.primaryAction.callback(), e.closeMessage(n.id);
},
onKeydown: a(_((t) => {
n.primaryAction.callback(), e.closeMessage(n.id);
}, ["prevent"]), ["space"])
}, {
default: d(() => [
s("span", V, c(n.primaryAction.label), 1)
]),
_: 2
}, 1032, ["onClick", "onKeydown"])) : l("", !0),
n.secondaryAction ? (o(), k(y, {
key: 1,
class: "neon-alert__action",
"outline-style": "none",
role: "button",
tabindex: "0",
onClick: (t) => {
n.secondaryAction.callback(), e.closeMessage(n.id);
},
onKeydown: a(_((t) => {
n.secondaryAction.callback(), e.closeMessage(n.id);
}, ["prevent"]), ["space"])
}, {
default: d(() => [
s("span", B, c(n.secondaryAction.label), 1)
]),
_: 2
}, 1032, ["onClick", "onKeydown"])) : l("", !0)
])) : l("", !0)
], 10, w))), 128))
]),
_: 1
})
], 2);
}
const q = /* @__PURE__ */ C(A, [["render", T]]);
export {
q as default
};
//# sourceMappingURL=NeonAlertContainer.vue.es.js.map