Migrate ColorBadge of TagList from bootstrap-vue to vuetify 2 #248

knutschsoft · Jan 2, 2025 · 0b0fe4c · 0b0fe4c
1 parent ffdc88f
commit 0b0fe4c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/web/assets/js/components/Tags/ColorBadge.vue b/web/assets/js/components/Tags/ColorBadge.vue
@@ -1,16 +1,19 @@
 <template>
-    <b-badge
+    <v-chip
         class="font-weight-bold d-flex align-items-center"
         :style="`background-color: ${ color }`"
         pill
-        font-scale="2"
     >
-        <div
-            style="height:inherit; background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; filter: invert(1) grayscale(1) contrast(999);"
+        <span
+            :style="`background-color: ${ color }`"
         >
-            {{ color }}
-        </div>
-    </b-badge>
+            <span
+                style="height:inherit; background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; filter: invert(1) grayscale(1) contrast(999);"
+            >
+                {{ color }}
+            </span>
+        </span>
+    </v-chip>
 </template>
 
 <script>

diff --git a/web/assets/js/components/Tags/TagList.vue b/web/assets/js/components/Tags/TagList.vue
@@ -135,7 +135,6 @@
 <script>
 'use strict';
 import ColorBadge from './ColorBadge.vue';
-import ContentLoadingSpinner from '../ContentLoadingSpinner.vue';
 import {useAlertStore, useAuthStore, useClientStore, useTagStore} from '../../stores';
 import {
     itemsPerPageOptions,
@@ -146,7 +145,7 @@ import {
 
 export default {
     name: 'TagList',
-    components: { ContentLoadingSpinner, ColorBadge },
+    components: { ColorBadge },
     data: function () {
         return {
             itemsPerPageOptions,