@blueprint-ts/core 1.2.0 → 3.0.0

package/src/vue/forms/BaseForm.ts

@@ -115,7 +115,6 @@ export abstract class BaseForm<RequestBody extends object, FormBody extends obje
   private readonly original: FormBody
   private readonly _model: { [K in keyof FormBody]: ComputedRef<FormBody[K]> }
   private _errors: any = reactive({})
-  private _suggestions: any = reactive({})
   private _hasErrors: ComputedRef<boolean>
   protected append: string[] = []
   protected ignore: string[] = []
@@ -673,15 +672,13 @@ export abstract class BaseForm<RequestBody extends object, FormBody extends obje
     }
   }
 
-  public fillSuggestions(suggestionsData: Partial<Record<keyof FormBody, string[] | object[]>>): void {
-    for (const key in suggestionsData) {
-      if (Object.prototype.hasOwnProperty.call(suggestionsData, key)) {
-        this._suggestions[key] = suggestionsData[key]
-      }
-    }
-  }
-
   private transformValue(value: any, parentKey?: string): any {
+    if (value instanceof Date) {
+      return value
+    }
+    if (typeof Blob !== 'undefined' && value instanceof Blob) {
+      return value
+    }
     if (value instanceof PropertyAwareArray) {
       return [...value].map((item) => this.transformValue(item, parentKey))
     }
@@ -694,12 +691,18 @@ export abstract class BaseForm<RequestBody extends object, FormBody extends obje
         if (parentKey) {
           const compositeMethod = 'get' + upperFirst(parentKey) + upperFirst(camelCase(prop))
           if (typeof (this as any)[compositeMethod] === 'function') {
-            result[prop] = (this as any)[compositeMethod](value[prop])
+            const transformed = (this as any)[compositeMethod](value[prop])
+            if (transformed !== undefined) {
+              result[prop] = transformed
+            }
             continue
           }
         }
         // Pass the parentKey along so that nested objects still use it.
-        result[prop] = this.transformValue(value[prop], parentKey)
+        const transformed = this.transformValue(value[prop], parentKey)
+        if (transformed !== undefined) {
+          result[prop] = transformed
+        }
       }
       return result
     }
@@ -718,9 +721,15 @@ export abstract class BaseForm<RequestBody extends object, FormBody extends obje
       const getterName = 'get' + upperFirst(camelCase(key))
       const typedKey = key as unknown as keyof RequestBody
       if (typeof (this as any)[getterName] === 'function') {
-        payload[typedKey] = (this as any)[getterName](value)
+        const transformed = (this as any)[getterName](value)
+        if (transformed !== undefined) {
+          payload[typedKey] = transformed
+        }
       } else {
-        payload[typedKey] = this.transformValue(value, key)
+        const transformed = this.transformValue(value, key)
+        if (transformed !== undefined) {
+          payload[typedKey] = transformed
+        }
       }
     }
 
@@ -732,7 +741,10 @@ export abstract class BaseForm<RequestBody extends object, FormBody extends obje
 
       const getterName = 'get' + upperFirst(camelCase(fieldName))
       if (typeof (this as any)[getterName] === 'function') {
-        payload[fieldName as keyof RequestBody] = (this as any)[getterName]()
+        const transformed = (this as any)[getterName]()
+        if (transformed !== undefined) {
+          payload[fieldName as keyof RequestBody] = transformed
+        }
       } else {
         console.warn(`Getter method '${getterName}' not found for appended field '${fieldName}' in ${this.constructor.name}.`)
       }
@@ -766,9 +778,6 @@ export abstract class BaseForm<RequestBody extends object, FormBody extends obje
     for (const key in this._errors) {
       delete this._errors[key]
     }
-    for (const key in this._suggestions) {
-      delete this._suggestions[key]
-    }
     driver.set(this.constructor.name, {
       state: toRaw(this.state),
       original: toRaw(this.original),
@@ -881,7 +890,6 @@ export abstract class BaseForm<RequestBody extends object, FormBody extends obje
                   }
                 }),
                 errors: (this._errors[key] && this._errors[key][index] && this._errors[key][index][innerKey]) || [],
-                suggestions: (this._suggestions[key] && this._suggestions[key][index] && this._suggestions[key][index][innerKey]) || [],
                 dirty:
                   Array.isArray(this.dirty[key]) && this.dirty[key][index] && typeof (this.dirty[key] as any[])[index] === 'object'
                     ? (this.dirty[key] as any[])[index][innerKey]
