Feat#1417/add new menu component

packages/docs/modules/page-config/blocks/api/index.ts

@@ -3,6 +3,9 @@ import { definePageConfigBlock } from '../../types'
 import Component from './index.vue'
 import { VisualOptions, type ManualApiOptions, APIDescriptionOptions } from './types';
 import { parseComponent } from './component-parser'
+import type * as components from 'vuestic-ui/src/services/vue-plugin/components'
+import { ExtractComponentProps } from 'vuestic-ui/src/utils/component-options';
+import { VuesticComponent } from 'vuestic-ui/src/services/component-config';
 
 const setup = (
   componentName: string,
@@ -27,7 +30,20 @@ const setup = (
 }
 
 export default definePageConfigBlock({
-  setup: setup as unknown as (componentName: string, descriptionOptions: APIDescriptionOptions, manual?: ManualApiOptions, visualOptions?: VisualOptions) => ReturnType<typeof setup>,
+  setup: setup as unknown as <
+    ComponentName extends keyof typeof components,
+    Component extends typeof components[ComponentName] = typeof components[ComponentName]
+  >(
+    componentName: ComponentName,
+    descriptionOptions: {
+      props?: Partial<Record<keyof ExtractComponentProps<Component>, string>>,
+      events?: Partial<Record<keyof Component['emits'], string>>,
+      slots?: Record<string, string>,
+      methods?: Partial<Record<keyof Component['methods'], string>>,
+    },
+     manual?: ManualApiOptions,
+     visualOptions?: VisualOptions
+  ) => ReturnType<typeof setup>,
   component: Component,
 })
 

packages/docs/modules/page-config/runtime/index.ts

@@ -80,4 +80,4 @@ export type UnwrapPageConfigBlock<T extends Record<string, any>> = {
   _blockComponent: DefineComponent,
 } & T
 
-export const defineApiDescription = (options: APIDescriptionOptions) => options;
+export const defineApiDescription = <T extends APIDescriptionOptions>(options: T) => options;

packages/docs/page-config/navigationRoutes.ts

@@ -1,4 +1,3 @@
-import { navigationBadge } from './../utils/navigation/badge';
 import { navigationBadge, type NavigationBadge } from "../utils/navigation/badge";
 
 export type NavigationRoute = {
@@ -389,6 +388,20 @@ export const navigationRoutes: NavigationRoute[] = [
           badge : navigationBadge.updated('1.8.3'),
         }
       },
+      {
+        name: 'menu',
+        displayName: 'Menu',
+        meta: {
+          badge : navigationBadge.new('1.8.4'),
+        }
+      },
+      {
+        name: 'menu-list',
+        displayName: 'Menu List',
+        meta: {
+          badge : navigationBadge.new('1.8.4'),
+        }
+      },
       {
         category: "Utility",
         name: "value",

packages/docs/page-config/ui-elements/menu-list/examples/Default.vue

@@ -0,0 +1,10 @@
+<template>
+  <VaMenuList
+    :options="['Option 1', 'Option 2', 'Option 3']"
+    @selected="(v) => alert(v)"
+  />
+</template>
+
+<script setup>
+  const alert = (...args) => window.alert(...args)
+</script>

packages/docs/page-config/ui-elements/menu-list/examples/Group.vue

@@ -0,0 +1,18 @@
+<template>
+  <VaMenuList
+    :options="options"
+    @selected="(v) => alert(v)"
+  />
+</template>
+
+<script setup>
+  const alert = (...args) => window.alert(...args)
+
+  const options = [
+    { id: '0', text: 'one', value: 'one', group: '' },
+    { id: '1', text: 'two', value: 'two', group: 'Group 1' },
+    { id: '2', text: 'three', value: 'three', group: '' },
+    { id: '3', text: 'four', value: 'four', group: 'Group 2' },
+    { id: '4', text: 'five', value: 'five', group: 'Group 2' },
+  ]
+</script>

packages/docs/page-config/ui-elements/menu-list/examples/Icon.vue

@@ -0,0 +1,18 @@
+<template>
+  <VaMenuList
+    :options="options"
+    @selected="(v) => alert(v)"
+  />
+</template>
+
+<script setup>
+  const alert = (...args) => window.alert(...args)
+
+  const options = [
+    { id: '0', text: 'copy', value: 'one', icon: 'content_copy', rightIcon: '' },
+    { id: '1', text: 'paste', value: 'two', icon: 'content_paste', rightIcon: '' },
+    { id: '2', text: 'cut', value: 'three', icon: 'content_cut', rightIcon: '' },
+    { id: '3', text: 'share', value: 'four', icon: '', rightIcon: 'share' },
+    { id: '4', text: 'delete', value: 'five', icon: 'delete' },
+  ]
+</script>

packages/docs/page-config/ui-elements/menu-list/examples/MenuItem.vue

@@ -0,0 +1,17 @@
+<template>
+  <VaMenuList>
+    <VaMenuItem @selected="alert">
+      Option 1
+    </VaMenuItem>
+    <VaMenuItem @selected="alert">
+      Option 2
+    </VaMenuItem>
+    <VaMenuItem @selected="alert">
+      Option 2
+    </VaMenuItem>
+  </VaMenuList>
+</template>
+
+<script setup lang="ts">
+  const alert = (...args) => window.alert(...args)
+</script>

packages/docs/page-config/ui-elements/menu-list/examples/WithDivider.vue

@@ -0,0 +1,27 @@
+<template>
+  <VaMenuList>
+    <VaMenuItem @selected="alert">
+      Option 1
+    </VaMenuItem>
+    <VaMenuItem @selected="alert">
+      Option 2
+    </VaMenuItem>
+    <VaDivider />
+    <VaMenuItem @selected="alert">
+      Option 3
+    </VaMenuItem>
+    <VaMenuItem @selected="alert">
+      Option 4
+    </VaMenuItem>
+    <div>
+      Custom divider
+    </div>
+    <VaMenuItem @selected="alert">
+      Option 5
+    </VaMenuItem>
+  </VaMenuList>
+</template>
+
+<script setup lang="ts">
+  const alert = (...args) => window.alert(...args)
+</script>

packages/docs/page-config/ui-elements/menu-list/index.ts

@@ -0,0 +1,46 @@
+export default definePageConfig({
+  blocks: [
+    block.title("Menu List"),
+    block.paragraph("The `VaMenuList` component is used to display structured information in selectable list format."),
+
+
+    block.link("VaMenu", "/ui-elements/menu", { preText: "See " }),
+
+    block.subtitle("Examples"),
+
+    block.example("Default", {
+      title: "Basic usage",
+      description: "To show menu items you can use `options` prop or `VaMenuItem` component.",
+    }),
+    block.example("MenuItem"),
+
+    block.example("Icon", {
+      title: "Icon",
+      description: "You can use `icon `and `rightIcon` properties in options or `left-icon` and `right-icon` slots in `VaMenuItem` component.",
+    }),
+
+    block.example("Group", {
+      title: "Group",
+      description: "You can use `group` property in options or `VaMenuGroup` component.",
+    }),
+
+    block.example("WithDivider", {
+      title: "With divider",
+      description: "You can use `VaDivider` component in pair with `VaMenuItem` components.",
+    }),
+
+    block.api("VaMenuList", {
+      props: {
+        textBy: 'When `options` prop items are an objects, this key will be used as displayed text. Can be string (path to the key) or function of type: `(option) => option.text`',
+        valueBy: 'When `options` prop items are an objects, this key will be used in `selected` event. Can be string (path to the key) or function of type: `(option) => option.value`',
+        trackBy: 'When `options` prop items are an objects, this key will be used to track selected `options`. Can be string (path to the key) or function of type: `(option) => option.track`',
+        groupBy: 'When `options` prop items are an objects, this key will be used to check correct option group',
+        disabledBy: "Specify the key in the object to be used as item `disabled` prop. Can be string (path to the key) or function of type: `(option) => option.disabled`",
+        options: "Available options that the user can select from",
+      },
+      events: {
+        selected: 'Emitted when an option is selected. Returns the selected option value as first argument and the selected option as second argument',
+      }
+    }),
+  ],
+})

packages/docs/page-config/ui-elements/menu/examples/Context.vue

@@ -0,0 +1,20 @@
+<template>
+  <VaMenu
+    :options="['Option 1', 'Option 2', 'Option 3']"
+    preset="context"
+    @selected="(v) => alert(v)"
+  >
+    <template #anchor>
+      <va-image
+        class="h-[300px] w-[300px]"
+        src="https://picsum.photos/1500"
+      >
+        <va-badge text="Right click this image" />
+      </va-image>
+    </template>
+  </VaMenu>
+</template>
+
+<script setup>
+  const alert = (...args) => window.alert(...args)
+</script>

packages/docs/page-config/ui-elements/menu/examples/Default.vue

@@ -0,0 +1,14 @@
+<template>
+  <VaMenu
+    :options="['Option 1', 'Option 2', 'Option 3']"
+    @selected="(v) => alert(v)"
+  >
+    <template #anchor>
+      <VaButton>Open menu</VaButton>
+    </template>
+  </VaMenu>
+</template>
+
+<script setup>
+  const alert = (...args) => window.alert(...args)
+</script>

packages/docs/page-config/ui-elements/menu/examples/Group.vue

@@ -0,0 +1,22 @@
+<template>
+  <VaMenu
+    :options="options"
+    @selected="(v) => alert(v)"
+  >
+    <template #anchor>
+      <VaButton>Open menu</VaButton>
+    </template>
+  </VaMenu>
+</template>
+
+<script setup>
+  const alert = (...args) => window.alert(...args)
+
+  const options = [
+    { id: '0', text: 'one', value: 'one', group: '' },
+    { id: '1', text: 'two', value: 'two', group: 'Group 1' },
+    { id: '2', text: 'three', value: 'three', group: '' },
+    { id: '3', text: 'four', value: 'four', group: 'Group 2' },
+    { id: '4', text: 'five', value: 'five', group: 'Group 2' },
+  ]
+</script>

packages/docs/page-config/ui-elements/menu/examples/Icon.vue

@@ -0,0 +1,22 @@
+<template>
+  <VaMenu
+    :options="options"
+    @selected="(v) => alert(v)"
+  >
+    <template #anchor>
+      <VaButton>Open menu</VaButton>
+    </template>
+  </VaMenu>
+</template>
+
+<script setup>
+  const alert = (...args) => window.alert(...args)
+
+  const options = [
+    { text: 'copy', value: 'one', icon: 'content_copy' },
+    { text: 'paste', value: 'two', icon: 'content_paste' },
+    { text: 'cut', value: 'three', icon: 'content_cut' },
+    { text: 'share', value: 'four', rightIcon: 'share' },
+    { text: 'delete', value: 'five', icon: 'delete' },
+  ]
+</script>

packages/docs/page-config/ui-elements/menu/examples/MenuItem.vue

@@ -0,0 +1,21 @@
+<template>
+  <VaMenu>
+    <template #anchor>
+      <VaButton>Open menu</VaButton>
+    </template>
+
+    <VaMenuItem @selected="alert">
+      Option 1
+    </VaMenuItem>
+    <VaMenuItem @selected="alert">
+      Option 2
+    </VaMenuItem>
+    <VaMenuItem @selected="alert">
+      Option 2
+    </VaMenuItem>
+  </VaMenu>
+</template>
+
+<script setup lang="ts">
+  const alert = (...args) => window.alert(...args)
+</script>

packages/docs/page-config/ui-elements/menu/examples/UseMenu.vue

@@ -0,0 +1,27 @@
+<template>
+  <ul>
+    <li
+      v-for="user in 4"
+      :key="user"
+      @click.right="$event => show({
+        event: $event,
+        options: [
+          { text: 'Rename', icon: 'edit' },
+          { text: 'Share', icon: 'share' },
+          { text: 'Delete', icon: 'delete' },
+        ],
+        onSelected(option) {
+          console.log(option, user)
+        },
+      })"
+    >
+      User {{ user }}
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+  import { useMenu } from 'vuestic-ui';
+
+  const { show } = useMenu()
+</script>

packages/docs/page-config/ui-elements/menu/examples/WithDivider.vue

@@ -0,0 +1,31 @@
+<template>
+  <VaMenu>
+    <template #anchor>
+      <VaButton>Open menu</VaButton>
+    </template>
+
+    <VaMenuItem @selected="alert">
+      Option 1
+    </VaMenuItem>
+    <VaMenuItem @selected="alert">
+      Option 2
+    </VaMenuItem>
+    <VaDivider />
+    <VaMenuItem @selected="alert">
+      Option 3
+    </VaMenuItem>
+    <VaMenuItem @selected="alert">
+      Option 4
+    </VaMenuItem>
+    <div>
+      Custom divider
+    </div>
+    <VaMenuItem @selected="alert">
+      Option 5
+    </VaMenuItem>
+  </VaMenu>
+</template>
+
+<script setup lang="ts">
+  const alert = (...args) => window.alert(...args)
+</script>