@king-design/vue 2.1.4 → 2.1.5

package/components/split/index.spec.js

@@ -8,14 +8,16 @@ import RangeDemo from '~/components/split/demos/range';
 import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
 import { createVNode as h, Component } from 'intact-vue-next';
 import { Split } from './';
+
 var test = function test(sizes, split) {
   // @ts-ignore
   var _split$size = split.size,
-    firstSize = _split$size.firstSize,
-    lastSize = _split$size.lastSize;
+      firstSize = _split$size.firstSize,
+      lastSize = _split$size.lastSize;
   expect(firstSize.value).to.eq(sizes[0]);
   expect(lastSize.value).to.eq(sizes[1]);
 };
+
 describe('Split', function () {
   afterEach(function () {
     return unmount();
@@ -23,263 +25,305 @@ describe('Split', function () {
   it('should fix leftSize and rightSize', function () {
     var Demo = /*#__PURE__*/function (_Component) {
       _inheritsLoose(Demo, _Component);
+
       function Demo() {
         return _Component.apply(this, arguments) || this;
       }
+
       return Demo;
     }(Component);
+
     Demo.template = function () {
       return h(Split, {
         lastSize: '10px',
         firstSize: '10px'
       });
     };
+
     var _mount = mount(Demo),
-      instance = _mount[0],
-      element = _mount[1];
+        instance = _mount[0],
+        element = _mount[1];
+
     expect(element.outerHTML).to.matchSnapshot();
   });
   it('should drag to resize horizontal panel', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount2, instance, element, _instance$$lastInput$, split1, split2, _element$querySelecto, demo1, demo2, dragLine;
+
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _mount2 = mount(BasicDemo), instance = _mount2[0], element = _mount2[1];
-          _instance$$lastInput$ = instance.$lastInput.children, split1 = _instance$$lastInput$[1].children, split2 = _instance$$lastInput$[2].children;
-          _element$querySelecto = element.querySelectorAll('.k-split'), demo1 = _element$querySelecto[1], demo2 = _element$querySelecto[2];
-          dragLine = demo1.querySelector('.k-split-line-wrapper'); // right click does not work
-          dispatchEvent(dragLine, 'mousedown', {
-            which: 2
-          });
-          _context.next = 7;
-          return wait();
-        case 7:
-          // @ts-ignore
-          expect(split1.drag.dragging.value).to.be.false;
-          expect(demo1.outerHTML).to.matchSnapshot();
-          // moveStart
-          dispatchEvent(dragLine, 'mousedown', {
-            which: 1,
-            clientX: 80,
-            clientY: 0
-          });
-          // move 
-          dispatchEvent(document, 'mousemove', {
-            clientX: 100,
-            clientY: 0
-          });
-          _context.next = 13;
-          return wait();
-        case 13:
-          expect(demo1.outerHTML).to.matchSnapshot();
-          test(['100px', 'auto'], split1);
-          // move to max
-          dispatchEvent(document, 'mousemove', {
-            clientX: 1000,
-            clientY: 0
-          });
-          _context.next = 18;
-          return wait();
-        case 18:
-          expect(demo1.outerHTML).to.matchSnapshot();
-          test(['794px', 'auto'], split1);
-          // move to min
-          dispatchEvent(document, 'mousemove', {
-            clientX: -1,
-            clientY: 0
-          });
-          _context.next = 23;
-          return wait();
-        case 23:
-          expect(demo1.outerHTML).to.matchSnapshot();
-          test(['0px', 'auto'], split1);
-          // moveEnd
-          dispatchEvent(document, 'mouseup');
-          dragLine = demo2.querySelector('.k-split-line-wrapper');
-          // moveStart
-          dispatchEvent(dragLine, 'mousedown', {
-            which: 1,
-            clientX: 714,
-            clientY: 0
-          });
-          // move 
-          dispatchEvent(document, 'mousemove', {
-            clientX: 600,
-            clientY: 0
-          });
-          _context.next = 31;
-          return wait();
-        case 31:
-          expect(demo2.outerHTML).to.matchSnapshot();
-          test(['auto', 800 - 600 - 6 + "px"], split2);
-          // move to max
-          dispatchEvent(document, 'mousemove', {
-            clientX: -1,
-            clientY: 0
-          });
-          _context.next = 36;
-          return wait();
-        case 36:
-          expect(demo2.outerHTML).to.matchSnapshot();
-          test(['auto', 800 - 6 + "px"], split2);
-          // move to min
-          dispatchEvent(document, 'mousemove', {
-            clientX: 1000,
-            clientY: 0
-          });
-          expect(demo2.outerHTML).to.matchSnapshot();
-          test(['auto', "0px"], split2);
-          // moveEnd
-          dispatchEvent(document, 'mouseup');
-        case 42:
-        case "end":
-          return _context.stop();
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount2 = mount(BasicDemo), instance = _mount2[0], element = _mount2[1];
+            _instance$$lastInput$ = instance.$lastInput.children, split1 = _instance$$lastInput$[1].children, split2 = _instance$$lastInput$[2].children;
+            _element$querySelecto = element.querySelectorAll('.k-split'), demo1 = _element$querySelecto[1], demo2 = _element$querySelecto[2];
+            dragLine = demo1.querySelector('.k-split-line-wrapper'); // right click does not work
+
+            dispatchEvent(dragLine, 'mousedown', {
+              which: 2
+            });
+            _context.next = 7;
+            return wait();
+
+          case 7:
+            // @ts-ignore
+            expect(split1.drag.dragging.value).to.be.false;
+            expect(demo1.outerHTML).to.matchSnapshot(); // moveStart
+
+            dispatchEvent(dragLine, 'mousedown', {
+              which: 1,
+              clientX: 80,
+              clientY: 0
+            }); // move 
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 100,
+              clientY: 0
+            });
+            _context.next = 13;
+            return wait();
+
+          case 13:
+            expect(demo1.outerHTML).to.matchSnapshot();
+            test(['100px', 'auto'], split1); // move to max
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 1000,
+              clientY: 0
+            });
+            _context.next = 18;
+            return wait();
+
+          case 18:
+            expect(demo1.outerHTML).to.matchSnapshot();
+            test(['794px', 'auto'], split1); // move to min
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: -1,
+              clientY: 0
+            });
+            _context.next = 23;
+            return wait();
+
+          case 23:
+            expect(demo1.outerHTML).to.matchSnapshot();
+            test(['0px', 'auto'], split1); // moveEnd
+
+            dispatchEvent(document, 'mouseup');
+            dragLine = demo2.querySelector('.k-split-line-wrapper'); // moveStart
+
+            dispatchEvent(dragLine, 'mousedown', {
+              which: 1,
+              clientX: 714,
+              clientY: 0
+            }); // move 
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 600,
+              clientY: 0
+            });
+            _context.next = 31;
+            return wait();
+
+          case 31:
+            expect(demo2.outerHTML).to.matchSnapshot();
+            test(['auto', 800 - 600 - 6 + "px"], split2); // move to max
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: -1,
+              clientY: 0
+            });
+            _context.next = 36;
+            return wait();
+
+          case 36:
+            expect(demo2.outerHTML).to.matchSnapshot();
+            test(['auto', 800 - 6 + "px"], split2); // move to min
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 1000,
+              clientY: 0
+            });
+            expect(demo2.outerHTML).to.matchSnapshot();
+            test(['auto', "0px"], split2); // moveEnd
+
+            dispatchEvent(document, 'mouseup');
+
+          case 42:
+          case "end":
+            return _context.stop();
+        }
       }
     }, _callee);
   })));
   it('should drag to resize vertical panel for lastSize', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var _mount3, instance, element, split, dragLine;
+
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          _mount3 = mount(VerticalDemo), instance = _mount3[0], element = _mount3[1];
-          split = instance.$lastInput.children;
-          dragLine = element.querySelector('.k-split-line-wrapper'); // moveStart
-          dispatchEvent(dragLine, 'mousedown', {
-            which: 1,
-            clientX: 0,
-            clientY: 994
-          });
-          // move 
-          dispatchEvent(document, 'mousemove', {
-            clientX: 0,
-            clientY: 800
-          });
-          expect(element.outerHTML).to.matchSnapshot();
-          test(['auto', 1080 - 800 - 6 + "px"], split);
-          // move to max
-          dispatchEvent(document, 'mousemove', {
-            clientX: 0,
-            clientY: -1
-          });
-          expect(element.outerHTML).to.matchSnapshot();
-          test(['auto', 1080 - 6 + "px"], split);
-          // move to min
-          dispatchEvent(document, 'mousemove', {
-            clientX: 0,
-            clientY: 1100
-          });
-          expect(element.outerHTML).to.matchSnapshot();
-          test(['auto', "0px"], split);
-          // moveEnd
-          dispatchEvent(document, 'mouseup');
-        case 14:
-        case "end":
-          return _context2.stop();
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount3 = mount(VerticalDemo), instance = _mount3[0], element = _mount3[1];
+            split = instance.$lastInput.children;
+            dragLine = element.querySelector('.k-split-line-wrapper'); // moveStart
+
+            dispatchEvent(dragLine, 'mousedown', {
+              which: 1,
+              clientX: 0,
+              clientY: 994
+            }); // move 
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 0,
+              clientY: 800
+            });
+            expect(element.outerHTML).to.matchSnapshot();
+            test(['auto', 1080 - 800 - 6 + "px"], split); // move to max
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 0,
+              clientY: -1
+            });
+            expect(element.outerHTML).to.matchSnapshot();
+            test(['auto', 1080 - 6 + "px"], split); // move to min
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 0,
+              clientY: 1100
+            });
+            expect(element.outerHTML).to.matchSnapshot();
+            test(['auto', "0px"], split); // moveEnd
+
+            dispatchEvent(document, 'mouseup');
+
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
       }
     }, _callee2);
   })));
   it('should drag to resize vertical panel for firstSize', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var Demo, _mount4, instance, element, split, dragLine;
+
     return _regeneratorRuntime.wrap(function _callee3$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          Demo = /*#__PURE__*/function (_Component2) {
-            _inheritsLoose(Demo, _Component2);
-            function Demo() {
-              var _context3;
-              var _this;
-              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-                args[_key] = arguments[_key];
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component2) {
+              _inheritsLoose(Demo, _Component2);
+
+              function Demo() {
+                var _context3;
+
+                var _this;
+
+                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                  args[_key] = arguments[_key];
+                }
+
+                _this = _Component2.call.apply(_Component2, _concatInstanceProperty(_context3 = [this]).call(_context3, args)) || this;
+                _this.Split = Split;
+                return _this;
               }
-              _this = _Component2.call.apply(_Component2, _concatInstanceProperty(_context3 = [this]).call(_context3, args)) || this;
-              _this.Split = Split;
-              return _this;
-            }
-            return Demo;
-          }(Component);
-          Demo.template = "\n                const {Split} = this;\n                <Split mode=\"vertical\" firstSize=\"80px\">\n                    <b:first><div class=\"panel\">top</div></b:first>\n                    <b:last><div class=\"panel\">bottom</div></b:last>\n                </Split>\n            ";
-          _mount4 = mount(Demo), instance = _mount4[0], element = _mount4[1];
-          split = instance.$lastInput.children;
-          dragLine = element.querySelector('.k-split-line-wrapper'); // moveStart
-          dispatchEvent(dragLine, 'mousedown', {
-            which: 1,
-            clientX: 0,
-            clientY: 80
-          });
-          // move 
-          dispatchEvent(document, 'mousemove', {
-            clientX: 0,
-            clientY: 800
-          });
-          _context4.next = 9;
-          return wait();
-        case 9:
-          expect(element.outerHTML).to.matchSnapshot();
-          test(['800px', 'auto'], split);
-          // move to max
-          dispatchEvent(document, 'mousemove', {
-            clientX: 0,
-            clientY: 1100
-          });
-          _context4.next = 14;
-          return wait();
-        case 14:
-          expect(element.outerHTML).to.matchSnapshot();
-          test([1080 - 6 + "px", 'auto'], split);
-          // move to min
-          dispatchEvent(document, 'mousemove', {
-            clientX: 0,
-            clientY: -1
-          });
-          _context4.next = 19;
-          return wait();
-        case 19:
-          expect(element.outerHTML).to.matchSnapshot();
-          test(["0px", 'auto'], split);
-          // moveEnd
-          dispatchEvent(document, 'mouseup');
-        case 22:
-        case "end":
-          return _context4.stop();
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Split} = this;\n                <Split mode=\"vertical\" firstSize=\"80px\">\n                    <b:first><div class=\"panel\">top</div></b:first>\n                    <b:last><div class=\"panel\">bottom</div></b:last>\n                </Split>\n            ";
+            _mount4 = mount(Demo), instance = _mount4[0], element = _mount4[1];
+            split = instance.$lastInput.children;
+            dragLine = element.querySelector('.k-split-line-wrapper'); // moveStart
+
+            dispatchEvent(dragLine, 'mousedown', {
+              which: 1,
+              clientX: 0,
+              clientY: 80
+            }); // move 
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 0,
+              clientY: 800
+            });
+            _context4.next = 9;
+            return wait();
+
+          case 9:
+            expect(element.outerHTML).to.matchSnapshot();
+            test(['800px', 'auto'], split); // move to max
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 0,
+              clientY: 1100
+            });
+            _context4.next = 14;
+            return wait();
+
+          case 14:
+            expect(element.outerHTML).to.matchSnapshot();
+            test([1080 - 6 + "px", 'auto'], split); // move to min
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 0,
+              clientY: -1
+            });
+            _context4.next = 19;
+            return wait();
+
+          case 19:
+            expect(element.outerHTML).to.matchSnapshot();
+            test(["0px", 'auto'], split); // moveEnd
+
+            dispatchEvent(document, 'mouseup');
+
+          case 22:
+          case "end":
+            return _context4.stop();
+        }
       }
     }, _callee3);
   })));
   it('should not drag out of the min/max range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var _mount5, instance, element, split, dragLine;
+
     return _regeneratorRuntime.wrap(function _callee4$(_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
-        case 0:
-          _mount5 = mount(RangeDemo), instance = _mount5[0], element = _mount5[1];
-          split = instance.$lastInput.children;
-          dragLine = element.querySelector('.k-split-line-wrapper'); // moveStart
-          dispatchEvent(dragLine, 'mousedown', {
-            which: 1,
-            clientX: 80
-          });
-          // move to max
-          dispatchEvent(document, 'mousemove', {
-            clientX: 800
-          });
-          _context5.next = 7;
-          return wait();
-        case 7:
-          expect(element.outerHTML).to.matchSnapshot();
-          test(['410px', 'auto'], split);
-          // move to min
-          dispatchEvent(document, 'mousemove', {
-            clientX: 0
-          });
-          _context5.next = 12;
-          return wait();
-        case 12:
-          expect(element.outerHTML).to.matchSnapshot();
-          test(['40px', 'auto'], split);
-          // moveEnd
-          dispatchEvent(document, 'mouseup');
-        case 15:
-        case "end":
-          return _context5.stop();
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _mount5 = mount(RangeDemo), instance = _mount5[0], element = _mount5[1];
+            split = instance.$lastInput.children;
+            dragLine = element.querySelector('.k-split-line-wrapper'); // moveStart
+
+            dispatchEvent(dragLine, 'mousedown', {
+              which: 1,
+              clientX: 80
+            }); // move to max
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 800
+            });
+            _context5.next = 7;
+            return wait();
+
+          case 7:
+            expect(element.outerHTML).to.matchSnapshot();
+            test(['410px', 'auto'], split); // move to min
+
+            dispatchEvent(document, 'mousemove', {
+              clientX: 0
+            });
+            _context5.next = 12;
+            return wait();
+
+          case 12:
+            expect(element.outerHTML).to.matchSnapshot();
+            test(['40px', 'auto'], split); // moveEnd
+
+            dispatchEvent(document, 'mouseup');
+
+          case 15:
+          case "end":
+            return _context5.stop();
+        }
       }
     }, _callee4);
   })));

