edvoyui-component-library-test-flight 0.0.184 → 0.0.186

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 (227) hide show
  1. package/README.md +57 -8
  2. package/dist/EUIButton.vue.d.ts.map +1 -0
  3. package/dist/EUIButtonGroup.vue.d.ts.map +1 -0
  4. package/dist/edvoy-ui.cjs.js +2 -2
  5. package/dist/edvoy-ui.css +1 -1
  6. package/dist/edvoy-ui.es.js +13 -16
  7. package/dist/edvoy-ui.umd.js +5 -5
  8. package/dist/table/EUIDashboardTable.vue.d.ts +1 -1
  9. package/dist/table/EUITable.vue.d.ts +1 -1
  10. package/package.json +18 -17
  11. package/dist/button/EUIButton.vue.d.ts.map +0 -1
  12. package/dist/button/EUIButtonGroup.vue.d.ts.map +0 -1
  13. package/src/App.vue +0 -16
  14. package/src/App.vue.js.map +0 -1
  15. package/src/assets/fonts/gilroy/GilroyBold/font.woff +0 -0
  16. package/src/assets/fonts/gilroy/GilroyBold/font.woff2 +0 -0
  17. package/src/assets/fonts/gilroy/GilroyBoldItalic/font.woff +0 -0
  18. package/src/assets/fonts/gilroy/GilroyBoldItalic/font.woff2 +0 -0
  19. package/src/assets/fonts/gilroy/GilroyExtraBold/font.woff +0 -0
  20. package/src/assets/fonts/gilroy/GilroyExtraBold/font.woff2 +0 -0
  21. package/src/assets/fonts/gilroy/GilroyExtraBoldItalic/font.woff +0 -0
  22. package/src/assets/fonts/gilroy/GilroyExtraBoldItalic/font.woff2 +0 -0
  23. package/src/assets/fonts/gilroy/GilroyMedium/font.woff +0 -0
  24. package/src/assets/fonts/gilroy/GilroyMedium/font.woff2 +0 -0
  25. package/src/assets/fonts/gilroy/GilroyRegular/font.woff +0 -0
  26. package/src/assets/fonts/gilroy/GilroyRegular/font.woff2 +0 -0
  27. package/src/assets/fonts/gilroy/GilroySemiBold/font.woff +0 -0
  28. package/src/assets/fonts/gilroy/GilroySemiBold/font.woff2 +0 -0
  29. package/src/assets/fonts/inter/Inter-Bold.woff +0 -0
  30. package/src/assets/fonts/inter/Inter-Bold.woff2 +0 -0
  31. package/src/assets/fonts/inter/Inter-Italic.woff +0 -0
  32. package/src/assets/fonts/inter/Inter-Italic.woff2 +0 -0
  33. package/src/assets/fonts/inter/Inter-Medium.woff +0 -0
  34. package/src/assets/fonts/inter/Inter-Medium.woff2 +0 -0
  35. package/src/assets/fonts/inter/Inter-MediumItalic.woff +0 -0
  36. package/src/assets/fonts/inter/Inter-MediumItalic.woff2 +0 -0
  37. package/src/assets/fonts/inter/Inter-Regular.woff +0 -0
  38. package/src/assets/fonts/inter/Inter-Regular.woff2 +0 -0
  39. package/src/assets/fonts/inter/Inter-SemiBold.woff +0 -0
  40. package/src/assets/fonts/inter/Inter-SemiBold.woff2 +0 -0
  41. package/src/assets/fonts/inter/Inter-SemiBoldItalic.woff +0 -0
  42. package/src/assets/fonts/inter/Inter-SemiBoldItalic.woff2 +0 -0
  43. package/src/assets/images/search-nodata.png +0 -0
  44. package/src/assets/scss/body.scss +0 -25
  45. package/src/assets/svg/CheckTick.vue +0 -21
  46. package/src/assets/svg/CheckTick.vue.js.map +0 -1
  47. package/src/assets/svg/ChevronBigDown.vue +0 -22
  48. package/src/assets/svg/ChevronBigDown.vue.js.map +0 -1
  49. package/src/assets/svg/ChevronDownSolid.vue +0 -19
  50. package/src/assets/svg/ChevronDownSolid.vue.js.map +0 -1
  51. package/src/assets/svg/ChevronDownStroke.vue +0 -22
  52. package/src/assets/svg/ChevronDownStroke.vue.js.map +0 -1
  53. package/src/assets/svg/ChevronDownStrokeSolid.vue +0 -19
  54. package/src/assets/svg/ChevronDownStrokeSolid.vue.js.map +0 -1
  55. package/src/assets/svg/SearchBigZoomIn.vue +0 -21
  56. package/src/assets/svg/SearchBigZoomIn.vue.js.map +0 -1
  57. package/src/assets/svg/SortArrow.vue +0 -24
  58. package/src/assets/svg/SortArrow.vue.js.map +0 -1
  59. package/src/assets/svg/Student.vue +0 -30
  60. package/src/assets/svg/Student.vue.js.map +0 -1
  61. package/src/assets/svg/partner.vue +0 -33
  62. package/src/assets/svg/partner.vue.js.map +0 -1
  63. package/src/assets/svg/people.vue +0 -25
  64. package/src/assets/svg/people.vue.js.map +0 -1
  65. package/src/assets/vue.svg +0 -1
  66. package/src/components/HelloWorld.vue +0 -1972
  67. package/src/components/HelloWorld.vue.js.map +0 -1
  68. package/src/components/accordion/EUIAccordion.stories.ts +0 -204
  69. package/src/components/accordion/EUIAccordion.vue +0 -152
  70. package/src/components/accordion/EUIAccordion.vue.js.map +0 -1
  71. package/src/components/alerts/EUIAlerts.stories.ts +0 -217
  72. package/src/components/alerts/EUIAlerts.vue +0 -194
  73. package/src/components/alerts/EUIAlerts.vue.js.map +0 -1
  74. package/src/components/avatar/EUIAvatar.stories.ts +0 -157
  75. package/src/components/avatar/EUIAvatar.vue +0 -96
  76. package/src/components/avatar/EUIAvatar.vue.js.map +0 -1
  77. package/src/components/breadcrumb/EUIBreadcrumb.stories.ts +0 -75
  78. package/src/components/breadcrumb/EUIBreadcrumb.vue +0 -59
  79. package/src/components/breadcrumb/EUIBreadcrumb.vue.js.map +0 -1
  80. package/src/components/button/EUIButton.stories.ts +0 -270
  81. package/src/components/button/EUIButton.vue +0 -154
  82. package/src/components/button/EUIButton.vue.js.map +0 -1
  83. package/src/components/button/EUIButtonGroup.vue +0 -287
  84. package/src/components/button/EUIButtonGroup.vue.js.map +0 -1
  85. package/src/components/button/buttonAnimateTab.vue +0 -74
  86. package/src/components/button/buttonAnimateTab.vue.js.map +0 -1
  87. package/src/components/checkbox/EUICheckbox.stories.ts +0 -58
  88. package/src/components/checkbox/EUICheckbox.vue +0 -110
  89. package/src/components/checkbox/EUICheckbox.vue.js.map +0 -1
  90. package/src/components/datepicker/EUIDatepicker.stories.ts +0 -492
  91. package/src/components/datepicker/EUIDatepicker.vue +0 -295
  92. package/src/components/datepicker/EUIDatepicker.vue.js.map +0 -1
  93. package/src/components/delete.vue +0 -262
  94. package/src/components/delete.vue.js.map +0 -1
  95. package/src/components/dragModal/EUIDrag.vue +0 -179
  96. package/src/components/dragModal/EUIDrag.vue.js.map +0 -1
  97. package/src/components/dropdown/EUIMultiDropdown.stories.ts +0 -294
  98. package/src/components/dropdown/EUIMultiDropdown.vue +0 -187
  99. package/src/components/dropdown/EUIMultiDropdown.vue.js.map +0 -1
  100. package/src/components/errorMessage/EUIErrorMessage.scss +0 -0
  101. package/src/components/errorMessage/EUIErrorMessage.stories.ts +0 -41
  102. package/src/components/errorMessage/EUIErrorMessage.vue +0 -25
  103. package/src/components/errorMessage/EUIErrorMessage.vue.js.map +0 -1
  104. package/src/components/index.js.map +0 -1
  105. package/src/components/index.ts +0 -61
  106. package/src/components/input/EUIInput.stories.ts +0 -387
  107. package/src/components/input/EUIInput.vue +0 -223
  108. package/src/components/input/EUIInput.vue.js.map +0 -1
  109. package/src/components/input/EUINumberInput.vue +0 -250
  110. package/src/components/loader/EUICircleLoader.vue +0 -31
  111. package/src/components/loader/EUICircleLoader.vue.js.map +0 -1
  112. package/src/components/loader/EUICubeLoader.vue +0 -237
  113. package/src/components/loader/EUICubeLoader.vue.js.map +0 -1
  114. package/src/components/loader/EUILoader.stories.ts +0 -99
  115. package/src/components/loader/EUILoader.vue +0 -17
  116. package/src/components/loader/EUILoader.vue.js.map +0 -1
  117. package/src/components/loader/EUISquareLoader.vue +0 -47
  118. package/src/components/loader/EUISquareLoader.vue.js.map +0 -1
  119. package/src/components/modal/EUIModal.stories.ts +0 -412
  120. package/src/components/modal/EUIModal.vue +0 -228
  121. package/src/components/modal/EUIModal.vue.js.map +0 -1
  122. package/src/components/pillSelect/EUIPillSelect.stories.ts +0 -74
  123. package/src/components/pillSelect/EUIPillSelect.vue +0 -149
  124. package/src/components/pillSelect/EUIPillSelect.vue.js.map +0 -1
  125. package/src/components/popover/EUIPopover.stories.ts +0 -306
  126. package/src/components/popover/EUIPopover.vue +0 -297
  127. package/src/components/popover/EUIPopover.vue.js.map +0 -1
  128. package/src/components/radio/EUIRadio.stories.ts +0 -54
  129. package/src/components/radio/EUIRadio.vue +0 -75
  130. package/src/components/radio/EUIRadio.vue.js.map +0 -1
  131. package/src/components/searchInput/EUISearch.stories.ts +0 -24
  132. package/src/components/searchInput/EUISearch.vue +0 -223
  133. package/src/components/searchInput/EUISearch.vue.js.map +0 -1
  134. package/src/components/searchTagSelect/EUISearchTagSelect.stories.ts +0 -217
  135. package/src/components/searchTagSelect/EUISearchTagSelect.vue +0 -642
  136. package/src/components/searchTagSelect/EUISearchTagSelect.vue.js.map +0 -1
  137. package/src/components/searchTagSelect/SearchInput.vue +0 -167
  138. package/src/components/searchTagSelect/SearchInput.vue.js.map +0 -1
  139. package/src/components/searchexpand/EUISearchExpand.vue +0 -148
  140. package/src/components/searchexpand/EUISearchExpand.vue.js.map +0 -1
  141. package/src/components/searchexpand/EUISearchToggle.vue +0 -86
  142. package/src/components/searchexpand/EUISearchToggle.vue.js.map +0 -1
  143. package/src/components/select/EUISelect.stories.ts +0 -101
  144. package/src/components/select/EUISelect.vue +0 -1092
  145. package/src/components/select/EUISelect.vue.js.map +0 -1
  146. package/src/components/slideover/EUISlideover.stories.ts +0 -318
  147. package/src/components/slideover/EUISlideover.vue +0 -212
  148. package/src/components/slideover/EUISlideover.vue.js.map +0 -1
  149. package/src/components/stepperTimeline/EUIStepperHorizontal.vue +0 -242
  150. package/src/components/stepperTimeline/EUIStepperHorizontal.vue.js.map +0 -1
  151. package/src/components/stepperTimeline/EUIStepperTimeline.stories.ts +0 -54
  152. package/src/components/stepperTimeline/EUIStepperTimeline.vue +0 -16
  153. package/src/components/stepperTimeline/EUIStepperTimeline.vue.js.map +0 -1
  154. package/src/components/stepperTimeline/EUIStepperVertical.vue +0 -112
  155. package/src/components/stepperTimeline/EUIStepperVertical.vue.js.map +0 -1
  156. package/src/components/table/ColumnResizeTable.vue +0 -740
  157. package/src/components/table/ColumnResizeTable.vue.js.map +0 -1
  158. package/src/components/table/EUIDashboardTable.vue +0 -514
  159. package/src/components/table/EUIDashboardTable.vue.js.map +0 -1
  160. package/src/components/table/EUIPageLimit.vue +0 -66
  161. package/src/components/table/EUIPageLimit.vue.js.map +0 -1
  162. package/src/components/table/EUIPagination.vue +0 -175
  163. package/src/components/table/EUIPagination.vue.js.map +0 -1
  164. package/src/components/table/EUIStudentPagination.vue +0 -172
  165. package/src/components/table/EUIStudentPagination.vue.js.map +0 -1
  166. package/src/components/table/EUITable.stories.ts +0 -300
  167. package/src/components/table/EUITable.vue +0 -559
  168. package/src/components/table/EUITable.vue.js.map +0 -1
  169. package/src/components/table/EUITableCheckbox.vue +0 -98
  170. package/src/components/table/EUITableCheckbox.vue.js.map +0 -1
  171. package/src/components/table/GrowthTable.vue +0 -575
  172. package/src/components/table/GrowthTable.vue.js.map +0 -1
  173. package/src/components/table/GrowthTableView.vue +0 -108
  174. package/src/components/table/GrowthTableView.vue.js.map +0 -1
  175. package/src/components/table/ResizeTableview.vue +0 -198
  176. package/src/components/table/ResizeTableview.vue.js.map +0 -1
  177. package/src/components/table/UCheckbox.vue +0 -169
  178. package/src/components/table/UCheckbox.vue.js.map +0 -1
  179. package/src/components/table/UTable.scss +0 -69
  180. package/src/components/table/UTable.vue +0 -611
  181. package/src/components/table/UTable.vue.js.map +0 -1
  182. package/src/components/table/UTableview.vue +0 -189
  183. package/src/components/table/UTableview.vue.js.map +0 -1
  184. package/src/components/tabs/EUITabOutline.vue +0 -263
  185. package/src/components/tabs/EUITabOutline.vue.js.map +0 -1
  186. package/src/components/tabs/EUITabs.vue +0 -262
  187. package/src/components/tabs/EUITabs.vue.js.map +0 -1
  188. package/src/components/tabs/EUItabs.stories.ts +0 -137
  189. package/src/components/tag/EUITag.stories.ts +0 -53
  190. package/src/components/tag/EUITag.vue +0 -88
  191. package/src/components/tag/EUITag.vue.js.map +0 -1
  192. package/src/components/telephone/EUITelephone.stories.ts +0 -358
  193. package/src/components/telephone/EUITelephone.vue +0 -291
  194. package/src/components/telephone/EUITelephone.vue.js.map +0 -1
  195. package/src/components/textArea/EUITextArea.stories.ts +0 -134
  196. package/src/components/textArea/EUITextArea.vue +0 -155
  197. package/src/components/textArea/EUITextArea.vue.js.map +0 -1
  198. package/src/components/timeLine/EUITimeLine.stories.ts +0 -247
  199. package/src/components/timeLine/EUITimeLine.vue +0 -148
  200. package/src/components/timeLine/EUITimeLine.vue.js.map +0 -1
  201. package/src/components/toggle/EUIToggle.stories.ts +0 -63
  202. package/src/components/toggle/EUIToggle.vue +0 -101
  203. package/src/components/toggle/EUIToggle.vue.js.map +0 -1
  204. package/src/components/tooltip/EUITooltip.stories.ts +0 -53
  205. package/src/components/tooltip/EUITooltip.vue +0 -111
  206. package/src/components/tooltip/EUITooltip.vue.js.map +0 -1
  207. package/src/components/uidemo/select-com.vue +0 -120
  208. package/src/components/uidemo/select-com.vue.js.map +0 -1
  209. package/src/data/books.js.map +0 -1
  210. package/src/data/books.ts +0 -163
  211. package/src/data/country.ts +0 -56
  212. package/src/data/tab.js.map +0 -1
  213. package/src/data/tab.ts +0 -40
  214. package/src/data/table.js.map +0 -1
  215. package/src/data/table.ts +0 -5654
  216. package/src/main.js.map +0 -1
  217. package/src/main.ts +0 -5
  218. package/src/style.scss +0 -186
  219. package/src/utils/helpers.js.map +0 -1
  220. package/src/utils/helpers.ts +0 -30
  221. package/src/utils/lodash.js.map +0 -1
  222. package/src/utils/lodash.ts +0 -9
  223. package/src/utils/types.js.map +0 -1
  224. package/src/utils/types.ts +0 -9
  225. package/src/vite-env.d.ts +0 -5
  226. /package/dist/{button/EUIButton.vue.d.ts → EUIButton.vue.d.ts} +0 -0
  227. /package/dist/{button/EUIButtonGroup.vue.d.ts → EUIButtonGroup.vue.d.ts} +0 -0
