twcpt 0.0.2 → 0.0.3

package/README.md

@@ -1,4 +1,4 @@
-# TWCPT - Vue 3 + Element-plus 组件库
+# TWCPT - Vue 3 + Element-plus 组件库
 
 TWCPT 是一个基于 Vue 3、TypeScript 和 Element-plus 构建的现代企业级组件库。
 
@@ -102,18 +102,47 @@ yarn add twcpt
 pnpm add twcpt
 ```
 
-### 使用
+### 基础使用
 
 ```typescript
 import { createApp } from 'vue'
-import TWCPT from 'twcpt'
+import { twcptInit } from 'twcpt'
 import 'twcpt/dist/index.css'
 
 const app = createApp(App)
-app.use(TWCPT)
+
+// 初始化 TWCPT
+twcptInit({
+  app,
+  defaultLanguage: 'zh-CN', // 可选：设置默认语言
+  colors: {
+    primary: '#FF5722', // 可选：自定义主题色
+    blue: '#2196F3'
+  }
+})
+
 app.mount('#app')
 ```
 
+### 样式隔离
+
+为了避免 TWCPT 的颜色配置影响外部项目，所有 TWCPT 组件必须包裹在 `.twcpt-container` 容器内：
+
+```vue
+<template>
+  <div class="twcpt-container">
+    <!-- TWCPT 组件只在此容器内生效 -->
+    <JTWButton type="primary">按钮</JTWButton>
+    <JTWTable :data="tableData" />
+  </div>
+</template>
+```
+
+**重要说明：**
+- `.twcpt-container` 确保 TWCPT 的颜色变量不会影响外部项目
+- 如果 A 项目引用了 B 组件（TWCPT），两者的颜色配置互不影响
+- 每个使用 TWCPT 的区域都需要包裹 `.twcpt-container`
+
 ### 按需引入
 
 ```typescript

package/dist/charts.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./charts-DIdINgA4.cjs");exports.JChBar=e.index;exports.JChBarLine=e.index$1;exports.JChBubble=e.index$2;exports.JChLine=e.index$3;exports.JChPieDoughnut=e.index$4;exports.JChRadar=e.index$5;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./charts-lTMiYKQB.cjs");exports.JChBar=e.index;exports.JChBarLine=e.index$1;exports.JChBubble=e.index$2;exports.JChLine=e.index$3;exports.JChPieDoughnut=e.index$4;exports.JChRadar=e.index$5;

package/dist/charts.es.js

@@ -1,4 +1,4 @@
-import { i as e, a as s, b as C, c as J, d as r, e as i } from "./charts-CKv8I1ye.js";
+import { i as e, a as s, b as C, c as J, d as r, e as i } from "./charts-BRqaKjiE.js";
 export {
   e as JChBar,
   s as JChBarLine,

package/dist/components/j-tw-btn/index.d.ts

@@ -8,14 +8,26 @@ import { Arrayable } from 'element-plus/es/utils/typescript.mjs';
 declare const _default: DefineComponent<ExtractPropTypes<{
     size: {
         type: PropType<JTWBtnSizeType>;
-        default: "large";
+        default: "normal";
         validator: (value: JTWBtnSizeType) => boolean;
     };
     type: {
         type: PropType<JTWBtnTypeType>;
-        default: "primary";
+        default: "button";
         validator: (value: JTWBtnTypeType) => boolean;
     };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    outline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     label: {
         type: StringConstructor;
         default: string;
@@ -250,10 +262,20 @@ declare const _default: DefineComponent<ExtractPropTypes<{
         'j-tw-btn--large': boolean;
         'j-tw-btn--normal': boolean;
         'j-tw-btn--small': boolean;
-        'j-tw-btn--primary': boolean;
-        'j-tw-btn--secondary': boolean;
+        'j-tw-btn--button': boolean;
+        'j-tw-btn--outline': boolean;
+        'j-tw-btn--flat': boolean;
         'j-tw-btn--text': boolean;
     }>;
+    computedStyle: ComputedRef<{
+        '--j-btn-color': string;
+        '--j-btn-color-1': string;
+        '--j-btn-color-2': string;
+        '--j-btn-color-3': string;
+        '--j-btn-color-4': string;
+        '--j-btn-color-5': string;
+        '--j-btn-color-6': string;
+    }>;
     mergedTooltipConfig: ComputedRef<{
         placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
         effect: "dark" | "light";
@@ -269,14 +291,26 @@ declare const _default: DefineComponent<ExtractPropTypes<{
 }, string, PublicProps, Readonly< ExtractPropTypes<{
     size: {
         type: PropType<JTWBtnSizeType>;
-        default: "large";
+        default: "normal";
         validator: (value: JTWBtnSizeType) => boolean;
     };
     type: {
         type: PropType<JTWBtnTypeType>;
-        default: "primary";
+        default: "button";
         validator: (value: JTWBtnTypeType) => boolean;
     };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    outline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     label: {
         type: StringConstructor;
         default: string;
@@ -297,9 +331,12 @@ declare const _default: DefineComponent<ExtractPropTypes<{
     onClick?: ((_e: MouseEvent) => any) | undefined;
 }>, {
     type: JTWBtnTypeType;
+    flat: boolean;
     label: string;
     size: JTWBtnSizeType;
+    color: string;
     loading: boolean;
+    outline: boolean;
     tips: string | number;
     tooltipConfig: JTWBtnTooltipConfig;
 }, {}, {

package/dist/components/j-tw-btn/types.d.ts

@@ -7,8 +7,7 @@ export declare const JTWBtnSize: {
 };
 /** 按钮类型常量 */
 export declare const JTWBtnType: {
-    readonly PRIMARY: "primary";
-    readonly SECONDARY: "secondary";
+    readonly BUTTON: "button";
     readonly TEXT: "text";
 };
 /** 按钮尺寸类型 */
@@ -44,10 +43,26 @@ export interface JTWBtnProps {
     size?: JTWBtnSizeType;
     /**
      * 按钮类型
-     * @default 'primary'
-     * @values 'primary' | 'secondary' | 'text'
+     * @default 'button'
+     * @values 'button' | 'text'
      */
     type?: JTWBtnTypeType;
+    /**
+     * 按钮颜色
+     * @default 'primary'
+     * @values 'primary' | 'green' | 'orange' | 'red' | 'cyan' | 'brown' | 'yellow' | 'blue' | 'purple' | 'lime' | 'magenta' | 'pink'
+     */
+    color?: string;
+    /**
+     * 是否为 outline 样式
+     * @default false
+     */
+    outline?: boolean;
+    /**
+     * 是否为 flat 样式（浅灰色背景，黑色文字）
+     * @default false
+     */
+    flat?: boolean;
     /**
      * 按钮文本
      * @default ''