weifuwu 0.38.2 → 0.40.0

package/dist/client/locale/en_US.d.ts

@@ -30,5 +30,20 @@ export declare const enUS: {
         Drawer: {
             ariaLabel: string;
         };
+        DatePicker: {
+            w0: string;
+            w1: string;
+            w2: string;
+            w3: string;
+            w4: string;
+            w5: string;
+            w6: string;
+            hour: string;
+            minute: string;
+            time: string;
+            confirm: string;
+            cancel: string;
+            placeholder: string;
+        };
     };
 };

package/dist/client/locale/zh_CN.d.ts

@@ -30,5 +30,20 @@ export declare const zhCN: {
         Drawer: {
             ariaLabel: string;
         };
+        DatePicker: {
+            w0: string;
+            w1: string;
+            w2: string;
+            w3: string;
+            w4: string;
+            w5: string;
+            w6: string;
+            hour: string;
+            minute: string;
+            time: string;
+            confirm: string;
+            cancel: string;
+            placeholder: string;
+        };
     };
 };

package/dist/client/popup.d.ts

@@ -0,0 +1,19 @@
+/**
+ * weifuwu/client — 弹出层定位工具
+ *
+ * 基于 position: fixed 的坐标计算，替代 CSS absolute 定位。
+ * 配合 createPortal 使用，让弹出层不受父级 overflow/transform 影响。
+ */
+export interface FixedPos {
+    top: number;
+    left: number;
+}
+export type Placement = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * 根据触发元素和方向计算弹出层的 fixed 坐标
+ * @param el 触发元素
+ * @param placement 弹出方向
+ * @param gap 间距（px），默认 6
+ * @param center 是否居中于触发元素，默认 true
+ */
+export declare function computeFixedPos(el: HTMLElement, placement?: Placement, gap?: number, center?: boolean): FixedPos;

package/dist/client/render.d.ts

@@ -6,9 +6,9 @@
  *
  * 支持：
  *   - key 属性（keyed diff）
- *   - ref 回调（挂载/卸载）
- *   - ctx.ui.$ 持久化状态
- *   - ctx.ui.ready 首次执行标记
+ *   - ctx.ui.onmount/onmounted/onunmount/onupdate 生命周期
+ *
+ * 状态管理：组件使用闭包变量 + ctx.ui.render() 手动触发重渲染。
  */
 import type { VNode } from './vnode.ts';
 import type { WfuiContext } from './types.ts';

package/dist/client/router.d.ts

@@ -11,4 +11,4 @@ export interface RouterOptions {
 }
 export declare const layoutDepth: WeakMap<any, number>;
 export declare function router(opts: RouterOptions): AppMiddleware;
-export declare function RouteView(_props: {}, ctx: WfuiContext): any;
+export declare function RouteView(_props: {}, ctx: WfuiContext): () => any;

package/dist/client/types.d.ts

