vueless 1.4.7-beta.4 → 1.4.7-beta.5

package/package.json

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

package/ui.form-listbox/UListbox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, computed, useId, ref, useTemplateRef } from "vue";
+import { watch, computed, useId, ref, useTemplateRef, nextTick } from "vue";
 import { isEqual } from "lodash-es";
 
 import { useUI } from "../composables/useUI";
@@ -144,77 +144,78 @@ const filteredOptions = computed(() => {
 watch(
   () => [props.options, props.size, props.visibleOptions, props.searchable, searchModel.value],
   () => {
-    const options = [
-      ...(optionsRef.value || []),
-      ...(addOptionRef.value ? [addOptionRef.value] : []),
-      ...(emptyOptionRef.value ? [emptyOptionRef.value] : []),
-    ];
-
-    if (props.visibleOptions) {
-      options.slice(0, props.visibleOptions);
-    }
-
-    const maxHeight = options
-      .slice(0, props.visibleOptions)
-      .map((el) => {
-        const styles = window.getComputedStyle(el);
-        const height = parseFloat(styles.height || "0");
-        const marginTop = parseFloat(styles.marginTop || "0");
-        const marginBottom = parseFloat(styles.marginBottom || "0");
-
-        return height + marginTop + marginBottom;
-      })
-      .reduce((acc, cur) => acc + cur, 0);
-
-    const wrapperEl = wrapperRef.value;
-    const wrapperStyle = wrapperEl ? getComputedStyle(wrapperEl) : null;
-    const wrapperPaddingTop = parseFloat(wrapperStyle?.paddingTop || "0");
-    const wrapperPaddingBottom = parseFloat(wrapperStyle?.paddingBottom || "0");
-    const wrapperBorderTop = parseFloat(wrapperStyle?.borderTopWidth || "0");
-    const wrapperBorderBottom = parseFloat(wrapperStyle?.borderBottomWidth || "0");
-    const wrapperGap = parseFloat(wrapperStyle?.gap || "0");
-
-    const addOptionHeight = addOptionRef.value?.getBoundingClientRect().height || 0;
-
-    const inputEl = listboxInputRef.value?.input as HTMLInputElement | undefined;
-    let listboxInputHeight = 0;
-
-    let listboxInputWrapperPaddingTop = 0;
-    let listboxInputBorderTop = 0;
-    let listboxInputBorderBottom = 0;
-
-    if (inputEl) {
-      const listboxInputStyle = getComputedStyle(inputEl);
-      const listboxInputLabelStyle = inputEl.parentElement
-        ? getComputedStyle(inputEl.parentElement)
-        : undefined;
-      const listboxInputWrapperStyle = getComputedStyle(
-        inputEl.parentElement?.parentElement?.parentElement as Element,
-      );
-
-      listboxInputHeight = parseFloat(listboxInputStyle.height || "0");
-
-      listboxInputWrapperPaddingTop = parseFloat(listboxInputWrapperStyle.paddingTop || "0");
-
-      listboxInputBorderTop = parseFloat(listboxInputLabelStyle?.borderTop || "0");
-      listboxInputBorderBottom = parseFloat(listboxInputLabelStyle?.borderBottom || "0");
-    }
-
-    wrapperMaxHeight.value = `${
-      maxHeight +
-      addOptionHeight +
-      (props.searchable ? wrapperGap : 0) +
-      wrapperPaddingTop +
-      wrapperPaddingBottom +
-      wrapperBorderTop +
-      wrapperBorderBottom +
-      listboxInputHeight +
-      listboxInputBorderTop +
-      listboxInputBorderBottom +
-      listboxInputWrapperPaddingTop
-    }px`;
+    nextTick(() => {
+      const options = [
+        ...(optionsRef.value || []),
+        ...(addOptionRef.value ? [addOptionRef.value] : []),
+        ...(emptyOptionRef.value ? [emptyOptionRef.value] : []),
+      ];
+
+      if (props.visibleOptions) {
+        options.slice(0, props.visibleOptions);
+      }
+
+      const maxHeight = options
+        .slice(0, props.visibleOptions)
+        .map((el) => {
+          const styles = window.getComputedStyle(el);
+          const height = parseFloat(styles.height || "0");
+          const marginTop = parseFloat(styles.marginTop || "0");
+          const marginBottom = parseFloat(styles.marginBottom || "0");
+
+          return height + marginTop + marginBottom;
+        })
+        .reduce((acc, cur) => acc + cur, 0);
+
+      const wrapperStyle = getComputedStyle(wrapperRef.value as Element);
+      const wrapperPaddingTop = parseFloat(wrapperStyle.paddingTop || "0");
+      const wrapperPaddingBottom = parseFloat(wrapperStyle.paddingBottom || "0");
+      const wrapperBorderTop = parseFloat(wrapperStyle.borderTopWidth || "0");
+      const wrapperBorderBottom = parseFloat(wrapperStyle.borderBottomWidth || "0");
+      const wrapperGap = parseFloat(wrapperStyle.gap || "0");
+
+      const addOptionHeight = addOptionRef.value?.getBoundingClientRect().height || 0;
+
+      const inputEl = listboxInputRef.value?.input as HTMLInputElement | undefined;
+      let listboxInputHeight = 0;
+
+      let listboxInputWrapperPaddingTop = 0;
+      let listboxInputBorderTop = 0;
+      let listboxInputBorderBottom = 0;
+
+      if (inputEl) {
+        const listboxInputStyle = getComputedStyle(inputEl);
+        const listboxInputLabelStyle = inputEl.parentElement
+          ? getComputedStyle(inputEl.parentElement)
+          : undefined;
+        const listboxInputWrapperStyle = getComputedStyle(
+          inputEl.parentElement?.parentElement?.parentElement as Element,
+        );
+
+        listboxInputHeight = parseFloat(listboxInputStyle.height || "0");
+
+        listboxInputWrapperPaddingTop = parseFloat(listboxInputWrapperStyle.paddingTop || "0");
+
+        listboxInputBorderTop = parseFloat(listboxInputLabelStyle?.borderTop || "0");
+        listboxInputBorderBottom = parseFloat(listboxInputLabelStyle?.borderBottom || "0");
+      }
+
+      wrapperMaxHeight.value = `${
+        maxHeight +
+        addOptionHeight +
+        (props.searchable ? wrapperGap : 0) +
+        wrapperPaddingTop +
+        wrapperPaddingBottom +
+        wrapperBorderTop +
+        wrapperBorderBottom +
+        listboxInputHeight +
+        listboxInputBorderTop +
+        listboxInputBorderBottom +
+        listboxInputWrapperPaddingTop
+      }px`;
+    });
   },
-  { immediate: true, flush: "post" },
+  { immediate: true },
 );
 
 watch(

package/ui.form-listbox/tests/UListbox.test.ts

@@ -1,5 +1,6 @@
+import { nextTick } from "vue";
 import { flushPromises, mount } from "@vue/test-utils";
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 
 import UListbox from "../UListbox.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -399,7 +400,37 @@ describe("UListbox.vue", () => {
         id: `option-${i}`,
       }));
 
