@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
199 lines (198 loc) • 6.62 kB
JavaScript
import { defineComponent as O, useSlots as X, computed as a, ref as c, watch as G, onMounted as J, openBlock as d, createBlock as K, unref as o, withCtx as b, createElementBlock as m, normalizeClass as i, normalizeStyle as B, createElementVNode as N, renderSlot as f, createVNode as u, createTextVNode as Q, toDisplayString as U, createCommentVNode as p, mergeProps as R } from "vue";
import "../collapse-transition/index.mjs";
import "../icon/index.mjs";
import "../renderer/index.mjs";
import { useProps as Y, useNameHelper as Z, useIcons as ee, emitEvent as T } from "@vexip-ui/config";
import { isClient as oe, parseColorToRgba as V, adjustAlpha as F, mixColor as w, getRangeWidth as le } from "@vexip-ui/utils";
import { alertProps as te } from "./props.mjs";
import { alertTypes as re } from "./symbol.mjs";
import ne from "../collapse/collapse-transition.mjs";
import v from "../renderer/renderer.mjs";
import I from "../icon/icon.mjs";
const he = /* @__PURE__ */ O({
name: "Alert",
__name: "alert",
props: te,
setup(P) {
const e = Y("alert", P, {
type: {
default: "primary",
validator: (t) => re.includes(t)
},
title: "",
colorfulText: !1,
icon: {
isFunc: !0,
default: !1
},
closable: !1,
iconColor: "",
noBorder: !1,
banner: !1,
manual: !1,
scroll: !1,
scrollSpeed: 1,
color: null,
slots: () => ({})
}), E = X(), l = Z("alert"), n = ee(), q = a(() => ({
default: n.value.alert,
primary: n.value.info,
info: n.value.info,
success: n.value.success,
warning: n.value.warning,
error: n.value.error
})), _ = c(!1), $ = c(!1), y = c(0), h = c(0), x = c(0), g = c(), C = c(), k = a(() => !!(e.title || E.title)), A = a(() => !!(e.icon || E.icon)), D = a(() => ({
[l.b()]: !0,
[l.bs("vars")]: !0,
[l.bm("inherit")]: e.inherit,
[l.bm(e.type)]: e.type,
[l.bm("colorful-text")]: e.colorfulText,
[l.bm("has-title")]: k.value,
[l.bm("has-icon")]: A.value,
[l.bm("closable")]: e.closable,
[l.bm("no-border")]: !e.banner && e.noBorder,
[l.bm("banner")]: e.banner
})), W = a(() => {
if (!e.color) return;
const t = oe ? getComputedStyle(document.documentElement) : null, r = V((t == null ? void 0 : t.getPropertyValue(l.nv("color-black"))) || "#000"), s = V(e.color);
return l.cvm({
"bg-color": F(s, 0.2).toString(),
"b-color": F(s, 0.5).toString(),
"icon-color": w(r, s, 0.2).toString(),
...e.colorfulText ? {
"text-color": w(r, s, 0.2).toString(),
"title-color": w(r, s, 0.2).toString()
} : {}
});
}), z = a(() => typeof e.icon == "boolean" ? q.value[e.type] ?? {} : { icon: e.icon }), H = a(() => ({
width: `${x.value}px`,
transitionDuration: `${y.value}ms`,
transform: `translateX(${h.value}px)`
}));
G(
() => e.scroll,
(t) => {
t && S();
}
), J(() => {
e.scroll && S();
});
function L() {
e.manual || (_.value = !0), T(e.onClose);
}
function M() {
T(e.onHide), $.value = !0;
}
function S() {
if (g.value && C.value) {
const t = g.value.getBoundingClientRect(), r = le(C.value), s = (t.width + r) * 12 / (Math.max(e.scrollSpeed, 0) || 1);
y.value = 0, h.value = t.width, x.value = r, requestAnimationFrame(() => {
requestAnimationFrame(() => {
y.value = s, h.value = -r;
});
});
}
}
function j() {
T(e.onScrollEnd), requestAnimationFrame(S);
}
return (t, r) => $.value ? p("", !0) : (d(), K(o(ne), {
key: 0,
"fade-effect": "",
onAfterLeave: M
}, {
default: b(() => [
_.value ? p("", !0) : (d(), m("div", {
key: 0,
class: i(D.value),
role: "alert",
style: B(W.value)
}, [
N("div", {
class: i(o(l).be("wrapper"))
}, [
k.value ? (d(), m("div", {
key: 0,
class: i(o(l).be("title"))
}, [
f(t.$slots, "title", {}, () => [
u(o(v), {
renderer: o(e).slots.title
}, {
default: b(() => [
Q(U(t.title), 1)
]),
_: 1
}, 8, ["renderer"])
])
], 2)) : p("", !0),
N("div", {
ref_key: "content",
ref: g,
class: i([o(l).be("content"), o(e).scroll && o(l).bem("content", "scroll")])
}, [
o(e).scroll ? (d(), m("span", {
key: 0,
ref_key: "scrollEl",
ref: C,
class: i(o(l).be("scroll")),
style: B(H.value),
onTransitionend: j
}, [
f(t.$slots, "default", {}, () => [
u(o(v), {
renderer: o(e).slots.default
}, null, 8, ["renderer"])
])
], 38)) : f(t.$slots, "default", { key: 1 }, () => [
u(o(v), {
renderer: o(e).slots.default
}, null, 8, ["renderer"])
])
], 2)
], 2),
o(e).closable ? (d(), m("button", {
key: 0,
type: "button",
class: i(o(l).be("close")),
onClick: L
}, [
f(t.$slots, "close", {}, () => [
u(o(v), {
renderer: o(e).slots.close
}, {
default: b(() => [
u(o(I), R(o(n).close, { label: "close" }), null, 16)
]),
_: 1
}, 8, ["renderer"])
])
], 2)) : p("", !0),
A.value ? (d(), m("div", {
key: 1,
class: i(o(l).be("icon"))
}, [
f(t.$slots, "icon", {}, () => [
u(o(v), {
renderer: o(e).slots.icon
}, {
default: b(() => [
u(o(I), R(z.value, {
scale: k.value ? 2 : 1,
style: { color: o(e).iconColor }
}), null, 16, ["scale", "style"])
]),
_: 1
}, 8, ["renderer"])
])
], 2)) : p("", !0)
], 6))
]),
_: 3
}));
}
});
export {
he as default
};
//# sourceMappingURL=alert.vue2.mjs.map