Vue Quest UI

Vue Quest UI is a collection of reusable Vue components that are designed to help you quickly build modern and responsive user interfaces for your Vue.js projects.

Installation

You can easily install Vue Quest UI via npm:

npm i vue-quest-ui

Usage

To use Vue Quest UI in your Vue.js project, you can register the components globally as an entire library or individually, or locally.

1. Global Registration:

In your main.js (or main.ts) file, use the install function to register all components globally. All the components in the library will be installed in your project. They can then be used as custom components in any part of your project.

import { createApp } from 'vue';
import App from './App.vue';
import { install } from 'vue-quest-ui';  // Import the install function

const app = createApp(App);

app.use(install); // Register all components globally

app.mount('#app');

2. Selective Registration:

If you only want to import specific components instead of the entire library, you can use the installGlobalComponents function. Pass a string array of the component names you'd like to import, these components will then be globally imported.

import { createApp } from 'vue';
import App from './App.vue';
import { installGlobalComponents } from 'vue-quest-ui';

const app = createApp(App);

installGlobalComponents(app, ['QstIcon']); // Register only the QstIcon component globally

app.mount('#app');

3. Manual Registration:

You can also import and register individual components manually globally, or locally in each file that they'll be used in.

// main.js/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { QstIcon } from 'vue-quest-ui';

const app = createApp(App);

// Manually register the QstIcon component
app.component('QstIcon', QstIcon);

app.mount('#app');

// file for a component or page where the component will be used
import { QstIcon } from 'vue-quest-ui';

<div>
    <qst-icon icon="clarity:email-solid" />
</div>

Styles

All the necessary styles for Vue Quest UI can be imported in your main.js file.

import 'vue-quest-ui/dist/vue-quest-ui.css';

Some components include a color prop, which allows you to choose an accent color. By default, this uses the primary-color CSS variable. If you define a primary-color variable in your project, it will automatically apply to all components that use the color prop, without needing to set it individually per component.

Global Options Configuration

This module allows you to set and manage global configuration options in your Vue.js project, that will be used by any applicable Vue Quest UI components. You can easily customize the theme, primary color, and help mode. If a component has a prop for one of these options, it will check if the prop is set and then for the global option.

Available Options

The following configuration options can be set globally:

• theme (string): The theme of your app. Possible values are 'light' or 'dark'. Defaults to 'light'.
• primaryColor (string): The primary color used throughout your app. This will update the --primary-color CSS variable.
• isHelpModeActive (boolean): A flag to enable or disable help mode in your app. Default is false.

Setting Global Options

To configure these options globally, you can call the setGlobalOptions() function and pass in an object containing the options you wish to set.

Example

import { setGlobalOptions } from 'vue-quest-ui';

// Set custom global options
setGlobalOptions({
    theme: 'dark',
    primaryColor: '#ff5733', // This will update the --primary-color CSS variable
    isHelpModeActive: true,
});

Configuration

Vue Quest UI requires iconify for the icons throughout the project. If it's not already installed, it will be installed alongside vue-quest-ui as a dependency.

All components can be customized based on your needs by passing props to them. Review the props available for each component below.

Components

• QstIcon (v0.0.13)
• QstInput (v0.0.14)
• QstTooltip (v0.0.14)
• QstButton (v0.0.18)
• QstDropdown (v0.0.19)
• QstLoader (v0.0.19)
• QstModal (v0.0.19)
• QstSwitch (v0.0.20)
• QstScrollContainer (v0.0.21)
• QstImg (v0.0.23)
• QstTag (v0.0.26)
• QstExpandableRow (v0.0.27)
• QstPanel (v0.0.27)
• QstCheckbox (v0.0.28)
• QstCheckboxGroup (v0.0.28)
• QstRadio (v0.0.28)
• QstRadioGroup (v0.0.28)
• QstAutocomplete (v0.0.29)
• QstAddressAutocomplete (v0.0.30)
• QstSelect (v0.0.31)
• QstText (v0.0.55)
• QstTable (v0.0.55)
• QstViewSelector (v0.0.56)
• BasicKeyValueTable (v0.0.57)
• QstKeyValueTable (v0.0.57)
• VisualTable (v0.0.58)
• QstBox (v0.0.59)
• QstToast (v0.0.59)
• QstToastContent (v0.0.59)
• QstUserSnippet (v0.0.67)
• QstCreditCardForm (v0.0.76)
• QstDigitInput (v0.0.76)
• QstImgGallery (v0.0.76)
• QstTimeline (v0.0.78)
• QstStatusPipeline (v0.0.79)

Props

QstIcon

A versatile, customizable icon that displays Iconify icons.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | icon | string | true | — | Iconify value for the icon. | | color | string | false | null | The color of the icon. | | circle | boolean | false | false | Shows the icon in a circle. The background color of the circle will be the color prop and the icon will show as white. | | size | string | false | — | Pixel value to resize the component, styles are adjusted when the size is updated. | | alignText | boolean | false | false | Aligns the icon and text vertically. |

QstInput

