From 1106cdad2cc6bfb1dcaf7da31bd638914a9544fe Mon Sep 17 00:00:00 2001
From: rdjanuar <rdjanuar008@gmail.com>
Date: Tue, 12 Nov 2024 16:48:10 +0700
Subject: [PATCH 1/2] feat(SelectMenu/InputMenu): add handle dot notation in
 prop by & fix issue label does not show when prop multiple & valueAttribute
 used in component (SelectMenu)

---
 src/runtime/components/forms/InputMenu.vue  | 23 ++++++++++++----
 src/runtime/components/forms/SelectMenu.vue | 29 ++++++++++++++-------
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/runtime/components/forms/InputMenu.vue b/src/runtime/components/forms/InputMenu.vue
index 2264b503c9..e5fe9f27f8 100644
--- a/src/runtime/components/forms/InputMenu.vue
+++ b/src/runtime/components/forms/InputMenu.vue
@@ -293,6 +293,19 @@ export default defineComponent({
 
     const size = computed(() => sizeButtonGroup.value ?? sizeFormGroup.value)
 
+    const by = computed(() => {
+      if (!props.by) return undefined
+      const key = props.by as string
+      const hasDot = key.indexOf('.')
+      if (hasDot > 0) {
+        return (a: any, z: any) => {
+          return accessor(a, key) === accessor(z, key)
+        }
+      }
+
+      return key
+    })
+
     const internalQuery = ref('')
     const query = computed({
       get() {
@@ -305,9 +318,7 @@ export default defineComponent({
     })
 
     const label = computed(() => {
-      if (!props.modelValue) {
-        return
-      }
+      if (!props.modelValue) return null
 
       function getValue(value: any) {
         if (props.valueAttribute) {
@@ -318,7 +329,7 @@ export default defineComponent({
       }
 
       function compareValues(value1: any, value2: any) {
-        if (props.by && typeof value1 === 'object' && typeof value2 === 'object') {
+        if (by.value && typeof by.value !== 'function' && typeof value1 === 'object' && typeof value2 === 'object') {
           return isEqual(value1[props.by], value2[props.by])
         }
         return isEqual(value1, value2)
@@ -507,7 +518,9 @@ export default defineComponent({
       query,
       accessor,
       onUpdate,
-      onQueryChange
+      onQueryChange,
+      // eslint-disable-next-line vue/no-dupe-keys
+      by
     }
   }
 })
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
index eac8cbc382..a857ca3c16 100644
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -348,6 +348,19 @@ export default defineComponent({
 
     const [trigger, container] = usePopper(popper.value)
 
+    const by = computed(() => {
+      if (!props.by) return undefined
+      const key = props.by as string
+      const hasDot = key.indexOf('.')
+      if (hasDot > 0) {
+        return (a: any, z: any) => {
+          return accessor(a, key) === accessor(z, key)
+        }
+      }
+
+      return key
+    })
+
     const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
     const { emitFormBlur, emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config)
 
@@ -366,8 +379,8 @@ export default defineComponent({
 
     const selected = computed(() => {
       function compareValues(value1: any, value2: any) {
-        if (props.by && typeof value1 === 'object' && typeof value2 === 'object') {
-          return isEqual(value1[props.by], value2[props.by])
+        if (by.value && typeof by.value !== 'function' && typeof value1 === 'object' && typeof value2 === 'object') {
+          return isEqual(value1[by.value], value2[by.value])
         }
         return isEqual(value1, value2)
       }
@@ -399,16 +412,12 @@ export default defineComponent({
     })
 
     const label = computed(() => {
-      if (!selected.value) return null
-
-      if (props.valueAttribute) {
-        return accessor(selected.value as Record<string, any>, props.optionAttribute)
-      }
+      if (!props.modelValue) return null
 
       if (Array.isArray(props.modelValue) && props.modelValue.length) {
         return `${props.modelValue.length} selected`
       } else if (['string', 'number'].includes(typeof props.modelValue)) {
-        return props.modelValue
+        return props.valueAttribute ? accessor(selected.value, props.optionAttribute) : props.modelValue
       }
 
       return accessor(props.modelValue as Record<string, any>, props.optionAttribute)
@@ -612,7 +621,9 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       query,
       onUpdate,
-      onQueryChange
+      onQueryChange,
+      // eslint-disable-next-line vue/no-dupe-keys
+      by
     }
   }
 })

From d0d9e867830e668ac59b93d753b7204243c05bb8 Mon Sep 17 00:00:00 2001
From: rdjanuar <rdjanuar008@gmail.com>
Date: Tue, 12 Nov 2024 16:54:14 +0700
Subject: [PATCH 2/2] up

---
 src/runtime/components/forms/InputMenu.vue  | 7 ++++++-
 src/runtime/components/forms/SelectMenu.vue | 7 ++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/forms/InputMenu.vue b/src/runtime/components/forms/InputMenu.vue
index e5fe9f27f8..3fce532dac 100644
--- a/src/runtime/components/forms/InputMenu.vue
+++ b/src/runtime/components/forms/InputMenu.vue
@@ -295,7 +295,12 @@ export default defineComponent({
 
     const by = computed(() => {
       if (!props.by) return undefined
-      const key = props.by as string
+
+      if (typeof props.by === 'function') {
+        return props.by
+      }
+
+      const key = props.by
       const hasDot = key.indexOf('.')
       if (hasDot > 0) {
         return (a: any, z: any) => {
diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
index a857ca3c16..27ec393ea4 100644
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -350,7 +350,12 @@ export default defineComponent({
 
     const by = computed(() => {
       if (!props.by) return undefined
-      const key = props.by as string
+
+      if (typeof props.by === 'function') {
+        return props.by
+      }
+
+      const key = props.by
       const hasDot = key.indexOf('.')
       if (hasDot > 0) {
         return (a: any, z: any) => {