@king-design/vue 2.1.4 → 2.1.5

package/components/colorpicker/index.spec.js

@@ -10,252 +10,300 @@ describe('Colorpicker', function () {
   beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var data, trigger;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          data = mount(BasicDemo);
-          instance = data[0];
-          element = data[1];
-          trigger = element.querySelector('.k-colorpicker-color');
-          trigger.click();
-          _context.next = 7;
-          return wait();
-        case 7:
-          picker = getElement('.k-colorpicker-content');
-        case 8:
-        case "end":
-          return _context.stop();
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            data = mount(BasicDemo);
+            instance = data[0];
+            element = data[1];
+            trigger = element.querySelector('.k-colorpicker-color');
+            trigger.click();
+            _context.next = 7;
+            return wait();
+
+          case 7:
+            picker = getElement('.k-colorpicker-content');
+
+          case 8:
+          case "end":
+            return _context.stop();
+        }
       }
     }, _callee);
   })));
   afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          unmount();
-          _context2.next = 3;
-          return wait(500);
-        case 3:
-        case "end":
-          return _context2.stop();
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            unmount();
+            _context2.next = 3;
+            return wait(500);
+
+          case 3:
+          case "end":
+            return _context2.stop();
+        }
       }
     }, _callee2);
   })));
   it('should select color by saturation', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var saturation, _saturation$getBoundi, left, top;
+
     return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
-        case 0:
-          expect(picker.innerHTML).to.matchSnapshot();
-          saturation = picker.querySelector('.k-colorpicker-saturation');
-          _saturation$getBoundi = saturation.getBoundingClientRect(), left = _saturation$getBoundi.left, top = _saturation$getBoundi.top;
-          dispatchEvent(saturation, 'mousedown', {
-            pageX: left + window.pageXOffset,
-            pageY: top + window.pageYOffset,
-            which: 1
-          });
-          _context3.next = 6;
-          return wait();
-        case 6:
-          expect(picker.innerHTML).to.matchSnapshot();
-          expect(instance.get('color')).to.eql('#ffffff');
-          dispatchEvent(saturation, 'mousemove', {
-            pageX: left + window.pageXOffset + 1,
-            pageY: top + window.pageYOffset + 1
-          });
-          _context3.next = 11;
-          return wait();
-        case 11:
-          expect(instance.get('color')).to.eql('#fdfcfc');
-          dispatchEvent(saturation, 'mouseup');
-          _context3.next = 15;
-          return wait();
-        case 15:
-        case "end":
-          return _context3.stop();
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            expect(picker.innerHTML).to.matchSnapshot();
+            saturation = picker.querySelector('.k-colorpicker-saturation');
+            _saturation$getBoundi = saturation.getBoundingClientRect(), left = _saturation$getBoundi.left, top = _saturation$getBoundi.top;
+            dispatchEvent(saturation, 'mousedown', {
+              pageX: left + window.pageXOffset,
+              pageY: top + window.pageYOffset,
+              which: 1
+            });
+            _context3.next = 6;
+            return wait();
+
+          case 6:
+            expect(picker.innerHTML).to.matchSnapshot();
+            expect(instance.get('color')).to.eql('#ffffff');
+            dispatchEvent(saturation, 'mousemove', {
+              pageX: left + window.pageXOffset + 1,
+              pageY: top + window.pageYOffset + 1
+            });
+            _context3.next = 11;
+            return wait();
+
+          case 11:
+            expect(instance.get('color')).to.eql('#fdfcfc');
+            dispatchEvent(saturation, 'mouseup');
+            _context3.next = 15;
+            return wait();
+
+          case 15:
+          case "end":
+            return _context3.stop();
+        }
       }
     }, _callee3);
   })));
   it('should change color by hue', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var hue, _hue$getBoundingClien, width, left;
+
     return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          hue = picker.querySelector('.k-colorpicker-hue .k-slider-track-wrapper');
-          _hue$getBoundingClien = hue.getBoundingClientRect(), width = _hue$getBoundingClien.width, left = _hue$getBoundingClien.left;
-          dispatchEvent(hue, 'click', {
-            clientX: 100 / 360 * width + left
-          });
-          // changing hue is throttled 50ms
-          _context4.next = 5;
-          return wait(100);
-        case 5:
-          expect(instance.get('color')).to.eql('#68d923');
-        case 6:
-        case "end":
-          return _context4.stop();
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            hue = picker.querySelector('.k-colorpicker-hue .k-slider-track-wrapper');
+            _hue$getBoundingClien = hue.getBoundingClientRect(), width = _hue$getBoundingClien.width, left = _hue$getBoundingClien.left;
+            dispatchEvent(hue, 'click', {
+              clientX: 100 / 360 * width + left
+            }); // changing hue is throttled 50ms
+
+            _context4.next = 5;
+            return wait(100);
+
+          case 5:
+            expect(instance.get('color')).to.eql('#68d923');
+
+          case 6:
+          case "end":
+            return _context4.stop();
+        }
       }
     }, _callee4);
   })));
   it('should change color by alpha', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
     var alpha, _alpha$getBoundingCli, width, left;
+
     return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
-        case 0:
-          alpha = picker.querySelector('.k-colorpicker-alpha .k-slider-track-wrapper');
-          _alpha$getBoundingCli = alpha.getBoundingClientRect(), width = _alpha$getBoundingCli.width, left = _alpha$getBoundingCli.left;
-          dispatchEvent(alpha, 'click', {
-            clientX: 0.5 * width + left
-          });
-          // changing alpha is throttled 50ms
-          _context5.next = 5;
-          return wait(100);
-        case 5:
-          expect(instance.get('color')).to.eql('rgba(217, 145, 35, 0.5)');
-        case 6:
-        case "end":
-          return _context5.stop();
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            alpha = picker.querySelector('.k-colorpicker-alpha .k-slider-track-wrapper');
+            _alpha$getBoundingCli = alpha.getBoundingClientRect(), width = _alpha$getBoundingCli.width, left = _alpha$getBoundingCli.left;
+            dispatchEvent(alpha, 'click', {
+              clientX: 0.5 * width + left
+            }); // changing alpha is throttled 50ms
+
+            _context5.next = 5;
+            return wait(100);
+
+          case 5:
+            expect(instance.get('color')).to.eql('rgba(217, 145, 35, 0.5)');
+
+          case 6:
+          case "end":
+            return _context5.stop();
+        }
       }
     }, _callee5);
   })));
   it('should change color by input', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
     var _picker$querySelector, hex, r, g, b, alpha, alphaText;
+
     return _regeneratorRuntime.wrap(function _callee6$(_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
-        case 0:
-          _picker$querySelector = picker.querySelectorAll('input'), hex = _picker$querySelector[0], r = _picker$querySelector[1], g = _picker$querySelector[2], b = _picker$querySelector[3], alpha = _picker$querySelector[4]; // should ignore invalid value
-          hex.value = 'test';
-          dispatchEvent(hex, 'input');
-          _context6.next = 5;
-          return wait();
-        case 5:
-          expect(instance.get('color')).to.eql('#d99123');
-          hex.value = '333';
-          dispatchEvent(hex, 'input');
-          _context6.next = 10;
-          return wait();
-        case 10:
-          expect(instance.get('color')).to.eql('#333333');
-          // drag to change alpha
-          alphaText = picker.querySelectorAll('.k-colorpicker-drag')[3];
-          dispatchEvent(alphaText, 'mousedown', {
-            clientX: 0,
-            which: 1
-          });
-          dispatchEvent(alphaText, 'mousemove', {
-            clientX: -1
-          });
-          _context6.next = 16;
-          return wait();
-        case 16:
-          expect(instance.get('color')).to.eql('rgba(51, 51, 51, 0.99)');
-          dispatchEvent(alphaText, 'mousemove', {
-            clientX: 1
-          });
-          _context6.next = 20;
-          return wait();
-        case 20:
-          expect(instance.get('color')).to.eql('#333333');
-          expect(picker.innerHTML).to.matchSnapshot();
-          dispatchEvent(alphaText, 'mouseup');
-          _context6.next = 25;
-          return wait();
-        case 25:
-          r.value = '1000';
-          dispatchEvent(r, 'input');
-          _context6.next = 29;
-          return wait();
-        case 29:
-          expect(instance.get('color')).to.eql('#ff3333');
-          alpha.value = '-1';
-          dispatchEvent(alpha, 'input');
-          _context6.next = 34;
-          return wait();
-        case 34:
-          expect(instance.get('color')).to.eql('rgba(255, 51, 51, 0)');
-        case 35:
-        case "end":
-          return _context6.stop();
+      while (1) {
+        switch (_context6.prev = _context6.next) {
+          case 0:
+            _picker$querySelector = picker.querySelectorAll('input'), hex = _picker$querySelector[0], r = _picker$querySelector[1], g = _picker$querySelector[2], b = _picker$querySelector[3], alpha = _picker$querySelector[4]; // should ignore invalid value
+
+            hex.value = 'test';
+            dispatchEvent(hex, 'input');
+            _context6.next = 5;
+            return wait();
+
+          case 5:
+            expect(instance.get('color')).to.eql('#d99123');
+            hex.value = '333';
+            dispatchEvent(hex, 'input');
+            _context6.next = 10;
+            return wait();
+
+          case 10:
+            expect(instance.get('color')).to.eql('#333333'); // drag to change alpha
+
+            alphaText = picker.querySelectorAll('.k-colorpicker-drag')[3];
+            dispatchEvent(alphaText, 'mousedown', {
+              clientX: 0,
+              which: 1
+            });
+            dispatchEvent(alphaText, 'mousemove', {
+              clientX: -1
+            });
+            _context6.next = 16;
+            return wait();
+
+          case 16:
+            expect(instance.get('color')).to.eql('rgba(51, 51, 51, 0.99)');
+            dispatchEvent(alphaText, 'mousemove', {
+              clientX: 1
+            });
+            _context6.next = 20;
+            return wait();
+
+          case 20:
+            expect(instance.get('color')).to.eql('#333333');
+            expect(picker.innerHTML).to.matchSnapshot();
+            dispatchEvent(alphaText, 'mouseup');
+            _context6.next = 25;
+            return wait();
+
+          case 25:
+            r.value = '1000';
+            dispatchEvent(r, 'input');
+            _context6.next = 29;
+            return wait();
+
+          case 29:
+            expect(instance.get('color')).to.eql('#ff3333');
+            alpha.value = '-1';
+            dispatchEvent(alpha, 'input');
+            _context6.next = 34;
+            return wait();
+
+          case 34:
+            expect(instance.get('color')).to.eql('rgba(255, 51, 51, 0)');
+
+          case 35:
+          case "end":
+            return _context6.stop();
+        }
       }
     }, _callee6);
   })));
   it('should change to hsv mode', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
     var _picker$querySelector2, first, second, color, hsl, _picker$querySelector3, hex, h, s;
+
     return _regeneratorRuntime.wrap(function _callee7$(_context7) {
-      while (1) switch (_context7.prev = _context7.next) {
-        case 0:
-          _picker$querySelector2 = picker.querySelectorAll('.k-colorpicker-drag'), first = _picker$querySelector2[0], second = _picker$querySelector2[1];
-          color = tinycolor(instance.get('color'));
-          hsl = color.toHsl();
-          console.log(hsl);
-          dispatchEvent(first, 'mousedown', {
-            which: 1
-          });
-          dispatchEvent(first, 'mouseup');
-          _context7.next = 8;
-          return wait();
-        case 8:
-          expect(picker.innerHTML).to.matchSnapshot();
-          dispatchEvent(first, 'mousedown', {
-            clientX: 0,
-            which: 1
-          });
-          dispatchEvent(first, 'mousemove', {
-            clientX: -1
-          });
-          _context7.next = 13;
-          return wait();
-        case 13:
-          expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(35, 72%, 49%)');
-          dispatchEvent(first, 'mousemove', {
-            clientX: 1
-          });
-          _context7.next = 17;
-          return wait();
-        case 17:
-          expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 72%, 49%)');
-          dispatchEvent(first, 'mouseup');
-          _context7.next = 21;
-          return wait();
-        case 21:
-          dispatchEvent(second, 'mousedown', {
-            clientX: 0,
-            which: 1
-          });
-          dispatchEvent(second, 'mousemove', {
-            clientX: -1
-          });
-          _context7.next = 25;
-          return wait();
-        case 25:
-          expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 71%, 49%)');
-          dispatchEvent(second, 'mousemove', {
-            clientX: 1
-          });
-          _context7.next = 29;
-          return wait();
-        case 29:
-          expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 73%, 49%)');
-          dispatchEvent(first, 'mouseup');
-          _context7.next = 33;
-          return wait();
-        case 33:
-          // input
-          _picker$querySelector3 = picker.querySelectorAll('input'), hex = _picker$querySelector3[0], h = _picker$querySelector3[1], s = _picker$querySelector3[2];
-          h.value = '1000';
-          dispatchEvent(h, 'input');
-          _context7.next = 38;
-          return wait();
-        case 38:
-          expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(359, 73%, 49%)');
-          s.value = '10';
-          dispatchEvent(s, 'input');
-          _context7.next = 43;
-          return wait();
-        case 43:
-          expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(358, 10%, 49%)');
-        case 44:
-        case "end":
-          return _context7.stop();
+      while (1) {
+        switch (_context7.prev = _context7.next) {
+          case 0:
+            _picker$querySelector2 = picker.querySelectorAll('.k-colorpicker-drag'), first = _picker$querySelector2[0], second = _picker$querySelector2[1];
+            color = tinycolor(instance.get('color'));
+            hsl = color.toHsl();
+            console.log(hsl);
+            dispatchEvent(first, 'mousedown', {
+              which: 1
+            });
+            dispatchEvent(first, 'mouseup');
+            _context7.next = 8;
+            return wait();
+
+          case 8:
+            expect(picker.innerHTML).to.matchSnapshot();
+            dispatchEvent(first, 'mousedown', {
+              clientX: 0,
+              which: 1
+            });
+            dispatchEvent(first, 'mousemove', {
+              clientX: -1
+            });
+            _context7.next = 13;
+            return wait();
+
+          case 13:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(35, 72%, 49%)');
+            dispatchEvent(first, 'mousemove', {
+              clientX: 1
+            });
+            _context7.next = 17;
+            return wait();
+
+          case 17:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 72%, 49%)');
+            dispatchEvent(first, 'mouseup');
+            _context7.next = 21;
+            return wait();
+
+          case 21:
+            dispatchEvent(second, 'mousedown', {
+              clientX: 0,
+              which: 1
+            });
+            dispatchEvent(second, 'mousemove', {
+              clientX: -1
+            });
+            _context7.next = 25;
+            return wait();
+
+          case 25:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 71%, 49%)');
+            dispatchEvent(second, 'mousemove', {
+              clientX: 1
+            });
+            _context7.next = 29;
+            return wait();
+
+          case 29:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(37, 73%, 49%)');
+            dispatchEvent(first, 'mouseup');
+            _context7.next = 33;
+            return wait();
+
+          case 33:
+            // input
+            _picker$querySelector3 = picker.querySelectorAll('input'), hex = _picker$querySelector3[0], h = _picker$querySelector3[1], s = _picker$querySelector3[2];
+            h.value = '1000';
+            dispatchEvent(h, 'input');
+            _context7.next = 38;
+            return wait();
+
+          case 38:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(359, 73%, 49%)');
+            s.value = '10';
+            dispatchEvent(s, 'input');
+            _context7.next = 43;
+            return wait();
+
+          case 43:
+            expect(tinycolor(instance.get('color')).toString('hsl')).to.eql('hsl(358, 10%, 49%)');
+
+          case 44:
+          case "end":
+            return _context7.stop();
+        }
       }
     }, _callee7);
   })));

