@xen-orchestra/web-core 0.51.0 → 0.53.0

package/lib/packages/form-validation/README.md

@@ -0,0 +1,273 @@
+# `useFormValidation` composable
+
+Wraps [Regle](https://reglejs.dev) to provide a simple, unified interface for form validation with two severity levels: **errors** (blocking) and **warnings** (advisory). Consumers never need to import from `@regle/core` or `@regle/rules` — everything is re-exported from this package.
+
+## Usage
+
+```ts
+import { integer, outOfRange, required, useFormValidation, withMessage } from '@core/packages/form-validation'
+
+const { errors, warnings, validate, handleBlur, reset, useFieldMetadata } = useFormValidation(formData, {
+  errors: {
+    // onBlur → shown when the user leaves the field
+    onBlur: () => ({
+      age: { integer },
+    }),
+    // onSubmit → shown only when validate() is called
+    onSubmit: () => ({
+      label: { required: withMessage(required, t('label-required')) },
+    }),
+  },
+  warnings: {
+    onBlur: () => ({
+      age: { outOfRange: outOfRange(0, 150) },
+    }),
+  },
+})
+```
+
+## Parameters
+
+|          | Required | Type        | Description                   |
+| -------- | :------: | ----------- | ----------------------------- |
+| `data`   |    ✓     | `TData`     | The reactive form data object |
+| `config` |    ✓     | (see below) | Validation configuration      |
+
+### `config` object
+
+|            | Required | Type                             | Description                   |
+| ---------- | :------: | -------------------------------- | ----------------------------- |
+| `errors`   |          | `FormValidationRuleGroup<TData>` | Rules for blocking validation |
+| `warnings` |          | `FormValidationRuleGroup<TData>` | Rules for advisory validation |
+
+### `FormValidationRuleGroup<TData>`
+
+Rules are split into two groups that control when they become visible:
+
+| Key        | Description                                                       |
+| ---------- | ----------------------------------------------------------------- |
+| `onBlur`   | Rules shown when the user leaves a field (`handleBlur` is called) |
+| `onSubmit` | Rules shown only when `validate()` is called                      |
+
+Both groups are optional. A single field can have different rules in each group — for example, `required` in `onSubmit` (avoid surfacing the error while the user is still navigating) and a range check in `onBlur` (immediate feedback when leaving the field).
+
+Each group accepts either a plain rule tree object or a getter function — use a getter to keep translated messages reactive across locale changes:
+
+```ts
+errors: {
+  onSubmit: () => ({
+    label: { required: withMessage(required, t('label-required')) },
+  }),
+}
+```
+
+## Return value
+
+|                    | Type                                                   | Description                                                                                                       |
+| ------------------ | ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
+| `errors`           | `ComputedRef<FormFieldMessages<TData>>`                | Per-field blocking message strings. A field is populated only after it is touched or `validate()` is called.      |
+| `warnings`         | `ComputedRef<FormFieldMessages<TData>>`                | Per-field advisory message strings. A field is populated after `handleBlur(field)` or `validate()` is called.     |
+| `validate`         | `() => Promise<boolean>`                               | Touches all warning fields, validates all error rules, and returns `true` when the form is valid. Call on submit. |
+| `reset`            | `() => void`                                           | Resets dirty flags and clears all messages for both errors and warnings.                                          |
+| `handleBlur`       | `(field: keyof TData) => void`                         | Marks a field dirty in the `onBlur` rule groups. Call on field blur.                                              |
+| `useFieldMetadata` | `(field, extras?) => () => FormFieldMetadata & extras` | Returns a metadata factory ready to pass to `useField`. Bundles error, warning, and the blur handler.             |
+
+`FormFieldMessages<TData>` is `{ [K in keyof TData]: string | undefined }` — all fields are always present; the value is `undefined` when there is no active message.
+
+To wire these into `VtsInputWrapper`-based components, each string must be converted to `{ content, accent: 'danger' }` for errors and `{ content, accent: 'warning' }` for warnings — a plain string defaults to the `'info'` accent. `useValidatedForm` (from `@core/packages/validated-form`) performs this conversion automatically and is the recommended way to integrate validation with form fields.
+
+## Severity levels
+
+| Level   | Gates submit | When shown                                                 |
+| ------- | :----------: | ---------------------------------------------------------- |
+| Error   |      ✓       | After the field is touched or `validate()` is called       |
+| Warning |              | After `handleBlur(field)` (blur) or `validate()` is called |
+
+## Example: complete form composable
+
+```ts
+import { useFormValidation, required, integer, outOfRange, withMessage } from '@core/packages/form-validation'
+import { useFormBindings } from '@core/packages/form-bindings'
+import { reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+type MyFormData = {
+  label: string
+  age: number | undefined
+}
+
+export function useMyForm() {
+  const { t } = useI18n()
+
+  const formData = reactive<MyFormData>({
+    label: '',
+    age: undefined,
+  })
+
+  const { validate, reset, useFieldMetadata } = useFormValidation(formData, {
+    errors: {
+      // Show 'required' only on submit — don't nag the user before they've had a chance to fill in the form.
+      onSubmit: () => ({
+        label: { required: withMessage(required, t('label-required')) },
+        age: { required: withMessage(required, t('age-required')) },
+      }),
+      // Show format errors as soon as the user leaves the field.
+      onBlur: () => ({
+        age: { integer },
+      }),
+    },
+    warnings: {
+      onBlur: () => ({
+        age: { outOfRange: outOfRange(0, 150) },
+      }),
+    },
+  })
+
+  const { useField } = useFormBindings(formData)
+
+  const labelField = useField('label', useFieldMetadata('label'))
+  const ageField = useField(
+    'age',
+    useFieldMetadata('age', () => ({ label: t('age') }))
+  )
+
+  async function validateAndBuildPayload() {
+    const valid = await validate()
+
+    if (!valid) {
+      return
+    }
+  }
+
+  return { formData, labelField, ageField, validateAndBuildPayload, reset }
+}
+```
+
+## Merging configs — base / augmented form pattern
+
+`mergeValidationConfigs` combines two `FormValidationConfig` objects into one. It is useful when a reusable **base form composable** defines common validation rules and a derived **augmented form** composable adds extra fields and rules on top.
+
+```ts
+mergeValidationConfigs(base, extra?)
+```
+
+| Parameter | Required | Type                           | Description                              |
+| --------- | :------: | ------------------------------ | ---------------------------------------- |
+| `base`    |    ✓     | `FormValidationConfig<TBase>`  | The base config to extend                |
+| `extra`   |          | `FormValidationConfig<TExtra>` | Additional rules to layer on top of base |
+
+- `errors` and `warnings` groups are merged independently.
+- Within each group, `onBlur` and `onSubmit` rule trees are merged by spreading `extra` over `base` — extra fields win on key collision.
+- Both plain objects and getter functions are supported; if either side is a getter the result is a getter.
+- When `extra` is omitted, `base` is returned as-is.
+
+### Example
+
+```ts
+// use-base-form.ts — base composable shared by several form variants
+import {
+  mergeValidationConfigs,
+  useFormValidation,
+  required,
+  withMessage,
+  type FormValidationConfig,
+} from '@core/packages/form-validation'
+import { reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+type BaseFormData = { label: string; description: string }
+
+export function useBaseForm(extraConfig?: FormValidationConfig<BaseFormData>) {
+  const { t } = useI18n()
+  const formData = reactive<BaseFormData>({ label: '', description: '' })
+
+  const baseConfig: FormValidationConfig<BaseFormData> = {
+    errors: {
+      onSubmit: () => ({
+        label: { required: withMessage(required, t('error:label-required')) },
+      }),
+    },
+  }
+
+  const { validate, reset, useFieldMetadata } = useFormValidation(
+    formData,
+    mergeValidationConfigs(baseConfig, extraConfig)
+  )
+
+  // …
+  return { formData, validate, reset, useFieldMetadata }
+}
+```
+
+```ts
+// use-extended-form.ts — augmented form that adds extra validation on top
+import { minLength, type FormValidationConfig } from '@core/packages/form-validation'
+import { useBaseForm } from './use-base-form'
+
+type BaseFormData = { label: string; description: string }
+
+export function useExtendedForm() {
+  const extras: FormValidationConfig<BaseFormData> = {
+    errors: {
+      onBlur: () => ({
+        label: { minLength: minLength(3) },
+      }),
+    },
+  }
+
+  return useBaseForm(extras)
+}
+```
+
+## Available rules
+
+All rules from `@regle/rules` are re-exported from this package. Commonly used rules:
+
+| Rule          | Description                                                |
+| ------------- | ---------------------------------------------------------- |
+| `required`    | Value must be filled                                       |
+| `integer`     | Value must be an integer                                   |
+| `minValue`    | Value must be ≥ a minimum                                  |
+| `maxValue`    | Value must be ≤ a maximum                                  |
+| `minLength`   | String/array length must be ≥ a minimum                    |
+| `maxLength`   | String/array length must be ≤ a maximum                    |
+| `email`       | Value must be a valid email address                        |
+| `url`         | Value must be a valid URL                                  |
+| `requiredIf`  | Value is required when a condition holds                   |
+| `withMessage` | Attaches a custom message to any rule                      |
+| `isFilled`    | Type guard: checks if a value is defined                   |
+| `outOfRange`  | Number must be between `min` and `max` (passes when empty) |
+
+`type Maybe<T>` and `type FormRuleDeclaration<T>` are also re-exported for use in custom validator signatures.
+
+## Global configuration
+
+`defineFormValidationConfig` (re-exported from `@regle/core` as `defineRegleOptions`) lets you override the default message of any rule for the entire application. Install the result via the `RegleVuePlugin`:
+
+```ts
+// src/plugins/form-validation.config.ts
+import { defineFormValidationConfig, integer, outOfRange, required, withMessage } from '@core/packages/form-validation'
+import { useI18n } from 'vue-i18n'
+
+export const formValidationConfig = defineFormValidationConfig({
+  rules: () => {
+    const { t } = useI18n()
+
+    return {
+      required: withMessage(required, () => t('form:error:required')),
+      integer: withMessage(integer, () => t('form:error:integer')),
+      outOfRange: withMessage(outOfRange, ({ $params: [min, max] }) => t('form:warning:out-of-range', { min, max })),
+    }
+  },
+})
+```
+
+```ts
+// src/main.ts
+import { formValidationConfig } from '@/plugins/form-validation.config.ts'
+import { RegleVuePlugin } from '@regle/core'
+
+app.use(RegleVuePlugin, formValidationConfig)
+```
+
+Once installed, `required`, `integer`, and `outOfRange` show the translated messages automatically — no `withMessage` call is needed at each call site.

package/lib/packages/form-validation/custom-rules/out-of-range.rule.ts

@@ -0,0 +1,15 @@
+import { createRule, type Maybe } from '@regle/core'
+import { isFilled } from '@regle/rules'
+
+export const outOfRange = createRule({
+  validator(value: Maybe<number>, min: number, max: number) {
+    if (!isFilled(value)) {
+      return true
+    }
+
+    return value >= min && value <= max
+  },
+  message({ $params: [min, max] }) {
+    return `Should be between ${min} and ${max}`
+  },
+})

package/lib/packages/form-validation/index.ts

@@ -0,0 +1,8 @@
+export * from './custom-rules/out-of-range.rule.ts'
+export * from './merge-validation-configs.ts'
+export * from './types.ts'
+export * from './use-form-validation.ts'
+
+export { defineRegleOptions as defineFormValidationConfig } from '@regle/core'
+export type { FormRuleDeclaration, Maybe } from '@regle/core'
+export * from '@regle/rules'

package/lib/packages/form-validation/merge-validation-configs.ts

@@ -0,0 +1,46 @@
+import type { FormValidationConfig, FormValidationRuleGroup, FormValidationRules } from './types.ts'
+
+function mergeRules<T extends Record<string, unknown>>(
+  baseRules?: FormValidationRules<T>,
+  extraRules?: FormValidationRules<T>
+): FormValidationRules<T> | undefined {
+  if (!baseRules) {
+    return extraRules
+  }
+
+  if (!extraRules) {
+    return baseRules
+  }
+
+  const resolvedBase = typeof baseRules === 'function' ? baseRules : () => baseRules
+  const resolvedExtra = typeof extraRules === 'function' ? extraRules : () => extraRules
+
+  return () => ({ ...resolvedBase(), ...resolvedExtra() })
+}
+
+function mergeRuleGroups<T extends Record<string, unknown>>(
+  baseGroup?: FormValidationRuleGroup<T>,
+  extraGroup?: FormValidationRuleGroup<T>
+): FormValidationRuleGroup<T> | undefined {
+  if (!baseGroup && !extraGroup) {
+    return undefined
+  }
+
+  return {
+    onBlur: mergeRules(baseGroup?.onBlur, extraGroup?.onBlur),
+    onSubmit: mergeRules(baseGroup?.onSubmit, extraGroup?.onSubmit),
+  }
+}
+
+export function mergeValidationConfigs<TBase extends Record<string, unknown>, TExtra extends TBase>(
+  base: FormValidationConfig<TBase>,
+  extra?: FormValidationConfig<TExtra>
+): FormValidationConfig<TExtra> {
+  const errors = mergeRuleGroups(base.errors as FormValidationRuleGroup<TExtra>, extra?.errors)
+  const warnings = mergeRuleGroups(base.warnings as FormValidationRuleGroup<TExtra>, extra?.warnings)
+
+  return {
+    ...(errors !== undefined && { errors }),
+    ...(warnings !== undefined && { warnings }),
+  }
+}

package/lib/packages/form-validation/types.ts

@@ -0,0 +1,104 @@
+import type { FormRuleDeclaration } from '@regle/core'
+import type { ComputedRef } from 'vue'
+
+// FormRuleDeclaration<unknown> covers built-in Regle rules (required, minLength, …) which are
+// universally typed with `unknown` internally. Listing it explicitly alongside FormRuleDeclaration<T>
+// keeps inline-function completions typed with T while accepting built-in rules.
+type AnyRuleValue<T> = FormRuleDeclaration<T> | FormRuleDeclaration<unknown> | undefined
+
+type UniversalRuleKeys<T> = {
+  required?: AnyRuleValue<T>
+  requiredIf?: AnyRuleValue<T>
+  requiredUnless?: AnyRuleValue<T>
+}
+
+type StringRuleKeys<T> = [Extract<NonNullable<T>, string>] extends [never]
+  ? Record<never, never>
+  : {
+      minLength?: AnyRuleValue<T>
+      maxLength?: AnyRuleValue<T>
+      email?: AnyRuleValue<T>
+      url?: AnyRuleValue<T>
+      httpUrl?: AnyRuleValue<T>
+      regex?: AnyRuleValue<T>
+      sameAs?: AnyRuleValue<T>
+      contains?: AnyRuleValue<T>
+      ipAddress?: AnyRuleValue<T>
+      macAddress?: AnyRuleValue<T>
+      alpha?: AnyRuleValue<T>
+      alphaNum?: AnyRuleValue<T>
+      numeric?: AnyRuleValue<T>
+    }
+
+type NumberRuleKeys<T> = [Extract<NonNullable<T>, number>] extends [never]
+  ? Record<never, never>
+  : {
+      minValue?: AnyRuleValue<T>
+      maxValue?: AnyRuleValue<T>
+      integer?: AnyRuleValue<T>
+      between?: AnyRuleValue<T>
+    }
+
+type BooleanRuleKeys<T> = [Extract<NonNullable<T>, boolean>] extends [never]
+  ? Record<never, never>
+  : {
+      checked?: AnyRuleValue<T>
+    }
+
+type DateRuleKeys<T> = [Extract<NonNullable<T>, Date>] extends [never]
+  ? Record<never, never>
+  : {
+      after?: AnyRuleValue<T>
+      before?: AnyRuleValue<T>
+      dateBetween?: AnyRuleValue<T>
+      dateAfter?: AnyRuleValue<T>
+      dateBefore?: AnyRuleValue<T>
+    }
+
+export type FormFieldRules<T> = UniversalRuleKeys<T> &
+  StringRuleKeys<T> &
+  NumberRuleKeys<T> &
+  BooleanRuleKeys<T> &
+  DateRuleKeys<T> & {
+    [customRule: string]: AnyRuleValue<T>
+  }
+
+export type FormRuleTree<TData extends Record<string, unknown>> = {
+  [K in keyof TData]?: FormFieldRules<TData[K]>
+}
+
+export type FormValidationRules<TData extends Record<string, unknown>> =
+  | FormRuleTree<TData>
+  | (() => FormRuleTree<TData>)
+
+export type FormValidationRuleGroup<TData extends Record<string, unknown>> = {
+  onBlur?: FormValidationRules<TData>
+  onSubmit?: FormValidationRules<TData>
+}
+
+export type FormValidationConfig<TData extends Record<string, unknown>> = {
+  errors?: FormValidationRuleGroup<TData>
+  warnings?: FormValidationRuleGroup<TData>
+}
+
+export type FormFieldMessages<TData extends Record<string, unknown>> = {
+  [K in keyof TData]: string | undefined
+}
+
+export type FormFieldMetadata = {
+  error: string | undefined
+  warning: string | undefined
+  onBlur: () => void
+}
+
+export type UseFormValidationReturn<TData extends Record<string, unknown>> = {
+  errors: ComputedRef<FormFieldMessages<TData>>
+  warnings: ComputedRef<FormFieldMessages<TData>>
+  validate: () => Promise<boolean>
+  reset: () => void
+  handleBlur: (field: keyof TData) => void
+  useFieldMetadata: {
+    (field: keyof TData): () => FormFieldMetadata
+    <E extends Record<string, unknown>>(field: keyof TData, extras: () => E): () => FormFieldMetadata & E
+  }
+}

package/lib/packages/form-validation/use-form-validation.ts

@@ -0,0 +1,196 @@
+import type {
+  FormFieldMessages,
+  FormFieldMetadata,
+  FormRuleTree,
+  FormValidationConfig,
+  FormValidationRules,
+  UseFormValidationReturn,
+} from './types.ts'
+import { useRegle } from '@regle/core'
+import { computed } from 'vue'
+
+type FieldStatus = {
+  $touch: () => void
+}
+
+type RegleStatusAccessor = {
+  $fields: Record<string, FieldStatus>
+  $errors: Record<string, unknown>
+  $validate: () => Promise<{ valid: boolean }>
+  $reset: () => void
+  $touch: () => void
+}
+
+/**
+ * Automatically injects `$each: {}` into the rule tree for every field whose
+ * current value is an array, if that field is present in the rules but has no
+ * `$each` declared yet.
+ *
+ * This is required because Regle needs `$each` to know a field is a collection
+ * and to produce the `{ $self, $each }` error shape instead of a flat string[].
+ */
+function injectCollectionMarkers<TData extends Record<string, unknown>>(
+  data: TData,
+  rules: FormValidationRules<TData>
+): FormValidationRules<TData> {
+  const arrayKeys = Object.keys(data).filter(key => Array.isArray(data[key]))
+
+  if (arrayKeys.length === 0) {
+    return rules
+  }
+
+  const inject = (ruleTree: FormRuleTree<TData>): FormRuleTree<TData> => {
+    const result = { ...ruleTree } as Record<string, unknown>
+
+    for (const key of arrayKeys) {
+      const fieldRules = result[key]
+
+      if (fieldRules !== null && typeof fieldRules === 'object' && !('$each' in fieldRules)) {
+        result[key] = { ...(fieldRules as object), $each: {} }
+      }
+    }
+
+    return result as FormRuleTree<TData>
+  }
+
+  if (typeof rules === 'function') {
+    return () => inject((rules as () => FormRuleTree<TData>)())
+  }
+
+  return inject(rules)
+}
+
+/**
+ * Calls `useRegle` with a simplified signature.
+ *
+ * Regle's second-parameter type is a deeply conditional type that TypeScript cannot
+ * resolve when `TData` is a generic type parameter. Casting through `unknown` at this
+ * single call-site keeps the rest of the file type-safe without resorting to `any`.
+ */
+function callUseRegle<TData extends Record<string, unknown>>(
+  data: TData,
+  rules: FormRuleTree<TData> | (() => FormRuleTree<TData>)
+): { r$: unknown } {
+  return (
+    useRegle as unknown as (_data: TData, _rules: FormRuleTree<TData> | (() => FormRuleTree<TData>)) => { r$: unknown }
+  )(data, rules)
+}
+
+function toMessage(fieldErrors: unknown): string | undefined {
+  if (Array.isArray(fieldErrors)) {
+    return fieldErrors[0]
+  }
+
+  // Collection-field errors take the { $self: string[], $each: ... } shape ? surface the first $self message.
+  if (fieldErrors !== null && typeof fieldErrors === 'object' && '$self' in fieldErrors) {
+    const $self = (fieldErrors as { $self?: unknown }).$self
+    if (Array.isArray($self)) {
+      return $self[0]
+    }
+  }
+
+  return undefined
+}
+
+function buildMessages(regle: RegleStatusAccessor): Record<string, string | undefined> {
+  return Object.fromEntries(Object.keys(regle.$fields).map(key => [key, toMessage(regle.$errors[key])]))
+}
+
+function mergeMessages(
+  blurMessages: Record<string, string | undefined>,
+  submitMessages: Record<string, string | undefined>
+): Record<string, string | undefined> {
+  const keys = new Set([...Object.keys(blurMessages), ...Object.keys(submitMessages)])
+
+  return Object.fromEntries([...keys].map(key => [key, blurMessages[key] ?? submitMessages[key]]))
+}
+
+const EMPTY_RULES = {}
+
+export function useFormValidation<TData extends Record<string, unknown>>(
+  data: TData,
+  config: FormValidationConfig<TData>
+): UseFormValidationReturn<TData> {
+  // All four useRegle calls must be unconditional — Vue composables cannot be called conditionally.
+  // When a group has no rules, an empty rule tree produces an empty $fields map.
+  // injectCollectionMarkers ensures array fields always have $each declared so Regle produces
+  // the { $self, $each } error shape.
+  const { r$: blurErrors$ } = callUseRegle(data, injectCollectionMarkers(data, config.errors?.onBlur ?? EMPTY_RULES))
+  const { r$: submitErrors$ } = callUseRegle(
+    data,
+    injectCollectionMarkers(data, config.errors?.onSubmit ?? EMPTY_RULES)
+  )
+  const { r$: blurWarnings$ } = callUseRegle(
+    data,
+    injectCollectionMarkers(data, config.warnings?.onBlur ?? EMPTY_RULES)
+  )
+  const { r$: submitWarnings$ } = callUseRegle(
+    data,
+    injectCollectionMarkers(data, config.warnings?.onSubmit ?? EMPTY_RULES)
+  )
+
+  // Cast at the Regle boundary: Regle's inferred types are too complex to thread through
+  // generics here, but the runtime shape is always compatible with RegleStatusAccessor.
+  const blurErrorRegle = blurErrors$ as RegleStatusAccessor
+  const submitErrorRegle = submitErrors$ as RegleStatusAccessor
+  const blurWarningRegle = blurWarnings$ as RegleStatusAccessor
+  const submitWarningRegle = submitWarnings$ as RegleStatusAccessor
+
+  const errors = computed<FormFieldMessages<TData>>(
+    () => mergeMessages(buildMessages(blurErrorRegle), buildMessages(submitErrorRegle)) as FormFieldMessages<TData>
+  )
+
+  const warnings = computed<FormFieldMessages<TData>>(
+    () => mergeMessages(buildMessages(blurWarningRegle), buildMessages(submitWarningRegle)) as FormFieldMessages<TData>
+  )
+
+  async function validate(): Promise<boolean> {
+    // Touch all warning fields so advisory messages become visible regardless of which group they're in.
+    blurWarningRegle.$touch()
+    submitWarningRegle.$touch()
+
+    const [blurResult, submitResult] = await Promise.all([blurErrorRegle.$validate(), submitErrorRegle.$validate()])
+
+    return blurResult.valid && submitResult.valid
+  }
+
+  function reset(): void {
+    blurErrorRegle.$reset()
+    submitErrorRegle.$reset()
+    blurWarningRegle.$reset()
+    submitWarningRegle.$reset()
+  }
+
+  function handleBlur(field: keyof TData): void {
+    const key = field as string
+    // Only touch blur-group fields — submit-group fields stay hidden until validate() is called.
+    blurErrorRegle.$fields[key]?.$touch()
+    blurWarningRegle.$fields[key]?.$touch()
+  }
+
+  function useFieldMetadata(field: keyof TData): () => FormFieldMetadata
+  function useFieldMetadata<E extends Record<string, unknown>>(
+    field: keyof TData,
+    extras: () => E
+  ): () => FormFieldMetadata & E
+  function useFieldMetadata<E extends Record<string, unknown> = Record<string, unknown>>(
+    field: keyof TData,
+    extras?: () => E
+  ) {
+    return () => ({
+      error: errors.value[field],
+      warning: warnings.value[field],
+      onBlur: () => handleBlur(field),
+      ...extras?.(),
+    })
+  }
+
+  return {
+    errors,
+    warnings,
+    validate,
+    reset,
+    handleBlur,
+    useFieldMetadata,
+  }
+}

package/lib/packages/modal/types.ts

@@ -1,5 +1,4 @@
-import type { MaybeRef } from '@vueuse/core'
-import type { Component, ComputedRef, InjectionKey } from 'vue'
+import type { Component, ComputedRef, InjectionKey, MaybeRef } from 'vue'
 
 export type ModalPropsOption<TProps> = {
   [K in keyof TProps]: MaybeRef<TProps[K]>

package/lib/packages/remote-resource/define-remote-resource.ts

@@ -7,7 +7,7 @@ import {
 import type { ResourceContext, UseRemoteResource } from '@core/packages/remote-resource/types.ts'
 import type { VoidFunction } from '@core/types/utility.type.ts'
 import { ifElse } from '@core/utils/if-else.utils.ts'
-import { type MaybeRef, noop, useDebounceFn, useTimeoutPoll } from '@vueuse/core'
+import { noop, useDebounceFn, useTimeoutPoll } from '@vueuse/core'
 import { merge, remove } from 'lodash-es'
 import readNDJSONStream from 'ndjson-readablestream'
 import {
@@ -26,6 +26,7 @@ import {
   toValue,
   watch,
   effectScope,
+  type MaybeRef,
 } from 'vue'
 
 const DEFAULT_CACHE_EXPIRATION_MS = 10_000

package/lib/packages/remote-resource/types.ts

@@ -1,6 +1,4 @@
-import type { MaybeRef } from '@vueuse/core'
-import type { MaybeRefOrGetter } from '@vueuse/shared'
-import type { ComputedRef, EffectScope, Ref, ToRef } from 'vue'
+import type { ComputedRef, EffectScope, MaybeRef, MaybeRefOrGetter, Ref, ToRef } from 'vue'
 
 export type ResourceContext<TArgs extends any[]> = {
   scope: EffectScope