VDS
Vtiger Design System (a.k.a VDS) provides core HTML components as part of VTAP. These components can be used when creating your custom pages, widgets, popups.
v-select2
Drop-down component with options.
<v-select2 :required=true :emptyOption=false
v-model="" :multiple=false :options=""></v-selec2>
| Property | Type | Default | Description |
|---|---|---|---|
| required | bool | false | true - mandatory, false - optional |
| emptyOption | bool | false | true - show empty option, false - otherwise |
| v-model | string | - | store the choice made into variable |
| multiple | bool | false | true - allow multiple selection, false - otherwise |
| options | object | - | list of map: [ {label: 'Private', value: 'private'}. {label: 'Public', value: 'public'} ] |
vds-switch
A custom toggle switch component.
<vds-switch v-model="" :disabled=false :status=false label="" ></vds-switch>
| Property | Type | Default | Description |
|---|---|---|---|
| v-model | string | - | store the choice made into variable |
| disabled | bool | false | true - disables the switch, making it non-clickable |
| status | bool | false | true - controls the checked state of the switch i.e switch is on |
| label | string | - | optional text label displayed next to the switch |
vds-checkbox
A custom checkbox component.
<vds-checkbox v-model="" :disabled=false :status=false name="" :type="" label="" ></vds-checkbox>
| Property | Type | Default | Description |
|---|---|---|---|
| v-model | string | - | store the choice made into variable |
| disabled | bool | false | true - disables the checkbox, making it non-clickable |
| status | bool | false | true - controls the checked state of the checkbox i.e checkbox is checked |
| name | string | - | defines the name attribute of the checkbox, helps in identifying the checkboxes |
| type | string | checkbox | radio - shows radio button instead of checkbox |
| label | string | - | optional text label displayed next to the switch |
vds-progress
A progress bar component.
<vds-progress :value="" :size="'lg'" customColourCode="" :total="" @vds::progressbar::clicked=""></vds-progress>
| Property | Type | Default | Description |
|---|---|---|---|
| value | number | - | A number representing the progress percentage to be shown in the progress |
| size | string | 'lg' | A string controlling the size of the progress bar. It accepts values like 'xxl', 'xl', 'lg', 'md', 'sm' |
| customColorCode | string | - | A string allowing you to specify a custom background color for the progress bar |
| total | - | - | Displays a value inside the progress made of the progress bar |
| vds::progressbar::clicked | - | - | Binds the custom click event to a method |
vds-datepicker
A date picker component.
<vds-datepicker
:dateFormat="'YYYY-MM-DD'"
:name=""
:validators="{ required: true }"
:placeHolder="'Select Date'"
:readonly="false"
:allowDefault="false"
:pickerPosition="{ horizontal: 'right', vertical: 'bottom' }"
/>
| Property | Type | Default | Description |
|---|---|---|---|
| dateFormat | string | - | Defines the format in which the date will be displayed |
| name | string | - | The name of the date picker input field |
| validators | object | - | Custom validation rules for the date input (e.g., { required: true }) |
| placeHolder | string | - | Placeholder text to show when no date is selected |
| readonly | bool | false | true - disables the input so the user cannot interact with or modify it |
| allowdefault | bool | false | true - sets a default date (current date) when no date is selected |
| pickerPosition | object | - | Controls the position of the date picker widget (e.g., { horizontal: 'right', vertical: 'bottom' }) |
vds-daterange-picker
A date range picker component that allows users to select a range of dates.
<vds-daterange-picker
v-model="dateRange"
:dateFormat="'MM/DD/YYYY'"
:name=""
:showDefaultDateRange="true"
></vds-daterange-picker>
| Property | Type | Default | Description |
|---|---|---|---|
| v-model | string | - | store the choice made into variable |
| dateFormat | string | 'MM/DD/YYYY' | The format for displaying dates |
| name | string | - | The name attribute for the input field |
| showDefaultDateRange | bool | false | true - the date range picker will automatically show the default date range when initialized |
vds-datepicker-inline
An inline date picker component that allows users to select a single date.
<vds-datepicker-inline
v-model="selectedDate"
:dateFormat="'MM/DD/YYYY'"
></vds-datepicker-inline>
| Property | Type | Default | Description |
|---|---|---|---|
| v-model | string | - | store the choice made into variable |
| dateFormat | string | 'MM/DD/YYYY' | The format for displaying dates |
vds-time-picker
A time picker component that allows users to select a time.
<vds-timepicker v-model="selectedTime" :timeFormat="'24'" :field="{ name: 'appointmentTime', validateRules: { required: true } }" :disabled="false"></vds-timepicker>
| Property | Type | Default | Description |
|---|---|---|---|
| v-model | string | - | store the choice made into variable |
| timeFormat | string, number | - | Defines the time format. Use '24' for 24-hour format or '12' for 12-hour format |
| field | object | { validateRules: {} } | An object containing the field name and validation rules for the time picker |
| disabled | bool | false | true - the user wont be able to select time |
vds-nav
A navigation component for paginated data.
<vds-nav
:currentPage=""
:totalCount=""
:pageLimit=""
:showPageJump="true"
/>
| Property | Type | Default | Description |
|---|---|---|---|
| currentPage | number | - | Controls the currently active page number for pagination |
| totalcount | number | - | Represents the total number of records available across all pages |
| pageLimit | number | - | Defines the number of records displayed on each page |
| showPageJump | bool | true | true - a dropdown is displayed allowing users to jump to a specific page, false - doesn't show any dropdown |
vds-input-clear
An enhanced input component with clearing functionality and custom events.
<vds-input-clear
:inputvalue=""
:placeholder=""
:iconclass="true"
:autoFocus="true"
@vds::search::on::keyup="onKeyUp"
@vds::search::on::enter="onEnter"
/>
| Property | Type | Default | Description |
|---|---|---|---|
| inputvalue | string | - | This is the value that will be entered into the input field |
| placeholder | string | - | Placeholder text shown inside the input field when it is empty |
| iconclass | bool | false | true - displays an icon inside the input field for clearing the input |
| autofocus | bool | false | true - the input field is automatically focused when the component is mounted |
| vds::search::on::keyup | event | - | This event is emitted whenever a key is pressed inside the input field. The event object is passed as an argument, which you can use to capture the key pressed or other details |
| vds::search::on::enter | event | - | This event allows you to easily trigger actions such as performing a search when the user submits their query by pressing the "Enter" key |
vds-field-label
A custom field label component.
<vds-field-label
:field="fieldObject"
module="ModuleName"
:isEditView="true"
:smallLabels="false"
:largeLabels="true"
/>
| Property | Type | Default | Description |
|---|---|---|---|
| field | object | - | Object containing field information, such as name, label, and type |
| module | string | - | Module Name |
| isEditView | bool | false | Indicates if the current view is an edit view |
| smallLabels | bool | false | Controls if the label should be displayed in a smaller size |
| largeLabels | bool | false | Controls if the label should be displayed in a larger size |
vds-inventory-adress-dropdown
A custom dropdown component to select or copy an address from organization or related records in the inventory system.
<vds-inventory-address-dropdown :field="{fieldname: 'bill_street'}" :editable=true :record="recordData"></vds-inventory-address-dropdown>
| Property | Type | Default | Description |
|---|---|---|---|
| field | object | - | It is a mandatory field. Field object that represents the address field in the inventory, used to determine if the field is for billing or shipping address (i.e bill_street or ship_street) |
| editable | bool | true | false - the dropdown is disabled and non-selectable |
| record | object | - | The record object that contains multipleaddresses. These addresses are displayed as options in the dropdown for selection. Options are grouped under "Copy from Organization" (for account_id addresses) or "Copy from Related To" (for related_to addresses), with additional options for copying between billing and shipping addresses |
Example for recordData :
recordData: {
multipleaddresses: {
account_id: [
{ id: '1', name: '' },
{ id: '2', name: '' }
],
related_to: [
{ id: '3', name: '' },
{ id: '4', name: '' }
]
}
}
vds-record-star
A component to toggle the star status of a record.
<vds-record-star :status="false" :recordId="" module="" @update:status=""></vds-record-star>
| Property | Type | Default | Description |
|---|---|---|---|
| status | bool | false | true - indicates the record is starred |
| recordId | number | false | crmID of the record |
| module | string | - | Module Name to which the record belongs |
| @update:status | event | - | Emitted when the star status changes. Passes the updated status (true for starred, false for unstarred) |
vds-email-search
A component to search, select, and manage email addresses from multiple sources (e.g., users, groups, and modules).
<vds-email-search
:searchModule="''"
:sourceModule="''"
:searchUsers="1"
:searchGroups="1"
:selected=""
:maximumSelectionLength=""
:showNoResultsMsg="false"
/>
| Property | Type | Default | Description |
|---|---|---|---|
| searchModule | string, array | - | Defines the module(s) to search within. Accepts either a string or an array of module names |
| sourceModule | string | - | Specifies the source module to use for the email search |
| searcUsers | number | - | Controls whether users are included in the search (1 to include, 0 to exclude) |
| searchGroups | number | - | Controls whether groups are included in the search (1 to include, 0 to exclude) |
| selected | string, array, object | - | The currently selected email address(es). Can be a string, array, or object depending on the selection |
| maximumSelectionLength | number | 0 | Sets the maximum number of email addresses that can be selected. When the limit is crossed, shows a max selection message |
| showNoResultsMsg | bool | false | true - Displays a custom "no results found" message if no matching emails are found |
vds-iframe
A component to render content inside an iframe
<vds-iframe :content="iframeContent"></vds-iframe>
| Property | Type | Default | Description |
|---|---|---|---|
| content | string | - | HTML content to be displayed inside the iframe |
vds-document-basic
A component to display basic text content.
<vds-document-basic :content="textContent"></vds-document-basic>
| Property | Type | Default | Description |
|---|---|---|---|
| content | string | - | The text content to be displayed |
vds-document-pdf
A component to display a PDF Document within an iframe.
<vds-document-pdf :filePath="pdfFilePath" :divheight="iframeHeight"></vds-document-pdf>
| Property | Type | Default | Description |
|---|---|---|---|
| filePath | string | - | The path or URL to the PDF file to be displayed |
| divheight | number | - | The height of the iframe in pixels |
vds-document-opendoc
A component to display OpenDocument files (like .odt) within an iframe.
<vds-document-opendoc :recordId="" :fileId=""></vds-document-opendoc>
| Property | Type | Default | Description |
|---|---|---|---|
| recordId | string | - | The ID of the record containing the document |
| fileId | string | - | The ID of the file to be displayed |
vds-document-image
A component to display an image.
<vds-document-image :imgPath="path/to/imageFile"></vds-document-image>
| Property | Type | Default | Description |
|---|---|---|---|
| image | string | - | The path or URL to the image file to be displayed |
vds-document-audio
A component to display audio player for playing audio files.
<vds-document-audio :filePath="path/to/audioFile" :fileType=""></vds-document-audio>
| Property | Type | Default | Description |
|---|---|---|---|
| filePath | string | - | The path or URL to the audio file to be played |
| fileType | string | - | The type of the audio file (e.g., audio/mpeg) |
vds-document-video
A component to display a video player for playing videos.
<vds-document-video :filePath="path/to/videoFile" :fileType=""></vds-document-video>
| Property | Type | Default | Description |
|---|---|---|---|
| filePath | string | - | The path or URL to the video file to be played |
| fileType | string | - | The MIME type of the video file (e.g., video/mp4) |
vds-wizardtiles
A component to display a set of action tiles in a wizard view.
<vds-wizardtiles :actions="actions" @vds::wizardtile::select="handleActionSelect"/>
| Property | Type | Default | Description |
|---|---|---|---|
| actions | object | {} | An object containing a list of actions. Each action should have icon, info, and label properties |
| @vds::wizardtile::select | Event | - | Emitted when a tile is clicked. The payload is the clicked action object |
vds-multiple-selection-tiles
A component to display a list of actions as selectable tiles with checkboxes.
<vds-multiple-selection-tiles :actions="actions" :selectedActions="selectedActions" @vds::wizardtilerectangle::select="handleSelect"/>
| Property | Type | Default | Description |
|---|---|---|---|
| actions | object | - | An object or array containing a list of actions. Each action should have an id and a label property |
| selectedActions | array | - | An array of action IDs that are currently selected |
| @vds::wizardtilerectangle::select | Event | - | Emitted when a tile is clicked. The payload is the clicked action object |
vds-wizardtiles-rectangle
A component to display a list of actions in rectangular tiles with icons.
<vds-wizardtiles-rectangle :actions="actions" @vds::wizardtilerectangle::select="handleSelect"/>
| Property | Type | Default | Description |
|---|---|---|---|
| actions | object | - | An object containing a list of actions. Each action should have label, icon, and optionally isAllowed properties |
| @vds::wizardtilerectangle::select | Event | - | Emitted when a tile is clicked. The payload is the clicked action object |
vds-file-icon
A component to display a file icon with customizable size and color.
<vds-file-icon :icon="" :customClass=""/>
| Property | Type | Default | Description |
|---|---|---|---|
| icon | String/Object | fa-info-circle | Specifies the Font Awesome icon class to display. It can be a string or an object |
| customClass | String | - | An optional class to apply additional styling to the icon |
Examples of icon :
fa-file-pdf
fa-file-image
fa-file
fa-file-word
fa-file-excel
fa-file-archive
fa-file-video
fa-file-powerpoint
fa-file-spreadsheet
fa-file-csv
fa-file-audio
fa-folder
vds-multi-step-wizard
A component to display a multi-step process as breadcrumb-like navigation.
<vds-multi-step-wizard :selectedStep="currentStep" :steps="stepsList"/>
| Property | Type | Default | Description |
|---|---|---|---|
| selectStep | String, Number | - | The current step in the wizard. Can be used with v-model to bind the selected step to a parent component |
| steps | object | - | An object containing the list of steps in the wizard. The object keys represent step identifiers (String or Number), and the values are the labels displayed for each step |
vds-color-picker
A color picker component to select colors from a predefined palette or choose a custom color.
<vds-color-picker v-model="selectedColor" :selectedColors="['#ff0000','#00ff00']" />
| Property | Type | Default | Description |
|---|---|---|---|
| v-model | string | - | store the choice made into variable |
| selectedColors | Array | - | An array of colors to prioritize and display prominently at the end of the color list |
vds-rating
A star rating component that allows users to rate something by clicking on stars.
<vds-rating :rating="" :editable="true"></vds-rating>
| Property | Type | Default | Description |
|---|---|---|---|
| rating | Number, String | 0 | The current rating value to display |
| editable | bool | true | false - rating cannot be changes by the user |
vds-typing-progress
A visual indicator for typing activity, used in chat applications to show that someone is typing.
<vds-typing-progress></vds-typing-progress>
vds-circular-progress
A circular progress bar that shows a percentage completion in a circular format.
<vds-circular-progress :radius="50" :progress="70" :stroke="10" progressMessage="70% Complete"></vds-circular-progress>
| Property | Type | Default | Description |
|---|---|---|---|
| radius | number | - | The radius of the circular progress bar |
| progress | number | - | The percentage of progress (0-100) |
| stroke | number | - | The width of the stroke |
| progressMessage | string | - | A message displayed inside the circular progress bar |