@king-design/intact 3.4.3-beta.2 → 3.4.4

package/components/switch/styles.ts

@@ -185,6 +185,11 @@ export const makeStyles = cache(function makeStyles(k: string) {
             `
         })}
 
+        &.${k}-small .${k}-switch-on,
+        &.${k}-small .${k}-switch-off {
+            font-size: 10px;
+        }
+
         // checked
         &.${k}-checked {
             .${k}-switch-bar,

package/components/table/cell.ts

@@ -1,4 +1,4 @@
-import {Component, Props, VNodeComponentClass, IntactDom} from 'intact';
+import {Component, Props, VNodeComponentClass, IntactDom, inject} from 'intact';
 import template from './cell.vdt';
 import type {TableColumnProps} from './column';
 import type {TableProps} from './table';
@@ -18,11 +18,12 @@ export interface TableCellProps {
     rowspan: number
     onClickArrow: (e: MouseEvent) => void 
     hasChildren: boolean
+    loaded: boolean
+    spreadArrowIndex: number
 }
 
 export class TableCell extends Component<TableCellProps> {
     static template = template;
-
     private config = useConfigContext();
 
     $update(

package/components/table/cell.vdt

@@ -3,16 +3,19 @@ import {get, noop} from 'intact-shared';
 import {Button} from '../button';
 import {Icon} from '../icon';
 import {getTextByChildren} from '../utils';
+import {Ellipsis} from '../ellipsis';
 
 const {
     props, rowIndex, columnIndex, offset,
     data, checkType, indent, grid,
-    colspan, rowspan, onClickArrow, hasChildren,
+    colspan, rowspan, onClickArrow, hasChildren, loaded,
+    spreadArrowIndex
 } = this.get();
 const { k } = this.config;
 
 const blocks = props.$blocks; 
 let children = get(data, props.key);
+const isTree = !spreadArrowIndex ? columnIndex === 0 : columnIndex === spreadArrowIndex
 if (blocks) {
     const template = blocks.template || blocks.default;
     if (template) {
@@ -20,8 +23,12 @@ if (blocks) {
     }
 }
 
+if (props.ellipsis) {
+    children = <Ellipsis>{children}</Ellipsis>
+}
+
 let {className, style} = getClassAndStyleForFixed(props, offset, k, checkType);
-if (columnIndex === 0 && indent) {
+if (isTree && indent) {
     style || (style = {});
     style.paddingLeft = `${indent}px`;
 }
@@ -37,12 +44,14 @@ const classNameObj = {
     rowspan={rowspan}
     colspan={colspan}
 >
-    <Button v-if={columnIndex === 0 && hasChildren}
+    <Button v-if={hasChildren && isTree}
         type="none" icon circle size="mini"
         class={`${k}-table-arrow`}
         ev-click={onClickArrow}
+        disabled={loaded === false}
     >
-        <Icon class={`${k}-icon-right`} size="small" />
+        <Icon v-if={loaded !== false} class={`${k}-icon-right`} size="small" />
+        <Icon v-else class={`${k}-tree-icon ion-load-c`} rotate />
     </Button>
     {children}
 </td>

package/components/table/column.ts

@@ -18,6 +18,7 @@ export interface TableColumnProps {
     exportCell?: (data: any, index: number) => string
     minWidth?: number
     hidden?: boolean
+    ellipsis?: boolean
 
     // passed by Table
     // offset: number
@@ -58,6 +59,7 @@ const typeDefs: Required<TypeDefs<TableColumnProps>> = {
     exportCell: Function,
     minWidth: Number,
     hidden: Boolean,
+    ellipsis: Boolean,
 
     // offset: null,
     cols: null,

package/components/table/column.vdt

@@ -1,4 +1,5 @@
 import {getClassAndStyleForFixed} from './useFixedColumns';
+import {getStyleForLastColumn} from './useColumns';
 import {Dropdown, DropdownMenu, DropdownItem} from '../dropdown';
 import {Button} from '../button';
 import {Icon} from '../icon';
@@ -11,7 +12,7 @@ import {linkEvent} from 'intact';
 import {context as TableContext} from './useColumns';
 import {context as ResizableContext} from './useResizable';
 import {context as FixedColumnsContext} from './useFixedColumns';
-import {stopPropagation} from '../utils';
+import {stopPropagation, addStyle} from '../utils';
 import {Input} from '../input';
 import {_$} from '../../i18n';
 import {ignoreSortable} from './useSortable';
@@ -25,7 +26,7 @@ const {
 const { k } = this.config;
 
 <TableContext.Consumer>
-    {checkType => {
+    {({checkType, lastCellKey, lastCellStyle}) => {
         return <GroupContext.Consumer>
             {({group: currentGroup, onChange}) => {
                 return <SortableContext.Consumer>
@@ -46,7 +47,7 @@ const { k } = this.config;
 
                                         let checked;
                                         return <th className={classNameObj}
-                                            style={style}
+                                            style={key === lastCellKey ? addStyle(style, lastCellStyle) : style}
                                             title={isStringOrNumber(title) ? title : null}
                                             ev-click={sortable ? linkEvent(key, onChangeSort) : null}
                                             colspan={cols}

package/components/table/demos/asyncTree.md

@@ -0,0 +1,73 @@
+---
+title: 树形表格异步加载
+order: 33
+---
+
+添加`load`数据加载函数即可实现异步加载子节点功能，组件会传入当前节点对象作为参数，函数可以返回
+数组或者异步返回数组作为当前异步加载的子节点。如果子节点还可以进一步展开，可以将`children`属性
+设为空数组`[]`，否则不指定`children`则表示该节点为叶子节点。
+
+组件默认遇到`children`为`[]`空数组的情况就会去进行异步加载，你可以通过`loaded`属性设为`true`来
+标识该子节点已经加载完成，无需再次加载
+
+> 组件在该行数据异步加载完成后，会往原始数据上自动添加`loaded=true`。你也可以手动指定某行数据
+> `loaded=true`，这样即使组件发现该行数据`children`为空`[]`，也不会去加载了
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<Table data={this.get('data')} rowKey={data => data.name} load={this.loadData}>
+    <TableColumn key="name" title="Name" />
+    <TableColumn key="size" title="Size">
+        <b:template args="[data]">
+            {data.size}MB
+        </b:template>
+    </TableColumn>
+</Table>
+```
+
+```ts
+import {bind} from 'kpc';
+interface Props {
+    data: NonNullable<any>
+}
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            data: [
+                {
+                    name: 'Audios', 
+                    size: 12,
+                    children: []
+                },
+                {
+                    name: 'Images', 
+                    size: 14,
+                    children: []
+                },
+                {
+                    name: 'doc.pdf', 
+                    size: 18,
+                },
+            ]
+        }
+    }
+
+    @bind
+    loadData(node: any) {
+        return new Promise<void>(resolve => {
+            setTimeout(() => {
+                node.children = [
+                    {name: 'child1', size: 17},
+                    {name: 'child2', size: 15, loaded: true},
+                ];
+                this.set('data', [...this.get('data')]);
+
+                resolve();
+            }, 2000);
+        });
+    }
+}
+```

package/components/table/demos/ellipsis.md

@@ -0,0 +1,29 @@
+---
+title: 超长省略
+order: 34
+---
+
+通过设置`TableColumn`的`ellipsis`属性，可以指定列超长省略
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<Table data={this.get('data')} resizable>
+    <TableColumn key="a" title="Title 1" minWidth={200} ellipsis/>
+    <TableColumn key="b" title="Title 2" minWidth={300} />
+</Table>
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            data: [
+                {a: '测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长', b: 'Cell 1-2'},
+                {a: 'Cell 2-1', b: 'Cell 2-2'}
+            ]
+        };
+    }
+}
+```

package/components/table/demos/fixFooter.md

@@ -0,0 +1,52 @@
+---
+title: footer固定
+order: 35
+---
+
+`fixFooter`：设置自定义footer固定，类型`boolean`，默认：`false`；
+设置为`true`时表示固定高度，`tbody`的高度自适应，但需要自己定义表格高度
+
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<div class="wrapper">
+    <Table
+        data={[{a: 'footer不固定'}, {a: '下拉'}, {a: 'yeah!'}, {a: '你好'}, {a: '我很好'}]}
+    >
+        <TableColumn key="a" title="footer不固定" />
+        <b:footer>
+            <span>自定义footer</span>
+        </b:footer>
+    </Table>
+    <Table
+        data={[{a: 'footer固定啦'}, {a: '下拉'}, {a: 'yeah!'}, {a: '你好'}, {a: '我很好'}]}
+        fixFooter
+    >
+        <TableColumn key="a" title="footer固定" />
+        <b:footer>
+            <span>自定义footer</span>
+        </b:footer>
+    </Table>
+    <Table
+        data={[{a: 'footer固定啦'}, {a: '下拉'}, {a: 'yeah!'}, {a: '你好'}, {a: '我很好'}]}
+        fixFooter
+        fixHeader
+    >
+        <TableColumn key="a" title="footer，header同时固定" />
+        <b:footer>
+            <span>自定义footer</span>
+        </b:footer>
+    </Table>
+</div>
+```
+
+```styl
+.wrapper
+    display flex
+.k-table
+    margin-left: 20px
+    flex: 1
+.k-table-wrapper
+    height: 200px!important
+```

