@king-design/intact 3.1.1 → 3.1.3

package/components/affix/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     zIndex: 9
@@ -10,11 +11,12 @@ const defaults = {
 let affix: typeof defaults;
 setDefault(() => {
     affix = deepDefaults(theme, {affix: defaults}).affix;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         position: relative;
         z-index: ${affix.zIndex};
     `;
-}
+});

package/components/badge/index.vdt

@@ -1,5 +1,5 @@
 import {getRestProps} from '../utils';
-import makeStyles from './styles';
+import { makeStyles } from './styles';
 
 let {
     className, children, text, disabled, max

package/components/badge/styles.ts

@@ -2,6 +2,7 @@ import {css, cx} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette}  from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     width: '8px',
@@ -17,9 +18,10 @@ const defaults = {
 let badge: typeof defaults;
 setDefault(() => {
     badge = deepDefaults(theme, {badge: defaults}).badge;
+    makeStyles?.clearCache();
 });
 
-export default function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-block;
         position: relative;
@@ -56,5 +58,4 @@ export default function makeStyles(k: string) {
                 transform: none;
             }            
     `;
-}
-
+});

package/components/breadcrumb/index.vdt

@@ -1,6 +1,6 @@
 import {getRestProps, mapChildren} from '../utils';
 import {BreadcrumbItem} from './item';
-import makeStyles from './styles';
+import { makeStyles } from './styles';
 
 const {children, separator, className} = this.get();
 const { k } = this.config;

package/components/breadcrumb/styles.ts

@@ -2,6 +2,7 @@ import {css, cx} from '@emotion/css';
 import {deepDefaults, darken} from '../../styles/utils';
 import {theme, setDefault} from '../../styles/theme';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     fontSize: '14px',
@@ -15,9 +16,10 @@ const defaults = {
 let breadcrumb: typeof defaults;
 setDefault(() => {
     breadcrumb = deepDefaults(theme, {breadcrumb: defaults}).breadcrumb;
+    makeStyles?.clearCache();
 });
 
-export default function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         font-size: ${breadcrumb.fontSize};
         display: flex;
@@ -43,4 +45,4 @@ export default function makeStyles(k: string) {
             margin: 0 ${breadcrumb.gap};
         }
     `
-}
+});

package/components/button/styles.ts

@@ -1,8 +1,8 @@
 import {css, cx} from '@emotion/css';
-import { ButtonProps, Button } from './index';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette, getLeft, darken}  from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 type ValueOf<T extends readonly any[]> = T[number]
 
@@ -151,11 +151,13 @@ const defaults = deepDefaults(
 let button: typeof defaults;
 setDefault(() => {
     button = deepDefaults(theme, {button: defaults}).button;
+    makeButtonStyles?.clearCache();
+    makeButtonGroupStyles?.clearCache();
 });
 
 export {button};
 
-export function makeButtonStyles(k: string, iconSide?: string) {
+export const makeButtonStyles = cache(function makeButtonStyles(k: string, iconSide?: string) {
     const {secondary, link} = button;
 
     return cx(
@@ -413,9 +415,9 @@ export function makeButtonStyles(k: string, iconSide?: string) {
             `}
         `
     );
-}
+});
 
-export function makeButtonGroupStyles(k: string) {
+export const makeButtonGroupStyles = cache(function makeButtonGroupStyles(k: string) {
     return css`
         display: inline-flex;
         align-items: center;
@@ -519,4 +521,4 @@ export function makeButtonGroupStyles(k: string) {
             }
         }
     `;
-}
+});

package/components/card/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults}  from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     border: '1px solid #e5e5e5',
@@ -16,9 +17,10 @@ const defaults = {
 let card: typeof defaults;
 setDefault(() => {
     card = deepDefaults(theme, {card: defaults}).card;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         border-radius: ${card.borderRadius};
         background: ${card.bgColor};
@@ -89,4 +91,4 @@ export function makeStyles(k: string) {
             }
         }
     `;
-}
+});

