vueless 1.3.9-beta.13 → 1.3.9-beta.14

package/package.json

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

@@ -4,11 +4,13 @@ import {
   ref,
   computed,
   watch,
+  watchEffect,
   useSlots,
   nextTick,
   onMounted,
   onBeforeUnmount,
   useTemplateRef,
+  h,
 } from "vue";
 import { isEqual } from "lodash-es";
 
@@ -30,7 +32,7 @@ import { normalizeColumns, mapRowColumns, getFlatRows, getRowChildrenIds } from
 import { PX_IN_REM } from "../constants";
 import { COMPONENT_NAME } from "./constants";
 
-import type { ComputedRef } from "vue";
+import type { ComputedRef, VNode } from "vue";
 import type { Config as UDividerConfig } from "../ui.container-divider/types";
 import type {
   Cell,
@@ -43,6 +45,7 @@ import type {
   FlatRow,
   ColumnObject,
   SearchMatch,
+  UTableRowProps,
 } from "./types";
 import { StickySide } from "./types";
 
@@ -310,40 +313,135 @@ const totalSearchMatches = computed(() => {
   return count;
 });
 
-watch(totalSearchMatches, (count) => {
-  emit("search", count);
+const selectedRowIds = computed(() => {
+  return new Set(localSelectedRows.value.map((row) => row.id));
 });
 
-watch(activeMatch, (match) => {
-  if (!match) return;
+const isSelectedAllRows = computed(() => {
+  return localSelectedRows.value.length === flatTableRows.value.length;
+});
 
-  if (props.virtualScroll) {
-    const rowIndex = visibleFlatRows.value.findIndex((row) => row.id === match.rowId);
+// Conditional watchers - only create listeners when their associated features are enabled
+// Using watchEffect to dynamically create/destroy watchers based on feature state
+
+// Search-related watchers
+// Note: totalSearchMatches watcher always runs to emit events (even when search is cleared)
+watch(totalSearchMatches, (count) => emit("search", count), { flush: "post" });
+
+// activeMatch watcher - only created when search is active
+let stopActiveMatchWatch: (() => void) | null = null;
+
+watchEffect(() => {
+  if (props.search) {
+    // Create watcher if it doesn't exist
+    if (!stopActiveMatchWatch) {
+      stopActiveMatchWatch = watch(
+        activeMatch,
+        (match) => {
+          if (!match) return;
+
+          if (props.virtualScroll) {
+            const rowIndex = visibleFlatRows.value.findIndex((row) => row.id === match.rowId);
+
+            if (rowIndex === -1) return;
+
+            virtualScroll.scrollToIndex(rowIndex);
+          } else {
+            scrollToRow(match.rowId);
+          }
+        },
+        { flush: "post" },
+      );
+    }
+  } else {
+    // Cleanup watcher if it exists
+    if (stopActiveMatchWatch) {
+      stopActiveMatchWatch();
+      stopActiveMatchWatch = null;
+    }
+  }
+});
+
+// Selection-related watchers (only created when selectable is enabled)
+let stopLocalSelectedRowsWatch: (() => void) | null = null;
+let stopSelectedRowsWatch: (() => void) | null = null;
+let stopSelectAllWatch: (() => void) | null = null;
+
+watchEffect(() => {
+  if (props.selectable) {
+    // Create watchers if they don't exist
+    if (!stopLocalSelectedRowsWatch) {
+      stopLocalSelectedRowsWatch = watch(localSelectedRows, onChangeLocalSelectedRows);
+    }
 
-    if (rowIndex === -1) return;
+    if (!stopSelectedRowsWatch) {
+      stopSelectedRowsWatch = watch(() => props.selectedRows, onChangeSelectedRows, {
+        immediate: true,
+      });
+    }
 
-    virtualScroll.scrollToIndex(rowIndex);
+    if (!stopSelectAllWatch) {
+      stopSelectAllWatch = watch(selectAll, onChangeSelectAll);
+    }
   } else {
-    scrollToRow(match.rowId);
+    // Cleanup watchers if they exist
+    if (stopLocalSelectedRowsWatch) {
+      stopLocalSelectedRowsWatch();
+      stopLocalSelectedRowsWatch = null;
+    }
+
+    if (stopSelectedRowsWatch) {
+      stopSelectedRowsWatch();
+      stopSelectedRowsWatch = null;
+    }
+
+    if (stopSelectAllWatch) {
+      stopSelectAllWatch();
+      stopSelectAllWatch = null;
+    }
   }
 });
 
-const selectedRowIds = computed(() => {
-  return new Set(localSelectedRows.value.map((row) => row.id));
-});
+// Expansion watcher (always register as it's a core feature)
+watch(() => props.expandedRows, onChangeExpandedRows, { immediate: true });
 
-const isSelectedAllRows = computed(() => {
-  return localSelectedRows.value.length === flatTableRows.value.length;
+// Sticky header watcher (only created when stickyHeader is enabled)
+let stopHeaderStickyWatch: (() => void) | null = null;
+
+watchEffect(() => {
+  if (props.stickyHeader) {
+    // Create watcher if it doesn't exist
+    if (!stopHeaderStickyWatch) {
+      stopHeaderStickyWatch = watch(isHeaderSticky, setHeaderCellWidth);
+    }
+  } else {
+    // Cleanup watcher if it exists
+    if (stopHeaderStickyWatch) {
+      stopHeaderStickyWatch();
+      stopHeaderStickyWatch = null;
+    }
+  }
 });
 
-watch(localSelectedRows, onChangeLocalSelectedRows);
-watch(() => props.selectedRows, onChangeSelectedRows, { immediate: true });
-watch(() => props.expandedRows, onChangeExpandedRows, { immediate: true });
-watch(selectAll, onChangeSelectAll);
-watch(isHeaderSticky, setHeaderCellWidth);
-watch(isFooterSticky, (newValue) =>
-  newValue ? nextTick(setFooterCellWidth) : setFooterCellWidth(null),
-);
+// Sticky footer watcher (only created when stickyFooter is enabled)
+let stopFooterStickyWatch: (() => void) | null = null;
+
+watchEffect(() => {
+  if (props.stickyFooter) {
+    // Create watcher if it doesn't exist
+    if (!stopFooterStickyWatch) {
+      stopFooterStickyWatch = watch(isFooterSticky, (newValue) =>
+        newValue ? nextTick(setFooterCellWidth) : setFooterCellWidth(null),
+      );
+    }
+  } else {
+    // Cleanup watcher if it exists
+    if (stopFooterStickyWatch) {
+      stopFooterStickyWatch();
+      stopFooterStickyWatch = null;
+    }
+  }
+});
 
 let resizeObserver: ResizeObserver | null = null;
 let scrollRafId: number | null = null;
@@ -612,6 +710,85 @@ function onClickCell(cell: Cell, row: Row, key: string | number) {
   emit("clickCell", cell, row, key);
 }
 
+function onBodyClick(event: MouseEvent) {
+  const target = event.target as HTMLElement;
+
+  const row = target.closest("tr");
+
+  if (!row) return;
+
+  const rowId = row.getAttribute("data-row-id");
+
+  if (!rowId) return;
+
+  const rowData = visibleFlatRows.value.find((r) => String(r.id) === rowId);
+
+  if (!rowData) return;
+
+  // Handle checkbox toggle via event delegation.
+  // When unchecking, UCheckbox.onIconClick() calls input.click() which dispatches
+  // a second (programmatic) click event with target=INPUT and isTrusted=false.
+  // Without this guard, onToggleRowCheckbox fires twice (deselect then reselect).
+  const checkboxCell = target.closest("td[data-checkbox-id]");
+
+  if (checkboxCell) {
+    if (target.tagName === "INPUT" && !event.isTrusted) return;
+
+    onToggleRowCheckbox(rowData);
+
+    return;
+  }
+
+  // Handle expand icon toggle via event delegation
+  const expandIconElement = target.closest("[data-expand-icon]");
+
+  if (expandIconElement) {
+    onToggleExpand(rowData);
+
+    return;
+  }
+
+  // Handle row click via event delegation
+  onClickRow(rowData);
+
+  // Handle cell click via event delegation
+  const cell = target.closest("td");
+
+  if (cell) {
+    const cellKey = cell.getAttribute("data-cell-key");
+
+    if (cellKey) {
+      const cellValue = rowData[cellKey];
+
+      onClickCell(cellValue, rowData, cellKey);
+    }
+  }
+}
+
+function onBodyDoubleClick(event: MouseEvent) {
+  const target = event.target as HTMLElement;
+
+  const row = target.closest("tr");
+
+  if (!row) return;
+
+  const rowId = row.getAttribute("data-row-id");
+
+  if (!rowId) return;
+
+  const rowData = visibleFlatRows.value.find((r) => String(r.id) === rowId);
+
+  if (!rowData) return;
+
+  const selection = window.getSelection();
+
+  if (selection) {
+    selection.removeAllRanges();
+  }
+
+  onDoubleClickRow(rowData);
+}
+
 function onChangeSelectAll(selectAll: boolean) {
   if (selectAll && canSelectAll.value) {
     localSelectedRows.value = [...flatTableRows.value];
@@ -631,6 +808,7 @@ function onChangeLocalSelectedRows(selectedRows: Row[]) {
     nextTick(setHeaderCellWidth);
   }
 
+  // Set flag to prevent selectAll watcher from triggering
   selectAll.value = !!selectedRows.length;
 
   emit("update:selectedRows", localSelectedRows.value);
@@ -853,6 +1031,135 @@ const tableRowAttrs = {
   bodyCellSearchMatchActiveAttrs,
   bodyCellSearchMatchTextActiveAttrs,
 } as unknown as UTableRowAttrs;
+
+function renderDateDividerRow(row: FlatRow, rowIndex: number): VNode | null {
+  if (!isShownDateDivider(rowIndex) || !row.rowDate) return null;
+
+  const isSelected = isRowSelectedWithin(rowIndex);
+
+  const propsDateDivider = isSelected
+    ? bodyRowCheckedDateDividerAttrs.value
+    : bodyRowDateDividerAttrs.value;
+
+  const dividerNode = h(UDivider, {
+    label: getDateDividerData(row.rowDate).label,
+    ...(isSelected ? bodySelectedDateDividerAttrs.value : bodyDateDividerAttrs.value),
+    config: getDateDividerConfig(row, isSelected),
+  });
+
+  return h("tr", propsDateDivider, [
+    h(
+      "td",
+      {
+        ...bodyCellDateDividerAttrs.value,
+        colspan: colsCount.value,
+      },
+      [dividerNode],
+    ),
+  ]);
+}
+
+function renderTableRowSlots(row: FlatRow, rowIndex: number) {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+  const cellSlots: Record<string, Function> = {};
+
+  // Create cell slots
+  Object.entries(mapRowColumns(row, normalizedColumns.value)).forEach(([key], cellIndex) => {
+    cellSlots[`cell-${key}`] = ({
+      value: cellValue,
+      row: cellRow,
+    }: {
+      value: Cell;
+      row: FlatRow;
+    }) => {
+      const hasCellSlot = hasSlotContent(slots[`cell-${key}`], {
+        value: cellValue,
+        row: cellRow,
+        index: rowIndex,
+        cellIndex,
+      });
+
+      if (hasCellSlot) {
+        return slots[`cell-${key}`]?.({
+          value: cellValue,
+          row: cellRow,
+          index: rowIndex,
+          cellIndex,
+        });
+      }
+
+      return null;
+    };
+  });
+
+  // Add expand slot
+  cellSlots.expand = ({ row: expandedRow, expanded }: { row: FlatRow; expanded: boolean }) => {
+    const hasExpandSlot = hasSlotContent(slots.expand, {
+      index: rowIndex,
+      row: expandedRow,
+      expanded,
+    });
+
+    if (hasExpandSlot) {
+      return slots.expand?.({ index: rowIndex, row: expandedRow, expanded });
+    }
+
+    return null;
+  };
+
+  // Add nested-row slot
+  cellSlots["nested-row"] = () => {
+    const hasNestedRowSlot = hasSlotContent(slots["nested-row"], {
+      index: rowIndex,
+      row,
+      nestedLevel: Number(row.nestedLevel || 0),
+    });
+
+    if (hasNestedRowSlot && row) {
+      return slots["nested-row"]?.({
+        index: rowIndex,
+        row,
+        nestedLevel: Number(row.nestedLevel || 0),
+      });
+    }
+
+    return null;
+  };
+
+  return cellSlots;
+}
+
+function renderTableRow(row: FlatRow, rowIndex: number): VNode {
+  return h(
+    UTableRow,
+    {
+      selectable: props.selectable,
+      row,
+      columns: normalizedColumns.value,
+      config: config.value,
+      attrs: tableRowAttrs as unknown as UTableRowAttrs,
+      colsCount: colsCount.value,
+      nestedLevel: Number(row.nestedLevel || 0),
+      emptyCellLabel: props.emptyCellLabel,
+      "data-test": getDataTest("row"),
+      "data-row-id": row.id,
+      isExpanded: localExpandedRows.value.includes(row.id),
+      isChecked: isRowSelected(row),
+      columnPositions: columnPositions.value,
+      search: props.search,
+      searchMatchColumns: getRowSearchMatchColumns(row),
+      activeSearchMatchColumn: getRowActiveSearchMatchColumn(row),
+      textEllipsis: props.textEllipsis,
+    } as unknown as UTableRowProps,
+    renderTableRowSlots(row, rowIndex),
+  );
+}
+
+function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
+  return [renderDateDividerRow(row, rowIndex), renderTableRow(row, rowIndex)].filter(
+    Boolean,
+  ) as VNode[];
+}
 </script>
 
 <template>
@@ -893,10 +1200,10 @@ const tableRowAttrs = {
       >
         <template v-if="hasSlotContent($slots[`header-${column.key}`], { column, index })">
           <!--
-              @slot Use it to customize needed header cell.
-              @binding {object} column
-              @binding {number} index
-            -->
+            @slot Use it to customize needed header cell.
+            @binding {object} column
+            @binding {number} index
+          -->
           <slot :name="`header-${column.key}`" :column="column" :index="index" />
         </template>
 
@@ -1042,7 +1349,12 @@ const tableRowAttrs = {
           <ULoaderProgress :loading="loading" v-bind="headerLoaderAttrs" />
         </thead>
 
-        <tbody v-if="sortedRows.length" v-bind="bodyAttrs">
+        <tbody
+          v-if="sortedRows.length"
+          v-bind="bodyAttrs"
+          @click="onBodyClick"
+          @dblclick="onBodyDoubleClick"
+        >
           <tr
             v-if="hasBeforeFirstRowSlot"
             v-bind="isRowSelected(sortedRows[0]) ? beforeBodyRowCheckedAttrs : beforeBodyRowAttrs"
@@ -1060,105 +1372,9 @@ const tableRowAttrs = {
             />
           </tr>
 
-          <template v-for="(row, rowIndex) in renderedRows" :key="row.id">
-            <tr
-              v-if="isShownDateDivider(rowIndex) && !isRowSelectedWithin(rowIndex) && row.rowDate"
-              v-bind="bodyRowDateDividerAttrs"
-            >
-              <td v-bind="bodyCellDateDividerAttrs" :colspan="colsCount">
-                <UDivider
-                  :label="getDateDividerData(row.rowDate).label"
-                  v-bind="bodyDateDividerAttrs"
-                  :config="getDateDividerConfig(row, false)"
-                />
-              </td>
-            </tr>
-
-            <tr
-              v-if="isShownDateDivider(rowIndex) && isRowSelectedWithin(rowIndex) && row.rowDate"
-              v-bind="bodyRowCheckedDateDividerAttrs"
-            >
-              <td v-bind="bodyCellDateDividerAttrs" :colspan="colsCount">
-                <UDivider
-                  :label="getDateDividerData(row.rowDate).label"
-                  v-bind="bodySelectedDateDividerAttrs"
-                  :config="getDateDividerConfig(row, true)"
-                />
-              </td>
-            </tr>
-
-            <UTableRow
-              :selectable="selectable"
-              :row="row"
-              :columns="normalizedColumns"
-              :config="config"
-              :attrs="tableRowAttrs as unknown as UTableRowAttrs"
-              :cols-count="colsCount"
-              :nested-level="Number(row.nestedLevel || 0)"
-              :empty-cell-label="emptyCellLabel"
-              :data-test="getDataTest('row')"
-              :data-row-id="row.id"
-              :is-expanded="localExpandedRows.includes(row.id)"
-              :is-checked="isRowSelected(row)"
-              :column-positions="columnPositions"
-              :search="search"
-              :search-match-columns="getRowSearchMatchColumns(row)"
-              :active-search-match-column="getRowActiveSearchMatchColumn(row)"
-              :text-ellipsis="textEllipsis"
-              @click="onClickRow"
-              @dblclick="onDoubleClickRow"
-              @click-cell="onClickCell"
-              @toggle-expand="onToggleExpand"
-              @toggle-checkbox="onToggleRowCheckbox"
-            >
-              <template
-                v-for="(value, key, cellIndex) in mapRowColumns(row, normalizedColumns)"
-                :key="`${rowIndex}-${cellIndex}`"
-                #[`cell-${key}`]="{ value: cellValue, row: cellRow }"
-              >
-                <!--
-                  @slot Use it to customize needed table cell.
-                  @binding {string} value
-                  @binding {object} row
-                  @binding {number} index
-                  @binding {number} cellIndex
-                -->
-                <slot
-                  :name="`cell-${key}`"
-                  :value="cellValue"
-                  :row="cellRow"
-                  :index="rowIndex"
-                  :cell-index="cellIndex"
-                />
-              </template>
-
-              <template #expand="{ row: expandedRow, expanded }">
-                <!--
-                  @slot Use it to customize row expand icon.
-                  @binding {object} row
-                  @binding {boolean} expanded
-                  @binding {number} index
-                -->
-                <slot name="expand" :index="rowIndex" :row="expandedRow" :expanded="expanded" />
-              </template>
-
-              <template #nested-row>
-                <!--
-                  @slot Use it to add inside nested row.
-                  @binding {object} row
-                  @binding {number} index
-                  @binding {number} nestedLevel
-                -->
-                <slot
-                  v-if="row"
-                  name="nested-row"
-                  :index="rowIndex"
-                  :row="row"
-                  :nested-level="Number(row.nestedLevel || 0)"
-                />
-              </template>
-            </UTableRow>
-          </template>
+          <component
+            :is="() => renderedRows.map((row, rowIndex) => renderRowTemplate(row, rowIndex)).flat()"
+          />
 
           <tr v-if="props.virtualScroll && virtualScroll.bottomSpacerHeight.value > 0">
             <td

package/ui.data-table/UTableRow.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { computed, onMounted, useTemplateRef } from "vue";
-import { cx } from "../utils/ui";
+import { computed, onMounted, useTemplateRef, useSlots, useAttrs, h } from "vue";
 import { hasSlotContent, isEmptyValue } from "../utils/helper";
+import { cx } from "../utils/ui";
 
 import { PX_IN_REM } from "../constants";
 import { mapRowColumns } from "./utilTable";
 
-import { useMutationObserver } from "../composables/useMutationObserver";
 import { useUI } from "../composables/useUI";
+import { useMutationObserver } from "../composables/useMutationObserver";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
@@ -15,6 +15,7 @@ import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 import defaultConfig from "./config";
 
 import { StickySide } from "./types";
+import type { VNode } from "vue";
 import type { Cell, CellObject, Row, UTableRowProps, Config, ColumnObject } from "./types";
 
 const NESTED_ROW_SHIFT_REM = 1.5;
@@ -24,7 +25,8 @@ defineOptions({ internal: true });
 
 const props = defineProps<UTableRowProps>();
 
-const emit = defineEmits(["click", "dblclick", "clickCell", "toggleExpand", "toggleCheckbox"]);
+const slots = useSlots();
+const attrs = useAttrs();
 
 const cellRef = useTemplateRef<HTMLDivElement[]>("cell");
 const toggleWrapperRef = useTemplateRef<HTMLDivElement[]>("toggle-wrapper");
@@ -109,20 +111,6 @@ function getNestedCheckboxShift() {
   return { transform: `translateX(${props.nestedLevel * LAST_NESTED_ROW_SHIFT_REM}rem)` };
 }
 
-function onClick(row: Row) {
-  emit("click", row);
-}
-
-function onDoubleClick(row: Row) {
-  const selection = window.getSelection();
-
-  if (selection) {
-    selection.removeAllRanges();
-  }
-
-  emit("dblclick", row);
-}
-
 function setCellTitle(mutations: MutationRecord[]) {
   mutations.forEach((mutation) => {
     const { target } = mutation;
@@ -147,10 +135,6 @@ function setElementTitle(element: HTMLElement) {
   }
 }
 
-function onClickCell(cell: unknown | string | number, row: Row, key: string | number) {
-  emit("clickCell", cell, row, key);
-}
-
 function getRowClasses(row: Row) {
   const rowClasses = row?.class || "";
 
@@ -161,14 +145,6 @@ function getRowAttrs() {
   return props.isChecked ? props.attrs.bodyRowCheckedAttrs.value : props.attrs.bodyRowAttrs.value;
 }
 
-function onToggleExpand(row: Row) {
-  emit("toggleExpand", row);
-}
-
-function onInputCheckbox(row: Row) {
-  emit("toggleCheckbox", row);
-}
-
 function getStickyColumnStyle(column: ColumnObject) {
   const position = props.columnPositions.get(column.key);
 
@@ -254,6 +230,10 @@ function escapeHtml(text: string): string {
   return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 
+function isNestedFirstCell(index: number): boolean {
+  return (Boolean(props.row.row) || Boolean(props.nestedLevel)) && index === 0;
+}
+
 function shouldRenderCellWrapper(row: Row, key: string): boolean {
   return Boolean(
     props.textEllipsis ||
@@ -262,126 +242,222 @@ function shouldRenderCellWrapper(row: Row, key: string): boolean {
   );
 }
 
+function renderCellContent(value: Cell, key: string, index: number): VNode | VNode[] | string {
+  const keyStr = String(key);
+  const hasCellSlot = hasSlotContent(slots[`cell-${key}`], { value, row: props.row, index });
+
+  // Check if slot exists
+  if (hasCellSlot) {
+    return slots[`cell-${key}`]?.({ value, row: props.row, index }) || "";
+  }
+
+  // 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,
+        getCellContentClass(props.row, keyStr),
+      ]),
+      innerHTML: getHighlightedHtml(value, keyStr),
+    });
+  }
+
+  // Render plain text
+  return formatCellValue(value);
+}
+
+function renderNestedFirstCell(value: Cell, key: string, index: number): VNode {
+  const keyStr = String(key);
+  const hasExpandSlot = hasSlotContent(slots?.expand, {
+    row: props.row,
+    expanded: props.isExpanded,
+  });
+
+  const toggleIconNode = h(UIcon, {
+    size: "xs",
+    interactive: true,
+    name: getToggleIconName(),
+    color: "primary",
+    ...toggleIconConfig.value,
+  });
+
+  const toggleWrapperNode = h(
+    "div",
+    {
+      ref: toggleWrapperRef,
+      ...props.attrs.bodyCellNestedIconWrapperAttrs.value,
+      style: { width: getIconWidth() },
+    },
+    [toggleIconNode],
+  );
+
+  const toggleIconWrapperNode = h(
+    "div",
+    {
+      "data-row-toggle-icon": props.row.id,
+      "data-expand-icon": props.row.id,
+      onDblclick: (e: Event) => e.stopPropagation(),
+    },
+    hasExpandSlot
+      ? slots?.expand?.({ row: props.row, expanded: props.isExpanded })
+      : [toggleWrapperNode],
+  );
+
+  const hasCellSlot = hasSlotContent(slots[`cell-${key}`], { value, row: props.row, index });
+
+  return h(
+    "div",
+    {
+      style: getNestedShift(),
+      ...props.attrs.bodyCellNestedAttrs.value,
+    },
+    [
+      props.row.row ? toggleIconWrapperNode : null,
+      // Cell content
+      ...(() => {
+        if (hasCellSlot) {
+          const slotContent = slots[`cell-${key}`]?.({ value, row: props.row, index });
+
+          return Array.isArray(slotContent) ? slotContent : [slotContent];
+        }
+
+        if (shouldRenderCellWrapper(props.row, keyStr)) {
+          return [
+            h("div", {
+              ref: cellRef,
+              ...props.attrs.bodyCellContentAttrs.value,
+              class: cx([
+                props.attrs.bodyCellContentAttrs.value.class,
+                getCellContentClass(props.row, keyStr),
+              ]),
+              "data-test": getDataTest(`${key}-cell`),
+              innerHTML: getHighlightedHtml(value, keyStr),
+            }),
+          ];
+        }
+
+        return [formatCellValue(value)];
+      })(),
+    ].filter(Boolean),
+  );
+}
+
+function renderTableCell(value: Cell, key: string, index: number): VNode {
+  const keyStr = String(key);
+
+  const nestedCellNode = isNestedFirstCell(index)
+    ? renderNestedFirstCell(value, key, index)
+    : renderCellContent(value, key, index);
+
+  return h(
+    "td",
+    {
+      key: index,
+      ...props.attrs.bodyCellBaseAttrs.value,
+      class: cx([
+        props.attrs.bodyCellBaseAttrs.value.class,
+        props.columns[index].tdClass,
+        getCellClasses(props.row, keyStr),
+        getStickyColumnClass(props.columns[index]),
+        getSearchMatchCellClass(keyStr),
+      ]),
+      style: getStickyColumnStyle(props.columns[index]),
+      "data-cell-key": key,
+      "data-test": getDataTest(`${key}-cell`),
+    },
+    [nestedCellNode],
+  );
+}
+
+function renderCheckboxCell(): VNode | null {
+  if (!props.selectable) return null;
+
+  const checkboxNode = h(UCheckbox, {
+    modelValue: props.isChecked,
+    size: "md",
+    ...props.attrs.bodyCheckboxAttrs.value,
+    "data-id": props.row.id,
+    "data-checkbox-id": props.row.id,
+    "data-test": getDataTest("body-checkbox"),
+  });
+
+  return h(
+    "td",
+    {
+      ...props.attrs.bodyCellCheckboxAttrs.value,
+      "data-checkbox-id": props.row.id,
+      class: cx([
+        props.attrs.bodyCellCheckboxAttrs.value.class,
+        props.columns[0]?.sticky === StickySide.Left
+          ? props.attrs.bodyCellStickyLeftAttrs.value.class
+          : "",
+      ]),
+      style: {
+        ...getNestedCheckboxShift(),
+        ...(props.columns[0]?.sticky === StickySide.Left ? { left: "0" } : {}),
+      },
+      onDblclick: (e: Event) => e.stopPropagation(),
+    },
+    [checkboxNode],
+  );
+}
+
+function renderMainRow(): VNode | null {
+  const hasNestedRowSlot = hasSlotContent(slots["nested-row"], {
+    row: props.row,
+    nestedLevel: props.nestedLevel,
+  });
+
+  if (hasNestedRowSlot && props.row.parentRowId) {
+    return null;
+  }
+
+  const cells = Object.entries(mapRowColumns(props.row, props.columns)).map(
+    ([key, value], index) => {
+      return renderTableCell(value, key, index);
+    },
+  );
+
+  return h(
+    "tr",
+    {
+      ...attrs,
+      ...getRowAttrs(),
+      class: cx([getRowAttrs().class, getRowClasses(props.row)]),
+    },
+    [renderCheckboxCell(), ...cells].filter(Boolean),
+  );
+}
+
+function renderNestedRow(): VNode | null {
+  const hasNestedRowSlot = hasSlotContent(slots["nested-row"], {
+    row: props.row,
+    nestedLevel: props.nestedLevel,
+  });
+
+  if (!hasNestedRowSlot || !props.row.parentRowId) {
+    return null;
+  }
+
+  const nestedRowSlotContent = slots["nested-row"]?.({
+    row: props.row,
+    nestedLevel: props.nestedLevel,
+  });
+
+  const tdNode = h(
+    "td",
+    { colspan: props.columns.length + Number(props.selectable) },
+    nestedRowSlotContent,
+  );
+
+  return h("tr", { class: props.row.class }, [tdNode]);
+}
+
 const { getDataTest } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <tr
-    v-if="!row.parentRowId || !hasSlotContent($slots['nested-row'])"
-    v-bind="{ ...$attrs, ...getRowAttrs() }"
-    :class="cx([getRowAttrs().class, getRowClasses(row)])"
-    @click="onClick(props.row)"
-    @dblclick="onDoubleClick(props.row)"
-  >
-    <td
-      v-if="selectable"
-      :style="{
-        ...getNestedCheckboxShift(),
-        ...(columns[0]?.sticky === StickySide.Left ? { left: '0' } : {}),
-      }"
-      v-bind="attrs.bodyCellCheckboxAttrs.value"
-      :class="
-        cx([
-          attrs.bodyCellCheckboxAttrs.value.class,
-          columns[0]?.sticky === StickySide.Left ? attrs.bodyCellStickyLeftAttrs.value.class : '',
-        ])
-      "
-      @click.stop
-      @dblclick.stop
-    >
-      <UCheckbox
-        :model-value="isChecked"
-        size="md"
-        v-bind="attrs.bodyCheckboxAttrs.value"
-        :data-id="row.id"
-        :data-test="getDataTest('body-checkbox')"
-        @input="onInputCheckbox(row)"
-      />
-    </td>
-
-    <td
-      v-for="(value, key, index) in mapRowColumns(row, columns)"
-      :key="index"
-      v-bind="attrs.bodyCellBaseAttrs.value"
-      :class="
-        cx([
-          columns[index].tdClass,
-          getCellClasses(row, String(key)),
-          getStickyColumnClass(columns[index]),
-          getSearchMatchCellClass(String(key)),
-        ])
-      "
-      :style="getStickyColumnStyle(columns[index])"
-      @click="onClickCell(value, row, key)"
-    >
-      <div
-        v-if="(row.row || nestedLevel) && index === 0"
-        :style="getNestedShift()"
-        v-bind="attrs.bodyCellNestedAttrs.value"
-      >
-        <div
-          v-if="row.row"
-          :data-row-toggle-icon="row.id"
-          @dblclick.stop
-          @click.stop="onToggleExpand(row)"
-        >
-          <slot name="expand" :row="row" :expanded="isExpanded">
-            <div
-              ref="toggle-wrapper"
-              v-bind="attrs.bodyCellNestedIconWrapperAttrs.value"
-              :style="{ width: getIconWidth() }"
-            >
-              <UIcon
-                size="xs"
-                interactive
-                :name="getToggleIconName()"
-                color="primary"
-                v-bind="toggleIconConfig"
-              />
-            </div>
-          </slot>
-        </div>
-        <slot :name="`cell-${key}`" :value="value" :row="row" :index="index">
-          <!-- eslint-disable vue/no-v-html -->
-          <div
-            v-if="shouldRenderCellWrapper(row, String(key))"
-            ref="cell"
-            v-bind="attrs.bodyCellContentAttrs.value"
-            :class="
-              cx([attrs.bodyCellContentAttrs.value.class, getCellContentClass(row, String(key))])
-            "
-            :data-test="getDataTest(`${key}-cell`)"
-            v-html="getHighlightedHtml(value, String(key))"
-          />
-          <span v-else :data-test="getDataTest(`${key}-cell`)">{{ formatCellValue(value) }}</span>
-        </slot>
-      </div>
-
-      <template v-else>
-        <slot :name="`cell-${key}`" :value="value" :row="row" :index="index">
-          <!-- eslint-disable vue/no-v-html -->
-          <div
-            v-if="shouldRenderCellWrapper(row, String(key))"
-            v-bind="attrs.bodyCellContentAttrs.value"
-            ref="cell"
-            :class="
-              cx([attrs.bodyCellContentAttrs.value.class, getCellContentClass(row, String(key))])
-            "
-            :data-test="getDataTest(`${key}-cell`)"
-            v-html="getHighlightedHtml(value, String(key))"
-          />
-          <span v-else :data-test="getDataTest(`${key}-cell`)">{{ formatCellValue(value) }}</span>
-        </slot>
-      </template>
-    </td>
-  </tr>
-
-  <tr
-    v-if="row.parentRowId && hasSlotContent($slots['nested-row'], { row, nestedLevel })"
-    :class="row.class"
-  >
-    <td :colspan="columns.length + Number(selectable)">
-      <slot name="nested-row" :row="row" :nested-level="nestedLevel" />
-    </td>
-  </tr>
+  <component :is="() => [renderMainRow(), renderNestedRow()].filter(Boolean)" />
 </template>

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

@@ -775,9 +775,9 @@ describe("UTable.vue", () => {
     it("Toggle Row Checkbox – emits update:selectedRows when row checkbox is clicked", async () => {
       const component = mountUTable(getDefaultProps({ selectable: true }));
 
-      const rowCheckbox = component.find("tbody tr").find("input[type='checkbox']");
+      const checkboxCell = component.find("tbody tr td[data-checkbox-id]");
 
-      await rowCheckbox.trigger("change");
+      await checkboxCell.trigger("click");
 
       expect(component.emitted("update:selectedRows")).toBeTruthy();
       const emittedRows = component.emitted("update:selectedRows")![0][0] as Row[];
@@ -836,12 +836,24 @@ describe("UTable.vue", () => {
     it("Multiple Row Selection – emits update:selectedRows with all selected rows", async () => {
       const component = mountUTable(getDefaultProps({ selectable: true }));
 
-      const tableRows = component.findAll("tbody tr");
-
       // Select first row
-      await tableRows[0].find("input[type='checkbox']").trigger("change");
+      let tableRows = component.findAll("tbody tr");
+
+      await tableRows[0].find("td[data-checkbox-id]").trigger("click");
+      await nextTick();
+
+      // Update props with the first selected row
+      const firstEmit = component.emitted("update:selectedRows")![0][0] as Row[];
+
+      await component.setProps({ selectedRows: firstEmit });
+      await nextTick();
+
+      // Re-query the DOM after props update
+      tableRows = component.findAll("tbody tr");
+
       // Select second row
-      await tableRows[1].find("input[type='checkbox']").trigger("change");
+      await tableRows[1].find("td[data-checkbox-id]").trigger("click");
+      await nextTick();
 
       const emittedEvents = component.emitted("update:selectedRows");
 

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

@@ -1,6 +1,6 @@
 import { flushPromises, mount } from "@vue/test-utils";
 import { describe, it, expect, vi } from "vitest";
-import { ref } from "vue";
+import { ref, nextTick } from "vue";
 
 import UTableRow from "../UTableRow.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -264,14 +264,17 @@ describe("UTableRow.vue", () => {
         }),
       });
 
-      const icon = component.findComponent(UIcon);
+      let icon = component.findComponent(UIcon);
 
       expect(icon.props("name")).toBe(defaultConfig.defaults.expandIcon);
 
-      component.setProps({ isExpanded: true });
-
+      await component.setProps({ isExpanded: true });
+      await nextTick();
       await flushPromises();
 
+      // Re-query the icon after props update
+      icon = component.findComponent(UIcon);
+
       expect(icon.props("name")).toBe(defaultConfig.defaults.collapseIcon);
     });
 
@@ -290,106 +293,8 @@ describe("UTableRow.vue", () => {
     });
   });
 
-  describe("Events", () => {
-    it("Click – emits click event when row is clicked", async () => {
-      const component = mount(UTableRow, {
-        props: getDefaultProps(),
-      });
-
-      await component.get("tr").trigger("click");
-
-      expect(component.emitted("click")).toBeTruthy();
-      expect(component.emitted("click")![0][0]).toEqual(defaultRow);
-    });
-
-    it("Double Click – emits dblclick event when row is double-clicked", async () => {
-      const component = mount(UTableRow, {
-        props: getDefaultProps(),
-      });
-
-      await component.get("tr").trigger("dblclick");
-
-      expect(component.emitted("dblclick")).toBeTruthy();
-      expect(component.emitted("dblclick")![0][0]).toEqual(defaultRow);
-    });
-
-    it("Click Cell – emits clickCell event when cell is clicked", async () => {
-      const component = mount(UTableRow, {
-        props: getDefaultProps(),
-      });
-
-      const firstCell = component.find("td");
-
-      await firstCell.trigger("click");
-
-      expect(component.emitted("clickCell")).toBeTruthy();
-      expect(component.emitted("clickCell")![0]).toEqual(["John Doe", defaultRow, "name"]);
-    });
-
-    it("Toggle Expand – emits toggleExpand event when expand icon is clicked", async () => {
-      const expandableRow: FlatRow = {
-        ...defaultRow,
-        row: [{ id: "2", name: "Child", nestedLeveL: 1 }],
-      };
-
-      const component = mount(UTableRow, {
-        props: getDefaultProps({ row: expandableRow }),
-      });
-
-      const expandIcon = component.find("[data-row-toggle-icon='1']");
-
-      await expandIcon.trigger("click");
-
-      expect(component.emitted("toggleExpand")).toBeTruthy();
-      expect(component.emitted("toggleExpand")![0][0]).toEqual(expandableRow);
-    });
-
-    it("Toggle Checkbox – emits toggleCheckbox event when checkbox is changed", async () => {
-      const component = mount(UTableRow, {
-        props: getDefaultProps({ selectable: true }),
-      });
-
-      const checkbox = component.getComponent(UCheckbox);
-
-      await checkbox.vm.$emit("input", defaultRow);
-
-      expect(component.emitted("toggleCheckbox")).toBeTruthy();
-      expect(component.emitted("toggleCheckbox")![0][0]).toEqual(defaultRow);
-    });
-
-    it("Checkbox Cell – prevents row click events when checkbox cell is clicked", async () => {
-      const component = mount(UTableRow, {
-        props: getDefaultProps({ selectable: true }),
-      });
-
-      const checkboxCell = component.find("td");
-
-      await checkboxCell.trigger("click");
-      await checkboxCell.trigger("dblclick");
-
-      expect(component.emitted("click")).toBeFalsy();
-      expect(component.emitted("dblclick")).toBeFalsy();
-    });
-
-    it("Expand Icon – prevents row click events when expand icon is clicked", async () => {
-      const expandableRow: FlatRow = {
-        ...defaultRow,
-        row: [{ id: "2", name: "Child", nestedLeveL: 1 }],
-      };
-
-      const component = mount(UTableRow, {
-        props: getDefaultProps({ row: expandableRow }),
-      });
-
-      const expandIcon = component.find("[data-row-toggle-icon='1']");
-
-      await expandIcon.trigger("click");
-      await expandIcon.trigger("dblclick");
-
-      expect(component.emitted("click")).toBeFalsy();
-      expect(component.emitted("dblclick")).toBeFalsy();
-    });
-  });
+  // Events are now handled by UTable via event delegation
+  // UTableRow no longer emits click, dblclick, clickCell, toggleExpand, or toggleCheckbox events
 
   describe("Slots", () => {
     it("Cell Slot – renders custom content from cell slot", () => {

package/ui.data-table/types.ts

@@ -199,4 +199,6 @@ export interface UTableRowProps {
   searchMatchColumns?: Set<string>;
   activeSearchMatchColumn?: string;
   textEllipsis?: boolean;
+  onToggleExpand?: (row: Row) => void;
+  onToggleCheckbox?: (row: Row) => void;
 }

package/ui.text-number/UNumber.vue

@@ -48,6 +48,38 @@ const preparedNumber = computed(() => {
   );
 });
 
+const formattedNumber = computed(() => {
+  let result = "";
+
+  if (props.currencyAlign === "left" && props.currency) {
+    result += props.currency;
+
+    if (props.currencySpace) {
+      result += " ";
+    }
+  }
+
+  if (props.value) {
+    result += mathSign.value;
+  }
+
+  result += preparedNumber.value.integer;
+
+  if (props.maxFractionDigits > 0) {
+    result += preparedNumber.value.decimalSeparator + preparedNumber.value.fraction;
+  }
+
+  if (props.currencyAlign === "right" && props.currency) {
+    if (props.currencySpace) {
+      result += " ";
+    }
+
+    result += props.currency;
+  }
+
+  return result;
+});
+
 defineExpose({
   /**
    * A reference to the component's wrapper element for direct DOM manipulation.
@@ -76,10 +108,12 @@ const {
     <!-- @slot Use it to add something before the number. -->
     <slot name="left" />
 
-    <div v-bind="numberAttrs" :data-test="getDataTest()">
+    <template v-if="raw">{{ formattedNumber }}</template>
+
+    <div v-else v-bind="numberAttrs" :data-test="getDataTest()">
       <span v-if="currencyAlign === 'left' && currency" v-bind="currencyAttrs" v-text="currency" />
 
-      <span v-if="value" v-bind="mathSignAttrs" v-text="mathSign" />
+      <span v-if="value && mathSign" v-bind="mathSignAttrs" v-text="mathSign" />
 
       <span v-bind="integerAttrs" v-text="preparedNumber.integer" />
 

package/ui.text-number/config.ts

@@ -31,6 +31,7 @@ export default /*tw*/ {
     align: "left",
     currencyAlign: "right",
     currencySpace: false,
+    raw: false,
     minFractionDigits: 0,
     maxFractionDigits: 2,
     decimalSeparator: ",",

package/ui.text-number/storybook/stories.ts

@@ -92,6 +92,17 @@ Sizes.args = { enum: "size" };
 export const CurrencyAlign = EnumTemplate.bind({});
 CurrencyAlign.args = { enum: "currencyAlign", currency: "USD", currencySpace: true };
 
+export const Raw = DefaultTemplate.bind({});
+Raw.args = { raw: true, currency: "USD", currencySpace: true };
+Raw.parameters = {
+  docs: {
+    description: {
+      story:
+        "When `raw` is enabled, the number is displayed without formatting and html tags, showing only the raw value.",
+    },
+  },
+};
+
 export const LimitFractionDigits: StoryFn<UNumberArgs> = (args: UNumberArgs) => ({
   components: { UNumber, UCol },
   setup: () => ({ args }),

package/ui.text-number/tests/UNumber.test.ts

@@ -192,6 +192,96 @@ describe("UNumber.vue", () => {
       });
     });
 
+    it("Raw – renders formatted number as plain text without HTML elements when raw is true", () => {
+      const component = mount(UNumber, {
+        props: {
+          value,
+          raw: true,
+        },
+      });
+
+      // Should render plain text without the number div structure
+      expect(component.find("[vl-key='number']").exists()).toBe(false);
+      expect(component.text()).toContain("1 234,56");
+    });
+
+    it("Raw – renders with currency when raw is true and currency is set", () => {
+      const currency = "$";
+
+      const component = mount(UNumber, {
+        props: {
+          value,
+          currency,
+          currencyAlign: "left",
+          raw: true,
+        },
+      });
+
+      expect(component.text()).toBe("$1 234,56");
+    });
+
+    it("Raw – renders with currency and space when raw is true, currency is set, and currencySpace is true", () => {
+      const currency = "$";
+
+      const component = mount(UNumber, {
+        props: {
+          value,
+          currency,
+          currencyAlign: "left",
+          currencySpace: true,
+          raw: true,
+        },
+      });
+
+      expect(component.text()).toBe("$ 1 234,56");
+    });
+
+    it("Raw – renders with currency on right when raw is true and currencyAlign is right", () => {
+      const currency = "$";
+
+      const component = mount(UNumber, {
+        props: {
+          value,
+          currency,
+          currencyAlign: "right",
+          raw: true,
+        },
+      });
+
+      expect(component.text()).toBe("1 234,56$");
+    });
+
+    // eslint-disable-next-line vue/max-len
+    it("Raw – renders with currency on right and space when raw is true, currencyAlign is right, and currencySpace is true", () => {
+      const currency = "$";
+
+      const component = mount(UNumber, {
+        props: {
+          value,
+          currency,
+          currencyAlign: "right",
+          currencySpace: true,
+          raw: true,
+        },
+      });
+
+      expect(component.text()).toBe("1 234,56 $");
+    });
+
+    it("Raw – renders with sign when raw is true and sign is set", () => {
+      const testNegativeValue = -123;
+
+      const component = mount(UNumber, {
+        props: {
+          value: testNegativeValue,
+          sign: MATH_SIGN_TYPE.auto as Props["sign"],
+          raw: true,
+        },
+      });
+
+      expect(component.text()).toContain(MATH_SIGN.MINUS);
+    });
+
     it("MinFractionDigits – adds zeros to meet the minimum fraction digits requirement", () => {
       const value = 123;
       const minFractionDigits = 2;

package/ui.text-number/types.ts

@@ -48,6 +48,11 @@ export interface Props {
    */
   currencySpace?: boolean;
 
+  /**
+   * Show formatted number as plain text without HTML elements.
+   */
+  raw?: boolean;
+
   /**
    * Minimal number of signs after the decimal separator (fractional part of a number).
    */