@king-design/intact 3.0.1 → 3.1.0-beta.0

package/es/components/button/index.vdt.js

@@ -32,6 +32,10 @@ export default function ($props, $blocks, $__proto__) {
       ghost = _this$get.ghost;
 
   var checked = this.isChecked();
+  if (!this.config) debugger;
+  var _this$config = this.config,
+      cls = _this$config.cls,
+      k = _this$config.k;
 
   var isIcon = function isIcon(child) {
     return child.tag === Icon || child.className && child.className.indexOf('icon') > -1;
@@ -56,14 +60,10 @@ export default function ($props, $blocks, $__proto__) {
     });
   }
 
-  var classNameObj = (_classNameObj = {
-    'k-btn': true
-  }, _classNameObj["k-" + type] = type !== 'default', _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-btn-icon'] = icon, _classNameObj[className] = className, _classNameObj['k-circle'] = circle, _classNameObj['k-loading'] = loading, _classNameObj['k-fluid'] = fluid, _classNameObj['k-active'] = checked, _classNameObj['k-disabled'] = disabled || loading, _classNameObj['k-ghost'] = ghost, _classNameObj[makeButtonStyles({
-    iconSide: iconSide
-  })] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[cls('btn')] = true, _classNameObj[cls(type)] = type !== 'default', _classNameObj[cls(size)] = size !== 'default', _classNameObj[cls("btn-icon")] = icon, _classNameObj[className] = className, _classNameObj[cls('circle')] = circle, _classNameObj[cls('loading')] = loading, _classNameObj[cls('fluid')] = fluid, _classNameObj[cls('active')] = checked, _classNameObj[cls('disabled')] = disabled || loading, _classNameObj[cls('ghost')] = ghost, _classNameObj[makeButtonStyles(k, iconSide)] = true, _classNameObj);
 
   var loadingIcon = _$cc(Icon, {
-    'className': 'ion-load-c k-icon-loading',
+    'className': _$cn("ion-load-c " + k + "-icon-loading"),
     'size': size
     /*loadingSizeMap[size]*/
     ,
@@ -90,7 +90,7 @@ export default function ($props, $blocks, $__proto__) {
       'ev-mouseup': this.onMouseUp,
       'htmlType': htmlType,
       'name': isCheckType ? null : name,
-      'children': [loading ? iconSide === 'right' ? [children, loadingIcon] : [loadingIcon, children] : children, isCheckType ? _$ce(64, 'input', null, 1, 'k-button-input', {
+      'children': [loading ? iconSide === 'right' ? [children, loadingIcon] : [loadingIcon, children] : children, isCheckType ? _$ce(64, 'input', null, 1, _$cn(k + "-button-input"), {
         'type': checkType,
         'name': name,
         'checked': checked,

package/es/components/button/styles.d.ts

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

package/es/components/button/styles.js

@@ -232,43 +232,42 @@ setDefault(function () {
   }).button;
 });
 export { button };
-export function makeButtonStyles(_ref) {
-  var iconSide = _ref.iconSide;
+export function makeButtonStyles(k, iconSide) {
   var _button = button,
       secondary = _button.secondary,
       link = _button.link;
   return cx(
   /*#__PURE__*/
   // extract static styles to individual css method for performance
-  css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", button.transition, ";line-height:", button.lineHeight, ";.k-icon{color:inherit;}&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.k-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
+  css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", button.transition, ";line-height:", button.lineHeight, ";.", k, "-icon{color:inherit;}&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.", k, "-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
     var typeStyles = button[type];
-    return /*#__PURE__*/css("&.k-", type, "{background:", typeStyles.bgColor, ";color:", typeStyles.color, ";border-color:", typeStyles.borderColor, ";&:hover,&:focus{background:", palette(typeStyles.bgColor, -1), ";border-color:", typeStyles.hoverBorderColor, ";color:", typeStyles.color, ";}&:active{background:", palette(typeStyles.bgColor, 1), ";border-color:", palette(typeStyles.borderColor, 1), ";}}");
-  }), "&.k-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.k-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.k-none,&.k-link,&.k-flat{background:transparent;&,&:hover{border:none;}&.k-active{color:", theme.color.primary, ";}}&.k-none:hover{background:", button.none.hoverBgColor, ";}&.k-flat{background:", button.none.hoverBgColor, ";}&.k-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.k-none.k-disabled,&.k-link.k-disabled{&,&:hover{background:transparent;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    return /*#__PURE__*/css("&.", k, "-", type, "{background:", typeStyles.bgColor, ";color:", typeStyles.color, ";border-color:", typeStyles.borderColor, ";&:hover,&:focus{background:", palette(typeStyles.bgColor, -1), ";border-color:", typeStyles.hoverBorderColor, ";color:", typeStyles.color, ";}&:active{background:", palette(typeStyles.bgColor, 1), ";border-color:", palette(typeStyles.borderColor, 1), ";}}");
+  }), "&.", k, "-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.", k, "-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.", k, "-none,&.", k, "-link,&.", k, "-flat{background:transparent;&,&:hover{border:none;}&.", k, "-active{color:", theme.color.primary, ";}}&.", k, "-none:hover{background:", button.none.hoverBgColor, ";}&.", k, "-flat{background:", button.none.hoverBgColor, ";}&.", k, "-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.", k, "-none.", k, "-disabled,&.", k, "-link.", k, "-disabled{&,&:hover{background:transparent;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = button[size];
-    return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";height:", styles.height, ";padding:", styles.padding, ";&.k-btn-icon{width:", styles.height, ";}}");
-  }), "&.k-btn-icon{width:", button.height, ";padding:0;.k-icon{margin:0;}}&.k-fluid{width:100%;padding:0;}&.k-circle{border-radius:calc(", button.large.height, " / 2);}&.k-loading{", _mapInstanceProperty(types).call(types, function (type) {
+    return /*#__PURE__*/css("&.", k, "-", size, "{font-size:", styles.fontSize, ";height:", styles.height, ";padding:", styles.padding, ";&.", k, "-btn-icon{width:", styles.height, ";}}");
+  }), "&.", k, "-btn-icon{width:", button.height, ";padding:0;.", k, "-icon{margin:0;}}&.", k, "-fluid{width:100%;padding:0;}&.", k, "-circle{border-radius:calc(", button.large.height, " / 2);}&.", k, "-loading{", _mapInstanceProperty(types).call(types, function (type) {
     var styles = button[type];
-    return /*#__PURE__*/css("&.k-", type, "{&,&:hover{background:", palette(styles.bgColor, -2), ";color:", palette(styles.color, -2), ";border-color:", palette(styles.borderColor, -2), ";}}");
-  }), ";&,&:hover{background:", palette(button.bgColor, -2), ";color:", palette(button.color, -2), ";border-color:", palette(button.borderColor, -2), ";}.k-icon:not(.k-icon-loading){display:none;}}&:not(button){display:inline-flex;align-items:center;justify-content:center;}&.k-ghost{background:transparent;color:", button.ghost.color, ";border-color:", button.ghost.borderColor, ";&:hover,&:active{background:transparent;}&:hover{color:", button.ghost.hoverColor, ";border-color:", button.ghost.hoverBorderColor, ";}&:active{color:", theme.color.primary, ";border-color:", theme.color.primary, ";}", _mapInstanceProperty(types).call(types, function (type) {
+    return /*#__PURE__*/css("&.", k, "-", type, "{&,&:hover{background:", palette(styles.bgColor, -2), ";color:", palette(styles.color, -2), ";border-color:", palette(styles.borderColor, -2), ";}}");
+  }), ";&,&:hover{background:", palette(button.bgColor, -2), ";color:", palette(button.color, -2), ";border-color:", palette(button.borderColor, -2), ";}.", k, "-icon:not(.", k, "-icon-loading){display:none;}}&:not(button){display:inline-flex;align-items:center;justify-content:center;}&.", k, "-ghost{background:transparent;color:", button.ghost.color, ";border-color:", button.ghost.borderColor, ";&:hover,&:active{background:transparent;}&:hover{color:", button.ghost.hoverColor, ";border-color:", button.ghost.hoverBorderColor, ";}&:active{color:", theme.color.primary, ";border-color:", theme.color.primary, ";}", _mapInstanceProperty(types).call(types, function (type) {
     var _button$type = button[type],
         ghostColor = _button$type.ghostColor,
         borderColor = _button$type.borderColor;
-    return /*#__PURE__*/css("&.k-", type, "{color:", ghostColor, ";border-color:", borderColor, ";&:hover{color:", palette(ghostColor, -1), ";border-color:", palette(ghostColor, -1), ";}&:active{color:", palette(ghostColor, 1), ";border-color:", palette(ghostColor, 1), ";}}");
-  }), "&.k-disabled{&,&:hover{color:", button.disabled.color, ";border-color:", button.disabled.ghostBorderColor, ";background:transparent;}}}"),
+    return /*#__PURE__*/css("&.", k, "-", type, "{color:", ghostColor, ";border-color:", borderColor, ";&:hover{color:", palette(ghostColor, -1), ";border-color:", palette(ghostColor, -1), ";}&:active{color:", palette(ghostColor, 1), ";border-color:", palette(ghostColor, 1), ";}}");
+  }), "&.", k, "-disabled{&,&:hover{color:", button.disabled.color, ";border-color:", button.disabled.ghostBorderColor, ";background:transparent;}}}"),
   /*#__PURE__*/
   // dynamic styles
