Merge 2aa5e6f into 65edad5

vue-final · Jun 13, 2021 · f81243e · f81243e
2 parents 65edad5 + 2aa5e6f
commit f81243e
Show file tree

Hide file tree

Showing 85 changed files with 711 additions and 773 deletions.
diff --git a/dist/VueFinalModal.esm.js b/dist/VueFinalModal.esm.js
diff --git a/dist/VueFinalModal.esm.js.map b/dist/VueFinalModal.esm.js.map
diff --git a/dist/VueFinalModal.umd.js b/dist/VueFinalModal.umd.js
diff --git a/dist/VueFinalModal.umd.js.map b/dist/VueFinalModal.umd.js.map
diff --git a/docs/components/examples/basic/BasicOptions.vue b/docs/components/examples/basic/BasicOptions.vue
@@ -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>

diff --git a/docs/components/examples/basic/VAccessibility.vue b/docs/components/examples/basic/VAccessibility.vue
@@ -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>

diff --git a/docs/components/examples/basic/VActionButtons.vue b/docs/components/examples/basic/VActionButtons.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -14,7 +14,7 @@
         <v-button @click="showModal = false">confirm</v-button>
         <v-button @click="showModal = false">cancel</v-button>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>

diff --git a/docs/components/examples/basic/VApiShow.vue b/docs/components/examples/basic/VApiShow.vue
@@ -1,10 +1,10 @@
 <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>
-    <v-button highlight @click="$vfm.show('VApiShow', { userName: 'vue-final-modal' })">Open modal</v-button>
+      <template v-slot:title>$modal.show</template>
+    </custom-modal>
+    <v-button highlight @click="$modal.show('VApiShow', { userName: 'vue-final-modal' })">Open modal</v-button>
   </div>
 </template>
 

diff --git a/docs/components/examples/basic/VBackground.vue b/docs/components/examples/basic/VBackground.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" content-class="modal-content">
+    <v-modal v-model="showModal" content-class="modal-content">
       <span class="modal__title">Hello, vue-final-modal</span>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>

diff --git a/docs/components/examples/basic/VBasic.vue b/docs/components/examples/basic/VBasic.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal">
+    <v-modal v-model="showModal">
       <span class="modal__title">Hello, vue-final-modal</span>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>

diff --git a/docs/components/examples/basic/VCentered.vue b/docs/components/examples/basic/VCentered.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <span class="modal__title">Hello, vue-final-modal</span>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>

diff --git a/docs/components/examples/basic/VCloseButton.vue b/docs/components/examples/basic/VCloseButton.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
       <span class="modal__title">Hello, vue-final-modal</span>
       <div class="modal__content">
         <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>

diff --git a/docs/components/examples/basic/VContent.vue b/docs/components/examples/basic/VContent.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <span class="modal__title">Hello, vue-final-modal</span>
       <div class="modal__content">
         <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>

