Skip to content

Commit 48dedfd

Browse files
hunterliu1003hunterliu1003
committed
Merge branch 'feature/dynamic-modal' into feature/next-dynamic-modal
1 parent 0d6c282 commit 48dedfd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+2854
-644
lines changed

‎dist/VueFinalModal.esm.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/VueFinalModal.esm.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/VueFinalModal.umd.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/VueFinalModal.umd.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/components/global/ShowCode.vue

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
<template>
22
<details>
3-
<summary class="outline-none">Show code</summary>
3+
<summary class="outline-none underline">{{ text }}</summary>
44
<slot />
55
</details>
66
</template>
7+
8+
<script>
9+
export default {
10+
props: {
11+
text: {
12+
type: String,
13+
default: 'Show code'
14+
}
15+
}
16+
}
17+
</script>

‎docs/content/en/api.md

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
---
2+
title: API Reference
3+
description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
4+
category: API
5+
position: 7
6+
---
7+
## Usage
8+
9+
<alert>`$vfm` is an object containing VueFinalModal's data/methods.</alert>
10+
11+
### **Options API**
12+
13+
Just use `this.$vfm`.
14+
15+
### **Composition API** <badge>Vue 3 only</badge>
16+
17+
```js
18+
import { inject } from 'vue'
19+
20+
export default {
21+
setup() {
22+
const $vfm = inject('$vfm')
23+
}
24+
}
25+
```
26+
## API
27+
28+
### `show(name, params)`
29+
30+
- Type: `Function`
31+
- Arguments:
32+
- name: `String` - Name of the modal
33+
- params: `?: object` - Any data that you want to pass into the modal, checkout the guide [params](/guide/params).
34+
35+
<show-code text="Example">
36+
37+
<v-api-show class="py-4"></v-api-show>
38+
39+
```js
40+
this.$vfm.show('example', { userName: 'vue-final-modal' })
41+
```
42+
43+
```html[Modal.vue]
44+
<template>
45+
<vue-final-modal v-model="show" name="example">
46+
<template v-slot:title>$vfm.show</template>
47+
<template v-slot="{ params }">
48+
Hi {{ params.userName }}
49+
</template>
50+
</vue-final-modal>
51+
</template>
52+
<script>
53+
export default {
54+
data: () => ({
55+
show: false
56+
})
57+
}
58+
</script>
59+
```
60+
61+
<alert>`v-model` is necessary when you open a modal with `$vfm.show(name)` API.</alert>
62+
63+
</show-code>
64+
65+
### `hide([names])`
66+
67+
- Type: `Function`
68+
- Arguments:
69+
- names: `String` - The names to hide
70+
71+
<show-code text="Example">
72+
73+
```html
74+
<template>
75+
<vue-final-modal v-model="show" name="example">Vue Final Modal is awesome</vue-final-modal>
76+
<vue-final-modal v-model="show2" name="example2">Vue Final Modal is awesome 2</vue-final-modal>
77+
</template>
78+
79+
<script>
80+
export default {
81+
data: () => ({
82+
show: true,
83+
show2: true
84+
}),
85+
mounted() {
86+
this.$vfm.hide('example', 'example2')
87+
}
88+
}
89+
</script>
90+
```
91+
92+
</show-code>
93+
94+
### `hideAll()`
95+
96+
hide all modals.
97+
98+
### `toggle(name, show, params)`
99+
100+
- Type: `Function`
101+
- Arguments:
102+
- name: [`String` | `Array`] - The names of the modal
103+
- show: `?: Boolean` - Show modal or not
104+
- params: `?: object` - Any data that you want to pass into the modal, checkout the guide [params](/guide/params).
105+
106+
toggle modals by name.
107+
108+
### `get([names])`
109+
110+
- Type: `Function`
111+
- Arguments:
112+
- names: `String` - Get the names of the modal instances
113+
- Return:
114+
- `Array`: returns the modal instances
115+
116+
### `openedModals`
117+
118+
- Return:
119+
120+
- `Array`: returns the opened modal instances.
121+
122+
- Examples:
123+
124+
1. `$vfm.openedModals[0]`: get the first opened modal instance.
125+
2. `$vfm.openedModals.length`: get how many modals was opened.
126+
127+
### `modals`
128+
129+
- Return:
130+
- `Array`: returns all modal instances.

‎docs/content/en/dynamic-modal.md

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: Dynamic Modal
2+
title: Dynamic modal
33
description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
4-
position: 1
5-
category: Getting Start
4+
category: API
5+
position: 8
66
version: 2
77
badge: v2.0.0+
88
features:
@@ -23,43 +23,42 @@ This feature let you create modal dynamically.
2323

