@me-framework/me-ui-antdv-next 0.0.34 → 0.0.36
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 +160 -54
- package/dist/index.d.ts +7 -1
- package/dist/input-json/index.css +1 -0
- package/dist/input-json/index.d.ts +4 -0
- package/dist/input-json/index.js +208 -0
- package/dist/input-json/index.vue.d.ts +50 -0
- package/dist/input-json/types.d.ts +69 -0
- package/dist/input-number/index.css +1 -0
- package/dist/input-number/index.d.ts +4 -0
- package/dist/input-number/index.js +170 -0
- package/dist/input-number/index.vue.d.ts +44 -0
- package/dist/input-number/types.d.ts +66 -0
- package/dist/input-property/index.css +1 -1
- package/dist/input-property/index.js +317 -297
- package/dist/input-property/index.vue.d.ts +2 -2
- package/dist/input-radio/index.css +1 -1
- package/dist/input-radio/index.js +70 -33
- package/dist/input-radio/index.vue.d.ts +39 -10
- package/dist/input-radio/types.d.ts +26 -4
- package/dist/me-ui-antdv-next.js +1097 -584
- package/dist/me-ui-antdv-next.umd.cjs +3 -3
- package/dist/nav/index.vue.d.ts +2 -2
- package/dist/resolver/index.js +4 -1
- package/dist/style.css +1 -1
- package/dist/text/index.css +1 -0
- package/dist/text/index.d.ts +4 -0
- package/dist/text/index.js +98 -0
- package/dist/text/index.vue.d.ts +25 -0
- package/dist/text/types.d.ts +63 -0
- package/dist/tree-menu/index.vue.d.ts +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,56 +1,67 @@
|
|
|
1
1
|
# me-ui-antdv-next
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
- Vue 3 Composition API
|
|
8
|
-
- TypeScript
|
|
9
|
-
- antdv-next
|
|
10
|
-
- Lucide 图标库
|
|
11
|
-
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
3
|
+
> 基于 Vue 3 + TypeScript + antdv-next 的企业级 UI 组件库
|
|
4
|
+
|
|
5
|
+
## 特性
|
|
6
|
+
|
|
7
|
+
- **Vue 3 Composition API** + `<script setup>`
|
|
8
|
+
- **TypeScript** 全量类型支持,附带组件级子路径类型
|
|
9
|
+
- 基于 **antdv-next**(Ant Design Vue 的 Vue 3 分支)二次封装,`a-` 前缀组件由消费项目全局注册
|
|
10
|
+
- **Lucide** 图标库 + 支持阿里 **iconfont** 动态加载
|
|
11
|
+
- **双构建形态**:全量(ES + UMD + 单 style.css)与按需(组件级子路径 + Resolver)
|
|
12
|
+
- Vite 8 构建,支持按需导入自动 Tree-shaking
|
|
13
|
+
|
|
14
|
+
## 组件列表
|
|
15
|
+
|
|
16
|
+
| 分类 | 组件 | 说明 |
|
|
17
|
+
| --- | --- | --- |
|
|
18
|
+
| 基础 | [MeIcon](document/components/me-icon.md) | 图标(Lucide + iconfont) |
|
|
19
|
+
| 基础 | [MeText](document/components/me-text.md) | 文字 |
|
|
20
|
+
| 导航 | [MeBreadcrumb](document/components/me-breadcrumb.md) | 面包屑 |
|
|
21
|
+
| 导航 | [MeNav](document/components/me-nav.md) | 导航标签(手写斜角 tab) |
|
|
22
|
+
| 导航 | [MeMenu](document/components/me-menu.md) | 导航菜单 |
|
|
23
|
+
| 导航 | [MeTreeMenu](document/components/me-tree-menu.md) | 树形菜单 |
|
|
24
|
+
| 布局 | [MeBox](document/components/me-box.md) | 容器 |
|
|
25
|
+
| 布局 | [MeCard](document/components/me-card.md) | 卡片 |
|
|
26
|
+
| 布局 | [MeBody](document/components/me-body.md) | 内容体 |
|
|
27
|
+
| 布局 | [MeSkeleton](document/components/me-skeleton.md) | 骨架屏 |
|
|
28
|
+
| 布局 | [MeCodeBox](document/components/me-code-box.md) | 代码展示(含行号高亮) |
|
|
29
|
+
| 表单 | [MeInputGps](document/components/me-input-gps.md) | GPS 坐标输入 |
|
|
30
|
+
| 表单 | [MeInputIconSelector](document/components/me-input-icon-selector.md) | 图标选择器 |
|
|
31
|
+
| 表单 | [MeInputRadio](document/components/me-input-radio.md) | 单选卡片 |
|
|
32
|
+
| 表单 | [MeLoadJson](document/components/me-load-json.md) | JSON 导入编辑器 |
|
|
33
|
+
| 表单 | [MeInputProperty](document/components/me-input-property.md) | 属性编辑器(支持数组/弹窗模式) |
|
|
34
|
+
| 表单 | [MeInputNumber](document/components/me-input-number.md) | 数字输入框 |
|
|
35
|
+
| 表单 | [MeInputJson](document/components/me-input-json.md) | JSON 编辑器 |
|
|
36
|
+
| 表单 | [MeLoginPage](document/components/me-login-page.md) | 登录页 |
|
|
37
|
+
| 反馈 | [MeMessage](document/components/me-message.md) | 消息对话框(支持函数式调用) |
|
|
38
|
+
| 反馈 | [MeModal](document/components/me-modal.md) | 对话框 |
|
|
39
|
+
|
|
40
|
+
> 组件完整 API 与示例见 `document/components/` 目录,在线演示见 `demo/`。
|
|
41
|
+
|
|
42
|
+
## 环境要求
|
|
43
|
+
|
|
44
|
+
- **Vue** ≥ 3.0(peerDependency)
|
|
45
|
+
- **antdv-next**:组件内部使用 `a-` 前缀组件,消费项目需先全局注册
|
|
46
|
+
- **TypeScript** ≥ 4.7(支持 `exports` 子路径通配解析)
|
|
47
|
+
|
|
48
|
+
## 安装
|
|
32
49
|
|
|
33
50
|
```bash
|
|
34
|
-
|
|
35
|
-
|
|
51
|
+
npm install @me-framework/me-ui-antdv-next
|
|
52
|
+
# 或
|
|
53
|
+
yarn add @me-framework/me-ui-antdv-next
|
|
54
|
+
# 或
|
|
55
|
+
pnpm add @me-framework/me-ui-antdv-next
|
|
56
|
+
```
|
|
36
57
|
|
|
37
|
-
|
|
38
|
-
npm run dev
|
|
58
|
+
> 注意:`antdv-next` 为 peer 依赖,需在消费项目中一并安装。
|
|
39
59
|
|
|
40
|
-
|
|
41
|
-
npm run build
|
|
60
|
+
## 快速开始
|
|
42
61
|
|
|
43
|
-
|
|
44
|
-
npm run build:demo
|
|
45
|
-
|
|
46
|
-
# 类型检查
|
|
47
|
-
npm run type-check
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
#### 使用说明
|
|
62
|
+
### 全局引入
|
|
51
63
|
|
|
52
64
|
```ts
|
|
53
|
-
// 全局引入
|
|
54
65
|
import { createApp } from 'vue'
|
|
55
66
|
import Antd from 'antdv-next'
|
|
56
67
|
import 'antdv-next/dist/reset.css'
|
|
@@ -58,27 +69,26 @@ import MeUiAntdv from '@me-framework/me-ui-antdv-next'
|
|
|
58
69
|
import '@me-framework/me-ui-antdv-next/dist/style.css'
|
|
59
70
|
|
|
60
71
|
const app = createApp(App)
|
|
61
|
-
app.use(Antd)
|
|
72
|
+
app.use(Antd) // 先注册 antdv-next(组件内部依赖 a- 前缀组件)
|
|
62
73
|
app.use(MeUiAntdv)
|
|
63
74
|
app.mount('#app')
|
|
64
75
|
```
|
|
65
76
|
|
|
66
77
|
```vue
|
|
67
|
-
<!-- 组件使用 -->
|
|
68
78
|
<template>
|
|
69
|
-
<
|
|
79
|
+
<MeIcon name="Home" />
|
|
70
80
|
</template>
|
|
71
81
|
```
|
|
72
82
|
|
|
73
83
|
### 按需引入(推荐,减小打包体积)
|
|
74
84
|
|
|
75
|
-
组件库支持**组件级子路径按需导入**,每个组件可独立引入 JS
|
|
85
|
+
组件库支持**组件级子路径按需导入**,每个组件可独立引入 JS 与样式。
|
|
76
86
|
|
|
77
87
|
```ts
|
|
78
88
|
import { createApp } from 'vue'
|
|
79
89
|
import Antd from 'antdv-next'
|
|
80
90
|
import 'antdv-next/dist/reset.css'
|
|
81
|
-
// 1) 先引入基础 token
|
|
91
|
+
// 1) 先引入基础 token 基线(:root / html.dark 设计变量),按需引入任意组件都需引一次
|
|
82
92
|
import '@me-framework/me-ui-antdv-next/base.css'
|
|
83
93
|
// 2) 按需引入组件
|
|
84
94
|
import MeMenu from '@me-framework/me-ui-antdv-next/menu'
|
|
@@ -90,7 +100,7 @@ app.use(MeMenu)
|
|
|
90
100
|
app.mount('#app')
|
|
91
101
|
```
|
|
92
102
|
|
|
93
|
-
|
|
103
|
+
### 使用 unplugin-vue-components 自动按需引入
|
|
94
104
|
|
|
95
105
|
在 Vite 项目中配置:
|
|
96
106
|
|
|
@@ -111,13 +121,109 @@ export default defineConfig({
|
|
|
111
121
|
> - 组件内部依赖的兄弟组件(如 `menu` 依赖 `icon`)会随子入口自动引入,无需手动补引。
|
|
112
122
|
> - 需要 TypeScript ≥ 4.7 以支持 `exports` 子路径通配解析。
|
|
113
123
|
|
|
114
|
-
|
|
124
|
+
### 函数式 API
|
|
125
|
+
|
|
126
|
+
`MeMessage` 支持函数式调用,可传入配置对象直接弹出消息对话框:
|
|
127
|
+
|
|
128
|
+
```ts
|
|
129
|
+
import { $message } from '@me-framework/me-ui-antdv-next'
|
|
130
|
+
|
|
131
|
+
// 打开(normal / process 双状态,请求期间自动切换 loading)
|
|
132
|
+
const instance = $message({
|
|
133
|
+
data: {
|
|
134
|
+
normal: { title: '提示', message: '确认执行该操作?' },
|
|
135
|
+
process: { title: '处理中', message: '请稍候…', loading: true },
|
|
136
|
+
},
|
|
137
|
+
handler: {
|
|
138
|
+
confirm: (data) => { /* 确认回调 */ },
|
|
139
|
+
cancel: () => { /* 取消回调 */ },
|
|
140
|
+
},
|
|
141
|
+
})
|
|
142
|
+
// 手动关闭
|
|
143
|
+
instance.close()
|
|
144
|
+
// 关闭所有
|
|
145
|
+
$message.closeAll()
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
`MeIcon` 提供 `loadIconfont()` 动态加载阿里 iconfont Symbol 资源:
|
|
149
|
+
|
|
150
|
+
```ts
|
|
151
|
+
import { loadIconfont } from '@me-framework/me-ui-antdv-next'
|
|
152
|
+
|
|
153
|
+
loadIconfont('//at.alicdn.com/t/c/font_xxx.js')
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
## 构建产物
|
|
157
|
+
|
|
158
|
+
包同时输出**全量**与**按需**两种形态,均通过 `package.json` 的 `exports` 字段暴露子路径:
|
|
159
|
+
|
|
160
|
+
```
|
|
161
|
+
dist/
|
|
162
|
+
├── me-ui-antdv-next.js # 全量 ES
|
|
163
|
+
├── me-ui-antdv-next.umd.cjs # 全量 UMD(<script> 直引)
|
|
164
|
+
├── style.css # 全量样式(已含 base token)
|
|
165
|
+
├── index.d.ts # 全量类型入口
|
|
166
|
+
├── base/index.css # 按需:基础 token 基线
|
|
167
|
+
├── menu/ # 按需:每组件一个子路径
|
|
168
|
+
│ ├── index.js
|
|
169
|
+
│ ├── index.css
|
|
170
|
+
│ └── index.d.ts
|
|
171
|
+
├── resolver/index.js # unplugin Resolver
|
|
172
|
+
└── ...
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
## 本地开发
|
|
176
|
+
|
|
177
|
+
```bash
|
|
178
|
+
# 安装依赖
|
|
179
|
+
npm install
|
|
180
|
+
|
|
181
|
+
# 启动开发演示服务器
|
|
182
|
+
npm run dev
|
|
183
|
+
|
|
184
|
+
# 构建组件库(vue-tsc 类型检查 + 全量构建 + 按需构建 + 重组子路径 dts)
|
|
185
|
+
npm run build
|
|
186
|
+
# 或
|
|
187
|
+
npm run build:lib
|
|
188
|
+
|
|
189
|
+
# 构建演示站点
|
|
190
|
+
npm run build:demo
|
|
191
|
+
|
|
192
|
+
# 类型检查
|
|
193
|
+
npm run type-check
|
|
194
|
+
|
|
195
|
+
# 发布(patch/minor/major,或 beta 预发布)
|
|
196
|
+
npm run release
|
|
197
|
+
npm run release:beta
|
|
198
|
+
npm run quick-patch # 快速 patch 版本发布
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
## 项目结构
|
|
202
|
+
|
|
203
|
+
```
|
|
204
|
+
├── src/ # 组件库源码
|
|
205
|
+
│ ├── components/ # 组件目录,每个组件一个子目录(含 index.ts/index.vue/style.scss/types.ts)
|
|
206
|
+
│ ├── styles/ # 全局样式与设计变量(base.scss 为按需 token 基线入口)
|
|
207
|
+
│ ├── resolver/ # 按需 Resolver(componentDirMap 维护组件名→目录映射)
|
|
208
|
+
│ ├── utils/ # 工具函数
|
|
209
|
+
│ ├── composables/ # 组合式函数
|
|
210
|
+
│ ├── types/ # 全局类型定义
|
|
211
|
+
│ └── index.ts # 组件库入口
|
|
212
|
+
├── demo/ # 开发演示站点(views/layout/router/config)
|
|
213
|
+
├── document/ # Markdown 组件文档
|
|
214
|
+
├── scripts/ # 构建后处理与发布脚本
|
|
215
|
+
├── vite.config.ts # 全量构建配置(ES + UMD + style.css)
|
|
216
|
+
├── vite.ondemand.config.ts # 按需构建配置(多入口 + 子路径 dts)
|
|
217
|
+
└── package.json # 包入口与 exports 声明
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
## 参与贡献
|
|
115
221
|
|
|
116
222
|
1. Fork 本仓库
|
|
117
|
-
2. 新建 Feat_xxx 分支
|
|
223
|
+
2. 新建 `Feat_xxx` 分支
|
|
118
224
|
3. 提交代码
|
|
119
225
|
4. 新建 Pull Request
|
|
120
226
|
|
|
121
|
-
|
|
227
|
+
## License
|
|
122
228
|
|
|
123
|
-
MIT
|
|
229
|
+
[MIT](LICENSE)
|
package/dist/index.d.ts
CHANGED
|
@@ -16,9 +16,12 @@ import { default as MeLoginPage } from './login-page';
|
|
|
16
16
|
import { default as MeCard } from './card';
|
|
17
17
|
import { default as MeSkeleton } from './skeleton';
|
|
18
18
|
import { default as MeInputProperty } from './input-property';
|
|
19
|
+
import { default as MeInputNumber } from './input-number';
|
|
19
20
|
import { default as MeCodeBox, MeCodeItem } from './code-box';
|
|
21
|
+
import { default as MeText } from './text';
|
|
22
|
+
import { default as MeInputJson } from './input-json';
|
|
20
23
|
declare const install: (app: App) => void;
|
|
21
|
-
export { MeMessage, MeMessageComponent, MeIcon, MeBox, MeBreadcrumb, MeBody, MeMenu, MeNav, MeModal, MeTreeMenu, MeInputGps, MeInputIconSelector, MeInputRadio, MeLoadJson, MeLoginPage, MeCard, MeSkeleton, MeInputProperty, MeCodeBox, MeCodeItem, install };
|
|
24
|
+
export { MeMessage, MeMessageComponent, MeIcon, MeBox, MeBreadcrumb, MeBody, MeMenu, MeNav, MeModal, MeTreeMenu, MeInputGps, MeInputIconSelector, MeInputRadio, MeLoadJson, MeLoginPage, MeCard, MeSkeleton, MeInputProperty, MeInputNumber, MeCodeBox, MeCodeItem, MeText, MeInputJson, install };
|
|
22
25
|
export { MeMessage as $message } from './message';
|
|
23
26
|
export { loadIconfont } from './icon';
|
|
24
27
|
declare const _default: {
|
|
@@ -44,4 +47,7 @@ export * from './login-page';
|
|
|
44
47
|
export * from './card';
|
|
45
48
|
export * from './skeleton';
|
|
46
49
|
export * from './input-property';
|
|
50
|
+
export * from './input-number';
|
|
47
51
|
export * from './code-box';
|
|
52
|
+
export * from './text';
|
|
53
|
+
export * from './input-json';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.me-input-json{background-color:#fff;border:1px solid #d9d9d9;border-radius:6px;width:100%;min-height:200px;transition:border-color .2s;overflow:hidden}.me-input-json:hover{border-color:#4096ff}.me-input-json--focused{border-color:#1677ff;box-shadow:0 0 0 2px #0591ff1a}.me-input-json.is-disabled{cursor:not-allowed;color:#00000040;background-color:#0000000a;border-color:#d9d9d9}.me-input-json.is-disabled .jsoneditor{background-color:#0000}.me-input-json .jsoneditor{border:none}.me-input-json .jsoneditor-poweredBy{display:none!important}.me-input-json .jsoneditor-menu{border-bottom:1px solid #f0f0f0}.me-input-json-wrapper{display:block}
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
import { t as e } from "../chunks/modal-C2Lx5a9H.js";
|
|
2
|
+
import { computed as t, createBlock as n, createElementVNode as r, defineComponent as i, guardReactiveProps as a, nextTick as o, normalizeClass as s, normalizeProps as c, normalizeStyle as l, onBeforeUnmount as u, openBlock as d, ref as f, resolveDynamicComponent as p, watch as m, withCtx as h } from "vue";
|
|
3
|
+
import { message as g } from "antdv-next";
|
|
4
|
+
import _ from "jsoneditor";
|
|
5
|
+
import "jsoneditor/dist/jsoneditor.min.css";
|
|
6
|
+
//#endregion
|
|
7
|
+
//#region src/components/input-json/index.vue
|
|
8
|
+
var v = /* @__PURE__ */ i({
|
|
9
|
+
name: "MeInputJson",
|
|
10
|
+
__name: "index",
|
|
11
|
+
props: {
|
|
12
|
+
modelValue: { default: () => ({}) },
|
|
13
|
+
mode: { default: "code" },
|
|
14
|
+
modes: { default: () => [
|
|
15
|
+
"tree",
|
|
16
|
+
"code",
|
|
17
|
+
"form",
|
|
18
|
+
"text",
|
|
19
|
+
"view"
|
|
20
|
+
] },
|
|
21
|
+
height: { default: 300 },
|
|
22
|
+
disabled: {
|
|
23
|
+
type: Boolean,
|
|
24
|
+
default: !1
|
|
25
|
+
},
|
|
26
|
+
mainMenuBar: {
|
|
27
|
+
type: Boolean,
|
|
28
|
+
default: !0
|
|
29
|
+
},
|
|
30
|
+
navigationBar: {
|
|
31
|
+
type: Boolean,
|
|
32
|
+
default: !0
|
|
33
|
+
},
|
|
34
|
+
statusBar: {
|
|
35
|
+
type: Boolean,
|
|
36
|
+
default: !0
|
|
37
|
+
},
|
|
38
|
+
search: {
|
|
39
|
+
type: Boolean,
|
|
40
|
+
default: !0
|
|
41
|
+
},
|
|
42
|
+
history: {
|
|
43
|
+
type: Boolean,
|
|
44
|
+
default: !0
|
|
45
|
+
},
|
|
46
|
+
indentation: { default: 2 },
|
|
47
|
+
modalMode: {
|
|
48
|
+
type: Boolean,
|
|
49
|
+
default: !1
|
|
50
|
+
},
|
|
51
|
+
open: {
|
|
52
|
+
type: Boolean,
|
|
53
|
+
default: !1
|
|
54
|
+
},
|
|
55
|
+
title: { default: "JSON 编辑" },
|
|
56
|
+
modalWidth: { default: 720 },
|
|
57
|
+
okText: { default: "确定" },
|
|
58
|
+
cancelText: { default: "取消" },
|
|
59
|
+
fullscreen: {
|
|
60
|
+
type: Boolean,
|
|
61
|
+
default: !0
|
|
62
|
+
},
|
|
63
|
+
defaultFullscreen: {
|
|
64
|
+
type: Boolean,
|
|
65
|
+
default: !1
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
emits: [
|
|
69
|
+
"update:modelValue",
|
|
70
|
+
"update:mode",
|
|
71
|
+
"update:open",
|
|
72
|
+
"change",
|
|
73
|
+
"ok",
|
|
74
|
+
"cancel",
|
|
75
|
+
"error",
|
|
76
|
+
"fullscreen-change"
|
|
77
|
+
],
|
|
78
|
+
setup(i, { expose: v, emit: y }) {
|
|
79
|
+
let b = i, x = y, S = f(null), C = null, w = f(!1), T = f(!!b.open), E = f(b.open ? H(b.modelValue || {}) : {}), D = f(!!b.defaultFullscreen), O = t(() => b.modalMode && D.value ? "100%" : typeof b.height == "number" ? `${b.height}px` : b.height), k = t(() => b.disabled ? "view" : b.mode), A = t(() => b.disabled ? ["view"] : b.modes), j = t(() => b.modalMode ? {
|
|
80
|
+
open: T.value,
|
|
81
|
+
title: b.title,
|
|
82
|
+
width: b.modalWidth,
|
|
83
|
+
position: "center",
|
|
84
|
+
okText: b.okText,
|
|
85
|
+
cancelText: b.cancelText,
|
|
86
|
+
fullscreen: b.fullscreen,
|
|
87
|
+
defaultFullscreen: b.defaultFullscreen,
|
|
88
|
+
"onUpdate:open": M,
|
|
89
|
+
onOk: F,
|
|
90
|
+
onCancel: N,
|
|
91
|
+
onFullscreenChange: P
|
|
92
|
+
} : { class: "me-input-json-wrapper" });
|
|
93
|
+
function M(e) {
|
|
94
|
+
T.value = e, x("update:open", e);
|
|
95
|
+
}
|
|
96
|
+
function N() {
|
|
97
|
+
x("cancel");
|
|
98
|
+
}
|
|
99
|
+
function P(e) {
|
|
100
|
+
D.value = e, x("fullscreen-change", e), o(() => {
|
|
101
|
+
C?.refresh();
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
function F() {
|
|
105
|
+
if (C) try {
|
|
106
|
+
let e = C.get();
|
|
107
|
+
T.value = !1, x("update:open", !1), x("ok", e), x("change", e);
|
|
108
|
+
} catch (e) {
|
|
109
|
+
g.error(`JSON 格式错误:${e.message}`), x("error", e);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
m(() => b.open, (e) => {
|
|
113
|
+
T.value = !!e, e && (E.value = H(b.modelValue || {}));
|
|
114
|
+
}), m(S, (e) => {
|
|
115
|
+
e ? I(e) : L();
|
|
116
|
+
}, { flush: "post" });
|
|
117
|
+
function I(e, t) {
|
|
118
|
+
let n = t === void 0 ? b.modalMode ? E.value : b.modelValue || {} : t;
|
|
119
|
+
C = new _(e, {
|
|
120
|
+
mode: k.value,
|
|
121
|
+
modes: A.value,
|
|
122
|
+
language: "zh-CN",
|
|
123
|
+
indentation: b.indentation,
|
|
124
|
+
mainMenuBar: b.mainMenuBar && !b.disabled,
|
|
125
|
+
navigationBar: b.navigationBar,
|
|
126
|
+
statusBar: b.statusBar,
|
|
127
|
+
search: b.search,
|
|
128
|
+
history: b.history,
|
|
129
|
+
onChange: R,
|
|
130
|
+
onValidationError: z,
|
|
131
|
+
onModeChange: B,
|
|
132
|
+
onEditable: b.disabled ? () => !1 : void 0
|
|
133
|
+
}, n);
|
|
134
|
+
}
|
|
135
|
+
function L() {
|
|
136
|
+
C &&= (C.destroy(), null);
|
|
137
|
+
}
|
|
138
|
+
u(() => {
|
|
139
|
+
L();
|
|
140
|
+
});
|
|
141
|
+
function R() {
|
|
142
|
+
if (C) try {
|
|
143
|
+
let e = C.get();
|
|
144
|
+
w.value = !1, b.modalMode || (x("update:modelValue", e), x("change", e));
|
|
145
|
+
} catch (e) {
|
|
146
|
+
w.value = !0, x("error", e);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
function z(e) {
|
|
150
|
+
w.value = e.length > 0;
|
|
151
|
+
}
|
|
152
|
+
function B(e, t) {
|
|
153
|
+
b.disabled || x("update:mode", e);
|
|
154
|
+
}
|
|
155
|
+
m(() => b.modelValue, (e) => {
|
|
156
|
+
if (!b.modalMode && C) try {
|
|
157
|
+
let t = C.get();
|
|
158
|
+
JSON.stringify(t) !== JSON.stringify(e) && C.update(e || {});
|
|
159
|
+
} catch {
|
|
160
|
+
C.set(e || {});
|
|
161
|
+
}
|
|
162
|
+
}, { deep: !0 }), m(() => b.disabled, () => {
|
|
163
|
+
if (C && S.value) {
|
|
164
|
+
let e = V();
|
|
165
|
+
L(), o(() => {
|
|
166
|
+
S.value && I(S.value, e);
|
|
167
|
+
});
|
|
168
|
+
}
|
|
169
|
+
});
|
|
170
|
+
function V() {
|
|
171
|
+
try {
|
|
172
|
+
return C?.get() || {};
|
|
173
|
+
} catch {
|
|
174
|
+
return {};
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
function H(e) {
|
|
178
|
+
if (typeof e != "object" || !e) return e;
|
|
179
|
+
if (Array.isArray(e)) return e.map((e) => H(e));
|
|
180
|
+
let t = {};
|
|
181
|
+
for (let n in e) Object.prototype.hasOwnProperty.call(e, n) && (t[n] = H(e[n]));
|
|
182
|
+
return t;
|
|
183
|
+
}
|
|
184
|
+
return v({
|
|
185
|
+
getEditor: () => C,
|
|
186
|
+
getValue: () => V(),
|
|
187
|
+
setValue: (e) => {
|
|
188
|
+
C?.set(e);
|
|
189
|
+
}
|
|
190
|
+
}), (t, o) => (d(), n(p(i.modalMode ? e : "div"), c(a(j.value)), {
|
|
191
|
+
default: h(() => [r("div", {
|
|
192
|
+
ref_key: "editorContainerRef",
|
|
193
|
+
ref: S,
|
|
194
|
+
class: s(["me-input-json", { "is-disabled": i.disabled }]),
|
|
195
|
+
style: l({ height: O.value })
|
|
196
|
+
}, null, 6)]),
|
|
197
|
+
_: 1
|
|
198
|
+
}, 16));
|
|
199
|
+
}
|
|
200
|
+
});
|
|
201
|
+
//#endregion
|
|
202
|
+
//#region src/components/input-json/index.ts
|
|
203
|
+
v.install = (e) => {
|
|
204
|
+
e.component("MeInputJson", v);
|
|
205
|
+
};
|
|
206
|
+
var y = v;
|
|
207
|
+
//#endregion
|
|
208
|
+
export { v as MeInputJson, y as default };
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { default as JSONEditor } from 'jsoneditor';
|
|
2
|
+
import { MeInputJsonProps, MeInputJsonModel, JsonEditorMode } from './types';
|
|
3
|
+
declare const __VLS_export: import('vue').DefineComponent<MeInputJsonProps, {
|
|
4
|
+
/** 获取 JSONEditor 原始实例 */
|
|
5
|
+
getEditor: () => JSONEditor | null;
|
|
6
|
+
/** 获取当前编辑器中的值(可能抛异常) */
|
|
7
|
+
getValue: () => MeInputJsonModel;
|
|
8
|
+
/** 手动设置编辑器值 */
|
|
9
|
+
setValue: (val: MeInputJsonModel) => void;
|
|
10
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
11
|
+
error: (error: Error) => any;
|
|
12
|
+
change: (value: MeInputJsonModel) => any;
|
|
13
|
+
"fullscreen-change": (value: boolean) => any;
|
|
14
|
+
"update:open": (value: boolean) => any;
|
|
15
|
+
ok: (value: MeInputJsonModel) => any;
|
|
16
|
+
cancel: () => any;
|
|
17
|
+
"update:modelValue": (value: MeInputJsonModel) => any;
|
|
18
|
+
"update:mode": (mode: JsonEditorMode) => any;
|
|
19
|
+
}, string, import('vue').PublicProps, Readonly<MeInputJsonProps> & Readonly<{
|
|
20
|
+
onError?: ((error: Error) => any) | undefined;
|
|
21
|
+
onChange?: ((value: MeInputJsonModel) => any) | undefined;
|
|
22
|
+
"onFullscreen-change"?: ((value: boolean) => any) | undefined;
|
|
23
|
+
"onUpdate:open"?: ((value: boolean) => any) | undefined;
|
|
24
|
+
onOk?: ((value: MeInputJsonModel) => any) | undefined;
|
|
25
|
+
onCancel?: (() => any) | undefined;
|
|
26
|
+
"onUpdate:modelValue"?: ((value: MeInputJsonModel) => any) | undefined;
|
|
27
|
+
"onUpdate:mode"?: ((mode: JsonEditorMode) => any) | undefined;
|
|
28
|
+
}>, {
|
|
29
|
+
mode: JsonEditorMode;
|
|
30
|
+
title: string;
|
|
31
|
+
height: string | number;
|
|
32
|
+
search: boolean;
|
|
33
|
+
fullscreen: boolean;
|
|
34
|
+
defaultFullscreen: boolean;
|
|
35
|
+
open: boolean;
|
|
36
|
+
okText: string;
|
|
37
|
+
cancelText: string;
|
|
38
|
+
disabled: boolean;
|
|
39
|
+
modelValue: MeInputJsonModel;
|
|
40
|
+
modes: JsonEditorMode[];
|
|
41
|
+
mainMenuBar: boolean;
|
|
42
|
+
navigationBar: boolean;
|
|
43
|
+
statusBar: boolean;
|
|
44
|
+
history: boolean;
|
|
45
|
+
indentation: number;
|
|
46
|
+
modalMode: boolean;
|
|
47
|
+
modalWidth: number | string;
|
|
48
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
49
|
+
declare const _default: typeof __VLS_export;
|
|
50
|
+
export default _default;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* MeInputJson JSON 编辑器组件类型定义
|
|
3
|
+
*/
|
|
4
|
+
/** JSONEditor 支持的模式 */
|
|
5
|
+
export type JsonEditorMode = 'tree' | 'view' | 'form' | 'code' | 'text' | 'preview';
|
|
6
|
+
/** v-model 绑定的 JSON 数据类型 */
|
|
7
|
+
export type MeInputJsonModel = Record<string, any> | any[];
|
|
8
|
+
/** MeInputJson Props */
|
|
9
|
+
export interface MeInputJsonProps {
|
|
10
|
+
/** v-model 绑定的 JSON 对象或数组 */
|
|
11
|
+
modelValue?: MeInputJsonModel;
|
|
12
|
+
/** 编辑器初始模式,默认 'code' */
|
|
13
|
+
mode?: JsonEditorMode;
|
|
14
|
+
/** 允许切换的模式列表,默认 ['tree', 'code', 'form', 'text', 'view'] */
|
|
15
|
+
modes?: JsonEditorMode[];
|
|
16
|
+
/** 编辑器高度,默认 300(number 为 px) */
|
|
17
|
+
height?: string | number;
|
|
18
|
+
/** 是否禁用编辑,默认 false;禁用时强制 view 模式 */
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
/** 是否显示主菜单栏,默认 true */
|
|
21
|
+
mainMenuBar?: boolean;
|
|
22
|
+
/** 是否显示导航栏,默认 true */
|
|
23
|
+
navigationBar?: boolean;
|
|
24
|
+
/** 是否显示状态栏,默认 true */
|
|
25
|
+
statusBar?: boolean;
|
|
26
|
+
/** 是否启用搜索功能,默认 true */
|
|
27
|
+
search?: boolean;
|
|
28
|
+
/** 是否启用历史记录(撤销/重做),默认 true */
|
|
29
|
+
history?: boolean;
|
|
30
|
+
/** 缩进空格数,默认 2 */
|
|
31
|
+
indentation?: number;
|
|
32
|
+
/** 是否以弹窗模式呈现,默认 false 内嵌 */
|
|
33
|
+
modalMode?: boolean;
|
|
34
|
+
/** 弹窗显隐(v-model:open),仅 modalMode=true 时生效 */
|
|
35
|
+
open?: boolean;
|
|
36
|
+
/** 弹窗标题,默认 'JSON 编辑' */
|
|
37
|
+
title?: string;
|
|
38
|
+
/** 弹窗宽度,默认 720(number 为 px) */
|
|
39
|
+
modalWidth?: number | string;
|
|
40
|
+
/** 确定按钮文字,默认 '确定' */
|
|
41
|
+
okText?: string;
|
|
42
|
+
/** 取消按钮文字,默认 '取消' */
|
|
43
|
+
cancelText?: string;
|
|
44
|
+
/** 是否显示全屏按钮,默认 true(仅弹窗模式生效) */
|
|
45
|
+
fullscreen?: boolean;
|
|
46
|
+
/** 是否默认全屏显示,默认 false(仅弹窗模式生效) */
|
|
47
|
+
defaultFullscreen?: boolean;
|
|
48
|
+
}
|
|
49
|
+
/** MeInputJson Events */
|
|
50
|
+
export interface MeInputJsonEmits {
|
|
51
|
+
/** 更新 v-model 绑定值(内嵌模式实时同步;弹窗模式不触发,用 ok 事件接收) */
|
|
52
|
+
(e: 'update:modelValue', value: MeInputJsonModel): void;
|
|
53
|
+
/** 模式变化(v-model:mode) */
|
|
54
|
+
(e: 'update:mode', mode: JsonEditorMode): void;
|
|
55
|
+
/** 弹窗显隐更新(v-model:open) */
|
|
56
|
+
(e: 'update:open', value: boolean): void;
|
|
57
|
+
/** 数据变更事件(内嵌模式随编辑触发;弹窗模式确定时也会触发一次) */
|
|
58
|
+
(e: 'change', value: MeInputJsonModel): void;
|
|
59
|
+
/** 弹窗模式点确定且 JSON 合法后触发,携带最终值 */
|
|
60
|
+
(e: 'ok', value: MeInputJsonModel): void;
|
|
61
|
+
/** 弹窗模式取消关闭(取消按钮 / 遮罩 / Esc) */
|
|
62
|
+
(e: 'cancel'): void;
|
|
63
|
+
/** JSON 解析错误事件 */
|
|
64
|
+
(e: 'error', error: Error): void;
|
|
65
|
+
/** 弹窗全屏状态变化(仅弹窗模式生效) */
|
|
66
|
+
(e: 'fullscreen-change', value: boolean): void;
|
|
67
|
+
}
|
|
68
|
+
/** MeInputJson 组件实例类型 */
|
|
69
|
+
export type MeInputJsonInstance = InstanceType<typeof import('./index.vue').default>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.me-input-number{width:100%}.me-input-number .ant-input-number-input{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.me-input-number--disabled{cursor:not-allowed}
|