@aerogel/core 0.0.0-next.bde642c4a8096c5fc3d5e676c2115da23f4bf1d8 → 0.0.0-next.c2e6acc000e97a1020c2e232678563c53884dd0e

package/src/components/snackbars/AGSnackbar.vue

@@ -1,26 +1,27 @@
 <template>
     <AGHeadlessSnackbar class="flex flex-row items-center justify-center gap-3 p-4" :class="styleClasses">
-        <AGMarkdown :text="message" inline />
-        <AGButton
+        <Markdown :text="message" inline />
+        <Button
             v-for="(action, i) of actions"
             :key="i"
-            :color="color"
+            :variant="colorVariant"
             @click="activate(action)"
         >
             {{ action.text }}
-        </AGButton>
+        </Button>
     </AGHeadlessSnackbar>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { Colors } from '@/components/constants';
-import { useSnackbar, useSnackbarProps } from '@/components/headless/snackbars';
+import { Colors } from '@aerogel/core/components/constants';
+import { useSnackbar, useSnackbarProps } from '@aerogel/core/components/headless/snackbars';
+import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
 
-import AGButton from '../forms/AGButton.vue';
+import Button from '../ui/Button.vue';
 import AGHeadlessSnackbar from '../headless/snackbars/AGHeadlessSnackbar.vue';
-import AGMarkdown from '../lib/AGMarkdown.vue';
+import Markdown from '../ui/Markdown.vue';
 
 const props = defineProps(useSnackbarProps());
 const { activate } = useSnackbar(props);
@@ -33,4 +34,5 @@ const styleClasses = computed(() => {
             return 'bg-gray-900 text-white';
     }
 });
+const colorVariant = computed(() => props.color as ButtonVariant);
 </script>

package/src/components/ui/AlertModal.vue

@@ -0,0 +1,13 @@
+<template>
+    <Modal :title="title">
+        <Markdown :text="message" />
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import Modal from '@aerogel/core/components/ui/Modal.vue';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import type { AlertModalProps } from '@aerogel/core/components/contracts/AlertModal';
+
+defineProps<AlertModalProps>();
+</script>

package/src/components/ui/Button.vue

@@ -0,0 +1,58 @@
+<template>
+    <HeadlessButton :class="renderedClasses" v-bind="props">
+        <slot />
+    </HeadlessButton>
+</template>
+
+<script setup lang="ts">
+import HeadlessButton from '@aerogel/core/components/headless/HeadlessButton.vue';
+import { computedVariantClasses } from '@aerogel/core/components/utils';
+import type { ButtonProps } from '@aerogel/core/components/contracts/Button';
+import type { Variants } from '@aerogel/core/components/utils';
+
+const { class: baseClasses, size, variant, ...props } = defineProps<ButtonProps>();
+
+/* eslint-disable vue/max-len */
+// prettier-ignore
+const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size' | 'variant'>>>(
+    { baseClasses, variant, size },
+    {
+        baseClasses: 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
+        variants: {
+            variant: {
+                default: 'bg-primary text-white hover:bg-primary/90 focus-visible:outline-primary',
+                secondary: 'bg-background text-gray-900 ring-gray-300 hover:bg-accent',
+                danger: 'bg-danger text-white hover:bg-danger/80 focus-visible:outline-danger',
+                ghost: 'bg-background hover:bg-accent',
+                outline: 'bg-background text-primary ring-primary hover:bg-accent',
+                link: 'text-primary hover:underline',
+            },
+            size: {
+                small: 'rounded px-2 py-1 text-xs',
+                default: 'rounded-md px-2.5 py-1.5 text-sm',
+                large: 'rounded-md px-3 py-2 text-base',
+                icon: 'rounded-full p-2.5',
+            },
+        },
+        compoundVariants: [
+            {
+                variant: ['default', 'secondary', 'danger', 'ghost', 'outline'],
+                class: 'font-medium',
+            },
+            {
+                variant: ['default', 'danger'],
+                class: 'shadow-sm',
+            },
+            {
+                variant: ['secondary', 'outline'],
+                class: 'ring-1 ring-inset',
+            },
+        ],
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    },
+);
+/* eslint-enable vue/max-len */
+</script>

