Vue 3 library components

Available form components

1. BaseInput

Input tag component

Props:

| Prop | Type | Required | Default | Description | |------------------------|------------------|--------------|-------------|--------------------------------------------------------------------------------------------------------------------------------------------------| | id | String | Yes | - | The unique identifier for the input field. | | type | String | No | 'text' | El tipo de input (ex.: text, password, email). | | modelValue | String\|Number | No | '' | Variable value, use as v-model="variable". | | label | String\|null | No | null | Input label. | | display | String\|null | No | null | If the value is null, the label and input are displayed as block. If the value is inline, the label is displayed to the left of the input. | | placeholder | String | No | '' | Input placeholder. | | disabled | Boolean | No | false | Disable input. | | prependIcon | String\|null | No | null | Font awesome icon class to show icon on input's left. | | appendIcon | String\|null | No | null | Font awesome icon class to show icon on input's right. | | validation | Object\|null | No | null | Vuelidate object if needed: (ex.: :validation="v$.name"). | | wrapperClass | String | No | 'col-12' | CSS class for the wrapper element around the input field. | | inputClass | String | No | null | CSS class for the input field itself. | | labelClass | String | No | null | CSS class for the label element. | | validationErrorClass | String | No | null | CSS class for displaying validation errors. |

import {BaseInput} from 'dracoder-vue-library';

<BaseInput
    id="example-text"
    v-model="inputValue"
    label="Example input"
    :validation="v$.inputValue"
    placeholder="Example input"
/>

2. BaseTextarea

Textarea component.

Props:

| Prop | Type | Required | Default | Description | |------------------------|------------------|--------------|-------------|--------------------------------------------------------------------------------------------------------------------------------------------------------| | id | String | Yes | - | The unique identifier for the textarea field. | | modelValue | String\|Number | No | '' | Variable value, use as v-model="variable". | | label | String\|null | No | null | Textarea label. | | display | String\|null | No | null | If the value is null, the label and textarea are displayed as block. If the value is inline, the label is displayed to the left of the textarea. | | placeholder | String | No | '' | Textarea placeholder. | | disabled | Boolean | No | false | Disable textarea. | | icon | String\|null | No | null | Font awesome icon class to show icon on textarea's left. | | internalIcon | String\|null | No | null | Font awesome icon class to show icon on textarea's right. | | validation | Object\|null | No | null | Vuelidate object if needed: (ex.: :validation="v$.name"). | | wrapperClass | String | No | 'col-12' | CSS class for the wrapper element around the textarea field. | | inputClass | String | No | null | CSS class for the textarea field itself. | | labelClass | String | No | null | CSS class for the label element. | | validationErrorClass | String | No | null | CSS class for displaying validation errors. |

import {BaseTextarea} from 'dracoder-vue-library';

<BaseTextarea
    id="example-text-area"
    v-model="baseTextAreaValue"
    label="Textarea example"
    placeholder="Text area content example"
    wrapper-class="col-12"
    :validation="v$.baseTextAreaValue"
    rows="5"
/>

3. BaseWysiwygEditor

Rich text component (WYSIWYG).

Props:

| Prop | Type | Required | Default | Description | |------------------------|------------------|--------------|-------------|--------------------------------------------------------------| | id | String | Yes | - | The unique identifier for the textarea field. | | html | String\|Number | No | '' | Variable value, used as v-model="inputValue" | | label | String\|null | No | null | Textarea label. | | placeholder | String | No | '' | Textarea placeholder. | | validation | Object\|null | No | null | Vuelidate object if needed: (ex.: :validation="v$.name"). | | validationErrorClass | String | No | null | CSS class for displaying validation errors. | | disabled | Boolean | No | false | Disable textarea. | | wrapperClass | String | No | 'col-12' | CSS class for the wrapper element around the textarea field. | | labelClass | String | No | null | CSS class for the label element. |

import {BaseWysiwygEditor} from 'dracoder-vue-library';

<BaseWysiwygEditor
    id="description"
    v-model:html="baseWysiwygEditorValue"
    :label="$t('Example wysiwyg editor')"
    :validation="v$.baseWysiwygEditorValue"
/>

4. BaseMultiselect

Select multiple options component.

Props:

