@blueprint-ts/core 1.0.0

package/src/vue/forms/PropertyAwareArray.ts

@@ -0,0 +1,78 @@
+/**
+ * Repräsentiert eine reaktive Property mit model.value Zugriff
+ */
+export interface PropertyAwareField<T> {
+  model: {
+    value: T
+  }
+  errors: any[]
+  suggestions: any[]
+  dirty: boolean
+}
+
+/**
+ * Wandelt ein reguläres Interface in ein property-aware Interface um
+ * Jedes Feld vom Typ T wird zu einem PropertyAwareField<T>
+ */
+export type PropertyAware<T> = {
+  [K in keyof T]: T[K] extends Array<infer U> ? Array<PropertyAware<U>> : PropertyAwareField<T[K]>
+}
+/**
+ * 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.
+ */
+export class PropertyAwareArray<T = any> extends Array<T> {
+  /**
+   * Creates a new PropertyAwareArray instance
+   */
+  public constructor(items: T[] = []) {
+    // Call Array constructor with array length
+    super()
+
+    // Add items to the array
+    if (items && items.length) {
+      items.forEach((item) => this.push(item))
+    }
+  }
+
+  /**
+   * Create a PropertyAwareArray from an existing array
+   */
+  public static override from<T>(arrayLike: ArrayLike<T>): PropertyAwareArray<T> {
+    return new PropertyAwareArray(Array.from(arrayLike))
+  }
+
+  /**
+   * Maps each element using the provided function
+   * Overridden to ensure the return type is PropertyAwareArray<U> rather than Array<U>
+   */
+  public override map<U>(callbackfn: (value: T, index: number, array: T[]) => U): PropertyAwareArray<U> {
+    return new PropertyAwareArray(super.map(callbackfn))
+  }
+
+  /**
+   * Filters elements using the provided function
+   * Overridden to ensure the return type is PropertyAwareArray<T> rather than Array<T>
+   */
+  public override filter(predicate: (value: T, index: number, array: T[]) => boolean): PropertyAwareArray<T> {
+    return new PropertyAwareArray(super.filter(predicate))
+  }
+
+  /**
+   * Returns a shallow copy of the array
+   * Overridden to ensure the return type is PropertyAwareArray<T> rather than Array<T>
+   */
+  public override slice(start?: number, end?: number): PropertyAwareArray<T> {
+    return new PropertyAwareArray(super.slice(start, end))
+  }
+
+  /**
+   * Combines two or more arrays
+   * Overridden to ensure the return type is PropertyAwareArray<T> rather than Array<T>
+   */
+  public override concat(...items: (T | ConcatArray<T>)[]): PropertyAwareArray<T> {
+    return new PropertyAwareArray(super.concat(...items))
+  }
+}

package/src/vue/forms/index.ts

@@ -0,0 +1,11 @@
+import { BaseForm, propertyAwareToRaw } from './BaseForm'
+import { type PersistedForm } from './types/PersistedForm'
+import { LocalStorageDriver } from '../../service/persistenceDrivers/LocalStorageDriver'
+import { NonPersistentDriver } from '../../service/persistenceDrivers/NonPersistentDriver'
+import { SessionStorageDriver } from '../../service/persistenceDrivers/SessionStorageDriver'
+import { type PersistenceDriver } from '../../service/persistenceDrivers/types/PersistenceDriver'
+import { PropertyAwareArray, type PropertyAwareField, type PropertyAware } from './PropertyAwareArray'
+
+export { BaseForm, propertyAwareToRaw, PropertyAwareArray, NonPersistentDriver, SessionStorageDriver, LocalStorageDriver }
+
+export type { PersistedForm, PersistenceDriver, PropertyAwareField, PropertyAware }

package/src/vue/forms/types/PersistedForm.ts

@@ -0,0 +1,6 @@
+export interface PersistedForm<FormBody> {
+  state: FormBody
+  original: FormBody
+  dirty: Record<keyof FormBody, boolean>
+  touched: Record<keyof FormBody, boolean>
+}

package/src/vue/forms/validation/ValidationMode.enum.ts

@@ -0,0 +1,14 @@
+export enum ValidationMode {
+  // Individual flags
+  NEVER = 0,
+  INSTANTLY = 1, // Validate as soon as form is initialized
+  ON_TOUCH = 2, // Validate when field is touched (focused/blurred)
+  ON_DIRTY = 4, // Validate when field value changes
+  ON_SUBMIT = 8, // Validate on form submit
+  ON_DEPENDENT_CHANGE = 16, // Validate when a field it depends on changes
+
+  // Common combinations
+  DEFAULT = ON_TOUCH | ON_DIRTY | ON_SUBMIT, // Validate when dirty or on submit
+  AGGRESSIVE = INSTANTLY | ON_TOUCH | ON_DIRTY | ON_SUBMIT, // Validate in all situations
+  PASSIVE = ON_SUBMIT // Only validate on submit
+}

