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

package/src/popup-ui/modal/use-modal.ts

@@ -0,0 +1,222 @@
+import type { Component } from 'vue';
+
+import type {
+  ExtendedModalApi,
+  InferModalData,
+  ModalApiOptions,
+  ModalProps,
+} from './modal';
+
+import {
+  defineComponent,
+  h,
+  inject,
+  markRaw,
+  nextTick,
+  onBeforeUnmount,
+  provide,
+  ref,
+  shallowReactive,
+} from 'vue';
+
+import { usePreferences } from '@melt-js/libs-vben/core-preferences';
+import { useSelector } from '@melt-js/libs-vben/shared/store';
+
+import { ModalApi } from './modal-api';
+import VbenModal from './modal.vue';
+
+const USER_MODAL_INJECT_KEY = Symbol('VBEN_MODAL_INJECT');
+
+declare const MODAL_DATA_NOT_PROVIDED: unique symbol;
+
+type ModalDataNotProvided = {
+  readonly [MODAL_DATA_NOT_PROVIDED]: true;
+};
+
+type ResolvedModalData<
+  TData,
+  TConnectedComponent extends Component,
+> = TData extends ModalDataNotProvided
+  ? InferModalData<TConnectedComponent>
+  : TData;
+
+interface ModalInjectData<TData> {
+  consumed?: boolean;
+  extendApi?: (api: ExtendedModalApi<TData>) => void;
+  options?: ModalApiOptions;
+  reCreateModal?: () => Promise<void>;
+}
+
+const { globalEscapeShortcutKey } = usePreferences();
+/**
+ * 默认配置
+ */
+const DEFAULT_MODAL_PROPS: Partial<ModalProps> = {};
+
+export function setDefaultModalProps(props: Partial<ModalProps>) {
+  Object.assign(DEFAULT_MODAL_PROPS, props);
+}
+
+export function useVbenModal<
+  TData = ModalDataNotProvided,
+  TConnectedComponent extends Component = Component,
+>(options: ModalApiOptions<TConnectedComponent> = {}) {
+  type TResolvedData = ResolvedModalData<TData, TConnectedComponent>;
+
+  // Modal一般会抽离出来，所以如果有传入 connectedComponent，则表示为外部调用，与内部组件进行连接
+  // 外部的Modal通过provide/inject传递api
+
+  const defaultOptions = {
+    closeOnPressEscape: globalEscapeShortcutKey.value, // 全局Esc快捷键配置
+    ...options,
+  };
+  const { connectedComponent } = options;
+  if (connectedComponent) {
+    const extendedApi = shallowReactive({}) as ExtendedModalApi<TResolvedData>;
+    const isModalReady = ref(true);
+    const Modal = defineComponent(
+      (props: ModalProps, { attrs, slots }) => {
+        function rebindApi(api: ExtendedModalApi<TResolvedData>) {
+          Object.setPrototypeOf(extendedApi, markRaw(api));
+        }
+
+        provide(USER_MODAL_INJECT_KEY, {
+          extendApi: rebindApi,
+          consumed: false,
+          options: defaultOptions,
+          async reCreateModal() {
+            isModalReady.value = false;
+            await nextTick();
+            isModalReady.value = true;
+          },
+        });
+        void checkProps(extendedApi, {
+          ...props,
+          ...attrs,
+          ...slots,
+        });
+        return () =>
+          h(
+            isModalReady.value ? connectedComponent : 'div',
+            {
+              ...props,
+              ...attrs,
+            },
+            slots,
+          );
+      },
+      // eslint-disable-next-line vue/one-component-per-file
+      {
+        name: 'VbenParentModal',
+        inheritAttrs: false,
+      },
+    );
+
+    return [Modal, extendedApi] as const;
+  }
+
+  const injectData = inject<ModalInjectData<TResolvedData>>(
+    USER_MODAL_INJECT_KEY,
+    {},
+  );
+  const isConsumed = injectData.consumed;
+  const effectiveOptions = isConsumed ? {} : injectData.options;
+  if (!isConsumed && injectData.consumed !== undefined) {
+    injectData.consumed = true;
+  }
+  onBeforeUnmount(() => {
+    if (!isConsumed && injectData.consumed !== undefined) {
+      injectData.consumed = false;
+    }
+  });
+
+  const mergedOptions = {
+    ...DEFAULT_MODAL_PROPS,
+    ...effectiveOptions,
+    ...defaultOptions,
+  } as ModalApiOptions;
+
+  mergedOptions.onOpenChange = (isOpen: boolean) => {
+    options.onOpenChange?.(isOpen);
+    if (!isConsumed) {
+      injectData.options?.onOpenChange?.(isOpen);
+    }
+  };
+
+  const onClosed = mergedOptions.onClosed;
+  mergedOptions.onClosed = () => {
+    onClosed?.();
+    if (mergedOptions.destroyOnClose && !isConsumed) {
+      if (injectData.consumed !== undefined) {
+        injectData.consumed = false;
+      }
+      void injectData.reCreateModal?.();
+    }
+  };
+
+  const api = new ModalApi<TResolvedData>(mergedOptions);
+
+  const extendedApi = api as ExtendedModalApi<TResolvedData>;
+
+  extendedApi.useStore = (selector) => {
+    return useSelector(api.store, selector);
+  };
+
+  const Modal = defineComponent(
+    (props: ModalProps, { attrs, slots }) => {
+      return () =>
+        h(
+          VbenModal,
+          {
+            ...props,
+            ...attrs,
+            modalApi: extendedApi,
+          },
+          slots,
+        );
+    },
+    // eslint-disable-next-line vue/one-component-per-file
+    {
+      name: 'VbenModal',
+      inheritAttrs: false,
+    },
+  );
+  injectData.extendApi?.(extendedApi);
+
+  return [Modal, extendedApi] as const;
+}
+
+export function createVbenModal<TData = unknown>() {
+  return function useTypedVbenModal<
+    TConnectedComponent extends Component = Component,
+  >(options: ModalApiOptions<TConnectedComponent> = {}) {
+    return useVbenModal<TData, TConnectedComponent>(options);
+  };
+}
+
+async function checkProps<TData>(
+  api: ExtendedModalApi<TData>,
+  attrs: Record<string, any>,
+) {
+  if (!attrs || Object.keys(attrs).length === 0) {
+    return;
+  }
+  await nextTick();
+
+  const state = api?.store?.state;
+
+  if (!state) {
+    return;
+  }
+
+  const stateKeys = new Set(Object.keys(state));
+
+  for (const attr of Object.keys(attrs)) {
+    if (stateKeys.has(attr) && !['class'].includes(attr)) {
+      // connectedComponent存在时，不要传入Modal的props，会造成复杂度提升，如果你需要修改Modal的props，请使用 useModal 或者api
+      console.warn(
+        `[Vben Modal]: When 'connectedComponent' exists, do not set props or slots '${attr}', which will increase complexity. If you need to modify the props of Modal, please use useVbenModal or api.`,
+      );
+    }
+  }
+}

