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

package/dist/index.cjs

@@ -56,6 +56,8 @@ const dialogStore = {
   }
 };
 
+const onMountedCallbacks = [];
+
 const state = {
   context: vue.ref(),
   view: vue.shallowRef(),
@@ -119,10 +121,17 @@ const wrapper = vue.defineComponent({
     function renderView() {
       utils.debug.adapter("vue:render:view", "Rendering view.");
       state.view.value.inheritAttrs = !!state.view.value.inheritAttrs;
-      return vue.h(state.view.value, {
+      return vue.withDirectives(vue.h(state.view.value, {
         ...state.properties.value,
         key: state.viewKey.value
-      });
+      }), [[{
+        mounted: () => {
+          vue.nextTick(() => {
+            utils.debug.adapter("vue:render:view", "Calling mounted callbacks.");
+            onMountedCallbacks.pop()?.();
+          });
+        }
+      }]]);
     }
     function renderDialog() {
       if (dialogStore.state.component.value && dialogStore.state.properties.value) {
@@ -279,6 +288,9 @@ async function initializeHybridly(options = {}) {
     responseErrorModals: resolved.responseErrorModals ?? process.env.NODE_ENV === "development",
     adapter: {
       resolveComponent: resolve,
+      onWaitingForMount: (callback) => {
+        onMountedCallbacks.push(callback);
+      },
       onDialogClose: async () => {
         dialogStore.hide();
       },
@@ -512,15 +524,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 +569,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 +614,9 @@ function useForm(options) {
         },
         success: (payload, context) => {
           clearErrors();
-          setInitial(fields);
+          if (options?.updateInitials) {
+            setInitial(fields);
+          }
           if (options?.reset !== false) {
             reset();
           }
@@ -634,7 +651,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 +670,7 @@ function useForm(options) {
   }, { deep: true, immediate: true });
   return vue.reactive({
     reset,
+    clear,
     fields,
     abort,
     setErrors,
@@ -772,4 +793,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>;
 
@@ -285,7 +280,7 @@ type BaseUrlTransformable = Partial<Omit<URL, 'searchParams' | 'toJSON' | 'toStr
     trailingSlash?: boolean;
 };
 
-type ConditionalNavigationOption = boolean | ((payload: HybridPayload) => boolean);
+type ConditionalNavigationOption<T extends boolean | string> = T | ((payload: NavigationOptions) => T);
 interface NavigationOptions {
     /** View to navigate to. */
     payload?: HybridPayload;
@@ -293,13 +288,13 @@ interface NavigationOptions {
      * Whether to replace the current history state instead of adding
      * one. This affects the browser's "back" and "forward" features.
      */
-    replace?: ConditionalNavigationOption;
-    /** Whether to preserve the current scrollbar position. */
-    preserveScroll?: ConditionalNavigationOption;
+    replace?: ConditionalNavigationOption<boolean>;
+    /** Whether to preserve the scrollbars positions on the page. */
+    preserveScroll?: ConditionalNavigationOption<boolean>;
     /** Whether to preserve the current page component's state. */
-    preserveState?: ConditionalNavigationOption;
+    preserveState?: ConditionalNavigationOption<boolean>;
     /** Whether to preserve the current URL. */
-    preserveUrl?: ConditionalNavigationOption;
+    preserveUrl?: ConditionalNavigationOption<boolean>;
     /**
      * Properties of the given URL to override.
      * @example
@@ -463,6 +458,8 @@ interface Adapter {
     onContextUpdate?: (context: InternalRouterContext) => void;
     /** Called when a dialog is closed. */
     onDialogClose?: (context: InternalRouterContext) => void;
+    /** Called when Hybridly is waiting for a component to be mounted. The given callback should be executed after the view component is mounted. */
+    onWaitingForMount: (callback: Function) => void;
 }
 interface ResolvedAdapter extends Adapter {
     updateRoutingConfiguration: (routing?: RoutingConfiguration) => void;
@@ -485,12 +482,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 +658,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

@@ -1,4 +1,4 @@
-import { shallowRef, ref, unref, triggerRef, defineComponent, toRaw, h, createApp, isRef, reactive, readonly, computed, watch, getCurrentInstance, onUnmounted } from 'vue';
+import { shallowRef, ref, unref, triggerRef, defineComponent, toRaw, h, withDirectives, nextTick, createApp, isRef, reactive, readonly, computed, watch, getCurrentInstance, onUnmounted } from 'vue';
 import { registerHook as registerHook$1, createRouter, makeUrl, router } from '@hybridly/core';
 export { can, route, router } from '@hybridly/core';
 import { debug, random, showDomainsDisabledErrorModal, showPageComponentErrorModal, merge, clone } from '@hybridly/utils';
@@ -48,6 +48,8 @@ const dialogStore = {
   }
 };
 
+const onMountedCallbacks = [];
+
 const state = {
   context: ref(),
   view: shallowRef(),
@@ -111,10 +113,17 @@ const wrapper = defineComponent({
     function renderView() {
       debug.adapter("vue:render:view", "Rendering view.");
       state.view.value.inheritAttrs = !!state.view.value.inheritAttrs;
-      return h(state.view.value, {
+      return withDirectives(h(state.view.value, {
         ...state.properties.value,
         key: state.viewKey.value
-      });
+      }), [[{
+        mounted: () => {
+          nextTick(() => {
+            debug.adapter("vue:render:view", "Calling mounted callbacks.");
+            onMountedCallbacks.pop()?.();
+          });
+        }
+      }]]);
     }
     function renderDialog() {
       if (dialogStore.state.component.value && dialogStore.state.properties.value) {
@@ -271,6 +280,9 @@ async function initializeHybridly(options = {}) {
     responseErrorModals: resolved.responseErrorModals ?? process.env.NODE_ENV === "development",
     adapter: {
       resolveComponent: resolve,
+      onWaitingForMount: (callback) => {
+        onMountedCallbacks.push(callback);
+      },
       onDialogClose: async () => {
         dialogStore.hide();
       },
@@ -504,15 +516,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 +561,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 +606,9 @@ function useForm(options) {
         },
         success: (payload, context) => {
           clearErrors();
-          setInitial(fields);
+          if (options?.updateInitials) {
+            setInitial(fields);
+          }
           if (options?.reset !== false) {
             reset();
           }
@@ -626,7 +643,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 +662,7 @@ function useForm(options) {
   }, { deep: true, immediate: true });
   return reactive({
     reset,
+    clear,
     fields,
     abort,
     setErrors,
@@ -747,4 +768,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.5",
   "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.5",
+    "@hybridly/core": "0.1.0-alpha.5",
+    "@hybridly/progress-plugin": "0.1.0-alpha.5",
+    "@hybridly/utils": "0.1.0-alpha.5"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.191",