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

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/library-vue-ts.umd.js +168 -0
  2. package/dist/selectSearch/EUISelectSearch.vue.d.ts.map +1 -0
  3. package/package.json +10 -11
  4. package/src/App.vue +16 -0
  5. package/src/App.vue.js.map +1 -0
  6. package/src/assets/fonts/gilroy/GilroyBold/font.woff +0 -0
  7. package/src/assets/fonts/gilroy/GilroyBold/font.woff2 +0 -0
  8. package/src/assets/fonts/gilroy/GilroyBoldItalic/font.woff +0 -0
  9. package/src/assets/fonts/gilroy/GilroyBoldItalic/font.woff2 +0 -0
  10. package/src/assets/fonts/gilroy/GilroyExtraBold/font.woff +0 -0
  11. package/src/assets/fonts/gilroy/GilroyExtraBold/font.woff2 +0 -0
  12. package/src/assets/fonts/gilroy/GilroyExtraBoldItalic/font.woff +0 -0
  13. package/src/assets/fonts/gilroy/GilroyExtraBoldItalic/font.woff2 +0 -0
  14. package/src/assets/fonts/gilroy/GilroyMedium/font.woff +0 -0
  15. package/src/assets/fonts/gilroy/GilroyMedium/font.woff2 +0 -0
  16. package/src/assets/fonts/gilroy/GilroyRegular/font.woff +0 -0
  17. package/src/assets/fonts/gilroy/GilroyRegular/font.woff2 +0 -0
  18. package/src/assets/fonts/gilroy/GilroySemiBold/font.woff +0 -0
  19. package/src/assets/fonts/gilroy/GilroySemiBold/font.woff2 +0 -0
  20. package/src/assets/fonts/inter/Inter-Bold.woff +0 -0
  21. package/src/assets/fonts/inter/Inter-Bold.woff2 +0 -0
  22. package/src/assets/fonts/inter/Inter-Italic.woff +0 -0
  23. package/src/assets/fonts/inter/Inter-Italic.woff2 +0 -0
  24. package/src/assets/fonts/inter/Inter-Medium.woff +0 -0
  25. package/src/assets/fonts/inter/Inter-Medium.woff2 +0 -0
  26. package/src/assets/fonts/inter/Inter-MediumItalic.woff +0 -0
  27. package/src/assets/fonts/inter/Inter-MediumItalic.woff2 +0 -0
  28. package/src/assets/fonts/inter/Inter-Regular.woff +0 -0
  29. package/src/assets/fonts/inter/Inter-Regular.woff2 +0 -0
  30. package/src/assets/fonts/inter/Inter-SemiBold.woff +0 -0
  31. package/src/assets/fonts/inter/Inter-SemiBold.woff2 +0 -0
  32. package/src/assets/fonts/inter/Inter-SemiBoldItalic.woff +0 -0
  33. package/src/assets/fonts/inter/Inter-SemiBoldItalic.woff2 +0 -0
  34. package/src/assets/images/search-nodata.png +0 -0
  35. package/src/assets/scss/body.scss +25 -0
  36. package/src/assets/svg/CheckTick.vue +21 -0
  37. package/src/assets/svg/CheckTick.vue.js.map +1 -0
  38. package/src/assets/svg/ChevronBigDown.vue +22 -0
  39. package/src/assets/svg/ChevronBigDown.vue.js.map +1 -0
  40. package/src/assets/svg/ChevronDownSolid.vue +19 -0
  41. package/src/assets/svg/ChevronDownSolid.vue.js.map +1 -0
  42. package/src/assets/svg/ChevronDownStroke.vue +22 -0
  43. package/src/assets/svg/ChevronDownStroke.vue.js.map +1 -0
  44. package/src/assets/svg/ChevronDownStrokeSolid.vue +19 -0
  45. package/src/assets/svg/ChevronDownStrokeSolid.vue.js.map +1 -0
  46. package/src/assets/svg/SearchBigZoomIn.vue +21 -0
  47. package/src/assets/svg/SearchBigZoomIn.vue.js.map +1 -0
  48. package/src/assets/svg/SortArrow.vue +24 -0
  49. package/src/assets/svg/SortArrow.vue.js.map +1 -0
  50. package/src/assets/svg/Student.vue +30 -0
  51. package/src/assets/svg/Student.vue.js.map +1 -0
  52. package/src/assets/svg/partner.vue +33 -0
  53. package/src/assets/svg/partner.vue.js.map +1 -0
  54. package/src/assets/svg/people.vue +25 -0
  55. package/src/assets/svg/people.vue.js.map +1 -0
  56. package/src/assets/vue.svg +1 -0
  57. package/src/components/HelloWorld.vue +1974 -0
  58. package/src/components/HelloWorld.vue.js.map +1 -0
  59. package/src/components/accordion/EUIAccordion.stories.ts +204 -0
  60. package/src/components/accordion/EUIAccordion.vue +152 -0
  61. package/src/components/accordion/EUIAccordion.vue.js.map +1 -0
  62. package/src/components/alerts/EUIAlerts.stories.ts +217 -0
  63. package/src/components/alerts/EUIAlerts.vue +194 -0
  64. package/src/components/alerts/EUIAlerts.vue.js.map +1 -0
  65. package/src/components/avatar/EUIAvatar.stories.ts +157 -0
  66. package/src/components/avatar/EUIAvatar.vue +96 -0
  67. package/src/components/avatar/EUIAvatar.vue.js.map +1 -0
  68. package/src/components/breadcrumb/EUIBreadcrumb.stories.ts +75 -0
  69. package/src/components/breadcrumb/EUIBreadcrumb.vue +59 -0
  70. package/src/components/breadcrumb/EUIBreadcrumb.vue.js.map +1 -0
  71. package/src/components/button/EUIButton.stories.ts +270 -0
  72. package/src/components/button/EUIButton.vue +154 -0
  73. package/src/components/button/EUIButton.vue.js.map +1 -0
  74. package/src/components/button/EUIButtonGroup.vue +287 -0
  75. package/src/components/button/EUIButtonGroup.vue.js.map +1 -0
  76. package/src/components/button/buttonAnimateTab.vue +74 -0
  77. package/src/components/button/buttonAnimateTab.vue.js.map +1 -0
  78. package/src/components/checkbox/EUICheckbox.stories.ts +58 -0
  79. package/src/components/checkbox/EUICheckbox.vue +110 -0
  80. package/src/components/checkbox/EUICheckbox.vue.js.map +1 -0
  81. package/src/components/datepicker/EUIDatepicker.stories.ts +492 -0
  82. package/src/components/datepicker/EUIDatepicker.vue +295 -0
  83. package/src/components/datepicker/EUIDatepicker.vue.js.map +1 -0
  84. package/src/components/delete.vue +262 -0
  85. package/src/components/delete.vue.js.map +1 -0
  86. package/src/components/dragModal/EUIDrag.vue +179 -0
  87. package/src/components/dragModal/EUIDrag.vue.js.map +1 -0
  88. package/src/components/dropdown/EUIMultiDropdown.stories.ts +294 -0
  89. package/src/components/dropdown/EUIMultiDropdown.vue +174 -0
  90. package/src/components/dropdown/EUIMultiDropdown.vue.js.map +1 -0
  91. package/src/components/errorMessage/EUIErrorMessage.scss +0 -0
  92. package/src/components/errorMessage/EUIErrorMessage.stories.ts +41 -0
  93. package/src/components/errorMessage/EUIErrorMessage.vue +25 -0
  94. package/src/components/errorMessage/EUIErrorMessage.vue.js.map +1 -0
  95. package/src/components/index.js.map +1 -0
  96. package/src/components/index.ts +62 -0
  97. package/src/components/input/EUIInput.stories.ts +387 -0
  98. package/src/components/input/EUIInput.vue +223 -0
  99. package/src/components/input/EUIInput.vue.js.map +1 -0
  100. package/src/components/input/EUINumberInput.vue +250 -0
  101. package/src/components/loader/EUICircleLoader.vue +31 -0
  102. package/src/components/loader/EUICircleLoader.vue.js.map +1 -0
  103. package/src/components/loader/EUICubeLoader.vue +237 -0
  104. package/src/components/loader/EUICubeLoader.vue.js.map +1 -0
  105. package/src/components/loader/EUILoader.stories.ts +99 -0
  106. package/src/components/loader/EUILoader.vue +17 -0
  107. package/src/components/loader/EUILoader.vue.js.map +1 -0
  108. package/src/components/loader/EUISquareLoader.vue +47 -0
  109. package/src/components/loader/EUISquareLoader.vue.js.map +1 -0
  110. package/src/components/modal/EUIModal.stories.ts +412 -0
  111. package/src/components/modal/EUIModal.vue +224 -0
  112. package/src/components/modal/EUIModal.vue.js.map +1 -0
  113. package/src/components/pillSelect/EUIPillSelect.stories.ts +74 -0
  114. package/src/components/pillSelect/EUIPillSelect.vue +149 -0
  115. package/src/components/pillSelect/EUIPillSelect.vue.js.map +1 -0
  116. package/src/components/popover/EUIPopover.stories.ts +306 -0
  117. package/src/components/popover/EUIPopover.vue +297 -0
  118. package/src/components/popover/EUIPopover.vue.js.map +1 -0
  119. package/src/components/radio/EUIRadio.stories.ts +54 -0
  120. package/src/components/radio/EUIRadio.vue +75 -0
  121. package/src/components/radio/EUIRadio.vue.js.map +1 -0
  122. package/src/components/searchInput/EUISearch.stories.ts +24 -0
  123. package/src/components/searchInput/EUISearch.vue +223 -0
  124. package/src/components/searchInput/EUISearch.vue.js.map +1 -0
  125. package/src/components/searchTagSelect/EUISearchTagSelect.vue +642 -0
  126. package/src/components/searchTagSelect/EUISearchTagSelect.vue.js.map +1 -0
  127. package/src/components/searchTagSelect/SearchInput.vue +167 -0
  128. package/src/components/searchTagSelect/SearchInput.vue.js.map +1 -0
  129. package/src/components/searchexpand/EUISearchExpand.vue +148 -0
  130. package/src/components/searchexpand/EUISearchExpand.vue.js.map +1 -0
  131. package/src/components/searchexpand/EUISearchToggle.vue +86 -0
  132. package/src/components/searchexpand/EUISearchToggle.vue.js.map +1 -0
  133. package/src/components/select/EUISelect.stories.ts +101 -0
  134. package/src/components/select/EUISelect.vue +1092 -0
  135. package/src/components/select/EUISelect.vue.js.map +1 -0
  136. package/src/components/selectSearch/EUISelectSearch.vue +23 -0
  137. package/src/components/selectSearch/EUISelectSearch.vue.js.map +1 -0
  138. package/src/components/slideover/EUISlideover.stories.ts +318 -0
  139. package/src/components/slideover/EUISlideover.vue +207 -0
  140. package/src/components/slideover/EUISlideover.vue.js.map +1 -0
  141. package/src/components/stepperTimeline/EUIStepperHorizontal.vue +242 -0
  142. package/src/components/stepperTimeline/EUIStepperHorizontal.vue.js.map +1 -0
  143. package/src/components/stepperTimeline/EUIStepperTimeline.stories.ts +54 -0
  144. package/src/components/stepperTimeline/EUIStepperTimeline.vue +16 -0
  145. package/src/components/stepperTimeline/EUIStepperTimeline.vue.js.map +1 -0
  146. package/src/components/stepperTimeline/EUIStepperVertical.vue +112 -0
  147. package/src/components/stepperTimeline/EUIStepperVertical.vue.js.map +1 -0
  148. package/src/components/table/ColumnResizeTable.vue +740 -0
  149. package/src/components/table/ColumnResizeTable.vue.js.map +1 -0
  150. package/src/components/table/EUIDashboardTable.vue +514 -0
  151. package/src/components/table/EUIDashboardTable.vue.js.map +1 -0
  152. package/src/components/table/EUIPageLimit.vue +66 -0
  153. package/src/components/table/EUIPageLimit.vue.js.map +1 -0
  154. package/src/components/table/EUIPagination.vue +175 -0
  155. package/src/components/table/EUIPagination.vue.js.map +1 -0
  156. package/src/components/table/EUIStudentPagination.vue +172 -0
  157. package/src/components/table/EUIStudentPagination.vue.js.map +1 -0
  158. package/src/components/table/EUITable.stories.ts +300 -0
  159. package/src/components/table/EUITable.vue +559 -0
  160. package/src/components/table/EUITable.vue.js.map +1 -0
  161. package/src/components/table/EUITableCheckbox.vue +98 -0
  162. package/src/components/table/EUITableCheckbox.vue.js.map +1 -0
  163. package/src/components/table/GrowthTable.vue +575 -0
  164. package/src/components/table/GrowthTable.vue.js.map +1 -0
  165. package/src/components/table/GrowthTableView.vue +108 -0
  166. package/src/components/table/GrowthTableView.vue.js.map +1 -0
  167. package/src/components/table/ResizeTableview.vue +198 -0
  168. package/src/components/table/ResizeTableview.vue.js.map +1 -0
  169. package/src/components/table/UCheckbox.vue +169 -0
  170. package/src/components/table/UCheckbox.vue.js.map +1 -0
  171. package/src/components/table/UTable.scss +69 -0
  172. package/src/components/table/UTable.vue +611 -0
  173. package/src/components/table/UTable.vue.js.map +1 -0
  174. package/src/components/table/UTableview.vue +189 -0
  175. package/src/components/table/UTableview.vue.js.map +1 -0
  176. package/src/components/tabs/EUITabOutline.vue +263 -0
  177. package/src/components/tabs/EUITabOutline.vue.js.map +1 -0
  178. package/src/components/tabs/EUITabs.vue +226 -0
  179. package/src/components/tabs/EUITabs.vue.js.map +1 -0
  180. package/src/components/tabs/EUItabs.stories.ts +137 -0
  181. package/src/components/tag/EUITag.stories.ts +53 -0
  182. package/src/components/tag/EUITag.vue +88 -0
  183. package/src/components/tag/EUITag.vue.js.map +1 -0
  184. package/src/components/telephone/EUITelephone.stories.ts +358 -0
  185. package/src/components/telephone/EUITelephone.vue +299 -0
  186. package/src/components/telephone/EUITelephone.vue.js.map +1 -0
  187. package/src/components/textArea/EUITextArea.stories.ts +134 -0
  188. package/src/components/textArea/EUITextArea.vue +155 -0
  189. package/src/components/textArea/EUITextArea.vue.js.map +1 -0
  190. package/src/components/timeLine/EUITimeLine.stories.ts +247 -0
  191. package/src/components/timeLine/EUITimeLine.vue +148 -0
  192. package/src/components/timeLine/EUITimeLine.vue.js.map +1 -0
  193. package/src/components/toggle/EUIToggle.stories.ts +63 -0
  194. package/src/components/toggle/EUIToggle.vue +101 -0
  195. package/src/components/toggle/EUIToggle.vue.js.map +1 -0
  196. package/src/components/tooltip/EUITooltip.stories.ts +53 -0
  197. package/src/components/tooltip/EUITooltip.vue +111 -0
  198. package/src/components/tooltip/EUITooltip.vue.js.map +1 -0
  199. package/src/components/uidemo/select-com.vue +120 -0
  200. package/src/components/uidemo/select-com.vue.js.map +1 -0
  201. package/src/data/books.js.map +1 -0
  202. package/src/data/books.ts +163 -0
  203. package/src/data/country.ts +56 -0
  204. package/src/data/tab.js.map +1 -0
  205. package/src/data/tab.ts +40 -0
  206. package/src/data/table.js.map +1 -0
  207. package/src/data/table.ts +5654 -0
  208. package/src/main.js.map +1 -0
  209. package/src/main.ts +5 -0
  210. package/src/style.scss +186 -0
  211. package/src/utils/helpers.js.map +1 -0
  212. package/src/utils/helpers.ts +30 -0
  213. package/src/utils/lodash.js.map +1 -0
  214. package/src/utils/lodash.ts +9 -0
  215. package/src/utils/types.js.map +1 -0
  216. package/src/utils/types.ts +9 -0
  217. package/src/vite-env.d.ts +5 -0
  218. package/dist/EUISelectSearch.vue.d.ts.map +0 -1
  219. package/dist/edvoy-ui.umd.js +0 -168
  220. /package/dist/{edvoy-ui.cjs.js → library-vue-ts.cjs.js} +0 -0
  221. /package/dist/{edvoy-ui.css → library-vue-ts.css} +0 -0
  222. /package/dist/{edvoy-ui.es.js → library-vue-ts.es.js} +0 -0
  223. /package/dist/{EUISelectSearch.vue.d.ts → selectSearch/EUISelectSearch.vue.d.ts} +0 -0