package/components/split/index.vdt.js

@@ -3,22 +3,25 @@ import { makeStyles } from './style';
 import { kls } from './style';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj, _style, _style2;
+
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
   var _$blocks = {};
   var __$blocks = {};
+
   var _this$get = this.get(),
-    mode = _this$get.mode;
+      mode = _this$get.mode;
+
   var _this$size = this.size,
-    firstSize = _this$size.firstSize,
-    lastSize = _this$size.lastSize;
+      firstSize = _this$size.firstSize,
+      lastSize = _this$size.lastSize;
   var _this$drag = this.drag,
-    firstRef = _this$drag.firstRef,
-    lastRef = _this$drag.lastRef,
-    elementRef = _this$drag.elementRef,
-    start = _this$drag.start,
-    dragging = _this$drag.dragging;
+      firstRef = _this$drag.firstRef,
+      lastRef = _this$drag.lastRef,
+      elementRef = _this$drag.elementRef,
+      start = _this$drag.start,
+      dragging = _this$drag.dragging;
   var classNameObj = (_classNameObj = {
     'k-split': true
   }, _classNameObj["k-" + mode] = true, _classNameObj[makeStyles()] = true, _classNameObj['k-first-auto'] = firstSize.value === 'auto', _classNameObj['k-last-auto'] = lastSize.value === 'auto', _classNameObj['k-resizing'] = dragging.value, _classNameObj);
