vueless 1.3.9-beta.14 → 1.3.9-beta.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.9-beta.14",
+  "version": "1.3.9-beta.15",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -57,7 +57,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.4.8",
+    "@vueless/storybook": "^1.4.9",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^10.0.2",
     "eslint-plugin-vue": "^10.3.0",

package/ui.data-table/UTable.vue

@@ -14,24 +14,25 @@ import {
 } from "vue";
 import { isEqual } from "lodash-es";
 
-import UEmpty from "../ui.container-empty/UEmpty.vue";
-import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
-import ULoaderProgress from "../ui.loader-progress/ULoaderProgress.vue";
-import UTableRow from "./UTableRow.vue";
-import UDivider from "../ui.container-divider/UDivider.vue";
-
 import { useUI } from "../composables/useUI";
 import { useVirtualScroll } from "../composables/useVirtualScroll";
+import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 import { getDefaults, cx, getMergedConfig } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
-import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
-
-import defaultConfig from "./config";
-import { normalizeColumns, mapRowColumns, getFlatRows, getRowChildrenIds } from "./utilTable";
 
 import { PX_IN_REM } from "../constants";
 import { COMPONENT_NAME } from "./constants";
 
+import defaultConfig from "./config";
+import { normalizeColumns, getFlatRows, getRowChildrenIds } from "./utilTable";
+import { StickySide } from "./types";
+
+import UEmpty from "../ui.container-empty/UEmpty.vue";
+import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
+import ULoaderProgress from "../ui.loader-progress/ULoaderProgress.vue";
+import UDivider from "../ui.container-divider/UDivider.vue";
+import UTableRow from "./UTableRow.vue";
+
 import type { ComputedRef, VNode } from "vue";
 import type { Config as UDividerConfig } from "../ui.container-divider/types";
 import type {
@@ -47,7 +48,6 @@ import type {
   SearchMatch,
   UTableRowProps,
 } from "./types";
-import { StickySide } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
@@ -136,6 +136,8 @@ const { localeMessages } = useComponentLocaleMessages<typeof defaultConfig.i18n>
 const localSelectedRows = shallowRef<Row[]>([]);
 const localExpandedRows = shallowRef<RowId[]>([]);
 
+const expandedRowsSet = computed(() => new Set(localExpandedRows.value));
+
 const sortedRows: ComputedRef<FlatRow[]> = computed(() => {
   const headerKeys = props.columns.map((column) =>
     typeof column === "object" ? column.key : column,
@@ -209,9 +211,9 @@ const tableRowWidthStyle = computed(() => ({ width: `${tableWidth.value / PX_IN_
 const flatTableRows = computed(() => getFlatRows(props.rows));
 
 const visibleFlatRows = computed(() => {
-  return flatTableRows.value.filter(
-    (row) => !row.parentRowId || localExpandedRows.value.includes(row.parentRowId),
-  );
+  const expanded = expandedRowsSet.value;
+
+  return flatTableRows.value.filter((row) => !row.parentRowId || expanded.has(row.parentRowId));
 });
 
 const virtualScroll = useVirtualScroll({
@@ -222,11 +224,25 @@ const virtualScroll = useVirtualScroll({
 });
 
 const renderedRows = computed(() => {
-  return props.virtualScroll
-    ? visibleFlatRows.value.slice(virtualScroll.startIndex.value, virtualScroll.endIndex.value)
-    : visibleFlatRows.value;
+  if (props.virtualScroll) {
+    // For virtual scroll, we still need to slice based on visible rows
+    // but we need to map back to the actual rows from flatTableRows
+    const visibleSlice = visibleFlatRows.value.slice(
+      virtualScroll.startIndex.value,
+      virtualScroll.endIndex.value,
+    );
+    const visibleIds = new Set(visibleSlice.map((row) => row.id));
+
+    return flatTableRows.value.filter((row) => visibleIds.has(row.id));
+  }
+
+  return flatTableRows.value;
 });
 
+function isRowVisible(row: FlatRow): boolean {
+  return !row.parentRowId || expandedRowsSet.value.has(row.parentRowId);
+}
+
 const searchMatches = computed<SearchMatch[]>(() => {
   const query = props.search?.toLowerCase();
 
@@ -445,11 +461,23 @@ watchEffect(() => {
 
 let resizeObserver: ResizeObserver | null = null;
 let scrollRafId: number | null = null;
+let resizeDebounceId: ReturnType<typeof setTimeout> | null = null;
+
+function scheduleWindowResize(tableRectWidth: number, tableRectHeight: number) {
+  if (resizeDebounceId) clearTimeout(resizeDebounceId);
+
+  resizeDebounceId = setTimeout(() => {
+    resizeDebounceId = null;
+    onWindowResize();
+
+    tableHeight.value = tableRectHeight;
+    tableWidth.value = tableRectWidth;
+  }, 300);
+}
 
 onMounted(async () => {
   document.addEventListener("keyup", onKeyupEsc);
   document.addEventListener("scroll", onScroll, { passive: true });
-  window.addEventListener("resize", onWindowResize);
 
   await nextTick();
   updateHeaderOffsetTop();
@@ -461,9 +489,7 @@ onMounted(async () => {
 
       if (!entry) return;
 
-      tableHeight.value = entry.contentRect.height;
-      tableWidth.value = entry.contentRect.width;
-      calculateStickyColumnPositions();
+      scheduleWindowResize(entry.contentRect.width, entry.contentRect.height);
     });
 
     resizeObserver.observe(tableWrapperRef.value);
@@ -473,12 +499,15 @@ onMounted(async () => {
 onBeforeUnmount(() => {
   document.removeEventListener("keyup", onKeyupEsc);
   document.removeEventListener("scroll", onScroll);
-  window.removeEventListener("resize", onWindowResize);
   resizeObserver?.disconnect();
 
   if (scrollRafId !== null) {
     cancelAnimationFrame(scrollRafId);
   }
+
+  if (resizeDebounceId !== null) {
+    clearTimeout(resizeDebounceId);
+  }
 });
 
 function onChangeSelectedRows() {
@@ -494,8 +523,6 @@ function onChangeExpandedRows() {
 }
 
 function onWindowResize() {
-  tableWidth.value = tableWrapperRef.value?.offsetWidth || 0;
-
   updateHeaderOffsetTop();
   setHeaderCellWidth();
   setFooterCellWidth();
@@ -721,7 +748,7 @@ function onBodyClick(event: MouseEvent) {
 
   if (!rowId) return;
 
-  const rowData = visibleFlatRows.value.find((r) => String(r.id) === rowId);
+  const rowData = flatTableRows.value.find((r) => String(r.id) === rowId);
 
   if (!rowData) return;
 
@@ -776,7 +803,7 @@ function onBodyDoubleClick(event: MouseEvent) {
 
   if (!rowId) return;
 
-  const rowData = visibleFlatRows.value.find((r) => String(r.id) === rowId);
+  const rowData = flatTableRows.value.find((r) => String(r.id) === rowId);
 
   if (!rowData) return;
 
@@ -820,9 +847,8 @@ function clearSelectedItems() {
 
 function onToggleExpand(row: Row) {
   const expanded = localExpandedRows.value;
-  const targetIndex = expanded.indexOf(row.id);
 
-  if (~targetIndex) {
+  if (expandedRowsSet.value.has(row.id)) {
     const idsToRemove = new Set([row.id, ...getRowChildrenIds(row)]);
 
     localExpandedRows.value = expanded.filter((id) => !idsToRemove.has(id));
@@ -1047,7 +1073,7 @@ function renderDateDividerRow(row: FlatRow, rowIndex: number): VNode | null {
     config: getDateDividerConfig(row, isSelected),
   });
 
-  return h("tr", propsDateDivider, [
+  return h("tr", { ...propsDateDivider, key: `date-divider-${row.id}` }, [
     h(
       "td",
       {
@@ -1059,81 +1085,13 @@ function renderDateDividerRow(row: FlatRow, rowIndex: number): VNode | null {
   ]);
 }
 
-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,
     {
+      key: row.id,
       selectable: props.selectable,
+      rowIndex,
       row,
       columns: normalizedColumns.value,
       config: config.value,
@@ -1143,15 +1101,16 @@ function renderTableRow(row: FlatRow, rowIndex: number): VNode {
       emptyCellLabel: props.emptyCellLabel,
       "data-test": getDataTest("row"),
       "data-row-id": row.id,
-      isExpanded: localExpandedRows.value.includes(row.id),
+      isExpanded: expandedRowsSet.value.has(row.id),
       isChecked: isRowSelected(row),
+      isVisible: isRowVisible(row),
       columnPositions: columnPositions.value,
       search: props.search,
       searchMatchColumns: getRowSearchMatchColumns(row),
       activeSearchMatchColumn: getRowActiveSearchMatchColumn(row),
       textEllipsis: props.textEllipsis,
     } as unknown as UTableRowProps,
-    renderTableRowSlots(row, rowIndex),
+    slots,
   );
 }
 

package/ui.data-table/UTableRow.vue

@@ -1,21 +1,32 @@
 <script setup lang="ts">
-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 {
+  Comment,
+  Fragment,
+  Text,
+  computed,
+  h,
+  onMounted,
+  useAttrs,
+  useSlots,
+  useTemplateRef,
+} from "vue";
 
 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";
+import { isEmptyValue } from "../utils/helper";
+import { cx } from "../utils/ui";
 
-import defaultConfig from "./config";
+import { PX_IN_REM } from "../constants";
 
+import defaultConfig from "./config";
+import { mapRowColumns } from "./utilTable";
 import { StickySide } from "./types";
-import type { VNode } from "vue";
+
+import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
+import UIcon from "../ui.image-icon/UIcon.vue";
+
+import type { Slot, VNode } from "vue";
 import type { Cell, CellObject, Row, UTableRowProps, Config, ColumnObject } from "./types";
 
 const NESTED_ROW_SHIFT_REM = 1.5;
@@ -29,7 +40,6 @@ const slots = useSlots();
 const attrs = useAttrs();
 
 const cellRef = useTemplateRef<HTMLDivElement[]>("cell");
-const toggleWrapperRef = useTemplateRef<HTMLDivElement[]>("toggle-wrapper");
 
 if (props.textEllipsis) {
   useMutationObserver(cellRef, setCellTitle, {
@@ -67,17 +77,6 @@ function getToggleIconName() {
     : props.config?.defaults?.expandIcon;
 }
 
-function getIconWidth() {
-  const icon = document.querySelector(`[data-row-toggle-icon='${props.row.id}']`);
-  const currentWrapperWidth = toggleWrapperRef.value?.at(0)?.getBoundingClientRect()?.width || 0;
-
-  if (icon) {
-    return `${icon.getBoundingClientRect().width / PX_IN_REM}rem`;
-  }
-
-  return `${currentWrapperWidth / PX_IN_REM || 1}rem`;
-}
-
 function getCellClasses(row: Row, key: string) {
   const isCellData = typeof row[key] === "object" && row[key] !== null && "class" in row[key];
   const cell = row[key] as CellObject;
@@ -234,6 +233,54 @@ function isNestedFirstCell(index: number): boolean {
   return (Boolean(props.row.row) || Boolean(props.nestedLevel)) && index === 0;
 }
 
+function getRowIndex(): number {
+  return props.rowIndex ?? 0;
+}
+
+function isSlotContentEmpty(content: unknown): boolean {
+  const toArray = (arg: unknown) => {
+    return Array.isArray(arg) ? arg : [arg];
+  };
+
+  if (content === null || content === undefined) return true;
+
+  if (typeof content === "boolean" || typeof content === "number") {
+    return false;
+  }
+
+  if (typeof content === "string") {
+    return content.length === 0;
+  }
+
+  return toArray(content).every((node) => {
+    if (node === null || node === undefined) return true;
+
+    if (typeof node === "boolean" || typeof node === "number") {
+      return false;
+    }
+
+    if (typeof node === "string") {
+      return node.length === 0;
+    }
+
+    const vnode = node as VNode;
+
+    return (
+      vnode.type === Comment ||
+      (vnode.type === Text && !vnode.children?.length) ||
+      (vnode.type === Fragment && !vnode.children?.length)
+    );
+  });
+}
+
+function resolveSlotContent(slot: Slot | undefined, slotParams: Record<string, unknown>) {
+  if (!slot) return null;
+
+  const content = slot(slotParams);
+
+  return isSlotContentEmpty(content) ? null : content;
+}
+
 function shouldRenderCellWrapper(row: Row, key: string): boolean {
   return Boolean(
     props.textEllipsis ||
@@ -242,13 +289,19 @@ function shouldRenderCellWrapper(row: Row, key: string): boolean {
   );
 }
 
-function renderCellContent(value: Cell, key: string, index: number): VNode | VNode[] | string {
+function renderCellContent(value: Cell, key: string, cellIndex: number): VNode | VNode[] | string {
   const keyStr = String(key);
-  const hasCellSlot = hasSlotContent(slots[`cell-${key}`], { value, row: props.row, index });
+
+  const slotContent = resolveSlotContent(slots[`cell-${key}`], {
+    value,
+    row: props.row,
+    index: getRowIndex(),
+    cellIndex,
+  });
 
   // Check if slot exists
-  if (hasCellSlot) {
-    return slots[`cell-${key}`]?.({ value, row: props.row, index }) || "";
+  if (slotContent) {
+    return slotContent as VNode | VNode[] | string;
   }
 
   // Render cell wrapper with highlighted HTML
@@ -268,9 +321,11 @@ function renderCellContent(value: Cell, key: string, index: number): VNode | VNo
   return formatCellValue(value);
 }
 
-function renderNestedFirstCell(value: Cell, key: string, index: number): VNode {
+function renderNestedFirstCell(value: Cell, key: string, cellIndex: number): VNode {
   const keyStr = String(key);
-  const hasExpandSlot = hasSlotContent(slots?.expand, {
+
+  const expandSlotContent = resolveSlotContent(slots.expand, {
+    index: getRowIndex(),
     row: props.row,
     expanded: props.isExpanded,
   });
@@ -286,9 +341,7 @@ function renderNestedFirstCell(value: Cell, key: string, index: number): VNode {
   const toggleWrapperNode = h(
     "div",
     {
-      ref: toggleWrapperRef,
       ...props.attrs.bodyCellNestedIconWrapperAttrs.value,
-      style: { width: getIconWidth() },
     },
     [toggleIconNode],
   );
@@ -300,12 +353,15 @@ function renderNestedFirstCell(value: Cell, key: string, index: number): VNode {
       "data-expand-icon": props.row.id,
       onDblclick: (e: Event) => e.stopPropagation(),
     },
-    hasExpandSlot
-      ? slots?.expand?.({ row: props.row, expanded: props.isExpanded })
-      : [toggleWrapperNode],
+    expandSlotContent || [toggleWrapperNode],
   );
 
-  const hasCellSlot = hasSlotContent(slots[`cell-${key}`], { value, row: props.row, index });
+  const cellSlotContent = resolveSlotContent(slots[`cell-${key}`], {
+    value,
+    row: props.row,
+    index: getRowIndex(),
+    cellIndex,
+  });
 
   return h(
     "div",
@@ -317,10 +373,8 @@ function renderNestedFirstCell(value: Cell, key: string, index: number): VNode {
       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 (cellSlotContent) {
+          return Array.isArray(cellSlotContent) ? cellSlotContent : [cellSlotContent];
         }
 
         if (shouldRenderCellWrapper(props.row, keyStr)) {
@@ -351,6 +405,8 @@ function renderTableCell(value: Cell, key: string, index: number): VNode {
     ? renderNestedFirstCell(value, key, index)
     : renderCellContent(value, key, index);
 
+  const cellChildren = Array.isArray(nestedCellNode) ? nestedCellNode : [nestedCellNode];
+
   return h(
     "td",
     {
@@ -367,7 +423,7 @@ function renderTableCell(value: Cell, key: string, index: number): VNode {
       "data-cell-key": key,
       "data-test": getDataTest(`${key}-cell`),
     },
-    [nestedCellNode],
+    cellChildren,
   );
 }
 
@@ -404,16 +460,7 @@ function renderCheckboxCell(): VNode | null {
   );
 }
 
-function renderMainRow(): VNode | null {
-  const hasNestedRowSlot = hasSlotContent(slots["nested-row"], {
-    row: props.row,
-    nestedLevel: props.nestedLevel,
-  });
-
-  if (hasNestedRowSlot && props.row.parentRowId) {
-    return null;
-  }
-
+function renderMainRow(): VNode {
   const cells = Object.entries(mapRowColumns(props.row, props.columns)).map(
     ([key, value], index) => {
       return renderTableCell(value, key, index);
@@ -426,38 +473,48 @@ function renderMainRow(): VNode | null {
       ...attrs,
       ...getRowAttrs(),
       class: cx([getRowAttrs().class, getRowClasses(props.row)]),
+      style: { display: props.isVisible ? "" : "none" },
     },
     [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,
-  });
-
+function renderNestedRow(nestedRowSlotContent: VNode[]): VNode {
   const tdNode = h(
     "td",
     { colspan: props.columns.length + Number(props.selectable) },
     nestedRowSlotContent,
   );
 
-  return h("tr", { class: props.row.class }, [tdNode]);
+  return h(
+    "tr",
+    {
+      class: props.row.class,
+      style: { display: props.isVisible ? "" : "none" },
+    },
+    [tdNode],
+  );
+}
+
+function renderRows(): VNode[] {
+  if (props.row.parentRowId) {
+    const nestedRowSlotContent = resolveSlotContent(slots["nested-row"], {
+      index: getRowIndex(),
+      row: props.row,
+      nestedLevel: props.nestedLevel,
+    });
+
+    if (nestedRowSlotContent) {
+      return [renderNestedRow(nestedRowSlotContent)];
+    }
+  }
+
+  return [renderMainRow()];
 }
 
 const { getDataTest } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <component :is="() => [renderMainRow(), renderNestedRow()].filter(Boolean)" />
+  <component :is="renderRows" />
 </template>

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

@@ -68,6 +68,7 @@ describe("UTableRow.vue", () => {
       config: defaultConfig,
       isChecked: false,
       isExpanded: false,
+      isVisible: true,
       columnPositions,
       ...overrides,
     };
@@ -459,5 +460,26 @@ describe("UTableRow.vue", () => {
 
       expect(iconWrapper.exists()).toBe(true);
     });
+
+    it("isVisible – shows row when isVisible is true", () => {
+      const component = mount(UTableRow, {
+        props: getDefaultProps({ isVisible: true }),
+      });
+
+      const row = component.find("tr");
+      const style = row.attributes("style") || "";
+
+      expect(style).not.toContain("display: none");
+    });
+
+    it("isVisible – hides row when isVisible is false", () => {
+      const component = mount(UTableRow, {
+        props: getDefaultProps({ isVisible: false }),
+      });
+
+      const row = component.find("tr");
+
+      expect(row.attributes("style")).toContain("display: none");
+    });
   });
 });

package/ui.data-table/types.ts

@@ -185,6 +185,11 @@ export interface UTableRowAttrs {
 export interface UTableRowProps {
   row: FlatRow;
   columns: ColumnObject[];
+  /**
+   * Row index in the parent table (used for slot params).
+   * Optional to keep UTableRow mountable standalone in tests/internal usage.
+   */
+  rowIndex?: number;
   emptyCellLabel?: string;
   selectable: boolean;
   nestedLevel: number;
@@ -194,6 +199,7 @@ export interface UTableRowProps {
   config: Config;
   isChecked: boolean;
   isExpanded: boolean;
+  isVisible: boolean;
   columnPositions: Map<string, number>;
   search?: string;
   searchMatchColumns?: Set<string>;