@aerogel/core 0.0.0-next.eed7a057cf5b844cd9f7fc6bda2d8df49fcd6736 → 0.0.0-next.f0368a3107664018eb88652e719d2cb7d24b82e7

package/package.json

@@ -1,10 +1,11 @@
 {
     "name": "@aerogel/core",
-    "version": "0.0.0-next.eed7a057cf5b844cd9f7fc6bda2d8df49fcd6736",
+    "version": "0.0.0-next.f0368a3107664018eb88652e719d2cb7d24b82e7",
     "type": "module",
     "sideEffects": false,
     "exports": {
         "types": "./dist/aerogel-core.d.ts",
+        "style": "./src/index.css",
         "default": "./dist/aerogel-core.js"
     },
     "files": [
@@ -21,17 +22,24 @@
         "test:ci": "vitest --run --reporter verbose",
         "verify": "noeldemartin-verify"
     },
+    "peerDependencies": {
+        "@tailwindcss/forms": "^0.5.10",
+        "@tailwindcss/typography": "^0.5.16",
+        "vue": "^3.5.0",
+        "tailwindcss": "^4.1.1"
+    },
     "dependencies": {
-        "@headlessui/vue": "^1.7.14",
-        "@noeldemartin/utils": "0.7.0-next.febf11f10be81ab8b5562e4fe2cddbd1929ac9ca",
+        "@noeldemartin/utils": "0.7.0-next.31cf84b4b57092d146528f27579439783aca71bb",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "dompurify": "^3.2.4",
         "marked": "^15.0.7",
         "pinia": "^2.1.6",
-        "vue": "^3.3.0"
+        "reka-ui": "^2.2.0",
+        "tailwind-merge": "^3.1.0"
     },
     "devDependencies": {
-        "@aerogel/vite": "*",
-        "tailwindcss": "^3.3.5"
+        "@aerogel/vite": "*"
     },
     "eslintConfig": {
         "extends": [

package/src/components/{AGAppLayout.vue → AppLayout.vue}

@@ -1,16 +1,16 @@
 <template>
-    <div class="flex min-h-full flex-col text-base font-normal leading-tight text-gray-900 antialiased">
+    <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)" />
         </slot>
         <slot v-else />
 
-        <AGAppOverlays />
+        <AppOverlays />
     </div>
 </template>
 
 <script setup lang="ts">
 import { UIComponents } from '@aerogel/core/ui/UI';
 
-import AGAppOverlays from './AGAppOverlays.vue';
+import AppOverlays from './AppOverlays.vue';
 </script>

package/src/components/{AGAppModals.vue → AppModals.vue}

@@ -1,15 +1,14 @@
 <template>
     <aside v-if="modal">
-        <AGModalContext :child-index="1" :modal="modal" />
+        <ModalContext :child-index="1" :modal />
     </aside>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 
+import ModalContext from '@aerogel/core/components/ui/ModalContext.vue';
 import UI from '@aerogel/core/ui/UI';
 
-import AGModalContext from './modals/AGModalContext.vue';
-
 const modal = computed(() => UI.modals[0] ?? null);
 </script>

package/src/components/AppOverlays.vue

@@ -0,0 +1,9 @@
+<template>
+    <AppModals />
+    <AppToasts />
+</template>
+
+<script setup lang="ts">
+import AppModals from './AppModals.vue';
+import AppToasts from './AppToasts.vue';
+</script>

package/src/components/AppToasts.vue

@@ -0,0 +1,16 @@
+<template>
+    <ToastProvider>
+        <component
+            :is="toast.component"
+            v-for="toast of $ui.toasts"
+            :id="toast.id"
+            :key="toast.id"
+            v-bind="toast.properties"
+        />
+        <ToastViewport class="fixed right-0 bottom-0 z-50 flex flex-col items-end space-y-4 px-4 py-6 sm:p-6" />
+    </ToastProvider>
+</template>
+
+<script setup lang="ts">
+import { ToastProvider, ToastViewport } from 'reka-ui';
+</script>

package/src/components/contracts/AlertModal.ts

@@ -0,0 +1,4 @@
+export interface AlertModalProps {
+    title?: string;
+    message: string;
+}

package/src/components/contracts/Button.ts

@@ -0,0 +1,16 @@
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+
+export type ButtonVariant = 'default' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'link';
+export type ButtonSize = 'default' | 'small' | 'large' | 'icon';
+export interface ButtonProps extends PrimitiveProps {
+    class?: HTMLAttributes['class'];
+    disabled?: boolean;
+    href?: string;
+    route?: string;
+    routeParams?: object;
+    routeQuery?: object;
+    size?: ButtonSize;
+    submit?: boolean;
+    variant?: ButtonVariant;
+}

package/src/components/contracts/ConfirmModal.ts

@@ -0,0 +1,42 @@
+import { computed } from 'vue';
+
+import { translateWithDefault } from '@aerogel/core/lang';
+import { FormFieldTypes } from '@aerogel/core/forms/FormController';
+import { useForm } from '@aerogel/core/utils/composition/forms';
+import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
+import type { FormFieldDefinition } from '@aerogel/core/forms/FormController';
+
+export type ConfirmModalCheckboxes = Record<string, { label: string; default?: boolean; required?: boolean }>;
+
+export interface ConfirmModalProps {
+    title?: string;
+    message: string;
+    acceptText?: string;
+    acceptVariant?: ButtonVariant;
+    cancelText?: string;
+    cancelVariant?: ButtonVariant;
+    checkboxes?: ConfirmModalCheckboxes;
+    actions?: Record<string, () => unknown>;
+    required?: 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,
+                    default: checkbox.default,
+                    required: checkbox.required ? 'required' : undefined,
+                },
+                ...values,
+            }),
+            {} as Record<string, FormFieldDefinition>,
+        ),
+    );
+    const renderedAcceptText = computed(() => props.acceptText ?? translateWithDefault('ui.accept', 'Ok'));
+    const renderedCancelText = computed(() => props.cancelText ?? translateWithDefault('ui.cancel', 'Cancel'));
+
+    return { form, renderedAcceptText, renderedCancelText };
+}

