Merge pull request #1044 from ksc-fe/revision-menu

fix some bug and add feature
ksc-fe · Oct 12, 2024 · 2aa03a8 · 2aa03a8
2 parents 2ce3104 + e2e2d6f
commit 2aa03a8
Show file tree

Hide file tree

Showing 46 changed files with 867 additions and 532 deletions.
diff --git a/components/table/cell.ts b/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';
@@ -19,11 +19,11 @@ export interface TableCellProps {
     onClickArrow: (e: MouseEvent) => void 
     hasChildren: boolean
     loaded: boolean
+    spreadArrowIndex: number
 }
 
 export class TableCell extends Component<TableCellProps> {
     static template = template;
-
     private config = useConfigContext();
 
     $update(

diff --git a/components/table/cell.vdt b/components/table/cell.vdt
@@ -8,12 +8,14 @@ import {Ellipsis} from '../ellipsis';
 const {
     props, rowIndex, columnIndex, offset,
     data, checkType, indent, grid,
-    colspan, rowspan, onClickArrow, hasChildren, loaded
+    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) {
@@ -26,7 +28,7 @@ if (props.ellipsis) {
 }
 
 let {className, style} = getClassAndStyleForFixed(props, offset, k, checkType);
-if (columnIndex === 0 && indent) {
+if (isTree && indent) {
     style || (style = {});
     style.paddingLeft = `${indent}px`;
 }
@@ -42,7 +44,7 @@ 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}

diff --git a/components/table/column.vdt b/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}

diff --git a/components/table/demos/fixFooter.md b/components/table/demos/fixFooter.md
@@ -48,5 +48,5 @@ import {Table, TableColumn} from 'kpc';
     margin-left: 20px
     flex: 1
 .k-table-wrapper
-    height: 200px
+    height: 200px!important
 ```
diff --git a/components/table/demos/tree.md b/components/table/demos/tree.md
@@ -17,15 +17,25 @@ order: 24
 
 ```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

diff --git a/components/table/index.md b/components/table/index.md
@@ -47,6 +47,7 @@ sidebar: doc
 | pagination | 是否支持分页 | `boolean` &#124; `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';

diff --git a/components/table/row.ts b/components/table/row.ts
@@ -39,6 +39,7 @@ export interface TableRowProps {
     onBeforeUnmount: (key: TableRowKey) => void
     offsetMap: Record<Key, number>
     animation: boolean
+    spreadArrowIndex: number
     loaded: boolean
 
     draggable: boolean

diff --git a/components/table/row.vdt b/components/table/row.vdt
@@ -12,6 +12,7 @@ const {
     allDisabled, selected, /* hidden,  */spreaded,
     hasChildren, indent, key, offsetMap,
     draggable, draggingKey, animation, loaded,
+    spreadArrowIndex
 } = this.get();
 const { k } = this.config;
 
@@ -87,6 +88,7 @@ cols.forEach((props, columnIndex) => {
             onClickArrow={this.onClickArrow}
             hasChildren={hasChildren}
             key={columnKey}
+            spreadArrowIndex={spreadArrowIndex}
         />
     );
 });

diff --git a/components/table/styles.ts b/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};
@@ -117,6 +119,7 @@ export const makeStyles = cache(function makeStyles(k: string) {
             tr {
                 td {
                     border-top: ${table.border};
+                    border-bottom-color: transparent;
                 }
             }
         }

diff --git a/components/table/table.ts b/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,7 +65,8 @@ export interface TableProps<
     animation?: boolean | [boolean, boolean]
     hideHeader?: boolean
     pagination?: boolean | PaginationProps
-    fixFooter?: boolean 
+    fixFooter?: boolean
+    spreadArrowIndex?: number
     load?: (value: T) => Promise<void> | void
 }
 
@@ -134,6 +135,7 @@ const typeDefs: Required<TypeDefs<TableProps<unknown>>> = {
     hideHeader: Boolean,
     pagination: [Boolean, Object],
     fixFooter: Boolean,
+    spreadArrowIndex: Number,
     load: Function,
 };
 
@@ -171,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);

diff --git a/components/table/table.vdt b/components/table/table.vdt
@@ -25,10 +25,11 @@ const {
     merge, childrenKey, indent, tooltipPosition,
     tooltipContainer, showIndeterminate, resizable,
     draggable, animation: _animation, hideHeader,
-    pagination, fixFooter,
+    pagination, fixFooter, spreadArrowIndex
 } = this.get();
 const animation = !Array.isArray(_animation) ? [_animation, _animation] : _animation;
 const {columns, cols, maxRows, maxCols} = this.columns.getData();
+const {lastCellKey, lastCellStyle} = this.columns.getStyleForLastColumn();
 const {scrollPosition, hasFixed, getHasFixedLeft, offsetMap} = this.fixedColumns;
 const {scrollRef} = this.scroll;
 const {stickHeader, excludeStickHeader, elementRef, headRef} = this.stickyHeader;
