chore: version, cl, build

CHANGELOG.md

@@ -1,3 +1,13 @@
+## v2.6.10
+
+> `2024-09-16`
+
+### 🐞 Bug Fixes
+  - Option should display as selected even when value is an object
+
+### 🎉 Feature
+  - Optimization (🙏 @bettysteger)
+
 ## v2.6.9
 
 > `2024-07-29`

dist/multiselect.js

@@ -243,6 +243,43 @@ function arraysEqual (array1, array2) {
   })
 }
 
+/* istanbul ignore next */
+const objectsEqual = (obj1, obj2) => {
+  // If both are strictly equal, return true
+  if (obj1 === obj2) {
+    return true
+  }
+
+  // If either is not an object or is null, return false (handles primitive types and null)
+  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
+    return false
+  }
+
+  // Get the keys of both objects
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+
+  // If they have a different number of keys, they're not equal
+  if (keys1.length !== keys2.length) {
+    return false
+  }
+
+  // Compare each key-value pair recursively
+  for (let key of keys1) {
+    // Check if both objects have the same key
+    if (!keys2.includes(key)) {
+      return false
+    }
+
+    // Recursively compare the values
+    if (!objectsEqual(obj1[key], obj2[key])) {
+      return false
+    }
+  }
+
+  return true
+};
+
 function useOptions (props, context, dep)
 {
   const { 
@@ -563,7 +600,10 @@ function useOptions (props, context, dep)
 
     switch (mode.value) {
       case 'single':
-        return !isNullish(iv.value) && iv.value[valueProp.value] == option[valueProp.value]
+        return !isNullish(iv.value) && (
+          iv.value[valueProp.value] == option[valueProp.value] ||
+          (typeof iv.value[valueProp.value] === 'object' && typeof option[valueProp.value] === 'object' && objectsEqual(iv.value[valueProp.value], option[valueProp.value]))
+        )
 
       case 'tags':
       case 'multiple':

dist/multiselect.mjs

@@ -243,6 +243,43 @@ function arraysEqual (array1, array2) {
   })
 }
 
+/* istanbul ignore next */
+const objectsEqual = (obj1, obj2) => {
+  // If both are strictly equal, return true
+  if (obj1 === obj2) {
+    return true
+  }
+
+  // If either is not an object or is null, return false (handles primitive types and null)
+  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
+    return false
+  }
+
+  // Get the keys of both objects
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+
+  // If they have a different number of keys, they're not equal
+  if (keys1.length !== keys2.length) {
+    return false
+  }
+
+  // Compare each key-value pair recursively
+  for (let key of keys1) {
+    // Check if both objects have the same key
+    if (!keys2.includes(key)) {
+      return false
+    }
+
+    // Recursively compare the values
+    if (!objectsEqual(obj1[key], obj2[key])) {
+      return false
+    }
+  }
+
+  return true
+};
+
 function useOptions (props, context, dep)
 {
   const { 
@@ -563,7 +600,10 @@ function useOptions (props, context, dep)
 
     switch (mode.value) {
       case 'single':
-        return !isNullish(iv.value) && iv.value[valueProp.value] == option[valueProp.value]
+        return !isNullish(iv.value) && (
+          iv.value[valueProp.value] == option[valueProp.value] ||
+          (typeof iv.value[valueProp.value] === 'object' && typeof option[valueProp.value] === 'object' && objectsEqual(iv.value[valueProp.value], option[valueProp.value]))
+        )
 
       case 'tags':
       case 'multiple':

dist/multiselect.vue2.js

@@ -243,6 +243,43 @@ function arraysEqual (array1, array2) {
   })
 }
 
+/* istanbul ignore next */
+const objectsEqual = (obj1, obj2) => {
+  // If both are strictly equal, return true
+  if (obj1 === obj2) {
+    return true
+  }
+
+  // If either is not an object or is null, return false (handles primitive types and null)
+  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
+    return false
+  }
+
+  // Get the keys of both objects
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+
+  // If they have a different number of keys, they're not equal
+  if (keys1.length !== keys2.length) {
+    return false
+  }
+
+  // Compare each key-value pair recursively
+  for (let key of keys1) {
+    // Check if both objects have the same key
+    if (!keys2.includes(key)) {
+      return false
+    }
+
+    // Recursively compare the values
+    if (!objectsEqual(obj1[key], obj2[key])) {
+      return false
+    }
+  }
+
+  return true
+};
+
 function useOptions (props, context, dep)
 {
   const { 
@@ -563,7 +600,10 @@ function useOptions (props, context, dep)
 
     switch (mode.value) {
       case 'single':
-        return !isNullish(iv.value) && iv.value[valueProp.value] == option[valueProp.value]
+        return !isNullish(iv.value) && (
+          iv.value[valueProp.value] == option[valueProp.value] ||
+          (typeof iv.value[valueProp.value] === 'object' && typeof option[valueProp.value] === 'object' && objectsEqual(iv.value[valueProp.value], option[valueProp.value]))
+        )
 
       case 'tags':
       case 'multiple':

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueform/multiselect",
-  "version": "2.6.9",
+  "version": "2.6.10",
   "private": false,
   "description": "Vue 3 multiselect component with single select, multiselect and tagging options.",
   "license": "MIT",