feat: 增加自定义基础属性的功能

examples/App.vue

@@ -1,21 +1,37 @@
 <template>
   <div id="app">
-    <div class="title">   
-      <a href="https://github.com/zyqwst/json-schema-editor-vue" target="_blank">json-schema-editor-vue</a>
+    <div class="title">
+      <a href="https://github.com/zyqwst/json-schema-editor-vue" target="_blank"
+        >json-schema-editor-vue</a
+      >
       <span class="version"> version：{{ version }}</span>
     </div>
     <div class="desc">
-      <div>A json-schema editor of high efficient and easy-to-use, base on Vue.
+      <div>
+        A json-schema editor of high efficient and easy-to-use, base on Vue.
         <a @click="visible = true">import json</a>
       </div>
     </div>
     <div class="container">
-      <codemirror class="code" v-model="jsonStr" :readOnly="false"/>
-      <json-schema-editor class="schema" :value="tree" disabledType lang="zh_CN" custom/>
+      <codemirror class="code" v-model="jsonStr" :readOnly="false" />
+      <json-schema-editor
+        class="schema"
+        :value="tree"
+        disabledType
+        lang="zh_CN"
+        custom
+        :extra="extraSetting"
+      />
     </div>
-    <a-modal v-model="visible" title="import json" width="800px" height="600x" @ok="handleImportJson">
+    <a-modal
+      v-model="visible"
+      title="import json"
+      width="800px"
+      height="600x"
+      @ok="handleImportJson"
+    >
       <div class="code-container">
-        <codemirror class="code" v-model="importJson" :readOnly="false"/>
+        <codemirror class="code" v-model="importJson" :readOnly="false" />
       </div>
     </a-modal>
   </div>
@@ -23,122 +39,132 @@
 
 <script>
 var app = require("../package.json");
-import Codemirror  from './components/Codemirror.vue'
-import GenerateSchema from 'generate-schema'
+import Codemirror from "./components/Codemirror.vue";
+import GenerateSchema from "generate-schema";
 export default {
-  name: 'App',
+  name: "App",
   components: { Codemirror },
   computed: {
     jsonStr: {
       get: function () {
-        return JSON.stringify(this.tree, null, 2)
+        return JSON.stringify(this.tree, null, 2);
       },
       set: function (newVal) {
-        this.tree = JSON.parse(newVal)
-      }
-    }
+        this.tree = JSON.parse(newVal);
+      },
+    },
   },
   data() {
     return {
       version: app.version,
-      importJson: '',
+      importJson: "",
       visible: false,
-      tree:
-      {
-  "root": {
-    "type": "object",
-    "title": "条件",
-    "properties": {
-      "name": {
-        "type": "string",
-        "title": "名称",
-        "maxLength": 10,
-        "minLength": 2
+      extraSetting: {
+        integer: {
+          default: {
+            name: "默认值",
+            type: "integer",
+          },
+        },
+        string: {
+          default: {
+            name: "默认值",
+            type: "integer",
+          },
+        },
       },
-      "appId": {
-        "type": "integer",
-        "title": "应用ID"
+      tree: {
+        root: {
+          type: "object",
+          title: "条件",
+          properties: {
+            name: {
+              type: "string",
+              title: "名称",
+              maxLength: 10,
+              minLength: 2,
+            },
+            appId: {
+              type: "integer",
+              title: "应用ID",
+              default: 3,
+            },
+            credate: {
+              type: "string",
+              title: "创建日期",
+              format: "date",
+            },
+          },
+          required: ["name", "appId", "credate"],
+        },
       },
-      "credate": {
-        "type": "string",
-        "title": "创建日期",
-        "format": "date"
-      }
-    },
-    "required": [
-      "name",
-      "appId",
-      "credate"
-    ]
-  }
-}
-    }
+    };
   },
   methods: {
-    handleImportJson () {
-      const  t = GenerateSchema.json(JSON.parse(this.importJson))
-      delete t.$schema
-      this.tree.root = t
-      this.visible = false
-    }
-  }
-}
+    handleImportJson() {
+      const t = GenerateSchema.json(JSON.parse(this.importJson));
+      delete t.$schema;
+      this.tree.root = t;
+      this.visible = false;
+    },
+  },
+};
 </script>
 <style>
