@aerogel/core 0.0.0-next.c29ffcd25bffdbed37ecce3aac1ba14cde3e9d39 → 0.0.0-next.c2e6acc000e97a1020c2e232678563c53884dd0e

package/src/components/ui/PromptModal.vue

@@ -0,0 +1,35 @@
+<template>
+    <Modal v-slot="{ close }" :title="title" persistent>
+        <Form :form="form" @submit="close(form.draft)">
+            <Markdown :text="message" />
+            <Input
+                name="draft"
+                class="mt-2"
+                :placeholder="placeholder"
+                :label="label"
+            />
+
+            <div class="mt-4 flex flex-row-reverse gap-2">
+                <Button :variant="acceptVariant" submit>
+                    {{ renderedAcceptText }}
+                </Button>
+                <Button :variant="cancelVariant" @click="close(false)">
+                    {{ renderedCancelText }}
+                </Button>
+            </div>
+        </Form>
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Button from '@aerogel/core/components/ui/Button.vue';
+import Form from '@aerogel/core/components/ui/Form.vue';
+import Input from '@aerogel/core/components/ui/Input.vue';
+import Modal from '@aerogel/core/components/ui/Modal.vue';
+import { usePromptModal } from '@aerogel/core/components/contracts/PromptModal';
+import type { PromptModalProps } from '@aerogel/core/components/contracts/PromptModal';
+
+const { cancelVariant = 'secondary', ...props } = defineProps<PromptModalProps>();
+const { form, renderedAcceptText, renderedCancelText } = usePromptModal(props);
+</script>

package/src/components/ui/index.ts

@@ -0,0 +1,16 @@
+export { default as AlertModal } from './AlertModal.vue';
+export { default as Button } from './Button.vue';
+export { default as Checkbox } from './Checkbox.vue';
+export { default as ConfirmModal } from './ConfirmModal.vue';
+export { default as ErrorReportModal } from './ErrorReportModal.vue';
+export { default as ErrorReportModalButtons } from './ErrorReportModalButtons.vue';
+export { default as ErrorReportModalTitle } from './ErrorReportModalTitle.vue';
+export { default as Form } from './Form.vue';
+export { default as Input } from './Input.vue';
+export { default as Link } from './Link.vue';
+export { default as LoadingModal } from './LoadingModal.vue';
+export { default as Markdown } from './Markdown.vue';
+export { default as Modal } from './Modal.vue';
+export { default as ModalContext } from './ModalContext.vue';
+export { default as ProgressBar } from './ProgressBar.vue';
+export { default as PromptModal } from './PromptModal.vue';

package/src/components/utils.ts

