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] 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>