vue-clean-tabs 1.0.0 → 1.1.0

package/package.json

@@ -1,67 +1,67 @@
-{
-  "name": "vue-clean-tabs",
-  "version": "1.0.0",
-  "description": "A lightweight and highly configurable Vue 3 tabs component with clean design and flexible customization options",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "src/components/ConfigurableSimpleTabs.vue",
-    "src/types.ts",
-    "src/index.ts"
-  ],
-  "scripts": {
-    "build": "vite build",
-    "build:lib": "vite build --config vite.lib.config.ts",
-    "dev": "vite",
-    "preview": "vite preview",
-    "type-check": "vue-tsc --noEmit",
-    "prepublishOnly": "npm run build:lib"
-  },
-  "exports": {
-    ".": {
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./dist/style.css": "./dist/style.css"
-  },
-  "keywords": [
-    "vue",
-    "vue3",
-    "tabs",
-    "simple",
-    "lightweight",
-    "component",
-    "typescript",
-    "configurable",
-    "navigation",
-    "ui",
-    "customizable",
-    "clean",
-    "minimal",
-    "responsive"
-  ],
-  "author": "SkillHarbor",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/skillharbor/vue-clean-tabs.git"
-  },
-  "bugs": {
-    "url": "https://github.com/skillharbor/vue-clean-tabs/issues"
-  },
-  "homepage": "https://github.com/skillharbor/vue-clean-tabs#readme",
-  "peerDependencies": {
-    "vue": "^3.3.0"
-  },
-  "devDependencies": {
-    "@types/node": "^20.5.2",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "typescript": "~5.1.6",
-    "vite": "^4.4.5",
-    "vue": "^3.3.4",
-    "vue-tsc": "^1.8.5"
-  }
-}
+{
+  "name": "vue-clean-tabs",
+  "version": "1.1.0",
+  "description": "A lightweight and highly configurable Vue 3 tabs component with clean design and flexible customization options",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/components/ConfigurableSimpleTabs.vue",
+    "src/types.ts",
+    "src/index.ts"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "dev": "vite",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "tabs",
+    "simple",
+    "lightweight",
+    "component",
+    "typescript",
+    "configurable",
+    "navigation",
+    "ui",
+    "customizable",
+    "clean",
+    "minimal",
+    "responsive"
+  ],
+  "author": "SkillHarbor",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/skillharbor/vue-clean-tabs.git"
+  },
+  "bugs": {
+    "url": "https://github.com/skillharbor/vue-clean-tabs/issues"
+  },
+  "homepage": "https://github.com/skillharbor/vue-clean-tabs#readme",
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.5.2",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "typescript": "~5.1.6",
+    "vite": "^4.4.5",
+    "vue": "^3.3.4",
+    "vue-tsc": "^1.8.5"
+  }
+}

package/src/components/ConfigurableSimpleTabs.vue

@@ -45,6 +45,10 @@
         >
           <button
             class="tab-button"
+            :class="{
+              'tab-button-active': activeTab === tab.id,
+              'tab-button-disabled': tab.disabled,
+            }"
             :disabled="tab.disabled"
             :style="{
               position: 'relative',
@@ -59,12 +63,13 @@
                 : 'none',
               padding: computedStyleConfig.padding,
               fontSize: computedStyleConfig.fontSize,
-              fontWeight: computedStyleConfig.fontWeight,
+              fontWeight: activeTab === tab.id ? '500' : computedStyleConfig.fontWeight,
               fontFamily: computedTheme.fontFamily,
               color: getTabTextColor(tab),
               opacity: tab.disabled ? 0.5 : 1,
               borderRadius: computedStyleConfig.borderRadius || '0',
               whiteSpace: 'nowrap',
+              lineHeight: 1.25,
             }"
             @click="handleTabClick(tab, $event)"
             @mouseenter="handleTabHover(tab)"
@@ -81,10 +86,10 @@
               }"
               v-html="tab.icon"
             />
-            
+
             <!-- 标签文本 -->
             <span class="tab-text">{{ tab.name }}</span>
-            
+
             <!-- 激活指示器 -->
             <span
               v-if="activeTab === tab.id"
