wok-ui-ext 0.1.0

package/dist/date-picker/date-picker.d.ts

@@ -0,0 +1,29 @@
+import { FullRenderingModule } from 'wok-ui';
+export declare class DatePicker extends FullRenderingModule {
+    private readonly opts;
+    private value?;
+    private panelYear;
+    private panelMonth;
+    private popup?;
+    constructor(opts: {
+        value?: Date;
+        placeholder?: string;
+        required?: boolean | string;
+        min?: Date | {
+            min: Date;
+            errMsg: string;
+        };
+        max?: Date | {
+            max: Date;
+            errMsg: string;
+        };
+        disabled?: boolean;
+        disabledDate?: (date: Date) => boolean;
+        onChange?: (date?: Date) => void;
+    });
+    protected buildContent(): void;
+    private togglePopup;
+    private openPopup;
+    private selectDate;
+    destroy(): void;
+}

package/dist/date-picker/date-picker.js

@@ -0,0 +1,81 @@
+import { FullRenderingModule } from 'wok-ui';
+import { CalendarPanel } from './calendar-panel';
+import { DatePickerLayer } from './layer';
+import { formatDate, combineDateConstraints } from './date-utils';
+export class DatePicker extends FullRenderingModule {
+    constructor(opts) {
+        super('wok-ui-ext-date-picker');
+        this.opts = opts;
+        const today = new Date();
+        this.value = opts.value;
+        const initDate = this.value ?? today;
+        this.panelYear = initDate.getFullYear();
+        this.panelMonth = initDate.getMonth();
+        this.render();
+    }
+    buildContent() {
+        this.addChild({
+            classNames: ['wok-ui-ext-date-picker-trigger', this.opts.disabled ? 'disabled' : ''],
+            children: this.value ? formatDate(this.value) : (this.opts.placeholder ?? '请选择日期'),
+            onClick: () => {
+                if (this.opts.disabled)
+                    return;
+                this.togglePopup();
+            },
+            postHandle: el => {
+                if (!this.value) {
+                    el.classList.add('placeholder');
+                }
+            }
+        });
+    }
+    togglePopup() {
+        // 已打开则关闭
+        if (this.popup) {
+            this.popup.destroy();
+            return;
+        }
+        const target = this.value ?? new Date();
+        this.panelYear = target.getFullYear();
+        this.panelMonth = target.getMonth();
+        const today = new Date();
+        const panel = new CalendarPanel({
+            year: this.panelYear,
+            month: this.panelMonth,
+            selectedDates: () => (this.value ? [this.value] : []),
+            today,
+            disabledDate: combineDateConstraints(this.opts.min, this.opts.max, this.opts.disabledDate),
+            onDayClick: date => this.selectDate(date),
+            onMonthChange: (year, month) => {
+                this.panelYear = year;
+                this.panelMonth = month;
+            }
+        });
+        this.openPopup([panel]);
+    }
+    openPopup(panels) {
+        const popup = new DatePickerLayer({
+            target: this.el,
+            panels,
+            onClose: () => {
+                if (this.popup === popup) {
+                    this.popup = undefined;
+                }
+            }
+        });
+        this.popup = popup;
+        popup.mount(document.body);
+    }
+    selectDate(date) {
+        if (combineDateConstraints(this.opts.min, this.opts.max, this.opts.disabledDate)(date))
+            return;
+        this.value = date;
+        this.popup?.destroy();
+        this.render();
+        this.opts.onChange?.(date);
+    }
+    destroy() {
+        this.popup?.destroy();
+        super.destroy();
+    }
+}

package/dist/date-picker/date-utils.d.ts

