vueless 1.3.5-beta.2 → 1.3.5

package/composables/useBreakpoint.ts

@@ -1,7 +1,7 @@
 import { onMounted, ref, watch, computed, onBeforeUnmount } from "vue";
 import { isSSR } from "../utils/helper";
 
-import type { Ref } from "vue";
+type ResponsiveConfig<T> = Partial<Record<BreakpointName, T>>;
 
 enum BreakpointName {
   Xs = "xs",
@@ -21,12 +21,16 @@ enum BreakpointWidth {
   "2xl" = 1536,
 }
 
-export function useBreakpoint() {
-  let animationId: number | undefined;
+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 windowWidth = ref(0);
-  const currentBreakpoint: Ref<BreakpointName> = ref(BreakpointName.Xs);
+watch(windowWidth, setBreakpoint, { immediate: true });
 
+export function useBreakpoint() {
   const isPhone = computed(() => {
     return currentBreakpoint.value === BreakpointName.Xs;
   });
@@ -63,50 +67,14 @@ export function useBreakpoint() {
     return isDesktop.value || isLargeDesktop.value;
   });
 
-  watch(windowWidth, setBreakpoint, { immediate: true });
-
   onMounted(() => {
-    if (isSSR) return;
-
-    windowWidth.value = window.innerWidth;
-
-    window.addEventListener("resize", resizeListener, { passive: true });
+    initBreakpointListener();
   });
 
   onBeforeUnmount(() => {
-    if (isSSR) return;
-
     window.removeEventListener("resize", resizeListener);
   });
 
-  function resizeListener() {
-    if (isSSR) return;
-
-    if (animationId) {
-      window.cancelAnimationFrame(animationId);
-    }
-
-    animationId = window.requestAnimationFrame(() => {
-      windowWidth.value = window.innerWidth;
-    });
-  }
-
-  function setBreakpoint(newWindowWidth: number) {
-    if (newWindowWidth === undefined) return;
-
-    const breakpoints = [
-      { width: BreakpointWidth["2xl"], name: BreakpointName["2xl"] },
-      { width: BreakpointWidth.Xl, name: BreakpointName.Xl },
-      { width: BreakpointWidth.Lg, name: BreakpointName.Lg },
-      { width: BreakpointWidth.Md, name: BreakpointName.Md },
-      { width: BreakpointWidth.Sm, name: BreakpointName.Sm },
-    ];
-
-    currentBreakpoint.value =
-      breakpoints.find((breakpoint) => newWindowWidth >= breakpoint.width)?.name ||
-      BreakpointName.Xs;
-  }
-
   return {
     isPhone,
     isLargePhone,
@@ -120,3 +88,90 @@ export function useBreakpoint() {
     breakpoint: currentBreakpoint,
   };
 }
+
+/**
+ * Shorthand function that can be used directly in templates.
+ * Returns the appropriate value based on the current breakpoint.
+ * Vue will track the reactive dependency and re-render when the breakpoint changes.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <UButton :size="r({ sm: 'sm', md: 'md' })">Click me</UButton>
+ * </template>
+ *
+ * <script setup>
+ * import { r } from "vueless";
+ * </script>
+ * ```
+ */
+export function r<T>(config: ResponsiveConfig<T>): T {
+  initBreakpointListener();
+
+  const definedKeys = BREAKPOINT_KEYS.filter((key) => BreakpointName[key] in config);
+
+  if (!definedKeys.length) {
+    return undefined as T;
+  }
+
+  const currentIndex = BREAKPOINT_KEYS.findIndex(
+    (key) => BreakpointName[key] === currentBreakpoint.value,
+  );
+  const smallestDefinedIndex = BREAKPOINT_KEYS.indexOf(definedKeys[0]);
+  const largestDefinedIndex = BREAKPOINT_KEYS.indexOf(definedKeys[definedKeys.length - 1]);
+
+  if (currentIndex <= smallestDefinedIndex) {
+    return config[BreakpointName[definedKeys[0]]] as T;
+  }
+
+  if (currentIndex >= largestDefinedIndex) {
+    return config[BreakpointName[definedKeys[definedKeys.length - 1]]] as T;
+  }
+
+  for (let i = currentIndex; i >= 0; i--) {
+    const bp = BreakpointName[BREAKPOINT_KEYS[i]];
+
+    if (bp in config) {
+      return config[bp] as T;
+    }
+  }
+
+  return config[BreakpointName[definedKeys[0]]] as T;
+}
+
+function setBreakpoint(newWindowWidth: number) {
+  if (newWindowWidth === undefined) return;
+
+  for (let i = BREAKPOINT_KEYS.length - 1; i >= 0; i--) {
+    const key = BREAKPOINT_KEYS[i];
+
+    if (newWindowWidth >= BreakpointWidth[key]) {
+      currentBreakpoint.value = BreakpointName[key];
+
+      return;
+    }
+  }
+
+  currentBreakpoint.value = BreakpointName.Xs;
+}
+
+function resizeListener() {
+  if (isSSR) return;
+
+  if (animationId) {
+    window.cancelAnimationFrame(animationId);
+  }
+
+  animationId = window.requestAnimationFrame(() => {
+    windowWidth.value = window.innerWidth;
+  });
+}
+
+function initBreakpointListener() {
+  if (isInitialized || isSSR) return;
+
+  isInitialized = true;
+  windowWidth.value = window.innerWidth;
+
+  window.addEventListener("resize", resizeListener, { passive: true });
+}

package/index.d.ts

@@ -29,7 +29,7 @@ export { useLocale } from "./composables/useLocale";
 export { useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
 export { useRequestQueue } from "./composables/useRequestQueue";
-export { useBreakpoint } from "./composables/useBreakpoint";
+export { useBreakpoint, r } from "./composables/useBreakpoint";
 export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
 export { useMutationObserver } from "./composables/useMutationObserver";

package/index.ts

@@ -35,7 +35,7 @@ export { useLocale } from "./composables/useLocale";
 export { useUI } from "./composables/useUI";
 export { useDarkMode } from "./composables/useDarkMode";
 export { useRequestQueue } from "./composables/useRequestQueue";
-export { useBreakpoint } from "./composables/useBreakpoint";
+export { useBreakpoint, r } from "./composables/useBreakpoint";
 export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay";
 export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress";
 export { useMutationObserver } from "./composables/useMutationObserver";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.5-beta.2",
+  "version": "1.3.5",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -57,7 +57,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.3.1",
+    "@vueless/storybook": "^1.3.4",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^10.0.2",
     "eslint-plugin-vue": "^10.3.0",