Fix another component's events

client/src/components/ui/ButtonWithIconAndText.vue

@@ -1,8 +1,12 @@
 <template>
   <button
-    :class="['button', 'button-with-icon-and-text', { 'button-with-icon-and-text--large': large }]"
+    :class="[
+      'button',
+      'button-with-icon-and-text',
+      {'button-with-icon-and-text--large': large},
+    ]"
     :disabled="disabled"
-    @click="$emit('click')"
+    @click="click"
   >
     <component
       class="button-with-icon-and-text__icon"
@@ -12,33 +16,36 @@
   </button>
 </template>
 
-<script>
+<script setup lang="ts">
-import formElementIcons from '@/components/ui/form-element-icons';
+interface Props {
+  icon: string
+  text: string
+  large: boolean
+  disabled: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  icon: '',
+  text: '',
+  large: false,
+  disabled: false,
+})
+
+const emit = defineEmits(['click'])
+
+const click = () => {
+  emit('click')
+}
+</script>
+
+<script lang="ts">
+import formElementIcons from '@/components/ui/form-element-icons'
 
 export default {
-  props: {
-    icon: {
-      type: String,
-      default: '',
-    },
-    text: {
-      type: String,
-      default: '',
-    },
-    large: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
   components: {
     ...formElementIcons,
   },
-};
+}
 </script>
 
 <style scoped lang="scss">