bunkerweb/docs/ui-components.md

UI Components

This page contains all the UI components used in the application.

Builder

Bans.vue

This component is lightweight builder containing only the necessary components to create the bans page.

Parameters

• builder array Array of containers and widgets

Examples

[
  {
    type: "card",
    gridLayoutClass: "transparent",
    widgets: [
               { type: "MessageUnmatch",
                 data: { text: "bans_not_found" }
              },
   ],
  },
];

Cell.vue

This component includes all elements that can be shown in a table cell.

Parameters

• type string The type of the cell. This needs to be a Vue component.
• data object The data to display in the cell. This needs to be the props of the Vue component.

Examples

{
    type : "button",
    data : {
      id: "open-modal-btn",
      text: "Open modal",
      disabled: false,
      hideText: true,
      color: "green",
      size: "normal",
      iconName: "modal",
      attrs: { data-toggle: "modal", "data-target": "#modal"},
    }
 }

GlobalConfig.vue

This component is lightweight builder containing only the necessary components to create the instances page.

Parameters

• builder array Array of containers and widgets

Examples

[
  {
    type: "card",
    containerColumns: { pc: 12, tablet: 12, mobile: 12 },
    widgets: [
    {
    type: "Title",
    data : {
      title: "dashboard_global_config",
      type: "card"
    },
    },
      {
        type: "Templates",
        data: {
          title: "home_version",
          subtitle: "home_all_features_available" if is_pro_version else "home_upgrade_pro",
          subtitleColor: "success" is is_pro_version else "warning",
          stat: "home_pro" if is_pro_version else "home_free",
          iconName: "crown" if is_pro_version else "core",
        },
      },
    ],
  },
];

Home.vue

This component is lightweight builder containing only the necessary components to create the home page.

Parameters

• builder array Array of containers and widgets

Examples

[
{
  type: "card",
  link : "https://panel.bunkerweb.io/?utm_campaign=self&utm_source=ui"
  containerColumns: { pc: 4, tablet: 6, mobile: 12 },
  widgets: [
    {
      type: "Stat",
      data: {
        title: "home_version",
        subtitle: "home_all_features_available" if is_pro_version else "home_upgrade_pro",
        subtitleColor: "success" is is_pro_version else "warning",
        stat: "home_pro" if is_pro_version else "home_free",
        iconName: "crown" if is_pro_version else "core",
      },
    },
  ],
},
]

Instances.vue

This component is lightweight builder containing only the necessary components to create the instances page.

• @example [ { type: "Instance", data: { details: [ { key: <instances_hostname="hostname">, value: "[www.example.com][2]" }, { key: <instances_method="method">, value: <dashboard_ui> or <dashboard_scheduler>...}, { key: <instances_port="port">, value: "1084" }, { key: <instances_status="status">, value: <instances_active="active"> or <instances_inactive="inactive"> }, ], status: "success", title: "[www.example.com][2]", buttons: [ { text: <action_*>, color: "edit", size: "normal", }, ], }, }, ];
• @param {array} builder - Array of containers and widgets

Modal.vue

This component contains all widgets needed on a modal. This is different from a page builder as we don't need to define the container and grid layout. We can't create multiple grids or containers in a modal.

Parameters

• widgets array Array of containers and widgets

Examples

[
  "id": "modal-delete-plugin",
  "widgets": [
      {
          "type": "Title",
          "data": {
              "title": "plugins_modal_delete_title",
              "type": "modal"
          }
      },
      {
          "type": "Text",
          "data": {
              "text": "plugins_modal_delete_confirm"
          }
      },
      {
          "type": "Text",
          "data": {
              "text": "",
              "bold": true,
              "attrs": {
                  "data-modal-plugin-name": "true"
              }
          }
      },
      {
          "type": "ButtonGroup",
          "data": {
              "buttons": [
                  {
                      "id": "delete-plugin-btn",
                      "text": "action_close",
                      "disabled": false,
                      "color": "close",
                      "size": "normal",
                      "attrs": {
                          "data-hide-el": "modal-delete-plugin"
                      }
                  },
                  {
                      "id": "delete-plugin-btn",
                      "text": "action_delete",
                      "disabled": false,
                      "color": "delete",
                      "size": "normal",
                      "attrs": {
                          "data-delete-plugin-submit": ""
                      }
                  }
              ],
          }
      }
  ]
];