@@ -906,7 +914,6 @@ export abstract class BaseForm<RequestBody extends object, FormBody extends obje
                 }
               }),
               errors: (this._errors[key] && this._errors[key][index]) || [],
-              suggestions: (this._suggestions[key] && this._suggestions[key][index]) || [],
               dirty: Array.isArray(this.dirty[key]) ? (this.dirty[key] as boolean[])[index] : false,
               touched: this.touched[key] || false
             }
@@ -917,7 +924,6 @@ export abstract class BaseForm<RequestBody extends object, FormBody extends obje
         props[key] = {
           model: this._model[key],
           errors: this._errors[key] || [],
-          suggestions: this._suggestions[key] || [],
           dirty: this.dirty[key] || false,
           touched: this.touched[key] || false
         }

package/src/vue/forms/PropertyAwareArray.ts

@@ -6,7 +6,6 @@ import { type WritableComputedRef } from 'vue'
 export interface PropertyAwareField<T> {
   model: WritableComputedRef<T>
   errors: any[]
-  suggestions: any[]
   dirty: boolean
 }
 
@@ -21,7 +20,7 @@ export type PropertyAware<T> = {
  * Extends Array with property awareness.
  * When a form field is defined as an instance of PropertyAwareArray,
  * the BaseForm will transform each element into reactive properties with
- * computed getters/setters, error/suggestion tracking, and dirty flags.
+ * computed getters/setters, error tracking, and dirty flags.
  */
 export class PropertyAwareArray<T = any> extends Array<T> {
   /**

package/src/vue/router/routeResourceBinding/RouteResourceBoundView.ts

@@ -0,0 +1,145 @@
+import { computed, defineComponent, h, type Component as VueComponent, type VNode } from 'vue'
+import { RouterView, useRoute, type RouteLocationNormalizedLoaded } from 'vue-router'
+
+type InjectionState = Record<string, { loading: boolean; error: Error | null }>
+
+/**
+ * Drop-in replacement for `<router-view>` that handles route resource
+ * injection loading and error states.
+ *
+ * When any injected resource is loading → renders the route's `loadingComponent`.
+ * When any injected resource has an error → renders the route's `errorComponent`
+ *   (receives `error` and `refresh` as props).
+ * Otherwise → passes `{ Component, route }` to the default scoped slot,
+ *   just like `<RouterView>`.
+ *
+ * Error and loading components are defined in the route via `defineRoute`:
+ *
+ * ```ts
+ * defineRoute<{ credential: CredentialResource }>()({
+ *   path: '/credentials/:credentialId',
+ *   component: CredentialShowPage,
+ *   errorComponent: GenericErrorPage,
+ *   loadingComponent: LoadingSpinner,
+ *   inject: {
+ *     credential: {
+ *       from: 'credentialId',
+ *       resolve: (id) => new RouteResourceRequestResolver(new CredentialShowRequest(id)),
+ *     },
+ *   },
+ * })
+ * ```
+ *
+ * Set `lazy: false` to render the target component immediately (without
+ * waiting for resources). The component can then handle loading/error
+ * states itself via `useRouteResource()`:
+ *
+ * ```ts
+ * defineRoute<{ credential: CredentialResource }>()({
+ *   path: '/credentials/:credentialId',
+ *   component: CredentialShowPage,
+ *   lazy: false,
+ *   inject: { ... },
+ * })
+ * ```
+ *
+ * Usage in layout (supports the same v-slot pattern as RouterView):
+ * ```vue
+ * <RouteResourceBoundView v-slot="{ Component, route }">
+ *   <component :is="Component" v-if="Component" :key="route.meta.usePathKey ? route.path : undefined" />
+ *   <EmptyState v-else />
+ * </RouteResourceBoundView>
+ * ```
+ *
+ * Or without a slot (renders the matched component automatically):
+ * ```vue
+ * <RouteResourceBoundView />
+ * ```
+ */
+export const RouteResourceBoundView = defineComponent({
+  name: 'RouteResourceBoundView',
+
+  setup(_, { slots }) {
+    const route = useRoute()
+
+    const injectionState = computed(() => {
+      return route.meta._injectionState as InjectionState | undefined
+    })
+
+    const firstError = computed((): Error | null => {
+      const state = injectionState.value
+      if (!state) return null
+
+      for (const key of Object.keys(state)) {
+        const entry = state[key]
+        if (entry?.error) return entry.error
+      }
+
+      return null
+    })
+
+    const anyLoading = computed((): boolean => {
+      const state = injectionState.value
+      if (!state) return false
+
+      return Object.keys(state).some((key) => state[key]?.loading)
+    })
+
+    const refresh = async () => {
+      const state = injectionState.value
+      if (!state) return
+
+      const erroredProps = Object.keys(state).filter((key) => state[key]?.error)
+
+      await Promise.all(erroredProps.map((propName) => route.meta.refresh?.(propName)))
+    }
+
+    /**
+     * Core render logic that decides which slot/component to show
+     * given the resolved Component and route from RouterView.
+     */
+    function renderContent(Component: VueComponent | undefined, resolvedRoute: RouteLocationNormalizedLoaded): VNode | VNode[] | undefined {
+      const isLazy = resolvedRoute.meta._lazy !== false
+
+      if (isLazy) {
+        if (firstError.value) {
+          const errorComponent = resolvedRoute.meta._errorComponent
+
+          if (errorComponent) {
+            return h(errorComponent, { error: firstError.value, refresh })
+          }
+
+          return slots['error']?.({ error: firstError.value, refresh })
+        }
+
+        if (anyLoading.value) {
+          const loadingComponent = resolvedRoute.meta._loadingComponent
+
+          if (loadingComponent) {
+            return h(loadingComponent)
+          }
+
+          return slots['loading']?.()
+        }
+      }
+
+      if (slots['default']) {
+        return slots['default']({ Component, route: resolvedRoute })
+      }
+
+      if (Component) {
+        return h(Component)
+      }
+
+      return undefined
+    }
+
+    return () => {
+      return h(RouterView, null, {
+        default: ({ Component, route: resolvedRoute }: { Component: VueComponent | undefined; route: RouteLocationNormalizedLoaded }) => {
+          return renderContent(Component, resolvedRoute)
+        }
+      })
+    }
+  }
+})

package/src/vue/router/routeResourceBinding/defineRoute.ts

@@ -1,3 +1,4 @@
+import { markRaw, type Component } from 'vue'
 import { type RouteRecordRaw } from 'vue-router'
 import { type InjectConfig } from './types'
 
@@ -7,16 +8,43 @@ import { type InjectConfig } from './types'
  * - inject config types (must resolve Props[K])
  *
  * Usage:
- * export default defineRoute<{ product: ProductResource }>()({ ... })
+ * export default defineRoute<{ product: ProductResource }>()({
+ *   path: '/products/:productId',
+ *   component: ProductShowPage,
+ *   errorComponent: GenericErrorPage,
+ *   loadingComponent: LoadingSpinner,
+ *   inject: { product: { from: 'productId', resolve: ... } },
+ * })
  */
 export function defineRoute<Props extends Record<string, unknown>>() {
   return function <
     T extends RouteRecordRaw & {
       inject?: InjectConfig<Props>
+      errorComponent?: Component
+      loadingComponent?: Component
+      lazy?: boolean
     }
   >(route: T): RouteRecordRaw {
     const originalProps = route.props
 
+    if (route.errorComponent) {
+      route.meta = route.meta ?? {}
+      route.meta._errorComponent = markRaw(route.errorComponent)
+      delete route.errorComponent
+    }
+
+    if (route.loadingComponent) {
+      route.meta = route.meta ?? {}
+      route.meta._loadingComponent = markRaw(route.loadingComponent)
+      delete route.loadingComponent
+    }
+
+    if (route.lazy !== undefined) {
+      route.meta = route.meta ?? {}
+      route.meta._lazy = route.lazy
+      delete route.lazy
+    }
+
     route.props = (to) => {
       const baseProps = typeof originalProps === 'function' ? originalProps(to) : originalProps === true ? to.params : (originalProps ?? {})
 

package/src/vue/router/routeResourceBinding/index.ts

@@ -1,10 +1,11 @@
 import { defineRoute } from './defineRoute'
 import { installRouteInjection } from './installRouteInjection'
+import { RouteResourceBoundView } from './RouteResourceBoundView'
 import { RouteResourceRequestResolver } from './RouteResourceRequestResolver'
 import { useRouteResource } from './useRouteResource'
 
 import type { DataRequest, InjectConfig, Resolver } from './types'
 
-export { defineRoute, installRouteInjection, RouteResourceRequestResolver, useRouteResource }
+export { defineRoute, installRouteInjection, RouteResourceBoundView, RouteResourceRequestResolver, useRouteResource }
 
 export type { DataRequest, InjectConfig, Resolver }

package/src/vue/router/routeResourceBinding/installRouteInjection.ts

@@ -7,17 +7,26 @@ type InjectRuntimeConfig = {
   getter: (payload: unknown) => unknown
 }
 
+type CachedEntry = {
+  paramValue: string
+  payload: unknown
+}
+
 /**
  * Installs the runtime part:
  * - resolves all route.inject entries before navigation completes
  * - stores results on to.meta._injectedProps
  * - ensures route props include injected results (so components receive them as props)
+ * - caches resolved resources so child routes inherit parent-resolved data
+ *   without triggering redundant requests (as long as the param value is unchanged)
  *
  * Notes:
  * - This keeps router files clean: only an `inject` block per route.
  * - This is intentionally runtime-generic; type safety happens at route definition time.
  */
 export function installRouteInjection(router: Router) {
+  const cache: Record<string, CachedEntry> = {}
+
   router.beforeResolve(async (to) => {
     console.log('[Route Injection] Resolving route injections...')
 
@@ -25,7 +34,13 @@ export function installRouteInjection(router: Router) {
       to.meta._injectedProps = reactive({})
     }
 
-    const resolvers: Record<string, () => Promise<unknown>> = {}
+    if (!to.meta._injectionState) {
+      to.meta._injectionState = reactive({})
+    }
+
+    const resolvers: Record<string, (options?: { silent?: boolean }) => Promise<unknown>> = {}
+    const activePropNames = new Set<string>()
+    const pendingResolvers: Array<() => Promise<void>> = []
 
     // Iterate through all matched route records (from parent to child)
     for (const record of to.matched) {
@@ -57,37 +72,93 @@ export function installRouteInjection(router: Router) {
           continue
         }
 
-        // Define the refresh logic for this specific prop
-        const resolveProp = async () => {
-          const resolver = cfg.resolve(paramValue)
-          let payload = await resolver.resolve()
-          if (typeof cfg.getter === 'function') {
-            payload = cfg.getter(payload)
-          }
+        activePropNames.add(propName)
+
+        // Initialize state for this prop
+        const state = to.meta._injectionState as Record<string, { loading: boolean; error: Error | null }>
+        if (!state[propName]) {
+          state[propName] = reactive({ loading: false, error: null })
+        }
 
-          // Updating the reactive object triggers the component re-render
-          ;(to.meta._injectedProps as any)[propName] = payload
-          return payload
+        // Define the refresh logic for this specific prop (always fetches fresh data)
+        const resolveProp = async (options?: { silent?: boolean }) => {
+          const propState = (to.meta._injectionState as Record<string, { loading: boolean; error: Error | null }>)[propName]!
+          if (!options?.silent) {
+            propState.loading = true
+          }
+          propState.error = null
+
+          try {
+            const resolver = cfg.resolve(paramValue)
+            let payload = await resolver.resolve()
+            if (typeof cfg.getter === 'function') {
+              payload = cfg.getter(payload)
+            }
+
+            // Update cache
+            cache[propName] = { paramValue, payload }
+
+            // Updating the reactive object triggers the component re-render
+            const injectedProps = to.meta._injectedProps as Record<string, unknown>
+            injectedProps[propName] = payload
+            return payload
+          } catch (e) {
+            propState.error = e instanceof Error ? e : new Error(String(e))
+            throw e
+          } finally {
+            propState.loading = false
+          }
         }
 
         resolvers[propName] = resolveProp
 
-        await resolveProp()
+        // Reuse cached value if the param hasn't changed (e.g. navigating between child routes)
+        const cached = cache[propName]
+        if (cached && cached.paramValue === paramValue) {
+          console.debug(`[Route Injection] Using cached value for prop "${propName}" (param "${cfg.from}" unchanged)`)
+          const injectedPropsCache = to.meta._injectedProps as Record<string, unknown>
+          injectedPropsCache[propName] = cached.payload
 
-        console.debug(`[Route Injection] Successfully resolved prop "${propName}" for route "${record.path}"`)
+          continue
+        }
+
+        // Set loading immediately and queue resolver (non-blocking)
+        const injectionState = to.meta._injectionState as Record<string, { loading: boolean; error: Error | null }>
+        injectionState[propName]!.loading = true
+        pendingResolvers.push(async () => {
+          try {
+            await resolveProp()
+          } catch (e) {
+            console.error(`[Route Injection] Failed to resolve prop "${propName}"`, e)
+          }
+        })
+
+        console.debug(`[Route Injection] Queued resolution for prop "${propName}" for route "${record.path}"`)
+      }
+    }
+
+    // Evict cache entries that are no longer part of the active route hierarchy
+    for (const key of Object.keys(cache)) {
+      if (!activePropNames.has(key)) {
+        delete cache[key]
       }
     }
 
     // Attach the resolvers and a global refresh helper to the route meta
     to.meta['_injectedResolvers'] = resolvers
-    to.meta['refresh'] = async (propName: string) => {
+    to.meta['refresh'] = async (propName: string, options?: { silent?: boolean }) => {
       if (resolvers[propName]) {
-        return await resolvers[propName]()
+        return await resolvers[propName](options)
       }
 
       console.warn(`[Route Injection] No resolver found for "${propName}"`)
 
       return undefined
     }
+
+    // Fire pending resolvers without blocking navigation
+    if (pendingResolvers.length > 0) {
+      Promise.all(pendingResolvers.map((fn) => fn()))
+    }
   })
 }

package/src/vue/router/routeResourceBinding/types.ts

@@ -1,3 +1,4 @@
+import { type Component } from 'vue'
 import { type RouteLocationNormalized } from 'vue-router'
 
 /**
@@ -42,7 +43,11 @@ declare module 'vue-router' {
   interface RouteMeta {
     _injectedProps?: Record<string, any>
     _injectedResolvers?: Record<string, () => Promise<any>>
-    refresh?: (propName: string) => Promise<any>
+    _injectionState?: Record<string, { loading: boolean; error: Error | null }>
+    _errorComponent?: Component
+    _loadingComponent?: Component
+    _lazy?: boolean
+    refresh?: (propName: string, options?: { silent?: boolean }) => Promise<any>
     inject?: Record<string, unknown>
   }
 }

package/src/vue/router/routeResourceBinding/useRouteResource.ts

@@ -1,14 +1,24 @@
+import { computed, type ComputedRef } from 'vue'
 import { useRoute } from 'vue-router'
 
-export function useRouteResource() {
+type InjectionState = Record<string, { loading: boolean; error: Error | null }>
+
+export function useRouteResource(propName: string) {
   const route = useRoute()
 
-  const refresh = async (propName: string) => {
-    return await route.meta.refresh?.(propName)
+  const refresh = async (options?: { silent?: boolean }) => {
+    return await route.meta.refresh?.(propName, options)
   }
 
-  // If emit is passed, we can wrap it or just provide a helper
-  // to be used like: onRefresh('product', () => ...)
-  // but the most direct way for you is:
-  return { refresh }
+  const isLoading: ComputedRef<boolean> = computed(() => {
+    const state = route.meta._injectionState as InjectionState | undefined
+    return state?.[propName]?.loading ?? false
+  })
+
+  const error: ComputedRef<Error | null> = computed(() => {
+    const state = route.meta._injectionState as InjectionState | undefined
+    return state?.[propName]?.error ?? null
+  })
+
+  return { refresh, isLoading, error }
 }

package/tests/service/requests/FormDataBody.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import { FormDataBody } from '../../../src/service/requests/bodies/FormDataBody'
+
+describe('FormDataBody', () => {
+  it('appends strings and files', () => {
+    const file = new File(['abc'], 'credentials.kdbx', { type: 'application/octet-stream' })
+
+    const body = new FormDataBody({
+      name: 'aerg',
+      type: 'kdbx',
+      password: 'aerg',
+      file,
+    })
+
+    const fd = body.getContent()
+
+    expect(fd.get('name')).toBe('aerg')
+    expect(fd.get('type')).toBe('kdbx')
+    expect(fd.get('password')).toBe('aerg')
+    expect(fd.get('file')).toBe(file)
+  })
+
+  it('encodes null as empty string (key present)', () => {
+    const body = new FormDataBody({
+      name: 'aerg',
+      file: null,
+    })
+
+    const fd = body.getContent()
+    expect(fd.get('name')).toBe('aerg')
+    expect(fd.get('file')).toBe('')
+  })
+
+  it('rejects undefined values (should not be silently dropped)', () => {
+    expect(
+      () =>
+        new FormDataBody({
+          missing: undefined,
+        } as any),
+    ).toThrow()
+  })
+
+  it('stringifies number/boolean values', () => {
+    const body = new FormDataBody({
+      count: 3,
+      enabled: false,
+    })
+
+    const fd = body.getContent()
+    expect(fd.get('count')).toBe('3')
+    expect(fd.get('enabled')).toBe('false')
+  })
+
+  it('supports arrays via bracket notation', () => {
+    const body = new FormDataBody({
+      tags: ['a', 'b'],
+    })
+
+    const fd = body.getContent()
+    expect(fd.get('tags[0]')).toBe('a')
+    expect(fd.get('tags[1]')).toBe('b')
+  })
+})