tuikit-atomicx-vue3 0.1.0 → 3.3.0-beta.3

package/dist/components/BarrageInput/BarrageInputH5.js

@@ -1,7 +1,10 @@
-import { defineComponent, ref, createElementBlock, openBlock, createVNode, createBlock, createCommentVNode, unref, withCtx, createTextVNode, toDisplayString } from "vue";
-import { useUIKit, TUIButton } from "@tencentcloud/uikit-base-component-vue3";
-import { useMessageInputState } from "../../states/MessageInputState/MessageInputState.js";
+import { defineComponent, computed, ref, createElementBlock, openBlock, createVNode, createBlock, createCommentVNode, unref, withCtx, createTextVNode, toDisplayString } from "vue";
+import { useUIKit, TUIButton, TUIToast } from "@tencentcloud/uikit-base-component-vue3";
+import { useLiveAudienceState } from "../../states/LiveAudienceState.js";
+import { useLoginState } from "../../states/LoginState.js";
 import BarrageInputPC from "./BarrageInput.js";
+import { ERROR_MESSAGE } from "./constants.js";
+import { useMessageInputState } from "../../states/MessageInputState/MessageInputState.js";
 import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
 const _hoisted_1 = { class: "live-message-input-h5" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -10,14 +13,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     containerClass: { default: "" },
     containerStyle: { default: () => ({}) },
     height: { default: "" },
-    minHeight: { default: "40px" },
-    maxHeight: { default: "140px" },
+    width: {},
+    minHeight: { default: "" },
+    maxHeight: { default: "" },
     placeholder: {},
     disabled: { type: Boolean, default: false },
-    autoFocus: { type: Boolean, default: false }
+    autoFocus: { type: Boolean, default: false },
+    maxLength: { default: 80 }
   },
