unika-components 1.0.250 → 1.0.252

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

@@ -4,24 +4,25 @@ import 'swiper/swiper-bundle.css';
 declare const _default: import("vue").DefineComponent<{
     work: {
         type: PropType<WorkData>;
-        required: true;
+        require: boolean;
     };
     components: {
         type: PropType<ComponentData[]>;
     };
 }, {
     componentRefs: import("vue").Ref<Map<any, any> & Omit<Map<any, any>, keyof Map<any, any>>>;
-    setComponentRef: (el: HTMLElement | null) => void;
+    setComponentRef: (el: any) => void;
     onSlideChange: (swiper: any) => void;
     onSwiper: (swiper: any) => void;
     modules: import("swiper/types").SwiperComponent[];
     direction: string;
     upArrow: import("vue").Ref<boolean>;
+    slideChangeTransitionEnd: (e: any) => void;
     slideClasses: (index: number) => string[];
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     work: {
         type: PropType<WorkData>;
-        required: true;
+        require: boolean;
     };
     components: {
         type: PropType<ComponentData[]>;

package/dist/unika-components.css

@@ -1,4 +1,84 @@
 
+ .slide-guide {
+    position: absolute;
+    bottom: 90px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.slide-guide img {
+    animation: flowing 2s ease-in-out infinite;
+    width: 33px;
+    vertical-align: middle;
+    border-style: none;
+}
+body, html {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    margin: 0px;
+}
+.swiper-container {
+    width: 100%;
+    height: 100%;
+}
+.swiper-slide {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.up-arrow {
+    width: 2rem;
+    height: 2rem;
+    position: fixed;
+    bottom: 2rem;
+    left: 50%;
+    transform: translate3d(-50%, 0, 0);
+    z-index: 999;
+    background: none;
+    border: none;
+    padding: 0;
+    animation: upArrowAni 2s infinite linear;
+}
+.up-arrow img {
+  width: 2rem;
+  height: 2rem;
+  text-align: center;
+  line-height: 2rem;
+  color: #fff;
+  font-size: 1.5rem;
+}
+@keyframes upArrowAni {
+    0% {
+        opacity: 0;
+        transform: translate3d(-50%, 30%, 0);
+    }
+
+    30% {
+        opacity: 1;
+        transform: translate3d(-50%, -20%, 0);
+    }
+
+    60% {
+        opacity: 0;
+        transform: translate3d(-50%, -35%, 0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translate3d(-50%, -50%, 0);
+    }
+}
+
+.uni-image-component {
+  max-width: 100%;
+}
+.uni-image-mask-wrapper {
+  display: inline-block;
+}
+
 h2.uni-text-component, p.uni-text-component {
   margin-bottom: 0;
 }
@@ -10,25 +90,6 @@ button.uni-text-component {
   box-sizing: border-box;
   white-space: pre-wrap;
 }
-
-.uni-image-component {
-  max-width: 100%;
-}
-.uni-image-mask-wrapper {
-  display: inline-block;
-}
-
-
-.uni-calendar-component {
-
-}
-.slot-number {
-  position: absolute;
-  bottom: 2px;
-  left: 7px;
-  font-size: 12px;
-  color: #666
-}
 
   .uni-video-component {
     position: relative;
@@ -51,6 +112,11 @@ button.uni-text-component {
     background: rgba(0, 0, 0, 0.8);
   }
 
+.uni-lotties-component {
+  width: 100%;
+  height: 100%;
+}
+
 .like-button {
   display: flex;
   flex-direction: column;
@@ -72,76 +138,18 @@ button.uni-text-component {
   font-size: 16px;
   color: #333;
 }
-
-.slide-guide {
-  position: absolute;
-  bottom: 90px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-.slide-guide img {
-  animation: flowing 2s ease-in-out infinite;
-  width: 33px;
-  vertical-align: middle;
-  border-style: none;
-}
-body, html {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  margin: 0px;
-}
-.swiper-container {
-  width: 100%;
-  height: 100%;
-}
-.swiper-slide {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-.up-arrow {
-  width: 2rem;
-  height: 2rem;
-  position: fixed;
-  bottom: 2rem;
-  left: 50%;
-  transform: translate3d(-50%, 0, 0);
-  z-index: 999;
-  background: none;
-  border: none;
-  padding: 0;
-  animation: upArrowAni 2s infinite linear;
-}
-.up-arrow img {
-  width: 2rem;
-  height: 2rem;
-  text-align: center;
-  line-height: 2rem;
-  color: #fff;
-  font-size: 1.5rem;
-}
-@keyframes upArrowAni {
-  0% {
-    opacity: 0;
-    transform: translate3d(-50%, 30%, 0);
-  }
-  30% {
-    opacity: 1;
-    transform: translate3d(-50%, -20%, 0);
-  }
-  60% {
-    opacity: 0;
-    transform: translate3d(-50%, -35%, 0);
-  }
-  100% {
-    opacity: 0;
-    transform: translate3d(-50%, -50%, 0);
-  }
-}
+
+
+.uni-calendar-component {
+
+}
+.slot-number {
+  position: absolute;
+  bottom: 2px;
+  left: 7px;
+  font-size: 12px;
+  color: #666
+}
 
 .ant-input-number {
   box-sizing: border-box;
@@ -177,10 +185,6 @@ body, html {
   margin-bottom: 0px;
   vertical-align: top;
 }
-
-.uni-svg-component {
-  display: inline-block;
-}
 
 .swiper-warp {
   width: 100%;
@@ -196,13 +200,12 @@ body, html {
   max-height: 100%;
 }
 
-.uni-lotties-component {
-  width: 100%;
-  height: 100%;
-}
-
   .uni-build-up-component {
   }
+
+.uni-svg-component {
+  display: inline-block;
+}
 
 .effect {
   width: 100%;

package/dist/unika-components.esm.js

@@ -12995,30 +12995,138 @@ var SwiperSlide = {
   }
 };
 
+//隐藏元素
+const swiperAnimateCache = () => {
+    const allBoxes = window.document.documentElement.querySelectorAll(".animation");
+    for (let i = 0; i < allBoxes.length; i++) {
+        allBoxes[i].attributes["style"]
+            ? allBoxes[i].setAttribute("swiper-animate-style-cache", allBoxes[i].attributes["style"].value)
+            : allBoxes[i].setAttribute("swiper-animate-style-cache", " ");
+        allBoxes[i].style.visibility = "hidden";
+    }
+};
+// 开始动画
+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]);
+function getComputedCSSText(style) {
+    let cssText = '';
+    for (const attr in style) {
+        // #!zh: 驼峰转下划线
+        cssText += `${attr.replace(/[A-Z]+/g, m => `-${m.toLowerCase()}`)}:${style[attr]};`;
+    }
+    return cssText;
+}
 var script$h = defineComponent({
-    name: 'SwiperPage',
+    name: 'swiper-page',
     props: {
         work: {
             type: Object,
-            required: true
+            require: true
         },
         components: {
-            type: Array
-        }
+            type: Array,
+        },
     },
     components: {
         Swiper,
         SwiperSlide
     },
     setup(props) {
+        // 重用并且简化
+        // 抽离并且获得 styleProps
         const componentRefs = ref(new Map());
-        const upArrow = ref(true);
         const setComponentRef = (el) => {
             if (el) {
                 componentRefs.value.set(el.id, el);
             }
         };
+        const upArrow = ref(true);
+        const runAnimations = (currentIndex) => {
+            const pages = cloneDeep$1(props.work && props.work.pages);
+            pages[currentIndex].components && pages[currentIndex].components.forEach((component) => {
+                const animationQueue = component.animations || [];
+                const len = animationQueue.length;
+                if (len === 0)
+                    return;
+                let animIdx = 0;
+                const oldStyle = { ...component.props };
+                oldStyle.position = 'absolute'; // 添加绝对布局
+                const runAnimation = () => {
+                    if (animIdx < len) {
+                        const animation = animationQueue[animIdx];
+                        const animationStyle = {
+                            animationName: animation.type,
+                            animationDuration: `${animation.duration}s`,
+                            animationIterationCount: animation.infinite ? 'infinite' : animation.interationCount,
+                            animationDelay: `${animation.delay}s`,
+                            animationFillMode: 'both',
+                            position: 'absolute' // 确保动画期间元素使用绝对布局
+                        };
+                        const element = componentRefs.value.get('component-' + component.id);
+                        if (element) {
+                            const innerElement = element.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);
+                        if (element) {
+                            const innerElement = element.querySelector('.inner-component');
+                            if (innerElement) {
+                                innerElement.style.cssText = getComputedCSSText(oldStyle);
+                            }
+                        }
+                    }
+                };
+                runAnimation();
+                const element = componentRefs.value.get('component-' + component.id);
+                if (element) {
+                    const innerElement = element.querySelector('.inner-component');
+                    if (innerElement) {
+                        innerElement.addEventListener('animationend', runAnimation, false);
+                        innerElement.addEventListener('webkitAnimationEnd', runAnimation, false);
+                    }
+                }
+            });
+        };
         const reloadAnimation = (componentId) => {
             const component = componentRefs.value.get(`component-${componentId}`);
             if (component) {
@@ -13037,24 +13145,33 @@ var script$h = defineComponent({
         };
         const onSlideChange = (swiper) => {
             const currentIndex = swiper.activeIndex;
-            const currentPage = props.work.pages[currentIndex];
-            currentPage.components.forEach((component) => {
+            console.log('Slide changed to:', currentIndex); // 添加调试信息
+            runAnimations(currentIndex);
+            if (currentIndex === swiper.slides.length - 1) {
+                upArrow.value = false;
+            }
+            else {
+                upArrow.value = true;
+            }
+            swiperAnimate(swiper);
+            const currentPage = props.work?.pages[currentIndex];
+            currentPage?.components.forEach((component) => {
                 if (component.name === 'uni-lotties') {
                     reloadAnimation(component.id);
                 }
             });
-            upArrow.value = currentIndex !== swiper.slides.length - 1;
+        };
+        const slideChangeTransitionEnd = (e) => {
+            swiperAnimate(e);
         };
         const onSwiper = (swiper) => {
+            swiperAnimateCache();
+            swiperAnimate(swiper);
             const currentIndex = swiper.activeIndex;
-            const currentPage = props.work.pages[currentIndex];
-            currentPage.components.forEach((component) => {
-                if (component.name === 'uni-lotties') {
-                    reloadAnimation(component.id);
-                }
-            });
+            runAnimations(currentIndex);
         };
         const direction = 'vertical';
+        // const effect = 'fade'
         const slideClasses = (index) => {
             return ['swiper-slide', `slide-${index}`];
         };
@@ -13065,7 +13182,9 @@ var script$h = defineComponent({
             onSwiper,
             modules: [EffectFade],
             direction,
+            // effect,
             upArrow,
+            slideChangeTransitionEnd,
             slideClasses
         };
     }
@@ -13117,8 +13236,8 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
                     id: `component-${item.id}`,
                     style: {"width":"100%","height":"100%"}
                   }, [
-                    (item.name !== 'uni-build-up' && !item.isHidden)
-                      ? (openBlock(), createBlock(resolveDynamicComponent(item.name), mergeProps({ key: 0 }, item.props, { onReloadAnimation: _ctx.reloadAnimation }), null, 16 /* FULL_PROPS */, ["onReloadAnimation"]))
+                    (item.name != 'uni-build-up' && !item.isHidden)
+                      ? (openBlock(), createBlock(resolveDynamicComponent(item.name), normalizeProps(mergeProps({ key: 0 }, item.props)), null, 16 /* FULL_PROPS */))
                       : createCommentVNode("v-if", true)
                   ], 8 /* PROPS */, _hoisted_2$3))
                 }), 128 /* KEYED_FRAGMENT */))

package/dist/unika-components.umd.js

@@ -13002,30 +13002,138 @@
     }
   };
 
+  //隐藏元素
+  const swiperAnimateCache = () => {
+      const allBoxes = window.document.documentElement.querySelectorAll(".animation");
+      for (let i = 0; i < allBoxes.length; i++) {
+          allBoxes[i].attributes["style"]
+              ? allBoxes[i].setAttribute("swiper-animate-style-cache", allBoxes[i].attributes["style"].value)
+              : allBoxes[i].setAttribute("swiper-animate-style-cache", " ");
+          allBoxes[i].style.visibility = "hidden";
+      }
+  };
+  // 开始动画
+  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]);
+  function getComputedCSSText(style) {
+      let cssText = '';
+      for (const attr in style) {
+          // #!zh: 驼峰转下划线
+          cssText += `${attr.replace(/[A-Z]+/g, m => `-${m.toLowerCase()}`)}:${style[attr]};`;
+      }
+      return cssText;
+  }
   var script$h = vue.defineComponent({
-      name: 'SwiperPage',
+      name: 'swiper-page',
       props: {
           work: {
               type: Object,
-              required: true
+              require: true
           },
           components: {
-              type: Array
-          }
+              type: Array,
+          },
       },
       components: {
           Swiper,
           SwiperSlide
       },
       setup(props) {
+          // 重用并且简化
+          // 抽离并且获得 styleProps
           const componentRefs = vue.ref(new Map());
-          const upArrow = vue.ref(true);
           const setComponentRef = (el) => {
               if (el) {
                   componentRefs.value.set(el.id, el);
               }
           };
+          const upArrow = vue.ref(true);
+          const runAnimations = (currentIndex) => {
+              const pages = cloneDeep$1(props.work && props.work.pages);
+              pages[currentIndex].components && pages[currentIndex].components.forEach((component) => {
+                  const animationQueue = component.animations || [];
+                  const len = animationQueue.length;
+                  if (len === 0)
+                      return;
+                  let animIdx = 0;
+                  const oldStyle = { ...component.props };
+                  oldStyle.position = 'absolute'; // 添加绝对布局
+                  const runAnimation = () => {
+                      if (animIdx < len) {
+                          const animation = animationQueue[animIdx];
+                          const animationStyle = {
+                              animationName: animation.type,
+                              animationDuration: `${animation.duration}s`,
+                              animationIterationCount: animation.infinite ? 'infinite' : animation.interationCount,
+                              animationDelay: `${animation.delay}s`,
+                              animationFillMode: 'both',
+                              position: 'absolute' // 确保动画期间元素使用绝对布局
+                          };
+                          const element = componentRefs.value.get('component-' + component.id);
+                          if (element) {
+                              const innerElement = element.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);
+                          if (element) {
+                              const innerElement = element.querySelector('.inner-component');
+                              if (innerElement) {
+                                  innerElement.style.cssText = getComputedCSSText(oldStyle);
+                              }
+                          }
+                      }
+                  };
+                  runAnimation();
+                  const element = componentRefs.value.get('component-' + component.id);
+                  if (element) {
+                      const innerElement = element.querySelector('.inner-component');
+                      if (innerElement) {
+                          innerElement.addEventListener('animationend', runAnimation, false);
+                          innerElement.addEventListener('webkitAnimationEnd', runAnimation, false);
+                      }
+                  }
+              });
+          };
           const reloadAnimation = (componentId) => {
               const component = componentRefs.value.get(`component-${componentId}`);
               if (component) {
@@ -13044,24 +13152,33 @@
           };
           const onSlideChange = (swiper) => {
               const currentIndex = swiper.activeIndex;
-              const currentPage = props.work.pages[currentIndex];
-              currentPage.components.forEach((component) => {
+              console.log('Slide changed to:', currentIndex); // 添加调试信息
+              runAnimations(currentIndex);
+              if (currentIndex === swiper.slides.length - 1) {
+                  upArrow.value = false;
+              }
+              else {
+                  upArrow.value = true;
+              }
+              swiperAnimate(swiper);
+              const currentPage = props.work?.pages[currentIndex];
+              currentPage?.components.forEach((component) => {
                   if (component.name === 'uni-lotties') {
                       reloadAnimation(component.id);
                   }
               });
-              upArrow.value = currentIndex !== swiper.slides.length - 1;
+          };
+          const slideChangeTransitionEnd = (e) => {
+              swiperAnimate(e);
           };
           const onSwiper = (swiper) => {
+              swiperAnimateCache();
+              swiperAnimate(swiper);
               const currentIndex = swiper.activeIndex;
-              const currentPage = props.work.pages[currentIndex];
-              currentPage.components.forEach((component) => {
-                  if (component.name === 'uni-lotties') {
-                      reloadAnimation(component.id);
-                  }
-              });
+              runAnimations(currentIndex);
           };
           const direction = 'vertical';
+          // const effect = 'fade'
           const slideClasses = (index) => {
               return ['swiper-slide', `slide-${index}`];
           };
@@ -13072,7 +13189,9 @@
               onSwiper,
               modules: [EffectFade],
               direction,
+              // effect,
               upArrow,
+              slideChangeTransitionEnd,
               slideClasses
           };
       }
@@ -13124,8 +13243,8 @@
                       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.mergeProps({ key: 0 }, item.props, { onReloadAnimation: _ctx.reloadAnimation }), null, 16 /* FULL_PROPS */, ["onReloadAnimation"]))
+                      (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.createCommentVNode("v-if", true)
                     ], 8 /* PROPS */, _hoisted_2$3))
                   }), 128 /* KEYED_FRAGMENT */))

package/package.json

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