@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

package/src/TUIRoom/components/common/VideoMediaControl.vue

@@ -8,7 +8,10 @@
 -->
 <template>
   <div>
-    <div v-click-outside="handleHideVideoSettingTab" class="video-control-container">
+    <div
+      v-click-outside="handleHideVideoSettingTab"
+      class="video-control-container"
+    >
       <icon-button
         :title="t('Camera')"
         :has-more="hasMore"
@@ -17,14 +20,14 @@
         @click-icon="handleClickIcon"
         @click-more="handleMore"
       >
-        <svg-icon :icon="icon"></svg-icon>
+        <svg-icon :icon="icon" />
       </icon-button>
       <video-setting-tab
         v-show="showVideoSettingTab"
         class="video-tab"
         :with-mirror="true"
         theme="white"
-      ></video-setting-tab>
+      />
     </div>
   </div>
 </template>
@@ -39,12 +42,15 @@ import CameraOffIcon from '../common/icons/CameraOffIcon.vue';
 import VideoSettingTab from '../common/VideoSettingTab.vue';
 import { useI18n } from '../../locales';
 import vClickOutside from '../../directives/vClickOutside';
-import { isGetUserMediaSupported, isEnumerateDevicesSupported } from '../../utils/mediaAbility';
+import {
+  isGetUserMediaSupported,
+  isEnumerateDevicesSupported,
+} from '../../utils/mediaAbility';
 
 interface Props {
-  hasMore?: boolean,
-  isMuted: boolean,
-  isDisabled?: boolean,
+  hasMore?: boolean;
+  isMuted: boolean;
+  isDisabled?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -57,7 +63,8 @@ const emits = defineEmits(['click']);
 
 const { t } = useI18n();
 const showVideoSettingTab: Ref<boolean> = ref(false);
-const isSupportVideoMedia = isGetUserMediaSupported && isEnumerateDevicesSupported;
+const isSupportVideoMedia =
+  isGetUserMediaSupported && isEnumerateDevicesSupported;
 
 const icon = computed(() => (props.isMuted ? CameraOffIcon : CameraOnIcon));
 
@@ -83,36 +90,36 @@ function handleHideVideoSettingTab() {
     showVideoSettingTab.value = false;
   }
 }
-
 </script>
 
 <style lang="scss" scoped>
-
 $videoTabWidth: 305px;
 
 .video-control-container {
   position: relative;
+
   .video-tab {
     position: absolute;
     bottom: calc(100% + 12px);
     left: -5px;
     width: $videoTabWidth;
+    padding: 20px 20px 24px;
     background: var(--background-color-1);
-    padding: 20px 20px 24px 20px;
     border-radius: 8px;
     box-shadow:
-      0px 2px 4px -3px rgba(32, 77, 141, 0.03),
-      0px 6px 10px 1px rgba(32, 77, 141, 0.06),
-      0px 3px 14px 2px rgba(32, 77, 141, 0.05);
+      0 2px 4px -3px rgba(32, 77, 141, 0.03),
+      0 6px 10px 1px rgba(32, 77, 141, 0.06),
+      0 3px 14px 2px rgba(32, 77, 141, 0.05);
+
     &::before {
-      content: '';
       position: absolute;
-      left: 30px;
       bottom: -10px;
+      left: 30px;
+      content: '';
       border-top: 5px solid var(--background-color-1);
-      border-left: 5px solid transparent;
       border-right: 5px solid transparent;
       border-bottom: 5px solid transparent;
+      border-left: 5px solid transparent;
     }
   }
 }

package/src/TUIRoom/components/common/VideoProfile.vue

@@ -26,10 +26,12 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue';
 import { useI18n } from '../../locales';
-import TuiSelect from './base/Select.vue';
-import TuiOption from './base/Option.vue';
+import TuiSelect from './base/Select/index.vue';
+import TuiOption from './base/Option/index.vue';
 
