@king-design/react 3.0.1 → 3.1.0-beta.1

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

@@ -4,6 +4,7 @@ import { __decorate } from "tslib";
 import { Component, createRef } from 'intact-react';
 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/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/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/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/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/components/rate/index.js

@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component } from 'intact-react';
 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;
   }
 

package/components/rate/index.vdt.js

@@ -27,10 +27,8 @@ export default function ($props, $blocks, $__proto__) {
       onClick = _this$activeValue.onClick,
       onMouseEnter = _this$activeValue.onMouseEnter,
       onMouseLeaveComponent = _this$activeValue.onMouseLeaveComponent;
-  var classNameObj = (_classNameObj = {
-    'k-rate': true,
-    'k-disabled': disabled
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-rate"] = true, _classNameObj[k + "-disabled"] = disabled, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var icon = (_$blocks['icon'] = function ($super) {
     return _$cc(Icon, _$tmp0);
   }, __$blocks['icon'] = function ($super, data) {
@@ -55,13 +53,11 @@ export default function ($props, $blocks, $__proto__) {
   for (var i = 0; i < count; i++) {
     var _$cn2;
 
-    var _className = activeValue.value >= i + 1 ? 'k-full' : activeValue.value === i + 0.5 ? 'k-half' : null;
+    var _className = activeValue.value >= i + 1 ? [k + "-full"] : activeValue.value === i + 0.5 ? [k + "-half"] : null;
 
     var halfStep = half ? i + 0.5 : i + 1;
 
-    var item = _$ce(2, 'div', [rateIcon("k-rate-first", halfStep), _$ct('\n            '), rateIcon("k-rate-second", i + 1)], 0, _$cn((_$cn2 = {
-      "k-rate-item": true
-    }, _$cn2[_className] = _className, _$cn2)));
+    var item = _$ce(2, 'div', [rateIcon(k + "-rate-first", halfStep), _$ct('\n            '), rateIcon(k + "-rate-second", i + 1)], 0, _$cn((_$cn2 = {}, _$cn2[k + "-rate-item"] = true, _$cn2[_className] = _className, _$cn2)));
 
     items.push(item);
   }

package/components/rate/styles.d.ts

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

package/components/rate/styles.js

@@ -25,6 +25,6 @@ setDefault(function () {
     rate: defaults
   }).rate;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;.k-rate-item{display:inline-block;margin-right:", rate.item.gap, ";cursor:pointer;position:relative;color:", rate.color, ";transition:all ", rate.transition, ";&:hover{transform:", rate.item.hoverTransform, ";}&.k-full{color:", rate.activeColor, ";}&.k-half{.k-rate-first{color:", rate.activeColor, ";}}}.k-rate-first{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;}.k-icon{font-size:", rate.iconFontSize, ";color:inherit;}&.k-disabled{.k-rate-item{cursor:default;&:hover{transform:none;}}}");
+export function makeStyles(k) {
+  return /*#__PURE__*/css("display:inline-block;.", k, "-rate-item{display:inline-block;margin-right:", rate.item.gap, ";cursor:pointer;position:relative;color:", rate.color, ";transition:all ", rate.transition, ";&:hover{transform:", rate.item.hoverTransform, ";}&.", k, "-full{color:", rate.activeColor, ";}&.", k, "-half{.", k, "-rate-first{color:", rate.activeColor, ";}}}.", k, "-rate-first{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;}.", k, "-icon{font-size:", rate.iconFontSize, ";color:inherit;}&.", k, "-disabled{.", k, "-rate-item{cursor:default;&:hover{transform:none;}}}");
 }

package/components/scrollSelect/index.d.ts

@@ -23,5 +23,6 @@ export declare class ScrollSelect<T = any> extends Component<ScrollSelectProps<T
     private list;
     private translate;
     private mouseEvents;
+    private config;
 }
 export {};

package/components/scrollSelect/index.js

@@ -5,6 +5,7 @@ import template from './index.vdt';
 import { useList } from './useList';
 import { useTranslate } from './useTranslate';
 import { useMouseEvents } from './useMouseEvents';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: null,
   count: Number,
@@ -36,6 +37,7 @@ export var ScrollSelect = /*#__PURE__*/function (_Component) {
     _this.list = useList();
     _this.translate = useTranslate();
     _this.mouseEvents = useMouseEvents(_this.translate.translate, _this.list);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/scrollSelect/index.vdt.js

@@ -16,11 +16,8 @@ export default function ($props, $blocks, $__proto__) {
       disabled = _this$get.disabled,
       disable = _this$get.disable;
 
-  var classNameObj = (_classNameObj = {
-    'k-scroll-select': true,
-    'k-dragging': this.mouseEvents.dragging.value,
-    'k-disabled': disabled
-  }, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-scroll-select"] = true, _classNameObj[k + "-dragging"] = this.mouseEvents.dragging.value, _classNameObj[k + "-disabled"] = disabled, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var _this$mouseEvents = this.mouseEvents,
       onStart = _this$mouseEvents.onStart,
       onWheel = _this$mouseEvents.onWheel,
@@ -28,14 +25,12 @@ export default function ($props, $blocks, $__proto__) {
   return _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj)
   }), [_$ce(2, 'div', _$ma(this.list.data.value, function ($value, $key) {
-    return _$ce(2, 'div', $value.label, 0, _$cn({
-      "k-scroll-select-item": true,
-      "k-active": $value.value === value,
-      "k-disabled": disabled || disable && disable.call(this, $value.value)
-    }), {
+    var _$cn2;
+
+    return _$ce(2, 'div', $value.label, 0, _$cn((_$cn2 = {}, _$cn2[k + "-scroll-select-item"] = true, _$cn2[k + "-active"] = $value.value === value, _$cn2[k + "-disabled"] = disabled || disable && disable.call(this, $value.value), _$cn2)), {
       'ev-click': !disabled ? onClick.bind(this, $value, $key) : null
     });
-  }, $this), 4, 'k-scroll-select-wrapper', {
+  }, $this), 4, _$cn(k + "-scroll-select-wrapper"), {
     'style': {
       transform: "translateY(" + this.translate.translate.value + "px)",
       marginTop: this.mouseEvents.marginTop.value + "px"
@@ -52,6 +47,6 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['append'](_$no)), 0, 'k-scroll-select-append') : undefined, _$ce(2, 'div', null, 1, 'k-scroll-select-border')]);
+  }, __$blocks['append'](_$no)), 0, _$cn(k + "-scroll-select-append")) : undefined, _$ce(2, 'div', null, 1, _$cn(k + "-scroll-select-border"))]);
 }
 ;

