Skip to content

Commit 9c27a88

Browse files
hunterliu1003hunterliu1003
committed
udpate docs
1 parent f3932df commit 9c27a88

28 files changed

+324
-124
lines changed

‎README.md

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ If you need a highly customizable modal component for Vue.js, `Vue Final Modal`
2525

2626
features:
2727

28+
- Support Vue 3 and Vue 2
2829
- Tailwind CSS friendly
2930
- Renderless component
3031
- SSR support
@@ -107,10 +108,6 @@ const CLASS_TYPES = [String, Object, Array]
107108
- @before-close: Before close
108109
- @closed: After closed
109110

110-
## Roadmap
111+
## Contribution
111112

112-
If you have any ideas for optimization of `vue-final-modal`, feel free to open [issues](https://github.com/hunterliu1003/vue-final-modal/issues) or [pull request](https://github.com/hunterliu1003/vue-final-modal/pulls).
113-
114-
like:
115-
116-
- support Vue 3.0
113+
If you have any ideas for optimization of `vue-final-modal`, feel free to open [issues](https://github.com/hunterliu1003/vue-final-modal/issues) or [pull requests](https://github.com/hunterliu1003/vue-final-modal/pulls).

‎docs/components/global/BaseButton.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</button>
55
</template>
66

7-
<style lang="scss" scoped>
7+
<style scoped>
88
.base-button {
99
@apply mb-2 px-2 py-1 border rounded;
1010
}

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

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<template>
2+
<div class="pb-8">
3+
<vue-final-modal
4+
v-model="showModal"
5+
classes="flex justify-center items-center"
6+
content-class="relative max-h-1/2 p-4 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded-lg overflow-auto"
7+
v-bind="props"
8+
>
9+
<span class="text-2xl mb-2"># Hello, world!</span>
10+
<p>
11+
Lorem Ipsum is simply dummy text of the printing and typesetting
12+
industry.
13+
</p>
14+
<button
15+
class="absolute top-0 right-0 mt-2 mr-4 text-3xl hover:text-gray-700 leading-none focus:outline-none"
16+
@click="showModal = false"
17+
>
18+
x
19+
</button>
20+
</vue-final-modal>
21+
22+
<base-button @click="showModal = true">Open Basic Modal</base-button>
23+
24+
<h4>Prop Options:</h4>
25+
26+
<div
27+
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4 border rounded"
28+
>
29+
<label class="flex items-center space-x-2">
30+
<span>value:</span>
31+
<input v-model="showModal" type="checkbox" />
32+
</label>
33+
<label class="flex items-center space-x-2">
34+
<span>ssr:</span>
35+
<input v-model="ssr" type="checkbox" />
36+
</label>
37+
38+
<label class="flex items-center space-x-2">
39+
<span>lockScroll:</span>
40+
<input v-model="lockScroll" type="checkbox" />
41+
</label>
42+
<label class="flex items-center space-x-2">
43+
<span>hideOverlay:</span>
44+
<input v-model="hideOverlay" type="checkbox" />
45+
</label>
46+
<label class="flex items-center space-x-2">
47+
<span>clickToClose:</span>
48+
<input v-model="clickToClose" type="checkbox" />
49+
</label>
50+
<label class="flex items-center space-x-2">
51+
<span>preventClick:</span>
52+
<input v-model="preventClick" type="checkbox" />
53+
</label>
54+
<label class="flex items-center space-x-2">
55+
<span>transition:</span>
56+
<input v-model="transition" type="checkbox" />
57+
</label>
58+
<label class="flex items-center space-x-2">
59+
<span>overlayTransition:</span>
60+
<input v-model="overlayTransition" type="checkbox" />
61+
</label>
62+
<label class="flex items-center space-x-2">
63+
<span>zIndexBase:</span>
64+
<input
65+
v-model="zIndexBase"
66+
class="w-20 pl-2 dark:text-black rounded focus:outline-none"
67+
type="number"
68+
/>
69+
</label>
70+
<div class="flex items-center space-x-2">
71+
<label class="flex items-center space-x-2">
72+
<input v-model="allowZIndex" type="checkbox" />
73+
<span>zIndex:</span>
74+
</label>
75+
<input
76+
v-model="zIndex"
77+
type="number"
78+
class="w-20 pl-2 dark:text-black rounded focus:outline-none"
79+
:disabled="!allowZIndex"
80+
/>
81+
</div>
82+
<label class="flex items-center space-x-2">
83+
<span>attach:</span>
84+
<input v-model="attach" type="checkbox" />
85+
</label>
86+
</div>
87+
<h4>Attach area:</h4>
88+
<div
89+
id="attach"
90+
class="relative w-full h-64 mt-8 p-4 border rounded dark:bg-gray-700"
91+
>
92+
<base-button
93+
@click="
94+
attach = '#attach'
95+
showModal = true
96+
"
97+
>Attach to here and open modal</base-button
98+
>
99+
</div>
100+
</div>
101+
</template>
102+
103+
<script>
104+
export default {
105+
data: () => ({
106+
showModal: false,
107+
ssr: true,
108+
lockScroll: true,
109+
hideOverlay: false,
110+
clickToClose: true,
111+
preventClick: false,
112+
transition: true,
113+
overlayTransition: true,
114+
zIndexBase: 1000,
115+
allowZIndex: false,
116+
zIndex: 0,
117+
attach: false
118+
}),
119+
computed: {
120+
props() {
121+
return {
122+
ssr: this.ssr,
123+
lockScroll: this.lockScroll,
124+
hideOverlay: this.hideOverlay,
125+
clickToClose: this.clickToClose,
126+
preventClick: this.preventClick,
127+
transition: this.transition ? 'vfm' : '',
128+
overlayTransition: this.overlayTransition ? 'vfm' : '',
129+
zIndexBase: this.zIndexBase,
130+
...(this.allowZIndex && { zIndex: this.zIndex }),
131+
attach: this.attach ? '#attach' : false
132+
}
133+
}
134+
}
135+
}
136+
</script>

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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"
15+
>Plain style - Vue Final Modal</a
16+
>
17+
by Hunter (<a href="https://codepen.io/hunterliu1003">@hunterliu1003</a>) on
18+
<a href="https://codepen.io">CodePen</a>.
19+
</iframe>
20+
</template>
21+
22+
<script>
23+
export default {
24+
data: () => ({
25+
showModal: false
26+
})
27+
}
28+
</script>
29+
30+
<style>
31+
.modal-container {
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
}
36+
.modal-content {
37+
position: relative;
38+
width: 50%;
39+
max-height: 300px;
40+
padding: 16px;
41+
overflow: auto;
42+
background-color: #fff;
43+
border-radius: 4px;
44+
}
45+
.modal-close {
46+
position: absolute;
47+
top: 0;
48+
right: 0;
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
width: 32px;
53+
height: 32px;
54+
margin: 8px 8px 0 0;
55+
cursor: pointer;
56+
}
57+
.modal-close::hover {
58+
color: gray;
59+
}
60+
</style>

‎docs/components/global/BaseExampleAttach.vue renamed to ‎docs/components/global/tailwind/TailwindAttach.vue

File renamed without changes.

‎docs/components/global/CodepenAttach.vue renamed to ‎docs/components/global/tailwind/TailwindAttachCodepen.vue

File renamed without changes.

‎docs/components/global/BaseExampleClickToClose.vue renamed to ‎docs/components/global/tailwind/TailwindClickToClose.vue

File renamed without changes.

‎docs/components/global/CodepenClickToClose.vue renamed to ‎docs/components/global/tailwind/TailwindClickToCloseCodepen.vue

File renamed without changes.

‎docs/components/global/BaseExampleEvents.vue renamed to ‎docs/components/global/tailwind/TailwindEvents.vue

File renamed without changes.

‎docs/components/global/CodepenEvents.vue renamed to ‎docs/components/global/tailwind/TailwindEventsCodepen.vue

File renamed without changes.

0 commit comments

Comments
 (0)