@dynamicforms/vuetify-inputs/dist/index.d.ts

Visual components for data entry using @dynamicforms/vue-forms

import { Action as Action_2 } from '@dynamicforms/vue-forms';
import { ActionValue } from '@dynamicforms/vue-forms';
import { App } from 'vue';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { ComputedRef } from 'vue';
import { CreateComponentPublicInstanceWithMixins } from 'vue';
import { default as default_2 } from '@dynamicforms/vue-forms';
import { DefaultInputSlot } from 'vuetify/lib/components/VField/VField';
import { DefineComponent } from 'vue';
import { Editor } from '@ckeditor/ckeditor5-core';
import { GlobalComponents } from 'vue';
import { GlobalDirectives } from 'vue';
import { IField } from '@dynamicforms/vue-forms';
import { IFieldConstructorParams } from '@dynamicforms/vue-forms';
import { MaybeRef } from 'vue';
import { PublicProps } from 'vue';
import { Ref } from 'vue';
import { useDisplay } from 'vuetify';
import { ValidationError } from '@dynamicforms/vue-forms';
import { VAutocomplete } from 'vuetify/components/VAutocomplete';
import { VBtn } from 'vuetify/components/VBtn';
import { VCheckbox } from 'vuetify/components/VCheckbox';
import { VChip } from 'vuetify/components/VChip';
import { VCol } from 'vuetify/components/VGrid';
import { VColorPicker } from 'vuetify/components/VColorPicker';
import { VCombobox } from 'vuetify/components/VCombobox';
import { VConfirmEdit } from 'vuetify/components/VConfirmEdit';
import { VDatePicker } from 'vuetify/components/VDatePicker';
import { VField } from 'vuetify/components/VField';
import { VFileInput } from 'vuetify/components/VFileInput';
import { VIcon } from 'vuetify/components/VIcon';
import { VImg } from 'vuetify/components/VImg';
import { VInput } from 'vuetify/components/VInput';
import { VListItem } from 'vuetify/components/VList';
import { VMenu } from 'vuetify/components/VMenu';
import { VNumberInput } from 'vuetify/components/VNumberInput';
import { VProgressLinear } from 'vuetify/components/VProgressLinear';
import { VRow } from 'vuetify/components/VGrid';
import { VSelect } from 'vuetify/components/VSelect';
import { VSwitch } from 'vuetify/components/VSwitch';
import { VTextarea } from 'vuetify/components/VTextarea';
import { VTextField } from 'vuetify/components/VTextField';
import { VTimePicker } from 'vuetify/labs/VTimePicker';
import { WritableComputedRef } from 'vue';

declare const __VLS_component: DefineComponent<DfSelectProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
"update:modelValue": (value: any) => any;
"click:clear": () => any;
"update:modelValueDisplay": (value: SelectChoice[]) => any;
}, string, PublicProps, Readonly<DfSelectProps> & Readonly<{
"onUpdate:modelValue"?: ((value: any) => any) | undefined;
"onClick:clear"?: (() => any) | undefined;
"onUpdate:modelValueDisplay"?: ((value: SelectChoice[]) => any) | undefined;
}>, {
enabled: boolean;
clearable: boolean;
allowNull: boolean;
choices: SelectChoice[];
multiple: boolean;
allowTags: boolean;
fetchChoices: SelectFetchChoices;
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;

declare const __VLS_component_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
"update:modelValue": (value: any) => any;
"click:clear": () => any;
blur: () => any;
}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{
"onUpdate:modelValue"?: ((value: any) => any) | undefined;
"onClick:clear"?: (() => any) | undefined;
onBlur?: (() => any) | undefined;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;

declare type __VLS_Props = {
    data?: DefaultInputSlot & {
        label?: string;
    };
    label: Label;
};

declare type __VLS_Props_2 = BaseProps & {
    loading?: boolean;
};

declare function __VLS_template(): {
    attrs: Partial<{}>;
    slots: Readonly<{
        'append-inner'?: (props: any) => any;
        'prepend-inner'?: (props: any) => any;
    }> & {
        'append-inner'?: (props: any) => any;
        'prepend-inner'?: (props: any) => any;
    };
    refs: {};
    rootEl: any;
};

declare function __VLS_template_2(): {
    attrs: Partial<{}>;
    slots: {
        default?(_: {
            props: Record<string, unknown>;
            isActive: Ref<boolean>;
            isFocused: Ref<boolean>;
            controlRef: Ref<HTMLElement | undefined>;
            focus: () => void;
            blur: () => void;
        }): any;
        loader?(_: {
            color: string | undefined;
            isActive: boolean;
        }): any;
        'prepend-inner'?(_: {
            isActive: Ref<boolean>;
            isFocused: Ref<boolean>;
            controlRef: Ref<HTMLElement | undefined>;
            focus: () => void;
            blur: () => void;
        }): any;
        prepend?(_: {
            id: ComputedRef<string>;
            messagesId: ComputedRef<string>;
            isDirty: ComputedRef<boolean>;
            isDisabled: ComputedRef<boolean>;
            isReadonly: ComputedRef<boolean>;
            isPristine: Ref<boolean>;
            isValid: ComputedRef<boolean | null>;
            isValidating: Ref<boolean>;
            reset: () => void;
            resetValidation: () => void;
            validate: () => void;
        }): any;
    };
    refs: {};
    rootEl: any;
};

declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;

declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;

declare type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};