package/src/components/ui/Checkbox.vue

@@ -0,0 +1,49 @@
+<template>
+    <HeadlessInput
+        ref="$input"
+        :class="renderedClasses"
+        v-bind="props"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <div class="flex h-6 items-center">
+            <HeadlessInputInput v-bind="inputAttrs" type="checkbox" :class="renderedInputClasses" />
+        </div>
+        <div v-if="$slots.default" class="ml-2 text-sm leading-6">
+            <HeadlessInputLabel class="text-gray-900">
+                <slot />
+            </HeadlessInputLabel>
+            <HeadlessInputError class="text-sm text-red-600" />
+        </div>
+        <div v-else-if="label" class="ml-2 text-sm leading-6">
+            <HeadlessInputLabel />
+            <HeadlessInputError class="text-sm text-red-600" />
+        </div>
+    </HeadlessInput>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import { classes } from '@aerogel/core/components/utils';
+import { useInputAttrs } from '@aerogel/core/utils/composition/forms';
+import { componentRef } from '@aerogel/core/utils/vue';
+import type { InputEmits, InputExpose, InputProps } from '@aerogel/core/components/contracts/Input';
+
+defineOptions({ inheritAttrs: false });
+defineEmits<InputEmits>();
+const { inputClass, ...props } = defineProps<InputProps & { inputClass?: HTMLAttributes['class'] }>();
+
+const $input = componentRef<InputExpose>();
+const [inputAttrs, rootClasses] = useInputAttrs();
+const renderedClasses = computed(() => classes('relative flex items-start', rootClasses.value));
+const renderedInputClasses = computed(() =>
+    classes(
+        'size-4 rounded text-primary hover:bg-gray-200 checked:hover:bg-primary/80 checked:border-0',
+        {
+            'border-gray-300 focus:ring-primary': !$input.value?.errors,
+            'border-red-400 border-2 focus:ring-red-600': $input.value?.errors,
+        },
+        inputClass,
+    ));
+</script>

package/src/components/ui/ConfirmModal.vue

@@ -0,0 +1,42 @@
+<template>
+    <Modal v-slot="{ close }" :title="title" persistent>
+        <Form :form="form" @submit="close([true, form.data()])">
+            <Markdown :text="message" :actions="actions" />
+
+            <ul v-if="checkboxes" class="mt-4 flex flex-col text-sm text-gray-600">
+                <li v-for="(checkbox, name) of checkboxes" :key="name">
+                    <label class="flex items-center">
+                        <input
+                            v-model="form[name]"
+                            type="checkbox"
+                            :required="checkbox.required"
+                            class="border-primary text-primary hover:bg-primary/10 hover:checked:bg-primary/80 focus:ring-primary focus-visible:ring-primary rounded border-2"
+                        >
+                        <span class="ml-1.5">{{ checkbox.label }}</span>
+                    </label>
+                </li>
+            </ul>
+
+            <div class="mt-4 flex flex-row-reverse gap-2">
+                <Button :variant="acceptVariant" submit>
+                    {{ renderedAcceptText }}
+                </Button>
+                <Button v-if="!required" :variant="cancelVariant" @click="close(false)">
+                    {{ renderedCancelText }}
+                </Button>
+            </div>
+        </Form>
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import Form from '@aerogel/core/components/ui/Form.vue';
+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 { ConfirmModalProps } from '@aerogel/core/components/contracts/ConfirmModal';
+
+const { cancelVariant = 'secondary', ...props } = defineProps<ConfirmModalProps>();
+const { form, renderedAcceptText, renderedCancelText } = useConfirmModal(props);
+</script>

package/src/components/ui/ErrorReportModal.vue

