10/3/24

composables/windowDimensions.ts

@@ -3,12 +3,15 @@
  * @module composables/windowDimensions
  */
 
+const tabletMaxWidth = 1024;
+const mobileMaxWidth = 640;
+
 /**
  * Enums for viewport types
  * @readonly
  * @enum {number}
  */
-export const enum ViewPortType {
+const enum ViewPortType {
     DESKTOP,
     TABLET,
     MOBILE,
@@ -18,7 +21,7 @@ export const enum ViewPortType {
  * Vue Composable for getting window dimensions and viewport type based on width
  * @returns {object} returns the references of width, height, and viewport type
  */
-export function useWindowDimensions() {
+function useWindowDimensions() {
     const width = ref<number>(0);
     const height = ref<number>(0);
     const viewPortType = ref<ViewPortType>(ViewPortType.DESKTOP);
@@ -26,9 +29,9 @@ export function useWindowDimensions() {
     function update(event: Event | undefined) {
         width.value = window.innerWidth;
         height.value = window.innerHeight;
-        if (width.value >= 1024) {
+        if (width.value >= tabletMaxWidth) {
             viewPortType.value = ViewPortType.DESKTOP;
-        } else if (width.value < 640) {
+        } else if (width.value < mobileMaxWidth) {
             viewPortType.value = ViewPortType.MOBILE;
         } else {
             viewPortType.value = ViewPortType.TABLET;
@@ -44,3 +47,5 @@ export function useWindowDimensions() {
 
     return { width, height, viewPortType };
 }
+
+export { useWindowDimensions, ViewPortType };