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

package/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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';
+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';
 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/es/components/transfer/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/transfer/styles.js

@@ -62,6 +62,6 @@ setDefault(function () {
     transfer: defaults
   }).transfer;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", transfer.fontSize, ";.k-transfer-panel,.k-transfer-arrows{display:inline-block;vertical-align:middle;}.k-transfer-panel{width:", transfer.panel.width, ";border:", transfer.panel.border, ";border-radius:", transfer.panel.borderRadius, ";height:", transfer.panel.height, ";display:inline-flex;flex-direction:column;overflow:auto;}.k-transfer-title{line-height:", transfer.title.lineHeight, ";background:", transfer.title.bgColor, ";padding:", transfer.title.padding, ";.k-checkbox{color:", transfer.title.color, ";font-size:", transfer.title.fontSize, ";}}.k-transfer-count{float:right;margin-left:", transfer.title.countGap, ";}.k-transfer-list{overflow:auto;position:relative;flex:1;}.k-transfer-item{color:", transfer.item.color, ";background:", transfer.item.bgColor, ";user-select:none;width:100%;&:not(.k-disabled):hover{background:", transfer.item.hoverBgColor, ";color:", transfer.item.hoverColor, ";p{color:", transfer.item.hoverColor, ";}}.k-checkbox{padding:", transfer.item.padding, ";display:flex;}p{margin:0;color:", transfer.item.descColor, ";}&.k-disabled{p{color:", theme.color.disabled, ";}}}.k-input{width:auto;margin:", transfer.searchGap, ";}.k-transfer-arrows{.k-btn{display:flex;margin:", transfer.arrow.gap, ";}}");
+export function makeStyles(k) {
+  return /*#__PURE__*/css("font-size:", transfer.fontSize, ";.", k, "-transfer-panel,.", k, "-transfer-arrows{display:inline-block;vertical-align:middle;}.", k, "-transfer-panel{width:", transfer.panel.width, ";border:", transfer.panel.border, ";border-radius:", transfer.panel.borderRadius, ";height:", transfer.panel.height, ";display:inline-flex;flex-direction:column;overflow:auto;}.", k, "-transfer-title{line-height:", transfer.title.lineHeight, ";background:", transfer.title.bgColor, ";padding:", transfer.title.padding, ";.", k, "-checkbox{color:", transfer.title.color, ";font-size:", transfer.title.fontSize, ";}}.", k, "-transfer-count{float:right;margin-left:", transfer.title.countGap, ";}.", k, "-transfer-list{overflow:auto;position:relative;flex:1;}.", k, "-transfer-item{color:", transfer.item.color, ";background:", transfer.item.bgColor, ";user-select:none;width:100%;&:not(.", k, "-disabled):hover{background:", transfer.item.hoverBgColor, ";color:", transfer.item.hoverColor, ";p{color:", transfer.item.hoverColor, ";}}.", k, "-checkbox{padding:", transfer.item.padding, ";display:flex;}p{margin:0;color:", transfer.item.descColor, ";}&.", k, "-disabled{p{color:", theme.color.disabled, ";}}}.", k, "-input{width:auto;margin:", transfer.searchGap, ";}.", k, "-transfer-arrows{.", k, "-btn{display:flex;margin:", transfer.arrow.gap, ";}}");
 }

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

@@ -48,6 +48,7 @@ export declare class Tree<K extends Key = Key> extends Component<TreeProps<K>, T
     private filter;
     private draggable;
     private transition;
+    private config;
     getCheckedData(leafOnly?: boolean): DataItem<Key>[];
     getSelectedData(): DataItem<Key>[];
     expand(key: K): void;

package/es/components/tree/index.js

@@ -12,6 +12,7 @@ import { useSelected } from './useSelected';
 import { useFilter } from './useFilter';
 import { useDraggable, Mode } from './useDraggable';
 import { useTransitionEvent } from './useTransitionEvent';
