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

package/components/table/table.vdt

@@ -17,6 +17,7 @@ import {AllCheckedStatus} from './useChecked';
 import {context as ResizableContext} from './useResizable';
 import {context as FixedColumnsContext} from './useFixedColumns';
 import {Pagination} from '../pagination';
+import {VirtualListContainer, VirtualListWrapper, VirtualListRows, VirtualListPhantom} from '../virtualList';
 
 const {
     data, children, className, fixHeader,
@@ -25,7 +26,7 @@ const {
     merge, childrenKey, indent, tooltipPosition,
     tooltipContainer, showIndeterminate, resizable,
     draggable, animation: _animation, hideHeader,
-    pagination, fixFooter, spreadArrowIndex
+    pagination, fixFooter, virtual, spreadArrowIndex
 } = this.get();
 const animation = !Array.isArray(_animation) ? [_animation, _animation] : _animation;
 const {columns, cols, maxRows, maxCols} = this.columns.getData();
@@ -121,7 +122,7 @@ const {isSelected} = this.selected;
 const {loopData, isSpreaded, toggleSpreadRow} = this.tree;
 const {onRowDragStart, onRowDragOver, onRowDragEnd, draggingKey} = this.draggable;
 const tbody = (
-    <tbody>
+    <VirtualListWrapper tagName="tbody">
         {!hasData ? 
             <tr key="table-empty">
                 <td colspan={colCount} class={`${k}-table-empty`}>
@@ -138,6 +139,7 @@ const tbody = (
                     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}
@@ -200,15 +202,15 @@ const tbody = (
                         );
                     }
 
-                    return hidden || !spreaded;
+                     return hidden || !spreaded;
                 });
 
-                return animation[0] ?
-                    <TransitionGroup name="k-fade-in-left" move={!draggingKey.value}>{rows}</TransitionGroup> :
-                    rows;
+                return animation[0] && !virtual?
+                    <TransitionGroup name="k-fade-in-left" move={!draggingKey.value}>{rows}</TransitionGroup> : 
+                    <VirtualListRows>{rows}</VirtualListRows>;
             })()
         }
-    </tbody>
+    </VirtualListWrapper>
 );
 
 let tfooter = null;
@@ -239,11 +241,13 @@ const {
 } = this.pagination;
 
 <div class={classNameObj} ref={elementRef}>
-    <div class={`${k}-table-wrapper`} style={style} ref={scrollRef}>
-        <Affix v-if={!isNull(stickHeader.value)}
+    <VirtualListContainer class={`${k}-table-wrapper`} disabled={!virtual} style={style} ref={scrollRef}>
+        <VirtualListPhantom />
+        <Affix v-if={!isNull(stickHeader.value) || fixHeader}
             top={stickHeader.value}
             exclude={excludeStickHeader}
             class={`${k}-table-affix-header`}
+            disabled={!!fixHeader}
         >
             <table ref={headRef} style={{width: tableWidthPx}}>
                 <template>{colgroup}</template>