package/components/table/demos/footer.md

@@ -0,0 +1,38 @@
+---
+title: 自定义footer
+order: 32
+---
+
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<div>
+    <Table data={this.get('data')} resizable>
+        <TableColumn key="a" title="Title 1" minWidth={200}/>
+        <TableColumn key="b" title="Title 2" minWidth={300}/>
+        <b:footer>
+            <div class="footer">自定义底部</div>
+        </b:footer>
+    </Table>
+</div>
+```
+
+```styl
+.k-table
+    margin-bottom 20px
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            data: [
+                {a: 'Cell 1-1', b: 'Cell 1-2'},
+                {a: 'Cell 2-1', b: 'Cell 2-2'}
+            ],
+        };
+    }
+}
+```

package/components/table/demos/tree.md

@@ -11,19 +11,31 @@ order: 24
 
 树形表格下，必须通过`rowKey`指定每行的`key`
 
-> 如果数据中恰好存在`children`字段，但是你又不想展示树形表格，将`childrenKey`设为`false`即可
+> 如果数据中恰好存在`children`字段，但是你又不想展示树形表格，将`childrenKey`设为`false`即可。
+> 假如你的数据为：`{name: 'xxx', books: [{name: 'a'}, {name: 'b'}]}`，想把books展示成子树，
+> 可以指定`childrenKey="books"`
 
 ```vdt
 import {Table, TableColumn} from 'kpc';
