Fix events for ChooserElement

client/src/components/content-block-form/AddContentLink.vue

@@ -2,16 +2,19 @@
   <a
     class="add-content-link"
     data-cy="add-content-link"
-    @click="$emit('click')"
+    @click="click"
     ><plus-icon class="add-content-link__icon" /> <span class="add-content-link__text">Inhalt hinzufügen</span></a
   >
 </template>
 
-<script>
+<script setup lang="ts">
 import PlusIcon from '@/components/icons/PlusIcon.vue';
-export default {
+
-  components: { PlusIcon },
+const emit = defineEmits(['click']);
-};
+
+const click = () => {
+  emit('click');
+}
 </script>
 
 <style scoped lang="scss">

client/src/components/content-forms/ChooserElement.vue

@@ -2,52 +2,60 @@
   <div
     :class="['chooser-element', subclass]"
     :data-cy="cy"
-    @click="$emit('select')"
+    @click="emit('select')"
   >
     <component
       class="chooser-element__icon"
-      :is="icon"
+      :is="realIcon"
     />
     <div class="chooser-element__title">
-      {{ title }}
+      {{ realTitle }}
     </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed } from 'vue';
+ 
+interface Props {
+  type: string;
+  icon: string;
+  title: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: '',
+});
+
+const emit = defineEmits(['select']);
+
+const defaultTitle = (type:string) => {
+  return type.replace(/^\w/, (c :string) => c.toUpperCase());
+}
+
+const defaultIcon = (type:string) => {
+  return `${type}-icon`;
+}
+
+const subclass =`chooser-element--${props.type}`; 
+const cy = `choose-${props.type}-widget`;
+
+const realTitle = computed(() => {
+  return props.title || defaultTitle(props.type);
+});
+const realIcon = computed(() => {
+  return props.icon || defaultIcon(props.type);
+});
+</script>
+
+<script lang="ts">
 import formElementIcons from '@/components/ui/form-element-icons';
 
 export default {
-  props: {
-    type: {
-      type: String,
-      default: '',
-    },
-    icon: {
-      type: String,
-      default() {
-        return `${this.type}-icon`;
-      },
-    },
-    title: {
-      type: String,
-      default() {
-        return this.type.replace(/^\w/, (c) => c.toUpperCase());
-      },
-    },
-  },
-
   components: {
     ...formElementIcons,
   },
-
+}
-  data() {
-    return {
-      subclass: `chooser-element--${this.type}`,
-      cy: `choose-${this.type}-widget`,
-    };
-  },
-};
 </script>
 
 <style scoped lang="scss">