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

package/src/shadcn-ui/components/dropdown-menu/dropdown-menu.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type {
+  DropdownMenuProps,
+  VbenDropdownMenuItem as IDropdownMenuItem,
+} from './interface';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../ui';
+
+interface Props extends DropdownMenuProps {}
+
+defineOptions({ name: 'DropdownMenu' });
+const props = withDefaults(defineProps<Props>(), {});
+
+function handleItemClick(menu: IDropdownMenuItem) {
+  if (menu.disabled) {
+    return;
+  }
+  menu?.handler?.(props);
+}
+</script>
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger class="flex h-full items-center gap-1">
+      <slot></slot>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="start">
+      <DropdownMenuGroup>
+        <template v-for="menu in menus" :key="menu.value">
+          <DropdownMenuItem
+            :disabled="menu.disabled"
+            class="text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground mb-1 cursor-pointer"
+            @click="handleItemClick(menu)"
+          >
+            <component :is="menu.icon" v-if="menu.icon" class="mr-2 size-4" />
+            {{ menu.label }}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator v-if="menu.separator" class="bg-border" />
+        </template>
+      </DropdownMenuGroup>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

package/src/shadcn-ui/components/dropdown-menu/dropdown-radio-menu.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import type { DropdownMenuProps } from './interface';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../../ui';
+
+interface Props extends DropdownMenuProps {}
+
+defineOptions({ name: 'DropdownRadioMenu' });
+withDefaults(defineProps<Props>(), {});
+
+const modelValue = defineModel<string>();
+
+function handleItemClick(value: string) {
+  modelValue.value = value;
+}
+</script>
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child class="flex items-center gap-1">
+      <slot></slot>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="start">
+      <DropdownMenuGroup>
+        <template v-for="menu in menus" :key="menu.value">
+          <DropdownMenuItem
+            :class="
+              menu.value === modelValue
+                ? 'bg-accent text-accent-foreground'
+                : ''
+            "
+            class="text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground mb-1 cursor-pointer"
+            @click="handleItemClick(menu.value)"
+          >
+            <component :is="menu.icon" v-if="menu.icon" class="mr-2 size-4" />
+            <span
+              v-if="!menu.icon"
+              :class="menu.value === modelValue ? 'bg-foreground' : ''"
+              class="mr-2 size-1.5 rounded-full"
+            ></span>
+            {{ menu.label }}
+          </DropdownMenuItem>
+        </template>
+      </DropdownMenuGroup>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

package/src/shadcn-ui/components/dropdown-menu/index.ts

@@ -0,0 +1,4 @@
+export { default as VbenDropdownMenu } from './dropdown-menu.vue';
+export { default as VbenDropdownRadioMenu } from './dropdown-radio-menu.vue';
+
+export type * from './interface';

package/src/shadcn-ui/components/dropdown-menu/interface.ts

@@ -0,0 +1,32 @@
+import type { Component } from 'vue';
+
+interface VbenDropdownMenuItem {
+  disabled?: boolean;
+  /**
+   * @zh_CN 点击事件处理
+   * @param data
+   */
+  handler?: (data: any) => void;
+  /**
+   * @zh_CN 图标
+   */
+  icon?: Component;
+  /**
+   * @zh_CN 标题
+   */
+  label: string;
+  /**
+   * @zh_CN 是否是分割线
+   */
+  separator?: boolean;
+  /**
+   * @zh_CN 唯一标识
+   */
+  value: string;
+}
+
+interface DropdownMenuProps {
+  menus: VbenDropdownMenuItem[];
+}
+
+export type { DropdownMenuProps, VbenDropdownMenuItem };

package/src/shadcn-ui/components/expandable-arrow/expandable-arrow.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { ChevronDown } from '@melt-js/libs-vben/core-icons';
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+const props = defineProps<{
+  class?: string;
+}>();
+
+// 控制箭头展开/收起状态
+const collapsed = defineModel<boolean>({ default: false });
+</script>
+
+<template>
+  <div
+    :class="cn('vben-link inline-flex items-center', props.class)"
+    @click="collapsed = !collapsed"
+  >
+    <slot :is-expanded="collapsed">
+      {{ collapsed }}
+      <!-- <span>{{ isExpanded ? '收起' : '展开' }}</span> -->
+    </slot>
+    <div
+      :class="{ 'rotate-180': !collapsed }"
+      class="transition-transform duration-300"
+    >
+      <slot name="icon">
+        <ChevronDown class="size-4" />
+      </slot>
+    </div>
+  </div>
+</template>

