@king-design/intact 3.4.3 → 3.4.5

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

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/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(),

package/es/components/button/group.vdt.js

@@ -12,9 +12,10 @@ export default function ($props, $blocks, $__proto__) {
     vertical = _this$get.vertical,
     children = _this$get.children,
     fluid = _this$get.fluid,
-    seperate = _this$get.seperate;
+    seperate = _this$get.seperate,
+    separate = _this$get.separate;
   var k = this.config.k;
-  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-btns"] = true, _classNameObj[k + "-vertical"] = vertical, _classNameObj[k + "-fluid"] = fluid, _classNameObj[k + "-seperate"] = seperate, _classNameObj[className] = className, _classNameObj[makeButtonGroupStyles(k)] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-btns"] = true, _classNameObj[k + "-vertical"] = vertical, _classNameObj[k + "-fluid"] = fluid, _classNameObj[k + "-separate"] = typeof separate === 'boolean' ? separate : separate, _classNameObj[className] = className, _classNameObj[makeButtonGroupStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), children);

package/es/components/button/styles.js

@@ -219,13 +219,13 @@ export var makeButtonStyles = cache(function makeButtonStyles(k, iconSide, color
   }), ";.", k, "-icon-loading{margin-left:-1em;}}}"), ";"));
 });
 export var makeButtonGroupStyles = cache(function makeButtonGroupStyles(k) {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;flex-wrap:wrap;vertical-align:middle;.", k, "-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.", k, "-active{z-index:1;position:relative;}}&.", k, "-fluid{width:100%;}&:not(.", k, "-vertical):not(.", k, "-seperate){>.", k, "-btn{", _mapInstanceProperty(types).call(types, function (type) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;flex-wrap:wrap;vertical-align:middle;.", k, "-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.", k, "-active{z-index:1;position:relative;}}&.", k, "-fluid{width:100%;}&:not(.", k, "-vertical):not(.", k, "-separate){>.", k, "-btn{", _mapInstanceProperty(types).call(types, function (type) {
     if (type === 'active') return;
     var borderColor = button.group[type].borderColor;
     return /*#__PURE__*/css("&.", k, "-", type, ":not(:first-child){border-left-color:", borderColor, ";}&.", k, "-", type, ":not(:last-child){border-right-color:", borderColor, ";}");
-  }), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.", k, "-fluid{display:flex;>.", k, "-btn{flex:1;}}}&.", k, "-vertical:not(.", k, "-seperate){flex-direction:column;>.", k, "-btn{", _mapInstanceProperty(types).call(types, function (type) {
+  }), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.", k, "-fluid{display:flex;>.", k, "-btn{flex:1;}}}&.", k, "-vertical:not(.", k, "-separate){flex-direction:column;>.", k, "-btn{", _mapInstanceProperty(types).call(types, function (type) {
     if (type === 'active') return;
     var borderColor = button.group[type].borderColor;
     return /*#__PURE__*/css("&.", k, "-", type, ":not(:first-child){border-top-color:", borderColor, ";}&.", k, "-", type, ":not(:last-child){border-bottom-color:", borderColor, ";}");
-  }), ";&:not(.", k, "-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}&.", k, "-seperate{gap:8px;}");
+  }), ";&:not(.", k, "-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}&.", k, "-separate{gap:8px;}");
 });

package/es/components/table/cell.d.ts