+import { useConfigContext } from '../config';
 var typeDefs = {
   data: Array,
   filter: Function,
@@ -63,6 +64,7 @@ export var Tree = /*#__PURE__*/function (_Component) {
     _this.filter = useFilter(_this.nodes.getNodes, _this.expanded.get);
     _this.draggable = useDraggable();
     _this.transition = useTransitionEvent();
+    _this.config = useConfigContext();
     return _this;
   }
 

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

@@ -1,20 +1,16 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
-import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, noop as _$no, className as _$cn, createVNode as _$cv } from 'intact';
+import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, className as _$cn, noop as _$no, createVNode as _$cv } from 'intact';
 import { Transition, TransitionGroup, linkEvent } from 'intact';
 import { Checkbox } from '../checkbox';
 import { getRestProps } from '../utils';
 import { makeStyles } from './styles';
 import { Icon } from '../icon';
 import { Mode } from './useDraggable';
-var _$tmp0 = {
-  'className': 'k-tree-icon ion-load-c',
-  'rotate': true
-};
 export default function ($props, $blocks, $__proto__) {
   var _this = this,
-      _classNameObj;
+      _classNameObj2;
 
   $blocks || ($blocks = {});
   $props || ($props = {});
@@ -41,59 +37,56 @@ export default function ($props, $blocks, $__proto__) {
       draggingKey = _this$draggable.draggingKey,
       overKey = _this$draggable.overKey,
       mode = _this$draggable.mode;
+  var k = this.config.k;
 
   var treeNodes = function treeNodes(nodes) {
     return _mapInstanceProperty(nodes).call(nodes, function (node, index) {
+      var _classNameObj, _labelClassNameObj;
+
       if (!_filterInstanceProperty(node)) return;
       var key = node.key;
       var expanded = expandedKeys.has(key);
       var data = node.data;
       var disabled = data.disabled;
       var selected = selectable && selectedKeys.has(key);
-      var classNameObj = {
-        'k-tree-node': true,
-        'k-expanded': expanded,
-        'k-disabled': disabled,
-        'k-selected': selected,
-        'k-dragging': key === draggingKey.value
-      };
-      var labelClassNameObj = {
-        'k-tree-label': true,
-        'k-tree-leaf': !node.children
-      };
+      var classNameObj = (_classNameObj = {}, _classNameObj[k + "-tree-node"] = true, _classNameObj[k + "-expanded"] = expanded, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-selected"] = selected, _classNameObj[k + "-dragging"] = key === draggingKey.value, _classNameObj);
+      var labelClassNameObj = (_labelClassNameObj = {}, _labelClassNameObj[k + "-tree-label"] = true, _labelClassNameObj[k + "-tree-leaf"] = !node.children, _labelClassNameObj);
 
       if (key === overKey.value) {
         switch (mode.value) {
           case Mode.Before:
-            labelClassNameObj['k-before'] = true;
+            labelClassNameObj[[k + "-before"]] = true;
             break;
 
           case Mode.After:
-            labelClassNameObj['k-after'] = true;
+            labelClassNameObj[[k + "-after"]] = true;
             break;
 
           case Mode.Inner:
-            labelClassNameObj['k-inner'] = true;
+            labelClassNameObj[[k + "-inner"]] = true;
             break;
         }
       }
 
       return _$ce(2, 'div', [_$ce(2, 'div', [node.children && node.loaded !== false ? _$cc(Icon, {
-        'className': 'k-tree-icon ion-android-arrow-dropdown',
+        'className': _$cn(k + "-tree-icon ion-android-arrow-dropdown"),
         'hoverable': true,
         'ev-click': function evClick(e) {
           // it may be in dropdownMenu, e.g. TreeSelect
           e._ignore = true;
           toggleExpanded(node);
         }
-      }) : undefined, node.loaded === false ? _$cc(Icon, _$tmp0) : undefined, checkbox ? _$cc(Checkbox, {
+      }) : undefined, node.loaded === false ? _$cc(Icon, {
+        'className': _$cn(k + "-tree-icon ion-load-c"),
+        'rotate': true
+      }) : undefined, checkbox ? _$cc(Checkbox, {
         'value': node.checked,
         'disabled': disabled,
         'indeterminate': node.indeterminate,
         'ev-$change:value': function ev$changeValue() {
           return toggleChecked(node);
         },
-        'className': 'k-tree-checkbox'
+        'className': _$cn(k + "-tree-checkbox")
       }) : undefined, _$ce(2, 'div', (_$blocks['label'] = function ($super) {
         return data.label;
       }, __$blocks['label'] = function ($super, data) {
@@ -104,12 +97,12 @@ export default function ($props, $blocks, $__proto__) {
         };
 
         return block ? block.call($this, callBlock, data) : callBlock();
-      }, __$blocks['label'](_$no, [data, node, index])), 0, 'k-tree-text c-ellipsis', {
+      }, __$blocks['label'](_$no, [data, node, index])), 0, _$cn(k + "-tree-text c-ellipsis"), {
         'ev-click': linkEvent(node, _this.onClick)
       })], 0, _$cn(labelClassNameObj)), _$cc(Transition, _extends({}, _this.transition, {
         'children': expanded && node.children ? _$ce(2, 'div', _$cc(TransitionGroup, _extends({}, _this.transition, {
           'children': treeNodes(node.children)
-        })), 2, 'k-tree') : undefined
+        })), 2, _$cn(k + "-tree")) : undefined
       }))], 4, _$cn(classNameObj), {
         'draggable': draggable ? true : null,
         'ev-dragstart': draggable && linkEvent(node, onDragStart),
@@ -119,11 +112,7 @@ export default function ($props, $blocks, $__proto__) {
     });
   };
 
-  var classNameObj = (_classNameObj = {
-    'k-tree': true,
-    'k-line': showLine,
-    'k-selectable': selectable
-  }, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var classNameObj = (_classNameObj2 = {}, _classNameObj2[k + "-tree"] = true, _classNameObj2[k + "-line"] = showLine, _classNameObj2[k + "-selectable"] = selectable, _classNameObj2[className] = className, _classNameObj2[makeStyles(k)] = true, _classNameObj2);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), _$cc(TransitionGroup, _extends({}, this.transition, {

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

@@ -68,6 +68,6 @@ setDefault(function () {
     tree: defaults
   }).tree;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", tree.fontSize, ";line-height:", tree.lineHeight, ";position:relative;.k-tree-label{position:relative;display:flex;align-items:center;&.k-before,&.k-after{&:before{position:absolute;content:'';display:block;border-top:", tree.dragging.border, ";width:100%;left:0;}}&.k-before:before{top:0;}&.k-after:before{bottom:0;}&.k-inner{background:", tree.selected.bgColor, ";}}.k-tree-icon,.k-tree-text{cursor:pointer;}.k-tree-text{padding:", tree.textPadding, ";border-radius:", tree.borderRadius, ";flex:1;}.k-tree-leaf{padding-left:", tree.leafIndent, ";}.k-tree-icon{width:", tree.iconWidth, ";text-align:center;color:", tree.iconColor, ";&:before{transform:rotate(-90deg);transition:transform ", tree.transition, ";}}.k-tree-checkbox{margin-right:", tree.checkboxGap, ";}&.k-selectable{.k-tree-node{&.k-selected{>.k-tree-label .k-tree-text{background:", tree.selected.bgColor, "!important;}}}}.k-tree-node{background:#fff;&:not(.k-disabled){>.k-tree-label .k-tree-text:hover{background:", theme.color.bg, ";}}&.k-expanded{>.k-tree-label .k-tree-icon:before{transform:rotate(0);}}&.k-disabled{>.k-tree-label{color:", tree.disabledColor, ";.k-tree-text{cursor:not-allowed;}}}&.k-dragging{background:", tree.dragging.bgColor, ";.k-tree-node{background:", tree.dragging.bgColor, ";}}}.k-tree{margin-left:", tree.marginLeft, ";padding-left:", tree.paddingLeft, ";}&.k-line .k-tree{border-left:", tree.line, ";}");
+export function makeStyles(k) {
+  return /*#__PURE__*/css("font-size:", tree.fontSize, ";line-height:", tree.lineHeight, ";position:relative;.", k, "-tree-label{position:relative;display:flex;align-items:center;&.", k, "-before,&.", k, "-after{&:before{position:absolute;content:'';display:block;border-top:", tree.dragging.border, ";width:100%;left:0;}}&.", k, "-before:before{top:0;}&.", k, "-after:before{bottom:0;}&.", k, "-inner{background:", tree.selected.bgColor, ";}}.", k, "-tree-icon,.", k, "-tree-text{cursor:pointer;}.", k, "-tree-text{padding:", tree.textPadding, ";border-radius:", tree.borderRadius, ";flex:1;}.", k, "-tree-leaf{padding-left:", tree.leafIndent, ";}.", k, "-tree-icon{width:", tree.iconWidth, ";text-align:center;color:", tree.iconColor, ";&:before{transform:rotate(-90deg);transition:transform ", tree.transition, ";}}.", k, "-tree-checkbox{margin-right:", tree.checkboxGap, ";}&.", k, "-selectable{.", k, "-tree-node{&.", k, "-selected{>.", k, "-tree-label .", k, "-tree-text{background:", tree.selected.bgColor, "!important;}}}}.", k, "-tree-node{background:#fff;&:not(.", k, "-disabled){>.", k, "-tree-label .", k, "-tree-text:hover{background:", theme.color.bg, ";}}&.", k, "-expanded{>.", k, "-tree-label .", k, "-tree-icon:before{transform:rotate(0);}}&.", k, "-disabled{>.", k, "-tree-label{color:", tree.disabledColor, ";.", k, "-tree-text{cursor:not-allowed;}}}&.", k, "-dragging{background:", tree.dragging.bgColor, ";.", k, "-tree-node{background:", tree.dragging.bgColor, ";}}}.", k, "-tree{margin-left:", tree.marginLeft, ";padding-left:", tree.paddingLeft, ";}&.", k, "-line .", k, "-tree{border-left:", tree.line, ";}");
 }

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

@@ -24,6 +24,7 @@ export default function ($props, $blocks, $__proto__) {
       treeRef = _this$value.treeRef,
       onChangeCheckedKeys = _this$value.onChangeCheckedKeys,
       onChangeSelectedKeys = _this$value.onChangeSelectedKeys;
+  var k = this.config.k;
   return _$su.call($this, null, function ($blocks) {
     var _$blocks = {},
         __$blocks = _$ex({}, $blocks);
@@ -32,9 +33,7 @@ export default function ($props, $blocks, $__proto__) {
       var _$cn2;
 
       return _$cc(DropdownMenu, {
-        'className': _$cn((_$cn2 = {
-          'k-tree-select-menu': true
-        }, _$cn2[makeStyles()] = true, _$cn2)),
+        'className': _$cn((_$cn2 = {}, _$cn2[k + "-tree-select-menu"] = true, _$cn2[makeStyles(k)] = true, _$cn2)),
         'children': _$cc(Tree, {
           'ref': treeRef,
           'data': data,

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

@@ -16,6 +16,6 @@ setDefault(function () {
     treeSelect: defaults
   }).treeSelect;
 });
-export function makeStyles() {
+export function makeStyles(k) {
   return /*#__PURE__*/css("min-width:auto;max-height:", treeSelect.maxHeight, ";padding:", treeSelect.padding, ";overflow:auto;&:not([class*=\"-active\"]){transition:left ", treeSelect.transition, ",top ", treeSelect.transition, ";}");
 }

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

@@ -57,6 +57,7 @@ export declare class Upload extends Component<UploadProps, UploadEvents, UploadB
     private files;
     private drag;
     private showImage;
+    private config;
     submit(): void;
     private selectFile;
     private onInputChange;

package/es/components/upload/index.js

@@ -9,6 +9,7 @@ import { useFiles } from './useFiles';
 import { bind } from '../utils';
 import { useDrag } from './useDrag';
 import { useShowImage } from './useShowImage';
+import { useConfigContext } from '../config';
 var typeDefs = {
   accept: String,
   files: Array,
@@ -61,6 +62,7 @@ export var Upload = /*#__PURE__*/function (_Component) {
     _this.files = useFiles(_this.accept.isValidType, _this.upload);
     _this.drag = useDrag(_this.files.addFiles);
     _this.showImage = useShowImage();
+    _this.config = useConfigContext();
     return _this;
   }