@pactor-app/ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +113 -0
- package/dist/chunk-57NRUZ5G.js +95 -0
- package/dist/chunk-DMK6RSTK.js +746 -0
- package/dist/chunk-OH3U6PCM.js +536 -0
- package/dist/chunk-OUTSIJMO.js +442 -0
- package/dist/chunk-QDTVOJ5P.js +147 -0
- package/dist/chunk-QWZ23QLS.js +68 -0
- package/dist/chunk-RQHJBTEU.js +10 -0
- package/dist/chunk-SNFDI77B.js +136 -0
- package/dist/chunk-XGOTHOI6.js +619 -0
- package/dist/components/index.cjs +1111 -0
- package/dist/components/index.d.cts +307 -0
- package/dist/components/index.d.ts +307 -0
- package/dist/components/index.js +40 -0
- package/dist/index.cjs +2626 -0
- package/dist/index.d.cts +41 -0
- package/dist/index.d.ts +41 -0
- package/dist/index.js +87 -0
- package/dist/interaction/index.cjs +752 -0
- package/dist/interaction/index.d.cts +178 -0
- package/dist/interaction/index.d.ts +178 -0
- package/dist/interaction/index.js +19 -0
- package/dist/layout/index.cjs +938 -0
- package/dist/layout/index.d.cts +158 -0
- package/dist/layout/index.d.ts +158 -0
- package/dist/layout/index.js +25 -0
- package/dist/ui/index.cjs +1076 -0
- package/dist/ui/index.d.cts +166 -0
- package/dist/ui/index.d.ts +166 -0
- package/dist/ui/index.js +233 -0
- package/package.json +127 -0
- package/styles.css +1672 -0
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
import { ComponentRegistry } from '@pactor-app/runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
import { DslNode } from '@pactor-app/core';
|
|
5
|
+
|
|
6
|
+
/** DSL Alert 变体 */
|
|
7
|
+
type AlertVariant = 'success' | 'info' | 'warning' | 'error';
|
|
8
|
+
interface AlertProps {
|
|
9
|
+
/** 提示主文案 */
|
|
10
|
+
message?: string;
|
|
11
|
+
/** 辅助说明文案 */
|
|
12
|
+
description?: string;
|
|
13
|
+
/** 变体,默认 info */
|
|
14
|
+
variant?: AlertVariant;
|
|
15
|
+
}
|
|
16
|
+
/** Alert 适配器(shadcn kit):message → AlertTitle,description → AlertDescription */
|
|
17
|
+
declare function Alert({ message, description, variant }: AlertProps): React.JSX.Element;
|
|
18
|
+
|
|
19
|
+
/** DSL Button 变体(框架级协议) */
|
|
20
|
+
type ButtonVariant = 'default' | 'primary' | 'dashed' | 'link' | 'text';
|
|
21
|
+
/** DSL Button 尺寸 */
|
|
22
|
+
type ButtonSize = 'small' | 'middle' | 'large';
|
|
23
|
+
interface ButtonProps {
|
|
24
|
+
/** 按钮文本;也可用 children 渲染内容 */
|
|
25
|
+
text?: string;
|
|
26
|
+
/** 变体,默认 default */
|
|
27
|
+
variant?: ButtonVariant;
|
|
28
|
+
/** 危险态 */
|
|
29
|
+
danger?: boolean;
|
|
30
|
+
size?: ButtonSize;
|
|
31
|
+
loading?: boolean;
|
|
32
|
+
disabled?: boolean;
|
|
33
|
+
/** true 时作为 Form 的提交按钮(type=submit) */
|
|
34
|
+
submit?: boolean;
|
|
35
|
+
/** 点击事件(Renderer 绑定 events.onClick) */
|
|
36
|
+
onClick?: () => void;
|
|
37
|
+
children?: ReactNode;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Button 适配器(shadcn kit):vendored shadcn Button(cva 变体)。
|
|
41
|
+
* props 契约与 pactor-components(antd 版)一致;`submit: true` 时作为
|
|
42
|
+
* Form 的提交按钮(type=submit);danger 映射 destructive(link/text
|
|
43
|
+
* 变体保持原样、文字标红);loading 显示旋转图标并禁用。
|
|
44
|
+
*/
|
|
45
|
+
declare function Button({ text, variant, danger, size, loading, disabled, submit, onClick, children, }: ButtonProps): React.JSX.Element;
|
|
46
|
+
|
|
47
|
+
interface CardProps {
|
|
48
|
+
/** 卡片标题,可选 */
|
|
49
|
+
title?: string;
|
|
50
|
+
/** 是否有边框,默认 true(false 去边框与阴影) */
|
|
51
|
+
bordered?: boolean;
|
|
52
|
+
children?: ReactNode;
|
|
53
|
+
}
|
|
54
|
+
/** Card 适配器(shadcn kit):可选标题 + 边框开关(bordered=false 去边框与阴影) */
|
|
55
|
+
declare function Card({ title, bordered, children }: CardProps): React.JSX.Element;
|
|
56
|
+
|
|
57
|
+
interface FlexProps {
|
|
58
|
+
/** 主轴方向,默认 horizontal */
|
|
59
|
+
direction?: 'horizontal' | 'vertical';
|
|
60
|
+
/** 间距 */
|
|
61
|
+
gap?: number | 'small' | 'middle' | 'large';
|
|
62
|
+
/** 主轴对齐 */
|
|
63
|
+
justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
|
|
64
|
+
/** 交叉轴对齐 */
|
|
65
|
+
align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
|
|
66
|
+
children?: ReactNode;
|
|
67
|
+
}
|
|
68
|
+
/** Flex 布局(shadcn kit):方向 / 对齐映射 Tailwind 工具类,数字 gap 内联 */
|
|
69
|
+
declare function Flex({ direction, gap, justify, align, children, }: FlexProps): React.JSX.Element;
|
|
70
|
+
|
|
71
|
+
interface FormProps {
|
|
72
|
+
/** 表单名(缺省 'default'):`form.setValues` 联动动作按名寻址 */
|
|
73
|
+
name?: string;
|
|
74
|
+
/** 表单布局,默认 vertical */
|
|
75
|
+
layout?: 'horizontal' | 'vertical' | 'inline';
|
|
76
|
+
/** 表单初始值(创建时生效;字段级 value 优先于 initialValues[name]) */
|
|
77
|
+
initialValues?: Record<string, unknown>;
|
|
78
|
+
children?: ReactNode;
|
|
79
|
+
/** 提交事件(校验通过后触发),参数为表单 values */
|
|
80
|
+
onSubmit?: (values: Record<string, unknown>) => void;
|
|
81
|
+
/** 任一字段变化事件(可选) */
|
|
82
|
+
onValuesChange?: (changed: Record<string, unknown>, values: Record<string, unknown>) => void;
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* Form 容器(shadcn kit,语义对齐 antd 版):
|
|
86
|
+
* 维护受控 values 并经 React Context 下发,Form 内声明了 `name` 的
|
|
87
|
+
* Input / Select 自动成为表单项。创建时以 `initialValues` 初始化 values,
|
|
88
|
+
* 字段挂载注册时合并字段级 `value` 初始值(字段级优先,仅首次注册写入)。
|
|
89
|
+
* 提交(`submit: true` 的 Button)时:
|
|
90
|
+
* 1. 统一校验已注册字段的 rules(required + message),失败则展示错误并阻止提交
|
|
91
|
+
* 2. 校验通过把 values 写入 runtime state 的 `form` 路径(`${form.<field>}` 可用)
|
|
92
|
+
* 3. 以 values 调用 onSubmit(Renderer 把它放入 `event` 作用域)
|
|
93
|
+
*/
|
|
94
|
+
declare function Form({ name, layout, initialValues, children, onSubmit, onValuesChange, }: FormProps): React.JSX.Element;
|
|
95
|
+
|
|
96
|
+
interface GridProps {
|
|
97
|
+
/** 列数,默认 1;每列等宽(columns 取整下限 1) */
|
|
98
|
+
columns?: number;
|
|
99
|
+
/** 栏间距 */
|
|
100
|
+
gap?: number;
|
|
101
|
+
children?: ReactNode;
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Grid 均分栏布局(shadcn kit):CSS grid。
|
|
105
|
+
* 列数为运行时动态值,无法用 Tailwind 静态类表达,经 inline style 设置。
|
|
106
|
+
*/
|
|
107
|
+
declare function Grid({ columns, gap, children }: GridProps): React.JSX.Element;
|
|
108
|
+
|
|
109
|
+
/** DSL 校验规则(框架级协议,当前支持 required + message) */
|
|
110
|
+
interface FieldRule {
|
|
111
|
+
required?: boolean;
|
|
112
|
+
message?: string;
|
|
113
|
+
}
|
|
114
|
+
interface InputProps {
|
|
115
|
+
/** 字段名;在 Form 内声明 name 即自动成为表单项 */
|
|
116
|
+
name?: string;
|
|
117
|
+
/** 表单项标签 */
|
|
118
|
+
label?: string;
|
|
119
|
+
/** 校验规则 */
|
|
120
|
+
rules?: FieldRule[];
|
|
121
|
+
/** 受控值(独立渲染时生效);Form 内作为字段初始值(优先于 Form initialValues) */
|
|
122
|
+
value?: string;
|
|
123
|
+
/** 输入类型:password 时掩码输入(缺省 text) */
|
|
124
|
+
type?: 'text' | 'password';
|
|
125
|
+
placeholder?: string;
|
|
126
|
+
disabled?: boolean;
|
|
127
|
+
/** 输入事件,传出 string 值(非原生 event,设计决策 D2) */
|
|
128
|
+
onChange?: (value: string) => void;
|
|
129
|
+
}
|
|
130
|
+
/**
|
|
131
|
+
* Input 适配器(shadcn kit,语义对齐 antd 版):
|
|
132
|
+
* 在 Form 内且声明 `name` 时自动成为表单项(label / rules 生效,
|
|
133
|
+
* 值由 Form 上下文托管);否则渲染独立受控控件,onChange 传出 string。
|
|
134
|
+
* 表单项为去原语化结构(design D3):`<div data-slot="form-item">` +
|
|
135
|
+
* `<label htmlFor>` 与控件 `useId` 关联。
|
|
136
|
+
*/
|
|
137
|
+
declare function Input({ name, label, rules, value, type, placeholder, disabled, onChange, }: InputProps): React.JSX.Element;
|
|
138
|
+
|
|
139
|
+
interface PageProps {
|
|
140
|
+
/** 页面标题,可选 */
|
|
141
|
+
title?: string;
|
|
142
|
+
children?: ReactNode;
|
|
143
|
+
}
|
|
144
|
+
/** Page 容器(shadcn kit):可选标题 + 内容区(纵向节奏 space-y-5) */
|
|
145
|
+
declare function Page({ title, children }: PageProps): React.JSX.Element;
|
|
146
|
+
|
|
147
|
+
/** Select 选项(支持表达式解析后的数组) */
|
|
148
|
+
interface SelectOption {
|
|
149
|
+
label: string;
|
|
150
|
+
value: string | number | boolean;
|
|
151
|
+
}
|
|
152
|
+
interface SelectProps {
|
|
153
|
+
/** 字段名;在 Form 内声明 name 即自动成为表单项 */
|
|
154
|
+
name?: string;
|
|
155
|
+
/** 表单项标签 */
|
|
156
|
+
label?: string;
|
|
157
|
+
/** 校验规则 */
|
|
158
|
+
rules?: FieldRule[];
|
|
159
|
+
/** 选项列表 */
|
|
160
|
+
options?: SelectOption[];
|
|
161
|
+
/** 受控值(独立渲染时生效);Form 内作为字段初始值(优先于 Form initialValues) */
|
|
162
|
+
value?: string | number | boolean;
|
|
163
|
+
placeholder?: string;
|
|
164
|
+
disabled?: boolean;
|
|
165
|
+
allowClear?: boolean;
|
|
166
|
+
/** 选中变化事件,传出选中的 value */
|
|
167
|
+
onChange?: (value: unknown) => void;
|
|
168
|
+
}
|
|
169
|
+
/**
|
|
170
|
+
* Select 适配器(shadcn kit,语义对齐 antd 版):
|
|
171
|
+
* 基于 vendored shadcn Select(@base-ui/react);Form 内声明 `name`
|
|
172
|
+
* 自动成为表单项;onChange 传出选中的原始 value(Base UI Select 的
|
|
173
|
+
* value 原生支持 string/number/boolean,无需序列化)。
|
|
174
|
+
*
|
|
175
|
+
* value→label 映射经 Root 的 `items` 提供:选中值对应的 item 尚未渲染过
|
|
176
|
+
* popup 时(如表单初始值回填),Trigger 同样显示 label(对齐原 Radix 坑
|
|
177
|
+
* 的对应场景,见 design D2/风险表)。
|
|
178
|
+
*/
|
|
179
|
+
declare function Select({ name, label, rules, options, value, placeholder, disabled, allowClear, onChange, }: SelectProps): React.JSX.Element;
|
|
180
|
+
|
|
181
|
+
interface StatisticProps {
|
|
182
|
+
/** 指标标题 */
|
|
183
|
+
title?: string;
|
|
184
|
+
/** 指标数值(通常为表达式解析后的数字) */
|
|
185
|
+
value?: number | string;
|
|
186
|
+
/** 小数精度 */
|
|
187
|
+
precision?: number;
|
|
188
|
+
/** 后缀(如单位) */
|
|
189
|
+
suffix?: string;
|
|
190
|
+
}
|
|
191
|
+
/** Statistic 适配器(shadcn kit):标题 + 数值(precision 精度 / suffix 后缀) */
|
|
192
|
+
declare function Statistic({ title, value, precision, suffix }: StatisticProps): React.JSX.Element;
|
|
193
|
+
|
|
194
|
+
/**
|
|
195
|
+
* 列定义;`cell` 为行模板 DSL 子树,每个单元格经 Renderer 子作用域
|
|
196
|
+
* 机制渲染,作用域注入 `row`(当前行记录)与 `rowIndex`(设计决策 D4)。
|
|
197
|
+
*/
|
|
198
|
+
interface TableColumn {
|
|
199
|
+
title?: string;
|
|
200
|
+
dataIndex?: string;
|
|
201
|
+
width?: number | string;
|
|
202
|
+
cell?: DslNode;
|
|
203
|
+
}
|
|
204
|
+
/** DSL 分页配置:false 关闭,`{ pageSize }` 简化映射 */
|
|
205
|
+
type TablePagination = false | {
|
|
206
|
+
pageSize?: number;
|
|
207
|
+
};
|
|
208
|
+
/** 分页变化事件参数 */
|
|
209
|
+
interface TablePaginationInfo {
|
|
210
|
+
current?: number;
|
|
211
|
+
pageSize?: number;
|
|
212
|
+
total?: number;
|
|
213
|
+
}
|
|
214
|
+
interface TableProps {
|
|
215
|
+
columns?: TableColumn[];
|
|
216
|
+
/** 数据行(通常为 `${data.xxx}` 表达式解析结果) */
|
|
217
|
+
dataSource?: Record<string, unknown>[];
|
|
218
|
+
/** 行 key 字段,默认 'id' */
|
|
219
|
+
rowKey?: string;
|
|
220
|
+
loading?: boolean;
|
|
221
|
+
pagination?: TablePagination;
|
|
222
|
+
/** 分页 / 排序变化事件,传出 pagination 信息 */
|
|
223
|
+
onChange?: (pagination: TablePaginationInfo) => void;
|
|
224
|
+
}
|
|
225
|
+
/**
|
|
226
|
+
* Table 适配器(shadcn kit,语义对齐 antd 版):vendored shadcn Table 原语
|
|
227
|
+
* 实现 columns / dataSource / rowKey(默认 'id')/ loading / 简化分页
|
|
228
|
+
* (pageSize)/ 空态;`cell` 行模板经 renderChildren 注入
|
|
229
|
+
* `{ row, rowIndex }`(rowIndex 为当前页内序号)。
|
|
230
|
+
*/
|
|
231
|
+
declare function Table({ columns, dataSource, rowKey, loading, pagination, onChange, }: TableProps): React.JSX.Element;
|
|
232
|
+
|
|
233
|
+
/** Tabs 页签定义;`children` 为 DSL 子树,经 Renderer children 机制渲染 */
|
|
234
|
+
interface TabItem {
|
|
235
|
+
key: string;
|
|
236
|
+
label: string;
|
|
237
|
+
children?: DslNode[];
|
|
238
|
+
}
|
|
239
|
+
interface TabsProps {
|
|
240
|
+
items?: TabItem[];
|
|
241
|
+
/** 当前激活页签 key(可绑表达式) */
|
|
242
|
+
activeKey?: string;
|
|
243
|
+
/** 页签切换事件,传出新激活的 key */
|
|
244
|
+
onChange?: (key: string) => void;
|
|
245
|
+
}
|
|
246
|
+
/**
|
|
247
|
+
* Tabs 容器(shadcn kit,语义对齐 antd 版):
|
|
248
|
+
* 基于 vendored shadcn Tabs(@base-ui/react),每个 pane 的内容经
|
|
249
|
+
* renderChildren 渲染;未传 activeKey 时缺省激活第一个页签。
|
|
250
|
+
*/
|
|
251
|
+
declare function Tabs({ items, activeKey, onChange }: TabsProps): React.JSX.Element;
|
|
252
|
+
|
|
253
|
+
/**
|
|
254
|
+
* shadcn kit 组件表:DSL 类型名 → 组件适配器。
|
|
255
|
+
* 类型名集合与 pactor-components 的 builtinComponents 完全一致;
|
|
256
|
+
* 容器组件(Tabs / Table)经 `useRenderer().renderChildren` 渲染 DSL 子树。
|
|
257
|
+
*/
|
|
258
|
+
declare const shadcnComponents: {
|
|
259
|
+
readonly Page: typeof Page;
|
|
260
|
+
readonly Grid: typeof Grid;
|
|
261
|
+
readonly Flex: typeof Flex;
|
|
262
|
+
readonly Card: typeof Card;
|
|
263
|
+
readonly Button: typeof Button;
|
|
264
|
+
readonly Alert: typeof Alert;
|
|
265
|
+
readonly Statistic: typeof Statistic;
|
|
266
|
+
readonly Tabs: typeof Tabs;
|
|
267
|
+
readonly Table: typeof Table;
|
|
268
|
+
readonly Form: typeof Form;
|
|
269
|
+
readonly Input: typeof Input;
|
|
270
|
+
readonly Select: typeof Select;
|
|
271
|
+
};
|
|
272
|
+
/** 把全部 V1 内置组件(shadcn 实现)按 DSL 类型名注册到给定 ComponentRegistry */
|
|
273
|
+
declare function registerShadcnComponents(registry: ComponentRegistry): void;
|
|
274
|
+
/** 创建并返回注册了全部 V1 内置组件(shadcn 实现)的新 ComponentRegistry */
|
|
275
|
+
declare function createShadcnComponentRegistry(): ComponentRegistry;
|
|
276
|
+
|
|
277
|
+
/**
|
|
278
|
+
* Form 容器上下文(shadcn kit):Form 组件维护受控 values / 校验错误
|
|
279
|
+
* 并经 React Context 下发;Input / Select 据此判断自身是否在表单内。
|
|
280
|
+
* 不持有 UI 库表单实例,values 由框架侧受控管理(去原语化,见 design D3)。
|
|
281
|
+
*/
|
|
282
|
+
interface FormContextValue {
|
|
283
|
+
/** 标记后代字段处于 Form 容器内 */
|
|
284
|
+
inForm: true;
|
|
285
|
+
/** 表单布局(表单项排布 class 由字段侧按此生成) */
|
|
286
|
+
layout: 'horizontal' | 'vertical' | 'inline';
|
|
287
|
+
/** 当前表单 values(受控) */
|
|
288
|
+
values: Record<string, unknown>;
|
|
289
|
+
/** 校验错误(字段名 → 错误文案) */
|
|
290
|
+
errors: Record<string, string>;
|
|
291
|
+
/** 更新字段值(受控写入并清除该字段错误) */
|
|
292
|
+
setValue(name: string, value: unknown): void;
|
|
293
|
+
/** 批量写入字段值(form.setValues 联动桥):不触发 onValuesChange 与校验 */
|
|
294
|
+
setValues(values: Record<string, unknown>): void;
|
|
295
|
+
/**
|
|
296
|
+
* 注册字段校验规则(提交时统一校验);
|
|
297
|
+
* `initialValue` 为字段级初始值(value prop),仅在该字段首次注册时合并
|
|
298
|
+
* 进 values(字段级优先于 Form initialValues;已有合并结果不覆盖)
|
|
299
|
+
*/
|
|
300
|
+
registerField(name: string, rules?: FieldRule[], initialValue?: unknown): void;
|
|
301
|
+
/** 注销字段 */
|
|
302
|
+
unregisterField(name: string): void;
|
|
303
|
+
}
|
|
304
|
+
/** 在字段组件内探测 Form 上下文;不在 Form 内时返回 null */
|
|
305
|
+
declare function useFormContext(): FormContextValue | null;
|
|
306
|
+
|
|
307
|
+
export { Alert, type AlertProps, type AlertVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type FieldRule, Flex, type FlexProps, Form, type FormContextValue, type FormProps, Grid, type GridProps, Input, type InputProps, Page, type PageProps, Select, type SelectOption, type SelectProps, Statistic, type StatisticProps, type TabItem, Table, type TableColumn, type TablePagination, type TablePaginationInfo, type TableProps, Tabs, type TabsProps, createShadcnComponentRegistry, registerShadcnComponents, shadcnComponents, useFormContext };
|
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
import { ComponentRegistry } from '@pactor-app/runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { ReactNode } from 'react';
|
|
4
|
+
import { DslNode } from '@pactor-app/core';
|
|
5
|
+
|
|
6
|
+
/** DSL Alert 变体 */
|
|
7
|
+
type AlertVariant = 'success' | 'info' | 'warning' | 'error';
|
|
8
|
+
interface AlertProps {
|
|
9
|
+
/** 提示主文案 */
|
|
10
|
+
message?: string;
|
|
11
|
+
/** 辅助说明文案 */
|
|
12
|
+
description?: string;
|
|
13
|
+
/** 变体,默认 info */
|
|
14
|
+
variant?: AlertVariant;
|
|
15
|
+
}
|
|
16
|
+
/** Alert 适配器(shadcn kit):message → AlertTitle,description → AlertDescription */
|
|
17
|
+
declare function Alert({ message, description, variant }: AlertProps): React.JSX.Element;
|
|
18
|
+
|
|
19
|
+
/** DSL Button 变体(框架级协议) */
|
|
20
|
+
type ButtonVariant = 'default' | 'primary' | 'dashed' | 'link' | 'text';
|
|
21
|
+
/** DSL Button 尺寸 */
|
|
22
|
+
type ButtonSize = 'small' | 'middle' | 'large';
|
|
23
|
+
interface ButtonProps {
|
|
24
|
+
/** 按钮文本;也可用 children 渲染内容 */
|
|
25
|
+
text?: string;
|
|
26
|
+
/** 变体,默认 default */
|
|
27
|
+
variant?: ButtonVariant;
|
|
28
|
+
/** 危险态 */
|
|
29
|
+
danger?: boolean;
|
|
30
|
+
size?: ButtonSize;
|
|
31
|
+
loading?: boolean;
|
|
32
|
+
disabled?: boolean;
|
|
33
|
+
/** true 时作为 Form 的提交按钮(type=submit) */
|
|
34
|
+
submit?: boolean;
|
|
35
|
+
/** 点击事件(Renderer 绑定 events.onClick) */
|
|
36
|
+
onClick?: () => void;
|
|
37
|
+
children?: ReactNode;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Button 适配器(shadcn kit):vendored shadcn Button(cva 变体)。
|
|
41
|
+
* props 契约与 pactor-components(antd 版)一致;`submit: true` 时作为
|
|
42
|
+
* Form 的提交按钮(type=submit);danger 映射 destructive(link/text
|
|
43
|
+
* 变体保持原样、文字标红);loading 显示旋转图标并禁用。
|
|
44
|
+
*/
|
|
45
|
+
declare function Button({ text, variant, danger, size, loading, disabled, submit, onClick, children, }: ButtonProps): React.JSX.Element;
|
|
46
|
+
|
|
47
|
+
interface CardProps {
|
|
48
|
+
/** 卡片标题,可选 */
|
|
49
|
+
title?: string;
|
|
50
|
+
/** 是否有边框,默认 true(false 去边框与阴影) */
|
|
51
|
+
bordered?: boolean;
|
|
52
|
+
children?: ReactNode;
|
|
53
|
+
}
|
|
54
|
+
/** Card 适配器(shadcn kit):可选标题 + 边框开关(bordered=false 去边框与阴影) */
|
|
55
|
+
declare function Card({ title, bordered, children }: CardProps): React.JSX.Element;
|
|
56
|
+
|
|
57
|
+
interface FlexProps {
|
|
58
|
+
/** 主轴方向,默认 horizontal */
|
|
59
|
+
direction?: 'horizontal' | 'vertical';
|
|
60
|
+
/** 间距 */
|
|
61
|
+
gap?: number | 'small' | 'middle' | 'large';
|
|
62
|
+
/** 主轴对齐 */
|
|
63
|
+
justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
|
|
64
|
+
/** 交叉轴对齐 */
|
|
65
|
+
align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
|
|
66
|
+
children?: ReactNode;
|
|
67
|
+
}
|
|
68
|
+
/** Flex 布局(shadcn kit):方向 / 对齐映射 Tailwind 工具类,数字 gap 内联 */
|
|
69
|
+
declare function Flex({ direction, gap, justify, align, children, }: FlexProps): React.JSX.Element;
|
|
70
|
+
|
|
71
|
+
interface FormProps {
|
|
72
|
+
/** 表单名(缺省 'default'):`form.setValues` 联动动作按名寻址 */
|
|
73
|
+
name?: string;
|
|
74
|
+
/** 表单布局,默认 vertical */
|
|
75
|
+
layout?: 'horizontal' | 'vertical' | 'inline';
|
|
76
|
+
/** 表单初始值(创建时生效;字段级 value 优先于 initialValues[name]) */
|
|
77
|
+
initialValues?: Record<string, unknown>;
|
|
78
|
+
children?: ReactNode;
|
|
79
|
+
/** 提交事件(校验通过后触发),参数为表单 values */
|
|
80
|
+
onSubmit?: (values: Record<string, unknown>) => void;
|
|
81
|
+
/** 任一字段变化事件(可选) */
|
|
82
|
+
onValuesChange?: (changed: Record<string, unknown>, values: Record<string, unknown>) => void;
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* Form 容器(shadcn kit,语义对齐 antd 版):
|
|
86
|
+
* 维护受控 values 并经 React Context 下发,Form 内声明了 `name` 的
|
|
87
|
+
* Input / Select 自动成为表单项。创建时以 `initialValues` 初始化 values,
|
|
88
|
+
* 字段挂载注册时合并字段级 `value` 初始值(字段级优先,仅首次注册写入)。
|
|
89
|
+
* 提交(`submit: true` 的 Button)时:
|
|
90
|
+
* 1. 统一校验已注册字段的 rules(required + message),失败则展示错误并阻止提交
|
|
91
|
+
* 2. 校验通过把 values 写入 runtime state 的 `form` 路径(`${form.<field>}` 可用)
|
|
92
|
+
* 3. 以 values 调用 onSubmit(Renderer 把它放入 `event` 作用域)
|
|
93
|
+
*/
|
|
94
|
+
declare function Form({ name, layout, initialValues, children, onSubmit, onValuesChange, }: FormProps): React.JSX.Element;
|
|
95
|
+
|
|
96
|
+
interface GridProps {
|
|
97
|
+
/** 列数,默认 1;每列等宽(columns 取整下限 1) */
|
|
98
|
+
columns?: number;
|
|
99
|
+
/** 栏间距 */
|
|
100
|
+
gap?: number;
|
|
101
|
+
children?: ReactNode;
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Grid 均分栏布局(shadcn kit):CSS grid。
|
|
105
|
+
* 列数为运行时动态值,无法用 Tailwind 静态类表达,经 inline style 设置。
|
|
106
|
+
*/
|
|
107
|
+
declare function Grid({ columns, gap, children }: GridProps): React.JSX.Element;
|
|
108
|
+
|
|
109
|
+
/** DSL 校验规则(框架级协议,当前支持 required + message) */
|
|
110
|
+
interface FieldRule {
|
|
111
|
+
required?: boolean;
|
|
112
|
+
message?: string;
|
|
113
|
+
}
|
|
114
|
+
interface InputProps {
|
|
115
|
+
/** 字段名;在 Form 内声明 name 即自动成为表单项 */
|
|
116
|
+
name?: string;
|
|
117
|
+
/** 表单项标签 */
|
|
118
|
+
label?: string;
|
|
119
|
+
/** 校验规则 */
|
|
120
|
+
rules?: FieldRule[];
|
|
121
|
+
/** 受控值(独立渲染时生效);Form 内作为字段初始值(优先于 Form initialValues) */
|
|
122
|
+
value?: string;
|
|
123
|
+
/** 输入类型:password 时掩码输入(缺省 text) */
|
|
124
|
+
type?: 'text' | 'password';
|
|
125
|
+
placeholder?: string;
|
|
126
|
+
disabled?: boolean;
|
|
127
|
+
/** 输入事件,传出 string 值(非原生 event,设计决策 D2) */
|
|
128
|
+
onChange?: (value: string) => void;
|
|
129
|
+
}
|
|
130
|
+
/**
|
|
131
|
+
* Input 适配器(shadcn kit,语义对齐 antd 版):
|
|
132
|
+
* 在 Form 内且声明 `name` 时自动成为表单项(label / rules 生效,
|
|
133
|
+
* 值由 Form 上下文托管);否则渲染独立受控控件,onChange 传出 string。
|
|
134
|
+
* 表单项为去原语化结构(design D3):`<div data-slot="form-item">` +
|
|
135
|
+
* `<label htmlFor>` 与控件 `useId` 关联。
|
|
136
|
+
*/
|
|
137
|
+
declare function Input({ name, label, rules, value, type, placeholder, disabled, onChange, }: InputProps): React.JSX.Element;
|
|
138
|
+
|
|
139
|
+
interface PageProps {
|
|
140
|
+
/** 页面标题,可选 */
|
|
141
|
+
title?: string;
|
|
142
|
+
children?: ReactNode;
|
|
143
|
+
}
|
|
144
|
+
/** Page 容器(shadcn kit):可选标题 + 内容区(纵向节奏 space-y-5) */
|
|
145
|
+
declare function Page({ title, children }: PageProps): React.JSX.Element;
|
|
146
|
+
|
|
147
|
+
/** Select 选项(支持表达式解析后的数组) */
|
|
148
|
+
interface SelectOption {
|
|
149
|
+
label: string;
|
|
150
|
+
value: string | number | boolean;
|
|
151
|
+
}
|
|
152
|
+
interface SelectProps {
|
|
153
|
+
/** 字段名;在 Form 内声明 name 即自动成为表单项 */
|
|
154
|
+
name?: string;
|
|
155
|
+
/** 表单项标签 */
|
|
156
|
+
label?: string;
|
|
157
|
+
/** 校验规则 */
|
|
158
|
+
rules?: FieldRule[];
|
|
159
|
+
/** 选项列表 */
|
|
160
|
+
options?: SelectOption[];
|
|
161
|
+
/** 受控值(独立渲染时生效);Form 内作为字段初始值(优先于 Form initialValues) */
|
|
162
|
+
value?: string | number | boolean;
|
|
163
|
+
placeholder?: string;
|
|
164
|
+
disabled?: boolean;
|
|
165
|
+
allowClear?: boolean;
|
|
166
|
+
/** 选中变化事件,传出选中的 value */
|
|
167
|
+
onChange?: (value: unknown) => void;
|
|
168
|
+
}
|
|
169
|
+
/**
|
|
170
|
+
* Select 适配器(shadcn kit,语义对齐 antd 版):
|
|
171
|
+
* 基于 vendored shadcn Select(@base-ui/react);Form 内声明 `name`
|
|
172
|
+
* 自动成为表单项;onChange 传出选中的原始 value(Base UI Select 的
|
|
173
|
+
* value 原生支持 string/number/boolean,无需序列化)。
|
|
174
|
+
*
|
|
175
|
+
* value→label 映射经 Root 的 `items` 提供:选中值对应的 item 尚未渲染过
|
|
176
|
+
* popup 时(如表单初始值回填),Trigger 同样显示 label(对齐原 Radix 坑
|
|
177
|
+
* 的对应场景,见 design D2/风险表)。
|
|
178
|
+
*/
|
|
179
|
+
declare function Select({ name, label, rules, options, value, placeholder, disabled, allowClear, onChange, }: SelectProps): React.JSX.Element;
|
|
180
|
+
|
|
181
|
+
interface StatisticProps {
|
|
182
|
+
/** 指标标题 */
|
|
183
|
+
title?: string;
|
|
184
|
+
/** 指标数值(通常为表达式解析后的数字) */
|
|
185
|
+
value?: number | string;
|
|
186
|
+
/** 小数精度 */
|
|
187
|
+
precision?: number;
|
|
188
|
+
/** 后缀(如单位) */
|
|
189
|
+
suffix?: string;
|
|
190
|
+
}
|
|
191
|
+
/** Statistic 适配器(shadcn kit):标题 + 数值(precision 精度 / suffix 后缀) */
|
|
192
|
+
declare function Statistic({ title, value, precision, suffix }: StatisticProps): React.JSX.Element;
|
|
193
|
+
|
|
194
|
+
/**
|
|
195
|
+
* 列定义;`cell` 为行模板 DSL 子树,每个单元格经 Renderer 子作用域
|
|
196
|
+
* 机制渲染,作用域注入 `row`(当前行记录)与 `rowIndex`(设计决策 D4)。
|
|
197
|
+
*/
|
|
198
|
+
interface TableColumn {
|
|
199
|
+
title?: string;
|
|
200
|
+
dataIndex?: string;
|
|
201
|
+
width?: number | string;
|
|
202
|
+
cell?: DslNode;
|
|
203
|
+
}
|
|
204
|
+
/** DSL 分页配置:false 关闭,`{ pageSize }` 简化映射 */
|
|
205
|
+
type TablePagination = false | {
|
|
206
|
+
pageSize?: number;
|
|
207
|
+
};
|
|
208
|
+
/** 分页变化事件参数 */
|
|
209
|
+
interface TablePaginationInfo {
|
|
210
|
+
current?: number;
|
|
211
|
+
pageSize?: number;
|
|
212
|
+
total?: number;
|
|
213
|
+
}
|
|
214
|
+
interface TableProps {
|
|
215
|
+
columns?: TableColumn[];
|
|
216
|
+
/** 数据行(通常为 `${data.xxx}` 表达式解析结果) */
|
|
217
|
+
dataSource?: Record<string, unknown>[];
|
|
218
|
+
/** 行 key 字段,默认 'id' */
|
|
219
|
+
rowKey?: string;
|
|
220
|
+
loading?: boolean;
|
|
221
|
+
pagination?: TablePagination;
|
|
222
|
+
/** 分页 / 排序变化事件,传出 pagination 信息 */
|
|
223
|
+
onChange?: (pagination: TablePaginationInfo) => void;
|
|
224
|
+
}
|
|
225
|
+
/**
|
|
226
|
+
* Table 适配器(shadcn kit,语义对齐 antd 版):vendored shadcn Table 原语
|
|
227
|
+
* 实现 columns / dataSource / rowKey(默认 'id')/ loading / 简化分页
|
|
228
|
+
* (pageSize)/ 空态;`cell` 行模板经 renderChildren 注入
|
|
229
|
+
* `{ row, rowIndex }`(rowIndex 为当前页内序号)。
|
|
230
|
+
*/
|
|
231
|
+
declare function Table({ columns, dataSource, rowKey, loading, pagination, onChange, }: TableProps): React.JSX.Element;
|
|
232
|
+
|
|
233
|
+
/** Tabs 页签定义;`children` 为 DSL 子树,经 Renderer children 机制渲染 */
|
|
234
|
+
interface TabItem {
|
|
235
|
+
key: string;
|
|
236
|
+
label: string;
|
|
237
|
+
children?: DslNode[];
|
|
238
|
+
}
|
|
239
|
+
interface TabsProps {
|
|
240
|
+
items?: TabItem[];
|
|
241
|
+
/** 当前激活页签 key(可绑表达式) */
|
|
242
|
+
activeKey?: string;
|
|
243
|
+
/** 页签切换事件,传出新激活的 key */
|
|
244
|
+
onChange?: (key: string) => void;
|
|
245
|
+
}
|
|
246
|
+
/**
|
|
247
|
+
* Tabs 容器(shadcn kit,语义对齐 antd 版):
|
|
248
|
+
* 基于 vendored shadcn Tabs(@base-ui/react),每个 pane 的内容经
|
|
249
|
+
* renderChildren 渲染;未传 activeKey 时缺省激活第一个页签。
|
|
250
|
+
*/
|
|
251
|
+
declare function Tabs({ items, activeKey, onChange }: TabsProps): React.JSX.Element;
|
|
252
|
+
|
|
253
|
+
/**
|
|
254
|
+
* shadcn kit 组件表:DSL 类型名 → 组件适配器。
|
|
255
|
+
* 类型名集合与 pactor-components 的 builtinComponents 完全一致;
|
|
256
|
+
* 容器组件(Tabs / Table)经 `useRenderer().renderChildren` 渲染 DSL 子树。
|
|
257
|
+
*/
|
|
258
|
+
declare const shadcnComponents: {
|
|
259
|
+
readonly Page: typeof Page;
|
|
260
|
+
readonly Grid: typeof Grid;
|
|
261
|
+
readonly Flex: typeof Flex;
|
|
262
|
+
readonly Card: typeof Card;
|
|
263
|
+
readonly Button: typeof Button;
|
|
264
|
+
readonly Alert: typeof Alert;
|
|
265
|
+
readonly Statistic: typeof Statistic;
|
|
266
|
+
readonly Tabs: typeof Tabs;
|
|
267
|
+
readonly Table: typeof Table;
|
|
268
|
+
readonly Form: typeof Form;
|
|
269
|
+
readonly Input: typeof Input;
|
|
270
|
+
readonly Select: typeof Select;
|
|
271
|
+
};
|
|
272
|
+
/** 把全部 V1 内置组件(shadcn 实现)按 DSL 类型名注册到给定 ComponentRegistry */
|
|
273
|
+
declare function registerShadcnComponents(registry: ComponentRegistry): void;
|
|
274
|
+
/** 创建并返回注册了全部 V1 内置组件(shadcn 实现)的新 ComponentRegistry */
|
|
275
|
+
declare function createShadcnComponentRegistry(): ComponentRegistry;
|
|
276
|
+
|
|
277
|
+
/**
|
|
278
|
+
* Form 容器上下文(shadcn kit):Form 组件维护受控 values / 校验错误
|
|
279
|
+
* 并经 React Context 下发;Input / Select 据此判断自身是否在表单内。
|
|
280
|
+
* 不持有 UI 库表单实例,values 由框架侧受控管理(去原语化,见 design D3)。
|
|
281
|
+
*/
|
|
282
|
+
interface FormContextValue {
|
|
283
|
+
/** 标记后代字段处于 Form 容器内 */
|
|
284
|
+
inForm: true;
|
|
285
|
+
/** 表单布局(表单项排布 class 由字段侧按此生成) */
|
|
286
|
+
layout: 'horizontal' | 'vertical' | 'inline';
|
|
287
|
+
/** 当前表单 values(受控) */
|
|
288
|
+
values: Record<string, unknown>;
|
|
289
|
+
/** 校验错误(字段名 → 错误文案) */
|
|
290
|
+
errors: Record<string, string>;
|
|
291
|
+
/** 更新字段值(受控写入并清除该字段错误) */
|
|
292
|
+
setValue(name: string, value: unknown): void;
|
|
293
|
+
/** 批量写入字段值(form.setValues 联动桥):不触发 onValuesChange 与校验 */
|
|
294
|
+
setValues(values: Record<string, unknown>): void;
|
|
295
|
+
/**
|
|
296
|
+
* 注册字段校验规则(提交时统一校验);
|
|
297
|
+
* `initialValue` 为字段级初始值(value prop),仅在该字段首次注册时合并
|
|
298
|
+
* 进 values(字段级优先于 Form initialValues;已有合并结果不覆盖)
|
|
299
|
+
*/
|
|
300
|
+
registerField(name: string, rules?: FieldRule[], initialValue?: unknown): void;
|
|
301
|
+
/** 注销字段 */
|
|
302
|
+
unregisterField(name: string): void;
|
|
303
|
+
}
|
|
304
|
+
/** 在字段组件内探测 Form 上下文;不在 Form 内时返回 null */
|
|
305
|
+
declare function useFormContext(): FormContextValue | null;
|
|
306
|
+
|
|
307
|
+
export { Alert, type AlertProps, type AlertVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardProps, type FieldRule, Flex, type FlexProps, Form, type FormContextValue, type FormProps, Grid, type GridProps, Input, type InputProps, Page, type PageProps, Select, type SelectOption, type SelectProps, Statistic, type StatisticProps, type TabItem, Table, type TableColumn, type TablePagination, type TablePaginationInfo, type TableProps, Tabs, type TabsProps, createShadcnComponentRegistry, registerShadcnComponents, shadcnComponents, useFormContext };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Alert,
|
|
3
|
+
Button,
|
|
4
|
+
Card,
|
|
5
|
+
Flex,
|
|
6
|
+
Form,
|
|
7
|
+
Grid,
|
|
8
|
+
Input,
|
|
9
|
+
Page,
|
|
10
|
+
Select,
|
|
11
|
+
Statistic,
|
|
12
|
+
Table,
|
|
13
|
+
Tabs,
|
|
14
|
+
createShadcnComponentRegistry,
|
|
15
|
+
registerShadcnComponents,
|
|
16
|
+
shadcnComponents,
|
|
17
|
+
useFormContext
|
|
18
|
+
} from "../chunk-XGOTHOI6.js";
|
|
19
|
+
import "../chunk-OUTSIJMO.js";
|
|
20
|
+
import "../chunk-QWZ23QLS.js";
|
|
21
|
+
import "../chunk-57NRUZ5G.js";
|
|
22
|
+
import "../chunk-RQHJBTEU.js";
|
|
23
|
+
export {
|
|
24
|
+
Alert,
|
|
25
|
+
Button,
|
|
26
|
+
Card,
|
|
27
|
+
Flex,
|
|
28
|
+
Form,
|
|
29
|
+
Grid,
|
|
30
|
+
Input,
|
|
31
|
+
Page,
|
|
32
|
+
Select,
|
|
33
|
+
Statistic,
|
|
34
|
+
Table,
|
|
35
|
+
Tabs,
|
|
36
|
+
createShadcnComponentRegistry,
|
|
37
|
+
registerShadcnComponents,
|
|
38
|
+
shadcnComponents,
|
|
39
|
+
useFormContext
|
|
40
|
+
};
|