-  css(".k-icon{", iconSide === 'right' ? "margin-left: " + button.icon.gap + ";" : "margin-right: " + button.icon.gap + ";", ";}", !iconSide && "\n                &.k-loading {\n                    &:not(.k-btn-icon) {\n                        padding-left: calc(" + getLeft(button.padding) + " + 1em);\n                        .k-icon-loading {\n                            margin-left: -1em;\n                        }\n                        " + _mapInstanceProperty(sizes).call(sizes, function (size) {
-    return /*#__PURE__*/css("&.k-", size, "{padding-left:calc(", getLeft(button[size].padding), " + 1em);}");
-  }) + "\n                    }\n                }\n            ", ";"));
+  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() {
-  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) {
+export 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;
-    return /*#__PURE__*/css("&.k-", type, ":not(:first-child){border-left-color:", borderColor, ";}&.k-", type, ":not(:last-child){border-right-color:", borderColor, ";}");
-  }), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.k-fluid{display:flex;>.k-btn{flex:1;}}}&.k-vertical{flex-direction:column;>.k-btn{", _mapInstanceProperty(types).call(types, function (type) {
+    return /*#__PURE__*/css("&.", k, "-", type, ":not(:first-child){border-left-color:", borderColor, ";}&.", k, "-", type, ":not(:last-child){border-right-color:", borderColor, ";}");
+  }), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.", k, "-fluid{display:flex;>.", k, "-btn{flex:1;}}}&.", k, "-vertical{flex-direction:column;>.", k, "-btn{", _mapInstanceProperty(types).call(types, function (type) {
     if (type === 'active') return;
     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;}}");
