sprintify-ui 0.6.75 → 0.6.76

package/package.json

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

package/src/components/BaseBelongsToFetch.vue

@@ -144,21 +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,
   ensureModelIsFilledDebounced,
-  { immediate: true },
 );
 
 watch(
   () => props.modelValue,
   ensureModelIsFilledDebounced,
-  { immediate: true },
 );
 
+ensureModelIsFilledDebounced();
+
 function onUpdate(newModel: Option | null) {
   if (!newModel) {
     model.value = null;

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',