vuetify
Version:
Vue Material Component Framework
1 lines • 10.5 kB
Source Map (JSON)
{"version":3,"file":"display.mjs","names":["inject","reactive","ref","toRefs","watchEffect","mergeDeep","IN_BROWSER","SUPPORTS_TOUCH","DisplaySymbol","Symbol","for","defaultDisplayOptions","mobileBreakpoint","thresholds","xs","sm","md","lg","xl","xxl","parseDisplayOptions","options","getClientWidth","isHydrate","window","innerWidth","getClientHeight","innerHeight","getPlatform","userAgent","navigator","match","regexp","Boolean","android","ios","cordova","electron","chrome","edge","firefox","opera","win","mac","linux","ssr","touch","createDisplay","height","platform","state","width","update","value","name","breakpointValue","mobile","smAndUp","mdAndUp","lgAndUp","xlAndUp","smAndDown","mdAndDown","lgAndDown","xlAndDown","addEventListener","passive","useDisplay","display","Error"],"sources":["../../src/composables/display.ts"],"sourcesContent":["// Utilities\nimport { inject, reactive, ref, toRefs, watchEffect } from 'vue'\nimport { mergeDeep } from '@/util'\n\n// Globals\nimport { IN_BROWSER, SUPPORTS_TOUCH } from '@/util/globals'\n\n// Types\nimport type { InjectionKey, Ref } from 'vue'\n\nexport type DisplayBreakpoint = keyof DisplayThresholds\n\nexport interface DisplayThresholds {\n xs: number\n sm: number\n md: number\n lg: number\n xl: number\n xxl: number\n}\n\nexport interface DisplayOptions {\n mobileBreakpoint?: number | DisplayBreakpoint\n thresholds?: Partial<DisplayThresholds>\n}\n\nexport interface InternalDisplayOptions {\n mobileBreakpoint: number | DisplayBreakpoint\n thresholds: DisplayThresholds\n}\n\nexport interface DisplayPlatform {\n android: boolean\n ios: boolean\n cordova: boolean\n electron: boolean\n chrome: boolean\n edge: boolean\n firefox: boolean\n opera: boolean\n win: boolean\n mac: boolean\n linux: boolean\n touch: boolean\n ssr: boolean\n}\n\nexport interface DisplayInstance {\n xs: Ref<boolean>\n sm: Ref<boolean>\n md: Ref<boolean>\n lg: Ref<boolean>\n xl: Ref<boolean>\n xxl: Ref<boolean>\n smAndUp: Ref<boolean>\n mdAndUp: Ref<boolean>\n lgAndUp: Ref<boolean>\n xlAndUp: Ref<boolean>\n smAndDown: Ref<boolean>\n mdAndDown: Ref<boolean>\n lgAndDown: Ref<boolean>\n xlAndDown: Ref<boolean>\n name: Ref<DisplayBreakpoint>\n height: Ref<number>\n width: Ref<number>\n mobile: Ref<boolean>\n mobileBreakpoint: Ref<number | DisplayBreakpoint>\n platform: Ref<DisplayPlatform>\n thresholds: Ref<DisplayThresholds>\n\n /** @internal */\n ssr: boolean\n\n update (): void\n}\n\nexport const DisplaySymbol: InjectionKey<DisplayInstance> = Symbol.for('vuetify:display')\n\nconst defaultDisplayOptions: DisplayOptions = {\n mobileBreakpoint: 'lg',\n thresholds: {\n xs: 0,\n sm: 600,\n md: 960,\n lg: 1280,\n xl: 1920,\n xxl: 2560,\n },\n}\n\nconst parseDisplayOptions = (options: DisplayOptions = defaultDisplayOptions) => {\n return mergeDeep(defaultDisplayOptions, options) as InternalDisplayOptions\n}\n\nfunction getClientWidth (isHydrate?: boolean) {\n return IN_BROWSER && !isHydrate\n ? window.innerWidth\n : 0\n}\n\nfunction getClientHeight (isHydrate?: boolean) {\n return IN_BROWSER && !isHydrate\n ? window.innerHeight\n : 0\n}\n\nfunction getPlatform (): DisplayPlatform {\n const userAgent = IN_BROWSER ? window.navigator.userAgent : 'ssr'\n\n function match (regexp: RegExp) {\n return Boolean(userAgent.match(regexp))\n }\n\n const android = match(/android/i)\n const ios = match(/iphone|ipad|ipod/i)\n const cordova = match(/cordova/i)\n const electron = match(/electron/i)\n const chrome = match(/chrome/i)\n const edge = match(/edge/i)\n const firefox = match(/firefox/i)\n const opera = match(/opera/i)\n const win = match(/win/i)\n const mac = match(/mac/i)\n const linux = match(/linux/i)\n const ssr = match(/ssr/i)\n\n return {\n android,\n ios,\n cordova,\n electron,\n chrome,\n edge,\n firefox,\n opera,\n win,\n mac,\n linux,\n touch: SUPPORTS_TOUCH,\n ssr,\n }\n}\n\nexport function createDisplay (options?: DisplayOptions, ssr?: boolean): DisplayInstance {\n const { thresholds, mobileBreakpoint } = parseDisplayOptions(options)\n\n const height = ref(getClientHeight(ssr))\n const platform = getPlatform()\n const state = reactive({} as DisplayInstance)\n const width = ref(getClientWidth(ssr))\n\n function update () {\n height.value = getClientHeight()\n width.value = getClientWidth()\n }\n\n // eslint-disable-next-line max-statements\n watchEffect(() => {\n const xs = width.value < thresholds.sm\n const sm = width.value < thresholds.md && !xs\n const md = width.value < thresholds.lg && !(sm || xs)\n const lg = width.value < thresholds.xl && !(md || sm || xs)\n const xl = width.value < thresholds.xxl && !(lg || md || sm || xs)\n const xxl = width.value >= thresholds.xxl\n const name =\n xs ? 'xs'\n : sm ? 'sm'\n : md ? 'md'\n : lg ? 'lg'\n : xl ? 'xl'\n : 'xxl'\n const breakpointValue = typeof mobileBreakpoint === 'number' ? mobileBreakpoint : thresholds[mobileBreakpoint]\n const mobile = !platform.ssr\n ? width.value < breakpointValue\n : platform.android || platform.ios || platform.opera\n\n state.xs = xs\n state.sm = sm\n state.md = md\n state.lg = lg\n state.xl = xl\n state.xxl = xxl\n state.smAndUp = !xs\n state.mdAndUp = !(xs || sm)\n state.lgAndUp = !(xs || sm || md)\n state.xlAndUp = !(xs || sm || md || lg)\n state.smAndDown = !(md || lg || xl || xxl)\n state.mdAndDown = !(lg || xl || xxl)\n state.lgAndDown = !(xl || xxl)\n state.xlAndDown = !xxl\n state.name = name\n state.height = height.value\n state.width = width.value\n state.mobile = mobile\n state.mobileBreakpoint = mobileBreakpoint\n state.platform = platform\n state.thresholds = thresholds\n })\n\n if (IN_BROWSER) {\n window.addEventListener('resize', update, { passive: true })\n }\n\n return { ...toRefs(state), update, ssr: !!ssr }\n}\n\nexport function useDisplay () {\n const display = inject(DisplaySymbol)\n\n if (!display) throw new Error('Could not find Vuetify display injection')\n\n return display\n}\n"],"mappings":"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"}