common_component_library_vue 0.1.1 → 0.1.3

package/dist-lib/types/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * Common Component Library — Vue 3 + TypeScript
+ * Common Component Library 鈥?Vue 3 + TypeScript
  * Design language: Stripe-inspired, defined in /DESIGN.md
  *
  * Usage:
@@ -24,11 +24,25 @@ import CcModal from './components/Modal/CcModal.vue';
 import CcTooltip from './components/Tooltip/CcTooltip.vue';
 import CcSpinner from './components/Spinner/CcSpinner.vue';
 import CcDivider from './components/Divider/CcDivider.vue';
-export { CcButton, CcInput, CcTextarea, CcSelect, CcSwitch, CcCheckbox, CcRadio, CcCard, CcTag, CcBadge, CcAlert, CcModal, CcTooltip, CcSpinner, CcDivider, };
+import CcTable from './components/Table/CcTable.vue';
+import CcBarChart from './components/Chart/CcBarChart.vue';
+import CcPieChart from './components/Chart/CcPieChart.vue';
+import CcLineChart from './components/Chart/CcLineChart.vue';
+import CcThemeProvider from './components/ThemeProvider/CcThemeProvider.vue';
+export { CcButton, CcInput, CcTextarea, CcSelect, CcSwitch, CcCheckbox, CcRadio, CcCard, CcTag, CcBadge, CcAlert, CcModal, CcTooltip, CcSpinner, CcDivider, CcTable, CcBarChart, CcPieChart, CcLineChart, CcThemeProvider, };
 export type { CcSelectOption } from './components/Select/CcSelect.vue';
-/** Design tokens (CSS custom properties) — import once in your app entry */
+export type { CcTableColumn, CcTableDensity } from './components/Table/CcTable.vue';
+export type { CcChartSeries, CcPieDatum } from './components/Chart/common';
+export type { CcTheme } from './theme';
+export { CC_THEMES, CC_THEME_LABELS, setTheme, getTheme, resetTheme } from './theme';
+/** Design tokens (CSS custom properties) 鈥?import once in your app entry */
 import './styles/tokens.css';
 import './styles/base.css';
+/** Multi-theme: Linear / Vercel / Notion / Raycast (default Stripe is in tokens.css) */
+import './styles/themes/linear.css';
+import './styles/themes/vercel.css';
+import './styles/themes/notion.css';
+import './styles/themes/raycast.css';
 /** Optional plugin for `app.use()` registration */
 export declare function install(app: App): void;
 declare const _default: {
@@ -720,6 +734,236 @@ declare const _default: {
             default?: (props: {}) => any;
         };
     });
