vueless 0.0.823 → 0.0.824

package/package.json

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

package/ui.data-table/UTable.vue

@@ -418,8 +418,8 @@ function clearSelectedItems() {
   selectedRows.value = [];
 }
 
-function onToggleRowVisibility(row: FlatRow | Row) {
-  const nestedRows = flatTableRows.value.filter((flatRow) => flatRow.parentId === row.id);
+function onToggleRowVisibility(row: Row) {
+  const nestedRows = flatTableRows.value.filter((flatRow) => flatRow.parentRowId === row.id);
 
   if (row.nestedData && row.nestedData.hasOwnProperty("isShown")) {
     row.nestedData.isShown = !row.nestedData.isShown;
@@ -729,7 +729,7 @@ const {
             @dblclick="onDoubleClickRow"
             @click-cell="onClickCell"
             @toggle-expand="onToggleExpand"
-            @toggle-row-visibility="onToggleRowVisibility"
+            @toggle-row-visibility="onToggleRowVisibility(row)"
             @toggle-checkbox="onToggleRowCheckbox"
           >
             <template

package/ui.data-table/UTableRow.vue

@@ -202,8 +202,8 @@ function setElementTitle(element: HTMLElement) {
   }
 }
 
-function onClickToggleIcon(row: Row) {
-  emit("toggleRowVisibility", row);
+function onClickToggleIcon() {
+  emit("toggleRowVisibility");
 }
 
 function onClickCell(cell: unknown | string | number, row: Row, key: string | number) {
@@ -307,7 +307,7 @@ const { getDataTest } = useUI<Config>(defaultConfig);
       >
         <div
           :data-row-toggle-icon="row.id"
-          @click.stop="() => (onClickToggleIcon(row), onToggleExpand(row))"
+          @click.stop="() => (onClickToggleIcon(), onToggleExpand(row))"
         >
           <slot name="expand" :row="row" :expanded="isExpanded(row)">
             <div

package/ui.data-table/types.ts

@@ -39,7 +39,7 @@ export interface Row {
 }
 
 export interface FlatRow extends Row {
-  parentId?: RowId;
+  parentRowId?: RowId;
   nestedLeveL: number;
 }
 

package/ui.data-table/utilTable.ts

@@ -46,21 +46,23 @@ export function addRowId(row: Row) {
   return row;
 }
 
-export function toggleRowVisibility(row: Row, targetRowId: string | number) {
+export function toggleRowVisibility(row: Row, targetRowId: string | number): Row {
   if (row.id === targetRowId) {
     if (row.hasOwnProperty("isShown")) {
       row.isShown = !row.isShown;
+
+      if (!row.isShown) {
+        setNestedRowsHidden(row);
+      }
     }
 
     return row;
   }
 
-  if (row.row && !Array.isArray(row.row)) {
-    toggleRowVisibility(row.row, targetRowId);
-  }
-
   if (row.row && Array.isArray(row.row)) {
     row.row.forEach((nestedRow) => toggleRowVisibility(nestedRow, targetRowId));
+  } else if (row.row && !Array.isArray(row.row)) {
+    toggleRowVisibility(row.row, targetRowId);
   }
 
   if (row.nestedData) {
@@ -70,6 +72,24 @@ export function toggleRowVisibility(row: Row, targetRowId: string | number) {
   return row;
 }
 
+function setNestedRowsHidden(row: Row) {
+  if (row.hasOwnProperty("isShown")) {
+    row.isShown = false;
+  }
+
+  if (row.row) {
+    if (Array.isArray(row.row)) {
+      row.row.forEach(setNestedRowsHidden);
+    } else {
+      setNestedRowsHidden(row.row);
+    }
+  }
+
+  if (row.nestedData) {
+    setNestedRowsHidden(row.nestedData);
+  }
+}
+
 export function switchRowCheck(row: Row, isChecked: boolean) {
   row.isChecked = isChecked;
 
@@ -87,9 +107,9 @@ export function switchRowCheck(row: Row, isChecked: boolean) {
 export function getFlatRows(tableRows: Row[]) {
   const rows: FlatRow[] = [];
 
-  function addRow(row: Row, nestedLevel: number, parentId?: string | number) {
-    if (parentId) {
-      row.parentId = parentId;
+  function addRow(row: Row, nestedLevel: number, parentRowId?: string | number) {
+    if (parentRowId) {
+      row.parentRowId = parentRowId;
     }
 
     row.nestedLevel = nestedLevel;