@aerogel/core 0.0.0-next.7f6ed5a1f91688a86bf5ede2adc465e4fd6cfdea → 0.0.0-next.824cf5311c4335d119158f507dad094ed4f4f0b6

package/noeldemartin.config.js

@@ -1,2 +1,5 @@
 /** @type {import('@noeldemartin/scripts').Config} */
-module.exports = { vue: true };
+module.exports = {
+    vue: true,
+    icons: true,
+};

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aerogel/core",
     "description": "The Lightest Solid",
-    "version": "0.0.0-next.7f6ed5a1f91688a86bf5ede2adc465e4fd6cfdea",
+    "version": "0.0.0-next.824cf5311c4335d119158f507dad094ed4f4f0b6",
     "main": "dist/aerogel-core.cjs.js",
     "module": "dist/aerogel-core.esm.js",
     "types": "dist/aerogel-core.d.ts",
@@ -10,9 +10,11 @@
         "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",
         "lint": "noeldemartin-lint src",
         "publish-next": "noeldemartin-publish-next",
-        "test": "vitest --run"
+        "test": "vitest --run",
+        "test:ci": "vitest --run --reporter verbose"
     },
     "engines": {
         "node": ">=18.x"
@@ -33,17 +35,22 @@
     },
     "dependencies": {
         "@headlessui/vue": "^1.7.14",
-        "@noeldemartin/utils": "0.4.0-next.65c07a35cd02a0aa1ed9e742f72036354eba5fa8",
+        "@noeldemartin/utils": "0.5.1-next.49cc6c9b4a20930cbf922a949135981791acc5c3",
         "dompurify": "^3.0.3",
         "marked": "^5.0.4",
-        "soukai": "^0.5.1",
-        "vue": "^3.3.0",
-        "vue-i18n": "9.3.0-beta.19",
-        "vue-router": "^4.2.1"
+        "pinia": "^2.1.6",
+        "vue": "^3.3.0"
     },
     "devDependencies": {
+        "@aerogel/vite": "*",
+        "@histoire/plugin-vue": "^0.17.6",
         "@types/dompurify": "^3.0.2",
         "@types/marked": "^5.0.0",
-        "@vitejs/plugin-vue": "^4.2.3"
+        "tailwindcss": "^3.3.5"
+    },
+    "eslintConfig": {
+        "extends": [
+            "@noeldemartin/eslint-config-vue"
+        ]
     }
 }

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};

package/src/assets/histoire.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/bootstrap/bootstrap.test.ts

@@ -1,19 +1,17 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { createApp } from 'vue';
-import { createI18n } from 'vue-i18n';
-import { IndexedDBEngine, requireBootedModel, requireEngine } from 'soukai';
 import { mock } from '@noeldemartin/utils';
 import type { Component } from 'vue';
 
 import Events from '@/services/Events';
 import initialFocus from '@/directives/initial-focus';
-import User from '@/testing/stubs/models/User';
 
