add custom progressBar

src/components/FileTable.vue

@@ -16,7 +16,7 @@
                             <span>Nouveau</span>
                         </button>
                         <span v-else>
-                            <NcProgressBar :value="transferProgress" size="medium" :color="transferStatus" />
+                            <ProgressBar :value="transferProgress" :color="transferStatus" />
                         </span>
                     </div>
                 </template>
@@ -133,7 +133,8 @@ import NcActions from '@nextcloud/vue/dist/Components/NcActions.js';
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js';
 import Delete from 'vue-material-design-icons/Delete.vue';
 import Pencil from 'vue-material-design-icons/Pencil.vue'
-import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
+//import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
+import ProgressBar from './ProgressBar.vue';
 import EditFileName from './EditFileName.vue';
 
 export default {
@@ -144,7 +145,7 @@ export default {
         Plus,
         NcActions,
         NcActionButton,
-        NcProgressBar,
+        ProgressBar,
         Delete,
         Pencil,
         EditFileName,
@@ -169,7 +170,7 @@ export default {
             initialFileName: '', // Nom originel du fichier/dossier edite
             isDirectory: false, // Si l'element edite est un dossier ou non
             transferProgress: 0,
-            transferStatus: 'green',
+            transferStatus: 'bg-blue-500',
         };
     },
     async mounted() {
@@ -297,7 +298,7 @@ export default {
 
             } catch (error) {
                 console.error('Erreur lors du drop :', error);
-                this.transferStatus = 'red';
+                this.transferStatus = 'bg-red-500';
                 this.isTransfering = false;
             }
         },

src/components/ProgressBar.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="flex items-center w-48 h-full">
+      <div class="relative w-full h-2 bg-gray-200/10 rounded-full overflow-hidden">
+        <div
+          :style="{ width: value + '%' }"
+          class="h-full rounded-full"
+          :class="color"
+        ></div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "ProgressBar",
+    props: {
+      value: {
+        type: Number,
+        required: true,
+        validator: (v) => v >= 0 && v <= 100,
+      },
+      label: {
+        type: String,
+        default: "Progress",
+      },
+      color: {
+        type: String,
+        default: "bg-blue-500",
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  /* Optionnel: Ajoutez un style personnalisé ici si nécessaire */
+  </style>
+