mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
add no match el + svg style + plugins action
* update svg style and class to handle more size without using a popover but directly icon * add no match text feedback on filtering list, settings and table * start redirect and delete plugin logic + create utils to update attributs when controlling an element like a modal
This commit is contained in:
Jordan Blasenhauer
parent
cec5035777
commit
a7be545baa
44 changed files with 552 additions and 234 deletions
|
|
@ -16,9 +16,7 @@
|
|||
@apply focus:outline-4 focus:outline-secondary focus:outline-offset-4;
|
||||
}
|
||||
|
||||
.default-svg {
|
||||
@apply w-6 h-6;
|
||||
}
|
||||
|
||||
|
||||
.ace_editor,
|
||||
.ace_editor * {
|
||||
|
|
@ -110,7 +108,7 @@ body {
|
|||
}
|
||||
|
||||
.content-container {
|
||||
@apply xl:pl-72 w-full px-2 sm:px-6 pb-0 pt-20 sm:pt-3 min-h-[85vh] flex flex-col justify-between;
|
||||
@apply xl:pl-72 w-full px-2 sm:px-6 pb-0 pt-20 sm:pt-3 min-h-[85vh] flex flex-col justify-between overflow-hidden;
|
||||
}
|
||||
|
||||
.content-wrap {
|
||||
|
|
@ -493,13 +491,22 @@ body {
|
|||
}
|
||||
|
||||
.layout-settings {
|
||||
@apply py-4 gap-x-8 gap-y-8 col-span-12 grid grid-cols-12 w-full relative;
|
||||
@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;
|
||||
}
|
||||
|
||||
.layout-unmatch-table {
|
||||
@apply fixed col-span-12 flex mx-2 my-8 w-full;
|
||||
|
||||
}
|
||||
|
||||
/* POPOVER */
|
||||
|
||||
.popover-btn {
|
||||
@apply outline-offset-1 cursor-pointer flex justify-start w-full;
|
||||
@apply outline-offset-1 cursor-pointer flex justify-start;
|
||||
}
|
||||
|
||||
.popover-container {
|
||||
|
|
@ -522,25 +529,10 @@ body {
|
|||
@apply pointer-events-none z-0 hover:brightness-95 fill-blue-500;
|
||||
}
|
||||
|
||||
.lg.popover-svg {
|
||||
@apply h-8 w-8;
|
||||
.icon-svg {
|
||||
@apply block;
|
||||
}
|
||||
|
||||
.base.popover-svg {
|
||||
@apply h-7 w-7;
|
||||
}
|
||||
|
||||
.md.popover-svg {
|
||||
@apply h-6 w-6;
|
||||
}
|
||||
|
||||
.sm.popover-svg {
|
||||
@apply h-5 w-5;
|
||||
}
|
||||
|
||||
.sm.popover-svg {
|
||||
@apply h-5 w-5;
|
||||
}
|
||||
|
||||
/* TABS */
|
||||
|
||||
|
|
@ -1000,7 +992,12 @@ body {
|
|||
/* CONTENT COMPONENT */
|
||||
|
||||
.text-content {
|
||||
@apply leading-normal mb-0 break-word;
|
||||
@apply mb-0 break-word;
|
||||
}
|
||||
|
||||
.text-unmatch {
|
||||
@apply text-lg mb-0 break-word;
|
||||
|
||||
}
|
||||
|
||||
.text-stat {
|
||||
|
|
@ -1025,11 +1022,11 @@ body {
|
|||
}
|
||||
|
||||
.list-details-container {
|
||||
@apply col-span-12 grid grid-cols-12 gap-3 py-2;
|
||||
@apply min-h-[200px] col-span-12 grid grid-cols-12 gap-3 py-2;
|
||||
}
|
||||
|
||||
.list-details-item {
|
||||
@apply z-0 px-3 py-2 min-h-12 relative flex justify-between items-center transition rounded;
|
||||
@apply z-0 px-3 py-2 min-h-12 h-fit relative flex justify-between items-center transition rounded;
|
||||
}
|
||||
|
||||
.enabled.list-details-item {
|
||||
|
|
@ -1040,6 +1037,10 @@ body {
|
|||
@apply cursor-not-allowed bg-gray-300 dark:bg-gray-800;
|
||||
}
|
||||
|
||||
.list-details-unmatch-container {
|
||||
@apply col-span-12 grid grid-cols-12 gap-3 py-2;
|
||||
}
|
||||
|
||||
/* TITLE */
|
||||
|
||||
.title-container {
|
||||
|
|
@ -1468,7 +1469,7 @@ body {
|
|||
}
|
||||
|
||||
.table-content {
|
||||
@apply appearance-none dark:text-gray-400 block w-full rounded col-span-12 overflow-x-hidden overflow-y-auto max-h-[600px] min-h-[460px];
|
||||
@apply relative appearance-none dark:text-gray-400 block w-full rounded col-span-12 overflow-x-hidden overflow-y-auto max-h-[600px] min-h-[460px];
|
||||
}
|
||||
|
||||
.table-content-item {
|
||||
|
|
@ -1583,6 +1584,34 @@ body {
|
|||
@apply text-white mt-2 mb-0 text-sm;
|
||||
}
|
||||
|
||||
/* SIZE MODIFIER */
|
||||
|
||||
.lg.popover-svg,
|
||||
.lg.icon-svg {
|
||||
@apply h-8 w-8;
|
||||
}
|
||||
|
||||
.base.popover-svg,
|
||||
.base.icon-svg {
|
||||
@apply h-7 w-7;
|
||||
}
|
||||
|
||||
.md.popover-svg,
|
||||
.md.icon-svg {
|
||||
@apply h-6 w-6;
|
||||
}
|
||||
|
||||
.sm.popover-svg,
|
||||
.sm.icon-svg {
|
||||
@apply h-5 w-5;
|
||||
}
|
||||
|
||||
.sm.popover-svg,
|
||||
.sm.icon-svg {
|
||||
@apply h-5 w-5;
|
||||
}
|
||||
|
||||
|
||||
/* TEXT COLOR MODIFIER */
|
||||
|
||||
.success.subtitle-stat,
|
||||
|
|
@ -2133,7 +2162,7 @@ body {
|
|||
|
||||
/* SVG COLOR MODIFIER */
|
||||
|
||||
.success.default-svg,
|
||||
.success.icon-svg,
|
||||
.success.btn-svg,
|
||||
.success.menu-svg,
|
||||
.success.social-svg,
|
||||
|
|
@ -2142,7 +2171,7 @@ body {
|
|||
@apply fill-green-500;
|
||||
}
|
||||
|
||||
.error.default-svg,
|
||||
.error.icon-svg,
|
||||
.error.btn-svg,
|
||||
.error.menu-svg,
|
||||
.error.social-svg,
|
||||
|
|
@ -2151,7 +2180,7 @@ body {
|
|||
@apply fill-red-500;
|
||||
}
|
||||
|
||||
.warning.default-svg,
|
||||
.warning.icon-svg,
|
||||
.warning.btn-svg,
|
||||
.warning.menu-svg,
|
||||
.warning.social-svg,
|
||||
|
|
@ -2160,7 +2189,7 @@ body {
|
|||
@apply fill-yellow-500;
|
||||
}
|
||||
|
||||
.info.default-svg,
|
||||
.info.icon-svg,
|
||||
.info.btn-svg,
|
||||
.info.menu-svg,
|
||||
.info.social-svg,
|
||||
|
|
@ -2169,7 +2198,7 @@ body {
|
|||
@apply fill-sky-500;
|
||||
}
|
||||
|
||||
.white.default-svg,
|
||||
.white.icon-svg,
|
||||
.white.btn-svg,
|
||||
.white.menu-svg,
|
||||
.white.social-svg,
|
||||
|
|
@ -2178,7 +2207,7 @@ body {
|
|||
@apply fill-white;
|
||||
}
|
||||
|
||||
.purple.default-svg,
|
||||
.purple.icon-svg,
|
||||
.purple.btn-svg,
|
||||
.purple.menu-svg,
|
||||
.purple.social-svg,
|
||||
|
|
@ -2187,7 +2216,7 @@ body {
|
|||
@apply fill-purple-500;
|
||||
}
|
||||
|
||||
.green.default-svg,
|
||||
.green.icon-svg,
|
||||
.green.btn-svg,
|
||||
.green.menu-svg,
|
||||
.green.social-svg,
|
||||
|
|
@ -2196,7 +2225,7 @@ body {
|
|||
@apply fill-green-500;
|
||||
}
|
||||
|
||||
.red.default-svg,
|
||||
.red.icon-svg,
|
||||
.red.btn-svg,
|
||||
.red.menu-svg,
|
||||
.red.social-svg,
|
||||
|
|
@ -2205,7 +2234,7 @@ body {
|
|||
@apply fill-red-500;
|
||||
}
|
||||
|
||||
.orange.default-svg,
|
||||
.orange.icon-svg,
|
||||
.orange.btn-svg,
|
||||
.orange.menu-svg,
|
||||
.orange.social-svg,
|
||||
|
|
@ -2214,7 +2243,7 @@ body {
|
|||
@apply fill-orange-500;
|
||||
}
|
||||
|
||||
.blue.default-svg,
|
||||
.blue.icon-svg,
|
||||
.blue.btn-svg,
|
||||
.blue.menu-svg,
|
||||
.blue.social-svg,
|
||||
|
|
@ -2223,7 +2252,7 @@ body {
|
|||
@apply fill-blue-500;
|
||||
}
|
||||
|
||||
.yellow.default-svg,
|
||||
.yellow.icon-svg,
|
||||
.yellow.btn-svg,
|
||||
.yellow.menu-svg,
|
||||
.yellow.social-svg,
|
||||
|
|
@ -2232,7 +2261,7 @@ body {
|
|||
@apply fill-yellow-500;
|
||||
}
|
||||
|
||||
.gray.default-svg,
|
||||
.gray.icon-svg,
|
||||
.gray.btn-svg,
|
||||
.gray.menu-svg,
|
||||
.gray.social-svg,
|
||||
|
|
@ -2241,7 +2270,7 @@ body {
|
|||
@apply fill-gray-500;
|
||||
}
|
||||
|
||||
.dark.default-svg,
|
||||
.dark.icon-svg,
|
||||
.dark.btn-svg,
|
||||
.dark.menu-svg,
|
||||
.dark.social-svg,
|
||||
|
|
@ -2250,7 +2279,7 @@ body {
|
|||
@apply fill-slate-500;
|
||||
}
|
||||
|
||||
.amber.default-svg,
|
||||
.amber.icon-svg,
|
||||
.amber.btn-svg,
|
||||
.amber.menu-svg,
|
||||
.amber.social-svg,
|
||||
|
|
@ -2259,7 +2288,7 @@ body {
|
|||
@apply fill-amber-500;
|
||||
}
|
||||
|
||||
.emerald.default-svg,
|
||||
.emerald.icon-svg,
|
||||
.emerald.btn-svg,
|
||||
.emerald.menu-svg,
|
||||
.emerald.social-svg,
|
||||
|
|
@ -2268,7 +2297,7 @@ body {
|
|||
@apply fill-emerald-500;
|
||||
}
|
||||
|
||||
.teal.default-svg,
|
||||
.teal.icon-svg,
|
||||
.teal.btn-svg,
|
||||
.teal.menu-svg,
|
||||
.teal.social-svg,
|
||||
|
|
@ -2277,7 +2306,7 @@ body {
|
|||
@apply fill-teal-500;
|
||||
}
|
||||
|
||||
.indigo.default-svg,
|
||||
.indigo.icon-svg,
|
||||
.indigo.btn-svg,
|
||||
.indigo.menu-svg,
|
||||
.indigo.social-svg,
|
||||
|
|
@ -2286,7 +2315,7 @@ body {
|
|||
@apply fill-indigo-500;
|
||||
}
|
||||
|
||||
.cyan.default-svg,
|
||||
.cyan.icon-svg,
|
||||
.cyan.btn-svg,
|
||||
.cyan.menu-svg,
|
||||
.cyan.social-svg,
|
||||
|
|
@ -2295,7 +2324,7 @@ body {
|
|||
@apply fill-cyan-500;
|
||||
}
|
||||
|
||||
.sky.default-svg,
|
||||
.sky.icon-svg,
|
||||
.sky.btn-svg,
|
||||
.sky.menu-svg,
|
||||
.sky.social-svg,
|
||||
|
|
@ -2304,7 +2333,7 @@ body {
|
|||
@apply fill-sky-500;
|
||||
}
|
||||
|
||||
.pink.default-svg,
|
||||
.pink.icon-svg,
|
||||
.pink.btn-svg,
|
||||
.pink.menu-svg,
|
||||
.pink.social-svg,
|
||||
|
|
@ -2313,7 +2342,7 @@ body {
|
|||
@apply fill-pink-500;
|
||||
}
|
||||
|
||||
.lime.default-svg,
|
||||
.lime.icon-svg,
|
||||
.lime.btn-svg,
|
||||
.lime.menu-svg,
|
||||
.lime.social-svg,
|
||||
|
|
@ -2322,7 +2351,7 @@ body {
|
|||
@apply fill-lime-500;
|
||||
}
|
||||
|
||||
.twitter.default-svg,
|
||||
.twitter.icon-svg,
|
||||
.twitter.btn-svg,
|
||||
.twitter.menu-svg,
|
||||
.twitter.social-svg,
|
||||
|
|
@ -2331,7 +2360,7 @@ body {
|
|||
@apply fill-[#1DA1F2];
|
||||
}
|
||||
|
||||
.linkedin.default-svg,
|
||||
.linkedin.icon-svg,
|
||||
.linkedin.btn-svg,
|
||||
.linkedin.menu-svg,
|
||||
.linkedin.social-svg,
|
||||
|
|
@ -2340,7 +2369,7 @@ body {
|
|||
@apply fill-[#0A63BC];
|
||||
}
|
||||
|
||||
.discord.default-svg,
|
||||
.discord.icon-svg,
|
||||
.discord.btn-svg,
|
||||
.discord.menu-svg,
|
||||
.discord.social-svg,
|
||||
|
|
@ -2349,7 +2378,7 @@ body {
|
|||
@apply fill-[#5562EA];
|
||||
}
|
||||
|
||||
.github.default-svg,
|
||||
.github.icon-svg,
|
||||
.github.btn-svg,
|
||||
.github.menu-svg,
|
||||
.github.social-svg,
|
||||
|
|
@ -2358,7 +2387,7 @@ body {
|
|||
@apply fill-[#171A1F] dark:fill-gray-300;
|
||||
}
|
||||
|
||||
.purple-darker.default-svg,
|
||||
.purple-darker.icon-svg,
|
||||
.purle-darker.btn-svg,
|
||||
.purple-darker.menu-svg,
|
||||
.purple-darker.social-svg,
|
||||
|
|
@ -2367,7 +2396,7 @@ body {
|
|||
@apply fill-purple-600;
|
||||
}
|
||||
|
||||
.green-darker.default-svg,
|
||||
.green-darker.icon-svg,
|
||||
.green-darker.btn-svg,
|
||||
.green-darker.menu-svg,
|
||||
.green-darker.social-svg,
|
||||
|
|
@ -2376,7 +2405,7 @@ body {
|
|||
@apply fill-green-700;
|
||||
}
|
||||
|
||||
.red-darker.default-svg,
|
||||
.red-darker.icon-svg,
|
||||
.red-darker.btn-svg,
|
||||
.red-darker.menu-svg,
|
||||
.red-darker.social-svg,
|
||||
|
|
@ -2385,7 +2414,7 @@ body {
|
|||
@apply fill-red-700;
|
||||
}
|
||||
|
||||
.orange-darker.default-svg,
|
||||
.orange-darker.icon-svg,
|
||||
.orange-darker.btn-svg,
|
||||
.orange-darker.menu-svg,
|
||||
.orange-darker.social-svg,
|
||||
|
|
@ -2394,7 +2423,7 @@ body {
|
|||
@apply fill-orange-600;
|
||||
}
|
||||
|
||||
.blue-darker.default-svg,
|
||||
.blue-darker.icon-svg,
|
||||
.blue-darker.btn-svg,
|
||||
.blue-darker.menu-svg,
|
||||
.blue-darker.social-svg,
|
||||
|
|
@ -2403,7 +2432,7 @@ body {
|
|||
@apply fill-blue-600;
|
||||
}
|
||||
|
||||
.yellow-darker.default-svg,
|
||||
.yellow-darker.icon-svg,
|
||||
.yellow-darker.btn-svg,
|
||||
.yellow-darker.menu-svg,
|
||||
.yellow-darker.social-svg,
|
||||
|
|
@ -2412,7 +2441,7 @@ body {
|
|||
@apply fill-yellow-600;
|
||||
}
|
||||
|
||||
.gray-darker.default-svg,
|
||||
.gray-darker.icon-svg,
|
||||
.gray-darker.btn-svg,
|
||||
.gray-darker.menu-svg,
|
||||
.gray-darker.social-svg,
|
||||
|
|
@ -2421,7 +2450,7 @@ body {
|
|||
@apply fill-gray-600;
|
||||
}
|
||||
|
||||
.dark-darker.default-svg,
|
||||
.dark-darker.icon-svg,
|
||||
.dark-darker.btn-svg,
|
||||
.dark-darker.menu-svg,
|
||||
.dark-darker.social-svg,
|
||||
|
|
@ -2430,7 +2459,7 @@ body {
|
|||
@apply fill-slate-600;
|
||||
}
|
||||
|
||||
.amber-darker.default-svg,
|
||||
.amber-darker.icon-svg,
|
||||
.amber-darker.btn-svg,
|
||||
.amber-darker.menu-svg,
|
||||
.amber-darker.social-svg,
|
||||
|
|
@ -2439,7 +2468,7 @@ body {
|
|||
@apply fill-amber-600;
|
||||
}
|
||||
|
||||
.emerald-darker.default-svg,
|
||||
.emerald-darker.icon-svg,
|
||||
.emerald-darker.btn-svg,
|
||||
.emerald-darker.menu-svg,
|
||||
.emerald-darker.social-svg,
|
||||
|
|
@ -2448,7 +2477,7 @@ body {
|
|||
@apply fill-emerald-600;
|
||||
}
|
||||
|
||||
.teal-darker.default-svg,
|
||||
.teal-darker.icon-svg,
|
||||
.teal-darker.btn-svg,
|
||||
.teal-darker.menu-svg,
|
||||
.teal-darker.social-svg,
|
||||
|
|
@ -2457,7 +2486,7 @@ body {
|
|||
@apply fill-teal-600;
|
||||
}
|
||||
|
||||
.indigo-darker.default-svg,
|
||||
.indigo-darker.icon-svg,
|
||||
.indigo-darker.btn-svg,
|
||||
.indigo-darker.menu-svg,
|
||||
.indigo-darker.social-svg,
|
||||
|
|
@ -2466,7 +2495,7 @@ body {
|
|||
@apply fill-indigo-600;
|
||||
}
|
||||
|
||||
.cyan-darker.default-svg,
|
||||
.cyan-darker.icon-svg,
|
||||
.cyan-darker.btn-svg,
|
||||
.cyan-darker.menu-svg,
|
||||
.cyan-darker.social-svg,
|
||||
|
|
@ -2475,7 +2504,7 @@ body {
|
|||
@apply fill-cyan-600;
|
||||
}
|
||||
|
||||
.sky-darker.default-svg,
|
||||
.sky-darker.icon-svg,
|
||||
.sky-darker.btn-svg,
|
||||
.sky-darker.menu-svg,
|
||||
.sky-darker.social-svg,
|
||||
|
|
@ -2484,7 +2513,7 @@ body {
|
|||
@apply fill-sky-700;
|
||||
}
|
||||
|
||||
.pink-darker.default-svg,
|
||||
.pink-darker.icon-svg,
|
||||
.pink-darker.btn-svg,
|
||||
.pink-darker.menu-svg,
|
||||
.pink-darker.social-svg,
|
||||
|
|
@ -2493,7 +2522,7 @@ body {
|
|||
@apply fill-pink-600;
|
||||
}
|
||||
|
||||
.lime-darker.default-svg,
|
||||
.lime-darker.icon-svg,
|
||||
.lime-darker.btn-svg,
|
||||
.lime-darker.menu-svg,
|
||||
.lime-darker.social-svg,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -203,6 +203,15 @@ const filters = [
|
|||
},
|
||||
];
|
||||
|
||||
const unmatch = {
|
||||
text: "dashboard_no_match",
|
||||
textClass: "text-unmatch",
|
||||
icons: {
|
||||
iconName: "search",
|
||||
iconColor: "info",
|
||||
},
|
||||
};
|
||||
|
||||
function filter(filterData) {
|
||||
setValidity();
|
||||
data.format = filterData;
|
||||
|
|
@ -283,7 +292,11 @@ onUnmounted(() => {
|
|||
:value="data.currPlugin"
|
||||
:values="data.plugins"
|
||||
@inp="data.currPlugin = $event"
|
||||
/></Filter>
|
||||
/>
|
||||
</Filter>
|
||||
<div v-if="!data.format.length" class="layout-unmatch">
|
||||
<Text v-bind="unmatch" />
|
||||
</div>
|
||||
<template v-for="plugin in data.format">
|
||||
<Container
|
||||
data-advanced-form-plugin
|
||||
|
|
@ -304,11 +317,15 @@ onUnmounted(() => {
|
|||
</Container>
|
||||
</template>
|
||||
<Button
|
||||
v-if="data.format.length"
|
||||
v-bind="buttonSave"
|
||||
:disabled="data.isReqErr || data.isRegErr ? true : false"
|
||||
/>
|
||||
<Text
|
||||
v-if="data.isRegErr || data.isReqErr"
|
||||
v-if="
|
||||
(data.format.length && data.isRegErr) ||
|
||||
(data.format.length && data.isReqErr)
|
||||
"
|
||||
:textClass="'form-setting-error'"
|
||||
:text="
|
||||
data.isReqErr
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -28,7 +28,12 @@ const props = defineProps({
|
|||
data-svg="box"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor, 'dark:brightness-[125%]']"
|
||||
:class="[
|
||||
'icon-svg',
|
||||
props.iconClass,
|
||||
props.iconColor,
|
||||
'dark:brightness-[125%]',
|
||||
]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -28,7 +28,7 @@ const props = defineProps({
|
|||
data-svg="carton"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { defineProps, reactive, onMounted } from "vue";
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -42,7 +42,7 @@ onMounted(() => {
|
|||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:aria-labelledby="icon.id"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { useUUID } from "@utils/global.js";
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -41,7 +41,7 @@ onMounted(() => {
|
|||
fill="currentColor"
|
||||
data-svg="core"
|
||||
role="img"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:aria-labelledby="icon.id"
|
||||
>
|
||||
<path d="M16.5 7.5h-9v9h9v-9Z" />
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { useUUID } from "@utils/global.js";
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -42,7 +42,7 @@ onMounted(() => {
|
|||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:aria-labelledby="icon.id"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { useUUID } from "@utils/global.js";
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -17,7 +17,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -40,7 +40,7 @@ onMounted(() => {
|
|||
data-svg="crown"
|
||||
role="img"
|
||||
:aria-labelledby="icon.id"
|
||||
:class="[props.iconClass, props.iconColor, 'scale-95']"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor, 'scale-95']"
|
||||
viewBox="0 0 48 46"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { useUUID } from "@utils/global.js";
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="discord"]
|
||||
*/
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -39,7 +39,7 @@ onMounted(() => {
|
|||
data-svg="discord"
|
||||
role="img"
|
||||
fill="none"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:aria-labelledby="icon.id"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -28,7 +28,7 @@ const props = defineProps({
|
|||
data-svg="disk"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -31,7 +31,7 @@ const props = defineProps({
|
|||
fill="currentColor"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
>
|
||||
<path
|
||||
d="M5.507 4.048A3 3 0 0 1 7.785 3h8.43a3 3 0 0 1 2.278 1.048l1.722 2.008A4.533 4.533 0 0 0 19.5 6h-15c-.243 0-.482.02-.715.056l1.722-2.008Z"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { useUUID } from "@utils/global.js";
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -41,7 +41,7 @@ onMounted(() => {
|
|||
fill="currentColor"
|
||||
data-svg="external"
|
||||
role="img"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:aria-labelledby="icon.id"
|
||||
>
|
||||
<path
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -28,7 +28,7 @@ const props = defineProps({
|
|||
data-svg="flag"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -28,7 +28,7 @@ const props = defineProps({
|
|||
data-svg="flag"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -28,7 +28,7 @@ const props = defineProps({
|
|||
data-svg="gear"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { useUUID } from "@utils/global.js";
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="github"]
|
||||
*/
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -39,7 +39,7 @@ onMounted(() => {
|
|||
data-svg="github"
|
||||
role="img"
|
||||
fill="none"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
:aria-labelledby="icon.id"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 496 512"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -28,7 +28,7 @@ const props = defineProps({
|
|||
data-svg="globe"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -28,7 +28,7 @@ const props = defineProps({
|
|||
data-svg="house"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -31,7 +31,7 @@ const props = defineProps({
|
|||
fill="currentColor"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -28,7 +28,7 @@ const props = defineProps({
|
|||
data-svg="key"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { useUUID } from "@utils/global.js";
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="linkedin"]
|
||||
*/
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -38,7 +38,7 @@ onMounted(() => {
|
|||
<svg
|
||||
data-svg="key"
|
||||
role="img"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
fill="none"
|
||||
class="hover:opacity-80 dark:brightness-110"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -26,7 +26,7 @@ const props = defineProps({
|
|||
<template>
|
||||
<svg
|
||||
data-svg="list"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -31,7 +31,7 @@ const props = defineProps({
|
|||
data-svg="lock"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { useUUID } from "@utils/global.js";
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -40,7 +40,7 @@ onMounted(() => {
|
|||
data-svg="plus"
|
||||
role="img"
|
||||
:aria-labelledby="icon.id"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -26,7 +26,7 @@ const props = defineProps({
|
|||
<template>
|
||||
<svg
|
||||
data-svg="puzzle"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -28,7 +28,7 @@ const props = defineProps({
|
|||
data-svg="redirect"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor, 'scale-90']"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor, 'scale-90']"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
|
|
|
|||
44
vuejs/client/src/components/Icons/Search.vue
Normal file
44
vuejs/client/src/components/Icons/Search.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<script setup>
|
||||
/**
|
||||
@name Icons/Search.vue
|
||||
@description This component is a svg icon representing search.
|
||||
@example
|
||||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "orange",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<svg
|
||||
data-svg="search"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="size-6"
|
||||
>
|
||||
<path d="M8.25 10.875a2.625 2.625 0 1 1 5.25 0 2.625 2.625 0 0 1-5.25 0Z" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.125 4.5a4.125 4.125 0 1 0 2.338 7.524l2.007 2.006a.75.75 0 1 0 1.06-1.06l-2.006-2.007a4.125 4.125 0 0 0-3.399-6.463Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -28,7 +28,7 @@ const props = defineProps({
|
|||
data-svg="settings"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -26,7 +26,7 @@ const props = defineProps({
|
|||
<template>
|
||||
<svg
|
||||
data-svg="task"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -31,7 +31,7 @@ const props = defineProps({
|
|||
data-svg="trash"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { useUUID } from "@utils/global.js";
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -43,7 +43,7 @@ onMounted(() => {
|
|||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { useUUID } from "@utils/global.js";
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="twitter"]
|
||||
*/
|
||||
|
||||
|
|
@ -16,7 +16,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -39,7 +39,7 @@ onMounted(() => {
|
|||
data-svg="twitter"
|
||||
role="img"
|
||||
:aria-labelledby="icon.id"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{
|
||||
iconColor: 'info',
|
||||
}
|
||||
@param {string} [iconClass=""]
|
||||
@param {string} [iconClass="base"] - The class of the icon. "base" is the default size.
|
||||
@param {string} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -28,7 +28,7 @@ const props = defineProps({
|
|||
data-svg="wire"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
:class="[props.iconClass, props.iconColor]"
|
||||
:class="['icon-svg', props.iconClass, props.iconColor]"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup>
|
||||
import { defineProps, computed, reactive, onMounted } from "vue";
|
||||
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";
|
||||
|
|
@ -53,14 +54,23 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const gridClass = computed(() => {
|
||||
return `col-span-${props.columns.mobile} md:col-span-${props.columns.tablet} lg:col-span-${props.columns.pc}`;
|
||||
});
|
||||
|
||||
const data = reactive({
|
||||
base: JSON.parse(JSON.stringify(props.details)),
|
||||
format: JSON.parse(JSON.stringify(props.details)),
|
||||
});
|
||||
|
||||
const gridClass = computed(() => {
|
||||
return `col-span-${props.columns.mobile} md:col-span-${props.columns.tablet} lg:col-span-${props.columns.pc}`;
|
||||
});
|
||||
|
||||
const unmatch = {
|
||||
text: "dashboard_no_match",
|
||||
textClass: "text-unmatch",
|
||||
icons: {
|
||||
iconName: "search",
|
||||
iconColor: "info",
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -71,7 +81,10 @@ const data = reactive({
|
|||
:data="data.base"
|
||||
:filters="props.filters"
|
||||
/>
|
||||
<ul v-if="data.format" :class="['list-details-container']">
|
||||
<div v-if="!data.format.length" class="layout-unmatch">
|
||||
<Text v-bind="unmatch" />
|
||||
</div>
|
||||
<ul v-if="data.format.length" :class="['list-details-container']">
|
||||
<li
|
||||
v-for="(item, id) in data.format"
|
||||
:class="[
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import Redirect from "@components/Icons/Redirect.vue";
|
|||
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 { computed } from "vue";
|
||||
|
||||
|
|
@ -40,12 +41,12 @@ import { computed } from "vue";
|
|||
@example
|
||||
{
|
||||
iconName: 'box',
|
||||
iconClass: 'stat-svg',
|
||||
iconClass: 'base',
|
||||
iconColor: 'amber',
|
||||
}
|
||||
@param {string} iconName - The name of the icon to display. The icon name is the name of the file without the extension on lowercase.
|
||||
@param {string} [iconType="default"] - The type of the icon between default and stat. Default is used for regular icons, stat is used for icons inside a stat widget.
|
||||
@param {string} [iconClass="default-svg"] - 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} [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} [iconColor="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').
|
||||
*/
|
||||
|
||||
|
|
@ -62,7 +63,7 @@ const props = defineProps({
|
|||
iconClass: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "default-svg",
|
||||
default: "base",
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
|
|
@ -113,6 +114,11 @@ const iconClass = computed(() => {
|
|||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
/>
|
||||
<Search
|
||||
v-if="props.iconName === 'search'"
|
||||
:iconClass="iconClass"
|
||||
:iconColor="iconColor"
|
||||
/>
|
||||
<Trash
|
||||
v-if="props.iconName === 'trash'"
|
||||
:iconClass="iconClass"
|
||||
|
|
|
|||
|
|
@ -120,6 +120,8 @@ const props = defineProps({
|
|||
|
||||
const tableBody = ref(null);
|
||||
const tableHeader = ref(null);
|
||||
const unmatchEl = ref(null);
|
||||
const unmatchWidth = ref("");
|
||||
|
||||
const table = reactive({
|
||||
id: uuidv4(),
|
||||
|
|
@ -139,6 +141,20 @@ const table = reactive({
|
|||
itemsFormat: JSON.parse(JSON.stringify(props.items)),
|
||||
});
|
||||
|
||||
const unmatch = {
|
||||
text: "dashboard_no_match",
|
||||
textClass: "text-unmatch",
|
||||
icons: {
|
||||
iconName: "search",
|
||||
iconColor: "info",
|
||||
},
|
||||
};
|
||||
|
||||
function setUnmatchWidth() {
|
||||
const value = tableBody.value.closest("[data-grid-layout]").clientWidth - 60;
|
||||
unmatchWidth.value = `${value}px`;
|
||||
}
|
||||
|
||||
function getOverflow() {
|
||||
setTimeout(() => {
|
||||
const overflow =
|
||||
|
|
@ -157,11 +173,13 @@ watch(
|
|||
() => table.itemsFormat,
|
||||
() => {
|
||||
getOverflow();
|
||||
setUnmatchWidth();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
getOverflow();
|
||||
setUnmatchWidth();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -196,6 +214,14 @@ onMounted(() => {
|
|||
</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>
|
||||
<tr
|
||||
v-for="rowId in table.rowLength"
|
||||
:key="rowId - 1"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
<script setup>
|
||||
import Icons from "@components/Widget/Icons.vue";
|
||||
import Flex from "@components/Widget/Flex.vue";
|
||||
|
||||
/**
|
||||
@name Widget/Text.vue
|
||||
@description This component is used for regular paragraph.
|
||||
|
|
@ -10,6 +13,7 @@
|
|||
@param {string} text - The text value. Can be a translation key or by default raw text.
|
||||
@param {string} [textClass="text-content"] - Style of text. Can be replace by any class starting by 'text-' like 'text-stat'.
|
||||
@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.
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -27,11 +31,23 @@ const props = defineProps({
|
|||
required: false,
|
||||
default: "p",
|
||||
},
|
||||
icons: {
|
||||
type: [Boolean, Object],
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="props.tag" :class="[props.textClass]">
|
||||
<component v-if="!props.icons" :is="props.tag" :class="[props.textClass]">
|
||||
{{ $t(props.text, props.text) }}
|
||||
</component>
|
||||
|
||||
<Flex :flexClass="'justify-center'" v-if="props.icons">
|
||||
<Icons v-if="props.icons" v-bind="props.icons" />
|
||||
<component :is="props.tag" :class="[props.textClass, 'ml-2']">
|
||||
{{ $t(props.text, props.text) }}
|
||||
</component>
|
||||
</Flex>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -96,6 +96,8 @@
|
|||
"dashboard_easy_invalid": "{setting} in step {step} is invalid",
|
||||
"dashboard_easy_required": "{setting} in step {step} is required",
|
||||
"dashboard_table": "Table element",
|
||||
"dashboard_no_match" : "No match found",
|
||||
"dashboard_no_match_filter" : "No match found with filter",
|
||||
"inp_input_valid": "input valid",
|
||||
"inp_input_error_required": "input is required",
|
||||
"inp_input_error": "input is invalid",
|
||||
|
|
|
|||
|
|
@ -1319,6 +1319,7 @@ const builder = [
|
|||
text: "jobs_search_desc",
|
||||
iconName: "info",
|
||||
iconColor: "info",
|
||||
svgSize: "sm",
|
||||
},
|
||||
],
|
||||
columns: {
|
||||
|
|
@ -1347,6 +1348,7 @@ const builder = [
|
|||
text: "jobs_interval_desc",
|
||||
iconName: "info",
|
||||
iconColor: "info",
|
||||
svgSize: "sm",
|
||||
},
|
||||
],
|
||||
columns: {
|
||||
|
|
@ -1375,6 +1377,7 @@ const builder = [
|
|||
text: "jobs_reload_desc",
|
||||
iconName: "info",
|
||||
iconColor: "info",
|
||||
svgSize: "sm",
|
||||
},
|
||||
],
|
||||
columns: {
|
||||
|
|
@ -1403,6 +1406,7 @@ const builder = [
|
|||
text: "jobs_success_desc",
|
||||
iconName: "info",
|
||||
iconColor: "info",
|
||||
svgSize: "sm",
|
||||
},
|
||||
],
|
||||
columns: {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { reactive, onBeforeMount } from "vue";
|
||||
import { reactive, onBeforeMount, onMounted } from "vue";
|
||||
import DashboardLayout from "@components/Dashboard/Layout.vue";
|
||||
import BuilderPlugins from "@components/Builder/Plugins.vue";
|
||||
|
||||
|
|
@ -13,6 +13,63 @@ const plugins = reactive({
|
|||
builder: "",
|
||||
});
|
||||
|
||||
// Case we click on redirect icon, go to the redirect plugin page
|
||||
function redirectPlugin() {
|
||||
window.addEventListener(
|
||||
"click",
|
||||
(e) => {
|
||||
// Case avoid redirect
|
||||
if (!e.target.closest("[data-plugin-redirect]")) return;
|
||||
if (
|
||||
e.target
|
||||
.closest("[data-plugin-redirect]")
|
||||
.getAttribute("data-plugin-redirect") !== "true"
|
||||
)
|
||||
return;
|
||||
// Prepare redirect
|
||||
const pluginId = e.target
|
||||
.closest("[data-plugin-id]")
|
||||
.getAttribute("data-plugin-id");
|
||||
// Redirect
|
||||
window.location.href = `./${pluginId}`;
|
||||
},
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
// Case we click on redirect icon, go to the redirect plugin page
|
||||
function deletePlugin() {
|
||||
const deleteData = {
|
||||
name: "pluginName",
|
||||
type: "pluginType",
|
||||
operation: "delete",
|
||||
};
|
||||
window.addEventListener(
|
||||
"click",
|
||||
(e) => {
|
||||
// Case avoid redirect
|
||||
if (!e.target.closest("[data-plugin-delete]")) return;
|
||||
if (
|
||||
e.target
|
||||
.closest("[data-plugin-delete]")
|
||||
.getAttribute("data-plugin-delete") !== "true"
|
||||
)
|
||||
return;
|
||||
// Update data
|
||||
deleteData.name = e.target
|
||||
.closest("[data-plugin-id]")
|
||||
.getAttribute("data-plugin-id");
|
||||
deleteData.type = e.target
|
||||
.closest("[data-plugin-type]")
|
||||
.getAttribute("data-plugin-type");
|
||||
// Attach data to submit button (need to check attributs data-delete-plugin)
|
||||
const submitBtn = document.querySelector("[data-delete-plugin]");
|
||||
submitBtn.setAttribute("data-delete-plugin", JSON.stringify(deleteData));
|
||||
},
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
// Get builder data
|
||||
const dataAtt = "data-server-builder";
|
||||
|
|
@ -24,6 +81,10 @@ onBeforeMount(() => {
|
|||
plugins.builder = data;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
redirectPlugin();
|
||||
deletePlugin();
|
||||
});
|
||||
const builder = [
|
||||
{
|
||||
type: "card",
|
||||
|
|
@ -107,6 +168,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "general",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: true,
|
||||
popovers: [
|
||||
|
|
@ -123,6 +185,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "antibot",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [
|
||||
|
|
@ -139,6 +202,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "authbasic",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -149,6 +213,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "backup",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true",
|
||||
},
|
||||
disabled: true,
|
||||
popovers: [
|
||||
|
|
@ -170,6 +235,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "badbehavior",
|
||||
"data-plugin-delete": "true",
|
||||
"data-plugin-redirect": "true",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [
|
||||
|
|
@ -191,6 +257,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "blacklist",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [
|
||||
|
|
@ -207,6 +274,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "brotli",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -217,6 +285,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "bunkernet",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [
|
||||
|
|
@ -233,6 +302,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "cors",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [
|
||||
|
|
@ -249,6 +319,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "clientcache",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -259,6 +330,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "country",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [
|
||||
|
|
@ -275,6 +347,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "customcert",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -285,6 +358,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "db",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -295,6 +369,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "dnsbl",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [
|
||||
|
|
@ -311,6 +386,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "errors",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [
|
||||
|
|
@ -327,6 +403,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "greylist",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [
|
||||
|
|
@ -343,6 +420,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "gzip",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -353,6 +431,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "inject",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -363,6 +442,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "headers",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -373,6 +453,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "jobs",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -383,6 +464,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "letsencrypt",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -393,6 +475,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "limit",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [
|
||||
|
|
@ -409,6 +492,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "metrics",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -419,6 +503,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "misc",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [
|
||||
|
|
@ -435,6 +520,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "modsecurity",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -445,6 +531,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "php",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -455,6 +542,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "pro",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -465,6 +553,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "realip",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -475,6 +564,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "redirect",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -485,6 +575,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "redis",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [
|
||||
|
|
@ -501,6 +592,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "reverseproxy",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -511,6 +603,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "reversescan",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [
|
||||
|
|
@ -527,6 +620,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "selfsigned",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -537,6 +631,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "sessions",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -547,6 +642,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "ui",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [],
|
||||
|
|
@ -557,6 +653,7 @@ const builder = [
|
|||
attrs: {
|
||||
"data-plugin-id": "whitelist",
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true",
|
||||
},
|
||||
disabled: false,
|
||||
popovers: [
|
||||
|
|
|
|||
|
|
@ -12,36 +12,57 @@ import { v4 as uuidv4 } from "uuid";
|
|||
This function will for example update the aria-expanded attribute of an element in case we have an aria-controls attribute.
|
||||
*/
|
||||
function useGlobal() {
|
||||
window.addEventListener("click", (e) => {
|
||||
updateExpanded();
|
||||
});
|
||||
window.addEventListener(
|
||||
"click",
|
||||
(e) => {
|
||||
// Update some states
|
||||
useShowEl(e);
|
||||
useHideEl(e);
|
||||
},
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
@name useGlobal
|
||||
@description This function updates the aria-expanded attribute of an element in case we have an aria-controls attribute.
|
||||
@name useShowEl
|
||||
@description This function will check if an element controls an element visibility and show it if it's the case.
|
||||
The element handler need to have a data-show-el attribute with the id of the target element as value.
|
||||
This function needs to be link to an event listener to work.
|
||||
This function will check if aria-controls and aria-expanded attributes are present, else will create them.
|
||||
@example
|
||||
<button data-show-el="modal">Open modal</button>
|
||||
<div id="modal" class="hidden">Modal content</div>
|
||||
@param {Event} e - The event object.
|
||||
*/
|
||||
function updateExpanded() {
|
||||
// Wait for previous event and element visibility update
|
||||
setTimeout(() => {
|
||||
// Check state for all elements that have aria-controls and aria-expanded attributes
|
||||
const controlEls = document.querySelectorAll(
|
||||
"[aria-controls][aria-expanded]"
|
||||
);
|
||||
if (!controlEls) return;
|
||||
controlEls.forEach((el) => {
|
||||
try {
|
||||
const targetEl = document.getElementById(
|
||||
el.getAttribute("aria-controls")
|
||||
);
|
||||
if (!targetEl) return el.setAttribute("aria-expanded", "false");
|
||||
el.setAttribute(
|
||||
"aria-expanded",
|
||||
isElHidden(targetEl) ? "false" : "true"
|
||||
);
|
||||
} catch (err) {}
|
||||
});
|
||||
}, 50);
|
||||
function useShowEl(e) {
|
||||
if (!e.target.closest("button").hasAttribute("data-show-el")) return;
|
||||
// show
|
||||
const showElId = e.target.closest("button").getAttribute("data-show-el");
|
||||
document.getElementById(showElId).classList.remove("hidden");
|
||||
// Update a11y attributes
|
||||
e.target.closest("button").setAttribute("aria-controls", showElId);
|
||||
e.target.closest("button").setAttribute("aria-expanded", "true");
|
||||
}
|
||||
|
||||
/**
|
||||
@name useHideEl
|
||||
@description This function will check if an element controls an element visibility and close it if it's the case.
|
||||
The element handler need to have a data-show-el attribute with the id of the target element as value.
|
||||
This function needs to be link to an event listener to work.
|
||||
This function will check if aria-controls and aria-expanded attributes are present, else will create them.
|
||||
@example
|
||||
<button data-close-el="modal">Close modal</button>
|
||||
<div id="modal" class="">Modal content</div>
|
||||
@param {Event} e - The event object.
|
||||
*/
|
||||
function useHideEl(e) {
|
||||
if (!e.target.closest("button").hasAttribute("data-show-close")) return;
|
||||
// hide
|
||||
const hideElId = e.target.closest("button").getAttribute("data-show-close");
|
||||
document.getElementById(hideElId).classList.add("hidden");
|
||||
// Update a11y attributes
|
||||
e.target.closest("button").setAttribute("aria-controls", hideElId);
|
||||
e.target.closest("button").setAttribute("aria-expanded", "false");
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -3021,6 +3021,8 @@ def plugins_builder(plugins, data={}):
|
|||
"attrs": {
|
||||
"data-plugin-id": plugin.get("id"),
|
||||
"data-plugin-delete": "true" if can_be_delete else "false",
|
||||
"data-plugin-redirect" : "true" if plugin.get("page", False) else "false",
|
||||
"data-plugin-type": plugin.get("type", "").lower(),
|
||||
},
|
||||
"disabled": (
|
||||
True
|
||||
|
|
|
|||
|
|
@ -89,7 +89,8 @@
|
|||
"type": "pro",
|
||||
"attrs": {
|
||||
"data-plugin-id": "general",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": true,
|
||||
"popovers": [
|
||||
|
|
@ -105,7 +106,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "antibot",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": [
|
||||
|
|
@ -121,7 +123,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "authbasic",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -131,7 +134,8 @@
|
|||
"type": "pro",
|
||||
"attrs": {
|
||||
"data-plugin-id": "backup",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true"
|
||||
},
|
||||
"disabled": true,
|
||||
"popovers": [
|
||||
|
|
@ -152,7 +156,8 @@
|
|||
"type": "external",
|
||||
"attrs": {
|
||||
"data-plugin-id": "badbehavior",
|
||||
"data-plugin-delete": "true"
|
||||
"data-plugin-delete": "true",
|
||||
"data-plugin-redirect": "true"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": [
|
||||
|
|
@ -173,7 +178,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "blacklist",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": [
|
||||
|
|
@ -189,7 +195,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "brotli",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -199,7 +206,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "bunkernet",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": [
|
||||
|
|
@ -215,7 +223,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "cors",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": [
|
||||
|
|
@ -231,7 +240,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "clientcache",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -241,7 +251,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "country",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": [
|
||||
|
|
@ -257,7 +268,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "customcert",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -267,7 +279,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "db",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -277,7 +290,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "dnsbl",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": [
|
||||
|
|
@ -293,7 +307,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "errors",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": [
|
||||
|
|
@ -309,7 +324,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "greylist",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": [
|
||||
|
|
@ -325,7 +341,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "gzip",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -335,7 +352,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "inject",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -345,7 +363,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "headers",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -355,7 +374,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "jobs",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -365,7 +385,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "letsencrypt",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -375,7 +396,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "limit",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": [
|
||||
|
|
@ -391,7 +413,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "metrics",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -401,7 +424,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "misc",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": [
|
||||
|
|
@ -417,7 +441,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "modsecurity",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -427,7 +452,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "php",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -437,7 +463,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "pro",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -447,7 +474,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "realip",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -457,7 +485,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "redirect",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -467,7 +496,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "redis",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": [
|
||||
|
|
@ -483,7 +513,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "reverseproxy",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -493,7 +524,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "reversescan",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": [
|
||||
|
|
@ -509,7 +541,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "selfsigned",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -519,7 +552,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "sessions",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -529,7 +563,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "ui",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "false"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": []
|
||||
|
|
@ -539,7 +574,8 @@
|
|||
"type": "core",
|
||||
"attrs": {
|
||||
"data-plugin-id": "whitelist",
|
||||
"data-plugin-delete": "false"
|
||||
"data-plugin-delete": "false",
|
||||
"data-plugin-redirect": "true"
|
||||
},
|
||||
"disabled": false,
|
||||
"popovers": [
|
||||
|
|
|
|||
Loading…
Reference in a new issue