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

package/src/components/headless/forms/AGHeadlessSelect.ts

@@ -1,44 +1,42 @@
-import type { ComputedRef, DeepReadonly, Ref } from 'vue';
+import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
+import type { Writable } from '@noeldemartin/utils';
 
-import { requiredArrayProp, stringProp } from '@/utils/vue';
-
-export interface IAGSelectOption {
-    value: string | number | boolean | object | null;
-    text: string;
-}
-
-export type IAGSelectOptionValue = string | number | boolean | object | null;
+import { mixedProp, requiredArrayProp, stringProp } from '@/utils/vue';
+import { extractComponentProps } from '@/components/utils';
+import type { FormFieldValue } from '@/forms/Form';
 
 export interface IAGHeadlessSelect {
     id: string;
     label: ComputedRef<string | null>;
     noSelectionText: ComputedRef<string>;
     buttonText: ComputedRef<string>;
-    selectedOption: ComputedRef<IAGSelectOption | undefined>;
-    options: ComputedRef<IAGSelectOption[]>;
+    renderText: ComputedRef<(value: FormFieldValue) => string>;
+    selectedOption: ComputedRef<FormFieldValue | null>;
+    options: ComputedRef<FormFieldValue[]>;
     errors: DeepReadonly<Ref<string[] | null>>;
-    update(value: IAGSelectOptionValue): void;
+    update(value: FormFieldValue): void;
 }
 
 export const selectProps = {
     name: stringProp(),
     label: stringProp(),
-    options: requiredArrayProp<IAGSelectOptionValue>(),
+    options: requiredArrayProp<FormFieldValue>(),
     noSelectionText: stringProp(),
+    optionsText: mixedProp<string | ((option: FormFieldValue) => string)>(),
 };
 
+export const selectEmits = ['update:modelValue'] as const;
+
 export function useSelectProps(): typeof selectProps {
     return selectProps;
 }
 
