@extclp/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, openBlock as r, createBlock as p, unref as o, normalizeClass as l, withCtx as M, createElementVNode as k, normalizeStyle as i, createElementBlock as t, mergeProps as _, createCommentVNode as y, 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 { effectiveTypes as C, assertiveTypes as $ } 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