@coreui/vue/dist/esm/directives/v-c-popover.js

UI Components Library for Vue.js

import { createPopper } from '@popperjs/core';
import 'vue';
import { useUniqueId } from '../composables/useUniqueId.js';

const createPopoverElement = (id, header, content) => {
    const popover = document.createElement('div');
    popover.id = id;
    popover.classList.add('popover', 'bs-popover-auto', 'fade');
    popover.setAttribute('role', 'popover');
    const arrow = document.createElement('div');
    arrow.classList.add('popover-arrow');
    arrow.dataset.popperArrow = '';
    const headerElement = document.createElement('div');
    headerElement.classList.add('popover-header');
    headerElement.textContent = header;
    const body = document.createElement('div');
    body.classList.add('popover-body');
    body.textContent = content;
    popover.append(arrow, headerElement, body);
    return popover;
};
const addPopoverElement = (el, popover, popperOptions, uID) => {
    el.setAttribute('aria-describedby', uID);
    document.body.appendChild(popover);
    createPopper(el, popover, popperOptions);
    setTimeout(() => {
        popover.classList.add('show');
    }, 1);
};
const removePopoverElement = (el, popover) => {
    el.removeAttribute('aria-describedby');
    popover.classList.remove('show');
    setTimeout(() => {
        popover.remove();
    }, 300);
};
const togglePopoverElement = (el, popover, popperOptions, uID) => {
    const popperElement = document.getElementById(popover.id);
    if (popperElement && popperElement.classList.contains('show')) {
        removePopoverElement(el, popover);
        return;
    }
    addPopoverElement(el, popover, popperOptions, uID);
};
var vCPopover = {
    name: 'c-popover',
    uid: '',
    mounted(el, binding) {
        const { getUID } = useUniqueId('popover');
        const value = binding.value;
        const content = typeof value === 'string' ? value : (value.content ?? '');
        const header = value.header ?? '';
        const trigger = value.trigger ?? 'click';
        // Popper Config
        const offset = value.offset ?? [0, 8];
        const placement = value.placement ?? 'top';
        const popperOptions = {
            placement: placement,
            modifiers: [
                {
                    name: 'offset',
                    options: {
                        offset: offset,
                    },
                },
            ],
        };
        const uID = getUID();
        binding.arg = uID;
        const popover = createPopoverElement(uID, header, content);
        if (trigger.includes('click')) {
            el.addEventListener('click', () => {
                togglePopoverElement(el, popover, popperOptions, uID);
            });
        }
        if (trigger.includes('focus')) {
            el.addEventListener('focus', () => {
                addPopoverElement(el, popover, popperOptions, uID);
            });
            el.addEventListener('blur', () => {
                removePopoverElement(el, popover);
            });
        }
        if (trigger.includes('hover')) {
            el.addEventListener('mouseenter', () => {
                addPopoverElement(el, popover, popperOptions, uID);
            });
            el.addEventListener('mouseleave', () => {
                removePopoverElement(el, popover);
            });
        }
    },
    unmounted(_el, binding) {
        const popover = binding.arg && document.getElementById(binding.arg);
        if (popover) {
            popover.remove();
        }
    },
};

export { vCPopover as default };
//# sourceMappingURL=v-c-popover.js.map