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

package/components/table/demos/asyncTree.md

@@ -0,0 +1,70 @@
+---
+title: 树形表格异步加载
+order: 33
+---
+
+添加`load`数据加载函数即可实现异步加载子节点功能，组件会传入当前节点对象作为参数，函数可以返回
+数组或者异步返回数组作为当前异步加载的子节点。如果子节点还可以进一步展开，可以将`children`属性
+设为空数组`[]`，否则不指定`children`则表示该节点为叶子节点。
+
+组件默认遇到`children`为`[]`空数组的情况就会去进行异步加载，你可以通过`loaded`属性设为`true`来
+标识该子节点已经加载完成，无需再次加载
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<Table data={this.get('data')} rowKey={data => data.name} load={this.loadData}>
+    <TableColumn key="name" title="Name" />
+    <TableColumn key="size" title="Size">
+        <b:template args="[data]">
+            {data.size}MB
+        </b:template>
+    </TableColumn>
+</Table>
+```
+
+```ts
+import {bind} from 'kpc';
+interface Props {
+    data: NonNullable<any>
+}
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            data: [
+                {
+                    name: 'Audios', 
+                    size: 12,
+                    children: []
+                },
+                {
+                    name: 'Images', 
+                    size: 14,
+                    children: []
+                },
+                {
+                    name: 'doc.pdf', 
+                    size: 18,
+                },
+            ]
+        }
+    }
+
+    @bind
+    loadData(node: any) {
+        return new Promise<void>(resolve => {
+            setTimeout(() => {
+                node.children = [
+                    {name: 'child1', size: 17},
+                    {name: 'child2', size: 15, loaded: true},
+                ];
+                this.set('data', [...this.get('data')]);
+
+                resolve();
+            }, 2000);
+        });
+    }
+}
+```

package/components/table/demos/ellipsis.md

@@ -0,0 +1,29 @@
+---
+title: 超长省略
+order: 34
+---
+
+通过设置`TableColumn`的`ellipsis`属性，可以指定列超长省略
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<Table data={this.get('data')} resizable>
+    <TableColumn key="a" title="Title 1" minWidth={200} ellipsis/>
+    <TableColumn key="b" title="Title 2" minWidth={300} />
+</Table>
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            data: [
+                {a: '测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长测试超长', b: 'Cell 1-2'},
+                {a: 'Cell 2-1', b: 'Cell 2-2'}
+            ]
+        };
+    }
+}
+```

package/components/table/demos/fixFooter.md

