@narrative.io/jsonforms-provider-protocols 3.0.0-beta.2 → 3.0.0-beta.4

package/src/vue/composables/useDerive.ts

@@ -1,4 +1,11 @@
-import { computed, watch, unref, inject, type Ref, type ComputedRef } from "vue";
+import {
+  computed,
+  watch,
+  unref,
+  inject,
+  type Ref,
+  type ComputedRef,
+} from "vue";
 import { type ControlElement } from "@jsonforms/core";
 import { useDataLayer } from "./useDataLayer";
 
@@ -14,7 +21,11 @@ interface DeriveOptions {
   data?: Ref<unknown> | ComputedRef<unknown>;
 }
 
-export function useDerive({ control, handleChange, data: dataOverride }: DeriveOptions) {
+export function useDerive({
+  control,
+  handleChange,
+  data: dataOverride,
+}: DeriveOptions) {
   // Get the root form data from JSONForms context
   const injectedFormData = inject<{ value: unknown }>("formData", {
     value: {},
@@ -50,7 +61,9 @@ export function useDerive({ control, handleChange, data: dataOverride }: DeriveO
           data,
           extData,
         );
-        const compareData = dataOverride ? unref(dataOverride) : control.value.data;
+        const compareData = dataOverride
+          ? unref(dataOverride)
+          : control.value.data;
         if (derivedValue !== compareData) {
           handleChange(control.value.path, derivedValue);
         }

package/src/vue/composables/useDirtyValidation.ts

@@ -1,10 +1,15 @@
-import { ref, computed, type Ref } from "vue";
+import { ref, computed, type Ref, type ComputedRef } from "vue";
 
-export function useDirtyValidation(control: Ref<{ errors: string }>) {
+export function useDirtyValidation(
+  control: Ref<{ errors: string }>,
+  errorsOverride?: Ref<string> | ComputedRef<string>,
+) {
   const hasInteracted = ref(false);
 
   const showErrors = computed(
-    () => hasInteracted.value && !!control.value.errors,
+    () =>
+      hasInteracted.value &&
+      !!(errorsOverride ? errorsOverride.value : control.value.errors),
   );
 
   const markDirty = () => {

package/src/vue/composables/useProjection.ts

@@ -1,4 +1,4 @@
-import { computed, type ComputedRef, type Ref } from "vue";
+import { computed, inject, type ComputedRef, type Ref } from "vue";
 import {
   getProjectedValue,
   setProjectedValue,
@@ -8,11 +8,68 @@ import {
 interface ProjectionControl {
   data: unknown;
   path: string;
+  errors: string;
+  label?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   schema: Record<string, any>;
   uischema: { options?: { projection?: string; [key: string]: unknown } };
 }
 
+// Minimal AJV ErrorObject shape for filtering
+interface ErrorLike {
+  instancePath?: string;
+  keyword?: string;
+  message?: string;
+  params?: { missingProperty?: string };
+}
+
+/**
+ * Resolve the display label for a control.
+ * Priority: uischema options.label → schemaTitle (projected sub-schema) → control.label.
+ */
+function resolveLabel(ctrl: ProjectionControl, schemaTitle?: string): string {
+  return (
+    (ctrl.uischema?.options?.label as string) ?? schemaTitle ?? ctrl.label ?? ""
+  );
+}
+
+/**
+ * Normalize AJV error message fragments into user-friendly text.
+ * e.g. "is a required property" → "is required"
+ */
+function normalizeErrors(errors: string): string {
+  if (!errors) return errors;
+  return errors
+    .replace(/is a required property/g, "is required")
+    .replace(/must have required property '[^']*'/g, "is required");
+}
+
+/**
+ * Prefix each error message line with the field label so that AJV fragments
+ * like "is required" become "Name is required".
+ */
+function prefixErrors(label: string, errors: string): string {
+  if (!label || !errors) return errors;
+  return errors
+    .split("\n")
+    .map((line) => `${label} ${line}`)
+    .join("\n");
+}
+
+/**
+ * Convert an AJV ErrorObject's instancePath to a dot-separated control path.
+ * Replicates the logic from @jsonforms/core getControlPath.
+ */
+function getErrorPath(error: ErrorLike): string {
+  let p = (error.instancePath || "").replace(/\//g, ".").replace(/^\./, "");
+  if (error.keyword === "required" && error.params?.missingProperty) {
+    p = p
+      ? p + "." + error.params.missingProperty
+      : error.params.missingProperty;
+  }
+  return p;
+}
+
 export interface ProjectionResult {
   /** The value at the projected path (for rendering) */
   projectedData: ComputedRef<unknown>;
@@ -23,6 +80,10 @@ export interface ProjectionResult {
   handleProjectedChange: (path: string, value: unknown) => void;
   /** Whether projection is active */
   hasProjection: boolean;
+  /** Resolved display label (options.label → projected schema title → control.label) */
+  projectedLabel: ComputedRef<string>;
+  /** Error string combining base-path and projected sub-path errors */
+  projectedErrors: ComputedRef<string>;
 }
 
 /**
@@ -44,14 +105,32 @@ export function useProjection(
     | undefined;
 
   if (!projection) {
+    const label = computed(() => resolveLabel(control.value));
     return {
       projectedData: computed(() => control.value.data),
       projectedSchema: computed(() => control.value.schema),
       handleProjectedChange: handleChange,
       hasProjection: false,
+      projectedLabel: label,
+      projectedErrors: computed(() =>
+        prefixErrors(
+          label.value.replace(/\*$/, "").trim(),
+          normalizeErrors(control.value.errors),
+        ),
+      ),
     };
   }
 
+  // Inject JSONForms state to access raw AJV errors for projected sub-paths.
+  // control.errors only contains errors at the exact control path (e.g. "data_rates"),
+  // but projected fields need errors at the full path (e.g. "data_rates.0.video_rate_usd").
+  const jsonforms = inject<{ core?: { errors?: ErrorLike[] } } | null>(
+    "jsonforms",
+    null,
+  );
+
+  const fullProjectedPath = control.value.path + "." + projection;
+
   const projectedData = computed(() =>
     getProjectedValue(control.value.data, projection),
   );
@@ -60,6 +139,32 @@ export function useProjection(
     getProjectedSchema(control.value.schema, projection),
   );
 
+  const label = computed(() =>
+    resolveLabel(control.value, projectedSchema.value?.title),
+  );
+
+  const projectedErrors = computed(() => {
+    const baseErrors = normalizeErrors(control.value.errors || "");
+
+    const rawErrors = jsonforms?.core?.errors ?? [];
+    const matching = rawErrors.filter(
+      (err) => getErrorPath(err) === fullProjectedPath,
+    );
+
+    let errStr: string;
+    if (matching.length === 0) {
+      errStr = baseErrors;
+    } else {
+      const projMsg = matching
+        .map((e) => (e.keyword === "required" ? "is required" : e.message))
+        .filter(Boolean)
+        .join("\n");
+      errStr = [baseErrors, projMsg].filter(Boolean).join("\n");
+    }
+
+    return prefixErrors(label.value.replace(/\*$/, "").trim(), errStr);
+  });
+
   const handleProjectedChange = (path: string, value: unknown) => {
     const fullValue = setProjectedValue(control.value.data, projection, value);
     handleChange(path, fullValue);
@@ -70,5 +175,7 @@ export function useProjection(
     projectedSchema,
     handleProjectedChange,
     hasProjection: true,
+    projectedLabel: label,
+    projectedErrors,
   };
 }

package/src/vue/index.ts

@@ -22,8 +22,11 @@ const isIntegerScope = (uischema: unknown, schema: unknown) => {
   const ui = uischema as { type?: string; scope?: string };
   if (ui?.type !== "Control" || !ui?.scope) return false;
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const propertySchema = resolveScopeSchema(ui.scope, schema as Record<string, any>);
+  const propertySchema = resolveScopeSchema(
+    ui.scope,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    schema as Record<string, any>,
+  );
   return propertySchema?.type === "integer";
 };
 
@@ -53,8 +56,11 @@ const isArrayControl = (uischema: UISchemaElement, schema: unknown) => {
     return false;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const propertySchema = resolveScopeSchema(controlSchema.scope, schema as Record<string, any>);
+  const propertySchema = resolveScopeSchema(
+    controlSchema.scope,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    schema as Record<string, any>,
+  );
   return propertySchema?.type === "array";
 };
 

package/src/vue/primevue/JfBoolean.vue

@@ -49,10 +49,15 @@ import Checkbox from "primevue/checkbox";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 // Track user interaction — errors only show after first toggle
-const { showErrors, markDirty } = useDirtyValidation(control);
+const { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);
 
 const onToggle = (val: boolean) => {
   markDirty();
@@ -61,7 +66,7 @@ const onToggle = (val: boolean) => {
 </script>
 
 <template>
-  <div class="flex items-center gap-2">
+  <div class="jf-control" style="flex-direction: row; align-items: center">
     <Checkbox
       :binary="true"
       :model-value="!!projectedData"
@@ -70,7 +75,7 @@ const onToggle = (val: boolean) => {
       :aria-invalid="showErrors || undefined"
       @update:model-value="onToggle"
     />
-    <label v-if="control.label">{{ control.label }}</label>
-    <small v-if="showErrors" class="p-error">{{ control.errors }}</small>
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <small v-if="showErrors" class="p-error">{{ projectedErrors }}</small>
   </div>
 </template>

package/src/vue/primevue/JfEnum.vue

@@ -54,7 +54,12 @@ import Dropdown from "primevue/dropdown";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 type Opt = { label: string; value: unknown };
 const toOptions = (schema?: JsonSchema): Opt[] => {
@@ -158,11 +163,11 @@ watch(
       handleChange(control.value.path, valueToSelect);
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 // Track user interaction — errors only show after blur
-const { showErrors, markDirty } = useDirtyValidation(control);
+const { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);
 
 const onSelect = (val: unknown) => {
   handleChange(control.value.path, val);
@@ -170,15 +175,13 @@ const onSelect = (val: unknown) => {
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="control.label" class="text-color text-left">{{
-      control.label
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <Dropdown
-      :class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
       :options="options"
       option-label="label"
       option-value="value"
@@ -193,6 +196,6 @@ const onSelect = (val: unknown) => {
     <small v-if="error" class="p-error" role="alert"
       >Failed to load: {{ error }}</small
     >
-    <small v-else-if="showErrors" class="p-error">{{ control.errors }}</small>
+    <small v-else-if="showErrors" class="p-error">{{ projectedErrors }}</small>
   </div>
 </template>

package/src/vue/primevue/JfEnumArray.vue

@@ -53,7 +53,12 @@ import MultiSelect from "primevue/multiselect";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 type Opt = { label: string; value: unknown };
 const toOptions = (schema?: JsonSchema): Opt[] => {
@@ -134,7 +139,7 @@ const options = computed(() => {
 useDerive({ control, handleChange, data: projectedData });
 
 // Track user interaction — errors only show after first change
-const { showErrors, markDirty } = useDirtyValidation(control);
+const { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);
 
 // Auto-select when provider returns only one item (opt-in for multiselect)
 watch(
@@ -145,14 +150,16 @@ watch(
         control.value.uischema?.options?.autoSelectSingle === true,
       isLoading,
       items,
-      currentValue: Array.isArray(projectedData.value) ? projectedData.value : [],
+      currentValue: Array.isArray(projectedData.value)
+        ? projectedData.value
+        : [],
     });
 
     if (valueToSelect !== null) {
       handleChange(control.value.path, valueToSelect);
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const placeholder = computed<string | undefined>(() => {
@@ -190,17 +197,15 @@ const model = computed<unknown[]>({
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="control.label" class="text-color text-left">{{
-      control.label
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
 
     <MultiSelect
       v-model="model"
-      :class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
       :options="options"
       option-label="label"
       option-value="value"
@@ -214,8 +219,6 @@ const model = computed<unknown[]>({
     <small v-if="error" class="p-error" role="alert"
       >Failed to load: {{ error }}</small
     >
-    <small v-else-if="showErrors" class="p-error">{{
-      control.errors
-    }}</small>
+    <small v-else-if="showErrors" class="p-error">{{ projectedErrors }}</small>
   </div>
 </template>

package/src/vue/primevue/JfNumber.vue

@@ -50,7 +50,12 @@ import InputNumber from "primevue/inputnumber";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 const options = computed(
   () =>
@@ -102,7 +107,7 @@ const useGrouping = computed(() => {
 });
 
 // Track user interaction — errors only show after blur
-const { showErrors, markDirty } = useDirtyValidation(control);
+const { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);
 
 const onNumber = (val: number | null) => {
   handleChange(control.value.path, val ?? undefined);
@@ -110,16 +115,14 @@ const onNumber = (val: number | null) => {
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="control.label" class="text-color text-left">{{
-      control.label
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <InputNumber
-      :class="['w-full', { 'p-invalid': showErrors }]"
-      :input-class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
+      :input-class="['w-full!', { 'p-invalid': showErrors }]"
       :use-grouping="useGrouping"
       :mode="mode"
       :currency="currency"
@@ -132,6 +135,6 @@ const onNumber = (val: number | null) => {
       @update:model-value="onNumber"
       @blur="markDirty"
     />
-    <small v-if="showErrors" class="p-error">{{ control.errors }}</small>
+    <small v-if="showErrors" class="p-error">{{ projectedErrors }}</small>
   </div>
 </template>

package/src/vue/primevue/JfText.vue

@@ -52,7 +52,12 @@ import AutoComplete from "primevue/autocomplete";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 // Provider support for autocomplete functionality
 const binding = computed(() => {
@@ -119,7 +124,7 @@ const isAutocomplete = computed(() => !!binding.value);
 useDerive({ control, handleChange, data: projectedData });
 
 // Track user interaction — errors only show after blur
-const { showErrors, markDirty } = useDirtyValidation(control);
+const { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);
 
 function onInput(val: string | undefined) {
   // Convert empty strings to undefined for proper required field validation
@@ -150,16 +155,14 @@ const onSelect = (event: { value?: { value?: unknown } | unknown }) => {
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="control.label" class="text-color text-left">{{
-      control.label
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <AutoComplete
       v-if="isAutocomplete"
-      :class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
       :model-value="projectedData ?? ''"
       :suggestions="items"
       option-label="label"
@@ -173,7 +176,7 @@ const onSelect = (event: { value?: { value?: unknown } | unknown }) => {
     />
     <InputText
       v-else
-      :class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
       :model-value="(projectedData as string) ?? ''"
       :disabled="!control.enabled"
       :aria-invalid="showErrors || undefined"
@@ -185,6 +188,6 @@ const onSelect = (event: { value?: { value?: unknown } | unknown }) => {
       @blur="onBlur"
     />
     <small v-if="error" class="p-error" role="alert">Failed: {{ error }}</small>
-    <small v-else-if="showErrors" class="p-error">{{ control.errors }}</small>
+    <small v-else-if="showErrors" class="p-error">{{ projectedErrors }}</small>
   </div>
 </template>

package/src/vue/primevue/JfTextArea.vue

@@ -49,7 +49,12 @@ import Textarea from "primevue/textarea";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 const placeholder = computed<string | undefined>(
   () =>
@@ -58,7 +63,7 @@ const placeholder = computed<string | undefined>(
 );
 
 // Track user interaction — errors only show after blur
-const { showErrors, markDirty } = useDirtyValidation(control);
+const { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);
 
 function onInput(val: string | undefined) {
   // Convert empty strings to undefined for proper required field validation
@@ -79,15 +84,13 @@ function onBlur() {
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="control.label" class="text-color text-left">{{
-      control.label
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <Textarea
-      :class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
       :model-value="(projectedData as string) ?? ''"
       :disabled="!control.enabled"
       :aria-invalid="showErrors || undefined"
@@ -97,6 +100,6 @@ function onBlur() {
       @update:model-value="onInput"
       @blur="onBlur"
     />
-    <small v-if="showErrors" class="p-error">{{ control.errors }}</small>
+    <small v-if="showErrors" class="p-error">{{ projectedErrors }}</small>
   </div>
 </template>