unika-components 1.0.246 → 1.0.248

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.
@@ -1,8 +1,18 @@
1
+ export declare const defaultStyles: string[];
1
2
  declare const _default: import("vue").DefineComponent<{
2
3
  [x: string]: any;
3
4
  }, {
4
5
  styleProps: import("vue").ComputedRef<Pick<any, string>>;
5
6
  handleClick: () => void;
7
+ maskStyle: import("vue").ComputedRef<{
8
+ WebkitMaskImage: string;
9
+ WebkitMaskRepeat: string;
10
+ WebkitMaskSize: string;
11
+ } | {
12
+ WebkitMaskImage?: undefined;
13
+ WebkitMaskRepeat?: undefined;
14
+ WebkitMaskSize?: undefined;
15
+ }>;
6
16
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
7
17
  [x: string]: any;
8
18
  }>>, {
@@ -1,5 +1,6 @@
1
1
  import { App } from 'vue';
2
2
  import UniText from './components/UniText';
3
+ import UniImage from './components/UniImage';
3
4
  import UniShape from './components/UniShape';
4
5
  import LongPage from './components/LongPage';
5
6
  import SwiperPage from './components/SwiperPage';
@@ -19,7 +20,7 @@ import UniBulidUp from './components/UniBulidUp';
19
20
  import UniTest from './components/UniTest';
20
21
  import UniSvg from './components/UniSvg';
21
22
  declare const install: (app: App) => void;
22
- export { UniText, UniShape, LongPage, SwiperPage, UniBackground, UniVideo, UniCalendar, UniCountdown, UniMap, UniCall, UniLike, UniEffect, UniRegisterForm, UniLotties, UniSwiper, UniButton, UniBulidUp, UniSvg, UniTest, install };
23
+ export { UniText, UniImage, UniShape, LongPage, SwiperPage, UniBackground, UniVideo, UniCalendar, UniCountdown, UniMap, UniCall, UniLike, UniEffect, UniRegisterForm, UniLotties, UniSwiper, UniButton, UniBulidUp, UniSvg, UniTest, install };
23
24
  declare const _default: {
24
25
  install: (app: App<any>) => void;
25
26
  };
@@ -1,4 +1,11 @@
1
1
 
2
+ .uni-image-component {
3
+ max-width: 100%;
4
+ }
5
+ .uni-image-mask-wrapper {
6
+ display: inline-block;
7
+ }
8
+
2
9
  h2.uni-text-component, p.uni-text-component {
3
10
  margin-bottom: 0;
4
11
  }
@@ -10,61 +17,6 @@ button.uni-text-component {
10
17
  box-sizing: border-box;
11
18
  white-space: pre-wrap;
12
19
  }
13
-
14
-
15
- .uni-calendar-component {
16
-
17
- }
18
- .slot-number {
19
- position: absolute;
20
- bottom: 2px;
21
- left: 7px;
22
- font-size: 12px;
23
- color: #666
24
- }
25
-
26
- .uni-video-component {
27
- position: relative;
28
- text-align: center;
29
- }
30
- .play-pause-button {
31
- position: absolute;
32
- top: 50%;
33
- left: 50%;
34
- transform: translate(-50%, -50%);
35
- cursor: pointer;
36
- font-size: 2rem;
37
- color: #fff;
38
- background: rgba(0, 0, 0, 0.6);
39
- border-radius: 50%;
40
- padding: 10px;
41
- transition: background 0.3s;
42
- }
43
- .play-pause-button:hover {
44
- background: rgba(0, 0, 0, 0.8);
45
- }
46
-
47
- .like-button {
48
- display: flex;
49
- flex-direction: column;
50
- align-items: center;
51
- cursor: pointer;
52
- }
53
-
54
- .icon-heart {
55
- font-size: 24px;
56
- color: #e74c3c;
57
- }
58
-
59
- .liked {
60
- color: #f00; /* 更改颜色以示已赞 */
61
- }
62
-
63
- .like-count {
64
- margin-top: 4px;
65
- font-size: 16px;
66
- color: #333;
67
- }
68
20
 
69
21
  .slide-guide {
70
22
  position: absolute;
@@ -139,32 +91,44 @@ body, html {
139
91
  }
140
92
  }
141
93
 
142
- .swiper-warp {
143
- width: 100%;
144
- height: 100%;
145
- }
94
+ .uni-video-component {
95
+ position: relative;
96
+ text-align: center;
97
+ }
98
+ .play-pause-button {
99
+ position: absolute;
100
+ top: 50%;
101
+ left: 50%;
102
+ transform: translate(-50%, -50%);
103
+ cursor: pointer;
104
+ font-size: 2rem;
105
+ color: #fff;
106
+ background: rgba(0, 0, 0, 0.6);
107
+ border-radius: 50%;
108
+ padding: 10px;
109
+ transition: background 0.3s;
110
+ }
111
+ .play-pause-button:hover {
112
+ background: rgba(0, 0, 0, 0.8);
113
+ }
146
114
 
147
- .swiper-slide-component {
148
- text-align: center;
149
- }
150
115
 
151
- .swiper-slide img {
152
- max-width: 100%;
153
- max-height: 100%;
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
154
125
  }
155
-
156
- .uni-svg-component {
157
- display: inline-block;
158
- }
159
126
 
160
127
  .effect {
161
128
  width: 100%;
162
129
  height: 100%;
163
130
  }
164
131
 
165
- .uni-build-up-component {
166
- }
167
-
168
132
  .ant-input-number {
169
133
  box-sizing: border-box;
170
134
  margin: 0;
@@ -199,6 +163,49 @@ body, html {
199
163
  margin-bottom: 0px;
200
164
  vertical-align: top;
201
165
  }
166
+
167
+ .like-button {
168
+ display: flex;
169
+ flex-direction: column;
170
+ align-items: center;
171
+ cursor: pointer;
172
+ }
173
+
174
+ .icon-heart {
175
+ font-size: 24px;
176
+ color: #e74c3c;
177
+ }
178
+
179
+ .liked {
180
+ color: #f00; /* 更改颜色以示已赞 */
181
+ }
182
+
183
+ .like-count {
184
+ margin-top: 4px;
185
+ font-size: 16px;
186
+ color: #333;
187
+ }
188
+
189
+ .uni-build-up-component {
190
+ }
191
+
192
+ .swiper-warp {
193
+ width: 100%;
194
+ height: 100%;
195
+ }
196
+
197
+ .swiper-slide-component {
198
+ text-align: center;
199
+ }
200
+
201
+ .swiper-slide img {
202
+ max-width: 100%;
203
+ max-height: 100%;
204
+ }
205
+
206
+ .uni-svg-component {
207
+ display: inline-block;
208
+ }
202
209
  /**
203
210
  * Swiper 6.8.4
204
211
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -747,91 +754,278 @@ button.swiper-pagination-bullet {
747
754
  backface-visibility: hidden;
748
755
  }
749
756
 
750
- .unika-calendar-box {
751
- position: relative;
752
- width: 325px !important;
753
- min-height: 325px !important;
754
- height: auto !important;
755
- }
756
- .unika-calendar-title {
757
- font-size: 25px;
758
- padding-bottom: 4px;
759
- }
760
- .unika-calendar-header {
761
- display: -webkit-box;
762
- display: -ms-flexbox;
763
- display: flex;
764
- -webkit-box-pack: justify;
765
- -ms-flex-pack: justify;
766
- justify-content: space-between;
767
- -webkit-box-align: end;
768
- -ms-flex-align: end;
769
- align-items: flex-end;
770
- line-height: 1;
771
- padding: 0 47px 20px;
772
- }
773
- .unika-calendar-header .disabled {
774
- pointer-events: none;
775
- color: #f0f0f0;
776
- }
777
- .unika-calendar-th {
778
- display: -webkit-box;
779
- display: -ms-flexbox;
780
- display: flex;
781
- -webkit-box-pack: start;
782
- -ms-flex-pack: start;
783
- justify-content: flex-start;
784
- height: 25px;
785
- line-height: 25px;
786
- padding: 0 10px;
787
- border-radius: 13px
757
+
758
+ .no-animation__card {
759
+ font-weight: 500;
760
+ font-size: var(--countdown-size, 2rem);
761
+ line-height: 1.5;
762
+ display: block;
763
+ color: var(--main-color, #EC685C);
788
764
  }
789
- .unika-calendar-th > * {
790
- width: 14.2%;
765
+
766
+ .flip-clock {
791
767
  text-align: center;
792
- color: #fff;
793
- font-size: 15px;
794
- }
795
- .unika-calendar-th > *:not(:first-child) {
796
- margin-left: 10px;
797
- }
798
- .unika-calendar-body {
799
- padding: 0;
800
- margin: 0;
801
- font-size: 0;
802
- padding: 5px 10px 0;
803
- text-align: left;
804
- }
805
- .unika-calendar-editor {
806
- font-size: 25px;
768
+ perspective: 600px;
769
+ margin: 0 auto;
807
770
  }
808
- .unika-calendar-editor span {
809
- position: relative;
810
- top: 2px;
811
- font-size: 57px;
771
+
772
+ .flip-clock *,
773
+ .flip-clock *:before,
774
+ .flip-clock *:after {
775
+ box-sizing: border-box;
812
776
  }
813
- .unika-calendar-day {
777
+
778
+ .flip-clock__piece {
814
779
  display: inline-block;
815
- width: 24px;
816
- height: 24px;
817
- line-height: 24px;
818
- text-align: center;
819
- font-size: 14px;
820
- position: absolute;
821
- border-radius: 50%;
780
+ margin: 0 0.2vw;
822
781
  }
823
- .unika-calendar-row {
824
- display: flex;
782
+
783
+ @media (min-width: 1000px) {
784
+ .flip-clock__piece {
785
+ margin: 0 5px;
786
+ }
825
787
  }
826
- .unika-calendar-row:not(:last-child) {
827
- margin-bottom: 10px;
788
+
789
+ .flip-clock__slot {
790
+ font-size: var(--label-size, 1rem);
791
+ line-height: 1.5;
792
+ display: block;
793
+ color: var(--label-color, #222222);
828
794
  }
829
- .unika-calendar-row > * {
830
- flex: 1;
831
- padding: 2px;
832
- height: 28px;
833
- box-sizing: border-box;
834
- position: relative;
795
+
796
+ .flip-card {
797
+ display: block;
798
+ position: relative;
799
+ padding-bottom: 0.72em; /* halfHeight */
800
+ font-size: var(--countdown-size, 2.25rem);
801
+ line-height: 0.95;
802
+ }
803
+
804
+ @media (min-width: 1000px) {
805
+ .flip-clock__slot {
806
+ font-size: 1.2rem;
807
+ }
808
+
809
+ .flip-card {
810
+ font-size: 3rem;
811
+ }
812
+ }
813
+
814
+ .flip-card__top,
815
+ .flip-card__bottom,
816
+ .flip-card__back-bottom,
817
+ .flip-card__back::before,
818
+ .flip-card__back::after{
819
+ display: block;
820
+ height: 0.72em; /* halfHeight */
821
+ color: var(--main-color, #EC685C);
822
+ background: var(--main-flip-background-color, #222222);
823
+ padding: 0.23em 0.15em 0.4em;
824
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
825
+ backface-visibility: hidden;
826
+ -webkit-backface-visibility: hidden;
827
+ transform-style: preserve-3d;
828
+ width: 2.1em;
829
+ }
830
+
831
+ .flip-card__top-4digits,
832
+ .flip-card__bottom-4digits,
833
+ .flip-card__back-bottom-4digits,
834
+ .flip-card__back-4digits::before,
835
+ .flip-card__back-4digits::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.65em;
846
+ }
847
+
848
+ .flip-card__bottom,
849
+ .flip-card__back-bottom,
850
+ .flip-card__bottom-4digits,
851
+ .flip-card__back-bottom-4digits {
852
+ color: var(--second-flip-color, #EC685C);
853
+ position: absolute;
854
+ top: 50%;
855
+ left: 0;
856
+ border-top: solid 1px var(--second-flip-background-color, #000);
857
+ background: var(--second-flip-background-color, #393939);
858
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
859
+ pointer-events: none;
860
+ overflow: hidden;
861
+ z-index: 2;
862
+ }
863
+
864
+ .flip-card__back-bottom,
865
+ .flip-card__back-bottom-4digits {
866
+ z-index: 1;
867
+ }
868
+
869
+ .flip-card__bottom::after,
870
+ .flip-card__back-bottom::after,
871
+ .flip-card__bottom-4digits::after,
872
+ .flip-card__back-bottom-4digits::after {
873
+ display: block;
874
+ margin-top: -0.72em; /* Negative halfHeight */
875
+ }
876
+ .flip-card__back::before,
877
+ .flip-card__bottom::after,
878
+ .flip-card__back-bottom::after,
879
+ .flip-card__back-4digits::before,
880
+ .flip-card__bottom-4digits::after,
881
+ .flip-card__back-bottom-4digits::after {
882
+ content: attr(data-value);
883
+ }
884
+
885
+ .flip-card__back,
886
+ .flip-card__back-4digits {
887
+ position: absolute;
888
+ top: 0;
889
+ height: 100%;
890
+ left: 0%;
891
+ pointer-events: none;
892
+ }
893
+ .flip-card__back::before,
894
+ .flip-card__back-4digits::before {
895
+ position: relative;
896
+ overflow: hidden;
897
+ z-index: -1;
898
+ }
899
+
900
+ .flip .flip-card__back::before,
901
+ .flip .flip-card__back-4digits::before {
902
+ z-index: 1;
903
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
904
+ animation-fill-mode: both;
905
+ transform-origin: center bottom;
906
+ }
907
+
908
+ .flip .flip-card__bottom,
909
+ .flip .flip-card__bottom-4digits {
910
+ transform-origin: center top;
911
+ animation-fill-mode: both;
912
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
913
+ }
914
+ @keyframes flipTop {
915
+ 0% {
916
+ transform: rotateX(0deg);
917
+ z-index: 2;
918
+ }
919
+ 0%, 99% {
920
+ opacity: 1;
921
+ }
922
+ 100% {
923
+ transform: rotateX(-90deg);
924
+ opacity: 0;
925
+ }
926
+ }
927
+
928
+ @keyframes flipBottom {
929
+ 0%, 50% {
930
+ z-index: -1;
931
+ transform: rotateX(90deg);
932
+ opacity: 0;
933
+ }
934
+ 51% {
935
+ opacity: 1;
936
+ }
937
+ 100% {
938
+ opacity: 1;
939
+ transform: rotateX(0deg);
940
+ z-index: 5;
941
+ }
942
+ }
943
+
944
+ .unika-calendar-box {
945
+ position: relative;
946
+ width: 325px !important;
947
+ min-height: 325px !important;
948
+ height: auto !important;
949
+ }
950
+ .unika-calendar-title {
951
+ font-size: 25px;
952
+ padding-bottom: 4px;
953
+ }
954
+ .unika-calendar-header {
955
+ display: -webkit-box;
956
+ display: -ms-flexbox;
957
+ display: flex;
958
+ -webkit-box-pack: justify;
959
+ -ms-flex-pack: justify;
960
+ justify-content: space-between;
961
+ -webkit-box-align: end;
962
+ -ms-flex-align: end;
963
+ align-items: flex-end;
964
+ line-height: 1;
965
+ padding: 0 47px 20px;
966
+ }
967
+ .unika-calendar-header .disabled {
968
+ pointer-events: none;
969
+ color: #f0f0f0;
970
+ }
971
+ .unika-calendar-th {
972
+ display: -webkit-box;
973
+ display: -ms-flexbox;
974
+ display: flex;
975
+ -webkit-box-pack: start;
976
+ -ms-flex-pack: start;
977
+ justify-content: flex-start;
978
+ height: 25px;
979
+ line-height: 25px;
980
+ padding: 0 10px;
981
+ border-radius: 13px
982
+ }
983
+ .unika-calendar-th > * {
984
+ width: 14.2%;
985
+ text-align: center;
986
+ color: #fff;
987
+ font-size: 15px;
988
+ }
989
+ .unika-calendar-th > *:not(:first-child) {
990
+ margin-left: 10px;
991
+ }
992
+ .unika-calendar-body {
993
+ padding: 0;
994
+ margin: 0;
995
+ font-size: 0;
996
+ padding: 5px 10px 0;
997
+ text-align: left;
998
+ }
999
+ .unika-calendar-editor {
1000
+ font-size: 25px;
1001
+ }
1002
+ .unika-calendar-editor span {
1003
+ position: relative;
1004
+ top: 2px;
1005
+ font-size: 57px;
1006
+ }
1007
+ .unika-calendar-day {
1008
+ display: inline-block;
1009
+ width: 24px;
1010
+ height: 24px;
1011
+ line-height: 24px;
1012
+ text-align: center;
1013
+ font-size: 14px;
1014
+ position: absolute;
1015
+ border-radius: 50%;
1016
+ }
1017
+ .unika-calendar-row {
1018
+ display: flex;
1019
+ }
1020
+ .unika-calendar-row:not(:last-child) {
1021
+ margin-bottom: 10px;
1022
+ }
1023
+ .unika-calendar-row > * {
1024
+ flex: 1;
1025
+ padding: 2px;
1026
+ height: 28px;
1027
+ box-sizing: border-box;
1028
+ position: relative;
835
1029
  }
836
1030
  /*.unika-calendar-row > *.color-grey {
837
1031
  background-color: #EBF1F9;
@@ -1006,190 +1200,3 @@ button.swiper-pagination-bullet {
1006
1200
  padding: 0 0px;
1007
1201
  border-bottom: 1px solid
1008
1202
  }
1009
-
1010
-
1011
- .no-animation__card {
1012
- font-weight: 500;
1013
- font-size: var(--countdown-size, 2rem);
1014
- line-height: 1.5;
1015
- display: block;
1016
- color: var(--main-color, #EC685C);
1017
- }
1018
-
1019
- .flip-clock {
1020
- text-align: center;
1021
- perspective: 600px;
1022
- margin: 0 auto;
1023
- }
1024
-
1025
- .flip-clock *,
1026
- .flip-clock *:before,
1027
- .flip-clock *:after {
1028
- box-sizing: border-box;
1029
- }
1030
-
1031
- .flip-clock__piece {
1032
- display: inline-block;
1033
- margin: 0 0.2vw;
1034
- }
1035
-
1036
- @media (min-width: 1000px) {
1037
- .flip-clock__piece {
1038
- margin: 0 5px;
1039
- }
1040
- }
1041
-
1042
- .flip-clock__slot {
1043
- font-size: var(--label-size, 1rem);
1044
- line-height: 1.5;
1045
- display: block;
1046
- color: var(--label-color, #222222);
1047
- }
1048
-
1049
- .flip-card {
1050
- display: block;
1051
- position: relative;
1052
- padding-bottom: 0.72em; /* halfHeight */
1053
- font-size: var(--countdown-size, 2.25rem);
1054
- line-height: 0.95;
1055
- }
1056
-
1057
- @media (min-width: 1000px) {
1058
- .flip-clock__slot {
1059
- font-size: 1.2rem;
1060
- }
1061
-
1062
- .flip-card {
1063
- font-size: 3rem;
1064
- }
1065
- }
1066
-
1067
- .flip-card__top,
1068
- .flip-card__bottom,
1069
- .flip-card__back-bottom,
1070
- .flip-card__back::before,
1071
- .flip-card__back::after{
1072
- display: block;
1073
- height: 0.72em; /* halfHeight */
1074
- color: var(--main-color, #EC685C);
1075
- background: var(--main-flip-background-color, #222222);
1076
- padding: 0.23em 0.15em 0.4em;
1077
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1078
- backface-visibility: hidden;
1079
- -webkit-backface-visibility: hidden;
1080
- transform-style: preserve-3d;
1081
- width: 2.1em;
1082
- }
1083
-
1084
- .flip-card__top-4digits,
1085
- .flip-card__bottom-4digits,
1086
- .flip-card__back-bottom-4digits,
1087
- .flip-card__back-4digits::before,
1088
- .flip-card__back-4digits::after {
1089
- display: block;
1090
- height: 0.72em; /* halfHeight */
1091
- color: var(--main-color, #EC685C);
1092
- background: var(--main-flip-background-color, #222222);
1093
- padding: 0.23em 0.15em 0.4em;
1094
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1095
- backface-visibility: hidden;
1096
- -webkit-backface-visibility: hidden;
1097
- transform-style: preserve-3d;
1098
- width: 2.65em;
1099
- }
1100
-
1101
- .flip-card__bottom,
1102
- .flip-card__back-bottom,
1103
- .flip-card__bottom-4digits,
1104
- .flip-card__back-bottom-4digits {
1105
- color: var(--second-flip-color, #EC685C);
1106
- position: absolute;
1107
- top: 50%;
1108
- left: 0;
1109
- border-top: solid 1px var(--second-flip-background-color, #000);
1110
- background: var(--second-flip-background-color, #393939);
1111
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1112
- pointer-events: none;
1113
- overflow: hidden;
1114
- z-index: 2;
1115
- }
1116
-
1117
- .flip-card__back-bottom,
1118
- .flip-card__back-bottom-4digits {
1119
- z-index: 1;
1120
- }
1121
-
1122
- .flip-card__bottom::after,
1123
- .flip-card__back-bottom::after,
1124
- .flip-card__bottom-4digits::after,
1125
- .flip-card__back-bottom-4digits::after {
1126
- display: block;
1127
- margin-top: -0.72em; /* Negative halfHeight */
1128
- }
1129
- .flip-card__back::before,
1130
- .flip-card__bottom::after,
1131
- .flip-card__back-bottom::after,
1132
- .flip-card__back-4digits::before,
1133
- .flip-card__bottom-4digits::after,
1134
- .flip-card__back-bottom-4digits::after {
1135
- content: attr(data-value);
1136
- }
1137
-
1138
- .flip-card__back,
1139
- .flip-card__back-4digits {
1140
- position: absolute;
1141
- top: 0;
1142
- height: 100%;
1143
- left: 0%;
1144
- pointer-events: none;
1145
- }
1146
- .flip-card__back::before,
1147
- .flip-card__back-4digits::before {
1148
- position: relative;
1149
- overflow: hidden;
1150
- z-index: -1;
1151
- }
1152
-
1153
- .flip .flip-card__back::before,
1154
- .flip .flip-card__back-4digits::before {
1155
- z-index: 1;
1156
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1157
- animation-fill-mode: both;
1158
- transform-origin: center bottom;
1159
- }
1160
-
1161
- .flip .flip-card__bottom,
1162
- .flip .flip-card__bottom-4digits {
1163
- transform-origin: center top;
1164
- animation-fill-mode: both;
1165
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1166
- }
1167
- @keyframes flipTop {
1168
- 0% {
1169
- transform: rotateX(0deg);
1170
- z-index: 2;
1171
- }
1172
- 0%, 99% {
1173
- opacity: 1;
1174
- }
1175
- 100% {
1176
- transform: rotateX(-90deg);
1177
- opacity: 0;
1178
- }
1179
- }
1180
-
1181
- @keyframes flipBottom {
1182
- 0%, 50% {
1183
- z-index: -1;
1184
- transform: rotateX(90deg);
1185
- opacity: 0;
1186
- }
1187
- 51% {
1188
- opacity: 1;
1189
- }
1190
- 100% {
1191
- opacity: 1;
1192
- transform: rotateX(0deg);
1193
- z-index: 5;
1194
- }
1195
- }
@@ -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, 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';
1
+ import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle as normalizeStyle$1, withCtx, createTextVNode, toDisplayString, createElementBlock, createElementVNode, Fragment, renderList, normalizeProps, guardReactiveProps, h as h$2, ref, onUpdated, watch, nextTick as nextTick$1, onMounted, onBeforeUnmount, onBeforeUpdate, resolveComponent, createVNode, normalizeClass, 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$n, TransitionGroup } from 'vue';
2
2
  import crypto from 'crypto';
3
3
 
4
4
  /** Detect free variable `global` from Node.js. */
@@ -5350,9 +5350,9 @@ const transformToComponentProps = (props, extraProps) => {
5350
5350
  }
5351
5351
  };
5352
5352
 
5353
- const defaultStyles$c = without$1(Object.keys(textDefaultProps), 'actionType', 'url', 'text');
5353
+ const defaultStyles$d = without$1(Object.keys(textDefaultProps), 'actionType', 'url', 'text');
5354
5354
  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
5355
- const useStylePick = (props, pickStyles = defaultStyles$c) => {
5355
+ const useStylePick = (props, pickStyles = defaultStyles$d) => {
5356
5356
  return computed(() => pick$1(props, pickStyles));
5357
5357
  };
5358
5358
 
@@ -5373,12 +5373,12 @@ const extraProps$1 = {
5373
5373
  },
5374
5374
  ...isEditingProp
5375
5375
  };
5376
- const defaultProps$f = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps$1);
5376
+ const defaultProps$g = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps$1);
5377
5377
  // array that contains style props
5378
- var script$k = defineComponent({
5378
+ var script$l = defineComponent({
5379
5379
  name: 'uni-text',
5380
5380
  props: {
5381
- ...defaultProps$f
5381
+ ...defaultProps$g
5382
5382
  },
5383
5383
  setup(props) {
5384
5384
  const styleProps = useStylePick(props);
@@ -5390,7 +5390,7 @@ var script$k = defineComponent({
5390
5390
  }
5391
5391
  });
5392
5392
 
5393
- function render$l(_ctx, _cache, $props, $setup, $data, $options) {
5393
+ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
5394
5394
  return (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
5395
5395
  onClick: withModifiers(_ctx.handleClick, ["prevent"]),
5396
5396
  style: normalizeStyle$1(_ctx.styleProps),
@@ -5403,9 +5403,65 @@ function render$l(_ctx, _cache, $props, $setup, $data, $options) {
5403
5403
  }, 8 /* PROPS */, ["onClick", "style"]))
5404
5404
  }
5405
5405
 
5406
+ script$l.render = render$m;
5407
+ script$l.__scopeId = "data-v-55ed80cb";
5408
+ script$l.__file = "src/components/UniText/UniText.vue";
5409
+
5410
+ script$l.install = (app) => {
5411
+ app.component(script$l.name, script$l);
5412
+ };
5413
+
5414
+ const defaultProps$f = transformToComponentProps(componentsDefaultProps['uni-image'].props, isEditingProp);
5415
+ const defaultStyles$c = without$1(Object.keys(imageDefaultProps), 'maskImage', 'imageSrc');
5416
+ // array that contains style props
5417
+ var script$k = defineComponent({
5418
+ name: 'uni-image',
5419
+ props: {
5420
+ ...defaultProps$f
5421
+ },
5422
+ setup(props) {
5423
+ const styleProps = useStylePick(props, defaultStyles$c);
5424
+ const handleClick = useComponentClick(props);
5425
+ const maskStyle = computed(() => {
5426
+ return props.maskImage
5427
+ ? {
5428
+ WebkitMaskImage: `url(${props.maskImage})`,
5429
+ WebkitMaskRepeat: 'no-repeat',
5430
+ WebkitMaskSize: 'contain'
5431
+ }
5432
+ : {};
5433
+ });
5434
+ return {
5435
+ styleProps,
5436
+ handleClick,
5437
+ maskStyle
5438
+ };
5439
+ }
5440
+ });
5441
+
5442
+ const _hoisted_1$b = ["src"];
5443
+
5444
+ function render$l(_ctx, _cache, $props, $setup, $data, $options) {
5445
+ return (openBlock(), createElementBlock("div", {
5446
+ style: normalizeStyle$1(_ctx.styleProps),
5447
+ class: "uni-image-mask-wrapper uni-image-component inner-component",
5448
+ draggable: false,
5449
+ onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"]))
5450
+ }, [
5451
+ createElementVNode("div", {
5452
+ style: normalizeStyle$1({ ..._ctx.maskStyle, width: '100%', height: '100%' })
5453
+ }, [
5454
+ createElementVNode("img", {
5455
+ src: _ctx.imageSrc,
5456
+ style: {"width":"100%","height":"100%"}
5457
+ }, null, 8 /* PROPS */, _hoisted_1$b)
5458
+ ], 4 /* STYLE */)
5459
+ ], 4 /* STYLE */))
5460
+ }
5461
+
5406
5462
  script$k.render = render$l;
5407
- script$k.__scopeId = "data-v-55ed80cb";
5408
- script$k.__file = "src/components/UniText/UniText.vue";
5463
+ script$k.__scopeId = "data-v-03caca2f";
5464
+ script$k.__file = "src/components/UniImage/UniImage.vue";
5409
5465
 
5410
5466
  script$k.install = (app) => {
5411
5467
  app.component(script$k.name, script$k);
@@ -13155,7 +13211,7 @@ function render$i(_ctx, _cache, $props, $setup, $data, $options) {
13155
13211
  id: `component-${item.id}`,
13156
13212
  style: {"width":"100%","height":"100%"}
13157
13213
  }, [
13158
- (item.name != 'uni-build-up')
13214
+ (item.name != 'uni-build-up' && !item.isHidden)
13159
13215
  ? (openBlock(), createBlock(resolveDynamicComponent(item.name), normalizeProps(mergeProps({ key: 0 }, item.props)), null, 16 /* FULL_PROPS */))
13160
13216
  : createCommentVNode("v-if", true)
13161
13217
  ], 8 /* PROPS */, _hoisted_2$3))
@@ -44764,7 +44820,7 @@ const WaveEffect = defineComponent({
44764
44820
  var _a;
44765
44821
  const holder = (_a = divRef.value) === null || _a === void 0 ? void 0 : _a.parentElement;
44766
44822
  if (holder) {
44767
- render$m(null, holder);
44823
+ render$n(null, holder);
44768
44824
  if (holder.parentElement) {
44769
44825
  holder.parentElement.removeChild(holder);
44770
44826
  }
@@ -44837,7 +44893,7 @@ function showWaveEffect(node, className) {
44837
44893
  holder.style.left = `0px`;
44838
44894
  holder.style.top = `0px`;
44839
44895
  node === null || node === void 0 ? void 0 : node.insertBefore(holder, node === null || node === void 0 ? void 0 : node.firstChild);
44840
- render$m(createVNode(WaveEffect, {
44896
+ render$n(createVNode(WaveEffect, {
44841
44897
  "target": node,
44842
44898
  "className": className
44843
44899
  }, null), holder);
@@ -75936,8 +75992,8 @@ script.install = (app) => {
75936
75992
 
75937
75993
  // export { textDefaultProps , textStylePropNames, TextComponentProps,
75938
75994
  const components = [
75995
+ script$l,
75939
75996
  script$k,
75940
- // UniImage,
75941
75997
  script$j,
75942
75998
  script$i,
75943
75999
  script$h,
@@ -75969,4 +76025,4 @@ var index = {
75969
76025
  install
75970
76026
  };
75971
76027
 
75972
- export { script$i as LongPage, script$h as SwiperPage, script$g as UniBackground, script$2 as UniBulidUp, script$3 as UniButton, script$d as UniCalendar, script$9 as UniCall, script$b as UniCountdown, script$7 as UniEffect, script$8 as UniLike, script$5 as UniLotties, script$a as UniMap, script$6 as UniRegisterForm, script$j as UniShape, script as UniSvg, script$4 as UniSwiper, script$1 as UniTest, script$k as UniText, script$f as UniVideo, index as default, install };
76028
+ export { script$i as LongPage, script$h as SwiperPage, script$g as UniBackground, script$2 as UniBulidUp, script$3 as UniButton, script$d as UniCalendar, script$9 as UniCall, script$b as UniCountdown, script$7 as UniEffect, script$k as UniImage, script$8 as UniLike, script$5 as UniLotties, script$a as UniMap, script$6 as UniRegisterForm, script$j as UniShape, script as UniSvg, script$4 as UniSwiper, script$1 as UniTest, script$l as UniText, script$f as UniVideo, index as default, install };
@@ -5357,9 +5357,9 @@
5357
5357
  }
5358
5358
  };
5359
5359
 
5360
- const defaultStyles$c = without$1(Object.keys(textDefaultProps), 'actionType', 'url', 'text');
5360
+ const defaultStyles$d = without$1(Object.keys(textDefaultProps), 'actionType', 'url', 'text');
5361
5361
  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
5362
- const useStylePick = (props, pickStyles = defaultStyles$c) => {
5362
+ const useStylePick = (props, pickStyles = defaultStyles$d) => {
5363
5363
  return vue.computed(() => pick$1(props, pickStyles));
5364
5364
  };
5365
5365
 
@@ -5380,12 +5380,12 @@
5380
5380
  },
5381
5381
  ...isEditingProp
5382
5382
  };
5383
- const defaultProps$f = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps$1);
5383
+ const defaultProps$g = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps$1);
5384
5384
  // array that contains style props
5385
- var script$k = vue.defineComponent({
5385
+ var script$l = vue.defineComponent({
5386
5386
  name: 'uni-text',
5387
5387
  props: {
5388
- ...defaultProps$f
5388
+ ...defaultProps$g
5389
5389
  },
5390
5390
  setup(props) {
5391
5391
  const styleProps = useStylePick(props);
@@ -5397,7 +5397,7 @@
5397
5397
  }
5398
5398
  });
5399
5399
 
5400
- function render$l(_ctx, _cache, $props, $setup, $data, $options) {
5400
+ function render$m(_ctx, _cache, $props, $setup, $data, $options) {
5401
5401
  return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
5402
5402
  onClick: vue.withModifiers(_ctx.handleClick, ["prevent"]),
5403
5403
  style: vue.normalizeStyle(_ctx.styleProps),
@@ -5410,9 +5410,65 @@
5410
5410
  }, 8 /* PROPS */, ["onClick", "style"]))
5411
5411
  }
5412
5412
 
5413
+ script$l.render = render$m;
5414
+ script$l.__scopeId = "data-v-55ed80cb";
5415
+ script$l.__file = "src/components/UniText/UniText.vue";
5416
+
5417
+ script$l.install = (app) => {
5418
+ app.component(script$l.name, script$l);
5419
+ };
5420
+
5421
+ const defaultProps$f = transformToComponentProps(componentsDefaultProps['uni-image'].props, isEditingProp);
5422
+ const defaultStyles$c = without$1(Object.keys(imageDefaultProps), 'maskImage', 'imageSrc');
5423
+ // array that contains style props
5424
+ var script$k = vue.defineComponent({
5425
+ name: 'uni-image',
5426
+ props: {
5427
+ ...defaultProps$f
5428
+ },
5429
+ setup(props) {
5430
+ const styleProps = useStylePick(props, defaultStyles$c);
5431
+ const handleClick = useComponentClick(props);
5432
+ const maskStyle = vue.computed(() => {
5433
+ return props.maskImage
5434
+ ? {
5435
+ WebkitMaskImage: `url(${props.maskImage})`,
5436
+ WebkitMaskRepeat: 'no-repeat',
5437
+ WebkitMaskSize: 'contain'
5438
+ }
5439
+ : {};
5440
+ });
5441
+ return {
5442
+ styleProps,
5443
+ handleClick,
5444
+ maskStyle
5445
+ };
5446
+ }
5447
+ });
5448
+
5449
+ const _hoisted_1$b = ["src"];
5450
+
5451
+ function render$l(_ctx, _cache, $props, $setup, $data, $options) {
5452
+ return (vue.openBlock(), vue.createElementBlock("div", {
5453
+ style: vue.normalizeStyle(_ctx.styleProps),
5454
+ class: "uni-image-mask-wrapper uni-image-component inner-component",
5455
+ draggable: false,
5456
+ onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"]))
5457
+ }, [
5458
+ vue.createElementVNode("div", {
5459
+ style: vue.normalizeStyle({ ..._ctx.maskStyle, width: '100%', height: '100%' })
5460
+ }, [
5461
+ vue.createElementVNode("img", {
5462
+ src: _ctx.imageSrc,
5463
+ style: {"width":"100%","height":"100%"}
5464
+ }, null, 8 /* PROPS */, _hoisted_1$b)
5465
+ ], 4 /* STYLE */)
5466
+ ], 4 /* STYLE */))
5467
+ }
5468
+
5413
5469
  script$k.render = render$l;
5414
- script$k.__scopeId = "data-v-55ed80cb";
5415
- script$k.__file = "src/components/UniText/UniText.vue";
5470
+ script$k.__scopeId = "data-v-03caca2f";
5471
+ script$k.__file = "src/components/UniImage/UniImage.vue";
5416
5472
 
5417
5473
  script$k.install = (app) => {
5418
5474
  app.component(script$k.name, script$k);
@@ -13162,7 +13218,7 @@
13162
13218
  id: `component-${item.id}`,
13163
13219
  style: {"width":"100%","height":"100%"}
13164
13220
  }, [
13165
- (item.name != 'uni-build-up')
13221
+ (item.name != 'uni-build-up' && !item.isHidden)
13166
13222
  ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.normalizeProps(vue.mergeProps({ key: 0 }, item.props)), null, 16 /* FULL_PROPS */))
13167
13223
  : vue.createCommentVNode("v-if", true)
13168
13224
  ], 8 /* PROPS */, _hoisted_2$3))
@@ -75943,8 +75999,8 @@ summary tabindex target title type usemap value width wmode wrap`;
75943
75999
 
75944
76000
  // export { textDefaultProps , textStylePropNames, TextComponentProps,
75945
76001
  const components = [
76002
+ script$l,
75946
76003
  script$k,
75947
- // UniImage,
75948
76004
  script$j,
75949
76005
  script$i,
75950
76006
  script$h,
@@ -75985,6 +76041,7 @@ summary tabindex target title type usemap value width wmode wrap`;
75985
76041
  exports.UniCall = script$9;
75986
76042
  exports.UniCountdown = script$b;
75987
76043
  exports.UniEffect = script$7;
76044
+ exports.UniImage = script$k;
75988
76045
  exports.UniLike = script$8;
75989
76046
  exports.UniLotties = script$5;
75990
76047
  exports.UniMap = script$a;
@@ -75993,7 +76050,7 @@ summary tabindex target title type usemap value width wmode wrap`;
75993
76050
  exports.UniSvg = script;
75994
76051
  exports.UniSwiper = script$4;
75995
76052
  exports.UniTest = script$1;
75996
- exports.UniText = script$k;
76053
+ exports.UniText = script$l;
75997
76054
  exports.UniVideo = script$f;
75998
76055
  exports["default"] = index;
75999
76056
  exports.install = install;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.246",
3
+ "version": "1.0.248",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",