@code-gorilla-au/vue-forms/dist/use/inputs.d.ts

form authoring light weight framework

import { Ref } from 'vue';
import { MaybeElement } from './refs';
export interface UseInputOpts {
    initModelValue?: string;
    validationRules?: string;
    customValidation?: boolean;
}
/**
 * Use inputs composable governs how we react to input events and validations.
 * use inputs state is readonly unless you wish to override it's validation.
 *
 * @example
 * ```javascript
 * // general use
 * const inputs = useInputs(inputRef);
 *  `<input ref="inputRef" :value="inputs.state.value" @input="inputs.onInput" @input="inputs.onChange" @blur="inputs.onBlur" @focus="inputs.onFocus" @invalid="inputs.onInvalid" />`
 *
 *
 * ```
 *
 * ```javascript
 * // Custom validation, state is no longer read only and limited api provided.
 * // Checking if the input is valid, and it's validation message can be updated by changing the state.
 * const {state} = useInputs(inputRef, { customValidation: true });
 * state.valid = false;
 * state.validationMessage = 'why not work?';
 *  `<input ref="inputRef" :value="inputs.state.value" @input="inputs.onInput" @input="inputs.onChange"  />`
 * ```
 */
export declare function useInputs(inputRef: Ref<MaybeElement>, opts?: UseInputOpts): {
    state: {
        id: string;
        name: string;
        type: string;
        required: boolean;
        readonly: boolean;
        disabled: boolean;
        focused: boolean;
        dirty: boolean;
        valid: boolean;
        validationMessage: string;
        value: string | boolean | object;
        namespace?: string | undefined;
    };
    onInput: (event: Event) => void;
    onChange: (event: Event) => void;
    focusInputRef: () => void;
    onBlur?: undefined;
    onFocus?: undefined;
    onInvalid?: undefined;
} | {
    state: {
        readonly id: string;
        readonly name: string;
        readonly type: string;
        readonly required: boolean;
        readonly readonly: boolean;
        readonly disabled: boolean;
        readonly focused: boolean;
        readonly dirty: boolean;
        readonly valid: boolean;
        readonly validationMessage: string;
        readonly value: string | boolean | object;
        readonly namespace?: string | undefined;
    };
    onInput: (event: Event) => void;
    onChange: (event: Event) => void;
    onBlur: (event: Event) => void;
    onFocus: () => void;
    onInvalid: (event: Event) => void;
    focusInputRef: () => void;
};