package/src/shadcn-ui/assets/index.css

@@ -0,0 +1 @@
+@reference "@melt-js/libs-vben/theme";

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

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type {
+  AvatarFallbackProps,
+  AvatarImageProps,
+  AvatarRootProps,
+} from 'reka-ui';
+
+import type { CSSProperties } from 'vue';
+
+import type { ClassType } from '@melt-js/libs-vben/typings';
+
+import { computed } from 'vue';
+
+import { Avatar, AvatarFallback, AvatarImage } from '../../ui';
+
+interface Props extends AvatarFallbackProps, AvatarImageProps, AvatarRootProps {
+  alt?: string;
+  class?: ClassType;
+  dot?: boolean;
+  dotClass?: ClassType;
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+  size?: number;
+}
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  alt: 'avatar',
+  as: 'button',
+  dot: false,
+  dotClass: 'bg-green-500',
+  fit: 'cover',
+});
+
+const imageStyle = computed<CSSProperties>(() => {
+  const { fit } = props;
+  if (fit) {
+    return { objectFit: fit };
+  }
+  return {};
+});
+
+const text = computed(() => {
+  return props.alt.slice(-2).toUpperCase();
+});
+
+const rootStyle = computed(() => {
+  return props.size !== undefined && props.size > 0
+    ? {
+        height: `${props.size}px`,
+        width: `${props.size}px`,
+      }
+    : {};
+});
+</script>
+
+<template>
+  <div
+    :class="props.class"
+    :style="rootStyle"
+    class="relative flex shrink-0 items-center"
+  >
+    <Avatar :class="props.class" class="size-full">
+      <AvatarImage :alt="alt" :src="src" :style="imageStyle" />
+      <AvatarFallback>{{ text }}</AvatarFallback>
+    </Avatar>
+    <span
+      v-if="dot"
+      :class="dotClass"
+      class="border-background absolute right-0 bottom-0 size-3 rounded-full border-2"
+    >
+    </span>
+  </div>
+</template>

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

