tuikit-atomicx-vue3 4.4.0 → 4.5.1

package/dist/components/UserList/AllUserActions/useIndexHooks.js

@@ -1,42 +1,41 @@
-import { computed as r, ref as A } from "vue";
-import { TUIRole as p } from "@tencentcloud/tuiroom-engine-js";
+import { computed as n, ref as A } from "vue";
+import { TUIRole as f } from "@tencentcloud/tuiroom-engine-js";
 import { useI18n as d } from "../../../locales/index.js";
-import { TUIToast as I, TOAST_TYPE as v } from "@tencentcloud/uikit-base-component-vue3";
-import { useUserState as C } from "../../../states/UserState/index.js";
-import S from "../../../hooks/useRoomActions/index.js";
-import { RoomAction as t } from "../../../types/room.js";
-function x() {
-  const { t: n } = d(), { localUser: i, userList: s } = C(), l = r(
+import { TUIToast as p, TOAST_TYPE as I } from "@tencentcloud/uikit-base-component-vue3";
+import { useUserState as v } from "../../../states/UserState/index.js";
+import C from "../../../hooks/useRoomActions/index.js";
+function k() {
+  const { t } = d(), { localUser: r, userList: i } = v(), s = n(
     () => {
       var o;
-      return ((o = i.value) == null ? void 0 : o.userRole) === p.kGeneralUser;
+      return ((o = r.value) == null ? void 0 : o.userRole) === f.kGeneralUser;
     }
-  ), [m, c, a] = S({
+  ), [l, m, c] = C({
     actionList: [
-      t.AudioAction,
-      t.VideoAction,
-      t.ScreenAction
+      RoomAction.AudioAction,
+      RoomAction.VideoAction,
+      RoomAction.ScreenAction
     ]
-  }), u = r(() => [a]), e = A(!1);
-  function f() {
+  }), a = n(() => [c]), e = A(!1);
+  function u() {
     e.value = !e.value;
   }
   return {
-    t: n,
-    toggleClickMoreBtn: f,
-    isGeneralUser: l,
+    t,
+    toggleClickMoreBtn: u,
+    isGeneralUser: s,
     showMoreControl: e,
-    roomAudioAction: m,
-    roomVideoAction: c,
-    moreControlList: u,
+    roomAudioAction: l,
+    roomVideoAction: m,
+    moreControlList: a,
     handleCallAllInvitee: () => {
-      s.value.filter((o) => !o.isInRoom).map((o) => o.userId), I({
-        type: v.SUCCESS,
-        message: n("Invitation sent, waiting for members to join.")
+      i.value.filter((o) => !o.isInRoom).map((o) => o.userId), p({
+        type: I.SUCCESS,
+        message: t("Invitation sent, waiting for members to join.")
       });
     }
   };
 }
 export {
-  x as default
+  k as default
 };

package/dist/components/UserList/UserItem/UserInfo/index.js

@@ -1,11 +1,11 @@
-import { defineComponent as z, computed as s, createElementBlock as f, openBlock as a, normalizeClass as i, unref as d, createElementVNode as u, createCommentVNode as b, createVNode as M, toDisplayString as h, createBlock as A, Fragment as V, renderList as $, resolveDynamicComponent as B } from "vue";
+import { defineComponent as z, computed as s, createElementBlock as f, openBlock as a, normalizeClass as i, unref as d, createElementVNode as u, createCommentVNode as h, createVNode as M, toDisplayString as b, createBlock as A, Fragment as V, renderList as $, resolveDynamicComponent as B } from "vue";
 import { TUIRole as p } from "@tencentcloud/tuiroom-engine-js";
-import D from "../../../../baseComp/Avatar.js";
-import { IconScreenOpen as N, IconAudioOpen as T, IconAudioClose as O, IconVideoOpen as E, IconVideoClose as R, IconApplyActive as H, IconUser as L } from "@tencentcloud/uikit-base-component-vue3";
+import { IconScreenOpen as D, IconAudioOpen as N, IconAudioClose as O, IconVideoOpen as T, IconVideoClose as R, IconApplyActive as E, IconUser as H } from "@tencentcloud/uikit-base-component-vue3";
+import L from "../../../../baseComp/Avatar.js";
 import { useI18n as F } from "../../../../locales/index.js";
-import { isMobile as P } from "../../../../utils/environment.js";
-import { useRoomState as j } from "../../../../states/RoomState.js";
-import { useUserState as q } from "../../../../states/UserState/index.js";
+import { useRoomState as P } from "../../../../states/RoomState/index.js";
+import { useUserState as j } from "../../../../states/UserState/index.js";
+import { isMobile as q } from "../../../../utils/environment.js";
 import { SeatStatus as g } from "../../../../types/user.js";
 import { DeviceStatus as v } from "../../../../types/device.js";
 import { _ as G } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
@@ -19,7 +19,7 @@ const J = { class: "user-name" }, K = { class: "role-info" }, Q = {
     showStateIcon: { type: Boolean, default: !0 }
   },
   setup(r) {
-    const { t: n } = F(), { localUser: k, getDisplayName: y } = q(), { currentRoom: U } = j(), o = r, _ = s(() => o.userInfo.userRole === p.kRoomOwner), c = s(() => {
+    const { t: n } = F(), { localUser: k, getDisplayName: y } = j(), { currentRoom: U } = P(), o = r, _ = s(() => o.userInfo.userRole === p.kRoomOwner), c = s(() => {
       var e;
       return ((e = k.value) == null ? void 0 : e.userId) === o.userInfo.userId;
     }), I = s(
@@ -35,34 +35,34 @@ const J = { class: "user-name" }, K = { class: "role-info" }, Q = {
       () => o.userInfo.seatStatus === g.OffApplicationPending
     ), C = s(() => {
       const e = [];
-      return o.userInfo.screenStatus === v.On && e.push({ icon: N }), l.value || (e.push({
-        icon: o.userInfo.microphoneStatus === v.On ? T : O
+      return o.userInfo.screenStatus === v.On && e.push({ icon: D }), l.value || (e.push({
+        icon: o.userInfo.microphoneStatus === v.On ? N : O
       }), e.push({
-        icon: o.userInfo.cameraStatus === v.On ? E : R
-      })), l.value && !S.value && (e.push({ icon: O, disable: !0 }), e.push({ icon: R, disable: !0 })), l.value && S.value && e.push({ icon: H, size: 20 }), e;
+        icon: o.userInfo.cameraStatus === v.On ? T : R
+      })), l.value && !S.value && (e.push({ icon: O, disable: !0 }), e.push({ icon: R, disable: !0 })), l.value && S.value && e.push({ icon: E, size: 20 }), e;
     });
     return (e, X) => (a(), f("div", {
-      class: i([d(P) ? "member-info-mobile" : "member-info"])
+      class: i([d(q) ? "member-info-mobile" : "member-info"])
     }, [
       u("div", {
         class: i(
           !r.showStateIcon && t.value ? "member-basic-info-admin" : "member-basic-info"
         )
       }, [
-        M(D, {
+        M(L, {
           class: "avatar-url",
           "img-src": r.userInfo.avatarUrl
         }, null, 8, ["img-src"]),
-        u("div", J, h(d(y)(r.userInfo)), 1),
+        u("div", J, b(d(y)(r.userInfo)), 1),
         u("div", K, [
-          I.value || t.value ? (a(), A(d(L), {
+          I.value || t.value ? (a(), A(d(H), {
             key: 0,
             size: "20",
             class: i(t.value ? "admin-icon" : "master-icon")
-          }, null, 8, ["class"])) : b("", !0),
+          }, null, 8, ["class"])) : h("", !0),
           u("div", {
             class: i(`user-extra-info ${t.value ? "user-extra-info-admin" : ""}`)
-          }, h(x.value), 3)
+          }, b(x.value), 3)
         ])
       ], 2),
       r.showStateIcon ? (a(), f("div", Q, [
@@ -71,10 +71,10 @@ const J = { class: "user-name" }, K = { class: "role-info" }, Q = {
           class: i(["state-icon", { "disable-icon": m.disable }]),
           size: m.size
         }, null, 8, ["class", "size"]))), 128))
-      ])) : b("", !0)
+      ])) : h("", !0)
     ], 2));
   }