| Prop | Type | Required | Default | Description | |------------------------|----------------|--------------|--------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------| | id | String | Yes | - | The unique identifier for the input field. | | modelValue | Array | Yes | '' | Variable value, used as v-model="inputValue" | | label | String\|null | No | null | Input label. | | display | String\|null | No | null | If the value is null, the label and input are displayed as block. If the value is inline, the label is displayed to the left of the input. | | placeholder | String | No | '' | Input placeholder. | | disabled | Boolean | No | false | Disable input. | | icon | String\|null | No | null | Font awesome icon class to show icon on input's left. | | internalIcon | String\|null | No | null | Font awesome icon class to show icon on input's right. | | appendIcon | String\|null | No | null | Font awesome icon class to show icon on input's right. | | validation | Object\|null | No | null | Vuelidate object if needed: (ex.: :validation="v$.name"). | | options | Array | Yes | | Available options array. | | `trackBy` | `String` | Yes | | Key element for search in options. | | optionLabel | String | Yes | `` | Key element for show selected object. | | customFunctionLabel | Function | No | null | Custom function that returns key element for show selected object. | | readonly | Boolean | No | false | Show input as readonly . | | emptyListMessage | String | No | 'No options available' | Message shown if search returns no results. | | validationErrorClass | String | No | null | CSS class for displaying validation errors. | | multiselectClass | String | No | null' | CSS class for input. | | wrapperClass | String | No | 'col-12' | CSS class for the wrapper element around the input field. | | labelClass | String | No | null | CSS class for the label element. |

import {BaseMultiselect} from 'dracoder-vue-library';

const multiselectValue = ref()
const multiselectOptions = [
    {id: 1, fullName: 'John Doe'},
    {id: 2, fullName: 'Jane Doe'},
    {id: 3, fullName: 'John Smith'},
    {id: 4, fullName: 'Jane Smith'},
]

<BaseMultiselect
    id="example-multiselect"
    v-model="multiselectValue"
    label="Example multiselect"
    placeholder="Multiselect option"
    option-label="fullName"
    track-by="id"
    :options="multiselectOptions"
    :validation="v$.multiselectValue"
/>

5. BaseSelector

Single value selector component

Props:

| Prop | Type | Required | Default | Description | |------------------------|------------------------|--------------|--------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------| | id | String | Yes | - | The unique identifier for the input field. | | modelValue | String\|Number\|null | Yes | '' | Variable value, used as v-model="inputValue". | | label | String\|null | No | null | Input label. | | display | String\|null | No | null | If the value is null, the label and input are displayed as block. If the value is inline, the label is displayed to the left of the input. | | placeholder | String | No | '' | Input placeholder. | | disabled | Boolean | No | false | Disable input. | | internalIcon | String\|null | No | null | Font awesome icon class to show icon on input's right. | | appendIcon | String\|null | No | null | Font awesome icon class to show icon on input's right. | | validation | Object\|null | No | null | Vuelidate object if needed: (ex.: :validation="v$.name"). | | options | Array | Yes | | Available options array. | | `trackBy` | `String` | Yes | | Key element for search in options. | | optionLabel | String | Yes | `` | Key element for show selected object. | | customFunctionLabel | Function | No | null | Custom function that returns key element for show selected object. | | readonly | Boolean | No | false | Show input as readonly. | | emptyListMessage | String | No | 'No options available' | Message shown if search returns no results. | | validationErrorClass | String | No | null | CSS class for displaying validation errors. | | multiselectClass | String | No | null' | CSS class for input. | | wrapperClass | String | No | 'col-12' | CSS class for the wrapper element around the input field. | | labelClass | String | No | null | CSS class for the label element. |

import {BaseSelector} from 'dracoder-vue-library';

const selectValue = ref()
const selectOptions = [
    {id: 1, fullName: 'John Doe'},
    {id: 2, fullName: 'Jane Doe'},
    {id: 3, fullName: 'John Smith'},
    {id: 4, fullName: 'Jane Smith'},
]

<BaseSelector
    id="base-selector-example"
    v-model="selectValue"
    label="Base selector example"
    placeholder="Select example"
    option-label="fullName"
    track-by="id"
    :options="selectOptions"
    :validation="v$.selectValue"
    class="w-1/3"
/>

6. BaseSwitch

Checkbox component as switch

Props:

| Prop | Type | Required | Default | Description | |------------------|----------------|--------------|-------------|--------------------------------------------------------------------------------------------------------------------------------------------------| | id | String | Yes | - | The unique identifier for the input field. | | modelValue | Boolean | Yes | '' | Variable value, used as v-model="inputValue". | | label | String\|null | No | null | Input label. | | display | String\|null | No | null | If the value is null, the label and input are displayed as block. If the value is inline, the label is displayed to the left of the input. | | disabled | Boolean | No | false | Disable input. | | enableStatus | Boolean | No | true | Show status label. | | labelChecked | String\|null | No | null | Text label for checked status. | | labelUnchecked | String\|null | No | null | Text label for unchecked status. | | readonly | Boolean | No | false | Show input as readonly. | | labelClass | String | No | null | CSS class for the label element. |

import {BaseSwitch} from 'dracoder-vue-library';

<BaseSwitch
    id="autoSelected"
    v-model="baseSwitchValue"
    :enable-status="true"
    label-checked="Select automatically"
    label-unchecked="Select automatically"
