Skip to content

Commit bb8764d

Browse files
hunterliu1003hunterliu1003
committed
update docs, and add examples
1 parent 256aaf8 commit bb8764d

File tree

13 files changed

+439
-115
lines changed

13 files changed

+439
-115
lines changed

‎docs/components/global/BaseExample.vue

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,20 @@
33
<vue-final-modal
44
v-model="showModal"
55
classes="flex justify-center items-center"
6-
content-class="w-2/3 max-h-1/2 p-4 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded overflow-auto"
6+
content-class="max-h-1/2 p-4 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded overflow-auto"
7+
overlay-class="overlay"
8+
transition="vfm"
9+
overlay-transition="vfm"
10+
:lock-scroll="true"
11+
:hide-overlay="false"
12+
:click-to-close="true"
13+
:prevent-click="false"
14+
attach="body"
15+
:z-index="1000"
716
>
8-
<h2 class="text-2xl mb-2"># Simple Modal</h2>
9-
<base-lorem />
17+
<span class="text-2xl mb-2">Hello, world!</span>
1018
</vue-final-modal>
11-
<base-button @click="showModal = true">Simple</base-button>
19+
<base-button @click="showModal = true">Hello, world!</base-button>
1220
</div>
1321
</template>
1422

@@ -19,3 +27,9 @@ export default {
1927
})
2028
}
2129
</script>
30+
31+
<style lang="scss" scoped>
32+
::v-deep .overlay {
33+
opacity: 0.5;
34+
}
35+
</style>

‎docs/components/global/BaseExampleAttach.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<template>
22
<div>
3+
<base-button @click="showModal = true" class="mb-4">Attach</base-button>
34
<vue-final-modal
45
v-model="showModal"
56
classes="flex justify-center items-center"
6-
content-class="w-2/3 max-h-1/2 p-4 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded overflow-auto"
7+
content-class="w-2/3 max-h-1/2 p-2 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded overflow-auto"
78
attach="#attach"
89
:lock-scroll="false"
910
>
11+
<span class="text-2xl"># Attach modal</span>
1012
<base-lorem />
1113
</vue-final-modal>
12-
<base-button @click="showModal = true">Attach</base-button>
14+
<div id="attach" class="relative flex justify-center items-center w-full h-64 bg-gray-700"></div>
1315
</div>
1416
</template>
1517

‎docs/components/global/BaseExampleAttachFalse.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<div>
3+
<div class="relative flex justify-center items-center w-full h-64 bg-gray-700">
4+
<base-button @click="showModal = true">Attach: false</base-button>
5+
<vue-final-modal
6+
v-model="showModal"
7+
classes="flex justify-center items-center"
8+
content-class="w-2/3 max-h-1/2 p-2 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded overflow-auto"
9+
:attach="false"
10+
:lock-scroll="false"
11+
>
12+
<span class="text-2xl"># Attach modal</span>
13+
<base-lorem />
14+
</vue-final-modal>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
data: () => ({
22+
showModal: false
23+
})
24+
}
25+
</script>

‎docs/components/global/BaseExampleEvents.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/content/en/advanced.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Advanced
3+
description: 'Vue Final Modal is a customizable, stackable, attachable and lightweight modal component.'
4+
position: 6
5+
category: Getting Start
6+
---
7+
8+
## Custom vue-final-modal component
9+
10+
TBD
11+
12+
## Override style
13+
14+
TBD

‎docs/content/en/events.md

Lines changed: 59 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,67 @@
11
---
22
title: Events
3-
description: ''
3+
description: 'Vue Final Modal is a customizable, stackable, attachable and lightweight modal component.'
44
position: 3
55
category: Getting Start
66
---
77

8-
## Events
8+
## `@before-open`
99

10-
| Name | Description |
11-
| --- | --- |
12-
| @before-open | Emits while modal is still invisible, but before transition starting. |
13-
| @opened | Emits after modal became visible and transition ended. |
14-
| @before-close | Emits before modal is going to be closed. |
15-
| @closed | Emits right before modal is destroyed |
10+
Emits while modal is still invisible, but before transition starting.
1611

