@aerogel/core 0.0.0-next.c29ffcd25bffdbed37ecce3aac1ba14cde3e9d39 → 0.0.0-next.c33ad773d3eb977461630ff22012d99eeedf46cb

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

@@ -1,36 +0,0 @@
-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';
-
-export interface IAGHeadlessModal extends IAGModal {}
-
-export interface IAGHeadlessModalDefaultSlotProps {
-    close(result?: unknown): Promise<void>;
-}
-
-export const modalProps = {
-    cancellable: booleanProp(true),
-    inline: booleanProp(),
-    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 {
-        inline: computed(() => !!$modal.value?.inline),
-        cancellable: computed(() => !!$modal.value?.cancellable),
-        close: async () => $modal.value?.close(),
-    };
-}

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

@@ -1,32 +0,0 @@
-<template>
-    <component :is="rootComponent">
-        <slot />
-
-        <template v-if="childModal">
-            <div
-                class="pointer-events-none inset-0 z-50 bg-black/30"
-                :class="childModal.properties.inline ? 'absolute' : 'fixed'"
-            />
-            <AGModalContext :child-index="childIndex + 1" :modal="childModal" />
-        </template>
-    </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { DialogPanel } from '@headlessui/vue';
-
-import UI from '@/ui/UI';
-import { injectReactiveOrFail } from '@/utils/vue';
-import type { IAGModalContext } from '@/components/modals/AGModalContext';
-
-import AGModalContext from '../../modals/AGModalContext.vue';
-
-const { modal, childIndex } = injectReactiveOrFail<IAGModalContext>(
-    'modal',
-    'could not obtain modal reference from <AGHeadlessModalPanel>, ' +
-        'did you render this component manually? Show it using $ui.openModal() instead',
-);
-const rootComponent = computed(() => (modal.properties.inline ? 'div' : DialogPanel));
-const childModal = computed(() => UI.modals[childIndex] ?? null);
-</script>

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

@@ -1,23 +0,0 @@
-<template>
-    <component :is="rootComponent" v-bind="rootProps">
-        <slot />
-    </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { DialogTitle } from '@headlessui/vue';
-
-import { injectReactiveOrFail, stringProp } from '@/utils/vue';
-import type { IAGModalContext } from '@/components/modals/AGModalContext';
-
-const props = defineProps({ as: stringProp('h2') });
-
-const { modal } = injectReactiveOrFail<IAGModalContext>(
-    'modal',
-    'could not obtain modal reference from <AGHeadlessModalPanel>, ' +
-        'did you render this component manually? Show it using $ui.openModal() instead',
-);
-const rootComponent = computed(() => (modal.properties.inline ? 'div' : DialogTitle));
-const rootProps = computed(() => (modal.properties.inline ? {} : { as: props.as }));
-</script>

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

@@ -1,4 +0,0 @@
-export * from './AGHeadlessModal';
-export { default as AGHeadlessModal } from './AGHeadlessModal.vue';
-export { default as AGHeadlessModalPanel } from './AGHeadlessModalPanel.vue';
-export { default as AGHeadlessModalTitle } from './AGHeadlessModalTitle.vue';

package/src/components/headless/snackbars/AGHeadlessSnackbar.vue

@@ -1,10 +0,0 @@
-<template>
-    <div class="pointer-events-auto">
-        <slot />
-    </div>
-</template>
-
-<script setup lang="ts">
-// Stub import to fix build (otherwise, this file doesn't seem to be treated as a module).
-import 'virtual:aerogel';
-</script>

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

@@ -1,40 +0,0 @@
-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 const SnackbarColors = objectWithout(Colors, ['Primary', 'Clear']);
-export const snackbarProps = {
-    id: requiredStringProp(),
-    message: requiredStringProp(),
-    actions: arrayProp<SnackbarAction>(() => []),
-    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/interfaces.ts

@@ -1,24 +0,0 @@
-import { isObject } from '@noeldemartin/utils';
-import type { Ref, UnwrapNestedRefs } from 'vue';
-
-export function getElement(value: unknown): HTMLElement | undefined {
-    if (value instanceof HTMLElement) {
-        return value;
-    }
-
-    if (hasElement(value)) {
-        return value.$el;
-    }
-}
-
-export function hasElement(value: unknown): value is UnwrapNestedRefs<HasElement> {
-    return isObject(value) && '$el' in value;
-}
-
-export interface __SetsElement {
-    __setElement(element?: HTMLElement): void;
-}
-
-export interface HasElement {
-    $el: Readonly<Ref<HTMLElement | undefined>>;
-}

package/src/components/lib/AGErrorMessage.vue

@@ -1,16 +0,0 @@
-<template>
-    <AGMarkdown :text="message" inline />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-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(() => getErrorMessage(props.error));
-</script>

package/src/components/lib/AGLink.vue

@@ -1,9 +0,0 @@
-<template>
-    <AGHeadlessButton class="font-medium hover:underline">
-        <slot />
-    </AGHeadlessButton>
-</template>
-
-<script setup lang="ts">
-import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
-</script>

package/src/components/lib/AGMarkdown.vue

@@ -1,54 +0,0 @@
-<template>
-    <root />
-</template>
-
-<script setup lang="ts">
-import { computed, h, useAttrs } from 'vue';
-import { isInstanceOf } from '@noeldemartin/utils';
-
-import { renderMarkdown } from '@/utils/markdown';
-import { booleanProp, mixedProp, objectProp, stringProp } from '@/utils/vue';
-import { translate } from '@/lang';
-
-const props = defineProps({
-    as: stringProp(),
-    inline: booleanProp(),
-    langKey: stringProp(),
-    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) {
-        return null;
-    }
-
-    let renderedHtml = renderMarkdown(markdown.value);
-
-    if (props.inline) {
-        renderedHtml = renderedHtml.replace('<p>', '<span>').replace('</p>', '</span>');
-    }
-
-    return renderedHtml;
-});
-const root = () =>
-    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

