@aerogel/core 0.1.1-next.1d7c8c18816e65c5c2c583364135435a9eb414fa → 0.1.1-next.3efa6858f5942a7048392e08e88f511c6c5ca343

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.1.1-next.1d7c8c18816e65c5c2c583364135435a9eb414fa",
+    "version": "0.1.1-next.3efa6858f5942a7048392e08e88f511c6c5ca343",
     "type": "module",
     "sideEffects": false,
     "exports": {

package/src/components/contracts/Modal.ts

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

package/src/components/headless/HeadlessInputInput.vue

@@ -19,6 +19,7 @@ import { computed, inject, useTemplateRef, watchEffect } from 'vue';
 
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
 import { onFormFocus } from '@aerogel/core/utils/composition/forms';
+import { LOCAL_TIMEZONE_OFFSET } from '@aerogel/core/utils';
 import type FormController from '@aerogel/core/forms/FormController';
 import type { FormFieldValue } from '@aerogel/core/forms/FormController';
 import type { InputExpose } from '@aerogel/core/components/contracts/Input';
@@ -63,7 +64,9 @@ function getValue(): FormFieldValue | null {
         case 'checkbox':
             return $input.value.checked;
         case 'date':
-            return $input.value.valueAsDate;
+        case 'time':
+        case 'datetime-local':
+            return new Date(Math.round($input.value.valueAsNumber / 60000) * 60000 + LOCAL_TIMEZONE_OFFSET);
         case 'number':
             return $input.value.valueAsNumber;
         default:
@@ -77,8 +80,11 @@ watchEffect(() => {
         return;
     }
 
-    if (renderedType.value === 'date' && value.value instanceof Date) {
-        $input.value.valueAsDate = value.value;
+    if (['date', 'time', 'datetime-local'].includes(renderedType.value) && value.value instanceof Date) {
+        const roundedValue = Math.round(value.value.getTime() / 60000) * 60000;
+
+        $input.value.valueAsNumber = roundedValue - LOCAL_TIMEZONE_OFFSET;
+        input.update(new Date(roundedValue));
 
         return;
     }

package/src/components/ui/AdvancedOptions.vue

@@ -1,18 +1,9 @@
 <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"
-        >
-            <IconCheveronRight class="size-6 transition-transform group-open:rotate-90" />
-            <span>{{ $td('ui.advancedOptions', 'Advanced options') }}</span>
-        </summary>
-
-        <div class="pt-2 pl-4">
-            <slot />
-        </div>
-    </details>
+    <Details :label="$td('ui.advancedOptions', 'Advanced options')">
+        <slot />
+    </Details>
 </template>
 
 <script setup lang="ts">
-import IconCheveronRight from '~icons/zondicons/cheveron-right';
+import Details from './Details.vue';
 </script>

package/src/components/ui/Details.vue

@@ -0,0 +1,20 @@
+<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"
+        >
+            <IconCheveronRight class="size-6 transition-transform group-open:rotate-90" />
+            <span>{{ label }}</span>
+        </summary>
+
+        <div class="pt-2 pl-4">
+            <slot />
+        </div>
+    </details>
+</template>
+
+<script setup lang="ts">
+import IconCheveronRight from '~icons/zondicons/cheveron-right';
+
+defineProps<{ label: string }>();
+</script>

package/src/components/ui/Modal.vue

@@ -12,10 +12,15 @@
                 'animate-[fade-in_var(--tw-duration)_ease-in-out]': !hasRenderedModals,
                 'bg-black/30': firstVisibleModal?.id === id || (!firstVisibleModal && modals[0]?.id === id),
                 'opacity-0': !firstVisibleModal,
+                hidden: renderFullscreen,
             }"
         />
         <HeadlessModalContent v-bind="contentProps" :class="renderedWrapperClass">
-            <div v-if="!persistent && !closeHidden" class="absolute top-0 right-0 hidden pt-3.5 pr-2.5 sm:block">
+            <div
+                v-if="!persistent && !closeHidden"
+                class="absolute top-0 right-0 pt-3.5 pr-2.5"
+                :class="{ 'hidden sm:block': !renderFullscreen }"
+            >
                 <button
                     type="button"
                     class="clickable z-10 rounded-full p-2.5 text-gray-400 hover:text-gray-500"
@@ -67,6 +72,7 @@ import HeadlessModalContent from '@aerogel/core/components/headless/HeadlessModa
 import HeadlessModalDescription from '@aerogel/core/components/headless/HeadlessModalDescription.vue';
 import HeadlessModalOverlay from '@aerogel/core/components/headless/HeadlessModalOverlay.vue';
 import HeadlessModalTitle from '@aerogel/core/components/headless/HeadlessModalTitle.vue';
+import UI from '@aerogel/core/ui/UI';
 import { classes } from '@aerogel/core/utils/classes';
 import { reactiveSet } from '@aerogel/core/utils';
 import { injectModal, modals, useModal } from '@aerogel/core/ui/modals';
@@ -88,6 +94,8 @@ const {
     description,
     persistent,
     closeHidden,
+    fullscreen,
+    fullscreenMobile,
     ...props
 } = defineProps<
     ModalProps & {
@@ -113,18 +121,29 @@ const firstVisibleModal = computed(() => modals.value.find((modal) => modal.visi
 const hasRenderedModals = computed(() => modals.value.some((modal) => renderedModals.has(modal)));
 const contentProps = computed(() => (description ? {} : { 'aria-describedby': undefined }));
 const renderedContentClass = computed(() =>
-    classes('max-h-[90vh] overflow-auto px-4 pb-4', { 'pt-4': !title || titleHidden }, contentClass));
+    classes(
+        'overflow-auto px-4 pb-4',
+        { 'pt-4': !title || titleHidden, 'max-h-[90vh]': !renderFullscreen.value },
+        contentClass,
+    ));
+const renderFullscreen = computed(() => fullscreen || (fullscreenMobile && UI.mobile));
 const renderedWrapperClass = computed(() =>
     classes(
-        'isolate fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2',
-        'overflow-hidden rounded-lg bg-white text-left shadow-xl sm:max-w-lg',
-        renderedModals.has(modal.value) ||
-            'animate-[fade-in_var(--tw-duration)_ease-in-out,grow_var(--tw-duration)_ease-in-out]',
-        'transition-[scale,opacity] will-change-[scale,opacity] duration-300',
-        {
-            'scale-50 opacity-0': !inForeground.value,
-            'scale-100 opacity-100': inForeground.value,
-        },
+        'isolate fixed z-50 flex flex-col overflow-hidden bg-white text-left duration-300',
+        renderFullscreen.value
+            ? [
+                'inset-0 transition-[transform,translate] will-change-[transform,translate]',
+                renderedModals.has(modal.value) || 'animate-[slide-in_var(--tw-duration)_ease-in-out]',
+                inForeground.value ? 'translate-y-0' : 'translate-y-full',
+            ]
+            : [
+                'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full',
+                'max-w-[calc(100%-2rem)] rounded-lg shadow-xl sm:max-w-lg',
+                'transition-[scale,opacity] will-change-[scale,opacity]',
+                renderedModals.has(modal.value) ||
+                      'animate-[fade-in_var(--tw-duration)_ease-in-out,grow_var(--tw-duration)_ease-in-out]',
+                inForeground.value ? 'scale-100 opacity-100' : 'scale-50 opacity-0',
+            ],
         wrapperClass,
     ));
 

package/src/components/ui/index.ts

@@ -3,6 +3,7 @@ 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 Details } from './Details.vue';
 export { default as DropdownMenu } from './DropdownMenu.vue';
 export { default as DropdownMenuOption } from './DropdownMenuOption.vue';
 export { default as DropdownMenuOptions } from './DropdownMenuOptions.vue';

package/src/index.css

@@ -66,6 +66,15 @@ button[data-markdown-action] {
     }
 }
 
+@keyframes slide-in {
+    0% {
+        transform: translateY(100%);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
 @keyframes grow {
     0% {
         scale: 0;

package/src/utils/index.ts

@@ -7,5 +7,6 @@ export * from './composition/persistent';
 export * from './composition/reactiveSet';
 export * from './composition/state';
 export * from './markdown';
+export * from './time';
 export * from './types';
 export * from './vue';

package/src/utils/time.ts

@@ -0,0 +1,2 @@
+export const MINUTE_MILLISECONDS = 60000;
+export const LOCAL_TIMEZONE_OFFSET = -new Date().getTimezoneOffset() * -MINUTE_MILLISECONDS;