@data-fair/lib-vue 1.25.2 → 1.25.4

package/deep-diff.d.ts

@@ -1,3 +1,11 @@
 import { type ComputedGetter, type ComputedOptions, type WatchSource, type WatchCallback, type WatchOptions } from 'vue';
+/**
+ * a computed replacement that returns the old value if the new value only has a superficial "reference" change but is actually identitical
+ * prevents unnecessary triggers or reactivity
+ */
 export declare const computedDeepDiff: <Type>(getter: ComputedGetter<Type>, options?: ComputedOptions) => import("vue").ComputedRef<Type>;
+/**
+ * a watch replacement the triggers the callback only if the new value is actually different from the old value
+ * not just for superficial "reference" changes
+ */
 export declare const watchDeepDiff: (source: WatchSource, callback: WatchCallback, options?: WatchOptions) => import("vue").WatchHandle;

package/deep-diff.js

@@ -1,11 +1,19 @@
 import { computed, watch } from 'vue';
 import equal from 'fast-deep-equal';
+/**
+ * a computed replacement that returns the old value if the new value only has a superficial "reference" change but is actually identitical
+ * prevents unnecessary triggers or reactivity
+ */
 export const computedDeepDiff = (getter, options) => {
     return computed((oldValue) => {
         const newValue = getter();
         return (oldValue !== undefined && equal(newValue, oldValue)) ? oldValue : newValue;
     }, options);
 };
+/**
+ * a watch replacement the triggers the callback only if the new value is actually different from the old value
+ * not just for superficial "reference" changes
+ */
 export const watchDeepDiff = (source, callback, options) => {
     return watch(source, (newValue, oldValue, onCleanup) => {
         if (!equal(newValue, oldValue))

package/edit-fetch.d.ts

@@ -17,6 +17,7 @@ export declare function useEditFetch<T extends Record<string, any>>(url: Optiona
     };
     data: [T | null] extends [Ref<any, any>] ? import("@vue/shared").IfAny<Ref<any, any> & T, Ref<Ref<any, any> & T, Ref<any, any> & T>, Ref<any, any> & T> : Ref<import("vue").UnwrapRef<T> | null, T | import("vue").UnwrapRef<T> | null>;
     serverData: [T | null] extends [Ref<any, any>] ? import("@vue/shared").IfAny<Ref<any, any> & T, Ref<Ref<any, any> & T, Ref<any, any> & T>, Ref<any, any> & T> : Ref<import("vue").UnwrapRef<T> | null, T | import("vue").UnwrapRef<T> | null>;
+    hasDiff: import("vue").ComputedRef<boolean>;
     save: {
         execute: () => Promise<void>;
         notif: Ref<import("./ui-notif.js").UiNotif | undefined>;

package/edit-fetch.js

@@ -1,26 +1,38 @@
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 import { ofetch } from 'ofetch';
 import { useFetch } from './fetch.js';
 import useAsyncAction from './async-action.js';
 import equal from 'fast-deep-equal';
+import clone from '@data-fair/lib-utils/clone.js';
 export function useEditFetch(url, options = {}) {
     const fetch = useFetch(url, options);
     const serverData = ref(null);
     const data = ref(null);
     watch(fetch.data, () => {
         // TODO: check for local changes before overwriting ?
-        serverData.value = fetch.data.value;
-        data.value = fetch.data.value;
+        serverData.value = clone(fetch.data.value);
+        data.value = clone(fetch.data.value);
     });
+    const hasDiff = computed(() => !equal(data.value, serverData.value));
+    const getPatch = () => {
+        if (!data.value || !serverData.value)
+            return null;
+        const patch = {};
+        for (const key of Object.keys(data.value)) {
+            if (!equal(data.value[key], serverData.value[key]))
+                patch[key] = data.value[key];
+        }
+        for (const key of Object.keys(serverData.value)) {
+            if (!(key in data.value))
+                patch[key] = null;
+        }
+        return patch;
+    };
     const save = useAsyncAction(async () => {
         if (!data.value || !serverData.value || !fetch.data.value)
             throw new Error('cannot save data that has not been fetched yet');
         if (options.patch) {
-            const patch = {};
-            for (const key of Object.keys(data.value)) {
-                if (!equal(data.value[key], serverData.value[key]))
-                    patch[key] = data.value[key];
-            }
+            const patch = getPatch();
             if (!Object.keys(patch).length)
                 return;
             serverData.value = await ofetch(fetch.fullUrl.value, { method: 'PATCH', body: patch });
@@ -29,12 +41,13 @@ export function useEditFetch(url, options = {}) {
             // TODO: add if-unmodified-since header ?
             serverData.value = await ofetch(fetch.fullUrl.value, { method: 'PUT', body: data.value });
         }
-        serverData.value = data.value;
+        serverData.value = clone(data.value);
     }, options.saveOptions);
     return {
         fetch,
         data,
         serverData,
+        hasDiff,
         save
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-fair/lib-vue",
-  "version": "1.25.2",
+  "version": "1.25.4",
   "description": "Composables and other utilities for Vue applications in the data-fair stack.",
   "main": "index.js",
   "files": [

package/vite.d.ts

@@ -5,6 +5,7 @@ export declare const autoImports: (string | {
     '@data-fair/lib-vue/concept-filters.js': string[];
     '@data-fair/lib-vue/ui-notif.js': string[];
     '@data-fair/lib-vue/fetch.js': string[];
+    '@data-fair/lib-vue/edit-fetch.js': string[];
     '@data-fair/lib-vue/ws.js': string[];
     '@data-fair/lib-vue/async-action.js': string[];
     '@data-fair/lib-vue/deep-diff.js': string[];

package/vite.js

@@ -10,6 +10,7 @@ export const autoImports = [
         '@data-fair/lib-vue/concept-filters.js': ['useConceptFilters'],
         '@data-fair/lib-vue/ui-notif.js': ['useUiNotif', 'withUiNotif'],
         '@data-fair/lib-vue/fetch.js': ['useFetch'],
+        '@data-fair/lib-vue/edit-fetch.js': ['useEditFetch'],
         '@data-fair/lib-vue/ws.js': ['useWS'],
         '@data-fair/lib-vue/async-action.js': ['useAsyncAction'],
         '@data-fair/lib-vue/deep-diff.js': ['computedDeepDiff', 'watchDeepDiff'],