@@ -1,16 +0,0 @@
-<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') });
-
-// TODO use v-measure.css
-const measured = ref(false);
-</script>

package/src/components/lib/AGProgressBar.vue

@@ -1,45 +0,0 @@
-<template>
-    <div class="mt-1 h-2 w-full min-w-[min(400px,80vw)] 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, onMounted, onUnmounted, ref } from 'vue';
-
-import { numberProp, objectProp, stringProp } from '@/utils/vue';
-import type { Job } from '@/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 `h-full w-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;
-});
-
-onMounted(() => (cleanup = props.job?.listeners.add({ onUpdated: (progress) => (jobProgress.value = progress) })));
-onUnmounted(() => cleanup?.());
-</script>

package/src/components/lib/index.ts

@@ -1,6 +0,0 @@
-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

@@ -1,18 +0,0 @@
-import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithout, Pretty } from '@noeldemartin/utils';
-
-import { requiredStringProp, stringProp } from '@/utils';
-import type { AcceptRefs } from '@/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,14 +0,0 @@
-<template>
-    <AGModal :title="title">
-        <AGMarkdown :text="message" />
-    </AGModal>
-</template>
-
-<script setup lang="ts">
-import AGModal from './AGModal.vue';
-import { useAlertModalProps } from './AGAlertModal';
-
-import AGMarkdown from '../lib/AGMarkdown.vue';
-
-defineProps(useAlertModalProps());
-</script>

package/src/components/modals/AGConfirmModal.ts

@@ -1,42 +0,0 @@
-import { computed } from 'vue';
-import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithout, Pretty, SubPartial } from '@noeldemartin/utils';
-
-import { Colors } from '@/components/constants';
-import { booleanProp, enumProp, objectProp, requiredStringProp, stringProp } from '@/utils';
-import { translateWithDefault } from '@/lang';
-import type { AcceptRefs } from '@/utils';
-import type { ConfirmCheckboxes } from '@/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,26 +0,0 @@
-<template>
-    <AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false" :title="title">
-        <AGMarkdown :text="message" :actions="actions" />
-
-        <div class="mt-2 flex flex-row-reverse gap-2">
-            <AGButton :color="acceptColor" @click="close(true)">
-                {{ renderedAcceptText }}
-            </AGButton>
-            <AGButton v-if="!required" :color="cancelColor" @click="close()">
-                {{ renderedCancelText }}
-            </AGButton>
-        </div>
-    </AGModal>
-</template>
-
-<script setup lang="ts">
-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';
-
-const props = defineProps(useConfirmModalProps());
-const { renderedAcceptText, renderedCancelText } = useConfirmModal(props);
-</script>

package/src/components/modals/AGErrorReportModal.ts

@@ -1,49 +0,0 @@
-import { computed, ref } from 'vue';
-import type { Component, ExtractPropTypes } from 'vue';
-import type { ObjectWithout, Pretty } from '@noeldemartin/utils';
-
-import { requiredArrayProp } from '@/utils/vue';
-import { translateWithDefault } from '@/lang';
-import type { AcceptRefs } from '@/utils/vue';
-import type { ErrorReport } from '@/errors';
-
-export interface IAGErrorReportModalButtonsDefaultSlotProps {
-    id: string;
-    description: string;
-    iconComponent: Component;
-    url?: string;
-    handler?(): void;
-}
-
-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

