@king-design/intact 3.4.3-beta.0 → 3.4.3-beta.1

package/components/button/demos/disabled.md

@@ -10,19 +10,9 @@ import {Button, Icon} from 'kpc';
 
 <div>
     <Button disabled>disabled</Button>
-    <Button type="primary" disabled>primary</Button>
-    <Button type="secondary" disabled>secondary</Button>
-    <Button type="warning" disabled>warning</Button>
-    <Button type="danger" disabled>danger</Button>
-    <Button type="success" disabled>success</Button>
-    <Button type="none" disabled>none</Button>
-    <Button type="link" disabled>link</Button>
-    <Button type="flat" disabled>flat</Button>
-    <Button color="red" disabled>custom</Button>
+    <Button disabled type="none">disabled text</Button>
+    <Button disabled icon circle><Icon class="k-icon-search" /></Button>
+    <Button disabled type="link">link</Button>
+    <Button disabled type="flat">flat</Button>
 </div>
 ```
-
-```styl
-.k-btn
-    margin 0 20px 20px 0
-```

package/components/button/index.vdt

@@ -49,9 +49,9 @@ const classNameObj = {
     [cls('loading')]: loading,
     [cls('fluid')]: fluid,
     [cls('active')]: checked,
-    [cls('custom')]: color,
     [cls('disabled')]: disabled || loading,
     [cls('ghost')]: ghost,
+    [cls('custom')]: color,
     [makeButtonStyles(k, iconSide, color)]: true,
 };
 

package/components/button/styles.ts

@@ -31,7 +31,7 @@ const sizes = ['large', 'small', 'mini'] as const;
 const btnStyles = {
     get color() { return theme.color.text },
     bgColor: '#fff',
-    lineHeight: '1',
+    lineHeight: '1.15',
     get padding() { return `0 16px` },
     get borderColor() { return theme.color.border },
     get borderRadius() { return theme.borderRadius },
@@ -230,13 +230,6 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
                             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)};
-                            }
-                        }
                     }
                 `;
             })}
@@ -252,9 +245,6 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
                 &:active {
                     background: ${secondary.activeBgColor};
                 }
-                &.${k}-disabled {
-                    border: none;
-                }
             }
 
             
@@ -270,9 +260,6 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
                     &:active {
                         background: ${palette(color, -3)};
                     }
