unika-components 1.0.219 → 1.0.221

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

@@ -6,7 +6,7 @@ declare const _default: import("vue").DefineComponent<{
     handleClick: () => void;
     labelSize: import("vue").ComputedRef<"0.8rem" | "1rem" | ".6rem">;
     countdownSize: import("vue").ComputedRef<"1rem" | "1.5rem" | "2.25rem">;
-    computedLabels: import("vue").Ref<{
+    labels: import("vue").Ref<{
         days: string;
         hours: string;
         minutes: string;

package/dist/unika-components.css

@@ -14,6 +14,27 @@ 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);
+  }
 
  .slide-guide {
     position: absolute;
@@ -88,27 +109,6 @@ body, html {
     }
 }
 
-  .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 {
 
@@ -143,11 +143,6 @@ body, html {
   color: #333;
 }
 
-.effect {
-  width: 100%;
-  height: 100%;
-}
-
 .ant-input-number {
   box-sizing: border-box;
   margin: 0;
@@ -183,6 +178,18 @@ body, html {
   vertical-align: top;
 }
 
+.effect {
+  width: 100%;
+  height: 100%;
+}
+
+.uni-svg-component {
+  display: inline-block;
+}
+
+  .uni-build-up-component {
+  }
+
 .swiper-warp {
   width: 100%;
   height: 100%;
@@ -196,13 +203,6 @@ body, html {
   max-width: 100%;
   max-height: 100%;
 }
-
-  .uni-build-up-component {
-  }
-
-.uni-svg-component {
-  display: inline-block;
-}
 /**
  * Swiper 6.8.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -751,6 +751,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-box {
   position: relative;
   width: 325px !important;
@@ -860,6 +1047,8 @@ button.swiper-pagination-bullet {
   position: relative;
   width: 20px;
   height: 20px;
+  left: 1px;
+  top: 1px;
   margin: 0px 0px;
   border: 2px solid var(--after-haert-color);
   border-radius: 50%;
@@ -1008,190 +1197,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

@@ -22057,36 +22057,37 @@ var script$c = {
     const interval = ref(null);
     const diff = ref(0);
     const show = ref(false);
-    const timeData = ref([{
-      current: 0,
-      previous: 0,
-      label: labels.value.days,
-      elementId: 'flip-card-days-' + uuid,
-      show: showDays.value
-    },
-    {
-      current: 0,
-      previous: 0,
-      label: labels.value.hours,
-      elementId: 'flip-card-hours-' + uuid,
-      show: showHours.value
-    },
-    {
-      current: 0,
-      previous: 0,
-      label: labels.value.minutes,
-      elementId: 'flip-card-minutes-' + uuid,
-      show: showMinutes.value
-    },
-    {
-      current: 0,
-      previous: 0,
-      label: labels.value.seconds,
-      elementId: 'flip-card-seconds-' + uuid,
-      show: showSeconds.value
-    }
-    ]);
-
+    const timeData = ref([]);
+    const updateLabels = () => {
+      timeData.value = [{
+        current: 0,
+        previous: 0,
+        label: labels.value.days,
+        elementId: 'flip-card-days-' + uuid,
+        show: showDays.value
+      },
+      {
+        current: 0,
+        previous: 0,
+        label: labels.value.hours,
+        elementId: 'flip-card-hours-' + uuid,
+        show: showHours.value
+      },
+      {
+        current: 0,
+        previous: 0,
+        label: labels.value.minutes,
+        elementId: 'flip-card-minutes-' + uuid,
+        show: showMinutes.value
+      },
+      {
+        current: 0,
+        previous: 0,
+        label: labels.value.seconds,
+        elementId: 'flip-card-seconds-' + uuid,
+        show: showSeconds.value
+      }
+      ];};
     const seconds = computed(() => {
       return Math.trunc(diff.value) % 60
     });
@@ -22184,6 +22185,10 @@ var script$c = {
         updateAllCards();
       }
     });
+    updateLabels();
+    watch(() => labels, () => {
+      updateLabels();
+    }, { deep: true });
 
     watch(diff, (newVal) => {
       if (newVal === 0) {
@@ -22377,15 +22382,13 @@ var script$b = defineComponent({
         // 监听 props.language 的变化
         watch(() => props.language, (newLanguage) => {
             labels.value = getLabels(newLanguage);
-            console.log('----------------');
-            console.log(labels.value);
         });
         return {
             styleProps,
             handleClick,
             labelSize,
             countdownSize,
-            computedLabels: labels
+            labels
         };
     }
 });
@@ -22406,7 +22409,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
       secondFlipBackgroundColor: _ctx.mainFlipBackgroundColor,
       labelColor: _ctx.labelColor,
       showLabels: _ctx.showLabels,
-      labels: _ctx.computedLabels,
+      labels: _ctx.labels,
       language: _ctx.language,
       countdownSize: _ctx.countdownSize,
       flipAnimation: _ctx.flipAnimation,

package/dist/unika-components.umd.js

@@ -22064,36 +22064,37 @@
       const interval = vue.ref(null);
       const diff = vue.ref(0);
       const show = vue.ref(false);
-      const timeData = vue.ref([{
-        current: 0,
-        previous: 0,
-        label: labels.value.days,
-        elementId: 'flip-card-days-' + uuid,
-        show: showDays.value
-      },
-      {
-        current: 0,
-        previous: 0,
-        label: labels.value.hours,
-        elementId: 'flip-card-hours-' + uuid,
-        show: showHours.value
-      },
-      {
-        current: 0,
-        previous: 0,
-        label: labels.value.minutes,
-        elementId: 'flip-card-minutes-' + uuid,
-        show: showMinutes.value
-      },
-      {
-        current: 0,
-        previous: 0,
-        label: labels.value.seconds,
-        elementId: 'flip-card-seconds-' + uuid,
-        show: showSeconds.value
-      }
-      ]);
-
+      const timeData = vue.ref([]);
+      const updateLabels = () => {
+        timeData.value = [{
+          current: 0,
+          previous: 0,
+          label: labels.value.days,
+          elementId: 'flip-card-days-' + uuid,
+          show: showDays.value
+        },
+        {
+          current: 0,
+          previous: 0,
+          label: labels.value.hours,
+          elementId: 'flip-card-hours-' + uuid,
+          show: showHours.value
+        },
+        {
+          current: 0,
+          previous: 0,
+          label: labels.value.minutes,
+          elementId: 'flip-card-minutes-' + uuid,
+          show: showMinutes.value
+        },
+        {
+          current: 0,
+          previous: 0,
+          label: labels.value.seconds,
+          elementId: 'flip-card-seconds-' + uuid,
+          show: showSeconds.value
+        }
+        ];};
       const seconds = vue.computed(() => {
         return Math.trunc(diff.value) % 60
       });
@@ -22191,6 +22192,10 @@
           updateAllCards();
         }
       });
+      updateLabels();
+      vue.watch(() => labels, () => {
+        updateLabels();
+      }, { deep: true });
 
       vue.watch(diff, (newVal) => {
         if (newVal === 0) {
@@ -22384,15 +22389,13 @@
           // 监听 props.language 的变化
           vue.watch(() => props.language, (newLanguage) => {
               labels.value = getLabels(newLanguage);
-              console.log('----------------');
-              console.log(labels.value);
           });
           return {
               styleProps,
               handleClick,
               labelSize,
               countdownSize,
-              computedLabels: labels
+              labels
           };
       }
   });
@@ -22413,7 +22416,7 @@
         secondFlipBackgroundColor: _ctx.mainFlipBackgroundColor,
         labelColor: _ctx.labelColor,
         showLabels: _ctx.showLabels,
-        labels: _ctx.computedLabels,
+        labels: _ctx.labels,
         language: _ctx.language,
         countdownSize: _ctx.countdownSize,
         flipAnimation: _ctx.flipAnimation,

package/package.json

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