unika-components 1.0.60 → 1.0.61

package/dist/unika-components.css

@@ -10,6 +10,83 @@ button.uni-text-component {
   box-sizing: border-box;
   white-space: pre-wrap;
 }
+
+.uni-image-component {
+  max-width: 100%;
+}
+
+ .slide-guide {
+    position: absolute;
+    bottom: 90px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.slide-guide img {
+    animation: flowing 2s ease-in-out infinite;
+    width: 33px;
+    vertical-align: middle;
+    border-style: none;
+}
+body, html {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    margin: 0px;
+}
+.swiper-container {
+    width: 100%;
+    height: 100%;
+}
+.swiper-slide {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.up-arrow {
+    width: 2rem;
+    height: 2rem;
+    position: fixed;
+    bottom: 2rem;
+    left: 50%;
+    transform: translate3d(-50%, 0, 0);
+    z-index: 999;
+    background: none;
+    border: none;
+    padding: 0;
+    animation: upArrowAni 2s infinite linear;
+}
+.up-arrow img {
+  width: 2rem;
+  height: 2rem;
+  text-align: center;
+  line-height: 2rem;
+  color: #fff;
+  font-size: 1.5rem;
+}
+@keyframes upArrowAni {
+    0% {
+        opacity: 0;
+        transform: translate3d(-50%, 30%, 0);
+    }
+
+    30% {
+        opacity: 1;
+        transform: translate3d(-50%, -20%, 0);
+    }
+
+    60% {
+        opacity: 0;
+        transform: translate3d(-50%, -35%, 0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translate3d(-50%, -50%, 0);
+    }
+}
 
   .uni-background-component {
     width: 100%;
@@ -46,10 +123,14 @@ button.uni-text-component {
   background-position: center;  
   opacity: 0.1;
 }
-
-.uni-image-component {
-  max-width: 100%;
-}
+
+.slot-number {
+  position: absolute;
+  bottom: 2px;
+  left: 7px;
+  font-size: 12px;
+  color: #666
+}
 
   .uni-video-component {
     position: relative;
@@ -166,79 +247,20 @@ button.uni-text-component {
     -webkit-transform: rotate(360deg);
   }
 }
-
- .slide-guide {
-    position: absolute;
-    bottom: 90px;
-    left: 50%;
-    transform: translateX(-50%);
-}
-.slide-guide img {
-    animation: flowing 2s ease-in-out infinite;
-    width: 33px;
-    vertical-align: middle;
-    border-style: none;
-}
-body, html {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    margin: 0px;
-}
-.swiper-container {
-    width: 100%;
-    height: 100%;
-}
-.swiper-slide {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-.up-arrow {
-    width: 2rem;
-    height: 2rem;
-    position: fixed;
-    bottom: 2rem;
-    left: 50%;
-    transform: translate3d(-50%, 0, 0);
-    z-index: 999;
-    background: none;
-    border: none;
-    padding: 0;
-    animation: upArrowAni 2s infinite linear;
-}
-.up-arrow img {
-  width: 2rem;
-  height: 2rem;
-  text-align: center;
-  line-height: 2rem;
-  color: #fff;
-  font-size: 1.5rem;
-}
-@keyframes upArrowAni {
-    0% {
-        opacity: 0;
-        transform: translate3d(-50%, 30%, 0);
-    }
-
-    30% {
-        opacity: 1;
-        transform: translate3d(-50%, -20%, 0);
-    }
-
-    60% {
-        opacity: 0;
-        transform: translate3d(-50%, -35%, 0);
-    }
-
-    100% {
-        opacity: 0;
-        transform: translate3d(-50%, -50%, 0);
-    }
-}
+
+/*.swiper-container {
+  width: 100%;
+  height: 300px;
+}
+
+.swiper-slide {
+  text-align: center;
+}
+
+.swiper-slide img {
+  max-width: 100%;
+  max-height: 100%;
+}*/
 
 #app1 {
   position: relative;
@@ -284,14 +306,6 @@ body, html {
   color: #333;
 }
 
-.slot-number {
-  position: absolute;
-  bottom: 2px;
-  left: 7px;
-  font-size: 12px;
-  color: #666
-}
-
   .video-player {
     position: relative;
     text-align: center;
@@ -312,20 +326,6 @@ body, html {
   .play-pause-button:hover {
     background: rgba(0, 0, 0, 0.8);
   }
-
-/*.swiper-container {
-  width: 100%;
-  height: 300px;
-}
-
-.swiper-slide {
-  text-align: center;
-}
-
-.swiper-slide img {
-  max-width: 100%;
-  max-height: 100%;
-}*/
 /**
  * Swiper 6.8.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions

package/dist/unika-components.esm.js

@@ -46745,23 +46745,27 @@ var script$1 = defineComponent({
         const handleClick = useComponentClick(props);
         const lottieAnimation = ref(null);
         const { loop, delay, animationLink } = toRefs(props);
-        const loopC = ref(props.loop);
-        const delayC = ref(props.delay);
-        const animationLinkC = ref(props.animationLink);
+        const loopC = ref(false);
+        const delayC = ref(0);
+        const animationLinkC = ref('');
         watch(loop, (newVal) => {
+            animationLinkC.value = '';
             loopC.value = newVal;
+            animationLinkC.value = props.animationLink;
             play();
-            console.log(loopC);
+            console.log(loopC.value);
         });
         watch(delay, (newVal) => {
+            animationLinkC.value = '';
             delayC.value = newVal;
+            animationLinkC.value = props.animationLink;
             play();
-            console.log(delayC);
+            console.log(delayC.value);
         });
         watch(animationLink, (newVal) => {
             animationLinkC.value = newVal;
             play();
-            console.log(animationLinkC);
+            console.log(animationLinkC.value);
         });
         const play = () => {
             if (lottieAnimation.value) {

package/dist/unika-components.umd.js

@@ -46752,23 +46752,27 @@
           const handleClick = useComponentClick(props);
           const lottieAnimation = vue.ref(null);
           const { loop, delay, animationLink } = vue.toRefs(props);
-          const loopC = vue.ref(props.loop);
-          const delayC = vue.ref(props.delay);
-          const animationLinkC = vue.ref(props.animationLink);
+          const loopC = vue.ref(false);
+          const delayC = vue.ref(0);
+          const animationLinkC = vue.ref('');
           vue.watch(loop, (newVal) => {
+              animationLinkC.value = '';
               loopC.value = newVal;
+              animationLinkC.value = props.animationLink;
               play();
-              console.log(loopC);
+              console.log(loopC.value);
           });
           vue.watch(delay, (newVal) => {
+              animationLinkC.value = '';
               delayC.value = newVal;
+              animationLinkC.value = props.animationLink;
               play();
-              console.log(delayC);
+              console.log(delayC.value);
           });
           vue.watch(animationLink, (newVal) => {
               animationLinkC.value = newVal;
               play();
-              console.log(animationLinkC);
+              console.log(animationLinkC.value);
           });
           const play = () => {
               if (lottieAnimation.value) {

package/package.json

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