@king-design/intact 3.4.3 → 3.4.4

package/components/button/demos/group.md

@@ -4,7 +4,7 @@ order: 1
 ---
 
 将`Button`作为`ButtonGroup`的子元素，可以展示按钮组。给`ButtonGroup`添加`vertical`属性，
-可以是按钮组纵向排列。给`ButtonGroup`添加`checkType`属性，可以使按钮组拥有单选或复选能力。
+可以使按钮组纵向排列。给`ButtonGroup`添加`separate`属性，可以在按钮之间插入间隔。给`ButtonGroup`添加`checkType`属性，可以使按钮组拥有单选或复选能力。
 
 ```vdt
 import {Button, ButtonGroup, Icon} from 'kpc';
@@ -62,13 +62,13 @@ import {Button, ButtonGroup, Icon} from 'kpc';
         <Button value="shenzhen" size="small">深圳</Button>
     </ButtonGroup>
     <p>有间隔的按钮组</p>
-    <ButtonGroup checkType="radio" v-model="city" seperate>
+    <ButtonGroup checkType="radio" v-model="city" separate>
         <Button value="beijing">北京</Button>
         <Button value="shanghai">上海</Button>
         <Button value="guangzhou">广州</Button>
         <Button value="shenzhen">深圳</Button>
     </ButtonGroup>
-    <ButtonGroup seperate>
+    <ButtonGroup separate>
         <Button value="beijing" type="primary" disabled>北京</Button>
         <Button value="shanghai">上海</Button>
         <Button value="guangzhou">广州</Button>

package/components/button/group.ts

@@ -10,6 +10,7 @@ export interface ButtonGroupProps {
     checkType?: 'none' | 'radio' | 'checkbox' 
     fluid?: boolean
     seperate?: boolean
+    separate?: boolean
     btnWidth?: number | string
 }
 
@@ -19,6 +20,7 @@ const typeDefs: Required<TypeDefs<ButtonGroupProps>> = {
     fluid: Boolean,
     checkType: ['none', 'radio', 'checkbox'],
     seperate: Boolean,
+    separate: Boolean,
     btnWidth: [Number, String],
 };
 
@@ -35,6 +37,9 @@ export class ButtonGroup extends Component<ButtonGroupProps> {
 
     init() {
         provide(BUTTON_GROUP, this); 
+        if (typeof this.get().seperate === 'boolean') {
+            console.warn("`seperate` is a typo which will be removed in next version, please using `separate` instead");
+        }
     }
 
     setValue(v: any): void {

package/components/button/group.vdt

@@ -1,14 +1,14 @@
 import {getRestProps} from '../utils';
 import {makeButtonGroupStyles} from './styles';
 
-const {className, vertical, children, fluid, seperate} = this.get();
+const {className, vertical, children, fluid, seperate, separate} = this.get();
 const {k} = this.config;
 
 const classNameObj = {
     [`${k}-btns`]: true,
     [`${k}-vertical`]: vertical,
     [`${k}-fluid`]: fluid,
-    [`${k}-seperate`]: seperate,
+    [`${k}-separate`]: typeof separate === 'boolean' ? separate : separate,
     [className]: className,
     [makeButtonGroupStyles(k)]: true,
 };

package/components/button/index.md

@@ -33,7 +33,8 @@ sidebar: doc
 | checkType | 指定按钮组为单选或复选类型，此时需要给每个按钮指定`value`来作为选中的值 | `"radio"` | `"checkbox"` | `"none"` | `"none"` |
 | value | 对于`radio`和`checkbox`类型按钮组，该值表示选中的按钮的值，可以使用`v-model`进行双向绑定 | `*` | `undefined` |
 | fluid | 是否宽度100% | `boolean` | `false` |
-| seperate | 是否展示间隔 | `boolean` | `false` |
+| seperate | 是否展示间隔，此属性为错别字，将会在下个版本被删除，请使用正确的属性 `separate`，若两个属性同时使用，则会优先使用`separate`属性 | `boolean` | `false` |
+| separate | 是否展示间隔 | `boolean` | `false` |
 
 # 方法
 

package/components/button/styles.ts

@@ -502,7 +502,7 @@ export const makeButtonGroupStyles = cache(function makeButtonGroupStyles(k: str
         }
 
         // horizontal
-        &:not(.${k}-vertical):not(.${k}-seperate) {
+        &:not(.${k}-vertical):not(.${k}-separate) {
             > .${k}-btn {
                 &:not(:first-child) {
                     margin-left: -1px;
@@ -540,7 +540,7 @@ export const makeButtonGroupStyles = cache(function makeButtonGroupStyles(k: str
         }
             
         // vertical
-        &.${k}-vertical:not(.${k}-seperate) {
+        &.${k}-vertical:not(.${k}-separate) {
             flex-direction: column;
             > .${k}-btn {
                 &:not(.${k}-btn-icon) {
@@ -575,8 +575,8 @@ export const makeButtonGroupStyles = cache(function makeButtonGroupStyles(k: str
             }
         }
 
-        // seperate
-        &.${k}-seperate {
+        // separate
+        &.${k}-separate {
             gap: 8px;
         }
     `;

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';
@@ -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(

package/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}

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

@@ -10,6 +10,9 @@ order: 33
 组件默认遇到`children`为`[]`空数组的情况就会去进行异步加载，你可以通过`loaded`属性设为`true`来
 标识该子节点已经加载完成，无需再次加载
 
+> 组件在该行数据异步加载完成后，会往原始数据上自动添加`loaded=true`。你也可以手动指定某行数据
+> `loaded=true`，这样即使组件发现该行数据`children`为空`[]`，也不会去加载了
+
 ```vdt
 import {Table, TableColumn} from 'kpc';
 

package/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
 ```

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

@@ -47,6 +47,7 @@ sidebar: doc
 | 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';

package/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

package/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}
         />
     );
 });

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

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,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);

package/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}

package/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} 
 }

package/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
+        };
+    }
+}
+```

package/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
+        };
+    }
+}
+```

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

package/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;
 }

package/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>