sprintify-ui 0.6.74 → 0.6.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.6.74",
+  "version": "0.6.76",
   "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: {
@@ -144,62 +144,21 @@ const autocompleteFetch = ref<InstanceType<
   typeof BaseAutocompleteFetch
 > | null>(null);
 
-const model = ref(props.currentModel);
+const model = ref<Option | null>(null);
+const ensureModelIsFilledDebounced = debounce(ensureModelIsFilled, 100);
 
 watch(
   () => props.currentModel,
-  (newValue, oldValue) => {
-    model.value = newValue;
-  },
-  { deep: true }
+  ensureModelIsFilledDebounced,
 );
 
 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,
 );
 
+ensureModelIsFilledDebounced();
+
 function onUpdate(newModel: Option | null) {
   if (!newModel) {
     model.value = 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(),

package/src/components/BaseHasMany.stories.js

@@ -36,12 +36,17 @@ const Template = (args) => {
         "4",
         "6",
       ]);
-      return { args, value };
+      const currentModels = ref([
+        { id: 4, name: 'Todo 4 (local)' },
+        { id: 6, name: 'Todo 6 (local)' },
+      ])
+      return { args, value, currentModels };
     },
     template: `
       <BaseHasMany
         v-model="value"
         v-bind="args"
+        :current-models="currentModels"
       ></BaseHasMany>
       <ShowValue :value="value" />
       <BaseAppNotifications />
@@ -56,8 +61,9 @@ export const Disabled = (args) => {
   return {
     components: { BaseHasMany, ShowValue },
     setup() {
+      // current model is incorrect, to test component's resilience
       const currentModel = options[1];
-      const value = ref([currentModel.value]);
+      const value = ref([7]);
       return { args, value, currentModel };
     },
     template: `<BaseHasMany
@@ -65,8 +71,6 @@ export const Disabled = (args) => {
       v-model="value"
       :current-models="[currentModel]"
       :disabled="true"
-      primaryKey="value"
-      field="label"
     ></BaseHasMany>
     <ShowValue :value="value" />`,
   };

package/src/components/BaseHasMany.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-import { debounce, isEqual } from 'lodash';
+import { debounce } from 'lodash';
 import { Option } from '@/types';
 import { config } from '@/index';
 import { PropType } from 'vue';
@@ -113,74 +113,98 @@ const tagAutocompleteFetch = ref<InstanceType<
   typeof BaseTagAutocompleteFetch
 > | null>(null);
 
-const models = ref(props.currentModels ?? []);
+const models = ref<Option[]>([]);
+const ensureModelIsFilledDebounced = debounce(() => ensureModelsAreFilled(), 100);
 
 watch(
   () => props.currentModels,
-  (newValue, oldValue) => {
-    if (isEqual(newValue, oldValue)) {
-      return;
-    }
-
-    models.value = newValue ?? [];
-  },
+  ensureModelIsFilledDebounced,
   { deep: true }
 );
 
 watch(
   () => props.modelValue,
-  debounce(() => fetchModels(), 100),
-  { immediate: true }
+  ensureModelIsFilledDebounced,
+  { deep: true }
 );
 
-function fetchModels() {
+ensureModelIsFilledDebounced();
 
-  if (props.currentModels !== undefined) {
-    return;
-  }
+function onUpdate(newModels: Option[]) {
+  models.value = newModels;
+  emit(
+    'update:modelValue',
+    newModels.map((m) => m[props.primaryKey]),
+    newModels,
+  );
+}
 
-  if (props.showRouteUrl == undefined) {
+function ensureModelsAreFilled() {
+
+  if (!Array.isArray(props.modelValue)) {
+    models.value = [];
     return;
   }
 
-  if (!props.modelValue) {
+  if (props.modelValue.length == 0) {
     models.value = [];
     return;
   }
 
-  // Do not fetch if the modelValue is the same as the local models
+  // Remove incorrect models
 
-  // Get primaryKeys as string for comparison
   const ids = props.modelValue.map((id: number | string) => id.toString());
-  const localModelIds = models.value.map((m) => '' + m[props.primaryKey]);
 
-  if (isEqual(ids, localModelIds)) {
+  models.value = models.value.filter((m) => ids.includes(m[props.primaryKey] + ''));
+
+  const localModelIds = models.value.map((m) => m[props.primaryKey] + '');
+
+  let missingIds = ids.filter((id) => !localModelIds.includes(id));
+
+
+  // Current models are fully set
+  if (missingIds.length == 0) {
+    return;
+  }
+
+  // Try with current models
+
+  if (Array.isArray(props.currentModels)) {
+    missingIds.forEach((id) => {
+      const model = props.currentModels?.find((m) => m[props.primaryKey as never] == id);
+
+      if (model) {
+        models.value.push(model);
+        missingIds = missingIds.filter((i) => i != id);
+      }
+    });
+  }
+
+  // Current models are fully set
+  if (missingIds.length == 0) {
+    return;
+  }
+
+  // Try with show route
+
+  if (props.showRouteUrl == null) {
     return;
   }
 
   http
-    .get(props.showRouteUrl(ids))
+    .get(props.showRouteUrl(missingIds))
     .then((response: AxiosResponse) => {
 
       const items = getItems(response.data);
 
       models.value = items.filter((i: Record<string, any>) => {
         // convert primary keys to string for comparison
-        return ids.includes('' + i[props.primaryKey]);
+        return ids.includes(i[props.primaryKey] + '');
       });
     })
     .catch((e: Error) => e);
 }
 
-function onUpdate(newModels: Option[]) {
-  models.value = newModels;
-  emit(
-    'update:modelValue',
-    newModels.map((m) => m[props.primaryKey]),
-    newModels,
-  );
-}
-
 defineExpose({
   focus: () => tagAutocompleteFetch.value?.focus(),
   blur: () => tagAutocompleteFetch.value?.blur(),

package/src/components/BaseTagAutocomplete.vue

@@ -12,7 +12,10 @@
           :key="selection.value ? selection.value : 'null'"
           :class="selectionClass(selection)"
         >
-          <div>
+          <div
+            :title="selection.label"
+            class="truncate"
+          >
             {{ selection.label }}
           </div>
 
@@ -459,7 +462,7 @@ const inputClasses = computed(() => {
 
 const selectionClass = (selection: NormalizedOption): string => {
 
-  const base = 'flex items-center rounded border';
+  const base = 'flex items-center rounded border overflow-hidden';
 
   const fontSize = {
     'xs': 'text-xs',