feat: drag & resize (#98)

* refactor: plugin validation, unit test

fix: build lib

refactor validPlugin function

refactor: validPlugin and unit test

test: watch hideOverlay

* feat: add postcss plugin autoprefixer

* chore: add favicon

* feat: support v-html in dynamic modal slot

* feat: draggable modal

fix: remove prop dragSelector

fix: unit test, contentStyle only support [Object, Array]

docs: 1. add vetur attributes and tags 2. drag document

refactor: drag modal

docs: fix typo

docs

fix

feat: drag and resize modal

build lib

docs: update docs

* docs: Bump @nuxt/content-theme-docs

* feat: api return promise

* feat: add postcss plugin autoprefixer (#71)

* refactor: plugin validation, unit test (#70)

fix: build lib

refactor validPlugin function

refactor: validPlugin and unit test

test: watch hideOverlay

* Feat: vite (#78)

* feat: 1. bump rollup, rollup-plugin-cleanup 2. remove rollup-plugin-css-only

* feat(example): vite, windicss, vite-plugin-components for Vue 2

* docs: fix duplicate component name

* feat: remove vue-cli-service, add jest, eslint

* fix: lint tests directory

* feat: add script dev:example, dev:docs

* fix: .babelrc for build and test

* feat!: api return promise (#76)

* feat: api return promise

* refactor: use noop to replace empty arrow function

* feat: unit tests

* docs: update

* fix: dynamic modal promise, refactor unit test

* feat: unit tests

* feat: resizable modal in boundary

* feat: drag & resize

* docs(en): drag & resize

* docs(zh-Hant): drag & resize

* refactor: code review

* docs: fix v-button

* docs: version 2

* chore: lint

* refactor: CLASS_PROP, STYLE_PROP

* chore: update yarn.lock

Author: hunterliu1003

README.md

@@ -28,7 +28,7 @@
 
 ## 🎉 [Documentation](https://vue-final-modal.org)
 
-## 🙌 [Examples](https://vue-final-modal.org/examples/manual)
+## 🙌 [Examples](https://vue-final-modal.org/examples/liveDemo)
 
 ## Introduction
 
@@ -42,7 +42,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**
 
@@ -63,7 +63,7 @@ yarn build
 # Run examples
 cd examples
 yarn
-yarn serve
+yarn dev
 
 # Run docs
 cd docs
@@ -95,6 +95,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 v-slot: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

@@ -2,12 +2,10 @@
   <div>
     <v-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>
+      <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,12 +1,10 @@
 <template>
   <div>
     <v-modal v-model="showModal" name="VApiShow" @confirm="showModal = false" @cancel="showModal = false">
-      <template v-slot="{ params }"> Hi {{ params.userName }} </template>
+      <template v-slot="{ params }">Hi {{ params.userName }} </template>
       <template v-slot: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

@@ -6,12 +6,10 @@
       </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>
+        <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

@@ -3,12 +3,10 @@
     <vue-final-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>
+        <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 v-slot: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,27 +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>