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

package/components/tag/tags.vdt.js

@@ -8,7 +8,7 @@ import { Tooltip } from '../tooltip';
 import { Tags } from './tags';
 import { Virtual } from '../virtual';
 export default function ($props, $blocks, $__proto__) {
-  var _classNameObj;
+  var _classNameObj, _$cn2;
 
   $blocks || ($blocks = {});
   $props || ($props = {});
@@ -23,11 +23,8 @@ export default function ($props, $blocks, $__proto__) {
       border = _this$get.border,
       draggable = _this$get.draggable;
 
-  var classNameObj = (_classNameObj = {
-    'k-tags': true,
-    'k-nowrap': nowrap,
-    'k-draggable': draggable
-  }, _classNameObj[makeTagsStyles()] = true, _classNameObj[className] = className, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-tags"] = true, _classNameObj[k + "-nowrap"] = nowrap, _classNameObj[k + "-draggable"] = draggable, _classNameObj[makeTagsStyles(k)] = true, _classNameObj[className] = className, _classNameObj);
   var _this$nowrap = this.nowrap,
       containerRef = _this$nowrap.containerRef,
       children = _this$nowrap.children,
@@ -49,13 +46,10 @@ export default function ($props, $blocks, $__proto__) {
     'key': '$tooltip',
     'hoverable': true,
     'theme': 'light',
-    'className': 'k-tags-tooltip',
+    'className': _$cn(k + "-tags-tooltip"),
     'children': _$cc(Tag, {
       'key': '$more',
-      'className': _$cn({
-        "k-tags-more": true,
-        'c-hidden': !hiddenChildren.value.length
-      }),
+      'className': _$cn((_$cn2 = {}, _$cn2[k + "-tags-more"] = true, _$cn2['c-hidden'] = !hiddenChildren.value.length, _$cn2)),
       'size': size,
       'border': border,
       'children': [_$ct('\n            +'), hiddenChildren.value.length]

package/components/timeline/item.d.ts

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

package/components/timeline/item.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 './item.vdt';
 import { sizes } from '../../styles/utils';
 import { types } from './styles';
+import { useConfigContext } from '../config';
 var typeDefs = {
   type: types,
   size: sizes
@@ -19,7 +21,17 @@ export var TimelineItem = /*#__PURE__*/function (_Component) {
   _inheritsLoose(TimelineItem, _Component);
 
   function TimelineItem() {
-    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 TimelineItem;

package/components/timeline/item.vdt.js

@@ -17,13 +17,12 @@ export default function ($props, $blocks, $__proto__) {
       type = _this$get.type,
       size = _this$get.size;
 
-  var classNameObj = (_classNameObj = {
-    'k-timeline-item': true
-  }, _classNameObj[className] = className, _classNameObj["k-" + type] = true, _classNameObj["k-" + size] = size !== 'default', _classNameObj[makeItemStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-timeline-item"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + type] = true, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[makeItemStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), [_$ce(2, 'div', [_$ce(2, 'div', (_$blocks['dot'] = function ($super) {
-    return _$ce(2, 'div', null, 1, 'k-timeline-circle');
+    return _$ce(2, 'div', null, 1, _$cn(k + "-timeline-circle"));
   }, __$blocks['dot'] = function ($super, data) {
     var block = $blocks['dot'];
 
@@ -32,6 +31,6 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['dot'](_$no)), 0, 'k-timeline-dot'), _$ce(2, 'div', null, 1, 'k-timeline-line')], 4, 'k-timeline-indicator'), _$ce(2, 'div', children, 0, 'k-timeline-content')]);
+  }, __$blocks['dot'](_$no)), 0, _$cn(k + "-timeline-dot")), _$ce(2, 'div', null, 1, _$cn(k + "-timeline-line"))], 4, _$cn(k + "-timeline-indicator")), _$ce(2, 'div', children, 0, _$cn(k + "-timeline-content"))]);
 }
 ;

package/components/timeline/styles.d.ts

@@ -2,6 +2,6 @@ import '../../styles/global';
 declare type ValueOf<T extends readonly any[]> = T[number];
 export declare type Types = ValueOf<typeof types>;
 export declare const types: readonly ["primary", "warning", "danger", "success"];
-export declare function makeStyles(): string;
-export declare function makeItemStyles(): string;
+export declare function makeStyles(k: string): string;
+export declare function makeItemStyles(k: string): string;
 export {};

