docs: refined options docs

Author: kouts

docs/.vuepress/styles/styles.scss

@@ -181,3 +181,7 @@ code {
   margin-bottom: 1.3rem;
   padding-bottom: 1.3rem;
 }
+
+.theme-container .theme-default-content:not(.custom) h3 {
+  margin-bottom: 1.3rem;
+}

docs/options/index.md

@@ -4,16 +4,19 @@ Pass a `Boolean` value to the `v-model` directive to show and hide the modal win
 
 ## Plugin API
 
-The Plugin API can be called within any component through:
+In order to use the Plugin API you need to import and register the `modalPlugin`.  
+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.
+
+The functions are available through:
 
 - `useModal` in Composition API
 - `this.$modal` in Options API
 
-and exposes 3 functions:
+### Functions
 
-- **`show(name)`** - Shows the modal with the given name
-- **`hide(name)`** - Hides the modal with the given name
-- **`hideAll()`** - Hides all modals
+**`show(name)`** - Shows the modal with the given name  
+**`hide(name)`** - Hides the modal with the given name  
+**`hideAll()`** - Hides all modals
 
 ## Props
 

docs/usage/index.md

@@ -11,32 +11,24 @@ To control the visibility of the modal with `v-model`, you need to pass a `Boole
 
 ```vue
 <template>
-  <!-- Setting `showModal` to true, displays the modal -->
+  <!-- Set the `showModal` to true to display the modal -->
   <button type="button" @click="showModal = true">Open a modal</button>
 
   <Modal v-model="showModal" title="My first modal">
     <p>Modal content goes here...</p>
   </Modal>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 // You can skip the import if you've registered the component globally
 import { Modal } from '@kouts/vue-modal'
 
-export default {
-  components: {
-    Modal
-  },
-  data() {
-    return {
-      showModal: false
-    }
-  }
-}
+const showModal = ref(false)
 </script>
 ```
 
-**Example:**
+**Result:**
 
 <Example1 />
 
@@ -54,7 +46,7 @@ const app = Vue.createApp({...})
 app.use(modalPlugin)
 ```
 
-To control the visibility of the modal with the mane `prop` you use the and `show`/`hide` functions.
+To control the visibility of the modal with the name `prop` you use the and `show`/`hide` functions.
 
 **Composition API**