radix-vue/dist/PinInput/PinInputRoot.d.ts

Vue port for Radix UI Primitives.

import { type ComputedRef, type Ref } from 'vue';
import type { PrimitiveProps } from '../Primitive';
import type { Direction } from '../shared/types';
export type PinInputRootEmits = {
    'update:modelValue': [value: string[]];
    'complete': [value: string[]];
};
export interface PinInputRootProps extends PrimitiveProps {
    modelValue?: string[];
    defaultValue?: string[];
    placeholder?: string;
    mask?: boolean;
    otp?: boolean;
    type?: 'text' | 'number';
    dir?: Direction;
    name?: string;
    disabled?: boolean;
    required?: boolean;
    id?: string;
}
export interface PinInputRootContext {
    modelValue: Ref<string[]>;
    mask: Ref<boolean>;
    otp: Ref<boolean>;
    placeholder: Ref<string>;
    type: Ref<PinInputRootProps['type']>;
    dir: Ref<Direction>;
    disabled: Ref<boolean>;
    isCompleted: ComputedRef<boolean>;
    inputElements?: Ref<Set<HTMLInputElement>>;
    onInputElementChange: (el: HTMLInputElement) => void;
}
export declare const injectPinInputRootContext: <T extends PinInputRootContext | null | undefined = PinInputRootContext>(fallback?: T | undefined) => T extends null ? PinInputRootContext | null : PinInputRootContext, providePinInputRootContext: (contextValue: PinInputRootContext) => PinInputRootContext;
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
    mask: {
        type: import("vue").PropType<boolean>;
    };
    dir: {
        type: import("vue").PropType<Direction>;
    };
    disabled: {
        type: import("vue").PropType<boolean>;
    };
    type: {
        type: import("vue").PropType<"number" | "text">;
        default: string;
    };
    name: {
        type: import("vue").PropType<string>;
    };
    asChild: {
        type: import("vue").PropType<boolean>;
    };
    as: {
        type: import("vue").PropType<import('../Primitive').AsTag | import("vue").Component>;
    };
    defaultValue: {
        type: import("vue").PropType<string[]>;
    };
    id: {
        type: import("vue").PropType<string>;
    };
    required: {
        type: import("vue").PropType<boolean>;
    };
    modelValue: {
        type: import("vue").PropType<string[]>;
    };
    placeholder: {
        type: import("vue").PropType<string>;
        default: string;
    };
    otp: {
        type: import("vue").PropType<boolean>;
    };
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
    complete: (value: string[]) => void;
    "update:modelValue": (value: string[]) => void;
}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    mask: {
        type: import("vue").PropType<boolean>;
    };
    dir: {
        type: import("vue").PropType<Direction>;
    };
    disabled: {
        type: import("vue").PropType<boolean>;
    };
    type: {
        type: import("vue").PropType<"number" | "text">;
        default: string;
    };
    name: {
        type: import("vue").PropType<string>;
    };
    asChild: {
        type: import("vue").PropType<boolean>;
    };
    as: {
        type: import("vue").PropType<import('../Primitive').AsTag | import("vue").Component>;
    };
    defaultValue: {
        type: import("vue").PropType<string[]>;
    };
    id: {
        type: import("vue").PropType<string>;
    };
    required: {
        type: import("vue").PropType<boolean>;
    };
    modelValue: {
        type: import("vue").PropType<string[]>;
    };
    placeholder: {
        type: import("vue").PropType<string>;
        default: string;
    };
    otp: {
        type: import("vue").PropType<boolean>;
    };
}>> & {
    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
    onComplete?: ((value: string[]) => any) | undefined;
}, {
    type: "number" | "text";
    placeholder: string;
}, {}>, {
    default?(_: {
        modelValue: string[];
    }): any;
}>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};