vueless 1.3.7-beta.2 → 1.3.7-beta.3

package/ui.dropdown-link/tests/UDropdownLink.test.ts

@@ -15,10 +15,8 @@ describe("UDropdownLink.vue", () => {
     { value: 3, label: "Option 3" },
   ];
 
-  // Props tests
   describe("Props", () => {
-    // Label prop
-    it("renders the correct label text", () => {
+    it("Label – renders the correct label text", () => {
       const label = "Dropdown Link";
 
       const component = mount(UDropdownLink, {
@@ -31,8 +29,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.findComponent(ULink).props("label")).toBe(label);
     });
 
-    // ModelValue prop
-    it("selects the correct option based on modelValue", async () => {
+    it("ModelValue – selects the correct option based on modelValue", async () => {
       const modelValue = 2;
 
       const component = mount(UDropdownLink, {
@@ -48,8 +45,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.findComponent(ULink).props("label")).toBe(selectedOption?.label);
     });
 
-    // Multiple prop with modelValue
-    it("handles multiple selections correctly", async () => {
+    it("Multiple – handles multiple selections correctly", async () => {
       const modelValue = [1, 3];
 
       const component = mount(UDropdownLink, {
@@ -67,8 +63,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.findComponent(ULink).props("label")).toBe(expectedLabel);
     });
 
-    // LabelDisplayCount prop
-    it("limits displayed labels based on labelDisplayCount", async () => {
+    it("LabelDisplayCount – limits displayed labels based on labelDisplayCount", async () => {
       const modelValue = [1, 2, 3];
       const labelDisplayCount = 1;
 
@@ -87,8 +82,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.findComponent(ULink).props("label")).toBe(expectedLabel);
     });
 
-    // LabelDisplayCount prop with single value
-    it("correctly displays label when labelDisplayCount is 1 and only one value is selected", async () => {
+    it("LabelDisplayCount – displays label correctly with single value", async () => {
       const modelValue = [1];
       const labelDisplayCount = 1;
 
@@ -107,8 +101,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.findComponent(ULink).props("label")).toBe(expectedLabel);
     });
 
-    // Color prop
-    it("applies the correct color class", async () => {
+    it("Color – applies the correct color class", async () => {
       const colors = [
         "primary",
         "secondary",
@@ -133,8 +126,7 @@ describe("UDropdownLink.vue", () => {
       });
     });
 
-    // Size prop
-    it("applies the correct size class", async () => {
+    it("Size – applies the correct size class", async () => {
       const sizes = ["sm", "md", "lg"];
 
       sizes.forEach((size) => {
@@ -149,8 +141,7 @@ describe("UDropdownLink.vue", () => {
       });
     });
 
-    // Underlined prop
-    it("applies underlined class when underlined prop is true", () => {
+    it("Underlined – applies underlined class when underlined prop is true", () => {
       const underlined = true;
 
       const component = mount(UDropdownLink, {
@@ -163,8 +154,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.findComponent(ULink).props("underlined")).toBe(underlined);
     });
 
-    // Dashed prop
-    it("applies dashed class when dashed prop is true", () => {
+    it("Dashed – applies dashed class when dashed prop is true", () => {
       const dashed = true;
 
       const component = mount(UDropdownLink, {
@@ -177,8 +167,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.findComponent(ULink).props("dashed")).toBe(dashed);
     });
 
-    // Disabled prop
-    it("applies disabled attribute when disabled prop is true", () => {
+    it("Disabled – applies disabled attribute when disabled prop is true", () => {
       const disabled = true;
 
       const component = mount(UDropdownLink, {
@@ -191,8 +180,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.findComponent(ULink).props("disabled")).toBe(disabled);
     });
 
-    // ToggleIcon prop (boolean: true)
-    it("shows default toggle icon when toggleIcon is true", () => {
+    it("ToggleIcon – shows default toggle icon when toggleIcon is true", () => {
       const toggleIcon = true;
 
       const component = mount(UDropdownLink, {
@@ -208,8 +196,7 @@ describe("UDropdownLink.vue", () => {
       expect(iconComponent.props("name")).toBe("keyboard_arrow_down");
     });
 
-    // ToggleIcon prop (boolean: false)
-    it("hides toggle icon when toggleIcon is false", () => {
+    it("ToggleIcon – hides toggle icon when toggleIcon is false", () => {
       const toggleIcon = false;
 
       const component = mount(UDropdownLink, {
@@ -224,8 +211,7 @@ describe("UDropdownLink.vue", () => {
       expect(iconComponent.exists()).toBe(false);
     });
 
-    // ToggleIcon prop (string)
-    it("shows custom toggle icon when toggleIcon is a string", () => {
+    it("ToggleIcon – shows custom toggle icon when toggleIcon is a string", () => {
       const toggleIcon = "custom_icon";
 
       const component = mount(UDropdownLink, {
@@ -241,8 +227,7 @@ describe("UDropdownLink.vue", () => {
       expect(iconComponent.props("name")).toBe(toggleIcon);
     });
 
-    // ID prop
-    it("applies the correct id attribute", () => {
+    it("ID – applies the correct id attribute", () => {
       const id = "test-dropdown-id";
 
       const component = mount(UDropdownLink, {
@@ -252,11 +237,12 @@ describe("UDropdownLink.vue", () => {
         },
       });
 
-      expect(component.findComponent(ULink).attributes("id")).toBe(id);
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      expect(dropdown.props("id")).toBe(id);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-dropdown";
 
       const component = mount(UDropdownLink, {
@@ -269,8 +255,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.findComponent(ULink).attributes("data-test")).toBe(dataTest);
     });
 
-    // OptionsLimit prop
-    it("passes optionsLimit prop to UListbox component", async () => {
+    it("OptionsLimit – passes optionsLimit prop to UListbox component", async () => {
       const optionsLimit = 2;
 
       const component = mount(UDropdownLink, {
@@ -285,8 +270,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.findComponent(UListbox).props("optionsLimit")).toBe(optionsLimit);
     });
 
-    // VisibleOptions prop
-    it("passes visibleOptions prop to UListbox component", async () => {
+    it("VisibleOptions – passes visibleOptions prop to UListbox component", async () => {
       const visibleOptions = 5;
 
       const component = mount(UDropdownLink, {
@@ -301,8 +285,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.findComponent(UListbox).props("visibleOptions")).toBe(visibleOptions);
     });
 
-    // GroupLabelKey prop
-    it("passes groupLabelKey prop to UListbox component", async () => {
+    it("GroupLabelKey – passes groupLabelKey prop to UListbox component", async () => {
       const groupLabelKey = "category";
       const groupedOptions = [
         { groupLabel: "Group 1", category: "group1" },
@@ -341,8 +324,7 @@ describe("UDropdownLink.vue", () => {
       expect(options[0].text()).toBe("Option 3");
     });
 
-    // CloseOnSelect prop
-    it("keeps dropdown open when closeOnSelect is false", async () => {
+    it("CloseOnSelect – keeps dropdown open when closeOnSelect is false", async () => {
       const component = mount(UDropdownLink, {
         props: {
           options: defaultOptions,
@@ -363,12 +345,100 @@ describe("UDropdownLink.vue", () => {
       // Dropdown should remain open
       expect(component.findComponent(UListbox).exists()).toBe(true);
     });
+
+    it("XPosition – passes xPosition prop to dropdown", () => {
+      const component = mount(UDropdownLink, {
+        props: {
+          xPosition: "right",
+          options: defaultOptions,
+        },
+      });
+
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      expect(dropdown.props("xPosition")).toBe("right");
+    });
+
+    it("YPosition – passes yPosition prop to dropdown", () => {
+      const component = mount(UDropdownLink, {
+        props: {
+          yPosition: "top",
+          options: defaultOptions,
+        },
+      });
+
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      expect(dropdown.props("yPosition")).toBe("top");
+    });
+
+    it("LabelKey – uses custom label key for options", () => {
+      const customOptions = [
+        { id: 1, name: "First" },
+        { id: 2, name: "Second" },
+      ];
+
+      const component = mount(UDropdownLink, {
+        props: {
+          options: customOptions,
+          labelKey: "name",
+          valueKey: "id",
+        },
+      });
+
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      expect(dropdown.props("labelKey")).toBe("name");
+    });
+
+    it("ValueKey – uses custom value key for options", () => {
+      const customOptions = [
+        { id: 1, name: "First" },
+        { id: 2, name: "Second" },
+      ];
+
+      const component = mount(UDropdownLink, {
+        props: {
+          options: customOptions,
+          labelKey: "name",
+          valueKey: "id",
+        },
+      });
+
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      expect(dropdown.props("valueKey")).toBe("id");
+    });
+
+    it("GroupValueKey – passes groupValueKey prop to dropdown", () => {
+      const component = mount(UDropdownLink, {
+        props: {
+          groupValueKey: "items",
+          options: defaultOptions,
+        },
+      });
+
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      expect(dropdown.props("groupValueKey")).toBe("items");
+    });
+
+    it("Searchable – passes searchable prop to dropdown", () => {
+      const component = mount(UDropdownLink, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+        },
+      });
+
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      expect(dropdown.props("searchable")).toBe(true);
+    });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Default slot
-    it("renders content from default slot", () => {
+    it("Default – renders content from default slot", () => {
       const slotContent = "Custom Content";
       const label = "Dropdown Link";
 
@@ -385,8 +455,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Left slot
-    it("renders content from left slot", () => {
+    it("Left – renders content from left slot", () => {
       const label = "Dropdown Link";
       const slotText = "Left";
       const slotClass = "left-content";
@@ -405,8 +474,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Toggle slot
-    it("renders content from toggle slot", () => {
+    it("Toggle – renders content from toggle slot", () => {
       const label = "Dropdown Link";
       const slotText = "Toggle";
       const slotClass = "toggle-content";
@@ -425,8 +493,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Before-option slot
-    it("renders content from before-option slot", async () => {
+    it("Before – renders content from before-option slot", async () => {
       const label = "Dropdown Link";
       const slotText = "Before";
       const slotClass = "before-option-content";
@@ -450,8 +517,7 @@ describe("UDropdownLink.vue", () => {
       expect(beforeOptionSlot.text()).toBe(slotText);
     });
 
-    // Option slot
-    it("renders custom content from option slot", async () => {
+    it("Option – renders custom content from option slot", async () => {
       const label = "Dropdown Link";
       const slotClass = "custom-option-content";
 
@@ -474,8 +540,7 @@ describe("UDropdownLink.vue", () => {
       expect(customOptionSlot.text()).toBe("Custom Option 1");
     });
 
-    // After-option slot
-    it("renders content from after-option slot", async () => {
+    it("After – renders content from after-option slot", async () => {
       const label = "Dropdown Link";
       const slotText = "After";
       const slotClass = "after-option-content";
@@ -499,8 +564,7 @@ describe("UDropdownLink.vue", () => {
       expect(afterOptionSlot.text()).toBe(slotText);
     });
 
-    // Empty slot
-    it("renders custom content from empty slot", async () => {
+    it("Empty – renders custom content from empty slot", async () => {
       const label = "Dropdown Link";
       const slotContent = "No options available";
       const slotClass = "custom-empty";
@@ -525,10 +589,8 @@ describe("UDropdownLink.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // Click event to open dropdown
-    it("opens dropdown when link is clicked", async () => {
+    it("Click – opens dropdown when link is clicked", async () => {
       const component = mount(UDropdownLink, {
         props: {
           options: defaultOptions,
@@ -545,8 +607,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.findComponent(UListbox).exists()).toBe(true);
     });
 
-    // update:modelValue event
-    it("emits update:modelValue event when an option is selected", async () => {
+    it("update:modelValue – emits update:modelValue event when an option is selected", async () => {
       const component = mount(UDropdownLink, {
         props: {
           options: defaultOptions,
@@ -567,8 +628,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.emitted("update:modelValue")?.[0]).toEqual([2]);
     });
 
-    // clickOption event
-    it("emits clickOption event when an option is clicked", async () => {
+    it("clickOption – emits clickOption event when an option is clicked", async () => {
       const component = mount(UDropdownLink, {
         props: {
           options: defaultOptions,
@@ -591,8 +651,7 @@ describe("UDropdownLink.vue", () => {
       expect(component.emitted("clickOption")?.[0]).toEqual([option]);
     });
 
-    // Close dropdown when clicking outside
-    it("closes dropdown when clicking outside", async () => {
+    it("Close – closes dropdown when clicking outside", async () => {
       const component = mount(UDropdownLink, {
         props: {
           options: defaultOptions,
@@ -603,17 +662,16 @@ describe("UDropdownLink.vue", () => {
       await component.findComponent(ULink).trigger("click");
       expect(component.findComponent(UListbox).exists()).toBe(true);
 
-      // Directly call the hideOptions function
+      // Directly call the hide function
       // This is equivalent to what happens when clicking outside
-      component.vm.hideOptions();
+      component.vm.hide();
       await component.vm.$nextTick();
 
       // Dropdown should be closed
       expect(component.findComponent(UListbox).exists()).toBe(false);
     });
 
-    // No dropdown toggle when disabled
-    it("does not toggle dropdown when disabled", async () => {
+    it("No – does not toggle dropdown when disabled", async () => {
       const component = mount(UDropdownLink, {
         props: {
           disabled: true,
@@ -630,12 +688,73 @@ describe("UDropdownLink.vue", () => {
       // Dropdown should still be closed
       expect(component.findComponent(UListbox).exists()).toBe(false);
     });
+
+    it("Open – emits open event when dropdown is opened", async () => {
+      const component = mount(UDropdownLink, {
+        props: {
+          options: defaultOptions,
+        },
+      });
+
+      await component.findComponent(ULink).trigger("click");
+
+      expect(component.emitted("open")).toBeTruthy();
+    });
+
+    it("Close – emits close event when dropdown is closed", async () => {
+      const component = mount(UDropdownLink, {
+        props: {
+          options: defaultOptions,
+        },
+      });
+
+      await component.findComponent(ULink).trigger("click");
+
+      component.vm.hide();
+      await component.vm.$nextTick();
+
+      expect(component.emitted("close")).toBeTruthy();
+    });
+
+    it("SearchChange – emits searchChange event when search value changes", async () => {
+      const component = mount(UDropdownLink, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+        },
+      });
+
+      await component.findComponent(ULink).trigger("click");
+
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      dropdown.vm.$emit("searchChange", "test query");
+
+      expect(component.emitted("searchChange")).toBeTruthy();
+      expect(component.emitted("searchChange")?.[0]).toEqual(["test query"]);
+    });
+
+    it("Update:search – emits update:search event when search value updates", async () => {
+      const component = mount(UDropdownLink, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+        },
+      });
+
+      await component.findComponent(ULink).trigger("click");
+
+      const dropdown = component.findComponent({ name: "UDropdown" });
+
+      dropdown.vm.$emit("update:search", "new search");
+
+      expect(component.emitted("update:search")).toBeTruthy();
+      expect(component.emitted("update:search")?.[0]).toEqual(["new search"]);
+    });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // wrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const component = mount(UDropdownLink, {
         props: {
           options: defaultOptions,

package/ui.form-listbox/UListbox.vue

@@ -158,13 +158,12 @@ watch(
       const maxHeight = options
         .slice(0, props.visibleOptions)
         .map((el) => {
-          const elHeight = el.getBoundingClientRect().height;
-
           const styles = window.getComputedStyle(el);
+          const height = parseFloat(styles.height || "0");
           const marginTop = parseFloat(styles.marginTop || "0");
           const marginBottom = parseFloat(styles.marginBottom || "0");
 
-          return elHeight + marginTop + marginBottom;
+          return height + marginTop + marginBottom;
         })
         .reduce((acc, cur) => acc + cur, 0);
 

package/ui.form-listbox/config.ts

@@ -8,14 +8,14 @@ export default /*tw*/ {
     `,
     variants: {
       searchable: {
-        true: "pt-0",
+        true: "pt-0 min-w-64",
       },
     },
   },
   listboxInput: {
     base: "{UInputSearch} sticky top-0 pt-1 bg-default z-10",
     searchInput: {
-      wrapper: "px-2 rounded-small focus-within:outline-0 hover:focus-within:border-lifted focus-within:border-lifted",
+      wrapper: "pl-2 pr-1 rounded-none border-0 border-b focus-within:outline-0 !border-default",
     },
   },
   selectIcon: {

package/ui.form-select/config.ts

@@ -127,7 +127,7 @@ export default /*tw*/ {
       },
     },
   },
-  listbox: "{UListbox} group-[*]/top:bottom-full group-[*]/top:top-auto top-full w-full",
+  listbox: "{UListbox} my-1.5 group-[*]/top:bottom-full group-[*]/top:top-auto top-full w-full",
   i18n: {
     listIsEmpty: "List is empty.",
     noDataToShow: "No data to show.",