vueless 1.3.6-beta.5 → 1.3.6-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.6-beta.5",
+  "version": "1.3.6-beta.7",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -57,7 +57,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.3.8",
+    "@vueless/storybook": "^1.3.14",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^10.0.2",
     "eslint-plugin-vue": "^10.3.0",

package/ui.button/UButton.vue

@@ -62,7 +62,7 @@ defineExpose({
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const mutatedProps = computed(() => ({
-  icon: Boolean(props.icon) || hasSlotContent(slots["default"]),
+  icon: Boolean(props.icon) || (!props.label && hasSlotContent(slots["default"])),
   leftIcon: Boolean(props.leftIcon) || hasSlotContent(slots["left"]),
   rightIcon: Boolean(props.rightIcon) || hasSlotContent(slots["right"]),
   label: Boolean(props.label),

package/ui.form-date-picker-range/UDatePickerRangeInputs.vue

@@ -16,7 +16,9 @@ type UInputRef = InstanceType<typeof UInput>;
 
 defineOptions({ internal: true });
 
-const props = defineProps<UDatePickerRangeInputsProps>();
+const props = withDefaults(defineProps<UDatePickerRangeInputsProps>(), {
+  dataTest: null,
+});
 
 const rangeInputStartRef = useTemplateRef<UInputRef>("range-input-start");
 const rangeInputEndRef = useTemplateRef<UInputRef>("range-input-end");
@@ -140,6 +142,7 @@ defineExpose({
       v-bind="attrs.rangeInputFirstAttrs.value"
       :name="rangeInputName"
       no-autocomplete
+      :data-test="`${dataTest}-from`"
       @blur="updateDateValue(rangeStart, InputRangeType.Start)"
       @keydown.enter="updateDateValue(rangeStart, InputRangeType.Start)"
       @input="validateInput($event, InputRangeType.Start)"
@@ -153,6 +156,7 @@ defineExpose({
       v-bind="attrs.rangeInputLastAttrs.value"
       :name="rangeInputName"
       no-autocomplete
+      :data-test="`${dataTest}-to`"
       @blur="updateDateValue(rangeEnd, InputRangeType.End)"
       @keydown.enter="updateDateValue(rangeEnd, InputRangeType.End)"
       @input="validateInput($event, InputRangeType.End)"

package/ui.form-date-picker-range/types.ts

@@ -74,6 +74,7 @@ export interface UDatePickerRangeInputsProps {
   minDate: string | Date | undefined;
   config: Config;
   attrs: UDatePickerRangeInputsAttrs;
+  dataTest?: string | null;
 }
 
 export interface CustomRangeButton {

package/ui.navigation-tab/tests/UTab.test.ts

@@ -1,4 +1,3 @@
-import { h } from "vue";
 import { mount } from "@vue/test-utils";
 import { describe, it, expect, vi } from "vitest";
 
@@ -386,7 +385,7 @@ describe("UTab.vue", () => {
           value,
         },
         slots: {
-          left: (props) => h("div", { "data-active": props.active }),
+          left: '<div :data-active="params.active" />',
         },
         global: {
           provide: {
@@ -409,7 +408,7 @@ describe("UTab.vue", () => {
           leftIcon,
         },
         slots: {
-          left: (props) => h("div", { "data-icon-name": props.iconName }),
+          left: '<div :data-icon-name="params.iconName" />',
         },
         global: {
           provide: defaultProvide,

package/ui.navigation-tabs/UTabs.vue

@@ -128,7 +128,50 @@ const {
           :disabled="item.disabled"
           v-bind="tabAttrs"
           :data-test="getDataTest(`item-${index}`)"
-        />
+        >
+          <template #left="{ iconName, active }">
+            <!--
+              @slot Use it to add something before the tab label.
+              @binding {object} item
+              @binding {number} index
+              @binding {boolean} active
+              @binding {string} icon-name
+            -->
+            <slot name="left" :item="item" :index="index" :active="active" :icon-name="iconName" />
+          </template>
+
+          <template #label="{ label, iconName, active }">
+            <!--
+              @slot Use it to add something instead of the tab label.
+              @binding {object} item
+              @binding {number} index
+              @binding {string} label
+              @binding {boolean} active
+              @binding {string} icon-name
+            -->
+            <slot
+              name="label"
+              :item="item"
+              :index="index"
+              :label="label"
+              :active="active"
+              :icon-name="iconName"
+            >
+              {{ label }}
+            </slot>
+          </template>
+
+          <template #right="{ iconName, active }">
+            <!--
+              @slot Use it to add something after the tab label.
+              @binding {object} item
+              @binding {number} index
+              @binding {boolean} active
+              @binding {string} icon-name
+            -->
+            <slot name="right" :item="item" :index="index" :active="active" :icon-name="iconName" />
+          </template>
+        </UTab>
       </slot>
     </div>
 

package/ui.navigation-tabs/storybook/stories.ts

@@ -10,6 +10,12 @@ import UTabs from "../../ui.navigation-tabs/UTabs.vue";
 import URow from "../../ui.container-row/URow.vue";
 import ULabel from "../../ui.form-label/ULabel.vue";
 import UTab from "../../ui.navigation-tab/UTab.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+import UChip from "../../ui.other-chip/UChip.vue";
+import UText from "../../ui.text-block/UText.vue";
+
+import johnDoe from "../../ui.navigation-tab/storybook/assets/john-doe.png";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
@@ -109,6 +115,33 @@ export const DefaultSlot: StoryFn<UTabsArgs> = (args) => ({
   `,
 });
 
+export const TabSlots: StoryFn<UTabsArgs> = (args) => ({
+  components: { UTabs, UBadge, UAvatar, UChip, UText },
+  setup: () => ({ args, johnDoe }),
+  template: `
+    <UTabs v-model="args.modelValue" v-bind="args">
+      <template #left="{ index }">
+        <UAvatar
+          v-if="index === 0"
+          :src="johnDoe"
+          size="3xs"
+          rounded="full"
+        />
+      </template>
+
+      <template #label="{ label, index }">
+        <UChip v-if="index === 1" size="sm">
+          <UText :label="label" color="primary" class="mr-1.5" />
+        </UChip>
+      </template>
+
+      <template #right="{ index }">
+        <UBadge v-if="index === 2" label="New!" size="sm" />
+      </template>
+    </UTabs>
+  `,
+});
+
 export const PrevNextSlots: StoryFn<UTabsArgs> = (args) => ({
   components: { UTabs },
   setup: () => ({ args, getOptionsArray }),

package/ui.navigation-tabs/tests/UTabs.test.ts

@@ -284,6 +284,94 @@ describe("UTabs.vue", () => {
       expect(component.find(`.${slotClass}`).exists()).toBe(true);
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
+
+    it("Left – renders content from left slot for each tab", () => {
+      const slotText = "Left";
+      const slotClass = "left-content";
+
+      const component = mount(UTabs, {
+        props: {
+          options,
+        },
+        slots: {
+          left: `<span class="${slotClass}">${slotText}</span>`,
+        },
+      });
+
+      const leftContents = component.findAll(`.${slotClass}`);
+
+      expect(leftContents.length).toBe(options.length);
+      leftContents.forEach((left) => {
+        expect(left.text()).toBe(slotText);
+      });
+    });
+
+    it("Label – renders content from label slot instead of default label", () => {
+      const testOptions: UTabsOption[] = [{ value: "tab1", label: "Tab 1" }];
+      const slotText = "Custom Label";
+      const slotClass = "label-content";
+
+      const component = mount(UTabs, {
+        props: {
+          options: testOptions,
+        },
+        slots: {
+          label: `<span class="${slotClass}">${slotText}</span>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotText);
+      expect(component.text()).not.toContain(testOptions[0].label);
+    });
+
+    it("Right – renders content from right slot", () => {
+      const slotText = "Right";
+      const slotClass = "right-content";
+
+      const component = mount(UTabs, {
+        props: {
+          options,
+        },
+        slots: {
+          right: `<span class="${slotClass}">${slotText}</span>`,
+        },
+      });
+
+      expect(component.findAll(`.${slotClass}`).length).toBe(options.length);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotText);
+    });
+
+    it("Slot – passes item, index and active state to slots", () => {
+      const modelValue = "tab2";
+
+      const component = mount(UTabs, {
+        props: {
+          options,
+          modelValue,
+        },
+        slots: {
+          left: `
+            <div
+              :data-value="params.item.value"
+              :data-index="params.index"
+              :data-active="params.active"
+            />
+          `,
+        },
+      });
+
+      options.forEach((option, index) => {
+        const el = component.find(`[data-value="${option.value}"][data-index="${index}"]`);
+
+        expect(el.exists()).toBe(true);
+      });
+
+      const activeEl = component.find('[data-active="true"]');
+
+      expect(activeEl.exists()).toBe(true);
+      expect(activeEl.attributes("data-value")).toBe(modelValue);
+    });
   });
 
   describe("Events", () => {

package/ui.text-notify/UNotify.vue

@@ -44,7 +44,7 @@ onMounted(() => {
   window.addEventListener("notifyEnd", onNotifyEnd);
   window.addEventListener("notifyClearAll", onClearAll);
 
-  setPosition();
+  waitForPageElement();
 });
 
 onBeforeUnmount(() => {
@@ -86,12 +86,37 @@ function getOffsetWidth(selector: string): number {
   return element ? (element as HTMLElement).offsetWidth : 0;
 }
 
+function waitForPageElement() {
+  const positionClasses = vuelessConfig.components?.UNotify?.positionClasses;
+  const pageClass = positionClasses?.page || config.value?.positionClasses?.page;
+  const maxWaitTime = 2000;
+  const startTime = Date.now();
+
+  function checkAndSetPosition() {
+    const element = document.querySelector(pageClass);
+
+    if (element) {
+      setPosition();
+
+      return;
+    }
+
+    if (Date.now() - startTime < maxWaitTime) {
+      requestAnimationFrame(checkAndSetPosition);
+    } else {
+      setPosition();
+    }
+  }
+
+  checkAndSetPosition();
+}
+
 function setPosition() {
   const positionClasses = vuelessConfig.components?.UNotify?.positionClasses;
   const pageClass = positionClasses?.page || config.value?.positionClasses?.page;
   const asideClass = positionClasses?.aside || config.value?.positionClasses?.aside;
-  const pageWidth = getOffsetWidth(`${pageClass}`);
-  const asideWidth = getOffsetWidth(`${asideClass}`);
+  const pageWidth = getOffsetWidth(`.${pageClass}`);
+  const asideWidth = getOffsetWidth(`.${asideClass}`);
   const notifyWidth = notificationsWrapperRef.value?.$el.offsetWidth || 0;
 
   const styles: Record<string, string> = {
@@ -104,15 +129,13 @@ function setPosition() {
   styles[props.yPosition] = "0px";
 
   if (props.xPosition === NotificationPosition.Center) {
-    styles.left = `calc(50% - ${notifyWidth / 2}px)`;
+    styles.left = pageWidth
+      ? `${asideWidth + pageWidth / 2 - notifyWidth / 2}px`
+      : `calc(50% - ${notifyWidth / 2}px)`;
   } else {
     styles[props.xPosition] = "0px";
   }
 
-  if (pageWidth && props.xPosition !== NotificationPosition.Right) {
-    styles.left = `${asideWidth + pageWidth / 2 - notifyWidth / 2}px`;
-  }
-
   notifyPositionStyles.value = styles;
 }
 

package/ui.text-notify/config.ts

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  wrapper: "absolute overflow-visible md:w-[22rem]",
+  wrapper: "mt-3 absolute overflow-visible md:w-[22rem]",
   transitionGroup: {
     moveClass: "transition duration-500",
     enterActiveClass: "transition duration-500",

package/ui.text-notify/tests/UNotify.test.ts

@@ -59,14 +59,22 @@ describe("UNotify.vue", () => {
         dispatchNotifyEvent("notifyStart", mockNotification);
         await component.vm.$nextTick();
 
-        // Check the component's style directly
-        const style = component.attributes("style") || "";
+        // Manually trigger setPosition since waitForPageElement won't find the elements in tests
+        // @ts-expect-error - Accessing private method for testing
+        component.vm.setPosition();
+        await component.vm.$nextTick();
+
+        // Access the internal notifyPositionStyles ref
+        // @ts-expect-error - Accessing private property for testing
+        const positionStyles = component.vm.notifyPositionStyles;
 
         // For center position, we expect a calculated left value
         if (position === "center") {
-          expect(style).toContain("left:");
+          expect(positionStyles).toHaveProperty("left");
+          expect(positionStyles.left).toBeDefined();
         } else {
-          expect(style).toContain(`${position}: 0px`);
+          expect(positionStyles).toHaveProperty(position);
+          expect(positionStyles[position]).toBe("0px");
         }
       }
     });
@@ -83,10 +91,17 @@ describe("UNotify.vue", () => {
         dispatchNotifyEvent("notifyStart", mockNotification);
         await component.vm.$nextTick();
 
-        // Check the component's style directly
-        const style = component.attributes("style") || "";
+        // Manually trigger setPosition since waitForPageElement won't find the elements in tests
+        // @ts-expect-error - Accessing private method for testing
+        component.vm.setPosition();
+        await component.vm.$nextTick();
+
+        // Access the internal notifyPositionStyles ref
+        // @ts-expect-error - Accessing private property for testing
+        const positionStyles = component.vm.notifyPositionStyles;
 
-        expect(style).toContain(`${position}: 0px`);
+        expect(positionStyles).toHaveProperty(position);
+        expect(positionStyles[position]).toBe("0px");
       }
     });