tuikit-atomicx-vue3 3.4.2 → 4.3.0

package/dist/components/CameraButton/index.js

@@ -1,40 +1,39 @@
-import { defineComponent as l, createElementBlock as p, openBlock as a, normalizeClass as u, unref as e, createBlock as o, createCommentVNode as f } from "vue";
-import { IconCameraOn as _, IconCameraOff as C, IconUnSupport as d } from "@tencentcloud/uikit-base-component-vue3";
-import { useDeviceState as k } from "../../states/DeviceState.js";
-import { DeviceStatus as n, DeviceError as v } from "../../types/device.js";
-import { _ as b } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { defineComponent as l, createElementBlock as u, openBlock as o, normalizeClass as p, createBlock as a, createCommentVNode as f, unref as e } from "vue";
+import { IconCameraOn as C, IconCameraOff as _, IconUnSupport as d } from "@tencentcloud/uikit-base-component-vue3";
+import { useDeviceState as k } from "../../states/DeviceState/DeviceState.js";
+import { DeviceStatus as t, DeviceError as v } from "../../types/device.js";
+import { _ as h } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const B = /* @__PURE__ */ l({
   __name: "index",
-  setup(h) {
+  setup(b) {
     const {
       cameraStatus: r,
-      hasPublishVideoPermission: t,
-      cameraLastError: c,
+      cameraLastError: n,
       closeLocalCamera: s,
-      openLocalCamera: i
+      openLocalCamera: c
     } = k();
-    async function m() {
-      t.value && (r.value === n.On ? await s() : await i());
+    async function i() {
+      hasPublishVideoPermission.value && (r.value === t.On ? await s() : await c());
     }
-    return (x, y) => (a(), p("div", {
-      class: u(["camera-button", { disabled: !e(t) }]),
-      onClick: m
+    return (m, y) => (o(), u("div", {
+      class: p(["camera-button", { disabled: !m.hasPublishVideoPermission }]),
+      onClick: i
     }, [
-      e(r) === e(n).On ? (a(), o(e(_), {
+      e(r) === e(t).On ? (o(), a(e(C), {
         key: 0,
         size: "24"
-      })) : (a(), o(e(C), {
+      })) : (o(), a(e(_), {
         key: 1,
         size: "24"
       })),
-      e(c) !== e(v).NoError ? (a(), o(e(d), {
+      e(n) !== e(v).NoError ? (o(), a(e(d), {
         key: 2,
         class: "unsupport-icon",
         size: "14"
       })) : f("", !0)
     ], 2));
   }
-}), D = /* @__PURE__ */ b(B, [["__scopeId", "data-v-cc8bbaca"]]);
+}), S = /* @__PURE__ */ h(B, [["__scopeId", "data-v-627fc59c"]]);
 export {
-  D as CameraButton
+  S as CameraButton
 };

package/dist/components/CoGuestPanel/CoGuestPanel.js

@@ -1,67 +1,67 @@
-import { defineComponent as S, ref as b, createElementBlock as n, openBlock as i, createElementVNode as e, normalizeClass as g, toDisplayString as a, unref as t, createCommentVNode as d, Fragment as I, renderList as G, createVNode as u, withCtx as v, createTextVNode as m } from "vue";
-import { useUIKit as j, TUIButton as h, TUIToast as f } from "@tencentcloud/uikit-base-component-vue3";
+import { defineComponent as b, ref as j, createElementBlock as n, openBlock as i, createElementVNode as e, normalizeClass as g, toDisplayString as a, unref as t, createCommentVNode as d, Fragment as I, renderList as R, createVNode as u, withCtx as v, createTextVNode as m } from "vue";
+import { useUIKit as q, TUIButton as h, TUIToast as f } from "@tencentcloud/uikit-base-component-vue3";
 import { useCoGuestState as D } from "../../states/CoGuestState.js";
 import { useLoginState as E } from "../../states/LoginState.js";
-import R from "../Avatar/Avatar.js";
-import { ERROR_MESSAGE as P } from "./constants.js";
-import { _ as T } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const w = { class: "panel-content" }, L = { class: "panel-header" }, V = { class: "tabs" }, z = { class: "panel-body" }, B = {
+import { useLiveSeatState as P } from "../../states/LiveSeatState/index.js";
+import G from "../Avatar/Avatar.js";
+import { ERROR_MESSAGE as T } from "./constants.js";
+import { _ as w } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const V = { class: "panel-content" }, z = { class: "panel-header" }, B = { class: "tabs" }, L = { class: "panel-body" }, O = {
   key: 0,
   class: "applications-content"
 }, M = {
   key: 0,
   class: "user-list-container"
-}, F = { class: "user-list" }, K = { class: "user-item-left" }, O = { class: "user-item-right" }, H = { class: "user-info" }, J = { class: "user-name" }, Q = { class: "user-actions" }, W = {
+}, F = { class: "user-list" }, K = { class: "user-item-left" }, H = { class: "user-item-right" }, J = { class: "user-info" }, Q = { class: "user-name" }, W = { class: "user-actions" }, X = {
   key: 1,
   class: "empty-state"
-}, X = {
+}, Y = {
   key: 1,
   class: "invitations-content"
-}, Y = { class: "user-list-container" }, Z = { class: "user-list-title" }, ee = { class: "user-list-title-text" }, te = { class: "user-list-title-count" }, se = { class: "user-list" }, oe = { class: "user-item-left" }, ne = { class: "user-item-right" }, ie = { class: "user-info" }, ae = { class: "user-name" }, ce = {
+}, Z = { class: "user-list-container" }, ee = { class: "user-list-title" }, te = { class: "user-list-title-text" }, se = { class: "user-list-title-count" }, oe = { class: "user-list" }, ne = { class: "user-item-left" }, ie = { class: "user-item-right" }, ae = { class: "user-info" }, ce = { class: "user-name" }, re = {
   key: 0,
   class: "is-me"
-}, re = {
+}, le = {
   key: 0,
   class: "user-actions"
-}, le = {
+}, de = {
   key: 0,
   class: "empty-state"
-}, de = /* @__PURE__ */ S({
+}, ue = /* @__PURE__ */ b({
   __name: "CoGuestPanel",
-  setup(ue) {
-    const { t: o } = j(), { loginUserInfo: C } = E(), {
-      receivedCoGuestUserList: y,
-      userListInCoGuest: p,
-      acceptCoGuestRequest: q,
-      rejectCoGuestRequest: N,
-      disconnect: U
-    } = D(), r = b("applications"), $ = async (l) => {
+  setup(_e) {
+    const { t: o } = q(), { loginUserInfo: C } = E(), {
+      connected: p,
+      applicants: k,
+      acceptApplication: S,
+      rejectApplication: A
+    } = D(), { kickUserOutOfSeat: N } = P(), r = j("applications"), U = async (l) => {
       try {
-        await q({ userId: l });
+        await S({ userId: l });
       } catch (c) {
-        const s = o(P[c.code] || "Accept co-guest request failed");
+        const s = o(T[c.code] || "Accept co-guest request failed");
         f.error({ message: s });
       }
-    }, x = async (l) => {
+    }, $ = async (l) => {
       try {
-        await N({ userId: l });
+        await A({ userId: l });
       } catch (c) {
         console.error("[CoGuestPanel] handleRejectCoGuestRequest error", c), f.error({
           message: o("Reject co-guest request failed")
         });
       }
-    }, A = async (l) => {
+    }, x = async (l) => {
       try {
-        await U(l);
+        await N({ userId: l });
       } catch (c) {
         console.error("[CoGuestPanel] handleDisconnect error", c), f.error({
           message: o("Disconnect co-guest failed")
         });
       }
     };
-    return (l, c) => (i(), n("div", w, [
-      e("div", L, [
-        e("div", V, [
+    return (l, c) => (i(), n("div", V, [
+      e("div", z, [
+        e("div", B, [
           e("span", {
             class: g(["tab-item", { active: r.value === "applications" }]),
             onClick: c[0] || (c[0] = (s) => r.value = "applications")
@@ -72,27 +72,27 @@ const w = { class: "panel-content" }, L = { class: "panel-header" }, V = { class
           }, a(t(o)("Co-guest management")), 3)
         ])
       ]),
-      e("div", z, [
-        r.value === "applications" ? (i(), n("div", B, [
-          t(y).length > 0 ? (i(), n("div", M, [
+      e("div", L, [
+        r.value === "applications" ? (i(), n("div", O, [
+          t(k).length > 0 ? (i(), n("div", M, [
             e("div", F, [
-              (i(!0), n(I, null, G(t(y), (s) => (i(), n("div", {
+              (i(!0), n(I, null, R(t(k), (s) => (i(), n("div", {
                 key: s.userId,
                 class: "user-item"
               }, [
                 e("div", K, [
-                  u(t(R), {
+                  u(t(G), {
                     src: s.avatarUrl,
                     size: 40
                   }, null, 8, ["src"])
                 ]),
-                e("div", O, [
-                  e("div", H, [
-                    e("span", J, a(s.userName || s.userId), 1)
+                e("div", H, [
+                  e("div", J, [
+                    e("span", Q, a(s.userName || s.userId), 1)
                   ]),
-                  e("div", Q, [
+                  e("div", W, [
                     u(t(h), {
-                      onClick: (_) => $(s.userId)
+                      onClick: (_) => U(s.userId)
                     }, {
                       default: v(() => [
                         m(a(t(o)("Accept")), 1)
@@ -101,7 +101,7 @@ const w = { class: "panel-content" }, L = { class: "panel-header" }, V = { class
                     }, 8, ["onClick"]),
                     u(t(h), {
                       color: "red",
-                      onClick: (_) => x(s.userId)
+                      onClick: (_) => $(s.userId)
                     }, {
                       default: v(() => [
                         m(a(t(o)("Reject")), 1)
@@ -112,38 +112,38 @@ const w = { class: "panel-content" }, L = { class: "panel-header" }, V = { class
                 ])
               ]))), 128))
             ])
-          ])) : (i(), n("div", W, [
+          ])) : (i(), n("div", X, [
             e("span", null, a(t(o)("No application for live")), 1)
           ]))
         ])) : d("", !0),
-        r.value === "invitations" ? (i(), n("div", X, [
-          e("div", Y, [
-            e("div", Z, [
-              e("span", ee, a(t(o)("Current seat")), 1),
-              e("span", te, a(`(${t(p).length})`), 1)
+        r.value === "invitations" ? (i(), n("div", Y, [
+          e("div", Z, [
+            e("div", ee, [
+              e("span", te, a(t(o)("Current seat")), 1),
+              e("span", se, a(`(${t(p).length})`), 1)
             ]),
-            e("div", se, [
-              (i(!0), n(I, null, G(t(p), (s) => {
-                var _, k;
+            e("div", oe, [
+              (i(!0), n(I, null, R(t(p), (s) => {
+                var _, y;
                 return i(), n("div", {
                   key: s.userId,
                   class: "user-item"
                 }, [
-                  e("div", oe, [
-                    u(t(R), {
+                  e("div", ne, [
+                    u(t(G), {
                       src: s.avatarUrl,
                       size: 40
                     }, null, 8, ["src"])
                   ]),
-                  e("div", ne, [
-                    e("div", ie, [
-                      e("span", ae, a(s.userName || s.userId), 1),
-                      s.userId === ((_ = t(C)) == null ? void 0 : _.userId) ? (i(), n("span", ce, a(`(${t(o)("Me")})`), 1)) : d("", !0)
+                  e("div", ie, [
+                    e("div", ae, [
+                      e("span", ce, a(s.userName || s.userId), 1),
+                      s.userId === ((_ = t(C)) == null ? void 0 : _.userId) ? (i(), n("span", re, a(`(${t(o)("Me")})`), 1)) : d("", !0)
                     ]),
-                    s.userId !== ((k = t(C)) == null ? void 0 : k.userId) ? (i(), n("div", re, [
+                    s.userId !== ((y = t(C)) == null ? void 0 : y.userId) ? (i(), n("div", le, [
                       u(t(h), {
                         color: "gray",
-                        onClick: (_e) => A(s.userId)
+                        onClick: (pe) => x(s.userId)
                       }, {
                         default: v(() => [
                           m(a(t(o)("Disconnect")), 1)
@@ -155,7 +155,7 @@ const w = { class: "panel-content" }, L = { class: "panel-header" }, V = { class
                 ]);
               }), 128))
             ]),
-            t(p).length === 0 ? (i(), n("div", le, [
+            t(p).length === 0 ? (i(), n("div", de, [
               e("span", null, a(t(o)("Seat is empty")), 1)
             ])) : d("", !0)
           ])
@@ -163,7 +163,7 @@ const w = { class: "panel-content" }, L = { class: "panel-header" }, V = { class
       ])
     ]));
   }
-}), ke = /* @__PURE__ */ T(de, [["__scopeId", "data-v-503f71dc"]]);
+}), Ie = /* @__PURE__ */ w(ue, [["__scopeId", "data-v-93117618"]]);
 export {
-  ke as default
+  Ie as default
 };

package/dist/components/CoHostPanel/BattlePanel.js

@@ -1,11 +1,11 @@
 import { defineComponent as V, ref as z, onMounted as J, onUnmounted as K, createElementBlock as g, openBlock as m, Fragment as M, createElementVNode as U, createCommentVNode as Y, createVNode as p, createBlock as h, unref as s, withCtx as r, toDisplayString as c, createTextVNode as C } from "vue";
 import { TUIConnectionCode as f } from "@tencentcloud/tuiroom-engine-js";
 import { useUIKit as G, TUIButton as R, TUIDialog as Q, TUIToast as n, TOAST_TYPE as l } from "@tencentcloud/uikit-base-component-vue3";
-import { useBattleState as W } from "../../states/BattleState.js";
-import { useLoginState as X } from "../../states/LoginState.js";
-import Z from "./UserList.js";
-import ee from "./RecommendHostList.js";
-import { useCoHostState as te } from "../../states/CoHostState/CoHostState.js";
+import { useLoginState as W } from "../../states/LoginState.js";
+import X from "./UserList.js";
+import Z from "./RecommendHostList.js";
+import { useCoHostState as ee } from "../../states/CoHostState/CoHostState.js";
+import { useBattleState as te } from "../../states/BattleState/BattleState.js";
 import { CoHostEvent as u } from "../../types/coHost.js";
 import { _ as oe } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const se = {
@@ -24,18 +24,18 @@ const se = {
     coHostLayoutTemplate: {}
   },
   setup(B) {
-    const { t: o } = G(), q = B, { loginUserInfo: x } = X(), {
+    const { t: o } = G(), q = B, { loginUserInfo: x } = W(), {
       invitees: N,
       requestHostConnection: w,
       cancelHostConnection: O,
       subscribeEvent: b,
       unsubscribeEvent: y
-    } = te(), {
+    } = ee(), {
       currentBattleInfo: v,
       battleUsers: L,
       requestBattle: A,
       exitBattle: D
-    } = W(), I = z(!1), $ = (e, t) => N.value.some((d) => d.userId === e && d.liveId === t), a = /* @__PURE__ */ new Set(), j = async (e) => {
+    } = te(), I = z(!1), $ = (e, t) => N.value.some((d) => d.userId === e && d.liveId === t), a = /* @__PURE__ */ new Set(), j = async (e) => {
       try {
         switch ((await w({
           liveId: e.liveId,
@@ -104,13 +104,13 @@ const se = {
       return m(), g(M, null, [
         U("div", se, [
           (d = s(v)) != null && d.battleId ? (m(), g("div", ae, [
-            p(Z, { userList: s(L) }, {
+            p(X, { userList: s(L) }, {
               "user-actions": r(({ user: i }) => [
                 U("div", ne, c(s(o)("In battle")) + "... ", 1)
               ]),
               _: 1
             }, 8, ["userList"])
-          ])) : (m(), h(ee, {
+          ])) : (m(), h(Z, {
             key: 1,
             class: "recommend-host-list"
           }, {
@@ -190,7 +190,7 @@ const se = {
       ], 64);
     };
   }
-}), be = /* @__PURE__ */ oe(re, [["__scopeId", "data-v-460969fc"]]);
+}), be = /* @__PURE__ */ oe(re, [["__scopeId", "data-v-6a8f5606"]]);
 export {
   be as default
 };

package/dist/components/CoHostPanel/CoHostPanel.js

@@ -1,11 +1,11 @@
 import { defineComponent as N, ref as d, computed as b, watch as _, createBlock as g, openBlock as p, unref as i, withCtx as f, createElementVNode as e, createVNode as v, createElementBlock as $, createCommentVNode as y, normalizeClass as h, toDisplayString as C, withDirectives as k, vShow as L } from "vue";
 import { useUIKit as w, TUIDialog as z, IconLiveSetting as A, IconClose as E } from "@tencentcloud/uikit-base-component-vue3";
-import { useBattleState as V } from "../../states/BattleState.js";
-import { useLoginState as F } from "../../states/LoginState.js";
-import G from "./BattlePanel.js";
-import K from "./ConfigSettingPanel.js";
-import j from "./ConnectionPanel.js";
-import { useCoHostState as q } from "../../states/CoHostState/CoHostState.js";
+import { useLoginState as V } from "../../states/LoginState.js";
+import F from "./BattlePanel.js";
+import G from "./ConfigSettingPanel.js";
+import K from "./ConnectionPanel.js";
+import { useCoHostState as j } from "../../states/CoHostState/CoHostState.js";
+import { useBattleState as q } from "../../states/BattleState/BattleState.js";
 import { CoHostStatus as J, CoHostLayoutTemplate as M } from "../../types/coHost.js";
 import { _ as O } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const Q = { class: "dialog-header" }, R = { class: "dialog-title" }, W = { class: "icon-buttons" }, X = { class: "panel-content" }, Y = {
@@ -18,7 +18,7 @@ const Q = { class: "dialog-header" }, R = { class: "dialog-title" }, W = { class
   },
   emits: ["update:visible"],
   setup(S, { emit: D }) {
-    const { t: l } = w(), I = S, { loginUserInfo: B } = F(), { coHostStatus: P } = q(), { battleUsers: U } = V(), H = D, u = () => {
+    const { t: l } = w(), I = S, { loginUserInfo: B } = V(), { coHostStatus: P } = j(), { battleUsers: U } = q(), H = D, u = () => {
       H("update:visible", !1);
     }, a = d("battleTab"), m = d(!1), c = b(() => P.value === J.Connected), n = b(() => U.value.some((o) => {
       var t;
@@ -81,7 +81,7 @@ const Q = { class: "dialog-header" }, R = { class: "dialog-title" }, W = { class
           ])) : y("", !0),
           e("div", tt, [
             k(e("div", et, [
-              v(G, {
+              v(F, {
                 "battle-duration": s.value.battleDuration,
                 coHostLayoutTemplate: s.value.coHostLayoutTemplate
               }, null, 8, ["battle-duration", "coHostLayoutTemplate"])
@@ -89,7 +89,7 @@ const Q = { class: "dialog-header" }, R = { class: "dialog-title" }, W = { class
               [L, a.value === "battleTab"]
             ]),
             k(e("div", ot, [
-              v(j, {
+              v(K, {
                 battleDuration: s.value.battleDuration,
                 coHostLayoutTemplate: s.value.coHostLayoutTemplate
               }, null, 8, ["battleDuration", "coHostLayoutTemplate"])
@@ -98,7 +98,7 @@ const Q = { class: "dialog-header" }, R = { class: "dialog-title" }, W = { class
             ])
           ])
         ]),
-        v(K, {
+        v(G, {
           visible: m.value,
           "onUpdate:visible": t[3] || (t[3] = (r) => m.value = r),
           form: s.value,

package/dist/components/CoHostPanel/ConfigSettingPanel.js

@@ -1,100 +1,94 @@
-import { defineComponent as T, ref as p, watch as b, computed as N, createBlock as _, openBlock as l, unref as u, withCtx as x, createElementVNode as t, toDisplayString as r, createElementBlock as m, Fragment as y, renderList as f, normalizeClass as B, createCommentVNode as G, resolveDynamicComponent as P } from "vue";
-import { useUIKit as F, IconDynamicGridLayout as S, IconDynamic1v6Layout as U, TUIDialog as V } from "@tencentcloud/uikit-base-component-vue3";
-import { CoHostLayoutTemplate as h } from "../../types/coHost.js";
+import { defineComponent as T, ref as v, watch as b, computed as H, createBlock as _, openBlock as l, unref as u, withCtx as N, createElementVNode as e, toDisplayString as r, createElementBlock as m, Fragment as f, renderList as y, normalizeClass as B, createCommentVNode as x, resolveDynamicComponent as G } from "vue";
+import { useUIKit as P, IconDynamicGridLayout as S, TUIDialog as U } from "@tencentcloud/uikit-base-component-vue3";
+import { CoHostLayoutTemplate as V } from "../../types/coHost.js";
 import { _ as w } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const E = { class: "setting-panel" }, z = { class: "setting-item" }, A = { class: "setting-item-label" }, K = { class: "template-options" }, O = { class: "options-grid" }, $ = ["onClick"], j = { class: "option-info" }, q = { class: "setting-item" }, J = { class: "setting-item-label" }, M = { class: "setting-item-value" }, Q = { class: "layout-template-options" }, R = ["value", "checked"], W = { class: "layout-template-label" }, X = /* @__PURE__ */ T({
+const E = { class: "setting-panel" }, F = { class: "setting-item" }, z = { class: "setting-item-label" }, A = { class: "template-options" }, K = { class: "options-grid" }, O = ["onClick"], $ = { class: "option-info" }, j = { class: "setting-item" }, q = { class: "setting-item-label" }, J = { class: "setting-item-value" }, M = { class: "layout-template-options" }, Q = ["value", "checked"], R = { class: "layout-template-label" }, W = /* @__PURE__ */ T({
   __name: "ConfigSettingPanel",
   props: {
     visible: { type: Boolean },
     form: {}
   },
   emits: ["update:visible", "cancel", "confirm"],
-  setup(d, { emit: g }) {
-    const { t: o } = F(), n = d, i = g, s = p(n.visible), D = [
+  setup(d, { emit: h }) {
+    const { t: o } = P(), s = d, i = h, n = v(s.visible), g = [
       { label: o("Number minutes", { number: 1 }), value: 1 * 60 },
       { label: o("Number minutes", { number: 2 }), value: 2 * 60 },
       { label: o("Number minutes", { number: 3 }), value: 3 * 60 },
       { label: o("Number minutes", { number: 5 }), value: 5 * 60 }
-    ], c = p({
-      coHostLayoutTemplate: n.form.coHostLayoutTemplate,
-      battleDuration: n.form.battleDuration
+    ], c = v({
+      coHostLayoutTemplate: s.form.coHostLayoutTemplate,
+      battleDuration: s.form.battleDuration
     });
     function C(a) {
       c.value.coHostLayoutTemplate = a;
     }
-    const L = () => {
+    const D = () => {
       i("update:visible", !1), i("cancel");
     }, k = () => {
       i("update:visible", !1), i("confirm", { ...c.value });
-    }, I = (a) => {
+    }, L = (a) => {
       c.value.battleDuration = Number(a.target.value);
     };
-    b(() => n.visible, (a) => {
-      s.value = a;
-    }), b(s, (a) => {
+    b(() => s.visible, (a) => {
+      n.value = a;
+    }), b(n, (a) => {
       i("update:visible", a);
     });
-    const H = N(() => [
+    const I = H(() => [
       {
         id: "PortraitDynamic_Grid9",
         icon: S,
-        templateId: h.HostDynamicGrid,
+        templateId: V.HostDynamicGrid,
         label: o("Dynamic Grid9 Layout")
-      },
-      {
-        id: "PortraitFixed_1v6",
-        icon: U,
-        templateId: h.HostDynamic1v6,
-        label: o("Dynamic 1v6 Layout")
       }
     ]);
-    return (a, v) => (l(), _(u(V), {
-      visible: s.value,
-      "onUpdate:visible": v[0] || (v[0] = (e) => s.value = e),
+    return (a, p) => (l(), _(u(U), {
+      visible: n.value,
+      "onUpdate:visible": p[0] || (p[0] = (t) => n.value = t),
       title: u(o)("Anchor battle settings"),
       "custom-classes": ["co-host-dialog"],
-      onCancel: L,
+      onCancel: D,
       onConfirm: k
     }, {
-      default: x(() => [
-        t("div", E, [
-          t("div", z, [
-            t("div", A, r(u(o)("Connection Layout")), 1),
-            t("div", K, [
-              t("div", O, [
-                (l(!0), m(y, null, f(H.value, (e) => (l(), m("div", {
-                  key: e.id,
-                  class: B(["option-card", { active: c.value.coHostLayoutTemplate === e.templateId }]),
-                  onClick: (Y) => C(e.templateId)
+      default: N(() => [
+        e("div", E, [
+          e("div", F, [
+            e("div", z, r(u(o)("Connection Layout")), 1),
+            e("div", A, [
+              e("div", K, [
+                (l(!0), m(f, null, y(I.value, (t) => (l(), m("div", {
+                  key: t.id,
+                  class: B(["option-card", { active: c.value.coHostLayoutTemplate === t.templateId }]),
+                  onClick: (X) => C(t.templateId)
                 }, [
-                  t("div", j, [
-                    e.icon ? (l(), _(P(e.icon), {
+                  e("div", $, [
+                    t.icon ? (l(), _(G(t.icon), {
                       key: 0,
                       class: "option-icon"
-                    })) : G("", !0),
-                    t("h4", null, r(e.label), 1)
+                    })) : x("", !0),
+                    e("h4", null, r(t.label), 1)
                   ])
-                ], 10, $))), 128))
+                ], 10, O))), 128))
               ])
             ])
           ]),
-          t("div", q, [
-            t("div", J, r(u(o)("Battle duration")), 1),
-            t("div", M, [
-              t("div", Q, [
-                (l(), m(y, null, f(D, (e) => t("label", {
-                  key: e,
+          e("div", j, [
+            e("div", q, r(u(o)("Battle duration")), 1),
+            e("div", J, [
+              e("div", M, [
+                (l(), m(f, null, y(g, (t) => e("label", {
+                  key: t,
                   class: "layout-template-option"
                 }, [
-                  t("input", {
-                    value: e.value,
+                  e("input", {
+                    value: t.value,
                     type: "radio",
                     name: "coHostLayoutTemplate",
                     class: "layout-template-radio",
-                    checked: e.value === d.form.battleDuration,
-                    onInput: I
-                  }, null, 40, R),
-                  t("span", W, r(e.label), 1)
+                    checked: t.value === d.form.battleDuration,
+                    onInput: L
+                  }, null, 40, Q),
+                  e("span", R, r(t.label), 1)
                 ])), 64))
               ])
             ])
@@ -104,7 +98,7 @@ const E = { class: "setting-panel" }, z = { class: "setting-item" }, A = { class
       _: 1
     }, 8, ["visible", "title"]));
   }
-}), at = /* @__PURE__ */ w(X, [["__scopeId", "data-v-fa782600"]]);
+}), oe = /* @__PURE__ */ w(W, [["__scopeId", "data-v-8f40092f"]]);
 export {
-  at as default
+  oe as default
 };