package/components/carousel/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     get transition() { return theme.transition.large },
@@ -37,9 +38,11 @@ const defaults = {
 let carousel: typeof defaults;
 setDefault(() => {
     carousel = deepDefaults(theme, {carousel: defaults}).carousel;
+    makeStyles?.clearCache();
+    makeItemStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         height: ${carousel.height};
         position: relative;
@@ -129,9 +132,9 @@ export function makeStyles(k: string) {
             }
         }
     `;
-}
+});
 
-export function makeItemStyles(k: string) {
+export const makeItemStyles = cache(function makeItemStyles(k: string) {
     return css`
         display: inline-block;
         width: 100%;
@@ -147,4 +150,4 @@ export function makeItemStyles(k: string) {
             opacity: 0;
         }
     `
-}
+});

package/components/cascader/index.vdt

@@ -3,7 +3,7 @@ import {Icon} from '../icon';
 import {_$} from '../../i18n';
 import {makeMenuStyles, makeFilterMenuStyles} from './styles';
 
-const {data, trigger, filterable, fields} = this.get();
+const {data, trigger, filterable, fields, multiple} = this.get();
 const { k } = this.config;
 const baseMenuStyles = makeMenuStyles(k);
 const classNameObj = {
@@ -38,6 +38,7 @@ const Options = (data, level, loaded, parentSelected) => {
                         [`${k}-selected`]: selected,
                     }}
                     ev-select={onSelect.bind(null, value, level)}
+                    hideOnSelect={!multiple}
                 >
                     {getField(item, 'label')}
                     <Icon v-if={children}

package/components/cascader/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes, getRight, getLeft} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     width: '140px',
@@ -28,9 +29,11 @@ const defaults = {
 let cascader: typeof defaults;
 setDefault(() => {
     cascader = deepDefaults(theme, {cascader: defaults}).cascader;
+    makeMenuStyles?.clearCache();
+    makeFilterMenuStyles?.clearCache();
 });
 
-export function makeMenuStyles(k: string) {
+export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
     return css`
         min-width: ${cascader.width} !important;
         height: ${cascader.height};
@@ -63,9 +66,9 @@ export function makeMenuStyles(k: string) {
             }
         }
     `; 
-}
+});
 
-export function makeFilterMenuStyles(k: string) {
+export const makeFilterMenuStyles = cache(function makeFilterMenuStyles(k: string) {
     return css`
         min-width: ${cascader.filter.minWidth} !important;
         height: auto;
@@ -75,4 +78,4 @@ export function makeFilterMenuStyles(k: string) {
             color: ${cascader.filter.highlightColor};
         }
     `;
-}
+});

package/components/checkbox/index.vdt

@@ -1,5 +1,5 @@
 import {getRestProps} from '../utils';
-import makeStyles from './styles';
+import {makeStyles} from './styles';
 import {Wave} from '../wave';
 
 const {

package/components/checkbox/styles.ts

@@ -2,6 +2,7 @@ import {css, cx} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette, getLeft}  from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     width: '16px',
@@ -53,9 +54,10 @@ const defaults = {
 let checkbox: typeof defaults;
 setDefault(() => {
     checkbox = deepDefaults(theme, {checkbox: defaults}).checkbox;
+    makeStyles?.clearCache();
 });
 
-export default function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-flex;
         align-items: center;
@@ -169,4 +171,4 @@ export default function makeStyles(k: string) {
           
         }
     `;
-}
+});

package/components/code/styles.ts

@@ -1,9 +1,10 @@
 import {css} from '@emotion/css';
 import '../../styles/global';
+import { cache } from '../utils';
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         position: relative;
         height: 100%;
     `;
-}
+});

package/components/collapse/index.spec.ts

@@ -11,7 +11,7 @@ describe('Collapse', () => {
         this.timeout(0);
         const [instance, element] = mount(BasicDemo);
 
-        const [title1, title2, title3] = element.querySelectorAll<HTMLElement>(':scope > .k-collapse-title');
+        const [title1, title2, title3] = element.querySelectorAll<HTMLElement>(':scope > .k-collapse-item > .k-collapse-title');
         title2.click();
         await wait(500);
         // the innerHTML is different on travis and local environment

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

@@ -2,11 +2,11 @@ import {deepDefaults}  from '../../styles/utils';
 import {theme, setDefault} from '../../styles/theme';
 import {css} from '@emotion/css';
 import '../../styles/global';
+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() {
@@ -16,22 +16,24 @@ const defaults = {
     item: {
         borderBottom: '1px solid #e5e5e5',
         titleHeight: '40px',
+        titleGap: '8px',
     }
 };
 
 let collapse: typeof defaults;
 setDefault(() => {
     collapse = deepDefaults(theme, {collapse: defaults}).collapse;
+    makeStyles?.clearCache();
+    makeItemStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         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;
             }
         }
 
@@ -41,9 +43,9 @@ export function makeStyles(k: string) {
             border: ${collapse.collBorder};
         }
     `;
-}
+});
 
-export function makeItemStyles(k: string) {
+export const makeItemStyles = cache(function makeItemStyles(k: string) {
     const collapseItem = collapse.item;
     return css`
         border-bottom: ${collapseItem.borderBottom};
@@ -55,13 +57,15 @@ export 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};
             }
         }
         
@@ -86,4 +90,4 @@ export function makeItemStyles(k: string) {
             }
         }
     `;
-}
+});

package/components/colorpicker/styles.ts

@@ -3,6 +3,7 @@ import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes} from '../../styles/utils';
 import '../../styles/global';
 import {ColorFormats} from 'tinycolor2';
