tuikit-atomicx-vue3 4.4.0-beta.1 → 4.5.0

package/dist/components/MessageInput/AudioCallPicker/AudioCallPicker.js

@@ -1,14 +1,14 @@
-import { defineComponent as T, useCssModule as B, ref as g, computed as f, createBlock as O, openBlock as z, unref as t, withCtx as M, createElementVNode as N, createVNode as m, normalizeClass as I, renderSlot as V } from "vue";
-import { useUIKit as $, IconCall1 as F, TUIDialog as K } from "@tencentcloud/uikit-base-component-vue3";
-import { c as X } from "../../../index-DPczIrgX.js";
-import { View as Y } from "../../../baseComp/View/index.js";
+import { defineComponent as B, useCssModule as O, ref as M, computed as f, createBlock as z, openBlock as N, unref as r, withCtx as g, createElementVNode as V, createVNode as m, normalizeClass as I, renderSlot as $ } from "vue";
+import { useUIKit as F, IconCall1 as K, TUIDialog as X } from "@tencentcloud/uikit-base-component-vue3";
+import { c as Y } from "../../../index-DPczIrgX.js";
+import { View as Z } from "../../../baseComp/View/index.js";
 import { ConversationType as _ } from "../../../types/engine.js";
 import { startCall as k } from "../../../utils/call.js";
