@aerogel/core 0.1.1-next.97f5cf5c97f16ab8a0ef63b82aaab049a0f9e15b → 0.1.1-next.9bd06e629f34098543a54bdb87e8996767876d42

package/package.json

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

package/src/components/AppOverlays.vue

@@ -4,7 +4,7 @@
 </template>
 
 <script setup lang="ts">
-import { ModalsPortal } from '@aerogel/core/ui/modals';
+import { ModalsPortal } from '@noeldemartin/vue-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 || $event || close()">
+    <DialogRoot :ref="forwardRef" open @update:open="persistent || close()">
         <DialogPortal>
             <slot :close />
         </DialogPortal>
@@ -7,17 +7,18 @@
 </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 { close } = useModal<T>();
+const modal = useModal<T>({ removeOnClose: false });
 
 defineProps<ModalProps>();
 defineSlots<ModalSlots<T>>();
@@ -26,4 +27,12 @@ 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,6 +58,8 @@ 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';
 
@@ -69,8 +71,6 @@ 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,20 @@ 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,
+    createModal,
+    showModal,
+    closeModal,
+    modals,
+    ModalComponent,
+    ModalsPortal,
+    type GetModalProps,
+    type GetModalResponse,
+} from '@noeldemartin/vue-modals';
 
 export type UIServices = typeof services;
 

package/src/ui/modals.ts

@@ -1,36 +0,0 @@
-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();
-        },
-    };
-}