vueless 1.2.8-beta.5 → 1.2.8-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.8-beta.5",
+  "version": "1.2.8-beta.6",
   "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-checkbox/tests/UCheckbox.test.ts

@@ -261,7 +261,7 @@ describe("UCheckbox.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(customLabelContent);
     });
@@ -279,7 +279,7 @@ describe("UCheckbox.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
     });

package/ui.form-checkbox-group/tests/UCheckboxGroup.test.ts

@@ -201,7 +201,7 @@ describe("UCheckboxGroup.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(customLabelContent);
     });
@@ -219,7 +219,7 @@ describe("UCheckboxGroup.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
     });

package/ui.form-input/tests/UInput.test.ts

@@ -318,7 +318,7 @@ describe("UInput.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(customLabelContent);
     });
@@ -336,7 +336,7 @@ describe("UInput.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
     });

package/ui.form-input-file/tests/UInputFile.test.ts

@@ -269,7 +269,7 @@ describe("UInputFile.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(customLabelContent);
     });
@@ -287,7 +287,7 @@ describe("UInputFile.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(`Custom ${defaultLabel}`);
     });

package/ui.form-label/ULabel.vue

@@ -33,6 +33,10 @@ const isHorizontalPlacement = computed(() => {
   return props.align === PLACEMENT.left || props.align === PLACEMENT.right;
 });
 
+const tag = computed(() => {
+  return props.for ? "label" : "div";
+});
+
 const isTopWithDescPlacement = computed(() => {
   return props.align === PLACEMENT.topWithDesc;
 });
@@ -95,7 +99,8 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
 
     <!-- `v-bind` isn't assigned, because the div is system -->
     <div v-if="label || hasSlotContent(slots['label'], { label }) || error || description">
-      <label
+      <component
+        :is="tag"
         v-if="label || hasSlotContent(slots['label'], { label })"
         ref="label"
         :for="props.for"
@@ -110,7 +115,7 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
         <slot name="label" :label="label">
           {{ label }}
         </slot>
-      </label>
+      </component>
 
       <div
         v-if="isShownError"
@@ -132,7 +137,8 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
   </div>
 
   <div v-else ref="wrapper" v-bind="wrapperAttrs">
-    <label
+    <component
+      :is="tag"
       v-if="label || hasSlotContent(slots['label'], { label })"
       v-bind="labelAttrs"
       ref="label"
@@ -147,7 +153,7 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
       <slot name="label" :label="label">
         {{ label }}
       </slot>
-    </label>
+    </component>
 
     <div v-bind="contentAttrs" :data-test="getDataTest('content')">
       <!-- @slot Use it to add label content. -->

package/ui.form-label/tests/ULabel.test.ts

@@ -16,7 +16,7 @@ describe("ULabel.vue", () => {
         },
       });
 
-      expect(component.get("label").text()).toContain(label);
+      expect(component.find("[vl-key='label']").text()).toContain(label);
     });
 
     it("For – applied to label element", () => {
@@ -29,7 +29,7 @@ describe("ULabel.vue", () => {
         },
       });
 
-      expect(component.get("label").attributes("for")).toBe(forId);
+      expect(component.find("[vl-key='label']").attributes("for")).toBe(forId);
     });
 
     it("For – applies interactive classes when true", () => {
@@ -42,7 +42,7 @@ describe("ULabel.vue", () => {
         },
       });
 
-      expect(component.get("label").attributes("class")).toContain(interactiveClasses);
+      expect(component.find("[vl-key='label']").attributes("class")).toContain(interactiveClasses);
     });
 
     it("Description – description is rendered with provided text", () => {
@@ -133,7 +133,7 @@ describe("ULabel.vue", () => {
           },
         });
 
-        expect(component.get("label").attributes("class")).toContain(expectedClass);
+        expect(component.find("[vl-key='label']").attributes("class")).toContain(expectedClass);
       });
     });
 
@@ -148,7 +148,7 @@ describe("ULabel.vue", () => {
       });
 
       expect(component.attributes("class")).toContain(disabledClasses);
