vue-clean-tabs 1.0.0

package/README.md

@@ -0,0 +1,450 @@
+# Vue Simple Tabs
+
+🚀 一个轻量级、高度可配置的 Vue 3 简洁标签页组件，专注于简洁设计和灵活定制。
+
+## ✨ 特性
+
+- 🪶 **轻量级设计** - 极简的 API 和最小的包体积
+- 🎨 **高度可定制** - 丰富的样式配置和主题选项
+- 📱 **响应式支持** - 完美适配移动端和桌面端
+- 🎯 **多种指示器** - 线条、下划线、圆点、药丸等样式
+- 🔧 **灵活配置** - 尺寸、动画、布局等全面配置
+- ⚡ **TypeScript 支持** - 完整的类型定义
+- 🎪 **丰富功能** - 图标、禁用、滚动、居中等功能
+- 🎭 **无障碍访问** - 支持键盘导航和屏幕阅读器
+
+## 📦 安装
+
+```bash
+npm install vue-simple-tabs
+```
+
+## 🚀 快速开始
+
+### 基本使用
+
+```vue
+<template>
+  <ConfigurableSimpleTabs
+    :tabs="tabs"
+    defaultActive="home"
+    @tab-change="handleTabChange"
+  />
+</template>
+
+<script setup>
+import { ConfigurableSimpleTabs } from 'vue-simple-tabs';
+
+const tabs = [
+  { id: 'home', name: '首页' },
+  { id: 'about', name: '关于' },
+  { id: 'contact', name: '联系' },
+];
+
+const handleTabChange = (tabId, tab) => {
+  console.log('切换到:', tab.name);
+};
+</script>
+```
+
+### 带图标的标签页
+
+```vue
+<template>
+  <ConfigurableSimpleTabs :tabs="iconTabs" />
+</template>
+
+<script setup>
+const iconTabs = [
+  { 
+    id: 'home', 
+    name: '首页',
+    icon: '<svg>...</svg>' // SVG 图标
+  },
+  { 
+    id: 'user', 
+    name: '用户',
+    icon: '<svg>...</svg>'
+  },
+];
+</script>
+```
+
+### 自定义主题
+
+```vue
+<template>
+  <ConfigurableSimpleTabs
+    :tabs="tabs"
+    :theme="customTheme"
+    size="large"
+  />
+</template>
+
+<script setup>
+const customTheme = {
+  activeTextColor: '#3b82f6',
+  indicatorColor: '#3b82f6',
+  backgroundColor: '#f8fafc',
+};
+</script>
+```
+
+## 📚 API 文档
+
+### Props
+
+#### 必需属性
+
+| 属性   | 类型        | 描述       |
+| ------ | ----------- | ---------- |
+| `tabs` | `TabItem[]` | 标签页数组 |
+
+#### 可选属性
+
+| 属性            | 类型                        | 默认值       | 描述             |
+| --------------- | --------------------------- | ------------ | ---------------- |
+| `defaultActive` | `string`                    | 第一个标签   | 默认激活的标签ID |
+| `size`          | `'small' \| 'medium' \| 'large'` | `'medium'`   | 组件尺寸         |
+| `theme`         | `Partial<SimpleTabsTheme>`  | `defaultTheme` | 主题配置         |
+| `style`         | `Partial<StyleConfig>`      | `默认样式`   | 样式配置         |
+| `animation`     | `Partial<AnimationConfig>`  | `默认动画`   | 动画配置         |
+| `responsive`    | `Partial<ResponsiveConfig>` | `默认响应式` | 响应式配置       |
+| `className`     | `string`                    | `undefined`  | 自定义类名       |
+| `customStyle`   | `Record<string, any>`       | `undefined`  | 自定义样式       |
+| `block`         | `boolean`                   | `false`      | 块级显示         |
+| `centered`      | `boolean`                   | `false`      | 居中对齐         |
+| `scrollable`    | `boolean`                   | `false`      | 可滚动           |
+
+### 类型定义
+
+#### TabItem
+
+```typescript
+interface TabItem {
+  id: string;            // 唯一标识符
+  name: string;          // 显示名称
+  disabled?: boolean;    // 是否禁用
+  route?: string;        // 路由地址
+  icon?: string;         // 图标 HTML (SVG)
+}
+```
+
+#### SimpleTabsTheme
+
+```typescript
+interface SimpleTabsTheme {
+  activeTextColor: string;      // 激活文字颜色
+  inactiveTextColor: string;    // 非激活文字颜色
+  hoverTextColor: string;       // 悬浮文字颜色
+  backgroundColor: string;      // 背景色
+  indicatorColor: string;       // 指示器颜色
+  fontFamily: string;          // 字体系列
+  borderColor?: string;        // 边框颜色
+  boxShadow?: string;          // 阴影
+}
+```
+
+#### StyleConfig
+
+```typescript
+interface StyleConfig {
+  padding: string;              // 内边距
+  fontSize: string;             // 字体大小
+  fontWeight: string;           // 字体粗细
+  indicatorHeight: string;      // 指示器高度
+  indicatorStyle: IndicatorStyle; // 指示器样式
+  borderRadius?: string;        // 圆角
+  gap?: string;                 // 标签间距
+}
+```
+
+#### 指示器样式
+
+```typescript
+type IndicatorStyle = 'line' | 'dot' | 'pill' | 'underline';
+```
+
+- `line` - 底部线条 (默认)
+- `underline` - 完整下划线
+- `dot` - 圆点指示器
+- `pill` - 药丸形状
+
+### 事件
+
+| 事件名       | 参数                            | 描述                   |
+| ------------ | ------------------------------- | ---------------------- |
+| `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)` | 鼠标离开标签页时触发   |
+
+## 🎨 预设配置
+
+### 尺寸配置
+
+```typescript
+const sizeConfigs = {
+  small: {
+    padding: '8px 10px',
+    fontSize: '14px',
+    fontWeight: '500',
+    indicatorHeight: '2px',
+  },
+  medium: {
+    padding: '14px 12px',
+    fontSize: '16px',
+    fontWeight: '600',
+    indicatorHeight: '2px',
+  },
+  large: {
+    padding: '16px 16px',
+    fontSize: '18px',
+    fontWeight: '700',
+    indicatorHeight: '3px',
+  },
+};
+```
+
+### 默认主题
+
+```typescript
+const defaultTheme = {
+  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',
+};
+```
+
+## 📖 更多示例
+
+### 不同指示器样式
+
+```vue
+<!-- 线条指示器 -->
+<ConfigurableSimpleTabs
+  :tabs="tabs"
+  :style="{ indicatorStyle: 'line' }"
+/>
+
+<!-- 下划线指示器 -->
+<ConfigurableSimpleTabs
+  :tabs="tabs"
+  :style="{ indicatorStyle: 'underline' }"
+/>
+
+<!-- 圆点指示器 -->
+<ConfigurableSimpleTabs
+  :tabs="tabs"
+  :style="{ indicatorStyle: 'dot' }"
+/>
+
+<!-- 药丸指示器 -->
+<ConfigurableSimpleTabs
+  :tabs="tabs"
+  :style="{ indicatorStyle: 'pill' }"
+/>
+```
+
+### 深色主题
+
+```vue
+<ConfigurableSimpleTabs
+  :tabs="tabs"
+  :theme="{
+    activeTextColor: '#f9fafb',
+    inactiveTextColor: '#9ca3af',
+    hoverTextColor: '#d1d5db',
+    backgroundColor: '#1f2937',
+    indicatorColor: '#3b82f6'
+  }"
+/>
+```
+
+### 滚动标签页
+
+```vue
+<ConfigurableSimpleTabs
+  :tabs="manyTabs"
+  scrollable
+  :style="{ gap: '32px' }"
+/>
+```
+
+### 居中对齐
+
+```vue
+<ConfigurableSimpleTabs
+  :tabs="tabs"
+  centered
+  :theme="{ backgroundColor: '#f8fafc' }"
+/>
+```
+
+### 禁用动画
+
+```vue
+<ConfigurableSimpleTabs
+  :tabs="tabs"
+  :animation="{ enabled: false }"
+/>
+```
+
+### 自定义响应式
+
+```vue
+<ConfigurableSimpleTabs
+  :tabs="tabs"
+  :responsive="{
+    mobileBreakpoint: 1024,
+    mobileStyle: {
+      padding: '12px 8px',
+      fontSize: '14px'
+    }
+  }"
+/>
+```
+
+## 🎯 高级用法
+
+### 程序化控制
+
+```vue
+<template>
+  <ConfigurableSimpleTabs
+    ref="tabsRef"
+    :tabs="tabs"
+  />
+  <button @click="switchTab">切换到联系页</button>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const tabsRef = ref();
+
+const switchTab = () => {
+  tabsRef.value.setActiveTab('contact');
+};
+</script>
+```
+
+### 集成路由
+
+```vue
+<template>
+  <ConfigurableSimpleTabs
+    :tabs="routeTabs"
+    @tab-change="handleTabChange"
+  />
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const routeTabs = [
+  { id: 'home', name: '首页', route: '/' },
+  { id: 'about', name: '关于', route: '/about' },
+];
+
+const handleTabChange = (tabId, tab) => {
+  if (tab.route) {
+    router.push(tab.route);
+  }
+};
+</script>
+```
+
+### 动态标签页
+
+```vue
+<template>
+  <ConfigurableSimpleTabs
+    :tabs="dynamicTabs"
+    @tab-change="handleTabChange"
+  />
+  <button @click="addTab">添加标签页</button>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const dynamicTabs = ref([
+  { id: 'tab1', name: '标签1' },
+]);
+
+let tabCounter = 1;
+
+const addTab = () => {
+  tabCounter++;
+  dynamicTabs.value.push({
+    id: `tab${tabCounter}`,
+    name: `标签${tabCounter}`,
+  });
+};
+</script>
+```
+
+## 🌟 特色功能
+
+### 无障碍访问
+
+- 支持键盘导航 (Tab, Enter, 方向键)
+- 兼容屏幕阅读器
+- 符合 ARIA 标准
+- 支持高对比度模式
+
+### 性能优化
+
+- CSS `will-change` 属性优化动画性能
+- 响应 `prefers-reduced-motion` 媒体查询
+- 最小重排和重绘
+- 虚拟滚动支持 (可选)
+
+### 浏览器兼容性
+
+- Chrome 88+
+- Firefox 85+
+- Safari 14+
+- Edge 88+
+
+## 🛠️ 开发
+
+```bash
+# 克隆项目
+git clone https://github.com/skillharbor/vue-simple-tabs.git
+
+# 安装依赖
+npm install
+
+# 开发模式
+npm run dev
+
+# 构建
+npm run build:lib
+
+# 类型检查
+npm run type-check
+```
+
+## 📄 许可证
+
+MIT License
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 🔗 链接
+
+- [GitHub](https://github.com/skillharbor/vue-simple-tabs)
+- [npm](https://www.npmjs.com/package/vue-simple-tabs)
+
+---
+
+Made with ❤️ by SkillHarbor

package/dist/index.esm.js

@@ -0,0 +1,262 @@
+import { defineComponent as D, useCssVars as F, ref as S, computed as v, onMounted as L, onUnmounted as W, nextTick as E, openBlock as b, createElementBlock as f, normalizeClass as k, normalizeStyle as m, createElementVNode as x, Fragment as I, renderList as N, createCommentVNode as w, toDisplayString as V } from "vue";
+const U = {
+  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'
+}, j = {
+  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"
+  }
+}, q = {
+  transitionDuration: "0.2s",
+  easing: "ease",
+  enabled: !0,
+  indicatorTransition: "0.3s ease"
+}, O = {
+  mobileBreakpoint: 768,
+  enabled: !0,
+  mobileStyle: {
+    padding: "14px 0",
+    gap: "16px"
+  }
+}, P = {
+  line: (n, o) => ({
+    position: "absolute",
+    bottom: "0",
+    left: "12px",
+    right: "12px",
+    height: o,
+    backgroundColor: n,
+    borderRadius: "0"
+  }),
+  underline: (n, o) => ({
+    position: "absolute",
+    bottom: "0",
+    left: "0",
+    right: "0",
+    height: o,
+    backgroundColor: n,
+    borderRadius: "0"
+  }),
+  dot: (n, o) => ({
+    position: "absolute",
+    bottom: "4px",
+    left: "50%",
+    transform: "translateX(-50%)",
+    width: o,
+    height: o,
+    backgroundColor: n,
+    borderRadius: "50%"
+  }),
+  pill: (n, o) => ({
+    position: "absolute",
+    bottom: "4px",
+    left: "8px",
+    right: "8px",
+    height: o,
+    backgroundColor: n,
+    borderRadius: o
+  })
+}, X = (n, o, l) => P[n](o, l), y = (n, o) => ({ ...n, ...o }), G = (n, o, l) => !n || !l ? o : { ...o, ...l }, J = ["disabled", "onClick", "onMouseenter", "onMouseleave"], K = ["innerHTML"], Q = { class: "tab-text" }, Y = /* @__PURE__ */ D({
+  __name: "ConfigurableSimpleTabs",
+  props: {
+    tabs: {},
+    defaultActive: {},
+    size: { default: "medium" },
+    theme: {},
+    style: {},
+    animation: {},
+    responsive: {},
+    className: {},
+    customStyle: {},
+    block: { type: Boolean, default: !1 },
+    centered: { type: Boolean, default: !1 },
+    scrollable: { type: Boolean, default: !1 }
+  },
+  emits: ["tab-change", "tab-click", "tab-hover", "tab-leave"],
+  setup(n, { expose: o, emit: l }) {
+    var z;
+    F((e) => ({
+      "4e65487a": i.value.indicatorColor,
+      "25a898f4": i.value.backgroundColor
+    }));
+    const t = n, r = l, d = S(t.defaultActive || ((z = t.tabs[0]) == null ? void 0 : z.id) || ""), p = S(!1), h = S(null), i = v(
+      () => y(U, t.theme)
+    ), c = v(
+      () => y(q, t.animation)
+    ), g = v(
+      () => y(O, t.responsive)
+    ), R = v(
+      () => y(j[t.size], t.style)
+    ), u = v(
+      () => G(
+        p.value && g.value.enabled,
+        R.value,
+        g.value.mobileStyle
+      )
+    ), T = () => {
+      g.value.enabled && (p.value = window.innerWidth <= g.value.mobileBreakpoint);
+    }, M = (e) => e.disabled ? i.value.inactiveTextColor : d.value === e.id ? i.value.activeTextColor : h.value === e.id ? i.value.hoverTextColor : i.value.inactiveTextColor, B = () => X(
+      u.value.indicatorStyle,
+      i.value.indicatorColor,
+      u.value.indicatorHeight
+    ), H = (e, s) => {
+      e.disabled || (d.value = e.id, r("tab-change", e.id, e), r("tab-click", e.id, e, s), e.route && console.log("Navigate to:", e.route));
+    }, $ = (e) => {
+      e.disabled || (h.value = e.id, r("tab-hover", e.id, e));
+    }, A = (e) => {
+      e.disabled || (h.value = null, r("tab-leave", e.id, e));
+    }, _ = () => {
+      T();
+    };
+    return L(() => {
+      T(), window.addEventListener("resize", _);
+    }), W(() => {
+      window.removeEventListener("resize", _);
+    }), o({
+      activeTab: d,
+      setActiveTab: (e) => {
+        const s = t.tabs.find((a) => a.id === e);
+        s && !s.disabled && (d.value = e, r("tab-change", e, s));
+      },
+      getActiveTab: () => t.tabs.find((e) => e.id === d.value),
+      scrollToTab: (e) => {
+        t.scrollable && E(() => {
+          const s = document.querySelector(`[data-tab-id="${e}"]`);
+          s && s.scrollIntoView({ behavior: "smooth", inline: "center" });
+        });
+      }
+    }), (e, s) => (b(), f("div", {
+      class: k(["simple-tabs-container", [
+        `size-${t.size}`,
+        {
+          "tabs-block": t.block,
+          "tabs-centered": t.centered,
+          "tabs-scrollable": t.scrollable,
+          "is-mobile": p.value
+        },
+        t.className
+      ]]),
+      style: m({
+        backgroundColor: i.value.backgroundColor,
+        boxShadow: i.value.boxShadow,
+        flexShrink: 0,
+        ...t.customStyle
+      })
+    }, [
+      x("nav", null, [
+        x("ul", {
+          class: k(["tabs-list", {
+            "flex-wrap": t.scrollable && !p.value,
+            "overflow-x-auto": t.scrollable && p.value
+          }]),
+          style: m({
+            display: "flex",
+            gap: u.value.gap,
+            justifyContent: t.centered ? "center" : "flex-start",
+            margin: 0,
+            padding: 0,
+            listStyle: "none"
+          })
+        }, [
+          (b(!0), f(I, null, N(t.tabs, (a) => (b(), f("li", {
+            key: a.id,
+            class: k(["tab-item", {
+              "tab-active": d.value === a.id,
+              "tab-disabled": a.disabled
+            }])
+          }, [
+            x("button", {
+              class: "tab-button",
+              disabled: a.disabled,
+              style: m({
+                position: "relative",
+                display: "flex",
+                alignItems: "center",
+                background: "none",
+                border: "none",
+                cursor: a.disabled ? "not-allowed" : "pointer",
+                textDecoration: "none",
+                transition: c.value.enabled ? `color ${c.value.transitionDuration} ${c.value.easing}` : "none",
+                padding: u.value.padding,
+                fontSize: u.value.fontSize,
+                fontWeight: u.value.fontWeight,
+                fontFamily: i.value.fontFamily,
+                color: M(a),
+                opacity: a.disabled ? 0.5 : 1,
+                borderRadius: u.value.borderRadius || "0",
+                whiteSpace: "nowrap"
+              }),
+              onClick: (C) => H(a, C),
+              onMouseenter: (C) => $(a),
+              onMouseleave: (C) => A(a)
+            }, [
+              a.icon ? (b(), f("span", {
+                key: 0,
+                class: "tab-icon",
+                style: {
+                  marginRight: "8px",
+                  fontSize: "1em",
+                  lineHeight: 1
+                },
+                innerHTML: a.icon
+              }, null, 8, K)) : w("", !0),
+              x("span", Q, V(a.name), 1),
+              d.value === a.id ? (b(), f("span", {
+                key: 1,
+                class: "tab-indicator",
+                style: m({
+                  ...B(),
+                  transition: c.value.enabled ? `all ${c.value.indicatorTransition || c.value.transitionDuration} ${c.value.easing}` : "none"
+                })
+              }, null, 4)) : w("", !0)
+            ], 44, J)
+          ], 2))), 128))
+        ], 6)
+      ])
+    ], 6));
+  }
+});
+const Z = (n, o) => {
+  const l = n.__vccOpts || n;
+  for (const [t, r] of o)
+    l[t] = r;
+  return l;
+}, te = /* @__PURE__ */ Z(Y, [["__scopeId", "data-v-166844ee"]]);
+export {
+  te as ConfigurableSimpleTabs,
+  te as default,
+  q as defaultAnimation,
+  O as defaultResponsive,
+  U as defaultTheme,
+  X as getIndicatorStyle,
+  G as getResponsiveStyle,
+  P as indicatorStyles,
+  y as mergeConfig,
+  j as sizeConfigs
+};
+//# sourceMappingURL=index.esm.js.map