package/src/shadcn-ui/components/expandable-arrow/index.ts

@@ -0,0 +1 @@
+export { default as VbenExpandableArrow } from './expandable-arrow.vue';

package/src/shadcn-ui/components/full-screen/full-screen.vue

@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { Maximize, Minimize } from '@melt-js/libs-vben/core-icons';
+
+import { useFullscreen } from '@vueuse/core';
+
+import { VbenIconButton } from '../button';
+
+defineOptions({ name: 'FullScreen' });
+
+withDefaults(
+  defineProps<{
+    tooltip?: string;
+  }>(),
+  {
+    tooltip: '',
+  },
+);
+
+const { isFullscreen, toggle } = useFullscreen();
+
+// 重新检查全屏状态
+isFullscreen.value = !!(
+  document.fullscreenElement ||
+  // @ts-expect-error - vendor fullscreen APIs are not included in the standard DOM typings
+  document.webkitFullscreenElement ||
+  // @ts-expect-error - vendor fullscreen APIs are not included in the standard DOM typings
+  document.mozFullScreenElement ||
+  // @ts-expect-error - vendor fullscreen APIs are not included in the standard DOM typings
+  document.msFullscreenElement
+);
+</script>
+<template>
+  <VbenIconButton
+    :tooltip="tooltip || undefined"
+    class="hover:animate-[shrink_0.3s_ease-in-out]"
+    @click="toggle"
+  >
+    <Minimize v-if="isFullscreen" class="text-foreground size-4" />
+    <Maximize v-else class="text-foreground size-4" />
+  </VbenIconButton>
+</template>

package/src/shadcn-ui/components/full-screen/index.ts

@@ -0,0 +1 @@
+export { default as VbenFullScreen } from './full-screen.vue';

