feat: Some improvements for modal component

Added click outside, persistent and close on Esc

docs/components/modal.md

@@ -2,10 +2,23 @@
 import ModalExample from './modal/examples/ModalExample.vue';
 import ModalSizeExample from './modal/examples/ModalSizeExample.vue';
 import ModalEscapableExample from './modal/examples/ModalEscapableExample.vue';
+import ModalPersistentExample from './modal/examples/ModalPersistentExample.vue';
 </script>
 # Vue Modal - Flowbite
 
-## Demo
+#### Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/components/modal/](https://flowbite.com/docs/components/modal/)
+:::
+
+The modal component can be used as an interactive dialog on top of the main content area of the website to show notifications and gather information using form elements from your website users.
+
+Get started with multiple sizes, colors, and styles built with the utility classes from Tailwind CSS and the components from Flowbite.
+
+## Default modal
 
 <ModalExample />
 
@@ -101,3 +114,35 @@ import { Modal } from 'flowbite-vue'
     <Modal :escapable="false" />
 </template>
 ```
+
+## Persistent
+
+Clicking outside of the element or pressing esc key will not send `close` event.
+
+Demo:
+<ModalPersistentExample />
+
+```vue
+<script setup>
+import { Modal } from 'flowbite-vue'
+</script>
+<template>
+    <Modal persistent />
+</template>
+```
+
+## API
+
+### Props:
+
+| Name       | Values                                                    | Default |
+|------------|-----------------------------------------------------------|---------|
+| size       | `md`,`lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl` | 2xl     |
+| escapable  | `true`, `false`                                           | `true`  |
+| persistent | `true`, `false`                                           | `true`  |
+
+### Events:
+| Name                | Type                                                                             |
+|---------------------|----------------------------------------------------------------------------------|
+| `close`             | Clicked on the close button, pressed `Esc`, or clicked outside the modal content |
+| `click:outside`     | Clicked outside the modal content                                                |

docs/components/modal/examples/ModalExample.vue

@@ -3,7 +3,7 @@
     <button @click="showModal" type="button" class="mt-5 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
       {{ triggerText }}
     </button>
-    <Modal :escapable="escapable" :size="size" v-if="isShowModal" @close="closeModal">
+    <Modal :escapable="escapable" :size="size" v-if="isShowModal" @close="closeModal" :persistent="persistent">
       <template #header>
         <div class="flex items-center text-lg">
           Terms of Service
@@ -32,42 +32,22 @@
 </template>
 <script lang="ts" setup>
 import { Modal } from '../../../../src/index'
-import type { PropType } from 'vue'
-import type { ModalSize, ModalPosition } from '../../../../src/components/Modal/types'
+import type { ModalSize } from '../../../../src/components/Modal/types'
 import { ref } from 'vue'
 
-defineProps({
-  children: {
-    type: Array,
-    default() {
-      return []
-    },
-  },
-  popup: {
-    type: Boolean,
-    default: false,
-  },
-  position: {
-    type: String as PropType<ModalPosition>,
-    default: 'center',
-  },
-  show: {
-    type: Boolean,
-    default: false,
-  },
-  size: {
-    type: String as PropType<ModalSize>,
-    default: '2xl',
-  },
-  escapable: {
-    type: Boolean,
-    default: true,
-  },
-  triggerText: {
-    type: String,
-    default: 'Demo Modal',
-  },
+interface ModalProps {
+  size?: ModalSize,
+  escapable?: boolean,
+  persistent?: boolean,
+  triggerText?: string
+}
+withDefaults(defineProps<ModalProps>(), {
+  size: '2xl',
+  escapable: true,
+  persistent: false,
+  triggerText: 'Demo Modal',
 })
+
 const isShowModal = ref(false)
 function closeModal() {
   isShowModal.value = false

docs/components/modal/examples/ModalPersistentExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw">
+      <ModalExample trigger-text="Persistent" :persistent="true" />
+  </div>
+</template>
+<script setup>
+import ModalExample from './ModalExample.vue'
+</script>