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

package/components/card/demos/basic.md

@@ -11,12 +11,12 @@ import {Card} from 'kpc';
 
 <div>
     <Card title="用户信息">
-        <div>11111</div>
-        <div>11111</div>
+        <div>卡片内容</div>
+        <div>卡片内容</div>
     </Card>
     <Card title="用户信息" type="border">
-        <div>11111</div>
-        <div>11111</div>
+        <div>卡片内容</div>
+        <div>卡片内容</div>
     </Card>
 </div>
 ```

package/components/card/demos/extra.md

@@ -6,22 +6,28 @@ order: 2
 使用`extra`扩展点，可以在头部右侧追加内容
 
 ```vdt
-import {Card} from 'kpc';
+import {Card, Tabs, Tab} from 'kpc';
 
 <div>
     <Card title="用户信息">
         <b:extra>
-            数据继承
+            <Tabs value="1" size="small">
+                <Tab value="1">数据集成</Tab>
+                <Tab value="2">数据采集</Tab>
+            </Tabs>
         </b:extra>
-        <div>11111</div>
-        <div>11111</div>
+        <div>卡片内容</div>
+        <div>卡片内容</div>
     </Card>
     <Card title="用户信息" type="border">
         <b:extra>
-            数据采集
+            <Tabs value="1" size="small">
+                <Tab value="1">数据集成</Tab>
+                <Tab value="2">数据采集</Tab>
+            </Tabs>
         </b:extra>
-        <div>11111</div>
-        <div>11111</div>
+        <div>卡片内容</div>
+        <div>卡片内容</div>
     </Card>
 </div>
 ```

package/components/card/demos/noHeader.md

@@ -10,12 +10,12 @@ import {Card} from 'kpc';
 
 <div>
     <Card>
-        <div>11111</div>
-        <div>11111</div>
+        <div>卡片内容</div>
+        <div>卡片内容</div>
     </Card>
     <Card type="border">
-        <div>11111</div>
-        <div>11111</div>
+        <div>卡片内容</div>
+        <div>卡片内容</div>
     </Card>
 </div>
 ```

package/components/card/index.md

@@ -11,15 +11,15 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| title | 卡片标题 | `String` | `VNode` | `undefined` | 
+| title | 卡片标题 | `string` | `VNode` | `undefined` | 
 | type | 卡片类型 | `"shadow"` | `"border"` | `"none"` | `"shadow"` |
 
 ## CardColumn
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| width | 列宽，必须带单位 | `String` | `undefined` |
-| center | 该列内容是否居中 | `Boolean` | `false` |
+| width | 列宽，必须带单位 | `string` | `undefined` |
+| center | 该列内容是否居中 | `boolean` | `false` |
 
 # 扩展点
 

package/components/card/styles.ts

@@ -6,13 +6,13 @@ import '../../styles/global';
 const defaults = {
     border: '1px solid #e5e5e5',
     padding: '16px',
-    boxShadow: '0 0 20px 0 rgba(0, 0, 0, .06)',
+    boxShadow: '0 0 8px 0 rgba(0, 0, 0, .05)',
     headerHeight: '48px',
     headerFontSize: '14px',
     bgColor: '#fff',
 };
 
-let card: any;
+let card: typeof defaults;
 setDefault(() => {
     card = deepDefaults(theme, {card: defaults}).card;
 });

package/components/carousel/index.md

@@ -11,14 +11,14 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前展示的内容块对应的的值 | `String` | `"$0"` |
-| autoplay | 是否自动切换，如果指定数值，则表示切换的时间间隔（ms），为`0`则不自动切换 | `Boolean` | `Number` | `false` |
+| value | 当前展示的内容块对应的的值 | `string` | `"$0"` |
+| autoplay | 是否自动切换，如果指定数值，则表示切换的时间间隔（ms），为`0`则不自动切换 | `boolean` | `number` | `false` |
 | arrow | 左右快速切换箭头展示的方式，`hover`：鼠标移入展示；`always`：一直展示；`never`：不展示 | `"hover"` | `"always"` | `"never"` | `"hover"` |
 | effect | 指定切换动画 | `"slide"` | `"fade"` | `"slide"` |
