vueless 1.5.2-beta.1 → 1.5.2

package/composables/useBreakpoint.ts

@@ -1,4 +1,4 @@
-import { ref, computed } from "vue";
+import { onMounted, ref, watch, computed, onBeforeUnmount } from "vue";
 import { isSSR } from "../utils/helper";
 
 type ResponsiveConfig<T> = Partial<Record<BreakpointName, T>>;
@@ -25,12 +25,12 @@ let isInitialized = false;
 let animationId: number | undefined;
 
 const windowWidth = ref(0);
+const currentBreakpoint = ref(BreakpointName.Xs);
 const BREAKPOINT_KEYS = Object.keys(BreakpointName) as (keyof typeof BreakpointName)[];
-const currentBreakpoint = computed(() => getBreakpoint(windowWidth.value));
 
-export function useBreakpoint() {
-  initBreakpointListener();
+watch(windowWidth, setBreakpoint, { immediate: true });
 
+export function useBreakpoint() {
   const isPhone = computed(() => {
     return currentBreakpoint.value === BreakpointName.Xs;
   });
@@ -67,6 +67,14 @@ export function useBreakpoint() {
     return isDesktop.value || isLargeDesktop.value;
   });
 
+  onMounted(() => {
+    initBreakpointListener();
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", resizeListener);
+  });
+
   return {
     isPhone,
     isLargePhone,
@@ -131,16 +139,20 @@ export function r<T>(config: ResponsiveConfig<T>): T {
   return config[BreakpointName[definedKeys[0]]] as T;
 }
 
-function getBreakpoint(width: number) {
+function setBreakpoint(newWindowWidth: number) {
+  if (newWindowWidth === undefined) return;
+
   for (let i = BREAKPOINT_KEYS.length - 1; i >= 0; i--) {
     const key = BREAKPOINT_KEYS[i];
 
-    if (width >= BreakpointWidth[key]) {
-      return BreakpointName[key];
+    if (newWindowWidth >= BreakpointWidth[key]) {
+      currentBreakpoint.value = BreakpointName[key];
+
+      return;
     }
   }
 
-  return BreakpointName.Xs;
+  currentBreakpoint.value = BreakpointName.Xs;
 }
 
 function resizeListener() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.5.2-beta.1",
+  "version": "1.5.2",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",