-}), ce = /* @__PURE__ */ G(W, [["__scopeId", "data-v-f9baa574"]]);
+}), ce = /* @__PURE__ */ G(W, [["__scopeId", "data-v-afade595"]]);
 export {
   ce as default
 };

package/dist/components/UserPicker/UserPicker.js

@@ -41,8 +41,7 @@ const J = ["data-display-mode"], R = ["data-display-mode"], Y = /* @__PURE__ */
     }), i = w({
       dataSource: d,
       isTreeMode: c.value,
-      onSearch: a.onSearch || (() => {
-      })
+      onSearch: a.onSearch
     }), m = O({
       onExpand: (t) => {
         a.onExpand && a.onExpand(t);

package/dist/components/UserPicker/components/SelectedPanel/SelectedPanel.js

@@ -1,4 +1,4 @@
-import { defineComponent as h, computed as I, createElementBlock as c, createCommentVNode as i, openBlock as a, normalizeClass as t, createElementVNode as l, toDisplayString as d, unref as o, createTextVNode as m, Fragment as u, renderList as f, createVNode as p } from "vue";
+import { defineComponent as h, computed as I, createElementBlock as c, createCommentVNode as i, openBlock as a, normalizeClass as t, createElementVNode as l, toDisplayString as n, unref as o, createTextVNode as m, Fragment as p, renderList as f, createVNode as y } from "vue";
 import { useUIKit as k, IconClose as b } from "@tencentcloud/uikit-base-component-vue3";
 import $ from "../../../Avatar/Avatar.js";
 import { _ as N } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
@@ -12,8 +12,8 @@ const j = ["onClick"], C = /* @__PURE__ */ h({
     maxCount: { default: Number.POSITIVE_INFINITY }
   },
   setup(_) {
-    const { t: y } = k(), n = _, r = I(() => n.displayMode === "list" ? n.selectedItems : n.displayMode === "tree" ? n.selectedItems.filter((e) => e.isLeafNode) : []), v = Number.POSITIVE_INFINITY;
-    return (e, F) => r.value.length > 0 ? (a(), c("div", {
+    const { t: u } = k(), d = _, r = I(() => d.displayMode === "list" ? d.selectedItems : d.displayMode === "tree" ? d.selectedItems.filter((e) => e.isLeafNode) : []), v = Number.POSITIVE_INFINITY;
+    return (e, z) => r.value.length > 0 ? (a(), c("div", {
       key: 0,
       class: t(e.$style.selected__panel)
     }, [
@@ -22,27 +22,28 @@ const j = ["onClick"], C = /* @__PURE__ */ h({
       }, [
         l("span", {
           class: t(e.$style.selected__title)
-        }, d(o(y)("UserPicker.selected")), 3),
+        }, n(o(u)("UserPicker.selected")), 3),
         l("span", {
           class: t(e.$style.selected__count)
         }, [
-          m(d(r.value.length) + " ", 1),
-          _.maxCount < o(v) ? (a(), c(u, { key: 0 }, [
-            m(" / " + d(_.maxCount), 1)
-          ], 64)) : i("", !0)
+          m(n(r.value.length) + " ", 1),
+          _.maxCount < o(v) ? (a(), c(p, { key: 0 }, [
+            m(" / " + n(_.maxCount), 1)
+          ], 64)) : i("", !0),
+          m(" " + n(o(u)("UserPicker.people_unit")), 1)
         ], 2)
       ], 2),
       l("div", {
         class: t(e.$style.selected__list)
       }, [
-        (a(!0), c(u, null, f(r.value, (s) => (a(), c("div", {
+        (a(!0), c(p, null, f(r.value, (s) => (a(), c("div", {
           key: s.key,
           class: t(e.$style.selected__item)
         }, [
           l("div", {
             class: t(e.$style["selected__item-content"])
           }, [
-            p(o($), {
+            y(o($), {
               src: s.avatarUrl,
               class: t(e.$style["selected__item-avatar"]),
               size: "sm",
@@ -50,16 +51,16 @@ const j = ["onClick"], C = /* @__PURE__ */ h({
             }, null, 8, ["src", "class", "alt"]),
             l("div", {
               class: t(e.$style["selected__item-label"])
-            }, d(s.label), 3)
+            }, n(s.label), 3)
           ], 2),
           _.lockedKeys.has(s.key) ? i("", !0) : (a(), c("button", {
             key: 0,
             type: "button",
             class: t(e.$style["selected__remove-button"]),
             "aria-label": "remove",
-            onClick: (K) => _.onRemove(s.key)
+            onClick: (F) => _.onRemove(s.key)
           }, [
-            p(o(b), {
+            y(o(b), {
               name: "close",
               size: "12px"
             })
@@ -68,10 +69,10 @@ const j = ["onClick"], C = /* @__PURE__ */ h({
       ], 2)
     ], 2)) : i("", !0);
   }
-}), V = "_selected__panel_1phj6_12", M = "_selected__header_1phj6_17", P = "_selected__title_1phj6_23", S = "_selected__count_1phj6_28", T = "_selected__list_1phj6_32", g = "_selected__item_1phj6_55", E = {
+}), V = "_selected__panel_1phj6_12", P = "_selected__header_1phj6_17", M = "_selected__title_1phj6_23", S = "_selected__count_1phj6_28", T = "_selected__list_1phj6_32", g = "_selected__item_1phj6_55", E = {
   selected__panel: V,
-  selected__header: M,
-  selected__title: P,
+  selected__header: P,
+  selected__title: M,
   selected__count: S,
   selected__list: T,
   selected__item: g,
@@ -79,9 +80,9 @@ const j = ["onClick"], C = /* @__PURE__ */ h({
   "selected__item-avatar": "_selected__item-avatar_1phj6_70",
   "selected__item-label": "_selected__item-label_1phj6_83",
   "selected__remove-button": "_selected__remove-button_1phj6_91"
-}, z = {
+}, U = {
   $style: E
-}, R = /* @__PURE__ */ N(C, [["__cssModules", z]]);
+}, R = /* @__PURE__ */ N(C, [["__cssModules", U]]);
 export {
   R as default
 };

package/dist/components/UserPicker/hooks/useSearchFilter.d.ts

@@ -1,10 +1,10 @@
 import { Ref } from 'vue';
-import { UserPickerDataSource } from '../type';
+import { UserPickerDataSource, UserPickerRow } from '../type';
 
 interface UseSearchFilterOptions<T = unknown> {
     dataSource: Ref<UserPickerDataSource<T>>;
     isTreeMode?: boolean;
-    onSearch?: (value: string) => void;
+    onSearch?: (dataSource: Array<UserPickerRow<T>>, keyword: string) => Array<UserPickerRow<T>>;
     debounceTime?: number;
 }
 interface UseSearchFilterReturn<T = unknown> {

package/dist/components/UserPicker/hooks/useSearchFilter.js

@@ -1,50 +1,58 @@
-import { ref as f, computed as h } from "vue";
+import { ref as h, computed as f } from "vue";
 function d(e) {
   return e.length === 0 ? !1 : "isLeafNode" in e[0];
 }
-function m(e, i) {
-  if (!i.trim())
+function m(e, a) {
+  if (!a.trim())
     return e;
-  const l = (r) => r.label.toLowerCase().includes(i.toLowerCase()), u = (r) => {
-    const n = [];
-    return r.forEach((t) => {
-      const c = l(t);
-      let s = [];
-      t.children && t.children.length && (s = u(t.children)), (c || s.length > 0) && n.push({
-        ...t,
-        children: s.length > 0 ? s : t.children
+  const t = a.toLowerCase(), u = (l) => l.key.toLowerCase().includes(t) || l.label.toLowerCase().includes(t), r = (l) => {
+    const c = [];
+    return l.forEach((n) => {
+      const o = u(n);
+      let i = [];
+      n.children && n.children.length && (i = r(n.children)), (o || i.length > 0) && c.push({
+        ...n,
+        children: i.length > 0 ? i : n.children
       });
-    }), n;
+    }), c;
   };
-  return u(e);
+  return r(e);
 }
-function g(e, i) {
-  return i.trim() ? e.filter((l) => l.label.toLowerCase().includes(i.toLowerCase())) : e;
+function w(e, a) {
+  if (!a.trim())
+    return e;
+  const t = a.toLowerCase();
+  return e.filter(
+    (u) => u.key.toLowerCase().includes(t) || u.label.toLowerCase().includes(t)
+  );
 }
-function p({
+function C({
   dataSource: e,
-  isTreeMode: i = !1,
-  onSearch: l,
+  isTreeMode: a = !1,
+  onSearch: t,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   debounceTime: u = 300
 }) {
-  const r = f(""), n = f(!1), t = h(() => r.value.trim() ? i && d(e.value) ? m(e.value, r.value) : g(e.value, r.value) : e.value), c = (a) => {
-    n.value = !0, r.value = a, l && l(a), n.value = !1;
-  }, s = () => {
-    r.value = "", l && l("");
-  }, o = (a) => {
-    r.value = a;
-  }, v = h(() => r.value.trim() ? Array.isArray(t.value) && t.value.length === 0 : !1);
+  const r = h(""), l = h(!1), c = f(() => {
+    const s = r.value.trim();
+    return s ? a && d(e.value) ? m(e.value, s) : t ? t(e.value, s) : w(e.value, s) : e.value;
+  }), n = (s) => {
+    l.value = !0, r.value = s, l.value = !1;
+  }, o = () => {
+    r.value = "";
+  }, i = (s) => {
+    r.value = s;
+  }, v = f(() => r.value.trim() ? Array.isArray(c.value) && c.value.length === 0 : !1);
   return {
     searchValue: r,
-    setSearchValue: o,
-    filteredData: t,
-    isSearching: n,
-    handleSearch: c,
-    clearSearch: s,
+    setSearchValue: i,
+    filteredData: c,
+    isSearching: l,
+    handleSearch: n,
+    clearSearch: o,
     isSearchEmpty: v
   };
 }
 export {
-  p as useSearchFilter
+  C as useSearchFilter
 };

package/dist/components/UserPicker/i18n/en-US.d.ts

@@ -3,5 +3,6 @@ declare const UserPicker: {
     no_result: string;
     no_data_available: string;
     selected: string;
+    people_unit: string;
 };
 export default UserPicker;

package/dist/components/UserPicker/i18n/en-US.js

@@ -2,7 +2,8 @@ const e = {
   search: "Search",
   no_result: "No result",
   no_data_available: "No data available",
-  selected: "Selected"
+  selected: "Selected",
+  people_unit: "people"
 };
 export {
   e as default

package/dist/components/UserPicker/i18n/index.d.ts

@@ -4,12 +4,14 @@ declare const resources: {
         no_result: string;
         no_data_available: string;
         selected: string;
+        people_unit: string;
     };
     'zh-CN': {
         search: string;
         no_result: string;
         no_data_available: string;
         selected: string;
+        people_unit: string;
     };
 };
 export { resources };

package/dist/components/UserPicker/i18n/zh-CN.d.ts

@@ -3,5 +3,6 @@ declare const UserPicker: {
     no_result: string;
     no_data_available: string;
     selected: string;
+    people_unit: string;
 };
 export default UserPicker;

package/dist/components/UserPicker/i18n/zh-CN.js

@@ -2,7 +2,8 @@ const e = {
   search: "搜索",
   no_result: "没有结果",
   no_data_available: "无数据",
-  selected: "已选择"
+  selected: "已选择",
+  people_unit: "人"
 };
 export {
   e as default

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

@@ -17,7 +17,7 @@ declare const UserPicker: import('vue').DefineComponent<import('vue').ExtractPro
         type: import('vue').PropType<(data: UserPickerRow<unknown> | UserPickerNode<unknown>) => any>;
     };
     onSearch: {
-        type: import('vue').PropType<(value: string) => void>;
+        type: import('vue').PropType<(dataSource: UserPickerRow<unknown>[], keyword: string) => UserPickerRow<unknown>[]>;
     };
     maxCount: {
         type: import('vue').PropType<number>;
@@ -78,7 +78,7 @@ declare const UserPicker: import('vue').DefineComponent<import('vue').ExtractPro
         type: import('vue').PropType<(data: UserPickerRow<unknown> | UserPickerNode<unknown>) => any>;
     };
     onSearch: {
-        type: import('vue').PropType<(value: string) => void>;
+        type: import('vue').PropType<(dataSource: UserPickerRow<unknown>[], keyword: string) => UserPickerRow<unknown>[]>;
     };
     maxCount: {
         type: import('vue').PropType<number>;

package/dist/components/UserPicker/type.d.ts

@@ -39,7 +39,7 @@ export interface UserPickerProps<T = unknown> {
     onMaxCountExceed?: (selectedItems: UserPickerResult<T>) => void;
     enableSearch?: boolean;
     searchPlaceholder?: string;
-    onSearch?: (value: string) => void;
+    onSearch?: (dataSource: Array<UserPickerRow<T>>, keyword: string) => Array<UserPickerRow<T>>;
     renderItem?: (data: UserPickerRow<T> | UserPickerNode<T>) => any;
     onSelectedChange?: (selectedItems: UserPickerResult<T>) => void;
     onReachEnd?: () => void;

package/dist/components/VideoSetting/CameraSelect.js

@@ -1,9 +1,8 @@
-import { defineComponent as h, ref as I, watch as _, onBeforeMount as b, createBlock as m, openBlock as o, unref as n, withCtx as g, createElementBlock as y, Fragment as B, renderList as k } from "vue";
-import w from "../../baseComp/Select/SelectPC.js";
-import x from "../../baseComp/Option/OptionPC.js";
+import { defineComponent as I, ref as h, watch as _, onBeforeMount as b, createBlock as m, openBlock as o, unref as n, withCtx as g, createElementBlock as y, Fragment as B, renderList as k } from "vue";
+import { TUISelect as w, TUIOption as x } from "@tencentcloud/uikit-base-component-vue3";
 import { useDeviceState as S } from "../../states/DeviceState/DeviceState.js";
 import { _ as L } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const V = /* @__PURE__ */ h({
+const U = /* @__PURE__ */ I({
   __name: "CameraSelect",
   props: {
     onChange: {},
@@ -11,7 +10,7 @@ const V = /* @__PURE__ */ h({
   },
   setup(d) {
     var i;
-    const { cameraList: c, currentCamera: t, setCurrentCamera: p, getCameraList: v } = S(), u = d, l = I((i = t.value) == null ? void 0 : i.deviceId);
+    const { cameraList: c, currentCamera: t, setCurrentCamera: p, getCameraList: v } = S(), u = d, l = h((i = t.value) == null ? void 0 : i.deviceId);
     _(
       () => {
         var e;
@@ -55,7 +54,7 @@ const V = /* @__PURE__ */ h({
       _: 1
     }, 8, ["modelValue", "disabled"]));
   }
-}), O = /* @__PURE__ */ L(V, [["__scopeId", "data-v-991fca18"]]);
+}), M = /* @__PURE__ */ L(U, [["__scopeId", "data-v-ec49906e"]]);
 export {
-  O as default
+  M as default
 };

package/dist/components/VideoSetting/VideoMediaControl.js

@@ -1,58 +1,58 @@
-import { defineComponent as T, inject as V, ref as x, withDirectives as d, createElementBlock as r, openBlock as o, createVNode as f, unref as e, withCtx as z, Fragment as u, createBlock as i, vShow as B } from "vue";
-import { IconCameraOn as p, IconCameraOff as v } from "@tencentcloud/uikit-base-component-vue3";
-import E from "../../baseComp/IconButton.js";
-import P from "./VideoSettingTab.js";
-import { useI18n as L } from "../../locales/index.js";
-import N from "../../directives/vClickOutside.js";
-import { useUserState as R } from "../../states/UserState/index.js";
-import { useRoomState as U } from "../../states/RoomState.js";
-import { useDeviceState as j } from "../../states/DeviceState/DeviceState.js";
-import { DeviceError as F, DeviceStatus as s, MediaSettingDisplayMode as H } from "../../types/device.js";
-import { _ as W } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const q = { class: "video-control-container" }, A = /* @__PURE__ */ T({
+import { defineComponent as b, inject as O, ref as P, withDirectives as T, createElementBlock as r, openBlock as t, createVNode as D, createBlock as a, createCommentVNode as x, unref as e, withCtx as z, Fragment as d } from "vue";
+import { IconCameraOn as f, IconCameraOff as p } from "@tencentcloud/uikit-base-component-vue3";
+import B from "../../baseComp/IconButton.js";
+import E from "../../directives/vClickOutside.js";
+import { useI18n as N } from "../../locales/index.js";
+import { useRoomParticipantState as L } from "../../states/RoomParticipantState/index.js";
+import { useRoomState as R } from "../../states/RoomState/index.js";
+import j from "./VideoSettingTab.js";
+import { useDeviceState as F } from "../../states/DeviceState/DeviceState.js";
+import { DeviceError as H, DeviceStatus as n, MediaSettingDisplayMode as W } from "../../types/device.js";
+import { _ as q } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const A = { class: "video-control-container" }, G = /* @__PURE__ */ b({
   __name: "VideoMediaControl",
   emits: ["click-icon"],
-  setup(G, { emit: C }) {
-    const _ = V("videoSettingProps"), k = C, { cameraStatus: n, cameraLastError: S, isCameraTesting: c, startCameraDeviceTest: h, stopCameraDeviceTest: w, openLocalCamera: y, closeLocalCamera: g } = j(), { localUser: I } = R(), { currentRoom: l } = U(), { t: D } = L(), t = x(!1);
-    async function M() {
-      var a;
-      if (t.value = !1, k("click-icon"), !l.value) {
-        c.value ? await w() : await h({ view: "video-preview" });
+  setup(J, { emit: u }) {
+    const v = O("videoSettingProps"), C = u, { cameraStatus: s, cameraLastError: k, isCameraTesting: c, startCameraTest: _, stopCameraTest: S, openLocalCamera: h, closeLocalCamera: y } = F(), { currentRoom: m } = R(), { localParticipant: w } = L(), { t: g } = N(), o = P(!1);
+    async function I() {
+      var i;
+      if (o.value = !1, C("click-icon"), !m.value) {
+        c.value ? await S() : await _({ view: "video-preview" });
         return;
       }
-      ((a = I.value) == null ? void 0 : a.cameraStatus) === s.On ? await g() : await y();
+      ((i = w.value) == null ? void 0 : i.cameraStatus) === n.On ? await y() : await h();
     }
-    function b() {
-      t.value = !t.value;
+    function M() {
+      o.value = !o.value;
     }
-    function O() {
-      t.value && (t.value = !1);
+    function V() {
+      o.value && (o.value = !1);
     }
-    return (a, J) => {
-      var m;
-      return d((o(), r("div", q, [
-        f(E, {
-          title: e(D)("Camera"),
-          "has-more": ((m = e(_)) == null ? void 0 : m.displayMode) === e(H).IconWithPanel,
-          disabled: e(n) === e(s).OffNeedPermission,
-          "is-not-support": e(S) !== e(F).NoError,
-          onClickIcon: M,
-          onClickMore: b
+    return (i, K) => {
+      var l;
+      return T((t(), r("div", A, [
+        D(B, {
+          title: e(g)("Camera"),
+          "has-more": ((l = e(v)) == null ? void 0 : l.displayMode) === e(W).IconWithPanel,
+          disabled: e(s) === e(n).OffNeedPermission,
+          "is-not-support": e(k) !== e(H).NoError,
+          onClickIcon: I,
+          onClickMore: M
         }, {
           default: z(() => [
-            e(l) ? (o(), r(u, { key: 1 }, [
-              e(n) === e(s).On ? (o(), i(e(p), {
+            e(m) ? (t(), r(d, { key: 1 }, [
+              e(s) === e(n).On ? (t(), a(e(f), {
                 key: 0,
                 size: "24"
-              })) : (o(), i(e(v), {
+              })) : (t(), a(e(p), {
                 key: 1,
                 size: "24"
               }))
-            ], 64)) : (o(), r(u, { key: 0 }, [
-              e(c) ? (o(), i(e(p), {
+            ], 64)) : (t(), r(d, { key: 0 }, [
+              e(c) ? (t(), a(e(f), {
                 key: 0,
                 size: "24"
-              })) : (o(), i(e(v), {
+              })) : (t(), a(e(p), {
                 key: 1,
                 size: "24"
               }))
@@ -60,15 +60,16 @@ const q = { class: "video-control-container" }, A = /* @__PURE__ */ T({
           ]),
           _: 1
         }, 8, ["title", "has-more", "disabled", "is-not-support"]),
-        d(f(P, { class: "video-tab" }, null, 512), [
-          [B, t.value]
-        ])
+        o.value ? (t(), a(j, {
+          key: 0,
+          class: "video-tab"
+        })) : x("", !0)
       ])), [
-        [e(N), O]
+        [e(E), V]
       ]);
     };
   }
-}), re = /* @__PURE__ */ W(A, [["__scopeId", "data-v-95f3c5e7"]]);
+}), re = /* @__PURE__ */ q(G, [["__scopeId", "data-v-9f083804"]]);
 export {
   re as default
 };