@aerogel/core 0.0.0-next.926bde19326fe7b6b24b277666936862b64d8295 → 0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c

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

@@ -0,0 +1,76 @@
+<template>
+    <Listbox
+        v-slot="{ value, open, disabled }: ComponentProps"
+        :model-value="selectedOption?.value"
+        @update:model-value="update($event)"
+    >
+        <slot :value="value" :open="open" :disabled="disabled" />
+    </Listbox>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, provide } from 'vue';
+import { isObject, 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 { ComponentProps } from '@/utils/vue';
+
+import { useSelectProps } from './AGHeadlessSelect';
+import type { IAGHeadlessSelect, IAGSelectOption, IAGSelectOptionValue } from './AGHeadlessSelect';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+    modelValue: mixedProp<IAGSelectOptionValue>(),
+    ...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),
+        };
+
+        return option;
+    }));
+const selectedOption = computed(() => {
+    const selectedOptionValue = form && props.name ? form.getFieldValue(props.name) : props.modelValue;
+
+    return options.value.find((option) => option.value === selectedOptionValue);
+});
+const errors = computed(() => {
+    if (!form || !props.name) {
+        return null;
+    }
+
+    return form.errors[props.name] ?? null;
+});
+
+function update(value: IAGSelectOptionValue) {
+    if (form && props.name) {
+        form.setFieldValue(props.name, value);
+
+        return;
+    }
+
+    emit('update:modelValue', value);
+}
+
+const api: IAGHeadlessSelect = {
+    id: `select-${uuid()}`,
+    options,
+    noSelectionText,
+    selectedOption,
+    errors,
+    label: computed(() => props.label),
+    buttonText: computed(() => selectedOption.value?.text ?? noSelectionText.value),
+    update,
+};
+
+provide<IAGHeadlessSelect>('select', api);
+defineExpose<IAGHeadlessSelect>(api);
+</script>

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

@@ -0,0 +1,24 @@
+<template>
+    <ListboxButton v-slot="{ value, open, disabled }: ComponentProps">
+        <slot :value="value" :open="open" :disabled="disabled">
+            <span :class="textClass">{{ select?.buttonText }}</span>
+        </slot>
+        <slot name="icon" />
+    </ListboxButton>
+</template>
+
+<script setup lang="ts">
+import { ListboxButton } from '@headlessui/vue';
+
+import { injectReactiveOrFail, stringProp } from '@/utils/vue';
+import type { ComponentProps } from '@/utils/vue';
+
+import type { IAGHeadlessSelect } from './AGHeadlessSelect';
+
+defineProps({ textClass: stringProp() });
+
+const select = injectReactiveOrFail<IAGHeadlessSelect>(
+    'select',
+    '<AGHeadlessSelectButton> must be a child of a <AGHeadlessSelect>',
+);
+</script>

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

@@ -0,0 +1,26 @@
+<template>
+    <p v-if="errorMessage" :id="`${select.id}-error`">
+        {{ errorMessage }}
+    </p>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { injectReactiveOrFail } from '@/utils/vue';
+import { translateWithDefault } from '@/lang/utils';
+
+import type { IAGHeadlessSelect } from './AGHeadlessSelect';
+
+const select = injectReactiveOrFail<IAGHeadlessSelect>(
+    'select',
+    '<AGHeadlessSelectError> must be a child of a <AGHeadlessSelect>',
+);
+const errorMessage = computed(() => {
+    if (!select.errors) {
+        return null;
+    }
+
+    return translateWithDefault(`errors.${select.errors[0]}`, `Error: ${select.errors[0]}`);
+});
+</script>

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

@@ -0,0 +1,24 @@
+<template>
+    <ListboxLabel v-if="show" v-slot="{ open, disabled }: ComponentProps">
+        <slot :open="open" :disabled="disabled">
+            {{ select.label }}
+        </slot>
+    </ListboxLabel>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue';
+import { ListboxLabel } from '@headlessui/vue';
+
+import { injectReactiveOrFail } from '@/utils/vue';
+import type { ComponentProps } from '@/utils/vue';
+
+import type { IAGHeadlessSelect } from './AGHeadlessSelect';
+
+const select = injectReactiveOrFail<IAGHeadlessSelect>(
+    'select',
+    '<AGHeadlessSelectLabel> must be a child of a <AGHeadlessSelect>',
+);
+const slots = useSlots();
+const show = computed(() => !!(select.label || slots.default));
+</script>

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

@@ -0,0 +1,4 @@
+export type IAGHeadlessSelectOptionSlotProps = {
+    active: boolean;
+    selected: boolean;
+};

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

