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

update doc builder + doc components + backend

Browse source 
* remove useless services/raw route on main.py
* fix vue js components jsdoc missing *
* update a part of the ui component builder to python for better perf and futur use in building widgets function, keep only format merge md to js (will convert to py later)
* update raw page and builder
This commit is contained in:
Jordan Blasenhauer 2024-08-01 23:17:58 +02:00
parent f4ea01fe7d
commit f5137b6f76
127 changed files with 5055 additions and 4042 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2728
docs/ui-components.md
View file

File diff suppressed because it is too large Load diff

338
docs/vue2md.js
View file

@ -1,239 +1,99 @@
const fs = require("fs");
const path = require("path");
// Merge all components md on this file name
const finalFile = "ui-components.md";
// Where we have all SFC components
const inputFolder = path.join(__dirname, "../src/client/dashboard/src/components");
// Where we want to output md components file
const ouputFolder = path.join(__dirname, "components");
// Check that input folder exists
if (!fs.existsSync(inputFolder)) {
console.error("Input folder does not exist");
process.exit(1);
}
// Create the output folder if it doesn't exist
if (!fs.existsSync(ouputFolder)) {
fs.mkdirSync(ouputFolder);
}
// Remove previous content of the output folder
fs.readdirSync(ouputFolder).forEach((file) => {
fs.unlinkSync(path.join(ouputFolder, file));
});
// Allow to get all subfolders from inputFolder
function flatten(lists) {
return lists.reduce((a, b) => a.concat(b), []);
}
function getDirectories(srcpath) {
return fs
.readdirSync(srcpath)
.map((file) => path.join(srcpath, file))
.filter((path) => fs.statSync(path).isDirectory());
}
function getDirectoriesRecursive(srcpath) {
return [
srcpath,
...flatten(getDirectories(srcpath).map(getDirectoriesRecursive)),
];
}
// Get the script part of a Vue file and create a JS file
function vue2js() {
const folders = getDirectoriesRecursive(inputFolder);
// Read every subfolders from the input folder and get all files
folders.forEach((folder) => {
const files = fs.readdirSync(path.join(folder), {
withFileTypes: true,
});
files.forEach((file) => {
// Get only .vue file
if (file.isFile() && file.name.endsWith(".vue")) {
const src = path.join(folder, file.name);
const data = fs.readFileSync(src, "utf8");
// Get only the content between <script setup> and </script> tag
const script = data.match(/<script setup>([\s\S]*?)<\/script>/g);
// I want to remove the <script setup> and </script> tags
script[0] = script[0]
.replace("<script setup>", "")
.replace("</script>", "");
// Create a file on the output folder with the same name but with .js extension
const fileName = file.name.replace(".vue", ".js");
const dest = path.join(ouputFolder, fileName);
fs.writeFileSync(dest, script[0], "utf8");
}
});
});
}
// Run a command to render markdown from JS files
function js2md() {
// Get all files from the output folder
const files = fs.readdirSync(ouputFolder, { withFileTypes: true });
// Create a markdown file for each JS file
files.forEach((file) => {
// Run a process `documentation build <filename> -f md > <filename>.md
const command = `documentation build ${path.join(
ouputFolder,
file.name
)} -f md > ${path.join(ouputFolder, file.name.replace(".js", ".md"))}`;
// Run the command
const { execSync } = require("child_process");
execSync(command, (error, stdout, stderr) => {
if (error) {
// console.error(`exec error: ${error}`);
return;
}
// console.log(`stdout: ${stdout}`);
// console.error(`stderr: ${stderr}`);
});
});
// Remove all JS files when all processes are done
files.forEach((file) => {
fs.unlinkSync(path.join(ouputFolder, file.name));
});
}
// Format each md file to remove specific content
function mergeMd() {
// Get all files from the output folder
const files = fs.readdirSync(ouputFolder, { withFileTypes: true });
files.forEach((file, id) => {
let data = fs.readFileSync(path.join(ouputFolder, file.name), "utf8");
// In case we have "[1]:", remove everything after
data = data.replace(/\[\d+\]:[\s\S]*?$/g, "");
// Remove ### Table of contents
data = data.replace("### Table of Contents", "");
// Remove everything after the first ## tag
const index = data.indexOf("## ");
data = data.substring(index);
fs.writeFileSync(path.join(ouputFolder, file.name), data, "utf8");
});
// Create order using the tag title path of each file
// For example using Form/Input.vue
const order = [];
files.forEach((file, id) => {
// Get the title from first line
const data = fs.readFileSync(path.join(ouputFolder, file.name), "utf8");
const filePath = data.split("\n")[0].replace("## ", "");
order.push({ path: filePath, file: file });
});
// Sort by path
order.sort((a, b) => {
return a.path.localeCompare(b.path);
});
// Create the md file to merge
const merge = path.join(finalFile);
fs.writeFileSync(merge, "", "utf8");
// Append each file in order
order.forEach((item) => {
let data = fs.readFileSync(path.join(ouputFolder, item.file.name), "utf8");
fs.appendFileSync(merge, data, "utf8");
});
}
// Format merge file
function formatMd() {
// Create a md file to merge
const merge = path.join(finalFile);
// Get data from merge
let data = fs.readFileSync(merge, "utf8");
let isLevel = true;
let currAttemps = 0;
const maxAttemps = 6;
while (isLevel && currAttemps < maxAttemps) {
currAttemps++;
const titles = [];
let tag = "#";
for (let i = 0; i < currAttemps; i++) {
tag += "#";
}
tag += " ";
// Each time, get the first level title and add it to the titles array
data.split("\n").forEach((line) => {
if (line.startsWith(tag) && line.includes("/")) {
const firstLevel = line.split("/")[0];
if (!titles.includes(firstLevel.replace(tag, "").trim()))
titles.push(firstLevel.replace(tag, ""));
}
});
// Create a top title at the first occurrence
// And remove from component the first level string
titles.forEach((title) => {
let isTitleSet = false;
data.split("\n").forEach((line) => {
// For title
if (line.startsWith(tag) && line.includes("/")) {
// Add a top title before the current line
if (!isTitleSet && line.includes(`${title}/`)) {
data = data.replace(
line,
`${tag} ${title}\n\n${line
.replace(tag, "#" + tag)
.replace(`${title}/`, "")}`
);
isTitleSet = true;
return;
}
if (line.includes(`${title}/`)) {
data = data.replace(
line,
line.replace(tag, "#" + tag).replace(`${title}/`, "")
);
}
return;
}
});
});
}
// Update the child of .vue component title to keep title levels consistency
let componentTag = "";
let dataSplit = data.split("\n");
data.split("\n").forEach((line, id) => {
if (line.startsWith("#") && line.includes(".vue")) {
componentTag = line.split(" ")[0];
return;
}
if (
(line.startsWith("#") && line.includes("Parameters")) ||
(line.startsWith("#") && line.includes("Examples"))
) {
const elTag = line.split(" ")[0];
// get line per id
const updateLine = line.replace(elTag, `${componentTag}#`);
dataSplit[id] = updateLine;
}
});
// Update the data with split
data = dataSplit.join("\n");
// Add title and description
const title = "# UI Components";
const description =
"This page contains all the UI components used in the application.";
data = `${title}\n\n${description}\n\n${data}`;
fs.writeFileSync(merge, data, "utf8");
fs.rmSync(ouputFolder, { recursive: true });
}
vue2js();
js2md();
mergeMd();
formatMd();
const fs = require("fs");
const path = require("path");
// Merge all components md on this file name
const finalFile = "ui-components.md";
// Where we have all SFC components
// Where we want to output md components file
const ouputFolder = path.join(__dirname, "components");
// Format merge file
function formatMd() {
// Create a md file to merge
const merge = path.join(finalFile);
// Get data from merge
let data = fs.readFileSync(merge, "utf8");
let isLevel = true;
let currAttemps = 0;
const maxAttemps = 6;
while (isLevel && currAttemps < maxAttemps) {
currAttemps++;
const titles = [];
let tag = "#";
for (let i = 0; i < currAttemps; i++) {
tag += "#";
}
tag += " ";
// Each time, get the first level title and add it to the titles array
data.split("\n").forEach((line) => {
if (line.startsWith(tag) && line.includes("/")) {
const firstLevel = line.split("/")[0];
if (!titles.includes(firstLevel.replace(tag, "").trim()))
titles.push(firstLevel.replace(tag, ""));
}
});
// Create a top title at the first occurrence
// And remove from component the first level string
titles.forEach((title) => {
let isTitleSet = false;
data.split("\n").forEach((line) => {
// For title
if (line.startsWith(tag) && line.includes("/")) {
// Add a top title before the current line
if (!isTitleSet && line.includes(`${title}/`)) {
data = data.replace(
line,
`${tag} ${title}\n\n${line
.replace(tag, "#" + tag)
.replace(`${title}/`, "")}`,
);
isTitleSet = true;
return;
}
if (line.includes(`${title}/`)) {
data = data.replace(
line,
line.replace(tag, "#" + tag).replace(`${title}/`, ""),
);
}
return;
}
});
});
}
// Update the child of .vue component title to keep title levels consistency
let componentTag = "";
let dataSplit = data.split("\n");
data.split("\n").forEach((line, id) => {
if (line.startsWith("#") && line.includes(".vue")) {
componentTag = line.split(" ")[0];
return;
}
if (
(line.startsWith("#") && line.includes("Parameters")) ||
(line.startsWith("#") && line.includes("Examples"))
) {
const elTag = line.split(" ")[0];
// get line per id
const updateLine = line.replace(elTag, `${componentTag}#`);
dataSplit[id] = updateLine;
}
});
// Update the data with split
data = dataSplit.join("\n");
// Add title and description
const title = "# UI Components";
const description =
"This page contains all the UI components used in the application.";
data = `${title}\n\n${description}\n\n${data}`;
fs.writeFileSync(merge, data, "utf8");
}
formatMd();

151
docs/vue2md.py Normal file
View file

@ -0,0 +1,151 @@
from os.path import abspath
from pathlib import Path
from subprocess import Popen, PIPE
from typing import List
from shutil import rmtree
outputFilename = "ui-components.md"
# We want to get path of the folder where our components are
# The path is "../src/client/dashboard/src/components" from here
inputFolder = abspath("../src/ui/client/dashboard/components")
outputFolder = abspath("../docs/components")
outputFile = abspath("../docs")
def run_command(command: List[str]) -> int:
"""Utils to run a subprocess command. This is usefull to run npm commands to build vite project"""
print(f"Running command: {command}", flush=True)
try:
process = Popen(command, stdout=PIPE, stderr=PIPE, shell=True, text=True)
while process.poll() is None:
if process.stdout is not None:
for line in process.stdout:
print(line.strip(), flush=True)
if process.returncode != 0:
print("Error while running command", flush=True)
print(process.stdout.read(), flush=True)
print(process.stderr.read(), flush=True)
return 1
except BaseException as e:
print(f"Error while running command: {e}", flush=True)
return 1
print("Command executed successfully", flush=True)
return 0
def install_npm_packages():
"""Install all packages needed to run the script"""
# Install documentation package
run_command("npm install -g documentation")
def reset():
"""Reset the docs folder"""
# delete the output folder even if not empty
rmtree(outputFolder, ignore_errors=True)
# remove outputfilename
output_file_path = Path(outputFile) / outputFilename
output_file_path.unlink(missing_ok=True)
def vue2js():
"""Get the script part of a Vue file and create a JS file"""
# Create outputFolder if not exists
Path(outputFolder).mkdir(parents=True, exist_ok=True)
# Get every subfolders from the input folder
print(Path(inputFolder).rglob("*"))
for folder in Path(inputFolder).rglob("*"):
# Get only files
if folder.is_file() and folder.suffix == ".vue":
# Read the file content
data = folder.read_text()
# Get only the content between <script setup> and </script> tag
script = data.split("<script setup>")[1].split("</script>")[0]
# Create a file on the output folder with the same name but with .js extension
fileName = folder.name.replace(".vue", ".js")
dest = Path(outputFolder) / fileName
dest.write_text(script)
def js2md():
"""Run a command to render markdown from JS files"""
# Get all files from the output folder
files = list(Path(outputFolder).rglob("*"))
process_list = []
# Create a markdown file for each JS file
for file in files:
# Run a process `documentation build <filename> -f md > <filename>.md
command = f"documentation build {file} -f md > {file.with_suffix('.md')}"
# Run the command
# I want to run this command async
process = Popen(command, stdout=PIPE, stderr=PIPE, shell=True, text=True)
process_list.append(process)
# Wait that all processes are done
for process in process_list:
process.wait()
# Remove js files after
for file in files:
file.unlink()
def mergeMD():
"""Merge all md files into one"""
# Get all files from the output folder
files = list(Path(outputFolder).rglob("*"))
# Create order using the tag title path of each file
order = []
for file in files:
# Get the title from first line
data = file.read_text()
# Remove everything after a [1]: tag
data = data.split("[1]:")[0]
# Remove ### Table of contents
data = data.replace("### Table of Contents", "")
# Remove everything before the first ## tag
index = data.index("## ")
data = data[index:]
# update the file with the new content
file.write_text(data)
for file in files:
# Get the title from first line
data = file.read_text()
filePath = data.split("\n")[0].replace("## ", "")
order.append({"path": filePath, "fileName": str(file.name)})
# Sort by path
order.sort(key=lambda x: x["path"])
# Create the md file to merge
merge = Path(outputFile) / outputFilename
merge.write_text("")
# Append each file in order and keep indentation
for info in order:
file_path = Path(outputFolder) / info["fileName"]
data = file_path.read_text()
merge.write_text(merge.read_text() + data)
# Remove all files
rmtree(outputFolder, ignore_errors=True)
def formatMd():
# ATM didn't convert the js function to python
# So I will run a command to format the file
command = "node ./vue2md.js"
run_command(command)
# install_npm_packages()
install_npm_packages()
reset()
vue2js()
js2md()
mergeMD()
formatMd()

9
src/ui/builder/raw_mode.py
View file

