From 30c3dd7e0f3a4ad87c70a7923ba2829831ddb7ec Mon Sep 17 00:00:00 2001
From: Johan Gunawan <johan.gunawan@safelite.com>
Date: Mon, 23 Jan 2023 16:05:46 -0500
Subject: [PATCH] Adjust whitespace

---
 .../dropdown-question/dropdown-question.vue   | 283 +++++++++---------
 1 file changed, 144 insertions(+), 139 deletions(-)

diff --git a/src/digital-components/dropdown-question/dropdown-question.vue b/src/digital-components/dropdown-question/dropdown-question.vue
index 2122bc54..81dcd737 100644
--- a/src/digital-components/dropdown-question/dropdown-question.vue
+++ b/src/digital-components/dropdown-question/dropdown-question.vue
@@ -1,159 +1,164 @@
 <template>
-	<div class="dropdown-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
-		<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
-		<select v-model="selectedOption"
-				class="form-select" 
-				:id="inputId"
-				:name="inputId" 
-				:aria-disabled="isDisabled" 
-				:disabled="isDisabled" 
-				:aria-required="isRequired"
-				:validationRules="validationRules"
-				:placeHolderText="placeHolderText" 
-			>
-			<option v-if="placeHolderText" value="" selected>{{ placeHolderText }}</option>
-			<option v-for="(value, name, index) in options" :value="name" :key="index">
-				{{ value }}       
-			</option>
-		</select>
-		<div v-show="errorMessage" class="row mt-2 form-test-error">
-			<span role="alert">{{ errorMessage }}</span>
-		</div>	
-	</div>    
+    <div class="dropdown-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
+        <label
+            :for="inputId"
+            :aria-label="questionText"
+            class="form-label"
+            v-html="labelText"></label>
+        <select
+            v-model="selectedOption"
+            class="form-select"
+            :id="inputId"
+            :name="inputId"
+            :aria-disabled="isDisabled"
+            :disabled="isDisabled"
+            :aria-required="isRequired"
+            :validationRules="validationRules"
+            :placeHolderText="placeHolderText">
+            <option v-if="placeHolderText" value="" selected>{{ placeHolderText }}</option>
+            <option v-for="(value, name, index) in options" :value="name" :key="index">
+                {{ value }}
+            </option>
+        </select>
+        <div v-show="errorMessage" class="row mt-2 form-test-error">
+            <span role="alert">{{ errorMessage }}</span>
+        </div>
+    </div>
 </template>
 
 <script>
 import { useField } from "vee-validate";
 
 export default {
-	name: "dropdown-question",
-	props: {
-		modelValue: String,
-		inputId: String,
-		options: {
-			type: Object,
-			required: true
-		},
-		isDisabled: Boolean,
-		isRequired: Boolean,
-		disableAutoFill: Boolean,
-		validationRules: String, 
-		cmsWidgetName: String,
-		hasError: Boolean,
-		errors: Array,
-		placeHolderText: String
-	},
-	setup(props) {
-		const propsClone = Object.assign({}, props);
-		const modelValue = propsClone.modelValue;
-		let initialValue;
+    name: "dropdown-question",
+    props: {
+        modelValue: String,
+        inputId: String,
+        options: {
+            type: Object,
+            required: true,
+        },
+        isDisabled: Boolean,
+        isRequired: Boolean,
+        disableAutoFill: Boolean,
+        validationRules: String, 
+        cmsWidgetName: String,
+        hasError: Boolean,
+        errors: Array,
+        placeHolderText: String
+    },
+    setup(props) {
+        const propsClone = Object.assign({}, props);
+        const modelValue = propsClone.modelValue;
+        let initialValue;
 
-		switch (typeof modelValue) {
-			case "number": 
-				initialValue = modelValue;
-				break;
-			default:
-				initialValue = (modelValue && modelValue.length > 0) ? modelValue : "";
-				break;
-		}
+        switch (typeof modelValue) {
+            case "number":
+                initialValue = modelValue;
+                break;
+            default:
+                initialValue = (modelValue && modelValue.length > 0) ? modelValue : "";
+                break;
+        }
 
-		const fieldOptions = {
-			type: "select",
-			value: props.modelValue,
-			initialValue: initialValue, 
-		};
+        const fieldOptions = {
+            type: "select",
+            value: props.modelValue,
+            initialValue: initialValue,
+        };
 
-		const {
-			errorMessage,
-			handleBlur,
-			handleChange,
-			meta,
-			errors
-		} = useField(props.inputId, props.validationRules, fieldOptions);
+        const {errorMessage, handleBlur, handleChange, meta, errors } = useField(
+            props.inputId,
+            props.validationRules,
+            fieldOptions
+        );
 
-		return { 
-			errorMessage,
-			handleBlur,
-			handleChange,
-			meta, 
-			errors
-		};
-	},  
-	computed: {
-		questionText(){
-			return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
-		},
-		selectedOption: {
-			get: function() {
-				return !this.modelValue ? "" : this.modelValue;
-			},
-			set: function(newValue) {
-				this.$emit("update:modelValue", newValue);
-			}
-		}, 
-		labelText: {
-			get: function () {
-				const noBreakChar = "&NoBreak;";
-				var questionText = "";
-				if (this.disableAutoFill) {
-					var words = this.questionText.toString().split(/[ ]+/);
-					words.forEach(function (word) {
-						const position = 1;
-						word = [word.toString().slice(0, position), noBreakChar, word.toString().slice(position)].join('');
-						questionText += `${word} `;					
-					});	
-					
-					questionText = questionText.trimEnd(); 
-				} else {
-					questionText = this.questionText.toString();
-				}
+        return {
+            errorMessage,
+            handleBlur,
+            handleChange,
+            meta,
+            errors
+        };
+    },
+    computed: {
+        questionText() {
+            return this.getCmsContent(this.cmsWidgetName, "QuestionText");
+        },
+        selectedOption: {
+            get: function () {
+                return !this.modelValue ? "" : this.modelValue;
+            },
+            set: function (newValue) {
+                this.$emit("update:modelValue", newValue);
+            },
+        },
+        labelText: {
+            get: function () {
+                const noBreakChar = "&NoBreak;";
+                var questionText = "";
+                if (this.disableAutoFill) {
+                    var words = this.questionText.toString().split(/[ ]+/);
+                    words.forEach(function (word) {
+                        const position = 1;
+                        word = [
+                            word.toString().slice(0, position),
+                            noBreakChar,
+                            word.toString().slice(position),
+                        ].join("");
+                        questionText += `${word} `;
+                    });
 
-				return questionText;
-			}
-		}
-	},
-	watch: {
-		selectedOption(newValue) {
-			this.handleChange(newValue);
-		}
-	}
+                    questionText = questionText.trimEnd();
+                } else {
+                    questionText = this.questionText.toString();
+                }
+
+                return questionText;
+            },
+        },
+    },
+    watch: {
+        selectedOption(newValue) {
+            this.handleChange(newValue);
+        },
+    },
 };
 </script>
 
 <style lang="scss">
 .dropdown-question {
-	label {
-		color: $black;
-		font-weight: 500; 
-	}
-	.form-label {
-		margin-bottom: .25rem;
-	}
-	.form-select {
-		color: $gray-600;
-		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
-		border: 1px solid $gray-500;
-		border-radius: .5rem;
-		min-height: 3rem;
-		&:focus,
-		&:focus-visible {
-			box-shadow: 0 0 0 2.5px $blue;
-		}
-		&:disabled,
-		&.disabled {
-			background-color: $gray-100;
-			filter: grayscale(100%);
-			&:hover {
-				box-shadow: 0 0 0 4px transparent;
-				border: 1px solid $gray-500;
-			}
-		}
-		&:hover {
-			border: 1px solid $gray-500;
-			box-shadow: 0 0 0 4px $blue-300;
-		}
-	}
+    label {
+        color: $black;
+        font-weight: 500;
+    }
+    .form-label {
+        margin-bottom: 0.25rem;
+    }
+    .form-select {
+        color: $gray-600;
+        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
+        border: 1px solid $gray-500;
+        border-radius: 0.5rem;
+        min-height: 3rem;
+        &:focus,
+        &:focus-visible {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:disabled,
+        &.disabled {
+            background-color: $gray-100;
+            filter: grayscale(100%);
+            &:hover {
+                box-shadow: 0 0 0 4px transparent;
+                border: 1px solid $gray-500;
+            }
+        }
+        &:hover {
+            border: 1px solid $gray-500;
+            box-shadow: 0 0 0 4px $blue-300;
+        }
+    }
 }
 </style>
 
-