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

package/components/table/table.vdt

@@ -25,10 +25,11 @@ const {
     merge, childrenKey, indent, tooltipPosition,
     tooltipContainer, showIndeterminate, resizable,
     draggable, animation: _animation, hideHeader,
-    pagination,
+    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;
@@ -36,6 +37,7 @@ const { k } = this.config;
 const classNameObj = {
     [`${k}-table`]: true,
     [`${k}-fix-header`]: fixHeader,
+    [`${k}-fix-footer`]: fixFooter,
     [`${k}-scroll-${scrollPosition.value}`]: scrollPosition.value,
     [`${k}-fix-columns`]: hasFixed.value,
     [`${k}-${type}`]: type && type !== 'default',
@@ -70,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}}>
@@ -137,11 +139,11 @@ const tbody = (
                     const spreaded = isSpreaded(key);
                     const hasChildren = !!childrenKey && Array.isArray(value[childrenKey]);
                     const indentSize = indent ? indent * level : 0; 
-
                     let row = <TableRow
                         key={key}
                         cols={cols}
                         data={value}
+                        loaded={value.loaded}
                         checkType={checkType}
                         hasFixedLeft={hasFixedLeft}
                         onClick={this.clickRow}
@@ -162,6 +164,7 @@ const tbody = (
                         onBeforeUnmount={this.resetRowStatus.onRowBeforeUnmount}
                         offsetMap={offsetMap.value}
                         animation={animation[1]}
+                        spreadArrowIndex={spreadArrowIndex}
 
                         draggable={draggable}
                         draggingKey={draggingKey.value}
@@ -208,6 +211,17 @@ const tbody = (
     </tbody>
 );
 
+let tfooter = null;
+if ($blocks.footer) {
+    tfooter = <tfoot>
+        <tr key="table-footer">
+            <td colspan={colCount} class={`${k}-table-footer`}>
+                <b:footer />
+            </td>
+        </tr>
+    </tfoot>
+}
+
 const tableWidthPx = tableWidth.value ? `${tableWidth.value}px` : null;
 const {
     shouldStickScrollbar,
@@ -240,6 +254,7 @@ const {
             <template>{colgroup}</template>
             <template v-if={isNull(stickHeader.value)}>{thead}</template>
             <template>{tbody}</template>
+            <template v-if={$blocks.footer}>{tfooter}</template>
         </table>
     </div>
     <Pagination v-if={pagination}

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/table/useTree.ts

@@ -11,8 +11,15 @@ export function useTree(data: State<any[] | undefined>) {
         return inArray(instance.get('spreadKeys'), key);
     }
 
-    function toggleSpreadRow(key: TableRowKey) {
-        instance.set('spreadKeys', toggleArray(instance.get('spreadKeys'), key));
+    async function toggleSpreadRow(key: TableRowKey, rowData?: any) {
+        const {spreadKeys, load} = instance.get();
+        instance.set('spreadKeys', toggleArray(spreadKeys, key));
+        if (load && data.value && !rowData.loaded) {
+            rowData.loaded = false;
+            await load(rowData); 
+            rowData.loaded = true;
+            instance.forceUpdate();
+        }
     }
 
     function loopData<T>(

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>

package/components/tip/styles.ts

@@ -1,7 +1,7 @@
 import {theme, setDefault} from '../../styles/theme';
 import {css} from '@emotion/css';
 import '../../styles/global';
-import {deepDefaults}  from '../../styles/utils';
+import {deepDefaults, sizes}  from '../../styles/utils';
 import { cache } from '../utils';
 
 const defaults = {
@@ -12,6 +12,35 @@ const defaults = {
     },
     get color() { return theme.color.text },
     get padding() { return `6px ${theme.default.padding}` },
+    content: {
+        padding: '7px 33px 8px 8px',
+    },
+    icon: {
+        fontSize: `18px`,
+        left: `16px`,
+        top: `6px`,
+    },
+    large: {
+        padding: `12px`,
+        get fontSize() { return theme.default.fontSize },
+        close: {
+            height: '42px',
+        }
+    },
+    small: {
+        padding: `4px 12px`,
+        get fontSize() { return theme.small.fontSize },
+        close: {
+            height: '26px',
+        }
+    },
+    mini: {
+        padding: `2px 12px`,
+        fontSize: '11px',
+        close: {
+            height: '20px',
+        }
+    },
 };
 
 let tip: typeof defaults;
@@ -29,6 +58,23 @@ export const makeStyles = cache(function makeStyles(k: string) {
             padding: 0;
             color: ${tip.color} !important;
             align-items: flex-start;
+            ${sizes.map(s => {
+                if (s === 'default') return;
+                const styles = tip[s];
+                return css `
+                    &.${k}-${s} {
+                        padding: 0;
+                        height: auto;
+                        font-size: ${styles.fontSize};
+                        .${k}-tip-wrapper {
+                            padding: ${styles.padding};
+                        }
+                        .${k}-tip-close {
+                            height: ${styles.close.height};
+                        }
+                    }
+                `;
+            })}
         }
         .${k}-tip-wrapper {
             flex: 1;
@@ -39,14 +85,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: 30px;
+            &: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};
+                    }
+                }
+            `
+        })}
     `;
 });

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

package/components/tooltip/demos/content.md

@@ -6,7 +6,7 @@ order: 3
 使用`content`扩展点，可以自定义复杂的提示内容
 
 ```vdt
-import {Tooltip, Slider, Button} from 'kpc';
+import {Tooltip, Slider, Button, Select, Option} from 'kpc';
 
 <div>
     <Tooltip trigger="click">
@@ -19,15 +19,30 @@ import {Tooltip, Slider, Button} from 'kpc';
             />
         </b:content>
     </Tooltip>
+    <Tooltip trigger="click" theme="light">
+        <Button>Test Dropdown</Button>
+        <b:content>
+            <Select v-model="day" width={200}>
+                <Option value="Monday">星期一</Option>
+                <Option value="Tuesday">星期二</Option>
+            </Select>
+        </b:content>
+    </Tooltip>
 </div>
 ```
 
+```styl
+.k-btn 
+    margin-right 8px
+```
+
 ```ts
 export default class extends Component {
     static template = template;
     static defaults() {
         return {
-            volume: 0
+            volume: 0,
+            day: 'Monday'
         };
     };
 }

package/components/tooltip/index.spec.ts

@@ -148,14 +148,33 @@ describe('Tooltip', () => {
     it('should custom content correctly', async () => {
         const [, element] = mount(ContentDemo);
 
-        const [btn] =  Array.from<HTMLElement>(element.querySelectorAll('.k-btn'));
-        btn.click();
+        const [btn1] =  Array.from<HTMLElement>(element.querySelectorAll('.k-btn'));
+        btn1.click();
         await wait(500);
         const content = getElement('.k-tooltip-content') as HTMLElement;
         // ignore the arrow, because it may change className to adapt to the direction
         expect(content.querySelector<HTMLElement>('.k-slider')!.outerHTML).to.matchSnapshot();
     });
 
+    it('Internal dropdown closing should not affect tooltip', async () => {
+        const [, element] = mount(ContentDemo);
+
+        const [, btn2] =  Array.from<HTMLElement>(element.querySelectorAll('.k-btn'));
+        btn2.click();
+        await wait(500);
+        const content = getElement('.k-tooltip-content') as HTMLElement;
+        const trigger = content.querySelector('.k-select') as HTMLElement;
+        trigger.click();
+        await wait();
+        expect(element.outerHTML).to.matchSnapshot();
+        const dropdown = getElement('.k-select-menu')!;
+        expect(dropdown.innerHTML).to.matchSnapshot();
+        const item = dropdown.querySelector('.k-dropdown-item') as HTMLElement;
+        item.click();
+        await wait(500);
+        expect(content.style.display).to.eql('')
+    });
+
 
     it('should always show tooltip', async () => {
         const [, element] = mount(AlwaysDemo);

package/components/tooltip/tooltip.ts

@@ -73,8 +73,11 @@ export class Tooltip<
     static defaults = defaults;
     static events = events;
 
+    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);

package/components/transfer/index.vdt

@@ -82,16 +82,14 @@ const Panel = (model) => {
         <Button circle icon 
             disabled={!enableRemove()}
             ev-click={remove}
-            type="primary"
-            size="large"
+            type="secondary"
         >
             <Icon class={`${k}-transfer-icon ${k}-icon-left`} />
         </Button>
         <Button circle icon 
             disabled={!enableAdd()}
             ev-click={add}
-            type="primary"
-            size="large"
+            type="secondary"
         >
             <Icon class={`${k}-transfer-icon ${k}-icon-right`} />
         </Button>

package/components/tree/demos/loading.md

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

package/components/treeSelect/demos/basic.md

@@ -19,6 +19,7 @@ import {TreeSelect} from 'kpc';
 <TreeSelect
     v-model="value"
     data={this.get('data')}
+    showLine={false}
 />
 ```
 

package/components/treeSelect/index.vdt

@@ -37,6 +37,7 @@ const { k } = this.config;
                 multiple={multiple}
                 selectable={!checkbox}
                 load={load}
+                showLine={showLine}
                 filter={filterable ? this.filter : null}
 
                 ev-transitionEnd={this.position}

package/components/upload/demos/files.md

@@ -40,6 +40,7 @@ export default class extends Component<Props> {
                 {name: 'test1.jpg', url: 'http://www.example.com/test1.jpg'},
                 {name: 'test2.png', url: 'http://www.example.com/test2.png'},
                 {name: 'test3.png', status: UploadFileStatus.Error},
+                {name: 'test4-测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长.png', url: 'http://www.example.com/test4.png'},
             ]
         } as Props;
     }

package/components/upload/index.vdt

@@ -1,6 +1,7 @@
 import {Button} from '../button';
 import {Progress} from '../progress';
 import {Dialog} from '../dialog';
+import {Ellipsis} from '../ellipsis';
 import {expandAnimationCallbacks, getRestProps} from '../utils';
 import {makeStyles, makeUploadDialogStyles} from './styles';
 import {TransitionGroup, Transition, linkEvent} from 'intact';
@@ -131,7 +132,9 @@ const {show, close, image, isShow} = this.showImage;
                 <div class={`${k}-upload-file-main`}>
                     <div class={`${k}-upload-name c-ellipsis`}>
                         <Icon class={`${k}-upload-file-icon ion-document`} />
-                        <span class={`${k}-upload-file-name`}>{$value.name}</span>
+                        <span class={`${k}-upload-file-name`}>
+                            <Ellipsis>{$value.name}</Ellipsis>
+                        </span>
                         <Icon class={`${k}-upload-status-icon ${k}-icon-success-fill`} 
                             v-if={$value.status === UploadFileStatus.Done}
                         />

package/components/upload/styles.ts

@@ -134,6 +134,7 @@ export const makeStyles = cache(function makeStyles(k: string) {
         }
         .${k}-upload-file-name {
             flex: 1;
+            min-width: 0;
         }
         .${k}-upload-status-icon {
             color: ${upload.file.status.color};

package/es/components/button/group.d.ts

@@ -5,6 +5,7 @@ export interface ButtonGroupProps {
     checkType?: 'none' | 'radio' | 'checkbox';
     fluid?: boolean;
     seperate?: boolean;
+    separate?: boolean;
     btnWidth?: number | string;
 }
 export declare class ButtonGroup extends Component<ButtonGroupProps> {

package/es/components/button/group.js

@@ -11,6 +11,7 @@ var typeDefs = {
   fluid: Boolean,
   checkType: ['none', 'radio', 'checkbox'],
   seperate: Boolean,
+  separate: Boolean,
   btnWidth: [Number, String]
 };
 var defaults = function defaults() {
@@ -33,6 +34,9 @@ export var ButtonGroup = /*#__PURE__*/function (_Component) {
   var _proto = ButtonGroup.prototype;
   _proto.init = function 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");
+    }
   };
   _proto.setValue = function setValue(v) {
     var _this$get = this.get(),