@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
260 lines (259 loc) • 8.68 kB
JavaScript
import { defineComponent as I, ref as g, provide as q, watch as j, openBlock as a, createElementBlock as p, Fragment as H, renderSlot as J, createBlock as x, Teleport as Q, createElementVNode as b, normalizeStyle as D, unref as i, normalizeClass as _, createVNode as O, TransitionGroup as U, withCtx as W, renderList as Y, createCommentVNode as y, toDisplayString as C } from "vue";
import { injectNotificationKey as Z } from "../../composables/keys.js";
import { useColors as A } from "../../composables/useColors.js";
import { useCSS as ee } from "../../composables/useCSS.js";
import { useTheme as te } from "../../composables/useTheme.js";
import { closeIcon as oe } from "../../common/icons.js";
import K from "../icon/Icon.vue.js";
import re from "../spacer/Spacer.js";
const se = ["onMouseenter", "onMouseleave"], ae = { class: "flex items-center flex-wrap" }, le = {
key: 0,
class: "font-medium mr-2"
}, ne = ["onClick"], ie = {
...A.props("primary"),
align: {
type: String,
default: "right",
validator: (c) => M.align.includes(c)
},
position: {
type: String,
default: "bottom",
validator: (c) => M.position.includes(c)
},
timeout: {
type: Number,
default: 3500
},
removable: {
type: Boolean,
default: !0
},
pauseOnHover: {
type: Boolean,
default: !0
},
injectKey: {
type: [Symbol, String],
default: Z
}
}, M = {
align: ["left", "right"],
position: ["bottom", "top"]
}, ce = {
name: "XNotifications",
validators: M
}, he = /* @__PURE__ */ I({
...ce,
props: ie,
setup(c, { expose: E }) {
const r = c, u = g(r.align), s = g(r.position), d = g([]), z = g(null), L = ee("notification"), S = A();
q(r.injectKey, {
log: w,
info: N,
warn: v,
error: B,
warning: v,
success: T
}), j(() => r.align, (e) => {
u.value = e;
}), j(() => r.position, (e) => {
s.value = e;
});
function w(e) {
const o = typeof e == "string", t = {
message: o ? e : void 0
};
m(o ? t : {
...t,
...e
});
}
function N(e) {
const o = typeof e == "string", t = {
icon: '<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />',
iconColor: "sky",
message: o ? e : void 0
};
m(o ? t : {
...t,
...e
});
}
function T(e) {
const o = typeof e == "string", t = {
icon: '<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />',
iconColor: "success",
message: o ? e : void 0
};
m(o ? t : {
...t,
...e
});
}
function v(e) {
const o = typeof e == "string", t = {
icon: '<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />',
iconColor: "warning",
message: o ? e : void 0
};
m(o ? t : {
...t,
...e
});
}
function B(e) {
const o = typeof e == "string", t = {
icon: '<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />',
iconColor: "error",
message: o ? e : void 0
};
m(o ? t : {
...t,
...e
});
}
function m(e) {
var $;
const t = {
...{
id: Date.now(),
iconColor: r.color,
timeout: r.timeout,
align: u.value,
position: s.value,
removable: r.removable
},
...e
};
u.value = t.align, s.value = t.position;
const l = S.getPalette(t.iconColor), f = S.getPalette((($ = t.action) == null ? void 0 : $.color) || "primary"), V = L.variables({
icon: l[400],
action: f[400],
hover: {
action: f[500]
},
dark: {
icon: l[500],
action: f[500],
hover: {
action: f[600]
}
}
});
if (t.style = Object.keys(V).map((n) => `${n}: ${V[n]}`).join(";"), t.timeout) {
const n = P(t, t.timeout);
t.timer = n, t.timerStart = Date.now();
}
d.value.push(t), setTimeout(() => {
var n;
(n = z.value) == null || n.scrollTo({ top: 0, behavior: "smooth" });
}, 0);
}
function h(e) {
d.value = d.value.filter((o) => o.id !== e.id);
}
function P(e, o) {
return setTimeout(() => {
h(e);
}, o);
}
function R(e) {
r.pauseOnHover && e.timer && (clearTimeout(e.timer), e.timer = void 0);
}
function X(e) {
if (r.pauseOnHover && e.timeout && e.timerStart) {
const o = Math.max(e.timeout - (Date.now() - e.timerStart), 1e3);
e.timer = P(e, o);
}
}
const { styles: F, classes: k, className: G } = te("Notifications", {}, r);
return E({ log: w, info: N, success: T, warn: v, warning: v, error: B }), (e, o) => (a(), p(H, null, [
J(e.$slots, "default"),
(a(), x(Q, { to: "body" }, [
b("div", {
ref_key: "listRef",
ref: z,
style: D(i(F)),
class: _([
i(G),
i(k).wrapper,
{
// align
"left-0": u.value === "left",
"right-0": u.value === "right",
// position
"top-0": s.value === "top",
"bottom-0": s.value === "bottom"
}
])
}, [
O(U, {
tag: "ul",
class: _([
i(k).list,
{ "flex-col-reverse": s.value }
]),
"enter-active-class": "transition ease-out duration-200",
"leave-active-class": "transition ease-out duration-100",
"enter-from-class": "transform translate-y-2 opacity-0",
"enter-to-class": "transform translate-y-0 opacity-100",
"leave-from-class": "transform translate-y-0 opacity-100",
"leave-to-class": "transform translate-y-2 opacity-0",
"move-class": "ease-in-out duration-200"
}, {
default: W(() => [
(a(!0), p(H, null, Y(d.value, (t) => (a(), p("li", {
key: t.id,
class: _([
i(k).item,
{
"mb-2": s.value === "bottom",
"mt-2": s.value === "top"
}
]),
style: D(t.style),
onMouseenter: (l) => R(t),
onMouseleave: (l) => X(t)
}, [
t.icon ? (a(), x(K, {
key: 0,
filled: "",
icon: t.icon,
class: "mr-4 text-[color:var(--x-notification-icon)] dark:text-[color:var(--x-notification-dark-icon)]",
viewBox: "0 0 20 20"
}, null, 8, ["icon"])) : y("", !0),
b("div", ae, [
t.title ? (a(), p("span", le, C(t.title), 1)) : y("", !0),
b("span", null, C(t.message), 1)
]),
O(i(re)),
t.action ? (a(), p("button", {
key: 1,
type: "button",
class: "ml-3 font-medium cursor-pointer text-[color:var(--x-notification-action)] hover:text-[color:var(--x-notification-action-hover)] dark:text-[color:var(--x-notification-dark-action)] dark:hover:text-[color:var(--x-notification-dark-action-hover)]",
onClick: () => {
var l;
(l = t.action) == null || l.onClick(), h(t);
}
}, C(t.action.label), 9, ne)) : y("", !0),
t.removable ? (a(), x(K, {
key: 2,
icon: i(oe),
class: "text-secondary-400 hover:text-secondary-500 ml-3 cursor-pointer",
onClick: () => {
h(t);
}
}, null, 8, ["icon", "onClick"])) : y("", !0)
], 46, se))), 128))
]),
_: 1
}, 8, ["class"])
], 6)
]))
], 64));
}
});
export {
he as default
};