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

package/src/shadcn-ui/components/table-action/types.ts

@@ -0,0 +1,75 @@
+import type { ButtonVariants } from '../../ui';
+
+import { VbenIcon } from '../icon';
+
+/** 权限码：单个或多个，配合注入的 hasPermission 判断 */
+export type TableActionAuth = string | string[];
+
+/** 操作按钮提示 */
+export interface TableActionTooltip {
+  content: string;
+  side?: 'bottom' | 'left' | 'right' | 'top';
+}
+
+/** 气泡确认框配置 */
+export interface TableActionPopConfirm {
+  /** 取消按钮文案 */
+  cancelText?: string;
+  /** 确认回调；未提供时回退到 action.onClick */
+  confirm?: () => void;
+  /** 确认按钮文案 */
+  okText?: string;
+  /** 提示标题 */
+  title?: string;
+}
+
+export interface ActionItem {
+  /** 权限码，配合注入的 hasPermission 过滤 */
+  auth?: TableActionAuth;
+  /** 自定义类名 */
+  class?: any;
+  /** 危险操作（红色文字） */
+  danger?: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 图标组件 */
+  icon?: typeof VbenIcon.icon;
+  /** 是否显示：布尔或返回布尔的函数 */
+  ifShow?: (() => boolean) | boolean;
+  /** 唯一标识，点击回调可据此区分 */
+  key?: number | string;
+  /** 加载状态 */
+  loading?: boolean;
+  /** 点击回调 */
+  onClick?: () => void;
+  /** 气泡确认框 */
+  popConfirm?: TableActionPopConfirm;
+  /** 尺寸 */
+  size?: ButtonVariants['size'];
+  /** 文本 */
+  text?: string;
+  /** 提示：字符串或配置对象 */
+  tooltip?: string | TableActionTooltip;
+  /** 按钮样式变体 */
+  variant?: ButtonVariants['variant'];
+}
+
+export interface TableActionProps {
+  /** 主操作按钮 */
+  actions?: ActionItem[];
+  /** 对齐方式 */
+  align?: 'center' | 'end' | 'start';
+  /** 自定义类名 */
+  class?: any;
+  /** 按钮之间是否显示分割线 */
+  divider?: boolean;
+  /** “更多”下拉中的操作 */
+  dropdownActions?: ActionItem[];
+  /**
+   * 权限判断函数，返回 false 则隐藏对应 auth 的操作。
+   * 核心组件不依赖业务，由使用方注入（如 useAccess().hasAccessByCodes）。
+   */
+  hasPermission?: (auth?: TableActionAuth) => boolean;
+  /** “更多”按钮文案（提供时显示在图标右侧） */
+  moreText?: string;
+}

package/src/shadcn-ui/components/tooltip/help-tooltip.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { CircleHelp } from '@lucide/vue';
+
+import Tooltip from './tooltip.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps<{ triggerClass?: string }>();
+</script>
+
+<template>
+  <Tooltip :delay-duration="300" side="right">
+    <template #trigger>
+      <slot name="trigger">
+        <CircleHelp
+          :class="
+            cn(
+              'text-foreground/80 hover:text-foreground inline-flex size-5 cursor-pointer',
+              triggerClass,
+            )
+          "
+        />
+      </slot>
+    </template>
+    <slot></slot>
+  </Tooltip>
+</template>

package/src/shadcn-ui/components/tooltip/index.ts

@@ -0,0 +1,2 @@
+export { default as VbenHelpTooltip } from './help-tooltip.vue';
+export { default as VbenTooltip } from './tooltip.vue';

package/src/shadcn-ui/components/tooltip/tooltip.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { TooltipContentProps } from 'reka-ui';
+
+import type { StyleValue } from 'vue';
+
+import type { ClassType } from '@melt-js/libs-vben/typings';
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../../ui';
+
+interface Props {
+  contentClass?: ClassType;
+  contentStyle?: StyleValue;
+  delayDuration?: number;
+  side?: TooltipContentProps['side'];
+}
+
+withDefaults(defineProps<Props>(), {
+  delayDuration: 0,
+  side: 'right',
+});
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="delayDuration">
+    <Tooltip>
+      <TooltipTrigger as-child tabindex="-1">
+        <slot name="trigger"></slot>
+      </TooltipTrigger>
+      <TooltipContent
+        :class="contentClass"
+        :side="side"
+        :style="contentStyle"
+        class="bg-accent text-popover-foreground rounded-md"
+      >
+        <slot></slot>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>

