twcpt 0.0.2 → 0.0.4

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";

package/dist/charts.d.ts

@@ -1,7 +0,0 @@
-import { default as JChBar } from './components/j-ch-bar/index';
-import { default as JChBarLine } from './components/j-ch-bar-line/index';
-import { default as JChBubble } from './components/j-ch-bubble/index';
-import { default as JChLine } from './components/j-ch-line/index';
-import { default as JChPieDoughnut } from './components/j-ch-pie-doughnut/index';
-import { default as JChRadar } from './components/j-ch-radar/index';
-export { JChBar, JChBarLine, JChBubble, JChLine, JChPieDoughnut, JChRadar, };

package/dist/charts.es.js

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

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;
@@ -25,7 +37,7 @@ declare const _default: DefineComponent<ExtractPropTypes<{
         default: boolean;
     };
     tips: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
     tooltipConfig: {
@@ -124,7 +136,7 @@ declare const _default: DefineComponent<ExtractPropTypes<{
         tag: string | Component;
     }> & Omit<Readonly< ButtonProps> & Readonly<{
         onClick?: ((evt: MouseEvent) => any) | undefined;
-    }>, "type" | "text" | "ref" | "size" | "round" | "disabled" | "nativeType" | "loadingIcon" | "plain" | "dashed" | "autoInsertSpace" | "tag" | "shouldAddSpace"> & ShallowUnwrapRef<{
+    }>, "text" | "size" | "type" | "disabled" | "nativeType" | "loadingIcon" | "plain" | "round" | "dashed" | "autoInsertSpace" | "tag" | "ref" | "shouldAddSpace"> & ShallowUnwrapRef<{
         ref: Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
         size: ComputedRef<"" | "default" | "large" | "small">;
         type: ComputedRef<"default" | "" | "info" | "primary" | "success" | "warning" | "text" | "danger">;
@@ -229,7 +241,7 @@ declare const _default: DefineComponent<ExtractPropTypes<{
         tag: string | Component;
     }> & Omit<Readonly< ButtonProps> & Readonly<{
         onClick?: ((evt: MouseEvent) => any) | undefined;
-    }>, "type" | "text" | "ref" | "size" | "round" | "disabled" | "nativeType" | "loadingIcon" | "plain" | "dashed" | "autoInsertSpace" | "tag" | "shouldAddSpace"> & ShallowUnwrapRef<{
+    }>, "text" | "size" | "type" | "disabled" | "nativeType" | "loadingIcon" | "plain" | "round" | "dashed" | "autoInsertSpace" | "tag" | "ref" | "shouldAddSpace"> & ShallowUnwrapRef<{
         ref: Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
         size: ComputedRef<"" | "default" | "large" | "small">;
         type: ComputedRef<"default" | "" | "info" | "primary" | "success" | "warning" | "text" | "danger">;
@@ -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;
@@ -286,7 +320,7 @@ declare const _default: DefineComponent<ExtractPropTypes<{
         default: boolean;
     };
     tips: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
     tooltipConfig: {
@@ -296,9 +330,12 @@ declare const _default: DefineComponent<ExtractPropTypes<{
 }>> & Readonly<{
     onClick?: ((_e: MouseEvent) => any) | undefined;
 }>, {
+    size: JTWBtnSizeType;
     type: JTWBtnTypeType;
+    color: string;
+    outline: boolean;
+    flat: boolean;
     label: string;
-    size: JTWBtnSizeType;
     loading: boolean;
     tips: string | number;
     tooltipConfig: JTWBtnTooltipConfig;
@@ -481,7 +518,7 @@ declare const _default: DefineComponent<ExtractPropTypes<{
             strategy: "absolute" | "fixed";
             arrowOffset: number;
             showArrow: boolean;
-            role: "dialog" | "menu" | "tooltip" | "grid" | "group" | "listbox" | "navigation" | "tree";
+            role: "dialog" | "grid" | "group" | "listbox" | "menu" | "navigation" | "tooltip" | "tree";
             content: string;
             showAfter: number;
             hideAfter: number;
@@ -532,7 +569,7 @@ declare const _default: DefineComponent<ExtractPropTypes<{
             strategy: "absolute" | "fixed";
             arrowOffset: number;
             showArrow: boolean;
-            role: "dialog" | "menu" | "tooltip" | "grid" | "group" | "listbox" | "navigation" | "tree";
+            role: "dialog" | "grid" | "group" | "listbox" | "menu" | "navigation" | "tooltip" | "tree";
             content: string;
             showAfter: number;
             hideAfter: number;
@@ -588,7 +625,7 @@ declare const _default: DefineComponent<ExtractPropTypes<{
         strategy: "absolute" | "fixed";
         arrowOffset: number;
         showArrow: boolean;
-        role: "dialog" | "menu" | "tooltip" | "grid" | "group" | "listbox" | "navigation" | "tree";
+        role: "dialog" | "grid" | "group" | "listbox" | "menu" | "navigation" | "tooltip" | "tree";
         content: string;
         showAfter: number;
         hideAfter: number;

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 ''

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

@@ -0,0 +1,230 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, CreateComponentPublicInstanceWithMixins, GlobalComponents, GlobalDirectives, ComponentProvideOptions, ComponentOptionsBase, VNodeProps, AllowedComponentProps, ComponentCustomProps, ObjectPlugin } from 'vue';
+import { CheckboxProps, CheckboxValueType, ComponentSize, CheckboxGroupProps, CheckboxGroupValueType } from 'element-plus';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
+    ElCheckbox: {
+        new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< CheckboxProps> & Readonly<{
+            onChange?: ((val: CheckboxValueType) => any) | undefined;
+            "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
+        }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+            change: (val: CheckboxValueType) => void;
+            "update:modelValue": (val: CheckboxValueType) => void;
+        }, PublicProps, {
+            value: string | boolean | number | object;
+            label: string | boolean | number | object;
+            disabled: boolean;
+            validateEvent: boolean;
+            modelValue: number | string | boolean;
+            id: string;
+            name: string;
+            trueValue: string | number;
+            falseValue: string | number;
+            trueLabel: string | number;
+            falseLabel: string | number;
+        }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly< CheckboxProps> & Readonly<{
+            onChange?: ((val: CheckboxValueType) => any) | undefined;
+            "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
+        }>, {}, {}, {}, {}, {
+            value: string | boolean | number | object;
+            label: string | boolean | number | object;
+            disabled: boolean;
+            validateEvent: boolean;
+            modelValue: number | string | boolean;
+            id: string;
+            name: string;
+            trueValue: string | number;
+            falseValue: string | number;
+            trueLabel: string | number;
+            falseLabel: string | number;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & ComponentOptionsBase<Readonly< CheckboxProps> & Readonly<{
+        onChange?: ((val: CheckboxValueType) => any) | undefined;
+        "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
+    }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+        change: (val: CheckboxValueType) => void;
+        "update:modelValue": (val: CheckboxValueType) => void;
+    }, string, {
+        value: string | boolean | number | object;
+        label: string | boolean | number | object;
+        disabled: boolean;
+        validateEvent: boolean;
+        modelValue: number | string | boolean;
+        id: string;
+        name: string;
+        trueValue: string | number;
+        falseValue: string | number;
+        trueLabel: string | number;
+        falseLabel: string | number;
+    }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    }) & ObjectPlugin & {
+        setPropsDefaults: (defaults: Partial<{
+            readonly modelValue?: number | string | boolean | undefined;
+            readonly label?: string | boolean | number | object | undefined;
+            readonly value?: string | boolean | number | object | undefined;
+            readonly indeterminate?: boolean | undefined;
+            readonly disabled?: boolean | undefined;
+            readonly checked?: boolean | undefined;
+            readonly name?: string | undefined;
+            readonly trueValue?: string | number | undefined;
+            readonly falseValue?: string | number | undefined;
+            readonly trueLabel?: string | number | undefined;
+            readonly falseLabel?: string | number | undefined;
+            readonly id?: string | undefined;
+            readonly border?: boolean | undefined;
+            readonly size?: ComponentSize | undefined;
+            readonly tabindex?: string | number | undefined;
+            readonly validateEvent?: boolean | undefined;
+            readonly ariaLabel?: string | undefined;
+            readonly ariaControls?: string | undefined;
+            readonly onChange?: ((val: CheckboxValueType) => any) | undefined | undefined;
+            readonly "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined | undefined;
+        } & VNodeProps & AllowedComponentProps & ComponentCustomProps>) => void;
+    } & {
+        CheckboxButton: {
+            new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< CheckboxProps> & Readonly<{
+                onChange?: ((val: CheckboxValueType) => any) | undefined;
+                "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
+            }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+                change: (val: CheckboxValueType) => void;
+                "update:modelValue": (val: CheckboxValueType) => void;
+            }, PublicProps, {
+                value: string | boolean | number | object;
+                label: string | boolean | number | object;
+                disabled: boolean;
+                validateEvent: boolean;
+                modelValue: number | string | boolean;
+                id: string;
+                name: string;
+                trueValue: string | number;
+                falseValue: string | number;
+                trueLabel: string | number;
+                falseLabel: string | number;
+            }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly< CheckboxProps> & Readonly<{
+                onChange?: ((val: CheckboxValueType) => any) | undefined;
+                "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
+            }>, {}, {}, {}, {}, {
+                value: string | boolean | number | object;
+                label: string | boolean | number | object;
+                disabled: boolean;
+                validateEvent: boolean;
+                modelValue: number | string | boolean;
+                id: string;
+                name: string;
+                trueValue: string | number;
+                falseValue: string | number;
+                trueLabel: string | number;
+                falseLabel: string | number;
+            }>;
+            __isFragment?: never;
+            __isTeleport?: never;
+            __isSuspense?: never;
+        } & ComponentOptionsBase<Readonly< CheckboxProps> & Readonly<{
+            onChange?: ((val: CheckboxValueType) => any) | undefined;
+            "onUpdate:modelValue"?: ((val: CheckboxValueType) => any) | undefined;
+        }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+            change: (val: CheckboxValueType) => void;
+            "update:modelValue": (val: CheckboxValueType) => void;
+        }, string, {
+            value: string | boolean | number | object;
+            label: string | boolean | number | object;
+            disabled: boolean;
+            validateEvent: boolean;
+            modelValue: number | string | boolean;
+            id: string;
+            name: string;
+            trueValue: string | number;
+            falseValue: string | number;
+            trueLabel: string | number;
+            falseLabel: string | number;
+        }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
+            $slots: {
+                default?: (props: {}) => any;
+            };
+        });
+        CheckboxGroup: {
+            new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly< CheckboxGroupProps> & Readonly<{
+                onChange?: ((val: CheckboxValueType[]) => any) | undefined;
+                "onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
+            }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+                change: (val: CheckboxValueType[]) => void;
+                "update:modelValue": (val: CheckboxGroupValueType) => void;
+            }, PublicProps, {
+                type: "checkbox" | "button";
+                props: {
+                    value?: string;
+                    label?: string;
+                    disabled?: string;
+                };
+                disabled: boolean;
+                validateEvent: boolean;
+                modelValue: CheckboxGroupValueType;
+                tag: string;
+            }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly< CheckboxGroupProps> & Readonly<{
+                onChange?: ((val: CheckboxValueType[]) => any) | undefined;
+                "onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
+            }>, {}, {}, {}, {}, {
+                type: "checkbox" | "button";
+                props: {
+                    value?: string;
+                    label?: string;
+                    disabled?: string;
+                };
+                disabled: boolean;
+                validateEvent: boolean;
+                modelValue: CheckboxGroupValueType;
+                tag: string;
+            }>;
+            __isFragment?: never;
+            __isTeleport?: never;
+            __isSuspense?: never;
+        } & ComponentOptionsBase<Readonly< CheckboxGroupProps> & Readonly<{
+            onChange?: ((val: CheckboxValueType[]) => any) | undefined;
+            "onUpdate:modelValue"?: ((val: CheckboxGroupValueType) => any) | undefined;
+        }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+            change: (val: CheckboxValueType[]) => void;
+            "update:modelValue": (val: CheckboxGroupValueType) => void;
+        }, string, {
+            type: "checkbox" | "button";
+            props: {
+                value?: string;
+                label?: string;
+                disabled?: string;
+            };
+            disabled: boolean;
+            validateEvent: boolean;
+            modelValue: CheckboxGroupValueType;
+            tag: string;
+        }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
+            $slots: {
+                default?: (props: {}) => any;
+            };
+        });
+    };
+}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,35 @@
+import { DefineComponent } from 'vue';
+export interface JTWCheckboxProps {
+    modelValue?: boolean | string | number;
+    label?: string | number | boolean;
+    trueLabel?: string | number;
+    falseLabel?: string | number;
+    disabled?: boolean;
+    border?: boolean;
+    size?: 'large' | 'default' | 'small';
+    name?: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    validateEvent?: boolean;
+    tabindex?: string | number;
+    id?: string;
+}
+export interface JTWCheckboxEmits {
+    (e: 'update:modelValue', value: boolean | string | number): void;
+    (e: 'change', value: boolean | string | number): void;
+}
+export interface JTWCheckboxSlots {
+    default?: () => any;
+}
+export type JTWCheckboxEmitsOptions = {
+    'update:modelValue': (value: boolean | string | number) => true;
+    change: (value: boolean | string | number) => true;
+};
+export type JTWCheckboxComponent = DefineComponent<JTWCheckboxProps, {}, {}, {}, {}, {}, {}, JTWCheckboxEmitsOptions>;
+export type JTWCheckboxInstance = InstanceType<JTWCheckboxComponent>;
+export interface JTWCheckboxTemplateProps extends JTWCheckboxProps {
+    'onUpdate:modelValue'?: (value: boolean | string | number) => void;
+    onChange?: (value: boolean | string | number) => void;
+    class?: string | Record<string, boolean> | Array<string | Record<string, boolean>>;
+    style?: string | Record<string, string>;
+}