vueless 1.4.12-beta.14 → 1.4.12-beta.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.14",
+  "version": "1.4.12-beta.16",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.form-date-picker/UDatePicker.vue

@@ -119,6 +119,16 @@ function deactivate() {
   customView.value = View.Day;
 }
 
+function deactivateOnBlur(event: FocusEvent) {
+  const related = event.relatedTarget as HTMLElement | null;
+
+  if (related && wrapperRef.value?.contains(related)) {
+    return;
+  }
+
+  deactivate();
+}
+
 function onUserFormatDateChange(value: string) {
   userFormatDate.value = value.trim();
 }
@@ -279,7 +289,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" ref="wrapper" :data-test="getDataTest()">
+  <div v-bind="wrapperAttrs" ref="wrapper" :data-test="getDataTest()" @focusout="deactivateOnBlur">
     <UInput
       :id="elementId"
       :key="String(userFormatDate)"

package/ui.form-date-picker/tests/UDatePicker.test.ts

@@ -356,6 +356,53 @@ describe("UDatePicker.vue", () => {
       expect(calendar.isVisible()).toBe(true);
     });
 
+    it("Calendar – hides when focus leaves the whole component", async () => {
+      const component = mount(UDatePicker, {
+        props: {
+          modelValue: new Date(),
+        },
+        attachTo: document.body,
+      });
+
+      const input = component.getComponent(UInput).find("input");
+      const calendar = component.findComponent({ name: "UCalendar" });
+
+      await input.trigger("focus");
+      expect(calendar.isVisible()).toBe(true);
+
+      const outsideElement = document.createElement("button");
+
+      document.body.appendChild(outsideElement);
+
+      await component.trigger("focusout", { relatedTarget: outsideElement });
+
+      expect(calendar.isVisible()).toBe(false);
+
+      outsideElement.remove();
+      component.unmount();
+    });
+
+    it("Calendar – stays open when focus moves inside the component", async () => {
+      const component = mount(UDatePicker, {
+        props: {
+          modelValue: new Date(),
+        },
+        attachTo: document.body,
+      });
+
+      const input = component.getComponent(UInput).find("input");
+      const calendar = component.findComponent({ name: "UCalendar" });
+
+      await input.trigger("focus");
+      expect(calendar.isVisible()).toBe(true);
+
+      await component.trigger("focusout", { relatedTarget: calendar.element });
+
+      expect(calendar.isVisible()).toBe(true);
+
+      component.unmount();
+    });
+
     it("Calendar – hides when escape key is pressed on calendar", async () => {
       const component = mount(UDatePicker, {
         props: {

package/ui.form-listbox/UListbox.vue

@@ -580,6 +580,7 @@ const {
         <UButton
           round
           square
+          tabindex="-1"
           v-bind="addOptionButtonAttrs"
           :data-test="getDataTest('add-button')"
           @click="onClickAddOption"

package/ui.form-select/USelect.vue

@@ -556,7 +556,7 @@ const {
 
     <div
       ref="wrapper"
-      :tabindex="searchable || disabled ? -1 : 0"
+      :tabindex="disabled ? -1 : searchable && isOpen ? -1 : 0"
       role="combobox"
       :aria-expanded="ariaExpanded"
       aria-haspopup="listbox"

package/ui.form-select/tests/USelect.test.ts

@@ -255,6 +255,63 @@ describe("USelect.vue", () => {
       expect(component.getComponent(UListbox).props("searchable")).toBe(true);
     });
 
+    it("Searchable – closes when the search input blurs to an outside element", async () => {
+      const component = mount(USelect, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+        },
+        attachTo: document.body,
+      });
+
+      await component.get("[role='combobox']").trigger("focus");
+      await flushPromises();
+
+      expect(component.emitted("open")).toBeTruthy();
+
+      const outside = document.createElement("button");
+
+      document.body.appendChild(outside);
+
+      await component
+        .getComponent(UListbox)
+        .get("input")
+        .trigger("blur", { relatedTarget: outside });
+      await flushPromises();
+
+      expect(component.emitted("close")).toBeTruthy();
+      expect(component.findComponent(UListbox).exists()).toBe(false);
+
+      outside.remove();
+      component.unmount();
+    });
+
+    it("Searchable – stays open when focus moves within its own listbox", async () => {
+      const component = mount(USelect, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+        },
+        attachTo: document.body,
+      });
+
+      await component.get("[role='combobox']").trigger("focus");
+      await flushPromises();
+
+      const listboxEl = component.getComponent(UListbox).element as HTMLElement;
+
+      await component
+        .getComponent(UListbox)
+        .get("input")
+        .trigger("blur", { relatedTarget: listboxEl });
+      await flushPromises();
+
+      expect(component.emitted("close")).toBeFalsy();
+      expect(component.findComponent(UListbox).exists()).toBe(true);
+
+      component.unmount();
+    });
+
     it("Search v-model – passes search to UListbox and filters", async () => {
       const component = mount(USelect, {
         props: {

package/ui.form-switch/USwitch.vue

@@ -68,16 +68,19 @@ function toggle() {
   }
 }
 
-function onClickToggle(event: Event) {
-  event.stopPropagation();
-  toggle();
-}
-
-function onKeydownSpace() {
-  toggle();
+/**
+ * Toggles when the visible track is clicked. Clicks forwarded from the label
+ * arrive on the hidden checkbox (which already toggles via v-model), so skip
+ * those to avoid a double toggle.
+ */
+function onClickWrapper(event: MouseEvent) {
+  if ((event.target as HTMLElement)?.tagName !== "INPUT") {
+    toggle();
+  }
 }
 
-function onClickWrapper() {
+function onKeydownToggle(event: Event) {
+  event.preventDefault();
   toggle();
 }
 
@@ -119,7 +122,6 @@ const {
     :disabled="disabled"
     v-bind="switchLabelAttrs"
     :data-test="getDataTest()"
-    @click="onClickToggle"
   >
     <template #label>
       <!--
@@ -141,9 +143,9 @@ const {
       ref="wrapper"
       tabindex="0"
       v-bind="wrapperAttrs"
-      @keydown.enter="onKeydownSpace"
-      @keydown.space.prevent="onKeydownSpace"
       @click="onClickWrapper"
+      @keydown.enter="onKeydownToggle"
+      @keydown.space="onKeydownToggle"
     >
       <input
         :id="elementId"
@@ -154,7 +156,6 @@ const {
         :aria-labelledby="inputAriaLabelledBy"
         :aria-label="!hasLabel ? localeMessages.switch : undefined"
         v-bind="inputAttrs"
-        @click="onClickToggle"
       />
 
       <span v-bind="circleAttrs">

package/ui.form-switch/tests/USwitch.test.ts

@@ -13,6 +13,7 @@ describe("USwitch.vue", () => {
       const modelValue = true;
 
       const component = mount(USwitch, {
+        attachTo: document.body,
         props: {
           modelValue,
           "onUpdate:modelValue": (e) => component.setProps({ modelValue: e }),
@@ -28,6 +29,8 @@ describe("USwitch.vue", () => {
       await inputElement.trigger("click");
 
       expect(component.emitted("update:modelValue")![1][0]).toBe(true);
+
+      component.unmount();
     });
 
     it("Label – passes label to ULabel component", () => {
@@ -199,6 +202,154 @@ describe("USwitch.vue", () => {
     });
   });
 
+  describe("Toggle behavior", () => {
+    it("Label click – plain-text label toggles exactly once", async () => {
+      const component = mount(USwitch, {
+        attachTo: document.body,
+        props: {
+          modelValue: false,
+          label: "Test Label",
+        },
+      });
+
+      await component.find("label").trigger("click");
+
+      const emitted = component.emitted("update:modelValue");
+
+      expect(emitted).toHaveLength(1);
+      expect(emitted![0][0]).toBe(true);
+
+      component.unmount();
+    });
+
+    it("Label slot click – #label slot content toggles exactly once", async () => {
+      const component = mount(USwitch, {
+        attachTo: document.body,
+        props: {
+          modelValue: false,
+        },
+        slots: {
+          label: "Custom Label Content",
+        },
+      });
+
+      await component.find("label").trigger("click");
+
+      const emitted = component.emitted("update:modelValue");
+
+      expect(emitted).toHaveLength(1);
+      expect(emitted![0][0]).toBe(true);
+
+      component.unmount();
+    });
+
+    // The track (wrapper) is a sibling of the <label>, outside its `for` forwarding,
+    // so its own @click="toggle" is the only path — clicking it must toggle exactly once.
+    it("Track click – wrapper toggles exactly once", async () => {
+      const component = mount(USwitch, {
+        attachTo: document.body,
+        props: {
+          modelValue: false,
+        },
+      });
+
+      await component.get("[vl-key='wrapper']").trigger("click");
+
+      const emitted = component.emitted("update:modelValue");
+
+      expect(emitted).toHaveLength(1);
+      expect(emitted![0][0]).toBe(true);
+
+      component.unmount();
+    });
+
+    it("Track click – disabled wrapper emits nothing", async () => {
+      const component = mount(USwitch, {
+        attachTo: document.body,
+        props: {
+          modelValue: false,
+          disabled: true,
+        },
+      });
+
+      await component.get("[vl-key='wrapper']").trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeUndefined();
+
+      component.unmount();
+    });
+
+    it("Keyboard – Enter toggles exactly once", async () => {
+      const component = mount(USwitch, {
+        attachTo: document.body,
+        props: {
+          modelValue: false,
+        },
+      });
+
+      await component.get("[vl-key='wrapper']").trigger("keydown.enter");
+
+      const emitted = component.emitted("update:modelValue");
+
+      expect(emitted).toHaveLength(1);
+      expect(emitted![0][0]).toBe(true);
+
+      component.unmount();
+    });
+
+    it("Keyboard – Space toggles exactly once", async () => {
+      const component = mount(USwitch, {
+        attachTo: document.body,
+        props: {
+          modelValue: false,
+        },
+      });
+
+      await component.get("[vl-key='wrapper']").trigger("keydown.space");
+
+      const emitted = component.emitted("update:modelValue");
+
+      expect(emitted).toHaveLength(1);
+      expect(emitted![0][0]).toBe(true);
+
+      component.unmount();
+    });
+
+    it("Disabled – label click emits nothing", async () => {
+      const component = mount(USwitch, {
+        attachTo: document.body,
+        props: {
+          modelValue: false,
+          label: "Test Label",
+          disabled: true,
+        },
+      });
+
+      await component.find("label").trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeUndefined();
+
+      component.unmount();
+    });
+
+    it("Disabled – keyboard emits nothing", async () => {
+      const component = mount(USwitch, {
+        attachTo: document.body,
+        props: {
+          modelValue: false,
+          disabled: true,
+        },
+      });
+
+      await component.get("[vl-key='wrapper']").trigger("keydown.enter");
+      await component.get("[vl-key='wrapper']").trigger("keydown.space");
+
+      expect(component.emitted("update:modelValue")).toBeUndefined();
+
+      component.unmount();
+    });
+  });
+
   describe("Slots", () => {
     it("Label – renders custom content from label slot", () => {
       const customLabelContent = "Custom Label Content";

package/v.tooltip/vTooltip.ts

@@ -64,7 +64,7 @@ function setUpTippy(el: HTMLElement, props: string | TippyProps) {
     return;
   }
 
-  if (typeof props !== "string" && props.content && String(props.content).length) {
+  if (typeof props !== "string" && props && props.content && String(props.content).length) {
     tippy(el, merge({}, settings, props || {}));
   }
 }