vueless 0.0.465 → 0.0.466

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.465",
+  "version": "0.0.466",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.data-table/UTable.vue

@@ -297,7 +297,7 @@ import {
   toggleRowVisibility,
   switchRowCheck,
   getFlatRows,
-  rowsHasId,
+  addRowId,
 } from "./utilTable.js";
 
 import { PX_IN_REM } from "../constants.js";
@@ -565,20 +565,13 @@ watch(isFooterSticky, (newValue) =>
   newValue ? nextTick(setFooterCellWidth) : setFooterCellWidth(null),
 );
 watch(
-  () => selectedRows.value.length,
+  () => selectedRows.value,
   () => {
-    tableRows.value = tableRows.value.map((row) => syncRowCheck(row, selectedRows.value));
+    tableRows.value = tableRows.value
+      .map(addRowId)
+      .map((row) => syncRowCheck(row, selectedRows.value));
   },
-);
-watch(
-  () => props.rows,
-  () => {
-    if (!rowsHasId(props.rows)) {
-      // eslint-disable-next-line no-console
-      console.warn("[Vueless][UTable]: Each table row must have unique id.");
-    }
-  },
-  { deep: true, immediate: true },
+  { deep: true },
 );
 
 onMounted(() => {

package/ui.data-table/storybook/stories.js

@@ -405,7 +405,6 @@ CellSlots.args = {
     { key: "tags", label: "tags" },
   ],
   row: {
-    id: getRandomId(),
     link: "some link",
     money: {
       sum: 10,
@@ -418,7 +417,6 @@ CellSlots.args = {
     },
     row: [
       {
-        id: getRandomId(),
         isHidden: false,
         link: "some link",
         money: {
@@ -432,7 +430,6 @@ CellSlots.args = {
         },
       },
       {
-        id: getRandomId(),
         isHidden: false,
         link: "some link",
         money: {

package/ui.data-table/utilTable.js

@@ -1,3 +1,5 @@
+import { getRandomId } from "../utils/utilUI";
+
 export function normalizeColumns(columns) {
   return columns.map((column) => (typeof column === "string" ? { label: column } : column));
 }
@@ -15,13 +17,29 @@ export function getFilteredRow(row, columns) {
 export function syncRowCheck(row, selectedRows) {
   row.isChecked = selectedRows.includes(row.id);
 
-  if (row.row) {
+  if (row.row && !Array.isArray(row.row)) {
     row.row = syncRowCheck(row.row, selectedRows);
   }
 
   return row;
 }
 
+export function addRowId(row) {
+  const hasRowId = typeof row.id !== "undefined" && row.id !== null && row.id !== "";
+
+  row.id = hasRowId ? row.id : getRandomId();
+
+  if (row.row && !Array.isArray(row.row)) {
+    row.row = addRowId(row.row);
+  }
+
+  if (row.row && Array.isArray(row.row)) {
+    row.row = row.row.map((nestedRow) => addRowId(nestedRow));
+  }
+
+  return row;
+}
+
 export function toggleRowVisibility(row, targetRowId) {
   if (row.id === targetRowId) {
     if (Object.hasOwn(row, "isHidden")) {
@@ -73,28 +91,3 @@ export function getFlatRows(tableRows) {
 
   return rows;
 }
-
-export function rowsHasId(rows) {
-  const ids = new Set();
-  let totalRows = 0;
-
-  function addId(row) {
-    totalRows++;
-
-    if (typeof row.id !== "undefined") {
-      ids.add(row.id);
-    }
-
-    if (row.row && !Array.isArray(row.row)) {
-      addId(row.row);
-    }
-
-    if (row.row && Array.isArray(row.row)) {
-      row.row.forEach(addId);
-    }
-  }
-
-  rows.forEach((row) => addId(row));
-
-  return ids.size === totalRows;
-}

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.465",
+  "version": "0.0.466",
   "contributions": {
     "html": {
       "description-markup": "markdown",