maz-ui 3.47.2-beta.19 → 3.47.2-beta.20

package/components/MazBackdrop.d.ts

@@ -1,13 +1,29 @@
 import { type HTMLAttributes } from 'vue';
-export interface Props {
+export interface MazBackdropProps {
+    /** @model Modal's model value */
     modelValue?: boolean;
+    /** Teleport selector */
     teleportSelector?: string;
+    /** Function called before modal is close */
     beforeClose?: () => Promise<void> | void;
+    /** Persistent dialog (not closable by clicking outside and remove close button) */
     persistent?: boolean;
+    /** Prevent close on escape key */
     noCloseOnEscKey?: boolean;
+    /** Transition name */
     transitionName?: string;
+    /** Backdrop class */
     backdropClass?: HTMLAttributes['class'];
+    /** Backdrop content class */
     backdropContentClass?: HTMLAttributes['class'];
+    /** Add padding to the content */
+    contentPadding?: boolean;
+    /** Justify content */
+    justify?: 'center' | 'end' | 'start' | 'space-between' | 'space-around' | 'none';
+    /** Align content */
+    align?: 'center' | 'end' | 'start' | 'none';
+    /** Variant */
+    variant?: 'bottom-sheet' | 'dialog' | 'drawer';
 }
 declare function close(): void;
 declare function toggleModal(value: any): Promise<void>;
@@ -20,13 +36,14 @@ declare function __VLS_template(): {
     slots: {
         default?(_: {
             close: typeof close;
+            onBackdropClicked: typeof onBackdropClicked;
         }): any;
     };
     refs: {};
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<Props, {
+declare const __VLS_component: import("vue").DefineComponent<MazBackdropProps, {
     onBackdropAnimationEnter: typeof onBackdropAnimationEnter;
     onBackdropAnimationLeave: typeof onBackdropAnimationLeave;
     onBackdropClicked: typeof onBackdropClicked;
@@ -39,21 +56,12 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {
     open: (value: void) => any;
     "update:model-value": (value: boolean) => any;
     "before-close": (value: void) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<MazBackdropProps> & Readonly<{
     onClose?: ((value?: void | undefined) => any) | undefined;
     onOpen?: ((value?: void | undefined) => any) | undefined;
     "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
     "onBefore-close"?: ((value?: void | undefined) => any) | undefined;
-}>, {
-    modelValue: boolean;
-    teleportSelector: string;
-    beforeClose: () => Promise<void> | void;
-    persistent: boolean;
-    noCloseOnEscKey: boolean;
-    transitionName: string;
-    backdropClass: HTMLAttributes["class"];
-    backdropContentClass: HTMLAttributes["class"];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/components/MazBackdrop.mjs

@@ -1,5 +1,9 @@
-import { defineComponent as A, ref as L, onMounted as V, watch as D, openBlock as f, createBlock as N, Teleport as S, createVNode as h, Transition as M, withCtx as P, createElementBlock as T, normalizeClass as p, createElementVNode as k, withModifiers as g, mergeProps as w, renderSlot as O, createCommentVNode as K } from "vue";
-import './assets/MazBackdrop.css';const b = "--backdrop-present", F = /* @__PURE__ */ A({
+import { defineComponent as L, ref as P, onMounted as V, watch as D, nextTick as B, openBlock as h, createBlock as M, Teleport as N, createVNode as T, Transition as O, withCtx as $, createElementBlock as j, mergeProps as q, createElementVNode as v, normalizeClass as z, withModifiers as F, renderSlot as K, createCommentVNode as I } from "vue";
+import './assets/MazBackdrop.css';const G = {
+  role: "dialog",
+  class: "m-backdrop-container",
+  "aria-modal": "true"
+}, H = { class: "m-backdrop-wrapper" }, A = "--backdrop-present", J = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "MazBackdrop",
   props: {
@@ -9,112 +13,133 @@ import './assets/MazBackdrop.css';const b = "--backdrop-present", F = /* @__PURE
     persistent: { type: Boolean, default: !1 },
     noCloseOnEscKey: { type: Boolean, default: !1 },
     transitionName: { default: "backdrop-anim" },
-    backdropClass: { default: void 0 },
-    backdropContentClass: { default: void 0 }
+    backdropClass: { default: () => {
+    } },
+    backdropContentClass: { default: () => {
+    } },
+    contentPadding: { type: Boolean, default: !1 },
+    justify: { default: "none" },
+    align: { default: "none" },
+    variant: {}
   },
   emits: ["open", "close", "update:model-value", "before-close"],
-  setup(C, { expose: v, emit: y }) {
-    const o = C, t = y;
-    function E() {
-      document.documentElement.classList.add(b);
+  setup(t, { expose: d, emit: a }) {
+    const o = a;
+    function r() {
+      document.documentElement.classList.add(A);
     }
-    function B() {
-      document.querySelector(".m-backdrop.--present") || document.documentElement.classList.remove(b);
+    function w() {
+      document.querySelector(".m-backdrop.--present") || document.documentElement.classList.remove(A);
     }
-    const n = L(o.modelValue);
-    function a() {
-      d(!1);
+    const s = P(t.modelValue);
+    function l() {
+      k(!1);
+    }
+    async function k(e) {
+      var n;
+      e || (o("before-close"), await ((n = t.beforeClose) == null ? void 0 : n.call(t))), s.value = e;
     }
-    async function d(e) {
-      var r;
-      e || (t("before-close"), await ((r = o.beforeClose) == null ? void 0 : r.call(o))), n.value = e;
+    function y() {
+      o("open");
     }
-    function c() {
-      t("open");
+    function b() {
+      o("update:model-value", !1), o("close"), f();
     }
     function i() {
-      t("update:model-value", !1), t("close"), l();
+      t.persistent || l();
     }
-    function u() {
-      o.persistent || a();
+    function u(e) {
+      !t.noCloseOnEscKey && e.key === "Escape" && !t.persistent && l();
     }
-    function s(e) {
-      !o.noCloseOnEscKey && e.key === "Escape" && !o.persistent && a();
+    function C() {
+      r(), document.addEventListener("keyup", u, !1);
     }
-    function m() {
-      E(), document.addEventListener("keyup", s, !1);
+    function f() {
+      document.removeEventListener("keyup", u), w();
     }
-    function l() {
-      document.removeEventListener("keyup", s), B();
+    V(() => {
+      t.modelValue ? C() : f();
+    });
+    let c = null;
+    function S(e) {
+      const n = document.querySelector(e), m = n && Array.from(n.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select')), p = m == null ? void 0 : m.filter((E) => {
+        const g = window.getComputedStyle(E);
+        return g.display !== "none" && g.visibility !== "hidden" && !E.disabled;
+      });
+      return p && p.length > 0 ? p[0] : null;
     }
-    return V(() => {
-      o.modelValue ? m() : l();
-    }), D(
-      () => o.modelValue,
-      (e) => {
-        n.value = e, e ? m() : l();
+    return D(
+      () => t.modelValue,
+      async (e) => {
+        if (s.value = e, e) {
+          C(), c = document.activeElement, await B();
+          const n = S(".m-backdrop-content");
+          n == null || n.focus();
+        } else
+          f(), await B(), c == null || c.focus();
       }
-    ), v({
-      onBackdropAnimationEnter: c,
-      onBackdropAnimationLeave: i,
-      onBackdropClicked: u,
-      close: a,
-      present: n,
-      toggleModal: d,
-      onKeyPress: s
-    }), (e, r) => (f(), N(S, { to: e.teleportSelector }, [
-      h(M, {
+    ), d({
+      onBackdropAnimationEnter: y,
+      onBackdropAnimationLeave: b,
+      onBackdropClicked: i,
+      close: l,
+      present: s,
+      toggleModal: k,
+      onKeyPress: u
+    }), (e, n) => (h(), M(N, { to: e.teleportSelector }, [
+      T(O, {
         appear: "",
         name: e.transitionName,
-        onAfterEnter: c,
-        onAfterLeave: i
+        onAfterEnter: y,
+        onAfterLeave: b
       }, {
-        default: P(() => [
-          n.value ? (f(), T(
+        default: $(() => [
+          s.value ? (h(), j(
             "div",
-            {
+            q({
               key: 0,
-              class: p(["m-backdrop --present", [e.backdropClass]]),
-              tabindex: "-1",
-              role: "dialog"
-            },
+              class: "m-backdrop --present"
+            }, e.$attrs, {
+              class: [e.backdropClass, e.variant && `--variant-${e.variant}`, { "--persistent": e.persistent }]
+            }),
             [
-              k(
-                "button",
-                {
-                  class: p(["m-backdrop-overlay", { "--disabled": e.persistent }]),
-                  tabindex: "-1",
-                  onClick: g(u, ["self"])
-                },
-                null,
-                2
-                /* CLASS */
-              ),
-              k(
-                "div",
-                w({
-                  class: ["m-backdrop-content", e.backdropContentClass]
-                }, e.$attrs, {
-                  role: "document",
-                  tabindex: "0"
-                }),
-                [
-                  O(e.$slots, "default", { close: a })
-                ],
-                16
-                /* FULL_PROPS */
-              )
+              v("div", G, [
+                v("div", H, [
+                  v(
+                    "div",
+                    {
+                      class: z(["m-backdrop-content", [e.backdropContentClass, `--justify-${e.justify}`, `--align-${e.align}`, { "--padding": e.contentPadding }]]),
+                      role: "button",
+                      tabindex: "-1",
+                      onClick: F(i, ["self"])
+                    },
+                    [
+                      K(e.$slots, "default", {
+                        close: l,
+                        onBackdropClicked: i
+                      }, void 0, !0)
+                    ],
+                    2
+                    /* CLASS */
+                  )
+                ])
+              ])
             ],
-            2
-            /* CLASS */
-          )) : K("v-if", !0)
+            16
+            /* FULL_PROPS */
+          )) : I("v-if", !0)
         ]),
         _: 3
         /* FORWARDED */
       }, 8, ["name"])
     ], 8, ["to"]));
   }
