@aerogel/core 0.0.0-next.6c539d8e63b397d4bb6c3d61a7f20a4d108b1cdd → 0.0.0-next.7035064d9ec6a82a936ee8dfcc4b58ed2e25a399

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aerogel/core",
     "description": "The Lightest Solid",
-    "version": "0.0.0-next.6c539d8e63b397d4bb6c3d61a7f20a4d108b1cdd",
+    "version": "0.0.0-next.7035064d9ec6a82a936ee8dfcc4b58ed2e25a399",
     "main": "dist/aerogel-core.cjs.js",
     "module": "dist/aerogel-core.esm.js",
     "types": "dist/aerogel-core.d.ts",
@@ -35,7 +35,7 @@
     },
     "dependencies": {
         "@headlessui/vue": "^1.7.14",
-        "@noeldemartin/utils": "0.5.1-next.4fd89de2cbde6c7e1cfa4d5f9bdac234e9cd3d98",
+        "@noeldemartin/utils": "0.6.0-next.036a147180df61c600c4599df30816ac860dbf06",
         "dompurify": "^3.0.3",
         "marked": "^5.0.4",
         "pinia": "^2.1.6",

package/src/bootstrap/index.ts

@@ -1,6 +1,9 @@
+import Aerogel from 'virtual:aerogel';
+
 import { createApp } from 'vue';
-import type { App, Component } from 'vue';
+import type { App as AppInstance, Component } from 'vue';
 
+import App from '@/services/App';
 import directives from '@/directives';
 import errors from '@/errors';
 import Events from '@/services/Events';
@@ -13,9 +16,11 @@ import type { AerogelOptions } from '@/bootstrap/options';
 
 export { AerogelOptions };
 
-export async function bootstrapApplication(app: App, options: AerogelOptions = {}): Promise<void> {
+export async function bootstrapApplication(app: AppInstance, options: AerogelOptions = {}): Promise<void> {
     const plugins = [testing, directives, errors, lang, services, ui, ...(options.plugins ?? [])];
 
+    App.instance = app;
+
     await installPlugins(plugins, app, options);
     await options.install?.(app);
     await Events.emit('application-ready');
@@ -24,6 +29,11 @@ export async function bootstrapApplication(app: App, options: AerogelOptions = {
 export async function bootstrap(rootComponent: Component, options: AerogelOptions = {}): Promise<void> {
     const app = createApp(rootComponent);
 
+    if (Aerogel.environment === 'development') {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (window as any).$aerogel = app;
+    }
+
     await bootstrapApplication(app, options);
 
     app.mount('#app');

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

@@ -13,6 +13,7 @@ export interface IAGHeadlessModalDefaultSlotProps {
 
 export const modalProps = {
     cancellable: booleanProp(true),
+    inline: booleanProp(),
     title: stringProp(),
 };
 
@@ -28,7 +29,8 @@ export function extractModalProps<T extends ExtractPropTypes<typeof modalProps>>
 
 export function useModalExpose($modal: Ref<IAGHeadlessModal | undefined>): IAGModal {
     return {
-        close: async () => $modal.value?.close(),
+        inline: computed(() => !!$modal.value?.inline),
         cancellable: computed(() => !!$modal.value?.cancellable),
+        close: async () => $modal.value?.close(),
     };
 }

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

@@ -1,11 +1,16 @@
 <template>
-    <Dialog ref="$root" :open="true" @close="cancellable && close()">
+    <component
+        :is="rootComponent"
+        ref="$root"
+        :open="true"
+        @close="cancellable && close()"
+    >
         <slot :close="close" />
-    </Dialog>
+    </component>
 </template>
 
 <script setup lang="ts">
-import { ref, toRef } from 'vue';
+import { computed, ref, toRef } from 'vue';
 import { Dialog } from '@headlessui/vue';
 import type { VNode } from 'vue';
 
@@ -26,6 +31,7 @@ const { modal } = injectReactiveOrFail<IAGModalContext>(
     'could not obtain modal reference from <AGHeadlessModal>, ' +
         'did you render this component manually? Show it using $ui.openModal() instead',
 );
+const rootComponent = computed(() => (modal.properties.inline ? 'div' : Dialog));
 
 async function hide(): Promise<void> {
     if (!$root.value?.$el) {
@@ -82,5 +88,5 @@ useEvent('show-modal', async ({ id }) => {
 });
 
 defineSlots<{ default(props: IAGHeadlessModalDefaultSlotProps): VNode[] }>();
-defineExpose<IAGHeadlessModal>({ close, cancellable: toRef(props, 'cancellable') });
+defineExpose<IAGHeadlessModal>({ close, cancellable: toRef(props, 'cancellable'), inline: toRef(props, 'inline') });
 </script>

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

@@ -1,12 +1,15 @@
 <template>
-    <DialogPanel>
+    <component :is="rootComponent">
         <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" />
+            <div
+                class="pointer-events-none inset-0 z-50 bg-black/30"
+                :class="childModal.properties.inline ? 'absolute' : 'fixed'"
+            />
+            <AGModalContext :child-index="childIndex + 1" :modal="childModal" />
         </template>
-    </DialogPanel>
+    </component>
 </template>
 
 <script setup lang="ts">
@@ -19,10 +22,11 @@ import type { IAGModalContext } from '@/components/modals/AGModalContext';
 
 import AGModalContext from '../../modals/AGModalContext.vue';
 
-const modal = injectReactiveOrFail<IAGModalContext>(
+const { modal, childIndex } = 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);
+const rootComponent = computed(() => (modal.properties.inline ? 'div' : DialogPanel));
+const childModal = computed(() => UI.modals[childIndex] ?? null);
 </script>

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

@@ -1,13 +1,23 @@
 <template>
-    <DialogTitle :as="as">
+    <component :is="rootComponent" v-bind="rootProps">
         <slot />
-    </DialogTitle>
+    </component>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import { DialogTitle } from '@headlessui/vue';
 
-import { stringProp } from '@/utils/vue';
+import { injectReactiveOrFail, stringProp } from '@/utils/vue';
+import type { IAGModalContext } from '@/components/modals/AGModalContext';
 
-defineProps({ as: stringProp('h2') });
+const props = defineProps({ as: stringProp('h2') });
+
+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 rootComponent = computed(() => (modal.properties.inline ? 'div' : DialogTitle));
+const rootProps = computed(() => (modal.properties.inline ? {} : { as: props.as }));
 </script>

package/src/components/lib/AGMarkdown.vue

@@ -4,9 +4,10 @@
 
 <script setup lang="ts">
 import { computed, h, useAttrs } from 'vue';
+import { isInstanceOf } from '@noeldemartin/utils';
 
 import { renderMarkdown } from '@/utils/markdown';
-import { booleanProp, mixedProp, stringProp } from '@/utils/vue';
+import { booleanProp, mixedProp, objectProp, stringProp } from '@/utils/vue';
 import { translate } from '@/lang';
 
 const props = defineProps({
@@ -15,6 +16,7 @@ const props = defineProps({
     langKey: stringProp(),
     langParams: mixedProp<number | Record<string, unknown>>(),
     text: stringProp(),
+    actions: objectProp<Record<string, () => unknown>>(),
 });
 
 const attrs = useAttrs();
@@ -35,7 +37,18 @@ const html = computed(() => {
 const root = () =>
     h(props.as ?? (props.inline ? 'span' : 'div'), {
         innerHTML: html.value,
+        onClick,
         ...attrs,
         class: `${attrs.class ?? ''} ${props.inline ? '' : 'prose'}`,
     });
+
+async function onClick(event: Event) {
+    const { target } = event;
+
+    if (isInstanceOf(target, HTMLElement) && target.dataset.markdownAction) {
+        props.actions?.[target.dataset.markdownAction]?.();
+
+        return;
+    }
+}
 </script>

package/src/components/lib/AGProgressBar.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="mt-1 h-2 w-full min-w-[min(400px,80vw)] overflow-hidden rounded-full bg-gray-200">
+        <div :class="barClasses" :style="`transform:translateX(-${(1 - progress) * 100}%)`" />
+        <span class="sr-only">
+            {{
+                $td('ui.progress', '{progress}% complete', {
+                    progress: progress * 100,
+                })
+            }}
+        </span>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { requiredNumberProp, stringProp } from '@/utils/vue';
+
+const props = defineProps({
+    progress: requiredNumberProp(),
+    class: stringProp(''),
+});
+const barClasses = computed(() => {
+    const classes = props.class ?? '';
+
+    return `h-full w-full transition-transform duration-500 ease-linear ${
+        classes.includes('bg-') ? classes : `${classes} bg-gray-700`
+    }`;
+});
+</script>

package/src/components/lib/index.ts

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

package/src/components/modals/AGAlertModal.ts

@@ -1,14 +1,17 @@
 import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
+import type { ObjectWithout, Pretty } from '@noeldemartin/utils';
 
 import { requiredStringProp, stringProp } from '@/utils';
+import type { AcceptRefs } from '@/utils';
 
 export const alertModalProps = {
     title: stringProp(),
     message: requiredStringProp(),
 };
 
-export type AGAlertModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof alertModalProps>>;
+export type AGAlertModalProps = Pretty<
+    AcceptRefs<ObjectWithout<ExtractPropTypes<typeof alertModalProps>, null | undefined>>
+>;
 
 export function useAlertModalProps(): typeof alertModalProps {
     return alertModalProps;

package/src/components/modals/AGConfirmModal.ts

@@ -1,10 +1,12 @@
 import { computed } from 'vue';
 import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithoutEmpty, SubPartial } from '@noeldemartin/utils';
+import type { ObjectWithout, Pretty, SubPartial } from '@noeldemartin/utils';
 
 import { Colors } from '@/components/constants';
-import { enumProp, requiredStringProp, stringProp } from '@/utils';
+import { enumProp, objectProp, requiredStringProp, stringProp } from '@/utils';
 import { translateWithDefault } from '@/lang';
+import type { AcceptRefs } from '@/utils';
+import type { ConfirmCheckboxes } from '@/ui';
 
 export const confirmModalProps = {
     title: stringProp(),
@@ -13,11 +15,17 @@ export const confirmModalProps = {
     acceptColor: enumProp(Colors, Colors.Primary),
     cancelText: stringProp(),
     cancelColor: enumProp(Colors, Colors.Clear),
+    checkboxes: objectProp<ConfirmCheckboxes>(),
+    actions: objectProp<Record<string, () => unknown>>(),
 };
 
-export type AGConfirmModalProps = SubPartial<
-    ObjectWithoutEmpty<ExtractPropTypes<typeof confirmModalProps>>,
-    'acceptColor' | 'cancelColor'
+export type AGConfirmModalProps = Pretty<
+    AcceptRefs<
+        SubPartial<
+            ObjectWithout<ExtractPropTypes<typeof confirmModalProps>, null | undefined>,
+            'acceptColor' | 'cancelColor'
+        >
+    >
 >;
 
 export function useConfirmModalProps(): typeof confirmModalProps {

package/src/components/modals/AGConfirmModal.vue

@@ -1,6 +1,6 @@
 <template>
     <AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false" :title="title">
-        <AGMarkdown :text="message" />
+        <AGMarkdown :text="message" :actions="actions" />
 
         <div class="mt-2 flex flex-row-reverse gap-2">
             <AGButton :color="acceptColor" @click="close(true)">

package/src/components/modals/AGErrorReportModal.ts

@@ -1,9 +1,10 @@
 import { computed, ref } from 'vue';
 import type { Component, ExtractPropTypes } from 'vue';
-import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
+import type { ObjectWithout, Pretty } from '@noeldemartin/utils';
 
 import { requiredArrayProp } from '@/utils/vue';
 import { translateWithDefault } from '@/lang';
+import type { AcceptRefs } from '@/utils/vue';
 import type { ErrorReport } from '@/errors';
 
 export interface IAGErrorReportModalButtonsDefaultSlotProps {
@@ -18,7 +19,9 @@ export const errorReportModalProps = {
     reports: requiredArrayProp<ErrorReport>(),
 };
 
-export type AGErrorReportModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof errorReportModalProps>>;
+export type AGErrorReportModalProps = Pretty<
+    AcceptRefs<ObjectWithout<ExtractPropTypes<typeof errorReportModalProps>, null | undefined>>
+>;
 
 export function useErrorReportModalProps(): typeof errorReportModalProps {
     return errorReportModalProps;

package/src/components/modals/AGLoadingModal.ts

@@ -1,15 +1,20 @@
 import { computed } from 'vue';
 import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
+import type { ObjectWithout } from '@noeldemartin/utils';
 
-import { stringProp } from '@/utils';
+import { numberProp, stringProp } from '@/utils';
 import { translateWithDefault } from '@/lang';
+import type { AcceptRefs } from '@/utils';
 
 export const loadingModalProps = {
+    title: stringProp(),
     message: stringProp(),
+    progress: numberProp(),
 };
 
-export type AGLoadingModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof loadingModalProps>>;
+export type AGLoadingModalProps = AcceptRefs<
+    ObjectWithout<ExtractPropTypes<typeof loadingModalProps>, null | undefined>
+>;
 
 export function useLoadingModalProps(): typeof loadingModalProps {
     return loadingModalProps;
@@ -18,6 +23,7 @@ export function useLoadingModalProps(): typeof 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...'));
+    const showProgress = computed(() => typeof props.progress === 'number');
 
-    return { renderedMessage };
+    return { renderedMessage, showProgress };
 }

package/src/components/modals/AGModal.ts

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

package/src/components/modals/AGModalContext.vue

@@ -1,18 +1,28 @@
 <template>
-    <component :is="modal.component" v-bind="modal.properties" />
+    <component :is="modal.component" v-bind="modalProperties" />
 </template>
 
 <script setup lang="ts">
-import { provide, toRef } from 'vue';
+import { computed, provide, toRef, unref } from 'vue';
 
-import { requiredNumberProp, requiredObjectProp } from '@/utils/vue';
+import { numberProp, requiredObjectProp } from '@/utils/vue';
 import type { Modal } from '@/ui/UI.state';
 
 import type { IAGModalContext } from './AGModalContext';
 
 const props = defineProps({
     modal: requiredObjectProp<Modal>(),
-    childIndex: requiredNumberProp(),
+    childIndex: numberProp(0),
+});
+
+const modalProperties = computed(() => {
+    const properties = {} as typeof props.modal.properties;
+
+    for (const property in props.modal.properties) {
+        properties[property] = unref(props.modal.properties[property]);
+    }
+
+    return properties;
 });
 
 provide<IAGModalContext>('modal', {

package/src/components/modals/AGPromptModal.ts

@@ -1,10 +1,11 @@
 import { computed } from 'vue';
 import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithoutEmpty, SubPartial } from '@noeldemartin/utils';
+import type { ObjectWithout, Pretty, SubPartial } from '@noeldemartin/utils';
 
 import { Colors } from '@/components/constants';
 import { enumProp, requiredStringProp, stringProp } from '@/utils';
 import { translateWithDefault } from '@/lang';
+import type { AcceptRefs } from '@/utils';
 
 export const promptModalProps = {
     title: stringProp(),
@@ -18,9 +19,13 @@ export const promptModalProps = {
     cancelColor: enumProp(Colors, Colors.Clear),
 };
 
-export type AGPromptModalProps = SubPartial<
-    ObjectWithoutEmpty<ExtractPropTypes<typeof promptModalProps>>,
-    'acceptColor' | 'cancelColor'
+export type AGPromptModalProps = Pretty<
+    AcceptRefs<
+        SubPartial<
+            ObjectWithout<ExtractPropTypes<typeof promptModalProps>, null | undefined>,
+            'acceptColor' | 'cancelColor'
+        >
+    >
 >;
 
 export function usePromptModalProps(): typeof promptModalProps {

package/src/errors/JobCancelledError.ts

@@ -0,0 +1,3 @@
+import { JSError } from '@noeldemartin/utils';
+
+export default class JobCancelledError extends JSError {}

package/src/errors/utils.ts

@@ -2,7 +2,23 @@ import { JSError, isObject, toString } from '@noeldemartin/utils';
 import { translateWithDefault } from '@/lang/utils';
 import type { ErrorSource } from './Errors.state';
 
+const handlers: ErrorHandler[] = [];
+
+export type ErrorHandler = (error: ErrorSource) => string | undefined;
+
+export function registerErrorHandler(handler: ErrorHandler): void {
+    handlers.push(handler);
+}
+
 export function getErrorMessage(error: ErrorSource): string {
+    for (const handler of handlers) {
+        const result = handler(error);
+
+        if (result) {
+            return result;
+        }
+    }
+
     if (typeof error === 'string') {
         return error;
     }

package/src/forms/Form.ts

@@ -1,5 +1,6 @@
-import { MagicObject, arrayRemove, fail, toString } from '@noeldemartin/utils';
 import { computed, nextTick, reactive, readonly, ref } from 'vue';
+import { MagicObject, arrayRemove, fail, toString } from '@noeldemartin/utils';
+import { validate } from './validation';
 import type { ObjectValues } from '@noeldemartin/utils';
 import type { ComputedRef, DeepReadonly, Ref, UnwrapNestedRefs } from 'vue';
 
@@ -184,9 +185,15 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
 
     private getFieldErrors(name: keyof Fields, definition: FormFieldDefinition): string[] | null {
         const errors = [];
+        const value = this._data[name];
+        const rules = definition.rules?.split('|') ?? [];
+
+        for (const rule of rules) {
+            if (rule !== 'required' && (value === null || value === undefined)) {
+                continue;
+            }
 
-        if (definition.rules?.includes('required') && !this._data[name]) {
-            errors.push('required');
+            errors.push(...validate(value, rule));
         }
 
         return errors.length > 0 ? errors : null;

package/src/forms/index.ts

@@ -1,4 +1,5 @@
-export * from './Form';
 export * from './composition';
+export * from './Form';
 export * from './utils';
+export * from './validation';
 export { default as Form } from './Form';

package/src/forms/utils.ts

@@ -1,17 +1,25 @@
 import { FormFieldTypes } from './Form';
 import type { FormFieldDefinition } from './Form';
 
-export function booleanInput(defaultValue?: boolean): FormFieldDefinition<typeof FormFieldTypes.Boolean> {
+export function booleanInput(
+    defaultValue?: boolean,
+    options: { rules?: string } = {},
+): FormFieldDefinition<typeof FormFieldTypes.Boolean> {
     return {
         default: defaultValue,
         type: FormFieldTypes.Boolean,
+        rules: options.rules,
     };
 }
 
-export function dateInput(defaultValue?: Date): FormFieldDefinition<typeof FormFieldTypes.Date> {
+export function dateInput(
+    defaultValue?: Date,
+    options: { rules?: string } = {},
+): FormFieldDefinition<typeof FormFieldTypes.Date> {
     return {
         default: defaultValue,
         type: FormFieldTypes.Date,
+        rules: options.rules,
     };
 }
 
@@ -53,16 +61,24 @@ export function requiredStringInput(
     };
 }
 
-export function numberInput(defaultValue?: number): FormFieldDefinition<typeof FormFieldTypes.Number> {
+export function numberInput(
+    defaultValue?: number,
+    options: { rules?: string } = {},
+): FormFieldDefinition<typeof FormFieldTypes.Number> {
     return {
         default: defaultValue,
         type: FormFieldTypes.Number,
+        rules: options.rules,
     };
 }
 
-export function stringInput(defaultValue?: string): FormFieldDefinition<typeof FormFieldTypes.String> {
+export function stringInput(
+    defaultValue?: string,
+    options: { rules?: string } = {},
+): FormFieldDefinition<typeof FormFieldTypes.String> {
     return {
         default: defaultValue,
         type: FormFieldTypes.String,
+        rules: options.rules,
     };
 }

package/src/forms/validation.ts

@@ -0,0 +1,19 @@
+import { arrayFrom } from '@noeldemartin/utils';
+
+const builtInRules: Record<string, FormFieldValidator> = {
+    required: (value) => (value ? undefined : 'required'),
+};
+
+export type FormFieldValidator<T = unknown> = (value: T) => string | string[] | undefined;
+
+export const validators: Record<string, FormFieldValidator> = { ...builtInRules };
+
+export function defineFormValidationRule<T>(rule: string, validator: FormFieldValidator<T>): void {
+    validators[rule] = validator as FormFieldValidator;
+}
+
+export function validate(value: unknown, rule: string): string[] {
+    const errors = validators[rule]?.(value);
+
+    return errors ? arrayFrom(errors) : [];
+}