Popover ​

<template>
  <div class="d-flex flex-column gap-3">
    <BPopover title="String ID Target">
      <template #target>
        <BButton
          id="target-string"
          variant="primary"
          >Target by ID String</BButton
        >
      </template>
      This popover targets an element by its ID string
    </BPopover>

    <BPopover
      :target="buttonRef"
      title="Template Ref Target"
    >
      <template #target>
        <BButton
          ref="buttonRef"
          variant="success"
          >Target by Ref</BButton
        >
      </template>
      This popover targets an element via a template ref
    </BPopover>

    <BPopover
      target="#toolbar > button:first-child"
      title="querySelector Target"
    >
      <div
        id="toolbar"
        class="d-flex gap-2"
      >
        <BButton variant="info">Target by querySelector</BButton>
        <BButton variant="secondary">Not targeted</BButton>
      </div>
      This popover targets an element using a querySelector string
    </BPopover>
  </div>
</template>

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

const buttonRef = ref<ComponentPublicInstance>()
</script>

<template>
  <div class="d-flex flex-wrap gap-2">
    <!-- Default: Hover + Focus -->
    <BPopover>
      <template #target>
        <BButton variant="secondary">Default (hover/focus)</BButton>
      </template>
      Default triggers: hover and focus
    </BPopover>

    <!-- Click only -->
    <BPopover click>
      <template #target>
        <BButton variant="primary">Click Only</BButton>
      </template>
      Click to toggle
    </BPopover>

    <!-- Hover only -->
    <BPopover hover>
      <template #target>
        <BButton variant="success">Hover Only</BButton>
      </template>
      Hover to show (no focus)
    </BPopover>

    <!-- Focus only -->
    <BPopover focus>
      <template #target>
        <BButton variant="info">Focus Only</BButton>
      </template>
      Focus to show (no hover)
    </BPopover>

    <!-- Multiple triggers -->
    <BPopover
      click
      hover
      focus
    >
      <template #target>
        <BButton variant="warning">All Triggers</BButton>
      </template>
      Click, hover, or focus
    </BPopover>

    <!-- Manual control -->
    <BPopover
      v-model="manualShow"
      manual
    >
      <template #target>
        <BButton
          variant="danger"
          @click="manualShow = !manualShow"
        >
          Manual ({{ manualShow ? 'hide' : 'show' }})
        </BButton>
      </template>
      Controlled manually via v-model
    </BPopover>
  </div>
</template>

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

const manualShow = ref(false)
</script>

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <p>Popover is {{ model ? 'visible' : 'hidden' }}</p>
    </div>

    <div class="p-2">
      <BPopover
        v-model="model"
        placement="right"
        title="Popover"
      >
        <template #target>
          <BButton
            class="mx-2"
            @click="model = !model"
            >Toggle Popover</BButton
          >
        </template>
        Hello <strong>World!</strong>
      </BPopover>
    </div>
  </div>
</template>

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

const model = ref(false)
</script>

<template>
  <div
    ref="container"
    class="overflow-auto border"
    style="height: 200px; width: 100%"
  >
    <div style="height: 400px; padding: 100px">
      <BPopover
        hover
        boundary="clippingAncestors"
        :boundary-padding="10"
        title="Constrained Popover"
      >
        <template #target>
          <BButton variant="primary">Scroll to see boundary</BButton>
        </template>
        This popover is constrained within its scrollable container
      </BPopover>
    </div>
  </div>
</template>

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

const container = ref<HTMLElement>()
</script>

<template>
  <div class="d-flex gap-2">
    <BPopover
      :click="true"
      :close-on-hide="true"
      :delay="{show: 0, hide: 0}"
    >
      <template #target>
        <BButton>Click me. Popover closes when clipped</BButton>
      </template>
      Scroll me out of view
    </BPopover>
    <BPopover
      :click="true"
      :close-on-hide="true"
      :delay="{show: 0, hide: 0}"
      :boundary-padding="{top: navHeight}"
    >
      <template #title>Scroll me out of view</template>
      <template #target>
        <BButton>This popover gets hidden by the top nav</BButton>
      </template>
    </BPopover>
  </div>
</template>

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

const navRef = ref<Element>()
onMounted(() => {
  navRef.value = document.body.querySelector('#app > nav') ?? undefined
})
const navHeight = computed(() => navRef.value?.clientHeight)
</script>

<template>
  <div class="d-flex flex-column gap-3 align-items-start">
    <BPopover
      v-model:show="showPopover"
      :manual="isDisabled"
      title="Controlled Popover"
    >
      <template #target>
        <BButton variant="primary">{{ isDisabled ? 'Disabled' : 'Enabled' }} Popover</BButton>
      </template>
      Hello <strong>World!</strong>
    </BPopover>

    <div class="d-flex gap-2">
      <BButton @click="toggleDisabled"> {{ isDisabled ? 'Enable' : 'Disable' }} Popover </BButton>
      <BButton
        :disabled="isDisabled"
        @click="toggleShow"
      >
        Toggle Visibility
      </BButton>
    </div>
  </div>
