Template Ecosystem Components

Overview

Qelos provides a rich set of pre-designed components that you can use in your templates. These components are designed to be used as native HTML tags in kebab-case format and must have closing tags.

All components are globally registered and can be used directly in your templates without importing them.

Available Components

Here's a list of available components in the Qelos template ecosystem:

Documented Components

The following components have detailed documentation:

• AI Chat - Complete AI chat interface with streaming, file attachments, and customizable UI
• Form Input - Input component for forms
• Form Row Group - Group form inputs in rows
• Save Button - Button for saving forms
• Monaco - Code editor component
• Quick Table - Simplified table component
• V Chart - Chart visualization component
• Content Box - Component that loads HTML content blocks from the database
• Copy To Clipboard - Button to copy content to clipboard
• Empty State - Component for empty state display
• Life Cycle - Component for displaying lifecycle stages
• Q Pre - Pre-formatted text component with HTML escaping and line break handling

Other Available Components

The following components are also available in the Qelos template ecosystem (documentation coming soon):

• Edit Header - Header for edit pages
• Info Icon - Icon with tooltip information
• Block Item - Block container for content
• List Page Title - Title component for list pages
• General Form - Generic form component
• Blueprint Entity Form - Form for blueprint entities
• Confirm Message - Confirmation dialog component
• Remove Button - Button for deletion actions
• Editable Content - Content that can be edited inline
• Remove Confirmation - Confirmation dialog for delete actions
• Stats Card - Card for displaying statistics
• Q Rating - Rating component

Using Components

All components must be used with kebab-case naming and must have closing tags. For example:

<form-input label="Name" v-model="name"></form-input>
<save-button @click="saveData"></save-button>
<content-box title="User Information">Content goes here</content-box>

Directives

In addition to components, the following directives are available:

• v-loading - Adds loading state to an element

Example usage:

<div v-loading="isLoading">Content that will show loading state</div>

---

© Velocitech LTD. All rights reserved.