Use Vue Composition API and ESLint

1 files changed, 13 insertions, 18 deletions

diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
index 5684fb0..9357e97 100644
--- a/src/components/IconButton.vue
+++ b/src/components/IconButton.vue
@@ -5,24 +5,19 @@
 </div>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from 'vue';
+<script setup lang="ts">
+import {computed} from 'vue';
 
-export default defineComponent({
-	props: {
-		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',
-			};
-		},
-	},
+const props = defineProps({
+	size: {type: Number, default: 36},
+	disabled: {type: Boolean, default: false},
 });
+
+const styles = computed(() => ({
+	minWidth: props.size + 'px',
+	maxWidth: props.size + 'px',
+	minHeight: props.size + 'px',
+	maxHeight: props.size + 'px',
+	padding: (props.size / 5) + 'px',
+}));
 </script>