@mekari/pixel3-modal 0.0.1

package/dist/chunk-NCQFKFXL.mjs

@@ -0,0 +1,69 @@
+import {
+  modalContentProps
+} from "./chunk-2WYPEVZV.mjs";
+import {
+  baseSizes,
+  useModalContent
+} from "./chunk-MO6AFEOO.mjs";
+
+// src/content.tsx
+import { withDirectives as _withDirectives, createVNode as _createVNode, mergeProps as _mergeProps, vShow as _vShow } from "vue";
+import { defineComponent, Transition } from "vue";
+import { modalSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+var MpModalContent = 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
+      } = modalSlotRecipe({
+        full: size.value === "full" ? true : false
+      });
+      const contentNode = _withDirectives(_createVNode("div", _mergeProps({
+        "data-pixel-component": "MpModalContent",
+        "class": contentChild,
+        "style": {
+          maxWidth: baseSizes[size.value],
+          ...inlineStyle.value.contentStyle
+        },
+        "tabindex": "-1"
+      }, attrs), [slots.default && slots.default()]), [[_vShow, isOpen.value]]);
+      const conditionalRender = isOpen.value ? contentNode : null;
+      return _createVNode("div", {
+        "ref": wrapperEl,
+        "class": contentRoot,
+        "style": inlineStyle.value.wrapperStyle,
+        "onClick": onOverlayClick
+      }, [_createVNode(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]
+      })]);
+    };
+  }
+});
+
+export {
+  MpModalContent
+};

package/dist/chunk-QZ7VFGWC.mjs

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};

package/dist/chunk-THCDEEFK.mjs

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

package/dist/close-button.d.mts

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

package/dist/close-button.d.ts

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

package/dist/close-button.js

@@ -0,0 +1,60 @@
+"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/close-button.tsx
+var close_button_exports = {};
+__export(close_button_exports, {
+  MpModalCloseButton: () => MpModalCloseButton
+});
+module.exports = __toCommonJS(close_button_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_pixel3_button = require("@mekari/pixel3-button");
+
+// src/modules/modal.context.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [ModalProvider, useModalContext] = (0, import_pixel3_utils.usePixelCreateContext)("ModalContext");
+
+// src/close-button.tsx
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var MpModalCloseButton = (0, import_vue2.defineComponent)({
+  name: "MpModalCloseButton",
+  setup() {
+    const {
+      closeButton
+    } = (0, import_recipes.modalSlotRecipe)();
+    const {
+      onClose
+    } = useModalContext();
+    return () => {
+      return (0, import_vue.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 = {
+  MpModalCloseButton
+});

package/dist/close-button.mjs

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

package/dist/content.d.mts

@@ -0,0 +1,28 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import { Placement } from './modules/modal.props.mjs';
+import * as vue from 'vue';
+
+declare const MpModalContent: vue.DefineComponent<{
+    type: {
+        type: vue.PropType<"modal" | "drawer">;
+        default: string;
+    };
+    placement: {
+        type: vue.PropType<Placement>;
+        default: string;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    type: {
+        type: vue.PropType<"modal" | "drawer">;
+        default: string;
+    };
+    placement: {
+        type: vue.PropType<Placement>;
+        default: string;
+    };
+}>>, {
+    type: "modal" | "drawer";
+    placement: Placement;
+}, {}>;
+
+export { MpModalContent };

package/dist/content.d.ts

@@ -0,0 +1,28 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import { Placement } from './modules/modal.props.js';
+import * as vue from 'vue';
+
+declare const MpModalContent: vue.DefineComponent<{
+    type: {
+        type: vue.PropType<"modal" | "drawer">;
+        default: string;
+    };
+    placement: {
+        type: vue.PropType<Placement>;
+        default: string;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    type: {
+        type: vue.PropType<"modal" | "drawer">;
+        default: string;
+    };
+    placement: {
+        type: vue.PropType<Placement>;
+        default: string;
+    };
+}>>, {
+    type: "modal" | "drawer";
+    placement: Placement;
+}, {}>;
+
+export { MpModalContent };

package/dist/content.js

@@ -0,0 +1,359 @@
+"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/content.tsx
+var content_exports = {};
+__export(content_exports, {
+  MpModalContent: () => MpModalContent
+});
+module.exports = __toCommonJS(content_exports);
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+
+// 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");
+
+// src/modules/modal.context.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [ModalProvider, useModalContext] = (0, import_pixel3_utils.usePixelCreateContext)("ModalContext");
+
+// src/modules/useModal.ts
+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 useModalContent(props) {
+  const {
+    props: modalProps,
+    onClose,
+    isModalOpen
+  } = useModalContext();
+  const {
+    isCloseOnOverlayClick,
+    isOpen,
+    isCloseOnEsc,
+    isKeepAlive,
+    size,
+    isCentered,
+    scrollBehavior
+  } = modalProps;
+  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/modules/modal.props.ts
+var modalContentProps = {
+  type: {
+    type: String,
+    default: "modal"
+  },
+  placement: {
+    type: String,
+    default: "right"
+  }
+};
+
+// src/content.tsx
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var MpModalContent = (0, import_vue3.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_recipes.modalSlotRecipe)({
+        full: size.value === "full" ? true : false
+      });
+      const contentNode = (0, import_vue2.withDirectives)((0, import_vue2.createVNode)("div", (0, import_vue2.mergeProps)({
+        "data-pixel-component": "MpModalContent",
+        "class": contentChild,
+        "style": {
+          maxWidth: baseSizes[size.value],
+          ...inlineStyle.value.contentStyle
+        },
+        "tabindex": "-1"
+      }, attrs), [slots.default && slots.default()]), [[import_vue2.vShow, isOpen.value]]);
+      const conditionalRender = isOpen.value ? contentNode : null;
+      return (0, import_vue2.createVNode)("div", {
+        "ref": wrapperEl,
+        "class": contentRoot,
+        "style": inlineStyle.value.wrapperStyle,
+        "onClick": onOverlayClick
+      }, [(0, import_vue2.createVNode)(import_vue3.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]
+      })]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpModalContent
+});

package/dist/content.mjs

@@ -0,0 +1,10 @@
+import {
+  MpModalContent
+} from "./chunk-NCQFKFXL.mjs";
+import "./chunk-2WYPEVZV.mjs";
+import "./chunk-MO6AFEOO.mjs";
+import "./chunk-DKUTSUEJ.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpModalContent
+};

package/dist/footer.d.mts

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

package/dist/footer.d.ts

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

package/dist/footer.js

@@ -0,0 +1,48 @@
+"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/footer.tsx
+var footer_exports = {};
+__export(footer_exports, {
+  MpModalFooter: () => MpModalFooter
+});
+module.exports = __toCommonJS(footer_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var MpModalFooter = (0, import_vue2.defineComponent)({
+  name: "MpModalFooter",
+  setup(_props, {
+    slots
+  }) {
+    const {
+      footer
+    } = (0, import_recipes.modalSlotRecipe)();
+    return () => {
+      return (0, import_vue.createVNode)("footer", {
+        "data-pixel-component": "MpModalFooter",
+        "class": footer
+      }, [slots.default && slots.default()]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpModalFooter
+});

package/dist/footer.mjs

@@ -0,0 +1,7 @@
+import {
+  MpModalFooter
+} from "./chunk-THCDEEFK.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpModalFooter
+};