@cran/vue.use/mjs/browser/useBreakpoints.js

Cranberry Vue Use Utilities

import { createUseFactory } from "../utility/createUseFactory";
import { subscribeToMediaQuery } from "../utility/subscribeToMediaQuery";
import { shallowReactive, watchEffect } from "@vue/runtime-dom";
export const breakpoints = shallowReactive({
    xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920,
});
export const useBreakpoints = createUseFactory("useBreakpoints", function useMqFactory() {
    const reactive = shallowReactive({
        xs: false, sm: false, md: false, lg: false, xl: false,
    });
    let revokes = [];
    watchEffect(function doChange(onInvalidate) {
        onInvalidate(function doInvalidate() {
            for (const revoke of revokes) {
                revoke();
            }
        });
        revokes = Object.entries(breakpoints).map(function eachBreakpoint([key, from,], index, list) {
            const to = list[index + 1]?.[1];
            return subscribeToMediaQuery([
                from ? `(min-width: ${from}px)` : false,
                to ? `(max-width: ${to - 1}px)` : false,
            ].filter(Boolean).join(" and "), function onNext(next) {
                reactive[key] = next;
            });
        });
    });
    return reactive;
});