+    CcTable: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
+            columns: import("./index.ts").CcTableColumn[];
+            data: Array<Record<string, unknown>>;
+            rowKey?: string;
+            tableKey?: string;
+            showSelection?: boolean;
+            pageSizeOptions?: number[];
+            defaultDensity?: import("./index.ts").CcTableDensity;
+            emptyText?: string;
+            maxHeight?: string;
+        } & {
+            selectedKeys?: string[];
+        }> & Readonly<{
+            "onSelection-change"?: ((keys: string[], rows: Record<string, unknown>[]) => any) | undefined;
+            "onUpdate:selectedKeys"?: ((value: string[]) => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            "update:selectedKeys": (value: string[]) => any;
+        } & {
+            "selection-change": (keys: string[], rows: Record<string, unknown>[]) => any;
+        }, import("vue").PublicProps, {
+            rowKey: string;
+            tableKey: string;
+            showSelection: boolean;
+            pageSizeOptions: number[];
+            defaultDensity: import("./index.ts").CcTableDensity;
+            emptyText: string;
+            maxHeight: string;
+        }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            columns: import("./index.ts").CcTableColumn[];
+            data: Array<Record<string, unknown>>;
+            rowKey?: string;
+            tableKey?: string;
+            showSelection?: boolean;
+            pageSizeOptions?: number[];
+            defaultDensity?: import("./index.ts").CcTableDensity;
+            emptyText?: string;
+            maxHeight?: string;
+        } & {
+            selectedKeys?: string[];
+        }> & Readonly<{
+            "onSelection-change"?: ((keys: string[], rows: Record<string, unknown>[]) => any) | undefined;
+            "onUpdate:selectedKeys"?: ((value: string[]) => any) | undefined;
+        }>, {}, {}, {}, {}, {
+            rowKey: string;
+            tableKey: string;
+            showSelection: boolean;
+            pageSizeOptions: number[];
+            defaultDensity: import("./index.ts").CcTableDensity;
+            emptyText: string;
+            maxHeight: string;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<{
+        columns: import("./index.ts").CcTableColumn[];
+        data: Array<Record<string, unknown>>;
+        rowKey?: string;
+        tableKey?: string;
+        showSelection?: boolean;
+        pageSizeOptions?: number[];
+        defaultDensity?: import("./index.ts").CcTableDensity;
+        emptyText?: string;
+        maxHeight?: string;
+    } & {
+        selectedKeys?: string[];
+    }> & Readonly<{
+        "onSelection-change"?: ((keys: string[], rows: Record<string, unknown>[]) => any) | undefined;
+        "onUpdate:selectedKeys"?: ((value: string[]) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "update:selectedKeys": (value: string[]) => any;
+    } & {
+        "selection-change": (keys: string[], rows: Record<string, unknown>[]) => any;
+    }, string, {
+        rowKey: string;
+        tableKey: string;
+        showSelection: boolean;
+        pageSizeOptions: number[];
+        defaultDensity: import("./index.ts").CcTableDensity;
+        emptyText: string;
+        maxHeight: string;
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            [x: string]: ((props: {
+                row: Record<string, unknown>;
+                value: unknown;
+            }) => any) | undefined;
+        };
+    });
+    CcBarChart: import("vue").DefineComponent<{
+        categories: string[];
+        series: import("./index.ts").CcChartSeries[];
+        height?: number;
+        horizontal?: boolean;
+        stacked?: boolean;
+        rounded?: boolean;
+        showLegend?: boolean;
+        colors?: string[];
+        dark?: boolean;
+    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+        categories: string[];
+        series: import("./index.ts").CcChartSeries[];
+        height?: number;
+        horizontal?: boolean;
+        stacked?: boolean;
+        rounded?: boolean;
+        showLegend?: boolean;
+        colors?: string[];
+        dark?: boolean;
+    }> & Readonly<{}>, {
+        height: number;
+        dark: boolean;
+        horizontal: boolean;
+        stacked: boolean;
+        rounded: boolean;
+        showLegend: boolean;
+        colors: string[];
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    CcPieChart: import("vue").DefineComponent<{
+        data: import("./index.ts").CcPieDatum[];
+        height?: number;
+        donut?: boolean;
+        rose?: boolean;
+        showLegend?: boolean;
+        showLabels?: boolean;
+        colors?: string[];
+        dark?: boolean;
+    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+        data: import("./index.ts").CcPieDatum[];
+        height?: number;
+        donut?: boolean;
+        rose?: boolean;
+        showLegend?: boolean;
+        showLabels?: boolean;
+        colors?: string[];
+        dark?: boolean;
+    }> & Readonly<{}>, {
+        height: number;
+        dark: boolean;
+        showLegend: boolean;
+        colors: string[];
+        donut: boolean;
+        rose: boolean;
+        showLabels: boolean;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    CcLineChart: import("vue").DefineComponent<{
+        categories: string[];
+        series: import("./index.ts").CcChartSeries[];
+        height?: number;
+        smooth?: boolean;
+        area?: boolean;
+        showDots?: boolean;
+        showLegend?: boolean;
+        showGrid?: boolean;
+        colors?: string[];
+        dark?: boolean;
+    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+        categories: string[];
+        series: import("./index.ts").CcChartSeries[];
+        height?: number;
+        smooth?: boolean;
+        area?: boolean;
+        showDots?: boolean;
+        showLegend?: boolean;
+        showGrid?: boolean;
+        colors?: string[];
+        dark?: boolean;
+    }> & Readonly<{}>, {
+        area: boolean;
+        height: number;
+        dark: boolean;
+        showLegend: boolean;
+        colors: string[];
+        smooth: boolean;
+        showDots: boolean;
+        showGrid: boolean;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    CcThemeProvider: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
+            theme?: import("./theme").CcTheme;
+            persist?: boolean;
+        }> & Readonly<{
+            onChange?: ((theme: import("./theme").CcTheme) => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+            change: (theme: import("./theme").CcTheme) => any;
+        }, import("vue").PublicProps, {
+            theme: import("./theme").CcTheme;
+            persist: boolean;
+        }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            theme?: import("./theme").CcTheme;
+            persist?: boolean;
+        }> & Readonly<{
+            onChange?: ((theme: import("./theme").CcTheme) => any) | undefined;
+        }>, {}, {}, {}, {}, {
+            theme: import("./theme").CcTheme;
+            persist: boolean;
+        }>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<{
+        theme?: import("./theme").CcTheme;
+        persist?: boolean;
+    }> & Readonly<{
+        onChange?: ((theme: import("./theme").CcTheme) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+        change: (theme: import("./theme").CcTheme) => any;
+    }, string, {
+        theme: import("./theme").CcTheme;
+        persist: boolean;
+    }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    });
     install: typeof install;
 };
 export default _default;