@@ -1,10 +1,107 @@
-export function extractComponentProps<T extends Record<string, unknown>>(
-    values: Record<string, unknown>,
-    definitions: Record<string, unknown>,
-): T {
-    return Object.keys(definitions).reduce((extracted, prop) => {
-        extracted[prop] = values[prop];
-
-        return extracted;
-    }, {} as Record<string, unknown>) as T;
+import clsx from 'clsx';
+import { computed, customRef, inject, onUnmounted, unref } from 'vue';
+import { cva } from 'class-variance-authority';
+import { isObject } from '@noeldemartin/utils';
+import { twMerge } from 'tailwind-merge';
+import type { ClassValue } from 'clsx';
+import type { ComputedRef, ExtractPropTypes, PropType, Ref, UnwrapNestedRefs } from 'vue';
+import type { GetClosureArgs, GetClosureResult, Nullable } from '@noeldemartin/utils';
+
+import type { HasElement } from '@aerogel/core/components/contracts/shared';
+import type { FormController } from '@aerogel/core/forms';
+
+export type CVAConfig<T> = NonNullable<GetClosureArgs<typeof cva<T>>[1]>;
+export type CVAProps<T> = NonNullable<GetClosureArgs<GetClosureResult<typeof cva<T>>>[0]>;
+export type RefsObject<T> = { [K in keyof T]: Ref<T[K]> | T[K] };
+export type Variants<T extends Record<string, string>> = Required<{
+    [K in keyof T]: {
+        [key in T[K]]: string;
+    };
+}>;
+
+export type ComponentPropDefinitions<T> = {
+    [K in keyof T]: {
+        type?: PropType<T[K]>;
+        default: T[K] | (() => T[K]) | null;
+    };
+};
+
+export type PickComponentProps<TValues, TDefinitions> = {
+    [K in keyof TValues]: K extends keyof TDefinitions ? TValues[K] : never;
+};
+
+export function computedVariantClasses<T>(
+    value: RefsObject<{ baseClasses?: string } & CVAProps<T>>,
+    config: { baseClasses?: string } & CVAConfig<T>,
+): ComputedRef<string> {
+    return computed(() => {
+        const { baseClasses: valueBaseClasses, ...valueRefs } = value;
+        const { baseClasses: configBaseClasses, ...configs } = config;
+        const variants = cva(configBaseClasses, configs as CVAConfig<T>);
+        const values = Object.entries(valueRefs).reduce((extractedValues, [name, valueRef]) => {
+            extractedValues[name as keyof CVAProps<T>] = unref(valueRef);
+
+            return extractedValues;
+        }, {} as CVAProps<T>);
+
+        return classes(variants(values), unref(valueBaseClasses));
+    });
+}
+
+export function classes(...inputs: ClassValue[]): string {
+    return twMerge(clsx(inputs));
+}
+
+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();
+            },
+        };
+    });
+}
+
+export function extractComponentProps<TDefinitions extends {}, TValues extends ExtractPropTypes<TDefinitions>>(
+    values: TValues,
+    definitions: TDefinitions,
+): PickComponentProps<TValues, TDefinitions> {
+    return Object.keys(definitions).reduce(
+        (extracted, prop) => {
+            extracted[prop] = values[prop as keyof TValues];
+
+            return extracted;
+        },
+        {} as Record<string, unknown>,
+    ) as PickComponentProps<TValues, TDefinitions>;
+}
+
+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 function onFormFocus(input: { name: Nullable<string> }, listener: () => unknown): void {
+    const form = inject<FormController | null>('form', null);
+    const stop = form?.on('focus', (name) => input.name === name && listener());
+
+    onUnmounted(() => stop?.());
 }

package/src/directives/index.ts

@@ -1,13 +1,11 @@
 import type { Directive } from 'vue';
 
-import { definePlugin } from '@/plugins';
+import { definePlugin } from '@aerogel/core/plugins';
 
-import initialFocus from './initial-focus';
 import measure from './measure';
 
 const builtInDirectives: Record<string, Directive> = {
-    'initial-focus': initialFocus,
-    'measure': measure,
+    measure: measure,
 };
 
 export * from './measure';
@@ -25,8 +23,14 @@ export default definePlugin({
     },
 });
 
