hrms-manual/node_modules/quasar/dist/api/QStepper.json

{
  "type": "component",
  "meta": {
    "docsUrl": "https://v2.quasar.dev/vue-components/stepper"
  },
  "props": {
    "model-value": {
      "type": "Any",
      "desc": "Model of the component defining the current panel's name; If a Number is used, it does not define the panel's index, but rather the panel's name which can also be an Integer; Either use this property (along with a listener for 'update:model-value' event) OR use the v-model directive.",
      "examples": [
        "v-model=\"panelName\""
      ],
      "category": "model"
    },
    "keep-alive": {
      "type": "Boolean",
      "desc": "Equivalent to using Vue's native <keep-alive> component on the content",
      "category": "behavior"
    },
    "keep-alive-include": {
      "type": [
        "String",
        "Array",
        "RegExp"
      ],
      "desc": "Equivalent to using Vue's native include prop for <keep-alive>; Values must be valid Vue component names",
      "examples": [
        "a,b",
        "/a|b/",
        "['a', 'b']"
      ],
      "category": "behavior"
    },
    "keep-alive-exclude": {
      "type": [
        "String",
        "Array",
        "RegExp"
      ],
      "desc": "Equivalent to using Vue's native exclude prop for <keep-alive>; Values must be valid Vue component names",
      "examples": [
        "a,b",
        "/a|b/",
        "['a', 'b']"
      ],
      "category": "behavior"
    },
    "keep-alive-max": {
      "type": "Number",
      "desc": "Equivalent to using Vue's native max prop for <keep-alive>",
      "category": "behavior"
    },
    "animated": {
      "type": "Boolean",
      "desc": "Enable transitions between panel (also see 'transition-prev' and 'transition-next' props)",
      "category": "behavior"
    },
    "infinite": {
      "type": "Boolean",
      "desc": "Makes component appear as infinite (when reaching last panel, next one will become the first one)",
      "category": "behavior"
    },
    "swipeable": {
      "type": "Boolean",
      "desc": "Enable swipe events (may interfere with content's touch/mouse events)",
      "category": "behavior"
    },
    "vertical": {
      "type": "Boolean",
      "desc": "Put Stepper in vertical mode (instead of horizontal by default)",
      "category": "behavior"
    },
    "transition-prev": {
      "type": "String",
      "desc": "One of Quasar's embedded transitions (has effect only if 'animated' prop is set)",
      "examples": [
        "fade",
        "slide-down"
      ],
      "category": "transition",
      "default": "slide-right/slide-down",
      "required": false
    },
    "transition-next": {
      "type": "String",
      "desc": "One of Quasar's embedded transitions (has effect only if 'animated' prop is set)",
      "examples": [
        "fade",
        "slide-down"
      ],
      "category": "transition",
      "default": "slide-left/slide-up",
      "required": false
    },
    "transition-duration": {
      "type": [
        "String",
        "Number"
      ],
      "desc": "Transition duration (in milliseconds, without unit)",
      "default": 300,
      "category": "transition",
      "addedIn": "v2.2",
      "required": false
    },
    "dark": {
      "type": "Boolean",
      "desc": "Notify the component that the background is a dark color",
      "category": "style"
    },
    "flat": {
      "type": "Boolean",
      "desc": "Applies a 'flat' design (no default shadow)",
      "category": "style"
    },
    "bordered": {
      "type": "Boolean",
      "desc": "Applies a default border to the component",
      "category": "style"
    },
    "alternative-labels": {
      "type": "Boolean",
      "desc": "Use alternative labels - stacks the icon on top of the label (applies only to horizontal stepper)",
      "category": "header"
    },
    "header-nav": {
      "type": "Boolean",
      "desc": "Allow navigation through the header",
      "category": "behavior"
    },
    "contracted": {
      "type": "Boolean",
      "desc": "Hide header labels on narrow windows",
      "category": "header|behavior"
    },
    "inactive-icon": {
      "type": "String",
      "desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)",
      "examples": [
        "map",
        "ion-add",
        "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
        "img:path/to/some_image.png"
      ],
      "category": "header"
    },
    "inactive-color": {
      "type": "String",
      "tsType": "NamedColor",
      "desc": "Color name for component from the Quasar Color Palette",
      "examples": [
        "primary",
        "teal",
        "teal-10"
      ],
      "category": "header"
    },
    "done-icon": {
      "type": "String",
      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
      "examples": [
        "map",
        "ion-add",
        "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
        "img:path/to/some_image.png"
      ],
      "category": "header"
    },
    "done-color": {
      "type": "String",
      "tsType": "NamedColor",
      "desc": "Color name for component from the Quasar Color Palette",
      "examples": [
        "primary",
        "teal",
        "teal-10"
      ],
      "category": "header"
    },
    "active-icon": {
      "type": "String",
      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
      "examples": [
        "map",
        "ion-add",
        "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
        "img:path/to/some_image.png"
      ],
      "category": "header"
    },
    "active-color": {
      "type": "String",
      "tsType": "NamedColor",
      "desc": "Color name for component from the Quasar Color Palette",
      "examples": [
        "primary",
        "teal",
        "teal-10"
      ],
      "category": "header"
    },
    "error-icon": {
      "type": "String",
      "desc": "Icon name following Quasar convention; If 'none' (String) is used as value, then it will defer to prefix or the regular icon for this state; Make sure you have the icon library installed unless you are using 'img:' prefix",
      "examples": [
        "map",
        "ion-add",
        "img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
        "img:path/to/some_image.png"
      ],
      "category": "header"
    },
    "error-color": {
      "type": "String",
      "tsType": "NamedColor",
      "desc": "Color name for component from the Quasar Color Palette",
      "examples": [
        "primary",
        "teal",
        "teal-10"
      ],
      "category": "header"
    },
    "header-class": {
      "type": "String",
      "desc": "Class definitions to be attributed to the header",
      "examples": [
        "my-special-class"
      ],
      "category": "style"
    }
  },
  "slots": {
    "default": {
      "desc": "Suggestion: QStep"
    },
    "navigation": {
      "desc": "Slot specific for the global navigation; Suggestion: QStepperNavigation"
    },
    "message": {
      "desc": "Slot specific for putting a message on top of each step (if horizontal stepper) or above steps (if vertical); Suggestion: QBanner, div.q-pa-lg"
    }
  },
  "events": {
    "update:model-value": {
      "desc": "Emitted when the component changes the model; This event _isn't_ fired if the model is changed externally; Is also used by v-model",
      "params": {
        "value": {
          "type": [
            "String",
            "Number"
          ],
          "desc": "New current panel name",
          "examples": [
            "dashboard"
          ]
        }
      }
    },
    "before-transition": {
      "desc": "Emitted before transitioning to a new panel",
      "params": {
        "newVal": {
          "type": [
            "String",
            "Number"
          ],
          "desc": "Panel name towards transition is going",
          "examples": [
            "dashboard"
          ]
        },
        "oldVal": {
          "type": [
            "String",
            "Number"
          ],
          "desc": "Panel name from which transition is happening",
          "examples": [
            "dashboard"
          ]
        }
      }
    },
    "transition": {
      "desc": "Emitted after component transitioned to a new panel",
      "params": {
        "newVal": {
          "type": [
            "String",
            "Number"
          ],
          "desc": "Panel name towards transition has occurred",
          "examples": [
            "dashboard"
          ]
        },
        "oldVal": {
          "type": [
            "String",
            "Number"
          ],
          "desc": "Panel name from which transition has happened",
          "examples": [
            "dashboard"
          ]
        }
      }
    }
  },
  "methods": {
    "next": {
      "desc": "Go to next panel"
    },
    "previous": {
      "desc": "Go to previous panel"
    },
    "goTo": {
      "desc": "Go to specific panel",
      "params": {
        "panelName": {
          "type": [
            "String",
            "Number"
          ],
          "desc": "Panel's name, which may be a String or Number; Number does not refers to panel index, but to its name, which may be an Integer",
          "required": true,
          "examples": [
            "dashboard"
          ]
        }
      }
    }
  }
}