@tak-ps/vue-tabler 4.26.1 → 4.29.1

package/CHANGELOG.md

@@ -10,6 +10,18 @@
 
 ## Version History
 
+### v4.29.1
+
+- :bug: Fix tests
+
+### v4.29.0
+
+- :rocket: Introduce additional TablerBadge props including hover
+
+### v4.27.0
+
+- :tada: Introduce `TablerUploadLogo` component
+
 ### v4.26.1
 
 - :bug: Fix Lint Errors

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/TablerUploadLogo.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class='mb-3'>
+        <TablerInput
+            :id='props.inputId || "logoUpload"'
+            :label='props.label || "Upload PNG/SVG Logo"'
+            type='file'
+            accept='image/png, image/svg+xml'
+            :disabled='props.disabled'
+            :error='error'
+            @change='onFileChange'
+        />
+    </div>
+    <div
+        v-if='base64Data'
+        class='mt-3 row d-flex align-items-center justify-content-center'
+    >
+        <img
+            :src='base64Data'
+            alt='Logo Preview'
+            class='img-thumbnail'
+            style='max-width: 200px;'
+        >
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch } from 'vue';
+import TablerInput from './input/Input.vue';
+
+const emit = defineEmits(['update:modelValue', 'file-name']);
+
+const props = defineProps<{
+    modelValue?: string | null;
+    label?: string;
+    disabled?: boolean;
+    inputId?: string;
+}>();
+
+const base64Data = ref<string | undefined | null>(props.modelValue);
+const error = ref('');
+
+watch(() => props.modelValue, () => {
+    base64Data.value = props.modelValue;
+});
+
+watch(base64Data, () => {
+    emit('update:modelValue', base64Data.value);
+});
+
+function onFileChange(event: Event) {
+    const target = event.target as HTMLInputElement;
+
+    error.value = '';
+
+    if (!target.files || target.files.length === 0) {
+        throw new Error('Could not read file from input');
+    }
+
+    const file = target.files[0];
+    if (!file) return;
+
+    emit('file-name', file.name);
+
+    if (!['image/png', 'image/svg+xml'].includes(file.type)) {
+        error.value = 'Please upload a PNG or SVG file.';
+        base64Data.value = '';
+        return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+        base64Data.value = (e.target && e.target.result) ? String(e.target.result) : undefined;
+    };
+    reader.onerror = () => {
+        error.value = 'Failed to read file.';
+        base64Data.value = '';
+    };
+
+    reader.readAsDataURL(file);
+}
+</script>

package/lib.ts

@@ -34,3 +34,4 @@ export { default as TablerDelete } from './components/Delete.vue';
 export { default as TablerPillGroup } from './components/PillGroup.vue';
 export { default as TablerSchema } from './components/Schema.vue';
 export { default as TablerSchemaBuilder } from './components/SchemaBuilder.vue';
+export { default as TablerUploadLogo } from './components/TablerUploadLogo.vue';

package/package.json

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