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

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 (215) hide show
  1. package/package.json +2 -5
  2. package/src/App.vue +0 -16
  3. package/src/App.vue.js.map +0 -1
  4. package/src/assets/fonts/gilroy/GilroyBold/font.woff +0 -0
  5. package/src/assets/fonts/gilroy/GilroyBold/font.woff2 +0 -0
  6. package/src/assets/fonts/gilroy/GilroyBoldItalic/font.woff +0 -0
  7. package/src/assets/fonts/gilroy/GilroyBoldItalic/font.woff2 +0 -0
  8. package/src/assets/fonts/gilroy/GilroyExtraBold/font.woff +0 -0
  9. package/src/assets/fonts/gilroy/GilroyExtraBold/font.woff2 +0 -0
  10. package/src/assets/fonts/gilroy/GilroyExtraBoldItalic/font.woff +0 -0
  11. package/src/assets/fonts/gilroy/GilroyExtraBoldItalic/font.woff2 +0 -0
  12. package/src/assets/fonts/gilroy/GilroyMedium/font.woff +0 -0
  13. package/src/assets/fonts/gilroy/GilroyMedium/font.woff2 +0 -0
  14. package/src/assets/fonts/gilroy/GilroyRegular/font.woff +0 -0
  15. package/src/assets/fonts/gilroy/GilroyRegular/font.woff2 +0 -0
  16. package/src/assets/fonts/gilroy/GilroySemiBold/font.woff +0 -0
  17. package/src/assets/fonts/gilroy/GilroySemiBold/font.woff2 +0 -0
  18. package/src/assets/fonts/inter/Inter-Bold.woff +0 -0
  19. package/src/assets/fonts/inter/Inter-Bold.woff2 +0 -0
  20. package/src/assets/fonts/inter/Inter-Italic.woff +0 -0
  21. package/src/assets/fonts/inter/Inter-Italic.woff2 +0 -0
  22. package/src/assets/fonts/inter/Inter-Medium.woff +0 -0
  23. package/src/assets/fonts/inter/Inter-Medium.woff2 +0 -0
  24. package/src/assets/fonts/inter/Inter-MediumItalic.woff +0 -0
  25. package/src/assets/fonts/inter/Inter-MediumItalic.woff2 +0 -0
  26. package/src/assets/fonts/inter/Inter-Regular.woff +0 -0
  27. package/src/assets/fonts/inter/Inter-Regular.woff2 +0 -0
  28. package/src/assets/fonts/inter/Inter-SemiBold.woff +0 -0
  29. package/src/assets/fonts/inter/Inter-SemiBold.woff2 +0 -0
  30. package/src/assets/fonts/inter/Inter-SemiBoldItalic.woff +0 -0
  31. package/src/assets/fonts/inter/Inter-SemiBoldItalic.woff2 +0 -0
  32. package/src/assets/images/search-nodata.png +0 -0
  33. package/src/assets/scss/body.scss +0 -25
  34. package/src/assets/svg/CheckTick.vue +0 -21
  35. package/src/assets/svg/CheckTick.vue.js.map +0 -1
  36. package/src/assets/svg/ChevronBigDown.vue +0 -22
  37. package/src/assets/svg/ChevronBigDown.vue.js.map +0 -1
  38. package/src/assets/svg/ChevronDownSolid.vue +0 -19
  39. package/src/assets/svg/ChevronDownSolid.vue.js.map +0 -1
  40. package/src/assets/svg/ChevronDownStroke.vue +0 -22
  41. package/src/assets/svg/ChevronDownStroke.vue.js.map +0 -1
  42. package/src/assets/svg/ChevronDownStrokeSolid.vue +0 -19
  43. package/src/assets/svg/ChevronDownStrokeSolid.vue.js.map +0 -1
  44. package/src/assets/svg/SearchBigZoomIn.vue +0 -21
  45. package/src/assets/svg/SearchBigZoomIn.vue.js.map +0 -1
  46. package/src/assets/svg/SortArrow.vue +0 -24
  47. package/src/assets/svg/SortArrow.vue.js.map +0 -1
  48. package/src/assets/svg/Student.vue +0 -30
  49. package/src/assets/svg/Student.vue.js.map +0 -1
  50. package/src/assets/svg/partner.vue +0 -33
  51. package/src/assets/svg/partner.vue.js.map +0 -1
  52. package/src/assets/svg/people.vue +0 -25
  53. package/src/assets/svg/people.vue.js.map +0 -1
  54. package/src/assets/vue.svg +0 -1
  55. package/src/components/HelloWorld.vue +0 -1974
  56. package/src/components/HelloWorld.vue.js.map +0 -1
  57. package/src/components/accordion/EUIAccordion.stories.ts +0 -204
  58. package/src/components/accordion/EUIAccordion.vue +0 -152
  59. package/src/components/accordion/EUIAccordion.vue.js.map +0 -1
  60. package/src/components/alerts/EUIAlerts.stories.ts +0 -217
  61. package/src/components/alerts/EUIAlerts.vue +0 -194
  62. package/src/components/alerts/EUIAlerts.vue.js.map +0 -1
  63. package/src/components/avatar/EUIAvatar.stories.ts +0 -157
  64. package/src/components/avatar/EUIAvatar.vue +0 -96
  65. package/src/components/avatar/EUIAvatar.vue.js.map +0 -1
  66. package/src/components/breadcrumb/EUIBreadcrumb.stories.ts +0 -75
  67. package/src/components/breadcrumb/EUIBreadcrumb.vue +0 -59
  68. package/src/components/breadcrumb/EUIBreadcrumb.vue.js.map +0 -1
  69. package/src/components/button/EUIButton.stories.ts +0 -270
  70. package/src/components/button/EUIButton.vue +0 -154
  71. package/src/components/button/EUIButton.vue.js.map +0 -1
  72. package/src/components/button/EUIButtonGroup.vue +0 -287
  73. package/src/components/button/EUIButtonGroup.vue.js.map +0 -1
  74. package/src/components/button/buttonAnimateTab.vue +0 -74
  75. package/src/components/button/buttonAnimateTab.vue.js.map +0 -1
  76. package/src/components/checkbox/EUICheckbox.stories.ts +0 -58
  77. package/src/components/checkbox/EUICheckbox.vue +0 -110
  78. package/src/components/checkbox/EUICheckbox.vue.js.map +0 -1
  79. package/src/components/datepicker/EUIDatepicker.stories.ts +0 -492
  80. package/src/components/datepicker/EUIDatepicker.vue +0 -295
  81. package/src/components/datepicker/EUIDatepicker.vue.js.map +0 -1
  82. package/src/components/delete.vue +0 -262
  83. package/src/components/delete.vue.js.map +0 -1
  84. package/src/components/dragModal/EUIDrag.vue +0 -179
  85. package/src/components/dragModal/EUIDrag.vue.js.map +0 -1
  86. package/src/components/dropdown/EUIMultiDropdown.stories.ts +0 -294
  87. package/src/components/dropdown/EUIMultiDropdown.vue +0 -174
  88. package/src/components/dropdown/EUIMultiDropdown.vue.js.map +0 -1
  89. package/src/components/errorMessage/EUIErrorMessage.scss +0 -0
  90. package/src/components/errorMessage/EUIErrorMessage.stories.ts +0 -41
  91. package/src/components/errorMessage/EUIErrorMessage.vue +0 -25
  92. package/src/components/errorMessage/EUIErrorMessage.vue.js.map +0 -1
  93. package/src/components/index.js.map +0 -1
  94. package/src/components/index.ts +0 -62
  95. package/src/components/input/EUIInput.stories.ts +0 -387
  96. package/src/components/input/EUIInput.vue +0 -223
  97. package/src/components/input/EUIInput.vue.js.map +0 -1
  98. package/src/components/input/EUINumberInput.vue +0 -250
  99. package/src/components/loader/EUICircleLoader.vue +0 -31
  100. package/src/components/loader/EUICircleLoader.vue.js.map +0 -1
  101. package/src/components/loader/EUICubeLoader.vue +0 -237
  102. package/src/components/loader/EUICubeLoader.vue.js.map +0 -1
  103. package/src/components/loader/EUILoader.stories.ts +0 -99
  104. package/src/components/loader/EUILoader.vue +0 -17
  105. package/src/components/loader/EUILoader.vue.js.map +0 -1
  106. package/src/components/loader/EUISquareLoader.vue +0 -47
  107. package/src/components/loader/EUISquareLoader.vue.js.map +0 -1
  108. package/src/components/modal/EUIModal.stories.ts +0 -412
  109. package/src/components/modal/EUIModal.vue +0 -224
  110. package/src/components/modal/EUIModal.vue.js.map +0 -1
  111. package/src/components/pillSelect/EUIPillSelect.stories.ts +0 -74
  112. package/src/components/pillSelect/EUIPillSelect.vue +0 -149
  113. package/src/components/pillSelect/EUIPillSelect.vue.js.map +0 -1
  114. package/src/components/popover/EUIPopover.stories.ts +0 -306
  115. package/src/components/popover/EUIPopover.vue +0 -297
  116. package/src/components/popover/EUIPopover.vue.js.map +0 -1
  117. package/src/components/radio/EUIRadio.stories.ts +0 -54
  118. package/src/components/radio/EUIRadio.vue +0 -75
  119. package/src/components/radio/EUIRadio.vue.js.map +0 -1
  120. package/src/components/searchInput/EUISearch.stories.ts +0 -24
  121. package/src/components/searchInput/EUISearch.vue +0 -223
  122. package/src/components/searchInput/EUISearch.vue.js.map +0 -1
  123. package/src/components/searchTagSelect/EUISearchTagSelect.vue +0 -642
  124. package/src/components/searchTagSelect/EUISearchTagSelect.vue.js.map +0 -1
  125. package/src/components/searchTagSelect/SearchInput.vue +0 -167
  126. package/src/components/searchTagSelect/SearchInput.vue.js.map +0 -1
  127. package/src/components/searchexpand/EUISearchExpand.vue +0 -148
  128. package/src/components/searchexpand/EUISearchExpand.vue.js.map +0 -1
  129. package/src/components/searchexpand/EUISearchToggle.vue +0 -86
  130. package/src/components/searchexpand/EUISearchToggle.vue.js.map +0 -1
  131. package/src/components/select/EUISelect.stories.ts +0 -101
  132. package/src/components/select/EUISelect.vue +0 -1092
  133. package/src/components/select/EUISelect.vue.js.map +0 -1
  134. package/src/components/selectSearch/EUISelectSearch.vue +0 -23
  135. package/src/components/selectSearch/EUISelectSearch.vue.js.map +0 -1
  136. package/src/components/slideover/EUISlideover.stories.ts +0 -318
  137. package/src/components/slideover/EUISlideover.vue +0 -207
  138. package/src/components/slideover/EUISlideover.vue.js.map +0 -1
  139. package/src/components/stepperTimeline/EUIStepperHorizontal.vue +0 -242
  140. package/src/components/stepperTimeline/EUIStepperHorizontal.vue.js.map +0 -1
  141. package/src/components/stepperTimeline/EUIStepperTimeline.stories.ts +0 -54
  142. package/src/components/stepperTimeline/EUIStepperTimeline.vue +0 -16
  143. package/src/components/stepperTimeline/EUIStepperTimeline.vue.js.map +0 -1
  144. package/src/components/stepperTimeline/EUIStepperVertical.vue +0 -112
  145. package/src/components/stepperTimeline/EUIStepperVertical.vue.js.map +0 -1
  146. package/src/components/table/ColumnResizeTable.vue +0 -740
  147. package/src/components/table/ColumnResizeTable.vue.js.map +0 -1
  148. package/src/components/table/EUIDashboardTable.vue +0 -514
  149. package/src/components/table/EUIDashboardTable.vue.js.map +0 -1
  150. package/src/components/table/EUIPageLimit.vue +0 -66
  151. package/src/components/table/EUIPageLimit.vue.js.map +0 -1
  152. package/src/components/table/EUIPagination.vue +0 -175
  153. package/src/components/table/EUIPagination.vue.js.map +0 -1
  154. package/src/components/table/EUIStudentPagination.vue +0 -172
  155. package/src/components/table/EUIStudentPagination.vue.js.map +0 -1
  156. package/src/components/table/EUITable.stories.ts +0 -300
  157. package/src/components/table/EUITable.vue +0 -559
  158. package/src/components/table/EUITable.vue.js.map +0 -1
  159. package/src/components/table/EUITableCheckbox.vue +0 -98
  160. package/src/components/table/EUITableCheckbox.vue.js.map +0 -1
  161. package/src/components/table/GrowthTable.vue +0 -575
  162. package/src/components/table/GrowthTable.vue.js.map +0 -1
  163. package/src/components/table/GrowthTableView.vue +0 -108
  164. package/src/components/table/GrowthTableView.vue.js.map +0 -1
  165. package/src/components/table/ResizeTableview.vue +0 -198
  166. package/src/components/table/ResizeTableview.vue.js.map +0 -1
  167. package/src/components/table/UCheckbox.vue +0 -169
  168. package/src/components/table/UCheckbox.vue.js.map +0 -1
  169. package/src/components/table/UTable.scss +0 -69
  170. package/src/components/table/UTable.vue +0 -611
  171. package/src/components/table/UTable.vue.js.map +0 -1
  172. package/src/components/table/UTableview.vue +0 -189
  173. package/src/components/table/UTableview.vue.js.map +0 -1
  174. package/src/components/tabs/EUITabOutline.vue +0 -263
  175. package/src/components/tabs/EUITabOutline.vue.js.map +0 -1
  176. package/src/components/tabs/EUITabs.vue +0 -226
  177. package/src/components/tabs/EUITabs.vue.js.map +0 -1
  178. package/src/components/tabs/EUItabs.stories.ts +0 -137
  179. package/src/components/tag/EUITag.stories.ts +0 -53
  180. package/src/components/tag/EUITag.vue +0 -88
  181. package/src/components/tag/EUITag.vue.js.map +0 -1
  182. package/src/components/telephone/EUITelephone.stories.ts +0 -358
  183. package/src/components/telephone/EUITelephone.vue +0 -299
  184. package/src/components/telephone/EUITelephone.vue.js.map +0 -1
  185. package/src/components/textArea/EUITextArea.stories.ts +0 -134
  186. package/src/components/textArea/EUITextArea.vue +0 -155
  187. package/src/components/textArea/EUITextArea.vue.js.map +0 -1
  188. package/src/components/timeLine/EUITimeLine.stories.ts +0 -247
  189. package/src/components/timeLine/EUITimeLine.vue +0 -148
  190. package/src/components/timeLine/EUITimeLine.vue.js.map +0 -1
  191. package/src/components/toggle/EUIToggle.stories.ts +0 -63
  192. package/src/components/toggle/EUIToggle.vue +0 -101
  193. package/src/components/toggle/EUIToggle.vue.js.map +0 -1
  194. package/src/components/tooltip/EUITooltip.stories.ts +0 -53
  195. package/src/components/tooltip/EUITooltip.vue +0 -111
  196. package/src/components/tooltip/EUITooltip.vue.js.map +0 -1
  197. package/src/components/uidemo/select-com.vue +0 -120
  198. package/src/components/uidemo/select-com.vue.js.map +0 -1
  199. package/src/data/books.js.map +0 -1
  200. package/src/data/books.ts +0 -163
  201. package/src/data/country.ts +0 -56
  202. package/src/data/tab.js.map +0 -1
  203. package/src/data/tab.ts +0 -40
  204. package/src/data/table.js.map +0 -1
  205. package/src/data/table.ts +0 -5654
  206. package/src/main.js.map +0 -1
  207. package/src/main.ts +0 -5
  208. package/src/style.scss +0 -186
  209. package/src/utils/helpers.js.map +0 -1
  210. package/src/utils/helpers.ts +0 -30
  211. package/src/utils/lodash.js.map +0 -1
  212. package/src/utils/lodash.ts +0 -9
  213. package/src/utils/types.js.map +0 -1
  214. package/src/utils/types.ts +0 -9
  215. package/src/vite-env.d.ts +0 -5
