@coreui/vue/dist/cjs/directives/v-c-tooltip.js

UI Components Library for Vue.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var core = require('@popperjs/core');
require('vue');
var useUniqueId = require('../composables/useUniqueId.js');

const createTooltipElement = (id, content) => {
    const tooltip = document.createElement('div');
    tooltip.id = id;
    tooltip.classList.add('tooltip', 'bs-tooltip-auto', 'fade');
    tooltip.setAttribute('role', 'tooltip');
    const arrow = document.createElement('div');
    arrow.classList.add('tooltip-arrow');
    arrow.dataset.popperArrow = '';
    const inner = document.createElement('div');
    inner.classList.add('tooltip-inner');
    inner.textContent = content;
    tooltip.append(arrow, inner);
    return tooltip;
};
const addTooltipElement = (el, tooltip, popperOptions, uID) => {
    el.setAttribute('aria-describedby', uID);
    document.body.appendChild(tooltip);
    core.createPopper(el, tooltip, popperOptions);
    setTimeout(() => {
        tooltip.classList.add('show');
    }, 1);
};
const removeTooltipElement = (el, tooltip) => {
    el.removeAttribute('aria-describedby');
    tooltip.classList.remove('show');
    setTimeout(() => {
        tooltip.remove();
    }, 300);
};
const toggleTooltipElement = (el, tooltip, popperOptions, uID) => {
    const popperElement = document.getElementById(tooltip.id);
    if (popperElement && popperElement.classList.contains('show')) {
        removeTooltipElement(el, tooltip);
        return;
    }
    addTooltipElement(el, tooltip, popperOptions, uID);
};
var vCTooltip = {
    name: 'c-tooltip',
    mounted(el, binding) {
        const { getUID } = useUniqueId.useUniqueId('tooltip');
        const value = binding.value;
        const content = typeof value === 'string' ? value : (value.content ?? '');
        const trigger = value.trigger ?? 'hover';
        // Popper Config
        const offset = value.offset ?? [0, 6];
        const placement = value.placement ?? 'top';
        const popperOptions = {
            placement: placement,
            modifiers: [
                {
                    name: 'offset',
                    options: {
                        offset: offset,
                    },
                },
            ],
        };
        const uID = getUID();
        binding.arg = uID;
        const tooltip = createTooltipElement(uID, content);
        if (trigger.includes('click')) {
            el.addEventListener('click', () => {
                toggleTooltipElement(el, tooltip, popperOptions, uID);
            });
        }
        if (trigger.includes('focus')) {
            el.addEventListener('focus', () => {
                addTooltipElement(el, tooltip, popperOptions, uID);
            });
            el.addEventListener('blur', () => {
                removeTooltipElement(el, tooltip);
            });
        }
        if (trigger.includes('hover')) {
            el.addEventListener('mouseenter', () => {
                addTooltipElement(el, tooltip, popperOptions, uID);
            });
            el.addEventListener('mouseleave', () => {
                removeTooltipElement(el, tooltip);
            });
        }
    },
    beforeUnmount(_el, binding) {
        const tooltip = binding.arg && document.getElementById(binding.arg);
        if (tooltip) {
            tooltip.remove();
        }
    },
};

exports.default = vCTooltip;
//# sourceMappingURL=v-c-tooltip.js.map