+    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/es/components/card/column.d.ts

@@ -6,4 +6,5 @@ export interface CardColumnProps {
 export declare class CardColumn extends Component<CardColumnProps> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<CardColumnProps>>;
+    private config;
 }

package/es/components/card/column.js

@@ -1,6 +1,8 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Component } from 'intact';
 import template from './column.vdt';
+import { useConfigContext } from '../config';
 var typeDefs = {
   width: String,
   center: Boolean
@@ -9,7 +11,17 @@ export var CardColumn = /*#__PURE__*/function (_Component) {
   _inheritsLoose(CardColumn, _Component);
 
   function CardColumn() {
-    return _Component.apply(this, arguments) || this;
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.config = useConfigContext();
+    return _this;
   }
 
   return CardColumn;

package/es/components/card/column.vdt.js

@@ -15,6 +15,7 @@ export default function ($props, $blocks, $__proto__) {
       style = _this$get.style,
       center = _this$get.center;
 
+  var k = this.config.k;
   var _style = style;
 
   if (width) {
@@ -23,11 +24,7 @@ export default function ($props, $blocks, $__proto__) {
     });
   }
 
-  var classNameObj = (_classNameObj = {
-    'k-card-column': true,
-    'k-fluid': !width,
-    'k-center': center
-  }, _classNameObj[className] = className, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-card-column"] = true, _classNameObj[k + "-fluid"] = !width, _classNameObj[k + "-center"] = center, _classNameObj[className] = className, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj),
     'style': _style

package/es/components/card/index.d.ts

@@ -15,4 +15,5 @@ export declare class Card extends Component<CardProps, CardEvents, CardBlocks> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<CardProps>>;
     static defaults: () => Partial<CardProps>;
+    private config;
 }

package/es/components/card/index.js

@@ -1,7 +1,9 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Component, VNode } from 'intact';
 import template from './index.vdt';
 export * from './column';
+import { useConfigContext } from '../config';
 var typeDefs = {
   title: [String, VNode],
   type: ['shadow', 'border', 'none']
@@ -17,7 +19,17 @@ export var Card = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Card, _Component);
 
   function Card() {
-    return _Component.apply(this, arguments) || this;
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.config = useConfigContext();
+    return _this;
   }
 
   return Card;

package/es/components/card/index.vdt.js

@@ -18,6 +18,7 @@ export default function ($props, $blocks, $__proto__) {
       title = _this$get.title,
       type = _this$get.type;
 
+  var k = this.config.k;
   var hasHeader = $blocks.header || $blocks.title || title || $blocks.extra;
   var hasColumn = false;
 
@@ -32,14 +33,7 @@ export default function ($props, $blocks, $__proto__) {
     }
   }
 
-  var classNameObj = (_classNameObj = {
-    'k-card': true,
-    'k-shadow': type === 'shadow',
-    'k-border': type === 'border',
-    'k-none': type === 'none',
-    'k-no-header': !hasHeader,
-    'k-card-grid': hasColumn
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-card"] = true, _classNameObj[k + "-shadow"] = type === 'shadow', _classNameObj[k + "-border"] = type === 'border', _classNameObj[k + "-none"] = type === 'none', _classNameObj[k + "-no-header"] = !hasHeader, _classNameObj[k + "-card-grid"] = hasColumn, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), [hasHeader ? _$ce(2, 'div', (_$blocks['header'] = function ($super) {
@@ -53,7 +47,7 @@ export default function ($props, $blocks, $__proto__) {
       };
 
       return block ? block.call($this, callBlock, data) : callBlock();
-    }, __$blocks['title'](_$no)), 0, 'k-card-title'), $blocks.extra ? _$ce(2, 'div', (_$blocks['extra'] = function ($super) {
+    }, __$blocks['title'](_$no)), 0, _$cn(k + "-card-title")), $blocks.extra ? _$ce(2, 'div', (_$blocks['extra'] = function ($super) {
       return null;
     }, __$blocks['extra'] = function ($super, data) {
       var block = $blocks['extra'];
@@ -63,7 +57,7 @@ export default function ($props, $blocks, $__proto__) {
       };
 
       return block ? block.call($this, callBlock, data) : callBlock();
-    }, __$blocks['extra'](_$no)), 0, 'k-card-extra') : undefined];
+    }, __$blocks['extra'](_$no)), 0, _$cn(k + "-card-extra")) : undefined];
   }, __$blocks['header'] = function ($super, data) {
     var block = $blocks['header'];
 
@@ -72,6 +66,6 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['header'](_$no)), 0, 'k-card-header c-clearfix') : undefined, _$ce(2, 'div', children, 0, 'k-card-body')]);
+  }, __$blocks['header'](_$no)), 0, _$cn(k + "-card-header c-clearfix")) : undefined, _$ce(2, 'div', children, 0, _$cn(k + "-card-body"))]);
 }
 ;

