@king-design/vue 3.1.1 → 3.1.3

package/__tests__/components/upload.spec.ts

@@ -0,0 +1,39 @@
+import {createApp, render, defineComponent, ref} from 'vue';
+import {mount, unmount, dispatchEvent, getElement, wait} from '@/test/utils';
+import {Upload} from '../../';
+
+describe('Upload', () => {
+    it('should handle bi-directional data binding for files', async () => {
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+        const test = shouldNotWarn():
+        const Demo = defineComponent({
+            setup() {
+                const files = ref([]);
+                return { files };
+            },
+            components: { Upload },
+            template: `<Upload v-model:files="files" :autoUpload="false" />{{ files }}`
+        });
+        const vue = createApp({
+            template: `<Demo /> `,
+            components: { Demo },
+        }).mount(container);
+
+        await wait();
+        test();
+
+        render(null, container);
+        document.body.removeChild(container);
+    });
+});
+
+function shouldNotWarn() {
+    const warn = console.warn;
+    const spy = sinon.spy((...args: any[]) => warn.apply(console, args));
+    console.warn = spy;
+    return () => {
+        expect(spy.callCount).to.eql(0);
+        console.warn = warn;
+    }
+}

package/babel.config.js

@@ -0,0 +1,29 @@
+module.exports = function(api) {
+    api.cache(true);
+
+    const corejs = {version: 3, proposals: true};
+
+    const config = {
+        "presets": [
+            ["@babel/preset-env", {
+                "loose": true,
+                "modules": 'cjs',
+            }],
+            "@babel/preset-typescript",
+        ],
+        "plugins": [
+            ["@babel/plugin-transform-runtime", {
+                "corejs": corejs,
+            }],
+            ["@babel/plugin-proposal-decorators", {"legacy": true}],
+            "@babel/plugin-proposal-do-expressions",
+            ['@emotion', {
+                sourceMap: false,
+                autoLabel: 'never',
+            }],
+            '@vue/babel-plugin-jsx',
+        ]
+    };
+
+    return config;
+}

package/components/affix/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/affix/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 = {
   zIndex: 9
 };
@@ -10,7 +11,8 @@ setDefault(function () {
   affix = deepDefaults(theme, {
     affix: defaults
   }).affix;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("position:relative;z-index:", affix.zIndex, ";");
-}
+});

package/components/badge/index.vdt.js

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

package/components/badge/styles.d.ts

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

package/components/badge/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 = {
   width: '8px',
 
@@ -20,7 +21,8 @@ setDefault(function () {
   badge = deepDefaults(theme, {
     badge: defaults
   }).badge;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export default function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:inline-block;position:relative;vertical-align:middle;>.", k, "-badge-text{display:inline-block;position:absolute;width:", badge.width, ";height:", badge.height, ";border-radius:50%;top:0;right:0;transform:translate(50%, -50%);background:", badge.bgColor, ";font-size:85%;vertical-align:baseline;}&.", k, "-has-text>.", k, "-badge-text{width:auto;height:", badge.textHeight, ";line-height:", badge.textHeight, ";border-radius:calc(", badge.textHeight, " / 2);padding:0 ", badge.textPadding, ";color:", badge.textColor, ";}&.", k, "-alone>.", k, "-badge-text{position:static;transform:none;}");
-}
+});

package/components/breadcrumb/index.vdt.js

@@ -3,7 +3,7 @@ import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/spl
 import { createElementVNode as _$ce, noop as _$no, className as _$cn, createVNode as _$cv } from 'intact-vue-next';
 import { getRestProps, mapChildren } from '../utils';
 import { BreadcrumbItem } from './item';
