morghulis 1.0.28 → 1.0.29
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.md +245 -78
- package/dist/index.d.ts +31 -2
- package/dist/index.umd.cjs +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
@@ -82,9 +82,13 @@ setup() {
|
|
82
82
|
}
|
83
83
|
```
|
84
84
|
|
85
|
-
##
|
85
|
+
## 组件详解
|
86
86
|
|
87
|
-
###
|
87
|
+
### MDialog 对话框组件
|
88
|
+
|
89
|
+
对话框组件,用于创建自定义对话框。
|
90
|
+
|
91
|
+
#### 属性
|
88
92
|
|
89
93
|
```typescript
|
90
94
|
import { MDialog } from 'morghulis'
|
@@ -92,109 +96,260 @@ import type { MorDialogProps, MorDialogConfig } from 'morghulis'
|
|
92
96
|
|
93
97
|
// 在模板中使用
|
94
98
|
<MDialog
|
95
|
-
v-model="dialogVisible"
|
96
|
-
title="标题"
|
97
|
-
subTitle="副标题"
|
98
|
-
:width="600"
|
99
|
-
:fullscreen="false"
|
100
|
-
:modal="true"
|
99
|
+
v-model="dialogVisible" // 控制对话框显示/隐藏
|
100
|
+
title="标题" // 对话框标题
|
101
|
+
subTitle="副标题" // 对话框副标题
|
102
|
+
:width="600" // 宽度,支持数字或字符串
|
103
|
+
:fullscreen="false" // 是否全屏
|
104
|
+
:modal="true" // 是否显示遮罩层
|
105
|
+
:modalClass="'custom-modal'" // 遮罩层自定义类名
|
106
|
+
:headerClass="'custom-header'" // 头部自定义类名
|
107
|
+
:bodyClass="'custom-body'" // 内容区自定义类名
|
108
|
+
:footerClass="'custom-footer'" // 底部自定义类名
|
109
|
+
:appendToBody="true" // 是否将对话框插入至body元素
|
110
|
+
:lockScroll="true" // 是否在显示对话框时将body滚动锁定
|
111
|
+
:closeOnClickModal="false" // 是否可通过点击遮罩层关闭对话框
|
112
|
+
:closeOnPressEscape="false" // 是否可通过按ESC键关闭对话框
|
113
|
+
:showClose="true" // 是否显示关闭按钮
|
114
|
+
:draggable="true" // 是否可拖拽
|
115
|
+
:center="false" // 是否居中布局
|
116
|
+
:destroyOnClose="true" // 关闭时销毁其中的元素
|
117
|
+
:confirmButtonText="'确认'" // 确认按钮文字
|
118
|
+
:cancelButtonText="'取消'" // 取消按钮文字
|
119
|
+
:confirm="handleConfirm" // 确认回调,接收(data, done)参数
|
120
|
+
:cancel="handleCancel" // 取消回调,接收(data, done)参数
|
101
121
|
@close="handleClose"
|
122
|
+
@update:modelValue="(val) => dialogVisible = val"
|
123
|
+
@update:title="(val) => title = val"
|
124
|
+
@update:subTitle="(val) => subTitle = val"
|
102
125
|
/>
|
126
|
+
```
|
103
127
|
|
104
|
-
|
128
|
+
#### 方法
|
129
|
+
|
130
|
+
```typescript
|
131
|
+
// 在组件中使用方法
|
105
132
|
const dialog = ref()
|
106
|
-
|
107
|
-
|
133
|
+
|
134
|
+
// 打开对话框,可传入数据和配置
|
135
|
+
dialog.value.open(
|
136
|
+
{ id: 1, name: '张三' }, // 传递给对话框的数据
|
137
|
+
{ title: '用户详情', subTitle: '编辑用户信息' } // 可选配置
|
138
|
+
)
|
139
|
+
|
108
140
|
// 关闭对话框
|
109
141
|
dialog.value.close()
|
110
142
|
```
|
111
143
|
|
112
|
-
### 表格组件
|
144
|
+
### MTable 表格组件
|
113
145
|
|
114
|
-
|
115
|
-
import { MTable, DTable, DCell, DForm, DController } from 'morghulis'
|
146
|
+
通用数据表格组件,支持自定义列和操作按钮。
|
116
147
|
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
148
|
+
#### 属性
|
149
|
+
|
150
|
+
```typescript
|
151
|
+
import { MTable } from 'morghulis'
|
152
|
+
import type { MorghulisTableProps, MTableButton, MTableColumn } from 'morghulis'
|
122
153
|
|
123
|
-
// 普通表格
|
124
154
|
<MTable
|
125
|
-
:data="tableData"
|
126
|
-
:
|
127
|
-
|
155
|
+
:data="tableData" // 表格数据
|
156
|
+
:view="metaView" // 元数据视图,定义表格结构
|
157
|
+
:loading="isLoading" // 加载状态
|
158
|
+
:buttons="tableButtons" // 操作按钮配置
|
159
|
+
:columns="tableColumns" // 自定义列配置
|
160
|
+
:sortableCallback="handleSort" // 排序回调
|
161
|
+
|
162
|
+
// 以下是基础表格属性
|
163
|
+
:border="true" // 是否带有边框
|
164
|
+
:stripe="true" // 是否为斑马纹表格
|
165
|
+
:highlightCurrentRow="true" // 是否高亮当前行
|
166
|
+
:row-key="'id'" // 行数据的唯一标识
|
167
|
+
:headerCellClassName="'custom-header'" // 表头单元格类名
|
168
|
+
|
169
|
+
@selection-change="handleSelectionChange" // 选择项变化事件
|
170
|
+
@sort="handleColumnSort" // 排序事件
|
171
|
+
>
|
172
|
+
<!-- 自定义插槽 -->
|
173
|
+
<template #header>
|
174
|
+
<!-- 自定义表格头部内容 -->
|
175
|
+
</template>
|
176
|
+
|
177
|
+
<template #header-tool>
|
178
|
+
<!-- 自定义表格头部工具区 -->
|
179
|
+
</template>
|
180
|
+
|
181
|
+
<template #cell="{ field, row, prop }">
|
182
|
+
<!-- 自定义单元格内容 -->
|
183
|
+
</template>
|
184
|
+
|
185
|
+
<template #footer>
|
186
|
+
<!-- 自定义表格底部内容 -->
|
187
|
+
</template>
|
188
|
+
|
189
|
+
<template #footer-tool>
|
190
|
+
<!-- 自定义表格底部工具区 -->
|
191
|
+
</template>
|
192
|
+
</MTable>
|
128
193
|
```
|
129
194
|
|
130
|
-
|
195
|
+
#### 方法
|
131
196
|
|
132
|
-
|
197
|
+
```typescript
|
198
|
+
// 引用表格组件
|
199
|
+
const table = ref()
|
200
|
+
|
201
|
+
// 获取当前选中的行
|
202
|
+
const selectedRows = table.value.getSelection()
|
203
|
+
|
204
|
+
// 设置选中的行
|
205
|
+
table.value.setSelection(rows)
|
206
|
+
|
207
|
+
// 关闭弹出框
|
208
|
+
table.value.closePopover()
|
209
|
+
```
|
210
|
+
|
211
|
+
### MForm 表单组件
|
212
|
+
|
213
|
+
表单组件,支持自动生成表单字段和字段验证。
|
214
|
+
|
215
|
+
#### 属性
|
133
216
|
|
134
217
|
```typescript
|
135
|
-
import {
|
136
|
-
import type {
|
218
|
+
import { MForm } from 'morghulis'
|
219
|
+
import type { MFormProps } from 'morghulis'
|
137
220
|
|
138
|
-
|
221
|
+
<MForm
|
222
|
+
:item="formData" // 表单数据
|
223
|
+
:view="metaView" // 元数据视图,定义表单结构
|
224
|
+
:db="databaseObject" // 数据库对象,用于CRUD操作
|
225
|
+
/>
|
226
|
+
```
|
139
227
|
|
140
|
-
|
141
|
-
auth.login(userId)
|
228
|
+
#### 方法
|
142
229
|
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
}
|
230
|
+
```typescript
|
231
|
+
// 引用表单组件
|
232
|
+
const form = ref()
|
147
233
|
|
148
|
-
//
|
149
|
-
const
|
234
|
+
// 获取表单数据
|
235
|
+
const formData = form.value.getData()
|
150
236
|
|
151
|
-
//
|
152
|
-
|
237
|
+
// 重置特定字段
|
238
|
+
form.value.reset('fieldName')
|
153
239
|
```
|
154
240
|
|
155
|
-
###
|
241
|
+
### DTable 数据表格组件
|
242
|
+
|
243
|
+
基于MTable的数据表格组件,提供完整的CRUD功能。
|
244
|
+
|
245
|
+
#### 属性
|
156
246
|
|
157
247
|
```typescript
|
158
|
-
import {
|
248
|
+
import { DTable } from 'morghulis'
|
249
|
+
import type { DTableProps } from 'morghulis'
|
159
250
|
|
160
|
-
|
251
|
+
<DTable
|
252
|
+
:db="databaseObject" // 数据库对象,用于CRUD操作
|
253
|
+
:entity="'users'" // 实体名称,对应后端接口
|
254
|
+
:code="'user'" // 代码标识,用于元数据
|
255
|
+
:size="10" // 每页数量
|
256
|
+
:page="1" // 当前页码
|
257
|
+
:includes="includeFields" // 包含的字段
|
258
|
+
:excludes="excludeFields" // 排除的字段
|
259
|
+
:orders="orderConfig" // 排序配置
|
260
|
+
:buttons="actionButtons" // 操作按钮
|
261
|
+
:columns="customColumns" // 自定义列
|
262
|
+
:auth="requireAuth" // 是否需要授权
|
263
|
+
>
|
264
|
+
<!-- 自定义插槽 -->
|
265
|
+
<template #header>
|
266
|
+
<!-- 自定义头部 -->
|
267
|
+
</template>
|
268
|
+
|
269
|
+
<template #cell="{ field, row, prop }">
|
270
|
+
<!-- 自定义单元格 -->
|
271
|
+
</template>
|
272
|
+
</DTable>
|
273
|
+
```
|
274
|
+
|
275
|
+
#### 方法
|
276
|
+
|
277
|
+
```typescript
|
278
|
+
// 引用数据表格组件
|
279
|
+
const dataTable = ref()
|
280
|
+
|
281
|
+
// 刷新表格数据
|
282
|
+
dataTable.value.refresh()
|
283
|
+
|
284
|
+
// 添加新记录
|
285
|
+
dataTable.value.add()
|
286
|
+
|
287
|
+
// 编辑某条记录
|
288
|
+
dataTable.value.edit(row)
|
289
|
+
|
290
|
+
// 删除某条记录
|
291
|
+
dataTable.value.remove(row)
|
161
292
|
|
162
|
-
//
|
163
|
-
|
293
|
+
// 加载数据
|
294
|
+
dataTable.value.load()
|
295
|
+
|
296
|
+
// 上传数据
|
297
|
+
dataTable.value.upload(dataArray)
|
298
|
+
|
299
|
+
// 修改每页显示数量
|
300
|
+
dataTable.value.handlePageSizeChange(20)
|
301
|
+
|
302
|
+
// 修改当前页码
|
303
|
+
dataTable.value.handleCurrentPageChange(2)
|
164
304
|
```
|
165
305
|
|
166
|
-
|
306
|
+
### DForm 数据表单组件
|
167
307
|
|
168
|
-
|
308
|
+
用于数据操作的表单组件。
|
309
|
+
|
310
|
+
#### 属性
|
169
311
|
|
170
312
|
```typescript
|
171
|
-
|
172
|
-
import type {
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
title: '标题',
|
182
|
-
width: 600,
|
183
|
-
modal: true,
|
184
|
-
confirmButtonText: '确认',
|
185
|
-
cancelButtonText: '取消',
|
186
|
-
confirm: (data, done) => {
|
187
|
-
// 处理确认逻辑
|
188
|
-
done()
|
189
|
-
}
|
190
|
-
}
|
313
|
+
import { DForm } from 'morghulis'
|
314
|
+
import type { DFormProps } from 'morghulis'
|
315
|
+
|
316
|
+
<DForm
|
317
|
+
:selection="selectedRows" // 选中的数据行
|
318
|
+
:view="metaView" // 元数据视图
|
319
|
+
:db="databaseObject" // 数据库对象
|
320
|
+
:bean="formData" // 表单数据
|
321
|
+
/>
|
322
|
+
```
|
191
323
|
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
324
|
+
#### 方法
|
325
|
+
|
326
|
+
```typescript
|
327
|
+
// 引用数据表单
|
328
|
+
const dataForm = ref()
|
329
|
+
|
330
|
+
// 获取表单数据
|
331
|
+
const formData = dataForm.value.getData()
|
332
|
+
```
|
333
|
+
|
334
|
+
### DCell 数据单元格组件
|
335
|
+
|
336
|
+
用于表格中单个数据单元格的编辑。
|
337
|
+
|
338
|
+
#### 属性
|
339
|
+
|
340
|
+
```typescript
|
341
|
+
import { DCell } from 'morghulis'
|
342
|
+
import type { DCellProps } from 'morghulis'
|
343
|
+
|
344
|
+
<DCell
|
345
|
+
:view="metaView" // 元数据视图
|
346
|
+
:prop="fieldName" // 字段名称
|
347
|
+
:bean="rowData" // 行数据
|
348
|
+
:db="databaseObject" // 数据库对象
|
349
|
+
:disabled="false" // 是否禁用
|
350
|
+
@cancel="handleCancel" // 取消事件
|
351
|
+
@save="handleSave" // 保存事件
|
352
|
+
/>
|
198
353
|
```
|
199
354
|
|
200
355
|
## 全局类型支持
|
@@ -225,12 +380,24 @@ const handleClose = () => {
|
|
225
380
|
</script>
|
226
381
|
```
|
227
382
|
|
228
|
-
##
|
383
|
+
## 版本历史
|
384
|
+
|
385
|
+
### 1.0.29
|
386
|
+
- 增强了类型定义,补充了 MTable, MForm, DTable 组件的方法导出
|
387
|
+
- 更新了 README.md,添加了详细的组件属性和方法说明
|
388
|
+
|
389
|
+
### 1.0.28
|
390
|
+
- 修复了类型声明冲突问题
|
391
|
+
- 添加了完整的组件类型定义
|
392
|
+
- 增加了全局类型支持,现在可以在模板中获得完整的属性提示
|
393
|
+
- 解决了CSS导入问题,支持多种导入路径
|
229
394
|
|
230
|
-
|
395
|
+
### 1.0.27
|
396
|
+
- 修改了类型定义,避免与 Vue 内置类型冲突
|
397
|
+
- 优化了组件属性和事件定义
|
398
|
+
|
399
|
+
## 工具函数
|
400
|
+
|
401
|
+
### 授权功能
|
231
402
|
|
232
|
-
|
233
|
-
- 提供了完整的组件类型定义
|
234
|
-
- 添加了全局类型支持
|
235
|
-
- 修复了CSS样式文件导入问题
|
236
|
-
- 增强了组件属性和方法的TypeScript智能提示
|
403
|
+
```
|
package/dist/index.d.ts
CHANGED
@@ -286,10 +286,37 @@ export declare const MTable: DefineComponent<
|
|
286
286
|
'onSort'?: (column: any, prop: string, order: string) => any;
|
287
287
|
},
|
288
288
|
{}
|
289
|
-
|
289
|
+
> & {
|
290
|
+
getSelection: () => any[];
|
291
|
+
setSelection: (rows: any[]) => void;
|
292
|
+
closePopover: () => void;
|
293
|
+
};
|
294
|
+
|
295
|
+
// 更新MForm接口,添加缺失的属性
|
296
|
+
export interface MFormProps {
|
297
|
+
item: DataItem;
|
298
|
+
view: MetaView;
|
299
|
+
db: DaoTypes;
|
300
|
+
}
|
290
301
|
|
291
302
|
// 导出MForm组件
|
292
|
-
export declare const MForm: DefineComponent<
|
303
|
+
export declare const MForm: DefineComponent<
|
304
|
+
MFormProps,
|
305
|
+
{},
|
306
|
+
{},
|
307
|
+
{},
|
308
|
+
{},
|
309
|
+
ComponentOptionsMixin,
|
310
|
+
ComponentOptionsMixin,
|
311
|
+
{},
|
312
|
+
string,
|
313
|
+
VNodeProps & AllowedComponentProps & ComponentCustomProps,
|
314
|
+
Readonly<MFormProps>,
|
315
|
+
{}
|
316
|
+
> & {
|
317
|
+
getData: () => any;
|
318
|
+
reset: (prop: string) => void;
|
319
|
+
};
|
293
320
|
|
294
321
|
// 导出数据表格相关组件
|
295
322
|
export declare const DTable: DefineComponent<
|
@@ -315,6 +342,8 @@ export declare const DTable: DefineComponent<
|
|
315
342
|
remove: (row: any) => void;
|
316
343
|
handlePageSizeChange: (size: number) => void;
|
317
344
|
handleCurrentPageChange: (page: number) => void;
|
345
|
+
load: () => void;
|
346
|
+
upload: (data: any[]) => void;
|
318
347
|
};
|
319
348
|
|
320
349
|
export declare const DCell: DefineComponent<
|
package/dist/index.umd.cjs
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
(function(de,Ae){typeof exports=="object"&&typeof module<"u"?Ae(exports,require("element-plus"),require("@fortawesome/fontawesome-svg-core"),require("@fortawesome/free-solid-svg-icons"),require("@fortawesome/vue-fontawesome"),require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","element-plus","@fortawesome/fontawesome-svg-core","@fortawesome/free-solid-svg-icons","@fortawesome/vue-fontawesome","vue","@vueuse/core"],Ae):(de=typeof globalThis<"u"?globalThis:de||self,Ae(de.morghulis={},de.ElementPlus,de.
|
1
|
+
(function(de,Ae){typeof exports=="object"&&typeof module<"u"?Ae(exports,require("element-plus"),require("@fortawesome/fontawesome-svg-core"),require("@fortawesome/free-solid-svg-icons"),require("@fortawesome/vue-fontawesome"),require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","element-plus","@fortawesome/fontawesome-svg-core","@fortawesome/free-solid-svg-icons","@fortawesome/vue-fontawesome","vue","@vueuse/core"],Ae):(de=typeof globalThis<"u"?globalThis:de||self,Ae(de.morghulis={},de.ElementPlus,de.FontawesomeSvgCore,de.FreeSolidSvgIcons,de.VueFontawesome,de.Vue,de.VueUseCore))})(this,function(de,Ae,Bn,mf,_f,l,wa){"use strict";var Kb=Object.defineProperty;var Jb=(de,Ae,Bn)=>Ae in de?Kb(de,Ae,{enumerable:!0,configurable:!0,writable:!0,value:Bn}):de[Ae]=Bn;var On=(de,Ae,Bn)=>Jb(de,typeof Ae!="symbol"?Ae+"":Ae,Bn);var yf={name:"zh-cn",el:{breadcrumb:{label:"面包屑"},colorpicker:{confirm:"确定",clear:"清空",defaultLabel:"颜色选择器",description:"当前颜色 {color},按 Enter 键选择新颜色",alphaLabel:"选择透明度的值"},datepicker:{now:"此刻",today:"今天",cancel:"取消",clear:"清空",confirm:"确定",dateTablePrompt:"使用方向键与 Enter 键可选择日期",monthTablePrompt:"使用方向键与 Enter 键可选择月份",yearTablePrompt:"使用方向键与 Enter 键可选择年份",selectedDate:"已选日期",selectDate:"选择日期",selectTime:"选择时间",startDate:"开始日期",startTime:"开始时间",endDate:"结束日期",endTime:"结束时间",prevYear:"前一年",nextYear:"后一年",prevMonth:"上个月",nextMonth:"下个月",year:"年",month1:"1 月",month2:"2 月",month3:"3 月",month4:"4 月",month5:"5 月",month6:"6 月",month7:"7 月",month8:"8 月",month9:"9 月",month10:"10 月",month11:"11 月",month12:"12 月",weeks:{sun:"日",mon:"一",tue:"二",wed:"三",thu:"四",fri:"五",sat:"六"},weeksFull:{sun:"星期日",mon:"星期一",tue:"星期二",wed:"星期三",thu:"星期四",fri:"星期五",sat:"星期六"},months:{jan:"一月",feb:"二月",mar:"三月",apr:"四月",may:"五月",jun:"六月",jul:"七月",aug:"八月",sep:"九月",oct:"十月",nov:"十一月",dec:"十二月"}},inputNumber:{decrease:"减少数值",increase:"增加数值"},select:{loading:"加载中",noMatch:"无匹配数据",noData:"无数据",placeholder:"请选择"},dropdown:{toggleDropdown:"切换下拉选项"},mention:{loading:"加载中"},cascader:{noMatch:"无匹配数据",loading:"加载中",placeholder:"请选择",noData:"暂无数据"},pagination:{goto:"前往",pagesize:"条/页",total:"共 {total} 条",pageClassifier:"页",page:"页",prev:"上一页",next:"下一页",currentPage:"第 {pager} 页",prevPages:"向前 {pager} 页",nextPages:"向后 {pager} 页",deprecationWarning:"你使用了一些已被废弃的用法,请参考 el-pagination 的官方文档"},dialog:{close:"关闭此对话框"},drawer:{close:"关闭此对话框"},messagebox:{title:"提示",confirm:"确定",cancel:"取消",error:"输入的数据不合法!",close:"关闭此对话框"},upload:{deleteTip:"按 delete 键可删除",delete:"删除",preview:"查看图片",continue:"继续上传"},slider:{defaultLabel:"滑块介于 {min} 至 {max}",defaultRangeStartLabel:"选择起始值",defaultRangeEndLabel:"选择结束值"},table:{emptyText:"暂无数据",confirmFilter:"筛选",resetFilter:"重置",clearFilter:"全部",sumText:"合计"},tour:{next:"下一步",previous:"上一步",finish:"结束导览"},tree:{emptyText:"暂无数据"},transfer:{noMatch:"无匹配数据",noData:"无数据",titles:["列表 1","列表 2"],filterPlaceholder:"请输入搜索内容",noCheckedFormat:"共 {total} 项",hasCheckedFormat:"已选 {checked}/{total} 项"},image:{error:"加载失败"},pageHeader:{title:"返回"},popconfirm:{confirmButtonText:"确定",cancelButtonText:"取消"},carousel:{leftArrow:"上一张幻灯片",rightArrow:"下一张幻灯片",indicator:"幻灯片切换至索引 {index}"}}},Vr=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function ba(i){return i&&i.__esModule&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i}var nr={exports:{}};/**
|
2
2
|
* @license
|
3
3
|
* Lodash <https://lodash.com/>
|
4
4
|
* Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "morghulis",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.29",
|
4
4
|
"private": false,
|
5
5
|
"description": "Vue 3组件库",
|
6
6
|
"type": "module",
|
@@ -12,9 +12,9 @@
|
|
12
12
|
],
|
13
13
|
"exports": {
|
14
14
|
".": {
|
15
|
+
"types": "./dist/index.d.ts",
|
15
16
|
"import": "./dist/index.js",
|
16
|
-
"require": "./dist/index.umd.cjs"
|
17
|
-
"types": "./dist/index.d.ts"
|
17
|
+
"require": "./dist/index.umd.cjs"
|
18
18
|
},
|
19
19
|
"./dist/index.css": "./dist/index.css",
|
20
20
|
"./dist/style.css": "./dist/index.css",
|