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

package/es/components/message/message.vdt.js

@@ -4,12 +4,8 @@ import { Button } from '../button';
 import { Icon } from '../icon';
 import { getRestProps } from '../utils';
 import { makeMessageStyles } from './styles';
-var _$tmp0 = {
-  'className': 'k-icon-close',
-  'hoverable': true
-};
 export default function ($props, $blocks, $__proto__) {
-  var _classNameObj, _$cn2;
+  var _classNameObj, _$cn2, _$cn3;
 
   $blocks || ($blocks = {});
   $props || ($props = {});
@@ -22,9 +18,8 @@ export default function ($props, $blocks, $__proto__) {
       closable = _this$get.closable,
       hideIcon = _this$get.hideIcon;
 
-  var classNameObj = (_classNameObj = {
-    "k-message": true
-  }, _classNameObj["k-" + type] = type, _classNameObj[makeMessageStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-message"] = true, _classNameObj[k + "-" + type] = type, _classNameObj[makeMessageStyles(k)] = true, _classNameObj);
   var iconMap = {
     info: 'information-fill',
     warning: 'warning-fill',
@@ -36,18 +31,18 @@ export default function ($props, $blocks, $__proto__) {
     'ev-mouseenter': this.delayClose.onMouseEnter,
     'ev-mouseleave': this.delayClose.onMouseLeave
   }), _$ce(2, 'div', [_$ce(2, 'div', [!hideIcon ? _$cc(Icon, {
-    'className': _$cn((_$cn2 = {}, _$cn2["k-icon-" + (iconMap[type] || iconMap.info)] = true, _$cn2["k-message-icon"] = true, _$cn2))
-  }) : undefined, typeof content === 'string' || typeof content === 'number' ? _$ce(2, 'div', null, 1, 'k-message-content', {
+    'className': _$cn((_$cn2 = {}, _$cn2[k + "-icon-" + (iconMap[type] || iconMap.info)] = true, _$cn2[k + "-message-icon"] = true, _$cn2))
+  }) : undefined, typeof content === 'string' || typeof content === 'number' ? _$ce(2, 'div', null, 1, _$cn(k + "-message-content"), {
     'innerHTML': content
-  }) : _$ce(2, 'div', children, 0, 'k-message-content')], 0, _$cn({
-    "k-message-wrapper": true,
-    "k-with-icon": !hideIcon
-  })), closable ? _$cc(Button, {
+  }) : _$ce(2, 'div', children, 0, _$cn(k + "-message-content"))], 0, _$cn((_$cn3 = {}, _$cn3[k + "-message-wrapper"] = true, _$cn3[k + "-with-icon"] = !hideIcon, _$cn3))), closable ? _$cc(Button, {
     'type': 'none',
     'icon': true,
-    'className': 'k-message-close',
+    'className': _$cn(k + "-message-close"),
     'ev-click': this.close,
-    'children': _$cc(Icon, _$tmp0)
-  }) : undefined], 0, 'k-message-container'));
+    'children': _$cc(Icon, {
+      'className': _$cn(k + "-icon-close"),
+      'hoverable': true
+    })
+  }) : undefined], 0, _$cn(k + "-message-container")));
 }
 ;

package/es/components/message/messages.d.ts

@@ -3,6 +3,7 @@ import type { Message } from './message';
 export declare class Messages extends Component {
     static template: string | import("intact").Template<any>;
     private messages;
+    private config;
     notice(message: VNodeComponentClass<Message>): void;
     delete(key: number | string): void;
 }

package/es/components/message/messages.js

@@ -4,6 +4,7 @@ import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js/instance/
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
 import { Component } from 'intact';
 import template from './messages.vdt';
+import { useConfigContext } from '../config';
 export var Messages = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Messages, _Component);
 
@@ -18,6 +19,7 @@ export var Messages = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.messages = [];
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/message/messages.vdt.js

@@ -7,12 +7,11 @@ export default function ($props, $blocks, $__proto__) {
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
+  var k = this.config.k;
   return _$ce(2, 'div', _$cc(TransitionGroup, {
     'children': _$ma(this.messages, function ($value, $key) {
       return $value;
     }, $this)
-  }), 2, _$cn((_$cn2 = {
-    "k-messages": true
-  }, _$cn2[makeMessagesStyles()] = true, _$cn2)));
+  }), 2, _$cn((_$cn2 = {}, _$cn2[k + "-messages"] = true, _$cn2[makeMessagesStyles(k)] = true, _$cn2)));
 }
 ;

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

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

package/es/components/message/styles.js

@@ -51,14 +51,14 @@ setDefault(function () {
     message: defaults
   }).message;
 });
