@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
72 lines (71 loc) • 2.03 kB
JavaScript
import { defineComponent as r, ref as i, onMounted as f, onUnmounted as p, watch as d } from "vue";
import { NeonClosableUtils as c } from "../../../utils/common/closable/NeonClosableUtils.es.js";
import v from "../../user-input/button/NeonButton.vue.es.js";
import { NeonResponsive as b } from "../../../model/common/responsive/NeonResponsive.es.js";
const C = r({
name: "NeonDrawer",
components: {
NeonButton: v
},
props: {
/**
* Whether the modal is currently open.
*/
open: { type: Boolean, required: !0 },
/**
* Whether the user is allowed to dismiss the modal by clicking outside the modal or pressing escape.
*/
dismissible: { type: Boolean, default: !0 },
/**
* Increase the opacity so that the page behind the modal is no longer visible
*/
opaque: { type: Boolean, default: !1 },
/**
* Keep the top nav visible when the modal is open
*/
showTopNav: { type: Boolean, default: !1 },
/**
* Responsive breakpoint below which point the modal becomes fullscreen.
* Supports NeonResponsive.Mobile & NeonResponsive.MobileLarge.
*/
breakpoint: { type: String, default: b.Mobile },
/**
* Remove the offset from the top of the modal.
*/
noOffset: { type: Boolean }
},
emits: [
/**
* Emitted when the modal is closed.
* @type {void}
*/
"close"
],
setup(e, { emit: u }) {
const n = i(null), o = i(null), m = () => {
u("close");
}, t = () => {
e.open && e.dismissible && m();
};
return f(() => {
e.dismissible && (o.value = n.value && new c(n.value, t) || null);
}), p(() => {
var l;
(l = o.value) == null || l.destroy();
}), d(
() => e.open,
(l) => {
var s, a;
l ? (s = o.value) == null || s.open() : (a = o.value) == null || a.close();
},
{ immediate: !0 }
), {
modal: n,
close: t
};
}
});
export {
C as default
};
//# sourceMappingURL=NeonModal.es.js.map