@@ -104,8 +109,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
-import type { SimpleTabsProps, SimpleTabsEvents, TabItem } from '../types';
+import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
+import type { SimpleTabsProps, SimpleTabsEvents, TabItem } from "../types";
 import {
   defaultTheme,
   sizeConfigs,
@@ -114,11 +119,11 @@ import {
   mergeConfig,
   getResponsiveStyle,
   getIndicatorStyle,
-} from '../types';
+} from "../types";
 
 // Props定义
 const props = withDefaults(defineProps<SimpleTabsProps>(), {
-  size: 'medium',
+  size: "medium",
   block: false,
   centered: false,
   scrollable: false,
@@ -128,28 +133,26 @@ const props = withDefaults(defineProps<SimpleTabsProps>(), {
 const emit = defineEmits<SimpleTabsEvents>();
 
 // 响应式状态
-const activeTab = ref(props.defaultActive || props.tabs[0]?.id || '');
+const activeTab = ref(props.defaultActive || props.tabs[0]?.id || "");
 const isMobile = ref(false);
 const hoveredTab = ref<string | null>(null);
 
 // 计算属性
-const computedTheme = computed(() => 
-  mergeConfig(defaultTheme, props.theme)
-);
+const computedTheme = computed(() => mergeConfig(defaultTheme, props.theme));
 
-const computedAnimation = computed(() => 
+const computedAnimation = computed(() =>
   mergeConfig(defaultAnimation, props.animation)
 );
 
-const computedResponsive = computed(() => 
+const computedResponsive = computed(() =>
   mergeConfig(defaultResponsive, props.responsive)
 );
 
-const baseStyleConfig = computed(() => 
+const baseStyleConfig = computed(() =>
   mergeConfig(sizeConfigs[props.size], props.style)
 );
 
-const computedStyleConfig = computed(() => 
+const computedStyleConfig = computed(() =>
   getResponsiveStyle(
     isMobile.value && computedResponsive.value.enabled,
     baseStyleConfig.value,
@@ -160,7 +163,8 @@ const computedStyleConfig = computed(() =>
 // 工具方法
 const checkMobile = () => {
   if (computedResponsive.value.enabled) {
-    isMobile.value = window.innerWidth <= computedResponsive.value.mobileBreakpoint;
+    isMobile.value =
+      window.innerWidth <= computedResponsive.value.mobileBreakpoint;
   }
 };
 
@@ -168,15 +172,15 @@ const getTabTextColor = (tab: TabItem): string => {
   if (tab.disabled) {
     return computedTheme.value.inactiveTextColor;
   }
-  
+
   if (activeTab.value === tab.id) {
     return computedTheme.value.activeTextColor;
   }
-  
+
   if (hoveredTab.value === tab.id) {
     return computedTheme.value.hoverTextColor;
   }
-  
+
   return computedTheme.value.inactiveTextColor;
 };
 
@@ -191,14 +195,14 @@ const getIndicatorStyleComputed = () => {
 // 事件处理
 const handleTabClick = (tab: TabItem, event: Event) => {
   if (tab.disabled) return;
-  
+
   activeTab.value = tab.id;
-  emit('tab-change', tab.id, tab);
-  emit('tab-click', tab.id, tab, event);
-  
+  emit("tab-change", tab.id, tab);
+  emit("tab-click", tab.id, tab, event);
+
   // 路由跳转逻辑（如果需要）
   if (tab.route) {
-    console.log('Navigate to:', tab.route);
+    console.log("Navigate to:", tab.route);
     // 这里可以集成 vue-router
   }
 };
@@ -206,13 +210,13 @@ const handleTabClick = (tab: TabItem, event: Event) => {
 const handleTabHover = (tab: TabItem) => {
   if (tab.disabled) return;
   hoveredTab.value = tab.id;
-  emit('tab-hover', tab.id, tab);
+  emit("tab-hover", tab.id, tab);
 };
 
 const handleTabLeave = (tab: TabItem) => {
   if (tab.disabled) return;
   hoveredTab.value = null;
-  emit('tab-leave', tab.id, tab);
+  emit("tab-leave", tab.id, tab);
 };
 
 // 窗口尺寸变化监听
@@ -223,32 +227,32 @@ const handleResize = () => {
 // 生命周期
 onMounted(() => {
   checkMobile();
-  window.addEventListener('resize', handleResize);
+  window.addEventListener("resize", handleResize);
 });
 
 onUnmounted(() => {
-  window.removeEventListener('resize', handleResize);
+  window.removeEventListener("resize", handleResize);
 });
 
 // 暴露给父组件
 defineExpose({
   activeTab,
   setActiveTab: (tabId: string) => {
-    const tab = props.tabs.find(t => t.id === tabId);
+    const tab = props.tabs.find((t) => t.id === tabId);
     if (tab && !tab.disabled) {
       activeTab.value = tabId;
-      emit('tab-change', tabId, tab);
+      emit("tab-change", tabId, tab);
     }
   },
   getActiveTab: () => {
-    return props.tabs.find(t => t.id === activeTab.value);
+    return props.tabs.find((t) => t.id === activeTab.value);
   },
   scrollToTab: (tabId: string) => {
     if (!props.scrollable) return;
     nextTick(() => {
       const tabElement = document.querySelector(`[data-tab-id="${tabId}"]`);
       if (tabElement) {
-        tabElement.scrollIntoView({ behavior: 'smooth', inline: 'center' });
+        tabElement.scrollIntoView({ behavior: "smooth", inline: "center" });
       }
     });
   },
@@ -283,6 +287,20 @@ defineExpose({
   outline: none;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  background: transparent;
+  border: 0px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.25;
+  padding: 14px 12px;
+  position: relative;
+  color: v-bind("computedTheme.inactiveTextColor");
+  font-family: v-bind("computedTheme.fontFamily");
+  transition: color 0.2s ease;
 }
 
 .tab-button:focus {
@@ -290,10 +308,23 @@ defineExpose({
 }
 
 .tab-button:focus-visible {
-  outline: 2px solid v-bind('computedTheme.indicatorColor');
+  outline: 2px solid v-bind("computedTheme.indicatorColor");
   outline-offset: 2px;
 }
 
+.tab-button-active {
+  color: v-bind("computedTheme.activeTextColor");
+  font-weight: 500;
+}
+
+.tab-button-active::before {
+  position: absolute;
+  background: v-bind("computedTheme.indicatorColor");
+  height: 2px;
+  inset: auto 12px 0px;
+  content: "";
+}
+
 /* 移动端优化 */
 .simple-tabs-container.is-mobile .tab-button {
   -webkit-touch-callout: none;
@@ -311,6 +342,14 @@ defineExpose({
 
 /* 响应式样式 */
 @media (max-width: 768px) {
+  .simple-tabs-container.is-mobile .tab-button {
+    padding: 14px 0;
+  }
+
+  .simple-tabs-container.is-mobile .tab-button-active::before {
+    inset: auto 0px 0px;
+  }
+
   .simple-tabs-container.is-mobile .tab-indicator {
     left: 0 !important;
     right: 0 !important;
@@ -324,7 +363,7 @@ defineExpose({
 
 .tabs-scrollable::before,
 .tabs-scrollable::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   bottom: 0;
@@ -335,12 +374,20 @@ defineExpose({
 
 .tabs-scrollable::before {
   left: 0;
-  background: linear-gradient(to right, v-bind('computedTheme.backgroundColor'), transparent);
+  background: linear-gradient(
+    to right,
+    v-bind("computedTheme.backgroundColor"),
+    transparent
+  );
 }
 
 .tabs-scrollable::after {
   right: 0;
-  background: linear-gradient(to left, v-bind('computedTheme.backgroundColor'), transparent);
+  background: linear-gradient(
+    to left,
+    v-bind("computedTheme.backgroundColor"),
+    transparent
+  );
 }
 
 /* 不同尺寸的样式 */
@@ -390,7 +437,7 @@ defineExpose({
   .tab-button {
     border: 1px solid currentColor;
   }
-  
+
   .tab-indicator {
     border: 2px solid currentColor;
   }
@@ -404,3 +451,4 @@ defineExpose({
   }
 }
 </style>
+

package/src/index.ts

@@ -3,28 +3,29 @@ export { default as ConfigurableSimpleTabs } from './components/ConfigurableSimp
 
 // 导出类型定义
 export type {
-  TabItem,
-  TabSize,
-  IndicatorStyle,
-  SimpleTabsTheme,
-  StyleConfig,
-  AnimationConfig,
-  ResponsiveConfig,
-  SimpleTabsProps,
-  SimpleTabsEvents,
+    TabItem,
+    TabSize,
+    IndicatorStyle,
+    SimpleTabsTheme,
+    StyleConfig,
+    AnimationConfig,
+    ResponsiveConfig,
+    SimpleTabsProps,
+    SimpleTabsEvents,
 } from './types';
 
 // 导出默认配置和工具函数
-export { 
-  defaultTheme, 
-  sizeConfigs, 
-  defaultAnimation, 
-  defaultResponsive,
-  indicatorStyles,
-  getIndicatorStyle,
-  mergeConfig,
-  getResponsiveStyle,
+export {
+    defaultTheme,
+    sizeConfigs,
+    defaultAnimation,
+    defaultResponsive,
+    indicatorStyles,
+    getIndicatorStyle,
+    mergeConfig,
+    getResponsiveStyle,
 } from './types';
 
 // 默认导出
 export { default } from './components/ConfigurableSimpleTabs.vue';
+