148 lines
4.6 KiB
JavaScript
148 lines
4.6 KiB
JavaScript
// Utilities
|
|
import { computed, inject, reactive, shallowRef, toRefs, watchEffect } from 'vue';
|
|
import { getCurrentInstanceName, mergeDeep, propsFactory } from "../util/index.mjs";
|
|
import { IN_BROWSER, SUPPORTS_TOUCH } from "../util/globals.mjs"; // Types
|
|
export const breakpoints = ['sm', 'md', 'lg', 'xl', 'xxl']; // no xs
|
|
|
|
export const DisplaySymbol = Symbol.for('vuetify:display');
|
|
const defaultDisplayOptions = {
|
|
mobileBreakpoint: 'lg',
|
|
thresholds: {
|
|
xs: 0,
|
|
sm: 600,
|
|
md: 960,
|
|
lg: 1280,
|
|
xl: 1920,
|
|
xxl: 2560
|
|
}
|
|
};
|
|
const parseDisplayOptions = function () {
|
|
let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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));
|
|
}
|
|
const android = match(/android/i);
|
|
const ios = match(/iphone|ipad|ipod/i);
|
|
const cordova = match(/cordova/i);
|
|
const electron = match(/electron/i);
|
|
const chrome = match(/chrome/i);
|
|
const edge = match(/edge/i);
|
|
const firefox = match(/firefox/i);
|
|
const opera = match(/opera/i);
|
|
const win = match(/win/i);
|
|
const mac = match(/mac/i);
|
|
const linux = match(/linux/i);
|
|
return {
|
|
android,
|
|
ios,
|
|
cordova,
|
|
electron,
|
|
chrome,
|
|
edge,
|
|
firefox,
|
|
opera,
|
|
win,
|
|
mac,
|
|
linux,
|
|
touch: SUPPORTS_TOUCH,
|
|
ssr: userAgent === 'ssr'
|
|
};
|
|
}
|
|
export 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();
|
|
}
|
|
|
|
// eslint-disable-next-line max-statements
|
|
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
|
|
});
|
|
}
|
|
return {
|
|
...toRefs(state),
|
|
update,
|
|
ssr: !!ssr
|
|
};
|
|
}
|
|
export const makeDisplayProps = propsFactory({
|
|
mobileBreakpoint: [Number, String]
|
|
}, 'display');
|
|
export function useDisplay() {
|
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : getCurrentInstanceName();
|
|
const display = inject(DisplaySymbol);
|
|
if (!display) throw new Error('Could not find Vuetify display injection');
|
|
const mobile = computed(() => {
|
|
if (!props.mobileBreakpoint) return display.mobile.value;
|
|
const breakpointValue = typeof props.mobileBreakpoint === 'number' ? props.mobileBreakpoint : display.thresholds.value[props.mobileBreakpoint];
|
|
return display.width.value < breakpointValue;
|
|
});
|
|
const displayClasses = computed(() => {
|
|
if (!name) return {};
|
|
return {
|
|
[`${name}--mobile`]: mobile.value
|
|
};
|
|
});
|
|
return {
|
|
...display,
|
|
displayClasses,
|
|
mobile
|
|
};
|
|
}
|
|
//# sourceMappingURL=display.mjs.map
|