@tak-ps/vue-tabler 4.28.0 → 4.29.2

package/CHANGELOG.md

@@ -10,6 +10,18 @@
 
 ## Version History
 
+### v4.29.2
+
+- :bug: Upstream styling of label dropdowns
+
+### v4.29.1
+
+- :bug: Fix tests
+
+### v4.29.0
+
+- :rocket: Introduce additional TablerBadge props including hover
+
 ### v4.27.0
 
 - :tada: Introduce `TablerUploadLogo` component

package/components/Badge.vue

@@ -13,13 +13,25 @@ import { computed } from 'vue';
 export interface BadgeProps {
     backgroundColor?: string;
     borderColor?: string;
+    borderStyle?: string;
+    borderWidth?: string;
     textColor?: string;
+    hoverBackgroundColor?: string;
+    hoverBorderColor?: string;
+    hoverBorderStyle?: string;
+    hoverTextColor?: string;
 }
 
 const props = withDefaults(defineProps<BadgeProps>(), {
     backgroundColor: 'rgba(34, 197, 94, 0.2)',
     borderColor: undefined,
+    borderStyle: 'solid',
+    borderWidth: '1px',
     textColor: '#ffffff',
+    hoverBackgroundColor: undefined,
+    hoverBorderColor: undefined,
+    hoverBorderStyle: undefined,
+    hoverTextColor: undefined,
 });
 
 type ParsedColor = {
@@ -123,14 +135,26 @@ const badgeStyle = computed(() => {
     return {
         backgroundColor: props.backgroundColor,
         borderColor: resolvedBorderColor.value,
+        borderStyle: props.borderStyle,
+        borderWidth: props.borderWidth,
         color: props.textColor,
+        '--badge-hover-bg': props.hoverBackgroundColor ?? props.backgroundColor,
+        '--badge-hover-border': props.hoverBorderColor ?? resolvedBorderColor.value,
+        '--badge-hover-border-style': props.hoverBorderStyle ?? props.borderStyle,
+        '--badge-hover-text': props.hoverTextColor ?? props.textColor,
     };
 });
 </script>
 
 <style scoped>
 .tabler-badge {
-    border-style: solid;
-    border-width: 1px;
+    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
 }
-</style>
+
+.tabler-badge:hover {
+    background-color: var(--badge-hover-bg) !important;
+    border-color: var(--badge-hover-border) !important;
+    border-style: var(--badge-hover-border-style) !important;
+    color: var(--badge-hover-text) !important;
+}
+</style>

package/components/internal/Label.vue

@@ -13,17 +13,16 @@
                     />
                 </template>
                 <template #dropdown>
-                    <div class='card'>
-                        <div class='card-header'>
-                            <div
-                                class='card-title'
-                                v-text='props.label'
-                            />
+                    <div
+                        class='py-1'
+                        style='min-width: 300px;'
+                    >
+                        <div class='px-3 pt-2 pb-1 fw-bold'>
+                            {{props.label}}
                         </div>
-                        <div
-                            class='card-body'
-                            v-text='props.description'
-                        />
+                    </div>
+                    <div class='px-3 pb-2'>
+                        {{props.description}}
                     </div>
                 </template>
             </dropdown>

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tak-ps/vue-tabler",
     "type": "module",
-    "version": "4.28.0",
+    "version": "4.29.2",
     "lib": "lib.ts",
     "main": "lib.ts",
     "module": "lib.ts",