@king-design/intact 2.0.0-beta.1 → 2.0.0

package/components/datepicker/index.md

@@ -9,36 +9,59 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前选中的日期字符串 | `String` | `undefind` |
-| clearable | 是否能清空当前值 | `Boolean` | `false` |
-| max | 最大可选日期，可以为日期字符串或日期对象 | `String` | `Date` | `undefind` |
-| min | 最小可选日期，可以为日期字符串或日期对象 | `String` | `Date` | `undefind` |
-| placeholder | 占位文字 | `String` | `"请选择日期"` |
-| disabled | 是否禁用 | `Boolean` | `false` |
-| disabledDate | 该属性值是一个函数，用于定义那些日期被禁止选择，函数参数为日期字符串，返回`true`则表示禁用该日期 | `Function` | `(date) => false` |
-| multiple | 是否支持多选 | `Boolean` | `false` |
-| size | 组件尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
+| value | 当前选择的元素，可用`v-model`双向绑定 | `Value` | `Value[]` | `[Value, Value]`  | `[Value, Value][]` | `""` |
+| multiple | 是否支持多选 | `boolean` | `false` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| name | 表单元素的`name` | `string` | `undefined` |
+| size | 尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
+| hideIcon | 是否隐藏后面的图标 | `boolean` | `false` |
+| clearable | 是否可清空 | `boolean` | `false` |
+| fluid | 是否宽度100% | `boolean` | `false` |
+| inline | 展示内联模式，该模式下，组件没有边框，宽度和高度如同内联元素一样由内容撑开 | `boolean` | `false` |
+| placeholder | 占位文案 | `string` | `"请选择日期"` |
+| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+| width | 指定宽度，组件自动添加单位`px` | `number` | `string` | `undefined` | 
+| range | 是否选择日期范围 | `boolean` | `false` |
+| format | 指定日期格式化字符串 | `string` | `YYYY-MM-DD HH:mm:ss` |
+| valueFormat | 指定`value`值日期格式化字符串 | `string` | `undefined` |
+| showFormat | 指定展示的日期格式化字符串 | `string` | `undefined` |
+| max | 最大可选日期 | `Value` | `undefind` |
+| min | 最小可选日期 | `Value` | `undefind` |
+| disabledDate | 该属性值是一个函数，用于定义那些日期被禁止选择，函数参数为日期字符串，返回`true`则表示禁用该日期 | `(v: Dayjs) => boolean` | `undefined` |
 | type | 组件类型：`"date"` 只选择日期；`"datetime"` 选择日期和时间；`"year"` 选择年份；`"month"` 选择月份 | `"date"` | `"datetime"` | `"year"` | `"month"` | `"date"` |
