From 2f83c18c78f6950b16d8c7f3ba4d7a3f29d3a2f8 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 17 Nov 2021 18:19:15 +0100
Subject: [PATCH] chore(Modal): refactor component with headlessui

---
 example/app.vue                   |  34 ++++-
 src/components/overlays/Modal.vue | 240 +++++++++++-------------------
 2 files changed, 120 insertions(+), 154 deletions(-)

diff --git a/example/app.vue b/example/app.vue
index 21857c86..d94496b4 100644
--- a/example/app.vue
+++ b/example/app.vue
@@ -1,8 +1,36 @@
 <template>
-  <div class="mx-auto max-w-80em">
+  <div class="mx-auto max-w-7xl flex flex-col">
     Welcome
-    <NuButton class="ml-3" variant="primary" icon="heroicons-outline:check-circle">
+    <UButton class="ml-3" variant="primary" icon="mdi:bed-single">
       toto
-    </NuButton>
+    </UButton>
+
+    <UIcon name="mdi:bullhorn" class="w-4 h-4 text-black" />
+
+    <UAvatar class="ml-3" src="https://picsum.photos/200/300" />
+
+    <UButton @click="toggleModalIsOpen()">
+      Toggle modal!
+    </UButton>
+
+    {{ isModalOpen }}
+
+    <UModal v-model="isModalOpen" title="Modal">
+      Body
+    </UModal>
+
+    <!-- <UPopover v-slot="{ open }">
+      <UButton trailing variant="white" :icon="open ? 'heroicons-outline:chevron-up' : 'heroicons-outline:chevron-down'">
+        toto
+      </UButton>
+    </UPopover> -->
   </div>
 </template>
+
+<script setup>
+const isModalOpen = ref(false)
+
+function toggleModalIsOpen () {
+  isModalOpen.value = !isModalOpen.value
+}
+</script>
diff --git a/src/components/overlays/Modal.vue b/src/components/overlays/Modal.vue
index 4e722034..b5590ad6 100644
--- a/src/components/overlays/Modal.vue
+++ b/src/components/overlays/Modal.vue
@@ -1,179 +1,117 @@
 <template>
-  <div v-if="showModal" class="fixed inset-0 z-50 overflow-hidden modal">
-    <div class="flex items-start justify-center min-h-screen">
-      <transition
-        appear
-        enter-class="opacity-0"
-        enter-active-class="duration-300 ease-out"
-        enter-to-class="opacity-100"
-        leave-class="opacity-100"
-        leave-active-class="duration-200 ease-in"
-        leave-to-class="opacity-0"
-        @before-leave="backdropLeaving = true"
-        @after-leave="backdropLeaving = false"
-      >
-        <div v-if="showBackdrop" class="fixed inset-0 transition-opacity bg-gray-800 sm:bg-opacity-75" @click="open = false" />
-      </transition>
+  <TransitionRoot :show="isOpen" as="template">
+    <Dialog @close="setIsOpen">
+      <div class="fixed z-10 inset-0 overflow-y-auto">
+        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+          <TransitionChild
+            as="template"
+            enter="ease-out duration-300"
+            enter-from="opacity-0"
+            enter-to="opacity-75"
+            leave="ease-in duration-200"
+            leave-from="opacity-75"
+            leave-to="opacity-0"
+            entered="opacity-75"
+          >
+            <DialogOverlay class="fixed inset-0 bg-gray-500 transition-opacity" />
+          </TransitionChild>
 
