@tplc/wot 1.0.12 → 1.0.13

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

@@ -4,7 +4,9 @@
       {{ title }}
     </view>
     <view class="wd-month-panel__weeks">
-      <view v-for="item in 7" :key="item" class="wd-month-panel__week">{{ weekLabel(item + firstDayOfWeek) }}</view>
+      <view v-for="item in 7" :key="item" class="wd-month-panel__week">
+        {{ weekLabel(item + firstDayOfWeek) }}
+      </view>
     </view>
     <scroll-view
       :class="`wd-month-panel__container ${!!timeType ? 'wd-month-panel__container--time' : ''}`"
@@ -26,14 +28,15 @@
           :range-prompt="rangePrompt"
           :allow-same-day="allowSameDay"
           :default-time="defaultTime"
-          :showTitle="index !== 0"
           @change="handleDateChange"
         />
       </view>
     </scroll-view>
     <view v-if="timeType" class="wd-month-panel__time">
       <view v-if="type === 'datetimerange'" class="wd-month-panel__time-label">
-        <view class="wd-month-panel__time-text">{{ timeType === 'start' ? translate('startTime') : translate('endTime') }}</view>
+        <view class="wd-month-panel__time-text">
+          {{ timeType === 'start' ? translate('startTime') : translate('endTime') }}
+        </view>
       </view>
       <view class="wd-month-panel__time-picker">
         <wd-picker-view
@@ -56,18 +59,29 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script lang="ts" setup>
-import wdPickerView from '../../wd-picker-view/wd-picker-view.vue'
 import { computed, ref, watch, onMounted } from 'vue'
-import { debounce, isArray, isEqual, isNumber, pause } from '../../common/util'
-import { compareMonth, formatMonthTitle, getMonthEndDay, getMonths, getTimeData, getWeekLabel } from '../utils'
+import { debounce, isArray, isEqual, isNumber, requestAnimationFrame } from '../../common/util'
+import {
+  compareMonth,
+  formatMonthTitle,
+  getMonthEndDay,
+  getMonths,
+  getTimeData,
+  getWeekLabel,
+} from '../utils'
 import Month from '../month/month.vue'
-import { monthPanelProps, type MonthInfo, type MonthPanelTimeType, type MonthPanelExpose } from './types'
+import {
+  monthPanelProps,
+  type MonthInfo,
+  type MonthPanelTimeType,
+  type MonthPanelExpose,
+} from './types'
 import { useTranslate } from '../../composables/useTranslate'
 import type { CalendarItem } from '../types'
 
@@ -85,7 +99,7 @@ const innerValue = ref<string | number | (number | null)[]>('') // 内部保存
 
 const handleChange = debounce((value) => {
   emit('change', {
-    value
+    value,
   })
 }, 50)
 
