@quazardous/qdadm 1.21.0 → 2.0.0

package/README.md

@@ -31,7 +31,7 @@ import { SecurityChecker, PermissionMatcher, PermissionRegistry } from '@quazard
 import { PersistableRoleProvider, createLocalStorageRolesProvider } from '@quazardous/qdadm/security'
 
 // Composables
-import { useForm, useBareForm, useListPage } from '@quazardous/qdadm/composables'
+import { useBareForm, useListPage } from '@quazardous/qdadm/composables'
 
 // Components
 import { ListPage, PageLayout, AppLayout, FormField, FormActions } from '@quazardous/qdadm/components'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quazardous/qdadm",
-  "version": "1.21.0",
+  "version": "2.0.0",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",

package/src/components/editors/VanillaJsonEditor.vue

@@ -6,10 +6,17 @@
  *
  * Usage:
  * <VanillaJsonEditor v-model="jsonData" mode="tree" />
+ *
+ * Inline JSON Schema validation (errors highlighted live in the editor):
+ * <VanillaJsonEditor v-model="jsonData" :schema="mySchema" />
+ *
+ * Or a raw validator for advanced cases (takes precedence over `schema`):
+ * <VanillaJsonEditor v-model="jsonData" :validator="myValidator" />
  */
 
 import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { JSONEditor, type Content, type ContentErrors, type OnChangeStatus, type Mode } from 'vanilla-jsoneditor'
+import { buildJsonValidator, type Validator, type JSONSchema, type JsonValidatorOptions } from './jsonValidator'
 
 type JsonValue = Record<string, unknown> | unknown[] | string | null
 
