@ndscnj/roomkit-web-vue3 25.12.24141 → 25.12.24142

package/es/components/RoomFooter/voteControl/index.d.ts

@@ -0,0 +1,6 @@
+declare const VoteControl: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "show-overlay": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    "onShow-overlay"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default VoteControl;

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

@@ -1,7 +1,7 @@
 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-5d452e2c"]]);
+const voteControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-753053ea"]]);
 export {
   voteControl as default
 };

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

@@ -1,4 +1,4 @@
-import { defineComponent, computed, ref, watch, createElementBlock, openBlock, createVNode, createCommentVNode, unref, withCtx, renderSlot } from "vue";
+import { defineComponent, computed, ref, createElementBlock, openBlock, createVNode, createCommentVNode, unref, withCtx, renderSlot } from "vue";
 import "../../services/main.mjs";
 import { roomService } from "../../services/roomService.mjs";
 import { useI18n } from "../../locales/index.mjs";
@@ -19,13 +19,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["on-vote"],
   setup(__props, { emit: __emit }) {
     const { basicStore } = roomService;
-    const isSidebarOpen = computed(() => basicStore.isSidebarOpen);
     const sidebarName = computed(() => basicStore.sidebarName);
     const { t } = useI18n();
     const showToolBox = ref(false);
-    watch(isSidebarOpen, (newValue) => {
-      showToolBox.value = newValue && false;
-    });
     const emit = __emit;
     function toggleToolBox() {
       console.log(showToolBox.value, "0000");
@@ -47,7 +43,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["is-active", "title"]),
-        !isSidebarOpen.value && showToolBox.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+        showToolBox.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
           renderSlot(_ctx.$slots, "content", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ]);

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

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

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

@@ -21,7 +21,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", _hoisted_2, [
           createVNode(unref(IconEmail), { class: "email-icon" }),
-          createElementVNode("div", _hoisted_3, toDisplayString(unref(t)("If you have any questions, please email us.")), 1)
+          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),

package/es/index.mjs