-| disabledHours | 禁用小时选择 | `Boolean` | `false` |
-| disabledMinutes | 禁用分钟选择 | `Boolean` | `false` |
-| disabledSeconds | 禁用秒钟选择 | `Boolean` | `false` |
-| shortcuts | 指定快捷方式 | `Array<Object>` | `undefined` |
-| range | 是否选择日期范围 | `Boolean` | `false` |
-| container | 指定弹出选择层追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Function` &#124; `String` | `undefined` |
-| format | 指定日期格式化字符串 | `String` | `YYYY-MM-DD HH:mm:ss` |
-| valueFormat | 指定`value`值日期格式化字符串 | `String` | `undefined` |
-| showFormat | 指定展示的日期格式化字符串 | `String` | `undefined` |
-
-# 静态方法
-
-| 方法名 | 说明 | 参数 | 返回值 |
-| --- | --- | --- | --- |
-| getDateString | 将日期对象转为形如`2019-02-01 12:00:00`的字符串 | 1. `date` 将要转化的日期对象 <br /> 2. `type` `"year"`： 只返回年份；`"month"`：返回年份和月份；`"datetime"`：返回日期和时间字符串；`*`：否则返回日期字符串 | `String` |
-| createDate | 传入形如`2019-02-01 12:00:00`或`2019-02-01`的字符串，返回日期对象（跨浏览器） | `dateString` | `Date` |
+| shortcuts | 指定快捷方式 | `Shortcut[]` | `undefined` |
+
+```ts
+import {Dayjs} from 'dayjs';
+import {VNode} from 'intact';
+
+export type Value = string | Date | number | Dayjs;
+export type Shortcut = {
+    label: (() => string | VNode) | string | VNode 
+    value: () => Value | [Value, Value]
+}
+export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
+```
+
+# 扩展点
+
+## Select
+
+| 名称 | 说明 | 参数 |
+| --- | --- | --- |
+| value | 自定义选择结果的展示 | `([value: any, label: Children]) => Children` |
+| values | 自定义多选的选择结果的展示 | `([values: any[], labels: Children[]]) => Children` |
+| prefix | 自定义输入款前面展示的内容 | - |
+| suffix | 自定义输入框后面展示的内容 | - |
+
+```ts
+import {Children} from 'intact';
+```
 
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| selectStart | 该事件尽在范围选择(`range`)，并且只选择了第一个值时触发 | `dateString` |
-| change | 当用户操作完成且值`value`变化时触发 | `dateString` |
+| show | 菜单弹出时触发 | - |
+| hide | 菜单隐藏时触发 | - |
+| selecting | 该事件尽在范围选择(`range`)触发，表示用户正在操作选择，可能只选了一个值，或者正在修改日期的时间 | `(value: [Dayjs, Dayjs?]) => void` |

package/components/datepicker/index.spec.ts

@@ -20,7 +20,7 @@ const month = now.getMonth();
 describe('Datepicker', () => {
     afterEach(async () => {
         unmount();
-        await wait(400);
+        await wait(500);
     });
 
     describe('Pick', () => {

package/components/datepicker/styles.ts

@@ -57,7 +57,7 @@ const defaults = {
     }
 };
 
-let datepicker: any;
+let datepicker: typeof defaults;
 setDefault(() => {
     datepicker = deepDefaults(theme, {datepicker: defaults}).datepicker;
 });

package/components/diagram/index.md

@@ -13,46 +13,95 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| label | 图形标签，可以书写`html`字符串 | `String` | `Number` | `undefined` |
-| left | 相对左上角横向偏移量 | `String` | `Number` | `0` |
-| top | 相对左上角纵向偏移量 | `String` | `Number` | `0` |
-| width | 图形宽度 | `String` | `Number` | `0` |
-| height | 图形高度 | `String` | `Number` | `0` |
-| style | 指定图形的样式，该样式非`html`元素的样式，而是`svg`元素的样式，并且只支持`Object`的方式指定，不支持字符串。支持的属性可以查阅[mxGraph mxConstants][1]的文档（以`STYLE_`开头的属性) | `Object` | `undefined` |
 | strokeStyle | 定义线条样式 | `"solid"` | `"dashed"` | `"dotted"` | `"solid"` |
-| movable | 图形是否可拖动 | `Boolean` | `false` |
-| connectable | 图形是否可手动连接 | `Boolean` | `false` |
-| resizable | 图形是否可手动调整大小 | `Boolean` | `false` |
-| rotatable | 图形是否可旋转 | `Boolean` | `false` |
-| editable | 图形是否可编辑 | `Boolean` | `false` |
-| selectable | 图形是否可选择 | `Boolean` | `false` |
-| data | 附加到图形上的数据，可通过图形对象获取该数据 | `*` | `undefined` |
+| label | 图形标签，可以书写`html`字符串 | `string` | `number` | `undefined` |
+| style | 指定图形的样式，该样式非`html`元素的样式，而是`svg`元素的样式，并且只支持`Object`的方式指定，不支持字符串。支持的属性可以查阅[mxGraph mxConstants][1]的文档（以`STYLE_`开头的属性) | <code>Record&#60;string, string &#124; number&#62;</code> | `undefined` |
+| data | 附加到图形上的数据，可通过图形对象获取该数据 | `any` | `undefined` |
+| left | 相对左上角横向偏移量 | `string` &#124; `number` | `0` |
+| top | 相对左上角纵向偏移量 | `string` &#124; `number` | `0` |
+| width | 图形宽度 | `string` &#124; `number` | `0` |
+| height | 图形高度 | `string` &#124; `number` | `0` |
+| movable | 图形是否可拖动 | `boolean` | `false` |
+| selectable | 图形是否可选择 | `boolean` | `false` |
+| resizable | 图形是否可手动调整大小 | `boolean` | `false` |
+| rotatable | 图形是否可旋转 | `boolean` | `false` |
+| editable | 图形是否可编辑 | `boolean` | `false` |
+| connectable | 图形是否可手动连接 | `boolean` | `false` |
+
+### DRectangle
 
-## DRectangle
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| width | 图形宽度 | `string` &#124; `number` | `120` |
+| height | 图形高度 | `string` &#124; `number` | `60` |
+| rounded | 定义矩形的边框圆角大小 | `number` &#124; `string` | `0` |
+
+### DSquare
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| width | 图形宽度 | `string` &#124; `number` | `80` |
+| rounded | 定义矩形的边框圆角大小 | `number` &#124; `string` | `0` |
+
+### DImage
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| width | 图形宽度 | `string` &#124; `number` | `80` |
+| height | 图形高度 | `string` &#124; `number` | `80` |
+| src | 指定图片地址 | `string` | `""` |
+
+### DParallelogram
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| width | 图形宽度 | `string` &#124; `number` | `120` |
+| height | 图形高度 | `string` &#124; `number` | `60` |
+
+### DHexagon  / DEllipse / DDocument / DCallout / DCloud
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| rounded | 定义矩形的边框圆角大小 | `Number` &#124; `String` | `0` |
+| width | 图形宽度 | `string` &#124; `number` | `120` |
+| height | 图形高度 | `string` &#124; `number` | `80` |
 
-## DImage
+### DCircle
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| src | 指定图片地址 | `String` | `""` |
+| width | 图形宽度 | `string` &#124; `number` | `80` |
+
+### DDiamond 
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| width | 图形宽度 | `string` &#124; `number` | `80` |
+| height | 图形高度 | `string` &#124; `number` | `80` |
+
+### DTriangle
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| width | 图形宽度 | `string` &#124; `number` | `60` |
+| height | 图形高度 | `string` &#124; `number` | `80` |
 
 ## DLine
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| strokeStyle | 定义线条样式 | `"solid"` &#124; `"dashed"` &#124; `"dotted"` | `"solid"` |
+| label | 图形标签，可以书写`html`字符串 | `string` &#124; `number` | `undefined` |
+| style | 指定图形的样式，该样式非`html`元素的样式，而是`svg`元素的样式，并且只支持`Object`的方式指定，不支持字符串。支持的属性可以查阅[mxGraph mxConstants][1]的文档（以`STYLE_`开头的属性) | <code>Record&#60;string, string &#124; number&#62;</code> | `undefined` |
+| data | 附加到图形上的数据，可通过图形对象获取该数据 | `any` | `undefined` |
+| type | 定义线条形状 | `"rounded"` &#124; `"sharp"` &#124; `"curved"` &#124; `"straight"` | `"straight"` |
 | startArrow | 定义线条开始箭头 | `"none"` &#124; `"classic"` &#124; `"classicThin"` &#124; `"block"` &#124; `"blockThin"` &#124; `"open"` &#124; `"openThin"` &#124; `"oval"` &#124; `"diamond"` &#124; `"diamondThin"` | `"none"` |
 | endArrow | 定义线条结束箭头 | `"none"` &#124; `"classic"` &#124; `"classicThin"` &#124; `"block"` &#124; `"blockThin"` &#124; `"open"` &#124; `"openThin"` &#124; `"oval"` &#124; `"diamond"` &#124; `"diamondThin"` | `"classic"` |
-| type | 定义线条形状 | `"rounded"` &#124; `"sharp"` &#124; `"curved"` &#124; `"straight"` | `"straight"` |
-| startPoint | 定义线条的起始点 | `Array<Number>` | `[0, 0]` |
-| endPoint | 定义线条的结束点 | `Array<Number>` | `[50, 0]` |
-| from | 定义线条连接的起始图形的`key`，一旦指定该属性，则`startPoint`属性便失效 | `String` | `undefined` |
-| to | 定义线条连接的结束图形的`key`，一旦指定该属性，则`endPoint`属性便失效 | `String` | `undefined` |
-| exit | 当指定了`from`时，通过该属性可以指定起始点在图形周长上的具体位置，该属性取值为数组，长度为2，每一项取值范围为`0 ~ 1` | `Array<Number>` | `undefined` |
-| entry | 当指定了`to`时，通过该属性可以指定结束点在图形周长上的具体位置，该属性取值为数组，长度为2，每一项取值范围为`0 ~ 1` | `Array<Number>` | `undefined` |
+| startPoint | 定义线条的起始点 | `[number, number]` | `[0, 0]` |
+| endPoint | 定义线条的结束点 | `[number, nunber]` | `[50, 0]` |
+| from | 定义线条连接的起始图形的`key`，一旦指定该属性，则`startPoint`属性便失效 | `string` | `undefined` |
+| to | 定义线条连接的结束图形的`key`，一旦指定该属性，则`endPoint`属性便失效 | `string` | `undefined` |
+| exit | 当指定了`from`时，通过该属性可以指定起始点在图形周长上的具体位置，该属性取值为数组，长度为2，每一项取值范围为`0 ~ 1` | `[number, number]` | `undefined` |
+| entry | 当指定了`to`时，通过该属性可以指定结束点在图形周长上的具体位置，该属性取值为数组，长度为2，每一项取值范围为`0 ~ 1` | `[number, number]` | `undefined` |
 
 ## DLayout
 
@@ -60,71 +109,71 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| left | 指定该布局下所有子元素横向偏移量 | `Number` &#124; `String` | `0` |
-| top | 指定该布局下所有子元素纵向偏移量 | `Number` &#124; `String` | `0` |
+| left | 指定该布局下所有子元素横向偏移量 | `number` &#124; `string` | `0` |
+| top | 指定该布局下所有子元素纵向偏移量 | `number` &#124; `string` | `0` |
 
-## DStackLayout
+### DStackLayout
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| spacing | 指定子元素间隔 | `Number` &#124; `String` | `0` |
-| fill | 指定子元素是否自适应父容器的宽/高 | `Boolean` | `false` |
 | type | 指定子元素排列方式 | `horizontal` &#124; `"vertical"` | `"horizontal"` |
-| resizeParent | 指定子元素是否在父元素宽/高不够的情况下撑开父元素 | `Boolean` | `false` |
-| border | 指定子元素距离父元素边框的距离，类似css中的`padding` | `Number` &#124; `String` | `0` |
-| wrap | 指定资源最大排列宽/高，超过则自动换行 | `Number` &#124; `String` | `undefined` |
+| spacing | 指定子元素间隔 | `number` &#124; `string` | `0` |
+| wrap | 指定资源最大排列宽/高，超过则自动换行 | `number` &#124; `string` | `undefined` |
+| fill | 指定子元素是否自适应父容器的宽/高 | `boolean` | `false` |
+| border | 指定子元素距离父元素边框的距离，类似css中的`padding` | `number` &#124; `string` | `0` |
+| resizeParent | 指定子元素是否在父元素宽/高不够的情况下撑开父元素 | `boolean` | `false` |
 
-## DPartitionLayout
+### DPartitionLayout
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| spacing | 指定子元素间隔 | `Number` &#124; `String` | `0` |
 | type | 指定子元素排列方式 | `horizontal` &#124; `"vertical"` | `"horizontal"` |
-| resizeVertices | 指定子元素是否自适应父元素的宽/高 | `Boolean` | `true` |
-| border | 指定子元素距离父元素边框的距离，类似css中的`padding` | `Number` &#124; `String` | `0` |
+| spacing | 指定子元素间隔 | `number` &#124; `string` | `0` |
+| border | 指定子元素距离父元素边框的距离，类似css中的`padding` | `number` &#124; `string` | `0` |
+| resizeVertices | 指定子元素是否自适应父元素的宽/高 | `boolean` | `true` |
 
-## DTreeLayout
+### DTreeLayout
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | type | 指定已连接的子元素排列方式 | `horizontal` &#124; `"vertical"` | `"horizontal"` |
-| resizeParent | 指定子元素是否在父元素宽/高不够的情况下撑开父元素 | `Boolean` | `false` |
-| levelDistance | 指定每一层图形之间的间隔 | `Number` &#124; `String` | `30` |
-| nodeDistance | 指定同一层图形之间的间隔 | `Number` &#124; `String` | `16` |
-| groupPadding | 指定子元素距离父元素边框的距离，类似css中的`padding`，只有`resizeParent`为`true`时才生效 | `Number` &#124; `String` | `0` |
+| levelDistance | 指定每一层图形之间的间隔 | `number` &#124; `string` | `30` |
+| nodeDistance | 指定同一层图形之间的间隔 | `number` &#124; `string` | `16` |
+| resizeParent | 指定子元素是否在父元素宽/高不够的情况下撑开父元素 | `boolean` | `false` |
+| groupPadding | 指定子元素距离父元素边框的距离，类似css中的`padding`，只有`resizeParent`为`true`时才生效 | `number` &#124; `string` | `0` |
 
-## DRadialLayout
+### DRadialLayout
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| levelDistance | 指定每一层图形之间的间隔 | `Number` &#124; `String` | `60` |
-| nodeDistance | 指定同一层图形之间的间隔 | `Number` &#124; `String` | `16` |
-| rootx | 指定中心图形的横坐标 | `Number` &#124; `String` | `0` |
-| rooty | 指定中心图形的纵坐标 | `Number` &#124; `String` | `0` |
+| levelDistance | 指定每一层图形之间的间隔 | `number` &#124; `string` | `60` |
+| nodeDistance | 指定同一层图形之间的间隔 | `number` &#124; `string` | `16` |
+| rootx | 指定中心图形的横坐标 | `number` &#124; `string` | `0` |
+| rooty | 指定中心图形的纵坐标 | `number` &#124; `string` | `0` |
 
-## DFlowLayout
+### DFlowLayout
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| intraCellSpacing | 指定同一层图形之间的间隔 | `Number` &#124; `String` | `30` |
-| interHierarchySpacing | 指定非连接图形之间的间隔 | `Number` &#124; `String` | `30` |
-| interRankCellSpacing | 指定每一层图形之间的间隔 | `Number` &#124; `String` | `50` |
 | type | 指定已连接的子元素排列方式 | `horizontal` &#124; `"vertical"` | `"horizontal"` |
-| resizeParent | 指定子元素是否在父元素宽/高不够的情况下撑开父元素 | `Boolean` | `false` |
-| parentBorder | 指定子元素距离父元素边框的距离，类似css中的`padding`，只有`resizeParent`为`true`时才生效 | `Number` &#124; `String` | `0` |
+| intraCellSpacing | 指定同一层图形之间的间隔 | `number` &#124; `string` | `30` |
+| interRankCellSpacing | 指定每一层图形之间的间隔 | `number` &#124; `string` | `50` |
+| interHierarchySpacing | 指定非连接图形之间的间隔 | `number` &#124; `string` | `30` |
+| resizeParent | 指定子元素是否在父元素宽/高不够的情况下撑开父元素 | `boolean` | `false` |
+| parentBorder | 指定子元素距离父元素边框的距离，类似css中的`padding`，只有`resizeParent`为`true`时才生效 | `number` &#124; `string` | `0` |
 
-## DCircleLayout
+### DCircleLayout
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| x0 | 指定布局的横坐标位置 | `Number` &#124; `String` | `0` |
-| y0 | 指定布局的纵坐标位置 | `Number` &#124; `String` | `0` |
+| x0 | 指定布局的横坐标位置 | `number` &#124; `string` | `0` |
+| y0 | 指定布局的纵坐标位置 | `number` &#124; `string` | `0` |
 
-## DOrganicLayout
+### DOrganicLayout
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| forceConstant | 指定已连接图形之间的间隔 | `Number` &#124; `String` | `50` |
+| forceConstant | 指定已连接图形之间的间隔 | `number` &#124; `string` | `50` |
 
 # 事件
 
@@ -132,8 +181,8 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| selectionChanged | 当`Diagram`可选择时`selectable`，选中的图形改变会触发该事件 | `cells`: 所有选中的图形 |
-| labelChanged | 当`Diagram`可编辑时`editable`，`label`改变会触发该事件 | `cell`: 当前图形；`newValue`: 改变后的值；`oldValue`：改变前的值 |
+| labelChanged | 当`Diagram`可编辑时`editable`，`label`改变会触发该事件 | `(cell: any, newValue: string, oldValue: string) => void` |
+| selectionChanged | 当`Diagram`可选择时`selectable`，选中的图形改变会触发该事件 | `(cells: any[]) => void` |
 
 
 [1]: https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxConstants-js.html

package/components/diagram/shapes/line.ts

@@ -10,10 +10,10 @@ export interface DLineProps extends DBaseProps {
     endArrow?: Arrow
     startPoint?: Point
     endPoint?: Point
-    exit?: Point
-    entry?: Point
     from?: Key
     to?: Key
+    exit?: Point
+    entry?: Point
 }
 
 type Arrow = 
@@ -57,7 +57,6 @@ const arrows: Arrow[] = [
 
 const typeDefs: Required<TypeDefs<DLineProps>> = {
     ...DBase.typeDefs,
-    strokeStyle: ['solid', 'dashed', 'dotted'],
     type: ['rounded', 'sharp', 'curved', 'straight'],
     startArrow: arrows,
     endArrow: arrows,

package/components/dialog/base.ts

@@ -10,7 +10,7 @@ import {useMouseOutsidable} from '../../hooks/useMouseOutsidable';
 import {useDraggable} from './useDraggable';
 import {useEscClosable} from './useEscClosable';
 import {SHOW, HIDE, DIALOG} from './constants';
-import {useFixBody} from './useFixBody';
+import {useFixBody, setHooks} from './useFixBody';
 import type {Events} from '../types';
 
 export interface BaseDialogProps {
@@ -100,6 +100,7 @@ export class BaseDialog<
     static typeDefs = typeDefs;
     static defaults = defaults;
     static events = events;
+    static setHooks = setHooks;
 
     public dialogRef = createRef<HTMLDivElement>();
 

package/components/dialog/demos/block.md

@@ -6,8 +6,6 @@ order: 1
 组件提供了`header`和`footer`扩展点（block），通过它们可以自定义头部和底部。有时候我们可能想
 完整去掉整个底部`footer`，这可以通过置空`footer-wrapper`这个扩展点做到。
 
-> 可以通过`parent()`引用到组件定义的默认内容
-
 > vue会忽略所有空`slot`，所以如果要重置`footer-wrapper`可以传一个空`div`代替
 
 ```vdt
