🔥 Improve plugins loaders (#5697)

- [x] Remove duplicated names
- [x] Improve the way to load plugins and extensions
- [x] Auto loading new plugins
- [x] Convert to typescript   
- [x] Delete unused directive

Author: damianpumar

argilla-frontend/nuxt.config.ts

@@ -56,28 +56,7 @@ const config: NuxtConfig = {
   css: ["~assets/scss/base/base.scss"],
 
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
-  plugins: [
-    { src: "~/plugins/logo" },
-
-    { src: "~/plugins/directives" },
-
-    { src: "~/plugins/di" },
-
-    { src: "~/plugins/language" },
-
-    { src: "~/plugins/plugins/axios.ts" },
-    { src: "~/plugins/plugins/axios-cache.ts" },
-    { src: "~/plugins/plugins/svg-icon.js" },
-    { src: "~/plugins/plugins/click-outside.js" },
-    { src: "~/plugins/plugins/toast.ts" },
-    { src: "~/plugins/plugins/copy-to-clipboard.js" },
-    { src: "~/plugins/plugins/filters.js" },
-    { src: "~/plugins/plugins/vue-draggable.js" },
-    { src: "~/plugins/plugins/platform.ts" },
-    { src: "~/plugins/plugins/language.ts" },
-    { src: "~/plugins/plugins/color-schema" },
-    { src: "~/plugins/plugins/color-generator.ts" },
-  ],
+  plugins: [{ src: "~/plugins" }],
 
   // Auto import components (https://go.nuxtjs.dev/config-components)
   components: [

argilla-frontend/plugins/plugins/axios-cache.ts renamed to argilla-frontend/plugins/axios/axios-cache.ts

@@ -18,6 +18,6 @@
 import { Context } from "@nuxt/types";
 import { loadDependencyContainer } from "@/v1/di";
 
-export default (instance: Context) => {
-  loadDependencyContainer(instance);
+export default (context: Context) => {
+  loadDependencyContainer(context);
 };

argilla-frontend/plugins/plugins/axios.ts renamed to argilla-frontend/plugins/axios/axios-global-handler.ts

@@ -1,15 +1,26 @@
-// style for button to open formular
 import Vue from "vue";
 
-//NOTE - to use this directive, add to your html element where to put a badge :
+// NOTE - to use this directive, add to your html element where to put a badge :
 //  v-badge="{showBadge: true,  verticalPosition: 'top',  horizontalPosition: 'right'}"
 //    => showBadge (Boolean) to show or not the badge : true or false
 //    => verticalPosition (String) vertical position : 'top' or 'bottom'
 //    => horizontalPosition (String) horizontal position : 'right' or 'left'
 //    => size (String) height and size of the badge: '10px
 
 Vue.directive("badge", {
-  bind: (element, binding) => {
+  bind: (
+    element,
+    binding: {
+      value: {
+        showBadge: boolean;
+        verticalPosition: string;
+        horizontalPosition: string;
+        backgroundColor: string;
+        borderColor: string;
+        size: string;
+      };
+    }
+  ) => {
     const { showBadge } = binding.value;
     if (showBadge) {
       const {

argilla-frontend/plugins/di/index.ts renamed to argilla-frontend/plugins/di/di.ts

@@ -1,4 +1,5 @@
 import Vue from "vue";
+
 Vue.directive("circle", {
   bind: (element, binding) => {
     let circleDiameter = "0px";

argilla-frontend/plugins/directives/badge.directive.js renamed to argilla-frontend/plugins/directives/badge.directive.ts

@@ -2,10 +2,10 @@ import Vue from "vue";
 
 // NOTE - to use this directive, add to your html text element where to put a asterisk :
 //  v-required-field="{ show: true, color: 'blue'}"
-//    => color (String) the color of the asterisk : black by default
+//  => color (String) the color of the asterisk : black by default
 
 Vue.directive("required-field", {
-  bind(element, binding) {
+  bind(element, binding: { value: { show: boolean; color: string } }) {
     const span = document.createElement("span");
     span.textContent = " *";
     span.style.color = binding.value.color;