-export function extractSelectProps<T extends Record<keyof typeof selectProps, unknown>>(
-    componentProps: T,
-): Pick<T, keyof typeof selectProps> {
-    return Object.keys(selectProps).reduce((extractedProps, selectProp) => {
-        const prop = selectProp as keyof typeof selectProps;
-
-        extractedProps[prop] = componentProps[prop];
+export function useSelectEmits(): Writable<typeof selectEmits> {
+    return [...selectEmits];
+}
 
-        return extractedProps;
-    }, {} as Pick<T, keyof typeof selectProps>);
+export function extractSelectProps<T extends ExtractPropTypes<typeof selectProps>>(
+    props: T,
+): Pick<T, keyof typeof selectProps> {
+    return extractComponentProps(props, selectProps);
 }

package/src/components/headless/forms/AGHeadlessSelect.vue

@@ -1,7 +1,7 @@
 <template>
     <Listbox
         v-slot="{ value, open, disabled }: ComponentProps"
-        :model-value="selectedOption?.value"
+        :model-value="selectedOption"
         @update:model-value="update($event)"
     >
         <slot :value="value" :open="open" :disabled="disabled" />
@@ -10,38 +10,37 @@
 
 <script setup lang="ts">
 import { computed, inject, provide } from 'vue';
-import { isObject, toString, uuid } from '@noeldemartin/utils';
+import { toString, uuid } from '@noeldemartin/utils';
 import { Listbox } from '@headlessui/vue';
 
 import { mixedProp } from '@/utils/vue';
 import { translateWithDefault } from '@/lang/utils';
 import type Form from '@/forms/Form';
+import type { FormFieldValue } from '@/forms/Form';
 import type { ComponentProps } from '@/utils/vue';
 
-import { useSelectProps } from './AGHeadlessSelect';
-import type { IAGHeadlessSelect, IAGSelectOption, IAGSelectOptionValue } from './AGHeadlessSelect';
+import { useSelectEmits, useSelectProps } from './AGHeadlessSelect';
+import type { IAGHeadlessSelect } from './AGHeadlessSelect';
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(useSelectEmits());
 const props = defineProps({
-    modelValue: mixedProp<IAGSelectOptionValue>(),
+    modelValue: mixedProp<FormFieldValue>(),
     ...useSelectProps(),
 });
-const form = inject<Form | null>('form', null);
-const noSelectionText = computed(() => props.noSelectionText ?? translateWithDefault('select.noSelection', '-'));
-const options = computed(() =>
-    props.options.map((value) => {
-        const option: IAGSelectOption = {
-            value,
-            text: toString(isObject(value) && 'text' in value ? value.text : value),
-        };
+const renderText = computed(() => {
+    if (typeof props.optionsText === 'function') {
+        return props.optionsText;
+    }
 
-        return option;
-    }));
-const selectedOption = computed(() => {
-    const selectedOptionValue = form && props.name ? form.getFieldValue(props.name) : props.modelValue;
+    if (typeof props.optionsText === 'string') {
+        return (option: FormFieldValue): string => toString(option[props.optionsText as keyof FormFieldValue]);
+    }
 
-    return options.value.find((option) => option.value === selectedOptionValue);
+    return (option: FormFieldValue) => toString(option);
 });
+const form = inject<Form | null>('form', null);
+const noSelectionText = computed(() => props.noSelectionText ?? translateWithDefault('select.noSelection', '-'));
+const selectedOption = computed(() => (form && props.name ? form.getFieldValue(props.name) : props.modelValue));
 const errors = computed(() => {
     if (!form || !props.name) {
         return null;
@@ -50,7 +49,7 @@ const errors = computed(() => {
     return form.errors[props.name] ?? null;
 });
 
-function update(value: IAGSelectOptionValue) {
+function update(value: FormFieldValue) {
     if (form && props.name) {
         form.setFieldValue(props.name, value);
 
@@ -62,12 +61,14 @@ function update(value: IAGSelectOptionValue) {
 
 const api: IAGHeadlessSelect = {
     id: `select-${uuid()}`,
-    options,
     noSelectionText,
     selectedOption,
     errors,
+    options: computed(() => props.options),
     label: computed(() => props.label),
-    buttonText: computed(() => selectedOption.value?.text ?? noSelectionText.value),
+    buttonText: computed(() =>
+        selectedOption.value === null ? noSelectionText.value : renderText.value(selectedOption.value)),
+    renderText,
     update,
 };
 

package/src/components/headless/forms/AGHeadlessSelectOption.vue

@@ -9,31 +9,31 @@
                     [unselectedClass ?? 'unselected']: !selected,
                 }"
             >
-                {{ option?.text }}
+                {{ select.renderText(value) }}
             </li>
         </slot>
     </ListboxOption>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
 import { ListboxOption } from '@headlessui/vue';
 
 import { injectReactiveOrFail, requiredMixedProp, stringProp } from '@/utils/vue';
 import type { ComponentProps } from '@/utils/vue';
+import type { FormFieldValue } from '@/forms/Form';
 
-import type { IAGHeadlessSelect, IAGSelectOptionValue } from './AGHeadlessSelect';
+import type { IAGHeadlessSelect } from './AGHeadlessSelect';
 
-const props = defineProps({
-    value: requiredMixedProp<IAGSelectOptionValue>(),
+defineProps({
+    value: requiredMixedProp<FormFieldValue>(),
     selectedClass: stringProp(),
     unselectedClass: stringProp(),
     activeClass: stringProp(),
     inactiveClass: stringProp(),
 });
+
 const select = injectReactiveOrFail<IAGHeadlessSelect>(
     'select',
     '<AGHeadlessSelectOption> must be a child of a <AGHeadlessSelect>',
 );
-const option = computed(() => select.options.find((selectOption) => selectOption.value === props.value));
 </script>

package/src/components/headless/forms/composition.ts

@@ -0,0 +1,10 @@
+import { inject, onUnmounted } from 'vue';
+
+import type Form from '@/forms/Form';
+
+export function onFormFocus(input: { name: string | null }, listener: () => unknown): void {
+    const form = inject<Form | null>('form', null);
+    const stop = form?.on('focus', (name) => input.name === name && listener());
+
+    onUnmounted(() => stop?.());
+}

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

@@ -1,11 +1,14 @@
+export * from './composition';
 export * from './AGHeadlessInput';
 export * from './AGHeadlessSelect';
 export * from './AGHeadlessSelectOption';
 export { default as AGHeadlessButton } from './AGHeadlessButton.vue';
 export { default as AGHeadlessInput } from './AGHeadlessInput.vue';
+export { default as AGHeadlessInputDescription } from './AGHeadlessInputDescription.vue';
 export { default as AGHeadlessInputError } from './AGHeadlessInputError.vue';
 export { default as AGHeadlessInputInput } from './AGHeadlessInputInput.vue';
 export { default as AGHeadlessInputLabel } from './AGHeadlessInputLabel.vue';
+export { default as AGHeadlessInputTextArea } from './AGHeadlessInputTextArea.vue';
 export { default as AGHeadlessSelect } from './AGHeadlessSelect.vue';
 export { default as AGHeadlessSelectButton } from './AGHeadlessSelectButton.vue';
 export { default as AGHeadlessSelectError } from './AGHeadlessSelectError.vue';

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

@@ -1,5 +1,9 @@
+import { computed } from 'vue';
+import type { ExtractPropTypes, Ref } from 'vue';
+
+import { booleanProp, stringProp } from '@/utils';
+import { extractComponentProps } from '@/components/utils';
 import type { IAGModal } from '@/components/modals/AGModal';
-import { booleanProp } from '@/utils';
 
 export interface IAGHeadlessModal extends IAGModal {}
 
@@ -9,8 +13,22 @@ export interface IAGHeadlessModalDefaultSlotProps {
 
 export const modalProps = {
     cancellable: booleanProp(true),
+    title: stringProp(),
 };
 
 export function useModalProps(): typeof modalProps {
     return modalProps;
 }
+
+export function extractModalProps<T extends ExtractPropTypes<typeof modalProps>>(
+    props: T,
+): Pick<T, keyof typeof modalProps> {
+    return extractComponentProps(props, modalProps);
+}
+
+export function useModalExpose($modal: Ref<IAGHeadlessModal | undefined>): IAGModal {
+    return {
+        close: async () => $modal.value?.close(),
+        cancellable: computed(() => !!$modal.value?.cancellable),
+    };
+}

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

@@ -11,15 +11,13 @@ import type { VNode } from 'vue';
 
 import Events from '@/services/Events';
 import { useEvent } from '@/utils/composition/events';
-import { booleanProp, injectReactiveOrFail } from '@/utils/vue';
+import { injectReactiveOrFail } from '@/utils/vue';
 import type { IAGModalContext } from '@/components/modals/AGModalContext';
 
+import { useModalProps } from './AGHeadlessModal';
 import type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from './AGHeadlessModal';
 
-const props = defineProps({
-    cancellable: booleanProp(true),
-});
-
+const props = defineProps(useModalProps());
 const $root = ref<{ $el?: HTMLElement } | null>(null);
 const hidden = ref(true);
 const closed = ref(false);

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

@@ -1,17 +1,13 @@
+import type { ExtractPropTypes } from 'vue';
+import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
+
+import UI from '@/ui/UI';
 import { arrayProp, enumProp, requiredStringProp } from '@/utils/vue';
 import { Colors } from '@/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/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 { getErrorMessage } from '@/errors/utils';
 import type { ErrorSource } from '@/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,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, h } from 'vue';
+import { computed, h, useAttrs } from 'vue';
 
 import { renderMarkdown } from '@/utils/markdown';
-import { booleanProp, objectProp, stringProp } from '@/utils/vue';
+import { booleanProp, mixedProp, stringProp } from '@/utils/vue';
 import { translate } from '@/lang';
 
 const props = defineProps({
     as: stringProp(),
     inline: booleanProp(),
     langKey: stringProp(),
-    langParams: objectProp<Record<string, unknown>>(),
+    langParams: mixedProp<number | Record<string, unknown>>(),
     text: stringProp(),
 });
 
+const attrs = useAttrs();
 const markdown = computed(() => props.text ?? (props.langKey && translate(props.langKey, props.langParams ?? {})));
 const html = computed(() => {
     if (!markdown.value) {
@@ -32,5 +33,9 @@ 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,
+        ...attrs,
+        class: `${attrs.class ?? ''} ${props.inline ? '' : 'prose'}`,
+    });
 </script>

package/src/components/lib/AGMeasured.vue

@@ -0,0 +1,15 @@
+<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 '@/utils/vue';
+
+defineProps({ as: stringProp('span') });
+
+const measured = ref(false);
+</script>

package/src/components/lib/index.ts

@@ -1,4 +1,5 @@
 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 AGStartupCrash } from './AGStartupCrash.vue';

package/src/components/modals/AGAlertModal.ts

@@ -0,0 +1,15 @@
+import type { ExtractPropTypes } from 'vue';
+import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
+
+import { requiredStringProp, stringProp } from '@/utils';
+
+export const alertModalProps = {
+    title: stringProp(),
+    message: requiredStringProp(),
+};
+
+export type AGAlertModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof alertModalProps>>;
+
+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,27 @@
+import { computed } from 'vue';
+import type { ExtractPropTypes } from 'vue';
+import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
+
 import { requiredStringProp, stringProp } from '@/utils';
+import { translateWithDefault } from '@/lang';
 
 export const confirmModalProps = {
     title: stringProp(),
     message: requiredStringProp(),
+    acceptText: stringProp(),
+    cancelText: stringProp(),
 };
 
+export type AGConfirmModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof confirmModalProps>>;
+
 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,26 @@
 <template>
-    <AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false">
-        <AGMarkdown v-if="title" :text="title" as="h1" />
+    <AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false" :title="title">
         <AGMarkdown :text="message" />
 
         <div class="mt-2 flex flex-row-reverse gap-2">
             <AGButton @click="close(true)">
-                {{ $td('ui.ok', 'OK') }}
+                {{ renderedAcceptText }}
             </AGButton>
             <AGButton color="secondary" @click="close()">
-                {{ $td('ui.cancel', 'Cancel') }}
+                {{ renderedCancelText }}
             </AGButton>
         </div>
     </AGModal>
 </template>
 
 <script setup lang="ts">
-import { requiredStringProp, stringProp } from '@/utils/vue';
-
 import AGModal from './AGModal.vue';
+import { useConfirmModal, useConfirmModalProps } from './AGConfirmModal';
 import type { IAGModalDefaultSlotProps } from './AGModal';
 
 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,6 +1,9 @@
-import type { Component } from 'vue';
+import { computed, ref } from 'vue';
+import type { Component, ExtractPropTypes } from 'vue';
+import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
 
 import { requiredArrayProp } from '@/utils/vue';
+import { translateWithDefault } from '@/lang';
 import type { ErrorReport } from '@/errors';
 
 export interface IAGErrorReportModalButtonsDefaultSlotProps {
@@ -15,6 +18,29 @@ export const errorReportModalProps = {
     reports: requiredArrayProp<ErrorReport>(),
 };
 
+export type AGErrorReportModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof errorReportModalProps>>;
+
 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,8 +12,8 @@
                         <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" />
@@ -21,8 +21,8 @@
                         <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" />
@@ -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

@@ -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(

package/src/components/modals/AGLoadingModal.ts

@@ -1,9 +1,23 @@
+import { computed } from 'vue';
+import type { ExtractPropTypes } from 'vue';
+import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
+
 import { stringProp } from '@/utils';
+import { translateWithDefault } from '@/lang';
 
 export const loadingModalProps = {
     message: stringProp(),
 };
 
+export type AGLoadingModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof loadingModalProps>>;
+
 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...'));
+
+    return { renderedMessage };
+}