feat(field): add code field with vue-codemirror

package.json

@@ -31,6 +31,7 @@
         "element-ui": "^2.12.0",
         "normalize.css": "^8.0.1",
         "vue": "^2.6.10",
+        "vue-codemirror": "^4.0.6",
         "vue-router": "^3.0.6"
     },
     "devDependencies": {

src/fields/code/__config__/ams.config.js

@@ -0,0 +1,13 @@
+export const config = {
+    BASE: 'CONFIG_FIELD',
+    type: {
+        default: 'code'
+    },
+    default: {
+        type: 'code',
+        valueType: 'js',
+        default: ''
+    }
+};
+
+export const defaults = {};

src/fields/code/__config__/default.example.js

@@ -0,0 +1 @@
+export default {};

src/fields/code/code.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="code-field-wrapper">
+        <codemirror
+            v-model="localValue" :options="cmOptions"
+    />
+    </div>
+</template>
+
+<script>
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/base16-dark.css';
+import { codemirror } from 'vue-codemirror'
+import mixins from '../../ams/mixins';
+
+export default {
+    mixins: [mixins.fieldEditMixin],
+    components: {
+        codemirror
+    },
+    data() {
+        return {
+            cmOptions: Object.freeze({
+                tabSize: 2,
+                mode: 'text/javascript',
+                theme: 'base16-dark',
+                lineNumbers: true,
+                line: true,
+            })
+        };
+    },
+};
+</script>
+<style lang="scss" scoped>
+.code-field-wrapper {
+    height: 100%;
+    box-sizing: border-box;
+    font-size: 14px;
+    line-height: 1.5;
+}
+</style>

src/fields/code/index.js

@@ -0,0 +1,9 @@
+import code from './code';
+
+export default {
+    type: 'code',
+    install(Vue) {
+        Vue.component(`ams-field-${this.type}-view`, code);
+        Vue.component(`ams-field-${this.type}-edit`, code);
+    }
+};

src/index.js

@@ -66,6 +66,7 @@ import tree from './fields/tree';
 import link from './fields/link';
 import fbutton from './fields/button';
 import html from './fields/html';
+import code from './fields/code';
 
 // operation
 import button from './operations/button';
@@ -157,6 +158,7 @@ ams.install = function(Vue) {
     ams.registerField(link);
     ams.registerField(fbutton);
     ams.registerField(html);
+    ams.registerField(code);
     // operations
     ams.registerOperation(button);
     ams.registerOperation(operationsText);