/>

7. BaseInputFile

Upload file component.

Props:

| Prop | Type | Required | Default | Description | |--------------|-------------------------------|--------------|---------------------|-----------------------------------------------------------| | id | String | No | 'base-input-file' | The unique identifier for the input field. | | attachment | Object\|Array\|String\|null | Yes | '' | File variable, used as v-model:attachment="fileValue". | | multiple | Boolean | No | false | Allow multiple files. | | onlyImage | Boolean | No | false | Allow to upload only image. | | validation | Object\|null | No | null | Vuelidate object if needed: (ex.: :validation="v$.name"). |

import {BaseInputFile} from 'dracoder-vue-library';

<label class="font-bold mb-1 text-secondary">{{ $t('Example input file') }}</label>
<base-input-file
    id="sitemap"
    v-model:attachment="baseInputFileValue"
    accept-types=".svg"
    wrapper-class="mt-4 col-12"
    :validation="v$.baseInputFileValue"
>
  <template #label>
    <label class="mb-1 select-none font-bold text-secondary" for="sitemap">
      Example input file
    </label>
    <button type="button" class="ms-2 text-sm underline">
      <i class="fa fa-circle-question me-1"></i>¿Cual debe ser el formato de mi mapa de sitio?
    </button>
  </template>
</base-input-file>

8. BaseImageUploader

Image files uploader components

Props:

| Prop | Type | Required | Default | Description | |---------------------------|------------------------------------|--------------|-----------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------| | id | String | No | 'base-image-uploader' | The unique identifier for the input field. | | newImages | File[]\|File\|ProductImage\|null | Yes | null | Variable value, used as v-model:newImages="inputValue". | | label | String\|null | No | null | Input label. | | readonly | Boolean | No | false | Show input as readonly. | | display | String\|null | No | null | If the value is null, the label and input are displayed as block. If the value is inline, the label is displayed to the left of the input. | | validation | Object\|null | No | null | Vuelidate object if needed: (ex.: :validation="v$.name"). | | multiple | Boolean | No | false | Allow multiple files. | | previewImageParentClass | String | No | 'h-44 w-44 rounded-lg relative' | CSS class for the wrapper of selected images. | | wrapperClass | String | No | 'col-12' | CSS class for the wrapper element around the input field. | | labelClass | String | No | null | CSS class for the label element. | | previewOnly | Boolean | No | false | Allow preview of selected images. |

import {BaseImageUploader} from 'dracoder-vue-library';

<BaseImageUploader
    id="example-image-uploader"
    v-model:image="baseImageUploaderValue"
    :label="$t('Example multiple image uploader')"
    :validation="v$.baseImageUploaderValue"
    :multiple="true"
    wrapper-class="col-12 py-3"
    content-class="min-height-400"
/>

9. BaseAccordion

Accordion component.

Child components: BaseAccordionHeader BaseAccordionContent

import {BaseAccordion, BaseAccordionHeader, BaseAccordionContent} from "dracoder-vue-library";

<label class="font-bold mb-1 text-secondary">{{ $t('Example accordion') }}</label>
<base-accordion id="example-accordion">
  <base-accordion-header
      role="button"
      data-parent="#example-accordion"
  >
    <i class="fa fa-circle text-xs"></i>
    <span class="">{{ $t('Example title accordion') }}</span>
  </base-accordion-header>
  <base-accordion-content>
    <div v-for="a in 3" :key="a">
      <div class="ps-5">
        {{ a }} {{ $t('Example content') }}
      </div>
    </div>
  </base-accordion-content>
</base-accordion>

10. BaseButton

Generic button with loader.

Props:

| Prop | Type | Required | Default | Description | |---------------|----------------|--------------|-------------|---------------------------------------------------------| | type | String | No | 'submit' | Button type value. | | text | String | No | '' | Button text. | | iconClass | String\|null | No | '' | Font awesome icon class for button. | | loading | Boolean | No | false | Show spinner and disable button when boolean is true. | | fullSpinner | Boolean | No | false | Show only spinner and hide text when loading. |

Emits:

• @click: Trigger when button is clicked.

import {BaseButton} from 'dracoder-vue-library';

<BaseButton
    class="button btn btn-primary "
    text="Execute"
    @click="executeValidation()"
/>

Componentes Tablas

BaseDataTable

Table with paginator and sort functionalities.

Props Table

