@king-design/intact 3.5.1-beta.0 → 3.5.2

package/components/breadcrumb/demos/separator.md

@@ -10,16 +10,16 @@ import {Breadcrumb, BreadcrumbItem, Icon} from 'kpc';
 
 <Breadcrumb>
     <b:separator>
-        <Icon class="ion-ios-arrow-thin-right separator" size="large" />
+        <Icon class="ion-ios-arrow-thin-right separator" />
     </b:separator>
     <BreadcrumbItem to="/">
-        <Icon class="ion-home" /> item 1
+        <Icon class="ion-home" size="small"/> item 1
     </BreadcrumbItem>
     <BreadcrumbItem to="/components/breadcrumb/">
-        <Icon class="ion-earth" /> item 2
+        <Icon class="ion-earth"  size="small"/> item 2
     </BreadcrumbItem>
     <BreadcrumbItem>
-        <Icon class="ion-planet" /> item 3
+        <Icon class="ion-planet" size="small"/> item 3
     </BreadcrumbItem>
 </Breadcrumb>
 ```

package/components/breadcrumb/index.vdt

@@ -15,7 +15,7 @@ const classNameObj = {
 const separatorVNode = (
     <span class={`${k}-breadcrumb-separator`}>
         <template v-if={!$blocks.separator && !separator}>
-            <Icon class="k-icon-right" />
+            <Icon class="k-icon-right" size="small"/>
         </template>
         <b:separator v-else>{separator}</b:separator>
     </span>

package/components/breadcrumb/styles.ts

@@ -5,12 +5,12 @@ import '../../styles/global';
 import { cache } from '../utils';
 
 const defaults = {
-    fontSize: '14px',
+    fontSize: '12px',
     get color() { return theme.color.lightBlack },
     get hoverColor() {return theme.color.primary },
     gap: '6px',
     activeFontWeight: 'normal',
-    activeColor: `#262626`,
+    get activeColor() { return theme.color.title },
 };
 
 let breadcrumb: typeof defaults;
