ytptube/ui/app/components/Popover.vue

<template>
  <div class="popover-wrapper" ref="triggerElm" :tabindex="triggerTabIndex" @mouseenter="handleHoverEnter"
    @mouseleave="handleHoverLeave" @focusin="handleFocusIn" @focusout="handleFocusOut" @click="handleClick">
    <div class="popover-trigger">
      <slot name="trigger">
        <button type="button" class="button is-small is-rounded" aria-label="More information">
          <span class="icon is-small">
            <i class="fas fa-info-circle" aria-hidden="true" />
          </span>
        </button>
      </slot>
    </div>

    <Teleport to="body">
      <div v-if="isOpen" class="popover-portal" ref="portal">
        <div ref="popover" class="popover-card box" :class="placementClass" role="tooltip" :style="portalStyle"
          @mouseenter="handleHoverEnter" @mouseleave="handleHoverLeave">
          <button type="button" class="button is-bold is-fullwidth is-hidden-tablet" @click="closePopover">
            <span class="icon"><i class="fas fa-times" /></span>
            <span>Close</span>
          </button>

          <header v-if="hasTitleContent" class="popover-title mb-2">
            <slot name="title">
              <p class="title is-6 mb-1">{{ title }}</p>
            </slot>
          </header>

          <section v-if="hasBodyContent" class="popover-body">
            <slot>
              <p class="is-size-7 mb-0">{{ description }}</p>
            </slot>
          </section>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup lang="ts">
import type { PopoverProps } from '~/types/popover'
import { computed, nextTick, onBeforeUnmount, onMounted, ref, useSlots, watch, useTemplateRef } from 'vue'

const emit = defineEmits<{ (event: 'shown' | 'hidden'): void }>()

const props = withDefaults(defineProps<PopoverProps>(), {
  placement: 'top',
  trigger: 'hover',
  offset: 10,
  disabled: false,
  closeOnClickOutside: true,
  title: '',
  description: '',
  minWidth: 220,
  maxWidth: 340,
  maxHeight: 360,
  showDelay: 0
})

const slots = useSlots()
const isOpen = ref(false)
const triggerRef = useTemplateRef<HTMLElement>('triggerElm')
const popover = useTemplateRef<HTMLDivElement>('popover')
const portalStyle = ref<Record<string, string>>({})
const hoverTimeout = ref<number | null>(null)
const openTimeout = ref<number | null>(null)

const placementClass = computed(() => `is-${props.placement}`)
const triggerTabIndex = computed(() => props.trigger === 'hover' ? -1 : 0)

const hasTitleContent = computed(() => Boolean(props.title) || Boolean(slots.title))
const hasBodyContent = computed(() => Boolean(props.description) || Boolean(slots.default))

const clearHoverTimeout = () => {
  if (null !== hoverTimeout.value) {
    window.clearTimeout(hoverTimeout.value)
    hoverTimeout.value = null
  }
}

const clearOpenTimeout = () => {
  if (null !== openTimeout.value) {
    window.clearTimeout(openTimeout.value)
    openTimeout.value = null
  }
}

const scheduleClose = () => {
  clearHoverTimeout()
  clearOpenTimeout()
  hoverTimeout.value = window.setTimeout(() => {
    isOpen.value = false
  }, 120)
}

const openPopoverImmediate = async () => {
  if (props.disabled || isOpen.value) {
    return
  }

  isOpen.value = true
  await nextTick()
  updatePosition()
}

const openPopover = () => {
  clearOpenTimeout()
  if (props.showDelay && 0 < props.showDelay) {
    openTimeout.value = window.setTimeout(() => {
      openTimeout.value = null
      void openPopoverImmediate()
    }, props.showDelay)
    return
  }

  void openPopoverImmediate()
}

const closePopover = () => {
  if (!isOpen.value) {
    return
  }

  isOpen.value = false
}

const togglePopover = async () => {
  if (isOpen.value) {
    closePopover()
    return
  }

  openPopover()
}

const handleHoverEnter = () => {
  if ('hover' !== props.trigger || props.disabled) {
    return
  }

  clearHoverTimeout()
  openPopover()
}

const handleHoverLeave = () => {
  if ('hover' !== props.trigger) {
    return
  }

  clearOpenTimeout()
  scheduleClose()
}

const handleFocusIn = () => {
  if ('focus' !== props.trigger || props.disabled) {
    return
  }

  openPopover()
}

const handleFocusOut = () => {
  if ('focus' !== props.trigger) {
    return
  }

  clearOpenTimeout()
  scheduleClose()
}

const handleClick = (event: MouseEvent) => {
  if ('click' !== props.trigger || props.disabled) {
    return
  }

  event.stopPropagation()
  void togglePopover()
}

