unika-components 1.0.314 → 1.0.315

package/dist/unika-components.css

@@ -1,4 +1,11 @@
 
+.uni-image-component {
+  max-width: 100%;
+}
+.uni-image-mask-wrapper {
+  display: inline-block;
+}
+
 h2.uni-text-component, p.uni-text-component {
   margin-top: 0;
   margin-bottom: 0;
@@ -11,6 +18,39 @@ button.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);
+  }
+
+
+.uni-calendar-component {
+
+}
+.slot-number {
+  position: absolute;
+  bottom: 2px;
+  left: 7px;
+  font-size: 12px;
+  color: #666
+}
 
 .slide-guide {
     position: absolute;
@@ -95,45 +135,32 @@ body, html {
 .edit-wrapper .uni-lotties-component, .edit-wrapper .uni-like-component, .edit-wrapper .uni-background-component, .edit-wrapper .uni-svg-component, .edit-wrapper .uni-register-form-component{
   position: static !important;
 }
-
-.uni-image-component {
-  max-width: 100%;
-}
-.uni-image-mask-wrapper {
-  display: inline-block;
-}
 
-  .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);
-  }
+.like-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
 
+.icon-heart {
+  font-size: 24px;
+  color: #e74c3c;
+}
 
-.uni-calendar-component {
+.liked {
+  color: #f00; /* 更改颜色以示已赞 */
+}
 
+.like-count {
+  margin-top: 4px;
+  font-size: 16px;
+  color: #333;
 }
-.slot-number {
-  position: absolute;
-  bottom: 2px;
-  left: 7px;
-  font-size: 12px;
-  color: #666
+
+.uni-lotties-component {
+  width: 100%;
+  height: 100%;
 }
 
 .ant-input-number {
@@ -176,11 +203,6 @@ body, html {
   height: 100%;
 }
 
-.uni-lotties-component {
-  width: 100%;
-  height: 100%;
-}
-
 .swiper-warp {
   width: 100%;
   height: 100%;
@@ -195,28 +217,6 @@ body, html {
   max-height: 100%;
 }
 
-.like-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-}
-
-.icon-heart {
-  font-size: 24px;
-  color: #e74c3c;
-}
-
-.liked {
-  color: #f00; /* 更改颜色以示已赞 */
-}
-
-.like-count {
-  margin-top: 4px;
-  font-size: 16px;
-  color: #333;
-}
-
   .uni-build-up-component {
   }
 
@@ -771,193 +771,6 @@ 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-box {
   position: relative;
   width: 325px !important;
@@ -1218,3 +1031,190 @@ 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

@@ -13210,43 +13210,6 @@ var SwiperSlide = {
   }
 };
 
-//隐藏元素
-// 开始动画
-const swiperAnimate = (a) => {
-    //每次添加的时候先把样式清除一遍
-    clearSwiperAnimate();
-    const b = a.slides[a.activeIndex].querySelectorAll(".animation");
-    for (let i = 0; i < b.length; i++) {
-        b[i].style.visibility = "visible";
-        const effect = b[i].attributes["swiper-animate-effect"]
-            ? b[i].attributes["swiper-animate-effect"].value
-            : "";
-        b[i].className = b[i].className + " " + effect + " " + "animated";
-        const duration = b[i].attributes["swiper-animate-duration"]
-            ? b[i].attributes["swiper-animate-duration"].value
-            : "";
-        // duration && style
-        const delay = b[i].attributes["swiper-animate-delay"]
-            ? b[i].attributes["swiper-animate-delay"].value
-            : "";
-        const style = b[i].attributes["style"].value + "animation-duration:" + duration + ";-webkit-animation-duration:" + duration + ";" + "animation-delay:" + delay + ";-webkit-animation-delay:" + delay + ";";
-        // delay && (style = style )
-        b[i].setAttribute("style", style);
-    }
-};
-// 清楚样式。 获取 .animation 类名，  注意这个所有的.animation 类名都会被获取，所以可以自己取
-const clearSwiperAnimate = () => {
-    const allBoxes = window.document.documentElement.querySelectorAll(".animation");
-    for (let i = 0; i < allBoxes.length; i++) {
-        allBoxes[i].attributes["swiper-animate-style-cache"] && allBoxes[i].setAttribute("style", allBoxes[i].attributes["swiper-animate-style-cache"].value);
-        allBoxes[i].style.visibility = "hidden";
-        allBoxes[i].className = allBoxes[i].className.replace("animated", " ");
-        const effectValue = allBoxes[i].attributes["swiper-animate-effect"].value;
-        /* eslint-disable-next-line */
-        allBoxes[i].attributes['swiper-animate-effect'] && (allBoxes[i].className = allBoxes[i].className.replace(effectValue, ' '));
-    }
-};
-
 SwiperCore.use([Pagination$1, EffectFade, Controller$1]);
 function getComputedCSSText(style) {
     let cssText = '';
@@ -13274,6 +13237,7 @@ var script$h = defineComponent({
         const componentRefs = ref(new Map());
         const currentPage = ref(0);
         const totalPages = ref(props.work && props.work.pages.length || 1); // 假设总页数为10
+        const slideChangeTriggered = ref(false); // 标志位，防止重复触发
         const setAnimationRef = (el) => {
             if (el) {
                 componentRefs.value.set(el.id, el);
@@ -13368,29 +13332,32 @@ var script$h = defineComponent({
         };
         const onSlideChange = (swiper) => {
             const currentIndex = swiper.activeIndex;
-            currentPage.value = (currentIndex - 1);
-            if (currentPage.value == totalPages.value) {
-                currentPage.value = 0;
-            }
-            console.log('aaaaaaaa');
-            console.log(totalPages.value);
-            console.log(currentIndex);
-            console.log(currentPage.value);
-            sendPageInfo();
-            try {
-                runAnimations(currentIndex);
-                callUniLottiesPlay(currentIndex);
-            }
-            catch (error) {
-                console.error("Error in onSlideChange:", error);
-            }
-            if (currentIndex === swiper.slides.length - 1) {
-                upArrow.value = false;
-            }
-            else {
-                upArrow.value = true;
+            if (!slideChangeTriggered.value) {
+                currentPage.value = (currentIndex - 1);
+                if (currentPage.value == totalPages.value) {
+                    currentPage.value = 0;
+                }
+                console.log('aaaaaaaa');
+                console.log(totalPages.value);
+                console.log(currentIndex);
+                console.log(currentPage.value);
+                sendPageInfo();
+                try {
+                    runAnimations(currentIndex);
+                    callUniLottiesPlay(currentIndex);
+                }
+                catch (error) {
+                    console.error("Error in onSlideChange:", error);
+                }
+                if (currentIndex === swiper.slides.length - 1) {
+                    upArrow.value = false;
+                }
+                else {
+                    upArrow.value = true;
+                }
+                // swiperAnimate(swiper);
             }
-            swiperAnimate(swiper);
+            slideChangeTriggered.value = false; // 重置标志位
         };
         // const slideChangeTransitionEnd = (e: any) => {
         //   swiperAnimate(e);
@@ -13418,7 +13385,10 @@ var script$h = defineComponent({
             console.log(' switch page -----------');
             console.log(index);
             if (controlledSwiper.value) {
-                controlledSwiper.value.slideTo(index, 500);
+                slideChangeTriggered.value = true; // 设置标志位，防止 slideTo 引发的 onSlideChange 触发
+                if (controlledSwiper.value) {
+                    controlledSwiper.value.slideTo(index, 500);
+                }
             }
         };
         // 翻到下一页

package/dist/unika-components.umd.js

@@ -13217,43 +13217,6 @@
     }
   };
 
-  //隐藏元素
-  // 开始动画
-  const swiperAnimate = (a) => {
-      //每次添加的时候先把样式清除一遍
-      clearSwiperAnimate();
-      const b = a.slides[a.activeIndex].querySelectorAll(".animation");
-      for (let i = 0; i < b.length; i++) {
-          b[i].style.visibility = "visible";
-          const effect = b[i].attributes["swiper-animate-effect"]
-              ? b[i].attributes["swiper-animate-effect"].value
-              : "";
-          b[i].className = b[i].className + " " + effect + " " + "animated";
-          const duration = b[i].attributes["swiper-animate-duration"]
-              ? b[i].attributes["swiper-animate-duration"].value
-              : "";
-          // duration && style
-          const delay = b[i].attributes["swiper-animate-delay"]
-              ? b[i].attributes["swiper-animate-delay"].value
-              : "";
-          const style = b[i].attributes["style"].value + "animation-duration:" + duration + ";-webkit-animation-duration:" + duration + ";" + "animation-delay:" + delay + ";-webkit-animation-delay:" + delay + ";";
-          // delay && (style = style )
-          b[i].setAttribute("style", style);
-      }
-  };
-  // 清楚样式。 获取 .animation 类名，  注意这个所有的.animation 类名都会被获取，所以可以自己取
-  const clearSwiperAnimate = () => {
-      const allBoxes = window.document.documentElement.querySelectorAll(".animation");
-      for (let i = 0; i < allBoxes.length; i++) {
-          allBoxes[i].attributes["swiper-animate-style-cache"] && allBoxes[i].setAttribute("style", allBoxes[i].attributes["swiper-animate-style-cache"].value);
-          allBoxes[i].style.visibility = "hidden";
-          allBoxes[i].className = allBoxes[i].className.replace("animated", " ");
-          const effectValue = allBoxes[i].attributes["swiper-animate-effect"].value;
-          /* eslint-disable-next-line */
-          allBoxes[i].attributes['swiper-animate-effect'] && (allBoxes[i].className = allBoxes[i].className.replace(effectValue, ' '));
-      }
-  };
-
   SwiperCore.use([Pagination$1, EffectFade, Controller$1]);
   function getComputedCSSText(style) {
       let cssText = '';
@@ -13281,6 +13244,7 @@
           const componentRefs = vue.ref(new Map());
           const currentPage = vue.ref(0);
           const totalPages = vue.ref(props.work && props.work.pages.length || 1); // 假设总页数为10
+          const slideChangeTriggered = vue.ref(false); // 标志位，防止重复触发
           const setAnimationRef = (el) => {
               if (el) {
                   componentRefs.value.set(el.id, el);
@@ -13375,29 +13339,32 @@
           };
           const onSlideChange = (swiper) => {
               const currentIndex = swiper.activeIndex;
-              currentPage.value = (currentIndex - 1);
-              if (currentPage.value == totalPages.value) {
-                  currentPage.value = 0;
-              }
-              console.log('aaaaaaaa');
-              console.log(totalPages.value);
-              console.log(currentIndex);
-              console.log(currentPage.value);
-              sendPageInfo();
-              try {
-                  runAnimations(currentIndex);
-                  callUniLottiesPlay(currentIndex);
-              }
-              catch (error) {
-                  console.error("Error in onSlideChange:", error);
-              }
-              if (currentIndex === swiper.slides.length - 1) {
-                  upArrow.value = false;
-              }
-              else {
-                  upArrow.value = true;
+              if (!slideChangeTriggered.value) {
+                  currentPage.value = (currentIndex - 1);
+                  if (currentPage.value == totalPages.value) {
+                      currentPage.value = 0;
+                  }
+                  console.log('aaaaaaaa');
+                  console.log(totalPages.value);
+                  console.log(currentIndex);
+                  console.log(currentPage.value);
+                  sendPageInfo();
+                  try {
+                      runAnimations(currentIndex);
+                      callUniLottiesPlay(currentIndex);
+                  }
+                  catch (error) {
+                      console.error("Error in onSlideChange:", error);
+                  }
+                  if (currentIndex === swiper.slides.length - 1) {
+                      upArrow.value = false;
+                  }
+                  else {
+                      upArrow.value = true;
+                  }
+                  // swiperAnimate(swiper);
               }
-              swiperAnimate(swiper);
+              slideChangeTriggered.value = false; // 重置标志位
           };
           // const slideChangeTransitionEnd = (e: any) => {
           //   swiperAnimate(e);
@@ -13425,7 +13392,10 @@
               console.log(' switch page -----------');
               console.log(index);
               if (controlledSwiper.value) {
-                  controlledSwiper.value.slideTo(index, 500);
+                  slideChangeTriggered.value = true; // 设置标志位，防止 slideTo 引发的 onSlideChange 触发
+                  if (controlledSwiper.value) {
+                      controlledSwiper.value.slideTo(index, 500);
+                  }
               }
           };
           // 翻到下一页

package/package.json

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