@king-design/vue 2.1.4 → 2.1.6

package/components/layout/layout.js

@@ -8,51 +8,66 @@ import { ROOT_LAYOUT, LAYOUT, getStyle } from './helpers';
 import { useParse } from './useParse';
 export var Layout = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Layout, _Component);
+
   function Layout() {
     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.parse = useParse();
     _this.layout = inject(LAYOUT, null);
     return _this;
   }
+
   var _proto = Layout.prototype;
+
   _proto.init = function init() {
     provide(LAYOUT, this);
+
     if (!this.layout) {
       provide(ROOT_LAYOUT, this);
     }
   };
+
   _proto.getClassNames = function getClassNames() {
     var _ref;
+
     var _this$get = this.get(),
-      className = _this$get.className,
-      children = _this$get.children;
+        className = _this$get.className,
+        children = _this$get.children;
+
     var _this$parse = this.parse(),
-      hasAside = _this$parse.hasAside;
+        hasAside = _this$parse.hasAside;
+
     return _ref = {
       'k-layout': true
     }, _ref["k-has-aside"] = hasAside, _ref[makeLayoutStyles()] = true, _ref[className] = className, _ref;
   };
+
   _proto.getStyles = function getStyles() {
     var style = this.get('style');
     var layout = this.layout;
     if (!layout) return style;
+
     var _layout$parse = layout.parse(),
-      hasFixedHeader = _layout$parse.hasFixedHeader,
-      headerHeight = _layout$parse.headerHeight,
-      hasFixedAside = _layout$parse.hasFixedAside,
-      asideWidth = _layout$parse.asideWidth;
-    if (!hasFixedHeader && !hasFixedAside) return style;
-    // add margin-top if the parent layout has fixed header
+        hasFixedHeader = _layout$parse.hasFixedHeader,
+        headerHeight = _layout$parse.headerHeight,
+        hasFixedAside = _layout$parse.hasFixedAside,
+        asideWidth = _layout$parse.asideWidth;
+
+    if (!hasFixedHeader && !hasFixedAside) return style; // add margin-top if the parent layout has fixed header
+
     return addStyle(style, {
       marginTop: hasFixedHeader ? getStyle(headerHeight) : null,
       paddingLeft: hasFixedAside ? getStyle(asideWidth) : null
     });
   };
+
   return Layout;
 }(Component);
 Layout.template = template;

package/components/layout/styles.js

