<template>
  <div class="flex items-center space-x-2">
    <BaseButton
        ref="baseBtn"
        :busy="loading"
        @click="toggleLoading"
        v-slot="{busy, disabled}"
        class="
          px-2.5 py-1 text-sm border
          border-ui-gray border-opacity-50 rounded-md
          hover:shadow-sm active:shadow-inner
          focus:ring-2 focus:ring-ui-gold focus:outline-0
          active:ring-transparent"
    >
      Busy: {{busy}}
    </BaseButton>
  </div>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import BaseButton from '@/components/button/BaseButton.vue'

  let loading = ref(false)
  const toggleLoading = () => loading.value = !loading.value

  // Template ref, see ref="baseBtn"
  let baseBtn = ref(null)

  onMounted(() => {

    // Unwrap template ref
    const btn = baseBtn.value
    console.log('Access to button element', btn.$el)

    // Call exposed method on component
    btn.focus()
  })
</script>

