vueless 0.0.465 → 0.0.467

package/package.json

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

package/ui.data-table/UTable.vue

@@ -75,11 +75,7 @@
         </div>
       </template>
 
-      <ULoaderProgress
-        v-if="resource && isHeaderSticky"
-        :resources="resource"
-        v-bind="stickyHeaderLoaderAttrs"
-      />
+      <ULoaderProgress v-if="isHeaderSticky" :loading="loading" v-bind="stickyHeaderLoaderAttrs" />
     </div>
 
     <div ref="table-wrapper" v-bind="tableWrapperAttrs">
@@ -148,7 +144,7 @@
             </th>
           </tr>
 
-          <ULoaderProgress v-if="resource" :resources="resource" v-bind="headerLoaderAttrs" />
+          <ULoaderProgress :loading="loading" v-bind="headerLoaderAttrs" />
         </thead>
 
         <tbody v-if="tableRows.length" v-bind="bodyAttrs">
@@ -297,7 +293,7 @@ import {
   toggleRowVisibility,
   switchRowCheck,
   getFlatRows,
-  rowsHasId,
+  addRowId,
 } from "./utilTable.js";
 
 import { PX_IN_REM } from "../constants.js";
@@ -365,11 +361,11 @@ const props = defineProps({
   },
 
   /**
-   * Set loader resource name to activate table progress loader exact for that resource (deprecated).
+   * Set table loader state.
    */
-  resource: {
-    type: String,
-    default: "",
+  loading: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UTable).loading,
   },
 
   /**
@@ -565,20 +561,13 @@ watch(isFooterSticky, (newValue) =>
   newValue ? nextTick(setFooterCellWidth) : setFooterCellWidth(null),
 );
 watch(
-  () => selectedRows.value.length,
-  () => {
-    tableRows.value = tableRows.value.map((row) => syncRowCheck(row, selectedRows.value));
-  },
-);
-watch(
-  () => props.rows,
+  () => selectedRows.value,
   () => {
-    if (!rowsHasId(props.rows)) {
-      // eslint-disable-next-line no-console
-      console.warn("[Vueless][UTable]: Each table row must have unique id.");
-    }
+    tableRows.value = tableRows.value
+      .map(addRowId)
+      .map((row) => syncRowCheck(row, selectedRows.value));
   },
-  { deep: true, immediate: true },
+  { deep: true },
 );
 
 onMounted(() => {

package/ui.data-table/config.js

@@ -98,6 +98,7 @@ export default /*tw*/ {
     dateDivider: false,
     stickyHeader: false,
     stickyFooter: false,
+    loading: false,
     /* icons */
     expandIcon: "add",
     collapseIcon: "remove",

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.467",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -8600,13 +8600,13 @@
               "default": "false"
             },
             {
-              "name": "resource",
-              "description": "Set loader resource name to activate table progress loader exact for that resource (deprecated).",
+              "name": "loading",
+              "description": "Set table loader state.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               },
-              "default": "\"\""
+              "default": "false"
             },
             {
               "name": "config",