-import { bootstrapApplication } from './index';
+import { bootstrap } from './index';
 
 describe('Aerogel', () => {
 
     beforeEach(() => {
+        vi.stubGlobal('document', { getElementById: () => null });
         vi.mock('vue', async () => {
             const vue = (await vi.importActual('vue')) as Object;
 
@@ -29,65 +27,12 @@ describe('Aerogel', () => {
         });
     });
 
-    it('Initializes Soukai', async () => {
-        // Arrange
-        const rootComponent = mock<Component>();
-
-        // Act
-        await bootstrapApplication(rootComponent, {
-            models: import.meta.glob('@/testing/stubs/models/*', { eager: true }),
-        });
-
-        // Assert
-        expect(requireBootedModel('User')).toEqual(User);
-        expect(requireEngine()).toBeInstanceOf(IndexedDBEngine);
-    });
-
-    it('Initializes routes', async () => {
-        // Arrange
-        vi.mock('vue-router', () => ({
-            createRouter: vi.fn(() => ({ routerMock: true })),
-            createWebHistory: vi.fn(),
-        }));
-
-        const rootComponent = mock<Component>();
-
-        // Act
-        await bootstrapApplication(rootComponent, {
-            routes: [],
-        });
-
-        // Assert
-        expect(vi.mocked(createApp).mock.results[0]?.value.use).toHaveBeenCalledWith({ routerMock: true });
-    });
-
-    it('Initializes lang', async () => {
-        // Arrange
-        vi.mock('vue-i18n', () => ({ createI18n: vi.fn(() => ({ i18nMock: true })) }));
-
-        const rootComponent = mock<Component>();
-
-        // Act
-        await bootstrapApplication(rootComponent, {
-            langMessages: import.meta.glob('@/testing/stubs/lang/*'),
-        });
-
-        // Assert
-        const mockedCreateI18n = vi.mocked(createI18n);
-        const mockedCreateApp = vi.mocked(createApp);
-
-        expect(mockedCreateI18n).toHaveBeenCalled();
-        expect(mockedCreateI18n.mock.calls[0]?.[0].messages).key('en').to.exist;
-        expect(mockedCreateI18n.mock.calls[0]?.[0].messages?.['en']).key('foo').to.exist;
-        expect(mockedCreateApp.mock.results[0]?.value.use).toHaveBeenCalledWith({ i18nMock: true });
-    });
-
     it('Boots services', async () => {
         // Arrange
         const rootComponent = mock<Component>();
 
         // Act
-        await bootstrapApplication(rootComponent);
+        await bootstrap(rootComponent);
 
         // Assert
         const globals = vi.mocked(createApp).mock.results[0]?.value.config.globalProperties;
@@ -101,7 +46,7 @@ describe('Aerogel', () => {
         const rootComponent = mock<Component>();
 
         // Act
-        await bootstrapApplication(rootComponent);
+        await bootstrap(rootComponent);
 
         // Assert
         expect(vi.mocked(createApp).mock.results[0]?.value.directive).toHaveBeenCalledWith(

package/src/bootstrap/index.ts

@@ -1,36 +1,39 @@
-import { createApp, h } from 'vue';
-import type { Component } from 'vue';
+import { createApp } from 'vue';
+import type { App, 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';
-
-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();
-
-            this.ready = true;
-        },
-        render() {
-            if (!this.ready) {
-                return null;
-            }
-
-            return h(rootComponent);
-        },
-    });
-
-    await Promise.all(hooks.map((hook) => hook(app, options)));
+import { installPlugins } from '@/plugins';
+import type { AerogelOptions } from '@/bootstrap/options';
+
+export { AerogelOptions };
+
+export async function bootstrapApplication(app: App, options: AerogelOptions = {}): Promise<void> {
+    const plugins = [directives, errors, lang, services, ui, ...(options.plugins ?? [])];
+
+    await installPlugins(plugins, app, options);
+    await options.install?.(app);
+    await Events.emit('application-ready');
+}
+
+export async function bootstrap(rootComponent: Component, options: AerogelOptions = {}): Promise<void> {
+    const app = createApp(rootComponent);
+
+    await bootstrapApplication(app, options);
 
     app.mount('#app');
+    app._container?.classList.remove('loading');
+
+    await Events.emit('application-mounted');
+}
+
+declare module '@/services/Events' {
+    export interface EventsPayload {
+        'application-ready': void;
+        'application-mounted': void;
+    }
 }

package/src/bootstrap/options.ts

@@ -1 +1,8 @@
-export interface BootstrapOptions {}
+import type { App } from 'vue';
+
+import type { Plugin } from '@/plugins';
+
+export interface AerogelOptions {
+    plugins?: Plugin[];
+    install?(app: App): void | Promise<void>;
+}

package/src/components/AGAppLayout.vue

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

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,23 @@
 <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>
+    <div
+        id="aerogel-overlays-backdrop"
+        ref="$backdrop"
+        class="pointer-events-none fixed inset-0 z-50 bg-black/30 opacity-0"
+    />
+    <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-end space-y-4">
+            <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/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,41 @@
+<template>
+    <AGHeadlessInput
+        ref="$input"
+        :name="name"
+        class="flex"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <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 });
+defineEmits(['update:modelValue']);
+
+const $input = componentRef<IAGHeadlessInput>();
+</script>

package/src/components/forms/AGInput.vue

@@ -1,32 +1,38 @@
 <template>
     <AGHeadlessInput
         ref="$input"
-        as="div"
-        class="flex flex-col items-center"
-        :name="name"
+        class="relative flex flex-col items-center"
+        :class="className"
+        v-bind="props"
     >
+        <AGHeadlessInputLabel class="sr-only" />
         <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 { componentRef } from '@/utils/vue';
+import { useInputAttrs } from '@/utils/composition/forms';
+import { useInputProps } from '@/components/headless/forms/AGHeadlessInput';
 import type { IAGHeadlessInput } from '@/components/headless/forms/AGHeadlessInput';
 
 import AGHeadlessInput from '../headless/forms/AGHeadlessInput.vue';
-import AGHeadlessInputInput from '../headless/forms/AGHeadlessInputInput.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 props = defineProps(useInputProps());
 const $input = componentRef<IAGHeadlessInput>();
+const [attrs, className] = useInputAttrs();
 </script>

package/src/components/forms/AGSelect.story.vue

@@ -0,0 +1,46 @@
+<template>
+    <Story>
+        <div class="h-96">
+            <AGSelect v-model="bestMugiwara" :label="bestMugiwaraLabel" :options="bestMugiwaraOptions" />
+            <AGSelect
+                v-model="bestFood"
+                :label="bestFoodLabel"
+                :options="bestFoodOptions"
+                options-text="name"
+            />
+        </div>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import AGSelect from './AGSelect.vue';
+
+const bestMugiwara = ref(null);
+const bestFood = ref(null);
+const bestMugiwaraLabel = 'Who\'s the best Mugiwara?';
+const bestFoodLabel = 'What\'s the best food?';
+const bestMugiwaraOptions = [
+    'Monkey D. Luffy',
+    'Roronoa Zoro',
+    'Nami',
+    'Usopp',
+    'Sanji',
+    'Tony Tony Chopper',
+    'Nico Robin',
+    'Franky',
+    'Brook',
+    'Jinbe',
+];
+const bestFoodOptions = [
+    {
+        id: 'ramen',
+        name: 'Ramen',
+    },
+    {
+        id: 'pizza',
+        name: 'Pizza',
+    },
+];
+</script>

package/src/components/forms/AGSelect.vue

@@ -0,0 +1,60 @@
+<template>
+    <AGHeadlessSelect
+        v-bind="props"
+        ref="$select"
+        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"
+                text-class="block truncate"
+                :class="{
+                    'ring-1 ring-red-500': $select?.errors,
+                }"
+            >
+                <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" />
+                    </span>
+                </template>
+            </AGHeadlessSelectButton>
+            <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"
+            >
+                <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"
+                />
+            </AGHeadlessSelectOptions>
+        </div>
+        <AGHeadlessSelectError class="mt-2 text-sm text-red-600" />
+    </AGHeadlessSelect>
+</template>
+
+<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 AGHeadlessSelect from '../headless/forms/AGHeadlessSelect.vue';
+import AGHeadlessSelectButton from '../headless/forms/AGHeadlessSelectButton.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';
+
+defineEmits(useSelectEmits());
+
+const props = defineProps(useSelectProps());
+const $select = componentRef<IAGHeadlessSelect>();
+</script>

package/src/components/forms/index.ts

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