@tencentcloud/roomkit-electron-vue3 2.5.0 → 2.6.0

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

@@ -1,25 +1,37 @@
 <template>
   <div ref="pickerRef" class="container">
     <TuiInput
-      v-model="formattedDate" readonly class="datepicker-input" @focus="togglePicker"
+      :model-value="formattedDate"
+      @input="formattedDate = $event"
+      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>
+        <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 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"
+          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)
+            selected: isSelected(day.date),
+            today: isToday(day.date),
+            past: isPast(day.date),
           }"
           @click="selectDate(day.date)"
         >
@@ -32,7 +44,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, defineProps, defineEmits, watch, watchEffect, onMounted, onUnmounted } from 'vue';
+import {
+  ref,
+  computed,
+  defineProps,
+  defineEmits,
+  watch,
+  watchEffect,
+  onMounted,
+  onUnmounted,
+} from 'vue';
 import TuiInput from '../Input/index.vue';
 
 interface Props {
@@ -62,16 +83,24 @@ 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 });
+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;
@@ -96,25 +125,52 @@ 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();
+  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 });
+    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 });
+    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 });
+      daysArray.push({
+        id: date.toISOString(),
+        label: i,
+        date,
+        otherMonth: true,
+      });
     }
   }
 
@@ -125,14 +181,21 @@ watchEffect(() => {
   updateDays();
 });
 
-const formattedDate = computed(() => `${selectedDate.value.getFullYear()}-${selectedDate.value.getMonth() + 1}-${selectedDate.value.getDate()}`);
+const formattedDate = computed(
+  () =>
+    `${selectedDate.value.getFullYear()}-${selectedDate.value.getMonth() + 1}-${selectedDate.value.getDate()}`
+);
 
