@gxp-dev/mod-ui 2.0.0

package/src/components/ui/dropdown-menu/DropdownMenu.test.ts

@@ -0,0 +1,390 @@
+import { describe, it, expect } from "vitest"
+import { mount } from "@vue/test-utils"
+import { defineComponent, h, nextTick, ref } from "vue"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "."
+
+function mountDropdownMenu(props: Record<string, unknown> = {}) {
+  return mount(DropdownMenu, {
+    props: { defaultOpen: true, ...props },
+    slots: {
+      default: () => [
+        h(DropdownMenuTrigger, { asChild: true }, {
+          default: () => h("button", "Open Menu"),
+        }),
+        h(DropdownMenuContent, null, {
+          default: () => [
+            h(DropdownMenuLabel, null, { default: () => "My Account" }),
+            h(DropdownMenuSeparator),
+            h(DropdownMenuItem, null, { default: () => "Profile" }),
+            h(DropdownMenuItem, null, { default: () => "Settings" }),
+            h(DropdownMenuSeparator),
+            h(DropdownMenuItem, null, { default: () => "Logout" }),
+          ],
+        }),
+      ],
+    },
+    attachTo: document.body,
+  })
+}
+
+describe("DropdownMenu", () => {
+  describe("rendering", () => {
+    it("renders without errors", () => {
+      const wrapper = mount(DropdownMenu, { slots: { default: "content" } })
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it("renders trigger inside DropdownMenu context", () => {
+      const wrapper = mount(DropdownMenu, {
+        slots: {
+          default: () =>
+            h(DropdownMenuTrigger, { asChild: true }, {
+              default: () => h("button", { class: "trigger-btn" }, "Open"),
+            }),
+        },
+      })
+      expect(wrapper.find(".trigger-btn").exists()).toBe(true)
+      expect(wrapper.find(".trigger-btn").text()).toBe("Open")
+    })
+  })
+
+  describe("DropdownMenuShortcut", () => {
+    it("renders with correct classes", () => {
+      const wrapper = mount(DropdownMenuShortcut, {
+        slots: { default: "Ctrl+K" },
+      })
+      expect(wrapper.text()).toBe("Ctrl+K")
+      expect(wrapper.classes()).toContain("ml-auto")
+      expect(wrapper.classes()).toContain("text-xs")
+      expect(wrapper.classes()).toContain("tracking-widest")
+      expect(wrapper.classes()).toContain("opacity-60")
+    })
+
+    it("renders as a span element", () => {
+      const wrapper = mount(DropdownMenuShortcut, {
+        slots: { default: "Ctrl+K" },
+      })
+      expect(wrapper.element.tagName).toBe("SPAN")
+    })
+
+    it("merges custom class", () => {
+      const wrapper = mount(DropdownMenuShortcut, {
+        props: { class: "custom-shortcut" },
+        slots: { default: "Ctrl+K" },
+      })
+      expect(wrapper.classes()).toContain("custom-shortcut")
+      expect(wrapper.classes()).toContain("ml-auto")
+    })
+  })
+
+  describe("DropdownMenu with open content", () => {
+    it("renders items in portal when open", async () => {
+      mountDropdownMenu()
+      await nextTick()
+      const items = document.body.querySelectorAll("[role=\"menuitem\"]")
+      expect(items.length).toBe(3)
+      expect(items[0]?.textContent).toContain("Profile")
+      expect(items[1]?.textContent).toContain("Settings")
+      expect(items[2]?.textContent).toContain("Logout")
+    })
+
+    it("renders DropdownMenuContent with correct base classes", async () => {
+      mountDropdownMenu()
+      await nextTick()
+      const content = document.body.querySelector("[role=\"menu\"]")
+      expect(content).toBeTruthy()
+      expect(content?.className).toContain("z-50")
+      expect(content?.className).toContain("min-w-32")
+      expect(content?.className).toContain("overflow-hidden")
+      expect(content?.className).toContain("rounded-md")
+      expect(content?.className).toContain("border")
+      expect(content?.className).toContain("bg-popover")
+      expect(content?.className).toContain("p-1")
+      expect(content?.className).toContain("text-popover-foreground")
+      expect(content?.className).toContain("shadow-md")
+    })
+
+    it("renders DropdownMenuItem with correct base classes", async () => {
+      mountDropdownMenu()
+      await nextTick()
+      const item = document.body.querySelector("[role=\"menuitem\"]")
+      expect(item).toBeTruthy()
+      expect(item?.className).toContain("relative")
+      expect(item?.className).toContain("flex")
+      expect(item?.className).toContain("cursor-default")
+      expect(item?.className).toContain("select-none")
+      expect(item?.className).toContain("items-center")
+      expect(item?.className).toContain("rounded-sm")
+      expect(item?.className).toContain("px-2")
+      expect(item?.className).toContain("py-1.5")
+      expect(item?.className).toContain("text-sm")
+      expect(item?.className).toContain("outline-none")
+      expect(item?.className).toContain("transition-colors")
+    })
+
+    it("renders DropdownMenuLabel with correct classes", async () => {
+      mountDropdownMenu()
+      await nextTick()
+      expect(document.body.textContent).toContain("My Account")
+      const allElements = document.body.querySelectorAll("*")
+      let labelEl: Element | null = null
+      allElements.forEach((el) => {
+        if (el.textContent === "My Account" && el.children.length === 0) {
+          labelEl = el
+        }
+      })
+      expect(labelEl).toBeTruthy()
+      const matched = labelEl as Element | null
+      expect(matched?.className).toContain("px-2")
+      expect(matched?.className).toContain("py-1.5")
+      expect(matched?.className).toContain("text-sm")
+      expect(matched?.className).toContain("font-semibold")
+    })
+
+    it("renders DropdownMenuSeparator with correct classes", async () => {
+      mountDropdownMenu()
+      await nextTick()
+      const separators = document.body.querySelectorAll("[role=\"separator\"]")
+      expect(separators.length).toBeGreaterThanOrEqual(2)
+      const separator = separators[0]
+      expect(separator?.className).toContain("-mx-1")
+      expect(separator?.className).toContain("my-1")
+      expect(separator?.className).toContain("h-px")
+      expect(separator?.className).toContain("bg-muted")
+    })
+
+    it("merges custom class on DropdownMenuContent", async () => {
+      mount(DropdownMenu, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () => [
+            h(DropdownMenuTrigger, { asChild: true }, {
+              default: () => h("button", "T"),
+            }),
+            h(DropdownMenuContent, { class: "my-menu" }, {
+              default: () => h(DropdownMenuItem, null, { default: () => "Item" }),
+            }),
+          ],
+        },
+        attachTo: document.body,
+      })
+      await nextTick()
+      const content = document.body.querySelector("[role=\"menu\"]")
+      expect(content?.className).toContain("my-menu")
+    })
+  })
+
+  describe("item click closes menu", () => {
+    it("closes menu when item is clicked (v-model open syncs)", async () => {
+      const Harness = defineComponent({
+        components: {
+          DropdownMenu,
+          DropdownMenuTrigger,
+          DropdownMenuContent,
+          DropdownMenuItem,
+        },
+        setup() {
+          const open = ref(true)
+          return { open }
+        },
+        template: `
+          <DropdownMenu v-model:open="open">
+            <DropdownMenuTrigger as-child><button>T</button></DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem class="click-item">Click me</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <span class="state">{{ open ? 'OPEN' : 'CLOSED' }}</span>
+        `,
+      })
+      const wrapper = mount(Harness, { attachTo: document.body })
+      await nextTick()
+      const item = document.body.querySelector(".click-item") as HTMLElement | null
+      expect(item).toBeTruthy()
+      item?.click()
+      await nextTick()
+      await nextTick()
+      expect(wrapper.find(".state").text()).toBe("CLOSED")
+    })
+  })
+
+  describe("checkbox item", () => {
+    it("renders DropdownMenuCheckboxItem with checked state", async () => {
+      mount(DropdownMenu, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () => [
+            h(DropdownMenuTrigger, { asChild: true }, {
+              default: () => h("button", "T"),
+            }),
+            h(DropdownMenuContent, null, {
+              default: () =>
+                h(DropdownMenuCheckboxItem, { modelValue: true }, {
+                  default: () => "Checked item",
+                }),
+            }),
+          ],
+        },
+        attachTo: document.body,
+      })
+      await nextTick()
+      const cbItem = document.body.querySelector("[role=\"menuitemcheckbox\"]")
+      expect(cbItem).toBeTruthy()
+      expect(cbItem?.getAttribute("aria-checked")).toBe("true")
+    })
+
+    it("emits update:modelValue when checkbox item toggled", async () => {
+      const Harness = defineComponent({
+        components: {
+          DropdownMenu,
+          DropdownMenuTrigger,
+          DropdownMenuContent,
+          DropdownMenuCheckboxItem,
+        },
+        setup() {
+          const open = ref(true)
+          const checked = ref(false)
+          return { open, checked }
+        },
+        template: `
+          <DropdownMenu v-model:open="open">
+            <DropdownMenuTrigger as-child><button>T</button></DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuCheckboxItem v-model="checked" class="cb">
+                Notifications
+              </DropdownMenuCheckboxItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <span class="state">{{ checked ? 'ON' : 'OFF' }}</span>
+        `,
+      })
+      const wrapper = mount(Harness, { attachTo: document.body })
+      await nextTick()
+      expect(wrapper.find(".state").text()).toBe("OFF")
+      const cb = document.body.querySelector(".cb") as HTMLElement | null
+      cb?.click()
+      await nextTick()
+      await nextTick()
+      expect(wrapper.find(".state").text()).toBe("ON")
+    })
+  })
+
+  describe("radio items", () => {
+    it("renders radio group with selected value", async () => {
+      mount(DropdownMenu, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () => [
+            h(DropdownMenuTrigger, { asChild: true }, {
+              default: () => h("button", "T"),
+            }),
+            h(DropdownMenuContent, null, {
+              default: () =>
+                h(DropdownMenuRadioGroup, { modelValue: "b" }, {
+                  default: () => [
+                    h(DropdownMenuRadioItem, { value: "a" }, { default: () => "A" }),
+                    h(DropdownMenuRadioItem, { value: "b" }, { default: () => "B" }),
+                  ],
+                }),
+            }),
+          ],
+        },
+        attachTo: document.body,
+      })
+      await nextTick()
+      const items = document.body.querySelectorAll("[role=\"menuitemradio\"]")
+      expect(items.length).toBe(2)
+      const checked = Array.from(items).find(
+        el => el.getAttribute("aria-checked") === "true",
+      )
+      expect(checked?.textContent).toContain("B")
+    })
+  })
+
+  describe("sub-menu", () => {
+    it("opens sub-menu and renders sub-content", async () => {
+      mount(DropdownMenu, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () => [
+            h(DropdownMenuTrigger, { asChild: true }, {
+              default: () => h("button", "T"),
+            }),
+            h(DropdownMenuContent, null, {
+              default: () =>
+                h(DropdownMenuSub, { defaultOpen: true }, {
+                  default: () => [
+                    h(DropdownMenuSubTrigger, null, {
+                      default: () => "More tools",
+                    }),
+                    h(DropdownMenuSubContent, null, {
+                      default: () =>
+                        h(DropdownMenuItem, null, {
+                          default: () => "Save page",
+                        }),
+                    }),
+                  ],
+                }),
+            }),
+          ],
+        },
+        attachTo: document.body,
+      })
+      await nextTick()
+      expect(document.body.textContent).toContain("More tools")
+      expect(document.body.textContent).toContain("Save page")
+    })
+  })
+
+  describe("DropdownMenuGroup", () => {
+    it("renders group element in open menu", async () => {
+      mount(DropdownMenu, {
+        props: { defaultOpen: true },
+        slots: {
+          default: () => [
+            h(DropdownMenuTrigger, { asChild: true }, {
+              default: () => h("button", "T"),
+            }),
+            h(DropdownMenuContent, null, {
+              default: () =>
+                h(DropdownMenuGroup, null, {
+                  default: () => [
+                    h(DropdownMenuItem, null, { default: () => "A" }),
+                    h(DropdownMenuItem, null, { default: () => "B" }),
+                  ],
+                }),
+            }),
+          ],
+        },
+        attachTo: document.body,
+      })
+      await nextTick()
+      const group = document.body.querySelector("[role=\"group\"]")
+      expect(group).toBeTruthy()
+      expect(group?.textContent).toContain("A")
+      expect(group?.textContent).toContain("B")
+    })
+  })
+
+  describe("exports", () => {
+    it("exports DropdownMenuPortal", () => {
+      expect(DropdownMenuPortal).toBeTruthy()
+    })
+  })
+})