A customizable input element that supports the following types: text, password, email, number, phone, tel, textarea, datepicker, datetimepicker, timepicker, decimal, number-string, money.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | modelValue | string, number|object | false | — | Used for v-model, will be set to the input value. | | type | string | false | text | The type of input. Can be set to any of the following types: text, password, email, number, phone, tel, textarea, datepicker, datetimepicker, timepicker, decimal, number-string, money. (type="number" will be a number data type. to use number characters with a string data type (ex/ to start a number with 0) use type="number-string") | | width | string | false | null | The width of the input. | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. | | color | string | false | var(--primary-color) | The accent color, used for details within the component. | | placeholder | string, number | false | — | Placeholder for the input. The placeholder text will be shown as a label, in order to show an animation when focusing the input. | | labelPosition | string | false | mid | The position of the label relative to the input when it has a value. | | icon | string | false | — | Any Iconify value, the icon will be shown on the right side of the input. Input types such as "phone", "email", and "password" will show an icon by default. | | useClearIcon | boolean | false | false | Adds X icon to the right of the input, clicking it clears the v-model value. Overrides any other previously set icons. | | disabled | boolean | false | false | Disables the input. | | disabledReason | string | false | — | When the input is disabled, the disabledReason will show in a tooltip when hovering over the input. | | disabledTooltipPosition | string | false | right | Tooltip dropdown position when the disabled reason is visible. | | tooltip | string, object | false | null | A tooltip icon will show on the inner right side of the input, the tooltip dropdown will default to match input dimensions. (if width and offset are not set) Set to a string or object, based on if tooltip props are needed. (ex/ offset, width, position, etc) | | useEditMode | boolean | false | true | Whether the input should be editable or not. | | showLabelOnEditMode | boolean | false | true | If the label will be displayed when the input is in edit mode. | | error | string | false | null | Shows an error message, displayed on the top right of the input border by default. | | useErrorIcon | boolean | false | false | An error icon will be displayed on the right of the input, hovering over will show a tooltip with the error message. | | showErrorInline | boolean | false | false | The error message will show inside the input. | | showErrorBelow | boolean | false | false | The error message will show on the bottom right border of the input. | | blockedChars | array | false | [] | Characters that will users will be prevented from entering into the input. | | maxChars | number | false | -1 | The maximum number of characters that the input can have. | | showMaxChars | boolean | false | false | Shows a counter on the right side of the input for the maxChars. | | minNum | number | false | -Infinity | The minimum number that can be entered, when using a number or decimal input type. | | maxNum | number | false | Infinity | The minimum maximum that can be entered, when using a number or decimal input type. | | maxDecimals | number | false | -1 | The maximum amount of decimal places, when using a decimal input type. | | step | number | false | 1 | The amount the value will be incremented/decremented, when using a number or decimal input type. | | hideArrowButtons | boolean | false | false | Hides the default arrow buttons used to increment/decrement value, when using a number or decimal input type. | | minDate | string, object | false | — | The minimum date that can be selected when using a datepicker input type. All prior dates will be disabled. (format: MM/DD/YYYY) | | maxDate | string, object | false | — | The maximum date that can be selected when using a datepicker input type. All future dates will be disabled. (format: MM/DD/YYYY) | | useDatepickerRange | boolean | false | false | When using the datepicker, select a range of dates instead of a single date. | | defaultTime | string | false | — | Default time when using datetimepicker or timepicker. (format: HH:mm) | | image | string | false | — | This prop is used internally, do not pass anything in. | | hideImage | boolean | false | false | This prop is used internally, do not pass anything in. | | useSlackDropdown | boolean | false | false | When user types @ symbol, a dropdown for all slack users will appear. | | slackOptions | array | false | null | An array of user data, the following fields will be displayed. The entire object will be provided as the result property. (additional fields can be added to user object) {FirstName: string, LastName: string, Username: string, Image: string, Department: {Department: string, Color: string}} |

QstTooltip

A small, informative popup that appears when users hover over or focus on the tooltip trigger.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | offset | object | false | {x:0,y:0} | Moves the tooltip from its default position. (+X moves right, -X moves left, +Y moves down, -Y moves up) | | offsetTriangle | boolean | false | false | When offset is set, the triangle will remain anchored to the trigger by default. If true, the triangle will move with the rest of the offset. | | scrollableY | boolean | false | false | The tooltip dropdown will scroll vertically when content exceeds the tooltip size. | | icon | string | false | ant-design:info-circle-filled | Hovering over the icon will trigger the tooltip dropdown to be visible, can be set to any iconify value. | | color | string | false | #616161 | The color of the icon. | | size | string | false | 16px | Pixel value to resize the component, styles are adjusted when the size is updated. | | useHoverIcon | boolean | false | true | Whether the icon should be used as the tooltip trigger. | | width | number | false | 260 | Width of the tooltip. (number value only, will be set to pixel unit) | | position | string | false | bottom | Pass in top/left/right/bottom to control where the tooltip dropdown appears in relation to the trigger. | | solid | boolean | false | false | The background of the tooltip dropdown will be completely solid. | | disabled | boolean | false | false | Prevents the tooltip from being triggered by hover/click. | | useHoverBuffer | boolean | false | false | Adds a transparent element between the tooltip trigger and dropdown. Allows the user to move the mouse from trigger to content without closing the tooltip. | | helpMode | boolean | false | false | Tooltip will only be visible when true, tooltip icon and styles are updated to a help theme. | | content | string | false | null | The content shown in the tooltip dropdown. *(can also be set by using the default slot) | | overrideStyles | object | false | null | Set to a style object, will override default tooltip dropdown styles. *(teleported tooltip dropdowns can't be targeted by parents) | | preventClickOverride | boolean | false | false | Prevents the tooltip from staying open when clicking on the trigger. | | disableDynamicSizing | boolean | false | false | Disables updating the tooltip trigger icon based on device size. |

QstButton

A simple, customizable button that triggers actions when clicked. It supports various styles, sizes, and icons.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | color | string | false | var(--primary-color) | The background color of the button. | | fontColor | string | false | #fff | The color of the button text or icon. | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. | | icon | string | false | null | Iconify value for the icon. | | useIconBtn | boolean | false | false | Creates a button element to appear as only an icon. | | circle | boolean | false | false | Creates a circular button. (primarily used with icons) | | tooltip | string, object | false | null | Shows a tooltip dropdown when hovering over the button. Set to a string or object, based on if tooltip props are needed. (ex/ offset, width, position, etc) | | disabled | boolean | false | false | Disables the button, shows grayed out and unclickable. | | fullWidth | boolean | false | false | Makes the button expand to the full width of its parent container. | | floatRight | boolean | false | false | Makes the button float to the right of its parent container. |

