Overlay ​

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

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

<script setup lang="ts">
const showOverlayEx1 = 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="opacity"
          type="range"
          number
          min="0"
          max="1"
          step="0.01"
          class="d-inline"
        />
      </div>

      {{ opacity.toFixed(2) }}

      <div>
        <label for="bg-blur">Blur</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">
const variants = [
  'transparent',
  'white',
  'light',
  'dark',
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
]
const blurs = [{text: 'None', value: ''}, '1px', '2px', '5px', '0.5em', '1rem']

const variant = ref('light')
const opacity = ref(0.85)
const blur = ref('2px')
</script>

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

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

<script setup lang="ts">
const showOverlayEx1 = 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">
const showRoundedEx = ref(false)
</script>

<template>
  <BOverlay :show="showCustomEx" rounded="sm" @shown="onShown" @hidden="onHidden">
    <BCard title="Card with custom overlay content" :aria-hidden="showCustomEx ? 'true' : null">
      <BCardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</BCardText>
      <BCardText>Click the button to toggle the overlay:</BCardText>
      <BButton :disabled="showCustomEx" variant="primary" @click="showCustomEx = 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="showCustomEx = false"
        >
          Cancel
        </BButton>
      </div>
    </template>
  </BOverlay>
</template>

<script setup lang="ts">
const showCustomEx = ref(false)

const onShown = () => {
  console.log('shown')
}
const onHidden = () => {
  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="showNoWrapEx" variant="primary" @click="showNoWrapEx = true">
        Show overlay
      </BButton>
    </BCard>
    <p class="text-light fw-bold mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <BOverlay :show="showNoWrapEx" no-wrap> </BOverlay>
  </div>
  <BButton class="mt-3" @click="showNoWrapEx = !showNoWrapEx">Toggle overlay</BButton>
</template>

<script setup lang="ts">
const showNoWrapEx = 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="showNoWrapEx2" no-wrap />
  </BCard>
  <BButton @click="showNoWrapEx2 = !showNoWrapEx2" class="mt-3">Toggle overlay</BButton>
</template>

<script setup lang="ts">
const showNoWrapEx2 = 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">
let timeout = null

const loadingBuzy = ref(false)
const buzyButton = ref<HTMLElement | null>(null)

const clearTimer = () => {
  if (timeout) {
    clearTimeout(timeout)
    timeout = null
  }
}
const setTimer = (callback) => {
  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.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-mail">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 variant="outline-success" @click="onFormOK">OK</BButton>
          </div>
        </div>
      </template>
    </BOverlay>
  </BForm>
</template>

<script setup lang="ts">
const formbusy = ref(false)
const processing = ref(false)
const processingcounter = ref(1)
const formdialog = ref<HTMLElement | null>(null)
let processingInterval = null

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

const onBuzyHidden = () => {
  // Focus the dialog prompt
  //formdialog.focus()
}

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

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>