sprintify-ui 0.6.68 → 0.6.70

package/dist/types/src/components/BaseHasMany.vue.d.ts

@@ -42,8 +42,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
     };
     currentModels: {
-        default(): never[];
-        type: PropType<Option[]>;
+        default(): undefined;
+        type: PropType<Option[] | undefined>;
     };
     hasError: {
         default: boolean;
@@ -99,8 +99,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: StringConstructor;
     };
     currentModels: {
-        default(): never[];
-        type: PropType<Option[]>;
+        default(): undefined;
+        type: PropType<Option[] | undefined>;
     };
     hasError: {
         default: boolean;
@@ -118,7 +118,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     queryKey: string;
     primaryKey: string;
     showRouteUrl: ((ids: (string | number)[]) => string) | undefined;
-    currentModels: Option[];
+    currentModels: Option[] | undefined;
 }, {}>, {
     items?(_: {
         items: import("@/types").NormalizedOption[];

package/package.json

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

package/src/components/BaseHasMany.stories.js

@@ -19,6 +19,10 @@ export default {
     url: 'https://effettandem.com/api/content/articles',
     field: 'title',
     primaryKey: 'id',
+    showRouteUrl: (ids) => {
+      const params = QueryString.stringify({ filter: { id: ids } });
+      return `https://effettandem.com/api/content/articles?${params}`;
+    }
   },
   decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
 };
@@ -28,7 +32,8 @@ const Template = (args) => {
     components: { BaseHasMany, ShowValue, BaseAppNotifications },
     setup() {
       const value = ref([
-        "9acd34f6-ecf3-43e3-b84e-d8fcf5382bf4"
+        "9acd34f6-ecf3-43e3-b84e-d8fcf5382bf4",
+        "994ecd49-0796-402d-ab1a-63d4e5c2a68a",
       ]);
       return { args, value };
     },
@@ -48,10 +53,10 @@ Demo.args = {};
 
 export const Disabled = (args) => {
   return {
-    components: { BaseHasMany },
+    components: { BaseHasMany, ShowValue },
     setup() {
-      const value = ref([]);
-      const currentModel = options[0];
+      const currentModel = options[1];
+      const value = ref([currentModel.value]);
       return { args, value, currentModel };
     },
     template: `<BaseHasMany
@@ -61,7 +66,8 @@ export const Disabled = (args) => {
       :disabled="true"
       primaryKey="value"
       field="label"
-    ></BaseHasMany>`,
+    ></BaseHasMany>
+    <ShowValue :value="value" />`,
   };
 };
 

package/src/components/BaseHasMany.vue

@@ -94,9 +94,9 @@ const props = defineProps({
   },
   currentModels: {
     default() {
-      return [];
+      return undefined;
     },
-    type: Array as PropType<Option[]>,
+    type: Array as PropType<Option[] | undefined>,
   },
   hasError: {
     default: false,
@@ -112,7 +112,7 @@ const tagAutocompleteFetch = ref<InstanceType<
   typeof BaseTagAutocompleteFetch
 > | null>(null);
 
-const models = ref(props.currentModels);
+const models = ref(props.currentModels ?? []);
 
 watch(
   () => props.currentModels,
@@ -121,7 +121,7 @@ watch(
       return;
     }
 
-    models.value = newValue;
+    models.value = newValue ?? [];
   },
   { deep: true }
 );
@@ -129,6 +129,15 @@ watch(
 watch(
   () => props.modelValue,
   (newValue, oldValue) => {
+
+    if (props.currentModels !== undefined) {
+      return;
+    }
+
+    if (props.showRouteUrl == null) {
+      return;
+    }
+
     if (!props.modelValue) {
       models.value = [];
       return;
@@ -138,12 +147,16 @@ watch(
       return;
     }
 
-    if (props.showRouteUrl == null) {
+    // Do not fetch if the modelValue is the same as the local models
+
+    const ids = props.modelValue.map((id: number | string) => id.toString());
+
+    const localModelIds = models.value.map((m) => m[props.primaryKey]);
+
+    if (isEqual(ids, localModelIds)) {
       return;
     }
 
-    const ids = props.modelValue.map((id) => id.toString());
-
     http
       .get(props.showRouteUrl(ids))
       .then((response: AxiosResponse) => {