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

package/src/shadcn-ui/components/spinner/loading.vue

@@ -0,0 +1,140 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+interface Props {
+  class?: string;
+  /**
+   * @zh_CN 最小加载时间
+   * @en_US Minimum loading time
+   */
+  minLoadingTime?: number;
+
+  /**
+   * @zh_CN loading状态开启
+   */
+  spinning?: boolean;
+  /**
+   * @zh_CN 文字
+   */
+  text?: string;
+}
+
+defineOptions({
+  name: 'VbenLoading',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  minLoadingTime: 50,
+  text: '',
+});
+// const startTime = ref(0);
+const showSpinner = ref(false);
+const renderSpinner = ref(false);
+let timer: ReturnType<typeof setTimeout> | undefined;
+
+watch(
+  () => props.spinning,
+  (show) => {
+    if (!show) {
+      showSpinner.value = false;
+      timer && clearTimeout(timer);
+      return;
+    }
+
+    // startTime.value = performance.now();
+    timer = setTimeout(() => {
+      // const loadingTime = performance.now() - startTime.value;
+
+      showSpinner.value = true;
+      if (showSpinner.value) {
+        renderSpinner.value = true;
+      }
+    }, props.minLoadingTime);
+  },
+  {
+    immediate: true,
+  },
+);
+
+function onTransitionEnd() {
+  if (!showSpinner.value) {
+    renderSpinner.value = false;
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'bg-overlay-content dark:bg-overlay absolute top-0 left-0 z-100 flex size-full flex-col items-center justify-center transition-all duration-500',
+        {
+          'invisible opacity-0': !showSpinner,
+        },
+        props.class,
+      )
+    "
+    @transitionend="onTransitionEnd"
+  >
+    <slot name="icon" v-if="renderSpinner">
+      <span class="dot relative inline-block size-9 text-3xl">
+        <i
+          v-for="index in 4"
+          :key="index"
+          class="bg-primary absolute block size-4 origin-[50%_50%] scale-75 rounded-full opacity-30"
+        ></i>
+      </span>
+    </slot>
+
+    <div v-if="text" class="text-primary mt-4 text-xs">{{ text }}</div>
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+.dot {
+  transform: rotate(45deg);
+  animation: rotate-ani 1.2s infinite linear;
+}
+
+.dot i {
+  animation: spin-move-ani 1s infinite linear alternate;
+}
+
+.dot i:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+
+.dot i:nth-child(2) {
+  top: 0;
+  right: 0;
+  animation-delay: 0.4s;
+}
+
+.dot i:nth-child(3) {
+  right: 0;
+  bottom: 0;
+  animation-delay: 0.8s;
+}
+
+.dot i:nth-child(4) {
+  bottom: 0;
+  left: 0;
+  animation-delay: 1.2s;
+}
+
+@keyframes rotate-ani {
+  to {
+    transform: rotate(405deg);
+  }
+}
+
+@keyframes spin-move-ani {
+  to {
+    opacity: 1;
+  }
+}
+</style>

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

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+interface Props {
+  class?: string;
+  /**
+   * @zh_CN 最小加载时间
+   * @en_US Minimum loading time
+   */
+  minLoadingTime?: number;
+  /**
+   * @zh_CN loading状态开启
+   */
+  spinning?: boolean;
+}
+
+defineOptions({
+  name: 'VbenSpinner',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  minLoadingTime: 50,
+});
+// const startTime = ref(0);
+const showSpinner = ref(false);
+const renderSpinner = ref(false);
+const timer = ref<ReturnType<typeof setTimeout>>();
+
+watch(
+  () => props.spinning,
+  (show) => {
+    if (!show) {
+      showSpinner.value = false;
+      clearTimeout(timer.value);
+      return;
+    }
+
+    // startTime.value = performance.now();
+    timer.value = setTimeout(() => {
+      // const loadingTime = performance.now() - startTime.value;
+
+      showSpinner.value = true;
+      if (showSpinner.value) {
+        renderSpinner.value = true;
+      }
+    }, props.minLoadingTime);
+  },
+  {
+    immediate: true,
+  },
+);
+
+function onTransitionEnd() {
+  if (!showSpinner.value) {
+    renderSpinner.value = false;
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex-center bg-overlay-content absolute top-0 left-0 z-100 size-full backdrop-blur-xs transition-all duration-500',
+        {
+          'invisible pointer-events-none opacity-0': !showSpinner,
+          'pointer-events-auto': showSpinner,
+        },
+        props.class,
+      )
+    "
+    @transitionend="onTransitionEnd"
+  >
+    <div
+      :class="{ paused: !renderSpinner }"
+      v-if="renderSpinner"
+      class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:top-15 before:left-0 before:h-1.25 before:w-12 before:rounded-full before:content-[''] after:absolute after:top-0 after:left-0 after:h-full after:w-full after:rounded after:content-['']"
+    ></div>
+  </div>
+</template>
+
+<style scoped>
+.paused {
+  &::before {
+    animation-play-state: paused !important;
+  }
+
+  &::after {
+    animation-play-state: paused !important;
+  }
+}
+
+.loader {
+  &::before {
+    animation: loader-shadow-ani 0.5s linear infinite;
+  }
+
+  &::after {
+    animation: loader-jump-ani 0.5s linear infinite;
+  }
+}
+
+@keyframes loader-jump-ani {
+  15% {
+    border-bottom-right-radius: 3px;
+  }
+
+  25% {
+    transform: translateY(9px) rotate(22.5deg);
+  }
+
+  50% {
+    border-bottom-right-radius: 40px;
+    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
+  }
+
+  75% {
+    transform: translateY(9px) rotate(67.5deg);
+  }
+
+  100% {
+    transform: translateY(0) rotate(90deg);
+  }
+}
+
+@keyframes loader-shadow-ani {
+  0%,
+  100% {
+    transform: scale(1, 1);
+  }
+
+  50% {
+    transform: scale(1.2, 1);
+  }
+}
+</style>

package/src/shadcn-ui/components/table-action/action-dropdown-item.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { ActionItem } from './types';
+
+import { computed, ref } from 'vue';
+
+import { useSimpleLocale } from '@melt-js/libs-vben/composables';
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import {
+  DropdownMenuItem,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '../../ui';
+import { VbenButton } from '../button';
+import { VbenIcon } from '../icon';
+
+const props = defineProps<{ action: ActionItem }>();
+const emit = defineEmits<{ confirm: [] }>();
+const { $t } = useSimpleLocale();
+const open = ref(false);
+
+const itemClass = computed(() =>
+  cn(
+    'cursor-pointer gap-2',
+    props.action.danger && 'text-destructive focus:text-destructive',
+  ),
+);
+
+/**
+ * 阻止 reka-ui 事件的默认行为，用于：
+ * - @select：阻止点击菜单项后自动关闭菜单，以便弹出气泡确认框；
+ * - @open-auto-focus：阻止弹层抢占焦点（避免与菜单的焦点陷阱冲突）；
+ * - @focus-outside：阻止因菜单夺回焦点而被误判为「焦点移出」从而关闭弹层。
+ */
+function preventDefault(event: Event) {
+  event.preventDefault();
+}
+
+function onClick() {
+  if (props.action.disabled) return;
+  props.action.onClick?.();
+}
+
+function onConfirm() {
+  open.value = false;
+  const pc = props.action.popConfirm;
+  if (pc?.confirm) {
+    pc.confirm();
+  } else {
+    props.action.onClick?.();
+  }
+  // 确认后关闭整个下拉菜单
+  emit('confirm');
+}
+
+function onCancel() {
+  open.value = false;
+}
+</script>
+
+<template>
+  <!--
+    气泡确认：菜单项同时作为 Popover 触发器。
+    通过双重 as-child（DropdownMenuItem + PopoverTrigger 均合并到同一个叶子元素），
+    使该元素既是菜单项又是弹层触发器；@select 阻止点击后菜单自动关闭。
+  -->
+  <Popover v-if="action.popConfirm" v-model:open="open">
+    <PopoverTrigger as-child>
+      <DropdownMenuItem
+        as-child
+        :class="itemClass"
+        :disabled="action.disabled"
+        @select="preventDefault"
+      >
+        <div>
+          <VbenIcon v-if="action.icon" :icon="action.icon" class="size-4" />
+          {{ action.text }}
+        </div>
+      </DropdownMenuItem>
+    </PopoverTrigger>
+    <PopoverContent
+      class="z-popup w-60"
+      side="left"
+      @focus-outside="preventDefault"
+      @open-auto-focus="preventDefault"
+    >
+      <div class="text-foreground mb-3 text-sm">
+        {{ action.popConfirm.title ?? $t('confirmTitle') }}
+      </div>
+      <div class="flex justify-end gap-2">
+        <VbenButton size="sm" variant="outline" @click="onCancel">
+          {{ action.popConfirm.cancelText ?? $t('cancel') }}
+        </VbenButton>
+        <VbenButton
+          :variant="action.danger ? 'destructive' : 'default'"
+          size="sm"
+          @click="onConfirm"
+        >
+          {{ action.popConfirm.okText ?? $t('confirm') }}
+        </VbenButton>
+      </div>
+    </PopoverContent>
+  </Popover>
+
+  <!-- 普通下拉项 -->
+  <DropdownMenuItem
+    v-else
+    :class="itemClass"
+    :disabled="action.disabled"
+    @click="onClick"
+  >
+    <VbenIcon v-if="action.icon" :icon="action.icon" class="size-4" />
+    {{ action.text }}
+  </DropdownMenuItem>
+</template>

package/src/shadcn-ui/components/table-action/action-item.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { ActionItem } from './types';
+
+import { computed, ref } from 'vue';
+
+import { useSimpleLocale } from '@melt-js/libs-vben/composables';
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui';
+import { VbenButton } from '../button';
+import { VbenIcon } from '../icon';
+
+const props = defineProps<{ action: ActionItem }>();
+
+const { $t } = useSimpleLocale();
+const open = ref(false);
+
+const buttonClass = computed(() =>
+  cn(
+    // 与 table-action.vue 一致：垂直方向不加内边距，避免按钮总高度
+    // 超过 small 档表格 40px 的单元格行高导致视觉不对齐 (#8461)
+    'gap-1 px-2 py-0',
+    props.action.danger && 'text-destructive hover:text-destructive',
+    props.action.class,
+  ),
+);
+
+const variant = computed(() => props.action.variant ?? 'link');
+const size = computed(() => props.action.size ?? 'default');
+
+function onClick() {
+  if (props.action.disabled || props.action.loading) return;
+  props.action.onClick?.();
+}
+
+function onConfirm() {
+  open.value = false;
+  const pc = props.action.popConfirm;
+  if (pc?.confirm) {
+    pc.confirm();
+  } else {
+    props.action.onClick?.();
+  }
+}
+
+function onCancel() {
+  open.value = false;
+}
+</script>
+
+<template>
+  <!-- 气泡确认 -->
+  <Popover v-if="action.popConfirm" v-model:open="open">
+    <PopoverTrigger as-child>
+      <VbenButton
+        :class="buttonClass"
+        :disabled="action.disabled"
+        :loading="action.loading"
+        :size="size"
+        :variant="variant"
+      >
+        <VbenIcon :icon="action.icon" v-if="action.icon" class="size-4" />
+        <span v-if="action.text">{{ action.text }}</span>
+      </VbenButton>
+    </PopoverTrigger>
+    <PopoverContent class="z-popup w-60" side="top">
+      <div class="text-foreground mb-3 text-sm">
+        {{ action.popConfirm.title ?? $t('confirmTitle') }}
+      </div>
+      <div class="flex justify-end gap-2">
+        <VbenButton size="sm" variant="outline" @click="onCancel">
+          {{ action.popConfirm.cancelText ?? $t('cancel') }}
+        </VbenButton>
+        <VbenButton
+          :variant="action.danger ? 'destructive' : 'default'"
+          size="sm"
+          @click="onConfirm"
+        >
+          {{ action.popConfirm.okText ?? $t('confirm') }}
+        </VbenButton>
+      </div>
+    </PopoverContent>
+  </Popover>
+
+  <!-- 普通按钮 -->
+  <VbenButton
+    v-else
+    :class="buttonClass"
+    :disabled="action.disabled"
+    :loading="action.loading"
+    :size="size"
+    :variant="variant"
+    @click="onClick"
+  >
+    <VbenIcon :icon="action.icon" v-if="action.icon" class="size-4" />
+    <span v-if="action.text">{{ action.text }}</span>
+  </VbenButton>
+</template>

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

@@ -0,0 +1,3 @@
+export { default as VbenTableAction } from './table-action.vue';
+
+export type * from './types';

package/src/shadcn-ui/components/table-action/table-action.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import type { ActionItem, TableActionProps } from './types';
+
+import { computed, ref } from 'vue';
+
+import { Ellipsis } from '@melt-js/libs-vben/core-icons';
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Separator,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../../ui';
+import { VbenButton } from '../button';
+import { VbenIcon } from '../icon';
+import ActionDropdownItemComp from './action-dropdown-item.vue';
+import ActionItemComp from './action-item.vue';
+
+defineOptions({ name: 'VbenTableAction' });
+
+const props = withDefaults(defineProps<TableActionProps>(), {
+  actions: () => [],
+  align: 'end',
+  class: undefined,
+  divider: false,
+  dropdownActions: () => [],
+  hasPermission: undefined,
+  moreText: undefined,
+});
+
+function checkVisible(item: ActionItem): boolean {
+  // 权限
+  if (item.auth && props.hasPermission && !props.hasPermission(item.auth)) {
+    return false;
+  }
+  // ifShow
+  if (typeof item.ifShow === 'boolean') return item.ifShow;
+  if (typeof item.ifShow === 'function') return item.ifShow();
+  return true;
+}
+
+const visibleActions = computed(() =>
+  (props.actions ?? []).filter((item) => checkVisible(item)),
+);
+const visibleDropdownActions = computed(() =>
+  (props.dropdownActions ?? []).filter((item) => checkVisible(item)),
+);
+
+const alignClass = computed(
+  () =>
+    ({ center: 'justify-center', end: 'justify-end', start: 'justify-start' })[
+      props.align
+    ],
+);
+
+// 缓存根节点类名，避免每次渲染都执行 cn()（内部 tailwind-merge 解析开销较大）
+const wrapperClass = computed(() =>
+  cn('flex items-center gap-1', alignClass.value, props.class),
+);
+
+function tooltipSide(action: ActionItem) {
+  return typeof action.tooltip === 'object'
+    ? (action.tooltip.side ?? 'top')
+    : 'top';
+}
+function tooltipContent(action: ActionItem) {
+  return typeof action.tooltip === 'object'
+    ? action.tooltip.content
+    : action.tooltip;
+}
+
+/**
+ * 预计算每个主操作的渲染视图模型：
+ * - 普通按钮在本组件内直接渲染，不再为每个操作多包一层子组件，
+ *   表格大量行时可显著减少组件实例数；
+ * - 仅 popConfirm 操作仍交由子组件维护独立弹层状态；
+ * - 类名等在此一次性计算并缓存，避免模板每次渲染都执行 cn()。
+ */
+const renderedActions = computed(() => {
+  const list = visibleActions.value;
+  return list.map((action, index) => {
+    const hasTooltip = !!action.tooltip && !action.popConfirm;
+    return {
+      action,
+      buttonClass: cn(
+        // 水平内边距保留点击热区；垂直方向不加内边距，避免按钮总高度
+        // 超过 small 档表格 40px 的单元格行高导致视觉不对齐 (#8461)
+        'gap-1 px-2 py-0',
+        action.danger && 'text-destructive hover:text-destructive',
+        action.class,
+      ),
+      hasTooltip,
+      isConfirm: !!action.popConfirm,
+      key: action.key ?? index,
+      showDivider: props.divider && index < list.length - 1,
+      size: action.size ?? 'default',
+      tooltipContent: hasTooltip ? tooltipContent(action) : undefined,
+      tooltipSide: hasTooltip ? tooltipSide(action) : 'top',
+      variant: action.variant ?? 'link',
+    };
+  });
+});
+
+const dropdownOpen = ref(false);
+
+function onActionClick(action: ActionItem) {
+  if (action.disabled || action.loading) return;
+  action.onClick?.();
+}
+
+/**
+ * 当与气泡确认（Popover）交互时，避免误关闭整个下拉菜单。
+ * Popover 内容被 Portal 渲染到菜单之外，默认会被判定为「点击外部」而关闭菜单。
+ */
+function onContentInteractOutside(event: Event) {
+  const target = (event as CustomEvent).detail?.originalEvent?.target as
+    | HTMLElement
+    | null
+    | undefined;
+  if (target?.closest('[data-slot="popover-content"]')) {
+    event.preventDefault();
+  }
+}
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <!-- 所有主操作共享同一个 TooltipProvider，避免每个 tooltip 各建一个 provider -->
+    <TooltipProvider v-if="renderedActions.length > 0" :delay-duration="0">
+      <template v-for="item in renderedActions" :key="item.key">
+        <!-- 气泡确认：需独立弹层状态，交由子组件维护 -->
+        <ActionItemComp v-if="item.isConfirm" :action="item.action" />
+
+        <!-- 带提示的普通按钮 -->
+        <Tooltip v-else-if="item.hasTooltip">
+          <TooltipTrigger as-child tabindex="-1">
+            <VbenButton
+              :class="item.buttonClass"
+              :disabled="item.action.disabled"
+              :loading="item.action.loading"
+              :size="item.size"
+              :variant="item.variant"
+              @click="onActionClick(item.action)"
+            >
+              <VbenIcon
+                v-if="item.action.icon"
+                :icon="item.action.icon"
+                class="size-4"
+              />
+              <span v-if="item.action.text">{{ item.action.text }}</span>
+            </VbenButton>
+          </TooltipTrigger>
+          <TooltipContent
+            :side="item.tooltipSide"
+            class="side-content bg-accent text-popover-foreground rounded-md"
+          >
+            {{ item.tooltipContent }}
+          </TooltipContent>
+        </Tooltip>
+
+        <!-- 普通按钮 -->
+        <VbenButton
+          v-else
+          :class="item.buttonClass"
+          :disabled="item.action.disabled"
+          :loading="item.action.loading"
+          :size="item.size"
+          :variant="item.variant"
+          @click="onActionClick(item.action)"
+        >
+          <VbenIcon
+            v-if="item.action.icon"
+            :icon="item.action.icon"
+            class="size-4"
+          />
+          <span v-if="item.action.text">{{ item.action.text }}</span>
+        </VbenButton>
+
+        <Separator v-if="item.showDivider" orientation="vertical" class="h-4" />
+      </template>
+    </TooltipProvider>
+
+    <DropdownMenu
+      v-if="visibleDropdownActions.length > 0"
+      v-model:open="dropdownOpen"
+    >
+      <DropdownMenuTrigger as-child>
+        <VbenButton class="gap-1 px-2 py-0" variant="link">
+          <Ellipsis class="size-4" />
+          <span v-if="moreText">{{ moreText }}</span>
+        </VbenButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        @interact-outside="onContentInteractOutside"
+      >
+        <template
+          v-for="(item, index) in visibleDropdownActions"
+          :key="item.key ?? index"
+        >
+          <ActionDropdownItemComp
+            :action="item"
+            @confirm="dropdownOpen = false"
+          />
+          <DropdownMenuSeparator
+            v-if="divider && index < visibleDropdownActions.length - 1"
+          />
+        </template>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>