@@ -132,19 +146,20 @@ const weekLabel = computed(() => {
 
 // 滚动区域的高度
 const scrollHeight = computed(() => {
-  const scrollHeight: number = timeType.value ? props.panelHeight - 125 : props.panelHeight
+  const scrollHeight: number = timeType.value
+    ? (props.panelHeight || 378) - 125
+    : props.panelHeight || 378
   return scrollHeight
 })
 
 // 月份日期和月份高度
 const months = computed<MonthInfo[]>(() => {
-  return getMonths(props.minDate, props.maxDate).map((month, index) => {
+  return getMonths(props.minDate, props.maxDate).map((month) => {
     const offset = (7 + new Date(month).getDay() - props.firstDayOfWeek) % 7
     const totalDay = getMonthEndDay(new Date(month).getFullYear(), new Date(month).getMonth() + 1)
-    const rows = Math.ceil((offset + totalDay) / 7)
     return {
-      height: rows * 64 + (rows - 1) * 4 + (index === 0 ? 0 : 45), // 每行64px高度,除最后一行外每行加4px margin,加上标题45px
-      date: month
+      height: (offset + totalDay > 35 ? 64 * 6 : 64 * 5) + 45,
+      date: month,
     }
   })
 })
@@ -154,15 +169,19 @@ watch(
   (val) => {
     if (
       (val === 'datetime' && props.value) ||
-      (val === 'datetimerange' && isArray(props.value) && props.value && props.value.length > 0 && props.value[0])
+      (val === 'datetimerange' &&
+        isArray(props.value) &&
+        props.value &&
+        props.value.length > 0 &&
+        props.value[0])
     ) {
       setTime(props.value, 'start')
     }
   },
   {
     deep: true,
-    immediate: true
-  }
+    immediate: true,
+  },
 )
 
 watch(
@@ -170,14 +189,17 @@ watch(
   (val) => {
     if (isEqual(val, innerValue.value)) return
 
-    if ((props.type === 'datetime' && val) || (props.type === 'datetimerange' && val && isArray(val) && val.length > 0 && val[0])) {
+    if (
+      (props.type === 'datetime' && val) ||
+      (props.type === 'datetimerange' && val && isArray(val) && val.length > 0 && val[0])
+    ) {
       setTime(val, 'start')
     }
   },
   {
     deep: true,
-    immediate: true
-  }
+    immediate: true,
+  },
 )
 
 onMounted(() => {
@@ -187,45 +209,31 @@ onMounted(() => {
 /**
  * 使当前日期或者选中日期滚动到可视区域
  */
-async function scrollIntoView() {
-  // 等待渲染完毕
-  await pause()
-  let activeDate: number | null = 0
-  if (isArray(props.value)) {
-    // 对数组按时间排序,取第一个值
-    const sortedValue = [...props.value].sort((a, b) => (a || 0) - (b || 0))
-    activeDate = sortedValue[0]
-  } else if (isNumber(props.value)) {
-    activeDate = props.value
-  }
+function scrollIntoView() {
+  requestAnimationFrame(() => {
+    let activeDate: number | null = 0
+    if (isArray(props.value)) {
+      activeDate = props.value![0]
+    } else if (isNumber(props.value)) {
+      activeDate = props.value
+    }
 
-  if (!activeDate) {
-    activeDate = Date.now()
-  }
+    if (!activeDate) {
+      activeDate = Date.now()
+    }
 
-  let top: number = 0
-  let activeMonthIndex = -1
-  for (let index = 0; index < months.value.length; index++) {
-    if (compareMonth(months.value[index].date, activeDate) === 0) {
-      activeMonthIndex = index
-      // 找到选中月份后,计算选中日期在月份中的位置
-      const date = new Date(activeDate)
-      const day = date.getDate()
-      const firstDay = new Date(date.getFullYear(), date.getMonth(), 1)
-      const offset = (7 + firstDay.getDay() - props.firstDayOfWeek) % 7
-      const row = Math.floor((offset + day - 1) / 7)
-      // 每行高度64px,每行加4px margin
-      top += row * 64 + row * 4
-      break
+    let top: number = 0
+    for (let index = 0; index < months.value.length; index++) {
+      if (compareMonth(months.value[index].date, activeDate) === 0) {
+        break
+      }
+      top += months.value[index] ? Number(months.value[index].height) : 0
     }
-    top += months.value[index] ? Number(months.value[index].height) : 0
-  }
-  scrollTop.value = 0
-  if (top > 0) {
-    await pause()
-    // 如果不是第一个月才加45
-    scrollTop.value = top + (activeMonthIndex > 0 ? 45 : 0)
-  }
+    scrollTop.value = 0
+    requestAnimationFrame(() => {
+      scrollTop.value = top
+    })
+  })
 }
 /**
  * 获取时间 picker 的数据
@@ -239,7 +247,7 @@ function getTime(value: number | (number | null)[], type?: string) {
       minDate: props.minDate,
       maxDate: props.maxDate,
       filter: props.timeFilter,
-      isHideSecond: props.hideSecond
+      isHideSecond: props.hideSecond,
     })
   } else {
     if (type === 'start' && isArray(props.value)) {
@@ -248,7 +256,7 @@ function getTime(value: number | (number | null)[], type?: string) {
         minDate: props.minDate,
         maxDate: props.value[1] ? props.value[1] : props.maxDate,
         filter: props.timeFilter,
-        isHideSecond: props.hideSecond
+        isHideSecond: props.hideSecond,
       })
     } else {
       return getTimeData({
@@ -256,7 +264,7 @@ function getTime(value: number | (number | null)[], type?: string) {
         minDate: (value as Array<number>)[0],
         maxDate: props.maxDate,
         filter: props.timeFilter,
-        isHideSecond: props.hideSecond
+        isHideSecond: props.hideSecond,
       })
     }
   }
@@ -291,7 +299,13 @@ function setTime(value: number | (number | null)[], type?: MonthPanelTimeType) {
   timeType.value = type || ''
   timeValue.value = getTimeValue(value, type || '')
 }
-function handleDateChange({ value, type }: { value: number | (number | null)[]; type?: MonthPanelTimeType }) {
+function handleDateChange({
+  value,
+  type,
+}: {
+  value: number | (number | null)[]
+  type?: MonthPanelTimeType
+}) {
   if (!isEqual(value, props.value)) {
     // 内部保存一个值，用于判断新老值，避免监听器触发
     innerValue.value = value
@@ -357,7 +371,7 @@ function doSetSubtitle(scrollTop: number) {
   let height: number = 0 // 月份高度和
   for (let index = 0; index < months.value.length; index++) {
     height = height + months.value[index].height
-    if (scrollTop < height) {
+    if (scrollTop < height + 45) {
       scrollIndex.value = index
       return
     }
@@ -365,10 +379,10 @@ function doSetSubtitle(scrollTop: number) {
 }
 
 defineExpose<MonthPanelExpose>({
-  scrollIntoView
+  scrollIntoView,
 })
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import './index';
 </style>

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

@@ -1,11 +1,7 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props'
+import { makeBooleanProp, makeRequiredProp } from '../../common/props'
 import type { CalendarFormatter, CalendarTimeFilter, CalendarType } from '../types'
 
-const now = new Date()
-const defaultMinDate = new Date(now.getFullYear(), now.getMonth() - 6, now.getDate()).getTime()
-const defaultMaxDate = new Date(now.getFullYear(), now.getMonth() + 6, now.getDate(), 23, 59, 59).getTime()
-
 /**
  * 月份信息
  */
@@ -15,71 +11,27 @@ export interface MonthInfo {
 }
 
 export const monthPanelProps = {
-  /**
-   * 日期类型
-   */
-  type: makeStringProp<CalendarType>('date'),
-  /**
-   * 选中值，为 13 位时间戳或时间戳数组
-   */
-  value: {
-    type: [Number, Array, null] as PropType<number | (number | null)[] | null>,
-    default: null
-  },
-  /**
-   * 最小日期，为 13 位时间戳
-   */
-  minDate: makeNumberProp(defaultMinDate),
-  /**
-   * 最大日期，为 13 位时间戳
-   */
-  maxDate: makeNumberProp(defaultMaxDate),
-  /**
-   * 周起始天
-   */
-  firstDayOfWeek: makeNumberProp(0),
-  /**
-   * 日期格式化函数
-   */
+  type: makeRequiredProp(String as PropType<CalendarType>),
+  value: makeRequiredProp([Number, Array, null] as PropType<number | (number | null)[] | null>),
+  minDate: makeRequiredProp(Number),
+  maxDate: makeRequiredProp(Number),
+  firstDayOfWeek: makeRequiredProp(Number),
   formatter: Function as PropType<CalendarFormatter>,
-  /**
-   * type 为范围选择时有效，最大日期范围
-   */
   maxRange: Number,
-  /**
-   * type 为范围选择时有效，选择超出最大日期范围时的错误提示文案
-   */
   rangePrompt: String,
-  /**
-   * type 为范围选择时有效，是否允许选择同一天
-   */
   allowSameDay: makeBooleanProp(false),
-  /**
-   * 是否展示面板标题，自动计算当前滚动的日期月份
-   */
   showPanelTitle: makeBooleanProp(false),
-  /**
-   * 选中日期所使用的当日内具体时刻
-   */
   defaultTime: {
-    type: [Array] as PropType<Array<number[]>>
+    type: [Array] as PropType<Array<number[]>>,
   },
-  /**
-   * 可滚动面板的高度
-   */
-  panelHeight: makeNumberProp(378),
-  /**
-   * type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
-   */
+  panelHeight: makeRequiredProp(Number),
+  // type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
   timeFilter: Function as PropType<CalendarTimeFilter>,
-  /**
-   * type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改
-   */
   hideSecond: makeBooleanProp(false),
   /**
    * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
    */
-  immediateChange: makeBooleanProp(false)
+  immediateChange: makeBooleanProp(false),
 }
 
 export type MonthPanelProps = ExtractPropTypes<typeof monthPanelProps>

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

@@ -1,11 +1,22 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+import {
+  baseProps,
+  makeBooleanProp,
+  makeNumberProp,
+  makeRequiredProp,
+  makeStringProp,
+} from '../common/props'
 
-const now = new Date()
-const defaultMinDate = new Date(now.getFullYear(), now.getMonth() - 6, now.getDate()).getTime()
-const defaultMaxDate = new Date(now.getFullYear(), now.getMonth() + 6, now.getDate(), 23, 59, 59).getTime()
-
-export type CalendarType = 'date' | 'dates' | 'datetime' | 'week' | 'month' | 'daterange' | 'datetimerange' | 'weekrange' | 'monthrange'
+export type CalendarType =
+  | 'date'
+  | 'dates'
+  | 'datetime'
+  | 'week'
+  | 'month'
+  | 'daterange'
+  | 'datetimerange'
+  | 'weekrange'
+  | 'monthrange'
 
 export const calendarViewProps = {
   ...baseProps,
@@ -20,11 +31,22 @@ export const calendarViewProps = {
   /**
    * 最小日期，为 13 位时间戳
    */
-  minDate: makeNumberProp(defaultMinDate),
+  minDate: makeNumberProp(
+    new Date(new Date().getFullYear(), new Date().getMonth() - 6, new Date().getDate()).getTime(),
+  ),
   /**
    * 最大日期，为 13 位时间戳
    */
-  maxDate: makeNumberProp(defaultMaxDate),
+  maxDate: makeNumberProp(
+    new Date(
+      new Date().getFullYear(),
+      new Date().getMonth() + 6,
+      new Date().getDate(),
+      23,
+      59,
+      59,
+    ).getTime(),
+  ),
   /**
    * 周起始天
    */
@@ -52,7 +74,7 @@ export const calendarViewProps = {
    */
   defaultTime: {
     type: [String, Array] as PropType<string | string[]>,
-    default: '00:00:00'
+    default: '00:00:00',
   },
   /**
    * 可滚动面板的高度
@@ -69,21 +91,23 @@ export const calendarViewProps = {
   /**
    * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
    */
-  immediateChange: makeBooleanProp(false)
+  immediateChange: makeBooleanProp(false),
 }
 
 export type CalendarViewProps = ExtractPropTypes<typeof calendarViewProps>
 
-export type CalendarDayType = '' | 'start' | 'middle' | 'end' | 'selected' | 'same' | 'current' | 'multiple-middle' | 'multiple-selected'
+export type CalendarDayType = '' | 'start' | 'middle' | 'end' | 'selected' | 'same' | 'current'
 
 export type CalendarDayItem = {
   date: number
   text?: number | string
+  restFlag?: boolean
   topInfo?: string
   bottomInfo?: string
+  floorText?: string
   type?: CalendarDayType
   disabled?: boolean
-  isLastRow?: boolean
+  day?: number | string
 }
 
 export type CalendarFormatter = (day: CalendarDayItem) => CalendarDayItem

package/components/wd-calendar-view/utils.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import dayjs from '../../dayjs'
+import { dayjs } from '../common/dayjs'
 import { isArray, isFunction, padZero } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 import type { CalendarDayType, CalendarItem, CalendarTimeFilter, CalendarType } from './types'
@@ -13,7 +13,7 @@ const weeks = computed(() => {
     translate('weeks.wed'),
     translate('weeks.thu'),
     translate('weeks.fri'),
-    translate('weeks.sat')
+    translate('weeks.sat'),
   ]
 })
 
@@ -116,6 +116,24 @@ export function getWeekLabel(index: number) {
   return weeks.value[index]
 }
 
+/**
+ * 获取一个月第一天的样式
+ * @param {number} index
+ * @param {timestamp} date
+ * @param {number} firstDayOfWeek
+ */
+export function getFirstDayStyle(index: number, date: number, firstDayOfWeek: number) {
+  if (firstDayOfWeek >= 7) {
+    firstDayOfWeek = firstDayOfWeek % 7
+  }
+
+  if (index !== 0) return ''
+
+  const offset = (7 + new Date(date).getDay() - firstDayOfWeek) % 7
+
+  return 'margin-left: ' + (100 / 7) * offset + '%'
+}
+
 /**
  * 格式化年份
  * @param {timestamp} date
@@ -204,9 +222,6 @@ export function getDayByOffset(date: number, offset: number) {
   return dateValue.getTime()
 }
 
-export const getPrevDay = (date: number) => getDayByOffset(date, -1)
-export const getNextDay = (date: number) => getDayByOffset(date, 1)
-
 /**
  * 获取月份偏移量
  * @param {timestamp} date1
@@ -306,7 +321,7 @@ export function getTimeData({
   minDate,
   maxDate,
   isHideSecond,
-  filter
+  filter,
 }: {
   date: number
   minDate: number
@@ -357,25 +372,25 @@ export function getTimeData({
     return {
       label: translate('hour', padZero(index)),
       value: index,
-      disabled: index < minHour || index > maxHour
+      disabled: index < minHour || index > maxHour,
     }
   })
   let minutes = times(60, (index) => {
     return {
       label: translate('minute', padZero(index)),
       value: index,
-      disabled: index < minMinute || index > maxMinute
+      disabled: index < minMinute || index > maxMinute,
     }
   })
   let seconds: CalendarItem[] = []
   if (filter && isFunction(filter)) {
     hours = filter({
       type: 'hour',
-      values: hours
+      values: hours,
     })
     minutes = filter({
       type: 'minute',
-      values: minutes
+      values: minutes,
     })
   }
 
@@ -384,13 +399,13 @@ export function getTimeData({
       return {
         label: translate('second', padZero(index)),
         value: index,
-        disabled: index < minSecond || index > maxSecond
+        disabled: index < minSecond || index > maxSecond,
       }
     })
     if (filter && isFunction(filter)) {
       seconds = filter({
         type: 'second',
-        values: seconds
+        values: seconds,
       })
     }
   }
@@ -413,10 +428,17 @@ export function getWeekNumber(date: number | Date) {
   const week = new Date(date.getFullYear(), 0, 4)
   // Adjust to Thursday in week 1 and count number of weeks from date to week 1.
   // Rounding should be fine for Daylight Saving Time. Its shift should never be more than 12 hours.
-  return 1 + Math.round(((date.getTime() - week.getTime()) / 86400000 - 3 + ((week.getDay() + 6) % 7)) / 7)
+  return (
+    1 +
+    Math.round(((date.getTime() - week.getTime()) / 86400000 - 3 + ((week.getDay() + 6) % 7)) / 7)
+  )
 }
 
-export function getItemClass(monthType: CalendarDayType, value: number | null | (number | null)[], type: CalendarType) {
+export function getItemClass(
+  monthType: CalendarDayType,
+  value: number | (number | null)[],
+  type: CalendarType,
+) {
   const classList = ['is-' + monthType]
 
   if (type.indexOf('range') > -1 && isArray(value)) {

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

@@ -46,8 +46,8 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
@@ -72,8 +72,8 @@ watch(
   },
   {
     deep: true,
-    immediate: true
-  }
+    immediate: true,
+  },
 )
 
 /**
@@ -91,7 +91,7 @@ function getPanel() {
 function handleChange({ value }: { value: number | number[] | null }) {
   emit('update:modelValue', value)
   emit('change', {
-    value
+    value,
   })
 }
 function handlePickStart() {
@@ -102,10 +102,10 @@ function handlePickEnd() {
 }
 
 defineExpose<CalendarViewExpose>({
-  scrollIntoView
+  scrollIntoView,
 })
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import './index';
 </style>