Skip to content

Commit f50486c

Browse files
hunterliu1003hunterliu1003
committed
udpate docs & examples
1 parent bdf99f1 commit f50486c

18 files changed

+471
-145
lines changed

‎README.md‎

Lines changed: 74 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -9,69 +9,110 @@
99
<a href="https://www.npmjs.com/package/vue-final-modal"><img src="https://img.shields.io/npm/l/vue-final-modal.svg?sanitize=true" alt="License"></a>
1010
</p>
1111

12-
### [Documentation](https://hunterliu1003.github.io/vue-final-modal/)
13-
### [Examples](https://hunterliu1003.github.io/vue-final-modal/examples)
14-
### [CDN example](https://codepen.io/hunterliu1003/pen/PoZmbPm?editors=1010)
12+
<p align="right">
13+
<a href="https://www.buymeacoffee.com/PL2qJIx" target="_blank">
14+
<img src="https://cdn.buymeacoffee.com/buttons/v2/default-green.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" >
15+
</a>
16+
</p>
17+
18+
### 🎉 [Documentation](https://hunterliu1003.github.io/vue-final-modal/)
19+
20+
### 🙌 [Examples](https://hunterliu1003.github.io/vue-final-modal/examples)
21+
22+
### 🌏 [CDN example](https://codepen.io/hunterliu1003/pen/PoZmbPm?editors=1010)
1523

1624
## Introduction
1725

26+
If you need a highly customizable modal component for Vue.js, `Vue Final Modal` would be a nice choice.
27+
1828
features:
19-
- Tailwind CSS friendly
20-
- Renderless component
21-
- SSR support
22-
- Stackable
23-
- Detachable
24-
- Scrollable
25-
- Transition support
26-
- Mobile friendly
27-
- 3.2kb gzipped
2829

30+
- Tailwind CSS friendly
31+
- Renderless component
32+
- SSR support
33+
- Stackable
34+
- Detachable
35+
- Scrollable
36+
- Transition support
37+
- Mobile friendly
38+
- Tiny bundle size
2939

3040
## Install
3141

3242
NPM:
43+
3344
```bash
3445
npm install vue-final-modal --save
3546
```
3647

37-
Yarn:
48+
Yarn:
3849

3950
```bash
4051
yarn add vue-final-modal
4152
```
4253

43-
## How to use
54+
## Basic usage
4455

45-
```html
46-
<button @click="showModal = true">Show modal</button>
56+
1. Import and register the modal component.
57+
58+
```js
59+
import { VueFinalModal } from 'vue-final-modal/lib'
60+
61+
export default {
62+
components: {
63+
VueFinalModal
64+
}
65+
}
66+
```
67+
68+
2. Add the modal component to the template.
4769

70+
```html
4871
<vue-final-modal v-model="showModal">
49-
<button @click="showModal = false">close modal</button>
72+
Modal Content Here
5073
</vue-final-modal>
5174
```
5275

53-
```js
54-
import { VueFinalModal } from 'vue-final-modal'
76+
3. Create a button to toggle the modal.
5577

56-
export default {
57-
components: {
58-
VueFinalModal,
59-
},
60-
data: () => ({
61-
showModal: false
62-
})
78+
```html
79+
<button @click="showModal = true">Launch</button>
80+
```
81+
82+
4. All default props
83+
84+
```js
85+
const CLASS_TYPES = [String, Object, Array]
86+
87+
{
88+
value: { type: Boolean, default: false },
89+
ssr: { type: Boolean, default: true },
90+
classes: { type: CLASS_TYPES, default: '' },
91+
overlayClass: { type: CLASS_TYPES, default: '' },
92+
contentClass: { type: CLASS_TYPES, default: '' },
93+
lockScroll: { type: Boolean, default: true },
94+
hideOverlay: { type: Boolean, default: false },
95+
clickToClose: { type: Boolean, default: true },
96+
preventClick: { type: Boolean, default: false },
97+
attach: { type: null, default: false, validator: validateAttachTarget },
98+
transition: { type: String, default: 'vfm' },
99+
overlayTransition: { type: String, default: 'vfm' },
100+
zIndexBase: { type: [String, Number], default: 1000 },
101+
zIndex: { type: [Boolean, String, Number], default: false }
63102
}
64103
```
65104

105+
5. Events.
106+
107+
- @before-open: Before open
108+
- @opened: When opened
109+
- @before-close: Before close
110+
- @closed: After closed
111+
66112
## Roadmap
67113

68114
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).
69115

70-
These are the features that will be added in the comming weeks:
116+
like:
71117