@@ -0,0 +1,63 @@
+/**
+ * 获取指定年月的天数
+ */
+export declare function getDaysInMonth(year: number, month: number): number;
+/**
+ * 获取指定年月第一天是星期几（0=周日, 6=周六）
+ */
+export declare function getFirstDayOfWeek(year: number, month: number): number;
+/**
+ * 判断两个日期是否是同一天
+ */
+export declare function isSameDay(a: Date, b: Date): boolean;
+/**
+ * 判断 date 是否在 [start, end] 范围内（含边界）
+ */
+export declare function isDateInRange(date: Date, start: Date, end: Date): boolean;
+/**
+ * 比较两个日期：返回负数表示 a < b，0 表示相等，正数表示 a > b
+ */
+export declare function compareDate(a: Date, b: Date): number;
+/**
+ * 日期增加/减少月份
+ */
+export declare function addMonths(date: Date, n: number): Date;
+/**
+ * 格式化日期为 yyyy-MM-dd
+ */
+export declare function formatDate(date: Date): string;
+/**
+ * 格式化日期为 yyyy年M月d日
+ */
+export declare function formatDateCN(date: Date): string;
+/**
+ * 将 min / max / disabledDate 合并为一个统一的日期禁用回调。
+ * min 和 max 支持传 Date 或带错误信息的对象。
+ */
+export declare function combineDateConstraints(min?: Date | {
+    min: Date;
+    errMsg: string;
+}, max?: Date | {
+    max: Date;
+    errMsg: string;
+}, disabledDate?: (date: Date) => boolean): (date: Date) => boolean;
+/**
+ * 解析 yyyy-MM-dd 字符串为 Date
+ */
+export declare function parseDate(str: string): Date | null;
+/**
+ * 生成日历网格数据，固定 42 个格子（6行×7列）
+ */
+export interface CalendarDay {
+    date: Date;
+    /** 该日期实际所属的月份（可能与当前视图月份不同） */
+    month: number;
+    day: number;
+    /** 是否属于当前视图月份 */
+    isCurrentMonth: boolean;
+}
+export declare function getCalendarDays(year: number, month: number): CalendarDay[];
+/** 中文星期缩写 */
+export declare const WEEK_DAYS: string[];
+/** 中文月份名 */
+export declare const MONTH_NAMES: string[];

package/dist/date-picker/date-utils.js

@@ -0,0 +1,130 @@
+/**
+ * 获取指定年月的天数
+ */
+export function getDaysInMonth(year, month) {
+    return new Date(year, month + 1, 0).getDate();
+}
+/**
+ * 获取指定年月第一天是星期几（0=周日, 6=周六）
+ */
+export function getFirstDayOfWeek(year, month) {
+    return new Date(year, month, 1).getDay();
+}
+/**
+ * 判断两个日期是否是同一天
+ */
+export function isSameDay(a, b) {
+    return a.getFullYear() === b.getFullYear()
+        && a.getMonth() === b.getMonth()
+        && a.getDate() === b.getDate();
+}
+/**
+ * 判断 date 是否在 [start, end] 范围内（含边界）
+ */
+export function isDateInRange(date, start, end) {
+    const t = date.getTime();
+    return t >= start.getTime() && t <= end.getTime();
+}
+/**
+ * 比较两个日期：返回负数表示 a < b，0 表示相等，正数表示 a > b
+ */
+export function compareDate(a, b) {
+    return a.getTime() - b.getTime();
+}
+/**
+ * 日期增加/减少月份
+ */
+export function addMonths(date, n) {
+    const d = new Date(date);
+    d.setMonth(d.getMonth() + n);
+    return d;
+}
+/**
+ * 格式化日期为 yyyy-MM-dd
+ */
+export function formatDate(date) {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, '0');
+    const d = String(date.getDate()).padStart(2, '0');
+    return `${y}-${m}-${d}`;
+}
+/**
+ * 格式化日期为 yyyy年M月d日
+ */
+export function formatDateCN(date) {
+    return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
+}
+/**
+ * 将 min / max / disabledDate 合并为一个统一的日期禁用回调。
+ * min 和 max 支持传 Date 或带错误信息的对象。
+ */
+export function combineDateConstraints(min, max, disabledDate) {
+    const minDate = min instanceof Date ? min : min?.min;
+    const maxDate = max instanceof Date ? max : max?.max;
+    return (date) => {
+        if (minDate && compareDate(date, minDate) < 0)
+            return true;
+        if (maxDate && compareDate(date, maxDate) > 0)
+            return true;
+        return disabledDate?.(date) ?? false;
+    };
+}
+/**
+ * 解析 yyyy-MM-dd 字符串为 Date
+ */
+export function parseDate(str) {
+    const match = str.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+    if (!match)
+        return null;
+    const d = new Date(+match[1], +match[2] - 1, +match[3]);
+    if (isNaN(d.getTime()))
+        return null;
+    return d;
+}
+export function getCalendarDays(year, month) {
+    const daysInMonth = getDaysInMonth(year, month);
+    const firstDay = getFirstDayOfWeek(year, month);
+    const days = [];
+    // 填充上月末尾
+    const prevMonthDays = getDaysInMonth(year, month - 1); // month-1 可能为 -1，但 Date 会自动处理
+    const prevMonth = month === 0 ? 11 : month - 1;
+    const prevYear = month === 0 ? year - 1 : year;
+    for (let i = firstDay - 1; i >= 0; i--) {
+        const day = prevMonthDays - i;
+        days.push({
+            date: new Date(prevYear, prevMonth, day),
+            month: prevMonth,
+            day,
+            isCurrentMonth: false
+        });
+    }
+    // 当月
+    for (let d = 1; d <= daysInMonth; d++) {
+        days.push({
+            date: new Date(year, month, d),
+            month,
+            day: d,
+            isCurrentMonth: true
+        });
+    }
+    // 填充下月开头
+    const remaining = 42 - days.length;
+    const nextMonth = month === 11 ? 0 : month + 1;
+    const nextYear = month === 11 ? year + 1 : year;
+    for (let d = 1; d <= remaining; d++) {
+        days.push({
+            date: new Date(nextYear, nextMonth, d),
+            month: nextMonth,
+            day: d,
+            isCurrentMonth: false
+        });
+    }
+    return days;
+}
+/** 中文星期缩写 */
+export const WEEK_DAYS = ['日', '一', '二', '三', '四', '五', '六'];
+/** 中文月份名 */
+export const MONTH_NAMES = [
+    '1月', '2月', '3月', '4月', '5月', '6月',
+    '7月', '8月', '9月', '10月', '11月', '12月'
+];

