tuikit-atomicx-vue3 4.4.0 → 4.5.0

package/dist/components/Search/SearchBar/SearchBar.js

@@ -1,9 +1,9 @@
-import { defineComponent as g, ref as N, watch as V, computed as E, createElementBlock as u, openBlock as n, normalizeStyle as p, normalizeClass as s, createCommentVNode as d, createVNode as f, unref as o, withCtx as v, createElementVNode as A, createBlock as h, resolveDynamicComponent as m, toDisplayString as T } from "vue";
-import { useUIKit as $, IconBack as w, TUIInput as M, IconCloseInput as F, IconSearch as K } from "@tencentcloud/uikit-base-component-vue3";
+import { defineComponent as D, ref as g, watch as N, computed as V, createElementBlock as i, openBlock as t, normalizeStyle as E, normalizeClass as u, createCommentVNode as d, createVNode as m, unref as o, withCtx as v, createElementVNode as p, createBlock as h, resolveDynamicComponent as y, toDisplayString as A } from "vue";
+import { useUIKit as T, IconBack as $, TUIInput as w, IconCloseInput as M, IconSearch as F } from "@tencentcloud/uikit-base-component-vue3";
 import { VariantType as r } from "../../../types/search.js";
-import { isH5 as z } from "../../../utils/env.js";
-import { _ as R } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const U = { key: 1 }, x = /* @__PURE__ */ g({
+import { isH5 as b } from "../../../utils/env.js";
+import { _ as K } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const z = { key: 1 }, R = /* @__PURE__ */ D({
   __name: "SearchBar",
   props: {
     value: { default: "" },
@@ -20,74 +20,74 @@ const U = { key: 1 }, x = /* @__PURE__ */ g({
     autoFocus: { type: Boolean, default: !1 },
     variant: { default: r.STANDARD }
   },
-  setup(c) {
-    const e = c, l = N(e.value);
-    V(
+  setup(n) {
+    const e = n, l = g(e.value);
+    N(
       () => e.value,
       (a) => {
         l.value = a || "";
       }
     );
-    const { t: _ } = $(), S = E(() => e.variant !== r.MINI && e.variant !== r.EXACT && z), I = {
+    const { t: _ } = T(), S = V(() => e.variant !== r.MINI && e.variant !== r.EXACT && b), I = {
       [r.EXACT]: _("Search.action.search"),
       [r.STANDARD]: _("Search.action.search"),
       [r.MINI]: _("Search.action.search"),
       [r.EMBEDDED]: _("Search.results.title")
     }, C = (a) => {
-      var y;
-      const i = {
+      var f;
+      const s = {
         target: { value: String(a) }
       };
-      (y = e.onChange) == null || y.call(e, i);
-    }, b = (a) => {
-      var t;
-      (t = e.onFocus) == null || t.call(e, a);
+      (f = e.onChange) == null || f.call(e, s);
     }, k = (a) => {
-      var t;
-      (t = e.onBlur) == null || t.call(e, a);
-    }, D = (a) => {
-      var t;
+      var c;
+      (c = e.onFocus) == null || c.call(e, a);
+    }, x = (a) => {
+      var c;
+      (c = e.onBlur) == null || c.call(e, a);
+    }, j = (a) => {
+      var c;
       if (a) {
-        const i = new KeyboardEvent("keydown", { key: "Enter" });
-        (t = e.onKeyDown) == null || t.call(e, i);
+        const s = new KeyboardEvent("keydown", { key: "Enter" });
+        (c = e.onKeyDown) == null || c.call(e, s);
       }
     }, B = () => {
       var a;
       l.value = "", (a = e.onClear) == null || a.call(e);
     };
-    return (a, t) => (n(), u("div", {
-      class: s([a.$style.SearchBar, S.value && a.$style["SearchBar--h5"], c.className]),
-      style: p(c.style)
+    return (a, c) => (t(), i("div", {
+      class: u([a.$style.SearchBar, S.value && a.$style["SearchBar--h5"], n.className]),
+      style: E(n.style)
     }, [
-      S.value ? (n(), u("div", {
+      S.value ? (t(), i("div", {
         key: 0,
-        class: s(a.$style.SearchBar__left),
+        class: u(a.$style.SearchBar__left),
         onClick: B
       }, [
-        f(o(w), { size: 24 })
+        m(o($), { size: 24 })
       ], 2)) : d("", !0),
-      f(o(M), {
+      m(o(w), {
         modelValue: l.value,
-        "onUpdate:modelValue": t[0] || (t[0] = (i) => l.value = i),
-        placeholder: c.placeholder || I[c.variant || o(r).STANDARD],
+        "onUpdate:modelValue": c[0] || (c[0] = (s) => l.value = s),
+        placeholder: n.placeholder || I[n.variant || o(r).STANDARD],
         onInput: C,
-        onFocus: b,
-        onBlur: k,
-        onDone: D
+        onFocus: k,
+        onBlur: x,
+        onDone: j
       }, {
         prefix: v(() => [
-          c.SearchIcon ? (n(), h(m(c.SearchIcon), { key: 0 })) : (n(), h(o(K), { key: 1 }))
+          n.SearchIcon ? (t(), h(y(n.SearchIcon), { key: 0 })) : (t(), h(o(F), { key: 1 }))
         ]),
         suffix: v(() => [
-          !S.value && l.value ? (n(), u("div", {
+          !S.value && l.value ? (t(), i("div", {
             key: 0,
-            class: s(a.$style.SearchBar__actions)
+            class: u(a.$style.SearchBar__actions)
           }, [
-            A("div", {
-              class: s(a.$style["SearchBar__clear-icon"]),
+            p("div", {
+              class: u(a.$style["SearchBar__clear-icon"]),
               onClick: B
             }, [
-              c.ClearIcon ? (n(), h(m(c.ClearIcon), { key: 0 })) : (n(), h(o(F), {
+              n.ClearIcon ? (t(), h(y(n.ClearIcon), { key: 0 })) : (t(), h(o(M), {
                 key: 1,
                 class: "clearIcon"
               }))
@@ -96,36 +96,34 @@ const U = { key: 1 }, x = /* @__PURE__ */ g({
         ]),
         _: 1
       }, 8, ["modelValue", "placeholder"]),
-      S.value ? (n(), u("div", {
+      S.value ? (t(), i("div", {
         key: 1,
-        class: s(a.$style.SearchBar__right),
+        class: u(a.$style.SearchBar__right),
         onClick: B
       }, [
-        c.ClearIcon ? (n(), h(m(c.ClearIcon), { key: 0 })) : (n(), u("span", U, T(o(_)("Search.action.cancel")), 1))
+        n.ClearIcon ? (t(), h(y(n.ClearIcon), { key: 0 })) : (t(), i("span", z, A(o(_)("Search.action.cancel")), 1))
       ], 2)) : d("", !0)
     ], 6));
   }
-}), H = "_SearchBar_1ob40_295", X = "_SearchBar__left_1ob40_301", P = "_SearchBar__right_1ob40_304", j = "_SearchBar__icon_1ob40_308", q = "_SearchBar__input_1ob40_313", G = "_clearIcon_1ob40_372", J = "_SearchBar__button_1ob40_382", L = "_SearchBar__actions_1ob40_386", O = {
-  "tui-theme-dark": "_tui-theme-dark_1ob40_2",
-  "tui-theme-light": "_tui-theme-light_1ob40_140",
-  SearchBar: H,
-  SearchBar__left: X,
-  SearchBar__right: P,
-  SearchBar__icon: j,
+}), U = "_SearchBar_1jsx0_1", H = "_SearchBar__left_1jsx0_7", X = "_SearchBar__right_1jsx0_10", P = "_SearchBar__icon_1jsx0_14", q = "_SearchBar__input_1jsx0_19", G = "_clearIcon_1jsx0_78", J = "_SearchBar__button_1jsx0_88", L = "_SearchBar__actions_1jsx0_92", O = {
+  SearchBar: U,
+  SearchBar__left: H,
+  SearchBar__right: X,
+  SearchBar__icon: P,
   SearchBar__input: q,
-  "tui-input": "_tui-input_1ob40_316",
-  "tui-input__native-input": "_tui-input__native-input_1ob40_319",
-  "tui-input__prefix-icon": "_tui-input__prefix-icon_1ob40_336",
-  "tui-input__clear-icon": "_tui-input__clear-icon_1ob40_347",
-  "SearchBar__clear-icon": "_SearchBar__clear-icon_1ob40_365",
+  "tui-input": "_tui-input_1jsx0_22",
+  "tui-input__native-input": "_tui-input__native-input_1jsx0_25",
+  "tui-input__prefix-icon": "_tui-input__prefix-icon_1jsx0_42",
+  "tui-input__clear-icon": "_tui-input__clear-icon_1jsx0_53",
+  "SearchBar__clear-icon": "_SearchBar__clear-icon_1jsx0_71",
   clearIcon: G,
-  "SearchBar__clear-icon--default": "_SearchBar__clear-icon--default_1ob40_378",
+  "SearchBar__clear-icon--default": "_SearchBar__clear-icon--default_1jsx0_84",
   SearchBar__button: J,
   SearchBar__actions: L,
-  "SearchBar--h5": "_SearchBar--h5_1ob40_391"
+  "SearchBar--h5": "_SearchBar--h5_1jsx0_97"
 }, Q = {
   $style: O
-}, te = /* @__PURE__ */ R(x, [["__cssModules", Q]]);
+}, ce = /* @__PURE__ */ K(R, [["__cssModules", Q]]);
 export {
-  te as default
+  ce as default
 };

package/dist/components/Search/index.d.ts

@@ -30,13 +30,13 @@ declare const Search: import('vue').DefineComponent<import('vue').ExtractPropTyp
             onChange: {
                 type: import('vue').PropType<(e: Event) => void>;
             };
-            placeholder: {
-                type: import('vue').PropType<string>;
-            };
             value: {
                 type: import('vue').PropType<string>;
                 default: string;
             };
+            placeholder: {
+                type: import('vue').PropType<string>;
+            };
             className: {
                 type: import('vue').PropType<string>;
                 default: string;
@@ -75,13 +75,13 @@ declare const Search: import('vue').DefineComponent<import('vue').ExtractPropTyp
             onChange: {
                 type: import('vue').PropType<(e: Event) => void>;
             };
-            placeholder: {
-                type: import('vue').PropType<string>;
-            };
             value: {
                 type: import('vue').PropType<string>;
                 default: string;
             };
+            placeholder: {
+                type: import('vue').PropType<string>;
+            };
             className: {
                 type: import('vue').PropType<string>;
                 default: string;
@@ -465,13 +465,13 @@ declare const Search: import('vue').DefineComponent<import('vue').ExtractPropTyp
             onChange: {
                 type: import('vue').PropType<(e: Event) => void>;
             };
-            placeholder: {
-                type: import('vue').PropType<string>;
-            };
             value: {
                 type: import('vue').PropType<string>;
                 default: string;
             };
+            placeholder: {
+                type: import('vue').PropType<string>;
+            };
             className: {
                 type: import('vue').PropType<string>;
                 default: string;
@@ -510,13 +510,13 @@ declare const Search: import('vue').DefineComponent<import('vue').ExtractPropTyp
             onChange: {
                 type: import('vue').PropType<(e: Event) => void>;
             };
-            placeholder: {
-                type: import('vue').PropType<string>;
-            };
             value: {
                 type: import('vue').PropType<string>;
                 default: string;
             };
+            placeholder: {
+                type: import('vue').PropType<string>;
+            };
             className: {
                 type: import('vue').PropType<string>;
                 default: string;
@@ -1176,13 +1176,13 @@ declare const SearchBar: import('vue').DefineComponent<import('vue').ExtractProp
     onChange: {
         type: import('vue').PropType<(e: Event) => void>;
     };
-    placeholder: {
-        type: import('vue').PropType<string>;
-    };
     value: {
         type: import('vue').PropType<string>;
         default: string;
     };
+    placeholder: {
+        type: import('vue').PropType<string>;
+    };
     className: {
         type: import('vue').PropType<string>;
         default: string;
@@ -1221,13 +1221,13 @@ declare const SearchBar: import('vue').DefineComponent<import('vue').ExtractProp
     onChange: {
         type: import('vue').PropType<(e: Event) => void>;
     };
-    placeholder: {
-        type: import('vue').PropType<string>;
-    };
     value: {
         type: import('vue').PropType<string>;
         default: string;
     };
+    placeholder: {
+        type: import('vue').PropType<string>;
+    };
     className: {
         type: import('vue').PropType<string>;
         default: string;

package/dist/components/StreamMixer/LocalMixer/index.js

@@ -1,9 +1,9 @@
-import { defineComponent as q, ref as T, computed as F, watch as _, nextTick as J, onMounted as Y, onBeforeUnmount as Z, createElementBlock as Q, openBlock as b, createElementVNode as W, createBlock as ee, createCommentVNode as A, unref as w, normalizeStyle as te, toDisplayString as oe } from "vue";
-import ie, { TUIVideoQuality as g, TRTCVideoResolutionMode as S, TRTCVideoRotation as V } from "@tencentcloud/tuiroom-engine-js";
+import { defineComponent as q, ref as T, computed as F, watch as _, nextTick as J, onMounted as Y, onBeforeUnmount as Z, createElementBlock as Q, openBlock as w, createElementVNode as W, createBlock as ee, createCommentVNode as A, unref as V, normalizeStyle as te, toDisplayString as oe } from "vue";
+import ie, { TUIVideoQuality as g, TRTCVideoResolutionMode as b, TRTCVideoRotation as S } from "@tencentcloud/tuiroom-engine-js";
 import { useUIKit as ne } from "@tencentcloud/uikit-base-component-vue3";
 import { useRoomEngine as ae } from "../../../hooks/useRoomEngine.js";
-import { debounce as le } from "../../../utils/utils.js";
-import re from "./MixerControl.js";
+import { debounce as re } from "../../../utils/utils.js";
+import le from "./MixerControl.js";
 import { useVideoMixerState as se } from "../../../states/VideoMixerState/VideoMixerState.js";
 import { useLiveListState as ce } from "../../../states/LiveListState/LiveListState.js";
 import { LiveOrientation as L } from "../../../types/live.js";
@@ -28,22 +28,22 @@ const de = {
         [g.kVideoQuality_1080p]: { width: 1920, height: 1080 }
       };
       let { width: n, height: o } = i[t];
-      return e === S.TRTCVideoResolutionModePortrait && ([n, o] = [o, n]), { width: n, height: o };
+      return e === b.TRTCVideoResolutionModePortrait && ([n, o] = [o, n]), { width: n, height: o };
     }
     const P = T({
       position: "absolute",
       transform: "translate(0px, 0px)"
     });
-    let p, r;
+    let p, l;
     function h() {
       if (!u.value || !c.value)
         return;
       const { width: t, height: e } = D(
         I.value,
-        B.value === L.Landscape ? S.TRTCVideoResolutionModeLandscape : S.TRTCVideoResolutionModePortrait
-      ), { width: i, height: n } = u.value.getBoundingClientRect(), o = Math.max(i / t, n / e), s = t * o, f = e * o, { top: C, left: a, right: l, bottom: R } = c.value.layout.rect, v = l - a, O = R - C, H = c.value.layout.rotation || V.TRTCVideoRotation0, X = C * o - (f - n) / 2, K = a * o - (s - i) / 2;
+        B.value === L.Landscape ? b.TRTCVideoResolutionModeLandscape : b.TRTCVideoResolutionModePortrait
+      ), { width: i, height: n } = u.value.getBoundingClientRect(), o = Math.max(i / t, n / e), s = t * o, f = e * o, { top: C, left: a, right: r, bottom: R } = c.value.layout.rect, v = r - a, O = R - C, H = c.value.layout.rotation || S.TRTCVideoRotation0, X = C * o - (f - n) / 2, K = a * o - (s - i) / 2;
       let y, M;
-      H === V.TRTCVideoRotation0 || H === V.TRTCVideoRotation180 ? (y = v * o, M = O * o) : (y = O * o, M = v * o);
+      H === S.TRTCVideoRotation0 || H === S.TRTCVideoRotation180 ? (y = v * o, M = O * o) : (y = O * o, M = v * o);
       const j = $(
         K,
         X,
@@ -59,20 +59,20 @@ const de = {
     }
     function $(t, e, i, n, o, s) {
       const f = e + n;
-      let a = t + i / 2 - p / 2, l = e - d - r;
+      let a = t + i / 2 - p / 2, r = e - d - l;
       a < 0 ? a = 0 : a + p > o && (a = o - p);
       const R = e, v = s - f;
-      return l >= 0 && R >= r + d ? l = Math.min(l, s - r) : v >= r + d ? l = Math.max(0, f + d) : l = Math.max(0, e - r - d), {
-        transform: `translate(${a}px, ${l}px)`
+      return r >= 0 && R >= l + d ? r = Math.min(r, s - l) : v >= l + d ? r = Math.max(0, f + d) : r = Math.max(0, e - l - d), {
+        transform: `translate(${a}px, ${r}px)`
       };
     }
-    const G = le(h, 16);
+    const G = re(h, 16);
     _(() => c.value, async (t, e) => {
       var i;
       if (!e && t) {
         await J();
         const n = (i = k.value) == null ? void 0 : i.$el, { width: o, height: s } = (n == null ? void 0 : n.getBoundingClientRect()) || { width: 0, height: 0 };
-        p = o, r = s;
+        p = o, l = s;
       }
       h();
     }, { immediate: !0, deep: !0 }), _(
@@ -87,8 +87,11 @@ const de = {
     });
     return Y(() => {
       E.observe(u.value), ie.once("ready", async () => {
-        var e;
-        await ((e = x.instance) == null ? void 0 : e.getTRTCCloud().getMediaMixingManager()).bindPreviewArea(document.getElementById("local-video-mixer")), h();
+        var i;
+        const t = document.getElementById("local-video-mixer");
+        if (!t)
+          return;
+        await ((i = x.instance) == null ? void 0 : i.getTRTCCloud().getMediaMixingManager()).bindPreviewArea(t), h();
       }), _(() => {
         var t;
         return (t = m.value) == null ? void 0 : t.liveId;
@@ -102,7 +105,7 @@ const de = {
       E.unobserve(u.value);
       const t = (e = x.instance) == null ? void 0 : e.getTRTCCloud().getMediaMixingManager();
       await (t == null ? void 0 : t.destroy());
-    }), (t, e) => (b(), Q("div", {
+    }), (t, e) => (w(), Q("div", {
       ref_key: "localMixerRef",
       ref: u,
       class: "local-mixer-container"
@@ -111,19 +114,19 @@ const de = {
         id: "local-video-mixer",
         class: "local-mixer-content"
       }, null, -1)),
-      w(c) ? (b(), ee(re, {
+      V(c) ? (w(), ee(le, {
         key: 0,
         ref_key: "mixControlRef",
         ref: k,
         class: "mixer-control",
         style: te(P.value)
       }, null, 8, ["style"])) : A("", !0),
-      w(z).length === 0 ? (b(), Q("div", de, [
-        W("span", me, oe(w(N)("No video")), 1)
+      V(z).length === 0 ? (w(), Q("div", de, [
+        W("span", me, oe(V(N)("No video")), 1)
       ])) : A("", !0)
     ], 512));
   }
-}), be = /* @__PURE__ */ ue(pe, [["__scopeId", "data-v-7f6babec"]]);
+}), we = /* @__PURE__ */ ue(pe, [["__scopeId", "data-v-aa13353b"]]);
 export {
-  be as default
+  we as default
 };

package/dist/components/StreamMixer/index.d.ts

@@ -1,3 +1,2 @@
-import { default as StreamMixer } from './index.vue';
-
+declare const StreamMixer: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export { StreamMixer };

package/dist/components/StreamMixer/index.js

@@ -1,15 +1,15 @@
-import { defineComponent as o, createBlock as t, openBlock as i, unref as n, withCtx as a, createVNode as m, normalizeStyle as c } from "vue";
+import { addI18n as e } from "../../i18n/index.js";
+import { defineComponent as o, createBlock as t, openBlock as n, unref as i, withCtx as m, createVNode as a, normalizeStyle as c } from "vue";
 import { LiveCoreView as l } from "../LiveView/index.js";
 import s from "./LocalMixer/index.js";
-import { addI18n as e } from "../../i18n/index.js";
 import { resource as p } from "./i18n/en-US/index.js";
 import { resource as f } from "./i18n/zh-CN/index.js";
-const k = /* @__PURE__ */ o({
+const u = /* @__PURE__ */ o({
   __name: "index",
-  setup(u) {
-    return (_, d) => (i(), t(n(l), { "ignore-local-video": !0 }, {
-      localVideo: a(({ style: r }) => [
-        m(s, {
+  setup(_) {
+    return (d, x) => (n(), t(i(l), { "ignore-local-video": !0 }, {
+      localVideo: m(({ style: r }) => [
+        a(s, {
           style: c(r)
         }, null, 8, ["style"])
       ]),
@@ -19,6 +19,7 @@ const k = /* @__PURE__ */ o({
 });
 e("en-US", { translation: p });
 e("zh-CN", { translation: f });
+const v = u;
 export {
-  k as StreamMixer
+  v as StreamMixer
 };

package/dist/components/StreamView/Layout/CustomLayout.js

@@ -1,11 +1,11 @@
-import { defineComponent as V, computed as l, ref as x, watch as R, onMounted as E, onBeforeUnmount as H, createElementBlock as _, openBlock as L, createElementVNode as W, normalizeStyle as O, Fragment as J, renderList as D, createBlock as P, unref as j, withCtx as q, renderSlot as A, mergeProps as G } from "vue";
-import K from "../common/StreamRegion/StreamRegionPC.js";
-import { useUserState as Q } from "../../../states/UserState/index.js";
-import { TUIVideoStreamType as Z } from "@tencentcloud/tuiroom-engine-js";
-import { useRoomState as ee } from "../../../states/RoomState.js";
-import { useLoginState as te } from "../../../states/LoginState.js";
-import { useLiveListState as re } from "../../../states/LiveListState/LiveListState.js";
-import { _ as ae } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { defineComponent as V, computed as u, ref as x, watch as R, onMounted as E, onBeforeUnmount as H, createElementBlock as _, openBlock as L, createElementVNode as W, normalizeStyle as O, Fragment as J, renderList as D, createBlock as P, unref as j, withCtx as q, renderSlot as A, mergeProps as G } from "vue";
+import { TUIVideoStreamType as K } from "@tencentcloud/tuiroom-engine-js";
+import { useLoginState as Q } from "../../../states/LoginState.js";
+import { useRoomState as Z } from "../../../states/RoomState/index.js";
+import { useUserState as ee } from "../../../states/UserState/index.js";
+import te from "../common/StreamRegion/StreamRegionPC.js";
+import { useLiveListState as ae } from "../../../states/LiveListState/LiveListState.js";
+import { _ as re } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
 const oe = /* @__PURE__ */ V({
   __name: "CustomLayout",
   props: {
@@ -17,7 +17,7 @@ const oe = /* @__PURE__ */ V({
   },
   emits: ["stream-view-dblclick"],
   setup(z, { emit: M }) {
-    const { userList: m, localUser: N, userListOnSeat: p } = Q(), { currentRoom: b } = ee(), { currentLive: v } = re(), { loginUserInfo: T } = te(), F = M, d = z, g = l(() => {
+    const { userList: m, localUser: N, userListOnSeat: p } = ee(), { currentRoom: b } = Z(), { currentLive: v } = ae(), { loginUserInfo: T } = Q(), F = M, d = z, g = u(() => {
       var t, e;
       if (b.value)
         return (t = b.value) != null && t.isSeatEnabled ? p.value : m.value;
@@ -32,66 +32,66 @@ const oe = /* @__PURE__ */ V({
         return [];
       }
       return m.value;
-    }), X = l(() => {
+    }), X = u(() => {
       var t;
       return !g.value || g.value.length === 0 ? [] : (t = g.value) == null ? void 0 : t.filter(d.filterFn).sort(d.sortFn).map((e) => ({
         userInfo: e,
-        streamType: Z.kCameraStream
+        streamType: K.kCameraStream
       }));
-    }), s = x(), Y = x(), h = l(() => "16:9"), a = x({
+    }), s = x(), Y = x(), h = u(() => "16:9"), r = x({
       width: 0,
       height: 0,
       transformX: 0,
       transformY: 0,
       scale: 1
-    }), i = l(() => ({
-      width: `${a.value.width * a.value.scale}px`,
-      height: `${a.value.height * a.value.scale}px`,
-      transform: `translate(${a.value.transformX * a.value.scale}px, ${a.value.transformY * a.value.scale}px)`
-    })), f = l(() => {
+    }), i = u(() => ({
+      width: `${r.value.width * r.value.scale}px`,
+      height: `${r.value.height * r.value.scale}px`,
+      transform: `translate(${r.value.transformX * r.value.scale}px, ${r.value.transformY * r.value.scale}px)`
+    })), f = u(() => {
       const { layoutList: t } = JSON.parse(d.config);
-      return t ? t.map((r) => r.width > 1 || r.height > 1 ? {
-        left: o(a.value.width) * (r.x / 720),
-        top: o(a.value.width) * (r.y / 720),
-        width: o(a.value.width) * (r.width / 720),
-        height: o(a.value.height) * (r.height / 1280),
-        zIndex: r.zOrder,
-        backgroundColor: r.backgroundColor
+      return t ? t.map((a) => a.width > 1 || a.height > 1 ? {
+        left: o(r.value.width) * (a.x / 720),
+        top: o(r.value.width) * (a.y / 720),
+        width: o(r.value.width) * (a.width / 720),
+        height: o(r.value.height) * (a.height / 1280),
+        zIndex: a.zOrder,
+        backgroundColor: a.backgroundColor
       } : {
-        left: o(a.value.width) * r.x,
-        top: o(a.value.width) * r.y,
-        width: o(a.value.width) * r.width,
-        height: r.height === -1 ? o(a.value.height) : o(a.value.width) * r.height,
-        zIndex: r.zOrder,
-        backgroundColor: r.backgroundColor
+        left: o(r.value.width) * a.x,
+        top: o(r.value.width) * a.y,
+        width: o(r.value.width) * a.width,
+        height: a.height === -1 ? o(r.value.height) : o(r.value.width) * a.height,
+        zIndex: a.zOrder,
+        backgroundColor: a.backgroundColor
       }) : [];
-    }), c = l(() => {
-      const t = Math.min(...f.value.map((n) => n.left)), e = Math.min(...f.value.map((n) => n.top)), r = Math.max(...f.value.map((n) => n.left + n.width)), u = Math.max(...f.value.map((n) => n.top + n.height));
+    }), c = u(() => {
+      const t = Math.min(...f.value.map((n) => n.left)), e = Math.min(...f.value.map((n) => n.top)), a = Math.max(...f.value.map((n) => n.left + n.width)), l = Math.max(...f.value.map((n) => n.top + n.height));
       return {
-        width: r - t,
-        height: u - e,
-        centerX: (t + r) / 2,
-        centerY: (e + u) / 2
+        width: a - t,
+        height: l - e,
+        centerX: (t + a) / 2,
+        centerY: (e + l) / 2
       };
     });
     R(c, () => {
       S();
     });
     function S() {
-      const t = s.value.getBoundingClientRect(), e = Math.floor(t.width), r = Math.floor(t.height), u = e / c.value.width, n = r / c.value.height;
-      a.value.scale = Math.min(u, n), a.value.transformX = o(a.value.width) / 2 - c.value.centerX, a.value.transformY = o(a.value.height) / 2 - c.value.centerY;
+      const t = s.value.getBoundingClientRect(), e = Math.floor(t.width), a = Math.floor(t.height), l = e / c.value.width, n = a / c.value.height;
+      r.value.scale = Math.min(l, n), r.value.transformX = o(r.value.width) / 2 - c.value.centerX, r.value.transformY = o(r.value.height) / 2 - c.value.centerY;
     }
-    const w = l(() => {
+    const w = u(() => {
       var t, e;
       return !h.value || ((t = h.value) == null ? void 0 : t.indexOf(":")) < 0 ? 0 : Number((e = h.value) == null ? void 0 : e.split(":")[0]);
-    }), y = l(() => !h.value || h.value.indexOf(":") < 0 ? 0 : Number(h.value.split(":")[1]));
+    }), y = u(() => !h.value || h.value.indexOf(":") < 0 ? 0 : Number(h.value.split(":")[1]));
     async function k() {
       if (!s.value)
         return;
-      const t = s.value.getBoundingClientRect(), e = Math.floor(t.width), r = Math.floor(t.height);
-      let u = e, n = r;
-      const $ = e / w.value, I = r / y.value;
-      $ > I && (u = r / y.value * w.value, n = r), $ <= I && (u = e, n = e / w.value * y.value), a.value.width = Math.floor(u), a.value.height = Math.floor(n);
+      const t = s.value.getBoundingClientRect(), e = Math.floor(t.width), a = Math.floor(t.height);
+      let l = e, n = a;
+      const $ = e / w.value, I = a / y.value;
+      $ > I && (l = a / y.value * w.value, n = a), $ <= I && (l = e, n = e / w.value * y.value), r.value.width = Math.floor(l), r.value.height = Math.floor(n);
     }
     function o(t) {
       return typeof t != "string" ? t : Number(t.replace("px", ""));
@@ -136,22 +136,22 @@ const oe = /* @__PURE__ */ V({
       F("stream-view-dblclick", t, e);
     }
     return (t, e) => (L(), _("div", {
-      class: "custom-layout-container",
       ref_key: "streamListContainerRef",
-      ref: s
+      ref: s,
+      class: "custom-layout-container"
     }, [
       W("div", {
-        class: "stream-list",
         ref_key: "streamListRef",
         ref: Y,
+        class: "stream-list",
         style: O(i.value)
       }, [
-        (L(!0), _(J, null, D(X.value, (r, u) => (L(), P(j(K), {
+        (L(!0), _(J, null, D(X.value, (a, l) => (L(), P(j(te), {
+          key: `${a.userInfo.userId}_${a.streamType}`,
           class: "stream-list-item",
-          key: `${r.userInfo.userId}_${r.streamType}`,
-          userInfo: r.userInfo,
-          "stream-type": r.streamType,
-          style: O(B(u)),
+          userInfo: a.userInfo,
+          "stream-type": a.streamType,
+          style: O(B(l)),
           "aspect-ratio": "auto",
           onStreamViewDblclick: U
         }, {
@@ -163,7 +163,7 @@ const oe = /* @__PURE__ */ V({
       ], 4)
     ], 512));
   }
-}), de = /* @__PURE__ */ ae(oe, [["__scopeId", "data-v-6267e055"]]);
+}), de = /* @__PURE__ */ re(oe, [["__scopeId", "data-v-fc27f3d2"]]);
 export {
   de as default
 };

package/dist/components/StreamView/Layout/CustomLayout.vue.d.ts

@@ -1,5 +1,4 @@
 import { UserInfo } from '../../../types';
-import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
 
 interface Props {
     config?: string;
@@ -9,7 +8,7 @@ interface Props {
 declare function __VLS_template(): {
     streamViewUI?(_: {
         userInfo: UserInfo;
-        streamType: TUIVideoStreamType;
+        streamType: any;
     }): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {

package/dist/components/StreamView/Layout/FloatLayout.vue.d.ts

@@ -1,10 +1,9 @@
-import { TUIVideoStreamType } from '@tencentcloud/tuiroom-engine-js';
 import { UserInfo } from '../../../types';
 
 declare function __VLS_template(): {
     streamViewUI?(_: {
         userInfo: UserInfo;
-        streamType: TUIVideoStreamType;
+        streamType: any;
     }): any;
 };
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{