package/components/colorpicker/index.vdt.js

@@ -7,18 +7,21 @@ import { ColorpickerPanel } from './panel';
 import { Dropdown, DropdownMenu } from '../dropdown';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
+
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
+
   var _this$get = this.get(),
-    className = _this$get.className,
-    transition = _this$get.transition,
-    presets = _this$get.presets,
-    value = _this$get.value,
-    size = _this$get.size,
-    disabled = _this$get.disabled,
-    container = _this$get.container,
-    position = _this$get.position;
+      className = _this$get.className,
+      transition = _this$get.transition,
+      presets = _this$get.presets,
+      value = _this$get.value,
+      size = _this$get.size,
+      disabled = _this$get.disabled,
+      container = _this$get.container,
+      position = _this$get.position;
+
   var classNameObj = (_classNameObj = {
     'k-colorpicker': true
   }, _classNameObj[className] = className, _classNameObj["k-" + size] = size !== 'default', _classNameObj['k-disabled'] = disabled, _classNameObj[makeStyles()] = true, _classNameObj);

package/components/colorpicker/panel.js

@@ -7,18 +7,23 @@ import { usePointer } from './usePointer';
 import { useInput } from './useInput';
 export var ColorpickerPanel = /*#__PURE__*/function (_Component) {
   _inheritsLoose(ColorpickerPanel, _Component);
+
   function ColorpickerPanel() {
     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.value = useValue();
     _this.pointer = usePointer(_this.value.hsv, _this.value.format);
     _this.input = useInput(_this.value.hsv, _this.value.rgb, _this.value.hsl);
     return _this;
   }
+
   return ColorpickerPanel;
 }(Component);
 ColorpickerPanel.template = template;

