@aerogel/core 0.0.0-next.d824b40e5d06757cd9f47c9f771d916185df4f05 → 0.0.0-next.f1f5a990033d966dc0bb12d251110fbc9350dcc7

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

@@ -1,3 +1,8 @@
+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 {}
@@ -5,3 +10,25 @@ export interface IAGHeadlessModal extends IAGModal {}
 export interface IAGHeadlessModalDefaultSlotProps {
     close(result?: unknown): Promise<void>;
 }
+
+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/modals/index.ts

@@ -1,6 +1,4 @@
-import AGHeadlessModal from './AGHeadlessModal.vue';
-import AGHeadlessModalPanel from './AGHeadlessModalPanel.vue';
-import AGHeadlessModalTitle from './AGHeadlessModalTitle.vue';
-import type { IAGHeadlessModal } from './AGHeadlessModal';
-
-export { AGHeadlessModal, AGHeadlessModalPanel, AGHeadlessModalTitle, IAGHeadlessModal };
+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/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/index.ts

@@ -3,9 +3,9 @@ import AGAppOverlays from './AGAppOverlays.vue';
 
 export { AGAppLayout, AGAppOverlays };
 
-export * from './basic';
 export * from './constants';
 export * from './forms';
 export * from './headless';
+export * from './lib';
 export * from './modals';
 export * from './snackbars';

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,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 '../basic/AGMarkdown.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
 
-defineProps({
-    title: stringProp(),
-    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

@@ -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 '../basic/AGMarkdown.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,19 +41,14 @@
 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';
 import AGErrorReportModalTitle from './AGErrorReportModalTitle.vue';
-import AGMarkdown from '../basic/AGMarkdown.vue';
+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/AGErrorReportModalTitle.vue

@@ -8,7 +8,7 @@ import { computed } from 'vue';
 import { numberProp, requiredObjectProp } from '@/utils/vue';
 import type { ErrorReport } from '@/errors';
 
-import AGMarkdown from '../basic/AGMarkdown.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
 
 const props = defineProps({
     report: requiredObjectProp<ErrorReport>(),

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

@@ -5,15 +5,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-
-import { stringProp } from '@/utils/vue';
-import { translateWithDefault } from '@/lang/utils';
-
 import AGModal from './AGModal.vue';
+import { useLoadingModal, useLoadingModalProps } from './AGLoadingModal';
 
-import AGMarkdown from '../basic/AGMarkdown.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
 
-const props = defineProps({ message: stringProp() });
-const renderedMessage = computed(() => props.message ?? translateWithDefault('ui.loading', 'Loading...'));
+const props = defineProps(useLoadingModalProps());
+const { renderedMessage } = useLoadingModal(props);
 </script>

package/src/components/modals/AGModal.ts

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

package/src/components/modals/AGModal.vue

@@ -1,13 +1,16 @@
 <template>
     <AGHeadlessModal
-        ref="$headlessModal"
+        ref="$modal"
         v-slot="{ close }: IAGHeadlessModalDefaultSlotProps"
-        :cancellable="cancellable"
+        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">
-                <div class="flex max-h-full flex-col overflow-auto p-4" v-bind="$attrs">
+            <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>
@@ -16,22 +19,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
-import { booleanProp } from '@/utils';
+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 $headlessModal = ref<IAGHeadlessModal>();
+const props = defineProps(useModalProps());
+const $modal = ref<IAGHeadlessModal>();
 
 defineOptions({ inheritAttrs: false });
-defineProps({ cancellable: booleanProp(true) });
-defineExpose<IAGModal>({
-    close: async () => $headlessModal.value?.close(),
-    cancellable: computed(() => !!$headlessModal.value?.cancellable),
-});
+defineExpose<IAGModal>(useModalExpose($modal));
 </script>

package/src/components/modals/index.ts

@@ -7,7 +7,10 @@ import AGModal from './AGModal.vue';
 import AGModalTitle from './AGModalTitle.vue';
 import AGModalContext from './AGModalContext.vue';
 
+export * from './AGAlertModal';
+export * from './AGConfirmModal';
 export * from './AGErrorReportModal';
+export * from './AGLoadingModal';
 export * from './AGModal';
 export * from './AGModalContext';
 

package/src/components/snackbars/AGSnackbar.vue

@@ -15,16 +15,15 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import UI from '@/ui/UI';
 import { Colors } from '@/components/constants';
-import { useSnackbarProps } from '@/components/headless';
-import type { SnackbarAction } from '@/components/headless';
+import { useSnackbar, useSnackbarProps } from '@/components/headless/snackbars';
 
 import AGButton from '../forms/AGButton.vue';
 import AGHeadlessSnackbar from '../headless/snackbars/AGHeadlessSnackbar.vue';
-import AGMarkdown from '../basic/AGMarkdown.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
 
 const props = defineProps(useSnackbarProps());
+const { activate } = useSnackbar(props);
 const styleClasses = computed(() => {
     switch (props.color) {
         case Colors.Danger:
@@ -34,9 +33,4 @@ const styleClasses = computed(() => {
             return 'bg-gray-900 text-white';
     }
 });
-
-function activate(action: SnackbarAction): void {
-    action.handler?.();
-    action.dismiss && UI.hideSnackbar(props.id);
-}
 </script>

package/src/components/utils.ts

@@ -0,0 +1,10 @@
+export function extractComponentProps<T extends Record<string, unknown>>(
+    values: Record<string, unknown>,
+    definitions: Record<string, unknown>,
+): T {
+    return Object.keys(definitions).reduce((extracted, prop) => {
+        extracted[prop] = values[prop];
+
+        return extracted;
+    }, {} as Record<string, unknown>) as T;
+}

package/src/directives/index.ts

@@ -3,9 +3,11 @@ import type { Directive } from 'vue';
 import { definePlugin } from '@/plugins';
 
 import initialFocus from './initial-focus';
+import measure from './measure';
 
 const builtInDirectives: Record<string, Directive> = {
     'initial-focus': initialFocus,
+    'measure': measure,
 };
 
 export default definePlugin({
@@ -22,7 +24,7 @@ export default definePlugin({
 });
 
 declare module '@/bootstrap/options' {
-    interface AerogelOptions {
+    export interface AerogelOptions {
         directives?: Record<string, Directive>;
     }
 }

package/src/directives/measure.ts

@@ -0,0 +1,12 @@
+import { defineDirective } from '@/utils/vue';
+
+export default defineDirective({
+    mounted(element: HTMLElement, { value }: { value?: () => unknown }) {
+        const sizes = element.getBoundingClientRect();
+
+        element.style.setProperty('--width', `${sizes.width}px`);
+        element.style.setProperty('--height', `${sizes.height}px`);
+
+        value?.();
+    },
+});