@king-design/intact 2.0.13-beta.0 → 2.0.13

package/components/code/index.md

@@ -17,7 +17,7 @@ sidebar: doc
 | 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 | 其它可选的配置，会传给`monaco.editor.create()`方法，可选值参考[options](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneEditorConstructionOptions.html) | [`editor.IStandaloneEditorConstructionOptions`](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneEditorConstructionOptions.html) | `{}` |
 
 > 例如：通过`options`可以隐藏右侧代码的缩影(minimap): `options = {minimap: {enabled: false}}`
 
@@ -25,4 +25,4 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| 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 |
+| ready | 组件加载并实例化完成触发 | (editor: [editor.IStandaloneCodeEditor](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneCodeEditor.html), Editor: typeof [editor](https://microsoft.github.io/monaco-editor/docs.html#modules/editor.html), Monaco: typeof [monaco](https://microsoft.github.io/monaco-editor/docs.html)) => void |

package/components/code/index.ts

@@ -1,6 +1,6 @@
 import {Component, TypeDefs, createRef} from 'intact';
 import template from './index.vdt';
-import type {editor} from 'monaco-editor';
+import type {editor, default as monaco} from 'monaco-editor';
 import {useEditor} from './useEditor';
 import type {Events} from '../types';
 
@@ -15,7 +15,7 @@ export interface CodeProps {
 }
 
 export interface CodeEvents {
-    ready: [editor.IStandaloneCodeEditor, typeof editor]
+    ready: [editor.IStandaloneCodeEditor, typeof editor, typeof monaco]
 }
 
 const typeDefs: Required<TypeDefs<CodeProps>> = {

package/components/code/useEditor.ts

@@ -33,7 +33,7 @@ export function useEditor() {
 
             loading.set(false);
 
-            instance.trigger('ready', codeEditor, Editor);
+            instance.trigger('ready', codeEditor, Editor, monaco);
         });
     });
 

package/components/table/demos/animation.md

@@ -5,6 +5,8 @@ order: 20
 
 一个简单的`Table`，点击按钮，即可查看新增表格的动效。
 
+通过`animation`可以禁用动效，取值为`false`时，禁用行和列动画；或者通过数组分别指定禁用行和列动画，如：`[false, true]`，只禁用列动画
+
 ```vdt
 import {Table, TableColumn, Button} from 'kpc';
 
@@ -21,6 +23,11 @@ import {Table, TableColumn, Button} from 'kpc';
         <TableColumn v-if={this.get('isShow')} key="b" title="Title 2"/>
         <TableColumn key="c" title="Title 3" />
     </Table>
+    <Table data={this.get('data')} resizable rowKey={row => row.a} animation={false}>
+        <TableColumn key="a" title="Title 1" />
+        <TableColumn v-if={this.get('isShow')} key="b" title="Title 2"/>
+        <TableColumn key="c" title="Title 3" />
+    </Table>
 </div>
 ```
 

package/components/table/index.md

@@ -42,6 +42,7 @@ sidebar: doc
 | minColWidth | 指定所有列拖动时的最小宽度 | `number` | `40` |
 | widthStoreKey | 如果要保存表格拖动后的列宽信息，可以通过该属性设置保存到`localStorage`中的`key` | `string` | `undefined` |
 | draggable | 表格行是否可拖动 | `boolean` | `false` |
