refactor: rename input to inputField

nblackburn · Aug 9, 2024 · d8379ee · d8379ee
1 parent 52c6e66
commit d8379ee
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 33 deletions.
diff --git a/src/components/contactForm.vue b/src/components/contactForm.vue
@@ -3,52 +3,28 @@
         <FieldSet name="contact">
             <div :class="styles.field">
                 <label for="name" :class="styles.label">Name*</label>
-                <Input
-                    type="text"
-                    name="name"
-                    id="name"
-                    v-model="name"
-                    :disabled="isSending"
-                    required
-                />
+                <InputField type="text" name="name" id="name" v-model="name" :disabled="isSending" required />
             </div>
 
             <div :class="styles.field">
                 <label for="email" :class="styles.label">Email*</label>
-                <Input
-                    type="email"
-                    name="email"
-                    id="email"
-                    v-model="email"
-                    :disabled="isSending"
-                    required
-                />
+                <InputField type="email" name="email" id="email" v-model="email" :disabled="isSending" required />
             </div>
         </FieldSet>
 
         <FieldSet name="message">
             <div :class="styles.field">
                 <label for="message" :class="styles.label">Message*</label>
-                <TextArea
-                    name="message"
-                    id="message"
-                    v-model="message"
-                    :rows="5"
-                    :min-length="10"
-                    :disabled="isSending"
-                    required
-                />
+                <TextArea name="message" id="message" v-model="message" :rows="5" :min-length="10" :disabled="isSending"
+                    required />
             </div>
         </FieldSet>
 
         <FieldSet name="captcha">
             <div :class="styles.field">
                 <label :class="styles.label">Are you human?</label>
-                <TurnStile
-                    @expired="onCaptchaExpired"
-                    @callback="onCaptureVerified"
-                    @unsupported="onCaptchaUnsupported"
-                />
+                <TurnStile @expired="onCaptchaExpired" @callback="onCaptureVerified"
+                    @unsupported="onCaptchaUnsupported" />
             </div>
         </FieldSet>
 
@@ -59,13 +35,13 @@
 </template>
 
 <script lang="ts">
-import Input from '@components/input.vue';
 import * as styles from './contactForm.css';
 import Button from '@components/button.vue';
 import listenOnce from '@utilities/listenOnce';
-import TextArea from '@components/textArea.vue';
+import TextArea from '@root/src/components/textAreaField.vue';
 import FieldSet from '@components/fieldSet.vue';
 import TurnStile from '@components/turnStile.vue';
+import InputField from '@components/inputField.vue';
 import { ref, defineComponent, computed } from 'vue';
 
 export default defineComponent({

diff --git a/src/components/input.css.ts → src/components/inputField.css.ts b/src/components/input.css.ts → src/components/inputField.css.ts
diff --git a/src/components/input.vue → src/components/inputField.vue b/src/components/input.vue → src/components/inputField.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import * as styles from './input.css';
+import * as styles from './inputField.css';
 
 interface Props {
     type?: string,