From a33cec4a34091ddc32dcac132104e7dc3b2f63e3 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 17 Dec 2024 11:12:21 +0100
Subject: [PATCH] feat: refs #7936 add optionCaption

---
 src/components/common/VnSelect.vue | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index dc8fd582ed..ed21b089b9 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useRequired } from 'src/composables/useRequired';
 import dataByOrder from 'src/utils/dataByOrder';
+import { QItemLabel } from 'quasar';
 
 const emit = defineEmits(['update:modelValue', 'update:options', 'remove']);
 const $attrs = useAttrs();
@@ -33,6 +34,10 @@ const $props = defineProps({
         type: String,
         default: 'id',
     },
+    optionCaption: {
+        type: String,
+        default: null,
+    },
     optionFilter: {
         type: String,
         default: null,
@@ -373,13 +378,16 @@ function handleKeyDown(event) {
         </template>
         <template #option="{ opt, itemProps }">
             <QItem v-bind="itemProps">
-                <QItemSection>
-                    <QItemLabel v-if="opt[optionValue] == opt[optionLabel]">{{
-                        opt[optionLabel]
-                    }}</QItemLabel>
-                    <QItemLabel v-else>{{
-                        `#${opt[optionValue]} - ${opt[optionLabel]}`
-                    }}</QItemLabel>
+                <QItemSection v-if="opt[optionValue] == opt[optionLabel]">
+                    <QItemLabel>{{ opt[optionLabel] }}</QItemLabel>
+                </QItemSection>
+                <QItemSection v-else>
+                    <QItemLabel>
+                        {{ opt[optionLabel] }}
+                    </QItemLabel>
+                    <QItemLabel caption v-if="optionCaption !== false">
+                        {{ `#${opt[optionCaption] || opt[optionValue]}` }}
+                    </QItemLabel>
                 </QItemSection>
             </QItem>
         </template>