@wot-ui/ui 1.0.0 → 2.0.0-alpha.3

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

@@ -0,0 +1,166 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../../common/props'
+import { type DatetimePickerViewFormatter, type DatetimePickerViewFilter } from '../wd-datetime-picker-view/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()
+
+export type CalendarType = 'date' | 'dates' | 'datetime' | 'week' | 'month' | 'daterange' | 'datetimerange' | 'weekrange' | 'monthrange'
+
+export const calendarViewProps = {
+  ...baseProps,
+  /**
+   * 选中值，为 13 位时间戳或时间戳数组
+   * 类型: number | number[] | null
+   * 默认值: null
+   */
+  modelValue: makeRequiredProp([Number, Array, null] as PropType<number | number[] | null>),
+  /**
+   * 日期类型
+   * 类型: CalendarType
+   * 可选值: 'date' | 'dates' | 'datetime' | 'week' | 'month' | 'daterange' | 'datetimerange' | 'weekrange' | 'monthrange'
+   * 默认值: 'date'
+   */
+  type: makeStringProp<CalendarType>('date'),
+  /**
+   * 最小日期，为 13 位时间戳
+   * 类型: number
+   * 默认值: 当前日期 - 6个月
+   */
+  minDate: makeNumberProp(defaultMinDate),
+  /**
+   * 最大日期，为 13 位时间戳
+   * 类型: number
+   * 默认值: 当前日期 + 6个月
+   */
+  maxDate: makeNumberProp(defaultMaxDate),
+  /**
+   * 周起始天
+   * 类型: number
+   * 默认值: 0
+   */
+  firstDayOfWeek: makeNumberProp(0),
+  /**
+   * 日期格式化函数
+   * 类型: CalendarFormatter
+   */
+  formatter: Function as PropType<CalendarFormatter>,
+  /**
+   * type 为范围选择时有效，最大日期范围
+   * 类型: number
+   */
+  maxRange: Number,
+  /**
+   * type 为范围选择时有效，选择超出最大日期范围时的错误提示文案
+   * 类型: string
+   */
+  rangePrompt: String,
+  /**
+   * type 为范围选择时有效，是否允许选择同一天
+   * 类型: boolean
+   * 默认值: false
+   */
+  allowSameDay: makeBooleanProp(false),
+  /**
+   * 是否展示面板标题，自动计算当前滚动的日期月份
+   * 类型: boolean
+   * 默认值: true
+   */
+  showPanelTitle: makeBooleanProp(true),
+  /**
+   * 选中日期所使用的当日内具体时刻
+   * 类型: string | string[]
+   * 默认值: '00:00:00'
+   */
+  defaultTime: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: '00:00:00'
+  },
+  /**
+   * 可滚动面板的高度
+   * 类型: number
+   * 默认值: 316
+   */
+  panelHeight: makeNumberProp(316),
+  /**
+   * type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
+   * 类型: CalendarTimeFilter
+   */
+  timeFilter: Function as PropType<CalendarTimeFilter>,
+  /**
+   * 选项高度
+   * 类型: number
+   * 默认值: 44
+   */
+  timeItemHeight: makeNumberProp(44),
+  /**
+   * 可见选项数量
+   * 类型: number
+   * 默认值: 3
+   */
+  timeVisibleItemCount: makeNumberProp(3),
+  /**
+   * type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改
+   * 类型: boolean
+   * 默认值: false
+   */
+  hideSecond: makeBooleanProp(false),
+  /**
+   * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   * 类型: boolean
+   * 默认值: false
+   */
+  immediateChange: makeBooleanProp(false),
+  /**
+   * 切换模式
+   * 类型: 'none' | 'month' | 'year-month'
+   * 可选值: none 平铺展示所有月份/年份，不展示切换按钮 | month 支持按月切换，展示上个月/下个月按钮 | year-month 支持按年切换，也支持按月切换，展示上一年/下一年，上个月/下个月按钮
+   * 默认值: 'none'
+   */
+  switchMode: makeStringProp<'none' | 'month' | 'year-month'>('none')
+}
+
+export type CalendarViewProps = ExtractPropTypes<typeof calendarViewProps>
+
+export type CalendarDayType = '' | 'start' | 'middle' | 'end' | 'selected' | 'same' | 'current' | 'multiple-middle' | 'multiple-selected'
+
+export type CalendarDayItem = {
+  /** 日期时间戳 */
+  date: number
+  /** 日期显示文本 */
+  text?: number | string
+  /** 顶部信息 */
+  topInfo?: string
+  /** 底部信息 */
+  bottomInfo?: string
+  /** 日期类型 */
+  type?: CalendarDayType
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否是这行的最后一个日期 */
+  isLastRow?: boolean
+  /** 自定义类名 */
+  customClass?: string
+}
+
+export type CalendarFormatter = (day: CalendarDayItem) => CalendarDayItem
+
+export type CalendarTimeFilter = DatetimePickerViewFilter
+
+export type CalendarTimeFormatter = DatetimePickerViewFormatter
+
+export type CalendarItem = {
+  label: string
+  value: number
+  disabled: boolean
+}
+
+export type CalendarViewExpose = {
+  /**
+   * 使当前日期或者选中日期滚动到可视区域
+   */
+  scrollIntoView: () => void
+}
+
+export type CalendarViewInstance = ComponentPublicInstance<CalendarViewProps, CalendarViewExpose>

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

