maz-ui/components/MazInput.d.ts

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import type { Color, Icon, ModelValueSimple, Size } from './types';
import { type HTMLAttributes } from 'vue';
export interface Props<T = ModelValueSimple> {
    /** The style of the component */
    style?: HTMLAttributes['style'];
    /** The class of the component */
    class?: HTMLAttributes['class'];
    /**
     * The value of the input
     * @model
     */
    modelValue?: T | undefined;
    /** The placeholder of the input */
    placeholder?: string;
    /**
     * The label of the component
     * This label will be displayed inside the input and will be up when the input is focused
     */
    label?: string;
    /**
     * The top label of the component
     * This label will be displayed above the input
     */
    topLabel?: string;
    /**
     * The additional text of the component
     * This text will be displayed below the input
     */
    assistiveText?: string;
    /** The attribut name of the input */
    name?: string;
    /** The color of the component */
    color?: Color;
    /** The attribut type of the input */
    type?: 'text' | 'date' | 'number' | 'tel' | 'search' | 'url' | 'password' | 'month' | 'time' | 'week' | 'email';
    /** The attribut required of the input */
    required?: boolean;
    /** The attribut disabled of the input */
    disabled?: boolean;
    /** The attribut readonly of the input */
    readonly?: boolean;
    /** The attribut id of the input */
    id?: string;
    /** Enable error state UI */
    error?: boolean;
    /** Enable success state UI */
    success?: boolean;
    /** Enable warning state UI */
    warning?: boolean;
    /** The hint will replace the label */
    hint?: string;
    /** The class of the input wrapper div element */
    inputClasses?: string;
    /** Remove the border of the input */
    noBorder?: boolean;
    /** Remove the radius of the input */
    noRadius?: boolean;
    /** The attribut inputmode of the input */
    inputmode?: HTMLAttributes['inputmode'];
    /** The size of the component */
    size?: Size;
    /** Enable debounce on input - can be `boolean | number`, if it is a number, it is used for the debounce delay */
    debounce?: boolean | number;
    /**
     * The delay of the debounce
     * @deprecated use debounce instead
     */
    debounceDelay?: number;
    /** Display the valid button - this button has type="submit"  */
    validButton?: boolean;
    /** Display the loading state on the valid button */
    validButtonLoading?: boolean;
    /** if true the input will be focus on render */
    autoFocus?: boolean;
    /** if true the component has the colorized border by default, not only on focus */
    borderActive?: boolean;
    /**
     * The left icon of the input
     * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`
     */
    leftIcon?: string | Icon;
    /**
     * The right icon of the input
     * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`
     */
    rightIcon?: string | Icon;
    /**
     * Size radius of the component's border
     * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`
     */
    roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
    /** The input will be displayed in full width */
    block?: boolean;
    /** The attribut autocomplete of the input */
    autocomplete?: string;
}
export type { Color, ModelValueSimple, Size } from './types';
declare const _default: <T extends ModelValueSimple>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
        readonly onInput?: ((event: Event) => any) | undefined;
        readonly onBlur?: ((event: Event) => any) | undefined;
        readonly onChange?: ((event: Event) => any) | undefined;
        readonly onClick?: ((event: Event) => any) | undefined;
        readonly onFocus?: ((event: Event) => any) | undefined;
        readonly "onUpdate:model-value"?: ((value?: T | undefined) => any) | undefined;
    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onInput" | "onClick" | "onUpdate:model-value"> & Partial<{}> & Props<T>> & import("vue").PublicProps;
    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
    attrs: any;
    slots: {
        "left-icon"?(_: {}): any;
        "right-icon"?(_: {}): any;
        "valid-button"?(_: {}): any;
    };
    emit: ((evt: "input", event: Event) => void) & ((evt: "blur", event: Event) => void) & ((evt: "change", event: Event) => void) & ((evt: "click", event: Event) => void) & ((evt: "focus", event: Event) => void) & ((evt: "update:model-value", value?: T | undefined) => void);
}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
}> & {
    __ctx?: Awaited<typeof __VLS_setup>;
};
export default _default;
type __VLS_PrettifyLocal<T> = {
    [K in keyof T]: T[K];
} & {};