@aerogel/core 0.0.0-next.7f6ed5a1f91688a86bf5ede2adc465e4fd6cfdea → 0.0.0-next.824cf5311c4335d119158f507dad094ed4f4f0b6

package/src/components/lib/AGMarkdown.vue

@@ -0,0 +1,36 @@
+<template>
+    <root />
+</template>
+
+<script setup lang="ts">
+import { computed, h } from 'vue';
+
+import { renderMarkdown } from '@/utils/markdown';
+import { booleanProp, objectProp, stringProp } from '@/utils/vue';
+import { translate } from '@/lang';
+
+const props = defineProps({
+    as: stringProp(),
+    inline: booleanProp(),
+    langKey: stringProp(),
+    langParams: objectProp<Record<string, unknown>>(),
+    text: stringProp(),
+});
+
+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'), { class: props.inline ? '' : 'prose', innerHTML: html.value });
+</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/AGStartupCrash.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="grid flex-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!') }}
+            </h1>
+            <AGMarkdown
+                :text="
+                    $td(
+                        'startupCrash.message',
+                        'Something failed trying to start the application.\n\nHere\'s some things you can do:'
+                    )
+                "
+                class="mt-4 text-center"
+            />
+            <div class="mt-4 flex flex-col space-y-4">
+                <AGButton color="danger" @click="$app.reload()">
+                    {{ $td('startupCrash.reload', 'Try again') }}
+                </AGButton>
+                <AGButton color="danger" @click="$errors.inspect($errors.startupErrors)">
+                    {{ $td('startupCrash.inspect', 'View error details') }}
+                </AGButton>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import AGMarkdown from './AGMarkdown.vue';
+import AGButton from '../forms/AGButton.vue';
+</script>

package/src/components/lib/index.ts

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

package/src/components/modals/AGConfirmModal.ts

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

@@ -0,0 +1,26 @@
+<template>
+    <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)">
+                {{ renderedAcceptText }}
+            </AGButton>
+            <AGButton color="secondary" @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

@@ -0,0 +1,46 @@
+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 {
+    id: string;
+    description: string;
+    iconComponent: Component;
+    url?: string;
+    handler?(): void;
+}
+
+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

@@ -0,0 +1,54 @@
+<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/AGErrorReportModalButtons.vue

@@ -0,0 +1,111 @@
+<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"
+                :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>
+        </slot>
+    </div>
+</template>
+
+<script setup lang="ts">
+import IconConsole from '~icons/mdi/console';
+import IconCopy from '~icons/zondicons/copy';
+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 AGButton from '../forms/AGButton.vue';
+import type { IAGErrorReportModalButtonsDefaultSlotProps } from './AGErrorReportModal';
+
+const props = defineProps({
+    report: requiredObjectProp<ErrorReport>(),
+});
+const summary = computed(() =>
+    props.report.description ? `${props.report.title}: ${props.report.description}` : props.report.title);
+const githubReportUrl = computed(() => {
+    if (!App.sourceUrl) {
+        return false;
+    }
+
+    const issueTitle = encodeURIComponent(summary.value);
+    const issueBody = encodeURIComponent(
+        [
+            '[Please, explain here what you were trying to do when this error appeared]',
+            '',
+            'Error details:',
+            '```',
+            stringExcerpt(
+                props.report.details ?? 'Details missing from report',
+                1800 - issueTitle.length - App.sourceUrl.length,
+            ).trim(),
+            '```',
+        ].join('\n'),
+    );
+
+    return `${App.sourceUrl}/issues/new?title=${issueTitle}&body=${issueBody}`;
+});
+const buttons = computed(() =>
+    tap(
+        [
+            {
+                id: 'clipboard',
+                description: 'Copy to clipboard',
+                iconComponent: IconCopy,
+                async handler() {
+                    await navigator.clipboard.writeText(`${summary.value}\n\n${props.report.details}`);
+
+                    UI.showSnackbar(
+                        translateWithDefault('errors.copiedToClipboard', 'Debug information copied to clipboard'),
+                    );
+                },
+            },
+            {
+                id: 'console',
+                description: 'Log to console',
+                iconComponent: IconConsole,
+                handler() {
+                    const error = props.report.error ?? props.report;
+
+                    (window as { error?: unknown }).error = error;
+
+                    // eslint-disable-next-line no-console
+                    console.error(error);
+
+                    UI.showSnackbar(
+                        translateWithDefault(
+                            'errors.addedToConsole',
+                            'You can now use the **error** variable in the console',
+                        ),
+                    );
+                },
+            },
+        ],
+        (reportButtons: IAGErrorReportModalButtonsDefaultSlotProps[]) => {
+            if (!githubReportUrl.value) {
+                return;
+            }
+
+            reportButtons.push({
+                id: 'github',
+                description: 'Report in GitHub',
+                iconComponent: IconGitHub,
+                url: githubReportUrl.value,
+            });
+        },
+    ));
+</script>

package/src/components/modals/AGErrorReportModalTitle.vue

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

@@ -0,0 +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 };
+}

package/src/components/modals/AGLoadingModal.vue

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

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

package/src/components/modals/AGModal.vue

@@ -1,8 +1,16 @@
 <template>
