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

package/dist/components/LiveList/pullToRefresh.js

@@ -0,0 +1,204 @@
+import { defineComponent, useCssVars, ref, computed, createElementBlock, openBlock, createElementVNode, normalizeStyle, normalizeClass, createBlock, createCommentVNode, unref, toDisplayString, renderSlot } from "vue";
+import { IconArrowUpNew, IconCheck, IconErrorToast } from "@tencentcloud/uikit-base-component-vue3";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = {
+  key: 1,
+  class: "refresh-loading"
+};
+const _hoisted_2 = { class: "refresh-text" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "pullToRefresh",
+  props: {
+    threshold: { default: 60 },
+    resistance: { default: 2.5 },
+    disabled: { type: Boolean, default: false },
+    resultDuration: { default: 500 },
+    text: { default: () => ({
+      pull: "Pull to refresh",
+      release: "Release to refresh",
+      loading: "Loading...",
+      success: "Refresh success",
+      error: "Refresh failed"
+    }) }
+  },
+  emits: ["refresh", "loadMore"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "38f9ff2f": props.threshold + "px"
+    }));
+    const refreshState = ref(
+      "pulling"
+      /* Pulling */
+    );
+    const startY = ref(0);
+    const currentY = ref(0);
+    const isTouching = ref(false);
+    const contentRef = ref(null);
+    let timer = null;
+    const props = __props;
+    const emit = __emit;
+    __expose({
+      completeRefresh
+    });
+    const pullDistance = computed(() => {
+      if (refreshState.value === "loading") {
+        return props.threshold;
+      }
+      if (!isTouching.value) return 0;
+      return Math.max(0, (currentY.value - startY.value) / props.resistance);
+    });
+    const contentTranslateY = computed(() => {
+      if (refreshState.value === "loading" || refreshState.value === "success" || refreshState.value === "error") {
+        return props.threshold;
+      }
+      return Math.min(pullDistance.value, props.threshold);
+    });
+    const translateY = computed(() => {
+      if (refreshState.value === "loading" || refreshState.value === "success" || refreshState.value === "error") {
+        return 0;
+      }
+      return Math.min(pullDistance.value, props.threshold) - props.threshold;
+    });
+    const isIndicatorVisible = computed(() => {
+      if (refreshState.value === "loading" || refreshState.value === "success" || refreshState.value === "error") {
+        return true;
+      }
+      return pullDistance.value > 10;
+    });
+    const statusText = computed(() => {
+      switch (refreshState.value) {
+        case "releasing":
+          return props.text.release;
+        case "loading":
+          return props.text.loading;
+        case "success":
+          return props.text.success;
+        case "error":
+          return props.text.error;
+        default:
+          return props.text.pull;
+      }
+    });
+    function isScrollAtBottom(threshold = 50) {
+      if (!contentRef.value) {
+        return false;
+      }
+      return contentRef.value.scrollTop + contentRef.value.clientHeight >= contentRef.value.scrollHeight - threshold;
+    }
+    function handleWheel(event) {
+      if (!contentRef.value) {
+        return;
+      }
+      if (event.deltaY > 0 && isScrollAtBottom()) {
+        emit("loadMore");
+      }
+    }
+    function handleScroll() {
+      if (!contentRef.value) {
+        return;
+      }
+      if (isScrollAtBottom()) {
+        emit("loadMore");
+      }
+    }
+    function checkIsAtTop() {
+      if (!contentRef.value) return true;
+      return contentRef.value.scrollTop === 0;
+    }
+    function onTouchStart(event) {
+      if (props.disabled || refreshState.value === "loading") return;
+      if (!checkIsAtTop()) return;
+      isTouching.value = true;
+      startY.value = event.touches[0].clientY;
+      currentY.value = startY.value;
+      refreshState.value = "pulling";
+    }
+    function onTouchMove(event) {
+      if (!isTouching.value || props.disabled || refreshState.value === "loading") return;
+      currentY.value = event.touches[0].clientY;
+      if (pullDistance.value > 0 && checkIsAtTop()) {
+        event.preventDefault();
+      }
+      refreshState.value = pullDistance.value > props.threshold ? "releasing" : "pulling";
+    }
+    function onTouchEnd() {
+      if (!isTouching.value || props.disabled) return;
+      isTouching.value = false;
+      if (refreshState.value === "loading") return;
+      if (refreshState.value === "releasing") {
+        startRefresh();
+      } else {
+        resetPullState();
+      }
+    }
+    function startRefresh() {
+      refreshState.value = "loading";
+      emit("refresh", completeRefresh);
+    }
+    function completeRefresh(success = true) {
+      refreshState.value = success ? "success" : "error";
+      if (timer) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(() => {
+        resetPullState();
+      }, props.resultDuration);
+    }
+    function resetPullState() {
+      startY.value = 0;
+      currentY.value = 0;
+      if (refreshState.value !== "loading") {
+        refreshState.value = "pulling";
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "pull-to-refresh",
+        onTouchstart: onTouchStart,
+        onTouchmove: onTouchMove,
+        onTouchend: onTouchEnd,
+        onTouchcancel: onTouchEnd
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(["refresh-indicator", [refreshState.value, { visible: isIndicatorVisible.value }]]),
+          style: normalizeStyle({ transform: `translateY(${translateY.value}px)` })
+        }, [
+          refreshState.value !== "loading" && refreshState.value !== "success" && refreshState.value !== "error" ? (openBlock(), createBlock(unref(IconArrowUpNew), {
+            key: 0,
+            class: normalizeClass(["refresh-arrow", {
+              releasing: refreshState.value === "releasing"
+              /* Releasing */
+            }]),
+            size: 16
+          }, null, 8, ["class"])) : createCommentVNode("", true),
+          refreshState.value === "loading" ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("", true),
+          refreshState.value === "success" ? (openBlock(), createBlock(unref(IconCheck), {
+            key: 2,
+            class: "refresh-success",
+            size: 16
+          })) : createCommentVNode("", true),
+          refreshState.value === "error" ? (openBlock(), createBlock(unref(IconErrorToast), {
+            key: 3,
+            class: "refresh-error",
+            size: 16
+          })) : createCommentVNode("", true),
+          createElementVNode("span", _hoisted_2, toDisplayString(statusText.value), 1)
+        ], 6),
+        createElementVNode("div", {
+          ref_key: "contentRef",
+          ref: contentRef,
+          class: "refresh-content",
+          style: normalizeStyle({ transform: `translateY(${contentTranslateY.value}px)` }),
+          onScroll: handleScroll,
+          onWheel: handleWheel
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 36)
+      ], 32);
+    };
+  }
+});
+const PullToRefresh = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4886b108"]]);
+export {
+  PullToRefresh as default
+};

