@hybridly/vue 0.1.0-alpha.3 → 0.1.0-alpha.4

package/dist/index.cjs

@@ -512,15 +512,10 @@ function toReactive(objectRef) {
 function useProperties() {
   return vue.readonly(toReactive(vue.computed(() => state.context.value?.view.properties)));
 }
-function useTypedProperty(path, fallback) {
-  return vue.computed(
-    () => path.split(".").reduce((o, i) => o[i], state.context.value?.view.properties) ?? fallback
-  );
-}
-function useProperty(path, fallback) {
-  return vue.computed(
-    () => path.split(".").reduce((o, i) => o[i], state.context.value?.view.properties) ?? fallback
-  );
+function useProperty(path) {
+  return vue.computed(() => {
+    return path.split(".").reduce((o, i) => o?.[i], state.context.value?.view.properties);
+  });
 }
 
 function useContext() {
@@ -562,6 +557,14 @@ function useForm(options) {
       Reflect.set(fields, key, safeClone(Reflect.get(initial, key)));
     });
   }
+  function clear(...keys) {
+    if (keys.length === 0) {
+      keys = Object.keys(fields);
+    }
+    keys.forEach((key) => {
+      delete fields[key];
+    });
+  }
   function submit(optionsOverrides) {
     const url = typeof options.url === "function" ? options.url() : options.url;
     const data = typeof options.transform === "function" ? options.transform?.(fields) : fields;
@@ -599,7 +602,9 @@ function useForm(options) {
         },
         success: (payload, context) => {
           clearErrors();
-          setInitial(fields);
+          if (options?.updateInitials) {
+            setInitial(fields);
+          }
           if (options?.reset !== false) {
             reset();
           }
@@ -634,7 +639,10 @@ function useForm(options) {
     delete errors.value[key];
   }
   function setErrors(incoming) {
-    errors.value = incoming;
+    clearErrors();
+    Object.entries(incoming).forEach(([key, value]) => {
+      errors.value[key] = value;
+    });
   }
   function abort() {
     core.router.abort();
@@ -650,6 +658,7 @@ function useForm(options) {
   }, { deep: true, immediate: true });
   return vue.reactive({
     reset,
+    clear,
     fields,
     abort,
     setErrors,
@@ -772,4 +781,3 @@ exports.useHistoryState = useHistoryState;
 exports.usePaginator = usePaginator;
 exports.useProperties = useProperties;
 exports.useProperty = useProperty;
-exports.useTypedProperty = useTypedProperty;

package/dist/index.d.ts

@@ -181,16 +181,11 @@ declare const RouterLink: vue.DefineComponent<{
 
 /** Accesses all current properties. */
 declare function useProperties<T extends object, Global extends GlobalHybridlyProperties>(): vue.DeepReadonly<vue.UnwrapNestedRefs<T & Global>>;
-/**
- * Accesses a property with the given type.
- * @experimental Workaround for not being able to type `useProperty`, might be removed in the future.
- */
-declare function useTypedProperty<T>(path: string, fallback?: T): ComputedRef<T>;
 /** Accesses a property with a dot notation. */
-declare function useProperty<T = GlobalHybridlyProperties, P extends Path<T> = Path<T>, Fallback extends PathValue<T, P> = PathValue<T, P>>(path: [P] extends [never] ? string : P, fallback?: Fallback): ComputedRef<[PathValue<T, P>] extends [never] ? Fallback : PathValue<T, P>>;
-type PathImpl<T, K extends keyof T> = K extends string ? T[K] extends Record<string, any> ? T[K] extends ArrayLike<any> ? K | `${K}.${PathImpl<T[K], Exclude<keyof T[K], keyof any[]>>}` : K | `${K}.${PathImpl<T[K], keyof T[K]>}` : K : never;
+declare function useProperty<F = never, T = GlobalHybridlyProperties, P extends Path<T> = Path<T>>(path: [F] extends [never] ? [P] extends [never] ? string : P : string): ComputedRef<[F] extends [never] ? [PathValue<T, P>] extends [never] ? never : PathValue<T, P> : F>;
+type PathImpl<T, K extends keyof T> = K extends string ? T[K] extends undefined ? undefined : NonNullable<T[K]> extends Record<string, any> ? NonNullable<T[K]> extends ArrayLike<any> ? K | `${K}.${PathImpl<NonNullable<T[K]>, Exclude<keyof NonNullable<T[K]>, keyof any[]>>}` : K | `${K}.${PathImpl<NonNullable<T[K]>, keyof NonNullable<T[K]>>}` : K : never;
 type Path<T> = PathImpl<T, keyof T> | keyof T;
-type PathValue<T, P extends Path<T>> = P extends `${infer K}.${infer Rest}` ? K extends keyof T ? Rest extends Path<T[K]> ? PathValue<T[K], Rest> : never : never : P extends keyof T ? T[P] : never;
+type PathValue<T, P extends Path<T>> = P extends `${infer K}.${infer Rest}` ? K extends keyof T ? T[K] extends undefined ? undefined : Rest extends Path<T[K]> ? PathValue<T[K], Rest> : Rest extends Path<NonNullable<T[K]>> ? PathValue<NonNullable<T[K]>, Rest> | undefined : never : never : P extends keyof T ? T[P] extends undefined ? undefined : T[P] : never;
 
 type MaybePromise<T> = T | Promise<T>;
 
@@ -485,12 +480,28 @@ interface FormOptions<T extends Fields> extends Omit<HybridRequestOptions$1, 'da
     fields: T;
     url?: UrlResolvable$1 | (() => UrlResolvable$1);
     key?: string | false;
+    /**
+     * Defines the delay after which the `recentlySuccessful` and `recentlyFailed` variables are reset to `false`.
+     */
     timeout?: number;
+    /**
+     * Resets the fields of the form to their initial value after a successful submission.
+     * @default true
+     */
     reset?: boolean;
+    /**
+     * Updates the initial values from the form after a successful submission.
+     * @default false
+     */
+    updateInitials?: boolean;
+    /**
+     * Callback executed before the form submission for transforming the fields.
+     */
     transform?: (fields: T) => Fields;
 }
 declare function useForm<T extends Fields = Fields>(options: FormOptions<T>): {
     reset: (...keys: (keyof T)[]) => void;
+    clear: (...keys: (keyof T)[]) => void;
     fields: vue.UnwrapRef<vue.UnwrapNestedRefs<T>>;
     abort: () => void;
     setErrors: (incoming: Record<string, string>) => void;
@@ -645,4 +656,4 @@ declare function useDialog(): {
     properties: vue.ComputedRef<Properties | undefined>;
 };
 
-export { Layout, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, resolvePageComponent, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty, useTypedProperty };
+export { Layout, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, resolvePageComponent, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty };

package/dist/index.mjs

@@ -504,15 +504,10 @@ function toReactive(objectRef) {
 function useProperties() {
   return readonly(toReactive(computed(() => state.context.value?.view.properties)));
 }
-function useTypedProperty(path, fallback) {
-  return computed(
-    () => path.split(".").reduce((o, i) => o[i], state.context.value?.view.properties) ?? fallback
-  );
-}
-function useProperty(path, fallback) {
-  return computed(
-    () => path.split(".").reduce((o, i) => o[i], state.context.value?.view.properties) ?? fallback
-  );
+function useProperty(path) {
+  return computed(() => {
+    return path.split(".").reduce((o, i) => o?.[i], state.context.value?.view.properties);
+  });
 }
 
 function useContext() {
@@ -554,6 +549,14 @@ function useForm(options) {
       Reflect.set(fields, key, safeClone(Reflect.get(initial, key)));
     });
   }
+  function clear(...keys) {
+    if (keys.length === 0) {
+      keys = Object.keys(fields);
+    }
+    keys.forEach((key) => {
+      delete fields[key];
+    });
+  }
   function submit(optionsOverrides) {
     const url = typeof options.url === "function" ? options.url() : options.url;
     const data = typeof options.transform === "function" ? options.transform?.(fields) : fields;
@@ -591,7 +594,9 @@ function useForm(options) {
         },
         success: (payload, context) => {
           clearErrors();
-          setInitial(fields);
+          if (options?.updateInitials) {
+            setInitial(fields);
+          }
           if (options?.reset !== false) {
             reset();
           }
@@ -626,7 +631,10 @@ function useForm(options) {
     delete errors.value[key];
   }
   function setErrors(incoming) {
-    errors.value = incoming;
+    clearErrors();
+    Object.entries(incoming).forEach(([key, value]) => {
+      errors.value[key] = value;
+    });
   }
   function abort() {
     router.abort();
@@ -642,6 +650,7 @@ function useForm(options) {
   }, { deep: true, immediate: true });
   return reactive({
     reset,
+    clear,
     fields,
     abort,
     setErrors,
@@ -747,4 +756,4 @@ function useDialog() {
   };
 }
 
-export { RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, resolvePageComponent, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty, useTypedProperty };
+export { RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, registerHook, resolvePageComponent, useBackForward, useContext, useDialog, useForm, useHistoryState, usePaginator, useProperties, useProperty };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/vue",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.4",
   "description": "Vue adapter for Hybridly",
   "keywords": [
     "hybridly",
@@ -43,10 +43,10 @@
     "lodash.isequal": "^4.5.0",
     "nprogress": "^0.2.0",
     "qs": "^6.11.0",
-    "@hybridly/config": "0.1.0-alpha.3",
-    "@hybridly/core": "0.1.0-alpha.3",
-    "@hybridly/progress-plugin": "0.1.0-alpha.3",
-    "@hybridly/utils": "0.1.0-alpha.3"
+    "@hybridly/config": "0.1.0-alpha.4",
+    "@hybridly/core": "0.1.0-alpha.4",
+    "@hybridly/progress-plugin": "0.1.0-alpha.4",
+    "@hybridly/utils": "0.1.0-alpha.4"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.191",