-    <AGHeadlessModal v-slot="{ close }: IAGHeadlessModalDefaultSlotProps" class="relative z-50">
-        <div class="fixed inset-0 flex items-center justify-center">
-            <AGHeadlessModalPanel class="flex max-h-full max-w-full flex-col overflow-hidden bg-white">
-                <div class="flex max-h-full flex-col overflow-auto p-4">
+    <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>
@@ -11,8 +19,21 @@
 </template>
 
 <script setup lang="ts">
-import type { IAGHeadlessModalDefaultSlotProps } from '@/components/headless/modals/AGHeadlessModal';
+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>

package/src/components/modals/AGModalTitle.vue

@@ -0,0 +1,9 @@
+<template>
+    <AGHeadlessModalTitle class="mb-2 font-semibold">
+        <slot />
+    </AGHeadlessModalTitle>
+</template>
+
+<script setup lang="ts">
+import AGHeadlessModalTitle from '../headless/modals/AGHeadlessModalTitle.vue';
+</script>

package/src/components/modals/AGPromptModal.ts

@@ -0,0 +1,30 @@
+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 promptModalProps = {
+    title: stringProp(),
+    message: requiredStringProp(),
+    label: stringProp(),
+    defaultValue: stringProp(),
+    placeholder: stringProp(),
+    acceptText: stringProp(),
+    cancelText: stringProp(),
+};
+
+export type AGPromptModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof promptModalProps>>;
+
+export function usePromptModalProps(): typeof promptModalProps {
+    return promptModalProps;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function usePromptModal(props: ExtractPropTypes<typeof promptModalProps>) {
+    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/AGPromptModal.vue

@@ -0,0 +1,34 @@
+<template>
+    <AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false" :title="title">
+        <AGMarkdown :text="message" />
+
+        <AGForm :form="form" @submit="close(form.draft)">
+            <AGInput name="draft" :placeholder="placeholder" :label="label" />
+
+            <div class="mt-2 flex flex-row-reverse gap-2">
+                <AGButton submit>
+                    {{ renderedAcceptText }}
+                </AGButton>
+                <AGButton color="secondary" @click="close()">
+                    {{ renderedCancelText }}
+                </AGButton>
+            </div>
+        </AGForm>
+    </AGModal>
+</template>
+
+<script setup lang="ts">
+import AGModal from './AGModal.vue';
+import { usePromptModal, usePromptModalProps } from './AGPromptModal';
+import type { IAGModalDefaultSlotProps } from './AGModal';
+
+import AGButton from '../forms/AGButton.vue';
+import AGForm from '../forms/AGForm.vue';
+import AGInput from '../forms/AGInput.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
+import { requiredStringInput, useForm } from '../../forms';
+
+const props = defineProps(usePromptModalProps());
+const form = useForm({ draft: requiredStringInput(props.defaultValue ?? '') });
+const { renderedAcceptText, renderedCancelText } = usePromptModal(props);
+</script>

package/src/components/modals/index.ts

@@ -1,5 +1,17 @@
-import AGModal from './AGModal.vue';
-import AGModalContext from './AGModalContext.vue';
-import { IAGModal } from './AGModal';
+export * from './AGAlertModal';
+export * from './AGConfirmModal';
+export * from './AGErrorReportModal';
+export * from './AGLoadingModal';
+export * from './AGModal';
+export * from './AGModalContext';
+export * from './AGPromptModal';
 
-export { AGModal, AGModalContext, IAGModal };
+export { default as AGAlertModal } from './AGAlertModal.vue';
+export { default as AGConfirmModal } from './AGConfirmModal.vue';
+export { default as AGErrorReportModalButtons } from './AGErrorReportModalButtons.vue';
+export { default as AGErrorReportModalTitle } from './AGErrorReportModalTitle.vue';
+export { default as AGLoadingModal } from './AGLoadingModal.vue';
+export { default as AGModal } from './AGModal.vue';
+export { default as AGModalContext } from './AGModalContext.vue';
+export { default as AGModalTitle } from './AGModalTitle.vue';
+export { default as AGPromptModal } from './AGPromptModal.vue';

package/src/components/snackbars/AGSnackbar.vue

@@ -0,0 +1,36 @@
+<template>
+    <AGHeadlessSnackbar class="flex flex-row items-center justify-center gap-3 p-4" :class="styleClasses">
+        <AGMarkdown :text="message" inline />
+        <AGButton
+            v-for="(action, i) of actions"
+            :key="i"
+            :color="color"
+            @click="activate(action)"
+        >
+            {{ action.text }}
+        </AGButton>
+    </AGHeadlessSnackbar>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { Colors } from '@/components/constants';
+import { useSnackbar, useSnackbarProps } from '@/components/headless/snackbars';
+
+import AGButton from '../forms/AGButton.vue';
+import AGHeadlessSnackbar from '../headless/snackbars/AGHeadlessSnackbar.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
+
+const props = defineProps(useSnackbarProps());
+const { activate } = useSnackbar(props);
+const styleClasses = computed(() => {
+    switch (props.color) {
+        case Colors.Danger:
+            return 'bg-red-200 text-red-900';
+        default:
+        case Colors.Secondary:
+            return 'bg-gray-900 text-white';
+    }
+});
+</script>

package/src/components/snackbars/index.ts

@@ -0,0 +1,3 @@
+import AGSnackbar from './AGSnackbar.vue';
+
+export { AGSnackbar };