vueless 1.5.1 → 1.5.2-beta.1

package/composables/useBreakpoint.ts

@@ -1,4 +1,4 @@
-import { onMounted, ref, watch, computed, onBeforeUnmount } from "vue";
+import { ref, computed } 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)[];
-
-watch(windowWidth, setBreakpoint, { immediate: true });
+const currentBreakpoint = computed(() => getBreakpoint(windowWidth.value));
 
 export function useBreakpoint() {
+  initBreakpointListener();
+
   const isPhone = computed(() => {
     return currentBreakpoint.value === BreakpointName.Xs;
   });
@@ -67,14 +67,6 @@ export function useBreakpoint() {
     return isDesktop.value || isLargeDesktop.value;
   });
 
-  onMounted(() => {
-    initBreakpointListener();
-  });
-
-  onBeforeUnmount(() => {
-    window.removeEventListener("resize", resizeListener);
-  });
-
   return {
     isPhone,
     isLargePhone,
@@ -139,20 +131,16 @@ export function r<T>(config: ResponsiveConfig<T>): T {
   return config[BreakpointName[definedKeys[0]]] as T;
 }
 
-function setBreakpoint(newWindowWidth: number) {
-  if (newWindowWidth === undefined) return;
-
+function getBreakpoint(width: number) {
   for (let i = BREAKPOINT_KEYS.length - 1; i >= 0; i--) {
     const key = BREAKPOINT_KEYS[i];
 
-    if (newWindowWidth >= BreakpointWidth[key]) {
-      currentBreakpoint.value = BreakpointName[key];
-
-      return;
+    if (width >= BreakpointWidth[key]) {
+      return BreakpointName[key];
     }
   }
 
-  currentBreakpoint.value = BreakpointName.Xs;
+  return BreakpointName.Xs;
 }
 
 function resizeListener() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.5.1",
+  "version": "1.5.2-beta.1",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -59,7 +59,7 @@
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/test-utils": "^2.4.8",
     "@vue/tsconfig": "^0.9.1",
-    "@vueless/storybook": "^1.8.0",
+    "@vueless/storybook": "^1.8.1",
     "eslint": "^10.2.1",
     "eslint-plugin-storybook": "^10.3.5",
     "eslint-plugin-tailwindcss": "^4.0.0-alpha.7",

package/utils/node/dynamicProps.js

@@ -127,7 +127,7 @@ async function getComponentsWithColors() {
   }
 
   return webTypes.contributions.html.tags
-    .filter((component) => component?.attributes.some((attribute) => attribute.name === "color"))
+    .filter((component) => component.attributes?.some((attribute) => attribute.name === "color"))
     .map((component) => ({
       name: component.name,
       colors: component.attributes.find((attribute) => attribute.name === "color")?.enum,