-import makeStyles from './styles';
+import { makeStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 

package/components/breadcrumb/styles.d.ts

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

package/components/breadcrumb/styles.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { deepDefaults } from '../../styles/utils';
 import { theme, setDefault } from '../../styles/theme';
 import '../../styles/global';
+import { cache } from '../utils';
 var defaults = {
   fontSize: '14px',
 
@@ -22,7 +23,8 @@ setDefault(function () {
   breadcrumb = deepDefaults(theme, {
     breadcrumb: defaults
   }).breadcrumb;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export default function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("font-size:", breadcrumb.fontSize, ";display:flex;align-items:center;.", k, "-breadcrumb-item{&:last-of-type .", k, "-breadcrumb-link{font-weight:", breadcrumb.activeFontWeight, ";color:", breadcrumb.activeColor, ";}}.", k, "-breadcrumb-link,.", k, "-breadcrumb-link a{color:", breadcrumb.color, ";}a.", k, "-breadcrumb-link,.", k, "-breadcrumb-link a{cursor:pointer;&:hover{color:", breadcrumb.hoverColor, ";}}.", k, "-breadcrumb-separator{margin:0 ", breadcrumb.gap, ";}");
-}
+});

package/components/button/styles.d.ts

@@ -83,5 +83,11 @@ declare const defaults: {
 };
 declare let button: typeof defaults;
 export { button };
-export declare function makeButtonStyles(k: string, iconSide?: string): string;
-export declare function makeButtonGroupStyles(k: string): string;
+export declare const makeButtonStyles: {
+    (k: string, iconSide?: string | undefined): string;
+    clearCache(): {};
+};
+export declare const makeButtonGroupStyles: {
+    (k: string): string;
+    clearCache(): {};
+};

package/components/button/styles.js

@@ -3,6 +3,7 @@ import { css, cx } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults, palette, getLeft, darken } from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 export var types = ['primary', 'warning', 'danger', 'active', 'success'];
 var sizes = ['large', 'small', 'mini'];
 var btnStyles = {
@@ -230,9 +231,11 @@ setDefault(function () {
   button = deepDefaults(theme, {
     button: defaults
   }).button;
+  makeButtonStyles == null ? void 0 : makeButtonStyles.clearCache();
+  makeButtonGroupStyles == null ? void 0 : makeButtonGroupStyles.clearCache();
 });
 export { button };
-export function makeButtonStyles(k, iconSide) {
+export var makeButtonStyles = cache(function makeButtonStyles(k, iconSide) {
   var _button = button,
       secondary = _button.secondary,
       link = _button.link;
@@ -259,8 +262,8 @@ export function makeButtonStyles(k, iconSide) {
   css(".", k, "-icon{", iconSide === 'right' ? "margin-left: " + button.icon.gap + ";" : "margin-right: " + button.icon.gap + ";", ";}", !iconSide && /*#__PURE__*/css("&.", k, "-loading{&:not(.", k, "-btn-icon){padding-left:calc(", getLeft(button.padding), " + 1em);", _mapInstanceProperty(sizes).call(sizes, function (size) {
     return /*#__PURE__*/css("&.", k, "-", size, "{padding-left:calc(", getLeft(button[size].padding), " + 1em);}");
   }), ";.", k, "-icon-loading{margin-left:-1em;}}}"), ";"));
-}
-export function makeButtonGroupStyles(k) {
+});
+export var makeButtonGroupStyles = cache(function makeButtonGroupStyles(k) {
   return /*#__PURE__*/css("display:inline-flex;align-items:center;flex-wrap:wrap;vertical-align:middle;.", k, "-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.", k, "-active{z-index:1;position:relative;}}&.", k, "-fluid{width:100%;}&:not(.", k, "-vertical){>.", k, "-btn{", _mapInstanceProperty(types).call(types, function (type) {
     if (type === 'active') return;
     var borderColor = button.group[type].borderColor;
@@ -270,4 +273,4 @@ export function makeButtonGroupStyles(k) {
     var borderColor = button.group[type].borderColor;
     return /*#__PURE__*/css("&.", k, "-", type, ":not(:first-child){border-top-color:", borderColor, ";}&.", k, "-", type, ":not(:last-child){border-bottom-color:", borderColor, ";}");
   }), ";&:not(.", k, "-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}&.", k, "-seperate{gap:8px;>.", k, "-btn{border-radius:", button.borderRadius, "!important;}}");
-}
+});

package/components/card/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/card/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 = {
   border: '1px solid #e5e5e5',
   padding: '16px',
@@ -23,7 +24,8 @@ setDefault(function () {
   card = deepDefaults(theme, {
     card: defaults
   }).card;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("border-radius:", card.borderRadius, ";background:", card.bgColor, ";.", k, "-card-header{height:", card.headerHeight, ";line-height:", card.headerHeight, ";padding:0 ", card.padding, ";}.", k, "-card-title{font-size:", card.headerFontSize, ";display:inline-block;}.", k, "-card-extra{float:right;height:100%;display:flex;align-items:center;}.", k, "-card-body{padding:0 ", card.padding, " ", card.padding, ";}&.", k, "-shadow{box-shadow:", card.boxShadow, ";}&.", k, "-none{box-shadow:none;}&.", k, "-border{border:", card.border, ";.", k, "-card-header{border-bottom:", card.border, ";}.", k, "-card-body{padding-top:", card.padding, ";}}&.", k, "-no-header{.", k, "-card-body{padding-top:", card.padding, ";}}&.", k, "-card-grid{.", k, "-card-body{display:flex;padding:0;}&.", k, "-border{.", k, "-card-column:not(:last-of-type){border-right:", card.border, ";}}}.", k, "-card-column{display:flex;align-items:center;padding:", card.padding, ";&.", k, "-fluid{flex:1;}&.", k, "-center{justify-content:center;}}");
-}
+});

package/components/carousel/styles.d.ts

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

package/components/carousel/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 = {
   get transition() {
     return theme.transition.large;
@@ -38,10 +39,12 @@ setDefault(function () {
   carousel = deepDefaults(theme, {
     carousel: defaults
   }).carousel;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
+  makeItemStyles == null ? void 0 : makeItemStyles.clearCache();
 });
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("height:", carousel.height, ";position:relative;overflow:hidden;.", k, "-carousel-indicator{position:absolute;left:50%;transform:translateX(-50%);bottom:", carousel.indicator.bottom, ";}.", k, "-carousel-dot{height:", carousel.indicator.height, ";float:left;margin:", carousel.dot.margin, ";cursor:pointer;padding-top:", carousel.dot.paddingTop, ";&:before{content:'';display:block;width:", carousel.dot.width, ";height:", carousel.dot.height, ";background:", carousel.dot.bgColor, ";opacity:", carousel.dot.opacity, ";transition:width ", carousel.transition, ";}&.", k, "-active:before{opacity:", carousel.dot.active.opacity, ";width:", carousel.dot.active.width, ";}}.", k, "-carousel-btn{position:absolute;background:", carousel.arrow.bgColor, "!important;top:50%;transform:translateY(-50%);color:", carousel.arrow.color, ";opacity:", carousel.arrow.opacity, ";&:hover{color:#fff;opacity:", carousel.arrow.hoverOpacity, "!important;background:", carousel.arrow.bgColor, ";}&.", k, "-prev{left:", carousel.arrow.left, ";}&.", k, "-next{right:", carousel.arrow.right, ";}}&.", k, "-hover{.", k, "-carousel-btn{opacity:0;}&:hover{.", k, "-carousel-btn{opacity:", carousel.arrow.opacity, ";}}}&.", k, "-never{.", k, "-carousel-btn{display:none;}}&.", k, "-slide{.", k, "-carousel-wrapper{transition:transform ", carousel.transition, ";white-space:nowrap;}}&.", k, "-stop{.", k, "-carousel-wrapper{transition:none;}}&.", k, "-fade{.", k, "-carousel-item{position:absolute;}}");
-}
-export function makeItemStyles(k) {
+});
+export var makeItemStyles = cache(function makeItemStyles(k) {
   return /*#__PURE__*/css("display:inline-block;width:100%;height:100%;&.", k, "-carousel-fade-enter-active,&.", k, "-carousel-fade-leave-active{transition:opacity ", carousel.transition, ";}&.", k, "-carousel-fade-enter-from,&.", k, "-carousel-fade-leave-to{opacity:0;}");
-}
+});

package/components/cascader/index.vdt.js

@@ -18,7 +18,8 @@ export default function ($props, $blocks, $__proto__) {
       data = _this$get.data,
       trigger = _this$get.trigger,
       filterable = _this$get.filterable,
-      fields = _this$get.fields;
+      fields = _this$get.fields,
+      multiple = _this$get.multiple;
 
   var k = this.config.k;
   var baseMenuStyles = makeMenuStyles(k);
@@ -57,6 +58,7 @@ export default function ($props, $blocks, $__proto__) {
           'disabled': getField(item, 'disabled'),
           'className': _$cn((_$cn2 = {}, _$cn2[k + "-cascader-option"] = true, _$cn2[k + "-active"] = showed, _$cn2[k + "-selected"] = selected, _$cn2)),
           'ev-select': onSelect.bind(null, value, level),
+          'hideOnSelect': !multiple,
           'children': [getField(item, 'label'), children ? _$cc(Icon, {
             'className': _$cn(k + "-cascader-arrow " + k + "-icon-right")
           }) : undefined]

package/components/cascader/styles.d.ts

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

package/components/cascader/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: '140px',
   height: '160px',
@@ -41,10 +42,12 @@ setDefault(function () {
   cascader = deepDefaults(theme, {
     cascader: defaults
   }).cascader;
+  makeMenuStyles == null ? void 0 : makeMenuStyles.clearCache();
+  makeFilterMenuStyles == null ? void 0 : makeFilterMenuStyles.clearCache();
 });
-export function makeMenuStyles(k) {
+export var makeMenuStyles = cache(function makeMenuStyles(k) {
   return /*#__PURE__*/css("min-width:", cascader.width, "!important;height:", cascader.height, ";overflow:auto;.", k, "-cascader-arrow{float:right;height:100%;margin-left:", cascader.arrowGap, ";line-height:inherit;}.", k, "-cascader-loading{display:block;text-align:center;margin-top:", cascader.loadingGap, ";}.", k, "-cascader-empty{padding:", cascader.empty.padding, ";color:", cascader.empty.color, ";text-align:center;}.", k, "-cascader-option{&.", k, "-selected{color:", cascader.selectedColor, ";}&.", k, "-active{background:", cascader.activeBgColor, ";}}");
-}
-export function makeFilterMenuStyles(k) {
+});
+export var makeFilterMenuStyles = cache(function makeFilterMenuStyles(k) {
   return /*#__PURE__*/css("min-width:", _filterInstanceProperty(cascader).minWidth, "!important;height:auto;max-height:", _filterInstanceProperty(cascader).maxHeight, ";em{font-style:normal;color:", _filterInstanceProperty(cascader).highlightColor, ";}");
-}
+});

package/components/checkbox/index.vdt.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime-corejs3/helpers/object
 var _excluded = ["className", "disabled", "falseValue", "children", "value", "trueValue", "style", "indeterminate", "title"];
 import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as _$cc, createElementVNode as _$ce } from 'intact-vue-next';
 import { getRestProps } from '../utils';
-import makeStyles from './styles';
+import { makeStyles } from './styles';
 import { Wave } from '../wave';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;

package/components/checkbox/styles.d.ts

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

package/components/checkbox/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: '16px',
 
@@ -76,7 +77,8 @@ setDefault(function () {
   checkbox = deepDefaults(theme, {
     checkbox: defaults
   }).checkbox;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
 });
-export default function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.", k, "-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}}&:hover{.", k, "-checkbox-wrapper{border:", checkbox.hoverBorder, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.", k, "-checkbox-text{margin-left:", checkbox.text.gap, ";flex:0 1 auto;}&.", k, "-checked,&.", k, "-indeterminate{.", k, "-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.", k, "-indeterminate{.", k, "-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;}}}&.", k, "-checked{.", k, "-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.", k, "-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.", k, "-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.", k, "-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}&.", k, "-checked,&.", k, "-indeterminate{.", k, "-checkbox-wrapper{border-color:", checkbox.disabled.checked.borderColor, ";background:", checkbox.disabled.checked.bgColor, ";}}}");
-}
+});

