@king-design/vue 3.1.4-beta.2 → 3.1.5

package/components/carousel/index.spec.js

@@ -14,184 +14,148 @@ describe('Carousel', function () {
   });
   it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var Demo, _mount, instance, element, carousel;
-
     return _regeneratorRuntime.wrap(function _callee$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            this.timeout(0);
-
-            Demo = /*#__PURE__*/function (_Component) {
-              _inheritsLoose(Demo, _Component);
-
-              function Demo() {
-                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.Carousel = Carousel;
-                _this.CarouselItem = CarouselItem;
-                return _this;
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          this.timeout(0);
+          Demo = /*#__PURE__*/function (_Component) {
+            _inheritsLoose(Demo, _Component);
+            function Demo() {
+              var _context;
+              var _this;
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
               }
-
-              return Demo;
-            }(Component);
-
-            Demo.template = "\n                const {Carousel, CarouselItem} = this;\n                <Carousel v-model='value' clonedAmount={this.get('clonedAmount')}>\n                    <CarouselItem>1</CarouselItem>\n                    <CarouselItem>2</CarouselItem>\n                    <CarouselItem>3</CarouselItem>\n                    <CarouselItem>4</CarouselItem> \n                </Carousel>\n            ";
-
-            Demo.defaults = function () {
-              return {
-                value: '$0',
-                clonedAmount: 1
-              };
+              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+              _this.Carousel = Carousel;
+              _this.CarouselItem = CarouselItem;
+              return _this;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const {Carousel, CarouselItem} = this;\n                <Carousel v-model='value' clonedAmount={this.get('clonedAmount')}>\n                    <CarouselItem>1</CarouselItem>\n                    <CarouselItem>2</CarouselItem>\n                    <CarouselItem>3</CarouselItem>\n                    <CarouselItem>4</CarouselItem> \n                </Carousel>\n            ";
+          Demo.defaults = function () {
+            return {
+              value: '$0',
+              clonedAmount: 1
             };
-
-            _mount = mount(Demo), instance = _mount[0], element = _mount[1];
-            carousel = instance.$lastInput.children;
-            expect(element.innerHTML).to.matchSnapshot(); // should change to next item
-
-            carousel.next();
-            _context2.next = 10;
-            return wait();
-
-          case 10:
-            expect(carousel.get('value')).to.eql('$1');
-            expect(element.innerHTML).to.matchSnapshot();
-            carousel.prev();
-            _context2.next = 15;
-            return wait();
-
-          case 15:
-            expect(carousel.get('value')).to.eql('$0');
-            expect(element.innerHTML).to.matchSnapshot();
-            carousel.setIndex(3);
-            _context2.next = 20;
-            return wait();
-
-          case 20:
-            expect(carousel.get('value')).to.eql('$3');
-            expect(element.innerHTML).to.matchSnapshot();
-            carousel.setIndex(0);
-            _context2.next = 25;
-            return wait();
-
-          case 25:
-            expect(carousel.get('value')).to.eql('$0');
-            expect(element.innerHTML).to.matchSnapshot();
-            carousel.prev();
-            _context2.next = 30;
-            return wait();
-
-          case 30:
-            expect(carousel.get('value')).to.eql('$3');
-            expect(element.innerHTML).to.matchSnapshot();
-            carousel.next();
-            _context2.next = 35;
-            return wait();
-
-          case 35:
-            expect(carousel.get('value')).to.eql('$0');
-            expect(element.innerHTML).to.matchSnapshot();
-            instance.set('value', '$3');
-            _context2.next = 40;
-            return wait();
-
-          case 40:
-            expect(carousel.get('value')).to.eql('$3');
-            expect(element.innerHTML).to.matchSnapshot(); // change clonedAmount
-
-            instance.set('clonedAmount', 2);
-            _context2.next = 45;
-            return wait();
-
-          case 45:
-            expect(element.innerHTML).to.matchSnapshot();
-
-          case 46:
-          case "end":
-            return _context2.stop();
-        }
+          };
+          _mount = mount(Demo), instance = _mount[0], element = _mount[1];
+          carousel = instance.$lastInput.children;
+          expect(element.innerHTML).to.matchSnapshot();
+          // should change to next item
+          carousel.next();
+          _context2.next = 10;
+          return wait();
+        case 10:
+          expect(carousel.get('value')).to.eql('$1');
+          expect(element.innerHTML).to.matchSnapshot();
+          carousel.prev();
+          _context2.next = 15;
+          return wait();
+        case 15:
+          expect(carousel.get('value')).to.eql('$0');
+          expect(element.innerHTML).to.matchSnapshot();
+          carousel.setIndex(3);
+          _context2.next = 20;
+          return wait();
+        case 20:
+          expect(carousel.get('value')).to.eql('$3');
+          expect(element.innerHTML).to.matchSnapshot();
+          carousel.setIndex(0);
+          _context2.next = 25;
+          return wait();
+        case 25:
+          expect(carousel.get('value')).to.eql('$0');
+          expect(element.innerHTML).to.matchSnapshot();
+          carousel.prev();
+          _context2.next = 30;
+          return wait();
+        case 30:
+          expect(carousel.get('value')).to.eql('$3');
+          expect(element.innerHTML).to.matchSnapshot();
+          carousel.next();
+          _context2.next = 35;
+          return wait();
+        case 35:
+          expect(carousel.get('value')).to.eql('$0');
+          expect(element.innerHTML).to.matchSnapshot();
+          instance.set('value', '$3');
+          _context2.next = 40;
+          return wait();
+        case 40:
+          expect(carousel.get('value')).to.eql('$3');
+          expect(element.innerHTML).to.matchSnapshot();
+          // change clonedAmount
+          instance.set('clonedAmount', 2);
+          _context2.next = 45;
+          return wait();
+        case 45:
+          expect(element.innerHTML).to.matchSnapshot();
+        case 46:
+        case "end":
+          return _context2.stop();
       }
     }, _callee, this);
   })));
   it('can auto play', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var _mount2, instance, carousel;
-
     return _regeneratorRuntime.wrap(function _callee2$(_context3) {
-      while (1) {
-        switch (_context3.prev = _context3.next) {
-          case 0:
-            this.timeout(0);
-            _mount2 = mount(AutoPlayDemo), instance = _mount2[0];
-            carousel = instance.$lastInput.children;
-            instance.set('time', 1000);
-            _context3.next = 6;
-            return wait(1500);
-
-          case 6:
-            expect(carousel.get('value')).to.eql('$1');
-            _context3.next = 9;
-            return wait(1100);
-
-          case 9:
-            expect(carousel.get('value')).to.eql('$2');
-            _context3.next = 12;
-            return wait(1100);
-
-          case 12:
-            expect(carousel.get('value')).to.eql('$3');
-            instance.set('time', false);
-            _context3.next = 16;
-            return wait(1100);
-
-          case 16:
-            expect(carousel.get('value')).to.eql('$3');
-
-          case 17:
-          case "end":
-            return _context3.stop();
-        }
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          this.timeout(0);
+          _mount2 = mount(AutoPlayDemo), instance = _mount2[0];
+          carousel = instance.$lastInput.children;
+          instance.set('time', 1000);
+          _context3.next = 6;
+          return wait(1500);
+        case 6:
+          expect(carousel.get('value')).to.eql('$1');
+          _context3.next = 9;
+          return wait(1100);
+        case 9:
+          expect(carousel.get('value')).to.eql('$2');
+          _context3.next = 12;
+          return wait(1100);
+        case 12:
+          expect(carousel.get('value')).to.eql('$3');
+          instance.set('time', false);
+          _context3.next = 16;
+          return wait(1100);
+        case 16:
+          expect(carousel.get('value')).to.eql('$3');
+        case 17:
+        case "end":
+          return _context3.stop();
       }
     }, _callee2, this);
   })));
   it('fade effect', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     var _mount3, instance, element, carousel;
-
     return _regeneratorRuntime.wrap(function _callee3$(_context4) {
-      while (1) {
-        switch (_context4.prev = _context4.next) {
-          case 0:
-            _mount3 = mount(EffectDemo), instance = _mount3[0], element = _mount3[1];
-            carousel = instance.$lastInput.children;
-            carousel.next();
-            _context4.next = 5;
-            return wait();
-
-          case 5:
-            expect(element.innerHTML).to.matchSnapshot(); // change effect
-
-            instance.set('effect', 'slide');
-            _context4.next = 9;
-            return wait();
-
-          case 9:
-            expect(element.innerHTML).to.matchSnapshot();
-            instance.set('effect', 'fade');
-            _context4.next = 13;
-            return wait();
-
-          case 13:
-            expect(element.innerHTML).to.matchSnapshot();
-
-          case 14:
-          case "end":
-            return _context4.stop();
-        }
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _mount3 = mount(EffectDemo), instance = _mount3[0], element = _mount3[1];
+          carousel = instance.$lastInput.children;
+          carousel.next();
+          _context4.next = 5;
+          return wait();
+        case 5:
+          expect(element.innerHTML).to.matchSnapshot();
+          // change effect
+          instance.set('effect', 'slide');
+          _context4.next = 9;
+          return wait();
+        case 9:
+          expect(element.innerHTML).to.matchSnapshot();
+          instance.set('effect', 'fade');
+          _context4.next = 13;
+          return wait();
+        case 13:
+          expect(element.innerHTML).to.matchSnapshot();
+        case 14:
+        case "end":
+          return _context4.stop();
       }
     }, _callee3);
   })));

