echo-library-vue 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Echo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,226 @@
+# Echo Library Vue
+
+一个基于 Vue 3 + TypeScript 的现代化组件库，提供高质量、可复用的 UI 组件。
+
+## 🎯 项目目标
+
+- 提供一套完整的 Vue 3 + TypeScript UI 组件库
+- 支持按需引入，减少打包体积
+- 提供完整的 TypeScript 类型支持
+- 支持主题定制和样式覆盖
+- 提供详细的文档和示例
+
+## 🏗️ 项目架构
+
+```
+echo-library-vue/
+├── packages/           # 组件包目录
+│   ├── components/     # 组件源码
+│   ├── utils/         # 工具函数
+│   └── styles/        # 样式文件
+├── docs/              # 文档目录
+├── src/               # 示例项目
+├── scripts/           # 构建脚本
+├── tests/             # 测试文件
+└── dist/              # 构建输出
+```
+
+## 🚀 快速开始
+
+### 安装
+
+```bash
+npm install echo-library-vue
+# 或
+yarn add echo-library-vue
+```
+
+### 使用
+
+```typescript
+// 完整引入
+import { createApp } from 'vue'
+import { EchoLibrary } from 'echo-library-vue'
+import 'echo-library-vue/dist/style.css'
+
+const app = createApp(App)
+app.use(EchoLibrary)
+app.mount('#app')
+```
+
+```typescript
+// 按需引入
+import { Button, Input } from 'echo-library-vue'
+import 'echo-library-vue/dist/button/style.css'
+import 'echo-library-vue/dist/input/style.css'
+```
+
+## 📦 组件列表
+
+### 基础组件
+
+- [x] Button - 按钮组件
+- [x] Input - 输入框组件
+- [x] Icon - 图标组件
+
+### 布局组件
+
+- [ ] Layout - 布局组件
+- [ ] Grid - 栅格组件
+- [ ] Space - 间距组件
+
+### 数据展示
+
+- [ ] Table - 表格组件
+- [ ] Card - 卡片组件
+- [ ] Tag - 标签组件
+
+### 反馈组件
+
+- [ ] Modal - 对话框组件
+- [ ] Message - 消息提示
+- [ ] Loading - 加载组件
+
+### 导航组件
+
+- [ ] Menu - 菜单组件
+- [ ] Tabs - 标签页组件
+- [ ] Breadcrumb - 面包屑组件
+
+## 🛠️ 开发指南
+
+### 环境要求
+
+- Node.js >= 16
+- npm >= 8 或 yarn >= 1.22
+
+### 开发命令
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 构建组件库
+npm run build
+
+# 运行测试
+npm run test
+
+# 生成文档
+npm run docs:dev
+```
+
+### 添加新组件
+
+1. 在 `packages/components` 目录下创建组件文件夹
+2. 创建组件文件：`index.vue`、`index.ts`、`style.scss`
+3. 在 `packages/index.ts` 中导出组件
+4. 在 `docs` 目录下添加组件文档
+5. 编写测试用例
+
+## 🎨 主题定制
+
+组件库支持主题定制，可以通过 CSS 变量覆盖默认样式：
+
+```css
+:root {
+  --echo-primary-color: #1890ff;
+  --echo-border-radius: 6px;
+  --echo-font-size: 14px;
+}
+```
+
+## 📝 贡献指南
+
+1. Fork 项目
+2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
+3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
+4. 推送到分支 (`git push origin feature/AmazingFeature`)
+5. 打开 Pull Request
+
+## 📄 许可证
+
+本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。
+
+## 🤝 联系我们
+
+如有问题或建议，请提交 Issue 或联系开发团队。
+
+## 📋 项目完成总结
+
+### ✅ 已完成的功能
+
+1. **项目架构搭建**
+   - 使用 Vite 作为构建工具
+   - 配置 TypeScript 支持
+   - 设置 ESLint 和 Prettier 代码规范
+   - 配置 Vitest 测试框架
+
+2. **核心组件开发**
+   - **Button 按钮组件**: 支持多种类型、尺寸、状态
+   - **Input 输入框组件**: 支持前缀/后缀图标、清除功能、字数限制
+   - **Icon 图标组件**: 内置常用图标，支持自定义大小和颜色
+
+3. **样式系统**
+   - 基于 CSS 变量的主题系统
+   - 响应式设计支持
+   - 完整的工具类库
+   - 动画效果
+
+4. **开发工具**
+   - 热重载开发服务器
+   - 组件库构建配置
+   - 类型声明文件生成
+   - 测试用例示例
+
+5. **文档和示例**
+   - 详细的 README 文档
+   - 组件使用示例
+   - 在线演示页面
+
+### 🚀 使用方法
+
+1. **启动开发服务器**
+
+   ```bash
+   npm run dev
+   ```
+
+2. **构建组件库**
+
+   ```bash
+   npm run build:lib
+   ```
+
+3. **运行测试**
+
+   ```bash
+   npm run test
+   ```
+
+4. **启动文档服务器**
+   ```bash
+   npm run docs:dev
+   ```
+
+### 🎯 技术特点
+
+- **现代化**: 基于 Vue 3 Composition API 和 TypeScript
+- **可扩展**: 模块化设计，易于添加新组件
+- **类型安全**: 完整的 TypeScript 类型支持
+- **主题定制**: 通过 CSS 变量轻松定制主题
+- **按需引入**: 支持按需引入，减少打包体积
+- **测试覆盖**: 完整的单元测试支持
+
+### 📈 后续规划
+
+1. **更多组件**: 添加 Layout、Grid、Table、Modal 等组件
+2. **文档完善**: 使用 VitePress 构建完整的文档网站
+3. **国际化**: 支持多语言
+4. **性能优化**: 进一步优化打包体积和运行时性能
+5. **社区建设**: 建立贡献指南和社区规范
+
+这个组件库项目已经具备了完整的基础架构和核心功能，可以作为进一步开发的基础。

package/dist/components/Button/index.d.ts

@@ -0,0 +1,6 @@
+import { default as Button } from './index.vue';
+import { ButtonProps, ButtonSize, ButtonType } from './types';
+
+export { Button };
+export type { ButtonProps, ButtonSize, ButtonType };
+export default Button;

package/dist/components/Button/index.vue.d.ts

@@ -0,0 +1,56 @@
+import { ButtonProps } from './types.ts';
+
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
+    type: string;
+    size: string;
+    disabled: boolean;
+    loading: boolean;
+    round: boolean;
+    plain: boolean;
+    icon: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
+    type: string;
+    size: string;
+    disabled: boolean;
+    loading: boolean;
+    round: boolean;
+    plain: boolean;
+    icon: string;
+}>>> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    size: import('./types.ts').ButtonSize;
+    type: import('./types.ts').ButtonType;
+    disabled: boolean;
+    loading: boolean;
+    round: boolean;
+    plain: boolean;
+    icon: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Button/types.d.ts

@@ -0,0 +1,11 @@
+export type ButtonType = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export interface ButtonProps {
+    type?: ButtonType;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    round?: boolean;
+    plain?: boolean;
+    icon?: string;
+}

package/dist/components/ColorPicker/constant.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_COLORS: string[];

package/dist/components/ColorPicker/index.d.ts

@@ -0,0 +1,6 @@
+import { default as ColorPicker } from './index.vue';
+import { ColorPickerProps } from './types';
+
+export { ColorPicker };
+export type { ColorPickerProps };
+export default ColorPicker;

package/dist/components/ColorPicker/index.vue.d.ts

@@ -0,0 +1,54 @@
+import { ColorPickerProps } from './types.ts';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ColorPickerProps>, {
+    theme: string;
+    type: string;
+    mode: string;
+    showAlpha: boolean;
+    showEyeDropper: boolean;
+    showPickerMode: boolean;
+    showColorList: boolean;
+    defaultColors: () => string[];
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:color": (color: string) => void;
+    colorChange: (color: string) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ColorPickerProps>, {
+    theme: string;
+    type: string;
+    mode: string;
+    showAlpha: boolean;
+    showEyeDropper: boolean;
+    showPickerMode: boolean;
+    showColorList: boolean;
+    defaultColors: () => string[];
+}>>> & Readonly<{
+    "onUpdate:color"?: ((color: string) => any) | undefined;
+    onColorChange?: ((color: string) => any) | undefined;
+}>, {
+    type: "hex" | "rgb" | "hsl";
+    mode: "solid" | "gradient";
+    theme: "light" | "dark";
+    showAlpha: boolean;
+    showEyeDropper: boolean;
+    showPickerMode: boolean;
+    showColorList: boolean;
+    defaultColors: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/ColorPicker/types.d.ts

@@ -0,0 +1,11 @@
+export interface ColorPickerProps {
+    color?: string | null;
+    theme?: 'light' | 'dark';
+    type?: 'hex' | 'rgb' | 'hsl';
+    mode?: 'solid' | 'gradient';
+    showAlpha?: boolean;
+    showEyeDropper?: boolean;
+    showPickerMode?: boolean;
+    showColorList?: boolean;
+    defaultColors?: string[];
+}

package/dist/components/ColorPicker/utils.d.ts

@@ -0,0 +1,156 @@
+/**
+ * 颜色工具函数
+ * 用于颜色格式之间的转换
+ */
+/**
+ * HEX 转 RGB
+ * @param hex
+ * @returns RGB对象 {r, g, b}
+ */
+export declare const hexToRgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * rgb转hex
+ * @param r 红色值 0-255
+ * @param g 绿色值 0-255
+ * @param b 蓝色值 0-255
+ * @returnd HEX颜色值
+ */
+export declare const rgbToHex: (r: number, g: number, b: number) => string;
+/**
+ * RGB 转 HSL
+ * @param r 红色值 0-255
+ * @param g 绿色值 0-255
+ * @param b 蓝色值 0-255
+ * @returns HSL对象 {h, s, l}, h: 0-360, s: 0-100, l: 0-100
+ */
+export declare const rgbToHsl: (r: number, g: number, b: number) => {
+    h: number;
+    s: number;
+    l: number;
+};
+/**
+ * HSL 转 RGB
+ * @param h 色相 0-360
+ * @param s 饱和度 0-100
+ * @param l 明度 0-100
+ * @returns RGB对象 {r, g, b}
+ */
+export declare function hslToRgb(h: number, s: number, l: number): {
+    r: number;
+    g: number;
+    b: number;
+};
+/**
+ * HEX 转 HSL
+ * @param hex HEX颜色值
+ * @returns HSL对象
+ */
+export declare function hexToHsl(hex: string): {
+    h: number;
+    s: number;
+    l: number;
+} | null;
+/**
+ * HSL 转 HEX
+ * @param h 色相
+ * @param s 饱和度
+ * @param l 明度
+ * @returns HEX颜色值
+ */
+export declare function hslToHex(h: number, s: number, l: number): string;
+/**
+ * 验证 HEX 颜色格式
+ * @param hex HEX颜色值
+ * @returns 是否为有效格式
+ */
+export declare function isValidHex(hex: string): boolean;
+/**
+ * HEX 转 RGBA
+ * @param hex HEX颜色值（支持 #RRGGBB 或 #RRGGBBAA）
+ * @param alpha 透明度 0-1，如果不提供则从hex中解析
+ * @returns RGBA对象 {r, g, b, a}
+ */
+export declare function hexToRgba(hex: string, alpha?: number): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+} | null;
+/**
+ * RGBA 转 HEX（8位带透明度）
+ * @param r 红色值 0-255
+ * @param g 绿色值 0-255
+ * @param b 蓝色值 0-255
+ * @param a 透明度 0-1
+ * @returns HEX颜色值 #RRGGBBAA
+ */
+export declare function rgbaToHex(r: number, g: number, b: number, a?: number): string;
+/**
+ * RGBA 转 HEX（6位不带透明度）
+ * @param r 红色值 0-255
+ * @param g 绿色值 0-255
+ * @param b 蓝色值 0-255
+ * @returns HEX颜色值 #RRGGBB
+ */
+export declare function rgbToHexWithoutAlpha(r: number, g: number, b: number): string;
+/**
+ * HSL 转 RGBA
+ * @param h 色相 0-360
+ * @param s 饱和度 0-100
+ * @param l 明度 0-100
+ * @param a 透明度 0-1
+ * @returns RGBA对象
+ */
+export declare function hslaToRgba(h: number, s: number, l: number, a?: number): {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+/**
+ * RGBA 转 HSL
+ * @param r 红色值 0-255
+ * @param g 绿色值 0-255
+ * @param b 蓝色值 0-255
+ * @param a 透明度 0-1
+ * @returns HSLA对象 {h, s, l, a}
+ */
+export declare function rgbaToHsla(r: number, g: number, b: number, a?: number): {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+};
+/**
+ * HSL 转 RGBA HEX（8位）
+ * @param h 色相
+ * @param s 饱和度
+ * @param l 明度
+ * @param a 透明度
+ * @returns HEX颜色值 #RRGGBBAA
+ */
+export declare function hslaToHex(h: number, s: number, l: number, a?: number): string;
+/**
+ * HEX 转 HSLA
+ * @param hex HEX颜色值（支持 #RRGGBB 或 #RRGGBBAA）
+ * @returns HSLA对象
+ */
+export declare function hexToHsla(hex: string): {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+} | null;
+/**
+ * RGBA 转 CSS rgba 字符串
+ * @param r 红色值 0-255
+ * @param g 绿色值 0-255
+ * @param b 蓝色值 0-255
+ * @param a 透明度 0-1
+ * @returns CSS rgba 字符串
+ */
+export declare function rgbaToCss(r: number, g: number, b: number, a?: number): string;

package/dist/components/Dropdown/index.d.ts

@@ -0,0 +1,6 @@
+import { default as Dropdown } from './index.vue';
+import { DropdownProps, DropdownItem } from './types';
+
+export { Dropdown };
+export type { DropdownProps, DropdownItem };
+export default Dropdown;

package/dist/components/Dropdown/index.vue.d.ts

@@ -0,0 +1,53 @@
+import { DropdownItem, DropdownProps } from './types.ts';
+
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DropdownProps>, {
+    trigger: string;
+    placement: string;
+    disabled: boolean;
+    items: () => never[];
+    hideOnClick: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (item: DropdownItem, index: number) => void;
+    openChange: (opened: boolean) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DropdownProps>, {
+    trigger: string;
+    placement: string;
+    disabled: boolean;
+    items: () => never[];
+    hideOnClick: boolean;
+}>>> & Readonly<{
+    onSelect?: ((item: DropdownItem, index: number) => any) | undefined;
+    onOpenChange?: ((opened: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    trigger: "click" | "hover";
+    placement: "bottom" | "left" | "right" | "top" | "top-start" | "top-end" | "top-center" | "bottom-start" | "bottom-end" | "bottom-center" | "left-start" | "left-end" | "left-center" | "right-start" | "right-end" | "right-center";
+    items: DropdownItem[];
+    hideOnClick: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
+    default?(_: {}): any;
+    menu?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Dropdown/types.d.ts

@@ -0,0 +1,44 @@
+import { Component, CSSProperties } from 'vue';
+
+export interface DropdownProps {
+    /** 触发方式 */
+    trigger?: 'click' | 'hover';
+    /** 弹出方向 */
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'top-center' | 'bottom-start' | 'bottom-end' | 'bottom-center' | 'left-start' | 'left-end' | 'left-center' | 'right-start' | 'right-end' | 'right-center';
+    /** 菜单项 */
+    items: DropdownItem[];
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 菜单渲染父节点 */
+    getPopupContainer?: () => HTMLElement | string;
+    /** 菜单类名 */
+    className?: string;
+    /** 菜单样式 */
+    style?: CSSProperties;
+    /** 是否隐藏菜单 */
+    hideOnClick?: boolean;
+    /** 触发器图标 */
+    icon?: Component;
+}
+export interface DropdownItem {
+    /** 唯一标识 */
+    key: string | number;
+    /** 显示文本 */
+    label: string;
+    /** 图标 */
+    icon?: string;
+    /** 子菜单 */
+    children?: DropdownItem[];
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否显示分割线 */
+    divider?: boolean;
+    /** 是否选中 */
+    checked?: boolean;
+}
+export interface DropdownEmits {
+    /** 菜单项点击 */
+    (e: 'select', item: DropdownItem, index: number): void;
+    /** 菜单显示状态改变 */
+    (e: 'openChange', opened: boolean): void;
+}

package/dist/components/Icon/index.d.ts

@@ -0,0 +1,6 @@
+import { default as Icon } from './index.vue';
+import { IconProps } from './types';
+
+export { Icon };
+export type { IconProps };
+export default Icon;