@oiij/chrome-tabs 0.0.19 → 0.0.21

package/README.md

@@ -1,96 +1,260 @@
-# Use Chrome-Tabs 🚀
+# @oiij/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/oiij/use/blob/main/packages/chrome-tabs/LICENSE)
 
-## 项目简介 📦
+## 简介
 
 Use Chrome-Tabs 是一个仿 Chrome 风格的标签页组件，为 Vue 3 应用提供流畅的标签页管理体验，帮助开发者构建具有类似浏览器标签页功能的应用。
 
-## 功能特点 ✨
+## 特点
 
-### Chrome 风格设计 🎨
+### 🎨 Chrome 风格设计
 
-- 💯 还原 Chrome 浏览器标签页外观
-- 🎯 支持标签页拖拽排序
-- 🔥 流畅的动画过渡效果
+- 🖥️ 还原 Chrome 浏览器标签页外观
+- 🖱️ 支持标签页拖拽排序
+- ✨ 流畅的动画过渡效果
 
-### 模块化设计 🧩
+### 🧩 模块化设计
 
-- 📁 采用模块化架构，组件独立封装
+- 🏗️ 采用模块化架构，组件独立封装
 - 📦 支持按需导入，减小打包体积
-- 🔧 清晰的文件结构，易于维护和扩展
+- 📁 清晰的文件结构，易于维护和扩展
 
-### 类型安全 🔒
+### 🔒 类型安全
 
 - 📝 完整的 TypeScript 类型定义
 - 💡 提供准确的类型推断和代码提示
-- 🎯 支持 Vue 3 的 Composition API 类型系统
+- ⚡ 支持 Vue 3 的 Composition API 类型系统
 
-### 轻量高效 ⚡
+### 🚀 轻量高效
 
-- 🚀 核心代码精简，无额外依赖
-- 🏃 优化的性能表现，最小化运行时开销
-- 📦 支持 Tree Shaking，进一步减小打包体积
+- 🪶 核心代码精简，无额外依赖
+- ⚡ 优化的性能表现，最小化运行时开销
+- 📉 支持 Tree Shaking，进一步减小打包体积
 
-### 功能丰富 🎨
-
-- 📑 支持多标签页管理
-- 🔄 支持标签页切换和关闭
-- ✨ 支持自定义样式和主题
-
-## 安装 📥
-
-### 使用 pnpm 🐱
+## 安装
 
 ```bash
+# 使用 pnpm
 pnpm add @oiij/chrome-tabs
-```
-
-### 使用 npm 📦
 
-```bash
+# 使用 npm
 npm install @oiij/chrome-tabs
-```
 
-### 使用 yarn 🧶
-
-```bash
+# 使用 yarn
 yarn add @oiij/chrome-tabs
 ```
 
-## 快速开始 🌟
+## 依赖
+
+- `vue`: ^3.0.0
+- `@oiij/css-render`: workspace:\*
+- `@oiij/use`: workspace:\*
+- `colord`: ^2.0.0
+
+## 示例
 
 ### 基础使用
 
 ```vue
 <script setup>
 import { ChromeTabs } from '@oiij/chrome-tabs'
+import { ref } from 'vue'
+
+const value = ref('tab1')
+const options = [
+  { key: 'tab1', label: '标签1' },
+  { key: 'tab2', label: '标签2' },
+  { key: 'tab3', label: '标签3' },
+]
+</script>
+
+<template>
+  <ChromeTabs v-model:value="value" :options="options" />
+</template>
+```
+
+### 可关闭标签页
+
+```vue
+<script setup>
+import { ChromeTabs } from '@oiij/chrome-tabs'
+import { reactive, ref } from 'vue'
+
+const value = ref('tab1')
+const options = reactive([
+  { key: 'tab1', label: '标签1', closable: true },
+  { key: 'tab2', label: '标签2', closable: true },
+  { key: 'tab3', label: '标签3', closable: true },
+])
+
+function onClose(key) {
+  const index = options.findIndex(f => f.key === key)
+  options.splice(index, 1)
+}
 </script>
 
 <template>
-  <ChromeTabs />
+  <ChromeTabs v-model:value="value" :options="options" @close="onClose" />
 </template>
 ```
 
-## 在线文档 📚
+### 可添加标签页
 
