From f923f668ece5c6f7e45bec819bb7fb0fe05f3795 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 12 Nov 2024 18:17:40 +0100
Subject: [PATCH] feat(vnSelect): #refs VnSelect VnSelectOption proposal

---
 src/components/common/VnSelectOption.vue      | 21 +++++++++++++++++++
 src/pages/Supplier/Card/SupplierBasicData.vue | 14 ++++++-------
 2 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 src/components/common/VnSelectOption.vue

diff --git a/src/components/common/VnSelectOption.vue b/src/components/common/VnSelectOption.vue
new file mode 100644
index 000000000..1049b391f
--- /dev/null
+++ b/src/components/common/VnSelectOption.vue
@@ -0,0 +1,21 @@
+<template>
+    <QItem v-bind="itemProps">
+        <QItemSection>
+            <QItemLabel>{{ getProperty($props.label) }}</QItemLabel>
+            <QItemLabel caption>{{ getProperty($props.caption) }}</QItemLabel>
+        </QItemSection>
+    </QItem>
+</template>
+
+<script setup>
+const $props = defineProps({
+    scope: { type: Object, default: null }, // Propiedades del item
+    label: { type: String, default: null }, // Propiedad a mostrar
+    caption: { type: [String, Function, Object], default: null }, // Propiedad a mostrar como caption,
+});
+const { itemProps, opt } = $props.scope;
+const getProperty = (key, obj = opt) => {
+    if (typeof key == 'function') return key(obj);
+    return key.split('.').reduce((o, i) => (o ? o[i] : undefined), obj);
+};
+</script>
diff --git a/src/pages/Supplier/Card/SupplierBasicData.vue b/src/pages/Supplier/Card/SupplierBasicData.vue
index ab8f9a4b1..608607e57 100644
--- a/src/pages/Supplier/Card/SupplierBasicData.vue
+++ b/src/pages/Supplier/Card/SupplierBasicData.vue
@@ -5,6 +5,7 @@ import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
+import VnSelectOption from 'src/components/common/VnSelectOption.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -45,14 +46,11 @@ const companySizes = [
                         </QIcon>
                     </template>
                     <template #option="scope">
-                        <QItem v-bind="scope.itemProps">
-                            <QItemSection>
-                                <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
-                                <QItemLabel caption>
-                                    {{ scope.opt?.nickname }}, {{ scope.opt?.id }}
-                                </QItemLabel>
-                            </QItemSection>
-                        </QItem>
+                        <VnSelectOption
+                            :scope="scope"
+                            label="name"
+                            :caption="(opt) => `${opt?.nickname}, ${opt?.id}`"
+                        ></VnSelectOption>
                     </template>
                 </VnSelect>
                 <VnSelect
-- 
2.40.1