sprintify-ui 0.6.74 → 0.6.75

package/package.json

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

package/src/components/BaseBelongsToFetch.stories.js

@@ -17,7 +17,7 @@ export default {
   args: {
     url: 'https://faker.witify.io/api/todos',
     field: 'name',
-    primaryKey: 'uuid',
+    primaryKey: 'id',
     showRouteUrl(id) {
       return `https://faker.witify.io/api/todos/${id}`;
     },
@@ -28,7 +28,7 @@ export default {
 const Template = (args) => ({
   components: { BaseBelongsToFetch, ShowValue },
   setup() {
-    const value = ref(null);
+    const value = ref(4);
     return { args, value };
   },
   template: `
@@ -78,9 +78,6 @@ export const Sizes = (args) => ({
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  currentModel: options[0],
-  primaryKey: 'value',
-  field: 'label',
   disabled: true,
 };
 
@@ -107,7 +104,7 @@ export const SlotOption = (args) => {
             }"
           >
             <p class="text-sm font-medium">{{ option.title }}</p>
-            <p class="opacity-60 text-xs">{{ option.owner?.name }}</p>
+            <p class="opacity-60 text-xs">{{ option.description }}</p>
           </div>
         </template>
       </BaseBelongsToFetch>
@@ -169,8 +166,8 @@ export const WithSelect = (args) => {
   return {
     components: { BaseBelongsToFetch, ShowValue },
     setup() {
-      const value = ref(options[0]);
       const selected = ref(null);
+      const value = ref(5);
 
       const select = {
         options: [

package/src/components/BaseBelongsToFetch.vue

@@ -49,7 +49,7 @@ import { config } from '@/index';
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
 import { Option, SelectConfiguration } from '@/types';
 import { Size } from '@/utils/sizes';
-import { isObject } from 'lodash';
+import { debounce, isObject } from 'lodash';
 
 const props = defineProps({
   modelValue: {
@@ -145,59 +145,18 @@ const autocompleteFetch = ref<InstanceType<
 > | null>(null);
 
 const model = ref(props.currentModel);
+const ensureModelIsFilledDebounced = debounce(ensureModelIsFilled, 100);
 
 watch(
   () => props.currentModel,
-  (newValue, oldValue) => {
-    model.value = newValue;
-  },
-  { deep: true }
+  ensureModelIsFilledDebounced,
+  { immediate: true },
 );
 
 watch(
   () => props.modelValue,
-  (newValue, oldValue) => {
-
-    if (props.showRouteUrl == null) {
-      return;
-    }
-
-    if (props.currentModel !== undefined) {
-      return;
-    }
-
-    if (!props.modelValue) {
-      model.value = null;
-      return;
-    }
-
-    if (newValue == oldValue) {
-      return;
-    }
-
-    http
-      .get(props.showRouteUrl(props.modelValue))
-      .then((response: AxiosResponse) => {
-
-        const data = response.data as Record<string, unknown>;
-
-        if (!isObject(data)) {
-          return;
-        }
-
-        if (data[props.primaryKey as never] == props.modelValue) {
-          model.value = data;
-          return;
-        }
-
-        if (isObject(data.data) && data.data[props.primaryKey as never] == props.modelValue) {
-          model.value = data.data;
-          return;
-        }
-      })
-      .catch((e: Error) => e);
-  },
-  { immediate: true }
+  ensureModelIsFilledDebounced,
+  { immediate: true },
 );
 
 function onUpdate(newModel: Option | null) {
@@ -210,6 +169,54 @@ function onUpdate(newModel: Option | null) {
   }
 }
 
+function ensureModelIsFilled() {
+
+  if (props.modelValue == null) {
+    model.value = null;
+    return;
+  }
+
+  const modelId = model.value ? model.value[props.primaryKey as never] : null;
+
+  // Current value is already set
+  if (props.modelValue == modelId) {
+    return;
+  }
+
+  // Try with current model
+  if (props.currentModel && props.currentModel[props.primaryKey as never] == props.modelValue) {
+    model.value = props.currentModel;
+    return;
+  }
+
+  // Try with show route
+
+  if (props.showRouteUrl == null) {
+    return;
+  }
+
+  http
+    .get(props.showRouteUrl(props.modelValue))
+    .then((response: AxiosResponse) => {
+
+      const data = response.data as Record<string, unknown>;
+
+      if (!isObject(data)) {
+        return;
+      }
+
+      if (data[props.primaryKey as never] == props.modelValue) {
+        model.value = data;
+        return;
+      }
+
+      if (isObject(data.data) && data.data[props.primaryKey as never] == props.modelValue) {
+        model.value = data.data;
+        return;
+      }
+    });
+}
+
 defineExpose({
   focus: () => autocompleteFetch.value?.focus(),
   blur: () => autocompleteFetch.value?.blur(),