From 9e8e30c5c680ca81862e4fba5f7ae9ecea62b8ff Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 4 Jul 2022 21:19:11 +1000
Subject: Update IconButton to maintain equal width/height

---
 src/components/IconButton.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

(limited to 'src/components/IconButton.vue')

diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
index 0294c5b..5684fb0 100644
--- a/src/components/IconButton.vue
+++ b/src/components/IconButton.vue
@@ -1,7 +1,6 @@
 <template>
-<div class="p-2 rounded-full hover:cursor-pointer"
-	:class="{'hover:brightness-125': !disabled, 'brightness-50': disabled}"
-	:style="{width: size + 'px', height: size + 'px', padding: (size / 5) + 'px'}">
+<div :style="styles" class="p-2 rounded-full hover:cursor-pointer"
+	:class="{'hover:brightness-125': !disabled, 'brightness-50': disabled}">
 	<slot class="w-full h-full">?</slot>
 </div>
 </template>
@@ -14,5 +13,16 @@ export default defineComponent({
 		size: {type: Number, default: 36},
 		disabled: {type: Boolean, default: false},
 	},
+	computed: {
+		styles(): Record<string,string> {
+			return {
+				minWidth: this.size + 'px',
+				maxWidth: this.size + 'px',
+				minHeight: this.size + 'px',
+				maxHeight: this.size + 'px',
+				padding: (this.size / 5) + 'px',
+			};
+		},
+	},
 });
 </script>
-- 
cgit v1.2.3