@ndscnj/roomkit-web-vue3 25.12.2415 → 25.12.2418

package/src/TUIRoom/components/RoomFooter/VoteControl/MoreControlH5.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <div v-if="moreControlConfig.visible" class="more-control-container">
+      <icon-button
+        v-tap="showMore"
+        :is-active="sidebarName === 'more'"
+        :title="t('More')"
+      >
+        <IconExtension size="24" />
+      </icon-button>
+    </div>
+    <div v-if="showMoreContent" ref="moreContentRef" class="show-more-content">
+      <div class="control-compent">
+        <chat-control
+          v-if="roomStore.isSpeakAfterTakingSeatMode"
+          @click="handleControlClick('chatControl')"
+        />
+        <contact-control @click="handleControlClick('contactControl')" />
+        <invite-control
+          @show-overlay="handleShowOverlay"
+          @click="handleControlClick('inviteControl')"
+        />
+      </div>
+      <div v-tap="handleCancelControl" class="close">{{ t('Cancel') }}</div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, defineEmits } from 'vue';
+import { IconExtension } from '@tencentcloud/uikit-base-component-vue3';
+import IconButton from '../../common/base/IconButton.vue';
+import userMoreControl from './useMoreControlHooks';
+import ChatControl from '../ChatControl.vue';
+import InviteControl from '../InviteControl.vue';
+import ContactControl from '../ContactControl.vue';
+import { useRoomStore } from '../../../stores/room';
+import bus from '../../../hooks/useMitt';
+import vTap from '../../../directives/vTap';
+import { roomService } from '../../../services';
+
+const moreControlConfig = roomService.getComponentConfig('MoreControl');
+const showMoreContent = ref(false);
+const moreContentRef = ref();
+
+const { t, sidebarName } = userMoreControl();
+const roomStore = useRoomStore();
+const emit = defineEmits(['show-overlay']);
+function showMore() {
+  showMoreContent.value = true;
+}
+
+function handleCancelControl() {
+  showMoreContent.value = false;
+}
+function handleControlClick(name: string) {
+  bus.emit('experience-communication', name);
+}
+
+function handleShowOverlay(data: { name: string; visible: boolean }) {
+  showMoreContent.value = false;
+  emit('show-overlay', data);
+}
+
+function handleDocumentClick(event: MouseEvent) {
+  if (showMoreContent.value && !moreContentRef.value.contains(event.target)) {
+    showMoreContent.value = false;
+  }
+}
+
+onMounted(() => {
+  document?.addEventListener('click', handleDocumentClick, true);
+});
+
+onUnmounted(() => {
+  document?.removeEventListener('click', handleDocumentClick, true);
+});
+</script>
+<style lang="scss" scoped>
+.show-more-content {
+  position: absolute;
+  bottom: 15px;
+  left: 5%;
+  width: 90%;
+  height: 17vh;
+  padding: 10px;
+  border-radius: 13px;
+  animation-name: popup;
+  animation-duration: 200ms;
+  background-color: var(--bg-color-operate);
+}
+
+@keyframes popup {
+  from {
+    bottom: 0;
+  }
+
+  to {
+    bottom: 15px;
+  }
+}
+
+.control-compent {
+  display: flex;
+}
+
+.close {
+  position: relative;
+  top: 10%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+  border-radius: 8px;
+  color: var(--text-color-primary);
+  background-color: var(--button-color-secondary-default);
+}
+</style>

package/src/TUIRoom/components/RoomFooter/VoteControl/MoreControlPC.vue

@@ -0,0 +1,31 @@
+<template>
+  <div v-if="moreControlConfig.visible" class="more-control-container">
+    <icon-button
+      :is-active="sidebarName === 'vote'"
+      :title="t('Vote')"
+      @click-icon="toggleMoreSidebar"
+    >
+      <IconMore size="24" />
+    </icon-button>
+  </div>
+</template>
+<script setup lang="ts">
+import { IconMore } from '@tencentcloud/uikit-base-component-vue3';
+import IconButton from '../../common/base/IconButton.vue';
+import userMoreControl from './useMoreControlHooks';
+import { roomService } from '../../../services';
+
+const moreControlConfig = roomService.getComponentConfig('MoreControl');
+const { t, basicStore, sidebarName } = userMoreControl();
+
+function toggleMoreSidebar() {
+  if (basicStore.setSidebarOpenStatus && basicStore.sidebarName === 'vote') {
+    basicStore.setSidebarOpenStatus(false);
+    basicStore.setSidebarName('');
+    return;
+  }
+  basicStore.setSidebarOpenStatus(true);
+  basicStore.setSidebarName('vote');
+}
+</script>
+<style lang="scss" scoped></style>

