edvoyui-component-library-test-flight 0.0.170 → 0.0.173

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.
Files changed (223) hide show
  1. package/dist/{edvoy-ui.cjs.js → library-vue-ts.cjs.js} +26 -26
  2. package/dist/{edvoy-ui.css → library-vue-ts.css} +1 -1
  3. package/dist/{edvoy-ui.es.js → library-vue-ts.es.js} +2262 -2249
  4. package/dist/library-vue-ts.umd.js +168 -0
  5. package/dist/selectSearch/EUISelectSearch.vue.d.ts.map +1 -0
  6. package/package.json +10 -11
  7. package/src/App.vue +16 -0
  8. package/src/App.vue.js.map +1 -0
  9. package/src/assets/fonts/gilroy/GilroyBold/font.woff +0 -0
  10. package/src/assets/fonts/gilroy/GilroyBold/font.woff2 +0 -0
  11. package/src/assets/fonts/gilroy/GilroyBoldItalic/font.woff +0 -0
  12. package/src/assets/fonts/gilroy/GilroyBoldItalic/font.woff2 +0 -0
  13. package/src/assets/fonts/gilroy/GilroyExtraBold/font.woff +0 -0
  14. package/src/assets/fonts/gilroy/GilroyExtraBold/font.woff2 +0 -0
  15. package/src/assets/fonts/gilroy/GilroyExtraBoldItalic/font.woff +0 -0
  16. package/src/assets/fonts/gilroy/GilroyExtraBoldItalic/font.woff2 +0 -0
  17. package/src/assets/fonts/gilroy/GilroyMedium/font.woff +0 -0
  18. package/src/assets/fonts/gilroy/GilroyMedium/font.woff2 +0 -0
  19. package/src/assets/fonts/gilroy/GilroyRegular/font.woff +0 -0
  20. package/src/assets/fonts/gilroy/GilroyRegular/font.woff2 +0 -0
  21. package/src/assets/fonts/gilroy/GilroySemiBold/font.woff +0 -0
  22. package/src/assets/fonts/gilroy/GilroySemiBold/font.woff2 +0 -0
  23. package/src/assets/fonts/inter/Inter-Bold.woff +0 -0
  24. package/src/assets/fonts/inter/Inter-Bold.woff2 +0 -0
  25. package/src/assets/fonts/inter/Inter-Italic.woff +0 -0
  26. package/src/assets/fonts/inter/Inter-Italic.woff2 +0 -0
  27. package/src/assets/fonts/inter/Inter-Medium.woff +0 -0
  28. package/src/assets/fonts/inter/Inter-Medium.woff2 +0 -0
  29. package/src/assets/fonts/inter/Inter-MediumItalic.woff +0 -0
  30. package/src/assets/fonts/inter/Inter-MediumItalic.woff2 +0 -0
  31. package/src/assets/fonts/inter/Inter-Regular.woff +0 -0
  32. package/src/assets/fonts/inter/Inter-Regular.woff2 +0 -0
  33. package/src/assets/fonts/inter/Inter-SemiBold.woff +0 -0
  34. package/src/assets/fonts/inter/Inter-SemiBold.woff2 +0 -0
  35. package/src/assets/fonts/inter/Inter-SemiBoldItalic.woff +0 -0
  36. package/src/assets/fonts/inter/Inter-SemiBoldItalic.woff2 +0 -0
  37. package/src/assets/images/search-nodata.png +0 -0
  38. package/src/assets/scss/body.scss +25 -0
  39. package/src/assets/svg/CheckTick.vue +21 -0
  40. package/src/assets/svg/CheckTick.vue.js.map +1 -0
  41. package/src/assets/svg/ChevronBigDown.vue +22 -0
  42. package/src/assets/svg/ChevronBigDown.vue.js.map +1 -0
  43. package/src/assets/svg/ChevronDownSolid.vue +19 -0
  44. package/src/assets/svg/ChevronDownSolid.vue.js.map +1 -0
  45. package/src/assets/svg/ChevronDownStroke.vue +22 -0
  46. package/src/assets/svg/ChevronDownStroke.vue.js.map +1 -0
  47. package/src/assets/svg/ChevronDownStrokeSolid.vue +19 -0
  48. package/src/assets/svg/ChevronDownStrokeSolid.vue.js.map +1 -0
  49. package/src/assets/svg/SearchBigZoomIn.vue +21 -0
  50. package/src/assets/svg/SearchBigZoomIn.vue.js.map +1 -0
  51. package/src/assets/svg/SortArrow.vue +24 -0
  52. package/src/assets/svg/SortArrow.vue.js.map +1 -0
  53. package/src/assets/svg/Student.vue +30 -0
  54. package/src/assets/svg/Student.vue.js.map +1 -0
  55. package/src/assets/svg/partner.vue +33 -0
  56. package/src/assets/svg/partner.vue.js.map +1 -0
  57. package/src/assets/svg/people.vue +25 -0
  58. package/src/assets/svg/people.vue.js.map +1 -0
  59. package/src/assets/vue.svg +1 -0
  60. package/src/components/HelloWorld.vue +1974 -0
  61. package/src/components/HelloWorld.vue.js.map +1 -0
  62. package/src/components/accordion/EUIAccordion.stories.ts +204 -0
  63. package/src/components/accordion/EUIAccordion.vue +152 -0
  64. package/src/components/accordion/EUIAccordion.vue.js.map +1 -0
  65. package/src/components/alerts/EUIAlerts.stories.ts +217 -0
  66. package/src/components/alerts/EUIAlerts.vue +194 -0
  67. package/src/components/alerts/EUIAlerts.vue.js.map +1 -0
  68. package/src/components/avatar/EUIAvatar.stories.ts +157 -0
  69. package/src/components/avatar/EUIAvatar.vue +96 -0
  70. package/src/components/avatar/EUIAvatar.vue.js.map +1 -0
  71. package/src/components/breadcrumb/EUIBreadcrumb.stories.ts +75 -0
  72. package/src/components/breadcrumb/EUIBreadcrumb.vue +59 -0
  73. package/src/components/breadcrumb/EUIBreadcrumb.vue.js.map +1 -0
  74. package/src/components/button/EUIButton.stories.ts +270 -0
  75. package/src/components/button/EUIButton.vue +154 -0
  76. package/src/components/button/EUIButton.vue.js.map +1 -0
  77. package/src/components/button/EUIButtonGroup.vue +287 -0
  78. package/src/components/button/EUIButtonGroup.vue.js.map +1 -0
  79. package/src/components/button/buttonAnimateTab.vue +74 -0
  80. package/src/components/button/buttonAnimateTab.vue.js.map +1 -0
  81. package/src/components/checkbox/EUICheckbox.stories.ts +58 -0
  82. package/src/components/checkbox/EUICheckbox.vue +110 -0
  83. package/src/components/checkbox/EUICheckbox.vue.js.map +1 -0
  84. package/src/components/datepicker/EUIDatepicker.stories.ts +492 -0
  85. package/src/components/datepicker/EUIDatepicker.vue +295 -0
  86. package/src/components/datepicker/EUIDatepicker.vue.js.map +1 -0
  87. package/src/components/delete.vue +262 -0
  88. package/src/components/delete.vue.js.map +1 -0
  89. package/src/components/dragModal/EUIDrag.vue +179 -0
  90. package/src/components/dragModal/EUIDrag.vue.js.map +1 -0
  91. package/src/components/dropdown/EUIMultiDropdown.stories.ts +294 -0
  92. package/src/components/dropdown/EUIMultiDropdown.vue +187 -0
  93. package/src/components/dropdown/EUIMultiDropdown.vue.js.map +1 -0
  94. package/src/components/errorMessage/EUIErrorMessage.scss +0 -0
  95. package/src/components/errorMessage/EUIErrorMessage.stories.ts +41 -0
  96. package/src/components/errorMessage/EUIErrorMessage.vue +25 -0
  97. package/src/components/errorMessage/EUIErrorMessage.vue.js.map +1 -0
  98. package/src/components/index.js.map +1 -0
  99. package/src/components/index.ts +62 -0
  100. package/src/components/input/EUIInput.stories.ts +387 -0
  101. package/src/components/input/EUIInput.vue +223 -0
  102. package/src/components/input/EUIInput.vue.js.map +1 -0
  103. package/src/components/input/EUINumberInput.vue +250 -0
  104. package/src/components/loader/EUICircleLoader.vue +31 -0
  105. package/src/components/loader/EUICircleLoader.vue.js.map +1 -0
  106. package/src/components/loader/EUICubeLoader.vue +237 -0
  107. package/src/components/loader/EUICubeLoader.vue.js.map +1 -0
  108. package/src/components/loader/EUILoader.stories.ts +99 -0
  109. package/src/components/loader/EUILoader.vue +17 -0
  110. package/src/components/loader/EUILoader.vue.js.map +1 -0
  111. package/src/components/loader/EUISquareLoader.vue +47 -0
  112. package/src/components/loader/EUISquareLoader.vue.js.map +1 -0
  113. package/src/components/modal/EUIModal.stories.ts +412 -0
  114. package/src/components/modal/EUIModal.vue +224 -0
  115. package/src/components/modal/EUIModal.vue.js.map +1 -0
  116. package/src/components/pillSelect/EUIPillSelect.stories.ts +74 -0
  117. package/src/components/pillSelect/EUIPillSelect.vue +149 -0
  118. package/src/components/pillSelect/EUIPillSelect.vue.js.map +1 -0
  119. package/src/components/popover/EUIPopover.stories.ts +306 -0
  120. package/src/components/popover/EUIPopover.vue +297 -0
  121. package/src/components/popover/EUIPopover.vue.js.map +1 -0
  122. package/src/components/radio/EUIRadio.stories.ts +54 -0
  123. package/src/components/radio/EUIRadio.vue +75 -0
  124. package/src/components/radio/EUIRadio.vue.js.map +1 -0
  125. package/src/components/searchInput/EUISearch.stories.ts +24 -0
  126. package/src/components/searchInput/EUISearch.vue +223 -0
  127. package/src/components/searchInput/EUISearch.vue.js.map +1 -0
  128. package/src/components/searchTagSelect/EUISearchTagSelect.vue +642 -0
  129. package/src/components/searchTagSelect/EUISearchTagSelect.vue.js.map +1 -0
  130. package/src/components/searchTagSelect/SearchInput.vue +167 -0
  131. package/src/components/searchTagSelect/SearchInput.vue.js.map +1 -0
  132. package/src/components/searchexpand/EUISearchExpand.vue +148 -0
  133. package/src/components/searchexpand/EUISearchExpand.vue.js.map +1 -0
  134. package/src/components/searchexpand/EUISearchToggle.vue +86 -0
  135. package/src/components/searchexpand/EUISearchToggle.vue.js.map +1 -0
  136. package/src/components/select/EUISelect.stories.ts +101 -0
  137. package/src/components/select/EUISelect.vue +1092 -0
  138. package/src/components/select/EUISelect.vue.js.map +1 -0
  139. package/src/components/selectSearch/EUISelectSearch.vue +23 -0
  140. package/src/components/selectSearch/EUISelectSearch.vue.js.map +1 -0
  141. package/src/components/slideover/EUISlideover.stories.ts +318 -0
  142. package/src/components/slideover/EUISlideover.vue +207 -0
  143. package/src/components/slideover/EUISlideover.vue.js.map +1 -0
  144. package/src/components/stepperTimeline/EUIStepperHorizontal.vue +242 -0
  145. package/src/components/stepperTimeline/EUIStepperHorizontal.vue.js.map +1 -0
  146. package/src/components/stepperTimeline/EUIStepperTimeline.stories.ts +54 -0
  147. package/src/components/stepperTimeline/EUIStepperTimeline.vue +16 -0
  148. package/src/components/stepperTimeline/EUIStepperTimeline.vue.js.map +1 -0
  149. package/src/components/stepperTimeline/EUIStepperVertical.vue +112 -0
  150. package/src/components/stepperTimeline/EUIStepperVertical.vue.js.map +1 -0
  151. package/src/components/table/ColumnResizeTable.vue +740 -0
  152. package/src/components/table/ColumnResizeTable.vue.js.map +1 -0
  153. package/src/components/table/EUIDashboardTable.vue +514 -0
  154. package/src/components/table/EUIDashboardTable.vue.js.map +1 -0
  155. package/src/components/table/EUIPageLimit.vue +66 -0
  156. package/src/components/table/EUIPageLimit.vue.js.map +1 -0
  157. package/src/components/table/EUIPagination.vue +175 -0
  158. package/src/components/table/EUIPagination.vue.js.map +1 -0
  159. package/src/components/table/EUIStudentPagination.vue +172 -0
  160. package/src/components/table/EUIStudentPagination.vue.js.map +1 -0
  161. package/src/components/table/EUITable.stories.ts +300 -0
  162. package/src/components/table/EUITable.vue +559 -0
  163. package/src/components/table/EUITable.vue.js.map +1 -0
  164. package/src/components/table/EUITableCheckbox.vue +98 -0
  165. package/src/components/table/EUITableCheckbox.vue.js.map +1 -0
  166. package/src/components/table/GrowthTable.vue +575 -0
  167. package/src/components/table/GrowthTable.vue.js.map +1 -0
  168. package/src/components/table/GrowthTableView.vue +108 -0
  169. package/src/components/table/GrowthTableView.vue.js.map +1 -0
  170. package/src/components/table/ResizeTableview.vue +198 -0
  171. package/src/components/table/ResizeTableview.vue.js.map +1 -0
  172. package/src/components/table/UCheckbox.vue +169 -0
  173. package/src/components/table/UCheckbox.vue.js.map +1 -0
  174. package/src/components/table/UTable.scss +69 -0
  175. package/src/components/table/UTable.vue +611 -0
  176. package/src/components/table/UTable.vue.js.map +1 -0
  177. package/src/components/table/UTableview.vue +189 -0
  178. package/src/components/table/UTableview.vue.js.map +1 -0
  179. package/src/components/tabs/EUITabOutline.vue +263 -0
  180. package/src/components/tabs/EUITabOutline.vue.js.map +1 -0
  181. package/src/components/tabs/EUITabs.vue +226 -0
  182. package/src/components/tabs/EUITabs.vue.js.map +1 -0
  183. package/src/components/tabs/EUItabs.stories.ts +137 -0
  184. package/src/components/tag/EUITag.stories.ts +53 -0
  185. package/src/components/tag/EUITag.vue +88 -0
  186. package/src/components/tag/EUITag.vue.js.map +1 -0
  187. package/src/components/telephone/EUITelephone.stories.ts +358 -0
  188. package/src/components/telephone/EUITelephone.vue +299 -0
  189. package/src/components/telephone/EUITelephone.vue.js.map +1 -0
  190. package/src/components/textArea/EUITextArea.stories.ts +134 -0
  191. package/src/components/textArea/EUITextArea.vue +155 -0
  192. package/src/components/textArea/EUITextArea.vue.js.map +1 -0
  193. package/src/components/timeLine/EUITimeLine.stories.ts +247 -0
  194. package/src/components/timeLine/EUITimeLine.vue +148 -0
  195. package/src/components/timeLine/EUITimeLine.vue.js.map +1 -0
  196. package/src/components/toggle/EUIToggle.stories.ts +63 -0
  197. package/src/components/toggle/EUIToggle.vue +101 -0
  198. package/src/components/toggle/EUIToggle.vue.js.map +1 -0
  199. package/src/components/tooltip/EUITooltip.stories.ts +53 -0
  200. package/src/components/tooltip/EUITooltip.vue +111 -0
  201. package/src/components/tooltip/EUITooltip.vue.js.map +1 -0
  202. package/src/components/uidemo/select-com.vue +120 -0
  203. package/src/components/uidemo/select-com.vue.js.map +1 -0
  204. package/src/data/books.js.map +1 -0
  205. package/src/data/books.ts +163 -0
  206. package/src/data/country.ts +56 -0
  207. package/src/data/tab.js.map +1 -0
  208. package/src/data/tab.ts +40 -0
  209. package/src/data/table.js.map +1 -0
  210. package/src/data/table.ts +5654 -0
  211. package/src/main.js.map +1 -0
  212. package/src/main.ts +5 -0
  213. package/src/style.scss +186 -0
  214. package/src/utils/helpers.js.map +1 -0
  215. package/src/utils/helpers.ts +30 -0
  216. package/src/utils/lodash.js.map +1 -0
  217. package/src/utils/lodash.ts +9 -0
  218. package/src/utils/types.js.map +1 -0
  219. package/src/utils/types.ts +9 -0
  220. package/src/vite-env.d.ts +5 -0
  221. package/dist/EUISelectSearch.vue.d.ts.map +0 -1
  222. package/dist/edvoy-ui.umd.js +0 -168
  223. /package/dist/{EUISelectSearch.vue.d.ts → selectSearch/EUISelectSearch.vue.d.ts} +0 -0
