vueless 1.4.12-beta.2 → 1.4.12-beta.21

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

@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UTabs from "../../ui.navigation-tabs/UTabs.vue";
+import UTabsComponent 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";
@@ -20,6 +20,9 @@ import johnDoe from "../../ui.navigation-tab/storybook/assets/john-doe.png";
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UTabs = UTabsComponent as typeof UTabsComponent & { __name: string };
+
 interface UTabsArgs extends Props {
   slotTemplate?: string;
   enum: "size";
@@ -89,6 +92,14 @@ Scrollable.args = {
   options: getOptionsArray(),
   scrollable: true,
 };
+Scrollable.parameters = {
+  docs: {
+    description: {
+      story:
+        "Scroll overflowing tabs with the arrow buttons, by dragging the tab list, or with horizontal wheel.",
+    },
+  },
+};
 
 export const Block = DefaultTemplate.bind({});
 Block.args = { block: true };

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

@@ -0,0 +1,50 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UTabsOption, UTabsSlots } from "../types";
+
+interface CountedTab {
+  value: string;
+  label: string;
+  count: number;
+}
+
+type LabelProps = Parameters<NonNullable<UTabsSlots<CountedTab>["label"]>>[0];
+
+describe("UTabs types", () => {
+  it("infers the caller's option shape in a slot", () => {
+    expectTypeOf<LabelProps["item"]>().toEqualTypeOf<CountedTab>();
+    expectTypeOf<LabelProps["item"]["count"]>().toEqualTypeOf<number>();
+    expectTypeOf<LabelProps["index"]>().toEqualTypeOf<number>();
+    expectTypeOf<LabelProps["label"]>().toEqualTypeOf<string>();
+    expectTypeOf<LabelProps["active"]>().toEqualTypeOf<boolean>();
+  });
+
+  it("promises the caller's members — options reach slots untransformed", () => {
+    /* Unlike UTable, `UTabs` iterates `props.options` directly: no flattening, filtering
+     * or synthetic entries, so the members are guaranteed rather than optional. */
+    expectTypeOf<LabelProps["item"]["label"]>().toEqualTypeOf<string>();
+    expectTypeOf<undefined>().not.toExtend<LabelProps["item"]["count"]>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof LabelProps["item"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+    expectTypeOf<keyof LabelProps["item"]>().not.toEqualTypeOf<string>();
+  });
+
+  it("types the remaining slots", () => {
+    type Left = Parameters<NonNullable<UTabsSlots<CountedTab>["left"]>>[0];
+    type Right = Parameters<NonNullable<UTabsSlots<CountedTab>["right"]>>[0];
+    type Prev = Parameters<NonNullable<UTabsSlots["prev"]>>[0];
+
+    expectTypeOf<Left["item"]>().toEqualTypeOf<CountedTab>();
+    expectTypeOf<Right["item"]>().toEqualTypeOf<CountedTab>();
+    expectTypeOf<Prev["iconName"]>().toEqualTypeOf<string>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<UTabsOption>>();
+    expectTypeOf<Props<CountedTab>["options"]>().toEqualTypeOf<CountedTab[] | undefined>();
+  });
+});

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

@@ -1,3 +1,4 @@
+import { nextTick } from "vue";
 import { mount } from "@vue/test-utils";
 import { describe, it, expect } from "vitest";
 
@@ -7,6 +8,25 @@ import UButton from "../../ui.button/UButton.vue";
 
 import type { Props, UTabsOption } from "../types";
 
+function dispatchPointer(
+  target: EventTarget,
+  type: "pointerdown" | "pointermove" | "pointerup",
+  clientX: number,
+  extra: PointerEventInit = {},
+) {
+  target.dispatchEvent(
+    new PointerEvent(type, {
+      bubbles: true,
+      cancelable: true,
+      clientX,
+      clientY: 0,
+      pointerId: 1,
+      pointerType: "mouse",
+      ...extra,
+    }),
+  );
+}
+
 describe("UTabs.vue", () => {
   // Global options definition
   const options: UTabsOption[] = [
@@ -94,7 +114,7 @@ describe("UTabs.vue", () => {
       const tabsContainer = component.find(`[vl-key="tabs"]`);
 
       // Check that the container has the scrollable class
-      expect(tabsContainer.classes()).toContain("scroll-smooth");
+      expect(tabsContainer.classes()).toContain("overflow-hidden");
     });
 
     it("Scroll – shows scroll buttons when scrollable and content overflows", async () => {
@@ -134,6 +154,198 @@ describe("UTabs.vue", () => {
       expect(nextButton).toBeDefined();
     });
 
+    it("Scrollable – scrolls the tab list on pointer drag", async () => {
+      const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
+        value: `tab${i}`,
+        label: `Tab ${i}`,
+      }));
+
+      const component = mount(UTabs, {
+        props: {
+          options: manyOptions,
+          scrollable: true,
+        },
+      });
+
+      const tabsContainer = component.find(`[vl-key="tabs"]`);
+      const element = tabsContainer.element;
+
+      let scrollLeft = 0;
+
+      Object.defineProperty(element, "scrollWidth", { configurable: true, value: 1000 });
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "scrollLeft", {
+        configurable: true,
+        get: () => scrollLeft,
+        set: (value: number) => {
+          scrollLeft = value;
+        },
+      });
+
+      dispatchPointer(element, "pointerdown", 200, { button: 0 });
+      dispatchPointer(document, "pointermove", 120, { buttons: 1 });
+
+      await nextTick();
+
+      expect(scrollLeft).toBe(80);
+      expect(tabsContainer.classes()).toContain("cursor-move");
+      expect(tabsContainer.classes()).toContain("icon-drag");
+
+      dispatchPointer(document, "pointerup", 120);
+    });
+
+    it("Scrollable – does not select a tab after a drag gesture", async () => {
+      const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
+        value: `tab${i}`,
+        label: `Tab ${i}`,
+      }));
+
+      const component = mount(UTabs, {
+        props: {
+          options: manyOptions,
+          modelValue: "tab0",
+          scrollable: true,
+        },
+      });
+
+      const tabsContainer = component.find(`[vl-key="tabs"]`);
+      const element = tabsContainer.element;
+
+      Object.defineProperty(element, "scrollWidth", { configurable: true, value: 1000 });
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "scrollLeft", {
+        configurable: true,
+        writable: true,
+        value: 0,
+      });
+
+      dispatchPointer(element, "pointerdown", 200, { button: 0 });
+      dispatchPointer(document, "pointermove", 120, { buttons: 1 });
+      dispatchPointer(document, "pointerup", 120);
+
+      await component.findAllComponents(UTab)[1].trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeFalsy();
+    });
+
+    it("Scrollable – scrolls the tab list on horizontal wheel", () => {
+      const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
+        value: `tab${i}`,
+        label: `Tab ${i}`,
+      }));
+
+      const component = mount(UTabs, {
+        props: {
+          options: manyOptions,
+          scrollable: true,
+        },
+      });
+
+      const element = component.find(`[vl-key="tabs"]`).element;
+
+      let scrollLeft = 0;
+
+      Object.defineProperty(element, "scrollWidth", { configurable: true, value: 1000 });
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "scrollLeft", {
+        configurable: true,
+        get: () => scrollLeft,
+        set: (value: number) => {
+          scrollLeft = value;
+        },
+      });
+
+      element.dispatchEvent(
+        new WheelEvent("wheel", {
+          deltaX: 40,
+          deltaY: 0,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+
+      expect(scrollLeft).toBe(40);
+    });
+
+    it("Scrollable – does not scroll the tab list on vertical wheel", () => {
+      const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
+        value: `tab${i}`,
+        label: `Tab ${i}`,
+      }));
+
+      const component = mount(UTabs, {
+        props: {
+          options: manyOptions,
+          scrollable: true,
+        },
+      });
+
+      const element = component.find(`[vl-key="tabs"]`).element;
+
+      let scrollLeft = 0;
+
+      Object.defineProperty(element, "scrollWidth", { configurable: true, value: 1000 });
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "scrollLeft", {
+        configurable: true,
+        get: () => scrollLeft,
+        set: (value: number) => {
+          scrollLeft = value;
+        },
+      });
+
+      element.dispatchEvent(
+        new WheelEvent("wheel", {
+          deltaX: 0,
+          deltaY: 40,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+
+      expect(scrollLeft).toBe(0);
+    });
+
+    it("Scrollable – scrolls the tab list on shift+wheel", () => {
+      const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
+        value: `tab${i}`,
+        label: `Tab ${i}`,
+      }));
+
+      const component = mount(UTabs, {
+        props: {
+          options: manyOptions,
+          scrollable: true,
+        },
+      });
+
+      const element = component.find(`[vl-key="tabs"]`).element;
+
+      let scrollLeft = 0;
+
+      Object.defineProperty(element, "scrollWidth", { configurable: true, value: 1000 });
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "scrollLeft", {
+        configurable: true,
+        get: () => scrollLeft,
+        set: (value: number) => {
+          scrollLeft = value;
+        },
+      });
+
+      element.dispatchEvent(
+        new WheelEvent("wheel", {
+          deltaX: 0,
+          deltaY: 40,
+          shiftKey: true,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+
+      expect(scrollLeft).toBe(40);
+    });
+
     it("Block – provides block value to tabs", () => {
       const block = true;
 

package/ui.navigation-tabs/tests/UTabsTypes.vue

@@ -0,0 +1,65 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `options` prop at a real call site. -->
+<template>
+  <!-- `UTabs` iterates `options` verbatim, so the caller's shape is guaranteed, not optional. -->
+  <UTabs :options="options">
+    <template #left="{ item, index, active, iconName }">
+      {{ expectString(item.label) }}
+      {{ expectString(item.badge) }}
+      {{ expectNumber(index) }}
+      {{ expectBoolean(active) }}
+      {{ expectOptionalString(iconName) }}
+    </template>
+
+    <template #label="{ item, index, label, active }">
+      {{ expectString(item.badge) }}
+      {{ expectString(label) }}
+      {{ expectNumber(index) }}
+      {{ expectBoolean(active) }}
+    </template>
+
+    <template #right="{ item }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ item.nonExistent }}
+    </template>
+
+    <template #prev="{ iconName }">{{ expectString(iconName) }}</template>
+    <template #next="{ iconName }">{{ expectString(iconName) }}</template>
+  </UTabs>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UTabs :options="typedOptions">
+    <template #label="{ item }">{{ expectNumber(item.count) }}</template>
+  </UTabs>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UTabs from "../UTabs.vue";
+
+interface CountedTab {
+  value: string;
+  label: string;
+  count: number;
+}
+
+const options = [{ value: "1", label: "Dashboard", badge: "new" }];
+const typedOptions = ref<CountedTab[]>([]);
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectBoolean(value: boolean) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+</script>

package/ui.navigation-tabs/types.ts

@@ -8,13 +8,35 @@ export type SetUTabsSelectedItem = (
   value: string | number | boolean | UnknownArray | UnknownObject,
 ) => void;
 
-export interface UTabsOption {
+export interface BaseTabOption {
   value: string | number;
   label: string;
   disabled?: boolean;
 }
 
-export interface Props {
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type UTabsOption = BaseTabOption & (object | UnknownObject);
+
+/**
+ * Slots receive each option verbatim — `UTabs` iterates `props.options` without
+ * filtering, flattening or synthesising entries, so the caller's shape is guaranteed.
+ */
+export interface UTabsSlots<TItem extends UTabsOption = UTabsOption> {
+  default?: () => unknown;
+  prev?: (props: { iconName: string }) => unknown;
+  next?: (props: { iconName: string }) => unknown;
+  left?: (props: { item: TItem; index: number; active: boolean; iconName?: string }) => unknown;
+  label?: (props: {
+    item: TItem;
+    index: number;
+    label: string;
+    active: boolean;
+    iconName?: string;
+  }) => unknown;
+  right?: (props: { item: TItem; index: number; active: boolean; iconName?: string }) => unknown;
+}
+
+export interface Props<TItem extends UTabsOption = UTabsOption> {
   /**
    * Selected tab value.
    */
@@ -23,7 +45,7 @@ export interface Props {
   /**
    * Tab options.
    */
-  options?: UTabsOption[];
+  options?: TItem[];
 
   /**
    * Tabs size.
@@ -31,7 +53,7 @@ export interface Props {
   size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 
   /**
-   * Make the Tabs scrollable.
+   * Make the Tabs scrollable via arrow buttons, dragging, or horizontal wheel.
    */
   scrollable?: boolean;
 

package/ui.skeleton-text/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const COMPONENT_NAME = "USkeletonInput";
+export const COMPONENT_NAME = "USkeletonText";

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: {

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