unika-components 1.0.266 → 1.0.268

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

@@ -21,6 +21,7 @@ declare const _default: import("vue").DefineComponent<{
     upArrow: import("vue").Ref<boolean>;
     slideChangeTransitionEnd: (e: any) => void;
     slideClasses: (index: number) => string[];
+    filterProps: (props: Record<string, any>, keysToFilter: string[], isFilter: true) => Record<string, any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     work: {
         type: PropType<WorkData>;

package/dist/unika-components.css

@@ -1,36 +1,3 @@
-
-  .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);
-  }
-
-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%;
@@ -38,18 +5,6 @@ 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 {
     position: absolute;
@@ -123,37 +78,44 @@ body, html {
         transform: translate3d(-50%, -50%, 0);
     }
 }
+.static-position .uni-text-component {
+    position: static !important;
+}
+.static-transform .uni-text-component {
+   transform: rotate(0deg) !important;
+}
 
-.like-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-}
-
-.icon-heart {
-  font-size: 24px;
-  color: #e74c3c;
-}
+  .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);
+  }
 
-.liked {
-  color: #f00; /* 更改颜色以示已赞 */
-}
 
-.like-count {
-  margin-top: 4px;
-  font-size: 16px;
-  color: #333;
-}
+.uni-calendar-component {
 
-.effect {
-  width: 100%;
-  height: 100%;
 }
-
-.uni-lotties-component {
-  width: 100%;
-  height: 100%;
+.slot-number {
+  position: absolute;
+  bottom: 2px;
+  left: 7px;
+  font-size: 12px;
+  color: #666
 }
 
 .ant-input-number {
@@ -190,13 +152,50 @@ body, html {
   margin-bottom: 0px;
   vertical-align: top;
 }
+
+.like-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+
+.icon-heart {
+  font-size: 24px;
+  color: #e74c3c;
+}
+
+.liked {
+  color: #f00; /* 更改颜色以示已赞 */
+}
+
+.like-count {
+  margin-top: 4px;
+  font-size: 16px;
+  color: #333;
+}
+
+.uni-lotties-component {
+  width: 100%;
+  height: 100%;
+}
 
-.uni-svg-component {
-  display: inline-block;
+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 {
-  }
+.effect {
+  width: 100%;
+  height: 100%;
+}
 
 .swiper-warp {
   width: 100%;
@@ -211,6 +210,13 @@ 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

package/dist/unika-components.esm.js

@@ -1,4 +1,4 @@
-import { computed, defineComponent, openBlock, createElementBlock, withModifiers, normalizeStyle as normalizeStyle$1, createBlock, resolveDynamicComponent, withCtx, createTextVNode, toDisplayString, createElementVNode, Fragment, renderList, normalizeProps, guardReactiveProps, h as h$2, ref, onUpdated, watch, nextTick as nextTick$1, onMounted, onBeforeUnmount, onBeforeUpdate, resolveComponent, createVNode, normalizeClass, mergeProps, createCommentVNode, renderSlot, pushScopeId, popScopeId, toRefs, onBeforeMount, onUnmounted, withDirectives, vShow, isVNode, Comment, Text, reactive, getCurrentInstance, inject, provide, unref, shallowRef, watchEffect, triggerRef, Transition, resolveDirective, cloneVNode, toRef, Teleport, isRef, toRaw, render as render$n, TransitionGroup } from 'vue';
+import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle as normalizeStyle$1, withCtx, createTextVNode, toDisplayString, createElementBlock, createElementVNode, Fragment, renderList, normalizeProps, guardReactiveProps, h as h$2, ref, onUpdated, watch, nextTick as nextTick$1, onMounted, onBeforeUnmount, onBeforeUpdate, resolveComponent, createVNode, normalizeClass, mergeProps, createCommentVNode, renderSlot, pushScopeId, popScopeId, toRefs, onBeforeMount, onUnmounted, withDirectives, vShow, isVNode, Comment, Text, reactive, getCurrentInstance, inject, provide, unref, shallowRef, watchEffect, triggerRef, Transition, resolveDirective, cloneVNode, toRef, Teleport, isRef, toRaw, render as render$n, TransitionGroup } from 'vue';
 import crypto from 'crypto';
 
 /** Detect free variable `global` from Node.js. */
@@ -5392,18 +5392,16 @@ var script$l = defineComponent({
 });
 
 function render$m(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", {
-    onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
+  return (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+    onClick: withModifiers(_ctx.handleClick, ["prevent"]),
     style: normalizeStyle$1(_ctx.styleProps),
     class: "uni-text-component inner-component"
-  }, [
-    (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), null, {
-      default: withCtx(() => [
-        createTextVNode(toDisplayString(_ctx.text), 1 /* TEXT */)
-      ]),
-      _: 1 /* STABLE */
-    }))
-  ], 4 /* STYLE */))
+  }, {
+    default: withCtx(() => [
+      createTextVNode(toDisplayString(_ctx.text), 1 /* TEXT */)
+    ]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["onClick", "style"]))
 }
 
 script$l.render = render$m;