@@ -27,9 +30,11 @@ export default function ($props, $blocks, $__proto__) {
     return null;
   }, __$blocks['first'] = function ($super, data) {
     var block = $blocks['first'];
+
     var callBlock = function callBlock() {
       return _$blocks['first'].call($this, $super, data);
     };
+
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['first'](_$no)), 0, _$cn(kls('first')), {
     'style': (_style = {}, _style[stylePropName] = firstSize.value, _style)
@@ -37,9 +42,11 @@ export default function ($props, $blocks, $__proto__) {
     return _$ce(2, 'div', _$ce(2, 'div', null, 1, _$cn(kls('drag-lines'))), 2, _$cn(kls('line')));
   }, __$blocks['drag'] = function ($super, data) {
     var block = $blocks['drag'];
+
     var callBlock = function callBlock() {
       return _$blocks['drag'].call($this, $super, data);
     };
+
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['drag'](_$no)), 0, _$cn(kls('line-wrapper')), {
     'ev-mousedown': start
@@ -47,9 +54,11 @@ export default function ($props, $blocks, $__proto__) {
     return null;
   }, __$blocks['last'] = function ($super, data) {
     var block = $blocks['last'];
+
     var callBlock = function callBlock() {
       return _$blocks['last'].call($this, $super, data);
     };
+
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['last'](_$no)), 0, _$cn(kls('last')), {
     'style': (_style2 = {}, _style2[stylePropName] = lastSize.value, _style2)

package/components/split/style.d.ts

@@ -1,4 +1,4 @@
 import '../../styles/global';
-export type Mode = 'horizontal' | 'vertical';
+export declare type Mode = 'horizontal' | 'vertical';
 export declare const kls: (className: string) => string;
 export declare function makeStyles(): string;