Last update: August 27, 2024

Status

The status component is used to display a status badge with customizable view and icon as well as its size, title, and badge content text.

Storybook

Explore the vc-status component in the VC Shell Storybook.

Dynamic Views examples are also available in the VC Shell Storybook for a better understanding of the component usage.

Usage

Include the vc-status component in your Vue application, providing theming and enhanced functionality to your status inputs.

Basic VueDynamic Views

Create a basic status as follows:

<template>
    <vc-status variant="danger" :outline="false">Status text</vc-status>
</template>

To start using all the available status properties, specify the vc-status component when creating the schema. For example:

{
    id: "statusId",
    component: "vc-status",
    variant: "danger",
    content: {
        method: "statusText",
    },
}

Status API

API empowers you to create dynamic and interactive status components to customize its appearance and behavior.

Basic Vue

You can easily incorporate the vc-status component into your Vue applications using simple templates.

Props

To customize the appearance and behavior of statuses, use the following props:

Property	Type	Description
variant	"info", "warning", "danger", "success", "light-danger"	Status variant.
outline	boolean	Whether the status is outlined or not.
extend	boolean	Whether the status is extendable or not.

Slots

To enhance the content of the vc-status component, use the slot system:

Name	Description
default	Status content slot.

Dynamic Views

To dynamically integrate the vc-status component into your views, use the schema interface:

interface StatusSchema {
    id: string;
    component: "vc-status";
    variant: "info" | "warning" | "danger" | "success" | "light-danger";
    icon?: string;
    iconVariant?: "warning" | "danger" | "success";
    iconSize?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
    title?: string;
    outline?: boolean;
    extend?: boolean;
    content?: {
        method: string;
    };
    visibility?: {
        method: string;
    };
    horizontalSeparator?: boolean;
}

To incorporate the status into your dynamic applications, define the following properties:

Property	Type	Description
id	string	Identifier for the vc-status component.
component	vc-status	Utilized component in the schema.
variant	string	Type of status variant.
icon	string	Icon featured in the status badge, utilizing AwesomeIcons package.
iconVariant	string	Variant of the displayed icon.
iconSize	string	Size of the icon.
title	string	Title associated with the status. You can specify the localization key for the title. Under the hood, vue-i18n is used.
outline	boolean	Specification of whether the status is outlined.
extend	boolean	This setting allows to create status with header and content text. See the example below.
content	{method: string}	Method for retrieving the status content. Method should be defined in the blade scope and should return a string value.
visibility	{method: string}	State of visibility for the component, allowing you to hide the status based on certain conditions. The method or variable should be defined in the blade scope and should return a boolean value.
horizontalSeparator	boolean	Adds a horizontal separator line after the component.

Example

Status example with extend setting set to true:

ScreenshotCode

{
    id: "declineStatus",
    component: "vc-status",
    outline: false,
    extend: true,
    variant: "light-danger",
    icon: "fas fa-exclamation-circle",
    iconSize: "xxl",
    title: "Decline reason",
    iconVariant: "danger",
    content: {
        method: "statusText",
    },
}