@oruga-ui/oruga-next
Version:
UI components for Vue.js and CSS framework agnostic
40 lines (39 loc) • 1.4 kB
JavaScript
/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
import { ref, getCurrentInstance } from "vue";
import { c as getOption, i as isClient } from "./config-Dl7tu_Ly.mjs";
import { u as useEventListener } from "./useEventListener-nW3U5kAY.mjs";
function useMatchMedia(mobileBreakpoint) {
var _a;
const isMobile = ref(false);
const mediaQuery = ref();
const vm = 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 = getOption(`mobileBreakpoint`, mobileBreakpoint);
width = getOption(`${componentKey}.mobileBreakpoint`, defaultWidth);
}
if (!width) return { isMobile };
mediaQuery.value = isClient ? window.matchMedia(`(max-width: ${width})`) : void 0;
if (mediaQuery.value) {
isMobile.value = mediaQuery.value.matches;
useEventListener(mediaQuery.value, "change", onMatchMedia);
} else {
isMobile.value = false;
}
function onMatchMedia(event) {
isMobile.value = event.matches;
}
return { isMobile };
}
export {
useMatchMedia as u
};
//# sourceMappingURL=useMatchMedia-Go6cZv_b.mjs.map