├── .gitignore
├── .npmignore
├── README.md
├── babel.config.js
├── examples
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    └── main.js
├── jsconfig.json
├── lib
    ├── demo.html
    ├── json-schema-editor-vue3.common.js
    ├── json-schema-editor-vue3.common.js.map
    ├── json-schema-editor-vue3.css
    ├── json-schema-editor-vue3.umd.js
    ├── json-schema-editor-vue3.umd.js.map
    ├── json-schema-editor-vue3.umd.min.js
    └── json-schema-editor-vue3.umd.min.js.map
├── package-lock.json
├── package.json
├── packages
    ├── index.js
    └── json-schema-editor
    │   ├── LocalProvider
    │       └── index.js
    │   ├── index.js
    │   ├── main.vue
    │   ├── type
    │       ├── array.js
    │       ├── boolean.js
    │       ├── integer.js
    │       ├── number.js
    │       ├── object.js
    │       ├── string.js
    │       └── type.js
    │   └── util.js
├── public
    ├── favicon.ico
    └── index.html
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | node_modules/.bin/
 5 | build/
 6 | config/
 7 | static/
 8 | .babelrc
 9 | .editorconfig
10 | .gitignore
11 | .npmignore
12 | .postcssrc.js
13 | index.html
14 | package-lock.json
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 | 
19 | #Editordirectoriesandfiles
20 | .idea
21 | .vscode
22 | *.suo
23 | *.ntvs*
24 | *.njsproj
25 | *.sln
26 | #忽略目录
27 | examples/
28 | packages/
29 | public/
30 | #忽略指定文件
31 | vue.config.js
32 | babel.config.js
33 | *.map


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">
 2 |   <a href="http://json-schema.sviip.com/" target="_blank">json-schema-editor-vue</a>
 3 | </h1>
 4 | 
 5 | [![Start](https://img.shields.io/github/stars/zyqwst/json-schema-editor-vue?style=social)](https://github.com/zyqwst/json-schema-editor-vue/stargazers)
 6 | [![Fork](https://img.shields.io/github/forks/zyqwst/json-schema-editor-vue?style=social)](https://github.com/zyqwst/json-schema-editor-vue/fork)
 7 | [![GitHub open issues](https://img.shields.io/github/issues/zyqwst/json-schema-editor-vue.svg)](https://github.com/zyqwst/json-schema-editor-vue/issues?q=is%3Aopen+is%3Aissue)
 8 | [![npm download](https://img.shields.io/npm/dt/json-schema-editor-vue.svg?maxAge=30)](https://www.npmjs.com/package/json-schema-editor-vue)
 9 | [![npm download per month](https://img.shields.io/npm/dm/json-schema-editor-vue.svg)](https://www.npmjs.com/package/json-schema-editor-vue)
10 | [![npm version](https://img.shields.io/npm/v/json-schema-editor-vue.svg)](https://www.npmjs.com/package/json-schema-editor-vue)
11 | [![MIT License](https://img.shields.io/github/license/zyqwst/json-schema-editor-vue.svg)](https://github.com/zyqwst/json-schema-editor-vue/blob/master/LICENSE)
12 | 
13 | A json-schema editor of high efficient and easy-to-use, base on Vue3
14 | 
15 | ### 如果你使用Vue2,请查看 [json-schema-editor base on Vue2](https://github.com/zyqwst/json-schema-editor-vue)
16 | 
17 | <p align="center">
18 |   <img width="100%" src="https://github.com/zyqwst/json-schema-editor-vue/raw/master/examples/assets/capture.png">
19 | </p>
20 | 
21 | **支持自定义属性，满足特殊的需求**
22 | <p align="center">
23 |   <img width="100%" src="https://github.com/zyqwst/json-schema-editor-vue/raw/master/examples/assets/custom.png">
24 | </p>
25 | 
26 | ### Example
27 | **Demo** [http://json-schema.sviip.com](http://json-schema.sviip.com) 
28 | 
29 | **[国内Demo](http://json-schema-editor.sviip.com)**
30 | ### Usage
31 | 
32 | ```bash
33 | # vue2
34 | npm install json-schema-editor-vue
35 | # vue3 
36 | npm install json-schema-editor-vue3
37 | ```
38 | 
39 | ```vue
40 | import JsonSchemaEditor from 'json-schema-editor-vue'
41 | import 'json-schema-editor-vue/lib/json-schema-editor-vue.css'
42 | Vue.use(JsonSchemaEditor)
43 | ```
44 | 
45 | ```vue
46 | <template>
47 |   <div id="app">
48 |     ...
49 |     <json-schema-editor :value="tree"/>
50 |     ...
51 |   </div>
52 | </template>
53 | 
54 | <script>
55 | export default {
56 |   name: 'App',
57 |   data() {
58 |     return {
59 |       tree:
60 |       {
61 |         root: {
62 |           type: "object"
63 |         }
64 |       }
65 |     }
66 |   }
67 | }
68 | </script>
69 | ```
70 | ### json-schema-editor-vue属性说明如下：
71 | 
72 | |属性|说明|类型|是否必须|默认值|
73 | :-|:-|:-|:-|:-
74 | |value|传入一个默认的树节点，用来接收编辑后的json schema结果|Object|是||
75 | |disabled|节点名称不可编辑|Boolean||`false`|
76 | |disabledType|节点类型不可选择|Boolean||`false`|
77 | |root|是否是根节点|Boolean||`true`|
78 | |custom|是否允许添加自定义属性|Boolean||`false`|
79 | |lang|国际化(可选zh_CN和en_US)|String||`zh_CN`|
80 | 
81 | Don't forget to star if it helped!
82 | 如果对您有帮助，别忘记给个星哦
83 | 
84 | ### Links
85 | 
86 | - [json-schema-editor-visual](https://github.com/YMFE/json-schema-editor-visual)
87 | - [vue-json-schema-editor-visual](https://github.com/giscafer/vue-json-schema-editor-visual)
88 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     '@vue/cli-plugin-babel/preset'
 4 |   ],
 5 |   plugins: [
 6 |     [
 7 |       "import",
 8 |       {
 9 |         libraryName: "ant-design-vue",
10 |         libraryDirectory: "es",
11 |         "style": "css"
12 |       }
13 |     ]
14 |   ]
15 | }


--------------------------------------------------------------------------------
/examples/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <div class="title">   
  4 |       <a href="https://github.com/zyqwst/json-schema-editor-vue" target="_blank">json-schema-editor-vue</a> Preview
  5 |     </div>
  6 |     <div class="desc">
  7 |       <div>A json-schema editor of high efficient and easy-to-use, base on Vue. 
  8 |         <a @click="visible = true">import json</a>
  9 |       </div>
 10 |     </div>
 11 |     <div class="container">
 12 |       <pre class="code">{{jsonStr}}</pre>
 13 |       <json-schema-editor class="schema" :value="tree" disabledType lang="zh_CN" custom/>
 14 |     </div>
 15 |   </div>
 16 | </template>
 17 | 
 18 | <script>
 19 | import GenerateSchema from 'generate-schema'
 20 | export default {
 21 |   name: 'App',
 22 |   computed: {
 23 |     jsonStr: {
 24 |       get: function () {
 25 |         return JSON.stringify(this.tree, null, 2)
 26 |       },
 27 |       set: function (newVal) {
 28 |         this.tree = JSON.parse(newVal)
 29 |       }
 30 |     }
 31 |   },
 32 |   data() {
 33 |     return {
 34 |       importJson: '',
 35 |       visible: false,
 36 |       tree:
 37 |       {
 38 |   "root": {
 39 |     "type": "object",
 40 |     "title": "条件",
 41 |     "properties": {
 42 |       "name": {
 43 |         "type": "string",
 44 |         "title": "名称",
 45 |         "maxLength": 10,
 46 |         "minLength": 2
 47 |       },
 48 |       "appId": {
 49 |         "type": "integer",
 50 |         "title": "应用ID"
 51 |       },
 52 |       "credate": {
 53 |         "type": "string",
 54 |         "title": "创建日期",
 55 |         "format": "date"
 56 |       }
 57 |     },
 58 |     "required": [
 59 |       "name",
 60 |       "appId",
 61 |       "credate"
 62 |     ]
 63 |   }
 64 | }
 65 |     }
 66 |   },
 67 |   methods: {
 68 |     handleImportJson () {
 69 |       const  t = GenerateSchema.json(JSON.parse(this.importJson))
 70 |       delete t.$schema
 71 |       this.tree.root = t
 72 |       this.visible = false
 73 |     }
 74 |   }
 75 | }
 76 | </script>
 77 | <style>
 78 | *{
 79 |   padding:0;
 80 |   margin:0;
 81 |   box-sizing: border-box;
 82 | }
 83 | .title{
 84 |   text-align: center;
 85 |   font-size: 40px;
 86 |   font-weight: bold;
 87 |   height:100px;
 88 |   line-height: 100px;
 89 | }
 90 | .desc{
 91 |   padding:20px;
 92 |   width:80vw;
 93 |   min-width:800px;
 94 |   margin:auto;
 95 |   padding: 0 3em;
 96 |   font-size: 1.2em;
 97 | }
 98 | .container{
 99 |   display: flex;
100 |   padding:20px;
101 |   width:80vw;
102 |   min-width:800px;
103 |   justify-content:center;
104 |   height: calc(100vh - 150px);
105 |   margin:auto;
106 | }
107 | .container pre {
108 |   font-family: monospace;
109 |   height: 100%;
110 |   overflow-y: auto;
111 |   border: 1px solid rgba(0, 0, 0, 0.1);
112 |   border-radius: 4px;
113 |   padding: 12px;
114 |   width: 50%;
115 | }
116 | .code-container{
117 |   max-height: 600px;
118 |   overflow: auto;
119 | }
120 | .schema{
121 |   margin-left: 20px;
122 |   width:50%;
123 |   height: 100%;
124 |   overflow-y: auto;
125 |   overflow-x:hidden;
126 |   border:1px solid rgba(0,0,0,.1);
127 |   border-radius: 8px;
128 |   padding: 12px;
129 | }
130 | .CodeMirror {
131 |   height: 100% !important;
132 | }
133 | .vue-codemirror{
134 |   flex:1;
135 |   margin: 0 24px;
136 |   border: 1px solid rgba(0,0,0,.1);
137 |   min-height:300px;
138 |   overflow: auto;
139 |   border-radius: 6px;
140 | }
141 | </style>
142 | 


--------------------------------------------------------------------------------
/examples/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyqwst/json-schema-editor-vue3/80fa20948645ea27d2350b7485f54d3e6d23d6a0/examples/assets/logo.png


--------------------------------------------------------------------------------
/examples/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 |     </ul>
22 |     <h3>Ecosystem</h3>
23 |     <ul>
24 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'HelloWorld',
36 |   props: {
37 |     msg: String
38 |   }
39 | }
40 | </script>
41 | 
42 | <!-- Add "scoped" attribute to limit CSS to this component only -->
43 | <style scoped>
44 | h3 {
45 |   margin: 40px 0 0;
46 | }
47 | ul {
48 |   list-style-type: none;
49 |   padding: 0;
50 | }
51 | li {
52 |   display: inline-block;
53 |   margin: 0 10px;
54 | }
55 | a {
56 |   color: #42b983;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import JsonSchemaEditor from '../packages/index'
4 | import { Modal} from 'ant-design-vue'
5 | createApp(App).use(JsonSchemaEditor).use(Modal).mount('#app')
6 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "examples/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/lib/demo.html:
--------------------------------------------------------------------------------
1 | <!doctype html><meta charset="utf-8"><title>json-schema-editor-vue3 demo</title><script src="./json-schema-editor-vue3.umd.js"></script><link rel="stylesheet" href="./json-schema-editor-vue3.css"><script>console.log(json-schema-editor-vue3)</script>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "json-schema-editor-vue3",
 3 |   "version": "1.2.0",
 4 |   "author": "zhangyq",
 5 |   "description": "A json-schema editor of high efficient and easy-to-use, base on Vue3",
 6 |   "keywords": [
 7 |     "jsonschema",
 8 |     "jsonschemavue",
 9 |     "jsonschemaeditor",
10 |     "json",
11 |     "jsoneditor"
12 |   ],
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/zyqwst/json-schema-editor-vue3"
16 |   },
17 |   "homepage": "http://json-schema.sviip.com/",
18 |   "license": " Apache-2.0 License",
19 |   "main": "lib/json-schema-editor-vue3.umd.min.js",
20 |   "private": false,
21 |   "scripts": {
22 |     "serve": "vue-cli-service serve",
23 |     "build": "vue-cli-service build",
24 |     "lint": "vue-cli-service lint",
25 |     "lib": "vue-cli-service build --target lib --name json-schema-editor-vue3 --dest lib packages/index.js"
26 |   },
27 |   "dependencies": {
28 |     "@ant-design/icons-vue": "^6.1.0",
29 |     "core-js": "^3.8.3",
30 |     "vue": "^3.2.13"
31 |   },
32 |   "devDependencies": {
33 |     "@babel/core": "^7.12.16",
34 |     "@babel/eslint-parser": "^7.12.16",
35 |     "@vue/cli-plugin-babel": "~5.0.0",
36 |     "@vue/cli-plugin-eslint": "~5.0.0",
37 |     "@vue/cli-service": "~5.0.0",
38 |     "ant-design-vue": "^3.2.10",
39 |     "babel-plugin-import": "^1.13.5",
40 |     "eslint": "^7.32.0",
41 |     "eslint-plugin-vue": "^8.0.3",
42 |     "generate-schema": "^2.6.0"
43 |   },
44 |   "eslintConfig": {
45 |     "root": true,
46 |     "env": {
47 |       "node": true
48 |     },
49 |     "extends": [
50 |       "plugin:vue/vue3-essential",
51 |       "eslint:recommended"
52 |     ],
53 |     "parserOptions": {
54 |       "parser": "@babel/eslint-parser"
55 |     },
56 |     "rules": {}
57 |   },
58 |   "browserslist": [
59 |     "> 1%",
60 |     "last 2 versions",
61 |     "not dead",
62 |     "not ie 11"
63 |   ]
64 | }
65 | 


--------------------------------------------------------------------------------
/packages/index.js:
--------------------------------------------------------------------------------
 1 | import JsonSchemaEditor from './json-schema-editor/index'
 2 | const components = [
 3 |     JsonSchemaEditor
 4 | ]
 5 | 
 6 | // 定义 install 方法
 7 | const install = function (Vue) {
 8 |     if (install.installed) return
 9 |     install.installed = true
10 |     // 遍历并注册全局组件
11 |     components.map(component => {
12 |         Vue.component(component.name, component)
13 |     })
14 | }
15 | 
16 | if (typeof window !== 'undefined' && window.Vue) {
17 |     install(window.Vue)
18 | }
19 | 
20 | export default {
21 |     // 导出的对象必须具备一个 install 方法
22 |     install,
23 |     // 组件列表
24 |     ...components
25 | }


--------------------------------------------------------------------------------
/packages/json-schema-editor/LocalProvider/index.js:
--------------------------------------------------------------------------------
 1 | const langs = {
 2 | 	en_US: {
 3 | 		'title': 'Title',
 4 | 		'import_json': 'Import JSON',
 5 | 		'base_setting': 'Base Setting',
 6 | 		'all_setting': 'Source Code',
 7 | 		'default': 'Default',
 8 | 		'description':'Description',
 9 | 		"adv_setting": "Advanced Settings",
10 | 		"add_child_node": "Add child node",
11 | 		'add_sibling_node': 'Add sibling nodes',
12 | 		'add_node':'Add sibling/child nodes',
13 | 		'remove_node': 'Remove node',
14 | 		'child_node': 'Child node',
15 | 		'sibling_node':'Sibling node',
16 | 		'ok':'OK',
17 | 		'cancel':'Cancel',
18 | 		'minLength':'Min length',
19 | 		'maxLength': 'Max length',
20 | 		'pattern':'MUST be a valid regular expression.',
21 | 		'exclusiveMinimum': 'Value strictly less than',
22 | 		'exclusiveMaximum':  'Value strictly more than',
23 | 		'minimum': 'Min',
24 | 		'maximum': 'Max',
25 | 		'uniqueItems': 'Unique Items',
26 | 		'minItems':'MinItems',
27 | 		'maxItems': 'MaxItems',
28 | 		'minProperties':'MinProperties',
29 | 		'maxProperties': 'MaxProperties',
30 | 		'checked_all': 'Checked All',
31 | 		'valid_json': 'Not valid json',
32 | 		'enum': 'Enum',
33 | 		'enum_msg': 'One value per line',
34 | 		'enum_desc': 'desc',
35 | 		'enum_desc_msg': 'enum description',
36 | 		'required': 'Required',
37 | 		'mock': 'mock',
38 | 		'mockLink': 'Help',
39 | 		'format': 'Format',
40 | 		'nothing': 'Nothing',
41 | 		'preview': 'Preview',
42 | 		'add_custom': 'Add Custom Prop',
43 | 	},
44 | 	zh_CN: {
45 | 		'title': '标题',
46 | 		'import_json': '导入 json',
47 | 		'base_setting': '基础设置',
48 | 		'all_setting': '编辑源码',
49 | 		'default': '默认值',
50 | 		'description':'描述',
51 | 		'adv_setting': '高级设置',
52 | 		"add_child_node": "添加子节点",
53 | 		'add_sibling_node': '添加兄弟节点',
54 | 		'add_node':'添加兄弟/子节点',
55 | 		'remove_node': '删除节点',
56 | 		'child_node': '子节点',
57 | 		'sibling_node':'兄弟节点',
58 | 		'ok':'确定',
59 | 		'cancel':'取消',
60 | 		'minLength':'最小长度',
61 | 		'maxLength': '最大长度',
62 | 		'pattern': '用正则表达式约束字符串',
63 | 		'exclusiveMinimum': '开启后，数据必须大于最小值',
64 | 		'exclusiveMaximum': '开启后，数据必须小于最大值',
65 | 		'minimum': '最小值',
66 | 		'maximum': '最大值',
67 | 		'uniqueItems': '开启后，每个元素都不相同',
68 | 		'minItems':'最小元素个数',
69 | 		'maxItems': '最大元素个数',
70 | 		'minProperties':'最小元素个数',
71 | 		'maxProperties': '最大元素个数',
72 | 		'checked_all': '全选',
73 | 		'valid_json': '不是合法的json字符串',
74 | 		'enum': '枚举',
75 | 		'enum_msg': '每行写一个值',
76 | 		'enum_desc': '备注',
77 | 		'enum_desc_msg': '备注描述信息',
78 | 		'required': '是否必须',
79 | 		'mock': 'mock',
80 | 		'mockLink': '查看文档',
81 | 		'format': '格式化',
82 | 		'nothing': '无',
83 | 		'preview': '预览',
84 | 		'add_custom': '添加自定义属性'
85 | 	}
86 | }
87 | 
88 | export default (lang) => {
89 | 	return langs[lang]
90 | }
91 | 


--------------------------------------------------------------------------------
/packages/json-schema-editor/index.js:
--------------------------------------------------------------------------------
1 | import JsonSchemaEditor from './main.vue'
2 | 
3 | JsonSchemaEditor.install = function (Vue) {
4 |   Vue.component(JsonSchemaEditor.name, JsonSchemaEditor)
5 | }
6 | 
7 | export default JsonSchemaEditor


--------------------------------------------------------------------------------
/packages/json-schema-editor/main.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="json-schema-editor">
  3 |       <a-row class="row" :gutter="10">
  4 |         <a-col :span="8" class="ant-col-name">
  5 |           <div :style="{marginLeft:`${20*deep}px`}" class="ant-col-name-c">
  6 |             <a-button v-if="pickValue.type==='object'" type="link" style="color:rgba(0,0,0,.65)" @click="hidden = !hidden">
  7 |               <template #icon>
  8 |                 <caret-right-outlined v-if="hidden"/>
  9 |                 <caret-down-outlined v-else/>
 10 |               </template>
 11 |             </a-button>
 12 |             <span v-else style="width:32px;display:inline-block"></span>
 13 |             <a-input :disabled="disabled || root" :default-value="pickKey" class="ant-col-name-input" @blur="onInputName" :key="pickValue"/>
 14 |           </div>
 15 |           <a-tooltip v-if="root">
 16 |             <template v-slot:title>{{ local['checked_all'] }}</template>
 17 |             <a-checkbox :disabled="!isObject && !isArray"  class="ant-col-name-required" @change="onRootCheck"/>
 18 |           </a-tooltip>
 19 |           <a-tooltip v-else>
 20 |             <template v-slot:title>{{ local['required'] }}</template>
 21 |             <a-checkbox :disabled="isItem" :checked="checked" class="ant-col-name-required" @change="onCheck"/>
 22 |           </a-tooltip>
 23 |         </a-col>
 24 |         <a-col :span="4">
 25 |           <a-select v-model:value="pickValue.type" :disabled="disabledType" class="ant-col-type" @change="onChangeType" :getPopupContainer="
 26 |           triggerNode => {
 27 |             return triggerNode.parentNode || document.body;
 28 |           }"
 29 |         >
 30 |             <a-select-option :key="t" v-for="t in TYPE_NAME">
 31 |               {{t}}
 32 |             </a-select-option>
 33 |           </a-select>
 34 |         </a-col>
 35 |         <a-col :span="6">
 36 |           <a-input v-model:value="pickValue.title" class="ant-col-title" :placeholder="local['title']"/>
 37 |         </a-col>
 38 |         <a-col :span="6" class="ant-col-setting">
 39 |           <a-tooltip>
 40 |             <template v-slot:title>{{ local['adv_setting'] }}</template>
 41 |             <a-button type="link" class="setting-icon" @click="onSetting">
 42 |               <template #icon><setting-outlined /></template>
 43 |             </a-button>
 44 |           </a-tooltip>
 45 |           <a-tooltip v-if="isObject">
 46 |             <template v-slot:title>{{ local['add_child_node'] }}</template>
 47 |             <a-button type="link" class="plus-icon" @click="addChild">
 48 |               <template #icon><plus-outlined /></template>
 49 |               
 50 |             </a-button>
 51 |           </a-tooltip>
 52 |           <a-tooltip v-if="!root && !isItem">
 53 |             <template v-slot:title>{{ local['remove_node'] }}</template>
 54 |             <a-button type="link" class="close-icon ant-btn-icon-only" @click="removeNode">
 55 |               <i aria-label="icon: plus" class="anticon anticon-plus">
 56 |               <svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M810.666667 273.493333L750.506667 213.333333 512 451.84 273.493333 213.333333 213.333333 273.493333 451.84 512 213.333333 750.506667 273.493333 810.666667 512 572.16 750.506667 810.666667 810.666667 750.506667 572.16 512z" p-id="1142"></path></svg>
 57 |               </i>
 58 |             </a-button>
 59 |           </a-tooltip>
 60 |         </a-col>
 61 |       </a-row>
 62 |       <template v-if="!hidden&&pickValue.properties && !isArray">
 63 |         <json-schema-editor  v-for="(item,key,index) in pickValue.properties" :value="{[key]:item}" :parent="pickValue" :key="index" :deep="deep+1" :root="false" class="children" :lang="lang" :custom="custom"/>
 64 |       </template>
 65 |       <template v-if="isArray">
 66 |         <json-schema-editor  :value="{items:pickValue.items}" :deep="deep+1" disabled isItem :root="false" class="children" :lang="lang" :custom="custom"/>
 67 |       </template>
 68 |       <a-modal v-model:visible="modalVisible" v-if="modalVisible" :title="local['adv_setting']" :maskClosable="false" :okText="local['ok']" :cancelText="local['cancel']" width="800px" @ok="handleOk" wrapClassName="json-schema-editor-advanced-modal">
 69 |         <h3>{{local['base_setting']}}</h3>
 70 |         <a-form :model="advancedValue" class="ant-advanced-search-form">
 71 |           <a-row :gutter="6">
 72 |             <a-col :span="8" v-for="(item,key) in advancedValue" :key="key">
 73 |               <a-form-item>
 74 |                 <span>{{ local[key] }}</span>
 75 |                 <a-input-number v-model:value="advancedValue[key]" v-if="advancedAttr[key].type === 'integer' || advancedAttr[key].type === 'number'" style="width:100%" :placeholder="key"/>
 76 |                 <span v-else-if="advancedAttr[key].type === 'boolean'" style="display:inline-block;width:100%">
 77 |                   <a-switch v-model:checked="advancedValue[key]"/>
 78 |                 </span>
 79 |                 <a-textarea @blur="changeEnumValue" :default-value="enumText" :rows="2" v-else-if="key === 'enum'" :placeholder="local['enum_msg']"></a-textarea>
 80 |                 <a-select v-else-if="advancedAttr[key].type === 'array'" v-model:value="advancedValue[key]" style="width:100%" :getPopupContainer="
 81 |                 triggerNode => {
 82 |                   return triggerNode.parentNode || document.body;
 83 |                 }"
 84 |                  :placeholder="local[key]"
 85 |                 > 
 86 |                   <a-select-option value="">{{ local['nothing'] }}</a-select-option>
 87 |                   <a-select-option :key="t" v-for="t in advancedAttr[key].enums">
 88 |                     {{t}}
 89 |                   </a-select-option>
 90 |                 </a-select>
 91 |                 <a-input v-model:value="advancedValue[key]" v-else style="width:100%" :placeholder="key"/>
 92 |               </a-form-item>
 93 |             </a-col>
 94 |           </a-row>
 95 |         </a-form>
 96 |         <h3 v-show="custom">{{ local['add_custom'] }}</h3>
 97 |         <a-form class="ant-advanced-search-form" v-show="custom">
 98 |           <a-row :gutter="6">
 99 |             <a-col :span="8" v-for="item in customProps" :key="item.key">
100 |               <a-form-item :label="item.key">
101 |                 <a-input v-model:value="item.value" style="width:calc(100% - 30px)"/>
102 |                 <a-button type="link" @click="removeCustomNode(item.key)" style="width:30px">
103 |                   <template #icon><close-outlined /></template>
104 |                 </a-button>  
105 |               </a-form-item>
106 |             </a-col>
107 |             <a-col :span="8" v-show="addProp.key != undefined">
108 |               <a-form-item>
109 |                 <template #label><a-input v-model:value="addProp.key" style="width:100px"/></template>
110 |                 <a-input v-model:value="addProp.value" style="width:100%"/>
111 |               </a-form-item>
112 |             </a-col>
113 |             <a-col :span="8">
114 |               <a-form-item>
115 |                 <a-button type="link" @click="confirmAddCustomNode(null)" v-if="customing">
116 |                   <template #icon><check-outlined /></template>
117 |                 </a-button>  
118 |                 <a-tooltip :title="local['add_custom']" v-else>
119 |                   <a-button type="link" @click="addCustomNode">
120 |                     <template #icon><plus-outlined /></template>
121 |                   </a-button>  
122 |                 </a-tooltip>
123 |               </a-form-item>
124 |             </a-col>
125 |           </a-row> 
126 |         </a-form>
127 |         <h3>{{ local['preview'] }}</h3>
128 |         <pre style="width:100%">{{completeNodeValue}}</pre>
129 |       </a-modal>
130 |   </div>
131 | </template>
132 | <script>
133 | import { isNull, renamePropertyAndKeepKeyPrecedence } from './util'
134 | import {TYPE_NAME, TYPE} from './type/type'
135 | import { Row,Col,Button,Input,InputNumber, Icon,Checkbox,Select,Tooltip,Modal,Form,Switch} from 'ant-design-vue'
136 | import { CaretRightOutlined,CaretDownOutlined,SettingOutlined,PlusOutlined,CloseOutlined,CheckOutlined } from '@ant-design/icons-vue';
137 | import LocalProvider from './LocalProvider'
138 | export default {
139 |   name:'JsonSchemaEditor',
140 |   components: {
141 |     ARow:Row,ACol:Col,
142 |     AButton: Button,
143 |     // eslint-disable-next-line vue/no-unused-components
144 |     AIcon: Icon,
145 |     AInput: Input,AInputNumber:InputNumber,ATextarea: Input.TextArea,
146 |     ACheckbox: Checkbox,
147 |     ASelect: Select,
148 |     ASelectOption:Select.Option,
149 |     ATooltip: Tooltip,
150 |     AModal:Modal,
151 |     AForm:Form,
152 |     AFormItem: Form.Item,
153 |     ASwitch: Switch,
154 |     CaretRightOutlined,
155 |     CaretDownOutlined,SettingOutlined,PlusOutlined,CloseOutlined,CheckOutlined
156 |   },
157 |   props:{
158 |     value: {
159 |       type: Object,
160 |       required:true
161 |     },
162 |     disabled: { //name不可编辑，根节点name不可编辑,数组元素name不可编辑
163 |       type: Boolean,
164 |       default: false
165 |     },
166 |     disabledType: { //禁用类型选择
167 |       type: Boolean,
168 |       default: false
169 |     },
170 |     isItem: { //是否数组元素
171 |       type: Boolean,
172 |       default: false
173 |     },
174 |     deep:{ // 节点深度，根节点deep=0
175 |       type:Number,
176 |       default: 0
177 |     },
178 |     root:{ //是否root节点
179 |       type:Boolean,
180 |       default:true
181 |     },
182 |     parent: { //父节点
183 |       type: Object,
184 |       default: null
185 |     },
186 |     custom: { //enable custom properties
187 |       type: Boolean,
188 |       default: false
189 |     },
190 |     lang: { // i18n language
191 |       type: String,
192 |       default: 'zh_CN'
193 |     }
194 |   },
195 |   computed: {
196 |     pickValue(){
197 |       return  Object.values(this.value)[0]
198 |     },
199 |     pickKey(){
200 |       return  Object.keys(this.value)[0]
201 |     },
202 |     isObject(){
203 |       return this.pickValue.type === 'object'
204 |     },
205 |     isArray(){
206 |       return this.pickValue.type === 'array'
207 |     },
208 |     checked(){
209 |       return this.parent && this.parent.required && this.parent.required.indexOf(this.pickKey) >= 0
210 |     },
211 |     advanced(){
212 |       return TYPE[this.pickValue.type]
213 |     },
214 |     advancedAttr(){
215 |       return TYPE[this.pickValue.type].attr
216 |     },
217 |     ownProps () {
218 |       return [ 'type', 'title', 'properties', 'items','required', ...Object.keys(this.advancedAttr)]
219 |     },
220 |     advancedNotEmptyValue(){
221 |       const jsonNode = Object.assign({},this.advancedValue);
222 |       for(let key in jsonNode){
223 |         isNull(jsonNode[key]) && delete jsonNode[key]
224 |       }
225 |       return jsonNode
226 |     },
227 |     completeNodeValue(){
228 |       const t = {}
229 |       const basicValue = { ...this.pickValue }
230 |       for(const item of this.customProps){
231 |         t[item.key] = item.value
232 |       }
233 |       this._pickDiffKey().forEach(key => delete basicValue[key])
234 |       return Object.assign({}, basicValue, t,this.advancedNotEmptyValue)
235 |     },
236 |     enumText () {
237 |       const t = this.advancedValue['enum']
238 |       if (!t) return ''
239 |       if (!t.length) return ''
240 |       return t.join('\n')
241 |     }
242 |   },
243 |   data(){
244 |     return {
245 |       TYPE_NAME,
246 |       hidden:false,
247 |       countAdd: 1,
248 |       modalVisible: false,
249 |       advancedValue:{},
250 |       addProp:{},// 自定义属性
251 |       customProps: [],
252 |       customing: false,
253 |       local: LocalProvider(this.lang)
254 |     }
255 |   },
256 |   methods: {
257 |     onInputName(e){
258 |       const oldKey = this.pickKey
259 |       const newKey = e.target.value
260 | 
261 | 
262 |       if(oldKey === newKey) return
263 | 
264 |       // const nodeValue = this.parent.properties[oldKey]
265 | 
266 |       // 替换key名
267 |       // delete this.parent.properties[oldKey]
268 |       // eslint-disable-next-line vue/no-mutating-props
269 |       // this.parent.properties[newKey] = nodeValue
270 |       renamePropertyAndKeepKeyPrecedence(this.parent.properties,[oldKey, newKey])
271 | 
272 |       // required重新设置
273 |       const requireds = this.parent.required || []
274 |       const oldIndex = requireds.indexOf(oldKey)
275 |       if(requireds.length > 0 && oldIndex > -1) {
276 |         requireds.splice(oldIndex, 1)
277 |         requireds.push(newKey)
278 |         // eslint-disable-next-line vue/no-mutating-props
279 |         this.parent['required'] = [...new Set(requireds)]
280 |       }
281 |     },
282 |     onChangeType() {
283 |       this.parseCustomProps()
284 |       // 删除自定义属性
285 |       this.customProps.forEach(item => {
286 |         delete this.pickValue[item.key]
287 |       });
288 |       this.customProps = [];
289 | 
290 |       delete this.pickValue['properties']
291 |       delete this.pickValue['items']
292 |       delete this.pickValue['required']
293 |       delete this.pickValue['format']
294 |       delete this.pickValue['enum']
295 | 
296 |       if(this.isArray){
297 |         this.pickValue['items'] = { type:'string' }
298 |       }
299 |     },
300 |     onCheck(e){
301 |       this._checked(e.target.checked,this.parent)
302 |     },
303 |     onRootCheck(e){
304 |      this._deepCheck( e.target.checked,this.pickValue)
305 |     },
306 |     changeEnumValue (e) {
307 |       const pickType = this.pickValue.type
308 |       const value = e.target.value
309 |       var arr = value.split('\n')
310 | 
311 |       if (pickType === 'string') {
312 |         this.advancedValue.enum = arr.map(item => item);
313 |       } else {
314 |         if(arr.length ===0 || (arr.length === 1 && arr[0]=='')) {
315 |           this.advancedValue.enum = null
316 |         }else {
317 |           this.advancedValue.enum = arr.map(item => +item);
318 |         }
319 |       }
320 |     },
321 |     _deepCheck(checked,node){
322 |       if(node.type === 'object' && node.properties){
323 |         checked ? node['required'] = Object.keys(node.properties) : (delete node['required'])
324 |         Object.keys(node.properties).forEach(key => this._deepCheck(checked,node.properties[key]))
325 |       } else if(node.type === 'array' && node.items.type === 'object'){
326 |         checked ? node.items['required'] = Object.keys(node.items.properties) : (delete node.items['required'])
327 |         Object.keys(node.items.properties).forEach(key => this._deepCheck(checked,node.items.properties[key]))
328 |       }
329 |     },
330 |     _checked(checked,parent){
331 |       let required = parent.required
332 |       if(checked){
333 |         // eslint-disable-next-line vue/no-mutating-props
334 |         required || (this.parent['required'] = [])
335 | 
336 |         required = this.parent.required
337 |         required.indexOf(this.pickKey) === -1 && required.push(this.pickKey)
338 |       }else{
339 |         const pos = required.indexOf(this.pickKey)
340 |         pos >=0 && required.splice(pos,1)
341 |       }
342 |       required.length === 0 && (delete parent['required'])
343 |     },
344 |     addChild(){
345 |       const name = this._joinName()
346 |       const type = 'string'
347 |       const node = this.pickValue
348 |       node.properties || (node['properties'] = {}) // this.$set(node,'properties',{})
349 |       const props = node.properties
350 |       props[name] = {type: type} //this.$set(props,name,{type: type})
351 |     },
352 |     parseCustomProps () {
353 |       const ownProps = this.ownProps
354 |       Object.keys(this.pickValue).forEach(key => {
355 |         if (ownProps.indexOf(key) === -1) {
356 |           this.confirmAddCustomNode({ key: key, value: this.pickValue[key] })
357 |           // this.$delete(this.pickValue,key)
358 |         }
359 |       })
360 |     },
361 |     addCustomNode(){
362 |       // this.$set(this.addProp,'key',this._joinName())
363 |       // this.$set(this.addProp,'value','')
364 |       this.addProp['key'] = this._joinName()
365 |       this.addProp['value'] = ''
366 |       this.customing = true
367 |     },
368 |     removeCustomNode(key) {
369 |       this.customProps.forEach((item,index) => {
370 |         if (item.key === key) {
371 |           this.customProps.splice(index,1)
372 |           return
373 |         }
374 |       })
375 |     },
376 |     confirmAddCustomNode(prop) {
377 |       const p = prop || this.addProp
378 |       let existKey = false
379 |       this.customProps.forEach(item => {
380 |         if (item.key === p.key) {
381 |           existKey = true
382 |         }
383 |       })
384 |       if (existKey) return
385 |       this.customProps.push(p)
386 |       this.addProp = {}
387 |       this.customing = false
388 |     },
389 |     removeNode(){
390 |       const { properties,required } = this.parent 
391 |       delete properties[this.pickKey]
392 |       if(required){
393 |         const pos = required.indexOf(this.pickKey)
394 |         pos >=0 && required.splice(pos,1)
395 |         required.length === 0 && (delete this.parent['required'])
396 |       }
397 |     },
398 |     _joinName(){
399 |       return  `field_${this.deep}_${this.countAdd++}`
400 |     },
401 |     onSetting(){
402 |       this.modalVisible = true
403 |       this.advancedValue = { ...this.advanced.value }
404 |       for(const k in this.advancedValue) {
405 |         if(this.pickValue[k]) {
406 |           this.advancedValue[k] = this.pickValue[k]
407 |         }
408 |       }
409 |       this.parseCustomProps()
410 |     },
411 | 
412 |     handleOk(){
413 |       this.modalVisible = false
414 |       for(const key in this.advancedValue){
415 |         if(isNull(this.advancedValue[key])){
416 |           delete this.pickValue[key]
417 |         }else {
418 |           this.pickValue[key] = this.advancedValue[key]
419 |         }
420 |       }
421 |       const diffKey = this._pickDiffKey()
422 |       diffKey.forEach(key => delete this.pickValue[key])
423 |       for(const item of this.customProps){
424 |         this.pickValue[item.key] = item.value
425 |       }
426 |     },
427 |     _pickDiffKey () {
428 |       const keys = Object.keys(this.pickValue)
429 |       return keys.filter(item => this.ownProps.indexOf(item) === -1)
430 |     }
431 |   }
432 | }
433 | </script>
434 | <style scoped>
435 | .json-schema-editor .row {
436 |   display: flex;
437 |   margin: 12px;
438 | }
439 | .json-schema-editor .row .ant-col-name {
440 |   display: flex;
441 |   align-items: center;
442 | }
443 | .json-schema-editor .row .ant-col-name .ant-col-name-c {
444 |   display: flex;
445 |   align-items: center;
446 | }
447 | .json-schema-editor .row .ant-col-name .ant-col-name-required {
448 |   flex: 0 0 24px;
449 |   text-align: center;
450 |   padding-left: 5px;
451 | }
452 | .json-schema-editor .row .ant-col-type {
453 |   width: 100%;
454 | }
455 | .json-schema-editor .row .ant-col-setting {
456 |   display: inline-block;
457 | }
458 | .json-schema-editor .row .setting-icon {
459 |   color: rgba(0, 0, 0, 0.45);
460 |   border: none;
461 | }
462 | .json-schema-editor .row .plus-icon {
463 |   border: none;
464 | }
465 | .json-schema-editor .row .close-icon {
466 |   color: #888;
467 |   border: none;
468 | }
469 | </style>
470 | <style>
471 | .json-schema-editor-advanced-modal {
472 |   color: rgba(0, 0, 0, 0.65);
473 |   min-width: 600px;
474 | }
475 | .json-schema-editor-advanced-modal pre {
476 |   font-family: monospace;
477 |   height: 100%;
478 |   overflow-y: auto;
479 |   border: 1px solid rgba(0, 0, 0, 0.1);
480 |   border-radius: 4px;
481 |   padding: 12px;
482 |   width: 50%;
483 | }
484 | .json-schema-editor-advanced-modal h3 {
485 |   display: block;
486 |   border-left: 3px solid #1890ff;
487 |   padding: 0 8px;
488 | }
489 | .json-schema-editor-advanced-modal .ant-advanced-search-form .ant-form-item {
490 |   display: flex;
491 | }
492 | .json-schema-editor-advanced-modal .ant-advanced-search-form .ant-form-item .ant-form-item-control-wrapper {
493 |   flex: 1;
494 | }
495 | 
496 | </style>


--------------------------------------------------------------------------------
/packages/json-schema-editor/type/array.js:
--------------------------------------------------------------------------------
 1 | const value = {
 2 | 	description: null,
 3 | 	minItems:null,
 4 | 	maxItems:null,
 5 | 	uniqueItems:false
 6 | }
 7 | const attr = {
 8 | 	description: {
 9 | 		name: '描述',
10 | 		type: 'string'
11 | 	},
12 | 	maxItems:{
13 | 		name: '最大元素个数',
14 | 		type: 'integer'
15 | 	},
16 | 	minItems:{
17 | 		name: '最小元素个数',
18 | 		type: 'integer'
19 | 	},
20 | 	uniqueItems:{
21 | 		name:'元素不可重复',
22 | 		type: 'boolean'
23 | 	}
24 | }
25 | const wrapper = {value, attr}
26 | export default wrapper


--------------------------------------------------------------------------------
/packages/json-schema-editor/type/boolean.js:
--------------------------------------------------------------------------------
 1 | const value = {
 2 |     description: null
 3 | }
 4 | const attr = {
 5 |     description: {
 6 |       name: '描述',
 7 |       type: 'string'
 8 |     }
 9 | }
10 | const wrapper = {value, attr}
11 | export default wrapper


--------------------------------------------------------------------------------
/packages/json-schema-editor/type/integer.js:
--------------------------------------------------------------------------------
 1 | const value = {
 2 |     description: null,
 3 |     maximum: null,
 4 |     minimum: null,
 5 |     exclusiveMaximum:null,
 6 |     exclusiveMinimum:null,
 7 |     enum:null
 8 | }
 9 | const attr = {
10 |     description: {
11 |       name: '描述',
12 |       type: 'string',
13 |     },
14 |     maximum:{
15 |         name:'最大值',
16 |         type:'integer'
17 |     },
18 |     minimum:{
19 |         name:'最小值',
20 |         type:'integer'
21 |     },
22 |     exclusiveMaximum:{
23 |         name:'不包含最大值',
24 |         type:'boolean'
25 |     },
26 |     exclusiveMinimum:{
27 |         name:'不包含最小值',
28 |         type:'boolean'
29 |     },
30 |     enum:{
31 |         name:'枚举',
32 |         type:'array'
33 |     }
34 | }
35 | const wrapper = {value, attr}
36 | export default wrapper


--------------------------------------------------------------------------------
/packages/json-schema-editor/type/number.js:
--------------------------------------------------------------------------------
 1 | const value = {
 2 |     description: null,
 3 |     maximum: null,
 4 |     minimum: null,
 5 |     exclusiveMaximum:null,
 6 |     exclusiveMinimum:null,
 7 |     enum:null
 8 | }
 9 | const attr = {
10 |     description: {
11 |       name: '描述',
12 |       type: 'string',
13 |     },
14 |     maximum:{
15 |         name:'最大值',
16 |         type:'number'
17 |     },
18 |     minimum:{
19 |         name:'最小值',
20 |         type:'number'
21 |     },
22 |     exclusiveMaximum:{
23 |         name:'不包含最大值',
24 |         type:'boolean'
25 |     },
26 |     exclusiveMinimum:{
27 |         name:'不包含最小值',
28 |         type:'boolean'
29 |     },
30 |     enum:{
31 |         name:'枚举',
32 |         type:'array'
33 |     }
34 | }
35 | const wrapper = {value, attr}
36 | export default wrapper


--------------------------------------------------------------------------------
/packages/json-schema-editor/type/object.js:
--------------------------------------------------------------------------------
 1 | const value = {
 2 |     description: null,
 3 |     maxProperties: null,
 4 |     minProperties: null
 5 | }
 6 | const attr = {
 7 |     description: {
 8 |       name: '描述',
 9 |       type: 'string',
10 |     },
11 |     maxProperties:{
12 |         name:'最大元素个数',
13 |         type:'integer'
14 |     },
15 |     minProperties:{
16 |         name:'最小元素个数',
17 |         type:'integer'
18 |     }
19 | }
20 | const wrapper = {value, attr}
21 | export default wrapper


--------------------------------------------------------------------------------
/packages/json-schema-editor/type/string.js:
--------------------------------------------------------------------------------
 1 | const value = {
 2 |     description: null,
 3 |     maxLength: null,
 4 |     minLength: null,
 5 |     pattern: null,
 6 |     format:undefined,
 7 |     enum:undefined
 8 | }
 9 | const attr = {
10 |     description: {
11 |       name: '描述',
12 |       type: 'string',
13 |     },
14 |     maxLength:{
15 |         name:'最大字符数',
16 |         type:'integer'
17 |     },
18 |     minLength:{
19 |         name:'最小字符数',
20 |         type:'integer'
21 |     },
22 |     pattern: {
23 |         name: '正则表达式',
24 |         type:'string'
25 |     },
26 |     format: {
27 |         name:'格式',
28 |         type:'array',
29 |         enums:['date','date-time','email','hostname','ipv4','ipv6','uri']
30 |     },
31 |     enum:{
32 |         name:'枚举',
33 |         type:'array'
34 |     }
35 | }
36 | const wrapper = {value, attr}
37 | export default wrapper


--------------------------------------------------------------------------------
/packages/json-schema-editor/type/type.js:
--------------------------------------------------------------------------------
 1 | import _object from './object'
 2 | import _string from './string'
 3 | import _array from './array'
 4 | import _boolean from './boolean'
 5 | import _integer from './integer'
 6 | import _number from './number'
 7 | const TYPE_NAME = ['string', 'number', 'integer','object', 'array',  'boolean']
 8 | 
 9 | const TYPE = {
10 |     'object': _object,
11 |     'string': _string,
12 |     'array': _array,
13 |     'boolean': _boolean,
14 |     'integer': _integer,
15 |     'number': _number
16 | }
17 | export {TYPE ,TYPE_NAME}
18 | 


--------------------------------------------------------------------------------
/packages/json-schema-editor/util.js:
--------------------------------------------------------------------------------
 1 | export function clearAttr(obj) {
 2 |   for(let key in obj){
 3 |     delete obj[key]
 4 |   }
 5 | }
 6 | /**
 7 |  * 快速拷贝两个对象的属性值
 8 |  * @param {*} source 
 9 |  * @param {*} target 
10 |  */
11 | export function copyAttr(source, target){
12 |   Object.keys(target).forEach(key=>{target[key]=source[key]})
13 | }
14 | 
15 | export function isNull(ele){
16 |   if(typeof ele==='undefined'){
17 |     return true;
18 |   }else if(ele===null){
19 |     return true;
20 |   }else if(ele===''){
21 |     return true;
22 |   }
23 |   return false;
24 | }
25 | export function renamePropertyAndKeepKeyPrecedence(obj, [oldKey, newKey]) {
26 |   const descriptors = Object.getOwnPropertyDescriptors(obj)
27 |   if (Object.prototype.hasOwnProperty.call(descriptors, oldKey)) {
28 |     Object.entries(descriptors)
29 |       .reduce((target, [key, descriptor]) => {
30 |         Reflect.deleteProperty(target, key)
31 |         if (key === oldKey) {
32 |           key = newKey
33 |         }
34 |         Reflect.defineProperty(target, key, descriptor)
35 |         return target;
36 |       }, obj)
37 |   }
38 |   return obj
39 | }
40 | 
41 | export function _debounce (callback, delay = 1000) {
42 |   let timer = null;
43 |   return function () {
44 |       let self = this;
45 |       let args = arguments;
46 |       timer && clearTimeout(timer)
47 |       timer = setTimeout(function () {
48 |           callback.apply(self, args)
49 |       }, delay);
50 |   }
51 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zyqwst/json-schema-editor-vue3/80fa20948645ea27d2350b7485f54d3e6d23d6a0/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require('@vue/cli-service')
 2 | module.exports = defineConfig({
 3 |   transpileDependencies: true,
 4 |   pages: {
 5 |     index: {
 6 |       entry: 'examples/main.js',
 7 |       template: 'public/index.html',
 8 |       filename: 'index.html'
 9 |     }
10 |   },
11 |   devServer: {
12 |       port: 8080
13 |   }
14 | })
15 | 


--------------------------------------------------------------------------------