QstDropdown

A dropdown component that displays an interactive menu, which can be triggered by clicks or hover and offers customizable behaviors such as closing on outside clicks, dynamic content, and flexible styling.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | width | string | false | 500px | The width of the dropdown menu, set in px. | | openOnHover | boolean | false | false | The dropdown will open when hovering over the trigger, instead of clicking it. | | closeOnSelfClick | boolean | false | false | Closes the dropdown menu when clicking inside of it. | | closeOnOutsideClick | boolean | false | true | Closes the dropdown menu when clicking outside of it. | | position | string | false | bottom | The position that the dropdown will open relative to the trigger. | | offset | object | false | {x:0,y:0} | Moves the dropdown from its default position. (+X moves right, -X moves left, +Y moves down, -Y moves up) | | centerDropdown | boolean | false | false | Centers the dropdown based on the trigger. Offset can be used to adjust it starting at the center position, the triangle will stay centered. | | maxHeight | string | false | null | Max height for the dropdown, if exceeded the dropdown will start scrolling. | | useTriangle | boolean | false | false | Shows a triangle relative to the position of the trigger. | | offsetTriangle | boolean | false | false | When the offset is set, the triangle will remain anchored to the trigger by default. If true, the triangle will move with the rest of the offset. | | bgColor | string | false | #232729ed | The background color of the dropdown. | | color | string | false | #fff | The font color for the dropdown. |

QstLoader

A loader component that visually indicates ongoing processes or background tasks, providing a customizable spinning or animated indicator to enhance user experience during wait times.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | loaderSrc | string | false | null | The image/gif that will be used for the loader. | | color | string | false | var(--primary-color) | The color when using the default loader icon. | | subtext | string | false | null | Optional text to show below the loader. | | size | string | false | 16px | Pixel value to resize the component, styles are adjusted when the size is updated. | | center | boolean | false | true | Aligns the loader to be centered relative to its parent container. | | absolute | boolean | false | false | Creates a loader with a backdrop using position absolute to fill the nearest parent container with position relative. | | fullPage | boolean | false | false | Creates a full page fixed loader with backdrop. | | useBackdrop | boolean | false | true | Shows a backdrop for full page and absolute loaders. | | useClearBackdrop | boolean | false | false | When showing a backdrop, uses a transparent backdrop instead of a colored one. |

QstModal

A reusable modal component that provides a flexible, customizable overlay for displaying content, with support for dynamic content, actions, and easy integration into any application.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | modelValue | boolean | true | — | Used for v-model, will be set to whether the modal is showing. | | width | string | false | 300px | The width of the modal. | | height | string | false | 650px | The height of the modal. | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. | | color | string | false | var(--primary-color) | The accent color, used for details within the component. | | useLoader | boolean | false | false | When true, shows a loader in the modal. | | hideTitle | boolean | false | false | Hides the modal title. | | hideFooter | boolean | false | false | Hides the modal footer row. | | showSubmitBtn | boolean | false | true | Shows submit button in the modal footer. | | showCancelBtn | boolean | false | false | Shows cancel button in the modal footer. | | submitBtnText | string | false | Submit | The text to be shown on the submit/save/confirmation button. | | cancelBtnText | string | false | Cancel | The text to be shown on the cancel button. | | hideCloseBtn | boolean | false | false | — | | closeOnSubmit | boolean | false | false | The modal will be closed when the submit button is clicked. | | hideScroll | boolean | false | true | If the modal has overflow, the scrollbar will be hidden. |

QstSwitch

A custom designed switch component that allows users to toggle between two states, true or false, for enabling or disabling features or settings.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | modelValue | boolean | false | false | Used for v-model, will be set to whether the switch is active. | | label | string | false | — | Label displayed to the right of the switch, clicking on the label will toggle the switch. | | icon | string | false | — | Any Iconify value, the icon will be displayed to the right of the switch. | | color | string | false | var(--primary-color) | The color of the switch when active. | | size | string | false | 12px | Pixel value to resize the component, styles are adjusted when the size is updated. | | useEditMode | boolean | false | true | Whether the input should be editable or not. | | showLabelOnEditMode | boolean | false | true | Shows the label when the input is in edit mode.' | | tooltip | string, object | false | null | Shows a tooltip icon next to the switch. Set to a string or object, based on if tooltip props are needed. (ex/ offset, width, position, etc) | | disabled | boolean | false | false | Disables the switch, shows grayed out and unclickable. |

QstScrollContainer

A scroll wrapper component that uses a slot to render content, with configurable options to display navigation arrows, pagination dots, or a progress bar.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | useArrows | boolean | false | false | If the container has overflow, shows arrows on the ends of the container. | | useDots | boolean | false | false | If the container has overflow, shows dots per the number of slides. | | useProgressBar | boolean | false | false | If the container has overflow, shows a progress bar that fills as the user scrolls towards the end of the container. | | width | string | false | — | Width of the entire scroll container. | | color | string | false | var(--primary-color) | The accent color, used for details within the component. | | size | string | false | 20px | Pixel value to resize the component, styles are adjusted when the size is updated. (arrows, dots, icons) | | hideScroll | boolean | false | true | The scrollbar will be hidden. | | slideWidth | string | false | — | The width of each slide, if not set use a min-width on scroll items. | | autoplay | boolean | false | false | — | | duration | number | false | 4000 | — |

QstImg