@@ -0,0 +1 @@
+export { default as VbenAvatar } from './avatar.vue';

package/src/shadcn-ui/components/back-top/back-top.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import type { BacktopProps } from './backtop';
+
+import { computed } from 'vue';
+
+import { ArrowUpToLine } from '@melt-js/libs-vben/core-icons';
+
+import { VbenButton } from '../button';
+import { useBackTop } from './use-backtop';
+
+interface Props extends BacktopProps {}
+
+defineOptions({ name: 'BackTop' });
+
+const props = withDefaults(defineProps<Props>(), {
+  bottom: 20,
+  isGroup: false,
+  right: 24,
+  target: '',
+  visibilityHeight: 200,
+});
+
+const backTopStyle = computed(() => ({
+  bottom: `${props.bottom}px`,
+  right: `${props.right}px`,
+}));
+
+const { handleClick, visible } = useBackTop(props);
+</script>
+<template>
+  <transition name="fade-down">
+    <VbenButton
+      v-if="visible"
+      :style="backTopStyle"
+      class="data z-popup bg-background shadow-float hover:bg-heavy dark:bg-accent dark:hover:bg-heavy fixed bottom-10 size-10 rounded-full duration-500"
+      size="icon"
+      variant="ghost"
+      @click="handleClick"
+    >
+      <ArrowUpToLine class="size-4" />
+    </VbenButton>
+  </transition>
+</template>

package/src/shadcn-ui/components/back-top/backtop.ts

@@ -0,0 +1,38 @@
+export const backtopProps = {
+  /**
+   * @zh_CN bottom distance.
+   */
+  bottom: {
+    default: 40,
+    type: Number,
+  },
+  /**
+   * @zh_CN right distance.
+   */
+  right: {
+    default: 40,
+    type: Number,
+  },
+  /**
+   * @zh_CN the target to trigger scroll.
+   */
+  target: {
+    default: '',
+    type: String,
+  },
+  /**
+   * @zh_CN the button will not show until the scroll height reaches this value.
+   */
+  visibilityHeight: {
+    default: 200,
+    type: Number,
+  },
+} as const;
+
+export interface BacktopProps {
+  bottom?: number;
+  isGroup?: boolean;
+  right?: number;
+  target?: string;
+  visibilityHeight?: number;
+}

package/src/shadcn-ui/components/back-top/index.ts

@@ -0,0 +1 @@
+export { default as VbenBackTop } from './back-top.vue';

package/src/shadcn-ui/components/back-top/use-backtop.ts

