@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.5.0

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

@@ -0,0 +1,252 @@
+<template>
+  <div ref="pickerRef" class="container">
+    <TuiInput
+      v-model="formattedDate" readonly class="datepicker-input" @focus="togglePicker"
+    />
+    <div v-if="showPicker" class="picker">
+      <div class="picker-header">
+        <span class="current-time">{{ currentYear }}/{{ currentMonth < 10 ? `0${currentMonth}` : currentMonth }}</span>
+        <button class="arrow" @click="changeMonth(-1)">&lt;</button>
+        <button class="arrow" @click="changeMonth(1)">&gt;</button>
+      </div>
+      <div class="picker-weekdays">
+        <div v-for="weekday in weekdays" :key="weekday" class="weekday">{{ weekday }}</div>
+      </div>
+      <div class="picker-body">
+        <div
+          v-for="day in days" :key="day.id" class="day"
+          :class="{
+            'other-month': day.otherMonth,
+            'selected': isSelected(day.date),
+            'today': isToday(day.date),
+            'past': isPast(day.date)
+          }"
+          @click="selectDate(day.date)"
+        >
+          {{ day.label }}
+          <span v-if="isToday(day.date)" class="today-dot"></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineProps, defineEmits, watch, watchEffect, onMounted, onUnmounted } from 'vue';
+import TuiInput from '../Input/index.vue';
+
+interface Props {
+  modelValue: Date;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['input']);
+const showPicker = ref(false);
+const selectedDate = ref(props.modelValue || new Date());
+const currentYear = ref(selectedDate.value?.getFullYear());
+const currentMonth = ref(selectedDate.value?.getMonth() + 1);
+
+const pickerRef = ref<any>(null);
+const closeOnOutsideClick = (event: any) => {
+  if (!pickerRef.value.contains(event.target)) {
+    showPicker.value = false;
+  }
+};
+const togglePicker = () => {
+  showPicker.value = !showPicker.value;
+};
+onMounted(() => {
+  window.addEventListener('click', closeOnOutsideClick);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('click', closeOnOutsideClick);
+});
+
+watch(selectedDate, (newValue) => {
+  emit('input', newValue);
+}, { immediate: true });
+
+watch(() => props.modelValue, (newValue) => {
+  if (!newValue) return;
+  selectedDate.value = newValue;
+  currentMonth.value = selectedDate.value.getMonth() + 1;
+  currentYear.value = selectedDate.value.getFullYear();
+}, { immediate: true });
+
+const changeMonth = (value: any) => {
+  currentMonth.value += value;
+  if (currentMonth.value === 0) {
+    currentMonth.value = 12;
+    currentYear.value -= 1;
+  } else if (currentMonth.value === 13) {
+    currentMonth.value = 1;
+    currentYear.value += 1;
+  }
+};
+
+const selectDate = (date: any) => {
+  if (isPast(date)) {
+    return;
+  }
+  selectedDate.value = date;
+  showPicker.value = false;
+};
+
+const days = ref<any[]>([]);
+
+const updateDays = () => {
+  const daysArray = [];
+  const firstDay = new Date(currentYear.value, currentMonth.value - 1, 1).getDay();
+  const daysInMonth = new Date(currentYear.value, currentMonth.value, 0).getDate();
+  const daysInPrevMonth = new Date(currentYear.value, currentMonth.value - 1, 0).getDate();
+
+  for (let i = daysInPrevMonth - firstDay + 1; i <= daysInPrevMonth; i++) {
+    const date = new Date(currentYear.value, currentMonth.value - 2, i);
+    daysArray.push({ id: date.toISOString(), label: i, date, otherMonth: true });
+  }
+
+  for (let i = 1; i <= daysInMonth; i++) {
+    const date = new Date(currentYear.value, currentMonth.value - 1, i);
+    daysArray.push({ id: date.toISOString(), label: i, date, otherMonth: false });
+  }
+
+  const remainingDays = 35 - daysArray.length;
+  if (remainingDays > 0) {
+    for (let i = 1; i <= remainingDays; i++) {
+      const date = new Date(currentYear.value, currentMonth.value, i);
+      daysArray.push({ id: date.toISOString(), label: i, date, otherMonth: true });
+    }
+  }
+
+  days.value = daysArray.slice(0, 35);
+};
+
+watchEffect(() => {
+  updateDays();
+});
+
+const formattedDate = computed(() => `${selectedDate.value.getFullYear()}-${selectedDate.value.getMonth() + 1}-${selectedDate.value.getDate()}`);
+
+const isSelected = (date: any) => date.toISOString() === selectedDate.value.toISOString();
+
+const isToday = (date: any) => {
+  const today = new Date();
+  return date.getFullYear() === today.getFullYear()
+  && date.getMonth() === today.getMonth() && date.getDate() === today.getDate();
+};
+
+const isPast = (date: any) => {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  return date < today;
+};
+
+const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+</script>
+
+<style lang="scss" scoped>
+.container {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.datepicker-input {
+  width: 100%;
+  cursor: pointer;
+}
+
+.picker {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: inline-block;
+  padding: 5px;
+  border-radius: 4px;
+  background-color: #fff;
+  color: #000;
+  font-size: 12px;
+  width: 100%;
+  border: 1px solid var(--stroke-color);
+}
+
+.picker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px;
+  font-size: 14px;
+  line-height: normal;
+
+  .current-time {
+    font-weight: bold;
+    color: black;
+    width: 80%;
+  }
+}
+
+.arrow {
+  display: inline-block;
+  padding: 0 5px;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.arrow:hover {
+  color: #409eff;
+}
+
+.picker-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.weekday {
+  padding: 5px;
+  background-color: #fff;
+  text-align: center;
+  line-height: initial;
+}
+
+.picker-body {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.day {
+  padding: 5px;
+  background-color: #fff;
+  text-align: center;
+  cursor: pointer;
+  line-height: initial;
+  position: relative;
+}
+
+.day:hover {
+  background-color: #ecf5ff;
+}
+
+.day.selected {
+  background-color: #409eff;
+  color: white;
+}
+
+.day.today .today-dot {
+  position: absolute;
+  bottom: 0px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  background-color: #409eff;
+  border-radius: 50%;
+}
+
+.day.past {
+  color: #ccc;
+  pointer-events: none;
+}
+</style>

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

@@ -0,0 +1,54 @@
+<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 }"
+      ></TuiOption>
+    </TuiSelect>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineProps, defineEmits, watch } from 'vue';
+import TuiSelect from '../Select.vue';
+import TuiOption from '../Option.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>

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

