@tplc/wot 1.0.6 → 1.0.8

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

@@ -4,9 +4,7 @@
       {{ 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' : ''}`"
@@ -28,15 +26,14 @@
           :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
@@ -59,29 +56,18 @@ 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, requestAnimationFrame } from '../../common/util'
-import {
-  compareMonth,
-  formatMonthTitle,
-  getMonthEndDay,
-  getMonths,
-  getTimeData,
-  getWeekLabel,
-} from '../utils'
+import { debounce, isArray, isEqual, isNumber, pause } 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'
 
@@ -99,7 +85,7 @@ const innerValue = ref<string | number | (number | null)[]>('') // 内部保存
 
 const handleChange = debounce((value) => {
   emit('change', {
-    value,
+    value
   })
 }, 50)
 
@@ -146,20 +132,19 @@ const weekLabel = computed(() => {
 
 // 滚动区域的高度
 const scrollHeight = computed(() => {
-  const scrollHeight: number = timeType.value
-    ? (props.panelHeight || 378) - 125
-    : props.panelHeight || 378
+  const scrollHeight: number = timeType.value ? props.panelHeight - 125 : props.panelHeight
   return scrollHeight
 })
 
 // 月份日期和月份高度
 const months = computed<MonthInfo[]>(() => {
-  return getMonths(props.minDate, props.maxDate).map((month) => {
+  return getMonths(props.minDate, props.maxDate).map((month, index) => {
     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: (offset + totalDay > 35 ? 64 * 6 : 64 * 5) + 45,
-      date: month,
+      height: rows * 64 + (rows - 1) * 4 + (index === 0 ? 0 : 45), // 每行64px高度,除最后一行外每行加4px margin,加上标题45px
+      date: month
     }
   })
 })
@@ -169,19 +154,15 @@ 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(
@@ -189,17 +170,14 @@ 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(() => {
@@ -209,31 +187,45 @@ onMounted(() => {
 /**
  * 使当前日期或者选中日期滚动到可视区域
  */
-function scrollIntoView() {
-  requestAnimationFrame(() => {
-    let activeDate: number | null = 0
-    if (isArray(props.value)) {
-      activeDate = props.value![0]
-    } else if (isNumber(props.value)) {
-      activeDate = props.value
-    }
+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
+  }
 
-    if (!activeDate) {
-      activeDate = Date.now()
-    }
+  if (!activeDate) {
+    activeDate = Date.now()
+  }
 
-    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
+  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
     }
-    scrollTop.value = 0
-    requestAnimationFrame(() => {
-      scrollTop.value = top
-    })
-  })
+    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)
+  }
 }
 /**
  * 获取时间 picker 的数据
@@ -247,7 +239,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)) {
@@ -256,7 +248,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({
@@ -264,7 +256,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
       })
     }
   }
@@ -299,13 +291,7 @@ 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
@@ -371,7 +357,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 + 45) {
+    if (scrollTop < height) {
       scrollIndex.value = index
       return
     }
@@ -379,10 +365,10 @@ function doSetSubtitle(scrollTop: number) {
 }
 
 defineExpose<MonthPanelExpose>({
-  scrollIntoView,
+  scrollIntoView
 })
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

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

@@ -1,7 +1,11 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { makeBooleanProp, makeRequiredProp } from '../../common/props'
+import { makeBooleanProp, makeNumberProp, makeStringProp } 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()
+
 /**
  * 月份信息
  */
@@ -11,27 +15,71 @@ export interface MonthInfo {
 }
 
 export const monthPanelProps = {
-  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),
+  /**
+   * 日期类型
+   */
+  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),
+  /**
+   * 日期格式化函数
+   */
   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: makeRequiredProp(Number),
-  // type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
+  /**
+   * 可滚动面板的高度
+   */
+  panelHeight: makeNumberProp(378),
+  /**
+   * 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,22 +1,11 @@
 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'
 
-export type CalendarType =
-  | 'date'
-  | 'dates'
-  | 'datetime'
-  | 'week'
-  | 'month'
-  | 'daterange'
-  | 'datetimerange'
-  | 'weekrange'
-  | 'monthrange'
+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 const calendarViewProps = {
   ...baseProps,
@@ -31,22 +20,11 @@ export const calendarViewProps = {
   /**
    * 最小日期，为 13 位时间戳
    */
-  minDate: makeNumberProp(
-    new Date(new Date().getFullYear(), new Date().getMonth() - 6, new Date().getDate()).getTime(),
-  ),
+  minDate: makeNumberProp(defaultMinDate),
   /**
    * 最大日期，为 13 位时间戳
    */
-  maxDate: makeNumberProp(
-    new Date(
-      new Date().getFullYear(),
-      new Date().getMonth() + 6,
-      new Date().getDate(),
-      23,
-      59,
-      59,
-    ).getTime(),
-  ),
+  maxDate: makeNumberProp(defaultMaxDate),
   /**
    * 周起始天
    */
@@ -74,7 +52,7 @@ export const calendarViewProps = {
    */
   defaultTime: {
     type: [String, Array] as PropType<string | string[]>,
-    default: '00:00:00',
+    default: '00:00:00'
   },
   /**
    * 可滚动面板的高度
@@ -91,23 +69,21 @@ 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'
+export type CalendarDayType = '' | 'start' | 'middle' | 'end' | 'selected' | 'same' | 'current' | 'multiple-middle' | 'multiple-selected'
 
 export type CalendarDayItem = {
   date: number
   text?: number | string
-  restFlag?: boolean
   topInfo?: string
   bottomInfo?: string
-  floorText?: string
   type?: CalendarDayType
   disabled?: boolean
-  day?: number | string
+  isLastRow?: boolean
 }
 
 export type CalendarFormatter = (day: CalendarDayItem) => CalendarDayItem

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

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { dayjs } from '../common/dayjs'
+import dayjs from '../../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,24 +116,6 @@ 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
@@ -222,6 +204,9 @@ 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
@@ -321,7 +306,7 @@ export function getTimeData({
   minDate,
   maxDate,
   isHideSecond,
-  filter,
+  filter
 }: {
   date: number
   minDate: number
@@ -372,25 +357,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
     })
   }
 
@@ -399,13 +384,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
       })
     }
   }
@@ -428,17 +413,10 @@ 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 | (number | null)[],
-  type: CalendarType,
-) {
+export function getItemClass(monthType: CalendarDayType, value: number | null | (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';
+@import './index.scss';
 </style>