-});
+}), Q = (t, d) => {
+  const a = t.__vccOpts || t;
+  for (const [o, r] of d)
+    a[o] = r;
+  return a;
+}, W = /* @__PURE__ */ Q(J, [["__scopeId", "data-v-7aa1682e"]]);
 export {
-  F as default
+  W as default
 };

package/components/MazBottomSheet.d.ts

@@ -1,3 +1,11 @@
+type __VLS_Props = {
+    /** @model Modal's model value */
+    modelValue?: boolean;
+    /** Remove the close button */
+    noClose?: boolean;
+    /** Remove the padding on the container */
+    noPadding?: boolean;
+};
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -9,36 +17,15 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    noClose: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    noPadding: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (...args: any[]) => void;
     open: (...args: any[]) => void;
     "update:model-value": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    noClose: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    noPadding: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
     onOpen?: ((...args: any[]) => any) | undefined;
     "onUpdate:model-value"?: ((...args: any[]) => any) | undefined;
-}>, {
-    noPadding: boolean;
-    noClose: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/components/MazBottomSheet.mjs

@@ -1,4 +1,4 @@
-import { M as f } from "./chunks/MazBottomSheet-B1cqFZxd.mjs";
+import { M as f } from "./chunks/MazBottomSheet-DGsGO0zo.mjs";
 export {
   f as default
 };

package/components/MazDialog.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPublicInstance, HTMLAttributes } from 'vue';
-import { type Props as MazBackdropProps } from './MazBackdrop.vue';
+import { nextTick } from 'vue';
+import { type MazBackdropProps } from './MazBackdrop.vue';
 export interface InternalProps {
     /** @model Modal's model value */
     modelValue?: boolean;
@@ -7,31 +8,32 @@ export interface InternalProps {
     title?: string;
     /** Remove the close button in header */
     noClose?: boolean;
-    /** Modal's width */
-    width?: string;
     /** Modal's max-width */
     maxWidth?: string;
-    /** Modal's max-height */
-    maxHeight?: string;
+    /** Modal's min-width */
+    minWidth?: string;
     /**  Modal's content becomes scrollable - warning: a overflow is applied */
     scrollable?: boolean;
     /** Persistent dialog (not closable by clicking outside and remove close button) */
     persistent?: boolean;
 }
-export type Props = InternalProps & MazBackdropProps;
-type __VLS_Props = Props & MazBackdropProps;
+export type MazDialogProps = InternalProps & MazBackdropProps;
+type __VLS_Props = InternalProps & MazBackdropProps;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         header?(_: {
             close: () => void;
+            onBackdropClicked: () => void;
         }): any;
         title?(_: {}): any;
         default?(_: {
             close: () => void;
+            onBackdropClicked: () => void;
         }): any;
         footer?(_: {
             close: () => void;
+            onBackdropClicked: () => void;
         }): any;
     };
     refs: {
@@ -47,6 +49,10 @@ declare function __VLS_template(): {
                 readonly transitionName?: string | undefined;
                 readonly backdropClass?: HTMLAttributes["class"];
                 readonly backdropContentClass?: HTMLAttributes["class"];
+                readonly contentPadding?: boolean | undefined;
+                readonly justify?: ("center" | "end" | "start" | "space-between" | "space-around" | "none") | undefined;
+                readonly align?: ("center" | "end" | "start" | "none") | undefined;
+                readonly variant?: ("bottom-sheet" | "dialog" | "drawer") | undefined;
                 readonly onClose?: ((value?: void | undefined) => any) | undefined;
                 readonly onOpen?: ((value?: void | undefined) => any) | undefined;
                 readonly "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
@@ -84,16 +90,7 @@ declare function __VLS_template(): {
                 open: (value: void) => any;
                 "update:model-value": (value: boolean) => any;
                 "before-close": (value: void) => any;
-            }, string, {
-                modelValue: boolean;
-                teleportSelector: string;
-                beforeClose: () => Promise<void> | void;
-                persistent: boolean;
-                noCloseOnEscKey: boolean;
-                transitionName: string;
-                backdropClass: HTMLAttributes["class"];
-                backdropContentClass: HTMLAttributes["class"];
-            }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+            }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
                 beforeCreate?: (() => void) | (() => void)[];
                 created?: (() => void) | (() => void)[];
                 beforeMount?: (() => void) | (() => void)[];
@@ -111,23 +108,14 @@ declare function __VLS_template(): {
                 errorCaptured?: ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance | null, info: string) => boolean | void)[];
             };
             $forceUpdate: () => void;
