From 95d086bad0f4de570c384f690f42a770aff1a2fa Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Thu, 23 Jan 2025 09:35:15 +0100
Subject: [PATCH] refactor(component-library): move mt-context-menu-item to
 composition api

---
 .../mt-context-menu-item.vue                  | 75 ++++++-------------
 1 file changed, 21 insertions(+), 54 deletions(-)

diff --git a/packages/component-library/src/components/context-menu/mt-context-menu-item/mt-context-menu-item.vue b/packages/component-library/src/components/context-menu/mt-context-menu-item/mt-context-menu-item.vue
index 57e17a7a7..2c1551ab5 100644
--- a/packages/component-library/src/components/context-menu/mt-context-menu-item/mt-context-menu-item.vue
+++ b/packages/component-library/src/components/context-menu/mt-context-menu-item/mt-context-menu-item.vue
@@ -4,68 +4,35 @@
     :label="label"
     :icon="icon"
     :disabled="disabled"
-    :on-label-click="handleLableClick"
+    :on-label-click="
+      () => {
+        if (disabled) return;
+
+        $emit('click');
+      }
+    "
     :type="type"
     :role="role"
   />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import MtPopoverItem from "../../overlay/mt-popover-item/mt-popover-item.vue";
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
 import { type TranslateResult } from "vue-i18n";
 
-export default defineComponent({
-  name: "MtContextMenuItem",
-
-  components: {
-    "mt-popover-item": MtPopoverItem,
-  },
-
-  props: {
-    label: {
-      type: String as PropType<string | TranslateResult>,
-      required: true,
-    },
-
-    icon: {
-      type: String,
-      required: false,
-      default: null,
-    },
-
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-
-    type: {
-      type: String as PropType<"default" | "active" | "critical">,
-      required: false,
-      default: "default",
-    },
-
-    role: {
-      type: String,
-      required: false,
-      default: "menuitem",
-    },
+withDefaults(
+  defineProps<{
+    label: string | TranslateResult;
+    icon?: string;
+    disabled?: boolean;
+    type?: "default" | "active" | "critical";
+    role?: string;
+  }>(),
+  {
+    type: "default",
+    role: "menuitem",
   },
-  emits: ["click"],
-  setup(props, { emit }) {
-    const handleLableClick = () => {
-      if (props.disabled) {
-        return;
-      }
-
-      emit("click");
-    };
+);
 
-    return {
-      handleLableClick,
-    };
-  },
-});
+defineEmits<{ click: [] }>();
 </script>