package/src/TUIRoom/components/RoomFooter/VoteControl/index.ts

@@ -0,0 +1,8 @@
+import MoreControlH5 from './MoreControlH5.vue';
+import MoreControlPc from './MoreControlPC.vue';
+
+import { isMobile } from '../../../utils/environment';
+
+const MoreControl = isMobile ? MoreControlH5 : MoreControlPc;
+
+export default MoreControl;

package/src/TUIRoom/components/RoomFooter/VoteControl/useMoreControlHooks.ts

@@ -0,0 +1,23 @@
+import { computed } from 'vue';
+import { useBasicStore } from '../../../stores/basic';
+import { storeToRefs } from 'pinia';
+import { useI18n } from '../../../locales';
+import { ICON_NAME } from '../../../constants/icon';
+
+export default function useControl() {
+  const { t } = useI18n();
+
+  const basicStore = useBasicStore();
+  const { sidebarName } = storeToRefs(basicStore);
+
+  const iconName = computed(() =>
+    sidebarName.value === 'vote' ? ICON_NAME.MoreActive : ICON_NAME.More
+  );
+
+  return {
+    t,
+    basicStore,
+    iconName,
+    sidebarName,
+  };
+}

package/src/TUIRoom/components/RoomFooter/index/indexPC.vue

@@ -103,7 +103,7 @@ import VirtualBackground from '../VirtualBackground.vue';
 import AIControl from '../AIControl.vue';
 import BasicBeauty from '../BasicBeauty.vue';
 import bus from '../../../hooks/useMitt';
-import voteControl from '../voteControl.vue';
+import voteControl from '../VoteControl';
 import useRoomFooter from './useRoomFooterHooks';
 import { isElectron } from '../../../utils/environment';
 const { roomStore, isMaster, isAdmin, isAudience } = useRoomFooter();

package/src/TUIRoom/components/RoomFooter/voteControl.vue

@@ -7,6 +7,9 @@
     >
       <IconAIIcon size="24" />
     </icon-button>
+    <div class="contact-container" v-if="showToolBox">
+      <slot name="content"></slot>
+    </div>
   </div>
 </template>
 
@@ -32,6 +35,9 @@ function toggleToolBox() {
     visible: showToolBox.value,
   });
 }
+function handleOnCloseContact() {
+  showToolBox.value = false;
+}
 </script>
 
 <style lang="scss" scoped>

package/src/TUIRoom/components/RoomSidebar/indexPC.vue

@@ -8,7 +8,11 @@
       :size="400"
     >
       <chat v-if="sidebarName == 'chat'" />
-      <room-vote v-if="sidebarName == 'vote'" />
+      <room-vote v-if="sidebarName == 'vote'" >
+        <template #content>
+          <slot name="content"></slot>
+        </template>
+      </room-vote>
       <room-more v-if="sidebarName == 'more'" />
       <manage-member v-if="sidebarName == 'manage-member'" />
       <AITranscription v-if="sidebarName == 'aiTranscription'" />

package/src/TUIRoom/components/RoomVote/indexPC.vue

@@ -1,35 +1,10 @@
 <template>
   <div class="more-container">
-    <div class="more-title">
-      <IconEmail class="email-icon" />
-      <div class="more-notice">
-        {{ t('Vote') }}
-      </div>
-    </div>
-    <div v-if="isZH" class="more-item">
-      <div class="item-title">{{ t('Join our product discussion group') }}</div>
-      <TUIButton @click="handleClick">{{ t('Join now') }}</TUIButton>
-    </div>
-    <div class="more-item">
-      <div class="item-title">{{ t('Our email address') }}</div>
-      <div class="more-content">{{ email }}</div>
-      <IconCopy class="copy-icon" @click="onCopy(email)" />
-    </div>
-    <div class="more-item">
-      <slot name="content"></slot>
-    </div>
+    <slot name="content"></slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import {
-  TUIButton,
-  IconCopy,
-  IconEmail,
-} from '@tencentcloud/uikit-base-component-vue3';
-import useRoomMoreControl from './useRoomMoreHooks';
-
-const { t, onCopy, handleClick, email, isZH } = useRoomMoreControl();
 </script>
 
 <style lang="scss" scoped>

package/src/TUIRoom/conference.vue

@@ -22,7 +22,11 @@
       <slot name="content"></slot>
     </template>
     </room-footer>