-            $nextTick: typeof import("vue").nextTick;
+            $nextTick: typeof nextTick;
             $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
-        } & Readonly<{
-            modelValue: boolean;
-            teleportSelector: string;
-            beforeClose: () => Promise<void> | void;
-            persistent: boolean;
-            noCloseOnEscKey: boolean;
-            transitionName: string;
-            backdropClass: HTMLAttributes["class"];
-            backdropContentClass: HTMLAttributes["class"];
-        }> & Omit<Readonly<MazBackdropProps> & Readonly<{
+        } & Readonly<{}> & Omit<Readonly<MazBackdropProps> & Readonly<{
             onClose?: ((value?: void | undefined) => any) | undefined;
             onOpen?: ((value?: void | undefined) => any) | undefined;
             "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
             "onBefore-close"?: ((value?: void | undefined) => any) | undefined;
-        }>, "close" | "onBackdropAnimationEnter" | "onBackdropAnimationLeave" | "onBackdropClicked" | "present" | "toggleModal" | "onKeyPress" | ("modelValue" | "teleportSelector" | "beforeClose" | "persistent" | "noCloseOnEscKey" | "transitionName" | "backdropClass" | "backdropContentClass")> & import("vue").ShallowUnwrapRef<{
+        }>, "close" | "onBackdropAnimationEnter" | "onBackdropAnimationLeave" | "onBackdropClicked" | "present" | "toggleModal" | "onKeyPress"> & import("vue").ShallowUnwrapRef<{
             onBackdropAnimationEnter: () => void;
             onBackdropAnimationLeave: () => void;
             onBackdropClicked: () => void;
@@ -139,9 +127,11 @@ declare function __VLS_template(): {
             $slots: {
                 default?(_: {
                     close: () => void;
+                    onBackdropClicked: () => void;
                 }): any;
             };
         }) | null;