package/components/code/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/code/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: "1wv4onu",
     styles: "position:relative;height:100%"
@@ -11,4 +12,4 @@ export function makeStyles(k) {
     styles: "position:relative;height:100%",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   });
-}
+});

package/components/collapse/index.spec.js

@@ -16,7 +16,7 @@ describe('Collapse', function () {
           case 0:
             this.timeout(0);
             _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
-            _element$querySelecto = element.querySelectorAll(':scope > .k-collapse-title'), title1 = _element$querySelecto[0], title2 = _element$querySelecto[1], title3 = _element$querySelecto[2];
+            _element$querySelecto = element.querySelectorAll(':scope > .k-collapse-item > .k-collapse-title'), title1 = _element$querySelecto[0], title2 = _element$querySelecto[1], title3 = _element$querySelecto[2];
             title2.click();
             _context.next = 6;
             return wait(500);

package/components/collapse/item.vdt.js

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

package/components/collapse/styles.d.ts

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

package/components/collapse/styles.js

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

package/components/colorpicker/styles.d.ts

@@ -1,5 +1,11 @@
 import '../../styles/global';
 import { ColorFormats } from 'tinycolor2';
-export declare function makeStyles(k: string): string;
-export declare function makePanelStyles(k: string): string;
+export declare const makeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makePanelStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
 export declare function makeAlphaBgColor({ r, g, b }: ColorFormats.RGBA, k: string): string;

package/components/colorpicker/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 = {
   get height() {
     return theme.default.height;
@@ -114,17 +115,19 @@ setDefault(function () {
   colorpicker = deepDefaults(theme, {
     colorpicker: defaults
   }).colorpicker;
+  makeStyles == null ? void 0 : makeStyles.clearCache();
+  makePanelStyles == null ? void 0 : makePanelStyles.clearCache();
 });
 var _sizes = ['large', 'small', 'mini'];
-export function makeStyles(k) {
+export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("display:inline-block;vertical-align:middle;.", k, "-colorpicker-color{height:", colorpicker.height, ";width:", colorpicker.width, ";border:", colorpicker.border, ";cursor:", colorpicker.cursor, ";border-radius:", colorpicker.borderRadius, ";background:", colorpicker.bgColor, ";padding:", colorpicker.padding, ";}.", k, "-colorpicker-inner{border-radius:", colorpicker.innerBorderRadius, ";height:100%;}", _mapInstanceProperty(_sizes).call(_sizes, function (size) {
     var styles = colorpicker[size];
     return /*#__PURE__*/css("&.", k, "-", size, "{.", k, "-colorpicker-color{height:", styles.height, ";width:", styles.width, ";", styles.padding && "padding: " + styles.padding, ";}}");
   }), "&.", k, "-disabled{.", k, "-colorpicker-color{background:", colorpicker.disabled.bgColor, ";border-color:", colorpicker.disabled.borderColor, ";cursor:", colorpicker.disabled.cursor, ";}}");
-}
-export function makePanelStyles(k) {
+});
+export var makePanelStyles = cache(function makePanelStyles(k) {
   return /*#__PURE__*/css("padding:", colorpicker.panel.padding, ";width:", colorpicker.panel.width, ";.", k, "-colorpicker-saturation{height:", colorpicker.panel.saturationHeight, ";position:relative;overflow:hidden;user-select:none;}.", k, "-colorpicker-white,.", k, "-colorpicker-black{position:absolute;width:100%;height:100%;}.", k, "-colorpicker-white{background:linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));}.", k, "-colorpicker-black{background:linear-gradient(0, #000, rgba(0, 0, 0, 0));}.", k, "-colorpicker-pointer{position:absolute;}.", k, "-colorpicker-circle{width:", colorpicker.panel.circle.width, ";height:", colorpicker.panel.circle.width, ";box-shadow:", colorpicker.panel.circle.boxShadow, ";border-radius:50%;transform:translate(-50%, -50%);}.", k, "-colorpicker-controls{display:flex;margin-top:", colorpicker.panel.gutter, ";}.", k, "-colorpicker-sliders{flex:1;.", k, "-slider{margin-bottom:", colorpicker.panel.gutter, ";}.", k, "-slider-track-wrapper,.", k, "-slider-track{height:", colorpicker.slider.height, ";}.", k, "-slider-track-wrapper{cursor:", colorpicker.slider.cursor, ";}.", k, "-slider-track{border-radius:", colorpicker.slider.borderRadius, ";margin:0 calc(", colorpicker.slider.thumb.width, " / 2 + 1px);background-color:transparent;}.", k, "-slider-bar{background:transparent;}.", k, "-slider-thumb{height:", colorpicker.slider.thumb.height, ";width:", colorpicker.slider.thumb.width, ";border:", colorpicker.slider.thumb.border, ";border-radius:", colorpicker.slider.thumb.borderRadius, ";box-shadow:", colorpicker.slider.thumb.boxShadow, ";&:focus,&:hover{transform:", colorpicker.slider.thumb.hover.transform, ";cursor:", colorpicker.slider.thumb.hover.cursor, ";background-color:", colorpicker.slider.thumb.hover.bgColor, ";}}}.", k, "-colorpicker-hue{.", k, "-slider-track-wrapper{background:linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);}}.", k, "-colorpicker-alpha{background-size:contain;}.", k, "-colorpicker-alpha-bg{background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC\");}.", k, "-colorpicker-color-wrapper{width:", colorpicker.color.width, ";height:", colorpicker.color.height, ";border-radius:", colorpicker.color.borderRadius, ";margin-left:", colorpicker.panel.gutter, ";overflow:hidden;}.", k, "-colorpicker-color{height:100%;box-shadow:", colorpicker.color.boxShadow, ";}.", k, "-colorpicker-input.", k, "-small{.", k, "-input-inner{height:", colorpicker.input.height, ";line-height:", colorpicker.input.height, ";padding:", colorpicker.input.padding, ";font-size:", colorpicker.panel.fontSize, ";}}.", k, "-colorpicker-text{text-align:center;font-size:", colorpicker.panel.fontSize, ";padding:", colorpicker.input.textPadding, ";}.", k, "-colorpicker-presets{border-top:", colorpicker.presets.delimiter, ";margin:0 -", colorpicker.panel.padding, ";overflow:hidden;}.", k, "-colorpicker-preset-color-wrapper{float:left;border-radius:", colorpicker.presets.borderRadius, ";cursor:pointer;overflow:hidden;margin:", colorpicker.panel.padding, " 0 0 ", colorpicker.panel.padding, ";}.", k, "-colorpicker-preset-color{width:", colorpicker.presets.width, ";height:", colorpicker.presets.height, ";box-shadow:", colorpicker.presets.boxShadow, ";}.", k, "-colorpicker-drag{cursor:ew-resize;user-select:none;}");
-}
+});
 export function makeAlphaBgColor(_ref, k) {
   var r = _ref.r,
       g = _ref.g,

package/components/copy/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/copy/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: "t3aops",
     styles: "cursor:pointer;vertical-align:middle"
@@ -11,4 +12,4 @@ export function makeStyles(k) {
     styles: "cursor:pointer;vertical-align:middle",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   });
-}
+});

package/components/datepicker/styles.d.ts

@@ -46,6 +46,15 @@ declare const defaults: {
 };
 declare let datepicker: typeof defaults;
 export { datepicker };
-export declare function makePanelStyles(k: string): string;
-export declare function makeCalendarStyles(k: string): string;
-export declare function makeTimeStyles(k: string): string;
+export declare const makePanelStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeCalendarStyles: {
+    (k: string): string;
+    clearCache(): {};
+};
+export declare const makeTimeStyles: {
+    (k: string): string;
+    clearCache(): {};
+};