-declare module '@/bootstrap/options' {
+declare module '@aerogel/core/bootstrap/options' {
     export interface AerogelOptions {
         directives?: Record<string, Directive>;
     }
 }
+
+declare module 'vue' {
+    interface ComponentCustomDirectives {
+        measure: Directive<string, string>;
+    }
+}

package/src/directives/measure.ts

@@ -1,4 +1,4 @@
-import { defineDirective } from '@/utils/vue';
+import { defineDirective } from '@aerogel/core/utils/vue';
 import { tap } from '@noeldemartin/utils';
 
 const resizeObservers: WeakMap<HTMLElement, ResizeObserver> = new WeakMap();

package/src/errors/Errors.state.ts

@@ -1,6 +1,6 @@
 import type { JSError } from '@noeldemartin/utils';
 
-import { defineServiceState } from '@/services';
+import { defineServiceState } from '@aerogel/core/services';
 
 export type ErrorSource = string | Error | JSError | unknown;
 

package/src/errors/Errors.ts

@@ -1,16 +1,16 @@
-import { JSError, facade, isObject, objectWithoutEmpty, toString } from '@noeldemartin/utils';
+import { JSError, facade, isDevelopment, isObject, isTesting, objectWithoutEmpty, toString } from '@noeldemartin/utils';
 
-import App from '@/services/App';
-import ServiceBootError from '@/errors/ServiceBootError';
-import UI, { UIComponents } from '@/ui/UI';
-import { translateWithDefault } from '@/lang/utils';
+import App from '@aerogel/core/services/App';
+import ServiceBootError from '@aerogel/core/errors/ServiceBootError';
+import UI, { UIComponents } from '@aerogel/core/ui/UI';
+import { translateWithDefault } from '@aerogel/core/lang/utils';
+import { Colors } from '@aerogel/core/components/constants';
+import { Events } from '@aerogel/core/services';
+import type { ErrorReportModalProps } from '@aerogel/core/components/contracts/ErrorReportModal';
+import type { ModalComponent } from '@aerogel/core/ui/UI.state';
 
 import Service from './Errors.state';
-import { Colors } from '@/components/constants';
-import { Events } from '@/services';
-import type { AGErrorReportModalProps } from '@/components/modals/AGErrorReportModal';
 import type { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
-import type { ModalComponent } from '@/ui/UI.state';
 
 export class ErrorsService extends Service {
 
@@ -34,7 +34,7 @@ export class ErrorsService extends Service {
             return;
         }
 
-        UI.openModal<ModalComponent<AGErrorReportModalProps>>(UI.requireComponent(UIComponents.ErrorReportModal), {
+        UI.openModal<ModalComponent<ErrorReportModalProps>>(UI.requireComponent(UIComponents.ErrorReportModal), {
             reports,
         });
     }
@@ -42,11 +42,11 @@ export class ErrorsService extends Service {
     public async report(error: ErrorSource, message?: string): Promise<void> {
         await Events.emit('error', { error, message });
 
-        if (App.testing) {
+        if (isTesting('unit')) {
             throw error;
         }
 
-        if (App.development) {
+        if (isDevelopment()) {
             this.logError(error);
         }
 
@@ -81,7 +81,7 @@ export class ErrorsService extends Service {
                         text: translateWithDefault('errors.viewDetails', 'View details'),
                         dismiss: true,
                         handler: () =>
-                            UI.openModal<ModalComponent<AGErrorReportModalProps>>(
+                            UI.openModal<ModalComponent<ErrorReportModalProps>>(
                                 UI.requireComponent(UIComponents.ErrorReportModal),
                                 { reports: [report] },
                             ),
@@ -178,7 +178,7 @@ export class ErrorsService extends Service {
 
 export default facade(ErrorsService);
 
-declare module '@/services/Events' {
+declare module '@aerogel/core/services/Events' {
     export interface EventsPayload {
         error: { error: ErrorSource; message?: string };
     }

package/src/errors/index.ts

@@ -1,13 +1,16 @@
 import type { App } from 'vue';
 
-import { bootServices } from '@/services';
-import { definePlugin } from '@/plugins';
+import { bootServices } from '@aerogel/core/services';
+import { definePlugin } from '@aerogel/core/plugins';
 
 import Errors from './Errors';
-import { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
+import type { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
 
 export * from './utils';
-export { Errors, ErrorSource, ErrorReport, ErrorReportLog };
+export { Errors };
+export { default as JobCancelledError } from './JobCancelledError';
+export { default as ServiceBootError } from './ServiceBootError';
+export type { ErrorSource, ErrorReport, ErrorReportLog };
 
 const services = { $errors: Errors };
 const frameworkHandler: ErrorHandler = (error) => {
@@ -35,12 +38,12 @@ export default definePlugin({
     },
 });
 
-declare module '@/bootstrap/options' {
+declare module '@aerogel/core/bootstrap/options' {
     export interface AerogelOptions {
         handleError?(error: ErrorSource): boolean;
     }
 }
 
-declare module '@/services' {
+declare module '@aerogel/core/services' {
     export interface Services extends ErrorsServices {}
 }

package/src/errors/utils.ts

@@ -1,5 +1,5 @@
 import { JSError, isObject, toString } from '@noeldemartin/utils';
-import { translateWithDefault } from '@/lang/utils';
+import { translateWithDefault } from '@aerogel/core/lang/utils';
 import type { ErrorSource } from './Errors.state';
 
 const handlers: ErrorHandler[] = [];

package/src/forms/{Form.test.ts → FormController.test.ts}

@@ -1,10 +1,11 @@
 import { describe, expect, expectTypeOf, it } from 'vitest';
 
-import { useForm } from './composition';
-import { FormFieldTypes } from '@/main';
-import { numberInput, requiredStringInput } from '@/forms/utils';
+import { useForm } from '@aerogel/core/forms/composition';
+import { numberInput, requiredStringInput } from '@aerogel/core/forms/utils';
 
-describe('Form', () => {
+import { FormFieldTypes } from './FormController';
+
+describe('FormController', () => {
 
     it('defines magic fields', () => {
         const form = useForm({

package/src/forms/{Form.ts → FormController.ts}

@@ -38,21 +38,21 @@ export type FormErrors<T> = {
 export type GetFormFieldValue<TType> = TType extends typeof FormFieldTypes.String
     ? string
     : TType extends typeof FormFieldTypes.Number
-    ? number
-    : TType extends typeof FormFieldTypes.Boolean
-    ? boolean
-    : TType extends typeof FormFieldTypes.Object
-    ? object
-    : TType extends typeof FormFieldTypes.Date
-    ? Date
-    : never;
+      ? number
+      : TType extends typeof FormFieldTypes.Boolean
+        ? boolean
+        : TType extends typeof FormFieldTypes.Object
+          ? object
+          : TType extends typeof FormFieldTypes.Date
+            ? Date
+            : never;
 
-const validForms: WeakMap<Form, ComputedRef<boolean>> = new WeakMap();
+const validForms: WeakMap<FormController, ComputedRef<boolean>> = new WeakMap();
 
 export type SubmitFormListener = () => unknown;
 export type FocusFormListener = (input: string) => unknown;
 
-export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinitions> extends MagicObject {
+export default class FormController<Fields extends FormFieldDefinitions = FormFieldDefinitions> extends MagicObject {
 
     public errors: DeepReadonly<UnwrapNestedRefs<FormErrors<Fields>>>;
 
@@ -113,11 +113,14 @@ 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(
+            (formErrors, [name, definition]) => {
+                formErrors[name] = this.getFieldErrors(name, definition);
 
-            return formErrors;
-        }, {} as Record<string, string[] | null>);
+                return formErrors;
+            },
+            {} as Record<string, string[] | null>,
+        );
 
         this.resetErrors(errors);
 
@@ -165,7 +168,7 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
         this._listeners['focus']?.forEach((listener) => listener(input));
     }
 
-    protected __get(property: string): unknown {
+    protected override __get(property: string): unknown {
         if (!(property in this._fields)) {
             return super.__get(property);
         }
@@ -173,7 +176,7 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
         return this.getFieldValue(property);
     }
 
-    protected __set(property: string, value: unknown): void {
+    protected override __set(property: string, value: unknown): void {
         if (!(property in this._fields)) {
             super.__set(property, value);
 
@@ -204,10 +207,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((initialData, [name, definition]) => {
+            initialData[name as keyof Fields] = (definition.default ?? null) as FormData<Fields>[keyof Fields];
 
-            return formData;
+            return initialData;
         }, {} as FormData<Fields>);
 
         return reactive(data) as FormData<Fields>;

package/src/forms/composition.ts

@@ -1,6 +1,6 @@
-import Form from '@/forms/Form';
-import type { FormData, FormFieldDefinitions } from '@/forms/Form';
+import FormController from '@aerogel/core/forms/FormController';
+import type { FormData, FormFieldDefinitions } from '@aerogel/core/forms/FormController';
 
-export function useForm<const T extends FormFieldDefinitions>(fields: T): Form<T> & FormData<T> {
-    return new Form(fields) as Form<T> & FormData<T>;
+export function useForm<const T extends FormFieldDefinitions>(fields: T): FormController<T> & FormData<T> {
+    return new FormController(fields) as FormController<T> & FormData<T>;
 }

package/src/forms/index.ts

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

package/src/forms/utils.ts

@@ -1,5 +1,5 @@
-import { FormFieldTypes } from './Form';
-import type { FormFieldDefinition } from './Form';
+import { FormFieldTypes } from './FormController';
+import type { FormFieldDefinition } from './FormController';
 
 export function booleanInput(
     defaultValue?: boolean,

package/src/index.css

@@ -0,0 +1,8 @@
+@source './';
+
+@theme {
+    --color-background: oklch(1 0 0);
+    --color-primary: oklch(0.205 0 0);
+    --color-danger: oklch(0.577 0.245 27.325);
+    --color-accent: oklch(0.97 0 0);
+}

package/src/jobs/Job.ts

@@ -1,7 +1,7 @@
 import { ListenersManager, PromisedValue, round, tap, toError } from '@noeldemartin/utils';
 import type { Listeners } from '@noeldemartin/utils';
 
-import JobCancelledError from '@/errors/JobCancelledError';
+import JobCancelledError from '@aerogel/core/errors/JobCancelledError';
 
 import type { JobListener } from './listeners';
 import type { JobStatus } from './status';
@@ -9,7 +9,7 @@ import type { JobStatus } from './status';
 export default abstract class Job<
     Listener extends JobListener = JobListener,
     Status extends JobStatus = JobStatus,
-    SerializedStatus extends JobStatus = JobStatus
+    SerializedStatus extends JobStatus = JobStatus,
 > {
 
     protected status: Status;

package/src/lang/DefaultLangProvider.ts

@@ -1,10 +1,13 @@
-import App from '@/services/App';
+import { isDevelopment } from '@noeldemartin/utils';
 
 import type { LangProvider } from './Lang';
 
 export default class DefaultLangProvider implements LangProvider {
 
-    constructor(private locale: string, private fallbackLocale: string) {}
+    constructor(
+        private locale: string,
+        private fallbackLocale: string,
+    ) {}
 
     public getLocale(): string {
         return this.locale;
@@ -28,14 +31,14 @@ export default class DefaultLangProvider implements LangProvider {
 
     public translate(key: string): string {
         // eslint-disable-next-line no-console
-        App.development && console.warn('Lang provider is missing');
+        isDevelopment() && console.warn('Lang provider is missing');
 
         return key;
     }
 
     public translateWithDefault(_: string, defaultMessage: string): string {
         // eslint-disable-next-line no-console
-        App.development && console.warn('Lang provider is missing');
+        isDevelopment() && console.warn('Lang provider is missing');
 
         return defaultMessage;
     }

package/src/lang/Lang.state.ts

@@ -1,4 +1,4 @@
-import { defineServiceState } from '@/services/Service';
+import { defineServiceState } from '@aerogel/core/services/Service';
 
 export default defineServiceState({
     name: 'lang',

package/src/lang/Lang.ts

@@ -52,7 +52,7 @@ export class LangService extends Service {
         return navigator.languages.find((locale) => locales.includes(locale)) ?? 'en';
     }
 
-    protected async boot(): Promise<void> {
+    protected override async boot(): Promise<void> {
         if (!globalThis.document) {
             return;
         }

package/src/lang/index.ts

@@ -1,10 +1,12 @@
-import { bootServices } from '@/services';
-import { definePlugin } from '@/plugins';
+import { bootServices } from '@aerogel/core/services';
+import { definePlugin } from '@aerogel/core/plugins';
 
-import Lang, { LangProvider } from './Lang';
+import Lang from './Lang';
+import type { LangProvider } from './Lang';
 import { translate, translateWithDefault } from './utils';
 
-export { Lang, LangProvider, translate, translateWithDefault };
+export { Lang, translate, translateWithDefault };
+export type { LangProvider };
 
 const services = { $lang: Lang };
 
@@ -19,11 +21,11 @@ export default definePlugin({
     },
 });
 
-declare module '@/services' {
+declare module '@aerogel/core/services' {
     export interface Services extends LangServices {}
 }
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
     interface ComponentCustomProperties {
         $td: typeof translateWithDefault;
     }

package/src/plugins/Plugin.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue';
 
-import type { AerogelOptions } from '@/bootstrap/options';
+import type { AerogelOptions } from '@aerogel/core/bootstrap/options';
 
 export interface Plugin {
     name?: string;

package/src/plugins/index.ts

@@ -1,6 +1,6 @@
 import type { GetClosureArgs } from '@noeldemartin/utils';
 
-import App from '@/services/App';
+import App from '@aerogel/core/services/App';
 
 import type { Plugin } from './Plugin';
 
@@ -13,13 +13,16 @@ export function definePlugin<T extends Plugin>(plugin: T): T {
 export async function installPlugins(plugins: Plugin[], ...args: GetClosureArgs<Plugin['install']>): Promise<void> {
     App.setState(
         'plugins',
-        plugins.reduce((pluginsMap, plugin) => {
-            if (plugin.name) {
-                pluginsMap[plugin.name] = plugin;
-            }
+        plugins.reduce(
+            (pluginsMap, plugin) => {
+                if (plugin.name) {
+                    pluginsMap[plugin.name] = plugin;
+                }
 
-            return pluginsMap;
-        }, {} as Record<string, Plugin>),
+                return pluginsMap;
+            },
+            {} as Record<string, Plugin>,
+        ),
     );
 
     await Promise.all(plugins.map((plugin) => plugin.install(...args)) ?? []);

package/src/services/App.state.ts

@@ -1,16 +1,17 @@
 import Aerogel from 'virtual:aerogel';
 
+import { getEnv } from '@noeldemartin/utils';
 import type { App } from 'vue';
 
-import { defineServiceState } from '@/services/Service';
-import type { Plugin } from '@/plugins/Plugin';
+import { defineServiceState } from '@aerogel/core/services/Service';
+import type { Plugin } from '@aerogel/core/plugins/Plugin';
 
 export default defineServiceState({
     name: 'app',
     initialState: {
         plugins: {} as Record<string, Plugin>,
         instance: null as App | null,
-        environment: Aerogel.environment,
+        environment: getEnv() ?? 'development',
         version: Aerogel.version,
         sourceUrl: Aerogel.sourceUrl,
     },

package/src/services/App.ts

@@ -2,9 +2,9 @@ import Aerogel from 'virtual:aerogel';
 
 import { PromisedValue, facade, forever, updateLocationQueryParameters } from '@noeldemartin/utils';
 
-import Events from '@/services/Events';
-import type { Plugin } from '@/plugins';
-import type { Services } from '@/services';
+import Events from '@aerogel/core/services/Events';
+import type { Plugin } from '@aerogel/core/plugins';
+import type { Services } from '@aerogel/core/services';
 
 import Service from './App.state';
 
@@ -45,7 +45,7 @@ export class AppService extends Service {
         return this.instance?.config.globalProperties[name] ?? null;
     }
 
-    protected async boot(): Promise<void> {
+    protected override async boot(): Promise<void> {
         Events.once('application-ready', () => this.ready.resolve());
         Events.once('application-mounted', () => this.mounted.resolve());
     }