-[在线文档](https://oiij-use.vercel.app/chrome-tabs/chrome-tabs) 📖
+```vue
+<script setup>
+import { ChromeTabs } from '@oiij/chrome-tabs'
+import { reactive, ref } from 'vue'
+
+const value = ref('tab1')
+const options = reactive([
+  { key: 'tab1', label: '标签1', closable: true },
+])
+
+function handleAdd() {
+  const key = `tab${options.length + 1}`
+  options.push({ key, label: key, closable: true })
+  value.value = key
+}
+
+function onClose(key) {
+  const index = options.findIndex(f => f.key === key)
+  options.splice(index, 1)
+}
+</script>
 
-## 贡献指南 🤝
+<template>
+  <ChromeTabs
+    v-model:value="value"
+    :options="options"
+    addable
+    @add="handleAdd"
+    @close="onClose"
+  />
+</template>
+```
 
-欢迎贡献代码、报告问题或提出新功能建议！
+### 自定义颜色
 
-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 📥
+```vue
+<script setup>
+import { ChromeTabs } from '@oiij/chrome-tabs'
+import { ref } from 'vue'
+
+const value = ref('tab1')
+const options = [
+  { key: 'tab1', label: '标签1' },
+  { key: 'tab2', label: '标签2' },
+]
+const colors = {
+  background: '#E8F5E9',
+  active: '#C8E6C9',
+  primary: '#4CAF50',
+}
+</script>
 
-## 许可证 📄
+<template>
+  <ChromeTabs v-model:value="value" :options="options" :colors="colors" />
+</template>
+```
 
-本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情 📑
+## API
+
+### `<ChromeTabs />`
+
+Chrome 标签页组件。
+
+#### Props
+
+| 属性           | 类型                      | 默认值  | 说明               |
+| -------------- | ------------------------- | ------- | ------------------ |
+| `value`        | `TabItemKey`              | -       | 当前激活的标签页键 |
+| `options`      | `TabsOption[]`            | `[]`    | 标签页选项配置     |
+| `colors`       | `object`                  | -       | 颜色配置           |
+| `dropdown`     | `boolean`                 | `false` | 是否显示下拉菜单   |
+| `addable`      | `boolean`                 | `false` | 是否可添加标签页   |
+| `loadingValue` | `TabItemKey`              | -       | 加载中的标签页键   |
+| `iconSize`     | `number`                  | `20`    | 图标大小           |
+| `contentClass` | `string`                  | -       | 内容区域类名       |
+| `contentStyle` | `CSSProperties \| string` | -       | 内容区域样式       |
+
+#### Events
+
+| 事件           | 参数                               | 说明                 |
+| -------------- | ---------------------------------- | -------------------- |
+| `update:value` | `(value: TabItemKey)`              | 激活标签页变化时触发 |
+| `click`        | `(key: TabItemKey, index: number)` | 点击标签页时触发     |
+| `contextmenu`  | `(key: TabItemKey, index: number)` | 右键点击标签页时触发 |
+| `close`        | `(key: TabItemKey, index: number)` | 关闭标签页时触发     |
+| `add`          | -                                  | 点击添加按钮时触发   |
+
+#### Slots
+
+| 插槽     | 说明     |
+| -------- | -------- |
+| `prefix` | 前缀内容 |
+| `suffix` | 后缀内容 |
+
+### `<ChromeTabItem />`
+
+Chrome 标签页项组件。
+
+#### Props
+
+| 属性          | 类型                  | 默认值  | 说明       |
+| ------------- | --------------------- | ------- | ---------- |
+| `itemKey`     | `TabItemKey`          | -       | 标签页键   |
+| `itemIndex`   | `number`              | -       | 标签页索引 |
+| `activeIndex` | `number`              | `0`     | 激活索引   |
+| `label`       | `string \| function`  | -       | 标签页标题 |
+| `icon`        | `function`            | -       | 标签页图标 |
+| `closable`    | `boolean \| function` | `false` | 是否可关闭 |
+| `disabled`    | `boolean \| function` | `false` | 是否禁用   |
+| `loading`     | `boolean \| function` | `false` | 是否加载中 |
+| `loadingIcon` | `function`            | -       | 加载图标   |
+| `iconSize`    | `number`              | `20`    | 图标大小   |
+
+## 类型定义
+
+```ts
+import type { CSSProperties, VNode } from 'vue'
+
+type VNodeChild = VNode | string | number | undefined | void | null | boolean
+type TabItemKey = string | number
+
+export type TabsOption = {
+  key: TabItemKey
+  label: string | ((key: TabItemKey, index: number) => VNodeChild)
+  icon?: (key: TabItemKey, index: number) => VNodeChild
+  closable?: boolean | ((key: TabItemKey, index: number) => boolean)
+  disabled?: boolean | ((key: TabItemKey, index: number) => boolean)
+  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
+}
+
+export type TabsProps = {
+  value?: TabItemKey
+  colors?: {
+    active?: string
+    primary?: string
+    background?: string
+  }
+  dropdown?: boolean
+  addable?: boolean
+  options?: TabsOption[]
+  loadingValue?: TabItemKey
+  iconSize?: number
+  contentClass?: string
+  contentStyle?: CSSProperties | string
+}
+```
 
-## 联系方式 📞
+## 在线文档
 
-- GitHub: [https://github.com/Eiog/@oiij/chrome-tabs](https://github.com/Eiog/@oiij/chrome-tabs) 🌟
+[在线文档](https://oiij-use.vercel.app/chrome-tabs/chrome-tabs)

package/dist/ChromeTabItem.js

@@ -2,7 +2,6 @@ import { tabsItemCssName } from "./cssr.js";
 import LineMdLoadingTwotoneLoop_default from "./icons/LineMdLoadingTwotoneLoop.js";
 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/ChromeTabItem.vue
 const _sfc_main = /* @__PURE__ */ defineComponent({
 	__name: "ChromeTabItem",
@@ -84,7 +83,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ChromeTabItem_default = _sfc_main;
-
 //#endregion
-export { ChromeTabItem_default as default };
+export { _sfc_main as default };

package/dist/ChromeTabItem.vue.d.ts

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

package/dist/ChromeTabs.js

@@ -1,12 +1,11 @@
 import { tabsCssName, tabsCssr, tabsItemCssName } from "./cssr.js";
-import ChromeTabItem_default from "./ChromeTabItem.js";
+import _sfc_main$1 from "./ChromeTabItem.js";
 import RiAddLine_default from "./icons/RiAddLine.js";
 import RiArrowDropDownLine_default from "./icons/RiArrowDropDownLine.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/ChromeTabs.vue
 const _sfc_main = /* @__PURE__ */ defineComponent({
 	__name: "ChromeTabs",
@@ -91,7 +90,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(ChromeTabItem_default, mergeProps({
+						return openBlock(), createBlock(_sfc_main$1, mergeProps({
 							key,
 							loading: __props.loadingValue === key
 						}, { ref_for: true }, item, {
@@ -125,7 +124,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ChromeTabs_default = _sfc_main;
-
 //#endregion
-export { ChromeTabs_default as default };
+export { _sfc_main as default };

package/dist/ChromeTabs.vue.d.ts

@@ -1,5 +1,5 @@
 import { TabItemKey, TabsProps } from "./index.js";
-import * as vue0 from "vue";
+import * as vue from "vue";
 
 //#region src/ChromeTabs.vue.d.ts
 declare var __VLS_6: {}, __VLS_23: {};
@@ -8,19 +8,19 @@ type __VLS_Slots = {} & {
 } & {
   suffix?: (props: typeof __VLS_23) => any;
 };
-declare const __VLS_base: vue0.DefineComponent<TabsProps, {}, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {} & {
+declare const __VLS_base: vue.DefineComponent<TabsProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {
   click: (v: TabItemKey, index: number) => any;
   close: (v: TabItemKey, index: number) => any;
   contextmenu: (v: TabItemKey, index: number) => any;
   "update:value": (v?: TabItemKey | null | undefined) => any;
   add: () => any;
-}, string, vue0.PublicProps, Readonly<TabsProps> & Readonly<{
+}, string, vue.PublicProps, Readonly<TabsProps> & Readonly<{
   onClick?: ((v: TabItemKey, index: number) => any) | undefined;
   onClose?: ((v: TabItemKey, index: number) => any) | undefined;
   onContextmenu?: ((v: TabItemKey, index: number) => any) | undefined;
   "onUpdate:value"?: ((v?: TabItemKey | null | undefined) => any) | undefined;
   onAdd?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/_virtual/_/plugin-vue/export-helper.js

@@ -4,6 +4,5 @@ var export_helper_default = (sfc, props) => {
 	for (const [key, val] of props) target[key] = val;
 	return target;
 };
-
 //#endregion
-export { export_helper_default as default };
+export { export_helper_default as default };

package/dist/cssr.js

@@ -1,5 +1,4 @@
 import { useBem } from "@oiij/css-render";
-
 //#region src/cssr.ts
 const { cssr, plugin, namespace } = useBem();
 const { c, cB, cE, cM, cNotM } = {
@@ -147,6 +146,5 @@ function tabsCssr() {
 		}, [cE("icon", { backgroundColor: "var(--active-background-color-dark)" }, [c("&:hover", { backgroundColor: "var(--primary-color-dark)" })])]), cB("chrome-tabs-item", {}, [cNotM("active", [c("&:hover", {}, [cE("content", { backgroundColor: "var(--primary-color-dark)" })])]), cE("background", {}, [cE("block", { backgroundColor: "var(--active-background-color-dark)" }), c("svg", { fill: "var(--active-background-color-dark)" })])])])
 	]);
 }
-
 //#endregion
-export { tabsCssName, tabsCssr, tabsItemCssName };
+export { tabsCssName, tabsCssr, tabsItemCssName };

package/dist/icons/LineMdLoadingTwotoneLoop.js

@@ -1,6 +1,5 @@
 import export_helper_default from "../_virtual/_/plugin-vue/export-helper.js";
-import { createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, openBlock } from "vue";
-
+import { createCommentVNode, createElementBlock, createStaticVNode, openBlock } from "vue";
 //#region src/icons/LineMdLoadingTwotoneLoop.vue
 const _sfc_main = { name: "LineMdLoadingTwotoneLoop" };
 const _hoisted_1 = {
@@ -13,6 +12,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("svg", _hoisted_1, [createCommentVNode(" Icon from Material Line Icons by Vjacheslav Trushkin - https://github.com/cyberalien/line-md/blob/master/license.txt "), _cache[0] || (_cache[0] = createStaticVNode("<g fill=\"none\" stroke=\"#757575\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path stroke-dasharray=\"16\" stroke-dashoffset=\"16\" d=\"M12 3c4.97 0 9 4.03 9 9\"><animate fill=\"freeze\" attributeName=\"stroke-dashoffset\" dur=\"0.3s\" values=\"16;0\"></animate><animateTransform attributeName=\"transform\" dur=\"1.5s\" repeatCount=\"indefinite\" type=\"rotate\" values=\"0 12 12;360 12 12\"></animateTransform></path><path stroke-dasharray=\"64\" stroke-dashoffset=\"64\" stroke-opacity=\".3\" d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"><animate fill=\"freeze\" attributeName=\"stroke-dashoffset\" dur=\"1.2s\" values=\"64;0\"></animate></path></g>", 1))]);
 }
 var LineMdLoadingTwotoneLoop_default = /* @__PURE__ */ export_helper_default(_sfc_main, [["render", _sfc_render]]);
-
 //#endregion
-export { LineMdLoadingTwotoneLoop_default as default };
+export { LineMdLoadingTwotoneLoop_default as default };

package/dist/icons/RiAddLine.js

@@ -1,6 +1,5 @@
 import export_helper_default from "../_virtual/_/plugin-vue/export-helper.js";
 import { createCommentVNode, createElementBlock, createElementVNode, openBlock } from "vue";
-
 //#region src/icons/RiAddLine.vue
 const _sfc_main = { name: "RiAddLine" };
 const _hoisted_1 = {
@@ -16,6 +15,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	}, null, -1))]);
 }
 var RiAddLine_default = /* @__PURE__ */ export_helper_default(_sfc_main, [["render", _sfc_render]]);
-
 //#endregion
-export { RiAddLine_default as default };
+export { RiAddLine_default as default };

package/dist/icons/RiArrowDropDownLine.js

@@ -1,6 +1,5 @@
 import export_helper_default from "../_virtual/_/plugin-vue/export-helper.js";
 import { createCommentVNode, createElementBlock, createElementVNode, openBlock } from "vue";
-
 //#region src/icons/RiArrowDropDownLine.vue
 const _sfc_main = { name: "RiArrowDropDownLine" };
 const _hoisted_1 = {
@@ -16,6 +15,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	}, null, -1))]);
 }
 var RiArrowDropDownLine_default = /* @__PURE__ */ export_helper_default(_sfc_main, [["render", _sfc_render]]);
