tuikit-atomicx-vue3 3.4.1 → 3.5.0-beta.7

package/.eslintrc.cjs

@@ -28,6 +28,7 @@ module.exports = {
     ],
     'no-unused-vars': 'off',
     '@typescript-eslint/no-unused-vars': 'error',
+    '@typescript-eslint/no-duplicate-enum-values': 0,
   },
   ignorePatterns: ['node_modules', 'public', 'dist', '*.d.ts', '!.*.cjs', '!.storybook', '*.cjs'],
 };

package/dist/{MessageInput.vue_vue_type_script_setup_true_lang-D1G-LitO.js → MessageInput.vue_vue_type_script_setup_true_lang-jPzZ5INK.js}

@@ -1,9 +1,9 @@
-import { defineComponent as B, computed as E, createElementBlock as f, openBlock as r, normalizeClass as s, unref as o, renderSlot as i, createElementVNode as m, Fragment as F, renderList as V, createBlock as d, resolveDynamicComponent as A, mergeProps as M, createVNode as T, withCtx as g, createCommentVNode as j } from "vue";
+import { defineComponent as E, computed as F, createElementBlock as f, openBlock as l, normalizeClass as s, unref as o, renderSlot as i, createElementVNode as m, Fragment as V, renderList as A, createBlock as d, resolveDynamicComponent as M, mergeProps as T, createVNode as L, withCtx as g, createCommentVNode as w } from "vue";
 import { AttachmentPicker as k } from "./components/MessageInput/AttachmentPicker/index.js";
-import N from "./components/MessageInput/AttachmentPicker/FilePicker.js";
-import L from "./components/MessageInput/AttachmentPicker/ImagePicker.js";
-import O from "./components/MessageInput/AttachmentPicker/VideoPicker.js";
-import x from "./components/MessageInput/AudioCallPicker/AudioCallPicker.js";
+import x from "./components/MessageInput/AttachmentPicker/FilePicker.js";
+import j from "./components/MessageInput/AttachmentPicker/ImagePicker.js";
+import N from "./components/MessageInput/AttachmentPicker/VideoPicker.js";
+import O from "./components/MessageInput/AudioCallPicker/AudioCallPicker.js";
 import z from "./components/MessageInput/EmojiPicker/EmojiPicker.js";
 import { QuotedMessagePreview as D } from "./components/MessageInput/QuotedMessagePreview/index.js";
 import { SendButton as K } from "./components/MessageInput/SendButton/index.js";
