@wdns/vuetify-stepper-form/dist/plugin/types/index.d.ts

The Vuetify Stepper Form plugin provides a structured way to create multi-step forms using Vue 3, TypeScript, and Vuetify. It features a stepper layout that allows users to navigate between steps with form validation. The plugin is customizable and stream

import { FieldValidator, FormValidationResult, GenericObject } from 'vee-validate';
import { App, MaybeRef } from 'vue';
import { VBtn, VStepper, VStepperItem, VStepperWindowItem, VTooltip } from 'vuetify/components';
import { ValidationRule } from 'vuetify/composables/validation';
import { SelectItemKey } from 'vuetify/lib/util/helpers';
import { Schema } from 'yup';
import { ZodSchema } from 'zod';
import { default as VStepperForm } from '../VStepperForm.vue';
export * from '../index';
declare global {
    interface KeyStringAny<T = any> {
        [key: string]: T;
    }
    type ValidateAction = 'blur' | 'change' | 'click' | 'input' | 'page' | 'submit';
    type ValidateFieldResult = FieldValidator<GenericObject>;
    type ValidateResult = FormValidationResult<GenericObject, GenericObject>;
    type FieldValidateResult = () => Promise<Partial<FieldValidator<GenericObject>>>;
}
export type GlobalDensity = null | 'default' | 'comfortable' | 'compact' | 'expanded' | 'oversized';
export type GlobalVariant = 'filled' | 'underlined' | 'outlined' | 'plain' | 'solo' | 'solo-inverted' | 'solo-filled';
export type GlobalHideDetails = boolean | 'auto' | undefined;
export type GlobalClosableChips = boolean;
export type GlobalCloseText = string;
export type GlobalChips = boolean;
export type GlobalMultiple = boolean;
interface VStepperWindowItemProps {
    transition?: VStepperWindowItem['transition'];
}
export interface ResponsiveColumns {
    sm?: number | string;
    md?: number | string;
    lg?: number | string;
    xl?: number | string;
}
export interface Field {
    autoPage?: Props['autoPage'];
    autoPageDelay?: Props['autoPageDelay'];
    class?: string;
    clearable?: boolean;
    color?: Props['color'];
    columns?: Props['fieldColumns'];
    density?: GlobalDensity;
    disabled?: boolean | ((value: any) => boolean);
    error?: boolean;
    errorMessages?: string | string[];
    hidden?: boolean;
    hideDetails?: GlobalHideDetails;
    id?: string | number;
    inline?: boolean;
    inlineSpacing?: string;
    itemTitle?: SelectItemKey<any>;
    itemValue?: SelectItemKey<any>;
    items?: readonly any[] | undefined;
    label?: string;
    labelPositionLeft?: boolean;
    name: string;
    options?: KeyStringAny;
    required?: boolean | undefined;
    rules?: ValidationRule;
    text?: string;
    type?: FieldTypes;
    validateOn?: 'blur' | 'change' | 'click' | 'input';
    when?: (value: any) => boolean;
}
export interface Page {
    autoPage?: boolean;
    editable?: VStepperItem['editable'];
    error?: boolean;
    fields?: Field[];
    isSummary?: boolean;
    pageFieldColumns?: ResponsiveColumns;
    text?: string;
    title?: string;
    visible?: boolean;
    when?: (value: any) => boolean;
}
export interface Props extends VStepperWindowItemProps {
    altLabels?: VStepper['altLabels'];
    bgColor?: VStepper['bgColor'];
    border?: VStepper['border'];
    disabled?: VStepper['disabled'];
    editIcon?: VStepper['editIcon'];
    elevation?: VStepper['elevation'];
    flat?: VStepper['flat'];
    height?: VStepper['height'];
    hideActions?: VStepper['hideActions'];
    maxHeight?: VStepper['maxHeight'];
    maxWidth?: VStepper['maxWidth'];
    minHeight?: VStepper['minHeight'];
    minWidth?: VStepper['minWidth'];
    nextText?: VStepper['nextText'];
    prevText?: VStepper['prevText'];
    rounded?: VStepper['rounded'];
    selectedClass?: VStepper['selectedClass'];
    tag?: VStepper['tag'];
    theme?: VStepper['theme'];
    tile?: VStepper['tile'];
    pages: Page[];
    validationSchema?: Schema<any> | ZodSchema;
    autoPage?: boolean;
    autoPageDelay?: number;
    color?: string | undefined;
    density?: GlobalDensity;
    direction?: 'horizontal' | 'vertical';
    editable?: VStepperItem['editable'];
    errorIcon?: VStepperItem['errorIcon'];
    fieldColumns?: ResponsiveColumns | undefined;
    headerTooltips?: boolean;
    hideDetails?: GlobalHideDetails;
    jumpAhead?: boolean;
    keepValuesOnUnmount?: boolean;
    navButtonSize?: VBtn['size'];
    navButtonVariant?: VBtn['variant'];
    submitLoading?: boolean;
    summaryColumns?: ResponsiveColumns;
    title?: string;
    tooltipLocation?: VTooltip['location'];
    tooltipOffset?: VTooltip['offset'];
    tooltipTransition?: VTooltip['transition'];
    validateOn?: Field['validateOn'];
    validateOnMount?: boolean;
    variant?: string;
    width?: string;
}
export interface PluginOptions extends Partial<Omit<Props, 'pages' | 'validationSchema'>> {
}
declare global {
    export interface Settings extends PluginOptions {
    }
}
type FieldTypes = 'autocomplete' | 'buttons' | 'checkbox' | 'color' | 'combobox' | 'date' | 'email' | 'fancyRadio' | 'field' | 'file' | 'hidden' | 'number' | 'password' | 'radio' | 'select' | 'switch' | 'tel' | 'text' | 'textField' | 'textarea' | 'url' | undefined;
export interface SharedProps {
    field: Field;
}
export type EmitValidateEvent = (event: 'validate', field: Field) => void;
export interface UseOnActions {
    (options: {
        action: ValidateAction;
        emit: EmitValidateEvent;
        field: Field;
        settingsValidateOn: Settings['validateOn'];
        validate: FieldValidateResult;
    }): Promise<ValidateResult>;
}
export interface UseBuildSettings {
    (props: Settings): Settings;
}
export interface UseDeepMerge {
    (A: Record<string, any>, B: Record<string, any>, C?: Record<string, any>): Record<string, any>;
}
export interface UseAutoPage {
    (options: {
        emit: {
            (e: 'next', field: Field): void;
        };
        field: Field;
        modelValue: any;
        settings: Settings;
    }): void;
}
export interface UseColumnErrorCheck {
    (options: {
        columns: ResponsiveColumns | undefined;
        propName?: string;
    }): void;
}
export interface UseGetFirstAndLastEditableFalse {
    (pages: Page[]): {
        firstNonEditableIndex: number;
        lastNonEditableIndex: number;
    };
}
export type ComputedClasses = Record<string, boolean>;
export interface UseContainerClasses {
    (options: {
        direction?: Props['direction'];
    }): ComputedClasses;
}
export interface UseStepperContainerClasses {
    (options: {
        direction?: Props['direction'];
    }): ComputedClasses;
}
export interface UseColumnClasses {
    (options: {
        columnsMerged: ResponsiveColumns;
        fieldColumns?: ResponsiveColumns | undefined;
        propName?: string;
    }): ComputedClasses;
}
export interface UseHandleJumpAhead {
    (options: {
        currentPageEditable: boolean;
        currentPageIdx: MaybeRef<number>;
        firstNonEditableIndex: number;
        lastNonEditableIndex: number;
        lastPageIdx: number;
        nextPageEditable: boolean;
        nextPageNotEditable: boolean;
        pageIdx: number;
        pageNotEditable: boolean;
        previousPageEditable: boolean;
        previousPageNotEditable: boolean;
    }): boolean;
}
export interface UseHandleNonJumpAhead {
    (options: {
        currentPageEditable: boolean;
        currentPageIdx: MaybeRef<number>;
        firstNonEditableIndex: number;
        lastNonEditableIndex: number;
        lastPageIdx: number;
        nextPageEditable: boolean;
        nextPageNotEditable: boolean;
        pageEditable: boolean;
        pageIdx: number;
        pageNotEditable: boolean;
    }): boolean;
}
declare module 'vue' {
    interface ComponentCustomProperties {
    }
    interface GlobalComponents {
        VStepperForm: typeof VStepperForm;
    }
}
declare function createVStepperForm(options?: PluginOptions): {
    install: (app: App) => void;
};
export { createVStepperForm };