Overlay ​

<template>
  <BOverlay
    :show="show"
    rounded="sm"
  >
    <BCard
      title="Card with overlay"
      :aria-hidden="show ? 'true' : null"
    >
      <BCardText>Laborum consequat non elit enim exercitation cillum.</BCardText>
      <BCardText>Click the button to toggle the overlay:</BCardText>
      <BButton
        :disabled="show"
        variant="primary"
        @click="show = true"
      >
        Show overlay
      </BButton>
    </BCard>
  </BOverlay>

  <BButton @click="show = !show">Toggle overlay</BButton>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const show = ref(false)
</script>

<template>
  <div class="row">
    <div
      class="col-lg-6"
      aria-controls="overlay-background"
    >
      <label for="bg-variant">Variant</label>
      <BFormSelect
        id="bg-variant"
        v-model="variant"
        :options="variants"
      />

      <label for="bg-opacity">Opacity</label>
      <div class="d-inline">
        <BFormInput
          id="bg-opacity"
          v-model.number="opacity"
          type="range"
          min="0"
          max="1"
          step="0.01"
          class="d-inline"
        />
      </div>

      {{ opacity.toFixed(2) }}

      <div>
        <label for="bg-blur"
          >Blur (does not work if variant is anything other than 'transparent' or 'white' or if
          bgColor is defined)</label
        >
        <BFormSelect
          id="bg-blur"
          v-model="blur"
          :options="blurs"
        />
      </div>
    </div>

    <BCol lg="6">
      <BOverlay
        id="overlay-background"
        show
        :variant="variant"
        :opacity="opacity"
        :blur="blur"
        rounded="sm"
      >
        <BCard
          title="Card with overlay"
          aria-hidden="true"
        >
          <BCardText>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </BCardText>
          <BButton
            disabled
            variant="primary"
            >Button</BButton
          >
        </BCard>
      </BOverlay>
    </BCol>
  </div>
</template>

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

const variants = [
  'transparent',
  'white',
  'light',
  'dark',
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
] as const
const blurs = [{text: 'None', value: ''}, '1px', '2px', '5px', '0.5em', '1rem']

const variant = ref<(typeof variants)[number]>('light')
const opacity = ref(0.85)
const blur = ref('2px')
</script>

<template>
  <BOverlay
    no-fade
    :show="show"
    rounded="sm"
  >
    <BCard
      title="Card with overlay"
      :aria-hidden="show ? 'true' : null"
    >
      <BCardText>Laborum consequat non elit enim exercitation cillum.</BCardText>
      <BCardText>Click the button to toggle the overlay:</BCardText>
      <BButton
        :disabled="show"
        variant="primary"
        @click="show = true"
      >
        Show overlay
      </BButton>
    </BCard>
  </BOverlay>

  <BButton @click="show = !show">Toggle overlay</BButton>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const show = ref(false)
</script>

<template>
  <BButton @click="showRoundedEx = !showRoundedEx">Toggle overlay</BButton>

  <BRow class="text-center mt-3">
    <BCol md="6">
      <p>With rounding</p>
      <BOverlay
        :show="showRoundedEx"
        class="d-inline-block"
        rounded="circle"
      >
        <BImg
          thumbnail
          rounded="circle"
          fluid
          src="https://picsum.photos/200/200/?image=54"
          alt="Image 1"
        />
      </BOverlay>
    </BCol>

    <BCol md="6">
      <p>Without rounding</p>
      <BOverlay
        :show="showRoundedEx"
        class="d-inline-block"
      >
        <BImg
          thumbnail
          rounded="circle"
          fluid
          src="https://picsum.photos/200/200/?image=54"
          alt="Image 1"
        />
      </BOverlay>
    </BCol>
  </BRow>
</template>

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

const showRoundedEx = ref(false)
</script>

<template>
  <BOverlay
    :show="show"
    rounded="sm"
    @shown="onShown"
    @hidden="onHidden"
  >
    <BCard
      title="Card with custom overlay content"
      :aria-hidden="show ? 'true' : null"
    >
      <BCardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</BCardText>
      <BCardText>Click the button to toggle the overlay:</BCardText>
      <BButton
        :disabled="show"
        variant="primary"
        @click="show = true"
      >
        Show overlay
      </BButton>
    </BCard>
    <template #overlay>
      <div class="text-center">
        <p id="cancel-label">Please wait...</p>
        <BButton
          variant="outline-danger"
          size="sm"
          aria-describedby="cancel-label"
          @click="show = false"
        >
          Cancel
        </BButton>
      </div>
    </template>
  </BOverlay>
</template>

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

const show = ref(false)

const onShown = () => {
  // eslint-disable-next-line no-console
  console.log('shown')
}
const onHidden = () => {
  // eslint-disable-next-line no-console
  console.log('hidden')
}
</script>

<template>
  <div class="position-relative p-4 bg-info">
    <p class="text-light fw-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <BCard title="Card with parent overlay">
      <BCardText>Laborum consequat non elit enim exercitation cillum.</BCardText>
      <BCardText>Click the button to toggle the overlay:</BCardText>
      <BButton
        :disabled="show"
        variant="primary"
        @click="show = true"
      >
        Show overlay
      </BButton>
    </BCard>
    <p class="text-light fw-bold mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <BOverlay
      :show="show"
      no-wrap
    />
  </div>
  <BButton
    class="mt-3"
    @click="show = !show"
    >Toggle overlay</BButton
  >
