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

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

@@ -0,0 +1,389 @@
+<template>
+  <view>
+    <wd-toast selector="wd-month" />
+    <view class="wd-month">
+      <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.isLastRow ? 'is-last-row' : ''} ${
+            item.type ? dayTypeClass(item.type) : ''
+          } ${item.customClass || ''}`"
+          :style="index === 0 ? firstDayStyle : ''"
+          @click="handleDateClick(index)"
+        >
+          <view class="wd-month__day-container">
+            <view class="wd-month__day-top">{{ item.topInfo }}</view>
+            <view class="wd-month__day-text">
+              {{ item.text }}
+            </view>
+            <view class="wd-month__day-bottom">{{ item.bottomInfo }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdToast from '../../wd-toast/wd-toast.vue'
+import { computed, ref, watch, type CSSProperties } from 'vue'
+import {
+  compareDate,
+  formatMonthTitle,
+  getDateByDefaultTime,
+  getDayByOffset,
+  getDayOffset,
+  getItemClass,
+  getMonthEndDay,
+  getNextDay,
+  getPrevDay,
+  getWeekRange
+} from '../utils'
+import { useToast } from '../../wd-toast'
+import { deepClone, isArray, isFunction, objToStyle } from '../../../common/util'
+import { useTranslate } from '../../../composables/useTranslate'
+import type { CalendarDayItem, CalendarDayType } from '../types'
+import { monthProps } from './types'
+
+const props = defineProps(monthProps)
+const emit = defineEmits(['change'])
+
+const { translate } = useTranslate('calendar-view')
+
+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 monthTitle = computed(() => {
+  return (date: number) => {
+    return formatMonthTitle(date)
+  }
+})
+
+const firstDayStyle = computed(() => {
+  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],
+  () => {
+    setDays()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+function setDays() {
+  const dayList: Array<CalendarDayItem> = []
+  const date = new Date(props.date)
+  const year = date.getFullYear()
+  const month = date.getMonth()
+  const totalDay = getMonthEndDay(year, month + 1)
+  let value = props.value
+  if ((props.type === 'week' || props.type === 'weekrange') && value) {
+    value = getWeekValue()
+  }
+
+  for (let day = 1; day <= totalDay; day++) {
+    const date = new Date(year, month, day).getTime()
+    let type: CalendarDayType = getDayType(date, value as number | number[] | null)
+    if (!type && compareDate(date, Date.now()) === 0) {
+      type = 'current'
+    }
+    const dayObj = getFormatterDate(date, day, type)
+    dayList.push(dayObj)
+  }
+  days.value = dayList
+}
+function getDayType(date: number, value: number | number[] | null): CalendarDayType {
+  switch (props.type) {
+    case 'date':
+    case 'datetime':
+      return getDateType(date)
+    case 'dates':
+      return getDatesType(date)
+    case 'daterange':
+    case 'datetimerange':
+      return getDatetimeType(date, value)
+    case 'week':
+      return getWeektimeType(date, value)
+    case 'weekrange':
+      return getWeektimeType(date, value)
+    default:
+      return getDateType(date)
+  }
+}
+function getDateType(date: number): CalendarDayType {
+  if (props.value && compareDate(date, props.value as number) === 0) {
+    return 'selected'
+  }
+  return ''
+}
+
+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 (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
+}
+function getDatetimeType(date: number, value: number | number[] | null) {
+  const [startDate, endDate] = isArray(value) ? value : []
+
+  if (startDate && compareDate(date, startDate) === 0) {
+    if (props.allowSameDay && endDate && compareDate(startDate, endDate) === 0) {
+      return 'same'
+    }
+    return 'start'
+  } else if (endDate && compareDate(date, endDate) === 0) {
+    return 'end'
+  } else if (startDate && endDate && compareDate(date, startDate) === 1 && compareDate(date, endDate) === -1) {
+    return 'middle'
+  } else {
+    return ''
+  }
+}
+function getWeektimeType(date: number, value: number | number[] | null) {
+  const [startDate, endDate] = isArray(value) ? value : []
+
+  if (startDate && compareDate(date, startDate) === 0) {
+    return 'start'
+  } else if (endDate && compareDate(date, endDate) === 0) {
+    return 'end'
+  } else if (startDate && endDate && compareDate(date, startDate) === 1 && compareDate(date, endDate) === -1) {
+    return 'middle'
+  } else {
+    return ''
+  }
+}
+function getWeekValue() {
+  if (props.type === 'week') {
+    return getWeekRange(props.value as number, props.firstDayOfWeek)
+  } else {
+    const [startDate, endDate] = (props.value as any) || []
+
+    if (startDate) {
+      const firstWeekRange = getWeekRange(startDate, props.firstDayOfWeek)
+
+      if (endDate) {
+        const endWeekRange = getWeekRange(endDate, props.firstDayOfWeek)
+
+        return [firstWeekRange[0], endWeekRange[1]]
+      } else {
+        return firstWeekRange
+      }
+    }
+
+    return []
+  }
+}
+function handleDateClick(index: number) {
+  const date = days.value[index]
+  switch (props.type) {
+    case 'date':
+    case 'datetime':
+      handleDateChange(date)
+      break
+    case 'dates':
+      handleDatesChange(date)
+      break
+    case 'daterange':
+    case 'datetimerange':
+      handleDateRangeChange(date)
+      break
+    case 'week':
+      handleWeekChange(date)
+      break
+    case 'weekrange':
+      handleWeekRangeChange(date)
+      break
+    default:
+      handleDateChange(date)
+  }
+}
+function getDate(date: number, isEnd: boolean = false) {
+  date = props.defaultTime && props.defaultTime.length > 0 ? getDateByDefaultTime(date, isEnd ? props.defaultTime[1] : props.defaultTime[0]) : date
+
+  if (date < props.minDate) return props.minDate
+
+  if (date > props.maxDate) return props.maxDate
+
+  return date
+}
+
+function handleDateChange(date: CalendarDayItem) {
+  if (date.disabled) return
+
+  if (date.type !== 'selected') {
+    emit('change', {
+      value: getDate(date.date),
+      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 })
+}
+
+function handleDateRangeChange(date: CalendarDayItem) {
+  if (date.disabled) return
+
+  let value: (number | null)[] = []
+  let type: CalendarDayType = ''
+  const [startDate, endDate] = deepClone(isArray(props.value) ? props.value : [])
+  const compare = compareDate(date.date, startDate)
+
+  // 禁止选择同个日期
+  if (!props.allowSameDay && compare === 0 && (props.type === 'daterange' || props.type === 'datetimerange') && !endDate) {
+    return
+  }
+
+  if (startDate && !endDate && compare > -1) {
+    // 不能选择超过最大范围的日期
+    if (props.maxRange && getDayOffset(date.date, startDate) > props.maxRange) {
+      const maxEndDate = getDayByOffset(startDate, props.maxRange - 1)
+      value = [startDate, getDate(maxEndDate, true)]
+      toast.show({
+        msg: props.rangePrompt || translate('rangePrompt', props.maxRange)
+      })
+    } else {
+      value = [startDate, getDate(date.date, true)]
+    }
+  } else if (props.type === 'datetimerange' && startDate && endDate) {
+    // 时间范围类型，且有开始时间和结束时间，需要支持重新点击开始日期和结束日期可以重新修改时间
+    if (compare === 0) {
+      type = 'start'
+      value = props.value as number[]
+    } else if (compareDate(date.date, endDate) === 0) {
+      type = 'end'
+      value = props.value as number[]
+    } else {
+      value = [getDate(date.date), null]
+    }
+  } else {
+    value = [getDate(date.date), null]
+  }
+
+  emit('change', {
+    value,
+    type: type || (value[1] ? 'end' : 'start')
+  })
+}
+function handleWeekChange(date: CalendarDayItem) {
+  const [weekStart] = getWeekRange(date.date, props.firstDayOfWeek)
+
+  // 周的第一天如果是禁用状态，则不可选中
+  if (getFormatterDate(weekStart, new Date(weekStart).getDate()).disabled) return
+
+  emit('change', {
+    value: getDate(weekStart) + 24 * 60 * 60 * 1000
+  })
+}
+function handleWeekRangeChange(date: CalendarDayItem) {
+  const [weekStartDate] = getWeekRange(date.date, props.firstDayOfWeek)
+
+  // 周的第一天如果是禁用状态，则不可选中
+  if (getFormatterDate(weekStartDate, new Date(weekStartDate).getDate()).disabled) return
+
+  let value: (number | null)[] = []
+  const [startDate, endDate] = deepClone(isArray(props.value) ? props.value : [])
+  const [startWeekStartDate] = startDate ? getWeekRange(startDate, props.firstDayOfWeek) : []
+  const compare = compareDate(weekStartDate, startWeekStartDate)
+
+  if (startDate && !endDate && compare > -1) {
+    if (!props.allowSameDay && compare === 0) return
+
+    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
+  })
+}
+function getFormatterDate(date: number, day: string | number, type?: CalendarDayType) {
+  let dayObj: CalendarDayItem = {
+    date: date,
+    text: day,
+    topInfo: '',
+    bottomInfo: '',
+    type,
+    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')
+    }
+  }
+  return dayObj
+}
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

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

@@ -0,0 +1,70 @@
+import type { PropType } from 'vue'
+import { makeBooleanProp, makeRequiredProp } from '../../../common/props'
+import type { CalendarFormatter, CalendarType } from '../types'
+
+export const monthProps = {
+  /**
+   * 日期类型
+   * 类型: CalendarType
+   */
+  type: makeRequiredProp(String as PropType<CalendarType>),
+  /**
+   * 日期时间戳
+   * 类型: number
+   */
+  date: makeRequiredProp(Number),
+  /**
+   * 选中值，为 13 位时间戳或时间戳数组
+   * 类型: number | (number | null)[] | null
+   */
+  value: makeRequiredProp([Number, Array, null] as PropType<number | (number | null)[] | null>),
+  /**
+   * 最小日期，为 13 位时间戳
+   * 类型: number
+   */
+  minDate: makeRequiredProp(Number),
+  /**
+   * 最大日期，为 13 位时间戳
+   * 类型: number
+   */
+  maxDate: makeRequiredProp(Number),
+  /**
+   * 周起始天
+   * 类型: number
+   */
+  firstDayOfWeek: makeRequiredProp(Number),
+  /**
+   * 日期格式化函数
+   * 类型: CalendarFormatter
+   */
+  formatter: Function as PropType<CalendarFormatter>,
+  /**
+   * type 为范围选择时有效，最大日期范围
+   * 类型: number
+   */
+  maxRange: Number,
+  /**
+   * type 为范围选择时有效，选择超出最大日期范围时的错误提示文案
+   * 类型: string
+   */
+  rangePrompt: String,
+  /**
+   * type 为范围选择时有效，是否允许选择同一天
+   * 类型: boolean
+   * 默认值: false
+   */
+  allowSameDay: makeBooleanProp(false),
+  /**
+   * 选中日期所使用的当日内具体时刻
+   * 类型: number[][]
+   */
+  defaultTime: {
+    type: [Array] as PropType<Array<number[]>>
+  },
+  /**
+   * 是否展示标题
+   * 类型: boolean
+   * 默认值: true
+   */
+  showTitle: makeBooleanProp(true)
+}

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

@@ -0,0 +1,84 @@
+@use '../../../styles/mixin/mixin.scss'as *;
+@use '../index.scss'as *;
+
+@include b(month-panel) {
+
+  @include e(controls) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: $calendar-view-controls-padding;
+  }
+
+  @include e(controls-title){
+    font-size: $calendar-view-panel-title-font-size;
+    line-height: $calendar-view-panel-title-line-height;
+    color: $calendar-view-panel-title-color;
+    font-weight: $calendar-view-panel-title-font-weight;
+  }
+
+  @include edeep(control-icon){
+    color: $calendar-view-control-icon-color;
+    font-size: $calendar-view-control-icon-size;
+    line-height: $calendar-view-control-icon-size;
+
+    &:not(:last-child){
+      margin-right: $calendar-view-control-icon-spacing;
+    }
+    @include when(disabled){
+      color: $calendar-view-control-color-disabled;
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(title) {
+    font-size: $calendar-view-panel-title-font-size;
+    line-height: $calendar-view-panel-title-line-height;
+    color: $calendar-view-panel-title-color;
+    padding: $calendar-view-panel-title-padding;
+    font-weight: $calendar-view-panel-title-font-weight;
+    margin: $calendar-view-panel-title-margin;
+  }
+
+  @include e(weeks) {
+    display: flex;
+    padding: $calendar-view-weeks-padding;
+  }
+
+  @include e(week) {
+    flex: 1;
+    text-align: center;
+    color: $calendar-view-week-color;
+    font-size: $calendar-view-week-font-size;
+    line-height: $calendar-view-week-line-height;
+  }
+
+  @include e(container) {
+    box-sizing: border-box;
+  }
+
+  @include e(time) {
+    display: flex;
+    box-shadow: $calendar-view-time-box-shadow;
+  }
+
+  @include e(time-label) {
+    position: relative;
+    flex: 1;
+    font-size: $calendar-view-time-picker-font-size;
+    color: $calendar-view-time-picker-color;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @include e(time-text) {
+    position: relative;
+    z-index: 1;
+  }
+
+  @include e(time-picker) {
+    flex: 3;
+  }
+}