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

package/src/vue/primevue/JfText.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,
     },
   },
 };
@@ -40,13 +43,16 @@ import { useJsonFormsControl } from "@jsonforms/vue";
 import { computed, ref, inject, watch, getCurrentInstance } from "vue";
 import { useProvider } from "../composables/useProvider";
 import { useDerive } from "../composables/useDerive";
+import { useProjection } from "../composables/useProjection";
+import { useDirtyValidation } from "../composables/useDirtyValidation";
 import InputText from "primevue/inputtext";
 import AutoComplete from "primevue/autocomplete";
 
 // 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);
 
 // Provider support for autocomplete functionality
 const binding = computed(() => {
@@ -110,32 +116,28 @@ const placeholder = computed<string | undefined>(() => {
 const isAutocomplete = computed(() => !!binding.value);
 
 // Add derive functionality
-useDerive({ control, handleChange });
+useDerive({ control, handleChange, data: projectedData });
 
-// Track user interaction
-const hasInteracted = ref(false);
-const hasFocused = ref(false);
-
-const showErrors = computed(() => hasInteracted.value && control.value.errors);
+// Track user interaction — errors only show after blur
+const { showErrors, markDirty } = useDirtyValidation(control);
 
 function onInput(val: string | undefined) {
   // Convert empty strings to undefined for proper required field validation
   const newValue = val && val.trim() !== "" ? val : undefined;
-  if (control.value.data !== newValue) {
+  if (projectedData.value !== newValue) {
     handleChange(control.value.path, newValue);
   }
 }
 
 function onBlur() {
-  if (hasFocused.value) {
-    hasInteracted.value = true;
+  markDirty();
+  // Normalize empty strings to undefined so required validation fires
+  const val = projectedData.value;
+  if (typeof val === "string" && val.trim() === "") {
+    handleChange(control.value.path, undefined);
   }
 }
 
-function onFocus() {
-  hasFocused.value = true;
-}
-
 // Autocomplete specific handlers
 const onComplete = (event: { query: string }) => {
   query.value = event.query;
@@ -157,32 +159,30 @@ const onSelect = (event: { value?: { value?: unknown } | unknown }) => {
     </div>
     <AutoComplete
       v-if="isAutocomplete"
-      class="w-full"
-      :model-value="control.data ?? ''"
+      :class="['w-full', { 'p-invalid': showErrors }]"
+      :model-value="projectedData ?? ''"
       :suggestions="items"
       option-label="label"
       :placeholder="placeholder"
       :disabled="!control.enabled"
-      :aria-invalid="!!showErrors || undefined"
+      :aria-invalid="showErrors || undefined"
       @complete="onComplete"
       @item-select="onSelect"
       @update:model-value="onInput"
       @blur="onBlur"
-      @focus="onFocus"
     />
     <InputText
       v-else
-      class="w-full"
-      :model-value="control.data ?? ''"
+      :class="['w-full', { 'p-invalid': showErrors }]"
+      :model-value="(projectedData as string) ?? ''"
       :disabled="!control.enabled"
-      :aria-invalid="!!showErrors || undefined"
+      :aria-invalid="showErrors || undefined"
       :placeholder="placeholder"
       autocapitalize="off"
       autocomplete="off"
       spellcheck="false"
       @update:model-value="onInput"
       @blur="onBlur"
-      @focus="onFocus"
     />
     <small v-if="error" class="p-error" role="alert">Failed: {{ error }}</small>
     <small v-else-if="showErrors" class="p-error">{{ control.errors }}</small>

package/src/vue/primevue/JfTextArea.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,13 +40,16 @@ 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 { useProjection } from "../composables/useProjection";
+import { useDirtyValidation } from "../composables/useDirtyValidation";
 import Textarea from "primevue/textarea";
 
 // 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 placeholder = computed<string | undefined>(
   () =>
@@ -51,21 +57,24 @@ const placeholder = computed<string | undefined>(
       ?.placeholder ?? control.value.description,
 );
 
-// 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);
 
 function onInput(val: string | undefined) {
   // Convert empty strings to undefined for proper required field validation
   const newValue = val && val.trim() !== "" ? val : undefined;
-  if (control.value.data !== newValue) {
+  if (projectedData.value !== newValue) {
     handleChange(control.value.path, newValue);
   }
 }
 
 function onBlur() {
-  hasInteracted.value = true;
+  markDirty();
+  // Normalize empty strings to undefined so required validation fires
+  const val = projectedData.value;
+  if (typeof val === "string" && val.trim() === "") {
+    handleChange(control.value.path, undefined);
+  }
 }
 </script>
 
@@ -78,10 +87,10 @@ function onBlur() {
       {{ control.description }}
     </div>
     <Textarea
-      class="w-full"
-      :model-value="control.data ?? ''"
+      :class="['w-full', { 'p-invalid': showErrors }]"
+      :model-value="(projectedData as string) ?? ''"
       :disabled="!control.enabled"
-      :aria-invalid="!!showErrors || undefined"
+      :aria-invalid="showErrors || undefined"
       :placeholder="placeholder"
       :rows="4"
       :auto-resize="true"

package/src/vue/primevue/index.ts

@@ -4,6 +4,8 @@ import JfNumber from "./JfNumber.vue";
 import JfEnum from "./JfEnum.vue";
 import JfEnumArray from "./JfEnumArray.vue";
 import JfBoolean from "./JfBoolean.vue";
+import { getProjectedSchema } from "../../core/projection";
+import { resolveScopeSchema } from "../../core/resolveScope";
 
 // Auto-inject layout styles
 const injectLayoutStyles = () => {
@@ -54,6 +56,7 @@ export function registerPrimevueRenderers(jsonformsCore: any): unknown[] {
     isNumberControl,
     isIntegerControl,
     and,
+    or,
     isControl,
     schemaMatches,
     isBooleanControl,
@@ -97,27 +100,49 @@ export function registerPrimevueRenderers(jsonformsCore: any): unknown[] {
     );
   };
 
+  // Projection-aware schema check: when options.projection is set,
+  // resolve the projected schema and test against it instead of the original
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const projectedSchemaMatches = (check: (schema: any) => boolean) =>
+    (uischema: unknown, schema: unknown): boolean => {
+      const ui = uischema as { type?: string; scope?: string; options?: { projection?: string } };
+      const projection = ui?.options?.projection;
+      if (!projection || 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>);
+      if (!propertySchema) return false;
+
+      return check(getProjectedSchema(propertySchema, projection));
+    };
+
+  const isMultilineProjection = (uischema: unknown, schema: unknown) => {
+    const ui = uischema as { options?: { multi?: boolean } };
+    return ui?.options?.multi === true &&
+      projectedSchemaMatches((s) => s?.type === "string")(uischema, schema);
+  };
+
   const renderers = [
     // Multiline text has higher priority than regular text
-    { tester: rankWith(PRIME + 4, isMultilineString), renderer: JfTextArea },
-    { tester: rankWith(PRIME + 3, isStringControl), renderer: JfText },
+    { tester: rankWith(PRIME + 4, or(isMultilineString, isMultilineProjection)), renderer: JfTextArea },
+    { tester: rankWith(PRIME + 3, or(isStringControl, projectedSchemaMatches((s) => s?.type === "string"))), renderer: JfText },
     {
-      tester: rankWith(PRIME + 6, isIntegerControl),
+      tester: rankWith(PRIME + 6, or(isIntegerControl, projectedSchemaMatches((s) => s?.type === "integer"))),
       renderer: JfNumber,
     },
     {
-      tester: rankWith(PRIME + 4, isNumberControl),
+      tester: rankWith(PRIME + 4, or(isNumberControl, projectedSchemaMatches((s) => s?.type === "number"))),
       renderer: JfNumber,
     },
     {
-      tester: rankWith(PRIME + 7, and(isControl, schemaMatches(isScalarEnum))),
+      tester: rankWith(PRIME + 7, or(and(isControl, schemaMatches(isScalarEnum)), and(isControl, projectedSchemaMatches(isScalarEnum)))),
       renderer: JfEnum,
     },
     {
-      tester: rankWith(PRIME + 8, and(isControl, schemaMatches(isEnumArray))),
+      tester: rankWith(PRIME + 8, or(and(isControl, schemaMatches(isEnumArray)), and(isControl, projectedSchemaMatches(isEnumArray)))),
       renderer: JfEnumArray,
     },
-    { tester: rankWith(PRIME + 3, isBooleanControl), renderer: JfBoolean },
+    { tester: rankWith(PRIME + 3, or(isBooleanControl, projectedSchemaMatches((s) => s?.type === "boolean"))), renderer: JfBoolean },
   ];
 
   // Update the exported array