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

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

@@ -2,6 +2,7 @@ interface TextEditorProps {
     autoFocus?: boolean;
     disabled?: boolean;
     placeholder?: string;
+    maxLength?: number;
 }
 declare function __VLS_template(): {
     inputPrefix?(_: {}): any;
@@ -10,15 +11,18 @@ declare function __VLS_template(): {
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextEditorProps>, {
     autoFocus: boolean;
     disabled: boolean;
-    placeholder: string;
+    placeholder: undefined;
+    maxLength: undefined;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextEditorProps>, {
     autoFocus: boolean;
     disabled: boolean;
-    placeholder: string;
+    placeholder: undefined;
+    maxLength: undefined;
 }>>> & Readonly<{}>, {
-    placeholder: string;
     disabled: boolean;
+    placeholder: string;
     autoFocus: boolean;
+    maxLength: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/dist/components/MessageInput/TextEditor/extensions/characterCountExtension.d.ts

@@ -0,0 +1,19 @@
+import { Extension } from '@tiptap/vue-3';
+import { Node as ProseMirrorNode } from '@tiptap/pm/model';
+
+interface CharacterCountOptions {
+    limit: number | null | undefined;
+    textCounter: (text: string) => number;
+    wordCounter: (text: string) => number;
+}
+interface CharacterCountStorage {
+    characters: (options?: {
+        node?: ProseMirrorNode;
+        mode?: 'textSize' | 'nodeSize';
+    }) => number;
+    words: (options?: {
+        node?: ProseMirrorNode;
+    }) => number;
+}
+declare const CharacterCount: Extension<CharacterCountOptions, CharacterCountStorage>;
+export { CharacterCount, };

package/dist/components/MessageInput/TextEditor/extensions/characterCountExtension.js

@@ -0,0 +1,74 @@
+import { E as l, P as f, a as h } from "../../../../index-Do-2CngU.js";
+function g(e) {
+  if (typeof Intl < "u" && "Segmenter" in Intl) {
+    const r = new Intl.Segmenter("en", { granularity: "grapheme" });
+    return Array.from(r.segment(e)).length;
+  }
+  return [...e].length;
+}
+const p = l.create({
+  name: "characterCount",
+  addOptions() {
+    return {
+      limit: null,
+      textCounter: (e) => e.length,
+      wordCounter: (e) => e.split(" ").filter((r) => r !== "").length
+    };
+  },
+  addStorage() {
+    return {
+      characters: () => 0,
+      words: () => 0
+    };
+  },
+  onBeforeCreate() {
+    this.storage.characters = (e) => {
+      const r = (e == null ? void 0 : e.node) || this.editor.state.doc;
+      let s = 0;
+      return r.descendants((t) => {
+        t.isText && t.text ? s += g(t.text) : t.type.name === "emoji" && (s += 1);
+      }), s;
+    }, this.storage.words = (e) => {
+      const r = (e == null ? void 0 : e.node) || this.editor.state.doc, s = r.textBetween(0, r.content.size, " ", " ");
+      return this.options.wordCounter(s);
+    };
+  },
+  addProseMirrorPlugins() {
+    let e = !1;
+    return [
+      new f({
+        key: new h("characterCount"),
+        appendTransaction: (r, s, t) => {
+          if (e)
+            return;
+          const { limit: n } = this.options;
+          if (n == null || n === 0) {
+            e = !0;
+            return;
+          }
+          const o = this.storage.characters({ node: t.doc });
+          if (o > n) {
+            const c = o - n, a = 0, u = c, i = t.tr.deleteRange(a, u);
+            return e = !0, i;
+          }
+          e = !0;
+        },
+        filterTransaction: (r, s) => {
+          const { limit: t } = this.options;
+          if (!r.docChanged || t === 0 || t === null || t === void 0)
+            return !0;
+          const n = this.storage.characters({ node: s.doc }), o = this.storage.characters({ node: r.doc }), c = r.getMeta("paste");
+          if (o <= t || n > t && o > t && o <= n)
+            return !0;
+          if (n > t && o > t && o > n || !c)
+            return !1;
+          const { pos: a } = r.selection.$head, u = o - t, i = a - u, d = a;
+          return !(i < 0 || (r.deleteRange(i, d), this.storage.characters({ node: r.doc }) > t));
+        }
+      })
+    ];
+  }
+});
+export {
+  p as CharacterCount
+};

package/dist/components/MessageInput/TextEditor/extensions/imageExtension.d.ts

@@ -0,0 +1,2 @@
+declare function createImageExtension(): import('@tiptap/core').Node<import('@tiptap/extension-image').ImageOptions, any>;
+export { createImageExtension, };

package/dist/components/MessageInput/TextEditor/extensions/imageExtension.js

@@ -0,0 +1,62 @@
+import { I as g } from "../../../../index-7vNB_Vx8.js";
+import { P as m, a as f } from "../../../../index-Do-2CngU.js";
+function I() {
+  return g.extend({
+    addOptions() {
+      var e;
+      return {
+        ...(e = this.parent) == null ? void 0 : e.call(this),
+        HTMLAttributes: {
+          class: "message-image"
+        }
+      };
+    },
+    addAttributes() {
+      var e;
+      return {
+        ...(e = this.parent) == null ? void 0 : e.call(this),
+        fileData: {
+          default: null,
+          parseHTML: () => null,
+          renderHTML: () => ({})
+        }
+      };
+    },
+    addProseMirrorPlugins() {
+      return [
+        new m({
+          key: new f("imagePaste"),
+          props: {
+            handlePaste: (e, l) => {
+              var i;
+              const s = Array.from(((i = l.clipboardData) == null ? void 0 : i.items) || []).filter((a) => a.type.indexOf("image") === 0);
+              return s.length === 0 ? !1 : (s.forEach((a) => {
+                const r = a.getAsFile();
+                if (r) {
+                  const t = new FileReader();
+                  t.onload = (n) => {
+                    var o;
+                    const d = (o = n.target) == null ? void 0 : o.result, c = e.state.schema.nodes.image.create({
+                      src: d,
+                      fileData: r
+                    }), u = e.state.tr.replaceSelectionWith(c);
+                    e.dispatch(u);
+                  }, t.onerror = (n) => {
+                    console.error("[MessageInput]::Failed to read image file:", n);
+                  }, t.onabort = () => {
+                    console.warn("[MessageInput]::Image file reading was aborted.");
+                  }, t.readAsDataURL(r);
+                }
+              }), !0);
+            }
+          }
+        })
+      ];
+    }
+  }).configure({
+    inline: !0
+  });
+}
+export {
+  I as createImageExtension
+};

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

@@ -1,73 +1,83 @@
-import { defineComponent as F, ref as p, computed as g, onMounted as B, onUnmounted as k, watch as c, createElementBlock as f, openBlock as m, normalizeClass as d, unref as i, createElementVNode as _, renderSlot as h } from "vue";
+import { defineComponent as F, ref as f, computed as S, onMounted as B, onUnmounted as L, watch as r, createElementBlock as m, openBlock as h, normalizeClass as d, unref as s, createElementVNode as _, renderSlot as x } from "vue";
 import { useUIKit as M } from "@tencentcloud/uikit-base-component-vue3";
-import { createEditor as S } from "./EditorCore.js";
+import { createEditor as k } from "./EditorCore.js";
 import { useMessageInputState as D } from "../../../states/MessageInputState/MessageInputState.js";
-import { useConversationListState as R } from "../../../states/ConversationListState/ConversationListState.js";
-const T = "_disabled_ihh75_11", U = "_editor_ihh75_21", o = {
+import { useConversationListState as P } from "../../../states/ConversationListState/ConversationListState.js";
+const R = "_disabled_ihh75_11", U = "_editor_ihh75_21", i = {
   "input-wrapper": "_input-wrapper_ihh75_1",
-  disabled: T,
+  disabled: R,
   "input-prefix": "_input-prefix_ihh75_15",
   "input-suffix": "_input-suffix_ihh75_16",
   editor: U
-}, K = /* @__PURE__ */ F({
+}, A = /* @__PURE__ */ F({
   __name: "TextEditor",
   props: {
     autoFocus: { type: Boolean, default: !0 },
     disabled: { type: Boolean, default: !1 },
-    placeholder: { default: "" }
+    placeholder: { default: void 0 },
+    maxLength: { default: void 0 }
   },
   setup(b) {
-    const t = b, { t: x } = M(), { activeConversation: E } = R(), { updateRawValue: v, sendMessage: I, setEditorInstance: l, setContent: r } = D(), u = p(null), n = p(t.autoFocus), y = g(() => t.disabled ? "" : t.placeholder || x("MessageInput.enter_a_message"));
-    let s = null;
+    const t = b, { t: v, language: g } = M(), { activeConversation: E } = P(), { updateRawValue: y, sendMessage: I, setEditorInstance: u, setContent: l } = D(), n = f(null), p = f(t.autoFocus), c = S(() => t.placeholder ?? v("MessageInput.enter_a_message"));
+    let a = null;
     return B(() => {
-      const e = u.value;
-      e && (e.classList.add("message-input"), e.dataset.editorCreated || (s = S({
+      const e = n.value;
+      e && (e.classList.add("message-input"), e.dataset.editorCreated || (a = k({
         element: e,
-        placeholder: y.value,
+        placeholder: c.value,
+        isPlaceholderOnlyShowWhenEditable: t.placeholder === void 0,
         autoFocus: t.autoFocus,
         disabled: t.disabled,
-        onUpdate: (a) => {
-          v(a);
+        maxLength: t.maxLength,
+        onUpdate: (o) => {
+          y(o);
         },
         onEnter: () => {
-          I(), r("");
+          I(), l("");
         },
         onFocus: () => {
-          n.value = !0;
+          p.value = !0;
         },
         onBlur: () => {
-          n.value = !1;
+          p.value = !1;
         }
-      }), e.dataset.editorCreated = "true", l(s)));
-    }), k(() => {
-      const e = u.value;
-      s && e && (s.destroy(), e.removeAttribute("data-editor-created"), l(null));
-    }), c(E, (e, a) => {
-      (e == null ? void 0 : e.conversationID) !== (a == null ? void 0 : a.conversationID) && r("");
-    }), c(() => t.disabled, (e) => {
-      s && (s.setEditable(!e), e && r(""));
-    }), (e, a) => (m(), f("div", {
-      class: d([i(o)["input-wrapper"], t.disabled && i(o).disabled])
+      }), e.dataset.editorCreated = "true", u(a)));
+    }), L(() => {
+      const e = n.value;
+      a && e && (a.destroy(), e.removeAttribute("data-editor-created"), u(null));
+    }), r(E, (e, o) => {
+      (e == null ? void 0 : e.conversationID) !== (o == null ? void 0 : o.conversationID) && l("");
+    }), r(g, () => {
+      if (a && t.placeholder === void 0) {
+        const e = a.extensionManager.extensions.find(
+          (o) => o.name === "placeholder"
+        );
+        e && (e.options.placeholder = c.value, a.view.updateState(a.state));
+      }
+    }), r(() => t.disabled, (e) => {
+      a && (a.setEditable(!e), e && l(""));
+    }), (e, o) => (h(), m("div", {
+      class: d([s(i)["input-wrapper"], t.disabled && s(i).disabled])
     }, [
       _("div", {
-        class: d(i(o)["input-prefix"])
+        class: d(s(i)["input-prefix"])
       }, [
-        h(e.$slots, "inputPrefix")
+        x(e.$slots, "inputPrefix")
       ], 2),
-      (m(), f("div", {
+      (h(), m("div", {
         ref_key: "editorDomRef",
-        ref: u,
+        ref: n,
         key: t.disabled ? "disabled" : "enabled",
-        class: d(i(o).editor)
+        class: d(s(i).editor)
       }, null, 2)),
       _("div", {
-        class: d(i(o)["input-suffix"])
+        class: d(s(i)["input-suffix"])
       }, [
-        h(e.$slots, "inputSuffix")
+        x(e.$slots, "inputSuffix")
       ], 2)
     ], 2));
   }
 });
 export {
-  K as TextEditor
+  A as TextEditor
 };

package/dist/components/MessageInput/VideoCallPicker/VideoCallPicker.js

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

package/dist/components/MessageInput/i18n/index.d.ts

@@ -24,5 +24,9 @@ export declare const resources: {
         unknown: string;
         enter_a_message: string;
         send: string;
+        select_call_members: string;
+        cancel: string;
+        confirm: string;
+        initiate_call: string;
     };
 };

package/dist/components/MessageInput/i18n/zh-CN.d.ts

@@ -8,5 +8,9 @@ declare const MessageInput: {
     unknown: string;
     enter_a_message: string;
     send: string;
+    select_call_members: string;
+    cancel: string;
+    confirm: string;
+    initiate_call: string;
 };
 export default MessageInput;

package/dist/components/MessageInput/i18n/zh-CN.js

@@ -7,7 +7,11 @@ const e = {
   custom_message: "自定义消息",
   unknown: "未知",
   enter_a_message: "输入消息",
-  send: "发送"
+  send: "发送",
+  select_call_members: "选择成员",
+  cancel: "取消",
+  confirm: "确认",
+  initiate_call: "发起通话"
 };
 export {
   e as default