refactor(components): [menu-item] use type-based definitions (#23446)

* refactor(components): [menu] use type-based definitions

* Update packages/components/menu/src/menu-item.ts

Co-authored-by: rzzf <cszhjh@gmail.com>

---------

Co-authored-by: rzzf <cszhjh@gmail.com>

packages/components/menu/src/menu-item-group.ts

@@ -1,12 +1,25 @@
-import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes } from 'vue'
 
+export interface MenuItemGroupProps {
+  /**
+   * @description group title
+   */
+  title?: string
+}
+
+/**
+ * @deprecated Removed after 3.0.0, Use `MenuItemGroupProps` instead.
+ */
 export const menuItemGroupProps = {
   /**
    * @description group title
    */
   title: String,
 } as const
-export type MenuItemGroupProps = ExtractPropTypes<typeof menuItemGroupProps>
+
+/**
+ * @deprecated Removed after 3.0.0, Use `MenuItemGroupProps` instead.
+ */
 export type MenuItemGroupPropsPublic = ExtractPublicPropTypes<
   typeof menuItemGroupProps
 >

packages/components/menu/src/menu-item-group.vue

@@ -12,11 +12,13 @@
 
 <script lang="ts" setup>
 import { useNamespace } from '@element-plus/hooks'
-import { menuItemGroupProps } from './menu-item-group'
+
+import type { MenuItemGroupProps } from './menu-item-group'
 
 defineOptions({
   name: 'ElMenuItemGroup',
 })
-defineProps(menuItemGroupProps)
+defineProps<MenuItemGroupProps>()
+
 const ns = useNamespace('menu-item-group')
 </script>

packages/components/menu/src/menu-item.ts

@@ -5,10 +5,30 @@ import {
   isString,
 } from '@element-plus/utils'
 
-import type { ExtractPropTypes, ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import type { MenuItemRegistered } from './types'
 
+export interface MenuItemProps {
+  /**
+   * @description unique identification
+   * - will be required in the next major version
+   * - required: true
+   */
+  index?: string | null
+  /**
+   * @description Vue Router object
+   */
+  route?: RouteLocationRaw
+  /**
+   * @description whether disabled
+   */
+  disabled?: boolean
+}
+
+/**
+ * @deprecated Removed after 3.0.0, Use `MenuItemProps` instead.
+ */
 export const menuItemProps = buildProps({
   /**
    * @description unique identification
@@ -30,7 +50,10 @@ export const menuItemProps = buildProps({
    */
   disabled: Boolean,
 } as const)
-export type MenuItemProps = ExtractPropTypes<typeof menuItemProps>
+
+/**
+ * @deprecated Removed after 3.0.0, Use `MenuItemProps` instead.
+ */
 export type MenuItemPropsPublic = ExtractPublicPropTypes<typeof menuItemProps>
 
 export const menuItemEmits = {

packages/components/menu/src/menu-item.vue

@@ -52,16 +52,19 @@ import ElTooltip from '@element-plus/components/tooltip'
 import { debugWarn, isPropAbsent, throwError } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
 import useMenu from './use-menu'
-import { menuItemEmits, menuItemProps } from './menu-item'
+import { menuItemEmits } from './menu-item'
 import { MENU_INJECTION_KEY, SUB_MENU_INJECTION_KEY } from './tokens'
 
+import type { MenuItemProps } from './menu-item'
 import type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types'
 
 const COMPONENT_NAME = 'ElMenuItem'
 defineOptions({
   name: COMPONENT_NAME,
 })
-const props = defineProps(menuItemProps)
+const props = withDefaults(defineProps<MenuItemProps>(), {
+  index: null,
+})
 const emit = defineEmits(menuItemEmits)
 
 isPropAbsent(props.index) &&