<template>
  <v-app>
    <v-container>
      <v-row justify="center">
        <v-col cols="12" md="6">
          <v-number-input
            :precision="2"
            v-model="numericValue"
            label="Enter a number"
            control-variant="stacked"
            class="my-4"
          >
            <template #append-inner>
              <v-btn
                v-if="numericValue == null || numericValue < 100"
                color="primary"
                size="small"
                text="Add +50"
                @click="numericValue += 50"
              />
            </template>
          </v-number-input>

          <v-text-field
            v-model.number="numericValue"
            label="Enter a number"
            control-variant="stacked"
            :min="0"
            :max="100"
            class="my-4"
          >
            <template #append-inner>
              <v-btn
                v-if="numericValue == null || numericValue < 100"
                variant="outlined"
                size="small"
                text="Add +50"
                @click="numericValue += 50"
              />
            </template>
          </v-text-field>

          <pre>Current value: {{ numericValue }}</pre>

          <v-btn @click="changeValueExternally" class="mt-4">
            Set value to 50 externally
          </v-btn>

          <v-btn @click="setNull" class="mt-4 ml-2"> Set value to null </v-btn>
          <div class="mt-3">
            <v-btn
              v-if="!interval"
              @click="startIncrements"
              prepend-icon="mdi-play"
              >Start increments</v-btn
            >
            <v-btn v-else @click="stopIncrements" prepend-icon="mdi-stop"
              >Stop</v-btn
            >
          </div>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const numericValue = ref(10)

  const changeValueExternally = () => (numericValue.value = 50)
  const setNull = () => (numericValue.value = null)

  let interval = ref(0)
  const startIncrements = () => {
    clearInterval(interval.value)
    interval.value = setInterval(() => (numericValue.value += 5), 1000)
  }
  const stopIncrements = () => {
    clearInterval(interval.value)
    interval.value = 0
  }
</script>
<style>
  .v-input--horizontal .v-input__append {
    margin-inline-start: 0;
  }
</style>