-*{
-  padding:0;
-  margin:0;
+* {
+  padding: 0;
+  margin: 0;
   box-sizing: border-box;
 }
-.title{
+.title {
   text-align: center;
   font-size: 40px;
   font-weight: bold;
-  height:100px;
+  height: 100px;
   line-height: 100px;
 }
-.version{
+.version {
   font-size: 16px;
 }
-.desc{
-  padding:20px;
-  width:80vw;
-  min-width:800px;
-  margin:auto;
+.desc {
+  padding: 20px;
+  width: 80vw;
+  min-width: 800px;
+  margin: auto;
   padding: 0 3em;
   font-size: 1.2em;
 }
-.container{
+.container {
   display: flex;
-  padding:20px;
-  width:80vw;
-  min-width:800px;
-  justify-content:center;
+  padding: 20px;
+  width: 80vw;
+  min-width: 800px;
+  justify-content: center;
   height: calc(100vh - 150px);
-  margin:auto;
+  margin: auto;
 }
-.code-container{
+.code-container {
   max-height: 600px;
   overflow: auto;
 }
-.schema{
+.schema {
   margin-left: 20px;
-  width:50%;
+  width: 50%;
   height: 100%;
   overflow-y: auto;
-  overflow-x:hidden;
-  border:1px solid rgba(0,0,0,.1);
+  overflow-x: hidden;
+  border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 8px;
   padding: 12px;
 }
 .CodeMirror {
   height: 100% !important;
 }
-.vue-codemirror{
-  flex:1;
+.vue-codemirror {
+  flex: 1;
   margin: 0 24px;
-  border: 1px solid rgba(0,0,0,.1);
-  min-height:300px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  min-height: 300px;
   overflow: auto;
   border-radius: 6px;
 }

packages/json-schema-editor/LocalProvider/index.js

@@ -17,7 +17,7 @@ const langs = {
 		'cancel':'Cancel',
 		'minLength':'Min length',
 		'maxLength': 'Max length',
-		'pattern':'MUST be a valid regular expression.',
+		'pattern':'Must be a valid regular expression.',
 		'exclusiveMinimum': 'Value strictly less than',
 		'exclusiveMaximum':  'Value strictly more than',
 		'minimum': 'Min',

packages/json-schema-editor/main.vue

@@ -61,7 +61,7 @@
           <a-row :gutter="6">
             <a-col :span="8" v-for="(item,key) in advancedValue" :key="key">
               <a-form-item>
-                <span>{{ local[key] }}</span>
+                <span>{{ advancedAttr[key].extra ? (lang=='en_US'? key : advancedAttr[key].name):local[key] }}</span>
                 <a-input-number v-model="advancedValue[key]" v-if="advancedAttr[key].type === 'integer' || advancedAttr[key].type === 'number'" style="width:100%" :placeholder="key"/>
                 <span v-else-if="advancedAttr[key].type === 'boolean'" style="display:inline-block;width:100%">
                   <a-switch v-model="advancedValue[key]"/>
@@ -115,7 +115,7 @@
 </template>
 <script>
 import Vue from 'vue'
-import { isNull, renamePropertyAndKeepKeyPrecedence } from './util'
+import { isNull, renamePropertyAndKeepKeyPrecedence, arrayDifference } from './util'
 import {TYPE_NAME, TYPE} from './type/type'
 import { Row,Col,Button,Input,InputNumber, Icon,Checkbox,Select,Tooltip,Modal,Form,Switch} from 'ant-design-vue'
 import LocalProvider from './LocalProvider'
@@ -173,6 +173,10 @@ export default {
     lang: { // i18n language
       type: String,
       default: 'zh_CN'
+    },
+    extra: { // 基础设置里追加的设置
+      type: Object,
+      default: null
     }
   },
   computed: {
@@ -236,7 +240,28 @@ export default {
       local: LocalProvider(this.lang)
     }
   },
+  mounted () {
+    this.init()
+  },
   methods: {
+    init(){
+      if (!this.extra || JSON.stringify(this.extra) === '{}') return
+
+      const keys = Object.keys(this.extra)
+      const nonCompliant = arrayDifference(TYPE_NAME, keys);
+      if (nonCompliant.length>0 ){
+        console.warn('not compliant extra，Supports only the following keys：string, number, integer,object, array,  boolean' ,nonCompliant);
+      }
+      for(let item in this.extra){
+        const setting = this.extra[item]
+        const basicSetting = TYPE[item]
+        Object.entries(setting).forEach(([key, value]) => {
+          value.extra=true
+          basicSetting.attr[key] = value
+          basicSetting.value[key] = null
+        });
+      }
+    },
     onInputName(e){
       const oldKey = this.pickKey
       const newKey = e.target.value

packages/json-schema-editor/util.js

@@ -39,4 +39,8 @@ export function renamePropertyAndKeepKeyPrecedence(_this, obj, [oldKey, newKey])
       }, obj)
   }
   return obj
+}
+/**过滤数组元素 */
+export function arrayDifference(basicArr, arr) {
+  return arr.filter(item => !basicArr.includes(item));
 }