@king-design/intact 2.0.12 → 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/drawer/index.spec.ts

@@ -2,6 +2,9 @@ import BasicDemo from '~/components/drawer/demos/basic';
 import PlacementDemo from '~/components/drawer/demos/placement';
 import overlayDemo from '~/components/drawer/demos/overlay';
 import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
+import {Component} from 'intact';
+import {Drawer} from '.';
+import {Dialog} from '../dialog';
 
 describe('Drawer', () => {
     afterEach((done) => {
@@ -67,4 +70,21 @@ describe('Drawer', () => {
         await wait(500);
         expect(getElement('.k-drawer')).to.be.undefined;
     });
+
+    it('nested dialog', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Dialog, Drawer} = this;
+                <Drawer value={true}>
+                    <Dialog value={true} ref="dialog">Dialog</Dialog>
+                </Drawer>
+            `;
+            private Dialog = Dialog;
+            private Drawer = Drawer;
+        }
+        const [instance, element] = mount(Demo);
+
+        await wait();
+        expect(instance.refs.dialog.dialogRef.value.parentElement.parentElement).to.eql(document.body);
+    });
 });

package/components/dropdown/demos/trigger.md

@@ -3,11 +3,13 @@ title: 触发方式
 order: 0
 ---
 
-`Dropdown`提供了两种触发方式来弹窗菜单，`hover`悬停触发（默认），`click`点击触发。
+`Dropdown`提供了两种触发方式来弹窗菜单，`hover`悬停触发（默认），`click`点击触发，当使用`Input`组件时，还可以
+指定为`foucs`来触发。
+
 通过`trigger`属性来指定它们。
 
 ```vdt
-import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
+import {Dropdown, DropdownMenu, DropdownItem, Button, Icon, Input} from 'kpc';
 
 <div>
     <Dropdown>
@@ -31,6 +33,15 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
             <DropdownItem>item 3</DropdownItem>
         </DropdownMenu>
     </Dropdown>
+
+    <Dropdown trigger="focus">
+        <Input placeholder="focus" />
+        <DropdownMenu>
+            <DropdownItem>item 1</DropdownItem>
+            <DropdownItem>item 2</DropdownItem>
+            <DropdownItem>item 3</DropdownItem>
+        </DropdownMenu>
+    </Dropdown>
 </div>
 ```
 

package/components/dropdown/dropdown.ts

@@ -31,7 +31,7 @@ export const DROPDOWN = 'Dropdown';
 export const ROOT_DROPDOWN = 'RootDropdown';
 
 export interface DropdownProps {
-    trigger?: 'hover' | 'click' | 'contextmenu'
+    trigger?: 'hover' | 'click' | 'contextmenu' | 'focus'
     disabled?: boolean
     value?: boolean
     position?: Position | 'left' | 'bottom' | 'right' | 'top'
@@ -51,7 +51,7 @@ export interface DropdownEvents {
 export interface DropdownBlocks { }
 
 const typeDefs: Required<TypeDefs<DropdownProps>> = {
-    trigger: ['hover', 'click', 'contextmenu'],
+    trigger: ['hover', 'click', 'contextmenu', 'focus'],
     disabled: Boolean,
     value: Boolean,
     position: [Object, 'left', 'bottom', 'right', 'top'],
@@ -106,17 +106,7 @@ export class Dropdown<
 
         const [trigger, menu] = children as DropdownChildren;
         const triggerType = this.get('trigger');
-        const props: Record<string, Function> = {};
-
-        if (triggerType !== 'contextmenu') {
-            props['ev-click'] = this.onEnter;
-            if (triggerType === 'hover') {
-                props['ev-mouseenter'] = this.onEnter;
-                props['ev-mouseleave'] = this.onLeave;
-            }
-        } else {
-            props['ev-contextmenu'] = this.onContextMenu;
-        }
+        const props = this.initEventCallbacks(triggerType); 
 
         const clonedTrigger = isTextChildren(trigger) ? 
             createVNode('span', null, trigger) :
@@ -235,6 +225,29 @@ export class Dropdown<
         this.hide();
     }
 
+    private initEventCallbacks(trigger: DropdownProps['trigger']) {
+        const props: Record<string, Function> = {};
+
+        switch (trigger) {
+            case 'focus':
+                props['ev-focusin'] = this.onEnter;
+                props['ev-focusout'] = this.onLeave;
+                break;
+            case 'contextmenu':
+                props['ev-contextmenu'] = this.onContextMenu;
+                break;
+            default:
+                props['ev-click'] = this.onEnter;
+                if (trigger === 'hover') {
+                    props['ev-mouseenter'] = this.onEnter;
+                    props['ev-mouseleave'] = this.onLeave;
+                }
+                break;
+        }
+
+        return props;
+    }
+
     private callOriginalCallback(name: string, e: MouseEvent) {
         const callback = this.triggerProps[name];
         const callbackOnDropdown = this.get<Function>(name);
@@ -283,7 +296,10 @@ function useDocumentClickForDropdown(dropdown: Dropdown) {
     const [addDocumentClick, removeDocumentClick] = useDocumentClick(elementRef, (e) => {
         // case 1: if click an trigger and the trigger type is hover, ignore it
         // case 2: if right click on trigger and the trigger type is contextmenu, ignore it
+        // case 3: if click on trigger and the trigger type is focus, do nothing 
         const trigger = dropdown.get('trigger');
+        if (trigger === 'focus') return;
+
         const isHover = trigger === 'hover';
         if (isHover || trigger === 'contextmenu') {
             const triggerDom = findDomFromVNode(dropdown.$lastInput!, true) as Element;

package/components/dropdown/index.md

@@ -11,7 +11,7 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| trigger | 触发方式，`hover`为悬停触发，`click`为点击触发 | `"hover"` | `"click"` | `"hover"` |
+| trigger | 触发方式，`hover`为悬停触发，`click`为点击触发 | `"hover"` | `"click"` | `"contextmenu"` | `"focus"` | `"hover"` |
 | disabled | 是否禁用整个菜单 | `boolean` | `false` |
 | value | 是否将弹出菜单展示出来，可通过`v-model`双向绑定 | `boolean` | `false` |
 | position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom'}` |

package/components/dropdown/index.spec.ts

@@ -280,4 +280,38 @@ describe('Dropdown', () => {
         await wait();
         expect(parent.scrollTop).to.eql(item.offsetHeight * 2 - 40);
     });
+
+    it('trigger: focus', async() => {
+        class Demo extends Component {
+            static template = `
+                const {Dropdown, DropdownMenu, DropdownItem} = this;
+                <div>
+                    <Dropdown trigger="focus">
+                        <input ref="trigger" />
+                        <DropdownMenu>
+                            <DropdownItem>test1</DropdownItem>
+                            <DropdownItem>test2</DropdownItem>
+                        </DropdownMenu>
+                    </Dropdown>
+                </div>
+            `;
+            private Dropdown = Dropdown;
+            private DropdownItem = DropdownItem;
+            private DropdownMenu = DropdownMenu;
+        }
+        const [instance] = mount(Demo);
+
+        dispatchEvent(instance.refs.trigger, 'focusin');
+        await wait(500);
+        expect(getElement('.k-dropdown-menu')).to.be.exist;
+
+        // clicking anywhere should not hide menu
+        dispatchEvent(document, 'click');
+        await wait(500);
+        expect(getElement('.k-dropdown-menu')).to.be.exist;
+
+        dispatchEvent(instance.refs.trigger, 'focusout');
+        await wait(700);
+        expect(getElement('.k-dropdown-menu')).to.not.be.exist;
+    });
 });

package/components/portal.ts

@@ -14,6 +14,7 @@ import {
 import {isString} from 'intact-shared';
 import {DIALOG} from './dialog/constants';
 import type {Dialog} from './dialog';
+import {BaseDialog} from './dialog/base';
 
 export interface PortalProps {
     container?: Container
@@ -131,8 +132,13 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
             }
         }
         if (!this.container) {
-            // find the closest dialog if exists
-            this.container = parentDom.closest('.k-dialog') || document.body;
+            if (this.$senior instanceof BaseDialog) {
+                // Dialog and Drawer must be inserted into document.body
+                this.container = document.body;
+            } else {
+                // find the closest dialog if exists
+                this.container = parentDom.closest('.k-dialog') || document.body;
+            }
 
             /**
              * @FIXME: We cannot get parent ref from sub component in Vue

package/components/select/demos/format.md

@@ -34,7 +34,7 @@ import {Select, Option, Icon} from 'kpc';
             </Option>
             <b:value args="[value, label]">
                 <Icon class={value} style="vertical-align: middle;" />
-                <span class="c-middle">{value}</span>
+                <span class="middle">{value}</span>
             </b:value>
         </Select>
     </div>
@@ -67,8 +67,9 @@ import {Select, Option, Icon} from 'kpc';
     height 60px
     line-height 60px
     text-align center
-.c-middle
+.middle
     margin-left 6px
+    vertical-align middle
 .label
     display inline-block
     width 100px

package/components/select/styles.ts

@@ -58,7 +58,7 @@ const defaults = deepDefaults(
         },
         tag: {
             margin: `3px 8px 3px 0`,
-            padding: `5px 8px`,
+            padding: `3px 8px`,
             get borderRadius() { return theme.borderRadius },
             get bgColor() { return theme.color.bg },
             disabledBgColor: '#eee',
@@ -225,6 +225,7 @@ export default function makeStyles() {
         .k-select-values {
             display: inline-block;
             margin-right: -${getRight(select.tag.margin)};
+            width: 100%;
             &.k-with-values {
                 margin: 0;
             }
@@ -236,16 +237,20 @@ export default function makeStyles() {
             background: ${select.tag.bgColor};
             border-radius: ${select.tag.borderRadius};
             margin: ${select.tag.margin};
-            line-height: 1;
+            max-width: calc(100% - ${getRight(select.tag.margin)} - 1px);
+        }
+        .k-select-text {
+            max-width: calc(100% - 18px);
+            word-break: break-word;
         }
         .k-select-close {
             margin-left: ${select.tag.delete.gap};
             font-size: ${select.tag.delete.fontSize};
             color: ${select.tag.delete.color};
         }
-        .k-select-input {
-            margin-right: ${getRight(select.tag.margin)};
-        }
+        // .k-select-input {
+            // margin-right: ${getRight(select.tag.margin)};
+        // }
 
         // size
         ${sizes.map(size => {

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/timepicker/index.ts

@@ -9,6 +9,7 @@ export class Timepicker<
     Multipe extends boolean = false,
     Range extends boolean = false,
 > extends Component<TimepickerProps<Multipe, Range>, TimepickerEvents, TimepickerBlocks<Range>> {
+    static $doubleVNodes = true;
     static template(this: Timepicker) {
         const props = this.get();
         if (props.step && !props.range) {