feat: add Dropdown Menu component

src/components/dropdowns/Dropdown01.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Button from '@/components/ui/Button.vue'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger
+} from '@/components/ui/DropdownMenu'
+import { ChevronDown } from 'lucide-vue-next'
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger>
+      <Button variant="outline">
+        Options
+        <ChevronDown />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="start">
+      <DropdownMenuLabel>My Account</DropdownMenuLabel>
+      <DropdownMenuItem>
+        Profile
+        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+      </DropdownMenuItem>
+      <DropdownMenuItem>
+        Settings
+        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>Log out</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

src/components/dropdowns/Dropdown02.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import Button from '@/components/ui/Button.vue'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/DropdownMenu'
+import { CreditCard, LogOut, Settings, User } from 'lucide-vue-next'
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger>
+      <Button variant="outline" size="icon" aria-label="Open menu">
+        <User />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end">
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          <User />
+          Profile
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <CreditCard />
+          Billing
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <Settings />
+          Settings
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>
+        <LogOut />
+        Log out
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

src/components/ui/DropdownMenu/DropdownMenu.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui'
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui'
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>

src/components/ui/DropdownMenu/DropdownMenuContent.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  type DropdownMenuContentProps,
+  useForwardProps
+} from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  { sideOffset: 4 }
+)
+
+const delegatedProps: DropdownMenuContentProps = reactiveOmit(props, 'class')
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'relative z-50 min-w-40 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_rgba(0,0,0,0.04)] dark:before:shadow-[0_-1px_rgba(255,255,255,0.06)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class
+        )
+      "
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

src/components/ui/DropdownMenu/DropdownMenuGroup.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui'
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>

src/components/ui/DropdownMenu/DropdownMenuItem.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps: DropdownMenuItemProps = reactiveOmit(props, 'class')
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="forwarded"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-64 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 [&_svg:not([class*=opacity-])]:opacity-80',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

src/components/ui/DropdownMenu/DropdownMenuLabel.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { DropdownMenuLabel, type DropdownMenuLabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps: DropdownMenuLabelProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="delegatedProps"
+    :class="cn('px-2 py-1.5 text-xs font-medium text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>

src/components/ui/DropdownMenu/DropdownMenuSeparator.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps: DropdownMenuSeparatorProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <DropdownMenuSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 my-1 h-px bg-border', props.class)"
+  />
+</template>

src/components/ui/DropdownMenu/DropdownMenuShortcut.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>

src/components/ui/DropdownMenu/DropdownMenuTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps } from 'reka-ui'
+
+const props = withDefaults(defineProps<DropdownMenuTriggerProps>(), { asChild: true })
+</script>
+
+<template>
+  <DropdownMenuTrigger v-bind="props">
+    <slot />
+  </DropdownMenuTrigger>
+</template>

src/components/ui/DropdownMenu/index.ts

@@ -0,0 +1,8 @@
+export { default as DropdownMenu } from './DropdownMenu.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'

src/router/index.ts

@@ -98,6 +98,12 @@ const router = createRouter({
       name: 'pagination',
       component: () => import('@/views/Pagination.vue'),
       meta: { title: 'coss-ui-vue/pagination' }
+    },
+    {
+      path: '/dropdowns',
+      name: 'dropdowns',
+      component: () => import('@/views/Dropdowns.vue'),
+      meta: { title: 'coss-ui-vue/dropdowns' }
     }
   ]
 })

src/views/Dropdowns.vue

@@ -0,0 +1,39 @@
+<template>
+  <main>
+    <div class="px-4 sm:px-6">
+      <div class="mx-auto w-full max-w-6xl">
+        <PageHeader
+          title="Dropdown Menu Components - COSS UI"
+          heading="Dropdown Menu"
+          description="A growing collection of dropdown menu components built with Vue and TailwindCSS."
+        >
+          A growing collection of {{ totalComponents }} dropdown menu components built with
+          <span class="text-vue">Vue</span> and TailwindCSS.
+        </PageHeader>
+
+        <div
+          class="-m-px grid grid-cols-12 *:px-1 *:py-12 *:not-first:-ms-px *:not-first:-mt-px sm:*:px-8 xl:*:px-12 overflow-hidden *:before:absolute *:before:bg-border/70 *:before:[block-size:100vh] *:before:[inline-size:1px] *:before:[inset-block-start:0] *:before:[inset-inline-start:-1px] *:after:absolute *:after:bg-border/70 *:after:[block-size:1px] *:after:[inline-size:100vw] *:after:[inset-block-start:-1px] *:after:[inset-inline-start:0]"
+        >
+          <DemoComponent
+            v-for="component in dropdownFiles"
+            :key="component"
+            class="group/item relative col-span-12 flex items-center justify-center sm:col-span-6"
+            :directory="dropdownDirectory"
+            :componentName="component"
+          />
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import DemoComponent from '@/demo/DemoComponent.vue'
+import PageHeader from '@/demo/PageHeader.vue'
+import { computed, ref } from 'vue'
+
+const dropdownFiles = ref(['Dropdown01', 'Dropdown02'])
+const dropdownDirectory = 'dropdowns'
+
+const totalComponents = computed(() => dropdownFiles.value.length)
+</script>

src/views/Home.vue

@@ -80,7 +80,7 @@ const availableComponents = [
   { name: 'Breadcrumb', path: '/breadcrumbs' },
   { name: 'Progress', path: '/progress' },
   { name: 'Pagination', path: '/pagination' },
-  { name: 'Dropdown and Popover', path: '#' }
+  { name: 'Dropdown Menu', path: '/dropdowns' }
 ]
 
 useHead({