-                    &.${k}-disabled {
-                        border: none;
-                    }
                 }
             `}
 

package/components/dialog/styles.ts

@@ -52,12 +52,12 @@ const defaults = {
         padding: `0 24px`,
         bodyMarginTop: `-25px`,
         tipIconMarginBottom: '10px',
-        tipIconFontSize: '24px',
-        tipIconLineHeight: '24px',
+        tipIconFontSize: '37px',
+        tipIconLineHeight: '37px',
 
         // with title
         titleFontWeight: '500',
-        titleTipIconFontSize: '24px',
+        titleTipIconFontSize: '37px',
         titleFontSize: '14px',
         wrapperPaddingLeft: '8px',
         titleBodyMarginTop: '-36px',

package/components/dropdown/item.ts

@@ -7,7 +7,6 @@ import {DropdownMenu, DROPDOWN_MENU} from './menu';
 import {IgnoreClickEvent} from '../../hooks/useDocumentClick';
 import { Dropdown as ExportDropdown, DropdownMenu as ExportDropdownMenu } from '.';
 import { useConfigContext } from '../config';
-import type { Tooltip } from '../tooltip/tooltip';
 
 export interface DropdownItemProps {
     disabled?: boolean
@@ -62,12 +61,8 @@ export class DropdownItem extends Component<DropdownItemProps, DropdownItemEvent
         if (this.get('hideOnSelect')) {
             // hide all dropdowns
             let dropdown = this.dropdown;
-            do {
-                if (!(dropdown as Tooltip).$isTooltip) {
-                    dropdown!.hide(true);
-                }
-                dropdown = dropdown!.dropdown;
-            } while (dropdown);
+            do { dropdown!.hide(true); }
+            while (dropdown = dropdown!.dropdown);
         }
     }
 

package/components/editable/index.spec.ts

@@ -17,7 +17,7 @@ describe('Editable', () => {
         expect(element.innerHTML).to.matchSnapshot();
 
         // input
-        let input = element.querySelector('textarea') as HTMLTextAreaElement;
+        let input = element.querySelector('input') as HTMLInputElement;
         input.value = 'test';
         dispatchEvent(input, 'blur');
         await wait();
@@ -29,7 +29,7 @@ describe('Editable', () => {
         editable.edit();
         await wait();
         expect(element.innerHTML).to.matchSnapshot();
-        input = element.querySelector('textarea') as HTMLTextAreaElement;
+        input = element.querySelector('input') as HTMLInputElement;
         input.value = 'new';
         dispatchEvent(input, 'keydown', {keyCode: 27});
         await wait();
@@ -41,7 +41,7 @@ describe('Editable', () => {
         editable.edit();
         await wait();
         expect(element.innerHTML).to.matchSnapshot();
-        input = element.querySelector('textarea') as HTMLTextAreaElement;
+        input = element.querySelector('input') as HTMLInputElement;
         input.value = 'new';
         dispatchEvent(input, 'keydown', {keyCode: 13});
         await wait();
@@ -58,7 +58,7 @@ describe('Editable', () => {
         // @ts-ignore
         first.edit();
         await wait();
-        let input = (findDomFromVNode(first.$lastInput!, true) as HTMLElement).querySelector('textarea') as HTMLTextAreaElement;
+        let input = (findDomFromVNode(first.$lastInput!, true) as HTMLElement).querySelector('input') as HTMLInputElement;
         dispatchEvent(input, 'focus');
         input.value = 'a';
         dispatchEvent(input, 'input');
@@ -69,7 +69,7 @@ describe('Editable', () => {
         // @ts-ignore
         second.edit();
         await wait();
-        input = (findDomFromVNode(second.$lastInput!, true) as HTMLElement).querySelector('textarea') as HTMLTextAreaElement;
+        input = (findDomFromVNode(second.$lastInput!, true) as HTMLElement).querySelector('input') as HTMLInputElement;
         input.value = 'a';
         dispatchEvent(input, 'input');
         dispatchEvent(input, 'blur');
@@ -79,7 +79,7 @@ describe('Editable', () => {
         // @ts-ignore
         third.edit();
         await wait();
-        input = (findDomFromVNode(third.$lastInput!, true) as HTMLElement).querySelector('textarea') as HTMLTextAreaElement;
+        input = (findDomFromVNode(third.$lastInput!, true) as HTMLElement).querySelector('input') as HTMLInputElement;
         input.value = 'a';
         dispatchEvent(input, 'input');
         dispatchEvent(input, 'blur');
@@ -110,14 +110,14 @@ describe('Editable', () => {
         expect(element.outerHTML).to.matchSnapshot();
         element.querySelector<HTMLElement>('.k-editable-icon')!.click();
         await wait();
-        let input = element.querySelector("textarea") as HTMLTextAreaElement;
+        let input = element.querySelector("input") as HTMLInputElement;
         input.value = 'aa';
         dispatchEvent(input, 'blur');
         await wait();
         expect(element.innerText).to.eql('test');
         element.querySelector<HTMLElement>('.k-editable-icon')!.click();
         await wait();
-        input = element.querySelector("textarea") as HTMLTextAreaElement;
+        input = element.querySelector("input") as HTMLInputElement;
         expect(input.value).to.eql('aa');
     });
 });

package/components/editable/index.vdt

@@ -31,9 +31,7 @@ const classNameObj = {
             ref={this.inputRef}
             frozenOnInput
             ev-$mounted={this.select}
-            width={300}
-            type="textarea"
-            rows="auto"
+            autoWidth
         />
     </div>
     <Tooltip v-if={!disabled && !editing} content={tip}>

package/components/editable/styles.ts

@@ -6,7 +6,7 @@ import { cache } from '../utils';
 
 const defaults = {
     iconGap: '0 0 0 8px',
-    get smallPadding() { return theme.small.padding },
+
     // invalid
     invalid: {
         get border() { return `1px solid ${theme.color.danger}`}, 
@@ -35,12 +35,5 @@ export const makeStyles = cache(function makeStyles(k: string) {
                 border: ${editable.invalid.border} !important;
             }
         }
-        &.${k}-editable {
-            .${k}-type-textarea {
-                .${k}-textarea {
-                    padding: 0 ${editable.smallPadding};
-                } 
-            }
-        }
     `;
 });

package/components/ellipsis/index.vdt

