docs: sync with v2

Author: hunterliu1003

dist/VueFinalModal.esm.js.map

@@ -1,6 +1,6 @@
 <template>
   <div class="pb-8">
-    <v-modal
+    <custom-modal
       v-model="showModal"
       :ssr="ssr"
       :lock-scroll="lockScroll"
@@ -31,7 +31,7 @@
     >
       <template #title># Hello, world!</template>
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
-    </v-modal>
+    </custom-modal>
 
     <div class="flex space-x-2">
       <v-button highlight @click="showModal = true">Open Modal</v-button>

dist/VueFinalModal.umd.js.map

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <v-modal v-model="show" focus-trap @confirm="show = false" @cancel="show = false">
+    <custom-modal v-model="show" focus-trap @confirm="show = false" @cancel="show = false">
       <template #title>Hello, vue-final-modal</template>
       <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
-    </v-modal>
+    </custom-modal>
 
     <v-button highlight @click="show = true">Open modal</v-button>
   </div>

docs/components/examples/basic/BasicOptions.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <v-modal v-model="showModal" name="VApiShow" @confirm="showModal = false" @cancel="showModal = false">
+    <custom-modal v-model="showModal" name="VApiShow" @confirm="showModal = false" @cancel="showModal = false">
       <template #default="{ params }">Hi {{ params.userName }}</template>
       <template #title>$vfm.show</template>
-    </v-modal>
+    </custom-modal>
     <v-button highlight @click="$vfm.show('VApiShow', { userName: 'vue-final-modal' })">Open modal</v-button>
   </div>
 </template>

docs/components/examples/basic/VAccessibility.vue

@@ -9,12 +9,12 @@ export default {
   methods: {
     dynamic() {
       this.$vfm.show({
-        component: 'VModal',
+        component: 'CustomModal',
         bind: {
           name: 'VDynamicAdvacedModal'
         },
         on: {
-          // event by v-modal
+          // event by custom-modal
           confirm(close) {
             console.log('confirm')
             close()

docs/components/examples/basic/VApiShow.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-modal
+    <custom-modal
       v-model="showModal"
       @click-outside="clickOutside"
       @before-open="beforeOpen"
@@ -10,7 +10,7 @@
       @cancel="showModal = false"
     >
       <template #title>Events Example!</template>
-    </v-modal>
+    </custom-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>

docs/components/examples/basic/VDynamicAdvanced.vue

@@ -24,7 +24,7 @@
 
 <script>
 export default {
-  name: 'VModal',
+  name: 'CustomModal',
   inheritAttrs: false
 }
 </script>

docs/components/examples/basic/VEvents.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <v-modal v-model="show" @confirm="confirm" @cancel="cancel">
+    <custom-modal v-model="show" @confirm="confirm" @cancel="cancel">
       <template #title>Hello, vue-final-modal</template>
       <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
-    </v-modal>
+    </custom-modal>
 
     <v-button highlight @click="show = true">Open modal</v-button>
   </div>

docs/components/examples/hoc/VModal.vue renamed to docs/components/examples/hoc/CustomModal.vue

@@ -9,11 +9,21 @@ version: 3
 
 <alert>`$vfm` is an object containing VueFinalModal's data/methods.</alert>
 
+### **Directly import**
+
+```js
+import { $vfm } from 'vue-final-modal'
+```
+
 ### **Options API**
 
+If you register plugin globally.
 Just use `this.$vfm`.
 
-### **Composition API** <badge>Vue 3 only</badge>
+### **Composition API**
+
+If you register plugin globally.
+You can use `inject('$vfm')` in `setup`.
 
 ```js
 import { inject } from 'vue'
@@ -26,7 +36,7 @@ export default {
 ```
 ## API
 
-### `show(name, params)`
+### `$vfm.show(name, params)`
 
 - Type: `Function`
 - Arguments:
@@ -68,7 +78,7 @@ export default {
 
   <alert>`v-model` is necessary when you open a modal with `$vfm.show(name)` API.</alert>
 
-### `hide([names])`
+### `$vfm.hide([names])`
 
 - Type: `Function`
 - Arguments:
@@ -103,7 +113,7 @@ export default {
 
   </sfc-view>
 
-### `hideAll()`
+### `$vfm.hideAll()`
 
 - Returns: `Promise<Object>` | `Promise<Array>`
 - Example:
@@ -122,7 +132,7 @@ this.$vfm.hideAll().then(() => {
 })
 ```
 
-### `toggle(name, show, params)`
+### `$vfm.toggle(name, show, params)`
 
 - Type: `Function`
 - Arguments:
@@ -140,7 +150,7 @@ this.$vfm.hideAll().then(() => {
 
 Toggle modals by name.
 
-### `get([names])`
+### `$vfm.get([names])`
 
 Get the modal instances by modal names.
 
@@ -154,7 +164,7 @@ Get the modal instances by modal names.
   const modals = this.$vfm.get('modalName1', 'modalName2', ...)
   ```
 
-### `openedModals`
+### `$vfm.openedModals`
 
 - Return:
   - `Array`: returns the opened modal instances.
@@ -169,7 +179,7 @@ Get the modal instances by modal names.
     ```
 
 
-### `modals`
+### `$vfm.modals`
 
 - Return:
   - `Array`: returns all modal instances.