useFocusModal

Check if the modal is present and a focusable element is present inside it. If it's the case, the function will focus the element. Case there is already a focused element inside the modal, avoid to focus it again.

Parameters

• modalId string The id of the modal element.

Returns void;

PLugin.vue

This component is lightweight builder containing only the necessary components to create the plugins page.

Parameters

• builder array Array of containers and widgets

Examples

[
  {
    type: "card",
    containerColumns: { pc: 12, tablet: 12, mobile: 12 },
    widgets: [
    {
    type: "Title",
    data : {
      title: "dashboard_plugins",
      type: "card"
    },
    },
      {
        type: "ListDetails",
        data:   {
            text: "Plugin name",
            popovers: [
              {
                text: "This is a popover text",
                iconName: "info",
              },
              {
                text: "This is a popover text",
                iconName: "info",
              },
            ],
          },
      },
    ],
  },
];

Reports.vue

This component is lightweight builder containing only the necessary components to create the reports page.

Parameters

• builder array Array of containers and widgets

Examples

[
  {
    type: "card",
    gridLayoutClass: "transparent",
    widgets: [
              {
                type: "MessageUnmatch",
                data: { text: "reports_not_found" }
              }
    ],
  },
];

Services.vue

This component is lightweight builder containing only the necessary components to create the services page.

Parameters

• builder array Array of containers and widgets

Examples

