@king-design/intact 3.1.1-beta.0 → 3.1.1-beta.2

package/components/collapse/demos/basic.md

@@ -16,6 +16,25 @@ import {Collapse, CollapseItem} from 'kpc';
         <p>语言是合作的基础。在团队中工作，没有共同的语言，一群人不能共同有效地合作。同理，因为每个人都会有不同的心智模式去达成各自的目的，如果没有共同的设计语言，对界面元素的共同理解，那么我们很难通过协作输出协调一致并具备高可用性的产品。</p>
         <p>拥有通用语言意味着我们有相同的方法来命名界面元素和定义设计模式，或者在设计文件和前端框架中使用相同的名称。通用设计语言让团队成员达成了相互理解，基于共同的理解，参与产品创建的每个人都知道这个元素是什么: 它的名称和目的, 为什么这样设计, 以及如何及何时使用它。</p>
         <p>当设计语言是通用知识时，它就成为一个强大的设计和协作工具，产品创建过程中便可停止专注于界面样式本身，而更多地关注用户。</p>
+        <Collapse v-model="innerValue" style="margin-bottom: 16px;">
+            <CollapseItem title="设计语言" ev-show={this.onShow}>
+                <p>语言是合作的基础。在团队中工作，没有共同的语言，一群人不能共同有效地合作。同理，因为每个人都会有不同的心智模式去达成各自的目的，如果没有共同的设计语言，对界面元素的共同理解，那么我们很难通过协作输出协调一致并具备高可用性的产品。</p>
+                <p>拥有通用语言意味着我们有相同的方法来命名界面元素和定义设计模式，或者在设计文件和前端框架中使用相同的名称。通用设计语言让团队成员达成了相互理解，基于共同的理解，参与产品创建的每个人都知道这个元素是什么: 它的名称和目的, 为什么这样设计, 以及如何及何时使用它。</p>
+                <p>当设计语言是通用知识时，它就成为一个强大的设计和协作工具，产品创建过程中便可停止专注于界面样式本身，而更多地关注用户。</p>
+            </CollapseItem>
+            <CollapseItem title="KDL的价值">
+                <ol>
+                    <li>节省设计和构建模块的时间；</li>
+                    <li>网站变更时节省时间，复用的模式更新时将在任何使用的地方自动更新，重复工作浪费的时间越少，就有 更多时间做有价值的事；</li>
+                    <li>更快的发布产品，现成的模式库缩短了新功能设计研发上线时间；</li>
+                    <li>品牌统一性、视觉一致性、提升团队协作效率，不用每次重新创造。</li>
+                </ol>
+            </CollapseItem>
+            <CollapseItem title="设计原则" disabled>
+                原则顺序必须按照给定的顺序执行。也就是说，美不可以建立在清晰和效率之上，效率也不可以妥协于一致性之下，清晰永远都是第一优先级。在制定任何设计决策时都应按照设计原则，考虑优先级。
+                设计由设计者的选择而决定，设计原则为设计者提供了选择依据，从众多存在矛盾或价值冲突的设计决策中找到平衡。
+            </CollapseItem>
+        </Collapse>
     </CollapseItem>
     <CollapseItem title="KDL的价值">
         <ol>
@@ -35,13 +54,14 @@ import {Collapse, CollapseItem} from 'kpc';
 ```ts
 interface Props {
     value?: string[]
+    innerValue?: string[]
 }
 
 export default class extends Component<Props> {
     static template = template;
 
     static defaults() {
-        return {value: ['$0']};
+        return {value: ['$0'], innerValue: []};
     }
 
     onShow() {

package/components/collapse/item.vdt

@@ -22,7 +22,11 @@ const classNameObj = {
 <div class={classNameObj} {...getRestProps(this)}>
     <div class={`${k}-collapse-title`} ev-click={this.toggle}>
         <b:title>{title}</b:title>
-        <Icon class={{[`${k}-collapse-arrow`]: true, [`${k}-icon-right`]: true}} hoverable={!disabled}></Icon>
+        <Icon
+            class={{[`${k}-collapse-arrow`]: true, [`${k}-icon-right`]: true}}
+            hoverable
+            disabled={disabled}
+        ></Icon>
     </div>
     <Transition
         show={isActive}

package/components/collapse/styles.ts

@@ -51,24 +51,22 @@ export function makeItemStyles(k: string) {
             border-bottom-color: transparent;
         }
 
-        .${k}-collapse-title {
+        > .${k}-collapse-title {
             cursor: pointer;
             font-weight: bold;
             height: ${collapseItem.titleHeight};
             line-height: ${collapseItem.titleHeight};
             transition: color ${collapse.transition};
-            
+            .${k}-collapse-arrow {
+                float: right;
+                transition: transform ${collapse.transition};
+                line-height: ${collapseItem.titleHeight};
+                height: ${collapseItem.titleHeight};
+            }
         }
         
-        .${k}-collapse-arrow {
-            float: right;
-            transition: transform ${collapse.transition};
-            line-height: ${collapseItem.titleHeight};
-            height: ${collapseItem.titleHeight};
-        }
-
         &:not(.${k}-disabled) {
-            .${k}-collapse-title {
+            > .${k}-collapse-title {
                 &:hover {
                     color: ${theme.color.primary};
                 }
@@ -76,14 +74,14 @@ export function makeItemStyles(k: string) {
         }
 
         &.${k}-active {
-            .${k}-collapse-arrow  {
+            > .${k}-collapse-title .${k}-collapse-arrow  {
                 transform: rotate(90deg);
             }
         }
 
         &.${k}-disabled {
             color: ${theme.color.disabledBorder};
-            .${k}-collapse-title  {
+            > .${k}-collapse-title  {
                 cursor: not-allowed;
             }
         }

package/components/dialog/base.vdt

@@ -37,38 +37,41 @@ const dialog = (
             style={{width: typeof width === 'number' ? `${width}px` : width}}
             ev-mousedown={this.mouseOutsidable.onMouseDown}
         >
-            <b:content>
-                <div class={`${k}-dialog-header`}
-                    ev-mousedown={this.drag.start}
-                >
-                    <b:header>
-                        <span class={`${k}-dialog-title`}>{title}</span>
-                    </b:header>
-                    <Button type="none" icon title={_$("关闭")} class={`${k}-dialog-close`}
-                        ev-click={this.terminate}
-                        v-if={!hideClose && !$props.hideClose}
-                        ev-mousedown={stopPropagation}
+            {/* Drawer will inherit the content block, it will lead to conflict with custom content block. So wrap a private _content block. @issue: #922 */}
+            <b:_content>
+                <b:content>
+                    <div class={`${k}-dialog-header`}
+                        ev-mousedown={this.drag.start}
                     >
-                        <Icon class={`${k}-icon-close`} />
-                    </Button>
-                </div>
-                <div class={`${k}-dialog-body`}><b:body>{children}</b:body></div>
-                <b:footer-wrapper>
-                    <div class={`${k}-dialog-footer`}>
-                        <b:footer>
-                            <Button class={`${k}-dialog-cancel`} 
-                                ev-click={this.cancel}
-                            >{cancelText}</Button>
-                            <Button class={`${k}-dialog-ok`} 
-                                type="primary"
-                                ev-click={this.ok} 
-                                loading={loading}
-                                disabled={disabledOk}
-                            >{okText}</Button>
-                        </b:footer>
+                        <b:header>
+                            <span class={`${k}-dialog-title`}>{title}</span>
+                        </b:header>
+                        <Button type="none" icon title={_$("关闭")} class={`${k}-dialog-close`}
+                            ev-click={this.terminate}
+                            v-if={!hideClose && !$props.hideClose}
+                            ev-mousedown={stopPropagation}
+                        >
+                            <Icon class={`${k}-icon-close`} />
+                        </Button>
                     </div>
-                </b:footer-wrapper>
-            </b:content>
+                    <div class={`${k}-dialog-body`}><b:body>{children}</b:body></div>
+                    <b:footer-wrapper>
+                        <div class={`${k}-dialog-footer`}>
+                            <b:footer>
+                                <Button class={`${k}-dialog-cancel`} 
+                                    ev-click={this.cancel}
+                                >{cancelText}</Button>
+                                <Button class={`${k}-dialog-ok`} 
+                                    type="primary"
+                                    ev-click={this.ok} 
+                                    loading={loading}
+                                    disabled={disabledOk}
+                                >{okText}</Button>
+                            </b:footer>
+                        </div>
+                    </b:footer-wrapper>
+                </b:content>
+            </b:_content>
         </div>
     </Transition>
 );

package/components/drawer/demos/basic.md

@@ -5,8 +5,6 @@ order: 0
 
 `Drawer`组件继承了`Dialog`组件的属性、扩展点、方法和事件（拖拽功能除外）。基本用法和`Dialog`相同。
 
-<!-- 继承了Dialog弹窗，通过`v-model`建立绑定，当该绑定的值为`true`时，展示抽屉组件。 -->
-
 ```vdt
 import {Drawer, Button, ButtonGroup, Select, Option} from 'kpc';
 

