@king-design/vue 3.1.1 → 3.1.3

package/components/datepicker/styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, palette } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   width: "300px",
   padding: "16px 16px 4px",
@@ -77,14 +78,17 @@ setDefault(function () {
   datepicker = deepDefaults(theme, {
     datepicker: defaults
   }).datepicker;
+  makePanelStyles == null ? void 0 : makePanelStyles.clearCache();
+  makeCalendarStyles == null ? void 0 : makeCalendarStyles.clearCache();
+  makeTimeStyles == null ? void 0 : makeTimeStyles.clearCache();
 });
 export { datepicker };
-export function makePanelStyles(k) {
+export var makePanelStyles = cache(function makePanelStyles(k) {
   return /*#__PURE__*/css("display:flex;.", k, "-datepicker-shortcuts{width:", datepicker.shortcuts.width, ";padding:", datepicker.shortcuts.padding, ";border-right:", datepicker.border, ";}.", k, "-datepicker-shortcut{height:", datepicker.shortcuts.shortcut.height, ";line-height:", datepicker.shortcuts.shortcut.height, ";padding:", datepicker.shortcuts.shortcut.padding, ";cursor:pointer;&:hover{background:", datepicker.shortcuts.shortcut.hoverBgcolor, ";}}.", k, "-datepicker-calendars{display:flex;}.", k, "-datepicker-calendar-wrapper{&:nth-child(2){border-left:", datepicker.border, ";}.", k, "-tabs{border:none;.", k, "-tabs-wrapper{float:none;}.", k, "-tab{width:50%;}}}.", k, "-datepicker-footer{border-top:", datepicker.border, ";padding:", datepicker.footer.padding, ";text-align:right;}");
-}
-export function makeCalendarStyles(k) {
+});
+export var makeCalendarStyles = cache(function makeCalendarStyles(k) {
   return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.", k, "-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.", k, "-prev .", k, "-icon,.", k, "-next .", k, "-icon{margin:0 -5px!important;}.", k, "-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.", k, "-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.", k, "-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.", k, "-weekday{flex:1;text-align:center;}.", k, "-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;border-radius:", datepicker.item.borderRadius, ";.", k, "-value{border-radius:", datepicker.item.borderRadius, ";}&.", k, "-hover{background:", datepicker.item.hoverBgColor, ";}&.", k, "-exceed{color:", datepicker.item.exceedColor, ";}&.", k, "-today .", k, "-value{border:", datepicker.item.todayBorder, ";}&.", k, "-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.", k, "-today .", k, "-value{border-color:", datepicker.item.active.todayBorderColor, ";}}&.", k, "-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.", k, "-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.", k, "-value{flex:1;display:flex;align-items:center;justify-content:center;height:100%;}}.", k, "-days{display:grid;grid-template-columns:repeat(7, 1fr);}.", k, "-years{display:grid;grid-template-columns:repeat(4, 1fr);}");
-}
-export function makeTimeStyles(k) {
+});
+export var makeTimeStyles = cache(function makeTimeStyles(k) {
   return /*#__PURE__*/css("display:flex;padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.", k, "-scroll-select{flex:1;height:305px;}");
-}
+});

package/components/diagram/styles.d.ts

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

package/components/diagram/styles.js

@@ -2,7 +2,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/css';
 import '../../styles/global';
-export function makeStyles(k) {
+import { cache } from '../utils';
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
     name: "ohhwil",
     styles: "display:inline-block;overflow:auto;.mxRubberband{position:absolute;overflow:hidden;border-style:solid;border-width:1px;border-color:#0000ff;background:#0077ff;}.mxCellEditor{background:url(\"data:image/gif;base64,R0lGODlhMAAwAIAAAP///wAAACH5BAEAAAAALAAAAAAwADAAAAIxhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8egpAAA7\");border-color:transparent;border-style:solid;display:inline-block;position:absolute;overflow:visible;word-wrap:normal;border-width:0;min-width:1px;resize:none;padding:0;margin:0;}.mxPlainTextEditor{padding:0;margin:0;}"
@@ -11,4 +12,4 @@ export function makeStyles(k) {
     styles: "display:inline-block;overflow:auto;.mxRubberband{position:absolute;overflow:hidden;border-style:solid;border-width:1px;border-color:#0000ff;background:#0077ff;}.mxCellEditor{background:url(\"data:image/gif;base64,R0lGODlhMAAwAIAAAP///wAAACH5BAEAAAAALAAAAAAwADAAAAIxhI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8egpAAA7\");border-color:transparent;border-style:solid;display:inline-block;position:absolute;overflow:visible;word-wrap:normal;border-width:0;min-width:1px;resize:none;padding:0;margin:0;}.mxPlainTextEditor{padding:0;margin:0;}",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   });