package/src/shadcn-ui/components.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/assets/index.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@melt-js/comps-vben/shadcn-ui/components",
+    "utils": "@melt-js/libs-vben/shared/utils"
+  }
+}

package/src/shadcn-ui/index.ts

@@ -0,0 +1,39 @@
+export * from './components';
+export * from './ui';
+export { createContext, Slot, VisuallyHidden } from 'reka-ui';
+
+// 显式再导出，避免 rolldown 对多层 export * 的静态分析遗漏
+export { VbenAvatar } from './components/avatar/index.ts';
+export { VbenBackTop } from './components/back-top/index.ts';
+export { VbenBreadcrumbView } from './components/breadcrumb/index.ts';
+export { VbenButtonGroup } from './components/button/index.ts';
+export { VbenButton } from './components/button/index.ts';
+export { VbenCheckButtonGroup } from './components/button/index.ts';
+export { VbenIconButton } from './components/button/index.ts';
+export { VbenCheckbox } from './components/checkbox/index.ts';
+export { VbenCollapsibleParams } from './components/collapsible/index.ts';
+export { VbenCollapsible } from './components/collapsible/index.ts';
+export { VbenContextMenu } from './components/context-menu/index.ts';
+export { VbenCountToAnimator } from './components/count-to-animator/index.ts';
+export { VbenDescriptionsItem } from './components/descriptions/index.ts';
+export { VbenDescriptions } from './components/descriptions/index.ts';
+export { VbenDropdownMenu } from './components/dropdown-menu/index.ts';
+export { VbenDropdownRadioMenu } from './components/dropdown-menu/index.ts';
+export { VbenExpandableArrow } from './components/expandable-arrow/index.ts';
+export { VbenFullScreen } from './components/full-screen/index.ts';
+export { VbenHoverCard } from './components/hover-card/index.ts';
+export { VbenIcon } from './components/icon/index.ts';
+export { VbenInputPassword } from './components/input-password/index.ts';
+export { VbenLogo } from './components/logo/index.ts';
+export { VbenPinInput } from './components/pin-input/index.ts';
+export { VbenPopover } from './components/popover/index.ts';
+export { VbenRenderContent } from './components/render-content/index.ts';
+export { VbenScrollbar } from './components/scrollbar/index.ts';
+export { VbenSegmented } from './components/segmented/index.ts';
+export { VbenSelect } from './components/select/index.ts';
+export { VbenSpineText } from './components/spine-text/index.ts';
+export { VbenLoading } from './components/spinner/index.ts';
+export { VbenSpinner } from './components/spinner/index.ts';
+export { VbenTableAction } from './components/table-action/index.ts';
+export { VbenHelpTooltip } from './components/tooltip/index.ts';
+export { VbenTooltip } from './components/tooltip/index.ts';

package/src/shadcn-ui/ui/accordion/Accordion.vue

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

package/src/shadcn-ui/ui/accordion/AccordionContent.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { AccordionContent } from 'reka-ui';
+
+const props = defineProps<
+  AccordionContentProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <AccordionContent
+    data-slot="accordion-content"
+    v-bind="delegatedProps"
+    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+  >
+    <div :class="cn('pt-0 pb-4', props.class)">
+      <slot></slot>
+    </div>
+  </AccordionContent>
+</template>

package/src/shadcn-ui/ui/accordion/AccordionItem.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { AccordionItem, useForwardProps } from 'reka-ui';
+
+const props = defineProps<
+  AccordionItemProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <AccordionItem
+    v-slot="slotProps"
+    data-slot="accordion-item"
+    v-bind="forwardedProps"
+    :class="cn('border-b last:border-b-0', props.class)"
+  >
+    <slot v-bind="slotProps"></slot>
+  </AccordionItem>
+</template>

package/src/shadcn-ui/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { AccordionTriggerProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { ChevronDown } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AccordionHeader, AccordionTrigger } from 'reka-ui';
+
+const props = defineProps<
+  AccordionTriggerProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      data-slot="accordion-trigger"
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+      <slot name="icon">
+        <ChevronDown
+          class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

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

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue';
+export { default as AccordionContent } from './AccordionContent.vue';
+export { default as AccordionItem } from './AccordionItem.vue';
+export { default as AccordionTrigger } from './AccordionTrigger.vue';

