refactor: keep local state for open value, so it can be modified internally

Author: JosephAnson

src/runtime/components/Modal.vue

@@ -5,7 +5,6 @@ import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/modal'
 import type { ButtonProps } from '../types'
 import type { EmitsToProps, ComponentConfig } from '../types/utils'
-import ModalContext from './ModalContext.vue'
 
 type Modal = ComponentConfig<typeof theme, AppConfig, 'modal'>
 
@@ -59,6 +58,7 @@ export interface ModalEmits extends DialogRootEmits {
   'after:leave': []
   'after:enter': []
   'close:prevent': []
+  'close': []
 }
 
 export interface ModalSlots {
@@ -74,8 +74,8 @@ export interface ModalSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, toRef } from 'vue'
-import { reactivePick } from '@vueuse/core'
+import { computed, toRef, watch } from 'vue'
+import { reactivePick, useVModel } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useLocale } from '../composables/useLocale'
 import { usePortal } from '../composables/usePortal'
@@ -96,7 +96,9 @@ const slots = defineSlots<ModalSlots>()
 const { t } = useLocale()
 const appConfig = useAppConfig() as Modal['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
+const open = useVModel(props, 'open', emits, { passive: true })
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'modal'), emits)
+
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => props.content)
 const contentEvents = computed(() => {
@@ -123,77 +125,80 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
   transition: props.transition,
   fullscreen: props.fullscreen
 }))
+
+function closeModal() {
+  open.value = false
+  emits('close')
+}
 </script>
 
 <template>
-  <DialogRoot v-slot="{ open }" v-bind="rootProps">
-    <ModalContext v-slot="{ onOpenChange }">
-      <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
-        <slot :open="open" />
-      </DialogTrigger>
-
-      <DialogPortal v-bind="portalProps">
-        <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
-
-        <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-enter="emits('after:enter')" @after-leave="emits('after:leave')" v-on="contentEvents">
-          <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
-            <DialogTitle v-if="title || !!slots.title">
-              <slot name="title" :close="() => onOpenChange(false)">
-                {{ title }}
-              </slot>
-            </DialogTitle>
-
-            <DialogDescription v-if="description || !!slots.description">
-              <slot name="description" :close="() => onOpenChange(false)">
-                {{ description }}
-              </slot>
-            </DialogDescription>
-          </VisuallyHidden>
-
-          <slot name="content" :close="() => onOpenChange(false)">
-            <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
-              <slot name="header" :close="() => onOpenChange(false)">
-                <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-                  <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
-                    <slot name="title" :close="() => onOpenChange(false)">
-                      {{ title }}
-                    </slot>
-                  </DialogTitle>
-
-                  <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
-                    <slot name="description" :close="() => onOpenChange(false)">
-                      {{ description }}
-                    </slot>
-                  </DialogDescription>
-                </div>
-
-                <DialogClose v-if="close || !!slots.close" as-child>
-                  <slot name="close" :ui="ui">
-                    <UButton
-                      v-if="close"
-                      :icon="closeIcon || appConfig.ui.icons.close"
-                      size="md"
-                      color="neutral"
-                      variant="ghost"
-                      :aria-label="t('modal.close')"
-                      v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
-                      :class="ui.close({ class: props.ui?.close })"
-                    />
+  <DialogRoot v-model:open="open" v-bind="rootProps">
+    <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open" />
+    </DialogTrigger>
+
+    <DialogPortal v-bind="portalProps">
+      <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
+
+      <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-enter="emits('after:enter')" @after-leave="emits('after:leave')" v-on="contentEvents">
+        <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
+          <DialogTitle v-if="title || !!slots.title">
+            <slot name="title" :close="closeModal">
+              {{ title }}
+            </slot>
+          </DialogTitle>
+
+          <DialogDescription v-if="description || !!slots.description">
+            <slot name="description" :close="closeModal">
+              {{ description }}
+            </slot>
+          </DialogDescription>
+        </VisuallyHidden>
+
+        <slot name="content" :close="closeModal">
+          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
+            <slot name="header" :close="closeModal">
+              <div :class="ui.wrapper({ class: props.ui?.wrapper })">
+                <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
+                  <slot name="title" :close="closeModal">
+                    {{ title }}
+                  </slot>
+                </DialogTitle>
+
+                <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+                  <slot name="description" :close="closeModal">
+                    {{ description }}
                   </slot>
-                </DialogClose>
-              </slot>
-            </div>
-
-            <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
-              <slot name="body" :close="() => onOpenChange(false)" />
-            </div>
-
-            <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
-              <slot name="footer" :close="() => onOpenChange(false)" />
-            </div>
-          </slot>
-        </DialogContent>
-      </DialogPortal>
-    </ModalContext>
+                </DialogDescription>
+              </div>
+
+              <DialogClose v-if="close || !!slots.close" as-child>
+                <slot name="close" :ui="ui">
+                  <UButton
+                    v-if="close"
+                    :icon="closeIcon || appConfig.ui.icons.close"
+                    size="md"
+                    color="neutral"
+                    variant="ghost"
+                    :aria-label="t('modal.close')"
+                    v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
+                    :class="ui.close({ class: props.ui?.close })"
+                  />
+                </slot>
+              </DialogClose>
+            </slot>
+          </div>
+
+          <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
+            <slot name="body" :close="closeModal" />
+          </div>
+
+          <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
+            <slot name="footer" :close="closeModal" />
+          </div>
+        </slot>
+      </DialogContent>
+    </DialogPortal>
   </DialogRoot>
 </template>