const handleDocumentClick = (event: MouseEvent) => {
  if (!props.closeOnClickOutside || 'click' !== props.trigger) {
    return
  }

  const target = event.target as Node | null
  const isInsideTrigger = Boolean(triggerRef.value && triggerRef.value.contains(target))
  const isInsidePopover = Boolean(popover.value && popover.value.contains(target))

  if (!isInsideTrigger && !isInsidePopover) {
    clearOpenTimeout()
    closePopover()
  }
}

const handleEscape = (event: KeyboardEvent) => {
  if ('Escape' === event.key && isOpen.value) {
    closePopover()
  }
}

const updatePosition = () => {
  if (!triggerRef.value || !popover.value) {
    return
  }

  const viewportWidth = window.innerWidth
  const viewportHeight = window.innerHeight
  const constrainedMaxWidth = Math.min(props.maxWidth, viewportWidth * 0.96)

  popover.value.style.minWidth = `${props.minWidth}px`
  popover.value.style.maxWidth = `${constrainedMaxWidth}px`
  popover.value.style.maxHeight = `${props.maxHeight}px`
  popover.value.style.overflowY = 'auto'

  const triggerRect = triggerRef.value.getBoundingClientRect()
  const popoverRect = popover.value.getBoundingClientRect()
  const offset = props.offset

  let effectivePlacement = props.placement

  if ('top' === props.placement) {
    const spaceAbove = triggerRect.top - offset
    if (spaceAbove < popoverRect.height) {
      effectivePlacement = 'bottom'
    }
  } else if ('bottom' === props.placement) {
    const spaceBelow = viewportHeight - triggerRect.bottom - offset
    if (spaceBelow < popoverRect.height) {
      effectivePlacement = 'top'
    }
  } else if ('left' === props.placement) {
    const spaceLeft = triggerRect.left - offset
    if (spaceLeft < popoverRect.width) {
      effectivePlacement = 'right'
    }
  } else if ('right' === props.placement) {
    const spaceRight = viewportWidth - triggerRect.right - offset
    if (spaceRight < popoverRect.width) {
      effectivePlacement = 'left'
    }
  }

  let top = triggerRect.bottom + offset
  let left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2

  if ('top' === effectivePlacement) {
    top = triggerRect.top - popoverRect.height - offset
  } else if ('left' === effectivePlacement) {
    top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2
    left = triggerRect.left - popoverRect.width - offset
  } else if ('right' === effectivePlacement) {
    top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2
    left = triggerRect.right + offset
  }

  const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)
  const maxLeft = viewportWidth - popoverRect.width - 8
  const maxTop = viewportHeight - popoverRect.height - 8

  const clampedTop = clamp(Math.round(top), 8, maxTop)
  const clampedLeft = clamp(Math.round(left), 8, maxLeft)

  portalStyle.value = {
    position: 'fixed',
    top: `${clampedTop}px`,
    left: `${clampedLeft}px`,
    minWidth: `${props.minWidth}px`,
    maxWidth: `${constrainedMaxWidth}px`,
    maxHeight: `${props.maxHeight}px`,
    overflowY: 'auto'
  }
}

watch(isOpen, async (value) => {
  if (value) {
    await nextTick()
    updatePosition()
    await nextTick()
    emit('shown')
    return
  }

  emit('hidden')
})

onMounted(() => {
  document.addEventListener('click', handleDocumentClick, true)
  document.addEventListener('keydown', handleEscape)
  window.addEventListener('resize', updatePosition)
  window.addEventListener('scroll', updatePosition, true)
})

onBeforeUnmount(() => {
  document.removeEventListener('click', handleDocumentClick, true)
  document.removeEventListener('keydown', handleEscape)
  window.removeEventListener('resize', updatePosition)
  window.removeEventListener('scroll', updatePosition, true)
  clearHoverTimeout()
  clearOpenTimeout()
})
</script>

<style>
.popover-wrapper {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
}

.popover-trigger {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
}

.popover-trigger>* {
  max-width: 100%;
  min-width: 0;
}

.popover-portal {
  position: fixed;
  z-index: 1050;
  inset: 0;
  pointer-events: none;
}

.popover-card {
  position: fixed;
  background-color: var(--bulma-scheme-main, #fff);
  color: var(--bulma-text, #363636);
  border: 1px solid var(--bulma-border, rgba(0, 0, 0, 0.08));
  box-shadow: var(--bulma-shadow, 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02));
  border-radius: var(--bulma-radius-large, 0.5rem);
  pointer-events: auto;
  padding: 0.9rem 1rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.popover-title {
  color: var(--bulma-text-strong, #1f1f1f);
}

.popover-card::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: inherit;
  border-left: inherit;
  border-top: inherit;
  transform: rotate(45deg);
}

.popover-card.is-top::after {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.popover-card.is-bottom::after {
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.popover-card.is-left::after {
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.popover-card.is-right::after {
  left: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
</style>