141 lines
4.4 KiB
JavaScript
141 lines
4.4 KiB
JavaScript
import { $n as toRefs, Qn as toRef, U as computed, Vn as onScopeDispose, Wn as reactive, Yn as shallowRef, _n as watchEffect, xt as inject } from "./vue.runtime.esm-bundler-BvoXUmaf.js";
|
|
import { Q as IN_BROWSER, V as mergeDeep, c as getCurrentInstanceName, l as propsFactory, nt as SUPPORTS_TOUCH } from "./defineComponent-DB6xIcDy.js";
|
|
//#region node_modules/vuetify/lib/composables/display.js
|
|
var breakpoints = [
|
|
"sm",
|
|
"md",
|
|
"lg",
|
|
"xl",
|
|
"xxl"
|
|
];
|
|
var DisplaySymbol = Symbol.for("vuetify:display");
|
|
var defaultDisplayOptions = {
|
|
mobileBreakpoint: "lg",
|
|
thresholds: {
|
|
xs: 0,
|
|
sm: 600,
|
|
md: 840,
|
|
lg: 1145,
|
|
xl: 1545,
|
|
xxl: 2138
|
|
}
|
|
};
|
|
var parseDisplayOptions = (options = defaultDisplayOptions) => {
|
|
return mergeDeep(defaultDisplayOptions, options);
|
|
};
|
|
function getClientWidth(ssr) {
|
|
return IN_BROWSER && !ssr ? window.innerWidth : typeof ssr === "object" && ssr.clientWidth || 0;
|
|
}
|
|
function getClientHeight(ssr) {
|
|
return IN_BROWSER && !ssr ? window.innerHeight : typeof ssr === "object" && ssr.clientHeight || 0;
|
|
}
|
|
function getPlatform(ssr) {
|
|
const userAgent = IN_BROWSER && !ssr ? window.navigator.userAgent : "ssr";
|
|
function match(regexp) {
|
|
return Boolean(userAgent.match(regexp));
|
|
}
|
|
return {
|
|
android: match(/android/i),
|
|
ios: match(/iphone|ipad|ipod/i),
|
|
cordova: match(/cordova/i),
|
|
electron: match(/electron/i),
|
|
chrome: match(/chrome/i),
|
|
edge: match(/edge/i),
|
|
firefox: match(/firefox/i),
|
|
opera: match(/opera/i),
|
|
win: match(/win/i),
|
|
mac: match(/mac/i),
|
|
linux: match(/linux/i),
|
|
touch: SUPPORTS_TOUCH,
|
|
ssr: userAgent === "ssr"
|
|
};
|
|
}
|
|
function createDisplay(options, ssr) {
|
|
const { thresholds, mobileBreakpoint } = parseDisplayOptions(options);
|
|
const height = shallowRef(getClientHeight(ssr));
|
|
const platform = shallowRef(getPlatform(ssr));
|
|
const state = reactive({});
|
|
const width = shallowRef(getClientWidth(ssr));
|
|
function updateSize() {
|
|
height.value = getClientHeight();
|
|
width.value = getClientWidth();
|
|
}
|
|
function update() {
|
|
updateSize();
|
|
platform.value = getPlatform();
|
|
}
|
|
watchEffect(() => {
|
|
const xs = width.value < thresholds.sm;
|
|
const sm = width.value < thresholds.md && !xs;
|
|
const md = width.value < thresholds.lg && !(sm || xs);
|
|
const lg = width.value < thresholds.xl && !(md || sm || xs);
|
|
const xl = width.value < thresholds.xxl && !(lg || md || sm || xs);
|
|
const xxl = width.value >= thresholds.xxl;
|
|
const name = xs ? "xs" : sm ? "sm" : md ? "md" : lg ? "lg" : xl ? "xl" : "xxl";
|
|
const breakpointValue = typeof mobileBreakpoint === "number" ? mobileBreakpoint : thresholds[mobileBreakpoint];
|
|
const mobile = width.value < breakpointValue;
|
|
state.xs = xs;
|
|
state.sm = sm;
|
|
state.md = md;
|
|
state.lg = lg;
|
|
state.xl = xl;
|
|
state.xxl = xxl;
|
|
state.smAndUp = !xs;
|
|
state.mdAndUp = !(xs || sm);
|
|
state.lgAndUp = !(xs || sm || md);
|
|
state.xlAndUp = !(xs || sm || md || lg);
|
|
state.smAndDown = !(md || lg || xl || xxl);
|
|
state.mdAndDown = !(lg || xl || xxl);
|
|
state.lgAndDown = !(xl || xxl);
|
|
state.xlAndDown = !xxl;
|
|
state.name = name;
|
|
state.height = height.value;
|
|
state.width = width.value;
|
|
state.mobile = mobile;
|
|
state.mobileBreakpoint = mobileBreakpoint;
|
|
state.platform = platform.value;
|
|
state.thresholds = thresholds;
|
|
});
|
|
if (IN_BROWSER) {
|
|
window.addEventListener("resize", updateSize, { passive: true });
|
|
onScopeDispose(() => {
|
|
window.removeEventListener("resize", updateSize);
|
|
}, true);
|
|
}
|
|
return {
|
|
...toRefs(state),
|
|
update,
|
|
ssr: !!ssr
|
|
};
|
|
}
|
|
var makeDisplayProps = propsFactory({
|
|
mobile: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
mobileBreakpoint: [Number, String]
|
|
}, "display");
|
|
function useDisplay(props = { mobile: null }, name = getCurrentInstanceName()) {
|
|
const display = inject(DisplaySymbol);
|
|
if (!display) throw new Error("Could not find Vuetify display injection");
|
|
const mobile = computed(() => {
|
|
if (props.mobile) return true;
|
|
else if (typeof props.mobileBreakpoint === "number") return display.width.value < props.mobileBreakpoint;
|
|
else if (props.mobileBreakpoint) return display.width.value < display.thresholds.value[props.mobileBreakpoint];
|
|
else if (props.mobile === null) return display.mobile.value;
|
|
else return false;
|
|
});
|
|
const displayClasses = toRef(() => {
|
|
if (!name) return {};
|
|
return { [`${name}--mobile`]: mobile.value };
|
|
});
|
|
return {
|
|
...display,
|
|
displayClasses,
|
|
mobile
|
|
};
|
|
}
|
|
//#endregion
|
|
export { useDisplay as a, makeDisplayProps as i, breakpoints as n, createDisplay as r, DisplaySymbol as t };
|
|
|
|
//# sourceMappingURL=display-DKaCj-_K.js.map
|