unika-components 1.0.216 → 1.0.218

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">;
-    labels: import("vue").ComputedRef<{
+    computedLabels: import("vue").Ref<{
         days: string;
         hours: string;
         minutes: string;

package/dist/unika-components.css

@@ -1,4 +1,16 @@
 
+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-image-component {
   max-width: 100%;
 }
@@ -23,18 +35,9 @@
   .play-pause-button:hover {
     background: rgba(0, 0, 0, 0.8);
   }
-
-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-build-up-component {
+  }
 
  .slide-guide {
     position: absolute;
@@ -109,37 +112,11 @@ body, html {
     }
 }
 
-
-.uni-calendar-component {
-
-}
-.slot-number {
-  position: absolute;
-  bottom: 2px;
-  left: 7px;
-  font-size: 12px;
-  color: #666
-}
-
 .effect {
   width: 100%;
   height: 100%;
 }
 
-.swiper-warp {
-  width: 100%;
-  height: 100%;
-}
-
-.swiper-slide-component {
-  text-align: center;
-}
-
-.swiper-slide img {
-  max-width: 100%;
-  max-height: 100%;
-}
-
 .like-button {
   display: flex;
   flex-direction: column;
@@ -162,6 +139,18 @@ body, html {
   color: #333;
 }
 
+
+.uni-calendar-component {
+
+}
+.slot-number {
+  position: absolute;
+  bottom: 2px;
+  left: 7px;
+  font-size: 12px;
+  color: #666
+}
+
 .ant-input-number {
   box-sizing: border-box;
   margin: 0;
@@ -197,8 +186,19 @@ body, html {
   vertical-align: top;
 }
 
-  .uni-build-up-component {
-  }
+.swiper-warp {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide-component {
+  text-align: center;
+}
+
+.swiper-slide img {
+  max-width: 100%;
+  max-height: 100%;
+}
 
 .uni-svg-component {
   display: inline-block;
@@ -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;
@@ -1008,190 +1195,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

@@ -5422,7 +5422,7 @@ function render$l(_ctx, _cache, $props, $setup, $data, $options) {
     src: _ctx.imageSrc,
     style: normalizeStyle$1(_ctx.styleProps),
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
-    class: "uni-image-component",
+    class: "uni-image-component inner-component",
     draggable: false
   }, null, 12 /* STYLE, PROPS */, _hoisted_1$c))
 }
@@ -5456,7 +5456,7 @@ function render$k(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle$1(_ctx.styleProps),
-    class: "uni-shape-component",
+    class: "uni-shape-component inner-component",
     draggable: false
   }, null, 4 /* STYLE */))
 }
@@ -13228,7 +13228,7 @@ function render$h(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle$1(_ctx.styleProps),
-    class: "uni-background-component",
+    class: "uni-background-component inner-component",
     draggable: false
   }, null, 4 /* STYLE */))
 }
