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

package/src/vue/composables/useDerive.ts

@@ -1,5 +1,6 @@
-import { computed, watch, inject, type Ref } from "vue";
+import { computed, watch, unref, inject, type Ref, type ComputedRef } from "vue";
 import { type ControlElement } from "@jsonforms/core";
+import { useDataLayer } from "./useDataLayer";
 
 interface DeriveOptions {
   control: Ref<{
@@ -8,20 +9,21 @@ interface DeriveOptions {
     data: unknown;
   }>;
   handleChange: (path: string, value: unknown) => void;
+  /** When projection is active, pass projectedData so the comparison
+   *  matches the projected (unwrapped) value rather than raw scope data. */
+  data?: Ref<unknown> | ComputedRef<unknown>;
 }
 
-export function useDerive({ control, handleChange }: DeriveOptions) {
+export function useDerive({ control, handleChange, data: dataOverride }: DeriveOptions) {
   // Get the root form data from JSONForms context
   const injectedFormData = inject<{ value: unknown }>("formData", {
     value: {},
   });
   const rootData = computed(() => injectedFormData.value || {});
 
-  // Get external data from context if available
-  const injectedExternalData = inject<{ value: unknown }>("externalData", {
-    value: {},
-  });
-  const externalData = computed(() => injectedExternalData.value || {});
+  // Get data from the dataLayer
+  const dataLayerState = useDataLayer();
+  const dataLayerData = computed(() => dataLayerState.value || {});
 
   // Extract derive configuration from uischema options
   const deriveConfig = computed(() => {
@@ -34,9 +36,9 @@ export function useDerive({ control, handleChange }: DeriveOptions) {
     };
   });
 
-  // Watch for changes in form data and external data and update derived field
+  // Watch for changes in form data and dataLayer and update derived field
   watch(
-    [rootData, externalData, deriveConfig],
+    [rootData, dataLayerData, deriveConfig],
     ([data, extData, config]) => {
       if (!config.expression || config.mode !== "follow") {
         return;
@@ -48,7 +50,8 @@ export function useDerive({ control, handleChange }: DeriveOptions) {
           data,
           extData,
         );
-        if (derivedValue !== control.value.data) {
+        const compareData = dataOverride ? unref(dataOverride) : control.value.data;
+        if (derivedValue !== compareData) {
           handleChange(control.value.path, derivedValue);
         }
       } catch (error) {
@@ -65,12 +68,12 @@ export function useDerive({ control, handleChange }: DeriveOptions) {
 function resolveDeriveExpression(
   expression: string,
   data: unknown,
-  externalData?: unknown,
+  dataLayerData?: unknown,
 ): unknown {
-  // Handle externalData() syntax
-  if (expression.startsWith("externalData(") && expression.endsWith(")")) {
-    const propertyPath = expression.slice(13, -1); // Remove "externalData(" and ")"
-    return resolvePropertyPath(propertyPath, externalData);
+  // Handle dataLayer() syntax
+  if (expression.startsWith("dataLayer(") && expression.endsWith(")")) {
+    const propertyPath = expression.slice(10, -1); // Remove "dataLayer(" and ")"
+    return resolvePropertyPath(propertyPath, dataLayerData);
   }
 
   // Handle simple property paths like "country.name"
@@ -82,7 +85,7 @@ function resolveDeriveExpression(
     return resolvePropertyPath(expression, data);
   }
 
-  // For now, we'll only support simple property paths and externalData() calls
+  // For now, we'll only support simple property paths and dataLayer() calls
   // Complex expressions would require a safe expression evaluator
   return resolvePropertyPath(expression, data);
 }

package/src/vue/composables/useDirtyValidation.ts

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

package/src/vue/composables/useProjection.ts

@@ -0,0 +1,74 @@
+import { computed, type ComputedRef, type Ref } from "vue";
+import {
+  getProjectedValue,
+  setProjectedValue,
+  getProjectedSchema,
+} from "../../core/projection";
+
+interface ProjectionControl {
+  data: unknown;
+  path: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  schema: Record<string, any>;
+  uischema: { options?: { projection?: string; [key: string]: unknown } };
+}
+
+export interface ProjectionResult {
+  /** The value at the projected path (for rendering) */
+  projectedData: ComputedRef<unknown>;
+  /** The schema at the projected path (for renderer selection) */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  projectedSchema: ComputedRef<Record<string, any>>;
+  /** Wrapped handleChange that writes through the projection */
+  handleProjectedChange: (path: string, value: unknown) => void;
+  /** Whether projection is active */
+  hasProjection: boolean;
+}
+
+/**
+ * Composable that wraps a JSON Forms control with projection support.
+ *
+ * When `options.projection` is set on the uischema, this composable:
+ * - Reads the projected sub-value from the control data
+ * - Resolves the projected sub-schema for renderer type resolution
+ * - Wraps handleChange to write back through the projection path (preserving siblings)
+ *
+ * When no projection is set, it passes through control data/schema/handleChange unchanged.
+ */
+export function useProjection(
+  control: Ref<ProjectionControl>,
+  handleChange: (path: string, value: unknown) => void,
+): ProjectionResult {
+  const projection = control.value.uischema?.options?.projection as
+    | string
+    | undefined;
+
+  if (!projection) {
+    return {
+      projectedData: computed(() => control.value.data),
+      projectedSchema: computed(() => control.value.schema),
+      handleProjectedChange: handleChange,
+      hasProjection: false,
+    };
+  }
+
+  const projectedData = computed(() =>
+    getProjectedValue(control.value.data, projection),
+  );
+
+  const projectedSchema = computed(() =>
+    getProjectedSchema(control.value.schema, projection),
+  );
+
+  const handleProjectedChange = (path: string, value: unknown) => {
+    const fullValue = setProjectedValue(control.value.data, projection, value);
+    handleChange(path, fullValue);
+  };
+
+  return {
+    projectedData,
+    projectedSchema,
+    handleProjectedChange,
+    hasProjection: true,
+  };
+}

package/src/vue/index.ts

@@ -7,6 +7,7 @@ import {
   rankWith,
   isControl,
 } from "@jsonforms/core";
+import { resolveScopeSchema } from "../core/resolveScope";
 import ProviderAutocomplete from "./components/ProviderAutocomplete.vue";
 import ProviderSelect from "./components/ProviderSelect.vue";
 import ProviderMultiSelect from "./components/ProviderMultiSelect.vue";
@@ -16,29 +17,21 @@ const hasProvider = (uischema: UISchemaElement) => {
   return uischema?.options?.provider !== undefined;
 };
 
+// Integer fallback tester — handles nested scopes like #/properties/parent/properties/child
+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>);
+  return propertySchema?.type === "integer";
+};
+
 // Create specific testers for each component type
 const providerSelectTester = rankWith(
   106, // Higher than PrimeVue base (100) to ensure providers take precedence
   and(
-    or(
-      isStringControl,
-      isNumberControl,
-      and(isControl, (uischema: unknown, schema: unknown) => {
-        const ui = uischema as { type?: string; scope?: string };
-        const rootSchema = schema as {
-          properties?: Record<string, { type?: string }>;
-        };
-
-        if (ui?.type !== "Control" || !ui?.scope || !rootSchema?.properties)
-          return false;
-
-        // Extract property name from scope (e.g., "#/properties/age" -> "age")
-        const propertyName = ui.scope.replace("#/properties/", "");
-        const propertySchema = rootSchema.properties[propertyName];
-
-        return propertySchema?.type === "integer";
-      }),
-    ),
+    or(isStringControl, isNumberControl, and(isControl, isIntegerScope)),
     hasProvider,
     (uischema) => !uischema?.options?.autocomplete,
   ),
@@ -47,44 +40,21 @@ const providerSelectTester = rankWith(
 const providerAutocompleteTester = rankWith(
   107, // Higher than PrimeVue base (100) to ensure providers take precedence
   and(
-    or(
-      isStringControl,
-      isNumberControl,
-      and(isControl, (uischema: unknown, schema: unknown) => {
-        const ui = uischema as { type?: string; scope?: string };
-        const rootSchema = schema as {
-          properties?: Record<string, { type?: string }>;
-        };
-
-        if (ui?.type !== "Control" || !ui?.scope || !rootSchema?.properties)
-          return false;
-
-        // Extract property name from scope (e.g., "#/properties/age" -> "age")
-        const propertyName = ui.scope.replace("#/properties/", "");
-        const propertySchema = rootSchema.properties[propertyName];
-
-        return propertySchema?.type === "integer";
-      }),
-    ),
+    or(isStringControl, isNumberControl, and(isControl, isIntegerScope)),
     hasProvider,
     (uischema) => uischema?.options?.autocomplete === true,
   ),
 );
 
-// Custom array tester - check both uischema control type and schema type
+// Custom array tester - supports nested scope paths
 const isArrayControl = (uischema: UISchemaElement, schema: unknown) => {
   const controlSchema = uischema as { type: string; scope?: string };
   if (controlSchema.type !== "Control" || !controlSchema.scope) {
     return false;
   }
 
-  // Extract the property schema from the root schema
-  const rootSchema = schema as { properties?: Record<string, unknown> };
-  const propertyPath = controlSchema.scope.replace("#/properties/", "");
-  const propertySchema = rootSchema?.properties?.[propertyPath] as {
-    type?: string;
-  };
-
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const propertySchema = resolveScopeSchema(controlSchema.scope, schema as Record<string, any>);
   return propertySchema?.type === "array";
 };
 
@@ -105,6 +75,11 @@ export { primevueRenderers, registerPrimevueRenderers } from "./primevue";
 // Export individual components
 export { ProviderAutocomplete, ProviderSelect, ProviderMultiSelect };
 export { useProvider } from "./composables/useProvider";
+export { useProjection } from "./composables/useProjection";
+export type { ProjectionResult } from "./composables/useProjection";
+export { createDataLayer, useDataLayer } from "./composables/useDataLayer";
+export type { DataLayer } from "./composables/useDataLayer";
+export { useDirtyValidation } from "./composables/useDirtyValidation";
 export * from "./testers";
 
 // Export individual PrimeVue components using lazy evaluation to avoid circular deps

package/src/vue/primevue/JfBoolean.vue

@@ -21,14 +21,17 @@ export default {
     renderers: {
       type: Array,
       required: false,
+      default: undefined,
     },
     cells: {
       type: Array,
       required: false,
+      default: undefined,
     },
     config: {
       type: Object,
       required: false,
+      default: undefined,
     },
   },
 };
@@ -38,26 +41,36 @@ export default {
 import type { ControlProps } from "@jsonforms/vue";
 import { useJsonFormsControl } from "@jsonforms/vue";
 import { getCurrentInstance } from "vue";
+import { useProjection } from "../composables/useProjection";
+import { useDirtyValidation } from "../composables/useDirtyValidation";
 import Checkbox from "primevue/checkbox";
 
 // Access props from the component instance
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
-const { control, handleChange } = useJsonFormsControl(props);
+const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
+const { projectedData, handleProjectedChange: handleChange } = useProjection(control, rawHandleChange);
 
-const onToggle = (val: boolean) => handleChange(control.value.path, val);
+// Track user interaction — errors only show after first toggle
+const { showErrors, markDirty } = useDirtyValidation(control);
+
+const onToggle = (val: boolean) => {
+  markDirty();
+  handleChange(control.value.path, val);
+};
 </script>
 
 <template>
   <div class="flex items-center gap-2">
     <Checkbox
       :binary="true"
-      :model-value="!!control.data"
+      :model-value="!!projectedData"
       :disabled="!control.enabled"
-      :aria-invalid="!!control.errors || undefined"
+      :class="{ 'p-invalid': showErrors }"
+      :aria-invalid="showErrors || undefined"
       @update:model-value="onToggle"
     />
     <label v-if="control.label">{{ control.label }}</label>
-    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+    <small v-if="showErrors" class="p-error">{{ control.errors }}</small>
   </div>
 </template>

package/src/vue/primevue/JfEnum.vue

@@ -22,14 +22,17 @@ export default {
     renderers: {
       type: Array,
       required: false,
+      default: undefined,
     },
     cells: {
       type: Array,
       required: false,
+      default: undefined,
     },
     config: {
       type: Object,
       required: false,
+      default: undefined,
     },
   },
 };
@@ -39,16 +42,19 @@ export default {
 import type { JsonSchema } from "@jsonforms/core";
 import type { ControlProps } from "@jsonforms/vue";
 import { useJsonFormsControl } from "@jsonforms/vue";
-import { computed, ref, inject, getCurrentInstance, watch } from "vue";
+import { computed, inject, getCurrentInstance, watch } from "vue";
 import { useProvider } from "../composables/useProvider";
 import { useDerive } from "../composables/useDerive";
+import { useProjection } from "../composables/useProjection";
+import { useDirtyValidation } from "../composables/useDirtyValidation";
 import { shouldAutoSelect } from "../utils/autoSelect";
 import Dropdown from "primevue/dropdown";
 
 // Access props from the component instance
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
-const { control, handleChange } = useJsonFormsControl(props);
+const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
+const { projectedData, handleProjectedChange: handleChange } = useProjection(control, rawHandleChange);
 
 type Opt = { label: string; value: unknown };
 const toOptions = (schema?: JsonSchema): Opt[] => {
@@ -134,7 +140,7 @@ const options = computed(() => {
 });
 
 // Add derive functionality
-useDerive({ control, handleChange });
+useDerive({ control, handleChange, data: projectedData });
 
 // Auto-select when provider returns only one item (enabled by default)
 watch(
@@ -145,7 +151,7 @@ watch(
         control.value.uischema?.options?.autoSelectSingle !== false,
       isLoading,
       items,
-      currentValue: control.value.data,
+      currentValue: projectedData.value,
     });
 
     if (valueToSelect !== null) {
@@ -155,18 +161,12 @@ watch(
   { immediate: true }
 );
 
-// Track user interaction
-const hasInteracted = ref(false);
-
-const showErrors = computed(() => hasInteracted.value && control.value.errors);
+// Track user interaction — errors only show after blur
+const { showErrors, markDirty } = useDirtyValidation(control);
 
 const onSelect = (val: unknown) => {
   handleChange(control.value.path, val);
 };
-
-const onBlur = () => {
-  hasInteracted.value = true;
-};
 </script>
 
 <template>
@@ -178,17 +178,17 @@ const onBlur = () => {
       {{ control.description }}
     </div>
     <Dropdown
-      class="w-full"
+      :class="['w-full', { 'p-invalid': showErrors }]"
       :options="options"
       option-label="label"
       option-value="value"
-      :model-value="control.data ?? null"
+      :model-value="projectedData ?? null"
       :placeholder="placeholder"
       :disabled="!control.enabled || loading"
-      :aria-invalid="!!showErrors || undefined"
+      :aria-invalid="showErrors || undefined"
       :show-clear="true"
       @update:model-value="onSelect"
-      @blur="onBlur"
+      @blur="markDirty"
     />
     <small v-if="error" class="p-error" role="alert"
       >Failed to load: {{ error }}</small

package/src/vue/primevue/JfEnumArray.vue

@@ -21,14 +21,17 @@ export default {
     renderers: {
       type: Array,
       required: false,
+      default: undefined,
     },
     cells: {
       type: Array,
       required: false,
+      default: undefined,
     },
     config: {
       type: Object,
       required: false,
+      default: undefined,
     },
   },
 };
@@ -41,13 +44,16 @@ import { useJsonFormsControl } from "@jsonforms/vue";
 import { computed, inject, getCurrentInstance, watch } from "vue";
 import { useProvider } from "../composables/useProvider";
 import { useDerive } from "../composables/useDerive";
+import { useProjection } from "../composables/useProjection";
+import { useDirtyValidation } from "../composables/useDirtyValidation";
 import { shouldAutoSelectMulti } from "../utils/autoSelect";
 import MultiSelect from "primevue/multiselect";
 
 // Access props from the component instance
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
-const { control, handleChange } = useJsonFormsControl(props);
+const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
+const { projectedData, handleProjectedChange: handleChange } = useProjection(control, rawHandleChange);
 
 type Opt = { label: string; value: unknown };
 const toOptions = (schema?: JsonSchema): Opt[] => {
@@ -125,7 +131,10 @@ const options = computed(() => {
 });
 
 // Add derive functionality
-useDerive({ control, handleChange });
+useDerive({ control, handleChange, data: projectedData });
+
+// Track user interaction — errors only show after first change
+const { showErrors, markDirty } = useDirtyValidation(control);
 
 // Auto-select when provider returns only one item (opt-in for multiselect)
 watch(
@@ -136,7 +145,7 @@ watch(
         control.value.uischema?.options?.autoSelectSingle === true,
       isLoading,
       items,
-      currentValue: Array.isArray(control.value.data) ? control.value.data : [],
+      currentValue: Array.isArray(projectedData.value) ? projectedData.value : [],
     });
 
     if (valueToSelect !== null) {
@@ -165,14 +174,17 @@ const sameSet = (a: unknown[], b: unknown[]) => {
 // v-model with guard to avoid recursive updates
 const model = computed<unknown[]>({
   get() {
-    const curr = Array.isArray(control.value.data) ? control.value.data : [];
+    const curr = Array.isArray(projectedData.value) ? projectedData.value : [];
     // return a fresh copy so PrimeMultiSelect can't mutate JSONForms' array in place
     return [...curr];
   },
   set(val) {
     const next = Array.isArray(val) ? [...val] : [];
-    const curr = Array.isArray(control.value.data) ? control.value.data : [];
-    if (!sameSet(curr, next)) handleChange(control.value.path, next);
+    const curr = Array.isArray(projectedData.value) ? projectedData.value : [];
+    if (!sameSet(curr, next)) {
+      markDirty();
+      handleChange(control.value.path, next);
+    }
   },
 });
 </script>
@@ -188,21 +200,21 @@ const model = computed<unknown[]>({
 
     <MultiSelect
       v-model="model"
-      class="w-full"
+      :class="['w-full', { 'p-invalid': showErrors }]"
       :options="options"
       option-label="label"
       option-value="value"
       data-key="value"
       display="chip"
       :disabled="!control.enabled || loading"
-      :aria-invalid="!!control.errors || undefined"
+      :aria-invalid="showErrors || undefined"
       :placeholder="placeholder"
     />
 
     <small v-if="error" class="p-error" role="alert"
       >Failed to load: {{ error }}</small
     >
-    <small v-else-if="control.errors" class="p-error">{{
+    <small v-else-if="showErrors" class="p-error">{{
       control.errors
     }}</small>
   </div>

package/src/vue/primevue/JfNumber.vue

@@ -21,14 +21,17 @@ export default {
     renderers: {
       type: Array,
       required: false,
+      default: undefined,
     },
     cells: {
       type: Array,
       required: false,
+      default: undefined,
     },
     config: {
       type: Object,
       required: false,
+      default: undefined,
     },
   },
 };
@@ -37,14 +40,17 @@ export default {
 <script setup lang="ts">
 import type { ControlProps } from "@jsonforms/vue";
 import { useJsonFormsControl } from "@jsonforms/vue";
-import { computed, ref, getCurrentInstance } from "vue";
+import { computed, getCurrentInstance } from "vue";
 import { useDerive } from "../composables/useDerive";
+import { useProjection } from "../composables/useProjection";
+import { useDirtyValidation } from "../composables/useDirtyValidation";
 import InputNumber from "primevue/inputnumber";
 
 // Access props from the component instance
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
-const { control, handleChange } = useJsonFormsControl(props);
+const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
+const { projectedData, handleProjectedChange: handleChange } = useProjection(control, rawHandleChange);
 
 const options = computed(
   () =>
@@ -57,7 +63,7 @@ const placeholder = computed<string | undefined>(
 );
 
 // Add derive functionality
-useDerive({ control, handleChange });
+useDerive({ control, handleChange, data: projectedData });
 
 // Currency and decimal configuration
 const mode = computed(() => {
@@ -95,18 +101,12 @@ const useGrouping = computed(() => {
   return options.value.useGrouping === true;
 });
 
-// Track user interaction
-const hasInteracted = ref(false);
-
-const showErrors = computed(() => hasInteracted.value && control.value.errors);
+// Track user interaction — errors only show after blur
+const { showErrors, markDirty } = useDirtyValidation(control);
 
 const onNumber = (val: number | null) => {
   handleChange(control.value.path, val ?? undefined);
 };
-
-const onBlur = () => {
-  hasInteracted.value = true;
-};
 </script>
 
 <template>
@@ -118,19 +118,19 @@ const onBlur = () => {
       {{ control.description }}
     </div>
     <InputNumber
-      class="w-full"
-      input-class="w-full"
+      :class="['w-full', { 'p-invalid': showErrors }]"
+      :input-class="['w-full', { 'p-invalid': showErrors }]"
       :use-grouping="useGrouping"
       :mode="mode"
       :currency="currency"
       :min-fraction-digits="minFractionDigits"
       :max-fraction-digits="maxFractionDigits"
-      :model-value="typeof control.data === 'number' ? control.data : null"
+      :model-value="typeof projectedData === 'number' ? projectedData : null"
       :placeholder="placeholder"
       :disabled="!control.enabled"
-      :aria-invalid="!!showErrors || undefined"
+      :aria-invalid="showErrors || undefined"
       @update:model-value="onNumber"
-      @blur="onBlur"
+      @blur="markDirty"
     />
     <small v-if="showErrors" class="p-error">{{ control.errors }}</small>
   </div>