From 3577ba51320e3171bb8c22deae7f4c5856e1163b Mon Sep 17 00:00:00 2001 From: kolaente Date: Sat, 10 Jan 2026 21:05:57 +0100 Subject: [PATCH] feat(frontend): add disabled prop to FormField component When disabled is true, the component now automatically adds the 'disabled' CSS class and sets the native disabled attribute on the input element. --- frontend/src/components/input/FormField.vue | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/input/FormField.vue b/frontend/src/components/input/FormField.vue index efc2e48db..f86166989 100644 --- a/frontend/src/components/input/FormField.vue +++ b/frontend/src/components/input/FormField.vue @@ -6,6 +6,7 @@ interface Props { label?: string error?: string | null id?: string + disabled?: boolean } const props = defineProps() @@ -33,6 +34,11 @@ const controlClasses = computed(() => [ {'is-expanded': hasAddon.value}, ]) +const inputClasses = computed(() => [ + 'input', + {'disabled': props.disabled}, +]) + // Only bind value when modelValue is explicitly provided (not undefined) // This allows the component to be used without v-model for native input behavior const inputBindings = computed(() => { @@ -68,7 +74,8 @@ defineExpose({ :id="inputId" ref="inputRef" v-bind="{ ...$attrs, ...inputBindings }" - class="input" + :class="inputClasses" + :disabled="disabled || undefined" @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)" >