@@ -0,0 +1,52 @@
+---
+title: footer固定
+order: 35
+---
+
+`fixFooter`：设置自定义footer固定，类型`boolean`，默认：`false`；
+设置为`true`时表示固定高度，`tbody`的高度自适应，但需要自己定义表格高度
+
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<div class="wrapper">
+    <Table
+        data={[{a: 'footer不固定'}, {a: '下拉'}, {a: 'yeah!'}, {a: '你好'}, {a: '我很好'}]}
+    >
+        <TableColumn key="a" title="footer不固定" />
+        <b:footer>
+            <span>自定义footer</span>
+        </b:footer>
+    </Table>
+    <Table
+        data={[{a: 'footer固定啦'}, {a: '下拉'}, {a: 'yeah!'}, {a: '你好'}, {a: '我很好'}]}
+        fixFooter
+    >
+        <TableColumn key="a" title="footer固定" />
+        <b:footer>
+            <span>自定义footer</span>
+        </b:footer>
+    </Table>
+    <Table
+        data={[{a: 'footer固定啦'}, {a: '下拉'}, {a: 'yeah!'}, {a: '你好'}, {a: '我很好'}]}
+        fixFooter
+        fixHeader
+    >
+        <TableColumn key="a" title="footer，header同时固定" />
+        <b:footer>
+            <span>自定义footer</span>
+        </b:footer>
+    </Table>
+</div>
+```
+
+```styl
+.wrapper
+    display flex
+.k-table
+    margin-left: 20px
+    flex: 1
+.k-table-wrapper
+    height: 200px
+```

package/components/table/demos/footer.md

@@ -0,0 +1,38 @@
+---
+title: 自定义footer
+order: 32
+---
+
+
+```vdt
+import {Table, TableColumn} from 'kpc';
+
+<div>
+    <Table data={this.get('data')} resizable>
+        <TableColumn key="a" title="Title 1" minWidth={200}/>
+        <TableColumn key="b" title="Title 2" minWidth={300}/>
+        <b:footer>
+            <div class="footer">自定义底部</div>
+        </b:footer>
+    </Table>
+</div>
+```
+
+```styl
+.k-table
+    margin-bottom 20px
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            data: [
+                {a: 'Cell 1-1', b: 'Cell 1-2'},
+                {a: 'Cell 2-1', b: 'Cell 2-2'}
+            ],
+        };
+    }
+}
+```

package/components/table/index.md

@@ -45,6 +45,8 @@ sidebar: doc
 | animation | 是否开启动效，默认开启。可以通过`true` `false`全部设置，或者通过数组单独设置行和列的动效 | `boolean` &#124 `[boolean, boolean]` | `true` |
 | hideHeader | 是否隐藏表头 | `boolean` | `false` |
 | pagination | 是否支持分页 | `boolean` | `PaginationProps` | `false` |
+| fixFooter | `table`给定需要固定高度时，自定义footer固定 | `boolean` | `false` |
+| load | 指定异步加载节点数据的函数，该函数通过`Promise`返回数组来添加子节点数据 | <code>(node: any) => Promise<void> &#124; void</code> | `undefined` |
 
 ```ts
 import {Props} from 'intact';