@@ -0,0 +1,237 @@
1
+ <template>
2
+ <div class="flex flex-col items-center justify-center gap-4 size-72 mx-auto">
3
+ <div class="min-h-16 relative">
4
+ <div class="cube">
5
+ <div class="sides">
6
+ <div class="top"></div>
7
+ <div class="right"></div>
8
+ <div class="bottom"></div>
9
+ <div class="left"></div>
10
+ <div class="front"></div>
11
+ <div class="back"></div>
12
+ </div>
13
+ </div>
14
+ </div>
15
+ </div>
16
+ </template>
17
+
18
+ <script setup lang="ts">
19
+
20
+ </script>
21
+
22
+ <style lang="scss">
23
+ :root {
24
+ --cube-side: 2.75rem;
25
+ --cube-side-half: calc(var(--cube-side) / 2);
26
+ }
27
+
28
+ @keyframes rotate {
29
+ 0% {
30
+ transform: rotateX(-37.5deg) rotateY(45deg);
31
+ }
32
+ 50% {
33
+ transform: rotateX(-37.5deg) rotateY(405deg);
34
+ }
35
+ 100% {
36
+ transform: rotateX(-37.5deg) rotateY(405deg);
37
+ }
38
+ }
39
+
40
+ .cube, .cube * {
41
+ @apply size-[2.75rem] absolute top-1 left-[-0.4rem];
42
+ }
43
+ .sides {
44
+ animation: rotate 3s ease infinite;
45
+ animation-delay: 0.8s;
46
+ transform-style: preserve-3d;
47
+ transform: rotateX(-37.5deg) rotateY(45deg);
48
+ }
49
+ .cube .sides * {
50
+ @apply box-border bg-violet-600 border border-solid border-white;
51
+ }
52
+ .cube .sides .top {
53
+ animation: top-animation 3s ease infinite;
54
+ animation-delay: 0ms;
55
+ transform: rotateX(90deg) translateZ(var(--cube-side));
56
+ animation-fill-mode: forwards;
57
+ transform-origin: 50% 50%;
58
+ }
59
+
60
+ @keyframes top-animation {
61
+ 0% {
62
+ opacity: 1;
63
+ transform: rotateX(90deg) translateZ(var(--cube-side));
64
+ }
65
+ 20% {
66
+ opacity: 1;
67
+ transform: rotateX(90deg) translateZ(var(--cube-side-half));
68
+ }
69
+ 70% {
70
+ opacity: 1;
71
+ transform: rotateX(90deg) translateZ(var(--cube-side-half));
72
+ }
73
+ 90% {
74
+ opacity: 1;
75
+ transform: rotateX(90deg) translateZ(var(--cube-side));
76
+ }
77
+ 100% {
78
+ opacity: 1;
79
+ transform: rotateX(90deg) translateZ(var(--cube-side));
80
+ }
81
+ }
82
+
83
+ .cube .sides .bottom {
84
+ animation: bottom-animation 3s ease infinite;
85
+ animation-delay: 0ms;
86
+ transform: rotateX(-90deg) translateZ(var(--cube-side));
87
+ animation-fill-mode: forwards;
88
+ transform-origin: 50% 50%;
89
+ }
90
+
91
+ @keyframes bottom-animation {
92
+ 0% {
93
+ opacity: 1;
94
+ transform: rotateX(-90deg) translateZ(var(--cube-side));
95
+ }
96
+ 20% {
97
+ opacity: 1;
98
+ transform: rotateX(-90deg) translateZ(var(--cube-side-half));
99
+ }
100
+ 70% {
101
+ opacity: 1;
102
+ transform: rotateX(-90deg) translateZ(var(--cube-side-half));
103
+ }
104
+ 90% {
105
+ opacity: 1;
106
+ transform: rotateX(-90deg) translateZ(var(--cube-side));
107
+ }
108
+ 100% {
109
+ opacity: 1;
110
+ transform: rotateX(-90deg) translateZ(var(--cube-side));
111
+ }
112
+ }
113
+
114
+ .cube .sides .front {
115
+ animation: front-animation 3s ease infinite;
116
+ animation-delay: 100ms;
117
+ transform: rotateY(0deg) translateZ(var(--cube-side));
118
+ animation-fill-mode: forwards;
119
+ transform-origin: 50% 50%;
120
+ }
121
+
122
+ @keyframes front-animation {
123
+ 0% {
124
+ opacity: 1;
125
+ transform: rotateY(0deg) translateZ(var(--cube-side));
126
+ }
127
+ 20% {
128
+ opacity: 1;
129
+ transform: rotateY(0deg) translateZ(var(--cube-side-half));
130
+ }
131
+ 70% {
132
+ opacity: 1;
133
+ transform: rotateY(0deg) translateZ(var(--cube-side-half));
134
+ }
135
+ 90% {
136
+ opacity: 1;
137
+ transform: rotateY(0deg) translateZ(var(--cube-side));
138
+ }
139
+ 100% {
140
+ opacity: 1;
141
+ transform: rotateY(0deg) translateZ(var(--cube-side));
142
+ }
143
+ }
144
+
145
+ .cube .sides .back {
146
+ animation: back-animation 3s ease infinite;
147
+ animation-delay: 100ms;
148
+ transform: rotateY(-180deg) translateZ(var(--cube-side));
149
+ animation-fill-mode: forwards;
150
+ transform-origin: 50% 50%;
151
+ }
152
+
153
+ @keyframes back-animation {
154
+ 0% {
155
+ opacity: 1;
156
+ transform: rotateY(-180deg) translateZ(var(--cube-side));
157
+ }
158
+ 20% {
159
+ opacity: 1;
160
+ transform: rotateY(-180deg) translateZ(var(--cube-side-half));
161
+ }
162
+ 70% {
163
+ opacity: 1;
164
+ transform: rotateY(-180deg) translateZ(var(--cube-side-half));
165
+ }
166
+ 90% {
167
+ opacity: 1;
168
+ transform: rotateY(-180deg) translateZ(var(--cube-side));
169
+ }
170
+ 100% {
171
+ opacity: 1;
172
+ transform: rotateY(-180deg) translateZ(var(--cube-side));
173
+ }
174
+ }
175
+
176
+ .cube .sides .left {
177
+ animation: left-animation 3s ease infinite;
178
+ animation-delay: 100ms;
179
+ transform: rotateY(-90deg) translateZ(var(--cube-side));
180
+ animation-fill-mode: forwards;
181
+ transform-origin: 50% 50%;
182
+ }
183
+
184
+ @keyframes left-animation {
185
+ 0% {
186
+ opacity: 1;
187
+ transform: rotateY(-90deg) translateZ(var(--cube-side));
188
+ }
189
+ 20% {
190
+ opacity: 1;
191
+ transform: rotateY(-90deg) translateZ(var(--cube-side-half));
192
+ }
193
+ 70% {
194
+ opacity: 1;
195
+ transform: rotateY(-90deg) translateZ(var(--cube-side-half));
196
+ }
197
+ 90% {
198
+ opacity: 1;
199
+ transform: rotateY(-90deg) translateZ(var(--cube-side));
200
+ }
201
+ 100% {
202
+ opacity: 1;
203
+ transform: rotateY(-90deg) translateZ(var(--cube-side));
204
+ }
205
+ }
206
+
207
+ .cube .sides .right {
208
+ animation: right-animation 3s ease infinite;
209
+ animation-delay: 100ms;
210
+ transform: rotateY(90deg) translateZ(var(--cube-side));
211
+ animation-fill-mode: forwards;
212
+ transform-origin: 50% 50%;
213
+ }
214
+
215
+ @keyframes right-animation {
216
+ 0% {
217
+ opacity: 1;
218
+ transform: rotateY(90deg) translateZ(var(--cube-side));
219
+ }
220
+ 20% {
221
+ opacity: 1;
222
+ transform: rotateY(90deg) translateZ(var(--cube-side-half));
223
+ }
224
+ 70% {
225
+ opacity: 1;
226
+ transform: rotateY(90deg) translateZ(var(--cube-side-half));
227
+ }
228
+ 90% {
229
+ opacity: 1;
230
+ transform: rotateY(90deg) translateZ(var(--cube-side));
231
+ }
232
+ 100% {
233
+ opacity: 1;
234
+ transform: rotateY(90deg) translateZ(var(--cube-side));
235
+ }
236
+ }
237
+ </style>
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EUICubeLoader.vue.js","sourceRoot":"","sources":["EUICubeLoader.vue"],"names":[],"mappings":"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"}
@@ -0,0 +1,99 @@
1
+ import type { Meta, StoryObj } from "@storybook/vue3";
2
+ import EUILoader from "./EUILoader.vue";
3
+ import EUICubeLoader from "./EUICubeLoader.vue";
4
+ import EUISquareLoader from "./EUISquareLoader.vue";
5
+ import EUICircleLoader from "./EUICircleLoader.vue";
6
+
7
+ const meta: Meta<typeof EUILoader> = {
8
+ title: "Example/Loaders",
9
+ component: EUILoader,
10
+ tags: ["autodocs"],
11
+ argTypes: {},
12
+ } satisfies Meta<typeof EUILoader>;
13
+
14
+ export default meta;
15
+ type Story = StoryObj<typeof meta>;
16
+
17
+ export const Default: Story = {
18
+ args: {},
19
+ render: (args) => ({
20
+ components: { EUILoader },
21
+ setup() {
22
+ return { args };
23
+ },
24
+ template: `<EUILoader />`,
25
+ }),
26
+ parameters: {
27
+ docs: {
28
+ description: {
29
+ story:
30
+ "Displaying three types of loaders: one component to use at a time <strong>&lt;EUICubeLoader/&gt;</strong>, <strong>&lt;EUICircleLoader/&gt;</strong>, <strong>&lt;EUISquareLoader/&gt;</strong>.",
31
+ },
32
+ source: {
33
+ code: `<template>
34
+ <EUICircleLoader />
35
+ <EUISquareLoader />
36
+ <EUICubeLoader />
37
+ </template>`,
38
+ },
39
+ },
40
+ },
41
+ };
42
+
43
+ // Render functions are a framework specific feature
44
+ export const CircleLoader: Story = {
45
+ render: (args) => ({
46
+ components: { EUICircleLoader },
47
+ setup() {
48
+ return { args };
49
+ },
50
+ template: "<EUICircleLoader />",
51
+ }),
52
+ parameters: {
53
+ docs: {
54
+ source: {
55
+ code: `<template>
56
+ <EUICircleLoader />
57
+ </template>`,
58
+ },
59
+ },
60
+ },
61
+ };
62
+
63
+ export const SquareLoader: Story = {
64
+ render: (args) => ({
65
+ components: { EUISquareLoader },
66
+ setup() {
67
+ return { args };
68
+ },
69
+ template: `<EUISquareLoader />`,
70
+ }),
71
+ parameters: {
72
+ docs: {
73
+ source: {
74
+ code: `<template>
75
+ <EUISquareLoader />
76
+ </template>`,
77
+ },
78
+ },
79
+ },
80
+ };
81
+
82
+ export const CubeLoader: Story = {
83
+ render: (args) => ({
84
+ components: { EUICubeLoader },
85
+ setup() {
86
+ return { args };
87
+ },
88
+ template: `<EUICubeLoader/>`,
89
+ }),
90
+ parameters: {
91
+ docs: {
92
+ source: {
93
+ code: `<template>
94
+ <EUICubeLoader />
95
+ </template>`,
96
+ },
97
+ },
98
+ },
99
+ };
@@ -0,0 +1,17 @@
1
+ <<template>
2
+ <div class="grid grid-cols-3">
3
+ <EUISquareLoader />
4
+ <EUICircleLoader />
5
+ <EUICubeLoader />
6
+ </div>
7
+ </template>
8
+
9
+ <script setup lang="ts">
10
+ import EUICircleLoader from './EUICircleLoader.vue';
11
+ import EUICubeLoader from './EUICubeLoader.vue';
12
+ import EUISquareLoader from './EUISquareLoader.vue';
13
+ </script>
14
+
15
+ <style scoped>
16
+
17
+ </style>
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EUILoader.vue.js","sourceRoot":"","sources":["EUILoader.vue"],"names":[],"mappings":"AAAA,OAkBO,eAAe,MAAM,uBAAuB,CAAC;AACpD,OAAO,aAAa,MAAM,qBAAqB,CAAC;AAChD,OAAO,eAAe,MAAM,uBAAuB,CAAC;AAEpD,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,GAAG,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC;AAC/H,MAAM,iBAAiB,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,EAC/D,CAAC,CAAC;AACuD,CAAC;AAC3D,IAAI,8BAAmJ,CAAC;AAExJ,SAAS,cAAc;IACvB,MAAM,SAAS,GAAG,EAAqE,CAAC;IACxF,MAAM,qBAAqB,GAAG;QAC9B,GAAG,EAKA;QACH,GAAG,EAA6E;QAChF,GAAG,SAAS;KACX,CAAC;IACF,IAAI,gBAAwE,CAAC;IAC7E,MAAM,qBAAqB,GAAG;QAC9B,GAAG,EAA6E;QAChF,GAAG,SAAS;KACX,CAAC;IACF,IAAI,gBAAwE,CAAC;IAC7E,IAAI,wBAA6B,CAAC;IAElC,0BAA0B;IAC1B,8BAA8B;IAC9B,IAAI,sCAGqH,CAAC;IAC1H,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,kBAAkB,CAAC,EAAE,GAAG,CAAC,CAAC;IAC1H,aAAa;IACb,CAAC,eAAe,EAAE,CAAC;IACnB,aAAa;IACb,MAAM,OAAO,GAAG,2BAA2B,CAAC,eAAe,EAAE,IAAI,eAAe,CAAC,EAAE,CAAC,CAAC,CAAC;IACtF,MAAM,OAAO,GAAG,OAAO,CAAC,EAAE,EAAE,GAAG,iCAAiC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3E,aAAa;IACb,CAAC,eAAe,EAAE,CAAC;IACnB,aAAa;IACb,MAAM,OAAO,GAAG,2BAA2B,CAAC,eAAe,EAAE,IAAI,eAAe,CAAC,EAAE,CAAC,CAAC,CAAC;IACtF,MAAM,OAAO,GAAG,OAAO,CAAC,EAAE,EAAE,GAAG,iCAAiC,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3E,aAAa;IACb,CAAC,aAAa,EAAE,CAAC;IACjB,aAAa;IACb,MAAM,QAAQ,GAAG,2BAA2B,CAAC,aAAa,EAAE,IAAI,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC;IACnF,MAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,EAAE,GAAG,iCAAiC,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC9E,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,aAAa,CAAC,CAAC;IAExC,IAAI,WACH,CAAC;IACF,IAAI,oBAAyB,CAAC;IAC9B,MAAM,UAAU,GAAG,EAClB,CAAC;IACF,IAAI,KAAyB,CAAC;IAC9B,OAAO;QACN,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,EAA0C;KACjD,CAAC;AACF,CAAC;AAAA,CAAC;AACF,MAAM,UAAU,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACzD,KAAK;QACL,OAAO;YACP,eAAe,EAAE,eAAyC;YAC1D,aAAa,EAAE,aAAqC;YACpD,eAAe,EAAE,eAAyC;SACzD,CAAC;IACF,CAAC;CACA,CAAC,CAAC;AAEH,eAAe,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACrD,KAAK;QACL,OAAO,EACN,CAAC;IACF,CAAC;CACA,CAAC,CAAC;AACH,CAAC"}
@@ -0,0 +1,47 @@
1
+ <template>
2
+ <div class="flex flex-col items-center justify-center gap-4 size-72 mx-auto">
3
+ <div class="min-h-16 relative">
4
+ <div class="square-loader">
5
+ </div>
6
+ </div>
7
+ </div>
8
+ </template>
9
+
10
+ <script setup lang="ts">
11
+
12
+ </script>
13
+
14
+ <style lang="scss">
15
+ :root {
16
+ --primary: #705CFF;
17
+ --primary-2: #705CFF60;
18
+ --primary-3: #705CFF30;
19
+ }
20
+ .square-loader {
21
+ --s: 20px;
22
+ --_d: calc(0.353*var(--s));
23
+ width: calc(var(--s) + var(--_d));
24
+ aspect-ratio: 1;
25
+ display: grid;
26
+ &:before,
27
+ &:after {
28
+ content: "";
29
+ grid-area: 1/1;
30
+ clip-path: polygon(var(--_d) 0,100% 0,100% calc(100% - var(--_d)),calc(100% - var(--_d)) 100%,0 100%,0 var(--_d));
31
+ background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), var(--primary-3) 135deg, var(--primary) 0 270deg, var(--primary-2) 0);
32
+ animation: l6 2s infinite;
33
+ }
34
+
35
+ &:after {
36
+ animation-delay:-1s;
37
+ }
38
+ }
39
+
40
+ @keyframes l6{
41
+ 0% {transform:translate(0,0)}
42
+ 25% {transform:translate(30px,0)}
43
+ 50% {transform:translate(30px,30px)}
44
+ 75% {transform:translate(0,30px)}
45
+ 100%{transform:translate(0,0)}
46
+ }
47
+ </style>
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EUISquareLoader.vue.js","sourceRoot":"","sources":["EUISquareLoader.vue"],"names":[],"mappings":"AAAA,MAkDM,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,GAAG,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC;AAC/H,MAAM,iBAAiB,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,EAC/D,CAAC,CAAC;AACuD,CAAC;AAC3D,IAAI,8BAAmJ,CAAC;AAExJ,SAAS,cAAc;IACvB,MAAM,SAAS,GAAG,EAAqE,CAAC;IACxF,MAAM,qBAAqB,GAAG;QAC9B,GAAG,EAKA;QACH,GAAG,EAA6E;QAChF,GAAG,SAAS;KACX,CAAC;IACF,IAAI,gBAAwE,CAAC;IAC7E,MAAM,qBAAqB,GAAG;QAC9B,GAAG,EAA6E;QAChF,GAAG,SAAS;KACX,CAAC;IACF,IAAI,gBAAwE,CAAC;IAC7E,IAAI,wBAA6B,CAAC;IAElC,0BAA0B;IAC1B,8BAA8B;IAC9B,IAAI,sCAAqD,CAAC;IAC1D,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,iEAAiE,CAAC,EAAE,GAAG,CAAC,CAAC;IACzK,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,mBAAmB,CAAC,EAAE,GAAG,CAAC,CAAC;IAC3H,uBAAuB,CAAC,uBAAuB,CAAC,GAAG,EAAE,uBAAuB,CAAC,GAAG,CAAC,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,CAAC,eAAe,CAAC,EAAE,GAAG,CAAC,CAAC;IACvH,wBAAwB,CAAC,MAAM,CAAC,CAAC;IACjC,wBAAwB,CAAC,UAAU,CAAC,CAAC;IACrC,wBAAwB,CAAC,cAAc,CAAC,CAAC;IACzC,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;IAC3C,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAClC,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,SAAS,CAAC,CAAC;IACpC,wBAAwB,CAAC,UAAU,CAAC,CAAC;IACrC,wBAAwB,CAAC,UAAU,CAAC,CAAC;IACrC,wBAAwB,CAAC,eAAe,CAAC,CAAC;IAE1C,IAAI,WACH,CAAC;IACF,IAAI,oBAAyB,CAAC;IAC9B,MAAM,UAAU,GAAG,EAClB,CAAC;IACF,IAAI,KAAyB,CAAC;IAC9B,OAAO;QACN,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,EAA0C;KACjD,CAAC;AACF,CAAC;AAAA,CAAC;AACF,MAAM,UAAU,GAAG,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACzD,KAAK;QACL,OAAO,EACN,CAAC;IACF,CAAC;CACA,CAAC,CAAC;AAEH,eAAe,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;IACrD,KAAK;QACL,OAAO,EACN,CAAC;IACF,CAAC;CACA,CAAC,CAAC;AACH,CAAC"}