@oiij/chrome-tabs 0.0.17 → 0.0.19

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/{TabItem.js → ChromeTabItem.js}

@@ -3,9 +3,9 @@ import LineMdLoadingTwotoneLoop_default from "./icons/LineMdLoadingTwotoneLoop.j
 import RiCloseLine_default from "./icons/RiCloseLine.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, normalizeClass, normalizeStyle, openBlock, resolveDynamicComponent, unref, withModifiers } from "vue";
 
-//#region src/TabItem.vue
+//#region src/ChromeTabItem.vue
 const _sfc_main = /* @__PURE__ */ defineComponent({
-	__name: "TabItem",
+	__name: "ChromeTabItem",
 	props: {
 		label: { type: [String, Function] },
 		icon: { type: Function },
@@ -84,7 +84,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var TabItem_default = _sfc_main;
+var ChromeTabItem_default = _sfc_main;
 
 //#endregion
-export { TabItem_default as default };
+export { ChromeTabItem_default as default };

package/dist/ChromeTabItem.vue.d.ts

@@ -0,0 +1,16 @@
+import { TabsItemProps } from "./index.js";
+import * as vue4 from "vue";
+
+//#region src/ChromeTabItem.vue.d.ts
+declare const __VLS_export: vue4.DefineComponent<TabsItemProps, {}, {}, {}, {}, vue4.ComponentOptionsMixin, vue4.ComponentOptionsMixin, {} & {
+  itemClick: (ev: MouseEvent) => any;
+  itemContextmenu: (ev: MouseEvent) => any;
+  itemClose: () => any;
+}, string, vue4.PublicProps, Readonly<TabsItemProps> & Readonly<{
+  onItemClick?: ((ev: MouseEvent) => any) | undefined;
+  onItemContextmenu?: ((ev: MouseEvent) => any) | undefined;
+  onItemClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, vue4.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };

package/dist/{Tabs.js → ChromeTabs.js}

@@ -1,15 +1,15 @@
 import { tabsCssName, tabsCssr, tabsItemCssName } from "./cssr.js";
+import ChromeTabItem_default from "./ChromeTabItem.js";
 import RiAddLine_default from "./icons/RiAddLine.js";
 import RiArrowDropDownLine_default from "./icons/RiArrowDropDownLine.js";
-import TabItem_default from "./TabItem.js";
 import { Fragment, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, unref, useTemplateRef, watch, withCtx } from "vue";
 import { useStyle } from "@oiij/css-render";
 import { useScrollView } from "@oiij/use";
 import { colord } from "colord";
 
-//#region src/Tabs.vue
+//#region src/ChromeTabs.vue
 const _sfc_main = /* @__PURE__ */ defineComponent({
-	__name: "Tabs",
+	__name: "ChromeTabs",
 	props: {
 		value: {},
 		colors: {},
@@ -91,7 +91,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 					class: normalizeClass([`${unref(tabsCssName)}__scroll`])
 				}, {
 					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, ({ key, ...item }, index) => {
-						return openBlock(), createBlock(TabItem_default, mergeProps({
+						return openBlock(), createBlock(ChromeTabItem_default, mergeProps({
 							key,
 							loading: __props.loadingValue === key
 						}, { ref_for: true }, item, {
@@ -125,7 +125,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var Tabs_default = _sfc_main;
+var ChromeTabs_default = _sfc_main;
 
 //#endregion
-export { Tabs_default as default };
+export { ChromeTabs_default as default };

package/dist/{Tabs.vue.d.ts → ChromeTabs.vue.d.ts}

@@ -1,7 +1,7 @@
 import { TabItemKey, TabsProps } from "./index.js";
 import * as vue0 from "vue";
 
-//#region src/Tabs.vue.d.ts
+//#region src/ChromeTabs.vue.d.ts
 declare var __VLS_6: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
   prefix?: (props: typeof __VLS_6) => any;

package/dist/index.d.ts

@@ -1,43 +1,145 @@
-import { _default } from "./Tabs.vue.js";
+import { _default } from "./ChromeTabItem.vue.js";
+import { _default as _default$1 } from "./ChromeTabs.vue.js";
 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
-export { _default as CTabs, TabItemKey, TabsItemProps, TabsOption, TabsProps };
+export { _default as ChromeTabItem, _default$1 as ChromeTabs, TabItemKey, TabsItemProps, TabsOption, TabsProps };

package/dist/index.js

@@ -1,3 +1,4 @@
-import Tabs_default from "./Tabs.js";
+import ChromeTabItem_default from "./ChromeTabItem.js";
+import ChromeTabs_default from "./ChromeTabs.js";
 
-export { Tabs_default as CTabs };
+export { ChromeTabItem_default as ChromeTabItem, ChromeTabs_default as ChromeTabs };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oiij/chrome-tabs",
   "type": "module",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "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/css-render": "0.0.11",
+    "@oiij/use": "0.0.48"
   },
   "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.48"
   },
   "publishConfig": {
     "access": "public"