adminforth 2.22.0-next.33 → 2.22.0-next.35

package/dist/spa/src/afcl/Modal.vue

@@ -11,7 +11,7 @@
         <div class="relative bg-lightDialogBackgorund rounded-lg shadow-sm dark:bg-darkDialogBackgorund">
 
           <!-- Modal body -->
-          <div class="p-4 md:p-5 space-y-4 text-lightDialogBodyText dark:text-darkDialogBodyText">
+          <div class="space-y-4 text-lightDialogBodyText dark:text-darkDialogBodyText">
             <slot ></slot>
           </div>
          
@@ -57,7 +57,8 @@ const removeFromDom = computed(() => {
 })
 
 interface DialogProps {
-  clickToCloseOutside?: boolean
+  closeByClickOutside?: boolean
+  closeByEsc?: boolean
   beforeCloseFunction?: (() => void | Promise<void>) | null
   beforeOpenFunction?: (() => void | Promise<void>) | null
   askForCloseConfirmation?: boolean
@@ -66,7 +67,8 @@ interface DialogProps {
 }
 
 const props = withDefaults(defineProps<DialogProps>(), {
-  clickToCloseOutside: true,
+  closeByClickOutside: true,
+  closeByEsc: true,
   beforeCloseFunction: null,
   beforeOpenFunction: null,
   askForCloseConfirmation: false,
@@ -109,8 +111,25 @@ function toggleModal() {
   }
 }
 
+function onEsc(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    if (props.closeByEsc) {
+      tryToHideModal();
+    }
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', onEsc)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', onEsc)
+})
+
+
 function backdropClick(e: MouseEvent) {
-  if (props.clickToCloseOutside && e.target === e.currentTarget) {
+  if (props.closeByClickOutside && e.target === e.currentTarget) {
     tryToHideModal();
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "2.22.0-next.33",
+  "version": "2.22.0-next.35",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",