@@ -1,54 +0,0 @@
-<template>
-    <AGModal>
-        <div>
-            <h2 class="flex items-center justify-between text-lg font-medium">
-                <div class="flex items-center">
-                    <AGErrorReportModalTitle
-                        :report="report"
-                        :current-report="activeReportIndex + 1"
-                        :total-reports="reports.length"
-                    />
-                    <template v-if="reports.length > 1">
-                        <AGButton
-                            color="clear"
-                            :disabled="activeReportIndex === 0"
-                            :title="previousReportText"
-                            :aria-label="previousReportText"
-                            @click="activeReportIndex--"
-                        >
-                            <IconCheveronLeft aria-hidden="true" class="h-4 w-4" />
-                        </AGButton>
-                        <AGButton
-                            color="clear"
-                            :disabled="activeReportIndex === reports.length - 1"
-                            :title="nextReportText"
-                            :aria-label="nextReportText"
-                            @click="activeReportIndex++"
-                        >
-                            <IconCheveronRight aria-hidden="true" class="h-4 w-4" />
-                        </AGButton>
-                    </template>
-                </div>
-                <AGErrorReportModalButtons :report="report" />
-            </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="details" />
-    </AGModal>
-</template>
-
-<script setup lang="ts">
-import IconCheveronRight from '~icons/zondicons/cheveron-right';
-import IconCheveronLeft from '~icons/zondicons/cheveron-left';
-
-import { useErrorReportModal, useErrorReportModalProps } from './AGErrorReportModal';
-
-import AGButton from '../forms/AGButton.vue';
-import AGErrorReportModalButtons from './AGErrorReportModalButtons.vue';
-import AGErrorReportModalTitle from './AGErrorReportModalTitle.vue';
-import AGMarkdown from '../lib/AGMarkdown.vue';
-import AGModal from './AGModal.vue';
-
-const props = defineProps(useErrorReportModalProps());
-const { activeReportIndex, details, nextReportText, previousReportText, report } = useErrorReportModal(props);
-</script>

package/src/components/modals/AGErrorReportModalTitle.vue

@@ -1,25 +0,0 @@
-<template>
-    <AGMarkdown :text="text" inline />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { numberProp, requiredObjectProp } from '@/utils/vue';
-import type { ErrorReport } from '@/errors';
-
-import AGMarkdown from '../lib/AGMarkdown.vue';
-
-const props = defineProps({
-    report: requiredObjectProp<ErrorReport>(),
-    currentReport: numberProp(),
-    totalReports: numberProp(),
-});
-const text = computed(() => {
-    if (!props.totalReports || props.totalReports <= 1) {
-        return props.report.title;
-    }
-
-    return `${props.report.title} (${props.currentReport}/${props.totalReports})`;
-});
-</script>

package/src/components/modals/AGLoadingModal.ts

@@ -1,29 +0,0 @@
-import { computed } from 'vue';
-import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithout } from '@noeldemartin/utils';
-
-import { numberProp, stringProp } from '@/utils';
-import { translateWithDefault } from '@/lang';
-import type { AcceptRefs } from '@/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 };
-}

package/src/components/modals/AGLoadingModal.vue

@@ -1,15 +0,0 @@
-<template>
-    <AGModal :cancellable="false">
-        <AGMarkdown :text="renderedMessage" />
-    </AGModal>
-</template>
-
-<script setup lang="ts">
-import AGModal from './AGModal.vue';
-import { useLoadingModal, useLoadingModalProps } from './AGLoadingModal';
-
-import AGMarkdown from '../lib/AGMarkdown.vue';
-
-const props = defineProps(useLoadingModalProps());
-const { renderedMessage } = useLoadingModal(props);
-</script>

package/src/components/modals/AGModal.ts

@@ -1,11 +0,0 @@
-import type { Ref } from 'vue';
-
-export interface IAGModal {
-    inline: Ref<boolean>;
-    cancellable: Ref<boolean>;
-    close(result?: unknown): Promise<void>;
-}
-
-export interface IAGModalDefaultSlotProps {
-    close(result?: unknown): Promise<void>;
-}

package/src/components/modals/AGModal.vue

@@ -1,39 +0,0 @@
-<template>
-    <AGHeadlessModal
-        ref="$modal"
-        v-slot="{ close }: IAGHeadlessModalDefaultSlotProps"
-        v-bind="props"
-        class="relative z-50"
-    >
-        <div class="fixed inset-0 flex items-center justify-center p-8">
-            <AGHeadlessModalPanel class="flex max-h-full max-w-full flex-col overflow-hidden bg-white p-4">
-                <AGHeadlessModalTitle v-if="title" class="mb-2 text-lg font-semibold">
-                    <AGMarkdown :text="title" inline />
-                </AGHeadlessModalTitle>
-                <div class="flex max-h-full flex-col overflow-auto" v-bind="$attrs">
-                    <slot :close="close" />
-                </div>
-            </AGHeadlessModalPanel>
-        </div>
-    </AGHeadlessModal>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-import { useModalExpose, useModalProps } from '@/components/headless/modals/AGHeadlessModal';
-import type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from '@/components/headless/modals/AGHeadlessModal';
-
-import type { IAGModal } from './AGModal';
-
-import AGHeadlessModal from '../headless/modals/AGHeadlessModal.vue';
-import AGHeadlessModalPanel from '../headless/modals/AGHeadlessModalPanel.vue';
-import AGHeadlessModalTitle from '../headless/modals/AGHeadlessModalTitle.vue';
-import AGMarkdown from '../lib/AGMarkdown.vue';
-
-const props = defineProps(useModalProps());
-const $modal = ref<IAGHeadlessModal>();
-
-defineOptions({ inheritAttrs: false });
-defineExpose<IAGModal>(useModalExpose($modal));
-</script>