@@ -25,7 +25,8 @@
         <div class="tui-dialog-container" :style="drawerContainerStyle">
           <div class="tui-dialog-header">
             <div class="tui-dialog-header-title">
-              {{ title }}
+              <svg-icon :icon="titleIcon"></svg-icon>
+              <div class="tui-dialog-header-title-content">{{ title }}</div>
             </div>
             <template v-if="$slots.title">
               <slot name="title"></slot>
@@ -72,6 +73,7 @@ interface Props {
   appendToRoomContainer?: boolean;
   confirmButton?: string;
   cancelButton?: string;
+  titleIcon?: any;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -86,6 +88,7 @@ const props = withDefaults(defineProps<Props>(), {
   appendToRoomContainer: false,
   confirmButton: '',
   cancelButton: '',
+  titleIcon: null,
 });
 
 const emit = defineEmits(['update:modelValue', 'close', 'confirm', 'cancel']);
@@ -120,6 +123,9 @@ watch(
   (val) => {
     visible.value = val;
   },
+  {
+    immediate: true,
+  },
 );
 
 watch(visible, (val) => {
@@ -185,11 +191,15 @@ function handleOverlayClick(event: any) {
     align-items: center;
     box-shadow: 0px 7px 10px -5px rgba(230, 236, 245, 0.8);
     .tui-dialog-header-title {
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: 24px;
-      color: #0f1014;
+      display: flex;
+      .tui-dialog-header-title-content{
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 24px;
+        color: #0f1014;
+        margin-left: 8px;
+      }
     }
     .close {
       width: 32px;
@@ -217,7 +227,7 @@ function handleOverlayClick(event: any) {
   .tui-dialog-footer {
     padding: 20px 30px;
     display: flex;
-    justify-content: flex-end;
+    justify-content: center;
   }
 }
 </style>

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

@@ -0,0 +1,187 @@
+<template>
+  <div ref="tuiInputRef" :class="['tui-input', themeClass]">
+    <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"
+    />
+    <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 } 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;
+}
+
+// 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',
+});
+
+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;
+  height: 100%;
+  width: 100%;
+}
+
+input {
+  width: 100%;
+  height: 100%;
+  padding: 10px 0px 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);
+}
+
+input:focus {
+  border-color: var(--active-color-1);
+  outline: 0;
+}
+
+input:disabled {
+  background-color: var(--background-color-9);
+}
+
+.suffix-icon {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+}
+
+.results {
+  position: absolute;
+  width: 100%;
+  max-height: 254px;
+  padding: 7px 0px;
+  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;
+  }
+
+  &-item:hover {
+    background-color: var(--hover-background-color-1);
+    color: var(--active-color-2);
+  }
+}
+</style>

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

@@ -13,7 +13,8 @@ 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()}`;
 

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

@@ -5,10 +5,11 @@ import TUIMessageBox from './index.vue';
 export type MessageProps = {
     title: string,
     message: string,
-    callback?: () => Promise<void>,
+    callback?: () => void,
+    cancelButtonText?: string,
     confirmButtonText?: string,
 }
-const MessageBox = ({ title, message, callback, confirmButtonText }: MessageProps) => {
+const MessageBox = ({ title, message, callback, cancelButtonText, confirmButtonText }: MessageProps) => {
   const container = document.createElement('div');
   const fullscreenElement = document.fullscreenElement || document.getElementById('roomContainer') || document.getElementById('pre-conference-container');
   if (!fullscreenElement) return;
@@ -23,6 +24,7 @@ const MessageBox = ({ title, message, callback, confirmButtonText }: MessageProp
     title,
     message,
     callback,
+    cancelButtonText,
     confirmButtonText,
     remove: onRemove,
   });