verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 61 Releases Wiki Activity

WIP: feat(vnSelect): #refs VnSelect VnSelectOption proposal #920

Draft
jsegarra wants to merge 1 commits from improve_vnSelectOption into dev
pull from: improve_vnSelectOption
merge into: verdnatura:dev
Conversation 0 Commits 1 Files Changed 2 +27 -8
2 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f923f668ec - Show all commits

21
src/components/common/VnSelectOption.vue Normal file
View File

@ -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>

14
src/pages/Supplier/Card/SupplierBasicData.vue
View File

@ -5,6 +5,7 @@ import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue'; import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue'; import VnSelect from 'src/components/common/VnSelect.vue';
import VnSelectOption from 'src/components/common/VnSelectOption.vue';
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
@ -45,14 +46,11 @@ const companySizes = [
</QIcon> </QIcon>
</template> </template>
<template #option="scope"> <template #option="scope">
<QItem v-bind="scope.itemProps"> <VnSelectOption
<QItemSection> :scope="scope"
<QItemLabel>{{ scope.opt?.name }}</QItemLabel> label="name"
<QItemLabel caption> :caption="(opt) => `${opt?.nickname}, ${opt?.id}`"
{{ scope.opt?.nickname }}, {{ scope.opt?.id }} ></VnSelectOption>
</QItemLabel>
</QItemSection>
</QItem>
</template> </template>
</VnSelect> </VnSelect>
<VnSelect <VnSelect