-
-<Table data={this.get('data')} rowKey={data => data.name}>
-    <TableColumn key="name" title="Name" />
-    <TableColumn key="size" title="Size">
-        <b:template args="[data]">
-            {data.size}MB
-        </b:template>
-    </TableColumn>
-</Table>
+<div>
+    <Table data={this.get('data')} rowKey={data => data.name}>
+        <TableColumn key="name" title="Name" />
+        <TableColumn key="size" title="Size">
+            <b:template args="[data]">
+                {data.size}MB
+            </b:template>
+        </TableColumn>
+    </Table>
+    <h4>自定义展开Icon位置</h4>
+    <Table data={this.get('data')} rowKey={data => data.name} spreadArrowIndex={1}>
+        <TableColumn key="name" title="Name" />
+        <TableColumn key="size" title="Size">
+            <b:template args="[data]">
+                {data.size}MB
+            </b:template>
+        </TableColumn>
+    </Table>
+</div>
 ```
 
 ```ts

package/components/table/index.md

@@ -45,6 +45,9 @@ sidebar: doc
 | animation | 是否开启动效，默认开启。可以通过`true` `false`全部设置，或者通过数组单独设置行和列的动效 | `boolean` &#124 `[boolean, boolean]` | `true` |
 | hideHeader | 是否隐藏表头 | `boolean` | `false` |
 | pagination | 是否支持分页 | `boolean` | `PaginationProps` | `false` |
