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

move folders, fix jsdoc, update buil.py and builder

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-08-12 20:55:38 +02:00
parent e79bd6454b
commit 5162f40a07
16 changed files with 153 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,7 +21,7 @@ ui_dir_templates = current_directory.parent.joinpath("templates")
legacy_dir_static = current_directory.joinpath("legacy", "static")
legacy_dir_templates = current_directory.joinpath("legacy", "templates")
builder_dir_pages = current_directory.joinpath("builder", "pages")
builder_dir_utils = current_directory.joinpath("builder", "utils")
builder_dir_utils = current_directory.joinpath("builder", "pages", "utils")
ui_dir_builder = current_directory.parent.joinpath("builder")
ui_dir_builder_utils = current_directory.parent.joinpath("builder", "utils")
@ -158,6 +158,8 @@ for deps_path in [join(sep, "usr", "share", "bunkerweb", *paths) for paths in ((
)
file.write_text(content)
# remove utils folder
remove_dir(ui_dir_builder_utils)
copytree(builder_dir_utils.as_posix(), ui_dir_builder_utils.as_posix())

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

@ -1,7 +1,7 @@
import json
import base64
from builder.instances import instances_builder
from pages.instances2 import instances_builder
# Create instance class using keys from the instances list
@ -15,19 +15,20 @@ class Instance:
instances = [
Instance("static", True, 1, "hostname1", "instance1"),
Instance("container", True, 2, "hostname2", "instance2"),
{"name": "instance1", "hostname": "hostname1", "type": "static", "health": "up", "id": 1},
{"name": "instance2", "hostname": "hostname2", "type": "container", "health": "down", "id": 2},
]
types = ["static", "container"]
methods = ["ui", "manual"]
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)
json.dump(builder, f, indent=4)
output_base64_bytes = base64.b64encode(bytes(json.dumps(builder), "utf-8"))
output_base64_string = output_base64_bytes.decode("ascii")

16
src/ui/client/builder/pages/instances2.py
View file

@ -1,9 +1,10 @@
from builder.utils.widgets import button_widget, button_group_widget, title_widget, text_widget, tabulator_widget, input_widget, icons_widget
from builder.utils.table import add_column
from enum import StrEnum
from .utils.widgets import button_widget, button_group_widget, title_widget, text_widget, tabulator_widget, input_widget, icons_widget
from .utils.table import add_column
from enum import Enum
class Healths(StrEnum):
class Healths(Enum):
UP = "up"
DOWN = "down"
LOADING = "loading"
@ -241,7 +242,7 @@ def instances_tabs():
]
def instances_builder(instances: list, types: list = [], methods: list = []) -> list:
def instances_builder(instances: list, types: list = [], methods: list = [], healths: list = []) -> list:
items = []
for instance in instances:
items.append(
@ -250,6 +251,7 @@ def instances_builder(instances: list, types: list = [], methods: list = []) ->
hostname=instance.get("hostname"),
instance_type=instance.get("type"),
method=instance.get("method"),
health=instance.get("health"),
creation_date=instance.get("creation_date"),
last_seen=instance.get("last_seen"),
)
@ -258,7 +260,7 @@ def instances_builder(instances: list, types: list = [], methods: 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=instances_tabs())],
},
{
@ -269,7 +271,7 @@ def instances_builder(instances: list, types: list = [], methods: list = []) ->
id="table-instances",
columns=columns,
items=items,
filters=instances_filter(types=types, methods=methods),
filters=instances_filter(types=types, methods=methods, healths=healths),
)
],
},

0
src/ui/client/builder/utils/form.py → src/ui/client/builder/pages/utils/form.py
View file

0
src/ui/client/builder/utils/table.py → src/ui/client/builder/pages/utils/table.py
View file

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