@@ -13081,6 +13079,22 @@ var script$h = defineComponent({
             }
         };
         const upArrow = ref(true);
+        const filterProps = (props, keysToFilter, isFilter) => {
+            const filteredProps = {};
+            Object.keys(props).forEach((key) => {
+                if (isFilter) {
+                    if (keysToFilter.includes(key)) {
+                        filteredProps[key] = props[key];
+                    }
+                }
+                else {
+                    if (!keysToFilter.includes(key)) {
+                        filteredProps[key] = props[key];
+                    }
+                }
+            });
+            return filteredProps;
+        };
         const runAnimations = (currentIndex) => {
             const pages = cloneDeep$1(props.work && props.work.pages);
             pages[currentIndex].components && pages[currentIndex].components.forEach((component) => {
@@ -13091,7 +13105,6 @@ var script$h = defineComponent({
                 let animIdx = 0;
                 const oldStyle = { ...component.props };
                 oldStyle.position = 'absolute'; // 添加绝对布局
-                oldStyle.transform = 'rotate(0deg)'; // 添加绝对布局
                 const runAnimation = () => {
                     if (animIdx < len) {
                         const animation = animationQueue[animIdx];
@@ -13104,34 +13117,38 @@ var script$h = defineComponent({
                             position: 'absolute', // 确保动画期间元素使用绝对布局
                         };
                         const element = componentRefs.value.get('component-' + component.id);
+                        if (animIdx) {
+                            element.classList.remove('static-transform');
+                        }
                         if (element) {
-                            const innerElement = element.querySelector('.inner-component');
-                            if (innerElement) {
-                                innerElement.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
-                                animIdx++;
-                            }
+                            // const innerElement = element.querySelector('.inner-component');
+                            // if (innerElement) {
+                            // innerElement.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
+                            element.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
+                            animIdx++;
                         }
+                        // }
                     }
                     else {
-                        console.log('aa');
                         const element = componentRefs.value.get('component-' + component.id);
+                        element.classList.add('static-transform');
                         if (element) {
-                            const innerElement = element.querySelector('.inner-component');
-                            if (innerElement) {
-                                innerElement.style.cssText = getComputedCSSText(oldStyle);
-                            }
+                            // const innerElement = element.querySelector('.inner-component');
+                            // if (innerElement) {
+                            element.style.cssText = getComputedCSSText(filterProps(oldStyle, ['position', 'top', 'left', 'width', 'height', 'transform'], true));
                         }
+                        // }
                     }
                 };
                 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 innerElement = element.querySelector('.inner-component');
+                    // if (innerElement) {
+                    element.addEventListener('animationend', runAnimation, false);
+                    element.addEventListener('webkitAnimationEnd', runAnimation, false);
                 }
+                // }
             });
         };
         const callUniLottiesPlay = (currentIndex) => {
@@ -13182,7 +13199,8 @@ var script$h = defineComponent({
             direction,
             upArrow,
             slideChangeTransitionEnd,
-            slideClasses
+            slideClasses,
+            filterProps
         };
     }
 });
@@ -13231,14 +13249,14 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
                     ref: _ctx.setAnimationRef,
                     id: `component-${item.id}`,
                     key: item.id,
-                    style: normalizeStyle$1({ width: '100%', height: '100%', transform: item.props.transform, position: 'absolute', left: '0px',top: '0px' })
+                    class: "static-position",
+                    style: normalizeStyle$1(_ctx.filterProps(item.props, ['position', 'top', 'left', 'width', 'height'], true))
                   }, [
                     (item.name != 'uni-build-up' && !item.isHidden)
                       ? (openBlock(), createBlock(resolveDynamicComponent(item.name), mergeProps({ key: 0 }, item.props, {
                           ref_for: true,
-                          ref: el => _ctx.setComponentRef(el, `component-${item.id}`),
-                          transform: 'rotate(0deg)'
-                        }), null, 16 /* FULL_PROPS */, ["transform"]))
+                          ref: el => _ctx.setComponentRef(el, `component-${item.id}`)
+                        }), null, 16 /* FULL_PROPS */))
                       : createCommentVNode("v-if", true)
                   ], 12 /* STYLE, PROPS */, _hoisted_2$3))
                 }), 128 /* KEYED_FRAGMENT */))

package/dist/unika-components.umd.js

