@cran/vue.use
Version:
Cranberry Vue Use Utilities
30 lines (29 loc) • 1.59 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useMediaPrefersReducedMotion = exports.useMediaPrefersContrast = exports.useMediaPrefersColorScheme = exports.useMediaPointer = exports.useMediaOrientation = exports.useMediaHover = exports.useMediaEnum = void 0;
const vue_ref_1 = require("@cran/vue.ref");
const runtime_dom_1 = require("@vue/runtime-dom");
const subscribeToMediaQuery_1 = require("../utility/subscribeToMediaQuery");
function useMediaEnum(key, values) {
const container = (0, runtime_dom_1.ref)();
values.forEach(function eachValue(value) {
(0, subscribeToMediaQuery_1.subscribeToMediaQuery)(`(${key}: ${value})`, function onNext(next) {
if (next) {
container.value = value;
}
});
});
function useMedia(value) {
return null == value ? container : (0, vue_ref_1.eager)(function onChange() {
return container.value === value;
});
}
return useMedia;
}
exports.useMediaEnum = useMediaEnum;
exports.useMediaHover = useMediaEnum("hover", ["none", "hover",]);
exports.useMediaOrientation = useMediaEnum("orientation", ["portrait", "landscape",]);
exports.useMediaPointer = useMediaEnum("pointer", ["none", "fine", "coarse",]);
exports.useMediaPrefersColorScheme = useMediaEnum("prefers_color_scheme", ["light", "dark",]);
exports.useMediaPrefersContrast = useMediaEnum("prefers_contrast", ["no-preference", "more", "less",]);
exports.useMediaPrefersReducedMotion = useMediaEnum("prefers_reduced_motion", ["no-preference", "reduce",]);