@nextcloud/vue/dist/composables/useIsMobile/index.mjs.map

Nextcloud vue components

{"version":3,"file":"index.mjs","sources":["../../../src/composables/useIsMobile/index.ts"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { Ref } from 'vue'\n\nimport { readonly, ref } from 'vue'\n\n/** The minimal width of the viewport for a desktop screen */\nexport const MOBILE_BREAKPOINT = 1024\n\n/** The minimal width of the viewport for a small mobile screen, a half of the minimal desktop */\nexport const MOBILE_SMALL_BREAKPOINT = MOBILE_BREAKPOINT / 2\n\nconst isLessThanBreakpoint = (breakpoint) => document.documentElement.clientWidth < breakpoint\n\n// Store the state of the viewport size in a module-scope to reuse between module's users\nconst isMobile = ref(isLessThanBreakpoint(MOBILE_BREAKPOINT))\nconst isSmallMobile = ref(isLessThanBreakpoint(MOBILE_SMALL_BREAKPOINT))\n\nwindow.addEventListener('resize', () => {\n\tisMobile.value = isLessThanBreakpoint(MOBILE_BREAKPOINT)\n\tisSmallMobile.value = isLessThanBreakpoint(MOBILE_SMALL_BREAKPOINT)\n}, { passive: true })\n\n/**\n * Use global isMobile state\n *\n * @return Reactive flag for MOBILE_BREAKPOINT\n */\nexport function useIsMobile(): Readonly<Ref<boolean>> {\n\treturn readonly(isMobile)\n}\n\n/**\n * Use global isSmallMobile state\n *\n * @return Reactive flag for MOBILE_SMALL_BREAKPOINT\n */\nexport function useIsSmallMobile(): Readonly<Ref<boolean>> {\n\treturn readonly(isSmallMobile)\n}\n"],"names":[],"mappings":";AAUO,MAAM,oBAAoB;AAG1B,MAAM,0BAA0B,oBAAoB;AAE3D,MAAM,uBAAuB,CAAC,eAAe,SAAS,gBAAgB,cAAc;AAGpF,MAAM,WAAW,IAAI,qBAAqB,iBAAiB,CAAC;AAC5D,MAAM,gBAAgB,IAAI,qBAAqB,uBAAuB,CAAC;AAEvE,OAAO,iBAAiB,UAAU,MAAM;AACvC,WAAS,QAAQ,qBAAqB,iBAAiB;AACvD,gBAAc,QAAQ,qBAAqB,uBAAuB;AACnE,GAAG,EAAE,SAAS,MAAM;AAOb,SAAS,cAAsC;AACrD,SAAO,SAAS,QAAQ;AACzB;AAOO,SAAS,mBAA2C;AAC1D,SAAO,SAAS,aAAa;AAC9B;"}