@aerogel/core 0.1.1 → 0.1.2-next.0532ffc3845be5e86d770e8e823f5216ef34dfbf

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.1.1",
+    "version": "0.1.2-next.0532ffc3845be5e86d770e8e823f5216ef34dfbf",
     "type": "module",
     "sideEffects": false,
     "exports": {
@@ -29,11 +29,13 @@
         "vue": "^3.5.0"
     },
     "dependencies": {
-        "@noeldemartin/utils": "^0.7.1",
+        "@noeldemartin/utils": "0.7.3",
+        "@noeldemartin/vue-modals": "0.1.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dompurify": "^3.2.4",
         "eruda": "^3.4.1",
+        "eruda-indexeddb": "^0.1.1",
         "marked": "^15.0.7",
         "pinia": "^2.1.6",
         "reka-ui": "^2.2.0",

package/src/bootstrap/index.ts

@@ -10,13 +10,14 @@ 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 forms from '@aerogel/core/forms';
 import { installPlugins } from '@aerogel/core/plugins';
 import type { AerogelOptions } from '@aerogel/core/bootstrap/options';
 
 export type { AerogelOptions };
 
 export async function bootstrapApplication(app: AppInstance, options: AerogelOptions = {}): Promise<void> {
-    const plugins = [testing, directives, errors, lang, services, ui, ...(options.plugins ?? [])];
+    const plugins = [testing, directives, errors, lang, services, ui, forms, ...(options.plugins ?? [])];
 
     App.instance = app;
 

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/AppOverlays.vue

@@ -1,9 +1,10 @@
 <template>
-    <AppModals />
+    <ModalsPortal nested />
     <AppToasts />
 </template>
 
 <script setup lang="ts">
-import AppModals from './AppModals.vue';
+import { ModalsPortal } from '@aerogel/core/ui/modals';
+
 import AppToasts from './AppToasts.vue';
 </script>

package/src/components/contracts/AlertModal.ts

@@ -8,7 +8,7 @@ export interface AlertModalProps {
     message: string;
 }
 
-export interface AlertModalExpose extends ModalExpose<void> {}
+export interface AlertModalExpose extends ModalExpose {}
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function useAlertModal(props: AlertModalProps) {

package/src/components/contracts/Button.ts

@@ -1,7 +1,7 @@
 import type { PrimitiveProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 
-export type ButtonVariant = 'default' | 'secondary' | 'danger' | 'ghost' | 'outline' | 'link';
+export type ButtonVariant = 'default' | 'secondary' | 'danger' | 'warning' | 'ghost' | 'outline' | 'link';
 export type ButtonSize = 'default' | 'small' | 'large' | 'icon';
 export interface ButtonProps extends PrimitiveProps {
     class?: HTMLAttributes['class'];

package/src/components/contracts/Combobox.ts

@@ -0,0 +1,5 @@
+export type ComboboxContext = {
+    input: string;
+    preventChange: boolean;
+    $group: HTMLDivElement | null;
+};

package/src/components/contracts/ConfirmModal.ts

@@ -4,10 +4,11 @@ import { translateWithDefault } from '@aerogel/core/lang';
 import { useForm } from '@aerogel/core/utils/composition/forms';
 import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
 import type { FormFieldDefinition } from '@aerogel/core/forms/FormController';
-import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
 import type { Nullable } from '@noeldemartin/utils';
+import type { ModalEmits, ModalExpose } from '@aerogel/core/components/contracts/Modal';
 
 export type ConfirmModalCheckboxes = Record<string, { label: string; default?: boolean; required?: boolean }>;
+export type ConfirmModalResult = boolean | [boolean, Record<string, Nullable<boolean>>];
 
 export interface ConfirmModalProps {
     title?: string;
@@ -21,7 +22,9 @@ export interface ConfirmModalProps {
     required?: boolean;
 }
 
-export interface ConfirmModalExpose extends ModalExpose<boolean | [boolean, Record<string, Nullable<boolean>>]> {}
+export interface ConfirmModalExpose extends ModalExpose {}
+
+export interface ConfirmModalEmits extends ModalEmits<ConfirmModalResult> {}
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function useConfirmModal(props: ConfirmModalProps) {

package/src/components/contracts/Modal.ts

@@ -5,17 +5,22 @@ export type ModalContentInstance = Nullable<InstanceType<typeof DialogContent>>;
 
 export interface ModalProps {
     persistent?: boolean;
+    fullscreen?: boolean;
+    fullscreenOnMobile?: boolean;
     title?: string;
     titleHidden?: boolean;
     description?: string;
     descriptionHidden?: boolean;
 }
 
-export interface ModalSlots<Result = void> {
+export interface ModalSlots<Result = never> {
     default(props: { close(result?: Result): Promise<void> }): unknown;
 }
 
-export interface ModalExpose<Result = void> {
-    close(result?: Result): Promise<void>;
+export interface ModalExpose {
     $content: ModalContentInstance;
 }
+
+export interface ModalEmits<Result = never> {
+    (event: 'close', payload: Result): void;
+}

package/src/components/contracts/PromptModal.ts

@@ -4,7 +4,9 @@ import { useForm } from '@aerogel/core/utils/composition/forms';
 import { requiredStringInput } from '@aerogel/core/forms/utils';
 import { translateWithDefault } from '@aerogel/core/lang';
 import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
-import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
+import type { ModalEmits, ModalExpose } from '@aerogel/core/components/contracts/Modal';
+
+export type PromptModalResult = string;
 
 export interface PromptModalProps {
     title?: string;
@@ -18,7 +20,9 @@ export interface PromptModalProps {
     cancelVariant?: ButtonVariant;
 }
 
-export interface PromptModalExpose extends ModalExpose<string> {}
+export interface PromptModalExpose extends ModalExpose {}
+
+export interface PromptModalEmits extends ModalEmits<PromptModalResult> {}
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function usePromptModal(props: PromptModalProps) {

package/src/components/contracts/Select.ts

@@ -1,8 +1,12 @@
+import { computed, inject, provide, readonly } from 'vue';
+import { evaluate, toString, uuid } from '@noeldemartin/utils';
+import type { AcceptRefs } from '@aerogel/core/utils';
 import type { AcceptableValue, AsTag, SelectContentProps } from 'reka-ui';
-import type { Component, ComputedRef, HTMLAttributes } from 'vue';
+import type { Component, ComputedRef, EmitFn, HTMLAttributes, Ref } from 'vue';
 import type { Nullable } from '@noeldemartin/utils';
 
-import type { FormFieldValue } from '@aerogel/core/forms';
+import { translateWithDefault } from '@aerogel/core/lang';
+import type { FormController, FormFieldValue } from '@aerogel/core/forms';
 
 import type { InputEmits, InputExpose, InputProps } from './Input';
 
@@ -34,12 +38,102 @@ export interface SelectExpose<T extends Nullable<FormFieldValue> = Nullable<Form
     options: ComputedRef<Nullable<readonly SelectOptionData[]>>;
     selectedOption: ComputedRef<Nullable<SelectOptionData>>;
     placeholder: ComputedRef<string>;
-    labelClass?: HTMLAttributes['class'];
-    optionsClass?: HTMLAttributes['class'];
+    labelClass: ComputedRef<HTMLAttributes['class']>;
+    optionsClass: ComputedRef<HTMLAttributes['class']>;
     align?: SelectContentProps['align'];
     side?: SelectContentProps['side'];
+    renderOption: (option: T) => string;
 }
 
 export function hasSelectOptionLabel(option: unknown): option is HasSelectOptionLabel {
     return typeof option === 'object' && option !== null && 'label' in option;
 }
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useSelect<T extends Nullable<FormFieldValue>>(
+    props: Ref<SelectProps<T>>,
+    emit: EmitFn<SelectEmits<T>>,
+) {
+    const form = inject<FormController | null>('form', null);
+    const renderOption = (option: T): string => {
+        if (option === undefined) {
+            return '';
+        }
+
+        return props.value.renderOption
+            ? props.value.renderOption(option)
+            : hasSelectOptionLabel(option)
+                ? evaluate(option.label as string)
+                : toString(option);
+    };
+    const computedValue = computed(() => {
+        const { name, modelValue } = props.value;
+
+        if (form && name) {
+            return form.getFieldValue(name) as T;
+        }
+
+        return modelValue as T;
+    });
+    const acceptableValue = computed(() => computedValue.value as AcceptableValue);
+    const errors = computed(() => {
+        if (!form || !props.value.name) {
+            return null;
+        }
+
+        return form.errors[props.value.name] ?? null;
+    });
+    const computedOptions = computed(() => {
+        if (!props.value.options) {
+            return null;
+        }
+
+        return props.value.options.map((option) => ({
+            key: uuid(),
+            label: renderOption(option),
+            value: option as AcceptableValue,
+        }));
+    });
+
+    const expose = {
+        renderOption,
+        labelClass: computed(() => props.value.labelClass),
+        optionsClass: computed(() => props.value.optionsClass),
+        align: computed(() => props.value.align),
+        side: computed(() => props.value.side),
+        value: computedValue,
+        id: `select-${uuid()}`,
+        name: computed(() => props.value.name),
+        label: computed(() => props.value.label),
+        description: computed(() => props.value.description),
+        placeholder: computed(() => props.value.placeholder ?? translateWithDefault('ui.select', 'Select an option')),
+        options: computedOptions,
+        selectedOption: computed(() =>
+            computedOptions.value?.find((option) => option.value === props.value.modelValue)),
+        errors: readonly(errors),
+        required: computed(() => {
+            if (!props.value.name || !form) {
+                return;
+            }
+
+            return form.getFieldRules(props.value.name).includes('required');
+        }),
+        update(value) {
+            if (form && props.value.name) {
+                form.setFieldValue(props.value.name, value as FormFieldValue);
+
+                return;
+            }
+
+            emit('update:modelValue', value);
+        },
+    } satisfies AcceptRefs<SelectExpose<T>>;
+
+    function update(value: AcceptableValue) {
+        expose.update(value as T);
+    }
+
+    provide('select', expose);
+
+    return { expose, acceptableValue, update, renderOption };
+}

package/src/components/contracts/Toast.ts

@@ -1,4 +1,4 @@
-export type ToastVariant = 'secondary' | 'danger';
+export type ToastVariant = 'secondary' | 'warning' | 'danger';
 
 export interface ToastAction {
     label: string;

package/src/components/contracts/index.ts

@@ -1,5 +1,6 @@
 export * from './AlertModal';
 export * from './Button';
+export * from './Combobox';
 export * from './ConfirmModal';
 export * from './DropdownMenu';
 export * from './ErrorReportModal';

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 { getLocalTimezoneOffset } 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';
@@ -39,7 +40,7 @@ const renderedType = computed(() => {
     return ['text', 'email', 'number', 'tel', 'url'].includes(fieldType) ? fieldType : 'text';
 });
 const checked = computed(() => {
-    if (type !== 'checkbox') {
+    if (renderedType.value !== 'checkbox') {
         return;
     }
 
@@ -59,11 +60,26 @@ function getValue(): FormFieldValue | null {
         return null;
     }
 
-    switch (type) {
+    switch (renderedType.value) {
         case 'checkbox':
             return $input.value.checked;
         case 'date':
-            return $input.value.valueAsDate;
+        case 'time':
+        case 'datetime-local': {
+            const date = new Date(
+                Math.round($input.value.valueAsNumber / 60000) * 60000 +
+                    getLocalTimezoneOffset($input.value.valueAsDate ?? new Date($input.value.valueAsNumber)),
+            );
+
+            if (isNaN(date.getTime())) {
+                return null;
+            }
+
+            return date;
+        }
+
+        case 'number':
+            return $input.value.valueAsNumber;
         default:
             return $input.value.value;
     }
@@ -75,8 +91,14 @@ watchEffect(() => {
         return;
     }
 
-    if (type === '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 - getLocalTimezoneOffset(value.value);
+
+        if (value.value.getTime() !== roundedValue) {
+            input.update(new Date(roundedValue));
+        }
 
         return;
     }

package/src/components/headless/HeadlessModal.vue

@@ -1,57 +1,29 @@
 <template>
-    <DialogRoot :ref="forwardRef" open @update:open="persistent || close()">
+    <DialogRoot :ref="forwardRef" open @update:open="persistent || $event || close()">
         <DialogPortal>
-            <slot :close="close" />
+            <slot :close />
         </DialogPortal>
     </DialogRoot>
 </template>
 
 <script setup lang="ts" generic="T = void">
-import { provide, ref } from 'vue';
 import { DialogPortal, DialogRoot, useForwardExpose } from 'reka-ui';
+import { provide, ref } from 'vue';
 import type { DialogContent } from 'reka-ui';
 import type { Nullable } from '@noeldemartin/utils';
 
-import Events from '@aerogel/core/services/Events';
-import { useEvent } from '@aerogel/core/utils/composition/events';
-import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
+import { useModal } from '@aerogel/core/ui/modals';
 import type { AcceptRefs } from '@aerogel/core/utils/vue';
-import type { UIModalContext } from '@aerogel/core/ui/UI';
 import type { ModalExpose, ModalProps, ModalSlots } from '@aerogel/core/components/contracts/Modal';
 
 const $content = ref<Nullable<InstanceType<typeof DialogContent>>>(null);
-const { modal } = injectReactiveOrFail<UIModalContext>(
-    'modal',
-    'could not obtain modal reference from <HeadlessModal>, ' +
-        'did you render this component manually? Show it using $ui.modal() instead',
-);
+const { close } = useModal<T>();
 
 defineProps<ModalProps>();
 defineSlots<ModalSlots<T>>();
-defineExpose<AcceptRefs<ModalExpose<T>>>({ close, $content });
+defineExpose<AcceptRefs<ModalExpose>>({ $content });
 
 const { forwardRef } = useForwardExpose();
-const closed = ref(false);
 
 provide('$modalContentRef', $content);
-
-useEvent('close-modal', async ({ id, result }) => {
-    if (id !== modal.id) {
-        return;
-    }
-
-    await close(result);
-});
-
-async function close(result?: unknown) {
-    if (closed.value) {
-        return;
-    }
-
-    await Events.emit('modal-will-close', { modal, result });
-
-    closed.value = true;
-
-    await Events.emit('modal-has-closed', { modal, result });
-}
 </script>

package/src/components/headless/HeadlessModalContent.vue

@@ -2,29 +2,22 @@
     <DialogContent ref="$contentRef">
         <slot />
 
-        <ModalContext v-if="childModal" :child-index="childIndex + 1" :modal="childModal" />
+        <ModalComponent :is="child" v-if="child" />
     </DialogContent>
 </template>
 
 <script setup lang="ts">
-import { computed, useTemplateRef, watchEffect } from 'vue';
+import { useTemplateRef, watchEffect } from 'vue';
 import { DialogContent } from 'reka-ui';
 import type { Ref } from 'vue';
 
-import ModalContext from '@aerogel/core/components/ui/ModalContext.vue';
-import UI from '@aerogel/core/ui/UI';
-import { injectOrFail, injectReactiveOrFail } from '@aerogel/core/utils/vue';
-import type { UIModalContext } from '@aerogel/core/ui/UI';
+import { ModalComponent, useModal } from '@aerogel/core/ui/modals';
+import { injectOrFail } from '@aerogel/core/utils/vue';
 import type { ModalContentInstance } from '@aerogel/core/components/contracts/Modal';
 
-const { childIndex = 0 } = injectReactiveOrFail<UIModalContext>(
-    'modal',
-    'could not obtain modal reference from <HeadlessModalContent>, ' +
-        'did you render this component manually? Show it using $ui.modal() instead',
-);
+const { child } = useModal();
 const $modalContentRef = injectOrFail<Ref<ModalContentInstance>>('$modalContentRef');
 const $content = useTemplateRef('$contentRef');
-const childModal = computed(() => UI.modals[childIndex] ?? null);
 
 watchEffect(() => ($modalContentRef.value = $content.value));
 </script>

package/src/components/headless/HeadlessSelect.vue

@@ -2,7 +2,7 @@
     <SelectRoot
         v-slot="{ open }"
         :model-value="acceptableValue"
-        :by="compareOptions as Closure<[AcceptableValue, AcceptableValue], boolean>"
+        :by="compareOptions"
         @update:model-value="update($event)"
     >
         <component :is="as" v-bind="$attrs">
@@ -15,16 +15,12 @@
 </template>
 
 <script setup lang="ts" generic="T extends Nullable<FormFieldValue>">
-import { computed, inject, provide, readonly } from 'vue';
-import { value as evaluate, toString, uuid } from '@noeldemartin/utils';
 import { SelectRoot } from 'reka-ui';
-import type { AcceptableValue } from 'reka-ui';
-import type { Closure, Nullable } from '@noeldemartin/utils';
+import { computed } from 'vue';
+import type { Nullable } from '@noeldemartin/utils';
 
-import { translateWithDefault } from '@aerogel/core/lang';
-import { hasSelectOptionLabel } from '@aerogel/core/components/contracts/Select';
-import type FormController from '@aerogel/core/forms/FormController';
-import type { SelectEmits, SelectExpose, SelectProps } from '@aerogel/core/components/contracts/Select';
+import { useSelect } from '@aerogel/core/components/contracts/Select';
+import type { SelectEmits, SelectProps } from '@aerogel/core/components/contracts/Select';
 import type { FormFieldValue } from '@aerogel/core/forms/FormController';
 
 import HeadlessSelectTrigger from './HeadlessSelectTrigger.vue';
@@ -32,89 +28,12 @@ import HeadlessSelectOptions from './HeadlessSelectOptions.vue';
 
 defineOptions({ inheritAttrs: false });
 
-const {
-    name,
-    as = 'div',
-    label,
-    options,
-    labelClass,
-    optionsClass,
-    renderOption,
-    compareOptions = (a, b) => a === b,
-    description,
-    placeholder,
-    modelValue,
-    align,
-    side,
-} = defineProps<SelectProps<T>>();
 const emit = defineEmits<SelectEmits<T>>();
-const form = inject<FormController | null>('form', null);
-const computedValue = computed(() => {
-    if (form && name) {
-        return form.getFieldValue(name) as T;
-    }
+const { as = 'div', compareOptions = (a, b) => a === b, ...props } = defineProps<SelectProps<T>>();
+const { expose, acceptableValue, update } = useSelect(
+    computed(() => ({ as, compareOptions, ...props })),
+    emit,
+);
 
-    return modelValue as T;
-});
-const acceptableValue = computed(() => computedValue.value as AcceptableValue);
-const errors = computed(() => {
-    if (!form || !name) {
-        return null;
-    }
-
-    return form.errors[name] ?? null;
-});
-const computedOptions = computed(() => {
-    if (!options) {
-        return null;
-    }
-
-    return options.map((option) => ({
-        key: uuid(),
-        label: renderOption
-            ? renderOption(option)
-            : hasSelectOptionLabel(option)
-                ? evaluate(option.label as string)
-                : toString(option),
-        value: option as AcceptableValue,
-    }));
-});
-const expose = {
-    labelClass,
-    optionsClass,
-    align,
-    side,
-    value: computedValue,
-    id: `select-${uuid()}`,
-    name: computed(() => name),
-    label: computed(() => label),
-    description: computed(() => description),
-    placeholder: computed(() => placeholder ?? translateWithDefault('ui.select', 'Select an option')),
-    options: computedOptions,
-    selectedOption: computed(() => computedOptions.value?.find((option) => option.value === modelValue)),
-    errors: readonly(errors),
-    required: computed(() => {
-        if (!name || !form) {
-            return;
-        }
-
-        return form.getFieldRules(name).includes('required');
-    }),
-    update(value) {
-        if (form && name) {
-            form.setFieldValue(name, value as FormFieldValue);
-
-            return;
-        }
-
-        emit('update:modelValue', value);
-    },
-} satisfies SelectExpose<T>;
-
-function update(value: AcceptableValue) {
-    expose.update(value as T);
-}
-
-provide('select', expose);
 defineExpose(expose);
 </script>

package/src/components/headless/HeadlessSelectOption.vue

@@ -25,10 +25,6 @@ const select = injectReactiveOrFail<SelectExpose>(
 const renderedLabel = computed(() => {
     const itemOption = select.options?.find((option) => option.value === value);
 
-    if (itemOption) {
-        return itemOption.label;
-    }
-
-    return toString(value);
+    return itemOption ? select.renderOption(itemOption.value) : toString(value);
 });
 </script>

package/src/components/index.ts

@@ -1,8 +1,8 @@
 export { default as AppLayout } from './AppLayout.vue';
-export { default as AppModals } from './AppModals.vue';
 export { default as AppOverlays } from './AppOverlays.vue';
 export { default as AppToasts } from './AppToasts.vue';
 
 export * from './contracts';
 export * from './headless';
 export * from './ui';
+export * from './vue';

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/Button.vue

@@ -25,6 +25,7 @@ const renderedClasses = computed(() => variantClasses<Variants<Pick<ButtonProps,
                 default: 'bg-primary-600 text-white focus-visible:outline-primary-600',
                 secondary: 'bg-background text-gray-900 ring-gray-300',
                 danger: 'bg-red-600 text-white focus-visible:outline-red-600',
+                warning: 'bg-yellow-600 text-white focus-visible:outline-yellow-600',
                 ghost: 'bg-transparent',
                 outline: 'bg-transparent text-primary-600 ring-primary-600',
                 link: 'text-links',