package/dist/date-picker/index.d.ts

@@ -0,0 +1,7 @@
+import './style.less';
+export { DatePicker } from './date-picker';
+export { DateRangePicker } from './range-picker';
+export type { DateRange } from './range-picker';
+export { CalendarPanel } from './calendar-panel';
+export { formatDate, formatDateCN, parseDate, isSameDay, isDateInRange, compareDate, getDaysInMonth, getFirstDayOfWeek, getCalendarDays, addMonths } from './date-utils';
+export type { CalendarDay } from './date-utils';

package/dist/date-picker/index.js

@@ -0,0 +1,5 @@
+import './style.css';
+export { DatePicker } from './date-picker';
+export { DateRangePicker } from './range-picker';
+export { CalendarPanel } from './calendar-panel';
+export { formatDate, formatDateCN, parseDate, isSameDay, isDateInRange, compareDate, getDaysInMonth, getFirstDayOfWeek, getCalendarDays, addMonths } from './date-utils';

package/dist/date-picker/layer.d.ts

@@ -0,0 +1,19 @@
+import { FloatingLayer } from '../floating-layer';
+import { CalendarPanel } from './calendar-panel';
+/**
+ * 日期选择浮层。挂载到 body，由 FloatingLayer 提供定位、滚动跟随、自动关闭。
+ * 单选包含一个日历面板，范围选择包含两个。
+ */
+export declare class DatePickerLayer extends FloatingLayer {
+    private readonly panels;
+    constructor(opts: {
+        target: HTMLElement;
+        panels: CalendarPanel[];
+        onClose?: () => void;
+    });
+    protected buildContent(): void;
+    /** 重绘面板，用于切换月份等需要整体重新构建内容的场景 */
+    refresh(): void;
+    /** 局部更新每个面板的 hover 预览 class */
+    setHoveredDate(hovered: Date | undefined): void;
+}

package/dist/date-picker/layer.js

@@ -0,0 +1,36 @@
+import { FloatingLayer } from '../floating-layer';
+/**
+ * 日期选择浮层。挂载到 body，由 FloatingLayer 提供定位、滚动跟随、自动关闭。
+ * 单选包含一个日历面板，范围选择包含两个。
+ */
+export class DatePickerLayer extends FloatingLayer {
+    constructor(opts) {
+        super({ target: opts.target, placement: 'bottomLeft', offset: 6, onClose: opts.onClose });
+        this.el.classList.add('wok-ui-ext-date-picker-popup');
+        if (opts.panels.length > 1) {
+            this.el.classList.add('wok-ui-ext-date-range-popup');
+        }
+        this.panels = opts.panels;
+    }
+    buildContent() {
+        if (this.panels.length > 1) {
+            this.panels.forEach(panel => {
+                this.addChild({
+                    classNames: 'wok-ui-ext-date-range-panel',
+                    children: panel
+                });
+            });
+        }
+        else {
+            this.addChild(this.panels[0]);
+        }
+    }
+    /** 重绘面板，用于切换月份等需要整体重新构建内容的场景 */
+    refresh() {
+        this.panels.forEach(p => p.refresh());
+    }
+    /** 局部更新每个面板的 hover 预览 class */
+    setHoveredDate(hovered) {
+        this.panels.forEach(p => p.setHoveredDate(hovered));
+    }
+}

