@canlooks/can-ui 0.0.91 → 0.0.92

package/documentation/dist/components/contextMenu.md

@@ -0,0 +1,27 @@
+# ContextMenu 右键菜单
+
+## 示例
+
+```tsx
+import {ContextMenu} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <ContextMenu items={[
+            {label: '菜单1', onClick: () => console.log('菜单1')},
+            {label: '菜单2', onClick: () => console.log('菜单2')},
+            {label: '菜单3', onClick: () => console.log('菜单3'), color: 'error', emphasized: true}
+        ]}>
+            <Card elevation={2}>请点击右键</Card>
+        </ContextMenu>
+    )
+}
+```
+
+## Props
+
+`<ContextMenu/>`继承了`<Popper/>`组件的所有属性，除此之外还有：
+
+| 属性    | 类型                                                     | 默认值 | 说明 |
+|-------|--------------------------------------------------------|-----|----|
+| items | ([MenuItemProps](/components/menuItem#MenuItemProps) \| ReactNode)[] | -   |    |

package/documentation/dist/components/counter.md

@@ -0,0 +1,29 @@
+# Counter 数量输入框
+
+## 示例
+
+```tsx
+import {Counter} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Counter/>
+    )
+}
+```
+
+## Props
+
+| 属性            | 类型                                      | 默认值      | 说明              |
+|---------------|-----------------------------------------|----------|-----------------|
+| size          | 'small' \| 'medium' \| 'large'          | 'medium' |                 |
+| min           | number                                  | -        |                 |
+| max           | number                                  | -        |                 |
+| step          | number                                  | 1        | 每次减少或增加的步长      |
+| precision     | number                                  | 0        | 数值精度            |
+| defaultValue  | number                                  | -        |                 |
+| value         | number                                  | -        |                 |
+| onChange      | (value) => void                         | -        |                 |
+| decreaseProps | [ButtonProps](/components/button#Props) | -        | 减少按钮的属性         |
+| increaseProps | [ButtonProps](/components/button#Props) | -        | 增加按钮的属性         |
+| inputProps    | [InputProps](/components/input#Props)   | -        | `<Input/>`组件的属性 |

package/documentation/dist/components/dataGrid.md

@@ -0,0 +1,112 @@
+# DataGrid 数据表格
+
+## 示例
+
+```tsx
+import {DataGrid} from '@canlooks/can-ui'
+
+export default function Index() {
+    const columns = [
+        {
+            title: '姓名',
+            field: 'name'
+        },
+        {
+            title: '年龄',
+            field: 'age',
+            sorter: (a: any, b: any) => a.age - b.age
+        },
+        {
+            title: '住址',
+            children: [
+                {
+                    title: '城市',
+                    field: 'city'
+                },
+                {
+                    title: '街道',
+                    field: 'address'
+                }
+            ]
+        },
+    ]
+
+    const rows = [
+        {
+            id: 1,
+            name: '胡彦斌',
+            age: 32,
+            city: '杭州',
+            address: '西湖区湖底公园1号',
+        },
+        {
+            id: 2,
+            name: '胡彦祖',
+            age: 42,
+            city: '杭州',
+            address: '西湖区湖底公园2号',
+        },
+    ]
+
+    return (
+        <DataGrid
+            columns={columns}
+            rows={rows}
+            selectable
+            bordered
+        />
+    )
+}
+```
+
+## DataGrid Props
+
+`<DataGrid/>` 组件继承了[<Table\/>](/components/table)组件的所有属性，除此之外还有以下属性：
+
+| 属性                 | 类型                                                                          | 默认值                                     | 说明                               |
+|--------------------|-----------------------------------------------------------------------------|-----------------------------------------|----------------------------------|
+| columns            | [ColumnType](#ColumnType)[]                                                 | -                                       | 列的定义                             |
+| rows               | Array                                                                       | -                                       | 行数据                              |
+| primaryKey         | Id                                                                          | 'id'                                    | 数据的主键                            |
+| childrenKey        | Id                                                                          | 'children'                              | 当数据中存在该字段，则会渲染可展开的子行             |
+| indent             | number                                                                      | 24                                      | 子行的缩进                            |
+| renderExpandIcon   | (key: Id, isExpand: boolean, expanded: Id[]) => void                        | -                                       | 自定义渲染展开按钮                        |
+| defaultExpanded    | Id[]                                                                        | []                                      | 默认展开的行                           |
+| expanded           | Id[]                                                                        | -                                       | 受控的展开行                           |
+| onExpandedChange   | (expanded: Id[], key: Id, isExpand: boolean) => void                        | -                                       | 展开行变化的回调                         |
+| rowProps           | (row: R, index: number, rows: R[]) => RowProps                              | -                                       | 传递给`<tr/>`标签的属性                  |
+| selectable         | boolean                                                                     | false                                   | 行是否可选择                           |
+| clickRowToSelect   | boolean                                                                     | true                                    | 点击行时是否触发选中                       |
+| selectorProps      | (row: R, index: number, rows: R[]) => CheckboxProps  \| RadioProps          | -                                       | 传递给`<Checkbox/>`或`<Radiu/>`组件的属性 |
+| relation           | 'dependent' \| 'standalone'                                                 | 'dependent'                             | 选中行之间的关系                         |
+| integration        | 'shallowest' \| 'deepest'                                          \| 'all' | 'shallowest'                            | 所选值的归集方式                         |
+| allowSelectAll     | boolean                                                                     | true                                    |                                  |
+| defaultOrderColumn | Id                                                                          | -                                       | 默认排序的列                           |
+| orderColumn        | Id                                                                          | -                                       | 受控的排序的列                          |
+| defaultOrderType   | 'ascend' \| 'descend'                                                       | 'descend'                               | 默认排序方法                           |
+| orderType          | 'ascend' \| 'descend'                                                       | -                                       | 受控的排序方法排序方法                      |
+| onOrderChange      | (orderColumn, orderType) => void                                            | -                                       | 排序变化回调                           |
+| loading            | boolean                                                                     | false                                   |                                  |
+| emptyPlaceholder   | ReactNode                                                                   | [Placeholder/](/components/placeholder) | 空行占位符                            |
+| paginatable        | boolean                                                                     | true                                    | 是否使用内置分页                         |
+| paginationProps    | [PaginationProps](/components/pagination)                                   | -                                       | 传递给`<Pagination/>`组件的属性          |
+| renderPagination   | (paginationProps) => ReactNode                                              | -                                       | 自定义渲染分页器                         |
+| multiple           | boolean                                                                     | false                                   | `selectable`指定为`true`时有效         |
+| defaultValue       | Id \| Id[]                                                                  | -                                       | `selectable`指定为`true`时有效         |
+| value              | Id \| Id[]                                                                  | -                                       | `selectable`指定为`true`时有效         |
+| onChange           | (Id \| Id[]) => void                                                        | -                                       | `selectable`指定为`true`时有效         |
+| columnResizable    | boolean                                                                     | false                                   | 是否可以拖拽调整列宽，开启该功能后，表头分组将失效        |
+
+## ColumnType
+
+`ColumnType`继承了`<td/>`的所有属性，除此之外还有以下属性：
+
+| 属性       | 类型                                                | 默认值 | 说明                                                                    |
+|----------|---------------------------------------------------|-----|-----------------------------------------------------------------------|
+| title    | ReactNode                                         | -   | 列标题                                                                   |
+| key      | Id                                                | -   | 若不指定，则使用`field`作为key                                                  |
+| field    | Id \| Id[]                                        | -   | 该列在数据中对应的字段名                                                          |
+| sorter   | boolean \| ((a, b) => number)                     | -   | 指定为`true`时表示使用服务端排序，组件只做样式处理，不做数据排序处理；<br/>本地排序需指定 “正序” 的排序方法，倒序会自动处理 |
+| sticky   | 'left' \| 'right'                                 | -   | 是否将列固定在左侧或右侧                                                          |
+| children | ColumnType[]                                      | -   | 使用组合的表头                                                               |
+| render   | (row: R, index?: number, rows?: R[]) => ReactNode | -   | 单元格内容的渲染方法                                                            |

package/documentation/dist/components/dateTimePicker.md

@@ -0,0 +1,35 @@
+# DateTimePicker 日期时间选择器
+
+## 示例
+
+```tsx
+import {DateTimePicker} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <DateTimePicker format="YYYY-MM-DD hh:mm:ss"/>
+    )
+}
+```
+
+## Props
+
+| 属性              | 类型                                        | 默认值   | 说明                    |
+|-----------------|-------------------------------------------|-------|-----------------------|
+| inputProps      | InputHTMLAttributes                       | -     | 传递给`<input/>`的属性      |
+| inputRef        | Ref<HTMLInputElement>                     | -     |                       |
+| popperProps     | [PopperProps](/components/popper)         | -     | 传递给`<Popper/>`组件的属性   |
+| defaultOpen     | boolean                                   | false | 默认打开状态                |
+| open            | boolean                                   | -     | 受控的打开状态               |
+| onOpenChange    | (open) => void                            | -     | 打开状态变化的回调             |
+| autoClose       | boolean                                   | true  | 是否自动关闭                |
+| format          | string                                    | -     | 选择器的样式会根据`format`自动改变 |
+| defaultValue    | [DayJs](https://day.js.org/) \| null      | null  | 默认值                   |
+| value           | [DayJs](https://day.js.org/) \| null      | -     | 受控的值                  |
+| onChange        | (dayJs) => void                           | -     | 变化回调                  |
+| min             | Dayjs                                     | -     |                       |
+| max             | Dayjs                                     | -     |                       |
+| disabledDates   | (date: Dayjs) => boolean                  | -     | 禁用日期选择                |
+| disabledHours   | (date: Dayjs, hours: number) => boolean   | -     | 禁用小时选择                |
+| disabledMinutes | (date: Dayjs, minutes: number) => boolean | -     | 禁用分钟选择                |
+| disabledSeconds | (date: Dayjs, seconds: number) => boolean | -     | 禁用秒选择                 |

package/documentation/dist/components/dateTimeRangePicker.md

@@ -0,0 +1,36 @@
+# DateTimeRangePicker 日期时间范围选择器
+
+## 示例
+
+```tsx
+import {DateTimeRangePicker} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <DateTimeRangePicker/>
+    )
+}
+```
+
+## Props
+
+| 属性               | 类型                                                                      | 默认值        | 说明                          |
+|------------------|-------------------------------------------------------------------------|------------|-----------------------------|
+| startPickerProps | [DateTimePickerProps](/components/dateTimePicker)                       | -          | 传递给`<DateTimePicker/>`组件的属性 |
+| endPickerProps   | [DateTimePickerProps](/components/dateTimePicker)                       | -          | 传递给`<DateTimePicker/>`组件的属性 |
+| format           | string                                                                  | -          | 选择器的样式会根据`format`自动改变       |
+| defaultValue     | [DayJs](https://day.js.org/) \| null                                    | null       | 默认值                         |
+| value            | [DayJs](https://day.js.org/) \| null                                    | -          | 受控的值                        |
+| onChange         | (dayJs) => void                                                         | -          | 变化回调                        |
+| min              | Dayjs                                                                   | -          |                             |
+| max              | Dayjs                                                                   | -          |                             |
+| disabledDates    | (date: Dayjs) => boolean                                                | -          | 禁用日期选择                      |
+| disabledHours    | (date: Dayjs, hours: number) => boolean                                 | -          | 禁用小时选择                      |
+| disabledMinutes  | (date: Dayjs, minutes: number) => boolean                               | -          | 禁用分钟选择                      |
+| disabledSeconds  | (date: Dayjs, seconds: number) => boolean                               | -          | 禁用秒选择                       |
+| variant          | 'outlined' \| 'underlined'                        \| 'plain'            | 'outlined' |                             |
+| size             | 'small' \| 'medium'                                          \| 'large' | 'medium'   |                             |
+| color            | string                                                                  | -          |                             |
+| disabled         | boolean                                                                 | -          |                             |
+| readOnly         | boolean                                                                 | -          |                             |
+| autoFocus        | boolean                                                                 | -          |                             |

package/documentation/dist/components/descriptions.md

@@ -0,0 +1,35 @@
+# Descriptions 描述列表
+
+## 示例
+
+```tsx
+import {Descriptions} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Descriptions
+            items={[
+                {label: '用户名', content: '张三'},
+                {label: '手机号', content: '13800138000'},
+                {label: '邮箱', content: 'zhangsan@example.com'},
+                {label: '地址', content: '浙江省杭州市西湖区文三路 138 号'}
+            ]}
+        />
+    )
+}
+```
+
+## Props
+
+| 属性             | 类型                                                             | 默认值             | 说明                                |
+|----------------|----------------------------------------------------------------|-----------------|-----------------------------------|
+| size           | 'small' \| 'medium' \| 'large'                                 |                 |                                   |
+| labelWidth     | number                                                         | -               | label的宽度，`grid`模式有效               |
+| colon          | ReactNode                                                      | ':'             | 自定义渲染冒号                           |
+| labelPlacement | 'top'                         \| 'bottom' \| 'left' \| 'right' | 'left'          | label的位置，`table`模式仅支持`left`与`top` |
+| disableMargin  | boolean                                                        | false           | `grid`模式有效                        |
+| disablePadding | boolean                                                        | false           | `table`模式有效                       |
+| items          | {label: ReactNode, content: ReactNode}[]                       | -               |                                   |
+| itemComponent  | any                                                            | DescriptionItem | 自定义渲染Item组件                       |
+| variant        | 'grid' \| 'table'                                              |                 |                                   |
+| columnCount    | number                                                         | 3               |                                   |

package/documentation/dist/components/dialog.md

@@ -0,0 +1,56 @@
+_# Dialog 对话框
+
+## 示例
+
+```tsx
+import {Button, Dialog} from '@canlooks/can-ui'
+
+export default function Index() {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+        <>
+            <Button onClick={() => setOpen(true)}>打开对话框</Button>
+
+            <Dialog
+                open={open}
+                onClose={() => setOpen(false)}
+                icon={<Icon icon={faUser}/>}
+                title="这是标题"
+            >
+                这里是对话框的内容
+            </Dialog>
+        </>
+    )
+}
+```
+
+## Props
+
+| 属性             | 类型                                | 默认值   | 说明              |
+|----------------|-----------------------------------|-------|-----------------|
+| icon           | ReactNode                         | -     |                 |
+| title          | ReactNode                         | -     |                 |
+| footer         | ReactNode                         | -     |                 |
+| suffix         | ReactNode                         | -     |                 |
+| prefix         | ReactNode                         | -     |                 |
+| width          | number                            | -     |                 |
+| minWidth       | number                            | -     |                 |
+| maxWidth       | number                            | -     |                 |
+| showClose      | boolean                           | true  |                 |_
+| closeProps     | [ButtonProps](/components/button#Props) | -     |                 |_
+| showConfirm    | boolean                           | true  |                 |
+| confirmText    | ReactNode                         | '确定'  |                 |
+| confirmProps   | [ButtonProps](/components/button#Props) | -     |                 |
+| onConfirm      | (e) => void                       | -     |                 |
+| confirmLoading | boolean                           | false | 确定按钮的loading状态  |
+| showCancel     | boolean                           | true  |                 |
+| cancelText     | ReactNode                         | '确定'  |                 |
+| cancelProps    | [ButtonProps](/components/button#Props) | -     |                 |
+| onCancel       | (e) => void                       | -     |                 |
+| draggable      | boolean                           | true  | 对话框是否可拖拽        |
+| maskClosable   | boolean                           | true  | 点击遮罩层是否可关闭对话框   |
+| escapeClosable | boolean                           | true  | 点击`ESC`是否可关闭对话框 |
+| defaultOpen    | boolean                           | false |                 |
+| open           | boolean                           | false |                 |
+| onClose        | (reason: string) => void          | -     |                 |

package/documentation/dist/components/divider.md

@@ -0,0 +1,26 @@
+# Divider 分隔线
+
+## 示例
+
+```tsx
+import {Divider, Flex} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Flex width="100%" gap={12}>
+            <Divider style={{flex: 1}}>分割线</Divider>
+            <Divider orientation="vertical"/>
+            <Divider style={{flex: 1}}>分割线</Divider>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+| 属性          | 类型                           | 默认值          | 说明                                      |
+|-------------|------------------------------|--------------|-----------------------------------------|
+| textAlign   | 'start' \| 'center' \| 'end' | 'center'     | 文字所在位置                                  |
+| alignMargin | number \| string             | 36           | `textAlign`为`start`或`end`时有效，表示文字至边缘的距离 |
+| orientation | 'horizontal' \| 'vertical'   | 'horizontal' | 分隔线方向                                   |
+| margin      | number \| string             | 0            |                                         |

package/documentation/dist/components/drawer.md

@@ -0,0 +1,40 @@
+# Drawer 抽屉
+
+## 示例
+
+```tsx
+import {Button, Drawer} from '@canlooks/can-ui'
+
+export default function Index() {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+        <>
+            <Button onClick={() => setOpen(true)}>打开抽屉</Button>
+            <Drawer
+                title="抽屉标题"
+                open={open}
+                onClose={() => setOpen(false)}
+            >
+                这里是抽屉的内容
+            </Drawer>
+        </>
+    )
+}
+```
+
+## Props
+
+| 属性             | 类型                                     | 默认值     | 说明                 |
+|----------------|----------------------------------------|---------|--------------------|
+| title          | ReactNode                              | -       |                    |
+| footer         | ReactNode                              | -       |                    |
+| showClose      | boolean                                | true    |                    |
+| size           | string \| number                       | -       |                    |
+| placement      | 'left' \| 'right' \| 'top' \| 'bottom' | 'right' |                    |
+| maskClosable   | boolean                                | true    | 点击遮罩层是否可关闭对话框      |
+| escapeClosable | boolean                                | true    | 点击`ESC`是否可关闭对话框    |
+| defaultOpen    | boolean                                | false   |                    |
+| open           | boolean                                | false   |                    |
+| onClose        | (reason: string) => void               | -       |                    |
+| slideProps     | [SlideProps](/components/transition)   | -       | 传递至`<Slide/>`组件的属性 |

package/documentation/dist/components/flex.md

@@ -0,0 +1,20 @@
+# Flex 弹性布局
+
+## 示例
+
+```tsx
+import {Flex} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Flex width="100%">
+            <Flex flex={1}>1</Flex>
+            <Flex flex={1}>2</Flex>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+`<Flex/>`組件的属性继承于`CSSProperties`

package/documentation/dist/components/form.md

@@ -0,0 +1,131 @@
+# Form 表单
+
+## 基础示例
+
+```tsx
+import {Form, Input, RadioGroup} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Form labelWidth="20%" style={{width: '300px'}}>
+            <Form.Item field="name" label="姓名">
+                <Input placeholder="请输入姓名"/>
+            </Form.Item>
+            <Form.Item field="gender" label="性别">
+                <RadioGroup
+                    items={[
+                        {label: '男', value: 'male'},
+                        {label: '女', value: 'female'}
+                    ]}
+                />
+            </Form.Item>
+            <Form.Item
+                field="phone"
+                label="电话"
+                rules={{
+                    required: true,
+                    pattern: /^1\d{10}$/,
+                    message: '电话输入不正确'
+                }}
+            >
+                <Input placeholder="请输入电话"/>
+            </Form.Item>
+        </Form>
+    )
+}
+```
+
+## 关联字段
+
+```tsx
+import {Form, Input, RadioGroup} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Form labelWidth="30%" style={{width: '300px'}}>
+            <Form.Item
+                field="needPassword"
+                label="需要密码"
+                initialValue={0}
+            >
+                <RadioGroup
+                    items={[
+                        {label: '是', value: 1},
+                        {label: '否', value: 0}
+                    ]}
+                />
+            </Form.Item>
+            <Form.Relatable shouldUpdate={(prev, next) => prev.needPassword !== next.needPassword}>
+                {({needPassword}) => !!needPassword && (
+                    <>
+                        <Form.Item field="password" label="密码">
+                            <Input type="password" placeholder="请输入密码"/>
+                        </Form.Item>
+                        <Form.Item
+                            field="confirmPassword"
+                            label="确认密码"
+                            dependencies={['password']}
+                            rules={{
+                                validator: (confirmPassword: string, {password}: any) => {
+                                    if (confirmPassword !== password) {
+                                        throw '两次密码输入不一致'
+                                    }
+                                }
+                            }}
+                        >
+                            <Input type="password" placeholder="请再次输入密码"/>
+                        </Form.Item>
+                    </>
+                )}
+            </Form.Relatable>
+        </Form>
+    )
+}
+```
+
+## FormProps
+
+`FormProps`继承了[DescriptionsProps](/components/descriptions)的所有属性，此外还有如下属性：
+
+| 属性           | 类型                                           | 默认值    | 说明                                                                              |
+|--------------|----------------------------------------------|--------|---------------------------------------------------------------------------------|
+| wrapperRef   | Ref<HTMLDivElement>                          | -      | 最外层元素的ref，默认ref属性已经被[FormRef](#FormRef)取代                                       |
+| requiredMark | ReactNode                                    | '*'    | 必填字段的标记                                                                         |
+| component    | ElementType                                  | 'form' | 自定义渲染组件                                                                         |
+| initialValue | Object                                       | -      | 初始值                                                                             |
+| onChange     | (field, value, formValue) => void            | -      | 值变化回调                                                                           |
+| onFinish     | (formValue) => void                          | -      | 提交完成后回调                                                                         |
+| items        | [FormItemProps](#FormItemProps)[]            | -      |                                                                                 |
+| variant      | 'plain' \| 'grid'                 \| 'table' | 'grid' | 指定为`grid`或`table`时会渲染`<Descriptions/>`组件；<br/>指定为`plain`时不渲染外层组件，直接渲染`children` |
+| columnCount  | ResponsiveProps                              | 3      |                                                                                 |
+
+## FormItemProps
+
+| 属性           | 类型                                                                                                                                   | 默认值   | 说明                                             |
+|--------------|--------------------------------------------------------------------------------------------------------------------------------------|-------|------------------------------------------------|
+| field        | Id \| Id[]                                                                                                                           | -     | 字段键名                                           |
+| initialValue | any                                                                                                                                  | -     |                                                |
+| rules        | {<br/>message?: ReactNode,<br/>required?: boolean,<br/>pattern?: RegExp,<br/>validator?(fieldValue, formValue, formRef): any<br/>}[] | -     |                                                |
+| required     | boolean                                                                                                                              | false | 是否显示必填标记                                       |
+| error        | boolean                                                                                                                              | false | 该字段是否存在错误                                      |
+| helperText   | ReactNode                                                                                                                            | -     | 提示文字                                           |
+| dependencies | Id[] \| Id[][]                                                                                                                       | -     | 依赖其他字段，若依赖的字段发生变化，该字段也会重新执行`validate`操作        |
+| children     | ReactNode \| (fieldProps, styleProps) => ReactNode                                                                                   | -     |                                                |
+| noStyle      | boolean                                                                                                                              | -     | 是否禁用默认样式，若指定为`true`则不会渲染`<DescriptionItem/>`组件 |
+
+## FormRef
+
+| 方法             | 类型                              | 说明                                       |
+|----------------|---------------------------------|------------------------------------------|
+| submit         | (): Promise<FormValue \| null>  |                                          |
+| getFieldValue  | (field: Id \| Id[]): FieldValue |                                          |
+| getFormValue   | (): FormValue                   |                                          |
+| getFieldError  | (field): FieldError             | 获取单个字段的错误                                |
+| getFormErrors  | (): { \[field]: FieldError }    | 获取所有字段的错误                                |
+| setFormValue   | (formValue: FormValue): void    | 全量覆盖表单值                                  |
+| mergeFormValue | (formValue: FormValue): void    | 合并表单值                                    |
+| setFieldValue  | (field, value): void            |                                          |
+| resetForm      | (): void                        | 重置整个表单<br/>注意：执行改方法前请确保指定了`initialValue` |
+| resetField     | (field): void                   | 重置某个字段<br/>注意：执行改方法前请确保指定了`initialValue` |
+| isFormTouched  | (): boolean                     | 判断该表单是否被改动过                              |
+| isFieldTouched | (field): boolean                | 判断某个字段是否被改动过                             |

package/documentation/dist/components/formDialog.md

@@ -0,0 +1,36 @@
+# FormDialog 表单对话框
+
+## 示例
+
+```tsx
+import {Button, FormDialog, Input} from '@canlooks/can-ui'
+
+export default function Index() {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+        <>
+            <Button onClick={() => setOpen(true)}>打开表单对话框</Button>
+            <FormDialog
+                open={open}
+                onClose={() => setOpen(false)}
+                title="对话框标题"
+                items={[
+                    {field: 'name', label: '姓名', children: <Input autoFocus/>},
+                ]}
+            />
+        </>
+    )
+}
+```
+
+## Props
+
+`<FormDialog/>`组件继承了`<Dialog/>`组件的所有属性，此外还有如下属性：
+
+| 属性        | 类型                                                | 默认值 | 说明                |
+|-----------|---------------------------------------------------|-----|-------------------|
+| formProps | [FormProps](/components/form#FormProps)           | -   | 传递给`<Form/>`组件的属性 |
+| formRef   | [FormRef](/components/form#FormRef)               | -   |                   |
+| items     | [FormItemProps](/components/form#FormItemProps)[] | -   |                   |
+| onFinish  | (formValue) => void                               | -   |                   |

package/documentation/dist/components/grid.md

@@ -0,0 +1,34 @@
+# Grid 网格布局
+
+## 示例
+
+```tsx
+import {Grid} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Grid style={{width: '100%'}}>
+            <Grid.Item span={3}>3</Grid.Item>
+            <Grid.Item span={7}>7</Grid.Item>
+            <Grid.Item span={2}>2</Grid.Item>
+        </Grid>
+    )
+}
+```
+
+## GridProps
+
+| 属性          | 类型      | 默认值   | 说明                                   |
+|-------------|---------|-------|--------------------------------------|
+| inline      | boolean | false | 若指定为`true`，相当于`display: inline-flex` |
+| columnCount | number  | 12    |                                      |
+| gap         | number  | -     |                                      |
+| columnGap   | number  | -     |                                      |
+| rowGap      | number  | -     |                                      |
+
+## GridItemProps
+
+| 属性     | 类型     | 默认值 | 说明    |
+|--------|--------|-----|-------|
+| span   | number | -   | 横跨的列数 |
+| offset | number | -   | 偏移的列数 |