@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

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

@@ -11,22 +11,36 @@
         <div class="tui-message-box-header">
           <div class="tui-message-box-title">{{ title }}</div>
           <div class="close">
-            <svg-icon :size="16" :icon="CloseIcon" @click="handleClose"></svg-icon>
+            <svg-icon :size="16" :icon="CloseIcon" @click="handleClose" />
           </div>
         </div>
         <div class="tui-message-box-body">
           <div>{{ message }}</div>
         </div>
         <div v-if="isMobile" class="tui-message-box-footer">
-          <div v-if="cancelButtonText" class="button-container" @click="handleClose('cancel')">
-            <tui-button type="text" size="default" class="button">{{ cancelButtonText }}</tui-button>
+          <div
+            v-if="cancelButtonText"
+            class="button-container"
+            @click="handleClose('cancel')"
+          >
+            <tui-button type="text" size="default" class="button">{{
+              cancelButtonText
+            }}</tui-button>
           </div>
           <div class="button-container" @click="handleClose('confirm')">
-            <tui-button type="text" size="default" class="button confirm-button">{{ confirmButtonText }}</tui-button>
+            <tui-button
+              type="text"
+              size="default"
+              class="button confirm-button"
+            >
+              {{ confirmButtonText }}
+            </tui-button>
           </div>
         </div>
         <div v-else class="tui-message-box-footer">
-          <tui-button size="default" @click="handleClose('confirm')">{{ confirmButtonText }}</tui-button>
+          <tui-button size="default" @click="handleClose('confirm')">{{
+            confirmButtonText
+          }}</tui-button>
           <tui-button
             v-if="cancelButtonText"
             type="primary"
@@ -42,7 +56,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, onMounted } from 'vue';
+import {
+  ref,
+  watch,
+  onMounted,
+  withDefaults,
+  defineProps,
+  defineEmits,
+} from 'vue';
 import TuiButton from '../Button.vue';
 import SvgIcon from '../SvgIcon.vue';
 import CloseIcon from '../../icons/CloseIcon.vue';
@@ -52,6 +73,7 @@ import useZIndex from '../../../../hooks/useZIndex';
 const visible = ref(false);
 const overlayContentStyle = ref({});
 const { nextZIndex } = useZIndex();
+let timer: number | null = null;
 
 type BeforeCloseFn = (action?: Action) => void;
 
@@ -59,8 +81,10 @@ interface Props {
   title: string;
   message: string;
   callback?: BeforeCloseFn | null;
-  cancelButtonText: string,
+  duration: number;
+  cancelButtonText: string;
   confirmButtonText: string;
+  // eslint-disable-next-line @typescript-eslint/ban-types
   remove: Function;
 }
 
@@ -68,12 +92,13 @@ const props = withDefaults(defineProps<Props>(), {
   title: '',
   message: '',
   callback: null,
+  duration: Infinity,
   cancelButtonText: '',
   confirmButtonText: '',
   remove: () => {},
 });
 
