fix modal close + icon events + plugins conditions

vuejs/client/input.css

@@ -563,7 +563,7 @@ body {
 }
 
 .icon-container {
-  @apply block w-fit;
+  @apply block w-fit  pointer-events-none;
 }
 
 .stick.icon-container {
@@ -571,7 +571,7 @@ body {
 }
 
 .icon-social {
-  @apply hover:opacity-80;
+  @apply hover:opacity-80 pointer-events-none;
 }
 
 .icon-header-field {
@@ -579,39 +579,39 @@ body {
 }
 
 .icon-stat {
-  @apply block w-10 h-10;
+  @apply block w-10 h-10  pointer-events-none;
 }
 
 .icon-base {
-  @apply block w-8 h-8
+  @apply block w-8 h-8 pointer-events-none;
 }
 
 .icon-card {
-  @apply block w-8 h-8
+  @apply block w-8 h-8 pointer-events-none;
 }
 
 .icon-unmatch {
-  @apply block w-8 h-8;
+  @apply block w-8 h-8 pointer-events-none;
 }
 
 .icon-menu {
-  @apply h-6 w-6 relative;
+  @apply h-6 w-6 relative pointer-events-none;
 }
 
 .icon-form {
-  @apply h-6 w-6 relative;
+  @apply h-6 w-6 relative pointer-events-none;
 }
 
 .icon-button {
-  @apply h-6 w-6 relative;
+  @apply h-6 w-6 relative pointer-events-none;
 }
 
 .icon-table:not([disabled]) {
-  @apply h-6 w-6 relative;
+  @apply h-6 w-6 relative pointer-events-none;
 }
 
 .icon-list-details {
-  @apply ml-2 h-6.5 w-6.5 relative;
+  @apply ml-2 h-6.5 w-6.5 relative pointer-events-none;
 }
 
 /* TABS */
@@ -1096,7 +1096,7 @@ body {
 }
 
 .text-list-details {
-  @apply w-full col-span-12 mb-0 dark:text-gray-300 break-word;
+  @apply w-full col-span-12 mb-0 text-gray-700 dark:text-gray-300 break-word;
 }
 
 /* BTN GROUP */
@@ -1590,7 +1590,7 @@ body {
 }
 
 .table-content-item {
-  @apply appearance-none text-sm col-span-12 block border-b hover:bg-gray-100 dark:hover:bg-slate-700 items-center grid grid-cols-12 border-gray-300 min-h-[65px];
+  @apply py-2 appearance-none text-sm col-span-12 block border-b hover:bg-gray-100 dark:hover:bg-slate-700 items-center grid grid-cols-12 border-gray-300 min-h-[65px];
 }
 
 .table-content-item-wrap {
@@ -1803,7 +1803,7 @@ body {
 }
 
 .blue-darker.text-el {
-  @apply text-blue-600;
+  @apply text-blue-600 dark:text-blue-500;
 }
 
 .yellow-darker.text-el {
@@ -1815,7 +1815,7 @@ body {
 }
 
 .dark-darker.text-el {
-  @apply text-slate-600;
+  @apply text-slate-600  dark:text-slate-500;
 }
 
 .amber-darker.text-el {
@@ -1952,7 +1952,7 @@ body {
 }
 
 .blue-darker.bg-el {
-  @apply bg-blue-600;
+  @apply bg-blue-600 dark:bg-blue-500;
 }
 
 .yellow-darker.bg-el {
@@ -1964,7 +1964,7 @@ body {
 }
 
 .dark-darker.bg-el {
-  @apply bg-slate-600;
+  @apply bg-slate-600  dark:bg-slate-500;
 }
 
 .amber-darker.bg-el {
@@ -2057,7 +2057,7 @@ body {
 }
 
 .dark.fill {
-  @apply fill-slate-500;
+  @apply fill-slate-500 ;
 }
 
 .amber.fill {
@@ -2125,7 +2125,7 @@ body {
 }
 
 .blue-darker.fill{
-  @apply fill-blue-600;
+  @apply fill-blue-600 dark:fill-blue-500;
 }
 
 .yellow-darker.fill {
@@ -2138,7 +2138,7 @@ body {
 
 .dark-darker.fill
  {
-  @apply fill-slate-600;
+  @apply fill-slate-600  dark:fill-slate-500;
 }
 
 .amber-darker.fill {

vuejs/client/src/components/Widget/Icons.vue

@@ -32,6 +32,7 @@ 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";
+import Close from "@components/Icons/Close.vue";
 
 /**
   @name Widget/Icons.vue
@@ -286,5 +287,6 @@ onMounted(() => {
       :color="props.color"
       :disabled="props.disabled"
     />
+    <Close v-if="props.iconName === 'close'" :iconClass="icon.class" />
   </div>
 </template>

vuejs/client/src/components/Widget/Subtitle.vue

@@ -15,6 +15,7 @@ import { computed, onMounted, reactive, ref } from "vue";
   @param {string} [type="card"] - The type of title between "container", "card", "content", "min" or "stat"
   @param {string} [tag=""] - The tag of the subtitle. Can be h1, h2, h3, h4, h5, h6 or p. If empty, will be determine by the type of subtitle.
   @param {string} [color=""] - The color of the subtitle between error, success, warning, info or tailwind color
+  @param {boolean} [bold=false] - If the subtitle should be bold or not.
   @param {string} [subtitleClass=""] - Additional class, useful when component is used directly on a grid system
 */
 
@@ -38,6 +39,11 @@ const props = defineProps({
     required: false,
     default: "",
   },
+  bold: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   subtitleClass: {
     type: String,
     required: false,
@@ -72,7 +78,7 @@ onMounted(() => {
     data-subtitle
     :is="tag"
     v-if="props.subtitle"
-    :class="[subtitle.class, props.color, 'text-el']"
+    :class="[subtitle.class, props.color, 'text-el', props.bold ? 'bold' : '']"
   >
     {{ $t(props.subtitle, $t("dashboard_placeholder", props.subtitle)) }}
   </component>

vuejs/client/src/components/Widget/Text.vue

@@ -14,6 +14,7 @@ import { onMounted, reactive, ref } from "vue";
   @param {string} text - The text value. Can be a translation key or by default raw text.
   @param {string} [textClass=""] - Style of text. Can be replace by any class starting by 'text-' like 'text-stat'.
   @param {string} [color=""] - The color of the text between error, success, warning, info or tailwind color
+  @param {boolean} [bold=false] - If the text should be bold or not.
   @param {string} [tag="p"] - The tag of the text. Can be p, span, div, h1, h2, h3, h4, h5, h6
   @param {boolean|object} [icon=false] - The icon to add before the text. If true, will add a default icon. If object, will add the icon with the name and the color.
   @param {object} [attrs={}] - List of attributs to add to the text.
@@ -34,6 +35,11 @@ const props = defineProps({
     required: false,
     default: "",
   },
+  bold: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   tag: {
     type: String,
     required: false,
@@ -76,7 +82,7 @@ onMounted(() => {
     :is="props.tag"
     v-bind="props.attrs"
     ref="textEl"
-    :class="[text.class, props.color, 'text-el']"
+    :class="[text.class, props.color, 'text-el', props.bold ? 'bold' : '']"
   >
     {{ $t(props.text, $t("dashboard_placeholder", props.text)) }}
   </component>

vuejs/client/src/pages/plugins/Plugins.vue

@@ -21,21 +21,20 @@ function redirectPlugin() {
     "click",
     (e) => {
       // Case avoid redirect
+      if (e.target.tagName !== "A") return;
       if (!e.target.closest("[data-plugin-redirect]")) return;
       if (
         e.target
           .closest("[data-plugin-redirect]")
-          .getAttribute("data-plugin-redirect") !== "true" ||
-        !e.target.querySelector(
-          '[:data-color="icon.color" :disabled="props.disabled" data-svg="redirect"]'
-        )
+          ?.getAttribute("data-plugin-redirect") !== "true" ||
+        !e.target.querySelector('[data-svg="redirect"]')
       )
         return;
       // Prepare redirect
       const pluginId = e.target
         .closest("[data-plugin-id]")
         .getAttribute("data-plugin-id");
-      // Redirect
+
       window.location.href = `./${pluginId}`;
     },
     true
@@ -54,11 +53,13 @@ function deletePlugin() {
     "click",
     (e) => {
       // Case avoid redirect
+      if (e.target.tagName !== "A") return;
       if (!e.target.closest("[data-plugin-delete]")) return;
       if (
         e.target
           .closest("[data-plugin-delete]")
-          .getAttribute("data-plugin-delete") !== "true"
+          .getAttribute("data-plugin-delete") !== "true" ||
+        !e.target.querySelector('[data-svg="trash"]')
       )
         return;
       // Update data
@@ -119,14 +120,13 @@ const builder = [
         type: "Text",
         data: {
           text: "plugins_modal_delete_confirm",
-          textClass: "text-modal",
         },
       },
       {
         type: "Text",
         data: {
           text: "",
-          textClass: "text-modal bold",
+          bold: true,
           attrs: {
             "data-modal-plugin-name": "true",
           },

vuejs/tests/plugins.py

@@ -3125,14 +3125,13 @@ def plugins_builder(plugins, data={}):
                 "type": "Text",
                 "data": {
                     "text": "plugins_modal_delete_confirm",
-                    "textClass": "text-modal",
                 },
             },
             {
                 "type": "Text",
                 "data": {
                     "text": "",
-                    "textClass": "text-modal bold",
+                    "bold": True,
                     "attrs": {
                         "data-modal-plugin-name": "true",
                     },

vuejs/tests/plugins_page.json

@@ -13,15 +13,14 @@
             {
                 "type": "Text",
                 "data": {
-                    "text": "plugins_modal_delete_confirm",
-                    "textClass": "text-modal"
+                    "text": "plugins_modal_delete_confirm"
                 }
             },
             {
                 "type": "Text",
                 "data": {
                     "text": "",
-                    "textClass": "text-modal bold",
+                    "bold": true,
                     "attrs": {
                         "data-modal-plugin-name": "true"
                     }