@@ -13310,7 +13310,7 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle$1(_ctx.styleProps),
-    class: "uni-video-component"
+    class: "uni-video-component inner-component"
   }, [
     (_ctx.isIFrame)
       ? (openBlock(), createElementBlock("div", {
@@ -16167,7 +16167,7 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle$1({ ..._ctx.styleProps, transform: _ctx.size }),
-    class: "uni-calendar-component"
+    class: "uni-calendar-component inner-component"
   }, [
     createVNode(_component_Calendar, {
       ref: "calendarRef",
@@ -22355,8 +22355,8 @@ var script$b = defineComponent({
                 return "1rem";
             }
         });
-        const labels = computed(() => {
-            if (props.language == 'en') {
+        const getLabels = (language) => {
+            if (language == 'en') {
                 return {
                     days: 'Days',
                     hours: 'Hours',
@@ -22372,13 +22372,18 @@ var script$b = defineComponent({
                     seconds: 'ที่สอง'
                 };
             }
+        };
+        const labels = ref(getLabels(props.language));
+        // 监听 props.language 的变化
+        watch(() => props.language, (newLanguage) => {
+            labels.value = getLabels(newLanguage);
         });
         return {
             styleProps,
             handleClick,
             labelSize,
             countdownSize,
-            labels
+            computedLabels: labels
         };
     }
 });
@@ -22389,7 +22394,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle$1(_ctx.styleProps),
-    class: "uni-countdown-component"
+    class: "uni-countdown-component inner-component"
   }, [
     createVNode(_component_Countdown, {
       deadline: _ctx.deadline,
@@ -22399,7 +22404,7 @@ function render$c(_ctx, _cache, $props, $setup, $data, $options) {
       secondFlipBackgroundColor: _ctx.mainFlipBackgroundColor,
       labelColor: _ctx.labelColor,
       showLabels: _ctx.showLabels,
-      labels: _ctx.labels,
+      labels: _ctx.computedLabels,
       language: _ctx.language,
       countdownSize: _ctx.countdownSize,
       flipAnimation: _ctx.flipAnimation,
@@ -22464,7 +22469,7 @@ function render$b(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle$1(_ctx.styleProps),
-    class: "uni-map-component",
+    class: "uni-map-component inner-component",
     innerHTML: _ctx.iframeHtml
   }, null, 12 /* STYLE, PROPS */, _hoisted_1$5))
 }
@@ -26129,7 +26134,7 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("button", {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle$1(_ctx.styleProps),
-    class: "uni-call-component"
+    class: "uni-call-component inner-component"
   }, [
     createVNode(_component_font_awesome_icon, { icon: ['fas', 'square-phone'] }),
     createTextVNode("   "),
@@ -26215,7 +26220,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
 
   return (openBlock(), createElementBlock("div", {
     style: normalizeStyle$1(_ctx.styleProps),
-    class: "like-button uni-like-component",
+    class: "like-button uni-like-component inner-component",
     onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.toggleLike && _ctx.toggleLike(...args)))
   }, [
     createVNode(_component_font_awesome_icon, {
@@ -26567,7 +26572,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle$1(_ctx.styleProps),
-    class: "uni-effect-component"
+    class: "uni-effect-component inner-component"
   }, [
     createVNode(_component_Particles, {
       id: "tsparticles",
@@ -53752,7 +53757,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     onClick: _cache[5] || (_cache[5] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle$1(_ctx.styleProps),
-    class: "uni-register-form-component"
+    class: "uni-register-form-component inner-component"
   }, [
     _hoisted_1$3,
     createVNode(_component_a_form, {
@@ -75412,7 +75417,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
     loop: _ctx.loopC,
     delay: _ctx.delayC,
     ref: "lottieAnimation",
-    class: "uni-lotties-component"
+    class: "uni-lotties-component inner-component"
   }, null, 8 /* PROPS */, ["onClick", "style", "animationLink", "loop", "delay"]))
 }
 
@@ -75463,7 +75468,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
 
   return (openBlock(), createElementBlock("div", {
     style: normalizeStyle$1(_ctx.styleProps),
-    class: "uni-swiper-component"
+    class: "uni-swiper-component inner-component"
   }, [
     createVNode(_component_swiper, {
       class: "swiper-warp",
@@ -75528,7 +75533,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("button", {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle$1(_ctx.styleProps),
-    class: "uni-button-component"
+    class: "uni-button-component inner-component"
   }, [
     renderSlot(_ctx.$slots, "default", {}, () => [
       createTextVNode(toDisplayString(_ctx.buttonText), 1 /* TEXT */)
@@ -75579,7 +75584,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle$1(_ctx.styleProps),
-    class: "uni-build-up-component"
+    class: "uni-build-up-component inner-component"
   }, null, 4 /* STYLE */))
 }
 
@@ -75692,7 +75697,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle$1(_ctx.styleProps),
-    class: "uni-svg-component",
+    class: "uni-svg-component inner-component",
     innerHTML: _ctx.svgContent
   }, null, 12 /* STYLE, PROPS */, _hoisted_1))
 }

package/dist/unika-components.umd.js

@@ -5429,7 +5429,7 @@
       src: _ctx.imageSrc,
       style: vue.normalizeStyle(_ctx.styleProps),
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
-      class: "uni-image-component",
+      class: "uni-image-component inner-component",
       draggable: false
     }, null, 12 /* STYLE, PROPS */, _hoisted_1$c))
   }
@@ -5463,7 +5463,7 @@
     return (vue.openBlock(), vue.createElementBlock("div", {
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle(_ctx.styleProps),
-      class: "uni-shape-component",
+      class: "uni-shape-component inner-component",
       draggable: false
     }, null, 4 /* STYLE */))
   }
@@ -13235,7 +13235,7 @@
     return (vue.openBlock(), vue.createElementBlock("div", {
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle(_ctx.styleProps),
-      class: "uni-background-component",
+      class: "uni-background-component inner-component",
       draggable: false
     }, null, 4 /* STYLE */))
   }
@@ -13317,7 +13317,7 @@
     return (vue.openBlock(), vue.createElementBlock("div", {
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle(_ctx.styleProps),
-      class: "uni-video-component"
+      class: "uni-video-component inner-component"
     }, [
       (_ctx.isIFrame)
         ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -16174,7 +16174,7 @@
     return (vue.openBlock(), vue.createElementBlock("div", {
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle({ ..._ctx.styleProps, transform: _ctx.size }),
-      class: "uni-calendar-component"
+      class: "uni-calendar-component inner-component"
     }, [
       vue.createVNode(_component_Calendar, {
         ref: "calendarRef",
@@ -22362,8 +22362,8 @@
                   return "1rem";
               }
           });
-          const labels = vue.computed(() => {
-              if (props.language == 'en') {
+          const getLabels = (language) => {
+              if (language == 'en') {
                   return {
                       days: 'Days',
                       hours: 'Hours',
@@ -22379,13 +22379,18 @@
                       seconds: 'ที่สอง'
                   };
               }
+          };
+          const labels = vue.ref(getLabels(props.language));
+          // 监听 props.language 的变化
+          vue.watch(() => props.language, (newLanguage) => {
+              labels.value = getLabels(newLanguage);
           });
           return {
               styleProps,
               handleClick,
               labelSize,
               countdownSize,
-              labels
+              computedLabels: labels
           };
       }
   });
@@ -22396,7 +22401,7 @@
     return (vue.openBlock(), vue.createElementBlock("div", {
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle(_ctx.styleProps),
-      class: "uni-countdown-component"
+      class: "uni-countdown-component inner-component"
     }, [
       vue.createVNode(_component_Countdown, {
         deadline: _ctx.deadline,
@@ -22406,7 +22411,7 @@
         secondFlipBackgroundColor: _ctx.mainFlipBackgroundColor,
         labelColor: _ctx.labelColor,
         showLabels: _ctx.showLabels,
-        labels: _ctx.labels,
+        labels: _ctx.computedLabels,
         language: _ctx.language,
         countdownSize: _ctx.countdownSize,
         flipAnimation: _ctx.flipAnimation,
@@ -22471,7 +22476,7 @@
     return (vue.openBlock(), vue.createElementBlock("div", {
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle(_ctx.styleProps),
-      class: "uni-map-component",
+      class: "uni-map-component inner-component",
       innerHTML: _ctx.iframeHtml
     }, null, 12 /* STYLE, PROPS */, _hoisted_1$5))
   }
@@ -26136,7 +26141,7 @@
     return (vue.openBlock(), vue.createElementBlock("button", {
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle(_ctx.styleProps),
-      class: "uni-call-component"
+      class: "uni-call-component inner-component"
     }, [
       vue.createVNode(_component_font_awesome_icon, { icon: ['fas', 'square-phone'] }),
       vue.createTextVNode("   "),
@@ -26222,7 +26227,7 @@
 
     return (vue.openBlock(), vue.createElementBlock("div", {
       style: vue.normalizeStyle(_ctx.styleProps),
-      class: "like-button uni-like-component",
+      class: "like-button uni-like-component inner-component",
       onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.toggleLike && _ctx.toggleLike(...args)))
     }, [
       vue.createVNode(_component_font_awesome_icon, {
@@ -26574,7 +26579,7 @@
     return (vue.openBlock(), vue.createElementBlock("div", {
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle(_ctx.styleProps),
-      class: "uni-effect-component"
+      class: "uni-effect-component inner-component"
     }, [
       vue.createVNode(_component_Particles, {
         id: "tsparticles",
@@ -53759,7 +53764,7 @@ summary tabindex target title type usemap value width wmode wrap`;
     return (vue.openBlock(), vue.createElementBlock("div", {
       onClick: _cache[5] || (_cache[5] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle(_ctx.styleProps),
-      class: "uni-register-form-component"
+      class: "uni-register-form-component inner-component"
     }, [
       _hoisted_1$3,
       vue.createVNode(_component_a_form, {
@@ -75419,7 +75424,7 @@ summary tabindex target title type usemap value width wmode wrap`;
       loop: _ctx.loopC,
       delay: _ctx.delayC,
       ref: "lottieAnimation",
-      class: "uni-lotties-component"
+      class: "uni-lotties-component inner-component"
     }, null, 8 /* PROPS */, ["onClick", "style", "animationLink", "loop", "delay"]))
   }
 
@@ -75470,7 +75475,7 @@ summary tabindex target title type usemap value width wmode wrap`;
 
     return (vue.openBlock(), vue.createElementBlock("div", {
       style: vue.normalizeStyle(_ctx.styleProps),
-      class: "uni-swiper-component"
+      class: "uni-swiper-component inner-component"
     }, [
       vue.createVNode(_component_swiper, {
         class: "swiper-warp",
@@ -75535,7 +75540,7 @@ summary tabindex target title type usemap value width wmode wrap`;
     return (vue.openBlock(), vue.createElementBlock("button", {
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle(_ctx.styleProps),
-      class: "uni-button-component"
+      class: "uni-button-component inner-component"
     }, [
       vue.renderSlot(_ctx.$slots, "default", {}, () => [
         vue.createTextVNode(vue.toDisplayString(_ctx.buttonText), 1 /* TEXT */)
@@ -75586,7 +75591,7 @@ summary tabindex target title type usemap value width wmode wrap`;
     return (vue.openBlock(), vue.createElementBlock("div", {
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle(_ctx.styleProps),
-      class: "uni-build-up-component"
+      class: "uni-build-up-component inner-component"
     }, null, 4 /* STYLE */))
   }
 
@@ -75699,7 +75704,7 @@ summary tabindex target title type usemap value width wmode wrap`;
     return (vue.openBlock(), vue.createElementBlock("div", {
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle(_ctx.styleProps),
-      class: "uni-svg-component",
+      class: "uni-svg-component inner-component",
       innerHTML: _ctx.svgContent
     }, null, 12 /* STYLE, PROPS */, _hoisted_1))
   }

package/package.json

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