-const isSelected = (date: any) => date.toISOString() === selectedDate.value.toISOString();
+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();
+  return (
+    date.getFullYear() === today.getFullYear() &&
+    date.getMonth() === today.getMonth() &&
+    date.getDate() === today.getDate()
+  );
 };
 
 const isPast = (date: any) => {
@@ -162,36 +225,37 @@ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   left: 0;
   z-index: 1000;
   display: inline-block;
+  width: 100%;
+  min-width: 222px;
   padding: 5px;
-  border-radius: 4px;
-  background-color: #fff;
-  color: #000;
   font-size: 12px;
-  width: 100%;
+  color: #000;
+  background-color: #fff;
   border: 1px solid var(--stroke-color);
+  border-radius: 4px;
 }
 
 .picker-header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   padding: 5px;
   font-size: 14px;
   line-height: normal;
 
   .current-time {
+    width: 80%;
     font-weight: bold;
     color: black;
-    width: 80%;
   }
 }
 
 .arrow {
   display: inline-block;
   padding: 0 5px;
-  border: none;
-  background-color: transparent;
   cursor: pointer;
+  background-color: transparent;
+  border: none;
 }
 
 .arrow:hover {
@@ -205,9 +269,9 @@ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 
 .weekday {
   padding: 5px;
-  background-color: #fff;
-  text-align: center;
   line-height: initial;
+  text-align: center;
+  background-color: #fff;
 }
 
 .picker-body {
@@ -216,12 +280,12 @@ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 }
 
 .day {
+  position: relative;
   padding: 5px;
-  background-color: #fff;
+  line-height: initial;
   text-align: center;
   cursor: pointer;
-  line-height: initial;
-  position: relative;
+  background-color: #fff;
 }
 
 .day:hover {
@@ -229,20 +293,20 @@ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 }
 
 .day.selected {
-  background-color: #409eff;
   color: white;
+  background-color: #409eff;
 }
 
 .day.today .today-dot {
   position: absolute;
-  bottom: 0px;
+  bottom: 0;
   left: 50%;
-  transform: translateX(-50%);
   display: inline-block;
   width: 5px;
   height: 5px;
   background-color: #409eff;
   border-radius: 50%;
+  transform: translateX(-50%);
 }
 
 .day.past {

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

@@ -25,7 +25,7 @@
         <div class="tui-dialog-container" :style="drawerContainerStyle">
           <div class="tui-dialog-header">
             <div class="tui-dialog-header-title">
-              <svg-icon :icon="titleIcon"></svg-icon>
+              <svg-icon :icon="titleIcon" />
               <div class="tui-dialog-header-title-content">{{ title }}</div>
             </div>
             <template v-if="$slots.title">
@@ -33,7 +33,7 @@
             </template>
             <div v-if="showClose" class="close">
               <svg-icon :size="16" @click="handleClose">
-                <close-icon></close-icon>
+                <close-icon />
               </svg-icon>
             </div>
           </div>
@@ -95,7 +95,9 @@ const emit = defineEmits(['update:modelValue', 'close', 'confirm', 'cancel']);
 
 const { nextZIndex } = useZIndex();
 
-const teleportDisable = computed(() => !props.appendToBody && !props.appendToRoomContainer);
+const teleportDisable = computed(
+  () => !props.appendToBody && !props.appendToRoomContainer
+);
 
 const targetName = computed(() => {
   if (props.appendToRoomContainer) {
@@ -120,15 +122,15 @@ const drawerContainerStyle = computed(() => {
 
 watch(
   () => props.modelValue,
-  (val) => {
+  val => {
     visible.value = val;
   },
   {
     immediate: true,
-  },
+  }
 );
 
-watch(visible, (val) => {
+watch(visible, val => {
   if (val) {
     overlayContainerStyle.value = { zIndex: nextZIndex() };
   }
@@ -163,9 +165,10 @@ function handleOverlayClick(event: any) {
 .overlay-container {
   position: fixed;
   top: 0;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
+
   &.overlay {
     background-color: rgba(15, 16, 20, 0.6);
   }
@@ -173,48 +176,54 @@ function handleOverlayClick(event: any) {
 
 .tui-dialog-container {
   --tui-dialog-width: 480px;
-  background-color: #ffffff;
+
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
-  border-radius: 20px;
   width: var(--tui-dialog-width, 50%);
-  box-shadow: 0px 3px 1px #e9f0fb;
+  background-color: #fff;
+  border-radius: 20px;
+  box-shadow: 0 3px 1px #e9f0fb;
+  transform: translate(-50%, -50%);
+
   .tui-dialog-header {
-    height: 64px;
     position: relative;
     display: flex;
-    padding: 0 24px;
     align-items: center;
-    box-shadow: 0px 7px 10px -5px rgba(230, 236, 245, 0.8);
+    height: 64px;
+    padding: 0 24px;
+    box-shadow: 0 7px 10px -5px rgba(230, 236, 245, 0.8);
+
     .tui-dialog-header-title {
       display: flex;
-      .tui-dialog-header-title-content{
+
+      .tui-dialog-header-title-content {
+        margin-left: 8px;
         font-size: 16px;
         font-style: normal;
         font-weight: 600;
         line-height: 24px;
         color: #0f1014;
-        margin-left: 8px;
       }
     }
+
     .close {
-      width: 32px;
-      height: 32px;
       position: absolute;
       top: 50%;
-      transform: translateY(-50%);
       right: 20px;
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
       color: #4f586b;
       cursor: pointer;
+      transform: translateY(-50%);
     }
   }
+
   .tui-dialog-content {
     flex: 1;
     padding: 20px 24px;
@@ -224,10 +233,11 @@ function handleOverlayClick(event: any) {
     line-height: 22px;
     color: #4f586b;
   }
+
   .tui-dialog-footer {
-    padding: 20px 30px;
     display: flex;
     justify-content: center;
+    padding: 20px 30px;
   }
 }
 </style>

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

@@ -50,14 +50,14 @@ type DoneFn = () => void;
 type BeforeCloseFn = (done: DoneFn) => void;
 
 interface Props {
-  title?: string,
-  modelValue: boolean,
-  modal?: boolean,
-  size?: string | number,
+  title?: string;
+  modelValue: boolean;
+  modal?: boolean;
+  size?: string | number;
   beforeClose?: BeforeCloseFn | undefined;
-  appendToBody?: boolean,
+  appendToBody?: boolean;
   appendToRoomContainer?: false;
-  closeOnClickModal?: boolean,
+  closeOnClickModal?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -77,11 +77,14 @@ const drawerRef = ref();
 const visible = ref(false);
 const drawerContainerStyle = computed(() => `width: ${addSuffix(props.size)}`);
 
-watch(() => props.modelValue, (val) => {
-  visible.value = val;
-});
+watch(
+  () => props.modelValue,
+  val => {
+    visible.value = val;
+  }
+);
 
-watch(visible, (val) => {
+watch(visible, val => {
   if (val) {
     if (props.appendToBody) {
       document.body.appendChild(drawerRef.value);
@@ -101,8 +104,8 @@ function handleClose() {
     props.beforeClose(doClose);
   } else {
     doClose();
-  };
-};
+  }
+}
 
 let mouseDownInCurrentTarget = false;
 let mouseUpInCurrentTarget = false;
@@ -125,27 +128,26 @@ function handleOverlayClick() {
     mouseUpInCurrentTarget = false;
   }
 }
-
 </script>
 
 <style lang="scss" scoped>
 .overlay-container {
   position: absolute;
   top: 0;
+  right: 0;
   bottom: 0;
   left: 0;
-  right: 0;
   z-index: 2007;
+
   &.overlay {
-    background-color: rgba(15, 16, 20, 0.60);
+    background-color: rgba(15, 16, 20, 0.6);
   }
 }
 
 .tui-theme-white .drawer-container {
   --background-color: var(--background-color-1);
   --box-shadow: 0px 2px 4px rgba(32, 77, 141, 0.03),
-    0px 6px 10px rgba(32, 77, 141, 0.06),
-    0px 3px 14px rgba(32, 77, 141, 0.05);
+    0px 6px 10px rgba(32, 77, 141, 0.06), 0px 3px 14px rgba(32, 77, 141, 0.05);
 }
 
 .tui-theme-black .drawer-container {
@@ -154,42 +156,46 @@ function handleOverlayClick() {
 }
 
 .drawer-container {
-  background-color: var(--background-color);
   position: absolute;
   right: 0;
-  height: 100%;
   display: flex;
   flex-direction: column;
+  height: 100%;
+  background-color: var(--background-color);
+  border-radius: 8px 0 0 8px;
   box-shadow: var(--box-shadow);
-  border-radius: 8px 0px 0px 8px;
+
   .drawer-header {
-    height: 64px;
-    box-shadow: 0px 1px 0px var(--stroke-color);
     position: relative;
     display: flex;
-    padding: 0 20px;
     align-items: center;
+    height: 64px;
+    padding: 0 20px;
+    box-shadow: 0 1px 0 var(--stroke-color);
+
     .drawer-header-title {
-      color: var(--font-color-1);
       font-size: 16px;
       font-style: normal;
       font-weight: 600;
       line-height: 24px;
+      color: var(--font-color-1);
     }
+
     .close {
-      width: 32px;
-      height: 32px;
       position: absolute;
       top: 50%;
-      transform: translateY(-50%);
       right: 20px;
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
       color: var(--font-color-1);
       cursor: pointer;
+      transform: translateY(-50%);
     }
   }
+
   .drawer-content {
     flex: 1;
     overflow: auto;