From 8ef6526fa73fcc3a7685e0dc49235ce4ad32fb6d Mon Sep 17 00:00:00 2001
From: Dmitri <19738862+Dmitri-2@users.noreply.github.com>
Date: Wed, 31 Aug 2022 10:14:18 -0700
Subject: [PATCH 1/6] Add basic modal component

---
 docs/.vitepress/config.ts                     |  2 +-
 .../modal/examples/ModalExample.vue           | 25 ++++++-
 docs/components/modal/modal.md                | 36 +++++++++-
 src/components/Modal/Modal.vue                | 65 +++++++++++--------
 4 files changed, 97 insertions(+), 31 deletions(-)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index d81f580..a3733c3 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -42,6 +42,7 @@ function getComponents() {
     { text: 'Tabs', link: '/components/tabs/tabs.md' },
     { text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
     { text: 'Toast', link: 'components/toast/toast.md' },
+    { text: 'Modal', link: 'components/modal/modal.md' },
 
     { text: '- Accordion', link: 'components/accordion/accordion.md' },
     { text: '- Avatar', link: 'components/avatar/avatar.md' },
@@ -50,7 +51,6 @@ function getComponents() {
     { text: '- Card', link: 'components/card/card.md' },
     { text: '- Carousel', link: 'components/carousel/carousel.md' },
     { text: '- Footer', link: 'components/footer/footer.md' },
-    { text: '- Modal', link: 'components/modal/modal.md' },
     { text: '- Navbar', link: 'components/navbar/navbar.md' },
     { text: '- Pagination', link: 'components/pagination/pagination.md' },
     { text: '- Progress', link: 'components/progress/progress.md' },
diff --git a/docs/components/modal/examples/ModalExample.vue b/docs/components/modal/examples/ModalExample.vue
index aea1c27..df2b134 100644
--- a/docs/components/modal/examples/ModalExample.vue
+++ b/docs/components/modal/examples/ModalExample.vue
@@ -1,6 +1,29 @@
 <template>
   <div class="vp-raw flex flex-col">
-    <Modal></Modal>
+    <Modal>
+      <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
+        </button>
+      </template>
+      <template v-slot:title>Terms of Service</template>
+      <template v-slot:body>
+        <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+          With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+        </p>
+        <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+          The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+        </p>
+      </template>
+      <template #footer="props">
+        <button @click="props.hide()" type="button" class="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">
+          I accept
+        </button>
+        <button @click="props.hide()" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
+          Decline
+        </button>
+      </template>
+    </Modal>
   </div>
 </template>
 <script setup>
diff --git a/docs/components/modal/modal.md b/docs/components/modal/modal.md
index ec6568b..38a79c0 100644
--- a/docs/components/modal/modal.md
+++ b/docs/components/modal/modal.md
@@ -3,13 +3,45 @@ import ModalExample from './examples/ModalExample.vue'
 </script>
 # Modal
 
+### Demo
+
+<ModalExample />
+
 ```vue
 <script setup>
 import { Modal } from 'flowbite-vue'
 </script>
 <template>
-  <Modal></Modal>
+  <Modal>
+    <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
+      </button>
+    </template>
+    <template v-slot:title>Terms of Service</template>
+    <template v-slot:body>
+      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+        With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+      </p>
+      <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+        The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+      </p>
+    </template>
+    <template #footer="props">
+      <button @click="props.hide()" type="button" class="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">
+        I accept
+      </button>
+      <button @click="props.hide()" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
+        Decline
+      </button>
+    </template>
+  </Modal>
 </template>
 ```
 
-<ModalExample />
+### Slot Properties 
+
+Modal slots recieve 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)
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index aa38a79..28b10d0 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -1,37 +1,36 @@
 <template>
-  <div id="defaultModal" tabindex="-1" aria-hidden="true" class="hidden 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">
-    <div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
-      <!-- Modal content -->
-      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
-        <!-- Modal header -->
-        <div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
-          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
-            Terms of Service
-          </h3>
-          <button 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" data-modal-toggle="defaultModal">
-            <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>
-          </button>
-        </div>
-        <!-- Modal body -->
-        <div class="p-6 space-y-6">
-          <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-            With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
-          </p>
-          <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-            The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
-          </p>
-        </div>
-        <!-- Modal footer -->
-        <div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
-          <button data-modal-toggle="defaultModal" type="button" class="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">I accept</button>
-          <button data-modal-toggle="defaultModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
+  <div>
+    <slot name="trigger" :show="showModal" :hide="hideModal" :toggle="toggleModal"></slot>
+    <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" id="defaultModal" 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">
+        <!-- Modal content -->
+        <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+          <!-- Modal header -->
+          <div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
+            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+              <slot name="title"></slot>
+            </h3>
+            <button @click="hideModal" 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">
+              <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>
+            </button>
+          </div>
+          <!-- Modal body -->
+          <div class="p-6 space-y-6">
+            <slot name="body" :show="showModal" :hide="hideModal" :toggle="toggleModal"></slot>
+          </div>
+          <!-- Modal footer -->
+          <div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
+            <slot name="footer"  :show="showModal" :hide="hideModal" :toggle="toggleModal"/>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import type { PropType } from 'vue'
+import { ref } from 'vue'
+import type { Ref } from 'vue'
 
 const props = defineProps({
   children: {
@@ -58,4 +57,16 @@ const props = defineProps({
   },
 })
 
+const isHidden: Ref<boolean> = ref(!props.show)
+
+function toggleModal() {
+  isHidden.value = !isHidden.value
+}
+function hideModal() {
+  isHidden.value = !isHidden.value
+}
+function showModal() {
+  isHidden.value = !isHidden.value
+}
+
 </script>

From 8a3071cb46b493ceb04b5d39d9e5825788bf6fa9 Mon Sep 17 00:00:00 2001
From: Dmitri <19738862+Dmitri-2@users.noreply.github.com>
Date: Wed, 31 Aug 2022 10:31:32 -0700
Subject: [PATCH 2/6] Update modal functions

---
 src/components/Modal/Modal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index 28b10d0..c248f0c 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -63,10 +63,10 @@ function toggleModal() {
   isHidden.value = !isHidden.value
 }
 function hideModal() {
-  isHidden.value = !isHidden.value
+  isHidden.value = true
 }
 function showModal() {
-  isHidden.value = !isHidden.value
+  isHidden.value = false
 }
 
 </script>

From 8d3390c44099237df28b75bd5576832cb483e40f Mon Sep 17 00:00:00 2001
From: Dmitri <19738862+Dmitri-2@users.noreply.github.com>
Date: Thu, 1 Sep 2022 02:54:29 -0700
Subject: [PATCH 3/6] Make title and footer conditional

---
 src/components/Modal/Modal.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index c248f0c..7e14112 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -2,12 +2,13 @@
   <div>
     <slot name="trigger" :show="showModal" :hide="hideModal" :toggle="toggleModal"></slot>
     <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" id="defaultModal" 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 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">
         <!-- Modal content -->
         <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
           <!-- Modal header -->
-          <div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
+          <div class="flex justify-between items-start p-4 rounded-t dark:border-gray-600"
+               :class="$slots.title ? 'border-b' : ''">
             <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
               <slot name="title"></slot>
             </h3>
@@ -16,11 +17,11 @@
             </button>
           </div>
           <!-- Modal body -->
-          <div class="p-6 space-y-6">
+          <div class="p-6 space-y-6" :class="$slots.title ? '' : 'pt-0'">
             <slot name="body" :show="showModal" :hide="hideModal" :toggle="toggleModal"></slot>
           </div>
           <!-- Modal footer -->
-          <div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
+          <div v-if="$slots.footer" class="flex items-center p-6 space-x-2 rounded-b border-gray-200 dark:border-gray-600">
             <slot name="footer"  :show="showModal" :hide="hideModal" :toggle="toggleModal"/>
           </div>
         </div>

From bf4880876e0d88b2e0cba4f0dbd26dd3f5e6b507 Mon Sep 17 00:00:00 2001
From: Dmitri <19738862+Dmitri-2@users.noreply.github.com>
Date: Thu, 8 Sep 2022 10:22:50 -0700
Subject: [PATCH 4/6] Update modal to have generic slots

---
 .../modal/examples/ModalExample.vue           | 27 ++++++++++++-----
 docs/components/modal/modal.md                | 29 ++++++++++++++-----
 src/components/Modal/Modal.vue                | 18 +++++-------
 3 files changed, 48 insertions(+), 26 deletions(-)

diff --git a/docs/components/modal/examples/ModalExample.vue b/docs/components/modal/examples/ModalExample.vue
index df2b134..c354d8f 100644
--- a/docs/components/modal/examples/ModalExample.vue
+++ b/docs/components/modal/examples/ModalExample.vue
@@ -6,7 +6,18 @@
           Show Modal
         </button>
       </template>
-      <template v-slot:title>Terms of Service</template>
+      <template #header="props">
+        <div class="flex justify-between">
+          <div class="flex items-center text-lg">
+            Terms of Service
+          </div>
+          <div>
+            <button @click="props.hide()" 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">
+              <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>
+            </button>
+          </div>
+        </div>
+      </template>
       <template v-slot:body>
         <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
           With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
@@ -16,12 +27,14 @@
         </p>
       </template>
       <template #footer="props">
-        <button @click="props.hide()" type="button" class="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">
-          I accept
-        </button>
-        <button @click="props.hide()" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
-          Decline
-        </button>
+        <div class="flex justify-between">
+          <button @click="props.hide()" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
+            Decline
+          </button>
+          <button @click="props.hide()" type="button" class="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">
+            I accept
+          </button>
+        </div>
       </template>
     </Modal>
   </div>
diff --git a/docs/components/modal/modal.md b/docs/components/modal/modal.md
index 38a79c0..cf3b674 100644
--- a/docs/components/modal/modal.md
+++ b/docs/components/modal/modal.md
@@ -18,7 +18,18 @@ import { Modal } from 'flowbite-vue'
         Show Modal
       </button>
     </template>
-    <template v-slot:title>Terms of Service</template>
+    <template #header="props">
+      <div class="flex justify-between">
+        <div class="flex items-center text-lg">
+          Terms of Service
+        </div>
+        <div>
+          <button @click="props.hide()" 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">
+            <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>
+          </button>
+        </div>
+      </div>
+    </template>
     <template v-slot:body>
       <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
         With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
@@ -28,12 +39,14 @@ import { Modal } from 'flowbite-vue'
       </p>
     </template>
     <template #footer="props">
-      <button @click="props.hide()" type="button" class="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">
-        I accept
-      </button>
-      <button @click="props.hide()" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
-        Decline
-      </button>
+      <div class="flex justify-between">
+        <button @click="props.hide()" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
+          Decline
+        </button>
+        <button @click="props.hide()" type="button" class="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">
+          I accept
+        </button>
+      </div>
     </template>
   </Modal>
 </template>
@@ -41,7 +54,7 @@ import { Modal } from 'flowbite-vue'
 
 ### Slot Properties 
 
-Modal slots recieve the following functions to interact with the modal:
+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)
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index 7e14112..e88f688 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -2,26 +2,22 @@
   <div>
     <slot name="trigger" :show="showModal" :hide="hideModal" :toggle="toggleModal"></slot>
     <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 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">
         <!-- Modal content -->
         <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
           <!-- Modal header -->
-          <div class="flex justify-between items-start p-4 rounded-t dark:border-gray-600"
-               :class="$slots.title ? 'border-b' : ''">
-            <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
-              <slot name="title"></slot>
-            </h3>
-            <button @click="hideModal" 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">
-              <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>
-            </button>
+          <div class="p-4 rounded-t"
+               :class="$slots.header ? 'border-b' : ''">
+            <slot name="header" :show="showModal" :hide="hideModal" :toggle="toggleModal"></slot>
           </div>
           <!-- Modal body -->
-          <div class="p-6 space-y-6" :class="$slots.title ? '' : 'pt-0'">
+          <div class="p-6" :class="$slots.header ? '' : 'pt-0'">
             <slot name="body" :show="showModal" :hide="hideModal" :toggle="toggleModal"></slot>
           </div>
           <!-- Modal footer -->
-          <div v-if="$slots.footer" class="flex items-center p-6 space-x-2 rounded-b border-gray-200 dark:border-gray-600">
+          <div v-if="$slots.footer" class="p-6 rounded-b border-gray-200">
             <slot name="footer"  :show="showModal" :hide="hideModal" :toggle="toggleModal"/>
           </div>
         </div>

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 5/6] 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() {

From 923645b4b3598402593a09152b0672b249483fb8 Mon Sep 17 00:00:00 2001
From: Dmitri <19738862+Dmitri-2@users.noreply.github.com>
Date: Sun, 2 Oct 2022 17:25:01 -0700
Subject: [PATCH 6/6] Address PR comments

---
 .../modal/examples/ModalExample.vue           | 10 ++++++----
 .../modal/examples/ModalSizeExample.vue       |  8 ++++----
 src/components/Modal/Modal.vue                | 19 +++++++++++--------
 src/components/Modal/types.ts                 |  2 ++
 4 files changed, 23 insertions(+), 16 deletions(-)
 create mode 100644 src/components/Modal/types.ts

diff --git a/docs/components/modal/examples/ModalExample.vue b/docs/components/modal/examples/ModalExample.vue
index c590f72..10886cf 100644
--- a/docs/components/modal/examples/ModalExample.vue
+++ b/docs/components/modal/examples/ModalExample.vue
@@ -39,8 +39,10 @@
     </Modal>
   </div>
 </template>
-<script setup>
-import { Modal } from '../../../../src/index';
+<script lang="ts" setup>
+import { Modal } from '../../../../src/index'
+import type { PropType } from 'vue'
+import type { ModalSize, ModalPosition } from '../../../../src/components/Modal/types'
 const props = defineProps({
   children: {
     type: Array,
@@ -53,7 +55,7 @@ const props = defineProps({
     default: false,
   },
   position: {
-    type: String, // 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right'
+    type: String as PropType<ModalPosition>,
     default: 'center',
   },
   show: {
@@ -61,7 +63,7 @@ const props = defineProps({
     default: false,
   },
   size: {
-    type: String, // 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'
+    type: String as PropType<ModalSize>,
     default: '2xl',
   },
   triggerText: {
diff --git a/docs/components/modal/examples/ModalSizeExample.vue b/docs/components/modal/examples/ModalSizeExample.vue
index 15c82b4..0120350 100644
--- a/docs/components/modal/examples/ModalSizeExample.vue
+++ b/docs/components/modal/examples/ModalSizeExample.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="vp-raw flex justify-between">
     <span>
-      <ModalExample size="xs" trigger-text="XS Modal"/>
+      <ModalExample size="xs" trigger-text="XS Modal" />
     </span>
     <span>
-      <ModalExample size="md" trigger-text="MD Modal"/>
+      <ModalExample size="md" trigger-text="MD Modal" />
     </span>
     <span>
-      <ModalExample size="xl" trigger-text="XL Modal"/>
+      <ModalExample size="xl" trigger-text="XL Modal" />
     </span>
     <span>
-      <ModalExample size="5xl" trigger-text="5XL Modal"/>
+      <ModalExample size="5xl" trigger-text="5XL Modal" />
     </span>
   </div>
 </template>
diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index da29f54..83cf819 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <slot name="trigger" :show="showModal" :hide="hideModal" :toggle="toggleModal"></slot>
-    <div v-if="!isHidden" class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"></div>
+    <slot name="trigger" :show="showModal" :hide="hideModal" :toggle="toggleModal"/>
+    <div v-if="!isHidden" class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"/>
     <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 h-full md:h-auto"
@@ -11,15 +11,15 @@
           <!-- Modal header -->
           <div class="p-4 rounded-t"
                :class="$slots.header ? 'border-b' : ''">
-            <slot name="header" :show="showModal" :hide="hideModal" :toggle="toggleModal"></slot>
+            <slot name="header" :show="showModal" :hide="hideModal" :toggle="toggleModal"/>
           </div>
           <!-- Modal body -->
           <div class="p-6" :class="$slots.header ? '' : 'pt-0'">
-            <slot name="body" :show="showModal" :hide="hideModal" :toggle="toggleModal"></slot>
+            <slot name="body" :show="showModal" :hide="hideModal" :toggle="toggleModal"/>
           </div>
           <!-- Modal footer -->
           <div v-if="$slots.footer" class="p-6 rounded-b border-gray-200">
-            <slot name="footer"  :show="showModal" :hide="hideModal" :toggle="toggleModal"/>
+            <slot name="footer" :show="showModal" :hide="hideModal" :toggle="toggleModal"/>
           </div>
         </div>
       </div>
@@ -28,7 +28,8 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue'
-import type { Ref } from 'vue'
+import type { PropType, Ref } from 'vue'
+import type { ModalSize, ModalPosition } from './types'
 
 const props = defineProps({
   children: {
@@ -42,7 +43,7 @@ const props = defineProps({
     default: false,
   },
   position: {
-    type: String, // 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right'
+    type: String as PropType<ModalPosition>,
     default: 'center',
   },
   show: {
@@ -50,7 +51,7 @@ const props = defineProps({
     default: false,
   },
   size: {
-    type: String, // 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'
+    type: String as PropType<ModalSize>,
     default: '2xl',
   },
 })
@@ -74,9 +75,11 @@ const isHidden: Ref<boolean> = ref(!props.show)
 function toggleModal() {
   isHidden.value = !isHidden.value
 }
+
 function hideModal() {
   isHidden.value = true
 }
+
 function showModal() {
   isHidden.value = false
 }
diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts
new file mode 100644
index 0000000..8e49a60
--- /dev/null
+++ b/src/components/Modal/types.ts
@@ -0,0 +1,2 @@
+export type ModalPosition = 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';
\ No newline at end of file