-      const expectedStyle = "max-height:";
+      // Mock getComputedStyle to return non-zero heights for option elements
+      const originalGetComputedStyle = window.getComputedStyle;
+
+      vi.spyOn(window, "getComputedStyle").mockImplementation((el) => {
+        const real = originalGetComputedStyle(el);
+
+        return {
+          ...real,
+          height: "40px",
+          marginTop: "0px",
+          marginBottom: "4px",
+          paddingTop: "4px",
+          paddingBottom: "4px",
+          borderTopWidth: "1px",
+          borderBottomWidth: "1px",
+          gap: "4px",
+        } as CSSStyleDeclaration;
+      });
+
+      // Mock getBoundingClientRect for option elements
+      vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue({
+        height: 40,
+        width: 100,
+        top: 0,
+        left: 0,
+        bottom: 40,
+        right: 100,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
 
       const component = mount(UListbox, {
         props: {
@@ -409,12 +440,15 @@ describe("UListbox.vue", () => {
       });
 
       await flushPromises();
+      await nextTick();
 
       const wrapper = component.find('[vl-key="wrapper"]');
       const styleAttr = wrapper.attributes("style");
       const inlineMaxHeight = (wrapper.element as HTMLElement).style.maxHeight;
 
-      expect(styleAttr ?? inlineMaxHeight).toContain(expectedStyle);
+      expect(styleAttr ?? inlineMaxHeight).toContain("max-height:");
+
+      vi.restoreAllMocks();
     });
   });