package/dist/components/LiveList/pullToRefresh.vue.d.ts

@@ -0,0 +1,86 @@
+interface Props {
+    threshold?: number;
+    resistance?: number;
+    disabled?: boolean;
+    resultDuration?: number;
+    text?: {
+        pull: string;
+        release: string;
+        loading: string;
+        success: string;
+        error: string;
+    };
+}
+declare function completeRefresh(success?: boolean): void;
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    threshold: number;
+    resistance: number;
+    disabled: boolean;
+    resultDuration: number;
+    text: () => {
+        pull: string;
+        release: string;
+        loading: string;
+        success: string;
+        error: string;
+    };
+}>>, {
+    completeRefresh: typeof completeRefresh;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    loadMore: () => void;
+    refresh: (completeRefresh: (success?: boolean) => void) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    threshold: number;
+    resistance: number;
+    disabled: boolean;
+    resultDuration: number;
+    text: () => {
+        pull: string;
+        release: string;
+        loading: string;
+        success: string;
+        error: string;
+    };
+}>>> & Readonly<{
+    onLoadMore?: (() => any) | undefined;
+    onRefresh?: ((completeRefresh: (success?: boolean) => void) => any) | undefined;
+}>, {
+    text: {
+        pull: string;
+        release: string;
+        loading: string;
+        success: string;
+        error: string;
+    };
+    disabled: boolean;
+    threshold: number;
+    resistance: number;
+    resultDuration: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/LiveScenePanel/CameraSettingDialog.js

@@ -1,4 +1,4 @@
-import { defineComponent, onUnmounted, computed, ref, watch, onMounted, createBlock, openBlock, unref, withCtx, createElementVNode, createVNode, toDisplayString, createElementBlock, Fragment, renderList } from "vue";
+import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, createBlock, openBlock, unref, withCtx, createElementVNode, createVNode, toDisplayString, createElementBlock, Fragment, renderList } from "vue";
 import { useDeviceState } from "../../states/DeviceState.js";
 import { TRTCCloud, TRTCVideoResolution, TRTCVideoMirrorType, TRTCVideoFillMode, TRTCVideoRotation } from "@tencentcloud/tuiroom-engine-js";
 import { useUIKit, TUIDialog, TUISelect, TUIOption } from "@tencentcloud/uikit-base-component-vue3";
