Skip to content

Commit e56863a

Browse files
hunterliu1003hunterliu1003
committed
Merge branch 'master' into next
2 parents c982beb + 2c9333f commit e56863a

35 files changed

+1365
-282
lines changed

‎.eslintignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
dist
2-
types/**/*.d.ts
2+
types/**/*.d.ts
3+
docs

‎docs/components/examples/VContent.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<p>{{ content }}</p>
3+
</template>
4+
5+
<script>
6+
export default {
7+
props: {
8+
content: {
9+
type: String,
10+
default: ''
11+
}
12+
}
13+
}
14+
</script>

‎docs/components/examples/VTitle.vue

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<div>{{ text }}</div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
props: {
8+
text: {
9+
type: String,
10+
default: ''
11+
}
12+
}
13+
}
14+
</script>

‎docs/components/examples/basic/BasicOptions.vue

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
<template>
2+
<div class="pb-8">
3+
<v-modal
4+
v-model="showModal"
5+
:ssr="ssr"
6+
:lock-scroll="lockScroll"
7+
:hide-overlay="hideOverlay"
8+
:click-to-close="clickToClose"
9+
:esc-to-close="escToClose"
10+
:prevent-click="preventClick"
11+
:transition="transition ? 'vfm' : ''"
12+
:overlay-transition="overlayTransition ? 'vfm' : ''"
13+
:z-index-auto="zIndexAuto"
14+
:z-index-base="zIndexBase"
15+
:z-index="allowZIndex ? zIndex : false"
16+
:attach="attach ? '#attach' : false"
17+
:focus-retain="focusRetain"
18+
:focus-trap="focusTrap"
19+
@confirm="showModal = false"
20+
@cancel="showModal = false"
21+
>
22+
<template v-slot:title># Hello, world!</template>
23+
<p>
24+
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
25+
</p>
26+
</v-modal>
27+
28+
<button class="vfm-btn" @click="showModal = true">Open Modal</button>
29+
30+
<h3>Prop Options:</h3>
31+
32+
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4 border rounded">
33+
<label class="flex items-center space-x-2">
34+
<span>value:</span>
35+
<input v-model="showModal" type="checkbox" />
36+
</label>
37+
<label class="flex items-center space-x-2">
38+
<span>ssr:</span>
39+
<input v-model="ssr" type="checkbox" />
40+
</label>
41+
42+
<label class="flex items-center space-x-2">
43+
<span>lockScroll:</span>
44+
<input v-model="lockScroll" type="checkbox" />
45+
</label>
46+
<label class="flex items-center space-x-2">
47+
<span>hideOverlay:</span>
48+
<input v-model="hideOverlay" type="checkbox" />
49+
</label>
50+
<label class="flex items-center space-x-2">
51+
<span>clickToClose:</span>
52+
<input v-model="clickToClose" type="checkbox" />
53+
</label>
54+
<label class="flex items-center space-x-2">
55+
<span>escToClose:</span>
56+
<input v-model="escToClose" type="checkbox" />
57+
</label>
58+
<label class="flex items-center space-x-2">
59+
<span>preventClick:</span>
60+
<input v-model="preventClick" type="checkbox" />
61+
</label>
62+
<label class="flex items-center space-x-2">
63+
<span>transition:</span>
64+
<input v-model="transition" type="checkbox" />
65+
</label>
66+
<label class="flex items-center space-x-2">
67+
<span>overlayTransition:</span>
68+
<input v-model="overlayTransition" type="checkbox" />
69+
</label>
70+
<label class="flex items-center space-x-2">
71+
<span>zIndexAuto:</span>
72+
<input v-model="zIndexAuto" type="checkbox" />
73+
</label>
74+
<label class="flex items-center space-x-2">
75+
<span>zIndexBase:</span>
76+
<input v-model="zIndexBase" class="w-20 pl-2 dark:text-black rounded focus:outline-none" type="number" />
77+
</label>
78+
<div class="flex items-center space-x-2">
79+
<label class="flex items-center space-x-2">
80+
<input v-model="allowZIndex" type="checkbox" />
81+
<span>zIndex:</span>
82+
</label>
83+
<label>
84+
<input
85+
v-model="zIndex"
86+
type="number"
87+
class="w-20 pl-2 dark:text-black rounded focus:outline-none"
88+
:disabled="!allowZIndex"
89+
/>
90+
</label>
91+
</div>
92+
<label class="flex items-center space-x-2">
93+
<span>attach:</span>
94+
<input v-model="attach" type="checkbox" />
95+
</label>
96+
<label class="flex items-center space-x-2">
97+
<span>focusRetain:</span>
98+
<input v-model="focusRetain" type="checkbox" />
99+
</label>
100+
<label class="flex items-center space-x-2">
101+
<span>focusTrap:</span>
102+
<input v-model="focusTrap" type="checkbox" />
103+
</label>
104+
<button class="vfm-btn" @click="reset">reset</button>
105+
</div>
106+
<h4>Attach area:</h4>
107+
<div id="attach" class="relative w-full h-64 mt-8 p-4 border rounded dark:bg-gray-700">
108+
<button class="vfm-btn" @click="openAttach">
109+
Attach to here and open modal
110+
</button>
111+
<p>click will:</p>
112+
<ul>
113+
<li>set "attach" to "true"</li>
114+
<li>set "lockScroll" to "false"</li>
115+
</ul>
116+
</div>
117+
</div>
118+
</template>
119+
120+
<script>
121+
const initData = () => ({
122+
showModal: false,
123+
ssr: true,
124+
lockScroll: true,
125+
hideOverlay: false,
126+
clickToClose: true,
127+
escToClose: false,
128+
preventClick: false,
129+
transition: true,
130+
overlayTransition: true,
131+
zIndexAuto: true,
132+
zIndexBase: 1000,
133+
allowZIndex: false,
134+
zIndex: 0,
135+
attach: false,
136+
focusRetain: true,
137+
focusTrap: false
138+
})
139+
140+
export default {
141+
data: initData,
142+
methods: {
143+
openAttach() {
144+
this.attach = '#attach'
145+
this.showModal = true
146+
this.lockScroll = false
147+
},
148+
reset() {
149+
Object.assign(this, initData())
150+
}
151+
}
152+
}
153+
</script>

