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

Cranberry Vue Use Utilities

import { eager } from "@cran/vue.ref";
import { ref } from "@vue/runtime-dom";
import { subscribeToMediaQuery } from "../utility/subscribeToMediaQuery";
export function useMediaEnum(key, values) {
    const container = ref();
    values.forEach(function eachValue(value) {
        subscribeToMediaQuery(`(${key}: ${value})`, function onNext(next) {
            if (next) {
                container.value = value;
            }
        });
    });
    function useMedia(value) {
        return null == value ? container : eager(function onChange() {
            return container.value === value;
        });
    }
    return useMedia;
}
export const useMediaHover = useMediaEnum("hover", ["none", "hover",]);
export const useMediaOrientation = useMediaEnum("orientation", ["portrait", "landscape",]);
export const useMediaPointer = useMediaEnum("pointer", ["none", "fine", "coarse",]);
export const useMediaPrefersColorScheme = useMediaEnum("prefers_color_scheme", ["light", "dark",]);
export const useMediaPrefersContrast = useMediaEnum("prefers_contrast", ["no-preference", "more", "less",]);
export const useMediaPrefersReducedMotion = useMediaEnum("prefers_reduced_motion", ["no-preference", "reduce",]);