unika-components 1.0.121 → 1.0.123

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.
@@ -19,6 +19,7 @@ declare const _default: import("vue").DefineComponent<{
19
19
  effect: string;
20
20
  upArrow: import("vue").Ref<boolean>;
21
21
  slideChangeTransitionEnd: (e: any) => void;
22
+ slideClasses: (index: number) => string[];
22
23
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
23
24
  work: {
24
25
  type: PropType<WorkData>;
@@ -3,6 +3,39 @@
3
3
  max-width: 100%;
4
4
  }
5
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
+ .uni-video-component {
19
+ position: relative;
20
+ text-align: center;
21
+ }
22
+ .play-pause-button {
23
+ position: absolute;
24
+ top: 50%;
25
+ left: 50%;
26
+ transform: translate(-50%, -50%);
27
+ cursor: pointer;
28
+ font-size: 2rem;
29
+ color: #fff;
30
+ background: rgba(0, 0, 0, 0.6);
31
+ border-radius: 50%;
32
+ padding: 10px;
33
+ transition: background 0.3s;
34
+ }
35
+ .play-pause-button:hover {
36
+ background: rgba(0, 0, 0, 0.8);
37
+ }
38
+
6
39
  .slide-guide {
7
40
  position: absolute;
8
41
  bottom: 90px;
@@ -76,38 +109,13 @@ body, html {
76
109
  }
77
110
  }
78
111
 
79
- .uni-video-component {
80
- position: relative;
81
- text-align: center;
82
- }
83
- .play-pause-button {
84
- position: absolute;
85
- top: 50%;
86
- left: 50%;
87
- transform: translate(-50%, -50%);
88
- cursor: pointer;
89
- font-size: 2rem;
90
- color: #fff;
91
- background: rgba(0, 0, 0, 0.6);
92
- border-radius: 50%;
93
- padding: 10px;
94
- transition: background 0.3s;
95
- }
96
- .play-pause-button:hover {
97
- background: rgba(0, 0, 0, 0.8);
98
- }
99
-
100
- h2.uni-text-component, p.uni-text-component {
101
- margin-bottom: 0;
102
- }
103
- button.uni-text-component {
104
- padding: 5px 10px;
105
- cursor: pointer;
106
- }
107
- .uni-text-component {
108
- box-sizing: border-box;
109
- white-space: pre-wrap;
110
- }
112
+ .slot-number {
113
+ position: absolute;
114
+ bottom: 2px;
115
+ left: 7px;
116
+ font-size: 12px;
117
+ color: #666
118
+ }
111
119
 
112
120
  .like-button {
113
121
  display: flex;
@@ -131,19 +139,6 @@ button.uni-text-component {
131
139
  color: #333;
132
140
  }
133
141
 
134
- .slot-number {
135
- position: absolute;
136
- bottom: 2px;
137
- left: 7px;
138
- font-size: 12px;
139
- color: #666
140
- }
141
-
142
- .effect {
143
- width: 100%;
144
- height: 100%;
145
- }
146
-
147
142
  .ant-input-number {
148
143
  box-sizing: border-box;
149
144
  margin: 0;
@@ -192,6 +187,11 @@ button.uni-text-component {
192
187
  max-width: 100%;
193
188
  max-height: 100%;
194
189
  }
190
+
191
+ .effect {
192
+ width: 100%;
193
+ height: 100%;
194
+ }
195
195
  /**
196
196
  * Swiper 6.8.4
197
197
  * Most modern mobile touch slider and framework with hardware accelerated transitions
@@ -740,6 +740,193 @@ button.swiper-pagination-bullet {
740
740
  backface-visibility: hidden;
741
741
  }
742
742
 
743
+
744
+ .no-animation__card {
745
+ font-weight: 500;
746
+ font-size: var(--countdown-size, 2rem);
747
+ line-height: 1.5;
748
+ display: block;
749
+ color: var(--main-color, #EC685C);
750
+ }
751
+
752
+ .flip-clock {
753
+ text-align: center;
754
+ perspective: 600px;
755
+ margin: 0 auto;
756
+ }
757
+
758
+ .flip-clock *,
759
+ .flip-clock *:before,
760
+ .flip-clock *:after {
761
+ box-sizing: border-box;
762
+ }
763
+
764
+ .flip-clock__piece {
765
+ display: inline-block;
766
+ margin: 0 0.2vw;
767
+ }
768
+
769
+ @media (min-width: 1000px) {
770
+ .flip-clock__piece {
771
+ margin: 0 5px;
772
+ }
773
+ }
774
+
775
+ .flip-clock__slot {
776
+ font-size: var(--label-size, 1rem);
777
+ line-height: 1.5;
778
+ display: block;
779
+ color: var(--label-color, #222222);
780
+ }
781
+
782
+ .flip-card {
783
+ display: block;
784
+ position: relative;
785
+ padding-bottom: 0.72em; /* halfHeight */
786
+ font-size: var(--countdown-size, 2.25rem);
787
+ line-height: 0.95;
788
+ }
789
+
790
+ @media (min-width: 1000px) {
791
+ .flip-clock__slot {
792
+ font-size: 1.2rem;
793
+ }
794
+
795
+ .flip-card {
796
+ font-size: 3rem;
797
+ }
798
+ }
799
+
800
+ .flip-card__top,
801
+ .flip-card__bottom,
802
+ .flip-card__back-bottom,
803
+ .flip-card__back::before,
804
+ .flip-card__back::after{
805
+ display: block;
806
+ height: 0.72em; /* halfHeight */
807
+ color: var(--main-color, #EC685C);
808
+ background: var(--main-flip-background-color, #222222);
809
+ padding: 0.23em 0.15em 0.4em;
810
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
811
+ backface-visibility: hidden;
812
+ -webkit-backface-visibility: hidden;
813
+ transform-style: preserve-3d;
814
+ width: 2.1em;
815
+ }
816
+
817
+ .flip-card__top-4digits,
818
+ .flip-card__bottom-4digits,
819
+ .flip-card__back-bottom-4digits,
820
+ .flip-card__back-4digits::before,
821
+ .flip-card__back-4digits::after {
822
+ display: block;
823
+ height: 0.72em; /* halfHeight */
824
+ color: var(--main-color, #EC685C);
825
+ background: var(--main-flip-background-color, #222222);
826
+ padding: 0.23em 0.15em 0.4em;
827
+ border-radius: 0.15em 0.15em 0 0; /* borderRadius */
828
+ backface-visibility: hidden;
829
+ -webkit-backface-visibility: hidden;
830
+ transform-style: preserve-3d;
831
+ width: 2.65em;
832
+ }
833
+
834
+ .flip-card__bottom,
835
+ .flip-card__back-bottom,
836
+ .flip-card__bottom-4digits,
837
+ .flip-card__back-bottom-4digits {
838
+ color: var(--second-flip-color, #EC685C);
839
+ position: absolute;
840
+ top: 50%;
841
+ left: 0;
842
+ border-top: solid 1px var(--second-flip-background-color, #000);
843
+ background: var(--second-flip-background-color, #393939);
844
+ border-radius: 0 0 0.15em 0.15em; /* borderRadius */
845
+ pointer-events: none;
846
+ overflow: hidden;
847
+ z-index: 2;
848
+ }
849
+
850
+ .flip-card__back-bottom,
851
+ .flip-card__back-bottom-4digits {
852
+ z-index: 1;
853
+ }
854
+
855
+ .flip-card__bottom::after,
856
+ .flip-card__back-bottom::after,
857
+ .flip-card__bottom-4digits::after,
858
+ .flip-card__back-bottom-4digits::after {
859
+ display: block;
860
+ margin-top: -0.72em; /* Negative halfHeight */
861
+ }
862
+ .flip-card__back::before,
863
+ .flip-card__bottom::after,
864
+ .flip-card__back-bottom::after,
865
+ .flip-card__back-4digits::before,
866
+ .flip-card__bottom-4digits::after,
867
+ .flip-card__back-bottom-4digits::after {
868
+ content: attr(data-value);
869
+ }
870
+
871
+ .flip-card__back,
872
+ .flip-card__back-4digits {
873
+ position: absolute;
874
+ top: 0;
875
+ height: 100%;
876
+ left: 0%;
877
+ pointer-events: none;
878
+ }
879
+ .flip-card__back::before,
880
+ .flip-card__back-4digits::before {
881
+ position: relative;
882
+ overflow: hidden;
883
+ z-index: -1;
884
+ }
885
+
886
+ .flip .flip-card__back::before,
887
+ .flip .flip-card__back-4digits::before {
888
+ z-index: 1;
889
+ animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
890
+ animation-fill-mode: both;
891
+ transform-origin: center bottom;
892
+ }
893
+
894
+ .flip .flip-card__bottom,
895
+ .flip .flip-card__bottom-4digits {
896
+ transform-origin: center top;
897
+ animation-fill-mode: both;
898
+ animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
899
+ }
900
+ @keyframes flipTop {
901
+ 0% {
902
+ transform: rotateX(0deg);
903
+ z-index: 2;
904
+ }
905
+ 0%, 99% {
906
+ opacity: 1;
907
+ }
908
+ 100% {
909
+ transform: rotateX(-90deg);
910
+ opacity: 0;
911
+ }
912
+ }
913
+
914
+ @keyframes flipBottom {
915
+ 0%, 50% {
916
+ z-index: -1;
917
+ transform: rotateX(90deg);
918
+ opacity: 0;
919
+ }
920
+ 51% {
921
+ opacity: 1;
922
+ }
923
+ 100% {
924
+ opacity: 1;
925
+ transform: rotateX(0deg);
926
+ z-index: 5;
927
+ }
928
+ }
929
+
743
930
  .unika-calendar-title {
744
931
  font-size: 25px;
745
932
  padding-bottom: 4px;
@@ -991,190 +1178,3 @@ button.swiper-pagination-bullet {
991
1178
  padding: 0 0px;
992
1179
  border-bottom: 1px solid
993
1180
  }
994
-
995
-
996
- .no-animation__card {
997
- font-weight: 500;
998
- font-size: var(--countdown-size, 2rem);
999
- line-height: 1.5;
1000
- display: block;
1001
- color: var(--main-color, #EC685C);
1002
- }
1003
-
1004
- .flip-clock {
1005
- text-align: center;
1006
- perspective: 600px;
1007
- margin: 0 auto;
1008
- }
1009
-
1010
- .flip-clock *,
1011
- .flip-clock *:before,
1012
- .flip-clock *:after {
1013
- box-sizing: border-box;
1014
- }
1015
-
1016
- .flip-clock__piece {
1017
- display: inline-block;
1018
- margin: 0 0.2vw;
1019
- }
1020
-
1021
- @media (min-width: 1000px) {
1022
- .flip-clock__piece {
1023
- margin: 0 5px;
1024
- }
1025
- }
1026
-
1027
- .flip-clock__slot {
1028
- font-size: var(--label-size, 1rem);
1029
- line-height: 1.5;
1030
- display: block;
1031
- color: var(--label-color, #222222);
1032
- }
1033
-
1034
- .flip-card {
1035
- display: block;
1036
- position: relative;
1037
- padding-bottom: 0.72em; /* halfHeight */
1038
- font-size: var(--countdown-size, 2.25rem);
1039
- line-height: 0.95;
1040
- }
1041
-
1042
- @media (min-width: 1000px) {
1043
- .flip-clock__slot {
1044
- font-size: 1.2rem;
1045
- }
1046
-
1047
- .flip-card {
1048
- font-size: 3rem;
1049
- }
1050
- }
1051
-
1052
- .flip-card__top,
1053
- .flip-card__bottom,
1054
- .flip-card__back-bottom,
1055
- .flip-card__back::before,
1056
- .flip-card__back::after{
1057
- display: block;
1058
- height: 0.72em; /* halfHeight */
1059
- color: var(--main-color, #EC685C);
1060
- background: var(--main-flip-background-color, #222222);
1061
- padding: 0.23em 0.15em 0.4em;
1062
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1063
- backface-visibility: hidden;
1064
- -webkit-backface-visibility: hidden;
1065
- transform-style: preserve-3d;
1066
- width: 2.1em;
1067
- }
1068
-
1069
- .flip-card__top-4digits,
1070
- .flip-card__bottom-4digits,
1071
- .flip-card__back-bottom-4digits,
1072
- .flip-card__back-4digits::before,
1073
- .flip-card__back-4digits::after {
1074
- display: block;
1075
- height: 0.72em; /* halfHeight */
1076
- color: var(--main-color, #EC685C);
1077
- background: var(--main-flip-background-color, #222222);
1078
- padding: 0.23em 0.15em 0.4em;
1079
- border-radius: 0.15em 0.15em 0 0; /* borderRadius */
1080
- backface-visibility: hidden;
1081
- -webkit-backface-visibility: hidden;
1082
- transform-style: preserve-3d;
1083
- width: 2.65em;
1084
- }
1085
-
1086
- .flip-card__bottom,
1087
- .flip-card__back-bottom,
1088
- .flip-card__bottom-4digits,
1089
- .flip-card__back-bottom-4digits {
1090
- color: var(--second-flip-color, #EC685C);
1091
- position: absolute;
1092
- top: 50%;
1093
- left: 0;
1094
- border-top: solid 1px var(--second-flip-background-color, #000);
1095
- background: var(--second-flip-background-color, #393939);
1096
- border-radius: 0 0 0.15em 0.15em; /* borderRadius */
1097
- pointer-events: none;
1098
- overflow: hidden;
1099
- z-index: 2;
1100
- }
1101
-
1102
- .flip-card__back-bottom,
1103
- .flip-card__back-bottom-4digits {
1104
- z-index: 1;
1105
- }
1106
-
1107
- .flip-card__bottom::after,
1108
- .flip-card__back-bottom::after,
1109
- .flip-card__bottom-4digits::after,
1110
- .flip-card__back-bottom-4digits::after {
1111
- display: block;
1112
- margin-top: -0.72em; /* Negative halfHeight */
1113
- }
1114
- .flip-card__back::before,
1115
- .flip-card__bottom::after,
1116
- .flip-card__back-bottom::after,
1117
- .flip-card__back-4digits::before,
1118
- .flip-card__bottom-4digits::after,
1119
- .flip-card__back-bottom-4digits::after {
1120
- content: attr(data-value);
1121
- }
1122
-
1123
- .flip-card__back,
1124
- .flip-card__back-4digits {
1125
- position: absolute;
1126
- top: 0;
1127
- height: 100%;
1128
- left: 0%;
1129
- pointer-events: none;
1130
- }
1131
- .flip-card__back::before,
1132
- .flip-card__back-4digits::before {
1133
- position: relative;
1134
- overflow: hidden;
1135
- z-index: -1;
1136
- }
1137
-
1138
- .flip .flip-card__back::before,
1139
- .flip .flip-card__back-4digits::before {
1140
- z-index: 1;
1141
- animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
1142
- animation-fill-mode: both;
1143
- transform-origin: center bottom;
1144
- }
1145
-
1146
- .flip .flip-card__bottom,
1147
- .flip .flip-card__bottom-4digits {
1148
- transform-origin: center top;
1149
- animation-fill-mode: both;
1150
- animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
1151
- }
1152
- @keyframes flipTop {
1153
- 0% {
1154
- transform: rotateX(0deg);
1155
- z-index: 2;
1156
- }
1157
- 0%, 99% {
1158
- opacity: 1;
1159
- }
1160
- 100% {
1161
- transform: rotateX(-90deg);
1162
- opacity: 0;
1163
- }
1164
- }
1165
-
1166
- @keyframes flipBottom {
1167
- 0%, 50% {
1168
- z-index: -1;
1169
- transform: rotateX(90deg);
1170
- opacity: 0;
1171
- }
1172
- 51% {
1173
- opacity: 1;
1174
- }
1175
- 100% {
1176
- opacity: 1;
1177
- transform: rotateX(0deg);
1178
- z-index: 5;
1179
- }
1180
- }
@@ -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$l, 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, createCommentVNode, normalizeClass, createElementVNode, 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$l, TransitionGroup, mergeProps } from 'vue';
2
2
  import crypto from 'crypto';
3
3
 
4
4
  /** Detect free variable `global` from Node.js. */
@@ -13035,6 +13035,9 @@ var script$f = defineComponent({
13035
13035
  };
13036
13036
  const direction = 'vertical';
13037
13037
  const effect = 'fade';
13038
+ const slideClasses = (index) => {
13039
+ return ['swiper-slide', `slide-${index}`];
13040
+ };
13038
13041
  return {
13039
13042
  componentRefs,
13040
13043
  setComponentRef,
@@ -13044,7 +13047,8 @@ var script$f = defineComponent({
13044
13047
  direction,
13045
13048
  effect,
13046
13049
  upArrow,
13047
- slideChangeTransitionEnd
13050
+ slideChangeTransitionEnd,
13051
+ slideClasses
13048
13052
  };
13049
13053
  }
13050
13054
  });
@@ -13077,9 +13081,11 @@ function render$g(_ctx, _cache, $props, $setup, $data, $options) {
13077
13081
  onSlideChange: _ctx.onSlideChange
13078
13082
  }, {
13079
13083
  default: withCtx(() => [
13080
- (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.work?.pages, (page, index) => {
13084
+ createCommentVNode(" <swiper-slide :class=\"['swiper-slide', `slide-${index}`]\" v-for=\"(page, index) in work?.pages\" :key=\"index\">"),
13085
+ createCommentVNode("<swiper-slide :class=\"['swiper-slide', `slide-${index}`]\" v-for=\"(page, index) in work?.pages\" :key=\"index\">"),
13086
+ (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.work.pages, (page, index) => {
13081
13087
  return (openBlock(), createBlock(_component_swiper_slide, {
13082
- class: normalizeClass(['swiper-slide', `slide-${index}`]),
13088
+ class: normalizeClass(_ctx.slideClasses(index)),
13083
13089
  key: index
13084
13090
  }, {
13085
13091
  default: withCtx(() => [
@@ -13042,6 +13042,9 @@
13042
13042
  };
13043
13043
  const direction = 'vertical';
13044
13044
  const effect = 'fade';
13045
+ const slideClasses = (index) => {
13046
+ return ['swiper-slide', `slide-${index}`];
13047
+ };
13045
13048
  return {
13046
13049
  componentRefs,
13047
13050
  setComponentRef,
@@ -13051,7 +13054,8 @@
13051
13054
  direction,
13052
13055
  effect,
13053
13056
  upArrow,
13054
- slideChangeTransitionEnd
13057
+ slideChangeTransitionEnd,
13058
+ slideClasses
13055
13059
  };
13056
13060
  }
13057
13061
  });
@@ -13084,9 +13088,11 @@
13084
13088
  onSlideChange: _ctx.onSlideChange
13085
13089
  }, {
13086
13090
  default: vue.withCtx(() => [
13087
- (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.work?.pages, (page, index) => {
13091
+ vue.createCommentVNode(" <swiper-slide :class=\"['swiper-slide', `slide-${index}`]\" v-for=\"(page, index) in work?.pages\" :key=\"index\">"),
13092
+ vue.createCommentVNode("<swiper-slide :class=\"['swiper-slide', `slide-${index}`]\" v-for=\"(page, index) in work?.pages\" :key=\"index\">"),
13093
+ (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.work.pages, (page, index) => {
13088
13094
  return (vue.openBlock(), vue.createBlock(_component_swiper_slide, {
13089
- class: vue.normalizeClass(['swiper-slide', `slide-${index}`]),
13095
+ class: vue.normalizeClass(_ctx.slideClasses(index)),
13090
13096
  key: index
13091
13097
  }, {
13092
13098
  default: vue.withCtx(() => [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unika-components",
3
- "version": "1.0.121",
3
+ "version": "1.0.123",
4
4
  "private": false,
5
5
  "main": "dist/unika-components.umd.js",
6
6
  "module": "dist/unika-components.esm.js",