-}
+});

package/components/dialog/index.spec.js

@@ -7,7 +7,7 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 
 function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _unsupportedIterableToArray(o, minLen) { var _context21; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context21 = Object.prototype.toString.call(o)).call(_context21, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _unsupportedIterableToArray(o, minLen) { var _context23; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context23 = Object.prototype.toString.call(o)).call(_context23, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
@@ -732,6 +732,66 @@ describe('Dialog', function () {
         }
       }
     }, _callee14);
+  })));
+  it('should update position when change container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+    var Demo, _mount15, instance, element, dialogDom, style;
+
+    return _regeneratorRuntime.wrap(function _callee15$(_context22) {
+      while (1) {
+        switch (_context22.prev = _context22.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component7) {
+              _inheritsLoose(Demo, _Component7);
+
+              function Demo() {
+                var _context21;
+
+                var _this7;
+
+                for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+                  args[_key7] = arguments[_key7];
+                }
+
+                _this7 = _Component7.call.apply(_Component7, _concatInstanceProperty(_context21 = [this]).call(_context21, args)) || this;
+                _this7.Dialog = Dialog;
+                return _this7;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  container: function container(parentDom) {
+                    return parentDom;
+                  }
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                var Dialog = this.Dialog;\n                <Dialog value={true} container={this.get('container')} ref=\"dialog\">test</Dialog>\n            ";
+            _mount15 = mount(Demo), instance = _mount15[0], element = _mount15[1];
+            _context22.next = 5;
+            return wait();
+
+          case 5:
+            instance.set('container', undefined);
+            _context22.next = 8;
+            return wait();
+
+          case 8:
+            dialogDom = instance.refs.dialog.dialogRef.value;
+            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);
+
+          case 13:
+          case "end":
+            return _context22.stop();
+        }
+      }
+    }, _callee15);
   }))); // 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.d.ts

@@ -1,4 +1,13 @@
 import '../../styles/global';
-export declare function makeDialogStyles(k: string): string;
-export declare function makeWrapperStyles(k: string): string;
-export declare function makeAlertStyles(k: string): string;
+export declare const makeDialogStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeWrapperStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeAlertStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

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/dialog/usePosition.js

@@ -5,6 +5,13 @@ export function usePosition(elementRef) {
   var instance = useInstance();
   instance.on(SHOW, center);
   instance.on('afterClose', onAfterLeave);
+  instance.watch('container', function () {
+    if (!instance.get('value')) return;
+    center();
+  }, {
+    presented: true,
+    inited: true
+  });
 
   function center() {
     position(elementRef.value, {

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/dropdown/usePosition.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { useInstance, findDomFromVNode } from 'intact-vue-next';
 import { position } from '../position';
-import { noop } from 'intact-shared';
-import { isObject } from 'intact-shared';
+import { noop, isObject, isFunction } from 'intact-shared';
 import { isEqualObject } from '../utils';
 export function usePosition() {
   var instance = useInstance();
@@ -16,19 +15,23 @@ export function usePosition() {
   });
   ['of', 'position'].forEach(function (item) {
     instance.watch(item, function (newValue, oldValue) {
-      // return if object is the same
-      if (isObject(newValue) && isObject(oldValue) && // is not event object
-      !(newValue instanceof Event) && isEqualObject(newValue, oldValue)) {
-        return;
-      }
-
-      if (instance.get('value')) {
-        handle(noop);
-      }
+      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;
+      handle(noop);
     }, {
       presented: true,
       inited: true
     });
+  }); // watch container, it is not commonly used
+
+  instance.watch('container', function (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, parentFeedback) {

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/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/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(): {};
+};