@macroui/macroui-vue 2.1.80 → 2.1.82

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.en.md ADDED
@@ -0,0 +1,36 @@
1
+ # macroui-vue
2
+
3
+ #### Description
4
+ {**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
5
+
6
+ #### Software Architecture
7
+ Software architecture description
8
+
9
+ #### Installation
10
+
11
+ 1. xxxx
12
+ 2. xxxx
13
+ 3. xxxx
14
+
15
+ #### Instructions
16
+
17
+ 1. xxxx
18
+ 2. xxxx
19
+ 3. xxxx
20
+
21
+ #### Contribution
22
+
23
+ 1. Fork the repository
24
+ 2. Create Feat_xxx branch
25
+ 3. Commit your code
26
+ 4. Create Pull Request
27
+
28
+
29
+ #### Gitee Feature
30
+
31
+ 1. You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
32
+ 2. Gitee blog [blog.gitee.com](https://blog.gitee.com)
33
+ 3. Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
34
+ 4. The most valuable open source project [GVP](https://gitee.com/gvp)
35
+ 5. The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
36
+ 6. The most popular members [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
package/README.md CHANGED
@@ -1,203 +1,302 @@
1
- # MacroUI DaisyUI 组件库
1
+ # @macroui/macroui-vue
2
2
 
3
- 基于 Vue 3 + MacroUI API + daisyUI 视觉风格的组件库。
3
+ [![npm version](https://img.shields.io/npm/v/@macroui/macroui-vue.svg)](https://www.npmjs.com/package/@macroui/macroui-vue)
4
+ [![license](https://img.shields.io/npm/l/@macroui/macroui-vue.svg)](https://github.com/mobiui/macroui/blob/master/LICENSE)
4
5
 
5
- ## 特性
6
+ > 基于 Vue 3 + Element Plus API + DaisyUI 视觉风格的组件库
6
7
 
7
- - 100% MacroUI API 兼容
8
- - ✅ 100% daisyUI 视觉风格
9
- - ✅ 支持 25 个主题
10
- - ✅ TypeScript 支持
11
- - ✅ 按需引入
12
- - ✅ 多语言支持(i18n)
8
+ `@macroui/macroui-vue` 是一个开源的 Vue 3 组件库,提供了与 Element Plus 一致的 API 体验,同时采用 [DaisyUI](https://daisyui.com/) 的视觉风格和 Tailwind CSS 的设计系统。覆盖 90+ 常用组件,支持 27 种 DaisyUI 主题,原生 TypeScript 支持。
13
9
 
14
- ## 安装
10
+ ## ✨ 特性
11
+
12
+ - 🎨 **DaisyUI 视觉风格** — 集成 27 种主题(light / dark / corporate / business / dracula / synthwave ...)
13
+ - 📦 **Element Plus 兼容 API** — 熟悉的 `ElButton` `ElTable` `ElForm` 等组件名与 props
14
+ - 🧩 **90+ 组件** — 表单、数据展示、反馈、容器、导航、布局全覆盖
15
+ - 🌐 **多语言 (i18n)** — 内置简体中文、English,支持自定义扩展
16
+ - 🛠 **TypeScript 优先** — 完整类型定义,支持 TSX
17
+ - ⚡ **按需引入** — 支持全量注册和具名导入
18
+ - 🎯 **Vue 3 Composition API** — 完全基于 `<script setup>` 风格开发
19
+
20
+ ## 📦 安装
15
21
 
16
22
  ```bash
17
- npm install @macroui/macroui
23
+ # npm
24
+ npm install @macroui/macroui-vue @macroui/macroui @macroui/macroui-icons vue
25
+
26
+ # pnpm
27
+ pnpm add @macroui/macroui-vue @macroui/macroui @macroui/macroui-icons vue
28
+
29
+ # yarn
30
+ yarn add @macroui/macroui-vue @macroui/macroui @macroui/macroui-icons vue
18
31
  ```
19
32
 
20
- ## 使用
33
+ `vue` 是 peerDependency,需要在项目中显式安装。
21
34
 
22
- ### 全局注册(推荐)
35
+ ## 🚀 快速开始
23
36
 
24
- ```javascript
37
+ ```ts
38
+ // main.ts
25
39
  import { createApp } from 'vue'
40
+ import { ElButton, ElInput, ElTable, ElTableColumn } from '@macroui/macroui-vue'
26
41
  import App from './App.vue'
27
- import 'macroui/dist/full.css'
28
- import Macroui from '@macroui/macroui'
29
42
 
43
+ // 1. 加载 CSS(顺序很重要)
44
+ import '@macroui/macroui/dist/themes.css' // DaisyUI 27 主题
45
+ import '@macroui/macroui/dist/styled.css' // DaisyUI styled components
46
+ import '@macroui/macroui-vue/dist/style.css' // 组件库样式
47
+
48
+ // 2. 创建应用
30
49
  const app = createApp(App)
31
- app.use(Macroui)
50
+
51
+ // 3. 全局注册组件
52
+ app.use(ElButton)
53
+ app.use(ElInput)
54
+ app.use(ElTable)
55
+ app.use(ElTableColumn)
56
+
57
+ // 4. 挂载
32
58
  app.mount('#app')
33
59
  ```
34
60
 
35
- ### 按需引入
61
+ > **提示**:每个 El* 组件都暴露了带 `install` 方法的 plugin 形式,可以用 `app.use(...)` 全局注册;也可以用 `app.component('ElButton', ElButton)` 显式注册。
62
+
63
+ ## 🎨 主题
36
64
 
37
- ```javascript
38
- import { ElButton, ElInput, ElSelect } from '@macroui/macroui'
39
- import 'macroui/dist/full.css'
65
+ 支持 DaisyUI 全部 27 种主题。切换主题只需修改 `<html>` 的 `data-theme` 属性:
40
66
 
41
- app.component('el-button', ElButton)
42
- app.component('el-input', ElInput)
43
- app.component('el-select', ElSelect)
67
+ ```html
68
+ <html data-theme="light"> <!-- 默认 -->
69
+ <html data-theme="dark"> <!-- 暗色主题 -->
70
+ <html data-theme="dracula">
44
71
  ```
45
72
 
46
- ## 🌍 多语言
73
+ 可用主题:
47
74
 
48
- ### 全局配置
75
+ `light` `dark` `cupcake` `bumblebee` `emerald` `corporate` `synthwave` `retro` `cyberpunk` `valentine` `halloween` `garden` `forest` `aqua` `lofi` `pastel` `fantasy` `wireframe` `black` `luxury` `dracula` `cmyk` `autumn` `business` `acid` `lemonade` `night` `coffee` `winter`
49
76
 
50
- ```javascript
51
- import { ElConfigProvider } from '@macroui/macroui'
52
- import { zhCn, en } from '@macroui/macroui/locale'
77
+ ## 📚 组件列表
53
78
 
54
- app.use(ElConfigProvider, { locale: zhCn })
55
- ```
79
+ ### 基础组件
56
80
 
57
- ### 组件内使用
81
+ | 组件 | 说明 |
82
+ | --- | --- |
83
+ | ElButton | 按钮(6 种 type、3 种 size、loading、icon) |
84
+ | ElLink | 文字链接 |
85
+ | ElText | 文本(标题/段落/正文) |
86
+ | ElIcon | 图标(基于 @macroui/macroui-icons) |
87
+ | ElSpace | 间距 |
88
+ | ElDivider | 分割线 |
58
89
 
59
- ```javascript
60
- import { useLocale } from '@macroui/macroui'
90
+ ### 表单组件
61
91
 
62
- const { t } = useLocale()
92
+ | 组件 | 说明 |
93
+ | --- | --- |
94
+ | ElInput | 文本输入 |
95
+ | ElInputNumber | 数字输入 |
96
+ | ElInputTag | 标签输入 |
97
+ | ElSelect | 选择器 |
98
+ | ElOption | 选项 |
99
+ | ElCascader | 级联选择 |
100
+ | ElTreeSelect | 树形选择 |
101
+ | ElTree | 树形控件 |
102
+ | ElCheckbox | 多选框 |
103
+ | ElRadio | 单选框 |
104
+ | ElSwitch | 开关 |
105
+ | ElSlider | 滑块 |
106
+ | ElRate | 评分 |
107
+ | ElColorPicker | 颜色选择器 |
108
+ | ElDatePicker | 日期选择 |
109
+ | ElTimePicker | 时间选择 |
110
+ | ElTimeSelect | 时间选择 |
111
+ | ElUpload | 上传 |
112
+ | ElForm | 表单 |
113
+ | ElFormItem | 表单项 |
114
+ | ElMention | @提及 |
115
+ | ElAutocomplete | 自动补全 |
63
116
 
64
- // 使用翻译键
65
- t('pagination.total', { total: 100 }) // 输出:共 100 条
66
- t('select.placeholder') // 输出:请选择
67
- ```
117
+ ### 数据展示
68
118
 
69
- ### 支持的语言
119
+ | 组件 | 说明 |
120
+ | --- | --- |
121
+ | ElTable | 表格(排序、筛选、树形、虚拟滚动) |
122
+ | ElTableColumn | 表格列 |
123
+ | ElTableV2 | 虚拟表格 |
124
+ | ElPagination | 分页 |
125
+ | ElTag | 标签 |
126
+ | ElBadge | 徽章 |
127
+ | ElAvatar | 头像 |
128
+ | ElSkeleton | 骨架屏 |
129
+ | ElProgress | 进度条 |
130
+ | ElEmpty | 空状态 |
131
+ | ElResult | 结果页 |
132
+ | ElDescriptions | 描述列表 |
133
+ | ElStatistic | 统计数值 |
134
+ | ElTimeline | 时间轴 |
135
+ | ElCalendar | 日历 |
136
+ | ElImage | 图片 |
137
+ | ElCarousel | 走马灯 |
138
+ | ElCollapse | 折叠面板 |
139
+ | ElTree | 树 |
140
+ | ElTreeV2 | 虚拟树 |
141
+ | ElTransfer | 穿梭框 |
142
+ | ElWatermark | 水印 |
70
143
 
71
- | 语言 | 代码 | 状态 |
72
- |------|------|------|
73
- | 简体中文 | zh-cn | ✅ 已完成 |
74
- | English | en | ✅ 已完成 |
144
+ ### 反馈组件
75
145
 
76
- ## 主题
146
+ | 组件 | 说明 |
147
+ | --- | --- |
148
+ | ElAlert | 警告提示 |
149
+ | ElDialog | 对话框 |
150
+ | ElDrawer | 抽屉 |
151
+ | ElMessage | 消息提示(函数式调用) |
152
+ | ElMessageBox | 消息弹框 |
153
+ | ElNotification | 通知 |
154
+ | ElPopconfirm | 弹出确认框 |
155
+ | ElTooltip | 文字提示 |
156
+ | ElPopover | 弹出框 |
157
+ | ElLoading | 加载状态 |
77
158
 
78
- 支持 daisyUI 全部 25 个主题:
159
+ ### 导航组件
79
160
 
80
- ```javascript
81
- // 切换主题
82
- document.documentElement.setAttribute('data-theme', 'dark')
83
- ```
161
+ | 组件 | 说明 |
162
+ | --- | --- |
163
+ | ElMenu | 导航菜单 |
164
+ | ElMenuItem | 菜单项 |
165
+ | ElSubMenu | 子菜单 |
166
+ | ElTabs | 标签页 |
167
+ | ElTabPane | 标签页内容 |
168
+ | ElBreadcrumb | 面包屑 |
169
+ | ElBreadcrumbItem | 面包屑项 |
170
+ | ElDropdown | 下拉菜单 |
171
+ | ElDropdownItem | 下拉项 |
172
+ | ElDropdownMenu | 下拉菜单容器 |
173
+ | ElSteps | 步骤条 |
174
+ | ElStep | 步骤 |
175
+ | ElPageHeader | 页头 |
176
+ | ElAffix | 固钉 |
177
+ | ElBacktop | 回到顶部 |
178
+ | ElAnchor | 锚点 |
179
+ | ElTour | 漫游式引导 |
84
180
 
85
- 主题列表:
181
+ ### 布局组件
86
182
 
87
- - light, dark, corporate, business, cmyk, acid, aqua, autumn
88
- - black, coffee, cupcake, cyberpunk, dracula, emeral, fantasy
89
- - forest, garden, halloween, jungle, lofi, luxury, night
90
- - pastel, retro, synthwave, valentine, wireframe, zenith
183
+ | 组件 | 说明 |
184
+ | --- | --- |
185
+ | ElContainer | 容器 |
186
+ | ElHeader / ElAside / ElMain / ElFooter | 布局子元素 |
187
+ | ElRow / ElCol | 栅格 |
188
+ | ElSplitter | 分隔面板 |
189
+ | ElScrollbar | 滚动条 |
190
+ | ElInfiniteScroll | 无限滚动指令 |
191
+ | ElSegmented | 分段控制器 |
192
+ | ElConfigProvider | 全局配置 |
193
+ | ElBorder | 边框 |
91
194
 
92
- ## 组件列表
195
+ ## 🌍 国际化 (i18n)
93
196
 
94
- ### 表单组件
197
+ ```ts
198
+ import { ElConfigProvider } from '@macroui/macroui-vue'
199
+ import { zhCn, en } from '@macroui/macroui-vue/locale'
95
200
 
96
- | 组件 | 说明 | DaisyUI |
97
- |------|------|--------|
98
- | ElButton | 按钮 | button |
99
- | ElInput | 输入框 | input |
100
- | ElSelect | 选择器 | select |
101
- | ElCheckbox | 多选框 | checkbox |
102
- | ElRadio | 单选框 | radio |
103
- | ElSwitch | 开关 | toggle |
104
- | ElTag | 标签 | badge |
105
- | ElForm | 表单 | form |
106
- | ElInputNumber | 数字输入 | - |
107
- | ElSlider | 滑块 | - |
108
- | ElRate | 评分 | - |
201
+ app.use(ElConfigProvider, { locale: zhCn })
202
+ ```
109
203
 
110
- ### 数据展示
204
+ 支持的语言:
111
205
 
112
- | 组件 | 说明 | DaisyUI |
113
- |------|------|--------|
114
- | ElBadge | 徽章 | badge |
115
- | ElProgress | 进度条 | progress |
116
- | ElAvatar | 头像 | avatar |
117
- | ElSkeleton | 骨架屏 | skeleton |
118
- | ElTable | 表格 | table |
119
- | ElEmpty | 空状态 | - |
120
- | ElResult | 结果页 | - |
206
+ | 语言 | 引入路径 |
207
+ | --- | --- |
208
+ | 简体中文 (zh-cn) | `@macroui/macroui-vue/locale/lang/zh-cn` |
209
+ | English (en) | `@macroui/macroui-vue/locale/lang/en` |
121
210
 
122
- ### 反馈组件
211
+ ## 🛠 开发
123
212
 
124
- | 组件 | 说明 | DaisyUI |
125
- |------|------|--------|
126
- | ElAlert | 警告提示 | alert |
127
- | ElLoading | 加载状态 | loading |
128
- | ElMessage | 消息提示 | toast |
129
- | ElNotification | 通知 | toast |
213
+ ```bash
214
+ # 安装依赖
215
+ pnpm install
130
216
 
131
- ### 容器组件
217
+ # 开发模式(监听源码变化)
218
+ pnpm dev:lib
132
219
 
133
- | 组件 | 说明 | DaisyUI |
134
- |------|------|--------|
135
- | ElCard | 卡片 | card |
136
- | ElCollapse | 折叠面板 | collapse |
137
- | ElDialog | 对话框 | modal |
138
- | ElDrawer | 抽屉 | - |
220
+ # 构建库产物 (输出到 dist/)
221
+ pnpm build:lib
139
222
 
140
- ### 导航组件
223
+ # 运行单元测试
224
+ pnpm test
141
225
 
142
- | 组件 | 说明 | DaisyUI |
143
- |------|------|--------|
144
- | ElBreadcrumb | 面包屑 | breadcrumb |
145
- | ElPagination | 分页 | pagination |
146
- | ElSteps | 步骤条 | steps |
147
- | ElDropdown | 下拉菜单 | dropdown |
148
- | ElMenu | 菜单 | menu |
149
- | ElTabs | 标签页 | tabs |
150
- | ElPageHeader | 页头 | - |
226
+ # E2E 测试
227
+ pnpm test:e2e
151
228
 
152
- ### 布局组件
229
+ # 代码风格检查
230
+ pnpm lint
153
231
 
154
- | 组件 | 说明 | DaisyUI |
155
- |------|------|--------|
156
- | ElDivider | 分割线 | divider |
157
- | ElTooltip | 文字提示 | tooltip |
158
- | ElContainer | 容器 | - |
159
- | ElSpace | 间距 | - |
232
+ # TypeScript 类型检查
233
+ pnpm typecheck
234
+ ```
160
235
 
161
- ## 开发
236
+ ## 📤 发布到 npm
162
237
 
163
238
  ```bash
164
- # 安装依赖
165
- npm install
239
+ # 1. 确认登录状态
240
+ npm whoami
166
241
 
167
- # 启动示例页面(推荐)
168
- npm run dev:examples
242
+ # 2. 修改 package.json 中的 version (遵循 semver)
169
243
 
170
- # 构建库
171
- npm run build:lib
244
+ # 3. 构建
245
+ pnpm build:lib
172
246
 
173
- # 运行测试
174
- npm run test
247
+ # 4. 发布
248
+ npm publish --access public
249
+ ```
175
250
 
176
- # 代码检查
177
- npm run lint
251
+ ## 📁 项目结构
178
252
 
179
- # TypeScript 检查
180
- npm run typecheck
253
+ ```
254
+ macroui-vue/
255
+ ├── packages/
256
+ │ ├── components/ # 90+ 组件源码
257
+ │ │ ├── ElButton/
258
+ │ │ ├── ElTable/
259
+ │ │ ├── ElForm/
260
+ │ │ └── ...
261
+ │ ├── icons/ # 图标库(@macroui/macroui-icons)
262
+ │ ├── locale/ # i18n 语言包
263
+ │ └── index.ts # 包入口
264
+ ├── tests/ # 单元测试
265
+ ├── docs/ # 组件文档
266
+ ├── styles/ # 全局样式
267
+ ├── dist/ # 构建产物
268
+ └── package.json
181
269
  ```
182
270
 
183
- ### 示例页面
271
+ ## 🧪 浏览器支持
184
272
 
185
- 启动示例页面后,访问 http://localhost:3000/ 可以查看所有组件的示例演示。
273
+ 支持现代浏览器和 Vue 3(≥ 3.4):
186
274
 
187
- 启动命令:`npm run dev:examples`
275
+ - Chrome / Edge / Firefox / Safari 最近 2 个主版本
276
+ - 不支持 IE
188
277
 
189
- > 注意:示例页面使用 3000 端口,如果端口被占用,Vite 会自动选择其他端口。
278
+ ## 🔗 相关项目
190
279
 
191
- ## NPM 发布
280
+ - [@macroui/macroui](https://www.npmjs.com/package/@macroui/macroui) — DaisyUI 主题与样式
281
+ - [@macroui/macroui-icons](https://www.npmjs.com/package/@macroui/macroui-icons) — 图标库
282
+ - [Element Plus](https://element-plus.org/) — API 兼容性参考
192
283
 
193
- ```bash
194
- # 设置认证 Token(2FA 账户必须)
195
- npm config set //registry.npmjs.org/:_authToken=YOUR_GRANULAR_TOKEN
284
+ ## 🤝 贡献
196
285
 
197
- # 发布包
198
- npm publish --access public
199
- ```
286
+ 欢迎 PR 和 Issue!
287
+
288
+ 1. Fork 本仓库
289
+ 2. 创建 feature 分支 (`git checkout -b feature/AmazingFeature`)
290
+ 3. 提交修改 (`git commit -m 'Add some AmazingFeature'`)
291
+ 4. 推送到远程 (`git push origin feature/AmazingFeature`)
292
+ 5. 提交 Pull Request
293
+
294
+ ## 📄 许可证
295
+
296
+ [MIT License](LICENSE)
200
297
 
201
- ## 许可证
298
+ ## 🔗 链接
202
299
 
203
- MIT License
300
+ - 仓库地址:https://gitee.com/macroui/macroui-vue
301
+ - 文档:https://github.com/mobiui/macroui
302
+ - 问题反馈:https://github.com/mobiui/macroui/issues