declare type __VLS_WithTemplateSlots_2<T, S> = T & {
    new (): {
        $slots: S;
    };
};

export declare class Action extends Action_2<ActionBreakpointOptions> {
    static create<T extends ActionBreakpointOptions = ActionBreakpointOptions>(params?: Partial<IFieldConstructorParams<T>>): Action;
    getBreakpointValue(breakpoint: Ref<BreakpointNames>): ComputedRef<ActionRenderOptions>;
    get name(): string | undefined;
    get label(): string | undefined;
    get showLabel(): boolean | undefined;
    get icon(): string | undefined;
    get showIcon(): boolean | undefined;
    get renderAs(): ActionDisplayStyle | undefined;
    static closeAction(data?: Partial<IField<ActionBreakpointOptions>>): Action;
    static yesAction(data?: Partial<IField<ActionBreakpointOptions>>): Action;
    static noAction(data?: Partial<IField<ActionBreakpointOptions>>): Action;
}

export declare type ActionBreakpointOptions = BreakpointsJSON<ActionRenderOptions>;

/**
 * DisplayMode enum provides an enumeration for supported ways of rendering a particular object in the DOM
 */
export declare enum ActionDisplayStyle {
    BUTTON = 0,// action should render as a button
    TEXT = 1
}

export declare namespace ActionDisplayStyle {
    export function fromString(mode: string): ActionDisplayStyle;
    export function fromAny(mode: any): ActionDisplayStyle;
    export function isDefined(mode: number | string): boolean;
}

export declare interface ActionRenderOptions extends ActionValue {
    name?: string;
    renderAs?: ActionDisplayStyle;
    showLabel?: boolean;
    showIcon?: boolean;
}

export declare interface BaseEmits<T = any> {
    (e: 'update:modelValue', value: T): void;
    (e: 'click:clear'): void;
}

export declare interface BaseProps<T = any> {
    control?: default_2.IField<T>;
    modelValue?: T;
    label?: string | Label;
    errors?: string[];
    placeholder?: string;
    helpText?: string;
    hint?: string;
    enabled?: boolean;
    visibility?: default_2.DisplayMode;
    cssClass?: string;
    clearable?: boolean;
}

export declare type BreakpointNames = typeof responsiveBreakpoints[number];

export declare type BreakpointsJSON<T extends Record<string, any>> = T & Partial<Record<BreakpointNames, T>>;

export declare const defaultBaseProps: {
    enabled: undefined;
    clearable: boolean;
};

export declare const defaultDisplayStyle = ActionDisplayStyle.BUTTON;

