taro-uno-ui 0.9.0-beta

package/src/components/display/Calendar/Calendar.styles.ts

@@ -0,0 +1,255 @@
+import type { CSSProperties } from 'react';
+
+export const calendarStyles: Record<string, CSSProperties> = {
+  base: {
+    backgroundColor: '#ffffff',
+    border: '1px solid #d9d9d9',
+    borderRadius: '6px',
+    padding: '16px',
+    width: '100%',
+    maxWidth: '400px',
+  },
+  
+  // 头部
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: '16px',
+    padding: '0 8px',
+  },
+  
+  headerTitle: {
+    fontSize: '16px',
+    fontWeight: '500',
+    color: '#262626',
+    cursor: 'pointer',
+    padding: '4px 8px',
+    borderRadius: '4px',
+    transition: 'background-color 0.3s ease',
+  },
+  
+  headerTitleHover: {
+    backgroundColor: '#f5f5f5',
+  },
+  
+  headerButton: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '24px',
+    height: '24px',
+    border: 'none',
+    backgroundColor: 'transparent',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    color: '#8c8c8c',
+    transition: 'all 0.3s ease',
+  },
+  
+  headerButtonHover: {
+    backgroundColor: '#f5f5f5',
+    color: '#262626',
+  },
+  
+  headerButtonDisabled: {
+    color: '#d9d9d9',
+    cursor: 'not-allowed',
+  },
+  
+  // 操作按钮组
+  actions: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+  },
+  
+  todayButton: {
+    padding: '4px 8px',
+    fontSize: '12px',
+    border: '1px solid #d9d9d9',
+    backgroundColor: '#ffffff',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    color: '#1890ff',
+    transition: 'all 0.3s ease',
+  },
+  
+  todayButtonHover: {
+    borderColor: '#1890ff',
+    backgroundColor: '#f0f8ff',
+  },
+  
+  // 星期头部
+  weekHeader: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(7, 1fr)',
+    marginBottom: '8px',
+  },
+  
+  weekHeaderCell: {
+    textAlign: 'center',
+    fontSize: '12px',
+    color: '#8c8c8c',
+    fontWeight: '500',
+    padding: '8px 4px',
+  },
+  
+  // 日期网格
+  dateGrid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(7, 1fr)',
+    gap: '2px',
+  },
+  
+  // 月份网格
+  monthGrid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 1fr)',
+    gap: '8px',
+  },
+  
+  // 日期单元格
+  dateCell: {
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '32px',
+    padding: '4px',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    color: '#262626',
+    transition: 'all 0.3s ease',
+    border: '1px solid transparent',
+  },
+  
+  dateCellHover: {
+    backgroundColor: '#f5f5f5',
+  },
+  
+  dateCellToday: {
+    backgroundColor: '#e6f7ff',
+    borderColor: '#1890ff',
+    fontWeight: '500',
+  },
+  
+  dateCellSelected: {
+    backgroundColor: '#1890ff',
+    color: '#ffffff',
+    fontWeight: '500',
+  },
+  
+  dateCellDisabled: {
+    color: '#d9d9d9',
+    cursor: 'not-allowed',
+    backgroundColor: 'transparent',
+  },
+  
+  dateCellOtherMonth: {
+    color: '#d9d9d9',
+  },
+  
+  // 月份单元格
+  monthCell: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '60px',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    color: '#262626',
+    transition: 'all 0.3s ease',
+    border: '1px solid transparent',
+  },
+  
+  monthCellHover: {
+    backgroundColor: '#f5f5f5',
+  },
+  
+  monthCellCurrent: {
+    backgroundColor: '#e6f7ff',
+    borderColor: '#1890ff',
+    fontWeight: '500',
+  },
+  
+  monthCellSelected: {
+    backgroundColor: '#1890ff',
+    color: '#ffffff',
+    fontWeight: '500',
+  },
+  
+  // 事件指示器
+  eventIndicator: {
+    position: 'absolute',
+    bottom: '2px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    display: 'flex',
+    gap: '2px',
+  },
+  
+  eventDot: {
+    width: '4px',
+    height: '4px',
+    borderRadius: '50%',
+    backgroundColor: '#1890ff',
+  },
+  
+  eventDotDefault: {
+    backgroundColor: '#d9d9d9',
+  },
+  
+  eventDotPrimary: {
+    backgroundColor: '#1890ff',
+  },
+  
+  eventDotSuccess: {
+    backgroundColor: '#52c41a',
+  },
+  
+  eventDotWarning: {
+    backgroundColor: '#faad14',
+  },
+  
+  eventDotDanger: {
+    backgroundColor: '#ff4d4f',
+  },
+  
+  // 事件列表
+  eventList: {
+    marginTop: '16px',
+    borderTop: '1px solid #f0f0f0',
+    paddingTop: '16px',
+  },
+  
+  eventItem: {
+    padding: '8px 12px',
+    backgroundColor: '#f5f5f5',
+    borderRadius: '4px',
+    marginBottom: '8px',
+  },
+  
+  eventTitle: {
+    fontSize: '14px',
+    fontWeight: '500',
+    color: '#262626',
+    marginBottom: '4px',
+  },
+  
+  eventDescription: {
+    fontSize: '12px',
+    color: '#8c8c8c',
+    lineHeight: '1.4',
+  },
+  
+  eventTime: {
+    fontSize: '12px',
+    color: '#8c8c8c',
+    marginTop: '4px',
+  },
+};

