@aerogel/core 0.1.1-next.38e999a09609d7c9cfa836fe396028ab230f6c89 → 0.1.1-next.47ee6e5e3485291a8763a804016f87a051476893

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.1.1-next.38e999a09609d7c9cfa836fe396028ab230f6c89",
+    "version": "0.1.1-next.47ee6e5e3485291a8763a804016f87a051476893",
     "type": "module",
     "sideEffects": false,
     "exports": {

package/src/components/AppLayout.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex min-h-full flex-col text-base leading-tight font-normal text-gray-900 antialiased">
+    <div class="text-primary-text flex min-h-full flex-col text-base leading-tight font-normal antialiased">
         <slot v-if="$errors.hasStartupErrors" name="startup-crash">
             <component :is="$ui.requireComponent('startup-crash')" />
         </slot>

package/src/components/contracts/Modal.ts

@@ -6,7 +6,7 @@ export type ModalContentInstance = Nullable<InstanceType<typeof DialogContent>>;
 export interface ModalProps {
     persistent?: boolean;
     fullscreen?: boolean;
-    fullscreenMobile?: boolean;
+    fullscreenOnMobile?: boolean;
     title?: string;
     titleHidden?: boolean;
     description?: string;

package/src/components/ui/Details.vue

@@ -1,13 +1,13 @@
 <template>
     <details class="group">
-        <summary
-            class="-ml-2 flex w-[max-content] items-center rounded-lg py-2 pr-3 pl-1 hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700"
-        >
+        <summary :class="renderedSummaryClasses">
             <IconCheveronRight class="size-6 transition-transform group-open:rotate-90" />
-            <span>{{ label }}</span>
+            <slot name="label">
+                <span>{{ label ?? $td('ui.details', 'Details') }}</span>
+            </slot>
         </summary>
 
-        <div class="pt-2 pl-4">
+        <div :class="renderedContentClasses">
             <slot />
         </div>
     </details>
@@ -15,6 +15,19 @@
 
 <script setup lang="ts">
 import IconCheveronRight from '~icons/zondicons/cheveron-right';
+import { classes } from '@aerogel/core/utils';
+import { type HTMLAttributes, computed } from 'vue';
 
-defineProps<{ label: string }>();
+const {
+    label = undefined,
+    contentClass,
+    summaryClass,
+} = defineProps<{ label?: string; contentClass?: HTMLAttributes['class']; summaryClass?: HTMLAttributes['class'] }>();
+const renderedContentClasses = computed(() => classes('pt-2 pl-4', contentClass));
+const renderedSummaryClasses = computed(() =>
+    classes(
+        '-ml-2 flex w-[max-content] items-center rounded-lg py-2 pr-3 pl-1',
+        'hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700',
+        summaryClass,
+    ));
 </script>

package/src/components/ui/Modal.vue

@@ -95,7 +95,7 @@ const {
     persistent,
     closeHidden,
     fullscreen,
-    fullscreenMobile,
+    fullscreenOnMobile,
     ...props
 } = defineProps<
     ModalProps & {
@@ -126,7 +126,7 @@ const renderedContentClass = computed(() =>
         { '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/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/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;
     }
 }