fix: Table新增expandIndex、Tip新增支持Icon, close #1043 #1035 #1039

ksc-fe · Sep 26, 2024 · 705df9d · 705df9d
1 parent e68d342
commit 705df9d
Show file tree

Hide file tree

Showing 13 changed files with 201 additions and 30 deletions.
diff --git a/components/table/cell.ts b/components/table/cell.ts
@@ -1,5 +1,6 @@
-import {Component, Props, VNodeComponentClass, IntactDom} from 'intact';
+import {Component, Props, VNodeComponentClass, IntactDom, inject} from 'intact';
 import template from './cell.vdt';
+import {TABLE, Table} from './table';
 import type {TableColumnProps} from './column';
 import type {TableProps} from './table';
 import type {TableGrid} from './useMerge';
@@ -23,7 +24,7 @@ export interface TableCellProps {
 
 export class TableCell extends Component<TableCellProps> {
     static template = template;
-
+    public parentTable = inject<Table>(TABLE)!;
     private config = useConfigContext();
 
     $update(

diff --git a/components/table/cell.vdt b/components/table/cell.vdt
@@ -10,10 +10,12 @@ const {
     data, checkType, indent, grid,
     colspan, rowspan, onClickArrow, hasChildren, loaded
 } = this.get();
+const { expandIndex } = this.parentTable.get();
 const { k } = this.config;
 
 const blocks = props.$blocks; 
 let children = get(data, props.key);
+const isTree = !expandIndex ? columnIndex === 0 : columnIndex === expandIndex
 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/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} expandIndex={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` |
+| expandIndex | 设置树形表格展开Icon的位置 | `number` | `0` |
 
 ```ts
 import {Props} from 'intact';

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
+    expandIndex?: number
     load?: (value: T) => Promise<void> | void
 }
 
@@ -134,6 +135,7 @@ const typeDefs: Required<TypeDefs<TableProps<unknown>>> = {
     hideHeader: Boolean,
     pagination: [Boolean, Object],
     fixFooter: Boolean,
+    expandIndex: Number,
     load: Function,
 };
 
@@ -159,6 +161,7 @@ const events: Events<TableEvents> = {
     uncheckAll: true,
     page: true,
 };
+export const TABLE = 'Table';
 
 export class Table<
     T = any,
@@ -171,7 +174,9 @@ export class Table<
     static typeDefs = typeDefs;
     static defaults = defaults;
     static events = events;
-
+    init() {
+        provide(TABLE, this);
+    };
     // use public for unit test to get paginationRef
     public pagination = usePagination();
     private tree = useTree(this.pagination.data);

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/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内容 |
 
 # 事件
 

diff --git a/components/tip/index.ts b/components/tip/index.ts
@@ -1,15 +1,31 @@
+import {TypeDefs} from 'intact';
 import template from './index.vdt';
 import {Tag, TagProps, TagEvents, TagBlocks} from '../tag/base';
 
-export interface TipProps extends TagProps { }
+export interface TipProps extends TagProps { 
+    showIcon?: boolean
+}
 
 export interface TipEvents extends TagEvents { }
 
 export interface TipBlocks extends TagBlocks {
     title: null
     close: null
+    icon: null
 }
 
+const typeDefs: Required<TypeDefs<TipProps>> = {
+    ...Tag.typeDefs,
+    showIcon: Boolean,
+};
+
+const defaults = (): Partial<TipProps> => ({
+    ...Tag.defaults(),
+    showIcon: false,
+});
+
 export class Tip extends Tag<TipProps, TipEvents, TipBlocks> {
     static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
 }
diff --git a/components/tip/index.vdt b/components/tip/index.vdt
@@ -2,20 +2,53 @@ import {Button} from '../button';
 import {Icon} from '../icon';
 import {makeStyles} from './styles';
 
-const {children, closable, type, disabled} = this.get();
+const {children, closable, type, disabled, showIcon} = this.get();
 const { k } = this.config;
+
+const iconMap = {
+    default: 'information-fill',
+    info: 'information-fill',
+    warning: 'warning-fill',
+    success: 'success-fill',
+    error: 'error-fill',
+};
+
 const classNameObj = {
     [`${k}-tip`]: true,
     [makeStyles(k)]: true,
 };
 
+const iconWrapper = <template>
+    <template v-if={!$blocks.icon}>
+        <Icon class={{
+            [`${k}-icon-${iconMap[type] || iconMap.info}`]: true,
+            [`${k}-tip-icon`]: true,
+        }} />
+    </template>
+    <b:icon v-else />
+</template>
+
 <t:super class={classNameObj} name="k-fade">
     <b:body>
-        <div class={`${k}-tip-wrapper`}>
-            <div v-if={$blocks.title} class={`${k}-tip-title`}>
-                <b:title />
+        <div class={{
+            [`${k}-tip-wrapper`]: true,
+            [`${k}-with-icon`]: !$blocks.title && (showIcon || $blocks.icon)
+        }}>
+            <template v-if={!$blocks.title && (showIcon || $blocks.icon)}>
+                {iconWrapper}
+            </template>
+            <div v-if={$blocks.title} class={{
+                [`${k}-tip-title`]: true,
+                [`${k}-with-icon`]: showIcon
+            }}>
+                <template v-if={showIcon}>
+                    {iconWrapper}
+                </template>
+                <span class={`${k}-title-content`}><b:title /></span>
+            </div>
+            <div class={`${k}-tip-content`}>
+                {children}
             </div>
-            {children}
         </div>
     </b:body> 
     <b:_close>

diff --git a/components/tip/styles.ts b/components/tip/styles.ts
@@ -11,7 +11,15 @@ const defaults = {
         fontWeight: '500'
     },
     get color() { return theme.color.text },
-    get padding() { return `6px ${theme.default.padding}` },
+    get padding() { return `${theme.default.padding}` },
+    content: {
+        padding: '7px 33px 8px 8px',
+    },
+    icon: {
+        fontSize: `18px`,
+        left: `16px`,
+        top: `6px`,
+    },
 };
 
 let tip: typeof defaults;
@@ -39,14 +47,49 @@ export const makeStyles = cache(function makeStyles(k: string) {
             font-size: ${tip.title.fontSize};
             margin-bottom: ${tip.title.gap};
             font-weight: ${tip.title.fontWeight}
+            display: flex;
+            align-items: center;
         }
 
         &.${k}-fade-leave-active {
             position: relative;
         }
 
-        .${k}-tip-close:hover {
-            background: none;
+        .${k}-tip-close {
+            height: 42px;
+            &:hover {
+                background: none;
+            }
         }
+
+        .${k}-with-icon {
+            display: flex;
+            .${k}-tip-icon {
+                font-size: 18px;
+                vertical-align: middle;
+            }
+            .${k}-title-content {
+                display: inline-block;
+                padding-left: 8px;
+            }
+            .${k}-tip-content {
+                display: inline-block;
+                padding-left: 8px;
+                vertical-align: middle;
+                word-break: break-word;
+                overflow-wrap: break-word;
+            }
+        }
+
+        ${(['primary', 'danger', 'success', 'warning'] as const).map(type => {
+            const color = theme.color[type];
+            return css`
+                &.${k}-${type} {
+                    .${k}-tip-icon {
+                        color: ${color};
+                    }
+                }
+            `
+        })}
     `;
 });
diff --git a/components/tooltip/demos/always.md b/components/tooltip/demos/always.md
@@ -18,6 +18,12 @@ import {Tooltip} from 'kpc';
         always show this tootip 
     </Tooltip>
     <br /><br />
+    <Tooltip content="hide" always value={false} 
+        container={this.container}
+    >
+        always hide this tootip 
+    </Tooltip>
+    <br /><br />
     <Tooltip content="" always value={true}>
         don't show if content is empty
     </Tooltip>

diff --git a/components/tooltip/tooltip.ts b/components/tooltip/tooltip.ts
@@ -76,7 +76,8 @@ export class Tooltip<
     public $isTooltip = true;
 
     show(shouldFocus: boolean = false) {
-        if (this.get('disabled')) return;
+        const {disabled, always, value} = this.get();
+        if (disabled || (always && !value)) return;
 
         clearTimeout(this.timer);
         this.set('value', true);