Всплывающее окно

<div class="text-center my-3">
  <b-button v-b-popover.hover.top="'Я содержание директивы popover!'" title="Заголовок всплывающего окна">
    Наведите на меня
  </b-button>

  <b-button id="popover-target-1">
    Наведите на меня
  </b-button>
  <b-popover target="popover-target-1" triggers="hover" placement="top">
    <template #title>Заголовок всплывающего окна</template>
    Я <b>компонентный</b> поповер контент!
  </b-popover>
</div>

<!-- b-popover.vue -->

<b-button
  href="#"
  tabindex="0"
  v-b-popover.focus="'Контент всплывающего окна'"
  title="Заголовок всплывающего окна"
>
  Кнопка ссылки с директивой поповера
</b-button>

<b-button id="link-button" href="#" tabindex="0">
  Кнопка ссылки с компонентом поповера
</b-button>
<b-popover target="link-button" title="Заголовок всплывающего окна" triggers="focus">
  Контент всплывающего окна
</b-popover>

<template>
  <b-container fluid>
    <h5 class="my-3">Размещение</h5>
    <b-row>
      <b-col
        v-for="placement in placements"
        :key="placement"
        md="4"
        class="py-4 text-center"
      >
        <b-button :id="`popover-1-${placement}`" variant="primary"></b-button>
        <b-popover
          :target="`popover-1-${placement}`"
          :placement="placement"
          title="Поповер!"
          triggers="hover focus"
          :content="`Размещение ${placement}`"
        ></b-popover>
      </b-col>
    </b-row>

    <h5 class="my-3">Контент через свойства или слоты</h5>
    <b-row>
      <b-col md="6" class="py-4 text-center">
        <b-button id="popover-2" variant="primary">Использование свойств</b-button>
        <b-popover
          target="popover-2"
          title="Примеры свойства"
          triggers="hover focus"
          content="Встраивание контента с использованием свойств очень просто"
        ></b-popover>
      </b-col>

      <b-col md="6" class="py-4 text-center">
        <b-button id="popover-3" variant="primary">Использование слотов</b-button>
        <b-popover target="popover-3" triggers="hover focus">
          <template #title>Контент через слоты</template>
          Встраивание контента <span class="text-danger">с использованием слотов</span> дает вам
          <em>более высокий <strong>контроль</strong></em> и базовую поддержку HTML.
        </b-popover>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
  export default {
    data() {
      return {
        placements: [
          'topright',
          'top',
          'topleft',
          'bottomright',
          'bottom',
          'bottomleft',
          'righttop',
          'right',
          'lefttop',
          'rightbottom',
          'left',
          'leftbottom'
        ]
      }
    }
  }
</script>

<!-- b-popover-placements.vue -->

<div class="text-center">
  <b-button id="popover-button-variant" href="#" tabindex="0">Кнопка</b-button>
  <b-popover target="popover-button-variant" variant="danger" triggers="focus">
    <template #title>Опасность!</template>
    Опасный вариант всплывающего окна
  </b-popover>
</div>

<!-- b-popover-variant.vue -->

<div class="text-center">
  <b-button id="my-button">Кнопка</b-button>
  <b-popover target="my-button" custom-class="my-popover-class">
    <template #title>Заголовок всплывающего окна</template>
    Контент всплывающего окна
  </b-popover>
</div>

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-button id="popover-button-sync" variant="primary">У меня есть поповер</b-button>
    </div>

    <div class="p-2">
      <b-button class="px-1" @click="show = !show">Переключить всплывающее окно</b-button>

      <b-popover :show.sync="show" target="popover-button-sync" title="Поповер">
        Привет <strong>Мир!</strong>
      </b-popover>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      }
    }
  }
</script>

<!-- b-popover-show-sync.vue -->

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-button id="popover-button-event" variant="primary">У меня есть поповер</b-button>
    </div>

    <div class="p-2">
      <b-button class="px-1" @click="onOpen">Открыть</b-button>
      <b-button class="px-1" @click="onClose">Закрыть</b-button>
    </div>

    <b-popover ref="popover" target="popover-button-event" title="Поповер">
      Привет <strong>Мир!</strong>
    </b-popover>
  </div>
</template>

