@fifteen/design-system-vue/dist/types/composables/useFieldWithValidation.d.ts

Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System

import { Ref, ComputedRef } from 'vue';
import { ValidationRule } from '../types/forms';
type BaseProps<Value> = {
    modelValue?: Value | null;
    name: string;
    rules?: ValidationRule | ValidationRule[];
    hint?: string;
    errorMessage?: string;
    [key: string]: unknown;
};
export interface UseFieldWithValidationOptions {
    /**
     * Valide the input on component mount
     */
    validateOnMount?: boolean;
    /**
     * Validate the input when model value is updated
     */
    validateOnModelValueUpdate?: boolean;
    /**
     * Internal component rules
     */
    rules?: ValidationRule | ValidationRule[];
}
export interface UseFieldWithValidationReturn<T> {
    /**
     * Function which handles field update, with validation or not
     */
    validate: (e: Event | string | number | boolean | null, shouldValidate?: boolean) => void;
    /**
     * Function which resets field validation
     */
    resetValidation: () => void;
    /**
     * Input field ref value
     */
    value: Ref<T>;
    /**
     * Input hint, coming from props.hint, or props.errorMessage if the validation fails
     */
    hint: Ref<string> | ComputedRef<string>;
    /**
     * Field validation status
     */
    isValid: Ref<boolean> | ComputedRef<boolean>;
}
/**
 * Form related operations management: validation, hint value
 * @param props - Form field component props
 * @param options - Options to override prop names that are looked up by default
 * @returns Field value, hint and validation status
 */
export declare function useFieldWithValidation<Value, Props extends BaseProps<Value> = BaseProps<Value>, Name extends string = 'update:modelValue'>(props: Props, options?: UseFieldWithValidationOptions, emit?: (name: Name, ...args: any[]) => void): UseFieldWithValidationReturn<Value>;
export {};