refactor(component-library): move mt-context-menu-item to composition…

… api
shopware · Jan 23, 2025 · 95d086b · 95d086b
1 parent f52e3de
commit 95d086b
Showing 1 changed file with 21 additions and 54 deletions.
diff --git a/...mponent-library/src/components/context-menu/mt-context-menu-item/mt-context-menu-item.vue b/...mponent-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>