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,
125 lines (124 loc) • 5.79 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
const IconButton = require("./base/IconButton.vue.js");
const SwitchThemeIcon = require("./icons/SwitchThemeIcon.vue.js");
const room = require("../../constants/room.js");
const index = require("../../locales/index.js");
require("../../services/main.js");
const roomService = require("../../services/roomService.js");
require("@tencentcloud/tuiroom-engine-js");
const environment = require("../../utils/environment.js");
require("mitt");
require("../../services/manager/roomActionManager.js");
require("@tencentcloud/tui-core");
const basic = require("../../stores/basic.js");
const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
const vClickOutside = require("../../directives/vClickOutside.js");
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__ */ Vue.defineComponent({
__name: "SwitchTheme",
props: {
visible: { type: Boolean, default: true }
},
setup(__props) {
const { t } = index.useI18n();
const basicStore = basic.useBasicStore();
const { theme, setTheme } = uikitBaseComponentVue3.useUIKit();
const isShowThemeColorContainer = Vue.ref(false);
const switchThemeConfig = roomService.roomService.getComponentConfig("SwitchTheme");
const currentCustomTheme = Vue.ref("theme");
const currentTheme = Vue.computed(() => theme.value || basicStore.defaultTheme);
function handleSwitchTheme() {
const newTheme = currentTheme.value === "light" ? "dark" : "light";
theme.value ? setTheme(newTheme) : roomService.roomService.setTheme(newTheme);
}
function toggleCustomTheme(newTheme) {
if (!theme.value) {
roomService.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 Vue.withDirectives((Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
_ctx.visible && Vue.unref(switchThemeConfig).visible ? (Vue.openBlock(), Vue.createBlock(IconButton.default, {
key: 0,
title: Vue.unref(t)("Switch Theme"),
layout: Vue.unref(room.IconButtonLayout).HORIZONTAL,
icon: SwitchThemeIcon.default,
onClickIcon: handleSwitchTheme
}, null, 8, ["title", "layout"])) : Vue.createCommentVNode("", true),
isShowThemeColorContainer.value && !Vue.unref(environment.isMobile) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_2, [
Vue.createElementVNode("div", _hoisted_3, [
Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Theme Colours")), 1),
Vue.createElementVNode("div", _hoisted_4, [
Vue.createElementVNode("div", {
class: Vue.normalizeClass(["color-block black", { active: currentTheme.value === "dark" }]),
onClick: _cache[0] || (_cache[0] = ($event) => toggleCustomTheme("dark"))
}, null, 2),
Vue.createElementVNode("div", {
class: Vue.normalizeClass(["color-block white", { active: currentTheme.value === "light" }]),
onClick: _cache[1] || (_cache[1] = ($event) => toggleCustomTheme("light"))
}, null, 2)
])
]),
Vue.createElementVNode("div", _hoisted_5, [
Vue.createElementVNode("span", null, Vue.toDisplayString(Vue.unref(t)("Custom Themes")), 1),
Vue.createElementVNode("div", _hoisted_6, [
Vue.createElementVNode("div", {
class: Vue.normalizeClass([
"color-block theme",
{ active: currentCustomTheme.value === "theme" }
]),
onClick: _cache[2] || (_cache[2] = ($event) => toggleCustomTheme("theme"))
}, null, 2),
Vue.createElementVNode("div", {
class: Vue.normalizeClass([
"color-block green",
{ active: currentCustomTheme.value === "green" }
]),
onClick: _cache[3] || (_cache[3] = ($event) => toggleCustomTheme("green"))
}, null, 2),
Vue.createElementVNode("div", {
class: Vue.normalizeClass([
"color-block red",
{ active: currentCustomTheme.value === "red" }
]),
onClick: _cache[4] || (_cache[4] = ($event) => toggleCustomTheme("red"))
}, null, 2),
Vue.createElementVNode("div", {
class: Vue.normalizeClass([
"color-block orange",
{ active: currentCustomTheme.value === "orange" }
]),
onClick: _cache[5] || (_cache[5] = ($event) => toggleCustomTheme("orange"))
}, null, 2)
])
])
])) : Vue.createCommentVNode("", true)
])), [
[Vue.unref(vClickOutside.default), handleClickOutSide]
]);
};
}
});
exports.default = _sfc_main;