@pantograph/vue 0.32.0 → 0.32.2

package/dist/ComponentMap-C26nQ-bo.js

@@ -0,0 +1 @@
+"use strict";const o=["Accordion","AccordionItem","ActionButton","Alert","Avatar","AvatarGroup","Badge","Breadcrumb","Button","ButtonGroup","Card","Checkbox","CheckboxGroup","Chip","ChipGroup","ColorPicker","ColorSwatch","ColorSwatchGroup","ColorTrigger","Combobox","ComboboxInput","Comment","CommentAction","CommentReaction","CommentMention","CommentEditor","CommentReactionListItem","CommentTrigger","ConfigProvider","DataTable","Dialog","DialogTitle","Divider","Drawer","DrawerTitle","DropZone","Empty","FloatButton","Form","FormItem","FormValidation","GOPicker","GraphicalObject","GraphicalObjectGroup","HoverCard","Icon","IconButton","Image","IndentLevel","Indicator","Input","InputNumber","Kbd","Label","Link","Menu","MenuItem","Modal","ModalTitle","Pagination","Popover","Progress","RadioGroup","RadioGroupItem","ScrollContainer","Segmented","Select","SelectOption","SelectLabel","Shortcut","Skeleton","Spinner","Steps","Step","SubMenu","Switch","Table","Th","Td","Tr","TBody","THead","TFoot","Tabs","TabList","TabTrigger","TabContent","Textarea","Tooltip","Tree","TreeNode","Upload","UploadList","UploadTrigger"];exports.components=o;

package/dist/{ComponentMap-AamRhavY.js → ComponentMap-Ccj1lnGk.js}

