@tplc/wot 1.0.12 → 1.0.13

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

@@ -3,23 +3,51 @@
     <wd-toast selector="wd-month" />
     <view class="month">
       <view class="wd-month">
-        <view class="wd-month__title" v-if="showTitle">{{ monthTitle(date) }}</view>
+        <view class="wd-month__title">{{ 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.isLastRow ? 'is-last-row' : ''} ${
-              item.type ? dayTypeClass(item.type) : ''
-            }`"
-            :style="index === 0 ? firstDayStyle : ''"
+            :class="`wd-month__day ${item.disabled ? 'is-disabled' : ''} ${item.type ? itemClass(item.type, value!, type) : ''}`"
+            :style="firstDayStyle(index, item.date, firstDayOfWeek)"
             @click="handleDateClick(index)"
           >
             <view class="wd-month__day-container">
-              <view class="wd-month__day-top">{{ item.topInfo }}</view>
-              <view class="wd-month__day-text">
+              <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,
+                }"
+              >
                 {{ item.text }}
               </view>
-              <view class="wd-month__day-bottom">{{ item.bottomInfo }}</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>
           </view>
         </view>
@@ -33,30 +61,28 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script lang="ts" setup>
-import wdToast from '../../wd-toast/wd-toast.vue'
-import { computed, ref, watch, type CSSProperties } from 'vue'
+import { computed, ref, watch } from 'vue'
 import {
   compareDate,
   formatMonthTitle,
   getDateByDefaultTime,
   getDayByOffset,
   getDayOffset,
+  getFirstDayStyle,
   getItemClass,
   getMonthEndDay,
-  getNextDay,
-  getPrevDay,
-  getWeekRange
+  getWeekRange,
 } from '../utils'
 import { useToast } from '../../wd-toast'
-import { deepClone, isArray, isFunction, objToStyle } from '../../common/util'
+import { deepClone, isArray, isFunction } from '../../common/util'
 import { useTranslate } from '../../composables/useTranslate'
-import type { CalendarDayItem, CalendarDayType } from '../types'
+import type { CalendarDayItem, CalendarDayType, CalendarType } from '../types'
 import { monthProps } from './types'
 
 const props = defineProps(monthProps)
@@ -68,15 +94,9 @@ const days = ref<Array<CalendarDayItem>>([])
 
 const toast = useToast('wd-month')
 
-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)
+const itemClass = computed(() => {
+  return (monthType: CalendarDayType, value: number | (number | null)[], type: CalendarType) => {
+    return getItemClass(monthType, value, type)
   }
 })
 
@@ -85,30 +105,28 @@ const monthTitle = computed(() => {
     return formatMonthTitle(date)
   }
 })
-
 const firstDayStyle = computed(() => {
-  const dayStyle: CSSProperties = {}
-  dayStyle.marginLeft = `${(100 / 7) * offset.value}%`
-  return objToStyle(dayStyle)
+  return (index: number, date: number, firstDayOfWeek: number) => {
+    return getFirstDayStyle(index, date, firstDayOfWeek)
+  }
 })
 
-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() {
@@ -159,29 +177,17 @@ function getDateType(date: number): CalendarDayType {
 }
 
 function getDatesType(date: number): CalendarDayType {
-  const { value } = props
-  let type: CalendarDayType = ''
-
-  if (!isArray(value)) return type
-  const isSelected = (day: number) => {
-    return value.some((item) => compareDate(day, item) === 0)
-  }
+  if (!isArray(props.value)) return ''
 
-  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'
+  let type: CalendarDayType = ''
+  props.value.some((item) => {
+    if (compareDate(date, item) === 0) {
+      type = 'selected'
+      return true
     }
-  }
+
+    return false
+  })
 
   return type
 }
@@ -195,7 +201,12 @@ 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 ''
@@ -208,7 +219,12 @@ 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 ''
@@ -260,7 +276,10 @@ 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
 
@@ -275,18 +294,22 @@ 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 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 })
+  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,
+  })
 }
-
 function handleDateRangeChange(date: CalendarDayItem) {
   if (date.disabled) return
 
@@ -296,7 +319,12 @@ 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
   }
 
@@ -306,7 +334,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)]
@@ -328,7 +356,7 @@ function handleDateRangeChange(date: CalendarDayItem) {
 
   emit('change', {
     value,
-    type: type || (value[1] ? 'end' : 'start')
+    type: type || (value[1] ? 'end' : 'start'),
   })
 }
 function handleWeekChange(date: CalendarDayItem) {
@@ -338,7 +366,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) {
@@ -355,30 +383,35 @@ 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,7 +14,6 @@ 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) {
-      box-shadow: 0px 4px 8px 0 rgba(255, 255, 255, 0.02);
       color: $-dark-color;
+      box-shadow: 0px 4px 8px 0 rgba(255, 255, 255, 0.02);
     }
 
     @include e(time-label) {
       color: $-dark-color;
-      &::after{
+      &::after {
         background: $-dark-background4;
       }
     }
@@ -26,20 +26,20 @@
 
   @include e(title) {
     padding: 5px 0;
-    text-align: center;
+    padding: $-calendar-panel-padding;
     font-size: $-calendar-panel-title-fs;
     color: $-calendar-panel-title-color;
-    padding: $-calendar-panel-padding;
+    text-align: center;
   }
 
   @include e(weeks) {
     display: flex;
     height: $-calendar-week-height;
+    padding: $-calendar-panel-padding;
+    font-size: $-calendar-week-fs;
     line-height: $-calendar-week-height;
-    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;
+    box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
   }
 
   @include e(week) {
@@ -48,8 +48,8 @@
   }
 
   @include e(container) {
-    padding: $-calendar-panel-padding;
     box-sizing: border-box;
+    padding: $-calendar-panel-padding;
   }
 
   @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%;
-      left: 0;
       right: 0;
-      transform: translateY(-50%);
-      background: $-picker-column-select-bg;
+      left: 0;
       z-index: 0;
+      height: 35px;
+      content: '';
+      background: $-picker-column-select-bg;
+      transform: translateY(-50%);
     }
   }
 
@@ -86,4 +86,4 @@
   @include e(time-picker) {
     flex: 3;
   }
-}
+}