Merge pull request #118 from vue-final/feat/createVfm

feat: allow importing the component directly

Author: hunterliu1003

dist/VueFinalModal.esm.js

@@ -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 v-slot: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.esm.js.map

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <v-modal v-model="show" @confirm="show = false" @cancel="show = false" focus-trap>
+    <custom-modal v-model="show" @confirm="show = false" @cancel="show = false" focus-trap>
       <template v-slot: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>

dist/VueFinalModal.umd.js

@@ -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 v-slot="{ params }">Hi {{ params.userName }} </template>
       <template v-slot: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>

dist/VueFinalModal.umd.js.map

@@ -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/BasicOptions.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 v-slot:title>Events Example!</template>
-    </v-modal>
+    </custom-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>

docs/components/examples/basic/VAccessibility.vue

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