@@ -30,7 +30,6 @@ const wrapper = <div class={{
         position={position}
         theme={theme}
         class={className}
-        hoverable
     >
         {wrapper}
         <b:content>{children}</b:content> 

package/components/select/base.ts

@@ -19,7 +19,6 @@ import {useFocusout} from './useFocusout';
 import type {Events} from '../types';
 import {isNullOrUndefined} from 'intact-shared';
 import { useDraggable } from './useDraggble';
-import { useImmutable } from './useImmutable';
 import { useConfigContext } from '../config';
 
 export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach = V | null> {
@@ -108,7 +107,6 @@ export abstract class BaseSelect<
     public input = useInput(this.resetKeywords);
     private focusout = useFocusout();
     private draggable = useDraggable();
-    public immutable = useImmutable();
     protected config = useConfigContext();
 
     init() {
@@ -162,11 +160,7 @@ export abstract class BaseSelect<
     @bind
     protected clear(e: MouseEvent) {
         e.stopPropagation();
-        const {value, multiple} = this.get();
-        const immutableValues = this.immutable.immutableValues.value;
-    
-        this.set('value', multiple ? (Array.isArray(value) ? value.filter(key => immutableValues.includes(key)) : []) : null);
-
+        this.set('value', this.get('multiple') ? [] : null);
     }
 
     @bind

package/components/select/base.vdt

@@ -39,7 +39,6 @@ const label = this.getLabel();
 const hasValue = this.hasValue();
 const {onInput, inputRef, keywords: {value: keywords}} = this.input;
 const {onFocusout, triggerRef} = this.focusout;
-const {isClosable} = this.immutable;
 const filterInput = <Input v-if={filterable}
     class={`${k}-select-input`}
     value={keywords}
@@ -123,7 +122,7 @@ const filterInput = <Input v-if={filterable}
                                                         value[$key] :
                                                         $key
                                             }
-                                            closable={isClosable(value[$key])}
+                                            closable
                                             ev-close={this.delete.bind(this, $key)}
                                             disabled={disabled}
                                             size={size}

package/components/switch/index.ts

@@ -50,7 +50,7 @@ const defaults = (): Partial<SwitchProps> => ({
     value: false,
     trueValue: true,
     falseValue: false,
-    size: 'small',
+    size: 'default',
     loading: false,
 });
 

package/components/table/cell.ts

@@ -18,7 +18,6 @@ export interface TableCellProps {
     rowspan: number
     onClickArrow: (e: MouseEvent) => void 
     hasChildren: boolean
-    loaded: boolean
 }
 
 export class TableCell extends Component<TableCellProps> {

package/components/table/cell.vdt

@@ -3,12 +3,11 @@ import {get, noop} from 'intact-shared';
 import {Button} from '../button';
 import {Icon} from '../icon';
 import {getTextByChildren} from '../utils';
-import {Ellipsis} from '../ellipsis';
 
 const {
     props, rowIndex, columnIndex, offset,
     data, checkType, indent, grid,
-    colspan, rowspan, onClickArrow, hasChildren, loaded
+    colspan, rowspan, onClickArrow, hasChildren,
 } = this.get();
 const { k } = this.config;
 
@@ -21,10 +20,6 @@ if (blocks) {
     }
 }
 
-if (props.ellipsis) {
-    children = <Ellipsis>{children}</Ellipsis>
-}
-
 let {className, style} = getClassAndStyleForFixed(props, offset, k, checkType);
 if (columnIndex === 0 && indent) {
     style || (style = {});
@@ -47,8 +42,7 @@ const classNameObj = {
         class={`${k}-table-arrow`}
         ev-click={onClickArrow}
     >
-        <Icon v-if={loaded !== false} class={`${k}-icon-right`} size="small" />
-        <Icon v-else class={`${k}-tree-icon ion-load-c`} rotate />
+        <Icon class={`${k}-icon-right`} size="small" />
     </Button>
     {children}
 </td>

package/components/table/column.ts

@@ -18,7 +18,6 @@ export interface TableColumnProps {
     exportCell?: (data: any, index: number) => string
     minWidth?: number
     hidden?: boolean
-    ellipsis?: boolean
 
     // passed by Table
     // offset: number
@@ -59,7 +58,6 @@ const typeDefs: Required<TypeDefs<TableColumnProps>> = {
     exportCell: Function,
     minWidth: Number,
     hidden: Boolean,
-    ellipsis: Boolean,
 
     // offset: null,
     cols: null,

package/components/table/index.md

@@ -45,7 +45,6 @@ sidebar: doc
 | animation | 是否开启动效，默认开启。可以通过`true` `false`全部设置，或者通过数组单独设置行和列的动效 | `boolean` &#124 `[boolean, boolean]` | `true` |
 | hideHeader | 是否隐藏表头 | `boolean` | `false` |
 | pagination | 是否支持分页 | `boolean` | `PaginationProps` | `false` |
-| load | 指定异步加载节点数据的函数，该函数通过`Promise`返回数组来添加子节点数据 | <code>(node: any) => Promise<void> &#124; void</code> | `undefined` |
 
 ```ts
 import {Props} from 'intact';
@@ -114,7 +113,6 @@ 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';
@@ -134,7 +132,6 @@ export type TableColumnGroupItem = {
 | empty | 自定义无数据展示模板 | - |
 | expand | 指定行展开后要展示的模板内容 | `([data: T, index: number]) => Children` |
 | tooltip | 行提示内容 | `([data: T, index: number]) => Children` |
-| footer | 自定义`Table`底部 | - |
 
 ## TableColumn
 

package/components/table/row.ts

@@ -34,11 +34,10 @@ export interface TableRowProps {
     spreaded: boolean
     hasChildren: boolean
     indent: number
-    onToggleSpreadRow: (key: TableRowKey, rowData?: any) => void
+    onToggleSpreadRow: (key: TableRowKey) => void
     onBeforeUnmount: (key: TableRowKey) => void
     offsetMap: Record<Key, number>
     animation: boolean
-    loaded: boolean
 
     draggable: boolean
     draggingKey: TableRowKey | null
@@ -110,8 +109,8 @@ export class TableRow extends Component<TableRowProps> {
     @bind
     onClickArrow(e: MouseEvent) {
         e.stopPropagation();
-        const {onToggleSpreadRow, key, data} = this.get();
-        onToggleSpreadRow(key, data);
+        const {onToggleSpreadRow, key} = this.get();
+        onToggleSpreadRow(key);
     }
 
     @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, loaded,
+    draggable, draggingKey, animation,
 } = 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: separate;
+            // border-collapse: collapse;
             border-spacing: 0;
             table-layout: fixed;
             // td, 

package/components/table/table.ts

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

package/components/table/table.vdt

@@ -137,11 +137,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}
@@ -199,15 +199,7 @@ const tbody = (
 
                     return hidden || !spreaded;
                 });
-                if ($blocks.footer) {
-                    rows.push(
-                        <tr key="table-footer">
-                            <td colspan={colCount} class={`${k}-table-footer`}>
-                                <b:footer />
-                            </td>
-                        </tr>
-                    );
-                }
+
                 return animation[0] ?
                     <TransitionGroup name="k-fade-in-left" move={!draggingKey.value}>{rows}</TransitionGroup> :
                     rows;

package/components/table/useGroup.ts

@@ -65,7 +65,7 @@ export function useGroup() {
 
     function isEmptyValue(groupValue: any) {
         const {multiple} = instance.get();
-        return !groupValue || multiple && (!isArray(groupValue) || groupValue.every(value => !value));
+        return (!groupValue && groupValue !== 0) || multiple && (!isArray(groupValue) || groupValue.every(value => !value));
     }
 
     watchState(keywords, (v) => {

package/components/table/useTree.ts

@@ -11,15 +11,8 @@ export function useTree(data: State<any[] | undefined>) {
         return inArray(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 toggleSpreadRow(key: TableRowKey) {
+        instance.set('spreadKeys', toggleArray(instance.get('spreadKeys'), key));
     }
 
     function loopData<T>(

package/components/tooltip/tooltip.ts

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

package/components/treeSelect/index.vdt

@@ -37,7 +37,6 @@ 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('custom')] = color, _classNameObj[cls('disabled')] = disabled || loading, _classNameObj[cls('ghost')] = ghost, _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('disabled')] = disabled || loading, _classNameObj[cls('ghost')] = ghost, _classNameObj[cls('custom')] = color, _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',
+  lineHeight: '1.15',
   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, "-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) {
+    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) {
     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?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | 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?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | 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?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | 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?: "dashed" | "dotted" | "solid" | undefined;
+        strokeStyle?: "solid" | "dashed" | "dotted" | undefined;
         label?: string | number | undefined;
         style?: Record<string, string | number> | undefined;
         data?: any;

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

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