@king-design/intact 3.1.1-beta.3 → 3.1.2

package/components/table/demos/groupHeader.md

@@ -10,22 +10,22 @@ order: 12
 ```vdt
 import {Table, TableColumn} from 'kpc';
 
-<Table data={this.get('data')} type="grid" resizable stickHeader="64">
-    <TableColumn title="Weekday" key='weekday' fixed="left" width="100" />
+<Table data={this.get('data')} type="grid" resizable stickHeader="64" minColWidth={100}>
+    <TableColumn title="Weekday" key='weekday' fixed="left" />
     <TableColumn title="Forenoon" key="forenoon">
-        <TableColumn title="Time" key="forenoonTime" fixed="left" width="100" />
+        <TableColumn title="Time" key="forenoonTime" fixed="left" />
         <TableColumn title="Classes" key="classes">
-            <TableColumn title="Class 1" key='class1' width="100" />
-            <TableColumn title="Class 2" key='class2' width="100" />
-            <TableColumn title="Class 3" key='class3' width="100" />
-            <TableColumn title="Class 4" key='class4' width="100" />
+            <TableColumn title="Class 1" key='class1' />
+            <TableColumn title="Class 2" key='class2' />
+            <TableColumn title="Class 3" key='class3' />
+            <TableColumn title="Class 4" key='class4' />
         </TableColumn>
     </TableColumn>
     <TableColumn title="Afternoon" key="afternoon">
-        <TableColumn title="Time" key="afternoonTime" width="100" />
-        <TableColumn title="Class 5" key='class5' width="100" />
-        <TableColumn title="Class 6" key='class6' width="100" fixed="right" />
-        <TableColumn title="Class 7" key='class7' fixed="right" width="100" />
+        <TableColumn title="Time" key="afternoonTime" />
+        <TableColumn title="Class 5" key='class5' />
+        <TableColumn title="Class 6" key='class6' fixed="right" />
+        <TableColumn title="Class 7" key='class7' fixed="right" />
     </TableColumn>
 </Table>
 ```

package/components/table/demos/scheme.md

@@ -11,7 +11,7 @@ order: 1
 ```vdt
 import {Table, TableColumn} from 'kpc';
 
-<Table data={this.get('data')}>
+<Table data={this.get('data')} resizable>
     <TableColumn title='定义该列单元格内容' key='a'>
         <b:template args="[data, index]">
             <a>{data.a}</a>

package/components/table/index.spec.ts

@@ -238,7 +238,7 @@ describe('Table', () => {
         expect(instance.get('multipleGroup')).to.eql({status: []});
 
         // click confirm
-        const [reset, confirm] = dropdown2.querySelectorAll<HTMLElement>('.k-table-group-footer .k-btn');
+        const [checkAll, reset, confirm] = dropdown2.querySelectorAll<HTMLElement>('.k-table-group-footer .k-btn');
         confirm.click();
         await wait();
         expect(instance.get('multipleGroup')).to.eql({status: ['active', 'stopped']});
@@ -251,10 +251,15 @@ describe('Table', () => {
         reset.click();
         await wait();
         expect(dropdown2.innerHTML).to.matchSnapshot();
-        confirm.click();
-        await wait();
         expect(instance.get('multipleGroup')).to.eql({status: []});
 
+        // click checkAll
+        dispatchEvent(icon2, 'click');
+        await wait();
+        checkAll.click();
+        await wait();
+        expect(dropdown2.querySelectorAll('.k-checkbox.k-checked')).to.length(2);
+
         // update group
         instance.set('statusGroup', [{label: 'label', value: 'value'}]);
         dispatchEvent(icon, 'click');

package/components/table/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     get transition() { return theme.transition.large },
@@ -72,9 +73,11 @@ const aligns = ['left', 'right', 'center'];
 let table: typeof defaults;
 setDefault(() => {
     table = deepDefaults(theme, {table: defaults}).table;
+    makeStyles?.clearCache();
+    makeGroupMenuStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         font-size: ${table.fontSize};
         color: ${table.color};
@@ -90,10 +93,10 @@ export function makeStyles(k: string) {
             // border-collapse: collapse;
             border-spacing: 0;
             table-layout: fixed;
-            td, 
-            th {
-                transition: all ${table.transition};  
-            }
+            // td, 
+            // th {
+                // transition: all ${table.transition};  
+            // }
         }
 
         // thead
@@ -369,9 +372,9 @@ export function makeStyles(k: string) {
             }
         }
     `;
-}
+});
 