‎docs/components/examples/basic/BasicPlainStyleCodepen.vue

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<iframe
3+
height="600"
4+
style="width: 100%;"
5+
scrolling="no"
6+
title="Plain style - Vue Final Modal"
7+
src="https://codepen.io/hunterliu1003/embed/ZEWoYeE?height=265&theme-id=dark&default-tab=js,result"
8+
frameborder="no"
9+
loading="lazy"
10+
allowtransparency="true"
11+
allowfullscreen="true"
12+
>
13+
See the Pen
14+
<a href="https://codepen.io/hunterliu1003/pen/ZEWoYeE">Plain style - Vue Final Modal</a>
15+
by Hunter (<a href="https://codepen.io/hunterliu1003">@hunterliu1003</a>) on
16+
<a href="https://codepen.io">CodePen</a>.
17+
</iframe>
18+
</template>

‎docs/components/examples/basic/VAccessibility.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div>
3+
<v-modal v-model="show" @confirm="show = false" @cancel="show = false" focus-trap>
4+
<template v-slot:title>Hello, vue-final-modal</template>
5+
<p>
6+
Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.
7+
</p>
8+
</v-modal>
9+
10+
<button class="vfm-btn" @click="show = true">Open modal</button>
11+
</div>
12+
</template>
13+
14+
<script>
15+
export default {
16+
data: () => ({
17+
show: false
18+
})
19+
}
20+
</script>

