vueless 1.4.12-beta.15 → 1.4.12-beta.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.15",
+  "version": "1.4.12-beta.17",
   "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.button/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   button: {
     base: `
       flex items-center justify-center font-medium leading-snug! whitespace-nowrap
-      border border-solid outline-solid outline-transparent transition cursor-pointer
+      border border-solid outline-solid outline-medium outline-transparent transition cursor-pointer
       focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-{color}
       disabled:cursor-not-allowed disabled:outline-0 disabled:outline-offset-0
     `,

package/ui.button-link/config.ts

@@ -5,7 +5,7 @@ export default /*tw*/ {
       text-{color} decoration-{color} underline-offset-4
       hover:text-{color}-lifted hover:decoration-{color}-lifted
       active:text-{color}-accented active:decoration-{color}-accented
-      outline-solid outline-transparent
+      outline-solid outline-medium outline-transparent
       focus-visible:outline-medium focus-visible:rounded-small
       focus-visible:outline-offset-4 focus-visible:outline-{color}
     `,

package/ui.container-collapsible/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: {
     base: `
-      relative inline-block h-max rounded-medium transition cursor-pointer outline-solid outline-transparent
+      relative inline-block h-max rounded-medium transition cursor-pointer outline-solid outline-medium outline-transparent
       focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-primary`,
     variants: {
       disabled: {

package/ui.dropdown-link/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: `
       {UDropdown}
       inline-flex gap-0.5 items-center justify-between rounded-small h-max
-      outline-solid outline-transparent
+      outline-solid outline-0 outline-transparent
       focus-visible:outline-offset-4
     `,
     defaults: {

package/ui.form-calendar/config.ts

@@ -56,7 +56,7 @@ export default /*tw*/ {
   timepicker: "mt-2 pl-1 pt-3 text-medium flex items-stretch justify-between gap-2 border-t border-muted",
   timepickerLabel: "w-full self-center",
   timepickerInputWrapper: `
-    flex items-center rounded-medium border border-solid border-default outline-solid outline-transparent
+    flex items-center rounded-medium border border-solid border-default outline-solid outline-small outline-transparent
     hover:focus-within:border-primary focus-within:border-primary
     focus-within:outline focus-within:outline-small focus-within:outline-primary
   `,

package/ui.form-checkbox/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
   },
   checkbox: {
     base: `
-      {>checkboxBase} ml-0 bg-default border border-solid border-default outline-solid outline-transparent
+      {>checkboxBase} ml-0 bg-default border border-solid border-default outline-solid outline-medium outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted
       active:border-{color} active:bg-{color}/15

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-input/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex gap-3 w-full px-3 relative bg-default transition
-      border border-solid rounded-medium border-default outline-solid outline-transparent
+      border border-solid rounded-medium border-default outline-solid outline-small outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,

package/ui.form-input-file/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
   dropzone: {
     base: `
       p-3 size-auto w-full bg-default transition
-      rounded-medium border border-solid border-default outline-solid outline-transparent
+      rounded-medium border border-solid border-default outline-solid outline-small outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary
     `,

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-radio/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
   radio: {
     base: `
       bg-default cursor-pointer transition
-      border border-solid border-default rounded-full outline-solid outline-transparent
+      border border-solid border-default rounded-full outline-solid outline-medium outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted hover:checked:border-{color}
       active:border-{color} active:bg-{color}/15

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/config.ts

@@ -11,10 +11,10 @@ export default /*tw*/ {
   },
   wrapper: {
     base: `
-      flex flex-row-reverse justify-between w-full min-h-full box-border relative
-      rounded-medium border border-solid border-default bg-default outline-solid outline-transparent
-      hover:border-lifted hover:transition hover:focus-within:border-primary focus-within:border-primary
-      focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
+      flex flex-row-reverse justify-between w-full min-h-full box-border relative transition
+      rounded-medium border border-solid border-default bg-default outline-solid outline-small outline-transparent
+      hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
+      focus-within:outline focus-within:outline-small focus-within:outline-primary
     `,
     variants: {
       error: {

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/config.ts

@@ -6,7 +6,8 @@ export default /*tw*/ {
   },
   wrapper: {
     base: `
-      flex items-center p-0.5 relative rounded-full outline-solid outline-transparent cursor-pointer transition focus-within:transition
+      flex items-center p-0.5 relative cursor-pointer transition focus-within:transition
+      rounded-full outline-solid outline-medium outline-transparent
       focus-visible:outline focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-{color}
     `,
     variants: {

package/ui.form-textarea/config.ts

@@ -15,7 +15,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex px-3 py-2 gap-3 w-full bg-default transition
-      rounded-medium border border-solid border-default outline-solid outline-transparent
+      rounded-medium border border-solid border-default outline-solid outline-small outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,

package/ui.text-badge/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   badge: {
     base: `
       inline-flex items-center justify-between py-1
-      border border-solid rounded-medium leading-none! outline-solid outline-transparent
+      border border-solid rounded-medium leading-none! outline-solid outline-medium outline-transparent
     `,
     variants: {
       variant: {