add escToClose

Author: hunterliu1003

README.md

@@ -277,12 +277,14 @@ toggle modal by name.
   lockScroll: { type: Boolean, default: true },
   hideOverlay: { type: Boolean, default: false },
   clickToClose: { type: Boolean, default: true },
+  escToClose: { type: Boolean, default: false },
   preventClick: { type: Boolean, default: false },
   attach: { type: null, default: false, validator: validateAttachTarget },
   transition: { type: String, default: 'vfm' },
   overlayTransition: { type: String, default: 'vfm' },
   zIndexBase: { type: [String, Number], default: 1000 },
   zIndex: { type: [Boolean, String, Number], default: false },
+  focusRetain: { type: Boolean, default: true },
   focusTrap: { type: Boolean, default: false }
 }
 ```
@@ -313,4 +315,4 @@ toggle modal by name.
 
 ## Contribution
 
-If you have any ideas for optimization of `vue-final-modal`, feel free to open [issues](https://github.com/hunterliu1003/vue-final-modal/issues) or [pull requests](https://github.com/hunterliu1003/vue-final-modal/pulls).
+👋 Hi I'm Hunter. Author of `vue-final-modal`. There is no perfect library even the `final` of vue modal. If you have any ideas for optimization of `vue-final-modal`, feel free to open [issues](https://github.com/hunterliu1003/vue-final-modal/issues) or [pull requests](https://github.com/hunterliu1003/vue-final-modal/pulls).

dist/VueFinalModal.esm.js

@@ -3,7 +3,7 @@ title: Introduction
 description: 'Vue Final Modal is a renderless, stackable, detachable and lightweight modal component.'
 position: 0
 category: Getting Start
-version: 0.18
+version: 0.19
 features:
   - Support Vue 3 and Vue 2
   - Tailwind CSS friendly
@@ -390,7 +390,16 @@ Hide the display of the overlay.
 - Type: `Boolean`
 - Default: `true`
 
-Clicking outside of modal content element will close the modal.
+Clicking overlay of modal to close the modal.
+
+### `escToClose`
+
+<badge>v0.19+</badge>
+
+- Type: `Boolean`
+- Default: `false`
+
+Press `esc` to close the modal.
 
 ### `preventClick`
 
@@ -425,12 +434,21 @@ 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.
 
+### `focusRemain`
+
+<badge>v0.19+</badge>
+
+- Type: `Boolean`
+- Default: `true`
+
+Focus the modal `vfm__container` after the modal enter.
+
 ### `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)
+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**
 

dist/VueFinalModal.esm.js.map

@@ -11,7 +11,7 @@
   "dependencies": {
     "@nuxt/content-theme-docs": "^0.6.1",
     "nuxt": "^2.14.1",
-    "vue-final-modal": "^0.18.0"
+    "vue-final-modal": "^0.18.2"
   },
   "devDependencies": {
     "@nuxtjs/google-analytics": "^2.4.0",

dist/VueFinalModal.umd.js

@@ -9899,10 +9899,10 @@ vue-client-only@^2.0.0:
   resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.0.0.tgz#ddad8d675ee02c761a14229f0e440e219de1da1c"
   integrity sha512-arhk1wtWAfLsJyxGMoEYhoBowM87/i6HLSG2LH/03Yog6i2d9JEN1peMP0Ceis+/n9DxdenGYZZTxbPPJyHciA==
 
-vue-final-modal@^0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/vue-final-modal/-/vue-final-modal-0.18.0.tgz#8525133d68b9f7e63af38610d1ee5f59deae4646"
-  integrity sha512-yeso4SfPXg0wpLNc42YwZnbG0BTNfDLPgmWE8OIsFBHtRq/+gdd+vj1kJNefJbiv+1f6r0xe6Ac54C+DlGo/Eg==
+vue-final-modal@^0.18.2:
+  version "0.18.2"
+  resolved "https://registry.yarnpkg.com/vue-final-modal/-/vue-final-modal-0.18.2.tgz#6a6d4e62c42c0fc71707ff0bc75e71d894c23d1f"
+  integrity sha512-emMSYD09rbs0YPBB/V/rsAowUoiCmGeQD31RkX+699oj1hL8BBWCRqPQTsoBi/Y+n9mysm6YoW4weXXipeepMQ==
 
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"

dist/VueFinalModal.umd.js.map

@@ -41,6 +41,10 @@
         <span>clickToClose:</span>
         <input v-model="clickToClose" type="checkbox" />
       </label>
+      <label class="flex items-center space-x-2">
+        <span>escToClose:</span>
+        <input v-model="escToClose" type="checkbox" />
+      </label>
       <label class="flex items-center space-x-2">
         <span>preventClick:</span>
         <input v-model="preventClick" type="checkbox" />
@@ -79,6 +83,10 @@
         <span>attach:</span>
         <input v-model="attach" type="checkbox" />
       </label>
+      <label class="flex items-center space-x-2">
+        <span>focusRetain:</span>
+        <input v-model="focusRetain" type="checkbox" />
+      </label>
       <label class="flex items-center space-x-2">
         <span>focusTrap:</span>
         <input v-model="focusTrap" type="checkbox" />
@@ -109,13 +117,15 @@ const initData = () => ({
   lockScroll: true,
   hideOverlay: false,
   clickToClose: true,
+  escToClose: false,
   preventClick: false,
   transition: true,
   overlayTransition: true,
   zIndexBase: 1000,
   allowZIndex: false,
   zIndex: 0,
   attach: false,
+  focusRetain: true,
   focusTrap: false
 })
 
@@ -128,12 +138,14 @@ export default {
         lockScroll: this.lockScroll,
         hideOverlay: this.hideOverlay,
         clickToClose: this.clickToClose,
+        escToClose: this.escToClose,
         preventClick: this.preventClick,
         transition: this.transition ? 'vfm' : '',
         overlayTransition: this.overlayTransition ? 'vfm' : '',
         zIndexBase: this.zIndexBase,
         ...(this.allowZIndex && { zIndex: this.zIndex }),
         attach: this.attach ? '#attach' : false,
+        focusRetain: this.focusRetain,
         focusTrap: this.focusTrap
       }
     }

