@mekari/pixel3-modal 0.0.1

package/dist/body.d.mts

@@ -0,0 +1,6 @@
+import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+
+declare const MpModalBody: vue.DefineComponent<{}, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+export { MpModalBody };

package/dist/body.d.ts

@@ -0,0 +1,6 @@
+import * as vue from 'vue';
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+
+declare const MpModalBody: vue.DefineComponent<{}, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+export { MpModalBody };

package/dist/body.js

@@ -0,0 +1,63 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/body.tsx
+var body_exports = {};
+__export(body_exports, {
+  MpModalBody: () => MpModalBody
+});
+module.exports = __toCommonJS(body_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+
+// src/modules/modal.context.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [ModalProvider, useModalContext] = (0, import_pixel3_utils.usePixelCreateContext)("ModalContext");
+
+// src/body.tsx
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var MpModalBody = (0, import_vue2.defineComponent)({
+  name: "MpModalBody",
+  setup(_props, {
+    slots
+  }) {
+    const {
+      body
+    } = (0, import_recipes.modalSlotRecipe)();
+    const {
+      props: modalProps
+    } = useModalContext();
+    const {
+      scrollBehavior
+    } = modalProps;
+    return () => {
+      return (0, import_vue.createVNode)("div", {
+        "data-pixel-component": "MpModalBody",
+        "class": body,
+        "style": {
+          overflowY: scrollBehavior.value === "inside" || scrollBehavior.value === "auto" ? "auto" : "inherit"
+        }
+      }, [slots.default && slots.default()]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpModalBody
+});

package/dist/body.mjs

@@ -0,0 +1,8 @@
+import {
+  MpModalBody
+} from "./chunk-ASQKAMBD.mjs";
+import "./chunk-DKUTSUEJ.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpModalBody
+};

package/dist/chunk-2WYPEVZV.mjs

@@ -0,0 +1,62 @@
+// src/modules/modal.props.ts
+var modalProps = {
+  id: {
+    type: String
+  },
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  isBlockScrollOnMount: {
+    type: Boolean,
+    default: false
+  },
+  isCloseOnEsc: {
+    type: Boolean,
+    default: true
+  },
+  isCloseOnOverlayClick: {
+    type: Boolean,
+    default: true
+  },
+  isKeepAlive: {
+    type: Boolean,
+    default: false
+  },
+  isCentered: {
+    type: Boolean,
+    default: false
+  },
+  scrollBehavior: {
+    type: String,
+    default: "outside"
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  isDisablePortal: {
+    type: Boolean,
+    default: false
+  }
+};
+var modalContentProps = {
+  type: {
+    type: String,
+    default: "modal"
+  },
+  placement: {
+    type: String,
+    default: "right"
+  }
+};
+var modalEmits = {
+  "open": (value) => value,
+  "close": (value) => value
+};
+
+export {
+  modalProps,
+  modalContentProps,
+  modalEmits
+};

package/dist/chunk-7LGGLG42.mjs

@@ -0,0 +1,77 @@
+import {
+  modalEmits,
+  modalProps
+} from "./chunk-2WYPEVZV.mjs";
+import {
+  useModal
+} from "./chunk-MO6AFEOO.mjs";
+import {
+  ModalProvider
+} from "./chunk-DKUTSUEJ.mjs";
+
+// src/modal.tsx
+import { Fragment as _Fragment, withDirectives as _withDirectives, mergeProps as _mergeProps, vShow as _vShow, createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
+import { defineComponent, Teleport, toRefs, watch } from "vue";
+import { modalSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+var MpModal = defineComponent({
+  name: "MpModal",
+  props: modalProps,
+  inheritAttrs: false,
+  emits: modalEmits,
+  setup(props, {
+    slots,
+    emit,
+    attrs
+  }) {
+    const {
+      modalEl,
+      getId,
+      onClose,
+      onOpen,
+      isModalOpen
+    } = useModal(props, emit);
+    ModalProvider({
+      props: toRefs(props),
+      modalEl,
+      getId,
+      onClose,
+      onOpen,
+      isModalOpen
+    });
+    watch(() => props.isOpen, () => {
+      if (props.isOpen) {
+        onOpen();
+        return;
+      }
+    }, {
+      immediate: true
+    });
+    return () => {
+      const {
+        root,
+        rootChild
+      } = modalSlotRecipe({
+        full: props.size === "full" ? true : false
+      });
+      const modalNode = _withDirectives(_createVNode("div", _mergeProps({
+        "ref": modalEl,
+        "data-pixel-component": "MpModal",
+        "class": root,
+        "id": `modal-${getId.value}`
+      }, attrs), [_createVNode("div", {
+        "class": rootChild
+      }, [_createTextVNode(" "), slots.default && slots.default(), _createTextVNode(" ")])]), [[_vShow, isModalOpen.value]]);
+      const renderModalNode = !props.isDisablePortal ? _createVNode(Teleport, {
+        "to": "body"
+      }, {
+        default: () => [_createTextVNode(" "), modalNode, _createTextVNode(" ")]
+      }) : modalNode;
+      const conditionalRenderNode = isModalOpen.value ? renderModalNode : null;
+      return _createVNode(_Fragment, null, [props.isKeepAlive ? renderModalNode : conditionalRenderNode]);
+    };
+  }
+});
+
+export {
+  MpModal
+};

package/dist/chunk-ASQKAMBD.mjs

@@ -0,0 +1,37 @@
+import {
+  useModalContext
+} from "./chunk-DKUTSUEJ.mjs";
+
+// src/body.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { modalSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+var MpModalBody = defineComponent({
+  name: "MpModalBody",
+  setup(_props, {
+    slots
+  }) {
+    const {
+      body
+    } = modalSlotRecipe();
+    const {
+      props: modalProps
+    } = useModalContext();
+    const {
+      scrollBehavior
+    } = modalProps;
+    return () => {
+      return _createVNode("div", {
+        "data-pixel-component": "MpModalBody",
+        "class": body,
+        "style": {
+          overflowY: scrollBehavior.value === "inside" || scrollBehavior.value === "auto" ? "auto" : "inherit"
+        }
+      }, [slots.default && slots.default()]);
+    };
+  }
+});
+
+export {
+  MpModalBody
+};

package/dist/chunk-D4KITWKW.mjs

@@ -0,0 +1,34 @@
+import {
+  useModalContext
+} from "./chunk-DKUTSUEJ.mjs";
+
+// src/close-button.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { MpButton } from "@mekari/pixel3-button";
+import { modalSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+var MpModalCloseButton = defineComponent({
+  name: "MpModalCloseButton",
+  setup() {
+    const {
+      closeButton
+    } = modalSlotRecipe();
+    const {
+      onClose
+    } = useModalContext();
+    return () => {
+      return _createVNode(MpButton, {
+        "data-pixel-component": "MpModalCloseButton",
+        "class": closeButton,
+        "leftIcon": "close",
+        "size": "sm",
+        "variant": "ghost",
+        "onClick": onClose
+      }, null);
+    };
+  }
+});
+
+export {
+  MpModalCloseButton
+};

package/dist/chunk-DKUTSUEJ.mjs

@@ -0,0 +1,8 @@
+// src/modules/modal.context.ts
+import { usePixelCreateContext } from "@mekari/pixel3-utils";
+var [ModalProvider, useModalContext] = usePixelCreateContext("ModalContext");
+
+export {
+  ModalProvider,
+  useModalContext
+};

package/dist/chunk-FU2Y3XYA.mjs

@@ -0,0 +1,70 @@
+import {
+  useModalContext
+} from "./chunk-DKUTSUEJ.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/overlay.tsx
+import { withDirectives as _withDirectives, createVNode as _createVNode, vShow as _vShow } from "vue";
+import { defineComponent, Transition } from "vue";
+import anime from "animejs";
+import { modalSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+var MpModalOverlay = defineComponent({
+  name: "MpModalOverlay",
+  setup(_props, {
+    slots
+  }) {
+    const {
+      overlay
+    } = modalSlotRecipe();
+    const {
+      props: modalProps
+    } = useModalContext();
+    const {
+      isOpen,
+      isKeepAlive
+    } = modalProps;
+    const handleBeforeEnter = /* @__PURE__ */ __name((el) => {
+      el && el.style.setProperty("will-change", "opacity, transform", "scale");
+    }, "handleBeforeEnter");
+    const enterAnimation = /* @__PURE__ */ __name((el, complete) => {
+      anime({
+        targets: el,
+        opacity: [0, 1],
+        easing: "easeOutSine",
+        duration: 300,
+        complete
+      });
+    }, "enterAnimation");
+    const leaveAnimation = /* @__PURE__ */ __name((el, complete) => {
+      anime({
+        targets: el,
+        opacity: [1, 0],
+        easing: "easeInSine",
+        duration: 300,
+        complete
+      });
+    }, "leaveAnimation");
+    return () => {
+      const overlayNode = _withDirectives(_createVNode("div", {
+        "data-pixel-component": "MpModalOverlay",
+        "class": overlay
+      }, [slots.default && slots.default()]), [[_vShow, isOpen.value]]);
+      const withConditionalRender = isOpen.value ? overlayNode : null;
+      return _createVNode(Transition, {
+        "css": false,
+        "appear": true,
+        "onBeforeEnter": (el) => handleBeforeEnter(el),
+        "onEnter": (el, complete) => enterAnimation(el, complete),
+        "onLeave": (el, complete) => leaveAnimation(el, complete)
+      }, {
+        default: () => [isKeepAlive.value ? overlayNode : withConditionalRender]
+      });
+    };
+  }
+});
+
+export {
+  MpModalOverlay
+};

package/dist/chunk-FXPPG3HJ.mjs

@@ -0,0 +1,24 @@
+// src/header.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { modalSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+var MpModalHeader = defineComponent({
+  name: "MpModalHeader",
+  setup(_props, {
+    slots
+  }) {
+    const {
+      header
+    } = modalSlotRecipe();
+    return () => {
+      return _createVNode("header", {
+        "data-pixel-component": "MpModalHeader",
+        "class": header
+      }, [slots.default && slots.default()]);
+    };
+  }
+});
+
+export {
+  MpModalHeader
+};

package/dist/chunk-MO6AFEOO.mjs

@@ -0,0 +1,285 @@
+import {
+  useModalContext
+} from "./chunk-DKUTSUEJ.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/useModal.ts
+import { ref, computed, nextTick } from "vue";
+import { useId } from "@mekari/pixel3-utils";
+import { enableBodyScroll, disableBodyScroll } from "body-scroll-lock";
+import anime from "animejs";
+import { useFocusTrap } from "@mekari/pixel3-utils";
+var baseSizes = {
+  sm: "330px",
+  md: "448px",
+  lg: "684px",
+  xl: "920px",
+  "2xl": "1152px",
+  full: "100%"
+};
+function useModal(props, emit) {
+  const isModalOpen = ref(props.isOpen);
+  const modalEl = ref();
+  const getId = computed(() => props.id || useId(4));
+  function onOpen() {
+    isModalOpen.value = true;
+    if (props.isBlockScrollOnMount) {
+      nextTick(() => {
+        disableBodyScroll(modalEl.value);
+      });
+    }
+    emit("open", true);
+  }
+  __name(onOpen, "onOpen");
+  function onClose() {
+    if (props.isBlockScrollOnMount) {
+      enableBodyScroll(modalEl.value);
+    }
+    emit("close", true);
+  }
+  __name(onClose, "onClose");
+  return {
+    isModalOpen,
+    modalEl,
+    getId,
+    onOpen,
+    onClose
+  };
+}
+__name(useModal, "useModal");
+function useModalContent(props) {
+  const {
+    props: modalProps,
+    onClose,
+    isModalOpen
+  } = useModalContext();
+  const {
+    isCloseOnOverlayClick,
+    isOpen,
+    isCloseOnEsc,
+    isKeepAlive,
+    size,
+    isCentered,
+    scrollBehavior
+  } = modalProps;
+  const wrapperEl = ref();
+  const inlineStyle = computed(() => {
+    let wrapperStyle = {};
+    let contentStyle = {};
+    if (isCentered == null ? void 0 : isCentered.value) {
+      wrapperStyle = {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      };
+    } else {
+      contentStyle = {
+        top: "3.75rem",
+        mx: "auto"
+      };
+    }
+    if (scrollBehavior.value === "inside") {
+      wrapperStyle = {
+        ...wrapperStyle,
+        maxHeight: "calc(100vh - 7.5rem)",
+        overflow: "hidden",
+        top: "3.75rem"
+      };
+      contentStyle = {
+        ...contentStyle,
+        height: "100%",
+        top: 0
+      };
+    }
+    if (scrollBehavior.value === "outside") {
+      wrapperStyle = {
+        ...wrapperStyle,
+        overflowY: "auto",
+        overflowX: "hidden"
+      };
+      contentStyle = {
+        ...contentStyle,
+        my: "3.75rem",
+        top: 0
+      };
+    }
+    if (scrollBehavior.value === "auto") {
+      wrapperStyle = {
+        ...wrapperStyle,
+        maxHeight: "calc(100vh - 7.5rem)",
+        overflow: "hidden",
+        top: "3.75rem"
+      };
+      contentStyle = {
+        ...contentStyle,
+        height: "auto",
+        maxHeight: "calc(100vh - 7.5rem)",
+        top: 0
+      };
+    }
+    if (size.value === "full" || props.type === "drawer") {
+      wrapperStyle = {};
+      contentStyle = {};
+    }
+    return {
+      wrapperStyle,
+      contentStyle
+    };
+  });
+  const {
+    activate: activeFocusTrap,
+    deactivate: deactivateFocusTrap
+  } = useFocusTrap(wrapperEl);
+  function onOverlayClick(e) {
+    if (isOpen.value && isCloseOnOverlayClick.value && e.target === wrapperEl.value) {
+      onClose();
+    }
+  }
+  __name(onOverlayClick, "onOverlayClick");
+  const onKeydown = /* @__PURE__ */ __name((event) => {
+    if (event.key === "Escape" && isCloseOnEsc.value) {
+      onClose();
+    }
+  }, "onKeydown");
+  const getTransition = computed(() => {
+    const duration = size.value === "full" ? 400 : 300;
+    let enter = {};
+    let leave = {};
+    if (props.type === "modal") {
+      enter = {
+        opacity: [0, 1],
+        scale: [0.95, 1],
+        translateY: ["16px", "0px"],
+        easing: "easeOutSine",
+        duration
+      };
+      leave = {
+        opacity: [1, 0],
+        scale: [1, 0.95],
+        translateY: ["0px", "16px"],
+        easing: "easeInSine",
+        duration: 300
+      };
+      return {
+        enter,
+        leave
+      };
+    }
+    if (props.type === "drawer") {
+      if (props.placement === "right") {
+        enter = {
+          translateX(el) {
+            const translateWidth = size.value === "full" ? el.clientWidth : baseSizes[size.value];
+            return [translateWidth, "0px"];
+          },
+          easing: "easeInOutSine",
+          duration: 500
+        };
+        leave = {
+          translateX: ["0px", "100%"],
+          easing: "easeInOutSine",
+          duration: 500
+        };
+      }
+      if (props.placement === "left") {
+        enter = {
+          translateX(el) {
+            const translateWidth = size.value === "full" ? el.clientWidth : baseSizes[size.value];
+            return [`-${translateWidth}`, "0px"];
+          },
+          easing: "easeInOutSine",
+          duration: 500
+        };
+        leave = {
+          translateX: ["0px", "-100%"],
+          easing: "easeInOutSine",
+          duration: 500
+        };
+      }
+      if (props.placement === "top") {
+        enter = {
+          translateY(el) {
+            const translateWidth = size.value === "full" ? el.clientWidth : baseSizes[size.value];
+            return [`-${translateWidth}`, "0px"];
+          },
+          easing: "easeInOutSine",
+          duration: 500
+        };
+        leave = {
+          translateY: ["0px", "-100%"],
+          easing: "easeInOutSine",
+          duration: 500
+        };
+      }
+      if (props.placement === "bottom") {
+        enter = {
+          translateY(el) {
+            const translateWidth = size.value === "full" ? el.clientWidth : baseSizes[size.value];
+            return [`${translateWidth}`, "0px"];
+          },
+          easing: "easeInOutSine",
+          duration: 500
+        };
+        leave = {
+          translateY: ["0px", "100%"],
+          easing: "easeInOutSine",
+          duration: 500
+        };
+      }
+    }
+    return {
+      enter,
+      leave
+    };
+  });
+  const beforeEnterAnimation = /* @__PURE__ */ __name((el) => {
+    el && el.style.setProperty("will-change", "opacity, transform", "scale");
+  }, "beforeEnterAnimation");
+  const enterAnimation = /* @__PURE__ */ __name((el, complete) => {
+    anime({
+      targets: el,
+      ...getTransition.value.enter,
+      complete: () => {
+        if (isOpen.value) {
+          complete();
+          document.addEventListener("keydown", onKeydown);
+          activeFocusTrap();
+        }
+      }
+    });
+  }, "enterAnimation");
+  const leaveAnimation = /* @__PURE__ */ __name((el, complete) => {
+    deactivateFocusTrap();
+    anime({
+      targets: el,
+      ...getTransition.value.leave,
+      complete: () => {
+        complete();
+        isModalOpen.value = false;
+        document.removeEventListener("keydown", onKeydown);
+        onClose();
+      }
+    });
+  }, "leaveAnimation");
+  return {
+    wrapperEl,
+    isOpen,
+    isKeepAlive,
+    size,
+    inlineStyle,
+    onOverlayClick,
+    // Animation
+    beforeEnterAnimation,
+    enterAnimation,
+    leaveAnimation
+  };
+}
+__name(useModalContent, "useModalContent");
+
+export {
+  baseSizes,
+  useModal,
+  useModalContent
+};