@@ -8,12 +8,18 @@ export interface WfuiContext {
     ui: {
         /** 触发组件重渲染 */
         render: () => void;
-        /** 标记脏状态，下个微任务批量渲染（嵌套突变后用） */
+        /** 标记脏状态，下一个微任务批量渲染 */
         dirty: () => void;
-        /** 当前组件持久化状态（Proxy 自动 dirty：$.x = val 自动触发渲染） */
-        $: Record<string, any>;
-        /** 首次执行标记（true 表示已初始化） */
-        ready: boolean;
+        /** 创建响应式状态容器：$.x = val 自动触发 dirty()（微任务批量渲染） */
+        $: () => Record<string, any>;
+        /** 组件首次渲染后触发（DOM 未创建） */
+        onmount: (fn: () => void) => void;
+        /** 组件 DOM 创建后触发，接收根元素，返回值作为 cleanup */
+        onmounted: (fn: (el: Element) => (() => void) | void) => void;
+        /** 组件移除前清理 */
+        onunmount: (fn: () => void) => void;
+        /** props 变化时触发，接收旧 props */
+        onupdate: (fn: (prevProps: any) => void) => void;
     };
     /** 路由（由 router 中间件注入） */
     route?: {

package/dist/client/vnode.d.ts

@@ -7,7 +7,7 @@
  *   --jsxImportSource=weifuwu/client
  */
 import type { WfuiContext } from './types.ts';
-export type VNodeType = string | Component | typeof Fragment;
+export type VNodeType = string | Component | typeof Fragment | typeof Portal;
 export interface VNode {
     type: VNodeType;
     props: Record<string, any>;
@@ -18,9 +18,15 @@ export interface VNode {
     _child?: any;
     /** ref 回调返回的清理函数，卸载时由框架调用 */
     _cleanup?: (() => void) | undefined;
+    /** Portal 子容器 DOM */
+    _portalEl?: HTMLDivElement | undefined;
+    /** 两阶段组件的 render 函数（mount 返回的函数） */
+    _render?: (props: any) => VNode | null;
 }
-export type Component<P = {}> = (props: P, ctx: WfuiContext) => VNode | null;
+export type Component<P = {}> = (initProps: P, ctx: WfuiContext) => ((props: P) => VNode | null) | null;
 export declare const Fragment: unique symbol;
+/** Portal — 将子 VNode 渲染到 document.body 下的独立容器 */
+export declare const Portal: unique symbol;
 /** JSX 类型声明 — 使 TypeScript 理解自定义 JSX 运行时 */
 declare global {
     namespace JSX {
@@ -39,3 +45,6 @@ export declare function h(type: VNodeType, props: Record<string, any> | null, ..
 export declare function isNative(vnode: VNode): boolean;
 export declare function isComponent(vnode: VNode): boolean;
 export declare function isFragment(vnode: VNode): boolean;
+export declare function isPortal(vnode: VNode): boolean;
+/** Portal VNode — 子节点渲染到 document.body#__wf_portal 中 */
+export declare function createPortal(children: any, portalKey?: string): VNode;

package/dist/components/Chart/Chart.d.ts

@@ -0,0 +1,15 @@
+/**
+ * weifuwu/components — Chart
+ */
+import type { Component } from '../../client/vnode.ts';
+import type { DataPoint, ChartType, ChartOptions } from './chart-utils.ts';
+export type { DataPoint, ChartType, ChartOptions };
+export interface ChartProps {
+    type?: ChartType;
+    data: DataPoint[];
+    options?: ChartOptions;
+    title?: string;
+    area?: boolean;
+    className?: string;
+}
+export declare const Chart: Component<ChartProps>;

package/dist/components/Chart/chart-utils.d.ts

@@ -0,0 +1,53 @@
+/**
+ * weifuwu/components — Chart 纯函数坐标计算
+ *
+ * 无 DOM 依赖，可测试。
+ */
+export type ChartType = 'line' | 'bar' | 'pie';
+export interface DataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+export interface ChartOptions {
+    width?: number;
+    height?: number;
+    padding?: number;
+}
+export interface ScaleLinear {
+    (v: number): number;
+    invert?(v: number): number;
+    domain: [number, number];
+    range: [number, number];
+}
+export declare function scaleLinear(domain: [number, number], range: [number, number]): ScaleLinear;
+export declare function linePath(data: DataPoint[], xScale: ScaleLinear, yScale: ScaleLinear): string;
+export declare function areaPath(data: DataPoint[], xScale: ScaleLinear, yScale: ScaleLinear, yBase: number): string;
+export interface BarRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+    label: string;
+    value: number;
+}
+export declare function barRects(data: DataPoint[], xScale: ScaleLinear, yScale: ScaleLinear, barWidth?: number): BarRect[];
+export interface Arc {
+    d: string;
+    color: string;
+    label: string;
+    value: number;
+    centroid: {
+        x: number;
+        y: number;
+    };
+}
+export declare function pieArcs(data: DataPoint[], cx: number, cy: number, radius: number): Arc[];
+export declare function getDefaultColor(index: number): string;
+export interface Tick {
+    value: number;
+    y: number;
+    label: string;
+}
+export declare function getYTicks(yScale: ScaleLinear, tickCount?: number): Tick[];

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,18 @@
+/**
+ * weifuwu/components — DatePicker
+ *
+ * 四合一日期选择器，支持 mode: date | datetime | time | range
+ * 使用 createPortal + position:fixed 定位弹出层。
+ *
+ * 状态管理：闭包变量 + ctx.ui.render()
+ */
+import type { Component } from '../../client/vnode.ts';
+export type DatePickerMode = 'date' | 'datetime' | 'time' | 'range';
+export interface DatePickerProps {
+    mode?: DatePickerMode;
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+}
+export declare const DatePicker: Component<DatePickerProps>;

package/dist/components/DatePicker/calendar-utils.d.ts

@@ -0,0 +1,30 @@
+/**
+ * weifuwu/components — DatePicker 日期计算工具
+ *
+ * 纯函数，无 DOM 依赖，可测试。
+ */
+export interface CalendarDay {
+    year: number;
+    month: number;
+    day: number;
+    isOtherMonth: boolean;
+    isToday: boolean;
+}
+export declare function getWeekdays(): string[];
+export declare function isToday(year: number, month: number, day: number): boolean;
+export declare function getDaysInMonth(year: number, month: number): number;
+export declare function getFirstDayOfMonth(year: number, month: number): number;
+/** 生成一个月历网格（6 行 × 7 列 = 42 格） */
+export declare function getCalendarGrid(year: number, month: number): CalendarDay[][];
+/** 格式化日期 */
+export declare function formatDate(year: number, month: number, day: number): string;
+export declare function formatTime(hour: number, minute: number): string;
+export declare function formatDateTime(year: number, month: number, day: number, hour: number, minute: number): string;
+/** 小时选项（00-23） */
+export declare function hourOptions(): number[];
+/** 分钟选项（00-59，步长 5） */
+export declare function minuteOptions(): number[];
+/** 日期比较：a 是否在 b 之前 */
+export declare function isBefore(a: Date, b: Date): boolean;
+/** 日期比较：a 是否在 b 之后 */
+export declare function isAfter(a: Date, b: Date): boolean;

package/dist/components/Dropdown/Dropdown.d.ts

@@ -1,3 +1,6 @@
+/**
+ * weifuwu/components — Dropdown
+ */
 import type { Component } from '../../client/vnode.ts';
 export interface DropdownItem {
     label: string;

package/dist/components/Editor/Editor.d.ts

@@ -0,0 +1,13 @@
+/**
+ * weifuwu/components — Editor
+ *
+ * 富文本编辑器组件，基于 contentEditable + document.execCommand。
+ * 零外部依赖，纯函数 (props, ctx) => VNode。
+ *
+ * 使用两阶段模型 + VDOM innerHTML 支持。
+ * 状态管理：闭包变量 + ctx.ui.render()
+ */
+import type { Component } from '../../client/vnode.ts';
+import type { EditorProps } from './tools/types.ts';
+export type { EditorProps, ToolbarItem } from './tools/types.ts';
+export declare const Editor: Component<EditorProps>;

package/dist/components/Editor/tools/format.d.ts

@@ -0,0 +1,10 @@
+/**
+ * weifuwu/components/Editor/tools — 格式化命令
+ */
+import type { FormatState, ToolbarItem } from './types.ts';
+/** 查询当前选区格式状态 */
+export declare function queryFormats(): FormatState;
+/** 执行 document.execCommand */
+export declare function exec(cmd: string, value?: string): void;
+/** 根据工具项执行格式化 */
+export declare function execFormat(item: ToolbarItem): void;

package/dist/components/Editor/tools/table.d.ts

@@ -0,0 +1,7 @@
+/**
+ * weifuwu/components/Editor/tools — 表格工具
+ */
+/** 在光标处插入表格 HTML */
+export declare function insertTable(rows: number, cols: number): void;
+/** 渲染 6×6 表格选择网格 */
+export declare function renderTableGrid(hoverRow: number, hoverCol: number, onSelect: (rows: number, cols: number) => void, onHover: (row: number, col: number) => void, onLeave: () => void): any;

package/dist/components/Editor/tools/toolbar.d.ts

@@ -0,0 +1,9 @@
+/**
+ * weifuwu/components/Editor/tools — 工具栏渲染
+ */
+import type { VNode } from '../../../client/vnode.ts';
+import type { FormatState, ToolbarItem } from './types.ts';
+export declare const DEFAULT_TOOLBAR: ToolbarItem[];
+export declare const TOOLBAR_LABELS: Record<ToolbarItem, string>;
+export declare const TOOLBAR_TITLES: Record<ToolbarItem, string>;
+export declare function renderToolbar(items: ToolbarItem[], active: FormatState, isSource: boolean, onItem: (item: ToolbarItem) => void, customRender?: Record<string, (item: ToolbarItem) => VNode>): VNode;

package/dist/components/Editor/tools/types.d.ts

@@ -0,0 +1,15 @@
+/**
+ * weifuwu/components/Editor/tools — 类型定义
+ */
+export type ToolbarItem = 'bold' | 'italic' | 'underline' | 'h1' | 'h2' | 'h3' | 'ul' | 'ol' | 'blockquote' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'hr' | 'image' | 'table' | 'link' | 'clear' | 'source';
+export interface EditorProps {
+    value?: string;
+    onChange?: (html: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    minHeight?: string;
+    toolbar?: ToolbarItem[];
+    /** 图片上传回调 — 接收 File 返回图片 URL。不传时弹出 URL 输入框 */
+    onUpload?: (file: File) => Promise<string>;
+}
+export type FormatState = Record<string, boolean>;

package/dist/components/FileUpload/FileUpload.d.ts

@@ -1,3 +1,6 @@
+/**
+ * weifuwu/components — FileUpload
+ */
 import type { Component } from '../../client/vnode.ts';
 export interface FileUploadProps {
     accept?: string;

package/dist/components/Img/Img.d.ts

@@ -1,7 +1,5 @@
 /**
  * weifuwu/components — Img
- *
- * `<img>` 增强组件。支持 fallback、loading="lazy"。
  */
 import type { Component } from '../../client/vnode.ts';
 export interface ImgProps {

package/dist/components/InView/InView.d.ts

@@ -1,31 +1,16 @@
 /**
  * weifuwu/components — InView
  *
- * 进入视窗组件。通过 IntersectionObserver 监听元素是否进入视窗，
- * 实现内容懒加载：只有用户滚动到该区域时才渲染 children。
- *
- * 用法：
- *   <InView>
- *     <ExpensiveComponent />
- *   </InView>
- *
- *   <InView once={false} rootMargin="200px">
- *     <img src="large.jpg" />
- *   </InView>
+ * 组件挂载后用 ctx.ui.onmounted 获取根元素，设置 IntersectionObserver。
+ * 进入视窗后替换占位符为真实内容。
  */
 import type { Component } from '../../client/vnode.ts';
 export interface InViewProps {
-    /** 是否只触发一次（默认 true，进入后一直显示） */
     once?: boolean;
-    /** IntersectionObserver threshold（默认 0） */
     threshold?: number;
-    /** IntersectionObserver rootMargin（默认 '0px'） */
     rootMargin?: string;
-    /** 进入视窗前渲染的占位内容（默认轻量占位块） */
     placeholder?: any;
-    /** 进入视窗回调 */
     onEnter?: () => void;
-    /** 懒加载内容 */
     children?: any;
 }
 export declare const InView: Component<InViewProps>;

package/dist/components/Popover/Popover.d.ts

@@ -1,19 +1,9 @@
 /**
  * weifuwu/components — Popover
- *
- * 通用弹出层组件。触发点击后在目标元素附近弹出浮动面板。
- * 点击面板外部关闭。
- *
- * 触发方式:
- *   'click' — 点击触发元素切换显示
- *   'hover' — 悬停触发元素显示，移出关闭
- *
- * 受控模式:
- *   传入 open + onOpenChange 可外部控制显示状态
- *   （Dropdown 使用此模式）
  */
 import type { Component } from '../../client/vnode.ts';
-export type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
+import type { Placement } from '../../client/popup.ts';
+export type PopoverPosition = Placement;
 export interface PopoverProps {
     content?: any;
     trigger?: 'click' | 'hover';

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,13 +1,5 @@
 /**
  * weifuwu/components — Skeleton
- *
- * 骨架屏占位组件。纯 CSS，无交互，无状态。
- *
- * 用法：
- *   <Skeleton />                    ← 单行文本
- *   <Skeleton lines={3} />          ← 多行段落
- *   <Skeleton variant="circle" />   ← 圆形头像
- *   <Skeleton variant="rect" w={200} h={120} />  ← 矩形区域
  */
 import type { Component } from '../../client/vnode.ts';
 export type SkeletonVariant = 'text' | 'circle' | 'rect';

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,9 @@
+/**
+ * weifuwu/components — Tooltip
+ */
 import type { Component } from '../../client/vnode.ts';
-export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+import type { Placement } from '../../client/popup.ts';
+export type TooltipPosition = Placement;
 export interface TooltipProps {
     content: string;
     position?: TooltipPosition;

package/dist/components/index.d.ts

@@ -81,3 +81,9 @@ export { Img } from './Img/Img.ts';
 export type { ImgProps } from './Img/Img.ts';
 export { InView } from './InView/InView.ts';
 export type { InViewProps } from './InView/InView.ts';
+export { DatePicker } from './DatePicker/DatePicker.ts';
+export type { DatePickerProps, DatePickerMode } from './DatePicker/DatePicker.ts';
+export { Chart } from './Chart/Chart.ts';
+export type { ChartProps, ChartType, DataPoint, ChartOptions } from './Chart/Chart.ts';
+export { Editor } from './Editor/Editor.ts';
+export type { EditorProps, ToolbarItem } from './Editor/Editor.ts';