Skip to content

Commit 85f742f

Browse files
committed
docs: refined options docs
1 parent d0f2047 commit 85f742f

File tree

3 files changed

+18
-19
lines changed

3 files changed

+18
-19
lines changed

docs/.vuepress/styles/styles.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,3 +181,7 @@ code {
181181
margin-bottom: 1.3rem;
182182
padding-bottom: 1.3rem;
183183
}
184+
185+
.theme-container .theme-default-content:not(.custom) h3 {
186+
margin-bottom: 1.3rem;
187+
}

docs/options/index.md

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,19 @@ Pass a `Boolean` value to the `v-model` directive to show and hide the modal win
44

55
## Plugin API
66

7-
The Plugin API can be called within any component through:
7+
In order to use the Plugin API you need to import and register the `modalPlugin`.
8+
The Plugin API exposes `show`/`hide` functions that can be called within any component to show and hide the modal window with the given name.
9+
10+
The functions are available through:
811

912
- `useModal` in Composition API
1013
- `this.$modal` in Options API
1114

12-
and exposes 3 functions:
15+
### Functions
1316

14-
- **`show(name)`** - Shows the modal with the given name
15-
- **`hide(name)`** - Hides the modal with the given name
16-
- **`hideAll()`** - Hides all modals
17+
**`show(name)`** - Shows the modal with the given name
18+
**`hide(name)`** - Hides the modal with the given name
19+
**`hideAll()`** - Hides all modals
1720

1821
## Props
1922

docs/usage/index.md

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,32 +11,24 @@ To control the visibility of the modal with `v-model`, you need to pass a `Boole
1111

1212
```vue
1313
<template>
14-
<!-- Setting `showModal` to true, displays the modal -->
14+
<!-- Set the `showModal` to true to display the modal -->
1515
<button type="button" @click="showModal = true">Open a modal</button>
1616
1717
<Modal v-model="showModal" title="My first modal">
1818
<p>Modal content goes here...</p>
1919
</Modal>
2020
</template>
2121
22-
<script>
22+
<script setup>
23+
import { ref } from 'vue'
2324
// You can skip the import if you've registered the component globally
2425
import { Modal } from '@kouts/vue-modal'
2526
26-
export default {
27-
components: {
28-
Modal
29-
},
30-
data() {
31-
return {
32-
showModal: false
33-
}
34-
}
35-
}
27+
const showModal = ref(false)
3628
</script>
3729
```
3830

39-
**Example:**
31+
**Result:**
4032

4133
<Example1 />
4234

@@ -54,7 +46,7 @@ const app = Vue.createApp({...})
5446
app.use(modalPlugin)
5547
```
5648

57-
To control the visibility of the modal with the mane `prop` you use the and `show`/`hide` functions.
49+
To control the visibility of the modal with the name `prop` you use the and `show`/`hide` functions.
5850

5951
**Composition API**
6052

0 commit comments

Comments
 (0)