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

simplify components

Browse source 
* add default icon color so this can be override but not needed anymore
* add default icon size base on parent data-is so svgSize is not needed anymore
* add attribut to icon in order for the parent to retrieve the color (like popover or button) and so avoid the need to add color on those components
* create custom unmatch component and add auto style to it
* remove Flex component and use tailwind css class directly
* avoid duplicating selectors for bg, fill and text color modifier, instead created a class to set on components and chain with color to get the wanted style
* refactor python script that builded json format
* auto style with title, subtitle, text, popover and button now working
* start adding a disabled state to icons in order to update style in some cases (like a disabled buton)
This commit is contained in:
Jordan Blasenhauer 2024-06-24 17:46:51 +02:00
parent 1552885e03
commit 18a629dd58
77 changed files with 1124 additions and 4577 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

342
vuejs/client/input.css
View file

@ -513,11 +513,28 @@ body {
@apply py-4 sm:gap-x-8 gap-y-8 col-span-12 grid grid-cols-12 w-full relative;
}
.layout-unmatch {
@apply col-span-12 flex mx-2 my-4;
/* MESSAGE */
.msg-container {
@apply col-span-12 w-full;
}
.layout-unmatch-table {
.msg-unmatch-card {
@apply col-span-12 w-full mx-2 my-4;
}
.msg-unmatch-form {
@apply col-span-12 w-full mx-2 my-4;
}
.msg-unmatch-base {
@apply col-span-12 w-full mx-2 my-4;
}
.msg-unmatch-list-details {
@apply col-span-12 w-full mx-2 my-4;
}
.msg-unmatch-table {
@apply fixed col-span-12 flex mx-2 my-8 w-full;
}
@ -545,7 +562,7 @@ body {
}
.icon-container {
@apply block w-full h-full;
@apply block w-fit;
}
.stick.icon-container {
@ -568,16 +585,32 @@ body {
@apply block w-8 h-8
}
.icon-card {
@apply block w-8 h-8
}
.icon-unmatch {
@apply block w-8 h-8;
}
.icon-menu {
@apply h-6 w-6 relative;
}
.icon-table {
.icon-form {
@apply h-6 w-6 relative;
}
.icon-button {
@apply h-6 w-6 relative;
}
.icon-table:not([disabled]) {
@apply h-6 w-6 relative;
}
.icon-list-details {
@apply mx-1 h-7 w-7 relative;
@apply ml-2 h-6.5 w-6.5 relative;
}
/* TABS */
@ -1040,16 +1073,24 @@ body {
@apply col-span-12 mb-2 text-center break-word;
}
.text-unmatch {
.text-card {
@apply col-span-12 text-lg mb-0 break-word;
}
.text-unmatch {
@apply col-span-12 text-lg mb-0 font-bold break-word;
}
.text-table {
@apply col-span-12 mb-0 break-word;
}
.text-form-error {
@apply mt-2 font-bold error text-center text-red-500;
}
.text-stat {
@apply col-span-12 my-1 font-bold dark:text-white/90 text-black uppercase break-word;
}
@ -1057,6 +1098,21 @@ body {
.text-list-details {
@apply w-full col-span-12 mb-0 break-word;
}
/* BTN GROUP */
.button-group-default {
@apply flex justify-center items-center;
}
.button-group-instance {
@apply flex justify-end items-center;
}
.button-group-modal {
@apply flex justify-center items-center mt-4;
}
/* LIST COMPONENT */
.list-pairs-container {
@ -1095,8 +1151,8 @@ body {
@apply col-span-12 grid grid-cols-12 gap-3 py-2;
}
.list-details-flex {
@apply justify-end items-center;
.list-details-item-wrap {
@apply flex justify-between items-center w-full;
}
/* TITLE */
@ -1214,9 +1270,7 @@ body {
@apply col-span-12 w-full;
}
.form-setting-error {
@apply mt-2 font-bold error text-center text-red-500;
}
/* CARD */
@ -1256,7 +1310,7 @@ body {
/* BTN */
.btn {
@apply tracking-wide dark:brightness-90 inline-block font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md disabled:cursor-not-allowed dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400/0 dark:disabled:bg-gray-700 dark:disabled:border-gray-700/0 disabled:hover:translate-y-0 disabled:hover:bg-gray-400 disabled:hover:border-gray-400/0 dark:disabled:hover:translate-y-0 dark:disabled:hover:bg-gray-700 dark:disabled:hover:border-gray-700/0;
@apply flex justify-center items-center tracking-wide dark:brightness-90 inline-block font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md disabled:cursor-not-allowed dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400/0 dark:disabled:bg-gray-700 dark:disabled:border-gray-700/0 disabled:hover:translate-y-0 disabled:hover:bg-gray-400 disabled:hover:border-gray-400/0 dark:disabled:hover:translate-y-0 dark:disabled:hover:bg-gray-700 dark:disabled:hover:border-gray-700/0;
}
@ -1492,6 +1546,10 @@ body {
@apply w-full appearance-none block col-span-12 overflow-x-auto grid grid-cols-12;
}
.table-unmatch {
@apply col-span-12 mx-2 my-4 w-full;
}
.table {
@apply appearance-none w-full grid grid-cols-12 col-span-12 block;
}
@ -1646,327 +1704,151 @@ body {
/* TEXT COLOR MODIFIER */
.success.subtitle-stat,
.success.subtitle-card,
.success.title-card,
.success.title-container,
.success.title-stat,
.success.text-content {
.text-el {
@apply text-current;
}
.success.text-el{
@apply text-green-500;
}
.error.subtitle-stat,
.error.subtitle-card,
.error.title-card,
.error.title-container,
.error.title-stat,
.error.text-content {
.error.text-el {
@apply text-red-500;
}
.warning.subtitle-stat,
.warning.subtitle-card,
.warning.title-card,
.warning.title-container,
.warning.title-stat,
.warning.text-content {
.warning.text-el {
@apply text-yellow-500;
}
.info.subtitle-stat,
.info.subtitle-card,
.info.title-card,
.info.title-container,
.info.title-stat,
.info.text-content {
.info.text-el {
@apply text-sky-500;
}
.purple.subtitle-stat,
.purple.subtitle-card,
.purple.title-card,
.purple.title-container,
.purple.title-stat,
.purple.text-content {
.purple.text-el {
@apply text-purple-500;
}
.green.subtitle-stat,
.green.subtitle-card,
.green.title-card,
.green.title-container,
.green.title-stat,
.green.text-content {
.green.text-el {
@apply text-green-500;
}
.red.subtitle-stat,
.red.subtitle-card,
.red.title-card,
.red.title-container,
.red.title-stat,
.red.text-content {
.red.text-el {
@apply text-red-500;
}
.orange.subtitle-stat,
.orange.subtitle-card,
.orange.title-card,
.orange.title-container,
.orange.title-stat,
.orange.text-content {
.orange.text-el {
@apply text-orange-500;
}
.blue.subtitle-stat,
.blue.subtitle-card,
.blue.title-card,
.blue.title-container,
.blue.title-stat,
.blue.text-content {
.blue.text-el {
@apply text-blue-500;
}
.yellow.subtitle-stat,
.yellow.subtitle-card,
.yellow.title-card,
.yellow.title-container,
.yellow.title-stat,
.yellow.text-content {
.yellow.text-el {
@apply text-yellow-500;
}
.gray.subtitle-stat,
.gray.subtitle-card,
.gray.title-card,
.gray.title-container,
.gray.title-stat,
.gray.text-content {
.gray.text-el{
@apply text-gray-500;
}
.dark.subtitle-stat,
.dark.subtitle-card,
.dark.title-card,
.dark.title-container,
.dark.title-stat,
.dark.text-content {
.dark.text-el {
@apply text-slate-500;
}
.amber.subtitle-stat,
.amber.subtitle-card,
.amber.title-card,
.amber.title-container,
.amber.title-stat,
.amber.text-content {
.amber.text-el {
@apply text-amber-500;
}
.emerald.subtitle-stat,
.emerald.subtitle-card,
.emerald.title-card,
.emerald.title-container,
.emerald.title-stat,
.emerald.text-content {
.emerald.text-el {
@apply text-emerald-500;
}
.teal.subtitle-stat,
.teal.subtitle-card,
.teal.title-card,
.teal.title-container,
.teal.title-stat,
.teal.text-content {
.teal.text-el {
@apply text-teal-500;
}
.indigo.subtitle-stat,
.indigo.subtitle-card,
.indigo.title-card,
.indigo.title-container,
.indigo.title-stat,
.indigo.text-content {
.indigo.text-el {
@apply text-indigo-500;
}
.cyan.subtitle-stat,
.cyan.subtitle-card,
.cyan.title-card,
.cyan.title-container,
.cyan.title-stat,
.cyan.text-content {
.cyan.text-el{
@apply text-cyan-500;
}
.sky.subtitle-stat,
.sky.subtitle-card,
.sky.title-card,
.sky.title-container,
.sky.title-stat,
.sky.text-content {
.sky.text-el{
@apply text-sky-500;
}
.pink.subtitle-stat,
.pink.subtitle-card,
.pink.title-card,
.pink.title-container,
.pink.title-stat,
.pink.text-content {
.pink.text-el {
@apply text-pink-500;
}
.lime.subtitle-stat,
.lime.subtitle-card,
.lime.title-card,
.lime.title-container,
.lime.title-stat,
.lime.text-content {
.lime.text-el {
@apply text-lime-500;
}
.purple-darker.subtitle-stat,
.purple.subtitle-card,
.purple.title-card,
.purple.title-container,
.purple.title-stat,
.purple.text-content {
.purple-darker.text-el {
@apply text-purple-600;
}
.green-darker.subtitle-stat,
.green-dark.subtitle-card,
.green-dark.title-card,
.green-dark.title-container,
.green-dark.title-stat,
.green-darker.text-content {
.green-darker.text-el {
@apply text-green-700;
}
.red-darker.subtitle-stat,
.red-darker.subtitle-card,
.red-darker.title-card,
.red-darker.title-container,
.red-darker.title-stat,
.red-darker.text-content {
.red-darker.text-el {
@apply text-red-700;
}
.orange-darker.subtitle-stat,
.orange-darker.subtitle-card,
.orange-darker.title-card,
.orange-darker.title-container,
.orange-darker.title-stat,
.orange-darker.text-content {
.orange-darker.text-el {
@apply text-orange-600;
}
.blue-darker.subtitle-stat,
.blue-darker.subtitle-card,
.blue-darker.title-card,
.blue-darker.title-container,
.blue-darker.title-stat,
.blue-darker.text-content {
.blue-darker.text-el {
@apply text-blue-600;
}
.yellow-darker.subtitle-stat,
.yellow-darker.subtitle-card,
.yellow-darker.title-card,
.yellow-darker.title-container,
.yellow-darker.title-stat,
.yellow-darker.text-content {
.yellow-darker.text-el {
@apply text-yellow-600;
}
.gray-darker.subtitle-stat,
.gray-darker.subtitle-card,
.gray-darker.title-card,
.gray-darker.title-container,
.gray-darker.title-stat,
.gray-darker.text-content {
.gray-darker.text-el {
@apply text-gray-600;
}
.dark-darker.subtitle-stat,
.dark-darker.subtitle-card,
.dark-darker.title-card,
.dark-darker.title-container,
.dark-darker.title-stat,
.dark-darker.text-content {
.dark-darker.text-el {
@apply text-slate-600;
}
.amber-darker.subtitle-stat,
.amber-darker.subtitle-card,
.amber-darker.title-card,
.amber-darker.title-container,
.amber-darker.title-stat,
.amber-darker.text-content {
.amber-darker.text-el {
@apply text-amber-600;
}
.emerald-darker.subtitle-stat,
.emerald-darker.subtitle-card,
.emerald-darker.title-card,
.emerald-darker.title-container,
.emerald-darker.title-stat,
.emerald-darker.text-content {
.emerald-darker.text-el {
@apply text-emerald-600;
}
.teal-darker.subtitle-stat,
.teal-darker.subtitle-card,
.teal-darker.title-card,
.teal-darker.title-container,
.teal-darker.title-stat,
.teal-darker.text-content {
.teal-darker.text-el {
@apply text-teal-600;
}
.indigo-darker.subtitle-stat,
.indigo-darker.subtitle-card,
.indigo-darker.title-card,
.indigo-darker.title-container,
.indigo-darker.title-stat,
.indigo-darker.text-content {
.indigo-darker.text-el {
@apply text-indigo-600;
}
.cyan-darker.subtitle-stat,
.cyan-darker.subtitle-card,
.cyan-darker.title-card,
.cyan-darker.title-container,
.cyan-darker.title-stat,
.cyan-darker.text-content {
.cyan-darker.text-el {
@apply text-cyan-600;
}
.sky-darker.subtitle-stat,
.sky-darker.subtitle-card,
.sky-darker.title-card,
.sky-darker.title-container,
.sky-darker.title-stat,
.sky-darker.text-content {
.sky-darker.text-el {
@apply text-sky-700;
}
.pink-darker.subtitle-stat,
.pink-darker.subtitle-card,
.pink-darker.title-card,
.pink-darker.title-container,
.pink-darker.title-stat,
.pink-darker.text-content {
.pink-darker.text-el {
@apply text-pink-600;
}
.lime-darker.subtitle-stat,
.lime-darker.subtitle-card,
.lime-darker.title-card,
.lime-darker.title-container,
.lime-darker.title-stat,
.lime-darker.text-content {
.lime-darker.text-el {
@apply text-lime-600;
}

2
vuejs/client/public/css/style.css
View file

File diff suppressed because one or more lines are too long

1
vuejs/client/src/components/Builder/GlobalConfig.vue
View file

@ -30,7 +30,6 @@ import Templates from "@components/Form/Templates.vue";
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",
iconColor: "amber",
},
},
],

1
vuejs/client/src/components/Builder/Home.vue
View file

@ -22,7 +22,6 @@ import Stat from "@components/Widget/Stat.vue";
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",
iconColor: "amber",
},
},
],

2
vuejs/client/src/components/Builder/Plugins.vue
View file

@ -31,12 +31,10 @@ import ButtonGroup from "@components/Widget/ButtonGroup.vue";
{
text: "This is a popover text",
iconName: "info",
iconColor: "info",
},
{
text: "This is a popover text",
iconName: "info",
iconColor: "info",
},
],
},

57
vuejs/client/src/components/Form/Advanced.vue
View file

@ -1,5 +1,6 @@
<script setup>
import { defineProps, reactive, onMounted, computed, onUnmounted } from "vue";
import { defineProps, reactive, onMounted, onUnmounted } from "vue";
import MessageUnmatch from "@components/Message/Unmatch.vue";
import Container from "@components/Widget/Container.vue";
import Fields from "@components/Form/Fields.vue";
import Title from "@components/Widget/Title.vue";
@ -93,8 +94,6 @@ const comboboxPlugin = {
{
text: "inp_combobox_advanced_desc",
iconName: "info",
iconColor: "info",
svgSize: "sm",
},
],
columns: { pc: 3, tablet: 12, mobile: 12 },
@ -110,6 +109,7 @@ const buttonSave = {
"data-submit-form": JSON.stringify(data.base),
},
containerClass: "flex justify-center",
iconName: "plus",
};
const filters = [
@ -140,8 +140,6 @@ const filters = [
{
text: "inp_search_settings_desc",
iconName: "info",
iconColor: "info",
svgSize: "sm",
},
],
columns: { pc: 3, tablet: 4, mobile: 12 },
@ -167,8 +165,6 @@ const filters = [
{
text: "inp_select_plugin_type_desc",
iconName: "info",
iconColor: "info",
svgSize: "sm",
},
],
columns: { pc: 3, tablet: 4, mobile: 12 },
@ -194,8 +190,6 @@ const filters = [
{
text: "inp_select_plugin_context_desc",
iconName: "info",
iconColor: "info",
svgSize: "sm",
},
],
columns: { pc: 3, tablet: 4, mobile: 12 },
@ -205,10 +199,8 @@ const filters = [
const unmatch = {
text: "dashboard_no_match",
textClass: "text-unmatch",
icons: {
icon: {
iconName: "search",
iconColor: "info",
},
};
@ -295,9 +287,7 @@ onUnmounted(() => {
@inp="data.currPlugin = $event"
/>
</Filter>
<div v-if="!data.format.length" class="layout-unmatch">
<Text v-bind="unmatch" />
</div>
<MessageUnmatch v-if="!data.format.length" />
<template v-for="plugin in data.format">
<Container
data-is="content"
@ -323,23 +313,24 @@ onUnmounted(() => {
v-bind="buttonSave"
:disabled="data.isReqErr || data.isRegErr ? true : false"
/>
<Text
v-if="
(data.format.length && data.isRegErr) ||
(data.format.length && data.isReqErr)
"
:textClass="'form-setting-error'"
:text="
data.isReqErr
? $t('dashboard_advanced_required', {
plugin: data.pluginErr,
setting: data.settingErr,
})
: $t('dashboard_advanced_invalid', {
plugin: data.pluginErr,
setting: data.settingErr,
})
"
/>
<div class="flex justify-center items-center" data-is="form-error">
<Text
v-if="
(data.format.length && data.isRegErr) ||
(data.format.length && data.isReqErr)
"
:text="
data.isReqErr
? $t('dashboard_advanced_required', {
plugin: data.pluginErr,
setting: data.settingErr,
})
: $t('dashboard_advanced_invalid', {
plugin: data.pluginErr,
setting: data.settingErr,
})
"
/>
</div>
</Container>
</template>

36
vuejs/client/src/components/Form/Easy.vue
View file

@ -4,7 +4,6 @@ import Container from "@components/Widget/Container.vue";
import Fields from "@components/Form/Fields.vue";
import Title from "@components/Widget/Title.vue";
import Subtitle from "@components/Widget/Subtitle.vue";
import Flex from "@components/Widget/Flex.vue";
import Button from "@components/Widget/Button.vue";
import Text from "@components/Widget/Text.vue";
import { v4 as uuidv4 } from "uuid";
@ -174,7 +173,7 @@ onUnmounted(() => {
</Container>
</Container>
</template>
<Flex :flexClass="'justify-center'">
<div class="flex justify-center items-center">
<Button
@click="data.currStep = Math.max(data.currStep - 1, 0)"
:disabled="data.isFirstStep"
@ -191,21 +190,22 @@ onUnmounted(() => {
:disabled="!data.isFinalStep || data.isRegErr || data.isReqErr"
v-bind="buttonSave"
/>
</Flex>
<Text
v-if="data.isRegErr || data.isReqErr"
:textClass="'form-setting-error'"
:text="
data.isReqErr
? $t('dashboard_easy_required', {
step: data.stepErr,
setting: data.settingErr,
})
: $t('dashboard_easy_invalid', {
step: data.stepErr,
setting: data.settingErr,
})
"
/>
</div>
<div class="flex justify-center items-center" data-is="form-error">
<Text
v-if="data.isRegErr || data.isReqErr"
:text="
data.isReqErr
? $t('dashboard_easy_required', {
step: data.stepErr,
setting: data.settingErr,
})
: $t('dashboard_easy_invalid', {
step: data.stepErr,
setting: data.settingErr,
})
"
/>
</div>
</Container>
</template>

1
vuejs/client/src/components/Form/Fields.vue
View file

@ -24,7 +24,6 @@ import { contentIndex } from "@utils/tabindex.js";
{
text: "This is a popover text",
iconName: "info",
iconColor: "info",
},
]
}

12
vuejs/client/src/components/Form/Raw.vue
View file

@ -152,10 +152,12 @@ const buttonSave = {
</Container>
<Button :disabled="data.isValid ? false : true" v-bind="buttonSave" />
<Text
v-if="!data.isValid"
:text="'dashboard_raw_invalid'"
:textClass="'form-setting-error'"
/>
<div class="flex justify-center items-center" data-is="form-error">
<Text
v-if="!data.isValid"
:text="'dashboard_raw_invalid'"
:textClass="'form-setting-error'"
/>
</div>
</Container>
</template>

2
vuejs/client/src/components/Form/Templates.vue
View file

@ -46,8 +46,6 @@ const comboboxTemplate = {
{
text: "inp_templates_desc",
iconName: "info",
iconColor: "info",
svgSize: "sm",
},
],
};

1
vuejs/client/src/components/Forms/Field/Checkbox.vue
View file

@ -26,7 +26,6 @@ import { useUUID } from "@utils/global.js";
{
text: "This is a popover text",
iconName: "info",
iconColor: "info",
},
]
}

1
vuejs/client/src/components/Forms/Field/Combobox.vue
View file

@ -34,7 +34,6 @@ import { useUUID } from "@utils/global.js";
{
text: "This is a popover text",
iconName: "info",
iconColor: "info",
},]
}
@param {string} [id=uuidv4()] - Unique id

1
vuejs/client/src/components/Forms/Field/Datepicker.vue
View file

@ -32,7 +32,6 @@ import "@assets/css/flatpickr.dark.min.css";
{
text: "This is a popover text",
iconName: "info",
iconColor: "info",
},
],
}

57
vuejs/client/src/components/Forms/Field/Editor.vue
View file

@ -6,13 +6,13 @@ import {
onMounted,
defineProps,
onUnmounted,
onUpdated,
} from "vue";
import { contentIndex } from "@utils/tabindex.js";
import Container from "@components/Widget/Container.vue";
import Header from "@components/Forms/Header/Field.vue";
import ErrorField from "@components/Forms/Error/Field.vue";
import Clipboard from "@components/Forms/Feature/Clipboard.vue";
import { v4 as uuidv4 } from "uuid";
import { useUUID } from "@utils/global.js";
import "@assets/script/editor/ace.js";
@ -59,7 +59,7 @@ const props = defineProps({
id: {
type: String,
required: false,
default: "",
default: uuidv4(),
},
columns: {
type: [Object, Boolean],
@ -274,22 +274,23 @@ class Editor {
function removeErrCSS() {
setTimeout(() => {
try {
const editorArea = document.querySelector("textarea.ace_text-input");
const dictStyle = JSON.parse(
JSON.stringify(
document.querySelector('[style*="font-optical-sizing"]').style
)
const styleEditors = document.querySelectorAll(
'[style*="font-optical-sizing"]'
);
// Loop and remove key if value is 'font-optical-sizing'
for (const [key, value] of Object.entries(dictStyle)) {
if (value === "font-optical-sizing") {
delete dictStyle[key];
styleEditors.forEach((editor) => {
const dictStyle = JSON.parse(JSON.stringify(editor.style));
// Loop and remove key if value is 'font-optical-sizing'
for (const [key, value] of Object.entries(dictStyle)) {
if (value === "font-optical-sizing") {
delete dictStyle[key];
}
}
}
document.querySelector('[style*="font-optical-sizing"]').style =
dictStyle;
} catch (e) {}
editor.style = dictStyle;
});
} catch (e) {
console.log(e);
}
}, 100);
}
@ -317,18 +318,20 @@ function setEditorAttrs() {
// Use ace editor
onMounted(() => {
editor.id = useUUID(props.id);
// Default value
editorEl = new Editor();
editorEl.setValue(editor.value);
editorEl.readOnlyBool(props.disabled);
editorEl.editor.on("change", () => {
editor.value = editorEl.getValue();
// emit inp
emits("inp", editor.value);
});
setTimeout(() => {
// Default value
editorEl = new Editor();
editorEl.setValue(editor.value);
editorEl.readOnlyBool(props.disabled);
editorEl.editor.on("change", () => {
editor.value = editorEl.getValue();
// emit inp
emits("inp", editor.value);
});
setEditorAttrs();
removeErrCSS();
setEditorAttrs();
removeErrCSS();
}, 10);
});
onUnmounted(() => {

1
vuejs/client/src/components/Forms/Field/Input.vue
View file

@ -29,7 +29,6 @@ import { useUUID } from "@utils/global.js";
{
text: "This is a popover text",
iconName: "info",
iconColor: "info",
},
],
}

1
vuejs/client/src/components/Forms/Field/Select.vue
View file

@ -27,7 +27,6 @@ import { useUUID } from "@utils/global";
{
text: "This is a popover text",
iconName: "info",
iconColor: "info",
},]
}
@param {string} [id=uuidv4()] - Unique id

1
vuejs/client/src/components/Forms/Header/Field.vue
View file

@ -17,7 +17,6 @@ import PopoverGroup from "@components/Widget/PopoverGroup.vue";
{
text: "This is a popover text",
iconName: "info",
iconColor: "info",
},
],
}

5
vuejs/client/src/components/Icons/Box.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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,6 +23,7 @@ const props = defineProps({
required: false,
default: "dark",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,6 +33,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="box"
role="img"
aria-hidden="true"

3
vuejs/client/src/components/Icons/Carton.vue
View file

@ -9,6 +9,7 @@ import { defineProps, reactive } from "vue";
}
@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({
@ -22,6 +23,7 @@ const props = defineProps({
required: false,
default: "orange-darker",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,6 +33,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="carton"
role="img"
aria-hidden="true"

5
vuejs/client/src/components/Icons/Check.vue
View file

@ -10,7 +10,8 @@ import { defineProps, reactive, onMounted } from "vue";
}
@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: {
@ -23,6 +24,7 @@ const props = defineProps({
required: false,
default: "success",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -38,6 +40,7 @@ onMounted(() => {
<span :id="icon.id" class="sr-only">{{ $t("icons_check_desc") }}</span>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="check"
role="img"
xmlns="http://www.w3.org/2000/svg"

5
vuejs/client/src/components/Icons/Close.vue
View file

@ -10,7 +10,8 @@ import { useUUID } from "@utils/global.js";
}
@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: {
@ -23,6 +24,7 @@ const props = defineProps({
required: false,
default: "dark",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -41,6 +43,7 @@ onMounted(() => {
viewBox="0 0 24 24"
fill="currentColor"
:data-color="icon.color"
:disabled="props.disabled"
data-svg="cross"
role="img"
:class="[props.iconClass, icon.color, 'fill']"

5
vuejs/client/src/components/Icons/Core.vue
View file

@ -10,7 +10,8 @@ import { useUUID } from "@utils/global.js";
}
@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: {
@ -23,6 +24,7 @@ const props = defineProps({
required: false,
default: "cyan-darker",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -41,6 +43,7 @@ onMounted(() => {
viewBox="0 0 24 24"
fill="currentColor"
:data-color="icon.color"
:disabled="props.disabled"
data-svg="core"
role="img"
:class="[props.iconClass, icon.color, 'fill']"

5
vuejs/client/src/components/Icons/Cross.vue
View file

@ -10,7 +10,8 @@ import { useUUID } from "@utils/global.js";
}
@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: {
@ -23,6 +24,7 @@ const props = defineProps({
required: false,
default: "red",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -41,6 +43,7 @@ onMounted(() => {
viewBox="0 0 24 24"
fill="currentColor"
:data-color="icon.color"
:disabled="props.disabled"
data-svg="cross"
role="img"
:class="[props.iconClass, icon.color, 'fill']"

5
vuejs/client/src/components/Icons/Crown.vue
View file

@ -11,7 +11,8 @@ import { useUUID } from "@utils/global.js";
}
@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: {
@ -24,6 +25,7 @@ const props = defineProps({
required: false,
default: "amber",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -39,6 +41,7 @@ onMounted(() => {
<span :id="icon.id" class="sr-only">{{ $t("icons_crown_desc") }}</span>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="crown"
role="img"
:aria-labelledby="icon.id"

5
vuejs/client/src/components/Icons/Discord.vue
View file

@ -10,7 +10,8 @@ import { useUUID } from "@utils/global.js";
}
@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: {
@ -23,6 +24,7 @@ const props = defineProps({
required: false,
default: "discord",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -38,6 +40,7 @@ onMounted(() => {
<span :id="icon.id" class="sr-only">{{ $t("icons_discord_desc") }}</span>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="discord"
role="img"
fill="none"

5
vuejs/client/src/components/Icons/Disk.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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,6 +23,7 @@ const props = defineProps({
required: false,
default: "orange",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,6 +33,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="disk"
role="img"
aria-hidden="true"

5
vuejs/client/src/components/Icons/Disks.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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,6 +23,7 @@ const props = defineProps({
required: false,
default: "orange",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,6 +33,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="disks"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"

49
vuejs/client/src/components/Icons/Exclamation.vue Normal file
View file

@ -0,0 +1,49 @@
<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.
*/
const props = defineProps({
iconClass: {
type: String,
required: false,
default: "icon-default",
},
color: {
type: String,
required: false,
default: "red",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
color: props.color || "red",
});
</script>
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="box"
role="img"
aria-hidden="true"
:class="[props.iconClass, icon.color]"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12.378 1.602a.75.75 0 0 0-.756 0L3 6.632l9 5.25 9-5.25-8.622-5.03ZM21.75 7.93l-9 5.25v9l8.628-5.032a.75.75 0 0 0 .372-.648V7.93ZM11.25 22.18v-9l-9-5.25v8.57a.75.75 0 0 0 .372.648l8.628 5.033Z"
/>
</svg>
</template>

5
vuejs/client/src/components/Icons/External.vue
View file

@ -10,7 +10,8 @@ import { useUUID } from "@utils/global.js";
}
@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: {
@ -23,6 +24,7 @@ const props = defineProps({
required: false,
default: "blue",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -41,6 +43,7 @@ onMounted(() => {
viewBox="0 0 24 24"
fill="currentColor"
:data-color="icon.color"
:disabled="props.disabled"
data-svg="external"
role="img"
:class="[props.iconClass, icon.color, 'fill']"

5
vuejs/client/src/components/Icons/Flag.vue
View file

@ -10,7 +10,8 @@ import { defineProps, reactive } from "vue";
}
@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: {
@ -23,6 +24,7 @@ const props = defineProps({
required: false,
default: "amber",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -32,6 +34,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="flag"
role="img"
aria-hidden="true"

5
vuejs/client/src/components/Icons/Funnel.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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,6 +23,7 @@ const props = defineProps({
required: false,
default: "red-dark",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,6 +33,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="flag"
role="img"
aria-hidden="true"

5
vuejs/client/src/components/Icons/Gear.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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,6 +23,7 @@ const props = defineProps({
required: false,
default: "dark",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,6 +33,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="gear"
role="img"
aria-hidden="true"

5
vuejs/client/src/components/Icons/Github.vue
View file

@ -10,7 +10,8 @@ import { useUUID } from "@utils/global.js";
}
@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: {
@ -23,6 +24,7 @@ const props = defineProps({
required: false,
default: "github",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -38,6 +40,7 @@ onMounted(() => {
<span :id="icon.id" class="sr-only">{{ $t("icons_github_desc") }}</span>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="github"
role="img"
fill="none"

5
vuejs/client/src/components/Icons/Globe.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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,6 +23,7 @@ const props = defineProps({
required: false,
default: "blue",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,6 +33,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="globe"
role="img"
aria-hidden="true"

5
vuejs/client/src/components/Icons/House.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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,6 +23,7 @@ const props = defineProps({
required: false,
default: "cyan-darker",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,6 +33,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="house"
role="img"
aria-hidden="true"

5
vuejs/client/src/components/Icons/Info.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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,6 +23,7 @@ const props = defineProps({
required: false,
default: "info",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,6 +33,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="info"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"

5
vuejs/client/src/components/Icons/Key.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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,6 +23,7 @@ const props = defineProps({
required: false,
default: "amber",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,6 +33,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="key"
role="img"
aria-hidden="true"

5
vuejs/client/src/components/Icons/Linkedin.vue
View file

@ -10,7 +10,8 @@ import { useUUID } from "@utils/global.js";
}
@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: {
@ -23,6 +24,7 @@ const props = defineProps({
required: false,
default: "linkedin",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -38,6 +40,7 @@ onMounted(() => {
<span :id="icon.id" class="sr-only">{{ $t("icons_linkedin_desc") }}</span>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="key"
role="img"
:class="[props.iconClass, icon.color, 'fill']"

5
vuejs/client/src/components/Icons/List.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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,6 +23,7 @@ const props = defineProps({
required: false,
default: "dark",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,6 +33,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="list"
:class="[props.iconClass, icon.color, 'fill']"
role="img"

5
vuejs/client/src/components/Icons/Lock.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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,6 +23,7 @@ const props = defineProps({
required: false,
default: "yellow",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -34,6 +36,7 @@ const icon = reactive({
viewBox="0 0 24 24"
fill="currentColor"
:data-color="icon.color"
:disabled="props.disabled"
data-svg="lock"
role="img"
aria-hidden="true"

5
vuejs/client/src/components/Icons/Plus.vue
View file

@ -10,7 +10,8 @@ import { useUUID } from "@utils/global.js";
}
@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: {
@ -23,6 +24,7 @@ const props = defineProps({
required: false,
default: "success",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -39,6 +41,7 @@ onMounted(() => {
<span :id="icon.id" class="sr-only">{{ $t("icons_plus_desc") }}</span>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="plus"
role="img"
:aria-labelledby="icon.id"

5
vuejs/client/src/components/Icons/Puzzle.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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,6 +23,7 @@ const props = defineProps({
required: false,
default: "yellow",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,6 +33,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="puzzle"
:class="[props.iconClass, icon.color, 'fill']"
role="img"

7
vuejs/client/src/components/Icons/Redirect.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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,6 +23,7 @@ const props = defineProps({
required: false,
default: "blue",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,10 +33,11 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="redirect"
role="img"
aria-hidden="true"
:class="[props.iconClass, icon.color, 'fill scale-90']"
:class="[props.iconClass, icon.color, 'fill']"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
>

5
vuejs/client/src/components/Icons/Search.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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,6 +23,7 @@ const props = defineProps({
required: false,
default: "info",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,6 +33,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="search"
role="img"
aria-hidden="true"

5
vuejs/client/src/components/Icons/Settings.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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: {
@ -22,6 +23,7 @@ const props = defineProps({
required: false,
default: "blue-darker",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,6 +33,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="settings"
role="img"
aria-hidden="true"

5
vuejs/client/src/components/Icons/Task.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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,6 +23,7 @@ const props = defineProps({
required: false,
default: "success",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,6 +33,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="task"
:class="[props.iconClass, icon.color, 'fill']"
role="img"

5
vuejs/client/src/components/Icons/Trash.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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,6 +23,7 @@ const props = defineProps({
required: false,
default: "red",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -34,6 +36,7 @@ const icon = reactive({
viewBox="0 0 24 24"
fill="currentColor"
:data-color="icon.color"
:disabled="props.disabled"
data-svg="trash"
role="img"
aria-hidden="true"

5
vuejs/client/src/components/Icons/Trespass.vue
View file

@ -10,7 +10,8 @@ import { useUUID } from "@utils/global.js";
}
@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: {
@ -23,6 +24,7 @@ const props = defineProps({
required: false,
default: "error",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -39,6 +41,7 @@ onMounted(() => {
<span :id="icon.id" class="sr-only">{{ $t("icons_trespass_desc") }}</span>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="trespass"
role="img"
:aria-labelledby="icon.id"

5
vuejs/client/src/components/Icons/Twitter.vue
View file

@ -10,7 +10,8 @@ import { useUUID } from "@utils/global.js";
}
@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: {
@ -23,6 +24,7 @@ const props = defineProps({
required: false,
default: "twitter",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -38,6 +40,7 @@ onMounted(() => {
<span :id="icon.id" class="sr-only">{{ $t("icons_twitter_desc") }}</span>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="twitter"
role="img"
:aria-labelledby="icon.id"

5
vuejs/client/src/components/Icons/Wire.vue
View file

@ -9,7 +9,8 @@ import { defineProps, reactive } from "vue";
}
@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: {
@ -22,6 +23,7 @@ const props = defineProps({
required: false,
default: "green",
},
disabled: { type: Boolean, required: false, default: false },
});
const icon = reactive({
@ -31,6 +33,7 @@ const icon = reactive({
<template>
<svg
:data-color="icon.color"
:disabled="props.disabled"
data-svg="wire"
role="img"
aria-hidden="true"

13
vuejs/client/src/components/List/Details.vue
View file

@ -1,7 +1,5 @@
<script setup>
import { defineProps, computed, reactive } from "vue";
import Flex from "@components/Widget/Flex.vue";
import Container from "@components/Widget/Container.vue";
import PopoverGroup from "@components/Widget/PopoverGroup.vue";
import Text from "@components/Widget/Text.vue";
import Filter from "@components/Widget/Filter.vue";
@ -23,12 +21,10 @@ import Grid from "@components/Widget/Grid.vue";
{
text: "This is a popover text",
iconName: "info",
iconColor: "info",
},
{
text: "This is a popover text",
iconName: "info",
iconColor: "info",
},
],
}]
@ -66,9 +62,8 @@ const gridClass = computed(() => {
const unmatch = {
text: "dashboard_no_match",
textClass: "text-unmatch",
icons: {
icon: {
iconName: "search",
iconColor: "info",
},
};
</script>
@ -81,7 +76,7 @@ const unmatch = {
:data="data.base"
:filters="props.filters"
/>
<div v-if="!data.format.length" class="layout-unmatch">
<div data-is="unmatch" v-if="!data.format.length" class="layout-unmatch">
<Text v-bind="unmatch" />
</div>
<ul
@ -98,12 +93,12 @@ const unmatch = {
]"
v-bind="item.attrs || {}"
>
<Flex :flexClass="'list-details-flex'">
<div class="list-details-item-wrap">
<Text :tag="'p'" :text="item.text" />
<div>
<PopoverGroup :popovers="item.popovers" />
</div>
</Flex>
</div>
</li>
</ul>
</Grid>

53
vuejs/client/src/components/Message/Unmatch.vue Normal file
View file

@ -0,0 +1,53 @@
<script setup>
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.
*/
const props = defineProps({
text: {
type: String,
required: false,
},
unmatchClass: {
type: String,
required: false,
default: "",
},
});
const msg = reactive({
text: "dashboard_no_match",
class: "",
});
const msgEl = ref(null);
onMounted(() => {
msg.text = props.text || msg.text;
msg.class =
props.unmatchClass || msgEl.value.closest("[data-is]")
? `msg-unmatch-${msgEl.value
.closest("[data-is]")
.getAttribute("data-is")}`
: "msg-unmatch-base";
});
</script>
<template>
<div class="msg-container" ref="msgEl">
<div data-is="unmatch" :class="[msg.class]">
<Text :icon="{ iconName: 'search' }" :text="msg.text" />
</div>
</div>
</template>

13
vuejs/client/src/components/Widget/Button.vue
View file

@ -17,7 +17,6 @@ import { useUUID } from "@utils/global.js";
color: "green",
size: "normal",
iconName: "modal",
iconColor: "white",
attrs: { data-toggle: "modal", "data-target": "#modal"},
}
@ -27,9 +26,9 @@ import { useUUID } from "@utils/global.js";
@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 {string} [iconColor=""]
@param {Object} [attrs={}] - List of attributs to add to the button. Some attributs will conduct to additionnal script
@param {string|number} [tabId=contentIndex] - The tabindex of the field, by default it is the contentIndex
*/
@ -86,11 +85,6 @@ const props = defineProps({
required: false,
default: "",
},
iconClass: {
type: String,
required: false,
default: "sm",
},
attrs: {
type: Object,
required: false,
@ -127,6 +121,7 @@ onMounted(() => {
<template>
<Container
data-is="button"
:containerClass="`${props.containerClass}`"
:columns="props.columns"
>
@ -158,8 +153,8 @@ onMounted(() => {
<Icons
v-if="props.iconName"
:iconName="props.iconName"
:iconClass="`${props.iconClass} pointer-events-none`"
:iconColor="props.iconColor"
:color="props.iconColor"
:disabled="props.disabled || false"
/>
</button>
</Container>

39
vuejs/client/src/components/Widget/ButtonGroup.vue
View file

@ -1,6 +1,6 @@
<script setup>
import Flex from "@components/Widget/Flex.vue";
import Button from "@components/Widget/Button.vue";
import { onMounted, reactive, ref } from "vue";
/**
@name Widget/ButtonGroup.vue
@ -20,7 +20,6 @@ import Button from "@components/Widget/Button.vue";
color: "green",
size: "normal",
iconName: "modal",
iconColor: "white",
eventAttr: {"store" : "modal", "value" : "open", "target" : "modal_id", "valueExpanded" : "open"},
},
{
@ -31,36 +30,54 @@ import Button from "@components/Widget/Button.vue";
color: "red",
size: "normal",
iconName: "modal",
iconColor: "white",
eventAttr: {"store" : "modal", "value" : "close", "target" : "modal_id", "valueExpanded" : "close"},
},
],
}
@param {string} [groupClass="justify-center items-center"] - Additional class for the flex container
@param {array} buttons - List of buttons to display. Button component is used.
@param {string} [groupClass=""] - Additional class for the flex container
*/
const props = defineProps({
groupClass: {
type: String,
required: false,
default: "justify-center items-center",
},
buttons: {
type: Array,
required: true,
default: [],
},
groupClass: {
type: String,
required: false,
default: "",
},
});
const group = reactive({
class: "",
});
const groupEl = ref(null);
onMounted(() => {
group.class =
props.groupClass || groupEl.value.closest("[data-is]")
? `button-group-${groupEl.value
.closest("[data-is]")
.getAttribute("data-is")}`
: "button-group-default";
});
</script>
<template>
<Flex v-if="props.buttons.length > 0" :flexClass="props.groupClass">
<div
ref="groupEl"
:class="[group.class, props.groupClass]"
v-if="props.buttons.length > 0"
>
<Button
v-for="(button, id) in props.buttons"
:key="button"
v-bind="button"
:class="[id === props.buttons.length - 1 ? '' : 'mr-2']"
/>
</Flex>
</div>
</template>

1
vuejs/client/src/components/Widget/Filter.vue
View file

@ -37,7 +37,6 @@ import { useFilter } from "@utils/form.js";
{
text: "inp_select_plugin_type_desc",
iconName: "info",
iconColor: "info",
},
],
columns: { pc: 3, tablet: 4, mobile: 12 },

34
vuejs/client/src/components/Widget/Flex.vue
View file

@ -1,34 +0,0 @@
<script setup>
import { computed } from "vue";
/**
@name Widget/Flex.vue
@description This component is a basic container that can be used to wrap other components.
Per default, it aligns the components horizontally using flex.
We can define additional class too.
This component is mainly use as widget container or for groups of widget.
@example
{
flexClass: "flex-start"
}
@param {string} [flexClass="flex-start"] - Additional class
*/
const props = defineProps({
flexClass: {
type: String,
required: false,
default: "flex-start",
},
});
const flexClass = computed(() => {
return `w-full flex ${props.flexClass}`;
});
</script>
<template>
<div data-flex :class="[flexClass]">
<slot></slot>
</div>
</template>

4
vuejs/client/src/components/Widget/GridLayout.vue
View file

@ -114,9 +114,7 @@ onMounted(() => {
:attrs="{ 'data-hide-el': container.id }"
:text="'action_close_modal'"
:hideText="true"
:iconName="'cross'"
:iconColor="'dark'"
:iconClass="'lg'"
:iconName="'close'"
:color="'transparent'"
/>
</div>

44
vuejs/client/src/components/Widget/Icons.vue
View file

@ -31,6 +31,7 @@ import External from "@components/Icons/External.vue";
import Trash from "@components/Icons/Trash.vue";
import Lock from "@components/Icons/Lock.vue";
import Search from "@components/Icons/Search.vue";
import Exclamation from "@components/Icons/Exclamation.vue";
/**
@name Widget/Icons.vue
@ -47,6 +48,7 @@ import Search from "@components/Icons/Search.vue";
@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({
@ -69,6 +71,11 @@ const props = defineProps({
required: false,
default: false,
},
disabled: {
type: Boolean,
required: false,
default: false,
},
});
const icon = reactive({
@ -87,160 +94,197 @@ onMounted(() => {
</script>
<template>
<div ref="iconEl" :class="[props.isStick ? 'stick' : '', 'icon-container']">
<Exclamation
v-if="props.iconName === 'exclamation'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Box
v-if="props.iconName === 'box'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Carton
v-if="props.iconName === 'carton'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Core
v-if="props.iconName === 'core'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<External
v-if="props.iconName === 'external'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Search
v-if="props.iconName === 'search'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Trash
v-if="props.iconName === 'trash'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Lock
v-if="props.iconName === 'lock'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Crown
v-if="props.iconName === 'crown'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Discord
v-if="props.iconName === 'discord'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Disk
v-if="props.iconName === 'disk'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Disks
v-if="props.iconName === 'disks'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Globe
v-if="props.iconName === 'globe'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Info
v-if="props.iconName === 'info'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Flag
v-if="props.iconName === 'flag'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Gear
v-if="props.iconName === 'gear'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Github
v-if="props.iconName === 'github'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<House
v-if="props.iconName === 'house'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<List
v-if="props.iconName === 'list'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Key
v-if="props.iconName === 'key'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Linkedin
v-if="props.iconName === 'linkedin'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Plus
v-if="props.iconName === 'plus'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Puzzle
v-if="props.iconName === 'puzzle'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Settings
v-if="props.iconName === 'settings'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Task
v-if="props.iconName === 'task'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Trespass
v-if="props.iconName === 'trespass'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Check
v-if="props.iconName === 'check'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Cross
v-if="props.iconName === 'cross'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Twitter
v-if="props.iconName === 'twitter'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Wire
v-if="props.iconName === 'wire'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Funnel
v-if="props.iconName === 'funnel'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
<Redirect
v-if="props.iconName === 'redirect'"
:iconClass="icon.class"
:color="props.color"
:disabled="props.disabled"
/>
</div>
</template>

8
vuejs/client/src/components/Widget/Instance.vue
View file

@ -28,7 +28,6 @@ import ButtonGroup from "@components/Widget/ButtonGroup.vue";
color: "green",
size: "normal",
iconName: "modal",
iconColor: "white",
},
]
}
@ -62,13 +61,10 @@ const props = defineProps({
</script>
<template>
<Container :columns="{ pc: 12, tablet: 12, mobile: 12 }">
<Container data-is="instance" :columns="{ pc: 12, tablet: 12, mobile: 12 }">
<Status :id="props.title" :status="props.status" />
<Title type="card" :title="props.title" />
<ListPairs :pairs="props.pairs" />
<ButtonGroup
:buttons="props.buttons"
:groupClass="'justify-end item-center'"
/>
<ButtonGroup :buttons="props.buttons" />
</Container>
</template>

8
vuejs/client/src/components/Widget/Popover.vue
View file

@ -12,7 +12,6 @@ import Icons from "@components/Widget/Icons.vue";
text: "This is a popover text",
href: "#",
iconName: "info",
iconColor: "info",
attrs: { "data-popover": "test" },
}
@param {string} text - Content of the popover. Can be a translation key or by default raw text.
@ -136,6 +135,11 @@ watch(popover, () => {
onMounted(() => {
popover.id = useUUID();
// Set props color or the default icon color
popover.color =
props.color || popoverBtn.value.querySelector("[data-svg]")
? popoverBtn.value.querySelector("[data-svg]").getAttribute("data-color")
: "info";
// Remove href if tag is not an anchor
if (props.tag !== "a") {
@ -181,7 +185,7 @@ onMounted(() => {
:aria-hidden="popover.isOpen ? 'false' : 'true'"
:class="[
'popover-container bg-el',
props.iconColor,
popover.color,
popover.isOpen ? 'open' : 'close',
]"
:aria-description="$t('dashboard_popover_detail_desc')"

18
vuejs/client/src/components/Widget/PopoverGroup.vue
View file

@ -1,7 +1,5 @@
<script setup>
import Flex from "@components/Widget/Flex.vue";
import Popover from "@components/Widget/Popover.vue";
import { v4 as uuidv4 } from "uuid";
/**
@name Widget/PopoverGroup.vue
@ -15,17 +13,15 @@ import { v4 as uuidv4 } from "uuid";
{
text: "This is a popover text",
iconName: "info",
iconColor: "info",
},
{
text: "This is a popover text",
iconName: "info",
iconColor: "info",
},
],
}
@param {string} [flexClass="justify-center items-start"] - Additional class for the flex container
@param {array} popovers - List of popovers to display. Popover component is used.
@param {string} [groupClasss=""] - Additional class for the flex container
*/
const props = defineProps({
@ -34,21 +30,23 @@ const props = defineProps({
required: true,
default: [],
},
flexClass: {
groupClasss: {
type: String,
required: false,
default: "justify-center items-start",
default: "",
},
});
</script>
<template>
<Flex v-if="props.popovers.length > 0" :flexClass="props.flexClass">
<div
v-if="props.popovers.length > 0"
:class="['flex justify-center items-center', props.groupClasss]"
>
<Popover
v-for="(popover, id) in props.popovers"
:key="popover"
v-bind="popover"
:popoverClass="id === props.popovers.length - 1 ? '' : 'mr-2'"
/>
</Flex>
</div>
</template>

6
vuejs/client/src/components/Widget/Stat.vue
View file

@ -16,7 +16,6 @@ import Icons from "@components/Widget/Icons.vue";
value: 100,
subtitle : "Last 30 days",
iconName: "user",
iconColor: "sky",
link: "/users",
subtitleColor: "info",
}
@ -24,7 +23,6 @@ import Icons from "@components/Widget/Icons.vue";
@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} [iconColor="sky"] - 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, lime, rose, fuchsia, violet, lightBlue, warmGray, trueGray, coolGray, blueGray, white, black)
@param {string} [subtitleColor="info"] - The color of the subtitle between error, success, warning, info
@param {string} [statClass=""] - Additional class
*/
@ -48,10 +46,10 @@ const props = defineProps({
required: false,
default: "",
},
iconColor: {
color: {
type: String,
required: false,
default: "sky",
default: "",
},
subtitleColor: {
type: String,

2
vuejs/client/src/components/Widget/Subtitle.vue
View file

@ -72,7 +72,7 @@ onMounted(() => {
data-subtitle
:is="tag"
v-if="props.subtitle"
:class="[subtitle.class, props.color]"
:class="[subtitle.class, props.color, 'text-el']"
>
{{ $t(props.subtitle, props.subtitle) }}
</component>

30
vuejs/client/src/components/Widget/Table.vue
View file

@ -1,6 +1,7 @@
<script setup>
import { reactive, computed, ref, onMounted, watch } from "vue";
import { v4 as uuidv4 } from "uuid";
import MessageUnmatch from "@components/Message/Unmatch.vue";
import Container from "@components/Widget/Container.vue";
import Text from "@components/Widget/Text.vue";
import Icons from "@components/Widget/Icons.vue";
@ -54,7 +55,6 @@ import Filter from "@components/Widget/Filter.vue";
{
text: "inp_select_plugin_type_desc",
iconName: "info",
iconColor: "info",
},
],
columns: { pc: 3, tablet: 4, mobile: 12 },
@ -215,15 +215,14 @@ onMounted(() => {
</th>
</tr>
</thead>
<tbody data-table-body ref="tableBody" class="table-content">
<tr
v-if="!table.itemsFormat.length"
:style="{ maxWidth: unmatchWidth }"
ref="unmatchEl"
class="layout-unmatch-table"
>
<Text v-bind="unmatch" />
</tr>
<tbody
v-show="table.itemsFormat.length"
:aria-hidden="!table.itemsFormat.length ? 'true' : 'false'"
data-table-body
ref="tableBody"
class="table-content"
>
<tr
v-for="rowId in table.rowLength"
:key="rowId - 1"
@ -248,6 +247,17 @@ onMounted(() => {
</tr>
</tbody>
</table>
<div
v-show="!table.itemsFormat.length"
:aria-hidden="table.itemsFormat.length ? 'true' : 'false'"
class="table-unmatch"
>
<MessageUnmatch
v-if="!table.itemsFormat.length"
:style="{ maxWidth: unmatchWidth }"
ref="unmatchEl"
/>
</div>
</Container>
</Container>
</template>

27
vuejs/client/src/components/Widget/Text.vue
View file

@ -1,6 +1,5 @@
<script setup>
import Icons from "@components/Widget/Icons.vue";
import Flex from "@components/Widget/Flex.vue";
import { onMounted, reactive, ref } from "vue";
/**
@ -16,7 +15,7 @@ import { onMounted, reactive, ref } from "vue";
@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 {string} [tag="p"] - The tag of the text. Can be p, span, div, h1, h2, h3, h4, h5, h6
@param {boolean|object} [icons=false] - The popover to display with the text. Check Popover component for more details.
@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.
*/
@ -40,7 +39,7 @@ const props = defineProps({
required: false,
default: "p",
},
icons: {
icon: {
type: [Boolean, Object],
required: false,
default: false,
@ -62,35 +61,35 @@ const textIconEl = ref(null);
onMounted(() => {
// Check if next sibling is a
const renderEl = textEl.value || textIconEl.value || null;
text.class =
props.textClass || (textEl.value && textEl.value.closest("[data-is]"))
? `text-${textEl.value.closest("[data-is]").getAttribute("data-is")}`
: textIconEl.value && textIconEl.value.closest("[data-is]")
? `text-${textIconEl.value.closest("[data-is]").getAttribute("data-is")}`
: "text-content";
props.textClass || renderEl.closest("[data-is]")
? `text-${renderEl.closest("[data-is]").getAttribute("data-is")}`
: "text-card";
});
</script>
<template>
<component
v-if="!props.icons"
v-if="!props.icon"
:is="props.tag"
v-bind="props.attrs"
ref="textEl"
:class="[text.class, props.color]"
:class="[text.class, props.color, 'text-el']"
>
{{ $t(props.text, props.text) }}
</component>
<Flex :flexClass="'justify-center'" v-if="props.icons">
<Icons v-if="props.icons" v-bind="props.icons" />
<div :class="['flex justify-center items-center']" v-if="props.icon">
<Icons v-if="props.icon" v-bind="props.icon" />
<component
ref="textIconEl"
:is="props.tag"
v-bind="props.attrs"
:class="[text.class, props.color, 'ml-2']"
:class="[text.class, props.color, 'text-el', 'ml-2']"
>
{{ $t(props.text, props.text) }}
</component>
</Flex>
</div>
</template>

2
vuejs/client/src/components/Widget/Title.vue
View file

@ -83,7 +83,7 @@ onMounted(() => {
data-title
:is="tag"
v-if="props.title"
:class="[props.color, isSubtitleClass, title.class]"
:class="[props.color, isSubtitleClass, title.class, 'text-el']"
>
{{ $t(props.title, props.title) }}
</component>

1
vuejs/client/src/lang/en.json
View file

@ -98,6 +98,7 @@
"dashboard_table": "Table element",
"dashboard_no_match" : "No match found",
"dashboard_no_match_filter" : "No match found with filter",
"dashboard_something_wrong": "Something is wrong",
"inp_input_valid": "input valid",
"inp_input_error_required": "input is required",
"inp_input_error": "input is invalid",

2
vuejs/client/src/pages/builder/Builder.vue
View file

@ -77,8 +77,6 @@ const builder = [
type: "IconStat",
data: {
iconName: "crown",
iconColor: "yellow",
iconClass: "col-span-12",
},
},
{

1664
vuejs/client/src/pages/global-config/globalConfig.vue
View file

File diff suppressed because it is too large Load diff

5
vuejs/client/src/pages/home/Home.vue
View file

@ -43,7 +43,6 @@ onMounted(() => {
// 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",
// iconColor: "amber",
// },
// },
// ],
@ -61,7 +60,6 @@ onMounted(() => {
// subtitleColor: "success" if is_latest_version else "warning",
// stat: <current_version>,
// iconName: "wire",
// iconColor: "teal",
// },
// },
// ],
@ -79,7 +77,6 @@ onMounted(() => {
// subtitleColor: "info",
// stat: "<instances_total>",
// iconName: "box",
// iconColor: "dark",
// },
// },
// ],
@ -97,7 +94,6 @@ onMounted(() => {
// subtitleColor: "info",
// stat: "<services_total>",
// iconName: "disk",
// iconColor: "orange",
// },
// },
// ],
@ -115,7 +111,6 @@ onMounted(() => {
// subtitleColor: "success" if all_plugins_ok else "error",
// stat: "<plugins_total>",
// iconName: "puzzle",
// iconColor: "yellow",
// },
// },
// ],

64
vuejs/client/src/pages/jobs/Jobs.vue
View file

@ -75,7 +75,6 @@ onMounted(() => {
// 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",
// iconColor: "amber",
// },
// },
// ],
@ -140,7 +139,6 @@ const builder = [
reload: "failed",
type: "Icons",
data: {
iconColor: "error",
iconName: "cross",
},
},
@ -148,7 +146,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -193,7 +190,6 @@ const builder = [
reload: "failed",
type: "Icons",
data: {
iconColor: "error",
iconName: "cross",
},
},
@ -201,7 +197,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -246,7 +241,6 @@ const builder = [
reload: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -254,7 +248,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -299,7 +292,6 @@ const builder = [
reload: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -307,7 +299,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -352,7 +343,6 @@ const builder = [
reload: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -360,7 +350,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -405,7 +394,6 @@ const builder = [
reload: "failed",
type: "Icons",
data: {
iconColor: "error",
iconName: "cross",
},
},
@ -413,7 +401,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -458,7 +445,6 @@ const builder = [
reload: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -466,7 +452,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -511,7 +496,6 @@ const builder = [
reload: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -519,7 +503,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -564,7 +547,6 @@ const builder = [
reload: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -572,7 +554,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -617,7 +598,6 @@ const builder = [
reload: "failed",
type: "Icons",
data: {
iconColor: "error",
iconName: "cross",
},
},
@ -625,7 +605,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -647,7 +626,7 @@ const builder = [
hideLabel: true,
inpType: "select",
name: "default-server-cert_cache",
value: "download",
value: "download file",
values: [
"default-server-cert.pem (misc)",
"default-server-cert.key (misc)",
@ -662,7 +641,6 @@ const builder = [
maxBtnChars: 12,
popovers: [
{
iconColor: "info",
iconName: "info",
text: "jobs_download_cache_file",
},
@ -697,7 +675,6 @@ const builder = [
reload: "failed",
type: "Icons",
data: {
iconColor: "error",
iconName: "cross",
},
},
@ -705,7 +682,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -750,7 +726,6 @@ const builder = [
reload: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -758,7 +733,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -803,7 +777,6 @@ const builder = [
reload: "failed",
type: "Icons",
data: {
iconColor: "error",
iconName: "cross",
},
},
@ -811,7 +784,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -832,7 +804,7 @@ const builder = [
hideLabel: true,
inpType: "select",
name: "failover-backup_cache",
value: "download",
value: "download file",
values: ["folder:/var/tmp/bunkerweb/failover.tgz (jobs)"],
columns: {
pc: 12,
@ -844,7 +816,6 @@ const builder = [
maxBtnChars: 12,
popovers: [
{
iconColor: "info",
iconName: "info",
text: "jobs_download_cache_file",
},
@ -879,7 +850,6 @@ const builder = [
reload: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -887,7 +857,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -932,7 +901,6 @@ const builder = [
reload: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -940,7 +908,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -961,7 +928,7 @@ const builder = [
hideLabel: true,
inpType: "select",
name: "mmdb-asn_cache",
value: "download",
value: "download file",
values: ["asn.mmdb (jobs)"],
columns: {
pc: 12,
@ -973,7 +940,6 @@ const builder = [
maxBtnChars: 12,
popovers: [
{
iconColor: "info",
iconName: "info",
text: "jobs_download_cache_file",
},
@ -1008,7 +974,6 @@ const builder = [
reload: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -1016,7 +981,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -1037,7 +1001,7 @@ const builder = [
hideLabel: true,
inpType: "select",
name: "mmdb-country_cache",
value: "download",
value: "download file",
values: ["country.mmdb (jobs)"],
columns: {
pc: 12,
@ -1049,7 +1013,6 @@ const builder = [
maxBtnChars: 12,
popovers: [
{
iconColor: "info",
iconName: "info",
text: "jobs_download_cache_file",
},
@ -1084,7 +1047,6 @@ const builder = [
reload: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -1092,7 +1054,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -1137,7 +1098,6 @@ const builder = [
reload: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -1145,7 +1105,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -1167,7 +1126,7 @@ const builder = [
hideLabel: true,
inpType: "select",
name: "self-signed_cache",
value: "download",
value: "download file",
values: [
"cert.pem (selfsigned) [www.example.com]",
"key.pem (selfsigned) [www.example.com]",
@ -1182,7 +1141,6 @@ const builder = [
maxBtnChars: 12,
popovers: [
{
iconColor: "info",
iconName: "info",
text: "jobs_download_cache_file",
},
@ -1217,7 +1175,6 @@ const builder = [
reload: "failed",
type: "Icons",
data: {
iconColor: "error",
iconName: "cross",
},
},
@ -1225,7 +1182,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -1270,7 +1226,6 @@ const builder = [
reload: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -1278,7 +1233,6 @@ const builder = [
success: "success",
type: "Icons",
data: {
iconColor: "success",
iconName: "check",
},
},
@ -1318,8 +1272,6 @@ const builder = [
{
text: "jobs_search_desc",
iconName: "info",
iconColor: "info",
svgSize: "sm",
},
],
columns: {
@ -1347,8 +1299,6 @@ const builder = [
{
text: "jobs_interval_desc",
iconName: "info",
iconColor: "info",
svgSize: "sm",
},
],
columns: {
@ -1376,8 +1326,6 @@ const builder = [
{
text: "jobs_reload_desc",
iconName: "info",
iconColor: "info",
svgSize: "sm",
},
],
columns: {
@ -1405,8 +1353,6 @@ const builder = [
{
text: "jobs_success_desc",
iconName: "info",
iconColor: "info",
svgSize: "sm",
},
],
columns: {

2
vuejs/client/src/pages/plugins/Plugins.vue
View file

@ -27,7 +27,7 @@ function redirectPlugin() {
.closest("[data-plugin-redirect]")
.getAttribute("data-plugin-redirect") !== "true" ||
!e.target.querySelector(
'[:data-color="icon.color" data-svg="redirect"]'
'[:data-color="icon.color" :disabled="props.disabled" data-svg="redirect"]'
)
)
return;

1188
vuejs/client/src/pages/services/services.vue
View file

File diff suppressed because it is too large Load diff

1664
vuejs/tests/globalconfig.json
View file

File diff suppressed because it is too large Load diff

8
vuejs/tests/globalconfig.py
View file

@ -3232,9 +3232,7 @@ def format_setting(
) not in ("ui", "default"):
popovers.append(
{
"iconColor": "red",
"iconName": "trespass",
"svgSize": "sm",
"text": "inp_popover_method_disabled",
}
)
@ -3242,10 +3240,6 @@ def format_setting(
if setting_value.get("context"):
popovers.append(
{
"iconColor": (
"orange" if setting_value.get("context") == "multisite" else "blue"
),
"svgSize": "sm",
"iconName": (
"disk" if setting_value.get("context") == "multisite" else "globe"
),
@ -3260,8 +3254,6 @@ def format_setting(
if setting_value.get("help"):
popovers.append(
{
"iconColor": "info",
"svgSize": "sm",
"iconName": "info",
"text": setting_value.get("help"),
}

67
vuejs/tests/jobs.json
View file

@ -65,7 +65,6 @@
"reload": "failed",
"type": "Icons",
"data": {
"iconColor": "error",
"iconName": "cross"
}
},
@ -73,7 +72,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -118,7 +116,6 @@
"reload": "failed",
"type": "Icons",
"data": {
"iconColor": "error",
"iconName": "cross"
}
},
@ -126,7 +123,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -171,7 +167,6 @@
"reload": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -179,7 +174,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -224,7 +218,6 @@
"reload": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -232,7 +225,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -277,7 +269,6 @@
"reload": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -285,7 +276,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -330,7 +320,6 @@
"reload": "failed",
"type": "Icons",
"data": {
"iconColor": "error",
"iconName": "cross"
}
},
@ -338,7 +327,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -383,7 +371,6 @@
"reload": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -391,7 +378,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -436,7 +422,6 @@
"reload": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -444,7 +429,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -489,7 +473,6 @@
"reload": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -497,7 +480,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -542,7 +524,6 @@
"reload": "failed",
"type": "Icons",
"data": {
"iconColor": "error",
"iconName": "cross"
}
},
@ -550,7 +531,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -571,7 +551,7 @@
"hideLabel": true,
"inpType": "select",
"name": "default-server-cert_cache",
"value": "download",
"value": "download file",
"values": [
"default-server-cert.pem (misc)",
"default-server-cert.key (misc)"
@ -586,7 +566,6 @@
"maxBtnChars": 12,
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file"
}
@ -621,7 +600,6 @@
"reload": "failed",
"type": "Icons",
"data": {
"iconColor": "error",
"iconName": "cross"
}
},
@ -629,7 +607,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -674,7 +651,6 @@
"reload": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -682,7 +658,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -727,7 +702,6 @@
"reload": "failed",
"type": "Icons",
"data": {
"iconColor": "error",
"iconName": "cross"
}
},
@ -735,7 +709,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -756,7 +729,7 @@
"hideLabel": true,
"inpType": "select",
"name": "failover-backup_cache",
"value": "download",
"value": "download file",
"values": [
"folder:/var/tmp/bunkerweb/failover.tgz (jobs)"
],
@ -770,7 +743,6 @@
"maxBtnChars": 12,
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file"
}
@ -805,7 +777,6 @@
"reload": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -813,7 +784,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -858,7 +828,6 @@
"reload": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -866,7 +835,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -887,7 +855,7 @@
"hideLabel": true,
"inpType": "select",
"name": "mmdb-asn_cache",
"value": "download",
"value": "download file",
"values": [
"asn.mmdb (jobs)"
],
@ -901,7 +869,6 @@
"maxBtnChars": 12,
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file"
}
@ -936,7 +903,6 @@
"reload": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -944,7 +910,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -965,7 +930,7 @@
"hideLabel": true,
"inpType": "select",
"name": "mmdb-country_cache",
"value": "download",
"value": "download file",
"values": [
"country.mmdb (jobs)"
],
@ -979,7 +944,6 @@
"maxBtnChars": 12,
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file"
}
@ -1014,7 +978,6 @@
"reload": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -1022,7 +985,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -1067,7 +1029,6 @@
"reload": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -1075,7 +1036,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -1096,7 +1056,7 @@
"hideLabel": true,
"inpType": "select",
"name": "self-signed_cache",
"value": "download",
"value": "download file",
"values": [
"cert.pem (selfsigned) [www.example.com]",
"key.pem (selfsigned) [www.example.com]"
@ -1111,7 +1071,6 @@
"maxBtnChars": 12,
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file"
}
@ -1146,7 +1105,6 @@
"reload": "failed",
"type": "Icons",
"data": {
"iconColor": "error",
"iconName": "cross"
}
},
@ -1154,7 +1112,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -1199,7 +1156,6 @@
"reload": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -1207,7 +1163,6 @@
"success": "success",
"type": "Icons",
"data": {
"iconColor": "success",
"iconName": "check"
}
},
@ -1250,8 +1205,7 @@
"popovers": [
{
"text": "jobs_search_desc",
"iconName": "info",
"iconColor": "info"
"iconName": "info"
}
],
"columns": {
@ -1285,8 +1239,7 @@
"popovers": [
{
"text": "jobs_interval_desc",
"iconName": "info",
"iconColor": "info"
"iconName": "info"
}
],
"columns": {
@ -1319,8 +1272,7 @@
"popovers": [
{
"text": "jobs_reload_desc",
"iconName": "info",
"iconColor": "info"
"iconName": "info"
}
],
"columns": {
@ -1353,8 +1305,7 @@
"popovers": [
{
"text": "jobs_success_desc",
"iconName": "info",
"iconColor": "info"
"iconName": "info"
}
],
"columns": {

6
vuejs/tests/jobs.py
View file

@ -220,7 +220,6 @@ def get_jobs_list(jobs):
k: "success" if v else "failed",
"type": "Icons",
"data": {
"iconColor": "success" if v else "error",
"iconName": "check" if v else "cross",
},
}
@ -269,7 +268,6 @@ def get_jobs_list(jobs):
"maxBtnChars": 12,
"popovers": [
{
"iconColor": "info",
"iconName": "info",
"text": "jobs_download_cache_file",
},
@ -344,7 +342,6 @@ def job_builder(jobs):
{
"text": "jobs_search_desc",
"iconName": "info",
"iconColor": "info",
},
],
"columns": {"pc": 3, "tablet": 4, "mobile": 12},
@ -368,7 +365,6 @@ def job_builder(jobs):
{
"text": "jobs_interval_desc",
"iconName": "info",
"iconColor": "info",
},
],
"columns": {"pc": 3, "tablet": 4, "mobile": 12},
@ -392,7 +388,6 @@ def job_builder(jobs):
{
"text": "jobs_reload_desc",
"iconName": "info",
"iconColor": "info",
},
],
"columns": {"pc": 3, "tablet": 4, "mobile": 12},
@ -416,7 +411,6 @@ def job_builder(jobs):
{
"text": "jobs_success_desc",
"iconName": "info",
"iconColor": "info",
},
],
"columns": {"pc": 3, "tablet": 4, "mobile": 12},