package/src/shadcn-ui/components/hover-card/hover-card.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type {
+  HoverCardContentProps,
+  HoverCardRootEmits,
+  HoverCardRootProps,
+} from 'reka-ui';
+
+import type { ClassType } from '@melt-js/libs-vben/typings';
+
+import { computed } from 'vue';
+
+import { useForwardPropsEmits } from 'reka-ui';
+
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '../../ui';
+
+interface Props extends HoverCardRootProps {
+  class?: ClassType;
+  contentClass?: ClassType;
+  contentProps?: HoverCardContentProps;
+}
+
+const props = defineProps<Props>();
+
+const emits = defineEmits<HoverCardRootEmits>();
+
+const delegatedProps = computed(() => {
+  const {
+    class: _cls,
+    contentClass: _,
+    contentProps: _cProps,
+    ...delegated
+  } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <HoverCard v-bind="forwarded">
+    <HoverCardTrigger as-child class="h-full">
+      <div class="h-full cursor-pointer">
+        <slot name="trigger"></slot>
+      </div>
+    </HoverCardTrigger>
+    <HoverCardContent
+      :class="contentClass"
+      v-bind="contentProps"
+      class="side-content z-popup"
+    >
+      <slot></slot>
+    </HoverCardContent>
+  </HoverCard>
+</template>

package/src/shadcn-ui/components/hover-card/index.ts

@@ -0,0 +1,2 @@
+export { default as VbenHoverCard } from './hover-card.vue';
+export type { HoverCardContentProps } from 'reka-ui';

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+import { computed } from 'vue';
+
+import { IconDefault, IconifyIcon } from '@melt-js/libs-vben/core-icons';
+import {
+  isFunction,
+  isHttpUrl,
+  isObject,
+  isString,
+} from '@melt-js/libs-vben/shared/utils';
+
+const props = defineProps<{
+  // 没有是否显示默认图标
+  fallback?: boolean;
+  icon?: Component | Function | string;
+}>();
+
+const isRemoteIcon = computed(() => {
+  return isString(props.icon) && isHttpUrl(props.icon);
+});
+
+const isComponent = computed(() => {
+  const { icon } = props;
+  return !isString(icon) && (isObject(icon) || isFunction(icon));
+});
+</script>
+
+<template>
+  <component :is="icon as Component" v-if="isComponent" v-bind="$attrs" />
+  <img v-else-if="isRemoteIcon" :src="icon as string" v-bind="$attrs" />
+  <IconifyIcon v-else-if="icon" v-bind="$attrs" :icon="icon as string" />
+  <IconDefault v-else-if="fallback" v-bind="$attrs" />
+</template>

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

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

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

@@ -0,0 +1,26 @@
+export * from './avatar';
+export * from './back-top';
+export * from './breadcrumb';
+export * from './button';
+export * from './checkbox';
+export * from './collapsible';
+export * from './context-menu';
+export * from './count-to-animator';
+export * from './descriptions';
+export * from './dropdown-menu';
+export * from './expandable-arrow';
+export * from './full-screen';
+export * from './hover-card';
+export * from './icon';
+export * from './input-password';
+export * from './logo';
+export * from './pin-input';
+export * from './popover';
+export * from './render-content';
+export * from './scrollbar';
+export * from './segmented';
+export * from './select';
+export * from './spine-text';
+export * from './spinner';
+export * from './table-action';
+export * from './tooltip';

package/src/shadcn-ui/components/input-password/index.ts

@@ -0,0 +1 @@
+export { default as VbenInputPassword } from './input-password.vue';

package/src/shadcn-ui/components/input-password/input-password.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref, useSlots } from 'vue';
+
+import { Eye, EyeOff } from '@melt-js/libs-vben/core-icons';
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { Input } from '../../ui';
+import PasswordStrength from './password-strength.vue';
+
+interface Props {
+  class?: any;
+  /**
+   * 是否显示密码强度
+   */
+  passwordStrength?: boolean;
+}
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps<Props>();
+
+const modelValue = defineModel<string>();
+
+const slots = useSlots();
+
+const show = ref(false);
+</script>
+
+<template>
+  <div class="relative w-full">
+    <Input
+      v-bind="$attrs"
+      v-model="modelValue"
+      :class="cn(props.class)"
+      :type="show ? 'text' : 'password'"
+    />
+    <template v-if="passwordStrength">
+      <PasswordStrength :password="modelValue" />
+      <p v-if="slots.strengthText" class="text-muted-foreground mt-1.5 text-xs">
+        <slot name="strengthText"> </slot>
+      </p>
+    </template>
+    <div
+      :class="{
+        'top-3': !!passwordStrength,
+        'top-1/2 -translate-y-1/2 items-center': !passwordStrength,
+      }"
+      class="text-foreground/60 hover:text-foreground absolute inset-y-0 right-0 flex cursor-pointer pr-3 text-lg leading-5"
+      @click="show = !show"
+    >
+      <Eye v-if="show" class="size-4" />
+      <EyeOff v-else class="size-4" />
+    </div>
+  </div>
+</template>