<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.popover.$emit('open')
      },
      onClose() {
        this.$refs.popover.$emit('close')
      }
    }
  }
</script>

<!-- b-popover-show-event.vue -->

<div class="text-center">
  <b-button id="popover-button-open" variant="primary">Кнопка</b-button>

  <b-popover show target="popover-button-open" title="Поповер">
    Я начинаю <strong>открывать</strong>
  </b-popover>
</div>

<!-- b-popover-show-open.vue -->

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-button id="popover-manual-1" variant="primary" ref="button">Ненадежный</b-button>

      <b-popover target="popover-manual-1" :show.sync="pop1" triggers="click">
        Иногда я могу быть упрямым.
      </b-popover>
    </div>

    <div class="p-2">
      <b-button id="popover-manual-2" variant="primary" ref="button" @click="pop2 = !pop2">
        Комфортное онемение
      </b-button>

      <b-popover target="popover-manual-2" :show.sync="pop2" triggers="">
        Я верю, что это работает, хорошо.
      </b-popover>
    </div>

    <div class="p-2">
      <b-button class="px-1" @click="popOpen">Открыть</b-button>
      <b-button class="px-1" @click="popClose">Закрыть</b-button>
      <b-button class="px-1" @click="popToggle">Переключить</b-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pop1: false,
        pop2: false
      }
    },
    methods: {
      popOpen() {
        this.pop1 = this.pop2 = true
      },
      popClose() {
        this.pop1 = this.pop2 = false
      },
      popToggle() {
        this.pop1 = !this.pop1
        this.pop2 = !this.pop2
      }
    }
  }
</script>

<!-- b-popover-advanced-caution.vue -->

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-button id="popover-button-disable" variant="primary">У меня есть поповер</b-button>
    </div>

    <div class="p-2">
      <b-button @click="disabled = !disabled">
        Disable Поповер по свойству
      </b-button>
      <b-button @click="disableByRef">
        Disable Поповер по событию $ref
      </b-button>

      <b-popover
        :disabled.sync="disabled"
        target="popover-button-disable"
        title="Поповер"
        ref="popover"
      >
        Привет <strong>Мир!</strong>
      </b-popover>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        disabled: false
      }
    },
    methods: {
      disableByRef() {
        if (this.disabled) {
          this.$refs.popover.$emit('enable')
        } else {
          this.$refs.popover.$emit('disable')
        }
      }
    }
  }
</script>

<!-- b-popover-disable.vue -->

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-button id="popover-button-disable-event" variant="primary">У меня есть поповер</b-button>
    </div>

    <div class="p-2">
      <b-button class="px-1" @click="onEnable">Включить</b-button>
      <b-button class="px-1" @click="onDisable">Отключить</b-button>
    </div>

    <b-popover ref="popover" target="popover-button-disable-event" title="Поповер">
      Привет <strong>Мир!</strong>
    </b-popover>
  </div>
</template>

<script>
  export default {
    methods: {
      onEnable() {
        this.$refs.popover.$emit('enable')
      },
      onDisable() {
        this.$refs.popover.$emit('disable')
      }
    }
  }
</script>

<!-- b-popover-disabled-event.vue -->

<div>
  <b-container fluid>
    <b-row class="text-center">
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.top="'Popover!'" title="Заголовок" variant="primary">Top</b-button>
      </b-col>

      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.right="'Popover!'" title="Заголовок" variant="primary">Right</b-button>
      </b-col>

      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.left="'Popover!'" title="Заголовок" variant="primary">Left</b-button>
      </b-col>

      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.bottom="'Popover!'" title="Заголовок" variant="primary">Bottom</b-button>
      </b-col>
    </b-row>
  </b-container>
</div>

<!-- b-popover-directive-placement.vue -->

