<template>
  <v-app>
    <v-container>
      <v-row justify="center">
        <v-col cols="12" sm="8">
          <v-alert class="mb-4" type="info" text="Focus each icon and use keyboard [Space] and [Enter]" />
          <v-text-field
            v-model="password"
            :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
            :append-inner-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
            :prepend-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
            :prepend-inner-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
            :type="show ? 'text' : 'password'"
            hint="At least 8 characters"
            label="Password"
            persistent-hint
            clearable
            @click:append="show = !show"
            @click:appendInner="show = !show"
            @click:prepend="show = !show"
            @click:prependInner="show = !show"
          />
        </v-col>
        <v-col cols="12" sm="8">
          <v-combobox
            v-model="comboChips"
            append-icon="$plus"
            append-inner-icon="$plus"
            prepend-icon="$plus"
            prepend-inner-icon="$plus"
            chips multiple clearable
            @click:append="comboChips.push('append')"
            @click:appendInner="comboChips.push('appendInner')"
            @click:prepend="comboChips.push('prepend')"
            @click:prependInner="comboChips.push('prependInner')"
          />
        </v-col>
        <v-col cols="12" sm="8">
          <v-textarea
            v-model="clicksLog"
            append-icon="mdi-cow"
            append-inner-icon="mdi-cow"
            prepend-icon="mdi-cow"
            prepend-inner-icon="mdi-cow"
            auto-grow clearable
            @click:append="clicksLog += '\nappend'"
            @click:appendInner="clicksLog += '\nappendInner'"
            @click:prepend="clicksLog += '\nprepend'"
            @click:prependInner="clicksLog += '\nprependInner'"
          />
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

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

  const show = ref(false)
  const password = ref('Password')
  const clicksLog = ref('')
  const comboChips = ref([])
</script>