@cran/vue.use
Version:
Cranberry Vue Use Utilities
33 lines (32 loc) • 1.42 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useBreakpoints = exports.breakpoints = void 0;
const createUseFactory_1 = require("../utility/createUseFactory");
const subscribeToMediaQuery_1 = require("../utility/subscribeToMediaQuery");
const runtime_dom_1 = require("@vue/runtime-dom");
exports.breakpoints = (0, runtime_dom_1.shallowReactive)({
xs: 0, sm: 600, md: 960, lg: 1280, xl: 1920,
});
exports.useBreakpoints = (0, createUseFactory_1.createUseFactory)("useBreakpoints", function useMqFactory() {
const reactive = (0, runtime_dom_1.shallowReactive)({
xs: false, sm: false, md: false, lg: false, xl: false,
});
let revokes = [];
(0, runtime_dom_1.watchEffect)(function doChange(onInvalidate) {
onInvalidate(function doInvalidate() {
for (const revoke of revokes) {
revoke();
}
});
revokes = Object.entries(exports.breakpoints).map(function eachBreakpoint([key, from,], index, list) {
const to = list[index + 1]?.[1];
return (0, subscribeToMediaQuery_1.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;
});