@king-design/intact 3.1.1-beta.3 → 3.1.2

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

@@ -2,6 +2,7 @@ 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 },
@@ -22,9 +23,11 @@ const defaults = {
 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};
         
@@ -41,9 +44,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};
@@ -86,4 +89,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/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/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`

package/components/dropdown/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, getLeft, getRight} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     item: {
@@ -25,9 +26,11 @@ const defaults = {
 let dropdown: typeof defaults;
 setDefault(() => {
     dropdown = deepDefaults(theme, {dropdown: defaults}).dropdown;
+    makeMenuStyles?.clearCache();
+    makeItemStyles?.clearCache();
 });
 
-export function makeMenuStyles(k: string) {
+export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
     return css`
         position: absolute;
         min-width: ${dropdown.menu.minWidth};
@@ -44,9 +47,9 @@ export function makeMenuStyles(k: string) {
             display: block;
         }
     `
-}
+});
 
-export function makeItemStyles(k: string) {
+export const makeItemStyles = cache(function makeItemStyles(k: string) {
     return css`
         padding: ${dropdown.item.padding};
         cursor: pointer;
@@ -86,4 +89,4 @@ export function makeItemStyles(k: string) {
             vertical-align: baseline;
         }
     `
-}
+});

package/components/editable/styles.ts

@@ -2,6 +2,7 @@ import {css, cx} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults}  from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     iconGap: '0 0 0 8px',
@@ -15,11 +16,12 @@ const defaults = {
 let editable: typeof defaults;
 setDefault(() => {
     editable = deepDefaults(theme, {editable: defaults}).editable;
+    makeStyles?.clearCache();
 });
 
 export {editable};
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-flex;
         align-items: center;
@@ -34,4 +36,4 @@ export function makeStyles(k: string) {
             }
         }
     `;
-}
+});

package/components/form/index.md

@@ -29,6 +29,7 @@ sidebar: doc
 | htmlFor | 指定`label`的`for`属性 | `string` | `undefined` | 
 | hideLabel | 是否隐藏`label`，默认会展示`label`，即使该属性为空，也会展示占位元素 | `boolean` | `false` |
 | fluid | `FormItem`的宽度默认是被子元素撑开的，添加该属性可以渲染`100%`的宽度 | `boolean` | `false` |
+| validateOnStart | 是否组件一渲染就开始验证，而不是等用户输入完成再验证 | `boolean` | `false` |
 
 ```ts
 export declare type Method = (value: any, param: any) => boolean | string | Promise<boolean | string>

package/components/form/index.spec.ts

@@ -461,4 +461,21 @@ describe('Form', () => {
         await wait(500);
         expect(element.querySelector('.k-form-error')).to.be.null;
     });
+
+    it('should validate on init when setting validateOnStart prop', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Form, FormItem} = this;
+                <Form ref="form">
+                    <FormItem rules={{required: true}} validateOnStart />
+                </Form>
+            `;
+            Form = Form;
+            FormItem = FormItem;
+        }
+        const [instance, element] = mount(Demo);
+
+        await wait(500);
+        expect(element.querySelector('.k-form-error')).to.be.exist;
+    });
 });

package/components/form/item.ts

@@ -20,6 +20,7 @@ export interface FormItemProps {
     htmlFor?: string
     hideLabel?: boolean
     fluid?: boolean
+    validateOnStart?: boolean
 }
 
 export interface FormItemEvents {
@@ -52,6 +53,7 @@ const typeDefs: Required<TypeDefs<FormItemProps>> = {
     htmlFor: String,
     hideLabel: Boolean,
     fluid: Boolean,
+    validateOnStart: Boolean,
 };
 
 export class FormItem extends Component<FormItemProps, FormItemEvents, FormItemBlocks> {