A component for displaying images, with options to toggle images on hover or open in a zoomable modal.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | src | string | true | — | The source of image that will be displayed. | | alt | string | false | null | Alt text for the image. | | width | number | false | 100 | The width of the image set in px. | | height | number | false | null | The height of the image set in px. | | lazyLoad | boolean | false | false | Utilizes Intersection Observer to lazy load images, only when the image is in the viewport. | | hoverImage | string | false | null | The source of the image that will be showed when hovering over the image src. | | circle | boolean | false | false | Shows the image in a circle. | | useZoom | boolean | false | false | When the user clicks the image, a modal will open with a zoomed image. |

QstTag

A component displayed as a small tag or flag, can be set as a link, tooltip, or text to display.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. | | bgColor | string | false | var(--primary-color) | The background color of the tag. | | fontColor | string | false | #fff | The font color of the tag. | | useFade | boolean | false | false | Changes the style of the tag to use a faded color scheme. | | bold | boolean | false | false | Bolds the text of the tag. | | disabled | boolean | false | false | Disables the tag, the tag will show grayed out and unclickable. | | link | string | false | null | Clicking the link will bring the user to the provided link. | | openInNewTab | boolean | false | true | Opens the link in a new tab. | | useCloseIcon | boolean | false | false | Shows an 'x' icon in the tag, emits 'on-close' when clicked. | | iconLeft | string | false | null | Any iconify value, will show on the left side of the tag. | | iconRight | string | false | null | Any iconify value, will show on the right side of the tag. | | tooltip | string, object | false | null | Shows a tooltip dropdown when hovering over the tag. Set to a string or object, based on if tooltip props are needed. *(ex/ offset, width, position, etc) |

QstExpandableRow

A wrapper component containing a trigger and a content slot, clicking the trigger expands the row to reveal the content.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | useDiv | boolean | false | true | The trigger and content slot elements will have a div parent element. | | defaultOpen | boolean | false | false | The row will be intitially expanded by default. | | useIcon | boolean | false | false | Shows an icon at the end of the trigger row. | | rowIndex | number | false | null | Index of the expanded row, used for dynamically selecting a row. (ex/ when used in a table) | | useOpenBorder | boolean | false | false | Shows a border on the left of the row that expands with the container as it opens. | | color | string | false | var(--primary-color) | The accent color, used for details within the component. | | icon | string | false | ep:arrow-down-bold | Any iconify value, the icon will show at the end of the trigger row. |

QstPanel

A panel component to group related content or UI elements within a styled, optionally titled section for consistent layout and presentation.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | noPad | boolean | false | false | The default padding styles will be removed from the panel. | | padLight | boolean | false | false | The padding styles will be reduced from the default amount. | | scroll | boolean | false | false | The panel will be scrollable when it has a height set. | | height | string | false | — | The height of the panel. | | hideScroll | boolean | false | true | Hides the scrollbar for scrollable panels. | | fullWidth | boolean | false | false | Allows the panel to take up the full width of its parent container. | | bgColor | string | false | #fff | The background color of the panel. |

QstCheckbox

A customizable checkbox component for selecting true/false values.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | modelValue | boolean | false | false | Used for v-model, will be set to whether the checkbox is checked. | | checkbox | object | false | null | This prop is used internally, do not pass anything in. | | disabled | boolean | false | false | Disables the checkbox. | | label | string | false | — | Label displayed to the right of the checkbox, clicking on the label will toggle the checkbox. | | useLeftLabel | boolean | false | false | The label will be displayed on the left side of the checkbox. | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. | | color | string | false | var(--primary-color) | The accent color, used for details within the component. |

QstCheckboxGroup

A container component that manages a group of checkbox inputs for controlled selection behavior with an option for selecting multiple.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | modelValue | number, string|boolean|array | false | null | Used for v-model of the selected checkbox, will be set to the checkbox's value property. If using multiSelect, set to an array. | | options | array | true | — | An array of options for the group of checkboxes. Id is optional, v-model will be set to the value property. ({id?: string, value: string, label: string}) | | multiSelect | boolean | false | false | Whether multiple checkboxes can be checked. | | useRow | boolean | false | false | The checkboxes will be displayed in a row, instead of a column. | | error | string | false | — | Error to show for whole checkbox group. | | disabled | boolean | false | false | Disables all checkboxes. | | groupLabel | string | false | — | The label for the entire checkbox group. Displays above or next to the inputs if displayed in a row. | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. | | color | string | false | var(--primary-color) | The accent color, used for details within the component. |

QstRadio

A single radio button component for exclusive option selection.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | modelValue | number, string|boolean | false | null | Used for v-model of the selected radio option, will be set to the input's value property. | | radio | object | true | — | The details for the radio input. Id is optional, v-model will be set to the value property. ({id?: string, value: string, label: string}) | | disabled | boolean | false | false | Disables the radio input. | | size | string | false | 12px | Pixel value to resize the component, styles are adjusted when the size is updated. | | color | string | false | var(--primary-color) | The accent color, used for details within the component. |

QstRadioGroup

A container component that manages a group of radio buttons for controlled selection behavior.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | modelValue | number, string|boolean | false | null | Used for v-model of the selected radio option, will be set to the input's value property. | | options | array | true | — | An array of options for the group of radio inputs. Id is optional, v-model will be set to the value property. ({id?: string, value: string, label: string}) | | error | string | false | — | Error to show for whole radio group. | | disabled | boolean | false | false | Disables all radio inputs. | | useRow | boolean | false | false | The inputs will be displayed in a row, instead of a column. | | groupLabel | string | false | — | The label for the entire radio group. Displays above or next to the inputs if displayed in a row. | | size | string | false | 12px | Pixel value to resize the component, styles are adjusted when the size is updated. | | color | string | false | var(--primary-color) | The accent color, used for details within the component. |

QstAutocomplete