-| clonedAmount | 指定前后克隆的内容块数量 | `Number` | `1` |
+| clonedAmount | 指定前后克隆的内容块数量 | `number` | `1` |
 
 ## CarouselItem
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 定义内容块选中后的值 | `String` | `"${index}"` |
+| value | 定义内容块选中后的值 | `string` | `"${index}"` |

package/components/carousel/styles.ts

@@ -4,7 +4,7 @@ import {deepDefaults} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
-    transition: `.5s ease`,
+    get transition() { return theme.transition.large },
     height: `300px`,
 
     indicator: {
@@ -34,7 +34,7 @@ const defaults = {
     }
 };
 
-let carousel: any;
+let carousel: typeof defaults;
 setDefault(() => {
     carousel = deepDefaults(theme, {carousel: defaults}).carousel;
 });

package/components/carousel/useSlide.ts

@@ -70,9 +70,10 @@ export function useSlide(
             if (oldIndex === length - 1 && newIndex === 0) {
                 // the current item is the last one and the next item is the first one,
                 // we set translate to the first cloned item immediately without transition
-                await setTranslate(itemsWithCloned[0], false);
+                await setTranslate(itemsWithCloned[(itemsWithCloned.length - length) / 2 - 1], false);
             } else if (oldIndex === 0 && newIndex === length - 1) {
-                await setTranslate(itemsWithCloned[itemsWithCloned.length - 1], false);
+                const lengthWithCloned = itemsWithCloned.length;
+                await setTranslate(itemsWithCloned[lengthWithCloned - (lengthWithCloned - length) / 2], false);
             }
         }
 

package/components/cascader/demos/loadData.md

@@ -4,7 +4,7 @@ order: 7
 ---
 
 如果数据项中的`children`属性为空数组`[]`，则代表该项子数据为动态加载的，此时可以指定`loadData`
-属性来定义动态加载的逻辑，组件会将当前展开项的数据当做参数`item`传入，你只需要更新`item`的`children`
+属性来定义动态加载的逻辑，组件会将当前展开项的数据当做参数`data`传入，你只需要更新`data`的`children`
 属性即可，该函数的返回值为`Promise`对象
 
 组件默认遇到`children`为`[]`空数组的情况就会去进行异步加载，你可以通过`loaded`属性设为`true`来

package/components/cascader/index.md

@@ -9,26 +9,55 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| data | 组件要展示的数据 | `Array` | `undefined` |
-| value | 组件当前的值，可使用`v-model`双向绑定 | `*` | `""` |
-| changeOnSelect | 是否选中父级即改变`value`值  | `Boolean` | `false` |
-| trigger | 子菜单触发方式，默认点击触发 | `"click"` | `"hover"` | `"click"` |
-| format | 自定义结果显示，组件会将当前选择的所有数据项以数组的格式作为参数传入 | `Function` | `(values) => values.map(value => value.label).join(' / ')` |
-| keywords | 如果支持筛选，当前关键词 | `String` | `undefined` |
-| filterable | 是否可搜索，默认根据`label`进行搜索 | `Boolean` | `false` |
-| filter | 如果可搜索，你可以传入`filter`改变搜索逻辑，组件会将搜索关键词和数据项作为参数传入 | `Function` | `(keywords, props) => props.label.indexOf(keywords) > -1` |
-| loadData | 如果`data`中的`children`属性值为空数组`[]`，则可以使用该属性定义动态加载逻辑，组件会将当前选中的数据项作为参数传入 | `Function` | `(item) => {}` |
-| disabled | 是否禁用 | `Boolean` | `false` |
-| clearable | 是否可清空 | `Boolean` | `false` |
+| value | 当前选择的元素，可用`v-model`双向绑定 | `any` | `""` |
+| multiple | 是否支持多选 | `boolean` | `false` |
+| filterable | 是否支持筛选 | `boolean` | `false` |
+| loading | 数据加载状态 | `boolean` | `false` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| name | 表单元素的`name` | `string` | `undefined` |
 | size | 尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