package/src/vue/forms/validation/index.ts

@@ -0,0 +1,12 @@
+import { BaseRule } from './rules/BaseRule'
+import { ConfirmedRule } from './rules/ConfirmedRule'
+import { RequiredRule } from './rules/RequiredRule'
+import { UrlRule } from './rules/UrlRule'
+import { MinRule } from './rules/MinRule'
+import { ValidationMode } from './ValidationMode.enum'
+
+import { type BidirectionalRule } from './types/BidirectionalRule'
+
+export { BaseRule, ConfirmedRule, RequiredRule, UrlRule, MinRule, ValidationMode }
+
+export type { BidirectionalRule }

package/src/vue/forms/validation/rules/BaseRule.ts

@@ -0,0 +1,7 @@
+export abstract class BaseRule<FormBody extends object> {
+  public dependsOn: Array<keyof FormBody> = []
+
+  public abstract validate(value: unknown, state: FormBody): boolean
+
+  public abstract getMessage(): string
+}

package/src/vue/forms/validation/rules/ConfirmedRule.ts

@@ -0,0 +1,39 @@
+import { BaseRule } from './BaseRule'
+import { BidirectionalRule } from '../types/BidirectionalRule'
+
+export class ConfirmedRule<FormBody extends object> extends BaseRule<FormBody> implements BidirectionalRule {
+  protected message: string
+
+  public constructor(
+    protected confirmationField: keyof FormBody,
+    message?: string
+  ) {
+    super()
+
+    this.message = message || `Must match ${String(confirmationField)}`
+
+    // Add the confirmation field as a dependency
+    this.dependsOn = [confirmationField]
+  }
+
+  public validate(value: unknown, formState: FormBody): boolean {
+    // Only validate if both fields have values
+    const confirmationValue = formState[this.confirmationField]
+
+    // If either field is empty, don't show an error yet
+    if (!value || !confirmationValue) {
+      return true
+    }
+
+    return value === confirmationValue
+  }
+
+  public getMessage(): string {
+    return this.message
+  }
+
+  // Implement BidirectionalRule interface
+  public getBidirectionalFields(): string[] {
+    return [this.confirmationField as string]
+  }
+}

package/src/vue/forms/validation/rules/MinRule.ts

@@ -0,0 +1,61 @@
+import { BaseRule } from './BaseRule'
+
+export class MinRule<FormBody extends object> extends BaseRule<FormBody> {
+  /**
+   * Creates a new MinRule
+   * @param min The minimum value (length for strings, value for numbers, length for arrays)
+   * @param message The error message to display if validation fails
+   */
+  public constructor(
+    protected min: number,
+    protected message?: string
+  ) {
+    super()
+  }
+
+  /**
+   * Validates that the value meets the minimum requirement
+   * - For strings: checks if length is at least the specified minimum
+   * - For numbers: checks if value is at least the specified minimum
+   * - For arrays: checks if length is at least the specified minimum
+   * - For other types: always returns false
+   *
+   * @param value The value to validate
+   * @returns boolean indicating if validation passed
+   */
+  public validate(value: unknown): boolean {
+    // Null or undefined values should be handled by RequiredRule, not this rule
+    if (value === null || value === undefined) {
+      return true
+    }
+
+    // For strings, check the length
+    if (typeof value === 'string') {
+      return value.length >= this.min
+    }
+
+    // For numbers, check the value
+    if (typeof value === 'number') {
+      return value >= this.min
+    }
+
+    // For arrays, check the length
+    if (Array.isArray(value)) {
+      return value.length >= this.min
+    }
+
+    // For other types, validation fails
+    return false
+  }
+
+  /**
+   * Returns the error message for the validation
+   */
+  public getMessage(): string {
+    if (this.message) {
+      return this.message
+    }
+
+    return `This field must be at least ${this.min}`
+  }
+}

package/src/vue/forms/validation/rules/RequiredRule.ts

@@ -0,0 +1,19 @@
+import { BaseRule } from './BaseRule'
+
+export class RequiredRule<FormBody extends object> extends BaseRule<FormBody> {
+  public constructor(protected message: string = 'This field is required') {
+    super()
+  }
+
+  public validate(value: keyof FormBody): boolean {
+    if (value === null || value === undefined || value === '') {
+      return false
+    }
+
+    return true
+  }
+
+  public getMessage(): string {
+    return this.message
+  }
+}

package/src/vue/forms/validation/rules/UrlRule.ts