-import { UserPicker as Z } from "../../UserPicker/index.js";
-import { useGroupSettingState as j } from "../../../states/GroupSettingState/GroupSettingState.js";
-import { useConversationListState as q } from "../../../states/ConversationListState/ConversationListState.js";
-import { _ as H } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const y = 1, J = 80, Q = 9, W = 1, ee = /* @__PURE__ */ T({
+import { UserPicker as j } from "../../UserPicker/index.js";
+import { useGroupSettingState as q } from "../../../states/GroupSettingState/GroupSettingState.js";
+import { useConversationListState as H } from "../../../states/ConversationListState/ConversationListState.js";
+import { _ as J } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const y = 1, Q = 80, W = 9, ee = 1, oe = /* @__PURE__ */ B({
   __name: "AudioCallPicker",
   props: {
     label: { default: "" },
@@ -16,24 +16,22 @@ const y = 1, J = 80, Q = 9, W = 1, ee = /* @__PURE__ */ T({
     disabled: { type: Boolean, default: !1 }
   },
   setup(G) {
-    const s = G, n = B(), { t: i } = $(), { activeConversation: a } = q(), { allMembers: C, getGroupMemberList: h, memberCount: D } = j(), c = g(!1), u = g(), P = f(
+    const s = G, n = O(), { t: i } = F(), { activeConversation: a } = H(), { allMembers: C, getGroupMemberList: h, memberCount: D, currentUserID: P } = q(), c = M(!1), u = M(), U = f(
       () => {
         var e;
         return ((e = a.value) == null ? void 0 : e.type) === _.C2C;
       }
-    ), x = f(
-      () => {
-        var e;
-        return ((e = C.value) == null ? void 0 : e.map((o) => ({
-          key: o.userID,
-          label: o.nick || o.userID,
-          avatarUrl: o.avatar
-        }))) ?? [];
-      }
-    ), A = f(() => !(!a.value || s.disabled));
+    ), x = f(() => {
+      var t;
+      return (((t = C.value) == null ? void 0 : t.map((o) => ({
+        key: o.userID,
+        label: o.nick || o.userID,
+        avatarUrl: o.avatar
+      }))) ?? []).filter((o) => o.key !== P.value);
+    }), A = f(() => !(!a.value || s.disabled));
     function E() {
-      var o, r;
-      const e = (r = (o = a.value) == null ? void 0 : o.userProfile) == null ? void 0 : r.userID;
+      var t, o;
+      const e = (o = (t = a.value) == null ? void 0 : t.userProfile) == null ? void 0 : o.userID;
       if (!e) {
         console.warn("No peer user ID found for private call");
         return;
@@ -48,38 +46,38 @@ const y = 1, J = 80, Q = 9, W = 1, ee = /* @__PURE__ */ T({
         console.error("Failed to start private audio call:", l);
       }
     }
-    function v() {
-      var r, l;
-      if (((r = a.value) == null ? void 0 : r.type) !== _.GROUP)
+    function b() {
+      var o, l;
+      if (((o = a.value) == null ? void 0 : o.type) !== _.GROUP)
         return;
-      const e = ((l = C.value) == null ? void 0 : l.length) || 0, o = D.value || 0;
-      e < o && h({
-        count: J,
+      const e = ((l = C.value) == null ? void 0 : l.length) || 0, t = D.value || 0;
+      e < t && h({
+        count: Q,
         offset: e
       });
     }
     function L() {
-      v(), c.value = !0;
+      b(), c.value = !0;
     }
     function p() {
       c.value = !1;
     }
     function S() {
-      var l, b;
-      const e = (b = (l = a.value) == null ? void 0 : l.groupProfile) == null ? void 0 : b.groupID;
+      var l, v;
+      const e = (v = (l = a.value) == null ? void 0 : l.groupProfile) == null ? void 0 : v.groupID;
       if (!u.value || !e) {
         console.warn("Missing group information for group call");
         return;
       }
-      const o = u.value.getSelectedItems();
-      if (!Array.isArray(o) || o.length === 0) {
+      const t = u.value.getSelectedItems();
+      if (!Array.isArray(t) || t.length === 0) {
         console.warn("No members selected for group call");
         return;
       }
-      const r = o.map((d) => d.key);
+      const o = t.map((d) => d.key);
       try {
         k({
-          userIDList: r,
+          userIDList: o,
           chatGroupID: e,
           type: y
         }), p();
@@ -87,54 +85,54 @@ const y = 1, J = 80, Q = 9, W = 1, ee = /* @__PURE__ */ T({
         console.error("Failed to start group audio call:", d);
       }
     }
-    function U() {
+    function R() {
       if (!A.value) {
         console.warn("Cannot start audio call");
         return;
       }
-      P.value ? E() : L();
+      U.value ? E() : L();
     }
-    const R = () => {
+    const w = () => {
       var e;
-      ((e = a.value) == null ? void 0 : e.type) === _.GROUP && v();
-    }, w = () => S();
-    return (e, o) => (z(), O(t(Y), null, {
-      default: M(() => [
-        N("div", {
-          class: I(t(X)(t(n)["audio-call-picker__button"], {
-            [t(n).disabled]: s.disabled
+      ((e = a.value) == null ? void 0 : e.type) === _.GROUP && b();
+    }, T = () => S();
+    return (e, t) => (N(), z(r(Z), null, {
+      default: g(() => [
+        V("div", {
+          class: I(r(Y)(r(n)["audio-call-picker__button"], {
+            [r(n).disabled]: s.disabled
           })),
-          onClick: U
+          onClick: R
         }, [
-          V(e.$slots, "default", {}, () => [
-            m(t(F), {
+          $(e.$slots, "default", {}, () => [
+            m(r(K), {
               size: s.iconSize,
-              class: I(t(n)["audio-call-picker__icon"])
+              class: I(r(n)["audio-call-picker__icon"])
             }, null, 8, ["size", "class"])
           ])
         ], 2),
-        m(t(K), {
+        m(r(X), {
           visible: c.value,
-          title: t(i)("MessageInput.select_call_members"),
-          cancelText: t(i)("MessageInput.cancel"),
+          title: r(i)("MessageInput.select_call_members"),
+          cancelText: r(i)("MessageInput.cancel"),
           cancel: p,
           close: p,
-          confirmText: t(i)("MessageInput.initiate_call"),
-          confirm: w,
+          confirmText: r(i)("MessageInput.initiate_call"),
+          confirm: T,
           customClasses: ["group-call-dialog"],
           appendTo: "body"
         }, {
-          default: M(() => [
-            m(t(Z), {
+          default: g(() => [
+            m(r(j), {
               ref_key: "groupMemberPickerRef",
               ref: u,
               "display-mode": "list",
               "data-source": x.value,
-              "max-count": Q,
-              "min-count": W,
+              "max-count": W,
+              "min-count": ee,
               class: "group-member-picker",
               style: { width: "100%" },
-              onReachEnd: R
+              onReachEnd: w
             }, null, 8, ["data-source"])
           ]),
           _: 1
@@ -143,13 +141,13 @@ const y = 1, J = 80, Q = 9, W = 1, ee = /* @__PURE__ */ T({
       _: 3
     }));
   }
-}), oe = "_disabled_1xb1g_16", te = {
+}), te = "_disabled_1xb1g_16", re = {
   "audio-call-picker__button": "_audio-call-picker__button_1xb1g_1",
-  disabled: oe,
+  disabled: te,
   "audio-call-picker__icon": "_audio-call-picker__icon_1xb1g_22"
-}, re = {
-  $style: te
-}, me = /* @__PURE__ */ H(ee, [["__cssModules", re]]);
+}, le = {
+  $style: re
+}, _e = /* @__PURE__ */ J(oe, [["__cssModules", le]]);
 export {
-  me as default
+  _e as default
 };

package/dist/components/MessageInput/EmojiPicker/EmojiPicker.js

@@ -1,13 +1,14 @@
-import { defineComponent as g, ref as C, useCssModule as E, onMounted as P, createElementBlock as _, openBlock as d, createVNode as s, unref as e, withCtx as n, createElementVNode as r, mergeProps as h, renderSlot as x, normalizeClass as a, Fragment as M, renderList as I } from "vue";
-import { useUIKit as z, IconEmoji as O } from "@tencentcloud/uikit-base-component-vue3";
-import { c as T } from "../../../index-DPczIrgX.js";
-import { P as $, a as y, b as B, c as S } from "../../../PopoverTrigger-L8abAry7.js";
+import { defineComponent as g, ref as C, useCssModule as E, onMounted as P, createBlock as h, openBlock as _, unref as e, withCtx as s, createVNode as i, createElementVNode as n, mergeProps as x, renderSlot as M, normalizeClass as a, createElementBlock as u, Fragment as I, renderList as $ } from "vue";
+import { useUIKit as z, IconEmoji as B } from "@tencentcloud/uikit-base-component-vue3";
+import { c as O } from "../../../index-DPczIrgX.js";
+import { P as T, a as y, b as S, c as U } from "../../../PopoverTrigger-L8abAry7.js";
+import { View as w } from "../../../baseComp/View/index.js";
 import { emojiUrlMap as c, emojiBaseUrl as m } from "../../../constants/emoji.js";
-import { transformTextWithEmojiKeyToName as U } from "../../../utils/emoji.js";
-import { useMessageInputState as N } from "../../../states/MessageInputState/MessageInputState.js";
-import { MessageContentType as w } from "../../../states/MessageInputState/type.js";
-import { _ as V } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const A = ["onClick"], F = ["src", "alt"], J = /* @__PURE__ */ g({
+import { transformTextWithEmojiKeyToName as N } from "../../../utils/emoji.js";
+import { useMessageInputState as V } from "../../../states/MessageInputState/MessageInputState.js";
+import { MessageContentType as A } from "../../../states/MessageInputState/type.js";
+import { _ as F } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const J = ["onClick"], L = ["src", "alt"], R = /* @__PURE__ */ g({
   name: "EmojiPicker",
   inheritAttrs: !1,
   __name: "EmojiPicker",
@@ -17,103 +18,106 @@ const A = ["onClick"], F = ["src", "alt"], J = /* @__PURE__ */ g({
     disabled: { type: Boolean, default: !1 }
   },
   setup(f) {
-    const i = f, p = C(!1), o = E(), { t: k } = z(), { insertContent: j } = N();
+    const l = f, d = C(!1), o = E(), { t: k } = z(), { insertContent: j } = V();
     P(() => {
       Object.values(c).forEach((t) => {
-        const u = new Image();
-        u.src = m + t;
+        const p = new Image();
+        p.src = m + t;
       });
     });
     const b = (t) => {
-      i.disabled || (p.value = t);
+      l.disabled || (d.value = t);
     };
     function v(t) {
       t && j([
         {
-          type: w.EMOJI,
+          type: A.EMOJI,
           content: {
             url: m + c[t],
             key: t,
-            text: U(t)
+            text: N(t)
           }
         }
       ]);
     }
-    return (t, u) => (d(), _("div", null, [
-      s(e($), {
-        open: p.value,
-        "onUpdate:open": b
-      }, {
-        default: n(() => [
-          s(e(y), {
-            as: "div",
-            disabled: i.disabled
-          }, {
-            default: n(() => [
-              r("div", h({
-                "data-test": "test",
-                class: e(T)(
-                  e(o)["emoji-picker__button"],
-                  {
-                    [e(o).disabled]: i.disabled
-                  }
-                )
-              }, t.$attrs), [
-                x(t.$slots, "default", {}, () => [
-                  s(e(O), {
-                    class: a(e(o)["emoji-picker__icon"]),
-                    size: i.iconSize
-                  }, null, 8, ["class", "size"])
-                ])
-              ], 16)
-            ]),
-            _: 3
-          }, 8, ["disabled"]),
-          s(e(B), null, {
-            default: n(() => [
-              s(e(S), {
-                side: "top",
-                align: "start",
-                "side-offset": 5
-              }, {
-                default: n(() => [
-                  r("div", null, [
-                    r("div", {
-                      class: a(e(o)["emoji-picker__list"])
-                    }, [
-                      (d(!0), _(M, null, I(Object.keys(e(c)), (l) => (d(), _("div", {
-                        key: l,
-                        class: a(e(o)["emoji-picker__list-item"]),
-                        onClick: (q) => v(l)
+    return (t, p) => (_(), h(e(w), null, {
+      default: s(() => [
+        i(e(T), {
+          open: d.value,
+          "onUpdate:open": b
+        }, {
+          default: s(() => [
+            i(e(y), {
+              as: "div",
+              disabled: l.disabled
+            }, {
+              default: s(() => [
+                n("div", x({
+                  "data-test": "test",
+                  class: e(O)(
+                    e(o)["emoji-picker__button"],
+                    {
+                      [e(o).disabled]: l.disabled
+                    }
+                  )
+                }, t.$attrs), [
+                  M(t.$slots, "default", {}, () => [
+                    i(e(B), {
+                      class: a(e(o)["emoji-picker__icon"]),
+                      size: l.iconSize
+                    }, null, 8, ["class", "size"])
+                  ])
+                ], 16)
+              ]),
+              _: 3
+            }, 8, ["disabled"]),
+            i(e(S), null, {
+              default: s(() => [
+                i(e(U), {
+                  side: "top",
+                  align: "start",
+                  "side-offset": 5
+                }, {
+                  default: s(() => [
+                    n("div", null, [
+                      n("div", {
+                        class: a(e(o)["emoji-picker__list"])
                       }, [
-                        r("img", {
+                        (_(!0), u(I, null, $(Object.keys(e(c)), (r) => (_(), u("div", {
+                          key: r,
                           class: a(e(o)["emoji-picker__list-item"]),
-                          src: e(m) + e(c)[l],
-                          alt: e(k)(`Emoji.${l}`)
-                        }, null, 10, F)
-                      ], 10, A))), 128))
-                    ], 2)
-                  ])
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })
-        ]),
-        _: 3
-      }, 8, ["open"])
-    ]));
+                          onClick: (G) => v(r)
+                        }, [
+                          n("img", {
+                            class: a(e(o)["emoji-picker__list-item"]),
+                            src: e(m) + e(c)[r],
+                            alt: e(k)(`Emoji.${r}`)
+                          }, null, 10, L)
+                        ], 10, J))), 128))
+                      ], 2)
+                    ])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 3
+        }, 8, ["open"])
+      ]),
+      _: 3
+    }));
   }
-}), L = "_disabled_kxj4t_16", R = {
+}), W = "_disabled_kxj4t_16", q = {
   "emoji-picker__button": "_emoji-picker__button_kxj4t_1",
-  disabled: L,
+  disabled: W,
   "emoji-picker__icon": "_emoji-picker__icon_kxj4t_22",
   "emoji-picker__list": "_emoji-picker__list_kxj4t_25",
   "emoji-picker__list-item": "_emoji-picker__list-item_kxj4t_36"
-}, W = {
-  $style: R
-}, te = /* @__PURE__ */ V(J, [["__cssModules", W]]);
+}, D = {
+  $style: q
+}, ie = /* @__PURE__ */ F(R, [["__cssModules", D]]);
 export {
-  te as default
+  ie as default
 };

package/dist/components/MessageInput/MessageInput.js

@@ -1,4 +1,4 @@
-import { _ as f } from "../../MessageInput.vue_vue_type_script_setup_true_lang-D1G-LitO.js";
+import { _ as f } from "../../MessageInput.vue_vue_type_script_setup_true_lang-jPzZ5INK.js";
 export {
   f as default
 };

package/dist/components/MessageInput/MessageInput.vue.d.ts

@@ -13,20 +13,23 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     autoFocus: boolean;
     disabled: boolean;
     hideSendButton: boolean;
-    placeholder: string;
+    placeholder: undefined;
+    maxLength: undefined;
     attachmentPickerMode: string;
     actions: () => string[];
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MessageInputProps>, {
     autoFocus: boolean;
     disabled: boolean;
     hideSendButton: boolean;
-    placeholder: string;
+    placeholder: undefined;
+    maxLength: undefined;
     attachmentPickerMode: string;
     actions: () => string[];
 }>>> & Readonly<{}>, {
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
     autoFocus: boolean;
+    maxLength: number;
     actions: import('./types').MessageInputActions;
     attachmentPickerMode: import('./types').MessageInputAttachmentPickerMode;
     hideSendButton: boolean;

package/dist/components/MessageInput/TextEditor/EditorCore.d.ts

@@ -6,11 +6,13 @@ interface EditorOptions {
     placeholder?: string;
     autoFocus?: boolean;
     disabled?: boolean;
+    maxLength?: number;
+    isPlaceholderOnlyShowWhenEditable?: boolean;
     onUpdate?: (content: InputContent[]) => void;
     onEnter?: () => void;
     onFocus?: () => void;
     onBlur?: () => void;
 }
-declare function createEditor({ element, placeholder, autoFocus, disabled, onUpdate, onEnter, onFocus, onBlur, }: EditorOptions): Editor;
+declare function createEditor({ element, placeholder, autoFocus, disabled, isPlaceholderOnlyShowWhenEditable, maxLength, onUpdate, onEnter, onFocus, onBlur, }: EditorOptions): Editor;
 export { createEditor, };
 export type { Editor, };

package/dist/components/MessageInput/TextEditor/EditorCore.js

@@ -1,9 +1,12 @@
-import { S as g, P as x, E as d, I as o } from "../../../index-DTi1fL-x.js";
-import { E as M } from "../../../index-BfIEeWMg.js";
-import { MessageContentType as n } from "../../../states/MessageInputState/type.js";
-function y() {
-  return o.extend({
-    name: n.EMOJI,
+import { I as x } from "../../../index-7vNB_Vx8.js";
+import { S as y, P as d, E as M } from "../../../index-ZILx4LYk.js";
+import { CharacterCount as b } from "./extensions/characterCountExtension.js";
+import { createImageExtension as p } from "./extensions/imageExtension.js";
+import { E as I } from "../../../index-Do-2CngU.js";
+import { MessageContentType as r } from "../../../states/MessageInputState/type.js";
+function T() {
+  return x.extend({
+    name: r.EMOJI,
     inline: !0,
     group: "inline",
     draggable: !0,
@@ -18,34 +21,8 @@ function y() {
     }
   });
 }
-function T() {
-  return o.extend({
-    addOptions() {
-      var t;
-      return {
-        ...(t = this.parent) == null ? void 0 : t.call(this),
-        HTMLAttributes: {
-          class: "message-image"
-        }
-      };
-    },
-    addAttributes() {
-      var t;
-      return {
-        ...(t = this.parent) == null ? void 0 : t.call(this),
-        fileData: {
-          default: null,
-          parseHTML: (e) => e.getAttribute("file-data"),
-          renderHTML: (e) => e.fileData ? { "file-data": e.fileData } : {}
-        }
-      };
-    }
-  }).configure({
-    inline: !0
-  });
-}
-function p(t) {
-  return M.create({
+function C(t) {
+  return I.create({
     addKeyboardShortcuts() {
       return {
         Enter: () => {
@@ -59,30 +36,30 @@ function p(t) {
 }
 function c(t) {
   return t != null && t.content ? t.content.flatMap((e) => {
-    var a, s, r, u;
+    var n, a, s, o;
     switch (e.type) {
       case "text":
         return e.text ? [{
-          type: n.TEXT,
+          type: r.TEXT,
           content: e.text
         }] : [];
       case "image":
         return [{
-          type: n.IMAGE,
-          content: (a = e.attrs) == null ? void 0 : a.fileData
+          type: r.IMAGE,
+          content: (n = e.attrs) == null ? void 0 : n.fileData
         }];
       case "emoji":
         return [{
-          type: n.EMOJI,
+          type: r.EMOJI,
           content: {
-            url: (s = e.attrs) == null ? void 0 : s.src,
-            key: (r = e.attrs) == null ? void 0 : r.alt,
-            text: (u = e.attrs) == null ? void 0 : u.title
+            url: (a = e.attrs) == null ? void 0 : a.src,
+            key: (s = e.attrs) == null ? void 0 : s.alt,
+            text: (o = e.attrs) == null ? void 0 : o.title
           }
         }];
       case "hardBreak":
         return [{
-          type: n.TEXT,
+          type: r.TEXT,
           content: `
 `
         }];
@@ -91,38 +68,49 @@ function c(t) {
     }
   }) : [];
 }
-function B({
+function J({
   element: t,
   placeholder: e = "",
-  autoFocus: a = !1,
-  disabled: s = !1,
-  onUpdate: r,
-  onEnter: u,
-  onFocus: f,
+  autoFocus: n = !1,
+  disabled: a = !1,
+  isPlaceholderOnlyShowWhenEditable: s = !0,
+  maxLength: o = void 0,
+  onUpdate: u,
+  onEnter: f,
+  onFocus: m,
   onBlur: E
 }) {
-  const m = {
+  const l = {
     element: t,
-    autofocus: a,
-    editable: !s,
+    autofocus: n,
+    editable: !a,
     extensions: ((i) => [
-      g,
-      p(i ? { onEnter: i } : void 0),
-      y(),
+      y.configure({
+        bold: !1,
+        italic: !1,
+        strike: !1,
+        code: !1
+      }),
+      b.configure({
+        limit: o
+      }),
+      C(i ? { onEnter: i } : void 0),
       T(),
-      x.configure({
-        placeholder: e
+      p(),
+      d.configure({
+        placeholder: e,
+        showOnlyWhenEditable: s
       })
-    ])(u),
+    ])(f),
     onUpdate: ({ editor: i }) => {
-      const l = c(i.getJSON());
-      r == null || r(l);
+      const g = c(i.getJSON());
+      u == null || u(g);
     },
-    onFocus: f,
+    onFocus: m,
     onBlur: E
   };
-  return new d(m);
+  return new M(l);
 }
 export {
-  B as createEditor
+  J as createEditor
 };