package/components/scrollSelect/styles.d.ts

@@ -14,4 +14,4 @@ declare const defaults: {
 };
 declare let scrollSelect: typeof defaults;
 export { scrollSelect };
-export declare function makeStyles(): string;
+export declare function makeStyles(k: string): string;

package/components/scrollSelect/styles.js

@@ -39,6 +39,6 @@ setDefault(function () {
   }).scrollSelect;
 });
 export { scrollSelect };
-export function makeStyles() {
-  return /*#__PURE__*/css("text-align:center;overflow:hidden;max-height:100%;height:", scrollSelect.height, ";user-select:none;position:relative;.k-scroll-select-wrapper{transition:transform ", scrollSelect.transition, ";}&.k-dragging{.k-scroll-select-wrapper{transition:none;}}&.k-disabled{.k-scroll-select-item{cursor:not-allowed;color:", scrollSelect.item.disabledColor, ";}}.k-scroll-select-item{line-height:", scrollSelect.item.height, ";color:", scrollSelect.item.color, ";cursor:pointer;white-space:nowrap;&:hover{background:", scrollSelect.item.hoverBgColor, ";}&.k-active{color:", scrollSelect.item.activeColor, ";font-size:", scrollSelect.item.activeFontSize, ";}&.k-disabled{color:", scrollSelect.item.disabledColor, ";}}.k-scroll-select-append{position:absolute;top:50%;right:0;transform:translateY(-50%);}.k-scroll-select-border{position:absolute;width:100%;top:50%;margin-top:calc(-", scrollSelect.item.height, " / 2);height:", scrollSelect.item.height, ";border-top:", scrollSelect.item.border, ";border-bottom:", scrollSelect.item.border, ";pointer-events:none;}");
+export function makeStyles(k) {
+  return /*#__PURE__*/css("text-align:center;overflow:hidden;max-height:100%;height:", scrollSelect.height, ";user-select:none;position:relative;.", k, "-scroll-select-wrapper{transition:transform ", scrollSelect.transition, ";}&.", k, "-dragging{.", k, "-scroll-select-wrapper{transition:none;}}&.", k, "-disabled{.", k, "-scroll-select-item{cursor:not-allowed;color:", scrollSelect.item.disabledColor, ";}}.", k, "-scroll-select-item{line-height:", scrollSelect.item.height, ";color:", scrollSelect.item.color, ";cursor:pointer;white-space:nowrap;&:hover{background:", scrollSelect.item.hoverBgColor, ";}&.", k, "-active{color:", scrollSelect.item.activeColor, ";font-size:", scrollSelect.item.activeFontSize, ";}&.", k, "-disabled{color:", scrollSelect.item.disabledColor, ";}}.", k, "-scroll-select-append{position:absolute;top:50%;right:0;transform:translateY(-50%);}.", k, "-scroll-select-border{position:absolute;width:100%;top:50%;margin-top:calc(-", scrollSelect.item.height, " / 2);height:", scrollSelect.item.height, ";border-top:", scrollSelect.item.border, ";border-bottom:", scrollSelect.item.border, ";pointer-events:none;}");
 }

package/components/select/base.d.ts

@@ -51,6 +51,10 @@ export declare abstract class BaseSelect<T extends BaseSelectProps<any> = BaseSe
     };
     private focusout;
     private draggable;