@@ -10,39 +10,50 @@ var defaults = {
   get transition() {
     return theme.transition.large;
   },
+
   get color() {
     return menu.item.color;
   },
+
   get bgColor() {
     return menu.bgColor;
   },
+
   light: {
     get color() {
       return menu.light.bgColor;
     },
+
     get bgColor() {
       return menu.light.bgColor;
     },
+
     get border() {
       return menu.light.border;
     }
+
   },
   white: {
     get color() {
       return menu.white.bgColor;
     },
+
     get bgColor() {
       return menu.white.bgColor;
     },
+
     get border() {
       return menu.white.border;
     }
+
   },
+
   get collapsedWidth() {
     return "calc(" + getLeft(menu.item.padding) + " * 2 + " + menu.icon.width + ")";
   },
-  footerPadding: '24px 50px'
-  // bodyMargin: '0 20px',
+
+  footerPadding: '24px 50px' // bodyMargin: '0 20px',
+
 };
 var layout;
 setDefault(function () {

package/components/layout/template.vdt.js

@@ -5,9 +5,11 @@ export default function ($props, $blocks, $__proto__) {
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
+
   var _this$get = this.get(),
-    children = _this$get.children,
-    style = _this$get.style;
+      children = _this$get.children,
+      style = _this$get.style;
+
   return _$cv('div', _extends({
     'className': _$cn(this.getClassNames()),
     'style': this.getStyles ? this.getStyles() : style

package/components/layout/useParse.js

@@ -14,6 +14,7 @@ export function useParse() {
   var asideWidth;
   onBeforeMount(parse);
   onBeforeUpdate(parse);
+
   function parse() {
     hasAside = false;
     hasFixedHeader = false;
@@ -24,26 +25,32 @@ export function useParse() {
       if (isComponentVNode(vNode, Aside)) {
         hasAside = true;
         var props = vNode.props || EMPTY_OBJ;
+
         if (props.width) {
           asideWidth = props.width;
         }
+
         if (props.collapse) {
           asideWidth = getCollapseWidth();
         }
+
         if (props.fixed) {
           hasFixedAside = true;
         }
       } else if (isComponentVNode(vNode, Header)) {
         var _props = vNode.props || EMPTY_OBJ;
+
         if (_props.height) {
           headerHeight = _props.height;
         }
+
         if (_props.fixed) {
           hasFixedHeader = true;
         }
       }
     });
   }
+
   return function () {
     return {
       hasAside: hasAside,

package/components/menu/index.spec.js

@@ -15,228 +15,281 @@ describe('Menu', function () {
   });
   it('expand and shrink sub menu', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, title;
+
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
-          _context.next = 3;
-          return wait();
-        case 3:
-          // shrink
-          title = element.querySelector('.k-expanded .k-menu-title');
-          title.click();
-          _context.next = 7;
-          return wait(500);
-        case 7:
-          expect(element.outerHTML).to.matchSnapshot();
-          expect(instance.get('expandedKeys')).to.eql([]);
-          title.click();
-          _context.next = 12;
-          return wait(500);
-        case 12:
-          expect(element.outerHTML).to.matchSnapshot();
-          expect(instance.get('expandedKeys')).to.eql(['3']);
-        case 14:
-        case "end":
-          return _context.stop();
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            _context.next = 3;
+            return wait();
+
+          case 3:
+            // shrink
+            title = element.querySelector('.k-expanded .k-menu-title');
+            title.click();
+            _context.next = 7;
+            return wait(500);
+
+          case 7:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(instance.get('expandedKeys')).to.eql([]);
+            title.click();
+            _context.next = 12;
+            return wait(500);
+
+          case 12:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(instance.get('expandedKeys')).to.eql(['3']);
+
+          case 14:
+          case "end":
+            return _context.stop();
+        }
       }
     }, _callee);
   })));
   it('select', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var _mount2, instance, element, _element$querySelecto, title, disabledTitle, subTitle;
+
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          _mount2 = mount(CollapseDemo), instance = _mount2[0], element = _mount2[1];
-          instance.set('collapse', false);
-          _context2.next = 4;
-          return wait();
-        case 4:
-          expect(element.innerHTML).to.matchSnapshot();
-          _element$querySelecto = element.querySelectorAll('.k-menu-title'), title = _element$querySelecto[0], disabledTitle = _element$querySelecto[1];
-          title.click();
-          _context2.next = 9;
-          return wait();
-        case 9:
-          expect(element.outerHTML).to.matchSnapshot();
-          expect(instance.get('selectedKey')).to.eql('1');
-          disabledTitle.click();
-          _context2.next = 14;
-          return wait();
-        case 14:
-          expect(element.outerHTML).to.matchSnapshot();
-          expect(instance.get('selectedKey')).to.eql('1');
-          subTitle = element.querySelector('.k-expanded .k-menu .k-menu-title');
-          subTitle.click();
-          _context2.next = 20;
-          return wait();
-        case 20:
-          expect(element.outerHTML).to.matchSnapshot();
-          expect(instance.get('selectedKey')).to.eql('3-1');
-          // clear
-          instance.set('selectedKey', '');
-          _context2.next = 25;
-          return wait();
-        case 25:
-          expect(element.querySelector('.k-highlighted')).to.be.null;
-        case 26:
-        case "end":
-          return _context2.stop();
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(CollapseDemo), instance = _mount2[0], element = _mount2[1];
+            instance.set('collapse', false);
+            _context2.next = 4;
+            return wait();
+
+          case 4:
+            expect(element.innerHTML).to.matchSnapshot();
+            _element$querySelecto = element.querySelectorAll('.k-menu-title'), title = _element$querySelecto[0], disabledTitle = _element$querySelecto[1];
+            title.click();
+            _context2.next = 9;
+            return wait();
+
+          case 9:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(instance.get('selectedKey')).to.eql('1');
+            disabledTitle.click();
+            _context2.next = 14;
+            return wait();
+
+          case 14:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(instance.get('selectedKey')).to.eql('1');
+            subTitle = element.querySelector('.k-expanded .k-menu .k-menu-title');
+            subTitle.click();
+            _context2.next = 20;
+            return wait();
+
+          case 20:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(instance.get('selectedKey')).to.eql('3-1'); // clear
+
+            instance.set('selectedKey', '');
+            _context2.next = 25;
+            return wait();
+
+          case 25:
+            expect(element.querySelector('.k-highlighted')).to.be.null;
+
+          case 26:
+          case "end":
+            return _context2.stop();
+        }
       }
     }, _callee2);
   })));
   it('collapse', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var _mount3, instance, element, title, dropdown;
+
     return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
-        case 0:
-          _mount3 = mount(CollapseDemo), instance = _mount3[0], element = _mount3[1];
-          instance.set('collapse', true);
-          _context3.next = 4;
-          return wait();
-        case 4:
-          expect(element.outerHTML).to.matchSnapshot();
-          // show sub menu
-          title = element.querySelector('.k-menu-item:nth-child(3) .k-menu-title');
-          dispatchEvent(title, 'mouseenter');
-          _context3.next = 9;
-          return wait();
-        case 9:
-          dropdown = getElement('.k-dropdown-menu.k-menu');
-          expect(dropdown.innerHTML).to.matchSnapshot();
-          dispatchEvent(dropdown.querySelector('.k-menu-item:nth-child(4) .k-menu-title'), 'mouseenter');
-          _context3.next = 14;
-          return wait();
-        case 14:
-          expect(getElement('.k-dropdown-menu.k-menu').innerHTML).to.matchSnapshot();
-          // hide all
-          dispatchEvent(document, 'click');
-          _context3.next = 18;
-          return wait(500);
-        case 18:
-          expect(getElement('.k-dropdown-menu.k-menu')).to.be.undefined;
-        case 19:
-        case "end":
-          return _context3.stop();
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount3 = mount(CollapseDemo), instance = _mount3[0], element = _mount3[1];
+            instance.set('collapse', true);
+            _context3.next = 4;
+            return wait();
+
+          case 4:
+            expect(element.outerHTML).to.matchSnapshot(); // show sub menu
+
+            title = element.querySelector('.k-menu-item:nth-child(3) .k-menu-title');
+            dispatchEvent(title, 'mouseenter');
+            _context3.next = 9;
+            return wait();
+
+          case 9:
+            dropdown = getElement('.k-dropdown-menu.k-menu');
+            expect(dropdown.innerHTML).to.matchSnapshot();
+            dispatchEvent(dropdown.querySelector('.k-menu-item:nth-child(4) .k-menu-title'), 'mouseenter');
+            _context3.next = 14;
+            return wait();
+
+          case 14:
+            expect(getElement('.k-dropdown-menu.k-menu').innerHTML).to.matchSnapshot(); // hide all
+
+            dispatchEvent(document, 'click');
+            _context3.next = 18;
+            return wait(500);
+
+          case 18:
+            expect(getElement('.k-dropdown-menu.k-menu')).to.be.undefined;
+
+          case 19:
+          case "end":
+            return _context3.stop();
+        }
       }
     }, _callee3);
   })));
   it('select collapsed menu', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var _mount4, instance, element, title, dropdown;
+
     return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          _mount4 = mount(CollapseDemo), instance = _mount4[0], element = _mount4[1];
-          instance.set('collapse', true);
-          title = element.querySelector('.k-menu-title');
-          title.click();
-          _context4.next = 6;
-          return wait();
-        case 6:
-          expect(element.outerHTML).to.matchSnapshot();
-          title = element.querySelector('.k-menu-item:nth-child(3) .k-menu-title');
-          dispatchEvent(title, 'mouseenter');
-          _context4.next = 11;
-          return wait();
-        case 11:
-          dropdown = getElement('.k-dropdown-menu.k-menu');
-          dropdown.querySelector('.k-menu-title').click();
-          _context4.next = 15;
-          return wait();
-        case 15:
-          expect(dropdown.innerHTML).to.matchSnapshot();
-          // should hide when select
-          _context4.next = 18;
-          return wait(500);
-        case 18:
-          expect(getElement('.k-dropdown-menu.k-menu')).to.be.undefined;
-        case 19:
-        case "end":
-          return _context4.stop();
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _mount4 = mount(CollapseDemo), instance = _mount4[0], element = _mount4[1];
+            instance.set('collapse', true);
+            title = element.querySelector('.k-menu-title');
+            title.click();
+            _context4.next = 6;
+            return wait();
+
+          case 6:
+            expect(element.outerHTML).to.matchSnapshot();
+            title = element.querySelector('.k-menu-item:nth-child(3) .k-menu-title');
+            dispatchEvent(title, 'mouseenter');
+            _context4.next = 11;
+            return wait();
+
+          case 11:
+            dropdown = getElement('.k-dropdown-menu.k-menu');
+            dropdown.querySelector('.k-menu-title').click();
+            _context4.next = 15;
+            return wait();
+
+          case 15:
+            expect(dropdown.innerHTML).to.matchSnapshot(); // should hide when select
+
+            _context4.next = 18;
+            return wait(500);
+
+          case 18:
+            expect(getElement('.k-dropdown-menu.k-menu')).to.be.undefined;
+
+          case 19:
+          case "end":
+            return _context4.stop();
+        }
       }
     }, _callee4);
   })));
   it('accordion', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
     var _mount5, instance, element, menu3, subMenu1, subMenu4, menu1;
+
     return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
-        case 0:
-          _mount5 = mount(AccordionDemo), instance = _mount5[0], element = _mount5[1];
-          menu3 = element.children[2];
-          subMenu1 = menu3.querySelector('.k-menu').firstElementChild.querySelector('.k-menu-title');
-          subMenu1.click();
-          _context5.next = 6;
-          return wait();
-        case 6:
-          expect(element.innerHTML).to.matchSnapshot();
-          expect(instance.get('expandedKeys')).to.eql(['3', '3-1']);
-          subMenu4 = menu3.querySelector('.k-menu').lastElementChild.querySelector('.k-menu-title');
-          subMenu4.click();
-          _context5.next = 12;
-          return wait();
-        case 12:
-          expect(element.innerHTML).to.matchSnapshot();
-          expect(instance.get('expandedKeys')).to.eql(['3', '3-4']);
-          menu1 = element.firstElementChild.querySelector('.k-menu-title');
-          menu1.click();
-          _context5.next = 18;
-          return wait();
-        case 18:
-          expect(element.innerHTML).to.matchSnapshot();
-          expect(instance.get('expandedKeys')).to.eql(['3-4', '1']);
-          menu3.querySelector('.k-menu-title').click();
-          _context5.next = 23;
-          return wait();
-        case 23:
-          expect(element.innerHTML).to.matchSnapshot();
-          expect(instance.get('expandedKeys')).to.eql(['3-4', '3']);
-        case 25:
-        case "end":
-          return _context5.stop();
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _mount5 = mount(AccordionDemo), instance = _mount5[0], element = _mount5[1];
+            menu3 = element.children[2];
+            subMenu1 = menu3.querySelector('.k-menu').firstElementChild.querySelector('.k-menu-title');
+            subMenu1.click();
+            _context5.next = 6;
+            return wait();
+
+          case 6:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('expandedKeys')).to.eql(['3', '3-1']);
+            subMenu4 = menu3.querySelector('.k-menu').lastElementChild.querySelector('.k-menu-title');
+            subMenu4.click();
+            _context5.next = 12;
+            return wait();
+
+          case 12:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('expandedKeys')).to.eql(['3', '3-4']);
+            menu1 = element.firstElementChild.querySelector('.k-menu-title');
+            menu1.click();
+            _context5.next = 18;
+            return wait();
+
+          case 18:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('expandedKeys')).to.eql(['3-4', '1']);
+            menu3.querySelector('.k-menu-title').click();
+            _context5.next = 23;
+            return wait();
+
+          case 23:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('expandedKeys')).to.eql(['3-4', '3']);
+
+          case 25:
+          case "end":
+            return _context5.stop();
+        }
       }
     }, _callee5);
   })));
   it('expand when set selectedKey', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
     var Demo, _mount6, instance, expandedKeys;
+
     return _regeneratorRuntime.wrap(function _callee6$(_context7) {
-      while (1) switch (_context7.prev = _context7.next) {
-        case 0:
-          Demo = /*#__PURE__*/function (_Component) {
-            _inheritsLoose(Demo, _Component);
-            function Demo() {
-              var _context6;
-              var _this;
-              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-                args[_key] = arguments[_key];
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context6;
+
+                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(_context6 = [this]).call(_context6, args)) || this;
+                _this.Menu = Menu;
+                _this.MenuItem = MenuItem;
+                return _this;
               }
-              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context6 = [this]).call(_context6, args)) || this;
-              _this.Menu = Menu;
-              _this.MenuItem = MenuItem;
-              return _this;
-            }
-            Demo.defaults = function defaults() {
-              return {
-                expandedKeys: [],
-                selectedKey: '1-3',
-                list: ['1-1', '1-2']
+
+              Demo.defaults = function defaults() {
+                return {
+                  expandedKeys: [],
+                  selectedKey: '1-3',
+                  list: ['1-1', '1-2']
+                };
               };
-            };
-            return Demo;
-          }(Component);
-          Demo.template = "\n                var Menu = this.Menu;\n                var MenuItem = this.MenuItem;\n                <Menu\n                    v-model:expandedKeys=\"expandedKeys\"\n                    v-model:selectedKey=\"selectedKey\"\n                >\n                    <MenuItem key=\"1\">\n                        <Menu>\n                            <MenuItem v-for={this.get('list')} key={$value}>{$value}</MenuItem>\n                        </Menu>\n                    </MenuItem>\n                </Menu>\n            ";
-          _mount6 = mount(Demo), instance = _mount6[0];
-          _context7.next = 5;
-          return wait();
-        case 5:
-          instance.set('list', ['1-1', '1-2', '1-3']);
-          _context7.next = 8;
-          return wait();
-        case 8:
-          expandedKeys = instance.get('expandedKeys');
-          expect(_includesInstanceProperty(expandedKeys).call(expandedKeys, '1')).to.be.true;
-        case 10:
-        case "end":
-          return _context7.stop();
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                var Menu = this.Menu;\n                var MenuItem = this.MenuItem;\n                <Menu\n                    v-model:expandedKeys=\"expandedKeys\"\n                    v-model:selectedKey=\"selectedKey\"\n                >\n                    <MenuItem key=\"1\">\n                        <Menu>\n                            <MenuItem v-for={this.get('list')} key={$value}>{$value}</MenuItem>\n                        </Menu>\n                    </MenuItem>\n                </Menu>\n            ";
+            _mount6 = mount(Demo), instance = _mount6[0];
+            _context7.next = 5;
+            return wait();
+
+          case 5:
+            instance.set('list', ['1-1', '1-2', '1-3']);
+            _context7.next = 8;
+            return wait();
+
+          case 8:
+            expandedKeys = instance.get('expandedKeys');
+            expect(_includesInstanceProperty(expandedKeys).call(expandedKeys, '1')).to.be.true;
+
+          case 10:
+          case "end":
+            return _context7.stop();
+        }
       }
     }, _callee6);
   })));