2424
## Add `ModalsContainer`
2525

26-
All dynamic modals will be displayed in ModalsContainer. You can get all dynamic modal instances by [$vfm.dynamicModals](#vfmdynamicmodals).
26+
All dynamic modals will be displayed in `ModalsContainer`. You can get all dynamic modal instances by [$vfm.dynamicModals](#dynamicmodals).
2727

2828
```html[App.vue]
29-
<template>
30-
<div>
31-
...
32-
<modals-container></modals-container>
33-
</div>
34-
</template>
29+
<div>
30+
...
31+
<modals-container></modals-container>
32+
</div>
3533
```
3634

3735
## API
3836

39-
### `$vfm.show(dynamicModalOptions, params)`
37+
### `show(dynamicModalOptions, params)`
4038

4139
To show dynamic modal you can use the API `$vfm.show` function.
4240

4341
- Type: `Function`,
4442
- Arguments:
4543
- dynamicModalOptions: `Object`
46-
- params: same as [API $vfm.show](/#vfmshowname-params)
44+
- params: same as [API $vfm.show](/api#showname-params)
4745

4846
```ts
4947
type dynamicModalOptions = {
50-
component?: string | Component | AsyncComponent, // modal component
48+
component?: string | Component | AsyncComponent // modal component
5149
bind?: { [key: string]: any}, // bind props and attrs to modal
52-
on?: { [key: string]: Function | Function[] }, // register events to modal
50+
on?: { [key: string]: Function | Function[] } // register events to modal
5351
slots?: {
5452
[key: string]: { // slot name
5553
component: string | Component | AsyncComponent // slot component
56-
bind: { [key: string]: any } // bind props and attrs to slot component
54+
bind?: { [key: string]: any } // bind props and attrs to slot component
55+
on?: { [key: string]: Function | Function[] } // register events to slot component
5756
}
5857
}
5958
}
6059
```
6160
62-
### `$vfm.dynamicModals`
61+
### `dynamicModals`
6362
6463
- Return:
6564
- `Array`: returns dynamic modal instances.
@@ -202,16 +201,16 @@ export default {
202201
close()
203202
},
204203
// event by vue-final-modal
205-
clickOutside() {
204+
'click-outside'() {
206205
console.log('@click-outside')
207206
},
208-
beforeOpen() {
207+
'before-open'() {
209208
console.log('@before-open')
210209
},
211210
opened() {
212211
console.log('@opened')
213212
},
214-
beforeClose() {
213+
'before-close'() {
215214
console.log('@before-close')
216215
},
217216
closed() {
@@ -246,7 +245,7 @@ export default {
246245

247246
<alert>VModal is an HOC of vue-final-modal.</alert>
248247

249-
[Source code](/examples/recommended-use#vmodalvue)
248+
[Source code](/examples/recommend)
250249

251250
#### VTitle.vue
252251

‎docs/content/en/examples.md renamed to ‎docs/content/en/examples/manual.md

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,37 @@
11
---
2-
title: Step by step
2+
title: Manual usage
33
description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
4-
position: 2
54
category: Examples
5+
position: 9
66
---
77

8-
## Basic
8+
## Basic usage
9+
10+
### **Set `v-model` to `true` on click**
11+
12+
```html
13+
<vue-final-modal v-model="showModal">
14+
Modal Content Here
15+
</vue-final-modal>
16+
17+
<button @click="showModal = true">Launch</button>
18+
```
19+
20+
### **Open modal with [API](/api)**
21+
22+
<alert>`v-model` is necessary when you open a modal with `$vfm.show(name)` API.</alert>
23+
24+
```html
25+
<vue-final-modal v-model="showModal" name="example">
26+
Modal Content Here
27+
</vue-final-modal>
28+
```
29+
30+
```js
31+
this.$vfm.show('example')
32+
```
33+
34+
## Example
935

1036
<alert>
1137

@@ -15,7 +41,7 @@ Try to toggle checkbox below, then click `Open Modal` button.
1541

1642
<basic-options></basic-options>
1743

18-
## Examples
44+
## Step by step
1945

2046
<alert>
2147

‎docs/content/en/examples/recommended-use.md renamed to ‎docs/content/en/examples/recommend.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
---
2-
title: Recommended use
2+
title: Recommended usage
33
description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
4-
position: 3
54
category: Examples
6-
version: 0.17
5+
position: 11
76
---
87

98
## Write a `HOC`

0 commit comments

Comments
 (0)