diff --git a/docs/components/examples/basic/VDynamic.vue b/docs/components/examples/basic/VDynamic.vue
@@ -6,7 +6,7 @@
 export default {
   methods: {
     dynamic() {
-      this.$vfm.show({
+      this.$modal.show({
         component: 'VDynamicModal'
       })
     }

diff --git a/docs/components/examples/basic/VDynamicAdvanced.vue b/docs/components/examples/basic/VDynamicAdvanced.vue
@@ -8,13 +8,13 @@ import VDescription from '../VDescription.vue'
 export default {
   methods: {
     dynamic() {
-      this.$vfm.show({
-        component: 'VModal',
+      this.$modal.show({
+        component: 'CustomModal',
         bind: {
           name: 'VDynamicAdvacedModal'
         },
         on: {
-          // event by v-modal
+          // event by custom-modal
           confirm(close) {
             console.log('confirm')
             close()

diff --git a/docs/components/examples/basic/VDynamicModal.vue b/docs/components/examples/basic/VDynamicModal.vue
@@ -1,19 +1,13 @@
 <template>
-  <vue-final-modal
-    v-slot="{ close }"
-    v-bind="$attrs"
-    classes="modal-container"
-    content-class="modal-content"
-    v-on="$listeners"
-  >
+  <v-modal v-slot="{ close }" v-bind="$attrs" classes="modal-container" content-class="modal-content" v-on="$listeners">
     <button class="modal__close" @click="close">
       <mdi-close></mdi-close>
     </button>
     <span class="modal__title">Hello, vue-final-modal</span>
     <div class="modal__content">
       <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
     </div>
-  </vue-final-modal>
+  </v-modal>
 </template>
 
 <script>

diff --git a/docs/components/examples/basic/VEvents.vue b/docs/components/examples/basic/VEvents.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>

diff --git a/docs/components/examples/basic/VParams.vue b/docs/components/examples/basic/VParams.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <vue-final-modal
+    <v-modal
       v-model="showModal"
       name="stackable"
       classes="modal-container"
@@ -9,7 +9,7 @@
       @closed="e => e.stop()"
     >
       <template v-slot="{ params }">
-        <button class="modal__close" @click="$vfm.hide('stackable')">
+        <button class="modal__close" @click="$modal.hide('stackable')">
           <mdi-close></mdi-close>
         </button>
         <span class="modal__title">{{ params.test }} Hello, vue-final-modal</span>
@@ -19,15 +19,15 @@
           </p>
         </div>
         <div class="modal__action">
-          <v-button @click="$vfm.hide('stackable')">confirm</v-button>
-          <v-button @click="$vfm.hide('stackable')">cancel</v-button>
+          <v-button @click="$modal.hide('stackable')">confirm</v-button>
+          <v-button @click="$modal.hide('stackable')">cancel</v-button>
         </div>
       </template>
-    </vue-final-modal>
-    <v-button @click="$vfm.show('stackable', { test: 123 })">Show modal with params</v-button>
-    <v-button @click="$vfm.toggle('stackable', null, { test: 321 })">Toggle modal with params</v-button>
-    <v-button @click="$vfm.show('stackable')">Show modal</v-button>
-    <v-button @click="$vfm.hide('stackable')">Hide modal</v-button>
+    </v-modal>
+    <v-button @click="$modal.show('stackable', { test: 123 })">Show modal with params</v-button>
+    <v-button @click="$modal.toggle('stackable', null, { test: 321 })">Toggle modal with params</v-button>
+    <v-button @click="$modal.show('stackable')">Show modal</v-button>
+    <v-button @click="$modal.hide('stackable')">Hide modal</v-button>
   </div>
 </template>
 

diff --git a/docs/components/examples/basic/VScrollable.vue b/docs/components/examples/basic/VScrollable.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -10,7 +10,7 @@
           Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.
         </p>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>

diff --git a/docs/components/examples/basic/VStackable.vue b/docs/components/examples/basic/VStackable.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- First modal -->
-    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -15,10 +15,10 @@
         <v-button highlight @click="showConfirmModal = true">confirm</v-button>
         <v-button @click="showModal = false">cancel</v-button>
       </div>
-    </vue-final-modal>
+    </v-modal>
 
     <!-- Second modal -->
-    <vue-final-modal v-model="showConfirmModal" classes="modal-container" content-class="modal-content">
+    <v-modal v-model="showConfirmModal" classes="modal-container" content-class="modal-content">
       <button class="modal__close" @click="showConfirmModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -28,7 +28,7 @@
         <v-button @click="confirm">confirm</v-button>
         <v-button @click="showConfirmModal = false">cancel</v-button>
       </div>
-    </vue-final-modal>
+    </v-modal>
 
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>

diff --git a/docs/components/examples/basic/VStopBeforeClose.vue b/docs/components/examples/basic/VStopBeforeClose.vue
@@ -1,11 +1,6 @@
 <template>
   <div>
-    <vue-final-modal
-      v-model="showModal"
-      classes="modal-container"
-      content-class="modal-content"
-      @before-close="e => e.stop()"
-    >
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content" @before-close="e => e.stop()">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -19,7 +14,7 @@
         <v-button @click="showModal = false">confirm</v-button>
         <v-button @click="showModal = false">cancel</v-button>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>

diff --git a/docs/components/examples/basic/VStopBeforeOpen.vue b/docs/components/examples/basic/VStopBeforeOpen.vue
@@ -1,11 +1,6 @@
 <template>
   <div>
-    <vue-final-modal
-      v-model="showModal"
-      classes="modal-container"
-      content-class="modal-content"
-      @before-open="e => e.stop()"
-    >
+    <v-modal v-model="showModal" classes="modal-container" content-class="modal-content" @before-open="e => e.stop()">
       <button class="modal__close" @click="showModal = false">
         <mdi-close></mdi-close>
       </button>
@@ -19,7 +14,7 @@
         <v-button @click="showModal = false">confirm</v-button>
         <v-button @click="showModal = false">cancel</v-button>
       </div>
-    </vue-final-modal>
+    </v-modal>
     <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>

diff --git a/docs/components/examples/hoc/VModal.vue → docs/components/examples/hoc/CustomModal.vue b/docs/components/examples/hoc/VModal.vue → docs/components/examples/hoc/CustomModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <vue-final-modal
+  <v-modal
     v-slot="{ params, close }"
     v-bind="$attrs"
     classes="modal-container"
@@ -19,12 +19,12 @@
     <button class="modal__close" @click="close">
       <mdi-close></mdi-close>
     </button>
-  </vue-final-modal>
+  </v-modal>
 </template>
 
 <script>
 export default {
-  name: 'VModal',
+  name: 'CustomModal',
   inheritAttrs: false
 }
 </script>

diff --git a/docs/components/examples/hoc/HocExample.vue b/docs/components/examples/hoc/HocExample.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 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>

diff --git a/docs/components/examples/hoc/VTailwindModal.vue b/docs/components/examples/hoc/VTailwindModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <vue-final-modal
+  <v-modal
     v-slot="{ params, close }"
     v-bind="$attrs"
     classes="flex justify-center items-center"
@@ -19,7 +19,7 @@
     <button class="absolute top-0 right-0 mt-2 mr-2" @click="close">
       <mdi-close></mdi-close>
     </button>
-  </vue-final-modal>
+  </v-modal>
 </template>
 
 <script>