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

package/components/spinner/index.js

@@ -7,6 +7,7 @@ import { useStep } from './useStep';
 import { useFormatter } from './useFormatter';
 import { useValue } from './useValue';
 import { useChange } from './useChange';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: Number,
   disabled: Boolean,
@@ -55,6 +56,7 @@ export var Spinner = /*#__PURE__*/function (_Component) {
     _this.formatter = useFormatter();
     _this.value = useValue(_this.step, _this.formatter);
     _this.change = useChange(_this.step, _this.value.fixValue);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/spinner/index.vdt.js

@@ -5,18 +5,6 @@ import { Icon } from '../icon';
 import { Input } from '../input';
 import { getRestProps } from '../utils';
 import { makeStyles } from './styles';
-var _$tmp0 = {
-  'className': 'k-spinner-icon k-icon-minus'
-};
-var _$tmp1 = {
-  'className': 'k-spinner-icon k-icon-down'
-};
-var _$tmp2 = {
-  'className': 'k-spinner-icon k-icon-add'
-};
-var _$tmp3 = {
-  'className': 'k-spinner-icon k-icon-up'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -32,10 +20,8 @@ export default function ($props, $blocks, $__proto__) {
       value = _this$get.value,
       width = _this$get.width;
 
-  var classNameObj = (_classNameObj = {
-    'k-spinner': true,
-    'k-disabled': disabled
-  }, _classNameObj["k-" + size] = size !== 'default', _classNameObj[className] = className, _classNameObj['k-vertical'] = vertical, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-spinner"] = true, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[className] = className, _classNameObj[k + "-vertical"] = vertical, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var _this$change = this.change,
       decrease = _this$change.decrease,
       increase = _this$change.increase,
@@ -50,13 +36,17 @@ export default function ($props, $blocks, $__proto__) {
     'icon': true,
     'ev-click': decrease,
     'disabled': this.isDisabledDecrease(),
-    'className': 'k-spinner-btn k-left',
+    'className': _$cn(k + "-spinner-btn " + k + "-left"),
     'size': size,
     'type': 'none',
     'tabindex': '-1',
-    'children': !vertical ? _$cc(Icon, _$tmp0) : _$cc(Icon, _$tmp1)
+    'children': !vertical ? _$cc(Icon, {
+      'className': _$cn(k + "-spinner-icon " + k + "-icon-minus")
+    }) : _$cc(Icon, {
+      'className': _$cn(k + "-spinner-icon " + k + "-icon-down")
+    })
   }), _$cc(Input, {
-    'className': 'k-spinner-input',
+    'className': _$cn(k + "-spinner-input"),
     'disabled': disabled,
     'ev-change': onChangeValue,
     'ev-focusin': onFocusin,
@@ -68,11 +58,15 @@ export default function ($props, $blocks, $__proto__) {
     'icon': true,
     'ev-click': increase,
     'disabled': this.isDisabledIncrease(),
-    'className': 'k-spinner-btn k-right',
+    'className': _$cn(k + "-spinner-btn " + k + "-right"),
     'size': size,
     'type': 'none',
     'tabindex': '-1',
-    'children': !vertical ? _$cc(Icon, _$tmp2) : _$cc(Icon, _$tmp3)
+    'children': !vertical ? _$cc(Icon, {
+      'className': _$cn(k + "-spinner-icon " + k + "-icon-add")
+    }) : _$cc(Icon, {
+      'className': _$cn(k + "-spinner-icon " + k + "-icon-up")
+    })
   })]);
 }
 ;

package/components/spinner/styles.d.ts

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

package/components/spinner/styles.js

@@ -69,28 +69,28 @@ setDefault(function () {
     spinner: defaults
   }).spinner;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;border:", spinner.border, ";border-radius:", spinner.borderRadius, ";&:hover{border-color:", spinner.hoverBorderColor, ";.k-spinner-btn{background:", spinner.hoverBtnBg, ";}.k-left{border-radius:", spinner.borderRadius, " 0 0 ", spinner.borderRadius, ";}.k-right{border-radius:0 ", spinner.borderRadius, " ", spinner.borderRadius, " 0;}}.k-spinner-input{width:", spinner.default.inputWidth, ";.k-input-wrapper{border:none;border-radius:0;&:hover{border:none;}}&.k-focus .k-input-wrapper{border:none;}.k-input-inner{text-align:center;}}.k-spinner-icon{font-size:", spinner.default.iconFontSize, ";}&.k-vertical{position:relative;font-size:0;", _mapInstanceProperty(sizes).call(sizes, function (size) {
+export function makeStyles(k) {
+  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;border:", spinner.border, ";border-radius:", spinner.borderRadius, ";&:hover{border-color:", spinner.hoverBorderColor, ";.", k, "-spinner-btn{background:", spinner.hoverBtnBg, ";}.", k, "-left{border-radius:", spinner.borderRadius, " 0 0 ", spinner.borderRadius, ";}.", k, "-right{border-radius:0 ", spinner.borderRadius, " ", spinner.borderRadius, " 0;}}.", k, "-spinner-input{width:", spinner.default.inputWidth, ";.", k, "-input-wrapper{border:none;border-radius:0;&:hover{border:none;}}&.", k, "-focus .", k, "-input-wrapper{border:none;}.", k, "-input-inner{text-align:center;}}.", k, "-spinner-icon{font-size:", spinner.default.iconFontSize, ";}&.", k, "-vertical{position:relative;font-size:0;", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var generate = function generate() {
-      return "\n                    .k-spinner-input {\n                        padding-right: " + theme[size].height + ";\n                        width: " + spinner.vertical[size].width + ";\n                    }\n                ";
+      return /*#__PURE__*/css(".", k, "-spinner-input{padding-right:", theme[size].height, ";width:", spinner.vertical[size].width, ";}");
     };
 
     if (size === 'default') {
       return generate();
     } else {
-      return "\n                        &.k-" + size + " {\n                            " + generate() + "\n                        }\n                    ";
+      return /*#__PURE__*/css("&.", k, "-", size, "{", generate(), ";}");
     }
-  }), ";.k-spinner-btn{position:absolute;right:0;margin:0;height:calc(50% - 2px);line-height:50%;}.k-spinner-icon{font-size:inherit!important;}.k-spinner-btn.k-left{bottom:1px;border-radius:0 0 ", spinner.borderRadius, " 0;}.k-spinner-btn.k-right{top:1px;border-radius:0 ", spinner.borderRadius, " 0 0;}.k-spinner-input{.k-input-wrapper{border-radius:", spinner.borderRadius, " 0 0 ", spinner.borderRadius, ";}}}&.k-disabled{border-color:", spinner.disabledBorderColor, ";background:", spinner.disabledBg, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  }), ";.", k, "-spinner-btn{position:absolute;right:0;margin:0;height:calc(50% - 2px);line-height:50%;}.", k, "-spinner-icon{font-size:inherit!important;}.", k, "-spinner-btn.", k, "-left{bottom:1px;border-radius:0 0 ", spinner.borderRadius, " 0;}.", k, "-spinner-btn.", k, "-right{top:1px;border-radius:0 ", spinner.borderRadius, " 0 0;}.", k, "-spinner-input{.", k, "-input-wrapper{border-radius:", spinner.borderRadius, " 0 0 ", spinner.borderRadius, ";}}}&.", k, "-disabled{border-color:", spinner.disabledBorderColor, ";background:", spinner.disabledBg, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = spinner[size];
 
     var generate = function generate() {
-      return "\n                .k-spinner-icon {\n                    font-size: " + styles.iconFontSize + ";\n                }\n                .k-spinner-input {\n                    width: " + styles.inputWidth + ";\n                }\n            ";
+      return /*#__PURE__*/css(".", k, "-spinner-icon{font-size:", styles.iconFontSize, ";}.", k, "-spinner-input{width:", styles.inputWidth, ";}");
     };
 
     if (size === 'default') {
       return generate();
     } else {
-      return "\n                    &.k-" + size + " {\n                        " + generate() + "\n                    }\n                ";
+      return /*#__PURE__*/css("&.", k, "-", size, "{", generate(), ";}");
     }
   }), ";");
 }