@@ -24,9 +24,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { cameraList } = useDeviceState();
     const props = __props;
     const emits = __emit;
-    onUnmounted(async () => {
-      await previewTRTCCloud.stopCameraDeviceTest();
-    });
     const title = computed(() => {
       return props.mediaSource ? t("Update Camera") : t("Add Camera");
     });
@@ -63,6 +60,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       await previewTRTCCloud.startCameraDeviceTest("video-preview");
     });
+    onBeforeUnmount(async () => {
+      await previewTRTCCloud.stopCameraDeviceTest();
+      previewTRTCCloud.destroy();
+    });
     watch(
       () => props.mediaSource,
       async (mediaSource) => {
@@ -208,7 +209,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CameraSettingDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5e98e054"]]);
+const CameraSettingDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cbd9ccf2"]]);
 export {
   CameraSettingDialog as default
 };

package/dist/components/LiveScenePanel/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, ref, onUnmounted, createElementBlock, openBlock, normalizeClass, unref, createVNode, createElementVNode, createBlock, createCommentVNode, Fragment, renderList } from "vue";
+import { defineComponent, computed, ref, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, unref, createVNode, createElementVNode, createBlock, createCommentVNode, Fragment, renderList } from "vue";
 import TUIRoomEngine, { TRTCMediaSourceType, TRTCVideoResolution, TUIVideoQuality, TRTCVideoResolutionMode } from "@tencentcloud/tuiroom-engine-js";
 import LiveSceneSelect from "./LiveSceneSelect.js";
 import { useUIKit, TUIToast, TOAST_TYPE } from "@tencentcloud/uikit-base-component-vue3";
@@ -193,7 +193,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       cameraSettingMediaSource.value = material;
       showCameraSettingDialog.value = true;
     };
