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

package/src/shadcn-ui/ui/tree/types.ts

@@ -0,0 +1,70 @@
+import type { Arrayable } from '@vueuse/core';
+import type { FlattenedItem } from 'reka-ui';
+
+import type { Recordable } from '@melt-js/libs-vben/typings';
+
+export interface TreeProps {
+  /** 单选时允许取消已有选项 */
+  allowClear?: boolean;
+  /** 非关联选择时，自动选中上级节点 */
+  autoCheckParent?: boolean;
+  /** 显示边框 */
+  bordered?: boolean;
+  /** 取消父子关联选择 */
+  checkStrictly?: boolean;
+  /** 子级字段名 */
+  childrenField?: string;
+  /** 默认展开的键 */
+  defaultExpandedKeys?: Array<number | string>;
+  /** 默认展开的级别（优先级高于defaultExpandedKeys） */
+  defaultExpandedLevel?: number;
+  /** 默认值 */
+  defaultValue?: Arrayable<number | string>;
+  /** 禁用 */
+  disabled?: boolean;
+  /** 禁用字段名 */
+  disabledField?: string;
+  /** 自定义节点类名 */
+  getNodeClass?: (item: FlattenedItem<Recordable<any>>) => string;
+  iconField?: string;
+  /** 返回值是否包含半选节点（默认 false，仅返回全选节点；true 则返回全选 ∪ 半选） */
+  includeIndeterminate?: boolean;
+  /** 取消勾选子节点时保持父节点的选中状态，不级联取消父节点（默认 false：级联取消） */
+  keepParentOnUncheck?: boolean;
+  /** label字段 */
+  labelField?: string;
+  /** 是否多选 */
+  multiple?: boolean;
+  /** 选择全部时的文字 */
+  selectAllLabel?: string;
+  /** 显示由iconField指定的图标 */
+  showIcon?: boolean;
+  /** 启用展开收缩动画 */
+  transition?: boolean;
+  /** 树数据 */
+  treeData: Recordable<any>[];
+  /** 值字段 */
+  valueField?: string;
+}
+
+export function treePropsDefaults() {
+  return {
+    allowClear: false,
+    autoCheckParent: true,
+    bordered: false,
+    checkStrictly: false,
+    defaultExpandedKeys: () => [],
+    defaultExpandedLevel: 0,
+    disabled: false,
+    disabledField: 'disabled',
+    iconField: 'icon',
+    labelField: 'label',
+    multiple: false,
+    showIcon: true,
+    transition: true,
+    includeIndeterminate: false,
+    keepParentOnUncheck: false,
+    valueField: 'value',
+    childrenField: 'children',
+  };
+}

package/src/styles/index.css

@@ -0,0 +1,9 @@
+/*
+ * 远程组件样式入口：
+ * - 复用 libs-vben 的 Tailwind 主题（含 layer 顺序、颜色变量、动画等）
+ * - 扫描 comps-vben 自身源码，生成组件用到的工具类
+ * Element Plus 的样式由宿主统一提供。
+ */
+@import '@melt-js/libs-vben/theme';
+
+@source '../src';

package/src/tabs-ui/components/index.ts

@@ -0,0 +1,2 @@
+export { default as TabsChrome } from './tabs-chrome/tabs.vue';
+export { default as Tabs } from './tabs/tabs.vue';

package/src/tabs-ui/components/tabs/tabs.vue

