feat(VNumberInput): ability to hide controls + spacing tweaks

[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
fixes #20782

Markup:

<template>
  <v-app>
    <v-container>
      <v-card class="mx-auto pa-6 my-4" style="max-width: 600px">
        <h5>v-number-input</h5>
        <div class="d-flex ga-3 align-center">
          <v-switch
            hide-details
            v-model="fieldConfig.reverse"
            label="reverse"
          />
          <v-spacer />
          <v-radio-group hide-details v-model="fieldConfig.controlVariant">
            <div class="d-flex ga-3 align-center">
              <v-radio value="default" label="default" />
              <v-radio value="stacked" label="stacked" />
              <v-radio value="split" label="split" />
            </div>
          </v-radio-group>
        </div>
        <div class="d-flex flex-column ga-2">
          <v-number-input
            v-bind="fieldConfig"
            prepend-inner-icon="mdi-bitcoin"
            class="v-number-input--append-inner-slot v-number-input--append-inner-slot v-number-input--prepend-inner-slot"
            :model-value="120"
            readonly
            hide-details
          />
          <v-number-input
            v-bind="fieldConfig"
            class="v-number-input--append-inner-slot v-number-input--append-inner-slot v-number-input--prepend-inner-slot"
            :model-value="120"
            readonly
            hide-details
            prepend-inner-icon="mdi-bitcoin"
            append-inner-icon="mdi-lock-outline"
          />
          <v-number-input
            v-bind="fieldConfig"
            class="v-number-input--hidden-controls v-number-input--append-inner-slot v-number-input--prepend-inner-slot"
            :model-value="120"
            readonly
            hide-details
            control-variant="hidden"
            prepend-inner-icon="mdi-bitcoin"
            append-inner-icon="mdi-lock-outline"
          />
          <h5>workaround with v-text-field</h5>
          <v-text-field
            v-bind="fieldConfig"
            class="v-number-input--append-inner-slot"
            :model-value="120"
            readonly
            hide-details
            prepend-inner-icon="mdi-bitcoin"
            append-inner-icon="mdi-lock-outline"
          />
        </div>
      </v-card>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  const fieldConfig = reactive({
    controlVariant: 'stacked',
    reverse: false,
  })
</script>

<style>
  input {
    outline: 1px dashed red;
    outline-offset: -4px;
  }
</style>

[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.