@aerogel/core 0.1.1-next.b25730fd2850ebabef064973972dabd342d92769 → 0.1.1-next.f40b19c2bd8a3c0f252f1811ed740ce17bb6f699

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.1.1-next.b25730fd2850ebabef064973972dabd342d92769",
+    "version": "0.1.1-next.f40b19c2bd8a3c0f252f1811ed740ce17bb6f699",
     "type": "module",
     "sideEffects": false,
     "exports": {
@@ -29,7 +29,8 @@
         "vue": "^3.5.0"
     },
     "dependencies": {
-        "@noeldemartin/utils": "^0.7.1",
+        "@noeldemartin/utils": "0.7.1-next.5f7bc66cad4aaa2dce4a2314e99d562ff3ab993b",
+        "@noeldemartin/vue-modals": "0.0.0-next.124c6a1c5e8a2cef4ec43d6a01de0fc450f155b1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dompurify": "^3.2.4",

package/src/components/AppOverlays.vue

@@ -1,9 +1,10 @@
 <template>
-    <AppModals />
+    <ModalsPortal nested />
     <AppToasts />
 </template>
 
 <script setup lang="ts">
-import AppModals from './AppModals.vue';
+import { ModalsPortal } from '@aerogel/core/ui/modals';
+
 import AppToasts from './AppToasts.vue';
 </script>

package/src/components/contracts/AlertModal.ts

@@ -8,7 +8,7 @@ export interface AlertModalProps {
     message: string;
 }
 
-export interface AlertModalExpose extends ModalExpose<void> {}
+export interface AlertModalExpose extends ModalExpose {}
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function useAlertModal(props: AlertModalProps) {

package/src/components/contracts/Button.ts

@@ -1,7 +1,7 @@
 import type { PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 
-export type ButtonVariant = 'default' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'link';
+export type ButtonVariant = 'default' | 'secondary' | 'danger' | 'warning' | 'ghost' | 'outline' | 'link';
 export type ButtonSize = 'default' | 'small' | 'large' | 'icon';
 export interface ButtonProps extends PrimitiveProps {
     class?: HTMLAttributes['class'];

package/src/components/contracts/ConfirmModal.ts

@@ -4,10 +4,11 @@ import { translateWithDefault } from '@aerogel/core/lang';
 import { useForm } from '@aerogel/core/utils/composition/forms';
 import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
 import type { FormFieldDefinition } from '@aerogel/core/forms/FormController';
-import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
 import type { Nullable } from '@noeldemartin/utils';
+import type { ModalEmits, ModalExpose } from '@aerogel/core/components/contracts/Modal';
 
 export type ConfirmModalCheckboxes = Record<string, { label: string; default?: boolean; required?: boolean }>;
+export type ConfirmModalResult = boolean | [boolean, Record<string, Nullable<boolean>>];
 
 export interface ConfirmModalProps {
     title?: string;
@@ -21,7 +22,9 @@ export interface ConfirmModalProps {
     required?: boolean;
 }
 
-export interface ConfirmModalExpose extends ModalExpose<boolean | [boolean, Record<string, Nullable<boolean>>]> {}
+export interface ConfirmModalExpose extends ModalExpose {}
+
+export interface ConfirmModalEmits extends ModalEmits<ConfirmModalResult> {}
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function useConfirmModal(props: ConfirmModalProps) {

package/src/components/contracts/Modal.ts

@@ -5,17 +5,22 @@ export type ModalContentInstance = Nullable<InstanceType<typeof DialogContent>>;
 
 export interface ModalProps {
     persistent?: boolean;
+    fullscreen?: boolean;
+    fullscreenMobile?: boolean;
     title?: string;
     titleHidden?: boolean;
     description?: string;
     descriptionHidden?: boolean;
 }
 
-export interface ModalSlots<Result = void> {
+export interface ModalSlots<Result = never> {
     default(props: { close(result?: Result): Promise<void> }): unknown;
 }
 
-export interface ModalExpose<Result = void> {
-    close(result?: Result): Promise<void>;
+export interface ModalExpose {
     $content: ModalContentInstance;
 }
+
+export interface ModalEmits<Result = never> {
+    (event: 'close', payload: Result): void;
+}

package/src/components/contracts/PromptModal.ts

@@ -4,7 +4,9 @@ import { useForm } from '@aerogel/core/utils/composition/forms';
 import { requiredStringInput } from '@aerogel/core/forms/utils';
 import { translateWithDefault } from '@aerogel/core/lang';
 import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
-import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
+import type { ModalEmits, ModalExpose } from '@aerogel/core/components/contracts/Modal';
+
+export type PromptModalResult = string;
 
 export interface PromptModalProps {
     title?: string;
@@ -18,7 +20,9 @@ export interface PromptModalProps {
     cancelVariant?: ButtonVariant;
 }
 
-export interface PromptModalExpose extends ModalExpose<string> {}
+export interface PromptModalExpose extends ModalExpose {}
+
+export interface PromptModalEmits extends ModalEmits<PromptModalResult> {}
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function usePromptModal(props: PromptModalProps) {

package/src/components/contracts/Toast.ts

@@ -1,4 +1,4 @@
-export type ToastVariant = 'secondary' | 'danger';
+export type ToastVariant = 'secondary' | 'warning' | 'danger';
 
 export interface ToastAction {
     label: string;

package/src/components/headless/HeadlessInputInput.vue

@@ -19,6 +19,7 @@ import { computed, inject, useTemplateRef, watchEffect } from 'vue';
 
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
 import { onFormFocus } from '@aerogel/core/utils/composition/forms';
+import { LOCAL_TIMEZONE_OFFSET } from '@aerogel/core/utils';
 import type FormController from '@aerogel/core/forms/FormController';
 import type { FormFieldValue } from '@aerogel/core/forms/FormController';
 import type { InputExpose } from '@aerogel/core/components/contracts/Input';
@@ -39,7 +40,7 @@ const renderedType = computed(() => {
     return ['text', 'email', 'number', 'tel', 'url'].includes(fieldType) ? fieldType : 'text';
 });
 const checked = computed(() => {
-    if (type !== 'checkbox') {
+    if (renderedType.value !== 'checkbox') {
         return;
     }
 
@@ -59,11 +60,15 @@ function getValue(): FormFieldValue | null {
         return null;
     }
 
-    switch (type) {
+    switch (renderedType.value) {
         case 'checkbox':
             return $input.value.checked;
         case 'date':
-            return $input.value.valueAsDate;
+        case 'time':
+        case 'datetime-local':
+            return new Date(Math.round($input.value.valueAsNumber / 60000) * 60000 + LOCAL_TIMEZONE_OFFSET);
+        case 'number':
+            return $input.value.valueAsNumber;
         default:
             return $input.value.value;
     }
@@ -75,8 +80,11 @@ watchEffect(() => {
         return;
     }
 
-    if (type === 'date' && value.value instanceof Date) {
-        $input.value.valueAsDate = value.value;
+    if (['date', 'time', 'datetime-local'].includes(renderedType.value) && value.value instanceof Date) {
+        const roundedValue = Math.round(value.value.getTime() / 60000) * 60000;
+
+        $input.value.valueAsNumber = roundedValue - LOCAL_TIMEZONE_OFFSET;
+        input.update(new Date(roundedValue));
 
         return;
     }

package/src/components/headless/HeadlessModal.vue

@@ -1,57 +1,29 @@
 <template>
-    <DialogRoot :ref="forwardRef" open @update:open="persistent || close()">
+    <DialogRoot :ref="forwardRef" open @update:open="persistent || $event || close()">
         <DialogPortal>
-            <slot :close="close" />
+            <slot :close />
         </DialogPortal>
     </DialogRoot>
 </template>
 
 <script setup lang="ts" generic="T = void">
-import { provide, ref } from 'vue';
 import { DialogPortal, DialogRoot, useForwardExpose } from 'reka-ui';
+import { provide, ref } from 'vue';
 import type { DialogContent } from 'reka-ui';
 import type { Nullable } from '@noeldemartin/utils';
 
-import Events from '@aerogel/core/services/Events';
-import { useEvent } from '@aerogel/core/utils/composition/events';
-import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import { useModal } from '@aerogel/core/ui/modals';
 import type { AcceptRefs } from '@aerogel/core/utils/vue';
-import type { UIModalContext } from '@aerogel/core/ui/UI';
 import type { ModalExpose, ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
 
 const $content = ref<Nullable<InstanceType<typeof DialogContent>>>(null);
-const { modal } = injectReactiveOrFail<UIModalContext>(
-    'modal',
-    'could not obtain modal reference from <HeadlessModal>, ' +
-        'did you render this component manually? Show it using $ui.modal() instead',
-);
+const { close } = useModal<T>();
 
 defineProps<ModalProps>();
 defineSlots<ModalSlots<T>>();
-defineExpose<AcceptRefs<ModalExpose<T>>>({ close, $content });
+defineExpose<AcceptRefs<ModalExpose>>({ $content });
 
 const { forwardRef } = useForwardExpose();
-const closed = ref(false);
 
 provide('$modalContentRef', $content);
-
-useEvent('close-modal', async ({ id, result }) => {
-    if (id !== modal.id) {
-        return;
-    }
-
-    await close(result);
-});
-
-async function close(result?: unknown) {
-    if (closed.value) {
-        return;
-    }
-
-    await Events.emit('modal-will-close', { modal, result });
-
-    closed.value = true;
-
-    await Events.emit('modal-has-closed', { modal, result });
-}
 </script>

package/src/components/headless/HeadlessModalContent.vue

@@ -2,29 +2,22 @@
     <DialogContent ref="$contentRef">
         <slot />
 
-        <ModalContext v-if="childModal" :child-index="childIndex + 1" :modal="childModal" />
+        <ModalComponent :is="child" v-if="child" />
     </DialogContent>
 </template>
 
 <script setup lang="ts">
-import { computed, useTemplateRef, watchEffect } from 'vue';
+import { useTemplateRef, watchEffect } from 'vue';
 import { DialogContent } from 'reka-ui';
 import type { Ref } from 'vue';
 
-import ModalContext from '@aerogel/core/components/ui/ModalContext.vue';
-import UI from '@aerogel/core/ui/UI';
-import { injectOrFail, injectReactiveOrFail } from '@aerogel/core/utils/vue';
-import type { UIModalContext } from '@aerogel/core/ui/UI';
+import { ModalComponent, useModal } from '@aerogel/core/ui/modals';
+import { injectOrFail } from '@aerogel/core/utils/vue';
 import type { ModalContentInstance } from '@aerogel/core/components/contracts/Modal';
 
-const { childIndex = 0 } = injectReactiveOrFail<UIModalContext>(
-    'modal',
-    'could not obtain modal reference from <HeadlessModalContent>, ' +
-        'did you render this component manually? Show it using $ui.modal() instead',
-);
+const { child } = useModal();
 const $modalContentRef = injectOrFail<Ref<ModalContentInstance>>('$modalContentRef');
 const $content = useTemplateRef('$contentRef');
-const childModal = computed(() => UI.modals[childIndex] ?? null);
 
 watchEffect(() => ($modalContentRef.value = $content.value));
 </script>

package/src/components/index.ts

@@ -1,5 +1,4 @@
 export { default as AppLayout } from './AppLayout.vue';
-export { default as AppModals } from './AppModals.vue';
 export { default as AppOverlays } from './AppOverlays.vue';
 export { default as AppToasts } from './AppToasts.vue';
 

package/src/components/ui/AdvancedOptions.vue

@@ -1,18 +1,9 @@
 <template>
-    <details class="group">
-        <summary
-            class="-ml-2 flex w-[max-content] items-center rounded-lg py-2 pr-3 pl-1 hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700"
-        >
-            <IconCheveronRight class="size-6 transition-transform group-open:rotate-90" />
-            <span>{{ $td('ui.advancedOptions', 'Advanced options') }}</span>
-        </summary>
-
-        <div class="pt-2 pl-4">
-            <slot />
-        </div>
-    </details>
+    <Details :label="$td('ui.advancedOptions', 'Advanced options')">
+        <slot />
+    </Details>
 </template>
 
 <script setup lang="ts">
-import IconCheveronRight from '~icons/zondicons/cheveron-right';
+import Details from './Details.vue';
 </script>

package/src/components/ui/Button.vue

@@ -25,6 +25,7 @@ const renderedClasses = computed(() => variantClasses<Variants<Pick<ButtonProps,
                 default: 'bg-primary-600 text-white focus-visible:outline-primary-600',
                 secondary: 'bg-background text-gray-900 ring-gray-300',
                 danger: 'bg-red-600 text-white focus-visible:outline-red-600',
+                warning: 'bg-yellow-600 text-white focus-visible:outline-yellow-600',
                 ghost: 'bg-transparent',
                 outline: 'bg-transparent text-primary-600 ring-primary-600',
                 link: 'text-links',

package/src/components/ui/ConfirmModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- @vue-generic {import('@aerogel/core/ui/UI').ModalExposeResult<ConfirmModalExpose>} -->
+    <!-- @vue-generic {import('@aerogel/core/components/contracts/ConfirmModal').ConfirmModalResult} -->
     <Modal
         v-slot="{ close }"
         :title="renderedTitle"
@@ -41,10 +41,15 @@ import Markdown from '@aerogel/core/components/ui/Markdown.vue';
 import Button from '@aerogel/core/components/ui/Button.vue';
 import Modal from '@aerogel/core/components/ui/Modal.vue';
 import { useConfirmModal } from '@aerogel/core/components/contracts/ConfirmModal';
-import type { ConfirmModalExpose, ConfirmModalProps } from '@aerogel/core/components/contracts/ConfirmModal';
+import type {
+    ConfirmModalEmits,
+    ConfirmModalExpose,
+    ConfirmModalProps,
+} from '@aerogel/core/components/contracts/ConfirmModal';
 
 const { cancelVariant = 'secondary', ...props } = defineProps<ConfirmModalProps>();
 const { form, renderedTitle, titleHidden, renderedAcceptText, renderedCancelText } = useConfirmModal(props);
 
+defineEmits<ConfirmModalEmits>();
 defineExpose<ConfirmModalExpose>();
 </script>

package/src/components/ui/Details.vue

@@ -0,0 +1,20 @@
+<template>
+    <details class="group">
+        <summary
+            class="-ml-2 flex w-[max-content] items-center rounded-lg py-2 pr-3 pl-1 hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700"
+        >
+            <IconCheveronRight class="size-6 transition-transform group-open:rotate-90" />
+            <span>{{ label }}</span>
+        </summary>
+
+        <div class="pt-2 pl-4">
+            <slot />
+        </div>
+    </details>
+</template>
+
+<script setup lang="ts">
+import IconCheveronRight from '~icons/zondicons/cheveron-right';
+
+defineProps<{ label: string }>();
+</script>

package/src/components/ui/LoadingModal.vue

@@ -1,11 +1,10 @@
 <template>
     <Modal
         persistent
-        class="flex"
         wrapper-class="w-auto"
         :title="renderedTitle"
         :title-hidden
-        :class="{ 'flex-col-reverse': showProgress, 'items-center justify-center gap-2': !showProgress }"
+        :class="{ 'flex-col-reverse': showProgress, 'flex-row items-center justify-center gap-2': !showProgress }"
     >
         <ProgressBar
             v-if="showProgress"

package/src/components/ui/Modal.vue

@@ -7,14 +7,20 @@
         :persistent
     >
         <HeadlessModalOverlay
-            class="fixed inset-0 animate-[fade-in_var(--tw-duration)_ease-in-out] transition-opacity duration-300 will-change-[opacity]"
+            class="fixed inset-0 transition-opacity duration-300 will-change-[opacity]"
             :class="{
-                'bg-black/30': context.childIndex === 1,
-                'opacity-0': context.childIndex === 1 && context.modal.closing,
+                'animate-[fade-in_var(--tw-duration)_ease-in-out]': !hasRenderedModals,
+                'bg-black/30': firstVisibleModal?.id === id || (!firstVisibleModal && modals[0]?.id === id),
+                'opacity-0': !firstVisibleModal,
+                hidden: renderFullscreen,
             }"
         />
         <HeadlessModalContent v-bind="contentProps" :class="renderedWrapperClass">
-            <div v-if="!persistent && !closeHidden" class="absolute top-0 right-0 hidden pt-3.5 pr-2.5 sm:block">
+            <div
+                v-if="!persistent && !closeHidden"
+                class="absolute top-0 right-0 pt-3.5 pr-2.5"
+                :class="{ 'hidden sm:block': !renderFullscreen }"
+            >
                 <button
                     type="button"
                     class="clickable z-10 rounded-full p-2.5 text-gray-400 hover:text-gray-500"
@@ -52,14 +58,13 @@
     </HeadlessModal>
 </template>
 
-<script setup lang="ts" generic="T = void">
+<script lang="ts">
 import IconClose from '~icons/zondicons/close';
 
-import { after } from '@noeldemartin/utils';
-import { computed } from 'vue';
 import { useForwardExpose } from 'reka-ui';
+import { computed, onMounted } from 'vue';
 import type { ComponentPublicInstance, HTMLAttributes, Ref } from 'vue';
-import type { Nullable } from '@noeldemartin/utils';
+import { type Nullable, after } from '@noeldemartin/utils';
 
 import Markdown from '@aerogel/core/components/ui/Markdown.vue';
 import HeadlessModal from '@aerogel/core/components/headless/HeadlessModal.vue';
@@ -69,13 +74,17 @@ import HeadlessModalOverlay from '@aerogel/core/components/headless/HeadlessModa
 import HeadlessModalTitle from '@aerogel/core/components/headless/HeadlessModalTitle.vue';
 import UI from '@aerogel/core/ui/UI';
 import { classes } from '@aerogel/core/utils/classes';
-import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
-import { useEvent } from '@aerogel/core/utils/composition/events';
+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';
-import type { UIModalContext } from '@aerogel/core/ui/UI';
 
-type HeadlessModalInstance = ComponentPublicInstance & ModalExpose<T>;
+const renderedModals = reactiveSet<ModalController>();
+</script>
+
+<script setup lang="ts" generic="T = void">
+type HeadlessModalInstance = ComponentPublicInstance & ModalExpose;
 
 const {
     class: contentClass = '',
@@ -85,6 +94,8 @@ const {
     description,
     persistent,
     closeHidden,
+    fullscreen,
+    fullscreenMobile,
     ...props
 } = defineProps<
     ModalProps & {
@@ -95,37 +106,46 @@ const {
 >();
 
 defineSlots<ModalSlots<T>>();
-defineExpose<AcceptRefs<ModalExpose<T>>>({
-    close: async (result) => $modal.value?.close(result),
+defineExpose<AcceptRefs<ModalExpose>>({
     $content: computed(() => $modal.value?.$content),
 });
 
 const { forwardRef, currentRef } = useForwardExpose<HeadlessModalInstance>();
+const { id, visible } = useModal();
 const $modal = currentRef as Ref<Nullable<HeadlessModalInstance>>;
-const context = injectReactiveOrFail<UIModalContext>('modal');
-const inForeground = computed(() => !context.modal.closing && context.childIndex === UI.openModals.length);
+const modal = injectModal();
+const inForeground = computed(
+    () => visible.value && modals.value.toReversed().find((modal) => modal.visible.value)?.id === id.value,
+);
+const firstVisibleModal = computed(() => modals.value.find((modal) => modal.visible.value));
+const hasRenderedModals = computed(() => modals.value.some((modal) => renderedModals.has(modal)));
 const contentProps = computed(() => (description ? {} : { 'aria-describedby': undefined }));
 const renderedContentClass = computed(() =>
-    classes('max-h-[90vh] overflow-auto px-4 pb-4', { 'pt-4': !title || titleHidden }, contentClass));
+    classes(
+        'overflow-auto px-4 pb-4 flex flex-col flex-1',
+        { 'pt-4': !title || titleHidden, 'max-h-[90vh]': !renderFullscreen.value },
+        contentClass,
+    ));
+const renderFullscreen = computed(() => fullscreen || (fullscreenMobile && UI.mobile));
 const renderedWrapperClass = computed(() =>
     classes(
-        'isolate fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2',
-        'overflow-hidden rounded-lg bg-white text-left shadow-xl sm:max-w-lg',
-        'animate-[fade-in_var(--tw-duration)_ease-in-out,grow_var(--tw-duration)_ease-in-out]',
-        'transition-[scale,opacity] will-change-[scale,opacity] duration-300',
-        {
-            'scale-50 opacity-0': !inForeground.value,
-            'scale-100 opacity-100': inForeground.value,
-        },
+        'isolate fixed z-50 flex flex-col overflow-hidden bg-white text-left duration-300',
+        renderFullscreen.value
+            ? [
+                'inset-0 transition-[transform,translate] will-change-[transform,translate]',
+                renderedModals.has(modal.value) || 'animate-[slide-in_var(--tw-duration)_ease-in-out]',
+                inForeground.value ? 'translate-y-0' : 'translate-y-full',
+            ]
+            : [
+                'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full',
+                'max-w-[calc(100%-2rem)] rounded-lg shadow-xl sm:max-w-lg',
+                'transition-[scale,opacity] will-change-[scale,opacity]',
+                renderedModals.has(modal.value) ||
+                      'animate-[fade-in_var(--tw-duration)_ease-in-out,grow_var(--tw-duration)_ease-in-out]',
+                inForeground.value ? 'scale-100 opacity-100' : 'scale-50 opacity-0',
+            ],
         wrapperClass,
     ));
 
-useEvent('modal-will-close', async ({ modal: { id } }) => {
-    if (id !== context.modal.id) {
-        return;
-    }
-
-    // Wait for transitions to finish
-    await after({ ms: 300 });
-});
+onMounted(() => after(500).then(() => renderedModals.add(modal.value)));
 </script>

package/src/components/ui/PromptModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- @vue-generic {import('@aerogel/core/ui/UI').ModalExposeResult<PromptModalExpose>} -->
+    <!-- @vue-generic {import('@aerogel/core/components/contracts/PromptModal').PromptModalResult} -->
     <Modal v-slot="{ close }" :title="renderedTitle" persistent>
         <Form :form @submit="close(form.draft)">
             <Markdown v-if="renderedMessage" :text="renderedMessage" />
@@ -29,10 +29,15 @@ import Form from '@aerogel/core/components/ui/Form.vue';
 import Input from '@aerogel/core/components/ui/Input.vue';
 import Modal from '@aerogel/core/components/ui/Modal.vue';
 import { usePromptModal } from '@aerogel/core/components/contracts/PromptModal';
-import type { PromptModalExpose, PromptModalProps } from '@aerogel/core/components/contracts/PromptModal';
+import type {
+    PromptModalEmits,
+    PromptModalExpose,
+    PromptModalProps,
+} from '@aerogel/core/components/contracts/PromptModal';
 
 const { cancelVariant = 'secondary', ...props } = defineProps<PromptModalProps>();
 const { form, renderedTitle, renderedMessage, renderedAcceptText, renderedCancelText } = usePromptModal(props);
 
+defineEmits<PromptModalEmits>();
 defineExpose<PromptModalExpose>();
 </script>

package/src/components/ui/Toast.vue

@@ -34,6 +34,7 @@ const renderedClasses = computed(() =>
                 variant: {
                     secondary: 'bg-gray-900 text-white ring-black',
                     danger: 'bg-red-50 text-red-900 ring-red-100',
+                    warning: 'bg-yellow-50 text-yellow-900 ring-yellow-100',
                 },
             },
             defaultVariants: {

package/src/components/ui/index.ts

@@ -3,6 +3,7 @@ export { default as AlertModal } from './AlertModal.vue';
 export { default as Button } from './Button.vue';
 export { default as Checkbox } from './Checkbox.vue';
 export { default as ConfirmModal } from './ConfirmModal.vue';
+export { default as Details } from './Details.vue';
 export { default as DropdownMenu } from './DropdownMenu.vue';
 export { default as DropdownMenuOption } from './DropdownMenuOption.vue';
 export { default as DropdownMenuOptions } from './DropdownMenuOptions.vue';
@@ -19,7 +20,6 @@ export { default as Link } from './Link.vue';
 export { default as LoadingModal } from './LoadingModal.vue';
 export { default as Markdown } from './Markdown.vue';
 export { default as Modal } from './Modal.vue';
-export { default as ModalContext } from './ModalContext.vue';
 export { default as ProgressBar } from './ProgressBar.vue';
 export { default as PromptModal } from './PromptModal.vue';
 export { default as Select } from './Select.vue';

package/src/forms/FormController.ts

@@ -112,6 +112,10 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
         return this._fields[field]?.rules?.split('|') ?? [];
     }
 
+    public setFieldErrors<T extends keyof Fields>(field: T, errors: string[] | null): void {
+        this._errors[field] = errors;
+    }
+
     public getFieldType<T extends keyof Fields>(field: T): FormFieldType | null {
         return this._fields[field]?.type ?? null;
     }

package/src/index.css

@@ -66,6 +66,15 @@ button[data-markdown-action] {
     }
 }
 
+@keyframes slide-in {
+    0% {
+        transform: translateY(100%);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
 @keyframes grow {
     0% {
         scale: 0;

package/src/ui/UI.state.ts

@@ -4,15 +4,6 @@ import { defineServiceState } from '@aerogel/core/services/Service';
 
 import { Layouts, getCurrentLayout } from './utils';
 
-export interface UIModal<T = unknown> {
-    id: string;
-    properties: Record<string, unknown>;
-    component: Component;
-    closing: boolean;
-    beforeClose: Promise<T | undefined>;
-    afterClose: Promise<T | undefined>;
-}
-
 export interface UIToast {
     id: string;
     component: Component;
@@ -22,13 +13,11 @@ export interface UIToast {
 export default defineServiceState({
     name: 'ui',
     initialState: {
-        modals: [] as UIModal[],
         toasts: [] as UIToast[],
         layout: getCurrentLayout(),
     },
     computed: {
         desktop: ({ layout }) => layout === Layouts.Desktop,
         mobile: ({ layout }) => layout === Layouts.Mobile,
-        openModals: ({ modals }) => modals.filter(({ closing }) => !closing),
     },
 });