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

package/components/dialog/styles.js

@@ -3,6 +3,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   width: '800px',
   bgColor: '#fff',
@@ -81,24 +82,27 @@ setDefault(function () {
   dialog = deepDefaults(theme, {
     dialog: defaults
   }).dialog;
+  makeDialogStyles == null ? void 0 : makeDialogStyles.clearCache();
+  makeWrapperStyles == null ? void 0 : makeWrapperStyles.clearCache();
+  makeAlertStyles == null ? void 0 : makeAlertStyles.clearCache();
 });
-export function makeDialogStyles(k) {
+export var makeDialogStyles = cache(function makeDialogStyles(k) {
   var _context;
 
   return /*#__PURE__*/css("position:absolute;width:", dialog.width, ";border-radius:", dialog.borderRadius, ";background:", dialog.bgColor, ";font-size:", dialog.fontSize, ";color:", dialog.color, ";box-shadow:", dialog.boxShadow, ";max-width:100%;z-index:", theme.maxZIndex, ";&.", k, "-dragging{cursor:move;user-select:none;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:all ", dialog.transition, ";}&.transition-enter-from,&.transition-leave-to,&.transition-appear-from{transform:", dialog.transform, ";opacity:0;}", _mapInstanceProperty(_context = ['large', 'small', 'mini']).call(_context, function (size) {
     return /*#__PURE__*/css("&.", k, "-", size, "{width:", dialog[size + "Width"], ";}");
   }), ".", k, "-dialog-header{padding:0 ", dialog.padding, ";margin:", dialog.margin, ";border-bottom:", dialog.header.border, ";height:", dialog.header.height, ";line-height:", dialog.header.height, ";font-size:", dialog.header.fontSize, ";color:", dialog.header.color, ";position:relative;font-weight:", dialog.header.fontWeight, ";}.", k, "-dialog-title{display:inline-block;}.", k, "-dialog-close{position:absolute;right:", dialog.header.closeRight, ";top:", dialog.header.closeTop, ";.", k, "-icon{font-size:", dialog.header.closeIconFontSize, ";}}.", k, "-dialog-body{padding:", dialog.body.padding, ";position:relative;}.", k, "-dialog-footer{text-align:right;padding:", dialog.footer.padding, ";margin:", dialog.margin, ";border-top:", dialog.footer.border, ";.", k, "-btn{margin-left:", dialog.footer.btnGap, ";}}");
-}
-export function makeWrapperStyles(k) {
+});
+export var makeWrapperStyles = cache(function makeWrapperStyles(k) {
   //.${k}-fade-leave-active will add position absolute to the styles
   // so we must set fixed with important to .${k}-dialog-overlay
   return /*#__PURE__*/css("position:absolute;z-index:", theme.maxZIndex, ";top:0;left:0;width:100%;.", k, "-dialog-overlay{position:fixed!important;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .5);overflow:auto;}");
-}
-export function makeAlertStyles(k) {
+});
+export var makeAlertStyles = cache(function makeAlertStyles(k) {
   var _context2;
 
   return /*#__PURE__*/css("&.", k, "-alert-dialog{.", k, "-dialog-body{margin-top:", dialog.alert.bodyMarginTop, ";padding:", dialog.alert.padding, ";text-align:center;z-index:1;}.", k, "-dialog-header,.", k, "-dialog-footer{border:none;}.", k, "-dialog-tip-icon{margin-bottom:", dialog.alert.tipIconMarginBottom, ";.", k, "-icon{font-size:", dialog.alert.tipIconFontSize, ";line-height:", dialog.alert.tipIconLineHeight, ";}}", _mapInstanceProperty(_context2 = ['success', 'warning', 'error', 'confirm']).call(_context2, function (type) {
     var color = type === 'error' ? theme.color.danger : type === 'confirm' ? theme.color.primary : theme.color[type];
     return /*#__PURE__*/css("&.", k, "-", type, "{.", k, "-dialog-tip-icon{color:", color, ";}}");
   }), " &:not(.", k, "-confirm){.", k, "-dialog-cancel{display:none;}}&.", k, "-with-title{.", k, "-dialog-body{margin-top:", dialog.alert.titleBodyMarginTop, ";text-align:left;}.", k, "-dialog-tip-icon{float:left;.", k, "-icon{font-size:", dialog.alert.titleTipIconFontSize, ";}}.", k, "-alert-dialog-wrapper{overflow:hidden;padding-left:", dialog.alert.wrapperPaddingLeft, ";}.", k, "-alert-dialog-title{line-height:", dialog.alert.tipIconLineHeight, ";font-size:", dialog.alert.titleFontSize, ";font-weight:", dialog.alert.titleFontWeight, ";}}}");
-}
+});

