sprintify-ui 0.0.58 → 0.0.60

package/package.json

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

package/src/components/BaseSelect.stories.js

@@ -33,7 +33,14 @@ const Template = (args) => ({
     // For optional, make sure the default option is selected
     // For required, try to submit, it should be prevented
     const value = ref('test');
-    return { args, value, onSubmit };
+
+    // Test if dynamically added options are available & selected
+    const showTest = ref(false);
+    setTimeout(() => {
+      showTest.value = true;
+    }, 3000);
+
+    return { args, value, showTest, onSubmit };
   },
   template: `
   <form @submit.prevent="onSubmit" class="border-none">
@@ -42,6 +49,7 @@ const Template = (args) => ({
       <option value="javascript">JavaScript</option>
       <option value="typescript">Typescript</option>
       <option value="golang">Golang</option>
+      <option v-if="showTest" value="test">Test</option>
     </BaseSelect>
     <button type="submit" class="btn btn-primary mt-5">Submit</button>
   </form>

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,30 @@ const modelValueInternal = computed(() => {
 /**
  * Checks if the current modelValue is valid
  */
-function validModelValue(): boolean {
+useMutationObserver(
+  select,
+  () => {
+    options.value = getOptions();
+  },
+  { attributes: false, childList: true }
+);
+
+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
+  );
 }
 
 /**