unika-components 1.0.257 → 1.0.259

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.
@@ -10,8 +10,10 @@ declare const _default: import("vue").DefineComponent<{
10
10
  type: PropType<ComponentData[]>;
11
11
  };
12
12
  }, {
13
+ refs: import("vue").Ref<Map<any, any> & Omit<Map<any, any>, keyof Map<any, any>>>;
13
14
  componentRefs: import("vue").Ref<Map<any, any> & Omit<Map<any, any>, keyof Map<any, any>>>;
14
- setComponentRef: (el: any) => void;
15
+ setComponentRef: (el: any, key: string) => void;
16
+ setAnimationRef: (el: any) => void;
15
17
  onSlideChange: (swiper: any) => void;
16
18
  onSwiper: (swiper: any) => void;
17
19
  modules: import("swiper/types").SwiperComponent[];
@@ -18,7 +18,7 @@ button.uni-text-component {
18
18
  display: inline-block;
19
19
  }
20
20
 
21
- .slide-guide {
21
+ .slide-guide {
22
22
  position: absolute;
23
23
  bottom: 90px;
24
24
  left: 50%;
@@ -91,18 +91,6 @@ body, html {
91
91
  }
92
92
  }
93
93
 
94
-
95
- .uni-calendar-component {
96
-
97
- }
98
- .slot-number {
99
- position: absolute;
100
- bottom: 2px;
101
- left: 7px;
102
- font-size: 12px;
103
- color: #666
104
- }
105
-
106
94
  .uni-video-component {
107
95
  position: relative;
108
96
  text-align: center;
@@ -124,6 +112,43 @@ body, html {
124
112
  background: rgba(0, 0, 0, 0.8);
125
113
  }
126
114
 
115
+
116
+ .uni-calendar-component {
117
+
118
+ }
119
+ .slot-number {
120
+ position: absolute;
121
+ bottom: 2px;
122
+ left: 7px;
123
+ font-size: 12px;
124
+ color: #666
125
+ }
126
+
127
+ .like-button {
128
+ display: flex;
129
+ flex-direction: column;
130
+ align-items: center;
131
+ cursor: pointer;
132
+ }
133
+
134
+ .icon-heart {
135
+ font-size: 24px;
136
+ color: #e74c3c;
137
+ }
138
+
139
+ .liked {
140
+ color: #f00; /* 更改颜色以示已赞 */
141
+ }
142
+
143
+ .like-count {
144
+ margin-top: 4px;
145
+ font-size: 16px;
146
+ color: #333;
147
+ }
148
+
149
+ .uni-build-up-component {
150
+ }
151
+
127
152
  .uni-lotties-component {
128
153
  width: 100%;
129
154
  height: 100%;
@@ -182,35 +207,10 @@ body, html {
182
207
  margin-bottom: 0px;
183
208
  vertical-align: top;
184
209
  }
185
-
186
- .uni-build-up-component {
187
- }
188
210
 
189
211
  .uni-svg-component {
190
212
  display: inline-block;
191
213
  }
192
-
193
- .like-button {
194
- display: flex;
195
- flex-direction: column;
196
- align-items: center;
197
- cursor: pointer;
198
- }
199
-
200
- .icon-heart {
201
- font-size: 24px;
202
- color: #e74c3c;
203
- }
204
-
205
- .liked {
206
- color: #f00; /* 更改颜色以示已赞 */
207
- }
208
-
209
- .like-count {
210
- margin-top: 4px;
211
- font-size: 16px;
212
- color: #333;
213
- }
214
214
  /**
215
215
  * Swiper 6.8.4
216
216
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -759,193 +759,6 @@ button.swiper-pagination-bullet {
759
759
  backface-visibility: hidden;
760
760
  }
761
761
 
762
-
763
- .no-animation__card {
764
- font-weight: 500;
765
- font-size: var(--countdown-size, 2rem);
766
- line-height: 1.5;
767
- display: block;
768
- color: var(--main-color, #EC685C);
769
- }
770
-
771
- .flip-clock {
772
- text-align: center;
773
- perspective: 600px;
774
- margin: 0 auto;
775
- }
776
-
777
- .flip-clock *,
778
- .flip-clock *:before,
779
- .flip-clock *:after {
780
- box-sizing: border-box;
781
- }
782
-
783
- .flip-clock__piece {
784
- display: inline-block;
785
- margin: 0 0.2vw;
786
- }
787
-
788
- @media (min-width: 1000px) {
789
- .flip-clock__piece {
790
- margin: 0 5px;
791
- }
792
- }
793
-
794
- .flip-clock__slot {
795
- font-size: var(--label-size, 1rem);
796
- line-height: 1.5;
797
- display: block;
798
- color: var(--label-color, #222222);
799
- }
800
-
801
- .flip-card {
802
- display: block;
803
- position: relative;
804
- padding-bottom: 0.72em; /* halfHeight */
805
- font-size: var(--countdown-size, 2.25rem);
806
- line-height: 0.95;
807
- }
808
-
809
- @media (min-width: 1000px) {
810
- .flip-clock__slot {
811
- font-size: 1.2rem;
812
- }
813
-
814
- .flip-card {
815
- font-size: 3rem;
816
- }
817
- }
818
-
819
- .flip-card__top,
820
- .flip-card__bottom,
821
- .flip-card__back-bottom,
822
- .flip-card__back::before,
823
- .flip-card__back::after{
824
- display: block;
825
- height: 0.72em; /* halfHeight */
826
- color: var(--main-color, #EC685C);
827
- background: var(--main-flip-background-color, #222222);
828
- padding: 0.23em 0.15em 0.4em;
829
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
830
- backface-visibility: hidden;
831
- -webkit-backface-visibility: hidden;
832
- transform-style: preserve-3d;
833
- width: 2.1em;
834
- }
835
-
836
- .flip-card__top-4digits,
837
- .flip-card__bottom-4digits,
838
- .flip-card__back-bottom-4digits,
839
- .flip-card__back-4digits::before,
840
- .flip-card__back-4digits::after {
841
- display: block;
842
- height: 0.72em; /* halfHeight */
843
- color: var(--main-color, #EC685C);
844
- background: var(--main-flip-background-color, #222222);
845
- padding: 0.23em 0.15em 0.4em;
846
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
847
- backface-visibility: hidden;
848
- -webkit-backface-visibility: hidden;
849
- transform-style: preserve-3d;
850
- width: 2.65em;
851
- }
852
-
853
- .flip-card__bottom,
854
- .flip-card__back-bottom,
855
- .flip-card__bottom-4digits,
856
- .flip-card__back-bottom-4digits {
857
- color: var(--second-flip-color, #EC685C);
858
- position: absolute;
859
- top: 50%;
860
- left: 0;
861
- border-top: solid 1px var(--second-flip-background-color, #000);
862
- background: var(--second-flip-background-color, #393939);
863
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
864
- pointer-events: none;
865
- overflow: hidden;
866
- z-index: 2;
867
- }
868
-
869
- .flip-card__back-bottom,
870
- .flip-card__back-bottom-4digits {
871
- z-index: 1;
872
- }
873
-
874
- .flip-card__bottom::after,
875
- .flip-card__back-bottom::after,
876
- .flip-card__bottom-4digits::after,
877
- .flip-card__back-bottom-4digits::after {
878
- display: block;
879
- margin-top: -0.72em; /* Negative halfHeight */
880
- }
881
- .flip-card__back::before,
882
- .flip-card__bottom::after,
883
- .flip-card__back-bottom::after,
884
- .flip-card__back-4digits::before,
885
- .flip-card__bottom-4digits::after,
886
- .flip-card__back-bottom-4digits::after {
887
- content: attr(data-value);
888
- }
889
-
890
- .flip-card__back,
891
- .flip-card__back-4digits {
892
- position: absolute;
893
- top: 0;
894
- height: 100%;
895
- left: 0%;
896
- pointer-events: none;
897
- }
898
- .flip-card__back::before,
899
- .flip-card__back-4digits::before {
900
- position: relative;
901
- overflow: hidden;
902
- z-index: -1;
903
- }
904
-
905
- .flip .flip-card__back::before,
906
- .flip .flip-card__back-4digits::before {
907
- z-index: 1;
908
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
909
- animation-fill-mode: both;
910
- transform-origin: center bottom;
911
- }
912
-
913
- .flip .flip-card__bottom,
914
- .flip .flip-card__bottom-4digits {
915
- transform-origin: center top;
916
- animation-fill-mode: both;
917
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
918
- }
919
- @keyframes flipTop {
920
- 0% {
921
- transform: rotateX(0deg);
922
- z-index: 2;
923
- }
924
- 0%, 99% {
925
- opacity: 1;
926
- }
927
- 100% {
928
- transform: rotateX(-90deg);
929
- opacity: 0;
930
- }
931
- }
932
-
933
- @keyframes flipBottom {
934
- 0%, 50% {
935
- z-index: -1;
936
- transform: rotateX(90deg);
937
- opacity: 0;
938
- }
939
- 51% {
940
- opacity: 1;
941
- }
942
- 100% {
943
- opacity: 1;
944
- transform: rotateX(0deg);
945
- z-index: 5;
946
- }
947
- }
948
-
949
762
  .unika-calendar-box {
950
763
  position: relative;
951
764
  width: 325px !important;
@@ -1205,3 +1018,190 @@ button.swiper-pagination-bullet {
1205
1018
  padding: 0 0px;
1206
1019
  border-bottom: 1px solid
1207
1020
  }
1021
+
1022
+
1023
+ .no-animation__card {
1024
+ font-weight: 500;
1025
+ font-size: var(--countdown-size, 2rem);
1026
+ line-height: 1.5;
1027
+ display: block;
1028
+ color: var(--main-color, #EC685C);
1029
+ }
1030
+
1031
+ .flip-clock {
1032
+ text-align: center;
1033
+ perspective: 600px;
1034
+ margin: 0 auto;
1035
+ }
1036
+
1037
+ .flip-clock *,
1038
+ .flip-clock *:before,
1039
+ .flip-clock *:after {
1040
+ box-sizing: border-box;
1041
+ }
1042
+
1043
+ .flip-clock__piece {
1044
+ display: inline-block;
1045
+ margin: 0 0.2vw;
1046
+ }
1047
+
1048
+ @media (min-width: 1000px) {
1049
+ .flip-clock__piece {
1050
+ margin: 0 5px;
1051
+ }
1052
+ }
1053
+
1054
+ .flip-clock__slot {
1055
+ font-size: var(--label-size, 1rem);
1056
+ line-height: 1.5;
1057
+ display: block;
1058
+ color: var(--label-color, #222222);
1059
+ }
1060
+
1061
+ .flip-card {
1062
+ display: block;
1063
+ position: relative;
1064
+ padding-bottom: 0.72em; /* halfHeight */
1065
+ font-size: var(--countdown-size, 2.25rem);
1066
+ line-height: 0.95;
1067
+ }
1068
+
1069
+ @media (min-width: 1000px) {
1070
+ .flip-clock__slot {
1071
+ font-size: 1.2rem;
1072
+ }
1073
+
1074
+ .flip-card {
1075
+ font-size: 3rem;
1076
+ }
1077
+ }
1078
+
1079
+ .flip-card__top,
1080
+ .flip-card__bottom,
1081
+ .flip-card__back-bottom,
1082
+ .flip-card__back::before,
1083
+ .flip-card__back::after{
1084
+ display: block;
1085
+ height: 0.72em; /* halfHeight */
1086
+ color: var(--main-color, #EC685C);
1087
+ background: var(--main-flip-background-color, #222222);
1088
+ padding: 0.23em 0.15em 0.4em;
1089
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1090
+ backface-visibility: hidden;
1091
+ -webkit-backface-visibility: hidden;
1092
+ transform-style: preserve-3d;
1093
+ width: 2.1em;
1094
+ }
1095
+
1096
+ .flip-card__top-4digits,
1097
+ .flip-card__bottom-4digits,
1098
+ .flip-card__back-bottom-4digits,
1099
+ .flip-card__back-4digits::before,
1100
+ .flip-card__back-4digits::after {
1101
+ display: block;
1102
+ height: 0.72em; /* halfHeight */
1103
+ color: var(--main-color, #EC685C);
1104
+ background: var(--main-flip-background-color, #222222);
1105
+ padding: 0.23em 0.15em 0.4em;
1106
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1107
+ backface-visibility: hidden;
1108
+ -webkit-backface-visibility: hidden;
1109
+ transform-style: preserve-3d;
1110
+ width: 2.65em;
1111
+ }
1112
+
1113
+ .flip-card__bottom,
1114
+ .flip-card__back-bottom,
1115
+ .flip-card__bottom-4digits,
1116
+ .flip-card__back-bottom-4digits {
1117
+ color: var(--second-flip-color, #EC685C);
1118
+ position: absolute;
1119
+ top: 50%;
1120
+ left: 0;
1121
+ border-top: solid 1px var(--second-flip-background-color, #000);
1122
+ background: var(--second-flip-background-color, #393939);
1123
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1124
+ pointer-events: none;
1125
+ overflow: hidden;
1126
+ z-index: 2;
1127
+ }
1128
+
1129
+ .flip-card__back-bottom,
1130
+ .flip-card__back-bottom-4digits {
1131
+ z-index: 1;
1132
+ }
1133
+
1134
+ .flip-card__bottom::after,
1135
+ .flip-card__back-bottom::after,
1136
+ .flip-card__bottom-4digits::after,
1137
+ .flip-card__back-bottom-4digits::after {
1138
+ display: block;
1139
+ margin-top: -0.72em; /* Negative halfHeight */
1140
+ }
1141
+ .flip-card__back::before,
1142
+ .flip-card__bottom::after,
1143
+ .flip-card__back-bottom::after,
1144
+ .flip-card__back-4digits::before,
1145
+ .flip-card__bottom-4digits::after,
1146
+ .flip-card__back-bottom-4digits::after {
1147
+ content: attr(data-value);
1148
+ }
1149
+
1150
+ .flip-card__back,
1151
+ .flip-card__back-4digits {
1152
+ position: absolute;
1153
+ top: 0;
1154
+ height: 100%;
1155
+ left: 0%;
1156
+ pointer-events: none;
1157
+ }
1158
+ .flip-card__back::before,
1159
+ .flip-card__back-4digits::before {
1160
+ position: relative;
1161
+ overflow: hidden;
1162
+ z-index: -1;
1163
+ }
1164
+
1165
+ .flip .flip-card__back::before,
1166
+ .flip .flip-card__back-4digits::before {
1167
+ z-index: 1;
1168
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1169
+ animation-fill-mode: both;
1170
+ transform-origin: center bottom;
1171
+ }
1172
+
1173
+ .flip .flip-card__bottom,
1174
+ .flip .flip-card__bottom-4digits {
1175
+ transform-origin: center top;
1176
+ animation-fill-mode: both;
1177
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1178
+ }
1179
+ @keyframes flipTop {
1180
+ 0% {
1181
+ transform: rotateX(0deg);
1182
+ z-index: 2;
1183
+ }
1184
+ 0%, 99% {
1185
+ opacity: 1;
1186
+ }
1187
+ 100% {
1188
+ transform: rotateX(-90deg);
1189
+ opacity: 0;
1190
+ }
1191
+ }
1192
+
1193
+ @keyframes flipBottom {
1194
+ 0%, 50% {
1195
+ z-index: -1;
1196
+ transform: rotateX(90deg);
1197
+ opacity: 0;
1198
+ }
1199
+ 51% {
1200
+ opacity: 1;
1201
+ }
1202
+ 100% {
1203
+ opacity: 1;
1204
+ transform: rotateX(0deg);
1205
+ z-index: 5;
1206
+ }
1207
+ }
@@ -13045,7 +13045,6 @@ SwiperCore.use([Pagination$1, EffectFade]);
13045
13045
  function getComputedCSSText(style) {
13046
13046
  let cssText = '';
13047
13047
  for (const attr in style) {
13048
- // #!zh: 驼峰转下划线
13049
13048
  cssText += `${attr.replace(/[A-Z]+/g, m => `-${m.toLowerCase()}`)}:${style[attr]};`;
13050
13049
  }
13051
13050
  return cssText;
@@ -13066,14 +13065,18 @@ var script$h = defineComponent({
13066
13065
  SwiperSlide
13067
13066
  },
13068
13067
  setup(props) {
13069
- // 重用并且简化
13070
- // 抽离并且获得 styleProps
13071
13068
  const componentRefs = ref(new Map());
13072
- const setComponentRef = (el) => {
13069
+ const setAnimationRef = (el) => {
13073
13070
  if (el) {
13074
13071
  componentRefs.value.set(el.id, el);
13075
13072
  }
13076
13073
  };
13074
+ const refs = ref(new Map());
13075
+ const setComponentRef = (el, key) => {
13076
+ if (el) {
13077
+ refs.value.set(key, el);
13078
+ }
13079
+ };
13077
13080
  const upArrow = ref(true);
13078
13081
  const runAnimations = (currentIndex) => {
13079
13082
  const pages = cloneDeep$1(props.work && props.work.pages);
@@ -13100,7 +13103,6 @@ var script$h = defineComponent({
13100
13103
  if (element) {
13101
13104
  const innerElement = element.querySelector('.inner-component');
13102
13105
  if (innerElement) {
13103
- // element.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
13104
13106
  innerElement.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
13105
13107
  animIdx++;
13106
13108
  }
@@ -13127,25 +13129,21 @@ var script$h = defineComponent({
13127
13129
  }
13128
13130
  });
13129
13131
  };
13130
- const restartLottieAnimations = () => {
13131
- componentRefs.value.forEach((el) => {
13132
- const lottieComponent = el.querySelector('.uni-lotties-component');
13133
- console.log(lottieComponent);
13134
- if (lottieComponent && lottieComponent.__vue__) {
13135
- const vueInstance = lottieComponent.__vue__;
13136
- console.log('aaaaaa');
13137
- console.log(vueInstance);
13138
- if (vueInstance.play) {
13139
- console.log('bbbbbb');
13140
- vueInstance.play();
13132
+ const callUniLottiesPlay = (currentIndex) => {
13133
+ const pageComponents = props.work && props.work.pages[currentIndex].components;
13134
+ pageComponents && pageComponents.forEach(component => {
13135
+ if (component.name === 'uni-lotties') {
13136
+ const element = refs.value.get('component-' + component.id);
13137
+ if (element && typeof element.play === 'function') {
13138
+ element.play();
13141
13139
  }
13142
13140
  }
13143
13141
  });
13144
13142
  };
13145
13143
  const onSlideChange = (swiper) => {
13146
13144
  const currentIndex = swiper.activeIndex;
13147
- console.log('Slide changed to:', currentIndex); // 添加调试信息
13148
13145
  runAnimations(currentIndex);
13146
+ callUniLottiesPlay(currentIndex);
13149
13147
  if (currentIndex === swiper.slides.length - 1) {
13150
13148
  upArrow.value = false;
13151
13149
  }
@@ -13153,12 +13151,6 @@ var script$h = defineComponent({
13153
13151
  upArrow.value = true;
13154
13152
  }
13155
13153
  swiperAnimate(swiper);
13156
- const currentPage = props.work && props.work.pages[currentIndex];
13157
- currentPage && currentPage.components.forEach((component) => {
13158
- if (component.name === 'uni-lotties') {
13159
- restartLottieAnimations();
13160
- }
13161
- });
13162
13154
  };
13163
13155
  const slideChangeTransitionEnd = (e) => {
13164
13156
  swiperAnimate(e);
@@ -13168,26 +13160,21 @@ var script$h = defineComponent({
13168
13160
  swiperAnimate(swiper);
13169
13161
  const currentIndex = swiper.activeIndex;
13170
13162
  runAnimations(currentIndex);
13171
- const currentPage = props.work && props.work.pages[currentIndex];
13172
- currentPage && currentPage.components.forEach((component) => {
13173
- if (component.name === 'uni-lotties') {
13174
- restartLottieAnimations();
13175
- }
13176
- });
13163
+ callUniLottiesPlay(currentIndex);
13177
13164
  };
13178
13165
  const direction = 'vertical';
13179
- // const effect = 'fade'
13180
13166
  const slideClasses = (index) => {
13181
13167
  return ['swiper-slide', `slide-${index}`];
13182
13168
  };
13183
13169
  return {
13170
+ refs,
13184
13171
  componentRefs,
13185
13172
  setComponentRef,
13173
+ setAnimationRef,
13186
13174
  onSlideChange,
13187
13175
  onSwiper,
13188
13176
  modules: [EffectFade],
13189
13177
  direction,
13190
- // effect,
13191
13178
  upArrow,
13192
13179
  slideChangeTransitionEnd,
13193
13180
  slideClasses
@@ -13235,14 +13222,17 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
13235
13222
  }, [
13236
13223
  (openBlock(true), createElementBlock(Fragment, null, renderList(page.components, (item) => {
13237
13224
  return (openBlock(), createElementBlock("div", {
13238
- key: item.id,
13239
13225
  ref_for: true,
13240
- ref: _ctx.setComponentRef,
13226
+ ref: _ctx.setAnimationRef,
13241
13227
  id: `component-${item.id}`,
13228
+ key: item.id,
13242
13229
  style: {"width":"100%","height":"100%"}
13243
13230
  }, [
13244
13231
  (item.name != 'uni-build-up' && !item.isHidden)
13245
- ? (openBlock(), createBlock(resolveDynamicComponent(item.name), normalizeProps(mergeProps({ key: 0 }, item.props)), null, 16 /* FULL_PROPS */))
13232
+ ? (openBlock(), createBlock(resolveDynamicComponent(item.name), mergeProps({ key: 0 }, item.props, {
13233
+ ref_for: true,
13234
+ ref: el => _ctx.setComponentRef(el, `component-${item.id}`)
13235
+ }), null, 16 /* FULL_PROPS */))
13246
13236
  : createCommentVNode("v-if", true)
13247
13237
  ], 8 /* PROPS */, _hoisted_2$3))
13248
13238
  }), 128 /* KEYED_FRAGMENT */))
@@ -75673,7 +75663,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
75673
75663
  var Vue3Lottie = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
75674
75664
 
75675
75665
  const defaultProps$4 = transformToComponentProps(componentsDefaultProps['uni-lotties'].props, isEditingProp);
75676
- const defaultStyles$3 = without$1(Object.keys(lottiesDefaultProps), 'actionType', 'url', 'animationLink', 'loop', 'delay', 'pauseAnimation');
75666
+ const defaultStyles$3 = without$1(Object.keys(lottiesDefaultProps), 'actionType', 'url', 'animationLink', 'loop', 'delay', 'pauseAnimation', 'key');
75677
75667
  var script$5 = defineComponent({
75678
75668
  name: 'uni-lotties',
75679
75669
  props: {
@@ -13052,7 +13052,6 @@
13052
13052
  function getComputedCSSText(style) {
13053
13053
  let cssText = '';
13054
13054
  for (const attr in style) {
13055
- // #!zh: 驼峰转下划线
13056
13055
  cssText += `${attr.replace(/[A-Z]+/g, m => `-${m.toLowerCase()}`)}:${style[attr]};`;
13057
13056
  }
13058
13057
  return cssText;
@@ -13073,14 +13072,18 @@
13073
13072
  SwiperSlide
13074
13073
  },
13075
13074
  setup(props) {
13076
- // 重用并且简化
13077
- // 抽离并且获得 styleProps
13078
13075
  const componentRefs = vue.ref(new Map());
13079
- const setComponentRef = (el) => {
13076
+ const setAnimationRef = (el) => {
13080
13077
  if (el) {
13081
13078
  componentRefs.value.set(el.id, el);
13082
13079
  }
13083
13080
  };
13081
+ const refs = vue.ref(new Map());
13082
+ const setComponentRef = (el, key) => {
13083
+ if (el) {
13084
+ refs.value.set(key, el);
13085
+ }
13086
+ };
13084
13087
  const upArrow = vue.ref(true);
13085
13088
  const runAnimations = (currentIndex) => {
13086
13089
  const pages = cloneDeep$1(props.work && props.work.pages);
@@ -13107,7 +13110,6 @@
13107
13110
  if (element) {
13108
13111
  const innerElement = element.querySelector('.inner-component');
13109
13112
  if (innerElement) {
13110
- // element.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
13111
13113
  innerElement.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle);
13112
13114
  animIdx++;
13113
13115
  }
@@ -13134,25 +13136,21 @@
13134
13136
  }
13135
13137
  });
13136
13138
  };
13137
- const restartLottieAnimations = () => {
13138
- componentRefs.value.forEach((el) => {
13139
- const lottieComponent = el.querySelector('.uni-lotties-component');
13140
- console.log(lottieComponent);
13141
- if (lottieComponent && lottieComponent.__vue__) {
13142
- const vueInstance = lottieComponent.__vue__;
13143
- console.log('aaaaaa');
13144
- console.log(vueInstance);
13145
- if (vueInstance.play) {
13146
- console.log('bbbbbb');
13147
- vueInstance.play();
13139
+ const callUniLottiesPlay = (currentIndex) => {
13140
+ const pageComponents = props.work && props.work.pages[currentIndex].components;
13141
+ pageComponents && pageComponents.forEach(component => {
13142
+ if (component.name === 'uni-lotties') {
13143
+ const element = refs.value.get('component-' + component.id);
13144
+ if (element && typeof element.play === 'function') {
13145
+ element.play();
13148
13146
  }
13149
13147
  }
13150
13148
  });
13151
13149
  };
13152
13150
  const onSlideChange = (swiper) => {
13153
13151
  const currentIndex = swiper.activeIndex;
13154
- console.log('Slide changed to:', currentIndex); // 添加调试信息
13155
13152
  runAnimations(currentIndex);
13153
+ callUniLottiesPlay(currentIndex);
13156
13154
  if (currentIndex === swiper.slides.length - 1) {
13157
13155
  upArrow.value = false;
13158
13156
  }
@@ -13160,12 +13158,6 @@
13160
13158
  upArrow.value = true;
13161
13159
  }
13162
13160
  swiperAnimate(swiper);
13163
- const currentPage = props.work && props.work.pages[currentIndex];
13164
- currentPage && currentPage.components.forEach((component) => {
13165
- if (component.name === 'uni-lotties') {
13166
- restartLottieAnimations();
13167
- }
13168
- });
13169
13161
  };
13170
13162
  const slideChangeTransitionEnd = (e) => {
13171
13163
  swiperAnimate(e);
@@ -13175,26 +13167,21 @@
13175
13167
  swiperAnimate(swiper);
13176
13168
  const currentIndex = swiper.activeIndex;
13177
13169
  runAnimations(currentIndex);
13178
- const currentPage = props.work && props.work.pages[currentIndex];
13179
- currentPage && currentPage.components.forEach((component) => {
13180
- if (component.name === 'uni-lotties') {
13181
- restartLottieAnimations();
13182
- }
13183
- });
13170
+ callUniLottiesPlay(currentIndex);
13184
13171
  };
13185
13172
  const direction = 'vertical';
13186
- // const effect = 'fade'
13187
13173
  const slideClasses = (index) => {
13188
13174
  return ['swiper-slide', `slide-${index}`];
13189
13175
  };
13190
13176
  return {
13177
+ refs,
13191
13178
  componentRefs,
13192
13179
  setComponentRef,
13180
+ setAnimationRef,
13193
13181
  onSlideChange,
13194
13182
  onSwiper,
13195
13183
  modules: [EffectFade],
13196
13184
  direction,
13197
- // effect,
13198
13185
  upArrow,
13199
13186
  slideChangeTransitionEnd,
13200
13187
  slideClasses
@@ -13242,14 +13229,17 @@
13242
13229
  }, [
13243
13230
  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(page.components, (item) => {
13244
13231
  return (vue.openBlock(), vue.createElementBlock("div", {
13245
- key: item.id,
13246
13232
  ref_for: true,
13247
- ref: _ctx.setComponentRef,
13233
+ ref: _ctx.setAnimationRef,
13248
13234
  id: `component-${item.id}`,
13235
+ key: item.id,
13249
13236
  style: {"width":"100%","height":"100%"}
13250
13237
  }, [
13251
13238
  (item.name != 'uni-build-up' && !item.isHidden)
13252
- ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.normalizeProps(vue.mergeProps({ key: 0 }, item.props)), null, 16 /* FULL_PROPS */))
13239
+ ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.mergeProps({ key: 0 }, item.props, {
13240
+ ref_for: true,
13241
+ ref: el => _ctx.setComponentRef(el, `component-${item.id}`)
13242
+ }), null, 16 /* FULL_PROPS */))
13253
13243
  : vue.createCommentVNode("v-if", true)
13254
13244
  ], 8 /* PROPS */, _hoisted_2$3))
13255
13245
  }), 128 /* KEYED_FRAGMENT */))
@@ -75680,7 +75670,7 @@ summary tabindex target title type usemap value width wmode wrap`;
75680
75670
  var Vue3Lottie = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
75681
75671
 
75682
75672
  const defaultProps$4 = transformToComponentProps(componentsDefaultProps['uni-lotties'].props, isEditingProp);
75683
- const defaultStyles$3 = without$1(Object.keys(lottiesDefaultProps), 'actionType', 'url', 'animationLink', 'loop', 'delay', 'pauseAnimation');
75673
+ const defaultStyles$3 = without$1(Object.keys(lottiesDefaultProps), 'actionType', 'url', 'animationLink', 'loop', 'delay', 'pauseAnimation', 'key');
75684
75674
  var script$5 = vue.defineComponent({
75685
75675
  name: 'uni-lotties',
75686
75676
  props: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.257",
3
+ "version": "1.0.259",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",