@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
73 lines (72 loc) • 2 kB
JavaScript
import { defineComponent as r, computed as c } from "vue";
import { NeonFunctionalColor as e } from "../../../model/common/color/NeonFunctionalColor.es.js";
import i from "../../presentation/icon/NeonIcon.vue.es.js";
import l from "../../user-input/button/NeonButton.vue.es.js";
import a from "../../layout/inline/NeonInline.vue.es.js";
import s from "../../layout/stack/NeonStack.vue.es.js";
const S = r({
name: "NeonNote",
components: {
NeonButton: l,
NeonIcon: i,
NeonInline: a,
NeonStack: s
},
props: {
/**
* An optional title to be displayed above the note description (aka slot contents).
*/
title: { type: String },
/**
* The color of the note. In the case of the colors info, success, warn and error an icon will also be displayed to
* further enhance user comprehension.
*/
color: { type: String, default: e.LowContrast },
/**
* Whether the note has a close button
*/
closable: { type: Boolean, default: !1 },
/**
* Display the associated icon for info, success, warn and error colors.
*/
icon: { type: Boolean, default: !0 },
/**
* Note close button aria label.
*/
ariaLabelCloseNote: { type: String, default: "Close note" }
},
emits: [
/**
* emitted when the user clicks the close button on the note
* @type {void}
*/
"close-note"
],
setup(o, { emit: t, slots: n }) {
return {
iconName: c(() => {
if (o.icon)
switch (o.color) {
case e.Info:
return "info-circle";
case e.Success:
return "check-circle";
case e.Warn:
return "exclamation-circle";
case e.Error:
return "times-circle";
default:
return;
}
}),
slots: n,
closeNote: () => {
t("close-note");
}
};
}
});
export {
S as default
};
//# sourceMappingURL=NeonNote.es.js.map