-
 //#endregion
-export { RiArrowDropDownLine_default as default };
+export { RiArrowDropDownLine_default as default };

package/dist/icons/RiCloseLine.js

@@ -1,6 +1,5 @@
 import export_helper_default from "../_virtual/_/plugin-vue/export-helper.js";
 import { createCommentVNode, createElementBlock, createElementVNode, openBlock } from "vue";
-
 //#region src/icons/RiCloseLine.vue
 const _sfc_main = { name: "RiCloseLine" };
 const _hoisted_1 = {
@@ -16,6 +15,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 	}, null, -1))]);
 }
 var RiCloseLine_default = /* @__PURE__ */ export_helper_default(_sfc_main, [["render", _sfc_render]]);
-
 //#endregion
-export { RiCloseLine_default as default };
+export { RiCloseLine_default as default };

package/dist/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oiij/chrome-tabs",
   "type": "module",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "description": "A Vue Component Likes Chrome Tabs Style.",
   "author": "oiij",
   "license": "MIT",
@@ -27,15 +27,15 @@
   ],
   "peerDependencies": {
     "colord": "^2.9.3",
-    "vue": "^3.5.27",
-    "@oiij/css-render": "0.0.11",
-    "@oiij/use": "0.0.48"
+    "vue": "^3.5.30",
+    "@oiij/css-render": "0.0.13",
+    "@oiij/use": "0.0.51"
   },
   "devDependencies": {
     "colord": "^2.9.3",
-    "vue": "^3.5.27",
-    "@oiij/css-render": "0.0.11",
-    "@oiij/use": "0.0.48"
+    "vue": "^3.5.30",
+    "@oiij/css-render": "0.0.13",
+    "@oiij/use": "0.0.51"
   },
   "publishConfig": {
     "access": "public"