design-system-next 2.7.17 → 2.7.19

package/src/components/table/use-table.ts

@@ -124,7 +124,7 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
       'spr-h-[360px]': !fullHeight.value && !slots.footer,
     });
 
-    const emptyStateClasses = classNames({
+    const emptyStateBaseClasses = classNames({
       'spr-overflow-y-hidden spr-h-[calc(90vh-150px)] md:spr-h-[calc(80vh-150px)] sm:spr-h-[calc(70vh-150px)]':
         fullHeight.value && slots.footer, // Adjust tbody height for header/footer
       'spr-overflow-y-auto spr-h-[75vh]': fullHeight.value && !slots.footer, // Adjust tbody height for header/footer
@@ -154,10 +154,12 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
       tableBackgroundClasses,
       tableBodyClasses,
       tableFooterClasses,
-      emptyStateClasses,
+      emptyStateBaseClasses,
     };
   });
 
+  const emptyStateClasses = computed(() => `${getTableClasses.value.emptyStateBaseClasses} ${props.emptyStateCustomClasses}` )
+
   //assert type TableDataProps 
   const sortedDataItem = (rowIndex: number, headerField: string) => {
     return sortedData.value[rowIndex][headerField] as TableDataProps;
@@ -186,6 +188,8 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
     } else {
       selectedData.value.push(item);
     }
+
+    emitSelectedData()
   };
 
   const handleSelectAll = () => {
@@ -194,6 +198,8 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
     } else {
       selectedData.value = [...sortedData.value];
     }
+
+    emitSelectedData()
   };
 
   const isRowSelected = (item: TableData) => {
@@ -210,9 +216,7 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
     });
   };
 
-  watch(
-    () => selectedData.value.length,
-    () => {
+  const emitSelectedData = () => {
       if (returnCompleteSelectedProperties.value) {
         emit('update:selectedData', selectedData.value);
       } else {
@@ -226,8 +230,31 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
         });
         emit('update:selectedData', mappedData);
       }
-    },
-  );
+  }
+
+  watch(sortedData, (newVal) => {
+    if(newVal && props.isMultiSelect && selectedData.value.length > 0) {
+      // Remove items from selectedData that are not in the new sortedData
+      // This is to ensure that the selectedData is always in sync with the sortedData
+
+      newVal.forEach((item) => {
+        const selectedIndex = selectedData.value.findIndex((data) => {
+          const typedSelectedData = data[selectedKeyId.value] as TableDataProps;
+          const typedSortedData = item[selectedKeyId.value] as TableDataProps;
+
+          if (isTableDataObject(typedSelectedData) && isTableDataObject(typedSortedData)) {
+            return typedSelectedData.title === typedSortedData.title;
+          } else {
+            return data[selectedKeyId.value] === item[selectedKeyId.value];
+          }
+        });
+
+        if (selectedIndex === -1) {
+          selectedData.value.splice(selectedIndex, 1);
+        }
+      })
+    }
+  });
 
   return {
     sortData,
@@ -246,6 +273,7 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
     isAllSelected,
     isRowSelected,
     isIndeterminate,
-    sortedDataItem
+    sortedDataItem,
+    emptyStateClasses
   };
 };