@king-design/intact 3.1.2 → 3.1.4-beta.0

package/components/button/demos/disabled.md

@@ -6,12 +6,12 @@ order: 5
 添加`disabled`属性，可以禁用按钮
 
 ```vdt
-import {Button} from 'kpc';
+import {Button, Icon} from 'kpc';
 
 <div>
     <Button disabled>disabled</Button>
     <Button disabled type="none">disabled text</Button>
-    <Button disabled icon circle><i class="k-icon k-icon-search"></i></Button>
+    <Button disabled icon circle><Icon class="k-icon-search" /></Button>
     <Button disabled type="link">link</Button>
     <Button disabled type="flat">flat</Button>
 </div>

package/components/button/demos/ghost.md

@@ -6,11 +6,11 @@ order: 6
 给组件添加`ghost`属性，可以展示透明背景的按钮，常用于深色背景下
 
 ```vdt
-import {Button} from 'kpc';
+import {Button, Icon} from 'kpc';
 
 <div class="wrapper">
-    <Button ghost>default</Button>
-    <Button type="primary" ghost>primay</Button>
+    <Button ghost><Icon class="k-icon-left" />default</Button>
+    <Button type="primary" ghost>primay<Icon class="k-icon-right" /></Button>
     <Button type="warning" ghost>warning</Button>
     <Button type="danger" ghost>danger</Button>
     <Button type="success" ghost>success</Button>

package/components/button/demos/group.md

@@ -7,7 +7,7 @@ order: 1
 可以是按钮组纵向排列。给`ButtonGroup`添加`checkType`属性，可以使按钮组拥有单选或复选能力。
 
 ```vdt
-import {Button, ButtonGroup} from 'kpc';
+import {Button, ButtonGroup, Icon} from 'kpc';
 
 <div>
     <ButtonGroup>
@@ -27,10 +27,10 @@ import {Button, ButtonGroup} from 'kpc';
     </ButtonGroup>
     <ButtonGroup>
         <Button type="primary">
-            <i class="k-icon k-icon-left"></i>上一页
+            <Icon class="k-icon-left" />上一页
         </Button>
         <Button type="primary">
-            下一页<i class="k-icon k-icon-right"></i>
+            下一页<Icon class="k-icon-right" />
         </Button>
     </ButtonGroup>
     <br /><br />

package/components/button/index.vdt

@@ -41,8 +41,8 @@ if (!icon && Array.isArray(children)) {
 
 const classNameObj = {
     [cls('btn')]: true,
-    [cls(type)]: type !== 'default',
     [cls(size)]: size !== 'default',
+    [cls(type)]: true,
     [cls(`btn-icon`)]: icon,
     [className]: className, 
     [cls('circle')]: circle,

package/components/button/styles.ts

@@ -182,6 +182,19 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
             .${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};
@@ -262,6 +275,9 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
 
             // disabled
             &.${k}-disabled {
+                .${k}-icon {
+                    color: inherit;
+                }
                 &, &:hover {
                     color: ${button.disabled.color};
                     background: ${button.disabled.bgColor};
@@ -347,6 +363,9 @@ export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconS
                 background: transparent;
                 color: ${button.ghost.color};
                 border-color: ${button.ghost.borderColor};
+                .${k}-icon {
+                    color: inherit;
+                }
                 &:hover,
                 &:active {
                     background: transparent;

package/components/collapse/item.vdt

@@ -21,7 +21,7 @@ const classNameObj = {
 
 <div class={classNameObj} {...getRestProps(this)}>
     <div class={`${k}-collapse-title`} ev-click={this.toggle}>
-        <b:title>{title}</b:title>
+        <div class={`${k}-collapse-title-wrapper`}><b:title>{title}</b:title></div>
         <Icon
             class={{[`${k}-collapse-arrow`]: true, [`${k}-icon-right`]: true}}
             hoverable

package/components/collapse/styles.ts

@@ -7,7 +7,6 @@ import { cache } from '../utils';
 const defaults = {
     get transition() { return theme.transition.large },
     fontSize: '12px',
-    titleMarginRight: '8px',
     borderPadding: '0 24px',
     collBorder: '1px solid #eee',
     get borderRadius() {
@@ -17,6 +16,7 @@ const defaults = {
     item: {
         borderBottom: '1px solid #e5e5e5',
         titleHeight: '40px',
+        titleGap: '8px',
     }
 };
 
@@ -32,9 +32,8 @@ export const makeStyles = cache(function makeStyles(k: string) {
         font-size: ${collapse.fontSize};
         
         &.${k}-left {
-            .${k}-collapse-arrow {
-                float: left;
-                margin-right: ${collapse.titleMarginRight};
+            > .${k}-collapse-item > .${k}-collapse-title {
+                flex-direction: row-reverse;
             }
         }
 
@@ -58,13 +57,15 @@ export const makeItemStyles = cache(function makeItemStyles(k: string) {
             cursor: pointer;
             font-weight: bold;
             height: ${collapseItem.titleHeight};
-            line-height: ${collapseItem.titleHeight};
             transition: color ${collapse.transition};
+            display: flex;
+            align-items: center;
+            gap: ${collapseItem.titleGap};
+            .${k}-collapse-title-wrapper {
+                flex: 1;
+            }
             .${k}-collapse-arrow {
-                float: right;
                 transition: transform ${collapse.transition};
-                line-height: ${collapseItem.titleHeight};
-                height: ${collapseItem.titleHeight};
             }
         }
         

package/components/config/demos/basic.md

@@ -7,13 +7,29 @@ order: 0
 
 > 本例中，我们将前缀设为`kd`，可以打开调试工具查看
 
+> 对于`Message`组件，由于它是静态方法调用，我们可以通过`Message.classNamePrefix`设置样式名前缀
+
 ```vdt
 import {ConfigProvider, Button, Input} from 'kpc';
 
 <ConfigProvider value={{classNamePrefix: 'kd'}}>