package/components/timeline/styles.js

@@ -48,18 +48,18 @@ setDefault(function () {
     timeline: defaults
   }).timeline;
 });
-export function makeStyles() {
+export function makeStyles(k) {
   return /*#__PURE__*/css("font-size:", timeline.fontSize, ";padding-top:calc(", theme.lineHeight, "em / 2);");
 }
-export function makeItemStyles() {
-  return /*#__PURE__*/css("position:relative;padding:", timeline.padding, ";.k-timeline-indicator{width:", timeline.indicator.width, ";position:absolute;left:0;top:0;height:100%;text-align:center;}.k-timeline-dot{position:relative;z-index:1;transform:translateY(-50%);}.k-timeline-circle{position:relative;background:", theme.color.primary, ";border-radius:50%;left:50%;}.k-timeline-line{position:absolute;height:100%;border-left:", timeline.lineBorder, ";top:0;left:50%;}.k-timeline-content{position:relative;top:calc(-0.5 * ", theme.lineHeight, "em);}&:last-of-type{.k-timeline-line{display:none;}}", _mapInstanceProperty(types).call(types, function (type) {
+export function makeItemStyles(k) {
+  return /*#__PURE__*/css("position:relative;padding:", timeline.padding, ";.", k, "-timeline-indicator{width:", timeline.indicator.width, ";position:absolute;left:0;top:0;height:100%;text-align:center;}.", k, "-timeline-dot{position:relative;z-index:1;transform:translateY(-50%);}.", k, "-timeline-circle{position:relative;background:", theme.color.primary, ";border-radius:50%;left:50%;}.", k, "-timeline-line{position:absolute;height:100%;border-left:", timeline.lineBorder, ";top:0;left:50%;}.", k, "-timeline-content{position:relative;top:calc(-0.5 * ", theme.lineHeight, "em);}&:last-of-type{.", k, "-timeline-line{display:none;}}", _mapInstanceProperty(types).call(types, function (type) {
     var typeStyles = timeline[type];
-    return /*#__PURE__*/css("&.k-", type, "{.k-timeline-indicator{color:", typeStyles.color, ";}.k-timeline-circle{background:", typeStyles.color, ";}}");
+    return /*#__PURE__*/css("&.", k, "-", type, "{.", k, "-timeline-indicator{color:", typeStyles.color, ";}.", k, "-timeline-circle{background:", typeStyles.color, ";}}");
   }), _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = timeline[size];
-    var sizeClassName = /*#__PURE__*/css(".k-timeline-circle{width:", styles.width, ";height:", styles.width, ";margin-left:calc(-0.5 * ", styles.width, ");}");
+    var sizeClassName = /*#__PURE__*/css(".", k, "-timeline-circle{width:", styles.width, ";height:", styles.width, ";margin-left:calc(-0.5 * ", styles.width, ");}");
     if (size === 'default') return sizeClassName;
-    return /*#__PURE__*/css("&.k-", size, "{", sizeClassName, ";}");
+    return /*#__PURE__*/css("&.", k, "-", size, "{", sizeClassName, ";}");
   }), ";");
 }
 ;

package/components/timeline/timeline.d.ts

@@ -3,4 +3,5 @@ export interface TimelineProps {
 }
 export declare class Timeline extends Component<TimelineProps> {
     static template: string | import("intact").Template<any>;
+    private config;
 }

package/components/timeline/timeline.js

@@ -1,11 +1,23 @@
 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 './timeline.vdt';
+import { useConfigContext } from '../config';
 export var Timeline = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Timeline, _Component);
 
   function Timeline() {
-    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 Timeline;

package/components/timeline/timeline.vdt.js

@@ -13,9 +13,8 @@ export default function ($props, $blocks, $__proto__) {
       className = _this$get.className,
       children = _this$get.children;
 
-  var classNameObj = (_classNameObj = {
-    'k-timeline': true
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-timeline"] = true, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), children);

package/components/timepicker/index.d.ts

@@ -1,9 +1,10 @@
 import { Component } from 'intact-react';
 import { TimepickerProps, TimepickerEvents, TimepickerBlocks } from './constants';
+import { PanelPicker } from './panelPicker';
 import { SelectPicker } from './selectPicker';
 export type { TimepickerProps, TimepickerEvents, TimepickerBlocks };
 export declare class Timepicker<Multipe extends boolean = false, Range extends boolean = false> extends Component<TimepickerProps<Multipe, Range>, TimepickerEvents, TimepickerBlocks<Range>> {
     static $doubleVNodes: boolean;
-    static template(this: Timepicker): import("intact").VNode<typeof SelectPicker>;
+    static template(this: Timepicker): import("intact").VNode<typeof SelectPicker> | import("intact").VNode<typeof PanelPicker>;
     static typeDefs: Required<import("intact").TypeDefs<TimepickerProps<boolean, boolean>>>;
 }

package/components/timepicker/panelPicker.vdt.js

@@ -1,4 +1,4 @@
-import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, className as _$cn, createTextVNode as _$ct } from 'intact-react';
+import { createElementVNode as _$ce, className as _$cn, createUnknownComponentVNode as _$cc, superCall as _$su, extend as _$ex, EMPTY_OBJ as _$em, createTextVNode as _$ct } from 'intact-react';
 import { Icon } from '../icon';
 import { DropdownMenu } from '../dropdown';
 import { makePanelStyles } from './styles';
@@ -8,12 +8,6 @@ import { Button } from '../button';
 import { PanelFlags } from '../datepicker/usePanel';
 import { last } from '../datepicker/helpers';
 import { ScrollSelect } from '../scrollSelect';
-var _$tmp0 = {
-  'className': 'k-timepicker'
-};
-var _$tmp1 = {
-  'className': 'k-icon-time'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -33,10 +27,8 @@ export default function ($props, $blocks, $__proto__) {
       onChangeTimeByStep = _this$value.onChangeTimeByStep,
       getTimeValue = _this$value.getTimeValue;
   var lastValue = last(value);
-  var classNameObj = (_classNameObj = {
-    'k-time-content': true,
-    'k-range': range
-  }, _classNameObj[className] = className, _classNameObj[makePanelStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-time-content"] = true, _classNameObj[k + "-range"] = range, _classNameObj[className] = className, _classNameObj[makePanelStyles(k)] = true, _classNameObj);
   var options = this.step.options.value;
   var _this$disabled = this.disabled,
       isDisabledTime = _this$disabled.isDisabledTime,
@@ -48,7 +40,7 @@ export default function ($props, $blocks, $__proto__) {
 
   var generatePanel = function generatePanel(flag) {
     var timeValue = getTimeValue(flag);
-    return _$ce(2, 'div', [range ? _$ce(2, 'div', flag === PanelFlags.Start ? _$('开始时间') : _$('结束时间'), 0, 'k-timepicker-title') : undefined, !options ? _$cc(DatepickerTime, {
+    return _$ce(2, 'div', [range ? _$ce(2, 'div', flag === PanelFlags.Start ? _$('开始时间') : _$('结束时间'), 0, _$cn(k + "-timepicker-title")) : undefined, !options ? _$cc(DatepickerTime, {
       'value': timeValue,
       'ev-$change:value': function ev$changeValue(v) {
         return onChangeTime(v, flag);
@@ -65,23 +57,25 @@ export default function ($props, $blocks, $__proto__) {
       'disable': function disable(v) {
         return isDisabledTimeByStep(v, flag);
       }
-    }), 2, 'k-datepicker-time')], 0, 'k-datepicker-calendar-wrapper');
+    }), 2, _$cn(k + "-datepicker-time"))], 0, _$cn(k + "-datepicker-calendar-wrapper"));
   };
 
-  return _$su.call($this, _$tmp0, function ($blocks) {
+  return _$su.call($this, {
+    'className': _$cn(k + "-timepicker")
+  }, function ($blocks) {
     var _$blocks = {},
         __$blocks = _$ex({}, $blocks);
 
     return (_$blocks['base-menu'] = function ($super) {
       return _$cc(DropdownMenu, {
         'className': _$cn(classNameObj),
-        'children': _$ce(2, 'div', [_$ce(2, 'div', [generatePanel(PanelFlags.Start), _$ct('\n                    '), range ? generatePanel(PanelFlags.End) : null], 0, 'k-datepicker-calendars'), _$ce(2, 'div', _$cc(Button, {
+        'children': _$ce(2, 'div', [_$ce(2, 'div', [generatePanel(PanelFlags.Start), _$ct('\n                    '), range ? generatePanel(PanelFlags.End) : null], 0, _$cn(k + "-datepicker-calendars")), _$ce(2, 'div', _$cc(Button, {
           'type': 'primary',
           'size': 'small',
           'disabled': isDisabledConfirm(),
           'ev-click': onConfirm,
           'children': _$('确定')
-        }), 2, 'k-datepicker-footer')], 4, 'k-datepicker-wrapper')
+        }), 2, _$cn(k + "-datepicker-footer"))], 4, _$cn(k + "-datepicker-wrapper"))
       });
     }, __$blocks['base-menu'] = function ($super, data) {
       var block = $blocks['base-menu'];
@@ -92,7 +86,9 @@ export default function ($props, $blocks, $__proto__) {
 
       return block ? block.call($this, callBlock, data) : callBlock();
     }), (_$blocks['suffix'] = function ($super) {
-      return _$cc(Icon, _$tmp1);
+      return _$cc(Icon, {
+        'className': _$cn(k + "-icon-time")
+      });
     }, __$blocks['suffix'] = function ($super, data) {
       var block = $blocks['suffix'];
 

package/components/timepicker/selectPicker.d.ts

@@ -24,4 +24,5 @@ export declare class SelectPicker extends Component<TimepickerProps, TimepickerE
             label: string;
         }[] | null>;
     };
+    private config;
 }

package/components/timepicker/selectPicker.js

@@ -6,6 +6,7 @@ import template from './selectPicker.vdt';
 import { useFormats } from './useFormats';
 import { useDisabled } from '../datepicker/useDisabled';
 import { useStep } from './useStep';
+import { useConfigContext } from '../config';
 export var SelectPicker = /*#__PURE__*/function (_Component) {
   _inheritsLoose(SelectPicker, _Component);
 
@@ -22,6 +23,7 @@ export var SelectPicker = /*#__PURE__*/function (_Component) {
     _this.formats = useFormats();
     _this.disabled = useDisabled(_this.formats);
     _this.step = useStep(_this.disabled, _this.formats);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/timepicker/selectPicker.vdt.js

@@ -5,9 +5,6 @@ import { createUnknownComponentVNode as _$cc, className as _$cn, map as _$ma, ex
 import { Select, Option } from '../select';
 import { Icon } from '../icon';
 import { _$ } from '../../i18n';
-var _$tmp0 = {
-  'className': 'k-icon-time'
-};
 export default function ($props, $blocks, $__proto__) {
   $blocks || ($blocks = {});
   $props || ($props = {});
@@ -20,6 +17,7 @@ export default function ($props, $blocks, $__proto__) {
       rest = _objectWithoutPropertiesLoose(_this$get, _excluded);
 
   var options = this.step.options.value;
+  var k = this.config.k;
   return _$cc(Select, _extends({}, rest, {
     'placeholder': placeholder || _$('请选择时间'),
     'filterable': true,
@@ -35,7 +33,9 @@ export default function ($props, $blocks, $__proto__) {
           __$blocks = _$ex({}, $blocks);
 
       return (_$blocks['suffix'] = function ($super) {
-        return _$cc(Icon, _$tmp0);
+        return _$cc(Icon, {
+          'className': _$cn(k + "-icon-time")
+        });
       }, __$blocks['suffix'] = function ($super, data) {
         var block = $blocks['suffix'];
 

package/components/timepicker/styles.d.ts

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

package/components/timepicker/styles.js

@@ -24,6 +24,6 @@ setDefault(function () {
     timepicker: defaults
   }).timepicker;
 });
-export function makePanelStyles() {
-  return cx(makePanelStylesBase(), /*#__PURE__*/css("&.k-time-content{.k-datepicker-time{padding:", timepicker.padding, ";}.k-scroll-select{height:", timepicker.scrollHeight, ";}}&.k-range{.k-datepicker-time{width:auto;border:", timepicker.border, ";}.k-scroll-select{height:", timepicker.range.scrollHeight, ";}.k-datepicker-calendar-wrapper{padding:", timepicker.range.padding, ";width:", timepicker.range.width, ";border:none;}.k-timepicker-title{text-align:center;margin-bottom:", timepicker.range.titleGap, ";}}"));
+export function makePanelStyles(k) {
+  return cx(makePanelStylesBase(k), /*#__PURE__*/css("&.", k, "-time-content{.", k, "-datepicker-time{padding:", timepicker.padding, ";}.", k, "-scroll-select{height:", timepicker.scrollHeight, ";}}&.", k, "-range{.", k, "-datepicker-time{width:auto;border:", timepicker.border, ";}.", k, "-scroll-select{height:", timepicker.range.scrollHeight, ";}.", k, "-datepicker-calendar-wrapper{padding:", timepicker.range.padding, ";width:", timepicker.range.width, ";border:none;}.", k, "-timepicker-title{text-align:center;margin-bottom:", timepicker.range.titleGap, ";}}"));
 }

package/components/tip/index.vdt.js

@@ -17,9 +17,8 @@ export default function ($props, $blocks, $__proto__) {
       type = _this$get.type,
       disabled = _this$get.disabled;
 
-  var classNameObj = (_classNameObj = {
-    'k-tip': true
-  }, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-tip"] = true, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$su.call($this, {
     'className': _$cn(classNameObj),
     'name': 'k-fade'
@@ -38,7 +37,7 @@ export default function ($props, $blocks, $__proto__) {
         };
 
         return block ? block.call($this, callBlock, data) : callBlock();
-      }, __$blocks['title'](_$no)), 0, 'k-tip-title') : undefined, children], 0, 'k-tip-wrapper');
+      }, __$blocks['title'](_$no)), 0, _$cn(k + "-tip-title")) : undefined, children], 0, _$cn(k + "-tip-wrapper"));
     }, __$blocks['body'] = function ($super, data) {
       var block = $blocks['body'];
 
@@ -52,10 +51,10 @@ export default function ($props, $blocks, $__proto__) {
         'type': !$blocks.close ? 'none' : 'link',
         'icon': !$blocks.close,
         'ev-click': this.onClose,
-        'className': 'k-tip-close',
+        'className': _$cn(k + "-tip-close"),
         'children': (_$blocks['close'] = function ($super) {
           return _$cc(Icon, {
-            'className': 'k-icon-close',
+            'className': _$cn(k + "-icon-close"),
             'hoverable': !disabled
           });
         }, __$blocks['close'] = function ($super, data) {

package/components/tip/styles.d.ts

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

package/components/tip/styles.js

@@ -24,6 +24,6 @@ setDefault(function () {
     tip: defaults
   }).tip;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css("&.k-tip{display:flex;height:auto;padding:0;color:", tip.color, "!important;align-items:flex-start;}.k-tip-wrapper{flex:1;padding:", tip.padding, ";}.k-tip-title{font-size:", tip.title.fontSize, ";margin-bottom:", tip.title.gap, ";font-weight:", tip.title.fontWeight, ";}&.k-fade-leave-active{position:relative;}.k-tip-close:hover{background:none;}");
+export function makeStyles(k) {
+  return /*#__PURE__*/css("&.", k, "-tip{display:flex;height:auto;padding:0;color:", tip.color, "!important;align-items:flex-start;}.", k, "-tip-wrapper{flex:1;padding:", tip.padding, ";}.", k, "-tip-title{font-size:", tip.title.fontSize, ";margin-bottom:", tip.title.gap, ";font-weight:", tip.title.fontWeight, ";}&.", k, "-fade-leave-active{position:relative;}.", k, "-tip-close:hover{background:none;}");
 }

package/components/tooltip/content.vdt.js

@@ -29,15 +29,12 @@ export default function ($props, $blocks, $__proto__) {
   var _this$arrow = this.arrow,
       arrowRef = _this$arrow.arrowRef,
       arrowType = _this$arrow.arrowType;
-  var classNameObj = (_classNameObj = {
-    'k-tooltip-content': true,
-    'k-hoverable': hoverable || trigger === 'click',
-    'k-always': always
-  }, _classNameObj["k-" + theme] = true, _classNameObj["k-" + size] = size !== 'default', _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj[$props.className] = $props.className, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-tooltip-content"] = true, _classNameObj[k + "-hoverable"] = hoverable || trigger === 'click', _classNameObj[k + "-always"] = always, _classNameObj[k + "-" + theme] = true, _classNameObj[k + "-" + size] = size !== 'default', _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj[$props.className] = $props.className, _classNameObj);
   return _$su.call($this, {
     'value': !!value && !this.isEmptyChildren,
     'transition': {
-      name: 'k-fade',
+      name: k + "-fade",
       onEnter: this.onEnter,
       onAfterLeave: this.onAfterLeave,
       onLeaveCancelled: this.onAfterLeave
@@ -79,9 +76,7 @@ export default function ($props, $blocks, $__proto__) {
         };
 
         return block ? block.call($this, callBlock, data) : callBlock();
-      }, __$blocks['footer'](_$no)), 0, 'k-tooltip-footer', null, 'tooltip-footer') : undefined, showArrow ? _$ce(2, 'i', null, 1, _$cn((_$cn2 = {
-        "k-tooltip-arrow": true
-      }, _$cn2["k-" + arrowType.value] = arrowType.value, _$cn2)), null, 'tooltip-arrow', arrowRef) : undefined];
+      }, __$blocks['footer'](_$no)), 0, _$cn(k + "-tooltip-footer"), null, 'tooltip-footer') : undefined, showArrow ? _$ce(2, 'i', null, 1, _$cn((_$cn2 = {}, _$cn2[k + "-tooltip-arrow"] = true, _$cn2[k + "-" + arrowType.value] = arrowType.value, _$cn2)), null, 'tooltip-arrow', arrowRef) : undefined];
     }, __$blocks['children'] = function ($super, data) {
       var block = $blocks['children'];
 

package/components/tooltip/styles.d.ts

@@ -23,5 +23,5 @@ declare const defaults: {
 export declare let tooltip: typeof defaults;
 export declare type Theme = 'dark' | 'light';
 export declare const themes: Theme[];
-export default function makeStyles(): string;
+export default function makeStyles(k: string): string;
 export {};

package/components/tooltip/styles.js

@@ -56,11 +56,11 @@ var directionMap = {
   left: 'right',
   right: 'left'
 };
-export default function makeStyles() {
+export default function makeStyles(k) {
   var arrowLong = tooltip.arrow.width;
-  var arrowShort = "calc(" + arrowLong + " - 1px)"; // use &.k-tooltip-content to override css in dropdown menu
+  var arrowShort = "calc(" + arrowLong + " - 1px)"; // use &.${k}-tooltip-content to override css in dropdown menu
 
-  return /*#__PURE__*/css("&.k-tooltip-content{max-width:", tooltip.maxWidth, ";min-width:0;padding:", tooltip.padding, ";line-height:", tooltip.lineHeight, ";word-wrap:break-word;pointer-events:none;box-shadow:", tooltip.boxShadow, ";&.k-hoverable,&.k-always{pointer-events:all;}.k-tooltip-arrow{pointer-events:none;&:before,&{position:absolute;display:block;border-style:solid;border-color:transparent;}&:before{content:' ';}&.k-top,&.k-bottom{&:before,&{border-width:", arrowLong, " ", arrowShort, ";}&:before{left:calc(-1 * ", arrowShort, ");}}&.k-top{top:calc(-2 * ", arrowLong, ");&:before{top:calc(-", arrowLong, " + 1px);}}&.k-bottom{bottom:calc(-2 * ", arrowLong, ");&:before{bottom:calc(-", arrowLong, " + 1px);}}&.k-left,&.k-right{&:before,&{border-width:", arrowShort, " ", arrowLong, ";}&:before{top:calc(-1 * ", arrowShort, ");}}&.k-left{left:calc(-2 * ", arrowLong, ");&:before{left:calc(-", arrowLong, " + 1px);}}&.k-right{right:calc(-2 * ", arrowLong, ");&:before{right:calc(-", arrowLong, " + 1px);}}}", _mapInstanceProperty(themes).call(themes, function (theme) {
+  return /*#__PURE__*/css("&.", k, "-tooltip-content{max-width:", tooltip.maxWidth, ";min-width:0;padding:", tooltip.padding, ";line-height:", tooltip.lineHeight, ";word-wrap:bre.", k, "-word;pointer-events:none;box-shadow:", tooltip.boxShadow, ";&.", k, "-hoverable,&.", k, "-always{pointer-events:all;}.", k, "-tooltip-arrow{pointer-events:none;&:before,&{position:absolute;display:block;border-style:solid;border-color:transparent;}&:before{content:' ';}&.", k, "-top,&.", k, "-bottom{&:before,&{border-width:", arrowLong, " ", arrowShort, ";}&:before{left:calc(-1 * ", arrowShort, ");}}&.", k, "-top{top:calc(-2 * ", arrowLong, ");&:before{top:calc(-", arrowLong, " + 1px);}}&.", k, "-bottom{bottom:calc(-2 * ", arrowLong, ");&:before{bottom:calc(-", arrowLong, " + 1px);}}&.", k, "-left,&.", k, "-right{&:before,&{border-width:", arrowShort, " ", arrowLong, ";}&:before{top:calc(-1 * ", arrowShort, ");}}&.", k, "-left{left:calc(-2 * ", arrowLong, ");&:before{left:calc(-", arrowLong, " + 1px);}}&.", k, "-right{right:calc(-2 * ", arrowLong, ");&:before{right:calc(-", arrowLong, " + 1px);}}}", _mapInstanceProperty(themes).call(themes, function (theme) {
     var _context;
 
     var borderColor;
@@ -77,9 +77,9 @@ export default function makeStyles() {
       color = tooltip.color;
     }
 
-    return /*#__PURE__*/css("&.k-", theme, "{background:", bgColor, ";color:", color, ";.k-tooltip-arrow{", _mapInstanceProperty(_context = _Object$keys(directionMap)).call(_context, function (direction) {
+    return /*#__PURE__*/css("&.", k, "-", theme, "{background:", bgColor, ";color:", color, ";.", k, "-tooltip-arrow{", _mapInstanceProperty(_context = _Object$keys(directionMap)).call(_context, function (direction) {
       var borderDirection = directionMap[direction];
-      return /*#__PURE__*/css("&.k-", direction, "{border-", borderDirection, "-color:", borderColor, ";&:before{border-", borderDirection, "-color:", bgColor, ";}}");
+      return /*#__PURE__*/css("&.", k, "-", direction, "{border-", borderDirection, "-color:", borderColor, ";&:before{border-", borderDirection, "-color:", bgColor, ";}}");
     }), ";}}");
-  }), ".k-tooltip-footer{padding-top:", tooltip.confirm.gaps, ";.k-btn:not(:first-of-type){margin-left:", tooltip.confirm.gaps, ";}}&.k-small{padding:", tooltip.smallPadding, ";}}");
+  }), ".", k, "-tooltip-footer{padding-top:", tooltip.confirm.gaps, ";.", k, "-btn:not(:first-of-type){margin-left:", tooltip.confirm.gaps, ";}}&.", k, "-small{padding:", tooltip.smallPadding, ";}}");
 }

package/components/transfer/index.d.ts

@@ -43,6 +43,7 @@ export declare class Transfer<K extends string = 'key', L extends string = 'labe
     private transfer;
     private filter;
     private check;
+    private config;
     getData(): any[];
     getCheckedData(model: Model): any[];
 }

package/components/transfer/index.js

@@ -7,6 +7,7 @@ import { _$ } from '../../i18n';
 import { useTransfer } from './useTransfer';
 import { useFilter } from './useFilter';
 import { useCheck } from './useCheck';
+import { useConfigContext } from '../config';
 var typeDefs = {
   data: Array,
   keyName: String,
@@ -59,6 +60,7 @@ export var Transfer = /*#__PURE__*/function (_Component) {
     _this.transfer = useTransfer();
     _this.filter = useFilter(_this.transfer.rightData);
     _this.check = useCheck(_filterInstanceProperty(_this));
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/transfer/index.vdt.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
-import { createElementVNode as _$ce, createTextVNode as _$ct, createUnknownComponentVNode as _$cc, noop as _$no, extend as _$ex, EMPTY_OBJ as _$em, map as _$ma, className as _$cn, createVNode as _$cv } from 'intact-react';
+import { createElementVNode as _$ce, createTextVNode as _$ct, className as _$cn, createUnknownComponentVNode as _$cc, noop as _$no, extend as _$ex, EMPTY_OBJ as _$em, map as _$ma, createVNode as _$cv } from 'intact-react';
 import { linkEvent, Transition, TransitionGroup } from 'intact';
 import { getRestProps } from '../utils';
 import { makeStyles } from './styles';
@@ -9,16 +9,6 @@ import { Checkbox } from '../checkbox';
 import { Button } from '../button';
 import { Tree } from '../tree';
 import { Icon } from '../icon';
-var _$tmp0 = {
-  'className': 'k-icon-search',
-  'size': 'small'
-};
-var _$tmp1 = {
-  'className': 'k-transfer-icon k-icon-left'
-};
-var _$tmp2 = {
-  'className': 'k-transfer-icon k-icon-right'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -50,16 +40,15 @@ export default function ($props, $blocks, $__proto__) {
       toggleCheckAll = _this$check.toggleCheckAll,
       onCheckboxChange = _this$check.onCheckboxChange,
       isIndeterminate = _this$check.isIndeterminate;
-  var classNameObj = (_classNameObj = {
-    'k-transfer': true
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-transfer"] = true, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
 
   var Panel = function Panel(model) {
     var title = _this.get(model + "Title");
 
     var data = getShowedData(model);
     return _$ce(2, 'div', [_$ce(2, 'div', (_$blocks['header'] = function ($super) {
-      return [_$ce(2, 'div', [this.get(model + "CheckedKeys.length"), _$ct(' /\n                    '), data.length], 0, 'k-transfer-count'), _$cc(Checkbox, {
+      return [_$ce(2, 'div', [this.get(model + "CheckedKeys.length"), _$ct(' /\n                    '), data.length], 0, _$cn(k + "-transfer-count")), _$cc(Checkbox, {
         'className': 'c-ellipsis',
         'value': isCheckAll(model),
         'indeterminate': isIndeterminate(model),
@@ -74,7 +63,7 @@ export default function ($props, $blocks, $__proto__) {
       };
 
       return block ? block.call($this, callBlock, data) : callBlock();
-    }, __$blocks['header'](_$no, model)), 0, 'k-transfer-title'), filterable ? (_$blocks['filter'] = function ($super) {
+    }, __$blocks['header'](_$no, model)), 0, _$cn(k + "-transfer-title")), filterable ? (_$blocks['filter'] = function ($super) {
       return _$cc(Input, {
         'placeholder': placeholder,
         'clearable': true,
@@ -84,7 +73,10 @@ export default function ($props, $blocks, $__proto__) {
               __$blocks = _$ex({}, $blocks);
 
           return (_$blocks['prefix'] = function ($super) {
-            return _$cc(Icon, _$tmp0);
+            return _$cc(Icon, {
+              'className': _$cn(k + "-icon-search"),
+              'size': 'small'
+            });
           }, __$blocks['prefix'] = function ($super, data) {
             var block = $blocks['prefix'];
 
@@ -112,6 +104,8 @@ export default function ($props, $blocks, $__proto__) {
       return _$cc(TransitionGroup, {
         'name': 'k-fade',
         'children': _$ma(data, function ($value, $key) {
+          var _$cn2;
+
           return _$ce(2, 'div', _$cc(Checkbox, {
             'name': model,
             'trueValue': $value[keyName],
@@ -132,10 +126,7 @@ export default function ($props, $blocks, $__proto__) {
               $this.set(model + "CheckedKeys", $v);
             },
             'value': $this.get(model + "CheckedKeys")
-          }), 2, _$cn({
-            "k-transfer-item": true,
-            "k-disabled": $value.disabled
-          }), null, $value[keyName] || $value[labelName] || $value);
+          }), 2, _$cn((_$cn2 = {}, _$cn2[k + "-transfer-item"] = true, _$cn2[k + "-disabled"] = $value.disabled, _$cn2)), null, $value[keyName] || $value[labelName] || $value);
         }, $this)
       });
     }, __$blocks['list'] = function ($super, data) {
@@ -146,7 +137,7 @@ export default function ($props, $blocks, $__proto__) {
       };
 
       return block ? block.call($this, callBlock, data) : callBlock();
-    }, __$blocks['list'](_$no, model)), 0, 'k-transfer-list')], 0, 'k-transfer-panel');
+    }, __$blocks['list'](_$no, model)), 0, _$cn(k + "-transfer-list"))], 0, _$cn(k + "-transfer-panel"));
   };
 
   return _$cv('div', _extends({
@@ -158,7 +149,9 @@ export default function ($props, $blocks, $__proto__) {
     'ev-click': remove,
     'type': 'primary',
     'size': 'large',
-    'children': _$cc(Icon, _$tmp1)
+    'children': _$cc(Icon, {
+      'className': _$cn(k + "-transfer-icon " + k + "-icon-left")
+    })
   }), _$cc(Button, {
     'circle': true,
     'icon': true,
@@ -166,7 +159,9 @@ export default function ($props, $blocks, $__proto__) {
     'ev-click': add,
     'type': 'primary',
     'size': 'large',
-    'children': _$cc(Icon, _$tmp2)
-  })], 4, 'k-transfer-arrows'), Panel('right')]);
+    'children': _$cc(Icon, {
+      'className': _$cn(k + "-transfer-icon " + k + "-icon-right")
+    })
+  })], 4, _$cn(k + "-transfer-arrows")), Panel('right')]);
 }
 ;

package/components/transfer/styles.d.ts

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