Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

format jsdoc + fix bans2.py format

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-08-12 21:25:48 +02:00
parent 5162f40a07
commit e88cc25dae
89 changed files with 951 additions and 962 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
docs/ui-components.md
View file

@ -824,7 +824,7 @@ This component is used to create a complete advanced form with plugin selection.
- @name filter
- @description Get the filter data from the <Filter /> 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 <Filter /> component.
- @param {Object} filterData - The filter data from the <Filter /> component.
- @returns {void}
#### Parameters
@ -849,7 +849,7 @@ Returns **void**;
- @name getFirstPlugin
- @description Get the first available plugin in the template.
- @param {object} template - The template object.
- @param {Object} template - The template object.
- @returns {string} - The first plugin name.
#### Parameters
@ -860,7 +860,7 @@ Returns **void**;
- @name getPluginNames
- @description Get the first available plugin in the template.
- @param {object} template - The template object.
- @param {Object} template - The template object.
- @returns {array} - The list of plugin names.
#### Parameters

6
src/ui/client/builder/bans2.py
View file

@ -1,7 +1,7 @@
import json
import base64
from builder.bans2 import bans_builder
from pages.bans2 import bans_builder
bans = [
{
@ -31,9 +31,9 @@ reasons = ["all", "antibot", "test"]
remains = ["all", "hour(s)", "day(s)"]
builder = bans_builder(bans, reasons, remains)
print("builder", builder)
with open("bans2.json", "w") as f:
f.write(json.dumps(builder))
json.dump(builder, f, indent=4)
output_base64_bytes = base64.b64encode(bytes(json.dumps(builder), "utf-8"))

2
src/ui/client/builder/instances2.py
View file

@ -25,7 +25,7 @@ healths = ["up", "down", "loading"]
builder = instances_builder(instances)
print("builder:", builder)
# store on a file
with open("instances2.json", "w") as f:
json.dump(builder, f, indent=4)

14
src/ui/client/builder/pages/bans2.py
View file

@ -1,5 +1,5 @@
from builder.utils.widgets import button_widget, button_group_widget, title_widget, text_widget, tabulator_widget, datepicker_widget
from builder.utils.table import add_column, format_field
from .utils.widgets import button_widget, button_group_widget, title_widget, text_widget, tabulator_widget, datepicker_widget
from .utils.table import add_column, format_field
bans_columns = [
add_column(title="IP", field="ip", formatter="text"),
@ -78,7 +78,6 @@ def ban_item(id: str, ip: str, reason: str, ban_start_date: int, ban_end_date: i
name=f"datepicker-ban-start-{id}",
label="bans_ban_start_date", # keep it (a18n)
hideLabel=True,
inputType="datepicker",
value=ban_start_date,
disabled=True, # Readonly
columns={"pc": 12, "tablet": 12, " mobile": 12},
@ -90,7 +89,6 @@ def ban_item(id: str, ip: str, reason: str, ban_start_date: int, ban_end_date: i
name=f"datepicker-ban-end-{id}",
label="bans_ban_end_date", # keep it (a18n)
hideLabel=True,
inputType="datepicker",
value=ban_end_date,
disabled=True, # Readonly
)
@ -133,9 +131,6 @@ default_add_ban = [
label="bans_add_ban_ip", # keep it (a18n)
hideLabel=True,
value="",
type="text",
pattern="", # replace by ip pattern
inputType="input",
columns={"pc": 12, "tablet": 12, " mobile": 12},
)
),
@ -145,7 +140,6 @@ default_add_ban = [
name="datepicker-add-ban-end-1",
label="bans_add_end_date", # keep it (a18n)
hideLabel=True,
inputType="datepicker",
value="",
)
),
@ -156,7 +150,7 @@ default_add_ban = [
id="delete-ban-1",
type="button",
text="action_delete", # keep it (a18n)
hideLabel=True,
hideText=True,
iconName="trash",
iconColor="white",
color="error",
@ -269,7 +263,7 @@ def bans_builder(bans: list, reasons: list, remains: list) -> list:
return [
# Tabs is button group with display value and a size tab inside a tabs container
{
type: "tabs",
"type": "tabs",
"widgets": [button_group_widget(buttons=bans_tabs())],
},
{

555
src/ui/client/builder/pages/utils/widgets.py
View file

@ -19,11 +19,11 @@ def advanced_widget(
PARAMETERS
- `template` **object** Template object with plugin and settings data.
- `template` **Object** Template object with plugin and settings data.
- `containerClass` **string** Container
- `operation` **string** Operation type (edit, new, delete). (optional, default `"edit"`)
- `oldServerName` **string** Old server name. This is a server name before any changes. (optional, default `""`)
- `columns` **object** Columns object.
- `columns` **Object** Columns object.
EXAMPLE
@ -92,20 +92,20 @@ def button_widget(
PARAMETERS
- `id` **string** Unique id of the button (optional, default `uuidv4()`)
- `text` **string** Content of the button. Can be a translation key or by default raw text.
- `display` **array** Case display, we will update the display store with the given array. Useful when we want to use button as tabs. (optional, default `[]`)
- `type` **string** Can be of type button || submit (optional, default `"button"`)
- `disabled` **boolean** (optional, default `false`)
- `hideText` **boolean** Hide text to only display icon (optional, default `false`)
- `color` **string** (optional, default `"primary"`)
- `iconColor` **string** Color we want to apply to the icon. If falsy value, default icon color is applied. (optional, default `""`)
- `size` **string** Can be of size sm || normal || lg || xl or tab (optional, default `"normal"`)
- `iconName` **string** Name in lowercase of icons store on /Icons. If falsy value, no icon displayed. (optional, default `""`)
- `id` **String** Unique id of the button (optional, default `uuidv4()`)
- `text` **String** Content of the button. Can be a translation key or by default raw text.
- `display` **Array** Case display, we will update the display store with the given array. Useful when we want to use button as tabs. (optional, default `[]`)
- `type` **String** Can be of type button || submit (optional, default `"button"`)
- `disabled` **Boolean** (optional, default `false`)
- `hideText` **Boolean** Hide text to only display icon (optional, default `false`)
- `color` **String** (optional, default `"primary"`)
- `iconColor` **String** Color we want to apply to the icon. If falsy value, default icon color is applied. (optional, default `""`)
- `size` **String** Can be of size sm || normal || lg || xl or tab (optional, default `"normal"`)
- `iconName` **String** Name in lowercase of icons store on /Icons. If falsy value, no icon displayed. (optional, default `""`)
- `attrs` **Object** List of attributes to add to the button. Some attributes will conduct to additional script (optional, default `{}`)
- `modal` **(Object | boolean)** We can link the button to a Modal component. We need to pass the widgets inside the modal. Button click will open the modal. (optional, default `false`)
- `tabId` **(string | number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`)
- `containerClass` **string** Additional class to the container (optional, default `""`)
- `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`)
- `containerClass` **String** Additional class to the container (optional, default `""`)
EXAMPLE
@ -146,8 +146,8 @@ def button_group_widget(
PARAMETERS
- `buttons` **array** List of buttons to display. Button component is used.
- `boutonGroupClass` **string** Additional class for the flex container (optional, default `""`)
- `buttons` **Array** List of buttons to display. Button component is used.
- `boutonGroupClass` **String** Additional class for the flex container (optional, default `""`)
EXAMPLE
@ -202,8 +202,8 @@ def cell_widget(
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.
- `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.
EXAMPLE
@ -233,12 +233,12 @@ def cell_widget(
def checkbox_widget(
popovers,
label: str,
name: str,
value: str,
id: str = "",
attrs: dict = {},
popovers: list = [],
inpType: str = "checkbox",
disabled: bool = False,
required: bool = False,
@ -256,21 +256,21 @@ def checkbox_widget(
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`)
- `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 (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 `"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`)
EXAMPLE
@ -295,7 +295,6 @@ def checkbox_widget(
"""
data = {
"popovers" : popovers,
"label" : label,
"name" : name,
"value" : value,
@ -303,7 +302,7 @@ def checkbox_widget(
# List of params that will be add only if not default value
list_params = [("id", id, ""),("attrs", attrs, {}),("inpType", inpType, "checkbox"),("disabled", disabled, False),("required", required, False),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("containerClass", containerClass, ""),("headerClass", headerClass, ""),("inpClass", inpClass, ""),("tabId", tabId, "")]
list_params = [("id", id, ""),("attrs", attrs, {}),("popovers", popovers, []),("inpType", inpType, "checkbox"),("disabled", disabled, False),("required", required, False),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("containerClass", containerClass, ""),("headerClass", headerClass, ""),("inpClass", inpClass, ""),("tabId", tabId, "")]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -311,11 +310,11 @@ def checkbox_widget(
def clipboard_widget(
id,
isClipboard,
valueToCopy,
clipboadClass,
copyClass
id: str = "",
isClipboard: bool = False,
valueToCopy: str = "",
clipboadClass: str = "",
copyClass: str = ""
):
"""
This component can be add to some fields to allow to copy the value of the field.
@ -323,11 +322,11 @@ def clipboard_widget(
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 `""`)
- `id` **String** Unique id (optional, default `uuidv4()`)
- `isClipboard` **Boolean** Display a clipboard button to copy a value (optional, default `false`)
- `valueToCopy` **String** The value to copy (optional, default `""`)
- `clipboadClass` **String** Additional class for the clipboard container. Useful to fit the component in a specific container. (optional, default `""`)
- `copyClass` **String** The class of the copy message. Useful to fit the component in a specific container. (optional, default `""`)
EXAMPLE
@ -354,7 +353,6 @@ def clipboard_widget(
def combobox_widget(
popovers,
label: str,
name: str,
value: str,
@ -362,6 +360,7 @@ def combobox_widget(
id: str = "",
attrs: dict = {},
maxBtnChars: str = "",
popovers: list = [],
inpType: str = "select",
disabled: bool = False,
required: bool = False,
@ -382,26 +381,26 @@ def combobox_widget(
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** Attribute 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`)
- `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 (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 `"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** Attribute 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`)
EXAMPLE
@ -426,7 +425,6 @@ def combobox_widget(
"""
data = {
"popovers" : popovers,
"label" : label,
"name" : name,
"value" : value,
@ -435,7 +433,7 @@ def combobox_widget(
# List of params that will be add only if not default value
list_params = [("id", id, ""),("attrs", attrs, {}),("maxBtnChars", maxBtnChars, ""),("inpType", inpType, "select"),("disabled", disabled, False),("required", required, False),("requiredValues", requiredValues, []),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("onlyDown", onlyDown, False),("overflowAttrEl", overflowAttrEl, ""),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")]
list_params = [("id", id, ""),("attrs", attrs, {}),("maxBtnChars", maxBtnChars, ""),("popovers", popovers, []),("inpType", inpType, "select"),("disabled", disabled, False),("required", required, False),("requiredValues", requiredValues, []),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("onlyDown", onlyDown, False),("overflowAttrEl", overflowAttrEl, ""),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -456,10 +454,10 @@ def container_widget(
PARAMETERS
- `containerClass` **string** Additional class (optional, default `""`)
- `columns` **(object | boolean)** Work with grid system { pc: 12, tablet: 12, mobile: 12} (optional, default `false`)
- `tag` **string** The tag for the container (optional, default `"div"`)
- `display` **array** Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef. (optional, default `[]`)
- `containerClass` **String** Additional class (optional, default `""`)
- `columns` **(Object | boolean)** Work with grid system { pc: 12, tablet: 12, mobile: 12} (optional, default `false`)
- `tag` **String** The tag for the container (optional, default `"div"`)
- `display` **Array** Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef. (optional, default `[]`)
EXAMPLE
@ -483,15 +481,15 @@ def container_widget(
def datepicker_widget(
value,
minDate,
maxDate,
label: str,
name: str,
popovers: list,
id: str = "",
popovers: list = [],
attrs: dict = {},
inpType: str = "datepicker",
value: int = "",
minDate: int = "",
maxDate: int = "",
isClipboard: bool = True,
hideLabel: bool = False,
columns: dict = {"pc":"12","tablet":"12","mobile":"12"},
@ -509,23 +507,23 @@ def datepicker_widget(
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` **timestamp** Default date when instantiate (optional, default `""`)
- `minDate` **timestamp** Impossible to pick a date before this date. (optional, default `""`)
- `maxDate` **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`)
- `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 (optional, default `[]`)
- `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` **Timestamp** Default date when instantiate (optional, default `""`)
- `minDate` **Timestamp** Impossible to pick a date before this date. (optional, default `""`)
- `maxDate` **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`)
EXAMPLE
@ -552,12 +550,11 @@ def datepicker_widget(
data = {
"label" : label,
"name" : name,
"popovers" : popovers,
}
# List of params that will be add only if not default value
list_params = [("value", value, ""),("minDate", minDate, ""),("maxDate", maxDate, ""),("id", id, ""),("attrs", attrs, {}),("inpType", inpType, "datepicker"),("isClipboard", isClipboard, True),("hideLabel", hideLabel, False),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("disabled", disabled, False),("required", required, False),("headerClass", headerClass, ""),("containerClass", containerClass, ""),("tabId", tabId, "")]
list_params = [("id", id, ""),("popovers", popovers, []),("attrs", attrs, {}),("inpType", inpType, "datepicker"),("value", value, ""),("minDate", minDate, ""),("maxDate", maxDate, ""),("isClipboard", isClipboard, True),("hideLabel", hideLabel, False),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("disabled", disabled, False),("required", required, False),("headerClass", headerClass, ""),("containerClass", containerClass, ""),("tabId", tabId, "")]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -627,11 +624,11 @@ def easy_widget(
PARAMETERS
- `template` **object** Template object with plugin and settings data.
- `template` **Object** Template object with plugin and settings data.
- `containerClass` **string** Container
- `operation` **string** Operation type (edit, new, delete). (optional, default `"edit"`)
- `oldServerName` **string** Old server name. This is a server name before any changes. (optional, default `""`)
- `columns` **object** Columns object.
- `columns` **Object** Columns object.
EXAMPLE
@ -680,12 +677,12 @@ def easy_widget(
def editor_widget(
popovers,
label: str,
name: str,
value: str,
id: str = "",
attrs: dict = {},
popovers: list = [],
inpType: str = "editor",
columns: dict = {"pc":"12","tablet":"12","mobile":"12"},
pattern: str = "",
@ -705,23 +702,23 @@ def editor_widget(
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 `"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`)
- `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 (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 `"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`)
EXAMPLE
@ -740,7 +737,6 @@ def editor_widget(
"""
data = {
"popovers" : popovers,
"label" : label,
"name" : name,
"value" : value,
@ -748,7 +744,7 @@ def editor_widget(
# List of params that will be add only if not default value
list_params = [("id", id, ""),("attrs", attrs, {}),("inpType", inpType, "editor"),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("pattern", pattern, ""),("disabled", disabled, False),("required", required, False),("isClipboard", isClipboard, True),("hideLabel", hideLabel, False),("containerClass", containerClass, ""),("editorClass", editorClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")]
list_params = [("id", id, ""),("attrs", attrs, {}),("popovers", popovers, []),("inpType", inpType, "editor"),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("pattern", pattern, ""),("disabled", disabled, False),("required", required, False),("isClipboard", isClipboard, True),("hideLabel", hideLabel, False),("containerClass", containerClass, ""),("editorClass", editorClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -756,10 +752,10 @@ def editor_widget(
def field_widget(
popovers,
label: str,
id: str,
name: str,
popovers: list = [],
required: bool = False,
hideLabel: bool = False,
headerClass: str = ""
@ -771,13 +767,13 @@ def field_widget(
PARAMETERS
- `label` **string** The label of the field. Can be a translation key or by default raw text.
- `id` **string** The id of the field. This is used to link the label to the field.
- `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
- `required` **boolean** (optional, default `false`)
- `hideLabel` **boolean** (optional, default `false`)
- `headerClass` **string** (optional, default `""`)
- `label` **String** The label of the field. Can be a translation key or by default raw text.
- `id` **String** The id of the field. This is used to link the label to the field.
- `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 (optional, default `[]`)
- `required` **Boolean** (optional, default `false`)
- `hideLabel` **Boolean** (optional, default `false`)
- `headerClass` **String** (optional, default `""`)
EXAMPLE
@ -797,7 +793,6 @@ def field_widget(
"""
data = {
"popovers" : popovers,
"label" : label,
"id" : id,
"name" : name,
@ -805,7 +800,7 @@ def field_widget(
# List of params that will be add only if not default value
list_params = [("required", required, False),("hideLabel", hideLabel, False),("headerClass", headerClass, "")]
list_params = [("popovers", popovers, []),("required", required, False),("hideLabel", hideLabel, False),("headerClass", headerClass, "")]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -820,7 +815,7 @@ def fields_widget(
PARAMETERS
- `setting` **object** Setting needed to render a field.
- `setting` **Object** Setting needed to render a field.
EXAMPLE
@ -870,9 +865,9 @@ def filter_widget(
PARAMETERS
- `filters` **array** Fields with additional data to be used as filters. (optional, default `[]`)
- `data` **(object | array)** Data object or array to filter. Emit a filter event with the filtered data. (optional, default `{}`)
- `containerClass` **string** Additional class for the container. (optional, default `""`)
- `filters` **Array** Fields with additional data to be used as filters. (optional, default `[]`)
- `data` **(Object | Array)** Data object or array to filter. Emit a filter event with the filtered data. (optional, default `{}`)
- `containerClass` **String** Additional class for the container. (optional, default `""`)
EXAMPLE
@ -928,8 +923,8 @@ def grid_widget(
PARAMETERS
- `gridClass` **string** Additional class (optional, default `"items-start"`)
- `display` **array** Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef. (optional, default `[]`)
- `gridClass` **String** Additional class (optional, default `"items-start"`)
- `display` **Array** Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef. (optional, default `[]`)
EXAMPLE
@ -970,14 +965,14 @@ def grid_layout_widget(
PARAMETERS
- `type` **string** Type of layout component, we can have "card" (optional, default `"card"`)
- `id` **string** Id of the layout component, will be used to identify the component. (optional, default `uuidv4()`)
- `title` **string** Title of the layout component, will be displayed at the top if exists. Type of layout component will determine the style of the title. (optional, default `""`)
- `link` **string** Will transform the container tag from a div to an a tag with the link as href. Useful with card type. (optional, default `""`)
- `columns` **object** Work with grid system { pc: 12, tablet: 12, mobile: 12} (optional, default `{"pc":12,"tablet":12,"mobile":12}`)
- `gridLayoutClass` **string** Additional class (optional, default `"items-start"`)
- `display` **array** Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef. (optional, default `[]`)
- `tabId` **string** Case the container is converted to an anchor with a link, we can define the tabId, by default it is the contentIndex (optional, default `contentIndex`)
- `type` **String** Type of layout component, we can have "card" (optional, default `"card"`)
- `id` **String** Id of the layout component, will be used to identify the component. (optional, default `uuidv4()`)
- `title` **String** Title of the layout component, will be displayed at the top if exists. Type of layout component will determine the style of the title. (optional, default `""`)
- `link` **String** Will transform the container tag from a div to an a tag with the link as href. Useful with card type. (optional, default `""`)
- `columns` **Object** Work with grid system { pc: 12, tablet: 12, mobile: 12} (optional, default `{"pc":12,"tablet":12,"mobile":12}`)
- `gridLayoutClass` **String** Additional class (optional, default `"items-start"`)
- `display` **Array** Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef. (optional, default `[]`)
- `tabId` **String** Case the container is converted to an anchor with a link, we can define the tabId, by default it is the contentIndex (optional, default `contentIndex`)
EXAMPLE
@ -1018,12 +1013,12 @@ def icons_widget(
PARAMETERS
- `iconName` **string** The name of the icon to display. The icon name is the name of the file without the extension on lowercase.
- `iconClass` **string** Class to apply to the icon. In case the icon is related to a widget, the widget will set the right class automatically. (optional, default `"base"`)
- `color` **string** The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker'). (optional, default `""`)
- `isStick` **boolean** If true, the icon will be stick to the top right of the parent container. (optional, default `false`)
- `disabled` **boolean** If true, the icon will be disabled. (optional, default `false`)
- `value` **any** Attach a value to icon. Useful on some cases like table filtering using icons. (optional, default `""`)
- `iconName` **String** The name of the icon to display. The icon name is the name of the file without the extension on lowercase.
- `iconClass` **String** Class to apply to the icon. In case the icon is related to a widget, the widget will set the right class automatically. (optional, default `"base"`)
- `color` **String** The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker'). (optional, default `""`)
- `isStick` **Boolean** If true, the icon will be stick to the top right of the parent container. (optional, default `false`)
- `disabled` **Boolean** If true, the icon will be disabled. (optional, default `false`)
- `value` **Any** Attach a value to icon. Useful on some cases like table filtering using icons. (optional, default `""`)
EXAMPLE
@ -1079,26 +1074,26 @@ def input_widget(
PARAMETERS
- `id` **string** Unique id (optional, default `uuidv4()`)
- `type` **string** text, email, password, number, tel, url (optional, default `"text"`)
- `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 (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 `"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`)
- `id` **String** Unique id (optional, default `uuidv4()`)
- `type` **String** text, email, password, number, tel, url (optional, default `"text"`)
- `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 (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 `"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`)
EXAMPLE
@ -1149,10 +1144,10 @@ def instance_widget(
PARAMETERS
- `title` **string**;
- `status` **string**;
- `details` **array** List of details to display
- `buttons` **array** List of buttons to display
- `title` **String**;
- `status` **String**;
- `details` **Array** List of details to display
- `buttons` **Array** List of buttons to display
EXAMPLE
@ -1192,7 +1187,6 @@ def instance_widget(
def list_widget(
popovers,
label: str,
name: str,
value: str,
@ -1200,6 +1194,7 @@ def list_widget(
attrs: dict = {},
separator: str = " ",
maxBtnChars: str = "",
popovers: list = [],
inpType: str = "list",
disabled: bool = False,
required: bool = False,
@ -1218,25 +1213,25 @@ def list_widget(
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 `{}`)
- `separator` **string** Separator to split the value, by default it is a space (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 `"list"`)
- `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`)
- `onlyDown` **boolean** If the dropdown should stay down (optional, default `false`)
- `overflowAttrEl` **boolean** Attribute 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`)
- `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 `{}`)
- `separator` **String** Separator to split the value, by default it is a space (optional, default `" "`)
- `maxBtnChars` **String** Max char to display in the dropdown button handler. (optional, default `""`)
- `popovers` **Array** List of popovers to display more information (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 `"list"`)
- `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`)
- `onlyDown` **Boolean** If the dropdown should stay down (optional, default `false`)
- `overflowAttrEl` **Boolean** Attribute 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`)
EXAMPLE
@ -1257,7 +1252,6 @@ def list_widget(
"""
data = {
"popovers" : popovers,
"label" : label,
"name" : name,
"value" : value,
@ -1265,7 +1259,7 @@ def list_widget(
# List of params that will be add only if not default value
list_params = [("id", id, ""),("attrs", attrs, {}),("separator", separator, " "),("maxBtnChars", maxBtnChars, ""),("inpType", inpType, "list"),("disabled", disabled, False),("required", required, False),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("onlyDown", onlyDown, False),("overflowAttrEl", overflowAttrEl, ""),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")]
list_params = [("id", id, ""),("attrs", attrs, {}),("separator", separator, " "),("maxBtnChars", maxBtnChars, ""),("popovers", popovers, []),("inpType", inpType, "list"),("disabled", disabled, False),("required", required, False),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("onlyDown", onlyDown, False),("overflowAttrEl", overflowAttrEl, ""),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -1282,7 +1276,7 @@ def modal_widget(
PARAMETERS
- `widgets` **array** Array of containers and widgets
- `widgets` **Array** Array of containers and widgets
EXAMPLE
@ -1364,10 +1358,10 @@ def multiple_widget(
PARAMETERS
- `multiples` **object** The multiples settings to display. This needs to be a dict of settings using default field format.
- `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"}`)
- `containerClass` **string** Additionnal class to add to the container (optional, default `""`)
- `tadId` **string** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`)
- `multiples` **Object** The multiples settings to display. This needs to be a dict of settings using default field format.
- `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"}`)
- `containerClass` **String** Additionnal class to add to the container (optional, default `""`)
- `tadId` **String** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`)
EXAMPLE
@ -1469,8 +1463,8 @@ def pairs_widget(
PARAMETERS
- `pairs` **array** The list of key value information. The key and value can be a translation key or a raw text.
- `columns` **object** Determine the position of the items in the grid system. (optional, default `{"pc":"12","tablet":"12","mobile":"12"}`)
- `pairs` **Array** The list of key value information. The key and value can be a translation key or a raw text.
- `columns` **Object** Determine the position of the items in the grid system. (optional, default `{"pc":"12","tablet":"12","mobile":"12"}`)
EXAMPLE
@ -1510,13 +1504,13 @@ def popover_widget(
PARAMETERS
- `text` **string** Content of the popover. Can be a translation key or by default raw text.
- `href` **string** Link of the anchor. By default it is a # link. (optional, default `"#"`)
- `color` **string** Color of the icon between tailwind colors
- `attrs` **object** List of attributs to add to the text. (optional, default `{}`)
- `tag` **string** By default it is a anchor tag, but we can use other tag like div in case of popover on another anchor (optional, default `"a"`)
- `iconClass` **string** (optional, default `"icon-default"`)
- `tabId` **(string | number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`)
- `text` **String** Content of the popover. Can be a translation key or by default raw text.
- `href` **String** Link of the anchor. By default it is a # link. (optional, default `"#"`)
- `color` **String** Color of the icon between tailwind colors
- `attrs` **Object** List of attributs to add to the text. (optional, default `{}`)
- `tag` **String** By default it is a anchor tag, but we can use other tag like div in case of popover on another anchor (optional, default `"a"`)
- `iconClass` **String** (optional, default `"icon-default"`)
- `tabId` **(String | Number)** The tabindex of the field, by default it is the contentIndex (optional, default `contentIndex`)
EXAMPLE
@ -1554,8 +1548,8 @@ def popover_group_widget(
PARAMETERS
- `popovers` **array** List of popovers to display. Popover component is used.
- `groupClasss` **string** Additional class for the flex container (optional, default `""`)
- `popovers` **Array** List of popovers to display. Popover component is used.
- `groupClasss` **String** Additional class for the flex container (optional, default `""`)
EXAMPLE
@ -1600,11 +1594,11 @@ def raw_widget(
PARAMETERS
- `template` **object** Template object with plugin and settings data.
- `operation` **string** Operation type (edit, new, delete). (optional, default `"edit"`)
- `oldServerName` **string** Old server name. This is a server name before any changes. (optional, default `""`)
- `containerClass` **string** Container
- `columns` **object** Columns object.
- `template` **Object** Template object with plugin and settings data.
- `operation` **String** Operation type (edit, new, delete). (optional, default `"edit"`)
- `oldServerName` **String** Old server name. This is a server name before any changes. (optional, default `""`)
- `containerClass` **String** Container
- `columns` **Object** Columns object.
EXAMPLE
@ -1634,13 +1628,13 @@ def raw_widget(
def select_widget(
popovers,
label: str,
name: str,
value: str,
values: list,
id: str = "",
attrs: dict = {},
popovers: list = [],
inpType: str = "select",
maxBtnChars: str = "",
disabled: bool = False,
@ -1663,26 +1657,26 @@ def select_widget(
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** Attribute 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`)
- `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 (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 `"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** Attribute 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`)
EXAMPLE
@ -1707,7 +1701,6 @@ def select_widget(
"""
data = {
"popovers" : popovers,
"label" : label,
"name" : name,
"value" : value,
@ -1716,7 +1709,7 @@ def select_widget(
# List of params that will be add only if not default value
list_params = [("id", id, ""),("attrs", attrs, {}),("inpType", inpType, "select"),("maxBtnChars", maxBtnChars, ""),("disabled", disabled, False),("required", required, False),("requiredValues", requiredValues, []),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("onlyDown", onlyDown, False),("overflowAttrEl", overflowAttrEl, ""),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")]
list_params = [("id", id, ""),("attrs", attrs, {}),("popovers", popovers, []),("inpType", inpType, "select"),("maxBtnChars", maxBtnChars, ""),("disabled", disabled, False),("required", required, False),("requiredValues", requiredValues, []),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("hideLabel", hideLabel, False),("onlyDown", onlyDown, False),("overflowAttrEl", overflowAttrEl, ""),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -1737,11 +1730,11 @@ def stat_widget(
PARAMETERS
- `title` **string** The title of the stat. Can be a translation key or by default raw text.
- `stat` **(string | number)** The value
- `subtitle` **string** The subtitle of the stat. Can be a translation key or by default raw text. (optional, default `""`)
- `iconName` **string** A top-right icon to display between icon available in Icons/Stat. Case falsy value, no icon displayed. The icon name is the name of the file without the extension on lowercase. (optional, default `""`)
- `subtitleColor` **string** The color of the subtitle between error, success, warning, info (optional, default `"info"`)
- `title` **String** The title of the stat. Can be a translation key or by default raw text.
- `stat` **(String | Number)** The value
- `subtitle` **String** The subtitle of the stat. Can be a translation key or by default raw text. (optional, default `""`)
- `iconName` **String** A top-right icon to display between icon available in Icons/Stat. Case falsy value, no icon displayed. The icon name is the name of the file without the extension on lowercase. (optional, default `""`)
- `subtitleColor` **String** The color of the subtitle between error, success, warning, info (optional, default `"info"`)
EXAMPLE
@ -1780,9 +1773,9 @@ def status_widget(
PARAMETERS
- `id` **string** The id of the status icon.
- `status` **string** The color of the icon between error, success, warning, info (optional, default `"info"`)
- `statusClass` **string** Additional class, for example to use with grid system. (optional, default `""`)
- `id` **String** The id of the status icon.
- `status` **String** The color of the icon between error, success, warning, info (optional, default `"info"`)
- `statusClass` **String** Additional class, for example to use with grid system. (optional, default `""`)
EXAMPLE
@ -1822,14 +1815,14 @@ def subtitle_widget(
PARAMETERS
- `subtitle` **string** Can be a translation key or by default raw text.
- `type` **string** The type of title between "container", "card", "content", "min" or "stat" (optional, default `"card"`)
- `tag` **string** The tag of the subtitle. Can be h1, h2, h3, h4, h5, h6 or p. If empty, will be determine by the type of subtitle. (optional, default `""`)
- `color` **string** The color of the subtitle between error, success, warning, info or tailwind color (optional, default `""`)
- `bold` **boolean** If the subtitle should be bold or not. (optional, default `false`)
- `uppercase` **boolean** If the subtitle should be uppercase or not. (optional, default `false`)
- `lowercase` **boolean** If the subtitle should be lowercase or not. (optional, default `false`)
- `subtitleClass` **string** Additional class, useful when component is used directly on a grid system (optional, default `""`)
- `subtitle` **String** Can be a translation key or by default raw text.
- `type` **String** The type of title between "container", "card", "content", "min" or "stat" (optional, default `"card"`)
- `tag` **String** The tag of the subtitle. Can be h1, h2, h3, h4, h5, h6 or p. If empty, will be determine by the type of subtitle. (optional, default `""`)
- `color` **String** The color of the subtitle between error, success, warning, info or tailwind color (optional, default `""`)
- `bold` **Boolean** If the subtitle should be bold or not. (optional, default `false`)
- `uppercase` **Boolean** If the subtitle should be uppercase or not. (optional, default `false`)
- `lowercase` **Boolean** If the subtitle should be lowercase or not. (optional, default `false`)
- `subtitleClass` **String** Additional class, useful when component is used directly on a grid system (optional, default `""`)
EXAMPLE
@ -1875,15 +1868,15 @@ def table_widget(
PARAMETERS
- `title` **string** Determine the title of the table.
- `header` **array** Determine the header of the table.
- `positions` **array** Determine the position of each item in the table in a list of number based on 12 columns grid.
- `items` **array** items to render in the table. This need to be an array (row) of array (cols) with a cell being a regular widget.
- `filters` **array** Determine the filters of the table. (optional, default `[]`)
- `minWidth` **string** Determine the minimum size of the table. Can be "base", "sm", "md", "lg", "xl". (optional, default `"base"`)
- `containerClass` **string** Container additional class. (optional, default `""`)
- `containerWrapClass` **string** Container wrap additional class. (optional, default `""`)
- `tableClass` **string** Table additional class. (optional, default `""`)
- `title` **String** Determine the title of the table.
- `header` **Array** Determine the header of the table.
- `positions` **Array** Determine the position of each item in the table in a list of number based on 12 columns grid.
- `items` **Array** items to render in the table. This need to be an array (row) of array (cols) with a cell being a regular widget.
- `filters` **Array** Determine the filters of the table. (optional, default `[]`)
- `minWidth` **String** Determine the minimum size of the table. Can be "base", "sm", "md", "lg", "xl". (optional, default `"base"`)
- `containerClass` **String** Container additional class. (optional, default `""`)
- `containerWrapClass` **String** Container wrap additional class. (optional, default `""`)
- `tableClass` **String** Table additional class. (optional, default `""`)
EXAMPLE
@ -2034,7 +2027,7 @@ def templates_widget(
PARAMETERS
- `templates` **object** List of advanced templates that contains settings. Must be a dict with mode as key, then the template name as key with a list of data (different for each modes).
- `templates` **Object** List of advanced templates that contains settings. Must be a dict with mode as key, then the template name as key with a list of data (different for each modes).
- `operation` **string** Operation type (edit, new, delete). (optional, default `"edit"`)
- `oldServerName` **string** Old server name. This is a server name before any changes. (optional, default `""`)
@ -2081,14 +2074,14 @@ def text_widget(
PARAMETERS
- `text` **string** The text value. Can be a translation key or by default raw text.
- `textClass` **string** Style of text. Can be replace by any class starting by 'text-' like 'text-stat'. (optional, default `""`)
- `color` **string** The color of the text between error, success, warning, info or tailwind color (optional, default `""`)
- `bold` **boolean** If the text should be bold or not. (optional, default `false`)
- `uppercase` **boolean** If the text should be uppercase or not. (optional, default `false`)
- `tag` **string** The tag of the text. Can be p, span, div, h1, h2, h3, h4, h5, h6 (optional, default `"p"`)
- `icon` **(boolean | object)** The icon to add before the text. If true, will add a default icon. If object, will add the icon with the name and the color. (optional, default `false`)
- `attrs` **object** List of attributes to add to the text. (optional, default `{}`)
- `text` **String** The text value. Can be a translation key or by default raw text.
- `textClass` **String** Style of text. Can be replace by any class starting by 'text-' like 'text-stat'. (optional, default `""`)
- `color` **String** The color of the text between error, success, warning, info or tailwind color (optional, default `""`)
- `bold` **Boolean** If the text should be bold or not. (optional, default `false`)
- `uppercase` **Boolean** If the text should be uppercase or not. (optional, default `false`)
- `tag` **String** The tag of the text. Can be p, span, div, h1, h2, h3, h4, h5, h6 (optional, default `"p"`)
- `icon` **(Boolean | Object)** The icon to add before the text. If true, will add a default icon. If object, will add the icon with the name and the color. (optional, default `false`)
- `attrs` **Object** List of attributes to add to the text. (optional, default `{}`)
EXAMPLE
@ -2127,13 +2120,13 @@ def title_widget(
PARAMETERS
- `title` **string** Can be a translation key or by default raw text.
- `type` **string** The type of title between "container", "card", "content", "min" or "stat" (optional, default `"card"`)
- `tag` **string** The tag of the title. Can be h1, h2, h3, h4, h5, h6 or p. If empty, will be determine by the type of title. (optional, default `""`)
- `color` **string** The color of the title between error, success, warning, info or tailwind color (optional, default `""`)
- `uppercase` **boolean** If the title should be uppercase or not. (optional, default `false`)
- `lowercase` **boolean** If the title should be lowercase or not. (optional, default `false`)
- `titleClass` **string** Additional class, useful when component is used directly on a grid system (optional, default `""`)
- `title` **String** Can be a translation key or by default raw text.
- `type` **String** The type of title between "container", "card", "content", "min" or "stat" (optional, default `"card"`)
- `tag` **String** The tag of the title. Can be h1, h2, h3, h4, h5, h6 or p. If empty, will be determine by the type of title. (optional, default `""`)
- `color` **String** The color of the title between error, success, warning, info or tailwind color (optional, default `""`)
- `uppercase` **Boolean** If the title should be uppercase or not. (optional, default `false`)
- `lowercase` **Boolean** If the title should be lowercase or not. (optional, default `false`)
- `titleClass` **String** Additional class, useful when component is used directly on a grid system (optional, default `""`)
EXAMPLE
@ -2170,8 +2163,8 @@ def unmatch_widget(
PARAMETERS
- `text` **string** The text to display
- `unmatchClass` **string** The class to apply to the message. If not provided, the class will be based on the parent component. (optional, default `""`)
- `text` **String** The text to display
- `unmatchClass` **String** The class to apply to the message. If not provided, the class will be based on the parent component. (optional, default `""`)
EXAMPLE

10
src/ui/client/dashboard/components/Form/Advanced.vue
View file

@ -45,11 +45,11 @@ import { v4 as uuidv4 } from "uuid";
* },
* ],
* }
* @param {object} template - Template object with plugin and settings data.
* @param {Object} template - Template object with plugin and settings data.
* @param {string} containerClass - Container
* @param {string} [operation="edit"] - Operation type (edit, new, delete).
* @param {string} [oldServerName=""] - Old server name. This is a server name before any changes.
* @param {object} columns - Columns object.
* @param {Object} columns - Columns object.
*/
const advancedForm = useAdvancedForm();
@ -209,7 +209,7 @@ const filters = [
** @name filter
** @description Get the filter data from the <Filter /> 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 <Filter /> component.
** @param {Object} filterData - The filter data from the <Filter /> component.
** @returns {void}
*/
function filter(filterData) {
@ -251,7 +251,7 @@ function setValidity() {
/**
** @name getFirstPlugin
** @description Get the first available plugin in the template.
** @param {object} template - The template object.
** @param {Object} template - The template object.
** @returns {string} - The first plugin name.
*/
function getFirstPlugin(template) {
@ -265,7 +265,7 @@ function getFirstPlugin(template) {
/**
** @name getPluginNames
** @description Get the first available plugin in the template.
** @param {object} template - The template object.
** @param {Object} template - The template object.
** @returns {array} - The list of plugin names.
*/
function getPluginNames(template) {

4
src/ui/client/dashboard/components/Form/Easy.vue
View file

@ -49,11 +49,11 @@ import { useEasyForm } from "@store/form.js";
* },
* ],
* }
* @param {object} template - Template object with plugin and settings data.
* @param {Object} template - Template object with plugin and settings data.
* @param {string} containerClass - Container
* @param {string} [operation="edit"] - Operation type (edit, new, delete).
* @param {string} [oldServerName=""] - Old server name. This is a server name before any changes.
* @param {object} columns - Columns object.
* @param {Object} columns - Columns object.
*/
const easyForm = useEasyForm();

2
src/ui/client/dashboard/components/Form/Fields.vue
View file

@ -27,7 +27,7 @@ import { contentIndex } from "@utils/tabindex.js";
* },
* ]
* }
* @param {object} setting - Setting needed to render a field.
* @param {Object} setting - Setting needed to render a field.
*/
const props = defineProps({

18
src/ui/client/dashboard/components/Form/Raw.vue
View file

@ -20,11 +20,11 @@ import { useRawForm } from "@store/form.js";
* "HTTPS_PORT": "8443",
* "MULTISITE": "yes"
* }
* @param {object} template - Template object with plugin and settings data.
* @param {string} [operation="edit"] - Operation type (edit, new, delete).
* @param {string} [oldServerName=""] - Old server name. This is a server name before any changes.
* @param {string} containerClass - Container
* @param {object} columns - Columns object.
* @param {Object} template - Template object with plugin and settings data.
* @param {String} [operation="edit"] - Operation type (edit, new, delete).
* @param {String} [oldServerName=""] - Old server name. This is a server name before any changes.
* @param {String} containerClass - Container
* @param {Object} columns - Columns object.
*/
const rawForm = useRawForm();
@ -78,14 +78,14 @@ watch(
setTimeout(() => {
data.isRender = true;
}, 50);
},
}
);
/**
* @name updateRaw
* @description Get the raw data from editor, update the raw store with it and check if it is valid JSON.
* @param {string} v - The raw data to update.
* @returns {void}
* @param {String} v - The raw data to update.
* @returns {Void}
*/
function updateRaw(v) {
// Transform to a possible valid JSON
@ -130,7 +130,7 @@ function updateRaw(v) {
* @description Convert a JSON object to a raw string that can be passed to the editor.
* This will convert JSON to key value pairs (format key=value).
* This is only used at first mount when there is no raw data.
* @param {string} json - The template json to convert
* @param {String} json - The template json to convert
* @returns {string} - The raw string
*/
function json2raw(json) {

2
src/ui/client/dashboard/components/Form/Templates.vue
View file

@ -23,7 +23,7 @@ import { v4 as uuidv4 } from "uuid";
* low : [...],
* }
* }
* @param {object} templates - List of advanced templates that contains settings. Must be a dict with mode as key, then the template name as key with a list of data (different for each modes).
* @param {Object} templates - List of advanced templates that contains settings. Must be a dict with mode as key, then the template name as key with a list of data (different for each modes).
* @param {string} [operation="edit"] - Operation type (edit, new, delete).
* @param {string} [oldServerName=""] - Old server name. This is a server name before any changes.
*/

20
src/ui/client/dashboard/components/Forms/Error/Dropdown.vue
View file

@ -8,10 +8,10 @@
* isValid: false,
* isValue: false,
* }
* @param {boolean} [isValid=false] - Check if the field is valid
* @param {boolean} [isValue=false] - Check if the field has a value, display a different message if the field is empty or not
* @param {boolean} [isValueTaken=false] - Check if input is already taken. Use with list input.
* @param {string} [errorClass=""] - Additional class
* @param {Boolean} [isValid=false] - Check if the field is valid
* @param {Boolean} [isValue=false] - Check if the field has a value, display a different message if the field is empty or not
* @param {Boolean} [isValueTaken=false] - Check if input is already taken. Use with list input.
* @param {String} [errorClass=""] - Additional class
*/
const props = defineProps({
@ -51,12 +51,12 @@ const props = defineProps({
props.isValid
? $t("inp_input_valid")
: props.isNoMatch
? $t("inp_input_no_match")
: props.isValueTaken
? $t("inp_input_error_taken")
: !props.isValue
? $t("inp_input_error_required")
: $t("inp_input_error")
? $t("inp_input_no_match")
: props.isValueTaken
? $t("inp_input_error_taken")
: !props.isValue
? $t("inp_input_error_required")
: $t("inp_input_error")
}}
</p>
</div>

20
src/ui/client/dashboard/components/Forms/Error/Field.vue
View file

@ -8,10 +8,10 @@
* isValid: false,
* isValue: false,
* }
* @param {boolean} [isValid=false] - Check if the field is valid
* @param {boolean} [isValue=false] - Check if the field has a value, display a different message if the field is empty or not
* @param {boolean} [isValueTaken=false] - Check if input is already taken. Use with list input.
* @param {string} [errorClass=""] - Additional class
* @param {Boolean} [isValid=false] - Check if the field is valid
* @param {Boolean} [isValue=false] - Check if the field has a value, display a different message if the field is empty or not
* @param {Boolean} [isValueTaken=false] - Check if input is already taken. Use with list input.
* @param {String} [errorClass=""] - Additional class
*/
const props = defineProps({
@ -46,12 +46,12 @@ const props = defineProps({
props.isValid
? $t("inp_input_valid")
: props.isNoMatch
? $t("inp_input_no_match")
: props.isValueTaken
? $t("inp_input_error_taken")
: !props.isValue
? $t("inp_input_error_required")
: $t("inp_input_error")
? $t("inp_input_no_match")
: props.isValueTaken
? $t("inp_input_error_taken")
: !props.isValue
? $t("inp_input_error_required")
: $t("inp_input_error")
}}
</p>
</template>

10
src/ui/client/dashboard/components/Forms/Feature/Clipboard.vue
View file

@ -16,11 +16,11 @@ import { useUUID } from "@utils/global.js";
* clipboadClass: 'mx-2',
* copyClass: 'mt-2',
* }
* @param {id} [id=uuidv4()] - Unique id
* @param {isClipboard} [isClipboard=false] - Display a clipboard button to copy a value
* @param {valueToCopy} [valueToCopy=""] - The value to copy
* @param {clipboadClass} [clipboadClass=""] - Additional class for the clipboard container. Useful to fit the component in a specific container.
* @param {copyClass} [copyClass=""] - The class of the copy message. Useful to fit the component in a specific container.
* @param {String} [id=uuidv4()] - Unique id
* @param {Boolean} [isClipboard=false] - Display a clipboard button to copy a value
* @param {String} [valueToCopy=""] - The value to copy
* @param {String} [clipboadClass=""] - Additional class for the clipboard container. Useful to fit the component in a specific container.
* @param {String} [copyClass=""] - The class of the copy message. Useful to fit the component in a specific container.
*/
const { text, copy, copied, isSupported } = useClipboard({ legacy: true });

30
src/ui/client/dashboard/components/Forms/Field/Checkbox.vue
View file

@ -29,21 +29,21 @@ import { useUUID } from "@utils/global.js";
* },
* ]
* }
* @param {string} [id=uuidv4()] - Unique id
* @param {string} label - The label of the field. Can be a translation key or by default raw text.
* @param {string} name - The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
* @param {string} value
* @param {object} [attrs={}] - Additional attributes to add to the field
* @param {array} [popovers=[]] - List of popovers to display more information
* @param {string} [inpType="checkbox"] - The type of the field, useful when we have multiple fields in the same container to display the right field
* @param {boolean} [disabled=false]
* @param {boolean} [required=false]
* @param {object} [columns={"pc": "12", "tablet": "12", "mobile": "12"}] - Field has a grid system. This allow to get multiple field in the same row if needed.
* @param {boolean} [hideLabel=false]
* @param {string} [containerClass=""]
* @param {string} [headerClass=""]
* @param {string} [inpClass=""]
* @param {string|number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
* @param {String} [id=uuidv4()] - Unique id
* @param {String} label - The label of the field. Can be a translation key or by default raw text.
* @param {String} name - The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
* @param {String} value
* @param {Object} [attrs={}] - Additional attributes to add to the field
* @param {Array} [popovers=[]] - List of popovers to display more information
* @param {String} [inpType="checkbox"] - The type of the field, useful when we have multiple fields in the same container to display the right field
* @param {Boolean} [disabled=false]
* @param {Boolean} [required=false]
* @param {Object} [columns={"pc": "12", "tablet": "12", "mobile": "12"}] - Field has a grid system. This allow to get multiple field in the same row if needed.
* @param {Boolean} [hideLabel=false]
* @param {String} [containerClass=""]
* @param {String} [headerClass=""]
* @param {String} [inpClass=""]
* @param {String|Number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
*/
const props = defineProps({

62
src/ui/client/dashboard/components/Forms/Field/Combobox.vue
View file

@ -39,26 +39,26 @@ import { useUUID } from "@utils/global.js";
* },
* ]
* }
* @param {string} [id=uuidv4()] - Unique id
* @param {string} label - The label of the field. Can be a translation key or by default raw text.
* @param {string} name - The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
* @param {string} value
* @param {array} values
* @param {object} [attrs={}] - Additional attributes to add to the field
* @param {string} [maxBtnChars=""] - Max char to display in the dropdown button handler.
* @param {array} [popovers=[]] - List of popovers to display more information
* @param {string} [inpType="select"] - The type of the field, useful when we have multiple fields in the same container to display the right field
* @param {boolean} [disabled=false]
* @param {boolean} [required=false]
* @param {array} [requiredValues=[]] - values that need to be selected to be valid, works only if required is true
* @param {object} [columns={"pc": "12", "tablet": "12", "mobile": "12"}] - Field has a grid system. This allow to get multiple field in the same row if needed.
* @param {boolean} [hideLabel=false]
* @param {boolean} [onlyDown=false] - If the dropdown should check the bottom of the
* @param {boolean} [overflowAttrEl=""] - Attribute to select the container the element has to check for overflow
* @param {string} [containerClass=""]
* @param {string} [inpClass=""]
* @param {string} [headerClass=""]
* @param {string|number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
* @param {String} [id=uuidv4()] - Unique id
* @param {String} label - The label of the field. Can be a translation key or by default raw text.
* @param {String} name - The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
* @param {String} value
* @param {Array} values
* @param {Object} [attrs={}] - Additional attributes to add to the field
* @param {String} [maxBtnChars=""] - Max char to display in the dropdown button handler.
* @param {Array} [popovers=[]] - List of popovers to display more information
* @param {String} [inpType="select"] - The type of the field, useful when we have multiple fields in the same container to display the right field
* @param {Boolean} [disabled=false]
* @param {Boolean} [required=false]
* @param {Array} [requiredValues=[]] - values that need to be selected to be valid, works only if required is true
* @param {Object} [columns={"pc": "12", "tablet": "12", "mobile": "12"}] - Field has a grid system. This allow to get multiple field in the same row if needed.
* @param {Boolean} [hideLabel=false]
* @param {Boolean} [onlyDown=false] - If the dropdown should check the bottom of the
* @param {Boolean} [overflowAttrEl=""] - Attribute to select the container the element has to check for overflow
* @param {String} [containerClass=""]
* @param {String} [inpClass=""]
* @param {String} [headerClass=""]
* @param {String|Number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
*/
const props = defineProps({
@ -204,7 +204,7 @@ const selectDropdown = ref();
/**
* @name toggleSelect
* @description This will toggle the custom select dropdown component.
* @returns {void}
* @returns {Void}
*/
function toggleSelect() {
select.isOpen = select.isOpen ? false : true;
@ -254,7 +254,7 @@ function toggleSelect() {
/**
* @name closeSelect
* @description This will close the custom select dropdown component.
* @returns {void}
* @returns {Void}
*/
function closeSelect() {
select.isOpen = false;
@ -264,7 +264,7 @@ function closeSelect() {
* @name changeValue
* @description 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.
* @param {string} newValue - The new value to set to the select.
* @param {String} newValue - The new value to set to the select.
* @returns {string} - The new value of the select
*/
function changeValue(newValue) {
@ -287,8 +287,8 @@ function changeValue(newValue) {
* @name closeOutside
* @description 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.
* @param {event} e - The event object.
* @returns {void}
* @param {Event} e - The event object.
* @returns {Void}
*/
function closeOutside(e) {
try {
@ -303,8 +303,8 @@ function closeOutside(e) {
/**
* @name closeScroll
* @description 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.
* @param {event} e - The event object.
* @returns {void}
* @param {Event} e - The event object.
* @returns {Void}
*/
function closeScroll(e) {
if (!e.target) return;
@ -322,8 +322,8 @@ function closeScroll(e) {
/**
* @name closeEscape
* @description This function is linked to a key event and will close the select in case "Escape" key is pressed.
* @param {event} e - The event object.
* @returns {void}
* @param {Event} e - The event object.
* @returns {Void}
*/
function closeEscape(e) {
if (e.key !== "Escape") return;
@ -334,8 +334,8 @@ function closeEscape(e) {
* @name closeTab
* @description 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.
* @param {event} e - The event object.
* @returns {void}
* @param {Event} e - The event object.
* @returns {Void}
*/
function closeTab(e) {
if (e.key !== "Tab" && e.key !== "Shift-Tab") return;

92
src/ui/client/dashboard/components/Forms/Field/Datepicker.vue
View file

@ -41,23 +41,23 @@ import "@assets/css/flatpickr.dark.min.css";
* },
* ],
* }
* @param {string} [id=uuidv4()] - Unique id
* @param {string} label - The label of the field. Can be a translation key or by default raw text.
* @param {string} name - The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
* @param {array} popovers - List of popovers to display more information
* @param {object} [attrs={}] - Additional attributes to add to the field
* @param {string} [inpType="datepicker"] - The type of the field, useful when we have multiple fields in the same container to display the right field
* @param {timestamp} [value=""] - Default date when instantiate
* @param {timestamp} [minDate=""] - Impossible to pick a date before this date.
* @param {timestamp} [maxDate=""] - Impossible to pick a date after this date.
* @param {boolean} [isClipboard=true] - allow to copy the timestamp value
* @param {boolean} [hideLabel=false]
* @param {object} [columns={"pc": "12", "tablet": "12", "mobile": "12"}] - Field has a grid system. This allow to get multiple field in the same row if needed.
* @param {boolean} [disabled=false]
* @param {boolean} [required=false]
* @param {string} [headerClass=""]
* @param {string} [containerClass=""]
* @param {string|number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
* @param {String} [id=uuidv4()] - Unique id
* @param {String} label - The label of the field. Can be a translation key or by default raw text.
* @param {String} name - The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
* @param {Array} [popovers=[]] - List of popovers to display more information
* @param {Object} [attrs={}] - Additional attributes to add to the field
* @param {String} [inpType="datepicker"] - The type of the field, useful when we have multiple fields in the same container to display the right field
* @param {Timestamp} [value=""] - Default date when instantiate
* @param {Timestamp} [minDate=""] - Impossible to pick a date before this date.
* @param {Timestamp} [maxDate=""] - Impossible to pick a date after this date.
* @param {Boolean} [isClipboard=true] - allow to copy the timestamp value
* @param {Boolean} [hideLabel=false]
* @param {Object} [columns={"pc": "12", "tablet": "12", "mobile": "12"}] - Field has a grid system. This allow to get multiple field in the same row if needed.
* @param {Boolean} [disabled=false]
* @param {Boolean} [required=false]
* @param {String} [headerClass=""]
* @param {String} [containerClass=""]
* @param {String|Number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
*/
const props = defineProps({
@ -167,9 +167,9 @@ let datepicker;
/**
* @name setMonthSelect
* @description Create a custom select for month dropdown and hide default one.
* @param {element} calendarEl - The calendar element.
* @param {string} id - The id of the datepicker.
* @returns {void}
* @param {Element} calendarEl - The calendar element.
* @param {String} id - The id of the datepicker.
* @returns {Void}
*/
function setMonthSelect(calendarEl, id) {
// Hide default select and options
@ -245,9 +245,9 @@ function setMonthSelect(calendarEl, id) {
/**
* @name setPickerAtt
* @description Set attributes to the calendar element to make it more accessible.
* @param {element} calendarEl - The calendar element.
* @param {string|boolean} [id=false] - The id of the datepicker.
* @returns {void}
* @param {Element} calendarEl - The calendar element.
* @param {String|Boolean} [id=false] - The id of the datepicker.
* @returns {Void}
*/
function setPickerAtt(calendarEl, id = false) {
// change error non-standard attributes
@ -283,10 +283,10 @@ function setPickerAtt(calendarEl, id = false) {
* @description 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.
* @param {element} calendarEl - The calendar element.
* @param {string} id - The id of the datepicker.
* @param {object} datepicker - The datepicker instance.
* @returns {void}
* @param {Element} calendarEl - The calendar element.
* @param {String} id - The id of the datepicker.
* @param {Object} datepicker - The datepicker instance.
* @returns {Void}
*/
function handleEvents(calendarEl, id, datepicker) {
calendarEl.addEventListener("click", (e) => {
@ -504,10 +504,10 @@ function handleEvents(calendarEl, id, datepicker) {
/**
* @name toggleSelect
* @description Toggle the custom select dropdown.
* @param {element} calendarEl - The calendar element.
* @param {string} id - The id of the datepicker.
* @param {event} e - The event.
* @returns {void}
* @param {Element} calendarEl - The calendar element.
* @param {String} id - The id of the datepicker.
* @param {Event} e - The event.
* @returns {Void}
*/
function toggleSelect(calendar, id, e) {
if (e.target.hasAttribute("data-months-select")) {
@ -523,10 +523,10 @@ function toggleSelect(calendar, id, e) {
/**
* @name closeSelectByDefault
* @description Close the custom select dropdown by default.
* @param {element} calendarEl - The calendar element.
* @param {string} id - The id of the datepicker.
* @param {event} e - The event.
* @returns {void}
* @param {Element} calendarEl - The calendar element.
* @param {String} id - The id of the datepicker.
* @param {Event} e - The event.
* @returns {Void}
*/
function closeSelectByDefault(calendar, id, e) {
if (!e.target.hasAttribute("data-months-select")) {
@ -541,11 +541,11 @@ function closeSelectByDefault(calendar, id, e) {
/**
* @name updateMonth
* @description Update the month when click on custom select option.
* @param {element} calendarEl - The calendar element.
* @param {string} id - The id of the datepicker.
* @param {event} e - The event.
* @param {object} datepicker - The datepicker instance.
* @returns {void}
* @param {Element} calendarEl - The calendar element.
* @param {String} id - The id of the datepicker.
* @param {Event} e - The event.
* @param {Object} datepicker - The datepicker instance.
* @returns {Void}
*/
function updateMonth(calendar, id, e, datepicker) {
if (e.target.hasAttribute("data-month")) {
@ -581,9 +581,9 @@ function updateMonth(calendar, id, e, datepicker) {
/**
* @name updateIndex
* @description Update the tabindex on the calendar element.
* @param {element} calendarEl - The calendar element.
* @param {string} target - The event target.
* @returns {void}
* @param {Element} calendarEl - The calendar element.
* @param {String} target - The event target.
* @returns {Void}
*/
function updateIndex(calendarEl, target) {
if (target.hasAttribute("tabindex")) {
@ -598,9 +598,9 @@ function updateIndex(calendarEl, target) {
/**
* @name setIndex
* @description Set the tabindex on the calendar element to work with keyboard.
* @param {element} calendarEl - The calendar element.
* @param {string} tabindex - the tabindex to set.
* @returns {void}
* @param {Element} calendarEl - The calendar element.
* @param {String} tabindex - the tabindex to set.
* @returns {Void}
*/
function setIndex(calendarEl, tabindex) {
try {

38
src/ui/client/dashboard/components/Forms/Field/Editor.vue
View file

@ -36,23 +36,23 @@ import "@assets/script/editor/theme-dawn.js";
* tabId: "1",
* columns: { pc: 12, tablet: 12, mobile: 12 },
* };
* @param {string} [id=uuidv4()] - Unique id
* @param {string} label - The label of the field. Can be a translation key or by default raw text.
* @param {string} name - The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
* @param {string} value
* @param {object} [attrs={}] - Additional attributes to add to the field
* @param {array} [popovers=[]] - List of popovers to display more information
* @param {string} [inpType="editor"] - The type of the field, useful when we have multiple fields in the same container to display the right field
* @param {object} [columns={"pc": "12", "tablet": "12", "mobile": "12"}] - Field has a grid system. This allow to get multiple field in the same row if needed.
* @param {string} [pattern=""]
* @param {boolean} [disabled=false]
* @param {boolean} [required=false]
* @param {boolean} [isClipboard=true] - allow to copy the input value
* @param {boolean} [hideLabel=false]
* @param {string} [containerClass=""]
* @param {string} [editorClass=""]
* @param {string} [headerClass=""]
* @param {string|number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
* @param {String} [id=uuidv4()] - Unique id
* @param {String} label - The label of the field. Can be a translation key or by default raw text.
* @param {String} name - The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
* @param {String} value
* @param {Object} [attrs={}] - Additional attributes to add to the field
* @param {Array} [popovers=[]] - List of popovers to display more information
* @param {String} [inpType="editor"] - The type of the field, useful when we have multiple fields in the same container to display the right field
* @param {Object} [columns={"pc": "12", "tablet": "12", "mobile": "12"}] - Field has a grid system. This allow to get multiple field in the same row if needed.
* @param {String} [pattern=""]
* @param {Boolean} [disabled=false]
* @param {Boolean} [required=false]
* @param {Boolean} [isClipboard=true] - allow to copy the input value
* @param {Boolean} [hideLabel=false]
* @param {String} [containerClass=""]
* @param {String} [editorClass=""]
* @param {String} [headerClass=""]
* @param {String|Number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
*/
const props = defineProps({
@ -280,7 +280,7 @@ class Editor {
/**
* @name removeErrCSS
* @description Remove useless CSS from the editor to avoid accessibility issues.
* @returns {void}
* @returns {Void}
*/
function removeErrCSS() {
setTimeout(() => {
@ -308,7 +308,7 @@ function removeErrCSS() {
/**
* @name setEditorAttrs
* @description Override editor attributes by adding or deleting some for better accessibility.
* @returns {void}
* @returns {Void}
*/
function setEditorAttrs() {
// Add tabindex to editor

40
src/ui/client/dashboard/components/Forms/Field/Input.vue
View file

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

64
src/ui/client/dashboard/components/Forms/Field/List.vue
View file

@ -35,25 +35,25 @@ import ErrorDropdown from "@components/Forms/Error/Dropdown.vue";
* },
* ]
* }
* @param {string} [id=uuidv4()] - Unique id
* @param {string} label - The label of the field. Can be a translation key or by default raw text.
* @param {string} name - The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
* @param {string} value
* @param {object} [attrs={}] - Additional attributes to add to the field
* @param {string} [separator=" "] - Separator to split the value, by default it is a space
* @param {string} [maxBtnChars=""] - Max char to display in the dropdown button handler.
* @param {array} [popovers=[]] - List of popovers to display more information
* @param {string} [inpType="list"] - The type of the field, useful when we have multiple fields in the same container to display the right field
* @param {boolean} [disabled=false]
* @param {boolean} [required=false]
* @param {object} [columns={"pc": "12", "tablet": "12", "mobile": "12"}] - Field has a grid system. This allow to get multiple field in the same row if needed.
* @param {boolean} [hideLabel=false]
* @param {boolean} [onlyDown=false] - If the dropdown should stay down
* @param {boolean} [overflowAttrEl=""] - Attribute the element has to check for overflow
* @param {string} [containerClass=""]
* @param {string} [inpClass=""]
* @param {string} [headerClass=""]
* @param {string|number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
* @param {String} [id=uuidv4()] - Unique id
* @param {String} label - The label of the field. Can be a translation key or by default raw text.
* @param {String} name - The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
* @param {String} value
* @param {Object} [attrs={}] - Additional attributes to add to the field
* @param {String} [separator=" "] - Separator to split the value, by default it is a space
* @param {String} [maxBtnChars=""] - Max char to display in the dropdown button handler.
* @param {Array} [popovers=[]] - List of popovers to display more information
* @param {String} [inpType="list"] - The type of the field, useful when we have multiple fields in the same container to display the right field
* @param {Boolean} [disabled=false]
* @param {Boolean} [required=false]
* @param {Object} [columns={"pc": "12", "tablet": "12", "mobile": "12"}] - Field has a grid system. This allow to get multiple field in the same row if needed.
* @param {Boolean} [hideLabel=false]
* @param {Boolean} [onlyDown=false] - If the dropdown should stay down
* @param {Boolean} [overflowAttrEl=""] - Attribute the element has to check for overflow
* @param {String} [containerClass=""]
* @param {String} [inpClass=""]
* @param {String} [headerClass=""]
* @param {String|Number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
*/
const props = defineProps({
@ -197,7 +197,7 @@ const selectDropdown = ref();
/**
* @name openSelect
* @description Open select dropdown, calculate the dropdown position and update it if needed.
* @returns {void}
* @returns {Void}
*/
function openSelect() {
inp.isOpen = true;
@ -241,8 +241,8 @@ function openSelect() {
* @name closeOutside
* @description 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.
* @param {event} e - The event object.
* @returns {void}
* @param {Event} e - The event object.
* @returns {Void}
*/ function closeOutside(e) {
if (
e.target.hasAttribute("data-select-item") ||
@ -261,8 +261,8 @@ function openSelect() {
/**
* @name closeScroll
* @description 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.
* @param {event} e - The event object.
* @returns {void}
* @param {Event} e - The event object.
* @returns {Void}
*/
function closeScroll(e) {
if (!e.target) return;
@ -280,8 +280,8 @@ function closeScroll(e) {
/**
* @name closeEscape
* @description This function is linked to a key event and will close the select in case "Escape" key is pressed.
* @param {event} e - The event object.
* @returns {void}
* @param {Event} e - The event object.
* @returns {Void}
*/
function closeEscape(e) {
if (e.key !== "Escape") return;
@ -292,8 +292,8 @@ function closeEscape(e) {
* @name closeTab
* @description 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.
* @param {event} e - The event object.
* @returns {void}
* @param {Event} e - The event object.
* @returns {Void}
*/
function closeTab(e) {
if (e.key !== "Tab" && e.key !== "Shift-Tab") return;
@ -312,8 +312,8 @@ function closeTab(e) {
/**
* @name addEntry
* @description When clicking add entry or key "Enter", will add the current input value to list.
* @param {event} e - The event object.
* @returns {void}
* @param {Event} e - The event object.
* @returns {Void}
*/
function addEntry(e) {
// check if keyboard event
@ -333,8 +333,8 @@ function addEntry(e) {
/**
* @name deleteValue
* @description Delete a value from the list.
* @param {string} value - The value to delete.
* @returns {void}
* @param {String} value - The value to delete.
* @returns {Void}
*/ function deleteValue(value) {
inp.value = inp.value
.split(props.separator)

60
src/ui/client/dashboard/components/Forms/Field/Select.vue
View file

@ -38,26 +38,26 @@ import { useUUID } from "@utils/global";
* },
* ]
* }
* @param {string} [id=uuidv4()] - Unique id
* @param {string} label - The label of the field. Can be a translation key or by default raw text.
* @param {string} name - The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
* @param {string} value
* @param {array} values
* @param {object} [attrs={}] - Additional attributes to add to the field
* @param {array} [popovers=[]] - List of popovers to display more information
* @param {string} [inpType="select"] - The type of the field, useful when we have multiple fields in the same container to display the right field
* @param {string} [maxBtnChars=""] - Max char to display in the dropdown button handler.
* @param {boolean} [disabled=false]
* @param {boolean} [required=false]
* @param {array} [requiredValues=[]] - values that need to be selected to be valid, works only if required is true
* @param {object} [columns={"pc": "12", "tablet": "12", "mobile": "12"}] - Field has a grid system. This allow to get multiple field in the same row if needed.
* @param {boolean} [hideLabel=false]
* @param {boolean} [onlyDown=false] - If the dropdown should check the bottom of the container
* @param {boolean} [overflowAttrEl=""] - Attribute to select the container the element has to check for overflow
* @param {string} [containerClass=""]
* @param {string} [inpClass=""]
* @param {string} [headerClass=""]
* @param {string|number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
* @param {String} [id=uuidv4()] - Unique id
* @param {String} label - The label of the field. Can be a translation key or by default raw text.
* @param {String} name - The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
* @param {String} value
* @param {Array} values
* @param {Object} [attrs={}] - Additional attributes to add to the field
* @param {Array} [popovers=[]] - List of popovers to display more information
* @param {String} [inpType="select"] - The type of the field, useful when we have multiple fields in the same container to display the right field
* @param {String} [maxBtnChars=""] - Max char to display in the dropdown button handler.
* @param {Boolean} [disabled=false]
* @param {Boolean} [required=false]
* @param {Array} [requiredValues=[]] - values that need to be selected to be valid, works only if required is true
* @param {Object} [columns={"pc": "12", "tablet": "12", "mobile": "12"}] - Field has a grid system. This allow to get multiple field in the same row if needed.
* @param {Boolean} [hideLabel=false]
* @param {Boolean} [onlyDown=false] - If the dropdown should check the bottom of the container
* @param {Boolean} [overflowAttrEl=""] - Attribute to select the container the element has to check for overflow
* @param {String} [containerClass=""]
* @param {String} [inpClass=""]
* @param {String} [headerClass=""]
* @param {String|Number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
*/
const props = defineProps({
@ -184,7 +184,7 @@ const selectDropdown = ref();
/**
* @name toggleSelect
* @description This will toggle the custom select dropdown component.
* @returns {void}
* @returns {Void}
*/
function toggleSelect() {
select.isOpen = select.isOpen ? false : true;
@ -231,7 +231,7 @@ function toggleSelect() {
/**
* @name closeSelect
* @description This will close the custom select dropdown component.
* @returns {void}
* @returns {Void}
*/
function closeSelect() {
select.isOpen = false;
@ -264,8 +264,8 @@ function changeValue(newValue) {
* @name closeOutside
* @description 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.
* @param {event} e - The event object.
* @returns {void}
* @param {Event} e - The event object.
* @returns {Void}
*/
function closeOutside(e) {
try {
@ -280,8 +280,8 @@ function closeOutside(e) {
/**
* @name closeScroll
* @description 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.
* @param {event} e - The event object.
* @returns {void}
* @param {Event} e - The event object.
* @returns {Void}
*/
function closeScroll(e) {
if (!e.target) return;
@ -295,8 +295,8 @@ function closeScroll(e) {
/**
* @name closeEscape
* @description This function is linked to a key event and will close the select in case "Escape" key is pressed.
* @param {event} e - The event object.
* @returns {void}
* @param {Event} e - The event object.
* @returns {Void}
*/
function closeEscape(e) {
@ -308,8 +308,8 @@ function closeEscape(e) {
* @name closeTab
* @description 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.
* @param {event} e - The event object.
* @returns {void}
* @param {Event} e - The event object.
* @returns {Void}
*/
function closeTab(e) {
if (e.key !== "Tab" && e.key !== "Shift-Tab") return;

28
src/ui/client/dashboard/components/Forms/Group/Multiple.vue
View file

@ -84,10 +84,10 @@ import Container from "@components/Widget/Container.vue";
* }
* }
* },
* @param {object} multiples - The multiples settings to display. This needs to be a dict of settings using default field format.
* @param {object} [columns={"pc": "12", "tablet": "12", "mobile": "12"}] - Field has a grid system. This allow to get multiple field in the same row if needed.
* @param {string} [containerClass=""] - Additionnal class to add to the container
* @param {string} [tadId=contentIndex] - The tabindex of the field, by default it is the contentIndex
* @param {Object} multiples - The multiples settings to display. This needs to be a dict of settings using default field format.
* @param {Object} [columns={"pc": "12", "tablet": "12", "mobile": "12"}] - Field has a grid system. This allow to get multiple field in the same row if needed.
* @param {String} [containerClass=""] - Additionnal class to add to the container
* @param {String} [tadId=contentIndex] - The tabindex of the field, by default it is the contentIndex
*/
const props = defineProps({
@ -148,7 +148,7 @@ const emits = defineEmits(["delete", "add"]);
/**
* @name setDeleteState
* @description Will determine if the group can be deleted. If at least one input is disabled, the delete button will be disabled.
* @param {object} group - The multiple group with all settings
* @param {Object} group - The multiple group with all settings
* @returns {object} - Return delete button data
*/
function setDeleteState(group) {
@ -168,8 +168,8 @@ function setDeleteState(group) {
/**
* @name setInvisible
* @description Will set a multiple group as invisible.
* @param {string|number} id - The multiple group with all settings
* @returns {void}
* @param {String|Number} id - The multiple group with all settings
* @returns {Void}
*/
function setInvisible(id) {
multiples.invisible.push(id);
@ -178,8 +178,8 @@ function setInvisible(id) {
/**
* @name delInvisible
* @description Will remove a multiple group from invisible list.
* @param {string|number} id - The multiple group with all settings
* @returns {void}
* @param {String|Number} id - The multiple group with all settings
* @returns {Void}
*/
function delInvisible(id) {
multiples.invisible = multiples.invisible.filter((v) => v !== id);
@ -188,8 +188,8 @@ function delInvisible(id) {
/**
* @name toggleVisible
* @description Will toggle a multiple group visibility.
* @param {string|number} id - The multiple group with all settings
* @returns {void}
* @param {String|Number} id - The multiple group with all settings
* @returns {Void}
*/
function toggleVisible(id) {
multiples.invisible.includes(id) ? delInvisible(id) : setInvisible(id);
@ -198,9 +198,9 @@ function toggleVisible(id) {
/**
* @name delGroup
* @description Will emit a delete event to the parent component. The parent will update the template and multiples, then the component will rerender.
* @param {string} multName - The multiple group name
* @param {string} groupName - The multiple group id
* @returns {void}
* @param {String} multName - The multiple group name
* @param {String} groupName - The multiple group id
* @returns {Void}
*/
function delGroup(multName, groupName) {
emits("delete", multName, groupName);

14
src/ui/client/dashboard/components/Forms/Header/Field.vue
View file

@ -20,13 +20,13 @@ import PopoverGroup from "@components/Widget/PopoverGroup.vue";
* },
* ],
* }
* @param {string} label - The label of the field. Can be a translation key or by default raw text.
* @param {string} id - The id of the field. This is used to link the label to the field.
* @param {string} name - The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
* @param {array} [popovers=[]] - List of popovers to display more information
* @param {boolean} [required=false]
* @param {boolean} [hideLabel=false]
* @param {string} [headerClass=""]
* @param {String} label - The label of the field. Can be a translation key or by default raw text.
* @param {String} id - The id of the field. This is used to link the label to the field.
* @param {String} name - The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
* @param {Array} [popovers=[]] - List of popovers to display more information
* @param {Boolean} [required=false]
* @param {Boolean} [hideLabel=false]
* @param {String} [headerClass=""]
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Box.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="dark"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="dark"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Carton.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="orange-darker"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="orange-darker"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Check.vue
View file

@ -8,10 +8,10 @@ import { defineProps, reactive, onBeforeMount } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="success"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="success"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Close.vue
View file

@ -8,10 +8,10 @@ import { useUUID } from "@utils/global.js";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="dark"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="dark"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Core.vue
View file

@ -8,10 +8,10 @@ import { useUUID } from "@utils/global.js";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="cyan-darker"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="cyan-darker"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Cross.vue
View file

@ -8,10 +8,10 @@ import { useUUID } from "@utils/global.js";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="red"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="red"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Crown.vue
View file

@ -9,10 +9,10 @@ import { useUUID } from "@utils/global.js";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="amber"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="amber"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Discord.vue
View file

@ -8,10 +8,10 @@ import { useUUID } from "@utils/global.js";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="discord"]
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="discord"]
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Disk.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="orange"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="orange"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Disks.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="orange"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="orange"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Document.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'orange',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="cyan"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="cyan"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Exclamation.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="red"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="red"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/External.vue
View file

@ -8,10 +8,10 @@ import { useUUID } from "@utils/global.js";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="blue"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="blue"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Eye.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'green',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="cyan"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="cyan"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Flag.vue
View file

@ -8,10 +8,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="amber-dark"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="amber-dark"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Funnel.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="red"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="red"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Gear.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="dark"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="dark"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Github.vue
View file

@ -8,10 +8,10 @@ import { useUUID } from "@utils/global.js";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="github"]
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="github"]
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Globe.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="blue"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="blue"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/House.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="cyan-darker"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="cyan-darker"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Info.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Key.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color=""] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color=""] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Linkedin.vue
View file

@ -8,10 +8,10 @@ import { useUUID } from "@utils/global.js";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="linkedin"]
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="linkedin"]
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/List.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="dark"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="dark"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Lock.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="yellow"] - The color of the icon between some tailwind css available colors (purple, green, red, yellow, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="yellow"] - The color of the icon between some tailwind css available colors (purple, green, red, yellow, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Pen.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'orange',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="orange"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="orange"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Plus.vue
View file

@ -8,10 +8,10 @@ import { useUUID } from "@utils/global.js";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="success"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="success"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Puzzle.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="yellow"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="yellow"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Redirect.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="blue"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="blue"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Search.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="info"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Settings.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="blue-darker"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="blue-darker"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Task.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="success"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="success"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Trash.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="red"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="red"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Trespass.vue
View file

@ -8,10 +8,10 @@ import { useUUID } from "@utils/global.js";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="error"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="error"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Twitter.vue
View file

@ -8,10 +8,10 @@ import { useUUID } from "@utils/global.js";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="twitter"]
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="twitter"]
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Icons/Wire.vue
View file

@ -7,10 +7,10 @@ import { defineProps, reactive } from "vue";
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {string} [color="green"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, green, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {String} [iconClass="icon-default"] - The class of the icon.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} [color="green"] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, green, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({

12
src/ui/client/dashboard/components/List/Details.vue
View file

@ -65,8 +65,8 @@ const gridClass = computed(() => {
* @name indexUp
* @description When we focus or pointerover an item, we will add a higher z-index than others items in order to avoid to crop popovers.
* In case we leave the item, for few moments the item will get an higher z-index than this in order to get a smooth transition.
* @param {string|number} id - The id of the item.
* @returns {void}
* @param {String|Number} id - The id of the item.
* @returns {Void}
*/
function indexUp(id) {
data.upIndex = id;
@ -75,8 +75,8 @@ function indexUp(id) {
/**
* @name indexPending
* @description This will add a higher z-index for 100ms when cursor is out of the item in order to avoid to crop popovers.
* @param {string|number} id - The id of the item.
* @returns {void}
* @param {String|Number} id - The id of the item.
* @returns {Void}
*/
function indexPending(id) {
data.pendingIndex.push(id);
@ -110,8 +110,8 @@ function indexPending(id) {
data.upIndex === id
? 'up'
: data.pendingIndex.includes(id)
? 'pending'
: '',
? 'pending'
: '',
]"
v-bind="item.attrs || {}"
@focusin="indexUp(id)"

4
src/ui/client/dashboard/components/List/Pairs.vue
View file

@ -10,8 +10,8 @@ import { computed, defineProps } from "vue";
* ],
* columns: { pc: 12, tablet: 12, mobile: 12 }
* }
* @param {array} pairs - The list of key value information. The key and value can be a translation key or a raw text.
* @param {object} [columns={"pc": "12", "tablet": "12", "mobile": "12"}] - Determine the position of the items in the grid system.
* @param {Array} pairs - The list of key value information. The key and value can be a translation key or a raw text.
* @param {Object} [columns={"pc": "12", "tablet": "12", "mobile": "12"}] - Determine the position of the items in the grid system.
*/
const props = defineProps({

4
src/ui/client/dashboard/components/Message/Unmatch.vue
View file

@ -10,8 +10,8 @@ import Text from "@components/Widget/Text.vue";
* {
* text: "dashboard_no_match",
* }
* @param {string} text - The text to display
* @param {string} [unmatchClass=""] - The class to apply to the message. If not provided, the class will be based on the parent component.
* @param {String} text - The text to display
* @param {String} [unmatchClass=""] - The class to apply to the message. If not provided, the class will be based on the parent component.
*/
const props = defineProps({

15
src/ui/client/dashboard/components/Widget/Alert.vue
View file

@ -14,14 +14,13 @@ import { useUUID } from "@utils/global.js";
* message: "Your action has been successfully completed",
* delayToClose: 5000,
* }
* @param {string} title - The title of the alert. Can be a translation key or by default raw text.
* @param {string} message - The message of the alert. Can be a translation key or by default raw text.
* @param {boolean} [canClose=true] - Determine if the alert can be closed by user (add a close button), by default it is closable
* @param {string} [id=`feedback-alert-${message.substring(0, 10)}`]
* @param {string} [isFixed=false] - Determine if the alert is fixed (visible bottom right of page) or relative (inside a container)
* @param {string} [type="info"] - The type of the alert, can be success, error, warning or info
* @param {number} [delayToClose=0] - The delay to auto close alert in ms, by default always visible
* @param {string} [tabId="-1"] - The tabindex of the alert
* @param {String} title - The title of the alert. Can be a translation key or by default raw text.
* @param {String} message - The message of the alert. Can be a translation key or by default raw text.
* @param {Boolean} [canClose=true] - Determine if the alert can be closed by user (add a close button), by default it is closable
* @param {String} [isFixed=false] - Determine if the alert is fixed (visible bottom right of page) or relative (inside a container)
* @param {String} [type="info"] - The type of the alert, can be success, error, warning or info
* @param {Number} [delayToClose=0] - The delay to auto close alert in ms, by default always visible
* @param {String} [tabId="-1"] - The tabindex of the alert
*/
const props = defineProps({

28
src/ui/client/dashboard/components/Widget/Button.vue
View file

@ -29,20 +29,20 @@ import { useDisplayStore } from "@store/global.js";
* iconName: "modal",
* attrs: { data-toggle: "modal", "data-target": "#modal"},
* }
* @param {string} [id=uuidv4()] - Unique id of the button
* @param {string} text - Content of the button. Can be a translation key or by default raw text.
* @param {array} [display=[]] - Case display, we will update the display store with the given array. Useful when we want to use button as tabs.
* @param {string} [type="button"] - Can be of type button || submit
* @param {boolean} [disabled=false]
* @param {boolean} [hideText=false] - Hide text to only display icon
* @param {string} [color="primary"]
* @param {string} [iconColor=""] - Color we want to apply to the icon. If falsy value, default icon color is applied.
* @param {string} [size="normal"] - Can be of size sm || normal || lg || xl or tab
* @param {string} [iconName=""] - Name in lowercase of icons store on /Icons. If falsy value, no icon displayed.
* @param {String} [id=uuidv4()] - Unique id of the button
* @param {String} text - Content of the button. Can be a translation key or by default raw text.
* @param {Array} [display=[]] - Case display, we will update the display store with the given array. Useful when we want to use button as tabs.
* @param {String} [type="button"] - Can be of type button || submit
* @param {Boolean} [disabled=false]
* @param {Boolean} [hideText=false] - Hide text to only display icon
* @param {String} [color="primary"]
* @param {String} [iconColor=""] - Color we want to apply to the icon. If falsy value, default icon color is applied.
* @param {String} [size="normal"] - Can be of size sm || normal || lg || xl or tab
* @param {String} [iconName=""] - Name in lowercase of icons store on /Icons. If falsy value, no icon displayed.
* @param {Object} [attrs={}] - List of attributes to add to the button. Some attributes will conduct to additional script
* @param {Object|boolean} [modal=false] - We can link the button to a Modal component. We need to pass the widgets inside the modal. Button click will open the modal.
* @param {string|number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
* @param {string} [containerClass=""] - Additional class to the container
* @param {String|Number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
* @param {String} [containerClass=""] - Additional class to the container
*/
const props = defineProps({
@ -148,8 +148,8 @@ const btnEl = ref();
* @name handleClick
* @description Wrap all the logic to handle the click event on the button.
* This will prevent submit if not a submit button, open a modal if one is attached and update the display store if needed.
* @param {event} e - Event object
* @returns {void}
* @param {Event} e - Event object
* @returns {Void}
*/
function handleClick(e) {
if (e.target.getAttribute("type") !== "submit") e.preventDefault();

4
src/ui/client/dashboard/components/Widget/ButtonGroup.vue
View file

@ -34,8 +34,8 @@ import { onMounted, reactive, ref } from "vue";
* },
* ],
* }
* @param {array} buttons - List of buttons to display. Button component is used.
* @param {string} [boutonGroupClass=""] - Additional class for the flex container
* @param {Array} buttons - List of buttons to display. Button component is used.
* @param {String} [boutonGroupClass=""] - Additional class for the flex container
*/
const props = defineProps({

4
src/ui/client/dashboard/components/Widget/Cell.vue
View file

@ -24,8 +24,8 @@ import { useEqualStr } from "@utils/global.js";
* attrs: { data-toggle: "modal", "data-target": "#modal"},
* }
* }
* @param {string} type - The type of the cell. This needs to be a Vue component.
* @param {object} data - The data to display in the cell. This needs to be the props of the Vue component.
* @param {String} type - The type of the cell. This needs to be a Vue component.
* @param {Object} data - The data to display in the cell. This needs to be the props of the Vue component.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Widget/Container.vue
View file

@ -12,10 +12,10 @@ import { defineProps, watch, computed, reactive } from "vue";
* containerClass: "w-full h-full bg-white rounded shadow-md",
* columns: { pc: 12, tablet: 12, mobile: 12}
* }
* @param {string} [containerClass=""] - Additional class
* @param {object|boolean} [columns=false] - Work with grid system { pc: 12, tablet: 12, mobile: 12}
* @param {string} [tag="div"] - The tag for the container
* @param {array} [display=[]] - Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef.
* @param {String} [containerClass=""] - Additional class
* @param {Object|boolean} [columns=false] - Work with grid system { pc: 12, tablet: 12, mobile: 12}
* @param {String} [tag="div"] - The tag for the container
* @param {Array} [display=[]] - Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef.
*/
const props = defineProps({

30
src/ui/client/dashboard/components/Widget/Filter.vue
View file

@ -43,9 +43,9 @@ import { useFilter } from "@utils/filter.js";
* },
* },
* ]
* @param {array} [filters=[]] - Fields with additional data to be used as filters.
* @param {object|array} [data={}] - Data object or array to filter. Emit a filter event with the filtered data.
* @param {string} [containerClass=""] - Additional class for the container.
* @param {Array} [filters=[]] - Fields with additional data to be used as filters.
* @param {Object|Array} [data={}] - Data object or array to filter. Emit a filter event with the filtered data.
* @param {String} [containerClass=""] - Additional class for the container.
*/
const props = defineProps({
@ -79,14 +79,14 @@ watch(
() => {
filterData();
},
{ deep: true },
{ deep: true }
);
/**
* @name startFilter
* @description Filter the given data using the available filters from a filter object.
* @param {object} filter - Filter object to apply.
* @param {string} value - Value to filter.
* @param {Object} filter - Filter object to apply.
* @param {String} value - Value to filter.
* @returns {emits} - Emit a filter event with the filtered data.
*/
function startFilter(filter = {}, value) {
@ -150,9 +150,9 @@ function startFilter(filter = {}, value) {
* @name filterData
* @description Add a buffer to wait for multiple inputs before filtering the data.
* Then filter data with the given filter and value.
* @param {object} filter - Filter object to apply.
* @param {string} value - Value to filter.
* @returns {void}
* @param {Object} filter - Filter object to apply.
* @param {String} value - Value to filter.
* @returns {Void}
*/
function filterData(filter = {}, value = null) {
// Wait for buffer input
@ -169,9 +169,9 @@ function filterData(filter = {}, value = null) {
/**
* @name filterRegularSettings
* @description Allow to filter plugin settings from a regular template.
* @param {object} filterSettings - Filters to apply
* @param {object} template - Template to filter
* @returns {void}
* @param {Object} filterSettings - Filters to apply
* @param {Object} template - Template to filter
* @returns {Void}
*/
function filterRegularSettings(filterSettings, template) {
template.forEach((plugin, id) => {
@ -194,9 +194,9 @@ function filterRegularSettings(filterSettings, template) {
/**
* @name filterMultiplesSettings
* @description Allow to filter plugin multiples settings from a regular template.
* @param {object} filterSettings - Filters to apply
* @param {object} template - Template to filter
* @returns {void}
* @param {Object} filterSettings - Filters to apply
* @param {Object} template - Template to filter
* @returns {Void}
*/
function filterMultiplesSettings(filterSettings, template) {
const multiples = [];

4
src/ui/client/dashboard/components/Widget/Grid.vue
View file

@ -12,8 +12,8 @@ import { defineProps, watch, reactive } from "vue";
* columns: { pc: 12, tablet: 12, mobile: 12},
* gridClass: "items-start"
* }
* @param {string} [gridClass="items-start"] - Additional class
* @param {array} [display=[]] - Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef.
* @param {String} [gridClass="items-start"] - Additional class
* @param {Array} [display=[]] - Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef.
*/
const props = defineProps({

16
src/ui/client/dashboard/components/Widget/GridLayout.vue
View file

@ -18,14 +18,14 @@ import { useDisplayStore } from "@store/global.js";
* gridLayoutClass: "items-start",
* display: ["main", 1],
* }
* @param {string} [type="card"] - Type of layout component, we can have "card"
* @param {string} [id=uuidv4()] - Id of the layout component, will be used to identify the component.
* @param {string} [title=""] - Title of the layout component, will be displayed at the top if exists. Type of layout component will determine the style of the title.
* @param {string} [link=""] - Will transform the container tag from a div to an a tag with the link as href. Useful with card type.
* @param {object} [columns={"pc": 12, "tablet": 12, "mobile": 12}] - Work with grid system { pc: 12, tablet: 12, mobile: 12}
* @param {string} [gridLayoutClass="items-start"] - Additional class
* @param {array} [display=[]] - Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef.
* @param {string} [tabId=contentIndex] - Case the container is converted to an anchor with a link, we can define the tabId, by default it is the contentIndex
* @param {String} [type="card"] - Type of layout component, we can have "card"
* @param {String} [id=uuidv4()] - Id of the layout component, will be used to identify the component.
* @param {String} [title=""] - Title of the layout component, will be displayed at the top if exists. Type of layout component will determine the style of the title.
* @param {String} [link=""] - Will transform the container tag from a div to an a tag with the link as href. Useful with card type.
* @param {Object} [columns={"pc": 12, "tablet": 12, "mobile": 12}] - Work with grid system { pc: 12, tablet: 12, mobile: 12}
* @param {String} [gridLayoutClass="items-start"] - Additional class
* @param {Array} [display=[]] - Array need two values : "groupName" in index 0 and "compId" in index 1 in order to be displayed using the display store. More info on the display store itslef.
* @param {String} [tabId=contentIndex] - Case the container is converted to an anchor with a link, we can define the tabId, by default it is the contentIndex
*/
const props = defineProps({

12
src/ui/client/dashboard/components/Widget/Icons.vue
View file

@ -49,12 +49,12 @@ import Eye from "@components/Icons/Eye.vue";
* iconClass: 'base',
* color: 'amber',
* }
* @param {string} iconName - The name of the icon to display. The icon name is the name of the file without the extension on lowercase.
* @param {string} [iconClass="base"] - Class to apply to the icon. In case the icon is related to a widget, the widget will set the right class automatically.
* @param {string} [color=""] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {boolean} [isStick=false] - If true, the icon will be stick to the top right of the parent container.
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
* @param {any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
* @param {String} iconName - The name of the icon to display. The icon name is the name of the file without the extension on lowercase.
* @param {String} [iconClass="base"] - Class to apply to the icon. In case the icon is related to a widget, the widget will set the right class automatically.
* @param {String} [color=""] - The color of the icon between some tailwind css available colors (purple, green, red, orange, blue, yellow, gray, dark, amber, emerald, teal, indigo, cyan, sky, pink...). Darker colors are also available using the base color and adding '-darker' (e.g. 'red-darker').
* @param {Boolean} [isStick=false] - If true, the icon will be stick to the top right of the parent container.
* @param {Boolean} [disabled=false] - If true, the icon will be disabled.
* @param {Any} [value=""] - Attach a value to icon. Useful on some cases like table filtering using icons.
*/
const props = defineProps({

8
src/ui/client/dashboard/components/Widget/Instance.vue
View file

@ -31,10 +31,10 @@ import ButtonGroup from "@components/Widget/ButtonGroup.vue";
* },
* ]
* }
* @param {string} title
* @param {string} status
* @param {array} details - List of details to display
* @param {array} buttons - List of buttons to display
* @param {String} title
* @param {String} status
* @param {Array} details - List of details to display
* @param {Array} buttons - List of buttons to display
*/
const props = defineProps({

2
src/ui/client/dashboard/components/Widget/Modal.vue
View file

@ -80,7 +80,7 @@ import Table from "@components/Widget/Table.vue";
* }
* ]
* ];
* @param {array} widgets - Array of containers and widgets
* @param {Array} widgets - Array of containers and widgets
*/
const props = defineProps({

18
src/ui/client/dashboard/components/Widget/Popover.vue
View file

@ -21,13 +21,13 @@ import Icons from "@components/Widget/Icons.vue";
* iconName: "info",
* attrs: { "data-popover": "test" },
* }
* @param {string} text - Content of the popover. Can be a translation key or by default raw text.
* @param {string} [href="#"] - Link of the anchor. By default it is a # link.
* @param {string} color - Color of the icon between tailwind colors
* @param {object} [attrs={}] - List of attributs to add to the text.
* @param {string} [tag="a"] - By default it is a anchor tag, but we can use other tag like div in case of popover on another anchor
* @param {string} [iconClass="icon-default"]
* @param {string|number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
* @param {String} text - Content of the popover. Can be a translation key or by default raw text.
* @param {String} [href="#"] - Link of the anchor. By default it is a # link.
* @param {String} color - Color of the icon between tailwind colors
* @param {Object} [attrs={}] - List of attributs to add to the text.
* @param {String} [tag="a"] - By default it is a anchor tag, but we can use other tag like div in case of popover on another anchor
* @param {String} [iconClass="icon-default"]
* @param {String|Number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
*/
const props = defineProps({
@ -80,7 +80,7 @@ const popoverBtn = ref();
/**
* @name showPopover
* @description Show the popover and set the position of the popover relative to the container.
* @returns {void}
* @returns {Void}
*/
function showPopover() {
popover.isHover = true;
@ -136,7 +136,7 @@ function showPopover() {
/**
* @name hidePopover
* @description Hide the popover.
* @returns {void}
* @returns {Void}
*/
function hidePopover() {
popover.isHover = false;

4
src/ui/client/dashboard/components/Widget/PopoverGroup.vue
View file

@ -20,8 +20,8 @@ import Popover from "@components/Widget/Popover.vue";
* },
* ],
* }
* @param {array} popovers - List of popovers to display. Popover component is used.
* @param {string} [groupClasss=""] - Additional class for the flex container
* @param {Array} popovers - List of popovers to display. Popover component is used.
* @param {String} [groupClasss=""] - Additional class for the flex container
*/
const props = defineProps({

10
src/ui/client/dashboard/components/Widget/Stat.vue
View file

@ -19,11 +19,11 @@ import Icons from "@components/Widget/Icons.vue";
* link: "/users",
* subtitleColor: "info",
* }
* @param {string} title - The title of the stat. Can be a translation key or by default raw text.
* @param {string|number} stat - The value
* @param {string} [subtitle=""] - The subtitle of the stat. Can be a translation key or by default raw text.
* @param {string} [iconName=""] - A top-right icon to display between icon available in Icons/Stat. Case falsy value, no icon displayed. The icon name is the name of the file without the extension on lowercase.
* @param {string} [subtitleColor="info"] - The color of the subtitle between error, success, warning, info
* @param {String} title - The title of the stat. Can be a translation key or by default raw text.
* @param {String|Number} stat - The value
* @param {String} [subtitle=""] - The subtitle of the stat. Can be a translation key or by default raw text.
* @param {String} [iconName=""] - A top-right icon to display between icon available in Icons/Stat. Case falsy value, no icon displayed. The icon name is the name of the file without the extension on lowercase.
* @param {String} [subtitleColor="info"] - The color of the subtitle between error, success, warning, info
*/
const props = defineProps({

6
src/ui/client/dashboard/components/Widget/Status.vue
View file

@ -11,9 +11,9 @@ import { useUUID } from "@utils/global.js";
* status: "success",
* statusClass: "col-span-12",
* }
* @param {string} id - The id of the status icon.
* @param {string} [status="info"] - The color of the icon between error, success, warning, info
* @param {string} [statusClass=""] - Additional class, for example to use with grid system.
* @param {String} id - The id of the status icon.
* @param {String} [status="info"] - The color of the icon between error, success, warning, info
* @param {String} [statusClass=""] - Additional class, for example to use with grid system.
*/
const props = defineProps({

20
src/ui/client/dashboard/components/Widget/Subtitle.vue
View file

@ -11,14 +11,14 @@ import { computed, onMounted, reactive, ref } from "vue";
* color : "info",
* tag: "h2"
* }
* @param {string} subtitle - Can be a translation key or by default raw text.
* @param {string} [type="card"] - The type of title between "container", "card", "content", "min" or "stat"
* @param {string} [tag=""] - The tag of the subtitle. Can be h1, h2, h3, h4, h5, h6 or p. If empty, will be determine by the type of subtitle.
* @param {string} [color=""] - The color of the subtitle between error, success, warning, info or tailwind color
* @param {boolean} [bold=false] - If the subtitle should be bold or not.
* @param {boolean} [uppercase=false] - If the subtitle should be uppercase or not.
* @param {boolean} [lowercase=false] - If the subtitle should be lowercase or not.
* @param {string} [subtitleClass=""] - Additional class, useful when component is used directly on a grid system
* @param {String} subtitle - Can be a translation key or by default raw text.
* @param {String} [type="card"] - The type of title between "container", "card", "content", "min" or "stat"
* @param {String} [tag=""] - The tag of the subtitle. Can be h1, h2, h3, h4, h5, h6 or p. If empty, will be determine by the type of subtitle.
* @param {String} [color=""] - The color of the subtitle between error, success, warning, info or tailwind color
* @param {Boolean} [bold=false] - If the subtitle should be bold or not.
* @param {Boolean} [uppercase=false] - If the subtitle should be uppercase or not.
* @param {Boolean} [lowercase=false] - If the subtitle should be lowercase or not.
* @param {String} [subtitleClass=""] - Additional class, useful when component is used directly on a grid system
*/
const props = defineProps({
@ -98,8 +98,8 @@ onMounted(() => {
props.uppercase
? 'uppercase'
: props.lowercase
? 'lowercase'
: 'capitalize-first',
? 'lowercase'
: 'capitalize-first',
props.subtitleClass,
]"
>

24
src/ui/client/dashboard/components/Widget/Table.vue
View file

@ -57,15 +57,15 @@ import Filter from "@components/Widget/Filter.vue";
* },
* ];
* }
* @param {string} title - Determine the title of the table.
* @param {array} header - Determine the header of the table.
* @param {array} positions - Determine the position of each item in the table in a list of number based on 12 columns grid.
* @param {array} items - items to render in the table. This need to be an array (row) of array (cols) with a cell being a regular widget.
* @param {array} [filters=[]] - Determine the filters of the table.
* @param {string} [minWidth="base"] - Determine the minimum size of the table. Can be "base", "sm", "md", "lg", "xl".
* @param {string} [containerClass=""] - Container additional class.
* @param {string} [containerWrapClass=""] - Container wrap additional class.
* @param {string} [tableClass=""] - Table additional class.
* @param {String} title - Determine the title of the table.
* @param {Array} header - Determine the header of the table.
* @param {Array} positions - Determine the position of each item in the table in a list of number based on 12 columns grid.
* @param {Array} items - items to render in the table. This need to be an array (row) of array (cols) with a cell being a regular widget.
* @param {Array} [filters=[]] - Determine the filters of the table.
* @param {String} [minWidth="base"] - Determine the minimum size of the table. Can be "base", "sm", "md", "lg", "xl".
* @param {String} [containerClass=""] - Container additional class.
* @param {String} [containerWrapClass=""] - Container wrap additional class.
* @param {String} [tableClass=""] - Table additional class.
*/
const props = defineProps({
@ -139,7 +139,7 @@ const table = reactive({
/**
* @name setUnmatchWidth
* @description Determine the width of the unmatch element based on the parent container.
* @returns {void}
* @returns {Void}
*/
function setUnmatchWidth() {
try {
@ -151,7 +151,7 @@ function setUnmatchWidth() {
/**
* @name getOverflow
* @description Handle the overflow of the table and update padding in consequence.
* @returns {void}
* @returns {Void}
*/
function getOverflow() {
setTimeout(() => {
@ -172,7 +172,7 @@ watch(
() => {
getOverflow();
setUnmatchWidth();
},
}
);
onMounted(() => {

18
src/ui/client/dashboard/components/Widget/Tabulator.vue
View file

@ -163,7 +163,7 @@ const table = reactive({
* @name formatColumns
* @description This will add some key to columns that can be passed from props like minWidth or maxWidth.
* Case key already exists, this will override it.
* @param {array} columns - The columns are the list of columns that we want to check.
* @param {Array} columns - The columns are the list of columns that we want to check.
* @returns {array} - Return the columns with the custom sort added.
*/
function formatColumns(columns) {
@ -180,10 +180,10 @@ function formatColumns(columns) {
* @description Utils to add needed data when we have a custom component.
* We will use the type to render the Vue component, the values to pass and the elDOM to teleport the component inside the right cell.
* @example { type: "Icons", values: { iconName: "box", color: "amber" }, elDOM: HTMLElement }
* @param {str} type - The type is the name of the component.
* @param {object} values - The values are the props that we want to pass to the component.
* @param {String} type - The type is the name of the component.
* @param {Object} values - The values are the props that we want to pass to the component.
* @param {HTMLElement} elDOM - The elDOM is the element where we want to teleport the component.
* @returns {void}
* @returns {Void}
*/
function addCustomComponent(type, values, elDOM) {
table.customComponents.push({
@ -200,7 +200,7 @@ function addCustomComponent(type, values, elDOM) {
* 2 - Add custom formatters for each custom components in order to force Tabulator to render empty string.
* 3 - Override default filters to add custom filters for each custom components (because we need to access a specific key in the props object).
* We are using the Tabular.extendModule() that allow use to do this.
* @returns {void}
* @returns {Void}
*/
function extendTabulator() {
const formatOpts = {};
@ -220,10 +220,10 @@ function extendTabulator() {
* @description We can't directly send the current filter input to filter the table because the Tabulator will filter everything at once.
* So we need to get the value and store on the table.filters dict to merge all filters and apply them at once.
* We will use the applyTableFilter() to apply the filters. Additionnal checks (like empty value) are done on the applyTableFilter() function.
* @param {object} tableInstance - The tableInstance is the current table instance.
* @param {object} filter - the filter dict is here the setting filter data
* @param {string} value - the value is the current value return by the filter input.
* @returns {void}
* @param {Object} tableInstance - The tableInstance is the current table instance.
* @param {Object} filter - the filter dict is here the setting filter data
* @param {String} value - the value is the current value return by the filter input.
* @returns {Void}
*/
function filterTable(filter, value = "") {
// Merge all filters

16
src/ui/client/dashboard/components/Widget/Text.vue
View file

@ -11,14 +11,14 @@ import { onMounted, reactive, ref } from "vue";
* textClass: "text-3xl"
* attrs: { id: "paragraph" },
* }
* @param {string} text - The text value. Can be a translation key or by default raw text.
* @param {string} [textClass=""] - Style of text. Can be replace by any class starting by 'text-' like 'text-stat'.
* @param {string} [color=""] - The color of the text between error, success, warning, info or tailwind color
* @param {boolean} [bold=false] - If the text should be bold or not.
* @param {boolean} [uppercase=false] - If the text should be uppercase or not.
* @param {string} [tag="p"] - The tag of the text. Can be p, span, div, h1, h2, h3, h4, h5, h6
* @param {boolean|object} [icon=false] - The icon to add before the text. If true, will add a default icon. If object, will add the icon with the name and the color.
* @param {object} [attrs={}] - List of attributes to add to the text.
* @param {String} text - The text value. Can be a translation key or by default raw text.
* @param {String} [textClass=""] - Style of text. Can be replace by any class starting by 'text-' like 'text-stat'.
* @param {String} [color=""] - The color of the text between error, success, warning, info or tailwind color
* @param {Boolean} [bold=false] - If the text should be bold or not.
* @param {Boolean} [uppercase=false] - If the text should be uppercase or not.
* @param {String} [tag="p"] - The tag of the text. Can be p, span, div, h1, h2, h3, h4, h5, h6
* @param {Boolean|Object} [icon=false] - The icon to add before the text. If true, will add a default icon. If object, will add the icon with the name and the color.
* @param {Object} [attrs={}] - List of attributes to add to the text.
*/
const props = defineProps({

18
src/ui/client/dashboard/components/Widget/Title.vue
View file

@ -12,13 +12,13 @@ import { computed, onMounted, reactive, ref } from "vue";
* color : "info",
* tag: "h2"
* }
* @param {string} title - Can be a translation key or by default raw text.
* @param {string} [type="card"] - The type of title between "container", "card", "content", "min" or "stat"
* @param {string} [tag=""] - The tag of the title. Can be h1, h2, h3, h4, h5, h6 or p. If empty, will be determine by the type of title.
* @param {string} [color=""] - The color of the title between error, success, warning, info or tailwind color
* @param {boolean} [uppercase=false] - If the title should be uppercase or not.
* @param {boolean} [lowercase=false] - If the title should be lowercase or not.
* @param {string} [titleClass=""] - Additional class, useful when component is used directly on a grid system
* @param {String} title - Can be a translation key or by default raw text.
* @param {String} [type="card"] - The type of title between "container", "card", "content", "min" or "stat"
* @param {String} [tag=""] - The tag of the title. Can be h1, h2, h3, h4, h5, h6 or p. If empty, will be determine by the type of title.
* @param {String} [color=""] - The color of the title between error, success, warning, info or tailwind color
* @param {Boolean} [uppercase=false] - If the title should be uppercase or not.
* @param {Boolean} [lowercase=false] - If the title should be lowercase or not.
* @param {String} [titleClass=""] - Additional class, useful when component is used directly on a grid system
*/
const props = defineProps({
@ -104,8 +104,8 @@ onMounted(() => {
props.uppercase
? 'uppercase'
: props.lowercase
? 'lowercase'
: 'capitalize-first',
? 'lowercase'
: 'capitalize-first',
]"
>
{{ $t(props.title, $t("dashboard_placeholder", props.title)) }}

8
src/ui/client/dashboard/pages/jobs/Jobs.vue
View file

@ -28,8 +28,8 @@ onBeforeMount(() => {
/**
* @name getLastArrItem
* @description Get the last item if the first and last characters are matching params.
* @param {string} startStr - The start string to check.
* @param {string} endStr - The end string to check.
* @param {String} startStr - The start string to check.
* @param {String} endStr - The end string to check.
* @returns {null|string} - The last item or null.
*/
function getLastArrItem(startStr, endStr, array) {
@ -42,7 +42,7 @@ function getLastArrItem(startStr, endStr, array) {
/**
* @name downloadCacheEvent
* @description Get the needed cache file information from a job and create a download link to download the file.
* @returns {void}
* @returns {Void}
*/
function downloadCacheEvent() {
window.addEventListener(
@ -83,7 +83,7 @@ function downloadCacheEvent() {
a.click();
document.body.removeChild(a);
},
true,
true
);
}

4
src/ui/client/dashboard/pages/logs/Logs.vue
View file

@ -28,7 +28,7 @@ onBeforeMount(() => {
/**
* @name getLogContent
* @description Redirect to the same page but with log name as query parameter to get the content of the log.
* @returns {void}
* @returns {Void}
*/
function getLogContent() {
window.addEventListener(
@ -47,7 +47,7 @@ function getLogContent() {
// go to url
location.href = url;
},
true,
true
);
}

138
src/ui/client/dashboard/store/form.js
View file

@ -7,8 +7,8 @@ import { useSubmitForm } from "@utils/global.js";
* @description This is a factory function that will create a form store.
* This store contains all the logic to manage the form template and update it.
* By defining the form type, this will update some function to avoid errors.
* @param {string} storeName - Name of the store, must be unique.
* @param {string} formType - Type of form, can be "advanced", "raw" or "easy".
* @param {String} storeName - Name of the store, must be unique.
* @param {String} formType - Type of form, can be "advanced", "raw" or "easy".
* @returns {store} - Return a form store with all the logic to manage the form template and update it.
*/
export const createFormStore = (storeName, formType) => {
@ -39,8 +39,8 @@ export const createFormStore = (storeName, formType) => {
/**
* @name setOperation
* @description Set the operation when we will submit the form.
* @param {string} operation - Operation to set
* @returns {void}
* @param {String} operation - Operation to set
* @returns {Void}
*/
function setOperation(value) {
operation.value = value;
@ -49,8 +49,8 @@ export const createFormStore = (storeName, formType) => {
/**
* @name setOldServerName
* @description Set the operation when we will submit the form.
* @param {string} oldServeName - old server name to set
* @returns {void}
* @param {String} oldServeName - old server name to set
* @returns {Void}
*/
function setOldServerName(value) {
oldServerName.value = value;
@ -59,9 +59,9 @@ export const createFormStore = (storeName, formType) => {
/**
* @name setTemplate
* @description Set the template we are going to use to generate the form and update it (like adding multiples).
* @param {object} tempData - Template with plugins list and detail settings
* @param {boolean} [force=false] - Force to update the template even if already set before
* @returns {void}
* @param {Object} tempData - Template with plugins list and detail settings
* @param {Boolean} [force=false] - Force to update the template even if already set before
* @returns {Void}
*/
function setTemplate(tempData, force = false) {
if (!_isFormTypeAllowed(["advanced", "easy", "raw"])) return;
@ -77,9 +77,9 @@ export const createFormStore = (storeName, formType) => {
/**
* @name setRawData
* @description Set raw data that can be useful for the form.
* @param {array} data - Template with plugins list and detail settings
* @param {boolean} [force=false] - Template with plugins list and detail settings
* @returns {void}
* @param {Array} data - Template with plugins list and detail settings
* @param {Boolean} [force=false] - Template with plugins list and detail settings
* @returns {Void}
*/
function setRawData(data, force = false) {
if (!_isFormTypeAllowed(["advanced", "easy", "raw"])) return;
@ -93,10 +93,10 @@ export const createFormStore = (storeName, formType) => {
* The way the backend is working is that to delete a group, we need to send the group name with all default values.
* This function needs to be call from the multiples component parent with the template and the group name to delete.
* We will update the values of the group to default values.
* @param {string} pluginId - id of the plugin on the template array.
* @param {string} multName - Input id to update
* @param {string|number} groupName - Input value to update
* @returns {void}
* @param {String} pluginId - id of the plugin on the template array.
* @param {String} multName - Input id to update
* @param {String|Number} groupName - Input value to update
* @returns {Void}
*/
function delMultiple(pluginId, multName, groupName) {
if (!_isFormTypeAllowed(["advanced", "easy"])) return;
@ -114,10 +114,10 @@ export const createFormStore = (storeName, formType) => {
* The way the backend is working is that to delete a group, we need to send the group name with all default values.
* This function needs to be call from the multiples component parent with the template and the group name to delete.
* We will update the values of the group to default values.
* @param {string} pluginId - id of the plugin on the template array.
* @param {string} multName - Input id to update
* @param {string|number} groupName - Input value to update
* @returns {void}
* @param {String} pluginId - id of the plugin on the template array.
* @param {String} multName - Input id to update
* @param {String|Number} groupName - Input value to update
* @returns {Void}
*/
function _delMultipleAdvanced(pluginId, multName, groupName) {
if (!_isFormTypeAllowed(["advanced"])) return;
@ -145,10 +145,10 @@ export const createFormStore = (storeName, formType) => {
* The way the backend is working is that to delete a group, we need to send the group name with all default values.
* This function needs to be call from the multiples component parent with the template and the group name to delete.
* We will update the values of the group to default values.
* @param {string} pluginId - id of the plugin on the template array.
* @param {string} multName - Input id to update
* @param {string|number} groupName - Input value to update
* @returns {void}
* @param {String} pluginId - id of the plugin on the template array.
* @param {String} multName - Input id to update
* @param {String|Number} groupName - Input value to update
* @returns {Void}
*/
function _delMultipleEasy(pluginId, multName, groupName) {
if (!_isFormTypeAllowed(["easy"])) return;
@ -183,9 +183,9 @@ export const createFormStore = (storeName, formType) => {
* @description This function is a wrapper for any mode that will add a group of multiple in the template with default values.
* Each plugin has a key "multiples_schema" with each multiples group and their default values.
* We will retrieve the wanted multiple group and add it on the "multiples" key that contains the multiples that apply to the plugin.
* @param {string} pluginId - id of the plugin on the template array.
* @param {string} multName - multiple group name to add
* @returns {void}
* @param {String} pluginId - id of the plugin on the template array.
* @param {String} multName - multiple group name to add
* @returns {Void}
*/
function addMultiple(pluginId, multName) {
if (!_isFormTypeAllowed(["advanced", "easy"])) return;
@ -199,9 +199,9 @@ export const createFormStore = (storeName, formType) => {
* @description This function will add a group of multiple in the template with default values.
* Each plugin has a key "multiples_schema" with each multiples group and their default values.
* We will retrieve the wanted multiple group and add it on the "multiples" key that contains the multiples that apply to the plugin.
* @param {string} pluginId - id of the plugin on the template array.
* @param {string} multName - multiple group name to add
* @returns {void}
* @param {String} pluginId - id of the plugin on the template array.
* @param {String} multName - multiple group name to add
* @returns {Void}
*/
function _addMultipleAdvanced(pluginId, multName) {
if (!_isFormTypeAllowed(["advanced"])) return;
@ -241,9 +241,9 @@ export const createFormStore = (storeName, formType) => {
* @description This function will add a group of multiple in the template with default values.
* Each plugin has a key "multiples_schema" with each multiples group and their default values.
* We will retrieve the wanted multiple group and add it on the "multiples" key that contains the multiples that apply to the plugin.
* @param {string} pluginId - id of the plugin on the template array.
* @param {string} multName - multiple group name to add
* @returns {void}
* @param {String} pluginId - id of the plugin on the template array.
* @param {String} multName - multiple group name to add
* @returns {Void}
*/
function _addMultipleEasy(pluginId, multName) {
if (!_isFormTypeAllowed(["easy"])) return;
@ -302,7 +302,7 @@ export const createFormStore = (storeName, formType) => {
* if (!e.target.closest("[data-advanced-form-plugin]")) return;
* _useUpdateTemp(e, data.base);
* }
* @returns {void}
* @returns {Void}
*/
function useListenTempFields() {
if (!_isFormTypeAllowed(["advanced", "easy"])) return;
@ -320,7 +320,7 @@ export const createFormStore = (storeName, formType) => {
* if (!e.target.closest("[data-advanced-form-plugin]")) return;
* _useUpdateTemp(e, data.base);
* }
* @returns {void}
* @returns {Void}
*/
function useUnlistenTempFields() {
if (!_isFormTypeAllowed(["advanced", "easy"])) return;
@ -346,7 +346,7 @@ export const createFormStore = (storeName, formType) => {
},
];
* @param e - Event object, get it by default in the event listener.
* @returns {void}
* @returns {Void}
*/
function _useUpdateTemp(e) {
if (!_isFormTypeAllowed(["advanced", "easy"])) return;
@ -393,10 +393,10 @@ export const createFormStore = (storeName, formType) => {
* @description This function is a wrapper to work with any mode that will loop on template settings in order to update the setting value.
* This will check each plugin.settings (what I call regular) instead of other type of settings like multiples (in plugin.multiples).
* This function needs to be call in _useUpdateTemp.
* @param {array} templates - Templates array with plugins list and detail settings
* @param {string|number} inpId - Input id to update
* @param {string|number} inpValue - Input value to update
* @returns {void}
* @param {Array} templates - Templates array with plugins list and detail settings
* @param {String|Number} inpId - Input id to update
* @param {String|Number} inpValue - Input value to update
* @returns {Void}
*/
function _useUpdateTempSettings(templates, inpId, inpValue, target) {
if (!_isFormTypeAllowed(["advanced", "easy"])) return;
@ -419,10 +419,10 @@ export const createFormStore = (storeName, formType) => {
* @name _useUpdateTempSettingsAdvanced
* @description This function will loop on template settings in order to update the setting value.
* This will check each plugin.settings (what I call regular) instead of other type of settings like multiples (in plugin.multiples).
* @param {array} templates - Templates array with plugins list and detail settings
* @param {string|number} inpId - Input id to update
* @param {string|number} inpValue - Input value to update
* @returns {void}
* @param {Array} templates - Templates array with plugins list and detail settings
* @param {String|Number} inpId - Input id to update
* @param {String|Number} inpValue - Input value to update
* @returns {Void}
*/
function _useUpdateTempSettingsAdvanced(templates, inpId, inpValue) {
if (!_isFormTypeAllowed(["advanced"])) return;
@ -452,10 +452,10 @@ export const createFormStore = (storeName, formType) => {
* @name _useUpdateTempSettingsEasy
* @description This function will loop on template settings in order to update the setting value.
* This will check each plugin.settings (what I call regular) instead of other type of settings like multiples (in plugin.multiples).
* @param {array} templates - Templates array with plugins list and detail settings
* @param {string|number} inpId - Input id to update
* @param {string|number} inpValue - Input value to update
* @returns {void}
* @param {Array} templates - Templates array with plugins list and detail settings
* @param {String|Number} inpId - Input id to update
* @param {String|Number} inpValue - Input value to update
* @returns {Void}
*/
function _useUpdateTempSettingsEasy(templates, inpId, inpValue) {
if (!_isFormTypeAllowed(["easy"])) return;
@ -495,11 +495,11 @@ export const createFormStore = (storeName, formType) => {
* @description This function is wrapper for any mode that will loop on template multiples in order to update the setting value.
* This will check each plugin.multiples that can be found in the template.
* This function needs to be call in _useUpdateTemp.
* @param {array} templates - Templates array with plugins list and detail settings
* @param {string|number} inpId - Input id to update
* @param {string|number} inpValue - Input value to update
* @param {event} target - Target element that trigger the event
* @returns {void}
* @param {Array} templates - Templates array with plugins list and detail settings
* @param {String|Number} inpId - Input id to update
* @param {String|Number} inpValue - Input value to update
* @param {Event} target - Target element that trigger the event
* @returns {Void}
*/
function _useUpdateTempMultiples(templates, inpId, inpValue, target) {
if (!_isFormTypeAllowed(["advanced", "easy"])) return;
@ -521,11 +521,11 @@ export const createFormStore = (storeName, formType) => {
* @name _useUpdateTempMultiplesAdvanced
* @description This function will loop on template multiples in order to update the setting value.
* This will check each plugin.multiples that can be found in the template.
* @param {array} templates - Templates array with plugins list and detail settings
* @param {string|number} inpId - Input id to update
* @param {string|number} inpValue - Input value to update
* @param {event} target - Target element that trigger the event
* @returns {void}
* @param {Array} templates - Templates array with plugins list and detail settings
* @param {String|Number} inpId - Input id to update
* @param {String|Number} inpValue - Input value to update
* @param {Event} target - Target element that trigger the event
* @returns {Void}
*/
function _useUpdateTempMultiplesAdvanced(
templates,
@ -575,11 +575,11 @@ export const createFormStore = (storeName, formType) => {
* @name _useUpdateTempMultiplesEasy
* @description This function will loop on template multiples in order to update the setting value.
* This will check each plugin.multiples that can be found in the template.
* @param {array} templates - Templates array with plugins list and detail settings
* @param {string|number} inpId - Input id to update
* @param {string|number} inpValue - Input value to update
* @param {event} target - Target element that trigger the event
* @returns {void}
* @param {Array} templates - Templates array with plugins list and detail settings
* @param {String|Number} inpId - Input id to update
* @param {String|Number} inpValue - Input value to update
* @param {Event} target - Target element that trigger the event
* @returns {Void}
*/
function _useUpdateTempMultiplesEasy(templates, inpId, inpValue, target) {
const multName =
@ -629,7 +629,7 @@ export const createFormStore = (storeName, formType) => {
/**
* @name submit
* @description Case we have at least one setting updating, we will allow to submit the form.
* @returns {void}
* @returns {Void}
*/
function submit() {
if (!_isFormTypeAllowed(["advanced", "easy", "raw"])) return;
@ -648,7 +648,7 @@ export const createFormStore = (storeName, formType) => {
* @description This function will run after a template update and will do two things :
* 1. Format the template to send needed data to the backend.
* 2. Check if at least one setting is updating. Case true, we will allow to submit the form.
* @returns {void}
* @returns {Void}
*/
function _updateTempState() {
formattedData.value = {};
@ -675,7 +675,7 @@ export const createFormStore = (storeName, formType) => {
* @name _getPluginMultiplesValue
* @description Case we have a multiples key, we have a plugin object.
* We will loop on each multiples settings and check if the value is different from the previous value in order to add it to the formattedData.
* @returns {void}
* @returns {Void}
*/
function _getPluginMultiplesValue(value) {
// Get multiples value
@ -693,7 +693,7 @@ export const createFormStore = (storeName, formType) => {
* @name _getPluginSettingsValue
* @description Case we have a settings key, we have a plugin object.
* We will loop on each settings and check if the value is different from the previous value in order to add it to the formattedData.
* @returns {void}
* @returns {Void}
*/
function _getPluginSettingsValue(value) {
if (!value?.settings) return;
@ -706,7 +706,7 @@ export const createFormStore = (storeName, formType) => {
/**
* @name _checkSettingToAddValue
* @description Check if the setting value is different from the previous value in order to add it to the formattedData.
* @returns {void}
* @returns {Void}
*/
function _checkSettingToAddValue(setting, settingName) {
// Case current value is the same as previous, we don't need to send it
@ -728,7 +728,7 @@ export const createFormStore = (storeName, formType) => {
/**
* @name $reset
* @description Will reset the template to the original one using the default template. The default template need to be set once.
* @returns {void}
* @returns {Void}
*/
function $reset() {
if (!_isFormTypeAllowed(["advanced", "easy", "raw"])) return;

4
src/ui/client/dashboard/utils/filter.js
View file

@ -34,8 +34,8 @@
* description: "Whitelist IP",
* }
* ];
* @param {object} plugins - Object with the plugins data.
* @param {array} filters - Array with the filters data.
* @param {Object} plugins - Object with the plugins data.
* @param {Array} filters - Array with the filters data.
* @returns {array} - Array with the filtered data.
*/
function useFilter(items, filters) {

40
src/ui/client/dashboard/utils/global.js
View file

@ -11,7 +11,7 @@ import { v4 as uuidv4 } from "uuid";
* @description This function needs to be apply on global level and will do some logic related to form, attributes, and other global actions.
* For example, it will check if the target element has a data-link attribute and redirect the user to the define link.
* It will check if the target element has a data-submit-form attribute and try to parse it to submit the form.
* @returns {void}
* @returns {Void}
*/
function useGlobal() {
window.addEventListener("click", useDataLinkAttr);
@ -22,7 +22,7 @@ function useGlobal() {
* @name useSubmitAttr
* @description This function needs to be attach to an event like a click event.
* This will check if the target element contains a data-submit-form attribute and try to parse it to submit the form.
* @returns {void}
* @returns {Void}
*/
function useSubmitAttr(e) {
if (!e.target.hasAttribute("data-submit-form")) return;
@ -46,9 +46,9 @@ function useSubmitAttr(e) {
* instance: "1",
* operation: "delete",
* }
* @param {object} data - Object with the form data to submit.
* @param {string} [submitEndpoint=""] - The endpoint to submit the form.
* @returns {void}
* @param {Object} data - Object with the form data to submit.
* @param {String} [submitEndpoint=""] - The endpoint to submit the form.
* @returns {Void}
*/
function useSubmitForm(data, submitEndpoint = "") {
// Create a form element
@ -79,8 +79,8 @@ function useSubmitForm(data, submitEndpoint = "") {
/**
* @name useCheckPluginsValidity
* @description This is a wrapper that will check the validity of the plugins settings based on the defined mode.
* @param {dict|array} template - Template with plugins list and detail settings
* @param {string} mode - Mode to check, can be "advanced", "easy"...
* @param {Object|Array} template - Template with plugins list and detail settings
* @param {String} mode - Mode to check, can be "advanced", "easy"...
* @returns {array} - Array with error flags and error details
*/
function useCheckPluginsValidity(template, mode) {
@ -110,8 +110,8 @@ function useCheckPluginsValidity(template, mode) {
/**
* @name _checkSettingsValidityFromPlugins
* @description Check settings from a list of plugins and return the error flags and error details.
* @param {object|array} template - The template to check
* @param {string|number} [id=0] - The id of the plugin or the current step.
* @param {Object|Array} template - The template to check
* @param {String|Number} [id=0] - The id of the plugin or the current step.
* @returns {array} - Return [isRegErr, isReqErr, settingErr, settingNameErr, pluginErr, id]
*/
function _checkSettingsValidityFromPlugins(plugins, id = 0) {
@ -138,7 +138,7 @@ function _checkSettingsValidityFromPlugins(plugins, id = 0) {
/**
* @name _checkRegularSettingsValidityFromPlugins
* @description Access regular settings from a plugin and return the error flags and error details.
* @param {object|array} template - The template to check
* @param {Object|Array} template - The template to check
* @returns {array} - Return empty array or [isRegErr, isReqErr, settingErr, settingNameErr, pluginErr]
*/
function _checkRegularSettingsValidityFromPlugins(plugins) {
@ -159,7 +159,7 @@ function _checkRegularSettingsValidityFromPlugins(plugins) {
/**
* @name _checkMultipleSettingsValidityFromPlugins
* @description Access multiple settings from a plugin and return the error flags and error details.
* @param {object|array} template - The template to check
* @param {Object|Array} template - The template to check
* @returns {array} - Return empty array or [isRegErr, isReqErr, settingErr, settingNameErr, pluginErr]
*/
function _checkMultipleSettingsValidityFromPlugins(plugins) {
@ -183,10 +183,10 @@ function _checkMultipleSettingsValidityFromPlugins(plugins) {
/**
* @name _isSettingValid
* @description Check if a setting is valid based on the pattern and required flags.
* @param {key} str - The name of the setting
* @param {object} value - Setting value used to check if it's valid
* @param {pluginName} str - The name of the plugin
* @returns {object} - Return object with {stop, data : [isRegErr, isReqErr, settingErr, settingNameErr, pluginErr]}
* @param {String} key - The name of the setting
* @param {Object} value - Setting value used to check if it's valid
* @param {String} pluginName - The name of the plugin
* @returns {Object} - Return object with {stop, data : [isRegErr, isReqErr, settingErr, settingNameErr, pluginErr]}
*/
function _isSettingValid(key, value, pluginName) {
let is_reg_valid = true;
@ -216,7 +216,7 @@ function _isSettingValid(key, value, pluginName) {
* @description This function return a unique identifier using uuidv4 and a random number.
* Adding random number to avoid duplicate uuids when some components are rendered at the same time.
* We can pass a possible existing id, the function will only generate one if the id is empty.
* @param {string} [id=""] - Possible existing id, check if it's empty to generate a new one.
* @param {String} [id=""] - Possible existing id, check if it's empty to generate a new one.
* @returns {string} - The unique identifier.
*/
function useUUID(id = "") {
@ -230,8 +230,8 @@ function useUUID(id = "") {
/**
* @name useEqualStr
* @description Get the type of a widget and format it to lowercase if possible. Else return an empty string.
* @param {any} type - Try to convert the type to a string in lowercase to compare it with wanted value.
* @param {string} compare - The value to compare with, in general the component name.
* @param {Any} type - Try to convert the type to a string in lowercase to compare it with wanted value.
* @param {String} compare - The value to compare with, in general the component name.
* @returns {boolean} - True if matching, false if not.
*/
function useEqualStr(type, compare) {
@ -248,8 +248,8 @@ function useEqualStr(type, compare) {
* @name useDataLinkAttr
* @description Check from event if the target has a data-link attribute. Case it is, it will be used to redirect the user to the define link.
* This is useful to avoid using the <a> tag and use a <div> or <button> instead.
* @param {event} e - The event to attach the function logic
* @returns {void}
* @param {Event} e - The event to attach the function logic
* @returns {Void}
*/
function useDataLinkAttr(e) {
if (!e.target.hasAttribute("data-link")) return;

6
src/ui/client/dashboard/utils/lang.js
View file

@ -26,7 +26,7 @@ function getAllLang() {
* @name getAllLangCurrPage
* @description Filter the needed translations for the current page in order to reduce the size of the i18n object.
* @example ["dashboard", "settings", "profile"]
* @param {array} pagesArr - Array of strings with the names of the prefixes of the translations needed.
* @param {Array} pagesArr - Array of strings with the names of the prefixes of the translations needed.
* @returns {object} - Object with the languages data for the current page.
*/
function getAllLangCurrPage(pagesArr) {
@ -48,7 +48,7 @@ function getAllLangCurrPage(pagesArr) {
* @name getI18n
* @description Return the i18n object with the translations needed for the current page for all available languages.
* @example ["dashboard", "settings", "profile"]
* @param {array} pagesArr - Array of strings with the names of the prefixes of the translations needed.
* @param {Array} pagesArr - Array of strings with the names of the prefixes of the translations needed.
* @returns {object} - Object with the i18n object.
*/
function getI18n(pagesArr = []) {
@ -99,7 +99,7 @@ function getLocalLang() {
navigator.languages &&
navigator.languages > 0 &&
availablesLangs.indexOf(
navigator.languages[0].split("-")[0].toLowerCase(),
navigator.languages[0].split("-")[0].toLowerCase()
) !== -1
) {
return navigator.languages[0].split("-")[0].toLowerCase();

39
src/ui/client/dashboard/utils/tabulator.js
View file

@ -8,10 +8,10 @@ import { contentIndex } from "@utils/tabindex.js";
/**
* @name addColumnsWidth
* @description Add min and max width to the column object in case we have the right format.
* @param {object} column - The column object to update in case we have the right format.
* @param {string|number} [colMinWidth=0] - The minimum width for the column. Case 0 or invalid, will be ignored.
* @param {string|number} [colMaxWidth=0] - The minimum width for the column. Case 0 or invalid, will be ignored.
* @returns {void}
* @param {Object} column - The column object to update in case we have the right format.
* @param {String|Number} [colMinWidth=0] - The minimum width for the column. Case 0 or invalid, will be ignored.
* @param {String|Number} [colMaxWidth=0] - The minimum width for the column. Case 0 or invalid, will be ignored.
* @returns {Void}
*/
function addColumnsWidth(column, colMinWidth = 0, colMaxWidth = 0) {
try {
@ -26,9 +26,8 @@ function addColumnsWidth(column, colMinWidth = 0, colMaxWidth = 0) {
* @name addColumnsSorter
* @description This is a wrapper that will execute every sorter function in order to add a new sorter to the tabulator library.
* @example { title: "Icon", field: "icon", formatter: "icons" }
* @param {object} column - The column object to update in case we have the right format.
* @param {formatName} column - Check if the current column format is the right one.
* @returns {void}
* @param {Object} column - The column object to update in case we have the right format.
* @returns {Void}
*/
function addColumnsSorter(column) {
if (!("formatter" in column)) return;
@ -41,9 +40,9 @@ function addColumnsSorter(column) {
* @name _sortIcons
* @description Add sorter for Icons components in the tabulator.
* @example { title: "Icon", field: "icon", formatter: "icons" }
* @param {object} column - The column object to update in case we have the right format.
* @param {formatName} column - Check if the current column format is the right one.
* @returns {void}
* @param {Object} column - The column object to update in case we have the right format.
* @param {String} formatName - Check if the current column format is the right one.
* @returns {Void}
*/
function _sortIcons(column, formatName) {
if (formatName !== "icons") return;
@ -82,9 +81,9 @@ function _sortIcons(column, formatName) {
* @name _sortText
* @description Add sorter for Text components in the tabulator. Under the hood, this will use the default tabulator sorter for strings.
* @example { title: "Icon", field: "icon", formatter: "icons" }
* @param {object} column - The column object to update in case we have the right format.
* @param {formatName} column - Check if the current column format is the right one.
* @returns {void}
* @param {Object} column - The column object to update in case we have the right format.
* @param {String} column - Check if the current column format is the right one.
* @returns {Void}
*/
function _sortText(column, formatName) {
if (formatName !== "text") return;
@ -94,7 +93,7 @@ function _sortText(column, formatName) {
/**
* @name a11yTable
* @description Wrapper to add some accessibility to the table.
* @returns {void}
* @returns {Void}
*/
function a11yTable() {
_a11ySortable();
@ -105,7 +104,7 @@ function a11yTable() {
* @name _a11ySortable
* @description Allow the user to get to the sortable header by pressing the tab key.
* The user can then press the enter key to sort the column.
* @returns {void}
* @returns {Void}
*/
function _a11ySortable() {
const sortableHeaders = document.querySelectorAll(
@ -130,7 +129,7 @@ function _a11ySortable() {
/**
* @name _a11yFooter
* @description Update pagination tabindex to get continuity in the tab order in the table footer.
* @returns {void}
* @returns {Void}
*/
function _a11yFooter() {
const tableFooter = document.querySelector(".tabulator-footer");
@ -146,10 +145,10 @@ function _a11yFooter() {
* @description Apply setting filter to the tabulator instance.
* We can't easily add filter after another, so we need to remove the previous one and add all new ones at once.
* @example { "filter-1" : { type: "keywords", fields: ["text", "icon"], setting: {}, value : "test" }}
* @param {object} tableInstance - The table instance to apply the filter.
* @param {object} filters - All filters to apply to the table.
* @param {string|number|regex} value - The value to apply to the filter.
* @returns {void}
* @param {Object} tableInstance - The table instance to apply the filter.
* @param {Object} filters - All filters to apply to the table.
* @param {String|Number|Regex} value - The value to apply to the filter.
* @returns {Void}
*/
function applyTableFilter(tableInstance, filters) {
// loop on dict filters

4
src/ui/client/widgets_generator.py
View file

@ -281,10 +281,14 @@ def get_py_params(data: str) -> Union[str, bool]:
def convert_params(params: List[dict]) -> List[dict]:
convert_types = {
"string": "str",
"timestamp": "int",
"element": "dict",
"event": "dict",
"number": "int",
"boolean": "bool",
"array": "list",
"object": "dict",
"function": "callable",
}
convert_values = {