@mekari/pixel3-drawer 0.0.1

package/dist/drawer.d.ts

@@ -0,0 +1,94 @@
+import * as vue_jsx_runtime from 'vue/jsx-runtime';
+import * as _mekari_pixel3_modal from '@mekari/pixel3-modal';
+import * as vue from 'vue';
+
+declare const MpDrawer: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string>;
+    };
+    isOpen: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isBlockScrollOnMount: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isCloseOnEsc: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isCloseOnOverlayClick: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isKeepAlive: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isFullHeight: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    placement: {
+        type: vue.PropType<_mekari_pixel3_modal.Placement>;
+        default: string;
+    };
+    size: {
+        type: vue.PropType<_mekari_pixel3_modal.BaseSize>;
+        default: string;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    open: (value: boolean) => boolean;
+    close: (value: boolean) => boolean;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string>;
+    };
+    isOpen: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isBlockScrollOnMount: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isCloseOnEsc: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isCloseOnOverlayClick: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isKeepAlive: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    isFullHeight: {
+        type: vue.PropType<boolean>;
+        default: boolean;
+    };
+    placement: {
+        type: vue.PropType<_mekari_pixel3_modal.Placement>;
+        default: string;
+    };
+    size: {
+        type: vue.PropType<_mekari_pixel3_modal.BaseSize>;
+        default: string;
+    };
+}>> & {
+    onClose?: ((value: boolean) => any) | undefined;
+    onOpen?: ((value: boolean) => any) | undefined;
+}, {
+    isOpen: boolean;
+    isBlockScrollOnMount: boolean;
+    isCloseOnEsc: boolean;
+    isCloseOnOverlayClick: boolean;
+    isKeepAlive: boolean;
+    size: _mekari_pixel3_modal.BaseSize;
+    placement: _mekari_pixel3_modal.Placement;
+    isFullHeight: boolean;
+}, {}>;
+
+export { MpDrawer };

package/dist/drawer.js

