@dcodegroup-au/dsg-vue/dist/components/Elements/DsgInput.vue.d.ts

Front-end Vue/Tailwind DSG for UntitledUI.

/**
 * ------------------------------------------------
 *  # Setup: Props
 * ------------------------------------------------
 */
export interface DsgInputCurrencyPair {
    label: string;
    value: string;
    symbol: string;
}
export interface DsgInputPhoneFormat {
    countryCode: string;
    countrySymbol: string;
    format: string;
}
export interface DsgInputValidationPattern {
    pattern: string | RegExp | Function;
    error: string;
}
export type DsgInputTheme = "default" | "phone" | "currency" | "website" | "copy" | "credit-card" | "tags" | "textarea" | "textarea-tags";
export type DsgInputSize = "sm" | "md";
export type DsgInputWidth = "auto" | "full";
export type DsgInputType = "color" | "date" | "datetime" | "email" | "password" | "month" | "number" | "tel" | "text" | "time" | "week" | "textarea";
export type DsgInputTooltipTheme = "light" | "dark";
export interface DsgInputProps {
    label?: string;
    type?: DsgInputType;
    theme?: DsgInputTheme;
    disabled?: boolean;
    icon?: string | null;
    suffixIcon?: string | null;
    size?: DsgInputSize;
    width?: DsgInputWidth;
    tags?: string[];
    hint?: string;
    placeholder?: string;
    name?: string;
    step?: string;
    hasTooltip?: boolean;
    toolTip?: string | undefined;
    min?: number | undefined;
    max?: number | undefined;
    hasClearButton?: boolean;
    tooltipTheme?: DsgInputTooltipTheme;
    autocomplete?: string | undefined;
    currencyPairs?: DsgInputCurrencyPair[];
    phoneFormat?: DsgInputPhoneFormat[];
    websiteHttps?: boolean;
    websiteWww?: boolean;
    validateOnInput?: boolean;
    validateOnLoad?: boolean;
    validationPatterns?: DsgInputValidationPattern[];
    hideHintOnError?: boolean;
    minLength?: number;
    classes?: string;
    errors?: string[] | string;
    hasCopyButton?: boolean;
    preventDefault?: boolean;
    iconClickable?: boolean;
    requiredLabel?: boolean | string;
    allowableCharacters?: string | string[] | RegExp;
    formatter?: Function;
}
type __VLS_Props = DsgInputProps;
type __VLS_PublicProps = {
    modelValue?: any;
} & __VLS_Props;
declare function __VLS_template(): {
    attrs: Partial<{}>;
    slots: {
        'dsg-input--tooltip-content'?(_: {}): any;
    };
    refs: {
        themeInputWrapper: HTMLDivElement;
        creditCardIcon: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../Icons/DsgCreditCardIcon.vue').DsgCreditCardIconProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
            P: {};
            B: {};
            D: {};
            C: {};
            M: {};
            Defaults: {};
        }, Readonly<import('../Icons/DsgCreditCardIcon.vue').DsgCreditCardIconProps> & Readonly<{}>, {}, {}, {}, {}, {}> | null;
        themeInputEl: HTMLTextAreaElement;
        dsgInputTooltipWrapper: HTMLSpanElement;
        dsgInputClearButtonWrapper: HTMLButtonElement;
    };
    rootEl: HTMLDivElement;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {
    focus: (isFocused?: boolean) => void;
    validate: () => void;
    callbackValidation: (callback: Function) => void;
    setErrors: (errors: string[]) => void;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
    "update:modelValue": (value: any) => any;
} & {
    "update:modelValue": (newValue: string, oldValue: string) => any;
    "update:model-value": (newValue: string, oldValue: string) => any;
    "on-focus": (el: HTMLElement) => any;
    "on-suffix-icon-clicked": (value: string) => any;
    "on-before-focus": (el: HTMLElement) => any;
    "on-before-off-focus": (el: HTMLElement) => any;
    "off-focus": (el: HTMLElement) => any;
    "on-before-copy": (value: string) => any;
    "on-copy": (value: string) => any;
    "on-before-clear": (value: string) => any;
    "on-clear": (oldValue: string) => any;
    "on-before-format": (oldValue: string, newValue: string) => any;
    "on-format": (value: string) => any;
    "on-before-validate": (value: string) => any;
    "on-validate": (inputErrors: string[]) => any;
    "on-card-detected": (detectedType: string | false) => any;
    "enter-pressed": (value: string) => any;
    "on-keydown": (char: string, value: string) => any;
    "on-keyup": (char: string, value: string) => any;
    "on-keypress": (char: string, value: string) => any;
    "icon-clicked": (value: string) => any;
}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
    "onUpdate:modelValue"?: ((newValue: string, oldValue: string) => any) | undefined;
    "onUpdate:model-value"?: ((newValue: string, oldValue: string) => any) | undefined;
    "onOn-focus"?: ((el: HTMLElement) => any) | undefined;
    "onOn-suffix-icon-clicked"?: ((value: string) => any) | undefined;
    "onOn-before-focus"?: ((el: HTMLElement) => any) | undefined;
    "onOn-before-off-focus"?: ((el: HTMLElement) => any) | undefined;
    "onOff-focus"?: ((el: HTMLElement) => any) | undefined;
    "onOn-before-copy"?: ((value: string) => any) | undefined;
    "onOn-copy"?: ((value: string) => any) | undefined;
    "onOn-before-clear"?: ((value: string) => any) | undefined;
    "onOn-clear"?: ((oldValue: string) => any) | undefined;
    "onOn-before-format"?: ((oldValue: string, newValue: string) => any) | undefined;
    "onOn-format"?: ((value: string) => any) | undefined;
    "onOn-before-validate"?: ((value: string) => any) | undefined;
    "onOn-validate"?: ((inputErrors: string[]) => any) | undefined;
    "onOn-card-detected"?: ((detectedType: string | false) => any) | undefined;
    "onEnter-pressed"?: ((value: string) => any) | undefined;
    "onOn-keydown"?: ((char: string, value: string) => any) | undefined;
    "onOn-keyup"?: ((char: string, value: string) => any) | undefined;
    "onOn-keypress"?: ((char: string, value: string) => any) | undefined;
    "onIcon-clicked"?: ((value: string) => any) | undefined;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
    themeInputWrapper: HTMLDivElement;
    creditCardIcon: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../Icons/DsgCreditCardIcon.vue').DsgCreditCardIconProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
        P: {};
        B: {};
        D: {};
        C: {};
        M: {};
        Defaults: {};
    }, Readonly<import('../Icons/DsgCreditCardIcon.vue').DsgCreditCardIconProps> & Readonly<{}>, {}, {}, {}, {}, {}> | null;
    themeInputEl: HTMLTextAreaElement;
    dsgInputTooltipWrapper: HTMLSpanElement;
    dsgInputClearButtonWrapper: HTMLButtonElement;
}, HTMLDivElement>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};