-    <Button>Button</Button>
+    <Button ev-click={this.showMessage}>Button</Button>
     <div style="margin-top: 8px;">
         <Input />
     </div>
 </ConfigProvider>
 ```
+
+```ts
+import {Message} from 'kpc';
+
+Message.classNamePrefix = 'kd';
+
+export default class extends Component {
+    static template = template;
+
+    showMessage() {
+        Message.info('Message with classNamePrefix');
+    }
+}
+```

package/components/dialog/index.spec.ts

@@ -337,6 +337,36 @@ describe('Dialog', () => {
         expect(dialog2.querySelector('.k-dialog-body')!.textContent).to.eql('test');
     });
 
+    it('should update position when change container', async () => {
+        class Demo extends Component<{show: boolean, container: any}> {
+            static template = `
+                var Dialog = this.Dialog;
+                <Dialog value={true} container={this.get('container')} ref="dialog">test</Dialog>
+            `;
+
+            private Dialog = Dialog;
+
+            static defaults() {
+                return {
+                    container: (parentDom: HTMLElement) => parentDom,
+                };
+            }
+        }
+
+        const [instance, element] = mount(Demo);
+
+        await wait();
+        instance.set('container', undefined);
+        await wait();
+        const dialogDom = instance.refs.dialog.dialogRef.value;
+        const style = dialogDom.style;
+        expect(style.left).not.eql('');
+        expect(style.top).not.eql('');
+
+        // should append to body
+        expect(dialogDom.closest('.k-dialog-wrapper').parentElement).to.eql(document.body);
+    });
+
     // it('should handle v-if and v-model at the same time correctly in Vue', async () => {
         // const Test = {
             // template: `<Dialog v-model="show" v-if="show" ref="dialog">test</Dialog>`,

package/components/dialog/usePosition.ts

@@ -8,6 +8,10 @@ export function usePosition(elementRef: RefObject<HTMLDivElement>) {
 
     instance.on(SHOW, center);
     instance.on('afterClose', onAfterLeave);
+    instance.watch('container', () => {
+        if (!instance.get('value')) return;
+        center();
+    }, { presented: true, inited: true });
 
     function center() {
         position(elementRef.value!, {

package/components/dropdown/usePosition.ts

@@ -1,8 +1,7 @@
 import {useInstance, findDomFromVNode} from 'intact';
 import type {Dropdown} from './';
 import {Options, position, Feedback} from '../position';
-import {noop} from 'intact-shared';
-import {isObject} from 'intact-shared';
+import {noop, isObject, isFunction} from 'intact-shared';
 import { isEqualObject } from '../utils';
 
 export type FeedbackCallback = (feedback: Feedback) => void;
@@ -19,21 +18,32 @@ export function usePosition() {
 
     (['of', 'position'] as const).forEach(item => {
         instance.watch(item, (newValue, oldValue) => {
-            // return if object is the same
             if (
+                !instance.get('value') ||
+                // return if object is the same
                 isObject(newValue) && isObject(oldValue) &&
                 // is not event object
                 !(newValue instanceof Event) &&
                 isEqualObject(newValue, oldValue)
-            )  {
-                return;
-            }
-            if (instance.get('value')) {
-                handle(noop);
-            }
+            ) return;
+
+            handle(noop);
         }, {presented: true, inited: true});
     });
 
+    // watch container, it is not commonly used
+    instance.watch('container', (newValue, oldValue) => {
+        if (
+            !instance.get('value') ||
+            // return if function is the same. Not rigorous!
+            isFunction(newValue) &&
+            isFunction(oldValue) &&
+            newValue.toString() === oldValue.toString()
+        ) return;
+
+        handle(noop);
+    }, { presented: true, inited: true });
+
     // if the dropdown is nested, we must show child after parent has positioned
     function p(
         ofElement: HTMLElement | MouseEvent | undefined,

package/components/editable/styles.ts

@@ -31,7 +31,7 @@ export const makeStyles = cache(function makeStyles(k: string) {
 
         // invalid
         &.${k}-invalid {
-            .${k}-input-inner {
+            .${k}-input-wrapper {
                 border: ${editable.invalid.border} !important;
             }
         }

package/components/message/message.ts

@@ -43,24 +43,28 @@ export class Message extends Component<MessageProps> {
     static template = template;
     static typeDefs = typeDefs;
     static defaults = defaults;
+    static classNamePrefix: string;
 
     static notice(
         content: Children | Partial<MessageProps>,
         duration: number = 3000,
         type: MessageProps['type'] ='info'
     ) {
-        if (!messages) {
-            const container = document.createElement('div');
-            document.body.append(container);
-            render(h(Messages, {ref: i => messages = i}), container); 
-        }
-
         if (isObject(content) && !(content as any).tag) {
             content = {...content, type, key: id++} as Partial<Props<MessageProps>>;
         } else {
             content = {content, duration, type, key: id++} as Partial<Props<MessageProps>>;
         }
 
+        if (!messages) {
+            const container = document.createElement('div');
+            document.body.append(container);
+            render(h(Messages, {
+                ref: (i: Messages | null) => messages = i,
+                classNamePrefix: Message.classNamePrefix,
+            } as any), container); 
+        }
+
         messages!.notice(h(Message, content));
     }
     static info(content: Children | Partial<MessageProps>, duration?: number) {

package/components/message/message.vdt

@@ -3,7 +3,7 @@ import {Icon} from '../icon';
 import {getRestProps} from '../utils';
 import {makeMessageStyles} from './styles';
 
-const {type, content, children, closable, hideIcon} = this.get();
+const {type, content, children, closable, hideIcon, classNamePrefix} = this.get();
 const { k } = this.config;
 
 const classNameObj = {

package/components/message/messages.ts

@@ -1,10 +1,19 @@
-import {Component, VNodeComponentClass} from 'intact';
+import {Component, VNodeComponentClass, TypeDefs} from 'intact';
 import template from './messages.vdt';
 import type {Message} from './message';
 import { useConfigContext } from '../config';
 
+export interface MessagesProps {
+    classNamePrefix?: string
+}
+
+const typeDefs: Required<TypeDefs<MessagesProps>> = {
+    classNamePrefix: String,
+};
+
 export class Messages extends Component {
     static template = template;
+    static typeDefs = typeDefs;
 
     private messages: VNodeComponentClass<Message>[] = [];
     private config = useConfigContext();

package/components/message/messages.vdt

@@ -1,12 +1,15 @@
 import {TransitionGroup, Transition} from 'intact';
 import {makeMessagesStyles} from './styles';
+import { ConfigProvider } from '../config';
 
-const { k } = this.config;
+const k =  this.get('classNamePrefix') || this.config.k;
 
-<div class={{[`${k}-messages`]: true, [makeMessagesStyles(k)]: true}}>
-    <TransitionGroup>
-        <template v-for={this.messages} key={$value.key}>
-            {$value}
-        </template>
-    </TransitionGroup>
-</div>
+<ConfigProvider value={{classNamePrefix: k}}>
+    <div class={{[`${k}-messages`]: true, [makeMessagesStyles(k)]: true}}>
+        <TransitionGroup>
+            <template v-for={this.messages} key={$value.key}>
+                {$value}
+            </template>
+        </TransitionGroup>
+    </div>
+</ConfigProvider>

package/components/portal.ts

@@ -10,6 +10,8 @@ import {
     remove,
     TypeDefs,
     inject,
+    unmount,
+    removeVNodeDom,
 } from 'intact';
 import {isString} from 'intact-shared';
 import {DIALOG} from './dialog/constants';
@@ -59,7 +61,9 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         const fakeContainer = document.createDocumentFragment();
 
         (mountedQueue.priority || mountedQueue).push(() => {
-            const parentDom = this.$lastInput!.dom!.parentElement!;
+            const parentDom = this.$lastInput!.dom!.parentElement;
+            // maybe the <!-- portal --> has been removed by react, #938
+            if (!parentDom) return;
             this.initContainer(nextProps.container, parentDom, anchor);
             this.container!.appendChild(fakeContainer);
         });
@@ -130,8 +134,13 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
     }
 
     $unmount(vNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this> | null) {
-        remove(vNode.props!.children as VNode, this.container!, false);
-        // removeVNodeDom(vNode.props!.children as VNode, this.container!);
+        const children = vNode.props!.children as VNode;
+        unmount(children, null);
+        if (this.container) {
+            // maybe the <!-- portal --> has been removed by react, #938
+            // remove(children, this.container, false);
+            removeVNodeDom(children, this.container);
+        }
         super.$unmount(vNode, nextVNode);
     }
 
@@ -142,7 +151,11 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
             } else {
                 this.container = container(parentDom, anchor);
             }
+        } else {
+            // let below logic to set container to default if container does not exist.
+            this.container = null;
         }
+
         if (!this.container) {
             if (this.$senior instanceof BaseDialog) {
                 // Dialog and Drawer must be inserted into document.body

package/components/upload/useFiles.ts

@@ -2,6 +2,7 @@ import {useInstance} from 'intact';
 import {Upload, UploadFile} from './';
 import {_$} from '../../i18n';
 import {UploadFileStatus} from './useUpload';
+import { isEqualArray } from '../utils';
 
 let uid = 0;
 
@@ -28,8 +29,8 @@ export function useFiles(
         }
     }
 
-    instance.on(`$receive:files`, (files) => {
-        if (!files) return;
+    instance.on(`$receive:files`, (files, oldFiles) => {
+        if (!files || isEqualArray(files, oldFiles)) return;
         instance.set('files', files.map(normalizeFile));
     });
 

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

@@ -60,7 +60,7 @@ export default function ($props, $blocks, $__proto__) {
     });
   }
 
-  var classNameObj = (_classNameObj = {}, _classNameObj[cls('btn')] = true, _classNameObj[cls(type)] = type !== 'default', _classNameObj[cls(size)] = size !== 'default', _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[makeButtonStyles(k, iconSide)] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[cls('btn')] = true, _classNameObj[cls(size)] = size !== 'default', _classNameObj[cls(type)] = true, _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[makeButtonStyles(k, iconSide)] = true, _classNameObj);
 
   var loadingIcon = _$cc(Icon, {
     'className': _$cn("ion-load-c " + k + "-icon-loading"),

package/es/components/button/styles.js

@@ -242,16 +242,16 @@ export var makeButtonStyles = cache(function makeButtonStyles(k, iconSide) {
   return cx(
   /*#__PURE__*/
   // 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;}&: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) {
+  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, ";}}&.", 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{&,&: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) {
+  }), "&.", k, "-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.", 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) {
     var styles = button[type];
     return /*#__PURE__*/css("&.", k, "-", type, "{&,&:hover{background:", palette(styles.bgColor, -2), ";color:", palette(styles.color, -2), ";border-color:", palette(styles.borderColor, -2), ";}}");
-  }), ";&,&:hover{background:", palette(button.bgColor, -2), ";color:", palette(button.color, -2), ";border-color:", palette(button.borderColor, -2), ";}.", k, "-icon:not(.", k, "-icon-loading){display:none;}}&:not(button){display:inline-flex;align-items:center;justify-content:center;}&.", k, "-ghost{background:transparent;color:", button.ghost.color, ";border-color:", button.ghost.borderColor, ";&:hover,&:active{background:transparent;}&:hover{color:", button.ghost.hoverColor, ";border-color:", button.ghost.hoverBorderColor, ";}&:active{color:", theme.color.primary, ";border-color:", theme.color.primary, ";}", _mapInstanceProperty(types).call(types, function (type) {
+  }), ";&,&:hover{background:", palette(button.bgColor, -2), ";color:", palette(button.color, -2), ";border-color:", palette(button.borderColor, -2), ";}.", k, "-icon:not(.", k, "-icon-loading){display:none;}}&:not(button){display:inline-flex;align-items:center;justify-content:center;}&.", k, "-ghost{background:transparent;color:", button.ghost.color, ";border-color:", button.ghost.borderColor, ";.", k, "-icon{color:inherit;}&:hover,&:active{background:transparent;}&:hover{color:", button.ghost.hoverColor, ";border-color:", button.ghost.hoverBorderColor, ";}&:active{color:", theme.color.primary, ";border-color:", theme.color.primary, ";}", _mapInstanceProperty(types).call(types, function (type) {
     var _button$type = button[type],
         ghostColor = _button$type.ghostColor,
         borderColor = _button$type.borderColor;

package/es/components/collapse/item.vdt.js

@@ -27,7 +27,7 @@ export default function ($props, $blocks, $__proto__) {
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-collapse-item"] = true, _classNameObj[makeItemStyles(k)] = true, _classNameObj[className] = className, _classNameObj[k + "-active"] = isActive, _classNameObj[k + "-disabled"] = disabled, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
-  }, getRestProps(this)), [_$ce(2, 'div', [(_$blocks['title'] = function ($super) {
+  }, getRestProps(this)), [_$ce(2, 'div', [_$ce(2, 'div', (_$blocks['title'] = function ($super) {
     return title;
   }, __$blocks['title'] = function ($super, data) {
     var block = $blocks['title'];
@@ -37,11 +37,11 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['title'](_$no)), _$cc(Icon, {
+  }, __$blocks['title'](_$no)), 0, _$cn(k + "-collapse-title-wrapper")), _$cc(Icon, {
     'className': _$cn((_$cn2 = {}, _$cn2[k + "-collapse-arrow"] = true, _$cn2[k + "-icon-right"] = true, _$cn2)),
     'hoverable': true,
     'disabled': disabled
-  })], 0, _$cn(k + "-collapse-title"), {
+  })], 4, _$cn(k + "-collapse-title"), {
     'ev-click': this.toggle
   }), _$cc(Transition, _extends({
     'show': isActive

package/es/components/collapse/styles.js

@@ -9,7 +9,6 @@ var defaults = {
   },
 
   fontSize: '12px',
-  titleMarginRight: '8px',
   borderPadding: '0 24px',
   collBorder: '1px solid #eee',
 
@@ -19,7 +18,8 @@ var defaults = {
 
   item: {
     borderBottom: '1px solid #e5e5e5',
-    titleHeight: '40px'
+    titleHeight: '40px',
+    titleGap: '8px'
   }
 };
 var collapse;
@@ -31,9 +31,9 @@ setDefault(function () {
   makeItemStyles == null ? void 0 : makeItemStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
-  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.", k, "-left{.", k, "-collapse-arrow{float:left;margin-right:", collapse.titleMarginRight, ";}}&.", k, "-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
+  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.", k, "-left{>.", k, "-collapse-item>.", k, "-collapse-title{flex-direction:row-reverse;}}&.", k, "-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
 });
 export var makeItemStyles = cache(function makeItemStyles(k) {
   var collapseItem = collapse.item;
-  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}>.", k, "-collapse-title{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";.", k, "-collapse-arrow{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";}}&:not(.", k, "-disabled){>.", k, "-collapse-title{&:hover{color:", theme.color.primary, ";}}}&.", k, "-active{>.", k, "-collapse-title .", k, "-collapse-arrow{transform:rotate(90deg);}}&.", k, "-disabled{color:", theme.color.disabledBorder, ";>.", k, "-collapse-title{cursor:not-allowed;}}");
+  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}>.", k, "-collapse-title{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";display:flex;align-items:center;gap:", collapseItem.titleGap, ";.", k, "-collapse-title-wrapper{flex:1;}.", k, "-collapse-arrow{transition:transform ", collapse.transition, ";}}&:not(.", k, "-disabled){>.", k, "-collapse-title{&:hover{color:", theme.color.primary, ";}}}&.", k, "-active{>.", k, "-collapse-title .", k, "-collapse-arrow{transform:rotate(90deg);}}&.", k, "-disabled{color:", theme.color.disabledBorder, ";>.", k, "-collapse-title{cursor:not-allowed;}}");
 });

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

@@ -10,7 +10,7 @@ export * from './shapes/rectangle';
 export * from './shapes/square';
 export * from './shapes/text';
 export * from './shapes/line';
-declare const DDiamond: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DTriangle: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCylinder: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCloud: import("misstime").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>;
+declare const DDiamond: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DTriangle: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCylinder: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>, DCloud: import("vdt").ComponentConstructor<import("./shapes/shape").DShape<import("./shapes/shape").DShapeProps>>;
 export { DDiamond, DTriangle, DCylinder, DCloud };
 export * from './layouts/layout';
 export * from './layouts/circle';