@aerogel/core 0.1.1-next.bad775a386a94fedbee1d575ee1f4fb99d1f5bab → 0.1.1-next.ce10b6d6ba4cd98145cf14595fb4f292b979e2dc

package/src/components/ui/Details.vue

@@ -1,10 +1,10 @@
 <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="renderedContentClasses">
@@ -14,10 +14,20 @@
 </template>
 
 <script setup lang="ts">
+import IconCheveronRight from '~icons/zondicons/cheveron-right';
 import { classes } from '@aerogel/core/utils';
 import { type HTMLAttributes, computed } from 'vue';
-import IconCheveronRight from '~icons/zondicons/cheveron-right';
 
-const { label, contentClass } = defineProps<{ label: string; contentClass?: HTMLAttributes['class'] }>();
+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 max-w-full',
+        'hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700',
+        summaryClass,
+    ));
 </script>

package/src/components/ui/ProgressBar.vue

@@ -36,7 +36,7 @@ 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 border-l-3 border-gray-200',
+        'absolute inset-y-0 right-0 size-full rounded-r-full',
         'bg-primary-900 transition-[width] duration-500 ease-linear',
         overflowClass,
     ));

package/src/components/ui/Select.vue

@@ -3,6 +3,7 @@
         <SelectLabel />
         <slot>
             <SelectTrigger />
+            <HeadlessSelectError class="mt-2 text-sm text-red-600" />
             <SelectOptions />
         </slot>
     </HeadlessSelect>
@@ -19,6 +20,7 @@ import type { FormFieldValue } from '@aerogel/core/forms';
 import SelectLabel from './SelectLabel.vue';
 import SelectOptions from './SelectOptions.vue';
 import SelectTrigger from './SelectTrigger.vue';
+import HeadlessSelectError from '../headless/HeadlessSelectError.vue';
 
 defineProps<SelectProps<T>>();
 defineEmits<SelectEmits<T>>();

package/src/components/ui/SelectTrigger.vue

@@ -2,11 +2,15 @@
     <HeadlessSelectTrigger :class="renderedClasses">
         <HeadlessSelectValue class="col-start-1 row-start-1 truncate pr-6" />
         <IconCheveronDown class="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-500 sm:size-4" />
+        <div v-if="select?.errors" class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+            <IconExclamationSolid class="size-5 text-red-500" />
+        </div>
     </HeadlessSelectTrigger>
 </template>
 
 <script setup lang="ts">
 import IconCheveronDown from '~icons/zondicons/cheveron-down';
+import IconExclamationSolid from '~icons/zondicons/exclamation-solid';
 
 import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