-export function makeGroupMenuStyles(k: string) {
+export const makeGroupMenuStyles = cache(function makeGroupMenuStyles(k: string) {
     return css`
         min-width: ${table.group.menuMinWidth} !important;
         .${k}-dropdown-item.${k}-active {
@@ -394,4 +397,4 @@ export function makeGroupMenuStyles(k: string) {
             }
         }
     `
-}
+});

package/components/table/table.vdt

@@ -29,7 +29,7 @@ const {
 } = 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 {scrollPosition, hasFixed, getHasFixedLeft, offsetMap} = this.fixedColumns;
 const {scrollRef} = this.scroll;
 const {stickHeader, excludeStickHeader, elementRef, headRef} = this.stickyHeader;
 const { k } = this.config;
@@ -66,13 +66,12 @@ const hasData = data && data.length;
 const hasFixedLeft = getHasFixedLeft();
 const {getAllCheckedStatus, toggleCheckedAll, getAllStatus, onChangeChecked} = this.checked;
 const allCheckedStatus = getAllCheckedStatus(); 
-const offsetMap = getOffsetMap();
 const thead = hideHeader ? null : (
     <TableContext.Provider value={checkType}>
         <GroupContext.Provider value={{group, onChange: this.onChangeGroup}}>
             <SortableContext.Provider value={{sort, onChange: this.sortable.onChange}}>
                 <ResizableContext.Provider value={{resizable, onStart}}>
-                    <FixedColumnsContext.Provider value={offsetMap}>
+                    <FixedColumnsContext.Provider value={offsetMap.value}>
                         <thead>
                             <tr v-for={columns}>
                                 {(() => {
@@ -158,7 +157,7 @@ const tbody = (
                         indent={indentSize}
                         onToggleSpreadRow={toggleSpreadRow}
                         onBeforeUnmount={this.resetRowStatus.onRowBeforeUnmount}
-                        offsetMap={offsetMap}
+                        offsetMap={offsetMap.value}
                         animation={animation[1]}
 
                         draggable={draggable}

package/components/table/useColumns.ts

@@ -51,6 +51,7 @@ export function useColumns() {
                 ret = true;
 
                 const clonedVNode = directClone(vNode) as VNodeComponentClass<TableColumn>;
+                if (currentVNode) (currentVNode.props as any).nextVNode = clonedVNode;
                 const props = {
                     ...clonedVNode.props!,
                     cols: 0,

package/components/table/useFixedColumns.ts

@@ -2,21 +2,19 @@ import {
     useInstance,
     VNodeComponentClass,
     Props,
-    directClone,
-    onMounted,
-    onUnmounted,
-    RefObject,
     Key,
+    findDomFromVNode,
+    nextTick,
 } from 'intact';
 import {TableColumn, TableColumnProps} from './column';
 import {useState} from '../../hooks/useState';
 import {cx} from '@emotion/css';
-import type {TableProps, TableRowKey} from './table';
-import {isNullOrUndefined, isString, error} from 'intact-shared';
-import {throttle} from '../utils';
+import type {TableProps, TableRowKey, Table} from './table';
 import {State, watchState} from '../../hooks/useState';
 import {createContext} from '../context';
 import type {useScroll} from './useScroll';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { isEqualObject } from '../utils';
 
 type ScrollPosition = 'left' | 'middle' | 'right';
 type FixedInfo = {
@@ -31,48 +29,35 @@ export function useFixedColumns(
     {scrollRef, callbacks}: ReturnType<typeof useScroll>,
     widthMap: State<Record<TableRowKey, number>>, 
 ) {
-    const instance = useInstance()!;
+    const instance = useInstance() as Table;
     const scrollPosition = useState<ScrollPosition | null>(null);
     const hasFixed = useState<boolean>(false);
+    const offsetMap = useState<Record<Key, number>>({}, isEqualObject);
     let hasFixedLeft = false;
     let hasFixedRight = false;
-    let offsetMap: Record<Key, number> = {};
 
     callbacks.push(setScrollPosition);
 
-    instance.on('$receive:children', handleFixedColumns);
-    watchState(widthMap, () => {
-        handleFixedColumns();
-        updateScrollPositionOnResize();
-    });
-    
-    const throttleUpdate = throttle(() => {
-        if (instance.$unmounted) return;
-        updateScrollPositionOnResize();
-    }, 100);
+    instance.watch('children', handleFixedColumnsAndUpdate, { presented: true });
+    watchState(widthMap, () => nextTick(handleFixedColumnsAndUpdate));
+    useResizeObserver(scrollRef, handleFixedColumnsAndUpdate, true);
 
-    onMounted(() => {
+    function handleFixedColumnsAndUpdate() {
+        handleFixedColumns();
         updateScrollPositionOnResize();
-        window.addEventListener('resize', throttleUpdate);
-    });
-
-    onUnmounted(() => {
-        window.removeEventListener('resize', throttleUpdate);
-    });
+    }
 
     function handleFixedColumns() {
         const columns = getColumns();
 
+        let _offsetMap: Record<Key, number> = {};
         hasFixedLeft = false;
         hasFixedRight = false;
-        offsetMap = {};
 
         columns.forEach((columns, row) => {
-            let offset = 0;
             columns.forEach((vNode, col) => {
                 const props = vNode.props as Props<TableColumnProps>;
                 const key = props.key;
-                offsetMap[key] = 0;
 
                 const fixed = props.fixed;
                 if (fixed === 'left') {
@@ -81,34 +66,29 @@ export function useFixedColumns(
                     while (prevVNode) {
                         const props = prevVNode.props!;
                         if (props.fixed === 'left') {
-                            if (process.env.NODE_ENV !== 'production') {
-                                validateWidth(props);
-                            }
-                            value += widthMap.value[props.key] || parseInt(props.width as string, 10) || 0;
+                            value += getWidth(prevVNode);
                         }
                         prevVNode = props.prevVNode;
                     }
-                    offsetMap[key] = value;
+                    _offsetMap[key] = value;
                     hasFixedLeft = true;
                 } else if (fixed === 'right') {
                     let value = 0;
-                    let lastVNode = columns[columns.length - 1];
-                    while (vNode !== lastVNode) {
-                        const props = lastVNode.props!; 
+                    let nextVNode = props.nextVNode;
+                    while (nextVNode) {
+                        const props = nextVNode.props!; 
                         if (props.fixed === 'right') {
-                            if (process.env.NODE_ENV !== 'production') {
-                                validateWidth(props);
-                            }
-                            value += widthMap.value[props.key] || parseInt(props.width as string, 10) || 0;
+                            value += getWidth(nextVNode);
                         }
-                        lastVNode = props.prevVNode!;
+                        nextVNode = props.nextVNode;
                     }
-                    offsetMap[key] = value;
+                    _offsetMap[key] = value;
                     hasFixedRight = true;
                 }
             });
         });
 
+        offsetMap.set(_offsetMap);
         hasFixed.set(hasFixedLeft || hasFixedRight);
     }
 
@@ -138,8 +118,8 @@ export function useFixedColumns(
         scrollPosition,
         setScrollPosition,
         hasFixed,
+        offsetMap,
         getHasFixedLeft: () => hasFixedLeft,
-        getOffsetMap: () => offsetMap,
     };
 }
 
@@ -160,9 +140,7 @@ export function getClassAndStyleForFixed(
     };
 }
 
-
-function validateWidth({width, key}: TableColumnProps) {
-    if (isNullOrUndefined(width) || isString(width) && !/\d+(px)?/.test(width)) {
-        error(`The width must be specified with 'px' when the column has fixed. <TableColumn key="${key}" />`);
-    }
+function getWidth(vNode: VNodeComponentClass) {
+    const dom = findDomFromVNode(vNode, true) as HTMLElement;
+    return dom.offsetWidth;
 }

package/components/table/useGroup.ts

@@ -59,6 +59,10 @@ export function useGroup() {
         confirm(onChange);
     }
 
+    function checkAll() {
+        localGroupValue.set(filteredGroup.value?.map((item) => item.value));
+    }
+
     function isEmptyValue(groupValue: any) {
         const {multiple} = instance.get();
         return !groupValue || multiple && (!isArray(groupValue) || groupValue.every(value => !value));
@@ -88,5 +92,6 @@ export function useGroup() {
         dropdownRef,
         localGroupValue,
         isEmptyValue,
+        checkAll,
     };
 }

package/components/table/useResizable.ts

@@ -22,16 +22,18 @@ export function useResizable(
     let x: number;
     let prevVNode: ColumnVNode;
     let prevTh: HTMLElement;
+    let prevMinWidth: number;
     let currentVNode: ColumnVNode;
     let currentTh: HTMLElement;
-    let minWidth: number;
+    let currentMinWidth: number;
+    let nextVNode: ColumnVNode | null | undefined;
 
     function onStart(e: MouseEvent) {
         containerWidth = scrollRef.value!.clientWidth;
         x = e.clientX;
 
         // find the previous column but exclude the hidden columns, #467
-        prevVNode = currentVNode = (e as MouseEvent & {_vNode: ColumnVNode})._vNode;
+        prevVNode = nextVNode = currentVNode = (e as MouseEvent & {_vNode: ColumnVNode})._vNode;
         prevTh;
         do {
             prevVNode = prevVNode.props!.prevVNode!;
@@ -39,27 +41,53 @@ export function useResizable(
         } while(window.getComputedStyle(prevTh).display === 'none');
 
         currentTh = findDomFromVNode(currentVNode, true) as HTMLElement;
-        minWidth = prevVNode.props!.minWidth || instance.get('minColWidth')!;
+        prevMinWidth= prevVNode.props!.minWidth || instance.get('minColWidth')!;
+        currentMinWidth = currentVNode.props!.minWidth || instance.get('minColWidth')!;
+
+        while (nextVNode = nextVNode?.props!.nextVNode) {
+            const th = findDomFromVNode(nextVNode, true) as HTMLElement;
+            if (window.getComputedStyle(th).display === 'none') {
+                continue;
+            }
+            break;
+        }
     }
 
     function onMove(e: MouseEvent) {
         const delX = e.clientX - x;
         if (delX === 0) return;
 
-        const newPrevWidth = prevTh.offsetWidth + delX;
-        if (newPrevWidth < minWidth && delX < 0) return;
+        let newPrevWidth = prevTh.offsetWidth + delX;
+        let newCurrentWidth = currentTh.offsetWidth - delX;
+        let newTableWidth = tableRef.value!.offsetWidth + delX;
+        const isCurrentFixedRight = currentVNode.props!.fixed === 'right';
+        // const isPrevFixedRight = prevVNode.props!.fixed === 'right';
+
+        if ((newPrevWidth < prevMinWidth || isCurrentFixedRight) && delX < 0) {
+            // if (nextVNode) return;
+            // the last column, we should expand its width
+            if (newPrevWidth < prevMinWidth) {
+                newPrevWidth -= delX; 
+                newTableWidth -= delX;
+            }
+        }
 
-        const newCurrentWidth = currentTh.offsetWidth - delX;
-        const newTableWidth = tableRef.value!.offsetWidth + delX;
         const currentKey = currentVNode.props!.key;
         const prevKey = prevVNode.props!.key;
-
-        x = e.clientX;
-
         const map = {
             [prevKey]: newPrevWidth 
         }
 
+        if (!nextVNode || isCurrentFixedRight) {
+            newTableWidth -= delX;
+            if (newCurrentWidth < currentMinWidth && delX > 0) {
+                newCurrentWidth = currentMinWidth;
+            }
+            map[currentKey] = newCurrentWidth;
+        }
+
+        x = e.clientX;
+
         if (containerWidth > newTableWidth) {
             map[currentKey] = newCurrentWidth;
         } else {

package/components/table/useWidth.ts

@@ -90,6 +90,9 @@ export function useWidth(
             });
         });
         if (shouldUpdate) {
+            // let useFixedColumns to update scroll position
+            widthMap.set({ ...widthMap.value });
+
             instance.forceUpdate(() => {
                 // check again because it may affect other columns
                 if (!isStop) {

package/components/tabs/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 type SizeStyles = {
     fontSize: string;
@@ -81,9 +82,10 @@ const defaults = deepDefaults(
 let tabs: typeof defaults;
 setDefault(() => {
     tabs = deepDefaults(theme, {tabs: defaults}).tabs;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         ${makeCommonStyles(k)};
         ${makeScrollStyles(k)};
@@ -100,7 +102,7 @@ export function makeStyles(k: string) {
             ${makeFlatCardStyles(k)};
         }
     `;
-}
+});
 
 function makeCommonStyles(k: string) {
     const active = tabs.active;

package/components/tag/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {deepDefaults, sizes, palette} from '../../styles/utils';
 import {theme, setDefault} from '../../styles/theme';
 import '../../styles/global';
+import { cache } from '../utils';
 
 type ValueOf<T extends readonly any[]> = T[number]
 type Types = ValueOf<typeof types>
@@ -83,11 +84,13 @@ const defaults = deepDefaults(
 let tag: typeof defaults;
 setDefault(() => {
     tag = deepDefaults(theme, {tag: defaults}).tag;
+    makeStyles?.clearCache();
+    makeTagsStyles?.clearCache();
 });
 
 export { tag };
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-flex;
         align-items: center;
@@ -144,9 +147,9 @@ export function makeStyles(k: string) {
             opacity: 0;
         }
     `;
-}
+});
 
-export function makeTagsStyles(k: string) {
+export const makeTagsStyles = cache(function makeTagsStyles(k: string) {
     return css`
         display: flex;
         flex-wrap: wrap;
@@ -172,4 +175,4 @@ export function makeTagsStyles(k: string) {
             cursor: move;
         }
     `;
-}
+});

package/components/timeline/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, Sizes, sizes, palette}  from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 type ValueOf<T extends readonly any[]> = T[number]
 
@@ -58,16 +59,18 @@ const defaults = deepDefaults(
 let timeline: typeof defaults;
 setDefault(() => {
     timeline = deepDefaults(theme, {timeline: defaults}).timeline;
+    makeStyles?.clearCache();
+    makeItemStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         font-size: ${timeline.fontSize};
         padding-top: calc(${theme.lineHeight}em / 2);
     `;
-}
+});
 
-export function makeItemStyles(k: string) {
+export const makeItemStyles = cache(function makeItemStyles(k: string) {
     return css`
         position: relative;
         padding: ${timeline.padding};
@@ -148,5 +151,4 @@ export function makeItemStyles(k: string) {
             `
         })}
     `;
-};
-
+});

package/components/timepicker/styles.ts

@@ -3,6 +3,7 @@ import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes, getRight, getLeft, palette} from '../../styles/utils';
 import '../../styles/global';
 import {datepicker, makePanelStyles as makePanelStylesBase} from '../datepicker/styles';
+import { cache } from '../utils';
 
 const defaults = {
     get border() { return datepicker.border; },
@@ -21,9 +22,10 @@ const defaults = {
 let timepicker: typeof defaults;
 setDefault(() => {
     timepicker = deepDefaults(theme, {timepicker: defaults}).timepicker;
+    makePanelStyles?.clearCache();
 });
 
-export function makePanelStyles(k: string) {
+export const makePanelStyles = cache(function makePanelStyles(k: string) {
     return cx(
         makePanelStylesBase(k),
         css`
@@ -55,4 +57,4 @@ export function makePanelStyles(k: string) {
             }
         `,
     );
-}
+});

package/components/tip/styles.ts

@@ -2,6 +2,7 @@ import {theme, setDefault} from '../../styles/theme';
 import {css} from '@emotion/css';
 import '../../styles/global';
 import {deepDefaults}  from '../../styles/utils';
+import { cache } from '../utils';
 
 const defaults = {
     title: {
@@ -16,9 +17,10 @@ const defaults = {
 let tip: typeof defaults;
 setDefault(() => {
     tip = deepDefaults(theme, {tip: defaults}).tip;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         // Tip extends Tag, so we add.${k}-tip to increase the priority of class
         &.${k}-tip {
@@ -47,4 +49,4 @@ export function makeStyles(k: string) {
             background: none;
         }
     `;
-}
+});

package/components/tooltip/content.vdt

@@ -1,5 +1,5 @@
 import {Button} from '../button';
-import makeStyles from './styles';
+import {makeStyles} from './styles';
 
 const {
     showArrow, confirm, className,

package/components/tooltip/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     padding: '8px 12px',
@@ -35,6 +36,7 @@ const defaults = {
 export let tooltip: typeof defaults;
 setDefault(() => {
     tooltip = deepDefaults(theme, {tooltip: defaults}).tooltip;
+    makeStyles?.clearCache();
 });
 
 export type Theme = 'dark' | 'light';
@@ -47,7 +49,7 @@ const directionMap = {
     right: 'left',
 };
 
-export default function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     const arrowLong = tooltip.arrow.width;
     const arrowShort = `calc(${arrowLong} - 1px)`;
 
@@ -174,4 +176,4 @@ export default function makeStyles(k: string) {
             }
         }
     `
-}
+});

package/components/transfer/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     fontSize: '12px',
@@ -41,9 +42,10 @@ const defaults = {
 let transfer: typeof defaults;
 setDefault(() => {
     transfer = deepDefaults(theme, {transfer: defaults}).transfer;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         font-size: ${transfer.fontSize};
         .${k}-transfer-panel,
@@ -117,4 +119,4 @@ export function makeStyles(k: string) {
             }
         }
     `;
-}
+});

package/components/tree/demos/checkbox.md

@@ -55,6 +55,7 @@ export default class extends Component {
                 },
                 {
                     label: 'First floor-2',
+                    key: 'floor-2',
                     children: [
                         {
                             label: 'Second floor-2.1',