feat(VNumberInput): ability to hide controls

[J-Sek]

Description

• control-variant="hidden" allows us replace controls with icon (e.g. for readonly state)
• append-inner-icon and prepend-inner-icon have been already restored, but need a minor CSS fix for spacing

resolves #19897

Markup:

<template>
  <v-app>
    <v-container>
      <v-card class="mx-auto pa-6 my-4" style="max-width: 600px">
        <h5>readonly + hide controls + lock icon</h5>
        <v-number-input
          v-model="exampleValue"
          readonly
          control-variant="hidden"
          hide-details
          append-inner-icon="mdi-lock-outline"
        />
        <h5>workaround with v-text-field</h5>
        <v-text-field
          v-model="exampleValue"
          readonly
          hide-details
          append-inner-icon="mdi-lock-outline"
        />
      </v-card>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const exampleValue = ref(120)
</script>

[J-Sek]

Ready for review

[J-Sek]

Some more tweaks might be required and will probably cover #20812 so we will need to choose on or the other. Playground with raw CSS tweaks I plan to apply.

[KaelWD]

@J-Sek Does this replace #20812 now?

[J-Sek]

Does this replace #20812 now?

I have rebased the branch and included change around makeVTextFieldProps to unlock remaining slots. It won't add spacing when there is no icon. yuwu9145's implementation did not assume anything about the slot content, but I guess people who put custom stuff in slots may be fine with additional px-1. It is much easier to compensate for missing space than to remove one - negative margins sometimes mess up items width.