@@ -0,0 +1,287 @@
1
+ <template>
2
+ <div>
3
+ <div
4
+ class="inline-flex items-center gap-2 px-2 py-2 overflow-hidden transition-all duration-200 ease-in bg-white shadow-xl w-max shadow-purple-50"
5
+ :class="[rounded ? 'rounded-full' : 'rounded-lg']"
6
+ v-bind="$attrs"
7
+ >
8
+ <slot name="before" />
9
+ <nav
10
+ ref="navContainer"
11
+ class="relative z-0 inline-flex flex-row items-center gap-2"
12
+ >
13
+ <div
14
+ ref="navIndicator"
15
+ class="absolute left-0 top-0 h-full w-auto -z-[1] transition-all duration-350 ease-[cubic-bezier(0.15,0.3,0.25,1)]"
16
+ :class="[
17
+ getBtnClass(activeBtnName),
18
+ rounded ? 'rounded-full' : 'rounded-lg',
19
+ ]"
20
+ ></div>
21
+ <button
22
+ v-for="(data, index) in items"
23
+ :key="`data-${index}`"
24
+ v-bind="buttonAttrs"
25
+ :type="type"
26
+ :size="size"
27
+ :iconType="iconType"
28
+ :data-name="data.name"
29
+ :class="[
30
+ 'capitalize box-border border-none inline-flex flex-row gap-x-2 items-center !bg-transparent',
31
+ rounded ? 'rounded-full' : 'rounded-lg',
32
+ getBtnClass(data.name || ''),
33
+ { 'bar-indicator': data.name !== activeBtnName },
34
+ ]"
35
+ :disabled="disabled"
36
+ :loading="loading"
37
+ :icon="icon"
38
+ @click="handleOnChange(data || '')"
39
+ style="transition: all 350ms cubic-bezier(0.15, 0.3, 0.25, 1)"
40
+ >
41
+ <component
42
+ :is="icon"
43
+ v-if="iconType === 'icon' || iconType === 'startIcon'"
44
+ :class="[iconWidth]"
45
+ />
46
+ <slot :data="data" :activeName="activeBtnName">
47
+ {{ data?.name }}
48
+ </slot>
49
+ <component
50
+ :is="icon"
51
+ v-if="iconType === 'endIcon'"
52
+ :class="[iconWidth]"
53
+ />
54
+ <svg
55
+ v-if="loading"
56
+ class="animate-spin"
57
+ :class="[iconWidth]"
58
+ xmlns="http://www.w3.org/2000/svg"
59
+ fill="none"
60
+ viewBox="0 0 24 24"
61
+ >
62
+ <circle
63
+ class="opacity-25"
64
+ cx="12"
65
+ cy="12"
66
+ r="10"
67
+ stroke="currentColor"
68
+ stroke-width="4"
69
+ />
70
+ <path
71
+ fill="currentColor"
72
+ class="opacity-75"
73
+ d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
74
+ />
75
+ </svg>
76
+ </button>
77
+ </nav>
78
+ <slot name="after" />
79
+ </div>
80
+ </div>
81
+ </template>
82
+
83
+ <script setup lang="ts">
84
+ import {
85
+ computed,
86
+ nextTick,
87
+ onMounted,
88
+ PropType,
89
+ reactive,
90
+ ref,
91
+ toRefs,
92
+ useAttrs,
93
+ } from "vue";
94
+
95
+ interface Item {
96
+ name: string;
97
+ [key: string]: any;
98
+ }
99
+
100
+ const props = defineProps({
101
+ items: {
102
+ type: Array as () => Item[],
103
+ default: () => [],
104
+ },
105
+ defaultActive: {
106
+ type: String,
107
+ default: "",
108
+ },
109
+ type: {
110
+ type: String as PropType<"button" | "submit" | "reset">,
111
+ default: "button",
112
+ },
113
+ size: {
114
+ type: String as PropType<"xs" | "sm" | "md" | "lg">,
115
+ default: "md",
116
+ },
117
+ activeColor: {
118
+ type: String as PropType<
119
+ | "danger"
120
+ | "success"
121
+ | "black"
122
+ | "white"
123
+ | "purple"
124
+ | "secondary"
125
+ | "tertiary"
126
+ >,
127
+ default: "white",
128
+ },
129
+ iconType: {
130
+ type: String as PropType<"startIcon" | "endIcon" | "icon">,
131
+ default: "",
132
+ },
133
+ icon: {
134
+ type: [String, Object, Function],
135
+ default: "",
136
+ },
137
+ rounded: {
138
+ type: Boolean,
139
+ default: false,
140
+ },
141
+ loading: Boolean,
142
+ disabled: Boolean,
143
+ });
144
+
145
+ defineOptions({
146
+ inheritAttrs: false,
147
+ });
148
+ const attrs = useAttrs();
149
+ const buttonAttrs = computed(() => {
150
+ const { class: _class, style: _style, id: _id, ...rest } = attrs;
151
+ return rest;
152
+ });
153
+
154
+ const emit = defineEmits<{
155
+ (event: "update:activeButton", activeButton: Item): void;
156
+ }>();
157
+
158
+ const navIndicator = ref<HTMLElement | null>(null);
159
+ const navContainer = ref<HTMLElement | null>(null);
160
+
161
+ const { items, defaultActive } = toRefs(props);
162
+ const activeBtnName = ref(defaultActive.value || items.value[0]?.name || "");
163
+
164
+ const marker = (el: HTMLElement) => {
165
+ const indicator = navIndicator.value;
166
+ if (indicator && el) {
167
+ indicator.style.left = el.offsetLeft + "px";
168
+ indicator.style.width = el.offsetWidth + "px";
169
+ }
170
+ };
171
+
172
+ const updateMarkerPosition = () => {
173
+ const activeBtn = navContainer.value?.querySelector(
174
+ `button[data-name="${activeBtnName.value}"]`
175
+ );
176
+ if (activeBtn) {
177
+ marker(activeBtn as HTMLElement);
178
+ }
179
+ };
180
+
181
+ const handleOnChange = (val: any) => {
182
+ activeBtnName.value = val?.name;
183
+ emit("update:activeButton", val);
184
+ nextTick(() => {
185
+ updateMarkerPosition();
186
+ });
187
+ };
188
+
189
+ onMounted(() => {
190
+ nextTick(() => {
191
+ requestAnimationFrame(() => {
192
+ updateMarkerPosition();
193
+ });
194
+ });
195
+ });
196
+
197
+ // Computed classes for button size
198
+ const sizeClasses = reactive({
199
+ xs: "text-xs font-medium leading-[normal]", //24
200
+ sm: "text-sm font-medium", //32
201
+ md: "text-base font-semibold", //40
202
+ lg: "text-base font-semibold", //48
203
+ });
204
+
205
+ const btnColors = {
206
+ black: {
207
+ enabled:
208
+ "text-white bg-gray-900 hover:bg-gray-800 active:bg-black cursor-pointer active:shadow-black/50",
209
+ disabled: "bg-opacity-60 cursor-not-allowed text-gray-200 bg-gray-800",
210
+ },
211
+ white: {
212
+ enabled:
213
+ "bg-white hover:bg-gray-100 text-gray-500 hover:text-gray-900 cursor-pointer active:shadow-white/50 active:bg-transparent",
214
+ disabled: "bg-opacity-80 cursor-not-allowed text-gray-400 bg-gray-200",
215
+ },
216
+ danger: {
217
+ enabled:
218
+ "bg-red-500 hover:bg-red-600 active:bg-red-500 text-white cursor-pointer active:shadow-red-500/50",
219
+ disabled: "bg-opacity-60 cursor-not-allowed text-gray-200 bg-red-500",
220
+ },
221
+ success: {
222
+ enabled:
223
+ "bg-green-600 hover:bg-green-700 active:bg-green-600 text-white cursor-pointer active:shadow-green-500/50",
224
+ disabled: "bg-opacity-60 cursor-not-allowed text-gray-200 bg-green-600",
225
+ },
226
+ purple: {
227
+ enabled:
228
+ "bg-purple-700 hover:bg-purple-800 active:bg-purple-700 text-white cursor-pointer active:shadow-purple-500/50",
229
+ disabled: "bg-opacity-60 cursor-not-allowed text-gray-200 bg-purple-500",
230
+ },
231
+ secondary: {
232
+ enabled:
233
+ "bg-purple-100 hover:bg-purple-50 active:bg-purple-100 cursor-pointer text-gray-700 active:shadow-purple-200",
234
+ disabled: "bg-opacity-75 cursor-not-allowed text-gray-400 bg-purple-50",
235
+ },
236
+ tertiary: {
237
+ enabled:
238
+ "bg-gray-100 hover:bg-gray-50 active:bg-gray-100 text-gray-700 cursor-pointer active:shadow-bg-gray-200/50 ring-1 ring-gray-200",
239
+ disabled:
240
+ "bg-opacity-75 cursor-not-allowed text-gray-400 bg-gray-50 ring-1 ring-gray-100",
241
+ },
242
+ };
243
+
244
+ const iconClasses = {
245
+ lg: props.iconType === "icon" ? "p-3" : "px-6 py-3",
246
+ md: props.iconType === "icon" ? "p-2" : "px-4 py-2",
247
+ sm: props.iconType === "icon" ? "p-1.5" : "px-4 py-1.5",
248
+ xs: props.iconType === "icon" ? "p-1" : "px-3 py-1",
249
+ };
250
+
251
+ const iconWidthClasses = reactive({
252
+ xs: "w-4 h-4 text-current",
253
+ sm: "w-5 h-5 text-current",
254
+ md: "w-6 h-6 text-current",
255
+ lg: "w-6 h-6 text-current",
256
+ });
257
+
258
+ const iconWidth = computed(() => {
259
+ return iconWidthClasses[props.size] || "";
260
+ });
261
+
262
+ const getBtnClass = (btnName: string) => {
263
+ const isActive = btnName === activeBtnName.value;
264
+ const colorKey = isActive ? props.activeColor : "white";
265
+ const state = props.disabled ? "disabled" : "enabled";
266
+ const colorClass = btnColors[colorKey] ? btnColors[colorKey][state] : "";
267
+ const sizeClass = sizeClasses[props.size] || "";
268
+ const typeClass = iconClasses[props.size] || "";
269
+ return `${colorClass} ${sizeClass} ${typeClass}`;
270
+ };
271
+ </script>
272
+
273
+ <style lang="scss" scoped>
274
+ .bar-indicator {
275
+ @apply relative;
276
+ &::before {
277
+ content: "";
278
+ transition: 0.4s;
279
+ will-change: opacity;
280
+ @apply absolute -bottom-4 left-0 w-full h-[0.1875rem] rounded-t-xl bg-gray-300 z-[-1] origin-bottom opacity-0;
281
+ }
282
+ }
283
+
284
+ .bar-indicator:hover::before {
285
+ @apply opacity-100 -bottom-2;
286
+ }
287
+ </style>
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EUIButtonGroup.vue.js","sourceRoot":"","sources":["EUIButtonGroup.vue"],"names":[],"mappings":"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"}
@@ -0,0 +1,74 @@
1
+ <template>
2
+ <div class="inline-flex flex-col items-end w-full space-y-20">
3
+ <div
4
+ class="inline-flex items-center gap-2 px-3 py-3 transition-colors duration-100 ease-in bg-white rounded-full shadow-xl w-max shadow-purple-50"
5
+ >
6
+ <slot name="before" />
7
+ <nav class="relative inline-flex flex-row items-center gap-2">
8
+ <div id="nav-indicator"></div>
9
+ <EUIBtnGroup
10
+ v-for="(data, index) in allDays"
11
+ :key="`data-${index}`"
12
+ size="sm"
13
+ :data-name="data.name"
14
+ :color="activeDays === data.name ? 'tertiary' : 'white'"
15
+ rounded
16
+ @click="handleOnChange(data.name)"
17
+ >
18
+ {{ data.name }}
19
+ <small class="opacity-75">({{ data.count }})</small></EUIBtnGroup
20
+ >
21
+ </nav>
22
+ <slot name="after" />
23
+ </div>
24
+ </div>
25
+ </template>
26
+
27
+ <script setup lang="ts">
28
+ import { nextTick, onMounted, ref } from "vue";
29
+ import EUIBtnGroup from "./EUIBtnGroup.vue";
30
+
31
+ const allDays = ref([
32
+ { name: "7 days", count: 5 },
33
+ { name: "15 days", count: 10 },
34
+ { name: "16-30 days", count: 20 },
35
+ { name: "31-60 days", count: 121 },
36
+ { name: "61-90 days", count: 40 },
37
+ ]);
38
+
39
+ const activeDays = ref(allDays.value[0].name);
40
+
41
+ onMounted(() => {
42
+ nextTick(() => {
43
+ const activeBtn = document.querySelector(
44
+ `nav button[data-name="${activeDays.value}"]`
45
+ );
46
+ if (activeBtn) marker(activeBtn as HTMLElement);
47
+ });
48
+ });
49
+
50
+ const marker = (el: HTMLElement) => {
51
+ const indicator = document.querySelector("#nav-indicator") as HTMLElement;
52
+ if (indicator && el) {
53
+ indicator.style.left = el.offsetLeft + "px";
54
+ indicator.style.width = el.offsetWidth + "px";
55
+ }
56
+ };
57
+
58
+ const handleOnChange = (val: string) => {
59
+ activeDays.value = val;
60
+ nextTick(() => {
61
+ const activeBtn = document.querySelector(
62
+ `nav button[data-name="${activeDays.value}"]`
63
+ );
64
+ if (activeBtn) marker(activeBtn as HTMLElement);
65
+ });
66
+ };
67
+ </script>
68
+
69
+ <style lang="scss" scoped>
70
+ #nav-indicator {
71
+ transition: all 350ms cubic-bezier(0.15, 0.3, 0.25, 1);
72
+ @apply absolute w-auto h-1 bg-gray-500 rounded-t-lg -bottom-3;
73
+ }
74
+ </style>
@@ -0,0 +1 @@
1
+ {"version":3,"file":"buttonAnimateTab.vue.js","sourceRoot":"","sources":["buttonAnimateTab.vue"],"names":[],"mappings":"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"}
@@ -0,0 +1,58 @@
1
+ import type { Meta, StoryObj } from "@storybook/vue3";
2
+ import EUICheckbox from "./EUICheckbox.vue";
3
+
4
+ // Meta configuration for the component's stories
5
+ const meta = {
6
+ title: "Forms/Checkbox",
7
+ component: EUICheckbox,
8
+ tags: ["autodocs"],
9
+ argTypes: {
10
+ label: {
11
+ description: "The label displayed next to the checkbox",
12
+ control: "text",
13
+ },
14
+ disabled: {
15
+ description: "Disables the checkbox when set to true",
16
+ control: "boolean",
17
+ },
18
+ modelValue: {
19
+ description: "Controls the checked state of the checkbox",
20
+ control: "boolean",
21
+ },
22
+ errors: {
23
+ description:
24
+ "An object that contains error messages or validation information",
25
+ control: "object",
26
+ },
27
+ name: {
28
+ description:
29
+ "The name attribute for the checkbox input, useful for forms",
30
+ control: "text",
31
+ },
32
+ },
33
+ } satisfies Meta<typeof EUICheckbox>;
34
+
35
+ export default meta;
36
+ type Story = StoryObj<typeof meta>;
37
+
38
+ // Default story with minimum props
39
+ export const Default: Story = {
40
+ args: {
41
+ label: "Accept Terms & Conditions",
42
+ modelValue: false,
43
+ disabled: false,
44
+ name: "checkbox",
45
+ errors: {
46
+ message: "Checkbok not checked",
47
+ },
48
+ },
49
+ };
50
+
51
+ // Disabled state story
52
+ export const Disabled: Story = {
53
+ args: {
54
+ label: "Disabled Checkbox",
55
+ modelValue: false,
56
+ disabled: true,
57
+ },
58
+ };
@@ -0,0 +1,110 @@
1
+ <template>
2
+ <div>
3
+ <label class="flex flex-row items-center scale-100 translate-x-0 translate-y-0 eui-checkbox">
4
+ <input v-model="isChecked" type="checkbox" id="checkbox" class="appearance-none sr-only input-checkbox" :disabled="disabled"
5
+ @change="toggle($event)" />
6
+ <div class="cbx-icon" for="checkbox">
7
+ <span>
8
+ <svg width="14px" height="14px">
9
+ <use xlink:href="#check-box"></use>
10
+ </svg>
11
+ </span>
12
+ <svg class="absolute pointer-events-none select-none inline-svg size-0">
13
+ <symbol id="check-box" viewbox="0 0 14 14">
14
+ <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
15
+ </symbol>
16
+ </svg>
17
+ </div>
18
+ <slot name="label">
19
+ <span v-if="label" class="text-sm font-medium tracking-wide text-gray-700 ms-2 first-letter:capitalize">{{ label }}</span>
20
+ </slot>
21
+ </label>
22
+ <template v-if="errors && Object.keys(errors).length">
23
+ <EUIErrorMessage :errors="errors" :name="name" />
24
+ </template>
25
+ </div>
26
+ </template>
27
+
28
+ <script setup lang="ts">
29
+ import { PropType, watch,ref } from "vue";
30
+ import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
31
+
32
+ const props = defineProps({
33
+ errors: { type: Object, required: false, default: () => {} },
34
+ name: {
35
+ type: String,
36
+ required: false,
37
+ default: "",
38
+ },
39
+ modelValue: {
40
+ type: Boolean as PropType<boolean>,
41
+ required: true,
42
+ default: false,
43
+ },
44
+ disabled: {
45
+ type: Boolean,
46
+ default: false,
47
+ },
48
+ label: { type: String as PropType<string>, required: true, default: "" },
49
+ });
50
+
51
+ const emit = defineEmits(["update:modelValue", "toggle"]);
52
+ const isChecked = ref<boolean>(props.modelValue);
53
+
54
+ watch(isChecked, (newValue) => {
55
+ emit("update:modelValue", newValue);
56
+ });
57
+
58
+ const toggle = ($event: Event) => {
59
+ if($event) {
60
+ emit("toggle", isChecked.value);
61
+ }
62
+ };
63
+
64
+ watch(props, (newValue) => {
65
+ isChecked.value = newValue.modelValue;
66
+ });
67
+ </script>
68
+
69
+ <style lang="scss">
70
+ .eui-checkbox .cbx-icon {
71
+ transition: all 0.2s ease;
72
+ @apply select-none cursor-pointer p-px rounded-md overflow-hidden inline-block scale-110;
73
+ }
74
+
75
+ .eui-checkbox .cbx-icon span {
76
+ transform: translate3d(0, 0, 0);
77
+ transition: all 0.2s ease;
78
+ @apply float-left align-middle relative size-5 border-[1.5px] border-gray-400 rounded scale-100;
79
+ }
80
+
81
+ .eui-checkbox .cbx-icon span > svg {
82
+ top: 3.5px;
83
+ left: 2.5px;
84
+ stroke-width: 1.75;
85
+ stroke-linecap: round;
86
+ stroke-linejoin: round;
87
+ stroke-dasharray: 18px;
88
+ stroke-dashoffset: 18px;
89
+ transition: all 0.3s ease;
90
+ transition-delay: 0.1s;
91
+ transform: translate3d(0, 0, 0);
92
+ @apply absolute fill-none stroke-white;
93
+ }
94
+
95
+ .eui-checkbox .input-checkbox:checked + .cbx-icon > span {
96
+ animation: anim 0.4s ease;
97
+ @apply bg-purple-700 border-purple-700;
98
+ }
99
+
100
+ .eui-checkbox .input-checkbox:checked + .cbx-icon span > svg {
101
+ stroke-dashoffset: 0;
102
+ transition: rotate(8deg);
103
+ }
104
+
105
+ @keyframes anim {
106
+ 50% {
107
+ transform: scale(0.85);
108
+ }
109
+ }
110
+ </style>
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EUICheckbox.vue.js","sourceRoot":"","sources":["EUICheckbox.vue"],"names":[],"mappings":"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"}