@mekari/pixel3-modal 0.0.1

package/dist/index.js

@@ -0,0 +1,668 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  MpModal: () => MpModal,
+  MpModalBody: () => MpModalBody,
+  MpModalCloseButton: () => MpModalCloseButton,
+  MpModalContent: () => MpModalContent,
+  MpModalFooter: () => MpModalFooter,
+  MpModalHeader: () => MpModalHeader,
+  MpModalOverlay: () => MpModalOverlay
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/modal.tsx
+var import_vue2 = require("vue");
+var import_vue3 = 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/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
+};
+
+// src/modules/useModal.ts
+var import_vue = require("vue");
+var import_pixel3_utils2 = require("@mekari/pixel3-utils");
+var import_body_scroll_lock = require("body-scroll-lock");
+var import_animejs = __toESM(require("animejs"));
+var import_pixel3_utils3 = require("@mekari/pixel3-utils");
+var baseSizes = {
+  sm: "330px",
+  md: "448px",
+  lg: "684px",
+  xl: "920px",
+  "2xl": "1152px",
+  full: "100%"
+};
+function useModal(props, emit) {
+  const isModalOpen = (0, import_vue.ref)(props.isOpen);
+  const modalEl = (0, import_vue.ref)();
+  const getId = (0, import_vue.computed)(() => props.id || (0, import_pixel3_utils2.useId)(4));
+  function onOpen() {
+    isModalOpen.value = true;
+    if (props.isBlockScrollOnMount) {
+      (0, import_vue.nextTick)(() => {
+        (0, import_body_scroll_lock.disableBodyScroll)(modalEl.value);
+      });
+    }
+    emit("open", true);
+  }
+  __name(onOpen, "onOpen");
+  function onClose() {
+    if (props.isBlockScrollOnMount) {
+      (0, import_body_scroll_lock.enableBodyScroll)(modalEl.value);
+    }
+    emit("close", true);
+  }
+  __name(onClose, "onClose");
+  return {
+    isModalOpen,
+    modalEl,
+    getId,
+    onOpen,
+    onClose
+  };
+}
+__name(useModal, "useModal");
+function useModalContent(props) {
+  const {
+    props: modalProps2,
+    onClose,
+    isModalOpen
+  } = useModalContext();
+  const {
+    isCloseOnOverlayClick,
+    isOpen,
+    isCloseOnEsc,
+    isKeepAlive,
+    size,
+    isCentered,
+    scrollBehavior
+  } = modalProps2;
+  const wrapperEl = (0, import_vue.ref)();
+  const inlineStyle = (0, import_vue.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
+  } = (0, import_pixel3_utils3.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 = (0, import_vue.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) => {
+    (0, import_animejs.default)({
+      targets: el,
+      ...getTransition.value.enter,
+      complete: () => {
+        if (isOpen.value) {
+          complete();
+          document.addEventListener("keydown", onKeydown);
+          activeFocusTrap();
+        }
+      }
+    });
+  }, "enterAnimation");
+  const leaveAnimation = /* @__PURE__ */ __name((el, complete) => {
+    deactivateFocusTrap();
+    (0, import_animejs.default)({
+      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");
+
+// src/modal.tsx
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var MpModal = (0, import_vue3.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: (0, import_vue3.toRefs)(props),
+      modalEl,
+      getId,
+      onClose,
+      onOpen,
+      isModalOpen
+    });
+    (0, import_vue3.watch)(() => props.isOpen, () => {
+      if (props.isOpen) {
+        onOpen();
+        return;
+      }
+    }, {
+      immediate: true
+    });
+    return () => {
+      const {
+        root,
+        rootChild
+      } = (0, import_recipes.modalSlotRecipe)({
+        full: props.size === "full" ? true : false
+      });
+      const modalNode = (0, import_vue2.withDirectives)((0, import_vue2.createVNode)("div", (0, import_vue2.mergeProps)({
+        "ref": modalEl,
+        "data-pixel-component": "MpModal",
+        "class": root,
+        "id": `modal-${getId.value}`
+      }, attrs), [(0, import_vue2.createVNode)("div", {
+        "class": rootChild
+      }, [(0, import_vue2.createTextVNode)(" "), slots.default && slots.default(), (0, import_vue2.createTextVNode)(" ")])]), [[import_vue2.vShow, isModalOpen.value]]);
+      const renderModalNode = !props.isDisablePortal ? (0, import_vue2.createVNode)(import_vue3.Teleport, {
+        "to": "body"
+      }, {
+        default: () => [(0, import_vue2.createTextVNode)(" "), modalNode, (0, import_vue2.createTextVNode)(" ")]
+      }) : modalNode;
+      const conditionalRenderNode = isModalOpen.value ? renderModalNode : null;
+      return (0, import_vue2.createVNode)(import_vue2.Fragment, null, [props.isKeepAlive ? renderModalNode : conditionalRenderNode]);
+    };
+  }
+});
+
+// src/overlay.tsx
+var import_vue4 = require("vue");
+var import_vue5 = require("vue");
+var import_animejs2 = __toESM(require("animejs"));
+var import_recipes2 = require("@mekari/pixel3-styled-system/recipes");
+var MpModalOverlay = (0, import_vue5.defineComponent)({
+  name: "MpModalOverlay",
+  setup(_props, {
+    slots
+  }) {
+    const {
+      overlay
+    } = (0, import_recipes2.modalSlotRecipe)();
+    const {
+      props: modalProps2
+    } = useModalContext();
+    const {
+      isOpen,
+      isKeepAlive
+    } = modalProps2;
+    const handleBeforeEnter = /* @__PURE__ */ __name((el) => {
+      el && el.style.setProperty("will-change", "opacity, transform", "scale");
+    }, "handleBeforeEnter");
+    const enterAnimation = /* @__PURE__ */ __name((el, complete) => {
+      (0, import_animejs2.default)({
+        targets: el,
+        opacity: [0, 1],
+        easing: "easeOutSine",
+        duration: 300,
+        complete
+      });
+    }, "enterAnimation");
+    const leaveAnimation = /* @__PURE__ */ __name((el, complete) => {
+      (0, import_animejs2.default)({
+        targets: el,
+        opacity: [1, 0],
+        easing: "easeInSine",
+        duration: 300,
+        complete
+      });
+    }, "leaveAnimation");
+    return () => {
+      const overlayNode = (0, import_vue4.withDirectives)((0, import_vue4.createVNode)("div", {
+        "data-pixel-component": "MpModalOverlay",
+        "class": overlay
+      }, [slots.default && slots.default()]), [[import_vue4.vShow, isOpen.value]]);
+      const withConditionalRender = isOpen.value ? overlayNode : null;
+      return (0, import_vue4.createVNode)(import_vue5.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]
+      });
+    };
+  }
+});
+
+// src/content.tsx
+var import_vue6 = require("vue");
+var import_vue7 = require("vue");
+var import_recipes3 = require("@mekari/pixel3-styled-system/recipes");
+var MpModalContent = (0, import_vue7.defineComponent)({
+  name: "MpModalContent",
+  props: modalContentProps,
+  inheritAttrs: false,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const {
+      wrapperEl,
+      isOpen,
+      isKeepAlive,
+      size,
+      inlineStyle,
+      onOverlayClick,
+      beforeEnterAnimation,
+      enterAnimation,
+      leaveAnimation
+    } = useModalContent(props);
+    return () => {
+      const {
+        contentRoot,
+        contentChild
+      } = (0, import_recipes3.modalSlotRecipe)({
+        full: size.value === "full" ? true : false
+      });
+      const contentNode = (0, import_vue6.withDirectives)((0, import_vue6.createVNode)("div", (0, import_vue6.mergeProps)({
+        "data-pixel-component": "MpModalContent",
+        "class": contentChild,
+        "style": {
+          maxWidth: baseSizes[size.value],
+          ...inlineStyle.value.contentStyle
+        },
+        "tabindex": "-1"
+      }, attrs), [slots.default && slots.default()]), [[import_vue6.vShow, isOpen.value]]);
+      const conditionalRender = isOpen.value ? contentNode : null;
+      return (0, import_vue6.createVNode)("div", {
+        "ref": wrapperEl,
+        "class": contentRoot,
+        "style": inlineStyle.value.wrapperStyle,
+        "onClick": onOverlayClick
+      }, [(0, import_vue6.createVNode)(import_vue7.Transition, {
+        "css": false,
+        "appear": true,
+        "onBeforeEnter": (el) => beforeEnterAnimation(el),
+        "onEnter": (el, complete) => enterAnimation(el, complete),
+        "onLeave": (el, complete) => leaveAnimation(el, complete)
+      }, {
+        default: () => [isKeepAlive ? contentNode : conditionalRender]
+      })]);
+    };
+  }
+});
+
+// src/body.tsx
+var import_vue8 = require("vue");
+var import_vue9 = require("vue");
+var import_recipes4 = require("@mekari/pixel3-styled-system/recipes");
+var MpModalBody = (0, import_vue9.defineComponent)({
+  name: "MpModalBody",
+  setup(_props, {
+    slots
+  }) {
+    const {
+      body
+    } = (0, import_recipes4.modalSlotRecipe)();
+    const {
+      props: modalProps2
+    } = useModalContext();
+    const {
+      scrollBehavior
+    } = modalProps2;
+    return () => {
+      return (0, import_vue8.createVNode)("div", {
+        "data-pixel-component": "MpModalBody",
+        "class": body,
+        "style": {
+          overflowY: scrollBehavior.value === "inside" || scrollBehavior.value === "auto" ? "auto" : "inherit"
+        }
+      }, [slots.default && slots.default()]);
+    };
+  }
+});
+
+// src/header.tsx
+var import_vue10 = require("vue");
+var import_vue11 = require("vue");
+var import_recipes5 = require("@mekari/pixel3-styled-system/recipes");
+var MpModalHeader = (0, import_vue11.defineComponent)({
+  name: "MpModalHeader",
+  setup(_props, {
+    slots
+  }) {
+    const {
+      header
+    } = (0, import_recipes5.modalSlotRecipe)();
+    return () => {
+      return (0, import_vue10.createVNode)("header", {
+        "data-pixel-component": "MpModalHeader",
+        "class": header
+      }, [slots.default && slots.default()]);
+    };
+  }
+});
+
+// src/footer.tsx
+var import_vue12 = require("vue");
+var import_vue13 = require("vue");
+var import_recipes6 = require("@mekari/pixel3-styled-system/recipes");
+var MpModalFooter = (0, import_vue13.defineComponent)({
+  name: "MpModalFooter",
+  setup(_props, {
+    slots
+  }) {
+    const {
+      footer
+    } = (0, import_recipes6.modalSlotRecipe)();
+    return () => {
+      return (0, import_vue12.createVNode)("footer", {
+        "data-pixel-component": "MpModalFooter",
+        "class": footer
+      }, [slots.default && slots.default()]);
+    };
+  }
+});
+
+// src/close-button.tsx
+var import_vue14 = require("vue");
+var import_vue15 = require("vue");
+var import_pixel3_button = require("@mekari/pixel3-button");
+var import_recipes7 = require("@mekari/pixel3-styled-system/recipes");
+var MpModalCloseButton = (0, import_vue15.defineComponent)({
+  name: "MpModalCloseButton",
+  setup() {
+    const {
+      closeButton
+    } = (0, import_recipes7.modalSlotRecipe)();
+    const {
+      onClose
+    } = useModalContext();
+    return () => {
+      return (0, import_vue14.createVNode)(import_pixel3_button.MpButton, {
+        "data-pixel-component": "MpModalCloseButton",
+        "class": closeButton,
+        "leftIcon": "close",
+        "size": "sm",
+        "variant": "ghost",
+        "onClick": onClose
+      }, null);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpModal,
+  MpModalBody,
+  MpModalCloseButton,
+  MpModalContent,
+  MpModalFooter,
+  MpModalHeader,
+  MpModalOverlay
+});

package/dist/index.mjs

@@ -0,0 +1,34 @@
+import {
+  MpModalBody
+} from "./chunk-ASQKAMBD.mjs";
+import {
+  MpModalCloseButton
+} from "./chunk-D4KITWKW.mjs";
+import {
+  MpModalContent
+} from "./chunk-NCQFKFXL.mjs";
+import {
+  MpModalFooter
+} from "./chunk-THCDEEFK.mjs";
+import {
+  MpModalHeader
+} from "./chunk-FXPPG3HJ.mjs";
+import {
+  MpModal
+} from "./chunk-7LGGLG42.mjs";
+import "./chunk-2WYPEVZV.mjs";
+import "./chunk-MO6AFEOO.mjs";
+import {
+  MpModalOverlay
+} from "./chunk-FU2Y3XYA.mjs";
+import "./chunk-DKUTSUEJ.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpModal,
+  MpModalBody,
+  MpModalCloseButton,
+  MpModalContent,
+  MpModalFooter,
+  MpModalHeader,
+  MpModalOverlay
+};