@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import type { TabDefinition } from '@melt-js/libs-vben/typings';
+
+import type { TabConfig, TabsProps } from '../../types';
+
+import { computed } from 'vue';
+
+import { Pin, X } from '@melt-js/libs-vben/core-icons';
+import { VbenContextMenu, VbenIcon } from '@melt-js/comps-vben/shadcn-ui';
+
+interface Props extends TabsProps {}
+
+defineOptions({
+  name: 'VbenTabs',
+
+  inheritAttrs: false,
+});
+const props = withDefaults(defineProps<Props>(), {
+  contentClass: 'vben-tabs-content',
+  contextMenus: () => [],
+  tabs: () => [],
+});
+
+const emit = defineEmits<{
+  close: [string];
+  unpin: [TabDefinition];
+}>();
+const active = defineModel<string | undefined>('active', {
+  default: undefined,
+});
+
+const typeWithClass = computed(() => {
+  const typeClasses: Record<string, { content: string }> = {
+    brisk: {
+      content: `h-full after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[1.5px] after:bg-primary after:scale-x-0 after:transition-[transform] after:ease-out after:duration-300 hover:after:scale-x-100 after:origin-left [&.is-active]:after:scale-x-100 [&:not(:first-child)]:border-l last:border-r last:border-r border-border`,
+    },
+    card: {
+      content:
+        'h-[calc(100%-6px)] rounded-md ml-2 border border-border  transition-all',
+    },
+    plain: {
+      content:
+        'h-full [&:not(:first-child)]:border-l last:border-r border-border',
+    },
+  };
+
+  return typeClasses[props.styleType || 'plain'] || { content: '' };
+});
+
+const tabsView = computed(() => {
+  return props.tabs.map((tab) => {
+    const { fullPath, meta, name, path, key } = tab || {};
+    const { affixTab, icon, newTabTitle, tabClosable, title } = meta || {};
+    return {
+      affixTab: !!affixTab,
+      closable: Reflect.has(meta, 'tabClosable') ? !!tabClosable : true,
+      fullPath,
+      icon: icon as string,
+      key,
+      meta,
+      name,
+      path,
+      title: (newTabTitle || title || name) as string,
+    } as TabConfig;
+  });
+});
+
+function onMouseDown(e: MouseEvent, tab: TabConfig) {
+  if (
+    e.button === 1 &&
+    tab.closable &&
+    !tab.affixTab &&
+    tabsView.value.length > 1 &&
+    props.middleClickToClose
+  ) {
+    e.preventDefault();
+    e.stopPropagation();
+    emit('close', tab.key);
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="contentClass"
+    class="relative flex! h-full w-max items-center overflow-hidden pr-6"
+  >
+    <TransitionGroup name="slide-left">
+      <div
+        v-for="(tab, i) in tabsView"
+        :key="tab.key"
+        :class="[
+          {
+            'is-active bg-primary/15 dark:bg-accent': tab.key === active,
+            draggable: !tab.affixTab,
+            'affix-tab': tab.affixTab,
+          },
+          typeWithClass.content,
+        ]"
+        :data-index="i"
+        class="group tab-item translate-all relative flex cursor-pointer select-none [&:not(.is-active)]:hover:bg-accent"
+        data-tab-item="true"
+        @click="active = tab.key"
+        @mousedown="onMouseDown($event, tab)"
+      >
+        <VbenContextMenu
+          :handler-data="tab"
+          :menus="contextMenus"
+          :modal="false"
+          item-class="pr-6"
+        >
+          <div class="relative flex size-full items-center">
+            <!-- extra -->
+            <div
+              class="absolute top-1/2 right-1.5 z-3 translate-y-[-50%] overflow-hidden"
+            >
+              <!-- close-icon -->
+              <X
+                v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
+                class="size-3 cursor-pointer rounded-full stroke-accent-foreground/80 transition-all group-[.is-active]:text-primary hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:dark:text-accent-foreground"
+                @click.stop="() => emit('close', tab.key)"
+              />
+              <Pin
+                v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
+                class="mt-px size-3.5 cursor-pointer rounded-full transition-all group-[.is-active]:text-primary hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:dark:text-accent-foreground"
+                @click.stop="() => emit('unpin', tab)"
+              />
+            </div>
+
+            <!-- tab-item-main -->
+            <div
+              class="mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 text-accent-foreground transition-all duration-300 group-[.is-active]:text-primary group-[.is-active]:dark:text-accent-foreground"
+            >
+              <VbenIcon
+                v-if="showIcon"
+                :icon="tab.icon"
+                class="mr-2 flex size-4 items-center overflow-hidden group-hover:animate-[shrink_0.3s_ease-in-out]"
+                fallback
+              />
+
+              <span class="flex-1 overflow-hidden text-sm whitespace-nowrap">
+                {{ tab.title }}
+              </span>
+            </div>
+          </div>
+        </VbenContextMenu>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>

package/src/tabs-ui/components/tabs-chrome/tabs.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import type { TabDefinition } from '@melt-js/libs-vben/typings';
+
+import type { TabConfig, TabsProps } from '../../types';
+
+import { computed, ref } from 'vue';
+
+import { Pin, X } from '@melt-js/libs-vben/core-icons';
+import { VbenContextMenu, VbenIcon } from '@melt-js/comps-vben/shadcn-ui';
+
+interface Props extends TabsProps {}
+
+defineOptions({
+  name: 'VbenTabsChrome',
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  contentClass: 'vben-tabs-content',
+  contextMenus: () => [],
+  gap: 7,
+  tabs: () => [],
+});
+
+const emit = defineEmits<{
+  close: [string];
+  unpin: [TabDefinition];
+}>();
+const active = defineModel<string | undefined>('active', {
+  default: undefined,
+});
+
+const contentRef = ref();
+const tabRef = ref();
+
+const style = computed(() => {
+  const { gap } = props;
+  return {
+    '--gap': `${gap}px`,
+  };
+});
+
+const tabsView = computed(() => {
+  return props.tabs.map((tab) => {
+    const { fullPath, meta, name, path, key } = tab || {};
+    const { affixTab, icon, newTabTitle, tabClosable, title } = meta || {};
+    return {
+      affixTab: !!affixTab,
+      closable: Reflect.has(meta, 'tabClosable') ? !!tabClosable : true,
+      fullPath,
+      icon: icon as string,
+      key,
+      meta,
+      name,
+      path,
+      title: (newTabTitle || title || name) as string,
+    } as TabConfig;
+  });
+});
+
+function onMouseDown(e: MouseEvent, tab: TabConfig) {
+  if (
+    e.button === 1 &&
+    tab.closable &&
+    !tab.affixTab &&
+    tabsView.value.length > 1 &&
+    props.middleClickToClose
+  ) {
+    e.preventDefault();
+    e.stopPropagation();
+    emit('close', tab.key);
+  }
+}
+</script>
+
+<template>
+  <div
+    ref="contentRef"
+    :class="contentClass"
+    :style="style"
+    class="tabs-chrome flex! h-full w-max overflow-y-hidden pr-6"
+  >
+    <TransitionGroup name="slide-left">
+      <div
+        v-for="(tab, i) in tabsView"
+        :key="tab.key"
+        ref="tabRef"
+        :class="[
+          {
+            'is-active': tab.key === active,
+            draggable: !tab.affixTab,
+            'affix-tab': tab.affixTab,
+          },
+        ]"
+        :data-active-tab="active"
+        :data-index="i"
+        class="draggable group tabs-chrome__item translate-all relative -mr-3 flex h-full items-center select-none"
+        data-tab-item="true"
+        @click="active = tab.key"
+        @mousedown="onMouseDown($event, tab)"
+      >
+        <VbenContextMenu
+          :handler-data="tab"
+          :menus="contextMenus"
+          :modal="false"
+          item-class="pr-6"
+        >
+          <div class="relative size-full px-1">
+            <!-- divider -->
+            <div
+              v-if="i !== 0 && tab.key !== active"
+              class="tabs-chrome__divider absolute top-1/2 left-(--gap) z-0 h-4 w-px translate-y-[-50%] bg-border transition-all"
+            ></div>
+            <!-- background -->
+            <div
+              class="tabs-chrome__background absolute z-[-1] size-full px-[calc(var(--gap)-1px)] py-0 transition-opacity duration-150"
+            >
+              <div
+                class="tabs-chrome__background-content h-full rounded-tl-(--gap) rounded-tr-(--gap) duration-150 group-[.is-active]:bg-primary/15 group-[.is-active]:dark:bg-accent"
+              ></div>
+              <svg
+                class="tabs-chrome__background-before absolute bottom-0 -left-px fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 group-[.is-active]:dark:fill-accent"
+                height="7"
+                width="7"
+              >
+                <path d="M 0 7 A 7 7 0 0 0 7 0 L 7 7 Z" />
+              </svg>
+              <svg
+                class="tabs-chrome__background-after absolute -right-px bottom-0 fill-transparent transition-all duration-150 group-[.is-active]:fill-primary/15 group-[.is-active]:dark:fill-accent"
+                height="7"
+                width="7"
+              >
+                <path d="M 0 0 A 7 7 0 0 0 7 7 L 0 7 Z" />
+              </svg>
+            </div>
+
+            <!-- extra -->
+            <div
+              class="tabs-chrome__extra absolute top-1/2 right-(--gap) z-3 size-4 translate-y-[-50%]"
+            >
+              <!-- close-icon -->
+              <X
+                v-show="!tab.affixTab && tabsView.length > 1 && tab.closable"
+                class="mt-0.5 size-3 cursor-pointer rounded-full stroke-accent-foreground/80 text-accent-foreground/80 transition-all group-[.is-active]:text-accent-foreground hover:bg-accent hover:stroke-accent-foreground"
+                @click.stop="() => emit('close', tab.key)"
+              />
+              <Pin
+                v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
+                class="mt-px size-3.5 cursor-pointer rounded-full text-accent-foreground/80 transition-all group-[.is-active]:text-accent-foreground hover:text-accent-foreground"
+                @click.stop="() => emit('unpin', tab)"
+              />
+            </div>
+
+            <!-- tab-item-main -->
+            <div
+              class="tabs-chrome__item-main z-2 mx-[calc(var(--gap)*2)] my-0 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-4 pl-2 text-accent-foreground duration-150 group-[.is-active]:text-primary group-[.is-active]:dark:text-accent-foreground"
+            >
+              <VbenIcon
+                v-if="showIcon"
+                :icon="tab.icon"
+                class="mr-1 flex size-4 items-center overflow-hidden group-hover:animate-[shrink_0.3s_ease-in-out]"
+              />
+
+              <span class="flex-1 overflow-hidden text-sm whitespace-nowrap">
+                {{ tab.title }}
+              </span>
+            </div>
+          </div>
+        </VbenContextMenu>
+      </div>
+    </TransitionGroup>
+  </div>
+</template>
+
+<style scoped>
+@reference "@melt-js/libs-vben/theme";
+
+.tabs-chrome__item:not(.dragging) {
+  @apply cursor-pointer;
+}
+
+.tabs-chrome__item:not(.dragging):hover:not(.is-active)
+  + .tabs-chrome__item
+  .tabs-chrome__divider {
+  @apply opacity-0;
+}
+
+.tabs-chrome__item:not(.dragging):hover:not(.is-active) .tabs-chrome__divider {
+  @apply opacity-0;
+}
+
+.tabs-chrome__item:not(.dragging):hover:not(.is-active)
+  .tabs-chrome__background {
+  @apply pb-0.5;
+}
+
+.tabs-chrome__item:not(.dragging):hover:not(.is-active)
+  .tabs-chrome__background-content {
+  @apply bg-accent mx-0.5 rounded-md;
+}
+
+.tabs-chrome__item:not(.dragging).is-active {
+  @apply z-[2];
+}
+
+.tabs-chrome__item:not(.dragging).is-active
+  + .tabs-chrome__item
+  .tabs-chrome__divider {
+  @apply opacity-0!;
+}
+</style>