@@ -0,0 +1,62 @@
+<template>
+    <Modal wrapper-class="p-0 sm:w-auto sm:min-w-lg sm:max-w-[80vw]">
+        <div class="px-4 pt-5 pb-4">
+            <h2 class="flex justify-between gap-4">
+                <div class="flex items-center gap-2">
+                    <IconExclamationSolid class="size-5 text-red-600" />
+                    <ErrorReportModalTitle
+                        class="text-lg leading-6 font-semibold text-gray-900"
+                        :report="report"
+                        :current-report="activeReportIndex + 1"
+                        :total-reports="reports.length"
+                    />
+                    <span v-if="reports.length > 1" class="flex gap-0.5">
+                        <Button
+                            size="icon"
+                            variant="ghost"
+                            :disabled="activeReportIndex === 0"
+                            :aria-label="previousReportText"
+                            :title="previousReportText"
+                            @click="activeReportIndex--"
+                        >
+                            <IconCheveronLeft class="size-4" />
+                        </Button>
+                        <Button
+                            size="icon"
+                            variant="ghost"
+                            :disabled="activeReportIndex === reports.length - 1"
+                            :aria-label="nextReportText"
+                            :title="nextReportText"
+                            @click="activeReportIndex++"
+                        >
+                            <IconCheveronRight class="size-4" />
+                        </Button>
+                    </span>
+                </div>
+                <ErrorReportModalButtons :report="report" class="gap-0.5" />
+            </h2>
+            <Markdown v-if="report.description" :text="report.description" class="text-gray-600" />
+        </div>
+        <div class="-mt-2 max-h-[80vh] overflow-auto bg-red-800/10">
+            <pre class="p-4 text-xs text-red-800" v-text="details" />
+        </div>
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import IconCheveronLeft from '~icons/zondicons/cheveron-left';
+import IconCheveronRight from '~icons/zondicons/cheveron-right';
+import IconExclamationSolid from '~icons/zondicons/exclamation-solid';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Button from '@aerogel/core/components/ui/Button.vue';
+import ErrorReportModalButtons from '@aerogel/core/components/ui/ErrorReportModalButtons.vue';
+import ErrorReportModalTitle from '@aerogel/core/components/ui/ErrorReportModalTitle.vue';
+import Modal from '@aerogel/core/components/ui/Modal.vue';
+import { useErrorReportModal } from '@aerogel/core/components/contracts/ErrorReportModal';
+import type { ErrorReportModalProps } from '@aerogel/core/components/contracts/ErrorReportModal';
+
+const props = defineProps<ErrorReportModalProps>();
+
+const { activeReportIndex, details, nextReportText, previousReportText, report } = useErrorReportModal(props);
+</script>

package/src/components/{modals/AGErrorReportModalButtons.vue → ui/ErrorReportModalButtons.vue}

@@ -1,15 +1,17 @@
 <template>
     <div class="flex">
-        <slot v-for="(button, i) of buttons" v-bind="(button as unknown as ComponentProps)" :key="i">
-            <AGButton
-                color="clear"
-                :url="button.url"
+        <slot v-for="button of buttons" v-bind="button">
+            <Button
+                size="icon"
+                variant="ghost"
+                class="group whitespace-nowrap"
+                :href="button.url"
                 :title="$td(`errors.report_${button.id}`, button.description)"
-                :aria-label="$td(`errors.report_${button.id}`, button.description)"
                 @click="button.handler"
             >
-                <component :is="button.iconComponent" class="h-4 w-4" aria-hidden="true" />
-            </AGButton>
+                <span class="sr-only">{{ $td(`errors.report_${button.id}`, button.description) }}</span>
+                <component :is="button.iconComponent" class="size-4" aria-hidden="true" />
+            </Button>
         </slot>
     </div>
 </template>
@@ -21,20 +23,27 @@ import IconGitHub from '~icons/mdi/github';
 
 import { computed } from 'vue';
 import { stringExcerpt, tap } from '@noeldemartin/utils';
+import type { Component } from 'vue';
 
