@tencentcloud/roomkit-electron-vue3 2.8.1 → 2.9.0

package/src/TUIRoom/components/common/base/Slider.vue

@@ -118,14 +118,14 @@ onUnmounted(() => {
   position: relative;
   width: 160px;
   height: 3px;
-  background-color: #ddd;
+  background-color: var(--uikit-color-white-2);
   cursor: pointer;
 }
 
 .slider-track {
   position: absolute;
   height: 100%;
-  background-color: var(--active-color-1);
+  background-color: var(--text-color-link);
 }
 
 .slider-thumb {
@@ -134,19 +134,18 @@ onUnmounted(() => {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   transform: translate(-50%, -50%);
   transition: box-shadow 0.2s;
   cursor: pointer;
+  background-color: var(--uikit-color-white-1);
 }
 
 .slider-thumb-active {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 8px var(--uikit-color-black-5);
 }
 
 .slider-thumb-disabled {
-  background-color: #ccc;
+  background-color: var(--uikit-color-gray-light-5);
   cursor: not-allowed;
 }
 </style>

package/src/TUIRoom/components/common/base/Swiper.vue

@@ -158,7 +158,7 @@ function handleTouchEnd(event: TouchEvent) {
       width: 8px;
       height: 8px;
       margin: 5px;
-      background: #fff;
+      background-color: var(--uikit-color-white-1);
       border-radius: 20px;
       opacity: 0.6;
     }
@@ -167,7 +167,7 @@ function handleTouchEnd(event: TouchEvent) {
       width: 8px;
       height: 8px;
       margin: 5px;
-      background: #fff;
+      background-color: var(--uikit-color-white-1);
       border-radius: 20px;
       opacity: 1;
     }

package/src/TUIRoom/components/common/base/Timepicker/index.vue

@@ -2,7 +2,6 @@
   <div class="container">
     <TuiSelect
       v-model="selectedTime"
-      theme="white"
       class="timepicker-select"
       :teleported="false"
       :custom-select-content-style="{ 'font-weight': 400 }"
@@ -10,7 +9,6 @@
       <TuiOption
         v-for="time in timeOptions"
         :key="time"
-        theme="white"
         :value="time"
         :label="time"
         :custom-option-content-style="{ 'font-weight': 400 }"

package/src/TUIRoom/components/common/base/TuiSwitch.vue

@@ -1,9 +1,6 @@
 <template>
   <div
-    :class="[
-      props.modelValue ? 'switch-container' : 'switch-container-active',
-      themeClass,
-    ]"
+    :class="[props.modelValue ? 'switch-container' : 'switch-container-active']"
     @click="toggleSwitch"
   >
     <div class="switch-core"></div>
@@ -11,16 +8,11 @@
 </template>
 
 <script lang="ts" setup>
-import { defineProps, defineEmits, computed } from 'vue';
+import { defineProps, defineEmits } from 'vue';
 interface Props {
   modelValue: boolean;
-  theme?: 'white' | 'black';
 }
 
-const themeClass = computed(() =>
-  props.theme ? `tui-theme-${props.theme}` : ''
-);
-
 const props = defineProps<Props>();
 
 const emit = defineEmits(['update:modelValue']);
@@ -31,10 +23,6 @@ function toggleSwitch() {
 </script>
 
 <style lang="scss" scoped>
-.tui-theme-white.switch-container-active {
-  background-color: #bdbdbd;
-}
-
 .switch-container,
 .switch-container-active {
   position: relative;
@@ -42,27 +30,23 @@ function toggleSwitch() {
   width: 40px;
   height: 20px;
   cursor: pointer;
-  background-color: var(--active-color-1);
   border-radius: 20px;
   transition: background-color 0.3s;
-
+  background-color: var(--switch-color-on);
   .switch-core {
     position: absolute;
     top: 2px;
     left: 2px;
     width: 40%;
     height: 80%;
-    background-color: #fff;
     border-radius: 50%;
-    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s !important;
     transform: translateX(20px);
+    background-color: var(--switch-color-button);
   }
 }
 
 .switch-container-active {
-  background-color: var(--background-color-6);
-
   .switch-core {
     transform: translateX(0);
   }

package/src/TUIRoom/components/common/icons/AIIcon.vue

@@ -26,19 +26,19 @@
     />
     <path
       d="M16 7.14014V16.7283"
-      stroke="#4791FF"
+      stroke="currentColor"
       stroke-width="2"
       stroke-linejoin="bevel"
     />
     <path
       d="M7 16.729C7 15.9108 10.2727 7.729 10.2727 7.729C10.2727 7.729 13.5455 15.9108 13.5455 16.729"
-      stroke="#4791FF"
+      stroke="currentColor"
       stroke-width="2"
       stroke-linejoin="bevel"
     />
     <path
       d="M8.5 14H12"
-      stroke="#4791FF "
+      stroke="currentColor"
       stroke-width="2"
       stroke-linejoin="bevel"
     />

package/src/TUIRoom/components/common/icons/BasicBeautyIcon.vue

@@ -16,7 +16,7 @@
       <path
         id="Vector_2"
         d="M14.4872 4.12929L15.1531 3.75286V3.75286C15.7384 3.42193 16.4607 3.85698 16.442 4.52912L16.3273 8.63684C16.3191 8.92817 16.4385 9.20856 16.6541 9.40463L17.4452 10.1239L18.0105 10.638"
-        stroke="#4791FF"
+        stroke="currentColor"
         stroke-width="1.7"
         stroke-linecap="square"
       />

package/src/TUIRoom/components/common/icons/CameraOffIcon.vue

@@ -26,7 +26,7 @@
     />
     <path
       d="M5 9H8.5"
-      style="stroke: var(--active-color-2); stroke-opacity: 1"
+      style="stroke: var(--uikit-color-theme-5); stroke-opacity: 1"
       stroke-width="1.7"
     />
   </svg>

package/src/TUIRoom/components/common/icons/CameraOnIcon.vue

@@ -16,7 +16,7 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M8.50007 9.85H5.00007V8.15H8.50007V9.85Z"
-      style="fill: var(--active-color-2); fill-opacity: 1"
+      fill="currentColor"
     />
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/ChatIcon.vue

@@ -16,7 +16,7 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M12.5002 13.85H7.50022V12.15H12.5002V13.85Z"
-      style="fill: var(--active-color-2); fill-opacity: 1"
+      fill="currentColor"
     />
     <path
       fill-rule="evenodd"

package/src/TUIRoom/components/common/icons/CloseBeautyIcon.vue

@@ -14,13 +14,13 @@
           cx="16"
           cy="16"
           r="12.8667"
-          stroke="#4F586B"
+          stroke="currentColor"
           stroke-width="2"
         />
         <path
           id="Vector 186"
           d="M25.6001 6.40002L6.40015 25.6"
-          stroke="#4F586B"
+          stroke="currentColor"
           stroke-width="2"
         />
       </g>

package/src/TUIRoom/components/common/icons/FullScreenIcon.vue

@@ -16,7 +16,7 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M12.4984 8.37383H16.1484V12.0238H17.8484V7.52383V6.67383H16.9984H12.4984V8.37383ZM11.4984 15.6738H7.84844L7.84844 12.0238H6.14844V16.5238V17.3738H6.99844H11.4984V15.6738Z"
-      style="fill: var(--active-color-2); fill-opacity: 1"
+      fill="currentColor"
     />
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/InviteIcon.vue

@@ -15,7 +15,7 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M18.65 10.15V7.5H20.35V10.15H23V11.85H20.35V14.5H18.65V11.85H16V10.15H18.65Z"
-      style="fill: var(--active-color-2); fill-opacity: 1"
+      fill="currentColor"
     />
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/ManageMemberIcon.vue

@@ -8,7 +8,7 @@
   >
     <path
       d="M20.3014 17.1248H22.0014V21.9711H20.3014L20.3014 17.1248Z"
-      style="fill: var(--active-color-2); fill-opacity: 1"
+      fill="currentColor"
     />
     <path
       d="M15.8069 9.88067L16.0944 9.30134C16.5447 8.39395 16.7987 7.37073 16.7987 6.28332C16.7987 5.03365 16.4616 3.86271 15.8734 2.85648L17.342 1.99976C18.0773 3.25755 18.4987 4.72123 18.4987 6.28332C18.4987 7.63875 18.1815 8.92007 17.6172 10.0571C19.7235 11.3189 21.2703 12.7764 21.7991 14.9998C21.9288 15.5452 21.9095 15.9137 21.9095 15.9137L20.2095 15.9196C20.2095 15.9196 20.2063 15.5247 20.035 14.9998C19.5311 13.4551 18.3358 12.4693 16.7435 11.5154L16.1887 11.1831C15.7412 10.915 15.5749 10.348 15.8069 9.88067Z"

package/src/TUIRoom/components/common/icons/MoreIcon.vue

@@ -25,7 +25,6 @@
       width="8.3"
       height="8.3"
       rx="4.15"
-      style="stroke: var(--active-color-2); stroke-opacity: 1"
       stroke-width="1.7"
     />
     <rect
@@ -43,7 +42,7 @@
       width="3.5"
       height="3.5"
       rx="1.75"
-      style="fill: var(--active-color-2); fill-opacity: 1"
+      fill="currentColor"
     />
     <rect
       x="2.35"

package/src/TUIRoom/components/common/icons/RuddyBeautyIcon.vue

@@ -10,32 +10,37 @@
       <path
         id="Ellipse 349"
         d="M27 15C27 21.6274 21.6274 27 15 27C8.37258 27 3 21.6274 3 15C3 12.1605 3.98496 9.55384 5.63267 7.49904C6.3356 6.62243 7.159 5.84657 8.07758 5.19665C10.0333 3.81292 12.4202 3 15 3C21.6274 3 27 8.37258 27 15Z"
-        stroke="#4F586B"
+        stroke="currentColor"
         stroke-width="2"
       />
       <path
         id="Ellipse 352"
         d="M18 17C18 18.6569 16.6569 20 15 20C13.3431 20 12 18.6569 12 17"
-        stroke="#4F586B"
+        stroke="currentColor"
+        stroke-width="2"
+      />
+      <path
+        id="Vector 195"
+        d="M8 11L6 15"
+        stroke="currentColor"
         stroke-width="2"
       />
-      <path id="Vector 195" d="M8 11L6 15" stroke="#4F586B" stroke-width="2" />
       <path
         id="Vector 197"
         d="M20 11L18 15"
-        stroke="#4F586B"
+        stroke="currentColor"
         stroke-width="2"
       />
       <path
         id="Vector 196"
         d="M12 11L10 15"
-        stroke="#4F586B"
+        stroke="currentColor"
         stroke-width="2"
       />
       <path
         id="Vector 198"
         d="M24 11L22 15"
-        stroke="#4F586B"
+        stroke="currentColor"
         stroke-width="2"
       />
     </g>

package/src/TUIRoom/components/common/icons/ScreenShareIcon.vue

@@ -25,7 +25,7 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M15.5718 10.3704L12.5716 7.64965L12.0006 7.13184L11.4296 7.64967L8.42969 10.3702L9.57172 11.6295L11.1507 10.1975V13.4999H12.8507V10.1977L14.4298 11.6297L15.5718 10.3704Z"
-      style="fill: var(--active-color-2); fill-opacity: 1"
+      fill="currentColor"
     />
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/SettingIcon.vue

@@ -19,11 +19,6 @@
       mask="url(#path-1-inside-1_3678_51153)"
     />
     <circle cx="12" cy="12" r="3.65" stroke="currentColor" stroke-width="1.7" />
-    <circle
-      cx="12"
-      cy="12"
-      r="1.5"
-      style="fill: var(--active-color-2); fill-opacity: 1"
-    />
+    <circle cx="12" cy="12" r="1.5" fill="currentColor" />
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/ShareIcon.vue

@@ -10,12 +10,7 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M7.66675 1.2337L15.7018 8L7.66675 14.7663V10.6155C4.87045 10.7492 2.95122 11.7487 1.54259 13.7208L0.346375 13.2026C0.695334 11.4578 1.40055 9.6728 2.66505 8.22766C3.8396 6.88533 5.47132 5.86629 7.66675 5.43668L7.66675 1.2337ZM9.00009 4.09963V6.5782L8.42769 6.65996C6.24805 6.97133 4.72737 7.89553 3.66848 9.10566C3.19948 9.64166 2.81533 10.2406 2.50503 10.8783C4.06386 9.77713 5.98581 9.26666 8.33342 9.26666H9.00009V11.9004L13.6318 8L9.00009 4.09963Z"
-      fill="#4F586B"
-      style="
-        fill: #4f586b;
-        fill: color(display-p3 0.3098 0.3451 0.4196);
-        fill-opacity: 1;
-      "
+      fill="currentColor"
     />
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/SmootherBeautyIcon.vue

@@ -15,31 +15,31 @@
             cx="16"
             cy="16"
             r="11.8"
-            stroke="#4F586B"
+            stroke="currentColor"
             stroke-width="2"
           />
           <path
             id="Vector 187"
             d="M16 1.06665V30.9333"
-            stroke="#4F586B"
+            stroke="currentColor"
             stroke-width="2"
           />
           <path
             id="Vector 190"
             d="M16 16H27.7333"
-            stroke="#4F586B"
+            stroke="currentColor"
             stroke-width="2"
           />
           <path
             id="Vector 191"
             d="M16 10.6666H26.6667"
-            stroke="#4F586B"
+            stroke="currentColor"
             stroke-width="2"
           />
           <path
             id="Vector 192"
             d="M16 21.3333H26.6667"
-            stroke="#4F586B"
+            stroke="currentColor"
             stroke-width="2"
           />
         </g>

package/src/TUIRoom/components/common/icons/VirtualBackgroundIcon.vue

@@ -15,19 +15,27 @@
     </mask>
     <path
       d="M4 21H2.3V22.7H4V21ZM20 21V22.7H21.7V21H20ZM14.3 6C14.3 7.27025 13.2703 8.3 12 8.3V11.7C15.148 11.7 17.7 9.14802 17.7 6H14.3ZM12 3.7C13.2703 3.7 14.3 4.72975 14.3 6H17.7C17.7 2.85198 15.148 0.3 12 0.3V3.7ZM9.7 6C9.7 4.72975 10.7297 3.7 12 3.7V0.3C8.85198 0.3 6.3 2.85198 6.3 6H9.7ZM12 8.3C10.7297 8.3 9.7 7.27025 9.7 6H6.3C6.3 9.14802 8.85198 11.7 12 11.7V8.3ZM5.7 18C5.7 15.6252 7.62518 13.7 10 13.7V10.3C5.74741 10.3 2.3 13.7474 2.3 18H5.7ZM5.7 21V18H2.3V21H5.7ZM20 19.3H4V22.7H20V19.3ZM18.3 18V21H21.7V18H18.3ZM14 13.7C16.3748 13.7 18.3 15.6252 18.3 18H21.7C21.7 13.7474 18.2526 10.3 14 10.3V13.7ZM10 13.7H14V10.3H10V13.7Z"
-      fill="currentColor"
+      fill="var(--text-color-primary)"
       mask="url(#path-1-inside-1_9286_2150)"
     />
-    <path d="M3 12L7 8" stroke="var(--active-color-2)" stroke-width="1.7" />
-    <path d="M18 12L22 8" stroke="var(--active-color-2)" stroke-width="1.7" />
+    <path
+      d="M3 12L7 8"
+      stroke="var(--text-color-primary)"
+      stroke-width="1.7"
+    />
+    <path
+      d="M18 12L22 8"
+      stroke="var(--text-color-primary)"
+      stroke-width="1.7"
+    />
     <path
       d="M2.00098 7L6.00098 3"
-      stroke="var(--active-color-2)"
+      stroke="var(--text-color-primary)"
       stroke-width="1.7"
     />
     <path
       d="M17.001 7L21.001 3"
-      stroke="var(--active-color-2)"
+      stroke="var(--text-color-primary)"
       stroke-width="1.7"
     />
   </svg>

package/src/TUIRoom/components/common/icons/WhiteningBeautyIcon.vue

@@ -10,27 +10,39 @@
       <path
         id="Ellipse 349"
         d="M27 15C27 21.6274 21.6274 27 15 27C8.37258 27 3 21.6274 3 15C3 12.1605 3.98496 9.55384 5.63267 7.49904C6.3356 6.62243 7.159 5.84657 8.07758 5.19665C10.0333 3.81292 12.4202 3 15 3C21.6274 3 27 8.37258 27 15Z"
-        stroke="#4F586B"
+        stroke="currentColor"
         stroke-width="2"
       />
-      <circle id="Ellipse 350" cx="10.5" cy="12.5" r="1.5" fill="#4F586B" />
-      <circle id="Ellipse 351" cx="19.5" cy="12.5" r="1.5" fill="#4F586B" />
+      <circle
+        id="Ellipse 350"
+        cx="10.5"
+        cy="12.5"
+        r="1.5"
+        fill="currentColor"
+      />
+      <circle
+        id="Ellipse 351"
+        cx="19.5"
+        cy="12.5"
+        r="1.5"
+        fill="currentColor"
+      />
       <path
         id="Ellipse 352"
         d="M18 17C18 18.6569 16.6569 20 15 20C13.3431 20 12 18.6569 12 17"
-        stroke="#4F586B"
+        stroke="currentColor"
         stroke-width="2"
       />
       <path
         id="Vector 188"
         d="M8 5L11 8M22 5L19 8"
-        stroke="#4F586B"
+        stroke="currentColor"
         stroke-width="2"
       />
       <path
         id="Vector 189"
         d="M8 25L11 22M22 25L19 22"
-        stroke="#4F586B"
+        stroke="currentColor"
         stroke-width="2"
       />
     </g>

package/src/TUIRoom/components/common/widgets/AITools/AISubtitles.vue

@@ -47,8 +47,8 @@ onUnmounted(() => {
   bottom: 80px;
   left: 50%;
   padding: 10px 12px;
-  color: #fff;
-  background-color: rgba(79, 88, 107, 0.7);
+  color: var(--uikit-color-white-1);
+  background-color: var(--uikit-color-black-3);
   border-radius: 8px;
   transform: translateX(-50%);
 }

package/src/TUIRoom/components/common/widgets/AITools/AITranscription.vue

@@ -142,8 +142,8 @@ onUnmounted(() => {
   font-size: 14px;
   font-weight: 400;
   line-height: 22px;
-  color: var(--font-color-4);
   text-align: left;
+  color: var(--text-color-secondary);
 
   .speaker {
     max-width: 150px;
@@ -160,7 +160,7 @@ onUnmounted(() => {
   font-weight: 400;
   line-height: 22px;
   text-align: left;
-  background-color: var(--background-color-7);
   border-radius: 8px;
+  background-color: var(--bg-color-bubble-reciprocal);
 }
 </style>

package/src/TUIRoom/components/common/widgets/Notification/InviteNotification/index.ts

@@ -0,0 +1,94 @@
+import { createVNode, render, VNode } from 'vue';
+import TUINotification from './index.vue';
+
+export type invitationInfo = {
+  userId: string;
+  userName: string;
+  avatarUrl: string;
+  roomName: string;
+  roomMemberCount: number;
+  roomOwner: string;
+  roomId: string;
+};
+
+export type NotificationProps = {
+  appendTo: string;
+  customClass?: string;
+  message: invitationInfo;
+  onConfirm?: () => Promise<void>;
+  onCancel?: () => Promise<void>;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+  duration?: number;
+};
+
+function NotificationFactory() {
+  let notificationInstance: VNode | null = null;
+  let container: HTMLElement | null = null;
+  let timer: NodeJS.Timer | null = null;
+  let fullscreenElement: HTMLElement | null = null;
+
+  function openInviteNotification(options: NotificationProps) {
+    if (document.getElementById(options.appendTo)) {
+      fullscreenElement = document.getElementById(
+        options.appendTo
+      ) as HTMLElement;
+    } else {
+      fullscreenElement = document.fullscreenElement || document.body;
+    }
+    if (!notificationInstance) {
+      container = document.createElement('div');
+      container.className = 'tui-room-notification';
+      fullscreenElement?.appendChild(container);
+    }
+
+    const {
+      appendTo,
+      customClass,
+      message,
+      onConfirm,
+      onCancel,
+      confirmButtonText,
+      cancelButtonText,
+    } = options;
+    const vnode = createVNode(TUINotification, {
+      appendTo,
+      customClass,
+      message,
+      onConfirm,
+      onCancel,
+      confirmButtonText,
+      cancelButtonText,
+      close,
+    });
+
+    if (container) {
+      render(vnode, container);
+      notificationInstance = vnode;
+    }
+
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(close, options.duration || 30000);
+  }
+
+  function close() {
+    if (container) {
+      render(null, container);
+      fullscreenElement?.removeChild(container);
+      notificationInstance = null;
+      container = null;
+    }
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  }
+
+  return {
+    openInviteNotification,
+  };
+}
+
+export const inviteNotification = NotificationFactory();