package/src/tabs-ui/components/widgets/index.ts

@@ -0,0 +1,3 @@
+export { default as TabsToolMore } from './tool-more.vue';
+export { default as TabsToolRefresh } from './tool-refresh.vue';
+export { default as TabsToolScreen } from './tool-screen.vue';

package/src/tabs-ui/components/widgets/tool-more.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import type { DropdownMenuProps } from '@melt-js/comps-vben/shadcn-ui';
+
+import { LayoutGrid } from '@melt-js/libs-vben/core-icons';
+import { VbenDropdownMenu } from '@melt-js/comps-vben/shadcn-ui';
+
+defineProps<DropdownMenuProps>();
+</script>
+
+<template>
+  <VbenDropdownMenu :menus="menus" :modal="false">
+    <div
+      class="flex-center h-full cursor-pointer border-l border-border px-2 text-lg font-semibold text-muted-foreground hover:bg-muted hover:text-foreground"
+    >
+      <LayoutGrid class="size-4" />
+    </div>
+  </VbenDropdownMenu>
+</template>

package/src/tabs-ui/components/widgets/tool-refresh.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { RotateCw } from '@melt-js/libs-vben/core-icons';
+
+const emit = defineEmits(['refresh']);
+
+const handleRefresh = () => {
+  emit('refresh');
+};
+</script>
+
+<template>
+  <div
+    class="flex-center h-full cursor-pointer border-l border-border px-2 text-lg font-semibold text-muted-foreground hover:bg-muted hover:text-foreground"
+    @click="handleRefresh"
+  >
+    <RotateCw class="size-4" />
+  </div>
+</template>