-| fluid | 是否宽度100% | `Boolean` | `false` |
-| width | 指定宽度 | `Number` | `undefined` | 
-| placeholder | 占位文案 | `String` | `"请选择"` |
-| loading | 数据加载状态 | `Boolean` | `false` |
+| 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` | 
+| data | 组件要展示的数据 | `CascaderData<V>[]` | `undefined` |
+| trigger | 子菜单触发方式，默认点击触发 | `"click"` &#124; `"hover"` | `"click"` |
+| changeOnSelect | 是否选中父级即改变`value`值  | `boolean` | `false` |
+| format | 自定义结果显示，组件会将当前选择的所有数据项以数组的格式作为参数传入 | `Function` | `(values: string[]) => values.map(value => value.label).join(' / ')` |
+| loadData | 如果`data`中的`children`属性值为空数组`[]`，则可以使用该属性定义动态加载逻辑，组件会将当前选中的数据项作为参数传入 | `(data: CascaderData<V>) => any` | `undefined` |
+| filter | 如果可搜索，你可以传入`filter`改变搜索逻辑，组件会将搜索关键词和数据项作为参数传入 | `(keywords: string, data: CascaderData<V>) => boolean` | `(keywords: string, data: CascaderData<V>) => data.label.includes(keywords)` |
+
+```ts
+export type CascaderData<V> = {
+    value: V 
+    label: string
+    disabled?: boolean
+    loaded?: boolean
+    children?: CascaderData<V>[]
+}
+
+export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
+```
 
 # 扩展点
 
 | 名称 | 说明 | 参数 |
 | --- | --- | --- |
-| format | 扩展选择后展示的内容，等同于`format`属性，优先级比`format`属性高 | `values`: `Array` 当前所有已选值 |
+| value | 自定义选择结果的展示 | `([value: any, label: Children]) => Children` |
+| values | 自定义多选的选择结果的展示 | `([values: any[], labels: Children[]]) => Children` |
+| prefix | 自定义输入框前面展示的内容 | - |
+| suffix | 自定义输入框后面展示的内容 | - |
 
+```ts
+import {Children} from 'intact';
+```
+
+# 事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| show | 菜单弹出时触发 | - |
+| hide | 菜单隐藏时触发 | - |

package/components/cascader/index.spec.ts

@@ -5,11 +5,12 @@ import LoadDataDemo from '~/components/cascader/demos/loadData';
 import FilterDemo from '~/components/cascader/demos/filterable';
 import {mount, unmount, dispatchEvent, getElement, getElements, wait} from '../../test/utils';
 import {Cascader} from './';
+import {Component} from 'intact';
 
 describe('Cascader', () => {
     afterEach(async () => {
         unmount();
-        await wait(400);
+        await wait(500);
     });
 
     it('basic test', async function() {
@@ -146,4 +147,62 @@ describe('Cascader', () => {
         expect(dropdown.innerHTML).to.matchSnapshot();
         expect(dropdown.innerText).to.eql('无数据');
     });
+
+    it('duplicated sub data', async () => {
+        class Demo extends Component {
+            static template = `const {Cascader} = this; <Cascader data={this.get('data')} v-model="value" />`;
+            static defaults() {
+                return {
+                    value: ['beijing', 'haidian'],
+                    data: [
+                        {
+                            value: 'beijing',
+                            label: '北京',
+                            children: [
+                                {
+                                    value: 'haidian',
+                                    label: '海淀区'
+                                },
+                            ]
+                        },
+                        {
+                            value: 'hunan',
+                            label: '湖南',
+                            children: [
+                                {
+                                    value: 'haidian',
+                                    label: '海淀区'
+                                },
+                            ]
+                        },
+                    ]
+                }
+            }
+            private Cascader = Cascader;
+        }
+
+        const [instance, element] = mount(Demo);
+        dispatchEvent(element, 'click');
+        await wait();
+
+        const [dropdown1, dropdown2] = getElements('.k-cascader-menu');
+        const [item1, item2] = dropdown1.querySelectorAll(':scope > .k-dropdown-item');
+        expect(item1.classList.contains('k-selected')).to.be.true;
+        expect(item2.classList.contains('k-selected')).to.be.false;
+        const [item21] = dropdown2.querySelectorAll(':scope > .k-dropdown-item');
+        expect(item21.classList.contains('k-selected')).to.be.true;
+
+        dispatchEvent(item2, 'click');
+        await wait();
+
+        const dropdown3 = getElement('.k-cascader-menu')!;
+        const [item31] = dropdown3.querySelectorAll(':scope > .k-dropdown-item');
+        expect(item31.classList.contains('k-selected')).to.be.false;
+
+        dispatchEvent(item31, 'click');
+        await wait();
+        
+        expect(instance.get('value')).to.eql(['hunan', 'haidian']);
+        expect(element.textContent).to.eql('湖南 / 海淀区');
+    });
 });

package/components/cascader/index.vdt

@@ -11,7 +11,7 @@ const classNameObj = {
 };
 
 const {values, isShowed, isSelected, onSelect, toggleShowedValue} = this.value;
-const Options = (data, level, loaded) => {
+const Options = (data, level, loaded, parentSelected) => {
     if (!data.length) {
         if (!loaded) {
             return <Icon class="ion-load-c k-cascader-loading" rotate />
@@ -23,7 +23,7 @@ const Options = (data, level, loaded) => {
     return data.map((item, index) => {
         const value = item.value;
         const showed = isShowed(value, level);
-        const selected = isSelected(value, level);
+        const selected = parentSelected && isSelected(value, level);
         const children = item.children;
 
         const Item = () => {
@@ -58,7 +58,7 @@ const Options = (data, level, loaded) => {
                 >
                     {Item()}
                     <DropdownMenu class={classNameObj}>
-                        {showed ? Options(children, level + 1, item.loaded) : null}
+                        {showed ? Options(children, level + 1, item.loaded, selected) : null}
                     </DropdownMenu>
                 </Dropdown> :
                 Item()
@@ -74,7 +74,7 @@ const {filter, keywords: {value: keywords}, selectByFilter} = this.filterable;
             class={classNameObj}
             key="common"
         >
-            {Options(data, 0, true)}
+            {Options(data, 0, true, true)}
         </DropdownMenu>
         <DropdownMenu v-else
             key="filter"

package/components/cascader/styles.ts

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

package/components/cascader/useLabel.ts

@@ -14,23 +14,23 @@ export function useLabel() {
         const {format} = instance.get();
         const labels: string[] = [];
         const length = value.length;
-        const loop = (data: CascaderStringData[]) => {
+        const loop = (data: CascaderStringData[], level: number) => {
+            if (level === length) return;
+
             for (let i = 0; i < data.length; i++) {
                 const item = data[i];
-                if (value.includes(item.value)) {
+                if (item.value === value[level]) {
                     labels.push(item.label); 
-                    if (labels.length === length) {
-                        return;
+
+                    const children = item.children;
+                    if (children) {
+                        loop(children, level + 1);
                     }
                 }
-                const children = item.children;
-                if (children) {
-                    loop(children);
-                }
             }
         };
 
-        loop(data);
+        loop(data, 0);
 
         return labels.length ? format!(labels) : null;
     }

package/components/checkbox/demos/basic.md

@@ -6,7 +6,7 @@ order: 0
 `Checkbox`的基本用法，及禁用状态。通过`v-model`进行数据双向绑定。由于`trueValue`的默认值为`true`，所以可以直接传入`value=true`
 来指定选中状态。
 
-> 选中状态的判定条件是`value === trueValue || value.indexOf(trueValue)`，对于值为对象的情况要注意。
+> 选中状态的判定条件是`value === trueValue || value.includes(trueValue)`，对于值为对象的情况要注意是否是同一引用。
 
 ```vdt
 import {Checkbox} from 'kpc';

