at-mintel/packages/directus-extension-toolkit/src/MintelSelect.vue

<template>
	<div class="mintel-select">
		<v-select
			:model-value="modelValue"
			:items="items"
			:placeholder="placeholder"
			:searchable="searchable"
			:show-deselect="showDeselect"
			@update:model-value="$emit('update:modelValue', $event)"
		/>
		<v-button v-if="allowAdd" secondary rounded icon x-small class="add-button" @click="$emit('add')">
			<v-icon name="add" />
		</v-button>
	</div>
</template>

<script setup lang="ts">
const props = defineProps({
	modelValue: {
		type: [String, Number],
		default: null
	},
	items: {
		type: Array as () => Array<{ text: string; value: string | number }>,
		required: true
	},
	placeholder: {
		type: String,
		default: 'Auswählen...'
	},
	searchable: {
		type: Boolean,
		default: true
	},
	showDeselect: {
		type: Boolean,
		default: true
	},
	allowAdd: {
		type: Boolean,
		default: false
	}
});

defineEmits(['update:modelValue', 'add']);
</script>

<style scoped>
.mintel-select {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mintel-select :deep(.v-select) {
	flex: 1;
}

.add-button {
	flex-shrink: 0;
}
</style>