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

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

@@ -0,0 +1,148 @@
+@use '../../../styles/mixin/mixin.scss' as *;
+@use '../index.scss' as *;
+
+@include b(year) {
+  @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(months) {
+    display: flex;
+    flex-wrap: wrap;
+    font-size: $calendar-view-day-font-size;
+    color: $calendar-view-day-color;
+    padding: $calendar-view-item-padding;
+  }
+
+  @include e(month) {
+    position: relative;
+    width: 25%;
+    height: $calendar-view-month-height;
+    line-height: $calendar-view-month-height;
+    font-weight: $calendar-view-month-font-weight;
+    text-align: center;
+    margin-bottom: $calendar-view-item-margin-bottom;
+
+    @include when(disabled) {
+      .wd-year__month-text {
+        color: $calendar-view-color-disabled;
+      }
+    }
+
+    @include when(current) {
+      color: $calendar-view-color-active;
+    }
+
+    @include when(selected) {
+      color: $calendar-view-color-selected;
+
+      .wd-year__month-container {
+        border-radius: $calendar-view-border-radius-active;
+        background: $calendar-view-color-active;
+      }
+    }
+
+    @include when(middle) {
+      background: $calendar-view-range-bg;
+      color: $calendar-view-range-color;
+    }
+
+    @include when(start) {
+      color: $calendar-view-color-selected;
+
+      .wd-year__month-container {
+        position: relative;
+        z-index: 1;
+        background: $calendar-view-color-active;
+        border-radius: $calendar-view-border-radius-active 0 0 $calendar-view-border-radius-active;
+      }
+
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 50%;
+        bottom: 0;
+        content: '';
+        height: $calendar-view-month-height;
+        background: $calendar-view-range-bg;
+      }
+
+      &.is-without-end::after {
+        display: none;
+      }
+    }
+
+    @include when(end) {
+      color: $calendar-view-color-selected;
+
+      .wd-year__month-container {
+        position: relative;
+        z-index: 1;
+        background: $calendar-view-color-active;
+        border-radius: 0 $calendar-view-border-radius-active $calendar-view-border-radius-active 0;
+      }
+
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 50%;
+        bottom: 0;
+        content: '';
+        background: $calendar-view-range-bg;
+      }
+
+
+    }
+
+    @include when(same) {
+      color: $calendar-view-color-selected;
+
+      .wd-year__month-container {
+        background: $calendar-view-color-active;
+        border-radius: $calendar-view-border-radius-active;
+      }
+    }
+    @include when(last-row){
+      margin-bottom: 0;
+    }
+  }
+
+  @include e(month-container) {
+    position: relative;
+    width: $calendar-view-month-width;
+    height: $calendar-view-month-height;
+    margin: 0 auto;
+    text-align: center;
+  }
+  
+  @include e(month-text) {
+   font-weight: $calendar-view-month-font-weight;
+  }
+
+  @include e(month-top) {
+    position: absolute;
+    top: $calendar-view-info-position;
+    left: 0;
+    right: 0;
+    line-height: $calendar-view-info-line-height;
+    font-size: $calendar-view-info-font-size;
+    text-align: center;
+  }
+
+  @include e(month-bottom) {
+    position: absolute;
+    bottom: $calendar-view-info-position;
+    left: 0;
+    right: 0;
+    line-height: $calendar-view-info-line-height;
+    font-size: $calendar-view-info-font-size;
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,74 @@
+/*
+ * @Author: weisheng
+ * @Date: 2026-03-13 17:20:03
+ * @LastEditTime: 2026-03-27 18:57:39
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-calendar-view/year/types.ts
+ * 记得注释
+ */
+import type { PropType } from 'vue'
+import { makeBooleanProp, makeRequiredProp } from '../../../common/props'
+import type { CalendarFormatter, CalendarType } from '../types'
+
+export const yearProps = {
+  /**
+   * 日期类型
+   * 类型: CalendarType
+   */
+  type: makeRequiredProp(String as PropType<CalendarType>),
+  /**
+   * 日期时间戳
+   * 类型: number
+   */
+  date: makeRequiredProp(Number),
+  /**
+   * 选中值，为 13 位时间戳或时间戳数组
+   * 类型: number | (number | null)[] | null
+   */
+  value: makeRequiredProp([Number, Array] as PropType<number | (number | null)[] | null>),
+  /**
+   * 最小日期，为 13 位时间戳
+   * 类型: number
+   */
+  minDate: makeRequiredProp(Number),
+  /**
+   * 最大日期，为 13 位时间戳
+   * 类型: number
+   */
+  maxDate: 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/year/year.vue

@@ -0,0 +1,206 @@
+<template>
+  <wd-toast selector="wd-year" />
+
+  <view class="wd-year year">
+    <view class="wd-year__title" v-if="showTitle">{{ yearTitle(date) }}</view>
+    <view class="wd-year__months">
+      <view
+        v-for="(item, index) in months"
+        :key="index"
+        :class="`wd-year__month ${item.disabled ? 'is-disabled' : ''} ${item.isLastRow ? 'is-last-row' : ''} ${
+          item.type ? monthTypeClass(item.type) : ''
+        } ${item.customClass || ''}`"
+        @click="handleDateClick(index)"
+      >
+        <view class="wd-year__month-container">
+          <view class="wd-year__month-top">{{ item.topInfo }}</view>
+          <view class="wd-year__month-text">{{ getMonthLabel(item.date) }}</view>
+          <view class="wd-year__month-bottom">{{ item.bottomInfo }}</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 } from 'vue'
+import { deepClone, isArray, isFunction } from '../../../common/util'
+import { compareMonth, formatYearTitle, getDateByDefaultTime, getItemClass, getMonthByOffset, getMonthOffset } from '../utils'
+import { useToast } from '../../wd-toast'
+import { useTranslate } from '../../../composables/useTranslate'
+import { formatDate } from '../../../common/formatDate'
+import { yearProps } from './types'
+import type { CalendarDayItem, CalendarDayType } from '../types'
+
+const props = defineProps(yearProps)
+const emit = defineEmits(['change'])
+
+const toast = useToast('wd-year')
+const { translate } = useTranslate('calendar-view')
+
+const months = ref<CalendarDayItem[]>([])
+
+const monthTypeClass = computed(() => {
+  return (monthType: CalendarDayType) => {
+    return getItemClass(monthType, props.value, props.type)
+  }
+})
+
+const yearTitle = computed(() => {
+  return (date: number) => {
+    return formatYearTitle(date)
+  }
+})
+
+watch(
+  [() => props.type, () => props.date, () => props.value, () => props.minDate, () => props.maxDate, () => props.formatter],
+  () => {
+    setMonths()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+function getMonthLabel(date: number) {
+  return formatDate(date, translate('month', date))
+}
+
+function setMonths() {
+  const monthList: CalendarDayItem[] = []
+  const date = new Date(props.date)
+  const year = date.getFullYear()
+  const value = props.value
+
+  if (props.type.indexOf('range') > -1 && value && !isArray(value)) {
+    console.error('[wot-design] value should be array when type is range')
+    return
+  }
+
+  for (let month = 0; month < 12; month++) {
+    const date = new Date(year, month, 1).getTime()
+    let type: CalendarDayType = getMonthType(date)
+    if (!type && compareMonth(date, Date.now()) === 0) {
+      type = 'current'
+    }
+    const monthObj = getFormatterDate(date, month, type)
+    monthList.push(monthObj)
+  }
+
+  months.value = deepClone(monthList)
+}
+function getMonthType(date: number) {
+  if (props.type === 'monthrange' && isArray(props.value)) {
+    const [startDate, endDate] = props.value || []
+
+    if (startDate && compareMonth(date, startDate) === 0) {
+      if (endDate && compareMonth(startDate, endDate) === 0) {
+        return 'same'
+      }
+      return 'start'
+    } else if (endDate && compareMonth(date, endDate) === 0) {
+      return 'end'
+    } else if (startDate && endDate && compareMonth(date, startDate) === 1 && compareMonth(date, endDate) === -1) {
+      return 'middle'
+    } else {
+      return ''
+    }
+  } else {
+    if (props.value && compareMonth(date, props.value as number) === 0) {
+      return 'selected'
+    } else {
+      return ''
+    }
+  }
+}
+function handleDateClick(index: number) {
+  const date = months.value[index]
+
+  if (date.disabled) return
+
+  switch (props.type) {
+    case 'month':
+      handleMonthChange(date)
+      break
+    case 'monthrange':
+      handleMonthRangeChange(date)
+      break
+    default:
+      handleMonthChange(date)
+  }
+}
+function getDate(date: number) {
+  return props.defaultTime && props.defaultTime.length > 0 ? getDateByDefaultTime(date, props.defaultTime[0]) : date
+}
+function handleMonthChange(date: CalendarDayItem) {
+  if (date.type !== 'selected') {
+    emit('change', {
+      value: getDate(date.date)
+    })
+  }
+}
+function handleMonthRangeChange(date: CalendarDayItem) {
+  let value: (number | null)[] = []
+  const [startDate, endDate] = isArray(props.value) ? props.value || [] : []
+  const compare = compareMonth(date.date, startDate!)
+
+  // 禁止选择同个日期
+  if (!props.allowSameDay && !endDate && compare === 0) return
+
+  if (startDate && !endDate && compare > -1) {
+    if (props.maxRange && getMonthOffset(date.date, startDate) > props.maxRange) {
+      const maxEndDate = getMonthByOffset(startDate, props.maxRange - 1)
+      value = [startDate, getDate(maxEndDate)]
+      toast.show({
+        msg: props.rangePrompt || translate('rangePromptMonth', props.maxRange)
+      })
+    } else {
+      value = [startDate, getDate(date.date)]
+    }
+  } else {
+    value = [getDate(date.date), null]
+  }
+  emit('change', {
+    value
+  })
+}
+
+function getFormatterDate(date: number, month: number, type?: CalendarDayType) {
+  let monthObj: CalendarDayItem = {
+    date: date,
+    text: month + 1,
+    topInfo: '',
+    bottomInfo: '',
+    type,
+    disabled: compareMonth(date, props.minDate) === -1 || compareMonth(date, props.maxDate) === 1,
+    isLastRow: month >= 8
+  }
+
+  if (props.formatter) {
+    if (isFunction(props.formatter)) {
+      monthObj = props.formatter(monthObj)
+    } else {
+      console.error('[wot-design] error(wd-calendar-view): the formatter prop of wd-calendar-view should be a function')
+    }
+  }
+
+  return monthObj
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

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

@@ -0,0 +1,42 @@
+@use '../../../styles/mixin/mixin.scss' as *;
+@use '../index.scss' as *;
+
+@include b(year-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;
+  }
+}

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

@@ -0,0 +1,96 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { makeBooleanProp, makeRequiredProp, makeStringProp } from '../../../common/props'
+import type { CalendarFormatter, CalendarType } from '../types'
+
+/**
+ * 月份信息
+ */
+/**
+ * 年份信息
+ */
+export interface YearInfo {
+  /** 日期时间戳 */
+  date: number
+  /** 高度 */
+  height: number
+}
+
+export const yearPanelProps = {
+  /**
+   * 日期类型
+   * 类型: CalendarType
+   */
+  type: makeRequiredProp(String as PropType<CalendarType>),
+  /**
+   * 选中值，为 13 位时间戳或时间戳数组
+   * 类型: number | (number | null)[] | null
+   */
+  value: makeRequiredProp([Number, Array] as PropType<number | (number | null)[] | null>),
+  /**
+   * 最小日期，为 13 位时间戳
+   * 类型: number
+   */
+  minDate: makeRequiredProp(Number),
+  /**
+   * 最大日期，为 13 位时间戳
+   * 类型: number
+   */
+  maxDate: makeRequiredProp(Number),
+  /**
+   * 日期格式化函数
+   * 类型: 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),
+  /**
+   * 选中日期所使用的当日内具体时刻
+   * 类型: number[][]
+   */
+  defaultTime: {
+    type: [Array] as PropType<Array<number[]>>
+  },
+  /**
+   * 可滚动面板的高度
+   * 类型: number
+   */
+  panelHeight: makeRequiredProp(Number),
+  /**
+   * 切换模式
+   * 类型: 'none' | 'month' | 'year-month'
+   * 可选值: none 平铺展示所有月份/年份，不展示切换按钮 | month 支持按月切换，展示上个月/下个月按钮 | year-month 支持按年切换，也支持按月切换，展示上一年/下一年，上个月/下个月按钮
+   * 默认值: 'none'
+   */
+  switchMode: makeStringProp<'none' | 'month' | 'year-month'>('none')
+}
+
+export type YearPanelProps = ExtractPropTypes<typeof yearPanelProps>
+
+export type YearPanelExpose = {
+  /**
+   * 使当前日期或者选中日期滚动到可视区域
+   */
+  scrollIntoView: () => void
+}
+
+export type YearPanelInstance = ComponentPublicInstance<YearPanelProps, YearPanelExpose>