@@ -61,9 +59,8 @@ import {Button, Dialog} from 'kpc';
 
         <template slot="footer">
             Custom Footer
-            <!-- vue不支持parent()引用，我们需要重新定义按钮 -->
-            <Button @click="show = false">取消</Button>
             <Button type="primary" @click="show = false">确认</Button>
+            <Button @click="show = false">取消</Button>
         </template>
     </Dialog>
     <Dialog v-model="show1" title="No Footer">
@@ -82,14 +79,16 @@ data() {
 },
 ```
 
-```jsx
+```tsx
 import React from 'react';
-import Button from 'kpc';
-import Dialog from 'kpc';
+import {Button, Dialog} from '@king-design/react';
 import './index.styl';
 
 export default class Demo extends React.Component {
-    state = {}
+    state = {
+        show: false,
+        show1: false,
+    }
 
     render() {
         return (
@@ -101,7 +100,7 @@ export default class Demo extends React.Component {
                     type="primary"
                 >Show No Footer Dialog</Button>
                 <Dialog value={this.state.show}
-                    ev$change-value={(c, show) => this.setState({show})}
+                    onChangeValue={(show) => this.setState({show})}
                     b-header={
                         <div className="k-title">
                             <i className="ion-person"></i>
@@ -111,15 +110,15 @@ export default class Demo extends React.Component {
                     b-footer={
                         <React.Fragment>
                             Custom Footer
-                            <Button onClick={() => this.setState({show: false})}>取消</Button>
                             <Button type="primary" onClick={() => this.setState({show: false})}>确认</Button>
+                            <Button onClick={() => this.setState({show: false})}>取消</Button>
                         </React.Fragment>
                     }
                 >
                     Dialog Body 
                 </Dialog>
                 <Dialog value={this.state.show1}
-                    on$change-value={(c, show1) => this.setState({show1})}
+                    onChangeValue={(show1) => this.setState({show1})}
                     title="No Footer"
                     b-body="body"
                     b-footer-wrapper=""
@@ -130,48 +129,3 @@ export default class Demo extends React.Component {
     }
 }
 ```