package/src/tabs-ui/components/widgets/tool-screen.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { Fullscreen, Minimize2 } from '@melt-js/libs-vben/core-icons';
+
+const screen = defineModel<boolean>('screen');
+
+function toggleScreen() {
+  screen.value = !screen.value;
+}
+</script>
+
+<template>
+  <div
+    class="flex-center h-full cursor-pointer border-l border-border px-2 text-lg font-semibold text-muted-foreground hover:bg-muted hover:text-foreground"
+    @click="toggleScreen"
+  >
+    <Minimize2 v-if="screen" class="size-4" />
+    <Fullscreen v-else class="size-4" />
+  </div>
+</template>

package/src/tabs-ui/index.ts

@@ -0,0 +1,3 @@
+export * from './components/widgets';
+export { default as TabsView } from './tabs-view.vue';
+export type { IContextMenuItem } from '@melt-js/comps-vben/shadcn-ui';

package/src/tabs-ui/tabs-view.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { TabsEmits, TabsProps } from './types';
+
+import { useForwardPropsEmits } from '@melt-js/libs-vben/composables';
+import { ChevronsLeft, ChevronsRight } from '@melt-js/libs-vben/core-icons';
+import { VbenScrollbar } from '@melt-js/comps-vben/shadcn-ui';
+
+import { Tabs, TabsChrome } from './components';
+import { useTabsDrag } from './use-tabs-drag';
+import { useTabsViewScroll } from './use-tabs-view-scroll';
+
+interface Props extends TabsProps {}
+
+defineOptions({
+  name: 'TabsView',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  contentClass: 'vben-tabs-content',
+  draggable: true,
+  styleType: 'chrome',
+  wheelable: true,
+});
+
+const emit = defineEmits<TabsEmits>();
+
+const forward = useForwardPropsEmits(props, emit);
+
+const {
+  handleScrollAt,
+  handleWheel,
+  scrollbarRef,
+  scrollDirection,
+  scrollIsAtLeft,
+  scrollIsAtRight,
+  showScrollButton,
+} = useTabsViewScroll(props);
+
+function onWheel(e: WheelEvent) {
+  if (props.wheelable) {
+    handleWheel(e);
+    e.stopPropagation();
+    e.preventDefault();
+  }
+}
+
+useTabsDrag(props, emit);
+</script>
+
+<template>
+  <div class="flex h-full flex-1 overflow-hidden">
+    <!-- 左侧滚动按钮 -->
+    <span
+      v-show="showScrollButton"
+      :class="{
+        'cursor-pointer text-muted-foreground hover:bg-muted': !scrollIsAtLeft,
+        'pointer-events-none opacity-30': scrollIsAtLeft,
+      }"
+      class="border-r px-2"
+      @click="scrollDirection('left')"
+    >
+      <ChevronsLeft class="size-4 h-full" />
+    </span>
+
+    <div
+      :class="{
+        'pt-0.75': styleType === 'chrome',
+      }"
+      class="size-full flex-1 overflow-hidden"
+    >
+      <VbenScrollbar
+        ref="scrollbarRef"
+        :shadow-bottom="false"
+        :shadow-top="false"
+        class="h-full"
+        horizontal
+        scroll-bar-class="z-10 hidden "
+        shadow
+        shadow-left
+        shadow-right
+        @scroll-at="handleScrollAt"
+        @wheel="onWheel"
+      >
+        <TabsChrome
+          v-if="styleType === 'chrome'"
+          v-bind="{ ...forward, ...$attrs, ...$props }"
+        />
+
+        <Tabs v-else v-bind="{ ...forward, ...$attrs, ...$props }" />
+      </VbenScrollbar>
+    </div>
+
+    <!-- 右侧滚动按钮 -->
+    <span
+      v-show="showScrollButton"
+      :class="{
+        'cursor-pointer text-muted-foreground hover:bg-muted': !scrollIsAtRight,
+        'pointer-events-none opacity-30': scrollIsAtRight,
+      }"
+      class="cursor-pointer border-l px-2 text-muted-foreground hover:bg-muted"
+      @click="scrollDirection('right')"
+    >
+      <ChevronsRight class="size-4 h-full" />
+    </span>
+  </div>
+</template>

