Merge pull request 'create component VnSelectCreate' (#28) from feature/ms-69-VnSelectCreate into dev

Reviewed-on: hyervoni/salix-front-mindshore#28

src/components/common/VnSelectCreate.vue

@@ -0,0 +1,75 @@
+<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 showForm = ref(false);
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+
+const isAllowedToCreate = computed(() => {
+    return role.hasAny($props.rolesAllowedToCreate);
+});
+
+const toggleForm = () => {
+    showForm.value = !showForm.value;
+};
+</script>
+
+<template>
+    <VnSelectFilter v-model="value" :options="options">
+        <template v-if="isAllowedToCreate" #append>
+            <QIcon
+                @click.stop.prevent="toggleForm()"
+                name="add"
+                size="19px"
+                class="add-icon"
+            />
+            <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>
+
+<style lang="scss" scoped>
+.add-icon {
+    cursor: pointer;
+    background-color: $primary;
+    border-radius: 50px;
+}
+</style>

src/components/common/VnSelectFilter.vue

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