-      <transition
-        appear
-        enter-class="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
-        enter-active-class="duration-300 ease-out"
-        enter-to-class="translate-y-0 opacity-100 sm:scale-100"
-        leave-class="translate-y-0 opacity-100 sm:scale-100"
-        leave-active-class="duration-200 ease-in"
-        leave-to-class="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
-        @before-leave="contentLeaving = true"
-        @after-leave="contentLeaving = false"
-      >
-        <Card
-          v-if="showContent"
-          v-bind="$attrs"
-          class="z-50 flex flex-col flex-1 w-screen h-screen mx-auto overflow-hidden shadow-xl"
-          :class="modalClass"
-          variant="white"
-          ring-class="sm:ring-1 ring-transparent dark:ring-gray-700"
-          aria-modal="true"
-        >
-          <template v-if="$slots.header" #header>
-            <slot name="header" />
-          </template>
-          <template v-else-if="title" #header>
-            <div class="flex items-center justify-between">
-              <h2 class="font-medium sm:text-lg sm:leading-6 text-tw-gray-900">
-                {{ title }}
-              </h2>
-              <div class="flex items-center">
-                <button
-                  type="button"
-                  aria-label="Close panel"
-                  class="rounded-md text-tw-gray-400 hover:text-tw-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500"
-                  @click="open = false"
-                >
-                  <Icon name="outline/x" class="w-6 h-6" />
-                </button>
-              </div>
-            </div>
-          </template>
-          <slot />
-          <template v-if="$slots.footer" #footer>
-            <slot name="footer" />
-          </template>
-        </Card>
-      </transition>
-    </div>
-  </div>
+          <TransitionChild
+            enter="ease-out transform duration-300"
+            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enter-to="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in transform duration-200"
+            leave-from="opacity-100 translate-y-0 sm:scale-100"
+            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <!-- This element is to trick the browser into centering the modal contents. -->
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+              &#8203;
+            </span>
+
+            <Card
+              class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+              v-bind="$attrs"
+              variant="white"
+              ring-class="sm:ring-1 sm:ring-transparent dark:ring-gray-700"
+            >
+              <template v-if="$slots.header" #header>
+                <slot name="header" />
+              </template>
+              <template v-else-if="title" #header>
+                <div class="flex items-center justify-between">
+                  <h2 class="font-medium sm:text-lg sm:leading-6 text-tw-gray-900">
+                    {{ title }}
+                  </h2>
+                  <div class="flex items-center">
+                    <button
+                      type="button"
+                      aria-label="Close panel"
+                      class="rounded-md text-tw-gray-400 hover:text-tw-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500"
+                      @click="isOpen = false"
+                    >
+                      <Icon name="heroicons-outline:x" class="w-6 h-6" />
+                    </button>
+                  </div>
+                </div>
+              </template>
+              <slot />
+              <template v-if="$slots.footer" #footer>
+                <slot name="footer" />
+              </template>
+            </Card>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
 </template>
 
 <script>
-import Icon from '../elements/Icon'
+import { Dialog, DialogOverlay, TransitionRoot, TransitionChild } from '@headlessui/vue'
+
 import Card from '../layout/Card'
+import Icon from '../elements/Icon'
 
 export default {
   components: {
-    Icon,
-    Card
+    Dialog,
+    DialogOverlay,
+    TransitionRoot,
+    TransitionChild,
+    Card,
+    Icon
   },
   props: {
-    value: {
+    modelValue: {
       type: Boolean,
       default: false
     },
     title: {
       type: String,
       default: null
-    },
-    fullscreen: {
-      type: Boolean,
-      default: false
-    },
-    baseClass: {
-      type: String,
-      default: 'sm:my-20 sm:max-w-xl sm:h-auto'
     }
   },
-  data () {
-    return {
-      showModal: false,
-      showBackdrop: false,
-      showContent: false,
-      backdropLeaving: false,
-      contentLeaving: false
-    }
-  },
-  head () {
-    if (this.open) {
-      return {
-        bodyAttrs: {
-          class: ['overflow-hidden']
-        },
-        htmlAttrs: {
-          style: ['touch-action: none;']
-        }
-      }
-    }
-
-    return undefined
-  },
-  computed: {
-    modalClass () {
-      return this.fullscreen ? 'sm:m-10 sm:h-[calc(100vh-5rem)]' : this.baseClass
-    },
-    leaving () {
-      return this.backdropLeaving || this.contentLeaving
-    },
-    open: {
+  emits: ['update:modelValue'],
+  setup (props, { emit }) {
+    const isOpen = computed({
       get () {
-        return this.value
+        return props.modelValue
       },
-      set (open) {
-        this.$emit('input', open)
+      set (value) {
+        emit('update:modelValue', value)
       }
-    }
-  },
-  watch: {
-    open: {
-      handler (newValue) {
-        if (newValue) {
-          this.show()
-        } else {
-          this.close()
-        }
+    })
+
+    return {
+      isOpen,
+      setIsOpen (value) {
+        isOpen.value = value
       },
-      immediate: true
-    },
-    leaving (newValue) {
-      if (newValue === false) {
-        this.showModal = false
-        this.open = false
+      toggleIsOpen () {
+        isOpen.value = !isOpen.value
       }
     }
-  },
-  shortcuts: {
-    disabled () {
-      return !this.open
-    },
-    esc: 'esc'
-  },
-  methods: {
-    show () {
-      this.showModal = true
-      this.showBackdrop = true
-      this.showContent = true
-    },
-    close () {
-      this.showBackdrop = false
-      this.showContent = false
-    },
-    esc () {
-      this.$listeners.close ? this.$listeners.close() : this.close()
-    }
   }
 }
 </script>
-
-<style scoped>
-.modal {
-  padding: env(safe-area-inset-top) 0 0 env(safe-area-inset-left);
-}
-</style>