maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
116 lines (115 loc) • 5.03 kB
JavaScript
import { defineComponent, createPropsRestProxy, defineAsyncComponent, useAttrs, ref, computed, useSlots, watch, nextTick, createBlock, openBlock, mergeProps, withCtx, createElementVNode, renderSlot, createElementBlock, createCommentVNode, normalizeClass, createTextVNode, toDisplayString, unref } from "vue";
import { MazXMark } from "@maz-ui/icons";
import MazBackdrop from "./MazBackdrop.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazDialog.Cm3xd1Xp.css';const _hoisted_1 = {
key: 0,
id: "dialogTitle",
class: "m-dialog-title"
}, _hoisted_2 = {
key: 0,
class: "m-dialog-footer"
}, _sfc_main = /* @__PURE__ */ defineComponent({
name: "MazDialog",
inheritAttrs: !1,
__name: "MazDialog",
props: {
modelValue: { type: Boolean },
title: {},
hideCloseButton: { type: Boolean },
maxWidth: { default: "100%" },
minWidth: { default: "32rem" },
scrollable: { type: Boolean },
persistent: { type: Boolean },
teleportSelector: {},
beforeClose: { type: Function },
closeOnEscape: { type: Boolean, default: !0 },
transitionName: {},
backdropClass: {},
backdropContentClass: {},
contentPadding: { type: Boolean },
justify: {},
align: {},
variant: {},
ariaLabelledby: {},
ariaDescribedby: {}
},
emits: ["open", "close", "update:model-value"],
setup(__props, { expose: __expose }) {
const backdropProps = createPropsRestProxy(__props, ["modelValue", "maxWidth", "minWidth", "scrollable", "closeOnEscape"]), MazBtn = defineAsyncComponent(() => import("./MazBtn.js")), attrs = useAttrs(), backdrop = ref();
__expose({
/**
* Close the dialog
* @description This is used to close the dialog
*/
close: () => backdrop.value?.close?.()
});
const wrapperAttrs = computed(() => ({
class: attrs.class,
style: attrs.style
})), dialogContent = ref(), slots = useSlots(), hasFooter = computed(() => !!slots.footer);
return __props.scrollable && watch(() => __props.modelValue, async (newVal) => {
await nextTick(), newVal && dialogContent.value && setTimeout(() => {
dialogContent.value?.scrollTo({ top: 0, behavior: "instant" });
}, 0);
}), (_ctx, _cache) => (openBlock(), createBlock(MazBackdrop, mergeProps(backdropProps, {
ref_key: "backdrop",
ref: backdrop,
"model-value": __props.modelValue,
"transition-name": "modal-anim",
"aria-labelledby": "dialogTitle",
"aria-describedby": "dialogDesc",
"close-on-escape": __props.closeOnEscape,
"content-padding": "",
persistent: __props.persistent,
justify: "center",
variant: "dialog",
onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close", $event)),
onOpen: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("open", $event)),
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:model-value", $event))
}), {
default: withCtx(({ close }) => [
createElementVNode("div", mergeProps({
class: ["m-dialog", { "--scrollable": __props.scrollable }],
role: "dialog",
"aria-modal": "true",
style: [{ "--max-width": __props.maxWidth, "--min-width": __props.minWidth }]
}, wrapperAttrs.value), [
renderSlot(_ctx.$slots, "header", { close }, () => [
createElementVNode("div", {
class: normalizeClass(["m-dialog-header", { "--has-title": _ctx.$slots.title || __props.title }])
}, [
_ctx.$slots.title || __props.title ? (openBlock(), createElementBlock("h2", _hoisted_1, [
renderSlot(_ctx.$slots, "title", {}, () => [
createTextVNode(toDisplayString(__props.title), 1)
], !0)
])) : createCommentVNode("", !0),
!__props.hideCloseButton && !__props.persistent ? (openBlock(), createBlock(unref(MazBtn), {
key: 1,
color: "transparent",
size: "sm",
icon: unref(MazXMark),
onClick: close
}, null, 8, ["icon", "onClick"])) : createCommentVNode("", !0)
], 2)
], !0),
createElementVNode("div", {
id: "dialogDesc",
ref_key: "dialogContent",
ref: dialogContent,
class: normalizeClass(["m-dialog-content", { "--bottom-padding": !hasFooter.value }])
}, [
renderSlot(_ctx.$slots, "default", { close }, void 0, !0)
], 2),
hasFooter.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
renderSlot(_ctx.$slots, "footer", { close }, void 0, !0)
])) : createCommentVNode("", !0)
], 16)
]),
_: 3
}, 16, ["model-value", "close-on-escape", "persistent"]));
}
}), MazDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8f2db8e4"]]);
export {
MazDialog as default
};