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