package/components/split/index.d.ts

@@ -1,5 +1,5 @@
 import { Component, TypeDefs } from 'intact-react';
-import { Mode } from './style';
+import { Mode } from './styles';
 import type { Events } from '../types';
 export interface SplitProps {
     mode?: Mode;
@@ -25,4 +25,5 @@ export declare class Split extends Component<SplitProps, SplitEvents, SplitBlock
     static events: Events<SplitEvents>;
     private size;
     private drag;
+    private config;
 }

package/components/split/index.js

@@ -4,6 +4,7 @@ import { Component } from 'intact-react';
 import template from './index.vdt';
 import { useSize } from './useSize';
 import { useDraggable } from './useDraggable';
+import { useConfigContext } from '../config';
 var typeDefs = {
   mode: String,
   firstSize: String,
@@ -42,6 +43,7 @@ export var Split = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.size = useSize();
     _this.drag = useDraggable(_this.size.firstSize, _this.size.lastSize);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/split/index.vdt.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, createUnknownComponentVNode as _$cc, noop as _$no } from 'intact-react';
-import { makeStyles } from './style';
-import { kls } from './style';
+import { makeStyles, kls } from './styles';
 import { MemoBlock } from './memo';
 import { getRestProps } from '../utils';
 export default function ($props, $blocks, $__proto__) {
@@ -25,9 +24,8 @@ export default function ($props, $blocks, $__proto__) {
       elementRef = _this$drag.elementRef,
       start = _this$drag.start,
       dragging = _this$drag.dragging;
-  var classNameObj = (_classNameObj = {
-    'k-split': true
-  }, _classNameObj["k-" + mode] = true, _classNameObj[makeStyles()] = true, _classNameObj['k-first-auto'] = firstSize.value === 'auto', _classNameObj['k-last-auto'] = lastSize.value === 'auto', _classNameObj['k-resizing'] = dragging.value, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-split"] = true, _classNameObj[k + "-" + mode] = true, _classNameObj[makeStyles(k)] = true, _classNameObj[[k + "-first-auto"]] = firstSize.value === 'auto', _classNameObj[[k + "-last-auto"]] = lastSize.value === 'auto', _classNameObj[[k + "-resizing"]] = dragging.value, _classNameObj);
   var stylePropName = mode === 'horizontal' ? 'width' : 'height';
   return _$cv('div', _extends({
     'className': _$cn(classNameObj),
@@ -45,10 +43,10 @@ export default function ($props, $blocks, $__proto__) {
 
       return block ? block.call($this, callBlock, data) : callBlock();
     }, __$blocks['first'](_$no))
-  }), 2, _$cn(kls('first')), {
+  }), 2, _$cn(kls('first', k)), {
     'style': (_style = {}, _style[stylePropName] = firstSize.value, _style)
   }, null, firstRef), _$ce(2, 'div', (_$blocks['drag'] = function ($super) {
-    return _$ce(2, 'div', _$ce(2, 'div', null, 1, _$cn(kls('drag-lines'))), 2, _$cn(kls('line')));
+    return _$ce(2, 'div', _$ce(2, 'div', null, 1, _$cn(kls('drag-lines', k))), 2, _$cn(kls('line', k)));
   }, __$blocks['drag'] = function ($super, data) {
     var block = $blocks['drag'];
 
@@ -57,7 +55,7 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['drag'](_$no)), 0, _$cn(kls('line-wrapper')), {
+  }, __$blocks['drag'](_$no)), 0, _$cn(kls('line-wrapper', k)), {
     'ev-mousedown': start
   }), _$ce(2, 'div', _$cc(MemoBlock, {
     'block': $blocks.last,
@@ -72,7 +70,7 @@ export default function ($props, $blocks, $__proto__) {
 
       return block ? block.call($this, callBlock, data) : callBlock();
     }, __$blocks['last'](_$no))
-  }), 2, _$cn(kls('last')), {
+  }), 2, _$cn(kls('last', k)), {
     'style': (_style2 = {}, _style2[stylePropName] = lastSize.value, _style2)
   }, null, lastRef)]);
 }