package/src/shadcn-ui/components/input-password/password-strength.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<{ password?: string }>(), {
+  password: '',
+});
+
+const strengthList: string[] = [
+  '',
+  '#e74242',
+  '#ED6F6F',
+  '#EFBD47',
+  '#55D18780',
+  '#55D187',
+];
+
+const currentStrength = computed(() => {
+  return checkPasswordStrength(props.password);
+});
+
+const currentColor = computed(() => {
+  return strengthList[currentStrength.value];
+});
+
+/**
+ * Check the strength of a password
+ */
+function checkPasswordStrength(password: string) {
+  let strength = 0;
+
+  // Check length
+  if (password.length >= 8) strength++;
+
+  // Check for lowercase letters
+  if (/[a-z]/.test(password)) strength++;
+
+  // Check for uppercase letters
+  if (/[A-Z]/.test(password)) strength++;
+
+  // Check for numbers
+  if (/\d/.test(password)) strength++;
+
+  // Check for special characters
+  if (/[^\da-z]/i.test(password)) strength++;
+
+  return strength;
+}
+</script>
+
+<template>
+  <div class="relative mt-2 flex items-center justify-between">
+    <template v-for="index in 5" :key="index">
+      <div
+        class="bg-heavy dark:bg-input-background relative mr-1 h-1.5 w-1/5 rounded-sm last:mr-0"
+      >
+        <span
+          :style="{
+            backgroundColor: currentColor,
+            width: currentStrength >= index ? '100%' : '',
+          }"
+          class="absolute left-0 h-full w-0 rounded-sm transition-all duration-500"
+        ></span>
+      </div>
+    </template>
+  </div>
+</template>

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

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

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

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { VbenAvatar } from '../avatar';
+
+interface Props {
+  /**
+   * @zh_CN 是否收起文本；布局状态，侧边栏收起时隐藏文字。
+   */
+  collapsed?: boolean;
+  /**
+   * @zh_CN Logo 图片适应方式
+   */
+  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+  /**
+   * @zh_CN logo高度， 只在 logoMode=full时生效
+   */
+  fullLogoHeight?: number | string;
+  /**
+   * @zh_CN Logo 跳转地址
+   */
+  href?: string;
+  /**
+   * @zh_CN logo 展示类型，icon 图标模式， full 铺满logo区域
+   */
+  logoMode?: 'full' | 'icon';
+  /**
+   * @zh_CN Logo 图片大小
+   */
+  logoSize?: number;
+  /**
+   * @zh_CN Logo 是否展示文本
+   */
+  showText?: boolean;
+  /**
+   * @zh_CN Logo 图标
+   */
+  src?: string;
+  /**
+   * @zh_CN 暗色主题 Logo 图标 (可选，若不设置则使用 src)
+   */
+  srcDark?: string;
+
+  /**
+   * @zh_CN Logo 文本
+   */
+  text: string;
+
+  /**
+   * @zh_CN Logo 主题
+   */
+  theme?: string;
+}
+
+defineOptions({
+  name: 'VbenLogo',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  collapsed: false,
+  href: 'javascript:void 0',
+  logoMode: 'icon',
+  logoSize: 32,
+  fullLogoHeight: 42,
+  src: '',
+  srcDark: '',
+  theme: 'light',
+  fit: 'cover',
+  showText: true,
+});
+
+/**
+ * @zh_CN 根据主题选择合适的 logo 图标
+ */
+const logoSrc = computed(() => {
+  // 如果是暗色主题且提供了 srcDark，则使用暗色主题的 logo
+  if (props.theme === 'dark' && props.srcDark) {
+    return props.srcDark;
+  }
+  // 否则使用默认的 src
+  return props.src;
+});
+
+/**
+ * @zh_CN 是否铺满容器显示log
+ */
+const shouldUseFullLogo = computed(() => {
+  return props.logoMode === 'full' && !props.collapsed;
+});
+
+/**
+ * @zh_CN 根据配置展示 logo text
+ */
+const shouldShowText = computed(() => {
+  return (
+    props.showText &&
+    !props.collapsed &&
+    !shouldUseFullLogo.value &&
+    !!props.text
+  );
+});
+
+/**
+ * @zh_CN full 模式下logo的样式
+ */
+const fullLogoStyle = computed(() => ({
+  height:
+    typeof props.fullLogoHeight === 'number'
+      ? `${props.fullLogoHeight}px`
+      : props.fullLogoHeight,
+  objectFit: props.fit,
+}));
+</script>
+
+<template>
+  <div :class="theme" class="flex h-full items-center text-lg">
+    <a
+      :class="[
+        $attrs.class,
+        shouldShowText
+          ? 'gap-2 px-3 justify-start'
+          : 'w-full p-0 justify-center',
+      ]"
+      :href="href"
+      class="flex h-full items-center overflow-hidden text-lg leading-normal transition-all duration-500"
+    >
+      <img
+        v-if="logoSrc && shouldUseFullLogo"
+        :alt="text"
+        :src="logoSrc"
+        :style="fullLogoStyle"
+        class="w-full"
+      />
+
+      <VbenAvatar
+        v-else-if="logoSrc"
+        :alt="text"
+        :src="logoSrc"
+        :size="logoSize"
+        :fit="fit"
+        class="relative rounded-none bg-transparent"
+      />
+      <template v-if="shouldShowText">
+        <slot name="text">
+          <span class="text-foreground truncate font-semibold text-nowrap">
+            {{ text }}
+          </span>
+        </slot>
+      </template>
+    </a>
+  </div>
+</template>

package/src/shadcn-ui/components/pin-input/index.ts

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