unika-components 1.0.229 → 1.0.231

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

@@ -21,8 +21,8 @@ declare const _default: import("vue").DefineComponent<{
                 };
                 size: boolean;
                 speed: {
-                    min: number;
-                    max: number;
+                    min: string;
+                    max: string;
                 };
             };
             number: {
@@ -125,7 +125,6 @@ declare const _default: import("vue").DefineComponent<{
             };
         };
     }>;
-    particlesKey: import("vue").Ref<number>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     [x: string]: any;
 }>>, {

package/dist/unika-components.css

@@ -1,19 +1,3 @@
-
-.uni-image-component {
-  max-width: 100%;
-}
-
-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-calendar-component {
@@ -99,6 +83,58 @@ body, html {
         transform: translate3d(-50%, -50%, 0);
     }
 }
+
+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%;
+}
+
+.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;
+}
+
+.swiper-warp {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide-component {
+  text-align: center;
+}
+
+.swiper-slide img {
+  max-width: 100%;
+  max-height: 100%;
+}
 
   .uni-video-component {
     position: relative;
@@ -120,21 +156,16 @@ body, html {
   .play-pause-button:hover {
     background: rgba(0, 0, 0, 0.8);
   }
+
+.uni-svg-component {
+  display: inline-block;
+}
 
-.swiper-warp {
+.effect {
   width: 100%;
   height: 100%;
 }
 
-.swiper-slide-component {
-  text-align: center;
-}
-
-.swiper-slide img {
-  max-width: 100%;
-  max-height: 100%;
-}
-
 .ant-input-number {
   box-sizing: border-box;
   margin: 0;
@@ -170,39 +201,8 @@ body, html {
   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-build-up-component {
   }
-
-.effect {
-  width: 100%;
-  height: 100%;
-}
-
-.uni-svg-component {
-  display: inline-block;
-}
 /**
  * Swiper 6.8.4
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -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;
@@ -1010,190 +1197,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

@@ -26242,12 +26242,34 @@ script$8.install = (app) => {
 
 const defaultProps$6 = transformToComponentProps(componentsDefaultProps['uni-effect'].props, isEditingProp);
 const defaultStyles$5 = without$1(Object.keys(effectDefaultProps), 'actionType', 'url', 'shape', 'number', 'spead');
+// import { loadFull } from 'tsparticles'
+// import type { Engine } from 'tsparticles-engine'
+// array that contains style props
 var script$7 = defineComponent({
     name: 'uni-effect',
     props: {
         ...defaultProps$6,
+        // opacity: {
+        //   type: Number,
+        //   default: 1 // explosions side bottom single falling
+        // },
+        // shape: {
+        //   type: Array<string>,
+        //   default: ['circle','square','triangle','polygon','emoji','image']
+        // },
+        // number: {
+        //   type: Number,
+        //   default: 500
+        // },
+        // spead: {
+        //   type: Number,
+        //   default: 1
+        // }
     },
+    components: {},
     setup(props) {
+        // 重用并且简化
+        // 抽离并且获得 styleProps
         const styleProps = useStylePick(props, defaultStyles$5);
         const handleClick = useComponentClick(props);
         const getOptions = (spead, number, opacity, shape) => {
@@ -26264,7 +26286,7 @@ var script$7 = defineComponent({
                         ]
                     },
                     "move": {
-                        "direction": 'bottom',
+                        "direction": 'botton',
                         "enable": true,
                         "outModes": {
                             "default": "out"
@@ -26541,16 +26563,15 @@ var script$7 = defineComponent({
             };
         };
         const options = ref(getOptions(props.spead, props.number, props.opacity, props.shape));
-        const particlesKey = ref(0);
+        // 监听 props.language 的变化
         watch([() => props.spead, () => props.number, () => props.opacity, () => props.shape], ([newSpeed, newNumber, newOpacity, newShape]) => {
             options.value = getOptions(newSpeed, newNumber, newOpacity, newShape);
-            particlesKey.value += 1; // 更新 key 值，强制重新渲染组件
         });
         return {
             styleProps,
             handleClick,
             options,
-            particlesKey
+            // particlesKey
         };
     }
 });
@@ -26563,12 +26584,12 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
     style: normalizeStyle$1(_ctx.styleProps),
     class: "uni-effect-component inner-component"
   }, [
-    (openBlock(), createBlock(_component_Particles, {
-      key: _ctx.particlesKey,
+    createVNode(_component_Particles, {
+      particlesLoaded: _ctx.particlesLoaded,
       id: "tsparticles",
       options: _ctx.options,
       class: "effect"
-    }, null, 8 /* PROPS */, ["options"]))
+    }, null, 8 /* PROPS */, ["particlesLoaded", "options"])
   ], 4 /* STYLE */))
 }
 

package/dist/unika-components.umd.js

@@ -26249,12 +26249,34 @@
 
   const defaultProps$6 = transformToComponentProps(componentsDefaultProps['uni-effect'].props, isEditingProp);
   const defaultStyles$5 = without$1(Object.keys(effectDefaultProps), 'actionType', 'url', 'shape', 'number', 'spead');
+  // import { loadFull } from 'tsparticles'
+  // import type { Engine } from 'tsparticles-engine'
+  // array that contains style props
   var script$7 = vue.defineComponent({
       name: 'uni-effect',
       props: {
           ...defaultProps$6,
+          // opacity: {
+          //   type: Number,
+          //   default: 1 // explosions side bottom single falling
+          // },
+          // shape: {
+          //   type: Array<string>,
+          //   default: ['circle','square','triangle','polygon','emoji','image']
+          // },
+          // number: {
+          //   type: Number,
+          //   default: 500
+          // },
+          // spead: {
+          //   type: Number,
+          //   default: 1
+          // }
       },
+      components: {},
       setup(props) {
+          // 重用并且简化
+          // 抽离并且获得 styleProps
           const styleProps = useStylePick(props, defaultStyles$5);
           const handleClick = useComponentClick(props);
           const getOptions = (spead, number, opacity, shape) => {
@@ -26271,7 +26293,7 @@
                           ]
                       },
                       "move": {
-                          "direction": 'bottom',
+                          "direction": 'botton',
                           "enable": true,
                           "outModes": {
                               "default": "out"
@@ -26548,16 +26570,15 @@
               };
           };
           const options = vue.ref(getOptions(props.spead, props.number, props.opacity, props.shape));
-          const particlesKey = vue.ref(0);
+          // 监听 props.language 的变化
           vue.watch([() => props.spead, () => props.number, () => props.opacity, () => props.shape], ([newSpeed, newNumber, newOpacity, newShape]) => {
               options.value = getOptions(newSpeed, newNumber, newOpacity, newShape);
-              particlesKey.value += 1; // 更新 key 值，强制重新渲染组件
           });
           return {
               styleProps,
               handleClick,
               options,
-              particlesKey
+              // particlesKey
           };
       }
   });
@@ -26570,12 +26591,12 @@
       style: vue.normalizeStyle(_ctx.styleProps),
       class: "uni-effect-component inner-component"
     }, [
-      (vue.openBlock(), vue.createBlock(_component_Particles, {
-        key: _ctx.particlesKey,
+      vue.createVNode(_component_Particles, {
+        particlesLoaded: _ctx.particlesLoaded,
         id: "tsparticles",
         options: _ctx.options,
         class: "effect"
-      }, null, 8 /* PROPS */, ["options"]))
+      }, null, 8 /* PROPS */, ["particlesLoaded", "options"])
     ], 4 /* STYLE */))
   }
 

package/package.json

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