@aerogel/core 0.1.1-next.3efa6858f5942a7048392e08e88f511c6c5ca343 → 0.1.1-next.6005e06a52b9294023bae608af05bf826d281a4d

package/src/components/ui/LoadingModal.vue

@@ -1,11 +1,10 @@
 <template>
     <Modal
         persistent
-        class="flex"
         wrapper-class="w-auto"
         :title="renderedTitle"
         :title-hidden
-        :class="{ 'flex-col-reverse': showProgress, 'items-center justify-center gap-2': !showProgress }"
+        :class="{ 'flex-col-reverse': showProgress, 'flex-row items-center justify-center gap-2': !showProgress }"
     >
         <ProgressBar
             v-if="showProgress"

package/src/components/ui/Modal.vue

@@ -95,7 +95,7 @@ const {
     persistent,
     closeHidden,
     fullscreen,
-    fullscreenMobile,
+    fullscreenOnMobile,
     ...props
 } = defineProps<
     ModalProps & {
@@ -122,11 +122,11 @@ const hasRenderedModals = computed(() => modals.value.some((modal) => renderedMo
 const contentProps = computed(() => (description ? {} : { 'aria-describedby': undefined }));
 const renderedContentClass = computed(() =>
     classes(
-        'overflow-auto px-4 pb-4',
+        'overflow-auto px-4 pb-4 flex flex-col flex-1',
         { 'pt-4': !title || titleHidden, 'max-h-[90vh]': !renderFullscreen.value },
         contentClass,
     ));
-const renderFullscreen = computed(() => fullscreen || (fullscreenMobile && UI.mobile));
+const renderFullscreen = computed(() => fullscreen || (fullscreenOnMobile && UI.mobile));
 const renderedWrapperClass = computed(() =>
     classes(
         'isolate fixed z-50 flex flex-col overflow-hidden bg-white text-left duration-300',

package/src/components/ui/ProgressBar.vue

@@ -1,6 +1,11 @@
 <template>
-    <div class="mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200">
+    <div class="relative mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200">
         <div :class="filledClasses" :style="`transform:translateX(-${(1 - renderedProgress) * 100}%)`" />
+        <div
+            v-if="overflowWidthPercentage"
+            :class="overflowClasses"
+            :style="{ width: `${overflowWidthPercentage}%` }"
+        />
         <span class="sr-only">
             {{
                 $td('ui.progress', '{progress}% complete', {
@@ -18,8 +23,9 @@ import { classes } from '@aerogel/core/utils/classes';
 import type Job from '@aerogel/core/jobs/Job';
 import type { Falsifiable } from '@aerogel/core/utils';
 
-const { filledClass, progress, job } = defineProps<{
+const { filledClass, overflowClass, progress, job } = defineProps<{
     filledClass?: string;
+    overflowClass?: string;
     progress?: number;
     job?: Falsifiable<Job>;
 }>();
@@ -28,6 +34,12 @@ let cleanup: Falsifiable<Function>;
 const jobProgress = ref(0);
 const filledClasses = computed(() =>
     classes('size-full transition-transform duration-500 rounded-r-full ease-linear bg-primary-600', filledClass));
+const overflowClasses = computed(() =>
+    classes(
+        'absolute inset-y-0 right-0 size-full rounded-r-full',
+        'bg-primary-900 transition-[width] duration-500 ease-linear',
+        overflowClass,
+    ));
 const renderedProgress = computed(() => {
     if (typeof progress === 'number') {
         return progress;
@@ -35,6 +47,8 @@ const renderedProgress = computed(() => {
 
     return jobProgress.value;
 });
+const overflowWidthPercentage = computed(() =>
+    renderedProgress.value > 1 ? 100 * ((renderedProgress.value - 1) / renderedProgress.value) : null);
 
 watch(
     () => job,

package/src/components/ui/SettingsModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <Modal :title="$td('settings.title', 'Settings')">
+    <Modal :title="$td('settings.title', 'Settings')" :fullscreen-on-mobile="$app.settingsFullscreenOnMobile">
         <component :is="setting.component" v-for="(setting, key) in settings" :key />
     </Modal>
 </template>

package/src/components/ui/index.ts

@@ -2,6 +2,11 @@ export { default as AdvancedOptions } from './AdvancedOptions.vue';
 export { default as AlertModal } from './AlertModal.vue';
 export { default as Button } from './Button.vue';
 export { default as Checkbox } from './Checkbox.vue';
+export { default as Combobox } from './Combobox.vue';
+export { default as ComboboxLabel } from './ComboboxLabel.vue';
+export { default as ComboboxOption } from './ComboboxOption.vue';
+export { default as ComboboxOptions } from './ComboboxOptions.vue';
+export { default as ComboboxTrigger } from './ComboboxTrigger.vue';
 export { default as ConfirmModal } from './ConfirmModal.vue';
 export { default as Details } from './Details.vue';
 export { default as DropdownMenu } from './DropdownMenu.vue';

package/src/components/vue/Provide.vue

@@ -0,0 +1,11 @@
+<template>
+    <slot />
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue';
+
+const { name, value } = defineProps<{ name: string; value: unknown }>();
+
+provide(name, value);
+</script>

package/src/components/vue/index.ts

@@ -0,0 +1 @@
+export { default as Provide } from './Provide.vue';

package/src/errors/Errors.ts

@@ -1,6 +1,7 @@
 import { JSError, facade, isDevelopment, isObject, isTesting, objectWithoutEmpty, toString } from '@noeldemartin/utils';
 import { watchEffect } from 'vue';
 import type Eruda from 'eruda';
+import type ErudaIndexedDB from 'eruda-indexeddb';
 
 import App from '@aerogel/core/services/App';
 import ServiceBootError from '@aerogel/core/errors/ServiceBootError';
@@ -16,6 +17,7 @@ export class ErrorsService extends Service {
     public forceReporting: boolean = false;
     private enabled: boolean = true;
     private eruda: typeof Eruda | null = null;
+    private erudaPlugins: [typeof ErudaIndexedDB] | null = null;
 
     public enable(): void {
         this.enabled = true;
@@ -131,8 +133,10 @@ export class ErrorsService extends Service {
             }
 
             this.eruda ??= (await import('eruda')).default;
+            this.erudaPlugins ??= [(await import('eruda-indexeddb')).default];
 
             this.eruda.init();
+            this.erudaPlugins.forEach((plugin) => this.eruda?.add(plugin));
         });
     }
 

package/src/index.css

@@ -20,6 +20,7 @@
     --color-primary-950: color-mix(in oklab, var(--color-primary-600) 50%, black);
 
     --color-background: oklch(1 0 0);
+    --color-primary-text: var(--color-gray-900);
     --color-links: var(--color-primary);
 
     --breakpoint-content: var(--breakpoint-md);

package/src/services/App.state.ts

@@ -24,6 +24,7 @@ export default defineServiceState({
         version: Aerogel.version,
         sourceUrl: Aerogel.sourceUrl,
         settings: [] as AppSetting[],
+        settingsFullscreenOnMobile: false,
     },
     computed: {
         development: (state) => state.environment === 'development',

package/src/services/App.ts

@@ -30,6 +30,10 @@ export class AppService extends Service {
         this.settings.push(markRaw(setting));
     }
 
+    public setSettingsFullscreenOnMobile(fullscreenOnMobile: boolean): void {
+        this.settingsFullscreenOnMobile = fullscreenOnMobile;
+    }
+
     public async whenReady<T>(callback: () => T): Promise<T> {
         const result = await this.ready.then(callback);
 

package/src/services/index.ts

@@ -56,6 +56,10 @@ export default definePlugin({
         app.use(getPiniaStore());
         options.settings?.forEach((setting) => App.addSetting(setting));
 
+        if (options.settingsFullscreenOnMobile !== undefined) {
+            App.setSettingsFullscreenOnMobile(options.settingsFullscreenOnMobile);
+        }
+
         await bootServices(app, services);
     },
 });
@@ -64,6 +68,7 @@ declare module '@aerogel/core/bootstrap/options' {
     export interface AerogelOptions {
         services?: Record<string, Service>;
         settings?: AppSetting[];
+        settingsFullscreenOnMobile?: boolean;
     }
 }