vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
145 lines (144 loc) • 5.42 kB
JavaScript
import { defineComponent as T, computed as x, ref as b, reactive as L, createBlock as p, openBlock as r, unref as o, normalizeClass as l, withCtx as M, createElementVNode as k, normalizeStyle as i, createElementBlock as t, createCommentVNode as y, mergeProps as _, Fragment as d, toDisplayString as g, createVNode as B } from "vue";
import "../icon/index.mjs";
import "../renderer/index.mjs";
import "../popup/index.mjs";
import { useNameHelper as I, useIcons as V } from "@vexip-ui/config";
import { assertiveTypes as $, effectiveTypes as C } from "./symbol.mjs";
import z from "../popup/popup.vue2.mjs";
import f from "../icon/icon.mjs";
import E from "../renderer/renderer.mjs";
const S = ["aria-live"], D = ["innerHTML"], F = ["innerHTML"], P = ["onClick"], Y = /* @__PURE__ */ T({
name: "Notice",
__name: "notice",
setup(R, { expose: m }) {
const n = I("notice"), a = V(), h = x(() => ({
primary: a.value.info,
info: a.value.info,
success: a.value.success,
warning: a.value.warning,
error: a.value.error
})), u = b("top-right"), c = b();
async function H(s) {
c.value && await c.value.add(s);
}
async function v(s) {
return !!c.value && await c.value.remove(s);
}
function w() {
c.value && c.value.clear();
}
function N(s) {
u.value = s.placement || u.value;
}
return m(
L({
popup: c,
add: H,
remove: v,
clear: w,
config: N
})
), (s, j) => (r(), p(o(z), {
ref_key: "popup",
ref: c,
class: l(o(n).b()),
"transition-name": o(n).ns(`popup-${u.value.split("-")[1]}`),
placement: u.value
}, {
item: M(({ item: e }) => [
k("div", {
class: l([
{
[o(n).be("item")]: !0,
[o(n).bs("vars")]: !0,
[o(n).bem("item", "title-only")]: !e.content && typeof e.renderer != "function",
[o(n).bem("item", "has-icon")]: e.icon,
[o(n).bem("item", "content-only")]: !e.title,
[o(n).bem("item", e.type)]: e.type && o(C).includes(e.type),
[o(n).bem("item", "background")]: e.background,
[o(n).bem("item", "color")]: e.background && e.color,
[o(n).bem("item", "color-only")]: !e.background && e.color,
[o(n).bem("item", "marker")]: e.marker
},
e.className
]),
role: "alert",
style: i([
{
color: typeof e.color == "string" ? e.color : void 0,
backgroundColor: typeof e.background == "string" ? e.background : void 0
},
e.style || {}
]),
"aria-atomic": "true",
"aria-live": e.type && o($).includes(e.type) ? "assertive" : "polite"
}, [
e.icon || e.type && o(C).includes(e.type) ? (r(), t("div", {
key: 0,
class: l(o(n).be("icon")),
style: i({ color: e.iconColor })
}, [
e.icon ? (r(), p(o(f), {
key: 0,
icon: e.icon,
scale: !e.content && typeof e.renderer != "function" ? 1 : 2,
style: i([{ color: e.iconColor }, e.icon.style])
}, null, 8, ["icon", "scale", "style"])) : (r(), p(o(f), _({ key: 1 }, h.value[e.type], {
scale: !e.content && typeof e.renderer != "function" ? 1 : 2,
style: { color: e.iconColor }
}), null, 16, ["scale", "style"]))
], 6)) : y("", !0),
k("div", {
class: l(o(n).be("wrapper"))
}, [
typeof e.renderer == "function" ? (r(), p(o(E), {
key: 0,
renderer: e.renderer,
data: e
}, null, 8, ["renderer", "data"])) : (r(), t(d, { key: 1 }, [
e.title ? (r(), t(d, { key: 0 }, [
e.parseHtml ? (r(), t("div", {
key: 0,
class: l(o(n).be("title")),
style: i({
color: typeof e.titleColor == "string" ? e.titleColor : void 0
}),
innerHTML: e.title
}, null, 14, D)) : (r(), t("div", {
key: 1,
class: l(o(n).be("title")),
style: i({
color: typeof e.titleColor == "string" ? e.titleColor : void 0
})
}, g(e.title || ""), 7))
], 64)) : y("", !0),
e.content ? (r(), t(d, { key: 1 }, [
e.parseHtml ? (r(), t("div", {
key: 0,
class: l(o(n).be("content")),
innerHTML: e.content
}, null, 10, F)) : (r(), t("div", {
key: 1,
class: l(o(n).be("content"))
}, g(e.content || ""), 3))
], 64)) : y("", !0)
], 64))
], 2),
e.closable ? (r(), t("button", {
key: 1,
type: "button",
class: l(o(n).be("close")),
onClick: (q) => v(e.key)
}, [
B(o(f), _(o(a).close, { label: "close" }), null, 16)
], 10, P)) : y("", !0)
], 14, S)
]),
_: 1
}, 8, ["class", "transition-name", "placement"]));
}
});
export {
Y as default
};
//# sourceMappingURL=notice.vue2.mjs.map