export declare const DfActions: DefineComponent<DfActionsProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DfActionsProps> & Readonly<{}>, {
buttonSize: string | number;
showAsGroup: "no" | "grouped" | "grouped-no-borders";
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;

declare interface DfActionsProps {
    actions: MaybeRef<Action[]>;
    buttonSize?: string | number;
    showAsGroup?: ShowAsGroup;
}

export declare const DfCheckbox: DefineComponent<DfCheckboxProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
"update:modelValue": (value: any) => any;
"click:clear": () => any;
}, string, PublicProps, Readonly<DfCheckboxProps> & Readonly<{
"onUpdate:modelValue"?: ((value: any) => any) | undefined;
"onClick:clear"?: (() => any) | undefined;
}>, {
enabled: boolean;
clearable: boolean;
allowNull: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;

declare interface DfCheckboxProps extends BaseProps {
    allowNull?: boolean;
}

export declare const DfColor: DefineComponent<DfColorProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
"update:modelValue": (value: any) => any;
"click:clear": () => any;
}, string, PublicProps, Readonly<DfColorProps> & Readonly<{
"onUpdate:modelValue"?: ((value: any) => any) | undefined;
"onClick:clear"?: (() => any) | undefined;
}>, {
enabled: boolean;
clearable: boolean;
allowNull: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;

declare interface DfColorProps extends BaseProps {
    allowNull?: boolean;
}

export declare const DfDateTime: DefineComponent<DfDateTimeProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
"update:modelValue": (value: any) => any;
"click:clear": () => any;
}, string, PublicProps, Readonly<DfDateTimeProps> & Readonly<{
"onUpdate:modelValue"?: ((value: any) => any) | undefined;
"onClick:clear"?: (() => any) | undefined;
}>, {
enabled: boolean;
clearable: boolean;
inputType: "datetime" | "date" | "time";
displayFormatDate: string;
displayFormatTime: string;
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;

declare interface DfDateTimeProps extends BaseProps {
    inputType?: 'datetime' | 'date' | 'time';
    displayFormatDate?: string;
    displayFormatTime?: string;
}

export declare const DfFile: DefineComponent<DfFileProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
"update:modelValue": (value: any) => any;
"click:clear": () => any;
}, string, PublicProps, Readonly<DfFileProps> & Readonly<{
"onUpdate:modelValue"?: ((value: any) => any) | undefined;
"onClick:clear"?: (() => any) | undefined;
}>, {
enabled: boolean;
clearable: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;

declare interface DfFileProps extends BaseProps {
    comms: FileComms;
}

export declare const DfInput: DefineComponent<DfInputProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
"update:modelValue": (value: any) => any;
"click:clear": () => any;
}, string, PublicProps, Readonly<DfInputProps> & Readonly<{
"onUpdate:modelValue"?: ((value: any) => any) | undefined;
"onClick:clear"?: (() => any) | undefined;
}>, {
enabled: boolean;
clearable: boolean;
inputType: "text" | "password" | "email" | "url" | "number";
precision: number | null;
step: number;
min: number;
max: number;
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;

export declare namespace DfInputComponentProps {
    export {
        DfActionsProps,
        DfCheckboxProps,
        DfColorProps,
        DfDateTimeProps,
        DfFileProps,
        DfInputProps,
        DfRtfEditorProps,
        DfSelectProps,
        DfTextAreaProps
    }
}

export declare namespace DfInputComponents {
    export {
        DfActions,
        DfCheckbox,
        DfColor,
        DfDateTime,
        DfFile,
        DfInput,
        DfRtfEditor,
        DfSelect,
        DfTextArea
    }
}

declare interface DfInputProps extends BaseProps {
    inputType?: 'text' | 'password' | 'email' | 'url' | 'number';
    precision?: number | null;
    step?: number;
    min?: number;
    max?: number;
}

export declare const DfLabel: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;

export declare const DfRtfEditor: DefineComponent<DfRtfEditorProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
"update:modelValue": (value: any) => any;
"click:clear": () => any;
}, string, PublicProps, Readonly<DfRtfEditorProps> & Readonly<{
"onUpdate:modelValue"?: ((value: any) => any) | undefined;
"onClick:clear"?: (() => any) | undefined;
}>, {
minHeight: string;
enabled: boolean;
clearable: boolean;
}, {}, {}, {}, string, ComponentProvideOptions, false, {
$editor: CreateComponentPublicInstanceWithMixins<Readonly<{
modelValue: string;
minHeight?: string;
disabled?: boolean;
}> & Readonly<{
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
}>, {
onEditorReady: (editorReady: Editor) => void;
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
"update:modelValue": (value: string) => any;
}, PublicProps, {
disabled: boolean;
minHeight: string;
modelValue: string;
}, false, {}, {}, GlobalComponents, GlobalDirectives, string, {
editorElement: HTMLDivElement;
}, HTMLDivElement, ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<{
modelValue: string;
minHeight?: string;
disabled?: boolean;
}> & Readonly<{
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
}>, {
onEditorReady: (editorReady: Editor) => void;
}, {}, {}, {}, {
disabled: boolean;
minHeight: string;
modelValue: string;
}> | null;
}, any>;

declare interface DfRtfEditorProps extends BaseProps {
    minHeight?: string;
}

export declare const DfSelect: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

declare interface DfSelectProps extends BaseProps {
    choices?: SelectChoice[];
    multiple?: boolean;
    allowTags?: boolean;
    allowNull?: boolean;
    fetchChoices?: SelectFetchChoices;
}

