61 lines
1.2 KiB
Vue
Executable File
61 lines
1.2 KiB
Vue
Executable File
<script setup lang="ts">
|
|
interface DataItem {
|
|
id: any
|
|
name: any
|
|
}
|
|
|
|
import { ref, computed, watch } from 'vue'
|
|
import { RichSelect } from '@flavorly/vanilla-components'
|
|
|
|
const props = defineProps({
|
|
placeholder: {
|
|
type: String,
|
|
default: '0'
|
|
},
|
|
data: {
|
|
type: Array as () => DataItem[],
|
|
default: []
|
|
},
|
|
selected: {
|
|
type: Object as () => DataItem,
|
|
default: () => ({ id: 0, name: '' })
|
|
},
|
|
indexSelected: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:selected'])
|
|
const data = computed(() =>
|
|
props.placeholder == '0' ? props.data : [{ id: 0, name: props.placeholder }, ...props.data]
|
|
)
|
|
const selected = ref(data.value[props.indexSelected].id)
|
|
|
|
// watch(
|
|
// () => props.selected,
|
|
// (value: any) => {
|
|
// selected.value = value.id
|
|
// }
|
|
// )
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full">
|
|
<RichSelect
|
|
v-model="selected"
|
|
:options="data"
|
|
:clearable="false"
|
|
valueAttribute="id"
|
|
textAttribute="name"
|
|
@update:modelValue="
|
|
(value: any) =>
|
|
emit(
|
|
'update:selected',
|
|
data.find((item) => item.id === value)
|
|
)
|
|
"
|
|
/>
|
|
</div>
|
|
</template>
|