Champ numérique

<script setup lang="ts">
import { ref } from 'vue'
import { VNumberInput } from 'vectis-ui'

const quantity = ref<number | null>(1)
</script>

<template>
  <VNumberInput
    v-model="quantity"
    class="field"
    label="Quantity"
    hint="Between 1 and 10."
    :min="1"
    :max="10"
  />
</template>

<style scoped>
.field {
  max-inline-size: 15rem;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VNumberInput } from 'vectis-ui'

const guests = ref<number | null>(2)
const rooms = ref<number | null>(1)
const nights = ref<number | null>(3)
</script>

<template>
  <div class="stack">
    <VNumberInput v-model="guests" label="Guests" controls="split" :min="1" />
    <VNumberInput v-model="rooms" label="Rooms" controls="stacked" :min="1" />
    <VNumberInput v-model="nights" label="Nights" controls="none" :min="1" />
  </div>
</template>

<style scoped>
.stack {
  display: grid;
  gap: var(--vectis-space-4);
  max-inline-size: 15rem;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VNumberInput } from 'vectis-ui'

const price = ref<number | null>(1249.9)
const discount = ref<number | null>(0.15)
const distance = ref<number | null>(42.195)
</script>

<template>
  <div class="stack">
    <VNumberInput
      v-model="price"
      label="Price"
      :min="0"
      :step="10"
      :format-options="{ style: 'currency', currency: 'EUR' }"
    />
    <VNumberInput
      v-model="discount"
      label="Discount"
      :min="0"
      :max="1"
      :step="0.05"
      :format-options="{ style: 'percent' }"
    />
    <VNumberInput
      v-model="distance"
      label="Distance"
      controls="none"
      :format-options="{ style: 'unit', unit: 'kilometer', maximumFractionDigits: 3 }"
    />
  </div>
</template>

<style scoped>
.stack {
  display: grid;
  gap: var(--vectis-space-4);
  max-inline-size: 15rem;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VNumberInput } from 'vectis-ui'

const weight = ref<number | null>(0.5)
</script>

<template>
  <VNumberInput
    v-model="weight"
    class="field"
    label="Weight"
    hint="Page Up and Page Down move ten steps."
    :min="0"
    :max="20"
    :step="0.5"
    :format-options="{ style: 'unit', unit: 'kilogram' }"
  />
</template>

<style scoped>
.field {
  max-inline-size: 15rem;
}
</style>