edvoyui-component-library-test-flight 0.0.181 → 0.0.182
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/edvoy-ui.cjs.js +1 -1
- package/dist/edvoy-ui.css +1 -1
- package/dist/edvoy-ui.es.js +92 -90
- package/dist/edvoy-ui.umd.js +2 -2
- package/dist/modal/EUIModal.vue.d.ts +1 -1
- package/dist/modal/EUIModal.vue.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/modal/EUIModal.vue +89 -85
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=script&lang.ts";
|
|
2
|
-
import "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=style&index=0&scoped=
|
|
2
|
+
import "/Volumes/work/repos/edvoy-ui-v2/src/components/modal/EUIModal.vue?vue&type=style&index=0&scoped=df346633&lang.scss";
|
|
3
3
|
declare const _default: any;
|
|
4
4
|
export default _default;
|
|
5
5
|
//# sourceMappingURL=EUIModal.vue.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EUIModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/modal/EUIModal.vue"],"names":[],"mappings":"AACA,cAAc,2FAA2F,CAAC;
|
|
1
|
+
{"version":3,"file":"EUIModal.vue.d.ts","sourceRoot":"","sources":["../../src/components/modal/EUIModal.vue"],"names":[],"mappings":"AACA,cAAc,2FAA2F,CAAC;AAiG1G,OAAO,oHAAoH,CAAC;;AAE5H,wBAAmH"}
|
package/package.json
CHANGED
|
@@ -1,102 +1,106 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
v-if="isVisible"
|
|
6
|
-
class="fixed z-50 flex flex-col items-center justify-end inset-2 modal-wrapper"
|
|
7
|
-
:class="[
|
|
8
|
-
placement === 'top'
|
|
9
|
-
? 'sm:justify-start'
|
|
10
|
-
: placement === 'bottom'
|
|
11
|
-
? 'sm:justify-end'
|
|
12
|
-
: 'sm:justify-center',
|
|
13
|
-
]"
|
|
14
|
-
@click.self="closeModal"
|
|
15
|
-
>
|
|
16
|
-
<div
|
|
17
|
-
class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/25 pointer-events-none overflow-hidden cursor-auto backdrop-blur-sm"
|
|
18
|
-
></div>
|
|
2
|
+
<div>
|
|
3
|
+
<Teleport defer to="body">
|
|
4
|
+
<Transition name="modal" appear>
|
|
19
5
|
<div
|
|
6
|
+
v-if="isVisible"
|
|
7
|
+
class="fixed z-50 flex flex-col items-center justify-end inset-2 modal-wrapper"
|
|
20
8
|
:class="[
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
: 'max-h-[calc(100vh-3rem)] md:h-auto',
|
|
9
|
+
placement === 'top'
|
|
10
|
+
? 'sm:justify-start'
|
|
11
|
+
: placement === 'bottom'
|
|
12
|
+
? 'sm:justify-end'
|
|
13
|
+
: 'sm:justify-center',
|
|
27
14
|
]"
|
|
15
|
+
@click.self="closeModal"
|
|
28
16
|
>
|
|
29
|
-
<template v-if="$slots.header">
|
|
30
|
-
<slot name="header"></slot>
|
|
31
|
-
</template>
|
|
32
17
|
<div
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
18
|
+
class="backdrop fixed inset-0 z-[-1] w-screen h-screen bg-black/25 pointer-events-none overflow-hidden cursor-auto backdrop-blur-sm"
|
|
19
|
+
></div>
|
|
20
|
+
<div
|
|
21
|
+
:class="[
|
|
22
|
+
'bg-white shadow-lg w-full overflow-hidden relative flex flex-col justify-between modal-container',
|
|
23
|
+
slideClass,
|
|
24
|
+
roundedClass !== ''
|
|
25
|
+
? roundedClass
|
|
26
|
+
: 'rounded-t-3xl md:rounded-2xl',
|
|
27
|
+
size === 'full'
|
|
28
|
+
? 'h-full max-h-svh'
|
|
29
|
+
: 'max-h-[calc(100vh-3rem)] md:h-auto',
|
|
30
|
+
]"
|
|
36
31
|
>
|
|
37
|
-
<
|
|
38
|
-
<slot name="
|
|
39
|
-
</
|
|
40
|
-
<div
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
>
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
aria-hidden="true"
|
|
54
|
-
class="w-5 h-5"
|
|
32
|
+
<template v-if="$slots.header">
|
|
33
|
+
<slot name="header"></slot>
|
|
34
|
+
</template>
|
|
35
|
+
<div
|
|
36
|
+
v-else
|
|
37
|
+
class="flex flex-row items-center justify-between font-medium text-gray-700"
|
|
38
|
+
:class="slimHeader ? 'p-4 text-base' : 'p-6 text-lg'"
|
|
39
|
+
>
|
|
40
|
+
<h3 class="text-xl font-semibold">
|
|
41
|
+
<slot name="title">{{ title || "Modal Title" }}</slot>
|
|
42
|
+
</h3>
|
|
43
|
+
<div v-if="visibleClose" class="flex-initial">
|
|
44
|
+
<button
|
|
45
|
+
type="button"
|
|
46
|
+
class="flex items-center justify-center text-gray-400 bg-white hover:bg-gray-50 rounded-3xl hover:text-gray-600 size-8"
|
|
47
|
+
@click="closeModal"
|
|
55
48
|
>
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
49
|
+
<span class="sr-only">Close</span>
|
|
50
|
+
<svg
|
|
51
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
52
|
+
fill="none"
|
|
53
|
+
viewBox="0 0 24 24"
|
|
54
|
+
stroke-width="2"
|
|
55
|
+
stroke="currentColor"
|
|
56
|
+
aria-hidden="true"
|
|
57
|
+
class="w-5 h-5"
|
|
58
|
+
>
|
|
59
|
+
<path
|
|
60
|
+
stroke-linecap="round"
|
|
61
|
+
stroke-linejoin="round"
|
|
62
|
+
d="M6 18L18 6M6 6l12 12"
|
|
63
|
+
></path>
|
|
64
|
+
</svg>
|
|
65
|
+
</button>
|
|
66
|
+
</div>
|
|
63
67
|
</div>
|
|
64
|
-
</div>
|
|
65
|
-
|
|
66
|
-
<template v-if="$slots.content">
|
|
67
|
-
<slot name="content"></slot>
|
|
68
|
-
</template>
|
|
69
|
-
<div
|
|
70
|
-
v-else
|
|
71
|
-
class="p-4 border-t border-b border-gray-200 max-h-[calc(100vh-3rem)] flex-1"
|
|
72
|
-
>
|
|
73
|
-
<slot></slot>
|
|
74
|
-
</div>
|
|
75
68
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
>
|
|
83
|
-
<button
|
|
84
|
-
@click="closeModal"
|
|
85
|
-
class="px-4 py-2 text-base font-semibold tracking-wide text-gray-600 transition-colors duration-75 bg-white rounded-md hover:bg-gray-100"
|
|
69
|
+
<template v-if="$slots.content">
|
|
70
|
+
<slot name="content"></slot>
|
|
71
|
+
</template>
|
|
72
|
+
<div
|
|
73
|
+
v-else
|
|
74
|
+
class="p-4 border-t border-b border-gray-200 max-h-[calc(100vh-3rem)] flex-1"
|
|
86
75
|
>
|
|
87
|
-
|
|
88
|
-
</
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
76
|
+
<slot></slot>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<template v-if="$slots.footer">
|
|
80
|
+
<slot name="footer"></slot>
|
|
81
|
+
</template>
|
|
82
|
+
<div
|
|
83
|
+
v-else
|
|
84
|
+
class="sticky bottom-0 flex items-center justify-end float-none p-4 space-x-2"
|
|
92
85
|
>
|
|
93
|
-
|
|
94
|
-
|
|
86
|
+
<button
|
|
87
|
+
@click="closeModal"
|
|
88
|
+
class="px-4 py-2 text-base font-semibold tracking-wide text-gray-600 transition-colors duration-75 bg-white rounded-md hover:bg-gray-100"
|
|
89
|
+
>
|
|
90
|
+
Cancel
|
|
91
|
+
</button>
|
|
92
|
+
<button
|
|
93
|
+
@click="$emit('confirm')"
|
|
94
|
+
class="px-4 py-2 text-base font-semibold tracking-wide text-white transition-colors duration-75 bg-purple-600 rounded-md hover:bg-purple-700"
|
|
95
|
+
>
|
|
96
|
+
Confirm
|
|
97
|
+
</button>
|
|
98
|
+
</div>
|
|
95
99
|
</div>
|
|
96
100
|
</div>
|
|
97
|
-
</
|
|
98
|
-
</
|
|
99
|
-
</
|
|
101
|
+
</Transition>
|
|
102
|
+
</Teleport>
|
|
103
|
+
</div>
|
|
100
104
|
</template>
|
|
101
105
|
|
|
102
106
|
<script lang="ts">
|