+| animation | 是否开启动效，默认开启。可以通过`true` `false`全部设置，或者通过数组单独设置行和列的动效 | `boolean` &#124 `[boolean, boolean]` | `true` |
 
 ```ts
 import {Props} from 'intact';

package/components/table/row.ts

@@ -35,6 +35,7 @@ export interface TableRowProps {
     onToggleSpreadRow: (key: TableRowKey) => void
     onBeforeUnmount: (key: TableRowKey) => void
     offsetMap: Record<Key, number>
+    animation: boolean
 
     draggable: boolean
     draggingKey: TableRowKey | null

package/components/table/row.vdt

@@ -3,7 +3,7 @@ import {getClassAndStyleForFixed} from './useFixedColumns';
 import {Checkbox} from '../checkbox';
 import {Radio} from '../radio';
 import {TableCell} from './cell';
-import {createElementVNode, className as cx} from 'intact';
+import {createElementVNode, className as cx, createFragment} from 'intact';
 
 const {
     cols, data, checkType, hasFixedLeft,
@@ -11,7 +11,7 @@ const {
     grid, index: rowIndex, indeterminate,
     allDisabled, selected, /* hidden,  */spreaded,
     hasChildren, indent, key, offsetMap,
-    draggable, draggingKey,
+    draggable, draggingKey, animation,
 } = this.get();
 const classNameObj = {
     'k-disabled': disabled,
@@ -89,7 +89,9 @@ cols.forEach((props, columnIndex) => {
     );
 });
 
-const rows = <TransitionGroup name="k-fade-expand" move={false}>{vNodes}</TransitionGroup>
+const rows = animation ?
+    <TransitionGroup name="k-fade-expand" move={false}>{vNodes}</TransitionGroup> :
+    createFragment(vNodes, 8);
 /* const rows = vNodes; */
 
 // for performance, no normalize

package/components/table/table.ts

@@ -59,6 +59,7 @@ export interface TableProps<
     minColWidth?: number
     widthStoreKey?: string
     draggable?: boolean
+    animation?: boolean | [boolean, boolean]
 }
 
 export interface TableEvents<T = any, K extends TableRowKey = number> {
@@ -116,6 +117,7 @@ const typeDefs: Required<TypeDefs<TableProps<unknown>>> = {
     minColWidth: Number,
     widthStoreKey: String,
     draggable: Boolean,
+    animation: [Boolean, Array],
 };
 
 const defaults = (): Partial<TableProps> => ({
@@ -126,6 +128,7 @@ const defaults = (): Partial<TableProps> => ({
     childrenKey: 'children',
     indent: 32,
     minColWidth: 40,
+    animation: true,
 });
 
 const events: Events<TableEvents> = {

package/components/table/table.vdt

@@ -23,8 +23,9 @@ const {
     rowClassName, group, sort, loading,
     merge, childrenKey, indent, tooltipPosition,
     tooltipContainer, showIndeterminate, resizable,
-    draggable,
+    draggable, animation: _animation,
 } = this.get();
+const animation = !Array.isArray(_animation) ? [_animation, _animation] : _animation;
 const {columns, cols, maxRows, maxCols} = this.columns.getData();
 const {scrollPosition, hasFixed, getHasFixedLeft, getOffsetMap} = this.fixedColumns;
 const {scrollRef} = this.scroll;
@@ -71,23 +72,29 @@ const thead = (
                     <FixedColumnsContext.Provider value={offsetMap}>
                         <thead>
                             <tr v-for={columns}>
-                                <TransitionGroup name="k-fade-expand" move={false}>
-                                    <th v-if={$key === 0 && checkType !== 'none'}
-                                        {...getClassAndStyleForFixed({
-                                            fixed: hasFixedLeft ? 'left' : false,
-                                        }, 0)}
-                                        rowspan={maxRows}
-                                        key="$checktype"
-                                    >
-                                        <Checkbox v-if={checkType === 'checkbox'}
-                                            value={allCheckedStatus === AllCheckedStatus.All}
-                                            indeterminate={showIndeterminate && allCheckedStatus == AllCheckedStatus.Indeterminate}
-                                            ev-$change:value={toggleCheckedAll}
-                                            disabled={!hasData}
-                                        />
-                                    </th>
-                                    {$value}
-                                </TransitionGroup>
+                                {(() => {
+                                    const ths = <template>
+                                        <th v-if={$key === 0 && checkType !== 'none'}
+                                            {...getClassAndStyleForFixed({
+                                                fixed: hasFixedLeft ? 'left' : false,
+                                            }, 0)}
+                                            rowspan={maxRows}
+                                            key="$checktype"
+                                        >
+                                            <Checkbox v-if={checkType === 'checkbox'}
+                                                value={allCheckedStatus === AllCheckedStatus.All}
+                                                indeterminate={showIndeterminate && allCheckedStatus == AllCheckedStatus.Indeterminate}
+                                                ev-$change:value={toggleCheckedAll}
+                                                disabled={!hasData}
+                                            />
+                                        </th>
+                                        {$value}
+                                    </template>
+
+                                    return animation[1] ?
+                                        <TransitionGroup name="k-fade-expand" move={false}>{ths}</TransitionGroup> :
+                                        ths;
+                                })()}
                             </tr>
                         </thead>
                     </FixedColumnsContext.Provider>
@@ -114,84 +121,85 @@ const tbody = (
                     <b:empty>{_$('/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~')}</b:empty>
                 </td>
             </tr> :
-            <TransitionGroup name="k-fade-in-left" move={!draggingKey.value}>
-                {(() => {
-                    const rows = [];
-                    loopData((value, index, level, hidden) => {
-                        // don't render if row is hidden
-                        if (hidden) return hidden;
+            (() => {
+                const rows = [];
+                loopData((value, index, level, hidden) => {
+                    // don't render if row is hidden
+                    if (hidden) return hidden;
 
-                        const status = allStatus[index];
-                        const key = allKeys[index];
-                        const spreaded = isSpreaded(key);
-                        const hasChildren = !!childrenKey && Array.isArray(value[childrenKey]);
-                        const indentSize = indent ? indent * level : 0; 
+                    const status = allStatus[index];
+                    const key = allKeys[index];
+                    const spreaded = isSpreaded(key);
+                    const hasChildren = !!childrenKey && Array.isArray(value[childrenKey]);
+                    const indentSize = indent ? indent * level : 0; 
 
-                        let row = <TableRow
-                            key={key}
-                            cols={cols}
-                            data={value}
-                            checkType={checkType}
-                            hasFixedLeft={hasFixedLeft}
-                            onClick={this.clickRow}
-                            checked={status.checked}
-                            indeterminate={status.indeterminate}
-                            index={index}
-                            disabled={status.disabled}
-                            allDisabled={status.allDisabled}
-                            className={rowClassName && rowClassName(value, index, key)}
-                            merge={merge}
-                            grid={getGrid()}
-                            onChangeChecked={onChangeChecked}
-                            selected={isSelected(key)}
-                            spreaded={spreaded}
-                            hasChildren={hasChildren}
-                            indent={indentSize}
-                            onToggleSpreadRow={toggleSpreadRow}
-                            onBeforeUnmount={this.resetRowStatus.onRowBeforeUnmount}
-                            offsetMap={offsetMap}
+                    let row = <TableRow
+                        key={key}
+                        cols={cols}
+                        data={value}
+                        checkType={checkType}
+                        hasFixedLeft={hasFixedLeft}
+                        onClick={this.clickRow}
+                        checked={status.checked}
+                        indeterminate={status.indeterminate}
+                        index={index}
+                        disabled={status.disabled}
+                        allDisabled={status.allDisabled}
+                        className={rowClassName && rowClassName(value, index, key)}
+                        merge={merge}
+                        grid={getGrid()}
+                        onChangeChecked={onChangeChecked}
+                        selected={isSelected(key)}
+                        spreaded={spreaded}
+                        hasChildren={hasChildren}
+                        indent={indentSize}
+                        onToggleSpreadRow={toggleSpreadRow}
+                        onBeforeUnmount={this.resetRowStatus.onRowBeforeUnmount}
+                        offsetMap={offsetMap}
+                        animation={animation[1]}
 
-                            draggable={draggable}
-                            draggingKey={draggingKey.value}
-                            onRowDragStart={onRowDragStart}
-                            onRowDragEnd={onRowDragEnd}
-                            onRowDragOver={onRowDragOver}
-                        />
+                        draggable={draggable}
+                        draggingKey={draggingKey.value}
+                        onRowDragStart={onRowDragStart}
+                        onRowDragEnd={onRowDragEnd}
+                        onRowDragOver={onRowDragOver}
+                    />
 
-                        if ($blocks.tooltip) {
-                            const content = <b:tooltip params={[value, index]} />;
-                            row = (
-                                <Tooltip key={key} position={tooltipPosition} container={tooltipContainer}>
-                                    <template>{row}</template>
-                                    <b:content>{content}</b:content>
-                                </Tooltip>
-                            );
-                        }
+                    if ($blocks.tooltip) {
+                        const content = <b:tooltip params={[value, index]} />;
+                        row = (
+                            <Tooltip key={key} position={tooltipPosition} container={tooltipContainer}>
+                                <template>{row}</template>
+                                <b:content>{content}</b:content>
+                            </Tooltip>
+                        );
+                    }
 
-                        rows.push(row);
-                        if ($blocks.expand) {
-                            const expanded = isExpanded(key);
-                            rows.push(
-                                <tr class={{"k-expand": true, 'k-expanded': expanded}}
-                                    key={`${key}.$expand`}
-                                >
-                                    <td colspan={colCount}>
-                                        <Transition {...expandAnimationCallbacks}>
-                                            <div v-if={expanded} class="k-table-expand">
-                                                <b:expand params={[value, index]} />
-                                            </div>
-                                        </Transition>
-                                    </td>
-                                </tr>
-                            );
-                        }
+                    rows.push(row);
+                    if ($blocks.expand) {
+                        const expanded = isExpanded(key);
+                        rows.push(
+                            <tr class={{"k-expand": true, 'k-expanded': expanded}}
+                                key={`${key}.$expand`}
+                            >
+                                <td colspan={colCount}>
+                                    <Transition {...expandAnimationCallbacks}>
+                                        <div v-if={expanded} class="k-table-expand">
+                                            <b:expand params={[value, index]} />
+                                        </div>
+                                    </Transition>
+                                </td>
+                            </tr>
+                        );
+                    }
 
-                        return hidden || !spreaded;
-                    });
+                    return hidden || !spreaded;
+                });
 
-                    return rows;
-                })()}
-            </TransitionGroup>
+                return animation[0] ?
+                    <TransitionGroup name="k-fade-in-left" move={!draggingKey.value}>{rows}</TransitionGroup> :
+                    rows;
+            })()
         }
     </tbody>
 );

package/components/tooltip/index.ts

@@ -20,7 +20,7 @@ export interface TooltipBlocks extends BaseTooltipBlocks, TooltipContentBlocks {
     content: null
 }
 
-declare class _Tooltip extends BaseTooltip<TooltipProps, TooltipEvents, TooltipBlocks> { }
+export declare class _Tooltip extends BaseTooltip<TooltipProps, TooltipEvents, TooltipBlocks> { }
 
 function Wrapper(props: Props<TooltipProps, BaseTooltip>) {
     let {children, content, $blocks, ...rest} = props;

package/es/components/code/index.d.ts

@@ -1,5 +1,5 @@
 import { Component, TypeDefs } from 'intact';
-import type { editor } from 'monaco-editor';
+import type { editor, default as monaco } from 'monaco-editor';
 import type { Events } from '../types';
 export interface CodeProps {
     value?: string;
@@ -11,7 +11,7 @@ export interface CodeProps {
     options?: editor.IStandaloneEditorConstructionOptions;
 }
 export interface CodeEvents {
-    ready: [editor.IStandaloneCodeEditor, typeof editor];
+    ready: [editor.IStandaloneCodeEditor, typeof editor, typeof monaco];
 }
 export declare class Code extends Component<CodeProps, CodeEvents> {
     static template: string | import("intact").Template<any>;

package/es/components/code/useEditor.js

@@ -29,7 +29,7 @@ export function useEditor() {
       }, options));
       watch(Editor, codeEditor);
       loading.set(false);
-      instance.trigger('ready', codeEditor, Editor);
+      instance.trigger('ready', codeEditor, Editor, monaco);
     });
   });
   onBeforeUnmount(function () {

package/es/components/table/row.d.ts

@@ -23,6 +23,7 @@ export interface TableRowProps {
     onToggleSpreadRow: (key: TableRowKey) => void;
     onBeforeUnmount: (key: TableRowKey) => void;
     offsetMap: Record<Key, number>;
+    animation: boolean;
     draggable: boolean;
     draggingKey: TableRowKey | null;
     onRowDragStart: DragCallback;

package/es/components/table/row.vdt.js

@@ -5,7 +5,7 @@ import { getClassAndStyleForFixed } from './useFixedColumns';
 import { Checkbox } from '../checkbox';
 import { Radio } from '../radio';
 import { TableCell } from './cell';
-import { createElementVNode, className as cx } from 'intact';
+import { createElementVNode, className as cx, createFragment } from 'intact';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -34,7 +34,8 @@ export default function ($props, $blocks, $__proto__) {
       key = _this$get.key,
       offsetMap = _this$get.offsetMap,
       draggable = _this$get.draggable,
-      draggingKey = _this$get.draggingKey;
+      draggingKey = _this$get.draggingKey,
+      animation = _this$get.animation;
 
   var classNameObj = (_classNameObj = {
     'k-disabled': disabled,
@@ -110,16 +111,14 @@ export default function ($props, $blocks, $__proto__) {
       'key': columnKey
     }, columnKey));
   });
-
-  var rows = _$cc(TransitionGroup, {
+  var rows = animation ? _$cc(TransitionGroup, {
     'name': 'k-fade-expand',
     'move': false,
     'children': vNodes
-  });
+  }) : createFragment(vNodes, 8);
   /* const rows = vNodes; */
   // for performance, no normalize
 
-
   return createElementVNode(2, 'tr', rows, 2, cx(classNameObj), {
     'data-key': key,
     'ev-mouseenter': this.onMouseEnter,

package/es/components/table/table.d.ts

@@ -34,6 +34,7 @@ export interface TableProps<T = any, K extends TableRowKey = TableRowKey, C exte
     minColWidth?: number;
     widthStoreKey?: string;
     draggable?: boolean;
+    animation?: boolean | [boolean, boolean];
 }
 export interface TableEvents<T = any, K extends TableRowKey = number> {
     clickRow: [T, number, K];

package/es/components/table/table.js

@@ -56,7 +56,8 @@ var typeDefs = {
   resizable: Boolean,
   minColWidth: Number,
   widthStoreKey: String,
-  draggable: Boolean
+  draggable: Boolean,
+  animation: [Boolean, Array]
 };
 
 var defaults = function defaults() {
@@ -69,7 +70,8 @@ var defaults = function defaults() {
     rowExpandable: true,
     childrenKey: 'children',
     indent: 32,
-    minColWidth: 40
+    minColWidth: 40,
+    animation: true
   };
 };
 

package/es/components/table/table.vdt.js

@@ -57,7 +57,10 @@ export default function ($props, $blocks, $__proto__) {
       tooltipContainer = _this$get.tooltipContainer,
       showIndeterminate = _this$get.showIndeterminate,
       resizable = _this$get.resizable,
-      draggable = _this$get.draggable;
+      draggable = _this$get.draggable,
+      _animation = _this$get.animation;
+
+  var animation = !Array.isArray(_animation) ? [_animation, _animation] : _animation;
 
   var _this$columns$getData = this.columns.getData(),
       columns = _this$columns$getData.columns,
@@ -130,10 +133,8 @@ export default function ($props, $blocks, $__proto__) {
           'children': _$cc(FixedColumnsContext.Provider, {
             'value': offsetMap,
             'children': _$ce(2, 'thead', _$ma(columns, function ($value, $key) {
-              return _$ce(2, 'tr', _$cc(TransitionGroup, {
-                'name': 'k-fade-expand',
-                'move': false,
-                'children': [$key === 0 && checkType !== 'none' ? _$cv('th', _extends({}, getClassAndStyleForFixed({
+              return _$ce(2, 'tr', function () {
+                var ths = [$key === 0 && checkType !== 'none' ? _$cv('th', _extends({}, getClassAndStyleForFixed({
                   fixed: hasFixedLeft ? 'left' : false
                 }, 0), {
                   'rowspan': maxRows,
@@ -143,8 +144,13 @@ export default function ($props, $blocks, $__proto__) {
                   'indeterminate': showIndeterminate && allCheckedStatus == AllCheckedStatus.Indeterminate,
                   'ev-$change:value': toggleCheckedAll,
                   'disabled': !hasData
-                }) : undefined) : undefined, $value]
-              }), 2);
+                }) : undefined) : undefined, $value];
+                return animation[1] ? _$cc(TransitionGroup, {
+                  'name': 'k-fade-expand',
+                  'move': false,
+                  'children': ths
+                }) : ths;
+              }(), 0);
             }, $this), 4)
           })
         })
@@ -181,115 +187,116 @@ export default function ($props, $blocks, $__proto__) {
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['empty'](_$no)), 0, 'k-table-empty', {
     'colspan': colCount
-  }), 2, null, null, 'table-empty') : _$cc(TransitionGroup, {
-    'name': 'k-fade-in-left',
-    'move': !draggingKey.value,
-    'children': function () {
-      var rows = [];
-      loopData(function (value, index, level, hidden) {
-        // don't render if row is hidden
-        if (hidden) return hidden;
-        var status = allStatus[index];
-        var key = allKeys[index];
-        var spreaded = isSpreaded(key);
-        var hasChildren = !!childrenKey && Array.isArray(value[childrenKey]);
-        var indentSize = indent ? indent * level : 0;
+  }), 2, null, null, 'table-empty') : function () {
+    var rows = [];
+    loopData(function (value, index, level, hidden) {
+      // don't render if row is hidden
+      if (hidden) return hidden;
+      var status = allStatus[index];
+      var key = allKeys[index];
+      var spreaded = isSpreaded(key);
+      var hasChildren = !!childrenKey && Array.isArray(value[childrenKey]);
+      var indentSize = indent ? indent * level : 0;
 
-        var row = _$cc(TableRow, {
-          'key': key,
-          'cols': cols,
-          'data': value,
-          'checkType': checkType,
-          'hasFixedLeft': hasFixedLeft,
-          'onClick': _this.clickRow,
-          'checked': status.checked,
-          'indeterminate': status.indeterminate,
-          'index': index,
-          'disabled': status.disabled,
-          'allDisabled': status.allDisabled,
-          'className': _$cn(rowClassName && rowClassName(value, index, key)),
-          'merge': merge,
-          'grid': getGrid(),
-          'onChangeChecked': onChangeChecked,
-          'selected': isSelected(key),
-          'spreaded': spreaded,
-          'hasChildren': hasChildren,
-          'indent': indentSize,
-          'onToggleSpreadRow': toggleSpreadRow,
-          'onBeforeUnmount': _this.resetRowStatus.onRowBeforeUnmount,
-          'offsetMap': offsetMap,
-          'draggable': draggable,
-          'draggingKey': draggingKey.value,
-          'onRowDragStart': onRowDragStart,
-          'onRowDragEnd': onRowDragEnd,
-          'onRowDragOver': onRowDragOver
-        }, key);
+      var row = _$cc(TableRow, {
+        'key': key,
+        'cols': cols,
+        'data': value,
+        'checkType': checkType,
+        'hasFixedLeft': hasFixedLeft,
+        'onClick': _this.clickRow,
+        'checked': status.checked,
+        'indeterminate': status.indeterminate,
+        'index': index,
+        'disabled': status.disabled,
+        'allDisabled': status.allDisabled,
+        'className': _$cn(rowClassName && rowClassName(value, index, key)),
+        'merge': merge,
+        'grid': getGrid(),
+        'onChangeChecked': onChangeChecked,
+        'selected': isSelected(key),
+        'spreaded': spreaded,
+        'hasChildren': hasChildren,
+        'indent': indentSize,
+        'onToggleSpreadRow': toggleSpreadRow,
+        'onBeforeUnmount': _this.resetRowStatus.onRowBeforeUnmount,
+        'offsetMap': offsetMap,
+        'animation': animation[1],
+        'draggable': draggable,
+        'draggingKey': draggingKey.value,
+        'onRowDragStart': onRowDragStart,
+        'onRowDragEnd': onRowDragEnd,
+        'onRowDragOver': onRowDragOver
+      }, key);
 
-        if ($blocks.tooltip) {
-          var content = (_$blocks['tooltip'] = function ($super) {
-            return null;
-          }, __$blocks['tooltip'] = function ($super, data) {
-            var block = $blocks['tooltip'];
+      if ($blocks.tooltip) {
+        var content = (_$blocks['tooltip'] = function ($super) {
+          return null;
+        }, __$blocks['tooltip'] = function ($super, data) {
+          var block = $blocks['tooltip'];
 
-            var callBlock = function callBlock() {
-              return _$blocks['tooltip'].call($this, $super, data);
-            };
+          var callBlock = function callBlock() {
+            return _$blocks['tooltip'].call($this, $super, data);
+          };
 
-            return block ? block.call($this, callBlock, data) : callBlock();
-          }, __$blocks['tooltip'](_$no, [value, index]));
-          row = _$cc(Tooltip, {
-            'key': key,
-            'position': tooltipPosition,
-            'container': tooltipContainer,
-            'children': row,
-            '$blocks': function ($blocks) {
-              var _$blocks = {},
-                  __$blocks = _$ex({}, $blocks);
+          return block ? block.call($this, callBlock, data) : callBlock();
+        }, __$blocks['tooltip'](_$no, [value, index]));
+        row = _$cc(Tooltip, {
+          'key': key,
+          'position': tooltipPosition,
+          'container': tooltipContainer,
+          'children': row,
+          '$blocks': function ($blocks) {
+            var _$blocks = {},
+                __$blocks = _$ex({}, $blocks);
 
-              return (_$blocks['content'] = function ($super) {
-                return content;
-              }, __$blocks['content'] = function ($super, data) {
-                var block = $blocks['content'];
+            return (_$blocks['content'] = function ($super) {
+              return content;
+            }, __$blocks['content'] = function ($super, data) {
+              var block = $blocks['content'];
 
-                var callBlock = function callBlock() {
-                  return _$blocks['content'].call($this, $super, data);
-                };
+              var callBlock = function callBlock() {
+                return _$blocks['content'].call($this, $super, data);
+              };
 
-                return block ? block.call($this, callBlock, data) : callBlock();
-              }), __$blocks;
-            }.call($this, _$em)
-          }, key);
-        }
+              return block ? block.call($this, callBlock, data) : callBlock();
+            }), __$blocks;
+          }.call($this, _$em)
+        }, key);
+      }
 
-        rows.push(row);
+      rows.push(row);
 
-        if ($blocks.expand) {
-          var expanded = isExpanded(key);
-          rows.push(_$ce(2, 'tr', _$ce(2, 'td', _$cc(Transition, _extends({}, expandAnimationCallbacks, {
-            'children': expanded ? _$ce(2, 'div', (_$blocks['expand'] = function ($super) {
-              return null;
-            }, __$blocks['expand'] = function ($super, data) {
-              var block = $blocks['expand'];
+      if ($blocks.expand) {
+        var expanded = isExpanded(key);
+        rows.push(_$ce(2, 'tr', _$ce(2, 'td', _$cc(Transition, _extends({}, expandAnimationCallbacks, {
+          'children': expanded ? _$ce(2, 'div', (_$blocks['expand'] = function ($super) {
+            return null;
+          }, __$blocks['expand'] = function ($super, data) {
+            var block = $blocks['expand'];
 
-              var callBlock = function callBlock() {
-                return _$blocks['expand'].call($this, $super, data);
-              };
+            var callBlock = function callBlock() {
+              return _$blocks['expand'].call($this, $super, data);
+            };
 
-              return block ? block.call($this, callBlock, data) : callBlock();
-            }, __$blocks['expand'](_$no, [value, index])), 0, 'k-table-expand') : undefined
-          })), 2, null, {
-            'colspan': colCount
-          }), 2, _$cn({
-            "k-expand": true,
-            'k-expanded': expanded
-          }), null, key + ".$expand"));
-        }
+            return block ? block.call($this, callBlock, data) : callBlock();
+          }, __$blocks['expand'](_$no, [value, index])), 0, 'k-table-expand') : undefined
+        })), 2, null, {
+          'colspan': colCount
+        }), 2, _$cn({
+          "k-expand": true,
+          'k-expanded': expanded
+        }), null, key + ".$expand"));
+      }
 
-        return hidden || !spreaded;
-      });
-      return rows;
-    }()
-  }), 0);
+      return hidden || !spreaded;
+    });
+    return animation[0] ? _$cc(TransitionGroup, {
+      'name': 'k-fade-in-left',
+      'move': !draggingKey.value,
+      'children': rows
+    }) : rows;
+  }(), 0);
 
   var tableWidthPx = tableWidth.value ? tableWidth.value + "px" : null;
   var _this$stickyScrollbar = this.stickyScrollbar,

package/es/components/tooltip/index.d.ts

@@ -8,6 +8,6 @@ export interface TooltipProps extends BaseTooltipProps {
 export interface TooltipBlocks extends BaseTooltipBlocks, TooltipContentBlocks {
     content: null;
 }
-declare class _Tooltip extends BaseTooltip<TooltipProps, TooltipEvents, TooltipBlocks> {
+export declare class _Tooltip extends BaseTooltip<TooltipProps, TooltipEvents, TooltipBlocks> {
 }
 export declare const Tooltip: typeof _Tooltip;

package/es/index.d.ts

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

package/es/index.js

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

package/es/site/data/components/table/demos/animation/react.js

@@ -98,6 +98,22 @@ var Demo = /*#__PURE__*/function (_React$Component) {
     }) : undefined, /*#__PURE__*/React.createElement(TableColumn, {
       key: "c",
       title: "Title 3"
+    })), /*#__PURE__*/React.createElement(Table, {
+      data: this.state.data,
+      resizable: true,
+      rowKey: function rowKey(row) {
+        return row.a;
+      },
+      animation: false
+    }, /*#__PURE__*/React.createElement(TableColumn, {
+      key: "a",
+      title: "Title 1"
+    }), this.state.isShow ? /*#__PURE__*/React.createElement(TableColumn, {
+      key: "b",
+      title: "Title 2"
+    }) : undefined, /*#__PURE__*/React.createElement(TableColumn, {
+      key: "c",
+      title: "Title 3"
     })));
   };
 

package/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/intact",
-  "version": "2.0.13-beta.0",
+  "version": "2.0.13",
   "description": "A component library written in Intact for Intact, Vue, React and Angular",
   "main": "es/index.js",
   "scripts": {