Feat/v3/drag resize (#104)

* feat: drag & resize

* fix: check listener exist el

* fix(test): 1. Bump @vue/test-utils 2. add unit test for drag & resize

Author: hunterliu1003

README.md

@@ -29,7 +29,7 @@
 ## 🎉 [Documentation](https://vue-final-modal.org)
 
 
-## 🙌 [Examples](https://vue-final-modal.org/examples/manual)
+## 🙌 [Examples](https://vue-final-modal.org/examples/liveDemo)
 
 ## Introduction
 
@@ -43,7 +43,7 @@ You can create a [higher-order component](https://vue-final-modal.org/examples/r
 - [Tailwind CSS](https://vue-final-modal.org/examples/tailwind) friendly
 - Renderless component
 - [Tiny bundle size](https://bundlephobia.com/result?p=vue-final-modal)
-- Support `stackable`, `detachable`, `scrollable`, `transition`, `accessibility`, `focusTrap`, `dynamic modal`
+- Support `stackable`, `detachable`, `scrollable`, `draggable`, `resizable`, `transition`, `accessibility`, `focusTrap`, `dynamic modal`
 
 ## **Development**
 
@@ -64,7 +64,7 @@ yarn build
 # Run examples
 cd examples
 yarn
-yarn serve
+yarn dev
 
 # Run docs
 cd docs
@@ -96,6 +96,8 @@ To develop `vue-final-modal`, I learn a lot from these awesome libraries:
   - focusTrap for A11y
 - [Bootstrap Vue](https://bootstrap-vue.org/)
   - lockScroll
+- [vue-resizable](https://github.com/nikitasnv/vue-resizable)
+  - drag & resize
 
 > There is no perfect library even the `final` of vue modal.
 

dist/VueFinalModal.esm.js

@@ -16,20 +16,31 @@
       :attach="attach ? '#attach' : false"
       :focus-retain="focusRetain"
       :focus-trap="focusTrap"
+      :drag="drag"
+      :fit-parent="fitParent"
+      :keep-changed-style="keepChangedStyle"
+      :resize="resize"
+      :resize-directions="resizeDirections"
+      :drag-selector="allowDragSelector ? dragSelector : ''"
+      :min-width="minWidth"
+      :max-width="maxWidth"
+      :min-height="minHeight"
+      :max-height="maxHeight"
       @confirm="showModal = false"
       @cancel="showModal = false"
     >
       <template #title># Hello, world!</template>
-      <p>
-        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-      </p>
+      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
     </v-modal>
 
-    <button class="vfm-btn" @click="showModal = true">Open Modal</button>
+    <div class="flex space-x-2">
+      <v-button highlight @click="showModal = true">Open Modal</v-button>
+      <v-button @click="reset">reset</v-button>
+    </div>
 
-    <h3>Prop Options:</h3>
+    <h3 class="py-2">Basic:</h3>
 
-    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4 border rounded">
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-y-4 p-4 border rounded select-none">
       <label class="flex items-center space-x-2">
         <span>value:</span>
         <input v-model="showModal" type="checkbox" />
@@ -38,7 +49,6 @@
         <span>ssr:</span>
         <input v-model="ssr" type="checkbox" />
       </label>
-
       <label class="flex items-center space-x-2">
         <span>lockScroll:</span>
         <input v-model="lockScroll" type="checkbox" />
@@ -101,13 +111,69 @@
         <span>focusTrap:</span>
         <input v-model="focusTrap" type="checkbox" />
       </label>
-      <button class="vfm-btn" @click="reset">reset</button>
     </div>
-    <h4>Attach area:</h4>
-    <div id="attach" class="relative w-full h-64 mt-8 p-4 border rounded dark:bg-gray-700">
-      <button class="vfm-btn" @click="openAttach">
-        Attach to here and open modal
-      </button>
+    <h3 class="py-2">Drag & Resize:</h3>
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4 border rounded select-none">
+      <label class="flex items-center space-x-2">
+        <span>drag:</span>
+        <input v-model="drag" type="checkbox" />
+      </label>
+      <div class="flex flex-col">
+        <label class="flex items-center space-x-2">
+          <input v-model="allowDragSelector" type="checkbox" />
+          <span>dragSelector:</span>
+        </label>
+        <label>
+          <input
+            v-model="dragSelector"
+            :disabled="!allowDragSelector"
+            class="pl-2 dark:text-black rounded focus:outline-none"
+          />
+        </label>
+      </div>
+      <label class="flex items-center space-x-2">
+        <span>fitParent:</span>
+        <input v-model="fitParent" type="checkbox" />
+      </label>
+      <label class="flex items-center space-x-2">
+        <span>keepChangedStyle:</span>
+        <input v-model="keepChangedStyle" type="checkbox" />
+      </label>
+      <label class="flex items-center space-x-2">
+        <span>resize:</span>
+        <input v-model="resize" type="checkbox" />
+      </label>
+      <div class="flex flex-col">
+        <span>resizeDirections:</span>
+        <div class="flex space-x-1">
+          <div v-for="direction in ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']" :key="direction">
+            <label>
+              {{ direction }}:
+              <input type="checkbox" v-model="resizeDirections" :value="direction" />
+            </label>
+          </div>
+        </div>
+      </div>
+      <label class="flex items-center space-x-2">
+        <span>minWidth:</span>
+        <input v-model.number="minWidth" type="number" class="w-20 pl-2 dark:text-black rounded focus:outline-none" />
+      </label>
+      <label class="flex items-center space-x-2">
+        <span>maxWidth:</span>
+        <input v-model.number="maxWidth" type="number" class="w-20 pl-2 dark:text-black rounded focus:outline-none" />
+      </label>
+      <label class="flex items-center space-x-2">
+        <span>minHeight:</span>
+        <input v-model.number="minHeight" type="number" class="w-20 pl-2 dark:text-black rounded focus:outline-none" />
+      </label>
+      <label class="flex items-center space-x-2">
+        <span>maxHeight:</span>
+        <input v-model.number="maxHeight" type="number" class="w-20 pl-2 dark:text-black rounded focus:outline-none" />
+      </label>
+    </div>
+    <h3 class="py-2">Attach:</h3>
+    <div id="attach" class="relative w-full h-64 p-4 border rounded dark:bg-gray-900 overflow-hidden">
+      <v-button highlight @click="openAttach">Attach to here and open modal</v-button>
       <p>click will:</p>
       <ul>
         <li>set "attach" to "true"</li>
@@ -134,7 +200,18 @@ const initData = () => ({
   zIndex: 0,
   attach: false,
   focusRetain: true,
-  focusTrap: false
+  focusTrap: false,
+  drag: false,
+  fitParent: true,
+  keepChangedStyle: false,
+  resize: false,
+  resizeDirections: ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'],
+  allowDragSelector: false,
+  dragSelector: '.modal__title',
+  minWidth: 0,
+  maxWidth: 2000,
+  minHeight: 0,
+  maxHeight: 2000
 })
 
 export default {

dist/VueFinalModal.esm.js.map

@@ -5,7 +5,7 @@
       <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
     </v-modal>
 
-    <button class="vfm-btn" @click="show = true">Open modal</button>
+    <v-button highlight @click="show = true">Open modal</v-button>
   </div>
 </template>
 

dist/VueFinalModal.umd.js

@@ -11,11 +11,11 @@
         </p>
       </div>
       <div class="modal__action">
-        <button class="vfm-btn" @click="showModal = false">confirm</button>
-        <button class="vfm-btn" @click="showModal = false">cancel</button>
+        <v-button @click="showModal = false">confirm</v-button>
+        <v-button @click="showModal = false">cancel</v-button>
       </div>
     </vue-final-modal>
-    <button class="vfm-btn" @click="showModal = true">Open modal</button>
+    <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
 

dist/VueFinalModal.umd.js.map

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

docs/components/examples/basic/BasicOptions.vue

@@ -3,7 +3,7 @@
     <vue-final-modal v-model="showModal" content-class="modal-content">
       <span class="modal__title">Hello, vue-final-modal</span>
     </vue-final-modal>
-    <button class="vfm-btn" @click="showModal = true">Open modal</button>
+    <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
 

docs/components/examples/basic/BasicPlainStyleCodepen.vue

@@ -3,7 +3,7 @@
     <vue-final-modal v-model="showModal">
       <span class="modal__title">Hello, vue-final-modal</span>
     </vue-final-modal>
-    <button class="vfm-btn" @click="showModal = true">Open modal</button>
+    <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
 

docs/components/examples/basic/VAccessibility.vue

@@ -0,0 +1,22 @@
+<template>
+  <button class="v-btn" v-on="$listeners"><span v-if="highlight">👉 </span><slot></slot></button>
+</template>
+
+<script>
+export default {
+  props: {
+    highlight: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+<style scoped>
+button.v-btn {
+  @apply px-2 py-1 border rounded;
+}
+button.v-btn + button.v-btn {
+  margin: 0 0 0 1rem;
+}
+</style>

docs/components/examples/basic/VActionButtons.vue

@@ -3,7 +3,7 @@
     <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
       <span class="modal__title">Hello, vue-final-modal</span>
     </vue-final-modal>
-    <button class="vfm-btn" @click="showModal = true">Open modal</button>
+    <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
 

docs/components/examples/basic/VApiShow.vue

@@ -9,7 +9,7 @@
         <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
       </div>
     </vue-final-modal>
-    <button class="vfm-btn" @click="showModal = true">Open modal</button>
+    <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
 

docs/components/examples/basic/VBackground.vue

@@ -6,7 +6,7 @@
         <p>Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.</p>
       </div>
     </vue-final-modal>
-    <button class="vfm-btn" @click="showModal = true">Open modal</button>
+    <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
 

docs/components/examples/basic/VBasic.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="vfm-btn mb-4" @click="dynamic">Open Dynamic Modal</button>
+  <v-button class="mb-4" highlight @click="dynamic">Open Dynamic Modal</v-button>
 </template>
 
 <script>

docs/components/examples/basic/VButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="vfm-btn mb-4" @click="dynamic">Open Dynamic Modal</button>
+  <v-button class="mb-4" highlight @click="dynamic">Open Dynamic Modal</v-button>
 </template>
 
 <script>

docs/components/examples/basic/VCentered.vue

@@ -11,7 +11,7 @@
     >
       <template #title>Events Example!</template>
     </v-modal>
-    <button class="vfm-btn" @click="showModal = true">Open modal</button>
+    <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
 

docs/components/examples/basic/VCloseButton.vue

@@ -19,15 +19,15 @@
           </p>
         </div>
         <div class="modal__action">
-          <button class="vfm-btn" @click="$vfm.hide('stackable')">confirm</button>
-          <button class="vfm-btn" @click="$vfm.hide('stackable')">cancel</button>
+          <v-button @click="$vfm.hide('stackable')">confirm</v-button>
+          <v-button @click="$vfm.hide('stackable')">cancel</v-button>
         </div>
       </template>
     </vue-final-modal>
-    <button class="vfm-btn" @click="$vfm.show('stackable', { test: 123 })">Show modal with params</button>
-    <button class="vfm-btn" @click="$vfm.toggle('stackable', null, { test: 321 })">Toggle modal with params</button>
-    <button class="vfm-btn" @click="$vfm.show('stackable')">Show modal</button>
-    <button class="vfm-btn" @click="$vfm.hide('stackable')">Hide modal</button>
+    <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>
   </div>
 </template>
 

docs/components/examples/basic/VContent.vue

@@ -11,7 +11,7 @@
         </p>
       </div>
     </vue-final-modal>
-    <button class="vfm-btn" @click="showModal = true">Open modal</button>
+    <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>
 

docs/components/examples/basic/VDynamic.vue

@@ -12,9 +12,8 @@
         </p>
       </div>
       <div class="modal__action">
-        <span>Try click →&nbsp;&nbsp;&nbsp;&nbsp;</span>
-        <button class="vfm-btn" @click="showConfirmModal = true">confirm</button>
-        <button class="vfm-btn" @click="showModal = false">cancel</button>
+        <v-button highlight @click="showConfirmModal = true">confirm</v-button>
+        <v-button @click="showModal = false">cancel</v-button>
       </div>
     </vue-final-modal>
 
@@ -26,12 +25,12 @@
       <span class="modal__title">Confirm</span>
       <div class="modal__content">Confirm to submit.</div>
       <div class="modal__action">
-        <button class="vfm-btn" @click="confirm">confirm</button>
-        <button class="vfm-btn" @click="showConfirmModal = false">cancel</button>
+        <v-button @click="confirm">confirm</v-button>
+        <v-button @click="showConfirmModal = false">cancel</v-button>
       </div>
     </vue-final-modal>
 
-    <button class="vfm-btn" @click="showModal = true">Open modal</button>
+    <v-button highlight @click="showModal = true">Open modal</v-button>
   </div>
 </template>