@coreui/vue-pro/dist/esm/components/element-cover/CElementCover.js

UI Components Library for Vue.js

import { defineComponent, ref, onMounted, nextTick, h } from 'vue';
import { CSpinner } from '../spinner/CSpinner.js';

const CElementCover = defineComponent({
    name: 'CElementCover',
    props: {
        /**
         * Array of custom boundaries. Use to create custom cover area (instead of parent element area). Area is defined by four sides: 'top', 'bottom', 'right', 'left'. If side is not defined by any custom boundary it is equal to parent element boundary. Each custom boundary is object with keys:
         * - sides (array) - select boundaries of element to define boundaries. Sides names: 'top', 'bottom', 'right', 'left'.
         * - query (string) - query used to get element which define boundaries. Search will be done only inside parent element, by parent.querySelector(query) function. [docs]
         *
         * @type {sides: string[], query: string}[]
         */
        boundaries: Array,
        /**
         * Opacity of the cover. [docs]
         *
         * @type number
         */
        opacity: {
            type: Number,
            default: 0.4,
        },
    },
    /**
     * Location for custom content.
     *
     * @slot default
     */
    setup(props, { slots }) {
        const elementCoverRef = ref();
        const customBoundaries = ref({});
        const getCustomBoundaries = () => {
            if (!props.boundaries || elementCoverRef === null) {
                return {};
            }
            const parent = elementCoverRef.value.parentElement;
            if (!parent) {
                return {};
            }
            const parentCoords = parent.getBoundingClientRect();
            const customBoundaries = {};
            props.boundaries.forEach(({ sides, query }) => {
                const element = parent.querySelector(query);
                if (!element || !sides) {
                    return;
                }
                const coords = element.getBoundingClientRect();
                sides.forEach((side) => {
                    const sideMargin = Math.abs(coords[side] - parentCoords[side]);
                    customBoundaries[side] = `${sideMargin}px`;
                });
            });
            return customBoundaries;
        };
        const containerCoords = {
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
        };
        const coverStyles = {
            ...containerCoords,
            position: 'absolute',
            'z-index': 2,
            'background-color': `rgba(255,255,255,${props.opacity})`,
        };
        onMounted(() => {
            nextTick(() => {
                customBoundaries.value = getCustomBoundaries();
            });
        });
        return () => h('div', {
            style: { ...coverStyles, ...customBoundaries.value },
            ref: elementCoverRef,
        }, h('div', {
            style: {
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translateX(-50%) translateY(-50%)',
            },
        }, slots.default
            ? slots.default()
            : h(CSpinner, {
                variant: 'grow',
                color: 'primary',
            })));
    },
});

export { CElementCover };
//# sourceMappingURL=CElementCover.js.map