@@ -71,7 +72,7 @@ const hasFixedLeft = getHasFixedLeft();
 const {getAllCheckedStatus, toggleCheckedAll, getAllStatus, onChangeChecked} = this.checked;
 const allCheckedStatus = getAllCheckedStatus(); 
 const thead = hideHeader ? null : (
-    <TableContext.Provider value={checkType}>
+    <TableContext.Provider value={{checkType, lastCellKey, lastCellStyle}}>
         <GroupContext.Provider value={{group, onChange: this.onChangeGroup}}>
             <SortableContext.Provider value={{sort, onChange: this.sortable.onChange}}>
                 <ResizableContext.Provider value={{resizable, onStart}}>
@@ -163,6 +164,7 @@ const tbody = (
                         onBeforeUnmount={this.resetRowStatus.onRowBeforeUnmount}
                         offsetMap={offsetMap.value}
                         animation={animation[1]}
+                        spreadArrowIndex={spreadArrowIndex}
 
                         draggable={draggable}
                         draggingKey={draggingKey.value}

diff --git a/components/table/useColumns.ts b/components/table/useColumns.ts
@@ -4,6 +4,7 @@ import {TableColumn, TableColumnProps} from './column';
 import {useState} from '../../hooks/useState';
 import type {Table, TableProps} from './table';
 import {createContext} from '../context';
+import {table as theme} from './styles';
 
 export const context = createContext<TableProps['checkType']>();
 
@@ -118,5 +119,27 @@ export function useColumns() {
         }
     }
 
-    return {getColumns, getCols, getData} 
+
+    function getStyleForLastColumn() {
+        if (instance.get('type') !== 'grid' || !columns.length || !cols.length) {
+            return {lastCellKey: null, lastCellStyle: null};
+        }
+
+        const lastRow = columns[columns.length - 1];
+        const lastTrItem = lastRow[lastRow.length - 1];
+        const lastCol = cols[cols.length - 1];
+
+        if (!lastTrItem || !lastCol) {
+            return {lastCellKey: null, lastCellStyle: null};
+        }
+
+        return lastCol.key === lastTrItem.key
+            ? {lastCellKey: null, lastCellStyle: null}
+            : {
+                lastCellKey: lastTrItem.key, 
+                lastCellStyle: {'border-right': `${theme.border}`}
+              };
+    }
+
+    return {getColumns, getCols, getData, getStyleForLastColumn} 
 }
diff --git a/components/tip/demos/icon.md b/components/tip/demos/icon.md
@@ -0,0 +1,53 @@
+---
+title: 支持Icon
+order: 3
+---
+
+标签类型：`default`, `primary`, `success`, `warning` `danger`
+
+```vdt
+import {Tip, Icon} from 'kpc';
+
+<div>
+    <Tip v-for={this.get('types')}
+        type={$value}
+        showIcon
+        closable
+    >{$value}</Tip>
+    <Tip type="success" showIcon closable>
+        这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容。
+    </Tip>
+    <h3>自定义Icon</h3>
+    <Tip>
+        <b:icon><Icon class="k-icon-internet" /></b:icon>
+        custom Icon
+    </Tip>
+    <h3>标题带Icon</h3>
+    <Tip type="primary" showIcon>
+        <b:title>这是标题</b:title>
+        This is a tip.
+    </Tip>
+    <h3>标题自定义Icon</h3>
+    <Tip type="primary" showIcon closable>
+        <b:icon><Icon class="k-icon-internet" /></b:icon>
+        <b:title>这是标题</b:title>
+        This is a tip.
+    </Tip>
+</div>
+```
+
+```styl
+.k-tip
+    margin-bottom 8px
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            types: ['default', 'primary', 'success', 'warning', 'danger'] as const
+        };
+    }
+}
+```
diff --git a/components/tip/demos/size.md b/components/tip/demos/size.md
@@ -0,0 +1,39 @@
+---
+title: 尺寸
+order: 4
+---
+
+尺寸大小：`large`, `default`, `small`, `mini`
+
+```vdt
+import {Tip} from 'kpc';
+
+<div>
+    <Tip v-for={this.get('sizes')}
+        type="primary"
+        size={$value}
+    >{$value}</Tip>
+    <h3>带关闭按钮</h3>
+    <Tip v-for={this.get('sizes')}
+        type="primary"
+        size={$value}
+        closable
+    >{$value}</Tip>
+</div>
+```
+
+```styl
+.k-tip
+    margin-bottom 8px
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            sizes: ['large', 'default', 'small', 'mini'] as const
+        };
+    }
+}
+```
diff --git a/components/tip/index.md b/components/tip/index.md
@@ -17,6 +17,7 @@ sidebar: doc
 | disabled | 是否展示禁用状态 | `boolean` | `false` |
 | size | 组件尺寸 | `"large"` &#124; `"default"` &#124; `"small"` &#124; `"mini"` | `"default"` |
 | border | 定义边框样式 | `"solid"` &#124; `"dashed"` &#124; `"none"` | `"solid"` |
+| showIcon | 展示Icon | `boolean` | `false` |
 
 
 # 扩展点
@@ -25,6 +26,7 @@ sidebar: doc
 | --- | --- |
 | title | 自定义标题内容 |
 | close | 自定义关闭按钮内容 |
+| icon | 自定义Icon内容 |
 
 # 事件