[
    {
        "type": "card",
        "containerColumns": {
            "pc": 12,
            "tablet": 12,
            "mobile": 12
        },
        "widgets": [
            {
                "type": "Title",
                "data": {
                    "title": "services_title"
                }
            },
            {
                "type": "Table",
                "data": {
                    "title": "services_table_title",
                    "minWidth": "lg",
                    "header": [
                        "services_table_name",
                        "services_table_method",
                        "services_table_settings",
                        "services_table_manage",
                        "services_table_is_draft",
                        "services_table_delete"
                    ],
                    "positions": [
                        2,
                        2,
                        2,
                        2,
                        2,
                        2
                    ],
                    "items": [
                        [
                            {
                                "name": "app1.example.com",
                                "type": "Text",
                                "data": {
                                    "text": "app1.example.com"
                                }
                            },
                            {
                                "method": "scheduler",
                                "type": "Text",
                                "data": {
                                    "text": "scheduler"
                                }
                            },
                            {
                                "type": "Button",
                                "data": {
                                    "id": "open-modal-settings-0",
                                    "text": "settings",
                                    "hideText": false,
                                    " color": "info",
                                    "size": "normal",
                                    "iconName": "settings"
                                }
                            },
                            {
                                "type": "Button",
                                "data": {
                                    "attrs": {
                                        "data-server-name": "app1.example.com"
                                    },
                                    "id": "open-modal-manage-0",
                                    "text": "manage",
                                    "hideText": false,
                                    " color": "green",
                                    "size": "normal",
                                    "iconName": "manage"
                                }
                            },
                            {
                                "type": "Button",
                                "data": {
                                    "attrs": {
                                        "data-server-name": "app1.example.com",
                                        "data-is-draft": "no"
                                    },
                                    "id": "open-modal-draft-0",
                                    "text": "online",
                                    "hideText": false,
                                    " color": "cyan",
                                    "size": "normal",
                                    "iconName": "online"
                                }
                            },
                            {
                                "type": "Button",
                                "data": {
                                    "attrs": {
                                        "data-server-name": "app1.example.com"
                                    },
                                    "id": "open-modal-delete-0",
                                    "text": "delete",
                                    "disabled": true,
                                    "hideText": false,
                                    " color": "red",
                                    "size": "normal",
                                    "iconName": "trash"
                                }
                            }
                        ],
                        [
                            {
                                "name": "www.example.com",
                                "type": "Text",
                                "data": {
                                    "text": "www.example.com"
                                }
                            },
                            {
                                "method": "scheduler",
                                "type": "Text",
                                "data": {
                                    "text": "scheduler"
                                }
                            },
                            {
                                "type": "Button",
                                "data": {
                                    "id": "open-modal-settings-1",
                                    "text": "settings",
                                    "hideText": false,
                                    " color": "info",
                                    "size": "normal",
                                    "iconName": "settings"
                                }
                            },
                            {
                                "type": "Button",
                                "data": {
                                    "attrs": {
                                        "data-server-name": "www.example.com"
                                    },
                                    "id": "open-modal-manage-1",
                                    "text": "manage",
                                    "hideText": false,
                                    " color": "green",
                                    "size": "normal",
                                    "iconName": "manage"
                                }
                            },
                            {
                                "type": "Button",
                                "data": {
                                    "attrs": {
                                        "data-server-name": "www.example.com",
                                        "data-is-draft": "no"
                                    },
                                    "id": "open-modal-draft-1",
                                    "text": "online",
                                    "hideText": false,
                                    " color": "cyan",
                                    "size": "normal",
                                    "iconName": "online"
                                }
                            },
                            {
                                "type": "Button",
                                "data": {
                                    "attrs": {
                                        "data-server-name": "www.example.com"
                                    },
                                    "id": "open-modal-delete-1",
                                    "text": "delete",
                                    "disabled": true,
                                    "hideText": false,
                                    " color": "red",
                                    "size": "normal",
                                    "iconName": "trash"
                                }
                            }
                        ]
                    ],
                    "filters": [
                        {
                            "filter": "table",
                            "filterName": "keyword",
                            "type": "keyword",
                            "value": "",
                            "keys": [
                                "name"
                            ],
                            "field": {
                                "id": "services-keyword",
                                "value": "",
                                "type": "text",
                                "name": "services-keyword",
                                "label": "services_search",
                                "placeholder": "inp_keyword",
                                "isClipboard": false,
                                "popovers": [
                                    {
                                        "text": "services_search_desc",
                                        "iconName": "info"
                                    }
                                ],
                                "columns": {
                                    "pc": 3,
                                    "tablet": 4,
                                    "mobile": 12
                                }
                            }
                        },
                        {
                            "filter": "table",
                            "filterName": "method",
                            "type": "select",
                            "value": "all",
                            "keys": [
                                "method"
                            ],
                            "field": {
                                "id": "services-methods",
                                "value": "all",
                                "values": [
                                    "scheduler"
                                ],
                                "name": "services-methods",
                                "onlyDown": true,
                                "label": "services_methods",
                                "popovers": [
                                    {
                                        "text": "services_methods_desc",
                                        "iconName": "info"
                                    }
                                ],
                                "columns": {
                                    "pc": 3,
                                    "tablet": 4,
                                    "mobile": 12
                                }
                            }
                        },
                        {
                            "filter": "table",
                            "filterName": "draft",
                            "type": "select",
                            "value": "all",
                            "keys": [
                                "draft"
                            ],
                            "field": {
                                "id": "services-draft",
                                "value": "all",
                                "values": [
                                    "all",
                                    "online",
                                    "draft"
                                ],
                                "name": "services-draft",
                                "onlyDown": true,
                                "label": "services_draft",
                                "popovers": [
                                    {
                                        "text": "services_draft_desc",
                                        "iconName": "info"
                                    }
                                ],
                                "columns": {
                                    "pc": 3,
                                    "tablet": 4,
                                    "mobile": 12
                                }
                            }
                        }
                    ]
                }
            }
        ]
    }
]

Setup.vue

This component is lightweight builder containing only the necessary components to create the setup page.

Parameters

• builder array Array of containers and widgets

