@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
86 lines (85 loc) • 2.31 kB
JavaScript
import { defineComponent as l, ref as i, watch as c } from "vue";
import { NeonFunctionalColor as f } from "../../../common/enums/NeonFunctionalColor.es.js";
import m from "../../user-input/button/NeonButton.vue.es.js";
import p from "../../layout/card/NeonCard.vue.es.js";
import u from "../../layout/card/body/NeonCardBody.vue.es.js";
import s from "../../layout/modal/NeonModal.vue.es.js";
const q = l({
name: "NeonDialog",
components: {
NeonButton: m,
NeonCard: p,
NeonCardBody: u,
NeonModal: s
},
props: {
/**
* The color of the button for the confirm (positive) action.
*/
color: { type: String, default: f.Primary },
/**
* Alternate confirm button color for creating a gradient button. NOTE: can also be the same color as 'color'.
*/
alternateColor: { type: String, default: null },
/**
* The label of the button for the cancel (negative) action.
*/
cancelLabel: { type: String, default: "Cancel" },
/**
* The label of the button for the confirm (positive) action.
*/
confirmLabel: { type: String, default: "Confirm" },
/**
* The dialog title
*/
title: { type: String, required: !0 },
/**
* The dialog question. Can be html (rendered using v-html).
*/
question: { type: String, required: !0 },
/**
* Whether the dialog is open.
*/
open: { type: Boolean, default: !1 },
/**
* Increase the opacity so that the page behind the modal is no longer visible
*/
opaque: { type: Boolean, default: !1 }
},
emits: [
/**
* emitted when the user clicks the cancel (negative) action button.
* @type {void}
*/
"cancel",
/**
* emitted when the user clicks the confirm (positive) action button.
* @type {void}
*/
"confirm"
],
setup(t, { emit: n }) {
const e = i(null), r = () => {
n("cancel");
}, a = () => {
n("confirm");
};
return c(
() => t.open,
() => {
if (e.value) {
const o = e.value.querySelector(".neon-dialog__confirm-button");
o == null || o.focus();
}
}
), {
actions: e,
cancel: r,
confirm: a
};
}
});
export {
q as default
};
//# sourceMappingURL=NeonDialog.es.js.map