vue-clean-tabs 1.0.0

package/src/types.ts

@@ -0,0 +1,250 @@
+// 简洁标签页组件的类型定义
+
+// 标签项接口
+export interface TabItem {
+  id: string;
+  name: string;
+  disabled?: boolean; // 是否禁用
+  route?: string; // 可选路由地址
+  icon?: string; // 可选图标
+}
+
+// 尺寸类型
+export type TabSize = 'small' | 'medium' | 'large';
+
+// 指示器样式类型
+export type IndicatorStyle = 'line' | 'dot' | 'pill' | 'underline';
+
+// 主题配置接口
+export interface SimpleTabsTheme {
+  // 激活状态文字颜色
+  activeTextColor: string;
+  // 非激活状态文字颜色
+  inactiveTextColor: string;
+  // 悬浮状态文字颜色
+  hoverTextColor: string;
+  // 背景色
+  backgroundColor: string;
+  // 激活指示器颜色
+  indicatorColor: string;
+  // 字体系列
+  fontFamily: string;
+  // 边框颜色（如果需要）
+  borderColor?: string;
+  // 阴影（如果需要）
+  boxShadow?: string;
+}
+
+// 样式配置接口
+export interface StyleConfig {
+  // 内边距
+  padding: string;
+  // 字体大小
+  fontSize: string;
+  // 字体粗细
+  fontWeight: string;
+  // 指示器高度
+  indicatorHeight: string;
+  // 指示器样式
+  indicatorStyle: IndicatorStyle;
+  // 圆角大小
+  borderRadius?: string;
+  // 标签间距
+  gap?: string;
+}
+
+// 动画配置接口
+export interface AnimationConfig {
+  // 过渡时长
+  transitionDuration: string;
+  // 缓动函数
+  easing: string;
+  // 是否启用动画
+  enabled: boolean;
+  // 指示器动画时长
+  indicatorTransition?: string;
+}
+
+// 响应式配置接口
+export interface ResponsiveConfig {
+  // 移动端断点
+  mobileBreakpoint: number;
+  // 移动端样式
+  mobileStyle?: Partial<StyleConfig>;
+  // 是否启用响应式
+  enabled: boolean;
+}
+
+// 主组件Props接口
+export interface SimpleTabsProps {
+  // 标签页数据
+  tabs: TabItem[];
+  
+  // 默认激活的标签ID
+  defaultActive?: string;
+  
+  // 尺寸
+  size?: TabSize;
+  
+  // 主题配置
+  theme?: Partial<SimpleTabsTheme>;
+  
+  // 样式配置
+  style?: Partial<StyleConfig>;
+  
+  // 动画配置
+  animation?: Partial<AnimationConfig>;
+  
+  // 响应式配置
+  responsive?: Partial<ResponsiveConfig>;
+  
+  // 自定义类名
+  className?: string;
+  
+  // 自定义内联样式
+  customStyle?: Record<string, any>;
+  
+  // 是否显示为块级元素
+  block?: boolean;
+  
+  // 居中对齐
+  centered?: boolean;
+  
+  // 是否可滚动（当标签过多时）
+  scrollable?: boolean;
+}
+
+// 事件接口
+export interface SimpleTabsEvents {
+  'tab-change': [tabId: string, tab: TabItem];
+  'tab-click': [tabId: string, tab: TabItem, event: Event];
+  'tab-hover': [tabId: string, tab: TabItem];
+  'tab-leave': [tabId: string, tab: TabItem];
+}
+
+// 默认主题
+export const defaultTheme: SimpleTabsTheme = {
+  activeTextColor: 'rgb(20, 23, 26)',
+  inactiveTextColor: 'rgb(76, 82, 89)',
+  hoverTextColor: 'rgb(55, 65, 81)',
+  backgroundColor: '#ffffff',
+  indicatorColor: 'rgb(20, 23, 26)',
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Display", "Inter", sans-serif',
+};
+
+// 尺寸配置
+export const sizeConfigs: Record<TabSize, StyleConfig> = {
+  small: {
+    padding: '8px 10px',
+    fontSize: '14px',
+    fontWeight: '500',
+    indicatorHeight: '2px',
+    indicatorStyle: 'line',
+    gap: '16px',
+  },
+  medium: {
+    padding: '14px 12px',
+    fontSize: '16px',
+    fontWeight: '600',
+    indicatorHeight: '2px',
+    indicatorStyle: 'line',
+    gap: '20px',
+  },
+  large: {
+    padding: '16px 16px',
+    fontSize: '18px',
+    fontWeight: '700',
+    indicatorHeight: '3px',
+    indicatorStyle: 'line',
+    gap: '24px',
+  },
+};
+
+// 默认动画配置
+export const defaultAnimation: AnimationConfig = {
+  transitionDuration: '0.2s',
+  easing: 'ease',
+  enabled: true,
+  indicatorTransition: '0.3s ease',
+};
+
+// 默认响应式配置
+export const defaultResponsive: ResponsiveConfig = {
+  mobileBreakpoint: 768,
+  enabled: true,
+  mobileStyle: {
+    padding: '14px 0',
+    gap: '16px',
+  },
+};
+
+// 指示器样式映射
+export const indicatorStyles: Record<IndicatorStyle, (color: string, height: string) => Record<string, string>> = {
+  line: (color: string, height: string) => ({
+    position: 'absolute',
+    bottom: '0',
+    left: '12px',
+    right: '12px',
+    height,
+    backgroundColor: color,
+    borderRadius: '0',
+  }),
+  
+  underline: (color: string, height: string) => ({
+    position: 'absolute',
+    bottom: '0',
+    left: '0',
+    right: '0',
+    height,
+    backgroundColor: color,
+    borderRadius: '0',
+  }),
+  
+  dot: (color: string, height: string) => ({
+    position: 'absolute',
+    bottom: '4px',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    width: height,
+    height,
+    backgroundColor: color,
+    borderRadius: '50%',
+  }),
+  
+  pill: (color: string, height: string) => ({
+    position: 'absolute',
+    bottom: '4px',
+    left: '8px',
+    right: '8px',
+    height,
+    backgroundColor: color,
+    borderRadius: height,
+  }),
+};
+
+// 工具函数：获取指示器样式
+export const getIndicatorStyle = (
+  style: IndicatorStyle, 
+  color: string, 
+  height: string
+): Record<string, string> => {
+  return indicatorStyles[style](color, height);
+};
+
+// 工具函数：合并配置
+export const mergeConfig = <T extends Record<string, any>>(
+  defaultConfig: T,
+  userConfig?: Partial<T>
+): T => {
+  return { ...defaultConfig, ...userConfig };
+};
+
+// 工具函数：获取响应式样式
+export const getResponsiveStyle = (
+  isMobile: boolean,
+  baseStyle: StyleConfig,
+  mobileStyle?: Partial<StyleConfig>
+): StyleConfig => {
+  if (!isMobile || !mobileStyle) return baseStyle;
+  return { ...baseStyle, ...mobileStyle };
+};