WIP: Cleanup and fixes related to styling merge and others

src/common-components/dropdown-question/dropdown-question.vue

@@ -28,7 +28,9 @@ export default {
     options: {
       type: Object,
       required: true
-    },    
+    },
+    isDisabled: Boolean,
+    isRequired: Boolean,    
   },
   data() {
 

src/common-components/text-question/text-question.vue

@@ -1,33 +0,0 @@
-<template>
-    <label :for="inputId">{{ labelText }}</label>
-    <input v-model="value" type="text"
-        :ref="inputId" 
-        :id="inputId"
-        :placeholder="placeholderText" 
-        class="form-control"
-        autocomplete="off" />
-</template>
-
-<script>
-import { useField } from "vee-validate";
-
-export default {
-    name: "textQuestion",
-    props: {
-        modelValue: String,
-        labelText: String,
-        placeholderText: String,
-        inputId: String,
-    },
-    computed: {
-        value: {
-            get: function() {
-                return this.modelValue;
-            },
-            set: function(newValue) {
-                this.$emit("update:modelValue", newValue);
-            }
-        },
-    },
-};
-</script>

src/common-components/textbox-question/textbox-question.vue

@@ -1,22 +1,41 @@
 <template>
   <div class="textbox-question">
     <label :for="inputId" class="form-label">{{labelText}}</label>
-    <input type="text" class="form-control" :id="inputId" :placeholder="placeholderText" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired">
+    <input v-model="value" 
+      type="text" 
+      class="form-control" 
+      :ref="inputId" 
+      :id="inputId" 
+      :placeholder="placeholderText" 
+      :aria-disabled="isDisabled" 
+      :disabled="isDisabled" 
+      :aria-required="isRequired"
+      autocomplete="off" />
     <p class="mt-1 mb-0">There has been an error!</p>
   </div>
 </template>
 
 <script>
 export default {
-  name: "textboxQuestion",
+  name: "textbox-question",
   props: {
-    isDisabled: Boolean,
     modelValue: String,
     labelText: String,
     placeholderText: String,
     inputId: String,
+    isDisabled: Boolean,
     isRequired: Boolean,
-  }
+  },
+  computed: {
+      value: {
+          get: function() {
+              return this.modelValue;
+          },
+          set: function(newValue) {
+              this.$emit("update:modelValue", newValue);
+          }
+      },
+  },
 };
 </script>
 

src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue

@@ -2,14 +2,14 @@
     <form>
         <div class="row my-4">
             <div class="col">
-                <textQuestion v-model="address.streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" labelText="Street address" />
+                <textboxQuestion v-model="streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" labelText="Street address" />
             </div>
         </div>
     </form>
     <form>
         <div v-show="showAddressFields" class="row my-4">
             <div class="col">
-                <textQuestion v-model="city" ref="city" inputId="city" labelText="City" />
+                <textboxQuestion v-model="city" ref="city" inputId="city" labelText="City" />
             </div>
         </div>
     </form> 
@@ -19,7 +19,7 @@
                 <dropdownQuestion v-model="state" ref="state" inputId="state" :options="stateOptions" labelText="State"  />
             </div>            
             <div class="col-6">
-                <textQuestion v-model="zip" ref="zip" inputId="zip" labelText="Zip" />
+                <textboxQuestion v-model="zip" ref="zip" inputId="zip" labelText="Zip" />
             </div>      
         </div> 
     </form>
@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import textQuestion from "@/common-components/text-question/text-question";
+import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
 import alert from "@/ux-components/alert/alert";
 //import store from "@/store";
@@ -50,9 +50,6 @@ export default ({
             showAddressFields: false,
             displayVerificationWarning: false,
             displayNoMatchWarning: false,
-            address: {
-                streetAddress: "",
-            },
             streetAddress: "",
             city: "",
             state: "",
@@ -230,7 +227,7 @@ export default ({
             });
     },
     components: {
-        textQuestion,
+        textboxQuestion,
         dropdownQuestion,
         alert,
     }

src/layouts/address-lookup/customer-questions/customer-questions.vue

@@ -1,23 +1,25 @@
 <template>
-    <addressQuestions v-model="address" />
+    <addressQuestions />
     <div class="row my-4">
       <div class="col">
-          <textQuestion v-model="firstName" ref="firstName" inputId="firstName" labelText="First name" />
+        <textboxQuestion v-model="firstName" ref="firstName" inputId="firstName" labelText="First name" />
       </div>
     </div> 
     <div class="row my-4">
       <div class="col">
-          <textQuestion v-model="lastName" ref="lastName" inputId="lastName" labelText="Last name" />
+        <textboxQuestion v-model="lastName" ref="lastName" inputId="lastName" labelText="Last name" />
       </div>
     </div>
-    <emailQuestion />  
+    <div class="row my-4">
-
+      <div class="col">
+        <textboxQuestion v-model="emailAddress" ref="emailAddress" inputId="emailAddress" labelText="Email address" />
+      </div>
+    </div>  
 </template>
 
 <script>
 import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
-import emailQuestion from "@/layouts/address-lookup/customer-questions/email-question/email-question";
+import textboxQuestion from "@/common-components/textbox-question/textbox-question";
-import textQuestion from "@/common-components/text-question/text-question";
 
 //import store from "@/store";
 
@@ -25,11 +27,9 @@ export default ({
     name: "customer-questions",
     data(){
         return {
-            address: {
-                streetAddress: "",
-            },
             firstName: "",
             lastName: "",
+            emailAddress: "",
         }
     },
     methods: {
@@ -49,8 +49,7 @@ export default ({
     },
     components: {
         addressQuestions,
-        emailQuestion,
+        textboxQuestion,
-        textQuestion,
     }
 })
 </script>

src/layouts/address-lookup/customer-questions/email-question/email-question.vue

@@ -1,24 +0,0 @@
-<template>
-    <div class="row my-4">
-      <div class="col">
-        <textQuestion v-model="email" ref="email" inputId="email" labelText="Email address" />
-      </div>
-    </div>   
-</template>
-
-<script>
-import textQuestion from "@/common-components/text-question/text-question";
-import store from "@/store";
-
-export default ({
-    name: "emailQuestion",
-    data(){
-        return {
-            email: "",
-        }
-    },
-    components: {
-        textQuestion,
-    },
-})
-</script>