export declare const DfTextArea: DefineComponent<DfTextAreaProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
"update:modelValue": (value: any) => any;
"click:clear": () => any;
}, string, PublicProps, Readonly<DfTextAreaProps> & Readonly<{
"onUpdate:modelValue"?: ((value: any) => any) | undefined;
"onClick:clear"?: (() => any) | undefined;
}>, {
enabled: boolean;
clearable: boolean;
rows: number;
maxRows: number;
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;

declare interface DfTextAreaProps extends BaseProps {
    rows?: number;
    maxRows?: number;
}

export declare const DynamicFormsInputs: {
    install: (app: App, options?: Partial<DynamicFormsInputsOptions>) => void;
};

export declare interface DynamicFormsInputsOptions extends VuetifyInputsSettings {
    registerComponents: boolean;
    registerVuetifyComponents: boolean;
}

export declare interface FileComms {
    /**
     * upload is called when a file is added to the input and needs to be uploaded to the backend for storage
     * the component will then set its modelValue to the file identifier returned by this function. when the form
     * is posted, only the identifier will be sent to the backend
     *
     * the method may throw an exception which will mean upload failure
     *
     * @param file the file to be uploaded
     * @param progressCallback callback function to call with current upload progress data.
     *  See e.g. axios onUploadProgress for axios post method
     * @return file id
     */
    upload: (file: File, progressCallback?: FileProgressCallback) => Promise<string>;
    /**
     * delete is called when the file is removed from the input and needs to be deleted at the backend
     * @param fileIdentifier the identifier that was returned by upload
     */
    delete: (fileIdentifier: string) => Promise<void>;
    /**
     * touch is called once per minute to let the backend know that the file is still in play and must not be discarded
     * @param fileIdentifier the identifier that was returned by upload
     */
    touch: (fileIdentifier: string) => Promise<void>;
}

export declare type FileProgressCallback = (loaded: number, total: number) => void;

export declare function getBreakpointName(dp: ReturnType<typeof useDisplay>): BreakpointNames;

export declare const InputBase: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;

export declare class Label {
    text: string;
    icon?: string | undefined;
    iconComponent: string;
    constructor(text: string, icon?: string | undefined, iconComponent?: string);
}

export declare const MessagesWidget: DefineComponent<Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;

declare interface Props {
    errors: ValidationError[];
    message: string;
}

export declare class ResponsiveActionRenderOptions extends ResponsiveRenderOptions<ActionRenderOptions> {
    protected cleanBreakpoint(bp?: ActionRenderOptions, defaultIfEmpty?: boolean): ActionRenderOptions | null;
}

export declare const responsiveBreakpoints: readonly ["xs", "sm", "md", "lg", "xl"];

export declare abstract class ResponsiveRenderOptions<T extends Record<string, any>> {
    protected readonly _value: BreakpointsJSON<T>;
    constructor(data?: BreakpointsJSON<T>);
    getOptionsForBreakpoint(breakpoint: BreakpointNames): T;
    protected abstract cleanBreakpoint(bp?: T, defaultIfEmpty?: boolean): T | null;
}

export declare interface SelectChoice {
    id: any;
    text: any;
    icon?: string;
}

export declare type SelectFetchChoices<T1 = any, T2 = any> = (queryValue?: T1, idValue?: T2) => Promise<SelectChoice[]>;

declare type ShowAsGroup = 'no' | 'grouped' | 'grouped-no-borders';

export declare const translatableStrings: {
    Yes: string;
    No: string;
    Close: string;
};

export declare function translateStrings(translationCallback: (s: string) => string): void;

export declare function useBreakpoint(): ComputedRef<"xs" | "sm" | "md" | "lg" | "xl">;

export declare function useInputBase<T = any>(props: BaseProps<T>, emit: BaseEmits<T>): {
    value: WritableComputedRef<T, T>;
    valid: ComputedRef<boolean>;
    enabled: ComputedRef<boolean>;
    errors: ComputedRef<default_2.ValidationError[]>;
    visibility: ComputedRef<default_2.DisplayMode>;
    label: ComputedRef<Label>;
    touched: Ref<boolean, boolean>;
    vuetifyBindings: ComputedRef<    {
    name: string | undefined;
    class: string;
    density: "default";
    variant: "underlined";
    label: string;
    messages: string | undefined;
    errorMessages: string | undefined;
    readonly: boolean;
    disabled: boolean;
    placeholder: string;
    'persistent-placeholder': boolean;
    hint: string;
    persistentHint: boolean;
    hideDetails: boolean | "auto" | undefined;
    helpText: string;
    }>;
};

export declare namespace VuetifyComponents {
    export {
        VAutocomplete,
        VBtn,
        VCheckbox,
        VChip,
        VCombobox,
        VColorPicker,
        VConfirmEdit,
        VDatePicker,
        VField,
        VFileInput,
        VRow,
        VCol,
        VIcon,
        VImg,
        VInput,
        VListItem,
        VMenu,
        VNumberInput,
        VProgressLinear,
        VSelect,
        VSwitch,
        VTextarea,
        VTextField,
        VTimePicker
    }
}

export declare interface VuetifyInputsSettings {
    defaultVariant?: 'outlined' | 'plain' | 'underlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled';
}

export declare const vuetifyInputsSettingsKey: unique symbol;

export { }