@mekari/pixel3-modal 0.0.1

package/dist/modules/modal.props.d.ts

@@ -0,0 +1,64 @@
+import { PropType, ExtractPropTypes } from 'vue';
+
+type BaseSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+type ScrollBehavior = 'inside' | 'outside' | 'auto';
+type Placement = 'left' | 'right' | 'top' | 'bottom';
+declare const modalProps: {
+    id: {
+        type: PropType<string>;
+    };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isBlockScrollOnMount: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isCloseOnEsc: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isCloseOnOverlayClick: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isKeepAlive: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    isCentered: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    scrollBehavior: {
+        type: PropType<ScrollBehavior>;
+        default: string;
+    };
+    size: {
+        type: PropType<BaseSize>;
+        default: string;
+    };
+    isDisablePortal: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};
+declare const modalContentProps: {
+    type: {
+        type: PropType<"modal" | "drawer">;
+        default: string;
+    };
+    placement: {
+        type: PropType<Placement>;
+        default: string;
+    };
+};
+declare const modalEmits: {
+    open: (value: boolean) => boolean;
+    close: (value: boolean) => boolean;
+};
+type ModalProps = ExtractPropTypes<typeof modalProps>;
+type ModalContentProps = ExtractPropTypes<typeof modalContentProps>;
+
+export { BaseSize, ModalContentProps, ModalProps, Placement, ScrollBehavior, modalContentProps, modalEmits, modalProps };

package/dist/modules/modal.props.js

@@ -0,0 +1,88 @@
+"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/modules/modal.props.ts
+var modal_props_exports = {};
+__export(modal_props_exports, {
+  modalContentProps: () => modalContentProps,
+  modalEmits: () => modalEmits,
+  modalProps: () => modalProps
+});
+module.exports = __toCommonJS(modal_props_exports);
+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
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  modalContentProps,
+  modalEmits,
+  modalProps
+});

package/dist/modules/modal.props.mjs

@@ -0,0 +1,11 @@
+import {
+  modalContentProps,
+  modalEmits,
+  modalProps
+} from "../chunk-2WYPEVZV.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  modalContentProps,
+  modalEmits,
+  modalProps
+};

package/dist/modules/useModal.d.mts

@@ -0,0 +1,28 @@
+import * as vue from 'vue';
+import { BaseSize, ModalProps, ModalContentProps } from './modal.props.mjs';
+
+declare const baseSizes: Record<BaseSize, string>;
+declare function useModal(props: ModalProps, emit: CallableFunction): {
+    isModalOpen: vue.Ref<boolean>;
+    modalEl: vue.Ref<any>;
+    getId: vue.ComputedRef<string>;
+    onOpen: () => void;
+    onClose: () => void;
+};
+declare function useModalContent(props: ModalContentProps): {
+    wrapperEl: vue.Ref<any>;
+    isOpen: vue.Ref<boolean>;
+    isKeepAlive: vue.Ref<boolean>;
+    size: vue.Ref<BaseSize>;
+    inlineStyle: vue.ComputedRef<{
+        wrapperStyle: {};
+        contentStyle: {};
+    }>;
+    onOverlayClick: (e: Event) => void;
+    beforeEnterAnimation: (el: Element) => void;
+    enterAnimation: (el: HTMLElement, complete: () => void) => void;
+    leaveAnimation: (el: HTMLElement, complete: () => void) => void;
+};
+type UseModal = ReturnType<typeof useModal>;
+
+export { UseModal, baseSizes, useModal, useModalContent };

package/dist/modules/useModal.d.ts

@@ -0,0 +1,28 @@
+import * as vue from 'vue';
+import { BaseSize, ModalProps, ModalContentProps } from './modal.props.js';
+
+declare const baseSizes: Record<BaseSize, string>;
+declare function useModal(props: ModalProps, emit: CallableFunction): {
+    isModalOpen: vue.Ref<boolean>;
+    modalEl: vue.Ref<any>;
+    getId: vue.ComputedRef<string>;
+    onOpen: () => void;
+    onClose: () => void;
+};
+declare function useModalContent(props: ModalContentProps): {
+    wrapperEl: vue.Ref<any>;
+    isOpen: vue.Ref<boolean>;
+    isKeepAlive: vue.Ref<boolean>;
+    size: vue.Ref<BaseSize>;
+    inlineStyle: vue.ComputedRef<{
+        wrapperStyle: {};
+        contentStyle: {};
+    }>;
+    onOverlayClick: (e: Event) => void;
+    beforeEnterAnimation: (el: Element) => void;
+    enterAnimation: (el: HTMLElement, complete: () => void) => void;
+    leaveAnimation: (el: HTMLElement, complete: () => void) => void;
+};
+type UseModal = ReturnType<typeof useModal>;
+
+export { UseModal, baseSizes, useModal, useModalContent };

package/dist/modules/useModal.js

@@ -0,0 +1,321 @@
+"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/modules/useModal.ts
+var useModal_exports = {};
+__export(useModal_exports, {
+  baseSizes: () => baseSizes,
+  useModal: () => useModal,
+  useModalContent: () => useModalContent
+});
+module.exports = __toCommonJS(useModal_exports);
+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 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: 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");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  baseSizes,
+  useModal,
+  useModalContent
+});

package/dist/modules/useModal.mjs

@@ -0,0 +1,12 @@
+import {
+  baseSizes,
+  useModal,
+  useModalContent
+} from "../chunk-MO6AFEOO.mjs";
+import "../chunk-DKUTSUEJ.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  baseSizes,
+  useModal,
+  useModalContent
+};

package/dist/overlay.d.mts

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

package/dist/overlay.d.ts

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

package/dist/overlay.js

@@ -0,0 +1,104 @@
+"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/overlay.tsx
+var overlay_exports = {};
+__export(overlay_exports, {
+  MpModalOverlay: () => MpModalOverlay
+});
+module.exports = __toCommonJS(overlay_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_animejs = __toESM(require("animejs"));
+
+// src/modules/modal.context.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [ModalProvider, useModalContext] = (0, import_pixel3_utils.usePixelCreateContext)("ModalContext");
+
+// src/overlay.tsx
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+var MpModalOverlay = (0, import_vue2.defineComponent)({
+  name: "MpModalOverlay",
+  setup(_props, {
+    slots
+  }) {
+    const {
+      overlay
+    } = (0, import_recipes.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) => {
+      (0, import_animejs.default)({
+        targets: el,
+        opacity: [0, 1],
+        easing: "easeOutSine",
+        duration: 300,
+        complete
+      });
+    }, "enterAnimation");
+    const leaveAnimation = /* @__PURE__ */ __name((el, complete) => {
+      (0, import_animejs.default)({
+        targets: el,
+        opacity: [1, 0],
+        easing: "easeInSine",
+        duration: 300,
+        complete
+      });
+    }, "leaveAnimation");
+    return () => {
+      const overlayNode = (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
+        "data-pixel-component": "MpModalOverlay",
+        "class": overlay
+      }, [slots.default && slots.default()]), [[import_vue.vShow, isOpen.value]]);
+      const withConditionalRender = isOpen.value ? overlayNode : null;
+      return (0, import_vue.createVNode)(import_vue2.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]
+      });
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpModalOverlay
+});

package/dist/overlay.mjs

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