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

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

@@ -25,12 +25,8 @@ export default function ($props, $blocks, $__proto__) {
       rest = _objectWithoutPropertiesLoose(_this$get, _excluded);
 
   var isChecked = this.isChecked();
-  var classNameObj = (_classNameObj = {
-    'k-checkbox': true,
-    'k-disabled': disabled,
-    'k-checked': isChecked,
-    'k-indeterminate': indeterminate
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-checkbox"] = true, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-checked"] = isChecked, _classNameObj[k + "-indeterminate"] = indeterminate, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var events = ['ev-click', 'ev-change', 'ev-mouseenter', 'ev-mouseleave'].reduce(function (memo, name) {
     if (rest[name]) {
       if (name === 'ev-click' || name === 'ev-change') {// do not bind click to label, otherwise it will trigger click event twice
@@ -64,7 +60,7 @@ export default function ($props, $blocks, $__proto__) {
       'disabled': disabled,
       'tabindex': '-1',
       'ref': this.inputRef
-    }, getRestProps(this, rest))), 2, 'k-checkbox-wrapper')
-  }), children ? _$ce(2, 'span', children, 0, 'k-checkbox-text') : undefined]);
+    }, getRestProps(this, rest))), 2, _$cn(k + "-checkbox-wrapper"))
+  }), children ? _$ce(2, 'span', children, 0, _$cn(k + "-checkbox-text")) : undefined]);
 }
 ;

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

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

package/es/components/checkbox/styles.js

@@ -77,6 +77,6 @@ setDefault(function () {
     checkbox: defaults
   }).checkbox;
 });
-export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}}&:hover{.k-checkbox-wrapper{border:", checkbox.hoverBorder, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.k-checkbox-text{margin-left:", checkbox.text.gap, ";flex:0 1 auto;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.k-indeterminate{.k-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;}}}&.k-checked{.k-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.k-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.k-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.disabled.checked.borderColor, ";background:", checkbox.disabled.checked.bgColor, ";}}}");
+export default function makeStyles(k) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.", k, "-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}}&:hover{.", k, "-checkbox-wrapper{border:", checkbox.hoverBorder, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.", k, "-checkbox-text{margin-left:", checkbox.text.gap, ";flex:0 1 auto;}&.", k, "-checked,&.", k, "-indeterminate{.", k, "-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.", k, "-indeterminate{.", k, "-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;}}}&.", k, "-checked{.", k, "-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.", k, "-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.", k, "-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.", k, "-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}&.", k, "-checked,&.", k, "-indeterminate{.", k, "-checkbox-wrapper{border-color:", checkbox.disabled.checked.borderColor, ";background:", checkbox.disabled.checked.bgColor, ";}}}");
 }

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

@@ -19,5 +19,6 @@ export declare class Code extends Component<CodeProps, CodeEvents> {
     static defaults: () => Partial<CodeProps>;
     static events: Events<CodeEvents>;
     private editor;
+    private config;
     getEditor(): editor.IStandaloneCodeEditor | null;
 }

package/es/components/code/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 { useEditor } from './useEditor';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: String,
   language: String,
@@ -39,6 +40,7 @@ export var Code = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.editor = useEditor();
+    _this.config = useConfigContext();
     return _this;
   }
 

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

