@tak-ps/vue-tabler 4.7.0 → 4.8.0

package/CHANGELOG.md

@@ -10,6 +10,10 @@
 
 ## Version History
 
+### v4.8.0
+
+- :rocket: Allow setting button colour via prop
+
 ### v4.7.0
 
 - :arrow_up: Remove Babel

package/components/Button.vue

@@ -2,6 +2,7 @@
     <button
         tabindex='0'
         :disabled='props.disabled'
+        :style='buttonStyle'
         class='btn'
     >
         <slot />
@@ -9,9 +10,18 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+
 export interface ButtonProps {
+    color?: string;
     disabled?: boolean;
 }
 
 const props = defineProps<ButtonProps>();
+
+const buttonStyle = computed(() => {
+    return {
+        backgroundColor: props.color
+    };
+});
 </script>

package/components/IconButton.vue

@@ -7,8 +7,9 @@
         :class='{
             "cursor-pointer": props.disabled === false,
             "cursor-default disabled": props.disabled === true,
-            "custom-hover": props.hover,
+            "custom-hover": props.hover && !props.color,
         }'
+        :style='iconButtonStyle'
         class='rounded'
         @keyup.enter='icon?.click()'
     >
@@ -17,13 +18,14 @@
 </template>
 
 <script setup lang="ts">
-import { useId, useTemplateRef } from 'vue'
+import { computed, useId, useTemplateRef } from 'vue'
 
 const iconid = useId();
 
 const icon = useTemplateRef<HTMLElement>(iconid);
 
 export interface IconButtonProps {
+    color?: string;
     title: string;
     hover?: boolean;
     disabled?: boolean;
@@ -33,6 +35,12 @@ const props = withDefaults(defineProps<IconButtonProps>(), {
     hover: true,
     disabled: false
 });
+
+const iconButtonStyle = computed(() => {
+    return {
+        backgroundColor: props.color
+    };
+});
 </script>
 
 <style scoped>

package/package.json

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