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

package/components/affix/index.d.ts

@@ -26,4 +26,5 @@ export declare class Affix extends Component<AffixProps, AffixEvents> {
     static typeDefs: Required<TypeDefs<AffixProps>>;
     private elementRef;
     private style;
+    private config;
 }

package/components/affix/index.js

@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component, createRef } from 'intact-vue-next';
 import template from './index.vdt';
 import { useStyle } from './useStyle';
+import { useConfigContext } from '../config';
 var typeDefs = {
   top: Number,
   bottom: Number,
@@ -24,6 +25,7 @@ export var Affix = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.elementRef = createRef();
     _this.style = useStyle(_this.elementRef);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/affix/index.vdt.js

@@ -17,16 +17,16 @@ export default function ($props, $blocks, $__proto__) {
   var _this$style = this.style,
       _style = _this$style.style,
       containerStyle = _this$style.containerStyle;
-  var classNameObj = (_classNameObj = {
-    'k-affix': true,
-    'k-fixed': _style.value
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var _this$config = this.config,
+      cls = _this$config.cls,
+      k = _this$config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-affix"] = true, _classNameObj[k + "-fixed"] = _style.value, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this), {
     'style': addStyle(style, containerStyle.value),
     'ref': this.elementRef
-  }), _$ce(2, 'div', children, 0, 'k-affix-wrapper', {
+  }), _$ce(2, 'div', children, 0, _$cn(cls('affix-wrapper')), {
     'style': _style.value
   }));
 }

package/components/affix/styles.d.ts

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

package/components/affix/styles.js

@@ -11,6 +11,6 @@ setDefault(function () {
     affix: defaults
   }).affix;
 });
-export function makeStyles() {
+export function makeStyles(k) {
   return /*#__PURE__*/css("position:relative;z-index:", affix.zIndex, ";");
 }

package/components/badge/index.d.ts

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

package/components/badge/index.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-vue-next';
 import template from './index.vdt';
+import { useConfigContext } from '../config';
 var typeDefs = {
   text: [String, Number],
   max: Number,
@@ -10,7 +12,17 @@ export var Badge = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Badge, _Component);
 
   function Badge() {
-    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 Badge;

package/components/badge/index.vdt.js

@@ -20,11 +20,12 @@ export default function ($props, $blocks, $__proto__) {
     text = max + "+";
   }
 
-  var classNameObj = (_classNameObj = {
-    'k-badge': true
-  }, _classNameObj[className] = className, _classNameObj['k-has-text'] = text != null, _classNameObj['k-alone'] = !children, _classNameObj[makeStyles()] = true, _classNameObj);
+  var _this$config = this.config,
+      cls = _this$config.cls,
+      k = _this$config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-badge"] = true, _classNameObj[className] = className, _classNameObj[k + "-has-text"] = text != null, _classNameObj[k + "-alone"] = !children, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj)
-  }), [children, !disabled ? _$ce(2, 'sup', text, 0, 'k-badge-text') : undefined]);
+  }), [children, !disabled ? _$ce(2, 'sup', text, 0, _$cn(k + "-badge-text")) : undefined]);
 }
 ;

package/components/badge/styles.d.ts

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

package/components/badge/styles.js

@@ -21,6 +21,6 @@ setDefault(function () {
     badge: defaults
   }).badge;
 });
-export default function makeStyles() {
-  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;}");
+export default 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.d.ts

@@ -12,4 +12,5 @@ export declare class Breadcrumb extends Component<BreadcrumbProps, BreadcrumbEve
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<BreadcrumbProps>>;
     static defaults: () => Partial<BreadcrumbProps>;
+    private config;
 }

package/components/breadcrumb/index.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-vue-next';
 import template from './index.vdt';