@@ -21,6 +28,14 @@ interface Props {
   mainMenuBar?: boolean
   navigationBar?: boolean
   statusBar?: boolean
+  /** JSON Schema for inline Ajv validation (errors highlighted in the editor). */
+  schema?: JSONSchema
+  /** Raw validator function — takes precedence over `schema`. */
+  validator?: Validator
+  /** Optional `$ref` definitions passed through to the Ajv validator. */
+  schemaDefinitions?: JsonValidatorOptions['schemaDefinitions']
+  /** Optional Ajv options passed through to the Ajv validator. */
+  ajvOptions?: JsonValidatorOptions['ajvOptions']
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -30,9 +45,23 @@ const props = withDefaults(defineProps<Props>(), {
   readOnly: false,
   mainMenuBar: true,
   navigationBar: true,
-  statusBar: true
+  statusBar: true,
+  schema: undefined,
+  validator: undefined,
+  schemaDefinitions: undefined,
+  ajvOptions: undefined
 })
 
+// Resolve the effective validator from props (raw validator > schema > none).
+function resolveValidator(): Validator | undefined {
+  return buildJsonValidator({
+    validator: props.validator,
+    schema: props.schema,
+    schemaDefinitions: props.schemaDefinitions,
+    ajvOptions: props.ajvOptions
+  })
+}
+
 const emit = defineEmits<{
   'update:modelValue': [value: JsonValue]
   'change': [value: JsonValue]
@@ -76,6 +105,7 @@ onMounted(() => {
       mainMenuBar: props.mainMenuBar,
       navigationBar: props.navigationBar,
       statusBar: props.statusBar,
+      validator: resolveValidator(),
       onChange: (updatedContent: Content, _previousContent: Content, { contentErrors }: OnChangeStatus) => {
         // Skip if this change came from a programmatic prop update
         if (updatingFromProp.value) return
@@ -144,6 +174,17 @@ watch(() => props.readOnly, (newReadOnly: boolean) => {
   }
 })
 
+// Watch validator/schema changes — rebuild and re-apply so edits re-validate live
+watch(
+  () => [props.validator, props.schema, props.schemaDefinitions, props.ajvOptions],
+  () => {
+    if (editor) {
+      editor.updateProps({ validator: resolveValidator() })
+    }
+  },
+  { deep: true }
+)
+
 // Cleanup
 onUnmounted(() => {
   if (editor) {

package/src/components/editors/jsonValidator.ts

@@ -0,0 +1,44 @@
+/**
+ * jsonValidator - build a vanilla-jsoneditor `Validator` from wrapper props.
+ *
+ * Pure helper extracted from VanillaJsonEditor so the resolution logic
+ * (raw validator vs JSON Schema vs none) is unit-testable without mounting the
+ * Svelte editor. See qdadm #1050.
+ */
+import {
+  createAjvValidator,
+  type Validator,
+  type JSONSchema,
+  type AjvValidatorOptions,
+} from 'vanilla-jsoneditor'
+
+export type { Validator, JSONSchema }
+
+export interface JsonValidatorOptions {
+  /** Raw validator function — takes precedence over `schema` when both are set. */
+  validator?: Validator
+  /** JSON Schema; compiled to a validator via Ajv (bundled in vanilla-jsoneditor). */
+  schema?: JSONSchema
+  /** Optional `$ref` definitions passed through to `createAjvValidator`. */
+  schemaDefinitions?: AjvValidatorOptions['schemaDefinitions']
+  /** Optional Ajv options passed through to `createAjvValidator`. */
+  ajvOptions?: AjvValidatorOptions['ajvOptions']
+}
+
+/**
+ * Resolve the effective validator:
+ * - an explicit `validator` wins;
+ * - otherwise a `schema` is compiled with `createAjvValidator`;
+ * - otherwise `undefined` (no validation — the wrapper's default behavior).
+ */
+export function buildJsonValidator(options: JsonValidatorOptions): Validator | undefined {
+  if (options.validator) return options.validator
+  if (options.schema) {
+    return createAjvValidator({
+      schema: options.schema,
+      schemaDefinitions: options.schemaDefinitions,
+      ajvOptions: options.ajvOptions,
+    })
+  }
+  return undefined
+}

package/src/components/index.ts

@@ -27,8 +27,6 @@ export { default as FormPage } from './edit/FormPage.vue'
 export { default as FormField } from './edit/FormField.vue'
 export { default as FormInput } from './edit/FormInput.vue'
 export { default as FormActions } from './edit/FormActions.vue'
-export { default as FormTabs } from './edit/FormTabs.vue' // Deprecated: use FieldGroups with layout="tabs"
-export { default as FormTab } from './edit/FormTab.vue' // Deprecated: use FieldGroups with layout="tabs"
 export { default as LookupField } from './edit/LookupField.vue'
 export { default as LookupPickerDialog } from './edit/LookupPickerDialog.vue'
 
@@ -41,7 +39,6 @@ export { default as ParentCard } from './show/ParentCard.vue'
 // Lists
 export { default as ListPage } from './lists/ListPage.vue'
 export { default as ActionButtons } from './lists/ActionButtons.vue'
-export { default as ActionColumn } from './lists/ActionColumn.vue'
 export { default as FilterBar } from './lists/FilterBar.vue'
 
 // Editors (vanilla-jsoneditor free)

package/src/components/layout/AppLayout.vue

@@ -50,7 +50,7 @@ interface UserData {
 const features = inject<FeaturesConfig>('qdadmFeatures', { poweredBy: true, breadcrumb: true })
 const homeRoute = inject<string>('qdadmHomeRoute', 'home')
 
-// Guard dialog from shared store (registered by useBareForm/useForm when a form is active)
+// Guard dialog from shared store (registered by useBareForm/useEntityItemFormPage when a form is active)
 const guardDialog = useGuardDialog()
 
 const router = useRouter()
@@ -238,7 +238,7 @@ watch(() => route.fullPath, () => {
 })
 
 // Navigation context (breadcrumb + navlinks from route config)
-// Entity data comes from activeStack (populated by useEntityItemPage/useForm)
+// Entity data comes from activeStack (populated by useEntityItemPage/useEntityItemFormPage)
 const { breadcrumb: defaultBreadcrumb, navlinks: defaultNavlinks } = useNavContext()
 
 // Allow child pages to override breadcrumb/navlinks via provide/inject

package/src/components/layout/BaseLayout.vue

@@ -50,7 +50,7 @@ import DefaultBreadcrumb from './defaults/DefaultBreadcrumb.vue'
 const slots = useSlots()
 const hasMainSlot: boolean = !!slots.main
 
-// Guard dialog from shared store (registered by useBareForm/useForm when a form is active)
+// Guard dialog from shared store (registered by useBareForm/useEntityItemFormPage when a form is active)
 const guardDialog = useGuardDialog()
 
 // Provide breadcrumb/navlinks override mechanism for child pages

package/src/components/layout/PageHeader.vue

@@ -47,7 +47,7 @@ const props = withDefaults(defineProps<Props>(), {
   badges: () => []
 })
 
-// Auto-injected title from useForm (if available)
+// Auto-injected title from the form composables (if available)
 const injectedTitleParts = inject<Ref<TitleParts | null> | null>('qdadmPageTitleParts', null)
 
 // Use props first, then injected, then fallback

package/src/components/show/ShowDisplay.vue

@@ -28,6 +28,7 @@
 import { computed, type PropType } from 'vue'
 import { RouterLink, type RouteLocationRaw } from 'vue-router'
 import Tag from 'primevue/tag'
+import { formatDate, formatNumber, formatCurrency } from '../../utils/formatters'
 
 type DisplayType =
   | 'text'
@@ -101,13 +102,12 @@ const textValue = computed(() => {
   return String(props.value)
 })
 
-// Format number value
+// Format number value (browser locale by default — utils/formatters policy)
 const numberValue = computed(() => {
   if (isEmpty.value) return '-'
   const num = Number(props.value)
   if (isNaN(num)) return String(props.value)
-  const locale = props.field.locale || 'en-US'
-  return new Intl.NumberFormat(locale).format(num)
+  return formatNumber(num, {}, props.field.locale)
 })
 
 // Format currency value
@@ -115,9 +115,7 @@ const currencyValue = computed(() => {
   if (isEmpty.value) return '-'
   const num = Number(props.value)
   if (isNaN(num)) return String(props.value)
-  const locale = props.field.locale || 'en-US'
-  const currency = props.field.currencyCode || 'USD'
-  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(num)
+  return formatCurrency(num, props.field.currencyCode || 'USD', props.field.locale)
 })
 
 // Format boolean value
@@ -143,9 +141,8 @@ const dateValue = computed(() => {
   const v = props.value as unknown
   const date = (typeof v === 'object' && v instanceof Date) ? v : new Date(String(v))
   if (isNaN(date.getTime())) return String(props.value)
-  const locale = props.field.locale || 'en-US'
   const format = props.field.dateFormat || 'short'
-  return new Intl.DateTimeFormat(locale, { dateStyle: format as 'short' | 'medium' | 'long' | 'full' }).format(date)
+  return formatDate(date, { dateStyle: format as 'short' | 'medium' | 'long' | 'full' }, props.field.locale)
 })
 
 // Format datetime value
@@ -154,8 +151,7 @@ const datetimeValue = computed(() => {
   const v = props.value as unknown
   const date = (typeof v === 'object' && v instanceof Date) ? v : new Date(String(v))
   if (isNaN(date.getTime())) return String(props.value)
-  const locale = props.field.locale || 'en-US'
-  return new Intl.DateTimeFormat(locale, { dateStyle: 'short', timeStyle: 'short' }).format(date)
+  return formatDate(date, { dateStyle: 'short', timeStyle: 'short' }, props.field.locale)
 })
 
 // Format select value (lookup label from options)

package/src/composables/index.ts

@@ -15,12 +15,6 @@ export {
   type SemanticBreadcrumbItem,
 } from './useSemanticBreadcrumb'
 export { useDirtyState, type UseDirtyStateReturn } from './useDirtyState'
-export {
-  useForm,
-  type UseFormOptions,
-  type UseFormReturn,
-  type FormAlterConfig,
-} from './useForm'
 export {
   useEntityItemFormPage,
   useEntityItemFormPage as useFormPageBuilder,
@@ -132,7 +126,6 @@ export {
   type UseUserImpersonatorReturn,
   type UserRecord,
 } from './useUserImpersonator'
-export { useCurrentEntity, type UseCurrentEntityReturn } from './useCurrentEntity'
 export {
   useOptionsLookup,
   type UseOptionsLookupConfig,

package/src/composables/useListPage.ts

@@ -35,6 +35,7 @@ import { useEntityItemPage, type ParentConfig, type UseEntityItemPageReturn } fr
 import { useActiveStack } from '../chain/useActiveStack.js'
 import { FilterQuery } from '../query/FilterQuery'
 import { useI18n } from '../i18n/useI18n'
+import { formatDateOnly } from '../utils/formatters'
 
 // Import types from dedicated types file
 import type {
@@ -1307,18 +1308,12 @@ export function useListPage<T = unknown>(config: UseListPageOptions<T>): UseList
   })
 
   // ============ UTILITIES ============
+  // Browser-locale by default (unified policy — see utils/formatters).
   function formatDate(
     dateStr: string | null | undefined,
     options: Intl.DateTimeFormatOptions = {}
   ): string {
-    if (!dateStr) return '-'
-    const defaultOptions: Intl.DateTimeFormatOptions = {
-      day: '2-digit',
-      month: '2-digit',
-      year: 'numeric',
-      ...options,
-    }
-    return new Date(dateStr).toLocaleDateString('fr-FR', defaultOptions)
+    return formatDateOnly(dateStr, options)
   }
 
   // ============ STANDARD ACTIONS ============

package/src/composables/useNavContext.ts

@@ -2,7 +2,7 @@
  * useNavContext - Route-aware navigation context for breadcrumb and navlinks
  *
  * Uses semantic breadcrumb as the source of truth for navigation structure.
- * Entity data comes from activeStack (set by useEntityItemPage/useForm).
+ * Entity data comes from activeStack (set by useEntityItemPage/useEntityItemFormPage).
  *
  * Semantic breadcrumb kinds:
  *   - entity-list: Entity collection (e.g., /books)

package/src/composables/usePageTitle.ts

@@ -2,7 +2,7 @@
  * usePageTitle - Provide custom page title for PageHeader
  *
  * Use this composable in custom pages to set the title displayed in PageHeader.
- * For standard CRUD pages, useForm handles this automatically.
+ * For standard CRUD pages, useEntityItemFormPage handles this automatically.
  *
  * Usage:
  * ```ts
@@ -77,7 +77,7 @@ export function usePageTitle(
     }
   }
 
-  // Provide to PageHeader via same key as useForm
+  // Provide to PageHeader via same key as the form composables
   provide('qdadmPageTitleParts', titleParts)
 
   return { titleParts, setTitle }

package/src/entity/EntityManager.crud.ts

@@ -137,7 +137,7 @@ export function applyCrudMethods(EntityManagerClass: { prototype: any }): void {
       const apiResponse = (await storage.request('GET', endpoint, {
         params: requestParams,
         context,
-      })) as { data?: unknown }
+      })) as { data?: unknown; total?: number; pagination?: { total?: number } }
       // Normalize response
       const data = apiResponse.data ?? apiResponse
       const dataObj = data as {
@@ -150,9 +150,14 @@ export function applyCrudMethods(EntityManagerClass: { prototype: any }): void {
         items: Array.isArray(data)
           ? (data as any[])
           : dataObj.items || dataObj.data || [],
+        // Wrapper shapes like { data: [...], pagination: { total } } or
+        // { data: [...], total } carry the total on apiResponse, not on the
+        // unwrapped array — read both levels before falling back to page length.
         total:
           dataObj.total ??
           dataObj.pagination?.total ??
+          apiResponse.total ??
+          apiResponse.pagination?.total ??
           (Array.isArray(data) ? (data as any[]).length : 0),
       }
     } else {

package/src/entity/storage/ApiStorage.ts

@@ -57,11 +57,6 @@ export class ApiStorage<T extends EntityRecord = EntityRecord> extends IStorage<
     supportsCaching: true,
   }
 
-  /** @deprecated Use static ApiStorage.capabilities.supportsCaching instead */
-  get supportsCaching(): boolean {
-    return ApiStorage.capabilities.supportsCaching
-  }
-
   readonly endpoint: string
   readonly responseItemsKey: string
   readonly responseTotalKey: string

package/src/entity/storage/LocalStorage.ts

@@ -27,11 +27,6 @@ export class LocalStorage<T extends EntityRecord = EntityRecord> extends IStorag
     supportsCaching: false,
   }
 
-  /** @deprecated Use static LocalStorage.capabilities.supportsCaching instead */
-  get supportsCaching(): boolean {
-    return LocalStorage.capabilities.supportsCaching
-  }
-
   readonly key: string
   readonly idField: string
   readonly generateId: () => string

package/src/entity/storage/MemoryStorage.ts

@@ -38,11 +38,6 @@ export class MemoryStorage<T extends EntityRecord = EntityRecord> extends IStora
     supportsCaching: false,
   }
 
-  /** @deprecated Use static MemoryStorage.capabilities.supportsCaching instead */
-  get supportsCaching(): boolean {
-    return MemoryStorage.capabilities.supportsCaching
-  }
-
   readonly idField: string
   readonly generateId: () => string
   protected _data: Map<string, T>

package/src/entity/storage/MockApiStorage.ts

@@ -35,11 +35,6 @@ export class MockApiStorage<T extends EntityRecord = EntityRecord> extends IStor
     supportsCaching: false,
   }
 
-  /** @deprecated Use static MockApiStorage.capabilities.supportsCaching instead */
-  get supportsCaching(): boolean {
-    return MockApiStorage.capabilities.supportsCaching
-  }
-
   /**
    * Instance capabilities getter.
    * Merges static capabilities with instance-specific ones like requiresAuth.

package/src/entity/storage/SdkStorage.ts

@@ -91,11 +91,6 @@ export class SdkStorage<T extends EntityRecord = EntityRecord> extends IStorage<
     supportsCaching: true,
   }
 
-  /** @deprecated Use SdkStorage.capabilities.supportsCaching instead */
-  get supportsCaching(): boolean {
-    return SdkStorage.capabilities.supportsCaching
-  }
-
   readonly clientSidePagination: boolean
 
   protected _sdk: SdkInstance | null

package/src/index.ts

@@ -166,12 +166,6 @@ export {
   type SemanticBreadcrumbItem,
 } from './composables/useSemanticBreadcrumb'
 export { useDirtyState, type UseDirtyStateReturn } from './composables/useDirtyState'
-export {
-  useForm,
-  type UseFormOptions,
-  type UseFormReturn,
-  type FormAlterConfig,
-} from './composables/useForm'
 export {
   useEntityItemFormPage,
   useEntityItemFormPage as useFormPageBuilder,
@@ -292,7 +286,6 @@ export {
   type UseUserImpersonatorReturn,
   type UserRecord,
 } from './composables/useUserImpersonator'
-export { useCurrentEntity, type UseCurrentEntityReturn } from './composables/useCurrentEntity'
 export {
   useOptionsLookup,
   type UseOptionsLookupConfig,

package/src/utils/formatters.ts

@@ -16,22 +16,27 @@
  * Format a date string to localized date+time
  * Default format: toLocaleString() (e.g., "20/12/2025, 14:30:00")
  *
+ * The locale defaults to the browser locale everywhere in qdadm — pass
+ * `locale` only for an explicit per-field override.
+ *
  * @param dateStr - ISO date string or Date object
  * @param options - Intl.DateTimeFormat options
+ * @param locale - Explicit locale override (default: browser locale)
  * @returns Formatted date string or '-' if empty
  */
 export function formatDate(
   dateStr: string | Date | null | undefined,
-  options: Intl.DateTimeFormatOptions = {}
+  options: Intl.DateTimeFormatOptions = {},
+  locale?: string
 ): string {
   if (!dateStr) return '-'
   const date = new Date(dateStr)
   if (isNaN(date.getTime())) return '-'
 
   if (Object.keys(options).length === 0) {
-    return date.toLocaleString()
+    return date.toLocaleString(locale)
   }
-  return date.toLocaleString(undefined, options)
+  return date.toLocaleString(locale, options)
 }
 
 /**
@@ -61,15 +66,23 @@ export function formatDateTimeShort(dateStr: string | Date | null | undefined):
 
 /**
  * Format to date only (20/12/2025)
+ *
+ * @param options - Intl.DateTimeFormat overrides merged over the defaults
+ * @param locale - Explicit locale override (default: browser locale)
  */
-export function formatDateOnly(dateStr: string | Date | null | undefined): string {
+export function formatDateOnly(
+  dateStr: string | Date | null | undefined,
+  options: Intl.DateTimeFormatOptions = {},
+  locale?: string
+): string {
   if (!dateStr) return '-'
   const date = new Date(dateStr)
   if (isNaN(date.getTime())) return '-'
-  return date.toLocaleDateString(undefined, {
+  return date.toLocaleDateString(locale, {
     year: 'numeric',
     month: '2-digit',
     day: '2-digit',
+    ...options,
   })
 }
 
@@ -142,13 +155,31 @@ export function formatDurationBetween(
 
 /**
  * Format a number with locale-specific separators
+ *
+ * @param locale - Explicit locale override (default: browser locale)
  */
 export function formatNumber(
   value: number | null | undefined,
-  options: Intl.NumberFormatOptions = {}
+  options: Intl.NumberFormatOptions = {},
+  locale?: string
+): string {
+  if (value === null || value === undefined) return '-'
+  return value.toLocaleString(locale, options)
+}
+
+/**
+ * Format a currency amount (e.g., "$1,234.56")
+ *
+ * @param currencyCode - ISO 4217 code (default 'USD')
+ * @param locale - Explicit locale override (default: browser locale)
+ */
+export function formatCurrency(
+  value: number | null | undefined,
+  currencyCode = 'USD',
+  locale?: string
 ): string {
   if (value === null || value === undefined) return '-'
-  return value.toLocaleString(undefined, options)
+  return new Intl.NumberFormat(locale, { style: 'currency', currency: currencyCode }).format(value)
 }
 
 /**

package/src/utils/index.ts

@@ -13,6 +13,7 @@ export {
   formatDuration,
   formatDurationBetween,
   formatNumber,
+  formatCurrency,
   formatBytes,
   formatPercent,
 } from './formatters'