@ -18,20 +18,11 @@ def raw_mode_builder(templates: list[dict], plugins: list, global_config: dict,
# We need
settings = get_service_settings(service_name, global_config, total_config)
print("settings", settings)
builder = [
{
"type": "card",
"containerColumns": {"pc": 12, "tablet": 12, "mobile": 12},
"widgets": [
{
"type": "Title",
"data": {"title": "services_mode_title", "type": "container"},
},
{
"type": "Subtitle",
"data": {"subtitle": "services_mode_subtitle", "type": "container"},
},
{
"type": "Templates",
"data": {

28
src/ui/client/dashboard/components/Builder/Bans.vue
View file

@ -10,18 +10,22 @@ import MessageUnmatch from "@components/Message/Unmatch.vue";
import { useEqualStr } from "@utils/global.js";
/**
@name Builder/Bans.vue
@description This component is lightweight builder containing only the necessary components to create the bans page.
@example
[
{
type: "card",
gridLayoutClass: "transparent",
widgets: [{ type: "MessageUnmatch", data: { text: "bans_not_found" } }],
},
];
@param {array} builder - Array of containers and widgets
*/
* @name Builder/Bans.vue
* @description This component is lightweight builder containing only the necessary components to create the bans page.
* @example
* [
* {
* type: "card",
* gridLayoutClass: "transparent",
* widgets: [
* { type: "MessageUnmatch",
* data: { text: "bans_not_found" }
* },
* ],
* },
* ];
* @param {array} builder - Array of containers and widgets
*/
const props = defineProps({
builder: {

60
src/ui/client/dashboard/components/Builder/GlobalConfig.vue
View file

@ -8,36 +8,36 @@ import Templates from "@components/Form/Templates.vue";
import { useEqualStr } from "@utils/global.js";
/**
@name Builder/GlobalConfig.vue
@description This component is lightweight builder containing only the necessary components to create the instances page.
@example
[
{
type: "card",
containerColumns: { pc: 12, tablet: 12, mobile: 12 },
widgets: [
{
type: "Title",
data : {
title: "dashboard_global_config",
type: "card"
},
},
{
type: "Templates",
data: {
title: "home_version",
subtitle: "home_all_features_available" if is_pro_version else "home_upgrade_pro",
subtitleColor: "success" is is_pro_version else "warning",
stat: "home_pro" if is_pro_version else "home_free",
iconName: "crown" if is_pro_version else "core",
},
},
],
},
];
@param {array} builder - Array of containers and widgets
*/
* @name Builder/GlobalConfig.vue
* @description This component is lightweight builder containing only the necessary components to create the instances page.
* @example
* [
* {
* type: "card",
* containerColumns: { pc: 12, tablet: 12, mobile: 12 },
* widgets: [
* {
* type: "Title",
* data : {
* title: "dashboard_global_config",
* type: "card"
* },
* },
* {
* type: "Templates",
* data: {
* title: "home_version",
* subtitle: "home_all_features_available" if is_pro_version else "home_upgrade_pro",
* subtitleColor: "success" is is_pro_version else "warning",
* stat: "home_pro" if is_pro_version else "home_free",
* iconName: "crown" if is_pro_version else "core",
* },
* },
* ],
* },
* ];
* @param {array} builder - Array of containers and widgets
*/
const props = defineProps({
builder: {

48
src/ui/client/dashboard/components/Builder/Home.vue
View file

@ -6,30 +6,30 @@ import Stat from "@components/Widget/Stat.vue";
import { useEqualStr } from "@utils/global.js";
/**
@name Builder/Home.vue
@description This component is lightweight builder containing only the necessary components to create the home page.
@example
[
{
type: "card",
link : "https://panel.bunkerweb.io/?utm_campaign=self&utm_source=ui"
containerColumns: { pc: 4, tablet: 6, mobile: 12 },
widgets: [
{
type: "Stat",
data: {
title: "home_version",
subtitle: "home_all_features_available" if is_pro_version else "home_upgrade_pro",
subtitleColor: "success" is is_pro_version else "warning",
stat: "home_pro" if is_pro_version else "home_free",
iconName: "crown" if is_pro_version else "core",
},
},
],
},
]
@param {array} builder - Array of containers and widgets
*/
* @name Builder/Home.vue
* @description This component is lightweight builder containing only the necessary components to create the home page.
*@example
* [
* {
* type: "card",
* link : "https://panel.bunkerweb.io/?utm_campaign=self&utm_source=ui"
* containerColumns: { pc: 4, tablet: 6, mobile: 12 },
* widgets: [
* {
* type: "Stat",
* data: {
* title: "home_version",
* subtitle: "home_all_features_available" if is_pro_version else "home_upgrade_pro",
* subtitleColor: "success" is is_pro_version else "warning",
* stat: "home_pro" if is_pro_version else "home_free",
* iconName: "crown" if is_pro_version else "core",
* },
* },
* ],
* },
* ]
* @param {array} builder - Array of containers and widgets
*/
const props = defineProps({
builder: {

54
src/ui/client/dashboard/components/Builder/Instances.vue
View file

@ -6,33 +6,33 @@ import Instance from "@components/Widget/Instance.vue";
import { useEqualStr } from "@utils/global.js";
/**
@name Builder/Instances.vue
@description This component is lightweight builder containing only the necessary components to create the instances page.
@example
[
{
type: "Instance",
data: {
details: [
{ key: <instances_hostname="hostname">, value: "www.example.com" },
{ key: <instances_method="method">, value: <dashboard_ui> or <dashboard_scheduler>...},
{ key: <instances_port="port">, value: "1084" },
{ key: <instances_status="status">, value: <instances_active="active"> or <instances_inactive="inactive"> },
],
status: "success",
title: "www.example.com",
buttons: [
{
text: <action_*>,
color: "edit",
size: "normal",
},
],
},
},
];
@param {array} builder - Array of containers and widgets
*/
* @name Builder/Instances.vue
* @description This component is lightweight builder containing only the necessary components to create the instances page.
** @example
* [
* {
* type: "Instance",
* data: {
* details: [
* { key: <instances_hostname="hostname">, value: "www.example.com" },
* { key: <instances_method="method">, value: <dashboard_ui> or <dashboard_scheduler>...},
* { key: <instances_port="port">, value: "1084" },
* { key: <instances_status="status">, value: <instances_active="active"> or <instances_inactive="inactive"> },
* ],
* status: "success",
* title: "www.example.com",
* buttons: [
* {
* text: <action_*>,
* color: "edit",
* size: "normal",
* },
* ],
* },
* },
*];
** @param {array} builder - Array of containers and widgets
*/
const props = defineProps({
builder: {

106
src/ui/client/dashboard/components/Builder/Jobs.vue
View file

@ -7,59 +7,59 @@ import Title from "@components/Widget/Title.vue";
import { useEqualStr } from "@utils/global.js";
/**
@name Builder/Jobs.vue
@description This component is lightweight builder containing only the necessary components to create the jobs page.
@example
[
{
"type": "card",
"containerColumns": {
"pc": 4,
"tablet": 6,
"mobile": 12
},
"widgets": [
{
"type": "table",
"data": {
"title": "jobs_table_title",
"minWidth": "lg",
"header": [
"jobs_table_name",
"jobs_table_plugin_id",
"jobs_table_interval",
"jobs_table_last_run",
"jobs_table_success",
"jobs_table_last_run_date",
"jobs_table_cache"
],
"positions": [
2,
2,
1,
1,
1,
3,
2
],
"items": [
[
{
"name": "anonymous-report",
"type": "Text",
"data": {
"text": "anonymous-report"
}
},
],
]
}
}
]
}
]
@param {array} builder - Array of containers and widgets
*/
** @name Builder/Jobs.vue
* @description This component is lightweight builder containing only the necessary components to create the jobs page.
* @example
* [
* {
* "type": "card",
* "containerColumns": {
* "pc": 4,
* "tablet": 6,
* "mobile": 12
* },
* "widgets": [
* {
* "type": "table",
* "data": {
* "title": "jobs_table_title",
* "minWidth": "lg",
* "header": [
* "jobs_table_name",
* "jobs_table_plugin_id",
* "jobs_table_interval",
* "jobs_table_last_run",
* "jobs_table_success",
* "jobs_table_last_run_date",
* "jobs_table_cache"
* ],
* "positions": [
* 2,
* 2,
* 1,
* 1,
* 1,
* 3,
* 2
* ],
* "items": [
* [
* {
* "name": "anonymous-report",
* "type": "Text",
* "data": {
* "text": "anonymous-report"
* }
* },
* ],
* ]
* }
* }
* ]
* }
* ]
* @param {array} builder - Array of containers and widgets
*/
const props = defineProps({
builder: {

72
src/ui/client/dashboard/components/Builder/Plugins.vue
View file

@ -9,42 +9,42 @@ import ButtonGroup from "@components/Widget/ButtonGroup.vue";
import { useEqualStr } from "@utils/global.js";
/**
@name Builder/PLugin.vue
@description This component is lightweight builder containing only the necessary components to create the plugins page.
@example
[
{
type: "card",
containerColumns: { pc: 12, tablet: 12, mobile: 12 },
widgets: [
{
type: "Title",
data : {
title: "dashboard_plugins",
type: "card"
},
},
{
type: "ListDetails",
data: {
text: "Plugin name",
popovers: [
{
text: "This is a popover text",
iconName: "info",
},
{
text: "This is a popover text",
iconName: "info",
},
],
},
},
],
},
];
@param {array} builder - Array of containers and widgets
*/
* @name Builder/PLugin.vue
* @description This component is lightweight builder containing only the necessary components to create the plugins page.
* @example
* [
* {
* type: "card",
* containerColumns: { pc: 12, tablet: 12, mobile: 12 },
* widgets: [
* {
* type: "Title",
* data : {
* title: "dashboard_plugins",
* type: "card"
* },
* },
* {
* type: "ListDetails",
* data: {
* text: "Plugin name",
* popovers: [
* {
* text: "This is a popover text",
* iconName: "info",
* },
* {
* text: "This is a popover text",
* iconName: "info",
* },
* ],
* },
* },
* ],
* },
* ];
* @param {array} builder - Array of containers and widgets
*/
const props = defineProps({
builder: {

59
src/ui/client/dashboard/components/Builder/Raw.vue
View file

@ -4,37 +4,37 @@ import Grid from "@components/Widget/Grid.vue";
import GridLayout from "@components/Widget/GridLayout.vue";
import Title from "@components/Widget/Title.vue";
import Subtitle from "@components/Widget/Subtitle.vue";
import Raw from "@components/Form/Raw.vue";
import Templates from "@components/Form/Templates.vue";
import ButtonGroup from "@components/Widget/ButtonGroup.vue";
import { useEqualStr } from "@utils/global.js";
/**
@name Builder/Raw.vue
@description This component is lightweight builder containing only the necessary components to create the raw page.
@example
[
{
type: "card",
containerColumns: { pc: 12, tablet: 12, mobile: 12 },
widgets: [
{
type: "Title",
data : {
title: "dashboard_global_config",
type: "card"
},
},
{
type: "Raw",
data: {
template: {},
},
},
],
},
];
@param {array} builder - Array of containers and widgets
*/
* @name Builder/Raw.vue
* @description This component is lightweight builder containing only the necessary components to create the raw page.
* @example
* [
* {
* type: "card",
* containerColumns: { pc: 12, tablet: 12, mobile: 12 },
* widgets: [
* {
* type: "Title",
* data : {
* title: "dashboard_global_config",
* type: "card"
* },
* },
* {
* type: "Raw",
* data: {
* template: {},
* },
* },
* ],
* },
* ];
** @param {array} builder - Array of containers and widgets
*/
const props = defineProps({
builder: {
@ -65,7 +65,10 @@ const props = defineProps({
v-if="useEqualStr(widget.type, 'Subtitle')"
v-bind="widget.data"
/>
<Raw v-if="useEqualStr(widget.type, 'Raw')" v-bind="widget.data" />
<Templates
v-if="useEqualStr(widget.type, 'Templates')"
v-bind="widget.data"
/>
<ButtonGroup
v-if="useEqualStr(widget.type, 'ButtonGroup')"
v-bind="widget.data"

29
src/ui/client/dashboard/components/Builder/Reports.vue
View file

@ -10,18 +10,23 @@ import MessageUnmatch from "@components/Message/Unmatch.vue";
import { useEqualStr } from "@utils/global.js";
/**
@name Builder/Reports.vue
@description This component is lightweight builder containing only the necessary components to create the reports page.
@example
[
{
type: "card",
gridLayoutClass: "transparent",
widgets: [{ type: "MessageUnmatch", data: { text: "reports_not_found" } }],
},
];
@param {array} builder - Array of containers and widgets
*/
* @name Builder/Reports.vue
* @description This component is lightweight builder containing only the necessary components to create the reports page.
* @example
* [
* {
* type: "card",
* gridLayoutClass: "transparent",
* widgets: [
* {
* type: "MessageUnmatch",
* data: { text: "reports_not_found" }
* }
* ],
* },
* ];
* @param {array} builder - Array of containers and widgets
*/
const props = defineProps({
builder: {

566
src/ui/client/dashboard/components/Builder/Services.vue
View file

@ -8,289 +8,289 @@ import Button from "@components/Widget/Button.vue";
import { useEqualStr } from "@utils/global.js";
/**
@name Builder/Services.vue
@description This component is lightweight builder containing only the necessary components to create the services page.
@example
[
{
"type": "card",
"containerColumns": {
"pc": 12,
"tablet": 12,
"mobile": 12
},
"widgets": [
{
"type": "Title",
"data": {
"title": "services_title"
}
},
{
"type": "Table",
"data": {
"title": "services_table_title",
"minWidth": "lg",
"header": [
"services_table_name",
"services_table_method",
"services_table_settings",
"services_table_manage",
"services_table_is_draft",
"services_table_delete"
],
"positions": [
2,
2,
2,
2,
2,
2
],
"items": [
[
{
"name": "app1.example.com",
"type": "Text",
"data": {
"text": "app1.example.com"
}
},
{
"method": "scheduler",
"type": "Text",
"data": {
"text": "scheduler"
}
},
{
"type": "Button",
"data": {
"id": "open-modal-settings-0",
"text": "settings",
"hideText": false,
" color": "info",
"size": "normal",
"iconName": "settings"
}
},
{
"type": "Button",
"data": {
"attrs": {
"data-server-name": "app1.example.com"
},
"id": "open-modal-manage-0",
"text": "manage",
"hideText": false,
" color": "green",
"size": "normal",
"iconName": "manage"
}
},
{
"type": "Button",
"data": {
"attrs": {
"data-server-name": "app1.example.com",
"data-is-draft": "no"
},
"id": "open-modal-draft-0",
"text": "online",
"hideText": false,
" color": "cyan",
"size": "normal",
"iconName": "online"
}
},
{
"type": "Button",
"data": {
"attrs": {
"data-server-name": "app1.example.com"
},
"id": "open-modal-delete-0",
"text": "delete",
"disabled": true,
"hideText": false,
" color": "red",
"size": "normal",
"iconName": "trash"
}
}
],
[
{
"name": "www.example.com",
"type": "Text",
"data": {
"text": "www.example.com"
}
},
{
"method": "scheduler",
"type": "Text",
"data": {
"text": "scheduler"
}
},
{
"type": "Button",
"data": {
"id": "open-modal-settings-1",
"text": "settings",
"hideText": false,
" color": "info",
"size": "normal",
"iconName": "settings"
}
},
{
"type": "Button",
"data": {
"attrs": {
"data-server-name": "www.example.com"
},
"id": "open-modal-manage-1",
"text": "manage",
"hideText": false,
" color": "green",
"size": "normal",
"iconName": "manage"
}
},
{
"type": "Button",
"data": {
"attrs": {
"data-server-name": "www.example.com",
"data-is-draft": "no"
},
"id": "open-modal-draft-1",
"text": "online",
"hideText": false,
" color": "cyan",
"size": "normal",
"iconName": "online"
}
},
{
"type": "Button",
"data": {
"attrs": {
"data-server-name": "www.example.com"
},
"id": "open-modal-delete-1",
"text": "delete",
"disabled": true,
"hideText": false,
" color": "red",
"size": "normal",
"iconName": "trash"
}
}
]
],
"filters": [
{
"filter": "table",
"filterName": "keyword",
"type": "keyword",
"value": "",
"keys": [
"name"
],
"field": {
"id": "services-keyword",
"value": "",
"type": "text",
"name": "services-keyword",
"label": "services_search",
"placeholder": "inp_keyword",
"isClipboard": false,
"popovers": [
{
"text": "services_search_desc",
"iconName": "info"
}
],
"columns": {
"pc": 3,
"tablet": 4,
"mobile": 12
}
}
},
{
"filter": "table",
"filterName": "method",
"type": "select",
"value": "all",
"keys": [
"method"
],
"field": {
"id": "services-methods",
"value": "all",
"values": [
"scheduler"
],
"name": "services-methods",
"onlyDown": true,
"label": "services_methods",
"popovers": [
{
"text": "services_methods_desc",
"iconName": "info"
}
],
"columns": {
"pc": 3,
"tablet": 4,
"mobile": 12
}
}
},
{
"filter": "table",
"filterName": "draft",
"type": "select",
"value": "all",
"keys": [
"draft"
],
"field": {
"id": "services-draft",
"value": "all",
"values": [
"all",
"online",
"draft"
],
"name": "services-draft",
"onlyDown": true,
"label": "services_draft",
"popovers": [
{
"text": "services_draft_desc",
"iconName": "info"
}
],
"columns": {
"pc": 3,
"tablet": 4,
"mobile": 12
}
}
}
]
}
}
]
}
]
@param {array} builder - Array of containers and widgets
*/
*@name Builder/Services.vue
* @description This component is lightweight builder containing only the necessary components to create the services page.
*@example
* [
* {
* "type": "card",
* "containerColumns": {
* "pc": 12,
* "tablet": 12,
* "mobile": 12
* },
* "widgets": [
* {
* "type": "Title",
* "data": {
* "title": "services_title"
* }
* },
* {
* "type": "Table",
* "data": {
* "title": "services_table_title",
* "minWidth": "lg",
* "header": [
* "services_table_name",
* "services_table_method",
* "services_table_settings",
* "services_table_manage",
* "services_table_is_draft",
* "services_table_delete"
* ],
* "positions": [
* 2,
* 2,
* 2,
* 2,
* 2,
* 2
* ],
* "items": [
* [
* {
* "name": "app1.example.com",
* "type": "Text",
* "data": {
* "text": "app1.example.com"
* }
* },
* {
* "method": "scheduler",
* "type": "Text",
* "data": {
* "text": "scheduler"
* }
* },
* {
* "type": "Button",
* "data": {
* "id": "open-modal-settings-0",
* "text": "settings",
* "hideText": false,
* " color": "info",
* "size": "normal",
* "iconName": "settings"
* }
* },
* {
* "type": "Button",
* "data": {
* "attrs": {
* "data-server-name": "app1.example.com"
* },
* "id": "open-modal-manage-0",
* "text": "manage",
* "hideText": false,
* " color": "green",
* "size": "normal",
* "iconName": "manage"
* }
* },
* {
* "type": "Button",
* "data": {
* "attrs": {
* "data-server-name": "app1.example.com",
* "data-is-draft": "no"
* },
* "id": "open-modal-draft-0",
* "text": "online",
* "hideText": false,
* " color": "cyan",
* "size": "normal",
* "iconName": "online"
* }
* },
* {
* "type": "Button",
* "data": {
* "attrs": {
* "data-server-name": "app1.example.com"
* },
* "id": "open-modal-delete-0",
* "text": "delete",
* "disabled": true,
* "hideText": false,
* " color": "red",
* "size": "normal",
* "iconName": "trash"
* }
* }
* ],
* [
* {
* "name": "www.example.com",
* "type": "Text",
* "data": {
* "text": "www.example.com"
* }
* },
* {
* "method": "scheduler",
* "type": "Text",
* "data": {
* "text": "scheduler"
* }
* },
* {
* "type": "Button",
* "data": {
* "id": "open-modal-settings-1",
* "text": "settings",
* "hideText": false,
* " color": "info",
* "size": "normal",
* "iconName": "settings"
* }
* },
* {
* "type": "Button",
* "data": {
* "attrs": {
* "data-server-name": "www.example.com"
* },
* "id": "open-modal-manage-1",
* "text": "manage",
* "hideText": false,
* " color": "green",
* "size": "normal",
* "iconName": "manage"
* }
* },
* {
* "type": "Button",
* "data": {
* "attrs": {
* "data-server-name": "www.example.com",
* "data-is-draft": "no"
* },
* "id": "open-modal-draft-1",
* "text": "online",
* "hideText": false,
* " color": "cyan",
* "size": "normal",
* "iconName": "online"
* }
* },
* {
* "type": "Button",
* "data": {
* "attrs": {
* "data-server-name": "www.example.com"
* },
* "id": "open-modal-delete-1",
* "text": "delete",
* "disabled": true,
* "hideText": false,
* " color": "red",
* "size": "normal",
* "iconName": "trash"
* }
* }
* ]
* ],
* "filters": [
* {
* "filter": "table",
* "filterName": "keyword",
* "type": "keyword",
* "value": "",
* "keys": [
* "name"
* ],
* "field": {
* "id": "services-keyword",
* "value": "",
* "type": "text",
* "name": "services-keyword",
* "label": "services_search",
* "placeholder": "inp_keyword",
* "isClipboard": false,
* "popovers": [
* {
* "text": "services_search_desc",
* "iconName": "info"
* }
* ],
* "columns": {
* "pc": 3,
* "tablet": 4,
* "mobile": 12
* }
* }
* },
* {
* "filter": "table",
* "filterName": "method",
* "type": "select",
* "value": "all",
* "keys": [
* "method"
* ],
* "field": {
* "id": "services-methods",
* "value": "all",
* "values": [
* "scheduler"
* ],
* "name": "services-methods",
* "onlyDown": true,
* "label": "services_methods",
* "popovers": [
* {
* "text": "services_methods_desc",
* "iconName": "info"
* }
* ],
* "columns": {
* "pc": 3,
* "tablet": 4,
* "mobile": 12
* }
* }
* },
* {
* "filter": "table",
* "filterName": "draft",
* "type": "select",
* "value": "all",
* "keys": [
* "draft"
* ],
* "field": {
* "id": "services-draft",
* "value": "all",
* "values": [
* "all",
* "online",
* "draft"
* ],
* "name": "services-draft",
* "onlyDown": true,
* "label": "services_draft",
* "popovers": [
* {
* "text": "services_draft_desc",
* "iconName": "info"
* }
* ],
* "columns": {
* "pc": 3,
* "tablet": 4,
* "mobile": 12
* }
* }
* }
* ]
* }
* }
* ]
* }
* ]
* @param {array} builder - Array of containers and widgets
*/
const props = defineProps({
builder: {

15
src/ui/client/dashboard/components/Builder/Setup.vue
View file

@ -5,13 +5,14 @@ import GridLayout from "@components/Widget/GridLayout.vue";
import { useEqualStr } from "@utils/global.js";
/**
@name Builder/Setup.vue
@description This component is lightweight builder containing only the necessary components to create the setup page.
@example
[
@param {array} builder - Array of containers and widgets
*/
* @name Builder/Setup.vue
* @description This component is lightweight builder containing only the necessary components to create the setup page.
* @example
*
*
*
*@param {array} builder - Array of containers and widgets
*/
const props = defineProps({
builder: {

62
src/ui/client/dashboard/components/Dashboard/Banner.vue
View file

@ -4,11 +4,11 @@ import { useBannerStore } from "@store/global.js";
import { bannerIndex } from "@utils/tabindex.js";
import { computed } from "vue";
/**
@name Dashboard/Banner.vue
@description This component is a banner that display news.
The banner will display news from the api if available, otherwise it will display default news.
*/
/**
* @name Dashboard/Banner.vue
*@description This component is a banner that display news.
* The banner will display news from the api if available, otherwise it will display default news.
*/
const bannerStore = useBannerStore();
@ -51,10 +51,10 @@ const banner = reactive({
});
/**
@name setupBanner
@description This function will try to retrieve banner news from the local storage, and in case it is not available or older than one hour, it will fetch the news from the api.
@returns {void}
*/
*@name setupBanner
* @description This function will try to retrieve banner news from the local storage, and in case it is not available or older than one hour, it will fetch the news from the api.
* @returns {void}
*/
function setupBanner() {
// Check if data, and if case, that data is not older than one hour
// Case it is, refetch
@ -98,10 +98,10 @@ function setupBanner() {
}
/**
@name runBanner
@description Run the banner animation to display all news at a regular interval.
@returns {void}
*/
* @name runBanner
* @description Run the banner animation to display all news at a regular interval.
* @returns {void}
*/
function runBanner() {
const nextDelay = 8000;
const transDuration = 1000;
@ -138,10 +138,10 @@ function runBanner() {
}
/**
@name observeBanner
@description Check if the banner is visible in the viewport and set the state in the global bannerStore to update related components.
@returns {void}
*/
* @name observeBanner
* @description Check if the banner is visible in the viewport and set the state in the global bannerStore to update related components.
** @returns {void}
*/
function observeBanner() {
const options = {
root: null,
@ -160,10 +160,10 @@ function observeBanner() {
}
/**
@name noTabindex
@description Stop highlighting a banner item that was focused with tabindex.
@returns {void}
*/
* @name noTabindex
* @description Stop highlighting a banner item that was focused with tabindex.
* @returns {void}
*/
function noTabindex() {
const bannerItems = document.querySelectorAll(".banner-item");
bannerItems.forEach((item) => {
@ -172,10 +172,10 @@ function noTabindex() {
}
/**
@name isTabindex
@description Highlighting a banner item that is focused with tabindex.
@returns {void}
*/
* @name isTabindex
* @description Highlighting a banner item that is focused with tabindex.
* @returns {void}
*/
function isTabindex() {
const activeElement = document.activeElement;
const bannerItems = document.querySelectorAll(".banner-item");
@ -193,12 +193,12 @@ function isTabindex() {
}
/**
@name isTabindex
@description Focus with tabindex break banner animation.
When a banner is focused, we need to add in front of the current banner the focus element.
And remove it when the focus is lost.
@returns {void}
*/
** @name isTabindex
** @description Focus with tabindex break banner animation.
* When a banner is focused, we need to add in front of the current banner the focus element.
* And remove it when the focus is lost.
* @returns {void}
*/
function handleTabIndex() {
// Get the active element after tabindex click
document.addEventListener("keyup", (e) => {

10
src/ui/client/dashboard/components/Dashboard/Feedback.vue
View file

@ -5,11 +5,11 @@ import { feedbackIndex } from "@utils/tabindex.js";
import { useBannerStore } from "@store/global.js";
import { onBeforeMount } from "vue";
/**
@name Dashboard/Feedback.vue
@description This component will display server feedbacks from the user.
This component is working with flash messages under the hood.
This will display an ephemeral on the bottom right of the page and a sidebar with all the feedbacks.
*/
** @name Dashboard/Feedback.vue
** @description This component will display server feedbacks from the user.
* This component is working with flash messages under the hood.
* This will display an ephemeral on the bottom right of the page and a sidebar with all the feedbacks.
*/
const feedback = reactive({
data: [],

10
src/ui/client/dashboard/components/Dashboard/Footer.vue
View file

@ -4,11 +4,11 @@ import { footerIndex } from "@utils/tabindex";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
/**
@name Dashboard/Footer.vue
@description This component is a footer that display essential links.
You have all the links to the main website, the documentation, the privacy policy, the blog, the license and the sitemap.
*/
/**
*@name Dashboard/Footer.vue
* @description This component is a footer that display essential links.
* You have all the links to the main website, the documentation, the privacy policy, the blog, the license and the sitemap.
*/
const items = [
{

8
src/ui/client/dashboard/components/Dashboard/Header.vue
View file

@ -1,10 +1,10 @@
<script setup>
import { reactive, onMounted, computed } from "vue";
/**
@name Dashboard/Header.vue
@description This component is a header displaying the current page endpoint.
*/
/**
* @name Dashboard/Header.vue
* @description This component is a header displaying the current page endpoint.
*/
const header = reactive({
splitPath: [],

24
src/ui/client/dashboard/components/Dashboard/LangSwitch.vue
View file

@ -2,12 +2,12 @@
import { onMounted, reactive } from "vue";
import { langIndex } from "@utils/tabindex.js";
/**
@name Dashboard/LangSwitch.vue
@description This component is a float element with a flag of the current language.
When clicked, it will display a list of available languages, clicking on one will change the language.
Your language isn't here ? You can contribute by following the part of the documentation about translations.
*/
/**
* @name Dashboard/LangSwitch.vue
* @description This component is a float element with a flag of the current language.
* When clicked, it will display a list of available languages, clicking on one will change the language.
* Your language isn't here ? You can contribute by following the part of the documentation about translations.
*/
const lang = reactive({
isOpen: false,
@ -15,12 +15,12 @@ const lang = reactive({
});
/**
@name updateLangStorage
@description This function will update the language in the session storage and reload the page.
On reload, we will retrieve the language from the session storage and set it.
@param {string} lang - The language to set.
@returns {void}
*/
* @name updateLangStorage
* @description This function will update the language in the session storage and reload the page.
* On reload, we will retrieve the language from the session storage and set it.
* @param {string} lang - The language to set.
* @returns {void}
*/
function updateLangStorage(lang) {
sessionStorage.setItem("lang", lang);
document.location.reload();

12
src/ui/client/dashboard/components/Dashboard/Layout.vue
View file

@ -9,12 +9,12 @@ import Header from "@components/Dashboard/Header.vue";
import Banner from "@components/Dashboard/Banner.vue";
import Feedback from "@components/Dashboard/Feedback.vue";
/**
@name Dashboard/Layout.vue
@description This component is a layout that wraps the main content of the dashboard.
It includes the header, the menu, the news, the language switcher, the loader, the banner and the footer.
The content part is a slot that can be filled with custom components or using the Builder.vue.
*/
/**
*@name Dashboard/Layout.vue
* @description This component is a layout that wraps the main content of the dashboard.
* It includes the header, the menu, the news, the language switcher, the loader, the banner and the footer.
* The content part is a slot that can be filled with custom components or using the Builder.vue.
*/
</script>
<template>

15
src/ui/client/dashboard/components/Dashboard/Loader.vue
View file

@ -5,9 +5,10 @@ import logo2 from "@assets/img/logo-menu-2.png";
// Change path on PROD removing '/' in order to get the right path
const logoMenu2 = logo2.substring(import.meta.env.DEV ? 0 : 1);
/**
@name Dashboard/Loader.vue
@description This component is a loader used to transition between pages.
*/
* @name Dashboard/Loader.vue
* @description This component is a loader used to transition between pages.
*
*/
const loader = reactive({
isActive: true,
@ -17,10 +18,10 @@ const logo = ref();
const logoContainer = ref();
/**
@name loading
@description This function will toggle the loading animation.
@returns {void}
*/
* @name loading
* @description This function will toggle the loading animation.
* @returns {void}
*/
function loading() {
// delay before stopping the loading
setTimeout(() => {

50
src/ui/client/dashboard/components/Dashboard/Menu.vue
View file

@ -11,11 +11,11 @@ import logo2 from "@assets/img/logo-menu-2.png";
const logoMenu = logo.substring(import.meta.env.DEV ? 0 : 1);
const logoMenu2 = logo2.substring(import.meta.env.DEV ? 0 : 1);
/**
@name Dashboard/Menu.vue
@description This component is a menu that display essential links.
You have all the links to the main pages, the plugins pages, the social links and the logout button.
*/
/**
* @name Dashboard/Menu.vue
* @description This component is a menu that display essential links.
* You have all the links to the main pages, the plugins pages, the social links and the logout button.
*/
// Use to update position when banner is visible or not
const bannerStore = useBannerStore();
@ -110,10 +110,10 @@ const menu = reactive({
});
/**
@name getDarkMode
@description Get the dark mode state from the session storage or the user's preferences.
@returns {void}
*/
* @name getDarkMode
* @description Get the dark mode state from the session storage or the user's preferences.
* @returns {void}
*/
function getDarkMode() {
let darkMode = false;
// Case on storage
@ -135,10 +135,10 @@ function getDarkMode() {
}
/**
@name switchMode
@description Switch between dark and light mode. Handle by a button.
@returns {void}
*/
* @name switchMode
** @description Switch between dark and light mode. Handle by a button.
** @returns {void}
*/
function switchMode() {
menu.darkMode = menu.darkMode ? false : true;
sessionStorage.setItem("mode", menu.darkMode ? "dark" : "light");
@ -146,10 +146,10 @@ function switchMode() {
}
/**
@name updateMode
@description Update the mode of the page.
@returns {void}
*/
* @name updateMode
* @description Update the mode of the page.
* @returns {void}
*/
function updateMode() {
try {
menu.darkMode
@ -159,19 +159,19 @@ function updateMode() {
}
/**
@name closeMenu
@description Close menu when we are on mobile device (else always visible).
@returns {void}
*/
* @name closeMenu
* @description Close menu when we are on mobile device (else always visible).
* @returns {void}
*/
function closeMenu() {
menu.isActive = false;
}
/**
@name closeMenu
@description Toggle menu when we are on mobile device (else always visible).
@returns {void}
*/
* @name closeMenu
* @description Toggle menu when we are on mobile device (else always visible).
* @returns {void}
*/
function toggleMenu() {
menu.isActive = menu.isActive ? false : true;
}

18
src/ui/client/dashboard/components/Dashboard/News.vue
View file

@ -3,11 +3,11 @@ import { onMounted, reactive } from "vue";
import { newsIndex } from "@utils/tabindex.js";
import { useBannerStore } from "@store/global.js";
/**
@name Dashboard/News.vue
@description This component will display news from BunkerWeb blog and allow users to subscribe to the newsletter.
Case the news API is not available, it will display a message.
*/
/**
** @name Dashboard/News.vue
** @description This component will display news from BunkerWeb blog and allow users to subscribe to the newsletter.
* Case the news API is not available, it will display a message.
*/
// Use to update position when banner is visible or not
const bannerStore = useBannerStore();
@ -19,10 +19,10 @@ const news = reactive({
});
/**
@name loadNews
@description Retrieve blog news from storage or fetch from the API.
@returns {void}
*/
* @name loadNews
** @description Retrieve blog news from storage or fetch from the API.
* @returns {void}
*/
function loadNews() {
// Check if data, and if case, that data is not older than one hour
// Case it is, refetch

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

@ -16,35 +16,36 @@ import { useCheckPluginsValidity } from "@utils/global.js";
import { v4 as uuidv4 } from "uuid";
/**
@name Form/Advanced.vue
@description This component is used to create a complete advanced form with plugin selection.
@example
template: [
{
columns: { pc: 6, tablet: 12, mobile: 12 },
id: "test-check",
value: "yes",
label: "Checkbox",
name: "checkbox",
required: true,
hideLabel: false,
headerClass: "text-red-500",
inpType: "checkbox",
},
{
id: "test-input",
value: "yes",
type: "text",
name: "test-input",
disabled: false,
required: true,
label: "Test input",
pattern: "(test)",
inpType: "input",
},
],
h
*/
* @name Form/Advanced.vue
* @description This component is used to create a complete advanced form with plugin selection.
* @example
* {
* template: [
* {
* columns: { pc: 6, tablet: 12, mobile: 12 },
* id: "test-check",
* value: "yes",
* label: "Checkbox",
* name: "checkbox",
* required: true,
* hideLabel: false,
* headerClass: "text-red-500",
* inpType: "checkbox",
* },
* {
* id: "test-input",
* value: "yes",
* type: "text",
* name: "test-input",
* disabled: false,
* required: true,
* label: "Test input",
* pattern: "(test)",
* inpType: "input",
* },
* ],
* }
*/
const advancedForm = useAdvancedForm();
@ -190,23 +191,23 @@ 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.
@returns {void}
*/
** @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.
** @returns {void}
*/
function filter(filterData) {
advancedForm.templateUIFormat = filterData;
updateStates();
}
/**
@name updateStates
@description Update some UI states, usually after a filter, a reload, a remount or a change in the template.
We will check to set the current plugins available and update the current plugin if needed.
@returns {void}
*/
** @name updateStates
** @description Update some UI states, usually after a filter, a reload, a remount or a change in the template.
* We will check to set the current plugins available and update the current plugin if needed.
** @returns {void}
*/
function updateStates() {
data.plugins = getPluginNames(advancedForm.templateUIFormat);
// Check after a filter if previous plugin is still in the list and if at least one plugin is available
@ -218,11 +219,11 @@ function updateStates() {
}
/**
@name setValidity
@description Check template settings and return if there is any error.
Error will disabled save button and display an error message.
@returns {void}
*/
* @name setValidity
* @description Check template settings and return if there is any error.
* Error will disabled save button and display an error message.
* @returns {void}
*/
function setValidity() {
const [isRegErr, isReqErr, settingErr, settingNameErr, pluginErr, id] =
useCheckPluginsValidity(advancedForm.templateBase);
@ -233,11 +234,11 @@ function setValidity() {
}
/**
@name getFirstPlugin
@description Get the first available plugin in the template.
@param {object} template - The template object.
@returns {string} - The first plugin name.
*/
** @name getFirstPlugin
** @description Get the first available plugin in the template.
** @param {object} template - The template object.
** @returns {string} - The first plugin name.
*/
function getFirstPlugin(template) {
try {
return template[0]["name"];
@ -247,11 +248,11 @@ function getFirstPlugin(template) {
}
/**
@name getPluginNames
@description Get the first available plugin in the template.
@param {object} template - The template object.
@returns {array} - The list of plugin names.
*/
** @name getPluginNames
** @description Get the first available plugin in the template.
** @param {object} template - The template object.
** @returns {array} - The list of plugin names.
*/
function getPluginNames(template) {
try {
const pluginNames = [];

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

@ -11,37 +11,39 @@ import { useCheckPluginsValidity } from "@utils/global.js";
import { useEasyForm } from "@store/form.js";
/**
@name Form/Easy.vue
@description This component is used to create a complete easy form with plugin selection.
@example
template: [
{
columns: { pc: 6, tablet: 12, mobile: 12 },
id: "test-check",
value: "yes",
label: "Checkbox",
name: "checkbox",
required: true,
hideLabel: false,
headerClass: "text-red-500",
inpType: "checkbox",
},
{
id: "test-input",
value: "yes",
type: "text",
name: "test-input",
disabled: false,
required: true,
label: "Test input",
pattern: "(test)",
inpType: "input",
},
],
@param {object} template - Template object with plugin and settings data.
@param {string} containerClass - Container
@param {object} columns - Columns object.
*/
* @name Form/Easy.vue
* @description This component is used to create a complete easy form with plugin selection.
* @example
* {
* template: [
* {
* columns: { pc: 6, tablet: 12, mobile: 12 },
* id: "test-check",
* value: "yes",
* label: "Checkbox",
* name: "checkbox",
* required: true,
* hideLabel: false,
* headerClass: "text-red-500",
* inpType: "checkbox",
* },
* {
* id: "test-input",
* value: "yes",
* type: "text",
* name: "test-input",
* disabled: false,
* required: true,
* label: "Test input",
* pattern: "(test)",
* inpType: "input",
* },
* ],
* }
** @param {object} template - Template object with plugin and settings data.
* @param {string} containerClass - Container
* @param {object} columns - Columns object.
*/
const easyForm = useEasyForm();
@ -80,11 +82,11 @@ const data = reactive({
});
/**
@name setValidity
@description Check template settings and return if there is any error.
Error will disabled save button and display an error message.
@returns {void}
*/
* @name setValidity
* @description Check template settings and return if there is any error.
* Error will disabled save button and display an error message.
* @returns {void}
*/
function setValidity() {
const [isRegErr, isReqErr, settingErr, settingNameErr, pluginErr, id] =
useCheckPluginsValidity(easyForm.templateUI);

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

@ -6,29 +6,29 @@ import Select from "@components/Forms/Field/Select.vue";
import Datepicker from "@components/Forms/Field/Datepicker.vue";
import Editor from "@components/Forms/Field/Editor.vue";
import { contentIndex } from "@utils/tabindex.js";
/**
@name Form/Fields.vue
@description This component wraps all available fields for a form.
@example
{
columns : {"pc": 6, "tablet": 12, "mobile": 12},
id:"test-check",
value: "yes",
label: "Checkbox",
name: "checkbox",
required: true,
hideLabel: false,
inpType: "checkbox",
headerClass: "text-red-500"
popovers : [
{
text: "This is a popover text",
iconName: "info",
},
]
}
@param {object} setting - Setting needed to render a field.
*/
/**
** @name Form/Fields.vue
** @description This component wraps all available fields for a form.
** @example
* {
* columns : {"pc": 6, "tablet": 12, "mobile": 12},
* id:"test-check",
* value: "yes",
* label: "Checkbox",
* name: "checkbox",
* required: true,
* hideLabel: false,
* inpType: "checkbox",
* headerClass: "text-red-500"
* popovers : [
* {
* text: "This is a popover text",
* iconName: "info",
* },
* ]
* }
** @param {object} setting - Setting needed to render a field.
*/
const props = defineProps({
// id && value && method

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

@ -10,20 +10,20 @@ import { v4 as uuidv4 } from "uuid";
import { useRawForm } from "@store/form.js";
/**
@name Form/Raw.vue
@description This component is used to create a complete raw form with settings as JSON format.
@example
{
"IS_LOADING": "no",
"NGINX_PREFIX": "/etc/nginx/",
"HTTP_PORT": "8080",
"HTTPS_PORT": "8443",
"MULTISITE": "yes"
}
@param {object} template - Template object with plugin and settings data.
@param {string} containerClass - Container
@param {object} columns - Columns object.
*/
** @name Form/Raw.vue
** @description This component is used to create a complete raw form with settings as JSON format.
** @example
* {
* "IS_LOADING": "no",
* "NGINX_PREFIX": "/etc/nginx/",
* "HTTP_PORT": "8080",
* "HTTPS_PORT": "8443",
* "MULTISITE": "yes"
* }
** @param {object} template - Template object with plugin and settings data.
** @param {string} containerClass - Container
** @param {object} columns - Columns object.
*/
const rawForm = useRawForm();
@ -51,11 +51,11 @@ const data = reactive({
});
/**
@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}
*/
** @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}
*/
function updateRaw(v) {
// Transform to a possible valid JSON
rawForm.setRawData(v, true);
@ -95,13 +95,13 @@ function updateRaw(v) {
}
/**
@name json2raw
@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
@returns {string} - The raw string
*/
** @name json2raw
** @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
** @returns {string} - The raw string
*/
function json2raw(json) {
let dataStr = JSON.stringify(json);
// Remove first and last curly brackets

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

@ -10,21 +10,21 @@ import Easy from "@components/Form/Easy.vue";
import { v4 as uuidv4 } from "uuid";
/**
@name Form/Templates.vue
@description This component is used to create a complete settings form with all modes (advanced, raw, easy).
@example
const data = {
advanced : {
default : [{SETTING_1}, {SETTING_2}...],
low : [{SETTING_1}, {SETTING_2}...],
},
easy : {
default : [...],
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).
*/
** @name Form/Templates.vue
** @description This component is used to create a complete settings form with all modes (advanced, raw, easy).
** @example
* {
* advanced : {
* default : [{SETTING_1}, {SETTING_2}...],
* low : [{SETTING_1}, {SETTING_2}...],
* },
* easy : {
* default : [...],
* 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).
*/
const props = defineProps({
templates: {
@ -78,19 +78,19 @@ const data = reactive({
});
/**
@name getFirstTemplateName
@description Get the first template name from the first mode.
@returns {string} - The first template name
*/
** @name getFirstTemplateName
** @description Get the first template name from the first mode.
** @returns {string} - The first template name
*/
function getFirstTemplateName() {
return Object.keys(props.templates[data.currModeName])[0];
}
/**
@name getFirstTemplateName
@description Get the first mode name from the first key in props.templates dict.
@returns {string} - The first mode name
*/
** @name getFirstTemplateName
** @description Get the first mode name from the first key in props.templates dict.
** @returns {string} - The first mode name
*/
function getFirstModeName() {
// Get first key in props.templates dict
return Object.keys(props.templates)[0];

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

@ -1,18 +1,18 @@
<script setup>
/**
@name Forms/Error/Dropdown.vue
@description This component is used to display a feedback message on a dropdown field.
It is used with /Forms/Field components.
@example
{
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
*/
/**
* @name Forms/Error/Dropdown.vue
* @description This component is used to display a feedback message on a dropdown field.
* It is used with /Forms/Field components.
* @example
* {
* 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
*/
const props = defineProps({
isValid: {

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

@ -1,18 +1,18 @@
<script setup>
/**
@name Forms/Error/Field.vue
@description This component is used to display a feedback message to user when a field is invalid.
It is used with /Forms/Field components.
@example
{
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
*/
/**
* @name Forms/Error/Field.vue
* @description This component is used to display a feedback message to user when a field is invalid.
* It is used with /Forms/Field components.
* @example
* {
* 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
*/
const props = defineProps({
isValid: {

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

@ -5,23 +5,23 @@ import { useClipboard } from "@vueuse/core";
import { useUUID } from "@utils/global.js";
/**
@name Forms/Feature/Clipboard.vue
@description This component can be add to some fields to allow to copy the value of the field.
Additionnal clipboardClass and copyClass can be added to fit the parent container.
@example
{
id: 'test-input',
isClipboard: true,
valueToCopy: 'yes',
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.
*/
* @name Forms/Feature/Clipboard.vue
* @description This component can be add to some fields to allow to copy the value of the field.
* Additionnal clipboardClass and copyClass can be added to fit the parent container.
* @example
* {
* id: 'test-input',
* isClipboard: true,
* valueToCopy: 'yes',
* 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.
*/
const { text, copy, copied, isSupported } = useClipboard({ legacy: true });

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

@ -6,45 +6,45 @@ import Header from "@components/Forms/Header/Field.vue";
import ErrorField from "@components/Forms/Error/Field.vue";
import { useUUID } from "@utils/global.js";
/**
@name Forms/Field/Checkbox.vue
@description This component is used to create a complete checkbox field input with error handling and label.
We can also add popover to display more information.
It is mainly use in forms.
@example
{
columns : {"pc": 6, "tablet": 12, "mobile": 12},
id:"test-check",
value: "yes",
label: "Checkbox",
name: "checkbox",
required: true,
hideLabel: false,
inpType: "checkbox",
headerClass: "text-red-500"
popovers : [
{
text: "This is a popover text",
iconName: "info",
},
]
}
@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
*/
/**
* @name Forms/Field/Checkbox.vue
* @description This component is used to create a complete checkbox field input with error handling and label.
* We can also add popover to display more information.
* It is mainly use in forms.
* @example
* {
* columns : {"pc": 6, "tablet": 12, "mobile": 12},
* id:"test-check",
* value: "yes",
* label: "Checkbox",
* name: "checkbox",
* required: true,
* hideLabel: false,
* inpType: "checkbox",
* headerClass: "text-red-500"
* popovers : [
* {
* text: "This is a popover text",
* iconName: "info",
* },
* ]
* }
* @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({
// id && value && method
@ -133,11 +133,11 @@ const checkbox = reactive({
const emits = defineEmits(["inp"]);
/**
@name updateValue
@description This will convert the boolean checkbox value to a "yes" or "no" string value.
We will check the validity of the checkbox too.
@returns {string} - The new string value of the checkbox 'yes' or 'no'
*/
* @name updateValue
* @description This will convert the boolean checkbox value to a "yes" or "no" string value.
* We will check the validity of the checkbox too.
* @returns {string} - The new string value of the checkbox 'yes' or 'no'
*/
function updateValue() {
checkbox.value = checkbox.value === "yes" ? "no" : "yes";
checkbox.isValid = checkboxEl.value.checkValidity();

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

@ -17,48 +17,49 @@ import ErrorDropdown from "@components/Forms/Error/Dropdown.vue";
import { useUUID } from "@utils/global.js";
/**
@name Forms/Field/Combobox.vue
@description This component is used to create a complete combobox field input with error handling and label.
We can be more precise by adding values that need to be selected to be valid.
We can also add popover to display more information.
@example
{
id: 'test-input',
value: 'yes',
values : ['yes', 'no'],
name: 'test-input',
disabled: false,
required: true,
requiredValues : ['no'], // need required to be checked
label: 'Test select',
inpType: "select",
popovers : [
{
text: "This is a popover text",
iconName: "info",
},]
}
@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=""] - Attribut 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
*/
* @name Forms/Field/Combobox.vue
* @description This component is used to create a complete combobox field input with error handling and label.
* We can be more precise by adding values that need to be selected to be valid.
* We can also add popover to display more information.
* @example
* {
* id: 'test-input',
* value: 'yes',
* values : ['yes', 'no'],
* name: 'test-input',
* disabled: false,
* required: true,
* requiredValues : ['no'], // need required to be checked
* label: 'Test select',
* inpType: "select",
* popovers : [
* {
* text: "This is a popover text",
* iconName: "info",
* },
* ]
* }
* @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=""] - Attribut 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({
// id && value && method
@ -201,10 +202,10 @@ const selectWidth = ref("");
const selectDropdown = ref();
/**
@name toggleSelect
@description This will toggle the custom select dropdown component.
@returns {void}
*/
* @name toggleSelect
* @description This will toggle the custom select dropdown component.
* @returns {void}
*/
function toggleSelect() {
select.isOpen = select.isOpen ? false : true;
// Position dropdown relative to btn on open on fixed position
@ -251,21 +252,21 @@ function toggleSelect() {
}
/**
@name closeSelect
@description This will close the custom select dropdown component.
@returns {void}
*/
* @name closeSelect
* @description This will close the custom select dropdown component.
* @returns {void}
*/
function closeSelect() {
select.isOpen = false;
}
/**
@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.
@returns {string} - The new value of the select
*/
* @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.
* @returns {string} - The new value of the select
*/
function changeValue(newValue) {
// Allow on template to switch from prop value to component own value
// Then send the new value to parent
@ -283,12 +284,12 @@ 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}
*/
* @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}
*/
function closeOutside(e) {
try {
if (e.target !== selectBtn.value && e.target !== inputEl.value) {
@ -300,11 +301,11 @@ 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}
*/
* @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}
*/
function closeScroll(e) {
if (!e.target) return;
// Case not a DOM element (like the document itself)
@ -319,23 +320,23 @@ 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}
*/
* @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}
*/
function closeEscape(e) {
if (e.key !== "Escape") return;
select.isOpen = false;
}
/**
@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}
*/
* @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}
*/
function closeTab(e) {
if (e.key !== "Tab" && e.key !== "Shift-Tab") return;
setTimeout(() => {

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

@ -17,48 +17,48 @@ import flatpickr from "flatpickr";
import "@assets/css/flatpickr.min.css";
import "@assets/css/flatpickr.dark.min.css";
/**
@name Forms/Field/Datepicker.vue
@description This component is used to create a complete datepicker field input with error handling and label.
You can define a default date, a min and max date, and a format.
We can also add popover to display more information.
It is mainly use in forms.
@example
{
id: 'test-date',
columns : {"pc": 6, "tablet": 12, "mobile": 12},
disabled: false,
required: true,
value: 1735682600000,
minDate: 1735682600000,
maxDate: 1735689600000,
inpClass: "text-center",
inpType : ""
popovers : [
{
text: "This is a popover text",
iconName: "info",
},
],
}
@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 {number<timestamp>} [value=""] - Default date when instanciate
@param {number<timestamp>} [minDate=""] - Impossible to pick a date before this date.
@param {number<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
*/
/**
* @name Forms/Field/Datepicker.vue
* @description This component is used to create a complete datepicker field input with error handling and label.
* You can define a default date, a min and max date, and a format.
* We can also add popover to display more information.
* It is mainly use in forms.
* @example
* {
* id: 'test-date',
* columns : {"pc": 6, "tablet": 12, "mobile": 12},
* disabled: false,
* required: true,
* value: 1735682600000,
* minDate: 1735682600000,
* maxDate: 1735689600000,
* inpClass: "text-center",
* inpType : ""
* popovers : [
* {
* text: "This is a popover text",
* iconName: "info",
* },
* ],
* }
* @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 {number<timestamp>} [value=""] - Default date when instanciate
* @param {number<timestamp>} [minDate=""] - Impossible to pick a date before this date.
* @param {number<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({
// id && type && disabled && required && value
@ -165,12 +165,12 @@ const picker = reactive({
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}
*/
* @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}
*/
function setMonthSelect(calendarEl, id) {
// Hide default select and options
const defaultSelect = calendarEl.querySelector(
@ -243,12 +243,12 @@ 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}
*/
* @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}
*/
function setPickerAtt(calendarEl, id = false) {
// change error non-standard attributes
const inps = calendarEl.querySelectorAll(
@ -279,15 +279,15 @@ function setPickerAtt(calendarEl, id = false) {
}
/**
@name handleEvents
@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}
*/
* @name handleEvents
* @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}
*/
function handleEvents(calendarEl, id, datepicker) {
calendarEl.addEventListener("click", (e) => {
// Close dropdown month select if click outside
@ -502,13 +502,13 @@ 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}
*/
* @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}
*/
function toggleSelect(calendar, id, e) {
if (e.target.hasAttribute("data-months-select")) {
const optCtnr = calendar.querySelector(`#${id}-custom`);
@ -521,13 +521,13 @@ 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}
*/
* @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}
*/
function closeSelectByDefault(calendar, id, e) {
if (!e.target.hasAttribute("data-months-select")) {
const optCtnr = calendar.querySelector(`#${id}-custom`);
@ -539,14 +539,14 @@ 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}
*/
* @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}
*/
function updateMonth(calendar, id, e, datepicker) {
if (e.target.hasAttribute("data-month")) {
// Close dropdown
@ -579,12 +579,12 @@ 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}
*/
* @name updateIndex
* @description Update the tabindex on the calendar element.
* @param {element} calendarEl - The calendar element.
* @param {string} target - The event target.
* @returns {void}
*/
function updateIndex(calendarEl, target) {
if (target.hasAttribute("tabindex")) {
calendarEl.querySelectorAll("[data-tabindex-active]").forEach((el) => {
@ -596,12 +596,12 @@ 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}
*/
* @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}
*/
function setIndex(calendarEl, tabindex) {
try {
const days = calendarEl.querySelectorAll(".flatpickr-day");

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

@ -20,40 +20,40 @@ import "@assets/script/editor/theme-dracula.js";
import "@assets/script/editor/theme-dawn.js";
/**
@name Forms/Field/Editor.vue
@description This component is used to create a complete editor field with error handling and label.
We can also add popover to display more information.
It is mainly use in forms.
@example
{
id: "test-editor",
value: "yes",
name: "test-editor",
disabled: false,
required: true,
pattern: "(test)",
label: "Test editor",
tabId: "1",
columns: { pc: 12, tablet: 12, mobile: 12 },
};
@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} label
@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
*/
* @name Forms/Field/Editor.vue
* @description This component is used to create a complete editor field with error handling and label.
* We can also add popover to display more information.
* It is mainly use in forms.
* @example
* {
* id: "test-editor",
* value: "yes",
* name: "test-editor",
* disabled: false,
* required: true,
* pattern: "(test)",
* label: "Test editor",
* tabId: "1",
* columns: { pc: 12, tablet: 12, mobile: 12 },
* };
* @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} label
* @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({
// id && value && method
@ -278,10 +278,10 @@ class Editor {
}
/**
@name removeErrCSS
@description Remove useless CSS from the editor to avoid accessibility issues.
@returns {void}
*/
* @name removeErrCSS
* @description Remove useless CSS from the editor to avoid accessibility issues.
* @returns {void}
*/
function removeErrCSS() {
setTimeout(() => {
try {
@ -306,10 +306,10 @@ function removeErrCSS() {
}
/**
@name setEditorAttrs
@description Override editor attributes by adding or deleting some for better accessibility.
@returns {void}
*/
* @name setEditorAttrs
* @description Override editor attributes by adding or deleting some for better accessibility.
* @returns {void}
*/
function setEditorAttrs() {
// Add tabindex to editor
try {

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

@ -15,51 +15,51 @@ import Clipboard from "@components/Forms/Feature/Clipboard.vue";
import { useUUID } from "@utils/global.js";
/**
@name Forms/Field/Input.vue
@description This component is used to create a complete input field input with error handling and label.
We can add a clipboard button to copy the input value.
We can also add a password button to show the password.
We can also add popover to display more information.
It is mainly use in forms.
@example
{
id: 'test-input',
value: 'yes',
type: "text",
name: 'test-input',
disabled: false,
required: true,
label: 'Test input',
pattern : "(test)",
inpType: "input",
popovers : [
{
text: "This is a popover text",
iconName: "info",
},
],
}
@param {string} [id=uuidv4()] - Unique id
@param {string} type - 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} label
@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
*/
* @name Forms/Field/Input.vue
* @description This component is used to create a complete input field input with error handling and label.
* We can add a clipboard button to copy the input value.
* We can also add a password button to show the password.
* We can also add popover to display more information.
* It is mainly use in forms.
* @example
* {
* id: 'test-input',
* value: 'yes',
* type: "text",
* name: 'test-input',
* disabled: false,
* required: true,
* label: 'Test input',
* pattern : "(test)",
* inpType: "input",
* popovers : [
* {
* text: "This is a popover text",
* iconName: "info",
* },
* ],
* }
* @param {string} [id=uuidv4()] - Unique id
* @param {string} type - 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} label
* @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({
// id && value && method

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

@ -18,42 +18,43 @@ import Icons from "@components/Widget/Icons.vue";
import ErrorDropdown from "@components/Forms/Error/Dropdown.vue";
/**
@name Forms/Field/List.vue
@description This component is used display list of values in a dropdown, remove or add an item in an easy way.
We can also add popover to display more information.
@example
{
id: 'test-input',
value: 'yes no maybe',
name: 'test-list',
label: 'Test list',
inpType: "list",
popovers : [
{
text: "This is a popover text",
iconName: "info",
},]
}
@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
*/
* @name Forms/Field/List.vue
* @description This component is used display list of values in a dropdown, remove or add an item in an easy way.
* We can also add popover to display more information.
* @example
* {
* id: 'test-input',
* value: 'yes no maybe',
* name: 'test-list',
* label: 'Test list',
* inpType: "list",
* popovers : [
* {
* text: "This is a popover text",
* iconName: "info",
* },
* ]
* }
* @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({
// id && value && method
@ -194,10 +195,10 @@ const selectWidth = ref("");
const selectDropdown = ref();
/**
@name openSelect
@description Open select dropdown, calculate the dropdown position and update it if needed.
@returns {void}
*/
* @name openSelect
* @description Open select dropdown, calculate the dropdown position and update it if needed.
* @returns {void}
*/
function openSelect() {
inp.isOpen = true;
// Reset input value
@ -237,12 +238,12 @@ 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}
*/ function closeOutside(e) {
* @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}
*/ function closeOutside(e) {
if (
e.target.hasAttribute("data-select-item") ||
e.target.hasAttribute("data-delete-entry")
@ -258,11 +259,11 @@ 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}
*/
* @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}
*/
function closeScroll(e) {
if (!e.target) return;
// Case not a DOM element (like the document itself)
@ -277,23 +278,23 @@ 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}
*/
* @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}
*/
function closeEscape(e) {
if (e.key !== "Escape") return;
inp.isOpen = false;
}
/**
@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}
*/
* @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}
*/
function closeTab(e) {
if (e.key !== "Tab" && e.key !== "Shift-Tab") return;
setTimeout(() => {
@ -309,11 +310,11 @@ function closeTab(e) {
}
/**
@name addEntry
@description When clicking add entry or key "Enter", will add the current input value to list.
@param {e} e - The event object.
@returns {void}
*/
* @name addEntry
* @description When clicking add entry or key "Enter", will add the current input value to list.
* @param {e} e - The event object.
* @returns {void}
*/
function addEntry(e) {
// check if keyboard event
if (e.key && e.key !== "Enter") return;
@ -330,11 +331,11 @@ function addEntry(e) {
}
/**
@name deleteValue
@description Delete a value from the list.
@param {string} value - The value to delete.
@returns {void}
*/ function deleteValue(value) {
* @name deleteValue
* @description Delete a value from the list.
* @param {string} value - The value to delete.
* @returns {void}
*/ function deleteValue(value) {
inp.value = inp.value
.split(props.separator)
.filter((val) => val !== value)

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

@ -15,49 +15,50 @@ import ErrorField from "@components/Forms/Error/Field.vue";
import { useUUID } from "@utils/global";
/**
@name Forms/Field/Select.vue
@description This component is used to create a complete select field input with error handling and label.
We can be more precise by adding values that need to be selected to be valid.
We can also add popover to display more information.
It is mainly use in forms.
@example
{
id: 'test-input',
value: 'yes',
values : ['yes', 'no'],
name: 'test-input',
disabled: false,
required: true,
requiredValues : ['no'], // need required to be checked
label: 'Test select',
inpType: "select",
popovers : [
{
text: "This is a popover text",
iconName: "info",
},]
}
@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=""] - Attribut 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
*/
* @name Forms/Field/Select.vue
* @description This component is used to create a complete select field input with error handling and label.
* We can be more precise by adding values that need to be selected to be valid.
* We can also add popover to display more information.
* It is mainly use in forms.
* @example
* {
* id: 'test-input',
* value: 'yes',
* values : ['yes', 'no'],
* name: 'test-input',
* disabled: false,
* required: true,
* requiredValues : ['no'], // need required to be checked
* label: 'Test select',
* inpType: "select",
* popovers : [
* {
* text: "This is a popover text",
* iconName: "info",
* },
* ]
* }
* @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=""] - Attribut 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({
// id && value && method
@ -181,10 +182,10 @@ const selectWidth = ref("");
const selectDropdown = ref();
/**
@name toggleSelect
@description This will toggle the custom select dropdown component.
@returns {void}
*/
* @name toggleSelect
* @description This will toggle the custom select dropdown component.
* @returns {void}
*/
function toggleSelect() {
select.isOpen = select.isOpen ? false : true;
// Check if parent has overflow
@ -228,20 +229,20 @@ function toggleSelect() {
}
/**
@name closeSelect
@description This will close the custom select dropdown component.
@returns {void}
*/
* @name closeSelect
* @description This will close the custom select dropdown component.
* @returns {void}
*/
function closeSelect() {
select.isOpen = false;
}
/**
@name changeValue
@description This will change the value of the select when a new value is selected from dropdown button.
* @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.
@returns {string} - The new value of the select
* @param {string} newValue - The new value to set to the select.
* @returns {string} - The new value of the select
*/
function changeValue(newValue) {
// Allow on template to switch from prop value to component own value
@ -260,12 +261,12 @@ 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}
*/
* @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}
*/
function closeOutside(e) {
try {
if (e.target !== selectBtn.value) {
@ -277,11 +278,11 @@ 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}
*/
* @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}
*/
function closeScroll(e) {
if (!e.target) return;
// Case not a DOM element (like the document itself)
@ -292,11 +293,11 @@ 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}
*/
* @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}
*/
function closeEscape(e) {
if (e.key !== "Escape") return;
@ -304,12 +305,12 @@ 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}
*/
* @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}
*/
function closeTab(e) {
if (e.key !== "Tab" && e.key !== "Shift-Tab") return;
setTimeout(() => {

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

@ -1,164 +1,156 @@
<script setup>
import {
reactive,
defineProps,
defineEmits,
watch,
computed,
onMounted,
} from "vue";
import { reactive, defineProps, defineEmits } from "vue";
import { contentIndex } from "@utils/tabindex.js";
import ButtonGroup from "@components/Widget/ButtonGroup.vue";
import Button from "@components/Widget/Button.vue";
import Fields from "@components/Form/Fields.vue";
import Subtitle from "@components/Widget/Subtitle.vue";
import Container from "@components/Widget/Container.vue";
/**
@name Forms/Group/Multiple.vue
@description This Will regroup all multiples settings with add and remove logic.
This component under the hood is rendering default fields but by group with possibility to add or remove a multiple group.
@example
{
"columns": {"pc": 6, "tablet": 12, "mobile": 12},
"multiples": {
"reverse-proxy": {
"0": {
"REVERSE_PROXY_HOST": {
"context": "multisite",
"default": "",
"help": "Full URL of the proxied resource (proxy_pass).",
"id": "reverse-proxy-host",
"label": "Reverse proxy host",
"regex": "^.*$",
"type": "text",
"multiple": "reverse-proxy",
"pattern": "^.*$",
"inpType": "input",
"name": "Reverse proxy host",
"columns": {
"pc": 4,
"tablet": 6,
"mobile": 12
},
"disabled": false,
"value": "service",
"popovers": [
{
"iconName": "disk",
"text": "inp_popover_multisite"
},
{
"iconName": "info",
"text": "Full URL of the proxied resource (proxy_pass)."
}
],
"containerClass": "z-26",
"method": "ui"
},
"REVERSE_PROXY_KEEPALIVE": {
"context": "multisite",
"default": "no",
"help": "Enable or disable keepalive connections with the proxied resource.",
"id": "reverse-proxy-keepalive",
"label": "Reverse proxy keepalive",
"regex": "^(yes|no)$",
"type": "check",
"multiple": "reverse-proxy",
"pattern": "^(yes|no)$",
"inpType": "checkbox",
"name": "Reverse proxy keepalive",
"columns": {
"pc": 4,
"tablet": 6,
"mobile": 12
},
"disabled": false,
"value": "no",
"popovers": [
{
"iconName": "disk",
"text": "inp_popover_multisite"
},
{
"iconName": "info",
"text": "Enable or disable keepalive connections with the proxied resource."
}
],
"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"
},
},
}
}
}
},
@param {object<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
*/
* @name Forms/Group/Multiple.vue
* @description This Will regroup all multiples settings with add and remove logic.
* This component under the hood is rendering default fields but by group with possibility to add or remove a multiple group.
* @example
* {
* "columns": {"pc": 6, "tablet": 12, "mobile": 12},
* "multiples": {
* "reverse-proxy": {
* "0": {
* "REVERSE_PROXY_HOST": {
* "context": "multisite",
* "default": "",
* "help": "Full URL of the proxied resource (proxy_pass).",
* "id": "reverse-proxy-host",
* "label": "Reverse proxy host",
* "regex": "^.*$",
* "type": "text",
* "multiple": "reverse-proxy",
* "pattern": "^.*$",
* "inpType": "input",
* "name": "Reverse proxy host",
* "columns": {
* "pc": 4,
* "tablet": 6,
* "mobile": 12
* },
* "disabled": false,
* "value": "service",
* "popovers": [
* {
* "iconName": "disk",
* "text": "inp_popover_multisite"
* },
* {
* "iconName": "info",
* "text": "Full URL of the proxied resource (proxy_pass)."
* }
* ],
* "containerClass": "z-26",
* "method": "ui"
* },
* "REVERSE_PROXY_KEEPALIVE": {
* "context": "multisite",
* "default": "no",
* "help": "Enable or disable keepalive connections with the proxied resource.",
* "id": "reverse-proxy-keepalive",
* "label": "Reverse proxy keepalive",
* "regex": "^(yes|no)$",
* "type": "check",
* "multiple": "reverse-proxy",
* "pattern": "^(yes|no)$",
* "inpType": "checkbox",
* "name": "Reverse proxy keepalive",
* "columns": {
* "pc": 4,
* "tablet": 6,
* "mobile": 12
* },
* "disabled": false,
* "value": "no",
* "popovers": [
* {
* "iconName": "disk",
* "text": "inp_popover_multisite"
* },
* {
* "iconName": "info",
* "text": "Enable or disable keepalive connections with the proxied resource."
* }
* ],
* "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"
* },
* },
* }
* }
* }
* },
* @param {object<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({
// id && value && method
@ -216,11 +208,11 @@ const buttonDelete = {
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
@returns {object} - Return delete button data
*/
* @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
* @returns {object} - Return delete button data
*/
function setDeleteState(group) {
// Loop on group keys and check if at least one input is disabled
let isDisabled = false;
@ -236,42 +228,42 @@ 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}
*/
* @name setInvisible
* @description Will set a multiple group as invisible.
* @param {string|number} id - The multiple group with all settings
* @returns {void}
*/
function setInvisible(id) {
multiples.invisible.push(id);
}
/**
@name delInvisible
@description Will remove a multiple group from invisible list.
@param {string|number} id - The multiple group with all settings
@returns {void}
*/
* @name delInvisible
* @description Will remove a multiple group from invisible list.
* @param {string|number} id - The multiple group with all settings
* @returns {void}
*/
function delInvisible(id) {
multiples.invisible = multiples.invisible.filter((v) => v !== id);
}
/**
@name toggleVisible
@description Will toggle a multiple group visibility.
@param {string|number} id - The multiple group with all settings
@returns {void}
*/
* @name toggleVisible
* @description Will toggle a multiple group visibility.
* @param {string|number} id - The multiple group with all settings
* @returns {void}
*/
function toggleVisible(id) {
multiples.invisible.includes(id) ? delInvisible(id) : setInvisible(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}
*/
* @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}
*/
function delGroup(multName, groupName) {
emits("delete", multName, groupName);
}

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

@ -2,32 +2,32 @@
import { defineProps, onMounted, ref } from "vue";
import PopoverGroup from "@components/Widget/PopoverGroup.vue";
/**
@name Forms/Header/Field.vue
@description This component is used with field in order to link a label to field type.
We can add popover to display more information.
Always use with field component.
@example
{
label: 'Test',
version : "0.1.0",
name: 'test-input',
required: true,
popovers : [
{
text: "This is a popover text",
iconName: "info",
},
],
}
@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=""]
*/
/**
* @name Forms/Header/Field.vue
* @description This component is used with field in order to link a label to field type.
* We can add popover to display more information.
* Always use with field component.
* @example
* {
* label: 'Test',
* version : "0.1.0",
* name: 'test-input',
* required: true,
* popovers : [
* {
* text: "This is a popover text",
* iconName: "info",
* },
* ],
* }
* @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({
label: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Box.vue
@description This component is a svg icon representing box.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Box.vue
* @description This component is a svg icon representing box.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Carton.vue
@description This component is a svg icon representing carton box.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Carton.vue
* @description This component is a svg icon representing carton box.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,17 +1,17 @@
<script setup>
import { useUUID } from "@utils/global.js";
import { defineProps, reactive, onBeforeMount } from "vue";
/**
@name Icons/Check.vue
@description This component is a svg icon representing a check mark.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Check.vue
* @description This component is a svg icon representing a check mark.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,17 +1,17 @@
<script setup>
import { defineProps, reactive, onBeforeMount } from "vue";
import { useUUID } from "@utils/global.js";
/**
@name Icons/Close.vue
@description This component is a svg icon representing a close mark.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Close.vue
* @description This component is a svg icon representing a close mark.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,17 +1,17 @@
<script setup>
import { defineProps, reactive, onBeforeMount } from "vue";
import { useUUID } from "@utils/global.js";
/**
@name Icons/Core.vue
@description This component is a svg icon representing core plugin.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Core.vue
* @description This component is a svg icon representing core plugin.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,17 +1,17 @@
<script setup>
import { defineProps, reactive, onBeforeMount } from "vue";
import { useUUID } from "@utils/global.js";
/**
@name Icons/Cross.vue
@description This component is a svg icon representing a cross mark.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Cross.vue
* @description This component is a svg icon representing a cross mark.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -2,17 +2,17 @@
import { defineProps, reactive, onBeforeMount } from "vue";
import { useUUID } from "@utils/global.js";
/**
@name Icons/Crown.vue
@description This component is a svg icon representing crown.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Crown.vue
* @description This component is a svg icon representing crown.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,17 +1,17 @@
<script setup>
import { defineProps, reactive, onBeforeMount } from "vue";
import { useUUID } from "@utils/global.js";
/**
@name Icons/Discord.vue
@description This component is a svg icon representing Discord.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@param {string} [color="discord"]
@param {boolean} [disabled=false] - If true, the icon will be disabled.
*/
/**
* @name Icons/Discord.vue
* @description This component is a svg icon representing Discord.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {string} [color="discord"]
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Disk.vue
@description This component is a svg icon representing disk.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Disk.vue
* @description This component is a svg icon representing disk.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Disks.vue
@description This component is a svg icon representing disks.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Disks.vue
* @description This component is a svg icon representing disks.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Document.vue
@description This component is a svg icon representing document.
@example
{
color: 'orange',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Document.vue
* @description This component is a svg icon representing document.
* @example
* {
* color: 'orange',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Exclamation.vue
@description This component is a svg icon representing exclamation.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Exclamation.vue
* @description This component is a svg icon representing exclamation.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,17 +1,17 @@
<script setup>
import { defineProps, reactive, onBeforeMount } from "vue";
import { useUUID } from "@utils/global.js";
/**
@name Icons/Core.vue
@description This component is a svg icon representing core plugin.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Core.vue
* @description This component is a svg icon representing core plugin.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Eye.vue
@description This component is a svg icon representing eye.
@example
{
color: 'green',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Eye.vue
* @description This component is a svg icon representing eye.
* @example
* {
* color: 'green',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,17 +1,17 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Flag.vue
@description This component is a svg icon representing flag.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Flag.vue
* @description This component is a svg icon representing flag.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Funnel.vue
@description This component is a svg icon representing funnel.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Funnel.vue
* @description This component is a svg icon representing funnel.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Gear.vue
@description This component is a svg icon representing gear.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Gear.vue
* @description This component is a svg icon representing gear.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,17 +1,17 @@
<script setup>
import { defineProps, reactive, onBeforeMount } from "vue";
import { useUUID } from "@utils/global.js";
/**
@name Icons/Github.vue
@description This component is a svg icon representing Github.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@param {string} [color="github"]
@param {boolean} [disabled=false] - If true, the icon will be disabled.
*/
/**
* @name Icons/Github.vue
* @description This component is a svg icon representing Github.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {string} [color="github"]
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Globe.vue
@description This component is a svg icon representing globe.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Globe.vue
* @description This component is a svg icon representing globe.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/House.vue
@description This component is a svg icon representing house.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/House.vue
* @description This component is a svg icon representing house.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Info.vue
@description This component is a svg icon representing info.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Info.vue
* @description This component is a svg icon representing info.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Key.vue
@description This component is a svg icon representing key.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Key.vue
* @description This component is a svg icon representing key.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,17 +1,17 @@
<script setup>
import { defineProps, reactive, onBeforeMount } from "vue";
import { useUUID } from "@utils/global.js";
/**
@name Icons/Linkedin.vue
@description This component is a svg icon representing Linkedin.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@param {string} [color="linkedin"]
@param {boolean} [disabled=false] - If true, the icon will be disabled.
*/
/**
* @name Icons/Linkedin.vue
* @description This component is a svg icon representing Linkedin.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {string} [color="linkedin"]
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/List.vue
@description This component is a svg icon representing list.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/List.vue
* @description This component is a svg icon representing list.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Lock.vue
@description This component is a svg icon representing lock.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Lock.vue
* @description This component is a svg icon representing lock.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Pen.vue
@description This component is a svg icon representing pen.
@example
{
color: 'orange',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Pen.vue
* @description This component is a svg icon representing pen.
* @example
* {
* color: 'orange',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,17 +1,17 @@
<script setup>
import { defineProps, reactive, onBeforeMount } from "vue";
import { useUUID } from "@utils/global.js";
/**
@name Icons/Plus.vue
@description This component is a svg icon representing addition (+).
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Plus.vue
* @description This component is a svg icon representing addition (+).
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Puzzle.vue
@description This component is a svg icon representing puzzle.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Puzzle.vue
* @description This component is a svg icon representing puzzle.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Redirect.vue
@description This component is a svg icon representing redirect.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Redirect.vue
* @description This component is a svg icon representing redirect.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Search.vue
@description This component is a svg icon representing search.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Search.vue
* @description This component is a svg icon representing search.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Settings.vue
@description This component is a svg icon representing settings.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Settings.vue
* @description This component is a svg icon representing settings.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Task.vue
@description This component is a svg icon representing task.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
* @name Icons/Task.vue
* @description This component is a svg icon representing task.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Trash.vue
@description This component is a svg icon representing trash.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Trash.vue
* @description This component is a svg icon representing trash.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -2,16 +2,16 @@
import { defineProps, reactive, onBeforeMount } from "vue";
import { useUUID } from "@utils/global.js";
/**
@name Icons/Trespass.vue
@description This component is a svg icon representing no trespassing.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
* @name Icons/Trespass.vue
* @description This component is a svg icon representing no trespassing.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -2,16 +2,16 @@
import { defineProps, reactive, onBeforeMount } from "vue";
import { useUUID } from "@utils/global.js";
/**
@name Icons/Twiiter.vue
@description This component is a svg icon representing Twiiter.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@param {string} [color="twitter"]
@param {boolean} [disabled=false] - If true, the icon will be disabled.
*/
* @name Icons/Twiiter.vue
* @description This component is a svg icon representing Twiiter.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @param {string} [color="twitter"]
* @param {boolean} [disabled=false] - If true, the icon will be disabled.
*/
const props = defineProps({
iconClass: {

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

@ -1,16 +1,16 @@
<script setup>
import { defineProps, reactive } from "vue";
/**
@name Icons/Wire.vue
@description This component is a svg icon representing wire.
@example
{
color: 'info',
}
@param {string} [iconClass="icon-default"] - The class of the icon.
@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.
*/
/**
* @name Icons/Wire.vue
* @description This component is a svg icon representing wire.
* @example
* {
* color: 'info',
* }
* @param {string} [iconClass="icon-default"] - The class of the icon.
* @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({
iconClass: {

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

@ -6,9 +6,9 @@ import Filter from "@components/Widget/Filter.vue";
import Grid from "@components/Widget/Grid.vue";
import MessageUnmatch from "@components/Message/Unmatch.vue";
/**
@name List/Details.vue
@description This component is a list of items separate on two columns : one for the title, and other for a list of popovers related to the plugin (type, link...)
@example
* @name List/Details.vue
* @description This component is a list of items separate on two columns : one for the title, and other for a list of popovers related to the plugin (type, link...)
* @example
{
details : [{
text: "name",
@ -28,9 +28,9 @@ import MessageUnmatch from "@components/Message/Unmatch.vue";
},
],
}]
@param {string} details - List of details item that contains a text, disabled state, attrs and list of popovers. We can also add a disabled key to disable the item.
@param {array} [filters=[]] - List of filters to apply on the list of items.
@param {columns} [columns={pc: 4, tablet: 6, mobile: 12}] - Determine the position of the items in the grid system.
* @param {string} details - List of details item that contains a text, disabled state, attrs and list of popovers. We can also add a disabled key to disable the item.
* @param {array} [filters=[]] - List of filters to apply on the list of items.
* @param {columns} [columns={pc: 4, tablet: 6, mobile: 12}] - Determine the position of the items in the grid system.
*/
const props = defineProps({
@ -62,22 +62,22 @@ 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}
*/
* @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}
*/
function indexUp(id) {
data.upIndex = 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}
*/
* @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}
*/
function indexPending(id) {
data.pendingIndex.push(id);
// Remove id from pendingIndex after a moment

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

@ -1,16 +1,18 @@
<script setup>
import { computed, defineProps } from "vue";
/**
@name List/Pairs.vue
@description This component is used to display key value information in a list.
@example
{
pairs : [{key: "Total Users", value: "100"}],
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.
*/
/**
* @name List/Pairs.vue
* @description This component is used to display key value information in a list.
* @example
* {
* pairs : [
* { key: "Total Users", value: "100" }
* ],
* 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.
*/
const props = defineProps({
pairs: {

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

@ -2,17 +2,17 @@
import { onMounted, reactive, ref } from "vue";
import Text from "@components/Widget/Text.vue";
/**
@name Message/Unmatch.vue
@description Display a default message "no match" with dedicated icon.
The message text can be overriden by passing a text prop.
@example
{
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.
*/
/**
* @name Message/Unmatch.vue
* @description Display a default message "no match" with dedicated icon.
* The message text can be overriden by passing a text prop.
* @example
* {
* 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.
*/
const props = defineProps({
text: {

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

@ -2,27 +2,27 @@
import { defineProps, reactive, onMounted, onBeforeMount } from "vue";
import { useUUID } from "@utils/global.js";
/**
@name Forms/Error/Field.vue
@description This component is an alert type to send feedback to the user.
We can used it as a fixed alert or we can use it in a container as a list.
@example
{
position : "fixed",
type: "success",
title: "Success",
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
*/
/**
* @name Forms/Error/Field.vue
* @description This component is an alert type to send feedback to the user.
* We can used it as a fixed alert or we can use it in a container as a list.
* @example
* {
* position : "fixed",
* type: "success",
* title: "Success",
* 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
*/
const props = defineProps({
isFixed: {

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

@ -14,33 +14,33 @@ import Container from "@components/Widget/Container.vue";
import Icons from "@components/Widget/Icons.vue";
import { useUUID } from "@utils/global.js";
/**
@name Widget/Button.vue
@description This component is a standard button.
@example
{
id: "open-modal-btn",
text: "Open modal",
disabled: false,
hideText: true,
color: "green",
size: "normal",
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 {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
@param {string} [iconName=""] - Name in lowercase of icons store on /Icons. If falsy value, no icon displayed.
@param {Object} [attrs={}] - List of attributs to add to the button. Some attributs will conduct to additionnal 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=""] - Additionnal class to the container
*/
* @name Widget/Button.vue
* @description This component is a standard button.
* @example
* {
* id: "open-modal-btn",
* text: "Open modal",
* disabled: false,
* hideText: true,
* color: "green",
* size: "normal",
* 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 {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
* @param {string} [iconName=""] - Name in lowercase of icons store on /Icons. If falsy value, no icon displayed.
* @param {Object} [attrs={}] - List of attributs to add to the button. Some attributs will conduct to additionnal 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=""] - Additionnal class to the container
*/
const props = defineProps({
id: {

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

@ -2,41 +2,41 @@
import Button from "@components/Widget/Button.vue";
import { onMounted, reactive, ref } from "vue";
/**
@name Widget/ButtonGroup.vue
@description This component allow to display multiple buttons in the same row using flex.
We can define additional class too for the flex container.
We need a list of buttons to display.
@example
{
id: "group-btn",
boutonGroupClass : "justify-center",
buttons: [
{
id: "open-modal-btn",
text: "Open modal",
disabled: false,
hideText: true,
color: "green",
size: "normal",
iconName: "modal",
eventAttr: {"store" : "modal", "value" : "open", "target" : "modal_id", "valueExpanded" : "open"},
},
{
id: "close-modal-btn",
text: "Close modal",
disabled: false,
hideText: true,
color: "red",
size: "normal",
iconName: "modal",
eventAttr: {"store" : "modal", "value" : "close", "target" : "modal_id", "valueExpanded" : "close"},
},
],
}
@param {array} buttons - List of buttons to display. Button component is used.
@param {string} [boutonGroupClass=""] - Additional class for the flex container
*/
/**
* @name Widget/ButtonGroup.vue
* @description This component allow to display multiple buttons in the same row using flex.
* We can define additional class too for the flex container.
* We need a list of buttons to display.
* @example
* {
* id: "group-btn",
* boutonGroupClass : "justify-center",
* buttons: [
* {
* id: "open-modal-btn",
* text: "Open modal",
* disabled: false,
* hideText: true,
* color: "green",
* size: "normal",
* iconName: "modal",
* eventAttr: {"store" : "modal", "value" : "open", "target" : "modal_id", "valueExpanded" : "open"},
* },
* {
* id: "close-modal-btn",
* text: "Close modal",
* disabled: false,
* hideText: true,
* color: "red",
* size: "normal",
* iconName: "modal",
* eventAttr: {"store" : "modal", "value" : "close", "target" : "modal_id", "valueExpanded" : "close"},
* },
* ],
* }
* @param {array} buttons - List of buttons to display. Button component is used.
* @param {string} [boutonGroupClass=""] - Additional class for the flex container
*/
const props = defineProps({
buttons: {

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

@ -8,24 +8,25 @@ import ButtonGroup from "@components/Widget/ButtonGroup.vue";
import { useEqualStr } from "@utils/global.js";
/**
@name Builder/Cell.vue
@description This component includes all elements that can be shown in a table cell.
@example
{ type : "button",
data : {
id: "open-modal-btn",
text: "Open modal",
disabled: false,
hideText: true,
color: "green",
size: "normal",
iconName: "modal",
attrs: { data-toggle: "modal", "data-target": "#modal"},
}
}
@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.
*/
* @name Builder/Cell.vue
* @description This component includes all elements that can be shown in a table cell.
* @example
* {
* type : "button",
* data : {
* id: "open-modal-btn",
* text: "Open modal",
* disabled: false,
* hideText: true,
* color: "green",
* size: "normal",
* iconName: "modal",
* attrs: { data-toggle: "modal", "data-target": "#modal"},
* }
* }
* @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({
type: {

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

@ -1,21 +1,21 @@
<script setup>
import { computed } from "vue";
/**
@name Widget/Container.vue
@description This component is a basic container that can be used to wrap other components.
In case we are working with grid system, we can add columns to position the container.
We can define additional class too.
This component is mainly use as widget container.
@example
{
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
*/
/**
* @name Widget/Container.vue
* @description This component is a basic container that can be used to wrap other components.
* In case we are working with grid system, we can add columns to position the container.
* We can define additional class too.
* This component is mainly use as widget container.
* @example
* {
* 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
*/
const props = defineProps({
containerClass: {

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

@ -7,47 +7,46 @@ import Select from "@components/Forms/Field/Select.vue";
import { useFilter } from "@utils/filter.js";
/**
@name Widget/Filter.vue
@description This component allow to filter any data object or array with a list of filters.
For the moment, we have 2 types of filters: select and keyword.
We have default values that avoid filter ("all" for select and "" for keyword).
Filters are fields so we need to provide a "field" key with same structure as a Field.
We have to define "keys" that will be the keys the filter value will check.
We can set filter "default" in order to filter the base keys of an object.
We can set filter "settings" in order to filter settings, data must be an advanced template.
We can set filter "table" in order to filter table items.
Check example for more details.
@example
[
{
filter: "default", // or "settings" or "table"
type: "select",
value: "all",
keys: ["type"],
field: {
inpType: "select",
id: uuidv4(),
value: "all",
// add 'all' as first value
values: ["all"].concat(plugin_types),
name: uuidv4(),
onlyDown: true,
label: "inp_select_plugin_type",
popovers: [
{
text: "inp_select_plugin_type_desc",
iconName: "info",
},
],
columns: { pc: 3, tablet: 4, mobile: 12 },
},
},
...
]
@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.
*/
* @name Widget/Filter.vue
* @description This component allow to filter any data object or array with a list of filters.
* For the moment, we have 2 types of filters: select and keyword.
* We have default values that avoid filter ("all" for select and "" for keyword).
* Filters are fields so we need to provide a "field" key with same structure as a Field.
* We have to define "keys" that will be the keys the filter value will check.
* We can set filter "default" in order to filter the base keys of an object.
* We can set filter "settings" in order to filter settings, data must be an advanced template.
* We can set filter "table" in order to filter table items.
* Check example for more details.
* @example
* [
* {
* filter: "default", // or "settings" or "table"
* type: "select",
* value: "all",
* keys: ["type"],
* field: {
* inpType: "select",
* id: uuidv4(),
* value: "all",
* // add 'all' as first value
* values: ["all"].concat(plugin_types),
* name: uuidv4(),
* onlyDown: true,
* label: "inp_select_plugin_type",
* popovers: [
* {
* text: "inp_select_plugin_type_desc",
* iconName: "info",
* },
* ],
* columns: { pc: 3, tablet: 4, mobile: 12 },
* },
* },
* ]
* @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({
filters: {
@ -84,12 +83,12 @@ watch(
);
/**
@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.
@returns {emits} - Emit a filter event with the filtered data.
*/
* @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.
* @returns {emits} - Emit a filter event with the filtered data.
*/
function startFilter(filter = {}, value) {
// Case we have new filter value, update it
// Loop on filter.base and update the "value" key when matching filterName
@ -148,13 +147,13 @@ 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}
*/
* @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}
*/
function filterData(filter = {}, value = null) {
// Wait for buffer input
filters.bufferCount++;
@ -168,12 +167,12 @@ 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}
*/
* @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}
*/
function filterRegularSettings(filterSettings, template) {
template.forEach((plugin, id) => {
// loop on plugin settings dict
@ -193,12 +192,12 @@ 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}
*/
* @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}
*/
function filterMultiplesSettings(filterSettings, template) {
const multiples = [];
// Format to filter

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

@ -1,17 +1,17 @@
<script setup>
/**
@name Widget/Grid.vue
@description This component is a basic container that can be used to wrap other components.
This container is based on a grid system and will return a grid container with 12 columns.
We can define additional class too.
This component is mainly use as widget container or as a child of a GridLayout.
@example
{
columns: { pc: 12, tablet: 12, mobile: 12},
gridClass: "items-start"
}
@param {string} [gridClass="items-start"] - Additional class
*/
/**
* @name Widget/Grid.vue
* @description This component is a basic container that can be used to wrap other components.
* This container is based on a grid system and will return a grid container with 12 columns.
* We can define additional class too.
* This component is mainly use as widget container or as a child of a GridLayout.
* @example
* {
* columns: { pc: 12, tablet: 12, mobile: 12},
* gridClass: "items-start"
* }
* @param {string} [gridClass="items-start"] - Additional class
*/
const props = defineProps({
gridClass: {

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

@ -3,27 +3,27 @@ import { computed, ref, onMounted, reactive, onBeforeMount } from "vue";
import { contentIndex } from "@utils/tabindex.js";
import { useUUID } from "@utils/global.js";
/**
@name Widget/GridLayout.vue
@description This component is used for top level page layout.
This will determine the position of layout components based on the grid system.
We can create card, modal, table and others top level layout using this component.
This component is mainly use as Grid parent component.
@example
{
type: "card",
title: "Test",
columns: { pc: 12, tablet: 12, mobile: 12},
gridLayoutClass: "items-start"
}
@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 {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
*/
/**
* @name Widget/GridLayout.vue
* @description This component is used for top level page layout.
* This will determine the position of layout components based on the grid system.
* We can create card, modal, table and others top level layout using this component.
* This component is mainly use as Grid parent component.
* @example
* {
* type: "card",
* title: "Test",
* columns: { pc: 12, tablet: 12, mobile: 12},
* gridLayoutClass: "items-start"
* }
* @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 {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({
type: {

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

@ -39,22 +39,22 @@ import Document from "@components/Icons/Document.vue";
import Eye from "@components/Icons/Eye.vue";
/**
@name Widget/Icons.vue
@description This component is a wrapper that contains all the icons available in the application (Icons folder).
This component is used to display the icon based on the icon name.
This component is mainly use inside others widgets.
@example
{
iconName: 'box',
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.
*/
* @name Widget/Icons.vue
* @description This component is a wrapper that contains all the icons available in the application (Icons folder).
* This component is used to display the icon based on the icon name.
* This component is mainly use inside others widgets.
* @example
* {
* iconName: 'box',
* 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.
*/
const props = defineProps({
iconName: {

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

@ -5,37 +5,37 @@ import Title from "@components/Widget/Title.vue";
import Status from "@components/Widget/Status.vue";
import ListPairs from "@components/List/Pairs.vue";
import ButtonGroup from "@components/Widget/ButtonGroup.vue";
/**
@name Widget/Instance.vue
@description This component is an instance widget.
This component is using the Container, TitleCard, IconStatus, ListPairs and ButtonGroup components.
@example
{
id: "instance-1",
title: "Instance 1",
status: "success",
details: [
{ key: "Version", value: "1.0.0" },
{ key: "Status", value: "Running" },
{ key: "Created", value: "2021-01-01" },
],
buttons : [
{
id: "open-modal-btn",
text: "Open modal",
disabled: false,
hideText: true,
color: "green",
size: "normal",
iconName: "modal",
},
]
}
@param {string} title
@param {string} status
@param {array} details - List of details to display
@param {array} buttons - List of buttons to display
*/
/**
* @name Widget/Instance.vue
* @description This component is an instance widget.
* This component is using the Container, TitleCard, IconStatus, ListPairs and ButtonGroup components.
* @example
* {
* id: "instance-1",
* title: "Instance 1",
* status: "success",
* details: [
* { key: "Version", value: "1.0.0" },
* { key: "Status", value: "Running" },
* { key: "Created", value: "2021-01-01" },
* ],
* buttons : [
* {
* id: "open-modal-btn",
* text: "Open modal",
* disabled: false,
* hideText: true,
* color: "green",
* size: "normal",
* iconName: "modal",
* },
* ]
* }
* @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({
title: {

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

@ -20,68 +20,68 @@ import MessageUnmatch from "@components/Message/Unmatch.vue";
import Table from "@components/Widget/Table.vue";
/**
@name Builder/Modal.vue
@description This component contains all widgets needed on a modal.
This is different from a page builder as we don't need to define the container and grid layout.
We can't create multiple grids or containers in a modal.
@example
[
"id": "modal-delete-plugin",
"widgets": [
{
"type": "Title",
"data": {
"title": "plugins_modal_delete_title",
"type": "modal"
}
},
{
"type": "Text",
"data": {
"text": "plugins_modal_delete_confirm"
}
},
{
"type": "Text",
"data": {
"text": "",
"bold": true,
"attrs": {
"data-modal-plugin-name": "true"
}
}
},
{
"type": "ButtonGroup",
"data": {
"buttons": [
{
"id": "delete-plugin-btn",
"text": "action_close",
"disabled": false,
"color": "close",
"size": "normal",
"attrs": {
"data-hide-el": "modal-delete-plugin"
}
},
{
"id": "delete-plugin-btn",
"text": "action_delete",
"disabled": false,
"color": "delete",
"size": "normal",
"attrs": {
"data-delete-plugin-submit": ""
}
}
],
}
}
]
];
@param {array} widgets - Array of containers and widgets
*/
* @name Builder/Modal.vue
* @description This component contains all widgets needed on a modal.
* This is different from a page builder as we don't need to define the container and grid layout.
* We can't create multiple grids or containers in a modal.
* @example
* [
* "id": "modal-delete-plugin",
* "widgets": [
* {
* "type": "Title",
* "data": {
* "title": "plugins_modal_delete_title",
* "type": "modal"
* }
* },
* {
* "type": "Text",
* "data": {
* "text": "plugins_modal_delete_confirm"
* }
* },
* {
* "type": "Text",
* "data": {
* "text": "",
* "bold": true,
* "attrs": {
* "data-modal-plugin-name": "true"
* }
* }
* },
* {
* "type": "ButtonGroup",
* "data": {
* "buttons": [
* {
* "id": "delete-plugin-btn",
* "text": "action_close",
* "disabled": false,
* "color": "close",
* "size": "normal",
* "attrs": {
* "data-hide-el": "modal-delete-plugin"
* }
* },
* {
* "id": "delete-plugin-btn",
* "text": "action_delete",
* "disabled": false,
* "color": "delete",
* "size": "normal",
* "attrs": {
* "data-delete-plugin-submit": ""
* }
* }
* ],
* }
* }
* ]
* ];
* @param {array} widgets - Array of containers and widgets
*/
const props = defineProps({
id: {
@ -107,12 +107,12 @@ function useCloseModal() {
}
/**
@name useFocusModal
@description Check if the modal is present and a focusable element is present inside it.
* @name useFocusModal
* @description Check if the modal is present and a focusable element is present inside it.
If it's the case, the function will focus the element.
Case there is already a focused element inside the modal, avoid to focus it again.
@param {string} modalId - The id of the modal element.
@returns {void}
* @param {string} modalId - The id of the modal element.
* @returns {void}
*/
function useFocusModal() {
setTimeout(() => {

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

@ -12,23 +12,23 @@ import { useUUID } from "@utils/global.js";
import Icons from "@components/Widget/Icons.vue";
/**
@name Widget/Popover.vue
@description This component is a standard popover.
@example
{
text: "This is a popover text",
href: "#",
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
*/
* @name Widget/Popover.vue
* @description This component is a standard popover.
* @example
* {
* text: "This is a popover text",
* href: "#",
* 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
*/
const props = defineProps({
text: {
@ -78,10 +78,10 @@ const popoverContainer = ref();
const popoverBtn = ref();
/**
@name showPopover
@description Show the popover and set the position of the popover relative to the container.
@returns {void}
*/
* @name showPopover
* @description Show the popover and set the position of the popover relative to the container.
* @returns {void}
*/
function showPopover() {
popover.isHover = true;
@ -134,10 +134,10 @@ function showPopover() {
}
/**
@name hidePopover
@description Hide the popover.
@returns {void}
*/
* @name hidePopover
* @description Hide the popover.
* @returns {void}
*/
function hidePopover() {
popover.isHover = false;
popover.isOpen = false;

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

@ -1,28 +1,28 @@
<script setup>
import Popover from "@components/Widget/Popover.vue";
/**
@name Widget/PopoverGroup.vue
@description This component allow to display multiple popovers in the same row using flex.
We can define additional class too for the flex container.
We need a list of popovers to display.
@example
{
flexClass : "justify-center",
popovers: [
{
text: "This is a popover text",
iconName: "info",
},
{
text: "This is a popover text",
iconName: "info",
},
],
}
@param {array} popovers - List of popovers to display. Popover component is used.
@param {string} [groupClasss=""] - Additional class for the flex container
*/
/**
* @name Widget/PopoverGroup.vue
* @description This component allow to display multiple popovers in the same row using flex.
* We can define additional class too for the flex container.
* We need a list of popovers to display.
* @example
* {
* flexClass : "justify-center",
* popovers: [
* {
* text: "This is a popover text",
* iconName: "info",
* },
* {
* text: "This is a popover text",
* iconName: "info",
* },
* ],
* }
* @param {array} popovers - List of popovers to display. Popover component is used.
* @param {string} [groupClasss=""] - Additional class for the flex container
*/
const props = defineProps({
popovers: {

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

@ -5,27 +5,27 @@ import Subtitle from "@components/Widget/Subtitle.vue";
import Text from "@components/Widget/Text.vue";
import Icons from "@components/Widget/Icons.vue";
/**
@name Widget/Stat.vue
@description This component is wrapper of all stat components.
This component has no grid system and will always get the full width of the parent.
This component is mainly use inside a blank card.
@example
{
title: "Total Users",
value: 100,
subtitle : "Last 30 days",
iconName: "user",
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} value - The value of the stat
@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} [statClass=""] - Additional class
*/
/**
* @name Widget/Stat.vue
* @description This component is wrapper of all stat components.
* This component has no grid system and will always get the full width of the parent.
* This component is mainly use inside a blank card.
* @example
* {
* title: "Total Users",
* value: 100,
* subtitle : "Last 30 days",
* iconName: "user",
* 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} value - The value of the stat
* @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} [statClass=""] - Additional class
*/
const props = defineProps({
title: {

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

@ -3,18 +3,18 @@ import { defineProps, computed, onBeforeMount, reactive } from "vue";
import { useUUID } from "@utils/global.js";
/**
@name Icon/Status.vue
@description This component is a icon used with status.
@example
{
id: "instance-1",
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.
*/
* @name Icon/Status.vue
* @description This component is a icon used with status.
* @example
* {
* id: "instance-1",
* 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.
*/
const props = defineProps({
id: {

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

@ -1,24 +1,24 @@
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
/**
@name Widget/Subtitle.vue
@description This component is a general subtitle wrapper.
@example
{
subtitle: "Total Users",
type: "card",
subtitleClass: "text-lg",
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 {string} [subtitleClass=""] - Additional class, useful when component is used directly on a grid system
*/
* @name Widget/Subtitle.vue
* @description This component is a general subtitle wrapper.
* @example
* {
* subtitle: "Total Users",
* type: "card",
* subtitleClass: "text-lg",
* 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 {string} [subtitleClass=""] - Additional class, useful when component is used directly on a grid system
*/
const props = defineProps({
subtitle: {

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

@ -7,69 +7,66 @@ import Cell from "@components/Widget/Cell.vue";
import Filter from "@components/Widget/Filter.vue";
/**
@name Widget/Table.vue
@description This component is used to create a table.
You need to provide a title, a header, a list of positions, and a list of items.
Items need to be an array of array with a cell being a regular widget. Not all widget are supported. Check this component import list to see which widget are supported.
For example, Text, Icons, Icons, Buttons and Fields are supported.
@example
{
"title": "Table title",
"header": ["Header 1", "Header 2", "Header 3"],
"minWidth": "base",
"positions": [4,4,4],
"items": [
[
{
"type": "Text",
"data": {
"text": "whitelist-download"
}
},
...
],
...
],
const filters = [
{
filter: "default",
filterName: "type",
type: "select",
value: "all",
keys: ["type"],
field: {
id: uuidv4(),
value: "all",
// add 'all' as first value
values: ["all"].concat(plugin_types),
name: uuidv4(),
onlyDown: true,
label: "inp_select_plugin_type",
containerClass: "setting",
popovers: [
{
text: "inp_select_plugin_type_desc",
iconName: "info",
},
],
columns: { pc: 3, tablet: 4, mobile: 12 },
},
},
...
}
@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.
*/
* @name Widget/Table.vue
* @description This component is used to create a table.
* You need to provide a title, a header, a list of positions, and a list of items.
* Items need to be an array of array with a cell being a regular widget. Not all widget are supported. Check this component import list to see which widget are supported.
* For example, Text, Icons, Icons, Buttons and Fields are supported.
* @example
* {
* "title": "Table title",
* "header": ["Header 1", "Header 2", "Header 3"],
* "minWidth": "base",
* "positions": [4,4,4],
* "items": [
* [
* {
* "type": "Text",
* "data": {
* "text": "whitelist-download"
*
* }
* },
* ],
* ],
*
* filters : [
* {
* filter: "default",
* filterName: "type",
* type: "select",
* value: "all",
* keys: ["type"],
* field: {
* id: uuidv4(),
* value: "all",
* // add 'all' as first value
* values: ["all"].concat(plugin_types),
* name: uuidv4(),
* onlyDown: true,
* label: "inp_select_plugin_type",
* containerClass: "setting",
* popovers: [
* {
* text: "inp_select_plugin_type_desc",
* iconName: "info",
* },
* ],
* columns: { pc: 3, tablet: 4, mobile: 12 },
* },
* },
* ];
* }
* @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({
title: {
@ -140,10 +137,10 @@ const table = reactive({
});
/**
@name setUnmatchWidth
@description Determine the width of the unmatch element based on the parent container.
@returns {void}
*/
* @name setUnmatchWidth
* @description Determine the width of the unmatch element based on the parent container.
* @returns {void}
*/
function setUnmatchWidth() {
try {
const value = tableBody.value.closest("[data-is='card']").clientWidth - 60;
@ -152,10 +149,10 @@ function setUnmatchWidth() {
}
/**
@name getOverflow
@description Handle the overflow of the table and update padding in consequence.
@returns {void}
*/
* @name getOverflow
* @description Handle the overflow of the table and update padding in consequence.
* @returns {void}
*/
function getOverflow() {
setTimeout(() => {
const overflow =

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

@ -3,23 +3,23 @@ import Icons from "@components/Widget/Icons.vue";
import { onMounted, reactive, ref } from "vue";
/**
@name Widget/Text.vue
@description This component is used for regular paragraph.
@example
{
text: "This is a paragraph",
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 attributs to add to the text.
*/
* @name Widget/Text.vue
* @description This component is used for regular paragraph.
* @example
* {
* text: "This is a paragraph",
* 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 attributs to add to the text.
*/
const props = defineProps({
text: {

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

@ -1,23 +1,23 @@
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
/**
@name Widget/Title.vue
@description This component is a general title wrapper.
@example
{
title: "Total Users",
type: "card",
titleClass: "text-lg",
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 {string} [titleClass=""] - Additional class, useful when component is used directly on a grid system
*/
* @name Widget/Title.vue
* @description This component is a general title wrapper.
* @example
* {
* title: "Total Users",
* type: "card",
* titleClass: "text-lg",
* 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 {string} [titleClass=""] - Additional class, useful when component is used directly on a grid system
*/
const props = defineProps({
title: {

1
src/ui/client/dashboard/lang/en.json
View file

@ -35,6 +35,7 @@
"dashboard_reports": "reports",
"dashboard_cache": "cache",
"dashboard_logs": "logs",
"dashboard_raw": "raw mode",
"dashboard_feedback_toggle_sidebar": "Toggle feedback sidebar.",
"dashboard_feedback_close_sidebar": "Close feedback sidebar.",
"dashboard_feedback_alert_close": "Close feedback alert",

4
src/ui/client/dashboard/pages/bans/Bans.vue
View file

@ -5,8 +5,8 @@ import BuilderBans from "@components/Builder/Bans.vue";
import { useGlobal } from "@utils/global";
/**
@name Page/Bans.vue
@description This component is the ban page.
* @name Page/Bans.vue
* @description This component is the ban page.
This page displays global information about bans, and allow to delete or upload some bans.
*/

Some files were not shown because too many files have changed in this diff Show more