vueless 1.5.1-beta.0 → 1.5.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.5.1-beta.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.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: {