@nextcloud/vue/dist/components/NcInputField/NcInputField.vue.d.ts

Nextcloud vue components

import { Slot } from 'vue';
import { VueClassType } from '../../utils/VueTypes.ts';
export interface NcInputFieldProps {
    /**
     * Class to add to the root component.
     */
    class?: VueClassType;
    /**
     * Class to add to the input field.
     * Necessary to use NcInputField in the NcActionInput component.
     */
    inputClass?: VueClassType;
    /**
     * HTML id of the input field
     */
    id?: string;
    /**
     * The input label, always provide one for accessibility purposes.
     * On Nextcloud before version 32 this will also be used as a placeholder unless the placeholder
     * prop is populated with a different string.
     *
     * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).
     */
    label?: string;
    /**
     * Pass in true if you want to use an external label. This is useful
     * if you need a label that looks different from the one provided by
     * this component
     */
    labelOutside?: boolean;
    /**
     * The type of the input element
     */
    type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search' | 'number';
    /**
     * The placeholder of the input.
     * On Nextcloud before version 32 this would default to the `label` prop.
     * On Nextcloud 32 and on v9 of this library it will no longer have a default value.
     */
    placeholder?: string;
    /**
     * Controls whether to display the trailing button.
     */
    showTrailingButton?: boolean;
    /**
     * Label of the trailing button
     *
     * Required when showTrailingButton is set
     */
    trailingButtonLabel?: string;
    /**
     * Toggles the success state of the component. Adds a checkmark icon.
     */
    success?: boolean;
    /**
     * Toggles the error state of the component. Adds an error icon.
     */
    error?: boolean;
    /**
     * Additional helper text message
     *
     * This will be displayed beneath the input field. In case the field is
     * also marked as having an error, the text will be displayed in red.
     */
    helperText?: string;
    /**
     * Disable the input field
     */
    disabled?: boolean;
    /**
     * Specifies whether the input should have a pill form.
     * By default, input has rounded corners.
     */
    pill?: boolean;
}
type __VLS_Props = NcInputFieldProps;
/**
 * Focus the input element
 *
 * @param options - Focus options
 * @public
 */
declare function focus(options?: FocusOptions): void;
/**
 * Select all the text in the input
 *
 * @public
 */
declare function select(): void;
type __VLS_PublicProps = {
    modelValue: string | number;
} & __VLS_Props;
declare function __VLS_template(): {
    attrs: Partial<{}>;
    slots: Readonly<{
        /**
         * Leading icon, set the size to 20.
         */
        icon?: Slot;
        /**
         * Icon for the trailing button.
         */
        'trailing-button-icon'?: Slot;
    }> & {
        /**
         * Leading icon, set the size to 20.
         */
        icon?: Slot;
        /**
         * Icon for the trailing button.
         */
        'trailing-button-icon'?: Slot;
    };
    refs: {
        input: HTMLInputElement;
    };
    rootEl: any;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {
    focus: typeof focus;
    select: typeof select;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
    "update:modelValue": (value: string | number) => any;
    trailingButtonClick: (event: MouseEvent) => any;
}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
    onTrailingButtonClick?: ((event: MouseEvent) => any) | undefined;
}>, {
    id: string;
    type: "text" | "password" | "email" | "tel" | "url" | "search" | "number";
    label: string;
    class: VueClassType;
    inputClass: VueClassType;
    placeholder: string;
    trailingButtonLabel: string;
    helperText: string;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
    input: HTMLInputElement;
}, any>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};