unika-components 1.0.69 → 1.0.71

package/dist/src/components/UniSwiper/UniSwiper.vue.d.ts

@@ -34,20 +34,6 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     styleProps: import("vue").ComputedRef<Pick<any, string>>;
     handleClick: () => void;
-    swiperOptions: import("vue").Ref<{
-        navigation: boolean;
-        pagination: {
-            el: string;
-            clickable: boolean;
-        };
-        autoplay: {
-            delay: number;
-        };
-        effect: string;
-    }>;
-    direction: string;
-    modules: import("swiper/types").SwiperComponent[];
-    effect: string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     slides: {
         type: {

package/dist/src/defaultProps.d.ts

@@ -347,24 +347,15 @@ export declare const lottiesDefaultProps: {
     pauseAnimation: boolean;
 };
 export declare const swiperDefaultProps: {
-    actionType: string;
-    url: string;
-    height: string;
-    width: string;
-    paddingLeft: string;
-    paddingRight: string;
-    paddingTop: string;
-    paddingBottom: string;
-    borderStyle: string;
-    borderColor: string;
-    borderWidth: string;
-    borderRadius: string;
-    boxShadow: string;
-    opacity: number;
-    position: string;
     left: string;
     top: string;
-    right: string;
+    width: string;
+    transform: string;
+    backgroundColor: string;
+    height: string;
+    slides: {
+        image: string;
+    }[];
 };
 export declare const componentsDefaultProps: {
     'uni-text': {
@@ -622,24 +613,15 @@ export declare const componentsDefaultProps: {
     };
     'uni-swiper': {
         props: {
-            actionType: string;
-            url: string;
-            height: string;
-            width: string;
-            paddingLeft: string;
-            paddingRight: string;
-            paddingTop: string;
-            paddingBottom: string;
-            borderStyle: string;
-            borderColor: string;
-            borderWidth: string;
-            borderRadius: string;
-            boxShadow: string;
-            opacity: number;
-            position: string;
             left: string;
             top: string;
-            right: string;
+            width: string;
+            transform: string;
+            backgroundColor: string;
+            height: string;
+            slides: {
+                image: string;
+            }[];
         };
     };
     'uni-button': {

package/dist/unika-components.css

@@ -3,18 +3,6 @@
   max-width: 100%;
 }
 
-h2.uni-text-component, p.uni-text-component {
-  margin-bottom: 0;
-}
-button.uni-text-component {
-  padding: 5px 10px;
-  cursor: pointer;
-}
-.uni-text-component {
-  box-sizing: border-box;
-  white-space: pre-wrap;
-}
-
  .slide-guide {
     position: absolute;
     bottom: 90px;
@@ -88,14 +76,6 @@ body, html {
     }
 }
 
-.slot-number {
-  position: absolute;
-  bottom: 2px;
-  left: 7px;
-  font-size: 12px;
-  color: #666
-}
-
   .uni-background-component {
     width: 100%;
   }
@@ -132,6 +112,47 @@ body, html {
   opacity: 0.1;
 }
 
+.slot-number {
+  position: absolute;
+  bottom: 2px;
+  left: 7px;
+  font-size: 12px;
+  color: #666
+}
+
+h2.uni-text-component, p.uni-text-component {
+  margin-bottom: 0;
+}
+button.uni-text-component {
+  padding: 5px 10px;
+  cursor: pointer;
+}
+.uni-text-component {
+  box-sizing: border-box;
+  white-space: pre-wrap;
+}
+
+  .uni-video-component {
+    position: relative;
+    text-align: center;
+  }
+  .play-pause-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    font-size: 2rem;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    padding: 10px;
+    transition: background 0.3s;
+  }
+  .play-pause-button:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+
 #audio {
   position: absolute;
   right: 10px;
@@ -289,28 +310,7 @@ body, html {
   vertical-align: top;
 }
 
-  .uni-video-component {
-    position: relative;
-    text-align: center;
-  }
-  .play-pause-button {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    cursor: pointer;
-    font-size: 2rem;
-    color: #fff;
-    background: rgba(0, 0, 0, 0.6);
-    border-radius: 50%;
-    padding: 10px;
-    transition: background 0.3s;
-  }
-  .play-pause-button:hover {
-    background: rgba(0, 0, 0, 0.8);
-  }
-
-.swiper-component {
+.swiper-warp {
   width: 100%;
   height: 100%;
 }
@@ -871,6 +871,193 @@ button.swiper-pagination-bullet {
           backface-visibility: hidden;
 }
 
+
+.no-animation__card {
+  font-weight: 500;
+  font-size: var(--countdown-size, 2rem);
+  line-height: 1.5;
+  display: block;
+  color: var(--main-color, #EC685C);
+}
+
+.flip-clock {
+  text-align: center;
+  perspective: 600px;
+  margin: 0 auto;
+}
+
+.flip-clock *,
+.flip-clock *:before,
+.flip-clock *:after {
+  box-sizing: border-box;
+}
+
+.flip-clock__piece {
+  display: inline-block;
+  margin: 0 0.2vw;
+}
+
+@media (min-width: 1000px) {
+  .flip-clock__piece {
+    margin: 0 5px;
+  }
+}
+
+.flip-clock__slot {
+  font-size: var(--label-size, 1rem);
+  line-height: 1.5;
+  display: block;
+  color: var(--label-color, #222222);
+}
+
+.flip-card {
+  display: block;
+  position: relative;
+  padding-bottom: 0.72em; /* halfHeight */
+  font-size: var(--countdown-size, 2.25rem);
+  line-height: 0.95;
+}
+
+@media (min-width: 1000px) {
+  .flip-clock__slot {
+    font-size: 1.2rem;
+  }
+  
+  .flip-card {
+    font-size: 3rem;
+  }
+}
+
+.flip-card__top,
+.flip-card__bottom,
+.flip-card__back-bottom,
+.flip-card__back::before,
+.flip-card__back::after{
+  display: block;
+  height: 0.72em; /* halfHeight */
+  color: var(--main-color, #EC685C);
+  background: var(--main-flip-background-color, #222222);
+  padding: 0.23em 0.15em 0.4em;
+  border-radius: 0.15em 0.15em 0 0; /* borderRadius */
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transform-style: preserve-3d;
+  width: 2.1em;
+}
+
+.flip-card__top-4digits,
+.flip-card__bottom-4digits,
+.flip-card__back-bottom-4digits,
+.flip-card__back-4digits::before,
+.flip-card__back-4digits::after {
+  display: block;
+  height: 0.72em; /* halfHeight */
+  color: var(--main-color, #EC685C);
+  background: var(--main-flip-background-color, #222222);
+  padding: 0.23em 0.15em 0.4em;
+  border-radius: 0.15em 0.15em 0 0; /* borderRadius */
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transform-style: preserve-3d;
+  width: 2.65em;
+}
+
+.flip-card__bottom,
+.flip-card__back-bottom,
+.flip-card__bottom-4digits,
+.flip-card__back-bottom-4digits {
+  color: var(--second-flip-color, #EC685C);
+  position: absolute;
+  top: 50%;
+  left: 0;
+  border-top: solid 1px var(--second-flip-background-color, #000);
+  background: var(--second-flip-background-color, #393939);
+  border-radius: 0 0 0.15em 0.15em; /* borderRadius */
+  pointer-events: none;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.flip-card__back-bottom,
+.flip-card__back-bottom-4digits {
+  z-index: 1;
+}
+
+.flip-card__bottom::after,
+.flip-card__back-bottom::after,
+.flip-card__bottom-4digits::after,
+.flip-card__back-bottom-4digits::after {
+  display: block;
+  margin-top: -0.72em; /* Negative halfHeight */
+}
+.flip-card__back::before,
+.flip-card__bottom::after,
+.flip-card__back-bottom::after,
+.flip-card__back-4digits::before,
+.flip-card__bottom-4digits::after,
+.flip-card__back-bottom-4digits::after {
+    content: attr(data-value);
+}
+
+.flip-card__back,
+.flip-card__back-4digits {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0%;
+    pointer-events: none;
+}
+.flip-card__back::before,
+.flip-card__back-4digits::before {
+  position: relative;
+  overflow: hidden;
+  z-index: -1;
+}
+
+.flip .flip-card__back::before,
+.flip .flip-card__back-4digits::before {
+  z-index: 1;
+  animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
+  animation-fill-mode: both;
+  transform-origin: center bottom;
+}
+
+.flip .flip-card__bottom,
+.flip .flip-card__bottom-4digits {
+  transform-origin: center top;
+  animation-fill-mode: both;
+  animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
+}
+@keyframes flipTop {
+  0% {
+    transform: rotateX(0deg);
+    z-index: 2;
+  }
+  0%, 99% {
+    opacity: 1;
+  }
+  100% {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
+}
+
+@keyframes flipBottom {
+  0%, 50% {
+    z-index: -1;
+    transform: rotateX(90deg);
+    opacity: 0;
+  }
+  51% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+    transform: rotateX(0deg);
+    z-index: 5;
+  }
+}
+
 .unika-calendar-title {
   font-size: 25px;
   padding-bottom: 4px;
@@ -1122,190 +1309,3 @@ button.swiper-pagination-bullet {
   padding: 0 0px;
   border-bottom: 1px solid
 }
-
-
-.no-animation__card {
-  font-weight: 500;
-  font-size: var(--countdown-size, 2rem);
-  line-height: 1.5;
-  display: block;
-  color: var(--main-color, #EC685C);
-}
-
-.flip-clock {
-  text-align: center;
-  perspective: 600px;
-  margin: 0 auto;
-}
-
-.flip-clock *,
-.flip-clock *:before,
-.flip-clock *:after {
-  box-sizing: border-box;
-}
-
-.flip-clock__piece {
-  display: inline-block;
-  margin: 0 0.2vw;
-}
-
-@media (min-width: 1000px) {
-  .flip-clock__piece {
-    margin: 0 5px;
-  }
-}
-
-.flip-clock__slot {
-  font-size: var(--label-size, 1rem);
-  line-height: 1.5;
-  display: block;
-  color: var(--label-color, #222222);
-}
-
-.flip-card {
-  display: block;
-  position: relative;
-  padding-bottom: 0.72em; /* halfHeight */
-  font-size: var(--countdown-size, 2.25rem);
-  line-height: 0.95;
-}
-
-@media (min-width: 1000px) {
-  .flip-clock__slot {
-    font-size: 1.2rem;
-  }
-  
-  .flip-card {
-    font-size: 3rem;
-  }
-}
-
-.flip-card__top,
-.flip-card__bottom,
-.flip-card__back-bottom,
-.flip-card__back::before,
-.flip-card__back::after{
-  display: block;
-  height: 0.72em; /* halfHeight */
-  color: var(--main-color, #EC685C);
-  background: var(--main-flip-background-color, #222222);
-  padding: 0.23em 0.15em 0.4em;
-  border-radius: 0.15em 0.15em 0 0; /* borderRadius */
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  transform-style: preserve-3d;
-  width: 2.1em;
-}
-
-.flip-card__top-4digits,
-.flip-card__bottom-4digits,
-.flip-card__back-bottom-4digits,
-.flip-card__back-4digits::before,
-.flip-card__back-4digits::after {
-  display: block;
-  height: 0.72em; /* halfHeight */
-  color: var(--main-color, #EC685C);
-  background: var(--main-flip-background-color, #222222);
-  padding: 0.23em 0.15em 0.4em;
-  border-radius: 0.15em 0.15em 0 0; /* borderRadius */
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  transform-style: preserve-3d;
-  width: 2.65em;
-}
-
-.flip-card__bottom,
-.flip-card__back-bottom,
-.flip-card__bottom-4digits,
-.flip-card__back-bottom-4digits {
-  color: var(--second-flip-color, #EC685C);
-  position: absolute;
-  top: 50%;
-  left: 0;
-  border-top: solid 1px var(--second-flip-background-color, #000);
-  background: var(--second-flip-background-color, #393939);
-  border-radius: 0 0 0.15em 0.15em; /* borderRadius */
-  pointer-events: none;
-  overflow: hidden;
-  z-index: 2;
-}
-
-.flip-card__back-bottom,
-.flip-card__back-bottom-4digits {
-  z-index: 1;
-}
-
-.flip-card__bottom::after,
-.flip-card__back-bottom::after,
-.flip-card__bottom-4digits::after,
-.flip-card__back-bottom-4digits::after {
-  display: block;
-  margin-top: -0.72em; /* Negative halfHeight */
-}
-.flip-card__back::before,
-.flip-card__bottom::after,
-.flip-card__back-bottom::after,
-.flip-card__back-4digits::before,
-.flip-card__bottom-4digits::after,
-.flip-card__back-bottom-4digits::after {
-    content: attr(data-value);
-}
-
-.flip-card__back,
-.flip-card__back-4digits {
-    position: absolute;
-    top: 0;
-    height: 100%;
-    left: 0%;
-    pointer-events: none;
-}
-.flip-card__back::before,
-.flip-card__back-4digits::before {
-  position: relative;
-  overflow: hidden;
-  z-index: -1;
-}
-
-.flip .flip-card__back::before,
-.flip .flip-card__back-4digits::before {
-  z-index: 1;
-  animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
-  animation-fill-mode: both;
-  transform-origin: center bottom;
-}
-
-.flip .flip-card__bottom,
-.flip .flip-card__bottom-4digits {
-  transform-origin: center top;
-  animation-fill-mode: both;
-  animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
-}
-@keyframes flipTop {
-  0% {
-    transform: rotateX(0deg);
-    z-index: 2;
-  }
-  0%, 99% {
-    opacity: 1;
-  }
-  100% {
-    transform: rotateX(-90deg);
-    opacity: 0;
-  }
-}
-
-@keyframes flipBottom {
-  0%, 50% {
-    z-index: -1;
-    transform: rotateX(90deg);
-    opacity: 0;
-  }
-  51% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 1;
-    transform: rotateX(0deg);
-    z-index: 5;
-  }
-}

package/dist/unika-components.esm.js

@@ -5160,7 +5160,16 @@ const lottiesDefaultProps = {
     pauseAnimation: false
 };
 const swiperDefaultProps = {
-    ...commonDefaultProps
+    left: '57px',
+    top: '147px',
+    width: '200px',
+    transform: 'rotate(0deg)',
+    backgroundColor: 'rgb(33, 147, 255)',
+    height: '300px',
+    slides: [
+        { image: 'https://img1.maka.im/materialStore/beijingshejia/tupianbeijinga/9/M_8DZHHVC2/M_8DZHHVC2_v1.png?x-oss-process=image/resize,w_564' },
+        { image: 'https://img1.maka.im/materialStore/beijingshejia/tupianbeijinga/9/M_61VRKZNU/M_61VRKZNU_v1.jpg?x-oss-process=image/resize,w_564' }
+    ]
 };
 // this contains all default props for all the components
 // useful for inserting new component into the store
@@ -6921,7 +6930,7 @@ var Resize = {
   }
 };
 
-function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
 var Observer = {
   attach: function attach(target, options) {
     if (options === void 0) {
@@ -6996,7 +7005,7 @@ var Observer$1 = {
   create: function create() {
     var swiper = this;
     bindModuleMethods(swiper, {
-      observer: _extends$7({}, Observer, {
+      observer: _extends$8({}, Observer, {
         observers: []
       })
     });
@@ -10779,7 +10788,7 @@ Object.keys(prototypes).forEach(function (prototypeGroup) {
 Swiper$1.use([Resize, Observer$1]);
 var SwiperCore = Swiper$1;
 
-function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
 var Navigation = {
   toggleEl: function toggleEl($el, disabled) {
     $el[disabled ? 'addClass' : 'removeClass'](this.params.navigation.disabledClass);
@@ -10910,7 +10919,7 @@ var Navigation$1 = {
   create: function create() {
     var swiper = this;
     bindModuleMethods(swiper, {
-      navigation: _extends$6({}, Navigation)
+      navigation: _extends$7({}, Navigation)
     });
   },
   on: {
@@ -10974,7 +10983,7 @@ var Navigation$1 = {
   }
 };
 
-function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
 var Pagination = {
   update: function update() {
     // Render || Update Pagination bullets/items
@@ -11288,7 +11297,7 @@ var Pagination$1 = {
   create: function create() {
     var swiper = this;
     bindModuleMethods(swiper, {
-      pagination: _extends$5({
+      pagination: _extends$6({
         dynamicBulletIndex: 0
       }, Pagination)
     });
@@ -11352,6 +11361,225 @@ var Pagination$1 = {
   }
 };
 
+function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+var Autoplay = {
+  run: function run() {
+    var swiper = this;
+    var $activeSlideEl = swiper.slides.eq(swiper.activeIndex);
+    var delay = swiper.params.autoplay.delay;
+
+    if ($activeSlideEl.attr('data-swiper-autoplay')) {
+      delay = $activeSlideEl.attr('data-swiper-autoplay') || swiper.params.autoplay.delay;
+    }
+
+    clearTimeout(swiper.autoplay.timeout);
+    swiper.autoplay.timeout = nextTick(function () {
+      var autoplayResult;
+
+      if (swiper.params.autoplay.reverseDirection) {
+        if (swiper.params.loop) {
+          swiper.loopFix();
+          autoplayResult = swiper.slidePrev(swiper.params.speed, true, true);
+          swiper.emit('autoplay');
+        } else if (!swiper.isBeginning) {
+          autoplayResult = swiper.slidePrev(swiper.params.speed, true, true);
+          swiper.emit('autoplay');
+        } else if (!swiper.params.autoplay.stopOnLastSlide) {
+          autoplayResult = swiper.slideTo(swiper.slides.length - 1, swiper.params.speed, true, true);
+          swiper.emit('autoplay');
+        } else {
+          swiper.autoplay.stop();
+        }
+      } else if (swiper.params.loop) {
+        swiper.loopFix();
+        autoplayResult = swiper.slideNext(swiper.params.speed, true, true);
+        swiper.emit('autoplay');
+      } else if (!swiper.isEnd) {
+        autoplayResult = swiper.slideNext(swiper.params.speed, true, true);
+        swiper.emit('autoplay');
+      } else if (!swiper.params.autoplay.stopOnLastSlide) {
+        autoplayResult = swiper.slideTo(0, swiper.params.speed, true, true);
+        swiper.emit('autoplay');
+      } else {
+        swiper.autoplay.stop();
+      }
+
+      if (swiper.params.cssMode && swiper.autoplay.running) swiper.autoplay.run();else if (autoplayResult === false) {
+        swiper.autoplay.run();
+      }
+    }, delay);
+  },
+  start: function start() {
+    var swiper = this;
+    if (typeof swiper.autoplay.timeout !== 'undefined') return false;
+    if (swiper.autoplay.running) return false;
+    swiper.autoplay.running = true;
+    swiper.emit('autoplayStart');
+    swiper.autoplay.run();
+    return true;
+  },
+  stop: function stop() {
+    var swiper = this;
+    if (!swiper.autoplay.running) return false;
+    if (typeof swiper.autoplay.timeout === 'undefined') return false;
+
+    if (swiper.autoplay.timeout) {
+      clearTimeout(swiper.autoplay.timeout);
+      swiper.autoplay.timeout = undefined;
+    }
+
+    swiper.autoplay.running = false;
+    swiper.emit('autoplayStop');
+    return true;
+  },
+  pause: function pause(speed) {
+    var swiper = this;
+    if (!swiper.autoplay.running) return;
+    if (swiper.autoplay.paused) return;
+    if (swiper.autoplay.timeout) clearTimeout(swiper.autoplay.timeout);
+    swiper.autoplay.paused = true;
+
+    if (speed === 0 || !swiper.params.autoplay.waitForTransition) {
+      swiper.autoplay.paused = false;
+      swiper.autoplay.run();
+    } else {
+      ['transitionend', 'webkitTransitionEnd'].forEach(function (event) {
+        swiper.$wrapperEl[0].addEventListener(event, swiper.autoplay.onTransitionEnd);
+      });
+    }
+  },
+  onVisibilityChange: function onVisibilityChange() {
+    var swiper = this;
+    var document = getDocument$1();
+
+    if (document.visibilityState === 'hidden' && swiper.autoplay.running) {
+      swiper.autoplay.pause();
+    }
+
+    if (document.visibilityState === 'visible' && swiper.autoplay.paused) {
+      swiper.autoplay.run();
+      swiper.autoplay.paused = false;
+    }
+  },
+  onTransitionEnd: function onTransitionEnd(e) {
+    var swiper = this;
+    if (!swiper || swiper.destroyed || !swiper.$wrapperEl) return;
+    if (e.target !== swiper.$wrapperEl[0]) return;
+    ['transitionend', 'webkitTransitionEnd'].forEach(function (event) {
+      swiper.$wrapperEl[0].removeEventListener(event, swiper.autoplay.onTransitionEnd);
+    });
+    swiper.autoplay.paused = false;
+
+    if (!swiper.autoplay.running) {
+      swiper.autoplay.stop();
+    } else {
+      swiper.autoplay.run();
+    }
+  },
+  onMouseEnter: function onMouseEnter() {
+    var swiper = this;
+
+    if (swiper.params.autoplay.disableOnInteraction) {
+      swiper.autoplay.stop();
+    } else {
+      swiper.autoplay.pause();
+    }
+
+    ['transitionend', 'webkitTransitionEnd'].forEach(function (event) {
+      swiper.$wrapperEl[0].removeEventListener(event, swiper.autoplay.onTransitionEnd);
+    });
+  },
+  onMouseLeave: function onMouseLeave() {
+    var swiper = this;
+
+    if (swiper.params.autoplay.disableOnInteraction) {
+      return;
+    }
+
+    swiper.autoplay.paused = false;
+    swiper.autoplay.run();
+  },
+  attachMouseEvents: function attachMouseEvents() {
+    var swiper = this;
+
+    if (swiper.params.autoplay.pauseOnMouseEnter) {
+      swiper.$el.on('mouseenter', swiper.autoplay.onMouseEnter);
+      swiper.$el.on('mouseleave', swiper.autoplay.onMouseLeave);
+    }
+  },
+  detachMouseEvents: function detachMouseEvents() {
+    var swiper = this;
+    swiper.$el.off('mouseenter', swiper.autoplay.onMouseEnter);
+    swiper.$el.off('mouseleave', swiper.autoplay.onMouseLeave);
+  }
+};
+var Autoplay$1 = {
+  name: 'autoplay',
+  params: {
+    autoplay: {
+      enabled: false,
+      delay: 3000,
+      waitForTransition: true,
+      disableOnInteraction: true,
+      stopOnLastSlide: false,
+      reverseDirection: false,
+      pauseOnMouseEnter: false
+    }
+  },
+  create: function create() {
+    var swiper = this;
+    bindModuleMethods(swiper, {
+      autoplay: _extends$5({}, Autoplay, {
+        running: false,
+        paused: false
+      })
+    });
+  },
+  on: {
+    init: function init(swiper) {
+      if (swiper.params.autoplay.enabled) {
+        swiper.autoplay.start();
+        var document = getDocument$1();
+        document.addEventListener('visibilitychange', swiper.autoplay.onVisibilityChange);
+        swiper.autoplay.attachMouseEvents();
+      }
+    },
+    beforeTransitionStart: function beforeTransitionStart(swiper, speed, internal) {
+      if (swiper.autoplay.running) {
+        if (internal || !swiper.params.autoplay.disableOnInteraction) {
+          swiper.autoplay.pause(speed);
+        } else {
+          swiper.autoplay.stop();
+        }
+      }
+    },
+    sliderFirstMove: function sliderFirstMove(swiper) {
+      if (swiper.autoplay.running) {
+        if (swiper.params.autoplay.disableOnInteraction) {
+          swiper.autoplay.stop();
+        } else {
+          swiper.autoplay.pause();
+        }
+      }
+    },
+    touchEnd: function touchEnd(swiper) {
+      if (swiper.params.cssMode && swiper.autoplay.paused && !swiper.params.autoplay.disableOnInteraction) {
+        swiper.autoplay.run();
+      }
+    },
+    destroy: function destroy(swiper) {
+      swiper.autoplay.detachMouseEvents();
+
+      if (swiper.autoplay.running) {
+        swiper.autoplay.stop();
+      }
+
+      var document = getDocument$1();
+      document.removeEventListener('visibilitychange', swiper.autoplay.onVisibilityChange);
+    }
+  }
+};
+
 function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 var Fade = {
   setTranslate: function setTranslate() {
@@ -75305,7 +75533,7 @@ script$2.install = (app) => {
 };
 
 const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-swiper'].props, isEditingProp);
-SwiperCore.use([Pagination$1, Navigation$1]);
+SwiperCore.use([Pagination$1, Navigation$1, Autoplay$1]);
 // array that contains style props
 var script$1 = defineComponent({
     name: 'uni-swiper',
@@ -75320,32 +75548,18 @@ var script$1 = defineComponent({
             ]
         }
     },
-    components: {},
+    components: {
+        Swiper,
+        SwiperSlide
+    },
     setup(props) {
         // 重用并且简化
         // 抽离并且获得 styleProps
         const styleProps = useStylePick(props);
         const handleClick = useComponentClick(props);
-        const swiperOptions = ref({
-            navigation: true,
-            pagination: {
-                el: '.swiper-pagination',
-                clickable: true
-            },
-            autoplay: {
-                delay: 5000
-            },
-            effect: 'fade'
-        });
-        const direction = 'horizontal';
-        const effect = 'fade';
         return {
             styleProps,
-            handleClick,
-            swiperOptions,
-            direction,
-            modules: [Navigation$1],
-            effect
+            handleClick
         };
     }
 });
@@ -75361,10 +75575,13 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     class: "uni-swiper-component"
   }, [
     createVNode(_component_swiper, {
-      class: "swiper-component",
-      modules: _ctx.modules,
-      effect: _ctx.effect,
-      direction: _ctx.direction
+      class: "swiper-warp",
+      autoplay: {
+        "delay": 2000,
+        "disableOnInteraction": false
+      },
+      direction: 'horizontal',
+      pagination: { "clickable": true }
     }, {
       default: withCtx(() => [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.slides, (slide, index) => {
@@ -75383,7 +75600,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
         }), 128 /* KEYED_FRAGMENT */))
       ]),
       _: 1 /* STABLE */
-    }, 8 /* PROPS */, ["modules", "effect", "direction"])
+    })
   ], 4 /* STYLE */))
 }
 

package/dist/unika-components.umd.js

@@ -5167,7 +5167,16 @@
       pauseAnimation: false
   };
   const swiperDefaultProps = {
-      ...commonDefaultProps
+      left: '57px',
+      top: '147px',
+      width: '200px',
+      transform: 'rotate(0deg)',
+      backgroundColor: 'rgb(33, 147, 255)',
+      height: '300px',
+      slides: [
+          { image: 'https://img1.maka.im/materialStore/beijingshejia/tupianbeijinga/9/M_8DZHHVC2/M_8DZHHVC2_v1.png?x-oss-process=image/resize,w_564' },
+          { image: 'https://img1.maka.im/materialStore/beijingshejia/tupianbeijinga/9/M_61VRKZNU/M_61VRKZNU_v1.jpg?x-oss-process=image/resize,w_564' }
+      ]
   };
   // this contains all default props for all the components
   // useful for inserting new component into the store
@@ -6928,7 +6937,7 @@
     }
   };
 
-  function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
+  function _extends$8() { _extends$8 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$8.apply(this, arguments); }
   var Observer = {
     attach: function attach(target, options) {
       if (options === void 0) {
@@ -7003,7 +7012,7 @@
     create: function create() {
       var swiper = this;
       bindModuleMethods(swiper, {
-        observer: _extends$7({}, Observer, {
+        observer: _extends$8({}, Observer, {
           observers: []
         })
       });
@@ -10786,7 +10795,7 @@
   Swiper$1.use([Resize, Observer$1]);
   var SwiperCore = Swiper$1;
 
-  function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
+  function _extends$7() { _extends$7 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$7.apply(this, arguments); }
   var Navigation = {
     toggleEl: function toggleEl($el, disabled) {
       $el[disabled ? 'addClass' : 'removeClass'](this.params.navigation.disabledClass);
@@ -10917,7 +10926,7 @@
     create: function create() {
       var swiper = this;
       bindModuleMethods(swiper, {
-        navigation: _extends$6({}, Navigation)
+        navigation: _extends$7({}, Navigation)
       });
     },
     on: {
@@ -10981,7 +10990,7 @@
     }
   };
 
-  function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+  function _extends$6() { _extends$6 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$6.apply(this, arguments); }
   var Pagination = {
     update: function update() {
       // Render || Update Pagination bullets/items
@@ -11295,7 +11304,7 @@
     create: function create() {
       var swiper = this;
       bindModuleMethods(swiper, {
-        pagination: _extends$5({
+        pagination: _extends$6({
           dynamicBulletIndex: 0
         }, Pagination)
       });
@@ -11359,6 +11368,225 @@
     }
   };
 
+  function _extends$5() { _extends$5 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$5.apply(this, arguments); }
+  var Autoplay = {
+    run: function run() {
+      var swiper = this;
+      var $activeSlideEl = swiper.slides.eq(swiper.activeIndex);
+      var delay = swiper.params.autoplay.delay;
+
+      if ($activeSlideEl.attr('data-swiper-autoplay')) {
+        delay = $activeSlideEl.attr('data-swiper-autoplay') || swiper.params.autoplay.delay;
+      }
+
+      clearTimeout(swiper.autoplay.timeout);
+      swiper.autoplay.timeout = nextTick(function () {
+        var autoplayResult;
+
+        if (swiper.params.autoplay.reverseDirection) {
+          if (swiper.params.loop) {
+            swiper.loopFix();
+            autoplayResult = swiper.slidePrev(swiper.params.speed, true, true);
+            swiper.emit('autoplay');
+          } else if (!swiper.isBeginning) {
+            autoplayResult = swiper.slidePrev(swiper.params.speed, true, true);
+            swiper.emit('autoplay');
+          } else if (!swiper.params.autoplay.stopOnLastSlide) {
+            autoplayResult = swiper.slideTo(swiper.slides.length - 1, swiper.params.speed, true, true);
+            swiper.emit('autoplay');
+          } else {
+            swiper.autoplay.stop();
+          }
+        } else if (swiper.params.loop) {
+          swiper.loopFix();
+          autoplayResult = swiper.slideNext(swiper.params.speed, true, true);
+          swiper.emit('autoplay');
+        } else if (!swiper.isEnd) {
+          autoplayResult = swiper.slideNext(swiper.params.speed, true, true);
+          swiper.emit('autoplay');
+        } else if (!swiper.params.autoplay.stopOnLastSlide) {
+          autoplayResult = swiper.slideTo(0, swiper.params.speed, true, true);
+          swiper.emit('autoplay');
+        } else {
+          swiper.autoplay.stop();
+        }
+
+        if (swiper.params.cssMode && swiper.autoplay.running) swiper.autoplay.run();else if (autoplayResult === false) {
+          swiper.autoplay.run();
+        }
+      }, delay);
+    },
+    start: function start() {
+      var swiper = this;
+      if (typeof swiper.autoplay.timeout !== 'undefined') return false;
+      if (swiper.autoplay.running) return false;
+      swiper.autoplay.running = true;
+      swiper.emit('autoplayStart');
+      swiper.autoplay.run();
+      return true;
+    },
+    stop: function stop() {
+      var swiper = this;
+      if (!swiper.autoplay.running) return false;
+      if (typeof swiper.autoplay.timeout === 'undefined') return false;
+
+      if (swiper.autoplay.timeout) {
+        clearTimeout(swiper.autoplay.timeout);
+        swiper.autoplay.timeout = undefined;
+      }
+
+      swiper.autoplay.running = false;
+      swiper.emit('autoplayStop');
+      return true;
+    },
+    pause: function pause(speed) {
+      var swiper = this;
+      if (!swiper.autoplay.running) return;
+      if (swiper.autoplay.paused) return;
+      if (swiper.autoplay.timeout) clearTimeout(swiper.autoplay.timeout);
+      swiper.autoplay.paused = true;
+
+      if (speed === 0 || !swiper.params.autoplay.waitForTransition) {
+        swiper.autoplay.paused = false;
+        swiper.autoplay.run();
+      } else {
+        ['transitionend', 'webkitTransitionEnd'].forEach(function (event) {
+          swiper.$wrapperEl[0].addEventListener(event, swiper.autoplay.onTransitionEnd);
+        });
+      }
+    },
+    onVisibilityChange: function onVisibilityChange() {
+      var swiper = this;
+      var document = getDocument$1();
+
+      if (document.visibilityState === 'hidden' && swiper.autoplay.running) {
+        swiper.autoplay.pause();
+      }
+
+      if (document.visibilityState === 'visible' && swiper.autoplay.paused) {
+        swiper.autoplay.run();
+        swiper.autoplay.paused = false;
+      }
+    },
+    onTransitionEnd: function onTransitionEnd(e) {
+      var swiper = this;
+      if (!swiper || swiper.destroyed || !swiper.$wrapperEl) return;
+      if (e.target !== swiper.$wrapperEl[0]) return;
+      ['transitionend', 'webkitTransitionEnd'].forEach(function (event) {
+        swiper.$wrapperEl[0].removeEventListener(event, swiper.autoplay.onTransitionEnd);
+      });
+      swiper.autoplay.paused = false;
+
+      if (!swiper.autoplay.running) {
+        swiper.autoplay.stop();
+      } else {
+        swiper.autoplay.run();
+      }
+    },
+    onMouseEnter: function onMouseEnter() {
+      var swiper = this;
+
+      if (swiper.params.autoplay.disableOnInteraction) {
+        swiper.autoplay.stop();
+      } else {
+        swiper.autoplay.pause();
+      }
+
+      ['transitionend', 'webkitTransitionEnd'].forEach(function (event) {
+        swiper.$wrapperEl[0].removeEventListener(event, swiper.autoplay.onTransitionEnd);
+      });
+    },
+    onMouseLeave: function onMouseLeave() {
+      var swiper = this;
+
+      if (swiper.params.autoplay.disableOnInteraction) {
+        return;
+      }
+
+      swiper.autoplay.paused = false;
+      swiper.autoplay.run();
+    },
+    attachMouseEvents: function attachMouseEvents() {
+      var swiper = this;
+
+      if (swiper.params.autoplay.pauseOnMouseEnter) {
+        swiper.$el.on('mouseenter', swiper.autoplay.onMouseEnter);
+        swiper.$el.on('mouseleave', swiper.autoplay.onMouseLeave);
+      }
+    },
+    detachMouseEvents: function detachMouseEvents() {
+      var swiper = this;
+      swiper.$el.off('mouseenter', swiper.autoplay.onMouseEnter);
+      swiper.$el.off('mouseleave', swiper.autoplay.onMouseLeave);
+    }
+  };
+  var Autoplay$1 = {
+    name: 'autoplay',
+    params: {
+      autoplay: {
+        enabled: false,
+        delay: 3000,
+        waitForTransition: true,
+        disableOnInteraction: true,
+        stopOnLastSlide: false,
+        reverseDirection: false,
+        pauseOnMouseEnter: false
+      }
+    },
+    create: function create() {
+      var swiper = this;
+      bindModuleMethods(swiper, {
+        autoplay: _extends$5({}, Autoplay, {
+          running: false,
+          paused: false
+        })
+      });
+    },
+    on: {
+      init: function init(swiper) {
+        if (swiper.params.autoplay.enabled) {
+          swiper.autoplay.start();
+          var document = getDocument$1();
+          document.addEventListener('visibilitychange', swiper.autoplay.onVisibilityChange);
+          swiper.autoplay.attachMouseEvents();
+        }
+      },
+      beforeTransitionStart: function beforeTransitionStart(swiper, speed, internal) {
+        if (swiper.autoplay.running) {
+          if (internal || !swiper.params.autoplay.disableOnInteraction) {
+            swiper.autoplay.pause(speed);
+          } else {
+            swiper.autoplay.stop();
+          }
+        }
+      },
+      sliderFirstMove: function sliderFirstMove(swiper) {
+        if (swiper.autoplay.running) {
+          if (swiper.params.autoplay.disableOnInteraction) {
+            swiper.autoplay.stop();
+          } else {
+            swiper.autoplay.pause();
+          }
+        }
+      },
+      touchEnd: function touchEnd(swiper) {
+        if (swiper.params.cssMode && swiper.autoplay.paused && !swiper.params.autoplay.disableOnInteraction) {
+          swiper.autoplay.run();
+        }
+      },
+      destroy: function destroy(swiper) {
+        swiper.autoplay.detachMouseEvents();
+
+        if (swiper.autoplay.running) {
+          swiper.autoplay.stop();
+        }
+
+        var document = getDocument$1();
+        document.removeEventListener('visibilitychange', swiper.autoplay.onVisibilityChange);
+      }
+    }
+  };
+
   function _extends$4() { _extends$4 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
   var Fade = {
     setTranslate: function setTranslate() {
@@ -75312,7 +75540,7 @@ summary tabindex target title type usemap value width wmode wrap`;
   };
 
   const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-swiper'].props, isEditingProp);
-  SwiperCore.use([Pagination$1, Navigation$1]);
+  SwiperCore.use([Pagination$1, Navigation$1, Autoplay$1]);
   // array that contains style props
   var script$1 = vue.defineComponent({
       name: 'uni-swiper',
@@ -75327,32 +75555,18 @@ summary tabindex target title type usemap value width wmode wrap`;
               ]
           }
       },
-      components: {},
+      components: {
+          Swiper,
+          SwiperSlide
+      },
       setup(props) {
           // 重用并且简化
           // 抽离并且获得 styleProps
           const styleProps = useStylePick(props);
           const handleClick = useComponentClick(props);
-          const swiperOptions = vue.ref({
-              navigation: true,
-              pagination: {
-                  el: '.swiper-pagination',
-                  clickable: true
-              },
-              autoplay: {
-                  delay: 5000
-              },
-              effect: 'fade'
-          });
-          const direction = 'horizontal';
-          const effect = 'fade';
           return {
               styleProps,
-              handleClick,
-              swiperOptions,
-              direction,
-              modules: [Navigation$1],
-              effect
+              handleClick
           };
       }
   });
@@ -75368,10 +75582,13 @@ summary tabindex target title type usemap value width wmode wrap`;
       class: "uni-swiper-component"
     }, [
       vue.createVNode(_component_swiper, {
-        class: "swiper-component",
-        modules: _ctx.modules,
-        effect: _ctx.effect,
-        direction: _ctx.direction
+        class: "swiper-warp",
+        autoplay: {
+          "delay": 2000,
+          "disableOnInteraction": false
+        },
+        direction: 'horizontal',
+        pagination: { "clickable": true }
       }, {
         default: vue.withCtx(() => [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.slides, (slide, index) => {
@@ -75390,7 +75607,7 @@ summary tabindex target title type usemap value width wmode wrap`;
           }), 128 /* KEYED_FRAGMENT */))
         ]),
         _: 1 /* STABLE */
-      }, 8 /* PROPS */, ["modules", "effect", "direction"])
+      })
     ], 4 /* STYLE */))
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unika-components",
-  "version": "1.0.69",
+  "version": "1.0.71",
   "private": false,
   "main": "dist/unika-components.umd.js",
   "module": "dist/unika-components.esm.js",