@king-design/intact 3.1.0-beta.2 → 3.1.0

package/es/components/tree/index.js

@@ -13,6 +13,7 @@ import { useFilter } from './useFilter';
 import { useDraggable, Mode } from './useDraggable';
 import { useTransitionEvent } from './useTransitionEvent';
 import { useConfigContext } from '../config';
+export { Mode as TreeMode };
 var typeDefs = {
   data: Array,
   filter: Function,
@@ -98,6 +99,10 @@ export var Tree = /*#__PURE__*/function (_Component) {
     return this.nodes.getNodes();
   };
 
+  _proto.expandAll = function expandAll() {
+    this.expanded.expandAll();
+  };
+
   _proto.onClick = function onClick(node) {
     if (node.data.disabled) return;
 

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

@@ -306,7 +306,7 @@ describe('Tree', function () {
     }, _callee6);
   })));
   it('draggable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
-    var onDenyDrag, onDenyDrop, onDragEnd, _mount7, instance, element, disabled, nodes, notAllowed;
+    var onDenyDrag, onDenyDrop, onDragEnd, _mount7, instance, element, _element$querySelecto13, notAllowed, file1, file2, dir1, file3, dir2, disabled;
 
     return _regeneratorRuntime.wrap(function _callee7$(_context7) {
       while (1) {
@@ -320,53 +320,74 @@ describe('Tree', function () {
             DraggableDemo.prototype.onDenyDrop = onDenyDrop;
             DraggableDemo.prototype.onDragEnd = onDragEnd;
             _mount7 = mount(DraggableDemo), instance = _mount7[0], element = _mount7[1];
-            instance.set('expandedKeys', ['2', '2-1', '1', '1-1']);
+            instance.set('expandedKeys', ['guide']);
             _context7.next = 11;
             return wait(500);
 
           case 11:
-            // can not drag disabled item
-            disabled = element.querySelector('.k-disabled'); // dispatchEvent(disabled, 'mousedown');
+            _element$querySelecto13 = element.querySelectorAll('.k-tree-label'), notAllowed = _element$querySelecto13[0], file1 = _element$querySelecto13[1], file2 = _element$querySelecto13[2], dir1 = _element$querySelecto13[3], file3 = _element$querySelecto13[4], dir2 = _element$querySelecto13[5], disabled = _element$querySelecto13[6]; // can not drag disabled item
 
             dispatchEvent(disabled, 'dragstart');
-            expect(onDenyDrag.callCount).to.eql(1);
-            nodes = element.querySelectorAll('.k-tree-label'); // can not drag not-allowed item
-
-            notAllowed = nodes[2]; // dispatchEvent(notAllowed, 'mousedown');
+            expect(onDenyDrag.callCount).to.eql(1); // can not drag not-allowed item
 
             dispatchEvent(notAllowed, 'dragstart');
-            expect(onDenyDrag.callCount).to.eql(2); // drag insert
-
-            return _context7.abrupt("return", dragInsert(nodes[6], nodes[6]).then(function () {
-              // drag to self will do nothing
-              expect(element.innerHTML).to.matchSnapshot();
-              expect(onDragEnd.callCount).to.eql(0);
-              return dragInsert(nodes[6], notAllowed);
-            }).then(function () {
-              // drag to not-allowed item will do nothing
-              expect(element.innerHTML).to.matchSnapshot();
-              expect(onDragEnd.callCount).to.eql(0);
-              return dragInsert(nodes[6], disabled);
-            }).then(function () {
-              // drag to disabled item will do nothing
-              expect(element.innerHTML).to.matchSnapshot();
-              expect(onDragEnd.callCount).to.eql(0);
-              return dragInsert(nodes[6], nodes[5], 'before');
-            }).then(function () {
-              expect(element.innerHTML).to.matchSnapshot();
-              expect(onDragEnd.callCount).to.eql(1);
-              expect(instance.get('data')).to.matchSnapshot();
-              return dragInsert(nodes[6], nodes[5], 'after');
-            }).then(function () {
-              expect(element.innerHTML).to.matchSnapshot();
-              expect(instance.get('data')).to.matchSnapshot();
-              return dragInsert(nodes[6], nodes[5]);
-            }).then(function () {
-              expect(element.innerHTML).to.matchSnapshot();
-              expect(instance.get('data')).to.matchSnapshot();
-            }));
+            expect(onDenyDrag.callCount).to.eql(2);
+            _context7.next = 18;
+            return dragInsert(dir1, dir1);
+
+          case 18:
+            // drag to self will do nothing
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(onDragEnd.callCount).to.eql(0);
+            _context7.next = 22;
+            return dragInsert(file1, notAllowed);
+
+          case 22:
+            // drag to not-allowed item will do nothing
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(onDragEnd.callCount).to.eql(0);
+            _context7.next = 26;
+            return dragInsert(file1, disabled);
 
-          case 19:
+          case 26:
+            // drag to disabled item will do nothing
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(onDragEnd.callCount).to.eql(0);
+            _context7.next = 30;
+            return dragInsert(file2, file1, 'before');
+
+          case 30:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(onDragEnd.callCount).to.eql(1);
+            expect(instance.get('data')).to.matchSnapshot();
+            _context7.next = 35;
+            return dragInsert(file2, file1, 'after');
+
+          case 35:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(onDragEnd.callCount).to.eql(2);
+            expect(instance.get('data')).to.matchSnapshot();
+            _context7.next = 40;
+            return dragInsert(file1, dir1);
+
+          case 40:
+            expect(onDragEnd.callCount).to.eql(3);
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('data')).to.matchSnapshot();
+            _context7.next = 45;
+            return dragInsert(dir2, dir1);
+
+          case 45:
+            expect(onDragEnd.callCount).to.eql(3);
+            expect(onDenyDrag.callCount).to.eql(2);
+            _context7.next = 49;
+            return dragInsert(dir2, file3, 'before');
+
+          case 49:
+            expect(onDragEnd.callCount).to.eql(3);
+            expect(onDenyDrag.callCount).to.eql(2);
+
+          case 51:
           case "end":
             return _context7.stop();
         }

package/es/components/tree/styles.js

@@ -69,5 +69,5 @@ setDefault(function () {
   }).tree;
 });
 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, ";}");
+  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;display:flex;align-items:center;}.", 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/tree/useDraggable.js

