@king-design/vue 2.0.0-beta.0

package/components/carousel/index.spec.js

@@ -0,0 +1,200 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import AutoPlayDemo from '~/components/carousel/demos/autoplay';
+import EffectDemo from '~/components/carousel/demos/effect';
+import { mount, unmount, wait } from '../../test/utils';
+import { Carousel } from './';
+import { CarouselItem } from './item';
+import { Component } from 'intact-vue-next';
+describe('Carousel', function () {
+  afterEach(function () {
+    return unmount();
+  });
+  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;
+              }
+
+              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();
+        }
+      }
+    }, _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();
+        }
+      }
+    }, _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();
+        }
+      }
+    }, _callee3);
+  })));
+});
+
+export {normalize} from 'intact-vue-next';

package/components/carousel/index.vdt.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, createUnknownComponentVNode as _$cc, map as _$ma } from 'intact-vue-next';
+import { getRestProps, mapChildren } from '../utils';
+import { CarouselItem } from './item';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { makeStyles } from './styles';
+import { linkEvent } from 'intact';
+var _$tmp0 = {
+  'className': 'ion-ios-arrow-left'
+};
+var _$tmp1 = {
+  'className': 'ion-ios-arrow-right'
+};
+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;
+
+  var _this$slide = this.slide,
+      translate = _this$slide.translate,
+      shouldTransition = _this$slide.shouldTransition,
+      elementRef = _this$slide.elementRef,
+      isSlide = _this$slide.isSlide;
+  var classNameObj = (_classNameObj = {
+    'k-carousel': true
+  }, _classNameObj[className] = className, _classNameObj["k-" + arrow] = true, _classNameObj['k-stop'] = !shouldTransition.value, _classNameObj["k-" + effect] = true, _classNameObj[makeStyles()] = true, _classNameObj);
+  var _this$items = this.items,
+      getItems = _this$items.getItems,
+      getItemsWithCloned = _this$items.getItemsWithCloned;
+  var _this$autoplay = this.autoplay,
+      stop = _this$autoplay.stop,
+      play = _this$autoplay.play;
+  return _$cv('div', _extends({
+    'className': _$cn(classNameObj)
+  }, getRestProps(this), {
+    'ref': elementRef,
+    'ev-mouseenter': stop,
+    'ev-mouseleave': play
+  }), [_$ce(2, 'div', getItemsWithCloned(), 0, 'k-carousel-wrapper', {
+    'style': {
+      transform: isSlide() ? "translate3d(" + translate.value + "px, 0, 0)" : undefined
+    }
+  }), _$cc(Button, {
+    'icon': true,
+    'circle': true,
+    'type': 'none',
+    'size': 'large',
+    'className': 'k-carousel-btn k-prev',
+    'ev-click': this.prev,
+    'children': _$cc(Icon, _$tmp0)
+  }), _$cc(Button, {
+    'icon': true,
+    'circle': true,
+    'type': 'none',
+    'size': 'large',
+    'className': 'k-carousel-btn k-next',
+    'ev-click': this.next,
+    'children': _$cc(Icon, _$tmp1)
+  }), _$ce(2, 'div', _$ma(getItems(), function ($value, $key) {
+    return _$ce(2, 'div', null, 1, _$cn({
+      'k-carousel-dot': true,
+      'k-active': this.isActive($value.props.value)
+    }), {
+      'ev-click': linkEvent($key, this.setIndex)
+    });
+  }, $this), 4, 'k-carousel-indicator c-clearfix')]);
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/carousel/item.d.ts

@@ -0,0 +1,12 @@
+import { Component, TypeDefs } from 'intact-vue-next';
+export interface CarouselItemProps {
+    value?: string;
+    cloned?: boolean;
+}
+export declare class CarouselItem extends Component<CarouselItemProps> {
+    static template: string | import("intact").Template<any>;
+    static typeDefs: Required<TypeDefs<CarouselItemProps>>;
+}
+
+
+export {normalize} from 'intact-vue-next';

package/components/carousel/item.js

@@ -0,0 +1,20 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import { Component } from 'intact-vue-next';
+import template from './item.vdt';
+var typeDefs = {
+  value: String,
+  cloned: null
+};
+export var CarouselItem = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(CarouselItem, _Component);
+
+  function CarouselItem() {
+    return _Component.apply(this, arguments) || this;
+  }
+
+  return CarouselItem;
+}(Component);
+CarouselItem.template = template;
+CarouselItem.typeDefs = typeDefs;
+
+export {normalize} from 'intact-vue-next';

package/components/carousel/item.vdt.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn } from 'intact-vue-next';
+import { Transition } from 'intact';
+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;
+
+  var parent = this.$senior;
+  var active = parent.isActive(value);
+  var classNameObj = (_classNameObj = {
+    'k-carousel-item': true
+  }, _classNameObj[className] = className, _classNameObj['k-active'] = active, _classNameObj['k-cloned'] = cloned, _classNameObj[makeItemStyles()] = true, _classNameObj);
+  var isSlide = parent.get('effect') === 'slide';
+  return _$cc(Transition, {
+    'show': active || isSlide,
+    'name': 'k-carousel-fade',
+    'children': _$cv('div', _extends({
+      'className': _$cn(classNameObj)
+    }, getRestProps(this)), children)
+  });
+}
+;
+
+export {normalize} from 'intact-vue-next';