@@ -0,0 +1,45 @@
+import type { BacktopProps } from './backtop';
+
+import { onMounted, ref, shallowRef } from 'vue';
+
+import { useEventListener, useThrottleFn } from '@vueuse/core';
+
+export const useBackTop = (props: BacktopProps) => {
+  const el = shallowRef<HTMLElement>();
+  const container = shallowRef<Document | HTMLElement>();
+  const visible = ref(false);
+
+  const handleScroll = () => {
+    if (el.value) {
+      visible.value = el.value.scrollTop >= (props?.visibilityHeight ?? 0);
+    }
+  };
+
+  const handleClick = () => {
+    el.value?.scrollTo({ behavior: 'smooth', top: 0 });
+  };
+
+  const handleScrollThrottled = useThrottleFn(handleScroll, 300, true);
+
+  useEventListener(container, 'scroll', handleScrollThrottled);
+  onMounted(() => {
+    container.value = document;
+    el.value = document.documentElement;
+
+    if (props.target) {
+      el.value = document.querySelector<HTMLElement>(props.target) ?? undefined;
+
+      if (!el.value) {
+        throw new Error(`target does not exist: ${props.target}`);
+      }
+      container.value = el.value;
+    }
+    // Give visible an initial value, fix #13066
+    handleScroll();
+  });
+
+  return {
+    handleClick,
+    visible,
+  };
+};

package/src/shadcn-ui/components/breadcrumb/breadcrumb-background.vue

@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import type { BreadcrumbProps } from './types';
+
+import { VbenIcon } from '../icon';
+
+interface Props extends BreadcrumbProps {}
+
+defineOptions({ name: 'Breadcrumb' });
+const { breadcrumbs, showIcon } = defineProps<Props>();
+
+const emit = defineEmits<{ select: [string] }>();
+
+function handleClick(index: number, path?: string) {
+  if (!path || index === breadcrumbs.length - 1) {
+    return;
+  }
+  emit('select', path);
+}
+</script>
+<template>
+  <ul class="flex">
+    <TransitionGroup name="breadcrumb-transition">
+      <template
+        v-for="(item, index) in breadcrumbs"
+        :key="`${item.path}-${item.title}-${index}`"
+      >
+        <li>
+          <a
+            href="javascript:void 0"
+            @click.stop="handleClick(index, item.path)"
+          >
+            <span class="flex-center z-10 h-full">
+              <VbenIcon
+                v-if="showIcon"
+                :icon="item.icon"
+                class="mr-1 size-4 shrink-0"
+              />
+              <span
+                :class="{
+                  'text-foreground font-normal':
+                    index === breadcrumbs.length - 1,
+                }"
+                >{{ item.title }}
+              </span>
+            </span>
+          </a>
+        </li>
+      </template>
+    </TransitionGroup>
+  </ul>
+</template>
+<style scoped>
+@reference "@melt-js/libs-vben/theme";
+
+li {
+  @apply h-7;
+}
+
+li a {
+  @apply bg-accent text-muted-foreground relative mr-9 flex h-7 items-center py-0 pr-2 pl-1.25 text-[13px];
+}
+
+li a > span {
+  @apply -ml-3;
+}
+
+li:first-child a > span {
+  @apply -ml-1;
+}
+
+li:first-child a {
+  @apply rounded-l-sm pl-3.75;
+}
+
+li:first-child a::before {
+  @apply border-none;
+}
+
+li:last-child a {
+  @apply rounded-r-sm pr-3.75;
+}
+
+li:last-child a::after {
+  @apply border-none;
+}
+
+li a::before,
+li a::after {
+  @apply border-accent absolute top-0 h-0 w-0 border-14 border-solid content-[''];
+}
+
+li a::before {
+  @apply -left-7 z-10 border-l-transparent;
+}
+
+li a::after {
+  @apply border-l-accent left-full border-transparent;
+}
+
+li:not(:last-child) a:hover {
+  @apply bg-accent-hover;
+}
+
+li:not(:last-child) a:hover::before {
+  @apply border-accent-hover border-l-transparent;
+}
+
+li:not(:last-child) a:hover::after {
+  @apply border-l-accent-hover;
+}
+</style>