-export function makeMessagesStyles() {
+export function makeMessagesStyles(k) {
   return /*#__PURE__*/css("position:fixed;top:", message.top, ";left:", message.left, ";width:100%;pointer-events:none;z-index:", theme.maxZIndex + 1, ";");
 }
-export function makeMessageStyles() {
+export function makeMessageStyles(k) {
   var _context;
 
-  return /*#__PURE__*/css("text-align:center;width:100%;font-size:", message.fontSize, ";color:", message.color, ";.k-message-container{display:inline-block;box-shadow:", message.boxShadow, ";border-radius:", message.borderRadius, ";margin-bottom:", message.gap, ";pointer-events:all;min-width:", message.minWidth, ";max-width:", message.maxWidth, ";position:relative;text-align:", message.textAlign, ";min-height:", message.minHeight, ";}.k-message-wrapper{position:relative;display:inline-block;&.k-with-icon{padding-left:calc(", message.icon.left, " + 14px);}}.k-message-content{display:inline-block;padding:", message.padding, ";vertical-align:middle;word-break:break-word;word-wrap:break-word;}.k-message-close{vertical-align:middle;position:absolute;right:0;top:0;&:hover{background:none;}}.k-message-icon{position:absolute;left:", message.icon.left, ";top:", message.icon.top, ";font-size:", message.icon.fontSize, ";}", _mapInstanceProperty(_context = ['info', 'error', 'success', 'warning']).call(_context, function (type) {
+  return /*#__PURE__*/css("text-align:center;width:100%;font-size:", message.fontSize, ";color:", message.color, ";.", k, "-message-container{display:inline-block;box-shadow:", message.boxShadow, ";border-radius:", message.borderRadius, ";margin-bottom:", message.gap, ";pointer-events:all;min-width:", message.minWidth, ";max-width:", message.maxWidth, ";position:relative;text-align:", message.textAlign, ";min-height:", message.minHeight, ";}.", k, "-message-wrapper{position:relative;display:inline-block;&.", k, "-with-icon{padding-left:calc(", message.icon.left, " + 14px);}}.", k, "-message-content{display:inline-block;padding:", message.padding, ";vertical-align:middle;word-break:bre.", k, "-word;word-wrap:bre.", k, "-word;}.", k, "-message-close{vertical-align:middle;position:absolute;right:0;top:0;&:hover{background:none;}}.", k, "-message-icon{position:absolute;left:", message.icon.left, ";top:", message.icon.top, ";font-size:", message.icon.fontSize, ";}", _mapInstanceProperty(_context = ['info', 'error', 'success', 'warning']).call(_context, function (type) {
     var color = theme.color[type === 'error' ? 'danger' : type];
-    return /*#__PURE__*/css("&.k-", type, "{.k-message-container{background:", palette(color, -4), ";}.k-message-icon{color:", color, ";}}");
+    return /*#__PURE__*/css("&.", k, "-", type, "{.", k, "-message-container{background:", palette(color, -4), ";}.", k, "-message-icon{color:", color, ";}}");
   }), "&.transition-enter-from,&.transition-leave-to{opacity:0;transform:", message.transform, ";}&.transition-enter-active,&.transition-leave-active{transition:transform ", message.transition, ",opacity ", message.transition, ";}&.transition-move{transition:transform ", message.transition, ";}");
 }

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

@@ -29,6 +29,7 @@ export declare class Pagination extends Component<PaginationProps, PaginationEve
     static defaults: () => Partial<PaginationProps>;
     static events: Events<PaginationEvents>;
     private ignore;
+    private config;
     init(): void;
     changePage(page: number): void;
     private prev;

package/es/components/pagination/index.js

@@ -5,6 +5,7 @@ import { Component } from 'intact';
 import template from './index.vdt';
 import { sizes } from '../../styles/utils';
 import { bind } from '../utils';
+import { useConfigContext } from '../config';
 var typeDefs = {
   size: sizes,
   counts: [Number, String],
@@ -51,6 +52,7 @@ export var Pagination = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.ignore = false;
+    _this.config = useConfigContext();
     return _this;
   }
 

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _flatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/flat";
-import { createCommentVNode as _$ccv, createUnknownComponentVNode as _$cc, createElementVNode as _$ce, createTextVNode as _$ct, createVNode as _$cv, className as _$cn, map as _$ma } from 'intact';
+import { createCommentVNode as _$ccv, createUnknownComponentVNode as _$cc, className as _$cn, createElementVNode as _$ce, createTextVNode as _$ct, createVNode as _$cv, map as _$ma } from 'intact';
 import { getRestProps, mapChildren } from '../utils';
 import { ButtonGroup, Button } from '../button';
 import { Select, Option } from '../select';
@@ -8,12 +8,6 @@ import { Input } from '../input';
 import { Icon } from '../icon';
 import { _$ } from '../../i18n';
 import { makeStyles } from './styles';
-var _$tmp0 = {
-  'className': 'k-icon-left'
-};
-var _$tmp1 = {
-  'className': 'k-icon-right'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -38,9 +32,8 @@ export default function ($props, $blocks, $__proto__) {
       disablePage = _this$get.disablePage;
 
   if (!total) return _$ccv(' pagination ');
-  var classNameObj = (_classNameObj = {
-    'k-pagination': true
-  }, _classNameObj[className] = className, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-flat'] = flat, _classNameObj['k-simple'] = simple, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-pagination"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[k + "-flat"] = flat, _classNameObj[k + "-simple"] = simple, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var type = flat ? 'flat' : simple ? 'none' : 'default';
   var totalPages = Math.ceil(total / limit) || 0;
 
@@ -72,7 +65,7 @@ export default function ($props, $blocks, $__proto__) {
       'type': type,
       'size': size,
       'icon': true,
-      'className': 'k-pagination-ellipsis',
+      'className': _$cn(k + "-pagination-ellipsis"),
       'ev-click': callback,
       'children': '...'
     });
@@ -131,14 +124,14 @@ export default function ($props, $blocks, $__proto__) {
       'autoWidth': true,
       'value': value,
       'ev-change': this.goto
-    }), _$ce(2, 'span', [_$ct(' / '), totalPages], 0, 'k-pagination-text')];
+    }), _$ce(2, 'span', [_$ct(' / '), totalPages], 0, _$cn(k + "-pagination-text"))];
   }
 
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), [showTotal && !simple ? _$ce(2, 'div', _$('共 {n} 条', {
     n: total
-  }), 0, 'k-pagination-total') : undefined, _$cc(ButtonGroup, {
+  }), 0, _$cn(k + "-pagination-total")) : undefined, _$cc(ButtonGroup, {
     'checkType': 'radio',
     'children': [_$cc(Button, {
       'icon': true,
@@ -146,14 +139,18 @@ export default function ($props, $blocks, $__proto__) {
       'type': 'none',
       'disabled': value <= 1 || !!(disablePage && disablePage(value - 1, limit)),
       'ev-click': this.prev,
-      'children': _$cc(Icon, _$tmp0)
+      'children': _$cc(Icon, {
+        'className': _$cn(k + "-icon-left")
+      })
     }), paginationItems, _$cc(Button, {
       'icon': true,
       'size': size,
       'type': 'none',
       'disabled': value >= totalPages || !!(disablePage && disablePage(value + 1, limit)),
       'ev-click': this.next,
-      'children': _$cc(Icon, _$tmp1)
+      'children': _$cc(Icon, {
+        'className': _$cn(k + "-icon-right")
+      })
     })],
     'ev-$model:value': function ev$modelValue($v) {
       $this.set('value', $v);
@@ -174,11 +171,11 @@ export default function ($props, $blocks, $__proto__) {
       $this.set('limit', $v);
     },
     'value': $this.get('limit')
-  }), 2, 'k-pagination-limits') : undefined, showGoto ? _$ce(2, 'div', [_$ce(2, 'span', _$('前往'), 0, 'c-middle'), _$cc(Input, {
+  }), 2, _$cn(k + "-pagination-limits")) : undefined, showGoto ? _$ce(2, 'div', [_$ce(2, 'span', _$('前往'), 0, 'c-middle'), _$cc(Input, {
     'size': size,
     'value': value,
     'ev-change': this.goto,
     'flat': flat
-  }), _$ce(2, 'span', _$('页'), 0, 'c-middle')], 4, 'k-pagination-goto') : undefined] : undefined]);
+  }), _$ce(2, 'span', _$('页'), 0, 'c-middle')], 4, _$cn(k + "-pagination-goto")) : undefined] : undefined]);
 }
 ;

