feat: Some improvements for modal component

Added click outside, persistent and close on Esc

src/components/Modal/Modal.vue

@@ -2,13 +2,14 @@
   <div>
     <div class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40" />
     <div
-        tabindex="-1"
+        tabindex="0"
+        ref="modalRef"
         class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex"
-        v-on="escapable ? { click: closeModal } : {}"
+        @keyup.esc="closeWithEsc"
+        @click.self="clickOutside"
     >
-      <div 
-          @click.stop
-          class="relative p-4 w-full h-full md:h-auto" 
+      <div
+          class="relative p-4 w-full h-full md:h-auto"
           :class="`${modalSizeClasses[size]}`"
       >
         <!-- Modal content -->
@@ -16,7 +17,7 @@
           <!-- Modal header -->
           <div class="p-4 rounded-t flex justify-between items-center" :class="$slots.header ? 'border-b border-gray-200 dark:border-gray-600' : ''">
             <slot name="header" />
-            <button v-if="escapable" @click="closeModal" aria-label="close" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
+            <button v-if="!persistent" @click="closeModal" aria-label="close" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
               <slot name="close-icon">
                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
               </slot>
@@ -36,34 +37,20 @@
   </div>
 </template>
 <script lang="ts" setup>
-import type { PropType } from 'vue'
-import type { ModalSize, ModalPosition } from './types'
+import type { ModalSize } from './types'
+import { onMounted, ref, type Ref } from 'vue'
 
-const props = defineProps({
-  children: {
-    type: Array,
-    default() {
-      return []
-    },
-  },
-  popup: {
-    type: Boolean,
-    default: false,
-  },
-  position: {
-    type: String as PropType<ModalPosition>,
-    default: 'center',
-  },
-  size: {
-    type: String as PropType<ModalSize>,
-    default: '2xl',
-  },
-  escapable: {
-    type: Boolean,
-    default: true
-  },
+interface ModalProps {
+  size?: ModalSize,
+  escapable?: boolean,
+  persistent?: boolean
+}
+const props = withDefaults(defineProps<ModalProps>(), {
+  size: '2xl',
+  escapable: true,
+  persistent: false,
 })
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'click:outside'])
 const modalSizeClasses = {
   xs: 'max-w-xs',
   sm: 'max-w-sm',
@@ -81,12 +68,20 @@ const modalSizeClasses = {
 function closeModal() {
   emit('close')
 }
+function clickOutside() {
+  if(!props.persistent) {
+    emit('click:outside')
+    closeModal()
+  }
+}
 
-addEventListener("keyup", function(e) {
-  if (props.escapable) {
-    if (e.key === "Escape") {
-      closeModal();
-    }
+function closeWithEsc() {
+  if(props.escapable && !props.persistent) closeModal()
+}
+const modalRef: Ref<HTMLElement | null> = ref(null)
+onMounted(() => {
+  if(modalRef.value) {
+    modalRef.value.focus()
   }
 })
 </script>