Skip to content

Commit 8321574

Browse files
hunterliu1003hunterliu1003
committed
update docs
1 parent ac0f182 commit 8321574

File tree

12 files changed

+285
-111
lines changed

12 files changed

+285
-111
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222

2323
## Introduction
2424

25-
If you need a highly customizable modal component for Vue.js, `Vue Final Modal` would be a nice choice.
25+
`Vue Final Modal` is a renderless component<br />
26+
You can create a wrapper component easily and can customize `template`, `script` and `style` based on your needs.
2627

2728
features:
2829

‎docs/components/global/ShowCode.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<details class="pt-4">
2+
<details>
33
<summary class="outline-none">Show code</summary>
44
<slot />
55
</details>

‎docs/content/en/events.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ Emits right before modal is destroyed.
2727

2828
<tailwind-events></tailwind-events>
2929

30-
<show-code open>
30+
<show-code open class="pt-4">
3131

3232
```html
3333
<template>

‎docs/content/en/examples.md‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
---
2-
title: Basic usage
2+
title: Basic example
3+
menuTitle: Basic
34
description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
4-
position: 2
5+
position: 1
56
category: Examples
67
fullscreen: true
78
---
89

9-
## Basic example
10+
<alert>
1011

11-
<basic-options></basic-options>
12+
Try to toggle checkbox below, then click `Open Modal` button.
1213

13-
## Plain style example
14+
</alert>
1415

15-
<client-only>
16-
<basic-plain-style-codepen></basic-plain-style-codepen>
17-
</client-only>
16+
<basic-options></basic-options>

‎docs/content/en/examples/recommended-use.md‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
title: Recommended use
3+
description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
4+
position: 3
5+
category: Examples
6+
---
7+
8+
<alert>
9+
10+
`VModal` is a wrapper component using `vue-final-modal`.
11+
You can copy and paste the example and adjust the `template`, `script`, `style` based on your needs.
12+
13+
</alert>
14+
15+
## Write a wrapper component
16+
17+
### VModal.vue
18+
19+
<show-code open>
20+
21+
```vue
22+
<template>
23+
<vue-final-modal
24+
:value="value"
25+
v-bind="$attrs"
26+
classes="modal-container"
27+
content-class="modal-content"
28+
v-on="$listeners"
29+
>
30+
<button class="modal__close" @click="$emit('input', false)">
31+
<mdi-close></mdi-close>
32+
</button>
33+
<span class="modal__title">
34+
<slot name="title"></slot>
35+
</span>
36+
<div class="modal__content">
37+
<slot></slot>
38+
</div>
39+
<div class="modal__action">
40+
<button class="vfm-btn" @click="$emit('confirm')">confirm</button>
41+
<button class="vfm-btn" @click="$emit('cancel')">cancel</button>
42+
</div>
43+
</vue-final-modal>
44+
</template>
45+
46+
<script>
47+
export default {
48+
name: 'VModal',
49+
props: {
50+
value: { type: Boolean, default: false }
51+
}
52+
}
53+
</script>
54+
55+
<style scoped>
56+
::v-deep .modal-container {
57+
display: flex;
58+
justify-content: center;
59+
align-items: center;
60+
}
61+
::v-deep .modal-content {
62+
position: relative;
63+
display: flex;
64+
flex-direction: column;
65+
max-height: 90%;
66+
margin: 0 1rem;
67+
padding: 1rem;
68+
border: 1px solid #e2e8f0;
69+
border-radius: 0.25rem;
70+
background: #fff;
71+
}
72+
.modal__title {
73+
margin: 0 2rem 0 0;
74+
font-size: 1.5rem;
75+
font-weight: 700;
76+
}
77+
.modal__content {
78+
flex-grow: 1;
79+
overflow-y: auto;
80+
}
81+
.modal__action {
82+
display: flex;
83+
justify-content: center;
84+
align-items: center;
85+
flex-shrink: 0;
86+
padding: 1rem 0 0;
87+
}
88+
.modal__close {
89+
position: absolute;
90+
top: 0.5rem;
91+
right: 0.5rem;
92+
}
93+
</style>
94+
95+
<style scoped>
96+
.dark-mode div::v-deep .modal-content {
97+
border-color: #2d3748;
98+
background-color: #1a202c;
99+
}
100+
</style>
101+
```
102+
103+
</show-code>
104+
105+
## How to use wrapper component
106+
107+
### Live example
108+
109+
<wrapper-example></wrapper-example>
110+
111+
<show-code open class="pt-4">
112+
113+
```vue
114+
<template>
115+
<div>
116+
<v-modal v-model="show" @confirm="confirm" @cancel="cancel">
117+
<template v-slot:title>Hello, vue-final-modal</template>
118+
<p>
119+
Vue Final Modal is a renderless, stackable, detachable and lightweight
120+
modal component.
121+
</p>
122+
</v-modal>
123+
124+
<button class="vfm-btn" @click="show = true">Open modal</button>
125+
</div>
126+
</template>
127+
128+
<script>
129+
export default {
130+
data: () => ({
131+
show: false
132+
}),
133+
methods: {
134+
confirm() {
135+
// some code...
136+
this.show = false
137+
},
138+
cancel() {
139+
// some code...
140+
this.show = false
141+
}
142+
}
143+
}
144+
</script>
145+
```
146+
147+
</show-code>

‎docs/content/en/examples/stepByStep.md‎ renamed to ‎docs/content/en/examples/step-by-step.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ fullscreen: true
2020

2121
<v-basic></v-basic>
2222

23-
<show-code>
23+
<show-code class="pt-4">
2424

2525
```vue
2626
<template>
@@ -54,7 +54,7 @@ export default {
5454

5555
<v-background></v-background>
5656

57-
<show-code>
57+
<show-code class="pt-4">
5858

5959
```vue
6060
<template>
@@ -102,7 +102,7 @@ export default {
102102

103103
<v-centered></v-centered>
104104

105-
<show-code>
105+
<show-code class="pt-4">
106106

107107
```vue
108108
<template>
@@ -161,7 +161,7 @@ export default {
161161

162162
<v-content></v-content>
163163

164-
<show-code>
164+
<show-code class="pt-4">
165165

166166
```vue
167167
<template>
@@ -226,7 +226,7 @@ export default {
226226

227227
<v-close-button></v-close-button>
228228

229-
<show-code>
229+
<show-code class="pt-4">
230230

231231
```vue
232232
<template>
@@ -301,7 +301,7 @@ export default {
301301

302302
<v-scrollable></v-scrollable>
303303

304-
<show-code>
304+
<show-code class="pt-4">
305305

306306
```vue
307307
<template>
@@ -381,7 +381,7 @@ export default {
381381

382382
<v-action-buttons></v-action-buttons>
383383

384-
<show-code>
384+
<show-code class="pt-4">
385385

386386
```vue
387387
<template>
@@ -472,7 +472,7 @@ export default {
472472

473473
<v-stackable></v-stackable>
474474

475-
<show-code>
475+
<show-code class="pt-4">
476476

477477
```vue
478478
<template>

‎docs/content/en/examples/tailwind.md‎

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

‎docs/content/en/index.md‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,8 @@ features:
3434
</a>
3535
</p>
3636

37-
If you need a highly customizable modal component for Vue.js, `Vue Final Modal` would be a nice choice.
38-
39-
[Vue Final Modal](https://github.com/hunterliu1003/vue-final-modal) is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
37+
[Vue Final Modal](https://github.com/hunterliu1003/vue-final-modal) is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.<br />
38+
You can create a [wrapper component](/examples/recommended-use) easily and can customize `template`, `script` and `style` based on your needs.
4039

4140
## Features
4241

@@ -146,7 +145,7 @@ const CLASS_TYPES = [String, Object, Array]
146145

147146
<basic-options></basic-options>
148147

149-
<alert>[Checkout the live examples](/examples)</alert>
148+
<alert>[Checkout recommended use](/examples/recommended-use)</alert>
150149

151150
## Contribution
152151

‎docs/content/en/properties.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,8 @@ Clicking outside of modal content element will close the modal.
7474
- Type: `Boolean`
7575
- Default: `false`
7676

77-
The click event will not be blocked by overlay.
77+
The click event will not be blocked by overlay.<br />
78+
Set the root element of `vue-final-modal` style to `pointer-events: none;`.
7879

7980
## `attach`
8081

@@ -83,10 +84,9 @@ The click event will not be blocked by overlay.
8384

8485
Specifies which DOM element that this component should detach to.
8586

86-
1. By default, the modal will be attached to the `<body>` element.
87-
2. Set `false` will disabled this feature.
88-
3. String can be any valid `querySelector`
89-
4. Object can be any valid `Node`.
87+
1. Set `false` will disabled this feature.
88+
2. String can be any valid `querySelector`, e.g. `'body'`, `'#app'`.
89+
3. Object can be any valid `Node`, e.g. `this.$refs.container`.
9090

9191
## `zIndexBase`
9292

0 commit comments

Comments
 (0)