From 705df9d195c9a7c56258bab4e3ef1d9b6118f3d8 Mon Sep 17 00:00:00 2001 From: zhangbing4 Date: Thu, 26 Sep 2024 21:38:24 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20Table=E6=96=B0=E5=A2=9EexpandIndex?= =?UTF-8?q?=E3=80=81Tip=E6=96=B0=E5=A2=9E=E6=94=AF=E6=8C=81Icon,=20close?= =?UTF-8?q?=20#1043=20#1035=20#1039?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/table/cell.ts | 5 +-- components/table/cell.vdt | 6 ++-- components/table/demos/tree.md | 28 +++++++++++----- components/table/index.md | 1 + components/table/table.ts | 11 +++++-- components/tip/demos/icon.md | 53 ++++++++++++++++++++++++++++++ components/tip/index.md | 2 ++ components/tip/index.ts | 18 +++++++++- components/tip/index.vdt | 43 +++++++++++++++++++++--- components/tip/styles.ts | 49 +++++++++++++++++++++++++-- components/tooltip/demos/always.md | 6 ++++ components/tooltip/tooltip.ts | 3 +- components/transfer/index.vdt | 6 ++-- 13 files changed, 201 insertions(+), 30 deletions(-) create mode 100644 components/tip/demos/icon.md diff --git a/components/table/cell.ts b/components/table/cell.ts index f236f4f6a..525f86975 100644 --- 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 { static template = template; - + public parentTable = inject(TABLE)!; private config = useConfigContext(); $update( diff --git a/components/table/cell.vdt b/components/table/cell.vdt index 65d571d8f..d44d38d55 100644 --- 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} > -
+
+ data.name}> + + + + {data.size}MB + + +
+

自定义展开Icon位置

+ data.name} expandIndex={1}> + + + + {data.size}MB + + +
+
``` ```ts diff --git a/components/table/index.md b/components/table/index.md index 7e234b9c2..286132128 100644 --- a/components/table/index.md +++ b/components/table/index.md @@ -47,6 +47,7 @@ sidebar: doc | pagination | 是否支持分页 | `boolean` | `PaginationProps` | `false` | | fixFooter | `table`给定需要固定高度时，自定义footer固定 | `boolean` | `false` | | load | 指定异步加载节点数据的函数，该函数通过`Promise`返回数组来添加子节点数据 | (node: any) => Promise | void | `undefined` | +| expandIndex | 设置树形表格展开Icon的位置 | `number` | `0` | ```ts import {Props} from 'intact'; diff --git a/components/table/table.ts b/components/table/table.ts index 11ca6ee6c..80d727259 100644 --- 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 } @@ -134,6 +135,7 @@ const typeDefs: Required>> = { hideHeader: Boolean, pagination: [Boolean, Object], fixFooter: Boolean, + expandIndex: Number, load: Function, }; @@ -159,6 +161,7 @@ const events: Events = { 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 new file mode 100644 index 000000000..e229b2bb7 --- /dev/null +++ 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'; + +
+ {$value} + + 这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容，这是一条测试内容。 + +

自定义Icon

+ + + custom Icon + +

标题带Icon

+ + 这是标题 + This is a tip. + +

标题自定义Icon

+ + + 这是标题 + This is a tip. + +
+``` + +```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 index cd44c5558..1ec03a1a5 100644 --- a/components/tip/index.md +++ b/components/tip/index.md @@ -17,6 +17,7 @@ sidebar: doc | disabled | 是否展示禁用状态 | `boolean` | `false` | | size | 组件尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` | | border | 定义边框样式 | `"solid"` | `"dashed"` | `"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 index b97e2100b..63a3c2e04 100644 --- 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> = { + ...Tag.typeDefs, + showIcon: Boolean, +}; + +const defaults = (): Partial => ({ + ...Tag.defaults(), + showIcon: false, +}); + export class Tip extends Tag { static template = template; + static typeDefs = typeDefs; + static defaults = defaults; } diff --git a/components/tip/index.vdt b/components/tip/index.vdt index 14fe8f406..82d28546f 100644 --- 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 = + -
-
- +
+ +
+ + +
+
+ {children}
- {children}
diff --git a/components/tip/styles.ts b/components/tip/styles.ts index db17955fc..e54fc9e07 100644 --- 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 index 6e839454c..fbef7591f 100644 --- a/components/tooltip/demos/always.md +++ b/components/tooltip/demos/always.md @@ -18,6 +18,12 @@ import {Tooltip} from 'kpc'; always show this tootip

+ + always hide this tootip + +

don't show if content is empty diff --git a/components/tooltip/tooltip.ts b/components/tooltip/tooltip.ts index 0ffce8f35..9a888b46d 100644 --- 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); diff --git a/components/transfer/index.vdt b/components/transfer/index.vdt index bd27878b0..d3a24b00c 100644 --- a/components/transfer/index.vdt +++ b/components/transfer/index.vdt @@ -82,16 +82,14 @@ const Panel = (model) => {