package/components/checkbox/demos/indeterminate.md

@@ -8,12 +8,10 @@ order: 2
 ```vdt
 import {Checkbox} from 'kpc';
 
-const length = this.getLength();
-
 <div>
-    <Checkbox indeterminate={length > 0 && length < 3}
-        value={length === 3}
-        ev-$change:value={this._toggleSelectAll}
+    <Checkbox indeterminate={this.getLength() > 0 && this.getLength() < 3}
+        value={this.getLength() === 3}
+        ev-$change:value={this.toggleSelectAll}
     >全选</Checkbox>
     <hr />
     <Checkbox v-for={this.get('options')}
@@ -50,7 +48,7 @@ export default class extends Component<Props> {
     };
 
     @bind
-    _toggleSelectAll(checked?: boolean) {
+    toggleSelectAll(checked?: boolean) {
         if (checked) {
             this.set('languages', ['Javascript', 'C++', 'PHP']);
         } else {
@@ -63,17 +61,3 @@ export default class extends Component<Props> {
     }
 }
 ```
-
-```vue-script
-computed: {
-    length(): number {
-        return this.getLength();
-    }
-},
-```
-
-```angular-methods
-get length() {
-    return this.getLength();
-}
-```

package/components/checkbox/demos/value.md

@@ -8,7 +8,7 @@ order: 1
 
 > 当指定值为对象时，不要在模板中直接定义对象字面量（如：trueValue={{a: 1}}），
 > 因为在模板中创建的对象每次执行模板都会生成一份新数据，使全等判断(`===`)失效。