package/es/components/pagination/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/pagination/styles.js

@@ -60,10 +60,10 @@ setDefault(function () {
     pagination: defaults
   }).pagination;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", pagination.fontSize, ";>*{display:inline-block;vertical-align:middle;&:not(:first-child){margin-left:", pagination.gap, ";}}.k-pagination-ellipsis{background-color:transparent;border-color:transparent;}.k-btns{.k-btn{width:auto!important;min-width:", button.height, ";padding:", pagination.btn.padding, ";margin-right:", pagination.btn.gap, ";border-radius:", pagination.btn.borderRadius, "!important;&:last-of-type{margin:0!important;}}.k-icon{font-size:18px;}}.k-pagination-goto{.k-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}.k-input-inner{text-align:center;}}.k-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+export function makeStyles(k) {
+  return /*#__PURE__*/css("font-size:", pagination.fontSize, ";>*{display:inline-block;vertical-align:middle;&:not(:first-child){margin-left:", pagination.gap, ";}}.", k, "-pagination-ellipsis{background-color:transparent;border-color:transparent;}.", k, "-btns{.", k, "-btn{width:auto!important;min-width:", button.height, ";padding:", pagination.btn.padding, ";margin-right:", pagination.btn.gap, ";border-radius:", pagination.btn.borderRadius, "!important;&:last-of-type{margin:0!important;}}.", k, "-icon{font-size:18px;}}.", k, "-pagination-goto{.", k, "-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}.", k, "-input-inner{text-align:center;}}.", k, "-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = pagination[size];
     var btnStyles = button[size];
-    return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";.k-btn{margin-right:", styles.btnGap, ";min-width:", btnStyles.height, ";.k-icon{font-size:", styles.iconFontSize, ";}}}");
-  }), "&.k-flat{.k-select{&,&:hover,&.k-show{border-color:transparent;}}}&.k-simple{.k-btn{margin:0;}.k-input-inner{text-align:center;}.k-pagination-text{vertical-align:middle;}}");
+    return /*#__PURE__*/css("&.", k, "-", size, "{font-size:", styles.fontSize, ";.", k, "-btn{margin-right:", styles.btnGap, ";min-width:", btnStyles.height, ";.", k, "-icon{font-size:", styles.iconFontSize, ";}}}");
+  }), "&.", k, "-flat{.", k, "-select{&,&:hover,&.", k, "-show{border-color:transparent;}}}&.", k, "-simple{.", k, "-btn{margin:0;}.", k, "-input-inner{text-align:center;}.", k, "-pagination-text{vertical-align:middle;}}");
 }

