@aerogel/core 0.0.0-next.d547095ca85c86c1e41f5c7fa170d0ba856c3f4d → 0.0.0-next.d7394c3aa6aac799b0971e63819a8713d05a5123

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aerogel/core",
     "description": "The Lightest Solid",
-    "version": "0.0.0-next.d547095ca85c86c1e41f5c7fa170d0ba856c3f4d",
+    "version": "0.0.0-next.d7394c3aa6aac799b0971e63819a8713d05a5123",
     "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.49cc6c9b4a20930cbf922a949135981791acc5c3",
+        "@noeldemartin/utils": "0.5.1-next.4fd89de2cbde6c7e1cfa4d5f9bdac234e9cd3d98",
         "dompurify": "^3.0.3",
         "marked": "^5.0.4",
         "pinia": "^2.1.6",

package/src/bootstrap/bootstrap.test.ts

@@ -11,7 +11,6 @@ import { bootstrap } from './index';
 describe('Aerogel', () => {
 
     beforeEach(() => {
-        vi.stubGlobal('document', { getElementById: () => null });
         vi.mock('vue', async () => {
             const vue = (await vi.importActual('vue')) as Object;
 

package/src/components/AGAppSnackbars.vue

@@ -1,5 +1,5 @@
 <template>
-    <div aria-live="assertive" class="z-60 pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:p-6">
+    <div aria-live="assertive" class="pointer-events-none fixed inset-0 z-50 flex items-end px-4 py-6 sm:p-6">
         <div class="flex w-full flex-col items-end space-y-4">
             <component
                 :is="snackbar.component"

package/src/components/composition.ts

@@ -0,0 +1,23 @@
+import { customRef } from 'vue';
+import type { Ref } from 'vue';
+
+import { getElement } from '@/components/interfaces';
+
+export function elementRef(): Ref<HTMLElement | undefined> {
+    return customRef((track, trigger) => {
+        let value: HTMLElement | undefined = undefined;
+
+        return {
+            get() {
+                track();
+
+                return value;
+            },
+            set(newValue) {
+                value = getElement(newValue);
+
+                trigger();
+            },
+        };
+    });
+}

package/src/components/forms/AGForm.vue

@@ -1,26 +1,25 @@
 <template>
-    <form @submit.prevent="submit">
+    <form @submit.prevent="form?.submit()">
         <slot />
     </form>
 </template>
 
 <script setup lang="ts">
-import { provide } from 'vue';
+import { provide, watchEffect } from 'vue';
 
 import { objectProp } from '@/utils/vue';
 import type Form from '@/forms/Form';
 
+let offSubmit: (() => void) | undefined;
 const props = defineProps({ form: objectProp<Form>() });
-
 const emit = defineEmits<{ submit: [] }>();
 
-provide('form', props.form);
+watchEffect((onCleanup) => {
+    offSubmit?.();
+    offSubmit = props.form?.on('submit', () => emit('submit'));
 
-function submit() {
-    if (props.form && !props.form.submit()) {
-        return;
-    }
+    onCleanup(() => offSubmit?.());
+});
 
-    emit('submit');
-}
+provide('form', props.form);
 </script>

package/src/components/forms/AGInput.vue

@@ -13,6 +13,7 @@
                 'ring-1 ring-red-500': $input?.errors,
             }"
         />
+        <AGHeadlessInputDescription />
         <div class="absolute bottom-0 left-0 translate-y-full">
             <AGHeadlessInputError class="mt-1 text-sm text-red-500" />
         </div>
@@ -26,6 +27,7 @@ import { useInputProps } from '@/components/headless/forms/AGHeadlessInput';
 import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
 
 import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
+import AGHeadlessInputDescription from '../headless/forms/AGHeadlessInputDescription.vue';
 import AGHeadlessInputError from '../headless/forms/AGHeadlessInputError.vue';
 import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.vue';
 import AGHeadlessInputLabel from '../headless/forms/AGHeadlessInputLabel.vue';

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

@@ -0,0 +1,3 @@
+import type { HasElement } from '@/components/interfaces';
+
+export interface IAGHeadlessButton extends HasElement {}

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

@@ -1,5 +1,5 @@
 <template>
-    <component :is="component.tag" v-bind="component.props">
+    <component :is="component.as" ref="$root" v-bind="component.props">
         <slot />
     </component>
 </template>
@@ -9,8 +9,12 @@ import { computed } from 'vue';
 import { objectWithoutEmpty } from '@noeldemartin/utils';
 
 import { booleanProp, objectProp, stringProp } from '@/utils/vue';
+import { elementRef } from '@/components/composition';
+
+import type { IAGHeadlessButton } from './AGHeadlessButton';
 
 const props = defineProps({
+    as: objectProp(),
     href: stringProp(),
     url: stringProp(),
     route: stringProp(),
@@ -19,10 +23,15 @@ const props = defineProps({
     submit: booleanProp(),
 });
 
+const $root = elementRef();
 const component = computed(() => {
+    if (props.as) {
+        return { as: props.as, props: {} };
+    }
+
     if (props.route) {
         return {
-            tag: 'router-link',
+            as: 'router-link',
             props: {
                 to: objectWithoutEmpty({
                     name: props.route,
@@ -35,7 +44,7 @@ const component = computed(() => {
 
     if (props.href || props.url) {
         return {
-            tag: 'a',
+            as: 'a',
             props: {
                 target: '_blank',
                 href: props.href || props.url,
@@ -44,8 +53,10 @@ const component = computed(() => {
     }
 
     return {
-        tag: 'button',
+        as: 'button',
         props: { type: props.submit ? 'submit' : 'button' },
     };
 });
+
+defineExpose<IAGHeadlessButton>({ $el: $root });
 </script>

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

@@ -1,20 +1,26 @@
 import type { ComputedRef, DeepReadonly, ExtractPropTypes, Ref } from 'vue';
 
-import { stringProp } from '@/utils';
+import { mixedProp, stringProp } from '@/utils';
 import { extractComponentProps } from '@/components/utils';
+import type { FormFieldValue } from '@/forms/Form';
+import type { HasElement } from '@/components/interfaces';
 
-export interface IAGHeadlessInput {
+export interface IAGHeadlessInput extends HasElement {
     id: string;
     name: ComputedRef<string | null>;
     label: ComputedRef<string | null>;
-    value: ComputedRef<string | number | boolean | null>;
+    description: ComputedRef<string | boolean | null>;
+    value: ComputedRef<FormFieldValue | null>;
+    required: ComputedRef<boolean | null>;
     errors: DeepReadonly<Ref<string[] | null>>;
-    update(value: string | number | boolean | null): void;
+    update(value: FormFieldValue | null): void;
 }
 
 export const inputProps = {
     name: stringProp(),
     label: stringProp(),
+    description: stringProp(),
+    modelValue: mixedProp<FormFieldValue>([String, Number, Boolean]),
 };
 
 export function useInputProps(): typeof inputProps {

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

@@ -6,11 +6,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, provide, readonly } from 'vue';
+import { computed, inject, provide, readonly, ref } from 'vue';
 import { uuid } from '@noeldemartin/utils';
 
-import { mixedProp, stringProp } from '@/utils/vue';
+import { stringProp } from '@/utils/vue';
 import type Form from '@/forms/Form';
+import type { __SetsElement } from '@/components/interfaces';
 
 import { useInputProps } from './AGHeadlessInput';
 import type { IAGHeadlessInput } from './AGHeadlessInput';
@@ -18,9 +19,9 @@ import type { IAGHeadlessInput } from './AGHeadlessInput';
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
     as: stringProp('div'),
-    modelValue: mixedProp<string | number | boolean>([String, Number, Boolean]),
     ...useInputProps(),
 });
+const $el = ref<HTMLElement>();
 const errors = computed(() => {
     if (!form || !props.name) {
         return null;
@@ -29,18 +30,27 @@ const errors = computed(() => {
     return form.errors[props.name] ?? null;
 });
 const form = inject<Form | null>('form', null);
-const api: IAGHeadlessInput = {
+const api: IAGHeadlessInput & __SetsElement = {
+    $el,
     id: `input-${uuid()}`,
     name: computed(() => props.name),
     label: computed(() => props.label),
+    description: computed(() => props.description),
     value: computed(() => {
         if (form && props.name) {
-            return form.getFieldValue(props.name) as string | number | boolean | null;
+            return form.getFieldValue(props.name);
         }
 
         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);
@@ -50,6 +60,9 @@ const api: IAGHeadlessInput = {
 
         emit('update:modelValue', value);
     },
+    __setElement(element) {
+        $el.value = element;
+    },
 };
 
 provide<IAGHeadlessInput>('input', api);

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

@@ -0,0 +1,28 @@
+<template>
+    <slot :id="`${input.id}-description`">
+        <AGMarkdown
+            v-if="show"
+            v-bind="$attrs"
+            :id="`${input.id}-description`"
+            :text="text"
+        />
+    </slot>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { injectReactiveOrFail } from '@/utils/vue';
+
+import AGMarkdown from '../../lib/AGMarkdown.vue';
+import type { IAGHeadlessInput } from './AGHeadlessInput';
+
+defineOptions({ inheritAttrs: false });
+
+const input = injectReactiveOrFail<IAGHeadlessInput>(
+    'input',
+    '<AGHeadlessInputDescription> must be a child of a <AGHeadlessInput>',
+);
+const text = computed(() => (typeof input.description === 'string' ? input.description : ''));
+const show = computed(() => !!input.description);
+</script>

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

@@ -4,20 +4,26 @@
         ref="$input"
         :name="name"
         :type="type"
-        :value="value"
+        :required="input.required ?? undefined"
         :aria-invalid="input.errors ? 'true' : 'false'"
-        :aria-describedby="input.errors ? `${input.id}-error` : undefined"
+        :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 } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 
-import { injectReactiveOrFail, stringProp } from '@/utils';
+import { injectReactiveOrFail, stringProp } from '@/utils/vue';
+import type { __SetsElement } from '@/components/interfaces';
+import type { FormFieldValue } from '@/forms/Form';
 import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
 
+import { onFormFocus } from './composition';
+
 const props = defineProps({
     type: stringProp('text'),
 });
@@ -42,6 +48,37 @@ function update() {
         return;
     }
 
-    input.update(props.type === 'checkbox' ? $input.value.checked : $input.value.value);
+    input.update(getValue());
 }
+
+function getValue(): FormFieldValue | null {
+    if (!$input.value) {
+        return null;
+    }
+
+    switch (props.type) {
+        case 'checkbox':
+            return $input.value.checked;
+        case 'date':
+            return $input.value.valueAsDate;
+        default:
+            return $input.value.value;
+    }
+}
+
+onFormFocus(input, () => $input.value?.focus());
+watchEffect(() => (input as unknown as __SetsElement).__setElement($input.value));
+watchEffect(() => {
+    if (!$input.value) {
+        return;
+    }
+
+    if (props.type === 'date') {
+        $input.value.valueAsDate = value.value as Date;
+
+        return;
+    }
+
+    $input.value.value = value.value as string;
+});
 </script>

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

@@ -0,0 +1,43 @@
+<template>
+    <textarea
+        :id="input.id"
+        ref="$textArea"
+        :name="name"
+        :required="input.required ?? undefined"
+        :value="value"
+        :aria-invalid="input.errors ? 'true' : 'false'"
+        :aria-describedby="
+            input.errors ? `${input.id}-error` : input.description ? `${input.id}-description` : undefined
+        "
+        @input="update"
+    />
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue';
+
+import { injectReactiveOrFail } from '@/utils/vue';
+import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
+import type { __SetsElement } from '@/components/interfaces';
+
+import { onFormFocus } from './composition';
+
+const $textArea = ref<HTMLTextAreaElement>();
+const input = injectReactiveOrFail<IAGHeadlessInput>(
+    'input',
+    '<AGHeadlessInputTextArea> must be a child of a <AGHeadlessInput>',
+);
+const name = computed(() => input.name ?? undefined);
+const value = computed(() => input.value as string);
+
+function update() {
+    if (!$textArea.value) {
+        return;
+    }
+
+    input.update($textArea.value.value);
+}
+
+watchEffect(() => (input as unknown as __SetsElement).__setElement($textArea.value));
+onFormFocus(input, () => $textArea.value?.focus());
+</script>

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

@@ -0,0 +1,10 @@
+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,11 +1,15 @@
+export * from './composition';
+export * from './AGHeadlessButton';
 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';

package/src/components/index.ts

@@ -3,9 +3,11 @@ import AGAppOverlays from './AGAppOverlays.vue';
 
 export { AGAppLayout, AGAppOverlays };
 
+export * from './composition';
 export * from './constants';
 export * from './forms';
 export * from './headless';
+export * from './interfaces';
 export * from './lib';
 export * from './modals';
 export * from './snackbars';

package/src/components/interfaces.ts

@@ -0,0 +1,24 @@
+import { isObject } from '@noeldemartin/utils';
+import type { Ref, UnwrapNestedRefs } from 'vue';
+
+export function getElement(value: unknown): HTMLElement | undefined {
+    if (value instanceof HTMLElement) {
+        return value;
+    }
+
+    if (hasElement(value)) {
+        return value.$el;
+    }
+}
+
+export function hasElement(value: unknown): value is UnwrapNestedRefs<HasElement> {
+    return isObject(value) && '$el' in value;
+}
+
+export interface __SetsElement {
+    __setElement(element?: HTMLElement): void;
+}
+
+export interface HasElement {
+    $el: Readonly<Ref<HTMLElement | undefined>>;
+}

package/src/components/lib/AGMarkdown.vue

@@ -3,20 +3,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, h } from 'vue';
+import { computed, h, useAttrs } from 'vue';
 
 import { renderMarkdown } from '@/utils/markdown';
-import { booleanProp, objectProp, stringProp } from '@/utils/vue';
+import { booleanProp, mixedProp, stringProp } from '@/utils/vue';
 import { translate } from '@/lang';
 
 const props = defineProps({
     as: stringProp(),
     inline: booleanProp(),
     langKey: stringProp(),
-    langParams: objectProp<Record<string, unknown>>(),
+    langParams: mixedProp<number | 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) {
@@ -32,5 +33,9 @@ const html = computed(() => {
     return renderedHtml;
 });
 const root = () =>
-    h(props.as ?? (props.inline ? 'span' : 'div'), { class: props.inline ? '' : 'prose', innerHTML: html.value });
+    h(props.as ?? (props.inline ? 'span' : 'div'), {
+        innerHTML: html.value,
+        ...attrs,
+        class: `${attrs.class ?? ''} ${props.inline ? '' : 'prose'}`,
+    });
 </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/modals/AGConfirmModal.ts

@@ -1,18 +1,24 @@
 import { computed } from 'vue';
 import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
+import type { ObjectWithoutEmpty, SubPartial } from '@noeldemartin/utils';
 
-import { requiredStringProp, stringProp } from '@/utils';
+import { Colors } from '@/components/constants';
+import { enumProp, requiredStringProp, stringProp } from '@/utils';
 import { translateWithDefault } from '@/lang';
 
 export const confirmModalProps = {
     title: stringProp(),
     message: requiredStringProp(),
     acceptText: stringProp(),
+    acceptColor: enumProp(Colors, Colors.Primary),
     cancelText: stringProp(),
+    cancelColor: enumProp(Colors, Colors.Clear),
 };
 
-export type AGConfirmModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof confirmModalProps>>;
+export type AGConfirmModalProps = SubPartial<
+    ObjectWithoutEmpty<ExtractPropTypes<typeof confirmModalProps>>,
+    'acceptColor' | 'cancelColor'
+>;
 
 export function useConfirmModalProps(): typeof confirmModalProps {
     return confirmModalProps;

package/src/components/modals/AGConfirmModal.vue

@@ -3,10 +3,10 @@
         <AGMarkdown :text="message" />
 
         <div class="mt-2 flex flex-row-reverse gap-2">
-            <AGButton @click="close(true)">
+            <AGButton :color="acceptColor" @click="close(true)">
                 {{ renderedAcceptText }}
             </AGButton>
-            <AGButton color="secondary" @click="close()">
+            <AGButton :color="cancelColor" @click="close()">
                 {{ renderedCancelText }}
             </AGButton>
         </div>

package/src/components/modals/AGPromptModal.ts

@@ -1,8 +1,9 @@
 import { computed } from 'vue';
 import type { ExtractPropTypes } from 'vue';
-import type { ObjectWithoutEmpty } from '@noeldemartin/utils';
+import type { ObjectWithoutEmpty, SubPartial } from '@noeldemartin/utils';
 
-import { requiredStringProp, stringProp } from '@/utils';
+import { Colors } from '@/components/constants';
+import { enumProp, requiredStringProp, stringProp } from '@/utils';
 import { translateWithDefault } from '@/lang';
 
 export const promptModalProps = {
@@ -12,10 +13,15 @@ export const promptModalProps = {
     defaultValue: stringProp(),
     placeholder: stringProp(),
     acceptText: stringProp(),
+    acceptColor: enumProp(Colors, Colors.Primary),
     cancelText: stringProp(),
+    cancelColor: enumProp(Colors, Colors.Clear),
 };
 
-export type AGPromptModalProps = ObjectWithoutEmpty<ExtractPropTypes<typeof promptModalProps>>;
+export type AGPromptModalProps = SubPartial<
+    ObjectWithoutEmpty<ExtractPropTypes<typeof promptModalProps>>,
+    'acceptColor' | 'cancelColor'
+>;
 
 export function usePromptModalProps(): typeof promptModalProps {
     return promptModalProps;

package/src/components/modals/AGPromptModal.vue

@@ -6,10 +6,10 @@
             <AGInput name="draft" :placeholder="placeholder" :label="label" />
 
             <div class="mt-2 flex flex-row-reverse gap-2">
-                <AGButton submit>
+                <AGButton :color="acceptColor" submit>
                     {{ renderedAcceptText }}
                 </AGButton>
-                <AGButton color="secondary" @click="close()">
+                <AGButton :color="cancelColor" @click="close()">
                     {{ renderedCancelText }}
                 </AGButton>
             </div>

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);
     },
 });