refactor: replace Input with FormControl wherever possible

frappe · Sep 4, 2023 · 3c93a8f · 3c93a8f
1 parent 21f0384
commit 3c93a8f
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 13 deletions.
diff --git a/frontend/src/components/ExpenseAdvancesTable.vue b/frontend/src/components/ExpenseAdvancesTable.vue
@@ -17,7 +17,7 @@
 		>
 			<div class="flex flex-row justify-between items-center">
 				<div class="flex flex-row items-start gap-3">
-					<Input
+					<FormControl
 						type="checkbox"
 						class="mt-[0.5px]"
 						v-model="advance.selected"
@@ -42,7 +42,7 @@
 					<span class="text-normal">
 						{{ currency }}
 					</span>
-					<Input
+					<FormControl
 						type="number"
 						class="w-20"
 						v-model="advance.allocated_amount"

diff --git a/frontend/src/components/FormField.vue b/frontend/src/components/FormField.vue
@@ -26,7 +26,7 @@
 		/>
 
 		<!-- Text -->
-		<Input
+		<FormControl
 			v-else-if="
 				['Text Editor', 'Small Text', 'Text', 'Long Text'].includes(
 					props.fieldtype
@@ -42,7 +42,7 @@
 		/>
 
 		<!-- Check -->
-		<Input
+		<FormControl
 			v-else-if="props.fieldtype === 'Check'"
 			type="checkbox"
 			:label="props.label"
@@ -54,7 +54,7 @@
 		/>
 
 		<!-- Data field -->
-		<Input
+		<FormControl
 			v-else-if="props.fieldtype === 'Data'"
 			type="text"
 			:value="modelValue"
@@ -65,7 +65,7 @@
 		/>
 
 		<!-- Read only currency field -->
-		<Input
+		<FormControl
 			v-else-if="props.fieldtype === 'Currency' && isReadOnly"
 			type="text"
 			:value="modelValue"
@@ -76,7 +76,7 @@
 		/>
 
 		<!-- Float/Int field -->
-		<Input
+		<FormControl
 			v-else-if="isNumberType"
 			type="number"
 			:value="modelValue"
@@ -99,7 +99,7 @@
 
 		<!-- Date -->
 		<!-- FIXME: default datepicker has poor UI -->
-		<Input
+		<FormControl
 			v-else-if="props.fieldtype === 'Date'"
 			type="date"
 			v-model="date"

diff --git a/frontend/src/components/FormattedField.vue b/frontend/src/components/FormattedField.vue
@@ -9,7 +9,7 @@
 		{{ dayjs(props.value).format("D MMM") }}
 	</div>
 
-	<Input
+	<FormControl
 		v-else-if="props.fieldtype === 'Check'"
 		type="checkbox"
 		label=""
@@ -35,7 +35,7 @@
 
 <script setup>
 import { inject } from "vue"
-import { Badge, Input } from "frappe-ui"
+import { Badge, FormControl, Input } from "frappe-ui"
 
 import EmployeeAvatar from "@/components/EmployeeAvatar.vue"
 

diff --git a/frontend/src/main.js b/frontend/src/main.js
@@ -6,6 +6,7 @@ import socket from "./socket"
 import {
 	Button,
 	Input,
+	FormControl,
 	setConfig,
 	frappeRequest,
 	resourcesPlugin,
@@ -34,6 +35,7 @@ app.use(resourcesPlugin)
 
 app.component("Button", Button)
 app.component("Input", Input)
+app.component("FormControl", FormControl)
 app.component("EmptyState", EmptyState)
 
 app.use(router)

diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
@@ -7,13 +7,13 @@
 				</div>
 				<div class="mx-auto mt-6 w-full px-8 sm:w-96">
 					<form class="flex flex-col space-y-4" @submit.prevent="submit">
-						<Input
+						<FormControl
 							label="Email"
 							placeholder="[email protected]"
 							v-model="email"
 							:type="email !== 'Administrator' ? 'email' : 'text'"
 						/>
-						<Input
+						<FormControl
 							label="Password"
 							type="password"
 							placeholder="••••••"
@@ -32,7 +32,7 @@
 <script setup>
 import { IonPage, IonContent } from "@ionic/vue"
 import { inject, ref } from "vue"
-import { Input, Button } from "frappe-ui"
+import { Button, FormControl } from "frappe-ui"
 
 const email = ref(null)
 const password = ref(null)