package/components/drawer/demos/content.md

@@ -0,0 +1,38 @@
+---
+title:  自定义整个内容
+order: 3
+---
+
+通过`content`扩展点可以定义整个抽屉内容
+
+```vdt
+import {Drawer, Button, ButtonGroup, Select, Option} from 'kpc';
+
+<div>
+    <Button ev-click={this.set.bind(this, 'show', true)}
+        type="primary"
+    >Show Drawer</Button>
+    <Drawer v-model="show" title="Drawer Title" placement="top" size="small">
+        <b:content>
+            <div style="padding: 16px; text-align: center;">
+                Hello King-Design!
+            </div>
+        </b:content>
+    </Drawer>
+</div>
+```
+
+```ts
+interface Props {
+    show?: boolean
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            show: false
+        }
+    }
+}
+```

package/components/drawer/demos/placement.md

@@ -9,9 +9,17 @@ order: 0.1
 import {Drawer, Button, ButtonGroup} from 'kpc';
 
 <div>
+    <ButtonGroup checkType="radio" v-model="size">
+        <Button value="large">large</Button>
+        <Button value="default">default</Button>
+        <Button value="small">small</Button>
+        <Button value="mini">mini</Button>
+    </ButtonGroup>
+    <br /><br />
     <ButtonGroup>
         <Button v-for={this.get('showList')}
             ev-click={this.showDrawer.bind(self, $value.key)}
+            class="placement-btn"
         >{$value.value}</Button>
     </ButtonGroup>
 
@@ -19,7 +27,7 @@ import {Drawer, Button, ButtonGroup} from 'kpc';
         title='Drawer Title' 
         ref='__demoTwo' 
         placement={this.get('showPosition')}
-        size='small'
+        size={this.get('size')}
     >
         Drawer Body
     </Drawer>
