<script setup>
  import { ref, watch } from 'vue'
  const disableForm = ref(true)
  const disableField = ref(true)

  const description = ref(
    'Independently disabled VFields or nested in a disabled VForm are can be cleared when using ENTER on a focused clearable icon'
  )
  const phone = ref('')
  const repro = ref('')
  const email = ref('')
  const select = ref(['a'])

  const items = ['a', 'b', 'c']

  watch(
    disableForm,
    v => {
      if (v) {
        repro.value =
          '1. Create a v-form:disabled with nested v-fields\n2. use TAB to focus on clearable icon of one of the fields\n3. Click ENTER on the keyboard'
      } else {
        repro.value = '4. Create any v-field:disabled and repeat step 2 and 3'
      }
    },
    {
      immediate: true,
    }
  )
</script>

<template>
  <v-form class="pa-10" :disabled="disableForm">
    <v-text-field
      clearable
      v-model="description"
      :counter="10"
      label="Description"
    ></v-text-field>
    <v-textarea
      clearable
      v-model="repro"
      label="Reproduction"
      :disabled="disableField"
      rows="5"
    ></v-textarea>
    <v-text-field clearable v-model="email" label="E-mail"></v-text-field>
    <v-select
      clearable
      multiple
      v-model="select"
      :items="items"
      label="Select"
    ></v-select>
    <v-text-field clearable v-model="phone" label="Phone Number"></v-text-field>
    <v-btn-group variant="outlined">
      <v-btn type="submit"> submit </v-btn>
      <v-btn type="reset"> clear </v-btn>
    </v-btn-group>
  </v-form>

  <v-checkbox
    v-model="disableForm"
    label="Disable Form"
    type="checkbox"
  ></v-checkbox>

  <h4>repro v-model</h4>
  <pre>{{ repro }}</pre>
</template>