+import { cache } from '../utils';
 
 const defaults = {
     get height() { return theme.default.height },
@@ -88,11 +89,13 @@ const defaults = {
 let colorpicker: typeof defaults;
 setDefault(() => {
     colorpicker = deepDefaults(theme, {colorpicker: defaults}).colorpicker;
+    makeStyles?.clearCache();
+    makePanelStyles?.clearCache();
 });
 
 const _sizes = ['large', 'small', 'mini'] as const;
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-block;
         vertical-align: middle;
@@ -133,9 +136,9 @@ export function makeStyles(k: string) {
             }
         }
     `;
-}
+});
 
-export function makePanelStyles(k: string) {
+export const makePanelStyles = cache(function makePanelStyles(k: string) {
     return css`
         padding: ${colorpicker.panel.padding};
         width: ${colorpicker.panel.width};
@@ -267,7 +270,7 @@ export function makePanelStyles(k: string) {
             user-select: none;
         }
     `
-}
+});
 
 export function makeAlphaBgColor({r, g, b}: ColorFormats.RGBA, k: string) {
     return css`

package/components/copy/styles.ts

@@ -1,9 +1,10 @@
 import {css} from '@emotion/css';
 import '../../styles/global';
+import { cache } from '../utils';
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         cursor: pointer;
         vertical-align: middle;
     `
-}
+});

package/components/datepicker/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes, getRight, getLeft, palette} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     width: `300px`,
@@ -62,11 +63,14 @@ const defaults = {
 let datepicker: typeof defaults;
 setDefault(() => {
     datepicker = deepDefaults(theme, {datepicker: defaults}).datepicker;
+    makePanelStyles?.clearCache();
+    makeCalendarStyles?.clearCache();
+    makeTimeStyles?.clearCache();
 });
 
 export {datepicker};
 
-export function makePanelStyles(k: string) {
+export const makePanelStyles = cache(function makePanelStyles(k: string) {
     return css`
         display: flex;
         .${k}-datepicker-shortcuts {
@@ -106,9 +110,9 @@ export function makePanelStyles(k: string) {
             text-align: right;
         }
     `
-}
+});
 
-export function makeCalendarStyles(k: string) {
+export const makeCalendarStyles = cache(function makeCalendarStyles(k: string) {
     return css`
         padding: ${datepicker.padding};
         width: ${datepicker.width};
@@ -207,9 +211,9 @@ export function makeCalendarStyles(k: string) {
             grid-template-columns: repeat(4, 1fr);
         }
     `
-}
+});
 
-export function makeTimeStyles(k: string) {
+export const makeTimeStyles = cache(function makeTimeStyles(k: string) {
     return css`
         display: flex;
         padding: ${datepicker.padding};
@@ -220,4 +224,4 @@ export function makeTimeStyles(k: string) {
             height: 305px;
         }
     `;
-}
+});

package/components/diagram/styles.ts

@@ -1,7 +1,8 @@
 import {css} from '@emotion/css';
 import '../../styles/global';
+import { cache } from '../utils';
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-block;
         overflow: auto;
@@ -32,4 +33,4 @@ export function makeStyles(k: string) {
             margin: 0;
         }
     `;
-}
+});

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/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     width: '800px',
@@ -66,9 +67,12 @@ const defaults = {
 let dialog: typeof defaults;
 setDefault(() => {
     dialog = deepDefaults(theme, {dialog: defaults}).dialog;
+    makeDialogStyles?.clearCache();
+    makeWrapperStyles?.clearCache();
+    makeAlertStyles?.clearCache();
 });
 
-export function makeDialogStyles(k: string) {
+export const makeDialogStyles = cache(function makeDialogStyles(k: string) {
     return css`
         position: absolute;
         width: ${dialog.width};
@@ -151,9 +155,9 @@ export function makeDialogStyles(k: string) {
             }
         }
     `;
-}
+});
 
-export function makeWrapperStyles(k: string) {
+export const makeWrapperStyles = cache(function makeWrapperStyles(k: string) {
     //.${k}-fade-leave-active will add position absolute to the styles
     // so we must set fixed with important to .${k}-dialog-overlay
     return css`
@@ -172,9 +176,9 @@ export function makeWrapperStyles(k: string) {
             overflow: auto;
         }
     `;
-}
+});
 
-export function makeAlertStyles(k: string) {
+export const makeAlertStyles = cache(function makeAlertStyles(k: string) {
     return css`
         &.${k}-alert-dialog {
             .${k}-dialog-body {
@@ -238,4 +242,4 @@ export function makeAlertStyles(k: string) {
             }
         }
     ` 
-}
+});

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/drawer/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 type ValueOf<T extends readonly any[]> = T[number]
 
@@ -17,9 +18,10 @@ const defaults = {
 let drawer: typeof defaults;
 setDefault(() => {
     drawer = deepDefaults(theme, {drawer: defaults}).drawer;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(overlay: boolean, k: string) {
+export const makeStyles = cache(function makeStyles(overlay: boolean, k: string) {
     const borderRadius = theme.largeBorderRadius;
     return css`
         &.k-drawer {
@@ -61,7 +63,7 @@ export function makeStyles(overlay: boolean, k: string) {
             width: 100%;
         }
     `;
-}
+});
 
 function makePlacementStyles(k: string, placement: string, styles: string, transform: string, borderRadius: string) {
     return css`