misc form items style and linting fixes

app/src/components/ConfigPanels.vue

@@ -1,7 +1,7 @@
 <template>
   <routable-tabs
     :routes="routes_"
-    v-bind="{ panels, forms, v: $v }"
+    v-bind="{ panels, forms, v: $v, ...$attrs }"
     v-on="$listeners"
   />
 </template>
@@ -49,10 +49,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.card-title {
-  margin-bottom: 1em;
-  border-bottom: solid 1px #aaa;
-}
-</style>

app/src/components/globals/FormField.vue

@@ -28,15 +28,18 @@
       <!-- Render description -->
       <template v-if="description || link">
         <div class="d-flex">
-          <b-link v-if="link" :to="link" :href="link.href"
+          <b-link
-                  class="ml-auto"
+            v-if="link"
+            :to="link" :href="link.href" class="ml-auto"
           >
             {{ link.text }}
           </b-link>
         </div>
 
-        <vue-showdown :markdown="description" flavor="github" v-if="description"
+        <vue-showdown
-                      :class="{ ['alert p-1 px-2 alert-' + descriptionVariant]: descriptionVariant }"
+          v-if="description"
+          :markdown="description" flavor="github"
+          :class="{ ['alert p-1 px-2 alert-' + descriptionVariant]: descriptionVariant }"
         />
       </template>
       <!-- Slot available to overwrite the one above -->
@@ -76,8 +79,8 @@ export default {
       if ('label' in attrs) {
         const defaultAttrs = {
           'label-cols-md': 4,
-          'label-cols-lg': 2,
+          'label-cols-lg': 3,
-          'label-class': 'font-weight-bold'
+          'label-class': ['font-weight-bold', 'py-0']
         }
         if (!('label-cols' in attrs)) {
           for (const attr in defaultAttrs) {

app/src/components/globals/formItems/InputItem.vue

@@ -2,7 +2,6 @@
   <b-input
     :value="value"
     :id="id"
-    v-on="$listeners"
     :placeholder="placeholder"
     :type="type"
     :state="state"
@@ -12,6 +11,7 @@
     :step="step"
     :trim="trim"
     :autocomplete="autocomplete_"
+    v-on="$listeners"
     @blur="$parent.$emit('touch', name)"
   />
 </template>
@@ -21,11 +21,6 @@
 export default {
   name: 'InputItem',
 
-  data () {
-    return {
-      autocomplete_: (this.autocomplete) ? this.autocomplete : (this.type === 'password') ? 'new-password' : null
-    }
-  },
   props: {
     value: { type: [String, Number], default: null },
     id: { type: String, default: null },
@@ -40,6 +35,12 @@ export default {
     autocomplete: { type: String, default: null },
     pattern: { type: Object, default: null },
     name: { type: String, default: null }
+  },
+
+  data () {
+    return {
+      autocomplete_: (this.autocomplete) ? this.autocomplete : (this.type === 'password') ? 'new-password' : null
+    }
   }
 }
 </script>

app/src/components/globals/formItems/ReadOnlyAlertItem.vue

@@ -1,8 +1,10 @@
 <template>
-  <b-alert class="d-flex" :variant="type" show>
+  <b-alert class="d-flex flex-column flex-md-row align-items-center" :variant="type" show>
-    <icon :iname="icon_" class="mr-1 mt-1" />
+    <icon :iname="icon_" class="mr-md-3 mb-md-0 mb-2" :variant="type" />
-    <vue-showdown :markdown="label" flavor="github"
+
-                  tag="span" class="markdown"
+    <vue-showdown
+      :markdown="label" flavor="github"
+      tag="span" class="markdown"
     />
   </b-alert>
 </template>
@@ -11,29 +13,23 @@
 export default {
   name: 'ReadOnlyAlertItem',
 
-  data () {
-    const icons = {
-      success: 'thumbs-up',
-      info: 'info-circle',
-      warning: 'warning',
-      danger: 'times'
-      }
-    return {
-      icon_: (this.icon) ? this.icon : icons[this.type]
-    }
-  },
-
   props: {
     id: { type: String, default: null },
     label: { type: String, default: null },
     type: { type: String, default: null },
     icon: { type: String, default: null }
+  },
+
+  computed: {
+    icon_ () {
+      const icons = {
+        success: 'thumbs-up',
+        info: 'info',
+        warning: 'exclamation',
+        danger: 'times'
+      }
+      return this.icon || icons[this.type]
+    }
   }
 }
 </script>
-
-<style lang="scss">
-.alert p:last-child {
-  margin-bottom: 0;
-}
-</style>

app/src/components/globals/formItems/TextAreaItem.vue

@@ -1,6 +1,6 @@
 <template>
   <b-form-textarea
-    v-model="value"
+    :value="value"
     :id="id"
     :placeholder="placeholder"
     :required="required"

app/src/scss/main.scss

@@ -102,6 +102,11 @@ body {
   }
 }
 
+h3.card-title {
+  margin-bottom: 1em;
+  border-bottom: solid 1px #aaa;
+}
+
 // collapse icon
 .not-collapsed > .icon {
   transform: rotate(-90deg);
@@ -165,6 +170,10 @@ body {
   }
 }
 
+.alert p:last-child {
+  margin-bottom: 0;
+}
+
 code {
   background: ghostwhite;
 }

app/src/views/_partials/DomainForm.vue

@@ -126,12 +126,10 @@ export default {
   },
 
   methods: {
-    onSubmit () {
+    async onSubmit () {
       const domainType = this.selected
-      this.$emit('submit', {
+      const domain = await formatFormDataValue(this.form[domainType])
-        domain: formatFormDataValue(this.form[domainType]),
+      this.$emit('submit', { domain, domainType })
-        domainType
-      })
     }
   },