@stackoverfloweth/vue-compositions/dist/types/src/useChildrenAreWrapped/useChildrenAreWrapped.js

A collection of reusable vue compositions.

import { computed, ref } from 'vue';
import { useComputedStyle } from '../useComputedStyle/useComputedStyle';
import { useElementRect } from '../useElementRect/useElementRect';
import { getWindowComputedStyle } from '../utilities/window';
export function useChildrenAreWrapped(children, container) {
    const childrenRef = ref(children);
    const containerRef = ref(container);
    const { width } = useElementRect(containerRef);
    const containerStyles = useComputedStyle(containerRef);
    return computed(() => {
        const paddingLeft = getPxInt(containerStyles.value?.paddingLeft);
        const paddingRight = getPxInt(containerStyles.value?.paddingRight);
        const containerGap = getPxInt(containerStyles.value?.columnGap);
        const containerWidth = width.value - paddingLeft - paddingRight;
        const childrenWidth = getChildrenWidth(childrenRef.value, containerGap);
        return childrenWidth > containerWidth;
    });
}
function getPxInt(style) {
    if (!style) {
        return 0;
    }
    return parseInt(style);
}
function getChildrenWidth(elements, gap) {
    return elements
        .map(getWindowComputedStyle)
        .reduce((sum, style) => {
        if (style) {
            sum += parseInt(style.width);
            sum += parseInt(style.marginLeft) + parseInt(style.marginRight);
            if (style.boxSizing === 'border-box') {
                sum += parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth);
            }
        }
        return sum + gap;
    }, 0);
}
//# sourceMappingURL=useChildrenAreWrapped.js.map