vueless 1.5.2-beta.0 → 1.5.2-beta.2

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/composables/useUI.ts

@@ -53,7 +53,9 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
 
   /* Hoist shared reactive primitives — create once, share across all keys. */
   const attrs = useAttrs() as KeyAttrs;
-  const reactiveAttrsClass = computed(() => attrs.class);
+
+  /* Reading `class` explicitly keeps attrs tracked even when they start empty. */
+  const reactiveAttrs = computed(() => ({ class: attrs.class, ...attrs }));
 
   /**
    * Reactive wrapper for props — created once per component instead of once per key.
@@ -235,6 +237,7 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
      * body row of a table on an unrelated sticky toggle). We skip the `.value` write
      * when the new object is structurally equal to the last one, so the ref keeps its
      * identity and dependents are not re-rendered.
+     * `JSON.stringify` drops functions, so listeners are compared by reference separately.
      */
     const attrsSignatures: Record<string, string> = {};
 
@@ -250,10 +253,10 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
     /**
      * Single consolidated watcher instead of N per-key watchers.
      * Watches: config (for config changes), reactiveProps (for prop changes),
-     * mutatedProps (for slot/computed prop changes), reactiveAttrsClass (for class attr changes).
+     * mutatedProps (for slot/computed prop changes), reactiveAttrs (for attr changes).
      */
     watch(
-      [config, reactiveProps, mutatedProps || (() => undefined), reactiveAttrsClass],
+      [config, reactiveProps, mutatedProps || (() => undefined), reactiveAttrs],
       () => {
         const derived = configDerivedData.value;
 
@@ -285,8 +288,10 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
 
           /* Keep the previous ref identity when nothing changed — see attrsSignatures. */
           const signature = JSON.stringify(nextValue);
+          const isUnchanged =
+            attrsSignatures[key] === signature && hasSameListeners(attrsRefs[key].value, nextValue);
 
-          if (attrsSignatures[key] === signature) continue;
+          if (isUnchanged) continue;
 
           attrsSignatures[key] = signature;
           attrsRefs[key].value = nextValue;
@@ -312,6 +317,26 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
   return { config, getDataTest, ...getKeysAttrs(mutatedProps) } as UseUI<T>;
 }
 
+/**
+ * Check both attrs objects hold the same function-valued entries (listeners) by reference.
+ */
+function hasSameListeners(previous: KeyAttrs, next: KeyAttrs): boolean {
+  let listenersDiff = 0;
+
+  for (const key in next) {
+    if (typeof next[key] !== "function") continue;
+    if (next[key] !== previous[key]) return false;
+
+    listenersDiff++;
+  }
+
+  for (const key in previous) {
+    if (typeof previous[key] === "function") listenersDiff--;
+  }
+
+  return listenersDiff === 0;
+}
+
 /**
  * Return base classes.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.5.2-beta.0",
+  "version": "1.5.2-beta.2",
   "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/ui.button-toggle/tests/UToggle.test.ts

@@ -395,6 +395,23 @@ describe("UToggle.vue", () => {
         expect.objectContaining({ value: "option1", label: "Option 1" }),
       );
     });
+
+    it("Options – emits the new option value after options are swapped", async () => {
+      const component = mount(UToggle, {
+        props: {
+          options: [{ value: "code" }, { value: "self" }],
+          name,
+        },
+      });
+
+      await component.setProps({
+        options: [{ value: "git" }, { value: "jira" }, { value: "slack" }],
+      });
+
+      await component.findAllComponents(UButton)[1].trigger("click");
+
+      expect(component.emitted("update:modelValue")?.[0][0]).toBe("jira");
+    });
   });
 
   describe("Exposed refs", () => {