package/dist/date-picker/range-picker.d.ts

@@ -0,0 +1,30 @@
+import { DivModule } from 'wok-ui';
+export type DateRange = [Date, Date];
+export declare class DateRangePicker extends DivModule {
+    private readonly opts;
+    private value?;
+    private hoveredDate?;
+    private popup?;
+    private textEl?;
+    constructor(opts: {
+        value?: DateRange;
+        placeholder?: string;
+        required?: boolean | string;
+        min?: Date | {
+            min: Date;
+            errMsg: string;
+        };
+        max?: Date | {
+            max: Date;
+            errMsg: string;
+        };
+        disabled?: boolean;
+        disabledDate?: (date: Date) => boolean;
+        onChange?: (range?: DateRange) => void;
+    });
+    private rangeText;
+    private updateText;
+    private togglePopup;
+    private handleDayClick;
+    destroy(): void;
+}

package/dist/date-picker/range-picker.js

@@ -0,0 +1,117 @@
+import { DivModule } from 'wok-ui';
+import { CalendarPanel } from './calendar-panel';
+import { DatePickerLayer } from './layer';
+import { formatDate, compareDate, addMonths, combineDateConstraints } from './date-utils';
+export class DateRangePicker extends DivModule {
+    constructor(opts) {
+        super('wok-ui-ext-date-range-picker wok-ui-ext-date-picker');
+        this.opts = opts;
+        this.addChild({
+            classNames: ['wok-ui-ext-date-picker-trigger', this.opts.disabled ? 'disabled' : ''],
+            children: {
+                tag: 'span',
+                classNames: 'wok-ui-ext-date-picker-text',
+                innerText: this.rangeText(),
+                postHandle: el => {
+                    this.textEl = el;
+                    if (!this.value) {
+                        el.parentElement?.classList.add('placeholder');
+                    }
+                }
+            },
+            onClick: () => {
+                if (this.opts.disabled)
+                    return;
+                this.togglePopup();
+            }
+        });
+    }
+    rangeText() {
+        if (!this.value) {
+            return this.opts.placeholder ?? '请选择日期范围';
+        }
+        const [start, end] = this.value;
+        if (compareDate(start, end) === 0) {
+            return `${formatDate(start)} ~ 结束日期`;
+        }
+        return `${formatDate(start)} ~ ${formatDate(end)}`;
+    }
+    updateText() {
+        if (this.textEl) {
+            this.textEl.innerText = this.rangeText();
+            if (this.value) {
+                this.textEl.parentElement?.classList.remove('placeholder');
+            }
+            else {
+                this.textEl.parentElement?.classList.add('placeholder');
+            }
+        }
+    }
+    togglePopup() {
+        if (this.popup) {
+            this.popup.destroy();
+            return;
+        }
+        this.hoveredDate = undefined;
+        const today = new Date();
+        const selected = () => this.value ?? [];
+        const target = this.value?.[0] ?? today;
+        const leftYear = target.getFullYear();
+        const leftMonth = target.getMonth();
+        const rightDate = addMonths(new Date(leftYear, leftMonth, 1), 1);
+        const disabledDate = combineDateConstraints(this.opts.min, this.opts.max, this.opts.disabledDate);
+        const buildPanel = (year, month) => new CalendarPanel({
+            year,
+            month,
+            selectedDates: selected,
+            today,
+            disabledDate,
+            onDayClick: date => this.handleDayClick(date, disabledDate),
+            onDayHover: date => {
+                this.hoveredDate = date;
+                this.popup?.setHoveredDate(date);
+            },
+            onMonthChange: () => { }
+        });
+        const popup = new DatePickerLayer({
+            target: this.el,
+            panels: [buildPanel(leftYear, leftMonth), buildPanel(rightDate.getFullYear(), rightDate.getMonth())],
+            onClose: () => {
+                if (this.popup === popup) {
+                    this.popup = undefined;
+                }
+            }
+        });
+        this.popup = popup;
+        popup.mount(document.body);
+    }
+    handleDayClick(date, disabledDate) {
+        if (disabledDate(date))
+            return;
+        if (!this.value) {
+            this.value = [date, date];
+            this.hoveredDate = date;
+            this.popup?.setHoveredDate(date);
+            this.updateText();
+            return;
+        }
+        const [prevStart, prevEnd] = this.value;
+        if (compareDate(prevStart, prevEnd) === 0) {
+            this.value = compareDate(date, prevStart) < 0 ? [date, prevStart] : [prevStart, date];
+            this.hoveredDate = undefined;
+            this.popup?.destroy();
+            this.updateText();
+            this.opts.onChange?.(this.value);
+        }
+        else {
+            this.value = [date, date];
+            this.hoveredDate = date;
+            this.popup?.refresh();
+            this.updateText();
+        }
+    }
+    destroy() {
+        this.popup?.destroy();
+        super.destroy();
+    }
+}