@ -74,6 +74,7 @@ def advanced_widget(
def button_widget(
text: str,
id: str = "",
display: list = [],
type: str = "button",
disabled: bool = False,
hideText: bool = False,
@ -93,12 +94,13 @@ def button_widget(
- `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 (optional, default `"normal"`)
- `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`)
@ -126,7 +128,7 @@ def button_widget(
# List of params that will be add only if not default value
list_params = [("id", id, ""),("type", type, "button"),("disabled", disabled, False),("hideText", hideText, False),("color", color, "primary"),("iconColor", iconColor, ""),("size", size, "normal"),("iconName", iconName, ""),("attrs", attrs, {}),("modal", modal, False),("tabId", tabId, ""),("containerClass", containerClass, "")]
list_params = [("id", id, ""),("display", display, []),("type", type, "button"),("disabled", disabled, False),("hideText", hideText, False),("color", color, "primary"),("iconColor", iconColor, ""),("size", size, "normal"),("iconName", iconName, ""),("attrs", attrs, {}),("modal", modal, False),("tabId", tabId, ""),("containerClass", containerClass, "")]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -457,7 +459,7 @@ def container_widget(
- `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 to be of format \["groupName", "compId"] in order to be displayed using the display store. More info on the display store itslef. (optional, default `[]`)
- `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
@ -513,9 +515,9 @@ def datepicker_widget(
- `popovers` **array** List of popovers to display more information
- `attrs` **object** Additional attributes to add to the field (optional, default `{}`)
- `inpType` **string** The type of the field, useful when we have multiple fields in the same container to display the right field (optional, default `"datepicker"`)
- `value` **number\<timestamp>** Default date when instantiate (optional, default `""`)
- `minDate` **number\<timestamp>** Impossible to pick a date before this date. (optional, default `""`)
- `maxDate` **number\<timestamp>** Impossible to pick a date after this date. (optional, default `""`)
- `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"}`)
@ -705,7 +707,7 @@ def editor_widget(
- `id` **string** Unique id (optional, default `uuidv4()`)
- `label` **string** The label of the field. Can be a translation key or by default raw text.
- `name` **string** The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.\* @param {string} label
- `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
@ -914,29 +916,6 @@ def filter_widget(
return { "type" : "Filter", "data" : data }
def format_columns_widget(
columns: list
):
"""
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.
PARAMETERS
- `columns` **array** The columns are the list of columns that we want to check.
Returns **[array][3]** Return the columns with the custom sort added.
"""
data = {
"columns" : columns,
}
return { "type" : "Formatcolumns", "data" : data }
def grid_widget(
gridClass: str = "items-start",
display: list = []
@ -950,7 +929,7 @@ def grid_widget(
PARAMETERS
- `gridClass` **string** Additional class (optional, default `"items-start"`)
- `display` **array** Array need to be of format \["groupName", "compId"] in order to be displayed using the display store. More info on the display store itslef. (optional, default `[]`)
- `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
@ -997,7 +976,7 @@ def grid_layout_widget(
- `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 to be of format \["groupName", "compId"] in order to be displayed using the display store. More info on the display store itslef. (optional, default `[]`)
- `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
@ -1025,6 +1004,7 @@ def grid_layout_widget(
def icons_widget(
value,
iconName: str,
iconClass: str = "base",
color: str = "",
@ -1043,6 +1023,7 @@ def icons_widget(
- `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
@ -1060,7 +1041,7 @@ def icons_widget(
# List of params that will be add only if not default value
list_params = [("iconClass", iconClass, "base"),("color", color, ""),("isStick", isStick, False),("disabled", disabled, False)]
list_params = [("value", value, ""),("iconClass", iconClass, "base"),("color", color, ""),("isStick", isStick, False),("disabled", disabled, False)]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -1068,13 +1049,13 @@ def icons_widget(
def input_widget(
popovers,
label: str,
name: str,
value: str,
id: str = "",
type: str = "text",
attrs: dict = {},
popovers: list = [],
inpType: str = "input",
columns: dict = {"pc":"12","tablet":"12","mobile":"12"},
disabled: bool = False,
@ -1101,10 +1082,10 @@ def input_widget(
- `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.\* @param {string} label
- `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
- `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`)
@ -1142,7 +1123,6 @@ def input_widget(
"""
data = {
"popovers" : popovers,
"label" : label,
"name" : name,
"value" : value,
@ -1150,7 +1130,7 @@ def input_widget(
# List of params that will be add only if not default value
list_params = [("id", id, ""),("type", type, "text"),("attrs", attrs, {}),("inpType", inpType, "input"),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("disabled", disabled, False),("required", required, False),("placeholder", placeholder, ""),("pattern", pattern, "(?.*)"),("isClipboard", isClipboard, True),("readonly", readonly, False),("hideLabel", hideLabel, False),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")]
list_params = [("id", id, ""),("type", type, "text"),("attrs", attrs, {}),("popovers", popovers, []),("inpType", inpType, "input"),("columns", columns, {"pc":"12","tablet":"12","mobile":"12"}),("disabled", disabled, False),("required", required, False),("placeholder", placeholder, ""),("pattern", pattern, "(?.*)"),("isClipboard", isClipboard, True),("readonly", readonly, False),("hideLabel", hideLabel, False),("containerClass", containerClass, ""),("inpClass", inpClass, ""),("headerClass", headerClass, ""),("tabId", tabId, "")]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
@ -1459,69 +1439,7 @@ def multiple_widget(
],
"containerClass": "z-20"
},
"REVERSE_PROXY_AUTH_REQUEST": {
"context": "multisite",
"default": "",
"help": "Enable authentication using an external provider (value of auth_request directive).",
"id": "reverse-proxy-auth-request",
"label": "Reverse proxy auth request",
"regex": "^(\\/[\\w\\].~:\\/?#\\[@!$\\&'\\(\\)*+,;=\\-]*|off)?$",
"type": "text",
"multiple": "reverse-proxy",
"pattern": "^(\\/[\\w\\].~:\\/?#\\[@!$\\&'\\(\\)*+,;=\\-]*|off)?$",
"inpType": "input",
"name": "Reverse proxy auth request",
"columns": {
"pc": 4,
"tablet": 6,
"mobile": 12
},
"disabled": false,
"value": "",
"popovers": [
{
"iconName": "disk",
"text": "inp_popover_multisite"
},
{
"iconName": "info",
"text": "Enable authentication using an external provider (value of auth_request directive)."
}
],
"containerClass": "z-19"
},
"REVERSE_PROXY_AUTH_REQUEST_SIGNIN_URL": {
"context": "multisite",
"default": "",
"help": "Redirect clients to sign-in URL when using REVERSE_PROXY_AUTH_REQUEST (used when auth_request call returned 401).",
"id": "reverse-proxy-auth-request-signin-url",
"label": "Auth request signin URL",
"regex": "^(https?:\\/\\/[\\-\\w@:%.+~#=]+[\\-\\w\\(\\)!@:%+.~#?&\\/=$]*)?$",
"type": "text",
"multiple": "reverse-proxy",
"pattern": "^(https?:\\/\\/[\\-\\w@:%.+~#=]+[\\-\\w\\(\\)!@:%+.~#?&\\/=$]*)?$",
"inpType": "input",
"name": "Auth request signin URL",
"columns": {
"pc": 4,
"tablet": 6,
"mobile": 12
},
"disabled": false,
"value": "",
"popovers": [
{
"iconName": "disk",
"text": "inp_popover_multisite"
},
{
"iconName": "info",
"text": "Redirect clients to sign-in URL when using REVERSE_PROXY_AUTH_REQUEST (used when auth_request call returned 401)."
}
],
"containerClass": "z-18"
},
},
},
}
}
}
@ -2032,6 +1950,80 @@ def table_widget(
return { "type" : "Table", "data" : data }
def tabulator_widget(
id: str,
columns: list,
items: list,
isStriped: bool = True,
filters: list = [],
rowHeight: int = 0,
colMinWidth: int = 150,
colMaxWidth: int = 0,
isPagination: bool = True,
paginationSize: int = 10,
paginationInitialPage: int = 1,
paginationSizeSelector: list = [10,25,50,100]
):
"""
This component allow to display a table using the Tabulator library with utils and custom components around to work with (like filters).
Because we can't instantiate Vue component inside the Tabulator cell, I choose to send default component props to the cell and teleport the component inside the cell.
The created instance is store in the tableStore using the id as key in order to use it in other components.
UI : I created a formatter for each custom component that will return an empty string.
Sorting : because we aren't working with primitives but props object, each columns that have a custom component will have a custom sorter to avoid sorting error.
Filtering : I created isomorphic filters that will get the right data to check for each custom component object.
To apply a filter, we need to render a field that will be link to the filterTable() function.
A11y :I created a11yTable(), with sortable header tab index.
PARAMETERS
- `id` **string** Unique id of the table
- `isStriped` **boolean** Add striped class to the table (optional, default `true`)
- `filters` **array** List of filters to display (optional, default `[]`)
- `columns` **array** List of columns to display
- `items` **array** List of items to display
- `rowHeight` **number** Case value is 0, this will be ignored. (optional, default `0`)
- `colMinWidth` **number** Minimum width for each col of a row (optional, default `150`)
- `colMaxWidth` **number** Maximum width for each col of a row. Case value is 0, this will be ignored. (optional, default `0`)
- `isPagination` **boolean** Add pagination to the table (optional, default `true`)
- `paginationSize` **number** Number of items per page (optional, default `10`)
- `paginationInitialPage` **number** Initial page (optional, default `1`)
- `paginationSizeSelector` **array** Select number of items per page (optional, default `[10,25,50,100]`)
EXAMPLE
filter = [{
"type": "like", // isomorphic filter type
"fields": ["ip"], // fields to filter
// setting is a regular Fields props object
"setting": {
"id": "input-search-ip",
"name": "input-search-ip",
"label": "bans_search_ip", # keep it (a18n)
"value": "",
"inpType": "input",
"columns": {"pc": 3, "tablet": 4, " mobile": 12},
},
}];
Returns **void**;
"""
data = {
"id" : id,
"columns" : columns,
"items" : items,
}
# List of params that will be add only if not default value
list_params = [("isStriped", isStriped, True),("filters", filters, []),("rowHeight", rowHeight, 0),("colMinWidth", colMinWidth, 150),("colMaxWidth", colMaxWidth, 0),("isPagination", isPagination, True),("paginationSize", paginationSize, 10),("paginationInitialPage", paginationInitialPage, 1),("paginationSizeSelector", paginationSizeSelector, [10,25,50,100])]
for param in list_params:
add_key_value(data, param[0], param[1], param[2])
return { "type" : "Tabulator", "data" : data }
def templates_widget(
templates: dict,
operation: str = "edit",

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

@ -34,7 +34,7 @@ import { useUUID } from "@utils/global.js";
* @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 {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]

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

@ -46,7 +46,7 @@ import { useUUID } from "@utils/global.js";
* @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 {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]
@ -165,7 +165,7 @@ watch(
() => props.value,
() => {
select.value = props.value;
},
}
);
const inp = reactive({
id: "",
@ -174,7 +174,7 @@ const inp = reactive({
isMatching: computed(() => {
if (!props.values) return false;
return props.values.some((str) =>
str.toLowerCase().includes(inp.value.toLowerCase()),
str.toLowerCase().includes(inp.value.toLowerCase())
);
}),
});
@ -191,10 +191,10 @@ const select = reactive({
isValid: !props.required
? true
: props.requiredValues.length <= 0
? true
: props.requiredValues.includes(props.value)
? true
: false,
? true
: props.requiredValues.includes(props.value)
? true
: false,
});
const selectBtn = ref();
@ -235,8 +235,8 @@ function toggleSelect() {
const canBeDown = props.onlyDown
? true
: fieldContainerRect.bottom + selectDropRect.height < parentRect.bottom
? true
: false;
? true
: false;
if (!canBeDown) {
selectDropdown.value.style.top = `-${
@ -275,10 +275,10 @@ function changeValue(newValue) {
select.isValid = !props.required
? true
: props.requiredValues.length <= 0
? true
: props.requiredValues.includes(newValue)
? true
: false;
? true
: props.requiredValues.includes(newValue)
? true
: false;
closeSelect();
return newValue;
}

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

@ -41,7 +41,7 @@ import "@assets/script/editor/theme-dawn.js";
* @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 {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=""]

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

@ -45,7 +45,7 @@ import { useUUID } from "@utils/global.js";
* @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 {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]

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

@ -42,7 +42,7 @@ import ErrorDropdown from "@components/Forms/Error/Dropdown.vue";
* @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 {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]
@ -222,8 +222,8 @@ function openSelect() {
const canBeDown = props.onlyDown
? true
: fieldContainerRect.bottom + selectDropRect.height < parentRect.bottom
? true
: false;
? true
: false;
if (!canBeDown) {
selectDropdown.value.style.top = `-${
@ -429,7 +429,7 @@ const emits = defineEmits(["inp"]);
props.placeholder
? $t(
props.placeholder,
$t('dashboard_placeholder', props.placeholder),
$t('dashboard_placeholder', props.placeholder)
)
: ''
"

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

@ -44,7 +44,7 @@ import { useUUID } from "@utils/global";
* @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 {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]
@ -171,10 +171,10 @@ const select = reactive({
isValid: !props.required
? true
: props.requiredValues.length <= 0
? true
: props.requiredValues.includes(props.value)
? true
: false,
? true
: props.requiredValues.includes(props.value)
? true
: false,
});
const selectBtn = ref();
@ -212,8 +212,8 @@ function toggleSelect() {
const canBeDown = props.onlyDown
? true
: fieldContainerRect.bottom + selectDropRect.height < parentRect.bottom
? true
: false;
? true
: false;
if (!canBeDown) {
selectDropdown.value.style.top = `-${
@ -252,10 +252,10 @@ function changeValue(newValue) {
select.isValid = !props.required
? true
: props.requiredValues.length <= 0
? true
: props.requiredValues.includes(newValue)
? true
: false;
? true
: props.requiredValues.includes(newValue)
? true
: false;
closeSelect();
return newValue;
}

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

@ -23,7 +23,7 @@ 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 {array} [popovers=[]] - List of popovers to display more information
* @param {boolean} [required=false]
* @param {boolean} [hideLabel=false]
* @param {string} [headerClass=""]

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

@ -54,6 +54,7 @@ import Eye from "@components/Icons/Eye.vue";
* @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({
@ -66,6 +67,11 @@ const props = defineProps({
required: false,
default: "",
},
value: {
type: [String, Number],
required: false,
default: "",
},
color: {
type: String,
required: false,

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

@ -54,7 +54,7 @@ const tableStore = useTableStore();
* @param {boolean} [isPagination=true] - Add pagination to the table
* @param {number} [paginationSize=10] - Number of items per page
* @param {number} [paginationInitialPage=1] - Initial page
* @param {array} [paginationSizeSelector=[10, 25, 50, 100, true]] - Select number of items per page
* @param {array} [paginationSizeSelector=[10, 25, 50, 100]] - Select number of items per page
* @returns {void}
*/
const customComponents = ["Icons", "Text", "Fields", "Button", "ButtonGroup"];
@ -118,7 +118,7 @@ const props = defineProps({
paginationSizeSelector: {
type: Array,
required: false,
default: [10, 25, 50, 100, true],
default: [10, 25, 50, 100],
},
});
@ -152,7 +152,7 @@ const table = reactive({
opts.paginationSize = props.paginationSize;
opts.paginationInitialPage = props.paginationInitialPage;
opts.paginationButtonCount = 2;
opts.paginationSizeSelector = props.paginationSizeSelector;
opts.paginationSizeSelector = props.paginationSizeSelector.concat([true]);
opts.paginationCounter = "rows";
}
return opts;

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

@ -17,7 +17,7 @@ from utils import run_command
inputFolder = abspath("../client/dashboard/components")
outputFolderMd = abspath("../client/.widgets-md")
outputFolderPy = abspath("../client/.widgets")
outputFolderWidgets = abspath("../client/builder/utils")
outputFolderWidgets = abspath("../client/builder/pages/utils")
components_path_to_exclude = ("components/Icons", "components/Forms/Error", "components/Dashboard", "components/Builder")