@oruga-ui/oruga-next
Version:
UI components for Vue.js and CSS framework agnostic
39 lines (38 loc) • 1.43 kB
JavaScript
;
/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
const vue = require("vue");
const config = require("./config-eYBvpFOZ.cjs");
const useEventListener = require("./useEventListener-CbsUbKWy.cjs");
function useMatchMedia(mobileBreakpoint) {
var _a;
const isMobile = vue.ref(false);
const mediaQuery = vue.ref();
const vm = vue.getCurrentInstance();
if (!vm)
throw new Error(
"useMatchMedia must be called within a component setup function."
);
const props = vm.props;
const componentKey = (_a = vm.proxy) == null ? void 0 : _a.$options.configField;
if (!componentKey)
throw new Error("component must define the 'configField' option.");
let width = props.mobileBreakpoint;
if (!width) {
const defaultWidth = config.getOption(`mobileBreakpoint`, mobileBreakpoint);
width = config.getOption(`${componentKey}.mobileBreakpoint`, defaultWidth);
}
if (!width) return { isMobile };
mediaQuery.value = config.isClient ? window.matchMedia(`(max-width: ${width})`) : void 0;
if (mediaQuery.value) {
isMobile.value = mediaQuery.value.matches;
useEventListener.useEventListener(mediaQuery.value, "change", onMatchMedia);
} else {
isMobile.value = false;
}
function onMatchMedia(event) {
isMobile.value = event.matches;
}
return { isMobile };
}
exports.useMatchMedia = useMatchMedia;
//# sourceMappingURL=useMatchMedia-EgWTgaUx.cjs.map