Merge branch 'dev' into next

hunterliu1003 · hunterliu1003 · commit e5a9ee471dde · 2020-10-16T16:22:19.000+08:00
diff --git a/README.md b/README.md
@@ -249,7 +249,8 @@ const CLASS_TYPES = [String, Object, Array]
   transition: { type: String, default: 'vfm' },
   overlayTransition: { type: String, default: 'vfm' },
   zIndexBase: { type: [String, Number], default: 1000 },
-  zIndex: { type: [Boolean, String, Number], default: false }
+  zIndex: { type: [Boolean, String, Number], default: false },
+  focusTrap: { type: Boolean, default: false }
 }
 ```
 
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/content/en/examples.md b/docs/content/en/examples.md
@@ -603,53 +603,19 @@ export default {
 
 ### **Accessibility**
 
-Using [focus-trap-vue](https://github.com/posva/focus-trap-vue) can easily support Accessibility.
-
-**1. Install**
-
-<code-group>
-  <code-block label="Yarn" active>
-
-```bash
-yarn add focus-trap focus-trap-vue
-```
-
-  </code-block>
-  <code-block label="NPM">
-
-```bash
-npm install focus-trap focus-trap-vue
-```
-
-  </code-block>
-</code-group>
-
-**2. Register component**
-
-```js[main.js]
-import { FocusTrap } from 'focus-trap-vue'
-Vue.component('FocusTrap', FocusTrap)
-```
-
-**3. Wrap the modal component**
 
 <v-accessibility></v-accessibility>
 
 <show-code open class="mt-2">
 
 ```html
 <template>
-  <focus-trap :value="value">
     <vue-final-modal
-      :value="value"
-      v-bind="$attrs"
-      classes="modal-container"
-      content-class="modal-content"
-      v-on="$listeners"
+      ...
+      focus-trap
     >
       ...modal content
     </vue-final-modal>
-  </focus-trap>
 </template>
 ```
 
diff --git a/docs/content/en/index.md b/docs/content/en/index.md
@@ -372,6 +372,13 @@ Calculate `z-index` automatically with zIndexBase. If zIndex is set, `zIndexBase
 
 Set specific `z-index` to root of the modal element. If zIndex is set, `zIndexBase` will become invalid.
 
+### `focusTrap`
+
+- Type: `Boolean`
+- Default: `false`
+
+Enables focus trap meaning that only inputs/buttons that are withing the modal window can be focused by pressing Tab (plugin uses very naive implementation of the focus trap)
+
 ## **Events**
 
 ### **Live example**
diff --git a/docs/package.json b/docs/package.json
@@ -10,8 +10,6 @@
   },
   "dependencies": {
     "@nuxt/content-theme-docs": "^0.6.1",
-    "focus-trap": "^6.1.1",
-    "focus-trap-vue": "^1.0.0",
     "nuxt": "^2.14.1",
     "vue-final-modal": "^0.13.5"
   },
diff --git a/docs/plugins/global.js b/docs/plugins/global.js
@@ -5,10 +5,6 @@ import VueFinalModal from 'vue-final-modal/lib/VueFinalModal.vue'
 
 Vue.use(VueFinalModal)
 
