<template>
  <v-app>
    <v-select
      v-model="fieldVariant"
      label="Variants"
      :items="['underlined', 'outlined', 'filled', 'solo', 'solo-inverted', 'solo-filled', 'plain']"
    />
    <h1>{{ numberInputValue }}</h1>
    <v-number-input
      v-model="numberInputValue"
      :variant="fieldVariant"
    />
    <div class="ma-4 pa-4">
      <v-number-input
        v-model="numberInputValue"
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        control-variant="stacked"
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        control-variant="split"
        :variant="fieldVariant"
      />
    </div>
    <div class="ma-4 pa-4">
      <h1>Reverse</h1>
      <v-number-input
        v-model="numberInputValue"
        reverse
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        control-variant="stacked"
        reverse
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        control-variant="split"
        reverse
        :variant="fieldVariant"
      />
    </div>
    <div class="ma-4 pa-4">
      <h1>inset</h1>
      <v-number-input
        v-model="numberInputValue"
        inset
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        control-variant="stacked"
        inset
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        control-variant="split"
        inset
        :variant="fieldVariant"
      />
    </div>
    <div class="ma-4 pa-4">
      <h1>Reverse Inset</h1>
      <v-number-input
        v-model="numberInputValue"
        reverse
        inset
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        control-variant="stacked"
        reverse
        inset
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        control-variant="split"
        reverse
        inset
        :variant="fieldVariant"
      />
    </div>
    <div class="ma-4 pa-4">
      <h1>Hide Input</h1>
      <v-number-input
        v-model="numberInputValue"
        hide-input
        :variant="fieldVariant"
      />
      <v-number-input
        v-model="numberInputValue"
        inset
        hide-input
        :variant="fieldVariant"
      />
    </div>
    <div class="ma-4 pa-4">
      <h1>Control slots</h1>
      <v-number-input
        v-model="numberInputValue"
        :variant="fieldVariant"
        reverse
      >
        <template v-slot:increment="{ click }">
          <v-btn
            color="red"
            @click="click"
          />
        </template>
        <template v-slot:decrement="{ click }">
          <v-btn
            color="green"
            @click="click"
          />
        </template>
      </v-number-input>
    </div>
    <div class="ma-4 pa-4">
      <h1>Native html attributes support</h1>
      <h4>max (100)</h4>
      <v-number-input
        :max="100"
        :min="10"
        :model-value="120"
        :variant="fieldVariant"
      />
      <h4>min (10)</h4>
      <v-number-input
        :max="100"
        :min="10"
        :model-value="6"
        :variant="fieldVariant"
      />
      <h4>step (5)</h4>
      <v-number-input
        :max="100"
        :min="10"
        :step="5"
        :model-value="70"
        :variant="fieldVariant"
      />
    </div>
    <div class="ma-4 pa-4">
      <h1>VInput/VField props</h1>
      <h4>disabled</h4>
      <v-number-input
        :max="100"
        :min="10"
        disabled
        :variant="fieldVariant"
      />
      <h4>hint</h4>
      <v-number-input
        hint="Enter your password to access this website"
        :variant="fieldVariant"
      />
      <h4>label</h4>
      <v-number-input
        label="test label"
        :variant="fieldVariant"
      />
      <h4>Density</h4>
      <v-number-input
        :variant="fieldVariant"
        density="default"
      />
      <v-number-input
        :variant="fieldVariant"
        density="comfortable"
      />
      <v-number-input
        :variant="fieldVariant"
        density="compact"
      />
      <h4>Loading</h4>
      <v-number-input
        :variant="fieldVariant"
        loading
        color="blue"
      >
      </v-number-input>
    </div>
  </v-app>
</template>

<script setup lang="ts">
  import { template } from 'cypress/types/lodash';
import { computed, ref } from 'vue'
  const fieldVariant = ref('outlined')
  const numberInputValue = ref(120)
  const progress = computed(() => Math.min(100, 5 * 10))
</script>