sprintify-ui 0.0.58 → 0.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.58",
+  "version": "0.0.59",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseSelect.vue

@@ -29,7 +29,7 @@
 <script lang="ts" setup>
 import { PropType, Ref } from 'vue';
 import { get, isEqual } from 'lodash';
-import { useMounted } from '@vueuse/core';
+import { useMutationObserver } from '@vueuse/core';
 import { useField } from '@/composables/field';
 
 type Option = string | number | null;
@@ -76,6 +76,8 @@ const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
     emit: emit,
   });
 
+const options = ref([] as HTMLOptionElement[]);
+
 function isEmptyExternal(value: string | number | null | undefined) {
   if (value === undefined || value === EMPTY_VALUE_EXTERNAL) {
     return true;
@@ -101,7 +103,7 @@ const modelValueInternal = computed(() => {
     return EMPTY_VALUE_INTERNAL;
   }
 
-  if (!validModelValue()) {
+  if (!checkIfModelValueIsValid()) {
     return EMPTY_VALUE_INTERNAL;
   }
 
@@ -111,13 +113,26 @@ const modelValueInternal = computed(() => {
 /**
  * Checks if the current modelValue is valid
  */
-function validModelValue(): boolean {
+useMutationObserver(select.value, () => {
+  options.value = getOptions();
+});
+
+onMounted(() => {
+  options.value = getOptions();
+});
+
+function getOptions(): HTMLOptionElement[] {
+  return [...(select.value?.options ?? [])];
+}
+
+function checkIfModelValueIsValid(): boolean {
   if (props.modelValue === EMPTY_VALUE_EXTERNAL) {
     return true;
   }
 
-  const options = [...(select.value?.options ?? [])];
-  return options.findIndex((o) => isEqual(o.value, props.modelValue)) != -1;
+  return (
+    options.value.findIndex((o) => isEqual(o.value, props.modelValue)) != -1
+  );
 }
 
 /**