@@ -252,11 +256,11 @@ const {
         </Affix>
         <table ref={tableRef} style={{width: tableWidthPx}}>
             <template>{colgroup}</template>
-            <template v-if={isNull(stickHeader.value)}>{thead}</template>
+            <template v-if={isNull(stickHeader.value) && !fixHeader}>{thead}</template>
             <template>{tbody}</template>
             <template v-if={$blocks.footer}>{tfooter}</template>
         </table>
-    </div>
+    </VirtualListContainer>
     <Pagination v-if={pagination}
         ref={paginationRef}
         total={data ? data.length : 0}

package/components/treeSelect/index.ts

@@ -124,7 +124,7 @@ export class TreeSelect<
 
     @bind
     private filter(data: DataItem<K>) {
-        let keywords = this.input.keywords.value;
+        let keywords = this.input.keywords.value.trim();
         if (!keywords) return true;
 
         const {filter} = this.get();

package/components/virtualList/container.ts

@@ -0,0 +1,36 @@
+import { Component, TypeDefs, findDomFromVNode } from 'intact';
+import template from './container.vdt';
+import { useConfigContext } from '../config';
+import { useVirtualRows } from './useVirtualRows';
+
+export interface VirtualListContainerProps {
+    disabled?: boolean
+}
+
+const typeDefs: Required<TypeDefs<VirtualListContainerProps>> = {
+    disabled: Boolean,
+};
+
+export class VirtualListContainer extends Component<VirtualListContainerProps> {
+    static template = template;
+    static typeDefs = typeDefs;
+
+    private config = useConfigContext();
+    private virtualRows = useVirtualRows();
+
+    // TODO
+    // public scrollToIndex(index: number, behavior: ScrollBehavior = 'auto') {
+    //     const { disabled } = this.get();
+    //     if (disabled) return;
+
+    //     let height = 0;
+    //     for (let i = 0; i < index; i++) {
+    //         height += this.virtualRows.getRowHeightByIndex(i);
+    //     }
+    //     const containerDom = findDomFromVNode(this.$lastInput!, true) as HTMLElement;
+    //     containerDom.scrollTo({
+    //         top: height,
+    //         behavior,
+    //     });
+    // }
+}

package/components/virtualList/container.vdt

@@ -0,0 +1,30 @@
+import { addStyle, getRestProps } from '../utils';
+import { makeContainerStyles } from './styles';
+import { context as VirtualRowsContext } from './useVirtualRows';
+
+const { children, className, disabled, ref } = this.get();
+const { k } = this.config;
+
+const { notifyRows, startIndex, length, getTotalHeight, translateY } = this.virtualRows;
+
+const classNameObj = {
+    [`${k}-virtual`]: !disabled,
+    [`${k}-virtual-container`]: !disabled,
+    [makeContainerStyles(k)]: !disabled,
+    [className]: className,
+}
+
+<VirtualRowsContext.Provider
+    value={{
+        disabled,
+        notifyRows,
+        getTotalHeight,
+        startIndex: startIndex.value,
+        length: length.value,
+        translateY: translateY.value,
+    }}
+>
+    <div {...getRestProps(this)} class={classNameObj} ref={ref}>
+        {children}
+    </div>
+</VirtualRowsContext.Provider>

package/components/virtualList/demos/basic.md

@@ -0,0 +1,67 @@
+---
+title: 基本用法
+order: 0
+---
+
+```vdt
+import { VirtualList } from 'kpc';
+
+<div>
+    <h3>1. 定高元素</h3>
+    <VirtualList style="height: 450px">
+        <div v-for={this.get('data')} class="fixed-height-item">
+            {$value.label}
+        </div>
+    </VirtualList>
+
+    <h3>2. 不定高元素</h3>
+    <VirtualList style="width: 200px; height: 450px;">
+        <div v-for={this.get('variableHeightData')} class="variable-height-item">
+            {$value.label}
+        </div>
+    </VirtualList>
+</div>
+```
+
+```styl
+.fixed-height-item
+    height 30px
+    border-bottom 1px solid #eee
+    padding 5px
+.variable-height-item
+    min-height 20px
+    border-bottom 1px solid #eee
+    padding 5px
+```
+
+```ts
+interface Props {
+    data: any[]
+    variableHeightData: any[]
+}
+
+export default class extends Component {
+    static template = template;
+
+    static defaults() {
+        return {
+            data: [],
+            variableHeightData: [],
+        } as Props;
+    }
+
+    init() {
+        const arr = [];
+        const variableHeightData = [];
+        for (let index = 0; index < 10000; index++) {
+            arr.push({
+                value: index,
+                label: `测试${index}`
+            });
+            const repeatPart = '行内容'.repeat(Math.floor(Math.random() * 5) + 1);
+            variableHeightData.push({ value: index, label: `不定高度项 ${index}\n${repeatPart}` });
+        }
+        this.set({data: arr, variableHeightData});
+    }
+}
+```

package/components/virtualList/demos/combined.md

@@ -0,0 +1,57 @@
+---
+title: 组合使用
+order: 1
+---
+
+在一些复杂场景中，可以通过`VirtualListContainer`、`VirtualListWrapper`等子组件组合使用, 也可通过`tagName`属性指定自定义标签
+
+```vdt
+import { VirtualListContainer, VirtualListWrapper, VirtualListPhantom, VirtualListRows } from 'kpc';
+
+<div style="height: 460px">
+    <VirtualListContainer >
+        <VirtualListPhantom />
+        <VirtualListWrapper tagName="ul">
+            <VirtualListRows>
+                <li v-for={this.get('data')} class="fixed-height-item">
+                    {$value.label}
+                </li>
+            </VirtualListRows>
+        </VirtualListWrapper>
+    </VirtualListContainer>
+</div>
+```
+
+```styl
+.fixed-height-item
+    height 30px
+    border-bottom 1px solid #eee
+    padding 5px
+```
+
+```ts
+interface Props {
+    data: any[]
+}
+
+export default class extends Component {
+    static template = template;
+
+    static defaults() {
+        return {
+            data: [],
+        } as Props;
+    }
+
+    init() {
+        const arr = [];
+        for (let index = 0; index < 10000; index++) {
+            arr.push({
+                value: index,
+                label: `测试${index}`
+            });
+        }
+        this.set({data: arr});
+    }
+}
+```

package/components/virtualList/demos/delete.md

@@ -0,0 +1,70 @@
+---
+title: 动态删除元素
+order: 2
+---
+
+```vdt
+import { VirtualList, Button } from 'kpc';
+
+<div>
+    <Button ev-click={this.removeItems}>删除前5项</Button>
+    <Button ev-click={this.removeLastItems}>删除后5项</Button>
+    <VirtualList style="height: 450px">
+        <div v-for={this.get('data')} class="fixed-height-item">
+            {$value.label}
+        </div>
+    </VirtualList>
+</div>
+```
+
+```styl
+.fixed-height-item
+    height 30px
+    border-bottom 1px solid #eee
+    padding 5px
+.k-btn
+    margin-bottom 10px
+```
+
+```ts
+import {bind} from 'kpc/components/utils';
+interface Props {
+    data: any[]
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            data: [],
+        } as Props
+    }
+
+    init() {
+        const newData = [];
+        const variableHeightData = [];
+        for (let index = 0; index < 10000; index++) {
+            newData.push({
+                value: index,
+                label: `测试${index}`
+            });
+        }
+        this.set({data: newData});
+    }
+
+    @bind
+    removeItems() {
+        const data = this.get('data').slice();
+        data.splice(0, 5);
+        this.set('data', data);
+    }
+
+    @bind
+    removeLastItems() {
+        const data = this.get('data').slice();
+        data.splice(data.length - 5);
+        this.set('data', data);
+    }
+}
+```

package/components/virtualList/index.md

@@ -0,0 +1,19 @@
+---
+title: 虚拟列表
+category: 组件
+order: 99
+sidebar: doc
+---
+
+# 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| disabled | 是否禁用虚拟化 | `boolean` | `false` |
+
+<!-- # 方法 -->
+
+<!-- | 方法名 | 说明 | 参数 | -->
+<!-- | --- | --- | --- | -->
+<!-- | scrollToIndex | 滚动到指定索引位置 | `(index: number, behavior?: 'auto' \| 'smooth') => void` | -->
+

package/components/virtualList/index.spec.ts

@@ -0,0 +1,263 @@
+import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
+import {VirtualList, VirtualListContainer, VirtualListWrapper, VirtualListPhantom} from './';
+import {Component} from 'intact';
+import BasicDemo from '~/components/virtualList/demos/basic';
+import CombinedDemo from '~/components/virtualList/demos/combined';
+
+
+describe('VirtualList', () => {
+    afterEach(() => unmount());
+
+    it('should render virtual list correctly', async () => {
+        const [instance, element] = mount(BasicDemo);
+
+        // check basic structure
+        const container = element.querySelector('.k-virtual-container')!;
+        expect(container.outerHTML).to.matchSnapshot();
+
+        const wrapper = element.querySelector('.k-virtual-wrapper')!;
+        expect(wrapper).to.exist;
+
+        // check render items is less than total
+        const items = wrapper.children;
+        expect(items.length).to.be.lessThan(100);
+    });
+
+    it('should handle scroll correctly', async () => {
+        const [instance, element] = mount(BasicDemo);
+
+        const container = element.querySelector('.k-virtual-container')!;
+        const wrapper = element.querySelector('.k-virtual-wrapper')!;
+        await wait(50);
+        container.scrollTop = 400;
+        await wait(50);
+
+        // check content is updated
+        const currentFirstItem = wrapper.firstElementChild;
+        expect(currentFirstItem!.textContent).to.not.equal('测试0');
+    });
+
+
+    it('should update total height when data changes', async () => {
+        const [instance, element] = mount(BasicDemo);
+        const [, container2] = element.querySelectorAll<HTMLElement>('.k-virtual-container');
+
+
+        const [, phantom2] = element.querySelectorAll<HTMLElement>('.k-virtual-phantom')!;
+        const initialHeight = phantom2.style.height;
+        await wait(50);
+        container2.scrollTop = 800;
+        await wait(50);
+
+        // check phantom height is updated
+        expect(phantom2.style.height).to.not.equal(initialHeight);
+    });
+
+    it('should work with custom container and wrapper', async () => {
+        const [instance, element] = mount(CombinedDemo);
+        await wait();
+
+        const container = element.querySelector('.k-virtual-container')!;
+        const wrapper = element.querySelector('.k-virtual-wrapper')!;
+
+        expect(container.outerHTML).to.matchSnapshot();
+        // check wrapper tag name
+        expect(wrapper.tagName.toLowerCase()).to.equal('ul');
+    });
+
+    it('should handle dynamic data changes correctly', async () => {
+        class Demo extends Component<{list: number[]}> {
+            static template = `
+                const VirtualList = this.VirtualList;
+                <VirtualList style="height: 300px">
+                    <div v-for={this.get('list')} key={$value}>Item {$value}</div>
+                </VirtualList>
+            `;
+
+            static defaults() {
+                return {
+                    list: Array.from({length: 100}, (_, i) => i)
+                }
+            }
+            private VirtualList = VirtualList;
+        }
+    
+        const [instance] = mount(Demo);
+        await wait();
+    
+        const container = getElement('.k-virtual-container')!;
+        const wrapper = getElement('.k-virtual-wrapper')!;
+        
+        instance.set('list', instance.get('list')!.filter(i => i % 2 === 0));
+        await wait();
+    
+        // check deleted render
+        expect(wrapper.children.length).to.be.lessThan(100);
+        expect(wrapper.firstElementChild!.textContent).to.equal('Item 0');
+    
+        container.scrollTop = 300;
+        await wait(50);
+    
+        // check scroll render
+        const middleContent = wrapper.firstElementChild!.textContent;
+        expect(middleContent).to.not.equal('Item 0');
+    
+        const newList = [...instance.get('list'), ...Array.from({length: 20}, (_, i) => i + 200)];
+        instance.set('list', newList);
+        await wait(50);
+    
+        // check add render position not change
+        expect(wrapper.firstElementChild!.textContent).to.equal(middleContent);
+    
+        const prevScrollTop = container.scrollTop;
+        container.scrollTop = prevScrollTop + 200;
+        await wait(50);
+    
+        // check scroll to new content
+        expect(wrapper.firstElementChild!.textContent).to.not.equal(middleContent);
+    });
+
+    it('should handle visible area data changes', async () => {
+        class Demo extends Component<{list: number[]}> {
+            static template = `
+                const VirtualList = this.VirtualList;
+                <VirtualList style="height: 300px">
+                    <div v-for={this.get('list')} key={$value}>Item {$value}</div>
+                </VirtualList>
+            `;
+            static defaults() {
+                return {
+                    list: Array.from({length: 100}, (_, i) => i)
+                }
+            }
+            private VirtualList = VirtualList;
+        }
+
+        const [instance, element] = mount(Demo);
+        await wait();
+
+        const container = getElement('.k-virtual-container')!;
+        const wrapper = getElement('.k-virtual-wrapper')!;
+
+        container.scrollTop = 300;
+        await wait(50);
+
+        const visibleFirstItem = wrapper.firstElementChild!.textContent;
+        const currentList = instance.get('list');
+        
+        // delete visible items
+        const visibleIndex = parseInt(visibleFirstItem!.replace('Item ', ''));
+        const newList = currentList.filter(i => i !== visibleIndex && i !== visibleIndex + 1);
+        instance.set('list', newList);
+        await wait();
+
+        // check deleted render and position
+        expect(wrapper.firstElementChild!.textContent).to.not.equal(visibleFirstItem);
+        expect(wrapper.children.length).to.be.greaterThan(0);
+    });
+
+    it('should clean up height cache when items are deleted', async () => {
+        class Demo extends Component<{list: number[]}> {
+            static template = `
+                const VirtualList = this.VirtualList;
+                <VirtualList style="height: 300px">
+                    <div v-for={this.get('list')} key={$value} style="height: 30px">Item {$value}</div>
+                </VirtualList>
+            `;
+            static defaults() {
+                return {
+                    list: Array.from({length: 100}, (_, i) => i)
+                }
+            }
+            private VirtualList = VirtualList;
+        }
+    
+        const [instance, element] = mount(Demo);
+        await wait();
+    
+        const container = getElement('.k-virtual-container')!;
+        
+        // first cache some height
+        container.scrollTop = 300;
+        await wait(50);
+    
+        // get first visible item
+        const wrapper = getElement('.k-virtual-wrapper')!;
+        const firstVisibleItem = wrapper.firstElementChild!;
+        const firstVisibleIndex = parseInt(firstVisibleItem.textContent!.replace('Item ', ''));
+    
+        // delete visible items
+        const currentList = instance.get('list');
+        const newList = currentList.filter(i => i > firstVisibleIndex + 5);
+        instance.set('list', newList);
+        await wait(50);
+    
+        // check scroll position is adjusted
+        const newFirstItem = wrapper.firstElementChild!;
+        expect(parseInt(newFirstItem.textContent!.replace('Item ', ''))).to.be.greaterThan(firstVisibleIndex);
+    
+        // scroll again to check render is normal
+        container.scrollTop += 100;
+        await wait(50);
+        
+        // check new render position is correct
+        const afterScrollItem = wrapper.firstElementChild!;
+        expect(afterScrollItem.textContent).to.not.equal(newFirstItem.textContent);
+    });
+
+    it('should update total height when deleting last items', async () => {
+        class Demo extends Component<{list: number[]}> {
+            static template = `
+                const VirtualList = this.VirtualList;
+                <VirtualList style="height: 300px">
+                    <div v-for={this.get('list')} key={$value} style="height: 30px">Item {$value}</div>
+                </VirtualList>
+            `;
+            static defaults() {
+                return {
+                    list: Array.from({length: 100}, (_, i) => i)
+                }
+            }
+            private VirtualList = VirtualList;
+        }
+    
+        const [instance, element] = mount(Demo);
+        await wait();
+    
+        const container = getElement('.k-virtual-container')!;
+        const phantom = getElement('.k-virtual-phantom')!;
+        
+        // record initial total height
+        const initialHeight = parseInt(phantom.style.height);
+        
+        // scroll to cache height
+        container.scrollTop = initialHeight;
+        await wait(50);
+        
+        const wrapper = getElement('.k-virtual-wrapper')!;
+        const lastVisibleItem = wrapper.lastElementChild!;
+        const lastVisibleIndex = parseInt(lastVisibleItem.textContent!.replace('Item ', ''));
+    
+        // delete last 5 items
+        const currentList = instance.get('list');
+        const newList = currentList.slice(0, -5);
+        instance.set('list', newList);
+        await wait(50);
+    
+        // check total height is updated
+        const finalHeight = parseInt(phantom.style.height);
+        expect(finalHeight).to.equal(initialHeight - 5 * 30);
+
+        // check new last item is at bottom
+        const newLastItem = wrapper.lastElementChild!;
+        const newLastIndex = parseInt(newLastItem.textContent!.replace('Item ', ''));
+        expect(newLastIndex).to.equal(94);
+        
+        // check new last item is at bottom
+        const containerRect = container.getBoundingClientRect();
+        const lastItemRect = newLastItem.getBoundingClientRect();
+        const isAtBottom = Math.abs((containerRect.bottom - lastItemRect.bottom)) <= 1; 
+        expect(isAtBottom).to.be.true;
+    });
+});
+

package/components/virtualList/index.ts

@@ -0,0 +1,5 @@
+export * from './container';
+export * from './wrapper';
+export * from './rows';
+export * from './virtual';
+export * from './phantom';

package/components/virtualList/phantom.ts

@@ -0,0 +1,18 @@
+import { Component, TypeDefs } from 'intact';
+import template from './phantom.vdt';
+import { useConfigContext } from '../config';
+
+export interface VirtualListPhantomProps {
+    tagName?: string; 
+}
+
+const typeDefs: Required<TypeDefs<VirtualListPhantomProps>> = {
+    tagName: String,
+};
+
+export class VirtualListPhantom extends Component<VirtualListPhantomProps> {
+    static template = template;
+    static typeDefs = typeDefs;
+
+    private config = useConfigContext();
+}