vue-clean-tabs 1.0.0 → 1.1.0

package/src/types.ts

@@ -2,11 +2,11 @@
 
 // 标签项接口
 export interface TabItem {
-  id: string;
-  name: string;
-  disabled?: boolean; // 是否禁用
-  route?: string; // 可选路由地址
-  icon?: string; // 可选图标
+    id: string;
+    name: string;
+    disabled?: boolean; // 是否禁用
+    route?: string; // 可选路由地址
+    icon?: string; // 可选图标
 }
 
 // 尺寸类型
@@ -17,234 +17,235 @@ 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;
+    // 激活状态文字颜色
+    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;
+    // 内边距
+    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;
+    // 过渡时长
+    transitionDuration: string;
+    // 缓动函数
+    easing: string;
+    // 是否启用动画
+    enabled: boolean;
+    // 指示器动画时长
+    indicatorTransition?: string;
 }
 
 // 响应式配置接口
 export interface ResponsiveConfig {
-  // 移动端断点
-  mobileBreakpoint: number;
-  // 移动端样式
-  mobileStyle?: Partial<StyleConfig>;
-  // 是否启用响应式
-  enabled: boolean;
+    // 移动端断点
+    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;
+    // 标签页数据
+    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];
+    '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',
+    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',
-  },
+    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',
+    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',
-  },
+    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,
-  }),
+    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
+    style: IndicatorStyle,
+    color: string,
+    height: string
 ): Record<string, string> => {
-  return indicatorStyles[style](color, height);
+    return indicatorStyles[style](color, height);
 };
 
 // 工具函数：合并配置
 export const mergeConfig = <T extends Record<string, any>>(
-  defaultConfig: T,
-  userConfig?: Partial<T>
+    defaultConfig: T,
+    userConfig?: Partial<T>
 ): T => {
-  return { ...defaultConfig, ...userConfig };
+    return { ...defaultConfig, ...userConfig };
 };
 
 // 工具函数：获取响应式样式
 export const getResponsiveStyle = (
-  isMobile: boolean,
-  baseStyle: StyleConfig,
-  mobileStyle?: Partial<StyleConfig>
+    isMobile: boolean,
+    baseStyle: StyleConfig,
+    mobileStyle?: Partial<StyleConfig>
 ): StyleConfig => {
-  if (!isMobile || !mobileStyle) return baseStyle;
-  return { ...baseStyle, ...mobileStyle };
+    if (!isMobile || !mobileStyle) return baseStyle;
+    return { ...baseStyle, ...mobileStyle };
 };
+