package/components/split/styles.d.ts

@@ -0,0 +1,4 @@
+import '../../styles/global';
+export declare type Mode = 'horizontal' | 'vertical';
+export declare const kls: (className: string, k: string) => string;
+export declare function makeStyles(k: string): string;

package/components/split/styles.js

@@ -0,0 +1,55 @@
+import { theme, setDefault } from '../../styles/theme';
+import { css } from '@emotion/css';
+import '../../styles/global';
+import { deepDefaults } from '../../styles/utils';
+export var kls = function kls(className, k) {
+  return k + "-split-" + className;
+};
+var defaults = {
+  splitLineSize: '6px',
+  dragLinesSize: '1px',
+  dragLinesCount: 5,
+  dragLiensGutter: 5,
+
+  get bgColor() {
+    return theme.color.bg;
+  },
+
+  get baseBorder() {
+    return "1px solid " + theme.color.border;
+  },
+
+  get transition() {
+    return theme.transition.middle;
+  },
+
+  get boderColor() {
+    return theme.color.border;
+  },
+
+  get dragLineMargin() {
+    return "-" + split.dragLinesCount * (split.dragLiensGutter + 1) / 2 + "px";
+  },
+
+  boxShadow: function boxShadow(direction) {
+    var i = 1;
+    var tmp = [];
+
+    while (i <= split.dragLinesCount) {
+      var shadowVal = direction === 'horizontal' ? "0 " + i * split.dragLiensGutter + "px 0 0" : i * split.dragLiensGutter + "px 0 0 0";
+      tmp.push(shadowVal + " " + split.boderColor);
+      i++;
+    }
+
+    return "" + tmp.join(',');
+  }
+};
+var split;
+setDefault(function () {
+  split = deepDefaults(theme, {
+    split: defaults
+  }).split;
+});
+export function makeStyles(k) {
+  return /*#__PURE__*/css("display:flex;height:100%;&>.", kls('first', k), ",&>.", kls('last', k), "{overflow:auto;position:relative;}&>.", kls('first', k), "{flex:0 0 auto;}&>.", kls('last', k), "{flex:auto;}&.", k, "-first-auto{&>.", kls('first', k), "{flex:auto;}&>.", kls('last', k), "{flex:0 0 auto;}}&:not(.", k, "-resizing){&>.", kls('first', k), ",&>.", kls('last', k), "{transition:all ", split.transition, ";}}&>.", kls('line-wrapper', k), "{flex:0 0 auto;text-align:center;overflow:hidden;.", kls('line', k), "{height:100%;background:", split.bgColor, ";position:relative;}.", kls('drag-lines', k), "{background:", split.boderColor, ";position:absolute;}}&.", k, "-horizontal{&>.", kls('line-wrapper', k), "{cursor:col-resize;width:", split.splitLineSize, ";.", kls('line', k), "{border-left:", split.baseBorder, ";border-right:", split.baseBorder, ";}.", kls('drag-lines', k), "{height:", split.dragLinesSize, ";width:100%;top:50%;margin-top:", split.dragLineMargin, ";box-shadow:", split.boxShadow('horizontal'), ";}}}&.", k, "-vertical{flex-direction:column;&>.", kls('line-wrapper', k), "{cursor:row-resize;height:", split.splitLineSize, ";.", kls('line', k), "{border-top:", split.baseBorder, ";border-bottom:", split.baseBorder, ";}.", kls('drag-lines', k), "{width:", split.dragLinesSize, ";height:100%;left:50%;margin-left:", split.dragLineMargin, ";box-shadow:", split.boxShadow('vertical'), ";}}}");
+}