-    <room-sidebar />
+    <room-sidebar>
+      <template #content>
+          <slot name="content"></slot>
+        </template>
+    </room-sidebar>
     <room-setting />
     <room-overlay />
     <RoomInviteOverlay v-if="overlayMap.RoomInviteOverlay.visible" />

package/es/components/RoomFooter/voteControl.vue.mjs

@@ -1,7 +0,0 @@
-import _sfc_main from "./voteControl.vue2.mjs";
-/* empty css                  */
-import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const voteControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-18efb8e7"]]);
-export {
-  voteControl as default
-};

package/es/components/RoomFooter/voteControl.vue2.mjs

@@ -1,48 +0,0 @@
-import { defineComponent, computed, ref, createElementBlock, openBlock, createVNode, unref, withCtx } from "vue";
-import "../../services/main.mjs";
-import { roomService } from "../../services/roomService.mjs";
-import { useI18n } from "../../locales/index.mjs";
-import "@tencentcloud/tuiroom-engine-js";
-import "../../utils/environment.mjs";
-import "mitt";
-import "../../services/manager/roomActionManager.mjs";
-import "@tencentcloud/tui-core";
-import IconButton from "../common/base/IconButton.vue.mjs";
-import { IconAIIcon } from "@tencentcloud/uikit-base-component-vue3";
-const _hoisted_1 = { class: "vote-control-container" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "voteControl",
-  emits: ["on-vote"],
-  setup(__props, { emit: __emit }) {
-    const { basicStore } = roomService;
-    const sidebarName = computed(() => basicStore.sidebarName);
-    const { t } = useI18n();
-    const showToolBox = ref(false);
-    const emit = __emit;
-    function toggleToolBox() {
-      console.log(showToolBox.value, "0000");
-      showToolBox.value = !showToolBox.value;
-      emit("on-vote", {
-        name: "onVote",
-        visible: showToolBox.value
-      });
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(IconButton, {
-          "is-active": sidebarName.value === "vote",
-          title: unref(t)("Vote"),
-          onClickIcon: toggleToolBox
-        }, {
-          default: withCtx(() => [
-            createVNode(unref(IconAIIcon), { size: "24" })
-          ]),
-          _: 1
-        }, 8, ["is-active", "title"])
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/es/components/RoomVote/indexPC.vue2.mjs

@@ -1,52 +0,0 @@
-import { defineComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, createVNode, unref, toDisplayString, withCtx, createTextVNode, renderSlot } from "vue";
-import { IconEmail, TUIButton, IconCopy } from "@tencentcloud/uikit-base-component-vue3";
-import useRoomMoreHooks from "./useRoomMoreHooks.mjs";
-const _hoisted_1 = { class: "more-container" };
-const _hoisted_2 = { class: "more-title" };
-const _hoisted_3 = { class: "more-notice" };
-const _hoisted_4 = {
-  key: 0,
-  class: "more-item"
-};
-const _hoisted_5 = { class: "item-title" };
-const _hoisted_6 = { class: "more-item" };
-const _hoisted_7 = { class: "item-title" };
-const _hoisted_8 = { class: "more-content" };
-const _hoisted_9 = { class: "more-item" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "indexPC",
-  setup(__props) {
-    const { t, onCopy, handleClick, email, isZH } = useRoomMoreHooks();
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          createVNode(unref(IconEmail), { class: "email-icon" }),
-          createElementVNode("div", _hoisted_3, toDisplayString(unref(t)("Vote")), 1)
-        ]),
-        unref(isZH) ? (openBlock(), createElementBlock("div", _hoisted_4, [
-          createElementVNode("div", _hoisted_5, toDisplayString(unref(t)("Join our product discussion group")), 1),
-          createVNode(unref(TUIButton), { onClick: unref(handleClick) }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(t)("Join now")), 1)
-            ]),
-            _: 1
-          }, 8, ["onClick"])
-        ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_6, [
-          createElementVNode("div", _hoisted_7, toDisplayString(unref(t)("Our email address")), 1),
-          createElementVNode("div", _hoisted_8, toDisplayString(unref(email)), 1),
-          createVNode(unref(IconCopy), {
-            class: "copy-icon",
-            onClick: _cache[0] || (_cache[0] = ($event) => unref(onCopy)(unref(email)))
-          })
-        ]),
-        createElementVNode("div", _hoisted_9, [
-          renderSlot(_ctx.$slots, "content", {}, void 0, true)
-        ])
-      ]);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

