@monoui/vuejs 1.1.69 → 1.1.70

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@monoui/vuejs",
-	"version": "1.1.69",
+	"version": "1.1.70",
 	"description": "This project will contain MonoFor UI Framework",
 	"main": "./dist/main.js",
 	"repository": "git@gitlab.com:monoui/vuejs.git",

package/src/components/Table/Table.vue

@@ -126,7 +126,14 @@
 							v-bind="{ row: row, index: rowIndex }"
 							v-for="(row, rowIndex) in tableData"
 						>
-							<tr :key="rowIndex">
+							<tr
+								@mouseenter="mouseEnter(row)"
+								@mouseleave="mouseLeave"
+								:class="
+									`${getCorrelationClass(row, tableData)}`
+								"
+								:key="rowIndex"
+							>
 								<slot
 									name="row"
 									v-bind="{ row: row, index: rowIndex }"
@@ -409,6 +416,16 @@ export default {
 			required: false,
 			default: ""
 		},
+		correlationClass: {
+			type: String,
+			required: false,
+			default: "correlation-highlight"
+		},
+		correlationPropertyName: {
+			type: String,
+			required: false,
+			default: "correlationId"
+		},
 		tableStyle: {
 			type: String,
 			required: false,
@@ -534,7 +551,8 @@ export default {
 			limit: 250,
 			searchDebounceTimeout: null,
 			comingFromPopState: false,
-			skipWatch: false
+			skipWatch: false,
+			selectedCorrelationId: null
 		};
 	},
 	computed: {
@@ -571,6 +589,38 @@ export default {
 		}
 	},
 	methods: {
+		getCorrelationClass(row, tableData) {
+			var correlationCount = 0;
+			tableData.forEach(element => {
+				if (
+					element[this.correlationPropertyName] ===
+					row[this.correlationPropertyName]
+				) {
+					correlationCount++;
+				}
+			});
+
+			if (
+				correlationCount > 1 &&
+				row &&
+				row[this.correlationPropertyName] &&
+				row[this.correlationPropertyName] === this.selectedCorrelationId
+			) {
+				return this.correlationClass;
+			}
+
+			return "";
+		},
+
+		mouseEnter(row) {
+			if (row && row[this.correlationPropertyName])
+				this.selectedCorrelationId = row[this.correlationPropertyName];
+		},
+
+		mouseLeave() {
+			this.selectedCorrelationId = null;
+		},
+
 		addPopStateListener() {
 			if (this.history)
 				window.addEventListener("popstate", this.popStateEvent);
@@ -1199,4 +1249,8 @@ export default {
 .has-sorted-td {
 	background-color: #f9fafb;
 }
+
+.correlation-highlight {
+	box-shadow: #1e3a8a 19px 0px 14px -15px inset;
+}
 </style>