feat(menu-item): allow to customize item tag via as prop

Default to resolve RouterLink.
gitsindonesia · Aug 25, 2022 · 69fbd7e · 69fbd7e
1 parent 0dbb5f6
commit 69fbd7e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 7 deletions.
diff --git a/packages/menu/src/VMenu.stories.ts b/packages/menu/src/VMenu.stories.ts
@@ -14,12 +14,12 @@ export default {
       icon: 'ri:home-2-line',
       children: [
         {
-          text: 'Sub Item',
+          text: 'Home',
           to: '/',
         },
         {
-          text: 'Sub Item 2',
-          to: '/',
+          text: 'About',
+          to: '/about',
         },
       ],
     },
@@ -45,6 +45,11 @@ const Template: Story = (args) => ({
   template: `
   <div :class="args.mini ? 'w-12' : ''">
     <VMenu v-bind="args">{{ args.label }}</VMenu>
+
+    <div class="rounded-lg border px-4 py-3 mt-4">
+      Router View:
+      <router-view />
+    </div>
   </div>
   `,
 });
@@ -61,7 +66,20 @@ Default.parameters = {
 
 Default.decorators = [
   /* this is the basic setup with no params passed to the decorator */
-  vueRouter(),
+  vueRouter([
+    {
+      path: '/',
+      component: {
+        template: 'Home',
+      },
+    },
+    {
+      path: '/about',
+      component: {
+        template: 'About',
+      },
+    },
+  ]),
 ];
 
 export const Small = Template.bind({});

diff --git a/packages/menu/src/VMenuItem.vue b/packages/menu/src/VMenuItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import VMenuTooltip from './VMenuTooltip.vue';
-import {computed, PropType} from 'vue';
+import {computed, PropType, resolveComponent} from 'vue';
 import {Menu} from './types';
 import {Icon} from '@iconify/vue';
 
@@ -26,6 +26,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  as: {
+    type: String,
+    default: '',
+  },
 });
 
 const centerClass = computed(() => {
@@ -39,11 +43,14 @@ const centerClass = computed(() => {
 
   return '';
 });
+
+const is = computed(() => props.as || resolveComponent('RouterLink'));
 </script>
 
 <template>
-  <router-link
+  <component
     v-if="item"
+    :is="is"
     :to="item.to"
     exact
     class="
@@ -72,5 +79,5 @@ const centerClass = computed(() => {
     <v-menu-tooltip :show="mini && !expandHover">
       {{ item.text }}
     </v-menu-tooltip>
-  </router-link>
+  </component>
 </template>