@@ -113,6 +115,7 @@ export interface PaginationProps {
 | minWidth | 指定当前列拖动时的最小宽度，优先级高于`Table`的`minColWidth` | `number` | `undefined` |
 | className | 给当前列添加className | `string` &#124; `Record<string, any>` | `undefined` |
 | hidden | 是否隐藏当前列，仅为不可见，不影响`exportTable`导出表格 | `boolean` | `false` |
+| ellipsis | 是否开启超长省略 | `boolean` | `false` |
 
 ```ts
 import {VNode} from 'intact';
@@ -132,6 +135,7 @@ export type TableColumnGroupItem = {
 | empty | 自定义无数据展示模板 | - |
 | expand | 指定行展开后要展示的模板内容 | `([data: T, index: number]) => Children` |
 | tooltip | 行提示内容 | `([data: T, index: number]) => Children` |
+| footer | 自定义`Table`底部 | - |
 
 ## TableColumn
 

package/components/table/row.ts

@@ -14,6 +14,7 @@ import {bind} from '../utils';
 import type {TableGrid} from './useMerge';
 import { isEqualObject } from '../utils';
 import { useConfigContext } from '../config';
+import { hasOwn } from 'intact-shared';
 
 export interface TableRowProps {
     key: TableRowKey
@@ -34,10 +35,11 @@ export interface TableRowProps {
     spreaded: boolean
     hasChildren: boolean
     indent: number
-    onToggleSpreadRow: (key: TableRowKey) => void
+    onToggleSpreadRow: (key: TableRowKey, rowData?: any) => void
     onBeforeUnmount: (key: TableRowKey) => void
     offsetMap: Record<Key, number>
     animation: boolean
+    loaded: boolean
 
     draggable: boolean
     draggingKey: TableRowKey | null
@@ -65,20 +67,27 @@ export class TableRow extends Component<TableRowProps> {
         const nextProps = nextVNode.props as TableRowProps;
 
         let isSame = true;
-        let key: keyof TableRowProps;
-        for (key in lastProps) {
-            // ignore index
-            if (key === 'index') continue;
-            const lastValue = lastProps[key];
-            const nextValue = nextProps[key];
-            // deeply compare for offsetMap
-            if (key === 'offsetMap' && isEqualObject(lastValue, nextValue)) {
-                continue;
-            }
-
-            if (lastValue !== nextValue) {
-                isSame = false;
-                break;
+        if (hasOwn.call(this, 'vueInstance')) {
+            // In Vue, we may change value by modifing the same reference,
+            // and the new row may be expanded by click tree arrow
+            // so we can not compare in this case, #1030
+            isSame = false;
+        } else {
+            let key: keyof TableRowProps;
+            for (key in lastProps) {
+                // ignore index
+                if (key === 'index') continue;
+                const lastValue = lastProps[key];
+                const nextValue = nextProps[key];
+                // deeply compare for offsetMap
+                if (key === 'offsetMap' && isEqualObject(lastValue, nextValue)) {
+                    continue;
+                }
+
+                if (lastValue !== nextValue) {
+                    isSame = false;
+                    break;
+                }
             }
         }
 
@@ -109,8 +118,8 @@ export class TableRow extends Component<TableRowProps> {
     @bind
     onClickArrow(e: MouseEvent) {
         e.stopPropagation();
-        const {onToggleSpreadRow, key} = this.get();
-        onToggleSpreadRow(key);
+        const {onToggleSpreadRow, key, data} = this.get();
+        onToggleSpreadRow(key, data);
     }
 
     @bind

package/components/table/row.vdt

@@ -11,7 +11,7 @@ const {
     grid, index: rowIndex, indeterminate,
     allDisabled, selected, /* hidden,  */spreaded,
     hasChildren, indent, key, offsetMap,
-    draggable, draggingKey, animation,
+    draggable, draggingKey, animation, loaded,
 } = this.get();
 const { k } = this.config;
 
@@ -71,13 +71,13 @@ cols.forEach((props, columnIndex) => {
     if (!render) return;
 
     const columnKey = props.key;
-
     vNodes.push(
         <TableCell
             props={props}
             columnIndex={columnIndex}
             rowIndex={rowIndex}
             data={data}
+            loaded={loaded}
             offset={offsetMap[columnKey]}
             checkType={checkType}
             indent={indent}

package/components/table/styles.ts

@@ -90,7 +90,7 @@ export const makeStyles = cache(function makeStyles(k: string) {
         }
         table {
             width: 100%;
-            // border-collapse: collapse;
+            border-collapse: separate;
             border-spacing: 0;
             table-layout: fixed;
             // td, 
@@ -104,8 +104,6 @@ export const makeStyles = cache(function makeStyles(k: string) {
             text-align: ${table.thead.textAlign};
             font-size: ${table.thead.fontSize};
             font-weight: ${table.thead.fontWeight};
-            position: sticky;
-            top: 0;
             z-index: 2;
             tr {
                 height: ${table.thead.height};
@@ -114,6 +112,14 @@ export const makeStyles = cache(function makeStyles(k: string) {
                 }
             }
         }
+        tfoot {
+            z-index: 2;
+            tr {
+                td {
+                    border-top: ${table.border};
+                }
+            }
+        }
         th {
             padding: ${table.thead.padding};
             position: relative;
@@ -376,6 +382,21 @@ export const makeStyles = cache(function makeStyles(k: string) {
             .${k}-table-wrapper {
                 height: 100%;
             }
+            thead {
+                position: sticky;
+                top: 0;
+            }
+        }
+        // fixFooter
+        &.${k}-fix-footer {
+            min-height: 0;
+            .${k}-table-wrapper {
+                height: 100%;
+            }
+            tfoot {
+                position: sticky;
+                bottom: 0;
+            }
         }
     `;
 });

package/components/table/table.ts

@@ -65,6 +65,8 @@ export interface TableProps<
     animation?: boolean | [boolean, boolean]
     hideHeader?: boolean
     pagination?: boolean | PaginationProps