package/src/tabs-ui/types.ts

@@ -0,0 +1,73 @@
+import type { IContextMenuItem } from '@melt-js/comps-vben/shadcn-ui';
+import type { TabDefinition, TabsStyleType } from '@melt-js/libs-vben/typings';
+
+export type TabsEmits = {
+  close: [string];
+  sortTabs: [number, number];
+  unpin: [TabDefinition];
+};
+
+export interface TabsProps {
+  active?: string;
+  /**
+   * @zh_CN content class
+   * @default tabs-chrome
+   */
+  contentClass?: string;
+  /**
+   * @zh_CN 右键菜单
+   */
+  contextMenus?: (data: any) => IContextMenuItem[];
+  /**
+   * @zh_CN 是否可以拖拽
+   */
+  draggable?: boolean;
+  /**
+   * @zh_CN 间隙
+   * @default 7
+   * 仅限 tabs-chrome
+   */
+  gap?: number;
+  /**
+   * @zh_CN tab 最大宽度
+   * 仅限 tabs-chrome
+   */
+  maxWidth?: number;
+  /**
+   * @zh_CN 点击中键时关闭Tab
+   */
+  middleClickToClose?: boolean;
+
+  /**
+   * @zh_CN tab最小宽度
+   * 仅限 tabs-chrome
+   */
+  minWidth?: number;
+
+  /**
+   * @zh_CN 是否显示图标
+   */
+  showIcon?: boolean;
+  /**
+   * @zh_CN 标签页风格
+   */
+  styleType?: TabsStyleType;
+
+  /**
+   * @zh_CN 选项卡数据
+   */
+  tabs?: TabDefinition[];
+
+  /**
+   * @zh_CN 是否响应滚轮事件
+   */
+  wheelable?: boolean;
+}
+
+export interface TabConfig extends TabDefinition {
+  affixTab: boolean;
+  closable: boolean;
+  icon: string;
+  key: string;
+  title: string;
+}