@king-design/vue 2.1.4 → 2.1.6

package/components/switch/index.spec.js

@@ -10,219 +10,255 @@ describe('Switch', function () {
   });
   it('change value by clicking', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, _element$querySelecto, el, disabledEl, handle;
+
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
-          _element$querySelecto = element.querySelectorAll('.k-switch'), el = _element$querySelecto[0], disabledEl = _element$querySelecto[1];
-          el.click();
-          _context.next = 5;
-          return wait();
-        case 5:
-          expect(element.outerHTML).to.matchSnapshot();
-          expect(instance.get('value')).to.be.true;
-          el.click();
-          _context.next = 10;
-          return wait();
-        case 10:
-          expect(element.outerHTML).to.matchSnapshot();
-          expect(instance.get('value')).to.be.false;
-          handle = element.querySelector('.k-switch-handle');
-          handle.click();
-          _context.next = 16;
-          return wait();
-        case 16:
-          expect(instance.get('value')).to.be.false;
-          disabledEl.click();
-          _context.next = 20;
-          return wait();
-        case 20:
-          expect(element.outerHTML).to.matchSnapshot();
-        case 21:
-        case "end":
-          return _context.stop();
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
+            _element$querySelecto = element.querySelectorAll('.k-switch'), el = _element$querySelecto[0], disabledEl = _element$querySelecto[1];
+            el.click();
+            _context.next = 5;
+            return wait();
+
+          case 5:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(instance.get('value')).to.be.true;
+            el.click();
+            _context.next = 10;
+            return wait();
+
+          case 10:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(instance.get('value')).to.be.false;
+            handle = element.querySelector('.k-switch-handle');
+            handle.click();
+            _context.next = 16;
+            return wait();
+
+          case 16:
+            expect(instance.get('value')).to.be.false;
+            disabledEl.click();
+            _context.next = 20;
+            return wait();
+
+          case 20:
+            expect(element.outerHTML).to.matchSnapshot();
+
+          case 21:
+          case "end":
+            return _context.stop();
+        }
       }
     }, _callee);
   })));
   it('change value by draging', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var _mount2, instance, element, _element$querySelecto2, el, disabledEl;
+
     return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          _mount2 = mount(BasicDemo), instance = _mount2[0], element = _mount2[1];
-          _element$querySelecto2 = element.querySelectorAll('.k-switch-handle'), el = _element$querySelecto2[0], disabledEl = _element$querySelecto2[1];
-          dispatchEvent(el, 'mousedown', {
-            which: 1,
-            clientX: 0
-          });
-          dispatchEvent(document, 'mousemove', {
-            clientX: 1
-          });
-          _context2.next = 6;
-          return wait();
-        case 6:
-          expect(element.outerHTML).to.matchSnapshot();
-          // cancel this operation if the distance less than half of width
-          dispatchEvent(document, 'mouseup', {
-            clientX: 1
-          });
-          _context2.next = 10;
-          return wait();
-        case 10:
-          expect(element.outerHTML).to.matchSnapshot();
-          expect(instance.get('value')).to.be.false;
-          dispatchEvent(el, 'mousedown', {
-            which: 1,
-            clientX: 0
-          });
-          dispatchEvent(document, 'mousemove', {
-            clientX: 30
-          });
-          dispatchEvent(document, 'mouseup', {
-            clientX: 30
-          });
-          _context2.next = 17;
-          return wait();
-        case 17:
-          expect(element.outerHTML).to.matchSnapshot();
-          expect(instance.get('value')).to.be.true;
-          dispatchEvent(el, 'mousedown', {
-            which: 1,
-            clientX: 0
-          });
-          dispatchEvent(document, 'mousemove', {
-            clientX: -30
-          });
-          dispatchEvent(document, 'mouseup', {
-            clientX: -30
-          });
-          _context2.next = 24;
-          return wait();
-        case 24:
-          expect(instance.get('value')).to.be.false;
-          // treat mousedown -> mouseup as click
-          dispatchEvent(el, 'mousedown', {
-            which: 1,
-            clientX: 0
-          });
-          dispatchEvent(document, 'mouseup', {
-            clientX: 0
-          });
-          _context2.next = 29;
-          return wait();
-        case 29:
-          expect(instance.get('value')).to.be.true;
-          // disabled
-          dispatchEvent(disabledEl, 'mousedown', {
-            which: 1,
-            clientX: 0
-          });
-          dispatchEvent(document, 'mousemove', {
-            clientX: 30
-          });
-          dispatchEvent(document, 'mouseup', {
-            clientX: 30
-          });
-          _context2.next = 35;
-          return wait();
-        case 35:
-          expect(element.outerHTML).to.matchSnapshot();
-        case 36:
-        case "end":
-          return _context2.stop();
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _mount2 = mount(BasicDemo), instance = _mount2[0], element = _mount2[1];
+            _element$querySelecto2 = element.querySelectorAll('.k-switch-handle'), el = _element$querySelecto2[0], disabledEl = _element$querySelecto2[1];
+            dispatchEvent(el, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: 1
+            });
+            _context2.next = 6;
+            return wait();
+
+          case 6:
+            expect(element.outerHTML).to.matchSnapshot(); // cancel this operation if the distance less than half of width
+
+            dispatchEvent(document, 'mouseup', {
+              clientX: 1
+            });
+            _context2.next = 10;
+            return wait();
+
+          case 10:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(instance.get('value')).to.be.false;
+            dispatchEvent(el, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: 30
+            });
+            dispatchEvent(document, 'mouseup', {
+              clientX: 30
+            });
+            _context2.next = 17;
+            return wait();
+
+          case 17:
+            expect(element.outerHTML).to.matchSnapshot();
+            expect(instance.get('value')).to.be.true;
+            dispatchEvent(el, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: -30
+            });
+            dispatchEvent(document, 'mouseup', {
+              clientX: -30
+            });
+            _context2.next = 24;
+            return wait();
+
+          case 24:
+            expect(instance.get('value')).to.be.false; // treat mousedown -> mouseup as click
+
+            dispatchEvent(el, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mouseup', {
+              clientX: 0
+            });
+            _context2.next = 29;
+            return wait();
+
+          case 29:
+            expect(instance.get('value')).to.be.true; // disabled
+
+            dispatchEvent(disabledEl, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: 30
+            });
+            dispatchEvent(document, 'mouseup', {
+              clientX: 30
+            });
+            _context2.next = 35;
+            return wait();
+
+          case 35:
+            expect(element.outerHTML).to.matchSnapshot();
+
+          case 36:
+          case "end":
+            return _context2.stop();
+        }
       }
     }, _callee2);
   })));
   it('drag switch which has custom width and height', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var _mount3, instance, element, _element$querySelecto3, el;
+
     return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
-        case 0:
-          _mount3 = mount(WidthHeightDemo), instance = _mount3[0], element = _mount3[1];
-          _element$querySelecto3 = element.querySelectorAll('.k-switch-handle'), el = _element$querySelecto3[2];
-          dispatchEvent(el, 'mousedown', {
-            which: 1,
-            clientX: 0
-          });
-          dispatchEvent(document, 'mousemove', {
-            clientX: 50
-          });
-          dispatchEvent(document, 'mouseup', {
-            clientX: 50
-          });
-          _context3.next = 7;
-          return wait();
-        case 7:
-          expect(element.outerHTML).to.matchSnapshot();
-          dispatchEvent(el, 'mousedown', {
-            which: 1,
-            clientX: 0
-          });
-          dispatchEvent(document, 'mousemove', {
-            clientX: -50
-          });
-          dispatchEvent(document, 'mouseup', {
-            clientX: -50
-          });
-          _context3.next = 13;
-          return wait();
-        case 13:
-          expect(element.outerHTML).to.matchSnapshot();
-        case 14:
-        case "end":
-          return _context3.stop();
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount3 = mount(WidthHeightDemo), instance = _mount3[0], element = _mount3[1];
+            _element$querySelecto3 = element.querySelectorAll('.k-switch-handle'), el = _element$querySelecto3[2];
+            dispatchEvent(el, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: 50
+            });
+            dispatchEvent(document, 'mouseup', {
+              clientX: 50
+            });
+            _context3.next = 7;
+            return wait();
+
+          case 7:
+            expect(element.outerHTML).to.matchSnapshot();
+            dispatchEvent(el, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: -50
+            });
+            dispatchEvent(document, 'mouseup', {
+              clientX: -50
+            });
+            _context3.next = 13;
+            return wait();
+
+          case 13:
+            expect(element.outerHTML).to.matchSnapshot();
+
+          case 14:
+          case "end":
+            return _context3.stop();
+        }
       }
     }, _callee3);
   })));
   it('change value by keypress', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
     var _mount4, instance, element, el;
+
     return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          _mount4 = mount(BasicDemo), instance = _mount4[0], element = _mount4[1];
-          el = element.querySelector('.k-switch');
-          dispatchEvent(el, 'keypress', {
-            keyCode: 13
-          });
-          _context4.next = 5;
-          return wait();
-        case 5:
-          expect(instance.get('value')).to.be.true;
-          dispatchEvent(el, 'keypress', {
-            keyCode: 13
-          });
-          _context4.next = 9;
-          return wait();
-        case 9:
-          expect(instance.get('value')).to.be.false;
-        case 10:
-        case "end":
-          return _context4.stop();
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _mount4 = mount(BasicDemo), instance = _mount4[0], element = _mount4[1];
+            el = element.querySelector('.k-switch');
+            dispatchEvent(el, 'keypress', {
+              keyCode: 13
+            });
+            _context4.next = 5;
+            return wait();
+
+          case 5:
+            expect(instance.get('value')).to.be.true;
+            dispatchEvent(el, 'keypress', {
+              keyCode: 13
+            });
+            _context4.next = 9;
+            return wait();
+
+          case 9:
+            expect(instance.get('value')).to.be.false;
+
+          case 10:
+          case "end":
+            return _context4.stop();
+        }
       }
     }, _callee4);
   })));
   it('custom the value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
     var _mount5, instance, element, _element$querySelecto4, el1, el2;
+
     return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
-        case 0:
-          _mount5 = mount(ValueDemo), instance = _mount5[0], element = _mount5[1];
-          _element$querySelecto4 = element.querySelectorAll('.k-switch'), el1 = _element$querySelecto4[0], el2 = _element$querySelecto4[1];
-          el1.click();
-          el2.click();
-          _context5.next = 6;
-          return wait();
-        case 6:
-          expect(element.outerHTML).to.matchSnapshot();
-          el1.click();
-          el2.click();
-          _context5.next = 11;
-          return wait();
-        case 11:
-          expect(element.outerHTML).to.matchSnapshot();
-        case 12:
-        case "end":
-          return _context5.stop();
+      while (1) {
+        switch (_context5.prev = _context5.next) {
+          case 0:
+            _mount5 = mount(ValueDemo), instance = _mount5[0], element = _mount5[1];
+            _element$querySelecto4 = element.querySelectorAll('.k-switch'), el1 = _element$querySelecto4[0], el2 = _element$querySelecto4[1];
+            el1.click();
+            el2.click();
+            _context5.next = 6;
+            return wait();
+
+          case 6:
+            expect(element.outerHTML).to.matchSnapshot();
+            el1.click();
+            el2.click();
+            _context5.next = 11;
+            return wait();
+
+          case 11:
+            expect(element.outerHTML).to.matchSnapshot();
+
+          case 12:
+          case "end":
+            return _context5.stop();
+        }
       }
     }, _callee5);
   })));