@@ -33,6 +41,7 @@ interface Props {
     show?: boolean
     showPosition: DrawerProps['placement'] 
     showList: ListItem[]
+    size: DrawerProps['size'] 
 }
 
 type ListItem = {
@@ -47,6 +56,7 @@ export default class extends Component<Props> {
         return {
             show: false,
             showPosition: 'right',
+            size: 'default',
             showList: [
                 {
                     key: 'top',

package/components/drawer/index.spec.ts

@@ -34,7 +34,7 @@ describe('Drawer', () => {
         this.timeout(0);
         const [instance, element] = mount(PlacementDemo);
 
-        const [top, bottom, left, right] = element.querySelectorAll<HTMLElement>('.k-btn');
+        const [top, bottom, left, right] = element.querySelectorAll<HTMLElement>('.placement-btn');
         const test = async (btn: HTMLElement, className: string) => {
             dispatchEvent(btn, 'click');
             await wait();

package/components/drawer/index.vdt

@@ -9,9 +9,9 @@ const classNameObj = {
 };
 
 <t:super class={classNameObj}>
-    <b:content>
+    <b:_content>
         <div class={`${k}-drawer-content`}>
             {$super()}
         </div>
-    </b:content>
+    </b:_content>
 </t:super>

package/components/drawer/styles.ts

@@ -20,10 +20,14 @@ setDefault(() => {
 });
 
 export function makeStyles(overlay: boolean, k: string) {
+    const borderRadius = theme.largeBorderRadius;
     return css`
-        position: fixed !important;
-        background: transparent !important;
-        box-shadow: none !important;
+        &.k-drawer {
+            position: fixed;
+            background: transparent;
+            box-shadow: none;
+            border-radius: 0;
+        }
 
         &.transition-enter-active,
         &.transition-leave-active,
@@ -48,56 +52,31 @@ export function makeStyles(overlay: boolean, k: string) {
             }
         }
         
-        ${placements.map((placement) => {
-            let positionValue: string = '';
-            let transformValue: string = '';
-            let borderRadius: string = '';
-            placements.forEach((p) => {
-                // Set top to `0 !important` when overlay is false and placement is right or left
-                // Because dialog without overlay don't have positional parent element
-                positionValue += p !== placement 
-                    ? ((placement === 'right' || placement === 'left') && !overlay && p === 'top')
-                        ? `${p}: 0;`
-                        : `${p}: auto;`
-                    : `${p}: 0;`;
-            });
+        ${makePlacementStyles(k, 'right', `right: 0; height: 100%;`, `translateX(100%)`, `${borderRadius} 0 0 ${borderRadius}`)}
+        ${makePlacementStyles(k, 'left', 'left: 0; height: 100%;', `translateX(-100%)`, `0 ${borderRadius} ${borderRadius} 0`)}
+        ${makePlacementStyles(k, 'top', 'left: 50%; top: 0; transform: translateX(-50%);', `translateY(-100%)`, `0 0 ${borderRadius} ${borderRadius}`)}
+        ${makePlacementStyles(k, 'bottom', 'left: 50%; bottom: 0; transform: translateX(-50%);', `translateY(100%)`, `0 ${borderRadius} ${borderRadius} 0`)}
+        &.${k}-top,
+        &.${k}-bottom {
+            width: 100%;
+        }
+    `;
+}
 
-            if (placement === 'left' || placement === 'right') {
-                positionValue += 'height: 100% !important;';
-                if (placement === 'left') {
-                    borderRadius = `0 ${theme.largeBorderRadius} ${theme.largeBorderRadius} 0`;
-                    transformValue = 'translateX(-100%)';
-                } else {
-                    borderRadius = `${theme.largeBorderRadius} 0 0 ${theme.largeBorderRadius}`;
-                    transformValue = 'translateX(100%)';
-                }
-            } else {
-                positionValue += 'width: 100% !important;';
-                if (placement === 'top') {
-                    borderRadius = `0 0 ${theme.largeBorderRadius} ${theme.largeBorderRadius}`;
-                    transformValue = 'translateY(-100%)';
-                } else {
-                    borderRadius = `${theme.largeBorderRadius} ${theme.largeBorderRadius} 0 0`;
-                    transformValue = 'translateY(100%)';
+function makePlacementStyles(k: string, placement: string, styles: string, transform: string, borderRadius: string) {
+    return css`
+        &.${k}-drawer.${k}-${placement} {
+            ${styles}
+            &.transition-enter-from,
+            &.transition-leave-to,
+            &.transition-appear-from {
+                .${k}-drawer-content {
+                    transform: ${transform};
                 }
             }
-
-            return css`
-                &.${k}-${placement} {
-                    ${positionValue}
-                    &.transition-enter-from,
-                    &.transition-leave-to,
-                    &.transition-appear-from {
-                        transform: none !important;
-                        .${k}-drawer-content {
-                            transform: ${transformValue};
-                        }
-                    }
-                    .${k}-drawer-content {
-                        border-radius: ${borderRadius};
-                    }
-                }
-            `
-        })}
-    `;
+            .${k}-drawer-content {
+                border-radius: ${borderRadius};
+            }
+        }
+    `
 }

package/components/editable/index.vdt

@@ -21,22 +21,23 @@ const classNameObj = {
 };
 
 <div {...getRestProps(this)} class={classNameObj}>
-    <Tooltip v-if={!disabled && !editing} content={tip}>
-        <Icon class={`${k}-icon-edit ${k}-editable-icon`}
-            ev-click={this.edit}
-            hoverable
-        />
-    </Tooltip>
     <div class="c-ellipsis">
         <template v-if={!editing}>{children}</template>
         <Input v-else
-            size="small"
+            size="mini"
             defaultValue={value} 
             ev-blur={this.onBlur}
             ev-keydown={this.onKeydown}
             ref={this.inputRef}
             frozenOnInput
             ev-$mounted={this.select}
+            autoWidth
         />
     </div>
+    <Tooltip v-if={!disabled && !editing} content={tip}>
+        <Icon class={`${k}-icon-edit ${k}-editable-icon`}
+            ev-click={this.edit}
+            hoverable
+        />
+    </Tooltip>
 </div>

package/components/editable/styles.ts

@@ -5,7 +5,6 @@ import '../../styles/global';
 
 const defaults = {
     iconGap: '0 0 0 8px',
-    lineHeight: '30px',
 
     // invalid
     invalid: {
@@ -22,13 +21,10 @@ export {editable};
 
 export function makeStyles(k: string) {
     return css`
-        display: inline-block;
-        line-height: ${editable.lineHeight};
+        display: inline-flex;
+        align-items: center;
         .${k}-editable-icon {
-            float: right;
-            cursor: pointer;
             margin: ${editable.iconGap};
-            line-height: unset;
         }
 
         // invalid

package/components/input/demos/autowidth.md

@@ -8,5 +8,9 @@ order: 5
 ```vdt
 import {Input} from 'kpc';
 
-<Input placeholder="auto width" autoWidth />
+<div>
+    <Input placeholder="auto width" autoWidth />
+    <br /><br />
+    <Input placeholder="auto width" defaultValue="default value" autoWidth />
+</div>
 ```

package/components/input/index.vdt

@@ -143,7 +143,7 @@ if (hasInputValue) {
                         <b:suffix />
                     </div>
                     <div class={`${k}-input-fake`} v-if={autoWidth}>
-                        <span ref={fakeRef}>{!hasValue ? placeholder : inputValue}</span>
+                        <span ref={fakeRef}>{!hasValue ? (hasInputValue || !defaultValue ? placeholder : defaultValue) : inputValue}</span>
                     </div>
                 </div>
             </Wave>

package/components/table/styles.ts

@@ -360,6 +360,14 @@ export function makeStyles(k: string) {
         > .${k}-pagination {
             margin: 16px 0;
         }
+
+        // fixHeader
+        &.${k}-fix-header {
+            min-height: 0;
+            .${k}-table-wrapper {
+                height: 100%;
+            }
+        }
     `;
 }
 

package/es/components/collapse/item.vdt.js

@@ -39,7 +39,8 @@ export default function ($props, $blocks, $__proto__) {
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['title'](_$no)), _$cc(Icon, {
     'className': _$cn((_$cn2 = {}, _$cn2[k + "-collapse-arrow"] = true, _$cn2[k + "-icon-right"] = true, _$cn2)),
-    'hoverable': !disabled
+    'hoverable': true,
+    'disabled': disabled
   })], 0, _$cn(k + "-collapse-title"), {
     'ev-click': this.toggle
   }), _$cc(Transition, _extends({

package/es/components/collapse/styles.js

@@ -32,5 +32,5 @@ export function makeStyles(k) {
 }
 export function makeItemStyles(k) {
   var collapseItem = collapse.item;
-  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}.", k, "-collapse-title{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";}.", k, "-collapse-arrow{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";}&:not(.", k, "-disabled){.", k, "-collapse-title{&:hover{color:", theme.color.primary, ";}}}&.", k, "-active{.", k, "-collapse-arrow{transform:rotate(90deg);}}&.", k, "-disabled{color:", theme.color.disabledBorder, ";.", k, "-collapse-title{cursor:not-allowed;}}");
+  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}>.", k, "-collapse-title{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";.", k, "-collapse-arrow{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";}}&:not(.", k, "-disabled){>.", k, "-collapse-title{&:hover{color:", theme.color.primary, ";}}}&.", k, "-active{>.", k, "-collapse-title .", k, "-collapse-arrow{transform:rotate(90deg);}}&.", k, "-disabled{color:", theme.color.disabledBorder, ";>.", k, "-collapse-title{cursor:not-allowed;}}");
 }

package/es/components/dialog/base.vdt.js

@@ -40,80 +40,90 @@ export default function ($props, $blocks, $__proto__) {
     'appear': value,
     'key': 'dialog',
     'onAfterLeave': this.onAfterLeave,
-    'children': (isHide ? true : value) ? _$ce(2, 'div', (_$blocks['content'] = function ($super) {
-      return [_$ce(2, 'div', [(_$blocks['header'] = function ($super) {
-        return _$ce(2, 'span', title, 0, _$cn(k + "-dialog-title"));
-      }, __$blocks['header'] = function ($super, data) {
-        var block = $blocks['header'];
+    'children': (isHide ? true : value) ? _$ce(2, 'div', [null, (_$blocks['_content'] = function ($super) {
+      return _$blocks['content'] = function ($super) {
+        return [_$ce(2, 'div', [(_$blocks['header'] = function ($super) {
+          return _$ce(2, 'span', title, 0, _$cn(k + "-dialog-title"));
+        }, __$blocks['header'] = function ($super, data) {
+          var block = $blocks['header'];
 
-        var callBlock = function callBlock() {
-          return _$blocks['header'].call($this, $super, data);
-        };
+          var callBlock = function callBlock() {
+            return _$blocks['header'].call($this, $super, data);
+          };
 
-        return block ? block.call($this, callBlock, data) : callBlock();
-      }, __$blocks['header'](_$no)), !hideClose && !$props.hideClose ? _$cc(Button, {
-        'type': 'none',
-        'icon': true,
-        'title': _$("关闭"),
-        'className': _$cn(k + "-dialog-close"),
-        'ev-click': this.terminate,
-        'ev-mousedown': stopPropagation,
-        'children': _$cc(Icon, {
-          'className': _$cn(k + "-icon-close")
-        })
-      }) : undefined], 0, _$cn(k + "-dialog-header"), {
-        'ev-mousedown': this.drag.start
-      }), _$ce(2, 'div', (_$blocks['body'] = function ($super) {
-        return children;
-      }, __$blocks['body'] = function ($super, data) {
-        var block = $blocks['body'];
+          return block ? block.call($this, callBlock, data) : callBlock();
+        }, __$blocks['header'](_$no)), !hideClose && !$props.hideClose ? _$cc(Button, {
+          'type': 'none',
+          'icon': true,
+          'title': _$("关闭"),
+          'className': _$cn(k + "-dialog-close"),
+          'ev-click': this.terminate,
+          'ev-mousedown': stopPropagation,
+          'children': _$cc(Icon, {
+            'className': _$cn(k + "-icon-close")
+          })
+        }) : undefined], 0, _$cn(k + "-dialog-header"), {
+          'ev-mousedown': this.drag.start
+        }), _$ce(2, 'div', (_$blocks['body'] = function ($super) {
+          return children;
+        }, __$blocks['body'] = function ($super, data) {
+          var block = $blocks['body'];
 
-        var callBlock = function callBlock() {
-          return _$blocks['body'].call($this, $super, data);
-        };
+          var callBlock = function callBlock() {
+            return _$blocks['body'].call($this, $super, data);
+          };
 
-        return block ? block.call($this, callBlock, data) : callBlock();
-      }, __$blocks['body'](_$no)), 0, _$cn(k + "-dialog-body")), (_$blocks['footer-wrapper'] = function ($super) {
-        return _$ce(2, 'div', (_$blocks['footer'] = function ($super) {
-          return [_$cc(Button, {
-            'className': _$cn(k + "-dialog-cancel"),
-            'ev-click': this.cancel,
-            'children': cancelText
-          }), _$cc(Button, {
-            'className': _$cn(k + "-dialog-ok"),
-            'type': 'primary',
-            'ev-click': this.ok,
-            'loading': loading,
-            'disabled': disabledOk,
-            'children': okText
-          })];
-        }, __$blocks['footer'] = function ($super, data) {
-          var block = $blocks['footer'];
+          return block ? block.call($this, callBlock, data) : callBlock();
+        }, __$blocks['body'](_$no)), 0, _$cn(k + "-dialog-body")), (_$blocks['footer-wrapper'] = function ($super) {
+          return _$ce(2, 'div', (_$blocks['footer'] = function ($super) {
+            return [_$cc(Button, {
+              'className': _$cn(k + "-dialog-cancel"),
+              'ev-click': this.cancel,
+              'children': cancelText
+            }), _$cc(Button, {
+              'className': _$cn(k + "-dialog-ok"),
+              'type': 'primary',
+              'ev-click': this.ok,
+              'loading': loading,
+              'disabled': disabledOk,
+              'children': okText
+            })];
+          }, __$blocks['footer'] = function ($super, data) {
+            var block = $blocks['footer'];
+
+            var callBlock = function callBlock() {
+              return _$blocks['footer'].call($this, $super, data);
+            };
+
+            return block ? block.call($this, callBlock, data) : callBlock();
+          }, __$blocks['footer'](_$no)), 0, _$cn(k + "-dialog-footer"));
+        }, __$blocks['footer-wrapper'] = function ($super, data) {
+          var block = $blocks['footer-wrapper'];
 
           var callBlock = function callBlock() {
-            return _$blocks['footer'].call($this, $super, data);
+            return _$blocks['footer-wrapper'].call($this, $super, data);
           };
 
           return block ? block.call($this, callBlock, data) : callBlock();
-        }, __$blocks['footer'](_$no)), 0, _$cn(k + "-dialog-footer"));
-      }, __$blocks['footer-wrapper'] = function ($super, data) {
-        var block = $blocks['footer-wrapper'];
+        }, __$blocks['footer-wrapper'](_$no))];
+      }, __$blocks['content'] = function ($super, data) {
+        var block = $blocks['content'];
 
         var callBlock = function callBlock() {
-          return _$blocks['footer-wrapper'].call($this, $super, data);
+          return _$blocks['content'].call($this, $super, data);
         };
 
         return block ? block.call($this, callBlock, data) : callBlock();
-      }, __$blocks['footer-wrapper'](_$no))];
-    }, __$blocks['content'] = function ($super, data) {
-      var block = $blocks['content'];
+      }, __$blocks['content'](_$no);
+    }, __$blocks['_content'] = function ($super, data) {
+      var block = $blocks['_content'];
 
       var callBlock = function callBlock() {
-        return _$blocks['content'].call($this, $super, data);
+        return _$blocks['_content'].call($this, $super, data);
       };
 
       return block ? block.call($this, callBlock, data) : callBlock();
-    }, __$blocks['content'](_$no)), 0, _$cn(classNameObj), {
+    }, __$blocks['_content'](_$no))], 0, _$cn(classNameObj), {
       'style': {
         width: typeof width === 'number' ? width + "px" : width
       },

package/es/components/drawer/index.spec.js

@@ -60,7 +60,7 @@ describe('Drawer', function () {
           case 0:
             this.timeout(0);
             _mount2 = mount(PlacementDemo), instance = _mount2[0], element = _mount2[1];
-            _element$querySelecto = element.querySelectorAll('.k-btn'), top = _element$querySelecto[0], bottom = _element$querySelecto[1], left = _element$querySelecto[2], right = _element$querySelecto[3];
+            _element$querySelecto = element.querySelectorAll('.placement-btn'), top = _element$querySelecto[0], bottom = _element$querySelecto[1], left = _element$querySelecto[2], right = _element$querySelecto[3];
 
             test = /*#__PURE__*/function () {
               var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(btn, className) {

package/es/components/drawer/index.vdt.js

@@ -19,13 +19,13 @@ export default function ($props, $blocks, $__proto__) {
     var _$blocks = {},
         __$blocks = _$ex({}, $blocks);
 
-    return (_$blocks['content'] = function ($super) {
+    return (_$blocks['_content'] = function ($super) {
       return _$ce(2, 'div', $super(), 0, _$cn(k + "-drawer-content"));
-    }, __$blocks['content'] = function ($super, data) {
-      var block = $blocks['content'];
+    }, __$blocks['_content'] = function ($super, data) {
+      var block = $blocks['_content'];
 
       var callBlock = function callBlock() {
-        return _$blocks['content'].call($this, $super, data);
+        return _$blocks['_content'].call($this, $super, data);
       };
 
       return block ? block.call($this, callBlock, data) : callBlock();

package/es/components/drawer/styles.js

@@ -1,4 +1,3 @@
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
@@ -21,38 +20,10 @@ setDefault(function () {
   }).drawer;
 });
 export function makeStyles(overlay, k) {
-  return /*#__PURE__*/css("position:fixed!important;background:transparent!important;box-shadow:none!important;&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.", k, "-drawer-content{transition:transform ", drawer.transition, ";}}.", k, "-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.", k, "-dialog-body{flex-grow:1;overflow:auto;}}", _mapInstanceProperty(placements).call(placements, function (placement) {
-    var positionValue = '';
-    var transformValue = '';
-    var borderRadius = '';
-    placements.forEach(function (p) {
-      // Set top to `0 !important` when overlay is false and placement is right or left
-      // Because dialog without overlay don't have positional parent element
-      positionValue += p !== placement ? (placement === 'right' || placement === 'left') && !overlay && p === 'top' ? p + ": 0;" : p + ": auto;" : p + ": 0;";
-    });
+  var borderRadius = theme.largeBorderRadius;
+  return /*#__PURE__*/css("&.k-drawer{position:fixed;background:transparent;box-shadow:none;border-radius:0;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.", k, "-drawer-content{transition:transform ", drawer.transition, ";}}.", k, "-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.", k, "-dialog-body{flex-grow:1;overflow:auto;}}", makePlacementStyles(k, 'right', "right: 0; height: 100%;", "translateX(100%)", borderRadius + " 0 0 " + borderRadius), " ", makePlacementStyles(k, 'left', 'left: 0; height: 100%;', "translateX(-100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " ", makePlacementStyles(k, 'top', 'left: 50%; top: 0; transform: translateX(-50%);', "translateY(-100%)", "0 0 " + borderRadius + " " + borderRadius), " ", makePlacementStyles(k, 'bottom', 'left: 50%; bottom: 0; transform: translateX(-50%);', "translateY(100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " &.", k, "-top,&.", k, "-bottom{width:100%;}");
+}
 
-    if (placement === 'left' || placement === 'right') {
-      positionValue += 'height: 100% !important;';
-
-      if (placement === 'left') {
-        borderRadius = "0 " + theme.largeBorderRadius + " " + theme.largeBorderRadius + " 0";
-        transformValue = 'translateX(-100%)';
-      } else {
-        borderRadius = theme.largeBorderRadius + " 0 0 " + theme.largeBorderRadius;
-        transformValue = 'translateX(100%)';
-      }
-    } else {
-      positionValue += 'width: 100% !important;';
-
-      if (placement === 'top') {
-        borderRadius = "0 0 " + theme.largeBorderRadius + " " + theme.largeBorderRadius;
-        transformValue = 'translateY(-100%)';
-      } else {
-        borderRadius = theme.largeBorderRadius + " " + theme.largeBorderRadius + " 0 0";
-        transformValue = 'translateY(100%)';
-      }
-    }
-
-    return /*#__PURE__*/css("&.", k, "-", placement, "{", positionValue, " &.transition-enter-from,&.transition-leave-to,&.transition-appear-from{transform:none!important;.", k, "-drawer-content{transform:", transformValue, ";}}.", k, "-drawer-content{border-radius:", borderRadius, ";}}");
-  }), ";");
+function makePlacementStyles(k, placement, styles, transform, borderRadius) {
+  return /*#__PURE__*/css("&.", k, "-drawer.", k, "-", placement, "{", styles, " &.transition-enter-from,&.transition-leave-to,&.transition-appear-from{.", k, "-drawer-content{transform:", transform, ";}}.", k, "-drawer-content{border-radius:", borderRadius, ";}}");
 }

package/es/components/editable/index.vdt.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc, createElementVNode as _$ce } from 'intact';
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, createUnknownComponentVNode as _$cc } from 'intact';
 import { getRestProps } from '../utils';
 import { Input } from '../input';
 import { Icon } from '../icon';
@@ -26,21 +26,22 @@ export default function ($props, $blocks, $__proto__) {
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-editable"] = true, _classNameObj[k + "-editing"] = editing, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-invalid"] = invalid, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj)
-  }), [!disabled && !editing ? _$cc(Tooltip, {
+  }), [_$ce(2, 'div', !editing ? children : _$cc(Input, {
+    'size': 'mini',
+    'defaultValue': value,
+    'ev-blur': this.onBlur,
+    'ev-keydown': this.onKeydown,
+    'ref': this.inputRef,
+    'frozenOnInput': true,
+    'ev-$mounted': this.select,
+    'autoWidth': true
+  }, null, this.inputRef), 0, 'c-ellipsis'), !disabled && !editing ? _$cc(Tooltip, {
     'content': tip,
     'children': _$cc(Icon, {
       'className': _$cn(k + "-icon-edit " + k + "-editable-icon"),
       'ev-click': this.edit,
       'hoverable': true
     })
-  }) : undefined, _$ce(2, 'div', !editing ? children : _$cc(Input, {
-    'size': 'small',
-    'defaultValue': value,
-    'ev-blur': this.onBlur,
-    'ev-keydown': this.onKeydown,
-    'ref': this.inputRef,
-    'frozenOnInput': true,
-    'ev-$mounted': this.select
-  }, null, this.inputRef), 0, 'c-ellipsis')]);
+  }) : undefined]);
 }
 ;

package/es/components/editable/styles.d.ts

@@ -1,7 +1,6 @@
 import '../../styles/global';
 declare const defaults: {
     iconGap: string;
-    lineHeight: string;
     invalid: {
         readonly border: string;
     };

package/es/components/editable/styles.js

@@ -4,7 +4,6 @@ import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
   iconGap: '0 0 0 8px',
-  lineHeight: '30px',
   // invalid
   invalid: {
     get border() {
@@ -21,5 +20,5 @@ setDefault(function () {
 });
 export { editable };
 export function makeStyles(k) {
-  return /*#__PURE__*/css("display:inline-block;line-height:", editable.lineHeight, ";.", k, "-editable-icon{float:right;cursor:pointer;margin:", editable.iconGap, ";line-height:unset;}&.", k, "-invalid{.", k, "-input-inner{border:", editable.invalid.border, "!important;}}");
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;.", k, "-editable-icon{margin:", editable.iconGap, ";}&.", k, "-invalid{.", k, "-input-inner{border:", editable.invalid.border, "!important;}}");
 }

package/es/components/input/index.vdt.js

@@ -144,7 +144,7 @@ export default function ($props, $blocks, $__proto__) {
           return block ? block.call($this, callBlock, data) : callBlock();
         }, __$blocks['suffix'](_$no))], 0, _$cn(k + "-input-suffix"), {
           'ev-click': stopPropagation
-        }) : undefined, autoWidth ? _$ce(2, 'div', _$ce(2, 'span', !hasValue ? placeholder : inputValue, 0, null, null, null, fakeRef), 2, _$cn(k + "-input-fake")) : undefined], 0, _$cn(k + "-input-wrapper"), {
+        }) : undefined, autoWidth ? _$ce(2, 'div', _$ce(2, 'span', !hasValue ? hasInputValue || !defaultValue ? placeholder : defaultValue : inputValue, 0, null, null, null, fakeRef), 2, _$cn(k + "-input-fake")) : undefined], 0, _$cn(k + "-input-wrapper"), {
           'ev-click': focusInputOnClick
         })
       });

package/es/components/table/styles.js

@@ -105,7 +105,7 @@ setDefault(function () {
 export function makeStyles(k) {
   return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
     return /*#__PURE__*/css(".", k, "-align-", type, "{text-align:", type, ";}");
-  }), ">.", k, "-pagination{margin:16px 0;}");
+  }), ">.", k, "-pagination{margin:16px 0;}&.", k, "-fix-header{min-height:0;.", k, "-table-wrapper{height:100%;}}");
 }
 export function makeGroupMenuStyles(k) {
   return /*#__PURE__*/css("min-width:", table.group.menuMinWidth, "!important;.", k, "-dropdown-item.", k, "-active{color:", table.group.activeColor, ";}.", k, "-table-group-header{padding:", table.group.headerPadding, ";border-bottom:", table.group.headerBorder, ";}.", k, "-table-group-body{max-height:", table.group.menuMaxHeight, ";overflow:auto;}.", k, "-table-group-footer{text-align:right;border-top:", table.group.headerBorder, ";padding:8px;.", k, "-btn{margin-left:8px;}}");

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.1-beta.0
+ * @king-design v3.1.1-beta.2
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -60,4 +60,4 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "3.1.1-beta.0";
+export declare const version = "3.1.1-beta.2";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.1-beta.0
+ * @king-design v3.1.1-beta.2
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -62,5 +62,5 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '3.1.1-beta.0';
+export var version = '3.1.1-beta.2';
 /* generate end */

package/es/site/data/components/collapse/demos/basic/index.d.ts

@@ -2,11 +2,13 @@ export { default as data } from './index.json';
 import { Component } from 'intact';
 interface Props {
     value?: string[];
+    innerValue?: string[];
 }
 export default class extends Component<Props> {
     static template: string | import("intact").Template<any>;
     static defaults(): {
         value: string[];
+        innerValue: never[];
     };
     onShow(): void;
 }

package/es/site/data/components/collapse/demos/basic/index.js

@@ -12,7 +12,8 @@ var default_1 = /*#__PURE__*/function (_Component) {
 
   default_1.defaults = function defaults() {
     return {
-      value: ['$0']
+      value: ['$0'],
+      innerValue: []
     };
   };
 

package/es/site/data/components/collapse/demos/basic/react.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 interface Props {
     value?: string[];
+    innerValue?: string[];
 }
 export default class Demo extends React.Component<{}, Props> {
     state: {
         value: string[];
+        innerValue: never[];
     };
     onShow(): void;
     render(): JSX.Element;

package/es/site/data/components/collapse/demos/basic/react.js

@@ -17,7 +17,8 @@ var Demo = /*#__PURE__*/function (_React$Component) {
 
     _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.state = {
-      value: ['$0']
+      value: ['$0'],
+      innerValue: []
     };
     return _this;
   }
@@ -41,11 +42,29 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     }, /*#__PURE__*/React.createElement(CollapseItem, {
       title: "\u8BBE\u8BA1\u8BED\u8A00",
       onShow: this.onShow
+    }, /*#__PURE__*/React.createElement("p", null, "\u8BED\u8A00\u662F\u5408\u4F5C\u7684\u57FA\u7840\u3002\u5728\u56E2\u961F\u4E2D\u5DE5\u4F5C\uFF0C\u6CA1\u6709\u5171\u540C\u7684\u8BED\u8A00\uFF0C\u4E00\u7FA4\u4EBA\u4E0D\u80FD\u5171\u540C\u6709\u6548\u5730\u5408\u4F5C\u3002\u540C\u7406\uFF0C\u56E0\u4E3A\u6BCF\u4E2A\u4EBA\u90FD\u4F1A\u6709\u4E0D\u540C\u7684\u5FC3\u667A\u6A21\u5F0F\u53BB\u8FBE\u6210\u5404\u81EA\u7684\u76EE\u7684\uFF0C\u5982\u679C\u6CA1\u6709\u5171\u540C\u7684\u8BBE\u8BA1\u8BED\u8A00\uFF0C\u5BF9\u754C\u9762\u5143\u7D20\u7684\u5171\u540C\u7406\u89E3\uFF0C\u90A3\u4E48\u6211\u4EEC\u5F88\u96BE\u901A\u8FC7\u534F\u4F5C\u8F93\u51FA\u534F\u8C03\u4E00\u81F4\u5E76\u5177\u5907\u9AD8\u53EF\u7528\u6027\u7684\u4EA7\u54C1\u3002"), /*#__PURE__*/React.createElement("p", null, "\u62E5\u6709\u901A\u7528\u8BED\u8A00\u610F\u5473\u7740\u6211\u4EEC\u6709\u76F8\u540C\u7684\u65B9\u6CD5\u6765\u547D\u540D\u754C\u9762\u5143\u7D20\u548C\u5B9A\u4E49\u8BBE\u8BA1\u6A21\u5F0F\uFF0C\u6216\u8005\u5728\u8BBE\u8BA1\u6587\u4EF6\u548C\u524D\u7AEF\u6846\u67B6\u4E2D\u4F7F\u7528\u76F8\u540C\u7684\u540D\u79F0\u3002\u901A\u7528\u8BBE\u8BA1\u8BED\u8A00\u8BA9\u56E2\u961F\u6210\u5458\u8FBE\u6210\u4E86\u76F8\u4E92\u7406\u89E3\uFF0C\u57FA\u4E8E\u5171\u540C\u7684\u7406\u89E3\uFF0C\u53C2\u4E0E\u4EA7\u54C1\u521B\u5EFA\u7684\u6BCF\u4E2A\u4EBA\u90FD\u77E5\u9053\u8FD9\u4E2A\u5143\u7D20\u662F\u4EC0\u4E48: \u5B83\u7684\u540D\u79F0\u548C\u76EE\u7684, \u4E3A\u4EC0\u4E48\u8FD9\u6837\u8BBE\u8BA1, \u4EE5\u53CA\u5982\u4F55\u53CA\u4F55\u65F6\u4F7F\u7528\u5B83\u3002"), /*#__PURE__*/React.createElement("p", null, "\u5F53\u8BBE\u8BA1\u8BED\u8A00\u662F\u901A\u7528\u77E5\u8BC6\u65F6\uFF0C\u5B83\u5C31\u6210\u4E3A\u4E00\u4E2A\u5F3A\u5927\u7684\u8BBE\u8BA1\u548C\u534F\u4F5C\u5DE5\u5177\uFF0C\u4EA7\u54C1\u521B\u5EFA\u8FC7\u7A0B\u4E2D\u4FBF\u53EF\u505C\u6B62\u4E13\u6CE8\u4E8E\u754C\u9762\u6837\u5F0F\u672C\u8EAB\uFF0C\u800C\u66F4\u591A\u5730\u5173\u6CE8\u7528\u6237\u3002"), /*#__PURE__*/React.createElement(Collapse, {
+      value: this.state.innerValue,
+      onChangeValue: function onChangeValue(innerValue) {
+        return _this2.setState({
+          innerValue: innerValue
+        });
+      },
+      style: {
+        "marginBottom": "16px"
+      }
+    }, /*#__PURE__*/React.createElement(CollapseItem, {
+      title: "\u8BBE\u8BA1\u8BED\u8A00",
+      onShow: this.onShow
     }, /*#__PURE__*/React.createElement("p", null, "\u8BED\u8A00\u662F\u5408\u4F5C\u7684\u57FA\u7840\u3002\u5728\u56E2\u961F\u4E2D\u5DE5\u4F5C\uFF0C\u6CA1\u6709\u5171\u540C\u7684\u8BED\u8A00\uFF0C\u4E00\u7FA4\u4EBA\u4E0D\u80FD\u5171\u540C\u6709\u6548\u5730\u5408\u4F5C\u3002\u540C\u7406\uFF0C\u56E0\u4E3A\u6BCF\u4E2A\u4EBA\u90FD\u4F1A\u6709\u4E0D\u540C\u7684\u5FC3\u667A\u6A21\u5F0F\u53BB\u8FBE\u6210\u5404\u81EA\u7684\u76EE\u7684\uFF0C\u5982\u679C\u6CA1\u6709\u5171\u540C\u7684\u8BBE\u8BA1\u8BED\u8A00\uFF0C\u5BF9\u754C\u9762\u5143\u7D20\u7684\u5171\u540C\u7406\u89E3\uFF0C\u90A3\u4E48\u6211\u4EEC\u5F88\u96BE\u901A\u8FC7\u534F\u4F5C\u8F93\u51FA\u534F\u8C03\u4E00\u81F4\u5E76\u5177\u5907\u9AD8\u53EF\u7528\u6027\u7684\u4EA7\u54C1\u3002"), /*#__PURE__*/React.createElement("p", null, "\u62E5\u6709\u901A\u7528\u8BED\u8A00\u610F\u5473\u7740\u6211\u4EEC\u6709\u76F8\u540C\u7684\u65B9\u6CD5\u6765\u547D\u540D\u754C\u9762\u5143\u7D20\u548C\u5B9A\u4E49\u8BBE\u8BA1\u6A21\u5F0F\uFF0C\u6216\u8005\u5728\u8BBE\u8BA1\u6587\u4EF6\u548C\u524D\u7AEF\u6846\u67B6\u4E2D\u4F7F\u7528\u76F8\u540C\u7684\u540D\u79F0\u3002\u901A\u7528\u8BBE\u8BA1\u8BED\u8A00\u8BA9\u56E2\u961F\u6210\u5458\u8FBE\u6210\u4E86\u76F8\u4E92\u7406\u89E3\uFF0C\u57FA\u4E8E\u5171\u540C\u7684\u7406\u89E3\uFF0C\u53C2\u4E0E\u4EA7\u54C1\u521B\u5EFA\u7684\u6BCF\u4E2A\u4EBA\u90FD\u77E5\u9053\u8FD9\u4E2A\u5143\u7D20\u662F\u4EC0\u4E48: \u5B83\u7684\u540D\u79F0\u548C\u76EE\u7684, \u4E3A\u4EC0\u4E48\u8FD9\u6837\u8BBE\u8BA1, \u4EE5\u53CA\u5982\u4F55\u53CA\u4F55\u65F6\u4F7F\u7528\u5B83\u3002"), /*#__PURE__*/React.createElement("p", null, "\u5F53\u8BBE\u8BA1\u8BED\u8A00\u662F\u901A\u7528\u77E5\u8BC6\u65F6\uFF0C\u5B83\u5C31\u6210\u4E3A\u4E00\u4E2A\u5F3A\u5927\u7684\u8BBE\u8BA1\u548C\u534F\u4F5C\u5DE5\u5177\uFF0C\u4EA7\u54C1\u521B\u5EFA\u8FC7\u7A0B\u4E2D\u4FBF\u53EF\u505C\u6B62\u4E13\u6CE8\u4E8E\u754C\u9762\u6837\u5F0F\u672C\u8EAB\uFF0C\u800C\u66F4\u591A\u5730\u5173\u6CE8\u7528\u6237\u3002")), /*#__PURE__*/React.createElement(CollapseItem, {
       title: "KDL\u7684\u4EF7\u503C"
     }, /*#__PURE__*/React.createElement("ol", null, /*#__PURE__*/React.createElement("li", null, "\u8282\u7701\u8BBE\u8BA1\u548C\u6784\u5EFA\u6A21\u5757\u7684\u65F6\u95F4\uFF1B"), /*#__PURE__*/React.createElement("li", null, "\u7F51\u7AD9\u53D8\u66F4\u65F6\u8282\u7701\u65F6\u95F4\uFF0C\u590D\u7528\u7684\u6A21\u5F0F\u66F4\u65B0\u65F6\u5C06\u5728\u4EFB\u4F55\u4F7F\u7528\u7684\u5730\u65B9\u81EA\u52A8\u66F4\u65B0\uFF0C\u91CD\u590D\u5DE5\u4F5C\u6D6A\u8D39\u7684\u65F6\u95F4\u8D8A\u5C11\uFF0C\u5C31\u6709 \u66F4\u591A\u65F6\u95F4\u505A\u6709\u4EF7\u503C\u7684\u4E8B\uFF1B"), /*#__PURE__*/React.createElement("li", null, "\u66F4\u5FEB\u7684\u53D1\u5E03\u4EA7\u54C1\uFF0C\u73B0\u6210\u7684\u6A21\u5F0F\u5E93\u7F29\u77ED\u4E86\u65B0\u529F\u80FD\u8BBE\u8BA1\u7814\u53D1\u4E0A\u7EBF\u65F6\u95F4\uFF1B"), /*#__PURE__*/React.createElement("li", null, "\u54C1\u724C\u7EDF\u4E00\u6027\u3001\u89C6\u89C9\u4E00\u81F4\u6027\u3001\u63D0\u5347\u56E2\u961F\u534F\u4F5C\u6548\u7387\uFF0C\u4E0D\u7528\u6BCF\u6B21\u91CD\u65B0\u521B\u9020\u3002"))), /*#__PURE__*/React.createElement(CollapseItem, {
       title: "\u8BBE\u8BA1\u539F\u5219",
       disabled: true
+    }, "\u539F\u5219\u987A\u5E8F\u5FC5\u987B\u6309\u7167\u7ED9\u5B9A\u7684\u987A\u5E8F\u6267\u884C\u3002\u4E5F\u5C31\u662F\u8BF4\uFF0C\u7F8E\u4E0D\u53EF\u4EE5\u5EFA\u7ACB\u5728\u6E05\u6670\u548C\u6548\u7387\u4E4B\u4E0A\uFF0C\u6548\u7387\u4E5F\u4E0D\u53EF\u4EE5\u59A5\u534F\u4E8E\u4E00\u81F4\u6027\u4E4B\u4E0B\uFF0C\u6E05\u6670\u6C38\u8FDC\u90FD\u662F\u7B2C\u4E00\u4F18\u5148\u7EA7\u3002\u5728\u5236\u5B9A\u4EFB\u4F55\u8BBE\u8BA1\u51B3\u7B56\u65F6\u90FD\u5E94\u6309\u7167\u8BBE\u8BA1\u539F\u5219\uFF0C\u8003\u8651\u4F18\u5148\u7EA7\u3002 \u8BBE\u8BA1\u7531\u8BBE\u8BA1\u8005\u7684\u9009\u62E9\u800C\u51B3\u5B9A\uFF0C\u8BBE\u8BA1\u539F\u5219\u4E3A\u8BBE\u8BA1\u8005\u63D0\u4F9B\u4E86\u9009\u62E9\u4F9D\u636E\uFF0C\u4ECE\u4F17\u591A\u5B58\u5728\u77DB\u76FE\u6216\u4EF7\u503C\u51B2\u7A81\u7684\u8BBE\u8BA1\u51B3\u7B56\u4E2D\u627E\u5230\u5E73\u8861\u3002"))), /*#__PURE__*/React.createElement(CollapseItem, {
+      title: "KDL\u7684\u4EF7\u503C"
+    }, /*#__PURE__*/React.createElement("ol", null, /*#__PURE__*/React.createElement("li", null, "\u8282\u7701\u8BBE\u8BA1\u548C\u6784\u5EFA\u6A21\u5757\u7684\u65F6\u95F4\uFF1B"), /*#__PURE__*/React.createElement("li", null, "\u7F51\u7AD9\u53D8\u66F4\u65F6\u8282\u7701\u65F6\u95F4\uFF0C\u590D\u7528\u7684\u6A21\u5F0F\u66F4\u65B0\u65F6\u5C06\u5728\u4EFB\u4F55\u4F7F\u7528\u7684\u5730\u65B9\u81EA\u52A8\u66F4\u65B0\uFF0C\u91CD\u590D\u5DE5\u4F5C\u6D6A\u8D39\u7684\u65F6\u95F4\u8D8A\u5C11\uFF0C\u5C31\u6709 \u66F4\u591A\u65F6\u95F4\u505A\u6709\u4EF7\u503C\u7684\u4E8B\uFF1B"), /*#__PURE__*/React.createElement("li", null, "\u66F4\u5FEB\u7684\u53D1\u5E03\u4EA7\u54C1\uFF0C\u73B0\u6210\u7684\u6A21\u5F0F\u5E93\u7F29\u77ED\u4E86\u65B0\u529F\u80FD\u8BBE\u8BA1\u7814\u53D1\u4E0A\u7EBF\u65F6\u95F4\uFF1B"), /*#__PURE__*/React.createElement("li", null, "\u54C1\u724C\u7EDF\u4E00\u6027\u3001\u89C6\u89C9\u4E00\u81F4\u6027\u3001\u63D0\u5347\u56E2\u961F\u534F\u4F5C\u6548\u7387\uFF0C\u4E0D\u7528\u6BCF\u6B21\u91CD\u65B0\u521B\u9020\u3002"))), /*#__PURE__*/React.createElement(CollapseItem, {
+      title: "\u8BBE\u8BA1\u539F\u5219",
+      disabled: true
     }, "\u539F\u5219\u987A\u5E8F\u5FC5\u987B\u6309\u7167\u7ED9\u5B9A\u7684\u987A\u5E8F\u6267\u884C\u3002\u4E5F\u5C31\u662F\u8BF4\uFF0C\u7F8E\u4E0D\u53EF\u4EE5\u5EFA\u7ACB\u5728\u6E05\u6670\u548C\u6548\u7387\u4E4B\u4E0A\uFF0C\u6548\u7387\u4E5F\u4E0D\u53EF\u4EE5\u59A5\u534F\u4E8E\u4E00\u81F4\u6027\u4E4B\u4E0B\uFF0C\u6E05\u6670\u6C38\u8FDC\u90FD\u662F\u7B2C\u4E00\u4F18\u5148\u7EA7\u3002\u5728\u5236\u5B9A\u4EFB\u4F55\u8BBE\u8BA1\u51B3\u7B56\u65F6\u90FD\u5E94\u6309\u7167\u8BBE\u8BA1\u539F\u5219\uFF0C\u8003\u8651\u4F18\u5148\u7EA7\u3002 \u8BBE\u8BA1\u7531\u8BBE\u8BA1\u8005\u7684\u9009\u62E9\u800C\u51B3\u5B9A\uFF0C\u8BBE\u8BA1\u539F\u5219\u4E3A\u8BBE\u8BA1\u8005\u63D0\u4F9B\u4E86\u9009\u62E9\u4F9D\u636E\uFF0C\u4ECE\u4F17\u591A\u5B58\u5728\u77DB\u76FE\u6216\u4EF7\u503C\u51B2\u7A81\u7684\u8BBE\u8BA1\u51B3\u7B56\u4E2D\u627E\u5230\u5E73\u8861\u3002"));
   };
 

package/es/site/data/components/drawer/demos/content/index.d.ts

@@ -0,0 +1,11 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+interface Props {
+    show?: boolean;
+}
+export default class extends Component<Props> {
+    static template: string | import("intact").Template<any>;
+    static defaults(): {
+        show: boolean;
+    };
+}

package/es/site/data/components/drawer/demos/content/index.js

@@ -0,0 +1,23 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  default_1.defaults = function defaults() {
+    return {
+      show: false
+    };
+  };
+
+  return default_1;
+}(Component);
+
+default_1.template = template;
+export { default_1 as default };

package/es/site/data/components/drawer/demos/content/react.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface Props {
+    show?: boolean;
+}
+export default class Demo extends React.Component<{}, Props> {
+    state: {
+        show: boolean;
+    };
+    set<K extends keyof Props>(key: K, value: Props[K]): void;
+    render(): JSX.Element;
+}
+export {};

package/es/site/data/components/drawer/demos/content/react.js

@@ -0,0 +1,61 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import React from 'react';
+import { Drawer, Button } from '@king-design/react';
+
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+
+  function Demo() {
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.state = {
+      show: false
+    };
+    return _this;
+  }
+
+  var _proto = Demo.prototype;
+
+  _proto.set = function set(key, value) {
+    var _this$setState;
+
+    this.setState((_this$setState = {}, _this$setState[key] = value, _this$setState));
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      onClick: this.set.bind(this, 'show', true),
+      type: "primary"
+    }, "Show Drawer"), /*#__PURE__*/React.createElement(Drawer, {
+      value: this.state.show,
+      onChangeValue: function onChangeValue(show) {
+        return _this2.setState({
+          show: show
+        });
+      },
+      title: "Drawer Title",
+      placement: "top",
+      size: "small",
+      slotContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        style: {
+          "padding": "16px",
+          "textAlign": "center"
+        }
+      }, "Hello King-Design!"))
+    }));
+  };
+
+  return Demo;
+}(React.Component);
+
+export { Demo as default };

package/es/site/data/components/drawer/demos/placement/index.d.ts

@@ -5,6 +5,7 @@ interface Props {
     show?: boolean;
     showPosition: DrawerProps['placement'];
     showList: ListItem[];
+    size: DrawerProps['size'];
 }
 declare type ListItem = {
     key: DrawerProps['placement'];

package/es/site/data/components/drawer/demos/placement/index.js

@@ -16,6 +16,7 @@ var default_1 = /*#__PURE__*/function (_Component) {
     return {
       show: false,
       showPosition: 'right',
+      size: 'default',
       showList: [{
         key: 'top',
         value: '从上侧出现'

package/es/site/data/components/drawer/demos/placement/react.d.ts

@@ -4,6 +4,7 @@ interface Props {
     show?: boolean;
     showPosition: DrawerProps['placement'];
     showList: ListItem[];
+    size: DrawerProps['size'];
 }
 declare type ListItem = {
     key: DrawerProps['placement'];

package/es/site/data/components/drawer/demos/placement/react.js

@@ -22,6 +22,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       show: false,
       showPosition: 'right',
+      size: 'default',
       showList: [{
         key: 'top',
         value: '从上侧出现'
@@ -50,12 +51,29 @@ var Demo = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.render = function render() {
-    var _context2,
-        _this2 = this;
+    var _this2 = this,
+        _context2;
 
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonGroup, null, _mapInstanceProperty(_context2 = this.state.showList).call(_context2, function ($value, $key) {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonGroup, {
+      checkType: "radio",
+      value: this.state.size,
+      onChangeValue: function onChangeValue(size) {
+        return _this2.setState({
+          size: size
+        });
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      value: "large"
+    }, "large"), /*#__PURE__*/React.createElement(Button, {
+      value: "default"
+    }, "default"), /*#__PURE__*/React.createElement(Button, {
+      value: "small"
+    }, "small"), /*#__PURE__*/React.createElement(Button, {
+      value: "mini"
+    }, "mini")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(ButtonGroup, null, _mapInstanceProperty(_context2 = this.state.showList).call(_context2, function ($value, $key) {
       return /*#__PURE__*/React.createElement(Button, {
-        onClick: _this2.showDrawer.bind(self, $value.key)
+        onClick: _this2.showDrawer.bind(self, $value.key),
+        className: "placement-btn"
       }, $value.value);
     })), /*#__PURE__*/React.createElement(Drawer, {
       value: this.state.show,
@@ -69,7 +87,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
         return _this2.__demoTwo = i;
       },
       placement: this.state.showPosition,
-      size: "small"
+      size: this.state.size
     }, "Drawer Body"));
   };
 

package/es/site/data/components/input/demos/autowidth/react.js

@@ -12,10 +12,14 @@ var Demo = /*#__PURE__*/function (_React$Component) {
   var _proto = Demo.prototype;
 
   _proto.render = function render() {
-    return /*#__PURE__*/React.createElement(Input, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
       placeholder: "auto width",
       autoWidth: true
-    });
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
+      placeholder: "auto width",
+      defaultValue: "default value",
+      autoWidth: true
+    }));
   };
 
   return Demo;

package/index.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.1-beta.0
+ * @king-design v3.1.1-beta.2
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -65,6 +65,6 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
 
-export const version = '3.1.1-beta.0';
+export const version = '3.1.1-beta.2';
 
 /* generate end */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/intact",
-  "version": "3.1.1-beta.0",
+  "version": "3.1.1-beta.2",
   "description": "A component library written in Intact for Intact, Vue, React and Angular",
   "main": "es/index.js",
   "engines": {
@@ -87,7 +87,6 @@
     "@emotion/babel-plugin": "^11.3.0",
     "@types/chai": "^4.2.18",
     "@types/chroma-js": "^2.1.3",
-    "@types/downloadjs": "^1.4.2",
     "@types/enquire.js": "^2.1.3",
     "@types/fs-extra": "^9.0.11",
     "@types/js-yaml": "^4.0.1",
@@ -180,9 +179,8 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.16.0",
     "@emotion/css": "^11.5.0",
-    "@king-design/react": "^3.1.1-beta.0",
+    "@king-design/react": "^3.1.1-beta.2",
     "dayjs": "^1.10.7",
-    "downloadjs": "^1.4.7",
     "enquire.js": "^2.1.6",
     "intact": "^3.0.19",
     "monaco-editor": "^0.26.1",