@king-design/vue 2.1.2 → 2.1.4

package/components/switch/index.spec.js

@@ -10,255 +10,219 @@ 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,79 +8,67 @@ 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), {
@@ -103,11 +91,9 @@ 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
@@ -115,11 +101,9 @@ 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,39 +7,30 @@ 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: {
@@ -65,12 +56,10 @@ var defaults = {
     height: "12px",
     padding: "1px"
   },
-
   // disabled
   get disabledBgColor() {
     return theme.color.disabledBg;
   }
-
 };
 var kswitch;
 setDefault(function () {
@@ -81,9 +70,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;}}");
 }