update readme and componentstory to use new menu components

vatesfr · Jan 10, 2025 · 5dba45f · 5dba45f
1 parent b112a72
commit 5dba45f
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 31 deletions.
diff --git a/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue b/@xen-orchestra/lite/src/components/component-story/ComponentStory.vue
@@ -7,23 +7,23 @@
         v-if="unreadEventsCount > 0"
         :value="unreadEventsCount"
         accent="success"
-        variant="primary"
         size="small"
+        variant="primary"
       />
     </TabItem>
     <TabItem v-bind="tab(TAB.SLOTS, slotParams)">Slots</TabItem>
     <TabItem v-bind="tab(TAB.SETTINGS, settingParams)">Settings</TabItem>
-    <MenuList placement="bottom" border>
-      <template #trigger="{ open, isOpen }">
-        <TabItem :active="isOpen" :disabled="presets === undefined" class="preset-tab" @click="open">
-          <UiIcon :icon="faSliders" />
-          Presets
-        </TabItem>
-      </template>
-      <MenuItem v-for="(preset, label) in presets" :key="label" @click="applyPreset(preset)">
-        {{ label }}
-      </MenuItem>
-    </MenuList>
+    <TabItem class="preset-tab" v-bind="presetMenu.$trigger">
+      <UiIcon :icon="faSliders" />
+      Presets
+    </TabItem>
+    <Teleport to="body">
+      <VtsMenuList border v-bind="presetMenu.$target">
+        <VtsMenuItem v-for="(preset, label) in presets" :key="label" v-bind="presetMenu[label]">
+          {{ label }}
+        </VtsMenuItem>
+      </VtsMenuList>
+    </Teleport>
   </TabList>
 
   <div :class="{ 'full-width': fullWidthComponent }" class="tabs">
@@ -43,8 +43,8 @@
           <template #right>
             <UiButton
               v-if="eventsLog.length > 0"
-              size="medium"
               accent="info"
+              size="medium"
               variant="tertiary"
               @click="eventsLog = []"
             >
@@ -91,12 +91,13 @@ import {
   ModelParam,
   type Param,
 } from '@/libs/story/story-param'
-import MenuItem from '@core/components/menu/MenuItem.vue'
-import MenuList from '@core/components/menu/MenuList.vue'
+import VtsMenuItem from '@core/components/menu/VtsMenuItem.vue'
+import VtsMenuList from '@core/components/menu/VtsMenuList.vue'
 import TabItem from '@core/components/tab/TabItem.vue'
 import TabList from '@core/components/tab/TabList.vue'
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiCounter from '@core/components/ui/counter/UiCounter.vue'
+import { action, useMenuToggle } from '@core/packages/menu'
 import { faSliders } from '@fortawesome/free-solid-svg-icons'
 import 'highlight.js/styles/github-dark.css'
 import { uniqueId, upperFirst } from 'lodash-es'
@@ -266,6 +267,17 @@ const applyPreset = (preset: { props?: Record<string, any>; settings?: Record<st
     })
   }
 }
+
+const presetMenu = useMenuToggle({
+  placement: 'bottom-end',
+  items: computed(() =>
+    Object.fromEntries(
+      Object.entries(props.presets ?? {}).map(([label, preset]) => {
+        return [label, action(() => applyPreset(preset))]
+      })
+    )
+  ),
+})
 </script>
 
 <style lang="postcss" scoped>

diff --git a/@xen-orchestra/web-core/lib/packages/menu/README.md b/@xen-orchestra/web-core/lib/packages/menu/README.md
@@ -6,18 +6,18 @@ A menu system for Vue applications supporting props binding for actions, links,
 
 ```vue
 <template>
-  <MenuList>
-    <li><MenuTrigger v-bind="menu.save">Save</MenuTrigger></li>
-    <li><MenuTrigger v-bind="menu.doc">Documentation</MenuTrigger></li>
-    <li><MenuTrigger v-bind="menu.profile">Profile</MenuTrigger></li>
+  <VtsMenuList>
+    <VtsMenuItem v-bind="menu.save">Save</VtsMenuItem>
+    <VtsMenuItem v-bind="menu.doc">Documentation</VtsMenuItem>
+    <VtsMenuItem v-bind="menu.profile">Profile</VtsMenuItem>
     <li>
-      <MenuTrigger v-bind="menu.more.$trigger">More...</MenuTrigger>
-      <MenuList v-bind="menu.more.$target">
-        <MenuTrigger v-bind="menu.more.settings">Settings</MenuTrigger>
-        <MenuTrigger v-bind="menu.more.logout">Logout</MenuTrigger>
-      </MenuList>
+      <VtsMenuTrigger v-bind="menu.more.$trigger">More...</VtsMenuTrigger>
+      <VtsMenuList v-bind="menu.more.$target">
+        <VtsMenuItem v-bind="menu.more.settings">Settings</VtsMenuItem>
+        <VtsMenuItem v-bind="menu.more.logout">Logout</VtsMenuItem>
+      </VtsMenuList>
     </li>
-  </MenuList>
+  </VtsMenuList>
 </template>
 
 <script lang="ts" setup>
@@ -35,6 +35,8 @@ const menu = useMenu({
 </script>
 ```
 
+> [!NOTE] > `VtsMenuItem` is a `VtsMenuTrigger` wrapped in a `<li>`
+
 ## Core Composables
 
 ### useMenu
@@ -166,15 +168,15 @@ type Props = {
 
 ```vue
 <template>
-  <MenuTrigger v-bind="menu.save">Save</MenuTrigger>
-  <MenuTrigger v-bind="menu.docs">Documentation</MenuTrigger>
-  <MenuTrigger v-bind="menu.profile">Profile</MenuTrigger>
+  <VtsMenuTrigger v-bind="menu.save">Save</VtsMenuTrigger>
+  <VtsMenuTrigger v-bind="menu.docs">Documentation</VtsMenuTrigger>
+  <VtsMenuTrigger v-bind="menu.profile">Profile</VtsMenuTrigger>
 
   <!-- Toggle/Dropdown menu -->
-  <MenuTrigger v-bind="menu.more.$trigger">More</MenuTrigger>
+  <VtsMenuTrigger v-bind="menu.more.$trigger">More</VtsMenuTrigger>
   <div v-bind="menu.more.$target">
-    <MenuTrigger v-bind="menu.more.settings">Settings</MenuTrigger>
-    <MenuTrigger v-bind="menu.more.logout">Logout</MenuTrigger>
+    <VtsMenuTrigger v-bind="menu.more.settings">Settings</VtsMenuTrigger>
+    <VtsMenuTrigger v-bind="menu.more.logout">Logout</VtsMenuTrigger>
   </div>
 </template>
 ```