package/components/colorpicker/panel.vdt.js

@@ -9,37 +9,40 @@ import { Mode } from './useInput';
 import { ColorpickerDrag as Drag } from './drag';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
-    _$cn2,
-    _this = this;
+      _$cn2,
+      _this = this;
+
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
+
   var _this$get = this.get(),
-    value = _this$get.value,
-    presets = _this$get.presets;
+      value = _this$get.value,
+      presets = _this$get.presets;
+
   var classNameObj = (_classNameObj = {
     'k-colorpicker-panel': true
   }, _classNameObj[makePanelStyles()] = true, _classNameObj);
   var _this$value = this.value,
-    hex = _this$value.hex.value,
-    hsv = _this$value.hsv.value,
-    rgb = _this$value.rgb.value,
-    hsl = _this$value.hsl.value,
-    changeHue = _this$value.changeHue,
-    changeAlpha = _this$value.changeAlpha,
-    setValue = _this$value.setValue;
+      hex = _this$value.hex.value,
+      hsv = _this$value.hsv.value,
+      rgb = _this$value.rgb.value,
+      hsl = _this$value.hsl.value,
+      changeHue = _this$value.changeHue,
+      changeAlpha = _this$value.changeAlpha,
+      setValue = _this$value.setValue;
   var _this$pointer = this.pointer,