package/es/components/popover/content.vdt.js

@@ -15,13 +15,14 @@ export default function ($props, $blocks, $__proto__) {
       title = _this$get.title,
       content = _this$get.content;
 
+  var k = this.config.k;
   var iconMap = {
     info: 'information-fill',
     warning: 'warning-fill',
     success: 'success-fill',
     error: 'error-fill'
   };
-  var classNameObj = (_classNameObj = {}, _classNameObj[makeStyles()] = true, _classNameObj['k-popover'] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[makeStyles(k)] = true, _classNameObj[k + "-popover"] = true, _classNameObj);
   return _$su.call($this, {
     'className': _$cn(classNameObj)
   }, function ($blocks) {
@@ -30,7 +31,7 @@ export default function ($props, $blocks, $__proto__) {
 
     return (_$blocks['body'] = function ($super) {
       return [title || $blocks.title ? _$ce(2, 'div', [type ? _$cc(Icon, {
-        'className': _$cn("k-icon-" + iconMap[type] + " k-popover-icon"),
+        'className': _$cn(k + "-icon-" + iconMap[type] + " " + k + "-popover-icon"),
         'color': type === 'error' ? 'danger' : type,
         'size': 'large'
       }) : undefined, (_$blocks['title'] = function ($super) {
@@ -43,7 +44,7 @@ export default function ($props, $blocks, $__proto__) {
         };
 
         return block ? block.call($this, callBlock, data) : callBlock();
-      }, __$blocks['title'](_$no))], 0, 'k-popover-title') : undefined, content || $blocks.content ? _$ce(2, 'div', (_$blocks['content'] = function ($super) {
+      }, __$blocks['title'](_$no))], 0, _$cn(k + "-popover-title")) : undefined, content || $blocks.content ? _$ce(2, 'div', (_$blocks['content'] = function ($super) {
         return content;
       }, __$blocks['content'] = function ($super, data) {
         var block = $blocks['content'];
@@ -53,7 +54,7 @@ export default function ($props, $blocks, $__proto__) {
         };
 
         return block ? block.call($this, callBlock, data) : callBlock();
-      }, __$blocks['content'](_$no)), 0, 'k-popover-content') : undefined];
+      }, __$blocks['content'](_$no)), 0, _$cn(k + "-popover-content")) : undefined];
     }, __$blocks['body'] = function ($super, data) {
       var block = $blocks['body'];
 

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

@@ -1 +1 @@
-export default function makeStyles(): string;
+export default function makeStyles(k: string): string;

package/es/components/popover/styles.js

@@ -17,6 +17,6 @@ setDefault(function () {
     popover: defaults
   }).popover;
 });