@@ -3928,7 +3928,7 @@ to {
 }
 .footer .mirror-container .mirror-text[data-v-21a63691] {
   margin-left: 4px;
-}.contact-container[data-v-5d452e2c] {
+}.contact-container[data-v-753053ea] {
   position: fixed;
   top: 0;
   bottom: 0;
@@ -5047,17 +5047,17 @@ to {
   font-size: 16px;
   font-weight: 400;
   text-align: end;
-}.more-container[data-v-d1a96ffd] {
+}.more-container[data-v-c82f5e3c] {
   padding: 20px;
 }
-.more-container .more-title[data-v-d1a96ffd] {
+.more-container .more-title[data-v-c82f5e3c] {
   display: flex;
   align-items: center;
 }
-.more-container .more-title .email-icon[data-v-d1a96ffd] {
+.more-container .more-title .email-icon[data-v-c82f5e3c] {
   color: var(--uikit-color-gray-7);
 }
-.more-container .more-title .more-notice[data-v-d1a96ffd] {
+.more-container .more-title .more-notice[data-v-c82f5e3c] {
   width: 100%;
   height: 22px;
   padding-left: 8px;
@@ -5066,15 +5066,15 @@ to {
   line-height: 22px;
   color: var(--text-color-primary);
 }
-.more-container .more-item[data-v-d1a96ffd] {
+.more-container .more-item[data-v-c82f5e3c] {
   position: relative;
   display: flex;
   flex-direction: column;
 }
-.more-container .more-item[data-v-d1a96ffd]:not(:first-child) {
+.more-container .more-item[data-v-c82f5e3c]:not(:first-child) {
   margin-top: 20px;
 }
-.more-container .more-item:not(:first-child) .item-title[data-v-d1a96ffd] {
+.more-container .more-item:not(:first-child) .item-title[data-v-c82f5e3c] {
   width: 100%;
   padding-bottom: 8px;
   font-size: 14px;
@@ -5082,7 +5082,7 @@ to {
   line-height: 22px;
   color: var(--text-color-primary);
 }
-.more-container .more-item:not(:first-child) .more-content[data-v-d1a96ffd] {
+.more-container .more-item:not(:first-child) .more-content[data-v-c82f5e3c] {
   position: relative;
   box-sizing: border-box;
   display: inline-block;
@@ -5102,7 +5102,7 @@ to {
   background-color: var(--bg-color-input);
   border: 1px solid var(--stroke-color-module);
 }
-.more-container .more-item:not(:first-child) .copy-icon[data-v-d1a96ffd] {
+.more-container .more-item:not(:first-child) .copy-icon[data-v-c82f5e3c] {
   position: absolute;
   top: 45px;
   right: 10px;

package/lib/components/RoomFooter/voteControl/index.d.ts

@@ -0,0 +1,6 @@
+declare const VoteControl: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "show-overlay": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    "onShow-overlay"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any> | import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default VoteControl;

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

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 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-5d452e2c"]]);
+const voteControl = /* @__PURE__ */ _pluginVue_exportHelper.default(voteControl_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-753053ea"]]);
 exports.default = voteControl;

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

@@ -21,13 +21,9 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
   emits: ["on-vote"],
   setup(__props, { emit: __emit }) {
     const { basicStore } = roomService.roomService;
-    const isSidebarOpen = Vue.computed(() => basicStore.isSidebarOpen);
     const sidebarName = Vue.computed(() => basicStore.sidebarName);
     const { t } = index.useI18n();
     const showToolBox = Vue.ref(false);
-    Vue.watch(isSidebarOpen, (newValue) => {
-      showToolBox.value = newValue && false;
-    });
     const emit = __emit;
     function toggleToolBox() {
       console.log(showToolBox.value, "0000");
@@ -49,7 +45,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
           ]),
           _: 1
         }, 8, ["is-active", "title"]),
-        !isSidebarOpen.value && showToolBox.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_2, [
+        showToolBox.value ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_2, [
           Vue.renderSlot(_ctx.$slots, "content", {}, void 0, true)
         ])) : Vue.createCommentVNode("", true)
       ]);

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

@@ -3,5 +3,5 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const indexPC_vue_vue_type_script_setup_true_lang = require("./indexPC.vue2.js");
 ;/* empty css              */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.js");
-const indexPC = /* @__PURE__ */ _pluginVue_exportHelper.default(indexPC_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-d1a96ffd"]]);
+const indexPC = /* @__PURE__ */ _pluginVue_exportHelper.default(indexPC_vue_vue_type_script_setup_true_lang.default, [["__scopeId", "data-v-c82f5e3c"]]);
 exports.default = indexPC;

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

@@ -23,7 +23,7 @@ const _sfc_main = /* @__PURE__ */ Vue.defineComponent({
       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)("If you have any questions, please email us.")), 1)
+          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),

package/lib/index.js

@@ -3928,7 +3928,7 @@ to {
 }
 .footer .mirror-container .mirror-text[data-v-21a63691] {
   margin-left: 4px;
-}.contact-container[data-v-5d452e2c] {
+}.contact-container[data-v-753053ea] {
   position: fixed;
   top: 0;
   bottom: 0;
@@ -5047,17 +5047,17 @@ to {
   font-size: 16px;
   font-weight: 400;
   text-align: end;
-}.more-container[data-v-d1a96ffd] {
+}.more-container[data-v-c82f5e3c] {
   padding: 20px;
 }
-.more-container .more-title[data-v-d1a96ffd] {
+.more-container .more-title[data-v-c82f5e3c] {
   display: flex;
   align-items: center;
 }
-.more-container .more-title .email-icon[data-v-d1a96ffd] {
+.more-container .more-title .email-icon[data-v-c82f5e3c] {
   color: var(--uikit-color-gray-7);
 }
-.more-container .more-title .more-notice[data-v-d1a96ffd] {
+.more-container .more-title .more-notice[data-v-c82f5e3c] {
   width: 100%;
   height: 22px;
   padding-left: 8px;
@@ -5066,15 +5066,15 @@ to {
   line-height: 22px;
   color: var(--text-color-primary);
 }
-.more-container .more-item[data-v-d1a96ffd] {
+.more-container .more-item[data-v-c82f5e3c] {
   position: relative;
   display: flex;
   flex-direction: column;
 }
-.more-container .more-item[data-v-d1a96ffd]:not(:first-child) {
+.more-container .more-item[data-v-c82f5e3c]:not(:first-child) {
   margin-top: 20px;
 }
-.more-container .more-item:not(:first-child) .item-title[data-v-d1a96ffd] {
+.more-container .more-item:not(:first-child) .item-title[data-v-c82f5e3c] {
   width: 100%;
   padding-bottom: 8px;
   font-size: 14px;
@@ -5082,7 +5082,7 @@ to {
   line-height: 22px;
   color: var(--text-color-primary);
 }
-.more-container .more-item:not(:first-child) .more-content[data-v-d1a96ffd] {
+.more-container .more-item:not(:first-child) .more-content[data-v-c82f5e3c] {
   position: relative;
   box-sizing: border-box;
   display: inline-block;
@@ -5102,7 +5102,7 @@ to {
   background-color: var(--bg-color-input);
   border: 1px solid var(--stroke-color-module);
 }
-.more-container .more-item:not(:first-child) .copy-icon[data-v-d1a96ffd] {
+.more-container .more-item:not(:first-child) .copy-icon[data-v-c82f5e3c] {
   position: absolute;
   top: 45px;
   right: 10px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndscnj/roomkit-web-vue3",
-  "version": "25.12.24141",
+  "version": "25.12.24142",
   "main": "./lib/index.js",
   "module": "./es/index.mjs",
   "types": "./es/index.d.ts",

package/src/TUIRoom/components/RoomFooter/voteControl/VoteControlH5.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 userVoteControl from './useVoteControlHooks';
+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 } = userVoteControl();
+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/VoteControlPC.vue

@@ -0,0 +1,31 @@
+<template>
+  <div v-if="moreControlConfig.visible" class="vote-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('VoteControl');
+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 VoteControlH5 from './VoteControlH5.vue';
+import VoteControlPc from './VoteControlPC.vue';
+
+import { isMobile } from '../../../utils/environment';
+
+const VoteControl = isMobile ? VoteControlH5 : VoteControlPc;
+
+export default VoteControl;

package/src/TUIRoom/components/RoomFooter/voteControl/useVoteControlHooks.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/voteControl.vue

@@ -7,13 +7,8 @@
     >
       <IconAIIcon size="24" />
     </icon-button>
-    <div class="contact-container" v-if="!isSidebarOpen && showToolBox">
+    <div class="contact-container" v-if="showToolBox">
       <slot name="content"></slot>
-      <!-- <room-vote ref="contactRef" @on-close-contact="handleOnCloseContact">
-        <template #content>
-          <slot name="content"></slot>
-        </template>
-      </room-vote> -->
     </div>
   </div>
 </template>
@@ -28,13 +23,9 @@ import {
 } from '@tencentcloud/uikit-base-component-vue3';
 import roomVote from '../RoomVote';
 const { basicStore } = roomService;
-const isSidebarOpen = computed(() => basicStore.isSidebarOpen);
 const sidebarName = computed(() => basicStore.sidebarName);
 const { t } = useI18n();
 const showToolBox = ref(false);
-watch(isSidebarOpen, newValue => {
-  showToolBox.value = newValue && false;
-});
 const emit = defineEmits(['on-vote']);
 function toggleToolBox() {
   console.log(showToolBox.value,"0000")

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

@@ -3,7 +3,7 @@
     <div class="more-title">
       <IconEmail class="email-icon" />
       <div class="more-notice">
-        {{ t('If you have any questions, please email us.') }}
+        {{ t('Vote') }}
       </div>
     </div>
     <div v-if="isZH" class="more-item">