@@ -30,8 +30,10 @@ const o = [
   "ConfigProvider",
   "DataTable",
   "Dialog",
+  "DialogTitle",
   "Divider",
   "Drawer",
+  "DrawerTitle",
   "DropZone",
   "Empty",
   "FloatButton",
@@ -55,6 +57,7 @@ const o = [
   "Menu",
   "MenuItem",
   "Modal",
+  "ModalTitle",
   "Pagination",
   "Popover",
   "Progress",

package/dist/ComponentMap.d.ts

@@ -1,3 +1,3 @@
-export declare const components: readonly ["Accordion", "AccordionItem", "ActionButton", "Alert", "Avatar", "AvatarGroup", "Badge", "Breadcrumb", "Button", "ButtonGroup", "Card", "Checkbox", "CheckboxGroup", "Chip", "ChipGroup", "ColorPicker", "ColorSwatch", "ColorSwatchGroup", "ColorTrigger", "Combobox", "ComboboxInput", "Comment", "CommentAction", "CommentReaction", "CommentMention", "CommentEditor", "CommentReactionListItem", "CommentTrigger", "ConfigProvider", "DataTable", "Dialog", "Divider", "Drawer", "DropZone", "Empty", "FloatButton", "Form", "FormItem", "FormValidation", "GOPicker", "GraphicalObject", "GraphicalObjectGroup", "HoverCard", "Icon", "IconButton", "Image", "IndentLevel", "Indicator", "Input", "InputNumber", "Kbd", "Label", "Link", "Menu", "MenuItem", "Modal", "Pagination", "Popover", "Progress", "RadioGroup", "RadioGroupItem", "ScrollContainer", "Segmented", "Select", "SelectOption", "SelectLabel", "Shortcut", "Skeleton", "Spinner", "Steps", "Step", "SubMenu", "Switch", "Table", "Th", "Td", "Tr", "TBody", "THead", "TFoot", "Tabs", "TabList", "TabTrigger", "TabContent", "Textarea", "Tooltip", "Tree", "TreeNode", "Upload", "UploadList", "UploadTrigger"];
+export declare const components: readonly ["Accordion", "AccordionItem", "ActionButton", "Alert", "Avatar", "AvatarGroup", "Badge", "Breadcrumb", "Button", "ButtonGroup", "Card", "Checkbox", "CheckboxGroup", "Chip", "ChipGroup", "ColorPicker", "ColorSwatch", "ColorSwatchGroup", "ColorTrigger", "Combobox", "ComboboxInput", "Comment", "CommentAction", "CommentReaction", "CommentMention", "CommentEditor", "CommentReactionListItem", "CommentTrigger", "ConfigProvider", "DataTable", "Dialog", "DialogTitle", "Divider", "Drawer", "DrawerTitle", "DropZone", "Empty", "FloatButton", "Form", "FormItem", "FormValidation", "GOPicker", "GraphicalObject", "GraphicalObjectGroup", "HoverCard", "Icon", "IconButton", "Image", "IndentLevel", "Indicator", "Input", "InputNumber", "Kbd", "Label", "Link", "Menu", "MenuItem", "Modal", "ModalTitle", "Pagination", "Popover", "Progress", "RadioGroup", "RadioGroupItem", "ScrollContainer", "Segmented", "Select", "SelectOption", "SelectLabel", "Shortcut", "Skeleton", "Spinner", "Steps", "Step", "SubMenu", "Switch", "Table", "Th", "Td", "Tr", "TBody", "THead", "TFoot", "Tabs", "TabList", "TabTrigger", "TabContent", "Textarea", "Tooltip", "Tree", "TreeNode", "Upload", "UploadList", "UploadTrigger"];
 export default components;
 export type Components = (typeof components)[number];

package/dist/Dialog/Dialog.d.ts

@@ -23,6 +23,16 @@ export declare const DIALOG_DEFAULT_PROPS: {
     readonly type: "modal";
     readonly side: "end";
     readonly zIndex: 1000;
+    readonly asDrawerInMobile: false;
+    readonly mobileDrawerMinHeight: undefined;
+    readonly mobileDrawerHeight: undefined;
+    readonly mobileDrawerMaxHeight: undefined;
+    readonly noBody: false;
+    readonly headerCls: undefined;
+    readonly bodyCls: undefined;
+    readonly footerCls: undefined;
+    readonly swipeTriggerCls: undefined;
+    readonly swipeTrigger: undefined;
     readonly okProps: () => {
         readonly text: "Submit";
     };
@@ -147,6 +157,12 @@ export interface DialogSlots {
     cancelPostIcon?: (data?: object) => never;
 }
 export interface DialogProps extends Omit<DialogPortalProps, 'to'>, Omit<DialogContentProps, 'as' | 'asChild' | 'onCloseAutoFocus'> {
+    /**
+     * Custom styles for the dialog wrapper element
+     * @example
+     * <Dialog :wrapperStyle="{ backgroundColor: 'red' }" />
+     */
+    wrapperStyle?: StyleValue;
     /**
      * Custom styles for the dialog root element
      * @example
@@ -509,6 +525,7 @@ export type DialogEmits = DialogRootEmits & Pick<DialogContentEmits, 'pointerDow
      */
     close: [];
 };
+export declare const dialogPrefix: string;
 declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<DialogProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     cancel: (event: Event) => any;
     close: () => any;
@@ -532,14 +549,18 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Di
     mask: boolean;
     type: DialogType;
     width: DialogSize | number | string;
+    headerCls: string | number | bigint | boolean | import('clsx').ClassArray | import('clsx').ClassDictionary | null;
     open: boolean;
     openAutoFocus: boolean;
     side: DialogDrawerSide;
     zIndex: number;
     screen: boolean;
     closeable: boolean;
+    bodyCls: string | number | bigint | boolean | import('clsx').ClassArray | import('clsx').ClassDictionary | null;
     keyboard: boolean;
+    footerCls: string | number | bigint | boolean | import('clsx').ClassArray | import('clsx').ClassDictionary | null;
     trapFocus: boolean;
+    noBody: boolean;
     closeOnClickOutside: boolean;
     canFullScreen: boolean;
     fullScreen: boolean;
@@ -554,6 +575,12 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Di
     };
     maskClosable: boolean;
     animated: boolean | string;
+    asDrawerInMobile: boolean;
+    mobileDrawerMinHeight: number | string;
+    mobileDrawerHeight: number | string;
+    mobileDrawerMaxHeight: number | string;
+    swipeTriggerCls: string | number | bigint | boolean | import('clsx').ClassArray | import('clsx').ClassDictionary | null;
+    swipeTrigger: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     swipeTrigger: HTMLDivElement;
 }, any>, Readonly<DialogSlots> & DialogSlots>;

package/dist/Dialog/DialogTitle.d.ts

@@ -0,0 +1,23 @@
+import { ClassValue } from 'clsx';
+export interface DialogTitleSlots {
+    default?: (params?: object) => never;
+}
+export interface DialogTitleProps {
+    class?: ClassValue;
+    title?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<DialogTitleSlots> & DialogTitleSlots;
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<DialogTitleProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<DialogTitleProps> & Readonly<{}>, {}, {}, {}, {}, 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 & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Dialog/index.d.ts

@@ -1,3 +1,5 @@
 export declare const DialogPlugin: import('vue').Plugin;
+export declare const DialogTitlePlugin: import('vue').Plugin;
 export { default as Dialog, type DialogProps, type DialogSlots, type DialogEmits, DIALOG_DEFAULT_PROPS, default, } from './Dialog';
+export { default as DialogTitle, type DialogTitleProps, type DialogTitleSlots, } from './DialogTitle';
 export * from './Dialog.model';

package/dist/Dialog/index.js

@@ -1,14 +1,490 @@
-import { _ as o } from "../Dialog.vue_vue_type_style_index_0_lang-CGyB8Lwq.js";
-import { D, a as g, b as n, c as p } from "../Dialog.vue_vue_type_style_index_0_lang-CGyB8Lwq.js";
-import { installComponent as a } from "@pantograph/utils-vue";
-import { getComponentName as i } from "@pantograph/utils";
-const r = a(o, i("Dialog"));
+import { defineComponent as oe, useSlots as ne, createBlock as N, openBlock as P, h as s, mergeDefaults as Te, useAttrs as Fe, ref as Y, computed as k, unref as r, withCtx as O, createVNode as w, normalizeProps as Me, guardReactiveProps as He, Transition as Ne, createCommentVNode as I, mergeProps as je, withDirectives as Ie, createElementVNode as ze, normalizeStyle as q, normalizeClass as M, createElementBlock as Ee, vShow as Ve } from "vue";
+import { cva as J } from "class-variance-authority";
+import { DialogTitle as We, DialogRoot as Re, DialogPortal as Le, Primitive as Ue, DialogContent as $e, DialogTrigger as Ke, DialogDescription as Ge } from "reka-ui";
+import { isEmptyElement as f, useVModel as Q, installComponent as re } from "@pantograph/utils-vue";
+import { getComponentOptions as ie, normCls as u, getBemElement as p, getBemBlock as Ye, generateVariantClassList as C, getValidNumber as qe, getPxSize as y, getBemModifier as H, getStyleObject as z, getComponentName as ae } from "@pantograph/utils";
+import "clsx";
+import { g as Je } from "../utils-DeYtvqtV.js";
+import { _ as X } from "../IconButton.vue_vue_type_script_setup_true_lang-BWakPloG.js";
+import "../Blanket/index.js";
+import { isString as Z, isFunction as Qe } from "es-toolkit";
+import { _ } from "../index-BQAmXDSs.js";
+import { usePointerSwipe as Xe } from "@vueuse/core";
+import { _ as ee } from "../Button.vue_vue_type_script_setup_true_lang-Be-JRcnm.js";
+import { _ as Ze } from "../Blanket.vue_vue_type_style_index_0_lang-DSXcWX6s.js";
+const le = /* @__PURE__ */ oe({
+  ...ie("DialogTitle"),
+  __name: "DialogTitle",
+  props: {
+    class: { type: [Array, Object, String, Number, null, Boolean] },
+    title: {}
+  },
+  setup(i) {
+    const S = ne(), c = i, e = () => {
+      var v;
+      const n = (v = S.default) == null ? void 0 : v.call(S, {}), D = !f(n);
+      if (D || c.title)
+        return s(
+          We,
+          { class: u(p(a, "title"), c.class) },
+          () => D ? n : c.title
+        );
+    };
+    return (n, D) => (P(), N(e));
+  }
+}), te = ["sm", "md", "lg"], _e = ["modal", "drawer"], et = ["start", "top", "end", "bottom"], tt = ["data-screen"], se = {
+  text: "Submit"
+}, ce = {
+  text: "Cancel",
+  type: "ghost",
+  color: "neutral"
+}, ot = {
+  keyboard: !0,
+  openAutoFocus: !1,
+  trapFocus: !1,
+  closeOnClickOutside: !1,
+  footer: void 0,
+  open: !1,
+  canFullScreen: !0,
+  animated: !0,
+  fullScreen: !1,
+  width: "md",
+  frameless: !1,
+  closeable: !0,
+  mask: !0,
+  maskClosable: !0,
+  screen: !0,
+  type: "modal",
+  side: "end",
+  zIndex: 1e3,
+  asDrawerInMobile: !1,
+  mobileDrawerMinHeight: void 0,
+  mobileDrawerHeight: void 0,
+  mobileDrawerMaxHeight: void 0,
+  noBody: !1,
+  headerCls: void 0,
+  bodyCls: void 0,
+  footerCls: void 0,
+  swipeTriggerCls: void 0,
+  swipeTrigger: void 0,
+  okProps: () => se,
+  cancelProps: () => ce
+}, a = Ye("dialog"), nt = /* @__PURE__ */ oe({
+  ...ie("Dialog", !1),
+  __name: "Dialog",
+  props: /* @__PURE__ */ Te({
+    wrapperStyle: { type: [Boolean, null, String, Object, Array] },
+    style: { type: [Boolean, null, String, Object, Array] },
+    contentStyle: { type: [Boolean, null, String, Object, Array] },
+    noBody: { type: Boolean },
+    keyboard: { type: Boolean },
+    openAutoFocus: { type: Boolean },
+    trapFocus: { type: Boolean },
+    closeOnClickOutside: { type: Boolean },
+    open: { type: Boolean },
+    canFullScreen: { type: Boolean },
+    fullScreen: { type: Boolean },
+    minWidth: {},
+    width: {},
+    maxWidth: {},
+    minHeight: {},
+    height: {},
+    maxHeight: {},
+    title: {},
+    description: {},
+    frameless: { type: Boolean },
+    footer: { type: [Boolean, null] },
+    closeable: { type: Boolean },
+    zIndex: {},
+    okProps: {},
+    cancelProps: {},
+    mask: { type: Boolean },
+    maskClosable: { type: Boolean },
+    beforeClose: { type: Function },
+    beforeCloseDebugger: { type: Boolean },
+    to: { type: [String, Function] },
+    animated: { type: [Boolean, String] },
+    type: {},
+    asDrawerInMobile: { type: Boolean },
+    mobileDrawerMinHeight: {},
+    mobileDrawerHeight: {},
+    mobileDrawerMaxHeight: {},
+    side: {},
+    wrapperCls: { type: [Array, Object, String, Number, null, Boolean] },
+    class: { type: [Array, Object, String, Number, null, Boolean] },
+    blanketCls: { type: [Array, Object, String, Number, null, Boolean] },
+    contentCls: { type: [Array, Object, String, Number, null, Boolean] },
+    headerCls: { type: [Array, Object, String, Number, null, Boolean] },
+    titleWrapperCls: { type: [Array, Object, String, Number, null, Boolean] },
+    titleCls: { type: [Array, Object, String, Number, null, Boolean] },
+    descriptionCls: { type: [Array, Object, String, Number, null, Boolean] },
+    actionsCls: { type: [Array, Object, String, Number, null, Boolean] },
+    bodyCls: { type: [Array, Object, String, Number, null, Boolean] },
+    footerCls: { type: [Array, Object, String, Number, null, Boolean] },
+    swipeTriggerCls: { type: [Array, Object, String, Number, null, Boolean] },
+    screen: { type: Boolean },
+    swipeTrigger: { type: Boolean },
+    disabled: { type: Boolean },
+    defer: { type: Boolean },
+    forceMount: { type: Boolean },
+    disableOutsidePointerEvents: { type: Boolean }
+  }, ot),
+  emits: ["update:open", "pointerDownOutside", "escapeKeyDown", "focusOutside", "update:fullScreen", "ok", "cancel", "close"],
+  setup(i, { emit: S }) {
+    const c = S, e = i, n = ne(), D = Fe(), v = Y(), j = Je({ triggerRef: v, props: e }), A = Q(e, "open", c, {
+      passive: e.open === void 0,
+      onChange(t) {
+        t || c("close");
+      }
+    }), x = async (t) => {
+      if (!t && Qe(e.beforeClose))
+        try {
+          const o = await e.beforeClose();
+          if (e.beforeCloseDebugger && console.info("beforeClose response", o), !o)
+            return;
+        } catch (o) {
+          e.beforeCloseDebugger && console.error("beforeClose error", o);
+          return;
+        }
+      A.value = t;
+    }, b = Q(e, "fullScreen", c, {}), ue = () => {
+      e.canFullScreen && (b.value = !b.value);
+    }, de = (t) => {
+      c("ok", t);
+    }, pe = (t) => {
+      c("cancel", t);
+    }, me = () => {
+      e.maskClosable && x(!1);
+    }, fe = J(a, {
+      variants: {
+        frameless: C("frameless", a),
+        fullscreen: C("fullscreen", a),
+        width: C([...te, "custom"], a),
+        type: C(_e, a),
+        side: C(et, a)
+      }
+    }), E = p(a, "content"), ge = J(E, {
+      variants: {
+        swiping: C("swiping", E)
+      }
+    }), m = k(() => {
+      let t = qe(e.width);
+      return t !== void 0 ? t = `${t}px` : Z(e.width) && !te.includes(e.width) && (t = e.width), {
+        widthVariant: t ? "custom" : e.width,
+        minWidth: y(e.minWidth, !0),
+        width: t,
+        maxWidth: y(e.maxWidth, !0),
+        minHeight: y(e.minHeight, !0),
+        height: y(e.height, !0),
+        maxHeight: y(e.maxHeight, !0),
+        mobileDrawerMinHeight: y(e.mobileDrawerMinHeight, !0),
+        mobileDrawerHeight: y(e.mobileDrawerHeight, !0),
+        mobileDrawerMaxHeight: y(e.mobileDrawerMaxHeight, !0)
+      };
+    }), ye = () => {
+      var o;
+      const t = (o = n.trigger) == null ? void 0 : o.call(n, {});
+      if (!f(t))
+        return s(
+          Ke,
+          {
+            asChild: !0,
+            ref: v
+          },
+          () => t
+        );
+    }, be = () => {
+      var o;
+      const t = (o = n.beforeTitle) == null ? void 0 : o.call(n, {});
+      if (!f(t)) return t;
+    }, he = () => {
+      const t = () => {
+        var g;
+        const d = (g = n.beforeActions) == null ? void 0 : g.call(n, {});
+        if (!f(d)) return d;
+      }, o = () => {
+        const d = [];
+        if (e.canFullScreen && d.push(
+          s(X, {
+            icon: b.value ? "tabler:arrows-minimize" : "tabler:arrows-maximize",
+            type: "ghost",
+            color: "neutral",
+            onClick: ue
+          })
+        ), e.closeable && d.push(
+          s(X, {
+            icon: "tabler:x",
+            type: "ghost",
+            color: "neutral",
+            onClick: () => x(!1)
+          })
+        ), d.length) return s(_, { gap: "sm" }, () => d);
+      }, l = t(), h = o();
+      if (l || h)
+        return s("div", { class: u(p(a, "actions"), e.actionsCls) }, [
+          l,
+          h
+        ]);
+    }, we = () => {
+      var l;
+      const t = (l = n.title) == null ? void 0 : l.call(n, {}), o = !f(t);
+      if (e.title || o)
+        return s(le, { class: e.titleCls }, () => o ? t : e.title);
+    }, Ce = () => {
+      var l;
+      const t = (l = n.description) == null ? void 0 : l.call(n, {}), o = !f(t);
+      if (e.description || o)
+        return s(
+          Ge,
+          {
+            class: u(
+              p(a, "description"),
+              "paragraph",
+              e.descriptionCls
+            )
+          },
+          () => o ? t : e.description
+        );
+    }, Se = () => {
+      const t = he(), o = be();
+      if (e.frameless) return t;
+      const l = () => {
+        const g = we();
+        if (g || t || o)
+          return s(
+            "div",
+            { class: u(p(a, "title_wrapper"), e.titleWrapperCls) },
+            [o, g, t]
+          );
+      }, h = Ce(), d = l();
+      if (d || h)
+        return s(
+          "div",
+          {
+            class: u(p(a, "header"), e.headerCls)
+          },
+          [d, h]
+        );
+    }, De = () => {
+      var U, $;
+      const t = (U = n.footer) == null ? void 0 : U.call(n, {}), o = !f(t), l = ($ = n.beforeFooterActions) == null ? void 0 : $.call(n, {}), h = !f(l);
+      if (e.footer !== void 0 && !e.footer) return null;
+      const g = o ? t : (() => {
+        var K, G;
+        const T = [];
+        (K = e.cancelProps) != null && K.hide || T.push(
+          s(
+            ee,
+            {
+              ...ce,
+              ...e.cancelProps ?? {},
+              onClick: pe
+            },
+            {
+              default: n.cancel,
+              preIcon: n.cancelPreIcon,
+              postIcon: n.cancelPostIcon
+            }
+          )
+        ), (G = e.okProps) != null && G.hide || T.push(
+          s(
+            ee,
+            {
+              ...se,
+              ...e.okProps ?? {},
+              onClick: de
+            },
+            {
+              default: n.ok,
+              preIcon: n.okPreIcon,
+              postIcon: n.okPostIcon
+            }
+          )
+        );
+        const F = [];
+        if (h && F.push(l), T.length && F.push(s(_, { gap: "sm" }, () => T)), F.length) return F;
+      })();
+      if (g)
+        return s(
+          "div",
+          { class: u(p(a, "footer"), e.footerCls) },
+          g
+        );
+    }, ve = () => {
+      var o;
+      const t = (o = n.default) == null ? void 0 : o.call(n, {});
+      if (!f(t))
+        return e.noBody ? t : s(
+          "div",
+          {
+            class: u(p(a, "body"), e.bodyCls)
+          },
+          t
+        );
+    }, Be = k(() => {
+      if (e.animated && Z(e.animated)) return e.animated;
+      if (e.type === "modal") return H(a, "fade");
+      switch (e.side) {
+        case "start":
+        case "end":
+          return H(a, "side-x");
+        case "bottom":
+        case "top":
+          return H(a, "side-y");
+      }
+    }), ke = k(() => {
+      switch (e.side) {
+        case "start":
+        case "top":
+          return -1;
+        case "bottom":
+        case "end":
+          return 1;
+      }
+    }), B = k(
+      () => !b.value && m.value.widthVariant !== "custom" && !(e.type === "drawer" && ["top", "bottom"].includes(e.side))
+    ), V = Y(), { isSwiping: W, direction: R, distanceY: L } = Xe(V, {
+      disableTextSelect: !0,
+      threshold: 50,
+      onSwipeEnd() {
+        e.type === "drawer" && e.closeable && (e.side === "bottom" && R.value === "down" || e.side === "top" && R.value === "up") && x(!1);
+      }
+    }), Oe = k(() => {
+      if (!W.value || e.type !== "drawer" || !["top", "bottom"].includes(e.side))
+        return;
+      const t = Math.min(Math.abs(L.value) / 100, 1);
+      let o = -L.value * t * 0.6;
+      return e.side === "top" ? o = Math.min(0, o) : o = Math.max(0, o), o;
+    }), Pe = (t) => {
+      (!e.keyboard || !e.open) && (t.preventDefault(), t.stopPropagation()), e.open && c("escapeKeyDown", t);
+    }, Ae = (t) => {
+      e.openAutoFocus || (t.preventDefault(), t.stopPropagation());
+    }, xe = (t) => {
+      (!e.closeOnClickOutside || !e.open) && (t.preventDefault(), t.stopPropagation());
+    };
+    return (t, o) => (P(), N(r(Re), {
+      open: r(A),
+      "onUpdate:open": x,
+      modal: i.trapFocus
+    }, {
+      default: O(() => [
+        w(ye),
+        w(r(Le), Me(He(r(j))), {
+          default: O(() => [
+            w(Ne, {
+              name: Be.value,
+              css: !!i.animated,
+              duration: i.type === "drawer" ? 250 : 200
+            }, {
+              default: O(() => [
+                r(j).forceMount || r(A) ? (P(), N(r(Ue), je({
+                  "as-child": !B.value || !i.screen,
+                  key: String(!B.value || !i.screen),
+                  class: {
+                    [r(u)("pc_grid", r(p)(r(a), "wrapper"), i.wrapperCls)]: B.value && i.screen,
+                    [r(H)(r(a), "as-drawer-in-mobile")]: e.type === "modal" && i.asDrawerInMobile
+                  }
+                }, r(D), {
+                  style: {
+                    zIndex: i.zIndex,
+                    "--ptc-dialog-transform": i.fullScreen || i.type === "modal" ? "20px" : "100%",
+                    "--ptc-dialog-transform-ratio": ke.value,
+                    ...r(z)(B.value && i.screen ? i.wrapperStyle : {})
+                  }
+                }), {
+                  default: O(() => [
+                    Ie(ze("div", {
+                      "data-screen": i.screen ? "" : void 0,
+                      class: M(
+                        r(u)(
+                          {
+                            pc_grid__container: B.value
+                          },
+                          r(fe)({
+                            frameless: i.frameless,
+                            fullscreen: r(b),
+                            width: m.value.widthVariant,
+                            type: i.type,
+                            side: i.side
+                          }),
+                          e.class
+                        )
+                      ),
+                      style: q({
+                        "--ptc-dialog-w": m.value.width,
+                        "--ptc-dialog-min-h": m.value.minHeight,
+                        "--ptc-dialog-h": m.value.height,
+                        "--ptc-dialog-max-h": m.value.maxHeight,
+                        "--ptc-dialog-mobile-drawer-min-h": m.value.mobileDrawerMinHeight,
+                        "--ptc-dialog-mobile-drawer-h": m.value.mobileDrawerHeight,
+                        "--ptc-dialog-mobile-drawer-max-h": m.value.mobileDrawerMaxHeight,
+                        ...r(z)(i.style)
+                      })
+                    }, [
+                      !r(b) && i.mask ? (P(), N(r(Ze), {
+                        key: 0,
+                        onClick: me,
+                        class: M(r(u)(r(p)(r(a), "blanket"), i.blanketCls)),
+                        screen: !1
+                      }, null, 8, ["class"])) : I("", !0),
+                      w(r($e), {
+                        forceMount: r(j).forceMount,
+                        onInteractOutside: xe,
+                        onOpenAutoFocus: Ae,
+                        onEscapeKeyDown: Pe,
+                        onPointerDownOutside: o[0] || (o[0] = (l) => c("pointerDownOutside", l)),
+                        onFocusOutside: o[1] || (o[1] = (l) => c("focusOutside", l)),
+                        class: M(
+                          r(u)(
+                            r(ge)({
+                              swiping: r(W)
+                            }),
+                            i.contentCls
+                          )
+                        ),
+                        style: q({
+                          "--ptc-dialog-swipe-transform": Oe.value,
+                          ...r(z)(i.contentStyle)
+                        })
+                      }, {
+                        default: O(() => [
+                          w(Se),
+                          w(ve),
+                          w(De),
+                          e.swipeTrigger && i.type === "drawer" && ["top", "bottom"].includes(e.side) && !r(b) ? (P(), Ee("div", {
+                            key: 0,
+                            ref_key: "swipeTrigger",
+                            ref: V,
+                            class: M(r(u)(r(p)(r(a), "swipe_trigger"), i.swipeTriggerCls))
+                          }, null, 2)) : I("", !0)
+                        ]),
+                        _: 1
+                      }, 8, ["forceMount", "class", "style"])
+                    ], 14, tt), [
+                      [Ve, r(A)]
+                    ])
+                  ]),
+                  _: 1
+                }, 16, ["as-child", "class", "style"])) : I("", !0)
+              ]),
+              _: 1
+            }, 8, ["name", "css", "duration"])
+          ]),
+          _: 1
+        }, 16)
+      ]),
+      _: 1
+    }, 8, ["open", "modal"]));
+  }
+}), ht = re(nt, ae("Dialog")), wt = re(le, ae("DialogTitle"));
 export {
-  D as DIALOG_DEFAULT_PROPS,
-  o as Dialog,
-  g as DialogDrawerSides,
-  r as DialogPlugin,
-  n as DialogSizes,
-  p as DialogTypes,
-  o as default
+  ot as DIALOG_DEFAULT_PROPS,
+  nt as Dialog,
+  et as DialogDrawerSides,
+  ht as DialogPlugin,
+  te as DialogSizes,
+  le as DialogTitle,
+  wt as DialogTitlePlugin,
+  _e as DialogTypes,
+  nt as default
 };

package/dist/Dialog/index.umd.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../Dialog.vue_vue_type_style_index_0_lang-C1VasmFh.js"),i=require("@pantograph/utils-vue"),l=require("@pantograph/utils"),o=i.installComponent(e._sfc_main,l.getComponentName("Dialog"));exports.DIALOG_DEFAULT_PROPS=e.DIALOG_DEFAULT_PROPS;exports.Dialog=e._sfc_main;exports.DialogDrawerSides=e.DialogDrawerSides;exports.DialogSizes=e.DialogSizes;exports.DialogTypes=e.DialogTypes;exports.default=e._sfc_main;exports.DialogPlugin=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),I=require("class-variance-authority"),y=require("reka-ui"),c=require("@pantograph/utils-vue"),n=require("@pantograph/utils");require("clsx");const ge=require("../utils-V8eBZdnq.js"),_=require("../IconButton.vue_vue_type_script_setup_true_lang-D3l2EAmu.js");require("../Blanket/index.umd.cjs");const P=require("es-toolkit"),q=require("../index-BOecemV4.js"),fe=require("@vueuse/core"),L=require("../Button.vue_vue_type_script_setup_true_lang-DuzKM6AI.js"),ye=require("../Blanket.vue_vue_type_style_index_0_lang-WQSz_s3C.js"),x=e.defineComponent({...n.getComponentOptions("DialogTitle"),__name:"DialogTitle",props:{class:{type:[Array,Object,String,Number,null,Boolean]},title:{}},setup(l){const h=e.useSlots(),u=l,t=()=>{var C;const i=(C=h.default)==null?void 0:C.call(h,{}),b=!c.isEmptyElement(i);if(b||u.title)return e.h(y.DialogTitle,{class:n.normCls(n.getBemElement(a,"title"),u.class)},()=>b?i:u.title)};return(i,b)=>(e.openBlock(),e.createBlock(t))}}),O=["sm","md","lg"],W=["modal","drawer"],R=["start","top","end","bottom"],he=["data-screen"],U={text:"Submit"},G={text:"Cancel",type:"ghost",color:"neutral"},K={keyboard:!0,openAutoFocus:!1,trapFocus:!1,closeOnClickOutside:!1,footer:void 0,open:!1,canFullScreen:!0,animated:!0,fullScreen:!1,width:"md",frameless:!1,closeable:!0,mask:!0,maskClosable:!0,screen:!0,type:"modal",side:"end",zIndex:1e3,asDrawerInMobile:!1,mobileDrawerMinHeight:void 0,mobileDrawerHeight:void 0,mobileDrawerMaxHeight:void 0,noBody:!1,headerCls:void 0,bodyCls:void 0,footerCls:void 0,swipeTriggerCls:void 0,swipeTrigger:void 0,okProps:()=>U,cancelProps:()=>G},a=n.getBemBlock("dialog"),E=e.defineComponent({...n.getComponentOptions("Dialog",!1),__name:"Dialog",props:e.mergeDefaults({wrapperStyle:{type:[Boolean,null,String,Object,Array]},style:{type:[Boolean,null,String,Object,Array]},contentStyle:{type:[Boolean,null,String,Object,Array]},noBody:{type:Boolean},keyboard:{type:Boolean},openAutoFocus:{type:Boolean},trapFocus:{type:Boolean},closeOnClickOutside:{type:Boolean},open:{type:Boolean},canFullScreen:{type:Boolean},fullScreen:{type:Boolean},minWidth:{},width:{},maxWidth:{},minHeight:{},height:{},maxHeight:{},title:{},description:{},frameless:{type:Boolean},footer:{type:[Boolean,null]},closeable:{type:Boolean},zIndex:{},okProps:{},cancelProps:{},mask:{type:Boolean},maskClosable:{type:Boolean},beforeClose:{type:Function},beforeCloseDebugger:{type:Boolean},to:{type:[String,Function]},animated:{type:[Boolean,String]},type:{},asDrawerInMobile:{type:Boolean},mobileDrawerMinHeight:{},mobileDrawerHeight:{},mobileDrawerMaxHeight:{},side:{},wrapperCls:{type:[Array,Object,String,Number,null,Boolean]},class:{type:[Array,Object,String,Number,null,Boolean]},blanketCls:{type:[Array,Object,String,Number,null,Boolean]},contentCls:{type:[Array,Object,String,Number,null,Boolean]},headerCls:{type:[Array,Object,String,Number,null,Boolean]},titleWrapperCls:{type:[Array,Object,String,Number,null,Boolean]},titleCls:{type:[Array,Object,String,Number,null,Boolean]},descriptionCls:{type:[Array,Object,String,Number,null,Boolean]},actionsCls:{type:[Array,Object,String,Number,null,Boolean]},bodyCls:{type:[Array,Object,String,Number,null,Boolean]},footerCls:{type:[Array,Object,String,Number,null,Boolean]},swipeTriggerCls:{type:[Array,Object,String,Number,null,Boolean]},screen:{type:Boolean},swipeTrigger:{type:Boolean},disabled:{type:Boolean},defer:{type:Boolean},forceMount:{type:Boolean},disableOutsidePointerEvents:{type:Boolean}},K),emits:["update:open","pointerDownOutside","escapeKeyDown","focusOutside","update:fullScreen","ok","cancel","close"],setup(l,{emit:h}){const u=h,t=l,i=e.useSlots(),b=e.useAttrs(),C=e.ref(),k=ge.getPopoverPortalProps({triggerRef:C,props:t}),S=c.useVModel(t,"open",u,{passive:t.open===void 0,onChange(o){o||u("close")}}),B=async o=>{if(!o&&P.isFunction(t.beforeClose))try{const r=await t.beforeClose();if(t.beforeCloseDebugger&&console.info("beforeClose response",r),!r)return}catch(r){t.beforeCloseDebugger&&console.error("beforeClose error",r);return}S.value=o},g=c.useVModel(t,"fullScreen",u,{}),$=()=>{t.canFullScreen&&(g.value=!g.value)},Y=o=>{u("ok",o)},J=o=>{u("cancel",o)},Q=()=>{t.maskClosable&&B(!1)},X=I.cva(a,{variants:{frameless:n.generateVariantClassList("frameless",a),fullscreen:n.generateVariantClassList("fullscreen",a),width:n.generateVariantClassList([...O,"custom"],a),type:n.generateVariantClassList(W,a),side:n.generateVariantClassList(R,a)}}),A=n.getBemElement(a,"content"),Z=I.cva(A,{variants:{swiping:n.generateVariantClassList("swiping",A)}}),m=e.computed(()=>{let o=n.getValidNumber(t.width);return o!==void 0?o=`${o}px`:P.isString(t.width)&&!O.includes(t.width)&&(o=t.width),{widthVariant:o?"custom":t.width,minWidth:n.getPxSize(t.minWidth,!0),width:o,maxWidth:n.getPxSize(t.maxWidth,!0),minHeight:n.getPxSize(t.minHeight,!0),height:n.getPxSize(t.height,!0),maxHeight:n.getPxSize(t.maxHeight,!0),mobileDrawerMinHeight:n.getPxSize(t.mobileDrawerMinHeight,!0),mobileDrawerHeight:n.getPxSize(t.mobileDrawerHeight,!0),mobileDrawerMaxHeight:n.getPxSize(t.mobileDrawerMaxHeight,!0)}}),ee=()=>{var r;const o=(r=i.trigger)==null?void 0:r.call(i,{});if(!c.isEmptyElement(o))return e.h(y.DialogTrigger,{asChild:!0,ref:C},()=>o)},te=()=>{var r;const o=(r=i.beforeTitle)==null?void 0:r.call(i,{});if(!c.isEmptyElement(o))return o},oe=()=>{const o=()=>{var p;const d=(p=i.beforeActions)==null?void 0:p.call(i,{});if(!c.isEmptyElement(d))return d},r=()=>{const d=[];if(t.canFullScreen&&d.push(e.h(_._sfc_main,{icon:g.value?"tabler:arrows-minimize":"tabler:arrows-maximize",type:"ghost",color:"neutral",onClick:$})),t.closeable&&d.push(e.h(_._sfc_main,{icon:"tabler:x",type:"ghost",color:"neutral",onClick:()=>B(!1)})),d.length)return e.h(q._sfc_main,{gap:"sm"},()=>d)},s=o(),f=r();if(s||f)return e.h("div",{class:n.normCls(n.getBemElement(a,"actions"),t.actionsCls)},[s,f])},ne=()=>{var s;const o=(s=i.title)==null?void 0:s.call(i,{}),r=!c.isEmptyElement(o);if(t.title||r)return e.h(x,{class:t.titleCls},()=>r?o:t.title)},re=()=>{var s;const o=(s=i.description)==null?void 0:s.call(i,{}),r=!c.isEmptyElement(o);if(t.description||r)return e.h(y.DialogDescription,{class:n.normCls(n.getBemElement(a,"description"),"paragraph",t.descriptionCls)},()=>r?o:t.description)},ie=()=>{const o=oe(),r=te();if(t.frameless)return o;const s=()=>{const p=ne();if(p||o||r)return e.h("div",{class:n.normCls(n.getBemElement(a,"title_wrapper"),t.titleWrapperCls)},[r,p,o])},f=re(),d=s();if(d||f)return e.h("div",{class:n.normCls(n.getBemElement(a,"header"),t.headerCls)},[d,f])},le=()=>{var V,z;const o=(V=i.footer)==null?void 0:V.call(i,{}),r=!c.isEmptyElement(o),s=(z=i.beforeFooterActions)==null?void 0:z.call(i,{}),f=!c.isEmptyElement(s);if(t.footer!==void 0&&!t.footer)return null;const p=r?o:(()=>{var H,j;const v=[];(H=t.cancelProps)!=null&&H.hide||v.push(e.h(L._sfc_main,{...G,...t.cancelProps??{},onClick:J},{default:i.cancel,preIcon:i.cancelPreIcon,postIcon:i.cancelPostIcon})),(j=t.okProps)!=null&&j.hide||v.push(e.h(L._sfc_main,{...U,...t.okProps??{},onClick:Y},{default:i.ok,preIcon:i.okPreIcon,postIcon:i.okPostIcon}));const D=[];if(f&&D.push(s),v.length&&D.push(e.h(q._sfc_main,{gap:"sm"},()=>v)),D.length)return D})();if(p)return e.h("div",{class:n.normCls(n.getBemElement(a,"footer"),t.footerCls)},p)},ae=()=>{var r;const o=(r=i.default)==null?void 0:r.call(i,{});if(!c.isEmptyElement(o))return t.noBody?o:e.h("div",{class:n.normCls(n.getBemElement(a,"body"),t.bodyCls)},o)},se=e.computed(()=>{if(t.animated&&P.isString(t.animated))return t.animated;if(t.type==="modal")return n.getBemModifier(a,"fade");switch(t.side){case"start":case"end":return n.getBemModifier(a,"side-x");case"bottom":case"top":return n.getBemModifier(a,"side-y")}}),ce=e.computed(()=>{switch(t.side){case"start":case"top":return-1;case"bottom":case"end":return 1}}),w=e.computed(()=>!g.value&&m.value.widthVariant!=="custom"&&!(t.type==="drawer"&&["top","bottom"].includes(t.side))),T=e.ref(),{isSwiping:M,direction:N,distanceY:F}=fe.usePointerSwipe(T,{disableTextSelect:!0,threshold:50,onSwipeEnd(){t.type==="drawer"&&t.closeable&&(t.side==="bottom"&&N.value==="down"||t.side==="top"&&N.value==="up")&&B(!1)}}),ue=e.computed(()=>{if(!M.value||t.type!=="drawer"||!["top","bottom"].includes(t.side))return;const o=Math.min(Math.abs(F.value)/100,1);let r=-F.value*o*.6;return t.side==="top"?r=Math.min(0,r):r=Math.max(0,r),r}),de=o=>{(!t.keyboard||!t.open)&&(o.preventDefault(),o.stopPropagation()),t.open&&u("escapeKeyDown",o)},me=o=>{t.openAutoFocus||(o.preventDefault(),o.stopPropagation())},pe=o=>{(!t.closeOnClickOutside||!t.open)&&(o.preventDefault(),o.stopPropagation())};return(o,r)=>(e.openBlock(),e.createBlock(e.unref(y.DialogRoot),{open:e.unref(S),"onUpdate:open":B,modal:l.trapFocus},{default:e.withCtx(()=>[e.createVNode(ee),e.createVNode(e.unref(y.DialogPortal),e.normalizeProps(e.guardReactiveProps(e.unref(k))),{default:e.withCtx(()=>[e.createVNode(e.Transition,{name:se.value,css:!!l.animated,duration:l.type==="drawer"?250:200},{default:e.withCtx(()=>[e.unref(k).forceMount||e.unref(S)?(e.openBlock(),e.createBlock(e.unref(y.Primitive),e.mergeProps({"as-child":!w.value||!l.screen,key:String(!w.value||!l.screen),class:{[e.unref(n.normCls)("pc_grid",e.unref(n.getBemElement)(e.unref(a),"wrapper"),l.wrapperCls)]:w.value&&l.screen,[e.unref(n.getBemModifier)(e.unref(a),"as-drawer-in-mobile")]:t.type==="modal"&&l.asDrawerInMobile}},e.unref(b),{style:{zIndex:l.zIndex,"--ptc-dialog-transform":l.fullScreen||l.type==="modal"?"20px":"100%","--ptc-dialog-transform-ratio":ce.value,...e.unref(n.getStyleObject)(w.value&&l.screen?l.wrapperStyle:{})}}),{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{"data-screen":l.screen?"":void 0,class:e.normalizeClass(e.unref(n.normCls)({pc_grid__container:w.value},e.unref(X)({frameless:l.frameless,fullscreen:e.unref(g),width:m.value.widthVariant,type:l.type,side:l.side}),t.class)),style:e.normalizeStyle({"--ptc-dialog-w":m.value.width,"--ptc-dialog-min-h":m.value.minHeight,"--ptc-dialog-h":m.value.height,"--ptc-dialog-max-h":m.value.maxHeight,"--ptc-dialog-mobile-drawer-min-h":m.value.mobileDrawerMinHeight,"--ptc-dialog-mobile-drawer-h":m.value.mobileDrawerHeight,"--ptc-dialog-mobile-drawer-max-h":m.value.mobileDrawerMaxHeight,...e.unref(n.getStyleObject)(l.style)})},[!e.unref(g)&&l.mask?(e.openBlock(),e.createBlock(e.unref(ye._sfc_main),{key:0,onClick:Q,class:e.normalizeClass(e.unref(n.normCls)(e.unref(n.getBemElement)(e.unref(a),"blanket"),l.blanketCls)),screen:!1},null,8,["class"])):e.createCommentVNode("",!0),e.createVNode(e.unref(y.DialogContent),{forceMount:e.unref(k).forceMount,onInteractOutside:pe,onOpenAutoFocus:me,onEscapeKeyDown:de,onPointerDownOutside:r[0]||(r[0]=s=>u("pointerDownOutside",s)),onFocusOutside:r[1]||(r[1]=s=>u("focusOutside",s)),class:e.normalizeClass(e.unref(n.normCls)(e.unref(Z)({swiping:e.unref(M)}),l.contentCls)),style:e.normalizeStyle({"--ptc-dialog-swipe-transform":ue.value,...e.unref(n.getStyleObject)(l.contentStyle)})},{default:e.withCtx(()=>[e.createVNode(ie),e.createVNode(ae),e.createVNode(le),t.swipeTrigger&&l.type==="drawer"&&["top","bottom"].includes(t.side)&&!e.unref(g)?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"swipeTrigger",ref:T,class:e.normalizeClass(e.unref(n.normCls)(e.unref(n.getBemElement)(e.unref(a),"swipe_trigger"),l.swipeTriggerCls))},null,2)):e.createCommentVNode("",!0)]),_:1},8,["forceMount","class","style"])],14,he),[[e.vShow,e.unref(S)]])]),_:1},16,["as-child","class","style"])):e.createCommentVNode("",!0)]),_:1},8,["name","css","duration"])]),_:1},16)]),_:1},8,["open","modal"]))}}),be=c.installComponent(E,n.getComponentName("Dialog")),Ce=c.installComponent(x,n.getComponentName("DialogTitle"));exports.DIALOG_DEFAULT_PROPS=K;exports.Dialog=E;exports.DialogDrawerSides=R;exports.DialogPlugin=be;exports.DialogSizes=O;exports.DialogTitle=x;exports.DialogTitlePlugin=Ce;exports.DialogTypes=W;exports.default=E;