package/dist-lib/types/theme.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 多主题系统 — 组件库公开的主题切换 API。
+ *
+ * 用法（三种方式等效）：
+ *   1. 声明式：<CcThemeProvider theme="linear"> <App/> </CcThemeProvider>
+ *   2. 命令式：import { setTheme } from 'common_component_library_vue'; setTheme('linear')
+ *   3. HTML：  <html data-cc-theme="linear">
+ *
+ * 主题实际生效于 CSS 选择器 [data-cc-theme="xxx"]，作用于 <html> 根节点，
+ * 覆盖 :root 中的默认（Stripe）令牌，切换即时生效、无需刷新。
+ */
+/** 组件库支持的设计风格。stripe 为默认风格（无需任何主题文件）。 */
+export type CcTheme = 'stripe' | 'linear' | 'vercel' | 'notion' | 'raycast';
+/** 全部可用主题。 */
+export declare const CC_THEMES: readonly CcTheme[];
+/** 主题中文标签（演示与选择器展示用），value 保持英文主题名不变。 */
+export declare const CC_THEME_LABELS: Record<CcTheme, string>;
+/** <html> 上的主题属性名。 */
+export declare const CC_THEME_ATTR = "data-cc-theme";
+/** inject/provide 当前主题的注入键（可读取响应式主题）。 */
+export declare const CC_THEME_KEY: unique symbol;
+/** 校验是否为合法的内置主题名。 */
+export declare function isCcTheme(value: unknown): value is CcTheme;
+/**
+ * 切换组件库主题。
+ * @param theme 目标主题名；传入 'stripe' 或移除主题时恢复默认。
+ */
+export declare function setTheme(theme: CcTheme): void;
+/** 读取当前生效的主题名。 */
+export declare function getTheme(): CcTheme;
+/** 恢复默认主题（Stripe）。 */
+export declare function resetTheme(): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "common_component_library_vue",
-  "version": "0.1.1",
-  "description": "Vue 3 + TypeScript + Vite 通用组件库，视觉规范由 DESIGN.md（Stripe 风格）定义，包含 15 个可复用组件",
+  "version": "0.1.3",
+  "description": "Vue 3 + TypeScript + Vite 通用组件库，视觉规范由 DESIGN.md（Stripe 风格）定义，包含表格、图表与 15 个基础组件",
   "type": "module",
   "main": "./dist-lib/common-component-library-vue.umd.js",
   "module": "./dist-lib/common-component-library-vue.mjs",
@@ -13,6 +13,10 @@
       "require": "./dist-lib/common-component-library-vue.umd.js"
     },
     "./style.css": "./dist-lib/common-component-library-vue.css",
+    "./themes/linear.css": "./src/styles/themes/linear.css",
+    "./themes/vercel.css": "./src/styles/themes/vercel.css",
+    "./themes/notion.css": "./src/styles/themes/notion.css",
+    "./themes/raycast.css": "./src/styles/themes/raycast.css",
     "./dist-lib/*": "./dist-lib/*",
     "./styles/tokens.css": "./src/styles/tokens.css",
     "./styles/base.css": "./src/styles/base.css",
