@kine-design/core 0.0.1-beta.1 → 0.0.1-beta.11

package/components/base/datePicker/__tests__/useDatePicker.test.ts

@@ -0,0 +1,235 @@
+/**
+ * @description useDatePicker 测试
+ * @author 阿怪
+ * @date 2026/3/23
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { describe, expect, it } from 'vitest';
+import { useDatePicker, generateTimeColumn, toDayjs } from '../useDatePicker';
+
+describe('toDayjs', () => {
+  it('字符串转 dayjs', () => {
+    const d = toDayjs('2026-03-15');
+    expect(d.year()).toBe(2026);
+    expect(d.month()).toBe(2); // 0-indexed
+    expect(d.date()).toBe(15);
+  });
+
+  it('Date 对象转 dayjs', () => {
+    const d = toDayjs(new Date(2026, 5, 10));
+    expect(d.year()).toBe(2026);
+    expect(d.month()).toBe(5);
+  });
+
+  it('undefined 返回当前时间', () => {
+    const d = toDayjs(undefined);
+    expect(d.isValid()).toBe(true);
+  });
+
+  it('无效日期字符串返回 invalid dayjs 对象', () => {
+    const d = toDayjs('not-a-date');
+    expect(d.isValid()).toBe(false);
+  });
+});
+
+describe('generateTimeColumn', () => {
+  it('生成 24 小时列', () => {
+    const hours = generateTimeColumn(24, 1);
+    expect(hours).toHaveLength(24);
+    expect(hours[0]).toBe(0);
+    expect(hours[23]).toBe(23);
+  });
+
+  it('步进为 2', () => {
+    const hours = generateTimeColumn(24, 2);
+    expect(hours).toEqual([0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22]);
+  });
+
+  it('生成 60 分钟列，步进 15', () => {
+    const mins = generateTimeColumn(60, 15);
+    expect(mins).toEqual([0, 15, 30, 45]);
+  });
+});
+
+describe('useDatePicker', () => {
+  it('初始化空值 displayValue 为空串、标记 placeholder 态', () => {
+    // i18n 后 placeholder 文案由 UI 层提供，hook 空值只返回空串 + placeholder class
+    const dp = useDatePicker({ type: 'date' });
+    expect(dp.displayValue.value).toBe('');
+    expect(dp.spanClass.value).toContain('m-date-picker-placeholder');
+  });
+
+  it('初始化有效日期正确解析', () => {
+    const dp = useDatePicker({ type: 'date', modelValue: '2026-06-15' });
+    expect(dp.displayValue.value).toBe('2026-06-15');
+    expect(dp.dateRef.value.year).toBe(2026);
+    expect(dp.dateRef.value.month).toBe(6);
+    expect(dp.dateRef.value.day).toBe(15);
+  });
+
+  it('placeholder 不再由 hook 产出（移交 UI 层），空值仍为空串', () => {
+    const dp = useDatePicker({ type: 'date', placeholder: '选择日期' });
+    expect(dp.displayValue.value).toBe('');
+  });
+
+  it('updateDateRef 更新状态', () => {
+    const dp = useDatePicker({ type: 'date' });
+    dp.updateDateRef('2025-12-25');
+
+    expect(dp.dateRef.value.year).toBe(2025);
+    expect(dp.dateRef.value.month).toBe(12);
+    expect(dp.dateRef.value.day).toBe(25);
+    expect(dp.displayValue.value).toBe('2025-12-25');
+  });
+
+  it('updateDateRef 空值恢复空串（placeholder 态）', () => {
+    const dp = useDatePicker({ type: 'date', modelValue: '2026-01-01' });
+    dp.updateDateRef('');
+
+    expect(dp.displayValue.value).toBe('');
+  });
+
+  it('getCalendar 返回 6 行 7 列', () => {
+    const dp = useDatePicker({ type: 'date', modelValue: '2026-03-15' });
+    const calendar = dp.getCalendar(dp.dateRef);
+
+    expect(calendar).toHaveLength(6);
+    calendar.forEach(row => {
+      expect(row).toHaveLength(7);
+    });
+  });
+
+  it('getCalendar 包含当月天数', () => {
+    const dp = useDatePicker({ type: 'date', modelValue: '2026-02-15' });
+    const calendar = dp.getCalendar(dp.dateRef);
+    const allDays = calendar.flat();
+    const currentMonthDays = allDays.filter(d => d.isCurrentMonth);
+
+    // 2026 年 2 月有 28 天
+    expect(currentMonthDays).toHaveLength(28);
+  });
+
+  it('getCalendar 标记当前选中日', () => {
+    const dp = useDatePicker({ type: 'date', modelValue: '2026-03-15' });
+    const calendar = dp.getCalendar(dp.dateRef);
+    const allDays = calendar.flat();
+    const currentDay = allDays.find(d => d.isCurrent);
+
+    expect(currentDay).toBeDefined();
+    expect(currentDay!.day).toBe(15);
+  });
+
+  it('toPrevMonth 切换上月', () => {
+    const dp = useDatePicker({ type: 'date', modelValue: '2026-03-15' });
+    dp.toPrevMonth();
+    expect(dp.dateRef.value.month).toBe(2);
+  });
+
+  it('toPrevMonth 跨年', () => {
+    const dp = useDatePicker({ type: 'date', modelValue: '2026-01-15' });
+    dp.toPrevMonth();
+    expect(dp.dateRef.value.month).toBe(12);
+    expect(dp.dateRef.value.year).toBe(2025);
+  });
+
+  it('toNextMonth 切换下月', () => {
+    const dp = useDatePicker({ type: 'date', modelValue: '2026-03-15' });
+    dp.toNextMonth();
+    expect(dp.dateRef.value.month).toBe(4);
+  });
+
+  it('toNextMonth 跨年', () => {
+    const dp = useDatePicker({ type: 'date', modelValue: '2026-12-15' });
+    dp.toNextMonth();
+    expect(dp.dateRef.value.month).toBe(1);
+    expect(dp.dateRef.value.year).toBe(2027);
+  });
+
+  it('toPrevYear / toNextYear', () => {
+    const dp = useDatePicker({ type: 'date', modelValue: '2026-06-15' });
+    dp.toPrevYear();
+    expect(dp.dateRef.value.year).toBe(2025);
+    dp.toNextYear();
+    dp.toNextYear();
+    expect(dp.dateRef.value.year).toBe(2027);
+  });
+
+  it('getValue 返回格式化日期字符串', () => {
+    const dp = useDatePicker({ type: 'date' });
+    const value = dp.getValue({ day: 20, month: 6, year: 2026, isCurrentMonth: true });
+    expect(value).toBe('2026-06-20');
+  });
+
+  it('month 类型使用 YYYY-MM 格式', () => {
+    const dp = useDatePicker({ type: 'month', modelValue: '2026-03' });
+    expect(dp.displayValue.value).toBe('2026-03');
+  });
+
+  it('自定义 format', () => {
+    const dp = useDatePicker({ type: 'date', format: 'YYYY/MM/DD', modelValue: '2026-03-15' });
+    expect(dp.displayValue.value).toBe('2026/03/15');
+  });
+
+  it('clickCurrentYear 切换到年份选择模式', () => {
+    const dp = useDatePicker({ type: 'date', modelValue: '2026-03-15' });
+    dp.clickCurrentYear(2026);
+    expect(dp.calendarTypeRef.value).toBe('year');
+    expect(dp.yearsRef.value).toHaveLength(12);
+    expect(dp.yearsRef.value).toContain(2026);
+  });
+
+  it('clickYearItem 更新年份并切换回日期模式', () => {
+    const dp = useDatePicker({ type: 'date', modelValue: '2026-03-15' });
+    dp.clickCurrentYear(2026);
+    dp.clickYearItem(2028);
+    expect(dp.dateRef.value.year).toBe(2028);
+    expect(dp.calendarTypeRef.value).toBe('date');
+  });
+
+  it('clickCurrentMonth 切换到月份选择模式', () => {
+    const dp = useDatePicker({ type: 'date', modelValue: '2026-03-15' });
+    dp.clickCurrentMonth(3);
+    expect(dp.calendarTypeRef.value).toBe('month');
+  });
+
+  it('clickMonthItem 更新月份并切换回日期模式', () => {
+    const dp = useDatePicker({ type: 'date', modelValue: '2026-03-15' });
+    dp.clickCurrentMonth(3);
+    dp.clickMonthItem(8);
+    expect(dp.dateRef.value.month).toBe(8);
+    expect(dp.calendarTypeRef.value).toBe('date');
+  });
+
+  // datetime 模式
+  it('datetime 模式初始化包含时间', () => {
+    const dp = useDatePicker({ type: 'datetime', modelValue: '2026-03-15 14:30:45' });
+    expect(dp.timeRef.value.hours).toBe(14);
+    expect(dp.timeRef.value.minutes).toBe(30);
+    expect(dp.timeRef.value.seconds).toBe(45);
+  });
+
+  it('selectHour / selectMinute / selectSecond', () => {
+    const dp = useDatePicker({ type: 'datetime' });
+    dp.selectHour(10);
+    expect(dp.timeRef.value.hours).toBe(10);
+
+    dp.selectMinute(25);
+    expect(dp.timeRef.value.minutes).toBe(25);
+
+    dp.selectSecond(59);
+    expect(dp.timeRef.value.seconds).toBe(59);
+  });
+
+  it('getDateTimeValue 组合日期和时间', () => {
+    const dp = useDatePicker({ type: 'datetime', modelValue: '2026-03-15 00:00:00' });
+    dp.selectHour(8);
+    dp.selectMinute(30);
+    dp.selectSecond(0);
+
+    const value = dp.getDateTimeValue();
+    expect(value).toContain('2026-03-15');
+    expect(value).toContain('08:30:00');
+  });
+});

package/components/base/datePicker/api.ts

@@ -0,0 +1,22 @@
+/**
+ * @description datePicker api
+ * @author 阿怪
+ * @date 2026/2/25
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { DatePickerProps } from './props';
+
+export const props: MCOPO<DatePickerProps> = {
+  modelValue: { type: [String, Date], default: '' },
+  placeholder: { type: String, default: undefined },
+  format: { type: String, default: undefined },
+  type: { type: String as MPropType<'date' | 'month' | 'datetime'>, default: 'date' },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: false },
+  size: { type: String as unknown as MPropType<NonNullable<DatePickerProps['size']>>, default: undefined },
+  disabledDate: { type: Function as MPropType<(date: Date) => boolean>, default: undefined },
+};

package/components/base/datePicker/index.ts

@@ -0,0 +1,19 @@
+/**
+ * @description datePicker core 导出
+ * @author 阿怪
+ * @date 2026/2/25
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { props } from './api';
+import { useDatePicker } from './useDatePicker';
+
+export const DatePickerCore = {
+  props,
+  useDatePicker,
+};
+
+export type { DatePickerProps, CalendarType, DateRefType, CalendarItem } from './props';
+export { useDatePicker, toDayjs, generateTimeColumn } from './useDatePicker';
+export type { TimeRefType } from './useDatePicker';

package/components/base/datePicker/props.d.ts

@@ -0,0 +1,86 @@
+/**
+ * @description datePicker props 类型定义
+ * @author 阿怪
+ * @date 2026/2/25
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { KineSize } from '../../types/props';
+
+export declare type DatePickerProps = {
+  /**
+   * @description 日期值
+   * @type string | Date
+   * @default ''
+   */
+  modelValue?: string | Date;
+  /**
+   * @description 提示文字
+   * @type string
+   * @default '请选择日期...'
+   */
+  placeholder?: string;
+  /**
+   * @description 日期格式
+   * @type string
+   * @default undefined
+   */
+  format?: string;
+  /**
+   * @description 选择类型：date 按日选择，month 按月选择，datetime 日期时间选择
+   * @type 'date' | 'month' | 'datetime'
+   * @default 'date'
+   */
+  type?: 'date' | 'month' | 'datetime';
+  /**
+   * @description 是否禁用
+   * @type boolean
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * @description 是否只读
+   * @type boolean
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * @description whether to show clear button. 是否可清空
+   * @type boolean
+   * @default false
+   */
+  clearable?: boolean;
+  /**
+   * @description 尺寸
+   * @type KineSize
+   * @default undefined
+   */
+  size?: KineSize;
+  /**
+   * @description callback to determine if a date is disabled. 判断日期是否禁用的回调
+   * @type (date: Date) => boolean
+   * @default undefined
+   */
+  disabledDate?: (date: Date) => boolean;
+};
+
+/** 日历面板的显示模式 */
+export type CalendarType = 'date' | 'month' | 'year';
+
+/** 日历内部日期引用 */
+export type DateRefType = {
+  year: number;
+  month: number;
+  day: number;
+};
+
+/** 日历单元格数据 */
+export type CalendarItem = {
+  day: number | string;
+  isCurrentMonth: boolean;
+  isCurrent?: boolean;
+  month: number;
+  year: number;
+};