topic-form-refactor (#4478)

* Form refactor (#3816)
* New form API and associated form controls
* Actions updated to use new form API.

Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
Co-authored-by: charlesh88 <charles.f.hacskaylo@nasa.gov>

* Reimplementation of import export json (#4171)

Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
Co-authored-by: charlesh88 <charles.f.hacskaylo@nasa.gov>
Co-authored-by: Henry Hsu <hhsu0219@gmail.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>

src/api/forms/components/controls/NumberField.vue

@@ -0,0 +1,63 @@
+/*****************************************************************************
+* Open MCT, Copyright (c) 2014-2021, United States Government
+* as represented by the Administrator of the National Aeronautics and Space
+* Administration. All rights reserved.
+*
+* Open MCT is licensed under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+* http://www.apache.org/licenses/LICENSE-2.0.
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations
+* under the License.
+*
+* Open MCT includes source code licensed under additional open source
+* licenses. See the Open Source Licenses file (LICENSES.md) included with
+* this source code distribution or the Licensing information page available
+* at runtime from the About dialog for additional information.
+*****************************************************************************/
+
+<template>
+<span class="form-control shell">
+    <span class="field control"
+          :class="model.cssClass"
+    >
+        <input v-model="field"
+               type="number"
+               :min="model.min"
+               :max="model.max"
+               :step="model.step"
+               @blur="blur()"
+        >
+    </span>
+</span>
+</template>
+
+<script>
+export default {
+    props: {
+        model: {
+            type: Object,
+            required: true
+        }
+    },
+    data() {
+        return {
+            field: this.model.value
+        };
+    },
+    methods: {
+        blur() {
+            const data = {
+                model: this.model,
+                value: this.field
+            };
+
+            this.$emit('onChange', data);
+        }
+    }
+};
+</script>