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

package/components/collapse/index.md

@@ -11,18 +11,18 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前展开的`CollapseItem`取值 | `Array` | `undefined` |
-| accordion | 是否展示手风琴风格 | `Boolean` | `false` |
+| value | 当前展开的`CollapseItem`取值 | `string[]` | `undefined` |
+| accordion | 是否展示手风琴风格 | `boolean` | `false` |
 | arrow | 指定箭头位置 | `"right"` | `"left"` | `"right"` |
-| noBorder | 是否展示无边框的简洁样式 | `Boolean` | `false` |
+| noBorder | 是否展示无边框的简洁样式 | `boolean` | `false` |
 
 ## CollapseItem
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前`CollapseItem`的取值，默认会使用`$` + 索引的组合 | `String` | `$${index}` |
-| title | 标题内容 | `String` | `vNode` | `undefined` |
-| disabled | 是否禁用 | `Boolean` | `false` |
+| value | 当前`CollapseItem`的取值，默认会使用`$` + 索引的组合 | `string` | `$${index}` |
+| title | 标题内容 | `string` | `VNode` | `undefined` |
+| disabled | 是否禁用 | `boolean` | `false` |
 
 # 扩展点
 
@@ -38,5 +38,5 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| show | 展开时触发 | `CollapseItem`实例 |
-| hide | 收起时触发 | `CollapseItem`实例 |
+| show | 展开时触发 | `(collapseItem: CollapseItem) => void` |
+| hide | 收起时触发 | `(collapseItem: CollapseItem) => void` |

package/components/collapse/item.vdt

@@ -21,7 +21,7 @@ const classNameObj = {
 <div class={classNameObj} {...getRestProps(this)}>
     <div class={kls('title')} ev-click={this.toggle}>
         <b:title>{title}</b:title>
-        <Icon class={{[kls('arrow')]: true, 'ion-ios-arrow-right': true}}></Icon>
+        <Icon class={{[kls('arrow')]: true, 'ion-ios-arrow-right': true}} hoverable={!disabled}></Icon>
     </div>
     <Transition
         show={isActive}

package/components/collapse/styles.ts

@@ -6,6 +6,7 @@ import '../../styles/global';
 export const kls = (className: string) => `k-collapse-${className}`;
 
 const defaults = {
+    get transition() { return theme.transition.large },
     fontSize: '12px',
     titleMarginRight: '8px',
     borderPadding: '0 24px',
@@ -18,7 +19,7 @@ const defaults = {
     }
 };
 
-let collapse: any;
+let collapse: typeof defaults;
 setDefault(() => {
     collapse = deepDefaults(theme, {collapse: defaults}).collapse;
 });
@@ -56,13 +57,13 @@ export function makeItemStyles() {
             font-weight: bold;
             height: ${collapseItem.titleHeight};
             line-height: ${collapseItem.titleHeight};
-            transition: color ${theme.transition};
+            transition: color ${collapse.transition};
             
         }
         
         .${kls('arrow')} {
             float: right;
-            transition: transform ${theme.transition};
+            transition: transform ${collapse.transition};
             line-height: ${collapseItem.titleHeight};
             height: ${collapseItem.titleHeight};
             transform-origin: left center 0;

package/components/colorpicker/index.md

@@ -9,7 +9,7 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前颜色值 | `String` | `undefined` |
-| presets | 预选颜色 | `Array<String>` | `['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']` |
+| value | 当前颜色值 | `string` | `undefined` |
+| presets | 预选颜色 | `string[]` | `['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']` |
 | size | 组件尺寸 | `"large"` &#124; `"default"` &#124; `"small"` &#124; `"mini"` | `"default"` |
-| disabled | 是否禁用 | `Boolean` | `false` |
+| disabled | 是否禁用 | `boolean` | `false` |

package/components/colorpicker/index.spec.ts

@@ -20,7 +20,7 @@ describe('Colorpicker', () => {
 
     afterEach(async function() {
         unmount();
-        await wait(400);
+        await wait(500);
     });
 
     it('should select color by saturation', async function() {

package/components/colorpicker/index.ts

@@ -1,12 +1,14 @@
 import {Component, TypeDefs} from 'intact';
 import template from './index.vdt';
 import {sizes, Sizes} from '../../styles/utils';
+import {Container} from '../portal';
 
 export interface ColorpickerProps {
     value: string
     presets?: string[]
     size?: Sizes
     disabled?: boolean
+    container?: Container
 }
 
 export interface ColorpickerEvents { }
@@ -19,6 +21,7 @@ const typeDefs: Required<TypeDefs<ColorpickerProps>> = {
     presets: Array,
     size: sizes,
     disabled: Boolean,
+    container: [Function, String],
 };
 
 const defaults = (): Partial<ColorpickerProps> => ({

package/components/colorpicker/index.vdt

@@ -4,7 +4,10 @@ import {makeStyles} from './styles';
 import {ColorpickerPanel} from './panel';
 import {Dropdown, DropdownMenu} from '../dropdown';
 
-const {className, transition, presets, value, size, disabled} = this.get();
+const {
+    className, transition, presets,
+    value, size, disabled, container
+} = this.get();
 
 const classNameObj = {
     'k-colorpicker': true,
@@ -19,6 +22,7 @@ const classNameObj = {
         position={{my: 'left top+8', at: 'left bottom', collision: 'flip'}}
         trigger="click"
         disabled={disabled}
+        container={container}
     >
         <div class="k-colorpicker-color">
             <div class="k-colorpicker-inner" style={{backgroundColor: value}}></div>

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