package/components/drawer/styles.d.ts

@@ -2,5 +2,8 @@ import '../../styles/global';
 declare type ValueOf<T extends readonly any[]> = T[number];
 export declare type Placement = ValueOf<typeof placements>;
 export declare const placements: readonly ["top", "right", "bottom", "left"];
-export declare function makeStyles(overlay: boolean, k: string): string;
+export declare const makeStyles: {
+    (overlay: boolean, k: string): string;
+    clearCache(): {};
+};
 export {};

package/components/drawer/styles.js

@@ -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';
 export var placements = ['top', 'right', 'bottom', 'left'];
 var defaults = {
   get transition() {
@@ -18,11 +19,12 @@ setDefault(function () {
   drawer = deepDefaults(theme, {
     drawer: defaults
   }).drawer;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export function makeStyles(overlay, k) {
+export var makeStyles = cache(function makeStyles(overlay, k) {
   var borderRadius = theme.largeBorderRadius;
   return /*#__PURE__*/css("&.k-drawer{position:fixed;background:transparent;box-shadow:none;border-radius:0;}&.transition-enter-active,&.transition-leave-active,&.transition-appear-active{transition:opacity ", drawer.transition, "!important;overflow:hidden;.", k, "-drawer-content{transition:transform ", drawer.transition, ";}}.", k, "-drawer-content{height:100%;display:flex;background:#fff;flex-direction:column;transform:translateX(0);box-shadow:", drawer.boxShadow, ";.", k, "-dialog-body{flex-grow:1;overflow:auto;}}", makePlacementStyles(k, 'right', "right: 0; height: 100%;", "translateX(100%)", borderRadius + " 0 0 " + borderRadius), " ", makePlacementStyles(k, 'left', 'left: 0; height: 100%;', "translateX(-100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " ", makePlacementStyles(k, 'top', 'left: 50%; top: 0; transform: translateX(-50%);', "translateY(-100%)", "0 0 " + borderRadius + " " + borderRadius), " ", makePlacementStyles(k, 'bottom', 'left: 50%; bottom: 0; transform: translateX(-50%);', "translateY(100%)", "0 " + borderRadius + " " + borderRadius + " 0"), " &.", k, "-top,&.", k, "-bottom{width:100%;}");
-}
+});
 
 function makePlacementStyles(k, placement, styles, transform, borderRadius) {
   return /*#__PURE__*/css("&.", k, "-drawer.", k, "-", placement, "{", styles, " &.transition-enter-from,&.transition-leave-to,&.transition-appear-from{.", k, "-drawer-content{transform:", transform, ";}}.", k, "-drawer-content{border-radius:", borderRadius, ";}}");

package/components/dropdown/styles.d.ts

@@ -1,3 +1,9 @@
 import '../../styles/global';
-export declare function makeMenuStyles(k: string): string;
-export declare function makeItemStyles(k: string): string;
+export declare const makeMenuStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeItemStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/dropdown/styles.js

@@ -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';
 var defaults = {
   item: {
     get height() {
@@ -47,10 +48,12 @@ setDefault(function () {
   dropdown = deepDefaults(theme, {
     dropdown: defaults
   }).dropdown;
+  makeMenuStyles == null ? void 0 : makeMenuStyles.clearCache();
+  makeItemStyles == null ? void 0 : makeItemStyles.clearCache();
 });
-export function makeMenuStyles(k) {
+export var makeMenuStyles = cache(function makeMenuStyles(k) {
   return /*#__PURE__*/css("position:absolute;min-width:", dropdown.menu.minWidth, ";background:", dropdown.menu.bgColor, ";border-radius:", dropdown.menu.borderRadius, ";box-shadow:", theme.middleBoxShadow, ";font-size:", dropdown.menu.fontSize, ";z-index:", dropdown.menu.zIndex, ";top:0;left:0;.", k, "-dropdown{display:block;}");
-}
-export function makeItemStyles(k) {
+});
+export var makeItemStyles = cache(function makeItemStyles(k) {
   return /*#__PURE__*/css("padding:", dropdown.item.padding, ";cursor:pointer;white-space:nowrap;height:", dropdown.item.height, ";line-height:", dropdown.item.height, ";&.", k, "-hover{background:", dropdown.item.hoverBgColor, ";}&:first-of-type{border-radius:", dropdown.menu.borderRadius, " ", dropdown.menu.borderRadius, " 0 0;}&:last-of-type{border-radius:0 0 ", dropdown.menu.borderRadius, " ", dropdown.menu.borderRadius, ";}&.", k, "-disabled{background:", dropdown.item.disabledBgColor, ";color:", dropdown.item.disabledColor, ";cursor:not-allowed;}.", k, "-checkbox,.", k, "-radio{display:flex;margin:0 -", getRight(dropdown.item.padding), " 0 -", getLeft(dropdown.item.padding), ";padding:", dropdown.item.padding, ";}.", k, "-checkbox-wrapper,.", k, "-radio-wrapper{vertical-align:text-bottom;}.", k, "-checkbox-text,.", k, "-radio-text{vertical-align:baseline;}");
-}
+});

package/components/editable/styles.d.ts

@@ -7,4 +7,7 @@ declare const defaults: {
 };
 declare let editable: typeof defaults;
 export { editable };
-export declare function makeStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/editable/styles.js

@@ -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';
 var defaults = {
   iconGap: '0 0 0 8px',
   // invalid
@@ -17,8 +18,9 @@ setDefault(function () {
   editable = deepDefaults(theme, {
     editable: defaults
   }).editable;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
 export { editable };
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:inline-flex;align-items:center;.", k, "-editable-icon{margin:", editable.iconGap, ";}&.", k, "-invalid{.", k, "-input-inner{border:", editable.invalid.border, "!important;}}");
-}
+});

package/components/form/index.spec.js

@@ -1362,4 +1362,47 @@ describe('Form', function () {
       }
     }, _callee8);
   })));
+  it('should validate on init when setting validateOnStart prop', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var Demo, _mount9, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee9$(_context13) {
+      while (1) {
+        switch (_context13.prev = _context13.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component4) {
+              _inheritsLoose(Demo, _Component4);
+
+              function Demo() {
+                var _context12;
+
+                var _this4;
+
+                for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                  args[_key4] = arguments[_key4];
+                }
+
+                _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context12 = [this]).call(_context12, args)) || this;
+                _this4.Form = Form;
+                _this4.FormItem = FormItem;
+                return _this4;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Form, FormItem} = this;\n                <Form ref=\"form\">\n                    <FormItem rules={{required: true}} validateOnStart />\n                </Form>\n            ";
+            _mount9 = mount(Demo), instance = _mount9[0], element = _mount9[1];
+            _context13.next = 5;
+            return wait(500);
+
+          case 5:
+            expect(element.querySelector('.k-form-error')).to.be.exist;
+
+          case 6:
+          case "end":
+            return _context13.stop();
+        }
+      }
+    }, _callee9);
+  })));
 });