package/src/components/ui/dropdown-menu/DropdownMenu.vue

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

package/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuCheckboxItemEmits,
+  DropdownMenuCheckboxItemProps,
+} from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+export interface DropdownMenuCheckboxItemComponentProps
+  extends DropdownMenuCheckboxItemProps {
+  class?: HTMLAttributes["class"]
+}
+
+const props = defineProps<DropdownMenuCheckboxItemComponentProps>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="forwarded"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Check class="h-4 w-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DropdownMenuContent, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+import DropdownMenuPortal from "./DropdownMenuPortal.vue"
+
+export interface DropdownMenuContentComponentProps extends DropdownMenuContentProps {
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<DropdownMenuContentComponentProps>(), {
+  sideOffset: 4,
+})
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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>

package/src/components/ui/dropdown-menu/DropdownMenuGroup.vue

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

package/src/components/ui/dropdown-menu/DropdownMenuItem.vue

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

package/src/components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DropdownMenuLabel, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+export interface DropdownMenuLabelComponentProps extends DropdownMenuLabelProps {
+  class?: HTMLAttributes["class"]
+  inset?: boolean
+}
+
+const props = defineProps<DropdownMenuLabelComponentProps>()
+
+const delegatedProps = reactiveOmit(props, "class", "inset")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuPortal.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { DropdownMenuPortalProps } from "reka-ui"
+import { DropdownMenuPortal } from "reka-ui"
+
+export type DropdownMenuPortalComponentProps = DropdownMenuPortalProps
+
+const props = defineProps<DropdownMenuPortalComponentProps>()
+</script>
+
+<template>
+  <DropdownMenuPortal v-bind="props">
+    <slot />
+  </DropdownMenuPortal>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuRadioGroupEmits,
+  DropdownMenuRadioGroupProps,
+} from "reka-ui"
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from "reka-ui"
+
+export type DropdownMenuRadioGroupComponentProps = DropdownMenuRadioGroupProps
+
+const props = defineProps<DropdownMenuRadioGroupComponentProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuRadioItemEmits,
+  DropdownMenuRadioItemProps,
+} from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Circle } from "lucide-vue-next"
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+export interface DropdownMenuRadioItemComponentProps
+  extends DropdownMenuRadioItemProps {
+  class?: HTMLAttributes["class"]
+}
+
+const props = defineProps<DropdownMenuRadioItemComponentProps>()
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    v-bind="forwarded"
+    :class="
+      cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue

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