-watch(visible, (val) => {
+watch(visible, val => {
   if (val) {
     overlayContentStyle.value = { zIndex: nextZIndex() };
   }
@@ -83,6 +108,10 @@ const emit = defineEmits(['close']);
 
 type Action = 'cancel' | 'confirm' | 'close';
 function handleClose(action: Action) {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
   props.callback && props.callback(action);
   doClose();
 }
@@ -103,8 +132,17 @@ function handleOverlayClick(event: any) {
 function onOpen() {
   visible.value = true;
 }
+
+function duration() {
+  if (props.duration === Infinity) return;
+  timer = setTimeout(() => {
+    handleClose('close');
+  }, props.duration);
+}
+
 onMounted(async () => {
   onOpen();
+  duration();
 });
 </script>
 
@@ -112,11 +150,11 @@ onMounted(async () => {
 .message-box-overlay {
   position: fixed;
   top: 0;
+  right: 0;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  right: 0;
 
   &.overlay {
     background-color: rgba(15, 16, 20, 0.6);
@@ -124,23 +162,25 @@ onMounted(async () => {
 }
 
 .tui-message-box {
-  width: 480px;
-  background-color: var(--white-color);
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
+  width: 480px;
+  background-color: var(--white-color);
   border-radius: 20px;
+  transform: translate(-50%, -50%);
+
   .tui-message-box-header {
-    height: 64px;
     position: relative;
     display: flex;
+    align-items: center;
+    height: 64px;
     padding: 0 24px;
     color: var(--title-color);
-    align-items: center;
-    box-shadow: 0px 7px 10px -5px rgba(230, 236, 245, 0.8);
+    box-shadow: 0 7px 10px -5px rgba(230, 236, 245, 0.8);
+
     .tui-dialog-header-title {
       font-size: 16px;
       font-style: normal;
@@ -148,20 +188,22 @@ onMounted(async () => {
       line-height: 24px;
       color: #0f1014;
     }
+
     .close {
-      width: 32px;
-      height: 32px;
       position: absolute;
       top: 50%;
-      transform: translateY(-50%);
       right: 20px;
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
       color: #4f586b;
       cursor: pointer;
+      transform: translateY(-50%);
     }
   }
+
   .tui-message-box-body {
     flex: 1;
     padding: 20px 24px;
@@ -171,10 +213,12 @@ onMounted(async () => {
     line-height: 22px;
     color: #4f586b;
   }
+
   .tui-message-box-footer {
-    padding: 20px 30px;
     display: flex;
     justify-content: center;
+    padding: 20px 30px;
+
     & > :not(:first-child) {
       margin-left: 16px;
     }
@@ -182,61 +226,68 @@ onMounted(async () => {
 }
 
 .tui-message-box-h5 {
-  min-width: 80vw;
-  max-width: 80vw;
   position: fixed;
-  background-color: #ffffff;
-  border-radius: 8px;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
+  min-width: 80vw;
+  max-width: 80vw;
   font-style: normal;
   color: var(--black-color);
+  background-color: #fff;
+  border-radius: 8px;
+  transform: translate(-50%, -50%);
+
   .tui-message-box-header {
+    box-sizing: border-box;
     display: inline-block;
+    padding: 24px 24px 12px;
+    padding-top: 14px;
     font-size: 16px;
-    text-align: center;
     font-weight: 500;
-    padding-top: 14px;
-    padding: 24px 24px 12px 24px;
-    box-sizing: border-box;
+    text-align: center;
+
     .close {
       display: none;
     }
   }
+
   .tui-message-box-body {
-    font-weight: 400;
+    padding: 0 24px 20px;
     font-size: 14px;
-    text-align: center;
     font-weight: 400;
     color: var(--font-color-4);
-    padding: 0 24px 20px 24px;
+    text-align: center;
   }
+
   .tui-message-box-footer {
-    width: 100%;
-    border-top: 1px solid #d5e0f2;
     display: flex;
     justify-content: space-around;
+    width: 100%;
+    border-top: 1px solid #d5e0f2;
+
     .button-container {
-      padding: 11px 0;
-      flex: 1;
       display: flex;
+      flex: 1;
       justify-content: center;
+      padding: 11px 0;
+
       &:not(:first-child) {
         border-left: 1px solid #d5e0f2;
       }
     }
+
     .button {
       font-size: 16px;
       font-weight: 500;
     }
+
     .confirm-button {
-      background-color: #fff;
       color: var(--active-color-1);
-      border: none;
       text-align: center;
+      background-color: #fff;
+      border: none;
     }
   }
 }

package/src/TUIRoom/components/common/base/Notification/index.ts

@@ -2,20 +2,28 @@ import { createVNode, render, VNode } from 'vue';
 import TUINotification from './index.vue';
 
 export type NotificationProps = {
-  message: string,
-  confirm?: () => Promise<void>,
-  cancel?: () => Promise<void>,
-  confirmButtonText?: string,
-  cancelButtonText?: string,
-}
+  message: string;
+  confirm?: () => Promise<void>;
+  cancel?: () => Promise<void>;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+};
 
 let notificationInstance: VNode | null = null;
 let container: Element | null = null;
 let timer: ReturnType<typeof setTimeout> | null = null;
 
 const Notification = ({
-  message, confirm, cancel, confirmButtonText, cancelButtonText }: NotificationProps) => {
-  const fullscreenElement = document.fullscreenElement || document.getElementById('roomContainer') || document.body;
+  message,
+  confirm,
+  cancel,
+  confirmButtonText,
+  cancelButtonText,
+}: NotificationProps) => {
+  const fullscreenElement =
+    document.fullscreenElement ||
+    document.getElementById('roomContainer') ||
+    document.body;
 
   if (!notificationInstance) {
     container = document.createElement('div');

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

@@ -1,23 +1,37 @@
 <template>
-  <div
-    v-show="visible"
-    class="tui-notification"
-  >
-    <div v-if="isMobile" class="tui-notification-container-mobile" :style="overlayContainerStyle">
-      <svg-icon :icon="ApplyTipsIcon" class="tui-notification-mobile-icon"></svg-icon>
+  <div v-show="visible" class="tui-notification">
+    <div
+      v-if="isMobile"
+      class="tui-notification-container-mobile"
+      :style="overlayContainerStyle"
+    >
+      <svg-icon :icon="ApplyTipsIcon" class="tui-notification-mobile-icon" />
       <span class="tui-notification-mobile-content">{{ message }}</span>
-      <div class="tui-notification-mobile-check" @click="handleAgree">{{ confirmButtonText }}</div>
+      <div class="tui-notification-mobile-check" @click="handleAgree">
+        {{ confirmButtonText }}
+      </div>
     </div>
-    <div v-else class="tui-notification-container" :style="overlayContainerStyle">
+    <div
+      v-else
+      class="tui-notification-container"
+      :style="overlayContainerStyle"
+    >
       <div class="tui-notification-header">
         <div class="tui-notification-title">{{ message }}</div>
         <div class="close">
-          <svg-icon :size="16" :icon="CloseIcon" @click="handleClose"></svg-icon>
+          <svg-icon :size="16" :icon="CloseIcon" @click="handleClose" />
         </div>
       </div>
       <div class="tui-notification-footer">
-        <tui-button size="default" @click="handleAgree">{{ confirmButtonText }}</tui-button>
-        <tui-button size="default" type="primary" class="button" @click="handleReject">
+        <tui-button size="default" @click="handleAgree">{{
+          confirmButtonText
+        }}</tui-button>
+        <tui-button
+          size="default"
+          type="primary"
+          class="button"
+          @click="handleReject"
+        >
           {{ cancelButtonText }}
         </tui-button>
       </div>
@@ -58,7 +72,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['close']);
 
-watch(visible, (val) => {
+watch(visible, val => {
   if (val) {
     overlayContainerStyle.value = { zIndex: nextZIndex() };
   }
@@ -97,81 +111,90 @@ onMounted(async () => {
   .tui-notification-container-mobile {
     position: fixed;
     top: 8%;
+    display: flex;
     width: 95%;
-    margin: 0 10px;
     height: 44px;
+    margin: 0 10px;
+    text-align: center;
     background-color: #fff;
     border-radius: 10px;
-    display: flex;
-    text-align: center;
+
     .tui-notification-mobile-icon {
-      color: #000000;
       padding: 0 10px;
       margin-left: 4px;
+      color: #000;
     }
+
     .tui-notification-mobile-content {
-      font-weight: 400;
+      margin: 0 auto 0 4px;
       font-size: 15px;
+      font-weight: 400;
       line-height: 44px;
       color: #181820;
-      margin: 0 auto 0 4px;
     }
+
     .tui-notification-mobile-check {
-      background-color: #1C66E5;
-      color: #FFFFFF;
-      border-radius: 10px;
-      margin: 6px 10px 6px 0;
       padding: 0 12px;
+      margin: 6px 10px 6px 0;
       line-height: 34px;
+      color: #fff;
+      background-color: #1c66e5;
+      border-radius: 10px;
     }
   }
+
   .tui-notification-container {
-    width: 400px;
-    background-color: var(--white-color);
     position: fixed;
     top: 7%;
     right: 1%;
     display: flex;
     flex-direction: column;
+    width: 400px;
+    background-color: var(--white-color);
+    filter: drop-shadow(0 0 1px rgba(5, 5, 5, 0.1))
+      drop-shadow(0 3px 8px rgba(233, 240, 251, 0.5));
     border-radius: 20px;
-    filter: drop-shadow(0px 0px 1px rgba(5, 5, 5, 0.1)) drop-shadow(0px 3px 8px rgba(233, 240, 251, 0.5));
+
     .tui-notification-header {
-      height: 64px;
       position: relative;
       display: flex;
+      align-items: center;
+      height: 64px;
       padding: 0 24px;
-      color: var(--title-color);
       font-weight: 500;
-      align-items: center;
+      color: var(--title-color);
+
       .tui-notification-title {
         max-width: 300px;
         overflow: hidden;
-        white-space: nowrap;
         text-overflow: ellipsis;
+        white-space: nowrap;
       }
+
       .close {
-        width: 32px;
-        height: 32px;
         position: absolute;
         top: 50%;
-        transform: translateY(-50%);
         right: 20px;
         display: flex;
-        justify-content: center;
         align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
         color: #4f586b;
         cursor: pointer;
+        transform: translateY(-50%);
       }
     }
   }
+
   .tui-notification-footer {
-    padding: 20px 30px;
     display: flex;
     justify-content: flex-end;
+    padding: 20px 30px;
+
     .button {
       margin-left: 12px;
     }
   }
 }
-
 </style>

package/src/TUIRoom/components/common/base/{Option.vue → Option/index.vue}

@@ -1,30 +1,45 @@
 <template>
-  <div ref="optionRef" :class="['option-container', { 'active': isSelected }]" @click="handleChooseOption">
+  <div
+    ref="optionRef"
+    :class="['option-container', { active: isSelected }]"
+    @click="handleChooseOption"
+  >
     <template v-if="$slots.customOptionContent">
       <slot name="customOptionContent"></slot>
     </template>
     <template v-else>
-      <span :style="props.customOptionContentStyle" class="option-content">{{ label || value }}</span>
+      <span :style="props.customOptionContentStyle" class="option-content">{{
+        label || value
+      }}</span>
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, inject, watch, computed, onBeforeUnmount, StyleValue, onMounted } from 'vue';
+import {
+  ref,
+  inject,
+  watch,
+  computed,
+  onBeforeUnmount,
+  StyleValue,
+  onMounted,
+  defineProps,
+} from 'vue';
 
 interface OptionData {
-  label: string,
-  value: string | number | boolean | object,
-  customOptionContentStyle?: StyleValue,
+  label: string;
+  value: string | number | boolean | object;
+  customOptionContentStyle?: StyleValue;
 }
 
 interface SelectData {
-  selectedValue: string | number | boolean | object,
-  optionObj: Record<any, any>,
-  optionDataList: OptionData[],
-  onOptionCreated: (optionData: OptionData) => void,
-  onOptionDestroyed: (value: string | number | boolean | object) => void,
-  onOptionSelected: (optionData: OptionData) => void,
+  selectedValue: string | number | boolean | object;
+  optionObj: Record<any, any>;
+  optionDataList: OptionData[];
+  onOptionCreated: (optionData: OptionData) => void;
+  onOptionDestroyed: (value: string | number | boolean | object) => void;
+  onOptionSelected: (optionData: OptionData) => void;
 }
 
 const optionRef = ref(null);
@@ -32,7 +47,9 @@ const props = defineProps<OptionData>();
 
 const select: SelectData | undefined = inject('select');
 
-const isSelected = computed(() => select && select.selectedValue === props.value);
+const isSelected = computed(
+  () => select && select.selectedValue === props.value
+);
 
 const optionData = computed(() => ({
   label: props.label,
@@ -48,45 +65,49 @@ onBeforeUnmount(() => {
   select?.onOptionDestroyed(props.value);
 });
 
-watch(() => [props.value, props.label], (val, oldVal) => {
-  if (JSON.stringify(val) !== JSON.stringify(oldVal)) {
-    select?.onOptionDestroyed(oldVal);
-    select?.onOptionCreated(optionData.value);
+watch(
+  () => [props.value, props.label],
+  (val, oldVal) => {
+    if (JSON.stringify(val) !== JSON.stringify(oldVal)) {
+      select?.onOptionDestroyed(oldVal);
+      select?.onOptionCreated(optionData.value);
+    }
   }
-});
+);
 
 function handleChooseOption() {
   select?.onOptionSelected(optionData.value);
 }
-
 </script>
 
 <style lang="scss" scoped>
-
-.tui-theme-white .option-container {
-  --hover-background-color: rgba(213, 224, 242, 0.5);
-}
-
-.tui-theme-black .option-container {
-  --hover-background-color: rgba(213, 224, 242, 0.5);
-}
-
 .option-container {
   padding: 6px 15px;
-  cursor: pointer;
-  white-space: nowrap;
   overflow: hidden;
   color: #000;
+  white-space: nowrap;
+  cursor: pointer;
+
   &.active {
     color: var(--active-color-2);
   }
+
   &:hover {
     background-color: var(--hover-background-color);
   }
+
   .option-content {
     font-size: 14px;
-    line-height: 22px;
     font-weight: 500;
+    line-height: 22px;
   }
 }
+
+.tui-theme-white .option-container {
+  --hover-background-color: rgba(213, 224, 242, 0.5);
+}
+
+.tui-theme-black .option-container {
+  --hover-background-color: rgba(213, 224, 242, 0.5);
+}
 </style>