feat(VNumberInput): support append/prepend inner slots/icons

[yuwu9145]

Description

Add proper support of append/prepend inner slots/icons in VNumberInput

fixes #20782

Markup:

<template>
  <v-app>
    <v-container>
      <v-number-input
        append-inner-icon="mdi-map-marker"
        prepend-inner-icon="mdi-map-marker"
      />
      <v-number-input
        append-inner-icon="mdi-map-marker"
        prepend-inner-icon="mdi-map-marker"
        hide-input
      />
    </v-container>
  </v-app>
</template>

<style>
  /*
  uncomment to revert to default v-field-preppended padding


  .v-field.v-field--prepended {
    padding-inline-start: 12px;
  }

  */
</style>

[J-Sek]

I would consider additional margin 12px to better support use cases when controls are disabled (either because of readonly or the value being equal min or max.

playground

<template>
  <v-app>
    <v-container class="d-flex ga-6">
      <v-card class="pa-6" min-width="400">
        <h3>Value within range</h3>
        <h5>without margin</h5>
        <v-number-input :model-value="123.5" append-inner-icon="mdi-lock" />
        <v-number-input :model-value="123.5" control-variant="stacked" append-inner-icon="mdi-lock" />
        <v-number-input :model-value="123.5" control-variant="split" append-inner-icon="mdi-lock" />
        <h5>with margin-right: 12px</h5>
        <div class="add-margin">
          <v-number-input :model-value="123.5" append-inner-icon="mdi-lock" />
          <v-number-input :model-value="123.5" control-variant="stacked" append-inner-icon="mdi-lock" />
          <v-number-input :model-value="123.5" control-variant="split" append-inner-icon="mdi-lock" />
        </div>
      </v-card>
      <v-card class="pa-6" min-width="400">
        <h3>min='0'</h3>
        <h5>without margin</h5>
        <v-number-input :min="0" append-inner-icon="mdi-lock" />
        <v-number-input :min="0" control-variant="stacked" append-inner-icon="mdi-lock" />
        <v-number-input :min="0" control-variant="split" append-inner-icon="mdi-lock" />
        <h5>with margin-right: 12px</h5>
        <div class="add-margin">
          <v-number-input :min="0" append-inner-icon="mdi-lock" />
          <v-number-input :min="0" control-variant="stacked" append-inner-icon="mdi-lock" />
          <v-number-input :min="0" control-variant="split" append-inner-icon="mdi-lock" />
        </div>
      </v-card>
      <v-card class="pa-6" min-width="400">
        <h3>readonly</h3>
        <h5>without margin</h5>
        <v-number-input :model-value="123.5" readonly append-inner-icon="mdi-lock" />
        <v-number-input :model-value="123.5" control-variant="stacked" readonly append-inner-icon="mdi-lock" />
        <v-number-input :model-value="123.5" control-variant="split" readonly append-inner-icon="mdi-lock" />
        <h5>with margin-right: 12px</h5>
        <div class="add-margin">
          <v-number-input :model-value="123.5" readonly append-inner-icon="mdi-lock" />
          <v-number-input :model-value="123.5" control-variant="stacked" readonly append-inner-icon="mdi-lock" />
          <v-number-input :model-value="123.5" control-variant="split" readonly append-inner-icon="mdi-lock" />
        </div>
      </v-card>
    </v-container>
  </v-app>
</template>

<style>
.add-margin .v-number-input__control {
  margin-right: 12px;
}
</style>