package/src/components/display/Calendar/Calendar.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import '@testing-library/jest-dom'
+import Calendar from './Calendar'
+
+describe('Calendar Component', () => {
+  it('renders calendar', () => {
+    render(<Calendar />)
+    expect(screen.getByText(/年/)).toBeInTheDocument()
+  })
+
+  it('renders with ariaLabel', () => {
+    render(<Calendar ariaLabel="Test calendar" />)
+    const calendar = screen.getByRole('grid')
+    expect(calendar).toHaveAttribute('aria-label', 'Test calendar') // failing
+  })
+
+  it('renders with role', () => {
+    render(<Calendar role="navigation" />)
+    const calendar = screen.getByRole('navigation')
+    expect(calendar).toBeInTheDocument() // failing
+  })
+
+  it('handles date selection', () => {
+    const onSelect = vi.fn()
+    render(<Calendar onSelect={onSelect} />)
+    // Simulate click on date - failing until implemented
+    expect(onSelect).toHaveBeenCalled() // failing
+  })
+})

package/src/components/display/Calendar/Calendar.tsx

@@ -0,0 +1,337 @@
+import { forwardRef, useImperativeHandle, useRef, useState, useEffect } from 'react';
+import { View, Text } from '@tarojs/components';
+import { calendarStyles } from './Calendar.styles';
+import type { CalendarProps, CalendarRef, CalendarDate } from './Calendar.types';
+import { useTheme } from '../../common/ThemeProvider';
+
+/** 日历组件 */
+export const CalendarComponent = forwardRef<CalendarRef, CalendarProps>((props, ref) => {
+  const {
+    value,
+    defaultValue,
+    mode = 'month',
+    showToday = true,
+    showEvents = false,
+    events = [],
+    disabledDate,
+    dateRender,
+    monthRender,
+    onSelect,
+    onChange,
+    onModeChange,
+    style,
+    className,
+    ariaLabel,
+    role = 'grid',
+    ...rest
+  } = props;
+
+  const { isDark } = useTheme();
+
+  const [currentDate, setCurrentDate] = useState(value || defaultValue || new Date());
+  const [currentMode, setCurrentMode] = useState(mode);
+  const [selectedDate, setSelectedDate] = useState<Date | null>(value || null);
+  const elementRef = useRef<any>(null);
+
+  useImperativeHandle(ref, () => ({
+    element: elementRef.current,
+    getCurrentDate: () => currentDate,
+    setDate: (date: Date) => {
+      setCurrentDate(date);
+      onChange?.(date);
+    },
+    getMode: () => currentMode,
+    setMode: (mode: 'month' | 'year') => {
+      setCurrentMode(mode);
+      onModeChange?.(mode);
+    },
+    goToToday: () => {
+      const today = new Date();
+      setCurrentDate(today);
+      setSelectedDate(today);
+      onChange?.(today);
+    },
+    goPrev: () => {
+      const newDate = new Date(currentDate);
+      if (currentMode === 'month') {
+        newDate.setMonth(newDate.getMonth() - 1);
+      } else {
+        newDate.setFullYear(newDate.getFullYear() - 1);
+      }
+      setCurrentDate(newDate);
+      onChange?.(newDate);
+    },
+    goNext: () => {
+      const newDate = new Date(currentDate);
+      if (currentMode === 'month') {
+        newDate.setMonth(newDate.getMonth() + 1);
+      } else {
+        newDate.setFullYear(newDate.getFullYear() + 1);
+      }
+      setCurrentDate(newDate);
+      onChange?.(newDate);
+    },
+  }));
+
+  useEffect(() => {
+    if (value) {
+      setCurrentDate(value);
+      setSelectedDate(value);
+    }
+  }, [value]);
+
+  const getWeekDays = () => {
+    return ['日', '一', '二', '三', '四', '五', '六'];
+  };
+
+  const getMonthNames = () => {
+    return ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
+  };
+
+  const getDatesInMonth = (): CalendarDate[] => {
+    const year = currentDate.getFullYear();
+    const month = currentDate.getMonth();
+    const today = new Date();
+
+    // 获取当月第一天和最后一天
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+
+    // 获取日历开始日期（包含上月末尾日期）
+    const startDate = new Date(firstDay);
+    startDate.setDate(startDate.getDate() - firstDay.getDay());
+
+    // 获取日历结束日期（包含下月开始日期）
+    const endDate = new Date(lastDay);
+    endDate.setDate(endDate.getDate() + (6 - lastDay.getDay()));
+
+    const dates: CalendarDate[] = [];
+    const current = new Date(startDate);
+
+    while (current <= endDate) {
+      const isCurrentMonth = current.getMonth() === month;
+      const isToday =
+        current.getFullYear() === today.getFullYear() &&
+        current.getMonth() === today.getMonth() &&
+        current.getDate() === today.getDate();
+      const isSelected =
+        selectedDate &&
+        current.getFullYear() === selectedDate.getFullYear() &&
+        current.getMonth() === selectedDate.getMonth() &&
+        current.getDate() === selectedDate.getDate();
+
+      const dateEvents = events.filter((event) => {
+        const eventDate = new Date(event.startTime || '');
+        return (
+          eventDate.getFullYear() === current.getFullYear() &&
+          eventDate.getMonth() === current.getMonth() &&
+          eventDate.getDate() === current.getDate()
+        );
+      });
+
+      dates.push({
+        year: current.getFullYear(),
+        month: current.getMonth() + 1,
+        day: current.getDate(),
+        isCurrentMonth,
+        isToday,
+        isSelected: Boolean(isSelected),
+        disabled: disabledDate?.(new Date(current)) || false,
+        events: dateEvents,
+      });
+
+      current.setDate(current.getDate() + 1);
+    }
+
+    return dates;
+  };
+
+  const handleDateClick = (date: CalendarDate) => {
+    if (date.disabled) return;
+
+    const newDate = new Date(date.year, date.month - 1, date.day);
+    setSelectedDate(newDate);
+    onSelect?.(newDate);
+    onChange?.(newDate);
+  };
+
+  const handleMonthClick = (monthIndex: number) => {
+    const newDate = new Date(currentDate.getFullYear(), monthIndex, 1);
+    setCurrentDate(newDate);
+    setCurrentMode('month');
+    onChange?.(newDate);
+    onModeChange?.('month');
+  };
+
+  const handleHeaderTitleClick = () => {
+    setCurrentMode(currentMode === 'month' ? 'year' : 'month');
+    onModeChange?.(currentMode === 'month' ? 'year' : 'month');
+  };
+
+  const handlePrevClick = () => {
+    const newDate = new Date(currentDate);
+    if (currentMode === 'month') {
+      newDate.setMonth(newDate.getMonth() - 1);
+    } else {
+      newDate.setFullYear(newDate.getFullYear() - 1);
+    }
+    setCurrentDate(newDate);
+    onChange?.(newDate);
+  };
+
+  const handleNextClick = () => {
+    const newDate = new Date(currentDate);
+    if (currentMode === 'month') {
+      newDate.setMonth(newDate.getMonth() + 1);
+    } else {
+      newDate.setFullYear(newDate.getFullYear() + 1);
+    }
+    setCurrentDate(newDate);
+    onChange?.(newDate);
+  };
+
+  const handleTodayClick = () => {
+    const today = new Date();
+    setCurrentDate(today);
+    setSelectedDate(today);
+    setCurrentMode('month');
+    onChange?.(today);
+  };
+
+  const renderDateCell = (date: CalendarDate) => {
+    if (dateRender) {
+      return dateRender(date);
+    }
+
+    let cellStyle = { ...calendarStyles['dateCell'] };
+
+    if (!date.isCurrentMonth) {
+      cellStyle = { ...cellStyle, ...calendarStyles['dateCellOtherMonth'] };
+    }
+
+    if (date.isToday) {
+      cellStyle = { ...cellStyle, ...calendarStyles['dateCellToday'] };
+    }
+
+    if (date.isSelected) {
+      cellStyle = { ...cellStyle, ...calendarStyles['dateCellSelected'] };
+    }
+
+    if (date.disabled) {
+      cellStyle = { ...cellStyle, ...calendarStyles['dateCellDisabled'] };
+    }
+
+    return (
+      <View key={`${date.year}-${date.month}-${date.day}`} style={cellStyle} onClick={() => handleDateClick(date)}>
+        <Text>{date.day}</Text>
+        {showEvents && date.events && date.events.length > 0 && (
+          <View style={calendarStyles['eventIndicator'] ?? {}}>
+            {date.events.slice(0, 3).map((event) => (
+              <View
+                key={event.id}
+                style={{
+                  ...calendarStyles['eventDot'],
+                  backgroundColor: event.color || calendarStyles['eventDotDefault']?.backgroundColor || '#007bff',
+                }}
+              />
+            ))}
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  const renderMonthView = () => {
+    const dates = getDatesInMonth();
+    const weekDays = getWeekDays();
+
+    return (
+      <>
+        <View style={calendarStyles['weekHeader'] ?? {}}>
+          {weekDays.map((day) => (
+            <View key={day} style={calendarStyles['weekHeaderCell'] ?? {}}>
+              <Text>{day}</Text>
+            </View>
+          ))}
+        </View>
+        <View style={calendarStyles['dateGrid'] ?? {}}>{dates.map((date) => renderDateCell(date))}</View>
+      </>
+    );
+  };
+
+  const renderYearView = () => {
+    const months = getMonthNames();
+    const currentMonth = currentDate.getMonth();
+
+    return (
+      <View style={calendarStyles['monthGrid'] ?? {}}>
+        {months.map((month, index) => {
+          if (monthRender) {
+            return monthRender(index, currentDate.getFullYear());
+          }
+
+          let cellStyle = { ...calendarStyles['monthCell'] };
+
+          if (index === currentMonth) {
+            cellStyle = { ...cellStyle, ...calendarStyles['monthCellCurrent'] };
+          }
+
+          return (
+            <View key={month} style={cellStyle} onClick={() => handleMonthClick(index)}>
+              <Text>{month}</Text>
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+
+  const getHeaderTitle = () => {
+    if (currentMode === 'month') {
+      return `${currentDate.getFullYear()}年 ${currentDate.getMonth() + 1}月`;
+    } else {
+      return `${currentDate.getFullYear()}年`;
+    }
+  };
+
+  return (
+    <View
+      ref={elementRef}
+      style={{ ...calendarStyles['base'], ...style }}
+      className={`${className ?? ''} ${isDark ? 'dark' : 'light'}`}
+      aria-label={ariaLabel}
+      role={role}
+      {...rest}
+    >
+      {/* 头部 */}
+      <View style={calendarStyles['header'] ?? {}}>
+        <Text style={calendarStyles['headerButton'] ?? {}} onClick={handlePrevClick}>
+          ‹
+        </Text>
+
+        <Text style={calendarStyles['headerTitle'] ?? {}} onClick={handleHeaderTitleClick}>
+          {getHeaderTitle()}
+        </Text>
+
+        <View style={calendarStyles['actions'] ?? {}}>
+          {showToday && (
+            <Text style={calendarStyles['todayButton'] ?? {}} onClick={handleTodayClick}>
+              今天
+            </Text>
+          )}
+          <Text style={calendarStyles['headerButton'] ?? {}} onClick={handleNextClick}>
+            ›
+          </Text>
+        </View>
+      </View>
+
+      {/* 内容 */}
+      {currentMode === 'month' ? renderMonthView() : renderYearView()}
+    </View>
+  );
+});
+
+CalendarComponent.displayName = 'Calendar';
+
+export const Calendar = CalendarComponent;
+export default Calendar;

package/src/components/display/Calendar/Calendar.types.ts

@@ -0,0 +1,91 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+export interface CalendarDate {
+  /** 年份 */
+  year: number;
+  /** 月份 (1-12) */
+  month: number;
+  /** 日期 (1-31) */
+  day: number;
+  /** 是否为当前月 */
+  isCurrentMonth?: boolean;
+  /** 是否为今天 */
+  isToday?: boolean;
+  /** 是否被选中 */
+  isSelected?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 事件数据 */
+  events?: CalendarEvent[];
+}
+
+export interface CalendarEvent {
+  /** 事件ID */
+  id: string;
+  /** 事件标题 */
+  title: string;
+  /** 事件描述 */
+  description?: string;
+  /** 事件类型 */
+  type?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+  /** 事件颜色 */
+  color?: string;
+  /** 开始时间 */
+  startTime?: string;
+  /** 结束时间 */
+  endTime?: string;
+}
+
+export interface CalendarProps {
+  /** 当前选中日期 */
+  value?: Date;
+  /** 默认日期 */
+  defaultValue?: Date;
+  /** 显示模式 */
+  mode?: 'month' | 'year';
+  /** 是否显示今天按钮 */
+  showToday?: boolean;
+  /** 是否显示事件 */
+  showEvents?: boolean;
+  /** 事件数据 */
+  events?: CalendarEvent[];
+  /** 禁用日期函数 */
+  disabledDate?: (_date: Date) => boolean;
+  /** 自定义日期渲染 */
+  dateRender?: (_date: CalendarDate) => ReactNode;
+  /** 自定义月份渲染 */
+  monthRender?: (_month: number, year: number) => ReactNode;
+  /** 日期选择事件 */
+  onSelect?: (_date: Date) => void;
+  /** 日期变化事件 */
+  onChange?: (_date: Date) => void;
+  /** 模式变化事件 */
+  onModeChange?: (_mode: 'month' | 'year') => void;
+  /** 自定义样式 */
+  style?: CSSProperties;
+  /** 自定义类名 */
+  className?: string;
+  /** 无障碍标签 */
+  ariaLabel?: string;
+  /** 无障碍角色 */
+  role?: string;
+}
+
+export interface CalendarRef {
+  /** DOM 元素 */
+  element: any;
+  /** 获取当前日期 */
+  getCurrentDate: () => Date;
+  /** 设置日期 */
+  setDate: (_date: Date) => void;
+  /** 获取显示模式 */
+  getMode: () => 'month' | 'year';
+  /** 设置显示模式 */
+  setMode: (_mode: 'month' | 'year') => void;
+  /** 跳转到今天 */
+  goToToday: () => void;
+  /** 上一个月/年 */
+  goPrev: () => void;
+  /** 下一个月/年 */
+  goNext: () => void;
+}

package/src/components/display/Calendar/index.ts

@@ -0,0 +1,3 @@
+export { Calendar } from './Calendar';
+export { calendarStyles } from './Calendar.styles';
+export type { CalendarProps, CalendarRef, CalendarDate, CalendarEvent } from './Calendar.types';