+    protected config: {
+        cls: (name: string) => string;
+        readonly k: string;
+    };
     init(): void;
     protected abstract getPlaceholder(): Children;
     protected abstract getLabel(): Children;

package/components/select/base.js

@@ -14,6 +14,7 @@ import { useInput } from './useInput';
 import { useFocusout } from './useFocusout';
 import { isNullOrUndefined } from 'intact-shared';
 import { useDraggable } from './useDraggble';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: null,
   multiple: Boolean,
@@ -65,6 +66,7 @@ export var BaseSelect = /*#__PURE__*/function (_Component) {
     _this.input = useInput(_this.resetKeywords);
     _this.focusout = useFocusout();
     _this.draggable = useDraggable();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/select/base.vdt.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _flatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/flat";
 import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/values";
-import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no, map as _$ma, extend as _$ex, EMPTY_OBJ as _$em } from 'intact-react';
+import { createUnknownComponentVNode as _$cc, className as _$cn, createVNode as _$cv, createElementVNode as _$ce, noop as _$no, map as _$ma, extend as _$ex, EMPTY_OBJ as _$em } from 'intact-react';
 import { TransitionGroup, Transition } from 'intact';
 import { Input } from '../input';
 import { Icon } from '../icon';
@@ -16,9 +16,6 @@ var _$tmp0 = {
   'className': 'ion-load-c',
   'rotate': true
 };
