create componente VnSelectCreate

src/components/common/VnSelectCreate.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+import { useRole } from 'src/composables/useRole';
+
+const emit = defineEmits(['update:modelValue', 'update:options']);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number, Object],
+        default: null,
+    },
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    optionLabel: {
+        type: String,
+        default: '',
+    },
+    rolesAllowedToCreate: {
+        type: Array,
+        default: () => ['developer'],
+    },
+});
+
+const role = useRole();
+const popup = ref(null);
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+
+const isDeliveryAssistant = computed(() => {
+    return role.hasAny($props.rolesAllowedToCreate);
+});
+
+const openCreateForm = () => {
+    popup.value.show();
+};
+</script>
+
+<template>
+    <VnSelectFilter
+        label="Label"
+        v-model="value"
+        :options="options"
+        option-value="value"
+        option-label="label"
+        hide-selected
+    >
+        <template v-if="isDeliveryAssistant" #append>
+            <QIcon
+                @click.stop.prevent="openCreateForm()"
+                name="add"
+                size="19px"
+                class="add-icon"
+            />
+            <QDialog ref="popup" cover transition-show="scale" transition-hide="scale">
+                <slot name="form" />
+            </QDialog>
+        </template>
+    </VnSelectFilter>
+</template>
+
+<style lang="scss" scoped>
+.add-icon {
+    cursor: pointer;
+    background-color: $primary;
+    border-radius: 50px;
+}
+</style>

src/components/common/VnSelectFilter.vue

@@ -96,8 +96,8 @@ const value = computed({
                 size="18px"
             />
         </template>
-        <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
-            <slot :name="slotName" v-bind="slotData" />
+            <slot :name="slotName" v-bind="slotData" :key="slotName" />
         </template>
     </QSelect>
 </template>