@tencentcloud/roomkit-electron-vue3 2.4.2 → 2.6.0

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

@@ -0,0 +1,316 @@
+<template>
+  <div ref="pickerRef" class="container">
+    <TuiInput
+      :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>
+        <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;
+  width: 100%;
+  min-width: 222px;
+  padding: 5px;
+  font-size: 12px;
+  color: #000;
+  background-color: #fff;
+  border: 1px solid var(--stroke-color);
+  border-radius: 4px;
+}
+
+.picker-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px;
+  font-size: 14px;
+  line-height: normal;
+
+  .current-time {
+    width: 80%;
+    font-weight: bold;
+    color: black;
+  }
+}
+
+.arrow {
+  display: inline-block;
+  padding: 0 5px;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+}
+
+.arrow:hover {
+  color: #409eff;
+}
+
+.picker-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.weekday {
+  padding: 5px;
+  line-height: initial;
+  text-align: center;
+  background-color: #fff;
+}
+
+.picker-body {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.day {
+  position: relative;
+  padding: 5px;
+  line-height: initial;
+  text-align: center;
+  cursor: pointer;
+  background-color: #fff;
+}
+
+.day:hover {
+  background-color: #ecf5ff;
+}
+
+.day.selected {
+  color: white;
+  background-color: #409eff;
+}
+
+.day.today .today-dot {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  background-color: #409eff;
+  border-radius: 50%;
+  transform: translateX(-50%);
+}
+
+.day.past {
+  color: #ccc;
+  pointer-events: none;
+}
+</style>

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

@@ -25,14 +25,15 @@
         <div class="tui-dialog-container" :style="drawerContainerStyle">
           <div class="tui-dialog-header">
             <div class="tui-dialog-header-title">
-              {{ title }}
+              <svg-icon :icon="titleIcon" />
+              <div class="tui-dialog-header-title-content">{{ title }}</div>
             </div>
             <template v-if="$slots.title">
               <slot name="title"></slot>
             </template>
             <div v-if="showClose" class="close">
               <svg-icon :size="16" @click="handleClose">
-                <close-icon></close-icon>
+                <close-icon />
               </svg-icon>
             </div>
           </div>
@@ -72,6 +73,7 @@ interface Props {
   appendToRoomContainer?: boolean;
   confirmButton?: string;
   cancelButton?: string;
+  titleIcon?: any;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -86,13 +88,16 @@ const props = withDefaults(defineProps<Props>(), {
   appendToRoomContainer: false,
   confirmButton: '',
   cancelButton: '',
+  titleIcon: null,
 });
 
 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) {
@@ -117,12 +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() };
   }
@@ -157,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);
   }
@@ -167,44 +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 {
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 600;
-      line-height: 24px;
-      color: #0f1014;
+      display: flex;
+
+      .tui-dialog-header-title-content {
+        margin-left: 8px;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 24px;
+        color: #0f1014;
+      }
     }
+
     .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;
@@ -214,10 +233,11 @@ function handleOverlayClick(event: any) {
     line-height: 22px;
     color: #4f586b;
   }
+
   .tui-dialog-footer {
-    padding: 20px 30px;
     display: flex;
-    justify-content: flex-end;
+    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;