@@ -58,16 +62,18 @@
     "prepublishOnly": "npm run build:lib"
   },
   "dependencies": {
-    "vue": "^3.5.41"
+    "vue": "^3.4.0"
   },
   "peerDependencies": {
-    "vue": "^3.4.0"
+    "vue": "^3.4.0",
+    "echarts": "^5.5.0 || ^6.0.0"
   },
   "devDependencies": {
     "@fontsource/inter": "^5.3.0",
     "@types/node": "^24.13.3",
     "@vitejs/plugin-vue": "^6.0.8",
     "@vue/tsconfig": "^0.9.1",
+    "echarts": "^6.1.0",
     "typescript": "~6.0.2",
     "vite": "^8.2.2",
     "vue-tsc": "^3.3.11"

package/src/styles/themes/linear.css

@@ -0,0 +1,47 @@
+/* ==========================================================================
+   THEME · Linear — deep-dark, lavender accent
+   Source: awesome-design-md/linear.app/DESIGN.md
+   Apply by setting <html data-cc-theme="linear"> (or CcThemeProvider / setTheme).
+   ========================================================================== */
+
+[data-cc-theme='linear'] {
+  /* Brand & Accent */
+  --cc-primary: #5e6ad2;
+  --cc-primary-deep: #4f5ab8;
+  --cc-primary-press: #3d4798;
+  --cc-primary-soft: #828fff;
+  --cc-primary-subdued: #2a2e4a;
+  --cc-brand-dark-900: #0b0b0c;
+  --cc-ruby: #f25e5e;
+  --cc-magenta: #f5a3c7;
+  --cc-lemon: #d8b4fe;
+
+  /* Surface */
+  --cc-canvas: #010102;
+  --cc-canvas-soft: #0f1011;
+  --cc-canvas-cream: #141516;
+  --cc-hairline: #2a2d33;
+  --cc-hairline-input: #3a3e45;
+
+  /* Text */
+  --cc-ink: #f7f8f8;
+  --cc-ink-secondary: #d0d6e0;
+  --cc-ink-mute: #8a8f98;
+  --cc-ink-mute-2: #62666d;
+  --cc-on-primary: #ffffff;
+
+  /* Semantic */
+  --cc-success: #3ddc97;
+  --cc-success-soft: #14322a;
+  --cc-warning: #d8b4fe;
+  --cc-warning-soft: #2c2440;
+  --cc-error: #f25e5e;
+  --cc-error-soft: #3a1d1d;
+  --cc-info: #5e6ad2;
+
+  /* Shadows */
+  --cc-shadow-blue: #000000;
+  --cc-shadow-level-1: rgba(0, 0, 0, 0.5) 0 1px 3px;
+  --cc-shadow-level-2: rgba(0, 0, 0, 0.5) 0 8px 24px, rgba(0, 0, 0, 0.3) 0 2px 6px;
+  --cc-focus-ring: 0 0 0 3px rgba(94, 106, 210, 0.35);
+}

package/src/styles/themes/notion.css

@@ -0,0 +1,47 @@
+/* ==========================================================================
+   THEME · Notion — paper light, indigo CTA
+   Source: awesome-design-md/notion/DESIGN.md
+   Apply by setting <html data-cc-theme="notion"> (or CcThemeProvider / setTheme).
+   ========================================================================== */
+
+[data-cc-theme='notion'] {
+  /* Brand & Accent */
+  --cc-primary: #5645d4;
+  --cc-primary-deep: #4534b3;
+  --cc-primary-press: #3a2a99;
+  --cc-primary-soft: #6f5fe8;
+  --cc-primary-subdued: #e9e7fb;
+  --cc-brand-dark-900: #0a1530;
+  --cc-ruby: #eb5757;
+  --cc-magenta: #eb5757;
+  --cc-lemon: #b76e00;
+
+  /* Surface */
+  --cc-canvas: #ffffff;
+  --cc-canvas-soft: #f7f7f5;
+  --cc-canvas-cream: #f1f1ef;
+  --cc-hairline: #e3e3e0;
+  --cc-hairline-input: #d0d0cc;
+
+  /* Text */
+  --cc-ink: #37352f;
+  --cc-ink-secondary: #4f4d47;
+  --cc-ink-mute: #9b9a97;
+  --cc-ink-mute-2: #787774;
+  --cc-on-primary: #ffffff;
+
+  /* Semantic */
+  --cc-success: #0a9f6e;
+  --cc-success-soft: #e4f5ee;
+  --cc-warning: #b76e00;
+  --cc-warning-soft: #faf1e2;
+  --cc-error: #eb5757;
+  --cc-error-soft: #fdeaea;
+  --cc-info: #0075de;
+
+  /* Shadows */
+  --cc-shadow-blue: #0a1530;
+  --cc-shadow-level-1: rgba(10, 21, 48, 0.08) 0 1px 3px;
+  --cc-shadow-level-2: rgba(10, 21, 48, 0.08) 0 8px 24px, rgba(10, 21, 48, 0.04) 0 2px 6px;
+  --cc-focus-ring: 0 0 0 3px rgba(86, 69, 212, 0.22);
+}

package/src/styles/themes/raycast.css

@@ -0,0 +1,47 @@
+/* ==========================================================================
+   THEME · Raycast — dark shell, white CTA
+   Source: awesome-design-md/raycast/DESIGN.md
+   Apply by setting <html data-cc-theme="raycast"> (or CcThemeProvider / setTheme).
+   ========================================================================== */
+
+[data-cc-theme='raycast'] {
+  /* Brand & Accent */
+  --cc-primary: #ffffff;
+  --cc-primary-deep: #e8e8e8;
+  --cc-primary-press: #d6d6d6;
+  --cc-primary-soft: #ffffff;
+  --cc-primary-subdued: #3a3a3c;
+  --cc-brand-dark-900: #111113;
+  --cc-ruby: #ff6363;
+  --cc-magenta: #ff8d70;
+  --cc-lemon: #f5c451;
+
+  /* Surface */
+  --cc-canvas: #151516;
+  --cc-canvas-soft: #1c1c1e;
+  --cc-canvas-cream: #222224;
+  --cc-hairline: #303033;
+  --cc-hairline-input: #3f3f42;
+
+  /* Text */
+  --cc-ink: #f4f4f6;
+  --cc-ink-secondary: #cdcdcd;
+  --cc-ink-mute: #9c9c9d;
+  --cc-ink-mute-2: #6a6b6c;
+  --cc-on-primary: #000000;
+
+  /* Semantic */
+  --cc-success: #3ddc97;
+  --cc-success-soft: #17352b;
+  --cc-warning: #f5c451;
+  --cc-warning-soft: #3a3118;
+  --cc-error: #ff6363;
+  --cc-error-soft: #3c1d1d;
+  --cc-info: #ffffff;
+
+  /* Shadows */
+  --cc-shadow-blue: #000000;
+  --cc-shadow-level-1: rgba(0, 0, 0, 0.6) 0 1px 3px;
+  --cc-shadow-level-2: rgba(0, 0, 0, 0.6) 0 8px 24px, rgba(0, 0, 0, 0.4) 0 2px 6px;
+  --cc-focus-ring: 0 0 0 3px rgba(255, 99, 99, 0.35);
+}

package/src/styles/themes/vercel.css

@@ -0,0 +1,47 @@
+/* ==========================================================================
+   THEME · Vercel — monochrome minimal, near-black CTA
+   Source: awesome-design-md/vercel/DESIGN.md
+   Apply by setting <html data-cc-theme="vercel"> (or CcThemeProvider / setTheme).
+   ========================================================================== */
+
+[data-cc-theme='vercel'] {
+  /* Brand & Accent */
+  --cc-primary: #171717;
+  --cc-primary-deep: #000000;
+  --cc-primary-press: #000000;
+  --cc-primary-soft: #444444;
+  --cc-primary-subdued: #eaeaea;
+  --cc-brand-dark-900: #0a0a0a;
+  --cc-ruby: #ee0000;
+  --cc-magenta: #f81ce5;
+  --cc-lemon: #f5a623;
+
+  /* Surface */
+  --cc-canvas: #ffffff;
+  --cc-canvas-soft: #fafafa;
+  --cc-canvas-cream: #f5f5f5;
+  --cc-hairline: #eaeaea;
+  --cc-hairline-input: #d4d4d4;
+
+  /* Text */
+  --cc-ink: #171717;
+  --cc-ink-secondary: #4d4d4d;
+  --cc-ink-mute: #888888;
+  --cc-ink-mute-2: #666666;
+  --cc-on-primary: #ffffff;
+
+  /* Semantic */
+  --cc-success: #0070f3;
+  --cc-success-soft: #e8f3ff;
+  --cc-warning: #f5a623;
+  --cc-warning-soft: #fdf3e3;
+  --cc-error: #ee0000;
+  --cc-error-soft: #fbeaea;
+  --cc-info: #0070f3;
+
+  /* Shadows */
+  --cc-shadow-blue: #000000;
+  --cc-shadow-level-1: rgba(0, 0, 0, 0.06) 0 1px 3px;
+  --cc-shadow-level-2: rgba(0, 0, 0, 0.06) 0 8px 24px, rgba(0, 0, 0, 0.03) 0 2px 6px;
+  --cc-focus-ring: 0 0 0 3px rgba(0, 112, 243, 0.25);
+}