package/dist/date-picker/style.css

@@ -0,0 +1,161 @@
+.wok-ui-ext-date-picker {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+.wok-ui-ext-date-picker-trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 160px;
+  padding: 9px 18px;
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-xl);
+  font-size: var(--font-size-body);
+  color: var(--text-primary);
+  background: var(--bg-content);
+  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.wok-ui-ext-date-picker-trigger:hover {
+  border-color: var(--color-primary);
+}
+.wok-ui-ext-date-picker-trigger.placeholder {
+  color: var(--text-placeholder);
+}
+.wok-ui-ext-date-picker-trigger.disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.wok-ui-ext-date-picker-popup {
+  background: var(--bg-card);
+  border: 1px solid var(--border-medium);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+}
+.wok-ui-ext-calendar-panel {
+  padding: 16px 20px 20px;
+  width: 304px;
+}
+.wok-ui-ext-calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  padding: 0 4px;
+}
+.wok-ui-ext-calendar-header .wok-ui-ext-calendar-nav-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+  color: var(--text-tertiary);
+  font-size: var(--font-size-xs);
+  cursor: pointer;
+  transition: background var(--transition-speed), color var(--transition-speed);
+}
+.wok-ui-ext-calendar-header .wok-ui-ext-calendar-nav-btn:hover {
+  background: var(--bg-hover);
+  color: var(--color-primary);
+}
+.wok-ui-ext-calendar-header .wok-ui-ext-calendar-month-label {
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+}
+.wok-ui-ext-calendar-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: 8px;
+}
+.wok-ui-ext-calendar-weekday {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-tertiary);
+}
+.wok-ui-ext-calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+.wok-ui-ext-calendar-day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 34px;
+  font-size: var(--font-size-small);
+  color: var(--text-primary);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background var(--transition-speed), color var(--transition-speed);
+}
+.wok-ui-ext-calendar-day:hover:not(.disabled):not(.selected) {
+  background: var(--bg-hover);
+}
+.wok-ui-ext-calendar-day.adjacent-month {
+  color: var(--text-disabled);
+  cursor: default;
+}
+.wok-ui-ext-calendar-day.adjacent-month:hover {
+  background: transparent;
+}
+.wok-ui-ext-calendar-day.today:not(.selected) {
+  color: var(--color-primary);
+  font-weight: var(--font-weight-semibold);
+  border: 1px solid var(--color-primary);
+}
+.wok-ui-ext-calendar-day.selected {
+  background: var(--color-primary);
+  color: #fff;
+  font-weight: var(--font-weight-semibold);
+  border-radius: 0;
+}
+.wok-ui-ext-calendar-day.selected.range-start {
+  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+}
+.wok-ui-ext-calendar-day.selected.range-end {
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+}
+.wok-ui-ext-calendar-day.selected:not(.range-start):not(.range-end) {
+  border-radius: var(--radius-sm);
+}
+.wok-ui-ext-calendar-day.in-range {
+  background: var(--color-primary-light);
+  color: var(--color-primary);
+  border-radius: 0;
+}
+.wok-ui-ext-calendar-day.in-range-hover {
+  background: var(--color-primary-soft);
+  border-radius: 0;
+}
+.wok-ui-ext-calendar-day.disabled {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+.wok-ui-ext-calendar-day.disabled:hover {
+  background: transparent;
+}
+.wok-ui-ext-date-range-picker .wok-ui-ext-date-picker-trigger {
+  min-width: 240px;
+  width: auto;
+}
+.wok-ui-ext-date-range-popup {
+  display: flex;
+  flex-direction: row;
+}
+.wok-ui-ext-date-range-popup .wok-ui-ext-date-range-panel .wok-ui-ext-calendar-panel {
+  border-right: 1px solid var(--border-light);
+}
+.wok-ui-ext-date-range-popup .wok-ui-ext-date-range-panel .wok-ui-ext-calendar-panel:last-child {
+  border-right: none;
+}