-      expect(component.get("label").attributes("class")).toContain(disabledClasses);
+      expect(component.find("[vl-key='label']").attributes("class")).toContain(disabledClasses);
     });
 
     it("Disabled – does not apply disabled class when false", () => {
@@ -162,7 +162,7 @@ describe("ULabel.vue", () => {
       });
 
       expect(component.attributes("class")).not.toContain(disabledClasses);
-      expect(component.get("label").attributes("class")).not.toContain(disabledClasses);
+      expect(component.find("[vl-key='label']").attributes("class")).not.toContain(disabledClasses);
     });
 
     it("Disabled – interactive class is not applied when disabled true", () => {
@@ -176,7 +176,9 @@ describe("ULabel.vue", () => {
         },
       });
 
-      expect(component.get("label").attributes("class")).not.toContain(interactiveClasses);
+      expect(component.find("[vl-key='label']").attributes("class")).not.toContain(
+        interactiveClasses,
+      );
     });
 
     it("Disabled – topInside label doesn't have focus styles disabled", () => {
@@ -190,7 +192,7 @@ describe("ULabel.vue", () => {
         },
       });
 
-      expect(component.get("label").attributes("class")).not.toContain(focusClasses);
+      expect(component.find("[vl-key='label']").attributes("class")).not.toContain(focusClasses);
     });
 
     it("Disabled – error is not rendered when disabled is true", () => {
@@ -294,7 +296,7 @@ describe("ULabel.vue", () => {
         },
       });
 
-      const labelElement = component.get("label");
+      const labelElement = component.find("[vl-key='label']");
 
       expect(labelElement.text()).toBe(slotContent);
       expect(labelElement.text()).not.toContain(defaultLabel);
@@ -313,7 +315,7 @@ describe("ULabel.vue", () => {
         },
       });
 
-      expect(component.get("label").text()).toBe(slotContent);
+      expect(component.find("[vl-key='label']").text()).toBe(slotContent);
     });
 
     it("Bottom – renders content from bottom slot", () => {
@@ -337,7 +339,7 @@ describe("ULabel.vue", () => {
         },
       });
 
-      const labelElement = component.get("label");
+      const labelElement = component.find("[vl-key='label']");
 
       await labelElement.trigger("click");
 
@@ -346,7 +348,7 @@ describe("ULabel.vue", () => {
   });
 
   describe("Exposed properties", () => {
-    it("Exposes label element ref", () => {
+    it("Exposes label element ref as a div", () => {
       const defaultLabel = "Label";
 
       const component = mount(ULabel, {
@@ -355,6 +357,21 @@ describe("ULabel.vue", () => {
         },
       });
 
+      expect(component.vm.labelElement).toBeDefined();
+      expect(component.vm.labelElement!.tagName).toBe("DIV");
+      expect(component.vm.labelElement!.textContent).toBe(defaultLabel);
+    });
+
+    it("Exposes label element ref as a label", () => {
+      const defaultLabel = "Label";
+
+      const component = mount(ULabel, {
+        props: {
+          label: defaultLabel,
+          for: "test-id",
+        },
+      });
+
       expect(component.vm.labelElement).toBeDefined();
       expect(component.vm.labelElement!.tagName).toBe("LABEL");
       expect(component.vm.labelElement!.textContent).toBe(defaultLabel);

package/ui.form-radio/tests/URadio.test.ts

@@ -183,7 +183,7 @@ describe("URadio.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(customLabelContent);
     });
@@ -201,7 +201,7 @@ describe("URadio.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
     });

package/ui.form-radio-group/tests/URadioGroup.test.ts

@@ -211,7 +211,7 @@ describe("URadioGroup.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(customLabelContent);
     });
@@ -230,7 +230,7 @@ describe("URadioGroup.vue", () => {
       });
 
       const labelComponent = component.getComponent(ULabel);
-      const labelElement = labelComponent.find("label");
+      const labelElement = labelComponent.find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
     });

package/ui.form-select/USelect.vue

@@ -483,7 +483,6 @@ const {
 <template>
   <ULabel
     ref="labelComponent"
-    :for="elementId"
     :size="size"
     :label="label"
     :error="error"

package/ui.form-textarea/tests/UTextarea.test.ts

@@ -408,7 +408,7 @@ describe("UTextarea.vue", () => {
         },
       });
 
-      const labelElement = component.getComponent(ULabel).find("label");
+      const labelElement = component.getComponent(ULabel).find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(customLabelContent);
     });
@@ -425,7 +425,7 @@ describe("UTextarea.vue", () => {
         },
       });
 
-      const labelElement = component.getComponent(ULabel).find("label");
+      const labelElement = component.getComponent(ULabel).find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
     });

package/utils/theme.ts

@@ -608,7 +608,7 @@ function getLetterSpacing(letterSpacing?: ThemeConfig["letterSpacing"]) {
   const storageKey = `vl-${LETTER_SPACING}`;
 
   const spacing = letterSpacing ?? getStored(storageKey) ?? vuelessConfig.letterSpacing;
-  const mergedSpacing = Math.max(0, Number(spacing ?? DEFAULT_LETTER_SPACING));
+  const mergedSpacing = Number(spacing ?? DEFAULT_LETTER_SPACING);
 
   if (isCSR && letterSpacing !== undefined) {
     setCookie(storageKey, String(mergedSpacing));