@@ -1,179 +0,0 @@
1
- <template>
2
- <div
3
- v-if="isVisible"
4
- ref="containerRef"
5
- class="draggable-card"
6
- :style="containerStyle"
7
- >
8
- <!-- HEADER / DRAG HANDLE -->
9
- <div
10
- class="flex items-center justify-between flex-shrink-0 px-2 bg-white cursor-grab"
11
- @mousedown.prevent="startDrag"
12
- @touchstart.prevent="startDrag"
13
- >
14
- <div class="flex items-center gap-4">
15
- <EUIAvatar
16
- image-url="https://tinyurl.com/43e5fxh9"
17
- :profile="true"
18
- full-name="JohnCena"
19
- :show-status="true"
20
- status="Online"
21
- size="sm"
22
- >
23
- <template #name>John Cena</template>
24
- <template #designation>Actor</template>
25
- </EUIAvatar>
26
- </div>
27
- <EUIButton
28
- color="white"
29
- size="xs"
30
- rounded
31
- icon-type="icon"
32
- :icon="ChevronBigDown"
33
- :class="minimized ? 'rotate-0' : '-rotate-90'"
34
- @click="onToggle"
35
- />
36
- </div>
37
-
38
- <!-- BODY -->
39
- <transition name="slide-fade">
40
- <div
41
- v-if="minimized"
42
- class="px-4 py-3 mt-4 overflow-y-auto border border-gray-100 border-solid rounded-lg bg-gray-50"
43
- >
44
- <h3 class="mb-2 text-lg font-semibold text-gray-900">
45
- Card Title Here....
46
- </h3>
47
- <p class="mb-4 text-sm text-gray-500">
48
- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Corporis non
49
- velit doloremque sint repellat beatae accusamus? Recusandae possimus
50
- voluptas beatae, labore dolor dolorem necessitatibus architecto
51
- laudantium deserunt ipsam autem. Dignissimos?
52
- </p>
53
-
54
- <p class="text-sm text-gray-500">
55
- Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta minima
56
- ullam porro voluptate ea, amet accusamus et debitis.
57
- </p>
58
-
59
- <div class="mt-4 text-right">
60
- <EUIButton
61
- color="primary"
62
- size="sm"
63
- icon-type="endIcon"
64
- :icon="XMarkIcon"
65
- rounded
66
- @click="isVisible = false"
67
- >
68
- Close
69
- </EUIButton>
70
- </div>
71
- </div>
72
- </transition>
73
- </div>
74
- </template>
75
-
76
- <script setup lang="ts">
77
- import { ref, computed, watch, onBeforeUnmount } from "vue";
78
- import { XMarkIcon } from "@heroicons/vue/24/outline";
79
- import EUIAvatar from "../avatar/EUIAvatar.vue";
80
- import EUIButton from "../button/EUIButton.vue";
81
- import ChevronBigDown from "../../assets/svg/ChevronBigDown.vue";
82
-
83
- const isVisible = ref(true);
84
- const minimized = ref(true);
85
- const containerRef = ref<HTMLElement | null>(null);
86
-
87
- const x = ref(20);
88
- const y = ref(80);
89
- const dragging = ref(false);
90
- const startX = ref(0);
91
- const startY = ref(0);
92
- const origX = ref(0);
93
- const origY = ref(0);
94
-
95
- const onToggle = () => {
96
- minimized.value = !minimized.value;
97
- if (minimized.value) {
98
- y.value = y.value <= 284 ? y.value : 284;
99
- }
100
- };
101
-
102
- const startDrag = (e: MouseEvent | TouchEvent) => {
103
- const tag = (e.target as Element).tagName.toLowerCase();
104
- if (["input", "textarea", "select", "button", "svg", "path"].includes(tag))
105
- return;
106
-
107
- const { pageX, pageY } = "touches" in e ? e.touches[0] : e;
108
- dragging.value = true;
109
- startX.value = pageX;
110
- startY.value = pageY;
111
- origX.value = x.value;
112
- origY.value = y.value;
113
-
114
- window.addEventListener("mousemove", onDrag);
115
- window.addEventListener("mouseup", stopDrag);
116
- window.addEventListener("touchmove", onDrag);
117
- window.addEventListener("touchend", stopDrag);
118
- };
119
-
120
- const onDrag = (e: MouseEvent | TouchEvent) => {
121
- if (!dragging.value) return;
122
- const { pageX, pageY } = "touches" in e ? e.touches[0] : e;
123
- const dx = pageX - startX.value;
124
- const dy = pageY - startY.value;
125
-
126
- let newX = origX.value - dx;
127
- let newY = origY.value + dy;
128
-
129
- const el = containerRef.value;
130
- if (el) {
131
- const { offsetWidth: w, offsetHeight: h } = el;
132
- newX = Math.min(Math.max(0, newX), window.innerWidth - w);
133
- newY = Math.min(Math.max(0, newY), window.innerHeight - h);
134
- }
135
-
136
- x.value = newX;
137
- y.value = newY;
138
- };
139
-
140
- const stopDrag = () => {
141
- dragging.value = false;
142
- window.removeEventListener("mousemove", onDrag);
143
- window.removeEventListener("mouseup", stopDrag);
144
- window.removeEventListener("touchmove", onDrag);
145
- window.removeEventListener("touchend", stopDrag);
146
- };
147
-
148
- onBeforeUnmount(stopDrag);
149
-
150
- // clamp Y when toggling
151
- watch(minimized, (val) => {
152
- if (!val && y.value > 300) {
153
- y.value = 300;
154
- }
155
- });
156
-
157
- const containerStyle = computed(() => ({
158
- position: "fixed" as const,
159
- right: `${x.value}px`,
160
- top: `${y.value}px`,
161
- cursor: dragging.value ? "grabbing" : "grab",
162
- zIndex: 999,
163
- }));
164
- </script>
165
-
166
- <style lang="scss" scoped>
167
- .draggable-card {
168
- @apply p-2 w-96 border border-solid border-purple-100 overflow-hidden flex-col flex bg-white rounded-2xl shadow-xl shadow-violet-100;
169
- }
170
-
171
- .slide-fade-enter-active,
172
- .slide-fade-leave-active {
173
- transition: opacity 0.3s ease;
174
- }
175
- .slide-fade-enter-from,
176
- .slide-fade-leave-to {
177
- opacity: 0;
178
- }
179
- </style>
@@ -1 +0,0 @@
1
- {"version":3,"file":"EUIDrag.vue.js","sourceRoot":"","sources":["EUIDrag.vue"],"names":[],"mappings":"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"}
@@ -1,294 +0,0 @@
1
- import { defineComponent } from "vue";
2
- import { Meta, StoryFn } from "@storybook/vue3";
3
- import EUIMultiDropdown from "./EUIMultiDropdown.vue";
4
- import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
5
-
6
- export default {
7
- title: "Components/MultiDropdown",
8
- tags: ["autodocs"],
9
- component: EUIMultiDropdown,
10
- argTypes: {
11
- title: {
12
- description: "The title of the dropdown menu.",
13
- control: { type: "text" },
14
- defaultValue: "My Students",
15
- },
16
- className: {
17
- description: "Additional classes to apply to the dropdown button.",
18
- control: { type: "text" },
19
- },
20
- menuItems: {
21
- description: "An array of menu items, with optional submenus.",
22
- control: { type: "object" },
23
- defaultValue: [
24
- { text: "All Students" },
25
- { text: "My Students" },
26
- { text: "Genie Completed Students" },
27
- {
28
- text: "Standard Filter",
29
- subMenu: [
30
- { text: "UKI Fair" },
31
- { text: "Germany Q4' 24" },
32
- { text: "Edvoy Express" },
33
- { text: "Q1 2025 Pipeline" },
34
- ],
35
- },
36
- {
37
- text: "Custom Filter",
38
- subMenu: [{ text: "Application Intakes" }, { text: "New Students" }],
39
- },
40
- ],
41
- },
42
- disabled: {
43
- control: "boolean",
44
- description: "Disables the Menu, making it uneditable and unclickable.",
45
- },
46
- },
47
- } as Meta;
48
-
49
- const Template: StoryFn = (args) =>
50
- defineComponent({
51
- components: { EUIMultiDropdown, ChevronDownStroke },
52
- setup() {
53
- const handleMenuItem = (_item: any) => {
54
- // console.log("Menu clicked:", _item);
55
- };
56
-
57
- const handleSubMenuItem = (_subItem: any) => {
58
- // console.log("Submenu item clicked:", _subItem);
59
- };
60
-
61
- return { args, handleMenuItem, handleSubMenuItem };
62
- },
63
- template: `<div class="min-h-96">
64
- <EUIMultiDropdown v-bind="args" v-bind="args" @menuItem="handleMenuItem" @subMenuItem="handleSubMenuItem" /></div>`,
65
- });
66
-
67
- export const Default = Template.bind({});
68
- Default.args = {
69
- title: "My Students",
70
- className: "",
71
- menuItems: [
72
- { text: "All Students" },
73
- { text: "My Students" },
74
- { text: "Genie Completed Students" },
75
- {
76
- text: "Standard Filter",
77
- subMenu: [
78
- { text: "UKI Fair" },
79
- { text: "Germany Q4' 24" },
80
- { text: "Edvoy Express" },
81
- { text: "Q1 2025 Pipeline" },
82
- ],
83
- },
84
- {
85
- text: "Custom Filter",
86
- subMenu: [{ text: "Application Intakes" }, { text: "New Students" }],
87
- },
88
- ],
89
- };
90
-
91
- export const UseTemplate = Template.bind({});
92
- (UseTemplate.args = {
93
- title: "My Students",
94
- className:
95
- "px-3 py-2 text-gray-700 hover:text-gray-900 bg-white rounded-md focus:bg-violet-100 group focus:outline-none focus:ring-2 focus:ring-violet-400 focus:ring-opacity-100 hover:bg-gray-100 active:bg-violet-200",
96
- menuItems: [
97
- { text: "All Students" },
98
- { text: "My Students" },
99
- { text: "Genie Completed Students" },
100
- {
101
- text: "Standard Filter",
102
- subMenu: [
103
- { text: "UKI Fair" },
104
- { text: "Germany Q4' 24" },
105
- { text: "Edvoy Express" },
106
- { text: "Q1 2025 Pipeline" },
107
- ],
108
- },
109
- {
110
- text: "Custom Filter",
111
- subMenu: [{ text: "Application Intakes" }, { text: "New Students" }],
112
- },
113
- ],
114
- }),
115
- (UseTemplate.parameters = {
116
- docs: {
117
- source: {
118
- code: `<script lang="ts" setup>
119
- const menuItems = [
120
- {
121
- "text": "All Students"
122
- },
123
- {
124
- "text": "My Students"
125
- },
126
- {
127
- "text": "Genie Completed Students"
128
- },
129
- {
130
- "text": "Standard Filter",
131
- "subMenu": [
132
- {
133
- "text": "UKI Fair"
134
- },
135
- {
136
- "text": "Germany Q4' 24"
137
- },
138
- {
139
- "text": "Edvoy Express"
140
- },
141
- {
142
- "text": "Q1 2025 Pipeline"
143
- }
144
- ]
145
- },
146
- {
147
- "text": "Custom Filter",
148
- "subMenu": [
149
- {
150
- "text": "Application Intakes"
151
- },
152
- {
153
- "text": "New Students"
154
- }
155
- ]
156
- }
157
- ];
158
-
159
- const handleMenuItem = (item: any) => {
160
- console.log("Menu clicked:", item);
161
- };
162
-
163
- const handleSubMenuItem = (subItem: any) => {
164
- console.log("Submenu item clicked:", subItem);
165
- };
166
- </script>
167
- <template>
168
- <EUIMultiDropdown :menu-items="menuItems" @menuItem="handleMenuItem" @subMenuItem="handleSubMenuItem">
169
- <template #dropdownName="{ open }">
170
- <span>{{ title }}</span>
171
- <ChevronDownStroke
172
- :class="open ? 'text-gray-900 rotate-180' : 'text-gray-500'"
173
- class="transition duration-100 ease-in-out transform rotate-0 size-6 group-hover:text-opacity-80"
174
- aria-hidden="true"
175
- />
176
- </template>
177
- <template #menu="{menuitem}">
178
- {{menuitem.text}}
179
- </template>
180
- <template #submenu="{subItem}">
181
- {{subItem.text}}
182
- </template>
183
- </EUIMultiDropdown>
184
- </template>`,
185
- },
186
- },
187
- });
188
-
189
- export const UseActionitem = Template.bind({});
190
- (UseActionitem.args = {
191
- title: "My Students",
192
- className:
193
- "px-3 py-2 text-gray-700 hover:text-gray-900 bg-white rounded-md focus:bg-violet-100 group focus:outline-none focus:ring-2 focus:ring-violet-400 focus:ring-opacity-100 hover:bg-gray-100 active:bg-violet-200",
194
- menuItems: [
195
- { text: "All Students" },
196
- { text: "My Students" },
197
- { text: "Genie Completed Students" },
198
- {
199
- text: "Standard Filter",
200
- subMenu: [
201
- { text: "UKI Fair" },
202
- { text: "Germany Q4' 24" },
203
- { text: "Edvoy Express" },
204
- { text: "Q1 2025 Pipeline" },
205
- ],
206
- },
207
- {
208
- text: "Custom Filter",
209
- subMenu: [{ text: "Application Intakes" }, { text: "New Students" }],
210
- enableAction: true,
211
- },
212
- ],
213
- }),
214
- (UseActionitem.parameters = {
215
- docs: {
216
- source: {
217
- code: `<script lang="ts" setup>
218
- const menuItems = [
219
- {
220
- "text": "All Students"
221
- },
222
- {
223
- "text": "My Students"
224
- },
225
- {
226
- "text": "Genie Completed Students"
227
- },
228
- {
229
- "text": "Standard Filter",
230
- "subMenu": [
231
- {
232
- "text": "UKI Fair"
233
- },
234
- {
235
- "text": "Germany Q4' 24"
236
- },
237
- {
238
- "text": "Edvoy Express"
239
- },
240
- {
241
- "text": "Q1 2025 Pipeline"
242
- }
243
- ]
244
- },
245
- {
246
- "text": "Custom Filter",
247
- "subMenu": [
248
- {
249
- "text": "Application Intakes"
250
- },
251
- {
252
- "text": "New Students"
253
- }
254
- ],
255
- "enableAction": true,
256
- }
257
- ];
258
-
259
- const handleMenuItem = (item: any) => {
260
- console.log("Menu clicked:", item);
261
- };
262
-
263
- const handleSubMenuItem = (subItem: any) => {
264
- console.log("Submenu item clicked:", subItem);
265
- };
266
-
267
- const addAction = (e:Event) => {
268
- console.log("Action Item clicked:" + e)
269
- }
270
- </script>
271
- <template>
272
- <EUIMultiDropdown :menu-items="menuItems" @menuItem="handleMenuItem" @subMenuItem="handleSubMenuItem" @action-item="addAction">
273
- <template #dropdownName="{ open }">
274
- <span>{{ title }}</span>
275
- <ChevronDownStroke
276
- :class="open ? 'text-gray-900 rotate-180' : 'text-gray-500'"
277
- class="transition duration-100 ease-in-out transform rotate-0 size-6 group-hover:text-opacity-80"
278
- aria-hidden="true"
279
- />
280
- </template>
281
- <template #menu="{menuitem}">
282
- {{menuitem.text}}
283
- </template>
284
- <template #actionName>
285
- + Add Custom Filter
286
- </template>
287
- <template #submenu="{subItem}">
288
- {{subItem.text}}
289
- </template>
290
- </EUIMultiDropdown>
291
- </template>`,
292
- },
293
- },
294
- });
@@ -1,174 +0,0 @@
1
- <template>
2
- <div class="relative">
3
- <!-- Main Dropdown Button -->
4
- <button
5
- type="button"
6
- ref="dropdownButton"
7
- :class="[
8
- 'inline-flex items-center text-sm font-semibold gap-x-2 capitalize outline-none focus:outline-none',
9
- className,
10
- ]"
11
- :disabled="disabled"
12
- @click="toggleDropdown()"
13
- >
14
- <slot name="dropdownName" :open="isOpen">
15
- {{ title }}
16
- <component :is="isSolidArrow ? ChevronDownStrokeSolid : ChevronDownStroke" :class="isOpen ? 'text-gray-900 rotate-180' : 'text-gray-500'"
17
- class="transition duration-100 ease-in-out transform rotate-0 size-6 group-hover:text-opacity-80"
18
- aria-hidden="true" />
19
- </slot>
20
- </button>
21
- <!-- Menu lists -->
22
- <div
23
- v-if="isOpen && menuItems.length"
24
- :class="[
25
- 'absolute left-0 z-0 p-2 mt-1 transition-all duration-300 ease-in-out bg-white border border-gray-200 border-solid rounded-lg shadow-2xl shadow-gray-300 min-w-32 max-w-64 w-max',
26
- placement === 'top' ? 'bottom-full' : 'top-full',
27
- dropdownClass,
28
- ]"
29
- @click.stop
30
- >
31
- <div
32
- v-for="item in menuItems"
33
- :key="item.text"
34
- class="relative flex items-center px-4 py-2 rounded-lg cursor-pointer hover:bg-gray-100"
35
- @mouseenter="setActiveMenuItem(item.text)"
36
- @mouseleave="clearActiveMenuItem"
37
- @click.stop="$emit('menuItem', item)"
38
- >
39
- <div
40
- class="flex items-center justify-between w-full gap-2 text-sm font-medium text-gray-800 break-words hover:text-gray-900"
41
- >
42
- <slot name="menu" :menuitem="item">
43
- {{ item.text }}
44
- <ChevronDownStroke
45
- v-if="item.subMenu"
46
- :class="
47
- activeMenuItem === item.text
48
- ? 'text-gray-900 -rotate-90'
49
- : 'text-gray-500 rotate-0'
50
- "
51
- class="ml-auto transition duration-300 ease-in-out transform size-6 group-hover:text-opacity-80"
52
- aria-hidden="true"
53
- />
54
- </slot>
55
- </div>
56
-
57
- <!-- Sub-menu lists-->
58
- <div
59
- v-if="item.subMenu && activeMenuItem === item.text"
60
- class="absolute top-0 z-10 transition-all duration-300 ease-in-out left-full min-w-32 max-w-64 w-max"
61
- >
62
- <div
63
- class="bg-white border border-gray-200 border-solid rounded-lg shadow-2xl ms-2 shadow-gray-300"
64
- >
65
- <div
66
- v-if="item.enableAction"
67
- class="flex items-center justify-center w-full gap-1 px-6 py-3 text-sm font-medium text-gray-900 bg-purple-100 rounded-t-md"
68
- @click.prevent="$emit('actionItem', 'action')"
69
- >
70
- <slot name="actionName">{{ "+ Action Name" }}</slot>
71
- </div>
72
- <div
73
- class="p-2 overflow-y-auto overscroll-auto max-h-[50svh] min-h-0 scrollbar--thin"
74
- >
75
- <div
76
- v-for="subItem in item.subMenu"
77
- :key="subItem.text"
78
- class="flex items-center justify-between gap-2 px-3 py-2 text-sm font-medium text-gray-700 rounded-lg cursor-pointer hover:bg-gray-100 hover:text-gray-900"
79
- @click.stop="$emit('subMenuItem', subItem)"
80
- >
81
- <slot name="submenu" :subItem="subItem">
82
- {{ subItem.text }}
83
- </slot>
84
- </div>
85
- </div>
86
- </div>
87
- </div>
88
- </div>
89
- </div>
90
- </div>
91
- </template>
92
-
93
- <script setup lang="ts">
94
- import { ref, defineProps, PropType } from "vue";
95
- import { onClickOutside } from "@vueuse/core";
96
- import ChevronDownStroke from "../../assets/svg/ChevronDownStroke.vue";
97
- import ChevronDownStrokeSolid from "../../assets/svg/ChevronDownStrokeSolid.vue";
98
-
99
- interface MenuItem {
100
- text: string;
101
- subMenu?: MenuItem[];
102
- enableAction?: boolean;
103
- }
104
-
105
- defineProps({
106
- title: {
107
- type: String,
108
- default: "My Students",
109
- },
110
- className: {
111
- type: String,
112
- required: false,
113
- },
114
- dropdownClass: {
115
- type: String,
116
- required: false,
117
- },
118
- isSolidArrow: {
119
- type: Boolean,
120
- default: false,
121
- },
122
- menuItems: {
123
- type: Array as PropType<MenuItem[]>,
124
- default: () => [
125
- { text: "All Students" },
126
- { text: "My Students" },
127
- { text: "Genie Completed Students" },
128
- {
129
- text: "Standard Filter",
130
- subMenu: [
131
- { text: "UKI Fair" },
132
- { text: "Germany Q4' 24" },
133
- { text: "Edvoy Express" },
134
- { text: "Q1 2025 Pipeline" },
135
- ],
136
- },
137
- {
138
- text: "Custom Filter",
139
- subMenu: [{ text: "Application Intakes" }, { text: "New Students" }],
140
- enableAction: true,
141
- },
142
- ],
143
- },
144
- disabled: Boolean,
145
- placement: {
146
- type: String as PropType<"top" | "bottom">,
147
- default: "bottom",
148
- },
149
- });
150
-
151
- const isOpen = ref(false);
152
- const activeMenuItem = ref<string | null>(null);
153
- const dropdownButton = ref<HTMLElement | null>(null);
154
-
155
- defineEmits(["subMenuItem", "menuItem", "actionItem"]);
156
-
157
- const toggleDropdown = () => {
158
- isOpen.value = !isOpen.value;
159
- };
160
-
161
- const setActiveMenuItem = (text: string) => {
162
- activeMenuItem.value = text;
163
- };
164
-
165
- const clearActiveMenuItem = () => {
166
- activeMenuItem.value = null;
167
- };
168
-
169
- onClickOutside(dropdownButton, () => {
170
- isOpen.value = false;
171
- });
172
- </script>
173
-
174
- <style lang="scss" scoped></style>