Skip to content
This repository was archived by the owner on Jun 1, 2023. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 45 additions & 41 deletions types/FormWizard.ts
Original file line number Diff line number Diff line change
@@ -1,144 +1,148 @@
import Vue from 'vue'
import Vue from 'vue';

export type ShapeType = 'circle' | 'square' | 'tab'
export type LayoutType = 'vertical' | 'horizontal'
export type StepSizeType = 'xs' | 'sm' | 'md' | 'lg'
export type ShapeType = 'circle' | 'square' | 'tab';
export type LayoutType = 'vertical' | 'horizontal';
export type StepSizeType = 'xs' | 'sm' | 'md' | 'lg';

export declare class Wizard extends Vue {
/**
* Wizard identifier.
*
*
* Default value: 'fw_<timestamp-in-milliseconds>'
*/
id: string
id: string;

/**
* Wizard title.
*
*
* Default value: 'Awesome Wizard'
*/
title: string
title: string;

/**
* Wizard subtitle.
*
*
* Default value: 'Split a complicated flow in multiple steps'
*/
subtitle: string
subtitle: string;

/**
* Text to display on next button.
*
*
* Default value: 'Next'
*/
nextButtonText: string
nextButtonText: string;

/**
* Text to display on back button.
*
*
* Default value: 'Back'
*/
backButtonText: string
backButtonText: string;

/**
* Text to display on finish button.
*
*
* Default value: 'Finish'
*/
finishButtonText: string
finishButtonText: string;

/**
* Whether or not buttons should be hidden.
*
*
* Default value: false
*/
hideButtons: boolean
hideButtons: boolean;

/**
* Whether or not to trigger `beforeChange` function when navigating back.
*
*
* Default value: false
*/
validateOnBack: boolean
validateOnBack: boolean;

/**
* Color to apply to text, border and circle.
*
*
* Default value: '#e74c3c'
*/
color: string
color: string;

/**
* Step color when the current step is not valid.
*
*
* Default value: '#8b0000'
*/
errorColor: string
errorColor: string;

/**
* Shape of steps.
*
*
* Default value: 'circle'
*/
shape: ShapeType
shape: ShapeType;

/**
* Layout of wizard.
*
*
* Default value: 'horizontal'
*/
layout: LayoutType
layout: LayoutType;

/**
* Additional CSS classes to apply to steps.
*
*
* Default value: ''
*/
stepsClasses: string[]
stepsClasses: string[];

/**
* Size of steps.
*
*
* Default value: 'md'
*/
stepSize: StepSizeType
stepSize: StepSizeType;

/**
* Name of the transition when transitioning between steps.
*
*
* Default value: ''
*/
transition: string
transition: string;

/**
* Zero-based index of the initial tab to be displayed.
*
*
* Default value: 0
*/
startIndex: number
startIndex: number;

/**
* Resets the wizard to its initial state.
*/
reset: () => void
reset: () => void;

/**
* Activates all steps, as if the user has navigated to each of them.
*/
activateAll: () => void
activateAll: () => void;

/**
* Navigates to the next tab.
*/
nextTab: () => void
nextTab: () => void;

/**
* Navigates to the previous tab.
*/
prevTab: () => void
prevTab: () => void;

/**
* Navigates from one tab to another. Note that this method does not trigger validaiton methods.
*/
changeTab: (oldIndex: number, newIndex: number, emitChangeEvent?: boolean) => boolean
changeTab: (
oldIndex: number,
newIndex: number,
emitChangeEvent?: boolean
) => boolean;
}
20 changes: 10 additions & 10 deletions types/TabContent.ts
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
import Vue from 'vue'
import Vue from 'vue';

export declare class Tab extends Vue {
/**
* Title to be displayed under each step.
*
*
* Default value: ''
*/
title: string
title: string;

/** CSS class to be applied to each step icon.
*
*
* Default value: ''
*/
icon: string
icon: string;

/**
* Function to execute before changing tabs. If the return result is false, the tab switch is restricted.
*/
beforeChange: () => boolean | Promise<boolean>
beforeChange: () => boolean | Promise<boolean>;

/**
* Function to execute after changing tabs. It is safe to assume that necessary validation has already occurred.
*/
afterChange: () => void
afterChange: () => void;

/**
* Vue router route object.
*/
route: string | object
route: string | object;

/**
* Default value: () => {}
*/
additionalInfo: object
additionalInfo: object;
}
10 changes: 5 additions & 5 deletions types/WizardStep.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import Vue from 'vue'
import Vue from 'vue';

export declare class Step extends Vue {
/**
* Tab component to use for the step. This should be usually passed through the `step` scoped slot.
*
*
* Default value: () => {}
*/
tab: object
tab: object;

/**
* Default value: ''
*/
transition: string
transition: string;

/**
* Default value: 0
*/
index: number
index: number;
}
18 changes: 9 additions & 9 deletions types/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import Vue from 'vue'
import { PluginFunction } from "vue";
import Vue from 'vue';
import { PluginFunction } from 'vue';

export function install (vue: typeof Vue): void
export function install(vue: typeof Vue): void;

export {
Wizard as FormWizard,
ShapeType,
LayoutType,
StepSizeType
} from "./FormWizard"
export { Tab as TabContent } from "./TabContent"
export { Step as WizardStep } from "./WizardStep"
} from './FormWizard';
export { Tab as TabContent } from './TabContent';
export { Step as WizardStep } from './WizardStep';

import { Wizard as FormWizard } from "./FormWizard"
import { Tab as TabContent } from "./TabContent"
import { Step as WizardStep } from "./WizardStep"
import { Wizard as FormWizard } from './FormWizard';
import { Tab as TabContent } from './TabContent';
import { Step as WizardStep } from './WizardStep';

declare class VueFormWizard {
static install: PluginFunction<never>;
Expand Down