@vuesimple/vs-alert
Version:
A simple vue alert. Perfect for all your alert scenarios.
228 lines (227 loc) • 8.91 kB
JavaScript
(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-alert{--vs-alert-success-bc: #aecfc2;--vs-alert-success-bg: #edf8f4;--vs-alert-success-color: #186146;--vs-alert-success-icon: #038153;--vs-alert-warning-bc: #fed6a8;--vs-alert-warning-bg: #fff7ed;--vs-alert-warning-color: #ad5918;--vs-alert-warning-icon: #ad5918;--vs-alert-error-bc: #f5b5ba;--vs-alert-error-bg: #fff0f1;--vs-alert-error-color: #8c232c;--vs-alert-error-icon: #cc3340;--vs-alert-info-bc: #adcce4;--vs-alert-info-bg: #edf7ff;--vs-alert-info-color: #1f73b7;--vs-alert-info-icon: #337fbd;--vs-alert-secondary-bc: #d8dcde;--vs-alert-secondary-bg: #f8f9f9;--vs-alert-secondary-color: #68737d;--vs-alert-secondary-icon: #68737d;position:relative;border-radius:4px;padding:20px 20px 20px 40px;line-height:1.42857;font-size:14px}.vs-alert-icon__wrapper svg{position:absolute;left:15px;margin-top:1px}.vs-alert__heading{font-weight:600;filter:brightness(85%)}.vs-alert-button{display:block;position:absolute;top:15px;right:10px;transition:background-color .1s ease-in-out 0s,color .25s ease-in-out 0s;border:none;background-color:transparent;cursor:pointer;padding:0;width:28px;height:28px;overflow:hidden;color:#333;font-size:0px;user-select:none}.vs-alert-button.success{color:var(--vs-alert-success-color)}.vs-alert-button.warning{color:var(--vs-alert-warning-color)}.vs-alert-button.error{color:var(--vs-alert-error-color)}.vs-alert-button.info{color:var(--vs-alert-info-color)}.vs-alert-button.secondary{color:var(--vs-alert-secondary-color)}.vs-alert-success{border:1px solid var(--vs-alert-success-bc);background-color:var(--vs-alert-success-bg);color:var(--vs-alert-success-color)}.vs-alert-warning{border:1px solid var(--vs-alert-warning-bc);background-color:var(--vs-alert-warning-bg);color:var(--vs-alert-warning-color)}.vs-alert-error{border:1px solid var(--vs-alert-error-bc);background-color:var(--vs-alert-error-bg);color:var(--vs-alert-error-color)}.vs-alert-info{border:1px solid var(--vs-alert-info-bc);background-color:var(--vs-alert-info-bg);color:var(--vs-alert-info-color)}.vs-alert-secondary{border:1px solid var(--vs-alert-secondary-bc);background-color:var(--vs-alert-secondary-bg);color:var(--vs-alert-secondary-color)}.vs-alert.vs-alert--small:not(.vs-alert--is-close){padding:12px 20px 12px 40px}.vs-alert.vs-alert--is-close:not(.vs-alert--small){padding:20px 40px}.vs-alert.vs-alert--is-close.vs-alert--small{padding:12px 40px}.vs-alert.vs-alert--is-close.vs-alert--small .vs-alert-button{top:8px}.vs-alert--no-bg{background-color:transparent;border-color:transparent;padding:0 22px;font-size:13px}.vs-alert--no-bg .vs-alert-icon__wrapper svg{left:0;margin-top:0}.vs-alert--no-bg.vs-alert-warning{color:var(--vs-alert-warning-icon)}.vs-alert--no-bg.vs-alert-error{color:var(--vs-alert-error-icon)}.vs-alert--toast{background-color:#fff;border:solid 1px #d8dcde;color:#2f3941;box-shadow:#17494d26 0 20px 28px;padding:15px 40px}.vs-alert--toast .vs-alert__heading{filter:brightness(100%)}.vs-alert--toast.vs-alert-success .vs-alert__heading{color:var(--vs-alert-success-icon)}.vs-alert--toast.vs-alert-warning .vs-alert__heading{color:var(--vs-alert-warning-icon)}.vs-alert--toast.vs-alert-error .vs-alert__heading{color:var(--vs-alert-error-icon)}.vs-alert--toast.vs-alert-info .vs-alert__heading{color:var(--vs-alert-info-icon)}.vs-alert--toast.vs-alert-secondary .vs-alert__heading{color:var(--vs-alert-secondary-icon)}.vs-alert--toast .vs-alert-button{color:#68737d;top:10px}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { openBlock as o, createElementBlock as l, normalizeClass as d, createElementVNode as e, renderSlot as a, createCommentVNode as n, Fragment as v, createTextVNode as _, toDisplayString as u } from "vue";
const w = (s, r) => {
const t = s.__vccOpts || s;
for (const [i, c] of r)
t[i] = c;
return t;
}, g = {
name: "VsAlert",
props: {
variant: {
type: String,
required: !0,
validator: (s) => ["success", "error", "info", "warning", "secondary"].includes(s.toLowerCase())
},
showClose: {
type: Boolean,
default: !1
},
title: {
type: String
},
noBg: {
type: Boolean,
default: !1
},
small: {
type: Boolean,
default: !1
},
toast: {
type: Boolean,
default: !1
}
},
computed: {
classList() {
return [
`vs-alert-${this.variant}`,
{ "vs-alert--no-bg": this.noBg },
{ "vs-alert--small": this.small },
{ "vs-alert--toast": this.toast },
{ "vs-alert--is-close": this.showClose }
];
}
}
}, f = { class: "vs-alert-icon__wrapper" }, p = {
key: 0,
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 16 16",
role: "presentation",
focussable: "false"
}, y = /* @__PURE__ */ e("g", {
fill: "none",
stroke: "var(--vs-alert-success-icon)"
}, [
/* @__PURE__ */ e("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
d: "M4 9l2.5 2.5 5-5"
}),
/* @__PURE__ */ e("circle", {
cx: "7.5",
cy: "8.5",
r: "7"
})
], -1), k = [
y
], m = {
key: 1,
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 16 16",
role: "presentation",
focussable: "false"
}, x = /* @__PURE__ */ e("path", {
fill: "none",
stroke: "var(--vs-alert-warning-icon)",
"stroke-linecap": "round",
d: "M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5"
}, null, -1), B = /* @__PURE__ */ e("circle", {
cx: "7.5",
cy: "12",
r: "1",
fill: "#ad5918"
}, null, -1), b = [
x,
B
], C = {
key: 2,
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 16 16",
role: "presentation",
focussable: "false"
}, V = /* @__PURE__ */ e("g", {
fill: "none",
stroke: "var(--vs-alert-error-icon)"
}, [
/* @__PURE__ */ e("circle", {
cx: "7.5",
cy: "8.5",
r: "7"
}),
/* @__PURE__ */ e("path", {
"stroke-linecap": "round",
d: "M7.5 4.5V9"
})
], -1), M = /* @__PURE__ */ e("circle", {
cx: "7.5",
cy: "12",
r: "1",
fill: "var(--vs-alert-error-icon)"
}, null, -1), L = [
V,
M
], A = {
key: 3,
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 16 16",
role: "presentation",
focussable: "false"
}, S = /* @__PURE__ */ e("g", { stroke: "var(--vs-alert-info-icon)" }, [
/* @__PURE__ */ e("circle", {
cx: "7.5",
cy: "8.5",
r: "7",
fill: "none"
}),
/* @__PURE__ */ e("path", {
"stroke-linecap": "round",
d: "M7.5 12.5V8"
})
], -1), N = /* @__PURE__ */ e("circle", {
cx: "7.5",
cy: "5",
r: "1",
fill: "var(--vs-alert-info-icon)"
}, null, -1), z = [
S,
N
], E = {
key: 4,
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 16 16",
role: "presentation",
focussable: "false"
}, j = /* @__PURE__ */ e("g", { stroke: "var(--vs-alert-secondary-icon)" }, [
/* @__PURE__ */ e("circle", {
cx: "7.5",
cy: "8.5",
r: "7",
fill: "none"
}),
/* @__PURE__ */ e("path", {
"stroke-linecap": "round",
d: "M7.5 12.5V8"
})
], -1), q = /* @__PURE__ */ e("circle", {
cx: "7.5",
cy: "5",
r: "1",
fill: "var(--vs-alert-secondary-icon)"
}, null, -1), D = [
j,
q
], F = { class: "vs-alert__heading" }, H = /* @__PURE__ */ e("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "12",
height: "12",
viewBox: "0 0 12 12",
role: "presentation",
focusable: "false"
}, [
/* @__PURE__ */ e("path", {
stroke: "currentColor",
"stroke-linecap": "round",
d: "M3 9l6-6m0 6L3 3"
})
], -1), O = [
H
];
function T(s, r, t, i, c, h) {
return o(), l("div", {
class: d(["vs-alert", h.classList])
}, [
e("span", f, [
a(s.$slots, "icon", {}, () => [
t.variant === "success" ? (o(), l("svg", p, k)) : n("", !0),
t.variant === "warning" ? (o(), l("svg", m, b)) : n("", !0),
t.variant === "error" ? (o(), l("svg", C, L)) : n("", !0),
t.variant === "info" ? (o(), l("svg", A, z)) : n("", !0),
t.variant === "secondary" ? (o(), l("svg", E, D)) : n("", !0)
])
]),
e("div", F, [
a(s.$slots, "title", {}, () => [
t.title ? (o(), l(v, { key: 0 }, [
_(u(t.title), 1)
], 64)) : n("", !0)
])
]),
a(s.$slots, "default"),
t.showClose ? (o(), l("button", {
key: 0,
class: d(["vs-alert-button", t.variant]),
onClick: r[0] || (r[0] = (I) => s.$emit("close", !0)),
"aria-label": "Close"
}, O, 2)) : n("", !0)
], 2);
}
const G = /* @__PURE__ */ w(g, [["render", T]]), K = {
install(s) {
s.component("VsAlert", G);
}
};
export {
G as default,
K as plugin
};