+| fixFooter | `table`给定需要固定高度时，自定义footer固定 | `boolean` | `false` |
+| load | 指定异步加载节点数据的函数，该函数通过`Promise`返回数组来添加子节点数据 | <code>(node: any) => Promise<void> &#124; void</code> | `undefined` |
+| spreadArrowIndex | 指定树形表格展开Icon的所在列，默认在第一列 | `number` | `0` |
 
 ```ts
 import {Props} from 'intact';
@@ -113,6 +116,7 @@ export interface PaginationProps {
 | minWidth | 指定当前列拖动时的最小宽度，优先级高于`Table`的`minColWidth` | `number` | `undefined` |
 | className | 给当前列添加className | `string` &#124; `Record<string, any>` | `undefined` |
 | hidden | 是否隐藏当前列，仅为不可见，不影响`exportTable`导出表格 | `boolean` | `false` |
+| ellipsis | 是否开启超长省略 | `boolean` | `false` |
 
 ```ts
 import {VNode} from 'intact';
@@ -132,6 +136,7 @@ export type TableColumnGroupItem = {
 | empty | 自定义无数据展示模板 | - |
 | expand | 指定行展开后要展示的模板内容 | `([data: T, index: number]) => Children` |
 | tooltip | 行提示内容 | `([data: T, index: number]) => Children` |
+| footer | 自定义`Table`底部 | - |
 
 ## TableColumn
 

package/components/table/row.ts

@@ -14,6 +14,7 @@ import {bind} from '../utils';
 import type {TableGrid} from './useMerge';
 import { isEqualObject } from '../utils';
 import { useConfigContext } from '../config';
+import { hasOwn } from 'intact-shared';
 
 export interface TableRowProps {
     key: TableRowKey
@@ -34,10 +35,12 @@ export interface TableRowProps {
     spreaded: boolean
     hasChildren: boolean
     indent: number
-    onToggleSpreadRow: (key: TableRowKey) => void
+    onToggleSpreadRow: (key: TableRowKey, rowData?: any) => void
     onBeforeUnmount: (key: TableRowKey) => void
     offsetMap: Record<Key, number>
     animation: boolean
+    spreadArrowIndex: number
+    loaded: boolean
 
     draggable: boolean
     draggingKey: TableRowKey | null
@@ -65,20 +68,27 @@ export class TableRow extends Component<TableRowProps> {
         const nextProps = nextVNode.props as TableRowProps;
 
         let isSame = true;
-        let key: keyof TableRowProps;
-        for (key in lastProps) {
-            // ignore index
-            if (key === 'index') continue;
-            const lastValue = lastProps[key];
-            const nextValue = nextProps[key];
-            // deeply compare for offsetMap
-            if (key === 'offsetMap' && isEqualObject(lastValue, nextValue)) {
-                continue;
-            }
-
-            if (lastValue !== nextValue) {
-                isSame = false;
-                break;
+        if (hasOwn.call(this, 'vueInstance')) {
+            // In Vue, we may change value by modifing the same reference,
+            // and the new row may be expanded by click tree arrow
+            // so we can not compare in this case, #1030
+            isSame = false;
+        } else {
+            let key: keyof TableRowProps;
+            for (key in lastProps) {
+                // ignore index
+                if (key === 'index') continue;
+                const lastValue = lastProps[key];
+                const nextValue = nextProps[key];
+                // deeply compare for offsetMap
+                if (key === 'offsetMap' && isEqualObject(lastValue, nextValue)) {
+                    continue;
+                }
+
+                if (lastValue !== nextValue) {
+                    isSame = false;
+                    break;
+                }
             }
         }
 
@@ -109,8 +119,8 @@ export class TableRow extends Component<TableRowProps> {
     @bind
     onClickArrow(e: MouseEvent) {
         e.stopPropagation();
-        const {onToggleSpreadRow, key} = this.get();
-        onToggleSpreadRow(key);
+        const {onToggleSpreadRow, key, data} = this.get();
+        onToggleSpreadRow(key, data);
     }
 
     @bind

package/components/table/row.vdt

@@ -11,7 +11,8 @@ const {
     grid, index: rowIndex, indeterminate,
     allDisabled, selected, /* hidden,  */spreaded,
     hasChildren, indent, key, offsetMap,
-    draggable, draggingKey, animation,
+    draggable, draggingKey, animation, loaded,
+    spreadArrowIndex
 } = this.get();
 const { k } = this.config;
 
@@ -71,13 +72,13 @@ cols.forEach((props, columnIndex) => {
     if (!render) return;
 
     const columnKey = props.key;
-
     vNodes.push(
         <TableCell
             props={props}
             columnIndex={columnIndex}
             rowIndex={rowIndex}
             data={data}
+            loaded={loaded}
             offset={offsetMap[columnKey]}
             checkType={checkType}
             indent={indent}
@@ -87,6 +88,7 @@ cols.forEach((props, columnIndex) => {
             onClickArrow={this.onClickArrow}
             hasChildren={hasChildren}
             key={columnKey}
+            spreadArrowIndex={spreadArrowIndex}
         />
     );
 });

package/components/table/styles.ts

@@ -77,6 +77,8 @@ setDefault(() => {
     makeGroupMenuStyles?.clearCache();
 });
 
+export {table};
+
 export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         font-size: ${table.fontSize};
@@ -90,7 +92,7 @@ export const makeStyles = cache(function makeStyles(k: string) {
         }
         table {
             width: 100%;
-            // border-collapse: collapse;
+            border-collapse: separate;
             border-spacing: 0;
             table-layout: fixed;
             // td, 
@@ -104,8 +106,6 @@ export const makeStyles = cache(function makeStyles(k: string) {
             text-align: ${table.thead.textAlign};
             font-size: ${table.thead.fontSize};
             font-weight: ${table.thead.fontWeight};
-            position: sticky;
-            top: 0;
             z-index: 2;
             tr {
                 height: ${table.thead.height};
@@ -114,6 +114,15 @@ export const makeStyles = cache(function makeStyles(k: string) {
                 }
             }
         }
+        tfoot {
+            z-index: 2;
+            tr {
+                td {
+                    border-top: ${table.border};
+                    border-bottom-color: transparent;
+                }
+            }
+        }
         th {
             padding: ${table.thead.padding};
             position: relative;
@@ -376,6 +385,21 @@ export const makeStyles = cache(function makeStyles(k: string) {
             .${k}-table-wrapper {
                 height: 100%;
             }
+            thead {
+                position: sticky;
+                top: 0;
+            }
+        }
+        // fixFooter
+        &.${k}-fix-footer {
+            min-height: 0;
+            .${k}-table-wrapper {
+                height: 100%;
+            }
+            tfoot {
+                position: sticky;
+                bottom: 0;
+            }
         }
     `;
 });

package/components/table/table.ts

@@ -1,4 +1,4 @@
-import {Component, TypeDefs} from 'intact';
+import {Component, TypeDefs, provide} from 'intact';
 import template from './table.vdt';
 import {useColumns} from './useColumns';
 import {useFixedColumns} from './useFixedColumns';
@@ -65,6 +65,9 @@ export interface TableProps<
     animation?: boolean | [boolean, boolean]
     hideHeader?: boolean
     pagination?: boolean | PaginationProps
+    fixFooter?: boolean
+    spreadArrowIndex?: number
+    load?: (value: T) => Promise<void> | void
 }
 
 export interface TableEvents<T = any, K extends TableRowKey = number> {
@@ -82,6 +85,7 @@ export interface TableBlocks<T = unknown> {
     empty: null
     tooltip: [T, number] 
     expand: [T, number]
+    footer: null
 }
 
 type CheckType = 'checkbox' | 'radio' | 'none'
@@ -130,6 +134,9 @@ const typeDefs: Required<TypeDefs<TableProps<unknown>>> = {
     animation: [Boolean, Array],
     hideHeader: Boolean,
     pagination: [Boolean, Object],
+    fixFooter: Boolean,
+    spreadArrowIndex: Number,
+    load: Function,
 };
 
 const defaults = (): Partial<TableProps> => ({
@@ -166,7 +173,6 @@ export class Table<
     static typeDefs = typeDefs;
     static defaults = defaults;
     static events = events;
-
     // use public for unit test to get paginationRef
     public pagination = usePagination();
     private tree = useTree(this.pagination.data);