src/components/common/VnSelectCreate.vue

@@ -27,7 +27,7 @@ const $props = defineProps({
 });
 
 const role = useRole();
-const popup = ref(null);
+const showForm = ref(false);
 
 const value = computed({
     get() {
@@ -38,35 +38,31 @@ const value = computed({
     },
 });
 
-const isDeliveryAssistant = computed(() => {
+const isAllowedToCreate = computed(() => {
     return role.hasAny($props.rolesAllowedToCreate);
 });
 
-const openCreateForm = () => {
-    popup.value.show();
+const toggleForm = () => {
+    showForm.value = !showForm.value;
 };
 </script>
 
 <template>
-    <VnSelectFilter
-        label="Label"
-        v-model="value"
-        :options="options"
-        option-value="value"
-        option-label="label"
-        hide-selected
-    >
-        <template v-if="isDeliveryAssistant" #append>
+    <VnSelectFilter v-model="value" :options="options">
+        <template v-if="isAllowedToCreate" #append>
             <QIcon
-                @click.stop.prevent="openCreateForm()"
+                @click.stop.prevent="toggleForm()"
                 name="add"
                 size="19px"
                 class="add-icon"
             />
-            <QDialog ref="popup" cover transition-show="scale" transition-hide="scale">
-                <slot name="form" />
+            <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
+                <slot name="form" @close-form="toggleForm()" />
             </QDialog>
         </template>
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
+            <slot :name="slotName" v-bind="slotData" :key="slotName" />
+        </template>
     </VnSelectFilter>
 </template>