@aerogel/core 0.0.0-next.fd1bd21aea7a9ab8c4eab69a5f5776db5de8bf35 → 0.1.0

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

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

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

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

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

@@ -1,39 +0,0 @@
-<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,
-                }"
-            >
-                {{ select.renderText(value) }}
-            </li>
-        </slot>
-    </ListboxOption>
-</template>
-
-<script setup lang="ts">
-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 } from './AGHeadlessSelect';
-
-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>',
-);
-</script>

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

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

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

@@ -1,10 +0,0 @@
-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,17 +0,0 @@
-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';
-export { default as AGHeadlessSelectLabel } from './AGHeadlessSelectLabel.vue';
-export { default as AGHeadlessSelectOption } from './AGHeadlessSelectOption.vue';
-export { default as AGHeadlessSelectOptions } from './AGHeadlessSelectOptions';

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

@@ -1,34 +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),
-    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

@@ -1,86 +0,0 @@
-<template>
-    <Dialog ref="$root" :open="true" @close="cancellable && close()">
-        <slot :close="close" />
-    </Dialog>
-</template>
-
-<script setup lang="ts">
-import { ref, toRef } from 'vue';
-import { Dialog } from '@headlessui/vue';
-import type { VNode } from 'vue';
-
-import Events from '@/services/Events';
-import { useEvent } from '@/utils/composition/events';
-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(useModalProps());
-const $root = ref<{ $el?: HTMLElement } | null>(null);
-const hidden = ref(true);
-const closed = ref(false);
-const { modal } = injectReactiveOrFail<IAGModalContext>(
-    'modal',
-    'could not obtain modal reference from <AGHeadlessModal>, ' +
-        'did you render this component manually? Show it using $ui.openModal() instead',
-);
-
-async function hide(): Promise<void> {
-    if (!$root.value?.$el) {
-        return;
-    }
-
-    hidden.value = true;
-}
-
-async function show(): Promise<void> {
-    if (!$root.value?.$el) {
-        return;
-    }
-
-    hidden.value = false;
-}
-
-async function close(result?: unknown) {
-    if (closed.value) {
-        return;
-    }
-
-    Events.emit('modal-will-close', { modal, result });
-
-    await hide();
-
-    closed.value = true;
-
-    Events.emit('modal-closed', { modal, result });
-}
-
-useEvent('close-modal', async ({ id, result }) => {
-    if (id !== modal.id) {
-        return;
-    }
-
-    await close(result);
-});
-
-useEvent('hide-modal', async ({ id }) => {
-    if (id !== modal.id) {
-        return;
-    }
-
-    await hide();
-});
-
-useEvent('show-modal', async ({ id }) => {
-    if (id !== modal.id) {
-        return;
-    }
-
-    await show();
-});
-
-defineSlots<{ default(props: IAGHeadlessModalDefaultSlotProps): VNode[] }>();
-defineExpose<IAGHeadlessModal>({ close, cancellable: toRef(props, 'cancellable') });
-</script>

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

@@ -1,28 +0,0 @@
-<template>
-    <DialogPanel>
-        <slot />
-
-        <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>
-
-<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 = injectReactiveOrFail<IAGModalContext>(
-    'modal',
-    'could not obtain modal reference from <AGHeadlessModalPanel>, ' +
-        'did you render this component manually? Show it using $ui.openModal() instead',
-);
-const childModal = computed(() => UI.modals[modal.childIndex] ?? null);
-</script>

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

@@ -1,13 +0,0 @@
-<template>
-    <DialogTitle :as="as">
-        <slot />
-    </DialogTitle>
-</template>
-
-<script setup lang="ts">
-import { DialogTitle } from '@headlessui/vue';
-
-import { stringProp } from '@/utils/vue';
-
-defineProps({ as: stringProp('h2') });
-</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/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,41 +0,0 @@
-<template>
-    <root />
-</template>
-
-<script setup lang="ts">
-import { computed, h, useAttrs } 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 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,
-        ...attrs,
-        class: `${attrs.class ?? ''} ${props.inline ? '' : 'prose'}`,
-    });
-</script>

package/src/components/lib/AGMeasured.vue

@@ -1,15 +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') });
-
-const measured = ref(false);
-</script>

package/src/components/lib/AGStartupCrash.vue

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

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

package/src/components/modals/AGAlertModal.ts

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

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