package/components/carousel/styles.d.ts

@@ -0,0 +1,6 @@
+import '../../styles/global';
+export declare function makeStyles(): string;
+export declare function makeItemStyles(): string;
+
+
+export {normalize} from 'intact-vue-next';

package/components/carousel/styles.js

@@ -0,0 +1,46 @@
+import { css } from '@emotion/css';
+import { theme, setDefault } from '../../styles/theme';
+import { deepDefaults } from '../../styles/utils';
+import '../../styles/global';
+var defaults = {
+  transition: ".5s ease",
+  height: "300px",
+  indicator: {
+    bottom: "8px",
+    height: "20px"
+  },
+  dot: {
+    paddingTop: "8px",
+    margin: "0 2px",
+    height: "3px",
+    width: "16px",
+    opacity: ".3",
+    bgColor: "#fff",
+    active: {
+      opacity: "1",
+      width: "24px"
+    }
+  },
+  arrow: {
+    bgColor: "rgba(0, 0, 0, .5)",
+    color: "#fff",
+    opacity: ".5",
+    hoverOpacity: "1",
+    left: "10px",
+    right: "10px"
+  }
+};
+var carousel;
+setDefault(function () {
+  carousel = deepDefaults(theme, {
+    carousel: defaults
+  }).carousel;
+});
+export function makeStyles() {
+  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;}}");
+}
+export function makeItemStyles() {
+  return /*#__PURE__*/css("display:inline-block;width:100%;height:100%;&.k-carousel-fade-enter-active,&.k-carousel-fade-leave-active{transition:opacity ", carousel.transition, ";}&.k-carousel-fade-enter-from,&.k-carousel-fade-leave-to{opacity:0;}");
+}
+
+export {normalize} from 'intact-vue-next';

package/components/carousel/useAutoplay.d.ts

@@ -0,0 +1,7 @@
+export declare function useAutoplay(next: () => void): {
+    stop: () => void;
+    play: () => void;
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/carousel/useAutoplay.js

@@ -0,0 +1,37 @@
+import { useInstance, onBeforeUnmount } from 'intact-vue-next';
+export function useAutoplay(next) {
+  var instance = useInstance();
+  var timer;
+  var ms;
+  instance.on('$receive:autoplay', function (v) {
+    if (v === true) {
+      ms = 5000;
+    } else {
+      ms = v || 0;
+    }
+
+    stop();
+    play();
+  });
+
+  function play() {
+    if (ms) {
+      timer = window.setTimeout(function () {
+        next();
+        play();
+      }, ms);
+    }
+  }
+
+  function stop() {
+    window.clearTimeout(timer);
+  }
+
+  onBeforeUnmount(stop);
+  return {
+    stop: stop,
+    play: play
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/carousel/useItems.d.ts

@@ -0,0 +1,9 @@
+import { VNodeComponentClass } from 'intact-vue-next';
+import { CarouselItem } from './item';
+export declare function useItems(): {
+    getItems: () => VNodeComponentClass<CarouselItem>[];
+    getItemsWithCloned: () => VNodeComponentClass<CarouselItem>[];
+};
+
+
+export {normalize} from 'intact-vue-next';

package/components/carousel/useItems.js

@@ -0,0 +1,93 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import { useInstance, directClone } from 'intact-vue-next';
+import { CarouselItem } from './item';
+import { eachChildren, isComponentVNode } from '../utils';
+import { isNullOrUndefined } from 'intact-shared';
+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;
+
+    items = [];
+    itemsWithCloned = [];
+    var index = 0;
+    var valueExist = false;
+    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
+
+      var firstVNodes = [];
+      var lastVNodes = [];
+
+      var clone = function clone(vNode, index) {
+        var clonedVNode = directClone(vNode);
+        var props = clonedVNode.props;
+        clonedVNode.props = _extends({}, props, {
+          key: "$cloned:" + props.key + ":" + index,
+          cloned: true
+        });
+        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() {
+      return items;
+    },
+    getItemsWithCloned: function getItemsWithCloned() {
+      return itemsWithCloned;
+    }
+  };
+}
+
+export {normalize} from 'intact-vue-next';

package/components/carousel/useSlide.d.ts

@@ -0,0 +1,12 @@
+import { VNodeComponentClass } from 'intact-vue-next';
+import type { CarouselItem } from './item';
+export declare function useSlide(getItems: () => VNodeComponentClass<CarouselItem>[], getItemsWithCloned: () => VNodeComponentClass<CarouselItem>[]): {
+    translate: import("../../hooks/useState").State<number>;
+    shouldTransition: import("../../hooks/useState").State<boolean>;
+    elementRef: import("intact").RefObject<HTMLElement>;
+    translateToItem: (item: VNodeComponentClass<CarouselItem>, oldIndex: number | null, newIndex: number | null, keepDirection: boolean) => Promise<void>;
+    isSlide: () => boolean;
+};
+
+
+export {normalize} from 'intact-vue-next';