vueless 1.3.9-beta.13 → 1.3.9-beta.15

package/package.json

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

@@ -4,33 +4,36 @@ import {
   ref,
   computed,
   watch,
+  watchEffect,
   useSlots,
   nextTick,
   onMounted,
   onBeforeUnmount,
   useTemplateRef,
+  h,
 } 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 type { ComputedRef } from "vue";
+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 {
   Cell,
@@ -43,8 +46,8 @@ import type {
   FlatRow,
   ColumnObject,
   SearchMatch,
+  UTableRowProps,
 } from "./types";
-import { StickySide } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
@@ -133,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,
@@ -206,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({
@@ -219,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();
 
@@ -310,48 +329,155 @@ 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;
+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();
@@ -363,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);
@@ -375,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() {
@@ -396,8 +523,6 @@ function onChangeExpandedRows() {
 }
 
 function onWindowResize() {
-  tableWidth.value = tableWrapperRef.value?.offsetWidth || 0;
-
   updateHeaderOffsetTop();
   setHeaderCellWidth();
   setFooterCellWidth();
@@ -612,6 +737,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 = flatTableRows.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 = flatTableRows.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 +835,7 @@ function onChangeLocalSelectedRows(selectedRows: Row[]) {
     nextTick(setHeaderCellWidth);
   }
 
+  // Set flag to prevent selectAll watcher from triggering
   selectAll.value = !!selectedRows.length;
 
   emit("update:selectedRows", localSelectedRows.value);
@@ -642,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));
@@ -853,6 +1057,68 @@ 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, key: `date-divider-${row.id}` }, [
+    h(
+      "td",
+      {
+        ...bodyCellDateDividerAttrs.value,
+        colspan: colsCount.value,
+      },
+      [dividerNode],
+    ),
+  ]);
+}
+
+function renderTableRow(row: FlatRow, rowIndex: number): VNode {
+  return h(
+    UTableRow,
+    {
+      key: row.id,
+      selectable: props.selectable,
+      rowIndex,
+      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: 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,
+    slots,
+  );
+}
+
+function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
+  return [renderDateDividerRow(row, rowIndex), renderTableRow(row, rowIndex)].filter(
+    Boolean,
+  ) as VNode[];
+}
 </script>
 
 <template>
@@ -893,10 +1159,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 +1308,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 +1331,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