+    fixFooter?: boolean 
+    load?: (value: T) => Promise<void> | void
 }
 
 export interface TableEvents<T = any, K extends TableRowKey = number> {
@@ -82,6 +84,7 @@ export interface TableBlocks<T = unknown> {
     empty: null
     tooltip: [T, number] 
     expand: [T, number]
+    footer: null
 }
 
 type CheckType = 'checkbox' | 'radio' | 'none'
@@ -130,6 +133,8 @@ const typeDefs: Required<TypeDefs<TableProps<unknown>>> = {
     animation: [Boolean, Array],
     hideHeader: Boolean,
     pagination: [Boolean, Object],
+    fixFooter: Boolean,
+    load: Function,
 };
 
 const defaults = (): Partial<TableProps> => ({

package/components/table/table.vdt

@@ -25,7 +25,7 @@ const {
     merge, childrenKey, indent, tooltipPosition,
     tooltipContainer, showIndeterminate, resizable,
     draggable, animation: _animation, hideHeader,
-    pagination,
+    pagination, fixFooter,
 } = this.get();
 const animation = !Array.isArray(_animation) ? [_animation, _animation] : _animation;
 const {columns, cols, maxRows, maxCols} = this.columns.getData();
@@ -36,6 +36,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',
@@ -137,11 +138,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}
@@ -208,6 +209,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 +252,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/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/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,6 +73,8 @@ export class Tooltip<
     static defaults = defaults;
     static events = events;
 
+    public $isTooltip = true;
+
     show(shouldFocus: boolean = false) {
         if (this.get('disabled')) return;
 

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/es/components/button/index.vdt.js

@@ -55,7 +55,7 @@ export default function ($props, $blocks, $__proto__) {
       }
     });
   }
