@king-design/intact 2.1.1 → 3.0.0-beta.1

package/es/components/steps/styles.js

@@ -4,137 +4,132 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
-  get transition() {
-    return theme.transition.middle;
-  },
+  gap: '10px',
 
-  get height() {
-    return theme.default.height;
+  get titleColor() {
+    return theme.color.title;
   },
 
-  get bgColor() {
-    return theme.color.bg;
+  get desColor() {
+    return theme.color.lightBlack;
   },
 
-  gutter: '10px',
-  gapTop: '-2px',
-  // head
-  head: {
-    innerWidth: '16px',
+  get markColor() {
+    return theme.color.placeholder;
+  },
 
-    get innerBorder() {
-      return "1px solid " + theme.color.placeholder;
+  markBgColor: '#fff',
+  default: {
+    get height() {
+      return theme.default.height;
     },
 
-    iconFontSize: '24px',
-    paddingRight: '10px'
-  },
-  main: {
-    get color() {
-      return theme.color.text;
+    get bgColor() {
+      return theme.color.bg;
     },
 
-    get titlePaddingRight() {
-      return steps.head.paddingRight;
+    get markborder() {
+      return "1px solid " + theme.color.placeholder;
     },
 
-    contentFontSize: '12px'
+    markWidth: '16px',
+    padding: '16px'
   },
   // done
   done: {
-    get headColor() {
+    get markColor() {
       return theme.color.primary;
     },
 
-    get headInnerBorderColor() {
+    get markBorderColor() {
       return theme.color.primary;
     },
 
-    headInnerBgColor: 'transparent',
+    markBgColor: '#fff',
 
     get mainColor() {
       return theme.color.primary;
-    },
-
-    get simpleColor() {
-      return theme.color.text;
     }
 
   },
   // active
   active: {
-    headColor: '#fff',
+    markColor: '#fff',
 
-    get headInnerBorderColor() {
+    get markBorderColor() {
       return theme.color.primary;
     },
 
-    get headInnerBgColor() {
+    get markBgColor() {
       return theme.color.primary;
     },
 
     get mainColor() {
       return theme.color.primary;
-    },
-
-    get simpleColor() {
-      return theme.color.primary;
     }
 
   },
   // error
   error: {
-    get headColor() {
+    get markColor() {
       return theme.color.danger;
     },
 
-    get headInnerBorderColor() {
+    get markBorderColor() {
       return theme.color.danger;
     },
 
-    headInnerBgColor: 'transparent',
+    markBgColor: '#fff',
 
     get mainColor() {
       return theme.color.danger;
-    },
-
-    get simpleColor() {
-      return theme.color.danger;
     }
 
   },
   // line
   line: {
-    bgColor: '#fff',
-    mainContentGap: '5px 0 0',
-
-    get tailBgColor() {
-      return theme.color.placeholder;
+    get markborder() {
+      return "2px solid " + theme.color.placeholder;
     },
 
-    get doneTailBgColor() {
-      return theme.color.primary;
+    markWidth: '32px',
+    markFontSize: '18px',
+
+    get lineColor() {
+      return theme.color.border;
     },
 
-    innerWidth: '32px',
-    innerLineHeight: '30px',
-    innerFontSize: '18px',
-    headTop: '16px',
-    titleFontSize: '14px',
-    titleGopTop: '16px',
-    iconLineHeight: '30px',
-    tailTop: '16px',
-    width: '160px'
+    lineWidth: '2px',
+    titleGap: '16px',
+    descGap: '4px',
+    contentWidth: '200px'
   },
   // simple
   simple: {
-    fontSize: '14px',
+    markWidth: '12px',
 
-    get color() {
-      return theme.color.disabled;
+    get markBgColor() {
+      return theme.color.placeholder;
     },
 
-    headPaddingRight: '6px'
+    get doneMarkBgColor() {
+      return theme.color.primary;
+    },
+
+    get errorMarkBgColor() {
+      return theme.color.danger;
+    }
+
+  },
+  // vertical
+  vertical: {
+    line: {
+      minHeight: '100px',
+      padding: '16px'
+    },
+    simple: {
+      titleGap: '8px'
+    }
   }
 };
 var steps;
@@ -145,14 +140,53 @@ setDefault(function () {
 });
 var stepStatus = ['done', 'active', 'error'];
 export function makeStepsStyles() {
-  return /*#__PURE__*/css("display:flex;&.k-default,&.k-line{", _mapInstanceProperty(stepStatus).call(stepStatus, function (status) {
-    var styles = steps[status];
-    return /*#__PURE__*/css(".k-", status, "{.k-step-inner{color:", styles.headColor, ";border-color:", styles.headInnerBorderColor, "!important;background:", styles.headInnerBgColor, ";}.k-step-main{color:", styles.mainColor, ";}}");
-  }), ";.k-step-head{padding-right:", steps.head.paddingRight, ";}.k-step-inner{width:", steps.head.innerWidth, ";height:", steps.head.innerWidth, ";line-height:calc(", steps.head.innerWidth, " - 2px);border-radius:50%;text-align:center;border:", steps.head.innerBorder, ";}.k-step-icon:before{line-height:calc(", steps.head.innerWidth, " - 2px);}.k-step-main{color:", steps.main.color, ";}.k-step-tail{position:absolute;}.k-step:last-of-type{.k-step-tail{display:none;}}}&.k-simple,&.k-default{text-align:center;height:", steps.height, ";line-height:", steps.height, ";overflow:hidden;.k-step-head,.k-step-main,.k-step-content,.k-step-inner{display:inline-block;}.k-step{white-space:nowrap;}.k-step-wrapper{overflow:hidden;}}&.k-default{background:", steps.bgColor, ";.k-step-tail{top:0;right:calc(-1 * (", steps.height, " / 2 + ", steps.gutter, "));width:calc(", steps.height, " / 2 + ", steps.gutter, ");height:", steps.height, ";overflow:hidden;z-index:1;&:after,&:before{content:'';border-width:calc(", steps.height, " / 2 + ", steps.gutter, ");border-style:solid;border-color:transparent;position:absolute;top:calc(-1 * ", steps.gutter, ");}&:after{border-left-color:", steps.bgColor, ";left:calc(-1 * ", steps.head.paddingRight, ");}&:before{border-left-color:", steps.line.bgColor, ";left:0;}}.k-step-head,.k-step-inner{vertical-align:middle;margin-top:", steps.gapTop, ";}.k-step:not(:first-of-type){padding-left:calc(", steps.height, " / 2 + ", steps.gutter, ");}}&.k-line{.k-step{width:auto!important;&:last-of-type{flex:0 0 auto;.k-step-wrapper{display:flex;}.k-step-title{padding-right:0;}}}.k-step-head{background:", steps.line.bgColor, ";position:relative;display:flex;padding:0;&:before,&:after{content:'';display:block;flex:1;height:1px;background:", theme.color.placeholder, ";top:", steps.line.headTop, ";position:relative;}}.k-step-inner{width:", steps.line.innerWidth, ";height:", steps.line.innerWidth, ";line-height:", steps.line.innerLineHeight, ";font-size:", steps.line.innerFontSize, ";}.k-step-main{position:relative;width:", steps.line.width, ";}.k-step-title{line-height:", steps.head.innerWidth, ";background:", steps.line.bgColor, ";font-size:", steps.line.titleFontSize, ";padding:0;margin-top:", steps.line.titleGopTop, ";}.k-step-content{margin:", steps.line.mainContentGap, ";}.k-step-tail{left:0;right:", steps.head.paddingRight, ";top:calc(", steps.head.innerWidth, " / 2);height:1px;background:", steps.line.tailBgColor, ";}.k-step:first-of-type .k-step-head:before,.k-step:last-of-type .k-step-head:after{background:transparent;}.k-done{.k-step-tail{background:", steps.line.doneTailBgColor, ";}.k-step-head{&:before,&:after{background:", theme.color.primary, ";}}}.k-active{.k-step-head{&:before{background:", theme.color.primary, ";}}}.k-step-icon:before{line-height:", steps.line.iconLineHeight, ";}.k-step-wrapper{display:inline-block!important;text-align:center;}.k-step-tail{right:0;top:", steps.line.tailTop, ";}}&.k-simple{font-size:", steps.simple.fontSize, ";", _mapInstanceProperty(stepStatus).call(stepStatus, function (status) {
+  return /*#__PURE__*/css("display:flex;", makeCommonStyles(), ";&.k-default{", makeDefaultStyles(), ";}&.k-line,&.k-line-compact,&.k-simple{", makeLineStyles(), ";}&.k-line-compact{", makeLineCompactStyles(), ";}&.k-simple{", makeSimpleStyles(), ";}&.k-clickable{.k-done{cursor:pointer;}}", makeVerticalStyles(), ";");
+}
+
+function makeDefaultStyles() {
+  var defaults = steps.default;
+  return /*#__PURE__*/css("text-align:center;height:", defaults.height, ";background:", defaults.bgColor, ";.k-step-wrapper{", center(), ";height:100%;padding:0 ", defaults.padding, ";}.k-step-mark{width:", defaults.markWidth, ";height:", defaults.markWidth, ";margin-right:", steps.gap, ";}.k-step-main{display:flex;overflow:hidden;white-space:nowrap;}.k-step-title{padding-right:", steps.gap, ";}.k-step:last-of-type{.k-step-tail{display:none;}}&:not(.k-vertical){", makeArrow(false), ";}");
+}
+
+function makeArrow(isVertical) {
+  var defaults = steps.default;
+  var offset = "calc(-1 * (" + defaults.height + " / 2 + " + steps.gap + "))";
+  var size = "calc(" + defaults.height + " / 2 + " + steps.gap + ")";
+  return /*#__PURE__*/css(".k-step-tail{position:absolute;", !isVertical ? "\n                    top: 0;\n                    right: " + offset + ";\n                    width: " + size + ";\n                    height: " + defaults.height + ";\n                " : "\n                    left: 0;\n                    bottom: " + offset + ";\n                    height: " + size + ";\n                    width: " + defaults.height + ";\n                ", " overflow:hidden;z-index:1;&:after,&:before{content:'';border-width:calc(", defaults.height, " / 2 + ", steps.gap, ");border-style:solid;border-color:transparent;position:absolute;", isVertical ? 'left' : 'top', ":calc(-1 * ", steps.gap, ");}&:after{border-", isVertical ? 'top' : 'left', "-color:", defaults.bgColor, ";", isVertical ? 'top' : 'left', ":calc(-1 * ", steps.gap, ");}&:before{border-", isVertical ? 'top' : 'left', "-color:#fff;", isVertical ? 'top' : 'left', ":0;}}.k-step:not(:first-of-type){padding-", isVertical ? 'top' : 'left', ":calc(", defaults.height, " / 2 + ", steps.gap, ");}");
+}
+
+function makeLineStyles() {
+  var line = steps.line;
+  var top = "calc(" + line.markWidth + " / 2 - " + line.lineWidth + " / 2)";
+  return /*#__PURE__*/css(".k-step{display:flex;}.k-step-wrapper{display:inline-block;text-align:center;position:relative;width:", line.contentWidth, ";}.k-step:last-of-type{flex:0 0 auto;}.k-step-mark{border:", line.markborder, ";width:", line.markWidth, ";height:", line.markWidth, ";position:relative;z-index:1;&,.k-icon{font-size:", line.markFontSize, ";}}.k-step-main{padding-top:", line.titleGap, ";}.k-step-title{font-size:14px;color:", theme.color.text, ";}.k-step-content{margin-top:", line.descGap, ";color:", theme.color.placeholder, ";}.k-step-wrapper{&:before,&:after{content:'';display:block;height:", line.lineWidth, ";background:", line.lineColor, ";width:50%;position:absolute;top:", top, ";}&:after{right:0;}}.k-step{&:first-of-type .k-step-wrapper:before,&:last-of-type .k-step-wrapper:after{background:transparent;}}.k-step-tail{flex:1;height:", line.lineWidth, ";background:", line.lineColor, ";margin-top:", top, ";}.k-step{&.k-done{.k-step-tail,&:not(:last-of-type) .k-step-wrapper:after,&:not(:first-of-type) .k-step-wrapper:before{background:", theme.color.primary, ";}}&:not(:first-of-type).k-active{.k-step-wrapper:before{background:", theme.color.primary, ";}}&.k-active .k-step-title{color:", theme.color.primary, ";}&.k-error .k-step-title{color:", theme.color.danger, ";}}");
+}
+
+function makeLineCompactStyles() {
+  var line = steps.line;
+  return /*#__PURE__*/css(".k-step-wrapper{display:inline-flex;text-align:left;width:auto;&:before,&:after{display:none;}}.k-step-main{flex:1;padding:0 0 0 ", line.titleGap, ";}.k-step-content{margin:0;}.k-step-tail{margin-right:", line.titleGap, ";}.k-step-title{display:flex;align-items:center;height:", line.markWidth, ";&:after{content:'';display:block;flex:1;height:", line.lineWidth, ";background:", line.lineColor, ";margin-left:", line.titleGap, ";}}.k-step:last-of-type .k-step-title:after{display:none;}.k-step{&.k-done{.k-step-title:after{background:", theme.color.primary, ";}}}");
+}
+
+function makeSimpleStyles() {
+  var simple = steps.simple;
+  var top = "calc(" + simple.markWidth + " / 2 - " + steps.line.lineWidth + " / 2)";
+  return /*#__PURE__*/css(".k-step-mark{width:", simple.markWidth, ";height:", simple.markWidth, ";background:", simple.markBgColor, ";}.k-step-wrapper{font-size:0;&:before,&:after{top:", top, ";}}.k-step-main{font-size:", theme.default.fontSize, ";}.k-step-tail{margin-top:", top, ";}.k-step{&.k-done{.k-step-mark{background:", simple.doneMarkBgColor, ";}}&.k-error{.k-step-mark{background:", simple.errorMarkBgColor, ";}}}");
+}
+
+function center(flex) {
+  if (flex === void 0) {
+    flex = 'flex';
+  }
+
+  return /*#__PURE__*/css("display:", flex, ";align-items:center;justify-content:center;");
+}
+
+export function makeCommonStyles() {
+  return /*#__PURE__*/css(".k-step{position:relative;flex:1;", _mapInstanceProperty(stepStatus).call(stepStatus, function (status) {
     var styles = steps[status];
-    return /*#__PURE__*/css(".k-", status, "{.k-step-main,.k-step-inner{color:", styles.simpleColor, ";}}");
-  }), ";.k-step,.k-step-main{color:", steps.simple.color, ";}.k-step-head{padding-right:", steps.simple.headPaddingRight, ";vertical-align:top;}}&.k-clickable{.k-done{cursor:pointer;}}");
+    return /*#__PURE__*/css("&.k-", status, "{.k-step-mark{color:", styles.markColor, ";border-color:", styles.markBorderColor, ";background:", styles.markBgColor, ";}.k-step-main{color:", styles.mainColor, ";}}");
+  }), ";}.k-step-mark{", center('inline-flex'), ";border:", steps.default.markborder, ";border-radius:50%;vertical-align:top;color:", steps.markColor, ";background:", steps.markBgColor, ";}");
 }
-export function makeStepStyles() {
-  return /*#__PURE__*/css("position:relative;flex:1;.k-step-icon:before{font-size:", steps.head.iconFontSize, ";}.k-step-title{display:inline-block;padding-right:", steps.main.titlePaddingRight, ";white-space:nowrap;}.k-step-content{font-size:", steps.main.contentFontSize, ";}.k-step-inner,.k-step-main{transition:all ", steps.transition, ";}");
+export function makeVerticalStyles() {
+  var verticalLine = steps.vertical.line;
+  return /*#__PURE__*/css("&.k-vertical{&.k-default{height:auto;width:", steps.default.height, ";writing-mode:vertical-rl;letter-spacing:1px;", makeArrow(true), ";.k-step-wrapper{width:100%;padding:", steps.default.padding, " 0;}.k-step-mark{margin-right:0;margin-bottom:", steps.gap, ";}.k-step-title{padding-right:0;padding-bottom:", steps.gap, ";}}&.k-line,&.k-line-compact,&.k-simple{flex-direction:column;.k-step{flex:none;min-height:", verticalLine.minHeight, ";}.k-step-wrapper{display:flex;width:auto;text-align:left;}.k-step-main{flex:1;padding:0 0 ", verticalLine.padding, " ", verticalLine.padding, ";}.k-step-title{display:flex;align-items:center;height:", steps.line.markWidth, ";&:after{display:none;}}.k-step-wrapper{&:before,&:after{display:none;}}.k-step-tail{position:absolute;left:calc(", steps.line.markWidth, " / 2 - ", steps.line.lineWidth, " / 2);height:100%;width:", steps.line.lineWidth, ";background:", steps.line.lineColor, ";}.k-step:last-of-type{.k-step-tail{display:none;}}}&.k-simple{.k-step-tail{left:calc(", steps.simple.markWidth, " / 2 - ", steps.line.lineWidth, " / 2);}.k-step-title{height:", steps.simple.markWidth, ";margin-bottom:", steps.vertical.simple.titleGap, ";}}}");
 }

package/es/components/switch/index.spec.js

@@ -1,6 +1,7 @@
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/switch/demos/basic';
+import DisabledDemo from '~/components/switch/demos/disabled';
 import ValueDemo from '~/components/switch/demos/value';
 import WidthHeightDemo from '~/components/switch/demos/widthHeight';
 import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
@@ -9,14 +10,14 @@ describe('Switch', function () {
     unmount();
   });
   it('change value by clicking', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var _mount, instance, element, _element$querySelecto, el, disabledEl, handle;
+    var _mount, instance, element, _element$querySelecto, el, 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];
+            _element$querySelecto = element.querySelectorAll('.k-switch'), el = _element$querySelecto[0];
             el.click();
             _context.next = 5;
             return wait();
@@ -38,29 +39,61 @@ describe('Switch', function () {
 
           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 17:
           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;
+  it('disabled', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _mount2, instance, element, el;
 
     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];
+            _mount2 = mount(DisabledDemo), instance = _mount2[0], element = _mount2[1];
+            el = element.querySelector('.k-switch');
+            el.click();
+            _context2.next = 5;
+            return wait();
+
+          case 5:
+            expect(element.outerHTML).to.matchSnapshot();
+            dispatchEvent(el, 'mousedown', {
+              which: 1,
+              clientX: 0
+            });
+            dispatchEvent(document, 'mousemove', {
+              clientX: 30
+            });
+            dispatchEvent(document, 'mouseup', {
+              clientX: 30
+            });
+            _context2.next = 11;
+            return wait();
+
+          case 11:
+            expect(element.outerHTML).to.matchSnapshot();
+
+          case 12:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  it('change value by draging', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var _mount3, instance, element, _element$querySelecto2, el;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _mount3 = mount(BasicDemo), instance = _mount3[0], element = _mount3[1];
+            _element$querySelecto2 = element.querySelectorAll('.k-switch-handle'), el = _element$querySelecto2[0];
             dispatchEvent(el, 'mousedown', {
               which: 1,
               clientX: 0
@@ -68,7 +101,7 @@ describe('Switch', function () {
             dispatchEvent(document, 'mousemove', {
               clientX: 1
             });
-            _context2.next = 6;
+            _context3.next = 6;
             return wait();
 
           case 6:
@@ -77,7 +110,7 @@ describe('Switch', function () {
             dispatchEvent(document, 'mouseup', {
               clientX: 1
             });
-            _context2.next = 10;
+            _context3.next = 10;
             return wait();
 
           case 10:
@@ -93,7 +126,7 @@ describe('Switch', function () {
             dispatchEvent(document, 'mouseup', {
               clientX: 30
             });
-            _context2.next = 17;
+            _context3.next = 17;
             return wait();
 
           case 17:
@@ -109,7 +142,7 @@ describe('Switch', function () {
             dispatchEvent(document, 'mouseup', {
               clientX: -30
             });
-            _context2.next = 24;
+            _context3.next = 24;
             return wait();
 
           case 24:
@@ -122,43 +155,27 @@ describe('Switch', function () {
             dispatchEvent(document, 'mouseup', {
               clientX: 0
             });
-            _context2.next = 29;
+            _context3.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();
+            expect(instance.get('value')).to.be.true;
 
-          case 36:
+          case 30:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
       }
-    }, _callee2);
+    }, _callee3);
   })));
-  it('drag switch which has custom width and height', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-    var _mount3, instance, element, _element$querySelecto3, el;
+  it('drag switch which has custom width and height', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount4, instance, element, _element$querySelecto3, el;
 
-    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
       while (1) {
-        switch (_context3.prev = _context3.next) {
+        switch (_context4.prev = _context4.next) {
           case 0:
-            _mount3 = mount(WidthHeightDemo), instance = _mount3[0], element = _mount3[1];
+            _mount4 = mount(WidthHeightDemo), instance = _mount4[0], element = _mount4[1];
             _element$querySelecto3 = element.querySelectorAll('.k-switch-handle'), el = _element$querySelecto3[2];
             dispatchEvent(el, 'mousedown', {
               which: 1,
@@ -170,7 +187,7 @@ describe('Switch', function () {
             dispatchEvent(document, 'mouseup', {
               clientX: 50
             });
-            _context3.next = 7;
+            _context4.next = 7;
             return wait();
 
           case 7:
@@ -185,7 +202,7 @@ describe('Switch', function () {
             dispatchEvent(document, 'mouseup', {
               clientX: -50
             });
-            _context3.next = 13;
+            _context4.next = 13;
             return wait();
 
           case 13:
@@ -193,24 +210,24 @@ describe('Switch', function () {
 
           case 14:
           case "end":
-            return _context3.stop();
+            return _context4.stop();
         }
       }
-    }, _callee3);
+    }, _callee4);
   })));
-  it('change value by keypress', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-    var _mount4, instance, element, el;
+  it('change value by keypress', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var _mount5, instance, element, el;
 
-    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
       while (1) {
-        switch (_context4.prev = _context4.next) {
+        switch (_context5.prev = _context5.next) {
           case 0:
-            _mount4 = mount(BasicDemo), instance = _mount4[0], element = _mount4[1];
+            _mount5 = mount(BasicDemo), instance = _mount5[0], element = _mount5[1];
             el = element.querySelector('.k-switch');
             dispatchEvent(el, 'keypress', {
               keyCode: 13
             });
-            _context4.next = 5;
+            _context5.next = 5;
             return wait();
 
           case 5:
@@ -218,7 +235,7 @@ describe('Switch', function () {
             dispatchEvent(el, 'keypress', {
               keyCode: 13
             });
-            _context4.next = 9;
+            _context5.next = 9;
             return wait();
 
           case 9:
@@ -226,30 +243,30 @@ describe('Switch', function () {
 
           case 10:
           case "end":
-            return _context4.stop();
+            return _context5.stop();
         }
       }
-    }, _callee4);
+    }, _callee5);
   })));
-  it('custom the value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-    var _mount5, instance, element, _element$querySelecto4, el1, el2;
+  it('custom the value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _mount6, instance, element, _element$querySelecto4, el1, el2;
 
-    return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
       while (1) {
-        switch (_context5.prev = _context5.next) {
+        switch (_context6.prev = _context6.next) {
           case 0:
-            _mount5 = mount(ValueDemo), instance = _mount5[0], element = _mount5[1];
+            _mount6 = mount(ValueDemo), instance = _mount6[0], element = _mount6[1];
             _element$querySelecto4 = element.querySelectorAll('.k-switch'), el1 = _element$querySelecto4[0], el2 = _element$querySelecto4[1];
             el1.click();
             el2.click();
-            _context5.next = 6;
+            _context6.next = 6;
             return wait();
 
           case 6:
             expect(element.outerHTML).to.matchSnapshot();
             el1.click();
             el2.click();
-            _context5.next = 11;
+            _context6.next = 11;
             return wait();
 
           case 11:
@@ -257,9 +274,9 @@ describe('Switch', function () {
 
           case 12:
           case "end":
-            return _context5.stop();
+            return _context6.stop();
         }
       }
-    }, _callee5);
+    }, _callee6);
   })));
 });