@hybridly/vue 0.0.1-alpha.4 → 0.0.1-alpha.6

package/dist/index.cjs

@@ -21,6 +21,7 @@ const state = {
   context: vue.ref(),
   view: vue.shallowRef(),
   viewLayout: vue.shallowRef(),
+  viewLayoutProperties: vue.ref(),
   viewKey: vue.ref(),
   dialog: vue.shallowRef(),
   dialogKey: vue.ref(),
@@ -36,9 +37,13 @@ const state = {
     state.view.value = view;
   },
   setViewLayout(layout) {
-    utils.debug.adapter("vue:state:view", "Setting layout:", layout);
+    utils.debug.adapter("vue:state:view", "Setting layout", layout);
     state.viewLayout.value = layout;
   },
+  setViewLayoutProperties(properties) {
+    utils.debug.adapter("vue:state:view", "Setting layout properties:", properties);
+    state.viewLayoutProperties.value = properties;
+  },
   setDialog(dialog) {
     utils.debug.adapter("vue:state:dialog", "Setting dialog:", dialog);
     state.dialog.value = dialog;
@@ -75,11 +80,17 @@ const wrapper = vue.defineComponent({
       if (Array.isArray(state.view.value?.layout)) {
         return state.view.value.layout.concat(child).reverse().reduce((child2, layout) => {
           layout.inheritAttrs = !!layout.inheritAttrs;
-          return vue.h(layout, { ...state.context.value.view.properties }, () => child2);
+          return vue.h(layout, {
+            ...state.view.value?.layoutProperties ?? {},
+            ...state.context.value.view.properties
+          }, () => child2);
         });
       }
       return [
-        vue.h(state.view.value?.layout, { ...state.context.value.view.properties }, () => child),
+        vue.h(state.view.value?.layout, {
+          ...state.view.value?.layoutProperties ?? {},
+          ...state.context.value.view.properties
+        }, () => child),
         renderDialog()
       ];
     }
@@ -107,6 +118,10 @@ const wrapper = vue.defineComponent({
           state.view.value.layout = state.viewLayout.value;
           state.viewLayout.value = void 0;
         }
+        if (state.viewLayoutProperties.value) {
+          state.view.value.layoutProperties = state.viewLayoutProperties.value;
+          state.viewLayoutProperties.value = void 0;
+        }
         if (state.view.value.layout) {
           return renderLayout(view);
         }
@@ -413,7 +428,8 @@ const HybridlyImports = {
     "useForm",
     "useHistoryState",
     "usePaginator",
-    "useLayout",
+    "defineLayout",
+    "defineLayoutProperties",
     "route"
   ],
   "hybridly": [
@@ -504,8 +520,8 @@ function useForm(options) {
     recentlyFailed: void 0,
     recentlySuccessful: void 0
   };
-  const initial = vue.readonly(safeClone(options.fields));
-  const loaded = vue.readonly(safeClone(historyData?.fields ?? options.fields));
+  const initial = safeClone(options.fields);
+  const loaded = safeClone(historyData?.fields ?? options.fields);
   const fields = vue.reactive(safeClone(historyData?.fields ?? options.fields));
   const errors = vue.ref(historyData?.errors ?? {});
   const isDirty = vue.ref(false);
@@ -514,6 +530,7 @@ function useForm(options) {
   const recentlyFailed = vue.ref(false);
   const failed = vue.ref(false);
   const processing = vue.ref(false);
+  const progress = vue.ref();
   function reset(...keys) {
     if (keys.length === 0) {
       keys = Object.keys(fields);
@@ -525,6 +542,7 @@ function useForm(options) {
     const url = typeof options.url === "function" ? options.url() : options.url;
     const data = typeof options.transform === "function" ? options.transform?.(fields) : fields;
     return core.router.visit({
+      ...options,
       url: url ?? state.context.value?.url,
       method: options.method ?? "POST",
       ...optionsOverrides,
@@ -544,6 +562,10 @@ function useForm(options) {
           processing.value = true;
           return options.hooks?.start?.(context);
         },
+        progress: (incoming) => {
+          progress.value = incoming;
+          return options.hooks?.progress?.(incoming);
+        },
         error: (incoming) => {
           setErrors(incoming);
           failed.value = true;
@@ -561,6 +583,7 @@ function useForm(options) {
           return options.hooks?.success?.(payload);
         },
         after: (context) => {
+          progress.value = void 0;
           processing.value = false;
           return options.hooks?.after?.(context);
         }
@@ -587,21 +610,23 @@ function useForm(options) {
   }, { deep: true, immediate: true });
   return vue.reactive({
     reset,
-    initial,
     fields,
-    loaded,
-    submit,
     abort,
     setErrors,
     clearErrors,
+    submitWithOptions: submit,
+    submit: () => submit(),
     hasErrors: vue.computed(() => Object.values(errors.value).length > 0),
-    isDirty: vue.readonly(isDirty),
-    errors: vue.readonly(errors),
-    processing: vue.readonly(processing),
-    successful: vue.readonly(successful),
-    failed: vue.readonly(failed),
-    recentlySuccessful: vue.readonly(recentlySuccessful),
-    recentlyFailed: vue.readonly(recentlyFailed)
+    initial,
+    loaded,
+    progress,
+    isDirty,
+    errors,
+    processing,
+    successful,
+    failed,
+    recentlySuccessful,
+    recentlyFailed
   });
 }
 
@@ -660,8 +685,14 @@ function usePaginator(paginator) {
   return { pages, items, previous, next, first, last, total, from, to };
 }
 
-function defineLayout(layout) {
-  state.setViewLayout(layout);
+function defineLayout(...args) {
+  const layouts = args[0];
+  const properties = args[1];
+  state.setViewLayout(layouts);
+  state.setViewLayoutProperties(properties);
+}
+function defineLayoutProperties(properties) {
+  state.setViewLayoutProperties(properties);
 }
 
 class Route {
@@ -672,7 +703,7 @@ class Route {
   }
   static getDefinition(name) {
     if (!state.routes.value) {
-      throw new Error("Routing is not initialized. Have you enabled the Vite plugin?");
+      throw new Error("Routing is not initialized. Make sure the Vite plugin is enabled and that `virtual:hybridly/router` is imported.");
     }
     const routes = state.routes.value;
     const route = routes?.routes?.[name];
@@ -788,11 +819,13 @@ function route(name, parameters, absolute) {
   return new Router(name, parameters, absolute).toString();
 }
 
+exports.can = core.can;
 exports.router = core.router;
 exports.HybridlyImports = HybridlyImports;
 exports.HybridlyResolver = HybridlyResolver;
 exports.RouterLink = RouterLink;
 exports.defineLayout = defineLayout;
+exports.defineLayoutProperties = defineLayoutProperties;
 exports.initializeHybridly = initializeHybridly;
 exports.route = route;
 exports.useBackForward = useBackForward;

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as vue from 'vue';
-import { Plugin as Plugin$2, h, PropType, ComputedRef, ComponentOptions } from 'vue';
+import { Plugin as Plugin$2, h, PropType, ComputedRef, DeepReadonly } from 'vue';
 import * as _hybridly_core from '@hybridly/core';
 import { VisitPayload as VisitPayload$1, ResolveComponent as ResolveComponent$1, RouterContextOptions, Plugin as Plugin$1, RouterContext, Method as Method$1, VisitOptions as VisitOptions$1, UrlResolvable as UrlResolvable$1 } from '@hybridly/core';
-export { router } from '@hybridly/core';
+export { can, router } from '@hybridly/core';
 import { ProgressOptions } from '@hybridly/progress-plugin';
 import * as _vue_shared from '@vue/shared';
 import { RequestData } from '@hybridly/utils';
@@ -212,7 +212,7 @@ interface Hooks {
      */
     abort: (context: InternalRouterContext) => MaybePromise<any>;
     /**
-     * Called when a response to a request is not a valid Hybridly response.
+     * Called when a response to a request is not a valid hybrid response.
      */
     invalid: (response: AxiosResponse) => MaybePromise<void>;
     /**
@@ -260,7 +260,7 @@ interface NavigationOptions {
      * }
      * ```
      */
-    transformUrl?: UrlTransformable;
+    transformUrl?: UrlTransformable | ((url: string) => UrlTransformable);
     /**
      * Defines whether the history state should be updated.
      * @internal This is an advanced property meant to be used internally.
@@ -416,16 +416,30 @@ interface FormOptions<T extends Fields> extends Omit<VisitOptions$1, 'data' | 'u
 }
 declare function useForm<T extends Fields = Fields>(options: FormOptions<T>): {
     reset: (...keys: (keyof T)[]) => void;
-    initial: vue.UnwrapRef<vue.DeepReadonly<vue.UnwrapNestedRefs<T>>>;
     fields: vue.UnwrapRef<vue.UnwrapNestedRefs<T>>;
-    loaded: any;
-    submit: (optionsOverrides?: Omit<VisitOptions$1, 'data'>) => Promise<_hybridly_core.VisitResponse>;
     abort: () => void;
     setErrors: (incoming: Record<string, string>) => void;
     clearErrors: () => void;
+    submitWithOptions: (optionsOverrides?: Omit<VisitOptions$1, 'data'>) => Promise<_hybridly_core.VisitResponse>;
+    submit: () => Promise<_hybridly_core.VisitResponse>;
     hasErrors: boolean;
+    initial: vue.UnwrapRef<DeepReadonly<T>>;
+    loaded: any;
+    progress: {
+        readonly event: {
+            readonly loaded: number;
+            readonly total?: number | undefined;
+            readonly progress?: number | undefined;
+            readonly bytes: number;
+            readonly rate?: number | undefined;
+            readonly estimated?: number | undefined;
+            readonly upload?: boolean | undefined;
+            readonly download?: boolean | undefined;
+        };
+        readonly percentage: number;
+    } | undefined;
     isDirty: boolean;
-    errors: vue.UnwrapRef<vue.DeepReadonly<vue.UnwrapNestedRefs<[Record<keyof T, string>] extends [vue.Ref<any>] ? vue.Ref<any> & Record<keyof T, string> : vue.Ref<vue.UnwrapRef<Record<keyof T, string>>>>>>;
+    errors: vue.UnwrapRef<DeepReadonly<[Record<keyof T, string>] extends [vue.Ref<any>] ? vue.Ref<any> & Record<keyof T, string> : vue.Ref<vue.UnwrapRef<Record<keyof T, string>>>>>;
     processing: boolean;
     successful: boolean;
     failed: boolean;
@@ -521,11 +535,16 @@ declare function usePaginator<T = any>(paginator: UnwrappedPaginator<T> | Pagina
     to: number;
 };
 
-declare type Layout = ComponentOptions | (() => ComponentOptions) | [ComponentOptions];
+declare type Layout = any;
 /**
  * Sets the persistent layout for this page.
  */
-declare function defineLayout(layout: Layout): void;
+declare function defineLayout<T extends Record<string, K>, K = any>(layout: Layout, properties?: T): void;
+declare function defineLayout(layouts: Layout[]): void;
+/**
+ * Sets or gets the properties for the current persistent layout.
+ */
+declare function defineLayoutProperties<T extends Record<string, K>, K = any>(properties: T): void;
 
 interface RouterConfiguration {
     url: string;
@@ -552,4 +571,4 @@ declare type RouteParameters<T extends RouteName> = Record<keyof GlobalRouteColl
  */
 declare function route<T extends RouteName>(name: T, parameters?: RouteParameters<T>, absolute?: boolean): string;
 
-export { AutoImportResolverOptions, GlobalRouteCollection, HybridlyImports, HybridlyResolver, Layout, RouteCollection, RouteDefinition, RouteName, RouteParameters, RouterConfiguration, RouterLink, defineLayout, initializeHybridly, route, useBackForward, useContext, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRouter };
+export { AutoImportResolverOptions, GlobalRouteCollection, HybridlyImports, HybridlyResolver, Layout, RouteCollection, RouteDefinition, RouteName, RouteParameters, RouterConfiguration, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, route, useBackForward, useContext, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRouter };

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { ref, shallowRef, unref, triggerRef, defineComponent, h, isRef, reactive, readonly, computed, toRaw, watch } from 'vue';
+import { ref, shallowRef, unref, triggerRef, defineComponent, h, isRef, reactive, readonly, computed, watch, toRaw } from 'vue';
 import { registerHook, registerHookOnce, createRouter, makeUrl, router } from '@hybridly/core';
-export { router } from '@hybridly/core';
+export { can, router } from '@hybridly/core';
 import { debug, showPageComponentErrorModal, merge } from '@hybridly/utils';
 import { progress } from '@hybridly/progress-plugin';
 import { setupDevtoolsPlugin } from '@vue/devtools-api';
@@ -12,6 +12,7 @@ const state = {
   context: ref(),
   view: shallowRef(),
   viewLayout: shallowRef(),
+  viewLayoutProperties: ref(),
   viewKey: ref(),
   dialog: shallowRef(),
   dialogKey: ref(),
@@ -27,9 +28,13 @@ const state = {
     state.view.value = view;
   },
   setViewLayout(layout) {
-    debug.adapter("vue:state:view", "Setting layout:", layout);
+    debug.adapter("vue:state:view", "Setting layout", layout);
     state.viewLayout.value = layout;
   },
+  setViewLayoutProperties(properties) {
+    debug.adapter("vue:state:view", "Setting layout properties:", properties);
+    state.viewLayoutProperties.value = properties;
+  },
   setDialog(dialog) {
     debug.adapter("vue:state:dialog", "Setting dialog:", dialog);
     state.dialog.value = dialog;
@@ -66,11 +71,17 @@ const wrapper = defineComponent({
       if (Array.isArray(state.view.value?.layout)) {
         return state.view.value.layout.concat(child).reverse().reduce((child2, layout) => {
           layout.inheritAttrs = !!layout.inheritAttrs;
-          return h(layout, { ...state.context.value.view.properties }, () => child2);
+          return h(layout, {
+            ...state.view.value?.layoutProperties ?? {},
+            ...state.context.value.view.properties
+          }, () => child2);
         });
       }
       return [
-        h(state.view.value?.layout, { ...state.context.value.view.properties }, () => child),
+        h(state.view.value?.layout, {
+          ...state.view.value?.layoutProperties ?? {},
+          ...state.context.value.view.properties
+        }, () => child),
         renderDialog()
       ];
     }
@@ -98,6 +109,10 @@ const wrapper = defineComponent({
           state.view.value.layout = state.viewLayout.value;
           state.viewLayout.value = void 0;
         }
+        if (state.viewLayoutProperties.value) {
+          state.view.value.layoutProperties = state.viewLayoutProperties.value;
+          state.viewLayoutProperties.value = void 0;
+        }
         if (state.view.value.layout) {
           return renderLayout(view);
         }
@@ -404,7 +419,8 @@ const HybridlyImports = {
     "useForm",
     "useHistoryState",
     "usePaginator",
-    "useLayout",
+    "defineLayout",
+    "defineLayoutProperties",
     "route"
   ],
   "hybridly": [
@@ -495,8 +511,8 @@ function useForm(options) {
     recentlyFailed: void 0,
     recentlySuccessful: void 0
   };
-  const initial = readonly(safeClone(options.fields));
-  const loaded = readonly(safeClone(historyData?.fields ?? options.fields));
+  const initial = safeClone(options.fields);
+  const loaded = safeClone(historyData?.fields ?? options.fields);
   const fields = reactive(safeClone(historyData?.fields ?? options.fields));
   const errors = ref(historyData?.errors ?? {});
   const isDirty = ref(false);
@@ -505,6 +521,7 @@ function useForm(options) {
   const recentlyFailed = ref(false);
   const failed = ref(false);
   const processing = ref(false);
+  const progress = ref();
   function reset(...keys) {
     if (keys.length === 0) {
       keys = Object.keys(fields);
@@ -516,6 +533,7 @@ function useForm(options) {
     const url = typeof options.url === "function" ? options.url() : options.url;
     const data = typeof options.transform === "function" ? options.transform?.(fields) : fields;
     return router.visit({
+      ...options,
       url: url ?? state.context.value?.url,
       method: options.method ?? "POST",
       ...optionsOverrides,
@@ -535,6 +553,10 @@ function useForm(options) {
           processing.value = true;
           return options.hooks?.start?.(context);
         },
+        progress: (incoming) => {
+          progress.value = incoming;
+          return options.hooks?.progress?.(incoming);
+        },
         error: (incoming) => {
           setErrors(incoming);
           failed.value = true;
@@ -552,6 +574,7 @@ function useForm(options) {
           return options.hooks?.success?.(payload);
         },
         after: (context) => {
+          progress.value = void 0;
           processing.value = false;
           return options.hooks?.after?.(context);
         }
@@ -578,21 +601,23 @@ function useForm(options) {
   }, { deep: true, immediate: true });
   return reactive({
     reset,
-    initial,
     fields,
-    loaded,
-    submit,
     abort,
     setErrors,
     clearErrors,
+    submitWithOptions: submit,
+    submit: () => submit(),
     hasErrors: computed(() => Object.values(errors.value).length > 0),
-    isDirty: readonly(isDirty),
-    errors: readonly(errors),
-    processing: readonly(processing),
-    successful: readonly(successful),
-    failed: readonly(failed),
-    recentlySuccessful: readonly(recentlySuccessful),
-    recentlyFailed: readonly(recentlyFailed)
+    initial,
+    loaded,
+    progress,
+    isDirty,
+    errors,
+    processing,
+    successful,
+    failed,
+    recentlySuccessful,
+    recentlyFailed
   });
 }
 
@@ -651,8 +676,14 @@ function usePaginator(paginator) {
   return { pages, items, previous, next, first, last, total, from, to };
 }
 
-function defineLayout(layout) {
-  state.setViewLayout(layout);
+function defineLayout(...args) {
+  const layouts = args[0];
+  const properties = args[1];
+  state.setViewLayout(layouts);
+  state.setViewLayoutProperties(properties);
+}
+function defineLayoutProperties(properties) {
+  state.setViewLayoutProperties(properties);
 }
 
 class Route {
@@ -663,7 +694,7 @@ class Route {
   }
   static getDefinition(name) {
     if (!state.routes.value) {
-      throw new Error("Routing is not initialized. Have you enabled the Vite plugin?");
+      throw new Error("Routing is not initialized. Make sure the Vite plugin is enabled and that `virtual:hybridly/router` is imported.");
     }
     const routes = state.routes.value;
     const route = routes?.routes?.[name];
@@ -779,4 +810,4 @@ function route(name, parameters, absolute) {
   return new Router(name, parameters, absolute).toString();
 }
 
-export { HybridlyImports, HybridlyResolver, RouterLink, defineLayout, initializeHybridly, route, useBackForward, useContext, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRouter };
+export { HybridlyImports, HybridlyResolver, RouterLink, defineLayout, defineLayoutProperties, initializeHybridly, route, useBackForward, useContext, useForm, useHistoryState, usePaginator, useProperties, useProperty, useRouter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hybridly/vue",
-  "version": "0.0.1-alpha.4",
+  "version": "0.0.1-alpha.6",
   "description": "A solution to develop server-driven, client-rendered applications",
   "keywords": [
     "hybridly",
@@ -38,9 +38,9 @@
     "vue": "^3.2.37"
   },
   "dependencies": {
-    "@hybridly/core": "0.0.1-alpha.4",
-    "@hybridly/progress-plugin": "0.0.1-alpha.4",
-    "@hybridly/utils": "0.0.1-alpha.4",
+    "@hybridly/core": "0.0.1-alpha.6",
+    "@hybridly/progress-plugin": "0.0.1-alpha.6",
+    "@hybridly/utils": "0.0.1-alpha.6",
     "@vue/devtools-api": "^6.4.4",
     "defu": "^6.1.0",
     "lodash.clonedeep": "^4.5.0",
@@ -53,7 +53,7 @@
     "@types/lodash.clonedeep": "^4.5.7",
     "@types/lodash.isequal": "^4.5.6",
     "@types/nprogress": "^0.2.0",
-    "vue": "^3.2.40"
+    "vue": "^3.2.41"
   },
   "scripts": {
     "build": "unbuild",