wok-ui-ext 0.1.0

package/dist/collapse/style.css

@@ -0,0 +1,76 @@
+.wok-ui-ext-collapse {
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  background: var(--bg-card);
+}
+.wok-ui-ext-collapse .wok-ui-ext-panel {
+  border-bottom: 1px solid var(--border-light);
+}
+.wok-ui-ext-collapse .wok-ui-ext-panel:last-child {
+  border-bottom: none;
+}
+.wok-ui-ext-collapse.ghost {
+  border: none;
+  background: none;
+}
+.wok-ui-ext-collapse.ghost .wok-ui-ext-panel {
+  border-bottom: 1px solid var(--border-light);
+}
+.wok-ui-ext-collapse.ghost .wok-ui-ext-panel .wok-ui-ext-panel-header {
+  background: transparent;
+}
+.wok-ui-ext-panel .wok-ui-ext-panel-header {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background: var(--bg-content);
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s;
+  gap: 8px;
+}
+.wok-ui-ext-panel .wok-ui-ext-panel-header:hover {
+  background: var(--bg-hover);
+}
+.wok-ui-ext-panel .wok-ui-ext-panel-header.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.wok-ui-ext-panel .wok-ui-ext-panel-header .wok-ui-ext-panel-header-title {
+  flex: 1;
+  font-size: var(--font-size-normal);
+  color: var(--text-primary);
+  font-weight: 500;
+}
+.wok-ui-ext-panel .wok-ui-ext-panel-header .wok-ui-ext-panel-header-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: var(--text-tertiary);
+  font-size: 16px;
+  transition: transform 0.2s;
+}
+.wok-ui-ext-panel .wok-ui-ext-panel-header .wok-ui-ext-panel-header-arrow svg {
+  width: 16px;
+  height: 16px;
+}
+.wok-ui-ext-panel.open .wok-ui-ext-panel-header-arrow {
+  transform: rotate(180deg);
+}
+.wok-ui-ext-panel .wok-ui-ext-panel-body-wrapper {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.25s ease;
+}
+.wok-ui-ext-panel .wok-ui-ext-panel-body-wrapper .wok-ui-ext-panel-body {
+  padding: 0 16px 12px;
+  font-size: var(--font-size-normal);
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+.wok-ui-ext-panel.open .wok-ui-ext-panel-body-wrapper {
+  max-height: 1000px;
+}

package/dist/context-menu/context-menu.d.ts

@@ -0,0 +1,113 @@
+import { ConvertibleModule } from 'wok-ui';
+import { FloatingLayer } from '../floating-layer';
+import { IconInput } from '../icons';
+/**
+ * 菜单位置模式。
+ * - 'cursor': 跟随指针（默认）
+ * - 'top' | 'bottom' | 'left' | 'right': 锚定在触发元素的四边，空间不够时会自动调整
+ */
+export type MenuPosition = 'cursor' | 'top' | 'bottom' | 'left' | 'right';
+/**
+ * 菜单在次轴上的对齐方式。
+ * - 'start': top/bottom 时左对齐，left/right 时顶对齐（默认）
+ * - 'end': top/bottom 时右对齐，left/right 时底对齐
+ */
+export type MenuAlign = 'start' | 'end';
+/**
+ * 上下文菜单条目.
+ */
+export interface ContextMenuItem {
+    /**
+     * 菜单图标，可选.
+     */
+    icon?: IconInput;
+    /**
+     * 菜单标题，太长会显示省略号.
+     */
+    label: ConvertibleModule;
+    /**
+     * 是否是激活状态，可选.激活状态的菜单会显示为选中状态.不会触发点击回调.
+     */
+    active?: boolean;
+    /**
+     * 菜单点击后的回调.
+     */
+    callback?: () => void;
+    /**
+     * 子菜单，如果有值，则点击菜单会继续显示子菜单.如果没值，则点击菜单后会关闭掉上下文菜单.
+     */
+    children?: ContextMenuItem[];
+}
+interface ContextMenuOpts {
+    /**
+     * 父菜单
+     */
+    parent?: ContextMenu;
+    /**
+     * 菜单
+     */
+    menu: ContextMenuItem[];
+    /**
+     * 事件，用于定位和阻止冒泡
+     */
+    evt: MouseEvent;
+    /**
+     * 菜单位置模式，默认 'cursor'
+     */
+    position?: MenuPosition;
+    /**
+     * 次轴对齐方式，默认 'start'
+     */
+    align?: MenuAlign;
+    /**
+     * 销毁时的回调
+     */
+    onDestroy?: () => void;
+}
+/**
+ * 上下文菜单，基于 FloatingLayer 实现定位、自动翻转、外部点击/Esc/滚动自动关闭。
+ * 上下文菜单可以有无限深的层级。每个上下文菜单中包含了菜单条目列表，
+ * 每个条目点击后有可能直接触发回调，也有可能触发弹出子菜单，子菜单是新的上下文菜单实例。
+ * 每个上下文菜单之间是单独的模块，独自挂载到 body 上，没有从属关系，内部通过记录关联，适当的进行销毁操作。
+ * 每个上下文菜单销毁，都会自动销毁弹出的子菜单。
+ */
+export declare class ContextMenu extends FloatingLayer {
+    private readonly opts;
+    /**
+     * 每个上下文永远只能同一时刻弹出一个子菜单，如果其它条目再次触发弹出子菜单，则销毁已经弹出的子菜单
+     */
+    private subMenu?;
+    constructor(opts: ContextMenuOpts);
+    protected buildContent(): void;
+    /**
+     * 覆写内部区域判定：子菜单也属于菜单内部，点击子菜单不关闭父菜单。
+     * 注意不包含触发元素（target），点击触发元素同样视为外部点击并关闭菜单。
+     */
+    protected containsTarget(target: Node): boolean;
+    getParent(): ContextMenu | undefined;
+    /**
+     * 获取根菜单模块
+     * @returns
+     */
+    getRoot(): ContextMenu;
+    /**
+     * 判定指定的元素是否在模块内部，如果在子菜单的模块中，也算包含
+     * @param el
+     */
+    containsEl(el: HTMLElement): boolean;
+    destroy(): void;
+    /**
+     * 根据菜单位置模式解析 FloatingLayer 的定位参数。
+     * cursor 模式用点击坐标作为锚点；锚定模式用触发元素定位。
+     */
+    private static __resolveLayerOpts;
+    /**
+     * position + align 映射为 FloatingLayer 的 placement。
+     */
+    private static __resolvePlacement;
+}
+/**
+ * @deprecated 拼写错误，请使用 ContextMenu
+ */
+export declare const ConextMenu: typeof ContextMenu;
+export {};

package/dist/context-menu/context-menu.js

@@ -0,0 +1,150 @@
+import { FloatingLayer } from '../floating-layer';
+import { resolveIcon, IconAngleRight } from '../icons';
+/**
+ * 上下文菜单，基于 FloatingLayer 实现定位、自动翻转、外部点击/Esc/滚动自动关闭。
+ * 上下文菜单可以有无限深的层级。每个上下文菜单中包含了菜单条目列表，
+ * 每个条目点击后有可能直接触发回调，也有可能触发弹出子菜单，子菜单是新的上下文菜单实例。
+ * 每个上下文菜单之间是单独的模块，独自挂载到 body 上，没有从属关系，内部通过记录关联，适当的进行销毁操作。
+ * 每个上下文菜单销毁，都会自动销毁弹出的子菜单。
+ */
+export class ContextMenu extends FloatingLayer {
+    constructor(opts) {
+        super(ContextMenu.__resolveLayerOpts(opts));
+        this.opts = opts;
+        this.el.classList.add('wok-ui-ext-context-menu');
+    }
+    buildContent() {
+        for (const item of this.opts.menu) {
+            this.addChild({
+                classNames: ['wok-ui-ext-context-menu-item', item.active ? 'active' : ''],
+                children: add => {
+                    if (item.icon) {
+                        add({
+                            classNames: 'icon',
+                            children: resolveIcon(item.icon)
+                        });
+                    }
+                    add({
+                        classNames: 'text',
+                        children: item.label
+                    });
+                    if (item.children && item.children.length) {
+                        add(new IconAngleRight());
+                    }
+                },
+                onClick: ev => {
+                    ev.stopPropagation();
+                    if (item.children && item.children.length) {
+                        if (this.subMenu) {
+                            this.subMenu.destroy();
+                        }
+                        this.subMenu = new ContextMenu({
+                            evt: ev,
+                            menu: item.children,
+                            parent: this
+                        });
+                        this.subMenu.mount(document.body);
+                        return;
+                    }
+                    // 销毁所有上下文菜单，销毁根菜单，就会自动销毁所有
+                    this.getRoot().destroy();
+                    if (item.callback) {
+                        item.callback();
+                    }
+                }
+            });
+        }
+        // 菜单内部滚动不冒泡，避免触发外层滚动相关逻辑
+        this.el.onscroll = ev => ev.stopPropagation();
+    }
+    /**
+     * 覆写内部区域判定：子菜单也属于菜单内部，点击子菜单不关闭父菜单。
+     * 注意不包含触发元素（target），点击触发元素同样视为外部点击并关闭菜单。
+     */
+    containsTarget(target) {
+        if (this.el.contains(target))
+            return true;
+        if (this.subMenu && this.subMenu.containsTarget(target))
+            return true;
+        return false;
+    }
+    getParent() {
+        return this.opts.parent;
+    }
+    /**
+     * 获取根菜单模块
+     * @returns
+     */
+    getRoot() {
+        let root = this;
+        while (true) {
+            const parent = root.getParent();
+            if (parent) {
+                root = parent;
+            }
+            else {
+                break;
+            }
+        }
+        return root;
+    }
+    /**
+     * 判定指定的元素是否在模块内部，如果在子菜单的模块中，也算包含
+     * @param el
+     */
+    containsEl(el) {
+        return this.containsTarget(el);
+    }
+    destroy() {
+        if (this.subMenu) {
+            this.subMenu.destroy();
+            this.subMenu = undefined;
+        }
+        this.el.onscroll = null;
+        super.destroy();
+    }
+    /**
+     * 根据菜单位置模式解析 FloatingLayer 的定位参数。
+     * cursor 模式用点击坐标作为锚点；锚定模式用触发元素定位。
+     */
+    static __resolveLayerOpts(opts) {
+        const position = opts.position || 'cursor';
+        const align = opts.align || 'start';
+        const triggerEl = opts.evt.currentTarget instanceof HTMLElement ? opts.evt.currentTarget : null;
+        // 跟随指针，或触发元素不可用时回退到指针定位
+        if (position === 'cursor' || !triggerEl) {
+            return {
+                anchor: { x: opts.evt.clientX, y: opts.evt.clientY },
+                placement: 'bottomLeft',
+                offset: 0,
+                scrollBehavior: 'destroy'
+            };
+        }
+        const placement = ContextMenu.__resolvePlacement(position, align);
+        return {
+            target: triggerEl,
+            placement,
+            offset: 0,
+            scrollBehavior: 'destroy'
+        };
+    }
+    /**
+     * position + align 映射为 FloatingLayer 的 placement。
+     */
+    static __resolvePlacement(position, align) {
+        switch (position) {
+            case 'bottom':
+                return align === 'end' ? 'bottomRight' : 'bottomLeft';
+            case 'top':
+                return align === 'end' ? 'topRight' : 'topLeft';
+            case 'left':
+                return align === 'end' ? 'leftBottom' : 'leftTop';
+            case 'right':
+                return align === 'end' ? 'rightBottom' : 'rightTop';
+        }
+    }
+}
+/**
+ * @deprecated 拼写错误，请使用 ContextMenu
+ */
+export const ConextMenu = ContextMenu;

package/dist/context-menu/index.d.ts

@@ -0,0 +1,30 @@
+import { ContextMenuItem, type MenuPosition, type MenuAlign } from './context-menu';
+import './style.less';
+export interface ShowContextMenuOpts {
+    /**
+     * 菜单
+     */
+    menu: ContextMenuItem[] | ((add: (...item: ContextMenuItem[]) => void) => void);
+    /**
+     * 事件，用于定位
+     */
+    evt: MouseEvent;
+    /**
+     * 菜单位置模式。
+     * - 'cursor'：跟随指针（默认）
+     * - 'top' | 'bottom' | 'left' | 'right'：锚定在触发元素的四边，空间不够时会自动调整
+     */
+    position?: MenuPosition;
+    /**
+     * 次轴对齐方式。
+     * - 'start'：top/bottom 时左对齐，left/right 时顶对齐（默认）
+     * - 'end'：top/bottom 时右对齐，left/right 时底对齐
+     */
+    align?: MenuAlign;
+}
+/**
+ * 显示上下文菜单
+ * @param opts
+ */
+export declare function showContextMenu(opts: ShowContextMenuOpts): void;
+export * from './context-menu';

package/dist/context-menu/index.js

@@ -0,0 +1,42 @@
+import { ContextMenu } from './context-menu';
+import './style.css';
+// 实例数组
+const instances = [];
+/**
+ * 显示上下文菜单
+ * @param opts
+ */
+export function showContextMenu(opts) {
+    opts.evt.stopPropagation();
+    // 先销毁所有实例
+    instances.forEach(instance => instance.destroy());
+    let menu = [];
+    if (Array.isArray(opts.menu)) {
+        menu = opts.menu;
+    }
+    else {
+        const add = (...item) => {
+            menu.push(...item);
+        };
+        opts.menu(add);
+    }
+    if (!menu.length) {
+        console.warn('showContextMenu: menu is empty, skip showing');
+        return;
+    }
+    const instance = new ContextMenu({
+        menu,
+        evt: opts.evt,
+        position: opts.position,
+        align: opts.align,
+        onDestroy: () => {
+            const index = instances.indexOf(instance);
+            if (index !== -1) {
+                instances.splice(index, 1);
+            }
+        }
+    });
+    instance.mount(document.body);
+    instances.push(instance);
+}
+export * from './context-menu';

package/dist/context-menu/style.css

@@ -0,0 +1,46 @@
+.wok-ui-ext-floating-layer.wok-ui-ext-context-menu {
+  border-radius: var(--radius-lg);
+  overflow: auto;
+  position: fixed;
+  box-shadow: var(--shadow-lg) !important;
+  border: 1px solid var(--color-border);
+  max-width: 300px;
+  max-height: 100vh;
+  z-index: 1100;
+}
+.wok-ui-ext-floating-layer.wok-ui-ext-context-menu > .wok-ui-ext-context-menu-item {
+  padding: 10px 20px;
+  cursor: pointer;
+  background-color: var(--bg-card);
+  border-bottom: 1px solid var(--color-border);
+  font-size: var(--font-size-body);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.wok-ui-ext-floating-layer.wok-ui-ext-context-menu > .wok-ui-ext-context-menu-item:last-child {
+  border-bottom: none;
+}
+.wok-ui-ext-floating-layer.wok-ui-ext-context-menu > .wok-ui-ext-context-menu-item:hover {
+  background-color: var(--bg-hover);
+}
+.wok-ui-ext-floating-layer.wok-ui-ext-context-menu > .wok-ui-ext-context-menu-item.active {
+  background: var(--color-primary);
+  color: white;
+  pointer-events: none;
+  cursor: default;
+}
+.wok-ui-ext-floating-layer.wok-ui-ext-context-menu > .wok-ui-ext-context-menu-item.active .icon {
+  color: white;
+}
+.wok-ui-ext-floating-layer.wok-ui-ext-context-menu > .wok-ui-ext-context-menu-item .text {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-break: break-all;
+  overflow: hidden;
+  flex-grow: 1;
+}
+.wok-ui-ext-floating-layer.wok-ui-ext-context-menu > .wok-ui-ext-context-menu-item .icon {
+  flex-shrink: 0;
+  color: var(--text-muted);
+}

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

@@ -0,0 +1,44 @@
+import { FullRenderingModule } from 'wok-ui';
+/**
+ * 共享日历面板组件。
+ * 负责月/年导航和 42 格日历渲染，不关心单选还是范围选择。
+ */
+export declare class CalendarPanel extends FullRenderingModule {
+    private year;
+    private month;
+    private readonly today;
+    private readonly selectedDates;
+    private readonly hoveredDate;
+    private readonly disabledDate?;
+    private readonly onDayClick;
+    private readonly onDayHover?;
+    private readonly onMonthChange?;
+    private readonly dayCellMap;
+    constructor(opts: {
+        year: number;
+        month: number;
+        selectedDates: () => Date[];
+        hoveredDate?: () => Date | undefined;
+        today?: Date;
+        disabledDate?: (date: Date) => boolean;
+        onDayClick: (date: Date) => void;
+        onDayHover?: (date: Date) => void;
+        onMonthChange?: (year: number, month: number) => void;
+    });
+    protected buildContent(): void;
+    private buildHeader;
+    private buildWeekdays;
+    private buildGrid;
+    private buildDayCell;
+    /**
+     * 局部更新 hover 范围预览的 class，不重新渲染整个面板。
+     */
+    setHoveredDate(hovered: Date | undefined): void;
+    private clearHoverClass;
+    private goToPrevMonth;
+    private goToNextMonth;
+    /**
+     * 公开的刷新方法，供外部强制重绘面板（如 hover 预览变化）。
+     */
+    refresh(): void;
+}

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

@@ -0,0 +1,180 @@
+import { FullRenderingModule } from 'wok-ui';
+import { compareDate, getCalendarDays, isSameDay, MONTH_NAMES, WEEK_DAYS } from './date-utils';
+/**
+ * 共享日历面板组件。
+ * 负责月/年导航和 42 格日历渲染，不关心单选还是范围选择。
+ */
+export class CalendarPanel extends FullRenderingModule {
+    constructor(opts) {
+        super('wok-ui-ext-calendar-panel');
+        this.dayCellMap = new Map();
+        this.year = opts.year;
+        this.month = opts.month;
+        this.today = opts.today ?? new Date();
+        this.selectedDates = opts.selectedDates;
+        this.hoveredDate = opts.hoveredDate ?? (() => undefined);
+        this.disabledDate = opts.disabledDate;
+        this.onDayClick = opts.onDayClick;
+        this.onDayHover = opts.onDayHover;
+        this.onMonthChange = opts.onMonthChange;
+        this.render();
+    }
+    buildContent() {
+        this.dayCellMap.clear();
+        this.addChild(this.buildHeader());
+        this.addChild(this.buildWeekdays());
+        this.addChild(this.buildGrid());
+    }
+    buildHeader() {
+        return {
+            classNames: 'wok-ui-ext-calendar-header',
+            children: [
+                {
+                    classNames: 'wok-ui-ext-calendar-nav-btn',
+                    children: '◀',
+                    onClick: () => this.goToPrevMonth()
+                },
+                {
+                    classNames: 'wok-ui-ext-calendar-month-label',
+                    children: `${this.year}年 ${MONTH_NAMES[this.month]}`
+                },
+                {
+                    classNames: 'wok-ui-ext-calendar-nav-btn',
+                    children: '▶',
+                    onClick: () => this.goToNextMonth()
+                }
+            ]
+        };
+    }
+    buildWeekdays() {
+        return {
+            classNames: 'wok-ui-ext-calendar-weekdays',
+            children: WEEK_DAYS.map(day => ({
+                classNames: 'wok-ui-ext-calendar-weekday',
+                children: day
+            }))
+        };
+    }
+    buildGrid() {
+        const days = getCalendarDays(this.year, this.month);
+        const selected = this.selectedDates();
+        const hovered = this.hoveredDate();
+        return {
+            classNames: 'wok-ui-ext-calendar-grid',
+            children: add => {
+                for (const day of days) {
+                    add(this.buildDayCell(day, selected, hovered));
+                }
+            }
+        };
+    }
+    buildDayCell(day, selected, hovered) {
+        const classNames = ['wok-ui-ext-calendar-day'];
+        const isToday = isSameDay(day.date, this.today);
+        const isDisabled = this.disabledDate?.(day.date) ?? false;
+        if (!day.isCurrentMonth) {
+            classNames.push('adjacent-month');
+        }
+        if (isToday) {
+            classNames.push('today');
+        }
+        if (isDisabled) {
+            classNames.push('disabled');
+        }
+        // 选中状态（单选或范围两端）
+        const selectedIdx = selected.findIndex(s => isSameDay(s, day.date));
+        if (selectedIdx !== -1) {
+            classNames.push('selected');
+            if (selected.length > 1) {
+                classNames.push(selectedIdx === 0 ? 'range-start' : 'range-end');
+            }
+        }
+        // 范围内中间状态（仅范围选择）
+        if (selected.length === 2 && !isDisabled) {
+            const [s1, s2] = selected;
+            const cmp1 = compareDate(day.date, s1);
+            const cmp2 = compareDate(day.date, s2);
+            if (cmp1 > 0 && cmp2 < 0) {
+                classNames.push('in-range');
+            }
+        }
+        // hover 范围预览
+        if (hovered &&
+            selected.length === 1 &&
+            !isDisabled &&
+            classNames.indexOf('selected') === -1) {
+            const cmp1 = compareDate(day.date, selected[0]);
+            const cmp2 = compareDate(day.date, hovered);
+            if ((cmp1 > 0 && cmp2 < 0) || (cmp1 < 0 && cmp2 > 0)) {
+                classNames.push('in-range-hover');
+            }
+        }
+        return {
+            classNames,
+            children: String(day.day),
+            onClick: isDisabled ? undefined : () => this.onDayClick(day.date),
+            postHandle: el => {
+                this.dayCellMap.set(day.date.getTime(), el);
+                if (!isDisabled && this.onDayHover) {
+                    el.addEventListener('mouseenter', () => this.onDayHover(day.date));
+                }
+            }
+        };
+    }
+    /**
+     * 局部更新 hover 范围预览的 class，不重新渲染整个面板。
+     */
+    setHoveredDate(hovered) {
+        const selected = this.selectedDates();
+        if (selected.length !== 1 || !hovered) {
+            this.clearHoverClass();
+            return;
+        }
+        const start = selected[0];
+        for (const [time, el] of this.dayCellMap) {
+            const date = new Date(time);
+            const isDisabled = this.disabledDate?.(date) ?? false;
+            if (isDisabled || isSameDay(date, start)) {
+                el.classList.remove('in-range-hover');
+                continue;
+            }
+            const cmpStart = compareDate(date, start);
+            const cmpHovered = compareDate(date, hovered);
+            const inRange = (cmpStart > 0 && cmpHovered < 0) || (cmpStart < 0 && cmpHovered > 0);
+            el.classList.toggle('in-range-hover', inRange);
+        }
+    }
+    clearHoverClass() {
+        for (const el of this.dayCellMap.values()) {
+            el.classList.remove('in-range-hover');
+        }
+    }
+    goToPrevMonth() {
+        if (this.month === 0) {
+            this.year -= 1;
+            this.month = 11;
+        }
+        else {
+            this.month -= 1;
+        }
+        this.render();
+        this.onMonthChange?.(this.year, this.month);
+    }
+    goToNextMonth() {
+        if (this.month === 11) {
+            this.year += 1;
+            this.month = 0;
+        }
+        else {
+            this.month += 1;
+        }
+        this.render();
+        this.onMonthChange?.(this.year, this.month);
+    }
+    /**
+     * 公开的刷新方法，供外部强制重绘面板（如 hover 预览变化）。
+     */
+    refresh() {
+        this.render();
+    }
+}