@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

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

@@ -2,15 +2,15 @@
   <div class="popup-container">
     <div class="popup-main-header">
       <span v-tap="handleClose" class="icon-container">
-        <svg-icon class="close-icon" :icon="ArrowStrokeBackIcon"></svg-icon>
+        <svg-icon class="close-icon" :icon="ArrowStrokeBackIcon" />
       </span>
       <span class="sidebar-title">{{ title }}</span>
     </div>
     <div class="popup-main-content">
-      <slot name="sidebarContent" />
+      <slot name="sidebarContent"></slot>
     </div>
     <div class="popup-main-footer">
-      <slot name="sidebarFooter" />
+      <slot name="sidebarFooter"></slot>
     </div>
   </div>
 </template>
@@ -21,7 +21,7 @@ import ArrowStrokeBackIcon from '../icons/ArrowStrokeBackIcon.vue';
 import vTap from '../../../directives/vTap';
 
 interface Props {
-  title: string,
+  title: string;
 }
 defineProps<Props>();
 
@@ -31,56 +31,61 @@ function handleClose() {
   basicStore.setSidebarOpenStatus(false);
   basicStore.setSidebarName('');
 }
-
 </script>
 <style lang="scss" scoped>
 .popup-container {
+  position: static;
+  flex: 1;
   width: 100vw;
   height: 100%;
   background: var(--room-detail-background);
-  position: static;
-  flex: 1;
+
   .popup-main-header {
-    width: 100%;
-    height: 60px;
     display: flex;
-    justify-content: center;
     align-items: center;
-    .icon-container{
-      padding: 20px 25px;
+    justify-content: center;
+    width: 100%;
+    height: 60px;
+
+    .icon-container {
       position: absolute;
-      left: 0;
       top: 0;
+      left: 0;
+      box-sizing: content-box;
       width: 10px;
       height: 18px;
+      padding: 20px 25px;
       background-size: cover;
-      box-sizing: content-box;
     }
+
     .sidebar-title {
       font-family: 'PingFang SC';
+      font-size: 16px;
       font-style: normal;
       font-weight: 500;
-      font-size: 16px;
       line-height: 22px;
-      text-align: center;
       color: var(--input-font-color);
+      text-align: center;
     }
-    .close-icon{
+
+    .close-icon {
       width: 10px;
       height: 18px;
       background-size: cover;
-      }
+    }
   }
+
   .popup-main-content {
     width: 100%;
     height: calc(100% - 130px);
     overflow: hidden;
   }
+
   .popup-main-footer {
-    width: 100%;
-    height: auto;
     position: sticky;
     bottom: 0;
+    width: 100%;
+    height: auto;
     padding-top: 10px;
   }
 }

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

@@ -5,16 +5,21 @@
     :class="['select-container', themeClass]"
   >
     <div
-      :class="['select-content', { 'disabled': disabled }]"
+      :class="['select-content', { disabled: disabled }]"
       @click="handleClickSelect"
     >
-      <span class="select-text">
-        {{ selectedLabel || selectedValue }}
-      </span>
+      <template v-if="$slots.customSelectContent">
+        <slot name="customSelectContent"></slot>
+      </template>
+      <template v-else>
+        <span class="select-text" :style="props.customSelectContentStyle">
+          {{ selectedLabel || selectedValue }}
+        </span>
+      </template>
       <svg-icon
-        :class="['arrow-icon', { 'reverse': showSelectDropdown }]"
+        :class="['arrow-icon', { reverse: showSelectDropdown }]"
         :icon="ArrowStrokeSelectDownIcon"
-      ></svg-icon>
+      />
     </div>
     <Transition name="select-fade">
       <div
@@ -30,19 +35,29 @@
 </template>
 
 <script setup lang="ts">
-import { ref, provide, computed, reactive, watch } from 'vue';
-import SvgIcon from './SvgIcon.vue';
-import ArrowStrokeSelectDownIcon from '../icons/ArrowStrokeSelectDownIcon.vue';
-import useZIndex from '../../../hooks/useZIndex';
-import vClickOutside from '../../../directives/vClickOutside';
-import { roomService } from '../../../services';
+import {
+  ref,
+  provide,
+  computed,
+  reactive,
+  watch,
+  StyleValue,
+  defineProps,
+  defineEmits,
+} from 'vue';
+import SvgIcon from '../SvgIcon.vue';
+import ArrowStrokeSelectDownIcon from '../../icons/ArrowStrokeSelectDownIcon.vue';
+import useZIndex from '../../../../hooks/useZIndex';
+import vClickOutside from '../../../../directives/vClickOutside';
+import { roomService } from '../../../../services';
 
 const { nextZIndex } = useZIndex();
 
 interface Props {
-  modelValue: string | number | boolean | object,
-  disabled?: boolean,
-  theme?: 'white' | 'black',
+  modelValue: string | number | boolean | object;
+  disabled?: boolean;
+  theme?: 'white' | 'black';
+  customSelectContentStyle?: StyleValue;
 }
 
 const props = defineProps<Props>();
@@ -53,18 +68,22 @@ const showSelectDropdown = ref(false);
 const optionObj = ref(new Map());
 const optionDataList = computed(() => Array.from(optionObj.value.values()));
 const selectedLabel = ref('');
-const selectedValue = ref(props.modelValue);
 const selectContainerRef = ref();
 const selectDropDownRef = ref();
 const dropDirection = ref('down');
-const themeClass = computed(() => (props.theme ? `tui-theme-${props.theme}` : ''));
+const themeClass = computed(() =>
+  props.theme ? `tui-theme-${props.theme}` : ''
+);
 
-watch(() => props.modelValue, (val) => {
-  selectedValue.value = val;
-  if (optionObj.value.get(val)) {
-    selectedLabel.value = optionObj.value.get(props.modelValue).label;
-  }
-});
+watch(
+  () => props.modelValue,
+  val => {
+    if (optionObj.value.get(val)) {
+      selectedLabel.value = optionObj.value.get(props.modelValue).label;
+    }
+  },
+  { immediate: true }
+);
 
 watch(optionDataList, () => {
   if (optionObj.value.get(props.modelValue)) {
@@ -75,8 +94,8 @@ watch(optionDataList, () => {
 const dropDownStyle = ref({});
 
 interface OptionData {
-  label: string,
-  value: string | number | boolean | object,
+  label: string;
+  value: string | number | boolean | object;
 }
 
 function onOptionCreated(option: OptionData) {
@@ -88,23 +107,24 @@ function onOptionDestroyed(value: string | number | boolean | object) {
 }
 
 function onOptionSelected(option: OptionData) {
-  selectedValue.value = option.value;
   showSelectDropdown.value = false;
   emits('update:modelValue', option.value);
+  emits('change', option.value);
 }
 
-watch(selectedValue, (val) => {
-  emits('change', val);
-});
+const selectedValue = computed(() => props.modelValue);
 
-provide('select', reactive({
-  selectedValue,
-  optionObj,
-  optionDataList,
-  onOptionCreated,
-  onOptionDestroyed,
-  onOptionSelected,
-}));
+provide(
+  'select',
+  reactive({
+    selectedValue,
+    optionObj,
+    optionDataList,
+    onOptionCreated,
+    onOptionDestroyed,
+    onOptionSelected,
+  })
+);
 
 function handleClickSelect() {
   if (props.disabled) {
@@ -116,17 +136,23 @@ function handleClickSelect() {
     handleDropDownPosition();
     dropDownStyle.value = { zIndex: nextZIndex() };
     showSelectDropdown.value = true;
+    optionObj.value
+      .get(props.modelValue)
+      .ref.scrollIntoView({ block: 'center' });
   }
 }
 
 // Determine the positioning of the drop-down box based on the page position
 function handleDropDownPosition() {
-  const { top, bottom } = selectContainerRef.value?.getBoundingClientRect();
+  const { top, bottom } =
+    selectContainerRef.value.getBoundingClientRect() || {};
   const container = roomService.getRoomContainer();
-  const bottomSize = container instanceof HTMLElement ? container.offsetHeight - bottom : -1;
+  const bottomSize =
+    container instanceof HTMLElement ? container.offsetHeight - bottom : -1;
   let dropDownContainerHeight = 0;
   if (!showSelectDropdown.value) {
-    selectDropDownRef.value.style = 'display:block;position:absolute;z-index:-1000';
+    selectDropDownRef.value.style =
+      'display:block;position:absolute;z-index:-1000';
     dropDownContainerHeight = selectDropDownRef.value.offsetHeight;
     selectDropDownRef.value.style = '';
   } else {
@@ -142,43 +168,48 @@ function handleClickOutside() {
     showSelectDropdown.value = false;
   }
 }
-
 </script>
 
 <style lang="scss" scoped>
-
 .select-container {
   position: relative;
+  height: 100%;
+
   .select-content {
-    box-sizing: border-box;
     position: relative;
-    border: 1px solid var(--border-color);
-    background-color: var(--background-color-7);
-    color: var(--font-color-3);
-    border-radius: 8px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
     height: 42px;
-    padding: 10px 16px;
+    padding: 0 16px;
+    color: var(--font-color-3);
     cursor: pointer;
-    display: flex;
+    background-color: var(--background-color-7);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+
     &.disabled {
-      background-color: rgba(255, 255, 255, 0.50);
-      color: #8F9AB2;
+      color: #8f9ab2;
       cursor: not-allowed;
+      background-color: rgba(255, 255, 255, 0.5);
     }
+
     .select-text {
+      flex: 1;
       width: 0;
+      overflow: hidden;
       font-size: 14px;
       font-style: normal;
       font-weight: 500;
       line-height: 22px;
-      flex: 1;
       white-space: nowrap;
-      overflow: hidden;
     }
+
     .arrow-icon {
       margin-left: 10px;
       transition: transform 0.2s;
       transform: rotate(0deg);
+
       &.reverse {
         transform: rotate(-180deg);
       }
@@ -186,19 +217,21 @@ function handleClickOutside() {
   }
 
   .select-dropdown-container {
+    position: absolute;
     min-width: 100%;
     max-height: 254px;
-    padding: 7px 0px;
-    position: absolute;
+    padding: 7px 0;
+    overflow: auto;
     background-color: var(--background-color-7);
     border: 1px solid var(--border-color);
     border-radius: 8px;
-    overflow: auto;
+
     &.down {
       top: calc(100% + 6px);
       left: 0;
       transform-origin: 50% 0;
     }
+
     &.up {
       bottom: calc(100% + 6px);
       left: 0;
@@ -209,15 +242,15 @@ function handleClickOutside() {
 
 .select-fade-enter-active,
 .select-fade-leave-to {
-  transform: scaleY(0);
   opacity: 0;
   transition: all 0.2s ease;
+  transform: scaleY(0);
 }
 
 .select-fade-enter-to,
 .select-fade-leave-from {
-  transform: scaleY(1);
   opacity: 1;
   transition: all 0.2s ease;
+  transform: scaleY(1);
 }
 </style>

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

@@ -6,8 +6,13 @@
   * Use <svg-icon><chat-icon></chat-icon></svg-icon> in template
 -->
 <template>
-  <span class="svg-icon" :class="[customClass]" :style="customStyle" @click="handleClick">
-    <component :is="icon" v-if="icon"></component>
+  <span
+    class="svg-icon"
+    :class="[customClass]"
+    :style="customStyle"
+    @click="handleClick"
+  >
+    <component :is="icon" v-if="icon" />
     <slot></slot>
   </span>
 </template>
@@ -18,17 +23,21 @@ import type { Component } from 'vue';
 import { addSuffix } from '../../../utils/utils';
 
 interface Props {
-  size?: string | number,
-  responseSize?: string | number,
-  customClass?: string,
-  icon?: Component,
-  color?: string,
+  size?: string | number;
+  responseSize?: string | number;
+  customClass?: string;
+  icon?: Component;
+  color?: string;
 }
 
 const props = defineProps<Props>();
 const emit = defineEmits(['click']);
 
-const customStyle = computed(() => (props.size ? `width: ${addSuffix(props.size)};height: ${addSuffix(props.size)};` : ''));
+const customStyle = computed(() =>
+  props.size
+    ? `width: ${addSuffix(props.size)};height: ${addSuffix(props.size)};`
+    : ''
+);
 
 function handleClick(event: Event) {
   emit('click', event);
@@ -37,9 +46,9 @@ function handleClick(event: Event) {
 
 <style lang="scss" scoped>
 .svg-icon {
-  overflow: hidden;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
 }
 </style>

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

@@ -0,0 +1,147 @@
+<template>
+  <div class="swiper" ref="swiperRef">
+    <div
+      class="swiper-item-container"
+      :style="swiperStyle"
+      @touchstart="handleTouchStart"
+      @touchmove="handleTouchMoveThrottle"
+      @touchend="handleTouchEnd"
+    >
+      <slot></slot>
+    </div>
+    <div v-if="swiperItemNumber > 1" class="swiper-dot-container">
+      <div
+        v-for="(item, index) in swiperItemNumber"
+        :key="item"
+        class="swiper-dots"
+        :class="[isActiveDot(index) ? 'swiper-current-dots' : '']"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, provide, computed, defineProps, defineEmits, watch } from 'vue';
+import { throttle } from '../../../utils/utils';
+
+const props = defineProps<{
+  activeIndex: number;
+}>();
+
+const emits = defineEmits(['change']);
+
+const activeSwiperIndex = ref(0);
+const swiperItemNumber = ref(0);
+const swiperRef = ref();
+const translateX = ref(0);
+
+watch(
+  () => props.activeIndex,
+  val => {
+    activeSwiperIndex.value = val;
+    translateX.value =
+      0 - swiperRef.value.offsetWidth * activeSwiperIndex.value;
+  }
+);
+
+watch(activeSwiperIndex, () => {
+  emits('change', activeSwiperIndex.value);
+});
+
+provide('swiper', {
+  activeSwiperIndex,
+  swiperRef,
+  addSwiperItem,
+  removeSwiperItem,
+});
+
+const touchData = {
+  x: 0,
+  y: 0,
+};
+
+function isActiveDot(index: number) {
+  return index === activeSwiperIndex.value;
+}
+
+function addSwiperItem() {
+  swiperItemNumber.value += 1;
+}
+
+function removeSwiperItem() {
+  swiperItemNumber.value -= 1;
+}
+
+const swiperStyle = computed(() => {
+  return { transform: `translateX(${translateX.value}px)` };
+});
+
+function handleTouchStart(event: TouchEvent) {
+  touchData.x = event.changedTouches[0].pageX;
+  touchData.y = event.changedTouches[0].pageY;
+}
+
+const handleTouchMoveThrottle = throttle(handleTouchMove, 200);
+
+function handleTouchMove(event: TouchEvent) {
+  const offsetX = event.changedTouches[0].pageX - touchData.x;
+  translateX.value =
+    0 - swiperRef.value.offsetWidth * activeSwiperIndex.value + offsetX;
+}
+
+function handleTouchEnd(event: TouchEvent) {
+  const offsetX = event.changedTouches[0].pageX - touchData.x;
+  if (
+    Math.abs(event.changedTouches[0].pageX - touchData.x) >
+    swiperRef.value.offsetWidth / 5
+  ) {
+    if (offsetX < 0 && activeSwiperIndex.value < swiperItemNumber.value - 1) {
+      activeSwiperIndex.value = activeSwiperIndex.value + 1;
+    }
+    if (offsetX > 0 && activeSwiperIndex.value >= 1) {
+      activeSwiperIndex.value = activeSwiperIndex.value - 1;
+    }
+  }
+  translateX.value = 0 - swiperRef.value.offsetWidth * activeSwiperIndex.value;
+}
+</script>
+
+<style lang="scss" scoped>
+.swiper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .swiper-item-container {
+    display: flex;
+    transition: transform 0.3s;
+  }
+
+  .swiper-dot-container {
+    position: absolute;
+    bottom: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+
+    .swiper-dots {
+      width: 8px;
+      height: 8px;
+      margin: 5px;
+      background: #fff;
+      border-radius: 20px;
+      opacity: 0.6;
+    }
+
+    .swiper-current-dots {
+      width: 8px;
+      height: 8px;
+      margin: 5px;
+      background: #fff;
+      border-radius: 20px;
+      opacity: 1;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,31 @@
+<template>
+  <div class="swiper-item" :style="swiperItemStyle">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, inject, onUnmounted } from 'vue';
+
+const swiperData: any = inject('swiper');
+const swiperItemStyle = ref();
+
+swiperData.addSwiperItem();
+
+onMounted(() => {
+  swiperItemStyle.value = {
+    width: `${swiperData.swiperRef.value.offsetWidth}px`,
+    height: `${swiperData.swiperRef.value.offsetHeight}px`,
+  };
+});
+
+onUnmounted(() => {
+  swiperData.removeSwiperItem();
+});
+</script>
+
+<style lang="scss" scoped>
+.swiper-item {
+  flex-shrink: 0;
+}
+</style>

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

@@ -0,0 +1,65 @@
+<template>
+  <div class="container">
+    <TuiSelect
+      v-model="selectedTime"
+      theme="white"
+      class="timepicker-select"
+      :teleported="false"
+      :custom-select-content-style="{ 'font-weight': 400 }"
+    >
+      <TuiOption
+        v-for="time in timeOptions"
+        :key="time"
+        theme="white"
+        :value="time"
+        :label="time"
+        :custom-option-content-style="{ 'font-weight': 400 }"
+      />
+    </TuiSelect>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineProps, defineEmits, watch } from 'vue';
+import TuiSelect from '../Select/index.vue';
+import TuiOption from '../Option/index.vue';
+interface Props {
+  modelValue: string;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['input']);
+const selectedTime = ref(props.modelValue);
+
+const timeOptions = computed(() => {
+  const options = [];
+  for (let i = 0; i < 24; i++) {
+    for (let j = 0; j < 60; j += 15) {
+      const hour = i < 10 ? `0${i}` : `${i}`;
+      const minute = j < 10 ? `0${j}` : `${j}`;
+      options.push(`${hour}:${minute}`);
+    }
+  }
+  return options;
+});
+
+const updateTime = () => {
+  emit('input', selectedTime.value);
+};
+
+watch(
+  selectedTime,
+  () => {
+    updateTime();
+  },
+  {
+    immediate: true,
+  }
+);
+watch(
+  () => props.modelValue,
+  newValue => {
+    selectedTime.value = newValue;
+  },
+  { immediate: true }
+);
+</script>