@aerogel/core 0.0.0-next.59bf5f7cc06e728d0cf6c00de28f1da48d7d6b8e → 0.0.0-next.7f6ed5a1f91688a86bf5ede2adc465e4fd6cfdea

package/src/components/modals/AGModal.vue

@@ -1,10 +1,5 @@
 <template>
-    <AGHeadlessModal
-        ref="$headlessModal"
-        v-slot="{ close }: IAGHeadlessModalDefaultSlotProps"
-        :cancellable="cancellable"
-        class="relative z-50"
-    >
+    <AGHeadlessModal v-slot="{ close }: IAGHeadlessModalDefaultSlotProps" class="relative z-50">
         <div class="fixed inset-0 flex items-center justify-center">
             <AGHeadlessModalPanel class="flex max-h-full max-w-full flex-col overflow-hidden bg-white">
                 <div class="flex max-h-full flex-col overflow-auto p-4">
@@ -16,21 +11,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-
-import { booleanProp } from '@/utils';
-import type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from '@/components/headless/modals/AGHeadlessModal';
-
-import type { IAGModal } from './AGModal';
+import type { IAGHeadlessModalDefaultSlotProps } from '@/components/headless/modals/AGHeadlessModal';
 
 import AGHeadlessModal from '../headless/modals/AGHeadlessModal.vue';
 import AGHeadlessModalPanel from '../headless/modals/AGHeadlessModalPanel.vue';
-
-const $headlessModal = ref<IAGHeadlessModal>();
-
-defineProps({ cancellable: booleanProp(true) });
-defineExpose<IAGModal>({
-    close: async () => $headlessModal.value?.close(),
-    cancellable: computed(() => !!$headlessModal.value?.cancellable),
-});
 </script>

package/src/components/modals/index.ts

@@ -1,8 +1,5 @@
-import AGAlertModal from './AGAlertModal.vue';
-import AGConfirmModal from './AGConfirmModal.vue';
-import AGLoadingModal from './AGLoadingModal.vue';
 import AGModal from './AGModal.vue';
 import AGModalContext from './AGModalContext.vue';
 import { IAGModal } from './AGModal';
 
-export { AGAlertModal, AGConfirmModal, AGModal, AGModalContext, AGLoadingModal, IAGModal };
+export { AGModal, AGModalContext, IAGModal };

package/src/directives/index.ts

@@ -1,6 +1,6 @@
 import type { Directive } from 'vue';
 
-import { definePlugin } from '@/plugins';
+import { defineBootstrapHook } from '@/bootstrap/hooks';
 
 import initialFocus from './initial-focus';
 
@@ -8,8 +8,6 @@ const directives: Record<string, Directive> = {
     'initial-focus': initialFocus,
 };
 
-export default definePlugin({
-    install(app) {
-        Object.entries(directives).forEach(([name, directive]) => app.directive(name, directive));
-    },
+export default defineBootstrapHook(async (app) => {
+    Object.entries(directives).forEach(([name, directive]) => app.directive(name, directive));
 });

package/src/forms/Form.test.ts

@@ -34,25 +34,4 @@ describe('Form', () => {
         expect(form.errors.name).toEqual(['required']);
     });
 
-    it('resets form', () => {
-        // Arrange
-        const form = useForm({
-            name: {
-                type: FormFieldTypes.String,
-                rules: 'required',
-            },
-        });
-
-        form.name = 'Foo bar';
-        form.submit();
-
-        // Act
-        form.reset();
-
-        // Assert
-        expect(form.valid).toBe(true);
-        expect(form.submitted).toBe(false);
-        expect(form.name).toBeNull();
-    });
-
 });

package/src/forms/Form.ts

@@ -1,12 +1,11 @@
 import { MagicObject } from '@noeldemartin/utils';
-import { computed, reactive, readonly, ref } from 'vue';
+import { reactive, readonly, ref } from 'vue';
 import type { ObjectValues } from '@noeldemartin/utils';
