@aerogel/core 0.0.0-next.7f6ed5a1f91688a86bf5ede2adc465e4fd6cfdea → 0.0.0-next.88c59e62f64db70aedfbc4c31b5bbc287be44483

package/src/bootstrap/index.ts

@@ -1,36 +1,23 @@
-import { createApp, h } from 'vue';
+import { createApp } from 'vue';
 import type { Component } from 'vue';
 
 import directives from '@/directives';
+import errors from '@/errors';
+import Events from '@/services/Events';
 import lang from '@/lang';
-import models from '@/models';
-import routing from '@/routing';
 import services from '@/services';
 import ui from '@/ui';
-import { runAppMountedHooks } from '@/bootstrap/hooks';
-import type { BootstrapOptions } from '@/bootstrap/options';
+import { installPlugins } from '@/plugins';
+import type { AerogelOptions } from '@/bootstrap/options';
 
-export async function bootstrapApplication(rootComponent: Component, options: BootstrapOptions = {}): Promise<void> {
-    const hooks = [directives, lang, models, routing, services, ui];
-    const app = createApp({
-        data: () => ({
-            ready: false,
-        }),
-        mounted() {
-            runAppMountedHooks();
+export async function bootstrapApplication(rootComponent: Component, options: AerogelOptions = {}): Promise<void> {
+    const plugins = [directives, errors, lang, services, ui, ...(options.plugins ?? [])];
+    const app = createApp(rootComponent);
 
-            this.ready = true;
-        },
-        render() {
-            if (!this.ready) {
-                return null;
-            }
-
-            return h(rootComponent);
-        },
-    });
-
-    await Promise.all(hooks.map((hook) => hook(app, options)));
+    await installPlugins(plugins, app, options);
 
     app.mount('#app');
+    app._container?.classList.remove('loading');
+
+    Events.emit('application-mounted');
 }

package/src/bootstrap/options.ts

@@ -1 +1,5 @@
-export interface BootstrapOptions {}
+import type { Plugin } from '@/plugins';
+
+export interface AerogelOptions {
+    plugins?: Plugin[];
+}

package/src/components/AGAppModals.vue

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

package/src/components/AGAppOverlays.vue

@@ -1,21 +1,19 @@
 <template>
     <div ref="$backdrop" class="pointer-events-none fixed inset-0 z-50 bg-black/30 opacity-0" />
-    <aside v-if="modal">
-        <AGModalContext :child-index="1" :modal="modal" />
-    </aside>
+    <AGAppModals />
+    <AGAppSnackbars />
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
-import UI from '@/ui/UI';
 import { useEvent } from '@/utils/composition/events';
 
-import AGModalContext from './modals/AGModalContext.vue';
+import AGAppModals from './AGAppModals.vue';
+import AGAppSnackbars from './AGAppSnackbars.vue';
 
 const $backdrop = ref<HTMLElement | null>(null);
 const backdropHidden = ref(true);
-const modal = computed(() => UI.modals[0] ?? null);
 
 useEvent('show-overlays-backdrop', async () => {
     if (!$backdrop.value || !backdropHidden.value) {

package/src/components/AGAppSnackbars.vue

@@ -0,0 +1,13 @@
+<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 class="flex w-full flex-col items-center space-y-4 sm:items-end">
+            <component
+                :is="snackbar.component"
+                v-for="snackbar of $ui.snackbars"
+                :id="snackbar.id"
+                :key="snackbar.id"
+                v-bind="snackbar.properties"
+            />
+        </div>
+    </div>
+</template>

package/src/components/basic/AGErrorMessage.vue

@@ -0,0 +1,16 @@
+<template>
+    <AGMarkdown :text="message" inline />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import Errors from '@/errors/Errors';
+import { requiredObjectProp } from '@/utils/vue';
+import type { ErrorSource } from '@/errors/Errors.state';
+
+import AGMarkdown from './AGMarkdown.vue';
+
+const props = defineProps({ error: requiredObjectProp<ErrorSource>() });
+const message = computed(() => Errors.getErrorMessage(props.error));
+</script>

package/src/components/basic/AGLink.vue

@@ -0,0 +1,9 @@
+<template>
+    <AGHeadlessButton class="font-medium hover:underline">
+        <slot />
+    </AGHeadlessButton>
+</template>
+
+<script setup lang="ts">
+import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
+</script>

package/src/components/basic/AGMarkdown.vue

@@ -6,15 +6,31 @@
 import { computed, h } from 'vue';
 
 import { renderMarkdown } from '@/utils/markdown';
-import { stringProp } from '@/utils/vue';
-import { lang } from '@/lang/helpers';
+import { booleanProp, objectProp, stringProp } from '@/utils/vue';
+import { translate } from '@/lang';
 
 const props = defineProps({
+    as: stringProp(),
+    inline: booleanProp(),
     langKey: stringProp(),
+    langParams: objectProp<Record<string, unknown>>(),
     text: stringProp(),
 });
 
-const markdown = computed(() => props.text ?? (props.langKey && lang(props.langKey)));
-const html = computed(() => markdown.value && renderMarkdown(markdown.value));
-const root = () => h('div', { class: 'prose', innerHTML: html.value });
+const markdown = computed(() => props.text ?? (props.langKey && translate(props.langKey, props.langParams ?? {})));
+const html = computed(() => {
+    if (!markdown.value) {
+        return null;
+    }
+
+    let renderedHtml = renderMarkdown(markdown.value);
+
+    if (props.inline) {
+        renderedHtml = renderedHtml.replace('<p>', '<span>').replace('</p>', '</span>');
+    }
+
+    return renderedHtml;
+});
+const root = () =>
+    h(props.as ?? (props.inline ? 'span' : 'div'), { class: props.inline ? '' : 'prose', innerHTML: html.value });
 </script>

package/src/components/basic/index.ts

@@ -1,3 +1,5 @@
+import AGErrorMessage from './AGErrorMessage.vue';
+import AGLink from './AGLink.vue';
 import AGMarkdown from './AGMarkdown.vue';
 
-export { AGMarkdown };
+export { AGErrorMessage, AGLink, AGMarkdown };

package/src/components/constants.ts

@@ -0,0 +1,8 @@
+export const Colors = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+    Danger: 'danger',
+    Clear: 'clear',
+} as const;
+
+export type Color = (typeof Colors)[keyof typeof Colors];

package/src/components/forms/AGButton.vue

@@ -1,11 +1,44 @@
 <template>
-    <AGHeadlessButton
-        class="bg-indigo-600 px-2.5 py-1.5 text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-    >
+    <AGHeadlessButton class="px-2.5 py-1.5 focus-visible:outline focus-visible:outline-2" :class="colorClasses">
         <slot />
     </AGHeadlessButton>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+
+import { enumProp } from '@/utils/vue';
+import { Colors } from '@/components/constants';
+
 import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
+
+const props = defineProps({
+    color: enumProp(Colors, Colors.Primary),
+});
+
+const colorClasses = computed(() => {
+    switch (props.color) {
+        case Colors.Secondary:
+            return [
+                'text-white bg-gray-600',
+                'hover:bg-gray-500',
+                'focus-visible:outline-offset-2 focus-visible:outline-gray-600',
+            ].join(' ');
+        case Colors.Clear:
+            return 'hover:bg-gray-500/20 focus-visible:outline-gray-500/60';
+        case Colors.Danger:
+            return [
+                'text-white bg-red-600',
+                'hover:bg-red-500',
+                'focus-visible:outline-offset-2 focus-visible:outline-red-600',
+            ].join(' ');
+        case Colors.Primary:
+        default:
+            return [
+                'text-white bg-indigo-600',
+                'hover:bg-indigo-500',
+                'focus-visible:outline-offset-2 focus-visible:outline-indigo-600',
+            ].join(' ');
+    }
+});
 </script>

package/src/components/forms/AGCheckbox.vue

@@ -0,0 +1,35 @@
+<template>
+    <AGHeadlessInput ref="$input" :name="name" class="flex">
+        <AGHeadlessInputInput
+            v-bind="$attrs"
+            type="checkbox"
+            :class="{
+                'text-indigo-600 focus:ring-indigo-600': !$input?.errors,
+                'border-red-200 text-red-600 focus:ring-red-600': $input?.errors,
+            }"
+        />
+
+        <div class="ml-2">
+            <AGHeadlessInputLabel v-if="$slots.default">
+                <slot />
+            </AGHeadlessInputLabel>
+            <AGHeadlessInputError class="text-sm text-red-600" />
+        </div>
+    </AGHeadlessInput>
+</template>
+
+<script setup lang="ts">
+import { componentRef, stringProp } from '@/utils/vue';
+
+import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
+
+import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
+import AGHeadlessInputError from '../headless/forms/AGHeadlessInputError.vue';
+import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.vue';
+import AGHeadlessInputLabel from '../headless/forms/AGHeadlessInputLabel.vue';
+
+defineProps({ name: stringProp() });
+defineOptions({ inheritAttrs: false });
+
+const $input = componentRef<IAGHeadlessInput>();
+</script>

package/src/components/forms/AGInput.vue

@@ -1,24 +1,27 @@
 <template>
     <AGHeadlessInput
         ref="$input"
-        as="div"
-        class="flex flex-col items-center"
+        class="relative flex flex-col items-center"
+        :class="className"
         :name="name"
     >
         <AGHeadlessInputInput
-            v-bind="$attrs"
+            v-bind="attrs"
             class="block w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600"
             :class="{
                 'ring-1 ring-red-500': $input?.errors,
             }"
         />
-        <AGHeadlessInputError class="mt-1 text-sm text-red-500" />
+        <div class="absolute bottom-0 left-0 translate-y-full">
+            <AGHeadlessInputError class="mt-1 text-sm text-red-500" />
+        </div>
     </AGHeadlessInput>
 </template>
 
 <script setup lang="ts">
 import { componentRef, stringProp } from '@/utils/vue';
 
+import { useInputAttrs } from '@/utils';
 import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
 
 import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
@@ -29,4 +32,5 @@ defineProps({ name: stringProp() });
 defineOptions({ inheritAttrs: false });
 
 const $input = componentRef<IAGHeadlessInput>();
+const [attrs, className] = useInputAttrs();
 </script>

package/src/components/forms/index.ts

@@ -1,5 +1,4 @@
-import AGButton from './AGButton.vue';
-import AGForm from './AGForm.vue';
-import AGInput from './AGInput.vue';
-
-export { AGButton, AGForm, AGInput };
+export { default as AGButton } from './AGButton.vue';
+export { default as AGCheckbox } from './AGCheckbox.vue';
+export { default as AGForm } from './AGForm.vue';
+export { default as AGInput } from './AGInput.vue';

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

@@ -7,15 +7,15 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { objectWithoutEmpty } from '@noeldemartin/utils';
-import type { LocationQuery, RouteLocation, RouteParams } from 'vue-router';
 
 import { booleanProp, objectProp, stringProp } from '@/utils/vue';
 
-const { url, route, routeParams, routeQuery, submit } = defineProps({
+const { href, url, route, routeParams, routeQuery, submit } = defineProps({
+    href: stringProp(),
     url: stringProp(),
     route: stringProp(),
-    routeParams: objectProp<RouteParams>(() => ({})),
-    routeQuery: objectProp<LocationQuery>(() => ({})),
+    routeParams: objectProp(() => ({})),
+    routeQuery: objectProp(() => ({})),
     submit: booleanProp(),
 });
 
@@ -24,7 +24,7 @@ const component = computed(() => {
         return {
             tag: 'router-link',
             props: {
-                to: objectWithoutEmpty<Partial<RouteLocation>>({
+                to: objectWithoutEmpty({
                     name: route,
                     params: routeParams,
                     query: routeQuery,
@@ -33,12 +33,12 @@ const component = computed(() => {
         };
     }
 
-    if (url) {
+    if (href || url) {
         return {
             tag: 'a',
             props: {
                 target: '_blank',
-                href: url,
+                href: href || url,
             },
         };
     }

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

@@ -2,7 +2,7 @@ import type { ComputedRef, DeepReadonly, Ref } from 'vue';
 
 export interface IAGHeadlessInput {
     id: string;
-    value: ComputedRef<string | number | null>;
+    value: ComputedRef<string | number | boolean | null>;
     errors: DeepReadonly<Ref<string[] | null>>;
-    update(value: string | number | null): void;
+    update(value: string | number | boolean | null): void;
 }

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

@@ -9,16 +9,16 @@
 import { computed, inject, provide, readonly } from 'vue';
 import { uuid } from '@noeldemartin/utils';
 
-import { stringProp } from '@/utils/vue';
+import { mixedProp, stringProp } from '@/utils/vue';
 import type Form from '@/forms/Form';
 
 import type { IAGHeadlessInput } from './AGHeadlessInput';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
-    as: stringProp(),
+    as: stringProp('div'),
     name: stringProp(),
-    modelValue: stringProp(),
+    modelValue: mixedProp<string | number | boolean>([String, Number, Boolean]),
 });
 const errors = computed(() => {
     if (!form || !props.name) {
@@ -27,12 +27,12 @@ const errors = computed(() => {
 
     return form.errors[props.name] ?? null;
 });
-const form = inject<Form>('form');
+const form = inject<Form | null>('form', null);
 const publicApi: IAGHeadlessInput = {
-    id: uuid(),
+    id: `input-${uuid()}`,
     value: computed(() => {
         if (form && props.name) {
-            return form.getFieldValue(props.name);
+            return form.getFieldValue(props.name) as string | number | boolean | null;
         }
 
         return props.modelValue;

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

@@ -5,18 +5,22 @@
 </template>
 
 <script setup lang="ts">
-import { injectReactiveOrFail } from '@/utils';
+import { computed } from 'vue';
+
+import { injectReactiveOrFail } from '@/utils/vue';
+import { translateWithDefault } from '@/lang/utils';
 
 import type { IAGHeadlessInput } from './AGHeadlessInput';
-import { computed } from 'vue';
-import { lang } from '@/lang';
 
-const input = injectReactiveOrFail<IAGHeadlessInput>('input');
+const input = injectReactiveOrFail<IAGHeadlessInput>(
+    'input',
+    '<AGHeadlessInputError> must be a child of a <AGHeadlessInput>',
+);
 const errorMessage = computed(() => {
     if (!input.errors) {
         return null;
     }
 
-    return lang(`errors.${input.errors[0]}`);
+    return translateWithDefault(`errors.${input.errors[0]}`, `Error: ${input.errors[0]}`);
 });
 </script>

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

@@ -1,10 +1,12 @@
 <template>
     <input
+        :id="input.id"
         ref="$input"
-        type="text"
+        :type="type"
         :value="value"
         :aria-invalid="input.errors ? 'true' : 'false'"
         :aria-describedby="input.errors ? `${input.id}-error` : undefined"
+        :checked="checked"
         @input="update"
     >
 </template>
@@ -12,18 +14,32 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 
-import { injectReactiveOrFail } from '@/utils';
+import { injectReactiveOrFail, stringProp } from '@/utils';
 import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
 
+const props = defineProps({
+    type: stringProp('text'),
+});
+
 const $input = ref<HTMLInputElement>();
-const input = injectReactiveOrFail<IAGHeadlessInput>('input');
+const input = injectReactiveOrFail<IAGHeadlessInput>(
+    'input',
+    '<AGHeadlessInputInput> must be a child of a <AGHeadlessInput>',
+);
 const value = computed(() => input.value);
+const checked = computed(() => {
+    if (props.type !== 'checkbox') {
+        return;
+    }
+
+    return !!value.value;
+});
 
 function update() {
     if (!$input.value) {
         return;
     }
 
-    input.update($input.value.value);
+    input.update(props.type === 'checkbox' ? $input.value.checked : $input.value.value);
 }
 </script>

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

@@ -0,0 +1,16 @@
+<template>
+    <label :for="input.id">
+        <slot />
+    </label>
+</template>
+
+<script setup lang="ts">
+import { injectReactiveOrFail } from '@/utils/vue';
+
+import type { IAGHeadlessInput } from './AGHeadlessInput';
+
+const input = injectReactiveOrFail<IAGHeadlessInput>(
+    'input',
+    '<AGHeadlessInputLabel> must be a child of a <AGHeadlessInput>',
+);
+</script>

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

@@ -0,0 +1,31 @@
+import type { ComputedRef } from 'vue';
+
+import { requiredArrayProp } from '@/utils/vue';
+
+export type SelectOptionValue = string | number | boolean | object | null;
+
+export interface IAGHeadlessSelect {
+    value: ComputedRef<SelectOptionValue | undefined>;
+    options: SelectOptionValue[];
+    update(value: string | number | boolean | null): void;
+}
+
+export const selectProps = {
+    options: requiredArrayProp<SelectOptionValue>(),
+};
+
+export function useSelectProps(): typeof selectProps {
+    return selectProps;
+}
+
+export function extractSelectProps<T extends Record<keyof typeof selectProps, unknown>>(
+    componentProps: T,
+): Pick<T, keyof typeof selectProps> {
+    return Object.keys(selectProps).reduce((extractedProps, selectProp) => {
+        const prop = selectProp as keyof typeof selectProps;
+
+        extractedProps[prop] = componentProps[prop];
+
+        return extractedProps;
+    }, {} as Pick<T, keyof typeof selectProps>);
+}

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

@@ -0,0 +1,45 @@
+<template>
+    <Listbox :model-value="publicApi.value.value" @update:model-value="publicApi.update($event)">
+        <slot />
+    </Listbox>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { Listbox } from '@headlessui/vue';
+
+import { mixedProp, stringProp } from '@/utils/vue';
+import type Form from '@/forms/Form';
+
+import { useSelectProps } from './AGHeadlessSelect';
+import type { IAGHeadlessSelect, SelectOptionValue } from './AGHeadlessSelect';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+    name: stringProp(),
+    modelValue: mixedProp<SelectOptionValue>(),
+    ...useSelectProps(),
+});
+const form = inject<Form | null>('form', null);
+const publicApi: IAGHeadlessSelect = {
+    value: computed(() => {
+        if (form && props.name) {
+            return form.getFieldValue(props.name);
+        }
+
+        return props.modelValue;
+    }),
+    options: props.options,
+    update(value) {
+        if (form && props.name) {
+            form.setFieldValue(props.name, value);
+
+            return;
+        }
+
+        emit('update:modelValue', value);
+    },
+};
+
+defineExpose<IAGHeadlessSelect>(publicApi);
+</script>

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

@@ -0,0 +1,3 @@
+import { ListboxButton } from '@headlessui/vue';
+
+export default ListboxButton;

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

@@ -0,0 +1,3 @@
+import { ListboxLabel } from '@headlessui/vue';
+
+export default ListboxLabel;

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

@@ -0,0 +1,8 @@
+import { ListboxOption } from '@headlessui/vue';
+
+export type IAGHeadlessSelectOptionSlotProps = {
+    active: boolean;
+    selected: boolean;
+};
+
+export default ListboxOption;

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

@@ -0,0 +1,3 @@
+import { ListboxOptions } from '@headlessui/vue';
+
+export default ListboxOptions;

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

@@ -1,4 +1,12 @@
-import AGHeadlessButton from './AGHeadlessButton.vue';
-import AGHeadlessInput from './AGHeadlessInput.vue';
-
-export { AGHeadlessButton, AGHeadlessInput };
+export * from './AGHeadlessInput';
+export * from './AGHeadlessSelect';
+export { default as AGHeadlessButton } from './AGHeadlessButton.vue';
+export { default as AGHeadlessInput } from './AGHeadlessInput.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 AGHeadlessSelect } from './AGHeadlessSelect.vue';
+export { default as AGHeadlessSelectButton } from './AGHeadlessSelectButton';
+export { default as AGHeadlessSelectLabel } from './AGHeadlessSelectLabel';
+export { default as AGHeadlessSelectOption, IAGHeadlessSelectOptionSlotProps } from './AGHeadlessSelectOption';
+export { default as AGHeadlessSelectOptions } from './AGHeadlessSelectOptions';

package/src/components/headless/index.ts

@@ -1,2 +1,3 @@
 export * from './forms';
 export * from './modals';
+export * from './snackbars';