Conditionals fixes and tweaks

- Fixes multiple items in #2772;
- Fix missing wrapping markup, convert empty span to template;
- Add INPUT_TYPES object to allow proper setting of 'text' input type;
- Fix padding on <selects> for better inline alignment with other input
types;

src/plugins/condition/components/Condition.vue

@@ -82,23 +82,27 @@
 
         <span class="c-cdef__label">Output</span>
         <span class="c-cdef__controls">
-            <select v-model="selectedOutputSelection"
+            <span class="c-cdef__control">
-                    @change="setOutputValue"
+                <select v-model="selectedOutputSelection"
-            >
+                        @change="setOutputValue"
-                <option value="">- Select Output -</option>
-                <option v-for="option in outputOptions"
-                        :key="option"
-                        :value="option"
                 >
-                    {{ initCap(option) }}
+                    <option value="">- Select Output -</option>
-                </option>
+                    <option v-for="option in outputOptions"
-            </select>
+                            :key="option"
-            <input v-if="selectedOutputSelection === outputOptions[2]"
+                            :value="option"
-                   v-model="condition.configuration.output"
+                    >
-                   class="t-condition-name-input"
+                        {{ initCap(option) }}
-                   type="text"
+                    </option>
-                   @blur="persist"
+                </select>
-            >
+            </span>
+            <span class="c-cdef__control">
+                <input v-if="selectedOutputSelection === outputOptions[2]"
+                       v-model="condition.configuration.output"
+                       class="t-condition-name-input"
+                       type="text"
+                       @blur="persist"
+                >
+            </span>
         </span>
 
         <div v-if="!condition.isDefault"

src/plugins/condition/components/Criterion.vue

@@ -45,7 +45,7 @@
                     {{ option.text }}
                 </option>
             </select>
-            <span v-if="!enumerations.length">
+            <template v-if="!enumerations.length">
                 <span v-for="(item, inputIndex) in inputCount"
                       :key="inputIndex"
                       class="c-cdef__control__inputs"
@@ -57,7 +57,7 @@
                     >
                     <span v-if="inputIndex < inputCount-1">and</span>
                 </span>
-            </span>
+            </template>
             <span v-else>
                 <span v-if="inputCount && criterion.operation"
                       class="c-cdef__control"
@@ -79,6 +79,7 @@
 
 <script>
 import { OPERATIONS } from '../utils/operations';
+import { INPUT_TYPES } from '../utils/operations';
 
 export default {
     inject: ['openmct'],
@@ -109,7 +110,8 @@ export default {
             inputCount: 0,
             rowLabel: '',
             operationFormat: '',
-            enumerations: []
+            enumerations: [],
+            inputTypes: INPUT_TYPES
         }
     },
     computed: {
@@ -125,9 +127,9 @@ export default {
             for (let i = 0; i < this.filteredOps.length; i++) {
                 if (this.criterion.operation === this.filteredOps[i].name) {
                     if (this.filteredOps[i].appliesTo.length === 1) {
-                        type = this.filteredOps[i].appliesTo[0];
+                        type = this.inputTypes[this.filteredOps[i].appliesTo[0]];
                     } else {
-                        type = 'string'
+                        type = 'text'
                     }
                     break;
                 }

src/plugins/condition/utils/operations.js

@@ -204,3 +204,8 @@ export const OPERATIONS = [
         }
     }
 ];
+
+export const INPUT_TYPES = {
+    'string': 'text',
+    'number': 'number'
+};

src/styles/_controls.scss

@@ -359,7 +359,7 @@ select {
     background-position: right .4em top 80%, 0 0;
     border: none;
     border-radius: $controlCr;
-    padding: 1px 20px 1px $interiorMargin;
+    padding: 2px 20px 2px $interiorMargin;
 
     *,
     option {