| Prop Name | Type | Required | Default | Description | |----------------------------|------------------------|--------------|-------------------------|------------------------------------------------------------------------------------------| | header | Array | No | [] | The table headers, including titles and optional classes or sorting properties. | | fields | DatatableFieldItem[] | No | [] | Fields defining how each row of data is displayed, including type, formatter, and props. | | dataItemClass | String | No | '' | CSS class applied to each data row. | | emptyDataMessage | String | No | '' | Message displayed when no data is available. | | endpoint | Function\|null | No | null | Function called to fetch data from an API endpoint. | | showDefaultSearch | Boolean | No | true | Whether to show the default search input. | | customFilters | Object\|null | No | null | Custom filters to apply to the data. For example: {date: '2000-01-01'} | | selectQtyOfResults | Boolean | No | false | Whether to show the dropdown to select the number of results per page. | | disableRouterReplacement| Boolean | No | false | Whether to disable router replacement for query parameters. | | paginated | Boolean | No | true | Indicates if the table data should be paginated. | | showInvalidBody | Boolean | No | false | Whether to show invalid body styling. | | sortOrder | String | No | 'ASC' | The default sort order (ASC or DESC). | | searchPlaceholder | String | No | 'Buscar' | Placeholder text for the search input. | | searchContainerClass | String | No | 'flex flex-grow' | CSS class for the search container. | | defaultOrderBy | String\|null | No | null | The default field to sort by. |

Table interfaces

    type DatatableFieldItem =
    | DatatableFieldItemText
    | DataTableFieldItemDots
    | DatatableFieldItemComponent
    | DatatableFieldItemButton
    | DatatableFieldItemArray
    | DatatableFieldItemCheckbox
    | DatatableFieldItemLink
    
    
    type DatatableFieldItemTypeText = 'text'
    
    interface DatatableFieldItemText {
        type: DatatableFieldItemTypeText
        value: string
        formatter?: Function
        translatable?: boolean
        class?: string
    }
    
    /** DOTS **/
    type DatatableFieldItemTypeDots = 'dots'
    
    interface DatatableFieldItemDotsPropsField {
        label: string
        icon: string
        class?: string
        action: Function
    }
    
    interface DatatableFieldItemDotsProps {
    fields: DatatableFieldItemDotsPropsField[]
    }
    
    interface DataTableFieldItemDots {
        type: DatatableFieldItemTypeDots
        component: Component
        props: DatatableFieldItemDotsProps
        class?: string
    }
    
    /** COMPONENT **/
    type DatatableFieldItemTypeComponent = 'component'
    
    interface DatatableFieldItemComponent {
        type: DatatableFieldItemTypeComponent
        component: Component
        props?: any
        staticProps?: any
        class?: string
    }
    
    /** BUTTON **/
    type DatatableFieldItemTypeButton = 'button'
    
    interface DatatableFieldItemButtonData {
        class?: string
        icon: string
        action: Function
        disabled?: Function
        title?: string
        text?: string
    }
    
    interface DatatableFieldItemButton {
        type: DatatableFieldItemTypeButton
        class?: string
        text?: string
        value: DatatableFieldItemButtonData[]
    }
    
    /** CHECKBOX **/
    type DatatableFieldItemTypeCheckbox = 'checkbox'
    
    interface DatatableFieldItemCheckbox {
        type: DatatableFieldItemTypeCheckbox
        class?: string
        title?: string
        formatter?: Function
        disabled?: Function
        value: string
        action: Function
    }
    
    /** LINK **/
    type DatatableFieldItemTypeLink = 'link'
    
    interface DatatableFieldItemLink {
        type: DatatableFieldItemTypeLink
        class?: string
        title?: string
        path: Function
        value: string
        formatter?: Function
        disabled?: Function
        translatable?: boolean
    }
    
    /** ARRAY **/
    type DatatableFieldItemTypeArray = 'array'
    
    interface DatatableFieldItemArray {
        type: DatatableFieldItemTypeArray
        class?: string
        text?: string
        value: string
        formatter?: Function
    }

Emitted Events

| Event Name | Payload | Description | |---------------------|---------------------|------------------------------------------------------------------------------------| | onEndpointCalled | None | Emitted when the API endpoint is successfully called. | | changeCurrentPage | Number (page) | Emitted when the current page changes in the paginator. |

Slots Documentation

| Slot Name | Description | |----------------------|----------------------------------------------------------------------------------------------------------| | leftActions | Custom content or actions to display on the left side above the table. | | filterActions | Custom filter actions to be displayed next to the default search bar. | | rightActions | Custom content or actions to display on the right side above the table. | | table-row | Slot to customize how each table row is rendered. Props provided: data (array of rows) and search. |

import {BaseDataTable} from 'dracoder-vue-library';

<BaseDataTable
    :endpoint="getMockedData"
    :fields="fields"
    :header="header"
    :show-default-search="false"
    empty-data-message="No se encontraron resultados"
/>

Toasts

useCatchToast(error: Object|string): Show error toast, with message obtained from object or string useSuccessToast(message: string): Show green toast, with message