@@ -57,18 +57,18 @@ export function useDraggable() {
     if (node !== overNode || newMode !== mode.value) {
       overNode = node;
       mode.set(newMode);
-      overKey.set(node.key); // if the node does not allow drop, prevent the dragging ndoe from inserting to it
-
-      if (mode.value === Mode.Inner) {
-        var _instance$get2 = instance.get(),
-            allowDrop = _instance$get2.allowDrop;
-
-        if (node.data.disabled || allowDrop && !allowDrop(node)) {
-          instance.trigger('denydrop', node);
-          valid = false;
-          return;
-        }
-      }
+      overKey.set(node.key); // if the node does not allow drop, prevent the dragging node from inserting to it
+      // if (mode.value === Mode.Inner) {
+
+      var _instance$get2 = instance.get(),
+          allowDrop = _instance$get2.allowDrop;
+
+      if (node.data.disabled || allowDrop && !allowDrop(node, draggingNode, newMode)) {
+        instance.trigger('denydrop', node, draggingNode, newMode);
+        valid = false;
+        return;
+      } // }
+
 
       valid = true;
     }

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

@@ -3,4 +3,5 @@ import type { Node } from './useNodes';
 export declare function useExpanded(getNodes: () => Node<Key>[]): {
     get: () => Set<Key>;
     toggle: (node: Node<Key>) => Promise<void>;
+    expandAll: () => void;
 };

package/es/components/tree/useExpanded.js

@@ -10,8 +10,23 @@ export function useExpanded(getNodes) {
     expandedKeys = new _Set(v);
   });
   onBeforeMount(function () {
-    if (instance.get('defaultExpandAll')) {
-      expandAll();
+    /**
+     * change the behavior
+     * if the data is undefined, we expand all keys after we received data
+     */
+    var _instance$get = instance.get(),
+        defaultExpandAll = _instance$get.defaultExpandAll,
+        data = _instance$get.data;
+
+    if (defaultExpandAll) {
+      if (data && data.length) {
+        expandAll();
+      } else {
+        instance.on("$receive:data", function cb() {
+          expandAll();
+          instance.off("$receive:data", cb);
+        });
+      }
     }
   });
 
@@ -21,13 +36,13 @@ export function useExpanded(getNodes) {
 
   function _toggle() {
     _toggle = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(node) {
-      var _instance$get2, load, key, expanded;
+      var _instance$get3, load, key, expanded;
 
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              _instance$get2 = instance.get(), load = _instance$get2.load;
+              _instance$get3 = instance.get(), load = _instance$get3.load;
               key = node.key;
               expanded = expandedKeys.has(key);
 
@@ -64,8 +79,8 @@ export function useExpanded(getNodes) {
   }
 
   function expandAll() {
-    var _instance$get = instance.get(),
-        load = _instance$get.load;
+    var _instance$get2 = instance.get(),
+        load = _instance$get2.load;
 
     var loop = function loop(nodes) {
       for (var i = 0; i < nodes.length; i++) {
@@ -89,6 +104,7 @@ export function useExpanded(getNodes) {
     get: function get() {
       return expandedKeys;
     },
-    toggle: toggle
+    toggle: toggle,
+    expandAll: expandAll
   };
 }

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

@@ -5,6 +5,7 @@ export declare type DataItem<K extends Key> = {
     disabled?: boolean;
     loaded?: boolean;
     children?: DataItem<K>[];
+    [key: string]: any;
 };
 export declare function useNodes(): {
     getNodes: () => Node<Key>[];

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

@@ -21,6 +21,7 @@ export declare class TreeSelect<K extends Key = Key, Checkbox extends boolean =
     static defaults: () => Partial<TreeSelectProps<Key, boolean, boolean>>;
     private value;
     init(): void;
+    expandAll(): void;
     protected getPlaceholder(): string | number | boolean | import("misstime/dist/utils/types").VNode<any> | Children[];
     protected getLabel(): Children;
     private filter;

package/es/components/treeSelect/index.js

@@ -66,6 +66,10 @@ export var TreeSelect = /*#__PURE__*/function (_BaseSelect) {
     });
   };
 
+  _proto.expandAll = function expandAll() {
+    this.value.treeRef.value.expandAll();
+  };
+
   _proto.getPlaceholder = function getPlaceholder() {
     var _this$get = this.get(),
         placeholder = _this$get.placeholder;

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

@@ -2,7 +2,8 @@ import { Component, TypeDefs } from 'intact';
 import { UploadFileStatus } from './useUpload';
 import type { RequestError } from './ajaxUploader';
 import type { Events } from '../types';
-export type { RequestError, UploadFileStatus };
+export type { RequestError };
+export { UploadFileStatus };
 export interface UploadProps {
     accept?: string;
     files?: UploadFile[];
@@ -33,13 +34,13 @@ export interface UploadBlocks {
     tip: null;
 }
 export declare type UploadFile = {
-    status: UploadFileStatus;
+    status?: UploadFileStatus;
     type?: string;
     size?: number;
     name: string;
-    percent: number;
-    uid: number;
-    raw: File | Partial<UploadFile>;
+    percent?: number;
+    uid?: number | string;
+    raw?: File | Partial<UploadFile>;
     url?: string;
     request?: any;
 };

package/es/components/upload/index.js

@@ -10,6 +10,7 @@ import { bind } from '../utils';
 import { useDrag } from './useDrag';
 import { useShowImage } from './useShowImage';
 import { useConfigContext } from '../config';
+export { UploadFileStatus };
 var typeDefs = {
   accept: String,
   files: Array,

package/es/components/upload/useFiles.js

@@ -1,6 +1,8 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js/array/from";
 import _URL from "@babel/runtime-corejs3/core-js/url";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
@@ -20,20 +22,22 @@ export function useFiles(isValidType, upload) {
     var _files = _sliceInstanceProperty(files).call(files, 0);
 
     if (defaultFiles) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn("'defaultFiles' is deprecated, use 'files' instead for reactive updating.");
+      }
+
       defaultFiles.forEach(function (file) {
-        _files.push({
-          status: UploadFileStatus.Done,
-          name: file.name,
-          percent: 100,
-          uid: uid++,
-          raw: file,
-          url: file.url
-        });
+        _files.push(normalizeFile(file));
       });
       instance.set('files', _files);
     }
   }
 
+  instance.on("$receive:files", function (files) {
+    if (!files) return;
+    instance.set('files', _mapInstanceProperty(files).call(files, normalizeFile));
+  });
+
   function addFiles(_x) {
     return _addFiles.apply(this, arguments);
   }
@@ -205,4 +209,13 @@ export function useFiles(isValidType, upload) {
     addFiles: addFiles,
     removeFile: removeFile
   };
+}
+
+function normalizeFile(file) {
+  return _extends({
+    status: UploadFileStatus.Done,
+    percent: 100,
+    uid: uid++,
+    raw: file
+  }, file);
 }

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.0-beta.2
+ * @king-design v3.1.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -60,4 +60,4 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "3.1.0-beta.2";
+export declare const version = "3.1.0";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v3.1.0-beta.2
+ * @king-design v3.1.0
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -62,5 +62,5 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '3.1.0-beta.2';
+export var version = '3.1.0';
 /* generate end */

package/es/site/data/components/config/demos/basic/index.d.ts

@@ -0,0 +1,5 @@
+export { default as data } from './index.json';
+import { Component } from 'intact';
+export default class extends Component {
+    static template: string | import("intact").Template<any>;
+}

package/es/site/data/components/config/demos/basic/index.js

@@ -0,0 +1,17 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+export { default as data } from './index.json';
+import { Component } from 'intact';
+import template from './index.vdt';
+
+var default_1 = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(default_1, _Component);
+
+  function default_1() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return default_1;
+}(Component);
+
+default_1.template = template;
+export { default_1 as default };

package/es/site/data/components/config/demos/basic/react.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export default class Demo extends React.Component {
+    render(): JSX.Element;
+}

package/es/site/data/components/config/demos/basic/react.js

@@ -0,0 +1,29 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import React from 'react';
+import { ConfigProvider, Button, Input } from '@king-design/react';
+
+var Demo = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Demo, _React$Component);
+
+  function Demo() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+
+  var _proto = Demo.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement(ConfigProvider, {
+      value: {
+        classNamePrefix: 'kd'
+      }
+    }, /*#__PURE__*/React.createElement(Button, null, "Button"), /*#__PURE__*/React.createElement("div", {
+      style: {
+        "marginTop": "8px"
+      }
+    }, /*#__PURE__*/React.createElement(Input, null)));
+  };
+
+  return Demo;
+}(React.Component);
+
+export { Demo as default };

package/es/site/data/components/config/index.d.ts

@@ -0,0 +1,57 @@
+import { Component } from 'intact';
+import Article from '~/../src/components/article';
+export default class extends Article {
+    static sidebar: {
+        组件: {
+            title: string;
+            category: string;
+            order: number;
+            sidebar: string;
+            path: string;
+        }[];
+        undefined: ({
+            title: string;
+            order: number;
+            sidebar: string;
+            disabled: boolean;
+            path: string;
+        } | {
+            title: string;
+            order: number;
+            sidebar: string;
+            path: string;
+            disabled?: undefined;
+        })[];
+    };
+    static data: {
+        setting: {
+            title: string;
+            category: string;
+            order: number;
+            sidebar: string;
+        };
+        contents: string;
+        index: string;
+        catalogs: {
+            text: string;
+            level: number;
+            id: string;
+        }[];
+    };
+    static defaults: () => {
+        demos: Component<any, {}, {}, {}>[];
+        setting: {
+            title: string;
+            category: string;
+            order: number;
+            sidebar: string;
+        };
+        contents: string;
+        index: string;
+        catalogs: {
+            text: string;
+            level: number;
+            id: string;
+        }[];
+    };
+}

package/es/site/data/components/config/index.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _keysInstanceProperty from "@babel/runtime-corejs3/core-js/instance/keys";
+import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
+import Article from '~/../src/components/article';
+import data from './index.json';
+import sidebar from '~/doc.json';
+
+var r = require.context('./', true, /demos.*(index|demo).ts/);
+
+var keys = _keysInstanceProperty(r).call(r);
+
+var demos = [];
+
+for (var i = 0; i < keys.length; i++) {
+  var file = keys[i];
+  if (!_startsWithInstanceProperty(file).call(file, '.')) continue; // if we found demo.js then ignore index.js
+
+  if (/demo.ts$/.test(file)) i++;
+  demos.push(r(file));
+}
+
+var default_1 = /*#__PURE__*/function (_Article) {
+  _inheritsLoose(default_1, _Article);
+
+  function default_1() {
+    return _Article.apply(this, arguments) || this;
+  }
+
+  return default_1;
+}(Article);
+
+default_1.sidebar = sidebar;
+default_1.data = data;
+
+default_1.defaults = function () {
+  return _extends({}, Article.defaults, data, {
+    demos: demos
+  });
+};
+
+export { default_1 as default };

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

@@ -50,7 +50,8 @@ var default_1 = /*#__PURE__*/function (_Component) {
   };
 
   _proto.filter = function filter() {
-    var _context2;
+    var _context2,
+        _this2 = this;
 
     var keywords = _trimInstanceProperty(_context2 = this.get('keywords')).call(_context2).toLowerCase();
 
@@ -59,7 +60,7 @@ var default_1 = /*#__PURE__*/function (_Component) {
     return _filterInstanceProperty(fonts).call(fonts, function (font) {
       var _context3, _context4;
 
-      return _includesInstanceProperty(_context3 = font[0]).call(_context3, keywords) || font[1] && _includesInstanceProperty(_context4 = font[1]).call(_context4, keywords);
+      return _includesInstanceProperty(_context3 = _this2.config.k + "-icon-" + font[0]).call(_context3, keywords) || font[1] && _includesInstanceProperty(_context4 = font[1]).call(_context4, keywords);
     });
   };
 

package/es/site/data/components/input/demos/blocks/react.js

@@ -1,6 +1,6 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import React from 'react';
-import { Input, Button, Icon } from '@king-design/react';
+import { Input, Button, Icon, ButtonGroup } from '@king-design/react';
 import './index.styl';
 
 var Demo = /*#__PURE__*/function (_React$Component) {
@@ -25,6 +25,16 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(Icon, {
         className: "k-icon-search"
       })))
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
+      placeholder: "please enter",
+      slotAppend: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, null, "\u63D0\u4EA4"))
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
+      placeholder: "please enter",
+      slotAppend: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+        type: "primary"
+      }, "\u63D0\u4EA4"), /*#__PURE__*/React.createElement(Button, {
+        type: "primary"
+      }, "\u521B\u5EFA")))
     }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
       placeholder: "please enter",
       slotAppend: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {

package/es/site/data/components/menu/demos/basic/react.js

@@ -66,8 +66,8 @@ var Demo = /*#__PURE__*/function (_React$Component) {
       className: "ion-star"
     }), "menu 2"), /*#__PURE__*/React.createElement(MenuItem, {
       key: "3"
-    }, /*#__PURE__*/React.createElement("i", {
-      className: "k-icon ion-heart"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      className: "ion-heart"
     }), "menu 3", /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, {
       key: "3-1"
     }, "sub menu 1"), /*#__PURE__*/React.createElement(MenuItem, {