easy-component-ui 2.1.0 → 3.0.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 LuminaQAQ
-
-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.
+MIT License
+
+Copyright (c) 2024 LuminaQAQ
+
+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

@@ -1,90 +1,162 @@
-# Easy-ui
-
-Easy-ui 是一个轻量级的 UI 框架，基于 `Web Components` 构建。[文档地址](https://luminaqaq.github.io/ea_ui_component/)
-
-![](./public/logo.png)
-
-> 该框架参考了[Element-ui](https://element.eleme.cn/#/zh-CN/component/installation) , 所以不能说是很像吧, 但可以说是一模一样 😂(打算有时间把所有的都模仿一遍)。
-> 独狼一个, 如果有大佬看到, 还请指点一下 😭 如果有一起学习的就更好了 😭
-
-## 框架进度
-
-- 基础组件
-  
-  - [x] Icon 图标
-  - [x] Button 按钮
-  - [x] Link 文字链接
-
-- 表单组件
-  
-  - [x] Radio 单选框
-  - [x] Checkbox 多选框
-  - [x] Input 输入框
-  - [x] Textarea 文本域
-  - [x] InputNumber 计数器
-  - [x] Switch 开关
-  - [x] Rate 评分
-
-- Data
-  
-  - [x] Tag 标签
-  - [x] Progress 进度条
-  - [x] Pagination 分页
-  - [x] Badge 标记
-  - [x] Avatar 头像
-  - [x] Skeleton 骨架屏
-  - [x] Empty 空状态
-  - [x] Descriptions 描述列表
-  - [x] Result 结果
-
-- Notice
-  
-  - [x] Alert 警告
-  - [x] Loading 加载
-  - [x] Message 消息提示
-  - [x] MessageBox 弹框
-
-- Others
-  
-  - [x] Card 卡片
-  - [x] Carousel 走马灯
-  - [x] TimeLine 时间线
-  - [x] Backtop 回到顶部
-  - [x] Collapse 折叠面板
-  - [x] Calendar 日历
-  - [x] Image 图片
-  - [x] InfiniteScroll 无限滚动
-
-- 表单组件
-  
-  - [x] Select 选择框
-  - [x] TimePicker 时间选择器
-  - [x] DatePicker 日期选择器
-  - [ ] Upload 上传
-  - [ ] Transfer 穿梭框
-  - [ ] Form 表单
-
-- Data
-  
-  - [x] Table 表格
-  - [ ] Tree 树形控件
-  - [ ] Statistic 统计数字
-
-- Navigation
-  
-  - [x] NavMenu 导航菜单
-  - [x] Tabs 标签页
-  - [x] Breadcrumb 面包屑
-  - [x] Tabs 标签页
-  - [x] PageHeader 页头
-  - [x] Dropdown 下拉菜单
-  - [x] Steps 步骤条
-  - [x] Drawer 抽屉
-
-- Others
-  
-  - [ ] Popconfirm 气泡确认框
-  - [ ] Dialog 对话框
-  - [ ] Tooltip 文字提示
-  - [ ] Popover 弹出框
-  - [ ] Divider 分割线
+# Easy Component UI
+
+![Easy-ui](./logo.png)
+[![NPM version](https://img.shields.io/npm/v/easy-component-ui.svg?color=red)](https://www.npmjs.com/package/easy-component-ui)
+![npm](https://img.shields.io/npm/dw/easy-component-ui)
+![npm](https://img.shields.io/npm/dt/easy-component-ui)
+[![GitHub stars](https://img.shields.io/github/stars/LuminaQAQ/ea-ui-component.svg?color=#42b983)](https://github.com/LuminaQAQ/ea-ui-component/stargazers)
+[![GitHub forks](https://img.shields.io/github/forks/LuminaQAQ/ea-ui-component.svg)](https://github.com/LuminaQAQ/ea-ui-component/network/members)
+[![License](https://img.shields.io/npm/l/easy-component-ui.svg)](https://github.com/LuminaQAQ/ea-ui-component/blob/main/LICENSE)
+
+`Easy Component UI`（简称 `ea-ui`）是一套使用原生 `Web Components` 规范开发的跨框架 UI 组件库。该框架参考了[Element-ui](https://element.eleme.cn/#/zh-CN/component/installation)，所以不能说是很像吧，但可以说是一模一样 😂(打算有时间把所有的都模仿一遍)。[查看文档](https://luminaqaq.github.io/ea-ui-component/)
+
+[GitHub 项目地址](https://github.com/LuminaQAQ/ea-ui-component) | [在线文档](https://luminaqaq.github.io/ea-ui-component/) | [NPM 包](https://www.npmjs.com/package/easy-component-ui)
+
+## 安装
+
+```bash
+# npm
+npm install easy-component-ui
+
+# yarn
+yarn add easy-component-ui
+
+# pnpm
+pnpm add easy-component-ui
+```
+
+## 快速开始
+
+### 完整引入
+
+```javascript
+import "easy-component-ui";
+```
+
+### 按需引入
+
+```javascript
+import "easy-component-ui/ea-button";
+import "easy-component-ui/ea-input";
+```
+
+### 在 HTML 中使用
+
+```html
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Easy UI Demo</title>
+    <script type="module">
+      import "easy-component-ui/ea-button";
+    </script>
+  </head>
+  <body>
+    <ea-button type="primary">主要按钮</ea-button>
+  </body>
+</html>
+```
+
+## 组件列表
+
+### Basic 基础组件
+
+- [x] Button 按钮
+- [x] Container 布局容器
+- [x] Icon 图标
+- [x] Layout 布局
+- [x] Link 链接
+- [x] Text 文本
+- [x] Scrollbar 滚动条
+- [x] Space 间距
+- [x] Splitter 分隔面板
+
+### Form 表单组件
+
+- [x] Checkbox 多选框
+- [x] Input 输入框
+- [x] Input Number 数字输入框
+- [x] Radio 单选框
+- [x] Rate 评分
+- [x] Switch 开关
+- [x] Select 选择器
+- [x] Slider 滑块
+- [x] Form 表单组件
+- [x] Date Picker 日期选择器
+- [x] Time Picker 时间选择器
+- [x] Color Picker 颜色选择器
+
+### Data 数据展示
+
+- [x] Avatar 头像
+- [x] Badge 徽章
+- [x] Calendar 日历
+- [x] Card 卡片
+- [x] Carousel 走马灯
+- [x] Collapse 折叠面板
+- [x] Descriptions 描述列表
+- [x] Empty 空状态
+- [x] Image 图片
+- [x] Infinite Scroll 无限滚动
+- [x] Pagination 分页
+- [x] Progress 进度条
+- [x] Result 结果
+- [x] Skeleton 骨架屏
+- [x] Statistic 统计组件
+- [x] Segmented 分段控制器
+- [x] Tag 标签
+- [x] Timeline 时间线
+- [x] Tour 漫游式引导
+- [x] Table 表格
+- [x] Tree 树形控件
+
+### Navigation 导航
+
+- [x] Backtop 回到顶部
+- [x] Breadcrumb 面包屑
+- [x] Dropdown 下拉菜单
+- [x] Menu 菜单
+- [x] Page Header 页头
+- [x] Steps 步骤条
+- [x] Tabs 标签页
+
+### Feedback 反馈组件
+
+- [x] Alert 提示
+- [x] Dialog 对话框
+- [x] Drawer 抽屉
+- [x] Loading 加载
+- [x] Message 消息提示
+- [x] Message Box 消息弹出框
+- [x] Notification 通知
+- [x] Popconfirm 气泡确认框
+- [x] Popover 弹出框
+- [x] Tooltip 文字提示
+
+## 开发
+
+```bash
+# 克隆项目
+git clone https://github.com/LuminaQAQ/ea-ui-component.git
+
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 构建文档
+npm run build:doc
+
+# 预览文档
+npm run preview:doc
+```
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+## 许可证
+
+[MIT](https://github.com/LuminaQAQ/ea-ui-component/blob/main/LICENSE) License © 2024 [LuminaQAQ](https://github.com/LuminaQAQ)