</template>

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

const isDisabled = ref(false)
const showPopover = ref(false)

const toggleDisabled = () => {
  isDisabled.value = !isDisabled.value
}

const toggleShow = () => {
  showPopover.value = !showPopover.value
}
</script>

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <BButton
        id="popover-expose"
        variant="primary"
        >I have a popover</BButton
      >
    </div>

    <div class="p-2">
      <BButton
        class="mx-2"
        @click="show"
        >Show</BButton
      >
      <BButton
        class="mx-2"
        @click="hide"
        >Hide</BButton
      >
      <BButton
        class="mx-2"
        @click="toggle"
        >Toggle</BButton
      >

      <BPopover
        ref="myPopover"
        v-model="model"
        target="popover-expose"
        title="Popover"
      >
        Hello <strong>World!</strong>
      </BPopover>
    </div>
  </div>
</template>

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

const myPopover = useTemplateRef('myPopover')
const show = () => myPopover.value?.show()
const hide = () => myPopover.value?.hide()
const toggle = () => myPopover.value?.toggle()
const model = ref(false)
</script>

<template>
  <div class="d-flex flex-column gap-3 align-items-start">
    <BPopover
      v-model="showPopover"
      click
      title="Interactive Content"
      @show="onShow"
      @shown="onShown"
      @hidden="onHidden"
    >
      <template #target>
        <BButton
          ref="targetButton"
          variant="primary"
        >
          Interactive Popover
        </BButton>
      </template>

      <template #title>
        <div class="d-flex justify-content-between align-items-center">
          <span>Interactive Content</span>
          <BButton
            variant="link"
            class="text-decoration-none p-0 text-white"
            aria-label="Close"
            @click="onClose"
          >
            <span aria-hidden="true">&times;</span>
          </BButton>
        </div>
      </template>

      <div>
        <BFormGroup
          label="Name"
          label-for="popover-input-1"
          :state="input1State"
          class="mb-2"
          description="Enter your name"
          invalid-feedback="This field is required"
        >
          <BFormInput
            id="popover-input-1"
            ref="input1Ref"
            v-model="input1"
            :state="input1State"
            size="sm"
          />
        </BFormGroup>

        <BFormGroup
          label="Color"
          label-for="popover-input-2"
          :state="input2State"
          class="mb-2"
          description="Pick a color"
          invalid-feedback="This field is required"
        >
          <BFormSelect
            id="popover-input-2"
            v-model="input2"
            :state="input2State"
            :options="options"
            size="sm"
          />
        </BFormGroup>

        <BAlert
          v-if="input1 || input2"
          variant="info"
          class="small mb-2"
        >
          <strong>Current Values:</strong><br />
          Name: <strong>{{ input1 || '(empty)' }}</strong
          ><br />
          Color: <strong>{{ input2 || '(empty)' }}</strong>
        </BAlert>

        <div class="d-flex gap-2">
          <BButton
            size="sm"
            variant="secondary"
            @click="onClose"
            >Cancel</BButton
          >
          <BButton
            size="sm"
            variant="primary"
            @click="onOk"
            >Ok</BButton
          >
        </div>
      </div>
    </BPopover>

    <BCard
      v-if="input1Return && input2Return"
      title="Returned values:"
      class="mt-3"
    >
      <BCardText>
        Name: <strong>{{ input1Return }}</strong
        ><br />
        Color: <strong>{{ input2Return }}</strong>
      </BCardText>
    </BCard>
  </div>
</template>

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

interface SelectOption {
  text: string
  value: string
}

const showPopover = ref(false)
const input1 = ref('')
const input2 = ref<string>('')
const input1State = ref<boolean | null>(null)
const input2State = ref<boolean | null>(null)
const input1Return = ref('')
const input2Return = ref('')

const input1Ref = ref<HTMLInputElement>()
const targetButton = ref<InstanceType<typeof BButton>>()

const options: SelectOption[] = [
  {text: '- Choose 1 -', value: ''},
  {text: 'Red', value: 'Red'},
  {text: 'Green', value: 'Green'},
  {text: 'Blue', value: 'Blue'},
]

const onClose = () => {
  showPopover.value = false
}

const onOk = () => {
  input1State.value = !!input1.value
  input2State.value = !!input2.value

  if (input1.value && input2.value) {
    input1Return.value = input1.value
    input2Return.value = input2.value
    onClose()
  }
}

const onShow = () => {
  // Reset form variables
  input1.value = ''
  input2.value = ''
  input1State.value = null
  input2State.value = null
  input1Return.value = ''
  input2Return.value = ''
}

const onShown = () => {
  // Focus the first input
  nextTick(() => {
    input1Ref.value?.focus()
  })
}

const onHidden = () => {
  // Return focus to the button
  nextTick(() => {
    targetButton.value?.$el?.focus()
  })
}
</script>