feat(menu): idea to introduce generics and better types for components

.eslintrc.js

@@ -95,5 +95,19 @@ module.exports = {
             { blankLine: 'always', prev: '*', next: 'block-like' },
             { blankLine: 'always', prev: ['import'], next: ['const', 'let', 'var'] }
         ]
-    }
+    },
+    overrides: [
+        {
+            files: ['*.typedef.vue'],
+            extends: ['plugin:vue/vue3-recommended', '@vue/eslint-config-typescript', 'plugin:@typescript-eslint/recommended-type-checked'],
+            parser: 'vue-eslint-parser',
+            parserOptions: {
+                ecmaVersion: 'latest',
+                sourceType: 'module',
+                parser: '@typescript-eslint/parser',
+                project: ['tsconfig.lint.json'],
+                extraFileExtensions: ['.vue']
+            }
+        }
+    ]
 };

packages/primevue/src/menu/Menu.d.ts

@@ -7,7 +7,7 @@
  * @module menu
  *
  */
-import type { DefineComponent, DesignToken, EmitFn, HintedString, PassThrough } from '@primevue/core';
+import type { DesignToken, EmitFn, HintedString, PassThrough } from '@primevue/core';
 import type { ComponentHooks } from '@primevue/core/basecomponent';
 import type { MenuItem } from 'primevue/menuitem';
 import type { PassThroughOptions } from 'primevue/passthrough';
@@ -191,11 +191,11 @@ export interface MenuRouterBindProps {
 /**
  * Defines valid properties in Menu component.
  */
-export interface MenuProps {
+export interface MenuProps<Item extends MenuItem = MenuItem> {
     /**
      * An array of menuitems.
      */
-    model?: MenuItem[] | undefined;
+    model?: Item[] | undefined;
     /**
      * Defines if menu would displayed as a popup.
      * @defaultValue false
@@ -252,7 +252,7 @@ export interface MenuProps {
 /**
  * Defines valid slots in Menu component.
  */
-export interface MenuSlots {
+export interface MenuSlots<Item extends MenuItem = MenuItem> {
     /**
      * Custom start template.
      */
@@ -269,7 +269,7 @@ export interface MenuSlots {
         /**
          * Menuitem instance
          */
-        item: MenuItem;
+        item: Item;
         /**
          * Label property of the menuitem
          */
@@ -287,7 +287,7 @@ export interface MenuSlots {
         /**
          * Menuitem instance
          */
-        item: MenuItem;
+        item: Item;
         /**
          * Style class of the item icon element.
          */
@@ -302,7 +302,7 @@ export interface MenuSlots {
         /**
          * Menuitem instance
          */
-        item: MenuItem;
+        item: Item;
     }): VNode[];
     /**
      * Custom submenu item template.
@@ -312,7 +312,7 @@ export interface MenuSlots {
         /**
          * Menuitem instance
          */
-        item: MenuItem;
+        item: Item;
     }): VNode[];
 }
 
@@ -370,11 +370,11 @@ export interface MenuMethods {
  * @group Component
  *
  */
-declare const Menu: DefineComponent<MenuProps, MenuSlots, MenuEmits, MenuMethods>;
+declare const Menu: typeof import('./Menu.typedef.vue')['default'];
 
 declare module 'vue' {
     export interface GlobalComponents {
-        Menu: DefineComponent<MenuProps, MenuSlots, MenuEmits, MenuMethods>;
+        Menu: typeof import('./Menu.typedef.vue')['default'];
     }
 }
 

packages/primevue/src/menu/Menu.ts-playground.typedef.vue

@@ -0,0 +1,16 @@
+<template>
+    <Menu :model="model">
+        <!-- We can safely access additional keys on the object instead of it acting as any. -->
+        <template #item="{ item }">{{ item.additionalData }}</template>
+    </Menu>
+</template>
+
+<script setup lang="ts">
+import { MenuItem } from 'primevue/menuitem/MenuItem';
+
+const model: (MenuItem & { additionalData: Record<string, number> })[] = [
+    {
+        additionalData: {}
+    }
+];
+</script>

packages/primevue/src/menu/Menu.typedef.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts" generic="Item extends MenuItem">
+import type { MenuItem } from 'primevue/menuitem';
+import { MenuEmits, MenuMethods, MenuProps, MenuSlots } from './Menu';
+
+defineProps<MenuProps<Item>>();
+defineSlots<MenuSlots<Item>>();
+defineEmits<MenuEmits>();
+defineExpose<MenuMethods>();
+</script>

packages/primevue/tsconfig.json

@@ -21,6 +21,6 @@
             "@primevue/icons/*": ["../../packages/icons/src/*"]
         }
     },
-    "include": ["**/*.ts", "src/*"],
+    "include": ["**/*.ts", "src/*", "**/*.typedef.vue"],
     "exclude": ["node_modules", "dist"]
 }