unika-components 1.0.158 → 1.0.160

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -16,7 +16,6 @@ declare const _default: import("vue").DefineComponent<{
16
16
  onSwiper: (swiper: any) => void;
17
17
  modules: import("swiper/types").SwiperComponent[];
18
18
  direction: string;
19
- effect: string;
20
19
  upArrow: import("vue").Ref<boolean>;
21
20
  slideChangeTransitionEnd: (e: any) => void;
22
21
  slideClasses: (index: number) => string[];
@@ -1,4 +1,53 @@
1
1
 
2
+ .uni-image-component {
3
+ max-width: 100%;
4
+ }
5
+
6
+ h2.uni-text-component, p.uni-text-component {
7
+ margin-bottom: 0;
8
+ }
9
+ button.uni-text-component {
10
+ padding: 5px 10px;
11
+ cursor: pointer;
12
+ }
13
+ .uni-text-component {
14
+ box-sizing: border-box;
15
+ white-space: pre-wrap;
16
+ }
17
+
18
+
19
+ .uni-calendar-component {
20
+
21
+ }
22
+ .slot-number {
23
+ position: absolute;
24
+ bottom: 2px;
25
+ left: 7px;
26
+ font-size: 12px;
27
+ color: #666
28
+ }
29
+
30
+ .uni-video-component {
31
+ position: relative;
32
+ text-align: center;
33
+ }
34
+ .play-pause-button {
35
+ position: absolute;
36
+ top: 50%;
37
+ left: 50%;
38
+ transform: translate(-50%, -50%);
39
+ cursor: pointer;
40
+ font-size: 2rem;
41
+ color: #fff;
42
+ background: rgba(0, 0, 0, 0.6);
43
+ border-radius: 50%;
44
+ padding: 10px;
45
+ transition: background 0.3s;
46
+ }
47
+ .play-pause-button:hover {
48
+ background: rgba(0, 0, 0, 0.8);
49
+ }
50
+
2
51
  .slide-guide {
3
52
  position: absolute;
4
53
  bottom: 90px;
@@ -72,43 +121,6 @@ body, html {
72
121
  }
73
122
  }
74
123
 
75
- .uni-video-component {
76
- position: relative;
77
- text-align: center;
78
- }
79
- .play-pause-button {
80
- position: absolute;
81
- top: 50%;
82
- left: 50%;
83
- transform: translate(-50%, -50%);
84
- cursor: pointer;
85
- font-size: 2rem;
86
- color: #fff;
87
- background: rgba(0, 0, 0, 0.6);
88
- border-radius: 50%;
89
- padding: 10px;
90
- transition: background 0.3s;
91
- }
92
- .play-pause-button:hover {
93
- background: rgba(0, 0, 0, 0.8);
94
- }
95
-
96
- h2.uni-text-component, p.uni-text-component {
97
- margin-bottom: 0;
98
- }
99
- button.uni-text-component {
100
- padding: 5px 10px;
101
- cursor: pointer;
102
- }
103
- .uni-text-component {
104
- box-sizing: border-box;
105
- white-space: pre-wrap;
106
- }
107
-
108
- .uni-image-component {
109
- max-width: 100%;
110
- }
111
-
112
124
  .like-button {
113
125
  display: flex;
114
126
  flex-direction: column;
@@ -131,16 +143,18 @@ button.uni-text-component {
131
143
  color: #333;
132
144
  }
133
145
 
146
+ .swiper-warp {
147
+ width: 100%;
148
+ height: 100%;
149
+ }
134
150
 
135
- .uni-calendar-component {
136
-
151
+ .swiper-slide-component {
152
+ text-align: center;
137
153
  }
138
- .slot-number {
139
- position: absolute;
140
- bottom: 2px;
141
- left: 7px;
142
- font-size: 12px;
143
- color: #666
154
+
155
+ .swiper-slide img {
156
+ max-width: 100%;
157
+ max-height: 100%;
144
158
  }
145
159
 
146
160
  .ant-input-number {
@@ -178,20 +192,6 @@ button.uni-text-component {
178
192
  vertical-align: top;
179
193
  }
180
194
 
181
- .swiper-warp {
182
- width: 100%;
183
- height: 100%;
184
- }
185
-
186
- .swiper-slide-component {
187
- text-align: center;
188
- }
189
-
190
- .swiper-slide img {
191
- max-width: 100%;
192
- max-height: 100%;
193
- }
194
-
195
195
  .effect {
196
196
  width: 100%;
197
197
  height: 100%;
@@ -747,193 +747,6 @@ button.swiper-pagination-bullet {
747
747
  backface-visibility: hidden;
748
748
  }
749
749
 
750
-
751
- .no-animation__card {
752
- font-weight: 500;
753
- font-size: var(--countdown-size, 2rem);
754
- line-height: 1.5;
755
- display: block;
756
- color: var(--main-color, #EC685C);
757
- }
758
-
759
- .flip-clock {
760
- text-align: center;
761
- perspective: 600px;
762
- margin: 0 auto;
763
- }
764
-
765
- .flip-clock *,
766
- .flip-clock *:before,
767
- .flip-clock *:after {
768
- box-sizing: border-box;
769
- }
770
-
771
- .flip-clock__piece {
772
- display: inline-block;
773
- margin: 0 0.2vw;
774
- }
775
-
776
- @media (min-width: 1000px) {
777
- .flip-clock__piece {
778
- margin: 0 5px;
779
- }
780
- }
781
-
782
- .flip-clock__slot {
783
- font-size: var(--label-size, 1rem);
784
- line-height: 1.5;
785
- display: block;
786
- color: var(--label-color, #222222);
787
- }
788
-
789
- .flip-card {
790
- display: block;
791
- position: relative;
792
- padding-bottom: 0.72em; /* halfHeight */
793
- font-size: var(--countdown-size, 2.25rem);
794
- line-height: 0.95;
795
- }
796
-
797
- @media (min-width: 1000px) {
798
- .flip-clock__slot {
799
- font-size: 1.2rem;
800
- }
801
-
802
- .flip-card {
803
- font-size: 3rem;
804
- }
805
- }
806
-
807
- .flip-card__top,
808
- .flip-card__bottom,
809
- .flip-card__back-bottom,
810
- .flip-card__back::before,
811
- .flip-card__back::after{
812
- display: block;
813
- height: 0.72em; /* halfHeight */
814
- color: var(--main-color, #EC685C);
815
- background: var(--main-flip-background-color, #222222);
816
- padding: 0.23em 0.15em 0.4em;
817
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
818
- backface-visibility: hidden;
819
- -webkit-backface-visibility: hidden;
820
- transform-style: preserve-3d;
821
- width: 2.1em;
822
- }
823
-
824
- .flip-card__top-4digits,
825
- .flip-card__bottom-4digits,
826
- .flip-card__back-bottom-4digits,
827
- .flip-card__back-4digits::before,
828
- .flip-card__back-4digits::after {
829
- display: block;
830
- height: 0.72em; /* halfHeight */
831
- color: var(--main-color, #EC685C);
832
- background: var(--main-flip-background-color, #222222);
833
- padding: 0.23em 0.15em 0.4em;
834
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
835
- backface-visibility: hidden;
836
- -webkit-backface-visibility: hidden;
837
- transform-style: preserve-3d;
838
- width: 2.65em;
839
- }
840
-
841
- .flip-card__bottom,
842
- .flip-card__back-bottom,
843
- .flip-card__bottom-4digits,
844
- .flip-card__back-bottom-4digits {
845
- color: var(--second-flip-color, #EC685C);
846
- position: absolute;
847
- top: 50%;
848
- left: 0;
849
- border-top: solid 1px var(--second-flip-background-color, #000);
850
- background: var(--second-flip-background-color, #393939);
851
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
852
- pointer-events: none;
853
- overflow: hidden;
854
- z-index: 2;
855
- }
856
-
857
- .flip-card__back-bottom,
858
- .flip-card__back-bottom-4digits {
859
- z-index: 1;
860
- }
861
-
862
- .flip-card__bottom::after,
863
- .flip-card__back-bottom::after,
864
- .flip-card__bottom-4digits::after,
865
- .flip-card__back-bottom-4digits::after {
866
- display: block;
867
- margin-top: -0.72em; /* Negative halfHeight */
868
- }
869
- .flip-card__back::before,
870
- .flip-card__bottom::after,
871
- .flip-card__back-bottom::after,
872
- .flip-card__back-4digits::before,
873
- .flip-card__bottom-4digits::after,
874
- .flip-card__back-bottom-4digits::after {
875
- content: attr(data-value);
876
- }
877
-
878
- .flip-card__back,
879
- .flip-card__back-4digits {
880
- position: absolute;
881
- top: 0;
882
- height: 100%;
883
- left: 0%;
884
- pointer-events: none;
885
- }
886
- .flip-card__back::before,
887
- .flip-card__back-4digits::before {
888
- position: relative;
889
- overflow: hidden;
890
- z-index: -1;
891
- }
892
-
893
- .flip .flip-card__back::before,
894
- .flip .flip-card__back-4digits::before {
895
- z-index: 1;
896
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
897
- animation-fill-mode: both;
898
- transform-origin: center bottom;
899
- }
900
-
901
- .flip .flip-card__bottom,
902
- .flip .flip-card__bottom-4digits {
903
- transform-origin: center top;
904
- animation-fill-mode: both;
905
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
906
- }
907
- @keyframes flipTop {
908
- 0% {
909
- transform: rotateX(0deg);
910
- z-index: 2;
911
- }
912
- 0%, 99% {
913
- opacity: 1;
914
- }
915
- 100% {
916
- transform: rotateX(-90deg);
917
- opacity: 0;
918
- }
919
- }
920
-
921
- @keyframes flipBottom {
922
- 0%, 50% {
923
- z-index: -1;
924
- transform: rotateX(90deg);
925
- opacity: 0;
926
- }
927
- 51% {
928
- opacity: 1;
929
- }
930
- 100% {
931
- opacity: 1;
932
- transform: rotateX(0deg);
933
- z-index: 5;
934
- }
935
- }
936
-
937
750
  .unika-calendar-box {
938
751
  position: relative;
939
752
  width: 325px !important;
@@ -1191,3 +1004,190 @@ button.swiper-pagination-bullet {
1191
1004
  padding: 0 0px;
1192
1005
  border-bottom: 1px solid
1193
1006
  }
1007
+
1008
+
1009
+ .no-animation__card {
1010
+ font-weight: 500;
1011
+ font-size: var(--countdown-size, 2rem);
1012
+ line-height: 1.5;
1013
+ display: block;
1014
+ color: var(--main-color, #EC685C);
1015
+ }
1016
+
1017
+ .flip-clock {
1018
+ text-align: center;
1019
+ perspective: 600px;
1020
+ margin: 0 auto;
1021
+ }
1022
+
1023
+ .flip-clock *,
1024
+ .flip-clock *:before,
1025
+ .flip-clock *:after {
1026
+ box-sizing: border-box;
1027
+ }
1028
+
1029
+ .flip-clock__piece {
1030
+ display: inline-block;
1031
+ margin: 0 0.2vw;
1032
+ }
1033
+
1034
+ @media (min-width: 1000px) {
1035
+ .flip-clock__piece {
1036
+ margin: 0 5px;
1037
+ }
1038
+ }
1039
+
1040
+ .flip-clock__slot {
1041
+ font-size: var(--label-size, 1rem);
1042
+ line-height: 1.5;
1043
+ display: block;
1044
+ color: var(--label-color, #222222);
1045
+ }
1046
+
1047
+ .flip-card {
1048
+ display: block;
1049
+ position: relative;
1050
+ padding-bottom: 0.72em; /* halfHeight */
1051
+ font-size: var(--countdown-size, 2.25rem);
1052
+ line-height: 0.95;
1053
+ }
1054
+
1055
+ @media (min-width: 1000px) {
1056
+ .flip-clock__slot {
1057
+ font-size: 1.2rem;
1058
+ }
1059
+
1060
+ .flip-card {
1061
+ font-size: 3rem;
1062
+ }
1063
+ }
1064
+
1065
+ .flip-card__top,
1066
+ .flip-card__bottom,
1067
+ .flip-card__back-bottom,
1068
+ .flip-card__back::before,
1069
+ .flip-card__back::after{
1070
+ display: block;
1071
+ height: 0.72em; /* halfHeight */
1072
+ color: var(--main-color, #EC685C);
1073
+ background: var(--main-flip-background-color, #222222);
1074
+ padding: 0.23em 0.15em 0.4em;
1075
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1076
+ backface-visibility: hidden;
1077
+ -webkit-backface-visibility: hidden;
1078
+ transform-style: preserve-3d;
1079
+ width: 2.1em;
1080
+ }
1081
+
1082
+ .flip-card__top-4digits,
1083
+ .flip-card__bottom-4digits,
1084
+ .flip-card__back-bottom-4digits,
1085
+ .flip-card__back-4digits::before,
1086
+ .flip-card__back-4digits::after {
1087
+ display: block;
1088
+ height: 0.72em; /* halfHeight */
1089
+ color: var(--main-color, #EC685C);
1090
+ background: var(--main-flip-background-color, #222222);
1091
+ padding: 0.23em 0.15em 0.4em;
1092
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1093
+ backface-visibility: hidden;
1094
+ -webkit-backface-visibility: hidden;
1095
+ transform-style: preserve-3d;
1096
+ width: 2.65em;
1097
+ }
1098
+
1099
+ .flip-card__bottom,
1100
+ .flip-card__back-bottom,
1101
+ .flip-card__bottom-4digits,
1102
+ .flip-card__back-bottom-4digits {
1103
+ color: var(--second-flip-color, #EC685C);
1104
+ position: absolute;
1105
+ top: 50%;
1106
+ left: 0;
1107
+ border-top: solid 1px var(--second-flip-background-color, #000);
1108
+ background: var(--second-flip-background-color, #393939);
1109
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1110
+ pointer-events: none;
1111
+ overflow: hidden;
1112
+ z-index: 2;
1113
+ }
1114
+
1115
+ .flip-card__back-bottom,
1116
+ .flip-card__back-bottom-4digits {
1117
+ z-index: 1;
1118
+ }
1119
+
1120
+ .flip-card__bottom::after,
1121
+ .flip-card__back-bottom::after,
1122
+ .flip-card__bottom-4digits::after,
1123
+ .flip-card__back-bottom-4digits::after {
1124
+ display: block;
1125
+ margin-top: -0.72em; /* Negative halfHeight */
1126
+ }
1127
+ .flip-card__back::before,
1128
+ .flip-card__bottom::after,
1129
+ .flip-card__back-bottom::after,
1130
+ .flip-card__back-4digits::before,
1131
+ .flip-card__bottom-4digits::after,
1132
+ .flip-card__back-bottom-4digits::after {
1133
+ content: attr(data-value);
1134
+ }
1135
+
1136
+ .flip-card__back,
1137
+ .flip-card__back-4digits {
1138
+ position: absolute;
1139
+ top: 0;
1140
+ height: 100%;
1141
+ left: 0%;
1142
+ pointer-events: none;
1143
+ }
1144
+ .flip-card__back::before,
1145
+ .flip-card__back-4digits::before {
1146
+ position: relative;
1147
+ overflow: hidden;
1148
+ z-index: -1;
1149
+ }
1150
+
1151
+ .flip .flip-card__back::before,
1152
+ .flip .flip-card__back-4digits::before {
1153
+ z-index: 1;
1154
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1155
+ animation-fill-mode: both;
1156
+ transform-origin: center bottom;
1157
+ }
1158
+
1159
+ .flip .flip-card__bottom,
1160
+ .flip .flip-card__bottom-4digits {
1161
+ transform-origin: center top;
1162
+ animation-fill-mode: both;
1163
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1164
+ }
1165
+ @keyframes flipTop {
1166
+ 0% {
1167
+ transform: rotateX(0deg);
1168
+ z-index: 2;
1169
+ }
1170
+ 0%, 99% {
1171
+ opacity: 1;
1172
+ }
1173
+ 100% {
1174
+ transform: rotateX(-90deg);
1175
+ opacity: 0;
1176
+ }
1177
+ }
1178
+
1179
+ @keyframes flipBottom {
1180
+ 0%, 50% {
1181
+ z-index: -1;
1182
+ transform: rotateX(90deg);
1183
+ opacity: 0;
1184
+ }
1185
+ 51% {
1186
+ opacity: 1;
1187
+ }
1188
+ 100% {
1189
+ opacity: 1;
1190
+ transform: rotateX(0deg);
1191
+ z-index: 5;
1192
+ }
1193
+ }
@@ -1,4 +1,4 @@
1
- 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$m, TransitionGroup, mergeProps } from 'vue';
1
+ 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, 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$m, TransitionGroup } from 'vue';
2
2
  import crypto from 'crypto';
3
3
 
4
4
  /** Detect free variable `global` from Node.js. */
@@ -13023,7 +13023,7 @@ var script$g = defineComponent({
13023
13023
  };
13024
13024
  const upArrow = ref(true);
13025
13025
  const runAnimations = (currentIndex) => {
13026
- var pages = cloneDeep$1(props.work && props.work.pages);
13026
+ const pages = cloneDeep$1(props.work && props.work.pages);
13027
13027
  pages[currentIndex].components && pages[currentIndex].components.forEach((component) => {
13028
13028
  const animationQueue = component.animations || [];
13029
13029
  const len = animationQueue.length;
@@ -13041,20 +13041,31 @@ var script$g = defineComponent({
13041
13041
  animationDelay: `${animation.delay}s`,
13042
13042
  animationFillMode: 'both'
13043
13043
  };
13044
- componentRefs.value.get('component-' + component.id).style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
13045
- animIdx++;
13044
+ const element = componentRefs.value.get('component-' + component.id);
13045
+ if (element) {
13046
+ // element.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
13047
+ element.style.cssText = getComputedCSSText(animationStyle);
13048
+ animIdx++;
13049
+ }
13046
13050
  }
13047
13051
  else {
13048
- componentRefs.value.get('component-' + component.id).style.cssText = getComputedCSSText(oldStyle);
13052
+ const element = componentRefs.value.get('component-' + component.id);
13053
+ if (element) {
13054
+ element.style.cssText = getComputedCSSText(oldStyle);
13055
+ }
13049
13056
  }
13050
13057
  };
13051
13058
  runAnimation();
13052
- componentRefs.value.get('component-' + component.id).addEventListener('animationend', runAnimation, false);
13053
- componentRefs.value.get('component-' + component.id).addEventListener('webkitAnimationEnd', runAnimation, false);
13059
+ const element = componentRefs.value.get('component-' + component.id);
13060
+ if (element) {
13061
+ element.addEventListener('animationend', runAnimation, false);
13062
+ element.addEventListener('webkitAnimationEnd', runAnimation, false);
13063
+ }
13054
13064
  });
13055
13065
  };
13056
13066
  const onSlideChange = (swiper) => {
13057
13067
  const currentIndex = swiper.activeIndex;
13068
+ console.log('Slide changed to:', currentIndex); // 添加调试信息
13058
13069
  runAnimations(currentIndex);
13059
13070
  if (currentIndex === swiper.slides.length - 1) {
13060
13071
  upArrow.value = false;
@@ -13062,22 +13073,19 @@ var script$g = defineComponent({
13062
13073
  else {
13063
13074
  upArrow.value = true;
13064
13075
  }
13065
- // swiper.swiperAnimation.animate();
13066
13076
  swiperAnimate(swiper);
13067
13077
  };
13068
13078
  const slideChangeTransitionEnd = (e) => {
13069
13079
  swiperAnimate(e);
13070
13080
  };
13071
13081
  const onSwiper = (swiper) => {
13072
- // swiper.swiperAnimation = new SwiperAnimation();
13073
- // swiper.swiperAnimation.init(swiper).animate();
13074
13082
  swiperAnimateCache();
13075
13083
  swiperAnimate(swiper);
13076
13084
  const currentIndex = swiper.activeIndex;
13077
13085
  runAnimations(currentIndex);
13078
13086
  };
13079
13087
  const direction = 'vertical';
13080
- const effect = 'fade';
13088
+ // const effect = 'fade'
13081
13089
  const slideClasses = (index) => {
13082
13090
  return ['swiper-slide', `slide-${index}`];
13083
13091
  };
@@ -13088,7 +13096,7 @@ var script$g = defineComponent({
13088
13096
  onSwiper,
13089
13097
  modules: [EffectFade],
13090
13098
  direction,
13091
- effect,
13099
+ // effect,
13092
13100
  upArrow,
13093
13101
  slideChangeTransitionEnd,
13094
13102
  slideClasses
@@ -13118,7 +13126,7 @@ function render$h(_ctx, _cache, $props, $setup, $data, $options) {
13118
13126
  createVNode(_component_swiper, {
13119
13127
  class: "swiper-container",
13120
13128
  modules: _ctx.modules,
13121
- effect: _ctx.effect,
13129
+ effect: _ctx.work.effect,
13122
13130
  direction: _ctx.direction,
13123
13131
  onSwiper: _ctx.onSwiper,
13124
13132
  onSlideChange: _ctx.onSlideChange
@@ -13137,13 +13145,14 @@ function render$h(_ctx, _cache, $props, $setup, $data, $options) {
13137
13145
  (openBlock(true), createElementBlock(Fragment, null, renderList(page.components, (item) => {
13138
13146
  return (openBlock(), createElementBlock("div", {
13139
13147
  key: item.id,
13140
- id: `component-${item.id}`,
13141
13148
  ref_for: true,
13142
13149
  ref: _ctx.setComponentRef,
13150
+ id: `component-${item.id}`,
13143
13151
  style: {"width":"100%","height":"100%"}
13144
13152
  }, [
13145
- createCommentVNode(" <div v-for=\"item in page.components\" :key=\"item.id\" :id=\"`component-${item.id}`\" style=\"width: 100%; height: 100%;\"> "),
13146
- (openBlock(), createBlock(resolveDynamicComponent(item.name), normalizeProps(guardReactiveProps(item.props)), null, 16 /* FULL_PROPS */))
13153
+ (item.name != 'uni-build-up')
13154
+ ? (openBlock(), createBlock(resolveDynamicComponent(item.name), normalizeProps(mergeProps({ key: 0 }, item.props)), null, 16 /* FULL_PROPS */))
13155
+ : createCommentVNode("v-if", true)
13147
13156
  ], 8 /* PROPS */, _hoisted_2$3))
13148
13157
  }), 128 /* KEYED_FRAGMENT */))
13149
13158
  ], 4 /* STYLE */)
@@ -13030,7 +13030,7 @@
13030
13030
  };
13031
13031
  const upArrow = vue.ref(true);
13032
13032
  const runAnimations = (currentIndex) => {
13033
- var pages = cloneDeep$1(props.work && props.work.pages);
13033
+ const pages = cloneDeep$1(props.work && props.work.pages);
13034
13034
  pages[currentIndex].components && pages[currentIndex].components.forEach((component) => {
13035
13035
  const animationQueue = component.animations || [];
13036
13036
  const len = animationQueue.length;
@@ -13048,20 +13048,31 @@
13048
13048
  animationDelay: `${animation.delay}s`,
13049
13049
  animationFillMode: 'both'
13050
13050
  };
13051
- componentRefs.value.get('component-' + component.id).style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
13052
- animIdx++;
13051
+ const element = componentRefs.value.get('component-' + component.id);
13052
+ if (element) {
13053
+ // element.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
13054
+ element.style.cssText = getComputedCSSText(animationStyle);
13055
+ animIdx++;
13056
+ }
13053
13057
  }
13054
13058
  else {
13055
- componentRefs.value.get('component-' + component.id).style.cssText = getComputedCSSText(oldStyle);
13059
+ const element = componentRefs.value.get('component-' + component.id);
13060
+ if (element) {
13061
+ element.style.cssText = getComputedCSSText(oldStyle);
13062
+ }
13056
13063
  }
13057
13064
  };
13058
13065
  runAnimation();
13059
- componentRefs.value.get('component-' + component.id).addEventListener('animationend', runAnimation, false);
13060
- componentRefs.value.get('component-' + component.id).addEventListener('webkitAnimationEnd', runAnimation, false);
13066
+ const element = componentRefs.value.get('component-' + component.id);
13067
+ if (element) {
13068
+ element.addEventListener('animationend', runAnimation, false);
13069
+ element.addEventListener('webkitAnimationEnd', runAnimation, false);
13070
+ }
13061
13071
  });
13062
13072
  };
13063
13073
  const onSlideChange = (swiper) => {
13064
13074
  const currentIndex = swiper.activeIndex;
13075
+ console.log('Slide changed to:', currentIndex); // 添加调试信息
13065
13076
  runAnimations(currentIndex);
13066
13077
  if (currentIndex === swiper.slides.length - 1) {
13067
13078
  upArrow.value = false;
@@ -13069,22 +13080,19 @@
13069
13080
  else {
13070
13081
  upArrow.value = true;
13071
13082
  }
13072
- // swiper.swiperAnimation.animate();
13073
13083
  swiperAnimate(swiper);
13074
13084
  };
13075
13085
  const slideChangeTransitionEnd = (e) => {
13076
13086
  swiperAnimate(e);
13077
13087
  };
13078
13088
  const onSwiper = (swiper) => {
13079
- // swiper.swiperAnimation = new SwiperAnimation();
13080
- // swiper.swiperAnimation.init(swiper).animate();
13081
13089
  swiperAnimateCache();
13082
13090
  swiperAnimate(swiper);
13083
13091
  const currentIndex = swiper.activeIndex;
13084
13092
  runAnimations(currentIndex);
13085
13093
  };
13086
13094
  const direction = 'vertical';
13087
- const effect = 'fade';
13095
+ // const effect = 'fade'
13088
13096
  const slideClasses = (index) => {
13089
13097
  return ['swiper-slide', `slide-${index}`];
13090
13098
  };
@@ -13095,7 +13103,7 @@
13095
13103
  onSwiper,
13096
13104
  modules: [EffectFade],
13097
13105
  direction,
13098
- effect,
13106
+ // effect,
13099
13107
  upArrow,
13100
13108
  slideChangeTransitionEnd,
13101
13109
  slideClasses
@@ -13125,7 +13133,7 @@
13125
13133
  vue.createVNode(_component_swiper, {
13126
13134
  class: "swiper-container",
13127
13135
  modules: _ctx.modules,
13128
- effect: _ctx.effect,
13136
+ effect: _ctx.work.effect,
13129
13137
  direction: _ctx.direction,
13130
13138
  onSwiper: _ctx.onSwiper,
13131
13139
  onSlideChange: _ctx.onSlideChange
@@ -13144,13 +13152,14 @@
13144
13152
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(page.components, (item) => {
13145
13153
  return (vue.openBlock(), vue.createElementBlock("div", {
13146
13154
  key: item.id,
13147
- id: `component-${item.id}`,
13148
13155
  ref_for: true,
13149
13156
  ref: _ctx.setComponentRef,
13157
+ id: `component-${item.id}`,
13150
13158
  style: {"width":"100%","height":"100%"}
13151
13159
  }, [
13152
- vue.createCommentVNode(" <div v-for=\"item in page.components\" :key=\"item.id\" :id=\"`component-${item.id}`\" style=\"width: 100%; height: 100%;\"> "),
13153
- (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.normalizeProps(vue.guardReactiveProps(item.props)), null, 16 /* FULL_PROPS */))
13160
+ (item.name != 'uni-build-up')
13161
+ ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.normalizeProps(vue.mergeProps({ key: 0 }, item.props)), null, 16 /* FULL_PROPS */))
13162
+ : vue.createCommentVNode("v-if", true)
13154
13163
  ], 8 /* PROPS */, _hoisted_2$3))
13155
13164
  }), 128 /* KEYED_FRAGMENT */))
13156
13165
  ], 4 /* STYLE */)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.158",
3
+ "version": "1.0.160",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",