package/components/carousel/index.vdt.js

@@ -8,30 +8,27 @@ import { makeStyles } from './styles';
 import { linkEvent } from 'intact-vue-next';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      className = _this$get.className,
-      children = _this$get.children,
-      arrow = _this$get.arrow,
-      effect = _this$get.effect;
-
+    className = _this$get.className,
+    children = _this$get.children,
+    arrow = _this$get.arrow,
+    effect = _this$get.effect;
   var _this$slide = this.slide,
-      translate = _this$slide.translate,
-      shouldTransition = _this$slide.shouldTransition,
-      elementRef = _this$slide.elementRef,
-      isSlide = _this$slide.isSlide;
+    translate = _this$slide.translate,
+    shouldTransition = _this$slide.shouldTransition,
+    elementRef = _this$slide.elementRef,
+    isSlide = _this$slide.isSlide;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-carousel"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + arrow] = true, _classNameObj[k + "-stop"] = !shouldTransition.value, _classNameObj[k + "-" + effect] = true, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var _this$items = this.items,
-      getItems = _this$items.getItems,
-      getItemsWithCloned = _this$items.getItemsWithCloned;
+    getItems = _this$items.getItems,
+    getItemsWithCloned = _this$items.getItemsWithCloned;
   var _this$autoplay = this.autoplay,