-> 此时应该在js中定义该对象，然后模板中引用它。
+> 此时应该在组件中定义该对象，然后模板中引用它。
 
 ```vdt
 import {Checkbox} from 'kpc';

package/components/checkbox/index.md

@@ -9,18 +9,18 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| disabled | 是否禁用 | `Boolean` | `false` |
-| name | `input`的`name`属性，用于指定Checkbox组 | `String` | `undefind` |
-| value | 复选框组的取值，用于`v-model`进行双向绑定 | `*` | `false` |
-| trueValue | 当前复选框选中的值 | `*` | `true` |
-| falseValue | 当前复选框取消选中的值 | `*` | `false` |
-| indeterminate | 是否半选中状态 | `Boolean` | `false` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| value | 复选框组的取值，用于`v-model`进行双向绑定 | `any` | `false` |
+| trueValue | 当前复选框选中的值 | `any` | `true` |
+| falseValue | 当前复选框取消选中的值 | `any` | `false` |
+| indeterminate | 是否半选中状态 | `boolean` | `false` |
+| name | 原生`name`属性 | `string` | `undefined` |
+| required | 原生`required`属性 | `boolean` | `undefined` |
+| form | 原生`form`属性 | `string` | `undefined` |
+| autofocus | 原生`autofocus`属性 | `boolean` | `undefined` |
 
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| change | 当点击组件导致值变化时触发，与`$change:value`事件有所不同的是，该事件只会触发一次，而且一定是用户点击行为触发的 | `value` |
-| click | 原生`click`事件 | `Event` |
-| mouseenter | 原生`mouseenter`事件 | `Event` |
-| mouseleave | 原生`mouseleave`事件 | `Event` |
+| change | 当点击组件导致值变化时触发 | `(value: any, e: MouseEvent) => void` |

package/components/checkbox/index.vdt

@@ -1,5 +1,6 @@
 import {getRestProps} from '../utils';
 import makeStyles from './styles';
+import {Wave} from '../wave';
 
 const {
     className, disabled, falseValue, 
@@ -44,18 +45,20 @@ const events = [
     ev-keypress={this.onKeypress}
     {...events}
 >
-    <span class="k-checkbox-wrapper">
-        <input
-            type="checkbox" 
-            checked={isChecked}
-            value={trueValue}
-            v-model-true={trueValue}
-            v-model-false={falseValue}
-            disabled={disabled}
-            tabindex="-1"
-            ref={this.inputRef}
-            {...getRestProps(this, rest)}
-        />
-    </span>
+    <Wave disabled={disabled} inset="-2px">
+        <span class="k-checkbox-wrapper">
+            <input
+                type="checkbox" 
+                checked={isChecked}
+                value={trueValue}
+                v-model-true={trueValue}
+                v-model-false={falseValue}
+                disabled={disabled}
+                tabindex="-1"
+                ref={this.inputRef}
+                {...getRestProps(this, rest)}
+            />
+        </span>
+    </Wave>
     <span class="k-checkbox-text" v-if={children}>{children}</span>
 </label>

package/components/checkbox/styles.ts

@@ -1,5 +1,5 @@
 import {css, cx} from '@emotion/css';
-import {theme, ThemeValue, setDefault} from '../../styles/theme';
+import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette, getLeft}  from '../../styles/utils';
 import '../../styles/global';
 
@@ -7,7 +7,7 @@ const defaults = {
     width: '14px',
     get borderColor() { return theme.color.darkBorder },
     get borderRadius() { return theme.borderRadius },
-    get transition() { return theme.transition },
+    get transition() { return theme.transition.small },
     bgColor: '#fff',
     
     // text
@@ -43,7 +43,7 @@ const defaults = {
     }
 };
 
-let checkbox: any;
+let checkbox: typeof defaults;
 setDefault(() => {
     checkbox = deepDefaults(theme, {checkbox: defaults}).checkbox;
 });
@@ -55,10 +55,8 @@ export default function makeStyles() {
         cursor: pointer;
         vertical-align: middle;
         .k-checkbox-wrapper {
-            display: inline-block;
             width: ${checkbox.width};
             height: ${checkbox.width}; 
-            vertical-align: middle;
             border: 1px solid ${checkbox.borderColor}; 
             border-radius: ${checkbox.borderRadius};
             position: relative;
@@ -94,9 +92,7 @@ export default function makeStyles() {
             margin: 0;
         }
         .k-checkbox-text {
-            vertical-align: middle;
             margin-left: ${checkbox.text.gap};
-            display: inline-block;
             flex: 0 1 auto;
         }
 

package/components/code/demos/basic.md

@@ -5,11 +5,11 @@ order: 0
 
 > `Code`由于基于`Monaco Editor`这个庞大的库，所以没有放入索引文件`index.js`，你只能通过如下方式引入
 >
-> `import {Code} from 'kpc/components/code';`
+> `import {Code} from '@king-design/react/components/code';`
 >
-> 而不能直接通过`kpc`引入
+> 而不能直接引入
 >
-> `import {Code} from 'kpc';`
+> `import {Code} from '@king-design/react';`
 
 组件可以通过`v-model`双向绑定编辑的代码，通过`height`指定组件的高度（需要带单位），默认`100%`；通过
 `language`可以指定编程语言，默认为`javasript`

package/components/code/index.md

@@ -5,21 +5,19 @@ order: 99
 sidebar: doc
 ---
 
-> 由于Monaco-Editor太大，该组件不会打包进入单文件，所以你不能通过CDN引入组件的方式使用该组件，而必须通过webpack
-> 进行构建
+> 由于Monaco-Editor太大，该组件不会默认加入`index.js`
 
 # 属性
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 组件的值，可通过`v-model`双向绑定 | `String` | `''` |
-| language | 指定编程语言 | `String` | `javasript` |
-| width | 指定宽度，需要带单位 | `String` | `100%` |
-| height | 指定高度，需要带单位 | `String` | `100%` |
+| value | 组件的值，可通过`v-model`双向绑定 | `string` | `""` |
+| language | 指定编程语言 | `string` | `javasript` |
 | theme | 指定主题 | `"vs"` | `"vs-dark"` | `"hc-black"` | `"vs"` |
-| readonly | 是否只读 | `Boolean` | `false` |
-| loading | 是否正在加载 | `Boolean` | `false` |
-| options | 其它可选的配置，会传给`monaco.editor.create()`方法，可选值参考[options](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html) | `Object` | `{}` |
+| readOnly | 是否只读 | `boolean` | `false` |
+| width | 指定宽度，需要带单位 | `string` | `100%` |
+| height | 指定高度，需要带单位 | `string` | `100%` |
+| options | 其它可选的配置，会传给`monaco.editor.create()`方法，可选值参考[options](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html) | [`editor.IStandaloneEditorConstructionOptions`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html) | `{}` |
 
 > 例如：通过`options`可以隐藏右侧代码的缩影(minimap): `options = {minimap: {enabled: false}}`
 
@@ -27,4 +25,4 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| ready | 组件加载并实例化完成触发 | `Code` |
+| ready | 组件加载并实例化完成触发 | (editor: [editor.IStandaloneCodeEditor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneCodeEditor.html), Editor: typeof [editor](https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html)) => void |