@@ -0,0 +1,39 @@
+<template>
+    <ListboxOption v-slot="{ active, selected, disabled }: ComponentProps" :value="value" as="template">
+        <slot :active="active" :selected="selected" :disabled="disabled">
+            <li
+                :class="{
+                    [activeClass ?? 'active']: active,
+                    [inactiveClass ?? 'inactive']: !active,
+                    [selectedClass ?? 'selected']: selected,
+                    [unselectedClass ?? 'unselected']: !selected,
+                }"
+            >
+                {{ option?.text }}
+            </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 { IAGHeadlessSelect, IAGSelectOptionValue } from './AGHeadlessSelect';
+
+const props = defineProps({
+    value: requiredMixedProp<IAGSelectOptionValue>(),
+    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/AGHeadlessSelectOptions.ts

@@ -0,0 +1,3 @@
+import { ListboxOptions } from '@headlessui/vue';
+
+export default ListboxOptions;

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

@@ -1,6 +1,14 @@
-export { IAGHeadlessInput } from './AGHeadlessInput';
+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 AGHeadlessInputError } from './AGHeadlessInputError.vue';
 export { default as AGHeadlessInputInput } from './AGHeadlessInputInput.vue';
 export { default as AGHeadlessInputLabel } from './AGHeadlessInputLabel.vue';
+export { default as AGHeadlessSelect } from './AGHeadlessSelect.vue';
+export { default as AGHeadlessSelectButton } from './AGHeadlessSelectButton.vue';
+export { default as AGHeadlessSelectError } from './AGHeadlessSelectError.vue';
+export { default as AGHeadlessSelectLabel } from './AGHeadlessSelectLabel.vue';
+export { default as AGHeadlessSelectOption } from './AGHeadlessSelectOption.vue';
+export { default as AGHeadlessSelectOptions } from './AGHeadlessSelectOptions';

package/src/components/headless/index.ts

@@ -1,2 +1,3 @@
 export * from './forms';
 export * from './modals';
+export * from './snackbars';

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

@@ -1,7 +1,16 @@
 import type { IAGModal } from '@/components/modals/AGModal';
+import { booleanProp } from '@/utils';
 
 export interface IAGHeadlessModal extends IAGModal {}
 
 export interface IAGHeadlessModalDefaultSlotProps {
     close(result?: unknown): Promise<void>;
 }
+
+export const modalProps = {
+    cancellable: booleanProp(true),
+};
+
+export function useModalProps(): typeof modalProps {
+    return modalProps;
+}

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

@@ -1,7 +1,11 @@
 <template>
     <DialogPanel>
         <slot />
-        <AGModalContext v-if="childModal" :child-index="modal.childIndex + 1" :modal="childModal" />
+
+        <template v-if="childModal">
+            <div class="pointer-events-none fixed inset-0 z-50 bg-black/30" />
+            <AGModalContext :child-index="modal.childIndex + 1" :modal="childModal" />
+        </template>
     </DialogPanel>
 </template>
 

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/AGHeadlessSnackbar.vue

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

@@ -0,0 +1,25 @@
+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(),
+    message: requiredStringProp(),
+    actions: arrayProp<SnackbarAction>(() => []),
+    color: enumProp(SnackbarColors, Colors.Secondary),
+};
+
+export function useSnackbarProps(): typeof snackbarProps {
+    return snackbarProps;
+}

package/src/components/index.ts

@@ -3,7 +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/AGErrorMessage.vue

@@ -0,0 +1,16 @@
+<template>
+    <AGMarkdown :text="message" inline />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import Errors from '@/errors/Errors';
+import { requiredObjectProp } from '@/utils/vue';
+import type { ErrorSource } from '@/errors/Errors.state';
+
+import AGMarkdown from './AGMarkdown.vue';
+
+const props = defineProps({ error: requiredObjectProp<ErrorSource>() });
+const message = computed(() => Errors.getErrorMessage(props.error));
+</script>

package/src/components/lib/AGLink.vue

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

@@ -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/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,4 @@
+export { default as AGErrorMessage } from './AGErrorMessage.vue';
+export { default as AGLink } from './AGLink.vue';
+export { default as AGMarkdown } from './AGMarkdown.vue';
+export { default as AGStartupCrash } from './AGStartupCrash.vue';

package/src/components/modals/AGAlertModal.vue

@@ -5,7 +5,6 @@
             :text="title"
             as="h2"
             class="font-semibold"
-            raw
             inline
         />
         <AGMarkdown :text="message" />
@@ -17,7 +16,7 @@ import { requiredStringProp, stringProp } from '@/utils/vue';
 
 import AGModal from './AGModal.vue';
 
-import AGMarkdown from '../basic/AGMarkdown.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
 
 defineProps({
     title: stringProp(),

package/src/components/modals/AGConfirmModal.ts

@@ -0,0 +1,10 @@
+import { requiredStringProp, stringProp } from '@/utils';
+
+export const confirmModalProps = {
+    title: stringProp(),
+    message: requiredStringProp(),
+};
+
+export function useConfirmModalProps(): typeof confirmModalProps {
+    return confirmModalProps;
+}

package/src/components/modals/AGConfirmModal.vue

@@ -7,7 +7,7 @@
             <AGButton @click="close(true)">
                 {{ $td('ui.ok', 'OK') }}
             </AGButton>
-            <AGButton secondary @click="close()">
+            <AGButton color="secondary" @click="close()">
                 {{ $td('ui.cancel', 'Cancel') }}
             </AGButton>
         </div>
@@ -21,7 +21,7 @@ import AGModal from './AGModal.vue';
 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(),

package/src/components/modals/AGErrorReportModal.ts

@@ -0,0 +1,20 @@
+import type { Component } from 'vue';
+
+import { requiredArrayProp } 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 function useErrorReportModalProps(): typeof errorReportModalProps {
+    return errorReportModalProps;
+}

package/src/components/modals/AGErrorReportModal.vue

@@ -0,0 +1,62 @@
+<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="$td('errors.previousReport', 'Show previous report')"
+                            :aria-label="$td('errors.previousReport', 'Show previous report')"
+                            @click="activeReportIndex--"
+                        >
+                            <IconCheveronLeft aria-hidden="true" class="h-4 w-4" />
+                        </AGButton>
+                        <AGButton
+                            color="clear"
+                            :disabled="activeReportIndex === reports.length - 1"
+                            :title="$td('errors.nextReport', 'Show next report')"
+                            :aria-label="$td('errors.nextReport', 'Show next report')"
+                            @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="report.details ?? $td('errors.detailsEmpty', 'This error is missing a stacktrace.')"
+        />
+    </AGModal>
+</template>
+
+<script setup lang="ts">
+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 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 = ref(0);
+const report = computed(() => props.reports[activeReportIndex.value] as ErrorReport);
+</script>