-import { FocusTrap } from 'focus-trap-vue'
-
-Vue.component('FocusTrap', FocusTrap)
-
 import components from '../../example/src/components/index.js'
 Object.keys(components).forEach(name => {
   Vue.component(name, components[name])
diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -4418,18 +4418,6 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-focus-trap-vue@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/focus-trap-vue/-/focus-trap-vue-1.0.0.tgz#0726c18a33dc2ad88994d978b9c65a537540e4ae"
-  integrity sha512-u5S7jOstKV47vs8+zpqhpTt/ghGk9bprrI6noCMyUt+58Ar5jC0Rpw88yJl5uqkAu3O5usk5Sm9bT547BYXoAg==
-
-focus-trap@^6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.1.1.tgz#61881b58e56783a7ca7331c6969336b986313594"
-  integrity sha512-sTTf6esJ2iCdn8WpUEB4LfJl7tvjGLASV3JmXbi7q1N5Ajjyk+65qZdrmjOF01s+/1v81rTNYZrsTeGha5KKpg==
-  dependencies:
-    tabbable "^5.1.0"
-
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -9266,11 +9254,6 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-tabbable@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.1.0.tgz#b81115168d0a8359ba69003b6a99d05f8480a664"
-  integrity sha512-Y3nSukchqM5UchuZjhj/WyE79Qb4RM/Vx3x3oHO3UYKKpf70Hy3iVRxb61MzCavN74aZsKzvPl4KNG8tQUAjFQ==
-
 tailwindcss@^1.8.10:
   version "1.8.10"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.8.10.tgz#945ef151c401c04a1c95e6a6bc747387a8d1b9dc"
diff --git a/example/package.json b/example/package.json
@@ -9,8 +9,6 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "focus-trap": "^6.1.1",
-    "focus-trap-vue": "^3.0.2",
     "tailwindcss": "^1.4.6",
     "vue": "^3.0.0",
     "vue-final-modal": "link:.."
diff --git a/example/src/components/basic/BasicOptions.vue b/example/src/components/basic/BasicOptions.vue
@@ -79,6 +79,10 @@
         <span>attach:</span>
         <input v-model="attach" type="checkbox" />
       </label>
+      <label class="flex items-center space-x-2">
+        <span>focusTrap:</span>
+        <input v-model="focusTrap" type="checkbox" />
+      </label>
       <button class="vfm-btn" @click="reset">reset</button>
     </div>
     <h4>Attach area:</h4>
@@ -111,7 +115,8 @@ const initData = () => ({
   zIndexBase: 1000,
   allowZIndex: false,
   zIndex: 0,
-  attach: false
+  attach: false,
+  focusTrap: false
 })
 
 export default {
@@ -128,7 +133,8 @@ export default {
         overlayTransition: this.overlayTransition ? 'vfm' : '',
         zIndexBase: this.zIndexBase,
         ...(this.allowZIndex && { zIndex: this.zIndex }),
-        attach: this.attach ? '#attach' : false
+        attach: this.attach ? '#attach' : false,
+        focusTrap: this.focusTrap
       }
     }
   },
diff --git a/example/src/components/basic/VAccessibility.vue b/example/src/components/basic/VAccessibility.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    <v-modal v-model="show" @confirm="show = false" @cancel="show = false">
+    <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
diff --git a/example/src/components/hoc/VModal.vue b/example/src/components/hoc/VModal.vue
@@ -5,23 +5,19 @@
     classes="modal-container"
     content-class="modal-content"
   >
-    <focus-trap :value="value">
-      <div>
-        <button class="modal__close" @click="$emit('input', false)">
-          <mdi-close></mdi-close>
-        </button>
-        <span class="modal__title">
-          <slot name="title"></slot>
-        </span>
-        <div class="modal__content">
-          <slot></slot>
-        </div>
-        <div class="modal__action">
-          <button class="vfm-btn" @click="$emit('confirm')">confirm</button>
-          <button class="vfm-btn" @click="$emit('cancel')">cancel</button>
-        </div>
-      </div>
-    </focus-trap>
+    <button class="modal__close" @click="$emit('input', false)">
+      <mdi-close></mdi-close>
+    </button>
+    <span class="modal__title">
+      <slot name="title"></slot>
+    </span>
+    <div class="modal__content">
+      <slot></slot>
+    </div>
+    <div class="modal__action">
+      <button class="vfm-btn" @click="$emit('confirm')">confirm</button>
+      <button class="vfm-btn" @click="$emit('cancel')">cancel</button>
+    </div>
   </vue-final-modal>
 </template>
 
diff --git a/example/src/main.js b/example/src/main.js
@@ -10,10 +10,6 @@ const app = createApp(App)
 
 app.use(VueFinalModal)
 
-import { FocusTrap } from 'focus-trap-vue'
-
-app.component('FocusTrap', FocusTrap)
-
 Object.keys(components).forEach(name => {
   app.component(name, components[name])
 })
diff --git a/example/yarn.lock b/example/yarn.lock
@@ -4198,18 +4198,6 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-focus-trap-vue@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/focus-trap-vue/-/focus-trap-vue-3.0.2.tgz#ecb31d8895eba2362113febc74ec0f95f7b296ac"
-  integrity sha512-dpSbgZ7Qe7XXuSaitFQ3O5tKihc1rFqKewqMw0j54wbxCo8XfTkoiABK6yvWXu855fN0ESrZSyIvFIsrxQMgtQ==
-
-focus-trap@^6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.1.1.tgz#61881b58e56783a7ca7331c6969336b986313594"
-  integrity sha512-sTTf6esJ2iCdn8WpUEB4LfJl7tvjGLASV3JmXbi7q1N5Ajjyk+65qZdrmjOF01s+/1v81rTNYZrsTeGha5KKpg==
-  dependencies:
-    tabbable "^5.1.0"
-
 follow-redirects@^1.0.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
@@ -8349,11 +8337,6 @@ symbol-observable@^1.1.0:
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
 
-tabbable@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.1.0.tgz#b81115168d0a8359ba69003b6a99d05f8480a664"
-  integrity sha512-Y3nSukchqM5UchuZjhj/WyE79Qb4RM/Vx3x3oHO3UYKKpf70Hy3iVRxb61MzCavN74aZsKzvPl4KNG8tQUAjFQ==
-
 table@^5.2.3:
   version "5.4.6"
   resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
diff --git a/lib/VueFinalModal.vue b/lib/VueFinalModal.vue
@@ -39,7 +39,6 @@
         :aria-expanded="visibility.modal.toString()"
         role="dialog"
         aria-modal="true"
-        tabindex="-1"
         @click="onClickContainer"
       >
         <div
@@ -66,6 +65,7 @@ import {
   watch,
   inject
 } from 'vue'
+import FocusTrap from './focusTrap.js'
 import { setStyle, removeStyle } from './dom.js'
 
 const TransitionState = {
@@ -102,7 +102,8 @@ export default {
     transition: { type: String, default: 'vfm' },
     overlayTransition: { type: String, default: 'vfm' },
     zIndexBase: { type: [String, Number], default: 1000 },
-    zIndex: { type: [Boolean, String, Number], default: false }
+    zIndex: { type: [Boolean, String, Number], default: false },
+    focusTrap: { type: Boolean, default: false }
   },
   emits: [
     'update:modelValue',
@@ -122,6 +123,7 @@ export const vfmContainer = ref(null)
 const $vfm = inject('$vfm')
 
 const modalStackIndex = ref(null)
+const $focusTrap = new FocusTrap()
 
 export const visible = ref(false)
 export const visibility = reactive({
@@ -204,7 +206,9 @@ function getModalInfo() {
     modalStackIndex,
     visibility,
     handleLockScroll,
-    hideOverlay: props.hideOverlay
+    hideOverlay: props.hideOverlay,
+    focusTrap: props.focusTrap,
+    $focusTrap
   }
 }
 function mounted() {
@@ -252,6 +256,7 @@ function close() {
     // If there are still nested modals opened
     const $_vm = $vfm.openedModals[$vfm.openedModals.length - 1]
     $_vm.handleLockScroll()
+    $_vm.focusTrap && $_vm.$focusTrap.firstElement().focus()
     !$_vm.hideOverlay && ($_vm.visibility.overlay = true)
   } else {
     // If the closed modal is the last one
@@ -310,12 +315,18 @@ export function beforeModalEnter() {
 }
 export function afterModalEnter() {
   modalTransitionState.value = TransitionState.Enter
-  vfmContainer.value.focus()
+  if (props.focusTrap) {
+    $focusTrap.enable(vfmContainer.value)
+  }
   emit('opened')
 }
 export function beforeModalLeave() {
   emit('before-close')
   modalTransitionState.value = TransitionState.Leaving
+
+  if ($focusTrap.enabled()) {
+    $focusTrap.disable()
+  }
 }
 export function afterModalLeave() {
   modalTransitionState.value = TransitionState.Leave
diff --git a/lib/focusTrap.js b/lib/focusTrap.js

Original file line number	Diff line number	Diff line change
`@@ -249,7 +249,8 @@ const CLASS_TYPES = [String, Object, Array]`
`249`	`249`	`transition: { type: String, default: 'vfm' },`
`250`	`250`	`overlayTransition: { type: String, default: 'vfm' },`
`251`	`251`	`zIndexBase: { type: [String, Number], default: 1000 },`
`252`		`- zIndex: { type: [Boolean, String, Number], default: false }`
	`252`	`+ zIndex: { type: [Boolean, String, Number], default: false },`
	`253`	`+ focusTrap: { type: Boolean, default: false }`
`253`	`254`	`}`
`254`	`255`	```
`255`	`256`