<template>
  <div id="my-container">
    <div class="my-3">
      <!-- Our triggering (target) element -->
      <b-button id="popover-reactive-1" variant="primary" ref="button">
        Реактивный контент с использованием слотов
      </b-button>
    </div>

    <!-- Output from the popover interaction -->
    <b-card title="Returned values:" v-if="input1Return && input2Return">
      <p class="card-text" style="max-width: 20rem;">
        Название: <strong></strong><br>
        Цвет: <strong></strong>
      </p>
    </b-card>

    <!-- Our popover title and content render container -->
    <!-- We use placement 'auto' so popover fits in the best spot on viewport -->
    <!-- We specify the same container as the trigger button, so that popover is close to button -->
    <b-popover
      target="popover-reactive-1"
      triggers="click"
      :show.sync="popoverShow"
      placement="auto"
      container="my-container"
      ref="popover"
      @show="onShow"
      @shown="onShown"
      @hidden="onHidden"
    >
      <template #title>
        <b-button @click="onClose" class="close" aria-label="Close">
          <span class="d-inline-block" aria-hidden="true">&times;</span>
        </b-button>
        Интерактивный контент
      </template>

      <div>
        <b-form-group
          label="Name"
          label-for="popover-input-1"
          label-cols="3"
          :state="input1state"
          class="mb-1"
          description="Enter your name"
          invalid-feedback="This field is required"
        >
          <b-form-input
            ref="input1"
            id="popover-input-1"
            v-model="input1"
            :state="input1state"
            size="sm"
          ></b-form-input>
        </b-form-group>

        <b-form-group
          label="Color"
          label-for="popover-input-2"
          label-cols="3"
          :state="input2state"
          class="mb-1"
          description="Pick a color"
          invalid-feedback="This field is required"
        >
          <b-form-select
            id="popover-input-2"
            v-model="input2"
            :state="input2state"
            :options="options"
            size="sm"
          ></b-form-select>
        </b-form-group>

        <b-alert show class="small">
          <strong>Текущие значения:</strong><br>
          Название: <strong></strong><br>
          Цвет: <strong></strong>
        </b-alert>

        <b-button @click="onClose" size="sm" variant="danger">Отменить</b-button>
        <b-button @click="onOk" size="sm" variant="primary">Хорошо</b-button>
      </div>
    </b-popover>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        input1: '',
        input1state: null,
        input2: '',
        input2state: null,
        options: [{ text: '- Choose 1 -', value: '' }, 'Red', 'Green', 'Blue'],
        input1Return: '',
        input2Return: '',
        popoverShow: false
      }
    },
    watch: {
      input1(val) {
        if (val) {
          this.input1state = true
        }
      },
      input2(val) {
        if (val) {
          this.input2state = true
        }
      }
    },
    methods: {
      onClose() {
        this.popoverShow = false
      },
      onOk() {
        if (!this.input1) {
          this.input1state = false
        }
        if (!this.input2) {
          this.input2state = false
        }
        if (this.input1 && this.input2) {
          this.onClose()
          // Return our popover form results
          this.input1Return = this.input1
          this.input2Return = this.input2
        }
      },
      onShow() {
        // This is called just before the popover is shown
        // Reset our popover form variables
        this.input1 = ''
        this.input2 = ''
        this.input1state = null
        this.input2state = null
        this.input1Return = ''
        this.input2Return = ''
      },
      onShown() {
        // Called just after the popover has been shown
        // Transfer focus to the first input
        this.focusRef(this.$refs.input1)
      },
      onHidden() {
        // Called just after the popover has finished hiding
        // Bring focus back to the button
        this.focusRef(this.$refs.button)
      },
      focusRef(ref) {
        // Some references may be a component, functional component, or plain element
        // This handles that check before focusing, assuming a `focus()` method exists
        // We do this in a double `$nextTick()` to ensure components have
        // updated & popover positioned first
        this.$nextTick(() => {
          this.$nextTick(() => {
            ;(ref.$el || ref).focus()
          })
        })
      }
    }
  }
</script>

<!-- b-popover-advanced.vue -->

this.$root.$emit('bv::hide::popover')

this.$root.$emit('bv::hide::popover', 'my-trigger-button-id')

this.$root.$emit('bv::show::popover', 'my-trigger-button-id')

this.$root.$emit('bv::disable::popover')

this.$root.$emit('bv::disable::popover', 'my-trigger-button-id')

this.$root.$emit('bv::enable::popover', 'my-trigger-button-id')

export default {
  mounted() {
    this.$root.$on('bv::popover::show', bvEventObj => {
      console.log('bvEventObj:', bvEventObj)
    })
  }
}