-      stop = _this$autoplay.stop,
-      play = _this$autoplay.play;
+    stop = _this$autoplay.stop,
+    play = _this$autoplay.play;
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this), {
@@ -64,7 +61,6 @@ export default function ($props, $blocks, $__proto__) {
     })
   }), _$ce(2, 'div', _$ma(getItems(), function ($value, $key) {
     var _$cn2;
-
     return _$ce(2, 'div', null, 1, _$cn((_$cn2 = {}, _$cn2[k + "-carousel-dot"] = true, _$cn2[k + "-active"] = this.isActive($value.props.value), _$cn2)), {
       'ev-click': linkEvent($key, this.setIndex)
     });

package/components/carousel/item.js

@@ -9,21 +9,16 @@ var typeDefs = {
 };
 export var CarouselItem = /*#__PURE__*/function (_Component) {
   _inheritsLoose(CarouselItem, _Component);
-
   function CarouselItem() {
     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.config = useConfigContext();
     return _this;
   }
-
   return CarouselItem;
 }(Component);
 CarouselItem.template = template;

package/components/carousel/item.vdt.js

@@ -5,17 +5,14 @@ import { getRestProps } from '../utils';
 import { makeItemStyles } from './styles';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
-
   $blocks || ($blocks = {});
   $props || ($props = {});
   var $this = this;
-
   var _this$get = this.get(),
-      className = _this$get.className,
-      children = _this$get.children,
-      value = _this$get.value,
-      cloned = _this$get.cloned;
-
+    className = _this$get.className,
+    children = _this$get.children,
+    value = _this$get.value,
+    cloned = _this$get.cloned;
   var parent = this.$senior;
   var active = parent.isActive(value);
   var k = this.config.k;

package/components/carousel/styles.js

@@ -7,7 +7,6 @@ var defaults = {
   get transition() {
     return theme.transition.large;
   },
-
   height: "300px",
   indicator: {
     bottom: "8px",
@@ -39,8 +38,8 @@ setDefault(function () {
   carousel = deepDefaults(theme, {
     carousel: defaults
   }).carousel;
-  makeStyles == null ? void 0 : makeStyles.clearCache();
-  makeItemStyles == null ? void 0 : makeItemStyles.clearCache();
+  makeStyles == null || makeStyles.clearCache();
+  makeItemStyles == null || makeItemStyles.clearCache();
 });
 export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("height:", carousel.height, ";position:relative;overflow:hidden;.", k, "-carousel-indicator{position:absolute;left:50%;transform:translateX(-50%);bottom:", carousel.indicator.bottom, ";}.", k, "-carousel-dot{height:", carousel.indicator.height, ";float:left;margin:", carousel.dot.margin, ";cursor:pointer;padding-top:", carousel.dot.paddingTop, ";&:before{content:'';display:block;width:", carousel.dot.width, ";height:", carousel.dot.height, ";background:", carousel.dot.bgColor, ";opacity:", carousel.dot.opacity, ";transition:width ", carousel.transition, ";}&.", k, "-active:before{opacity:", carousel.dot.active.opacity, ";width:", carousel.dot.active.width, ";}}.", k, "-carousel-btn{position:absolute;background:", carousel.arrow.bgColor, "!important;top:50%;transform:translateY(-50%);color:", carousel.arrow.color, ";opacity:", carousel.arrow.opacity, ";&:hover{color:#fff;opacity:", carousel.arrow.hoverOpacity, "!important;background:", carousel.arrow.bgColor, ";}&.", k, "-prev{left:", carousel.arrow.left, ";}&.", k, "-next{right:", carousel.arrow.right, ";}}&.", k, "-hover{.", k, "-carousel-btn{opacity:0;}&:hover{.", k, "-carousel-btn{opacity:", carousel.arrow.opacity, ";}}}&.", k, "-never{.", k, "-carousel-btn{display:none;}}&.", k, "-slide{.", k, "-carousel-wrapper{transition:transform ", carousel.transition, ";white-space:nowrap;}}&.", k, "-stop{.", k, "-carousel-wrapper{transition:none;}}&.", k, "-fade{.", k, "-carousel-item{position:absolute;}}");

package/components/carousel/useAutoplay.js

@@ -9,11 +9,9 @@ export function useAutoplay(next) {
     } else {
       ms = v || 0;
     }
-
     stop();
     play();
   });
-
   function play() {
     if (ms) {
       timer = window.setTimeout(function () {
@@ -22,14 +20,12 @@ export function useAutoplay(next) {
       }, ms);
     }
   }
-
   function stop() {
     if (timer) {
       window.clearTimeout(timer);
       timer = null;
     }
   }
-
   onBeforeUnmount(stop);
   return {
     stop: stop,

package/components/carousel/useItems.js

@@ -7,12 +7,10 @@ export function useItems() {
   var instance = useInstance();
   var items = [];
   var itemsWithCloned = [];
-
   function handleChildren() {
     var _instance$get = instance.get(),
-        children = _instance$get.children,
-        value = _instance$get.value;
-
+      children = _instance$get.children,
+      value = _instance$get.value;
     items = [];
     itemsWithCloned = [];
     var index = 0;
@@ -20,44 +18,34 @@ export function useItems() {
     eachChildren(children, function (vNode) {
       if (isComponentVNode(vNode, CarouselItem)) {
         var clonedVNode = directClone(vNode);
-
         var props = _extends({}, vNode.props);
-
         if (isNullOrUndefined(props.value)) {
           props.value = "$" + index++;
         }
-
         if (isNullOrUndefined(props.key)) {
           props.key = props.value;
         }
-
         clonedVNode.props = props;
         items.push(clonedVNode);
         itemsWithCloned.push(clonedVNode);
-
         if (value === props.value) {
           valueExist = true;
         }
       }
     });
-
     if (!valueExist && items.length) {
       instance.set('value', items[0].props.value);
     }
-
     cloneVNodes();
   }
-
   function cloneVNodes() {
     if (instance.get('effect') === 'slide') {
       var _itemsWithCloned, _itemsWithCloned2;
-
       var length = itemsWithCloned.length;
-      if (!length) return; // clone the first and last vNodes for loop
-
+      if (!length) return;
+      // clone the first and last vNodes for loop
       var firstVNodes = [];
       var lastVNodes = [];
-
       var clone = function clone(vNode, index) {
         var clonedVNode = directClone(vNode);
         var props = clonedVNode.props;
@@ -67,18 +55,14 @@ export function useItems() {
         });
         return clonedVNode;
       };
-
       for (var i = 0; i < instance.get('clonedAmount'); i++) {
         firstVNodes.push(clone(items[i % length], i));
         lastVNodes.unshift(clone(items[((length - i - 1) % length + length) % length], i));
       }
-
       (_itemsWithCloned = itemsWithCloned).push.apply(_itemsWithCloned, firstVNodes);
-
       (_itemsWithCloned2 = itemsWithCloned).unshift.apply(_itemsWithCloned2, lastVNodes);
     }
   }
-
   instance.on('$receive:children', handleChildren);
   return {
     getItems: function getItems() {