@@ -1,74 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/vue3";
2
-
3
- import EUIPillSelect from "./EUIPillSelect.vue";
4
- import { ref } from "vue";
5
-
6
- // Meta configuration for the component's stories
7
- const meta = {
8
- title: "Example/Pill Select",
9
- component: EUIPillSelect,
10
- tags: ["autodocs"],
11
- argTypes: {
12
- disabled: {
13
- control: "boolean",
14
- },
15
- items: {
16
- control: "object",
17
- description: "Array of options to display in the select pills.",
18
- },
19
- modelValue: {
20
- control: "object",
21
- },
22
- label: {
23
- control: "text",
24
- },
25
- name: {
26
- control: "text",
27
- },
28
- multiple: {
29
- control: "boolean",
30
- },
31
- errors: {
32
- control: "object",
33
- },
34
- },
35
- } satisfies Meta<typeof EUIPillSelect>;
36
-
37
- export default meta;
38
- type Story = StoryObj<typeof meta>;
39
-
40
- // Default story with minimum props
41
- export const Default: Story = {
42
- args: {
43
- name: "pill",
44
- modelValue: {
45
- value: "usa",
46
- label: "United States",
47
- },
48
- label:"Please select country",
49
- disabled: false,
50
- multiple: false,
51
- items: [
52
- { value: "usa", label: "United States", name: "United States" },
53
- { value: "canada", label: "Canada", name: "Canada" },
54
- { value: "uk", label: "United Kingdom", name: "United Kingdom" },
55
- ],
56
- errors: {
57
- pill: "Pill is Required",
58
- },
59
- },
60
- render: (args) => ({
61
- components: { EUIPillSelect },
62
- setup() {
63
- const modelValue = ref(args.modelValue);
64
-
65
- const onUpdateModelValue = (newValue: any) => {
66
- modelValue.value = newValue;
67
- args.modelValue = newValue;
68
- };
69
-
70
- return { args, modelValue, onUpdateModelValue };
71
- },
72
- template: `<EUIPillSelect v-bind="args" v-model="modelValue" @update:modelValue="onUpdateModelValue" />`,
73
- }),
74
- };
@@ -1,149 +0,0 @@
1
- <template>
2
- <div>
3
- <p v-if="label" class="mb-3 text-sm font-medium text-gray-500 font-inter">
4
- {{ label }}<span v-if="required" class="text-red-500">*</span>
5
- </p>
6
- <div class="flex flex-row flex-wrap w-full gap-3">
7
- <EUIButton
8
- v-for="(item, idx) in items"
9
- :key="`${name}-${idx}`"
10
- type="button"
11
- size="md"
12
- color="white"
13
- :class="[
14
- '!px-5 !text-sm leading-6 focus:!outline-0 !font-medium',
15
- isSelected(item)
16
- ? '!bg-violet-100 !text-violet-500'
17
- : '!bg-gray-100 !text-gray-600 hover:!text-gray-800',
18
- ]"
19
- rounded
20
- @click="handleSelect(item)"
21
- :disabled="disabled"
22
- >
23
- {{
24
- ignoreStartCase
25
- ? item[labelKey] || ""
26
- : startCase(item[labelKey] || "")
27
- }}
28
- </EUIButton>
29
- </div>
30
- <template v-if="errors && Object.keys(errors).length">
31
- <EUIErrorMessage :errors="errors" :name="name" />
32
- </template>
33
- </div>
34
- </template>
35
-
36
- <script setup lang="ts">
37
- import { startCase } from "lodash";
38
- import EUIButton from "../button/EUIButton.vue";
39
- import EUIErrorMessage from "../errorMessage/EUIErrorMessage.vue";
40
- import { PropType, computed, toRefs, watch } from "vue";
41
- import { ErrorObject, ValidationErrors } from "../../utils/types";
42
- const props = defineProps({
43
- label: {
44
- type: String,
45
- default: "",
46
- },
47
- modelValue: {
48
- type: Object as PropType<any | null>,
49
- default: null,
50
- },
51
- labelKey: {
52
- type: String,
53
- default: "label",
54
- },
55
- valueKey: {
56
- type: String,
57
- default: "value",
58
- },
59
- items: {
60
- type: Array<any>,
61
- default: [],
62
- },
63
- multiple: {
64
- type: Boolean,
65
- default: false,
66
- },
67
- name: {
68
- type: String,
69
- default: "",
70
- },
71
- disabled: {
72
- type: Boolean,
73
- deault: false,
74
- },
75
- required: {
76
- type: Boolean,
77
- deault: false,
78
- },
79
- errors: {
80
- type: Object as PropType<ValidationErrors | ErrorObject[]>,
81
- default: [],
82
- },
83
- ignoreStartCase: {
84
- type: Boolean,
85
- deault: false,
86
- },
87
- });
88
- const { multiple, valueKey, labelKey, errors, ignoreStartCase } = toRefs(props);
89
- const emit = defineEmits(["update:model-value","on-change"]);
90
- const activeItem = computed({
91
- set: (value) => {
92
- emit("update:model-value", value);
93
- },
94
- get: () => props.modelValue,
95
- });
96
- const handleMultiSelect = (item: any) => {
97
- if (Array.isArray(activeItem.value)) {
98
- const index = activeItem.value?.findIndex(
99
- (x) => x?.[valueKey.value] === item?.[valueKey.value]
100
- );
101
- if (index != -1) {
102
- activeItem.value.splice(index, 1);
103
- } else {
104
- activeItem.value.push(item);
105
- }
106
- emit('on-change',activeItem.value)
107
- }
108
- };
109
- const handleSingleSelect = (item: any) => {
110
- if (!Array.isArray(activeItem.value)) {
111
- if (activeItem.value?.[valueKey.value] === item?.[valueKey.value]) {
112
- activeItem.value = null;
113
- } else {
114
- activeItem.value = item;
115
- }
116
- emit('on-change',activeItem.value)
117
- }
118
- };
119
- const handleSelect = (item: any) => {
120
- if (multiple.value) {
121
- handleMultiSelect(item);
122
- } else {
123
- handleSingleSelect(item);
124
- }
125
- };
126
-
127
- const isSelected = (item: any) => {
128
- if (Array.isArray(activeItem.value)) {
129
- const values = activeItem.value
130
- .map((x) => x[valueKey.value])
131
- .filter((x) => x);
132
- return values.includes(item?.[valueKey.value]);
133
- }
134
- return activeItem.value?.[valueKey.value] === item?.[valueKey.value];
135
- };
136
- watch(
137
- multiple,
138
- () => {
139
- if (multiple.value) {
140
- if (!Array.isArray(activeItem.value)) {
141
- activeItem.value = [activeItem.value];
142
- }
143
- } else {
144
- activeItem.value = activeItem.value ? activeItem.value : null;
145
- }
146
- },
147
- { immediate: true }
148
- );
149
- </script>
@@ -1 +0,0 @@
1
- {"version":3,"file":"EUIPillSelect.vue.js","sourceRoot":"","sources":["EUIPillSelect.vue"],"names":[],"mappings":"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"}
@@ -1,306 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/vue3";
2
- import EUIPopover from "./EUIPopover.vue";
3
- import EUIButton from "../button/EUIButton.vue";
4
- import { InformationCircleIcon } from "@heroicons/vue/24/outline";
5
- import { ref } from "vue";
6
- import ChevronBigDown from "../../assets/svg/ChevronBigDown.vue";
7
-
8
- const meta: Meta<typeof EUIPopover> = {
9
- title: "Example/Popover",
10
- component: EUIPopover,
11
- tags: ["autodocs"],
12
- argTypes: {
13
- title: {
14
- control: "text",
15
- description: "Sets the title for the popper content.",
16
- },
17
- trigger: {
18
- control: { type: "select" },
19
- options: ["click", "hover", "manual"],
20
- description:
21
- "Specifies the trigger for displaying the popper. Default is 'click'.",
22
- defaultValue: "click",
23
- table: {
24
- defaultValue: { summary: "click" },
25
- },
26
- },
27
- placement: {
28
- control: { type: "select" },
29
- options: ["top", "left", "bottom", "right", "bottom-start", "bottom-end"],
30
- description:
31
- "Defines the position of the popper relative to the reference element. Default is 'bottom'.",
32
- defaultValue: "bottom",
33
- table: {
34
- defaultValue: { summary: "bottom" },
35
- },
36
- },
37
- className: {
38
- control: "text",
39
- description:
40
- "Additional CSS classes for styling the popper content container.",
41
- },
42
- customButton: {
43
- control: "text",
44
- description:
45
- "CSS classes for styling the button that triggers the popper.",
46
- },
47
- },
48
- } satisfies Meta<typeof EUIPopover>;
49
-
50
- export default meta;
51
- type Story = StoryObj<typeof meta>;
52
-
53
- export const Default: Story = {
54
- args: {
55
- className: "max-w-64 min-w-64",
56
- title: "Popper click to show",
57
- customButton: "border border-gray-600 px-4 py-2 rounded-lg",
58
- trigger: "click",
59
- placement: "bottom",
60
- },
61
- render: (args) => ({
62
- components: { EUIPopover, EUIButton },
63
- setup() {
64
- return { args };
65
- },
66
- template: `<div class="min-h-72 mx-auto max-w-xl p-6">
67
- <EUIPopover v-bind="args">
68
- <template #referenceButton>
69
- Information
70
- </template>
71
- <div class="relative z-10 px-4 pb-4 pt-0 text-gray-900 bg-white rounded-lg shadow-lg text-start">
72
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a quidem non delectus, est, ad voluptatum nostrum minus consequatur aut excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
73
- </div>
74
- </EUIPopover>
75
- </div>`,
76
- }),
77
- parameters: {
78
- docs: {
79
- description: {
80
- story:
81
- "This is the default configuration for the `EUIPopover` component, triggered by clicking the button.",
82
- },
83
- source: {
84
- code: `<template>
85
- <EUIPopover
86
- trigger="click"
87
- placement="bottom"
88
- className="max-w-64 min-w-64"
89
- title="Popper click to show"
90
- customButton="border border-gray-600 px-4 py-2 rounded-lg"
91
- >
92
- <template #referenceButton>
93
- Information
94
- </template>
95
- <!-- Popper Content Here... -->
96
- <div
97
- class="relative z-10 px-4 pt-0 pb-4 text-gray-900 bg-white rounded-lg shadow-lg text-start"
98
- >
99
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a
100
- quidem non delectus, est, ad voluptatum nostrum minus consequatur aut
101
- excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
102
- </div>
103
- </EUIPopover>
104
- </template>`,
105
- },
106
- },
107
- },
108
- };
109
-
110
- export const PopoverHover: Story = {
111
- args: {
112
- title: "Popover hover to Shows",
113
- className: "max-w-64 min-w-64",
114
- customButton: "border border-gray-600 px-4 py-2 rounded-lg",
115
- trigger: "hover",
116
- placement: "bottom-start",
117
- },
118
- render: (args) => ({
119
- components: { EUIPopover, InformationCircleIcon },
120
- setup() {
121
- return { args };
122
- },
123
- template: `<div class="min-h-72">
124
- <EUIPopover v-bind="args" trigger="hover">
125
- <template #referenceButton>
126
- Information <InformationCircleIcon class="text-gray-900 cursor-pointer size-6" />
127
- </template>
128
- <div class="relative z-10 px-4 pb-4 pt-0 text-gray-900 bg-white rounded-lg shadow-lg">
129
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a quidem non delectus, est, ad voluptatum nostrum minus consequatur aut excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
130
- </div>
131
- </EUIPopover>
132
- </div>`,
133
- }),
134
- parameters: {
135
- docs: {
136
- description: {
137
- story:
138
- "The `PopoverHover` story showcases the `EUIPopover` component triggered on hover.",
139
- },
140
- source: {
141
- code: `<template>
142
- <EUIPopover
143
- trigger="hover"
144
- placement="bottom-start"
145
- :hover-hide-delay="150"
146
- className="max-w-64 min-w-64"
147
- title="Popper hover to Shows"
148
- customButton="border border-gray-600 px-4 py-2 rounded-lg"
149
- >
150
- <template #referenceButton>
151
- <InformationCircleIcon class="text-gray-900 cursor-pointer size-6" />
152
- </template>
153
- <!-- Popper Content Here... -->
154
- <div
155
- class="relative z-10 px-4 pt-0 pb-4 text-gray-900 bg-white rounded-lg shadow-lg text-start"
156
- >
157
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a
158
- quidem non delectus, est, ad voluptatum nostrum minus consequatur aut
159
- excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
160
- </div>
161
- </EUIPopover>
162
- </template>`,
163
- },
164
- },
165
- },
166
- };
167
-
168
- export const PopoverManualAccess: Story = {
169
- args: {
170
- title: "Popover click to Show",
171
- className: "max-w-64 min-w-64",
172
- customButton: "border border-gray-600 px-4 py-2 rounded-lg",
173
- trigger: "click",
174
- placement: "bottom-start",
175
- },
176
- render: (args) => ({
177
- components: { EUIPopover, InformationCircleIcon, EUIButton },
178
- setup() {
179
- const popoverVisible = ref(false);
180
-
181
- const onPopoverToggle = () => {
182
- popoverVisible.value = !popoverVisible.value;
183
- };
184
-
185
- const onPopoverHide = () => {
186
- popoverVisible.value = false;
187
- };
188
-
189
- return { args, popoverVisible, onPopoverToggle, onPopoverHide };
190
- },
191
- template: `<div class="min-h-72">
192
- <EUIPopover v-bind="args" trigger="manual" v-model:visible="popoverVisible" placement="top" title="Popper Manual Access" @click="onPopoverToggle">
193
- <template #referenceButton>
194
- Information <InformationCircleIcon class="text-gray-900 cursor-pointer size-6" />
195
- </template>
196
- <div class="relative z-10 px-4 pb-4 pt-0 text-gray-900 bg-white rounded-lg shadow-lg">
197
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a quidem non delectus, est, ad voluptatum nostrum minus consequatur aut excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
198
-
199
- <EUIButton type="button" size="sm" color="purple" className="mt-4" @click="onPopoverHide()">Close</EUIButton>
200
- </div>
201
- </EUIPopover>
202
- </div>`,
203
- }),
204
- parameters: {
205
- docs: {
206
- description: {
207
- story:
208
- "The `PopoverClick` story showcases the `EUIPopover` component triggered on Emit.",
209
- },
210
- source: {
211
- code: `<script lang="ts" setup>
212
- const popoverVisible = ref(false);
213
-
214
- const onPopoverToggle = () => {
215
- popoverVisible.value = !popoverVisible.value;
216
- };
217
-
218
- const onPopoverHide = () => {
219
- popoverVisible.value = false;
220
- };
221
- </script>
222
- <template>
223
- <div>
224
- Popover is {{ popoverVisible ? "visible" : "hidden" }}
225
- </div>
226
- <EUIPopover
227
- trigger="manual"
228
- v-model:visible="popoverVisible"
229
- placement="top"
230
- placement="bottom-start"
231
- className="max-w-64 min-w-64"
232
- title="Popover Manual access"
233
- customButton="border border-gray-600 px-4 py-2 rounded-lg"
234
- @click="onPopoverToggle"
235
- >
236
- <template #referenceButton>
237
- <InformationCircleIcon class="text-gray-900 cursor-pointer size-6" />
238
- </template>
239
- <!-- Popover Content Here... -->
240
- <div
241
- class="relative z-10 px-4 pt-0 pb-4 text-gray-900 bg-white rounded-lg shadow-lg text-start"
242
- >
243
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a
244
- quidem non delectus, est, ad voluptatum nostrum minus consequatur aut
245
- excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
246
- <EUIButton type="button" size="sm" color="purple" className="mt-4" @click="onPopoverHide()">Close</EUIButton>
247
- </div>
248
- </EUIPopover>
249
- </template>`,
250
- },
251
- },
252
- },
253
- };
254
-
255
- export const PopoverDefaultOpen: Story = {
256
- args: {
257
- title: "Popover hover to Shows",
258
- className: "max-w-64 min-w-64",
259
- customButton: "border border-gray-600 px-4 py-2 rounded-lg",
260
- trigger: "hover",
261
- placement: "bottom-start",
262
- },
263
- render: (args) => ({
264
- components: { EUIPopover, InformationCircleIcon, ChevronBigDown },
265
- setup() {
266
- const isInitiallyOpen = ref(true);
267
-
268
- return { args, isInitiallyOpen };
269
- },
270
- template: `<div class="min-h-72">
271
- <EUIPopover v-bind="args" v-model:visible="isInitiallyOpen" placement="bottom-end"
272
- :hover-hide-delay="150">
273
- <template #referenceButton #referenceButton="{ open }">
274
- Information <ChevronBigDown :class="['text-gray-900 cursor-pointer size-6 transition duration-300 ease-in-out transform', open ? '-rotate-90' : 'rotate-0']" />
275
- </template>
276
- <div class="relative z-10 px-4 pb-4 pt-0 text-gray-900 bg-white rounded-lg shadow-lg">
277
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a quidem non delectus, est, ad voluptatum nostrum minus consequatur aut excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
278
- </div>
279
- </EUIPopover>
280
- </div>`,
281
- }),
282
- parameters: {
283
- docs: {
284
- description: {
285
- story:
286
- "The `PopoverHover` story showcases the `EUIPopover` component triggered on hover.",
287
- },
288
- source: {
289
- code: `<script lang="ts" setup>
290
- const isInitiallyOpen = ref(true);
291
- </script>
292
- <template>
293
- <EUIPopover v-bind="args" v-model:visible="isInitiallyOpen" placement="bottom-end"
294
- :hover-hide-delay="150">
295
- <template #referenceButton #referenceButton="{ open }">
296
- Information <ChevronBigDown :class="['text-gray-900 cursor-pointer size-6 transition duration-300 ease-in-out transform', open ? '-rotate-90' : 'rotate-0']" />
297
- </template>
298
- <div class="relative z-10 px-4 pb-4 pt-0 text-gray-900 bg-white rounded-lg shadow-lg">
299
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, hic a quidem non delectus, est, ad voluptatum nostrum minus consequatur aut excepturi iste autem distinctio neque porro. Ipsa, quasi enim!
300
- </div>
301
- </EUIPopover>
302
- </template>`,
303
- },
304
- },
305
- },
306
- };