Dashboard

Banner.vue

This component is a banner that display news. The banner will display news from the api if available, otherwise it will display default news.

setupBanner

This function will try to retrieve banner news from the local storage, and in case it is not available or older than one hour, it will fetch the news from the api.

Returns void;

runBanner

Run the banner animation to display all news at a regular interval.

Returns void;

observeBanner

Check if the banner is visible in the viewport and set the state in the global bannerStore to update related components.

• @returns {void}

noTabindex

Stop highlighting a banner item that was focused with tabindex.

Returns void;

isTabindex

Highlighting a banner item that is focused with tabindex.

Returns void;

handleTabIndex

• @name isTabindex
• @description Focus with tabindex break banner animation. When a banner is focused, we need to add in front of the current banner the focus element. And remove it when the focus is lost.

Returns void;

Footer.vue

This component is a footer that display essential links. You have all the links to the main website, the documentation, the privacy policy, the blog, the license and the sitemap.

Header.vue

This component is a header displaying the current page endpoint.

LangSwitch.vue

This component is a float element with a flag of the current language. When clicked, it will display a list of available languages, clicking on one will change the language. Your language isn't here ? You can contribute by following the part of the documentation about translations.

updateLangStorage

This function will update the language in the session storage and reload the page. On reload, we will retrieve the language from the session storage and set it.

Parameters

• lang string The language to set.

Returns void;

Layout.vue

This component is a layout that wraps the main content of the dashboard. It includes the header, the menu, the news, the language switcher, the loader, the banner and the footer. The content part is a slot that can be filled with custom components or using the Builder.vue.

Loader.vue

This component is a loader used to transition between pages.

loading

This function will toggle the loading animation.

Returns void;

Menu.vue

This component is a menu that display essential links. You have all the links to the main pages, the plugins pages, the social links and the logout button.

getDarkMode

Get the dark mode state from the session storage or the user's preferences.

Returns void;

switchMode

updateMode

Update the mode of the page.

Returns void;

closeMenu

Close menu when we are on mobile device (else always visible).

Returns void;

closeMenu

Toggle menu when we are on mobile device (else always visible).

Returns void;

Form

Advanced.vue

This component is used to create a complete advanced form with plugin selection.

Examples

{
 template: [
       {
         columns: { pc: 6, tablet: 12, mobile: 12 },
         id: "test-check",
         value: "yes",
         label: "Checkbox",
         name: "checkbox",
         required: true,
         hideLabel: false,
         headerClass: "text-red-500",
         inpType: "checkbox",
       },
       {
         id: "test-input",
         value: "yes",
         type: "text",
         name: "test-input",
         disabled: false,
         required: true,
         label: "Test input",
         pattern: "(test)",
         inpType: "input",
       },
     ],
}

filter

• @name filter
• @description Get the filter data from the component and store the result in the advanced store. After that, update some UI states like disabled state.
• @param {object} filterData - The filter data from the component.
• @returns {void}

Parameters

• filterData ;

updateStates

• @name updateStates
• @description Update some UI states, usually after a filter, a reload, a remount or a change in the template. We will check to set the current plugins available and update the current plugin if needed.
• @returns {void}

setValidity

Check template settings and return if there is any error. Error will disabled save button and display an error message.

Returns void;

getFirstPlugin

• @name getFirstPlugin
• @description Get the first available plugin in the template.
• @param {object} template - The template object.
• @returns {string} - The first plugin name.

Parameters

• template ;

getPluginNames

• @name getPluginNames
• @description Get the first available plugin in the template.
• @param {object} template - The template object.
• @returns {array} - The list of plugin names.

Parameters

• template ;

Easy.vue

This component is used to create a complete easy form with plugin selection.

Parameters

• containerClass string Container
• columns object Columns object.

Examples