‎docs/components/examples/basic/VActionButtons.vue

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div>
3+
<vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
4+
<button class="modal__close" @click="showModal = false">
5+
<mdi-close></mdi-close>
6+
</button>
7+
<span class="modal__title">Hello, vue-final-modal</span>
8+
<div class="modal__content">
9+
<p v-for="i in 100" :key="i">
10+
Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.
11+
</p>
12+
</div>
13+
<div class="modal__action">
14+
<button class="vfm-btn" @click="showModal = false">confirm</button>
15+
<button class="vfm-btn" @click="showModal = false">cancel</button>
16+
</div>
17+
</vue-final-modal>
18+
<button class="vfm-btn" @click="showModal = true">Open modal</button>
19+
</div>
20+
</template>
21+
22+
<script>
23+
export default {
24+
data: () => ({
25+
showModal: false
26+
})
27+
}
28+
</script>
29+
30+
<style scoped>
31+
::v-deep .modal-container {
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
}
36+
::v-deep .modal-content {
37+
position: relative;
38+
display: flex;
39+
flex-direction: column;
40+
max-height: 90%;
41+
margin: 0 1rem;
42+
padding: 1rem;
43+
border: 1px solid #e2e8f0;
44+
border-radius: 0.25rem;
45+
background: #fff;
46+
}
47+
.modal__title {
48+
margin: 0 2rem 0 0;
49+
font-size: 1.5rem;
50+
font-weight: 700;
51+
}
52+
.modal__content {
53+
flex-grow: 1;
54+
overflow-y: auto;
55+
}
56+
.modal__action {
57+
display: flex;
58+
justify-content: center;
59+
align-items: center;
60+
flex-shrink: 0;
61+
padding: 1rem 0 0;
62+
}
63+
.modal__close {
64+
position: absolute;
65+
top: 0.5rem;
66+
right: 0.5rem;
67+
}
68+
</style>
69+
70+
<style scoped>
71+
.dark-mode div::v-deep .modal-content {
72+
border-color: #2d3748;
73+
background-color: #1a202c;
74+
}
75+
</style>

‎docs/components/examples/basic/VApiShow.vue

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div>
3+
<v-modal v-model="showModal" name="VApiShow" @confirm="showModal = false" @cancel="showModal = false">
4+
<template v-slot="{ params }"> Hi {{ params.userName }} </template>
5+
<template v-slot:title>$vfm.show</template>
6+
</v-modal>
7+
<button class="vfm-btn" @click="$vfm.show('VApiShow', { userName: 'vue-final-modal' })">
8+
Open modal
9+
</button>
10+
</div>
11+
</template>
12+
13+
<script>
14+
export default {
15+
data: () => ({
16+
showModal: false
17+
})
18+
}
19+
</script>

‎docs/components/examples/basic/VBackground.vue

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<div>
3+
<vue-final-modal v-model="showModal" content-class="modal-content">
4+
<span class="modal__title">Hello, vue-final-modal</span>
5+
</vue-final-modal>
6+
<button class="vfm-btn" @click="showModal = true">Open modal</button>
7+
</div>
8+
</template>
9+
10+
<script>
11+
export default {
12+
data: () => ({
13+
showModal: false
14+
})
15+
}
16+
</script>
17+
18+
<style scoped>
19+
::v-deep .modal-content {
20+
display: inline-block;
21+
padding: 1rem;
22+
border: 1px solid #e2e8f0;
23+
border-radius: 0.25rem;
24+
background: #fff;
25+
}
26+
.modal__title {
27+
font-size: 1.5rem;
28+
font-weight: 700;
29+
}
30+
</style>
31+
32+
<style scoped>
33+
.dark-mode div::v-deep .modal-content {
34+
border-color: #2d3748;
35+
background-color: #1a202c;
36+
}
37+
</style>

‎docs/components/examples/basic/VBasic.vue

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div>
3+
<vue-final-modal v-model="showModal">
4+
<span class="modal__title">Hello, vue-final-modal</span>
5+
</vue-final-modal>
6+
<button class="vfm-btn" @click="showModal = true">Open modal</button>
7+
</div>
8+
</template>
9+
10+
<script>
11+
export default {
12+
data: () => ({
13+
showModal: false
14+
})
15+
}
16+
</script>
17+
18+
<style scoped>
19+
.modal__title {
20+
font-size: 1.5rem;
21+
font-weight: 700;
22+
}
23+
</style>

0 commit comments

Comments
 (0)