@@ -22,6 +22,7 @@ setDefault(() => {
 export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         font-size: ${breadcrumb.fontSize};
+        line-height: 12px;
         display: flex;
         align-items: center;
         .${k}-breadcrumb-item {

package/components/select/index.spec.ts

@@ -328,6 +328,40 @@ describe('Select', () => {
         // expect(clear).to.be.null;
     });
 
+    it('should handle async data correctly', async () => {
+        class Demo extends Component<{list: number[]}> {
+            static template = `
+                const {Select, Option} = this;
+                <Select v-model="day" virtual>
+                    <Option v-for={this.get('list')} value={$value}>
+                        {$value}
+                    </Option>
+                </Select>
+            `;
+            static defaults() {
+                return {
+                    list: []
+                }
+            }
+            private Select = Select;
+            private Option = Option;
+        }
+        const [instance, element] = mount(Demo);
+        await wait();
+    
+        // simulate async data loading
+        instance.set('list', Array.from({length: 100}, (_, i) => i));
+        await wait(100);
+
+        element.click();
+        await wait();
+        const wrapper = getElement('.k-virtual-wrapper');
+        const phantom = getElement('.k-virtual-phantom');
+
+        expect(wrapper!.children.length).to.be.equal(10);
+        expect(phantom!.style.height).to.be.equal('3000px');
+    });
+
     // it('should trigger change event correctly', async () => {
         // const spy = sinon.spy();
 

package/components/table/table.vdt

@@ -71,7 +71,8 @@ const hasData = data && data.length;
 
 const hasFixedLeft = getHasFixedLeft();
 const {getAllCheckedStatus, toggleCheckedAll, getAllStatus, onChangeChecked} = this.checked;
-const allCheckedStatus = getAllCheckedStatus(); 
+const allCheckedStatus = getAllCheckedStatus();
+const allStatus = getAllStatus();
 const thead = hideHeader ? null : (
     <TableContext.Provider value={{checkType, lastCellKey, lastCellStyle}}>
         <GroupContext.Provider value={{group, onChange: this.onChangeGroup}}>
@@ -93,7 +94,7 @@ const thead = hideHeader ? null : (
                                                 value={allCheckedStatus === AllCheckedStatus.All}
                                                 indeterminate={showIndeterminate && allCheckedStatus == AllCheckedStatus.Indeterminate}
                                                 ev-$change:value={toggleCheckedAll}
-                                                disabled={!hasData}
+                                                disabled={!hasData || allStatus.every(_it => _it.disabled)}
                                             />
                                         </th>
                                         {$value}
@@ -114,7 +115,6 @@ const thead = hideHeader ? null : (
 
 const {getAllKeys} = this.disableRow;
 const {getGrid} = this.merge;
-const allStatus = getAllStatus();
 const allKeys = getAllKeys();
 const colCount = maxCols + (checkType !== 'none' ? 1 : 0);
 const {isExpanded} = this.expandable;

package/components/tree/useChecked.ts

@@ -3,6 +3,7 @@ import {useState} from '../../hooks/useState';
 import {useReceive} from '../../hooks/useReceive';
 import type {Tree} from './';
 import type {Node, DataItem} from './useNodes';
+import { isEqualArray } from '../utils';
 
 export function useChecked(getNodes: () => Node<Key>[]) {
     const instance = useInstance() as Tree;
@@ -38,9 +39,7 @@ export function useChecked(getNodes: () => Node<Key>[]) {
                 }
 
                 node.checked = checked;
-                if (checked) {
-                    node.indeterminate = false;
-                }
+                node.indeterminate = false;
 
                 if (shouldUpdateCheckedKeys) {
                     updateCheckedKeys(node);
@@ -56,6 +55,14 @@ export function useChecked(getNodes: () => Node<Key>[]) {
         needRecheckNodes.forEach(node => {
             updateUpward(node);
         });
+        
+        if (instance.get('checkbox')) {
+            const oldCheckedKeys = instance.get('checkedKeys');
+            const newCheckedKeys = Array.from(checkedKeys);
+            if (!isEqualArray(oldCheckedKeys, newCheckedKeys)) {
+                instance.set('checkedKeys', newCheckedKeys);
+            }
+        }
     }
 
     function updateCheckedKeys(node: Node<Key>) {
@@ -67,7 +74,7 @@ export function useChecked(getNodes: () => Node<Key>[]) {
     }
 
     function toggle(node: Node<Key>) {
-        const uncorrelated = instance.get('uncorrelated');
+        // const uncorrelated = instance.get('uncorrelated');
         updateDownward(node, !node.checked);
         updateUpward(node.parent);
 

package/components/treeSelect/index.spec.ts

@@ -18,10 +18,22 @@ describe('TreeSelect', () => {
         const dropdown = getElement('.k-tree-select-menu')!;
         expect(dropdown.innerHTML).to.matchSnapshot();
 
-        (dropdown.querySelector('.k-tree-text') as HTMLElement).click();
+        const texts = dropdown.querySelectorAll('.k-tree-text');
+        const text1 = texts[0] as HTMLElement;
+        const text111 = texts[2] as HTMLElement;
+        text1.click();
+        await wait();
         expect(instance.get('value')).to.eql('1');
 
         await wait(500);
+
+        element.click();
+        text111.click();
+        await wait();
+        expect(instance.get('value')).to.eql('1.1.1');
+
+        await wait(500);
+
         expect(getElement('.k-tree-select-menu')).to.be.undefined;
     });
 
@@ -110,4 +122,51 @@ describe('TreeSelect', () => {
         await wait(500);
         expect(element.querySelector('.k-form-error')).not.to.be.null;
     });
+
+    it('should handle parent node correctly when all children are checked initially', async () => {
+        const [instance, element] = mount(CheckboxDemo);
+    
+        // init values
+        instance.set('values', ['2.1.1', '2.1.2']);
+        await wait();
+    
+        // because 2.2 is disabled, so it will select the outermost parent node 2
+        expect(instance.get('values')).to.eql(['2']);
+    
+        element.click();
+        await wait();
+        const dropdown = getElement('.k-tree-select-menu')!;
+        // verify parent node is selected
+        const parentCheckboxes = dropdown.querySelectorAll('.k-checkbox');
+        expect(parentCheckboxes[3].classList.contains('k-checked')).to.be.true; // First floor-2
+        expect(parentCheckboxes[4].classList.contains('k-checked')).to.be.true; // Second floor-2.1
+    });
+    
+    it('should clear parent node state when setting values to empty array', async () => {
+        const [instance, element] = mount(CheckboxDemo);
+    
+        // select a parent node first
+        instance.set('values', ['2.1.1']);
+        await wait();
+    
+        element.click();
+        await wait();
+        let dropdown = getElement('.k-tree-select-menu')!;
+        // verify related nodes are selected
+        const checkboxes = dropdown.querySelectorAll('.k-checkbox');
+        expect(checkboxes[3].classList.contains('k-indeterminate')).to.be.true; // First floor-2
+        expect(checkboxes[4].classList.contains('k-indeterminate')).to.be.true; // Second floor-2.1
+        expect(checkboxes[5].classList.contains('k-checkbox')).to.be.true; // Third floor-2.1.1
+        // expect(checkboxes[6].classList.contains('k-checked')).to.be.true; // Third floor-2.1.2
+    
+        // set to empty array
+        instance.set('values', []);
+        await wait();
+    
+        // verify all nodes are cleared selected state
+        checkboxes.forEach(checkbox => {
+            expect(checkbox.classList.contains('k-checked')).to.be.false;
+            expect(checkbox.classList.contains('k-indeterminate')).to.be.false;
+        });
+    });
 });

package/components/treeSelect/useValue.ts

@@ -1,9 +1,10 @@
-import {useInstance, Key, createRef} from 'intact';
+import {useInstance, Key, createRef, nextTick} from 'intact';
 import type {TreeSelect} from './';
 import {useState} from '../../hooks/useState';
 import {isNullOrUndefined} from 'intact-shared';
 import type {Tree} from '../tree';
 import type {Node} from '../tree/useNodes';
+import { isEqualArray } from '../utils';
 
 export function useValue() {
     const instance = useInstance() as TreeSelect<Key, boolean, boolean>;
@@ -23,10 +24,12 @@ export function useValue() {
         checkedKeys.set(v as Key[]);
     }
 
-    function onChangeCheckedKeys() {
+    function onChangeCheckedKeys(allKeys: Key[]) {
+        checkedKeys.set(allKeys);
         const keys = getAllCheckedKeys();
-        instance.set('value', keys);
-        checkedKeys.set(keys);
+        if (!isEqualArray(keys, instance.get('value'))) {
+            instance.set('value', keys);
+        }
     }
 
     function getAllCheckedKeys() {

package/components/virtualList/index.spec.ts

@@ -13,6 +13,7 @@ describe('VirtualList', () => {
 
         // check basic structure
         const container = element.querySelector('.k-virtual-container')!;
+        await wait();
         expect(container.outerHTML).to.matchSnapshot();
 
         const wrapper = element.querySelector('.k-virtual-wrapper')!;
@@ -259,5 +260,165 @@ describe('VirtualList', () => {
         const isAtBottom = Math.abs((containerRect.bottom - lastItemRect.bottom)) <= 1; 
         expect(isAtBottom).to.be.true;
     });
+
+    it('should handle async data correctly', async () => {
+        class AsyncDemo 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: []
+                }
+            }
+            private VirtualList = VirtualList;
+        }
+    
+        const [instance] = mount(AsyncDemo);
+        await wait();
+    
+        const container = getElement('.k-virtual-container')!;
+        const wrapper = getElement('.k-virtual-wrapper')!;
+        const phantom = getElement('.k-virtual-phantom')!;
+    
+        // check initial state
+        expect(wrapper.children.length).to.equal(0);
+        expect(phantom.style.height).to.equal('0px');
+    
+        // simulate async data loading
+        instance.set('list', Array.from({length: 100}, (_, i) => i));
+        await wait(50);
+    
+        expect(wrapper.children.length).to.be.equal(23);
+        expect(phantom.style.height).to.be.equal('1800px');
+        
+        // check render content
+        expect(wrapper.firstElementChild!.textContent).to.equal('Item 0');
+    });
+    
+    it('should handle empty data and re-adding data correctly', async () => {
+        class EmptyDemo 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(EmptyDemo);
+        await wait();
+    
+        const container = getElement('.k-virtual-container')!;
+        const wrapper = getElement('.k-virtual-wrapper')!;
+        const phantom = getElement('.k-virtual-phantom')!;
+    
+        // record initial state
+        const initialHeight = phantom.style.height;
+        const initialChildrenCount = wrapper.children.length;
+    
+        // clear data
+        instance.set('list', []);
+        await wait(50);
+    
+        // check empty state
+        expect(wrapper.children.length).to.equal(0);
+        expect(phantom.style.height).to.equal('0px');
+    
+        // re-add data
+        instance.set('list', Array.from({length: 50}, (_, i) => i));
+        await wait(50);
+    
+        // check re-add data state
+        expect(wrapper.children.length).to.be.equal(23);
+        expect(parseInt(phantom.style.height)).to.be.equal(900);
+        expect(wrapper.firstElementChild!.textContent).to.equal('Item 0');
+    
+        // 滚动测试
+        // container.scrollTop = 100;
+        // await wait(50);
+    
+        // // 检查滚动后的渲染是否正确
+        // expect(wrapper.firstElementChild!.textContent).to.not.equal('Item 0');
+    });
+
+    it('should handle extreme height differences correctly', async () => {
+        class ExtremeHeightDemo extends Component<{list: number[]}> {
+            static template = `
+                const VirtualList = this.VirtualList;
+                <VirtualList style="height: 300px">
+                    <div v-for={this.get('list')} 
+                        key={$value} 
+                        style={$value < 5 ? 'height: 100px' : 'height: 30px'}
+                    >
+                        Item {$value}
+                    </div>
+                </VirtualList>
+            `;
+            static defaults() {
+                return {
+                    list: Array.from({length: 100}, (_, i) => i)
+                }
+            }
+            private VirtualList = VirtualList;
+        }
+    
+        const [instance] = mount(ExtremeHeightDemo);
+        await wait();
+    
+        const container = getElement('.k-virtual-container')!;
+        const wrapper = getElement('.k-virtual-wrapper')!;
+        const phantom = getElement('.k-virtual-phantom')!;
+    
+        const initialItems = wrapper.children;
+        const initialLength = initialItems.length;
+        
+        // check first 5 elements height
+        const firstItem = initialItems[0] as HTMLElement;
+        expect(firstItem.offsetHeight).to.equal(100);
+    
+        // record initial average height (calculate by total height and render count)
+        const initialTotalHeight = parseInt(phantom.style.height);
+        const initialAvgHeight = initialTotalHeight / 100;
+        expect(initialAvgHeight).to.be.greaterThan(30);
+    
+        // scroll to small height area
+        container.scrollTop = 800;
+        await wait(50);
+    
+        // check new render elements
+        const newItems = wrapper.children;
+        const newLength = newItems.length;
+        const firstNewItem = newItems[0] as HTMLElement;
+        
+        // check
+        // new render elements should be 30px height
+        expect(firstNewItem.offsetHeight).to.equal(30);
+        
+        // because average height is smaller, render elements count should be more
+        expect(newLength).to.be.greaterThan(initialLength);
+    
+        // check scroll position is correct
+        const firstVisibleIndex = parseInt(firstNewItem.textContent!.replace('Item ', ''));
+        expect(firstVisibleIndex).to.be.greaterThan(5);
+    
+        container.scrollTop = 1200;
+        await wait();
+    
+        const finalItems = wrapper.children;
+        const finalFirstItem = finalItems[0] as HTMLElement;
+        expect(finalFirstItem.offsetHeight).to.equal(30);
+        expect(finalItems.length).to.equal(newLength); // render count should be stable
+    });
 });
 
+

package/components/virtualList/rows.vdt

@@ -8,11 +8,12 @@ const rows = this.rows;
 <VirtualRowsContext.Consumer>
     {({ notifyRows, startIndex, length, disabled }) => {
         if (!disabled) {
-            children = rows.value.slice(startIndex, startIndex + length); 
             notifyRows(rows.value);
+            children = rows.value.slice(startIndex, startIndex + length);
         }
 
         if (isNullOrUndefined(tagName)) {
+            if (!children.length) return;
             return createFragment(children, 8 /* ChildrenTypes.HasKeyedChildren */);
         }
         return createVNode(tagName, null, children);

package/components/virtualList/useRows.ts

@@ -1,4 +1,4 @@
-import { useInstance, VNode, createRef, createFragment } from 'intact';
+import { useInstance, VNode, createRef, createFragment, Children, isText } from 'intact';
 import { VirtualListRows } from './rows';
 
 export function useRows() {
@@ -12,11 +12,25 @@ export function useRows() {
         // convert to array if it has only one child
         const childrenType = vNode.childrenType;
         if (childrenType & 2 /* ChildrenTypes.HasVNodeChildren */) {
-            rows.value = [vNode.children as unknown as VNode];
+            const children = vNode.children as unknown as VNode;
+            if (isText(children)) {
+                // ignore void and text vnode
+                rows.value = [];
+            } else {
+                rows.value = [children];
+            }
         } else if (childrenType & 1 /* ChildrenTypes.HasInvalidChildren */) {
             rows.value = [];
         } else {
             rows.value = vNode.children as VNode[];
+
+            if (process.env.NODE_ENV !== 'production') {
+                rows.value.forEach(row => {
+                    if (isText(row)) {
+                        console.warn('VirtualList: Text node can not been used as children.');
+                    }
+                });
+            }
         }
     });
 

package/components/virtualList/useVirtualRows.ts

@@ -22,46 +22,51 @@ export function useVirtualRows() {
     const length = useState(MIN_LENGTH);
 
     let calculatedHeight = 0;
-    let rowAvgHeight = 0;
+    let rowAvgHeight = 30;
     let rows: VNode[] = [];
     function notifyRows(_rows: VNode[]) { 
+        if (_rows === rows) return;
+
         const oldRows = rows;
         const oldLength = rows.length;
         rows = _rows;
+
         // diff oldRows, newRows
-        const newKeys = new Set(_rows.map(row => row.key));
-
-        for (let i = 0; i < oldLength; i++) {
-            const oldKey = oldRows[i].key!;
-            if (!newKeys.has(oldKey)) {
-                const height = rowsHeightMap.get(oldKey);
-                if (!isNullOrUndefined(height)) {
-                    calculatedHeight -= height;
-                    rowsHeightMap.delete(oldKey);
+        if (!_rows.length) {
+            calculatedHeight = 0;
+            rowsHeightMap.clear();
+        } else {
+            const newKeys = new Set(_rows.map(row => row.key));
+
+            for (let i = 0; i < oldLength; i++) {
+                const oldKey = oldRows[i].key!;
+                if (!newKeys.has(oldKey)) {
+                    const height = rowsHeightMap.get(oldKey);
+                    if (!isNullOrUndefined(height)) {
+                        calculatedHeight -= height;
+                        rowsHeightMap.delete(oldKey);
+                    }
                 }
             }
         }
-
-        // update rowAvgHeight
-        if (rowsHeightMap.size === 0) {
-            rowAvgHeight = calculatedHeight = 0;
-        } else {
-            rowAvgHeight = calculatedHeight / rowsHeightMap.size;
-        }
-
+    
         if (_rows.length < oldLength) {
             const maxStartIndex = Math.max(0, _rows.length - length.value);
             if (startIndex.value > maxStartIndex) {
                 startIndex.set(maxStartIndex);
-                // 重新计算位置
                 nextTick(() => {
                     handleScroll();
                 });
             }
         }
+
+        instance.forceUpdate(() => {
+            calculateRowsHeight();
+        });
     }
 
     function calculateRowsHeight() {
+        if (!rows.length) return;
         for (
             let i = startIndex.value;
             i < startIndex.value + length.value && i < rows.length;
@@ -71,7 +76,7 @@ export function useVirtualRows() {
             const key = row.key!;
             if (!rowsHeightMap.has(key)) {
                 const rowDom = findDomFromVNode(row, true) as HTMLElement;
-                const height = rowDom.offsetHeight;
+                const height = rowDom.offsetHeight || rowAvgHeight;
                 rowsHeightMap.set(key, height); 
                 calculatedHeight += height;
             }
@@ -79,6 +84,10 @@ export function useVirtualRows() {
 
         // use the average height to estimate the row height
         rowAvgHeight = calculatedHeight / rowsHeightMap.size;
+
+        const containerHeight = containerDom.offsetHeight;
+        // calculate the length of rows we should render
+        length.set(Math.max(Math.ceil(containerHeight / rowAvgHeight) + BUFFER_SIZE * 2, MIN_LENGTH));
     }
 
     watchState(startIndex, () => {
@@ -89,13 +98,8 @@ export function useVirtualRows() {
     onMounted(() => {
         // get contains height
         containerDom = findDomFromVNode(instance.$lastInput!, true) as HTMLElement;
-        const containerHeight = containerDom.offsetHeight;
 
         calculateRowsHeight();
-
-        // calculate the length of rows we should render
-        length.set(Math.max(Math.ceil(containerHeight / rowAvgHeight) + BUFFER_SIZE * 2, MIN_LENGTH));
-
         containerDom.addEventListener('scroll', handleScroll);
     });
 

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

@@ -6,7 +6,8 @@ import { BreadcrumbItem } from './item';
 import { makeStyles } from './styles';
 import { Icon } from '../icon';
 var _$tmp0 = {
-  'className': 'k-icon-right'
+  'className': 'k-icon-right',
+  'size': 'small'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;

package/es/components/breadcrumb/styles.js

@@ -4,7 +4,7 @@ import { theme, setDefault } from '../../styles/theme';
 import '../../styles/global';
 import { cache } from '../utils';
 var defaults = {
-  fontSize: '14px',
+  fontSize: '12px',
   get color() {
     return theme.color.lightBlack;
   },
@@ -13,7 +13,9 @@ var defaults = {
   },
   gap: '6px',
   activeFontWeight: 'normal',
-  activeColor: "#262626"
+  get activeColor() {
+    return theme.color.title;
+  }
 };
 var breadcrumb;
 setDefault(function () {
@@ -23,5 +25,5 @@ setDefault(function () {
   makeStyles == null || makeStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("font-size:", breadcrumb.fontSize, ";display:flex;align-items:center;.", k, "-breadcrumb-item{&:last-of-type .", k, "-breadcrumb-link{font-weight:", breadcrumb.activeFontWeight, ";color:", breadcrumb.activeColor, ";}}.", k, "-breadcrumb-link,.", k, "-breadcrumb-link a{color:", breadcrumb.color, ";}a.", k, "-breadcrumb-link,.", k, "-breadcrumb-link a{cursor:pointer;&:hover{color:", breadcrumb.hoverColor, ";}}.", k, "-breadcrumb-separator{margin:0 ", breadcrumb.gap, ";}");
+  return /*#__PURE__*/css("font-size:", breadcrumb.fontSize, ";line-height:12px;display:flex;align-items:center;.", k, "-breadcrumb-item{&:last-of-type .", k, "-breadcrumb-link{font-weight:", breadcrumb.activeFontWeight, ";color:", breadcrumb.activeColor, ";}}.", k, "-breadcrumb-link,.", k, "-breadcrumb-link a{color:", breadcrumb.color, ";}a.", k, "-breadcrumb-link,.", k, "-breadcrumb-link a{cursor:pointer;&:hover{color:", breadcrumb.hoverColor, ";}}.", k, "-breadcrumb-separator{margin:0 ", breadcrumb.gap, ";}");
 });