unika-components 1.0.257 → 1.0.258

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

@@ -10,8 +10,8 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<ComponentData[]>;
     };
 }, {
-    componentRefs: import("vue").Ref<Map<any, any> & Omit<Map<any, any>, keyof Map<any, any>>>;
-    setComponentRef: (el: any) => void;
+    refs: import("vue").Ref<Map<any, any> & Omit<Map<any, any>, keyof Map<any, any>>>;
+    setComponentRef: (el: any, key: string) => void;
     onSlideChange: (swiper: any) => void;
     onSwiper: (swiper: any) => void;
     modules: import("swiper/types").SwiperComponent[];

package/dist/unika-components.css

@@ -17,8 +17,20 @@ button.uni-text-component {
 .uni-image-mask-wrapper {
   display: inline-block;
 }
+
+
+.uni-calendar-component {
+
+}
+.slot-number {
+  position: absolute;
+  bottom: 2px;
+  left: 7px;
+  font-size: 12px;
+  color: #666
+}
 
- .slide-guide {
+.slide-guide {
     position: absolute;
     bottom: 90px;
     left: 50%;
@@ -91,16 +103,9 @@ body, html {
     }
 }
 
-
-.uni-calendar-component {
-
-}
-.slot-number {
-  position: absolute;
-  bottom: 2px;
-  left: 7px;
-  font-size: 12px;
-  color: #666
+.effect {
+  width: 100%;
+  height: 100%;
 }
 
   .uni-video-component {
@@ -124,28 +129,26 @@ body, html {
     background: rgba(0, 0, 0, 0.8);
   }
 
-.uni-lotties-component {
-  width: 100%;
-  height: 100%;
-}
-
-.swiper-warp {
-  width: 100%;
-  height: 100%;
+.like-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
 }
 
-.swiper-slide-component {
-  text-align: center;
+.icon-heart {
+  font-size: 24px;
+  color: #e74c3c;
 }
 
-.swiper-slide img {
-  max-width: 100%;
-  max-height: 100%;
+.liked {
+  color: #f00; /* 更改颜色以示已赞 */
 }
 
-.effect {
-  width: 100%;
-  height: 100%;
+.like-count {
+  margin-top: 4px;
+  font-size: 16px;
+  color: #333;
 }
 
 .ant-input-number {
@@ -183,34 +186,31 @@ body, html {
   vertical-align: top;
 }
 
-  .uni-build-up-component {
-  }
-
-.uni-svg-component {
-  display: inline-block;
-}
-
-.like-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
+.swiper-warp {
+  width: 100%;
+  height: 100%;
 }
 
-.icon-heart {
-  font-size: 24px;
-  color: #e74c3c;
+.swiper-slide-component {
+  text-align: center;
 }
 
-.liked {
-  color: #f00; /* 更改颜色以示已赞 */
+.swiper-slide img {
+  max-width: 100%;
+  max-height: 100%;
 }
 
-.like-count {
-  margin-top: 4px;
-  font-size: 16px;
-  color: #333;
+.uni-lotties-component {
+  width: 100%;
+  height: 100%;
 }
+
+.uni-svg-component {
+  display: inline-block;
+}
+
+  .uni-build-up-component {
+  }
 /**
  * Swiper 6.8.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -759,193 +759,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;
@@ -1205,3 +1018,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

@@ -13045,7 +13045,6 @@ SwiperCore.use([Pagination$1, EffectFade]);
 function getComputedCSSText(style) {
     let cssText = '';
     for (const attr in style) {
-        // #!zh: 驼峰转下划线
         cssText += `${attr.replace(/[A-Z]+/g, m => `-${m.toLowerCase()}`)}:${style[attr]};`;
     }
     return cssText;
@@ -13066,12 +13065,10 @@ var script$h = defineComponent({
         SwiperSlide
     },
     setup(props) {
-        // 重用并且简化
-        // 抽离并且获得 styleProps
-        const componentRefs = ref(new Map());
-        const setComponentRef = (el) => {
+        const refs = ref(new Map());
+        const setComponentRef = (el, key) => {
             if (el) {
-                componentRefs.value.set(el.id, el);
+                refs.value.set(key, el);
             }
         };
         const upArrow = ref(true);
@@ -13096,20 +13093,19 @@ var script$h = defineComponent({
                             animationFillMode: 'both',
                             position: 'absolute' // 确保动画期间元素使用绝对布局
                         };
-                        const element = componentRefs.value.get('component-' + component.id);
+                        const element = refs.value.get('component-' + component.id);
                         if (element) {
-                            const innerElement = element.querySelector('.inner-component');
+                            const innerElement = element.$el.querySelector('.inner-component');
                             if (innerElement) {
-                                // element.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
                                 innerElement.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
                                 animIdx++;
                             }
                         }
                     }
                     else {
-                        const element = componentRefs.value.get('component-' + component.id);
+                        const element = refs.value.get('component-' + component.id);
                         if (element) {
-                            const innerElement = element.querySelector('.inner-component');
+                            const innerElement = element.$el.querySelector('.inner-component');
                             if (innerElement) {
                                 innerElement.style.cssText = getComputedCSSText(oldStyle);
                             }
@@ -13117,9 +13113,9 @@ var script$h = defineComponent({
                     }
                 };
                 runAnimation();
-                const element = componentRefs.value.get('component-' + component.id);
+                const element = refs.value.get('component-' + component.id);
                 if (element) {
-                    const innerElement = element.querySelector('.inner-component');
+                    const innerElement = element.$el.querySelector('.inner-component');
                     if (innerElement) {
                         innerElement.addEventListener('animationend', runAnimation, false);
                         innerElement.addEventListener('webkitAnimationEnd', runAnimation, false);
@@ -13127,25 +13123,21 @@ var script$h = defineComponent({
                 }
             });
         };
-        const restartLottieAnimations = () => {
-            componentRefs.value.forEach((el) => {
-                const lottieComponent = el.querySelector('.uni-lotties-component');
-                console.log(lottieComponent);
-                if (lottieComponent && lottieComponent.__vue__) {
-                    const vueInstance = lottieComponent.__vue__;
-                    console.log('aaaaaa');
-                    console.log(vueInstance);
-                    if (vueInstance.play) {
-                        console.log('bbbbbb');
-                        vueInstance.play();
+        const callUniLottiesPlay = (currentIndex) => {
+            const pageComponents = props.work && props.work.pages[currentIndex].components;
+            pageComponents && pageComponents.forEach(component => {
+                if (component.name === 'uni-lotties') {
+                    const element = refs.value.get('component-' + component.id);
+                    if (element && typeof element.play === 'function') {
+                        element.play();
                     }
                 }
             });
         };
         const onSlideChange = (swiper) => {
             const currentIndex = swiper.activeIndex;
-            console.log('Slide changed to:', currentIndex); // 添加调试信息
             runAnimations(currentIndex);
+            callUniLottiesPlay(currentIndex);
             if (currentIndex === swiper.slides.length - 1) {
                 upArrow.value = false;
             }
@@ -13153,12 +13145,6 @@ var script$h = defineComponent({
                 upArrow.value = true;
             }
             swiperAnimate(swiper);
-            const currentPage = props.work && props.work.pages[currentIndex];
-            currentPage && currentPage.components.forEach((component) => {
-                if (component.name === 'uni-lotties') {
-                    restartLottieAnimations();
-                }
-            });
         };
         const slideChangeTransitionEnd = (e) => {
             swiperAnimate(e);
@@ -13168,26 +13154,19 @@ var script$h = defineComponent({
             swiperAnimate(swiper);
             const currentIndex = swiper.activeIndex;
             runAnimations(currentIndex);
-            const currentPage = props.work && props.work.pages[currentIndex];
-            currentPage && currentPage.components.forEach((component) => {
-                if (component.name === 'uni-lotties') {
-                    restartLottieAnimations();
-                }
-            });
+            callUniLottiesPlay(currentIndex);
         };
         const direction = 'vertical';
-        // const effect = 'fade'
         const slideClasses = (index) => {
             return ['swiper-slide', `slide-${index}`];
         };
         return {
-            componentRefs,
+            refs,
             setComponentRef,
             onSlideChange,
             onSwiper,
             modules: [EffectFade],
             direction,
-            // effect,
             upArrow,
             slideChangeTransitionEnd,
             slideClasses
@@ -13236,13 +13215,14 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
                 (openBlock(true), createElementBlock(Fragment, null, renderList(page.components, (item) => {
                   return (openBlock(), createElementBlock("div", {
                     key: item.id,
-                    ref_for: true,
-                    ref: _ctx.setComponentRef,
                     id: `component-${item.id}`,
                     style: {"width":"100%","height":"100%"}
                   }, [
                     (item.name != 'uni-build-up' && !item.isHidden)
-                      ? (openBlock(), createBlock(resolveDynamicComponent(item.name), normalizeProps(mergeProps({ key: 0 }, item.props)), null, 16 /* FULL_PROPS */))
+                      ? (openBlock(), createBlock(resolveDynamicComponent(item.name), mergeProps({ key: 0 }, item.props, {
+                          ref_for: true,
+                          ref: el => _ctx.setComponentRef(el, `component-${item.id}`)
+                        }), null, 16 /* FULL_PROPS */))
                       : createCommentVNode("v-if", true)
                   ], 8 /* PROPS */, _hoisted_2$3))
                 }), 128 /* KEYED_FRAGMENT */))
@@ -75673,7 +75653,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 var Vue3Lottie = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
 const defaultProps$4 = transformToComponentProps(componentsDefaultProps['uni-lotties'].props, isEditingProp);
-const defaultStyles$3 = without$1(Object.keys(lottiesDefaultProps), 'actionType', 'url', 'animationLink', 'loop', 'delay', 'pauseAnimation');
+const defaultStyles$3 = without$1(Object.keys(lottiesDefaultProps), 'actionType', 'url', 'animationLink', 'loop', 'delay', 'pauseAnimation', 'key');
 var script$5 = defineComponent({
     name: 'uni-lotties',
     props: {

package/dist/unika-components.umd.js

@@ -13052,7 +13052,6 @@
   function getComputedCSSText(style) {
       let cssText = '';
       for (const attr in style) {
-          // #!zh: 驼峰转下划线
           cssText += `${attr.replace(/[A-Z]+/g, m => `-${m.toLowerCase()}`)}:${style[attr]};`;
       }
       return cssText;
@@ -13073,12 +13072,10 @@
           SwiperSlide
       },
       setup(props) {
-          // 重用并且简化
-          // 抽离并且获得 styleProps
-          const componentRefs = vue.ref(new Map());
-          const setComponentRef = (el) => {
+          const refs = vue.ref(new Map());
+          const setComponentRef = (el, key) => {
               if (el) {
-                  componentRefs.value.set(el.id, el);
+                  refs.value.set(key, el);
               }
           };
           const upArrow = vue.ref(true);
@@ -13103,20 +13100,19 @@
                               animationFillMode: 'both',
                               position: 'absolute' // 确保动画期间元素使用绝对布局
                           };
-                          const element = componentRefs.value.get('component-' + component.id);
+                          const element = refs.value.get('component-' + component.id);
                           if (element) {
-                              const innerElement = element.querySelector('.inner-component');
+                              const innerElement = element.$el.querySelector('.inner-component');
                               if (innerElement) {
-                                  // element.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
                                   innerElement.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
                                   animIdx++;
                               }
                           }
                       }
                       else {
-                          const element = componentRefs.value.get('component-' + component.id);
+                          const element = refs.value.get('component-' + component.id);
                           if (element) {
-                              const innerElement = element.querySelector('.inner-component');
+                              const innerElement = element.$el.querySelector('.inner-component');
                               if (innerElement) {
                                   innerElement.style.cssText = getComputedCSSText(oldStyle);
                               }
@@ -13124,9 +13120,9 @@
                       }
                   };
                   runAnimation();
-                  const element = componentRefs.value.get('component-' + component.id);
+                  const element = refs.value.get('component-' + component.id);
                   if (element) {
-                      const innerElement = element.querySelector('.inner-component');
+                      const innerElement = element.$el.querySelector('.inner-component');
                       if (innerElement) {
                           innerElement.addEventListener('animationend', runAnimation, false);
                           innerElement.addEventListener('webkitAnimationEnd', runAnimation, false);
@@ -13134,25 +13130,21 @@
                   }
               });
           };
-          const restartLottieAnimations = () => {
-              componentRefs.value.forEach((el) => {
-                  const lottieComponent = el.querySelector('.uni-lotties-component');
-                  console.log(lottieComponent);
-                  if (lottieComponent && lottieComponent.__vue__) {
-                      const vueInstance = lottieComponent.__vue__;
-                      console.log('aaaaaa');
-                      console.log(vueInstance);
-                      if (vueInstance.play) {
-                          console.log('bbbbbb');
-                          vueInstance.play();
+          const callUniLottiesPlay = (currentIndex) => {
+              const pageComponents = props.work && props.work.pages[currentIndex].components;
+              pageComponents && pageComponents.forEach(component => {
+                  if (component.name === 'uni-lotties') {
+                      const element = refs.value.get('component-' + component.id);
+                      if (element && typeof element.play === 'function') {
+                          element.play();
                       }
                   }
               });
           };
           const onSlideChange = (swiper) => {
               const currentIndex = swiper.activeIndex;
-              console.log('Slide changed to:', currentIndex); // 添加调试信息
               runAnimations(currentIndex);
+              callUniLottiesPlay(currentIndex);
               if (currentIndex === swiper.slides.length - 1) {
                   upArrow.value = false;
               }
@@ -13160,12 +13152,6 @@
                   upArrow.value = true;
               }
               swiperAnimate(swiper);
-              const currentPage = props.work && props.work.pages[currentIndex];
-              currentPage && currentPage.components.forEach((component) => {
-                  if (component.name === 'uni-lotties') {
-                      restartLottieAnimations();
-                  }
-              });
           };
           const slideChangeTransitionEnd = (e) => {
               swiperAnimate(e);
@@ -13175,26 +13161,19 @@
               swiperAnimate(swiper);
               const currentIndex = swiper.activeIndex;
               runAnimations(currentIndex);
-              const currentPage = props.work && props.work.pages[currentIndex];
-              currentPage && currentPage.components.forEach((component) => {
-                  if (component.name === 'uni-lotties') {
-                      restartLottieAnimations();
-                  }
-              });
+              callUniLottiesPlay(currentIndex);
           };
           const direction = 'vertical';
-          // const effect = 'fade'
           const slideClasses = (index) => {
               return ['swiper-slide', `slide-${index}`];
           };
           return {
-              componentRefs,
+              refs,
               setComponentRef,
               onSlideChange,
               onSwiper,
               modules: [EffectFade],
               direction,
-              // effect,
               upArrow,
               slideChangeTransitionEnd,
               slideClasses
@@ -13243,13 +13222,14 @@
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(page.components, (item) => {
                     return (vue.openBlock(), vue.createElementBlock("div", {
                       key: item.id,
-                      ref_for: true,
-                      ref: _ctx.setComponentRef,
                       id: `component-${item.id}`,
                       style: {"width":"100%","height":"100%"}
                     }, [
                       (item.name != 'uni-build-up' && !item.isHidden)
-                        ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.normalizeProps(vue.mergeProps({ key: 0 }, item.props)), null, 16 /* FULL_PROPS */))
+                        ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.mergeProps({ key: 0 }, item.props, {
+                            ref_for: true,
+                            ref: el => _ctx.setComponentRef(el, `component-${item.id}`)
+                          }), null, 16 /* FULL_PROPS */))
                         : vue.createCommentVNode("v-if", true)
                     ], 8 /* PROPS */, _hoisted_2$3))
                   }), 128 /* KEYED_FRAGMENT */))
@@ -75680,7 +75660,7 @@ summary tabindex target title type usemap value width wmode wrap`;
   var Vue3Lottie = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
   const defaultProps$4 = transformToComponentProps(componentsDefaultProps['uni-lotties'].props, isEditingProp);
-  const defaultStyles$3 = without$1(Object.keys(lottiesDefaultProps), 'actionType', 'url', 'animationLink', 'loop', 'delay', 'pauseAnimation');
+  const defaultStyles$3 = without$1(Object.keys(lottiesDefaultProps), 'actionType', 'url', 'animationLink', 'loop', 'delay', 'pauseAnimation', 'key');
   var script$5 = vue.defineComponent({
       name: 'uni-lotties',
       props: {

package/package.json

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