-var _$tmp1 = {
-  'className': 'k-icon-search'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -51,10 +48,8 @@ export default function ($props, $blocks, $__proto__) {
       nowrap = _this$get.nowrap,
       draggable = _this$get.draggable;
 
-  var classNameObj = (_classNameObj = {
-    'k-select': true,
-    'k-disabled': disabled
-  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-fluid'] = fluid, _classNameObj['k-inline'] = inline, _classNameObj['k-flat'] = flat, _classNameObj['k-nowrap'] = nowrap, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-select"] = true, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[k + "-fluid"] = fluid, _classNameObj[k + "-inline"] = inline, _classNameObj[k + "-flat"] = flat, _classNameObj[k + "-nowrap"] = nowrap, _classNameObj[className] = className, _classNameObj[$props.className] = $props.className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var placeholder = this.getPlaceholder();
   var label = this.getLabel();
   var hasValue = this.hasValue();
@@ -66,7 +61,7 @@ export default function ($props, $blocks, $__proto__) {
       onFocusout = _this$focusout.onFocusout,
       triggerRef = _this$focusout.triggerRef;
   var filterInput = filterable ? _$cc(Input, {
-    'className': 'k-select-input',
+    'className': _$cn(k + "-select-input"),
     'value': keywords,
     'ev-$change:value': onInput,
     'disabled': disabled,
@@ -83,6 +78,8 @@ export default function ($props, $blocks, $__proto__) {
   return _$cc(ErrorContext.Consumer, {
     'defaultValue': false,
     'children': function children(isInvalid) {
+      var _$cn2;
+
       return _$cc(Wave, {
         'disabled': disabled || isInvalid || inline,
         'inset': '-2px',
@@ -111,7 +108,7 @@ export default function ($props, $blocks, $__proto__) {
             };
 
             return block ? block.call($this, callBlock, data) : callBlock();
-          }, __$blocks['prefix'](_$no)), 0, 'k-select-prefix') : undefined, _$ce(2, 'div', [_$ce(64, 'input', null, 1, null, {
+          }, __$blocks['prefix'](_$no)), 0, _$cn(k + "-select-prefix")) : undefined, _$ce(2, 'div', [_$ce(64, 'input', null, 1, null, {
             'type': 'hidden',
             'value': value,
             'name': name
@@ -131,7 +128,7 @@ export default function ($props, $blocks, $__proto__) {
               'readonly': !show,
               'waveDisabled': true,
               'flat': flat
-            }, 'input', inputRef) : !filterable && !hasValue ? _$ce(2, 'div', placeholder, 0, 'k-select-placeholder c-ellipsis', null, 'placeholder') : !multiple ? _$ce(2, 'div', (_$blocks['value'] = function ($super) {
+            }, 'input', inputRef) : !filterable && !hasValue ? _$ce(2, 'div', placeholder, 0, _$cn(k + "-select-placeholder c-ellipsis"), null, 'placeholder') : !multiple ? _$ce(2, 'div', (_$blocks['value'] = function ($super) {
               return label;
             }, __$blocks['value'] = function ($super, data) {
               var block = $blocks['value'];
@@ -141,7 +138,7 @@ export default function ($props, $blocks, $__proto__) {
               };
 
               return block ? block.call($this, callBlock, data) : callBlock();
-            }, __$blocks['value'](_$no, [value, label])), 0, 'k-select-value c-ellipsis', null, 'value') : _$ce(2, 'div', [(_$blocks['values'] = function ($super) {
+            }, __$blocks['value'](_$no, [value, label])), 0, _$cn(k + "-select-value c-ellipsis"), null, 'value') : _$ce(2, 'div', [(_$blocks['values'] = function ($super) {
               return label && label.length || filterable ? _$cc(Tags, {
                 'nowrap': nowrap,
                 'size': size,
@@ -192,17 +189,16 @@ export default function ($props, $blocks, $__proto__) {
               };
 
               return block ? block.call($this, callBlock, data) : callBlock();
-            }, _valuesInstanceProperty(__$blocks).call(__$blocks, _$no, [value, label])), $blocks && _valuesInstanceProperty($blocks) ? filterInput : undefined], 0, 'k-select-values', null, 'values')
-          })], 0, 'k-select-main'), !hideIcon || clearable || loading || $blocks.suffix ? _$ce(2, 'span', [clearable && !disabled ? _$cc(Icon, {
-            'className': _$cn({
-              "k-select-clear ion-ios-close": true,
-              "k-show": hasValue
-            }),
+            }, _valuesInstanceProperty(__$blocks).call(__$blocks, _$no, [value, label])), $blocks && _valuesInstanceProperty($blocks) ? filterInput : undefined], 0, _$cn(k + "-select-values"), null, 'values')
+          })], 0, _$cn(k + "-select-main")), !hideIcon || clearable || loading || $blocks.suffix ? _$ce(2, 'span', [clearable && !disabled ? _$cc(Icon, {
+            'className': _$cn((_$cn2 = {}, _$cn2[k + "-select-clear ion-ios-close"] = true, _$cn2[k + "-show"] = hasValue, _$cn2)),
             'ev-click': _this.clear,
             'hoverable': true
           }) : undefined, _$ce(2, 'span', (_$blocks['suffix'] = function ($super) {
-            return loading ? _$cc(Icon, _$tmp0) : !hideIcon ? filterable && show ? _$cc(Icon, _$tmp1) : _$cc(Icon, {
-              'className': 'k-select-arrow k-icon-down',
+            return loading ? _$cc(Icon, _$tmp0) : !hideIcon ? filterable && show ? _$cc(Icon, {
+              'className': _$cn(k + "-icon-search")
+            }) : _$cc(Icon, {
+              'className': _$cn(k + "-select-arrow " + k + "-icon-down"),
               'disabled': $props.isDisableArrow
             }) : undefined;
           }, __$blocks['suffix'] = function ($super, data) {
@@ -213,7 +209,7 @@ export default function ($props, $blocks, $__proto__) {
             };
 
             return block ? block.call($this, callBlock, data) : callBlock();
-          }, __$blocks['suffix'](_$no)), 0, 'k-select-suffix-icon')], 0, 'k-select-suffix') : undefined]), (_$blocks['base-menu'] = function ($super) {
+          }, __$blocks['suffix'](_$no)), 0, _$cn(k + "-select-suffix-icon"))], 0, _$cn(k + "-select-suffix")) : undefined]), (_$blocks['base-menu'] = function ($super) {
             return _$ce(2, 'div', 'should be implemeted', 16);
           }, __$blocks['base-menu'] = function ($super, data) {
             var block = $blocks['base-menu'];

package/components/select/group.d.ts

@@ -11,4 +11,5 @@ export declare class OptionGroup extends Component<OptionGroupProps, OptionGroup
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<OptionGroupProps>>;
     private select;
+    private config;
 }

package/components/select/group.js

@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component, inject, VNode } from 'intact-react';
 import template from './group.vdt';
 import { SELECT } from './constants';
+import { useConfigContext } from '../config';
 var typeDefs = {
   label: [String, Number, VNode]
 };
@@ -20,6 +21,7 @@ export var OptionGroup = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.select = inject(SELECT);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/select/group.vdt.js

@@ -19,9 +19,8 @@ export default function ($props, $blocks, $__proto__) {
   var _this$select$get = this.select.get(),
       card = _this$select$get.card;
 
-  var classNameObj = (_classNameObj = {
-    "k-select-group": true
-  }, _classNameObj[className] = className, _classNameObj[makeGroupStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-select-group"] = true, _classNameObj[className] = className, _classNameObj[makeGroupStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj)
   }), [!card ? _$ce(2, 'div', (_$blocks['label'] = function ($super) {
@@ -34,6 +33,6 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['label'](_$no)), 0, 'k-select-group-label') : undefined, children]);
+  }, __$blocks['label'](_$no)), 0, _$cn(k + "-select-group-label")) : undefined, children]);
 }
 ;

package/components/select/menu.d.ts

@@ -7,4 +7,5 @@ export declare class SelectMenu extends Component<{
     select: Select<any, boolean>;
     private card;
     private searchable;
+    private config;
 }

package/components/select/menu.js

@@ -5,6 +5,7 @@ import template from './menu.vdt';
 import { SELECT } from './constants';
 import { useCard } from './useCard';
 import { useSearchable } from './useSearchable';
+import { useConfigContext } from '../config';
 export var SelectMenu = /*#__PURE__*/function (_Component) {
   _inheritsLoose(SelectMenu, _Component);
 
@@ -21,6 +22,7 @@ export var SelectMenu = /*#__PURE__*/function (_Component) {
     _this.select = inject(SELECT);
     _this.card = useCard(_this.select.label.activeIndices);
     _this.searchable = useSearchable();
+    _this.config = useConfigContext();
     return _this;
   }