From a22d1b6d9495f4bab2766b8535b01eec7dbe0453 Mon Sep 17 00:00:00 2001
From: Selemondev <selemondev@Selemondevs-MacBook-Pro.local>
Date: Sun, 10 Sep 2023 11:02:40 +0300
Subject: [PATCH] fix(app): modal TransitionChild component binding error

This pull request is intended to fix the transition binding to the TransitionChild component from @headlessui/vue
---
 packages/nuxt-ui-vue/src/App.vue                   | 14 ++++++++------
 .../src/components/overlays/Modal/UModal.vue       |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/nuxt-ui-vue/src/App.vue b/packages/nuxt-ui-vue/src/App.vue
index c4f92d0..d0a57dd 100755
--- a/packages/nuxt-ui-vue/src/App.vue
+++ b/packages/nuxt-ui-vue/src/App.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+
+const isOpen = ref(false)
 </script>
 
 <template>
-  <div class="grid place-items-center w-full min-h-screen">
-    <UButtonGroup size="sm" orientation="horizontal">
-      <UButton icon="ph:music-notes" label="Music" />
-      <UButton icon="ph:music-notes" label="Music" color="red" />
-      <UButton icon="ph:music-notes" label="Music" color="red" />
-    </UButtonGroup>
+  <div class="grid place-items-center min-h-screen w-full">
+    <UButton label="Open" @click="isOpen = true" />
+    <UModal v-model="isOpen" fullscreen>
+      <!-- Content -->
+    </UModal>
   </div>
 </template>
diff --git a/packages/nuxt-ui-vue/src/components/overlays/Modal/UModal.vue b/packages/nuxt-ui-vue/src/components/overlays/Modal/UModal.vue
index bb2361d..4b5c5ff 100755
--- a/packages/nuxt-ui-vue/src/components/overlays/Modal/UModal.vue
+++ b/packages/nuxt-ui-vue/src/components/overlays/Modal/UModal.vue
@@ -109,7 +109,7 @@ export default defineComponent({
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
     <HDialog :class="wrapperClass" v-bind="attrsOmitted" @close="(e) => !preventClose && close(e)">
-      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="overlayTransitions">
+      <TransitionChild v-if="overlay" as="template" :appear="appear" :bind="overlayTransitions">
         <div :class="[variant.overlayBase, variant.overlayBackground]" />
       </TransitionChild>