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

package/src/shadcn-ui/ui/context-menu/ContextMenuContent.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { ContextMenuContentEmits, ContextMenuContentProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import {
+  ContextMenuContent,
+  ContextMenuPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps<
+  ContextMenuContentProps & { class?: HTMLAttributes['class'] }
+>();
+const emits = defineEmits<ContextMenuContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ContextMenuPortal>
+    <ContextMenuContent
+      data-slot="context-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-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+    </ContextMenuContent>
+  </ContextMenuPortal>
+</template>

package/src/shadcn-ui/ui/context-menu/ContextMenuGroup.vue

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

package/src/shadcn-ui/ui/context-menu/ContextMenuItem.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { ContextMenuItemEmits, ContextMenuItemProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { ContextMenuItem, useForwardPropsEmits } from 'reka-ui';
+
+const props = withDefaults(
+  defineProps<
+    ContextMenuItemProps & {
+      class?: HTMLAttributes['class'];
+      inset?: boolean;
+      variant?: 'default' | 'destructive';
+    }
+  >(),
+  {
+    variant: 'default',
+  },
+);
+const emits = defineEmits<ContextMenuItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ContextMenuItem
+    data-slot="context-menu-item"
+    :data-inset="inset ? '' : undefined"
+    :data-variant="variant"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_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>
+  </ContextMenuItem>
+</template>

package/src/shadcn-ui/ui/context-menu/ContextMenuLabel.vue

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

package/src/shadcn-ui/ui/context-menu/ContextMenuPortal.vue

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

package/src/shadcn-ui/ui/context-menu/ContextMenuRadioGroup.vue

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

package/src/shadcn-ui/ui/context-menu/ContextMenuRadioItem.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type {
+  ContextMenuRadioItemEmits,
+  ContextMenuRadioItemProps,
+} 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 {
+  ContextMenuItemIndicator,
+  ContextMenuRadioItem,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+const props = defineProps<
+  ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }
+>();
+const emits = defineEmits<ContextMenuRadioItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ContextMenuRadioItem
+    data-slot="context-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"
+    >
+      <ContextMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Circle class="size-2 fill-current" />
+        </slot>
+      </ContextMenuItemIndicator>
+    </span>
+    <slot></slot>
+  </ContextMenuRadioItem>
+</template>

package/src/shadcn-ui/ui/context-menu/ContextMenuSeparator.vue

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

package/src/shadcn-ui/ui/context-menu/ContextMenuShortcut.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="context-menu-shortcut"
+    :class="
+      cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)
+    "
+  >
+    <slot></slot>
+  </span>
+</template>

package/src/shadcn-ui/ui/context-menu/ContextMenuSub.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { ContextMenuSubEmits, ContextMenuSubProps } from 'reka-ui';
+
+import { ContextMenuSub, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<ContextMenuSubProps>();
+const emits = defineEmits<ContextMenuSubEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <ContextMenuSub data-slot="context-menu-sub" v-bind="forwarded">
+    <slot></slot>
+  </ContextMenuSub>
+</template>

package/src/shadcn-ui/ui/context-menu/ContextMenuSubContent.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 { ContextMenuSubContent, 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>
+  <ContextMenuSubContent
+    data-slot="context-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] origin-(--reka-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </ContextMenuSubContent>
+</template>

package/src/shadcn-ui/ui/context-menu/ContextMenuSubTrigger.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ContextMenuSubTriggerProps } 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 { ContextMenuSubTrigger, useForwardProps } from 'reka-ui';
+
+const props = defineProps<
+  ContextMenuSubTriggerProps & {
+    class?: HTMLAttributes['class'];
+    inset?: boolean;
+  }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <ContextMenuSubTrigger
+    data-slot="context-menu-sub-trigger"
+    :data-inset="inset ? '' : undefined"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center 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',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+    <ChevronRight class="ml-auto size-4" />
+  </ContextMenuSubTrigger>
+</template>

package/src/shadcn-ui/ui/context-menu/ContextMenuTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ContextMenuTriggerProps } from 'reka-ui';
+
+import { ContextMenuTrigger, useForwardProps } from 'reka-ui';
+
+const props = defineProps<ContextMenuTriggerProps>();
+
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <ContextMenuTrigger data-slot="context-menu-trigger" v-bind="forwardedProps">
+    <slot></slot>
+  </ContextMenuTrigger>
+</template>

package/src/shadcn-ui/ui/context-menu/index.ts

@@ -0,0 +1,14 @@
+export { default as ContextMenu } from './ContextMenu.vue';
+export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue';
+export { default as ContextMenuContent } from './ContextMenuContent.vue';
+export { default as ContextMenuGroup } from './ContextMenuGroup.vue';
+export { default as ContextMenuItem } from './ContextMenuItem.vue';
+export { default as ContextMenuLabel } from './ContextMenuLabel.vue';
+export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue';
+export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue';
+export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue';
+export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue';
+export { default as ContextMenuSub } from './ContextMenuSub.vue';
+export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue';
+export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue';
+export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue';

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
+
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot v-slot="slotProps" data-slot="dialog" v-bind="forwarded">
+    <slot v-bind="slotProps"></slot>
+  </DialogRoot>
+</template>

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

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

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

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import type { ClassType } from '@melt-js/libs-vben/typings';
+
+import { computed, ref } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { X } from '@lucide/vue';
+import {
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+import DialogOverlay from './DialogOverlay.vue';
+import { useDialogStateEvents } from './use-dialog-state-events';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<
+    DialogContentProps & {
+      animationType?: 'scale' | 'slide';
+      appendTo?: HTMLElement | string;
+      class?: HTMLAttributes['class'];
+      closeClass?: ClassType;
+      closeDisabled?: boolean;
+      /** Remove the overlay immediately when its cached page is inactive. */
+      inactive?: boolean;
+      modal?: boolean;
+      open?: boolean;
+      overlayBlur?: number;
+      showCloseButton?: boolean;
+      zIndex?: number;
+    }
+  >(),
+  {
+    appendTo: 'body',
+    animationType: 'slide',
+    closeDisabled: false,
+    inactive: false,
+    showCloseButton: true,
+  },
+);
+const emits = defineEmits<
+  DialogContentEmits & { close: []; closed: []; opened: [] }
+>();
+
+const delegatedProps = computed(() => {
+  const {
+    class: _,
+    inactive: _inactive,
+    modal: _modal,
+    open: _open,
+    showCloseButton: __,
+    animationType: ___,
+    ...delegated
+  } = props;
+
+  return delegated;
+});
+
+function isAppendToBody() {
+  return (
+    props.appendTo === 'body' ||
+    props.appendTo === document.body ||
+    !props.appendTo
+  );
+}
+
+const position = computed(() => {
+  return isAppendToBody() ? 'fixed' : 'absolute';
+});
+
+// reka-ui 的 Dialog 在 modal=false 时不会渲染遮罩，这里通过 DialogOverlay 组件自行渲染遮罩层并锁定滚动。
+// DialogOverlay 组件通过 v-if 控制挂载/卸载，其内部的 useScrollLock 会在组件卸载时自动解锁滚动，
+// 避免 modal=true 时 body 被设置 pointer-events:none 导致弹出层（如 Select 下拉框）无法点击的问题。
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const contentRef = ref<InstanceType<typeof DialogContent> | null>(null);
+
+const { handleAnimationEvent } = useDialogStateEvents({
+  contentRef,
+  isOpen: () => props.open,
+  onClosed: () => emits('closed'),
+  onOpened: () => emits('opened'),
+});
+
+defineExpose({
+  getContentRef: () => contentRef.value,
+});
+</script>
+
+<template>
+  <DialogPortal :to="appendTo">
+    <Transition v-if="!inactive" name="fade">
+      <DialogOverlay
+        v-if="open && modal"
+        :overlay-blur="overlayBlur"
+        :position="position"
+        :z-index="zIndex"
+        @click="() => emits('close')"
+      />
+    </Transition>
+    <DialogContent
+      ref="contentRef"
+      :style="{ ...(zIndex ? { zIndex } : {}), position }"
+      data-slot="dialog-content"
+      @animationend="handleAnimationEvent"
+      @animationcancel="handleAnimationEvent"
+      v-bind="forwarded"
+      :class="
+        cn(
+          'z-popup bg-background 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 w-full p-6 shadow-lg outline-hidden sm:rounded-xl',
+          {
+            'data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]':
+              animationType === 'slide',
+          },
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+
+      <DialogClose
+        v-if="showCloseButton"
+        :disabled="closeDisabled"
+        data-slot="dialog-close"
+        :class="
+          cn(
+            'flex-center text-foreground/80 hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-3 right-3 h-6 w-6 rounded-full px-1 text-lg opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none',
+            props.closeClass,
+          )
+        "
+        @click="() => emits('close')"
+      >
+        <X class="size-4" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

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

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

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { DialogClose } from 'reka-ui';
+
+import { Button } from '../button';
+
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes['class'];
+    showCloseButton?: boolean;
+  }>(),
+  {
+    showCloseButton: false,
+  },
+);
+</script>
+
+<template>
+  <div
+    data-slot="dialog-footer"
+    :class="
+      cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)
+    "
+  >
+    <slot></slot>
+    <DialogClose v-if="showCloseButton" as-child>
+      <Button variant="outline"> Close </Button>
+    </DialogClose>
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+<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>
+  <div
+    data-slot="dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot></slot>
+  </div>
+</template>