An autocomplete input component, with functionality for single/multiselect, search filtering, open search, and custom options.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | multiSelect | boolean | false | false | Whether only a single or multiple options can be selected. | | src | array | false | — | The source of the autocomplete options to be displayed. Types can be string[], number[], AutocompleteProp[] (AutocompleteProp: {id?: (number, string, boolean), text: string, result?: any, subtext?: string, leftImage?: string, searchData?: {label: string, value: (string, number)}[], disabled?: boolean, disabledReason?: string}). When using AutocompleteProp[], the text field is required. | | autocompleteEndpoint | string | false | — | Endpoint URL for the autocomplete. If the src prop is not set, the autocomplete will use the endpoint to fetch the data. | | modelValue | object, array|string|number | false | null | Used for v-model, will be set to the active autocomplete value. (For multiselect, v-model must be set to an array) | | result | object, array|string|number | false | null | Used for v-model:result, value will be the result property of AutocompleteProp. | | query | string, number | false | null | Used for v-model:query, value will be the searched text in the input. | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. | | dynamicSizes | object | false | null | Any screen size defined will target that screen size and below (ex/ {xl: '10px'} will change to 10px on max-width: 1549px). Screen sizes larger than what is defined will use the normal props.size. Use dynamicSizes when the dropdown is being teleported to update the dropdown's size as well. | | color | string | false | var(--primary-color) | The accent color, used for details within the component. | | width | string | false | 100% | The width of the autocomplete. | | useEditMode | boolean | false | true | Whether the input should be editable or not. | | showLabelOnEditMode | boolean | false | true | Shows a label when in edit mode. | | placeholder | string, number | false | Search | Placeholder for input. | | disabled | boolean | false | false | Disables the autocomplete, will show grayed out and unusable. | | disabledReason | string | false | — | When the input is disabled, hovering over the input will show a tooltip with the disabled reason. (This is only for the top autocomplete input. To set on an individual dropdown option, set disabledReason property on the option. (AutocompleteProp)) | | disabledTooltipPosition | string | false | right | Tooltip position for showing an option's disabled reason. Applies to both top level input and/or the dropdown option's disabled tooltips. | | numExpandedOptions | number | false | 3 | Number of options to show before showing '+X options selected' tooltip. | | hideSelectedOptions | boolean | false | false | Hides the currently selected options from dropdown. (multiselect only) | | minChars | number | false | 0 | Number of characters required in the input for the dropdown to show the filtered search results. (single select only) | | error | string | false | null | Sets the error message.' | | clearAfterSelecting | boolean | false | false | After selecting a dropdown option, the value will be cleared from the top input. (single select only) | | isLoadingOptions | boolean | false | null | Set to loading value when loading options from an endpoint. (Overrides loader in dropdown) | | dropdownHeight | string | false | 350px | The height for the autocomplete menu dropdown. | | closeMultiSelectAfterSelecting | boolean | false | false | After selecting an option, closes the autocomplete menu dropdown. (multiselect only) | | zoomedOut | boolean | false | false | Zooms out autocomplete dropdown to 80% for laptop devices. | | showErrorBelow | boolean | false | false | Shows the error message at the bottom of the input. | | allowOpenInput | boolean | false | false | Allows the user to search for any value, regardless of the dropdown options. Emits the value using 'autocomplete-search-query'. | | boldMatchingSearchValues | boolean | false | true | The matching portion of each option will be bolded based on the search value. | | showExtendedResults | boolean | false | false | Shows a link at the bottom of the dropdown to view all results in a modal. | | useMagnifyIcon | boolean | false | false | Adds a magnifying glass icon to the right of the autocomplete, clicking will submit the search value. | | useErrorIcon | boolean | false | false | An error icon will be displayed on the right of the autocomplete, hovering over will show a tooltip with the error message. | | useClearIcon | boolean | false | true | Adds X icon to the right of the autocomplete, clicking it clears the v-model value. Overrides any other previously set icons. | | icon | string | false | — | Any Iconify value, will be displayed on the right of the autocomplete. | | tooltip | string, object | false | null | Shows a tooltip dropdown when hovering over the input. Set to a string or object, based on if tooltip props are needed. (ex/ offset, width, position, etc) Tooltip is displayed inside the autocomplete, width and offset will default to match input dimensions. | | sortAlphabetically | boolean | false | true | Whether or not to alphabetically sort the list of options in the dropdown. |

QstAddressAutocomplete

A set of input fields designed for selecting an address. The first field features an address autocomplete that provides real-time location suggestions and automatically fills in address details as the user types. (Powered by the Google Maps API - requires a Google API key)

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | modelValue | object | false | null | Used for v-model, will be set to the selected address. The object will be set with the following properties: {AddressLine1: string, AddressLine2: string, City: string, State: string, StateCode: string, ZipCode: string, Country: string, CountryCode: string}. | | apiKey | string | true | — | The API key to use for the google maps API. | | useColumn | boolean | false | false | The address form will use a column layout instead of the default row. | | required | boolean | false | false | Whether the inputs are required for the user. | | useEditMode | boolean | false | true | Whether the input should be editable or not. | | errors | object | false | {contact:'',address1:'',city:'',state:'',zip:'',country:''} | The errors for each of the address inputs. | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. | | color | string | false | var(--primary-color) | The accent color, used for details within the component. |

QstSelect