-import App from '@/services/App';
-import UI from '@/ui/UI';
-import { requiredObjectProp } from '@/utils/vue';
-import { translateWithDefault } from '@/lang/utils';
-import type { ComponentProps } from '@/utils/vue';
-import type { ErrorReport } from '@/errors';
+import App from '@aerogel/core/services/App';
+import Button from '@aerogel/core/components/ui/Button.vue';
+import UI from '@aerogel/core/ui/UI';
+import { translateWithDefault } from '@aerogel/core/lang/utils';
+import type { ErrorReport } from '@aerogel/core/errors';
 
-import AGButton from '../forms/AGButton.vue';
-import type { IAGErrorReportModalButtonsDefaultSlotProps } from './AGErrorReportModal';
+interface ErrorReportModalButtonsDefaultSlotProps {
+    id: string;
+    description: string;
+    iconComponent: Component;
+    url?: string;
+    handler?(): void;
+}
 
-const props = defineProps({
-    report: requiredObjectProp<ErrorReport>(),
-});
+defineSlots<{
+    default(props: ErrorReportModalButtonsDefaultSlotProps): unknown;
+}>();
+
+const props = defineProps<{ report: ErrorReport }>();
 const summary = computed(() =>
     props.report.description ? `${props.report.title}: ${props.report.description}` : props.report.title);
 const githubReportUrl = computed(() => {
@@ -94,8 +103,8 @@ const buttons = computed(() =>
                     );
                 },
             },
