@melt-js/comps-vben 0.0.0-stage → 2026.11.8-2

package/src/shadcn-ui/ui/dialog/DialogOverlay.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+
+import { useScrollLock } from '@melt-js/libs-vben/composables';
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+const props = withDefaults(
+  defineProps<{
+    class?: any;
+    overlayBlur?: number;
+    position?: 'absolute' | 'fixed';
+    zIndex?: number;
+  }>(),
+  {
+    position: 'fixed',
+  },
+);
+
+useScrollLock();
+const dismissableModalId = inject('DISMISSABLE_MODAL_ID', undefined);
+</script>
+
+<template>
+  <div
+    :data-dismissable-modal="dismissableModalId"
+    :style="{
+      ...(zIndex ? { zIndex } : {}),
+      position,
+      backdropFilter:
+        overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
+    }"
+    :class="cn('z-popup bg-overlay inset-0 fixed', props.class)"
+  ></div>
+</template>

package/src/shadcn-ui/ui/dialog/DialogScrollContent.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { X } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import {
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<DialogContentProps & { class?: any; zIndex?: number }>(),
+  { zIndex: 1000 },
+);
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      :style="{ zIndex }"
+      class="fixed inset-0 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="{ ...$attrs, ...forwarded }"
+        @pointer-down-outside="
+          (event) => {
+            const originalEvent = event.detail.originalEvent;
+            const target = originalEvent.target as HTMLElement;
+            if (
+              originalEvent.offsetX > target.clientWidth ||
+              originalEvent.offsetY > target.clientHeight
+            ) {
+              event.preventDefault();
+            }
+          }
+        "
+      >
+        <slot></slot>
+
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="size-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>

package/src/shadcn-ui/ui/dialog/DialogTitle.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { DialogTitle, useForwardProps } from 'reka-ui';
+
+const props = defineProps<
+  DialogTitleProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="forwardedProps"
+    :class="cn('text-lg leading-none font-semibold', props.class)"
+  >
+    <slot></slot>
+  </DialogTitle>
+</template>

package/src/shadcn-ui/ui/dialog/DialogTrigger.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui';
+
+import { DialogTrigger } from 'reka-ui';
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+  <DialogTrigger data-slot="dialog-trigger" v-bind="props">
+    <slot></slot>
+  </DialogTrigger>
+</template>

package/src/shadcn-ui/ui/dialog/index.ts

@@ -0,0 +1,10 @@
+export { default as Dialog } from './Dialog.vue';
+export { default as DialogClose } from './DialogClose.vue';
+export { default as DialogContent } from './DialogContent.vue';
+export { default as DialogDescription } from './DialogDescription.vue';
+export { default as DialogFooter } from './DialogFooter.vue';
+export { default as DialogHeader } from './DialogHeader.vue';
+export { default as DialogOverlay } from './DialogOverlay.vue';
+export { default as DialogScrollContent } from './DialogScrollContent.vue';
+export { default as DialogTitle } from './DialogTitle.vue';
+export { default as DialogTrigger } from './DialogTrigger.vue';

package/src/shadcn-ui/ui/dialog/use-dialog-state-events.ts