72-
- draggable modal
73-
- resizable modal
74-
- dynamic emit modal component with vue directive like:
75-
- `this.$modal.show('hello-world')`
76-
- `this.$modal.hide('hello-world')`
77-
- support Vue 3.0
118+
- support Vue 3.0

‎docs/components/global/BaseButton.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@
66

77
<style lang="scss" scoped>
88
.base-button {
9-
@apply px-2 py-1 border rounded;
10-
&:focus {
11-
@apply outline-none;
12-
}
9+
@apply mb-2 px-2 py-1 border rounded;
1310
}
1411
</style>

‎docs/components/global/CodepenAttach.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<iframe
3+
height="400"
4+
style="width: 100%;"
5+
scrolling="no"
6+
title="Dettachable - Vue Final Modal"
7+
src="https://codepen.io/hunterliu1003/embed/xxVYoQZ?height=400&theme-id=dark&default-tab=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/xxVYoQZ"
15+
>Dettachable - 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>

‎docs/components/global/CodepenClickToClose.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<iframe
3+
height="300"
4+
style="width: 100%;"
5+
scrolling="no"
6+
title="Click to close - Vue Final Modal"
7+
src="https://codepen.io/hunterliu1003/embed/gOrvyqy?height=265&theme-id=dark&default-tab=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/gOrvyqy"
15+
>Click to close - 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>

‎docs/components/global/CodepenDefault.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<iframe
3+
height="300"
4+
style="width: 100%;"
5+
scrolling="no"
6+
title="Simple - Vue Final Modal"
7+
src="https://codepen.io/hunterliu1003/embed/qBZXKqN?height=265&theme-id=dark&default-tab=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/qBZXKqN"
15+
>Simple - 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 lang="scss" scoped>
31+
::v-deep .overlay {
32+
background-color: rgba(0, 0, 0, 0.5);
33+
}
34+
</style>

‎docs/components/global/CodepenEvents.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div>
3+
<vue-final-modal
4+
v-model="showModal"
5+
classes="flex justify-center items-center"
6+
content-class="max-h-1/2 p-4 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded overflow-auto"
7+
@before-open="beforeOpen"
8+
@opened="opened"
9+
@before-close="beforeClose"
10+
@closed="closed"
11+
>
12+
<span class="text-2xl mb-2">Events Example!</span>
13+
</vue-final-modal>
14+
<base-button @click="showModal = true">Events Example!</base-button>
15+
</div>
16+
</template>
17+
18+
<script>
19+
export default {
20+
data: () => ({
21+
showModal: false
22+
}),
23+
methods: {
24+
beforeOpen() {
25+
alert('beforeOpen')
26+
},
27+
opened() {
28+
alert('opened')
29+
},
30+
beforeClose() {
31+
alert('beforeClose')
32+
},
33+
closed() {
34+
alert('closed')
35+
}
36+
}
37+
}
38+
</script>

‎docs/components/global/CodepenHideOverlay.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<iframe
3+
height="300"
4+
style="width: 100%;"
5+
scrolling="no"
6+
title="Hide overlay - Vue Final Modal"
7+
src="https://codepen.io/hunterliu1003/embed/YzqxjPL?height=265&theme-id=dark&default-tab=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/YzqxjPL"
15+
>Hide overlay - 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+
hideOverlay: true
27+
})
28+
}
29+
</script>

‎docs/components/global/CodepenLockScroll.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<iframe
3+
height="300"
4+
style="width: 100%;"
5+
scrolling="no"
6+
title="Lock scroll: false - Vue Final Modal"
7+
src="https://codepen.io/hunterliu1003/embed/wvGqXXQ?height=265&theme-id=dark&default-tab=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/wvGqXXQ"
15+
>Lock scroll: false - 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>

‎docs/components/global/CodepenPreventClick.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="400"
4+
style="width: 100%;"
5+
scrolling="no"
6+
title="Prevent Click - Vue Final Modal"
7+
src="https://codepen.io/hunterliu1003/embed/RwaQmoz?height=400&theme-id=dark&default-tab=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/RwaQmoz">RwaQmoz</a> by Hunter
15+
(<a href="https://codepen.io/hunterliu1003">@hunterliu1003</a>) on
16+
<a href="https://codepen.io">CodePen</a>.
17+
</iframe>
18+
</template>

‎docs/components/global/CodepenScrollable.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<iframe
3+
height="400"
4+
style="width: 100%;"
5+
scrolling="no"
6+
title="Scrollable - Vue Final Modal"
7+
src="https://codepen.io/hunterliu1003/embed/MWyQdzG?height=265&theme-id=dark&default-tab=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/MWyQdzG"
15+
>Scrollable - 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>

0 commit comments

Comments
 (0)