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

let input = ref(null)
let inputVal = ref('')
let clearInput = () => {
  inputVal.value = ''
  input.value.focus()
}
</script>

<template>
  <AisField label="Flex grow">
    <AisInputGroup>
      <AisAddon icon="users">Admin</AisAddon>
      <AisInput class="grow" ref="input" v-model="inputVal" placeholder="Testing..." size="md"  />
      <AisAddon button icon="close" variant="default" label="More options..." @click="clearInput" />
    </AisInputGroup>
  </AisField>
</template>

