@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

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

@@ -16,7 +16,7 @@
         :class="['icon-content', iconContentClass, `${disabled && 'disabled'}`]"
       >
         <slot></slot>
-        <svg-icon v-if="icon" :icon="icon"></svg-icon>
+        <svg-icon v-if="icon" :icon="icon" />
         <span class="title">{{ title }}</span>
       </div>
       <div
@@ -25,15 +25,24 @@
         @click="handleClickEvent"
       >
         <slot></slot>
-        <svg-icon v-if="icon" :icon="icon"></svg-icon>
-        <svg-icon v-if="isNotSupport" class="unsupport-icon" :icon="UnSupportIcon"></svg-icon>
+        <svg-icon v-if="icon" :icon="icon" />
+        <svg-icon
+          v-if="isNotSupport"
+          class="unsupport-icon"
+          :icon="UnSupportIcon"
+        />
         <span class="title">
           {{ title }}
           <slot name="title"></slot>
         </span>
       </div>
-      <div v-if="hasMore" ref="moreSpanRef" class="icon-arrow" @click="$emit('click-more')">
-        <svg-icon :icon="ArrowUp"></svg-icon>
+      <div
+        v-if="hasMore"
+        ref="moreSpanRef"
+        class="icon-arrow"
+        @click="$emit('click-more')"
+      >
+        <svg-icon :icon="ArrowUp" />
       </div>
     </div>
   </div>
@@ -50,15 +59,15 @@ import vTap from '../../../directives/vTap';
 import type { Component } from 'vue';
 
 interface Props {
-  title?: string,
-  hasMore?: boolean,
-  hideHoverEffect?: boolean,
-  disabled?: boolean,
-  isActive?: boolean,
-  layout?: IconButtonLayout,
-  icon?: Component | null,
-  isNotSupport?: boolean,
-  theme?: 'white' | 'black',
+  title?: string;
+  hasMore?: boolean;
+  hideHoverEffect?: boolean;
+  disabled?: boolean;
+  isActive?: boolean;
+  layout?: IconButtonLayout;
+  icon?: Component | null;
+  isNotSupport?: boolean;
+  theme?: 'white' | 'black';
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -74,26 +83,25 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const emit = defineEmits(['click-icon', 'click-more']);
 
-const themeClass = computed(() => (props.theme ? `tui-theme-${props.theme}` : ''));
+const themeClass = computed(() =>
+  props.theme ? `tui-theme-${props.theme}` : ''
+);
 
 const iconContentClass = computed(() => {
   if (props.layout === IconButtonLayout.HORIZONTAL) {
     return 'icon-content-horizontal';
-  };
+  }
   return 'icon-content-vertical';
 });
 
-
 const handleClickEvent = () => {
   emit('click-icon');
 };
-
 </script>
 
 <style lang="scss" scoped>