-import TUIRoomEngine, { TUIVideoQuality } from '@tencentcloud/tuiroom-engine-electron';
+import TUIRoomEngine, {
+  TUIVideoQuality,
+} from '@tencentcloud/tuiroom-engine-electron';
 import { useRoomStore } from '../../stores/room';
 import useGetRoomEngine from '../../hooks/useRoomEngine';
 import { storeToRefs } from 'pinia';
@@ -42,9 +44,13 @@ const { t } = useI18n();
 
 const videoProfileList = computed(() => [
   { label: t('Low Definition'), value: TUIVideoQuality.kVideoQuality_360p },
-  { label: t('Standard Definition'), value: TUIVideoQuality.kVideoQuality_540p },
+  {
+    label: t('Standard Definition'),
+    value: TUIVideoQuality.kVideoQuality_540p,
+  },
   { label: t('High Definition'), value: TUIVideoQuality.kVideoQuality_720p },
-  { label: t('Super Definition'), value: TUIVideoQuality.kVideoQuality_1080p }]);
+  { label: t('Super Definition'), value: TUIVideoQuality.kVideoQuality_1080p },
+]);
 
 watch(localVideoQuality, (val: TUIVideoQuality) => {
   roomEngine.instance?.updateVideoQuality({ quality: val });
@@ -56,7 +62,6 @@ TUIRoomEngine.once('ready', () => {
 </script>
 
 <style lang="scss" scoped>
-
 .select {
   width: 100%;
   font-size: 14px;

package/src/TUIRoom/components/common/VideoSettingTab.vue

@@ -10,7 +10,7 @@
   <div :class="['video-tab', themeClass]">
     <div class="item-setting">
       <span class="title">{{ t('Camera') }}</span>
-      <device-select device-type="camera"></device-select>
+      <device-select device-type="camera" />
     </div>
     <div v-if="withPreview" class="item-setting">
       <span class="title">{{ t('Preview') }}</span>
@@ -20,14 +20,16 @@
     </div>
     <div class="item-setting">
       <span class="title">{{ t('Resolution') }}</span>
-      <video-profile></video-profile>
+      <video-profile />
     </div>
     <div class="mirror-container">
       <span>{{ t('Mirror') }}</span>
-      <tui-switch v-model="isLocalStreamMirror"></tui-switch>
+      <tui-switch v-model="isLocalStreamMirror" />
     </div>
     <div v-if="withMore" class="item-setting">
-      <div class="item" @click="handleMoreCameraSetting">{{ t('More Camera Settings') }}</div>
+      <div class="item" @click="handleMoreCameraSetting">
+        {{ t('More Camera Settings') }}
+      </div>
     </div>
   </div>
 </template>
@@ -41,30 +43,37 @@ import { useBasicStore } from '../../stores/basic';
 import { useI18n } from '../../locales';
 
 import useGetRoomEngine from '../../hooks/useRoomEngine';
-import { TRTCVideoMirrorType, TRTCVideoRotation, TRTCVideoFillMode } from '@tencentcloud/tuiroom-engine-electron';
-import { isElectron, isMobile }  from '../../utils/environment';
+import {
+  TRTCVideoMirrorType,
+  TRTCVideoRotation,
+  TRTCVideoFillMode,
+} from '@tencentcloud/tuiroom-engine-electron';
+import { isElectron, isMobile } from '../../utils/environment';
 import { storeToRefs } from 'pinia';
 const roomEngine = useGetRoomEngine();
 
 interface Props {
-  withPreview?: boolean,
-  withMore?: boolean,
-  withMirror?: boolean,
-  theme?: 'white' | 'black',
+  withPreview?: boolean;
+  withMore?: boolean;
+  withMirror?: boolean;
+  theme?: 'white' | 'black';
 }
 const props = defineProps<Props>();
 
 const basicStore = useBasicStore();
 const { isLocalStreamMirror } = storeToRefs(basicStore);
 
-const themeClass = computed(() => (props.theme ? `tui-theme-${props.theme}` : ''));
+const themeClass = computed(() =>
+  props.theme ? `tui-theme-${props.theme}` : ''
+);
 
 watch(isLocalStreamMirror, async (val: boolean) => {
   const trtcCloud = roomEngine.instance?.getTRTCCloud();
   if (!isMobile) {
     await trtcCloud?.setLocalRenderParams({
       mirrorType: val
-        ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
+        ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable
+        : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
       rotation: TRTCVideoRotation.TRTCVideoRotation0,
       fillMode: TRTCVideoFillMode.TRTCVideoFillMode_Fill,
     });
@@ -75,7 +84,7 @@ const { t } = useI18n();
 
 /**
  * Click [More Camera Settings].
-**/
+ **/
 function handleMoreCameraSetting() {
   basicStore.setShowSettingDialog(true);
   basicStore.setActiveSettingTab('video');
@@ -89,7 +98,8 @@ if (props.withPreview) {
       const trtcCloud = roomEngine.instance?.getTRTCCloud();
       await trtcCloud?.setLocalRenderParams({
         mirrorType: isLocalStreamMirror.value
-          ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
+          ? TRTCVideoMirrorType.TRTCVideoMirrorType_Enable
+          : TRTCVideoMirrorType.TRTCVideoMirrorType_Disable,
         rotation: TRTCVideoRotation.TRTCVideoRotation0,
         fillMode: TRTCVideoFillMode.TRTCVideoFillMode_Fill,
       });
@@ -100,35 +110,38 @@ if (props.withPreview) {
     roomEngine.instance?.stopCameraDeviceTest();
   });
 }
-
 </script>
 
 <style lang="scss" scoped>
 .video-tab {
-  border-radius: 8px;
   font-size: 14px;
+  border-radius: 8px;
+
   .item-setting {
     &:not(:last-child) {
       margin-bottom: 20px;
     }
   }
+
   .title {
     display: inline-block;
-    margin-bottom: 8px;
     width: 100%;
-    color: var(--font-color-4);
+    margin-bottom: 8px;
     font-size: 14px;
     font-weight: 400;
     line-height: 22px;
+    color: var(--font-color-4);
   }
+
   .video-preview-container {
     position: relative;
     width: 100%;
     height: 0;
     padding-top: calc(100% * 9 / 16);
-    background-color: #000000;
-    border-radius: 8px;
     overflow: hidden;
+    background-color: #000;
+    border-radius: 8px;
+
     .video-preview {
       position: absolute;
       top: 0;
@@ -137,22 +150,24 @@ if (props.withPreview) {
       height: 100%;
     }
   }
+
   .mirror-container {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    color: var(--font-color-4);
+    justify-content: space-between;
+    padding-right: 2px;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
-    padding-right: 2px;
+    color: var(--font-color-4);
   }
+
   .item {
     width: 100%;
     height: 20px;
-    cursor: pointer;
     color: var(--font-color-3);
+    cursor: pointer;
   }
 }
 </style>

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

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <div class="mask" v-show="show && showMask" @click.stop="toggleShow"></div>
+    <div class="container" v-show="show" :style="{ height: props.height }">
+      <div class="container-close" @click="toggleShow" v-if="showClose">
+        <svg-icon :icon="ArrowDown" />
+      </div>
+      <div v-if="title" class="container-header">{{ title }}</div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, defineProps, watch, defineEmits } from 'vue';
+import SvgIcon from './SvgIcon.vue';
+import ArrowDown from '../icons/ArrowDown.vue';
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  showClose: {
+    type: Boolean,
+    default: true,
+  },
+  showMask: {
+    type: Boolean,
+    default: true,
+  },
+  height: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['input']);
+const show = ref(false);
+
+watch(
+  () => props.visible,
+  val => (show.value = val),
+  { immediate: true }
+);
+watch(show, val => emit('input', val), { immediate: true });
+
+const toggleShow = () => (show.value = !show.value);
+</script>
+<style scoped lang="scss">
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  width: 100%;
+  min-height: 120px;
+  padding: 20px 12px 36px;
+  background-color: #fff;
+  border-radius: 18px 18px 0 0;
+
+  .container-close {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 12px;
+    text-align: center;
+  }
+
+  .container-header {
+    margin-bottom: 12px;
+    font-size: 18px;
+    font-weight: 500;
+    color: #4f586b;
+  }
+}
+</style>

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

@@ -33,7 +33,11 @@ const content = computed(() => {
   return props.value;
 });
 
-const badgeClass = computed(() => ['tui-badge', `tui-badge-${props.type}`, props.isDot ? 'tui-badge-isDot' : '']);
+const badgeClass = computed(() => [
+  'tui-badge',
+  `tui-badge-${props.type}`,
+  props.isDot ? 'tui-badge-isDot' : '',
+]);
 </script>
 
 <style lang="scss" scoped>
@@ -48,10 +52,10 @@ const badgeClass = computed(() => ['tui-badge', `tui-badge-${props.type}`, props
     display: inline-block;
     padding: 1px 6px;
     font-size: 12px;
-    color: var(--white-color);
-    transform: translateY(-50%) translateX(100%);
     font-weight: bold;
+    color: var(--white-color);
     border-radius: 10px;
+    transform: translateY(-50%) translateX(100%);
   }
 }
 
@@ -70,8 +74,8 @@ const badgeClass = computed(() => ['tui-badge', `tui-badge-${props.type}`, props
 .tui-badge-isDot {
   .tui-badge-count {
     top: 0;
-    height: 8px;
     width: 8px;
+    height: 8px;
     padding: 0;
     border-radius: 50%;
   }

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

@@ -1,9 +1,5 @@
 <template>
-  <button
-    :class="buttonClassList"
-    :style="customStyle"
-    @click="handleClick"
-  >
+  <button :class="buttonClassList" :style="customStyle" @click="handleClick">
     <span v-if="$slots.icon" class="button-icon">
       <slot name="icon"></slot>
     </span>
@@ -12,7 +8,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, StyleValue } from 'vue';
+import {
+  computed,
+  StyleValue,
+  withDefaults,
+  defineProps,
+  defineEmits,
+} from 'vue';
 
 interface Props {
   size?: 'large' | 'default';
@@ -21,6 +23,7 @@ interface Props {
   loading?: boolean;
   disabled?: boolean;
   round?: boolean;
+  plain?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -30,6 +33,7 @@ const props = withDefaults(defineProps<Props>(), {
   loading: false,
   disabled: false,
   round: true,
+  plain: false,
 });
 
 const emit = defineEmits(['click']);
@@ -47,44 +51,86 @@ const buttonClassList = computed(() => [
   { 'tui-button-round': props.round },
   { 'tui-button-loading': props.loading },
   { 'tui-button-disabled': props.disabled },
+  { 'tui-button-plain': props.plain },
 ]);
 </script>
 
 <style lang="scss" scoped>
-.tui-theme-white .button-primary{
-  --shadow-color: rgba(213, 224, 242, 0.60);
+.tui-theme-white .button-primary {
+  --shadow-color: rgba(213, 224, 242, 0.6);
 }
 
 .tui-theme-black .button-primary {
-  --shadow-color: rgba(28, 102, 229, 0.20);
+  --shadow-color: rgba(28, 102, 229, 0.2);
 }
+
 .tui-button {
   display: inline-flex;
-  justify-content: center;
   align-items: center;
-  text-align: center;
-  cursor: pointer;
-  transition: background-color 0.2s ease-in-out;
-  border: 1px solid var(--active-color-1);
+  justify-content: center;
   font-weight: 400;
   line-height: 22px;
+  color: var(--font-color-7);
+  text-align: center;
   white-space: nowrap;
+  cursor: pointer;
   background-color: var(--active-color-1);
+  border: 1px solid var(--active-color-1);
   outline: none;
-  color: var(--font-color-7);
+  transition: background-color 0.2s ease-in-out;
+
   &:hover {
-    background: #144FB6;
-    border: 1px solid #144FB6;
+    background: #144fb6;
+    border: 1px solid #144fb6;
     outline: none;
   }
 }
+
+.tui-button-plain.tui-button-primary {
+  color: #0961f7;
+  background: #ecf5ff;
+  border-color: #b3d8ff;
+}
+
+.tui-button-plain.tui-button-primary:hover {
+  color: #fff;
+  background: #409eff;
+  border-color: #409eff;
+}
+
+.tui-button-plain.tui-button-info {
+  color: #909399;
+  background: #f4f4f5;
+  border-color: #d3d4d6;
+}
+
+.tui-button-plain.tui-button-info:hover {
+  color: #fff;
+  background: #909399;
+  border-color: #909399;
+}
+
+.tui-button-plain.tui-button-danger {
+  font-weight: 500;
+  color: #f56c6c;
+  background: #fef0f0;
+  border-color: #fbc4c4;
+}
+
+.tui-button-plain.tui-button-danger:hover {
+  color: #fff;
+  background: #f56c6c;
+  border-color: #f56c6c;
+}
+
 .tui-button-primary {
-  background-color: transparent;
-  border: 1px solid var(--active-color-2);
-  color: var(--active-color-2);
   font-size: 14px;
   font-weight: 500;
   line-height: 22px;
+  color: var(--active-color-2);
+  background-color: transparent;
+  border: 1px solid var(--active-color-2);
+
   &:hover {
     background-color: var(--shadow-color);
   }
@@ -94,34 +140,38 @@ const buttonClassList = computed(() => [
   padding: 19px 48px;
   font-size: 20px;
 }
+
 .tui-button-default {
   padding: 5px 30px;
   font-size: 14px;
 }
+
 .tui-button-round {
   border-radius: 999999px;
 }
 
 .tui-button-disabled {
-  cursor: not-allowed;
   pointer-events: none;
+  cursor: not-allowed;
   opacity: 0.4;
 }
 
 .tui-button-icon {
-  margin-right: 5px;
   display: flex;
+  margin-right: 5px;
 }
 
 .tui-button-text {
-  border: 0 solid transparent;
-  background-color: transparent;
   color: var(--font-color-4);
+  background-color: transparent;
+  border: 0 solid transparent;
+
   &:hover {
-    border: 0 solid transparent;
-    background-color: transparent;
     color: var(--font-color-4);
+    background-color: transparent;
+    border: 0 solid transparent;
   }
+
   &::after {
     border: none;
   }

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

@@ -3,50 +3,67 @@
     <input
       v-model="checked"
       type="checkbox"
+      :disabled="props.disabled"
       @change="handleValueChange"
     />
-    <span @click="handleCheckBoxClick">
+    <span class="tui-checkbox-slot-container" @click="handleCheckBoxClick">
       <slot></slot>
     </span>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, Ref } from 'vue';
+import { ref, Ref, watch, withDefaults, defineProps, defineEmits } from 'vue';
 interface Props {
   modelValue: boolean;
+  disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
+  disabled: false,
+  slotCustomStyle: () => ({}),
 });
-
 const checked: Ref<boolean> = ref(props.modelValue);
+const emit = defineEmits(['input']);
+
+watch(
+  () => props.modelValue,
+  value => {
+    checked.value = props.disabled ? true : value;
+  },
+  { immediate: true }
+);
 
 function handleCheckBoxClick() {
   checked.value = !checked.value;
+  emit('input', checked.value);
 }
 
-const emit = defineEmits(['update:modelValue']);
-
 function handleValueChange(event: any) {
   checked.value = event.target.checked;
-  emit('update:modelValue', event.target.checked);
+  emit('input', event.target.checked);
 }
 </script>
 
 <style lang="scss" scoped>
 .tui-checkbox {
   position: relative;
-  display: inline-block;
+  display: flex;
+  align-items: center;
   cursor: pointer;
+
+  .tui-checkbox-slot-container {
+    flex: 1;
+    overflow: auto;
+  }
 }
 
 input {
   color: var(--title-color);
+  cursor: pointer;
   border: 1px solid var(--stroke-color);
   border-radius: 4px;
-  cursor: pointer;
 }
 
 input:focus {
@@ -55,6 +72,7 @@ input:focus {
 }
 
 input:disabled {
+  cursor: not-allowed;
   background-color: var(--background-color-9);
 }
 </style>