-  var classNameObj = (_classNameObj = {}, _classNameObj[cls('btn')] = true, _classNameObj[cls(size)] = size !== 'default', _classNameObj[cls(type)] = !color, _classNameObj[cls("btn-icon")] = icon, _classNameObj[className] = className, _classNameObj[cls('circle')] = circle, _classNameObj[cls('loading')] = loading, _classNameObj[cls('fluid')] = fluid, _classNameObj[cls('active')] = checked, _classNameObj[cls('disabled')] = disabled || loading, _classNameObj[cls('ghost')] = ghost, _classNameObj[cls('custom')] = color, _classNameObj[makeButtonStyles(k, iconSide, color)] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[cls('btn')] = true, _classNameObj[cls(size)] = size !== 'default', _classNameObj[cls(type)] = !color, _classNameObj[cls("btn-icon")] = icon, _classNameObj[className] = className, _classNameObj[cls('circle')] = circle, _classNameObj[cls('loading')] = loading, _classNameObj[cls('fluid')] = fluid, _classNameObj[cls('active')] = checked, _classNameObj[cls('custom')] = color, _classNameObj[cls('disabled')] = disabled || loading, _classNameObj[cls('ghost')] = ghost, _classNameObj[makeButtonStyles(k, iconSide, color)] = true, _classNameObj);
   var loadingIcon = _$cc(Icon, {
     'className': _$cn("ion-load-c " + k + "-icon-loading"),
     'size': size /*loadingSizeMap[size]*/,

package/es/components/button/styles.js

@@ -11,7 +11,7 @@ var btnStyles = {
     return theme.color.text;
   },
   bgColor: '#fff',
-  lineHeight: '1.15',
+  lineHeight: '1',
   get padding() {
     return "0 16px";
   },
@@ -199,8 +199,8 @@ export var makeButtonStyles = cache(function makeButtonStyles(k, iconSide, color
   // extract static styles to individual css method for performance
   css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", button.transition, ";line-height:", button.lineHeight, ";.", k, "-icon{color:inherit;}&.", k, "-default,&.", k, "-none,&.", k, "-flat{.", k, "-icon{color:", theme.color.lightBlack, ";}&:hover{.", k, "-icon{color:inherit;}}}&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.", k, "-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
     var typeStyles = button[type];
-    return /*#__PURE__*/css("&.", k, "-", type, "{background:", typeStyles.bgColor, ";color:", typeStyles.color, ";border-color:", typeStyles.borderColor, ";&:hover,&:focus{background:", palette(typeStyles.bgColor, -1), ";border-color:", typeStyles.hoverBorderColor, ";color:", typeStyles.color, ";}&:active{background:", palette(typeStyles.bgColor, 1), ";border-color:", palette(typeStyles.borderColor, 1), ";}}");
-  }), "&.", k, "-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}", color && /*#__PURE__*/css("&.", k, "-custom{color:", color, ";border-color:", color, ";&:hover,&:focus{background:", palette(color, -4), ";}&:active{background:", palette(color, -3), ";}}"), " &.", k, "-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.", k, "-none,&.", k, "-link,&.", k, "-flat{background:transparent;&,&:hover{border:none;}&.", k, "-active{color:", theme.color.primary, ";}}&.", k, "-none:hover{background:", button.none.hoverBgColor, ";}&.", k, "-flat{background:", button.none.hoverBgColor, ";}&.", k, "-disabled{.", k, "-icon{color:inherit;}&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.", k, "-none.", k, "-disabled,&.", k, "-link.", k, "-disabled{&,&:hover{background:transparent;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    return /*#__PURE__*/css("&.", k, "-", type, "{background:", typeStyles.bgColor, ";color:", typeStyles.color, ";border-color:", typeStyles.borderColor, ";&:hover,&:focus{background:", palette(typeStyles.bgColor, -1), ";border-color:", typeStyles.hoverBorderColor, ";color:", typeStyles.color, ";}&:active{background:", palette(typeStyles.bgColor, 1), ";border-color:", palette(typeStyles.borderColor, 1), ";}&.", k, "-disabled{&,&:hover{background:", palette(typeStyles.bgColor, -2), ";color:", palette(typeStyles.color, -2), ";border-color:", palette(typeStyles.borderColor, -2), ";}}}");
+  }), "&.", k, "-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}&.", k, "-disabled{border:none;}}", color && /*#__PURE__*/css("&.", k, "-custom{color:", color, ";border-color:", color, ";&:hover,&:focus{background:", palette(color, -4), ";}&:active{background:", palette(color, -3), ";}&.", k, "-disabled{border:none;}}"), " &.", k, "-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.", k, "-none,&.", k, "-link,&.", k, "-flat{background:transparent;&,&:hover{border:none;}&.", k, "-active{color:", theme.color.primary, ";}}&.", k, "-none:hover{background:", button.none.hoverBgColor, ";}&.", k, "-flat{background:", button.none.hoverBgColor, ";}&.", k, "-disabled{.", k, "-icon{color:inherit;}&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.", k, "-none.", k, "-disabled,&.", k, "-link.", k, "-disabled{&,&:hover{background:transparent;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = button[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{font-size:", styles.fontSize, ";height:", styles.height, ";padding:", styles.padding, ";&.", k, "-btn-icon{width:", styles.height, ";}}");
   }), "&.", k, "-btn-icon{width:", button.height, ";padding:0;.", k, "-icon{margin:0;}}&.", k, "-fluid{width:100%;padding:0;}&.", k, "-circle{border-radius:calc(", button.large.height, " / 2);}&.", k, "-loading{", _mapInstanceProperty(types).call(types, function (type) {

package/es/components/diagram/shapes/callout.d.ts

@@ -12,7 +12,7 @@ export declare class DCallout extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/circle.d.ts

@@ -12,7 +12,7 @@ export declare class DCircle extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/document.d.ts

@@ -12,7 +12,7 @@ export declare class DDocument extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

package/es/components/diagram/shapes/ellipse.d.ts

@@ -12,7 +12,7 @@ export declare class DEllipse extends DShape {
         rotatable?: boolean | undefined;
         editable?: boolean | undefined;
         connectable?: boolean | undefined;
-        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
+        strokeStyle?: "dashed" | "dotted" | "solid" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;