@hybridly/vue 0.7.3 → 0.7.4

package/dist/index.cjs

@@ -182,7 +182,11 @@ const state = {
   },
   setContext(context) {
     utils.debug.adapter("vue:state:context", "Storing context:", context);
-    state.context.value = vue.unref(context);
+    if (vue.unref(context) === state.context.value) {
+      vue.triggerRef(state.context);
+    } else {
+      state.context.value = vue.unref(context);
+    }
   },
   setViewKey(key) {
     utils.debug.adapter("vue:state:key", "Storing view key:", key);
@@ -366,7 +370,6 @@ function setupDevtools(app) {
         });
         if (event === "after") {
           setTimeout(() => {
-            vue.triggerRef(state.context);
             api.notifyComponentUpdate();
           }, 100);
         }
@@ -691,24 +694,27 @@ function toReactive(objectRef) {
 }
 
 function useProperties() {
-  return vue.readonly(toReactive(vue.computed(() => state.context.value?.view.properties)));
+  return vue.readonly(toReactive(vue.computed(() => state.properties.value)));
 }
 function useProperty(path) {
-  return vue.computed(() => dotDiver.getByPath(state.context.value?.view.properties, path));
+  return vue.computed(() => dotDiver.getByPath(state.properties.value, path));
 }
 function setProperty(path, value) {
-  if (!state.context.value?.view.properties) {
+  if (!state.properties.value) {
     return;
   }
-  dotDiver.setByPath(state.context.value.view.properties, path, vue.toValue(value));
+  dotDiver.setByPath(state.properties.value, path, vue.toValue(value));
+  if (state.context.value?.view.properties) {
+    dotDiver.setByPath(state.context.value.view.properties, path, vue.toValue(value));
+  }
 }
 
 function safeClone(obj) {
   return utils.clone(vue.toRaw(obj));
 }
 function useForm(options) {
-  const shouldRemember = !!options?.key;
-  const historyKey = options?.key ?? "form:default";
+  const shouldRemember = !!options.key;
+  const historyKey = options.key ?? "form:default";
   const historyData = shouldRemember ? core.router.history.get(historyKey) : void 0;
   const timeoutIds = {
     recentlyFailed: void 0,
@@ -730,7 +736,21 @@ function useForm(options) {
       Reflect.set(initial, key, safeClone(value));
     });
   }
-  function reset(...keys) {
+  function resetSubmissionState() {
+    successful.value = false;
+    failed.value = false;
+    recentlyFailed.value = false;
+    recentlySuccessful.value = false;
+    clearTimeout(timeoutIds.recentlySuccessful);
+    clearTimeout(timeoutIds.recentlyFailed);
+    progress.value = void 0;
+  }
+  function reset() {
+    resetSubmissionState();
+    clearErrors();
+    resetFields();
+  }
+  function resetFields(...keys) {
     if (keys.length === 0) {
       keys = Object.keys(fields);
     }
@@ -747,24 +767,21 @@ function useForm(options) {
     });
   }
   function submit(optionsOverrides) {
-    const url = typeof options.url === "function" ? options.url() : options.url;
-    const data = typeof options.transform === "function" ? options.transform?.(fields) : fields;
-    const preserveState = optionsOverrides?.preserveState ?? options.preserveState;
-    const hooks = { ...options?.hooks, ...optionsOverrides?.hooks };
+    const { fields: _f, key: _k, ...optionsWithoutFields } = options;
+    const optionsWithOverrides = optionsOverrides ? utils.merge(optionsWithoutFields, optionsOverrides, { mergePlainObjects: true }) : optionsWithoutFields;
+    const url = typeof optionsWithOverrides.url === "function" ? optionsWithOverrides.url() : optionsWithOverrides.url;
+    const data = typeof optionsWithOverrides.transform === "function" ? optionsWithOverrides.transform(fields) : fields;
+    const preserveState = optionsWithOverrides.preserveState ?? optionsWithOverrides.method !== "GET";
+    const hooks = optionsWithOverrides.hooks ?? {};
     return core.router.navigate({
-      ...options,
+      ...optionsWithOverrides,
       url: url ?? state.context.value?.url,
-      method: options.method ?? "POST",
-      ...optionsOverrides,
+      method: optionsWithOverrides.method ?? "POST",
       data: safeClone(data),
-      preserveState: preserveState === void 0 && options.method !== "GET" ? true : preserveState,
+      preserveState,
       hooks: {
         before: (navigation, context) => {
-          failed.value = false;
-          successful.value = false;
-          recentlySuccessful.value = false;
-          clearTimeout(timeoutIds.recentlySuccessful);
-          clearTimeout(timeoutIds.recentlyFailed);
+          resetSubmissionState();
           return hooks.before?.(navigation, context);
         },
         start: (context) => {
@@ -779,20 +796,20 @@ function useForm(options) {
           setErrors(incoming);
           failed.value = true;
           recentlyFailed.value = true;
-          timeoutIds.recentlyFailed = setTimeout(() => recentlyFailed.value = false, options?.timeout ?? 5e3);
+          timeoutIds.recentlyFailed = setTimeout(() => recentlyFailed.value = false, optionsWithOverrides.timeout ?? 5e3);
           return hooks.error?.(incoming, context);
         },
         success: (payload, context) => {
           clearErrors();
-          if (options?.updateInitials) {
+          if (optionsWithOverrides.updateInitials) {
             setInitial(fields);
           }
-          if (options?.reset !== false) {
-            reset();
+          if (optionsWithOverrides.reset !== false) {
+            resetFields();
           }
           successful.value = true;
           recentlySuccessful.value = true;
-          timeoutIds.recentlySuccessful = setTimeout(() => recentlySuccessful.value = false, options?.timeout ?? 5e3);
+          timeoutIds.recentlySuccessful = setTimeout(() => recentlySuccessful.value = false, optionsWithOverrides.timeout ?? 5e3);
           return hooks.success?.(payload, context);
         },
         after: (context) => {
@@ -839,7 +856,9 @@ function useForm(options) {
     }
   }, { deep: true, immediate: true });
   return vue.reactive({
+    resetFields,
     reset,
+    resetSubmissionState,
     clear,
     fields,
     abort,

package/dist/index.d.cts

@@ -243,7 +243,9 @@ interface FormOptions<T extends SearchableObject> extends Omit<HybridRequestOpti
     transform?: (fields: T) => any;
 }
 declare function useForm<T extends SearchableObject, P extends Path<T> & string = Path<T> & string>(options: FormOptions<T>): {
-    reset: (...keys: P[]) => void;
+    resetFields: (...keys: P[]) => void;
+    reset: () => void;
+    resetSubmissionState: () => void;
     clear: (...keys: P[]) => void;
     fields: vue.UnwrapRef<T>;
     abort: () => void;
@@ -252,8 +254,8 @@ declare function useForm<T extends SearchableObject, P extends Path<T> & string
     clearError: (key: P) => void;
     setInitial: (newInitial: Partial<T>) => void;
     hasDirty: (...keys: P[]) => boolean;
-    submitWith: (optionsOverrides?: Omit<HybridRequestOptions, 'data'>) => Promise<_hybridly_core.NavigationResponse>;
-    submitWithOptions: (optionsOverrides?: Omit<HybridRequestOptions, 'data'>) => Promise<_hybridly_core.NavigationResponse>;
+    submitWith: (optionsOverrides?: Omit<FormOptions<T>, 'fields' | 'key'>) => Promise<_hybridly_core.NavigationResponse>;
+    submitWithOptions: (optionsOverrides?: Omit<FormOptions<T>, 'fields' | 'key'>) => Promise<_hybridly_core.NavigationResponse>;
     submit: () => Promise<_hybridly_core.NavigationResponse>;
     hasErrors: boolean;
     initial: vue.UnwrapRef<DeepReadonly<T>>;

package/dist/index.d.mts

@@ -243,7 +243,9 @@ interface FormOptions<T extends SearchableObject> extends Omit<HybridRequestOpti
     transform?: (fields: T) => any;
 }
 declare function useForm<T extends SearchableObject, P extends Path<T> & string = Path<T> & string>(options: FormOptions<T>): {
-    reset: (...keys: P[]) => void;
+    resetFields: (...keys: P[]) => void;
+    reset: () => void;
+    resetSubmissionState: () => void;
     clear: (...keys: P[]) => void;
     fields: vue.UnwrapRef<T>;
     abort: () => void;
@@ -252,8 +254,8 @@ declare function useForm<T extends SearchableObject, P extends Path<T> & string
     clearError: (key: P) => void;
     setInitial: (newInitial: Partial<T>) => void;
     hasDirty: (...keys: P[]) => boolean;
-    submitWith: (optionsOverrides?: Omit<HybridRequestOptions, 'data'>) => Promise<_hybridly_core.NavigationResponse>;
-    submitWithOptions: (optionsOverrides?: Omit<HybridRequestOptions, 'data'>) => Promise<_hybridly_core.NavigationResponse>;
+    submitWith: (optionsOverrides?: Omit<FormOptions<T>, 'fields' | 'key'>) => Promise<_hybridly_core.NavigationResponse>;
+    submitWithOptions: (optionsOverrides?: Omit<FormOptions<T>, 'fields' | 'key'>) => Promise<_hybridly_core.NavigationResponse>;
     submit: () => Promise<_hybridly_core.NavigationResponse>;
     hasErrors: boolean;
     initial: vue.UnwrapRef<DeepReadonly<T>>;

package/dist/index.d.ts

@@ -243,7 +243,9 @@ interface FormOptions<T extends SearchableObject> extends Omit<HybridRequestOpti
     transform?: (fields: T) => any;
 }
 declare function useForm<T extends SearchableObject, P extends Path<T> & string = Path<T> & string>(options: FormOptions<T>): {
-    reset: (...keys: P[]) => void;
+    resetFields: (...keys: P[]) => void;
+    reset: () => void;
+    resetSubmissionState: () => void;
     clear: (...keys: P[]) => void;
     fields: vue.UnwrapRef<T>;
     abort: () => void;
@@ -252,8 +254,8 @@ declare function useForm<T extends SearchableObject, P extends Path<T> & string
     clearError: (key: P) => void;
     setInitial: (newInitial: Partial<T>) => void;
     hasDirty: (...keys: P[]) => boolean;
-    submitWith: (optionsOverrides?: Omit<HybridRequestOptions, 'data'>) => Promise<_hybridly_core.NavigationResponse>;
-    submitWithOptions: (optionsOverrides?: Omit<HybridRequestOptions, 'data'>) => Promise<_hybridly_core.NavigationResponse>;
+    submitWith: (optionsOverrides?: Omit<FormOptions<T>, 'fields' | 'key'>) => Promise<_hybridly_core.NavigationResponse>;
+    submitWithOptions: (optionsOverrides?: Omit<FormOptions<T>, 'fields' | 'key'>) => Promise<_hybridly_core.NavigationResponse>;
     submit: () => Promise<_hybridly_core.NavigationResponse>;
     hasErrors: boolean;
     initial: vue.UnwrapRef<DeepReadonly<T>>;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { shallowRef, ref, unref, defineComponent, toRaw, h, nextTick, triggerRef, createApp, isRef, reactive, readonly, computed, toValue, watch, getCurrentInstance, onUnmounted } from 'vue';
+import { shallowRef, ref, unref, triggerRef, defineComponent, toRaw, h, nextTick, createApp, isRef, reactive, readonly, computed, toValue, watch, getCurrentInstance, onUnmounted } from 'vue';
 import { definePlugin, registerHook as registerHook$1, createRouter, makeUrl, router, route } from '@hybridly/core';
 export { can, route, router } from '@hybridly/core';
 import { debug, random, showViewComponentErrorModal, merge, clone, unsetPropertyAtPath, setValueAtPath } from '@hybridly/utils';
@@ -175,7 +175,11 @@ const state = {
   },
   setContext(context) {
     debug.adapter("vue:state:context", "Storing context:", context);
-    state.context.value = unref(context);
+    if (unref(context) === state.context.value) {
+      triggerRef(state.context);
+    } else {
+      state.context.value = unref(context);
+    }
   },
   setViewKey(key) {
     debug.adapter("vue:state:key", "Storing view key:", key);
@@ -359,7 +363,6 @@ function setupDevtools(app) {
         });
         if (event === "after") {
           setTimeout(() => {
-            triggerRef(state.context);
             api.notifyComponentUpdate();
           }, 100);
         }
@@ -684,24 +687,27 @@ function toReactive(objectRef) {
 }
 
 function useProperties() {
-  return readonly(toReactive(computed(() => state.context.value?.view.properties)));
+  return readonly(toReactive(computed(() => state.properties.value)));
 }
 function useProperty(path) {
-  return computed(() => getByPath(state.context.value?.view.properties, path));
+  return computed(() => getByPath(state.properties.value, path));
 }
 function setProperty(path, value) {
-  if (!state.context.value?.view.properties) {
+  if (!state.properties.value) {
     return;
   }
-  setByPath(state.context.value.view.properties, path, toValue(value));
+  setByPath(state.properties.value, path, toValue(value));
+  if (state.context.value?.view.properties) {
+    setByPath(state.context.value.view.properties, path, toValue(value));
+  }
 }
 
 function safeClone(obj) {
   return clone(toRaw(obj));
 }
 function useForm(options) {
-  const shouldRemember = !!options?.key;
-  const historyKey = options?.key ?? "form:default";
+  const shouldRemember = !!options.key;
+  const historyKey = options.key ?? "form:default";
   const historyData = shouldRemember ? router.history.get(historyKey) : void 0;
   const timeoutIds = {
     recentlyFailed: void 0,
@@ -723,7 +729,21 @@ function useForm(options) {
       Reflect.set(initial, key, safeClone(value));
     });
   }
-  function reset(...keys) {
+  function resetSubmissionState() {
+    successful.value = false;
+    failed.value = false;
+    recentlyFailed.value = false;
+    recentlySuccessful.value = false;
+    clearTimeout(timeoutIds.recentlySuccessful);
+    clearTimeout(timeoutIds.recentlyFailed);
+    progress.value = void 0;
+  }
+  function reset() {
+    resetSubmissionState();
+    clearErrors();
+    resetFields();
+  }
+  function resetFields(...keys) {
     if (keys.length === 0) {
       keys = Object.keys(fields);
     }
@@ -740,24 +760,21 @@ function useForm(options) {
     });
   }
   function submit(optionsOverrides) {
-    const url = typeof options.url === "function" ? options.url() : options.url;
-    const data = typeof options.transform === "function" ? options.transform?.(fields) : fields;
-    const preserveState = optionsOverrides?.preserveState ?? options.preserveState;
-    const hooks = { ...options?.hooks, ...optionsOverrides?.hooks };
+    const { fields: _f, key: _k, ...optionsWithoutFields } = options;
+    const optionsWithOverrides = optionsOverrides ? merge(optionsWithoutFields, optionsOverrides, { mergePlainObjects: true }) : optionsWithoutFields;
+    const url = typeof optionsWithOverrides.url === "function" ? optionsWithOverrides.url() : optionsWithOverrides.url;
+    const data = typeof optionsWithOverrides.transform === "function" ? optionsWithOverrides.transform(fields) : fields;
+    const preserveState = optionsWithOverrides.preserveState ?? optionsWithOverrides.method !== "GET";
+    const hooks = optionsWithOverrides.hooks ?? {};
     return router.navigate({
-      ...options,
+      ...optionsWithOverrides,
       url: url ?? state.context.value?.url,
-      method: options.method ?? "POST",
-      ...optionsOverrides,
+      method: optionsWithOverrides.method ?? "POST",
       data: safeClone(data),
-      preserveState: preserveState === void 0 && options.method !== "GET" ? true : preserveState,
+      preserveState,
       hooks: {
         before: (navigation, context) => {
-          failed.value = false;
-          successful.value = false;
-          recentlySuccessful.value = false;
-          clearTimeout(timeoutIds.recentlySuccessful);
-          clearTimeout(timeoutIds.recentlyFailed);
+          resetSubmissionState();
           return hooks.before?.(navigation, context);
         },
         start: (context) => {
@@ -772,20 +789,20 @@ function useForm(options) {
           setErrors(incoming);
           failed.value = true;
           recentlyFailed.value = true;
-          timeoutIds.recentlyFailed = setTimeout(() => recentlyFailed.value = false, options?.timeout ?? 5e3);
+          timeoutIds.recentlyFailed = setTimeout(() => recentlyFailed.value = false, optionsWithOverrides.timeout ?? 5e3);
           return hooks.error?.(incoming, context);
         },
         success: (payload, context) => {
           clearErrors();
-          if (options?.updateInitials) {
+          if (optionsWithOverrides.updateInitials) {
             setInitial(fields);
           }
-          if (options?.reset !== false) {
-            reset();
+          if (optionsWithOverrides.reset !== false) {
+            resetFields();
           }
           successful.value = true;
           recentlySuccessful.value = true;
-          timeoutIds.recentlySuccessful = setTimeout(() => recentlySuccessful.value = false, options?.timeout ?? 5e3);
+          timeoutIds.recentlySuccessful = setTimeout(() => recentlySuccessful.value = false, optionsWithOverrides.timeout ?? 5e3);
           return hooks.success?.(payload, context);
         },
         after: (context) => {
@@ -832,7 +849,9 @@ function useForm(options) {
     }
   }, { deep: true, immediate: true });
   return reactive({
+    resetFields,
     reset,
+    resetSubmissionState,
     clear,
     fields,
     abort,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/vue",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "Vue adapter for Hybridly",
   "keywords": [
     "hybridly",
@@ -48,15 +48,16 @@
     "defu": "^6.1.4",
     "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
-    "qs": "^6.12.0",
-    "@hybridly/core": "0.7.3",
-    "@hybridly/utils": "0.7.3"
+    "qs": "^6.12.1",
+    "@hybridly/core": "0.7.4",
+    "@hybridly/utils": "0.7.4"
   },
   "devDependencies": {
     "@types/lodash": "^4.17.0",
     "@types/lodash.isequal": "^4.5.8",
     "@types/nprogress": "^0.2.3",
-    "vue": "^3.4.21"
+    "@vue/test-utils": "^2.4.5",
+    "vue": "^3.4.23"
   },
   "scripts": {
     "build": "unbuild",