-    onUnmounted(() => {
+    onBeforeUnmount(() => {
       clearMediaSource();
     });
     return (_ctx, _cache) => {
@@ -231,7 +231,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LiveScenePanelComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-68776105"]]);
+const LiveScenePanelComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e1c7a80b"]]);
 addI18n("en-US", { translation: resource });
 addI18n("zh-CN", { translation: resource$1 });
 export {

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

@@ -1,15 +1,11 @@
 interface Props {
-    className?: string;
     attachmentPickerMode?: 'collapsed' | 'expanded';
 }
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
-    className: string;
     attachmentPickerMode: string;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
-    className: string;
     attachmentPickerMode: string;
 }>>> & Readonly<{}>, {
-    className: string;
     attachmentPickerMode: "collapsed" | "expanded";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/MessageInput/AttachmentPicker/FilePicker.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../../../FilePicker.vue_vue_type_script_setup_true_lang-CaSj3Gh_.js";
+import { _ as _sfc_main } from "../../../FilePicker.vue_vue_type_script_setup_true_lang-CdJ4DUzE.js";
 export {
   _sfc_main as default
 };

package/dist/components/MessageInput/AttachmentPicker/ImagePicker.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../../../ImagePicker.vue_vue_type_script_setup_true_lang-CrzGMmrh.js";
+import { _ as _sfc_main } from "../../../ImagePicker.vue_vue_type_script_setup_true_lang-CbNUofpK.js";
 export {
   _sfc_main as default
 };

package/dist/components/MessageInput/AttachmentPicker/VideoPicker.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../../../VideoPicker.vue_vue_type_script_setup_true_lang-DTv6TJKr.js";
+import { _ as _sfc_main } from "../../../VideoPicker.vue_vue_type_script_setup_true_lang-CmxjbNDJ.js";
 export {
   _sfc_main as default
 };

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

@@ -1,15 +1,13 @@
 import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, unref, createBlock, withCtx, createVNode, createElementVNode, Fragment, renderList, resolveDynamicComponent, mergeProps } from "vue";
 import { useUIKit, IconPlus } 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-BKOIHfdS.js";
-import { s as styles } from "../../../AttachmentPicker.module-0_DWsAtr.js";
-import { _ as _sfc_main$1 } from "../../../FilePicker.vue_vue_type_script_setup_true_lang-CaSj3Gh_.js";
-import { _ as _sfc_main$2 } from "../../../ImagePicker.vue_vue_type_script_setup_true_lang-CrzGMmrh.js";
-import { _ as _sfc_main$3 } from "../../../VideoPicker.vue_vue_type_script_setup_true_lang-DTv6TJKr.js";
-const _hoisted_1 = { class: "flex flex-col gap-2.5" };
+import { s as styles } from "../../../AttachmentPicker.module-BesmtGyl.js";
+import { _ as _sfc_main$1 } from "../../../FilePicker.vue_vue_type_script_setup_true_lang-CdJ4DUzE.js";
+import { _ as _sfc_main$2 } from "../../../ImagePicker.vue_vue_type_script_setup_true_lang-CbNUofpK.js";
+import { _ as _sfc_main$3 } from "../../../VideoPicker.vue_vue_type_script_setup_true_lang-CmxjbNDJ.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "AttachmentPicker",
   props: {
-    className: { default: "" },
     attachmentPickerMode: { default: "collapsed" }
   },
   setup(__props) {
@@ -33,7 +31,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     })));
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass([unref(styles)["attachment-picker"], _ctx.className])
+        class: normalizeClass([unref(styles)["attachment-picker"]])
       }, [
         isCollapsed.value ? (openBlock(), createBlock(unref(PopoverRoot_default), { key: 0 }, {
           default: withCtx(() => [
@@ -41,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               default: withCtx(() => [
                 createVNode(unref(IconPlus), {
                   class: normalizeClass(unref(styles)["attachment-picker__icon"]),
-                  size: "24"
+                  size: "20"
                 }, null, 8, ["class"])
               ]),
               _: 1
@@ -51,19 +49,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createVNode(unref(PopoverContent_default), {
                   side: "top",
                   align: "start",
-                  "side-offset": 5,
-                  class: "rounded-lg p-5 w-[260px] bg-white shadow-sm border will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
+                  "side-offset": 5
                 }, {
                   default: withCtx(() => [
-                    createElementVNode("div", _hoisted_1, [
-                      createElementVNode("div", {
-                        class: normalizeClass(unref(styles)["attachment-picker__popup"])
-                      }, [
-                        (openBlock(true), createElementBlock(Fragment, null, renderList(pickerItems.value, (picker, index) => {
-                          return openBlock(), createBlock(resolveDynamicComponent(picker.Component), mergeProps({ key: index }, { ref_for: true }, picker.props), null, 16);
-                        }), 128))
-                      ], 2)
-                    ])
+                    createElementVNode("div", {
+                      class: normalizeClass(unref(styles)["attachment-picker__popup"])
+                    }, [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(pickerItems.value, (picker, index) => {
+                        return openBlock(), createBlock(resolveDynamicComponent(picker.Component), mergeProps({ key: index }, { ref_for: true }, picker.props), null, 16);
+                      }), 128))
+                    ], 2)
                   ]),
                   _: 1
                 })

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

@@ -7,9 +7,9 @@ import { useMessageInputState } from "../../../states/MessageInputState/MessageI
 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_kyu4g_1",
-  "emoji-picker__list": "_emoji-picker__list_kyu4g_4",
-  "emoji-picker__list-item": "_emoji-picker__list-item_kyu4g_15"
+  "emoji-picker__icon": "_emoji-picker__icon_z2wnx_1",
+  "emoji-picker__list": "_emoji-picker__list_z2wnx_5",
+  "emoji-picker__list-item": "_emoji-picker__list-item_z2wnx_16"
 };
 const _hoisted_1 = { class: "flex flex-col gap-2.5" };
 const _hoisted_2 = ["onClick"];

package/dist/components/MessageInput/MessageInput.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../../MessageInput.vue_vue_type_script_setup_true_lang-XRL7A5Gj.js";
+import { _ as _sfc_main } from "../../MessageInput.vue_vue_type_script_setup_true_lang-wUJPjWbx.js";
 export {
   _sfc_main as default
 };

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

@@ -1,34 +1,31 @@
-import { IMessageInputProps } from './types';
+import { MessageInputProps } from './types';
 
 declare function __VLS_template(): {
     headerToolbar?(_: {}): any;
     leftInline?(_: {}): any;
+    textEditor?(_: {}): any;
+    inputPrefix?(_: {}): any;
+    inputSuffix?(_: {}): any;
     rightInline?(_: {}): any;
     footerToolbar?(_: {}): any;
 };
-declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageInputProps>, {
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MessageInputProps>, {
     autoFocus: boolean;
     disabled: boolean;
     hideSendButton: boolean;
     placeholder: string;
-    className: string;
-    style: () => {};
     attachmentPickerMode: string;
     actions: () => string[];
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageInputProps>, {
+}>>, {}, {}, {}, {}, 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;
-    className: string;
-    style: () => {};
     attachmentPickerMode: string;
     actions: () => string[];
 }>>> & Readonly<{}>, {
-    style: import('vue').CSSProperties;
     placeholder: string;
     disabled: boolean;
-    className: string;
     autoFocus: boolean;
     actions: import('./types').MessageInputActions;
     attachmentPickerMode: import('./types').MessageInputAttachmentPickerMode;

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

@@ -4,8 +4,8 @@ interface TextEditorProps {
     placeholder?: string;
 }
 declare function __VLS_template(): {
-    prefix?(_: {}): any;
-    suffix?(_: {}): any;
+    inputPrefix?(_: {}): any;
+    inputSuffix?(_: {}): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextEditorProps>, {
     autoFocus: boolean;

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

@@ -24,12 +24,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { t } = useUIKit();
     const { activeConversation } = useConversationListState();
     const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
-    const editorRef = ref(null);
+    const editorDomRef = ref(null);
     const isFocused = ref(props.autoFocus);
     const placeholderText = computed(() => props.disabled ? "" : props.placeholder || t("MessageInput.enter_a_message"));
     let editorInstance = null;
     onMounted(() => {
-      const element = editorRef.value;
+      const element = editorDomRef.value;
       if (!element) {
         return;
       }
@@ -59,7 +59,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     onUnmounted(() => {
-      const element = editorRef.value;
+      const element = editorDomRef.value;
       if (editorInstance && element) {
         editorInstance.destroy();
         element.removeAttribute("data-editor-created");
@@ -71,6 +71,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         setContent("");
       }
     });
+    watch(() => props.disabled, (newDisabled) => {
+      if (editorInstance) {
+        editorInstance.setEditable(!newDisabled);
+        if (newDisabled) {
+          setContent("");
+        }
+      }
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass([unref(styles)["input-wrapper"], props.disabled && unref(styles).disabled])
@@ -78,17 +86,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           class: normalizeClass(unref(styles)["input-prefix"])
         }, [
-          renderSlot(_ctx.$slots, "prefix")
+          renderSlot(_ctx.$slots, "inputPrefix")
         ], 2),
-        createElementVNode("div", {
-          ref_key: "editorRef",
-          ref: editorRef,
+        (openBlock(), createElementBlock("div", {
+          ref_key: "editorDomRef",
+          ref: editorDomRef,
+          key: props.disabled ? "disabled" : "enabled",
           class: normalizeClass(unref(styles)["editor"])
-        }, null, 2),
+        }, null, 2)),
         createElementVNode("div", {
           class: normalizeClass(unref(styles)["input-suffix"])
         }, [
-          renderSlot(_ctx.$slots, "suffix")
+          renderSlot(_ctx.$slots, "inputSuffix")
         ], 2)
       ], 2);
     };