@@ -0,0 +1,318 @@
+import { computed } from 'vue'
+import { formatDate } from '../../common/formatDate'
+import { isArray } from '../../common/util'
+import { useTranslate } from '../../composables/useTranslate'
+import type { CalendarDayType, CalendarType } from './types'
+const { translate } = useTranslate('calendar-view')
+
+const weeks = computed(() => {
+  return [
+    translate('weeks.sun'),
+    translate('weeks.mon'),
+    translate('weeks.tue'),
+    translate('weeks.wed'),
+    translate('weeks.thu'),
+    translate('weeks.fri'),
+    translate('weeks.sat')
+  ]
+})
+
+/**
+ * 比较两个时间的日期是否相等
+ * @param {number} date1 时间戳1
+ * @param {number | null} date2 时间戳2
+ * @returns {number} 0: 相等, 1: date1 > date2, -1: date1 < date2
+ */
+export function compareDate(date1: number, date2: number | null) {
+  const dateValue1 = new Date(date1)
+  const dateValue2 = new Date(date2 || '')
+
+  const year1 = dateValue1.getFullYear()
+  const year2 = dateValue2.getFullYear()
+  const month1 = dateValue1.getMonth()
+  const month2 = dateValue2.getMonth()
+  const day1 = dateValue1.getDate()
+  const day2 = dateValue2.getDate()
+
+  if (year1 === year2) {
+    if (month1 === month2) {
+      return day1 === day2 ? 0 : day1 > day2 ? 1 : -1
+    }
+    return month1 === month2 ? 0 : month1 > month2 ? 1 : -1
+  }
+
+  return year1 > year2 ? 1 : -1
+}
+
+/**
+ * 判断是否是范围选择
+ * @param {CalendarType} type 日期类型
+ * @returns {boolean}
+ */
+export function isRange(type: CalendarType) {
+  return type.indexOf('range') > -1
+}
+
+/**
+ * 比较两个日期的月份是否相等
+ * @param {number} date1 时间戳1
+ * @param {number} date2 时间戳2
+ * @returns {number} 0: 相等, 1: date1 > date2, -1: date1 < date2
+ */
+export function compareMonth(date1: number, date2: number) {
+  const dateValue1 = new Date(date1)
+  const dateValue2 = new Date(date2)
+
+  const year1 = dateValue1.getFullYear()
+  const year2 = dateValue2.getFullYear()
+  const month1 = dateValue1.getMonth()
+  const month2 = dateValue2.getMonth()
+
+  if (year1 === year2) {
+    return month1 === month2 ? 0 : month1 > month2 ? 1 : -1
+  }
+
+  return year1 > year2 ? 1 : -1
+}
+
+/**
+ * 比较两个日期的年份是否一致
+ * @param {number} date1 时间戳1
+ * @param {number} date2 时间戳2
+ * @returns {number} 0: 相等, 1: date1 > date2, -1: date1 < date2
+ */
+export function compareYear(date1: number, date2: number) {
+  const dateValue1 = new Date(date1)
+  const dateValue2 = new Date(date2)
+
+  const year1 = dateValue1.getFullYear()
+  const year2 = dateValue2.getFullYear()
+
+  return year1 === year2 ? 0 : year1 > year2 ? 1 : -1
+}
+
+/**
+ * 获取一个月的最后一天
+ * @param {number} year 年份
+ * @param {number} month 月份
+ * @returns {number} 当月天数
+ */
+export function getMonthEndDay(year: number, month: number) {
+  return 32 - new Date(year, month - 1, 32).getDate()
+}
+
+/**
+ * 格式化年月
+ * @param {number} date 时间戳
+ * @returns {string} FMYY-MM
+ */
+export function formatMonthTitle(date: number) {
+  return formatDate(date, translate('monthTitle'))
+}
+
+/**
+ * 根据下标获取星期
+ * @param {number} index 星期下标
+ * @returns {string} 星期几
+ */
+export function getWeekLabel(index: number) {
+  if (index >= 7) {
+    index = index % 7
+  }
+
+  return weeks.value[index]
+}
+
+/**
+ * 格式化年份
+ * @param {number} date 时间戳
+ * @returns {string} YYYY年
+ */
+export function formatYearTitle(date: number) {
+  return formatDate(date, translate('yearTitle'))
+}
+
+/**
+ * 根据最小日期和最大日期获取这之间总共有几个月份
+ * @param {number} minDate 最小日期时间戳
+ * @param {number} maxDate 最大日期时间戳
+ * @returns {number[]} 月份时间戳数组
+ */
+export function getMonths(minDate: number, maxDate: number) {
+  const months: number[] = []
+  const month = new Date(minDate)
+  month.setDate(1)
+
+  while (compareMonth(month.getTime(), maxDate) < 1) {
+    months.push(month.getTime())
+    month.setMonth(month.getMonth() + 1)
+  }
+
+  return months
+}
+
+/**
+ * 根据最小日期和最大日期获取这之间总共有几年
+ * @param {number} minDate 最小日期时间戳
+ * @param {number} maxDate 最大日期时间戳
+ * @returns {number[]} 年份时间戳数组
+ */
+export function getYears(minDate: number, maxDate: number) {
+  const years: number[] = []
+  const year = new Date(minDate)
+  year.setMonth(0)
+  year.setDate(1)
+
+  while (compareYear(year.getTime(), maxDate) < 1) {
+    years.push(year.getTime())
+    year.setFullYear(year.getFullYear() + 1)
+  }
+
+  return years
+}
+
+/**
+ * 获取一个日期所在周的第一天和最后一天
+ * @param {number} date 日期
+ * @param {number} firstDayOfWeek 周起始天
+ * @returns {number[]} [周第一天时间戳, 周最后一天时间戳]
+ */
+export function getWeekRange(date: number, firstDayOfWeek: number) {
+  if (firstDayOfWeek >= 7) {
+    firstDayOfWeek = firstDayOfWeek % 7
+  }
+
+  const dateValue = new Date(date)
+  dateValue.setHours(0, 0, 0, 0)
+  const year = dateValue.getFullYear()
+  const month = dateValue.getMonth()
+  const day = dateValue.getDate()
+  const week = dateValue.getDay()
+
+  const weekStart = new Date(year, month, day - ((7 + week - firstDayOfWeek) % 7))
+  const weekEnd = new Date(year, month, day + 6 - ((7 + week - firstDayOfWeek) % 7))
+
+  return [weekStart.getTime(), weekEnd.getTime()]
+}
+
+/**
+ * 获取日期偏移量
+ * @param {number} date1 时间戳1
+ * @param {number} date2 时间戳2
+ * @returns {number} 偏移天数
+ */
+export function getDayOffset(date1: number, date2: number) {
+  return (date1 - date2) / (24 * 60 * 60 * 1000) + 1
+}
+
+/**
+ * 获取偏移日期
+ * @param {number} date 时间戳
+ * @param {number} offset 偏移天数
+ * @returns {number} 偏移后的时间戳
+ */
+export function getDayByOffset(date: number, offset: number) {
+  const dateValue = new Date(date)
+  dateValue.setDate(dateValue.getDate() + offset)
+
+  return dateValue.getTime()
+}
+
+export const getPrevDay = (date: number) => getDayByOffset(date, -1)
+export const getNextDay = (date: number) => getDayByOffset(date, 1)
+
+/**
+ * 获取月份偏移量
+ * @param {number} date1 时间戳1
+ * @param {number} date2 时间戳2
+ * @returns {number} 偏移月数
+ */
+export function getMonthOffset(date1: number, date2: number) {
+  const dateValue1 = new Date(date1)
+  const dateValue2 = new Date(date2)
+
+  const year1 = dateValue1.getFullYear()
+  const year2 = dateValue2.getFullYear()
+  let month1 = dateValue1.getMonth()
+  const month2 = dateValue2.getMonth()
+
+  month1 = (year1 - year2) * 12 + month1
+
+  return month1 - month2 + 1
+}
+
+/**
+ * 获取偏移月份
+ * @param {number} date 时间戳
+ * @param {number} offset 偏移月数
+ * @returns {number} 偏移后的时间戳
+ */
+export function getMonthByOffset(date: number, offset: number) {
+  const dateValue = new Date(date)
+  dateValue.setMonth(dateValue.getMonth() + offset)
+
+  return dateValue.getTime()
+}
+
+/**
+ * 获取默认时间，格式化为数组
+ * @param {string[] | string | null} defaultTime 默认时间
+ * @returns {number[][]} [[时, 分, 秒], [时, 分, 秒]]
+ */
+export function getDefaultTime(defaultTime: string[] | string | null) {
+  if (isArray(defaultTime)) {
+    const startTime = (defaultTime[0] || '00:00:00').split(':').map((item: string) => {
+      return parseInt(item)
+    })
+    const endTime = (defaultTime[1] || '00:00:00').split(':').map((item) => {
+      return parseInt(item)
+    })
+    return [startTime, endTime]
+  } else {
+    const time = (defaultTime || '00:00:00').split(':').map((item) => {
+      return parseInt(item)
+    })
+
+    return [time, time]
+  }
+}
+
+/**
+ * 根据默认时间获取日期
+ * @param {number} date 时间戳
+ * @param {number[]} defaultTime [时, 分, 秒]
+ * @returns {number} 设置时间后的时间戳
+ */
+export function getDateByDefaultTime(date: number, defaultTime: number[]) {
+  const dateValue = new Date(date)
+  dateValue.setHours(defaultTime[0])
+  dateValue.setMinutes(defaultTime[1])
+  dateValue.setSeconds(defaultTime[2])
+
+  return dateValue.getTime()
+}
+
+/**
+ * 获取当前是第几周
+ * @param {number | Date} date 日期
+ * @returns {number} 周数
+ */
+export function getWeekNumber(date: number | Date) {
+  date = new Date(date)
+  date.setHours(0, 0, 0, 0)
+  date.setDate(date.getDate() + 3 - ((date.getDay() + 6) % 7))
+  const week = new Date(date.getFullYear(), 0, 4)
+  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) {
+  const classList = ['is-' + monthType]
+
+  if (type.indexOf('range') > -1 && isArray(value)) {
+    if (!value || !value[1]) {
+      classList.push('is-without-end')
+    }
+  }
+
+  return classList.join(' ')
+}

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

