dracoder-vue-library v0.15.0

Vue 3 library components

Available form components

1. BaseInput

Input tag component

Props:

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:

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:

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:

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:

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:

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:

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:

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:

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

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

Slots Documentation

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