@aerogel/core 0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c → 0.0.0-next.9a1c5ba39a454b316eba36ec7bdf579fed3d95d2

package/src/components/headless/modals/AGHeadlessModal.vue

@@ -1,25 +1,25 @@
 <template>
-    <Dialog ref="$root" :open="true" @close="cancellable && close()">
-        <slot :close="close" />
-    </Dialog>
+    <DialogRoot ref="$root" :open="true" @update:open="cancellable && close()">
+        <DialogPortal>
+            <slot :close="close" />
+        </DialogPortal>
+    </DialogRoot>
 </template>
 
 <script setup lang="ts">
 import { ref, toRef } from 'vue';
-import { Dialog } from '@headlessui/vue';
+import { DialogPortal, DialogRoot } from 'reka-ui';
 import type { VNode } from 'vue';
 
-import Events from '@/services/Events';
-import { useEvent } from '@/utils/composition/events';
-import { booleanProp, injectReactiveOrFail } from '@/utils/vue';
-import type { IAGModalContext } from '@/components/modals/AGModalContext';
+import Events from '@aerogel/core/services/Events';
+import { useEvent } from '@aerogel/core/utils/composition/events';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { IAGModalContext } from '@aerogel/core/components/modals/AGModalContext';
 
+import { modalProps } from './AGHeadlessModal';
 import type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from './AGHeadlessModal';
 
-const props = defineProps({
-    cancellable: booleanProp(true),
-});
-
+const props = defineProps(modalProps());
 const $root = ref<{ $el?: HTMLElement } | null>(null);
 const hidden = ref(true);
 const closed = ref(false);

package/src/components/headless/modals/AGHeadlessModalContent.vue

@@ -0,0 +1,25 @@
+<template>
+    <DialogContent>
+        <slot />
+
+        <AGModalContext v-if="childModal" :child-index="childIndex + 1" :modal="childModal" />
+    </DialogContent>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { DialogContent } from 'reka-ui';
+
+import UI from '@aerogel/core/ui/UI';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import type { IAGModalContext } from '@aerogel/core/components/modals/AGModalContext';
+
+import AGModalContext from '../../modals/AGModalContext.vue';
+
+const { childIndex } = injectReactiveOrFail<IAGModalContext>(
+    'modal',
+    'could not obtain modal reference from <AGHeadlessModalContent>, ' +
+        'did you render this component manually? Show it using $ui.openModal() instead',
+);
+const childModal = computed(() => UI.modals[childIndex] ?? null);
+</script>

package/src/components/headless/modals/index.ts

@@ -1,4 +1,5 @@
+export { DialogTitle as AGHeadlessModalTitle } from 'reka-ui';
+
 export * from './AGHeadlessModal';
 export { default as AGHeadlessModal } from './AGHeadlessModal.vue';
-export { default as AGHeadlessModalPanel } from './AGHeadlessModalPanel.vue';
-export { default as AGHeadlessModalTitle } from './AGHeadlessModalTitle.vue';
+export { default as AGHeadlessModalContent } from './AGHeadlessModalContent.vue';

package/src/components/headless/snackbars/index.ts

@@ -1,17 +1,13 @@
-import { arrayProp, enumProp, requiredStringProp } from '@/utils/vue';
-import { Colors } from '@/components/constants';
+import type { ExtractPropTypes } from 'vue';
+import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
+
+import UI from '@aerogel/core/ui/UI';
+import { arrayProp, enumProp, requiredStringProp } from '@aerogel/core/utils/vue';
+import { Colors } from '@aerogel/core/components/constants';
 import { objectWithout } from '@noeldemartin/utils';
 
 export { default as AGHeadlessSnackbar } from './AGHeadlessSnackbar.vue';
 