@@ -0,0 +1,117 @@
+<template>
+  <view :class="`wd-calendar-view ${customClass}`">
+    <year-panel
+      v-if="type === 'month' || type === 'monthrange'"
+      ref="yearPanelRef"
+      :type="type"
+      :value="modelValue"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :formatter="formatter"
+      :max-range="maxRange"
+      :range-prompt="rangePrompt"
+      :allow-same-day="allowSameDay"
+      :show-panel-title="showPanelTitle"
+      :default-time="formatDefauleTime"
+      :panel-height="panelHeight"
+      :switch-mode="switchMode"
+      @change="handleChange"
+    />
+    <month-panel
+      v-else
+      ref="monthPanelRef"
+      :type="type"
+      :value="modelValue"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :first-day-of-week="firstDayOfWeek"
+      :formatter="formatter"
+      :max-range="maxRange"
+      :range-prompt="rangePrompt"
+      :allow-same-day="allowSameDay"
+      :show-panel-title="showPanelTitle"
+      :default-time="formatDefauleTime"
+      :panel-height="panelHeight"
+      :immediate-change="immediateChange"
+      :time-filter="timeFilter"
+      :hide-second="hideSecond"
+      :item-height="timeItemHeight"
+      :visible-item-count="timeVisibleItemCount"
+      :switch-mode="switchMode"
+      @change="handleChange"
+      @pickstart="handlePickStart"
+      @pickend="handlePickEnd"
+    />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-calendar-view',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { getDefaultTime } from './utils'
+import yearPanel from './yearPanel/year-panel.vue'
+import MonthPanel from './monthPanel/month-panel.vue'
+import { calendarViewProps, type CalendarViewExpose } from './types'
+
+const props = defineProps(calendarViewProps)
+const emit = defineEmits(['change', 'update:modelValue', 'pickstart', 'pickend'])
+const formatDefauleTime = ref<number[][]>([])
+
+const yearPanelRef = ref()
+const monthPanelRef = ref()
+
+watch(
+  () => props.defaultTime,
+  (newValue) => {
+    formatDefauleTime.value = getDefaultTime(newValue)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+/**
+ * 使当前日期或者选中日期滚动到可视区域
+ */
+function scrollIntoView() {
+  const panel = getPanel()
+  panel.scrollIntoView && panel.scrollIntoView()
+}
+
+function getPanel() {
+  return props.type.indexOf('month') > -1 ? yearPanelRef.value : monthPanelRef.value
+}
+
+function handleChange({ value }: { value: number | number[] | null }) {
+  emit('update:modelValue', value)
+  emit('change', {
+    value
+  })
+}
+function handlePickStart() {
+  emit('pickstart')
+}
+function handlePickEnd() {
+  emit('pickend')
+}
+
+defineExpose<CalendarViewExpose>({
+  scrollIntoView
+})
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>