edvoyui-component-library-test-flight 0.0.134 → 0.0.136
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.
- package/dist/library-vue-ts.cjs.js +37 -37
- package/dist/library-vue-ts.css +1 -1
- package/dist/library-vue-ts.es.js +3239 -3179
- package/dist/library-vue-ts.umd.js +41 -41
- package/dist/popover/EUIPopover.vue.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/HelloWorld.vue +293 -61
- package/src/components/popover/EUIPopover.vue +178 -40
- package/src/components/table/UTableview.vue +6 -1
- package/src/components/tabs/EUITabOutline.vue +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/popover/EUIPopover.vue?vue&type=script&setup=true&lang.ts";
|
|
2
|
-
import "/Volumes/work/repos/edvoy-ui-v2/src/components/popover/EUIPopover.vue?vue&type=style&index=0&scoped=
|
|
2
|
+
import "/Volumes/work/repos/edvoy-ui-v2/src/components/popover/EUIPopover.vue?vue&type=style&index=0&scoped=03588f75&lang.scss";
|
|
3
3
|
declare const _default: any;
|
|
4
4
|
export default _default;
|
|
5
5
|
//# sourceMappingURL=EUIPopover.vue.d.ts.map
|
package/package.json
CHANGED
|
@@ -5,8 +5,262 @@
|
|
|
5
5
|
>
|
|
6
6
|
Edvoy User Interface
|
|
7
7
|
</h1>
|
|
8
|
+
</div>
|
|
9
|
+
</template>
|
|
10
|
+
<script setup lang="ts">
|
|
11
|
+
</script>
|
|
12
|
+
<style lang="scss"></style>
|
|
13
|
+
|
|
14
|
+
<!-- Development code here -->
|
|
15
|
+
|
|
16
|
+
<!-- <template>
|
|
17
|
+
<div class="h-[clac(100svh-64px)] w-full px-10 py-8 max-w-screen-xl mx-auto">
|
|
18
|
+
<h1 class="mb-2 font-semibold text-gray-900 tetx-lg">Edvoy UI Componnet</h1>
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
<div class="grid w-full h-48 grid-cols-4 gap-4 mb-20 isolate">
|
|
22
|
+
<div
|
|
23
|
+
class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
|
|
24
|
+
>
|
|
25
|
+
<div class="text-base font-semibold leading-loose text-gray-900">
|
|
26
|
+
Popover Click Method
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<div class="inline-flex items-center justify-end flex-none gap-4">
|
|
30
|
+
<EUIPopover
|
|
31
|
+
trigger="click"
|
|
32
|
+
placement="bottom-end"
|
|
33
|
+
className="max-w-80 min-w-80"
|
|
34
|
+
customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
|
|
35
|
+
>
|
|
36
|
+
<template #referenceButton="{ open }">
|
|
37
|
+
<div class="relative">
|
|
38
|
+
<FunnelIcon class="text-current size-6" />
|
|
39
|
+
<div
|
|
40
|
+
v-if="!open"
|
|
41
|
+
class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
|
|
42
|
+
/>
|
|
43
|
+
</div>
|
|
44
|
+
</template>
|
|
45
|
+
|
|
46
|
+
<div
|
|
47
|
+
class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
|
|
48
|
+
>
|
|
49
|
+
<div>lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
|
|
50
|
+
<div @click.stop>
|
|
51
|
+
<EUISelect
|
|
52
|
+
search-label="name"
|
|
53
|
+
label="Select Label"
|
|
54
|
+
placeholder="Placeholder"
|
|
55
|
+
:items="datas"
|
|
56
|
+
:multiple="true"
|
|
57
|
+
:multiple-limit="3"
|
|
58
|
+
/>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<div>lorem ipsum dolor sit amet consectetur adipisicing elit</div>
|
|
62
|
+
<div class="flex items-center justify-end gap-4 pt-4">
|
|
63
|
+
<EUIButton
|
|
64
|
+
type="button"
|
|
65
|
+
size="md"
|
|
66
|
+
color="white"
|
|
67
|
+
:loading="isLoading"
|
|
68
|
+
@click="resetFilters()"
|
|
69
|
+
>Reset</EUIButton
|
|
70
|
+
>
|
|
71
|
+
<EUIButton
|
|
72
|
+
type="button"
|
|
73
|
+
size="md"
|
|
74
|
+
color="purple"
|
|
75
|
+
:loading="isLoading"
|
|
76
|
+
@click="applyFilter()"
|
|
77
|
+
>Apply</EUIButton
|
|
78
|
+
>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</EUIPopover>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<div
|
|
86
|
+
class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
|
|
87
|
+
>
|
|
88
|
+
<div class="text-base font-semibold leading-loose text-gray-900">
|
|
89
|
+
Popover Hover Method
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<div class="inline-flex items-center justify-end flex-none gap-4">
|
|
93
|
+
<EUIPopover
|
|
94
|
+
trigger="hover"
|
|
95
|
+
placement="bottom-end"
|
|
96
|
+
:hover-hide-delay="150"
|
|
97
|
+
className="max-w-80 min-w-80"
|
|
98
|
+
customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
|
|
99
|
+
>
|
|
100
|
+
<template #referenceButton>
|
|
101
|
+
<div class="relative">
|
|
102
|
+
<FunnelIcon class="text-current size-6" />
|
|
103
|
+
<div
|
|
104
|
+
class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
|
|
105
|
+
/>
|
|
106
|
+
</div>
|
|
107
|
+
</template>
|
|
108
|
+
<div
|
|
109
|
+
class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
|
|
110
|
+
>
|
|
111
|
+
<div>
|
|
112
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex atque
|
|
113
|
+
sed illo ipsa tenetur dolores minus quis, impedit aliquam magni.
|
|
114
|
+
Animi laborum tenetur culpa aperiam porro nihil eius soluta
|
|
115
|
+
asperiores.
|
|
116
|
+
</div>
|
|
117
|
+
|
|
118
|
+
<div class="flex items-center justify-end gap-4 pt-4">
|
|
119
|
+
<EUIButton
|
|
120
|
+
type="button"
|
|
121
|
+
size="md"
|
|
122
|
+
color="white"
|
|
123
|
+
:loading="isLoading"
|
|
124
|
+
@click="resetFilters()"
|
|
125
|
+
>Reset</EUIButton
|
|
126
|
+
>
|
|
127
|
+
<EUIButton
|
|
128
|
+
type="button"
|
|
129
|
+
size="md"
|
|
130
|
+
color="purple"
|
|
131
|
+
:loading="isLoading"
|
|
132
|
+
@click="applyFilter()"
|
|
133
|
+
>Apply</EUIButton
|
|
134
|
+
>
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
</EUIPopover>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
|
|
141
|
+
<div
|
|
142
|
+
class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
|
|
143
|
+
>
|
|
144
|
+
<div class="text-base font-semibold leading-loose text-gray-900">
|
|
145
|
+
Popover Default Open
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
<div class="inline-flex items-center justify-end flex-none gap-4">
|
|
149
|
+
<EUIPopover
|
|
150
|
+
v-model:visible="isInitiallyOpen"
|
|
151
|
+
placement="bottom-end"
|
|
152
|
+
:hover-hide-delay="150"
|
|
153
|
+
className="max-w-80 min-w-80"
|
|
154
|
+
customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
|
|
155
|
+
>
|
|
156
|
+
<template #referenceButton>
|
|
157
|
+
<div class="relative">
|
|
158
|
+
<FunnelIcon class="text-current size-6" />
|
|
159
|
+
<div
|
|
160
|
+
class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
|
|
161
|
+
/>
|
|
162
|
+
</div>
|
|
163
|
+
</template>
|
|
164
|
+
<div
|
|
165
|
+
class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
|
|
166
|
+
>
|
|
167
|
+
<div>
|
|
168
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex atque
|
|
169
|
+
sed illo ipsa tenetur dolores minus quis, impedit aliquam magni.
|
|
170
|
+
Animi laborum tenetur culpa aperiam porro nihil eius soluta
|
|
171
|
+
asperiores.
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<div class="flex items-center justify-end gap-4 pt-4">
|
|
175
|
+
<EUIButton
|
|
176
|
+
type="button"
|
|
177
|
+
size="md"
|
|
178
|
+
color="white"
|
|
179
|
+
:loading="isLoading"
|
|
180
|
+
@click="resetFilters()"
|
|
181
|
+
>Reset</EUIButton
|
|
182
|
+
>
|
|
183
|
+
<EUIButton
|
|
184
|
+
type="button"
|
|
185
|
+
size="md"
|
|
186
|
+
color="purple"
|
|
187
|
+
:loading="isLoading"
|
|
188
|
+
@click="onDefaultClose()"
|
|
189
|
+
>Apply</EUIButton
|
|
190
|
+
>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
</EUIPopover>
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
<div
|
|
198
|
+
class="flex items-center justify-between w-full max-w-2xl gap-4 p-2 mx-auto border rounded-lg h-max"
|
|
199
|
+
>
|
|
200
|
+
<div class="text-base font-semibold leading-loose text-gray-900">
|
|
201
|
+
Popover Manual
|
|
202
|
+
</div>
|
|
203
|
+
|
|
204
|
+
<div class="inline-flex items-center justify-end flex-none gap-4">
|
|
205
|
+
<EUIPopover
|
|
206
|
+
trigger="manual"
|
|
207
|
+
v-model:visible="popoverVisible"
|
|
208
|
+
placement="top"
|
|
209
|
+
className="max-w-80 min-w-80"
|
|
210
|
+
customButton="capitalize box-border border-none inline-flex flex-row gap-x-2 items-center active:scale-[.97] active:shadow-md transition duration-150 ease-in-out active:translate-y-0.5 rounded-lg bg-white hover:bg-gray-100 active:bg-gray-50 text-black cursor-pointer active:shadow-white/50 active:bg-transparent text-base font-semibold p-2"
|
|
211
|
+
@click="onPopoverToggle"
|
|
212
|
+
>
|
|
213
|
+
<template #referenceButton>
|
|
214
|
+
<div class="relative">
|
|
215
|
+
<FunnelIcon class="text-current size-6" />
|
|
216
|
+
<div
|
|
217
|
+
class="absolute bg-purple-600 border-2 border-white -top-1 -right-1 rounded-3xl size-3"
|
|
218
|
+
/>
|
|
219
|
+
</div>
|
|
220
|
+
</template>
|
|
221
|
+
<div
|
|
222
|
+
class="block p-6 bg-white rounded-lg shadow-lg me-2 ring-1 ring-gray-100 ring-opacity-10"
|
|
223
|
+
>
|
|
224
|
+
<div>lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
|
|
225
|
+
<div @click.stop>
|
|
226
|
+
<EUISelect
|
|
227
|
+
search-label="name"
|
|
228
|
+
label="Select Label"
|
|
229
|
+
placeholder="Placeholder"
|
|
230
|
+
:items="datas"
|
|
231
|
+
:multiple="true"
|
|
232
|
+
:multiple-limit="3"
|
|
233
|
+
/>
|
|
234
|
+
</div>
|
|
235
|
+
|
|
236
|
+
<div>lorem ipsum dolor sit amet consectetur adipisicing elit</div>
|
|
237
|
+
|
|
238
|
+
<div class="flex items-center justify-end gap-4 pt-4">
|
|
239
|
+
<EUIButton
|
|
240
|
+
type="button"
|
|
241
|
+
size="md"
|
|
242
|
+
color="white"
|
|
243
|
+
:loading="isLoading"
|
|
244
|
+
@click="resetFilters()"
|
|
245
|
+
>Reset</EUIButton
|
|
246
|
+
>
|
|
247
|
+
<EUIButton
|
|
248
|
+
type="button"
|
|
249
|
+
size="md"
|
|
250
|
+
color="purple"
|
|
251
|
+
:loading="isLoading"
|
|
252
|
+
@click="applyFilter()"
|
|
253
|
+
>Apply</EUIButton
|
|
254
|
+
>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
</EUIPopover>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
</div>
|
|
261
|
+
|
|
8
262
|
|
|
9
|
-
|
|
263
|
+
<div class="mb-10">
|
|
10
264
|
<EUITabOutline
|
|
11
265
|
activeColor="purple"
|
|
12
266
|
size="sm"
|
|
@@ -31,8 +285,10 @@
|
|
|
31
285
|
</EUITabOutline>
|
|
32
286
|
</div>
|
|
33
287
|
|
|
34
|
-
|
|
35
|
-
<
|
|
288
|
+
<div class="p-8 space-x-6 space-y-4">
|
|
289
|
+
<pre class="text-right">{{ activeDays }}--</pre>
|
|
290
|
+
<div class="inline-flex flex-col items-end w-full">
|
|
291
|
+
<EUIButtonGroup
|
|
36
292
|
activeColor="purple"
|
|
37
293
|
size="sm"
|
|
38
294
|
:rounded="false"
|
|
@@ -44,66 +300,13 @@
|
|
|
44
300
|
<div
|
|
45
301
|
class="px-2 text-sm font-normal leading-tight tracking-wide text-black me-4 font-inter"
|
|
46
302
|
>
|
|
47
|
-
Renewals due in
|
|
303
|
+
Renewals due in
|
|
48
304
|
</div>
|
|
49
305
|
</template>
|
|
50
306
|
<template #default="{ data, activeName}">
|
|
51
307
|
{{ data.name }} <small :class="activeName === data.name ? 'opacity-100': 'opacity-75'">({{ data.count }})</small>
|
|
52
308
|
</template>
|
|
53
309
|
</EUIButtonGroup>
|
|
54
|
-
</div>
|
|
55
|
-
</div>
|
|
56
|
-
</template>
|
|
57
|
-
<script setup lang="ts">
|
|
58
|
-
import { ref } from "vue";
|
|
59
|
-
import EUITabOutline from "./tabs/EUITabOutline.vue";
|
|
60
|
-
import EUIButtonGroup from "./button/EUIButtonGroup.vue";
|
|
61
|
-
|
|
62
|
-
const allDays = ref([
|
|
63
|
-
{ name: "7 days", count: 5 },
|
|
64
|
-
{ name: "15 days", count: 10 },
|
|
65
|
-
{ name: "16-30 days", count: 20 },
|
|
66
|
-
{ name: "31-60 days", count: 121 },
|
|
67
|
-
{ name: "61-90 days", count: 40 },
|
|
68
|
-
]);
|
|
69
|
-
|
|
70
|
-
const activeDays = ref(allDays.value[0].name);
|
|
71
|
-
const activeTab = ref(allDays.value[3].name)
|
|
72
|
-
|
|
73
|
-
const onchangeActiveTab = (val: any) => {
|
|
74
|
-
activeTab.value = val.name;
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
const onchangeDays = (val:any) => {
|
|
78
|
-
activeDays.value = val.name
|
|
79
|
-
}
|
|
80
|
-
</script>
|
|
81
|
-
<style lang="scss"></style>
|
|
82
|
-
|
|
83
|
-
<!-- Development code here -->
|
|
84
|
-
<!--<template>
|
|
85
|
-
<div class="h-[clac(100svh-64px)] w-full px-10 py-8 max-w-screen-xl mx-auto">
|
|
86
|
-
<h1 class="mb-2 font-semibold text-gray-900 tetx-lg">Edvoy UI Componnet</h1>
|
|
87
|
-
|
|
88
|
-
<div class="p-8 space-x-6 space-y-12">
|
|
89
|
-
<pre class="text-right">{{ activeDays }}--</pre>
|
|
90
|
-
<div class="inline-flex flex-col items-end w-full">
|
|
91
|
-
<EUIButtonGroup
|
|
92
|
-
activeColor="purple"
|
|
93
|
-
size="sm"
|
|
94
|
-
:rounded="false"
|
|
95
|
-
:items="allDays"
|
|
96
|
-
:defaultActive="activeDays"
|
|
97
|
-
@update:clicked-button="onchangeActiveTab"
|
|
98
|
-
>
|
|
99
|
-
<template #before>
|
|
100
|
-
<div
|
|
101
|
-
class="px-2 text-sm font-normal leading-tight tracking-wide text-black me-4 font-inter"
|
|
102
|
-
>
|
|
103
|
-
Renewals due in
|
|
104
|
-
</div>
|
|
105
|
-
</template>
|
|
106
|
-
</EUIButtonGroup>
|
|
107
310
|
</div>
|
|
108
311
|
|
|
109
312
|
<div class="inline-flex items-center justify-end w-full">
|
|
@@ -1188,7 +1391,7 @@ import EUIAvatar from "./avatar/EUIAvatar.vue";
|
|
|
1188
1391
|
import EUIStepperTimeline from "./stepperTimeline/EUIStepperTimeline.vue";
|
|
1189
1392
|
import EUIAccordion from "./accordion/EUIAccordion.vue";
|
|
1190
1393
|
import EUITelephone from "./telephone/EUITelephone.vue";
|
|
1191
|
-
import { DevicePhoneMobileIcon, ExclamationTriangleIcon, HomeIcon } from "@heroicons/vue/24/outline";
|
|
1394
|
+
import { DevicePhoneMobileIcon, ExclamationTriangleIcon, FunnelIcon, HomeIcon } from "@heroicons/vue/24/outline";
|
|
1192
1395
|
import EUIDatepicker from "./datepicker/EUIDatepicker.vue";
|
|
1193
1396
|
import EUIDashboardTable from "./table/EUIDashboardTable.vue";
|
|
1194
1397
|
import tabData from "../data/tab";
|
|
@@ -1207,6 +1410,31 @@ import UTableview from "./table/UTableview.vue";
|
|
|
1207
1410
|
import EUIAlerts from "./alerts/EUIAlerts.vue";
|
|
1208
1411
|
import EUIButtonGroup from "./button/EUIButtonGroup.vue";
|
|
1209
1412
|
import EUISearchExpand from "./searchexpand/EUISearchExpand.vue";
|
|
1413
|
+
import EUITabOutline from "./tabs/EUITabOutline.vue";
|
|
1414
|
+
import EUIPopover from "./popover/EUIPopover.vue";
|
|
1415
|
+
|
|
1416
|
+
// TODO: Popover
|
|
1417
|
+
const isLoading = ref(false);
|
|
1418
|
+
const popoverVisible = ref(false);
|
|
1419
|
+
|
|
1420
|
+
const isInitiallyOpen = ref(true);
|
|
1421
|
+
const onDefaultClose = () => {
|
|
1422
|
+
isInitiallyOpen.value = false;
|
|
1423
|
+
};
|
|
1424
|
+
|
|
1425
|
+
const onPopoverToggle = () => {
|
|
1426
|
+
popoverVisible.value = !popoverVisible.value;
|
|
1427
|
+
};
|
|
1428
|
+
|
|
1429
|
+
const onPopoverHide = () => {
|
|
1430
|
+
popoverVisible.value = false;
|
|
1431
|
+
};
|
|
1432
|
+
|
|
1433
|
+
const applyFilter = () => {
|
|
1434
|
+
onPopoverHide();
|
|
1435
|
+
};
|
|
1436
|
+
|
|
1437
|
+
const resetFilters = () => {};
|
|
1210
1438
|
|
|
1211
1439
|
const allDays = ref([
|
|
1212
1440
|
{ name: "7 days", count: 5 },
|
|
@@ -1216,12 +1444,17 @@ const allDays = ref([
|
|
|
1216
1444
|
{ name: "61-90 days", count: 40 },
|
|
1217
1445
|
]);
|
|
1218
1446
|
|
|
1219
|
-
const activeDays = ref(allDays.value[
|
|
1447
|
+
const activeDays = ref(allDays.value[0].name);
|
|
1448
|
+
const activeTab = ref(allDays.value[3].name)
|
|
1220
1449
|
|
|
1221
1450
|
const onchangeActiveTab = (val: any) => {
|
|
1222
|
-
|
|
1451
|
+
activeTab.value = val.name;
|
|
1223
1452
|
};
|
|
1224
1453
|
|
|
1454
|
+
const onchangeDays = (val:any) => {
|
|
1455
|
+
activeDays.value = val.name
|
|
1456
|
+
}
|
|
1457
|
+
|
|
1225
1458
|
const searchInput = ref("");
|
|
1226
1459
|
const showSearch = ref(false);
|
|
1227
1460
|
|
|
@@ -1229,7 +1462,6 @@ const seachStudent = (e) => {
|
|
|
1229
1462
|
console.log("seachStudent", e);
|
|
1230
1463
|
};
|
|
1231
1464
|
|
|
1232
|
-
|
|
1233
1465
|
const mobileNumber = ref("+91 8667444951");
|
|
1234
1466
|
const datepicker = ref(new Date());
|
|
1235
1467
|
const loading = ref(false);
|