@@ -0,0 +1,84 @@
+import type { Ref } from 'vue';
+
+import { onScopeDispose, watch } from 'vue';
+
+/**
+ * 弹窗的 `closed`/`opened` 事件由内容元素自身的退出动画（`animationend`）确认。
+ * 当动画被跳过或取消（reduced motion、动画被中断、关闭过程中 class 变化）时，
+ * 事件永远不会触发——弹窗会一直保持可见，`hidden` class 不会被应用，
+ * destroy-on-close 重挂载和 `onClosed` 监听器会一直挂起。这里对齐 reka-ui
+ * Presence 的行为（`animationcancel` 视为结束），并在动画窗口结束后增加兜底
+ * 触发，保证关闭链路始终恰好完成一次。
+ */
+
+/** 本仓库弹窗的退出动画时长为 150ms；300ms 可以安全覆盖。 */
+const CLOSED_EVENT_FALLBACK_MS = 300;
+
+export function useDialogStateEvents(options: {
+  contentRef: Ref<null | { $el: Element | null }>;
+  isOpen: () => boolean;
+  onClosed: () => void;
+  onOpened: () => void;
+}) {
+  const { contentRef, isOpen, onClosed, onOpened } = options;
+
+  let closeFallbackTimer: null | ReturnType<typeof setTimeout> = null;
+  let closeAcknowledged = false;
+
+  function emitOpenStateChange() {
+    if (closeFallbackTimer !== null) {
+      clearTimeout(closeFallbackTimer);
+      closeFallbackTimer = null;
+    }
+    if (isOpen()) {
+      onOpened();
+      return;
+    }
+    // 关闭已由动画事件或兜底确认——同一关闭周期内 `closed` 只触发一次。
+    if (closeAcknowledged) {
+      return;
+    }
+    closeAcknowledged = true;
+    onClosed();
+  }
+
+  /**
+   * 同时监听内容元素的 `animationend` 和 `animationcancel` ——被取消的动画
+   * 同样视为结束（reka-ui 的 Presence 也是这么处理的），关闭链路不会一直等待。
+   */
+  function handleAnimationEvent(event: AnimationEvent) {
+    if (event.target === contentRef.value?.$el) {
+      emitOpenStateChange();
+    }
+  }
+
+  watch(isOpen, (open) => {
+    if (open) {
+      closeAcknowledged = false;
+      if (closeFallbackTimer !== null) {
+        clearTimeout(closeFallbackTimer);
+        closeFallbackTimer = null;
+      }
+      return;
+    }
+    // 启动兜底定时器：如果没有动画事件确认关闭（退出动画被跳过/取消），
+    // 则在动画窗口结束后触发 `closed`。
+    if (closeFallbackTimer === null) {
+      closeFallbackTimer = setTimeout(() => {
+        closeFallbackTimer = null;
+        if (!isOpen()) {
+          emitOpenStateChange();
+        }
+      }, CLOSED_EVENT_FALLBACK_MS);
+    }
+  });
+
+  onScopeDispose(() => {
+    if (closeFallbackTimer !== null) {
+      clearTimeout(closeFallbackTimer);
+      closeFallbackTimer = null;
+    }
+  });
+
+  return { handleAnimationEvent };
+}

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

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

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

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuCheckboxItemEmits,
+  DropdownMenuCheckboxItemProps,
+} from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { Check } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+const props = defineProps<
+  DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }
+>();
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
+  >
+    <span
+      class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
+    >
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Check class="size-4" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot></slot>
+  </DropdownMenuCheckboxItem>
+</template>

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuContentEmits,
+  DropdownMenuContentProps,
+} from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import {
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+);
+const emits = defineEmits<DropdownMenuContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'z-popup bg-popover text-popover-foreground 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 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

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

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

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { DropdownMenuItemProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { DropdownMenuItem, useForwardProps } from 'reka-ui';
+
+const props = withDefaults(
+  defineProps<
+    DropdownMenuItemProps & {
+      class?: HTMLAttributes['class'];
+      inset?: boolean;
+      variant?: 'default' | 'destructive';
+    }
+  >(),
+  {
+    variant: 'default',
+  },
+);
+
+const delegatedProps = reactiveOmit(props, 'inset', 'variant', 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuItem
+    data-slot="dropdown-menu-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </DropdownMenuItem>
+</template>

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { DropdownMenuLabel, useForwardProps } from 'reka-ui';
+
+const props = defineProps<
+  DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'inset');
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuLabel
+    data-slot="dropdown-menu-label"
+    :data-inset="inset ? '' : undefined"
+    v-bind="forwardedProps"
+    :class="
+      cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)
+    "
+  >
+    <slot></slot>
+  </DropdownMenuLabel>
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuRadioGroupEmits,
+  DropdownMenuRadioGroupProps,
+} from 'reka-ui';
+
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<DropdownMenuRadioGroupProps>();
+const emits = defineEmits<DropdownMenuRadioGroupEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRadioGroup
+    data-slot="dropdown-menu-radio-group"
+    v-bind="forwarded"
+  >
+    <slot></slot>
+  </DropdownMenuRadioGroup>
+</template>

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuRadioItemEmits,
+  DropdownMenuRadioItemProps,
+} from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { Circle } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+const props = defineProps<
+  DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }
+>();
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    data-slot="dropdown-menu-radio-item"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
+  >
+    <span
+      class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
+    >
+      <DropdownMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Circle class="size-2 fill-current" />
+        </slot>
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot></slot>
+  </DropdownMenuRadioItem>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { DropdownMenuSeparator } from 'reka-ui';
+
+const props = defineProps<
+  DropdownMenuSeparatorProps & {
+    class?: HTMLAttributes['class'];
+  }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <DropdownMenuSeparator
+    data-slot="dropdown-menu-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 my-1 h-px', props.class)"
+  />
+</template>

package/src/shadcn-ui/ui/dropdown-menu/DropdownMenuShortcut.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <span
+    data-slot="dropdown-menu-shortcut"
+    :class="
+      cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)
+    "
+  >
+    <slot></slot>
+  </span>
+</template>

package/src/shadcn-ui/ui/dropdown-menu/DropdownMenuSub.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'reka-ui';
+
+import { DropdownMenuSub, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<DropdownMenuSubProps>();
+const emits = defineEmits<DropdownMenuSubEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuSub
+    v-slot="slotProps"
+    data-slot="dropdown-menu-sub"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps"></slot>
+  </DropdownMenuSub>
+</template>

package/src/shadcn-ui/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuSubContentEmits,
+  DropdownMenuSubContentProps,
+} from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { DropdownMenuSubContent, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<
+  DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }
+>();
+const emits = defineEmits<DropdownMenuSubContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    data-slot="dropdown-menu-sub-content"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'bg-popover text-popover-foreground 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 z-50 min-w-[8rem] max-w-(--reka-dropdown-menu-content-available-width) origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </DropdownMenuSubContent>
+</template>

package/src/shadcn-ui/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { ChevronRight } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DropdownMenuSubTrigger, useForwardProps } from 'reka-ui';
+
+const props = defineProps<
+  DropdownMenuSubTriggerProps & {
+    class?: HTMLAttributes['class'];
+    inset?: boolean;
+  }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'inset');
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    data-slot="dropdown-menu-sub-trigger"
+    v-bind="forwardedProps"
+    :data-inset="inset ? '' : undefined"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+    <ChevronRight class="ml-auto size-4" />
+  </DropdownMenuSubTrigger>
+</template>