-    start = _this$pointer.start,
-    areaRef = _this$pointer.areaRef;
+      start = _this$pointer.start,
+      areaRef = _this$pointer.areaRef;
   var _this$input = this.input,
-    onInputHex = _this$input.onInputHex,
-    mode = _this$input.mode,
-    changeMode = _this$input.changeMode,
-    changeColor = _this$input.changeColor,
-    onStart = _this$input.onStart,
-    onEnd = _this$input.onEnd,
-    dragging = _this$input.dragging,
-    setInputValue = _this$input.setInputValue;
+      onInputHex = _this$input.onInputHex,
+      mode = _this$input.mode,
+      changeMode = _this$input.changeMode,
+      changeColor = _this$input.changeColor,
+      onStart = _this$input.onStart,
+      onEnd = _this$input.onEnd,
+      dragging = _this$input.dragging,
+      setInputValue = _this$input.setInputValue;
   var alpha = Math.round(rgb.a * 100);
   return _$ce(2, 'div', [_$ce(2, 'div', [_$ce(2, 'div', null, 1, 'k-colorpicker-white'), _$ce(2, 'div', null, 1, 'k-colorpicker-black'), _$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-colorpicker-circle'), 2, 'k-colorpicker-pointer', {
     'style': {
@@ -92,6 +95,7 @@ export default function ($props, $blocks, $__proto__) {
       var color;
       var method;
       var max;
+
       if (mode.value === Mode.RGB) {
         params = ['r', 'g', 'b'];
         color = rgb;
@@ -107,6 +111,7 @@ export default function ($props, $blocks, $__proto__) {
         method = _this._changeHsv;
         max = 100;
       }
+
       return _mapInstanceProperty(params).call(params, function (value) {
         var v = Math.round(color[value]);
         var realMax = value === 'h' ? 359 : max;