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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.0.0-next.c33ad773d3eb977461630ff22012d99eeedf46cb",
+    "version": "0.0.0-next.c38a10cd5e81c5f04469ef79e59a53e6bfd3df55",
     "type": "module",
     "sideEffects": false,
     "exports": {
@@ -23,6 +23,9 @@
         "verify": "noeldemartin-verify"
     },
     "peerDependencies": {
+        "@tailwindcss/forms": "^0.5.10",
+        "@tailwindcss/typography": "^0.5.16",
+        "tailwindcss": "^4.1.4",
         "vue": "^3.5.0"
     },
     "dependencies": {
@@ -30,10 +33,12 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dompurify": "^3.2.4",
+        "eruda": "^3.4.1",
         "marked": "^15.0.7",
         "pinia": "^2.1.6",
         "reka-ui": "^2.2.0",
-        "tailwind-merge": "^3.1.0"
+        "tailwind-merge": "^3.1.0",
+        "vue-component-type-helpers": "^2.2.8"
     },
     "devDependencies": {
         "@aerogel/vite": "*"

package/src/components/AppLayout.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex min-h-full flex-col text-base leading-tight font-normal text-gray-900 antialiased">
         <slot v-if="$errors.hasStartupErrors" name="startup-crash">
-            <component :is="$ui.requireComponent(UIComponents.StartupCrash)" />
+            <component :is="$ui.requireComponent('startup-crash')" />
         </slot>
         <slot v-else />
 
@@ -10,7 +10,5 @@
 </template>
 
 <script setup lang="ts">
-import { UIComponents } from '@aerogel/core/ui/UI';
-
 import AppOverlays from './AppOverlays.vue';
 </script>

package/src/components/AppOverlays.vue

@@ -4,33 +4,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-
-import { useEvent } from '@aerogel/core/utils/composition/events';
-
 import AppModals from './AppModals.vue';
 import AppToasts from './AppToasts.vue';
-
-const $backdrop = ref<HTMLElement | null>(null);
-const backdropHidden = ref(true);
-
-useEvent('show-overlays-backdrop', async () => {
-    if (!$backdrop.value || !backdropHidden.value) {
-        return;
-    }
-
-    backdropHidden.value = false;
-
-    $backdrop.value.classList.remove('opacity-0');
-});
-
-useEvent('hide-overlays-backdrop', async () => {
-    if (!$backdrop.value || backdropHidden.value) {
-        return;
-    }
-
-    backdropHidden.value = true;
-
-    $backdrop.value.classList.add('opacity-0');
-});
 </script>

package/src/components/contracts/AlertModal.ts

@@ -1,4 +1,19 @@
+import { computed } from 'vue';
+
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
+
 export interface AlertModalProps {
     title?: string;
     message: string;
 }
+
+export interface AlertModalExpose extends ModalExpose<void> {}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useAlertModal(props: AlertModalProps) {
+    const renderedTitle = computed(() => props.title ?? translateWithDefault('ui.alert', 'Alert'));
+    const titleHidden = computed(() => !props.title);
+
+    return { renderedTitle, titleHidden };
+}

package/src/components/contracts/ConfirmModal.ts

@@ -1,9 +1,11 @@
 import { computed } from 'vue';
 
 import { translateWithDefault } from '@aerogel/core/lang';
-import { FormFieldTypes, useForm } from '@aerogel/core/forms';
+import { useForm } from '@aerogel/core/utils/composition/forms';
 import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
-import type { FormFieldDefinition } from '@aerogel/core/forms';
+import type { FormFieldDefinition } from '@aerogel/core/forms/FormController';
+import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
+import type { Nullable } from '@noeldemartin/utils';
 
 export type ConfirmModalCheckboxes = Record<string, { label: string; default?: boolean; required?: boolean }>;
 
@@ -19,23 +21,28 @@ export interface ConfirmModalProps {
     required?: boolean;
 }
 
+export interface ConfirmModalExpose extends ModalExpose<boolean | [boolean, Record<string, Nullable<boolean>>]> {}
+
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function useConfirmModal(props: ConfirmModalProps) {
     const form = useForm(
         Object.entries(props.checkboxes ?? {}).reduce(
             (values, [name, checkbox]) => ({
                 [name]: {
-                    type: FormFieldTypes.Boolean,
+                    type: 'boolean',
                     default: checkbox.default,
                     required: checkbox.required ? 'required' : undefined,
                 },
                 ...values,
             }),
-            {} as Record<string, FormFieldDefinition>,
+            {} as Record<string, FormFieldDefinition<'boolean'>>,
         ),
     );
+
+    const renderedTitle = computed(() => props.title ?? translateWithDefault('ui.confirm', 'Confirm'));
+    const titleHidden = computed(() => !props.title);
     const renderedAcceptText = computed(() => props.acceptText ?? translateWithDefault('ui.accept', 'Ok'));
     const renderedCancelText = computed(() => props.cancelText ?? translateWithDefault('ui.cancel', 'Cancel'));
 
-    return { form, renderedAcceptText, renderedCancelText };
+    return { form, renderedTitle, titleHidden, renderedAcceptText, renderedCancelText };
 }

package/src/components/contracts/DropdownMenu.ts

@@ -1,11 +1,25 @@
 import type { DropdownMenuContentProps } from 'reka-ui';
 
-export type DropdownMenuOption = {
+import type { Falsifiable } from '@aerogel/core/utils/types';
+
+export type DropdownMenuOptionData = {
     label: string;
-    click: () => unknown;
+    href?: string;
+    route?: string;
+    routeParams?: object;
+    routeQuery?: object;
+    click?: () => unknown;
+    class?: string;
 };
 
 export interface DropdownMenuProps {
     align?: DropdownMenuContentProps['align'];
-    options?: DropdownMenuOption[];
+    side?: DropdownMenuContentProps['side'];
+    options?: Falsifiable<DropdownMenuOptionData>[];
+}
+
+export interface DropdownMenuExpose {
+    align?: DropdownMenuContentProps['align'];
+    side?: DropdownMenuContentProps['side'];
+    options?: DropdownMenuOptionData[];
 }

package/src/components/contracts/ErrorReportModal.ts

@@ -2,18 +2,22 @@ import { computed, ref } from 'vue';
 
 import { translateWithDefault } from '@aerogel/core/lang';
 import type { ErrorReport } from '@aerogel/core/errors';
+import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
 
 export interface ErrorReportModalProps {
+    report: ErrorReport;
     reports: ErrorReport[];
 }
 
+export interface ErrorReportModalExpose extends ModalExpose {}
+
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function useErrorReportModal(props: ErrorReportModalProps) {
-    const activeReportIndex = ref(0);
-    const report = computed(() => props.reports[activeReportIndex.value] as ErrorReport);
+    const activeReportIndex = ref(props.reports.includes(props.report) ? props.reports.indexOf(props.report) : 0);
+    const activeReport = computed(() => props.reports[activeReportIndex.value] as ErrorReport);
     const details = computed(
         () =>
-            report.value.details?.trim() ||
+            activeReport.value.details?.trim() ||
             translateWithDefault('errors.detailsEmpty', 'This error is missing a stacktrace.'),
     );
     const previousReportText = translateWithDefault('errors.previousReport', 'Show previous report');
@@ -24,6 +28,6 @@ export function useErrorReportModal(props: ErrorReportModalProps) {
         details,
         nextReportText,
         previousReportText,
-        report,
+        activeReport,
     };
 }

package/src/components/contracts/Input.ts

@@ -3,24 +3,24 @@ import type { Nullable } from '@noeldemartin/utils';
 
 import type { FormFieldValue } from '@aerogel/core/forms';
 
-export interface InputProps {
+export interface InputProps<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> {
     name?: string;
     label?: string;
     description?: string;
-    modelValue?: FormFieldValue;
+    modelValue?: T;
 }
 
-export interface InputEmits {
-    'update:modelValue': [value: Nullable<FormFieldValue>];
+export interface InputEmits<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> {
+    'update:modelValue': [value: T];
 }
 
-export interface InputExpose {
+export interface InputExpose<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> {
     id: string;
     name: ComputedRef<Nullable<string>>;
     label: ComputedRef<Nullable<string>>;
     description: ComputedRef<Nullable<string | boolean>>;
-    value: ComputedRef<Nullable<FormFieldValue>>;
+    value: ComputedRef<T>;
     required: ComputedRef<Nullable<boolean>>;
     errors: DeepReadonly<Ref<Nullable<string[]>>>;
-    update(value: Nullable<FormFieldValue>): void;
+    update(value: T): void;
 }

package/src/components/contracts/LoadingModal.ts

@@ -1,7 +1,9 @@
-import type { Job } from '@aerogel/core/jobs';
-import { translateWithDefault } from '@aerogel/core/lang';
 import { computed } from 'vue';
 
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { Job } from '@aerogel/core/jobs';
+import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
+
 export interface LoadingModalProps {
     title?: string;
     message?: string;
@@ -9,10 +11,16 @@ export interface LoadingModalProps {
     job?: Job;
 }
 
+export interface LoadingModalExpose extends ModalExpose {}
+
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function useLoadingModal(props: LoadingModalProps) {
-    const renderedMessage = computed(() => props.message ?? translateWithDefault('ui.loading', 'Loading...'));
+    const renderedTitle = computed(() => props.title ?? translateWithDefault('ui.loading', 'Loading'));
+    const renderedMessage = computed(
+        () => props.message ?? translateWithDefault('ui.loadingInProgress', 'Loading in progress...'),
+    );
     const showProgress = computed(() => typeof props.progress === 'number' || !!props.job);
+    const titleHidden = computed(() => !props.title);
 
-    return { renderedMessage, showProgress };
+    return { renderedTitle, renderedMessage, titleHidden, showProgress };
 }

package/src/components/contracts/Modal.ts

@@ -1,13 +1,21 @@
+import type { Nullable } from '@noeldemartin/utils';
+import type { DialogContent } from 'reka-ui';
+
+export type ModalContentInstance = Nullable<InstanceType<typeof DialogContent>>;
+
 export interface ModalProps {
     persistent?: boolean;
     title?: string;
+    titleHidden?: boolean;
     description?: string;
+    descriptionHidden?: boolean;
 }
 
-export interface ModalSlots {
-    default(props: { close(result?: unknown): Promise<void> }): unknown;
+export interface ModalSlots<Result = void> {
+    default(props: { close(result?: Result): Promise<void> }): unknown;
 }
 
-export interface ModalExpose {
-    close(result?: unknown): Promise<void>;
+export interface ModalExpose<Result = void> {
+    close(result?: Result): Promise<void>;
+    $content: ModalContentInstance;
 }

package/src/components/contracts/PromptModal.ts

@@ -1,8 +1,10 @@
 import { computed } from 'vue';
 
-import { requiredStringInput, useForm } from '@aerogel/core/forms';
+import { useForm } from '@aerogel/core/utils/composition/forms';
+import { requiredStringInput } from '@aerogel/core/forms/utils';
 import { translateWithDefault } from '@aerogel/core/lang';
 import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
+import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
 
 export interface PromptModalProps {
     title?: string;
@@ -16,13 +18,17 @@ export interface PromptModalProps {
     cancelVariant?: ButtonVariant;
 }
 
+export interface PromptModalExpose extends ModalExpose<string> {}
+
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function usePromptModal(props: PromptModalProps) {
     const form = useForm({
         draft: requiredStringInput(props.defaultValue ?? ''),
     });
+    const renderedTitle = computed(() => props.title ?? props.message);
+    const renderedMessage = computed(() => (props.title ? props.message : null));
     const renderedAcceptText = computed(() => props.acceptText ?? translateWithDefault('ui.accept', 'Ok'));
     const renderedCancelText = computed(() => props.cancelText ?? translateWithDefault('ui.cancel', 'Cancel'));
 
-    return { form, renderedAcceptText, renderedCancelText };
+    return { form, renderedTitle, renderedMessage, renderedAcceptText, renderedCancelText };
 }

package/src/components/contracts/Select.ts

@@ -1,10 +1,12 @@
-import type { AcceptableValue } from 'reka-ui';
-import type { ComputedRef } from 'vue';
+import type { AcceptableValue, AsTag, SelectContentProps } from 'reka-ui';
+import type { Component, ComputedRef, HTMLAttributes } from 'vue';
 import type { Nullable } from '@noeldemartin/utils';
 
+import type { FormFieldValue } from '@aerogel/core/forms';
+
 import type { InputEmits, InputExpose, InputProps } from './Input';
 
-export type SelectOption = {
+export type SelectOptionData = {
     key: string;
     label: string;
     value: AcceptableValue;
@@ -14,18 +16,28 @@ export interface HasSelectOptionLabel {
     label: string | (() => string);
 }
 
-export interface SelectProps extends InputProps {
-    options?: unknown[];
+export interface SelectProps<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> extends InputProps<T> {
+    as?: AsTag | Component;
+    options?: T[];
     placeholder?: string;
-    renderOption?: (option: unknown) => string;
+    renderOption?: (option: T) => string;
+    compareOptions?: (a: T, b: T) => boolean;
+    labelClass?: HTMLAttributes['class'];
+    optionsClass?: HTMLAttributes['class'];
+    align?: SelectContentProps['align'];
+    side?: SelectContentProps['side'];
 }
 
-export interface SelectEmits extends InputEmits {}
+export interface SelectEmits<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> extends InputEmits<T> {}
 
-export interface SelectExpose extends InputExpose {
-    options: ComputedRef<Nullable<SelectOption[]>>;
-    selectedOption: ComputedRef<Nullable<SelectOption>>;
+export interface SelectExpose<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> extends InputExpose<T> {
+    options: ComputedRef<Nullable<SelectOptionData[]>>;
+    selectedOption: ComputedRef<Nullable<SelectOptionData>>;
     placeholder: ComputedRef<string>;
+    labelClass?: HTMLAttributes['class'];
+    optionsClass?: HTMLAttributes['class'];
+    align?: SelectContentProps['align'];
+    side?: SelectContentProps['side'];
 }
 
 export function hasSelectOptionLabel(option: unknown): option is HasSelectOptionLabel {

package/src/components/contracts/Toast.ts

@@ -1,13 +1,15 @@
+export type ToastVariant = 'secondary' | 'danger';
+
 export interface ToastAction {
     label: string;
     dismiss?: boolean;
     click?(): unknown;
 }
 
-export type ToastVariant = 'secondary' | 'danger';
-
 export interface ToastProps {
     message?: string;
     actions?: ToastAction[];
     variant?: ToastVariant;
 }
+
+export interface ToastExpose {}

package/src/components/contracts/index.ts

@@ -2,8 +2,10 @@ export * from './AlertModal';
 export * from './Button';
 export * from './ConfirmModal';
 export * from './DropdownMenu';
+export * from './ErrorReportModal';
+export * from './Input';
 export * from './LoadingModal';
 export * from './Modal';
 export * from './PromptModal';
 export * from './Select';
-export * from './shared';
+export * from './Toast';

package/src/components/headless/HeadlessButton.vue

@@ -14,6 +14,7 @@ import { computed } from 'vue';
 import { Primitive } from 'reka-ui';
 import { objectWithoutEmpty } from '@noeldemartin/utils';
 
+import UI from '@aerogel/core/ui/UI';
 import type { ButtonProps } from '@aerogel/core/components/contracts/Button';
 
 const { as, href, route, routeParams, routeQuery, submit, disabled, class: classes } = defineProps<ButtonProps>();
@@ -25,7 +26,7 @@ const props = computed(() => {
 
     if (route) {
         return {
-            as: 'router-link',
+            as: UI.resolveComponent('router-link') ?? 'a',
             to: objectWithoutEmpty({
                 name: route,
                 params: routeParams,

package/src/components/headless/HeadlessInput.vue

@@ -23,7 +23,7 @@ const errors = computed(() => {
     return form.errors[name] ?? null;
 });
 
-const context = {
+const expose = {
     id: `input-${uuid()}`,
     name: computed(() => name),
     label: computed(() => label),
@@ -54,6 +54,6 @@ const context = {
     },
 } satisfies InputExpose;
 
-provide('input', context);
-defineExpose(context);
+provide('input', expose);
+defineExpose(expose);
 </script>

package/src/components/headless/HeadlessInputInput.vue

@@ -1,10 +1,10 @@
 <template>
     <input
         :id="input.id"
-        ref="$input"
+        ref="$inputRef"
         :name
-        :type
         :checked
+        :type="renderedType"
         :required="input.required ?? undefined"
         :aria-invalid="input.errors ? 'true' : 'false'"
         :aria-describedby="
@@ -15,18 +15,29 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue';
+import { computed, inject, useTemplateRef, watchEffect } from 'vue';
 
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
-import { onFormFocus } from '@aerogel/core/components/utils';
+import { onFormFocus } from '@aerogel/core/utils/composition/forms';
+import type FormController from '@aerogel/core/forms/FormController';
 import type { FormFieldValue } from '@aerogel/core/forms/FormController';
 import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 
-const { type = 'text' } = defineProps<{ type?: string }>();
-const $input = ref<HTMLInputElement>();
+const { type } = defineProps<{ type?: string }>();
+const $input = useTemplateRef('$inputRef');
 const input = injectReactiveOrFail<InputExpose>('input', '<HeadlessInputInput> must be a child of a <HeadlessInput>');
+const form = inject<FormController | null>('form', null);
 const name = computed(() => input.name ?? undefined);
 const value = computed(() => input.value);
+const renderedType = computed(() => {
+    if (type) {
+        return type;
+    }
+
+    const fieldType = (name.value && form?.getFieldType(name.value)) ?? '';
+
+    return ['text', 'email', 'number', 'tel', 'url'].includes(fieldType) ? fieldType : 'text';
+});
 const checked = computed(() => {
     if (type !== 'checkbox') {
         return;
@@ -64,8 +75,8 @@ watchEffect(() => {
         return;
     }
 
-    if (type === 'date') {
-        $input.value.valueAsDate = value.value as Date;
+    if (type === 'date' && value.value instanceof Date) {
+        $input.value.valueAsDate = value.value;
 
         return;
     }

package/src/components/headless/HeadlessInputTextArea.vue

@@ -1,7 +1,7 @@
 <template>
     <textarea
         :id="input.id"
-        ref="$textArea"
+        ref="$textAreaRef"
         :name
         :value
         :required="input.required ?? undefined"
@@ -14,13 +14,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, useTemplateRef } from 'vue';
 
-import { onFormFocus } from '@aerogel/core/components/utils';
+import { onFormFocus } from '@aerogel/core/utils/composition/forms';
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
 import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 
-const $textArea = ref<HTMLTextAreaElement>();
+const $textArea = useTemplateRef('$textAreaRef');
 const input = injectReactiveOrFail<InputExpose>(
     'input',
     '<HeadlessInputTextArea> must be a child of a <HeadlessInput>',

package/src/components/headless/HeadlessModal.vue

@@ -1,62 +1,39 @@
 <template>
-    <DialogRoot ref="$root" open @update:open="persistent || close()">
+    <DialogRoot :ref="forwardRef" open @update:open="persistent || close()">
         <DialogPortal>
             <slot :close="close" />
         </DialogPortal>
     </DialogRoot>
 </template>
 
-<script setup lang="ts">
-import { ref } from 'vue';
-import { DialogPortal, DialogRoot } from 'reka-ui';
+<script setup lang="ts" generic="T = void">
+import { provide, ref } from 'vue';
+import { DialogPortal, DialogRoot, useForwardExpose } from 'reka-ui';
+import type { DialogContent } from 'reka-ui';
+import type { Nullable } from '@noeldemartin/utils';
 
 import Events from '@aerogel/core/services/Events';
 import { useEvent } from '@aerogel/core/utils/composition/events';
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
-import type { UIModalContext } from '@aerogel/core/ui/UI.state';
+import type { AcceptRefs } from '@aerogel/core/utils/vue';
+import type { UIModalContext } from '@aerogel/core/ui/UI';
 import type { ModalExpose, ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
 
-defineProps<ModalProps>();
-defineSlots<ModalSlots>();
-
-const $root = ref<{ $el?: HTMLElement } | null>(null);
-const hidden = ref(true);
-const closed = ref(false);
+const $content = ref<Nullable<InstanceType<typeof DialogContent>>>(null);
 const { modal } = injectReactiveOrFail<UIModalContext>(
     'modal',
     'could not obtain modal reference from <HeadlessModal>, ' +
-        'did you render this component manually? Show it using $ui.openModal() instead',
+        'did you render this component manually? Show it using $ui.modal() 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 });
+defineProps<ModalProps>();
+defineSlots<ModalSlots<T>>();
+defineExpose<AcceptRefs<ModalExpose<T>>>({ close, $content });
 
-    await hide();
+const { forwardRef } = useForwardExpose();
+const closed = ref(false);
 
-    closed.value = true;
-
-    Events.emit('modal-closed', { modal, result });
-}
+provide('$modalContentRef', $content);
 
 useEvent('close-modal', async ({ id, result }) => {
     if (id !== modal.id) {
@@ -66,21 +43,15 @@ useEvent('close-modal', async ({ id, result }) => {
     await close(result);
 });
 
-useEvent('hide-modal', async ({ id }) => {
-    if (id !== modal.id) {
+async function close(result?: unknown) {
+    if (closed.value) {
         return;
     }
 
-    await hide();
-});
-
-useEvent('show-modal', async ({ id }) => {
-    if (id !== modal.id) {
-        return;
-    }
+    await Events.emit('modal-will-close', { modal, result });
 
-    await show();
-});
+    closed.value = true;
 
-defineExpose<ModalExpose>({ close });
+    await Events.emit('modal-has-closed', { modal, result });
+}
 </script>