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

package/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/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/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/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-react';
+import { createElementVNode as _$ce, createUnknownComponentVNode as _$cc, className as _$cn, noop as _$no, createVNode as _$cv } from 'intact-react';
 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/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/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/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/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/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/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/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;
   }
 

package/components/upload/index.vdt.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import { createVNode as _$cv, noop as _$no, createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn, map as _$ma } from 'intact-react';
+import { createVNode as _$cv, className as _$cn, noop as _$no, createUnknownComponentVNode as _$cc, createElementVNode as _$ce, map as _$ma } from 'intact-react';
 import { Button } from '../button';
 import { Progress } from '../progress';
 import { Dialog } from '../dialog';
@@ -9,27 +9,8 @@ import { TransitionGroup, Transition, linkEvent } from 'intact';
 import { _$ } from '../../i18n';
 import { Icon } from '../icon';
 import { UploadFileStatus } from './useUpload';
-var _$tmp0 = {
-  'className': 'k-icon-upload'
-};
-var _$tmp1 = {
-  'className': 'k-icon-add-bold'
-};
-var _$tmp2 = {
-  'className': 'k-icon-add-bold',
-  'size': 'large'
-};
-var _$tmp3 = {
-  'className': 'k-upload-file-icon ion-document'
-};
-var _$tmp4 = {
-  'className': 'k-upload-status-icon k-icon-success-fill'
-};
-var _$tmp5 = {
-  'className': 'k-upload-status-icon k-icon-error-fill'
-};
 export default function ($props, $blocks, $__proto__) {
-  var _classNameObj, _$cn2;
+  var _classNameObj, _$cn4;
 
   $blocks || ($blocks = {});
   $props || ($props = {});
@@ -48,9 +29,8 @@ export default function ($props, $blocks, $__proto__) {
       directory = _this$get.directory;
 
   var drag = this.drag;
-  var classNameObj = (_classNameObj = {
-    'k-upload': true
-  }, _classNameObj[className] = className, _classNameObj['k-drag'] = type === 'drag', _classNameObj['k-dragover'] = drag.dragOver.value, _classNameObj['k-gallery'] = type === 'gallery', _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-upload"] = true, _classNameObj[className] = className, _classNameObj[k + "-drag"] = type === 'drag', _classNameObj[k + "-dragover"] = drag.dragOver.value, _classNameObj[k + "-gallery"] = type === 'gallery', _classNameObj[makeStyles(k)] = true, _classNameObj);
   var events = {
     'ev-click': this.selectFile
   };
@@ -63,7 +43,7 @@ export default function ($props, $blocks, $__proto__) {
   }
 
   var handle = _$cv('div', _extends({
-    'className': 'k-upload-handle'
+    'className': _$cn(k + "-upload-handle")
   }, events), (_$blocks['content'] = function ($super) {
     return children ? (_$blocks['children'] = function ($super) {
       return children;
@@ -76,10 +56,17 @@ export default function ($props, $blocks, $__proto__) {
 
       return block ? block.call($this, callBlock, data) : callBlock();
     }, __$blocks['children'](_$no)) : type !== 'gallery' ? type === 'select' ? _$cc(Button, {
-      'children': [_$cc(Icon, _$tmp0), _$('点击上传')]
-    }) : _$ce(2, 'div', [_$cc(Icon, _$tmp1), _$ce(2, 'div', null, 1, null, {
+      'children': [_$cc(Icon, {
+        'className': _$cn(k + "-icon-upload")
+      }), _$('点击上传')]
+    }) : _$ce(2, 'div', [_$cc(Icon, {
+      'className': _$cn(k + "-icon-add-bold")
+    }), _$ce(2, 'div', null, 1, null, {
       'innerHTML': _$('将文件拖到此处，或<a>点击上传</a>')
-    })], 4, 'k-upload-area') : _$ce(2, 'div', [_$cc(Icon, _$tmp2), _$ce(2, 'div', _$('上传图片'), 0)], 4, 'k-upload-picture-card k-upload-add');
+    })], 4, _$cn(k + "-upload-area")) : _$ce(2, 'div', [_$cc(Icon, {
+      'className': _$cn(k + "-icon-add-bold"),
+      'size': 'large'
+    }), _$ce(2, 'div', _$('上传图片'), 0)], 4, _$cn(k + "-upload-picture-card " + k + "-upload-add"));
   }, __$blocks['content'] = function ($super, data) {
     var block = $blocks['content'];
 
@@ -94,7 +81,7 @@ export default function ($props, $blocks, $__proto__) {
 
   var closeBtn = function closeBtn(value, index) {
     return _$cc(Icon, {
-      'className': 'k-upload-close k-icon-delete',
+      'className': _$cn(k + "-upload-close " + k + "-icon-delete"),
       'ev-click': function evClick() {
         return removeFile(value, index);
       },
@@ -119,28 +106,27 @@ export default function ($props, $blocks, $__proto__) {
   }, null, this.inputRef), type === 'gallery' ? _$ce(2, 'div', _$cc(TransitionGroup, {
     'name': 'k-dropdown',
     'children': [_$ma(files, function ($value, $key) {
-      return _$ce(2, 'div', [_$ce(2, 'img', null, 1, 'k-upload-img', {
+      var _$cn2;
+
+      return _$ce(2, 'div', [_$ce(2, 'img', null, 1, _$cn(k + "-upload-img"), {
         'src': $value.url
       }), _$cc(Transition, {
         'name': 'k-fade',
         'children': $value.status === UploadFileStatus.Ready || $value.status === UploadFileStatus.Uploading ? _$ce(2, 'div', _$cc(Progress, {
           'percent': $value.percent,
           'size': 'mini',
-          'className': 'k-upload-progress'
-        }), 2, 'k-upload-overlap', null, 'overlap') : _$ce(2, 'div', [_$cc(Icon, {
-          'className': 'k-upload-zoom ion-ios-eye-outline',
+          'className': _$cn(k + "-upload-progress")
+        }), 2, _$cn(k + "-upload-overlap"), null, 'overlap') : _$ce(2, 'div', [_$cc(Icon, {
+          'className': _$cn(k + "-upload-zoom ion-ios-eye-outline"),
           'size': 'large',
           'hoverable': true,
           'ev-click': function evClick() {
             return show($value);
           }
-        }), closeBtn($value, $key)], 0, 'k-upload-overlap k-upload-icons')
-      })], 4, _$cn({
-        "k-upload-picture k-upload-picture-card": true,
-        'k-error': $value.status === UploadFileStatus.Error
-      }), null, $value.uid);
+        }), closeBtn($value, $key)], 0, _$cn(k + "-upload-overlap " + k + "-upload-icons"))
+      })], 4, _$cn((_$cn2 = {}, _$cn2[k + "-upload-picture " + k + "-upload-picture-card"] = true, _$cn2[k + "-error"] = $value.status === UploadFileStatus.Error, _$cn2)), null, $value.uid);
     }, $this), !limit || files.length < limit ? _$ce(2, 'div', handle, 0, 'c-middle', null, 'handle') : undefined]
-  }), 2, 'k-upload-pictures') : handle, $blocks.tip ? _$ce(2, 'div', (_$blocks['tip'] = function ($super) {
+  }), 2, _$cn(k + "-upload-pictures")) : handle, $blocks.tip ? _$ce(2, 'div', (_$blocks['tip'] = function ($super) {
     return null;
   }, __$blocks['tip'] = function ($super, data) {
     var block = $blocks['tip'];
@@ -150,27 +136,30 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['tip'](_$no)), 0, 'k-upload-tip') : undefined, type !== 'gallery' ? _$ce(2, 'div', _$cc(TransitionGroup, _extends({}, expandAnimationCallbacks, {
+  }, __$blocks['tip'](_$no)), 0, _$cn(k + "-upload-tip")) : undefined, type !== 'gallery' ? _$ce(2, 'div', _$cc(TransitionGroup, _extends({}, expandAnimationCallbacks, {
     'children': _$ma(files, function ($value, $key) {
-      return _$ce(2, 'div', [_$ce(2, 'div', [_$ce(2, 'div', [_$cc(Icon, _$tmp3), _$ce(2, 'span', $value.name, 0, 'k-upload-file-name'), $value.status === UploadFileStatus.Done ? _$cc(Icon, _$tmp4) : $value.status === UploadFileStatus.Error ? _$cc(Icon, _$tmp5) : undefined], 0, 'k-upload-name c-ellipsis'), _$cc(Transition, _extends({}, expandAnimationCallbacks, {
+      var _$cn3;
+
+      return _$ce(2, 'div', [_$ce(2, 'div', [_$ce(2, 'div', [_$cc(Icon, {
+        'className': _$cn(k + "-upload-file-icon ion-document")
+      }), _$ce(2, 'span', $value.name, 0, _$cn(k + "-upload-file-name")), $value.status === UploadFileStatus.Done ? _$cc(Icon, {
+        'className': _$cn(k + "-upload-status-icon " + k + "-icon-success-fill")
+      }) : $value.status === UploadFileStatus.Error ? _$cc(Icon, {
+        'className': _$cn(k + "-upload-status-icon " + k + "-icon-error-fill")
+      }) : undefined], 0, _$cn(k + "-upload-name c-ellipsis")), _$cc(Transition, _extends({}, expandAnimationCallbacks, {
         'children': $value.status === UploadFileStatus.Ready || $value.status === UploadFileStatus.Uploading ? _$cc(Progress, {
           'percent': $value.percent,
           'size': 'mini',
-          'className': 'k-upload-progress'
+          'className': _$cn(k + "-upload-progress")
         }) : undefined
-      }))], 4, 'k-upload-file-main'), closeBtn($value, $key)], 0, _$cn({
-        "k-upload-file": true,
-        'k-error': $value.status === UploadFileStatus.Error
-      }), null, $value.uid);
+      }))], 4, _$cn(k + "-upload-file-main")), closeBtn($value, $key)], 0, _$cn((_$cn3 = {}, _$cn3[k + "-upload-file"] = true, _$cn3[k + "-error"] = $value.status === UploadFileStatus.Error, _$cn3)), null, $value.uid);
     }, $this)
-  })), 2, 'k-upload-files') : undefined, _$cc(Dialog, {
+  })), 2, _$cn(k + "-upload-files")) : undefined, _$cc(Dialog, {
     'title': _$("查看图片"),
     'key': 'dialog',
     'value': isShow.value,
     'ev-close': close,
-    'className': _$cn((_$cn2 = {
-      "k-upload-dialog": true
-    }, _$cn2[makeUploadDialogStyles()] = true, _$cn2)),
+    'className': _$cn((_$cn4 = {}, _$cn4[k + "-upload-dialog"] = true, _$cn4[makeUploadDialogStyles(k)] = true, _$cn4)),
     'children': image.value ? _$ce(2, 'a', _$ce(2, 'img', null, 1, null, {
       'src': image.value.url
     }), 2, null, {

package/components/upload/styles.d.ts

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

package/components/upload/styles.js

@@ -135,10 +135,10 @@ setDefault(function () {
     upload: defaults
   }).upload;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", upload.fontSize, ";position:relative;.k-icon-upload{position:relative;top:-1px;}.k-upload-handle{display:inline-block;vertical-align:middle;color:", upload.color, ";}.k-upload-tip{margin-top:", upload.tip.gap, ";color:", upload.color, ";}.k-upload-files{margin-top:", upload.filesGap, ";}.k-upload-file{margin:", upload.file.margin, ";padding-right:", upload.file.delete.width, ";position:relative;&:hover{.k-upload-close{display:inline-flex;position:absolute;right:", upload.file.delete.right, ";top:", upload.file.delete.top, ";}.k-upload-file-main{background:", upload.file.bgColor, ";}}}.k-upload-file-main{padding:", upload.file.padding, ";border-radius:", upload.file.borderRadius, ";}.k-upload-name{display:flex;align-items:center;height:", upload.file.height, ";}.k-upload-file-icon{margin-right:", upload.file.fileIconGap, ";}.k-upload-file-name{flex:1;}.k-upload-status-icon{color:", upload.file.status.color, ";margin-right:", upload.file.status.offsetRight, ";}.k-upload-close{display:none;}.k-upload-file.k-error{color:", upload.file.errorColor, ";.k-upload-status-icon{color:", upload.file.status.errorColor, ";}}.k-upload-progress{.k-progress-text{width:auto!important;}}&.k-drag{.k-upload-handle{display:block;border:", upload.drag.border, ";border-radius:", upload.drag.borderRadius, ";cursor:pointer;text-align:center;transition:border-color ", upload.transition, ";background:", upload.drag.bgColor, ";&:hover{border-color:", upload.drag.hoverBorderColor, ";}}.k-upload-area{padding:", upload.drag.padding, ";.k-icon{display:inline-block;font-size:", upload.drag.icon.fontSize, ";margin-bottom:", upload.drag.icon.gap, ";}}&.k-dragover{.k-upload-handle{border-color:", upload.drag.overBorderColor, ";}}}.k-upload-pictures{display:inline-block;vertical-align:middle;}.k-upload-picture{padding:", upload.gallery.padding, ";position:relative;vertical-align:middle;&.k-error{border-color:", upload.gallery.errorBorderColor, ";}.k-upload-close{display:inline-flex;}&:hover{.k-upload-icons{opacity:1;}}.k-upload-img{display:inline-block;width:100%;height:100%;}.k-upload-icons{opacity:0;transition:opacity ", upload.transition, ";}}.k-upload-picture-card{display:inline-flex;width:", upload.gallery.width, ";height:", upload.gallery.height, ";border-radius:", upload.gallery.borderRadius, ";border:", upload.gallery.border, ";margin:", upload.gallery.margin, ";background:", upload.gallery.bgColor, ";align-items:center;justify-content:center;flex-direction:column;}.k-upload-add{border:", upload.gallery.add.border, ";cursor:pointer;&:hover{border-color:", upload.gallery.add.hoverBorderColor, ";}}.k-upload-overlap{position:absolute;width:100%;height:100%;left:0;top:0;background:", upload.overlap.bgColor, ";display:flex;align-items:center;justify-content:center;gap:", upload.overlap.iconGap, ";color:", upload.overlap.color, ";.k-icon:not(:hover){color:inherit;}.k-upload-progress{position:absolute;width:100%;top:50%;padding:", upload.gallery.padding, ";transform:translateY(-50%);}}");
+export function makeStyles(k) {
+  return /*#__PURE__*/css("font-size:", upload.fontSize, ";position:relative;.", k, "-icon-upload{position:relative;top:-1px;}.", k, "-upload-handle{display:inline-block;vertical-align:middle;color:", upload.color, ";}.", k, "-upload-tip{margin-top:", upload.tip.gap, ";color:", upload.color, ";}.", k, "-upload-files{margin-top:", upload.filesGap, ";}.", k, "-upload-file{margin:", upload.file.margin, ";padding-right:", upload.file.delete.width, ";position:relative;&:hover{.", k, "-upload-close{display:inline-flex;position:absolute;right:", upload.file.delete.right, ";top:", upload.file.delete.top, ";}.", k, "-upload-file-main{background:", upload.file.bgColor, ";}}}.", k, "-upload-file-main{padding:", upload.file.padding, ";border-radius:", upload.file.borderRadius, ";}.", k, "-upload-name{display:flex;align-items:center;height:", upload.file.height, ";}.", k, "-upload-file-icon{margin-right:", upload.file.fileIconGap, ";}.", k, "-upload-file-name{flex:1;}.", k, "-upload-status-icon{color:", upload.file.status.color, ";margin-right:", upload.file.status.offsetRight, ";}.", k, "-upload-close{display:none;}.", k, "-upload-file.", k, "-error{color:", upload.file.errorColor, ";.", k, "-upload-status-icon{color:", upload.file.status.errorColor, ";}}.", k, "-upload-progress{.", k, "-progress-text{width:auto!important;}}&.", k, "-drag{.", k, "-upload-handle{display:block;border:", upload.drag.border, ";border-radius:", upload.drag.borderRadius, ";cursor:pointer;text-align:center;transition:border-color ", upload.transition, ";background:", upload.drag.bgColor, ";&:hover{border-color:", upload.drag.hoverBorderColor, ";}}.", k, "-upload-area{padding:", upload.drag.padding, ";.", k, "-icon{display:inline-block;font-size:", upload.drag.icon.fontSize, ";margin-bottom:", upload.drag.icon.gap, ";}}&.", k, "-dragover{.", k, "-upload-handle{border-color:", upload.drag.overBorderColor, ";}}}.", k, "-upload-pictures{display:inline-block;vertical-align:middle;}.", k, "-upload-picture{padding:", upload.gallery.padding, ";position:relative;vertical-align:middle;&.", k, "-error{border-color:", upload.gallery.errorBorderColor, ";}.", k, "-upload-close{display:inline-flex;}&:hover{.", k, "-upload-icons{opacity:1;}}.", k, "-upload-img{display:inline-block;width:100%;height:100%;}.", k, "-upload-icons{opacity:0;transition:opacity ", upload.transition, ";}}.", k, "-upload-picture-card{display:inline-flex;width:", upload.gallery.width, ";height:", upload.gallery.height, ";border-radius:", upload.gallery.borderRadius, ";border:", upload.gallery.border, ";margin:", upload.gallery.margin, ";background:", upload.gallery.bgColor, ";align-items:center;justify-content:center;flex-direction:column;}.", k, "-upload-add{border:", upload.gallery.add.border, ";cursor:pointer;&:hover{border-color:", upload.gallery.add.hoverBorderColor, ";}}.", k, "-upload-overlap{position:absolute;width:100%;height:100%;left:0;top:0;background:", upload.overlap.bgColor, ";display:flex;align-items:center;justify-content:center;gap:", upload.overlap.iconGap, ";color:", upload.overlap.color, ";.", k, "-icon:not(:hover){color:inherit;}.", k, "-upload-progress{position:absolute;width:100%;top:50%;padding:", upload.gallery.padding, ";transform:translateY(-50%);}}");
 }
-export function makeUploadDialogStyles() {
+export function makeUploadDialogStyles(k) {
   return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
     name: "18e4bfd",
     styles: "img{width:100%;}"

package/components/utils.d.ts

@@ -1,7 +1,8 @@
 import { Component, VNode, Children, VNodeComponentClass, ComponentConstructor } from 'intact-react';
 export declare function bind<T extends Function>(target: any, key: string, descriptor: TypedPropertyDescriptor<T>): TypedPropertyDescriptor<T>;
 export declare function addStyle(style: string | Record<string, string | null> | undefined, extra: Record<string, string | null>): string | Record<string, string | null>;
-export declare function kebabCase(word: string): string;
+export declare function cache(callback: (...args: string[]) => any): (...args: string[]) => string;
+export declare const kebabCase: (...args: string[]) => string;
 export declare function isTextChildren(o: any): boolean;
 export declare function isTextVNode(o: VNode): boolean;
 export declare function isTextBlock(o: any): boolean;
@@ -24,6 +25,7 @@ export declare function range(start: number, end: number): number[];
 export declare function strPad(str: number | string, length: number, pad?: string): string;
 declare type EqualArrayValue = any | EqualArrayValue[];
 export declare function isEqualArray(a: EqualArrayValue, b: EqualArrayValue): boolean;
+export declare function isEqualObject(a: Record<string, any>, b: Record<string, any>): boolean;
 export declare function last<T>(arr: T[]): T | undefined;
 export declare const expandAnimationCallbacks: {
     name: string;

package/components/utils.js

@@ -5,7 +5,7 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slic
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
 import { isText } from 'intact-react';
-import { isStringOrNumber, isString, isNullOrUndefined, isInvalid } from 'intact-shared'; // @reference https://github.com/andreypopp/autobind-decorator/blob/master/src/index.js
+import { isStringOrNumber, isString, isNullOrUndefined, isInvalid, hasOwn } from 'intact-shared'; // @reference https://github.com/andreypopp/autobind-decorator/blob/master/src/index.js
 // for loose mode
 
 export function bind(target, key, descriptor) {
@@ -97,16 +97,27 @@ export function addStyle(style, extra) {
   return style;
 }
 var _cache = {};
-var uppercasePattern = /[A-Z]/g;
-export function kebabCase(word) {
-  if (!_cache[word]) {
-    _cache[word] = word.replace(uppercasePattern, function (item) {
-      return "-" + item.toLowerCase();
-    });
-  }
+export function cache(callback) {
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-  return _cache[word];
+    var cacheId = args.join('~');
+
+    if (!hasOwn.call(_cache, cacheId)) {
+      _cache[cacheId] = callback.apply(void 0, args);
+    }
+
+    return _cache[cacheId];
+  };
 }
+var uppercasePattern = /[A-Z]/g;
+export var kebabCase = cache(function (word) {
+  return word.replace(uppercasePattern, function (item) {
+    return "-" + item.toLowerCase();
+  });
+});
 export function isTextChildren(o) {
   if (isStringOrNumber(o)) return true;
 
@@ -290,6 +301,22 @@ export function isEqualArray(a, b) {
 
   return false;
 }
+export function isEqualObject(a, b) {
+  if (a === b) return true;
+
+  if (a && b) {
+    var keysA = _Object$keys(a);
+
+    var keysB = _Object$keys(b);
+
+    if (keysA.length !== keysB.length) return false;
+    return keysA.every(function (key) {
+      return a[key] === b[key];
+    });
+  }
+
+  return false;
+}
 export function last(arr) {
   return arr[arr.length - 1];
 }

package/components/virtual.js

@@ -82,14 +82,17 @@ export var Virtual = /*#__PURE__*/function (_Component) {
     /* vue2 vnode */
     ) {
       var data = vnode.data;
-      var on = data && data.on || EMPTY_OBJ;
+      if (!data) return props;
+      var on = data.on || EMPTY_OBJ;
       var _events = {};
 
       for (var _key2 in on) {
         _events["ev-" + _key2] = on[_key2];
       }
 
-      return _extends({}, props, _events);
+      return _extends({}, props, _events, {
+        className: data.staticClass
+      });
     }
 
     return props;

package/components/wave/index.d.ts

@@ -11,6 +11,7 @@ export declare class Wave extends Component<WaveProps> {
     private instance;
     private className;
     private timer;
+    private config;
     private initClassName;
     mounted(): void;
     beforeUnmount(): void;

package/components/wave/index.js

@@ -6,6 +6,7 @@ import { isArray } from 'intact-shared';
 import { bind } from '../utils';
 import { makeStyles } from './styles';
 import { theme } from '../../styles/theme';
+import { useConfigContext } from '../config';
 var typeDefs = {
   disabled: Boolean,
   color: String,
@@ -35,6 +36,7 @@ export var Wave = /*#__PURE__*/function (_Component) {
     _this.instance = null;
     _this.className = void 0;
     _this.timer = 0;
+    _this.config = useConfigContext();
     return _this;
   }
 
@@ -45,7 +47,7 @@ export var Wave = /*#__PURE__*/function (_Component) {
         color = _this$get.color,
         inset = _this$get.inset;
 
-    this.className = makeStyles(color || theme.color.primary, inset);
+    this.className = makeStyles(color || theme.color.primary, inset, this.config.k);
   };
 
   _proto.mounted = function mounted() {
@@ -80,7 +82,7 @@ export var Wave = /*#__PURE__*/function (_Component) {
     var node = e.target; // 点击输入框中的icon时，此时输入框不需要动效
 
     var isInput = instance.classList.contains('k-input-wrapper');
-    if (disabled || isInput && node.classList.contains('k-icon')) return;
+    if (disabled || isInput && node.classList.contains(this.config.cls('icon'))) return;
     this.resetAnimation();
     instance.addEventListener('animationend', this.resetAnimation);
     this.timer = window.setTimeout(function () {

package/components/wave/styles.d.ts

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

package/components/wave/styles.js

@@ -11,7 +11,7 @@ setDefault(function () {
     wave: defaults
   }).wave;
 });
-export function makeStyles(color, inset) {
+export function makeStyles(color, inset, k) {
   var waveEffect = /*#__PURE__*/keyframes("100%{top:calc(", inset, " + ", wave.inset, ");bottom:calc(", inset, " + ", wave.inset, ");left:calc(", inset, " + ", wave.inset, ");right:calc(", inset, " + ", wave.inset, ");opacity:0.05;}");
-  return /*#__PURE__*/css("position:relative;&::after{display:block;content:'';position:absolute;top:", inset, ";bottom:", inset, ";left:", inset, ";right:", inset, ";opacity:0.4;border-radius:4px;z-index:2;animation:", waveEffect, " .2s ease-in;animation-fill-mode:forwards;border:2px solid ", color, ";pointer-events:none;}&.k-circle,&.k-radio-wrapper{&:after{border-radius:calc(", theme.large.height, " / 2 + 4px);}}");
+  return /*#__PURE__*/css("position:relative;&::after{display:block;content:'';position:absolute;top:", inset, ";bottom:", inset, ";left:", inset, ";right:", inset, ";opacity:0.4;border-radius:4px;z-index:2;animation:", waveEffect, " .2s ease-in;animation-fill-mode:forwards;border:2px solid ", color, ";pointer-events:none;}&.", k, "-circle,&.", k, "-radio-wrapper{&:after{border-radius:calc(", theme.large.height, " / 2 + 4px);}}");
 }