@tplc/wot 1.0.7 → 1.0.8

package/components/wd-calendar-view/month/month.vue

@@ -3,51 +3,23 @@
     <wd-toast selector="wd-month" />
     <view class="month">
       <view class="wd-month">
-        <view class="wd-month__title">{{ monthTitle(date) }}</view>
+        <view class="wd-month__title" v-if="showTitle">{{ monthTitle(date) }}</view>
         <view class="wd-month__days">
           <view
             v-for="(item, index) in days"
             :key="index"
-            :class="`wd-month__day ${item.disabled ? 'is-disabled' : ''} ${item.type ? itemClass(item.type, value!, type) : ''}`"
-            :style="firstDayStyle(index, item.date, firstDayOfWeek)"
+            :class="`wd-month__day ${item.disabled ? 'is-disabled' : ''} ${item.isLastRow ? 'is-last-row' : ''} ${
+              item.type ? dayTypeClass(item.type) : ''
+            }`"
+            :style="index === 0 ? firstDayStyle : ''"
             @click="handleDateClick(index)"
           >
             <view class="wd-month__day-container">
-              <view
-                class="wd-month__day-top"
-                :class="{
-                  'text-price': item.restFlag,
-                }"
-              >
-                {{ item.topInfo }}
-              </view>
-              <view
-                class="wd-month__day-text"
-                :class="{
-                  'wd-month__day-text-custom': item.text !== item.day,
-                  'text-price': item.restFlag,
-                }"
-              >
+              <view class="wd-month__day-top">{{ item.topInfo }}</view>
+              <view class="wd-month__day-text">
                 {{ item.text }}
               </view>
-              <view
-                class="wd-month__day-bottom text-[var(--font1-color)]"
-                :style="{ bottom: item.floorText ? '12px' : '6px' }"
-              >
-                <text
-                  v-if="item.bottomInfo && item.bottomInfo.includes('¥')"
-                  style="font-size: 8px"
-                >
-                  ¥
-                </text>
-                <text>{{ item.bottomInfo?.replace('¥', '') }}</text>
-              </view>
-              <view class="wd-month__day-floor text-[var(--font2-color)]">
-                <text v-if="item.floorText && item.floorText.includes('¥')" style="font-size: 8px">
-                  ¥
-                </text>
-                {{ item.floorText?.replace('¥', '') }}
-              </view>
+              <view class="wd-month__day-bottom">{{ item.bottomInfo }}</view>
             </view>
           </view>
         </view>
@@ -61,28 +33,30 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
+import wdToast from '../../wd-toast/wd-toast.vue'
+import { computed, ref, watch, type CSSProperties } from 'vue'
 import {
   compareDate,
   formatMonthTitle,
   getDateByDefaultTime,
   getDayByOffset,
   getDayOffset,
-  getFirstDayStyle,
   getItemClass,
   getMonthEndDay,
-  getWeekRange,
+  getNextDay,
+  getPrevDay,
+  getWeekRange
 } from '../utils'
 import { useToast } from '../../wd-toast'
-import { deepClone, isArray, isFunction } from '../../common/util'
+import { deepClone, isArray, isFunction, objToStyle } from '../../common/util'
 import { useTranslate } from '../../composables/useTranslate'
-import type { CalendarDayItem, CalendarDayType, CalendarType } from '../types'
+import type { CalendarDayItem, CalendarDayType } from '../types'
 import { monthProps } from './types'
 
 const props = defineProps(monthProps)
@@ -94,9 +68,15 @@ const days = ref<Array<CalendarDayItem>>([])
 
 const toast = useToast('wd-month')
 
-const itemClass = computed(() => {
-  return (monthType: CalendarDayType, value: number | (number | null)[], type: CalendarType) => {
-    return getItemClass(monthType, value, type)
+const offset = computed(() => {
+  const firstDayOfWeek = props.firstDayOfWeek >= 7 ? props.firstDayOfWeek % 7 : props.firstDayOfWeek
+  const offset = (7 + new Date(props.date).getDay() - firstDayOfWeek) % 7
+  return offset
+})
+
+const dayTypeClass = computed(() => {
+  return (monthType: CalendarDayType) => {
+    return getItemClass(monthType, props.value, props.type)
   }
 })
 
@@ -105,28 +85,30 @@ const monthTitle = computed(() => {
     return formatMonthTitle(date)
   }
 })
+
 const firstDayStyle = computed(() => {
-  return (index: number, date: number, firstDayOfWeek: number) => {
-    return getFirstDayStyle(index, date, firstDayOfWeek)
-  }
+  const dayStyle: CSSProperties = {}
+  dayStyle.marginLeft = `${(100 / 7) * offset.value}%`
+  return objToStyle(dayStyle)
 })
 
+const isLastRow = (date: number) => {
+  const currentDate = new Date(date)
+  const currentDay = currentDate.getDate()
+  const daysInMonth = getMonthEndDay(currentDate.getFullYear(), currentDate.getMonth() + 1)
+  const totalDaysShown = offset.value + daysInMonth
+  const totalRows = Math.ceil(totalDaysShown / 7)
+  return Math.ceil((offset.value + currentDay) / 7) === totalRows
+}
 watch(
-  [
-    () => props.type,
-    () => props.date,
-    () => props.value,
-    () => props.minDate,
-    () => props.maxDate,
-    () => props.formatter,
-  ],
+  [() => props.type, () => props.date, () => props.value, () => props.minDate, () => props.maxDate, () => props.formatter],
   () => {
     setDays()
   },
   {
     deep: true,
-    immediate: true,
-  },
+    immediate: true
+  }
 )
 
 function setDays() {
@@ -177,17 +159,29 @@ function getDateType(date: number): CalendarDayType {
 }
 
 function getDatesType(date: number): CalendarDayType {
-  if (!isArray(props.value)) return ''
-
+  const { value } = props
   let type: CalendarDayType = ''
-  props.value.some((item) => {
-    if (compareDate(date, item) === 0) {
-      type = 'selected'
-      return true
-    }
 
-    return false
-  })
+  if (!isArray(value)) return type
+  const isSelected = (day: number) => {
+    return value.some((item) => compareDate(day, item) === 0)
+  }
+
+  if (isSelected(date)) {
+    const prevDay = getPrevDay(date)
+    const nextDay = getNextDay(date)
+    const prevSelected = isSelected(prevDay)
+    const nextSelected = isSelected(nextDay)
+    if (prevSelected && nextSelected) {
+      type = 'multiple-middle'
+    } else if (prevSelected) {
+      type = 'end'
+    } else if (nextSelected) {
+      type = 'start'
+    } else {
+      type = 'multiple-selected'
+    }
+  }
 
   return type
 }
@@ -201,12 +195,7 @@ function getDatetimeType(date: number, value: number | number[] | null) {
     return 'start'
   } else if (endDate && compareDate(date, endDate) === 0) {
     return 'end'
-  } else if (
-    startDate &&
-    endDate &&
-    compareDate(date, startDate) === 1 &&
-    compareDate(date, endDate) === -1
-  ) {
+  } else if (startDate && endDate && compareDate(date, startDate) === 1 && compareDate(date, endDate) === -1) {
     return 'middle'
   } else {
     return ''
@@ -219,12 +208,7 @@ function getWeektimeType(date: number, value: number | number[] | null) {
     return 'start'
   } else if (endDate && compareDate(date, endDate) === 0) {
     return 'end'
-  } else if (
-    startDate &&
-    endDate &&
-    compareDate(date, startDate) === 1 &&
-    compareDate(date, endDate) === -1
-  ) {
+  } else if (startDate && endDate && compareDate(date, startDate) === 1 && compareDate(date, endDate) === -1) {
     return 'middle'
   } else {
     return ''
@@ -276,10 +260,7 @@ function handleDateClick(index: number) {
   }
 }
 function getDate(date: number, isEnd: boolean = false) {
-  date =
-    props.defaultTime && props.defaultTime.length > 0
-      ? getDateByDefaultTime(date, isEnd ? props.defaultTime[1] : props.defaultTime[0])
-      : date
+  date = props.defaultTime && props.defaultTime.length > 0 ? getDateByDefaultTime(date, isEnd ? props.defaultTime[1] : props.defaultTime[0]) : date
 
   if (date < props.minDate) return props.minDate
 
@@ -294,22 +275,18 @@ function handleDateChange(date: CalendarDayItem) {
   if (date.type !== 'selected') {
     emit('change', {
       value: getDate(date.date),
-      type: 'start',
+      type: 'start'
     })
   }
 }
 function handleDatesChange(date: CalendarDayItem) {
   if (date.disabled) return
-  const value = deepClone(isArray(props.value) ? props.value : [])
-  if (date.type !== 'selected') {
-    value.push(getDate(date.date))
-  } else {
-    value.splice(value.indexOf(date.date), 1)
-  }
-  emit('change', {
-    value,
-  })
+  const currentValue = deepClone(isArray(props.value) ? props.value : [])
+  const dateIndex = currentValue.findIndex((item) => item && compareDate(item, date.date) === 0)
+  const value = dateIndex === -1 ? [...currentValue, getDate(date.date)] : currentValue.filter((_, index) => index !== dateIndex)
+  emit('change', { value })
 }
+
 function handleDateRangeChange(date: CalendarDayItem) {
   if (date.disabled) return
 
@@ -319,12 +296,7 @@ function handleDateRangeChange(date: CalendarDayItem) {
   const compare = compareDate(date.date, startDate)
 
   // 禁止选择同个日期
-  if (
-    !props.allowSameDay &&
-    compare === 0 &&
-    (props.type === 'daterange' || props.type === 'datetimerange') &&
-    !endDate
-  ) {
+  if (!props.allowSameDay && compare === 0 && (props.type === 'daterange' || props.type === 'datetimerange') && !endDate) {
     return
   }
 
@@ -334,7 +306,7 @@ function handleDateRangeChange(date: CalendarDayItem) {
       const maxEndDate = getDayByOffset(startDate, props.maxRange - 1)
       value = [startDate, getDate(maxEndDate, true)]
       toast.show({
-        msg: props.rangePrompt || translate('rangePrompt', props.maxRange),
+        msg: props.rangePrompt || translate('rangePrompt', props.maxRange)
       })
     } else {
       value = [startDate, getDate(date.date, true)]
@@ -356,7 +328,7 @@ function handleDateRangeChange(date: CalendarDayItem) {
 
   emit('change', {
     value,
-    type: type || (value[1] ? 'end' : 'start'),
+    type: type || (value[1] ? 'end' : 'start')
   })
 }
 function handleWeekChange(date: CalendarDayItem) {
@@ -366,7 +338,7 @@ function handleWeekChange(date: CalendarDayItem) {
   if (getFormatterDate(weekStart, new Date(weekStart).getDate()).disabled) return
 
   emit('change', {
-    value: getDate(weekStart) + 24 * 60 * 60 * 1000,
+    value: getDate(weekStart) + 24 * 60 * 60 * 1000
   })
 }
 function handleWeekRangeChange(date: CalendarDayItem) {
@@ -383,35 +355,30 @@ function handleWeekRangeChange(date: CalendarDayItem) {
   if (startDate && !endDate && compare > -1) {
     if (!props.allowSameDay && compare === 0) return
 
-    value = [
-      getDate(startWeekStartDate) + 24 * 60 * 60 * 1000,
-      getDate(weekStartDate) + 24 * 60 * 60 * 1000,
-    ]
+    value = [getDate(startWeekStartDate) + 24 * 60 * 60 * 1000, getDate(weekStartDate) + 24 * 60 * 60 * 1000]
   } else {
     value = [getDate(weekStartDate) + 24 * 60 * 60 * 1000, null]
   }
 
   emit('change', {
-    value,
+    value
   })
 }
 function getFormatterDate(date: number, day: string | number, type?: CalendarDayType) {
   let dayObj: CalendarDayItem = {
-    date,
+    date: date,
     text: day,
     topInfo: '',
     bottomInfo: '',
     type,
-    day,
     disabled: compareDate(date, props.minDate) === -1 || compareDate(date, props.maxDate) === 1,
+    isLastRow: isLastRow(date)
   }
   if (props.formatter) {
     if (isFunction(props.formatter)) {
       dayObj = props.formatter(dayObj)
     } else {
-      console.error(
-        '[wot-design] error(wd-calendar-view): the formatter prop of wd-calendar-view should be a function',
-      )
+      console.error('[wot-design] error(wd-calendar-view): the formatter prop of wd-calendar-view should be a function')
     }
   }
   return dayObj

package/components/wd-calendar-view/month/types.ts

@@ -14,6 +14,7 @@ export const monthProps = {
   rangePrompt: String,
   allowSameDay: makeBooleanProp(false),
   defaultTime: {
-    type: [Array] as PropType<Array<number[]>>,
+    type: [Array] as PropType<Array<number[]>>
   },
+  showTitle: makeBooleanProp(true)
 }

package/components/wd-calendar-view/monthPanel/index.scss

@@ -8,13 +8,13 @@
     }
 
     @include e(weeks) {
-      color: $-dark-color;
       box-shadow: 0px 4px 8px 0 rgba(255, 255, 255, 0.02);
+      color: $-dark-color;
     }
 
     @include e(time-label) {
       color: $-dark-color;
-      &::after {
+      &::after{
         background: $-dark-background4;
       }
     }
@@ -26,20 +26,20 @@
 
   @include e(title) {
     padding: 5px 0;
-    padding: $-calendar-panel-padding;
+    text-align: center;
     font-size: $-calendar-panel-title-fs;
     color: $-calendar-panel-title-color;
-    text-align: center;
+    padding: $-calendar-panel-padding;
   }
 
   @include e(weeks) {
     display: flex;
     height: $-calendar-week-height;
-    padding: $-calendar-panel-padding;
-    font-size: $-calendar-week-fs;
     line-height: $-calendar-week-height;
-    color: $-calendar-week-color;
     box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
+    color: $-calendar-week-color;
+    font-size: $-calendar-week-fs;
+    padding: $-calendar-panel-padding;
   }
 
   @include e(week) {
@@ -48,8 +48,8 @@
   }
 
   @include e(container) {
-    box-sizing: border-box;
     padding: $-calendar-panel-padding;
+    box-sizing: border-box;
   }
 
   @include e(time) {
@@ -61,20 +61,20 @@
     position: relative;
     flex: 1;
     font-size: $-picker-column-fs;
+    text-align: center;
     line-height: 125px;
     color: $-picker-column-color;
-    text-align: center;
 
     &::after {
       position: absolute;
+      content: '';
+      height: 35px;
       top: 50%;
-      right: 0;
       left: 0;
-      z-index: 0;
-      height: 35px;
-      content: '';
-      background: $-picker-column-select-bg;
+      right: 0;
       transform: translateY(-50%);
+      background: $-picker-column-select-bg;
+      z-index: 0;
     }
   }
 
@@ -86,4 +86,4 @@
   @include e(time-picker) {
     flex: 3;
   }
-}
+}