package/components/form/item.d.ts

@@ -10,6 +10,7 @@ export interface FormItemProps {
     htmlFor?: string;
     hideLabel?: boolean;
     fluid?: boolean;
+    validateOnStart?: boolean;
 }
 export interface FormItemEvents {
     change: [Event];

package/components/form/item.js

@@ -24,7 +24,8 @@ var typeDefs = {
   label: String,
   htmlFor: String,
   hideLabel: Boolean,
-  fluid: Boolean
+  fluid: Boolean,
+  validateOnStart: Boolean
 };
 export var FormItem = /*#__PURE__*/function (_Component) {
   _inheritsLoose(FormItem, _Component);

package/components/form/styles.d.ts

@@ -1,3 +1,9 @@
 import '../../styles/global';
-export declare function makeItemStyles(k: string): string;
-export declare function makeFormStyles(k: string): string;
+export declare const makeItemStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeFormStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/form/styles.js

@@ -3,6 +3,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   item: {
     gap: "24px",
@@ -48,14 +49,16 @@ setDefault(function () {
   form = deepDefaults(theme, {
     form: defaults
   }).form;
+  makeItemStyles == null ? void 0 : makeItemStyles.clearCache();
+  makeFormStyles == null ? void 0 : makeFormStyles.clearCache();
 });
-export function makeItemStyles(k) {
+export var makeItemStyles = cache(function makeItemStyles(k) {
   return /*#__PURE__*/css("display:flex;position:relative;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.", k, "-fluid>.", k, "-form-content{flex:1;}.", k, "-form-label{display:flex;align-items:center;justify-content:", form.item.labelTextAlign === 'right' ? 'end' : 'start', ";width:", form.item.labelWidth, ";padding-right:", form.item.labelGap, ";max-height:", form.item.labelHeight, ";flex-shrink:0;}.", k, "-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.", k, "-form-content{position:relative;}.", k, "-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.", k, "-ellipsis{.", k, "-form-error-more{display:inline-block;}}}.", k, "-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.", k, "-invalid{.", k, "-input{.", k, "-input-wrapper{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.", k, "-select,.", k, "-checkbox-wrapper,.", k, "-radio-wrapper{border:", form.item.invalidBorder, "!important;}.", k, "-select .", k, "-input .", k, "-input-wrapper{border:none;}}.", k, "-form-append{padding:", form.item.appendPadding, ";vertical-align:middle;}");
-}
-export function makeFormStyles(k) {
+});
+export var makeFormStyles = cache(function makeFormStyles(k) {
   var _context;
 
   return /*#__PURE__*/css("&.", k, "-inline{.", k, "-form-item{display:inline-flex;vertical-align:top;margin-right:", form.item.inlineGap, ";}.", k, "-form-label{width:auto;}}&.", k, "-vertical{.", k, "-form-item{flex-direction:column;}.", k, "-form-label{width:auto;text-align:left;padding:0;justify-content:start;margin-bottom:", form.item.verticalLabelGap, ";}}", _mapInstanceProperty(_context = ['small', 'mini']).call(_context, function (size) {
     return /*#__PURE__*/css("&.", k, "-", size, "{.", k, "-form-item:not(:last-of-type){margin-bottom:", form.item[size + "Gap"], ";}&.", k, "-inline{.", k, "-form-item{margin-right:", form.item[size + "InlineGap"], ";}}}");
   }), ";");
-}
+});

package/components/form/useDirty.js

@@ -4,6 +4,10 @@ export function useDirty(getValidate) {
   var instance = useInstance();
   var isDirty = useState(false);
 
+  if (instance.get('validateOnStart')) {
+    dirty();
+  }
+
   function onChange(e) {
     dirty();
     instance.trigger('change', e);

package/components/grid/styles.d.ts

@@ -1,3 +1,9 @@
 import '../../styles/global';
-export declare function makeRowStyles(k: string): string;
-export declare function makeColStyles(k: string): string;
+export declare const makeRowStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeColStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/grid/styles.js

@@ -1,21 +1,20 @@
 import { css } from '@emotion/css';
-import { theme, setDefault } from '../../styles/theme';
-import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
 import { breakpoints, responsiveMap } from './constants';
-var defaults = {};
-var grid;
-setDefault(function () {
-  grid = deepDefaults(theme, {
-    grid: defaults
-  }).grid;
-});
-export function makeRowStyles(k) {
+import { cache } from '../utils'; // const defaults = {};
+// let grid: typeof defaults;
+// setDefault(() => {
+// grid = deepDefaults(theme, {grid: defaults}).grid;
+// makeRowStyles?.clearCache();
+// makeColStyles?.clearCache();
+// });
+
+export var makeRowStyles = cache(function makeRowStyles(k) {
   return /*#__PURE__*/css("position:relative;display:flex;flex-wrap:wrap;&.", k, "-justify-start{justify-content:flex-start;}&.", k, "-justify-end{justify-content:flex-end;}&.", k, "-justify-center{justify-content:center;}&.", k, "-justify-between{justify-content:space-between;}&.", k, "-justify-around{justify-content:space-around;}&.", k, "-justify-evenly{justify-content:space-evenly;}&.", k, "-align-top{align-items:flex-start;}&.", k, "-align-bottom{align-items:flex-end;}&.", k, "-align-middle{align-items:center;}&.", k, "-align-stretch{align-items:stretch;}&.", k, "-align-baseline{align-items:baseline;}");
-}
-export function makeColStyles(k) {
+});
+export var makeColStyles = cache(function makeColStyles(k) {
   return /*#__PURE__*/css("position:relative;width:100%;.", k, "-col-wrapper{height:100%;}", makeBreakpointsCols(k), ";");
-}
+});
 
 function makeBreakpointsCols(k) {
   var styles = [];

package/components/icon/index.vdt.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createVNode as _$cv, className as _$cn } from 'intact-vue-next';
 import { addStyle, getRestProps } from '../utils';
-import makeStyles from './styles';
+import { makeStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 

package/components/icon/styles.d.ts

@@ -2,4 +2,7 @@ import '../../styles/fonts/ionicons';
 import '../../styles/global';
 export declare const colors: readonly ["primary", "warning", "danger", "success"];
 export declare const sizes: readonly ["large", "small", "mini"];
-export default function makeStyles(k: string, color?: string): string;
+export declare const makeStyles: {
+    (k: string, color?: string | undefined): string;
+    clearCache(): {};
+};

package/components/icon/styles.js

@@ -6,6 +6,7 @@ import { rotate } from '../../styles/keyframes';
 import { makeIconStyles } from '../../styles/fonts/iconfont';
 import '../../styles/fonts/ionicons';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   get transition() {
     return theme.transition.small;
@@ -31,10 +32,11 @@ setDefault(function () {
   icon = deepDefaults(theme, {
     icon: defaults
   }).icon;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
 export var colors = ['primary', 'warning', 'danger', 'success'];
 export var sizes = ['large', 'small', 'mini'];
-export default function makeStyles(k, color) {
+export var makeStyles = cache(function makeStyles(k, color) {
   // create the global icon styles
   makeIconStyles(k);
   return /*#__PURE__*/css("color:", icon.color, ";font-size:", icon.fontSize.default, ";line-height:1;", _mapInstanceProperty(sizes).call(sizes, function (size) {
@@ -44,4 +46,4 @@ export default function makeStyles(k, color) {
     var _color = theme.color[color];
     return /*#__PURE__*/css("&.", k, "-", color, "{color:", _color, ";&.", k, "-hoverable:hover{color:", palette(_color, -2), ";}}");
   }), " &.", k, "-rotate:before{animation:", rotate, " 1s infinite linear;}&:before{font-size:inherit;}&.", k, "-hoverable{cursor:pointer;transition:color ", icon.transition, ";", color && /*#__PURE__*/css("&:hover{color:", palette(color, -2), "!important;}"), ";&:hover{color:", theme.color.primary, ";}}&.", k, "-disabled{cursor:not-allowed;color:", icon.disabledColor, "!important;}");
-}
+});

package/components/input/styles.d.ts

@@ -1,3 +1,9 @@
 import '../../styles/global';
-export declare function makeStyles(k: string): string;
-export declare function makeSearchStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeSearchStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/input/styles.js

@@ -5,6 +5,7 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, sizes } from '../../styles/utils';
 import '../../styles/global';
 import { Input } from './';
+import { cache } from '../utils';
 var defaults = deepDefaults({
   get transition() {
     return theme.transition.middle;
@@ -128,8 +129,10 @@ setDefault(function () {
   input = deepDefaults(theme, {
     input: defaults
   }).input;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
+  makeSearchStyles == null ? void 0 : makeSearchStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   var _context;
 
   return /*#__PURE__*/css("display:inline-block;width:", input.width, ";color:", input.color, ";vertical-align:middle;.", k, "-input-wrapper{display:inline-flex;align-items:center;width:100%;position:relative;border:", input.border, ";background-color:", input.bgColor, ";transition:border ", input.transition, ",background ", input.transition, ",box-shadow ", input.transition, ";border-radius:", input.borderRadius, ";&:hover{border:", input.hoverBorder, ";z-index:1;}}&.", k, "-focus .", k, "-input-wrapper{border:", input.focusBorder, ";z-index:1;}.", k, "-input-inner{flex:1;outline:none;color:inherit;font-size:inherit;border:none;background:transparent;padding:0;width:0;&::placeholder{color:", input.placeholderColor, ";}}&.", k, "-fluid{width:100%;}.", k, "-input-prefix,.", k, "-input-suffix{display:flex;align-items:center;gap:", input.clearIconGap, ";color:", theme.color.lightBlack, ";position:relative;}.", k, "-input-prefix{margin-right:", input.clearIconGap, ";}.", k, "-input-suffix{margin-left:", input.clearIconGap, ";}.", k, "-input-clear{opacity:0;transition:opacity ", input.transition, ";pointer-events:none;color:", input.clearIconColor, ";}&:hover .", k, "-input-clear.", k, "-input-show{opacity:1;pointer-events:all;}.", k, "-input-show-password{color:", input.clearIconColor, ";}&.", k, "-stack-clear{.", k, "-input-clear{position:absolute;z-index:1;right:0;&.", k, "-input-show+*{transition:opacity ", input.transition, ";}}&:hover{.", k, "-input-clear.", k, "-input-show+*{opacity:0;}}}&.", k, "-group{display:inline-flex;.", k, "-input-wrapper{border-radius:0;flex:1;}.", k, "-input-wrapper:first-child{border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}.", k, "-input-wrapper:last-child{border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-prepend,.", k, "-input-append{display:inline-flex;align-items:center;background-color:", input.groupBgColor, ";border:", input.border, ";white-space:nowrap;.", k, "-btn{margin:-1px;&.", k, "-none:hover{background:transparent;}}.", k, "-select{margin:-1px;text-align:left;}}.", k, "-input-prepend{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:", input.borderRadius, " 0 0 ", input.borderRadius, ";}}.", k, "-input-append{&,.", k, "-btn,.", k, "-select{z-index:1;border-radius:0 ", input.borderRadius, " ", input.borderRadius, " 0;}}.", k, "-input-padding{padding:0 ", input.groupPaddingGap, ";}.", k, "-input-prepend{border-right:none;}.", k, "-input-append{border-left:none;}&.", k, "-flat{color:", _flatInstanceProperty(input).color, ";.", k, "-input-wrapper{border:none;background:", _flatInstanceProperty(input).bgColor, ";}}&.", k, "-disabled{color:", input.disabledColor, ";cursor:not-allowed;.", k, "-input-wrapper{border-color:", input.disabledBorderColor, ";background:", input.disabledBgColor, ";}.", k, "-input-inner{cursor:not-allowed;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
@@ -140,10 +143,10 @@ export function makeStyles(k) {
   }), "&.", k, "-inline{.", k, "-input-wrapper{height:auto;border:none;border-radius:0;padding:0;}}&.", k, "-type-textarea{.", k, "-input-wrapper{display:inline-block;padding:0;height:auto;}.", k, "-textarea{width:100%;padding:", input.textareaPadding, ";line-height:1.5;vertical-align:top;}.", k, "-input-suffix{margin:0;justify-content:flex-end;}}", _mapInstanceProperty(_context = Input.typeDefs.resize).call(_context, function (type) {
     return /*#__PURE__*/css("&.", k, "-resize-", type, "{.", k, "-textarea{resize:", type, ";}}");
   }), ".", k, "-input-fake{left:0;top:0;position:absolute;overflow:hidden;visibility:hidden;white-space:nowrap;}&.", k, "-auto-width{width:auto;max-width:100%;}.", k, "-input-count{color:", input.count.color, ";}");
-}
-export function makeSearchStyles(k) {
+});
+export var makeSearchStyles = cache(function makeSearchStyles(k) {
   return /*#__PURE__*/css("position:relative;display:inline-block;.", k, "-input{transition:width ", input.transition, ";}.", k, "-btn{position:absolute;top:0;right:0;z-index:1;}&.", k, "-default .", k, "-btn:hover{background:transparent;}.", k, "-input-suffix{margin-right:", input.search.suffixMarginRight, ";}&.", k, "-hide{", _mapInstanceProperty(sizes).call(sizes, function (size) {
     if (size == 'default') return;
     return /*#__PURE__*/css(".", k, "-input.", k, "-", size, "{width:", input[size].height, ";}");
   }), ";.", k, "-input{width:", input.default.height, ";}.", k, "-input-inner{padding:0!important;}}&.", k, "-line{.", k, "-input-wrapper{border-width:0;}&.", k, "-open{.", k, "-input-wrapper{border-bottom-width:1px;}.", k, "-btn:hover{background:transparent;}}}");
-}
+});

package/components/layout/styles.d.ts

@@ -1,7 +1,19 @@
 import '../../styles/global';
 export declare const themes: readonly ["light", "dark", "white"];
 export declare function getCollapseWidth(collapsedWidth?: string | number): string;
-export declare function makeLayoutStyles(k: string): string;
-export declare function makeHeaderStyles(k: string): string;
-export declare function makeAsideStyles(k: string): string;
-export declare function makeBodyStyles(k: string): string;
+export declare const makeLayoutStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeHeaderStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeAsideStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeBodyStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/layout/styles.js

@@ -6,6 +6,7 @@ import '../../styles/global';
 import { menu } from '../menu/styles';
 import { isNullOrUndefined } from 'intact-shared';
 import { getStyle } from './helpers';
+import { cache } from '../utils';
 var sizes = ['small', 'large'];
 export var themes = ['light', 'dark', 'white'];
 var defaults = {
@@ -62,27 +63,31 @@ setDefault(function () {
   layout = deepDefaults(theme, {
     layout: defaults
   }).layout;
+  makeLayoutStyles == null ? void 0 : makeLayoutStyles.clearCache();
+  makeHeaderStyles == null ? void 0 : makeHeaderStyles.clearCache();
+  makeAsideStyles == null ? void 0 : makeAsideStyles.clearCache();
+  makeBodyStyles == null ? void 0 : makeBodyStyles.clearCache();
 });
 export function getCollapseWidth(collapsedWidth) {
   return isNullOrUndefined(collapsedWidth) ? layout.collapsedWidth : getStyle(collapsedWidth);
 }
-export function makeLayoutStyles(k) {
+export var makeLayoutStyles = cache(function makeLayoutStyles(k) {
   return /*#__PURE__*/css("display:flex;flex-direction:column;flex:1;transition:padding-left ", layout.transition, ";&.", k, "-has-aside{flex-direction:row;}.", k, "-layout-footer{padding:", layout.footerPadding, ";}.", k, "-layout-body{flex:1;}");
-}
-export function makeHeaderStyles(k) {
+});
+export var makeHeaderStyles = cache(function makeHeaderStyles(k) {
   return /*#__PURE__*/css("display:flex;align-items:center;color:", layout.color, ";background:", layout.bgColor, ";left:0;transition:left ", layout.transition, ";&.", k, "-fixed{position:fixed;left:0;right:0;top:0;z-index:", theme.midZIndex + 1, ";}>.", k, "-menu{background:transparent!important;}&.", k, "-blur{backdrop-filter:blur(20px);background:", setAlpha(layout.bgColor, 0.1), ";}&.", k, "-box-shadow{border-bottom:none!important;box-shadow:", theme.boxShadow, ";}", _mapInstanceProperty(themes).call(themes, function (theme) {
     if (theme === 'dark') return;
     var styles = layout[theme];
     return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-bottom:", styles.border, ";&.", k, "-blur{background:", setAlpha(styles.bgColor, 0.1), ";}}");
   }), ";");
-}
-export function makeAsideStyles(k) {
+});
+export var makeAsideStyles = cache(function makeAsideStyles(k) {
   return /*#__PURE__*/css("transition:width ", layout.transition, ";display:flex;flex-direction:column;background:", layout.bgColor, ";color:", layout.color, ";", _mapInstanceProperty(themes).call(themes, function (theme) {
     if (theme === 'dark') return;
     var styles = layout[theme];
     return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-right:", styles.border, ";}");
   }), " &.", k, "-fixed{position:fixed;overflow:auto;left:0;top:0;bottom:0;z-index:", theme.midZIndex, ";}.", k, "-menu{width:auto!important;}");
-}
-export function makeBodyStyles(k) {
+});
+export var makeBodyStyles = cache(function makeBodyStyles(k) {
   return /*#__PURE__*/css("transition:padding-left ", layout.transition, ";");
-}
+});

package/components/menu/styles.d.ts

@@ -62,7 +62,19 @@ declare const defaults: {
 };
 declare let menu: typeof defaults;
 export { menu };
-export declare function makeMenuStyles(k: string): string;
-export declare function makeTitleStyles(k: string): string;
-export declare function makeItemStyles(k: string): string;
-export declare function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingLeft?: string): string[];
+export declare const makeMenuStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeTitleStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeItemStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeNestedMenuStyles: {
+    (k: string, hasIcon: boolean, parentPaddingLeft?: string | undefined): string;
+    clearCache(): {};
+};

package/components/menu/styles.js

@@ -3,6 +3,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, getLeft, palette } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var sizes = ['large', 'small'];
 var defaults = {
   get transition() {
@@ -115,9 +116,13 @@ setDefault(function () {
   menu = deepDefaults(theme, {
     menu: defaults
   }).menu;
+  makeMenuStyles == null ? void 0 : makeMenuStyles.clearCache();
+  makeItemStyles == null ? void 0 : makeItemStyles.clearCache();
+  makeTitleStyles == null ? void 0 : makeTitleStyles.clearCache();
+  makeNestedMenuStyles == null ? void 0 : makeNestedMenuStyles.clearCache();
 });
 export { menu };
-export function makeMenuStyles(k) {
+export var makeMenuStyles = cache(function makeMenuStyles(k) {
   var _context;
 
   // we must increase the priority by adding &.${k}-menu
@@ -129,20 +134,20 @@ export function makeMenuStyles(k) {
     var styles = menu[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{width:", styles.width, ";font-size:", styles.fontSize, ";.", k, "-menu{font-size:", styles.fontSize, ";}}");
   }), "&.", k, "-collapsed{width:calc(", menu.icon.width, " + ", getLeft(menu.item.padding), " * 2);.", k, "-icon{margin-right:0;}.", k, "-menu-arrow{display:none;}}&.", k, "-dropdown-menu{width:auto;min-width:", menu.dropdown.minWidth, ";.", k, "-menu-arrow{transform:rotate(-90deg);}}&.", k, "-horizontal{width:auto;display:flex;align-items:center;.", k, "-menu-header{border-bottom:none;border-right:", menu.header.borderBottom, ";}}");
-}
-export function makeTitleStyles(k) {
+});
+export var makeTitleStyles = cache(function makeTitleStyles(k) {
   var item = menu.item;
   return /*#__PURE__*/css("display:flex;align-items:center;padding:", item.padding, ";color:", item.color, ";white-space:nowrap;overflow:hidden;flex-wrap:nowrap;");
-}
-export function makeItemStyles(k) {
+});
+export var makeItemStyles = cache(function makeItemStyles(k) {
   var item = menu.item;
-  return /*#__PURE__*/css(".", k, "-menu-title{cursor:pointer;height:", menu.item.height, ";&:hover{color:", menu.item.hoverColor, ";}}.", k, "-menu-name{flex:1;display:flex;align-items:center;min-width:0;span{overflow:hidden;text-overflow:ellipsis;min-width:0;}.", k, "-icon{color:inherit;}}.", k, "-menu-arrow{transition:transform ", menu.transition, ";margin:0 0 0 ", menu.icon.gap, ";}&.", k, "-expanded{>.", k, "-menu-title{color:", menu.item.hoverColor, ";.", k, "-menu-arrow{transform:rotateX(180deg);}}}&.", k, "-highlighted{>.", k, "-menu-title{color:", menu.item.hoverColor, ";}}&.", k, "-active{>.", k, "-menu-title{color:", menu.item.hoverColor, "!important;background:", menu.item.activeBgColor, ";}}&.", k, "-disabled{>.", k, "-menu-title{color:", menu.item.disabledColor, "!important;cursor:not-allowed;}}.", k, "-menu-dot{font-size:", menu.item.dotFontSize, ";transform:scale(.4);}");
-}
-export function makeNestedMenuStyles(k, hasIcon, parentPaddingLeft) {
+  return /*#__PURE__*/css(".", k, "-menu-title{cursor:pointer;height:", item.height, ";&:hover{color:", item.hoverColor, ";}}.", k, "-menu-name{flex:1;display:flex;align-items:center;min-width:0;span{overflow:hidden;text-overflow:ellipsis;min-width:0;}.", k, "-icon{color:inherit;}}.", k, "-menu-arrow{transition:transform ", menu.transition, ";margin:0 0 0 ", menu.icon.gap, ";}&.", k, "-expanded{>.", k, "-menu-title{color:", item.hoverColor, ";.", k, "-menu-arrow{transform:rotateX(180deg);}}}&.", k, "-highlighted{>.", k, "-menu-title{color:", item.hoverColor, ";}}&.", k, "-active{>.", k, "-menu-title{color:", item.hoverColor, "!important;background:", item.activeBgColor, ";}}&.", k, "-disabled{>.", k, "-menu-title{color:", item.disabledColor, "!important;cursor:not-allowed;}}.", k, "-menu-dot{font-size:", item.dotFontSize, ";transform:scale(.4);}");
+});
+export var makeNestedMenuStyles = cache(function makeNestedMenuStyles(k, hasIcon, parentPaddingLeft) {
   if (parentPaddingLeft === void 0) {
     parentPaddingLeft = getLeft(menu.item.padding);
   }
 
   var paddingLeft = "" + parentPaddingLeft + (hasIcon ? ' + ' + menu.icon.width : '') + " + " + menu.icon.gap;
   return [/*#__PURE__*/css("&.", k, "-menu{width:auto;background:", menu.subBgColor, ";.", k, "-menu-title{padding-left:calc(", paddingLeft, ");}}"), paddingLeft];
-}
+});

package/components/message/styles.d.ts

@@ -1,3 +1,9 @@
 import '../../styles/global';
-export declare function makeMessagesStyles(k: string): string;
-export declare function makeMessageStyles(k: string): string;
+export declare const makeMessagesStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeMessageStyles: {
+    (k: string): string;
+    clearCache(): {};
+};