@@ -11,21 +11,22 @@ import { TextEditor as Q } from "./components/MessageInput/TextEditor/index.js";
 import R from "./components/MessageInput/VideoCallPicker/VideoCallPicker.js";
 import { useMessageInputState as U } from "./states/MessageInputState/MessageInputState.js";
 const a = {
-  "message-input": "_message-input_clemw_1",
-  "message-input__toolbar": "_message-input__toolbar_clemw_11",
-  "message-input__wrapper": "_message-input__wrapper_clemw_18",
-  "message-input__leftInline": "_message-input__leftInline_clemw_23",
-  "message-input__rightInline": "_message-input__rightInline_clemw_23",
-  "message-input__actions": "_message-input__actions_clemw_27",
-  "message-input__footerToolbar": "_message-input__footerToolbar_clemw_33"
-}, se = /* @__PURE__ */ B({
+  "message-input": "_message-input_m79i1_1",
+  "message-input__toolbar": "_message-input__toolbar_m79i1_11",
+  "message-input__wrapper": "_message-input__wrapper_m79i1_19",
+  "message-input__leftInline": "_message-input__leftInline_m79i1_24",
+  "message-input__rightInline": "_message-input__rightInline_m79i1_24",
+  "message-input__actions": "_message-input__actions_m79i1_28",
+  "message-input__footerToolbar": "_message-input__footerToolbar_m79i1_34"
+}, se = /* @__PURE__ */ E({
   __name: "MessageInput",
   props: {
     autoFocus: { type: Boolean, default: !0 },
     disabled: { type: Boolean, default: !1 },
     hideSendButton: { type: Boolean, default: !1 },
-    placeholder: { default: "" },
+    placeholder: { default: void 0 },
     attachmentPickerMode: { default: "collapsed" },
+    maxLength: { default: void 0 },
     actions: { default: () => ["EmojiPicker", "ImagePicker", "FilePicker", "VideoPicker"] },
     slots: {}
   },
@@ -33,53 +34,54 @@ const a = {
     const u = [
       { key: "EmojiPicker", component: z },
       { key: "AttachmentPicker", component: k },
-      { key: "FilePicker", component: N },
-      { key: "ImagePicker", component: L },
-      { key: "VideoPicker", component: O },
-      { key: "AudioCallPicker", component: x },
+      { key: "FilePicker", component: x },
+      { key: "ImagePicker", component: j },
+      { key: "VideoPicker", component: N },
+      { key: "AudioCallPicker", component: O },
       { key: "VideoCallPicker", component: R }
-    ], c = n, { inputRawValue: P, setContent: b, sendMessage: C } = U(), h = (e, l) => Object.fromEntries(
-      l.map((t) => [t, e[t]]).filter(([, t]) => t !== void 0)
+    ], c = n, { inputRawValue: P, setContent: b, sendMessage: C } = U(), h = (e, r) => Object.fromEntries(
+      r.map((t) => [t, e[t]]).filter(([, t]) => t !== void 0)
     ), y = (e) => {
-      const { component: l = () => null } = u.find(({ key: t }) => t === e) ?? {};
-      return { Component: l, props: { disabled: c.disabled } };
-    }, I = (e) => {
+      const { component: r = () => null } = u.find(({ key: t }) => t === e) ?? {};
+      return { Component: r, props: { disabled: c.disabled } };
+    }, v = (e) => {
       var _;
-      const { key: l, component: t, ...p } = e, $ = ((_ = u.find(({ key: S }) => S === l)) == null ? void 0 : _.component) ?? (() => null);
+      const { key: r, component: t, ...p } = e, S = ((_ = u.find(({ key: B }) => B === r)) == null ? void 0 : _.component) ?? (() => null);
       return {
-        Component: t ?? $,
+        Component: t ?? S,
         props: h(p, ["label", "className", "style", "iconSize"])
       };
-    }, v = E(
-      () => c.actions.map((e) => typeof e == "string" ? y(e) : I(e)).filter(({ Component: e }) => e !== null)
-    ), w = () => {
+    }, I = F(
+      () => c.actions.map((e) => typeof e == "string" ? y(e) : v(e)).filter(({ Component: e }) => e !== null)
+    ), $ = () => {
       P.value && (C(), b(""));
     };
-    return (e, l) => (r(), f("div", {
+    return (e, r) => (l(), f("div", {
       class: s([o(a)["message-input"]])
     }, [
       i(e.$slots, "headerToolbar", {}, () => [
         m("div", {
           class: s(o(a)["message-input__toolbar"])
         }, [
-          (r(!0), f(F, null, V(v.value, (t, p) => (r(), d(A(t.Component), M({ key: p }, { ref_for: !0 }, { ...t.props, ...t.Component === o(k) ? { attachmentPickerMode: n.attachmentPickerMode } : {} }), null, 16))), 128))
+          (l(!0), f(V, null, A(I.value, (t, p) => (l(), d(M(t.Component), T({ key: p }, { ref_for: !0 }, { ...t.props, ...t.Component === o(k) ? { attachmentPickerMode: n.attachmentPickerMode } : {} }), null, 16))), 128))
         ], 2)
       ]),
       m("div", {
         class: s(o(a)["message-input__wrapper"])
       }, [
-        T(o(D)),
+        L(o(D)),
         m("div", {
           class: s(o(a)["message-input__leftInline"])
         }, [
           i(e.$slots, "leftInline")
         ], 2),
         i(e.$slots, "textEditor", {}, () => [
-          (r(), d(o(Q), {
+          (l(), d(o(Q), {
             key: n.disabled ? "disabled-editor" : "enabled-editor",
             autoFocus: n.autoFocus,
             disabled: n.disabled,
-            placeholder: n.placeholder
+            placeholder: n.placeholder,
+            maxLength: n.maxLength
           }, {
             inputPrefix: g(() => [
               i(e.$slots, "inputPrefix")
@@ -88,7 +90,7 @@ const a = {
               i(e.$slots, "inputSuffix")
             ]),
             _: 3
-          }, 8, ["autoFocus", "disabled", "placeholder"]))
+          }, 8, ["autoFocus", "disabled", "placeholder", "maxLength"]))
         ]),
         m("div", {
           class: s(o(a)["message-input__rightInline"])
@@ -100,11 +102,11 @@ const a = {
         m("div", {
           class: s(o(a)["message-input__footerToolbar"])
         }, [
-          n.hideSendButton ? j("", !0) : (r(), d(o(K), {
+          n.hideSendButton ? w("", !0) : (l(), d(o(K), {
             key: 0,
             class: s(o(a)["message-input__send-button"]),
             disabled: c.disabled,
-            onClick: w
+            onClick: $
           }, null, 8, ["class", "disabled"]))
         ], 2)
       ])

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-CSEuZbpM.js";
+import { u as w } from "../../useId-CtirfF0W.js";
+import { g as z } from "../../utils-DaB7eSu5.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
 };