fix: add va-menu-full (epicmaxco#4423)

m0ksem · Nov 15, 2024 · 187ea87 · 187ea87
1 parent 559697b
commit 187ea87
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 19 deletions.
diff --git a/packages/nuxt/src/config/components.ts b/packages/nuxt/src/config/components.ts
@@ -90,6 +90,7 @@ export default [
   'VaMenuList',
   'VaMenuItem',
   'VaMenuGroup',
+  'VaMenuFull',
   'VaFormField',
   'VaStickyScrollbar'
 ]
diff --git a/packages/ui/src/components/va-menu-list/CHANGELOG.md b/packages/ui/src/components/va-menu-list/CHANGELOG.md
@@ -0,0 +1,4 @@
+# 1.10.4
+
+- Add VaMenuFull component for Dividers and custom content
+- Removed virtual-td that breaks layout when using VaPopover, custom td or headless components
diff --git a/packages/ui/src/components/va-menu-list/VaMenuList.stories.ts b/packages/ui/src/components/va-menu-list/VaMenuList.stories.ts
@@ -2,6 +2,7 @@ import { VaDivider, VaButton, VaDropdown, VaIcon, VaAvatar } from '../../compone
 import VaMenuList from './VaMenuList.vue'
 import VaMenuItem from './components/VaMenuItem.vue'
 import VaMenuGroup from './components/VaMenuGroup.vue'
+import VaMenuFull from './components/VaMenuFull.vue'
 
 export default {
   title: 'VaMenuList',
@@ -79,13 +80,45 @@ export const SlotUsage = () => ({
         User 2
       </VaMenuItem>
       <VaMenuGroup group-name="Group 2" />
-      <VaMenuItem rightIcon="home">
+      <VaMenuItem right-icon="home">
         User 3
       </VaMenuItem>
     </VaMenuList>
   `,
 })
 
+export const DivSlotUsage = () => ({
+  components: { VaMenuList, VaMenuItem, VaMenuGroup },
+  template: `
+    <VaMenuList>
+      <VaMenuGroup group-name="Group 1" />
+      <VaMenuItem icon="home">
+        User 1
+      </VaMenuItem>
+      <VaMenuItem>
+        User 2
+      </VaMenuItem>
+      <VaMenuGroup group-name="Group 2" />
+      <VaMenuItem right-icon="home">
+        User 3
+      </VaMenuItem>
+      <template v-if="true">
+        <VaMenuItem>
+          With v-if 1
+        </VaMenuItem>
+        <VaMenuItem>
+          With v-if 2
+        </VaMenuItem>
+        <template v-if="true">
+          <VaMenuItem>
+            With v-if 2
+          </VaMenuItem>
+        </template>
+      </template>
+    </VaMenuList>
+  `,
+})
+
 export const HoverColor = () => ({
   components: { VaMenuList, VaMenuItem, VaMenuGroup },
   data: () => ({
@@ -97,7 +130,7 @@ export const HoverColor = () => ({
 })
 
 export const WithDivider = () => ({
-  components: { VaMenuList, VaMenuItem, VaMenuGroup, VaDivider, VaButton },
+  components: { VaMenuList, VaMenuItem, VaMenuGroup, VaDivider, VaButton, VaMenuFull },
   template: `
     <VaMenuList>
       <VaMenuItem>
@@ -106,13 +139,15 @@ export const WithDivider = () => ({
       <VaMenuItem>
         User 2
       </VaMenuItem>
-      <VaDivider />
+      <VaMenuFull>
+        <VaDivider />
+      </VaMenuFull>
       <VaMenuItem>
         User 3
       </VaMenuItem>
-      <div>
+      <VaMenuFull>
         Custom content
-      </div>
+      </VaMenuFull>
       <VaMenuItem>
         User 4
       </VaMenuItem>

diff --git a/packages/ui/src/components/va-menu-list/VaMenuList.vue b/packages/ui/src/components/va-menu-list/VaMenuList.vue
@@ -2,21 +2,15 @@
   <table class="va-menu-list" ref="container" v-bind="makeMenuContainerAttributes()">
     <tbody>
       <template v-if="$slots.default">
-        <template v-for="child in getUnSlottedVNodes($slots.default())">
-          <component v-if="getVNodeComponentName(child) === 'VaMenuItem'" :is="child" :key="getVNodeKey(child) + 'menuitem'" />
-          <component v-else-if="getVNodeComponentName(child) === 'VaDropdown'" :is="child" :key="getVNodeKey(child) + 'menu-dropdown'" />
-          <td colspan="999" v-else :key="getVNodeKey(child)" class="va-menu-list__virtual-td">
-            <component :is="child" />
-          </td>
+        <template v-for="child in getUnSlottedVNodes($slots.default())" :key="getVNodeKey(child)">
+          <component :is="child" />
         </template>
       </template>
       <slot v-else>
         <template v-for="(options, groupName) in optionGroups" :key="groupName">
           <slot v-if="groupName !== '_noGroup'"  name="group">
             <tr>
-              <td colspan="9999">
-                <VaMenuGroup :group-name="groupName" />
-              </td>
+              <VaMenuGroup :group-name="groupName" />
             </tr>
           </slot>
           <VaMenuItem
@@ -43,7 +37,7 @@
 <script lang="ts" setup>
 import VaMenuItem from './components/VaMenuItem.vue'
 import VaMenuGroup from './components/VaMenuGroup.vue'
-import { PropType, computed, VNode, ref, Fragment } from 'vue'
+import { PropType, computed, VNode, ref, Fragment, h } from 'vue'
 import { VaMenuOption } from './types'
 import { useSelectableList, useSelectableListProps } from '../../composables'
 import { useMenuKeyboardNavigation, makeMenuContainerAttributes } from './composables/useMenuKeyboardNavigation'
@@ -89,6 +83,7 @@ const getUnSlottedVNodes = (nodes: VNode[]) => {
 }
 
 const getVNodeComponentName = (node: VNode) => {
+  console.log(h(node))
   if (typeof node.type === 'object' && 'name' in node.type && typeof node.type.name === 'string') {
     return node.type.name
   }
@@ -127,14 +122,14 @@ const getVNodeKey = (node: VNode): string => {
   }
 
   // Without & at the start, style will be applied globally
-  & td:not(&__virtual-td) {
+  & td {
     padding-top: calc(var(--va-menu-padding-y) / 2);
     padding-bottom: calc(var(--va-menu-padding-y) / 2);
   }
 
   &__virtual-td:has(tr) {
     // Behaves like tbody, so column width are inherited for tr
-    display: table-row-group;
+    display: contents;
   }
 
   .va-divider {

diff --git a/packages/ui/src/components/va-menu-list/components/VaMenuFull.vue b/packages/ui/src/components/va-menu-list/components/VaMenuFull.vue
@@ -0,0 +1,5 @@
+<template>
+  <td colspan="100%">
+    <slot />
+  </td>
+</template>
diff --git a/packages/ui/src/components/va-menu-list/components/VaMenuGroup.vue b/packages/ui/src/components/va-menu-list/components/VaMenuGroup.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="va-menu-list__group-name-wrapper" colspan="99999">
+  <td class="va-menu-list__group-name-wrapper" colspan="99999">
     <span class="va-menu-list__group-name">
       {{ groupName }}
     </span>
-  </div>
+  </td>
   <slot />
 </template>
 

diff --git a/packages/ui/src/components/va-menu-list/index.ts b/packages/ui/src/components/va-menu-list/index.ts
@@ -2,6 +2,7 @@ import { withConfigTransport } from '../../services/config-transport'
 import _VaMenuList from './VaMenuList.vue'
 import _VaMenuItem from './components/VaMenuItem.vue'
 import _VaMenuGroup from './components/VaMenuGroup.vue'
+export { default as VaMenuFull } from './components/VaMenuFull.vue'
 
 export const VaMenuList = withConfigTransport(_VaMenuList)
 export const VaMenuItem = withConfigTransport(_VaMenuItem)