modificaciones necesarias para aplicar a VnSelectCreate

src/components/FormModel.vue

@@ -57,7 +57,7 @@ const $props = defineProps({
     },
 });
 
-const emit = defineEmits(['onFetch']);
+const emit = defineEmits(['onFetch', 'onDataSaved']);
 
 defineExpose({
     save,
@@ -114,7 +114,7 @@ async function fetch() {
 }
 
 async function save() {
-    if (!hasChanges.value) {
+    if ($props.observeFormChanges && !hasChanges.value) {
         notify('globals.noChanges', 'negative');
         return;
     }
@@ -127,6 +127,7 @@ async function save() {
         } else {
             await axios.patch($props.urlUpdate || $props.url, formData.value);
         }
+        emit('onDataSaved', formData.value);
     } catch (err) {
         notify('errors.create', 'negative');
     }

src/components/common/VnSelectCreate.vue

@@ -16,10 +16,6 @@ const $props = defineProps({
         type: Array,
         default: () => [],
     },
-    optionLabel: {
-        type: String,
-        default: '',
-    },
     rolesAllowedToCreate: {
         type: Array,
         default: () => ['developer'],
@@ -48,7 +44,7 @@ const toggleForm = () => {
 </script>
 
 <template>
-    <VnSelectFilter v-model="value" :options="options">
+    <VnSelectFilter v-model="value" :options="options" v-bind="$attrs">
         <template v-if="isAllowedToCreate" #append>
             <QIcon
                 @click.stop.prevent="toggleForm()"
@@ -57,7 +53,7 @@ const toggleForm = () => {
                 class="add-icon"
             />
             <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
-                <slot name="form" @close-form="toggleForm()" />
+                <slot name="form" />
             </QDialog>
         </template>
         <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">

src/components/common/VnSelectFilter.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, toRefs, watch, computed } from 'vue';
+import { ref, toRefs, computed } from 'vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
 
 const $props = defineProps({
@@ -24,16 +24,11 @@ const $props = defineProps({
         default: true,
     },
 });
-const { optionLabel, options } = toRefs($props);
-const myOptions = ref([]);
-const myOptionsOriginal = ref([]);
-const vnSelectRef = ref(null);
 
-function setOptions(data) {
-    myOptions.value = JSON.parse(JSON.stringify(data));
-    myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
-}
-setOptions(options.value);
+const { optionLabel } = toRefs($props);
+const myOptions = ref([]);
+const myOptionsOriginal = computed(() => $props.options);
+const vnSelectRef = ref(null);
 
 const filter = (val, options) => {
     const search = val.toString().toLowerCase();
@@ -69,10 +64,6 @@ const filterHandler = (val, update) => {
     );
 };
 
-watch(options, (newValue) => {
-    setOptions(newValue);
-});
-
 const value = computed({
     get() {
         return $props.modelValue;