@aerogel/core 0.0.0-next.b18f4e0acd39431045c2f444c711303890143193 → 0.0.0-next.b3caf219a503ce9b8c65ef1463132c9507f56c0a

package/package.json

@@ -1,52 +1,42 @@
 {
     "name": "@aerogel/core",
-    "description": "The Lightest Solid",
-    "version": "0.0.0-next.b18f4e0acd39431045c2f444c711303890143193",
-    "main": "dist/aerogel-core.cjs.js",
-    "module": "dist/aerogel-core.esm.js",
-    "types": "dist/aerogel-core.d.ts",
+    "version": "0.0.0-next.b3caf219a503ce9b8c65ef1463132c9507f56c0a",
+    "type": "module",
     "sideEffects": false,
+    "exports": {
+        "types": "./dist/aerogel-core.d.ts",
+        "style": "./src/index.css",
+        "default": "./dist/aerogel-core.js"
+    },
+    "files": [
+        "src",
+        "dist"
+    ],
+    "license": "MIT",
+    "author": "Noel De Martin",
+    "repository": "github:NoelDeMartin/aerogel",
     "scripts": {
-        "build": "rm dist -rf && npm run build:js && npm run build:types",
-        "build:js": "noeldemartin-build-javascript",
-        "build:types": "noeldemartin-build-types",
-        "histoire": "histoire dev",
+        "build": "vite build && ./scripts/fix-types.sh",
         "lint": "noeldemartin-lint src",
-        "publish-next": "noeldemartin-publish-next",
         "test": "vitest --run",
-        "test:ci": "vitest --run --reporter verbose"
-    },
-    "engines": {
-        "node": ">=18.x"
+        "test:ci": "vitest --run --reporter verbose",
+        "verify": "noeldemartin-verify"
     },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/NoelDeMartin/aerogeljs.git"
-    },
-    "keywords": [
-        "javascript",
-        "framework",
-        "solid"
-    ],
-    "author": "Noel De Martin",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/NoelDeMartin/aerogeljs/issues"
+    "peerDependencies": {
+        "vue": "^3.5.0"
     },
     "dependencies": {
-        "@headlessui/vue": "^1.7.14",
-        "@noeldemartin/utils": "0.5.1-next.6ecd7cf01a5bad8fbc0dc06312906c9700e79510",
-        "dompurify": "^3.0.3",
-        "marked": "^5.0.4",
+        "@noeldemartin/utils": "0.7.0-next.31cf84b4b57092d146528f27579439783aca71bb",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "dompurify": "^3.2.4",
+        "marked": "^15.0.7",
         "pinia": "^2.1.6",
-        "vue": "^3.3.0"
+        "reka-ui": "^2.2.0",
+        "tailwind-merge": "^3.1.0"
     },
     "devDependencies": {
-        "@aerogel/vite": "*",
-        "@histoire/plugin-vue": "^0.17.6",
-        "@types/dompurify": "^3.0.2",
-        "@types/marked": "^5.0.0",
-        "tailwindcss": "^3.3.5"
+        "@aerogel/vite": "*"
     },
     "eslintConfig": {
         "extends": [

package/src/bootstrap/bootstrap.test.ts

@@ -1,17 +1,16 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { createApp } from 'vue';
-import { mock } from '@noeldemartin/utils';
+import { mock } from '@noeldemartin/testing';
 import type { Component } from 'vue';
 
-import Events from '@/services/Events';
-import initialFocus from '@/directives/initial-focus';
+import Events from '@aerogel/core/services/Events';
+import measure from '@aerogel/core/directives/measure';
 
 import { bootstrap } from './index';
 
 describe('Aerogel', () => {
 
     beforeEach(() => {
-        vi.stubGlobal('document', { getElementById: () => null });
         vi.mock('vue', async () => {
             const vue = (await vi.importActual('vue')) as Object;
 
@@ -49,10 +48,7 @@ describe('Aerogel', () => {
         await bootstrap(rootComponent);
 
         // Assert
-        expect(vi.mocked(createApp).mock.results[0]?.value.directive).toHaveBeenCalledWith(
-            'initial-focus',
-            initialFocus,
-        );
+        expect(vi.mocked(createApp).mock.results[0]?.value.directive).toHaveBeenCalledWith('measure', measure);
     });
 
 });

package/src/bootstrap/index.ts

@@ -1,39 +1,49 @@
 import { createApp } from 'vue';
-import type { App, Component } from 'vue';
+import { isDevelopment } from '@noeldemartin/utils';
+import type { App as AppInstance, Component } from 'vue';
 
-import directives from '@/directives';
-import errors from '@/errors';
-import Events from '@/services/Events';
-import lang from '@/lang';
-import services from '@/services';
-import ui from '@/ui';
-import { installPlugins } from '@/plugins';
-import type { AerogelOptions } from '@/bootstrap/options';
+import App from '@aerogel/core/services/App';
+import directives from '@aerogel/core/directives';
+import errors from '@aerogel/core/errors';
+import Events from '@aerogel/core/services/Events';
+import lang from '@aerogel/core/lang';
+import services from '@aerogel/core/services';
+import testing from '@aerogel/core/testing';
+import ui from '@aerogel/core/ui';
+import { installPlugins } from '@aerogel/core/plugins';
+import type { AerogelOptions } from '@aerogel/core/bootstrap/options';
 
-export { AerogelOptions };
+export type { AerogelOptions };
 
-export async function bootstrapApplication(app: App, options: AerogelOptions = {}): Promise<void> {
-    const plugins = [directives, errors, lang, services, ui, ...(options.plugins ?? [])];
+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);
-
-    Events.emit('application-ready');
+    await Events.emit('application-ready');
 }
 
 export async function bootstrap(rootComponent: Component, options: AerogelOptions = {}): Promise<void> {
     const app = createApp(rootComponent);
 
+    if (isDevelopment()) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (window as any).$aerogel = app;
+    }
+
     await bootstrapApplication(app, options);
 
     app.mount('#app');
     app._container?.classList.remove('loading');
 
-    Events.emit('application-mounted');
+    await Events.emit('application-mounted');
 }
 
-declare module '@/services/Events' {
+declare module '@aerogel/core/services/Events' {
     export interface EventsPayload {
+        'application-ready': void;
         'application-mounted': void;
     }
 }

package/src/bootstrap/options.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue';
 
-import type { Plugin } from '@/plugins';
+import type { Plugin } from '@aerogel/core/plugins';
 
 export interface AerogelOptions {
     plugins?: Plugin[];

package/src/components/{AGAppLayout.vue → AppLayout.vue}

@@ -1,16 +1,16 @@
 <template>
-    <div class="flex min-h-full flex-col text-base font-normal leading-tight text-gray-900 antialiased">
+    <div class="flex min-h-full flex-col text-base leading-tight font-normal text-gray-900 antialiased">
         <slot v-if="$errors.hasStartupErrors" name="startup-crash">
             <component :is="$ui.requireComponent(UIComponents.StartupCrash)" />
         </slot>
         <slot v-else />
 
-        <AGAppOverlays />
+        <AppOverlays />
     </div>
 </template>
 
 <script setup lang="ts">
-import { UIComponents } from '@/ui/UI';
+import { UIComponents } from '@aerogel/core/ui/UI';
 
-import AGAppOverlays from './AGAppOverlays.vue';
+import AppOverlays from './AppOverlays.vue';
 </script>

package/src/components/{AGAppModals.vue → AppModals.vue}

@@ -1,15 +1,14 @@
 <template>
     <aside v-if="modal">
-        <AGModalContext :child-index="1" :modal="modal" />
+        <ModalContext :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';
+import ModalContext from '@aerogel/core/components/ui/ModalContext.vue';
+import UI from '@aerogel/core/ui/UI';
 
 const modal = computed(() => UI.modals[0] ?? null);
 </script>

package/src/components/{AGAppOverlays.vue → AppOverlays.vue}

@@ -4,17 +4,17 @@
         ref="$backdrop"
         class="pointer-events-none fixed inset-0 z-50 bg-black/30 opacity-0"
     />
-    <AGAppModals />
-    <AGAppSnackbars />
+    <AppModals />
+    <AppSnackbars />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 
-import { useEvent } from '@/utils/composition/events';
+import { useEvent } from '@aerogel/core/utils/composition/events';
 
-import AGAppModals from './AGAppModals.vue';
-import AGAppSnackbars from './AGAppSnackbars.vue';
+import AppModals from './AppModals.vue';
+import AppSnackbars from './AppSnackbars.vue';
 
 const $backdrop = ref<HTMLElement | null>(null);
 const backdropHidden = ref(true);

package/src/components/{AGAppSnackbars.vue → AppSnackbars.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 '@aerogel/core/components/utils';
+
+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/contracts/AlertModal.ts

@@ -0,0 +1,4 @@
+export interface AlertModalProps {
+    title?: string;
+    message: string;
+}

package/src/components/contracts/Button.ts

@@ -0,0 +1,15 @@
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+
+export type ButtonVariant = 'default' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'link';
+export type ButtonSize = 'default' | 'small' | 'large' | 'icon';
+export interface ButtonProps extends PrimitiveProps {
+    class?: HTMLAttributes['class'];
+    href?: string;
+    route?: string;
+    routeParams?: object;
+    routeQuery?: object;
+    size?: ButtonSize;
+    submit?: boolean;
+    variant?: ButtonVariant;
+}

package/src/components/contracts/ConfirmModal.ts

@@ -0,0 +1,41 @@
+import { computed } from 'vue';
+
+import { translateWithDefault } from '@aerogel/core/lang';
+import { FormFieldTypes, useForm } from '@aerogel/core/forms';
+import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
+import type { FormFieldDefinition } from '@aerogel/core/forms';
+
+export type ConfirmModalCheckboxes = Record<string, { label: string; default?: boolean; required?: boolean }>;
+
+export interface ConfirmModalProps {
+    title?: string;
+    message: string;
+    acceptText?: string;
+    acceptVariant?: ButtonVariant;
+    cancelText?: string;
+    cancelVariant?: ButtonVariant;
+    checkboxes?: ConfirmModalCheckboxes;
+    actions?: Record<string, () => unknown>;
+    required?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useConfirmModal(props: ConfirmModalProps) {
+    const form = useForm(
+        Object.entries(props.checkboxes ?? {}).reduce(
+            (values, [name, checkbox]) => ({
+                [name]: {
+                    type: FormFieldTypes.Boolean,
+                    default: checkbox.default,
+                    required: checkbox.required ? 'required' : undefined,
+                },
+                ...values,
+            }),
+            {} as Record<string, FormFieldDefinition>,
+        ),
+    );
+    const renderedAcceptText = computed(() => props.acceptText ?? translateWithDefault('ui.accept', 'Ok'));
+    const renderedCancelText = computed(() => props.cancelText ?? translateWithDefault('ui.cancel', 'Cancel'));
+
+    return { form, renderedAcceptText, renderedCancelText };
+}

package/src/components/contracts/ErrorReportModal.ts

@@ -0,0 +1,29 @@
+import { computed, ref } from 'vue';
+
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { ErrorReport } from '@aerogel/core/errors';
+
+export interface ErrorReportModalProps {
+    reports: ErrorReport[];
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useErrorReportModal(props: ErrorReportModalProps) {
+    const activeReportIndex = ref(0);
+    const report = computed(() => props.reports[activeReportIndex.value] as ErrorReport);
+    const details = computed(
+        () =>
+            report.value.details?.trim() ||
+            translateWithDefault('errors.detailsEmpty', 'This error is missing a stacktrace.'),
+    );
+    const previousReportText = translateWithDefault('errors.previousReport', 'Show previous report');
+    const nextReportText = translateWithDefault('errors.nextReport', 'Show next report');
+
+    return {
+        activeReportIndex,
+        details,
+        nextReportText,
+        previousReportText,
+        report,
+    };
+}

package/src/components/contracts/Input.ts

@@ -0,0 +1,26 @@
+import type { Nullable } from '@noeldemartin/utils';
+
+import type { FormFieldValue } from '@aerogel/core/forms';
+import type { ComputedRef, DeepReadonly, Ref } from 'vue';
+
+export interface InputProps {
+    name?: string;
+    label?: string;
+    description?: string;
+    modelValue?: FormFieldValue;
+}
+
+export type InputEmits = {
+    (event: 'update:modelValue', value: Nullable<FormFieldValue>): void;
+};
+
+export interface InputExpose {
+    id: string;
+    name: ComputedRef<Nullable<string>>;
+    label: ComputedRef<Nullable<string>>;
+    description: ComputedRef<Nullable<string | boolean>>;
+    value: ComputedRef<Nullable<FormFieldValue>>;
+    required: ComputedRef<Nullable<boolean>>;
+    errors: DeepReadonly<Ref<Nullable<string[]>>>;
+    update(value: Nullable<FormFieldValue>): void;
+}

package/src/components/contracts/LoadingModal.ts

@@ -0,0 +1,18 @@
+import type { Job } from '@aerogel/core/jobs';
+import { translateWithDefault } from '@aerogel/core/lang';
+import { computed } from 'vue';
+
+export interface LoadingModalProps {
+    title?: string;
+    message?: string;
+    progress?: number;
+    job?: Job;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useLoadingModal(props: LoadingModalProps) {
+    const renderedMessage = computed(() => props.message ?? translateWithDefault('ui.loading', 'Loading...'));
+    const showProgress = computed(() => typeof props.progress === 'number' || !!props.job);
+
+    return { renderedMessage, showProgress };
+}

package/src/components/contracts/Modal.ts

@@ -0,0 +1,9 @@
+export interface ModalProps {
+    persistent?: boolean;
+    title?: string;
+    description?: string;
+}
+
+export interface ModalSlots {
+    default(props: { close(result?: unknown): Promise<void> }): unknown;
+}

package/src/components/contracts/PromptModal.ts

@@ -0,0 +1,28 @@
+import { computed } from 'vue';
+
+import { requiredStringInput, useForm } from '@aerogel/core/forms';
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
+
+export interface PromptModalProps {
+    title?: string;
+    message: string;
+    label?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    acceptText?: string;
+    acceptVariant?: ButtonVariant;
+    cancelText?: string;
+    cancelVariant?: ButtonVariant;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function usePromptModal(props: PromptModalProps) {
+    const form = useForm({
+        draft: requiredStringInput(props.defaultValue ?? ''),
+    });
+    const renderedAcceptText = computed(() => props.acceptText ?? translateWithDefault('ui.accept', 'Ok'));
+    const renderedCancelText = computed(() => props.cancelText ?? translateWithDefault('ui.cancel', 'Cancel'));
+
+    return { form, renderedAcceptText, renderedCancelText };
+}

package/src/components/contracts/index.ts

@@ -0,0 +1,7 @@
+export * from './AlertModal';
+export * from './Button';
+export * from './ConfirmModal';
+export * from './LoadingModal';
+export * from './Modal';
+export * from './PromptModal';
+export * from './shared';

package/src/components/contracts/shared.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'vue';
+
+export interface HasElement {
+    $el: Readonly<Ref<HTMLElement | undefined>>;
+}
+
+export interface __SetsElement {
+    __setElement(element?: HTMLElement): void;
+}

package/src/components/forms/AGSelect.vue

@@ -5,10 +5,9 @@
         as="div"
         @update:model-value="$emit('update:modelValue', $event)"
     >
-        <AGHeadlessSelectLabel class="block text-sm font-medium leading-6 text-gray-900" />
         <div class="relative" :class="{ 'mt-2': $select?.label }">
-            <AGHeadlessSelectButton
-                class="relative w-full cursor-default bg-white py-1.5 pl-3 pr-10 text-left text-gray-900 ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-600"
+            <AGHeadlessSelectTrigger
+                class="relative w-full cursor-default bg-white py-1.5 pr-10 pl-3 text-left text-gray-900 ring-1 ring-gray-300 ring-inset focus:ring-2 focus:ring-indigo-600 focus:outline-hidden"
                 text-class="block truncate"
                 :class="{
                     'ring-1 ring-red-500': $select?.errors,
@@ -16,22 +15,18 @@
             >
                 <template #icon>
                     <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                        <IconCheveronDown class="h-5 w-5 text-gray-400" />
+                        <IconCheveronDown class="size-5 text-gray-400" />
                     </span>
                 </template>
-            </AGHeadlessSelectButton>
+            </AGHeadlessSelectTrigger>
             <AGHeadlessSelectOptions
-                class="absolute z-10 mt-1 max-h-60 w-full overflow-auto border bg-white py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none"
+                class="absolute z-10 mt-1 max-h-60 w-full overflow-auto border border-gray-300 bg-white py-1 text-base ring-1 ring-black/5 focus:outline-hidden"
             >
                 <AGHeadlessSelectOption
                     v-for="(option, index) in $select?.options ?? []"
                     :key="index"
                     :value="option"
-                    class="relative block cursor-default select-none truncate py-2 pl-3 pr-9"
-                    selected-class="font-semibold"
-                    unselected-class="font-normal"
-                    active-class="bg-indigo-600 text-white"
-                    inactive-class="text-gray-900"
+                    class="relative block cursor-default truncate py-2 pr-9 pl-3 text-gray-900 select-none data-[highlighted]:bg-indigo-600 data-[highlighted]:text-white data-[state=checked]:font-semibold data-[state=unchecked]:font-normal"
                 />
             </AGHeadlessSelectOptions>
         </div>
@@ -42,16 +37,15 @@
 <script setup lang="ts">
 import IconCheveronDown from '~icons/zondicons/cheveron-down';
 
-import { componentRef } from '@/utils/vue';
-import { useSelectEmits, useSelectProps } from '@/components/headless/forms/AGHeadlessSelect';
-import type { IAGHeadlessSelect } from '@/components/headless/forms/AGHeadlessSelect';
+import { componentRef } from '@aerogel/core/utils/vue';
+import { useSelectEmits, useSelectProps } from '@aerogel/core/components/headless/forms/AGHeadlessSelect';
+import type { IAGHeadlessSelect } from '@aerogel/core/components/headless/forms/AGHeadlessSelect';
 
 import AGHeadlessSelect from '../headless/forms/AGHeadlessSelect.vue';
-import AGHeadlessSelectButton from '../headless/forms/AGHeadlessSelectButton.vue';
+import AGHeadlessSelectTrigger from '../headless/forms/AGHeadlessSelectTrigger.vue';
 import AGHeadlessSelectError from '../headless/forms/AGHeadlessSelectError.vue';
-import AGHeadlessSelectLabel from '../headless/forms/AGHeadlessSelectLabel.vue';
 import AGHeadlessSelectOption from '../headless/forms/AGHeadlessSelectOption.vue';
-import AGHeadlessSelectOptions from '../headless/forms/AGHeadlessSelectOptions';
+import AGHeadlessSelectOptions from '../headless/forms/AGHeadlessSelectOptions.vue';
 
 defineEmits(useSelectEmits());
 

package/src/components/forms/index.ts

@@ -1,5 +1 @@
-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';
 export { default as AGSelect } from './AGSelect.vue';

package/src/components/headless/HeadlessButton.vue

@@ -0,0 +1,45 @@
+<template>
+    <Primitive :class="classes" :as-child="asChild" v-bind="props">
+        <slot />
+    </Primitive>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Primitive } from 'reka-ui';
+import { objectWithoutEmpty } from '@noeldemartin/utils';
+
+import type { ButtonProps } from '@aerogel/core/components/contracts/Button';
+
+const { as, href, route, routeParams, routeQuery, submit, class: classes } = defineProps<ButtonProps>();
+
+const props = computed(() => {
+    if (as) {
+        return { as };
+    }
+
+    if (route) {
+        return {
+            as: 'router-link',
+            to: objectWithoutEmpty({
+                name: route,
+                params: routeParams,
+                query: routeQuery,
+            }),
+        };
+    }
+
+    if (href) {
+        return {
+            as: 'a',
+            target: '_blank',
+            href,
+        };
+    }
+
+    return {
+        as: 'button',
+        type: submit ? 'submit' : 'button',
+    };
+});
+</script>