{
  template: [
        {
          columns: { pc: 6, tablet: 12, mobile: 12 },
          id: "test-check",
          value: "yes",
          label: "Checkbox",
          name: "checkbox",
          required: true,
          hideLabel: false,
          headerClass: "text-red-500",
          inpType: "checkbox",
        },
        {
          id: "test-input",
          value: "yes",
          type: "text",
          name: "test-input",
          disabled: false,
          required: true,
          label: "Test input",
          pattern: "(test)",
          inpType: "input",
        },
  ],
}
-  @param {object} template - Template object with plugin and settings data.

setValidity

Check template settings and return if there is any error. Error will disabled save button and display an error message.

Returns void;

Forms

Error

Dropdown.vue

This component is used to display a feedback message on a dropdown field. It is used with /Forms/Field components.

Parameters

• isValid boolean Check if the field is valid (optional, default false)
• isValue boolean Check if the field has a value, display a different message if the field is empty or not (optional, default false)
• isValueTaken boolean Check if input is already taken. Use with list input. (optional, default false)
• errorClass string Additional class (optional, default "")

Examples

{
   isValid: false,
   isValue: false,
 }

Field.vue

This component is an alert type to send feedback to the user. We can used it as a fixed alert or we can use it in a container as a list.

Parameters

• title string The title of the alert. Can be a translation key or by default raw text.
• message string The message of the alert. Can be a translation key or by default raw text.
• canClose boolean Determine if the alert can be closed by user (add a close button), by default it is closable (optional, default true)
• id string (optional, default `feedback-alert-${message.substring(0,10)}`)
• isFixed string Determine if the alert is fixed (visible bottom right of page) or relative (inside a container) (optional, default false)
• type string The type of the alert, can be success, error, warning or info (optional, default "info")
• delayToClose number The delay to auto close alert in ms, by default always visible (optional, default 0)
• tabId string The tabindex of the alert (optional, default "-1")

Examples

{
   position : "fixed",
   type: "success",
   title: "Success",
   message: "Your action has been successfully completed",
   delayToClose: 5000,
 }

Feature

Clipboard.vue

This component can be add to some fields to allow to copy the value of the field. Additionnal clipboardClass and copyClass can be added to fit the parent container.

Parameters

• id id Unique id (optional, default uuidv4())
• isClipboard isClipboard Display a clipboard button to copy a value (optional, default false)
• valueToCopy valueToCopy The value to copy (optional, default "")
• clipboadClass clipboadClass Additional class for the clipboard container. Useful to fit the component in a specific container. (optional, default "")
• copyClass copyClass The class of the copy message. Useful to fit the component in a specific container. (optional, default "")

Examples

{
   id: 'test-input',
   isClipboard: true,
   valueToCopy: 'yes',
   clipboadClass: 'mx-2',
   copyClass: 'mt-2',
 }

Field

Checkbox.vue

This component is used to create a complete checkbox field input with error handling and label. We can also add popover to display more information. It is mainly use in forms.

Parameters