-
 .tui-theme-black .icon-button-container {
-  --icon-button-hover: rgba(46, 50, 61, 0.70);
+  --icon-button-hover: rgba(46, 50, 61, 0.7);
 }
 
 .tui-theme-white .icon-button-container {
@@ -106,74 +114,85 @@ const handleClickEvent = () => {
   align-items: center;
   color: var(--font-color-1);
   cursor: pointer;
+
   .icon-content {
     &.disabled {
-      opacity: 0.4;
       cursor: not-allowed;
+      opacity: 0.4;
     }
+
     &:hover {
       background: var(--icon-button-hover);
     }
   }
+
   .icon-content-horizontal {
     display: flex;
-    justify-content: space-between;
+    flex-direction: row;
     align-items: center;
-    border-radius: 6px;
+    justify-content: space-between;
     height: 32px;
-    flex-direction: row;
     padding: 0 5px;
+    border-radius: 6px;
+
     .title {
+      margin-left: 4px;
       font-size: 14px;
-      line-height: 26px;
       font-weight: 500;
-      margin-left: 4px;
+      line-height: 26px;
     }
   }
+
   .icon-content-vertical {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
-    border-radius: 6px;
-    height: 56px;
+    justify-content: center;
     min-width: 56px;
+    height: 56px;
     padding: 5px;
+    border-radius: 6px;
+
     .title {
+      margin-top: 4px;
       font-size: 12px;
-      line-height: 20px;
       font-weight: 400;
-      margin-top: 4px;
+      line-height: 20px;
     }
   }
+
   .icon-arrow {
     position: relative;
-    width: 12px;
-    height: 56px;
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    width: 12px;
+    height: 56px;
     border-radius: 6px;
+
     &:hover {
       background: var(--icon-button-hover);
     }
   }
 }
-.unsupport-icon{
+
+.unsupport-icon {
   position: absolute;
   top: 13px;
   left: 26px;
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (width <= 600px) {
   .icon-box {
     width: 72px;
+
     &.hover-effect:hover {
-      &:before{
+      &::before {
         width: 72px;
       }
-      &:after{
-       width: 72px;
+
+      &::after {
+        width: 72px;
       }
     }
   }

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

@@ -1,16 +1,39 @@
 <template>
-  <div ref="tuiInputRef" :class="['tui-input', themeClass]">
+  <div
+    ref="tuiInputRef"
+    :class="['tui-input', themeClass, !border && 'no-border']"
+  >
     <input
-      ref="inputRef" :value="modelValue" :placeholder="placeholder" :disabled="disabled" :maxlength="props.maxlength"
-      :type="type" :enterkeyhint="enterkeyhint" :readonly="readonly" :style="{ paddingRight: hasSuffixIcon ? '40px' : '16px' }" @focus="focus"
-      @blur="blur" @keyup.enter="done" @input="handleInput" @change="handleInput"
+      ref="inputRef"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :maxlength="props.maxlength"
+      :type="type"
+      :enterkeyhint="enterkeyhint"
+      :readonly="readonly"
+      :style="{ paddingRight: hasSuffixIcon ? '40px' : '16px' }"
+      @focus="focus"
+      @blur="blur"
+      @keyup.enter="done"
+      @input="handleInput"
+      @change="handleInput"
+      autocomplete="off"
     />
-    <div v-if="hasSuffixIcon" class="suffix-icon" @mousedown.prevent @click="handleSuffixIconClick">
+    <div
+      v-if="hasSuffixIcon"
+      class="suffix-icon"
+      @mousedown.prevent
+      @click="handleSuffixIconClick"
+    >
       <slot name="suffixIcon"></slot>
     </div>
     <div v-if="showResults" class="results tui-theme-white">
       <div
-        v-for="(item, index) in searchResult" :key="index" class="results-item" @mousedown.prevent
+        v-for="(item, index) in searchResult"
+        :key="index"
+        class="results-item"
+        @mousedown.prevent
         @click="handleResultItemClick(item)"
       >
         {{ item.label || item.value }}
@@ -21,7 +44,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, useSlots, onMounted, onUnmounted } from 'vue';
+import {
+  ref,
+  computed,
+  useSlots,
+  onMounted,
+  onUnmounted,
+  withDefaults,
+  defineProps,
+  defineEmits,
+} from 'vue';
 
 const slots = useSlots();
 
@@ -32,10 +64,11 @@ interface Props {
   disabled?: boolean;
   type?: string;
   readonly?: boolean;
-  enterkeyhint?: string
+  enterkeyhint?: string;
   search?: (data: string) => any;
   select?: (data: any) => any;
   maxlength?: string;
+  border?: boolean;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -47,12 +80,20 @@ const props = withDefaults(defineProps<Props>(), {
   type: 'text',
   enterkeyhint: '',
   maxlength: '80',
+  border: true,
 });
 
-const themeClass = computed(() => (props.theme ? `tui-theme-${props.theme}` : ''));
+const themeClass = computed(() =>
+  props.theme ? `tui-theme-${props.theme}` : ''
+);
 
-
-const emit = defineEmits(['update:modelValue', 'input', 'focus', 'blur', 'done']);
+const emit = defineEmits([
+  'update:modelValue',
+  'input',
+  'focus',
+  'blur',
+  'done',
+]);
 
 const tuiInputRef = ref<HTMLInputElement | null>(null);
 const inputRef = ref<HTMLInputElement | null>(null);
@@ -117,7 +158,9 @@ function handleInput(event: any) {
     searchResult.value = props.search(event.target.value);
   }
 }
-const showResults = computed(() => searchResult.value && searchResult.value?.length !== 0 && show.value);
+const showResults = computed(
+  () => searchResult.value && searchResult.value?.length !== 0 && show.value
+);
 
 const hasSuffixIcon = computed(() => !!slots.suffixIcon);
 </script>
@@ -126,20 +169,20 @@ const hasSuffixIcon = computed(() => !!slots.suffixIcon);
 .tui-input {
   position: relative;
   display: inline-block;
-  height: 100%;
   width: 100%;
+  height: 100%;
 }
 
 input {
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: 10px 0px 10px 16px;
+  padding: 10px 0 10px 16px;
   font-size: 14px;
-  border-radius: 8px;
-  box-sizing: border-box;
-  border: 1px solid var(--border-color);
-  background-color: var(--background-color-7);
   color: var(--font-color-3);
+  background-color: var(--background-color-7);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
 }
 
 input:focus {
@@ -151,37 +194,43 @@ input:disabled {
   background-color: var(--background-color-9);
 }
 
+.tui-input.no-border input {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+}
+
 .suffix-icon {
   position: absolute;
-  right: 12px;
   top: 50%;
-  transform: translateY(-50%);
+  right: 12px;
   display: flex;
   align-items: center;
+  transform: translateY(-50%);
 }
 
 .results {
   position: absolute;
+  z-index: 2;
   width: 100%;
   max-height: 254px;
-  padding: 7px 0px;
+  padding: 7px 0;
+  overflow: auto;
   background-color: var(--background-color-7);
   border: 1px solid var(--border-color);
-  z-index: 2;
   border-radius: 4px;
-  overflow: auto;
 
   &-item {
-    padding: 6px 15px;
-    cursor: pointer;
-    white-space: nowrap;
     display: flex;
     align-items: center;
+    padding: 6px 15px;
+    white-space: nowrap;
+    cursor: pointer;
   }
 
   &-item:hover {
-    background-color: var(--hover-background-color-1);
     color: var(--active-color-2);
+    background-color: var(--hover-background-color-1);
   }
 }
 </style>

package/src/TUIRoom/components/common/base/Message/Instance.ts

@@ -3,22 +3,24 @@ import Message from './Message.vue';
 import indexManager from '../../../../hooks/useZIndex';
 
 export type MessageProps = {
-    type: 'success' | 'error' | 'warning' | 'info'
-    message: string
-    duration?: number
-    zIndex?: number
-}
+  type: 'success' | 'error' | 'warning' | 'info';
+  message: string;
+  duration?: number;
+  zIndex?: number;
+};
 const activeMessages = [] as any;
 
 const createInstance = ({ type, message, duration = 3000 }: MessageProps) => {
   const container = document.createElement('div');
   container.setAttribute('class', 't-message-container');
-  const fullscreenElement = document.fullscreenElement
-  || document.getElementById('roomContainer') ||  document.getElementById('pre-conference-container') || document.body;
+  const fullscreenElement =
+    document.fullscreenElement ||
+    document.getElementById('roomContainer') ||
+    document.getElementById('pre-conference-container') ||
+    document.body;
   fullscreenElement.appendChild(container);
   const uniqueKey = `message-${Date.now()}-${Math.random()}`;
 
-
   const updateTopValues = () => {
     activeMessages.forEach((msg: any, index: number) => {
       msg.updateTop(`calc(6% + ${index * 50}px)`);

package/src/TUIRoom/components/common/base/Message/Message.scss

@@ -1,9 +1,10 @@
 @import './mixins';
+
 .message {
   &-enter {
     &-from {
-      transform: translate3d(0, -75px, 0);
       opacity: 0;
+      transform: translate3d(0, -75px, 0);
     }
 
     &-active {
@@ -11,50 +12,53 @@
     }
 
     &-to {
-      transform: none;
       opacity: 1;
+      transform: none;
     }
   }
 }
 
 .t-message {
+  position: absolute;
+  top: 6%;
+  left: 50%;
+  z-index: 9999;
   display: inline-block;
   max-height: 50px;
-  border-radius: 8px;
   padding: 10px;
-  position: absolute;
-  z-index: 9999;
-  left: 50%;
-  transform: translateX(-50%);
-  top: 6%;
-  background: #f5f5f5;
   color: #999;
   white-space: nowrap;
+  background: #f5f5f5;
+  border-radius: 8px;
+  transform: translateX(-50%);
   
   .t-message-text {
-    vertical-align: middle;
     font-size: .875rem;
+    vertical-align: middle;
   }
 
   .t-message-icon {
     display: inline-block;
     width: 20px;
     height: 20px;
-    background-size: cover;
     margin-right: 4px;
     vertical-align: middle;
+    background-size: cover;
   }
 }
 
 .t-message.t-message-error {
-  @include err_color();
+  @include err_color;
 }
+
 .t-message.t-message-success {
-  @include success_color();
+  @include success_color;
 }
+
 .t-message.t-message-warning {
-  @include warning_color();
+  @include warning_color;
 }
+
 .t-message.t-message-info {
-  @include info_color();
+  @include info_color;
 }

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

@@ -1,13 +1,15 @@
 <template>
   <Transition name="message">
     <div
-      v-show="isShow" ref="messageRef" :class="['t-message', `t-message-${props.type}`]"
+      v-show="isShow"
+      ref="messageRef"
+      :class="['t-message', `t-message-${props.type}`]"
       :style="{
         top: props.top.value,
-        zIndex: props.zIndex
+        zIndex: props.zIndex,
       }"
     >
-      <svg-icon :icon="svgName" class="t-message-icon"></svg-icon>
+      <svg-icon :icon="svgName" class="t-message-icon" />
       <span class="t-message-text">{{ props.message }}</span>
     </div>
   </Transition>
@@ -20,7 +22,6 @@ import error from './images/error.vue';
 import warning from './images/warning.vue';
 import info from './images/info.vue';
 
-
 const props = defineProps({
   type: {
     type: String as PropType<'success' | 'error' | 'warning' | 'info'>,
@@ -74,5 +75,5 @@ const onClose = () => {
 </script>
 
 <style lang="scss" scoped>
-@import "./Message.scss";
+@import './Message.scss';
 </style>

package/src/TUIRoom/components/common/base/Message/_mixins.scss

@@ -3,16 +3,19 @@
     color: #00B89C;
     background-color: #EBFFFA;
   }
+
   .tui-theme-black & {
     color: #1CEACB;
     background-color: #19423C;
   }
 }
+
 @mixin err_color() {
   .tui-theme-white & {
     color: #E04343;
     background-color: #FFEBEE;
   }
+
   .tui-theme-black & {
     color: #F46262;
     background-color: #421414;
@@ -24,6 +27,7 @@
     color: #E59753;
     background-color: #FFF4EB;
   }
+
   .tui-theme-black & {
     color: #FFAD66;
     background-color: #3F2712;
@@ -35,6 +39,7 @@
     color: #494F6A;
     background-color: #EBF2FF;
   }
+
   .tui-theme-black & {
     color: #DCE7FA;
     background-color: #4A506B;

package/src/TUIRoom/components/common/base/Message/images/error.vue

@@ -1,6 +1,14 @@
 <template>
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g id="&#229;&#133;&#179;&#233;&#151;&#173; &#233;&#148;&#153;&#232;&#175;&#175;">
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      id="&#229;&#133;&#179;&#233;&#151;&#173; &#233;&#148;&#153;&#232;&#175;&#175;"
+    >
       <path
         id="Vector"
         fill-rule="evenodd"

package/src/TUIRoom/components/common/base/Message/images/info.vue

@@ -1,5 +1,11 @@
 <template>
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="&#230;&#143;&#144;&#231;&#164;&#186;">
       <path
         id="Vector"

package/src/TUIRoom/components/common/base/Message/images/success.vue

@@ -1,5 +1,11 @@
 <template>
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="&#229;&#174;&#140;&#230;&#136;&#144;">
       <g id="Union">
         <path

package/src/TUIRoom/components/common/base/Message/images/warning.vue

@@ -1,5 +1,11 @@
 <template>
-  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <g id="&#230;&#179;&#168;&#230;&#132;&#143;">
       <path
         id="Vector"

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

@@ -3,15 +3,26 @@ import { createVNode, render } from 'vue';
 import TUIMessageBox from './index.vue';
 
 export type MessageProps = {
-    title: string,
-    message: string,
-    callback?: () => void,
-    cancelButtonText?: string,
-    confirmButtonText?: string,
-}
-const MessageBox = ({ title, message, callback, cancelButtonText, 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);
 
@@ -24,6 +35,7 @@ const MessageBox = ({ title, message, callback, cancelButtonText, confirmButtonT
     title,
     message,
     callback,
+    duration,
     cancelButtonText,
     confirmButtonText,
     remove: onRemove,