@@ -5399,18 +5399,16 @@
   });
 
   function render$m(_ctx, _cache, $props, $setup, $data, $options) {
-    return (vue.openBlock(), vue.createElementBlock("div", {
-      onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
+    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
+      onClick: vue.withModifiers(_ctx.handleClick, ["prevent"]),
       style: vue.normalizeStyle(_ctx.styleProps),
       class: "uni-text-component inner-component"
-    }, [
-      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), null, {
-        default: vue.withCtx(() => [
-          vue.createTextVNode(vue.toDisplayString(_ctx.text), 1 /* TEXT */)
-        ]),
-        _: 1 /* STABLE */
-      }))
-    ], 4 /* STYLE */))
+    }, {
+      default: vue.withCtx(() => [
+        vue.createTextVNode(vue.toDisplayString(_ctx.text), 1 /* TEXT */)
+      ]),
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["onClick", "style"]))
   }
 
   script$l.render = render$m;
@@ -13088,6 +13086,22 @@
               }
           };
           const upArrow = vue.ref(true);
+          const filterProps = (props, keysToFilter, isFilter) => {
+              const filteredProps = {};
+              Object.keys(props).forEach((key) => {
+                  if (isFilter) {
+                      if (keysToFilter.includes(key)) {
+                          filteredProps[key] = props[key];
+                      }
+                  }
+                  else {
+                      if (!keysToFilter.includes(key)) {
+                          filteredProps[key] = props[key];
+                      }
+                  }
+              });
+              return filteredProps;
+          };
           const runAnimations = (currentIndex) => {
               const pages = cloneDeep$1(props.work && props.work.pages);
               pages[currentIndex].components && pages[currentIndex].components.forEach((component) => {
@@ -13098,7 +13112,6 @@
                   let animIdx = 0;
                   const oldStyle = { ...component.props };
                   oldStyle.position = 'absolute'; // 添加绝对布局
-                  oldStyle.transform = 'rotate(0deg)'; // 添加绝对布局
                   const runAnimation = () => {
                       if (animIdx < len) {
                           const animation = animationQueue[animIdx];
@@ -13111,34 +13124,38 @@
                               position: 'absolute', // 确保动画期间元素使用绝对布局
                           };
                           const element = componentRefs.value.get('component-' + component.id);
+                          if (animIdx) {
+                              element.classList.remove('static-transform');
+                          }
                           if (element) {
-                              const innerElement = element.querySelector('.inner-component');
-                              if (innerElement) {
-                                  innerElement.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
-                                  animIdx++;
-                              }
+                              // const innerElement = element.querySelector('.inner-component');
+                              // if (innerElement) {
+                              // innerElement.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
+                              element.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
+                              animIdx++;
                           }
+                          // }
                       }
                       else {
-                          console.log('aa');
                           const element = componentRefs.value.get('component-' + component.id);
+                          element.classList.add('static-transform');
                           if (element) {
-                              const innerElement = element.querySelector('.inner-component');
-                              if (innerElement) {
-                                  innerElement.style.cssText = getComputedCSSText(oldStyle);
-                              }
+                              // const innerElement = element.querySelector('.inner-component');
+                              // if (innerElement) {
+                              element.style.cssText = getComputedCSSText(filterProps(oldStyle, ['position', 'top', 'left', 'width', 'height', 'transform'], true));
                           }
+                          // }
                       }
                   };
                   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 innerElement = element.querySelector('.inner-component');
+                      // if (innerElement) {
+                      element.addEventListener('animationend', runAnimation, false);
+                      element.addEventListener('webkitAnimationEnd', runAnimation, false);
                   }
+                  // }
               });
           };
           const callUniLottiesPlay = (currentIndex) => {
@@ -13189,7 +13206,8 @@
               direction,
               upArrow,
               slideChangeTransitionEnd,
-              slideClasses
+              slideClasses,
+              filterProps
           };
       }
   });
@@ -13238,14 +13256,14 @@
                       ref: _ctx.setAnimationRef,
                       id: `component-${item.id}`,
                       key: item.id,
-                      style: vue.normalizeStyle({ width: '100%', height: '100%', transform: item.props.transform, position: 'absolute', left: '0px',top: '0px' })
+                      class: "static-position",
+                      style: vue.normalizeStyle(_ctx.filterProps(item.props, ['position', 'top', 'left', 'width', 'height'], true))
                     }, [
                       (item.name != 'uni-build-up' && !item.isHidden)
                         ? (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}`),
-                            transform: 'rotate(0deg)'
-                          }), null, 16 /* FULL_PROPS */, ["transform"]))
+                            ref: el => _ctx.setComponentRef(el, `component-${item.id}`)
+                          }), null, 16 /* FULL_PROPS */))
                         : vue.createCommentVNode("v-if", true)
                     ], 12 /* STYLE, PROPS */, _hoisted_2$3))
                   }), 128 /* KEYED_FRAGMENT */))

package/package.json

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