package/lib/components/RoomFooter/voteControl.vue.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const voteControl_vue_vue_type_script_setup_true_lang = require("./voteControl.vue2.js");
-;/* empty css                  */
-const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const voteControl = /* @__PURE__ */ _pluginVue_exportHelper.default(voteControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-18efb8e7"]]);
-exports.default = voteControl;

package/lib/components/RoomFooter/voteControl.vue2.js

@@ -1,48 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Vue = require("vue");
-require("../../services/main.js");
-const roomService = require("../../services/roomService.js");
-const index = require("../../locales/index.js");
-require("@tencentcloud/tuiroom-engine-js");
-require("../../utils/environment.js");
-require("mitt");
-require("../../services/manager/roomActionManager.js");
-require("@tencentcloud/tui-core");
-const IconButton = require("../common/base/IconButton.vue.js");
-const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
-const _hoisted_1 = { class: "vote-control-container" };
-const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
-  __name: "voteControl",
-  emits: ["on-vote"],
-  setup(__props, { emit: __emit }) {
-    const { basicStore } = roomService.roomService;
-    const sidebarName = Vue.computed(() => basicStore.sidebarName);
-    const { t } = index.useI18n();
-    const showToolBox = Vue.ref(false);
-    const emit = __emit;
-    function toggleToolBox() {
-      console.log(showToolBox.value, "0000");
-      showToolBox.value = !showToolBox.value;
-      emit("on-vote", {
-        name: "onVote",
-        visible: showToolBox.value
-      });
-    }
-    return (_ctx, _cache) => {
-      return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
-        Vue.createVNode(IconButton.default, {
-          "is-active": sidebarName.value === "vote",
-          title: Vue.unref(t)("Vote"),
-          onClickIcon: toggleToolBox
-        }, {
-          default: Vue.withCtx(() => [
-            Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconAIIcon), { size: "24" })
-          ]),
-          _: 1
-        }, 8, ["is-active", "title"])
-      ]);
-    };
-  }
-});
-exports.default = _sfc_main;

package/lib/components/RoomVote/indexPC.vue2.js

@@ -1,52 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Vue = require("vue");
-const uikitBaseComponentVue3 = require("@tencentcloud/uikit-base-component-vue3");
-const useRoomMoreHooks = require("./useRoomMoreHooks.js");
-const _hoisted_1 = { class: "more-container" };
-const _hoisted_2 = { class: "more-title" };
-const _hoisted_3 = { class: "more-notice" };
-const _hoisted_4 = {
-  key: 0,
-  class: "more-item"
-};
-const _hoisted_5 = { class: "item-title" };
-const _hoisted_6 = { class: "more-item" };
-const _hoisted_7 = { class: "item-title" };
-const _hoisted_8 = { class: "more-content" };
-const _hoisted_9 = { class: "more-item" };
-const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
-  __name: "indexPC",
-  setup(__props) {
-    const { t, onCopy, handleClick, email, isZH } = useRoomMoreHooks.default();
-    return (_ctx, _cache) => {
-      return Vue.openBlock(), Vue.createElementBlock("div", _hoisted_1, [
-        Vue.createElementVNode("div", _hoisted_2, [
-          Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconEmail), { class: "email-icon" }),
-          Vue.createElementVNode("div", _hoisted_3, Vue.toDisplayString(Vue.unref(t)("Vote")), 1)
-        ]),
-        Vue.unref(isZH) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_4, [
-          Vue.createElementVNode("div", _hoisted_5, Vue.toDisplayString(Vue.unref(t)("Join our product discussion group")), 1),
-          Vue.createVNode(Vue.unref(uikitBaseComponentVue3.TUIButton), { onClick: Vue.unref(handleClick) }, {
-            default: Vue.withCtx(() => [
-              Vue.createTextVNode(Vue.toDisplayString(Vue.unref(t)("Join now")), 1)
-            ]),
-            _: 1
-          }, 8, ["onClick"])
-        ])) : Vue.createCommentVNode("", true),
-        Vue.createElementVNode("div", _hoisted_6, [
-          Vue.createElementVNode("div", _hoisted_7, Vue.toDisplayString(Vue.unref(t)("Our email address")), 1),
-          Vue.createElementVNode("div", _hoisted_8, Vue.toDisplayString(Vue.unref(email)), 1),
-          Vue.createVNode(Vue.unref(uikitBaseComponentVue3.IconCopy), {
-            class: "copy-icon",
-            onClick: _cache[0] || (_cache[0] = ($event) => Vue.unref(onCopy)(Vue.unref(email)))
-          })
-        ]),
-        Vue.createElementVNode("div", _hoisted_9, [
-          Vue.renderSlot(_ctx.$slots, "content", {}, void 0, true)
-        ])
-      ]);
-    };
-  }
-});
-exports.default = _sfc_main;