@aerogel/core 0.1.1-next.7fce7b4ce55cfb9c329a7746f571015aedc8e3bd → 0.1.1-next.97f5cf5c97f16ab8a0ef63b82aaab049a0f9e15b

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.1.1-next.7fce7b4ce55cfb9c329a7746f571015aedc8e3bd",
+    "version": "0.1.1-next.97f5cf5c97f16ab8a0ef63b82aaab049a0f9e15b",
     "type": "module",
     "sideEffects": false,
     "exports": {

package/src/components/AppOverlays.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script setup lang="ts">
-import { ModalsPortal } from '@noeldemartin/vue-modals';
+import { ModalsPortal } from '@aerogel/core/ui/modals';
 
 import AppToasts from './AppToasts.vue';
 </script>

package/src/components/headless/HeadlessModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <DialogRoot :ref="forwardRef" open @update:open="persistent || close()">
+    <DialogRoot :ref="forwardRef" open @update:open="persistent || $event || close()">
         <DialogPortal>
             <slot :close />
         </DialogPortal>
@@ -7,18 +7,17 @@
 </template>
 
 <script setup lang="ts" generic="T = void">
-import { after } from '@noeldemartin/utils';
 import { DialogPortal, DialogRoot, useForwardExpose } from 'reka-ui';
 import { provide, ref } from 'vue';
-import { useModal } from '@noeldemartin/vue-modals';
 import type { DialogContent } from 'reka-ui';
 import type { Nullable } from '@noeldemartin/utils';
 
+import { useModal } from '@aerogel/core/ui/modals';
 import type { AcceptRefs } from '@aerogel/core/utils/vue';
 import type { ModalExpose, ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
 
 const $content = ref<Nullable<InstanceType<typeof DialogContent>>>(null);
-const modal = useModal<T>({ removeOnClose: false });
+const { close } = useModal<T>();
 
 defineProps<ModalProps>();
 defineSlots<ModalSlots<T>>();
@@ -27,12 +26,4 @@ defineExpose<AcceptRefs<ModalExpose>>({ $content });
 const { forwardRef } = useForwardExpose();
 
 provide('$modalContentRef', $content);
-
-async function close(result?: T) {
-    modal.close(result);
-
-    await after(1000);
-
-    modal.remove();
-}
 </script>

package/src/components/headless/HeadlessModalContent.vue

@@ -9,9 +9,9 @@
 <script setup lang="ts">
 import { useTemplateRef, watchEffect } from 'vue';
 import { DialogContent } from 'reka-ui';
-import { ModalComponent, useModal } from '@noeldemartin/vue-modals';
 import type { Ref } from 'vue';
 
+import { ModalComponent, useModal } from '@aerogel/core/ui/modals';
 import { injectOrFail } from '@aerogel/core/utils/vue';
 import type { ModalContentInstance } from '@aerogel/core/components/contracts/Modal';
 

package/src/components/ui/Modal.vue

@@ -58,8 +58,6 @@ import IconClose from '~icons/zondicons/close';
 
 import { useForwardExpose } from 'reka-ui';
 import { computed, onMounted } from 'vue';
-import { injectModal, modals, useModal } from '@noeldemartin/vue-modals';
-import type { ModalController } from '@noeldemartin/vue-modals';
 import type { ComponentPublicInstance, HTMLAttributes, Ref } from 'vue';
 import { type Nullable, after } from '@noeldemartin/utils';
 
@@ -71,6 +69,8 @@ import HeadlessModalOverlay from '@aerogel/core/components/headless/HeadlessModa
 import HeadlessModalTitle from '@aerogel/core/components/headless/HeadlessModalTitle.vue';
 import { classes } from '@aerogel/core/utils/classes';
 import { reactiveSet } from '@aerogel/core/utils';
+import { injectModal, modals, useModal } from '@aerogel/core/ui/modals';
+import type { ModalController } from '@aerogel/core/ui/modals';
 import type { AcceptRefs } from '@aerogel/core/utils/vue';
 import type { ModalExpose, ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
 

package/src/ui/UI.ts

@@ -1,11 +1,11 @@
 import { after, facade, fail, isDevelopment, uuid } from '@noeldemartin/utils';
 import { markRaw, unref } from 'vue';
-import { closeModal, createModal, modals, showModal } from '@noeldemartin/vue-modals';
 import type { Constructor } from '@noeldemartin/utils';
 import type { Component, ComputedOptions, MethodOptions } from 'vue';
-import type { GetModalProps, GetModalResponse } from '@noeldemartin/vue-modals';
 
 import Events from '@aerogel/core/services/Events';
+import { closeModal, createModal, modals, showModal } from '@aerogel/core/ui/modals';
+import type { GetModalProps, GetModalResponse } from '@aerogel/core/ui/modals';
 import type { AcceptRefs } from '@aerogel/core/utils';
 import type { AlertModalExpose, AlertModalProps } from '@aerogel/core/components/contracts/AlertModal';
 import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';

package/src/ui/index.ts

@@ -14,10 +14,10 @@ import type { Component } from 'vue';
 
 const services = { $ui: UI };
 
+export * from './modals';
 export * from './UI';
 export * from './utils';
 export { default as UI } from './UI';
-export { useModal } from '@noeldemartin/vue-modals';
 
 export type UIServices = typeof services;
 

package/src/ui/modals.ts

@@ -0,0 +1,36 @@
+import { after } from '@noeldemartin/utils';
+import { injectModal, useModal as useModalBase } from '@noeldemartin/vue-modals';
+
+export {
+    createModal,
+    showModal,
+    injectModal,
+    closeModal,
+    modals,
+    ModalComponent,
+    ModalsPortal,
+    type GetModalProps,
+    type GetModalResponse,
+    type ModalController,
+} from '@noeldemartin/vue-modals';
+
+const instances = new WeakSet();
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useModal<T = never>() {
+    const instance = injectModal<T>();
+    const { close, remove, ...modal } = useModalBase<T>(instances.has(instance) ? {} : { removeOnClose: false });
+
+    instances.add(instance);
+
+    return {
+        ...modal,
+        async close(result?: T) {
+            close(result);
+
+            await after(1000);
+
+            remove();
+        },
+    };
+}