package/src/components/contracts/DropdownMenu.ts

@@ -0,0 +1,20 @@
+import type { DropdownMenuContentProps } from 'reka-ui';
+
+import type { Falsifiable } from '@aerogel/core/utils/types';
+
+export type DropdownMenuOptionData = {
+    label: string;
+    click: () => unknown;
+};
+
+export interface DropdownMenuProps {
+    align?: DropdownMenuContentProps['align'];
+    side?: DropdownMenuContentProps['side'];
+    options?: Falsifiable<DropdownMenuOptionData>[];
+}
+
+export interface DropdownMenuExpose {
+    align?: DropdownMenuContentProps['align'];
+    side?: DropdownMenuContentProps['side'];
+    options?: DropdownMenuOptionData[];
+}

package/src/components/{modals/AGErrorReportModal.ts → contracts/ErrorReportModal.ts}

@@ -1,34 +1,14 @@
 import { computed, ref } from 'vue';
-import type { Component, ExtractPropTypes } from 'vue';
-import type { ObjectWithout, Pretty } from '@noeldemartin/utils';
 
-import { requiredArrayProp } from '@aerogel/core/utils/vue';
 import { translateWithDefault } from '@aerogel/core/lang';
-import type { AcceptRefs } from '@aerogel/core/utils/vue';
 import type { ErrorReport } from '@aerogel/core/errors';
 
