vueless 1.5.0 → 1.5.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.5.0",
+  "version": "1.5.1-beta.1",
   "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.data-table/UTable.vue

@@ -851,6 +851,36 @@ function onBodyDoubleClick(event: MouseEvent) {
   onDoubleClickRow(rowData);
 }
 
+// Cells are always clipped (`truncate`), so show the full value in a native tooltip when it is.
+const OVERFLOW_THRESHOLD_PX = 1;
+
+function isElementOverflown(element: HTMLElement) {
+  return (
+    element.scrollWidth - element.clientWidth > OVERFLOW_THRESHOLD_PX ||
+    element.scrollHeight - element.clientHeight > OVERFLOW_THRESHOLD_PX
+  );
+}
+
+/** Content may be clipped by the cell itself or by any wrapper inside it (slot content included). */
+function isCellContentTruncated(cell: HTMLElement) {
+  return [cell, ...cell.querySelectorAll<HTMLElement>("*")].some(isElementOverflown);
+}
+
+function onBodyPointerOver(event: PointerEvent) {
+  const target = event.target as HTMLElement;
+  const cell = target.closest("td");
+  const previousCell = (event.relatedTarget as HTMLElement | null)?.closest("td");
+
+  // Moving between elements of the same cell needs no re-measure.
+  if (!cell || cell === previousCell) return;
+
+  if (isCellContentTruncated(cell)) {
+    cell.setAttribute("title", cell.textContent?.trim() || "");
+  } else {
+    cell.removeAttribute("title");
+  }
+}
+
 // Detect double-tap on touch devices and dispatch a native `dblclick`,
 // which bubbles to the tbody and triggers onBodyDoubleClick.
 const DOUBLE_TAP_DELAY = 300;
@@ -1469,6 +1499,7 @@ const BodyRows = () =>
           @click="onBodyClick"
           @dblclick="onBodyDoubleClick"
           @touchend="onBodyTouchEnd"
+          @pointerover="onBodyPointerOver"
         >
           <tr
             v-if="hasBeforeFirstRowSlot"

package/ui.data-table/UTableRow.vue

@@ -1,18 +1,7 @@
 <script setup lang="ts">
-import {
-  Comment,
-  Fragment,
-  Text,
-  computed,
-  h,
-  onMounted,
-  useAttrs,
-  useSlots,
-  useTemplateRef,
-} from "vue";
+import { Comment, Fragment, Text, computed, h, useAttrs, useSlots } from "vue";
 
 import { useUI } from "../composables/useUI";
-import { useMutationObserver } from "../composables/useMutationObserver";
 
 import { isEmptyValue } from "../utils/helper";
 import { cx } from "../utils/ui";
@@ -39,17 +28,6 @@ const props = defineProps<UTableRowProps>();
 const slots = useSlots();
 const attrs = useAttrs();
 
