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

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;
   }
 

package/es/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';
+import { createVNode as _$cv, className as _$cn, noop as _$no, createUnknownComponentVNode as _$cc, createElementVNode as _$ce, map as _$ma } from 'intact';
 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/es/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/es/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/es/components/utils.d.ts

@@ -1,7 +1,8 @@
 import { Component, VNode, Children, VNodeComponentClass, ComponentConstructor } from 'intact';
 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;

package/es/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';
-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];
+    }
+
+    var cacheId = args.join('~');
 
-  return _cache[word];
+    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;
 

package/es/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/es/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/es/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/es/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);}}");
 }

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.0.1
+ * @king-design v3.1.0-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -20,6 +20,7 @@ export * from './components/cascader';
 export * from './components/checkbox';
 export * from './components/collapse';
 export * from './components/colorpicker';
+export * from './components/config';
 export * from './components/copy';
 export * from './components/datepicker';
 export * from './components/dialog';
@@ -59,4 +60,4 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "3.0.1";
+export declare const version = "3.1.0-beta.0";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.0.1
+ * @king-design v3.1.0-beta.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -22,6 +22,7 @@ export * from './components/cascader';
 export * from './components/checkbox';
 export * from './components/collapse';
 export * from './components/colorpicker';
+export * from './components/config';
 export * from './components/copy';
 export * from './components/datepicker';
 export * from './components/dialog';
@@ -61,5 +62,5 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '3.0.1';
+export var version = '3.1.0-beta.0';
 /* generate end */

package/es/site/data/components/icon/demos/icons/index.d.ts

@@ -8,6 +8,7 @@ interface Props {
 export default class extends Component<Props> {
     static template: string | import("intact").Template<any>;
     static defaults(): Props;
+    private config;
     init(): void;
     filter(): string[][];
 }

package/es/site/data/components/icon/demos/icons/index.js

@@ -1,4 +1,5 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
@@ -6,12 +7,23 @@ export { default as data } from './index.json';
 import { Component } from 'intact';
 import template from './index.vdt';
 import './index.styl';
+import { useConfigContext } from 'kpc';
 
 var default_1 = /*#__PURE__*/function (_Component) {
   _inheritsLoose(default_1, _Component);
 
   function default_1() {
-    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;
   }
 
   default_1.defaults = function defaults() {
@@ -38,16 +50,16 @@ var default_1 = /*#__PURE__*/function (_Component) {
   };
 
   _proto.filter = function filter() {
-    var _context;
+    var _context2;
 
-    var keywords = _trimInstanceProperty(_context = this.get('keywords')).call(_context).toLowerCase();
+    var keywords = _trimInstanceProperty(_context2 = this.get('keywords')).call(_context2).toLowerCase();
 
     var fonts = this.get('fonts');
     if (!keywords) return fonts;
     return _filterInstanceProperty(fonts).call(fonts, function (font) {
-      var _context2, _context3;
+      var _context3, _context4;
 
-      return _includesInstanceProperty(_context2 = font[0]).call(_context2, keywords) || font[1] && _includesInstanceProperty(_context3 = font[1]).call(_context3, keywords);
+      return _includesInstanceProperty(_context3 = font[0]).call(_context3, keywords) || font[1] && _includesInstanceProperty(_context4 = font[1]).call(_context4, keywords);
     });
   };