tuikit-atomicx-vue3 3.4.2 → 3.5.0-beta.8

package/dist/baseComp/Modal/Modal.js

@@ -1,7 +1,415 @@
-import { defineComponent as c, createBlock as p, openBlock as u, unref as o, withCtx as a, createVNode as l, normalizeClass as i, renderSlot as m } from "vue";
-import { D as _, a as C, b as v, c as y } from "../../DialogPortal-CvJcEAsn.js";
-import { _ as O } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const D = /* @__PURE__ */ c({
+import { defineComponent as g, ref as E, toRefs as P, renderSlot as _, unref as t, onMounted as A, createBlock as v, openBlock as m, withCtx as f, createVNode as C, mergeProps as y, createCommentVNode as h, normalizeProps as $, guardReactiveProps as T, normalizeClass as R } from "vue";
+import { u as k, c as N, a as D, g as I, F as S, D as L, f as q, d as K, P as F, b as V, e as U, T as W } from "../../Teleport-D3gvcBbZ.js";
+import { u as w } from "../../useId-oQ5JZeuH.js";
+import { g as z } from "../../utils-DuzSgmS6.js";
+import { _ as G } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const [O, H] = N("DialogRoot");
+var j = /* @__PURE__ */ g({
+  inheritAttrs: !1,
+  __name: "DialogRoot",
+  props: {
+    open: {
+      type: Boolean,
+      required: !1,
+      default: void 0
+    },
+    defaultOpen: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    modal: {
+      type: Boolean,
+      required: !1,
+      default: !0
+    }
+  },
+  emits: ["update:open"],
+  setup(u, { emit: i }) {
+    const s = u, e = k(s, "open", i, {
+      defaultValue: s.defaultOpen,
+      passive: s.open === void 0
+    }), l = E(), p = E(), { modal: r } = P(s);
+    return H({
+      open: e,
+      modal: r,
+      openModal: () => {
+        e.value = !0;
+      },
+      onOpenChange: (n) => {
+        e.value = n;
+      },
+      onOpenToggle: () => {
+        e.value = !e.value;
+      },
+      contentId: "",
+      titleId: "",
+      descriptionId: "",
+      triggerElement: l,
+      contentElement: p
+    }), (n, o) => _(n.$slots, "default", {
+      open: t(e),
+      close: () => e.value = !1
+    });
+  }
+}), J = j;
+const Q = "DialogTitle", X = "DialogContent";
+function Y({ titleName: u = Q, contentName: i = X, componentLink: s = "dialog.html#title", titleId: a, descriptionId: e, contentElement: l }) {
+  const p = `Warning: \`${i}\` requires a \`${u}\` for the component to be accessible for screen reader users.
+
+If you want to hide the \`${u}\`, you can wrap it with our VisuallyHidden component.
+
+For more information, see https://www.reka-ui.com/docs/components/${s}`, r = `Warning: Missing \`Description\` or \`aria-describedby="undefined"\` for ${i}.`;
+  A(() => {
+    var d;
+    document.getElementById(a) || console.warn(p);
+    const o = (d = l.value) == null ? void 0 : d.getAttribute("aria-describedby");
+    e && o && (document.getElementById(e) || console.warn(r));
+  });
+}
+var Z = /* @__PURE__ */ g({
+  __name: "DialogContentImpl",
+  props: {
+    forceMount: {
+      type: Boolean,
+      required: !1
+    },
+    trapFocus: {
+      type: Boolean,
+      required: !1
+    },
+    disableOutsidePointerEvents: {
+      type: Boolean,
+      required: !1
+    },
+    asChild: {
+      type: Boolean,
+      required: !1
+    },
+    as: {
+      type: null,
+      required: !1
+    }
+  },
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "openAutoFocus",
+    "closeAutoFocus"
+  ],
+  setup(u, { emit: i }) {
+    const s = u, a = i, e = O(), { forwardRef: l, currentElement: p } = D();
+    return e.titleId || (e.titleId = w(void 0, "reka-dialog-title")), e.descriptionId || (e.descriptionId = w(void 0, "reka-dialog-description")), A(() => {
+      e.contentElement = p, I() !== document.body && (e.triggerElement.value = I());
+    }), process.env.NODE_ENV !== "production" && Y({
+      titleName: "DialogTitle",
+      contentName: "DialogContent",
+      componentLink: "dialog.html#title",
+      titleId: e.titleId,
+      descriptionId: e.descriptionId,
+      contentElement: p
+    }), (r, n) => (m(), v(t(S), {
+      "as-child": "",
+      loop: "",
+      trapped: s.trapFocus,
+      onMountAutoFocus: n[5] || (n[5] = (o) => a("openAutoFocus", o)),
+      onUnmountAutoFocus: n[6] || (n[6] = (o) => a("closeAutoFocus", o))
+    }, {
+      default: f(() => [C(t(L), y({
+        id: t(e).contentId,
+        ref: t(l),
+        as: r.as,
+        "as-child": r.asChild,
+        "disable-outside-pointer-events": r.disableOutsidePointerEvents,
+        role: "dialog",
+        "aria-describedby": t(e).descriptionId,
+        "aria-labelledby": t(e).titleId,
+        "data-state": t(z)(t(e).open.value)
+      }, r.$attrs, {
+        onDismiss: n[0] || (n[0] = (o) => t(e).onOpenChange(!1)),
+        onEscapeKeyDown: n[1] || (n[1] = (o) => a("escapeKeyDown", o)),
+        onFocusOutside: n[2] || (n[2] = (o) => a("focusOutside", o)),
+        onInteractOutside: n[3] || (n[3] = (o) => a("interactOutside", o)),
+        onPointerDownOutside: n[4] || (n[4] = (o) => a("pointerDownOutside", o))
+      }), {
+        default: f(() => [_(r.$slots, "default")]),
+        _: 3
+      }, 16, [
+        "id",
+        "as",
+        "as-child",
+        "disable-outside-pointer-events",
+        "aria-describedby",
+        "aria-labelledby",
+        "data-state"
+      ])]),
+      _: 3
+    }, 8, ["trapped"]));
+  }
+}), M = Z, x = /* @__PURE__ */ g({
+  __name: "DialogContentModal",
+  props: {
+    forceMount: {
+      type: Boolean,
+      required: !1
+    },
+    trapFocus: {
+      type: Boolean,
+      required: !1
+    },
+    disableOutsidePointerEvents: {
+      type: Boolean,
+      required: !1
+    },
+    asChild: {
+      type: Boolean,
+      required: !1
+    },
+    as: {
+      type: null,
+      required: !1
+    }
+  },
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "openAutoFocus",
+    "closeAutoFocus"
+  ],
+  setup(u, { emit: i }) {
+    const s = u, a = i, e = O(), l = q(a), { forwardRef: p, currentElement: r } = D();
+    return K(r), (n, o) => (m(), v(M, y({
+      ...s,
+      ...t(l)
+    }, {
+      ref: t(p),
+      "trap-focus": t(e).open.value,
+      "disable-outside-pointer-events": !0,
+      onCloseAutoFocus: o[0] || (o[0] = (d) => {
+        var c;
+        d.defaultPrevented || (d.preventDefault(), (c = t(e).triggerElement.value) == null || c.focus());
+      }),
+      onPointerDownOutside: o[1] || (o[1] = (d) => {
+        const c = d.detail.originalEvent, B = c.button === 0 && c.ctrlKey === !0;
+        (c.button === 2 || B) && d.preventDefault();
+      }),
+      onFocusOutside: o[2] || (o[2] = (d) => {
+        d.preventDefault();
+      })
+    }), {
+      default: f(() => [_(n.$slots, "default")]),
+      _: 3
+    }, 16, ["trap-focus"]));
+  }
+}), ee = x, te = /* @__PURE__ */ g({
+  __name: "DialogContentNonModal",
+  props: {
+    forceMount: {
+      type: Boolean,
+      required: !1
+    },
+    trapFocus: {
+      type: Boolean,
+      required: !1
+    },
+    disableOutsidePointerEvents: {
+      type: Boolean,
+      required: !1
+    },
+    asChild: {
+      type: Boolean,
+      required: !1
+    },
+    as: {
+      type: null,
+      required: !1
+    }
+  },
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "openAutoFocus",
+    "closeAutoFocus"
+  ],
+  setup(u, { emit: i }) {
+    const s = u, e = q(i);
+    D();
+    const l = O(), p = E(!1), r = E(!1);
+    return (n, o) => (m(), v(M, y({
+      ...s,
+      ...t(e)
+    }, {
+      "trap-focus": !1,
+      "disable-outside-pointer-events": !1,
+      onCloseAutoFocus: o[0] || (o[0] = (d) => {
+        var c;
+        d.defaultPrevented || (p.value || (c = t(l).triggerElement.value) == null || c.focus(), d.preventDefault()), p.value = !1, r.value = !1;
+      }),
+      onInteractOutside: o[1] || (o[1] = (d) => {
+        var b;
+        d.defaultPrevented || (p.value = !0, d.detail.originalEvent.type === "pointerdown" && (r.value = !0));
+        const c = d.target;
+        ((b = t(l).triggerElement.value) == null ? void 0 : b.contains(c)) && d.preventDefault(), d.detail.originalEvent.type === "focusin" && r.value && d.preventDefault();
+      })
+    }), {
+      default: f(() => [_(n.$slots, "default")]),
+      _: 3
+    }, 16));
+  }
+}), oe = te, se = /* @__PURE__ */ g({
+  __name: "DialogContent",
+  props: {
+    forceMount: {
+      type: Boolean,
+      required: !1
+    },
+    disableOutsidePointerEvents: {
+      type: Boolean,
+      required: !1
+    },
+    asChild: {
+      type: Boolean,
+      required: !1
+    },
+    as: {
+      type: null,
+      required: !1
+    }
+  },
+  emits: [
+    "escapeKeyDown",
+    "pointerDownOutside",
+    "focusOutside",
+    "interactOutside",
+    "openAutoFocus",
+    "closeAutoFocus"
+  ],
+  setup(u, { emit: i }) {
+    const s = u, a = i, e = O(), l = q(a), { forwardRef: p } = D();
+    return (r, n) => (m(), v(t(F), { present: r.forceMount || t(e).open.value }, {
+      default: f(() => [t(e).modal.value ? (m(), v(ee, y({
+        key: 0,
+        ref: t(p)
+      }, {
+        ...s,
+        ...t(l),
+        ...r.$attrs
+      }), {
+        default: f(() => [_(r.$slots, "default")]),
+        _: 3
+      }, 16)) : (m(), v(oe, y({
+        key: 1,
+        ref: t(p)
+      }, {
+        ...s,
+        ...t(l),
+        ...r.$attrs
+      }), {
+        default: f(() => [_(r.$slots, "default")]),
+        _: 3
+      }, 16))]),
+      _: 3
+    }, 8, ["present"]));
+  }
+}), ae = se, ne = /* @__PURE__ */ g({
+  __name: "DialogOverlayImpl",
+  props: {
+    asChild: {
+      type: Boolean,
+      required: !1
+    },
+    as: {
+      type: null,
+      required: !1
+    }
+  },
+  setup(u) {
+    const i = O();
+    return V(!0), D(), (s, a) => (m(), v(t(U), {
+      as: s.as,
+      "as-child": s.asChild,
+      "data-state": t(i).open.value ? "open" : "closed",
+      style: { "pointer-events": "auto" }
+    }, {
+      default: f(() => [_(s.$slots, "default")]),
+      _: 3
+    }, 8, [
+      "as",
+      "as-child",
+      "data-state"
+    ]));
+  }
+}), le = ne, re = /* @__PURE__ */ g({
+  __name: "DialogOverlay",
+  props: {
+    forceMount: {
+      type: Boolean,
+      required: !1
+    },
+    asChild: {
+      type: Boolean,
+      required: !1
+    },
+    as: {
+      type: null,
+      required: !1
+    }
+  },
+  setup(u) {
+    const i = O(), { forwardRef: s } = D();
+    return (a, e) => {
+      var l;
+      return (l = t(i)) != null && l.modal.value ? (m(), v(t(F), {
+        key: 0,
+        present: a.forceMount || t(i).open.value
+      }, {
+        default: f(() => [C(le, y(a.$attrs, {
+          ref: t(s),
+          as: a.as,
+          "as-child": a.asChild
+        }), {
+          default: f(() => [_(a.$slots, "default")]),
+          _: 3
+        }, 16, ["as", "as-child"])]),
+        _: 3
+      }, 8, ["present"])) : h("v-if", !0);
+    };
+  }
+}), ie = re, ue = /* @__PURE__ */ g({
+  __name: "DialogPortal",
+  props: {
+    to: {
+      type: null,
+      required: !1
+    },
+    disabled: {
+      type: Boolean,
+      required: !1
+    },
+    defer: {
+      type: Boolean,
+      required: !1
+    },
+    forceMount: {
+      type: Boolean,
+      required: !1
+    }
+  },
+  setup(u) {
+    const i = u;
+    return (s, a) => (m(), v(t(W), $(T(i)), {
+      default: f(() => [_(s.$slots, "default")]),
+      _: 3
+    }, 16));
+  }
+}), de = ue;
+const pe = /* @__PURE__ */ g({
   __name: "Modal",
   props: {
     open: { type: Boolean, default: !1 },
@@ -9,28 +417,28 @@ const D = /* @__PURE__ */ c({
     contentClass: { default: "" }
   },
   emits: ["onClose"],
-  setup(t, { emit: d }) {
-    const r = d, n = (e) => {
-      r("onClose", e);
-    }, f = (e) => {
-      e || n("escape");
+  setup(u, { emit: i }) {
+    const s = i, a = (l) => {
+      s("onClose", l);
+    }, e = (l) => {
+      l || a("escape");
     };
-    return (e, s) => (u(), p(o(_), {
-      open: t.open,
-      "onUpdate:open": f
+    return (l, p) => (m(), v(t(J), {
+      open: u.open,
+      "onUpdate:open": e
     }, {
-      default: a(() => [
-        l(o(C), { to: "body" }, {
-          default: a(() => [
-            l(o(v), {
+      default: f(() => [
+        C(t(de), { to: "body" }, {
+          default: f(() => [
+            C(t(ie), {
               class: "modal-overlay",
-              onClick: s[0] || (s[0] = (g) => t.closeOnOverlay && n("overlay"))
+              onClick: p[0] || (p[0] = (r) => u.closeOnOverlay && a("overlay"))
             }),
-            l(o(y), {
-              class: i(["modal-content", t.contentClass])
+            C(t(ae), {
+              class: R(["modal-content", u.contentClass])
             }, {
-              default: a(() => [
-                m(e.$slots, "default", {}, void 0, !0)
+              default: f(() => [
+                _(l.$slots, "default", {}, void 0, !0)
               ]),
               _: 3
             }, 8, ["class"])
@@ -41,7 +449,7 @@ const D = /* @__PURE__ */ c({
       _: 3
     }, 8, ["open"]));
   }
-}), x = /* @__PURE__ */ O(D, [["__scopeId", "data-v-1d8533fb"]]);
+}), ge = /* @__PURE__ */ G(pe, [["__scopeId", "data-v-1d8533fb"]]);
 export {
-  x as default
+  ge as default
 };