-import type { ComputedRef, DeepReadonly, Ref, UnwrapNestedRefs } from 'vue';
+import type { DeepReadonly, Ref, UnwrapNestedRefs } from 'vue';
 
 export const FormFieldTypes = {
     String: 'string',
     Number: 'number',
-    Boolean: 'boolean',
 } as const;
 
 export interface FormFieldDefinition<TType extends FormFieldType = FormFieldType, TRules extends string = string> {
@@ -19,7 +18,7 @@ export type FormFieldDefinitions = Record<string, FormFieldDefinition>;
 export type FormFieldType = ObjectValues<typeof FormFieldTypes>;
 
 export type FormData<T> = {
-    -readonly [k in keyof T]: T[k] extends FormFieldDefinition<infer TType, infer TRules>
+    [k in keyof T]: T[k] extends FormFieldDefinition<infer TType, infer TRules>
         ? TRules extends 'required'
             ? GetFormFieldValue<TType>
             : GetFormFieldValue<TType> | null
@@ -34,8 +33,6 @@ export type GetFormFieldValue<TType> = TType extends typeof FormFieldTypes.Strin
     ? string
     : TType extends typeof FormFieldTypes.Number
     ? number
-    : TType extends typeof FormFieldTypes.Boolean
-    ? boolean
     : never;
 
 export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinitions> extends MagicObject {
@@ -44,7 +41,7 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
 
     private _fields: Fields;
     private _data: FormData<Fields>;
-    private _valid: ComputedRef<boolean>;
+    private _valid: Ref<boolean>;
     private _submitted: Ref<boolean>;
     private _errors: FormErrors<Fields>;
 
@@ -53,9 +50,9 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
 
         this._fields = fields;
         this._submitted = ref(false);
+        this._valid = ref(true);
         this._data = this.getInitialData(fields);
         this._errors = this.getInitialErrors(fields);
-        this._valid = computed(() => !Object.values(this._errors).some((error) => error !== null));
 
         this.errors = readonly(this._errors);
     }
@@ -81,22 +78,15 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
     }
 
     public validate(): boolean {
-        const errors = Object.entries(this._fields).reduce((formErrors, [name, definition]) => {
-            formErrors[name] = this.getFieldErrors(name, definition);
+        const errors = Object.entries(this._fields).reduce((errors, [name, definition]) => {
+            errors[name] = this.getFieldErrors(name, definition);
 
-            return formErrors;
+            return errors;
         }, {} as Record<string, string[] | null>);
 
-        this.resetErrors(errors);
+        Object.assign(this._errors, errors);
 
-        return this.valid;
-    }
-
-    public reset(): void {
-        this._submitted.value = false;
-
-        this.resetData();
-        this.resetErrors();
+        return (this._valid.value = !Object.values(errors).some((error) => error !== null));
     }
 
     public submit(): boolean {
@@ -138,10 +128,10 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
             return {} as FormData<Fields>;
         }
 
-        const data = Object.entries(fields).reduce((formData, [name, definition]) => {
-            formData[name as keyof Fields] = (definition.default ?? null) as FormData<Fields>[keyof Fields];
+        const data = Object.entries(fields).reduce((data, [name, definition]) => {
+            data[name as keyof Fields] = (definition.default ?? null) as FormData<Fields>[keyof Fields];
 
-            return formData;
+            return data;
         }, {} as FormData<Fields>);
 
         return reactive(data) as FormData<Fields>;
@@ -152,25 +142,13 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
             return {} as FormErrors<Fields>;
         }
 
-        const errors = Object.keys(fields).reduce((formErrors, name) => {
-            formErrors[name as keyof Fields] = null;
+        const errors = Object.keys(fields).reduce((errors, name) => {
+            errors[name as keyof Fields] = null;
 
-            return formErrors;
+            return errors;
         }, {} as FormErrors<Fields>);
 
         return reactive(errors) as FormErrors<Fields>;
     }
 
-    private resetData(): void {
-        for (const [name, field] of Object.entries(this._fields)) {
-            this._data[name as keyof Fields] = (field.default ?? null) as FormData<Fields>[keyof Fields];
-        }
-    }
-
-    private resetErrors(errors?: Record<string, string[] | null>): void {
-        Object.keys(this._errors).forEach((key) => delete this._errors[key as keyof Fields]);
-
-        errors && Object.assign(this._errors, errors);
-    }
-
 }

package/src/forms/utils.ts

@@ -1,23 +1,6 @@
 import { FormFieldTypes } from './Form';
 import type { FormFieldDefinition } from './Form';
 
-export function booleanInput(defaultValue?: boolean): FormFieldDefinition<typeof FormFieldTypes.Boolean> {
-    return {
-        default: defaultValue,
-        type: FormFieldTypes.Boolean,
-    };
-}
-
-export function requiredBooleanInput(
-    defaultValue?: boolean,
-): FormFieldDefinition<typeof FormFieldTypes.Boolean, 'required'> {
-    return {
-        default: defaultValue,
-        type: FormFieldTypes.Boolean,
-        rules: 'required',
-    };
-}
-
 export function requiredNumberInput(
     defaultValue?: number,
 ): FormFieldDefinition<typeof FormFieldTypes.Number, 'required'> {

package/src/lang/Lang.ts

@@ -1,58 +1,19 @@
-import { facade, toString } from '@noeldemartin/utils';
+import { useI18n } from 'vue-i18n';
+import { facade } from '@noeldemartin/utils';
+import type { Composer } from 'vue-i18n';
 
-import App from '@/services/App';
 import Service from '@/services/Service';
 
-export interface LangProvider {
-    translate(key: string, parameters?: Record<string, unknown>): string;
-}
-
 export class LangService extends Service {
 
-    private provider: LangProvider;
-
-    constructor() {
-        super();
-
-        this.provider = {
-            translate: (key) => {
-                // eslint-disable-next-line no-console
-                App.isDevelopment && console.warn('Lang provider is missing');
-
-                return key;
-            },
-        };
-    }
+    private i18n?: Composer;
 
-    public setProvider(provider: LangProvider): void {
-        this.provider = provider;
+    public setup(): void {
+        this.i18n = useI18n();
     }
 
-    public translate(key: string, parameters?: Record<string, unknown>): string {
-        return this.provider.translate(key, parameters) ?? key;
-    }
-
-    public translateWithDefault(key: string, defaultMessage: string): string;
-    public translateWithDefault(key: string, parameters: Record<string, unknown>, defaultMessage: string): string;
-    public translateWithDefault(
-        key: string,
-        defaultMessageOrParameters?: string | Record<string, unknown>,
-        defaultMessage?: string,
-    ): string {
-        defaultMessage ??= defaultMessageOrParameters as string;
-
-        const parameters = typeof defaultMessageOrParameters === 'string' ? {} : defaultMessageOrParameters ?? {};
-        const message = this.provider.translate(key, parameters) ?? key;
-
-        if (message === key) {
-            return Object.entries(parameters).reduce(
-                (renderedMessage, [name, value]) =>
-                    renderedMessage.replace(new RegExp(`\\{\\s*${name}\\s*\\}`, 'g'), toString(value)),
-                defaultMessage,
-            );
-        }
-
-        return message;
+    public translate(key: string, parameters: Record<string, unknown> = {}): string {
+        return this.i18n?.t(key, parameters) ?? key;
     }
 
 }

package/src/lang/helpers.ts

@@ -0,0 +1,5 @@
+import Lang from '@/lang/Lang';
+
+export function lang(key: string, parameters: Record<string, unknown> = {}): string {
+    return Lang.translate(key, parameters);
+}

package/src/lang/index.ts

@@ -1,30 +1,89 @@
-import { bootServices } from '@/services';
-import { definePlugin } from '@/plugins';
+import { createI18n } from 'vue-i18n';
+import { fail, stringMatch } from '@noeldemartin/utils';
+import type { I18nOptions } from 'vue-i18n';
+import type { Plugin } from 'vue';
 
-import Lang, { LangProvider } from './Lang';
-import { translate, translateWithDefault } from './utils';
+import { defineBootstrapHook, onAppMounted } from '@/bootstrap/hooks';
+import { bootServices } from '@/services';
+import type { BootstrapOptions } from '@/bootstrap/options';
 
-export { Lang, LangProvider, translate, translateWithDefault };
+import Lang from './Lang';
 
 const services = { $lang: Lang };
 
+function getLangOptions(options: BootstrapOptions): LangOptions | null {
+    if (options.lang) {
+        return options.lang;
+    }
+
+    if (options.langMessages) {
+        return { messages: options.langMessages };
+    }
+
+    return null;
+}
+
+function getMessageLoaders(messageLoaders: Record<string, unknown>): Record<string, LazyMessages> {
+    return Object.entries(messageLoaders).reduce((loaders, [fileName, loader]) => {
+        const locale = stringMatch<2>(fileName, /.*\/lang\/(.+)\.yaml/)?.[1];
+
+        if (locale) {
+            loaders[locale] = () =>
+                (loader as () => Promise<{ default: Record<string, unknown> }>)().then(
+                    ({ default: messages }) => messages,
+                );
+        }
+
+        return loaders;
+    }, {} as Record<string, LazyMessages>);
+}
+
+async function createAppI18n(options: LangOptions): Promise<Plugin> {
+    const locale = options.defaultLocale ?? 'en';
+    const fallbackLocale = options.fallbackLocale ?? 'en';
+    const messageLoaders = getMessageLoaders(options.messages);
+    const lazyMessages = messageLoaders[locale] ?? fail<LazyMessages>(`Missing messages for '${locale}' locale`);
+    const messages = { [locale]: await lazyMessages() } as I18nOptions['messages'];
+
+    return createI18n({ locale, fallbackLocale, messages });
+}
+
 export type LangServices = typeof services;
 
-export default definePlugin({
-    async install(app) {
-        app.config.globalProperties.$t ??= translate;
-        app.config.globalProperties.$td = translateWithDefault;
+export type LazyMessages = () => Promise<Record<string, unknown>>;
 
-        await bootServices(app, services);
-    },
+export interface LangOptions {
+    messages: Record<string, unknown>;
+    defaultLocale?: string;
+    fallbackLocale?: string;
+}
+
+export * from './helpers';
+export { Lang };
+
+export default defineBootstrapHook(async (app, options) => {
+    const langOptions = getLangOptions(options);
+
+    if (!langOptions) {
+        return;
+    }
+
+    onAppMounted(() => Lang.setup());
+
+    const plugin = await createAppI18n(langOptions);
+
+    app.use(plugin);
+
+    await bootServices(app, services);
 });
 
-declare module '@/services' {
-    interface Services extends LangServices {}
+declare module '@/bootstrap/options' {
+    interface BootstrapOptions {
+        lang?: LangOptions;
+        langMessages?: Record<string, unknown>;
+    }
 }
 
-declare module '@vue/runtime-core' {
-    interface ComponentCustomProperties {
-        $td: typeof translateWithDefault;
-    }
+declare module '@/services' {
+    interface Services extends LangServices {}
 }

package/src/main.ts

@@ -1,11 +1,7 @@
-import './globals';
-
 export * from './bootstrap';
 export * from './components';
-export * from './errors';
 export * from './forms';
 export * from './lang';
-export * from './plugins';
 export * from './services';
 export * from './ui';
 export * from './utils';

package/src/models/index.ts

@@ -0,0 +1,18 @@
+import { IndexedDBEngine, bootModelsFromViteGlob, setEngine } from 'soukai';
+
+import { defineBootstrapHook } from '@/bootstrap/hooks';
+
+export default defineBootstrapHook(async (_, options) => {
+    if (!options.models) {
+        return;
+    }
+
+    setEngine(new IndexedDBEngine());
+    bootModelsFromViteGlob(options.models);
+});
+
+declare module '@/bootstrap/options' {
+    interface BootstrapOptions {
+        models?: Record<string, Record<string, unknown>>;
+    }
+}

package/src/routing/index.ts

@@ -0,0 +1,33 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import type { Plugin } from 'vue';
+
+import { defineBootstrapHook } from '@/bootstrap/hooks';
+
+function createAppRouter(options: { routes: RouteRecordRaw[]; basePath?: string }): Plugin {
+    return createRouter({
+        history: createWebHistory(options.basePath),
+        routes: options.routes,
+    });
+}
+
+export default defineBootstrapHook(async (app, options) => {
+    if (!options.routes) {
+        return;
+    }
+
+    const plugin = createAppRouter({
+        routes: options.routes,
+        basePath: options.basePath ?? __AG_BASE_PATH,
+    });
+
+    app.use(plugin);
+});
+
+declare module '@/bootstrap/options' {
+    interface BootstrapOptions {
+        routes?: RouteRecordRaw[];
+        basePath?: string;
+    }
+}
+
+import type { RouteRecordRaw } from 'vue-router';