From 19542da005decca415c130c52d8a63648e0f6730 Mon Sep 17 00:00:00 2001
From: Dmitri <19738862+Dmitri-2@users.noreply.github.com>
Date: Sun, 18 Sep 2022 19:01:59 -0700
Subject: [PATCH] Add modal sizes

---
 .../modal/examples/ModalExample.vue           | 34 +++++++++++++++++--
 .../modal/examples/ModalSizeExample.vue       | 19 +++++++++++
 docs/components/modal/modal.md                | 33 ++++++++++++++++--
 src/components/Modal/Modal.vue                | 17 +++++++++-
 4 files changed, 96 insertions(+), 7 deletions(-)
 create mode 100644 docs/components/modal/examples/ModalSizeExample.vue

diff --git a/docs/components/modal/examples/ModalExample.vue b/docs/components/modal/examples/ModalExample.vue
index c354d8f..c590f72 100644
--- a/docs/components/modal/examples/ModalExample.vue
+++ b/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>
diff --git a/docs/components/modal/examples/ModalSizeExample.vue b/docs/components/modal/examples/ModalSizeExample.vue
new file mode 100644
index 0000000..15c82b4
--- /dev/null
+++ b/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>
diff --git a/docs/components/modal/modal.md b/docs/components/modal/modal.md
index cf3b674..9c2a07a 100644
--- a/docs/components/modal/modal.md
+++ b/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>
+```
\ No newline at end of file
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index e88f688..da29f54 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -4,7 +4,8 @@
     <div v-if="!isHidden" class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"></div>
     <div v-if="!isHidden" tabindex="-1" :aria-hidden="isHidden ? 'true' : 'false'"
          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">
-      <div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
+      <div class="relative p-4 w-full h-full md:h-auto"
+           :class="`${modalSizeClasses[size]}`">
         <!-- Modal content -->
         <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
           <!-- Modal header -->
@@ -54,6 +55,20 @@ const props = defineProps({
   },
 })
 
+const modalSizeClasses = {
+  xs: 'max-w-xs',
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl',
+  '4xl': 'max-w-4xl',
+  '5xl': 'max-w-5xl',
+  '6xl': 'max-w-6xl',
+  '7xl': 'max-w-7xl',
+}
+
 const isHidden: Ref<boolean> = ref(!props.show)
 
 function toggleModal() {