-export default function makeStyles() {
-  return /*#__PURE__*/css("&.k-tooltip-content.k-popover{width:", popover.width, ";padding:", popover.padding, ";.k-popover-title{display:flex;align-items:center;font-size:", popover.title.fontSize, ";line-height:", popover.title.lineHeight, ";font-weight:", popover.title.fontWeight, ";}.k-popover-icon{margin-right:", popover.gap, ";}.k-popover-content{margin-top:", popover.gap, ";}.k-tooltip-footer{text-align:right;}}");
+export default function makeStyles(k) {
+  return /*#__PURE__*/css("&.", k, "-tooltip-content.", k, "-popover{width:", popover.width, ";padding:", popover.padding, ";.", k, "-popover-title{display:flex;align-items:center;font-size:", popover.title.fontSize, ";line-height:", popover.title.lineHeight, ";font-weight:", popover.title.fontWeight, ";}.", k, "-popover-icon{margin-right:", popover.gap, ";}.", k, "-popover-content{margin-top:", popover.gap, ";}.", k, "-tooltip-footer{text-align:right;}}");
 }

package/es/components/portal.d.ts

@@ -11,6 +11,7 @@ export declare class Portal<T extends PortalProps = PortalProps> extends Compone
     mountedQueue?: Function[];
     mountedDone?: boolean;
     $isPortal: boolean;
+    private config;
     $render(lastVNode: VNodeComponentClass<this> | null, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[] & {
         priority?: Function[];
     }): void;

package/es/components/portal.js

@@ -4,6 +4,7 @@ import { Component, createCommentVNode, createTextVNode, mount, patch, remove, i
 import { isString } from 'intact-shared';
 import { DIALOG } from './dialog/constants';
 import { BaseDialog } from './dialog/base';
+import { useConfigContext } from './config';
 var typeDefs = {
   container: [String, Function]
 };
@@ -25,6 +26,7 @@ export var Portal = /*#__PURE__*/function (_Component) {
     _this.mountedQueue = void 0;
     _this.mountedDone = void 0;
     _this.$isPortal = true;
+    _this.config = useConfigContext();
     return _this;
   }
 
@@ -115,7 +117,7 @@ export var Portal = /*#__PURE__*/function (_Component) {
         this.container = document.body;
       } else {
         // find the closest dialog if exists
-        this.container = parentDom.closest('.k-dialog') || document.body;
+        this.container = parentDom.closest(this.config.k + "-dialog") || document.body;
       }
       /**
        * @FIXME: We cannot get parent ref from sub component in Vue

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

@@ -23,6 +23,7 @@ export declare class Progress extends Component<ProgressProps> {
     static defaults: () => Partial<ProgressProps>;
     status: import("../../hooks/useState").State<Status>;
     color: import("../../hooks/useState").State<string | Color[] | ((percent: number) => string) | undefined>;
+    private config;
     init(): void;
 }
 export {};

package/es/components/progress/index.js

@@ -4,6 +4,7 @@ import { Component } from 'intact';
 import template from './index.vdt';
 import { useStatus } from './useStatus';
 import { useColor } from './useColor';
+import { useConfigContext } from '../config';
 ;
 var typeDefs = {
   type: ['bar', 'circle'],
@@ -42,6 +43,7 @@ export var Progress = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.status = useStatus();
     _this.color = useColor();
+    _this.config = useConfigContext();
     return _this;
   }
 

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

@@ -31,24 +31,23 @@ export default function ($props, $blocks, $__proto__) {
       strokeWidth = _this$get.strokeWidth,
       children = _this$get.children;
 
+  var k = this.config.k;
   var status = this.status.value;
   var background = this.color.value || '';
-  var classNameObj = (_classNameObj = {
-    'k-progress': true
-  }, _classNameObj["k-" + type] = type, _classNameObj[className] = className, _classNameObj["k-" + status] = status !== 'normal', _classNameObj["k-" + size] = size !== 'default', _classNameObj[makeStyles()] = true, _classNameObj);
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-progress"] = true, _classNameObj[k + "-" + type] = type, _classNameObj[className] = className, _classNameObj[k + "-" + status] = status !== 'normal', _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
-  }, getRestProps(this)), [type === 'bar' ? _$ce(2, 'div', _$ce(2, 'div', _$ce(2, 'div', showInnerText ? _$ce(2, 'div', [percent, _$ct(' %\n                ')], 0, 'k-progress-inner-text') : undefined, 0, 'k-progress-bg', {
+  }, getRestProps(this)), [type === 'bar' ? _$ce(2, 'div', _$ce(2, 'div', _$ce(2, 'div', showInnerText ? _$ce(2, 'div', [percent, _$ct(' %\n                ')], 0, _$cn(k + "-progress-inner-text")) : undefined, 0, _$cn(k + "-progress-bg"), {
     'style': {
       width: percent + '%',
       background: background
     }
-  }), 2, 'k-progress-content'), 2, 'k-progress-container') : undefined, type === 'circle' ? _$ce(512, 'svg', (r = (120 - strokeWidth) / 2, circumference = 2 * Math.PI * r, [_$ce(2, 'circle', null, 1, 'k-progress-meter', {
+  }), 2, _$cn(k + "-progress-content")), 2, _$cn(k + "-progress-container")) : undefined, type === 'circle' ? _$ce(512, 'svg', (r = (120 - strokeWidth) / 2, circumference = 2 * Math.PI * r, [_$ce(2, 'circle', null, 1, _$cn(k + "-progress-meter"), {
     'cx': '60',
     'cy': '60',
     'r': r,
     'stroke-width': strokeWidth
-  }), _$ce(2, 'circle', null, 1, 'k-progress-value', {
+  }), _$ce(2, 'circle', null, 1, _$cn(k + "-progress-value"), {
     'cx': '60',
     'cy': '60',
     'r': r,
@@ -62,26 +61,26 @@ export default function ($props, $blocks, $__proto__) {
     'repeatCount': 'indefinite',
     'from': circumference,
     'to': circumference * (1 - percent / 100)
-  }), _$ce(2, 'animate', null, 1, null, _$tmp0)], 4, 'k-progress-animate', {
+  }), _$ce(2, 'animate', null, 1, null, _$tmp0)], 4, _$cn(k + "-progress-animate"), {
     'cx': '60',
     'cy': '60',
     'r': r,
     'stroke-width': strokeWidth,
     'stroke-dasharray': circumference,
     'stroke-dashoffset': circumference
-  }) : undefined]), 0, 'k-progress-canvas', _$tmp1) : undefined, children ? _$ce(2, 'div', children, 0, 'k-progress-text') : showOuterText ? _$ce(2, 'div', function () {
+  }) : undefined]), 0, _$cn(k + "-progress-canvas"), _$tmp1) : undefined, children ? _$ce(2, 'div', children, 0, _$cn(k + "-progress-text")) : showOuterText ? _$ce(2, 'div', function () {
     if (type !== 'circle') {
       switch (status) {
         case 'success':
-          icon = 'k-icon-success-fill';
+          icon = [k + "-icon-success-fill"];
           break;
 
         case 'error':
-          icon = 'k-icon-error-fill';
+          icon = [k + "-icon-error-fill"];
           break;
 
         case 'warning':
-          icon = 'k-icon-warning-fill';
+          icon = [k + "-icon-warning-fill"];
           break;
 
         default:
@@ -90,12 +89,12 @@ export default function ($props, $blocks, $__proto__) {
     } else {
       switch (status) {
         case 'success':
-          icon = 'k-icon-check';
+          icon = [k + "-icon-check"];
           break;
 
         case 'error':
         case 'warning':
-          icon = 'k-icon-close';
+          icon = [k + "-icon-close"];
           break;
 
         default:
@@ -105,14 +104,12 @@ export default function ($props, $blocks, $__proto__) {
 
     if (icon) {
       return _$cc(Icon, {
-        'className': _$cn((_$cn2 = {
-          "k-progress-icon": true
-        }, _$cn2[icon] = true, _$cn2)),
+        'className': _$cn((_$cn2 = {}, _$cn2[k + "-progress-icon"] = true, _$cn2[icon] = true, _$cn2)),
         'color': status === 'error' ? 'danger' : status
       });
     } else {
       return _$ce(2, 'span', [percent, _$ct('%')], 0);
     }
-  }(), 0, 'k-progress-text') : undefined]);
+  }(), 0, _$cn(k + "-progress-text")) : undefined]);
 }
 ;

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

@@ -1,3 +1,3 @@
 import '../../styles/global';
 export declare const types: readonly ["active", "normal", "error", "success", "warning"];
-export declare function makeStyles(): string;
+export declare function makeStyles(k: string): string;

package/es/components/progress/styles.js

@@ -82,11 +82,11 @@ setDefault(function () {
     progress: defaults
   }).progress;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css("position:relative;line-height:1;&.k-bar{display:flex;align-items:center;.k-progress-container{height:", progress.bar.height, ";border-radius:", progress.bar.height, ";background-color:", progress.stokeColor.color, ";overflow:hidden;position:relative;vertical-align:middle;font-size:", progress.bar.innerText.fontSize, ";flex:1;}.k-progress-content{position:relative;left:0;top:0;white-space:nowrap;width:100%;height:100%;border-radius:", progress.bar.height, ";}.k-progress-bg{background-color:", progress.stokeColor.normal, ";height:100%;border-radius:", progress.bar.height, ";transition:", progress.animation.transition, ";position:relative;}.k-progress-inner-text{display:inline-block;vertical-align:top;color:#ffffff;line-height:", progress.bar.height, ";width:100%;text-align:right;padding:", progress.bar.innerText.padding, ";}&.k-success{.k-progress-bg{background:", progress.stokeColor.success, ";}}&.k-error{.k-progress-bg{background:", progress.stokeColor.error, ";}}&.k-warning{.k-progress-bg{background:", progress.stokeColor.warning, ";}}&.k-active{.k-progress-bg{&:before{content:\"\";position:absolute;top:0;bottom:0;right:0;left:0;background-color:#fff;animation:", progressBarAnimation, " 2s ease infinite;border-radius:", progress.bar.height, ";}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
-    return /*#__PURE__*/css("&.k-", size, "{font-size:", progress.bar[size].fontSize, ";.k-progress-container{height:", progress.bar[size].height, ";}}");
-  }), " .k-progress-text{margin-left:", progress.bar.textMarginLeft, ";width:", progress.bar.textWidth, ";line-height:", progress.bar.outerText.height, ";height:", progress.bar.outerText.height, ";}}&.k-circle{width:", progress.circle.width, ";height:", progress.circle.width, ";font-size:", progress.circle.fontSize, ";", _mapInstanceProperty(sizes).call(sizes, function (size) {
+export function makeStyles(k) {
+  return /*#__PURE__*/css("position:relative;line-height:1;&.", k, "-bar{display:flex;align-items:center;.", k, "-progress-container{height:", progress.bar.height, ";border-radius:", progress.bar.height, ";background-color:", progress.stokeColor.color, ";overflow:hidden;position:relative;vertical-align:middle;font-size:", progress.bar.innerText.fontSize, ";flex:1;}.", k, "-progress-content{position:relative;left:0;top:0;white-space:nowrap;width:100%;height:100%;border-radius:", progress.bar.height, ";}.", k, "-progress-bg{background-color:", progress.stokeColor.normal, ";height:100%;border-radius:", progress.bar.height, ";transition:", progress.animation.transition, ";position:relative;}.", k, "-progress-inner-text{display:inline-block;vertical-align:top;color:#ffffff;line-height:", progress.bar.height, ";width:100%;text-align:right;padding:", progress.bar.innerText.padding, ";}&.", k, "-success{.", k, "-progress-bg{background:", progress.stokeColor.success, ";}}&.", k, "-error{.", k, "-progress-bg{background:", progress.stokeColor.error, ";}}&.", k, "-warning{.", k, "-progress-bg{background:", progress.stokeColor.warning, ";}}&.", k, "-active{.", k, "-progress-bg{&:before{content:\"\";position:absolute;top:0;bottom:0;right:0;left:0;background-color:#fff;animation:", progressBarAnimation, " 2s ease infinite;border-radius:", progress.bar.height, ";}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+    return /*#__PURE__*/css("&.", k, "-", size, "{font-size:", progress.bar[size].fontSize, ";.", k, "-progress-container{height:", progress.bar[size].height, ";}}");
+  }), " .", k, "-progress-text{margin-left:", progress.bar.textMarginLeft, ";width:", progress.bar.textWidth, ";line-height:", progress.bar.outerText.height, ";height:", progress.bar.outerText.height, ";}}&.", k, "-circle{width:", progress.circle.width, ";height:", progress.circle.width, ";font-size:", progress.circle.fontSize, ";", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = progress.circle[size];
-    return /*#__PURE__*/css("&.k-", size, "{width:", styles.width, ";height:", styles.width, ";font-size:", styles.fontSize, ";.k-progress-icon{font-size:", styles.iconFontSize, ";}}");
-  }), ";.k-progress-canvas{transform:rotate(-90deg);}.k-progress-meter,.k-progress-value,.k-progress-animate{fill:none;}.k-progress-meter{stroke:", progress.stokeColor.color, ";}.k-progress-value{stroke:", progress.stokeColor.normal, ";stroke-linecap:round;transition:", progress.animation.transition, ";}.k-progress-animate{stroke:#fff;stroke-linecap:round;}.k-progress-text{position:absolute;top:50%;text-align:center;width:100%;transform:translateY(-50%);}.k-progress-icon{font-size:", progress.circle.iconFontSize, ";}&.k-success{.k-progress-value{stroke:", progress.stokeColor.success, ";}}&.k-error{.k-progress-value{stroke:", progress.stokeColor.error, ";}}&.k-warning{.k-progress-value{stroke:", progress.stokeColor.warning, ";}}}");
+    return /*#__PURE__*/css("&.", k, "-", size, "{width:", styles.width, ";height:", styles.width, ";font-size:", styles.fontSize, ";.", k, "-progress-icon{font-size:", styles.iconFontSize, ";}}");
+  }), ";.", k, "-progress-canvas{transform:rotate(-90deg);}.", k, "-progress-meter,.", k, "-progress-value,.", k, "-progress-animate{fill:none;}.", k, "-progress-meter{stroke:", progress.stokeColor.color, ";}.", k, "-progress-value{stroke:", progress.stokeColor.normal, ";stroke-linecap:round;transition:", progress.animation.transition, ";}.", k, "-progress-animate{stroke:#fff;stroke-linecap:round;}.", k, "-progress-text{position:absolute;top:50%;text-align:center;width:100%;transform:translateY(-50%);}.", k, "-progress-icon{font-size:", progress.circle.iconFontSize, ";}&.", k, "-success{.", k, "-progress-value{stroke:", progress.stokeColor.success, ";}}&.", k, "-error{.", k, "-progress-value{stroke:", progress.stokeColor.error, ";}}&.", k, "-warning{.", k, "-progress-value{stroke:", progress.stokeColor.warning, ";}}}");
 }

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

