Loader ​

<template>
  <div class="flex flex-col gap-4">
    <ASpinner />
    <p>You can also use spinner <ASpinner /> inline.</p>
  </div>
</template>

<script lang="ts" setup>
import { useTimeout } from '@vueuse/core'
import { ref } from 'vue'

const { ready, start } = useTimeout(1000, { controls: true })

const alertLoading = ref(false)

const isDialogShown = ref(false)
const isDrawerShown = ref(false)
</script>

<template>
  <div class="flex flex-wrap gap-6">
    <!-- Alert -->
    <AAlert
      variant="fill"
      class="relative cursor-pointer"
      icon="i-bx-info-circle"
      @click="alertLoading = !alertLoading"
    >
      Click me to toggle loading
      <ALoader :loading="alertLoading" />
    </AAlert>
    <!-- Dialog -->
    <ADialog
      v-model="isDialogShown"
      title="Dialog title"
      subtitle="Chocolate cake tiramisu donut"
      text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
      :loading="!ready"
      class="[--a-loader-overlay-bg-opacity:1]"
    />
    <ABtn @click="isDialogShown = true; start()">
      Show dialog
    </ABtn>
    <!-- Drawer -->
    <ADrawer
      v-model="isDrawerShown"
      title="Drawer title"
      subtitle="Chocolate cake tiramisu donut"
      :loading="!ready"
      class="[--a-loader-overlay-bg-opacity:1]"
    />
    <ABtn @click="isDrawerShown = true; start()">
      Show drawer
    </ABtn>
  </div>
</template>

<script lang="ts" setup>
import { useDebounceFn, useTimeout } from '@vueuse/core'
import { ref } from 'vue'

const { ready: btnLoaded, start: startBtnLoading } = useTimeout(1500, { controls: true })

const q = ref('')
const { ready: inputLoaded, start: startInputLoading } = useTimeout(1000, { controls: true })
const debouncedStartInputLoading = useDebounceFn(startInputLoading, 500)
</script>

<template>
  <div class="grid-row gap-4 grid-flow-row">
    <!-- 👉 Button -->
    <ABtn @click="startBtnLoading">
      <ALoadingIcon
        icon="i-bx-cloud-upload"
        :loading="!btnLoaded"
      />
      <span>Upload</span>
    </ABtn>

    <!-- 👉 Input -->
    <AInput
      v-model="q"
      @input="debouncedStartInputLoading"
    >
      <template #prepend-inner>
        <ALoadingIcon
          icon="i-bx-search"
          :loading="!inputLoaded"
        />
      </template>
    </AInput>
  </div>
</template>

<template>
  <div class="cards-demo-container">
    <ACard
      title="Card title"
      subtitle="Chocolate cake tiramisu donut"
      text="Ice cream sweet pie pie dessert sweet danish. Jelly jelly beans cupcake jelly-o chocolate bonbon chocolate bar."
      style="--a-loader-overlay-bg-opacity: 1"
    >
      <ALoader
        title="Heartbeat"
        subtitle="Made with love with Anu"
        class="[--a-loader-overlay-bg-c:var(--a-surface-c)]"
      >
        <i class="i-bx-bxs-heart text-red-500 text-4xl animate-heart-beat animate-count-infinite" />
      </ALoader>
    </ACard>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const loading = ref(false)
</script>

<template>
  <ABtn @click="loading = !loading">
    Loading in full page mode
  </ABtn>

  <ALoader
    :loading="loading"
    full-page
    @click="loading = false"
  />
</template>