package/es/components/card/styles.d.ts

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

package/es/components/card/styles.js

@@ -24,6 +24,6 @@ setDefault(function () {
     card: defaults
   }).card;
 });
-export function makeStyles() {
-  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;}}");
+export 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/es/components/carousel/index.d.ts

@@ -14,6 +14,7 @@ export declare class Carousel extends Component<CarouselProps> {
     private items;
     private slide;
     private autoplay;
+    private config;
     isActive(value: string): boolean;
     getIndex(): number;
     setIndex(index: number): void;

package/es/components/carousel/index.js

@@ -8,6 +8,7 @@ import { useItems } from './useItems';
 import { useSlide } from './useSlide';
 import { bind } from '../utils';
 import { useAutoplay } from './useAutoplay';
+import { useConfigContext } from '../config';
 export * from './item';
 var typeDefs = {
   value: String,
@@ -41,6 +42,7 @@ export var Carousel = /*#__PURE__*/function (_Component) {
     _this.items = useItems();
     _this.slide = useSlide(_this.items.getItems, _this.items.getItemsWithCloned);
     _this.autoplay = useAutoplay(_this.next);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/carousel/index.vdt.js

@@ -6,12 +6,6 @@ import { Button } from '../button';
 import { Icon } from '../icon';
 import { makeStyles } from './styles';
 import { linkEvent } from 'intact';
-var _$tmp0 = {
-  'className': 'k-icon-left'
-};
-var _$tmp1 = {
-  'className': 'k-icon-right'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -30,9 +24,8 @@ export default function ($props, $blocks, $__proto__) {
       shouldTransition = _this$slide.shouldTransition,
       elementRef = _this$slide.elementRef,
       isSlide = _this$slide.isSlide;
-  var classNameObj = (_classNameObj = {
-    'k-carousel': true
-  }, _classNameObj[className] = className, _classNameObj["k-" + arrow] = true, _classNameObj['k-stop'] = !shouldTransition.value, _classNameObj["k-" + effect] = true, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-carousel"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + arrow] = true, _classNameObj[k + "-stop"] = !shouldTransition.value, _classNameObj[k + "-" + effect] = true, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var _this$items = this.items,
       getItems = _this$items.getItems,
       getItemsWithCloned = _this$items.getItemsWithCloned;
@@ -45,7 +38,7 @@ export default function ($props, $blocks, $__proto__) {
     'ref': elementRef,
     'ev-mouseenter': stop,
     'ev-mouseleave': play
-  }), [_$ce(2, 'div', getItemsWithCloned(), 0, 'k-carousel-wrapper', {
+  }), [_$ce(2, 'div', getItemsWithCloned(), 0, _$cn(k + "-carousel-wrapper"), {
     'style': {
       transform: isSlide() ? "translate3d(" + translate.value + "px, 0, 0)" : undefined
     }
@@ -54,24 +47,27 @@ export default function ($props, $blocks, $__proto__) {
     'circle': true,
     'type': 'none',
     'size': 'large',
-    'className': 'k-carousel-btn k-prev',
+    'className': _$cn(k + "-carousel-btn " + k + "-prev"),
     'ev-click': this.prev,
-    'children': _$cc(Icon, _$tmp0)
+    'children': _$cc(Icon, {
+      'className': _$cn(k + "-icon-left")
+    })
   }), _$cc(Button, {
     'icon': true,
     'circle': true,
     'type': 'none',
     'size': 'large',
-    'className': 'k-carousel-btn k-next',
+    'className': _$cn(k + "-carousel-btn " + k + "-next"),
     'ev-click': this.next,
-    'children': _$cc(Icon, _$tmp1)
+    'children': _$cc(Icon, {
+      'className': _$cn(k + "-icon-right")
+    })
   }), _$ce(2, 'div', _$ma(getItems(), function ($value, $key) {
-    return _$ce(2, 'div', null, 1, _$cn({
-      'k-carousel-dot': true,
-      'k-active': this.isActive($value.props.value)
-    }), {
+    var _$cn2;
+
+    return _$ce(2, 'div', null, 1, _$cn((_$cn2 = {}, _$cn2[k + "-carousel-dot"] = true, _$cn2[k + "-active"] = this.isActive($value.props.value), _$cn2)), {
       'ev-click': linkEvent($key, this.setIndex)
     });
-  }, $this), 4, 'k-carousel-indicator c-clearfix')]);
+  }, $this), 4, _$cn(k + "-carousel-indicator c-clearfix"))]);
 }
 ;

package/es/components/carousel/item.d.ts

@@ -6,4 +6,5 @@ export interface CarouselItemProps {
 export declare class CarouselItem extends Component<CarouselItemProps> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<CarouselItemProps>>;
+    private config;
 }

package/es/components/carousel/item.js

@@ -1,6 +1,8 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Component } from 'intact';
 import template from './item.vdt';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: String,
   cloned: null
@@ -9,7 +11,17 @@ export var CarouselItem = /*#__PURE__*/function (_Component) {
   _inheritsLoose(CarouselItem, _Component);
 
   function CarouselItem() {
-    return _Component.apply(this, arguments) || this;
+    var _context;
+
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.config = useConfigContext();
+    return _this;
   }
 
   return CarouselItem;

package/es/components/carousel/item.vdt.js

@@ -18,9 +18,8 @@ export default function ($props, $blocks, $__proto__) {
 
   var parent = this.$senior;
   var active = parent.isActive(value);
-  var classNameObj = (_classNameObj = {
-    'k-carousel-item': true
-  }, _classNameObj[className] = className, _classNameObj['k-active'] = active, _classNameObj['k-cloned'] = cloned, _classNameObj[makeItemStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-carousel-item"] = true, _classNameObj[className] = className, _classNameObj[k + "-active"] = active, _classNameObj[k + "-cloned"] = cloned, _classNameObj[makeItemStyles(k)] = true, _classNameObj);
   var isSlide = parent.get('effect') === 'slide';
   return _$cc(Transition, {
     'show': active || isSlide,

package/es/components/carousel/styles.d.ts

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

package/es/components/carousel/styles.js

@@ -39,9 +39,9 @@ setDefault(function () {
     carousel: defaults
   }).carousel;
 });
-export function makeStyles() {
-  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 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() {
-  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;}");
+export 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/es/components/cascader/index.vdt.js

@@ -1,21 +1,11 @@
 import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/values";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
-import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn, superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, map as _$ma } from 'intact';
+import { createUnknownComponentVNode as _$cc, className as _$cn, createElementVNode as _$ce, superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, map as _$ma } from 'intact';
 import { Dropdown, DropdownMenu, DropdownItem } from '../dropdown';
 import { Icon } from '../icon';
 import { _$ } from '../../i18n';
 import { makeMenuStyles, makeFilterMenuStyles } from './styles';
-var _$tmp0 = {
-  'className': 'ion-load-c k-cascader-loading',
-  'rotate': true
-};
-var _$tmp1 = {
-  'className': 'k-cascader-arrow k-icon-right'
-};
-var _$tmp2 = {
-  'className': 'k-cascader'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -30,10 +20,8 @@ export default function ($props, $blocks, $__proto__) {
       filterable = _this$get.filterable,
       fields = _this$get.fields;
 
-  var baseMenuStyles = makeMenuStyles();
-  var classNameObj = (_classNameObj = {
-    'k-cascader-menu': true
-  }, _classNameObj[baseMenuStyles] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-cascader-menu"] = true, _classNameObj[makeMenuStyles(k)] = true, _classNameObj);
   var getField = this.fields;
 
   var _this$value = this.value,
@@ -46,9 +34,12 @@ export default function ($props, $blocks, $__proto__) {
   var Options = function Options(data, level, loaded, parentSelected) {
     if (!data.length) {
       if (!loaded) {
-        return _$cc(Icon, _$tmp0);
+        return _$cc(Icon, {
+          'className': _$cn("ion-load-c " + k + "-cascader-loading"),
+          'rotate': true
+        });
       } else {
-        return _$ce(2, 'div', _$('无数据'), 0, 'k-cascader-empty');
+        return _$ce(2, 'div', _$('无数据'), 0, _$cn(k + "-cascader-empty"));
       }
     }
 
@@ -59,15 +50,15 @@ export default function ($props, $blocks, $__proto__) {
       var children = getField(item, 'children');
 
       var Item = function Item() {
+        var _$cn2;
+
         return _$cc(DropdownItem, {
           'disabled': getField(item, 'disabled'),
-          'className': _$cn({
-            'k-cascader-option': true,
-            'k-active': showed,
-            'k-selected': selected
-          }),
+          'className': _$cn((_$cn2 = {}, _$cn2[k + "-cascader-option"] = true, _$cn2[k + "-active"] = showed, _$cn2[k + "-selected"] = selected, _$cn2)),
           'ev-select': onSelect.bind(null, value, level),
-          'children': [getField(item, 'label'), children ? _$cc(Icon, _$tmp1) : undefined]
+          'children': [getField(item, 'label'), children ? _$cc(Icon, {
+            'className': _$cn(k + "-cascader-arrow " + k + "-icon-right")
+          }) : undefined]
         });
       };
 
@@ -92,12 +83,14 @@ export default function ($props, $blocks, $__proto__) {
       keywords = _this$filterable.keywords.value,
       selectByFilter = _this$filterable.selectByFilter;
 
-  return _$su.call($this, _$tmp2, function ($blocks) {
+  return _$su.call($this, {
+    'className': _$cn(k + "-cascader")
+  }, function ($blocks) {
     var _$blocks = {},
         __$blocks = _$ex({}, $blocks);
 
     return (_$blocks['base-menu'] = function ($super) {
-      var _$cn2;
+      var _$cn3;
 
       return !filterable || !keywords ? _$cc(DropdownMenu, {
         'className': _$cn(classNameObj),
@@ -105,12 +98,10 @@ export default function ($props, $blocks, $__proto__) {
         'children': Options(data, 0, true, true)
       }, 'common') : _$cc(DropdownMenu, {
         'key': 'filter',
-        'className': _$cn((_$cn2 = {
-          'k-cascader-filter': true
-        }, _$cn2[baseMenuStyles] = true, _$cn2[makeFilterMenuStyles()] = true, _$cn2)),
+        'className': _$cn((_$cn3 = {}, _$cn3[k + "-cascader-filter"] = true, _$cn3[baseMenuStyles] = true, _$cn3[makeFilterMenuStyles(k)] = true, _$cn3)),
         'children': function () {
           var items = filter();
-          if (!items.length) return _$ce(2, 'div', _$('无匹配数据'), 0, 'k-cascader-empty');
+          if (!items.length) return _$ce(2, 'div', _$('无匹配数据'), 0, _$cn(k + "-cascader-empty"));
           return _$ma(items, function ($value, $key) {
             return _$cc(DropdownItem, {
               'ev-select': selectByFilter.bind(null, $value),

package/es/components/cascader/styles.d.ts

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

package/es/components/cascader/styles.js

@@ -42,9 +42,9 @@ setDefault(function () {
     cascader: defaults
   }).cascader;
 });
-export function makeMenuStyles() {
-  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 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() {
+export 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/es/components/checkbox/index.d.ts

@@ -17,6 +17,7 @@ export declare class Checkbox<V = boolean> extends Component<CheckboxProps<V>, C
     static defaults: () => Partial<CheckboxProps<boolean>>;
     static events: Events<CheckboxEvents<boolean>>;
     private inputRef;
+    private config;
     private isChecked;
     private setCheckboxModel;
     private onClick;

package/es/components/checkbox/index.js

@@ -7,6 +7,7 @@ import { Component, createRef } from 'intact';
 import template from './index.vdt';
 import { bind } from '../utils';
 import { isArray } from 'intact-shared';
+import { useConfigContext } from '../config';
 var typeDefs = {
   disabled: Boolean,
   value: null,
@@ -40,6 +41,7 @@ export var Checkbox = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.inputRef = createRef();
+    _this.config = useConfigContext();
     return _this;
   }