package/src/shadcn-ui/ui/alert-dialog/AlertDialog.vue

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

package/src/shadcn-ui/ui/alert-dialog/AlertDialogAction.vue

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

package/src/shadcn-ui/ui/alert-dialog/AlertDialogCancel.vue

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

package/src/shadcn-ui/ui/alert-dialog/AlertDialogContent.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import type { AlertDialogContentEmits, AlertDialogContentProps } from 'reka-ui';
+
+import type { ClassType } from '@melt-js/libs-vben/typings';
+
+import { ref } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import {
+  AlertDialogContent,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+import { useDialogStateEvents } from '../dialog/use-dialog-state-events';
+import AlertDialogOverlay from './AlertDialogOverlay.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<
+    AlertDialogContentProps & {
+      centered?: boolean;
+      class?: ClassType;
+      modal?: boolean;
+      open?: boolean;
+      overlayBlur?: number;
+      zIndex?: number;
+    }
+  >(),
+  { modal: true },
+);
+const emits = defineEmits<
+  AlertDialogContentEmits & { close: []; closed: []; opened: [] }
+>();
+
+// reka-ui 的 AlertDialog 在 modal=true 时会将 body 设置 pointer-events:none，
+// 弹出层（如 Select 下拉框）会因此无法点击。这里通过在上层传入 :modal="false" 来
+// 避免该问题，同时通过 AlertDialogOverlay 组件自行渲染遮罩并锁定滚动。
+// AlertDialogOverlay 通过 v-if 控制挂载/卸载，其内部的 useScrollLock 会在组件
+// 卸载时自动解锁滚动。
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const contentRef = ref<InstanceType<typeof AlertDialogContent> | null>(null);
+
+const { handleAnimationEvent } = useDialogStateEvents({
+  contentRef,
+  isOpen: () => props.open,
+  onClosed: () => emits('closed'),
+  onOpened: () => emits('opened'),
+});
+
+defineExpose({
+  getContentRef: () => contentRef.value,
+});
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <Transition name="fade" appear>
+      <AlertDialogOverlay
+        v-if="open && modal"
+        :overlay-blur="overlayBlur"
+        position="fixed"
+        :z-index="zIndex"
+        @click="() => emits('close')"
+      />
+    </Transition>
+    <AlertDialogContent
+      data-slot="alert-dialog-content"
+      ref="contentRef"
+      :style="{ ...(zIndex ? { zIndex } : {}), position: 'fixed' }"
+      @animationend="handleAnimationEvent"
+      @animationcancel="handleAnimationEvent"
+      v-bind="{ ...$attrs, ...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 fixed left-[50%] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          {
+            'data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]':
+              !centered,
+            'data-[state=closed]:slide-out-to-top-[148%] data-[state=open]:slide-in-from-top-[98%]':
+              centered,
+            'top-[10vh]': !centered,
+            'top-1/2 -translate-y-1/2': centered,
+          },
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>

package/src/shadcn-ui/ui/alert-dialog/AlertDialogDescription.vue

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

package/src/shadcn-ui/ui/alert-dialog/AlertDialogFooter.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>
+  <div
+    data-slot="alert-dialog-footer"
+    :class="
+      cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)
+    "
+  >
+    <slot></slot>
+  </div>
+</template>

package/src/shadcn-ui/ui/alert-dialog/AlertDialogHeader.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="alert-dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot></slot>
+  </div>
+</template>

package/src/shadcn-ui/ui/alert-dialog/AlertDialogOverlay.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+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',
+  },
+);
+
+// 通过 v-if 控制挂载/卸载，组件卸载时 useScrollLock 自动解锁滚动
+useScrollLock();
+</script>
+
+<template>
+  <div
+    :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/alert-dialog/AlertDialogTitle.vue

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

package/src/shadcn-ui/ui/alert-dialog/AlertDialogTrigger.vue

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

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

@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue';
+export { default as AlertDialogAction } from './AlertDialogAction.vue';
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue';
+export { default as AlertDialogContent } from './AlertDialogContent.vue';
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue';
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue';
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue';
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue';
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue';

package/src/shadcn-ui/ui/avatar/Avatar.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { AvatarRoot } from 'reka-ui';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <AvatarRoot
+    data-slot="avatar"
+    :class="
+      cn(
+        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </AvatarRoot>
+</template>