@@ -22,8 +26,15 @@ const select = injectReactiveOrFail<SelectExpose>('select', '<SelectTrigger> mus
 const renderedClasses = computed(() =>
     classes(
         // eslint-disable-next-line vue/max-len
-        'focus:outline-primary-600 data-[state=open]:outline-primary-600 grid w-full cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 sm:text-sm/6',
-        { 'mt-1': select.label },
+        'relative grid w-full cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline-1 -outline-offset-1',
+        'focus:outline-2 focus:-outline-offset-2 sm:text-sm/6',
+        {
+            'mt-1': select.label,
+            'outline-gray-300 focus:outline-primary-600 data-[state=open]:outline-primary-600': !select.errors,
+            'text-gray-900 shadow-2xs ring-gray-900/10 placeholder:text-gray-400': !select.errors,
+            'outline-red-900/10 pr-10 text-red-900 placeholder:text-red-300': select.errors,
+            'focus:outline-red-500 data-[state=open]:outline-red-500': select.errors,
+        },
         rootClasses,
     ));
 </script>

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/forms/FormController.test.ts

@@ -30,7 +30,7 @@ describe('FormController', () => {
         const form = useForm({
             name: {
                 type: 'string',
-                rules: 'required',
+                rules: ['required'],
             },
         });
 
@@ -48,7 +48,7 @@ describe('FormController', () => {
         const form = useForm({
             name: {
                 type: 'string',
-                rules: 'required',
+                rules: ['required'],
             },
         });
 
@@ -69,11 +69,11 @@ describe('FormController', () => {
         const form = useForm({
             trimmed: {
                 type: 'string',
-                rules: 'required',
+                rules: ['required'],
             },
             untrimmed: {
                 type: 'string',
-                rules: 'required',
+                rules: ['required'],
                 trim: false,
             },
         });

package/src/forms/FormController.ts

@@ -14,7 +14,7 @@ export interface FormFieldDefinition<
     type: TType;
     trim?: boolean;
     default?: GetFormFieldValue<TType>;
-    rules?: TRules;
+    rules?: TRules[];
     values?: readonly TValueType[];
     [__valueType]?: TValueType;
 }
@@ -109,7 +109,7 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
     }
 
     public getFieldRules<T extends keyof Fields>(field: T): string[] {
-        return this._fields[field]?.rules?.split('|') ?? [];
+        return this._fields[field]?.rules ?? [];
     }
 
     public setFieldErrors<T extends keyof Fields>(field: T, errors: string[] | null): void {
@@ -201,7 +201,7 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
     private getFieldErrors(name: keyof Fields, definition: FormFieldDefinition): string[] | null {
         const errors = [];
         const value = this._data[name];
-        const rules = definition.rules?.split('|') ?? [];
+        const rules = definition.rules ?? [];
 
         errors.push(...validateType(value, definition));
 

package/src/forms/index.ts

@@ -1,4 +1,15 @@
+import { registerFormValidationRule } from '@aerogel/core/forms/validation';
+import { definePlugin } from '@aerogel/core/plugins';
+
 export * from './FormController';
 export * from './utils';
 export * from './validation';
 export { default as FormController } from './FormController';
+
+export default definePlugin({
+    async install(_, { formValidationRules }) {
+        for (const [rule, validator] of Object.entries(formValidationRules ?? {})) {
+            registerFormValidationRule(rule, validator);
+        }
+    },
+});

package/src/forms/utils.ts

@@ -1,6 +1,9 @@
 import type { FormFieldDefinition } from './FormController';
 
-export function booleanInput(defaultValue?: boolean, options: { rules?: string } = {}): FormFieldDefinition<'boolean'> {
+export function booleanInput(
+    defaultValue?: boolean,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'boolean'> {
     return {
         default: defaultValue,
         type: 'boolean',
@@ -8,7 +11,7 @@ export function booleanInput(defaultValue?: boolean, options: { rules?: string }
     };
 }
 
-export function dateInput(defaultValue?: Date, options: { rules?: string } = {}): FormFieldDefinition<'date'> {
+export function dateInput(defaultValue?: Date, options: { rules?: string[] } = {}): FormFieldDefinition<'date'> {
     return {
         default: defaultValue,
         type: 'date',
@@ -19,7 +22,7 @@ export function dateInput(defaultValue?: Date, options: { rules?: string } = {})
 export function enumInput<const T extends string>(
     values: readonly T[],
     defaultValue?: T,
-    options: { rules?: string } = {},
+    options: { rules?: string[] } = {},
 ): FormFieldDefinition<'enum', string, T> {
     return {
         default: defaultValue,
@@ -29,59 +32,75 @@ export function enumInput<const T extends string>(
     };
 }
 
-export function requiredBooleanInput(defaultValue?: boolean): FormFieldDefinition<'boolean', 'required'> {
+export function requiredBooleanInput(
+    defaultValue?: boolean,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'boolean', 'required'> {
     return {
         default: defaultValue,
         type: 'boolean',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
     };
 }
 
-export function requiredDateInput(defaultValue?: Date): FormFieldDefinition<'date', 'required'> {
+export function requiredDateInput(
+    defaultValue?: Date,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'date', 'required'> {
     return {
         default: defaultValue,
         type: 'date',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
     };
 }
 
 export function requiredEnumInput<const T extends string>(
     values: readonly T[],
     defaultValue?: T,
+    options: { rules?: string[] } = {},
 ): FormFieldDefinition<'enum', 'required', T> {
     return {
         default: defaultValue,
         type: 'enum',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
         values,
     };
 }
 
-export function requiredNumberInput(defaultValue?: number): FormFieldDefinition<'number', 'required'> {
+export function requiredNumberInput(
+    defaultValue?: number,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'number', 'required'> {
     return {
         default: defaultValue,
         type: 'number',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
     };
 }
 
-export function requiredObjectInput<T extends object>(defaultValue?: T): FormFieldDefinition<'object', 'required', T> {
+export function requiredObjectInput<T extends object>(
+    defaultValue?: T,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'object', 'required', T> {
     return {
         default: defaultValue,
         type: 'object',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
     };
 }
 
-export function requiredStringInput(defaultValue?: string): FormFieldDefinition<'string', 'required'> {
+export function requiredStringInput(
+    defaultValue?: string,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'string', 'required'> {
     return {
         default: defaultValue,
         type: 'string',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
     };
 }
 
-export function numberInput(defaultValue?: number, options: { rules?: string } = {}): FormFieldDefinition<'number'> {
+export function numberInput(defaultValue?: number, options: { rules?: string[] } = {}): FormFieldDefinition<'number'> {
     return {
         default: defaultValue,
         type: 'number',
@@ -91,7 +110,7 @@ export function numberInput(defaultValue?: number, options: { rules?: string } =
 
 export function objectInput<T extends object>(
     defaultValue?: T,
-    options: { rules?: string } = {},
+    options: { rules?: string[] } = {},
 ): FormFieldDefinition<'object', string, T> {
     return {
         default: defaultValue,
@@ -100,7 +119,7 @@ export function objectInput<T extends object>(
     };
 }
 
-export function stringInput(defaultValue?: string, options: { rules?: string } = {}): FormFieldDefinition<'string'> {
+export function stringInput(defaultValue?: string, options: { rules?: string[] } = {}): FormFieldDefinition<'string'> {
     return {
         default: defaultValue,
         type: 'string',

package/src/forms/validation.ts

@@ -31,10 +31,14 @@ export type FormFieldValidator<T = unknown> = (value: T) => string | string[] |
 
 export const validators: Record<string, FormFieldValidator> = { ...builtInRules };
 
-export function defineFormValidationRule<T>(rule: string, validator: FormFieldValidator<T>): void {
+export function registerFormValidationRule<T>(rule: string, validator: FormFieldValidator<T>): void {
     validators[rule] = validator as FormFieldValidator;
 }
 
+export function defineFormValidationRules<T extends Record<string, FormFieldValidator>>(rules: T): T {
+    return rules;
+}
+
 export function validateType(value: unknown, definition: FormFieldDefinition): string[] {
     if (isValidType(value, definition)) {
         return [];

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/jobs/Job.ts

@@ -115,7 +115,7 @@ export default abstract class Job<
             return 1;
         }
 
-        if (!status.children) {
+        if (!status.children || status.children.length === 0) {
             return 0;
         }
 

package/src/services/index.ts

@@ -10,6 +10,7 @@ import Service from './Service';
 import Storage from './Storage';
 import { getPiniaStore } from './store';
 import type { AppSetting } from './App.state';
+import type { FormFieldValidator } from '@aerogel/core/forms';
 
 export * from './App';
 export * from './Cache';
@@ -68,6 +69,7 @@ declare module '@aerogel/core/bootstrap/options' {
     export interface AerogelOptions {
         services?: Record<string, Service>;
         settings?: AppSetting[];
+        formValidationRules?: Record<string, FormFieldValidator>;
         settingsFullscreenOnMobile?: boolean;
     }
 }

package/src/utils/time.ts

@@ -1,2 +1,7 @@
+import type { Nullable } from '@noeldemartin/utils';
+
 export const MINUTE_MILLISECONDS = 60000;
-export const LOCAL_TIMEZONE_OFFSET = -new Date().getTimezoneOffset() * -MINUTE_MILLISECONDS;
+
+export function getLocalTimezoneOffset(date?: Nullable<Date>): number {
+    return -(date ?? new Date()).getTimezoneOffset() * -MINUTE_MILLISECONDS;
+}