@king-design/intact 2.0.0-beta.0 → 2.0.1

package/components/colorpicker/styles.ts

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

package/components/context.ts

@@ -5,11 +5,15 @@ export interface ProviderProps<T> {
     value?: T 
 }
 
+export interface ConsumerProps<T> {
+    defaultValue?: T
+}
+
 type ProviderConstructor<T> = ComponentConstructor<Component<ProviderProps<T>>> 
-type ConsumerConstructor = ComponentConstructor<Component<{}>> 
+type ConsumerConstructor<T> = ComponentConstructor<Component<ConsumerProps<T>>> 
 
 let id = 0;
-export function createContext<T = any>(defaultValue?: T): {Provider: ProviderConstructor<T>, Consumer: ConsumerConstructor} {
+export function createContext<T = any>(defaultValue?: T): {Provider: ProviderConstructor<T>, Consumer: ConsumerConstructor<T>} {
     const injectionKey = `$Context-${id++}`;
 
     class Provider extends Component<ProviderProps<T>> {
@@ -27,10 +31,10 @@ export function createContext<T = any>(defaultValue?: T): {Provider: ProviderCon
         }
     }
 
-    class Consumer extends Component {
-        static template = consumertemplate;
+    class Consumer extends Component<ConsumerProps<T>> {
+        static template = consumerTemplate;
 
-        private ref =  inject(injectionKey) as RefObject<T | undefined>;
+        private ref = inject(injectionKey, null);
     }
 
     return {Provider, Consumer};
@@ -40,8 +44,11 @@ function providerTemplate(this: Component) {
     return this.$props.children;
 }
 
-function consumertemplate(this: Component & {ref: RefObject<any>}) {
-    return (this.$props.children as unknown as Function)(this.ref.value);
+function consumerTemplate(this: Component & {ref: RefObject<any>}) {
+    const ref = this.ref;
+    const props = this.$props as any;
+    const value = ref && ref.value || props && props.value;
+    return (this.$props.children as unknown as Function)(value);
 }
 
 // Maybe like legency context api of React

package/components/datepicker/demos/disabledDate.md

@@ -6,8 +6,6 @@ order: 3
 通过`disabledDate`属性，可以定义个方法，来指定哪些日期被禁止选择。组件会将一个日期字符串
 作为方法的参数，如果方法返回“真”则禁用掉该日期，否则不禁用。
 
-> `@since v1.1.0` 会传入当前日期对象`Dayjs`作为第2个参数
-
 ```vdt
 import {Datepicker} from 'kpc';
 

package/components/datepicker/demos/format.md

@@ -14,7 +14,7 @@ order: 3.1
 展示的日期，通过`valueFormat`格式化`value`值，并且它们的优先级比`format`高
 
 > 如果你想给组件传入初始`value`值，但是该字符串不是默认格式，则必须指定`format`或者`valueFormat`。同时该
-> 属性也可以作用于`maxDate` `minDate`属性
+> 属性也可以作用于`max` `min`属性
 
 ```vdt
 import {Datepicker} from 'kpc';

package/components/datepicker/demos/shortcuts.md

@@ -5,8 +5,8 @@ order: 0.1
 
 通过`shortcuts`属性可以指定快捷方式，数组的成员为对象，形如：`{label, value}`:
 
-1. `label` `String | vNode | Function` 指定要展示的文案，可以是返回文案的函数
-2. `value` `Function` 指定选中后的值（日期对象），如果是范围选择，返回数组
+1. `label` `string | VNode | (() => string | VNode)` 指定要展示的文案，可以是返回文案的函数
+2. `value` `() => Value | [Value, Value]` 指定选中后的值（日期对象），如果是范围选择，返回数组
 
 组件内置了一些快捷方式，可以直接使用，如本例所示
 

package/components/datepicker/helpers.ts

@@ -3,10 +3,10 @@ import {strPad, range} from '../utils';
 import {_$} from '../../i18n';
 import {StateValueItem} from './basepicker';
 
-export function getNowDate() {
+export function getNowDate(isEnd?: boolean) {
     // only date without time
     const now = new Date();
-    clearTime(now);
+    isEnd ? endTime(now) : clearTime(now);
 
     return dayjs(now);
 }
@@ -18,6 +18,13 @@ export function clearTime(date: Date) {
     date.setMilliseconds(0);
 }
 
+export function endTime(date: Date) {
+    date.setHours(23);
+    date.setMinutes(59);
+    date.setSeconds(59);
+    date.setMilliseconds(999);
+}
+
 export function isEqual(
     a: Dayjs | undefined | null,
     b: Dayjs | undefined | null,

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/index.vdt

@@ -76,12 +76,13 @@ const generatePanel = (flag) => {
     <b:base-menu>
         <DropdownMenu class={classNameObj}>
             <div class="k-datepicker-shortcuts" v-if={shortcuts && shortcuts.length}>
-                <div v-for={shortcuts}
-                    class="k-datepicker-shortcut"
-                    ev-click={linkEvent($value, this.setByShortcut)}
-                >
-                    {isFunction($value.label) ? $value.label() : $value.label}
-                </div>
+                {shortcuts.map($value => {
+                    const label = isFunction($value.label) ? $value.label() : $value.label;
+                    return <div class="k-datepicker-shortcut c-ellipsis"
+                        title={label}
+                        ev-click={linkEvent($value, this.setByShortcut)}
+                    >{label}</div>
+                })}
             </div>
             <div class="k-datepicker-wrapper">
                 <div class="k-datepicker-calendars">

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; }
-// }
-```