• id string Unique id (optional, default uuidv4())
• label string The label of the field. Can be a translation key or by default raw text.
• name string The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
• value string;
• attrs object Additional attributes to add to the field (optional, default {})
• popovers array? List of popovers to display more information
• inpType string The type of the field, useful when we have multiple fields in the same container to display the right field (optional, default "checkbox")
• disabled boolean (optional, default false)
• required boolean (optional, default false)
• columns object Field has a grid system. This allow to get multiple field in the same row if needed. (optional, default {"pc":"12","tablet":"12","mobile":"12})
• hideLabel boolean (optional, default false)
• containerClass string (optional, default "")
• headerClass string (optional, default "")
• inpClass string (optional, default "")
• tabId (string | number) The tabindex of the field, by default it is the contentIndex (optional, default contentIndex)

Examples

{
   columns : {"pc": 6, "tablet": 12, "mobile": 12},
   id:"test-check",
   value: "yes",
   label: "Checkbox",
   name: "checkbox",
   required: true,
   hideLabel: false,
   inpType: "checkbox",
   headerClass: "text-red-500"
   popovers : [
     {
       text: "This is a popover text",
       iconName: "info",
     },
   ]
 }

updateValue

This will convert the boolean checkbox value to a "yes" or "no" string value. We will check the validity of the checkbox too.

Returns [string][5] The new string value of the checkbox 'yes' or 'no'

Combobox.vue

This component is used to create a complete combobox field input with error handling and label. We can be more precise by adding values that need to be selected to be valid. We can also add popover to display more information.

Parameters

• id string Unique id (optional, default uuidv4())
• label string The label of the field. Can be a translation key or by default raw text.
• name string The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
• value string;
• values array;
• attrs object Additional attributes to add to the field (optional, default {})
• maxBtnChars string Max char to display in the dropdown button handler. (optional, default "")
• popovers array? List of popovers to display more information
• inpType string The type of the field, useful when we have multiple fields in the same container to display the right field (optional, default "select")
• disabled boolean (optional, default false)
• required boolean (optional, default false)
• requiredValues array values that need to be selected to be valid, works only if required is true (optional, default [])
• columns object Field has a grid system. This allow to get multiple field in the same row if needed. (optional, default {"pc":"12","tablet":"12","mobile":"12})
• hideLabel boolean (optional, default false)
• onlyDown boolean If the dropdown should check the bottom of the (optional, default false)
• overflowAttrEl boolean Attribut to select the container the element has to check for overflow (optional, default "")
• containerClass string (optional, default "")
• inpClass string (optional, default "")
• headerClass string (optional, default "")
• tabId (string | number) The tabindex of the field, by default it is the contentIndex (optional, default contentIndex)

Examples

{
   id: 'test-input',
   value: 'yes',
   values : ['yes', 'no'],
   name: 'test-input',
   disabled: false,
   required: true,
   requiredValues : ['no'], // need required to be checked
   label: 'Test select',
   inpType: "select",
   popovers : [
     {
       text: "This is a popover text",
       iconName: "info",
     },
   ]
 }

toggleSelect

This will toggle the custom select dropdown component.

Returns void;

closeSelect

This will close the custom select dropdown component.

Returns void;

changeValue

This will change the value of the select when a new value is selected from dropdown button. Check the validity of the select too. Close select after it.

Parameters

• newValue string The new value to set to the select.

Returns [string][16] The new value of the select

closeOutside

This function is linked to a click event and will check if the target is part of the select component. Case not and select is open, will close the select.

Parameters

• e event The event object.

Returns void;

closeScroll

This function is linked to a scroll event and will close the select in case a scroll is detected and the scroll is not the dropdown.

Parameters

• e event The event object.

Returns void;

closeEscape

This function is linked to a key event and will close the select in case "Escape" key is pressed.

Parameters

• e event The event object.

Returns void;

closeTab

This function is linked to a key event and will listen to tabindex change. In case the new tabindex is not part of the select component, will close the select.

Parameters

• e event The event object.

Returns void;

Datepicker.vue

This component is used to create a complete datepicker field input with error handling and label. You can define a default date, a min and max date, and a format. We can also add popover to display more information. It is mainly use in forms.

Parameters

• id string Unique id (optional, default uuidv4())
• label string The label of the field. Can be a translation key or by default raw text.
• name string The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
• popovers array List of popovers to display more information
• attrs object Additional attributes to add to the field (optional, default {})
• inpType string The type of the field, useful when we have multiple fields in the same container to display the right field (optional, default "datepicker")
• value number<timestamp> Default date when instanciate (optional, default "")
• minDate number<timestamp> Impossible to pick a date before this date. (optional, default "")
• maxDate number<timestamp> Impossible to pick a date after this date. (optional, default "")
• isClipboard boolean allow to copy the timestamp value (optional, default true)
• hideLabel boolean (optional, default false)
• columns object Field has a grid system. This allow to get multiple field in the same row if needed. (optional, default {"pc":"12","tablet":"12","mobile":"12})
• disabled boolean (optional, default false)
• required boolean (optional, default false)
• headerClass string (optional, default "")
• containerClass string (optional, default "")
• tabId (string | number) The tabindex of the field, by default it is the contentIndex (optional, default contentIndex)

Examples

{
   id: 'test-date',
   columns : {"pc": 6, "tablet": 12, "mobile": 12},
   disabled: false,
   required: true,
   value: 1735682600000,
   minDate: 1735682600000,
   maxDate: 1735689600000,
   inpClass: "text-center",
   inpType : ""
   popovers : [
     {
       text: "This is a popover text",
       iconName: "info",
     },
   ],
 }

setMonthSelect

Create a custom select for month dropdown and hide default one.

Parameters

• calendarEl element The calendar element.
• id string The id of the datepicker.

Returns void;

setPickerAtt

Set attributes to the calendar element to make it more accessible.

Parameters

• calendarEl element The calendar element.
• id (string | boolean) The id of the datepicker. (optional, default false)

Returns void;

handleEvents

Handle events on the calendar element, like tabindex. This will update the tabindex and focus on the right element. This will update the custom select and options.

Parameters

• calendarEl element The calendar element.
• id string The id of the datepicker.
• datepicker object The datepicker instance.

Returns void;

toggleSelect

Toggle the custom select dropdown.

Parameters

• calendarEl element The calendar element.
• id string The id of the datepicker.
• e event The event.

Returns void;

closeSelectByDefault

Close the custom select dropdown by default.

Parameters

• calendarEl element The calendar element.
• id string The id of the datepicker.
• e event The event.

Returns void;

updateMonth

Update the month when click on custom select option.

Parameters

• calendarEl element The calendar element.
• id string The id of the datepicker.
• e event The event.
• datepicker object The datepicker instance.

Returns void;

updateIndex

Update the tabindex on the calendar element.

Parameters

• calendarEl element The calendar element.
• target string The event target.

Returns void;

setIndex

Set the tabindex on the calendar element to work with keyboard.

Parameters

• calendarEl element The calendar element.
• tabindex string the tabindex to set.

Returns void;

Editor.vue

This component is used to create a complete editor field with error handling and label. We can also add popover to display more information. It is mainly use in forms.

Parameters

• id string Unique id (optional, default uuidv4())
• label string The label of the field. Can be a translation key or by default raw text.
• name string The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.* @param {string} label
• value string;
• attrs object Additional attributes to add to the field (optional, default {})
• popovers array? List of popovers to display more information
• inpType string The type of the field, useful when we have multiple fields in the same container to display the right field (optional, default "editor")
• columns object Field has a grid system. This allow to get multiple field in the same row if needed. (optional, default {"pc":"12","tablet":"12","mobile":"12})
• pattern string (optional, default "")
• disabled boolean (optional, default false)
• required boolean (optional, default false)
• isClipboard boolean allow to copy the input value (optional, default true)
• hideLabel boolean (optional, default false)
• containerClass string (optional, default "")
• editorClass string (optional, default "")
• headerClass string (optional, default "")
• tabId (string | number) The tabindex of the field, by default it is the contentIndex (optional, default contentIndex)

Examples

{
   id: "test-editor",
   value: "yes",
   name: "test-editor",
   disabled: false,
   required: true,
   pattern: "(test)",
   label: "Test editor",
   tabId: "1",
   columns: { pc: 12, tablet: 12, mobile: 12 },
 };

removeErrCSS

Remove useless CSS from the editor to avoid accessibility issues.

Returns void;

setEditorAttrs

Override editor attributes by adding or deleting some for better accessibility.

Returns void;

Input.vue

This component is used to create a complete input field input with error handling and label. We can add a clipboard button to copy the input value. We can also add a password button to show the password. We can also add popover to display more information. It is mainly use in forms.

Parameters

• id string Unique id (optional, default uuidv4())
• type string text, email, password, number, tel, url
• label string The label of the field. Can be a translation key or by default raw text.
• name string The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.* @param {string} label
• value string;
• attrs object Additional attributes to add to the field (optional, default {})
• popovers array? List of popovers to display more information
• inpType string The type of the field, useful when we have multiple fields in the same container to display the right field (optional, default "input")
• columns object Field has a grid system. This allow to get multiple field in the same row if needed. (optional, default {"pc":"12","tablet":"12","mobile":"12})
• disabled boolean (optional, default false)
• required boolean (optional, default false)
• placeholder string (optional, default "")
• pattern string (optional, default "(?.*)")
• isClipboard boolean allow to copy the input value (optional, default true)
• readonly boolean allow to read only the input value (optional, default false)
• hideLabel boolean (optional, default false)
• containerClass string (optional, default "")
• inpClass string (optional, default "")
• headerClass string (optional, default "")
• tabId (string | number) The tabindex of the field, by default it is the contentIndex (optional, default contentIndex)

Examples

{
   id: 'test-input',
   value: 'yes',
   type: "text",
   name: 'test-input',
   disabled: false,
   required: true,
   label: 'Test input',
   pattern : "(test)",
   inpType: "input",
   popovers : [
     {
       text: "This is a popover text",
       iconName: "info",
     },
   ],
 }

Select.vue

This component is used to create a complete select field input with error handling and label. We can be more precise by adding values that need to be selected to be valid. We can also add popover to display more information. It is mainly use in forms.

Parameters

• id string Unique id (optional, default uuidv4())
• label string The label of the field. Can be a translation key or by default raw text.
• name string The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
• value string;
• values array;
• attrs object Additional attributes to add to the field (optional, default {})
• popovers array? List of popovers to display more information
• inpType string The type of the field, useful when we have multiple fields in the same container to display the right field (optional, default "select")
• maxBtnChars string Max char to display in the dropdown button handler. (optional, default "")
• disabled boolean (optional, default false)
• required boolean (optional, default false)
• requiredValues array values that need to be selected to be valid, works only if required is true (optional, default [])
• columns object Field has a grid system. This allow to get multiple field in the same row if needed. (optional, default {"pc":"12","tablet":"12","mobile":"12})
• hideLabel boolean (optional, default false)
• onlyDown boolean If the dropdown should check the bottom of the container (optional, default false)
• overflowAttrEl boolean Attribut to select the container the element has to check for overflow (optional, default "")
• containerClass string (optional, default "")
• inpClass string (optional, default "")
• headerClass string (optional, default "")
• tabId (string | number) The tabindex of the field, by default it is the contentIndex (optional, default contentIndex)

Examples

{
   id: 'test-input',
   value: 'yes',
   values : ['yes', 'no'],
   name: 'test-input',
   disabled: false,
   required: true,
   requiredValues : ['no'], // need required to be checked
   label: 'Test select',
   inpType: "select",
   popovers : [
     {
       text: "This is a popover text",
       iconName: "info",
     },
   ]
 }

toggleSelect

This will toggle the custom select dropdown component.

Returns void;

closeSelect

This will close the custom select dropdown component.

Returns void;

changeValue

This will change the value of the select when a new value is selected from dropdown button. Check the validity of the select too. Close select after it.

Parameters

• newValue string The new value to set to the select.

Returns [string][16] The new value of the select

closeOutside

This function is linked to a click event and will check if the target is part of the select component. Case not and select is open, will close the select.

Parameters

• e event The event object.

Returns void;

closeScroll

This function is linked to a scroll event and will close the select in case a scroll is detected and the scroll is not the dropdown.

Parameters

• e event The event object.

Returns void;

closeEscape

This function is linked to a key event and will close the select in case "Escape" key is pressed.

Parameters

• e event The event object.

Returns void;

closeTab

This function is linked to a key event and will listen to tabindex change. In case the new tabindex is not part of the select component, will close the select.

Parameters

• e event The event object.

Returns void;

Group

Multiple.vue

This Will regroup all multiples settings with add and remove logic. This component under the hood is rendering default fields but by group with possibility to add or remove a multiple group.

Parameters

• multiples object