Merge pull request #289 from charles-salmon/type-definitions

Improve Type Definitions

types/FormWizard.ts

@@ -1,33 +1,144 @@
+import Vue from 'vue'
+
 export type ShapeType = 'circle' | 'square' | 'tab'
 export type LayoutType = 'vertical' | 'horizontal'
 export type StepSizeType = 'xs' | 'sm' | 'md' | 'lg'
 
-export declare class Wizard {
-  /** Wizard title */
+export declare class Wizard extends Vue {
+  /**
+   * Wizard identifier.
+   * 
+   * Default value: 'fw_<timestamp-in-milliseconds>'
+   */
+  id: string
+
+  /**
+   * Wizard title.
+   * 
+   * Default value: 'Awesome Wizard'
+   */
   title: string
-  /** Wizard subtitle */
+
+  /**
+   * Wizard subtitle.
+   * 
+   * Default value: 'Split a complicated flow in multiple steps'
+   */
   subtitle: string
+
+  /**
+   * Text to display on next button.
+   * 
+   * Default value: 'Next'
+   */
   nextButtonText: string
+
+  /**
+   * Text to display on back button.
+   * 
+   * Default value: 'Back'
+   */
   backButtonText: string
+
+  /**
+   * Text to display on finish button.
+   * 
+   * Default value: 'Finish'
+   */
   finishButtonText: string
-  /** Whether to hide footer buttons */
+
+  /**
+   * Whether or not buttons should be hidden.
+   * 
+   * Default value: false
+   */
   hideButtons: boolean
-  /** Whether to trigger beforeChange function when navigating back */
+
+  /**
+   * Whether or not to trigger `beforeChange` function when navigating back.
+   * 
+   * Default value: false
+   */
   validateOnBack: boolean
-  /** Active step and button color */
+
+  /**
+   * Color to apply to text, border and circle.
+   * 
+   * Default value: '#e74c3c'
+   */
   color: string
-  /** Step color when the current step is not valid */
+
+  /**
+   * Step color when the current step is not valid.
+   * 
+   * Default value: '#8b0000'
+   */
   errorColor: string
-  /** Main step shape */
+
+  /**
+   * Shape of steps.
+   * 
+   * Default value: 'circle'
+   */
   shape: ShapeType
-  /** Wizard layout */
+
+  /**
+   * Layout of wizard.
+   * 
+   * Default value: 'horizontal'
+   */
   layout: LayoutType
-  /** Additional css classes for steps */
+
+  /**
+   * Additional CSS classes to apply to steps.
+   * 
+   * Default value: ''
+   */
   stepsClasses: string[]
-  /** Step size */
+
+  /**
+   * Size of steps.
+   * 
+   * Default value: 'md'
+   */
   stepSize: StepSizeType
-  /** Step transition from inactive to active */
+
+  /**
+   * Name of the transition when transitioning between steps.
+   * 
+   * Default value: ''
+   */
   transition: string
-  /** Tab index where the wizard should start */
+
+  /**
+   * Zero-based index of the initial tab to be displayed.
+   * 
+   * Default value: 0
+   */
   startIndex: number
+
+  /**
+   * Resets the wizard to its initial state.
+   */
+  reset: () => void
+
+  /**
+   * Activates all steps, as if the user has navigated to each of them.
+   */
+  activateAll: () => void
+
+  /**
+   * Navigates to the next tab.
+   */
+  nextTab: () => void
+
+  /**
+   * Navigates to the previous tab.
+   */
+  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
 }

types/TabContent.ts

@@ -1,14 +1,36 @@
-export declare class Tab {
-  /** Title to be displayed under each step */
-  title?: string
-  /** css class for each step icon */
-  icon?: string
-  /***
-   * Function to execute before tab switch. Return value must be boolean
-   * If the return result is false, tab switch is restricted
+import Vue from 'vue'
+
+export declare class Tab extends Vue {
+  /**
+   * Title to be displayed under each step.
+   * 
+   * Default value: ''
+   */
+  title: string
+  
+  /** CSS class to be applied to each step icon.
+   * 
+   * Default value: ''
+   */
+  icon: string
+
+  /**
+   * Function to execute before changing tabs. If the return result is false, the tab switch is restricted.
+   */
+  beforeChange: () => boolean | Promise<boolean>
+
+  /**
+   * Function to execute after changing tabs. It is safe to assume that necessary validation has already occurred.
+   */
+  afterChange: () => void
+
+  /**
+   * Vue router route object.
    */
-  beforeChange (): boolean | Promise<boolean>
-  /** Vue router route object */
   route: string | object
+
+  /**
+   * Default value: () => {}
+   */
   additionalInfo: object
 }

types/WizardStep.ts

@@ -1,6 +1,20 @@
-export declare class Step {
-  /** Tab component for the step. This should be usually passed through the `step` scoped slot */
+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
+
+  /**
+   * Default value: ''
+   */
   transition: string
+
+  /**
+   * Default value: 0
+   */
   index: number
 }

types/index.d.ts

@@ -3,13 +3,18 @@ import { PluginFunction } from "vue";
 
 export function install (vue: typeof Vue): void
 
-import { Wizard } from './FormWizard'
-import { Tab } from './TabContent'
-import { Step } from './WizardStep'
+export {
+  Wizard as FormWizard,
+  ShapeType,
+  LayoutType,
+  StepSizeType
+} from "./FormWizard"
+export { Tab as TabContent } from "./TabContent"
+export { Step as WizardStep } from "./WizardStep"
 
-export class FormWizard extends Wizard {}
-export class TabContent extends Tab {}
-export class WizardStep extends Step {}
+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>;