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

package/components/colorpicker/drag.js

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

@@ -1,9 +1,10 @@
-import { createElementVNode as _$ce } from 'intact-react';
+import { createElementVNode as _$ce, className as _$cn } from 'intact-react';
 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/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/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-react';
 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/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/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/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/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-react';
+import { createElementVNode as _$ce, className as _$cn, createUnknownComponentVNode as _$cc, createTextVNode as _$ct, map as _$ma } from 'intact-react';
 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/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/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/components/config/index.d.ts

@@ -0,0 +1,10 @@
+import { ProviderProps } from '../context';
+export interface ConfigProps {
+    classNamePrefix?: string;
+}
+declare const ConfigProvider: import('intact-react').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/components/config/index.js

@@ -0,0 +1,23 @@
+import { createContext } from '../context';
+import { EMPTY_OBJ } from 'intact-react';
+
+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/components/config/index.spec.d.ts

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

package/components/config/index.spec.js

@@ -0,0 +1,71 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-react';
+import { mount, wait } from '../../test/utils';
+import { ConfigProvider } from '.';
+import { Button, ButtonGroup } from '../button';
+describe('Config', function () {
+  // afterEach(async () => {
+  // unmount();
+  // });
+  it('should change classname prefix', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var Demo, _mount, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                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.ConfigProvider = ConfigProvider;
+                _this.ButtonGroup = ButtonGroup;
+                _this.Button = Button;
+                return _this;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  k: null
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const { ConfigProvider, ButtonGroup, Button } = this;\n                <div>\n                    <ConfigProvider value={{classNamePrefix: this.get('k')}}>\n                        <ButtonGroup>\n                            <Button ev-click={() => this.set('k', 'a')}>change to a</Button>\n                            <Button type=\"primary\" ev-click={() => this.set('k', 'b')}>change to b</Button>\n                        </ButtonGroup>\n                    </ConfigProvider>\n                    <Button>should not change</Button>\n                </div>\n            ";
+            _mount = mount(Demo), instance = _mount[0], element = _mount[1];
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.set('k', 'a');
+            _context2.next = 7;
+            return wait();
+
+          case 7:
+            expect(element.innerHTML).to.matchSnapshot();
+            instance.set('k', 'b');
+            _context2.next = 11;
+            return wait();
+
+          case 11:
+            expect(element.innerHTML).to.matchSnapshot();
+
+          case 12:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee);
+  })));
+});

package/components/context.d.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentConstructor } from 'intact-react';
+import { Component, RefObject, ComponentConstructor } from 'intact-react';
 export interface ProviderProps<T> {
     value?: T;
 }
@@ -10,5 +10,6 @@ declare type ConsumerConstructor<T> = ComponentConstructor<Component<ConsumerPro
 export declare function createContext<T = any>(defaultValue?: T): {
     Provider: ProviderConstructor<T>;
     Consumer: ConsumerConstructor<T>;
+    useContext: () => RefObject<T | undefined>;
 };
 export {};

package/components/context.js

@@ -53,7 +53,7 @@ export function createContext(defaultValue) {
       }
 
       _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context2 = [this]).call(_context2, args)) || this;
-      _this2.ref = inject(injectionKey, null);
+      _this2.ref = inject(injectionKey, createRef(defaultValue));
       return _this2;
     }
 
@@ -61,9 +61,15 @@ export function createContext(defaultValue) {
   }(Component);
 
   Consumer.template = consumerTemplate;
+
+  function useContext() {
+    return inject(injectionKey, createRef(defaultValue));
+  }
+
   return {
     Provider: Provider,
-    Consumer: Consumer
+    Consumer: Consumer,
+    useContext: useContext
   };
 }
 

package/components/copy/index.d.ts

@@ -14,4 +14,5 @@ export declare class Copy extends Component<CopyProps, CopyEvents> {
     static defaults: () => Partial<CopyProps>;
     static events: Events<CopyEvents>;
     private copy;
+    private config;
 }

package/components/copy/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 { useCopy } from './useCopy';
+import { useConfigContext } from '../config';
 var typeDefs = {
   text: String,
   showMessage: Boolean
@@ -32,6 +33,7 @@ export var Copy = /*#__PURE__*/function (_Component) {
 
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.copy = useCopy();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/copy/index.vdt.js

@@ -6,12 +6,6 @@ import { Virtual } from '../virtual';
 import { Transition } from 'intact';
 import { makeStyles } from './styles';
 import { _$ } from '../../i18n';
-var _$tmp0 = {
-  'key': '2',
-  'className': 'k-icon-check',
-  'hoverable': true,
-  'color': 'success'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -26,7 +20,8 @@ export default function ($props, $blocks, $__proto__) {
   var _this$copy = this.copy,
       startCopy = _this$copy.startCopy,
       success = _this$copy.success;
-  var classNameObj = (_classNameObj = {}, _classNameObj["k-copy"] = true, _classNameObj[makeStyles()] = true, _classNameObj[className] = className, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-copy"] = true, _classNameObj[makeStyles(k)] = true, _classNameObj[className] = className, _classNameObj);
   return _$cc(Transition, {
     'name': 'k-fade',
     'children': _$cc(Virtual, _extends({
@@ -35,10 +30,15 @@ export default function ($props, $blocks, $__proto__) {
     }, getRestProps(this), {
       'children': children ? children : !success.value ? _$cc(Icon, {
         'key': '1',
-        'className': 'k-icon-clone',
+        'className': _$cn(k + "-icon-clone"),
         'hoverable': true,
         'title': _$('复制')
-      }, '1') : _$cc(Icon, _$tmp0, '2')
+      }, '1') : _$cc(Icon, {
+        'key': '2',
+        'className': _$cn(k + "-icon-check"),
+        'hoverable': true,
+        'color': 'success'
+      }, '2')
     }))
   });
 }

package/components/copy/styles.d.ts

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

package/components/copy/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: "t3aops",
     styles: "cursor:pointer;vertical-align:middle"

package/components/datepicker/calendar.d.ts

@@ -74,5 +74,6 @@ export declare class DatepickerCalendar extends Component<DatepickerCalendarProp
         }[];
         onClick: (date: Dayjs) => void;
     };
+    private config;
     triggerChange(value: Dayjs): void;
 }

package/components/datepicker/calendar.js

@@ -12,6 +12,7 @@ import { bind } from '../utils';
 import { useYears } from './useYears';
 import { useMonths } from './useMonths';
 import { useStatus } from './useStatus';
+import { useConfigContext } from '../config';
 
 var defaults = function defaults() {
   return {
@@ -39,6 +40,7 @@ export var DatepickerCalendar = /*#__PURE__*/function (_Component) {
     _this.days = useDays(_this.showDate.date, _this.status, _this.datepicker.focusDate.focusDate);
     _this.years = useYears(_this.showDate.date, _this.status, _this.datepicker.focusDate.focusDate);
     _this.months = useMonths(_this.showDate.date, _this.status, _this.datepicker.focusDate.focusDate);
+    _this.config = useConfigContext();
     return _this;
   }