@aerogel/core 0.0.0-next.c3236837f7f8fc319a4a56022accb32757b3db89 → 0.0.0-next.c38a10cd5e81c5f04469ef79e59a53e6bfd3df55

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.0.0-next.c3236837f7f8fc319a4a56022accb32757b3db89",
+    "version": "0.0.0-next.c38a10cd5e81c5f04469ef79e59a53e6bfd3df55",
     "type": "module",
     "sideEffects": false,
     "exports": {

package/src/components/ui/Input.vue

@@ -48,8 +48,8 @@ const renderedInputClasses = computed(() =>
         'block w-full rounded-md border-0 py-1.5 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6',
         {
             'focus:ring-primary-600': !$input.value?.errors,
-            'text-gray-900 shadow-2xs ring-gray-300 placeholder:text-gray-400': !$input.value?.errors,
-            'pr-10 text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500': $input.value?.errors,
+            'text-gray-900 shadow-2xs ring-gray-900/10 placeholder:text-gray-400': !$input.value?.errors,
+            'pr-10 text-red-900 ring-red-900/10 placeholder:text-red-300 focus:ring-red-500': $input.value?.errors,
         },
         inputClass,
     ));

package/src/components/ui/TextArea.vue

@@ -48,8 +48,8 @@ const renderedInputClasses = computed(() =>
         'block w-full rounded-md border-0 py-1.5 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6',
         {
             'focus:ring-primary-600': !$input.value?.errors,
-            'text-gray-900 shadow-2xs ring-gray-300 placeholder:text-gray-400': !$input.value?.errors,
-            'pr-10 text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500': $input.value?.errors,
+            'text-gray-900 shadow-2xs ring-gray-900/10 placeholder:text-gray-400': !$input.value?.errors,
+            'pr-10 text-red-900 ring-red-900/10 placeholder:text-red-300 focus:ring-red-500': $input.value?.errors,
         },
         inputClass,
     ));

package/src/forms/FormController.test.ts