12+
## `@opened`
13+
14+
Emits after modal became visible and transition ended.
15+
16+
## `@before-close`
17+
18+
Emits before modal is going to be closed.
19+
20+
## `@closed`
21+
22+
Emits right before modal is destroyed.
23+
24+
## Examples
25+
26+
<base-example-events></base-example-events>
27+
28+
```html[SFC]
29+
<template>
30+
<div>
31+
<vue-final-modal
32+
v-model="showModal"
33+
classes="flex justify-center items-center"
34+
content-class="max-h-1/2 p-4 bg-white dark:bg-gray-900 border dark:border-gray-800 rounded overflow-auto"
35+
@before-open="beforeOpen"
36+
@opened="opened"
37+
@before-close="beforeClose"
38+
@closed="closed"
39+
>
40+
<span class="text-2xl mb-2">Events Example!</span>
41+
</vue-final-modal>
42+
<base-button @click="showModal = true">Events Example!</base-button>
43+
</div>
44+
</template>
45+
46+
<script>
47+
export default {
48+
data: () => ({
49+
showModal: false
50+
}),
51+
methods: {
52+
beforeOpen() {
53+
alert('beforeOpen')
54+
},
55+
opened() {
56+
alert('opened')
57+
},
58+
beforeClose() {
59+
alert('beforeClose')
60+
},
61+
closed() {
62+
alert('closed')
63+
}
64+
}
65+
}
66+
</script>
67+
```

‎docs/content/en/examples.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Examples
3-
description: ''
3+
description: 'Vue Final Modal is a customizable, stackable, attachable and lightweight modal component.'
44
position: 5
55
category: Getting Start
66
---
@@ -13,4 +13,6 @@ category: Getting Start
1313
<base-example-prevent-click></base-example-prevent-click>
1414
<base-example-stackable></base-example-stackable>
1515
<base-example-scroll></base-example-scroll>
16+
<base-example-attach-false></base-example-attach-false>
17+
<base-example-attach></base-example-attach>
1618
</div>

‎docs/content/en/index.md

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,32 @@
11
---
22
title: Introduction
3-
description: ''
4-
position: 1
3+
description: 'Vue Final Modal is a customizable, stackable, attachable and lightweight modal component.'
4+
position: 0
55
category: Getting Start
6+
features:
7+
- TailwindCSS friendly
8+
- Renderless component
9+
- SSR support
10+
- Stackable
11+
- Attachable
12+
- Scrollable
13+
- Transition support
14+
- Mobile friendly
15+
- 11kb gzipped
616
---
717

8-
## Installation
18+
<img src="/vue-final-modal/preview.png" class="light-img" />
19+
<img src="/vue-final-modal/preview-dark.png" class="dark-img" />
920

10-
Simple to use, stackable, attachable, highly customizable, mobile-friendly Vue.js 2.0+ modal with SSR support.
21+
[Vue Final Modal](https://github.com/hunterliu1003/vue-final-modal) is a customizable, stackable, attachable and lightweight modal component.
1122

12-
`vue-final-modal` has no predefined styles.
13-
There are only three classes inside `vue-final-modal`, including `.vfm__containter`, `.vfm__content`, `.vfm__overlay`. These classes have only the necessary styles and you can still easily override these styles through these props: `classes`, `content-class`, `overlay-class`
23+
## Features
1424

15-
Here is the simplified template of entire vue-final-modal
25+
<list :items="features"></list>
26+
27+
<p class="flex items-center">Enjoy light and dark mode:&nbsp;<app-color-switcher class="p-2"></app-color-switcher></p>
28+
29+
## HTML structure
1630

1731
```html[HTML]
1832
<div class="vfm">
@@ -24,3 +38,17 @@ Here is the simplified template of entire vue-final-modal
2438
</div>
2539
</div>
2640
```
41+
42+
43+
## Styles
44+
45+
`vue-final-modal` has no predefined style.
46+
There are main classes:
47+
- `.vfm__overlay`: `rgba(0, 0, 0, 0.5)` black background
48+
- `.vfm__containter`
49+
- `.vfm__content`
50+
51+
The above classes only have the necessary style and you can easily override through these [properties](/properties):
52+
- `classes`
53+
- `content-class`
54+
- `overlay-class`

‎docs/content/en/installation.md

Lines changed: 0 additions & 62 deletions
This file was deleted.

0 commit comments

Comments
 (0)