@@ -0,0 +1,24 @@
+import { BaseRule } from './BaseRule'
+
+export class UrlRule<FormBody extends object> extends BaseRule<FormBody> {
+  public constructor(protected message: string = 'Please enter a valid URL') {
+    super()
+  }
+
+  public validate(value: unknown): boolean {
+    if (!value || typeof value !== 'string') {
+      return false
+    }
+
+    try {
+      new URL(value)
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  public getMessage(): string {
+    return this.message
+  }
+}

package/src/vue/forms/validation/types/BidirectionalRule.ts

@@ -0,0 +1,11 @@
+/**
+ * Interface for rules that require bidirectional validation
+ * Rules implementing this interface will have their dependencies
+ * automatically set up bidirectionally
+ */
+export interface BidirectionalRule {
+  /**
+   * Returns the fields that should have bidirectional validation with the current field
+   */
+  getBidirectionalFields(): string[]
+}

package/src/vue/index.ts

@@ -0,0 +1,14 @@
+import useIsOpen from './composables/useIsOpen'
+import useModelWrapper from './composables/useModelWrapper'
+import useOnOpen from './composables/useOnOpen'
+import useIsOpenFromVar from './composables/useIsOpenFromVar'
+import useGlobalCheckbox from './composables/useGlobalCheckbox'
+import useIsEmpty from './composables/useIsEmpty'
+import useConfirmDialog from './composables/useConfirmDialog'
+
+import { type ConfirmDialogSeverity } from './composables/useConfirmDialog'
+import { type ConfirmDialogOptions } from './composables/useConfirmDialog'
+
+export { useIsOpen, useModelWrapper, useOnOpen, useIsOpenFromVar, useGlobalCheckbox, useIsEmpty, useConfirmDialog }
+
+export type { ConfirmDialogSeverity, ConfirmDialogOptions }

package/src/vue/requests/factories/VueRequestLoaderFactory.ts

@@ -0,0 +1,9 @@
+import { VueRequestLoader } from '../loaders/VueRequestLoader'
+import { type RequestLoaderContract } from '../../../service/requests/contracts/RequestLoaderContract'
+import { type Ref } from 'vue'
+
+export class VueRequestLoaderFactory {
+  public make(): RequestLoaderContract<Ref<boolean>> {
+    return new VueRequestLoader()
+  }
+}

package/src/vue/requests/index.ts

@@ -0,0 +1,5 @@
+import { VueRequestLoader } from './loaders/VueRequestLoader'
+import { VueRequestBatchLoader } from './loaders/VueRequestBatchLoader'
+import { VueRequestLoaderFactory } from './factories/VueRequestLoaderFactory'
+
+export { VueRequestLoader, VueRequestBatchLoader, VueRequestLoaderFactory }

package/src/vue/requests/loaders/VueRequestBatchLoader.ts

@@ -0,0 +1,30 @@
+import { type Ref, ref, computed } from 'vue'
+import { type RequestLoaderContract } from '../../../service/requests/contracts/RequestLoaderContract'
+
+export class VueRequestBatchLoader implements RequestLoaderContract<Ref<boolean>> {
+  private inFlight: Ref<number> = ref(0)
+  private completed: Ref<number> = ref(0)
+  private expected: number = 0
+
+  constructor(expectedRequests: number = 0) {
+    this.expected = expectedRequests
+  }
+
+  public startBatch(count: number) {
+    this.expected = count
+    this.completed.value = 0
+  }
+
+  public isLoading(): Ref<boolean> {
+    return computed(() => this.inFlight.value > 0 || (this.expected > 0 && this.completed.value < this.expected))
+  }
+
+  public setLoading(loading: boolean): void {
+    if (loading) {
+      this.inFlight.value++
+    } else {
+      this.inFlight.value = Math.max(0, this.inFlight.value - 1)
+      this.completed.value++
+    }
+  }
+}

package/src/vue/requests/loaders/VueRequestLoader.ts

@@ -0,0 +1,18 @@
+import { type Ref, ref } from 'vue'
+import { type RequestLoaderContract } from '../../../service/requests/contracts/RequestLoaderContract'
+
+export class VueRequestLoader implements RequestLoaderContract<Ref<boolean>> {
+  protected loading: Ref<boolean>
+
+  public constructor(initialLoading: boolean = false) {
+    this.loading = ref<boolean>(initialLoading)
+  }
+
+  isLoading(): Ref<boolean> {
+    return this.loading
+  }
+
+  setLoading(value: boolean): void {
+    this.loading.value = value
+  }
+}

package/src/vue/router/routeModelBinding/RouteModelRequestResolver.ts

@@ -0,0 +1,11 @@
+import { type DataRequest, type Resolver } from './types'
+
+export class RouteModelRequestResolver<T> implements Resolver<T> {
+  public constructor(private request: DataRequest<T>) {}
+
+  public async resolve(): Promise<T> {
+    const response = await this.request.send()
+
+    return response.getData()
+  }
+}

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

@@ -0,0 +1,31 @@
+import { type RouteRecordRaw } from 'vue-router'
+import { type InjectConfig } from './types'
+
+/**
+ * Type-safe route definition helper that ties:
+ * - component props type (Props)
+ * - inject config types (must resolve Props[K])
+ *
+ * Usage:
+ * export default defineRoute<{ product: ProductResource }>()({ ... })
+ */
+export function defineRoute<Props extends Record<string, unknown>>() {
+  return function <
+    T extends RouteRecordRaw & {
+      inject?: InjectConfig<Props>
+    }
+  >(route: T): RouteRecordRaw {
+    const originalProps = route.props
+
+    route.props = (to) => {
+      const baseProps = typeof originalProps === 'function' ? originalProps(to) : originalProps === true ? to.params : (originalProps ?? {})
+
+      return {
+        ...(baseProps as Record<string, unknown>),
+        ...((to.meta._injectedProps as Record<string, unknown>) ?? {})
+      }
+    }
+
+    return route
+  }
+}

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

@@ -0,0 +1,8 @@
+import { defineRoute } from './defineRoute'
+import { installRouteInjection } from './installRouteInjection'
+import { RouteModelRequestResolver } from './RouteModelRequestResolver'
+import type { DataRequest, InjectConfig, Resolver } from './types'
+
+export { defineRoute, installRouteInjection, RouteModelRequestResolver }
+
+export type { DataRequest, InjectConfig, Resolver }

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

@@ -0,0 +1,73 @@
+import { type Router } from 'vue-router'
+
+type InjectRuntimeConfig = {
+  from: string
+  resolve: (param: string) => { resolve(): Promise<unknown> }
+  getter: (payload: unknown) => 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)
+ *
+ * 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) {
+  router.beforeResolve(async (to) => {
+    console.log('[Route Injection] Resolving route injections...')
+
+    const resolvedProps: Record<string, unknown> = {}
+
+    // Iterate through all matched route records (from parent to child)
+    for (const record of to.matched) {
+      console.debug(`[Route Injection] Processing route "${record.path}"`)
+
+      // Access the custom 'inject' property directly from the record
+      const inject = record.meta.inject as Record<string, InjectRuntimeConfig> | undefined
+
+      if (!inject) {
+        console.debug(`[Route Injection] No injections found for route "${record.path}"`)
+
+        continue
+      }
+
+      for (const [propName, cfg] of Object.entries(inject)) {
+        const rawParam = to.params[cfg.from]
+
+        if (rawParam === undefined || rawParam === null) {
+          console.warn(`[Route Injection] Param "${cfg.from}" not found for prop "${propName}"`)
+
+          continue
+        }
+
+        const paramValue = Array.isArray(rawParam) ? rawParam[0] : String(rawParam)
+
+        if (paramValue === undefined || paramValue === null) {
+          console.warn(`[Route Injection] Param value "${cfg.from}" not found for prop "${propName}"`)
+
+          continue
+        }
+
+        const resolver = cfg.resolve(paramValue)
+
+        let payload = await resolver.resolve()
+
+        if (typeof cfg.getter === 'function') {
+          payload = cfg.getter(payload)
+        }
+
+        resolvedProps[propName] = payload
+
+        console.debug(
+          `[Route Injection] Successfully resolved prop "${propName}" for route "${record.path}": ${JSON.stringify(resolvedProps[propName])}`
+        )
+      }
+    }
+
+    to.meta._injectedProps = resolvedProps
+  })
+}

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

@@ -0,0 +1,46 @@
+import { type RouteLocationNormalized } from 'vue-router'
+
+/**
+ * Generic resolver interface.
+ */
+export interface Resolver<T> {
+  resolve(): Promise<T>
+}
+
+/**
+ * A minimal "request" contract that matches your request classes:
+ * new ProductShowRequest(id).send() -> { getData(): T }
+ */
+export interface DataRequest<T> {
+  send(): Promise<{ getData(): T }>
+}
+
+/**
+ * Inject config that is type-safe against component props.
+ *
+ * Props[K] is the required resolved type for prop K.
+ */
+export type InjectConfig<Props extends Record<string, unknown>> = {
+  [K in keyof Props]?: {
+    /**
+     * Route param name, e.g. "productId"
+     */
+    from: keyof RouteLocationNormalized['params'] | string
+
+    /**
+     * Create a resolver from the param value.
+     * Param value is treated as string (most common in routes).
+     */
+    resolve: (param: string) => Resolver<Props[K]>
+  }
+}
+
+/**
+ * Extended route meta to store injected props at runtime.
+ */
+declare module 'vue-router' {
+  interface RouteMeta {
+    _injectedProps?: Record<string, unknown>
+    inject?: Record<string, unknown>
+  }
+}