@narrative.io/jsonforms-provider-protocols 2.11.0 → 3.0.0-beta.10

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,25 @@ 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 { useDeriveInitialValue } from "../composables/useDeriveInitialValue";
+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,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 type Opt = { label: string; value: unknown };
 const toOptions = (schema?: JsonSchema): Opt[] => {
@@ -134,7 +146,10 @@ const options = computed(() => {
 });
 
 // Add derive functionality
-useDerive({ control, handleChange });
+useDerive({ control, handleChange, data: projectedData });
+
+// Add deriveInitialValue — async API-based initial value seeding
+useDeriveInitialValue({ control, handleChange });
 
 // Auto-select when provider returns only one item (enabled by default)
 watch(
@@ -145,7 +160,7 @@ watch(
         control.value.uischema?.options?.autoSelectSingle !== false,
       isLoading,
       items,
-      currentValue: control.value.data,
+      currentValue: projectedData.value,
     });
 
     if (valueToSelect !== null) {
@@ -155,44 +170,36 @@ 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, projectedErrors);
 
 const onSelect = (val: unknown) => {
   handleChange(control.value.path, val);
 };
-
-const onBlur = () => {
-  hasInteracted.value = true;
-};
 </script>
 
 <template>
-  <div class="flex flex-col 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!"
+      :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
     >
-    <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

@@ -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,21 @@ 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,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 type Opt = { label: string; value: unknown };
 const toOptions = (schema?: JsonSchema): Opt[] => {
@@ -125,7 +136,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, projectedErrors);
 
 // Auto-select when provider returns only one item (opt-in for multiselect)
 watch(
@@ -136,7 +150,9 @@ 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,45 +181,44 @@ 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>
 
 <template>
-  <div class="flex flex-col 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!"
+      :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">{{
-      control.errors
-    }}</small>
+    <small v-else-if="showErrors" class="p-error">{{ projectedErrors }}</small>
   </div>
 </template>

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,23 @@ 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 { useDeriveInitialValue } from "../composables/useDeriveInitialValue";
+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,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 const options = computed(
   () =>
@@ -57,7 +69,10 @@ const placeholder = computed<string | undefined>(
 );
 
 // Add derive functionality
-useDerive({ control, handleChange });
+useDerive({ control, handleChange, data: projectedData });
+
+// Add deriveInitialValue — async API-based initial value seeding
+useDeriveInitialValue({ control, handleChange });
 
 // Currency and decimal configuration
 const mode = computed(() => {
@@ -95,43 +110,35 @@ 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, projectedErrors);
 
 const onNumber = (val: number | null) => {
   handleChange(control.value.path, val ?? undefined);
 };
-
-const onBlur = () => {
-  hasInteracted.value = true;
-};
 </script>
 
 <template>
-  <div class="flex flex-col 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!"
-      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>
+    <small v-if="showErrors" class="p-error">{{ projectedErrors }}</small>
   </div>
 </template>

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,22 @@ import { useJsonFormsControl } from "@jsonforms/vue";
 import { computed, ref, inject, watch, getCurrentInstance } from "vue";
 import { useProvider } from "../composables/useProvider";
 import { useDerive } from "../composables/useDerive";
+import { useDeriveInitialValue } from "../composables/useDeriveInitialValue";
+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,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 // Provider support for autocomplete functionality
 const binding = computed(() => {
@@ -110,32 +122,31 @@ 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);
+// Add deriveInitialValue — async API-based initial value seeding
+useDeriveInitialValue({ control, handleChange });
 
-const showErrors = computed(() => hasInteracted.value && control.value.errors);
+// Track user interaction — errors only show after blur
+const { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);
 
 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;
@@ -148,43 +159,39 @@ const onSelect = (event: { value?: { value?: unknown } | unknown }) => {
 </script>
 
 <template>
-  <div class="flex flex-col 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!"
-      :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>
+    <small v-else-if="showErrors" class="p-error">{{ projectedErrors }}</small>
   </div>
 </template>

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,21 @@ 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,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 const placeholder = computed<string | undefined>(
   () =>
@@ -51,43 +62,44 @@ 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, projectedErrors);
 
 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>
 
 <template>
-  <div class="flex flex-col 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!"
-      :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"
       @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>