unika-components 1.0.155 → 1.0.157

package/dist/unika-components.css

@@ -88,6 +88,28 @@ button.uni-text-component {
   white-space: pre-wrap;
 }
 
+.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-video-component {
     position: relative;
     text-align: center;
@@ -121,26 +143,18 @@ button.uni-text-component {
   color: #666
 }
 
-.like-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
-}
-
-.icon-heart {
-  font-size: 24px;
-  color: #e74c3c;
+.swiper-warp {
+  width: 100%;
+  height: 100%;
 }
 
-.liked {
-  color: #f00; /* 更改颜色以示已赞 */
+.swiper-slide-component {
+  text-align: center;
 }
 
-.like-count {
-  margin-top: 4px;
-  font-size: 16px;
-  color: #333;
+.swiper-slide img {
+  max-width: 100%;
+  max-height: 100%;
 }
 
 .effect {
@@ -182,20 +196,6 @@ button.uni-text-component {
   margin-bottom: 0px;
   vertical-align: top;
 }
-
-.swiper-warp {
-  width: 100%;
-  height: 100%;
-}
-
-.swiper-slide-component {
-  text-align: center;
-}
-
-.swiper-slide img {
-  max-width: 100%;
-  max-height: 100%;
-}
 /**
  * Swiper 6.8.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -744,193 +744,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;
@@ -1188,3 +1001,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

@@ -1,4 +1,4 @@
-import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle as normalizeStyle$1, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, normalizeProps, guardReactiveProps, h as h$2, ref, onUpdated, watch, nextTick as nextTick$1, onMounted, onBeforeUnmount, onBeforeUpdate, resolveComponent, createVNode, createCommentVNode, normalizeClass, createElementVNode, 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$l, TransitionGroup, mergeProps } from 'vue';
+import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle as normalizeStyle$1, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, normalizeProps, guardReactiveProps, h as h$2, ref, onUpdated, watch, nextTick as nextTick$1, onMounted, onBeforeUnmount, onBeforeUpdate, resolveComponent, createVNode, normalizeClass, createElementVNode, 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$l, TransitionGroup, mergeProps } from 'vue';
 import crypto from 'crypto';
 
 /** Detect free variable `global` from Node.js. */
@@ -13105,14 +13105,15 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_swiper = resolveComponent("swiper");
 
   return (openBlock(), createElementBlock("div", _hoisted_1$9, [
-    createVNode(_component_swiper, { class: "swiper-container" }, {
+    createVNode(_component_swiper, {
+      class: "swiper-container",
+      modules: _ctx.modules,
+      effect: _ctx.effect,
+      direction: _ctx.direction,
+      onSwiper: _ctx.onSwiper,
+      onSlideChange: _ctx.onSlideChange
+    }, {
       default: withCtx(() => [
-        createCommentVNode("      :modules=\"modules\""),
-        createCommentVNode("      :effect=\"effect\""),
-        createCommentVNode("      :direction=\"direction\""),
-        createCommentVNode("      @swiper=\"onSwiper\""),
-        createCommentVNode("      @slideChange=\"onSlideChange\""),
-        createCommentVNode("    >"),
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.work.pages, (page, index) => {
           return (openBlock(), createBlock(_component_swiper_slide, {
             class: normalizeClass(_ctx.slideClasses(index)),
@@ -13121,15 +13122,17 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
             default: withCtx(() => [
               createElementVNode("div", {
                 class: "final-page",
-                style: normalizeStyle$1({ width: _ctx.work.width, height: _ctx.work.height, ...page.props })
+                style: normalizeStyle$1({ width: _ctx.work.width, height: _ctx.work.height })
               }, [
-                createCommentVNode("          <div v-for=\"item in page.components\" :key=\"item.id\" :id=\"`component-${item.id}`\" :ref=\"setComponentRef\" style=\"width: 100%; height: 100%;\">"),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(page.components, (item) => {
                   return (openBlock(), createElementBlock("div", {
                     key: item.id,
                     id: `component-${item.id}`,
+                    ref_for: true,
+                    ref: _ctx.setComponentRef,
                     style: {"width":"100%","height":"100%"}
                   }, [
+                    createCommentVNode(" <div v-for=\"item in page.components\" :key=\"item.id\" :id=\"`component-${item.id}`\" style=\"width: 100%; height: 100%;\"> "),
                     (openBlock(), createBlock(resolveDynamicComponent(item.name), normalizeProps(guardReactiveProps(item.props)), null, 16 /* FULL_PROPS */))
                   ], 8 /* PROPS */, _hoisted_2$3))
                 }), 128 /* KEYED_FRAGMENT */))
@@ -13140,7 +13143,7 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
         }), 128 /* KEYED_FRAGMENT */))
       ]),
       _: 1 /* STABLE */
-    }),
+    }, 8 /* PROPS */, ["modules", "effect", "direction", "onSwiper", "onSlideChange"]),
     (_ctx.upArrow)
       ? (openBlock(), createElementBlock("button", _hoisted_3$3, [..._hoisted_5$2]))
       : createCommentVNode("v-if", true)

package/dist/unika-components.umd.js

@@ -13112,14 +13112,15 @@
     const _component_swiper = vue.resolveComponent("swiper");
 
     return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
-      vue.createVNode(_component_swiper, { class: "swiper-container" }, {
+      vue.createVNode(_component_swiper, {
+        class: "swiper-container",
+        modules: _ctx.modules,
+        effect: _ctx.effect,
+        direction: _ctx.direction,
+        onSwiper: _ctx.onSwiper,
+        onSlideChange: _ctx.onSlideChange
+      }, {
         default: vue.withCtx(() => [
-          vue.createCommentVNode("      :modules=\"modules\""),
-          vue.createCommentVNode("      :effect=\"effect\""),
-          vue.createCommentVNode("      :direction=\"direction\""),
-          vue.createCommentVNode("      @swiper=\"onSwiper\""),
-          vue.createCommentVNode("      @slideChange=\"onSlideChange\""),
-          vue.createCommentVNode("    >"),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.work.pages, (page, index) => {
             return (vue.openBlock(), vue.createBlock(_component_swiper_slide, {
               class: vue.normalizeClass(_ctx.slideClasses(index)),
@@ -13128,15 +13129,17 @@
               default: vue.withCtx(() => [
                 vue.createElementVNode("div", {
                   class: "final-page",
-                  style: vue.normalizeStyle({ width: _ctx.work.width, height: _ctx.work.height, ...page.props })
+                  style: vue.normalizeStyle({ width: _ctx.work.width, height: _ctx.work.height })
                 }, [
-                  vue.createCommentVNode("          <div v-for=\"item in page.components\" :key=\"item.id\" :id=\"`component-${item.id}`\" :ref=\"setComponentRef\" style=\"width: 100%; height: 100%;\">"),
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(page.components, (item) => {
                     return (vue.openBlock(), vue.createElementBlock("div", {
                       key: item.id,
                       id: `component-${item.id}`,
+                      ref_for: true,
+                      ref: _ctx.setComponentRef,
                       style: {"width":"100%","height":"100%"}
                     }, [
+                      vue.createCommentVNode(" <div v-for=\"item in page.components\" :key=\"item.id\" :id=\"`component-${item.id}`\" style=\"width: 100%; height: 100%;\"> "),
                       (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.normalizeProps(vue.guardReactiveProps(item.props)), null, 16 /* FULL_PROPS */))
                     ], 8 /* PROPS */, _hoisted_2$3))
                   }), 128 /* KEYED_FRAGMENT */))
@@ -13147,7 +13150,7 @@
           }), 128 /* KEYED_FRAGMENT */))
         ]),
         _: 1 /* STABLE */
-      }),
+      }, 8 /* PROPS */, ["modules", "effect", "direction", "onSwiper", "onSlideChange"]),
       (_ctx.upArrow)
         ? (vue.openBlock(), vue.createElementBlock("button", _hoisted_3$3, [..._hoisted_5$2]))
         : vue.createCommentVNode("v-if", true)

package/package.json

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