vueless 1.2.10-beta.3 → 1.2.10-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.10-beta.3",
+  "version": "1.2.10-beta.4",
   "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/UButton.vue

@@ -62,6 +62,7 @@ defineExpose({
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const mutatedProps = computed(() => ({
+  icon: Boolean(props.icon) || hasSlotContent(slots["default"]),
   leftIcon: Boolean(props.leftIcon) || hasSlotContent(slots["left"]),
   rightIcon: Boolean(props.rightIcon) || hasSlotContent(slots["right"]),
   label: Boolean(props.label),
@@ -129,11 +130,6 @@ const {
     </template>
 
     <!-- This is needed to prevent changing button height -->
-    <div
-      v-if="(!label && !hasSlotContent(slots['default']) && !icon) || loading"
-      tabindex="-1"
-      v-bind="invisibleAttrs"
-      v-text="'invisible'"
-    />
+    <div v-if="icon || loading" tabindex="-1" v-bind="invisibleAttrs" v-text="'invisible'" />
   </component>
 </template>

package/ui.button/config.ts

@@ -54,6 +54,9 @@ export default /*tw*/ {
       loading: {
         true: "gap-0 pointer-events-none",
       },
+      icon: {
+        true: "gap-0",
+      },
       label: {
         false: "gap-0",
       },
@@ -62,6 +65,8 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
+      { label: false, leftIcon: true, class: "gap-0" },
+      { label: false, rightIcon: true, class: "gap-0" },
       { square: true, size: "2xs", class: "p-1" },
       { square: true, size: "xs", class: "p-1.5" },
       { square: true, size: "sm", class: "p-2" },

package/ui.button/tests/UButton.test.ts

@@ -115,7 +115,7 @@ describe("UButton.vue", () => {
 
       const nestedUIconComponents = component.findAllComponents(UIcon);
 
-      expect(component.text()).toBe("");
+      expect(component.text()).not.toBe(label);
       expect(nestedUIconComponents.length).toBe(1);
       expect(nestedUIconComponents[0].props("name")).toBe(icon);
     });

package/ui.form-calendar/tests/UCalendar.test.ts

@@ -375,7 +375,7 @@ describe("UCalendar.vue", () => {
         },
       });
 
-      const nextPrevButtons = component.findAll('[vl-key="nextPrevButton"]');
+      const nextPrevButtons = component.findAll('button[vl-key="nextPrevButton"]');
 
       expect(nextPrevButtons.length).toBe(4);
     });
@@ -391,7 +391,7 @@ describe("UCalendar.vue", () => {
           },
         });
 
-        const nextPrevButtons = component.findAll('[vl-key="nextPrevButton"]');
+        const nextPrevButtons = component.findAll('button[vl-key="nextPrevButton"]');
 
         expect(nextPrevButtons.length).toBe(2);
       });
@@ -422,7 +422,7 @@ describe("UCalendar.vue", () => {
 
       const dayView = component.findComponent(DayView);
       const initialDays = dayView.findAll('[vl-key="day"]').map((day) => day.text());
-      const navButtons = component.findAll('[vl-key="nextPrevButton"]');
+      const navButtons = component.findAll('button[vl-key="nextPrevButton"]');
 
       expect(navButtons.length).toBe(4);
 
@@ -446,7 +446,7 @@ describe("UCalendar.vue", () => {
 
       const dayView = component.findComponent(DayView);
       const initialDays = dayView.findAll('[vl-key="day"]').map((day) => day.text());
-      const navButtons = component.findAll('[vl-key="nextPrevButton"]');
+      const navButtons = component.findAll('button[vl-key="nextPrevButton"]');
       const nextButton = navButtons[2];
 
       await nextButton.trigger("click");