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

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": [
@@ -525,6 +541,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,
@@ -590,7 +607,8 @@ function useForm(options) {
     initial,
     fields,
     loaded,
-    submit,
+    submitWithOptions: submit,
+    submit: () => submit(),
     abort,
     setErrors,
     clearErrors,
@@ -660,8 +678,14 @@ function usePaginator(paginator) {
   return { pages, items, previous, next, first, last, total, from, to };
 }
 
-function useLayout(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 +696,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];
@@ -792,13 +816,14 @@ 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;
 exports.useContext = useContext;
 exports.useForm = useForm;
 exports.useHistoryState = useHistoryState;
-exports.useLayout = useLayout;
 exports.usePaginator = usePaginator;
 exports.useProperties = useProperties;
 exports.useProperty = useProperty;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { Plugin as Plugin$2, h, PropType, ComputedRef, ComponentOptions } from 'vue';
+import { Plugin as Plugin$2, h, PropType, ComputedRef } 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';
@@ -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>;
     /**
@@ -419,7 +419,8 @@ declare function useForm<T extends Fields = Fields>(options: FormOptions<T>): {
     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>;
+    submitWithOptions: (optionsOverrides?: Omit<VisitOptions$1, 'data'>) => Promise<_hybridly_core.VisitResponse>;
+    submit: () => Promise<_hybridly_core.VisitResponse>;
     abort: () => void;
     setErrors: (incoming: Record<string, string>) => void;
     clearErrors: () => void;
@@ -521,11 +522,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 useLayout(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 +558,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, initializeHybridly, route, useBackForward, useContext, useForm, useHistoryState, useLayout, 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,4 +1,4 @@
-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';
 import { debug, showPageComponentErrorModal, merge } from '@hybridly/utils';
@@ -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": [
@@ -516,6 +532,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,
@@ -581,7 +598,8 @@ function useForm(options) {
     initial,
     fields,
     loaded,
-    submit,
+    submitWithOptions: submit,
+    submit: () => submit(),
     abort,
     setErrors,
     clearErrors,
@@ -651,8 +669,14 @@ function usePaginator(paginator) {
   return { pages, items, previous, next, first, last, total, from, to };
 }
 
-function useLayout(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 +687,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 +803,4 @@ function route(name, parameters, absolute) {
   return new Router(name, parameters, absolute).toString();
 }
 
-export { HybridlyImports, HybridlyResolver, RouterLink, initializeHybridly, route, useBackForward, useContext, useForm, useHistoryState, useLayout, 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.3",
+  "version": "0.0.1-alpha.5",
   "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.3",
-    "@hybridly/progress-plugin": "0.0.1-alpha.3",
-    "@hybridly/utils": "0.0.1-alpha.3",
+    "@hybridly/core": "0.0.1-alpha.5",
+    "@hybridly/progress-plugin": "0.0.1-alpha.5",
+    "@hybridly/utils": "0.0.1-alpha.5",
     "@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",