-
-```angular
-// import {Component} from '@angular/core';
-// 
-// @Component({
-//     selector: 'app-demo',
-//     template: `
-//         <div>
-//             <k-button (click)="set('show', true)"
-//                 type="primary"
-//             >Show Dialog</k-button>
-//             <k-button (click)="set('show1', true)"
-//                 type="primary"
-//             >Show No Footer Dialog</k-button>
-//             <k-dialog [(value)]="show">
-//                 <ng-template #header>
-//                     <div class="k-title">
-//                         <i class="ion-person"></i>
-//                         Custom Header
-//                     </div>
-//                 </ng-template>
-//         
-//                 Dialog Body 
-//         
-//                 <ng-template #footer>
-//                     Custom Footer
-//                     <k-button (click)="show = false">取消</k-button>
-//                     <k-button type="primary" (click)="show = false">确认</k-button>
-//                 </ng-template>
-//             </k-dialog>
-//             <k-dialog [(value)]="show1" title="No Footer">
-//                 <ng-template #body>body</ng-template>
-//                 <ng-template #footer_wrapper></ng-template>
-//             </k-dialog>
-//         </div>
-//     `,
-//     styleUrls: ['./index.styl'],
-// })
-// export class AppDemoComponent {
-//     private show;
-//     private show1;
-// 
-//     set(key, value) { this[key] = value; }
-// }
-```

package/components/dialog/demos/size.md

@@ -4,7 +4,7 @@ order: 0.2
 ---
 
 添加`size`属性，定义如下尺寸：`large`, `default`，`small`，`mini`；另外你也可以通过`width`属性，给弹窗指定宽度，
-如果该值为`Number`类型，则默认单位为`px`，`String`类型时，你需要指定单位
+如果该值为`number`类型，则默认单位为`px`，`string`类型时，你需要指定单位
 
 > `width`优先级高于`size`