@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

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

@@ -3,14 +3,26 @@ import { createVNode, render } from 'vue';
 import TUIMessageBox from './index.vue';
 
 export type MessageProps = {
-    title: string,
-    message: string,
-    callback?: () => Promise<void>,
-    confirmButtonText?: string,
-}
-const MessageBox = ({ title, message, callback, confirmButtonText }: MessageProps) => {
+  title: string;
+  message: string;
+  callback?: () => void;
+  duration?: number;
+  cancelButtonText?: string;
+  confirmButtonText?: string;
+};
+const MessageBox = ({
+  title,
+  message,
+  callback,
+  duration,
+  cancelButtonText,
+  confirmButtonText,
+}: MessageProps) => {
   const container = document.createElement('div');
-  const fullscreenElement = document.fullscreenElement || document.getElementById('roomContainer') || document.getElementById('pre-conference-container');
+  const fullscreenElement =
+    document.fullscreenElement ||
+    document.getElementById('roomContainer') ||
+    document.getElementById('pre-conference-container');
   if (!fullscreenElement) return;
   fullscreenElement.appendChild(container);
 
@@ -23,6 +35,8 @@ const MessageBox = ({ title, message, callback, confirmButtonText }: MessageProp
     title,
     message,
     callback,
+    duration,
+    cancelButtonText,
     confirmButtonText,
     remove: onRemove,
   });

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

@@ -11,14 +11,44 @@
         <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 class="tui-message-box-footer">
-          <tui-button size="default" class="button" @click="handleClose">{{ confirmButtonText }}</tui-button>
+        <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>
+          <div class="button-container" @click="handleClose('confirm')">
+            <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
+            v-if="cancelButtonText"
+            type="primary"
+            size="default"
+            @click="handleClose('cancel')"
+          >
+            {{ cancelButtonText }}
+          </tui-button>
         </div>
       </div>
     </div>
@@ -26,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';
@@ -36,14 +73,18 @@ import useZIndex from '../../../../hooks/useZIndex';
 const visible = ref(false);
 const overlayContentStyle = ref({});
 const { nextZIndex } = useZIndex();
+let timer: number | null = null;
 
-type BeforeCloseFn = () => void;
+type BeforeCloseFn = (action?: Action) => void;
 
 interface Props {
   title: string;
   message: string;
   callback?: BeforeCloseFn | null;
+  duration: number;
+  cancelButtonText: string;
   confirmButtonText: string;
+  // eslint-disable-next-line @typescript-eslint/ban-types
   remove: Function;
 }
 
@@ -51,11 +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() };
   }
@@ -63,8 +106,13 @@ watch(visible, (val) => {
 
 const emit = defineEmits(['close']);
 
-function handleClose() {
-  props.callback && props.callback();
+type Action = 'cancel' | 'confirm' | 'close';
+function handleClose(action: Action) {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+  props.callback && props.callback(action);
   doClose();
 }
 
@@ -78,14 +126,23 @@ function handleOverlayClick(event: any) {
   if (event.target !== event.currentTarget) {
     return;
   }
-  handleClose();
+  handleClose('close');
 }
 
 function onOpen() {
   visible.value = true;
 }
+
+function duration() {
+  if (props.duration === Infinity) return;
+  timer = setTimeout(() => {
+    handleClose('close');
+  }, props.duration);
+}
+
 onMounted(async () => {
   onOpen();
+  duration();
 });
 </script>
 
@@ -93,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);
@@ -105,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;
@@ -129,84 +188,107 @@ 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;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+    color: #4f586b;
+  }
+
+  .tui-message-box-footer {
+    display: flex;
+    justify-content: center;
+    padding: 20px 30px;
+
+    & > :not(:first-child) {
+      margin-left: 16px;
     }
   }
 }
+
 .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 {
+    display: flex;
+    justify-content: space-around;
     width: 100%;
     border-top: 1px solid #d5e0f2;
-    display: flex;
-    justify-content: center;
-    padding: 11px 0;
+
+    .button-container {
+      display: flex;
+      flex: 1;
+      justify-content: center;
+      padding: 11px 0;
+
+      &:not(:first-child) {
+        border-left: 1px solid #d5e0f2;
+      }
+    }
+
     .button {
-      background-color: #fff;
-      color: var(--active-color-1);
-      border: none;
-      text-align: center;
       font-size: 16px;
       font-weight: 500;
     }
-  }
-}
-
-.tui-message-box-body {
-  flex: 1;
-  padding: 20px 24px;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 22px;
-  color: #4f586b;
-}
 
-.tui-message-box-footer {
-  padding: 20px 30px;
-  display: flex;
-  justify-content: flex-end;
+    .confirm-button {
+      color: var(--active-color-1);
+      text-align: center;
+      background-color: #fff;
+      border: none;
+    }
+  }
 }
 </style>

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/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <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>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  inject,
+  watch,
+  computed,
+  onBeforeUnmount,
+  StyleValue,
+  onMounted,
+  defineProps,
+} from 'vue';
+
+interface OptionData {
+  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;
+}
+
+const optionRef = ref(null);
+const props = defineProps<OptionData>();
+
+const select: SelectData | undefined = inject('select');
+
+const isSelected = computed(
+  () => select && select.selectedValue === props.value
+);
+
+const optionData = computed(() => ({
+  label: props.label,
+  value: props.value,
+  ref: optionRef,
+}));
+
+onMounted(() => {
+  select?.onOptionCreated(optionData.value);
+});
+
+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);
+    }
+  }
+);
+
+function handleChooseOption() {
+  select?.onOptionSelected(optionData.value);
+}
+</script>
+
+<style lang="scss" scoped>
+.option-container {
+  padding: 6px 15px;
+  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;
+    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>