fix(VNumberInput): disable keyboard up/down for readonly state

[J-Sek]

Description

VNumberInput should keep original value as long as it has readonly, or disabled attributes or is contained within readonly form. (similar to other controls).

Fix is inspired by similar change for VAutocomplete and aims to render controls as disabled instead of just suppressing event handlers. Test cases should be self-explanatory.

Idea to consider: hiding controls and showing mdi-lock-outline instead would be a nice touch, but should probably follow internal discussion about consistency with other components accepting readonly prop.

fixes #19896

Playground:

<template>
  <v-app>
    <v-container>
      <v-card class="mx-auto pa-6 my-4" style="max-width: 1200px">
        <v-row>
          <v-col><v-switch color="success" hide-details v-model="inputDisabled" label="Disable input" /></v-col>
          <v-col><v-switch color="success" hide-details v-model="inputReadonly" label="Readonly input" /></v-col>
          <v-col><v-switch color="success" hide-details v-model="formReadonly" label="Readonly form" /></v-col>
        </v-row>

        <v-form :readonly="formReadonly">
          <v-number-input
            v-model="example"
            :readonly="inputReadonly"
            :disabled="inputDisabled"
          />
        </v-form>
      </v-card>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const example = ref(50)
  const inputReadonly = ref(true)
  const inputDisabled = ref(false)
  const formReadonly = ref(false)
</script>