package/components/switch/index.vdt.js

@@ -8,67 +8,79 @@ var _$tmp0 = {
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
+
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
   var _$blocks = {};
   var __$blocks = {};
+
   var _this$get = this.get(),
-    className = _this$get.className,
-    style = _this$get.style,
-    name = _this$get.name,
-    on = _this$get.on,
-    off = _this$get.off,
-    value = _this$get.value,
-    trueValue = _this$get.trueValue,
-    falseValue = _this$get.falseValue,
-    width = _this$get.width,
-    height = _this$get.height,
-    size = _this$get.size,
-    disabled = _this$get.disabled;
+      className = _this$get.className,
+      style = _this$get.style,
+      name = _this$get.name,
+      on = _this$get.on,
+      off = _this$get.off,
+      value = _this$get.value,
+      trueValue = _this$get.trueValue,
+      falseValue = _this$get.falseValue,
+      width = _this$get.width,
+      height = _this$get.height,
+      size = _this$get.size,
+      disabled = _this$get.disabled;
+
   var _this$draggable = this.draggable,
-    start = _this$draggable.start,
-    dragging = _this$draggable.dragging,
-    barRef = _this$draggable.barRef,
-    barWidth = _this$draggable.barWidth;
+      start = _this$draggable.start,
+      dragging = _this$draggable.dragging,
+      barRef = _this$draggable.barRef,
+      barWidth = _this$draggable.barWidth;
   var classNameObj = (_classNameObj = {
     'k-switch': true
   }, _classNameObj[className] = className, _classNameObj['k-checked'] = value === trueValue, _classNameObj["k-" + size] = true, _classNameObj['k-disabled'] = disabled, _classNameObj['k-dragging'] = dragging.value, _classNameObj[makeStyles()] = true, _classNameObj);
   var onStyle;
   var offStyle;
   var barStyle;
+
   if (width || height) {
     var _style = {};
     onStyle = {};
     offStyle = {};
+
     if (width) {
       _style.width = width + "px";
       onStyle.width = _style.width;
       offStyle.width = _style.width;
     }
+
     if (height) {
       _style.height = height + "px";
+
       _Object$assign(onStyle, {
         height: _style.height,
         lineHeight: _style.height,
         padding: "0 " + _style.height + " 0 " + height / 3 + "px"
       });
+
       _Object$assign(offStyle, {
         height: _style.height,
         lineHeight: _style.height,
         padding: "0 " + height / 3 + "px 0 " + _style.height
       });
+
       barStyle = {
         width: value === trueValue ? '100%' : height + "px"
       };
     }
+
     style = addStyle(style, _style);
   }
+
   if (barWidth.value) {
     barStyle = addStyle(barStyle, {
       width: barWidth.value + 'px'
     });
   }
+
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this), {
@@ -91,9 +103,11 @@ export default function ($props, $blocks, $__proto__) {
     return off;
   }, __$blocks['off'] = function ($super, data) {
     var block = $blocks['off'];
+
     var callBlock = function callBlock() {
       return _$blocks['off'].call($this, $super, data);
     };
+
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['off'](_$no)), 0, 'k-switch-off', {
     'style': offStyle
@@ -101,9 +115,11 @@ export default function ($props, $blocks, $__proto__) {
     return on;
   }, __$blocks['on'] = function ($super, data) {
     var block = $blocks['on'];
+
     var callBlock = function callBlock() {
       return _$blocks['on'].call($this, $super, data);
     };
+
     return block ? block.call($this, callBlock, data) : callBlock();
   }, __$blocks['on'](_$no)), 0, 'k-switch-on', {
     'style': onStyle

package/components/switch/styles.js

@@ -7,30 +7,39 @@ var defaults = {
   get transition() {
     return theme.transition.middle;
   },
+
   bgColor: "#fff",
   fontSize: "12px",
+
   get color() {
     return theme.color.text;
   },
+
   checkedBgColor: "#fff",
   handleBorderRadius: "100%",
+
   get handleBgColor() {
     return theme.color.border;
   },
+
   get border() {
     return "1px solid " + theme.color.border;
   },
+
   // checked
   checked: {
     get borderColor() {
       return theme.color.primary;
     },
+
     get color() {
       return theme.color.primary;
     },
+
     get bgColor() {
       return theme.color.primary;
     }
+
   },
   // default
   default: {
@@ -56,10 +65,12 @@ var defaults = {
     height: "12px",
     padding: "1px"
   },
+
   // disabled
   get disabledBgColor() {
     return theme.color.disabledBg;
   }
+
 };
 var kswitch;
 setDefault(function () {
@@ -70,9 +81,9 @@ setDefault(function () {
 export function makeStyles() {
   return /*#__PURE__*/css("display:inline-block;vertical-align:middle;background:", kswitch.bgColor, ";position:relative;cursor:pointer;user-select:none;overflow:hidden;border:", kswitch.border, ";box-sizing:content-box;input{opacity:0;position:absolute;}.k-switch-bar,.k-switch-off{box-sizing:border-box;}.k-switch-bar{position:absolute;text-align:right;overflow:hidden;}.k-switch-wrapper{display:inline-block;position:relative;z-index:1;border-radius:", kswitch.handleBorderRadius, ";}.k-switch-bar,.k-switch-wrapper{height:100%;background:", kswitch.bgColor, ";transition:all ", kswitch.transition, ";}.k-switch-handle{border-radius:", kswitch.handleBorderRadius, ";background:", kswitch.handleBgColor, ";height:100%;cursor:pointer;transition:left ", kswitch.transition, ";display:inline-block;img{height:100%;visibility:hidden;}}.k-switch-on,.k-switch-off{position:absolute;font-size:", kswitch.fontSize, ";color:", kswitch.color, ";text-align:center;}&.k-dragging{.k-switch-bar,.k-switch-wrapper{background:", kswitch.checkedBgColor, ";transition:background ", kswitch.transition, ";}}&:focus{outline:none;border-color:", kswitch.checked.borderColor, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var _kswitch$size = kswitch[size],
-      width = _kswitch$size.width,
-      height = _kswitch$size.height,
-      padding = _kswitch$size.padding;
+        width = _kswitch$size.width,
+        height = _kswitch$size.height,
+        padding = _kswitch$size.padding;
     return /*#__PURE__*/css("&.k-", size, ",&.k-", size, " .k-switch-on,&.k-", size, " .k-switch-off{width:", width, ";height:", height, ";}&.k-", size, "{border-radius:", height, ";.k-switch-bar{width:", height, ";border-radius:", height, ";}.k-switch-wrapper{padding:", padding, ";}.k-switch-on,.k-switch-off{line-height:", height, ";left:0;}.k-switch-on{padding:0 ", height, " 0 calc(", height, " / 3);}.k-switch-off{padding:0 calc(", height, " / 3) 0 ", height, ";}}");
   }), "&.k-checked{border-color:", kswitch.checked.borderColor, ";.k-switch-on{color:", kswitch.checked.color, ";}.k-switch-handle{background:", kswitch.checked.bgColor, ";}.k-switch-bar,.k-switch-wrapper{background:", kswitch.checkedBgColor, ";}.k-switch-bar{width:100%;}}&.k-disabled{background:", kswitch.disabledBgColor, ";cursor:not-allowed;.k-switch-bar,.k-switch-wrapper{background:", kswitch.disabledBgColor, ";}}&:not(.k-checked){.k-switch-bar,.k-switch-wrapper{border-top-right-radius:0;border-bottom-right-radius:0;}}");
 }