@aerogel/core 0.0.0-next.bde642c4a8096c5fc3d5e676c2115da23f4bf1d8 → 0.0.0-next.c4825c5cbe0fe3257e478c2a7ec8df27d5a72305

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aerogel/core",
     "description": "The Lightest Solid",
-    "version": "0.0.0-next.bde642c4a8096c5fc3d5e676c2115da23f4bf1d8",
+    "version": "0.0.0-next.c4825c5cbe0fe3257e478c2a7ec8df27d5a72305",
     "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",
@@ -43,7 +43,7 @@
     },
     "devDependencies": {
         "@aerogel/vite": "*",
-        "@histoire/plugin-vue": "^0.17.6",
+        "@histoire/plugin-vue": "0.17.6",
         "@types/dompurify": "^3.0.2",
         "@types/marked": "^5.0.0",
         "tailwindcss": "^3.3.5"

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/forms/AGHeadlessInput.ts

@@ -11,6 +11,7 @@ export interface IAGHeadlessInput extends HasElement {
     label: ComputedRef<string | null>;
     description: ComputedRef<string | boolean | null>;
     value: ComputedRef<FormFieldValue | null>;
+    required: ComputedRef<boolean | null>;
     errors: DeepReadonly<Ref<string[] | null>>;
     update(value: FormFieldValue | null): void;
 }

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

@@ -44,6 +44,13 @@ const api: IAGHeadlessInput & __SetsElement = {
         return props.modelValue;
     }),
     errors: readonly(errors),
+    required: computed(() => {
+        if (!props.name || !form) {
+            return null;
+        }
+
+        return form.getFieldRules(props.name).includes('required');
+    }),
     update(value) {
         if (form && props.name) {
             form.setFieldValue(props.name, value);

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

@@ -4,6 +4,7 @@
         ref="$input"
         :name="name"
         :type="type"
+        :required="input.required ?? undefined"
         :aria-invalid="input.errors ? 'true' : 'false'"
         :aria-describedby="
             input.errors ? `${input.id}-error` : input.description ? `${input.id}-description` : undefined

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

@@ -3,6 +3,7 @@
         :id="input.id"
         ref="$textArea"
         :name="name"
+        :required="input.required ?? undefined"
         :value="value"
         :aria-invalid="input.errors ? 'true' : 'false'"
         :aria-describedby="

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

@@ -11,5 +11,6 @@ import { stringProp } from '@/utils/vue';
 
 defineProps({ as: stringProp('span') });
 
+// TODO use v-measure.css
 const measured = ref(false);
 </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(),
+    barClass: stringProp(''),
+});
+const barClasses = computed(() => {
+    const classes = props.barClass ?? '';
+
+    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 { booleanProp, 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,18 @@ export const confirmModalProps = {
     acceptColor: enumProp(Colors, Colors.Primary),
     cancelText: stringProp(),
     cancelColor: enumProp(Colors, Colors.Clear),
+    checkboxes: objectProp<ConfirmCheckboxes>(),
+    actions: objectProp<Record<string, () => unknown>>(),
+    required: booleanProp(false),
 };
 
-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,12 +1,12 @@
 <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)">
                 {{ renderedAcceptText }}
             </AGButton>
-            <AGButton :color="cancelColor" @click="close()">
+            <AGButton v-if="!required" :color="cancelColor" @click="close()">
                 {{ renderedCancelText }}
             </AGButton>
         </div>

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/directives/measure.ts

@@ -1,4 +1,7 @@
 import { defineDirective } from '@/utils/vue';
+import { tap } from '@noeldemartin/utils';
+
+const resizeObservers: WeakMap<HTMLElement, ResizeObserver> = new WeakMap();
 
 export interface ElementSize {
     width: number;
@@ -9,13 +12,29 @@ export type MeasureDirectiveListener = (size: ElementSize) => unknown;
 
 export default defineDirective({
     mounted(element: HTMLElement, { value }) {
+        // TODO replace with argument when typed properly
+        const modifiers = { css: true, watch: true };
+
         const listener = typeof value === 'function' ? (value as MeasureDirectiveListener) : null;
-        const sizes = element.getBoundingClientRect();
+        const update = () => {
+            const sizes = element.getBoundingClientRect();
+
+            if (modifiers.css) {
+                element.style.setProperty('--width', `${sizes.width}px`);
+                element.style.setProperty('--height', `${sizes.height}px`);
+            }
 
-        // TODO guard with modifiers.css once typed properly
-        element.style.setProperty('--width', `${sizes.width}px`);
-        element.style.setProperty('--height', `${sizes.height}px`);
+            listener?.({ width: sizes.width, height: sizes.height });
+        };
 
-        listener?.({ width: sizes.width, height: sizes.height });
+        if (modifiers.watch) {
+            resizeObservers.set(element, tap(new ResizeObserver(update)).observe(element));
+        }
+
+        update();
+    },
+    unmounted(element) {
+        resizeObservers.get(element)?.unobserve(element);
+        resizeObservers.delete(element);
     },
 });

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.test.ts

@@ -55,4 +55,32 @@ describe('Form', () => {
         expect(form.name).toBeNull();
     });
 
+    it('trims values', () => {
+        // Arrange
+        const form = useForm({
+            trimmed: {
+                type: FormFieldTypes.String,
+                rules: 'required',
+            },
+            untrimmed: {
+                type: FormFieldTypes.String,
+                rules: 'required',
+                trim: false,
+            },
+        });
+
+        // Act
+        form.trimmed = '   ';
+        form.untrimmed = '   ';
+
+        form.submit();
+
+        // Assert
+        expect(form.valid).toBe(false);
+        expect(form.submitted).toBe(true);
+        expect(form.trimmed).toEqual('');
+        expect(form.untrimmed).toEqual('   ');
+        expect(form.errors).toEqual({ trimmed: ['required'], untrimmed: null });
+    });
+
 });