</template>

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

const show = ref(false)
</script>

<template>
  <BCard
    header="Card header"
    footer="Card footer"
  >
    <BImg
      thumbnail
      rounded="circle"
      src="https://picsum.photos/72/72/?image=58"
      alt="Image"
      class="d-inline"
    />
    <p class="d-inline align-top mb-0">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <BOverlay
      :show="show"
      no-wrap
    />
  </BCard>
  <BButton
    class="mt-3"
    @click="show = !show"
    >Toggle overlay</BButton
  >
</template>

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

const show = ref(false)
</script>

<template>
  <BOverlay
    :show="loadingBuzy"
    rounded
    opacity="0.6"
    spinner-small
    spinner-variant="primary"
    class="d-inline-block"
    @hidden="onBuzyHidden"
  >
    <BButton
      ref="buzyButton"
      :disabled="loadingBuzy"
      variant="primary"
      @click="setBuzyClick"
    >
      Do something
    </BButton>
  </BOverlay>
</template>

<script setup lang="ts">
import {ref, useTemplateRef} from 'vue'
import {BButton} from 'bootstrap-vue-next/components/BButton'

let timeout: ReturnType<typeof setTimeout> | null = null

const loadingBuzy = ref(false)
const buzyButton = useTemplateRef<typeof BButton>('buzyButton')

const clearTimer = () => {
  if (timeout) {
    clearTimeout(timeout)
    timeout = null
  }
}
const setTimer = (callback: () => void) => {
  clearTimer()
  timeout = setTimeout(() => {
    clearTimer()
    callback()
  }, 5000)
}
const setBuzyClick = () => {
  loadingBuzy.value = true
  // Simulate an async request
  setTimer(() => {
    loadingBuzy.value = false
  })
}

const onBuzyHidden = () => {
  // Return focus to the button once hidden
  buzyButton.value?.$el.focus()
}
</script>

<template>
  <BForm
    class="position-relative p-3"
    @submit.prevent="onFormSubmit"
  >
    <div class="row">
      <label
        class="col-lg-2"
        label-for="form-name"
        >Name</label
      >
      <BFormInput
        id="form-name"
        class="col"
        :disabled="formbusy"
      />
    </div>

    <div class="row mt-2">
      <label
        class="col-lg-2"
        label-for="form-email"
        >Email</label
      >
      <BFormInput
        id="form-email"
        class="col"
        type="email"
        :disabled="formbusy"
      />
    </div>

    <div class="d-flex justify-content-center mt-2">
      <BButton
        ref="formsubmit"
        type="submit"
        :disabled="formbusy"
        >Submit</BButton
      >
    </div>

    <BOverlay
      :show="formbusy"
      no-wrap
      @shown="onFormOverlayShown"
      @hidden="onFormOverlayHidden"
    >
      <template #overlay>
        <div
          v-if="processing"
          class="text-center p-4 bg-primary text-light rounded"
        >
          <div class="mb-3">Processing...</div>
          <BProgress
            min="1"
            max="20"
            :value="processingcounter"
            variant="success"
            height="3px"
            class="mx-n4 rounded-0"
          />
        </div>
        <div
          v-else
          ref="formdialog"
          tabindex="-1"
          role="dialog"
          aria-modal="false"
          aria-labelledby="form-confirm-label"
          class="text-center p-3"
        >
          <p><strong id="form-confirm-label">Are you sure?</strong></p>
          <div
            class="d-flex"
            style="column-gap: 5%"
          >
            <BButton
              variant="outline-danger"
              class="me-3"
              @click="onFormCancel"
            >
              Cancel
            </BButton>
            <BButton
              ref="successbutton"
              variant="outline-success"
              @click="onFormOK"
              >OK</BButton
            >
          </div>
        </div>
      </template>
    </BOverlay>
  </BForm>
</template>

<script setup lang="ts">
import {nextTick, ref, useTemplateRef} from 'vue'
import {BButton} from 'bootstrap-vue-next/components/BButton'

const formbusy = ref(false)
const processing = ref(false)
const processingcounter = ref(1)
const formdialog = useTemplateRef<HTMLElement>('formdialog')
const formsubmit = useTemplateRef<typeof BButton>('formsubmit')
const successbutton = useTemplateRef<typeof BButton>('successbutton')
let processingInterval: ReturnType<typeof setInterval> | null = null

const clearProcessingInterval = () => {
  if (processingInterval) {
    clearInterval(processingInterval)
    processingInterval = null
  }
}

const onFormOverlayShown = () => {
  // Focus on the dialog ok button when the overlay is shown
  successbutton.value?.$el.focus()
}

const onFormOverlayHidden = () => {
  // In this case, we return focus to the submit button
  // You may need to alter this based on your application requirements
  formsubmit.value?.$el.focus()
}

const onFormSubmit = () => {
  processing.value = false
  formbusy.value = true
}

const onFormCancel = () => {
  formbusy.value = false
}

const onFormOK = () => {
  processingcounter.value = 1
  processing.value = true
  clearProcessingInterval()
  processingInterval = setInterval(() => {
    if (processingcounter.value < 20) {
      processingcounter.value++
    } else {
      clearProcessingInterval()
      nextTick(() => {
        formbusy.value = false
        processing.value = false
      })
    }
  }, 350)
}
</script>