vue-quest-ui

A reusable component library
4,005
vue vue3 component library
Install
npm install vue-quest-ui
Latest Version:0.0.92
Vue:3
Last Updated:Mar 12, 2026
Links: npm
Maintainer: melee-x

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

Props

QstIcon

A customizable icon component that displays Iconify icons with a built-in library of shortcut icons (qst-*), optional circular styling, and color support.

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 —
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 (height in overrideStyles or slot element).
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.
zIndex number false 90002 The z-index for the dropdown content.
disabled boolean false false Disables the dropdown and prevents it from opening.
teleportTo string false #app The selector of where to teleport the dropdown.
dropdownBgImage string false — If provided, shows an image in the background of the dropdown.

QstLoader

A loader component with support for inline, absolute, and full-page positioning modes, optional backdrop overlay, custom loading images, and subtext.

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.
closeOnOutsideClick boolean false true Closes the modal on outside click and emits the 'on-cancel' event. (if cancelOnModalClose is also true)
cancelOnModalClose boolean false true Emits the 'on-cancel' event when the modal closes by either clicking the 'X' icon or clicking outside the modal. (event is always emited when showCancel is true and user clicks Cancel button)
hideOverlay boolean false false Removes the overlay behind the modal.

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 horizontal scroll wrapper component with configurable navigation arrows, pagination dots, progress bar, and autoplay functionality for carousel-like content.

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 support for lazy loading, hover image toggling, zoomable modal view, and optional overlay and delete functionality.

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 string false 100px The width of the image.
height string false — The height of the image.
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.
showOverlay boolean false false Shows an overlay when hovering over the image.
useDeleteBtn boolean false false Shows a delete button when hovering over the image, emits the 'on-delete' event.

QstTag

A customizable label component for displaying tags, badges, or status indicators with support for links, icons, tooltips, and dismissible close buttons.

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
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
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
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 single/multiselect support, search filtering, custom option rendering, and optional API endpoint fetching.

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
result object, array string number false
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 input component with single/multiselect support, search filtering, custom option rendering, and select all support.

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
result object, array string number false
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.
showCopy boolean false false Shows a copy icon to the right of the value to allow the user to copy the formatted value.
goodColor string false #28C76F The color for the text value when good is true.
badColor string false #CA0F11 The color for the text value when bad is true.

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 with three display modes (view toggle, tabs, and container) for switching between options, with optional local storage persistence for user selections.

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 notification component for displaying success, error, warning, and info alerts with customizable positioning and duration. Includes a promise-based loading toast that automatically resolves to success or error.

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.

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.
showName boolean false true 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

A credit card input form for capturing payment information, with fields for card number, expiration date, and CVV, including automatic formatting and validation.

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

A multi-digit input component for entering passcodes and OTPs, featuring auto-focus navigation between fields and mobile OTP autofill support.

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

A timeline component for displaying a chronological list of events with expandable entries showing changes between previous and new values. Supports expanded and collapsed layouts with customizable markers.

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
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

A progress indicator component for visualizing stages in a workflow or timeline, supporting horizontal and vertical orientations with date-based positioning and a today marker.

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.

QstImageUploader

An image upload component with drag and drop functionality, supporting single or multiple file uploads with thumbnail previews and delete capabilities.

Name Type Required Default Description
modelValue array true — The array of uploaded image files. (cannot be updated from the parent)
label string false — A label to show above the file input.
uploadLabel string false Browse or Drag and Drop files to upload The label that shows on the image selector.
error string false — Shows an error message below the input
useMultiUpload boolean false true Allows multiple images to be uploaded at once.
hideDragAnimation boolean false false Removes the scale animation when drag and dropping an image on the file uploader.

Related Packages

seeroad-libs

A collection of utility classes

1,068
library
tt-ui-comp-lib
796
component library
@orderprotection/vue

Order Protection components implemented in Vue

25,773
component library vue
@publishvue/vue3complib

Vue 3 component library.

12,924 0
component library vue3
supre-ui

A UI library for Vue2 applications

10,417
library vue supre

Version History

Version Released Vue License
0.0.92 ^3.2.0 || ^3.5.0
0.0.91 ^3.2.0 || ^3.5.0
0.0.90 ^3.2.0 || ^3.5.0
0.0.89 ^3.2.0 || ^3.5.0
0.0.88 ^3.2.0 || ^3.5.0