package/src/shadcn-ui/components/breadcrumb/breadcrumb-view.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { BreadcrumbProps } from './types';
+
+import { useForwardPropsEmits } from 'reka-ui';
+
+import BreadcrumbBackground from './breadcrumb-background.vue';
+import Breadcrumb from './breadcrumb.vue';
+
+interface Props extends BreadcrumbProps {
+  class?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const emit = defineEmits<{ select: [string] }>();
+
+const forward = useForwardPropsEmits(props, emit);
+</script>
+<template>
+  <Breadcrumb
+    v-if="styleType === 'normal'"
+    v-bind="forward"
+    class="vben-breadcrumb"
+  />
+  <BreadcrumbBackground
+    v-if="styleType === 'background'"
+    v-bind="forward"
+    class="vben-breadcrumb"
+  />
+</template>
+<style lang="scss" scoped>
+/** 修复全局引入Antd时，ol和ul的默认样式会被修改的问题 */
+.vben-breadcrumb {
+  :deep(ol),
+  :deep(ul) {
+    margin-bottom: 0;
+  }
+}
+</style>

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

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import type { BreadcrumbProps } from './types';
+
+import { ChevronDown } from '@melt-js/libs-vben/core-icons';
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../../ui';
+import { VbenIcon } from '../icon';
+
+interface Props extends BreadcrumbProps {}
+
+defineOptions({ name: 'Breadcrumb' });
+withDefaults(defineProps<Props>(), {
+  showIcon: false,
+});
+
+const emit = defineEmits<{ select: [string] }>();
+
+function handleClick(path?: string) {
+  if (!path) {
+    return;
+  }
+  emit('select', path);
+}
+</script>
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <TransitionGroup name="breadcrumb-transition">
+        <template
+          v-for="(item, index) in breadcrumbs"
+          :key="`${item.path}-${item.title}-${index}`"
+        >
+          <BreadcrumbItem>
+            <div v-if="item.items?.length ?? 0 > 0">
+              <DropdownMenu>
+                <DropdownMenuTrigger class="flex items-center gap-1">
+                  <VbenIcon v-if="showIcon" :icon="item.icon" class="size-5" />
+                  {{ item.title }}
+                  <ChevronDown class="size-4" />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="start">
+                  <template
+                    v-for="menuItem in item.items"
+                    :key="`sub-${menuItem.path}`"
+                  >
+                    <DropdownMenuItem @click.stop="handleClick(menuItem.path)">
+                      {{ menuItem.title }}
+                    </DropdownMenuItem>
+                  </template>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+            <BreadcrumbLink
+              v-else-if="index !== breadcrumbs.length - 1"
+              href="javascript:void 0"
+              @click.stop="handleClick(item.path)"
+            >
+              <div class="flex-center">
+                <VbenIcon
+                  v-if="showIcon"
+                  :class="{ 'size-5': item.isHome }"
+                  :icon="item.icon"
+                  class="mr-1 size-4"
+                />
+                {{ item.title }}
+              </div>
+            </BreadcrumbLink>
+            <BreadcrumbPage v-else>
+              <div class="flex-center">
+                <VbenIcon
+                  v-if="showIcon"
+                  :class="{ 'size-5': item.isHome }"
+                  :icon="item.icon"
+                  class="mr-1 size-4"
+                />
+                {{ item.title }}
+              </div>
+            </BreadcrumbPage>
+            <BreadcrumbSeparator
+              v-if="index < breadcrumbs.length - 1 && !item.isHome"
+            />
+          </BreadcrumbItem>
+        </template>
+      </TransitionGroup>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>

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

@@ -0,0 +1,3 @@
+export { default as VbenBreadcrumbView } from './breadcrumb-view.vue';
+
+export type * from './types';