<script setup>
import { ref } from 'vue'
import AisAddon from '@c/addon/AisAddon.vue'
import AisInputGroup from '@c/input-group/AisInputGroup.vue'
import AisInput from '@c/input/AisInput.vue'
import AisField from '@c/field/AisField.vue'


const input = ref(null)
const text = ref('')

const reset = () => {
  text.value = ''
  input.value.focus()
}
</script>

<template>
  <AisField label="Button Example" label-mode="sr-only">
    <AisInputGroup>
      <AisInput
          ref="input"
          v-model="text"
          placeholder="Enter text then reset..."
      />
      <AisAddon button
                icon="undo"
                label="Reset text"
                @click="reset"
      />
    </AisInputGroup>
  </AisField>
</template>