-export interface SnackbarAction {
-    text: string;
-    dismiss?: boolean;
-    handler?(): unknown;
-}
-
-export type SnackbarColor = (typeof SnackbarColors)[keyof typeof SnackbarColors];
-
 export const SnackbarColors = objectWithout(Colors, ['Primary', 'Clear']);
 export const snackbarProps = {
     id: requiredStringProp(),
@@ -20,6 +16,25 @@ export const snackbarProps = {
     color: enumProp(SnackbarColors, Colors.Secondary),
 };
 
+export interface SnackbarAction {
+    text: string;
+    dismiss?: boolean;
+    handler?(): unknown;
+}
+
+export type SnackbarColor = (typeof SnackbarColors)[keyof typeof SnackbarColors];
+export type AGSnackbarProps = ObjectWithoutEmpty<ExtractPropTypes<typeof snackbarProps>>;
+
 export function useSnackbarProps(): typeof snackbarProps {
     return snackbarProps;
 }
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useSnackbar(props: ExtractPropTypes<typeof snackbarProps>) {
+    function activate(action: SnackbarAction): void {
+        action.handler?.();
+        action.dismiss && UI.hideSnackbar(props.id);
+    }
+
+    return { activate };
+}

package/src/components/index.ts

@@ -3,7 +3,9 @@ import AGAppOverlays from './AGAppOverlays.vue';
 
 export { AGAppLayout, AGAppOverlays };
 
+export * from './composition';
 export * from './constants';
+export * from './contracts';
 export * from './forms';
 export * from './headless';
 export * from './lib';

package/src/components/lib/AGErrorMessage.vue

@@ -5,12 +5,12 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import Errors from '@/errors/Errors';
-import { requiredObjectProp } from '@/utils/vue';
-import type { ErrorSource } from '@/errors/Errors.state';
+import { requiredObjectProp } from '@aerogel/core/utils/vue';
+import { getErrorMessage } from '@aerogel/core/errors/utils';
+import type { ErrorSource } from '@aerogel/core/errors/Errors.state';
 
 import AGMarkdown from './AGMarkdown.vue';
 
 const props = defineProps({ error: requiredObjectProp<ErrorSource>() });
-const message = computed(() => Errors.getErrorMessage(props.error));
+const message = computed(() => getErrorMessage(props.error));
 </script>

package/src/components/lib/AGMarkdown.vue

@@ -3,20 +3,23 @@
 </template>
 
 <script setup lang="ts">
-import { computed, h } from 'vue';
+import { computed, h, useAttrs } from 'vue';
+import { isInstanceOf } from '@noeldemartin/utils';
 
-import { renderMarkdown } from '@/utils/markdown';
-import { booleanProp, objectProp, stringProp } from '@/utils/vue';
-import { translate } from '@/lang';
+import { renderMarkdown } from '@aerogel/core/utils/markdown';
+import { booleanProp, mixedProp, objectProp, stringProp } from '@aerogel/core/utils/vue';
+import { translate } from '@aerogel/core/lang';
 
 const props = defineProps({
     as: stringProp(),
     inline: booleanProp(),
     langKey: stringProp(),
-    langParams: objectProp<Record<string, unknown>>(),
+    langParams: mixedProp<number | Record<string, unknown>>(),
     text: stringProp(),
+    actions: objectProp<Record<string, () => unknown>>(),
 });
 
+const attrs = useAttrs();
 const markdown = computed(() => props.text ?? (props.langKey && translate(props.langKey, props.langParams ?? {})));
 const html = computed(() => {
     if (!markdown.value) {
@@ -32,5 +35,20 @@ const html = computed(() => {
     return renderedHtml;
 });
 const root = () =>
-    h(props.as ?? (props.inline ? 'span' : 'div'), { class: props.inline ? '' : 'prose', innerHTML: html.value });
+    h(props.as ?? (props.inline ? 'span' : 'div'), {
+        innerHTML: html.value,
+        onClick,
+        ...attrs,
+        class: `${attrs.class ?? ''} ${props.inline ? '' : 'prose'}`,
+    });
+
+async function onClick(event: Event) {
+    const { target } = event;
+
+    if (isInstanceOf(target, HTMLElement) && target.dataset.markdownAction) {
+        props.actions?.[target.dataset.markdownAction]?.();
+
+        return;
+    }
+}
 </script>

package/src/components/lib/AGMeasured.vue

@@ -0,0 +1,16 @@
+<template>
+    <component :is="as" v-measure="() => (measured = true)" :class="{ 'invisible! absolute! w-auto!': !measured }">
+        <slot />
+    </component>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { stringProp } from '@aerogel/core/utils/vue';
+
+defineProps({ as: stringProp('span') });
+
+// TODO use v-measure.css
+const measured = ref(false);
+</script>

package/src/components/lib/AGProgressBar.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200">
+        <div :class="barClasses" :style="`transform:translateX(-${(1 - renderedProgress) * 100}%)`" />
+        <span class="sr-only">
+            {{
+                $td('ui.progress', '{progress}% complete', {
+                    progress: renderedProgress * 100,
+                })
+            }}
+        </span>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onUnmounted, ref, watch } from 'vue';
+
+import { numberProp, objectProp, stringProp } from '@aerogel/core/utils/vue';
+import type { Job } from '@aerogel/core/jobs';
+
+const props = defineProps({
+    progress: numberProp(),
+    barClass: stringProp(''),
+    job: objectProp<Job>(),
+});
+
+let cleanup: Function | undefined;
+const jobProgress = ref(0);
+const barClasses = computed(() => {
+    const classes = props.barClass ?? '';
+
+    return `size-full transition-transform duration-500 ease-linear ${
+        classes.includes('bg-') ? classes : `${classes} bg-gray-700`
+    }`;
+});
+const renderedProgress = computed(() => {
+    if (typeof props.progress === 'number') {
+        return props.progress;
+    }
+
+    return jobProgress.value;
+});
+
+watch(
+    () => props.job,
+    () => {
+        cleanup?.();
+
+        jobProgress.value = props.job?.progress ?? 0;
+        cleanup = props.job?.listeners.add({ onUpdated: (progress) => (jobProgress.value = progress) });
+    },
+    { immediate: true },
+);
+
+onUnmounted(() => cleanup?.());
+</script>

package/src/components/lib/AGStartupCrash.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="grid flex-grow place-items-center">
+    <div class="grid grow place-items-center">
         <div class="flex flex-col items-center space-y-6 p-8">
             <h1 class="mt-2 text-center text-4xl font-medium text-red-600">
                 {{ $td('startupCrash.title', 'Something went wrong!') }}

package/src/components/lib/index.ts

@@ -1,4 +1,6 @@
 export { default as AGErrorMessage } from './AGErrorMessage.vue';
 export { default as AGLink } from './AGLink.vue';
 export { default as AGMarkdown } from './AGMarkdown.vue';
+export { default as AGMeasured } from './AGMeasured.vue';
+export { default as AGProgressBar } from './AGProgressBar.vue';
 export { default as AGStartupCrash } from './AGStartupCrash.vue';

package/src/components/modals/AGAlertModal.ts

@@ -0,0 +1,18 @@
+import type { ExtractPropTypes } from 'vue';
+import type { ObjectWithout, Pretty } from '@noeldemartin/utils';
+
+import { requiredStringProp, stringProp } from '@aerogel/core/utils';
+import type { AcceptRefs } from '@aerogel/core/utils';
+
+export const alertModalProps = {
+    title: stringProp(),
+    message: requiredStringProp(),
+};
+
+export type AGAlertModalProps = Pretty<
+    AcceptRefs<ObjectWithout<ExtractPropTypes<typeof alertModalProps>, null | undefined>>
+>;
+
+export function useAlertModalProps(): typeof alertModalProps {
+    return alertModalProps;
+}

package/src/components/modals/AGAlertModal.vue

@@ -1,25 +1,14 @@
 <template>
-    <AGModal>
-        <AGMarkdown
-            v-if="title"
-            :text="title"
-            as="h2"
-            class="font-semibold"
-            inline
-        />
+    <AGModal :title="title">
         <AGMarkdown :text="message" />
     </AGModal>
 </template>
 
 <script setup lang="ts">
-import { requiredStringProp, stringProp } from '@/utils/vue';
-
 import AGModal from './AGModal.vue';
+import { useAlertModalProps } from './AGAlertModal';
 
 import AGMarkdown from '../lib/AGMarkdown.vue';
 
-defineProps({
-    title: stringProp(),
-    message: requiredStringProp(),
-});
+defineProps(useAlertModalProps());
 </script>

package/src/components/modals/AGConfirmModal.ts

@@ -1,10 +1,42 @@
-import { requiredStringProp, stringProp } from '@/utils';
+import { computed } from 'vue';
+import type { ExtractPropTypes } from 'vue';
+import type { ObjectWithout, Pretty, SubPartial } from '@noeldemartin/utils';
+
+import { Colors } from '@aerogel/core/components/constants';
+import { booleanProp, enumProp, objectProp, requiredStringProp, stringProp } from '@aerogel/core/utils';
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { AcceptRefs } from '@aerogel/core/utils';
+import type { ConfirmCheckboxes } from '@aerogel/core/ui';
 
 export const confirmModalProps = {
     title: stringProp(),
     message: requiredStringProp(),
+    acceptText: stringProp(),
+    acceptColor: enumProp(Colors, Colors.Primary),
+    cancelText: stringProp(),
+    cancelColor: enumProp(Colors, Colors.Clear),
+    checkboxes: objectProp<ConfirmCheckboxes>(),
+    actions: objectProp<Record<string, () => unknown>>(),
+    required: booleanProp(false),
 };
 
+export type AGConfirmModalProps = Pretty<
+    AcceptRefs<
+        SubPartial<
+            ObjectWithout<ExtractPropTypes<typeof confirmModalProps>, null | undefined>,
+            'acceptColor' | 'cancelColor'
+        >
+    >
+>;
+
 export function useConfirmModalProps(): typeof confirmModalProps {
     return confirmModalProps;
 }
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useConfirmModal(props: ExtractPropTypes<typeof confirmModalProps>) {
+    const renderedAcceptText = computed(() => props.acceptText ?? translateWithDefault('ui.accept', 'Ok'));
+    const renderedCancelText = computed(() => props.cancelText ?? translateWithDefault('ui.cancel', 'Cancel'));
+
+    return { renderedAcceptText, renderedCancelText };
+}

package/src/components/modals/AGConfirmModal.vue

@@ -1,30 +1,27 @@
 <template>
-    <AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false">
-        <AGMarkdown v-if="title" :text="title" as="h1" />
-        <AGMarkdown :text="message" />
+    <AGModal v-slot="{ close }: IModalDefaultSlotProps" :cancellable="false" :title="title">
+        <AGMarkdown :text="message" :actions="actions" />
 
         <div class="mt-2 flex flex-row-reverse gap-2">
-            <AGButton @click="close(true)">
-                {{ $td('ui.ok', 'OK') }}
+            <AGButton :color="acceptColor" @click="close(true)">
+                {{ renderedAcceptText }}
             </AGButton>
-            <AGButton color="secondary" @click="close()">
-                {{ $td('ui.cancel', 'Cancel') }}
+            <AGButton v-if="!required" :color="cancelColor" @click="close()">
+                {{ renderedCancelText }}
             </AGButton>
         </div>
     </AGModal>
 </template>
 
 <script setup lang="ts">
-import { requiredStringProp, stringProp } from '@/utils/vue';
+import type { IModalDefaultSlotProps } from '@aerogel/core/components/contracts/Modal';
 
 import AGModal from './AGModal.vue';
-import type { IAGModalDefaultSlotProps } from './AGModal';
+import { useConfirmModal, useConfirmModalProps } from './AGConfirmModal';
 
 import AGButton from '../forms/AGButton.vue';
 import AGMarkdown from '../lib/AGMarkdown.vue';
 
-defineProps({
-    title: stringProp(),
-    message: requiredStringProp(),
-});
+const props = defineProps(useConfirmModalProps());
+const { renderedAcceptText, renderedCancelText } = useConfirmModal(props);
 </script>

package/src/components/modals/AGErrorReportModal.ts

@@ -1,7 +1,11 @@
-import type { Component } from 'vue';
+import { computed, ref } from 'vue';
+import type { Component, ExtractPropTypes } from 'vue';
+import type { ObjectWithout, Pretty } from '@noeldemartin/utils';
 
-import { requiredArrayProp } from '@/utils/vue';
-import type { ErrorReport } from '@/errors';
+import { requiredArrayProp } from '@aerogel/core/utils/vue';
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { AcceptRefs } from '@aerogel/core/utils/vue';
+import type { ErrorReport } from '@aerogel/core/errors';
 
 export interface IAGErrorReportModalButtonsDefaultSlotProps {
     id: string;
@@ -15,6 +19,31 @@ export const errorReportModalProps = {
     reports: requiredArrayProp<ErrorReport>(),
 };
 
+export type AGErrorReportModalProps = Pretty<
+    AcceptRefs<ObjectWithout<ExtractPropTypes<typeof errorReportModalProps>, null | undefined>>
+>;
+
 export function useErrorReportModalProps(): typeof errorReportModalProps {
     return errorReportModalProps;
 }
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useErrorReportModal(props: ExtractPropTypes<typeof errorReportModalProps>) {
+    const activeReportIndex = ref(0);
+    const report = computed(() => props.reports[activeReportIndex.value] as ErrorReport);
+    const details = computed(
+        () =>
+            report.value.details?.trim() ||
+            translateWithDefault('errors.detailsEmpty', 'This error is missing a stacktrace.'),
+    );
+    const previousReportText = translateWithDefault('errors.previousReport', 'Show previous report');
+    const nextReportText = translateWithDefault('errors.nextReport', 'Show next report');
+
+    return {
+        activeReportIndex,
+        details,
+        nextReportText,
+        previousReportText,
+        report,
+    };
+}

package/src/components/modals/AGErrorReportModal.vue

@@ -12,20 +12,20 @@
                         <AGButton
                             color="clear"
                             :disabled="activeReportIndex === 0"
-                            :title="$td('errors.previousReport', 'Show previous report')"
-                            :aria-label="$td('errors.previousReport', 'Show previous report')"
+                            :title="previousReportText"
+                            :aria-label="previousReportText"
                             @click="activeReportIndex--"
                         >
-                            <IconCheveronLeft aria-hidden="true" class="h-4 w-4" />
+                            <IconCheveronLeft aria-hidden="true" class="size-4" />
                         </AGButton>
                         <AGButton
                             color="clear"
                             :disabled="activeReportIndex === reports.length - 1"
-                            :title="$td('errors.nextReport', 'Show next report')"
-                            :aria-label="$td('errors.nextReport', 'Show next report')"
+                            :title="nextReportText"
+                            :aria-label="nextReportText"
                             @click="activeReportIndex++"
                         >
-                            <IconCheveronRight aria-hidden="true" class="h-4 w-4" />
+                            <IconCheveronRight aria-hidden="true" class="size-4" />
                         </AGButton>
                     </template>
                 </div>
@@ -33,10 +33,7 @@
             </h2>
             <AGMarkdown v-if="report.description" :text="report.description" class="mt-2" />
         </div>
-        <pre
-            class="h-full overflow-auto bg-gray-200 p-4 text-xs text-red-900"
-            v-text="report.details ?? $td('errors.detailsEmpty', 'This error is missing a stacktrace.')"
-        />
+        <pre class="h-full overflow-auto bg-gray-200 p-4 text-xs text-red-900" v-text="details" />
     </AGModal>
 </template>
 
@@ -44,11 +41,7 @@
 import IconCheveronRight from '~icons/zondicons/cheveron-right';
 import IconCheveronLeft from '~icons/zondicons/cheveron-left';
 
-import { computed, ref } from 'vue';
-
-import type { ErrorReport } from '@/errors';
-
-import { useErrorReportModalProps } from './AGErrorReportModal';
+import { useErrorReportModal, useErrorReportModalProps } from './AGErrorReportModal';
 
 import AGButton from '../forms/AGButton.vue';
 import AGErrorReportModalButtons from './AGErrorReportModalButtons.vue';
@@ -57,6 +50,5 @@ import AGMarkdown from '../lib/AGMarkdown.vue';
 import AGModal from './AGModal.vue';
 
 const props = defineProps(useErrorReportModalProps());
-const activeReportIndex = ref(0);
-const report = computed(() => props.reports[activeReportIndex.value] as ErrorReport);
+const { activeReportIndex, details, nextReportText, previousReportText, report } = useErrorReportModal(props);
 </script>

package/src/components/modals/AGErrorReportModalButtons.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="flex">
-        <slot v-for="(button, i) of buttons" v-bind="(button as unknown as ComponentProps)" :key="i">
+        <slot v-for="(button, i) of buttons" v-bind="button as unknown as ComponentProps" :key="i">
             <AGButton
                 color="clear"
                 :url="button.url"
@@ -8,7 +8,7 @@
                 :aria-label="$td(`errors.report_${button.id}`, button.description)"
                 @click="button.handler"
             >
-                <component :is="button.iconComponent" class="h-4 w-4" aria-hidden="true" />
+                <component :is="button.iconComponent" class="size-4" aria-hidden="true" />
             </AGButton>
         </slot>
     </div>
@@ -22,12 +22,12 @@ import IconGitHub from '~icons/mdi/github';
 import { computed } from 'vue';
 import { stringExcerpt, tap } from '@noeldemartin/utils';
 
-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 UI from '@aerogel/core/ui/UI';
+import { requiredObjectProp } from '@aerogel/core/utils/vue';
+import { translateWithDefault } from '@aerogel/core/lang/utils';
+import type { ComponentProps } from '@aerogel/core/utils/vue';
+import type { ErrorReport } from '@aerogel/core/errors';
 
 import AGButton from '../forms/AGButton.vue';
 import type { IAGErrorReportModalButtonsDefaultSlotProps } from './AGErrorReportModal';
@@ -79,10 +79,12 @@ const buttons = computed(() =>
                 description: 'Log to console',
                 iconComponent: IconConsole,
                 handler() {
-                    (window as { error?: unknown }).error = props.report.error;
+                    const error = props.report.error ?? props.report;
+
+                    (window as { error?: unknown }).error = error;
 
                     // eslint-disable-next-line no-console
-                    console.error(props.report.error);
+                    console.error(error);
 
                     UI.showSnackbar(
                         translateWithDefault(
@@ -92,8 +94,8 @@ const buttons = computed(() =>
                     );
                 },
             },
-        ],
-        (reportButtons: IAGErrorReportModalButtonsDefaultSlotProps[]) => {
+        ] as IAGErrorReportModalButtonsDefaultSlotProps[],
+        (reportButtons) => {
             if (!githubReportUrl.value) {
                 return;
             }

package/src/components/modals/AGErrorReportModalTitle.vue

@@ -5,8 +5,8 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { numberProp, requiredObjectProp } from '@/utils/vue';
-import type { ErrorReport } from '@/errors';
+import { numberProp, requiredObjectProp } from '@aerogel/core/utils/vue';
+import type { ErrorReport } from '@aerogel/core/errors';
 
 import AGMarkdown from '../lib/AGMarkdown.vue';
 

package/src/components/modals/AGLoadingModal.ts

@@ -1,9 +1,29 @@
-import { stringProp } from '@/utils';
+import { computed } from 'vue';
+import type { ExtractPropTypes } from 'vue';
+import type { ObjectWithout } from '@noeldemartin/utils';
+
+import { numberProp, stringProp } from '@aerogel/core/utils';
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { AcceptRefs } from '@aerogel/core/utils';
 
 export const loadingModalProps = {
+    title: stringProp(),
     message: stringProp(),
+    progress: numberProp(),
 };
 
+export type AGLoadingModalProps = AcceptRefs<
+    ObjectWithout<ExtractPropTypes<typeof loadingModalProps>, null | undefined>
+>;
+
 export function useLoadingModalProps(): typeof loadingModalProps {
     return loadingModalProps;
 }
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useLoadingModal(props: ExtractPropTypes<typeof loadingModalProps>) {
+    const renderedMessage = computed(() => props.message ?? translateWithDefault('ui.loading', 'Loading...'));
+    const showProgress = computed(() => typeof props.progress === 'number');
+
+    return { renderedMessage, showProgress };
+}