-const cellRef = useTemplateRef<HTMLDivElement>("cell");
-
-if (props.textEllipsis) {
-  useMutationObserver(cellRef, setCellTitle, {
-    subtree: true,
-    childList: true,
-    characterData: true,
-    attributes: false,
-  });
-}
-
 const toggleIconConfig = computed(() => {
   const nestedRow = props.row?.row;
   let isShown = false;
@@ -65,12 +43,6 @@ const toggleIconConfig = computed(() => {
     : props.attrs.bodyCellNestedExpandIconAttrs.value;
 });
 
-onMounted(() => {
-  if (cellRef.value) {
-    setElementTitle(cellRef.value);
-  }
-});
-
 function getToggleIconName() {
   return props.isExpanded
     ? props.config?.defaults?.collapseIcon
@@ -110,30 +82,6 @@ function getNestedCheckboxShift() {
   return { transform: `translateX(${props.nestedLevel * LAST_NESTED_ROW_SHIFT_REM}rem)` };
 }
 
-function setCellTitle(mutations: MutationRecord[]) {
-  mutations.forEach((mutation) => {
-    const { target } = mutation;
-
-    setElementTitle(target as HTMLElement);
-  });
-}
-
-function isElementOverflown(element: HTMLElement) {
-  return element.clientWidth < element.scrollWidth || element.clientHeight < element.scrollHeight;
-}
-
-function setElementTitle(element: HTMLElement) {
-  const isOverflown = isElementOverflown(element);
-
-  if (isOverflown) {
-    element.setAttribute("title", String(element.textContent));
-  }
-
-  if (!isOverflown && element.hasAttribute("title")) {
-    element.removeAttribute("title");
-  }
-}
-
 function getRowClasses(row: Row) {
   const rowClasses = row?.class || "";
 
@@ -307,7 +255,6 @@ function renderCellContent(value: Cell, key: string, cellIndex: number): VNode |
   // Render cell wrapper with highlighted HTML
   if (shouldRenderCellWrapper(props.row, keyStr)) {
     return h("div", {
-      ref: cellRef,
       ...props.attrs.bodyCellContentAttrs.value,
       class: cx([
         props.attrs.bodyCellContentAttrs.value.class,
@@ -380,7 +327,6 @@ function renderNestedFirstCell(value: Cell, key: string, cellIndex: number): VNo
         if (shouldRenderCellWrapper(props.row, keyStr)) {
           return [
             h("div", {
-              ref: cellRef,
               ...props.attrs.bodyCellContentAttrs.value,
               class: cx([
                 props.attrs.bodyCellContentAttrs.value.class,

package/ui.data-table/tests/UTable.test.ts

@@ -84,6 +84,11 @@ describe("UTable.vue", () => {
     });
   }
 
+  function setElementSize(element: Element, size: { clientWidth: number; scrollWidth: number }) {
+    Object.defineProperty(element, "clientWidth", { value: size.clientWidth, configurable: true });
+    Object.defineProperty(element, "scrollWidth", { value: size.scrollWidth, configurable: true });
+  }
+
   describe("Props", () => {
     it("Columns – renders table headers correctly", () => {
       const component = mountUTable(getDefaultProps());
@@ -1054,6 +1059,48 @@ describe("UTable.vue", () => {
     });
   });
 
+  describe("Cell Title", () => {
+    it("Cell Title – sets title with the full value when cell content is truncated", async () => {
+      const component = mountUTable(getDefaultProps());
+
+      const cell = component.find("tbody td");
+
+      setElementSize(cell.element, { clientWidth: 100, scrollWidth: 200 });
+
+      await cell.trigger("pointerover");
+
+      expect(cell.attributes("title")).toBe("John Doe");
+    });
+
+    it("Cell Title – removes title when cell content is not truncated", async () => {
+      const component = mountUTable(getDefaultProps());
+
+      const cell = component.find("tbody td");
+
+      cell.element.setAttribute("title", "John Doe");
+      setElementSize(cell.element, { clientWidth: 200, scrollWidth: 200 });
+
+      await cell.trigger("pointerover");
+
+      expect(cell.attributes("title")).toBeUndefined();
+    });
+
+    it("Cell Title – skips re-measure when moving within the same cell", async () => {
+      const component = mountUTable(getDefaultProps());
+
+      const cell = component.find("tbody td");
+
+      setElementSize(cell.element, { clientWidth: 100, scrollWidth: 200 });
+
+      cell.element.dispatchEvent(
+        new MouseEvent("pointerover", { bubbles: true, relatedTarget: cell.element }),
+      );
+      await nextTick();
+
+      expect(cell.attributes("title")).toBeUndefined();
+    });
+  });
+
   describe("Virtual Scroll with Search", () => {
     it("Virtual Scroll with Search – renders only visible rows with search", async () => {
       const manyRows = Array.from({ length: 100 }, (_, i) => ({

package/ui.data-table/tests/UTableRow.test.ts

@@ -383,61 +383,6 @@ describe("UTableRow.vue", () => {
   });
 
   describe("Functionality", () => {
-    it("Element Title – sets title attribute when element is overflown", async () => {
-      // Mock element properties to simulate overflow
-      const mockElement = {
-        clientWidth: 100,
-        scrollWidth: 200,
-        clientHeight: 50,
-        scrollHeight: 50,
-        textContent: "Very long text that overflows",
-        setAttribute: vi.fn(),
-        removeAttribute: vi.fn(),
-        hasAttribute: vi.fn().mockReturnValue(false),
-      };
-
-      const component = mount(UTableRow, {
-        props: getDefaultProps(),
-      });
-
-      // Access the component's internal methods
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const vm = component.vm as any;
-
-      vm.setElementTitle(mockElement);
-
-      expect(mockElement.setAttribute).toHaveBeenCalledWith(
-        "title",
-        "Very long text that overflows",
-      );
-    });
-
-    it("Element Title – removes title attribute when element is not overflown", async () => {
-      // Mock element properties to simulate no overflow
-      const mockElement = {
-        clientWidth: 200,
-        scrollWidth: 100,
-        clientHeight: 50,
-        scrollHeight: 50,
-        textContent: "Short text",
-        setAttribute: vi.fn(),
-        removeAttribute: vi.fn(),
-        hasAttribute: vi.fn().mockReturnValue(true),
-      };
-
-      const component = mount(UTableRow, {
-        props: getDefaultProps(),
-      });
-
-      // Access the component's internal methods
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const vm = component.vm as any;
-
-      vm.setElementTitle(mockElement);
-
-      expect(mockElement.removeAttribute).toHaveBeenCalledWith("title");
-    });
-
     it("Icon Width – calculates correct icon width", async () => {
       const expandableRow: FlatRow = {
         ...defaultRow,

package/ui.form-input-counter/tests/UInputCounter.test.ts

@@ -4,7 +4,6 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import UInputCounter from "../UInputCounter.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UInputNumber from "../../ui.form-input-number/UInputNumber.vue";
-import UInput from "../../ui.form-input/UInput.vue";
 
 import type { Props } from "../types";
 
@@ -363,7 +362,11 @@ describe("UInputCounter.vue", () => {
 
       await flushPromises();
 
-      await component.getComponent(UInputNumber).findComponent(UInput).trigger("keyup");
+      const input = component.get("input");
+
+      input.element.value = "43";
+      await input.trigger("input", { data: "3" });
+      await flushPromises();
 
       expect(component.emitted("update:modelValue")).toBeUndefined();
 
@@ -371,7 +374,7 @@ describe("UInputCounter.vue", () => {
       await flushPromises();
 
       expect(component.emitted("update:modelValue")).toBeDefined();
-      expect(component.emitted("update:modelValue")![0][0]).toBe(initialValue);
+      expect(component.emitted("update:modelValue")![0][0]).toBe(43);
     });
   });
 });

package/ui.form-input-number/UInputNumber.vue

@@ -58,14 +58,20 @@ const numberInputRef = useTemplateRef<InstanceType<typeof UInput>>("numberInput"
 
 const elementId = props.id || useId();
 
-const { formattedValue, rawValue, setValue } = useFormatNumber(elementId, () => ({
-  minFractionDigits: props.minFractionDigits,
-  maxFractionDigits: props.maxFractionDigits,
-  decimalSeparator: props.decimalSeparator,
-  thousandsSeparator: props.thousandsSeparator,
-  positiveOnly: props.positiveOnly,
-  prefix: props.prefix,
-}));
+const input = computed(() => numberInputRef.value?.inputRef || null);
+
+const { formattedValue, rawValue, setValue } = useFormatNumber(
+  input,
+  () => ({
+    minFractionDigits: props.minFractionDigits,
+    maxFractionDigits: props.maxFractionDigits,
+    decimalSeparator: props.decimalSeparator,
+    thousandsSeparator: props.thousandsSeparator,
+    positiveOnly: props.positiveOnly,
+    prefix: props.prefix,
+  }),
+  () => emit("update:modelValue", currentValue()),
+);
 
 const localValue = computed({
   get: () => props.modelValue ?? "",
@@ -79,10 +85,6 @@ const localLabel = computed(() => {
   return `${props.label}${comma} ${currency}`.trim();
 });
 
-const input = computed(() => {
-  return numberInputRef.value?.inputRef || null;
-});
-
 const stringLocalValue = computed(() => {
   if (Object.is(localValue.value, -0)) return "-0";
 
@@ -94,10 +96,17 @@ const stringLocalValue = computed(() => {
     : String(localValue.value);
 });
 
+/** Compares by numeric value, so `"1"` and `"1.00"` match. */
+function isSameNumber(a: string, b: string) {
+  if (a === b) return true;
+
+  return parseFloat(a) === parseFloat(b);
+}
+
 watch(
   () => props.modelValue,
   () => {
-    if (stringLocalValue.value !== String(rawValue.value)) {
+    if (!isSameNumber(stringLocalValue.value, String(rawValue.value))) {
       setValue(stringLocalValue.value);
     }
   },
@@ -109,11 +118,13 @@ onMounted(() => {
   }
 });
 
-function onKeyup(event: KeyboardEvent) {
-  const numberValue = getFixedNumber(parseFloat(rawValue.value), props.maxFractionDigits || 10);
-  const value = props.valueType === "number" ? numberValue : rawValue.value || "";
+function currentValue() {
+  return props.valueType === "number"
+    ? getFixedNumber(parseFloat(rawValue.value), props.maxFractionDigits || 10)
+    : rawValue.value || "";
+}
 
-  emit("update:modelValue", value);
+function onKeyup(event: KeyboardEvent) {
   emit("keyup", event);
 }
 

package/ui.form-input-number/tests/UInputNumber.test.ts

@@ -6,8 +6,11 @@ import UInput from "../../ui.form-input/UInput.vue";
 import ULabel from "../../ui.form-label/ULabel.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
+import type { DOMWrapper } from "@vue/test-utils";
 import type { Props } from "../types";
 
+type InputWrapper = Omit<DOMWrapper<HTMLInputElement>, "exists">;
+
 describe("UInputNumber.vue", () => {
   describe("Props", () => {
     it("Model Value – set correct value with number type", async () => {
@@ -22,9 +25,7 @@ describe("UInputNumber.vue", () => {
 
       await flushPromises();
 
-      await component.getComponent(UInput).trigger("keyup");
-
-      expect(component.emitted("update:modelValue")![0][0]).toBe(initialValue);
+      expect(component.vm.rawValue).toBe("12345678.23");
     });
 
     it("Model Value – set correct value with string type", async () => {
@@ -39,9 +40,7 @@ describe("UInputNumber.vue", () => {
 
       await flushPromises();
 
-      await component.getComponent(UInput).trigger("keyup");
-
-      expect(component.emitted("update:modelValue")![0][0]).toBe(initialValue);
+      expect(component.vm.rawValue).toBe(initialValue);
     });
 
     it("Min Fraction Digit – set fraction digit when it was not provided", async () => {
@@ -488,4 +487,137 @@ describe("UInputNumber.vue", () => {
       expect(component.vm.input!.tagName).toBe("INPUT");
     });
   });
+
+  describe("Events", () => {
+    async function mountInput(props: Partial<Props> = {}, options = {}) {
+      const component = mount(UInputNumber, {
+        props: { modelValue: "", valueType: "string", ...props },
+        ...options,
+      });
+
+      await flushPromises();
+
+      return component;
+    }
+
+    async function typeInto(input: InputWrapper, value: string, data?: string) {
+      input.element.value = value;
+      await input.trigger("input", data ? { data } : {});
+      await flushPromises();
+    }
+
+    // Paste, drag-drop, autofill and IME commits produce no keyup, but must still reach the model.
+    it("Update Model Value – emits on input without a trailing keyup", async () => {
+      const component = await mountInput();
+
+      await typeInto(component.get("input"), "13");
+
+      expect(component.emitted("update:modelValue")!.at(-1)![0]).toBe("13");
+
+      component.unmount();
+    });
+
+    it("Update Model Value – emits a number-typed value without a trailing keyup", async () => {
+      const component = await mountInput({ valueType: "number" });
+
+      await typeInto(component.get("input"), "13");
+
+      expect(component.emitted("update:modelValue")!.at(-1)![0]).toBe(13);
+
+      component.unmount();
+    });
+
+    it("Update Model Value – emits 0 as a real value", async () => {
+      const component = await mountInput();
+
+      await typeInto(component.get("input"), "0");
+
+      expect(component.emitted("update:modelValue")!.at(-1)![0]).toBe("0");
+
+      component.unmount();
+    });
+
+    it("Update Model Value – emits once per change, not twice on keyup", async () => {
+      const component = await mountInput();
+      const input = component.get("input");
+
+      await typeInto(input, "13");
+      await input.trigger("keyup");
+
+      expect(component.emitted("update:modelValue")).toHaveLength(1);
+
+      component.unmount();
+    });
+
+    it("Update Model Value – stays silent when the model already matches the input", async () => {
+      const component = await mountInput({ modelValue: "13" });
+
+      await component.get("input").trigger("blur");
+
+      expect(component.emitted("update:modelValue")).toBeFalsy();
+
+      component.unmount();
+    });
+
+    it("Update Model Value – stays silent when the model pushes a value in", async () => {
+      const component = await mountInput({ modelValue: "13" });
+
+      await component.setProps({ modelValue: "42" });
+      await flushPromises();
+
+      expect(component.emitted("update:modelValue")).toBeFalsy();
+
+      component.unmount();
+    });
+
+    it("Formats input mounted inside a shadow root", async () => {
+      const host = document.createElement("div");
+      const shadowRoot = host.attachShadow({ mode: "open" });
+      const container = document.createElement("div");
+
+      shadowRoot.appendChild(container);
+      document.body.appendChild(host);
+
+      const component = await mountInput({}, { attachTo: container });
+      const input = component.get("input");
+
+      // Behind a shadow boundary, so a document lookup would leave the input unbound.
+      expect(document.getElementById(input.element.id)).toBeNull();
+
+      await typeInto(input, "42");
+
+      expect(component.emitted("update:modelValue")!.at(-1)![0]).toBe("42");
+
+      component.unmount();
+      host.remove();
+    });
+
+    it("Strips non-numeric characters from typed input", async () => {
+      const component = await mountInput();
+      const input = component.get("input");
+
+      for (const char of "13232fffffrege") {
+        await typeInto(input, input.element.value + char, char);
+      }
+
+      // Displayed with the default thousands separator; the model keeps the raw digits.
+      expect(input.element.value).toBe("13 232");
+      expect(component.emitted("update:modelValue")!.at(-1)![0]).toBe("13232");
+
+      component.unmount();
+    });
+
+    it("Stops listening to the input once unmounted", async () => {
+      const component = await mountInput();
+      const element = component.get("input").element;
+
+      component.unmount();
+
+      element.value = "77";
+      element.dispatchEvent(new Event("input"));
+      await flushPromises();
+
+      expect(component.emitted("update:modelValue")).toBeFalsy();
+    });
+  });
 });

package/ui.form-input-number/useFormatNumber.ts

@@ -4,15 +4,22 @@ import { getRawValue, getFormattedValue } from "./utilFormat";
 
 import { RAW_DECIMAL_MARK } from "./constants";
 
+import type { MaybeRefOrGetter } from "vue";
 import type { FormatOptions } from "./types";
 
 const digitSet = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
 const comma = ",";
 const minus = "-";
 
+/**
+ * Formats an input as a number. Takes the element itself, so inputs in a shadow root
+ * or detached at mount still bind, unlike a `document.getElementById` lookup.
+ * `onChange` fires for user input only, never for a programmatic `setValue`.
+ */
 export default function useFormatNumber(
-  elementId: string = "",
+  inputSource: MaybeRefOrGetter<HTMLInputElement | null | undefined>,
   formatOptions: (() => FormatOptions) | FormatOptions,
+  onChange?: () => void,
 ) {
   let inputElement: HTMLInputElement | null = null;
 
@@ -31,22 +38,31 @@ export default function useFormatNumber(
     { deep: true },
   );
 
+  // Follow the element: it can appear after mount or be swapped out entirely.
+  watch(() => toValue(inputSource) ?? null, bindInput, { flush: "post" });
+
   onMounted(() => {
     validateOptions();
-    inputElement = document.getElementById(elementId) as HTMLInputElement;
+    bindInput(toValue(inputSource) ?? null);
+  });
+
+  onBeforeUnmount(() => bindInput(null));
+
+  function bindInput(element: HTMLInputElement | null) {
+    if (element === inputElement) return;
 
     if (inputElement) {
-      inputElement.addEventListener("input", onInput);
-      inputElement.addEventListener("keydown", onKeydown);
+      inputElement.removeEventListener("input", onInput);
+      inputElement.removeEventListener("keydown", onKeydown);
     }
-  });
 
-  onBeforeUnmount(() => {
+    inputElement = element;
+
     if (inputElement) {
-      inputElement.removeEventListener("input", onInput);
+      inputElement.addEventListener("input", onInput);
       inputElement.addEventListener("keydown", onKeydown);
     }
-  });
+  }
 
   function validateOptions() {
     const warnMessages = [];
@@ -115,19 +131,30 @@ export default function useFormatNumber(
   }
 
   async function onInput(event: Event) {
-    if (!event.target || !inputElement) return;
+    const previousRawValue = rawValue.value;
+
+    await handleInput(event);
+
+    if (rawValue.value !== previousRawValue) onChange?.();
+  }
+
+  async function handleInput(event: Event) {
+    if (!inputElement) return;
+
+    // Read `data` before awaiting — the event is spent once dispatch returns.
+    const eventData = (event as InputEvent).data || "";
 
     await nextTick();
 
-    const cursorStart = inputElement.selectionStart || 0;
-    const cursorEnd = inputElement.selectionEnd || 0;
+    // The bound element, not `event.target`, which may be released after the await.
+    const input = inputElement;
 
-    const input = event.target as HTMLInputElement;
+    const cursorStart = input.selectionStart || 0;
+    const cursorEnd = input.selectionEnd || 0;
 
     let value = input.value || "";
 
     const prevCursorPosition = cursorEnd - 1;
-    const eventData = (event as InputEvent).data || "";
 
     if (value === minus) {
       formattedValue.value = minus;

package/ui.text-block/config.ts

@@ -7,9 +7,9 @@ export default /*tw*/ {
       [&_a:not([class]):hover]:no-underline
       [&_ul]:font-normal [&_ol]:font-normal
       [&_ul]:leading-normal [&_ol]:leading-normal
-      [&_ul]:list-inside [&_ol]:list-inside
+      [&_ul]:list-outside [&_ol]:list-outside
       [&_ul]:list-disc [&_ol]:list-decimal
-      [&_ul]:ml-2 [&_ol]:ml-2
+      [&_ul]:ps-4 [&_ol]:ps-4
     `,
     variants: {
       variant: {