package/components/steps/context.d.ts

@@ -1,4 +1,5 @@
 export declare const context: {
     Provider: import("misstime").ComponentConstructor<import('intact-react').Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
     Consumer: import("misstime").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
+    useContext: () => import("misstime").RefObject<any>;
 };

package/components/steps/index.d.ts

@@ -11,5 +11,6 @@ export declare class Steps extends Component<StepsProps> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<StepsProps>>;
     static defaults: () => Partial<StepsProps>;
+    private config;
     private changeIndex;
 }

package/components/steps/index.js

@@ -1,8 +1,10 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { __decorate } from "tslib";
 import { Component } from 'intact-react';
 import template from './index.vdt';
 import { bind } from '../utils';
+import { useConfigContext } from '../config';
 export * from './step';
 var typeDefs = {
   value: Number,
@@ -24,7 +26,17 @@ export var Steps = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Steps, _Component);
 
   function Steps() {
-    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 = Steps.prototype;

package/components/steps/index.vdt.js

@@ -20,9 +20,8 @@ export default function ($props, $blocks, $__proto__) {
       clickable = _this$get.clickable,
       vertical = _this$get.vertical;
 
-  var classNameObj = (_classNameObj = {
-    'k-steps': true
-  }, _classNameObj[className] = className, _classNameObj["k-" + type] = true, _classNameObj['k-clickable'] = clickable, _classNameObj['k-vertical'] = vertical, _classNameObj[makeStepsStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-steps"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + type] = true, _classNameObj[k + "-clickable"] = clickable, _classNameObj[k + "-vertical"] = vertical, _classNameObj[makeStepsStyles(k)] = true, _classNameObj);
   var stepIndex = 0;
   var steps = [];
   eachChildren(children, function (vNode) {

package/components/steps/step.d.ts

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

package/components/steps/step.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-react';
 import template from './step.vdt';
+import { useConfigContext } from '../config';
 var typeDefs = {
   title: String,
   index: Number
@@ -9,7 +11,17 @@ export var Step = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Step, _Component);
 
   function Step() {
-    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 Step;

package/components/steps/step.vdt.js

@@ -4,14 +4,6 @@ import { linkEvent } from 'intact';
 import { getRestProps, addStyle } from '../utils';
 import { context as StepsContext } from './context';
 import { Icon } from '../icon';
-var _$tmp0 = {
-  'className': 'k-icon-close-bold',
-  'color': 'danger'
-};
-var _$tmp1 = {
-  'className': 'k-icon-check-bold',
-  'color': 'primary'
-};
 export default function ($props, $blocks, $__proto__) {
   var _this = this;
 
@@ -26,6 +18,7 @@ export default function ($props, $blocks, $__proto__) {
       className = _this$get.className,
       style = _this$get.style;
 
+  var k = this.config.k;
   return _$cc(StepsContext.Consumer, {
     'children': function children(_ref) {
       var _classNameObj;
@@ -37,18 +30,19 @@ export default function ($props, $blocks, $__proto__) {
       var selected = value === index;
       var error = selected && status === 'error';
       var done = value > index;
-      var classNameObj = (_classNameObj = {
-        'k-step': true,
-        'k-active': selected,
-        'k-done': done,
-        'k-error': error
-      }, _classNameObj[className] = className, _classNameObj);
+      var classNameObj = (_classNameObj = {}, _classNameObj[k + "-step"] = true, _classNameObj[k + "-active"] = selected, _classNameObj[k + "-done"] = done, _classNameObj[k + "-error"] = error, _classNameObj[className] = className, _classNameObj);
       return _$cv('div', _extends({}, getRestProps(_this), {
         'className': _$cn(classNameObj),
         'style': style
-      }), [_$ce(2, 'div', [_$ce(2, 'div', error && type !== 'simple' ? _$cc(Icon, _$tmp0) : done && (type === 'line' || type === 'line-compact') ? _$cc(Icon, _$tmp1) : type !== 'simple' ? _$ce(2, 'span', index + 1, 0) : undefined, 0, 'k-step-mark'), _$ce(2, 'div', [_$ce(2, 'div', title, 0, 'k-step-title'), _$ce(2, 'div', _children, 0, 'k-step-content')], 4, 'k-step-main')], 4, 'k-step-wrapper', {
+      }), [_$ce(2, 'div', [_$ce(2, 'div', error && type !== 'simple' ? _$cc(Icon, {
+        'className': _$cn(k + "-icon-close-bold"),
+        'color': 'danger'
+      }) : done && (type === 'line' || type === 'line-compact') ? _$cc(Icon, {
+        'className': _$cn(k + "-icon-check-bold"),
+        'color': 'primary'
+      }) : type !== 'simple' ? _$ce(2, 'span', index + 1, 0) : undefined, 0, _$cn(k + "-step-mark")), _$ce(2, 'div', [_$ce(2, 'div', title, 0, _$cn(k + "-step-title")), _$ce(2, 'div', _children, 0, _$cn(k + "-step-content"))], 4, _$cn(k + "-step-main"))], 4, _$cn(k + "-step-wrapper"), {
         'ev-click': linkEvent(index, onChange)
-      }), _$ce(2, 'div', null, 1, 'k-step-tail')]);
+      }), _$ce(2, 'div', null, 1, _$cn(k + "-step-tail"))]);
     }
   });
 }

package/components/steps/styles.d.ts

@@ -1,4 +1,4 @@
 import '../../styles/global';
-export declare function makeStepsStyles(): string;
-export declare function makeCommonStyles(): string;
-export declare function makeVerticalStyles(): string;
+export declare function makeStepsStyles(k: string): string;
+export declare function makeCommonStyles(k: string): string;
+export declare function makeVerticalStyles(k: string): string;

package/components/steps/styles.js

@@ -143,37 +143,37 @@ setDefault(function () {
   }).steps;
 });
 var stepStatus = ['done', 'active', 'error'];
-export function makeStepsStyles() {
-  return /*#__PURE__*/css("display:flex;", makeCommonStyles(), ";&.k-default{", makeDefaultStyles(), ";}&.k-line,&.k-line-compact,&.k-simple{", makeLineStyles(), ";}&.k-line-compact{", makeLineCompactStyles(), ";}&.k-simple{", makeSimpleStyles(), ";}&.k-clickable{.k-done{cursor:pointer;.k-step-wrapper:hover .k-step-mark{background:", steps.done.markHoverBgColor, ";}}}", makeVerticalStyles(), ";");
+export function makeStepsStyles(k) {
+  return /*#__PURE__*/css("display:flex;", makeCommonStyles(k), ";&.", k, "-default{", makeDefaultStyles(k), ";}&.", k, "-line,&.", k, "-line-compact,&.", k, "-simple{", makeLineStyles(k), ";}&.", k, "-line-compact{", makeLineCompactStyles(k), ";}&.", k, "-simple{", makeSimpleStyles(k), ";}&.", k, "-clickable{.", k, "-done{cursor:pointer;.", k, "-step-wrapper:hover .", k, "-step-mark{background:", steps.done.markHoverBgColor, ";}}}", makeVerticalStyles(k), ";");
 }
 
-function makeDefaultStyles() {
+function makeDefaultStyles(k) {
   var defaults = steps.default;
-  return /*#__PURE__*/css("text-align:center;height:", defaults.height, ";background:", defaults.bgColor, ";.k-step-wrapper{", center(), ";height:100%;padding:0 ", defaults.padding, ";}.k-step-mark{width:", defaults.markWidth, ";height:", defaults.markWidth, ";margin-right:", steps.gap, ";}.k-step-main{display:flex;overflow:hidden;white-space:nowrap;}.k-step-title{padding-right:", steps.gap, ";}.k-step:last-of-type{.k-step-tail{display:none;}}&:not(.k-vertical){", makeArrow(false), ";}");
+  return /*#__PURE__*/css("text-align:center;height:", defaults.height, ";background:", defaults.bgColor, ";.", k, "-step-wrapper{", center(), ";height:100%;padding:0 ", defaults.padding, ";}.", k, "-step-mark{width:", defaults.markWidth, ";height:", defaults.markWidth, ";margin-right:", steps.gap, ";}.", k, "-step-main{display:flex;overflow:hidden;white-space:nowrap;}.", k, "-step-title{padding-right:", steps.gap, ";}.", k, "-step:last-of-type{.", k, "-step-tail{display:none;}}&:not(.", k, "-vertical){", makeArrow(false, k), ";}");
 }
 
-function makeArrow(isVertical) {
+function makeArrow(isVertical, k) {
   var defaults = steps.default;
   var offset = "calc(-1 * (" + defaults.height + " / 2 + " + steps.gap + "))";
   var size = "calc(" + defaults.height + " / 2 + " + steps.gap + ")";
-  return /*#__PURE__*/css(".k-step-tail{position:absolute;", !isVertical ? "\n                    top: 0;\n                    right: " + offset + ";\n                    width: " + size + ";\n                    height: " + defaults.height + ";\n                " : "\n                    left: 0;\n                    bottom: " + offset + ";\n                    height: " + size + ";\n                    width: " + defaults.height + ";\n                ", " overflow:hidden;z-index:1;&:after,&:before{content:'';border-width:calc(", defaults.height, " / 2 + ", steps.gap, ");border-style:solid;border-color:transparent;position:absolute;", isVertical ? 'left' : 'top', ":calc(-1 * ", steps.gap, ");}&:after{border-", isVertical ? 'top' : 'left', "-color:", defaults.bgColor, ";", isVertical ? 'top' : 'left', ":calc(-1 * ", steps.gap, ");}&:before{border-", isVertical ? 'top' : 'left', "-color:#fff;", isVertical ? 'top' : 'left', ":0;}}.k-step:not(:first-of-type){padding-", isVertical ? 'top' : 'left', ":calc(", defaults.height, " / 2 + ", steps.gap, ");}");
+  return /*#__PURE__*/css(".", k, "-step-tail{position:absolute;", !isVertical ? /*#__PURE__*/css("top:0;right:", offset, ";width:", size, ";height:", defaults.height, ";") : /*#__PURE__*/css("left:0;bottom:", offset, ";height:", size, ";width:", defaults.height, ";"), " overflow:hidden;z-index:1;&:after,&:before{content:'';border-width:calc(", defaults.height, " / 2 + ", steps.gap, ");border-style:solid;border-color:transparent;position:absolute;", isVertical ? 'left' : 'top', ":calc(-1 * ", steps.gap, ");}&:after{border-", isVertical ? 'top' : 'left', "-color:", defaults.bgColor, ";", isVertical ? 'top' : 'left', ":calc(-1 * ", steps.gap, ");}&:before{border-", isVertical ? 'top' : 'left', "-color:#fff;", isVertical ? 'top' : 'left', ":0;}}.", k, "-step:not(:first-of-type){padding-", isVertical ? 'top' : 'left', ":calc(", defaults.height, " / 2 + ", steps.gap, ");}");
 }
 
-function makeLineStyles() {
+function makeLineStyles(k) {
   var line = steps.line;
   var top = "calc(" + line.markWidth + " / 2 - " + line.lineWidth + " / 2)";
-  return /*#__PURE__*/css(".k-step{display:flex;}.k-step-wrapper{display:inline-block;text-align:center;position:relative;width:", line.contentWidth, ";}.k-step:last-of-type{flex:0 0 auto;}.k-step-mark{border:", line.markborder, ";width:", line.markWidth, ";height:", line.markWidth, ";position:relative;z-index:1;&,.k-icon{font-size:", line.markFontSize, ";}}.k-step-main{padding-top:", line.titleGap, ";}.k-step-title{font-size:14px;color:", theme.color.text, ";}.k-step-content{margin-top:", line.descGap, ";color:", theme.color.placeholder, ";}.k-step-wrapper{&:before,&:after{content:'';display:block;height:", line.lineWidth, ";background:", line.lineColor, ";width:50%;position:absolute;top:", top, ";}&:after{right:0;}}.k-step{&:first-of-type .k-step-wrapper:before,&:last-of-type .k-step-wrapper:after{background:transparent;}}.k-step-tail{flex:1;height:", line.lineWidth, ";background:", line.lineColor, ";margin-top:", top, ";}.k-step{&.k-done{.k-step-tail,&:not(:last-of-type) .k-step-wrapper:after,&:not(:first-of-type) .k-step-wrapper:before{background:", theme.color.primary, ";}}&:not(:first-of-type).k-active{.k-step-wrapper:before{background:", theme.color.primary, ";}}&.k-active .k-step-title{color:", theme.color.primary, ";}&.k-error .k-step-title{color:", theme.color.danger, ";}}");
+  return /*#__PURE__*/css(".", k, "-step{display:flex;}.", k, "-step-wrapper{display:inline-block;text-align:center;position:relative;width:", line.contentWidth, ";}.", k, "-step:last-of-type{flex:0 0 auto;}.", k, "-step-mark{border:", line.markborder, ";width:", line.markWidth, ";height:", line.markWidth, ";position:relative;z-index:1;&,.", k, "-icon{font-size:", line.markFontSize, ";}}.", k, "-step-main{padding-top:", line.titleGap, ";}.", k, "-step-title{font-size:14px;color:", theme.color.text, ";}.", k, "-step-content{margin-top:", line.descGap, ";color:", theme.color.placeholder, ";}.", k, "-step-wrapper{&:before,&:after{content:'';display:block;height:", line.lineWidth, ";background:", line.lineColor, ";width:50%;position:absolute;top:", top, ";}&:after{right:0;}}.", k, "-step{&:first-of-type .", k, "-step-wrapper:before,&:last-of-type .", k, "-step-wrapper:after{background:transparent;}}.", k, "-step-tail{flex:1;height:", line.lineWidth, ";background:", line.lineColor, ";margin-top:", top, ";}.", k, "-step{&.", k, "-done{.", k, "-step-tail,&:not(:last-of-type) .", k, "-step-wrapper:after,&:not(:first-of-type) .", k, "-step-wrapper:before{background:", theme.color.primary, ";}}&:not(:first-of-type).", k, "-active{.", k, "-step-wrapper:before{background:", theme.color.primary, ";}}&.", k, "-active .", k, "-step-title{color:", theme.color.primary, ";}&.", k, "-error .", k, "-step-title{color:", theme.color.danger, ";}}");
 }
 
-function makeLineCompactStyles() {
+function makeLineCompactStyles(k) {
   var line = steps.line;
-  return /*#__PURE__*/css(".k-step-wrapper{display:inline-flex;text-align:left;width:auto;&:before,&:after{display:none;}}.k-step-main{flex:1;padding:0 0 0 ", line.titleGap, ";}.k-step-content{margin:0;}.k-step-tail{margin-right:", line.titleGap, ";}.k-step-title{display:flex;align-items:center;height:", line.markWidth, ";&:after{content:'';display:block;flex:1;height:", line.lineWidth, ";background:", line.lineColor, ";margin-left:", line.titleGap, ";}}.k-step:last-of-type .k-step-title:after{display:none;}.k-step{&.k-done{.k-step-title:after{background:", theme.color.primary, ";}}}");
+  return /*#__PURE__*/css(".", k, "-step-wrapper{display:inline-flex;text-align:left;width:auto;&:before,&:after{display:none;}}.", k, "-step-main{flex:1;padding:0 0 0 ", line.titleGap, ";}.", k, "-step-content{margin:0;}.", k, "-step-tail{margin-right:", line.titleGap, ";}.", k, "-step-title{display:flex;align-items:center;height:", line.markWidth, ";&:after{content:'';display:block;flex:1;height:", line.lineWidth, ";background:", line.lineColor, ";margin-left:", line.titleGap, ";}}.", k, "-step:last-of-type .", k, "-step-title:after{display:none;}.", k, "-step{&.", k, "-done{.", k, "-step-title:after{background:", theme.color.primary, ";}}}");
 }
 
-function makeSimpleStyles() {
+function makeSimpleStyles(k) {
   var simple = steps.simple;
   var top = "calc(" + simple.markWidth + " / 2 - " + steps.line.lineWidth + " / 2)";
-  return /*#__PURE__*/css(".k-step-mark{width:", simple.markWidth, ";height:", simple.markWidth, ";background:", simple.markBgColor, ";}.k-step-wrapper{font-size:0;&:before,&:after{top:", top, ";}}.k-step-main{font-size:", theme.default.fontSize, ";}.k-step-tail{margin-top:", top, ";}.k-step{&.k-done{.k-step-mark{background:", simple.doneMarkBgColor, ";}}&.k-error{.k-step-mark{background:", simple.errorMarkBgColor, ";}}}");
+  return /*#__PURE__*/css(".", k, "-step-mark{width:", simple.markWidth, ";height:", simple.markWidth, ";background:", simple.markBgColor, ";}.", k, "-step-wrapper{font-size:0;&:before,&:after{top:", top, ";}}.", k, "-step-main{font-size:", theme.default.fontSize, ";}.", k, "-step-tail{margin-top:", top, ";}.", k, "-step{&.", k, "-done{.", k, "-step-mark{background:", simple.doneMarkBgColor, ";}}&.", k, "-error{.", k, "-step-mark{background:", simple.errorMarkBgColor, ";}}}");
 }
 
 function center(flex) {
@@ -184,13 +184,13 @@ function center(flex) {
   return /*#__PURE__*/css("display:", flex, ";align-items:center;justify-content:center;");
 }
 
-export function makeCommonStyles() {
-  return /*#__PURE__*/css(".k-step{position:relative;flex:1;", _mapInstanceProperty(stepStatus).call(stepStatus, function (status) {
+export function makeCommonStyles(k) {
+  return /*#__PURE__*/css(".", k, "-step{position:relative;flex:1;", _mapInstanceProperty(stepStatus).call(stepStatus, function (status) {
     var styles = steps[status];
-    return /*#__PURE__*/css("&.k-", status, "{.k-step-mark{color:", styles.markColor, ";border-color:", styles.markBorderColor, ";background:", styles.markBgColor, ";}.k-step-main{color:", styles.mainColor, ";}}");
-  }), ";}.k-step-mark{", center('inline-flex'), ";border:", steps.default.markborder, ";border-radius:50%;vertical-align:top;color:", steps.markColor, ";background:", steps.markBgColor, ";}");
+    return /*#__PURE__*/css("&.", k, "-", status, "{.", k, "-step-mark{color:", styles.markColor, ";border-color:", styles.markBorderColor, ";background:", styles.markBgColor, ";}.", k, "-step-main{color:", styles.mainColor, ";}}");
+  }), ";}.", k, "-step-mark{", center('inline-flex'), ";border:", steps.default.markborder, ";border-radius:50%;vertical-align:top;color:", steps.markColor, ";background:", steps.markBgColor, ";}");
 }
-export function makeVerticalStyles() {
+export function makeVerticalStyles(k) {
   var verticalLine = steps.vertical.line;
-  return /*#__PURE__*/css("&.k-vertical{&.k-default{height:auto;width:", steps.default.height, ";writing-mode:vertical-rl;letter-spacing:1px;", makeArrow(true), ";.k-step-wrapper{width:100%;padding:", steps.default.padding, " 0;}.k-step-mark{margin-right:0;margin-bottom:", steps.gap, ";}.k-step-title{padding-right:0;padding-bottom:", steps.gap, ";}}&.k-line,&.k-line-compact,&.k-simple{flex-direction:column;.k-step{flex:none;min-height:", verticalLine.minHeight, ";}.k-step-wrapper{display:flex;width:auto;text-align:left;}.k-step-main{flex:1;padding:0 0 ", verticalLine.padding, " ", verticalLine.padding, ";}.k-step-title{display:flex;align-items:center;height:", steps.line.markWidth, ";&:after{display:none;}}.k-step-wrapper{&:before,&:after{display:none;}}.k-step-tail{position:absolute;left:calc(", steps.line.markWidth, " / 2 - ", steps.line.lineWidth, " / 2);height:100%;width:", steps.line.lineWidth, ";background:", steps.line.lineColor, ";}.k-step:last-of-type{.k-step-tail{display:none;}}}&.k-simple{.k-step-tail{left:calc(", steps.simple.markWidth, " / 2 - ", steps.line.lineWidth, " / 2);}.k-step-title{height:", steps.simple.markWidth, ";margin-bottom:", steps.vertical.simple.titleGap, ";}}}");
+  return /*#__PURE__*/css("&.", k, "-vertical{&.", k, "-default{height:auto;width:", steps.default.height, ";writing-mode:vertical-rl;letter-spacing:1px;", makeArrow(true, k), ";.", k, "-step-wrapper{width:100%;padding:", steps.default.padding, " 0;}.", k, "-step-mark{margin-right:0;margin-bottom:", steps.gap, ";}.", k, "-step-title{padding-right:0;padding-bottom:", steps.gap, ";}}&.", k, "-line,&.", k, "-line-compact,&.", k, "-simple{flex-direction:column;.", k, "-step{flex:none;min-height:", verticalLine.minHeight, ";}.", k, "-step-wrapper{display:flex;width:auto;text-align:left;}.", k, "-step-main{flex:1;padding:0 0 ", verticalLine.padding, " ", verticalLine.padding, ";}.", k, "-step-title{display:flex;align-items:center;height:", steps.line.markWidth, ";&:after{display:none;}}.", k, "-step-wrapper{&:before,&:after{display:none;}}.", k, "-step-tail{position:absolute;left:calc(", steps.line.markWidth, " / 2 - ", steps.line.lineWidth, " / 2);height:100%;width:", steps.line.lineWidth, ";background:", steps.line.lineColor, ";}.", k, "-step:last-of-type{.", k, "-step-tail{display:none;}}}&.", k, "-simple{.", k, "-step-tail{left:calc(", steps.simple.markWidth, " / 2 - ", steps.line.lineWidth, " / 2);}.", k, "-step-title{height:", steps.simple.markWidth, ";margin-bottom:", steps.vertical.simple.titleGap, ";}}}");
 }

package/components/switch/index.d.ts

@@ -28,6 +28,7 @@ export declare class Switch<True = true, False = false> extends Component<Switch
     static events: Events<SwitchEvents>;
     private elementRef;
     private draggable;
+    private config;
     private onClick;
     private onClickOnHandle;
     private onKeypress;

package/components/switch/index.js

@@ -6,6 +6,7 @@ import template from './index.vdt';
 import { sizes } from '../../styles/utils';
 import { bind } from '../utils';
 import { useDraggable } from './useDraggable';
+import { useConfigContext } from '../config';
 var typeDefs = {
   name: String,
   on: String,
@@ -47,6 +48,7 @@ export var Switch = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.elementRef = createRef();
     _this.draggable = useDraggable(_this.elementRef);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/switch/index.vdt.js

@@ -34,9 +34,8 @@ export default function ($props, $blocks, $__proto__) {
       dragging = _this$draggable.dragging,
       barRef = _this$draggable.barRef,
       barWidth = _this$draggable.barWidth;
-  var classNameObj = (_classNameObj = {
-    'k-switch': true
-  }, _classNameObj[className] = className, _classNameObj['k-checked'] = value === trueValue, _classNameObj["k-" + size] = true, _classNameObj['k-disabled'] = disabled, _classNameObj['k-dragging'] = dragging.value, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-switch"] = true, _classNameObj[className] = className, _classNameObj[k + "-checked"] = value === trueValue, _classNameObj[k + "-" + size] = true, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-dragging"] = dragging.value, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var onStyle;
   var offStyle;
   var barStyle;
@@ -109,7 +108,7 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['off'](_$no)), 0, 'k-switch-off', {
+  }, __$blocks['off'](_$no)), 0, _$cn(k + "-switch-off"), {
     'style': offStyle
   }) : undefined, _$ce(2, 'div', [on || $blocks.on ? _$ce(2, 'div', (_$blocks['on'] = function ($super) {
     return on;
@@ -121,12 +120,12 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['on'](_$no)), 0, 'k-switch-on', {
+  }, __$blocks['on'](_$no)), 0, _$cn(k + "-switch-on"), {
     'style': onStyle
-  }) : undefined, _$ce(2, 'div', _$ce(2, 'div', _$ce(2, 'img', null, 1, null, _$tmp0), 2, 'k-switch-handle', {
+  }) : undefined, _$ce(2, 'div', _$ce(2, 'div', _$ce(2, 'img', null, 1, null, _$tmp0), 2, _$cn(k + "-switch-handle"), {
     'ev-click': this.onClickOnHandle,
     'ev-mousedown': start
-  }), 2, 'k-switch-wrapper')], 0, 'k-switch-bar', {
+  }), 2, _$cn(k + "-switch-wrapper"))], 0, _$cn(k + "-switch-bar"), {
     'style': barStyle
   }, null, barRef)]);
 }

package/components/switch/styles.d.ts

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