-export interface IAGErrorReportModalButtonsDefaultSlotProps {
-    id: string;
-    description: string;
-    iconComponent: Component;
-    url?: string;
-    handler?(): void;
-}
-
-export const errorReportModalProps = {
-    reports: requiredArrayProp<ErrorReport>(),
-};
-
-export type AGErrorReportModalProps = Pretty<
-    AcceptRefs<ObjectWithout<ExtractPropTypes<typeof errorReportModalProps>, null | undefined>>
->;
-
-export function useErrorReportModalProps(): typeof errorReportModalProps {
-    return errorReportModalProps;
+export interface ErrorReportModalProps {
+    reports: ErrorReport[];
 }
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export function useErrorReportModal(props: ExtractPropTypes<typeof errorReportModalProps>) {
+export function useErrorReportModal(props: ErrorReportModalProps) {
     const activeReportIndex = ref(0);
     const report = computed(() => props.reports[activeReportIndex.value] as ErrorReport);
     const details = computed(

package/src/components/contracts/Input.ts

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

package/src/components/contracts/LoadingModal.ts

@@ -0,0 +1,22 @@
+import type { Job } from '@aerogel/core/jobs';
+import { translateWithDefault } from '@aerogel/core/lang';
+import { computed } from 'vue';
+
+export interface LoadingModalProps {
+    title?: string;
+    message?: string;
+    progress?: number;
+    job?: Job;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useLoadingModal(props: LoadingModalProps) {
+    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 { renderedTitle, renderedMessage, titleHidden, showProgress };
+}

package/src/components/contracts/Modal.ts

@@ -0,0 +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 ModalExpose {
+    close(result?: unknown): Promise<void>;
+    $content: ModalContentInstance;
+}

package/src/components/contracts/PromptModal.ts

@@ -0,0 +1,31 @@
+import { computed } from 'vue';
+
+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';
+
+export interface PromptModalProps {
+    title?: string;
+    message: string;
+    label?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    acceptText?: string;
+    acceptVariant?: ButtonVariant;
+    cancelText?: string;
+    cancelVariant?: ButtonVariant;
+}
+
+// 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, renderedTitle, renderedMessage, renderedAcceptText, renderedCancelText };
+}

package/src/components/contracts/Select.ts

@@ -0,0 +1,45 @@
+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 SelectOptionData = {
+    key: string;
+    label: string;
+    value: AcceptableValue;
+};
+
+export interface HasSelectOptionLabel {
+    label: string | (() => string);
+}
+
+export interface SelectProps<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> extends InputProps<T> {
+    as?: AsTag | Component;
+    options?: T[];
+    placeholder?: 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<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> extends InputEmits<T> {}
+
+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 {
+    return typeof option === 'object' && option !== null && 'label' in option;
+}

package/src/components/contracts/Toast.ts

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

package/src/components/contracts/index.ts

@@ -0,0 +1,11 @@
+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 './Toast';

package/src/components/headless/HeadlessButton.vue

@@ -0,0 +1,51 @@
+<template>
+    <Primitive
+        :class="classes"
+        :as-child
+        :disabled
+        v-bind="props"
+    >
+        <slot />
+    </Primitive>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Primitive } from 'reka-ui';
+import { objectWithoutEmpty } from '@noeldemartin/utils';
+
+import UI, { UIComponents } 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>();
+
+const props = computed(() => {
+    if (as) {
+        return { as };
+    }
+
+    if (route) {
+        return {
+            as: UI.resolveComponent(UIComponents.RouterLink) ?? 'a',
+            to: objectWithoutEmpty({
+                name: route,
+                params: routeParams,
+                query: routeQuery,
+            }),
+        };
+    }
+
+    if (href) {
+        return {
+            as: 'a',
+            target: '_blank',
+            href,
+        };
+    }
+
+    return {
+        as: 'button',
+        type: submit ? 'submit' : 'button',
+    };
+});
+</script>

package/src/components/headless/HeadlessInput.vue

@@ -0,0 +1,59 @@
+<template>
+    <component :is="as">
+        <slot />
+    </component>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, provide, readonly } from 'vue';
+import { uuid } from '@noeldemartin/utils';
+
+import type FormController from '@aerogel/core/forms/FormController';
+import type { FormFieldValue } from '@aerogel/core/forms/FormController';
+import type { InputEmits, InputExpose, InputProps } from '@aerogel/core/components/contracts/Input';
+
+const { as = 'div', name, label, description, modelValue } = defineProps<InputProps & { as?: string }>();
+const emit = defineEmits<InputEmits>();
+const form = inject<FormController | null>('form', null);
+const errors = computed(() => {
+    if (!form || !name) {
+        return null;
+    }
+
+    return form.errors[name] ?? null;
+});
+
+const expose = {
+    id: `input-${uuid()}`,
+    name: computed(() => name),
+    label: computed(() => label),
+    description: computed(() => description),
+    value: computed(() => {
+        if (form && name) {
+            return form.getFieldValue(name);
+        }
+
+        return modelValue;
+    }),
+    errors: readonly(errors),
+    required: computed(() => {
+        if (!name || !form) {
+            return;
+        }
+
+        return form.getFieldRules(name).includes('required');
+    }),
+    update(value) {
+        if (form && name) {
+            form.setFieldValue(name, value as FormFieldValue);
+
+            return;
+        }
+
+        emit('update:modelValue', value);
+    },
+} satisfies InputExpose;
+
+provide('input', expose);
+defineExpose(expose);
+</script>

package/src/components/headless/{forms/AGHeadlessInputDescription.vue → HeadlessInputDescription.vue}

@@ -1,10 +1,10 @@
 <template>
     <slot :id="`${input.id}-description`">
-        <AGMarkdown
+        <Markdown
             v-if="show"
             v-bind="$attrs"
             :id="`${input.id}-description`"
-            :text="text"
+            :text
         />
     </slot>
 </template>
@@ -12,16 +12,15 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
-
-import AGMarkdown from '../../lib/AGMarkdown.vue';
-import type { IAGHeadlessInput } from './AGHeadlessInput';
+import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 
 defineOptions({ inheritAttrs: false });
 
-const input = injectReactiveOrFail<IAGHeadlessInput>(
+const input = injectReactiveOrFail<InputExpose>(
     'input',
-    '<AGHeadlessInputDescription> must be a child of a <AGHeadlessInput>',
+    '<HeadlessInputDescription> must be a child of a <HeadlessInput>',
 );
 const text = computed(() => (typeof input.description === 'string' ? input.description : ''));
 const show = computed(() => !!input.description);

package/src/components/headless/{forms/AGHeadlessInputError.vue → HeadlessInputError.vue}

@@ -9,13 +9,9 @@ import { computed } from 'vue';
 
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
 import { translateWithDefault } from '@aerogel/core/lang/utils';
+import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 
-import type { IAGHeadlessInput } from './AGHeadlessInput';
-
-const input = injectReactiveOrFail<IAGHeadlessInput>(
-    'input',
-    '<AGHeadlessInputError> must be a child of a <AGHeadlessInput>',
-);
+const input = injectReactiveOrFail<InputExpose>('input', '<HeadlessInputError> must be a child of a <HeadlessInput>');
 const errorMessage = computed(() => {
     if (!input.errors) {
         return null;

package/src/components/headless/{forms/AGHeadlessInputInput.vue → HeadlessInputInput.vue}

@@ -1,42 +1,34 @@
 <template>
     <input
         :id="input.id"
-        ref="$input"
-        :name="name"
-        :type="type"
+        ref="$inputRef"
+        :name
+        :type
+        :checked
         :required="input.required ?? undefined"
         :aria-invalid="input.errors ? 'true' : 'false'"
         :aria-describedby="
             input.errors ? `${input.id}-error` : input.description ? `${input.id}-description` : undefined
         "
-        :checked="checked"
         @input="update"
     >
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue';
+import { computed, useTemplateRef, watchEffect } from 'vue';
 
-import { injectReactiveOrFail, stringProp } from '@aerogel/core/utils/vue';
-import type { __SetsElement } from '@aerogel/core/components/interfaces';
-import type { FormFieldValue } from '@aerogel/core/forms/Form';
-import type { IAGHeadlessInput } from '@aerogel/core/components/headless/forms/AGHeadlessInput';
+import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import { onFormFocus } from '@aerogel/core/utils/composition/forms';
+import type { FormFieldValue } from '@aerogel/core/forms/FormController';
+import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 
-import { onFormFocus } from './composition';
-
-const props = defineProps({
-    type: stringProp('text'),
-});
-
-const $input = ref<HTMLInputElement>();
-const input = injectReactiveOrFail<IAGHeadlessInput>(
-    'input',
-    '<AGHeadlessInputInput> must be a child of a <AGHeadlessInput>',
-);
+const { type = 'text' } = defineProps<{ type?: string }>();
+const $input = useTemplateRef('$inputRef');
+const input = injectReactiveOrFail<InputExpose>('input', '<HeadlessInputInput> must be a child of a <HeadlessInput>');
 const name = computed(() => input.name ?? undefined);
 const value = computed(() => input.value);
 const checked = computed(() => {
-    if (props.type !== 'checkbox') {
+    if (type !== 'checkbox') {
         return;
     }
 
@@ -56,7 +48,7 @@ function getValue(): FormFieldValue | null {
         return null;
     }
 
-    switch (props.type) {
+    switch (type) {
         case 'checkbox':
             return $input.value.checked;
         case 'date':
@@ -67,18 +59,17 @@ function getValue(): FormFieldValue | null {
 }
 
 onFormFocus(input, () => $input.value?.focus());
-watchEffect(() => (input as unknown as __SetsElement).__setElement($input.value));
 watchEffect(() => {
     if (!$input.value) {
         return;
     }
 
-    if (props.type === 'date') {
+    if (type === 'date') {
         $input.value.valueAsDate = value.value as Date;
 
         return;
     }
 
-    $input.value.value = value.value as string;
+    $input.value.value = (value.value as string) ?? null;
 });
 </script>