docs/content/en/index.md

@@ -6,6 +6,7 @@
     :style="{ zIndex: calculateZIndex }"
     class="vfm vfm--inset"
     :class="[attach === false ? 'vfm--fixed' : 'vfm--absolute', { 'vfm--prevent-none': preventClick }]"
+    @keydown="onEsc"
   >
     <transition
       :name="overlayTransition"
@@ -37,6 +38,7 @@
         :aria-expanded="visibility.modal.toString()"
         role="dialog"
         aria-modal="true"
+        tabindex="-1"
         @click="onClickContainer"
       >
         <div
@@ -80,6 +82,7 @@ export default {
     lockScroll: { type: Boolean, default: true },
     hideOverlay: { type: Boolean, default: false },
     clickToClose: { type: Boolean, default: true },
+    escToClose: { type: Boolean, default: false },
     preventClick: { type: Boolean, default: false },
     attach: {
       type: null,
@@ -96,6 +99,7 @@ export default {
     overlayTransition: { type: String, default: 'vfm' },
     zIndexBase: { type: [String, Number], default: 1000 },
     zIndex: { type: [Boolean, String, Number], default: false },
+    focusRetain: { type: Boolean, default: true },
     focusTrap: { type: Boolean, default: false }
   },
   emits: ['update:modelValue', 'click-outside', 'before-open', 'opened', 'before-close', 'closed']
@@ -186,12 +190,14 @@ function getModalInfo() {
     uid,
     name: props.name,
     emit,
+    vfmContainer,
     vfmContent,
     getAttachElement,
     modalStackIndex,
     visibility,
     handleLockScroll,
     hideOverlay: props.hideOverlay,
+    focusRetain: props.focusRetain,
     focusTrap: props.focusTrap,
     $focusTrap
   }
@@ -242,6 +248,9 @@ function close() {
     const $_vm = $vfm.openedModals[$vfm.openedModals.length - 1]
     $_vm.handleLockScroll()
     $_vm.focusTrap && $_vm.$focusTrap.firstElement().focus()
+    if ($_vm.focusRetain || $_vm.focusTrap) {
+      $_vm.vfmContainer.value.focus()
+    }
     !$_vm.hideOverlay && ($_vm.visibility.overlay = true)
   }
   startTransitionLeave()
@@ -295,6 +304,9 @@ export function beforeModalEnter() {
 }
 export function afterModalEnter() {
   modalTransitionState.value = TransitionState.Enter
+  if (props.focusRetain || props.focusTrap) {
+    vfmContainer.value.focus()
+  }
   if (props.focusTrap) {
     $focusTrap.enable(vfmContainer.value)
   }
@@ -320,6 +332,11 @@ export function onClickContainer() {
   emit('click-outside')
   props.clickToClose && emit('update:modelValue', false)
 }
+export function onEsc(evt) {
+  if (evt.keyCode === 27 && visible.value && props.escToClose) {
+    emit('update:modelValue', false)
+  }
+}
 </script>
 
 <style lang="css" scoped>