@@ -0,0 +1,109 @@
+"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/drawer.tsx
+var drawer_exports = {};
+__export(drawer_exports, {
+  MpDrawer: () => MpDrawer
+});
+module.exports = __toCommonJS(drawer_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_pixel3_modal = require("@mekari/pixel3-modal");
+
+// src/modules/drawer.props.ts
+var drawerProps = {
+  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
+  },
+  isFullHeight: {
+    type: Boolean,
+    default: true
+  },
+  placement: {
+    type: String,
+    default: "right"
+  },
+  size: {
+    type: String,
+    default: "md"
+  }
+};
+var drawerEmits = {
+  "open": (value) => value,
+  "close": (value) => value
+};
+
+// src/modules/drawer.context.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [DrawerProvider, useDrawerContext] = (0, import_pixel3_utils.usePixelCreateContext)("DrawerContext");
+
+// src/drawer.tsx
+var MpDrawer = (0, import_vue2.defineComponent)({
+  name: "MpDrawer",
+  props: drawerProps,
+  emits: drawerEmits,
+  setup(props, {
+    slots,
+    emit
+  }) {
+    DrawerProvider({
+      props: (0, import_vue2.toRefs)(props)
+    });
+    return () => {
+      return (0, import_vue.createVNode)(import_pixel3_modal.MpModal, {
+        "data-pixel-component": "MpDrawer",
+        "id": props.id,
+        "isOpen": props.isOpen,
+        "size": props.size,
+        "isCloseOnEsc": props.isCloseOnEsc,
+        "isCloseOnOverlayClick": props.isCloseOnOverlayClick,
+        "isKeepAlive": props.isKeepAlive,
+        "onOpen": () => emit("open", true),
+        "onClose": () => emit("close", true)
+      }, {
+        default: () => [slots.default && slots.default()]
+      });
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpDrawer
+});

package/dist/drawer.mjs

@@ -0,0 +1,9 @@
+import {
+  MpDrawer
+} from "./chunk-PSZMVXVP.mjs";
+import "./chunk-4UTOYOXC.mjs";
+import "./chunk-54CTPMF7.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpDrawer
+};

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 MpDrawerFooter: vue.DefineComponent<{}, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+export { MpDrawerFooter };

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 MpDrawerFooter: vue.DefineComponent<{}, () => vue_jsx_runtime.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+export { MpDrawerFooter };

package/dist/footer.js

@@ -0,0 +1,46 @@
+"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, {
+  MpDrawerFooter: () => MpDrawerFooter
+});
+module.exports = __toCommonJS(footer_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_pixel3_modal = require("@mekari/pixel3-modal");
+var MpDrawerFooter = (0, import_vue2.defineComponent)({
+  name: "MpDrawerFooter",
+  setup(_props, {
+    slots
+  }) {
+    return () => {
+      return (0, import_vue.createVNode)(import_pixel3_modal.MpModalFooter, {
+        "data-pixel-component": "MpDrawerFooter"
+      }, {
+        default: () => [slots.default && slots.default()]
+      });
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpDrawerFooter
+});

package/dist/footer.mjs

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

package/dist/header.d.mts

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

package/dist/header.d.ts

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

package/dist/header.js

@@ -0,0 +1,46 @@
+"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/header.tsx
+var header_exports = {};
+__export(header_exports, {
+  MpDrawerHeader: () => MpDrawerHeader
+});
+module.exports = __toCommonJS(header_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_pixel3_modal = require("@mekari/pixel3-modal");
+var MpDrawerHeader = (0, import_vue2.defineComponent)({
+  name: "MpDrawerHeader",
+  setup(_props, {
+    slots
+  }) {
+    return () => {
+      return (0, import_vue.createVNode)(import_pixel3_modal.MpModalHeader, {
+        "data-pixel-component": "MpDrawerHeader"
+      }, {
+        default: () => [slots.default && slots.default()]
+      });
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpDrawerHeader
+});

package/dist/header.mjs

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

package/dist/index.d.mts

@@ -0,0 +1,10 @@
+export { MpDrawer } from './drawer.mjs';
+export { MpDrawerOverlay } from './overlay.mjs';
+export { MpDrawerContent } from './content.mjs';
+export { MpDrawerBody } from './body.mjs';
+export { MpDrawerHeader } from './header.mjs';
+export { MpDrawerFooter } from './footer.mjs';
+export { MpDrawerCloseButton } from './close-button.mjs';
+import 'vue/jsx-runtime';
+import '@mekari/pixel3-modal';
+import 'vue';

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { MpDrawer } from './drawer.js';
+export { MpDrawerOverlay } from './overlay.js';
+export { MpDrawerContent } from './content.js';
+export { MpDrawerBody } from './body.js';
+export { MpDrawerHeader } from './header.js';
+export { MpDrawerFooter } from './footer.js';
+export { MpDrawerCloseButton } from './close-button.js';
+import 'vue/jsx-runtime';
+import '@mekari/pixel3-modal';
+import 'vue';

package/dist/index.js

@@ -0,0 +1,285 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  MpDrawer: () => MpDrawer,
+  MpDrawerBody: () => MpDrawerBody,
+  MpDrawerCloseButton: () => MpDrawerCloseButton,
+  MpDrawerContent: () => MpDrawerContent,
+  MpDrawerFooter: () => MpDrawerFooter,
+  MpDrawerHeader: () => MpDrawerHeader,
+  MpDrawerOverlay: () => MpDrawerOverlay
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/drawer.tsx
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_pixel3_modal = require("@mekari/pixel3-modal");
+
+// src/modules/drawer.props.ts
+var drawerProps = {
+  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
+  },
+  isFullHeight: {
+    type: Boolean,
+    default: true
+  },
+  placement: {
+    type: String,
+    default: "right"
+  },
+  size: {
+    type: String,
+    default: "md"
+  }
+};
+var drawerEmits = {
+  "open": (value) => value,
+  "close": (value) => value
+};
+
+// src/modules/drawer.context.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var [DrawerProvider, useDrawerContext] = (0, import_pixel3_utils.usePixelCreateContext)("DrawerContext");
+
+// src/drawer.tsx
+var MpDrawer = (0, import_vue2.defineComponent)({
+  name: "MpDrawer",
+  props: drawerProps,
+  emits: drawerEmits,
+  setup(props, {
+    slots,
+    emit
+  }) {
+    DrawerProvider({
+      props: (0, import_vue2.toRefs)(props)
+    });
+    return () => {
+      return (0, import_vue.createVNode)(import_pixel3_modal.MpModal, {
+        "data-pixel-component": "MpDrawer",
+        "id": props.id,
+        "isOpen": props.isOpen,
+        "size": props.size,
+        "isCloseOnEsc": props.isCloseOnEsc,
+        "isCloseOnOverlayClick": props.isCloseOnOverlayClick,
+        "isKeepAlive": props.isKeepAlive,
+        "onOpen": () => emit("open", true),
+        "onClose": () => emit("close", true)
+      }, {
+        default: () => [slots.default && slots.default()]
+      });
+    };
+  }
+});
+
+// src/overlay.tsx
+var import_vue3 = require("vue");
+var import_vue4 = require("vue");
+var import_pixel3_modal2 = require("@mekari/pixel3-modal");
+var MpDrawerOverlay = (0, import_vue4.defineComponent)({
+  name: "MpDrawerOverlay",
+  setup() {
+    return () => {
+      return (0, import_vue3.createVNode)(import_pixel3_modal2.MpModalOverlay, {
+        "data-pixel-component": "MpDrawerOverlay"
+      }, null);
+    };
+  }
+});
+
+// src/content.tsx
+var import_vue5 = require("vue");
+var import_vue6 = require("vue");
+var import_pixel3_modal3 = require("@mekari/pixel3-modal");
+var getPlacementStyles = /* @__PURE__ */ __name((position, {
+  finalWidth
+}) => {
+  const placements = {
+    bottom: {
+      maxWidth: "100vw",
+      height: "auto",
+      bottom: 0,
+      left: 0,
+      right: 0
+    },
+    top: {
+      maxWidth: "100vw",
+      height: "auto",
+      top: 0,
+      left: 0,
+      right: 0
+    },
+    left: {
+      ...finalWidth && {
+        maxWidth: finalWidth
+      },
+      height: "100vh",
+      left: 0,
+      top: 0
+    },
+    right: {
+      ...finalWidth && {
+        maxWidth: finalWidth
+      },
+      right: 0,
+      top: 0,
+      height: "100vh"
+    }
+  };
+  return placements[position] || placements.right;
+}, "getPlacementStyles");
+var MpDrawerContent = (0, import_vue6.defineComponent)({
+  name: "MpDrawerContent",
+  setup(_props, {
+    slots
+  }) {
+    const {
+      props: drawerProps2
+    } = useDrawerContext();
+    const {
+      placement
+    } = drawerProps2;
+    const placementStyles = (0, import_vue6.computed)(() => {
+      const placementStyles2 = getPlacementStyles(placement.value, {});
+      return {
+        position: "fixed",
+        borderRadius: 0,
+        ...placementStyles2
+      };
+    });
+    return () => {
+      return (0, import_vue5.createVNode)(import_pixel3_modal3.MpModalContent, {
+        "data-pixel-component": "MpDrawerContent",
+        "type": "drawer",
+        "placement": placement.value,
+        "data-placement": placement.value,
+        "style": placementStyles.value
+      }, {
+        default: () => [slots.default && slots.default()]
+      });
+    };
+  }
+});
+
+// src/body.tsx
+var import_vue7 = require("vue");
+var import_vue8 = require("vue");
+var import_pixel3_modal4 = require("@mekari/pixel3-modal");
+var MpDrawerBody = (0, import_vue8.defineComponent)({
+  name: "MpDrawerBody",
+  setup(_props, {
+    slots
+  }) {
+    return () => {
+      return (0, import_vue7.createVNode)(import_pixel3_modal4.MpModalBody, {
+        "data-pixel-component": "MpDrawerBody"
+      }, {
+        default: () => [slots.default && slots.default()]
+      });
+    };
+  }
+});
+
+// src/header.tsx
+var import_vue9 = require("vue");
+var import_vue10 = require("vue");
+var import_pixel3_modal5 = require("@mekari/pixel3-modal");
+var MpDrawerHeader = (0, import_vue10.defineComponent)({
+  name: "MpDrawerHeader",
+  setup(_props, {
+    slots
+  }) {
+    return () => {
+      return (0, import_vue9.createVNode)(import_pixel3_modal5.MpModalHeader, {
+        "data-pixel-component": "MpDrawerHeader"
+      }, {
+        default: () => [slots.default && slots.default()]
+      });
+    };
+  }
+});
+
+// src/footer.tsx
+var import_vue11 = require("vue");
+var import_vue12 = require("vue");
+var import_pixel3_modal6 = require("@mekari/pixel3-modal");
+var MpDrawerFooter = (0, import_vue12.defineComponent)({
+  name: "MpDrawerFooter",
+  setup(_props, {
+    slots
+  }) {
+    return () => {
+      return (0, import_vue11.createVNode)(import_pixel3_modal6.MpModalFooter, {
+        "data-pixel-component": "MpDrawerFooter"
+      }, {
+        default: () => [slots.default && slots.default()]
+      });
+    };
+  }
+});
+
+// src/close-button.tsx
+var import_vue13 = require("vue");
+var import_vue14 = require("vue");
+var import_pixel3_modal7 = require("@mekari/pixel3-modal");
+var MpDrawerCloseButton = (0, import_vue14.defineComponent)({
+  name: "MpDrawerCloseButton",
+  setup() {
+    return () => {
+      return (0, import_vue13.createVNode)(import_pixel3_modal7.MpModalCloseButton, {
+        "data-pixel-component": "MpDrawerCloseButton"
+      }, null);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpDrawer,
+  MpDrawerBody,
+  MpDrawerCloseButton,
+  MpDrawerContent,
+  MpDrawerFooter,
+  MpDrawerHeader,
+  MpDrawerOverlay
+});

package/dist/index.mjs

@@ -0,0 +1,33 @@
+import {
+  MpDrawerBody
+} from "./chunk-ZTWQO5OZ.mjs";
+import {
+  MpDrawerCloseButton
+} from "./chunk-CMAJDRDT.mjs";
+import {
+  MpDrawerContent
+} from "./chunk-7CKFUGSM.mjs";
+import {
+  MpDrawer
+} from "./chunk-PSZMVXVP.mjs";
+import "./chunk-4UTOYOXC.mjs";
+import "./chunk-54CTPMF7.mjs";
+import {
+  MpDrawerFooter
+} from "./chunk-V64M33JD.mjs";
+import {
+  MpDrawerHeader
+} from "./chunk-O5HQLNZJ.mjs";
+import {
+  MpDrawerOverlay
+} from "./chunk-PZOVPODZ.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpDrawer,
+  MpDrawerBody,
+  MpDrawerCloseButton,
+  MpDrawerContent,
+  MpDrawerFooter,
+  MpDrawerHeader,
+  MpDrawerOverlay
+};