A select component, with functionality for single/multiselect, search, select all logic, and custom options.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | multiSelect | boolean | false | false | Whether only a single or multiple options can be selected. | | options | array | false | [] | The dropdown options to be displayed. Types can be string[], number[], AutocompleteProp[]. (AutocompleteProp: {id?: (number, string, boolean), text: string, result?: any, subtext?: string, leftImage?: string, searchData?: {label: string, value: (string, number)}[], disabled?: boolean, disabledReason?: string}). When using AutocompleteProp[], the text field is required. | | modelValue | object, array|string|number | false | null | Used for v-model, will be set to the active select value. (For multiselect, v-model must be set to an array) | | result | object, array|string|number | false | null | Used for v-model:result, value will be the result property of AutocompleteProp. | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated.' | | dynamicSizes | object | false | null | Any screen size defined will target that screen size and below (ex/ {xl: '10px'} will change to 10px on max-width: 1549px). Screen sizes larger than what is defined will use the normal props.size. Use dynamicSizes when the dropdown is being teleported to update dropdown's size as well. | | color | string | false | var(--primary-color) | The accent color, used for details within the component.' | | width | string | false | — | The width of the select and dropdown. If unset, the sizing will adjust to the size prop for single select or 100% for multiselect. | | fullWidth | boolean | false | false | Sets the select to be full-width and take up 100% of its parent container. | | useEditMode | boolean | false | true | Whether the input should be editable or not.' | | showLabelOnEditMode | boolean | false | true | Shows a label when in edit mode.' | | placeholder | string, number | false | Select | Placeholder for select input. | | disabled | boolean | false | false | Disables the select, will show grayed out and unusable. | | disabledReason | string | false | — | When the input is disabled, hovering over the input will show a tooltip with the disabled reason. (This is only for the top select input. To set on an individual dropdown option, set disabledReason property on the option. (AutocompleteProp)) | | disabledTooltipPosition | string | false | right | Tooltip position for showing an option's disabled reason. Applies to both top level input and/or the dropdown option's disabled tooltips. | | numExpandedOptions | number | false | 3 | Number of options to show before showing '+X options selected' tooltip. | | error | string | false | null | Sets the error message.' | | useErrorIcon | boolean | false | false | An error icon will be displayed on the right of the select, hovering over will show a tooltip with the error message. | | showErrorBelow | boolean | false | false | Shows error message at the bottom of the input. | | sortAlphabetically | boolean | false | true | Whether or not to alphabetically sort the list of options in the dropdown. | | isLoadingOptions | boolean | false | null | Set to loading value when loading options from an endpoint. (Overrides loader in dropdown) | | defaultVal | string | false | — | A default value that will be added to the dropdown options as the first selected value. Selecting the default value will replace any active values. | | dropdownHeight | string | false | 350px | The height for the dropdown.' | | closeMultiSelectAfterSelecting | boolean | false | false | After selecting an option, closes the dropdown. (multiselect only) | | icon | string | false | — | Any Iconify value, will be displayed to the right of the dropdown arrow.' | | tooltip | string, object | false | null | Shows a tooltip dropdown when hovering over the input. Set to a string or object, based on if tooltip props are needed. (ex/ offset, width, position, etc) Tooltip is displayed inside the select, width and offset will default to match input dimensions. | | useSelectAll | boolean | false | false | Adds an option in the dropdown to select all options (multiselect only) |

QstText

A reusable component that accepts a value and a format type, and renders the value using the appropriate formatting (e.g. date, currency, phone number, percentage).

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | val | string, number | false | null | Value to be formatted. | | type | number | false | -1 | The type of formatting that will be applied to the value. | | isValidValue | boolean | false | null | Set to a boolean value for what should be considered a valid value. (ex/ if negative numbers are invalid) | | invalidVal | string | false | N/A | If there is an invalid value or no value set, this value will show. | | bad | boolean | false | false | Boolean expression that when true will cause the text to appear in red.' | | good | boolean | false | false | Boolean expression that when true will cause the text to appear in green. | | maxChars | number | false | null | Maximum number of characters to display before truncating and adding ... | | useCad | boolean | false | false | Displays a C$ when formatting currency. |

QstTable

A reusable table component that displays structured data with built-in support for column-based sorting, filtering, global search, pagination, and customizable rendering of rows and cells.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | items | array | true | — | Array of any type of item. These will be emitted back up to the slot scope and used for filter/search/pagination. | | animationTime | number | false | 40 | The amount of time in ms to delay the animation between each row. If not set, there will be no animation. If using basic table, you must add v-bind="props" on the root element of the slot from the parent. | | rowsPerPage | number | false | 8 | The number of records to show per page when paginating. If set to 0, there will be no pagination. | | rowsPerPageOptions | array | false | [5, 8, 10, 15, 25] | An array of numbers that will be used as the dropdown options for how many rows to show per page. | | showRowsPerPageSelector | boolean | false | true | Whether to show the selector for the number of rows per page. | | scrollable | boolean | false | false | Whether the table should be scrollable. (only when not paginating) | | colWidths | array | false | null | The width of the columns, set to a number array following the order of the columns. (ex/ [1, 5, 1]) | | headers | array | false | null | An array of the headers that will be used for the table, set in the order to be displayed in the columns. (headers are required if table should be sortable) | | visualTable | boolean | false | false | Displays a simplifies table without headers, pagination, sortable/searchable. | | showExport | boolean | false | true | Whether to show the export button in the table header. | | hideHeader | boolean | false | false | Whether to show the table header, show the header to allow searching. | | hideFooter | boolean | false | false | Whether to show the table footer. | | disableHeightCalc | boolean | false | false | The table height will not be recalculated. | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. | | expandHeaderDefault | boolean | false | true | The header will be expanded intitially to show the table search. | | height | number | false | -1 | The height of the table. (required if the table should be scrollable) | | defaultAllRowsToOpen | boolean | false | false | All expandable rows will be opened initially. | | color | string | false | var(--primary-color) | The accent color, used for details within the component. |

QstViewSelector