@@ -21,9 +21,8 @@ export default function ($props, $blocks, $__proto__) {
       className = _this$get.className,
       style = _this$get.style;
 
-  var classNameObj = (_classNameObj = {
-    'k-code': true
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-code"] = true, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
 
   if (width || height) {
     var _style = {};

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

@@ -2,7 +2,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/css';
 import '../../styles/global';
-export function makeStyles() {
+export function makeStyles(k) {
   return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
     name: "1wv4onu",
     styles: "position:relative;height:100%"

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

@@ -14,6 +14,7 @@ export declare class Collapse extends Component<CollapseProps, CollapseEvents> {
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<CollapseProps>>;
     static defaults: () => Partial<CollapseProps>;
+    private config;
     init(): void;
     changeValue(v: string): void;
     private isActive;

package/es/components/collapse/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 { Component, provide } from 'intact';
 import template from './index.vdt';
 import { toggleArray } from '../utils';
 export * from './item';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: Array,
   accordion: Boolean,
@@ -21,7 +23,17 @@ export var Collapse = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Collapse, _Component);
 
   function Collapse() {
-    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 = Collapse.prototype;

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

@@ -18,9 +18,8 @@ export default function ($props, $blocks, $__proto__) {
       arrow = _this$get.arrow,
       noBorder = _this$get.noBorder;
 
-  var classNameObj = (_classNameObj = {
-    'k-collapse': true
-  }, _classNameObj[makeStyles()] = true, _classNameObj[className] = className, _classNameObj['k-left'] = arrow === 'left', _classNameObj['k-border'] = !noBorder, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-collapse"] = true, _classNameObj[makeStyles(k)] = true, _classNameObj[className] = className, _classNameObj[k + "-left"] = arrow === 'left', _classNameObj[k + "-border"] = !noBorder, _classNameObj);
 
   var _children = mapChildren(children, function (vNode, index) {
     if (vNode.tag === CollapseItem) {

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

@@ -15,6 +15,7 @@ export declare class CollapseItem extends Component<CollapseItemProps, CollapseI
     static template: string | import("intact").Template<any>;
     static typeDefs: Required<TypeDefs<CollapseItemProps>>;
     private collapse;
+    private config;
     toggle(): void;
     private onEnter;
     private onAfterLeave;

package/es/components/collapse/item.js

@@ -5,6 +5,7 @@ import { Component, inject } from 'intact';
 import { COLLAPSE } from './index';
 import template from './item.vdt';
 import { bind } from '../utils';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: String,
   title: [String, Object],
@@ -24,6 +25,7 @@ export var CollapseItem = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.collapse = inject(COLLAPSE);
+    _this.config = useConfigContext();
     return _this;
   }
 

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no, createUnknownComponentVNode as _$cc } from 'intact';
 import { Transition } from 'intact';
 import { expandAnimationCallbacks, getRestProps } from '../utils';
-import { kls, makeItemStyles } from './styles';
+import { makeItemStyles } from './styles';
 import { Icon } from '../icon';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
@@ -23,9 +23,8 @@ export default function ($props, $blocks, $__proto__) {
       disabled = _this$get.disabled;
 
   var isActive = this.collapse.isActive(value);
-  var classNameObj = (_classNameObj = {
-    'k-collapse-item': true
-  }, _classNameObj[makeItemStyles()] = true, _classNameObj[className] = className, _classNameObj['k-active'] = isActive, _classNameObj['k-disabled'] = disabled, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-collapse-item"] = true, _classNameObj[makeItemStyles(k)] = true, _classNameObj[className] = className, _classNameObj[k + "-active"] = isActive, _classNameObj[k + "-disabled"] = disabled, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), [_$ce(2, 'div', [(_$blocks['title'] = function ($super) {
@@ -39,14 +38,13 @@ export default function ($props, $blocks, $__proto__) {
 
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['title'](_$no)), _$cc(Icon, {
-    'className': _$cn((_$cn2 = {}, _$cn2[kls('arrow')] = true, _$cn2['k-icon-right'] = true, _$cn2)),
+    'className': _$cn((_$cn2 = {}, _$cn2[k + "-collapse-arrow"] = true, _$cn2[k + "-icon-right"] = true, _$cn2)),
     'hoverable': !disabled
-  })], 0, _$cn(kls('title')), {
+  })], 0, _$cn(k + "-collapse-title"), {
     'ev-click': this.toggle
   }), _$cc(Transition, _extends({
     'show': isActive
   }, expandAnimationCallbacks, {
-    'className': _$cn(kls('content')),
     'onEnter': function onEnter(el) {
       expandAnimationCallbacks.onEnter(el);
 
@@ -57,7 +55,7 @@ export default function ($props, $blocks, $__proto__) {
 
       _this.onAfterLeave();
     },
-    'children': _$ce(2, 'div', children, 0, _$cn(kls('wrapper')))
+    'children': _$ce(2, 'div', children, 0, _$cn(k + "-collapse-wrapper"))
   }))]);
 }
 ;

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

@@ -1,4 +1,3 @@
 import '../../styles/global';
-export declare const kls: (className: string) => string;
-export declare function makeStyles(): string;
-export declare function makeItemStyles(): string;
+export declare function makeStyles(k: string): string;
+export declare function makeItemStyles(k: string): string;

package/es/components/collapse/styles.js

@@ -2,9 +2,6 @@ import { deepDefaults } from '../../styles/utils';
 import { theme, setDefault } from '../../styles/theme';
 import { css } from '@emotion/css';
 import '../../styles/global';
-export var kls = function kls(className) {
-  return "k-collapse-" + className;
-};
 var defaults = {
   get transition() {
     return theme.transition.large;
@@ -21,8 +18,7 @@ var defaults = {
 
   item: {
     borderBottom: '1px solid #e5e5e5',
-    titleHeight: '40px',
-    contentPadding: '0 16px 16px'
+    titleHeight: '40px'
   }
 };
 var collapse;
@@ -31,10 +27,10 @@ setDefault(function () {
     collapse: defaults
   }).collapse;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.k-left{.", kls('arrow'), "{float:left;margin-right:", collapse.titleMarginRight, ";}}&.k-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
+export function makeStyles(k) {
+  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.", k, "-left{.", k, "-collapse-arrow{float:left;margin-right:", collapse.titleMarginRight, ";}}&.", k, "-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
 }
-export function makeItemStyles() {
+export function makeItemStyles(k) {
   var collapseItem = collapse.item;
-  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}.", kls('title'), "{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";}.", kls('arrow'), "{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";}&:not(.k-disabled){.", kls('title'), "{&:hover{color:", theme.color.primary, ";}}}.", kls('content'), "{overflow:hidden;.", kls('wrapper'), "{overflow:hidden;padding:", collapseItem.contentPadding, ";}}&.k-active{.", kls('arrow'), "{transform:rotate(90deg);}}&.k-disabled{color:", theme.color.disabledBorder, ";.", kls('title'), "{cursor:not-allowed;}}");
+  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}.", k, "-collapse-title{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";}.", k, "-collapse-arrow{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";}&:not(.", k, "-disabled){.", k, "-collapse-title{&:hover{color:", theme.color.primary, ";}}}&.", k, "-active{.", k, "-collapse-arrow{transform:rotate(90deg);}}&.", k, "-disabled{color:", theme.color.disabledBorder, ";.", k, "-collapse-title{cursor:not-allowed;}}");
 }

package/es/components/colorpicker/drag.d.ts

@@ -11,5 +11,6 @@ interface ColorpickerDragEvents {
 export declare class ColorpickerDrag extends Component<ColorpickerDragProps, ColorpickerDragEvents> {
     static template: string | import("intact").Template<any>;
     private drag;
+    private config;
 }
 export {};

package/es/components/colorpicker/drag.js

@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component } from 'intact';
 import template from './drag.vdt';
 import { useDrag } from './useDrag';
+import { useConfigContext } from '../config';
 export var ColorpickerDrag = /*#__PURE__*/function (_Component) {
   _inheritsLoose(ColorpickerDrag, _Component);
 
@@ -17,6 +18,7 @@ export var ColorpickerDrag = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.drag = useDrag();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/colorpicker/drag.vdt.js

@@ -1,9 +1,10 @@
-import { createElementVNode as _$ce } from 'intact';
+import { createElementVNode as _$ce, className as _$cn } from 'intact';
 export default function ($props, $blocks, $__proto__) {
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-  return _$ce(2, 'div', this.get('children'), 0, 'k-colorpicker-drag k-colorpicker-text', {
+  var k = this.config.k;
+  return _$ce(2, 'div', this.get('children'), 0, _$cn(k + "-colorpicker-drag " + k + "-colorpicker-text"), {
     'ev-mousedown': this.drag.start
   });
 }

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

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

package/es/components/colorpicker/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 { Component } from 'intact';
 import template from './index.vdt';
 import { sizes } from '../../styles/utils';
 import { Dropdown } from '../dropdown';
+import { useConfigContext } from '../config';
 var typeDefs = {
   value: {
     type: String,
@@ -30,7 +32,17 @@ export var Colorpicker = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Colorpicker, _Component);
 
   function Colorpicker() {
-    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 Colorpicker;

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

@@ -22,9 +22,8 @@ export default function ($props, $blocks, $__proto__) {
       container = _this$get.container,
       position = _this$get.position;
 
-  var classNameObj = (_classNameObj = {
-    'k-colorpicker': true
-  }, _classNameObj[className] = className, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-disabled'] = disabled, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-colorpicker"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[k + "-disabled"] = disabled, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), _$cc(Dropdown, {
@@ -32,12 +31,12 @@ export default function ($props, $blocks, $__proto__) {
     'trigger': 'click',
     'disabled': disabled,
     'container': container,
-    'children': [_$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-colorpicker-inner', {
+    'children': [_$ce(2, 'div', _$ce(2, 'div', null, 1, _$cn(k + "-colorpicker-inner"), {
       'style': {
         backgroundColor: value
       }
-    }), 2, 'k-colorpicker-color'), _$cc(DropdownMenu, {
-      'className': 'k-colorpicker-content',
+    }), 2, _$cn(k + "-colorpicker-color")), _$cc(DropdownMenu, {
+      'className': _$cn(k + "-colorpicker-content"),
       'children': _$cc(ColorpickerPanel, {
         'presets': presets,
         'ev-$model:value': function ev$modelValue($v) {

package/es/components/colorpicker/panel.d.ts

@@ -8,4 +8,5 @@ export declare class ColorpickerPanel extends Component<ColorpickerPanelProps> {
     private value;
     private pointer;
     private input;
+    private config;
 }

package/es/components/colorpicker/panel.js

@@ -5,6 +5,7 @@ import template from './panel.vdt';
 import { useValue } from './useValue';
 import { usePointer } from './usePointer';
 import { useInput } from './useInput';
+import { useConfigContext } from '../config';
 export var ColorpickerPanel = /*#__PURE__*/function (_Component) {
   _inheritsLoose(ColorpickerPanel, _Component);
 
@@ -21,6 +22,7 @@ export var ColorpickerPanel = /*#__PURE__*/function (_Component) {
     _this.value = useValue();
     _this.pointer = usePointer(_this.value.hsv, _this.value.format);
     _this.input = useInput(_this.value.hsv, _this.value.rgb, _this.value.hsl);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/colorpicker/panel.vdt.js

@@ -1,5 +1,5 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
-import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, className as _$cn, createTextVNode as _$ct, map as _$ma } from 'intact';
+import { createElementVNode as _$ce, className as _$cn, createUnknownComponentVNode as _$cc, createTextVNode as _$ct, map as _$ma } from 'intact';
 import { Row, Col } from '../grid';
 import { Slider } from '../slider';
 import { Input } from '../input';
@@ -20,9 +20,8 @@ export default function ($props, $blocks, $__proto__) {
       value = _this$get.value,
       presets = _this$get.presets;
 
-  var classNameObj = (_classNameObj = {
-    'k-colorpicker-panel': true
-  }, _classNameObj[makePanelStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-colorpicker-panel"] = true, _classNameObj[makePanelStyles(k)] = true, _classNameObj);
   var _this$value = this.value,
       hex = _this$value.hex.value,
       hsv = _this$value.hsv.value,
@@ -44,18 +43,18 @@ export default function ($props, $blocks, $__proto__) {
       dragging = _this$input.dragging,
       setInputValue = _this$input.setInputValue;
   var alpha = Math.round(rgb.a * 100);
-  return _$ce(2, 'div', [_$ce(2, 'div', [_$ce(2, 'div', null, 1, 'k-colorpicker-white'), _$ce(2, 'div', null, 1, 'k-colorpicker-black'), _$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-colorpicker-circle'), 2, 'k-colorpicker-pointer', {
+  return _$ce(2, 'div', [_$ce(2, 'div', [_$ce(2, 'div', null, 1, _$cn(k + "-colorpicker-white")), _$ce(2, 'div', null, 1, _$cn(k + "-colorpicker-black")), _$ce(2, 'div', _$ce(2, 'div', null, 1, _$cn(k + "-colorpicker-circle")), 2, _$cn(k + "-colorpicker-pointer"), {
     'style': {
       left: hsv.s * 100 + "%",
       top: -hsv.v * 100 + 100 + "%"
     }
-  })], 4, 'k-colorpicker-saturation', {
+  })], 4, _$cn(k + "-colorpicker-saturation"), {
     'style': {
       backgroundColor: "hsl(" + hsv.h + ", 100%, 50%)"
     },
     'ev-mousedown': start
   }, null, areaRef), _$ce(2, 'div', [_$ce(2, 'div', [_$cc(Slider, {
-    'className': 'k-colorpicker-hue',
+    'className': _$cn(k + "-colorpicker-hue"),
     'showInput': false,
     'showEnd': false,
     'step': 0,
@@ -64,9 +63,7 @@ export default function ($props, $blocks, $__proto__) {
     'ev-$change:value': changeHue,
     'animate': !dragging.value
   }), _$cc(Slider, {
-    'className': _$cn((_$cn2 = {
-      "k-colorpicker-alpha k-colorpicker-alpha-bg": true
-    }, _$cn2[makeAlphaBgColor(rgb)] = true, _$cn2)),
+    'className': _$cn((_$cn2 = {}, _$cn2[k + "-colorpicker-alpha " + k + "-colorpicker-alpha-bg"] = true, _$cn2[makeAlphaBgColor(rgb, k)] = true, _$cn2)),
     'showInput': false,
     'showEnd': false,
     'step': 0,
@@ -74,11 +71,11 @@ export default function ($props, $blocks, $__proto__) {
     'value': rgb.a,
     'ev-$change:value': changeAlpha,
     'animate': !dragging.value
-  })], 4, 'k-colorpicker-sliders'), _$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-colorpicker-color', {
+  })], 4, _$cn(k + "-colorpicker-sliders")), _$ce(2, 'div', _$ce(2, 'div', null, 1, _$cn(k + "-colorpicker-color"), {
     'style': {
       backgroundColor: value
     }
-  }), 2, 'k-colorpicker-color-wrapper k-colorpicker-alpha-bg')], 4, 'k-colorpicker-controls'), _$cc(Row, {
+  }), 2, _$cn(k + "-colorpicker-color-wrapper " + k + "-colorpicker-alpha-bg"))], 4, _$cn(k + "-colorpicker-controls")), _$cc(Row, {
     'gutter': '6',
     'children': [_$cc(Col, {
       'span': '8',
@@ -86,10 +83,10 @@ export default function ($props, $blocks, $__proto__) {
         'fluid': true,
         'size': 'small',
         'frozenOnInput': true,
-        'className': 'k-colorpicker-input',
+        'className': _$cn(k + "-colorpicker-input"),
         'value': hex,
         'ev-input': onInputHex
-      }), _$ce(2, 'div', 'Hex', 16, 'k-colorpicker-text')]
+      }), _$ce(2, 'div', 'Hex', 16, _$cn(k + "-colorpicker-text"))]
     }), function () {
       var params;
       var color;
@@ -121,7 +118,7 @@ export default function ($props, $blocks, $__proto__) {
             'fluid': true,
             'size': 'small',
             'value': v,
-            'className': 'k-colorpicker-input',
+            'className': _$cn(k + "-colorpicker-input"),
             'ev-input': setInputValue.bind(null, value, realMax)
           }), _$cc(Drag, {
             'value': v,
@@ -140,7 +137,7 @@ export default function ($props, $blocks, $__proto__) {
         'fluid': true,
         'size': 'small',
         'value': alpha,
-        'className': 'k-colorpicker-input',
+        'className': _$cn(k + "-colorpicker-input"),
         'ev-input': setInputValue.bind(null, 'a', 100)
       }), _$cc(Drag, {
         'value': alpha,
@@ -152,13 +149,13 @@ export default function ($props, $blocks, $__proto__) {
       })]
     })]
   }), presets && presets.length ? _$ce(2, 'div', _$ma(presets, function ($value, $key) {
-    return _$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-colorpicker-preset-color', {
+    return _$ce(2, 'div', _$ce(2, 'div', null, 1, _$cn(k + "-colorpicker-preset-color"), {
       'style': {
         backgroundColor: $value
       }
-    }), 2, 'k-colorpicker-preset-color-wrapper k-colorpicker-alpha-bg', {
+    }), 2, _$cn(k + "-colorpicker-preset-color-wrapper " + k + "-colorpicker-alpha-bg"), {
       'ev-click': linkEvent($value, setValue)
     });
-  }, $this), 4, 'k-colorpicker-presets') : undefined], 0, _$cn(classNameObj));
+  }, $this), 4, _$cn(k + "-colorpicker-presets")) : undefined], 0, _$cn(classNameObj));
 }
 ;

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

@@ -1,5 +1,5 @@
 import '../../styles/global';
 import { ColorFormats } from 'tinycolor2';
-export declare function makeStyles(): string;
-export declare function makePanelStyles(): string;
-export declare function makeAlphaBgColor({ r, g, b }: ColorFormats.RGBA): string;
+export declare function makeStyles(k: string): string;
+export declare function makePanelStyles(k: string): string;
+export declare function makeAlphaBgColor({ r, g, b }: ColorFormats.RGBA, k: string): string;

package/es/components/colorpicker/styles.js

@@ -116,18 +116,18 @@ setDefault(function () {
   }).colorpicker;
 });
 var _sizes = ['large', 'small', 'mini'];
-export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;.k-colorpicker-color{height:", colorpicker.height, ";width:", colorpicker.width, ";border:", colorpicker.border, ";cursor:", colorpicker.cursor, ";border-radius:", colorpicker.borderRadius, ";background:", colorpicker.bgColor, ";padding:", colorpicker.padding, ";}.k-colorpicker-inner{border-radius:", colorpicker.innerBorderRadius, ";height:100%;}", _mapInstanceProperty(_sizes).call(_sizes, function (size) {
+export function makeStyles(k) {
+  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;.", k, "-colorpicker-color{height:", colorpicker.height, ";width:", colorpicker.width, ";border:", colorpicker.border, ";cursor:", colorpicker.cursor, ";border-radius:", colorpicker.borderRadius, ";background:", colorpicker.bgColor, ";padding:", colorpicker.padding, ";}.", k, "-colorpicker-inner{border-radius:", colorpicker.innerBorderRadius, ";height:100%;}", _mapInstanceProperty(_sizes).call(_sizes, function (size) {
     var styles = colorpicker[size];
-    return /*#__PURE__*/css("&.k-", size, "{.k-colorpicker-color{height:", styles.height, ";width:", styles.width, ";", styles.padding && "padding: " + styles.padding, ";}}");
-  }), "&.k-disabled{.k-colorpicker-color{background:", colorpicker.disabled.bgColor, ";border-color:", colorpicker.disabled.borderColor, ";cursor:", colorpicker.disabled.cursor, ";}}");
+    return /*#__PURE__*/css("&.", k, "-", size, "{.", k, "-colorpicker-color{height:", styles.height, ";width:", styles.width, ";", styles.padding && "padding: " + styles.padding, ";}}");
+  }), "&.", k, "-disabled{.", k, "-colorpicker-color{background:", colorpicker.disabled.bgColor, ";border-color:", colorpicker.disabled.borderColor, ";cursor:", colorpicker.disabled.cursor, ";}}");
 }
-export function makePanelStyles() {
-  return /*#__PURE__*/css("padding:", colorpicker.panel.padding, ";width:", colorpicker.panel.width, ";.k-colorpicker-saturation{height:", colorpicker.panel.saturationHeight, ";position:relative;overflow:hidden;user-select:none;}.k-colorpicker-white,.k-colorpicker-black{position:absolute;width:100%;height:100%;}.k-colorpicker-white{background:linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));}.k-colorpicker-black{background:linear-gradient(0, #000, rgba(0, 0, 0, 0));}.k-colorpicker-pointer{position:absolute;}.k-colorpicker-circle{width:", colorpicker.panel.circle.width, ";height:", colorpicker.panel.circle.width, ";box-shadow:", colorpicker.panel.circle.boxShadow, ";border-radius:50%;transform:translate(-50%, -50%);}.k-colorpicker-controls{display:flex;margin-top:", colorpicker.panel.gutter, ";}.k-colorpicker-sliders{flex:1;.k-slider{margin-bottom:", colorpicker.panel.gutter, ";}.k-slider-track-wrapper,.k-slider-track{height:", colorpicker.slider.height, ";}.k-slider-track-wrapper{cursor:", colorpicker.slider.cursor, ";}.k-slider-track{border-radius:", colorpicker.slider.borderRadius, ";margin:0 calc(", colorpicker.slider.thumb.width, " / 2 + 1px);background-color:transparent;}.k-slider-bar{background:transparent;}.k-slider-thumb{height:", colorpicker.slider.thumb.height, ";width:", colorpicker.slider.thumb.width, ";border:", colorpicker.slider.thumb.border, ";border-radius:", colorpicker.slider.thumb.borderRadius, ";box-shadow:", colorpicker.slider.thumb.boxShadow, ";&:focus,&:hover{transform:", colorpicker.slider.thumb.hover.transform, ";cursor:", colorpicker.slider.thumb.hover.cursor, ";background-color:", colorpicker.slider.thumb.hover.bgColor, ";}}}.k-colorpicker-hue{.k-slider-track-wrapper{background:linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);}}.k-colorpicker-alpha{background-size:contain;}.k-colorpicker-alpha-bg{background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC\");}.k-colorpicker-color-wrapper{width:", colorpicker.color.width, ";height:", colorpicker.color.height, ";border-radius:", colorpicker.color.borderRadius, ";margin-left:", colorpicker.panel.gutter, ";overflow:hidden;}.k-colorpicker-color{height:100%;box-shadow:", colorpicker.color.boxShadow, ";}.k-colorpicker-input.k-small{.k-input-inner{height:", colorpicker.input.height, ";line-height:", colorpicker.input.height, ";padding:", colorpicker.input.padding, ";font-size:", colorpicker.panel.fontSize, ";}}.k-colorpicker-text{text-align:center;font-size:", colorpicker.panel.fontSize, ";padding:", colorpicker.input.textPadding, ";}.k-colorpicker-presets{border-top:", colorpicker.presets.delimiter, ";margin:0 -", colorpicker.panel.padding, ";overflow:hidden;}.k-colorpicker-preset-color-wrapper{float:left;border-radius:", colorpicker.presets.borderRadius, ";cursor:pointer;overflow:hidden;margin:", colorpicker.panel.padding, " 0 0 ", colorpicker.panel.padding, ";}.k-colorpicker-preset-color{width:", colorpicker.presets.width, ";height:", colorpicker.presets.height, ";box-shadow:", colorpicker.presets.boxShadow, ";}.k-colorpicker-drag{cursor:ew-resize;user-select:none;}");
+export function makePanelStyles(k) {
+  return /*#__PURE__*/css("padding:", colorpicker.panel.padding, ";width:", colorpicker.panel.width, ";.", k, "-colorpicker-saturation{height:", colorpicker.panel.saturationHeight, ";position:relative;overflow:hidden;user-select:none;}.", k, "-colorpicker-white,.", k, "-colorpicker-black{position:absolute;width:100%;height:100%;}.", k, "-colorpicker-white{background:linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));}.", k, "-colorpicker-black{background:linear-gradient(0, #000, rgba(0, 0, 0, 0));}.", k, "-colorpicker-pointer{position:absolute;}.", k, "-colorpicker-circle{width:", colorpicker.panel.circle.width, ";height:", colorpicker.panel.circle.width, ";box-shadow:", colorpicker.panel.circle.boxShadow, ";border-radius:50%;transform:translate(-50%, -50%);}.", k, "-colorpicker-controls{display:flex;margin-top:", colorpicker.panel.gutter, ";}.", k, "-colorpicker-sliders{flex:1;.", k, "-slider{margin-bottom:", colorpicker.panel.gutter, ";}.", k, "-slider-tra.", k, "-wrapper,.", k, "-slider-track{height:", colorpicker.slider.height, ";}.", k, "-slider-tra.", k, "-wrapper{cursor:", colorpicker.slider.cursor, ";}.", k, "-slider-track{border-radius:", colorpicker.slider.borderRadius, ";margin:0 calc(", colorpicker.slider.thumb.width, " / 2 + 1px);background-color:transparent;}.", k, "-slider-bar{background:transparent;}.", k, "-slider-thumb{height:", colorpicker.slider.thumb.height, ";width:", colorpicker.slider.thumb.width, ";border:", colorpicker.slider.thumb.border, ";border-radius:", colorpicker.slider.thumb.borderRadius, ";box-shadow:", colorpicker.slider.thumb.boxShadow, ";&:focus,&:hover{transform:", colorpicker.slider.thumb.hover.transform, ";cursor:", colorpicker.slider.thumb.hover.cursor, ";background-color:", colorpicker.slider.thumb.hover.bgColor, ";}}}.", k, "-colorpicker-hue{.", k, "-slider-tra.", k, "-wrapper{background:linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);}}.", k, "-colorpicker-alpha{background-size:contain;}.", k, "-colorpicker-alpha-bg{background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC\");}.", k, "-colorpicker-color-wrapper{width:", colorpicker.color.width, ";height:", colorpicker.color.height, ";border-radius:", colorpicker.color.borderRadius, ";margin-left:", colorpicker.panel.gutter, ";overflow:hidden;}.", k, "-colorpicker-color{height:100%;box-shadow:", colorpicker.color.boxShadow, ";}.", k, "-colorpicker-input.", k, "-small{.", k, "-input-inner{height:", colorpicker.input.height, ";line-height:", colorpicker.input.height, ";padding:", colorpicker.input.padding, ";font-size:", colorpicker.panel.fontSize, ";}}.", k, "-colorpicker-text{text-align:center;font-size:", colorpicker.panel.fontSize, ";padding:", colorpicker.input.textPadding, ";}.", k, "-colorpicker-presets{border-top:", colorpicker.presets.delimiter, ";margin:0 -", colorpicker.panel.padding, ";overflow:hidden;}.", k, "-colorpicker-preset-color-wrapper{float:left;border-radius:", colorpicker.presets.borderRadius, ";cursor:pointer;overflow:hidden;margin:", colorpicker.panel.padding, " 0 0 ", colorpicker.panel.padding, ";}.", k, "-colorpicker-preset-color{width:", colorpicker.presets.width, ";height:", colorpicker.presets.height, ";box-shadow:", colorpicker.presets.boxShadow, ";}.", k, "-colorpicker-drag{cursor:ew-resize;user-select:none;}");
 }
-export function makeAlphaBgColor(_ref) {
+export function makeAlphaBgColor(_ref, k) {
   var r = _ref.r,
       g = _ref.g,
       b = _ref.b;
-  return /*#__PURE__*/css(".k-slider-track-wrapper{background:linear-gradient(to right, rgba(", r, ", ", g, ", ", b, ", 0) 0%, rgb(", r, ", ", g, ", ", b, ") 100%);}");
+  return /*#__PURE__*/css(".", k, "-slider-tra.", k, "-wrapper{background:linear-gradient(to right, rgba(", r, ", ", g, ", ", b, ", 0) 0%, rgb(", r, ", ", g, ", ", b, ") 100%);}");
 }

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

@@ -0,0 +1,10 @@
+import { ProviderProps } from '../context';
+export interface ConfigProps {
+    classNamePrefix?: string;
+}
+declare const ConfigProvider: import("intact").ComponentConstructor<import("intact").Component<ProviderProps<ConfigProps>, {}, {}, {}>>, ConfigConsumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<ConfigProps>, {}, {}, {}>>;
+declare function useConfigContext(): {
+    cls: (name: string) => string;
+    readonly k: string;
+};
+export { ConfigProvider, ConfigConsumer, useConfigContext, };

package/es/components/config/index.js

@@ -0,0 +1,23 @@
+import { createContext } from '../context';
+import { EMPTY_OBJ } from 'intact';
+
+var _createContext = createContext(EMPTY_OBJ),
+    ConfigProvider = _createContext.Provider,
+    ConfigConsumer = _createContext.Consumer,
+    useContext = _createContext.useContext;
+
+function useConfigContext() {
+  var config = useContext();
+  return {
+    cls: function cls(name) {
+      return (config.value.classNamePrefix || 'k') + "-" + name;
+    },
+
+    get k() {
+      return config.value.classNamePrefix || 'k';
+    }
+
+  };
+}
+
+export { ConfigProvider, ConfigConsumer, useConfigContext };

package/es/components/config/index.spec.d.ts

@@ -0,0 +1 @@
+export {};