unika-components 1.0.277 → 1.0.278

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.
@@ -11,8 +11,7 @@ declare const _default: import("vue").DefineComponent<{
11
11
  handleClick: () => void;
12
12
  getItemNumber: (date: string) => string | undefined;
13
13
  getMonthData: (date: any) => void;
14
- size: import("vue").Ref<string>;
15
- calendarKey: import("vue").Ref<number>;
14
+ size: import("vue").ComputedRef<"scale(0.855)" | "scale(1)" | "scale(0.75)">;
16
15
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
17
16
  [x: string]: any;
18
17
  }>>, {
@@ -1,15 +1,9 @@
1
1
 
2
- h2.uni-text-component, p.uni-text-component {
3
- margin-top: 0;
4
- margin-bottom: 0;
5
- }
6
- button.uni-text-component {
7
- padding: 5px 10px;
8
- cursor: pointer;
2
+ .uni-image-component {
3
+ max-width: 100%;
9
4
  }
10
- .uni-text-component {
11
- box-sizing: border-box;
12
- white-space: pre-wrap;
5
+ .uni-image-mask-wrapper {
6
+ display: inline-block;
13
7
  }
14
8
 
15
9
  .slide-guide {
@@ -95,6 +89,50 @@ body, html {
95
89
  .edit-wrapper .uni-lotties-component, .edit-wrapper .uni-like-component, .edit-wrapper .uni-background-component, .edit-wrapper .uni-svg-component, .edit-wrapper .uni-register-form-component{
96
90
  position: static !important;
97
91
  }
92
+
93
+ h2.uni-text-component, p.uni-text-component {
94
+ margin-top: 0;
95
+ margin-bottom: 0;
96
+ }
97
+ button.uni-text-component {
98
+ padding: 5px 10px;
99
+ cursor: pointer;
100
+ }
101
+ .uni-text-component {
102
+ box-sizing: border-box;
103
+ white-space: pre-wrap;
104
+ }
105
+
106
+ .uni-video-component {
107
+ position: relative;
108
+ text-align: center;
109
+ }
110
+ .play-pause-button {
111
+ position: absolute;
112
+ top: 50%;
113
+ left: 50%;
114
+ transform: translate(-50%, -50%);
115
+ cursor: pointer;
116
+ font-size: 2rem;
117
+ color: #fff;
118
+ background: rgba(0, 0, 0, 0.6);
119
+ border-radius: 50%;
120
+ padding: 10px;
121
+ transition: background 0.3s;
122
+ }
123
+ .play-pause-button:hover {
124
+ background: rgba(0, 0, 0, 0.8);
125
+ }
126
+
127
+ .effect {
128
+ width: 100%;
129
+ height: 100%;
130
+ }
131
+
132
+ .uni-lotties-component {
133
+ width: 100%;
134
+ height: 100%;
135
+ }
98
136
 
99
137
 
100
138
  .uni-calendar-component {
@@ -107,13 +145,6 @@ body, html {
107
145
  font-size: 12px;
108
146
  color: #666
109
147
  }
110
-
111
- .uni-image-component {
112
- max-width: 100%;
113
- }
114
- .uni-image-mask-wrapper {
115
- display: inline-block;
116
- }
117
148
 
118
149
  .like-button {
119
150
  display: flex;
@@ -137,37 +168,6 @@ body, html {
137
168
  color: #333;
138
169
  }
139
170
 
140
- .effect {
141
- width: 100%;
142
- height: 100%;
143
- }
144
-
145
- .uni-video-component {
146
- position: relative;
147
- text-align: center;
148
- }
149
- .play-pause-button {
150
- position: absolute;
151
- top: 50%;
152
- left: 50%;
153
- transform: translate(-50%, -50%);
154
- cursor: pointer;
155
- font-size: 2rem;
156
- color: #fff;
157
- background: rgba(0, 0, 0, 0.6);
158
- border-radius: 50%;
159
- padding: 10px;
160
- transition: background 0.3s;
161
- }
162
- .play-pause-button:hover {
163
- background: rgba(0, 0, 0, 0.8);
164
- }
165
-
166
- .uni-lotties-component {
167
- width: 100%;
168
- height: 100%;
169
- }
170
-
171
171
  .uni-build-up-component {
172
172
  }
173
173
 
@@ -771,6 +771,193 @@ button.swiper-pagination-bullet {
771
771
  backface-visibility: hidden;
772
772
  }
773
773
 
774
+
775
+ .no-animation__card {
776
+ font-weight: 500;
777
+ font-size: var(--countdown-size, 2rem);
778
+ line-height: 1.5;
779
+ display: block;
780
+ color: var(--main-color, #EC685C);
781
+ }
782
+
783
+ .flip-clock {
784
+ text-align: center;
785
+ perspective: 600px;
786
+ margin: 0 auto;
787
+ }
788
+
789
+ .flip-clock *,
790
+ .flip-clock *:before,
791
+ .flip-clock *:after {
792
+ box-sizing: border-box;
793
+ }
794
+
795
+ .flip-clock__piece {
796
+ display: inline-block;
797
+ margin: 0 0.2vw;
798
+ }
799
+
800
+ @media (min-width: 1000px) {
801
+ .flip-clock__piece {
802
+ margin: 0 5px;
803
+ }
804
+ }
805
+
806
+ .flip-clock__slot {
807
+ font-size: var(--label-size, 1rem);
808
+ line-height: 1.5;
809
+ display: block;
810
+ color: var(--label-color, #222222);
811
+ }
812
+
813
+ .flip-card {
814
+ display: block;
815
+ position: relative;
816
+ padding-bottom: 0.72em; /* halfHeight */
817
+ font-size: var(--countdown-size, 2.25rem);
818
+ line-height: 0.95;
819
+ }
820
+
821
+ @media (min-width: 1000px) {
822
+ .flip-clock__slot {
823
+ font-size: 1.2rem;
824
+ }
825
+
826
+ .flip-card {
827
+ font-size: 3rem;
828
+ }
829
+ }
830
+
831
+ .flip-card__top,
832
+ .flip-card__bottom,
833
+ .flip-card__back-bottom,
834
+ .flip-card__back::before,
835
+ .flip-card__back::after{
836
+ display: block;
837
+ height: 0.72em; /* halfHeight */
838
+ color: var(--main-color, #EC685C);
839
+ background: var(--main-flip-background-color, #222222);
840
+ padding: 0.23em 0.15em 0.4em;
841
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
842
+ backface-visibility: hidden;
843
+ -webkit-backface-visibility: hidden;
844
+ transform-style: preserve-3d;
845
+ width: 2.1em;
846
+ }
847
+
848
+ .flip-card__top-4digits,
849
+ .flip-card__bottom-4digits,
850
+ .flip-card__back-bottom-4digits,
851
+ .flip-card__back-4digits::before,
852
+ .flip-card__back-4digits::after {
853
+ display: block;
854
+ height: 0.72em; /* halfHeight */
855
+ color: var(--main-color, #EC685C);
856
+ background: var(--main-flip-background-color, #222222);
857
+ padding: 0.23em 0.15em 0.4em;
858
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
859
+ backface-visibility: hidden;
860
+ -webkit-backface-visibility: hidden;
861
+ transform-style: preserve-3d;
862
+ width: 2.65em;
863
+ }
864
+
865
+ .flip-card__bottom,
866
+ .flip-card__back-bottom,
867
+ .flip-card__bottom-4digits,
868
+ .flip-card__back-bottom-4digits {
869
+ color: var(--second-flip-color, #EC685C);
870
+ position: absolute;
871
+ top: 50%;
872
+ left: 0;
873
+ border-top: solid 1px var(--second-flip-background-color, #000);
874
+ background: var(--second-flip-background-color, #393939);
875
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
876
+ pointer-events: none;
877
+ overflow: hidden;
878
+ z-index: 2;
879
+ }
880
+
881
+ .flip-card__back-bottom,
882
+ .flip-card__back-bottom-4digits {
883
+ z-index: 1;
884
+ }
885
+
886
+ .flip-card__bottom::after,
887
+ .flip-card__back-bottom::after,
888
+ .flip-card__bottom-4digits::after,
889
+ .flip-card__back-bottom-4digits::after {
890
+ display: block;
891
+ margin-top: -0.72em; /* Negative halfHeight */
892
+ }
893
+ .flip-card__back::before,
894
+ .flip-card__bottom::after,
895
+ .flip-card__back-bottom::after,
896
+ .flip-card__back-4digits::before,
897
+ .flip-card__bottom-4digits::after,
898
+ .flip-card__back-bottom-4digits::after {
899
+ content: attr(data-value);
900
+ }
901
+
902
+ .flip-card__back,
903
+ .flip-card__back-4digits {
904
+ position: absolute;
905
+ top: 0;
906
+ height: 100%;
907
+ left: 0%;
908
+ pointer-events: none;
909
+ }
910
+ .flip-card__back::before,
911
+ .flip-card__back-4digits::before {
912
+ position: relative;
913
+ overflow: hidden;
914
+ z-index: -1;
915
+ }
916
+
917
+ .flip .flip-card__back::before,
918
+ .flip .flip-card__back-4digits::before {
919
+ z-index: 1;
920
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
921
+ animation-fill-mode: both;
922
+ transform-origin: center bottom;
923
+ }
924
+
925
+ .flip .flip-card__bottom,
926
+ .flip .flip-card__bottom-4digits {
927
+ transform-origin: center top;
928
+ animation-fill-mode: both;
929
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
930
+ }
931
+ @keyframes flipTop {
932
+ 0% {
933
+ transform: rotateX(0deg);
934
+ z-index: 2;
935
+ }
936
+ 0%, 99% {
937
+ opacity: 1;
938
+ }
939
+ 100% {
940
+ transform: rotateX(-90deg);
941
+ opacity: 0;
942
+ }
943
+ }
944
+
945
+ @keyframes flipBottom {
946
+ 0%, 50% {
947
+ z-index: -1;
948
+ transform: rotateX(90deg);
949
+ opacity: 0;
950
+ }
951
+ 51% {
952
+ opacity: 1;
953
+ }
954
+ 100% {
955
+ opacity: 1;
956
+ transform: rotateX(0deg);
957
+ z-index: 5;
958
+ }
959
+ }
960
+
774
961
  .unika-calendar-box {
775
962
  position: relative;
776
963
  width: 325px !important;
@@ -1031,190 +1218,3 @@ button.swiper-pagination-bullet {
1031
1218
  padding: 0 0px;
1032
1219
  border-bottom: 1px solid
1033
1220
  }
1034
-
1035
-
1036
- .no-animation__card {
1037
- font-weight: 500;
1038
- font-size: var(--countdown-size, 2rem);
1039
- line-height: 1.5;
1040
- display: block;
1041
- color: var(--main-color, #EC685C);
1042
- }
1043
-
1044
- .flip-clock {
1045
- text-align: center;
1046
- perspective: 600px;
1047
- margin: 0 auto;
1048
- }
1049
-
1050
- .flip-clock *,
1051
- .flip-clock *:before,
1052
- .flip-clock *:after {
1053
- box-sizing: border-box;
1054
- }
1055
-
1056
- .flip-clock__piece {
1057
- display: inline-block;
1058
- margin: 0 0.2vw;
1059
- }
1060
-
1061
- @media (min-width: 1000px) {
1062
- .flip-clock__piece {
1063
- margin: 0 5px;
1064
- }
1065
- }
1066
-
1067
- .flip-clock__slot {
1068
- font-size: var(--label-size, 1rem);
1069
- line-height: 1.5;
1070
- display: block;
1071
- color: var(--label-color, #222222);
1072
- }
1073
-
1074
- .flip-card {
1075
- display: block;
1076
- position: relative;
1077
- padding-bottom: 0.72em; /* halfHeight */
1078
- font-size: var(--countdown-size, 2.25rem);
1079
- line-height: 0.95;
1080
- }
1081
-
1082
- @media (min-width: 1000px) {
1083
- .flip-clock__slot {
1084
- font-size: 1.2rem;
1085
- }
1086
-
1087
- .flip-card {
1088
- font-size: 3rem;
1089
- }
1090
- }
1091
-
1092
- .flip-card__top,
1093
- .flip-card__bottom,
1094
- .flip-card__back-bottom,
1095
- .flip-card__back::before,
1096
- .flip-card__back::after{
1097
- display: block;
1098
- height: 0.72em; /* halfHeight */
1099
- color: var(--main-color, #EC685C);
1100
- background: var(--main-flip-background-color, #222222);
1101
- padding: 0.23em 0.15em 0.4em;
1102
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1103
- backface-visibility: hidden;
1104
- -webkit-backface-visibility: hidden;
1105
- transform-style: preserve-3d;
1106
- width: 2.1em;
1107
- }
1108
-
1109
- .flip-card__top-4digits,
1110
- .flip-card__bottom-4digits,
1111
- .flip-card__back-bottom-4digits,
1112
- .flip-card__back-4digits::before,
1113
- .flip-card__back-4digits::after {
1114
- display: block;
1115
- height: 0.72em; /* halfHeight */
1116
- color: var(--main-color, #EC685C);
1117
- background: var(--main-flip-background-color, #222222);
1118
- padding: 0.23em 0.15em 0.4em;
1119
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1120
- backface-visibility: hidden;
1121
- -webkit-backface-visibility: hidden;
1122
- transform-style: preserve-3d;
1123
- width: 2.65em;
1124
- }
1125
-
1126
- .flip-card__bottom,
1127
- .flip-card__back-bottom,
1128
- .flip-card__bottom-4digits,
1129
- .flip-card__back-bottom-4digits {
1130
- color: var(--second-flip-color, #EC685C);
1131
- position: absolute;
1132
- top: 50%;
1133
- left: 0;
1134
- border-top: solid 1px var(--second-flip-background-color, #000);
1135
- background: var(--second-flip-background-color, #393939);
1136
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1137
- pointer-events: none;
1138
- overflow: hidden;
1139
- z-index: 2;
1140
- }
1141
-
1142
- .flip-card__back-bottom,
1143
- .flip-card__back-bottom-4digits {
1144
- z-index: 1;
1145
- }
1146
-
1147
- .flip-card__bottom::after,
1148
- .flip-card__back-bottom::after,
1149
- .flip-card__bottom-4digits::after,
1150
- .flip-card__back-bottom-4digits::after {
1151
- display: block;
1152
- margin-top: -0.72em; /* Negative halfHeight */
1153
- }
1154
- .flip-card__back::before,
1155
- .flip-card__bottom::after,
1156
- .flip-card__back-bottom::after,
1157
- .flip-card__back-4digits::before,
1158
- .flip-card__bottom-4digits::after,
1159
- .flip-card__back-bottom-4digits::after {
1160
- content: attr(data-value);
1161
- }
1162
-
1163
- .flip-card__back,
1164
- .flip-card__back-4digits {
1165
- position: absolute;
1166
- top: 0;
1167
- height: 100%;
1168
- left: 0%;
1169
- pointer-events: none;
1170
- }
1171
- .flip-card__back::before,
1172
- .flip-card__back-4digits::before {
1173
- position: relative;
1174
- overflow: hidden;
1175
- z-index: -1;
1176
- }
1177
-
1178
- .flip .flip-card__back::before,
1179
- .flip .flip-card__back-4digits::before {
1180
- z-index: 1;
1181
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1182
- animation-fill-mode: both;
1183
- transform-origin: center bottom;
1184
- }
1185
-
1186
- .flip .flip-card__bottom,
1187
- .flip .flip-card__bottom-4digits {
1188
- transform-origin: center top;
1189
- animation-fill-mode: both;
1190
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1191
- }
1192
- @keyframes flipTop {
1193
- 0% {
1194
- transform: rotateX(0deg);
1195
- z-index: 2;
1196
- }
1197
- 0%, 99% {
1198
- opacity: 1;
1199
- }
1200
- 100% {
1201
- transform: rotateX(-90deg);
1202
- opacity: 0;
1203
- }
1204
- }
1205
-
1206
- @keyframes flipBottom {
1207
- 0%, 50% {
1208
- z-index: -1;
1209
- transform: rotateX(90deg);
1210
- opacity: 0;
1211
- }
1212
- 51% {
1213
- opacity: 1;
1214
- }
1215
- 100% {
1216
- opacity: 1;
1217
- transform: rotateX(0deg);
1218
- z-index: 5;
1219
- }
1220
- }
@@ -16201,21 +16201,16 @@ var script$d = defineComponent({
16201
16201
  // todo axios for get data
16202
16202
  console.log(date);
16203
16203
  };
16204
- const calendarKey = ref(0);
16205
- const size = ref('scale(0.75)');
16206
- // 监听 props.language 的变化
16207
- watch(() => props.size, (newSize) => {
16208
- if (newSize == 'middle') {
16209
- size.value = "scale(0.855)";
16204
+ const size = computed(() => {
16205
+ if (props.size == 'middle') {
16206
+ return "scale(0.855)";
16210
16207
  }
16211
- else if (newSize == 'large') {
16212
- size.value = "scale(1)";
16208
+ else if (props.size == 'large') {
16209
+ return "scale(1)";
16213
16210
  }
16214
16211
  else {
16215
- size.value = "scale(0.75)";
16212
+ return "scale(0.75)";
16216
16213
  }
16217
- console.log(size.value);
16218
- calendarKey.value = calendarKey.value + 1;
16219
16214
  });
16220
16215
  return {
16221
16216
  styleProps,
@@ -16224,8 +16219,7 @@ var script$d = defineComponent({
16224
16219
  handleClick,
16225
16220
  getItemNumber,
16226
16221
  getMonthData,
16227
- size,
16228
- calendarKey
16222
+ size
16229
16223
  };
16230
16224
  }
16231
16225
  });
@@ -16243,7 +16237,7 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
16243
16237
  style: normalizeStyle$1({ ..._ctx.styleProps, transform: _ctx.size }),
16244
16238
  class: "uni-calendar-component inner-component"
16245
16239
  }, [
16246
- (openBlock(), createBlock(_component_Calendar, {
16240
+ createVNode(_component_Calendar, {
16247
16241
  ref: "calendarRef",
16248
16242
  weddingDate: _ctx.date,
16249
16243
  backgroundColor: _ctx.backgroundColor,
@@ -16254,8 +16248,7 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
16254
16248
  dateColor: _ctx.dateColor,
16255
16249
  heartColor: _ctx.heartColor,
16256
16250
  themeStyle: _ctx.themeStyle,
16257
- language: _ctx.language,
16258
- key: _ctx.calendarKey
16251
+ language: _ctx.language
16259
16252
  }, {
16260
16253
  default: withCtx((slotProps) => [
16261
16254
  (_ctx.checkItem(slotProps.item.date))
@@ -16263,7 +16256,7 @@ function render$e(_ctx, _cache, $props, $setup, $data, $options) {
16263
16256
  : createCommentVNode("v-if", true)
16264
16257
  ]),
16265
16258
  _: 1 /* STABLE */
16266
- }, 8 /* PROPS */, ["weddingDate", "backgroundColor", "themeColor", "borderRadius", "borderStyle", "borderWidth", "dateColor", "heartColor", "themeStyle", "language"]))
16259
+ }, 8 /* PROPS */, ["weddingDate", "backgroundColor", "themeColor", "borderRadius", "borderStyle", "borderWidth", "dateColor", "heartColor", "themeStyle", "language"])
16267
16260
  ], 4 /* STYLE */))
16268
16261
  }
16269
16262
 
@@ -16208,21 +16208,16 @@
16208
16208
  // todo axios for get data
16209
16209
  console.log(date);
16210
16210
  };
16211
- const calendarKey = vue.ref(0);
16212
- const size = vue.ref('scale(0.75)');
16213
- // 监听 props.language 的变化
16214
- vue.watch(() => props.size, (newSize) => {
16215
- if (newSize == 'middle') {
16216
- size.value = "scale(0.855)";
16211
+ const size = vue.computed(() => {
16212
+ if (props.size == 'middle') {
16213
+ return "scale(0.855)";
16217
16214
  }
16218
- else if (newSize == 'large') {
16219
- size.value = "scale(1)";
16215
+ else if (props.size == 'large') {
16216
+ return "scale(1)";
16220
16217
  }
16221
16218
  else {
16222
- size.value = "scale(0.75)";
16219
+ return "scale(0.75)";
16223
16220
  }
16224
- console.log(size.value);
16225
- calendarKey.value = calendarKey.value + 1;
16226
16221
  });
16227
16222
  return {
16228
16223
  styleProps,
@@ -16231,8 +16226,7 @@
16231
16226
  handleClick,
16232
16227
  getItemNumber,
16233
16228
  getMonthData,
16234
- size,
16235
- calendarKey
16229
+ size
16236
16230
  };
16237
16231
  }
16238
16232
  });
@@ -16250,7 +16244,7 @@
16250
16244
  style: vue.normalizeStyle({ ..._ctx.styleProps, transform: _ctx.size }),
16251
16245
  class: "uni-calendar-component inner-component"
16252
16246
  }, [
16253
- (vue.openBlock(), vue.createBlock(_component_Calendar, {
16247
+ vue.createVNode(_component_Calendar, {
16254
16248
  ref: "calendarRef",
16255
16249
  weddingDate: _ctx.date,
16256
16250
  backgroundColor: _ctx.backgroundColor,
@@ -16261,8 +16255,7 @@
16261
16255
  dateColor: _ctx.dateColor,
16262
16256
  heartColor: _ctx.heartColor,
16263
16257
  themeStyle: _ctx.themeStyle,
16264
- language: _ctx.language,
16265
- key: _ctx.calendarKey
16258
+ language: _ctx.language
16266
16259
  }, {
16267
16260
  default: vue.withCtx((slotProps) => [
16268
16261
  (_ctx.checkItem(slotProps.item.date))
@@ -16270,7 +16263,7 @@
16270
16263
  : vue.createCommentVNode("v-if", true)
16271
16264
  ]),
16272
16265
  _: 1 /* STABLE */
16273
- }, 8 /* PROPS */, ["weddingDate", "backgroundColor", "themeColor", "borderRadius", "borderStyle", "borderWidth", "dateColor", "heartColor", "themeStyle", "language"]))
16266
+ }, 8 /* PROPS */, ["weddingDate", "backgroundColor", "themeColor", "borderRadius", "borderStyle", "borderWidth", "dateColor", "heartColor", "themeStyle", "language"])
16274
16267
  ], 4 /* STYLE */))
16275
16268
  }
16276
16269
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.277",
3
+ "version": "1.0.278",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",