-  setup(__props) {
+  emits: ["focus", "blur"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
     const props = __props;
+    const { loginUserInfo } = useLoginState();
+    const { audienceList } = useLiveAudienceState();
+    const inputClass = computed(() => ["message-input-container-h5", props.containerClass].join(" "));
+    const disabled = computed(() => {
+      const localUser = audienceList.value.find((item) => {
+        var _a;
+        return item.userId === ((_a = loginUserInfo.value) == null ? void 0 : _a.userId);
+      });
+      return props.disabled || (localUser == null ? void 0 : localUser.isMessageDisabled);
+    });
     const { t } = useUIKit();
     const { inputRawValue, setContent, sendMessage, blurEditor } = useMessageInputState();
     const isFocus = ref(false);
@@ -25,11 +42,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const handleTouchStart = () => {
       isTouching.value = true;
     };
-    const handleSend = () => {
+    const handleSend = async () => {
       if (inputRawValue.value) {
-        sendMessage();
-        setContent("");
         blurEditor();
+        try {
+          const inputValue = inputRawValue.value;
+          setContent("");
+          await sendMessage(inputValue);
+        } catch (err) {
+          TUIToast.error({
+            message: t(ERROR_MESSAGE[err.code] || "send message failed")
+          });
+        }
       }
     };
     const handleTouchEnd = () => {
@@ -41,24 +65,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const handleFocus = async () => {
       isFocus.value = true;
+      emit("focus");
     };
     const handleBlur = () => {
       isFocus.value = false;
+      emit("blur");
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(BarrageInputPC, {
           autoFocus: props.autoFocus,
-          containerClass: props.containerClass,
+          containerClass: inputClass.value,
           containerStyle: props.containerStyle,
+          width: props.width,
           height: props.height,
           minHeight: props.minHeight,
           maxHeight: props.maxHeight,
           placeholder: props.placeholder,
-          disabled: props.disabled,
+          disabled: disabled.value,
+          maxLength: props.maxLength,
           onFocus: handleFocus,
           onBlur: handleBlur
-        }, null, 8, ["autoFocus", "containerClass", "containerStyle", "height", "minHeight", "maxHeight", "placeholder", "disabled"]),
+        }, null, 8, ["autoFocus", "containerClass", "containerStyle", "width", "height", "minHeight", "maxHeight", "placeholder", "disabled", "maxLength"]),
         isFocus.value ? (openBlock(), createBlock(unref(TUIButton), {
           key: 0,
           type: "primary",
@@ -74,7 +102,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const BarrageInputH5 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2ea9f5b3"]]);
+const BarrageInputH5 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-11c76a53"]]);
 export {
   BarrageInputH5 as default
 };

package/dist/components/BarrageInput/BarrageInputH5.vue.d.ts

@@ -2,11 +2,13 @@ interface Props {
     containerClass?: string;
     containerStyle?: Record<string, any>;
     height?: string;
+    width?: string;
     minHeight?: string;
     maxHeight?: string;
     placeholder?: string;
     disabled?: boolean;
     autoFocus?: boolean;
+    maxLength?: number;
 }
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     containerClass: string;
@@ -16,7 +18,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     maxHeight: string;
     disabled: boolean;
     autoFocus: boolean;
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    maxLength: number;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    focus: () => void;
+    blur: () => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     containerClass: string;
     containerStyle: () => {};
     height: string;
@@ -24,10 +30,15 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     maxHeight: string;
     disabled: boolean;
     autoFocus: boolean;
-}>>> & Readonly<{}>, {
+    maxLength: number;
+}>>> & Readonly<{
+    onBlur?: (() => any) | undefined;
+    onFocus?: (() => any) | undefined;
+}>, {
     height: string;
     disabled: boolean;
     autoFocus: boolean;
+    maxLength: number;
     containerClass: string;
     containerStyle: Record<string, any>;
     minHeight: string;

package/dist/components/BarrageInput/EmojiPicker/EmojiPicker.js

@@ -1,14 +1,15 @@
 import { defineComponent, onMounted, createElementBlock, openBlock, createVNode, unref, withCtx, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList } from "vue";
 import { useUIKit, IconEmoji } from "@tencentcloud/uikit-base-component-vue3";
-import { P as PopoverRoot_default, a as PopoverTrigger_default, b as PopoverPortal_default, c as PopoverContent_default } from "../../../PopoverTrigger-BhQt39dx.js";
+import { P as PopoverRoot_default, a as PopoverTrigger_default, b as PopoverPortal_default, c as PopoverContent_default } from "../../../PopoverTrigger-BKOIHfdS.js";
 import { emojiUrlMap, emojiBaseUrl } from "../../../constants/emoji.js";
 import { transformTextWithEmojiKeyToName } from "../../../utils/emoji.js";
-import { useMessageInputState, MessageContentType } from "../../../states/MessageInputState/MessageInputState.js";
+import { useMessageInputState } from "../../../states/MessageInputState/MessageInputState.js";
+import { MessageContentType } from "../../../states/MessageInputState/type.js";
 import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
 const styles = {
-  "emoji-picker__icon": "_emoji-picker__icon_qv6nf_1",
-  "emoji-picker__list": "_emoji-picker__list_qv6nf_4",
-  "emoji-picker__list-item": "_emoji-picker__list-item_qv6nf_15"
+  "emoji-picker__icon": "_emoji-picker__icon_rc96r_1",
+  "emoji-picker__list": "_emoji-picker__list_rc96r_4",
+  "emoji-picker__list-item": "_emoji-picker__list-item_rc96r_15"
 };
 const _hoisted_1 = { class: "flex flex-col gap-2.5" };
 const _hoisted_2 = ["onClick"];
@@ -67,8 +68,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               default: withCtx(() => [
                 createVNode(unref(PopoverContent_default), {
                   side: "top",
-                  align: "start",
-                  "side-offset": 5,
+                  align: "center",
+                  "side-offset": 8,
                   style: { "box-sizing": "border-box", "z-index": "1000" }
                 }, {
                   default: withCtx(() => [
@@ -104,7 +105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const EmojiPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5db30dda"]]);
+const EmojiPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-79c138b3"]]);
 export {
   EmojiPicker as default
 };

package/dist/components/BarrageInput/TextEditor/CharacterCountExtension.d.ts

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

package/dist/components/BarrageInput/TextEditor/CharacterCountExtension.js

@@ -0,0 +1,93 @@
+import { E as Extension, P as Plugin, a as PluginKey } from "../../../index-t9cbWbGG.js";
+const CharacterCount = Extension.create({
+  name: "characterCount",
+  addOptions() {
+    return {
+      limit: null,
+      textCounter: (text) => text.length,
+      wordCounter: (text) => text.split(" ").filter((word) => word !== "").length
+    };
+  },
+  addStorage() {
+    return {
+      characters: () => 0,
+      words: () => 0
+    };
+  },
+  onBeforeCreate() {
+    this.storage.characters = (options) => {
+      const node = (options == null ? void 0 : options.node) || this.editor.state.doc;
+      return node.nodeSize;
+    };
+    this.storage.words = (options) => {
+      const node = (options == null ? void 0 : options.node) || this.editor.state.doc;
+      const text = node.textBetween(0, node.content.size, " ", " ");
+      return this.options.wordCounter(text);
+    };
+  },
+  addProseMirrorPlugins() {
+    let initialEvaluationDone = false;
+    return [
+      new Plugin({
+        key: new PluginKey("characterCount"),
+        appendTransaction: (transactions, oldState, newState) => {
+          if (initialEvaluationDone) {
+            return;
+          }
+          const { limit } = this.options;
+          if (limit === null || limit === void 0 || limit === 0) {
+            initialEvaluationDone = true;
+            return;
+          }
+          const initialContentSize = this.storage.characters({ node: newState.doc });
+          if (initialContentSize > limit) {
+            const over = initialContentSize - limit;
+            const from = 0;
+            const to = over;
+            console.warn(
+              `[CharacterCount] Initial content exceeded limit of ${limit} characters. Content was automatically trimmed.`
+            );
+            const tr = newState.tr.deleteRange(from, to);
+            initialEvaluationDone = true;
+            return tr;
+          }
+          initialEvaluationDone = true;
+        },
+        filterTransaction: (transaction, state) => {
+          const { limit } = this.options;
+          if (!transaction.docChanged || limit === 0 || limit === null || limit === void 0) {
+            return true;
+          }
+          const oldSize = this.storage.characters({ node: state.doc });
+          const newSize = this.storage.characters({ node: transaction.doc });
+          if (newSize <= limit) {
+            return true;
+          }
+          if (oldSize > limit && newSize > limit && newSize <= oldSize) {
+            return true;
+          }
+          if (oldSize > limit && newSize > limit && newSize > oldSize) {
+            return false;
+          }
+          const isPaste = transaction.getMeta("paste");
+          if (!isPaste) {
+            return false;
+          }
+          const { pos } = transaction.selection.$head;
+          const over = newSize - limit;
+          const from = pos - over;
+          const to = pos;
+          transaction.deleteRange(from, to);
+          const updatedSize = this.storage.characters({ node: transaction.doc });
+          if (updatedSize > limit) {
+            return false;
+          }
+          return true;
+        }
+      })
+    ];
+  }
+});
+export {
+  CharacterCount
+};

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

@@ -1,16 +1,17 @@
 import { Editor } from '@tiptap/vue-3';
-import { IInputContent } from '../../../states/MessageInputState';
+import { InputContent } from '../../../states/MessageInputState';
 
 interface EditorOptions {
     element: Element;
     placeholder?: string;
     autoFocus?: boolean;
     disabled?: boolean;
-    onUpdate?: (content: IInputContent[]) => void;
+    onUpdate?: (content: InputContent[]) => void;
     onEnter?: () => void;
     onFocus?: () => void;
     onBlur?: () => void;
+    maxLength?: number;
 }
-declare function createEditor({ element, placeholder, autoFocus, disabled, onUpdate, onEnter, onFocus, onBlur, }: EditorOptions): Editor;
+declare function createEditor({ element, placeholder, autoFocus, disabled, maxLength, onUpdate, onEnter, onFocus, onBlur, }: EditorOptions): Editor;
 export { createEditor };
 export type { Editor };

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

@@ -1,6 +1,8 @@
-import { S as StarterKit, P as Placeholder, E as Editor, a as Extension, I as Image } from "../../../index-oR-rgHxX.js";
-import { MessageContentType } from "../../../states/MessageInputState/MessageInputState.js";
+import { S as StarterKit, P as Placeholder, E as Editor, I as Image } from "../../../index-ex2Jv3Tj.js";
 import { isMobile } from "../../../utils/environment.js";
+import { CharacterCount } from "./CharacterCountExtension.js";
+import { E as Extension } from "../../../index-t9cbWbGG.js";
+import { MessageContentType } from "../../../states/MessageInputState/type.js";
 function createEmojiExtension() {
   return Image.extend({
     name: MessageContentType.EMOJI,
@@ -114,6 +116,7 @@ function createEditor({
   placeholder = "",
   autoFocus = false,
   disabled = false,
+  maxLength,
   onUpdate,
   onEnter,
   onFocus,
@@ -121,6 +124,9 @@ function createEditor({
 }) {
   const createBaseExtensions = (enterHandler) => [
     StarterKit,
+    CharacterCount.configure({
+      limit: maxLength
+    }),
     createEnterKeyExtension(enterHandler ? { onEnter: enterHandler } : void 0),
     createEmojiExtension(),
     createImageExtension(),

package/dist/components/BarrageInput/TextEditor/TextEditor.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../../../TextEditor.vue_vue_type_script_setup_true_lang-w_I4bsmJ.js";
+import { TextEditor as _sfc_main } from "./index.js";
 export {
   _sfc_main as default
 };

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

@@ -2,6 +2,7 @@ interface ITextEditorProps {
     autoFocus?: boolean;
     disabled?: boolean;
     placeholder?: string;
+    maxLength?: number;
 }
 declare function __VLS_template(): {
     prefix?(_: {}): any;

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

@@ -1,4 +1,135 @@
-import { _ } from "../../../TextEditor.vue_vue_type_script_setup_true_lang-w_I4bsmJ.js";
+import { defineComponent, ref, computed, watch, nextTick, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, createCommentVNode, renderSlot, toDisplayString } from "vue";
+import { useUIKit, TUIToast } from "@tencentcloud/uikit-base-component-vue3";
+import { ERROR_MESSAGE } from "../constants.js";
+import { createEditor } from "./EditorCore.js";
+import { useConversationListState } from "../../../states/ConversationListState/ConversationListState.js";
+import { useMessageInputState } from "../../../states/MessageInputState/MessageInputState.js";
+const disabled = "_disabled_3es4w_13";
+const editor = "_editor_3es4w_30";
+const styles = {
+  "input-wrapper": "_input-wrapper_3es4w_1",
+  disabled,
+  "input-prefix": "_input-prefix_3es4w_17",
+  "input-suffix": "_input-suffix_3es4w_23",
+  editor,
+  "disabled-editor": "_disabled-editor_3es4w_37"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TextEditor",
+  props: {
+    autoFocus: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    placeholder: { default: "" },
+    maxLength: {}
+  },
+  emits: ["focus", "blur"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useUIKit();
+    const { activeConversation } = useConversationListState();
+    const { inputRawValue, updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
+    const editorRef = ref(null);
+    const isFocused = ref(props.autoFocus);
+    const placeholderText = computed(() => props.placeholder || t("Say something"));
+    let editorInstance = null;
+    const createEditorInstance = (p) => {
+      const element = editorRef.value;
+      if (!element || p.disabled) {
+        return;
+      }
+      if (!element.dataset.editorCreated) {
+        editorInstance = createEditor({
+          element,
+          placeholder: placeholderText.value,
+          autoFocus: p.autoFocus,
+          disabled: p.disabled,
+          maxLength: p.maxLength,
+          onUpdate: (content) => {
+            updateRawValue(content);
+          },
+          onEnter: async () => {
+            try {
+              const inputValue = inputRawValue.value;
+              setContent("");
+              await sendMessage(inputValue);
+            } catch (err) {
+              TUIToast.error({
+                message: t(ERROR_MESSAGE[err.code] || "send message failed")
+              });
+            }
+          },
+          onFocus: () => {
+            isFocused.value = true;
+            emit("focus");
+          },
+          onBlur: () => {
+            isFocused.value = false;
+            emit("blur");
+          }
+        });
+        element.dataset.editorCreated = "true";
+        setEditorInstance(editorInstance);
+      }
+    };
+    const destroyEditorInstance = () => {
+      var _a;
+      editorInstance == null ? void 0 : editorInstance.destroy();
+      (_a = editorRef.value) == null ? void 0 : _a.removeAttribute("data-editor-created");
+      setEditorInstance(null);
+    };
+    watch(
+      () => props.disabled,
+      async (newDisabled, oldDisabled) => {
+        if (newDisabled !== oldDisabled) {
+          if (newDisabled) {
+            destroyEditorInstance();
+          } else {
+            await nextTick();
+            createEditorInstance(props);
+          }
+        }
+      }
+    );
+    onMounted(() => {
+      createEditorInstance(props);
+    });
+    onUnmounted(() => {
+      destroyEditorInstance();
+    });
+    watch(activeConversation, (newConversation, oldConversation) => {
+      if ((newConversation == null ? void 0 : newConversation.conversationID) !== (oldConversation == null ? void 0 : oldConversation.conversationID)) {
+        setContent("");
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(styles)["input-wrapper"], props.disabled && unref(styles).disabled])
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(unref(styles)["input-prefix"])
+        }, [
+          renderSlot(_ctx.$slots, "prefix")
+        ], 2),
+        !props.disabled ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          ref_key: "editorRef",
+          ref: editorRef,
+          class: normalizeClass(unref(styles)["editor"])
+        }, null, 2)) : createCommentVNode("", true),
+        props.disabled ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass([unref(styles)["disabled-editor"]])
+        }, toDisplayString(placeholderText.value), 3)) : createCommentVNode("", true),
+        createElementVNode("span", {
+          class: normalizeClass(unref(styles)["input-suffix"])
+        }, [
+          renderSlot(_ctx.$slots, "suffix")
+        ], 2)
+      ], 2);
+    };
+  }
+});
 export {
-  _ as TextEditor
+  _sfc_main as TextEditor
 };

package/dist/components/BarrageInput/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const ERROR_MESSAGE: {
+    10017: string;
+};

package/dist/components/BarrageInput/constants.js

@@ -0,0 +1,6 @@
+const ERROR_MESSAGE = {
+  10017: "you have been forbidden to speak"
+};
+export {
+  ERROR_MESSAGE
+};

package/dist/components/BarrageInput/i18n/en-US/index.d.ts

@@ -2,4 +2,6 @@ export declare const resource: {
     'Say something': string;
     'You have been muted': string;
     Send: string;
+    'you have been forbidden to speak': string;
+    'send message failed': string;
 };

package/dist/components/BarrageInput/i18n/en-US/index.js

@@ -1,7 +1,9 @@
 const resource = {
   "Say something": "Say something...",
   "You have been muted": "You have been muted",
-  Send: "Send"
+  Send: "Send",
+  "you have been forbidden to speak": "You have been forbidden to speak",
+  "send message failed": "Send message failed"
 };
 export {
   resource

package/dist/components/BarrageInput/i18n/zh-CN/index.d.ts

@@ -2,4 +2,6 @@ export declare const resource: {
     'Say something': string;
     'You have been muted': string;
     Send: string;
+    'you have been forbidden to speak': string;
+    'send message failed': string;
 };

package/dist/components/BarrageInput/i18n/zh-CN/index.js

@@ -1,7 +1,9 @@
 const resource = {
   "Say something": "说点什么...",
   "You have been muted": "您已被禁言",
-  Send: "发送"
+  Send: "发送",
+  "you have been forbidden to speak": "您已被禁言",
+  "send message failed": "发送失败"
 };
 export {
   resource