@tencentcloud/roomkit-web-vue3
Version:
<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,
128 lines (127 loc) • 5.65 kB
JavaScript
import { defineComponent, ref, computed, withDirectives, createElementBlock, openBlock, createBlock, createCommentVNode, unref, createElementVNode, toDisplayString, normalizeClass } from "vue";
import IconButton from "./base/IconButton.vue.mjs";
import { IconButtonLayout } from "../../constants/room.mjs";
import { useI18n } from "../../locales/index.mjs";
import "../../services/main.mjs";
import { roomService } from "../../services/roomService.mjs";
import "@tencentcloud/tuiroom-engine-js";
import { isMobile } from "../../utils/environment.mjs";
import "mitt";
import "../../services/manager/roomActionManager.mjs";
import "@tencentcloud/tui-core";
import { useBasicStore } from "../../stores/basic.mjs";
import { useUIKit, IconSwitchTheme } from "@tencentcloud/uikit-base-component-vue3";
import vClickOutside from "../../directives/vClickOutside.mjs";
const _hoisted_1 = { class: "theme-container" };
const _hoisted_2 = {
key: 1,
class: "switch-theme-container"
};
const _hoisted_3 = { class: "switch-theme-item" };
const _hoisted_4 = { class: "color-blocks two-blocks" };
const _hoisted_5 = { class: "switch-theme-item" };
const _hoisted_6 = { class: "color-blocks four-blocks" };
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "SwitchTheme",
props: {
visible: { type: Boolean, default: true }
},
setup(__props) {
const { t } = useI18n();
const basicStore = useBasicStore();
const { theme, setTheme } = useUIKit();
const isShowThemeColorContainer = ref(false);
const switchThemeConfig = roomService.getComponentConfig("SwitchTheme");
const currentCustomTheme = ref("theme");
const currentTheme = computed(() => theme.value || basicStore.defaultTheme);
function handleSwitchTheme() {
if (!isMobile) {
isShowThemeColorContainer.value = !isShowThemeColorContainer.value;
return;
}
const newTheme = currentTheme.value === "light" ? "dark" : "light";
theme.value ? setTheme(newTheme) : roomService.setTheme(newTheme);
}
function toggleCustomTheme(newTheme) {
if (!theme.value) {
roomService.setTheme(newTheme);
return;
}
const isBaseTheme = newTheme === "light" || newTheme === "dark";
const themeConfig = isBaseTheme ? newTheme : { themeStyle: theme.value, primaryColor: newTheme };
setTheme(themeConfig);
if (!isBaseTheme) {
currentCustomTheme.value = newTheme;
}
}
function handleClickOutSide() {
if (isShowThemeColorContainer.value) {
isShowThemeColorContainer.value = false;
}
}
return (_ctx, _cache) => {
return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
_ctx.visible && unref(switchThemeConfig).visible ? (openBlock(), createBlock(IconButton, {
key: 0,
title: unref(t)("Switch Theme"),
layout: unref(IconButtonLayout).HORIZONTAL,
icon: unref(IconSwitchTheme),
onClickIcon: handleSwitchTheme
}, null, 8, ["title", "layout", "icon"])) : createCommentVNode("", true),
isShowThemeColorContainer.value && !unref(isMobile) ? (openBlock(), createElementBlock("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
createElementVNode("span", null, toDisplayString(unref(t)("Theme Colours")), 1),
createElementVNode("div", _hoisted_4, [
createElementVNode("div", {
class: normalizeClass(["color-block black", { active: currentTheme.value === "dark" }]),
onClick: _cache[0] || (_cache[0] = ($event) => toggleCustomTheme("dark"))
}, null, 2),
createElementVNode("div", {
class: normalizeClass(["color-block white", { active: currentTheme.value === "light" }]),
onClick: _cache[1] || (_cache[1] = ($event) => toggleCustomTheme("light"))
}, null, 2)
])
]),
createElementVNode("div", _hoisted_5, [
createElementVNode("span", null, toDisplayString(unref(t)("Custom Themes")), 1),
createElementVNode("div", _hoisted_6, [
createElementVNode("div", {
class: normalizeClass([
"color-block theme",
{ active: currentCustomTheme.value === "theme" }
]),
onClick: _cache[2] || (_cache[2] = ($event) => toggleCustomTheme("#1c66e5"))
}, null, 2),
createElementVNode("div", {
class: normalizeClass([
"color-block green",
{ active: currentCustomTheme.value === "green" }
]),
onClick: _cache[3] || (_cache[3] = ($event) => toggleCustomTheme("#0abf77"))
}, null, 2),
createElementVNode("div", {
class: normalizeClass([
"color-block red",
{ active: currentCustomTheme.value === "red" }
]),
onClick: _cache[4] || (_cache[4] = ($event) => toggleCustomTheme("#e54545"))
}, null, 2),
createElementVNode("div", {
class: normalizeClass([
"color-block orange",
{ active: currentCustomTheme.value === "orange" }
]),
onClick: _cache[5] || (_cache[5] = ($event) => toggleCustomTheme("#ff7200"))
}, null, 2)
])
])
])) : createCommentVNode("", true)
])), [
[unref(vClickOutside), handleClickOutSide]
]);
};
}
});
export {
_sfc_main as default
};