@oiij/chrome-tabs 0.0.17 → 0.0.18

package/README.md

@@ -1,12 +1,96 @@
-# Chrome-Tabs
+# Use Chrome-Tabs 🚀
 
 [![NPM version](https://img.shields.io/npm/v/@oiij/chrome-tabs)](https://www.npmjs.com/package/@oiij/chrome-tabs)
-[![MIT-license](https://img.shields.io/npm/l/@oiij/chrome-tabs)](https://github.com/Eiog/@oiij/chrome-tabs/blob/main/LICENSE)
+[![MIT-license](https://img.shields.io/npm/l/@oiij/chrome-tabs)](https://github.com/oiij/use/blob/main/packages/chrome-tabs/LICENSE)
 
-## Usage
+## 项目简介 📦
+
+Use Chrome-Tabs 是一个仿 Chrome 风格的标签页组件，为 Vue 3 应用提供流畅的标签页管理体验，帮助开发者构建具有类似浏览器标签页功能的应用。
+
+## 功能特点 ✨
+
+### Chrome 风格设计 🎨
+
+- 💯 还原 Chrome 浏览器标签页外观
+- 🎯 支持标签页拖拽排序
+- 🔥 流畅的动画过渡效果
+
+### 模块化设计 🧩
+
+- 📁 采用模块化架构，组件独立封装
+- 📦 支持按需导入，减小打包体积
+- 🔧 清晰的文件结构，易于维护和扩展
+
+### 类型安全 🔒
+
+- 📝 完整的 TypeScript 类型定义
+- 💡 提供准确的类型推断和代码提示
+- 🎯 支持 Vue 3 的 Composition API 类型系统
+
+### 轻量高效 ⚡
+
+- 🚀 核心代码精简，无额外依赖
+- 🏃 优化的性能表现，最小化运行时开销
+- 📦 支持 Tree Shaking，进一步减小打包体积
+
+### 功能丰富 🎨
+
+- 📑 支持多标签页管理
+- 🔄 支持标签页切换和关闭
+- ✨ 支持自定义样式和主题
+
+## 安装 📥
+
+### 使用 pnpm 🐱
 
 ```bash
 pnpm add @oiij/chrome-tabs
 ```
 
-[在线文档](https://oiij-use.vercel.app/examples/chrome-tabs/started)
+### 使用 npm 📦
+
+```bash
+npm install @oiij/chrome-tabs
+```
+
+### 使用 yarn 🧶
+
+```bash
+yarn add @oiij/chrome-tabs
+```
+
+## 快速开始 🌟
+
+### 基础使用
+
+```vue
+<script setup>
+import { ChromeTabs } from '@oiij/chrome-tabs'
+</script>
+
+<template>
+  <ChromeTabs />
+</template>
+```
+
+## 在线文档 📚
+
+[在线文档](https://oiij-use.vercel.app/chrome-tabs/chrome-tabs) 📖
+
+## 贡献指南 🤝
+
+欢迎贡献代码、报告问题或提出新功能建议！
+
+1. Fork 本仓库 🍴
+2. 创建您的特性分支 (`git checkout -b feature/amazing-feature`) 🌿
+3. 提交您的更改 (`git commit -m 'Add some amazing feature'`) 💾
+4. 推送到分支 (`git push origin feature/amazing-feature`) 🚀
+5. 打开一个 Pull Request 📥
+
+## 许可证 📄
+
+本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 📑
+
+## 联系方式 📞
+
+- GitHub: [https://github.com/Eiog/@oiij/chrome-tabs](https://github.com/Eiog/@oiij/chrome-tabs) 🌟

package/dist/index.d.ts

@@ -3,40 +3,141 @@ import { CSSProperties, VNode } from "vue";
 
 //#region src/index.d.ts
 type VNodeChild = VNode | string | number | undefined | void | null | boolean;
+/**
+ * 标签页键类型
+ */
 type TabItemKey = string | number;
+/**
+ * 标签页选项配置
+ */
 type TabsOption = {
+  /**
+   * 标签页键
+   */
   key: TabItemKey;
+  /**
+   * 标签页标题
+   */
   label: string | ((key: TabItemKey, index: number) => VNodeChild);
+  /**
+   * 标签页图标
+   */
   icon?: (key: TabItemKey, index: number) => VNodeChild;
+  /**
+   * 是否可关闭
+   * @default false
+   */
   closable?: boolean | ((key: TabItemKey, index: number) => boolean);
+  /**
+   * 是否禁用
+   * @default false
+   */
   disabled?: boolean | ((key: TabItemKey, index: number) => boolean);
+  /**
+   * 是否加载中
+   * @default false
+   */
   loading?: boolean | ((key: TabItemKey, index: number) => boolean);
+  /**
+   * 加载图标
+   */
   loadingIcon?: (key: TabItemKey, index: number) => VNodeChild;
+  /**
+   * 点击事件
+   */
   onClick?: (key: TabItemKey, index: number, ev: MouseEvent) => void;
+  /**
+   * 右键菜单事件
+   */
   onContextMenu?: (key: TabItemKey, index: number, ev: MouseEvent) => void;
+  /**
+   * 关闭事件
+   */
   onClose?: (key: TabItemKey, index: number, ev: MouseEvent) => void;
+  /**
+   * 自定义类名
+   */
   class?: string;
+  /**
+   * 自定义样式
+   */
   style?: CSSProperties | string;
 };
+/**
+ * 标签项属性
+ */
 type TabsItemProps = Omit<TabsOption, 'key'> & {
+  /**
+   * 激活索引
+   */
   activeIndex?: number;
+  /**
+   * 项索引
+   */
   itemIndex: number;
+  /**
+   * 项键
+   */
   itemKey: TabItemKey;
+  /**
+   * 图标大小
+   */
   iconSize?: number;
 };
+/**
+ * 标签页组件属性
+ */
 type TabsProps = {
+  /**
+   * 当前激活的标签页键
+   */
   value?: TabItemKey;
+  /**
+   * 颜色配置
+   */
   colors?: {
+    /**
+     * 激活状态颜色
+     */
     active?: string;
+    /**
+     * 主要颜色
+     */
     primary?: string;
+    /**
+     * 背景颜色
+     */
     background?: string;
   };
+  /**
+   * 是否显示下拉菜单
+   * @default false
+   */
   dropdown?: boolean;
+  /**
+   * 是否可添加标签页
+   * @default false
+   */
   addable?: boolean;
+  /**
+   * 标签页选项配置
+   */
   options?: TabsOption[];
+  /**
+   * 加载中的标签页键
+   */
   loadingValue?: TabItemKey;
+  /**
+   * 图标大小
+   */
   iconSize?: number;
+  /**
+   * 内容区域类名
+   */
   contentClass?: string;
+  /**
+   * 内容区域样式
+   */
   contentStyle?: CSSProperties | string;
 };
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oiij/chrome-tabs",
   "type": "module",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "A Vue Component Likes Chrome Tabs Style.",
   "author": "oiij",
   "license": "MIT",
@@ -28,14 +28,14 @@
   "peerDependencies": {
     "colord": "^2.9.3",
     "vue": "^3.5.27",
-    "@oiij/css-render": "0.0.10",
-    "@oiij/use": "0.0.41"
+    "@oiij/use": "0.0.46",
+    "@oiij/css-render": "0.0.11"
   },
   "devDependencies": {
     "colord": "^2.9.3",
     "vue": "^3.5.27",
-    "@oiij/css-render": "0.0.10",
-    "@oiij/use": "0.0.41"
+    "@oiij/css-render": "0.0.11",
+    "@oiij/use": "0.0.46"
   },
   "publishConfig": {
     "access": "public"