@@ -15,6 +15,7 @@ export declare class Radio<Value = false, True = true> extends Component<RadioPr
     static defaults: () => Partial<RadioProps<false, true>>;
     static events: Events<RadioEvents<true>>;
     private elementRef;
+    private config;
     private onKeypress;
     private onClick;
     private fixClick;

package/es/components/radio/index.js

@@ -4,6 +4,7 @@ import { __decorate } from "tslib";
 import { Component, createRef } from 'intact';
 import { bind } from '../utils';
 import template from './index.vdt';
+import { useConfigContext } from '../config';
 var typeDefs = {
   disabled: Boolean,
   value: null,
@@ -35,6 +36,7 @@ export var Radio = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.elementRef = createRef();
+    _this.config = useConfigContext();
     return _this;
   }
 

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

@@ -25,11 +25,8 @@ export default function ($props, $blocks, $__proto__) {
       rest = _objectWithoutPropertiesLoose(_this$get, _excluded);
 
   var isChecked = value === trueValue;
-  var classNameObj = (_classNameObj = {
-    'k-radio': true,
-    'k-disabled': disabled,
-    'k-checked': isChecked
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj); // let evClick;
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-radio"] = true, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-checked"] = isChecked, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj); // let evClick;
 
   var events = ['ev-click', 'ev-change', 'ev-mouseenter', 'ev-mouseleave'].reduce(function (memo, name) {
     if (rest[name]) {
@@ -63,7 +60,7 @@ export default function ($props, $blocks, $__proto__) {
       'ref': this.elementRef,
       'checked': isChecked,
       'ev-click': this.onClick
-    })), 2, 'k-radio-wrapper')
-  }), children ? _$ce(2, 'span', children, 0, 'k-radio-text') : undefined]);
+    })), 2, _$cn(k + "-radio-wrapper"))
+  }), children ? _$ce(2, 'span', children, 0, _$cn(k + "-radio-text")) : undefined]);
 }
 ;