-        ],
-        (reportButtons: IAGErrorReportModalButtonsDefaultSlotProps[]) => {
+        ] as ErrorReportModalButtonsDefaultSlotProps[],
+        (reportButtons) => {
             if (!githubReportUrl.value) {
                 return;
             }

package/src/components/ui/ErrorReportModalTitle.vue

@@ -0,0 +1,24 @@
+<template>
+    <Markdown :text="text" inline />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import type { ErrorReport } from '@aerogel/core/errors';
+
+const { totalReports, currentReport, report } = defineProps<{
+    report: ErrorReport;
+    currentReport?: number;
+    totalReports?: number;
+}>();
+
+const text = computed(() => {
+    if (!totalReports || totalReports <= 1) {
+        return report.title;
+    }
+
+    return `${report.title} (${currentReport}/${totalReports})`;
+});
+</script>

package/src/components/{forms/AGForm.vue → ui/Form.vue}

@@ -7,19 +7,18 @@
 <script setup lang="ts">
 import { provide, watchEffect } from 'vue';
 
-import { objectProp } from '@/utils/vue';
-import type Form from '@/forms/Form';
+import type FormController from '@aerogel/core/forms/FormController';
 
 let offSubmit: (() => void) | undefined;
-const props = defineProps({ form: objectProp<Form>() });
+const { form } = defineProps<{ form?: FormController }>();
 const emit = defineEmits<{ submit: [] }>();
 
 watchEffect((onCleanup) => {
     offSubmit?.();
-    offSubmit = props.form?.on('submit', () => emit('submit'));
+    offSubmit = form?.on('submit', () => emit('submit'));
 
     onCleanup(() => offSubmit?.());
 });
 
-provide('form', props.form);
+provide('form', form);
 </script>

package/src/components/ui/Input.vue

@@ -0,0 +1,52 @@
+<template>
+    <HeadlessInput
+        ref="$input"
+        :label="label"
+        :class="rootClasses"
+        v-bind="props"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <HeadlessInputLabel class="block text-sm leading-6 font-medium text-gray-900" />
+        <div :class="renderedWrapperClasses">
+            <HeadlessInputInput v-bind="inputAttrs" :class="renderedInputClasses" />
+            <div v-if="$input?.errors" class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                <IconExclamationSolid class="size-5 text-red-500" />
+            </div>
+        </div>
+        <HeadlessInputDescription class="mt-2 text-sm text-gray-600" />
+        <HeadlessInputError class="mt-2 text-sm text-red-600" />
+    </HeadlessInput>
+</template>
+
+<script setup lang="ts">
+import IconExclamationSolid from '~icons/zondicons/exclamation-solid';
+
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import { classes } from '@aerogel/core/components/utils';
+import { useInputAttrs } from '@aerogel/core/utils/composition/forms';
+import { componentRef } from '@aerogel/core/utils/vue';
+import type { InputEmits, InputExpose, InputProps } from '@aerogel/core/components/contracts/Input';
+
+defineOptions({ inheritAttrs: false });
+defineEmits<InputEmits>();
+const { label, inputClass, wrapperClass, ...props } = defineProps<
+    InputProps & { inputClass?: HTMLAttributes['class']; wrapperClass?: HTMLAttributes['class'] }
+>();
+const $input = componentRef<InputExpose>();
+const [inputAttrs, rootClasses] = useInputAttrs();
+const renderedWrapperClasses = computed(() =>
+    classes('relative rounded-md shadow-2xs', { 'mt-1': label }, wrapperClass));
+const renderedInputClasses = computed(() =>
+    classes(
+        // eslint-disable-next-line vue/max-len
+        'block w-full rounded-md border-0 py-1.5 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6',
+        {
+            'text-gray-900 shadow-2xs ring-gray-300 placeholder:text-gray-400': !$input.value?.errors,
+            'hover:ring-1 hover:ring-primary/80 hover:ring-inset focus:ring-primary': !$input.value?.errors,
+            'pr-10 text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500': $input.value?.errors,
+        },
+        inputClass,
+    ));
+</script>

package/src/components/ui/Link.vue

@@ -0,0 +1,12 @@
+<template>
+    <Button variant="link" v-bind="props">
+        <slot />
+    </Button>
+</template>
+
+<script setup lang="ts">
+import Button from '@aerogel/core/components/ui/Button.vue';
+import type { ButtonProps } from '@aerogel/core/components/contracts/Button';
+
+const props = defineProps<Omit<ButtonProps, 'variant'>>();
+</script>

package/src/components/ui/LoadingModal.vue

@@ -0,0 +1,32 @@
+<template>
+    <Modal
+        persistent
+        class="flex"
+        wrapper-class="w-auto"
+        :title="title"
+        :class="{ 'flex-col-reverse': showProgress, 'items-center justify-center gap-2': !showProgress }"
+    >
+        <ProgressBar
+            v-if="showProgress"
+            :progress="progress"
+            :job="job"
+            class="min-w-[min(400px,80vw)]"
+        />
+        <IconSpinner v-else class="text-primary mr-1 size-6" />
+        <Markdown :text="renderedMessage" />
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import IconSpinner from '~icons/svg-spinners/90-ring-with-bg';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Modal from '@aerogel/core/components/ui/Modal.vue';
+import ProgressBar from '@aerogel/core/components/ui/ProgressBar.vue';
+import { useLoadingModal } from '@aerogel/core/components/contracts/LoadingModal';
+import type { LoadingModalProps } from '@aerogel/core/components/contracts/LoadingModal';
+
+const props = defineProps<LoadingModalProps>();
+
+const { renderedMessage, showProgress } = useLoadingModal(props);
+</script>

package/src/components/ui/Markdown.vue

@@ -0,0 +1,62 @@
+<template>
+    <root />
+</template>
+
+<script setup lang="ts">
+import { computed, h, useAttrs } from 'vue';
+import { isInstanceOf } from '@noeldemartin/utils';
+import type { VNode } from 'vue';
+
+import { renderMarkdown } from '@aerogel/core/utils/markdown';
+import { translate } from '@aerogel/core/lang';
+import { renderNode } from '@aerogel/core/utils/vdom';
+
+const { as, inline, langKey, langParams, text, actions } = defineProps<{
+    as?: string;
+    inline?: boolean;
+    langKey?: string;
+    langParams?: number | Record<string, unknown>;
+    text?: string;
+    actions?: Record<string, () => unknown>;
+}>();
+
+const attrs = useAttrs();
+const slots = defineSlots<{ default?(): VNode[] }>();
+const markdown = computed(() => {
+    if (slots.default) {
+        return slots.default().map(renderNode).join('');
+    }
+
+    return text ?? (langKey && translate(langKey, langParams ?? {}));
+});
+const html = computed(() => {
+    if (!markdown.value) {
+        return null;
+    }
+
+    let renderedHtml = renderMarkdown(markdown.value);
+
+    if (inline) {
+        renderedHtml = renderedHtml.replace('<p>', '<span>').replace('</p>', '</span>');
+    }
+
+    return renderedHtml;
+});
+const root = () =>
+    h(as ?? (inline ? 'span' : 'div'), {
+        innerHTML: html.value,
+        onClick,
+        ...attrs,
+        class: `${attrs.class ?? ''} ${inline ? '' : 'prose'}`,
+    });
+
+async function onClick(event: Event) {
+    const { target } = event;
+
+    if (isInstanceOf(target, HTMLElement) && target.dataset.markdownAction) {
+        actions?.[target.dataset.markdownAction]?.();
+
+        return;
+    }
+}
+</script>

package/src/components/ui/Modal.vue

@@ -0,0 +1,55 @@
+<template>
+    <HeadlessModal v-slot="{ close }" :persistent="persistent" v-bind="props">
+        <HeadlessModalOverlay class="fixed inset-0 bg-gray-500/75" />
+
+        <HeadlessModalContent :class="renderedWrapperClass">
+            <div v-if="!persistent" class="absolute top-0 right-0 hidden pt-1.5 pr-1.5 sm:block">
+                <Button variant="ghost" size="icon" @click="close()">
+                    <span class="sr-only">{{ $td('ui.close', 'Close') }}</span>
+                    <IconClose class="size-3 text-gray-400" />
+                </Button>
+            </div>
+
+            <HeadlessModalTitle v-if="title" class="text-base font-semibold text-gray-900">
+                <Markdown :text="title" inline />
+            </HeadlessModalTitle>
+
+            <div :class="renderedContentClass">
+                <slot :close="close" />
+            </div>
+        </HeadlessModalContent>
+    </HeadlessModal>
+</template>
+
+<script setup lang="ts">
+import IconClose from '~icons/zondicons/close';
+
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import HeadlessModal from '@aerogel/core/components/headless/HeadlessModal.vue';
+import HeadlessModalContent from '@aerogel/core/components/headless/HeadlessModalContent.vue';
+import HeadlessModalOverlay from '@aerogel/core/components/headless/HeadlessModalOverlay.vue';
+import HeadlessModalTitle from '@aerogel/core/components/headless/HeadlessModalTitle.vue';
+import { classes } from '@aerogel/core/components/utils';
+import type { ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
+
+const {
+    class: contentClass = '',
+    wrapperClass = '',
+    title,
+    persistent,
+    ...props
+} = defineProps<ModalProps & { wrapperClass?: HTMLAttributes['class']; class?: HTMLAttributes['class'] }>();
+
+defineSlots<ModalSlots>();
+
+const renderedContentClass = computed(() => classes({ 'mt-2': title }, contentClass));
+const renderedWrapperClass = computed(() =>
+    classes(
+        // eslint-disable-next-line vue/max-len
+        '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 px-4 pt-5 pb-4 text-left shadow-xl sm:max-w-lg',
+        wrapperClass,
+    ));
+</script>

package/src/components/ui/ModalContext.vue

@@ -0,0 +1,30 @@
+<template>
+    <component :is="modal.component" v-bind="modalProperties" />
+</template>
+
+<script setup lang="ts">
+import { computed, provide, toRef, unref } from 'vue';
+
+import type { UIModal, UIModalContext } from '@aerogel/core/ui/UI.state';
+import type { AcceptRefs } from '@aerogel/core/utils/vue';
+
+const props = defineProps<{
+    modal: UIModal;
+    childIndex?: number;
+}>();
+
+const modalProperties = computed(() => {
+    const properties = {} as typeof props.modal.properties;
+
+    for (const property in props.modal.properties) {
+        properties[property] = unref(props.modal.properties[property]);
+    }
+
+    return properties;
+});
+
+provide<AcceptRefs<UIModalContext>>('modal', {
+    modal: toRef(props, 'modal'),
+    childIndex: toRef(props, 'childIndex'),
+});
+</script>