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

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/config.ts

@@ -6,7 +6,8 @@ export default /*tw*/ {
   },
   wrapper: {
     base: `
-      flex items-center p-0.5 relative rounded-full outline-solid outline-transparent cursor-pointer transition focus-within:transition
+      flex items-center p-0.5 relative cursor-pointer transition focus-within:transition
+      rounded-full outline-solid outline-medium outline-transparent
       focus-visible:outline focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-{color}
     `,
     variants: {

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/ui.form-textarea/config.ts

@@ -15,7 +15,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex px-3 py-2 gap-3 w-full bg-default transition
-      rounded-medium border border-solid border-default outline-solid outline-transparent
+      rounded-medium border border-solid border-default outline-solid outline-small outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,

package/ui.image-avatar/types.ts

@@ -1,10 +1,10 @@
 import defaultConfig from "./config";
 
-import type { ComponentConfig } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface ChipItem {
+export interface BaseChipItem {
   icon?: string;
   color?: Props["color"];
   xPosition?: "left" | "right";
@@ -12,6 +12,9 @@ export interface ChipItem {
   inset?: boolean;
 }
 
+/* Any object shape is a valid chip, only reserved chip keys are type checked. */
+export type ChipItem = BaseChipItem & (object | UnknownObject);
+
 export interface Props {
   /**
    * Avatar label (username, nickname, etc.).

package/ui.image-avatar-group/types.ts

@@ -1,11 +1,11 @@
 import defaultConfig from "./config";
 
-import type { ComponentConfig } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 import type { ChipItem } from "../ui.image-avatar/types";
 
 export type Config = typeof defaultConfig;
 
-export interface AvatarItem {
+export interface BaseAvatarItem {
   src?: string;
   label?: string;
   color?: string;
@@ -13,6 +13,9 @@ export interface AvatarItem {
   chip?: ChipItem;
 }
 
+/* Any object shape is a valid avatar, only reserved avatar keys are type checked. */
+export type AvatarItem = BaseAvatarItem & (object | UnknownObject);
+
 export interface Props {
   /**
    * Avatar items.

package/ui.image-icon/UIcon.vue

@@ -11,13 +11,14 @@ import defaultConfig from "./config";
 
 import USkeleton from "../ui.skeleton/USkeleton.vue";
 
-import type { AsyncComponentLoader, ComponentPublicInstance } from "vue";
+import type { AsyncComponentLoader, ComponentOptions, ComponentPublicInstance } from "vue";
 import type { Props, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  src: undefined,
 });
 
 const emit = defineEmits([
@@ -53,7 +54,7 @@ const dynamicComponent = computed(() => {
   }
 
   const name = props.name;
-  const src = props.src;
+  const src = props.src as ComponentOptions | undefined;
 
   /* Edge case */
   if (!src && !name) return "";

package/ui.image-icon/types.ts

@@ -1,6 +1,6 @@
 import defaultConfig from "./config";
 
-import type { DefineComponent, SVGAttributes } from "vue";
+import type { Component, SVGAttributes } from "vue";
 
 import type { ComponentConfig } from "../types";
 
@@ -17,7 +17,7 @@ export interface Props {
   /**
    * Icon source (svg as a vue component).
    */
-  src?: DefineComponent<SVGAttributes>;
+  src?: Component<SVGAttributes>;
 
   /**
    * Icon color.

package/ui.navigation-breadcrumbs/types.ts

@@ -1,13 +1,16 @@
 import defaultConfig from "./config";
-import type { ComponentConfig } from "../types";
+import type { ComponentConfig, UnknownObject } from "../types";
 import type { Props as ULinkProps } from "../ui.button-link/types";
 
 export type Config = typeof defaultConfig;
 
-export interface UBreadcrumb extends ULinkProps {
+export interface BaseBreadcrumb extends ULinkProps {
   icon?: string;
 }
 
+/* Any object shape is a valid breadcrumb, only reserved breadcrumb keys are type checked. */
+export type UBreadcrumb = BaseBreadcrumb & (object | UnknownObject);
+
 export interface Props {
   /**
    * Array of links.

package/ui.navigation-tab/UTab.vue

@@ -13,12 +13,13 @@ import type { Props as UTabsProps, SetUTabsSelectedItem } from "../ui.navigation
 
 defineOptions({ inheritAttrs: false });
 
-const setUTabsSelectedItem = inject<SetUTabsSelectedItem>("setUTabsSelectedItem");
-const getUTabsSelectedItem = inject("getUTabsSelectedItem");
-const getUTabsScrollable = inject<UTabsProps["scrollable"]>("getUTabsScrollable");
-const getUTabsSquare = inject<UTabsProps["square"]>("getUTabsSquare");
-const getUTabsBlock = inject<UTabsProps["block"]>("getUTabsBlock");
+const setUTabsSelectedItem = inject<SetUTabsSelectedItem | null>("setUTabsSelectedItem", null);
+const getUTabsSelectedItem = inject("getUTabsSelectedItem", null);
+const getUTabsScrollable = inject<UTabsProps["scrollable"]>("getUTabsScrollable", false);
+const getUTabsSquare = inject<UTabsProps["square"]>("getUTabsSquare", false);
+const getUTabsBlock = inject<UTabsProps["block"]>("getUTabsBlock", false);
 const getUTabsSize = inject<UTabsProps["size"]>("getUTabsSize", "md");
+const getUTabsPreventTabClick = inject<() => boolean>("getUTabsPreventTabClick", () => false);
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
@@ -34,12 +35,16 @@ const size = computed(() => toValue(getUTabsSize));
 const block = computed(() => toValue(getUTabsBlock));
 const square = computed(() => toValue(getUTabsSquare));
 const scrollable = computed(() => toValue(getUTabsScrollable));
-const isActive = computed(() => toValue(getUTabsSelectedItem) === props.value);
+const isActive = computed(() => {
+  if (!setUTabsSelectedItem) return true;
+
+  return toValue(getUTabsSelectedItem) === props.value;
+});
 
 async function onClickSetValue() {
-  if (!props.disabled && setUTabsSelectedItem) {
-    setUTabsSelectedItem(props.value ?? "");
-  }
+  if (toValue(getUTabsPreventTabClick) || props.disabled || !setUTabsSelectedItem) return;
+
+  setUTabsSelectedItem(props.value ?? "");
 }
 
 defineExpose({

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

@@ -149,6 +149,20 @@ describe("UTab.vue", () => {
 
   // Active state tests
   describe("Active state", () => {
+    it("Active – applies active classes when rendered without UTabs", () => {
+      const expectedClass = "border-primary";
+
+      const component = mount(UTab, {
+        props: {
+          label: "Tab Item",
+        },
+      });
+
+      const button = component.findComponent(UButton);
+
+      expect(button.attributes("class")).toContain(expectedClass);
+    });
+
     it("Active – applies active classes when tab is selected", () => {
       const value = "tab1";
       const expectedClass = "border-primary";

package/ui.navigation-tabs/UTabs.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TItem extends UTabsOption">
 import { ref, computed, provide, onMounted, onUnmounted, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
@@ -7,19 +7,21 @@ import { getDefaults } from "../utils/ui";
 import UTab from "../ui.navigation-tab/UTab.vue";
 import UButton from "../ui.button/UButton.vue";
 
-import { COMPONENT_NAME, SCROLL_OFFSET } from "./constants";
+import { COMPONENT_NAME, SCROLL_OFFSET, DRAG_THRESHOLD, DRAG_CLICK_SUPPRESS_MS } from "./constants";
 import defaultConfig from "./config";
 
-import type { Props, Config } from "./types";
+import type { Props, Config, UTabsOption, UTabsSlots } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+const props = withDefaults(defineProps<Props<TItem>>(), {
+  ...getDefaults<Props<TItem>, Config>(defaultConfig, COMPONENT_NAME),
   modelValue: "",
   options: () => [],
 });
 
+defineSlots<UTabsSlots<TItem>>();
+
 const emit = defineEmits([
   /**
    * Triggers when the selected tab changes.
@@ -37,6 +39,15 @@ const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const scrollContainerRef = useTemplateRef<HTMLDivElement | null>("scroll-container");
 const showLeftArrow = ref(false);
 const showRightArrow = ref(false);
+const isDragging = ref(false);
+const preventTabClick = ref(false);
+
+let isPointerDown = false;
+let dragAxis: "x" | "y" | null = null;
+let startX = 0;
+let startY = 0;
+let startScrollLeft = 0;
+let suppressClickTimer: ReturnType<typeof setTimeout> | null = null;
 
 function checkScroll() {
   if (!scrollContainerRef.value) return;
@@ -59,17 +70,148 @@ function scrollNext() {
   scrollContainerRef.value.scrollBy({ left: SCROLL_OFFSET, behavior: "smooth" });
 }
 
+function isScrollableOverflow() {
+  if (!scrollContainerRef.value) return false;
+
+  return scrollContainerRef.value.scrollWidth > scrollContainerRef.value.clientWidth;
+}
+
+function clearSuppressClickTimer() {
+  if (!suppressClickTimer) return;
+
+  clearTimeout(suppressClickTimer);
+  suppressClickTimer = null;
+}
+
+function stopDragListeners() {
+  document.removeEventListener("pointermove", onPointerMove);
+  document.removeEventListener("pointerup", onPointerUp);
+  document.removeEventListener("pointercancel", onPointerUp);
+}
+
+function resetDragState() {
+  isPointerDown = false;
+  dragAxis = null;
+  isDragging.value = false;
+  document.body.style.cursor = "";
+  document.body.style.userSelect = "";
+}
+
+function suppressTabClick() {
+  preventTabClick.value = true;
+  clearSuppressClickTimer();
+
+  suppressClickTimer = setTimeout(() => {
+    preventTabClick.value = false;
+    suppressClickTimer = null;
+  }, DRAG_CLICK_SUPPRESS_MS);
+}
+
+function onPointerDown(event: PointerEvent) {
+  if (!props.scrollable || event.button > 0 || !isScrollableOverflow()) return;
+
+  isPointerDown = true;
+  dragAxis = null;
+  startX = event.clientX;
+  startY = event.clientY;
+  startScrollLeft = scrollContainerRef.value?.scrollLeft ?? 0;
+
+  document.addEventListener("pointermove", onPointerMove, { passive: false });
+  document.addEventListener("pointerup", onPointerUp);
+  document.addEventListener("pointercancel", onPointerUp);
+}
+
+function onPointerMove(event: PointerEvent) {
+  if (!isPointerDown || !scrollContainerRef.value) return;
+
+  if (event.pointerType === "mouse" && event.buttons === 0) {
+    onPointerUp();
+
+    return;
+  }
+
+  const deltaX = event.clientX - startX;
+  const deltaY = event.clientY - startY;
+
+  if (!dragAxis) {
+    if (Math.abs(deltaX) < DRAG_THRESHOLD && Math.abs(deltaY) < DRAG_THRESHOLD) return;
+
+    dragAxis = Math.abs(deltaX) >= Math.abs(deltaY) ? "x" : "y";
+
+    if (dragAxis === "y") {
+      stopDragListeners();
+      resetDragState();
+
+      return;
+    }
+
+    isDragging.value = true;
+    document.body.style.cursor = "move";
+    document.body.style.userSelect = "none";
+  }
+
+  if (dragAxis !== "x") return;
+
+  event.preventDefault();
+  scrollContainerRef.value.scrollLeft = startScrollLeft - deltaX;
+}
+
+function onPointerUp() {
+  const wasDragging = isDragging.value;
+
+  stopDragListeners();
+  resetDragState();
+
+  if (wasDragging) {
+    suppressTabClick();
+  }
+}
+
+function onClickCapture(event: MouseEvent) {
+  if (!preventTabClick.value) return;
+
+  event.preventDefault();
+  event.stopPropagation();
+  preventTabClick.value = false;
+  clearSuppressClickTimer();
+}
+
+function getHorizontalWheelDelta(event: WheelEvent) {
+  if (Math.abs(event.deltaX) >= Math.abs(event.deltaY)) {
+    return event.deltaX;
+  }
+
+  return event.shiftKey ? event.deltaY : 0;
+}
+
+function onWheel(event: WheelEvent) {
+  if (!props.scrollable || !scrollContainerRef.value || !isScrollableOverflow()) return;
+
+  const deltaX = getHorizontalWheelDelta(event);
+
+  if (!deltaX) return;
+
+  event.preventDefault();
+  scrollContainerRef.value.scrollLeft += deltaX;
+}
+
 onMounted(() => {
   if (scrollContainerRef.value) {
     scrollContainerRef.value.addEventListener("scroll", checkScroll, { passive: true });
+    scrollContainerRef.value.addEventListener("wheel", onWheel, { passive: false });
 
     checkScroll();
   }
 });
 
 onUnmounted(() => {
+  stopDragListeners();
+  resetDragState();
+  clearSuppressClickTimer();
+
   if (scrollContainerRef.value) {
     scrollContainerRef.value.removeEventListener("scroll", checkScroll);
+    scrollContainerRef.value.removeEventListener("wheel", onWheel);
   }
 });
 
@@ -79,6 +221,7 @@ provide("getUTabsSquare", () => props.square);
 provide("getUTabsScrollable", () => props.scrollable);
 provide("getUTabsSelectedItem", () => selectedItem.value);
 provide("setUTabsSelectedItem", (value: string) => (selectedItem.value = value));
+provide("getUTabsPreventTabClick", () => preventTabClick.value);
 
 defineExpose({
   /**
@@ -97,6 +240,7 @@ const {
   config,
   wrapperAttrs,
   tabsAttrs,
+  dragAttrs,
   tabAttrs,
   prevAttrs,
   nextAttrs,
@@ -117,7 +261,15 @@ const {
       </slot>
     </div>
 
-    <div ref="scroll-container" v-bind="tabsAttrs" :data-test="getDataTest()" @scroll="checkScroll">
+    <div
+      ref="scroll-container"
+      v-bind="tabsAttrs"
+      :class="isDragging && dragAttrs.class"
+      :data-test="getDataTest()"
+      @scroll="checkScroll"
+      @pointerdown="onPointerDown"
+      @click.capture="onClickCapture"
+    >
       <!-- @slot Use it to add the UTab component. -->
       <slot>
         <UTab

package/ui.navigation-tabs/config.ts

@@ -4,10 +4,11 @@ export default /*tw*/ {
     base: "flex border-b border-default w-full",
     variants: {
       scrollable: {
-        true: "overflow-hidden flex-nowrap scroll-smooth",
+        true: "overflow-hidden flex-nowrap touch-pan-y select-none",
       },
     },
   },
+  drag: "icon-drag cursor-move scroll-auto! *:pointer-events-none",
   tab: "{UTab}",
   prev: "",
   next: "",

package/ui.navigation-tabs/constants.ts

@@ -5,3 +5,5 @@
 export const COMPONENT_NAME = "UTabs";
 
 export const SCROLL_OFFSET = 200;
+export const DRAG_THRESHOLD = 5;
+export const DRAG_CLICK_SUPPRESS_MS = 300;