Add modal sizes

docs/components/modal/examples/ModalExample.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="vp-raw flex flex-col">
-    <Modal>
+    <Modal :size="size">
       <template #trigger="props">
         <button @click="props.show()" 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">
-          Show Modal
+          {{triggerText}}
         </button>
       </template>
       <template #header="props">
@@ -40,5 +40,33 @@
   </div>
 </template>
 <script setup>
-import { Modal } from '../../../../src/index'
+import { Modal } from '../../../../src/index';
+const props = defineProps({
+  children: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  popup: {
+    type: Boolean,
+    default: false,
+  },
+  position: {
+    type: String, // 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right'
+    default: 'center',
+  },
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String, // 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'
+    default: '2xl',
+  },
+  triggerText: {
+    type: String,
+    default: 'Demo Modal',
+  },
+})
 </script>

docs/components/modal/examples/ModalSizeExample.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="vp-raw flex justify-between">
+    <span>
+      <ModalExample size="xs" trigger-text="XS Modal"/>
+    </span>
+    <span>
+      <ModalExample size="md" trigger-text="MD Modal"/>
+    </span>
+    <span>
+      <ModalExample size="xl" trigger-text="XL Modal"/>
+    </span>
+    <span>
+      <ModalExample size="5xl" trigger-text="5XL Modal"/>
+    </span>
+  </div>
+</template>
+<script setup>
+import ModalExample from './ModalExample.vue'
+</script>

docs/components/modal/modal.md

@@ -1,9 +1,10 @@
 <script setup>
-import ModalExample from './examples/ModalExample.vue'
+import ModalExample from './examples/ModalExample.vue';
+import ModalSizeExample from './examples/ModalSizeExample.vue';
 </script>
 # Modal
 
-### Demo
+## Demo
 
 <ModalExample />
 
@@ -52,9 +53,35 @@ import { Modal } from 'flowbite-vue'
 </template>
 ```
 
-### Slot Properties 
+## Slot Properties 
 
 Modal slots receive the following functions to interact with the modal:
 1. `show` = show the modal 
 2. `hide` = hide the modal 
 3. `toggle` = toggles the modal from current state (e.g. if shown, then hide)
+
+These properties allow your code to set the open/closed state of the modal easily. 
+
+## Sizes 
+
+The modal can come in the following sizes (based on TailwindCSS classes).
+
+`xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`
+
+The default value is: `2xl`
+
+Demo: 
+
+<ModalSizeExample/>
+
+```vue
+<script setup>
+import { Modal } from 'flowbite-vue'
+</script>
+<template>
+    <Modal size="xs" />
+    <Modal size="md" />
+    <Modal size="xl" />
+    <Modal size="5xl" />
+</template>
+```