@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
131 lines (130 loc) • 4.46 kB
JavaScript
import { defineComponent as w, ref as c, onMounted as C, onUnmounted as q } from "vue";
import { NeonEventBus as n } from "../../../common/utils/NeonEventBus.es.js";
import { NeonAlertLevel as t } from "../../../common/enums/NeonAlertLevel.es.js";
import { NeonAlertService as i } from "../../../common/utils/NeonAlertService.es.js";
import P from "./container/NeonAlertContainer.vue.es.js";
import _ from "./container/NeonToastContainer.vue.es.js";
import { NeonToastService as s } from "../../../common/utils/NeonToastService.es.js";
import { NeonAlertPlacement as r } from "../../../common/enums/NeonAlertPlacement.es.js";
import { NeonVerticalPosition as f } from "../../../common/enums/NeonVerticalPosition.es.js";
const H = w({
name: "NeonAlert",
components: {
NeonAlertContainer: P,
NeonToastContainer: _
},
props: {
/**
* Whether alert messages are dismissible by clicking on them. This can also be set per alert message.
*/
dismissible: { type: Boolean, default: !0 },
/**
* Duration to display messages before removing them. This can also be set per alert message. Set the duration to 0 to
* disable the duration timer, NOTE: this requires the user to dismiss the alert by clicking on it.
*/
duration: { type: Number, default: 2500 }
},
setup(v) {
const m = c([]), d = c([]), p = c([]), E = c([]), b = c([]), g = c([]), u = c(1), W = (e) => {
switch (e.placement || r.TopRight) {
case r.TopLeft:
m.value = m.value.filter((o) => o.id !== e.id);
break;
case r.TopRight:
d.value = d.value.filter((o) => o.id !== e.id);
break;
case r.BottomLeft:
p.value = p.value.filter((o) => o.id !== e.id);
break;
case r.BottomRight:
E.value = E.value.filter((o) => o.id !== e.id);
break;
}
}, T = (e, o) => {
const h = u.value;
u.value = u.value + 1;
const a = {
dismissible: v.dismissible,
...o,
level: e,
id: h
};
switch (o.placement || r.TopRight) {
case r.TopLeft:
m.value.unshift(a);
break;
case r.TopRight:
d.value.unshift(a);
break;
case r.BottomLeft:
p.value.push(a);
break;
case r.BottomRight:
E.value.push(a);
break;
}
const l = o.duration === void 0 ? v.duration : o.duration;
l > 0 && !o.primaryAction && setTimeout(() => W(a), l);
}, L = (e) => {
switch (e.placement || f.Top) {
case f.Top:
b.value = b.value.filter((o) => o.id !== e.id);
break;
case f.Bottom:
g.value = g.value.filter((o) => o.id !== e.id);
break;
}
}, y = (e, o) => {
const h = u.value;
u.value = u.value + 1;
const a = {
dismissible: v.dismissible,
...o,
level: e,
id: h
};
switch (o.placement || f.Top) {
case f.Top:
b.value.unshift(a);
break;
case f.Bottom:
g.value.push(a);
break;
}
const l = o.duration === void 0 ? v.duration : o.duration;
l > 0 && setTimeout(() => L(a), l);
}, K = (e) => {
T(t.Info, e);
}, k = (e) => {
T(t.Success, e);
}, A = (e) => {
T(t.Warn, e);
}, N = (e) => {
T(t.Error, e);
}, S = (e) => {
y(t.Info, e);
}, I = (e) => {
y(t.Success, e);
}, B = (e) => {
y(t.Warn, e);
}, R = (e) => {
y(t.Error, e);
};
return C(() => {
n.on(i.generateEventKey(t.Info), K), n.on(i.generateEventKey(t.Success), k), n.on(i.generateEventKey(t.Warn), A), n.on(i.generateEventKey(t.Error), N), n.on(s.generateEventKey(t.Info), S), n.on(s.generateEventKey(t.Success), I), n.on(s.generateEventKey(t.Warn), B), n.on(s.generateEventKey(t.Error), R);
}), q(() => {
n.off(i.generateEventKey(t.Info), K), n.off(i.generateEventKey(t.Success), k), n.off(i.generateEventKey(t.Warn), A), n.off(i.generateEventKey(t.Error), N), n.off(s.generateEventKey(t.Info), S), n.off(s.generateEventKey(t.Success), I), n.off(s.generateEventKey(t.Warn), B), n.off(s.generateEventKey(t.Error), R);
}), {
topLeft: m,
topRight: d,
bottomLeft: p,
bottomRight: E,
top: b,
bottom: g
};
}
});
export {
H as default
};
//# sourceMappingURL=NeonAlert.es.js.map