+        dialogContent: HTMLDivElement;
     };
     rootEl: any;
 };
@@ -158,11 +148,10 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
     "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
 }>, {
     title: string;
-    width: string;
     persistent: boolean;
     noClose: boolean;
     maxWidth: string;
-    maxHeight: string;
+    minWidth: string;
     scrollable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/components/MazDialog.mjs

@@ -1,4 +1,4 @@
-import { M as f } from "./chunks/MazDialog-C3h6Ydey.mjs";
+import { M as f } from "./chunks/MazDialog-Ca3jJ12T.mjs";
 export {
   f as default
 };

package/components/MazDialogPromise.d.ts

@@ -1,5 +1,5 @@
 import type { DialogCustomButton, DialogData } from './MazDialogPromise/useMazDialogPromise';
-import { type Props as MazDialogProps } from './MazDialog.vue';
+import { type MazDialogProps } from './MazDialog.vue';
 export interface MazDialogPromiseProps {
     /** Dialog Data - @type DialogData */
     data?: DialogData;
@@ -13,12 +13,12 @@ export interface MazDialogPromiseProps {
 export type Props = MazDialogPromiseProps & MazDialogProps & DialogData;
 export { useMazDialogPromise } from './MazDialogPromise/useMazDialogPromise';
 export type { ActionButton, DialogButton, DialogCustomButton, DialogData, DialogState, PromiseButton } from './MazDialogPromise/useMazDialogPromise';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<MazDialogPromiseProps & import("./MazDialog.vue").InternalProps & import("./MazBackdrop.vue").Props & DialogData, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<MazDialogPromiseProps & import("./MazDialog.vue").InternalProps & import("./MazBackdrop.vue").MazBackdropProps & DialogData, {
     close: () => any;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (value: void) => any;
     open: (value: void) => any;
-}, string, import("vue").PublicProps, Readonly<MazDialogPromiseProps & import("./MazDialog.vue").InternalProps & import("./MazBackdrop.vue").Props & DialogData> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<MazDialogPromiseProps & import("./MazDialog.vue").InternalProps & import("./MazBackdrop.vue").MazBackdropProps & DialogData> & Readonly<{
     onClose?: ((value?: void | undefined) => any) | undefined;
     onOpen?: ((value?: void | undefined) => any) | undefined;
 }>, {

package/components/MazDialogPromise.mjs

@@ -1,4 +1,4 @@
-import { a as o, u as s } from "./chunks/MazDialogPromise-BZm1F0X2.mjs";
+import { a as o, u as s } from "./chunks/MazDialogPromise-DOnmLhui.mjs";
 export {
   o as default,
   s as useMazDialogPromise

package/components/MazDrawer.d.ts

@@ -1,7 +1,10 @@
-export interface Props {
+export interface MazDrawerProps {
     /** The title of the drawer */
     title?: string;
-    /** The variant of the drawer */
+    /**
+     * The variant of the drawer
+     * @values 'right', 'top', 'left', 'bottom'
+     */
     variant?: 'right' | 'top' | 'left' | 'bottom';
     /** The size of the drawer */
     size?: string;
@@ -24,12 +27,12 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_component: import("vue").DefineComponent<MazDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;
     open: () => any;
     "update:model-value": (value: boolean) => any;
     "before-close": () => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<MazDrawerProps> & Readonly<{
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
     "onUpdate:model-value"?: ((value: boolean) => any) | undefined;