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

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;
     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-D-KJvDvy.js";
-import { E as M } from "../../../index-D88ja_7_.js";
-import { MessageContentType as n } from "../../../states/MessageInputState/type.js";
-function y() {
-  return o.extend({
-    name: n.EMOJI,
+import { I as x } from "../../../index-B_-9wgM4.js";
+import { S as y, P as d, E as M } from "../../../index-DMfTuy0v.js";
+import { CharacterCount as b } from "./extensions/characterCountExtension.js";
+import { createImageExtension as p } from "./extensions/imageExtension.js";
+import { E as I } from "../../../index-DV6o6s43.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
 };

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;
     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-DV6o6s43.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-B_-9wgM4.js";
+import { P as m, a as f } from "../../../../index-DV6o6s43.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
+};