package/es/components/radio/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/radio/styles.js

@@ -60,6 +60,6 @@ setDefault(function () {
     radio: defaults
   }).radio;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-radio-wrapper{width:", radio.width, ";height:", radio.width, ";border:1px solid ", radio.borderColor, ";border-radius:50%;transition:all ", radio.transition, ";position:relative;background:", radio.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", radio.innerWidth, ";height:", radio.innerWidth, ";top:50%;left:50%;margin-left:calc(-", radio.innerWidth, " / 2);margin-top:calc(-", radio.innerWidth, " / 2);border-radius:50%;background-color:", radio.checkedColor, ";transform:scale(0);transition:all ", radio.transition, ";}}&:hover{.k-radio-wrapper{border:1px solid ", radio.hoverBorderColor, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;}.k-radio-text{margin-left:", radio.textGap, ";flex:0 1 auto;}&.k-checked{.k-radio-wrapper{border-color:", radio.checkedColor, ";&:before{transform:scale(1);}}}&:focus{outline:none;.k-radio-wrapper{border-color:", radio.checkedColor, ";}}&.k-disabled{color:", radio.disabled.color, ";cursor:not-allowed;.k-radio-wrapper{border-color:", radio.disabled.borderColor, ";background:", radio.disabled.bgColor, ";}input{cursor:not-allowed;}&.k-checked{.k-radio-wrapper{border-color:", radio.disabled.checked.borderColor, ";background:", radio.disabled.checked.bgColor, ";&:before{background:", radio.disabled.checked.innerColor, ";}}}}");
