maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
55 lines (54 loc) • 2.3 kB
JavaScript
import { defineComponent, defineAsyncComponent, createBlock, openBlock, withCtx, createElementVNode, normalizeClass, renderSlot, createCommentVNode, unref, createVNode } 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/MazBottomSheet.DKDf6Eet.css';const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MazBottomSheet",
props: {
modelValue: { type: Boolean },
hideCloseButton: { type: Boolean, default: !1 },
padding: { type: Boolean, default: !0 }
},
emits: ["update:model-value", "open", "close"],
setup(__props, { emit: __emit }) {
const emits = __emit, MazBtn = defineAsyncComponent(() => import("./MazBtn.js"));
return (_ctx, _cache) => (openBlock(), createBlock(MazBackdrop, {
"model-value": __props.modelValue,
"transition-name": "bottom-sheet-anim",
"backdrop-class": "--bottom-sheet",
"content-padding": !1,
align: "end",
justify: "none",
variant: "bottom-sheet",
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) => emits("update:model-value", $event))
}, {
default: withCtx(({ close }) => [
createElementVNode("div", {
class: normalizeClass(["m-bottom-sheet__container", {
"--padding": __props.padding
}])
}, [
renderSlot(_ctx.$slots, "default", { close }, void 0, !0),
__props.hideCloseButton ? createCommentVNode("", !0) : (openBlock(), createBlock(unref(MazBtn), {
key: 0,
size: "sm",
class: "m-bottom-sheet__close",
color: "transparent",
onClick: close
}, {
default: withCtx(() => [
createVNode(unref(MazXMark), { class: "maz-text-lg" })
]),
_: 1
}, 8, ["onClick"]))
], 2)
]),
_: 3
}, 8, ["model-value"]));
}
}), MazBottomSheet = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e9ab4fa6"]]);
export {
MazBottomSheet as default
};