fix: small custom input component fixes

YannicEl · Jan 18, 2024 · 09dd975 · 09dd975
1 parent d04085d
commit 09dd975
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 31 deletions.
diff --git a/packages/lib/src/components/UInput.vue b/packages/lib/src/components/UInput.vue
@@ -1,15 +1,10 @@
 <template>
-	<input ref="input" v-model="field.value" :class="classes" />
+	<input ref="input" v-model="field!.value" :class="classes" />
 </template>
 
 <script setup lang="ts">
-import { Field } from '../useField';
-import { getFieldAndClasses } from './utils';
-
-const props = defineProps<{
-	field?: Field;
-	fieldName?: string;
-}>();
+import { getFieldAndClasses, type CustomInputProps } from './utils';
 
+const props = defineProps<CustomInputProps>();
 const { field, classes } = getFieldAndClasses(props);
 </script>
diff --git a/packages/lib/src/components/USelect.vue b/packages/lib/src/components/USelect.vue
@@ -1,17 +1,12 @@
 <template>
-	<select v-model="field.value" :class="classes">
+	<select v-model="field!.value" :class="classes">
 		<slot />
 	</select>
 </template>
 
 <script setup lang="ts">
-import { Field } from '../useField';
-import { getFieldAndClasses } from './utils';
-
-const props = defineProps<{
-	field?: Field;
-	fieldName?: string;
-}>();
+import { getFieldAndClasses, type CustomInputProps } from './utils';
 
+const props = defineProps<CustomInputProps>();
 const { field, classes } = getFieldAndClasses(props);
 </script>
diff --git a/packages/lib/src/components/UTextarea.vue b/packages/lib/src/components/UTextarea.vue
@@ -1,18 +1,13 @@
 <template>
-	<textarea v-model="field.value" :class="classes">
+	<textarea v-model="field!.value" :class="classes">
 		<slot />
 	</textarea
 	>
 </template>
 
 <script setup lang="ts">
-import { Field } from '../useField';
-import { getFieldAndClasses } from './utils';
-
-const props = defineProps<{
-	field?: Field;
-	fieldName?: string;
-}>();
+import { getFieldAndClasses, type CustomInputProps } from './utils';
 
+const props = defineProps<CustomInputProps>();
 const { field, classes } = getFieldAndClasses(props);
 </script>
diff --git a/packages/lib/src/components/utils.ts b/packages/lib/src/components/utils.ts
@@ -3,17 +3,21 @@ import { injectForm } from '../composables/useFormInject';
 import { Field } from '../useField';
 import { getClassnames } from '../utils';
 
-export function getFieldAndClasses(props: { field?: Field; fieldName?: string }): {
-	field: ComputedRef<Field>;
+export type CustomInputProps = {
+	field?: Field;
+	fieldName?: string;
+};
+
+export function getFieldAndClasses(props: CustomInputProps): {
+	field: ComputedRef<Field | undefined>;
 	classes: ComputedRef<Record<string, string>>;
 } {
 	const field = computed(() => {
 		if (props.field) return props.field;
 
-		const attributes = useAttrs();
-		const { name } = attributes;
+		const { name, disabled } = useAttrs();
 
-		if (!name && !props.fieldName) {
+		if (!props.fieldName && typeof name !== 'string') {
 			console.warn('Input has not name prop');
 			return;
 		}
@@ -24,7 +28,7 @@ export function getFieldAndClasses(props: { field?: Field; fieldName?: string })
 			return;
 		}
 
-		const field = form.fields[props.fieldName ?? name];
+		const field = form.fields[props.fieldName ?? (name as string)];
 
 		if (!field) {
 			console.warn(`Form has no field "${name}"`);
@@ -36,7 +40,7 @@ export function getFieldAndClasses(props: { field?: Field; fieldName?: string })
 			return;
 		}
 
-		field.disabled = 'disabled' in attributes;
+		field.disabled = !!disabled;
 
 		return field;
 	});