@tencentcloud/roomkit-electron-vue3 2.4.2 → 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

@@ -0,0 +1,236 @@
+<template>
+  <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"
+      autocomplete="off"
+    />
+    <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
+        @click="handleResultItemClick(item)"
+      >
+        {{ item.label || item.value }}
+        <slot name="searchResultItem" :data="item"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  useSlots,
+  onMounted,
+  onUnmounted,
+  withDefaults,
+  defineProps,
+  defineEmits,
+} from 'vue';
+
+const slots = useSlots();
+
+interface Props {
+  theme?: 'white' | 'black';
+  modelValue: string;
+  placeholder?: string;
+  disabled?: boolean;
+  type?: string;
+  readonly?: boolean;
+  enterkeyhint?: string;
+  search?: (data: string) => any;
+  select?: (data: any) => any;
+  maxlength?: string;
+  border?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = withDefaults(defineProps<Props>(), {
+  theme: 'white',
+  modelValue: '',
+  placeholder: '',
+  disabled: false,
+  type: 'text',
+  enterkeyhint: '',
+  maxlength: '80',
+  border: true,
+});
+
+const themeClass = computed(() =>
+  props.theme ? `tui-theme-${props.theme}` : ''
+);
+
+const emit = defineEmits([
+  'update:modelValue',
+  'input',
+  'focus',
+  'blur',
+  'done',
+]);
+
+const tuiInputRef = ref<HTMLInputElement | null>(null);
+const inputRef = ref<HTMLInputElement | null>(null);
+const show = ref(false);
+
+const blur = (event: any) => {
+  const { value } = event.target;
+  show.value = false;
+  const trimmedValue = value.trimStart().trimEnd();
+  if (value !== trimmedValue) {
+    event.target.value = trimmedValue;
+  }
+  emit('blur', tuiInputRef.value);
+};
+
+const done = () => {
+  emit('done', tuiInputRef.value);
+};
+
+const focus = () => {
+  show.value = true;
+  emit('focus', tuiInputRef.value);
+};
+const handleSuffixIconClick = () => {
+  inputRef.value?.blur();
+};
+
+const closeOnOutsideClick = (event: any) => {
+  if (!tuiInputRef.value?.contains(event.target)) {
+    show.value = false;
+  }
+};
+
+function handleResultItemClick(item: any) {
+  inputRef.value?.blur();
+  if (props.select) {
+    props.select(item);
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('click', closeOnOutsideClick);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('click', closeOnOutsideClick);
+});
+
+const searchResult = ref<any>([]);
+function handleInput(event: any) {
+  const { value } = event.target;
+  const trimmedValue = value.trimStart();
+
+  if (value !== trimmedValue) {
+    event.target.value = trimmedValue;
+  }
+
+  emit('update:modelValue', trimmedValue);
+  emit('input', trimmedValue);
+
+  if (props.search) {
+    searchResult.value = props.search(event.target.value);
+  }
+}
+const showResults = computed(
+  () => searchResult.value && searchResult.value?.length !== 0 && show.value
+);
+
+const hasSuffixIcon = computed(() => !!slots.suffixIcon);
+</script>
+
+<style lang="scss" scoped>
+.tui-input {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 10px 0 10px 16px;
+  font-size: 14px;
+  color: var(--font-color-3);
+  background-color: var(--background-color-7);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+}
+
+input:focus {
+  border-color: var(--active-color-1);
+  outline: 0;
+}
+
+input:disabled {
+  background-color: var(--background-color-9);
+}
+
+.tui-input.no-border input {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+}
+
+.suffix-icon {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  transform: translateY(-50%);
+}
+
+.results {
+  position: absolute;
+  z-index: 2;
+  width: 100%;
+  max-height: 254px;
+  padding: 7px 0;
+  overflow: auto;
+  background-color: var(--background-color-7);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    padding: 6px 15px;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  &-item:hover {
+    color: var(--active-color-2);
+    background-color: var(--hover-background-color-1);
+  }
+}
+</style>

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

@@ -3,21 +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.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"