@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, createBlock as K, createCommentVNode as m, openBlock as d, unref as o, withCtx as b, createElementBlock as f, normalizeStyle as B, normalizeClass as i, createElementVNode as N, renderSlot as p, createVNode as u, createTextVNode as Q, toDisplayString as U, 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, mixColor as w, adjustAlpha as F, 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 ? m("", !0) : (d(), K(o(ne), {
key: 0,
"fade-effect": "",
onAfterLeave: M
}, {
default: b(() => [
_.value ? m("", !0) : (d(), f("div", {
key: 0,
class: i(D.value),
role: "alert",
style: B(W.value)
}, [
N("div", {
class: i(o(l).be("wrapper"))
}, [
k.value ? (d(), f("div", {
key: 0,
class: i(o(l).be("title"))
}, [
p(t.$slots, "title", {}, () => [
u(o(v), {
renderer: o(e).slots.title
}, {
default: b(() => [
Q(U(t.title), 1)
]),
_: 1
}, 8, ["renderer"])
])
], 2)) : m("", !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(), f("span", {
key: 0,
ref_key: "scrollEl",
ref: C,
class: i(o(l).be("scroll")),
style: B(H.value),
onTransitionend: j
}, [
p(t.$slots, "default", {}, () => [
u(o(v), {
renderer: o(e).slots.default
}, null, 8, ["renderer"])
])
], 38)) : p(t.$slots, "default", { key: 1 }, () => [
u(o(v), {
renderer: o(e).slots.default
}, null, 8, ["renderer"])
])
], 2)
], 2),
o(e).closable ? (d(), f("button", {
key: 0,
type: "button",
class: i(o(l).be("close")),
onClick: L
}, [
p(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)) : m("", !0),
A.value ? (d(), f("div", {
key: 1,
class: i(o(l).be("icon"))
}, [
p(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)) : m("", !0)
], 6))
]),
_: 3
}));
}
});
export {
he as default
};
//# sourceMappingURL=alert.vue2.mjs.map