+export function makeStyles(k) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.", k, "-radio-wrapper{width:", radio.width, ";height:", radio.width, ";border:1px solid ", radio.borderColor, ";border-radius:50%;transition:all ", radio.transition, ";position:relative;background:", radio.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", radio.innerWidth, ";height:", radio.innerWidth, ";top:50%;left:50%;margin-left:calc(-", radio.innerWidth, " / 2);margin-top:calc(-", radio.innerWidth, " / 2);border-radius:50%;background-color:", radio.checkedColor, ";transform:scale(0);transition:all ", radio.transition, ";}}&:hover{.", k, "-radio-wrapper{border:1px solid ", radio.hoverBorderColor, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;}.", k, "-radio-text{margin-left:", radio.textGap, ";flex:0 1 auto;}&.", k, "-checked{.", k, "-radio-wrapper{border-color:", radio.checkedColor, ";&:before{transform:scale(1);}}}&:focus{outline:none;.", k, "-radio-wrapper{border-color:", radio.checkedColor, ";}}&.", k, "-disabled{color:", radio.disabled.color, ";cursor:not-allowed;.", k, "-radio-wrapper{border-color:", radio.disabled.borderColor, ";background:", radio.disabled.bgColor, ";}input{cursor:not-allowed;}&.", k, "-checked{.", k, "-radio-wrapper{border-color:", radio.disabled.checked.borderColor, ";background:", radio.disabled.checked.bgColor, ";&:before{background:", radio.disabled.checked.innerColor, ";}}}}");
 }

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

@@ -19,4 +19,5 @@ export declare class Rate extends Component<RateProps, RateEvents, RateBlocks> {
     static defaults: () => Partial<RateProps>;
     static events: Events<RateEvents>;
     private activeValue;
+    private config;
 }

package/es/components/rate/index.js

@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component } from 'intact';
 import template from './index.vdt';
 import { useActiveValue } from './useActiveValue';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: Number,
   count: Number,
@@ -35,6 +36,7 @@ export var Rate = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.activeValue = useActiveValue();
+    _this.config = useConfigContext();
     return _this;
   }