vueless 1.4.12-beta.13 → 1.4.12-beta.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.13",
+  "version": "1.4.12-beta.15",
   "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.data-list/UDataList.vue

@@ -42,6 +42,10 @@ function isCrossed(element: DataListItem) {
   return Boolean(element.crossed);
 }
 
+function hasNestedList(element: DataListItem) {
+  return Boolean(element.children?.length || (props.nestedKey && element[props.nestedKey]));
+}
+
 function onDragEnd() {
   const sortData = prepareSortData(props.list);
 
@@ -181,14 +185,33 @@ const {
           </div>
 
           <UDataList
-            v-if="element.children?.length"
+            v-if="hasNestedList(element)"
             hide-empty-state-for-nesting
             :list="element.children"
             :group="group"
+            :size="size"
+            :label-key="labelKey"
+            :value-key="valueKey"
+            :nested-key="nestedKey"
+            :animation-duration="animationDuration"
+            :force-fallback="forceFallback"
+            :fallback-on-body="fallbackOnBody"
+            :fallback-class="fallbackClass"
             v-bind="nestedAttrs"
+            :class="!element.children?.length && 'min-h-4'"
             :data-test="getDataTest('table')"
             @drag-sort="onDragEnd"
           >
+            <!-- @vue-ignore -->
+            <template #drag="slotProps: { item: DataListItem; iconName: string }">
+              <!--
+                @slot Use it to add something instead of the drag icon.
+                @binding {object} item
+                @binding {string} icon-name
+              -->
+              <slot name="drag" :item="slotProps.item" :icon-name="slotProps.iconName" />
+            </template>
+
             <!-- @vue-ignore -->
             <template #label="slotProps: { item: DataListItem; crossed: boolean }">
               <!--
@@ -196,12 +219,7 @@ const {
                 @binding {object} item
                 @binding {boolean} crossed
               -->
-              <slot name="label" :item="slotProps.item" :crossed="slotProps.crossed">
-                <div
-                  v-bind="slotProps.crossed ? labelCrossedAttrs : labelAttrs"
-                  v-text="slotProps.item[labelKey]"
-                />
-              </slot>
+              <slot name="label" :item="slotProps.item" :crossed="slotProps.crossed" />
             </template>
 
             <!-- @vue-ignore -->

package/ui.data-list/tests/UDataList.test.ts

@@ -253,6 +253,52 @@ describe("UDataList.vue", () => {
       expect(nestedComponent.props("list")).toEqual(nestedList[0].children);
     });
 
+    it("Nesting – renders empty nested drop-zone for childless items when nestedKey is truthy", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: [{ value: 1, label: "Leaf", canNest: true }],
+          nestedKey: "canNest",
+        },
+      });
+
+      const nestedComponent = component.findComponent("[vl-key='nested']");
+
+      expect(nestedComponent.exists()).toBe(true);
+    });
+
+    it("Nesting – does not render drop-zone for childless items when nestedKey value is falsy", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: [{ value: 1, label: "Leaf", canNest: false }],
+          nestedKey: "canNest",
+        },
+      });
+
+      const nestedComponent = component.findComponent("[vl-key='nested']");
+
+      expect(nestedComponent.exists()).toBe(false);
+    });
+
+    it("Nesting – emits dragged item with parentValue of the leaf after drop into empty drop-zone", async () => {
+      const leaf: DataListItem = { value: 1, label: "Leaf", canNest: true, children: [] };
+      const list: DataListItem[] = [leaf, { value: 2, label: "Dragged", canNest: true }];
+
+      const component = mount(UDataList, {
+        props: { list, nestedKey: "canNest" },
+      });
+
+      // Simulate vuedraggable moving item 2 into the leaf's (previously empty) nested list.
+      list.splice(1, 1);
+      leaf.children!.push({ value: 2, label: "Dragged", canNest: true });
+
+      await component.findComponent(draggable).vm.$emit("end");
+
+      const sortData = component.emitted("dragSort")?.[0]?.[0] as DataListItem[];
+      const dragged = sortData.find((item) => item.value === 2);
+
+      expect(dragged?.parentValue).toBe(leaf.value);
+    });
+
     it("Data Test – applies correct data-test attribute", () => {
       const dataTest = "test-data-list";
 

package/ui.data-list/types.ts

@@ -70,6 +70,12 @@ export interface Props {
    */
   hideEmptyStateForNesting?: boolean;
 
+  /**
+   * Item key whose truthy value renders an empty nested drop-zone,
+   * so a deeper level can be created by drag even without children.
+   */
+  nestedKey?: string;
+
   /**
    * Component config object.
    */

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/utils/node/loaderIcon.js

@@ -227,7 +227,7 @@ async function findAndCopyIcons(files, library, vuelessConfig, debug) {
     const iconPropsPattern = `\\b\\w*(name|icon)\\w*\\s*=\\s*(['"])(.*?)\\2`;
     const uComponentIconNamePattern =
       // eslint-disable-next-line vue/max-len
-      /<UIcon\b[^>]*?\b(name)\s*[:=]\s*(['"])(.*?)\2[^>]*?>|<(?!UIcon\b)(U\w+)\b[^>]*?\b(\w*icon\w*)\s*[:=]\s*(['"])(.*?)\6[^>]*?>/;
+      /<UIcon\b[^>]*?\b(name)\s*[:=]\s*(['"])(.*?)\2[^>]*?>|<(?!UIcon\b)([A-Z]\w+)\b[^>]*?\b(\w*icon\w*)\s*[:=]\s*(['"])(.*?)\6[^>]*?>/;
 
     const uComponentIconNameArray = fileContents.match(new RegExp(uComponentIconNamePattern, "g"));
 

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 || {}));
   }
 }