@@ -16,6 +16,7 @@ export interface TableCellProps {
     onClickArrow: (e: MouseEvent) => void;
     hasChildren: boolean;
     loaded: boolean;
+    spreadArrowIndex: number;
 }
 export declare class TableCell extends Component<TableCellProps> {
     static template: string | import("intact").Template<any>;

package/es/components/table/cell.vdt.js

@@ -23,10 +23,12 @@ export default function ($props, $blocks, $__proto__) {
     rowspan = _this$get.rowspan,
     onClickArrow = _this$get.onClickArrow,
     hasChildren = _this$get.hasChildren,
-    loaded = _this$get.loaded;
+    loaded = _this$get.loaded,
+    spreadArrowIndex = _this$get.spreadArrowIndex;
   var k = this.config.k;
   var blocks = props.$blocks;
   var children = get(data, props.key);
+  var isTree = !spreadArrowIndex ? columnIndex === 0 : columnIndex === spreadArrowIndex;
   if (blocks) {
     var template = blocks.template || blocks.default;
     if (template) {
@@ -41,12 +43,12 @@ export default function ($props, $blocks, $__proto__) {
   var _getClassAndStyleForF = getClassAndStyleForFixed(props, offset, k, checkType),
     className = _getClassAndStyleForF.className,
     style = _getClassAndStyleForF.style;
-  if (columnIndex === 0 && indent) {
+  if (isTree && indent) {
     style || (style = {});
     style.paddingLeft = indent + "px";
   }
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-hidden"] = props.hidden, _classNameObj[className] = className, _classNameObj);
-  return _$ce(2, 'td', [columnIndex === 0 && hasChildren ? _$cc(Button, {
+  return _$ce(2, 'td', [hasChildren && isTree ? _$cc(Button, {
     'type': 'none',
     'icon': true,
     'circle': true,

package/es/components/table/column.vdt.js

@@ -13,7 +13,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';
@@ -49,19 +49,22 @@ export default function ($props, $blocks, $__proto__) {
     checkAll = _this$group.checkAll;
   var k = this.config.k;
   return _$cc(TableContext.Consumer, {
-    'children': function children(checkType) {
+    'children': function children(_ref) {
+      var checkType = _ref.checkType,
+        lastCellKey = _ref.lastCellKey,
+        lastCellStyle = _ref.lastCellStyle;
       return _$cc(GroupContext.Consumer, {
-        'children': function children(_ref) {
-          var currentGroup = _ref.group,
-            onChange = _ref.onChange;
+        'children': function children(_ref2) {
+          var currentGroup = _ref2.group,
+            onChange = _ref2.onChange;
           return _$cc(SortableContext.Consumer, {
-            'children': function children(_ref2) {
-              var sort = _sortInstanceProperty(_ref2),
-                onChangeSort = _ref2.onChange;
+            'children': function children(_ref3) {
+              var sort = _sortInstanceProperty(_ref3),
+                onChangeSort = _ref3.onChange;
               return _$cc(ResizableContext.Consumer, {
-                'children': function children(_ref3) {
-                  var resizable = _ref3.resizable,
-                    onStart = _ref3.onStart;
+                'children': function children(_ref4) {
+                  var resizable = _ref4.resizable,
+                    onStart = _ref4.onStart;
                   return _$cc(FixedColumnsContext.Consumer, {
                     'children': function children(offsetMap) {
                       var _classNameObj, _$cn2, _$cn4;
@@ -168,7 +171,7 @@ export default function ($props, $blocks, $__proto__) {
                         'className': _$cn(k + "-icon-down-bold " + k + "-desc"),
                         'size': 'mini'
                       })], 4, _$cn((_$cn4 = {}, _$cn4[k + "-column-sort"] = true, _$cn4[k + "-" + type] = type, _$cn4))) : undefined], 0, _$cn(k + "-table-title"))], 0, _$cn(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/es/components/table/row.d.ts

@@ -24,6 +24,7 @@ export interface TableRowProps {
     onBeforeUnmount: (key: TableRowKey) => void;
     offsetMap: Record<Key, number>;
     animation: boolean;
+    spreadArrowIndex: number;
     loaded: boolean;
     draggable: boolean;
     draggingKey: TableRowKey | null;

package/es/components/table/row.vdt.js

@@ -34,7 +34,8 @@ export default function ($props, $blocks, $__proto__) {
     draggable = _this$get.draggable,
     draggingKey = _this$get.draggingKey,
     animation = _this$get.animation,
-    loaded = _this$get.loaded;
+    loaded = _this$get.loaded,
+    spreadArrowIndex = _this$get.spreadArrowIndex;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-checked"] = checked, _classNameObj[k + "-selected"] = selected, _classNameObj[k + "-spreaded"] = spreaded, _classNameObj[k + "-dragging"] = draggingKey === key, _classNameObj[className] = className, _classNameObj);
   var getGridItem = function getGridItem(columnIndex) {
@@ -92,7 +93,8 @@ export default function ($props, $blocks, $__proto__) {
       'rowspan': spans ? spans.rowspan : undefined,
       'onClickArrow': _this.onClickArrow,
       'hasChildren': hasChildren,
-      'key': columnKey
+      'key': columnKey,
+      'spreadArrowIndex': spreadArrowIndex
     }, columnKey));
   });
   var rows = animation ? _$cc(TransitionGroup, {

package/es/components/table/styles.d.ts

@@ -1,4 +1,53 @@
 import '../../styles/global';
+declare const defaults: {
+    readonly transition: string;
+    border: string;
+    readonly borderRadius: string;
+    fontSize: string;
+    bgColor: string;
+    readonly color: string;
+    fixLeftShadow: string;
+    fixRightShadow: string;
+    thead: {
+        readonly bgColor: string;
+        readonly color: string;
+        padding: string;
+        fontSize: string;
+        fontWeight: string;
+        textAlign: string;
+        height: string;
+        delimiterHeight: string;
+        delimiterColor: string;
+    };
+    tbody: {
+        readonly hoverBgcolor: string;
+        padding: string;
+    };
+    stripeBgColor: string;
+    group: {
+        gap: string;
+        menuMaxHeight: string;
+        menuMinWidth: string;
+        readonly activeColor: string;
+        headerPadding: string;
+        readonly headerBorder: string;
+    };
+    sort: {
+        iconHeight: string;
+        gap: string;
+        readonly enabledColor: string;
+    };
+    expandBgColor: string;
+    readonly selectedBgColor: string;
+    arrow: {
+        gap: string;
+        width: string;
+    };
+    resizeWidth: string;
+    draggingOpacity: string;
+};
+declare let table: typeof defaults;
+export { table };
 export declare const makeStyles: {
     (k: string): string;
     clearCache(): {};

package/es/components/table/styles.js

@@ -89,8 +89,9 @@ setDefault(function () {
   makeStyles == null || makeStyles.clearCache();
   makeGroupMenuStyles == null || makeGroupMenuStyles.clearCache();
 });
+export { table };
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}tfoot{z-index:2;tr{td{border-top:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&.", k, "-fixed-right:before{left:-2px;}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-hidden{display:none;}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
+  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}tfoot{z-index:2;tr{td{border-top:", table.border, ";border-bottom-color:transparent;}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&.", k, "-fixed-right:before{left:-2px;}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-hidden{display:none;}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
     return /*#__PURE__*/css(".", k, "-align-", type, "{text-align:", type, ";}");
   }), ">.", k, "-pagination{margin:16px 0;}&.", k, "-fix-header{min-height:0;.", k, "-table-wrapper{height:100%;}thead{position:sticky;top:0;}}&.", k, "-fix-footer{min-height:0;.", k, "-table-wrapper{height:100%;}tfoot{position:sticky;bottom:0;}}");
 });

package/es/components/table/table.d.ts

@@ -39,6 +39,7 @@ export interface TableProps<T = any, K extends TableRowKey = TableRowKey, C exte
     hideHeader?: boolean;
     pagination?: boolean | PaginationProps;
     fixFooter?: boolean;
+    spreadArrowIndex?: number;
     load?: (value: T) => Promise<void> | void;
 }
 export interface TableEvents<T = any, K extends TableRowKey = number> {

package/es/components/table/table.js

@@ -63,6 +63,7 @@ var typeDefs = {
   hideHeader: Boolean,
   pagination: [Boolean, Object],
   fixFooter: Boolean,
+  spreadArrowIndex: Number,
   load: Function
 };
 var defaults = function defaults() {

package/es/components/table/table.vdt.js

@@ -55,13 +55,17 @@ export default function ($props, $blocks, $__proto__) {
     _animation = _this$get.animation,
     hideHeader = _this$get.hideHeader,
     pagination = _this$get.pagination,
-    fixFooter = _this$get.fixFooter;
+    fixFooter = _this$get.fixFooter,
+    spreadArrowIndex = _this$get.spreadArrowIndex;
   var animation = !Array.isArray(_animation) ? [_animation, _animation] : _animation;
   var _this$columns$getData = this.columns.getData(),
     columns = _this$columns$getData.columns,
     cols = _this$columns$getData.cols,
     maxRows = _this$columns$getData.maxRows,
     maxCols = _this$columns$getData.maxCols;
+  var _this$columns$getStyl = this.columns.getStyleForLastColumn(),
+    lastCellKey = _this$columns$getStyl.lastCellKey,
+    lastCellStyle = _this$columns$getStyl.lastCellStyle;
   var _this$fixedColumns = this.fixedColumns,
     scrollPosition = _this$fixedColumns.scrollPosition,
     hasFixed = _this$fixedColumns.hasFixed,
@@ -101,7 +105,11 @@ export default function ($props, $blocks, $__proto__) {
     onChangeChecked = _this$checked.onChangeChecked;
   var allCheckedStatus = getAllCheckedStatus();
   var thead = hideHeader ? null : _$cc(TableContext.Provider, {
-    'value': checkType,
+    'value': {
+      checkType: checkType,
+      lastCellKey: lastCellKey,
+      lastCellStyle: lastCellStyle
+    },
     'children': _$cc(GroupContext.Provider, {
       'value': {
         group: group,
@@ -205,6 +213,7 @@ export default function ($props, $blocks, $__proto__) {
         'onBeforeUnmount': _this.resetRowStatus.onRowBeforeUnmount,
         'offsetMap': offsetMap.value,
         'animation': animation[1],
+        'spreadArrowIndex': spreadArrowIndex,
         'draggable': draggable,
         'draggingKey': draggingKey.value,
         'onRowDragStart': onRowDragStart,

package/es/components/table/useColumns.d.ts

@@ -14,4 +14,13 @@ export declare function useColumns(): {
         maxRows: number;
         maxCols: number;
     };
+    getStyleForLastColumn: () => {
+        lastCellKey: null;
+        lastCellStyle: null;
+    } | {
+        lastCellKey: import("intact").Key | null;
+        lastCellStyle: {
+            'border-right': string;
+        };
+    };
 };

package/es/components/table/useColumns.js

@@ -3,6 +3,7 @@ import { useInstance, directClone } from 'intact';
 import { eachChildren, isComponentVNode } from '../utils';
 import { TableColumn } from './column';
 import { createContext } from '../context';
+import { table as theme } from './styles';
 export var context = createContext();
 export function useColumns() {
   var instance = useInstance();
@@ -89,9 +90,36 @@ export function useColumns() {
       maxCols: maxCols
     };
   }
+  function getStyleForLastColumn() {
+    if (instance.get('type') !== 'grid' || !columns.length || !cols.length) {
+      return {
+        lastCellKey: null,
+        lastCellStyle: null
+      };
+    }
+    var lastRow = columns[columns.length - 1];
+    var lastTrItem = lastRow[lastRow.length - 1];
+    var 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: getColumns,
     getCols: getCols,
-    getData: getData
+    getData: getData,
+    getStyleForLastColumn: getStyleForLastColumn
   };
 }

package/es/components/tip/index.d.ts

@@ -1,12 +1,17 @@
+import { TypeDefs } from 'intact';
 import { Tag, TagProps, TagEvents, TagBlocks } from '../tag/base';
 export interface TipProps extends TagProps {
+    showIcon?: boolean;
 }
 export interface TipEvents extends TagEvents {
 }
 export interface TipBlocks extends TagBlocks {
     title: null;
     close: null;
+    icon: null;
 }
 export declare class Tip extends Tag<TipProps, TipEvents, TipBlocks> {
-    static template: string | import("vdt").Template<any>;
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<TipProps>>;
+    static defaults: () => Partial<TipProps>;
 }

package/es/components/tip/index.js

@@ -1,6 +1,15 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
 import template from './index.vdt';
 import { Tag } from '../tag/base';
+var typeDefs = _extends({}, Tag.typeDefs, {
+  showIcon: Boolean
+});
+var defaults = function defaults() {
+  return _extends({}, Tag.defaults(), {
+    showIcon: false
+  });
+};
 export var Tip = /*#__PURE__*/function (_Tag) {
   _inheritsLoose(Tip, _Tag);
   function Tip() {
@@ -8,4 +17,6 @@ export var Tip = /*#__PURE__*/function (_Tag) {
   }
   return Tip;
 }(Tag);
-Tip.template = template;
+Tip.template = template;
+Tip.typeDefs = typeDefs;
+Tip.defaults = defaults;