@@ -4,6 +4,7 @@ import type { Equals } from '@noeldemartin/utils';
 import type { Expect } from '@noeldemartin/testing';
 
 import {
+    enumInput,
     numberInput,
     objectInput,
     requiredObjectInput,
@@ -97,6 +98,7 @@ describe('FormController', () => {
             two: requiredStringInput(),
             three: objectInput(),
             four: requiredObjectInput<{ foo: string; bar?: number }>(),
+            five: enumInput(['foo', 'bar']),
         });
 
         tt<
@@ -104,6 +106,7 @@ describe('FormController', () => {
             | Expect<Equals<typeof form.two, string>>
             | Expect<Equals<typeof form.three, object | null>>
             | Expect<Equals<typeof form.four, { foo: string; bar?: number }>>
+            | Expect<Equals<typeof form.five, 'foo' | 'bar' | null>>
         >();
     });
 

package/src/forms/FormController.ts

@@ -2,31 +2,32 @@ import { computed, nextTick, reactive, readonly, ref } from 'vue';
 import { MagicObject, arrayRemove, fail, toString } from '@noeldemartin/utils';
 import type { ComputedRef, DeepReadonly, Ref, UnwrapNestedRefs } from 'vue';
 
-import { validate } from './validation';
+import { validate, validateType } from './validation';
 
-export const __objectType: unique symbol = Symbol();
+export const __valueType: unique symbol = Symbol();
 
 export interface FormFieldDefinition<
     TType extends FormFieldType = FormFieldType,
     TRules extends string = string,
-    TObjectType = object,
+    TValueType = unknown,
 > {
     type: TType;
     trim?: boolean;
     default?: GetFormFieldValue<TType>;
     rules?: TRules;
-    [__objectType]?: TObjectType;
+    values?: TValueType[];
+    [__valueType]?: TValueType;
 }
 
-export type FormFieldType = 'string' | 'number' | 'boolean' | 'object' | 'date';
+export type FormFieldType = 'string' | 'enum' | 'number' | 'boolean' | 'object' | 'date';
 export type FormFieldValue = GetFormFieldValue<FormFieldType>;
 export type FormFieldDefinitions = Record<string, FormFieldDefinition>;
 
 export type FormData<T> = {
-    -readonly [k in keyof T]: T[k] extends FormFieldDefinition<infer TType, infer TRules, infer TObjectType>
+    -readonly [k in keyof T]: T[k] extends FormFieldDefinition<infer TType, infer TRules, infer TValueType>
         ? TRules extends 'required'
-            ? GetFormFieldValue<TType, TObjectType>
-            : GetFormFieldValue<TType, TObjectType> | null
+            ? GetFormFieldValue<TType, TValueType>
+            : GetFormFieldValue<TType, TValueType> | null
         : never;
 };
 
@@ -34,19 +35,21 @@ export type FormErrors<T> = {
     [k in keyof T]: string[] | null;
 };
 
-export type GetFormFieldValue<TType, TObjectType = object> = TType extends 'string'
+export type GetFormFieldValue<TType, TValueType = unknown> = TType extends 'string'
     ? string
     : TType extends 'number'
       ? number
       : TType extends 'boolean'
         ? boolean
-        : TType extends 'object'
-          ? TObjectType extends object
-              ? TObjectType
-              : object
-          : TType extends 'date'
-            ? Date
-            : never;
+        : TType extends 'enum'
+          ? TValueType
+          : TType extends 'object'
+            ? TValueType extends object
+                ? TValueType
+                : object
+            : TType extends 'date'
+              ? Date
+              : never;
 
 const validForms: WeakMap<FormController, ComputedRef<boolean>> = new WeakMap();
 
@@ -196,6 +199,8 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
         const value = this._data[name];
         const rules = definition.rules?.split('|') ?? [];
 
+        errors.push(...validateType(value, definition));
+
         for (const rule of rules) {
             if (rule !== 'required' && (value === null || value === undefined)) {
                 continue;

package/src/forms/utils.ts

@@ -16,6 +16,19 @@ export function dateInput(defaultValue?: Date, options: { rules?: string } = {})
     };
 }
 
+export function enumInput<const T extends string>(
+    values: T[],
+    defaultValue?: T,
+    options: { rules?: string } = {},
+): FormFieldDefinition<'enum', string, T> {
+    return {
+        default: defaultValue,
+        type: 'enum',
+        rules: options.rules,
+        values,
+    };
+}
+
 export function requiredBooleanInput(defaultValue?: boolean): FormFieldDefinition<'boolean', 'required'> {
     return {
         default: defaultValue,
@@ -32,6 +45,18 @@ export function requiredDateInput(defaultValue?: Date): FormFieldDefinition<'dat
     };
 }
 
+export function requiredEnumInput<T extends string>(
+    values: T[],
+    defaultValue?: T,
+): FormFieldDefinition<'enum', 'required', T> {
+    return {
+        default: defaultValue,
+        type: 'enum',
+        rules: 'required',
+        values,
+    };
+}
+
 export function requiredNumberInput(defaultValue?: number): FormFieldDefinition<'number', 'required'> {
     return {
         default: defaultValue,

package/src/forms/validation.ts

@@ -1,9 +1,32 @@
 import { arrayFrom } from '@noeldemartin/utils';
 
+import type { FormFieldDefinition } from '@aerogel/core/forms/FormController';
+
 const builtInRules: Record<string, FormFieldValidator> = {
     required: (value) => (value ? undefined : 'required'),
 };
 
+function isValidType(value: unknown, definition: FormFieldDefinition): boolean {
+    if (value === undefined || value === null) {
+        return true;
+    }
+
+    switch (definition.type) {
+        case 'string':
+            return typeof value === 'string';
+        case 'enum':
+            return !!definition.values?.includes(value);
+        case 'number':
+            return typeof value === 'number';
+        case 'boolean':
+            return typeof value === 'boolean';
+        case 'date':
+            return value instanceof Date;
+        case 'object':
+            return typeof value === 'object';
+    }
+}
+
 export type FormFieldValidator<T = unknown> = (value: T) => string | string[] | undefined;
 
 export const validators: Record<string, FormFieldValidator> = { ...builtInRules };
@@ -12,6 +35,14 @@ export function defineFormValidationRule<T>(rule: string, validator: FormFieldVa
     validators[rule] = validator as FormFieldValidator;
 }
 
+export function validateType(value: unknown, definition: FormFieldDefinition): string[] {
+    if (isValidType(value, definition)) {
+        return [];
+    }
+
+    return ['invalid_value'];
+}
+
 export function validate(value: unknown, rule: string): string[] {
     const errors = validators[rule]?.(value);
 

package/src/index.css

@@ -23,6 +23,7 @@
     --color-links: var(--color-primary);
 
     --breakpoint-content: var(--breakpoint-md);
+    --spacing-edge: 1rem;
 }
 
 .clickable {