A selector component that presents a horizontal list of options, highlighting the active selection and allowing users to easily toggle between choices in a visually intuitive manner.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | type | number | false | 0 | Determines the type of selector being used. ({View = 0, Tabs = 1, Container = 2}) For type 'Container', each string or key will be a dynamically named slot. | | options | array | false | null | The options to be used for the selector. A string[] will display each value as the option. A SelectorOption[] will display the 'text' property, and v-model to the 'key' property. | | modelValue | string | false | null | Used for v-model, will be set to the selected option. For type SelectorOption options, the selected value will be the value of the 'key' property. | | fullWidth | boolean | false | false | The selector will become full width with evenly distributed selectors. | | useIcons | boolean | false | false | Render the option values as icons. If using SelectorOption options, set text property to icon values (use SelectorType 1 or 2). | | size | string | false | 14px | Size of the selector. | | disabled | boolean | false | false | Disables the selector from being changed. | | color | string | false | var(--primary-color) | The color of the selector. | | storageId | string | false | null | An optional id, that will store the selector's id and user's selection in local storage. |

BasicKeyValueTable

A minimal, unstyled component for displaying key value pairs in a simple column/row layout. It takes an array of key value objects and renders them as a table structure without applying any visual styles.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | keyValuePairs | array | true | — | Array of key value pairs. ({ key: string, value: any, showCopy?: boolean, slotName?: string, tooltip?: object }[]) Copying the value on-click is optional. | | hideSlot | boolean | false | false | Removes the slot wrapper element. | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |

QstKeyValueTable

A styled key value table component that presents data in a visually organized format, with styling for enhanced readability and a copy button to easily copy individual values.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | keyValuePairs | array | true | — | Array of key value pairs. ({key: string, value: any, class?: string, showCopy?: boolean, slotName?: string, tooltip?: {content: string, offset: object, isHelpMode: boolean, valueColor?: string}}[]) Copying value on-click is optional. | | colWidth | string | false | 50% | Controls the width of the key column on the left side. | | columns | number | false | 1 | Controls the number of columns to display the key value pairs. | | mobileColumns | number | false | 1 | Controls the number of columns on mobile to display the key value pairs. | | enableHighlights | boolean | false | true | Highlights the key column. | | enableHighlightsOnHover | boolean | false | false | Highlights the key value pair on hover. | | highlightsColor | string | false | #f5f5f5 | Controls the color of the highlights. | | textColor | string | false | inherit | Controls the color of the text. | | keyTextColor | string | false | inherit | Controls the color of the text for the left key column. | | borderless | boolean | false | false | Removes all borders from the table. | | backupValue | string | false | — | Optional value to pass in for when values are not set. | | hideVal | boolean | false | false | Set to true to hide the value property when using slotName to show only slot value. | | color | string | false | var(--primary-color) | The accent color, used for details within the component. | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |

VisualTable

A simple table, using a slot element to display data in visual rows, without pagination or sorting. (Set hideHeader prop to false to allow searching in the table)

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | items | array | true | — | Array of any type of item. These will be emitted back up to the slot scope and used for filtering/searching/paginating. | | animationTime | number | false | 0 | The amount of time in ms to delay the animation between each row. If not set, there will be no animation. | | height | number | false | -1 | The height of the table. (required if the table should be scrollable) | | hideHeader | boolean | false | true | Whether to show the table header, show header to allow searching. | | hideOuterBorder | boolean | false | false | Displays a border outlining the table.' |

QstBox

A simple UI component designed to highlight important information on a page. With support for customizable colors, icons, and headings, it provides a consistent way to present tips, informational messages, or warnings to users.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | heading | string | false | — | The heading text that will be displayed on the left side of the content. | | centerHeading | boolean | false | false | The heading will be centered in the box content. | | icon | string | false | — | Iconify value for the icon. | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. | | color | string | false | var(--primary-color) | The accent color, used for details within the component. | | useColumnLayout | boolean | false | false | The layout will show in a column layout, with the icon/header above the content. | | hideHeading | boolean | false | false | Hides the icon and header text. |

QstToast

A lightweight notification component used to deliver feedback, alerts, or updates to users in a non-intrusive manner. Toast messages appear on the screen based on customizable position and duration settings, providing a seamless user experience.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | history | array | false | null | Set to an array that can be used as the alert history. New toast alerts will be added to the history. | | position | string | false | topRight | The position the toast will appear on the screen. | | timeout | number | false | 2000 | The duration of time in ms that the toast will appear on the screen. | | width | string | false | 400px | The width of the toast notification. | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |

QstToastContent

The child component to QstToast, displays the toast notification. (This is only the inner component - does not have position, timeout, toggling functionality)

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | toast | object | true | — | The details of the toast notification to be displayed. | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |

QstUserSnippet

A clickable UI element designed to display a compact summary of user information (such as name, profile picture, or title). Clicking the snippet will display a pop up profile to show more detailed user data, or a link to redirect to the full profile page.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | user | object | false | null | The user details that will be shown in the profile. ({FirstName: string, LastName: string, Username: string, JobTitle: string, Image: string, Email: string, Location: string, Department: {Color: string, Department: string}}) | | defaultImg | string | false | null | A default image to be shown in the profile, if the user doesn't have an image. | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. | | hideName | boolean | false | false | Whether the user's name should show to the right of the snippet image. | | showJobTitle | boolean | false | false | Whether the user's job title should show under the user's name. | | disabled | boolean | false | false | Prevents the user snippet profile from opening when clicked. | | useLoader | boolean | false | false | Displays a loader when opening the profile. | | color | string | false | var(--primary-color) | The accent color, used for details within the component. | | profileLink | string | false | null | A link that will display on the bottom of the user's profile. (ex/ link to an external profile page) | | hideIfNa | boolean | false | false | The snippet will not show if the user is N/A. |

QstCreditCardForm