+import { useConfigContext } from '../config';
 export * from './item';
 var typeDefs = {
   separator: String
@@ -16,7 +18,17 @@ export var Breadcrumb = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Breadcrumb, _Component);
 
   function Breadcrumb() {
-    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 Breadcrumb;

package/components/breadcrumb/index.vdt.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
-import { createElementVNode as _$ce, noop as _$no, createVNode as _$cv, className as _$cn } from 'intact-vue-next';
+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';
@@ -18,9 +18,8 @@ export default function ($props, $blocks, $__proto__) {
       separator = _this$get.separator,
       className = _this$get.className;
 
-  var classNameObj = (_classNameObj = {
-    'k-breadcrumb': true
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-breadcrumb"] = true, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
 
   var separatorVNode = _$ce(2, 'span', (_$blocks['separator'] = function ($super) {
     return separator;
@@ -32,7 +31,7 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['separator'](_$no)), 0, 'k-breadcrumb-separator');
+  }, __$blocks['separator'](_$no)), 0, _$cn(k + "-breadcrumb-separator"));
 
   var vNodes = [];
   var lastIndex = -1;

package/components/breadcrumb/item.d.ts

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

package/components/breadcrumb/item.js

@@ -5,6 +5,7 @@ import { Component } from 'intact-vue-next';
 import { bind } from '../utils';
 import template from './item.vdt';
 import { useRouter, navigate } from '../../hooks/useRouter';
+import { useConfigContext } from '../config';
 var typeDefs = {
   to: [String, Object]
 };
@@ -22,6 +23,7 @@ export var BreadcrumbItem = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.router = useRouter();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/breadcrumb/item.vdt.js

@@ -13,13 +13,12 @@ export default function ($props, $blocks, $__proto__) {
       children = _this$get.children,
       className = _this$get.className;
 
-  var classNameObj = (_classNameObj = {
-    'k-breadcrumb-item': true
-  }, _classNameObj[className] = className, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-breadcrumb-item"] = true, _classNameObj[className] = className, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
-  }, getRestProps(this)), to ? _$ce(2, 'a', children, 0, 'k-breadcrumb-link', {
+  }, getRestProps(this)), to ? _$ce(2, 'a', children, 0, _$cn(k + "-breadcrumb-link"), {
     'ev-click': this.onClick
-  }) : _$ce(2, 'span', children, 0, 'k-breadcrumb-link'));
+  }) : _$ce(2, 'span', children, 0, _$cn(k + "-breadcrumb-link")));
 }
 ;

package/components/breadcrumb/styles.d.ts

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

package/components/breadcrumb/styles.js

@@ -23,6 +23,6 @@ setDefault(function () {
     breadcrumb: defaults
   }).breadcrumb;
 });
-export default function makeStyles() {
-  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, ";}");
+export default 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/group.d.ts

@@ -10,6 +10,7 @@ export declare class ButtonGroup extends Component<ButtonGroupProps> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<ButtonGroupProps>>;
     static defaults: () => Partial<ButtonGroupProps>;
+    private config;
     init(): void;
     setValue(v: any): void;
 }

package/components/button/group.js

@@ -1,8 +1,10 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Component, provide } from 'intact-vue-next';
 import template from './group.vdt';
 import { toggleArray } from '../utils';
 import { BUTTON_GROUP } from './constants';
+import { useConfigContext } from '../config';
 var typeDefs = {
   vertical: Boolean,
   value: null,
@@ -21,7 +23,17 @@ export var ButtonGroup = /*#__PURE__*/function (_Component) {
   _inheritsLoose(ButtonGroup, _Component);
 
   function ButtonGroup() {
-    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;
   }
 
   var _proto = ButtonGroup.prototype;

package/components/button/group.vdt.js

@@ -16,12 +16,8 @@ export default function ($props, $blocks, $__proto__) {
       fluid = _this$get.fluid,
       seperate = _this$get.seperate;
 
-  var classNameObj = (_classNameObj = {
-    'k-btns': true,
-    'k-vertical': vertical,
-    'k-fluid': fluid,
-    'k-seperate': seperate
-  }, _classNameObj[className] = className, _classNameObj[makeButtonGroupStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-btns"] = true, _classNameObj[k + "-vertical"] = vertical, _classNameObj[k + "-fluid"] = fluid, _classNameObj[k + "-seperate"] = seperate, _classNameObj[className] = className, _classNameObj[makeButtonGroupStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), children);

package/components/button/index.d.ts

@@ -38,6 +38,7 @@ export declare class Button extends Component<ButtonProps, ButtonEvents> {
     static defaults: () => Partial<ButtonProps>;
     private buttonGroup;
     private elementRef;
+    private config;
     showLoading(): void;
     hideLoading(): void;
     disable(): void;

package/components/button/index.js

@@ -5,6 +5,7 @@ import { Component, inject, createRef } from 'intact-vue-next';
 import template from './index.vdt';
 import { bind } from '../utils';
 import { BUTTON_GROUP } from './constants';
+import { useConfigContext } from '../config';
 export * from './group';
 var typeDefs = {
   type: ['default', 'primary', 'warning', 'danger', 'success', 'none', 'secondary', 'link', 'flat'],
@@ -47,6 +48,7 @@ export var Button = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.buttonGroup = inject(BUTTON_GROUP, null);
     _this.elementRef = createRef();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/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/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/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/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/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-vue-next';
 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/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/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/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-vue-next';
 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/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/components/card/styles.d.ts

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