This component renders a secure and accessible credit card input form for capturing payment information. It includes fields for Card Number, Expiration Date, and CVV, with built-in formatting, validation, and error handling.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | form | object | false | null | Object for the values to be set to. ({Address: {AddressLine1?: string, AddressLine2?: string, City?: string, State?: string, ZipCode?: string, Country?: string, ContactPerson?: string, Name?: string, PhoneNumber?: string}, CVV: string, ExpirationMonth: string, ExpirationYear: string, Number: string}) | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. |

QstDigitInput

This component generates a specified number of input fields for entering passcodes and one time passcodes (OTPs), featuring smooth auto-focus and navigation. It supports mobile OTP autofill, ensuring seamless automatic filling on iOS and Android devices.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | numDigits | number | false | 4 | The number of digits required, creates one input per digit. | | color | string | false | var(--primary-color) | The accent color, used for details within the component. | | size | string | false | 14px | Pixel value to resize the component, styles are adjusted when the size is updated. | | autoSubmit | boolean | false | true | Submits and clears inputs after the last required digit is entered. (emits on-submit event) | | useOtpInput | boolean | false | false | Uses an autocomplete input to allow one time passcodes to be prefilled on mobile. | | error | string | false | null | Shows an error message, displayed below the inputs. |

QstImgGallery

A media gallery designed to display a collection of images and/or videos in an interactive and responsive format. It provides intuitive navigation, supports zooming on media items, and adapts to various screen sizes.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | modelValue | boolean | false | false | Used for v-model, will be set to whether the gallery is currently showing. | | startingItem | string | false | null | The image or video that the gallery should be focused on when opening, defaults to the first image/video. | | images | array | false | [] | The array of images that will be displayed in the gallery. (Set to string[] of image urls) | | videos | array | false | [] | The array of videos that will be displayed in the gallery. (Set to {thumbnail: string, iframe: string}[]) | | color | string | false | var(--primary-color) | The accent color, used for details within the component. | | width | string | false | 75% | The width of the gallery. | | height | string | false | 500px | The height of the gallery. |

QstTimeline

The timeline component presents a chronological list of events or actions, each displaying a specific date. It supports both expanded and collapsed layouts, and offers customizable markers, icons, or images for each entry. It also includes the ability to expand changes between previous and new values, making it especially useful for tracking updates or data changes over time.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | timelineLog | array | true | — | An array of timeline objects to be displayed. ({ActionType: enum {Edit, Add, Delete, Other}, Identifier: string, Field: string, OldValue?: string, NewValue?: string, User: object | string, Timestamp: string, Application: string}[]) | | heightPerEntry | string | false | — | Height per timeline entry (px), if used with props.height it determines the entries per scroll. | | entriesPerScroll | number | false | null | The number of timeline entries to show per pagination scroll, the height of the timeline will be calculated by this amount, unless assigned in props.height. | | maxHeightPerEntry | string | false | — | Max height (px) for each timeline entry, if set this will override the height per entry and entries per scroll. | | height | string | false | — | Max-height (px) of the entire timeline container. | | rowsPerPage | number | false | 8 | In table view, determines how many records to show per page. If set to 0, there will be no pagination. | | rowsPerPageOptions | array | false | [5, 8, 10, 15, 25] | The set of number options that will be used for the rows per page selector dropdown. (number[]) | | showUser | boolean | false | false | Shows the user information (name and image) in the timeline entry. | | showApp | boolean | false | false | Shows the app information and identifier in the timeline entry. | | showUserInBubble | boolean | false | false | Shows the user image as the timeline entry icon. (collapsed timeline) | | hideIdentifierRow | boolean | false | false | Hides the application and identifier row in each timeline entry. | | collapsedTimeline | boolean | false | false | Shows a collapsed thinner version of the timeline, with only the timeline line and tooltips for showing all entry details. | | showViewSelector | boolean | false | true | Shows a view selector used for toggling between a visual timeline and table view. | | hideScroll | boolean | false | false | Hides the scrollbar on the timeline. | | hideHeading | boolean | false | false | Hides the entire heading wrapper element, including title and view selector. | | size | string | false | 16px | Pixel value to resize the component, styles are adjusted when the size is updated.' | | useUniformEntrySize | boolean | false | true | All timeline entries will be set to the same uniform height. |

QstStatusPipeline

This component is a versatile UI element designed to visually represent progress or stages in a process, supporting both horizontal and vertical orientations to fit various layouts. Each stage in the pipeline can display a label and an associated date, allowing users to track progress over time. A distinctive marker highlights the current date. This component is ideal for workflows, project timelines, or delivery tracking interfaces.

| Name | Type | Required | Default | Description | |------|------|----------|---------|-------------| | showToday | boolean | false | true | Whether a marker should be shown for the current date, the date will show above the pipeline respective to the existing dates. | | statuses | array | false | [] | An array of the status objects to be displayed in the component. ({label: string, condition: boolean, date?: string, slot?: string, isFailed?: boolean}[]) | | percentage | number | false | -1 | The percentage that the pipeline should show filled. | | vertical | boolean | false | false | Changes the orientation to vertical, rather than the default horizontal. | | verticalOpposite | boolean | false | false | Reverses the vertical orientation, to show the starting status at the bottom. | | verticalHeight | string | false | 600px | The height for vertical pipelines. (px) | | fillToToday | boolean | false | false | Whether the status pipeline should show filled to reach the current date. | | lastStatusFarRight | boolean | false | false | Shows the last status fully extended to the right of the pipeline. | | startAtEnds | boolean | false | false | Whether the filled bar should start from the end of the pipeline. | | showChecks | boolean | false | false | Whether the status markers should show as checkmark icons. | | showDatesProportionally | boolean | false | false | Whether the dates should show proportionally in distance from each other on the pipeline. | | rotateLabels | boolean | false | false | The labels will show rotated along the pipeline at a slant, rather than horizontally. Useful for preventing overlapping when multiple statuses are close together. |