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

package/src/vue/index.ts

@@ -1,6 +1,7 @@
 import type { UISchemaElement } from "@jsonforms/core";
 import {
   and,
+  isIntegerControl,
   isNumberControl,
   isStringControl,
   or,
@@ -22,25 +23,38 @@ 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";
 };
 
 // Create specific testers for each component type
 const providerSelectTester = rankWith(
-  106, // Higher than PrimeVue base (100) to ensure providers take precedence
+  107, // Higher than PrimeVue JfNumber integer renderer (106) so provider wins
   and(
-    or(isStringControl, isNumberControl, and(isControl, isIntegerScope)),
+    or(
+      isStringControl,
+      isNumberControl,
+      isIntegerControl,
+      and(isControl, isIntegerScope),
+    ),
     hasProvider,
     (uischema) => !uischema?.options?.autocomplete,
   ),
 );
 
 const providerAutocompleteTester = rankWith(
-  107, // Higher than PrimeVue base (100) to ensure providers take precedence
+  108, // Higher than providerSelectTester so autocomplete variant wins when flagged
   and(
-    or(isStringControl, isNumberControl, and(isControl, isIntegerScope)),
+    or(
+      isStringControl,
+      isNumberControl,
+      isIntegerControl,
+      and(isControl, isIntegerScope),
+    ),
     hasProvider,
     (uischema) => uischema?.options?.autocomplete === true,
   ),
@@ -53,13 +67,16 @@ 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";
 };
 
 const providerMultiSelectTester = rankWith(
-  108, // Highest priority for array controls with providers
+  109, // Highest priority for array controls with providers
   and(isArrayControl, hasProvider),
 );
 
@@ -79,6 +96,8 @@ export { useProjection } from "./composables/useProjection";
 export type { ProjectionResult } from "./composables/useProjection";
 export { createDataLayer, useDataLayer } from "./composables/useDataLayer";
 export type { DataLayer } from "./composables/useDataLayer";
+export { useDeriveInitialValue } from "./composables/useDeriveInitialValue";
+export type { DeriveInitialValueCfg } from "./composables/useDeriveInitialValue";
 export { useDirtyValidation } from "./composables/useDirtyValidation";
 export * from "./testers";
 

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

@@ -45,16 +45,23 @@ import { useJsonFormsControl } from "@jsonforms/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 { resolvePlaceholder } from "../utils/placeholder";
 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: 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[] => {
@@ -120,14 +127,15 @@ const {
 } = useProvider(binding, {
   data: rootData,
   path: control.value.path,
-  dependsOnValues: depValues.value,
+  dependsOnValues: depValues,
 });
 
 const placeholder = computed<string | undefined>(() => {
   if (loading.value) return "Loading…";
-  return (
-    (control.value.uischema as { options?: { placeholder?: string } })?.options
-      ?.placeholder ?? control.value.description
+  return resolvePlaceholder(
+    control.value.uischema,
+    projectedLabel.value,
+    "select",
   );
 });
 
@@ -142,6 +150,9 @@ const options = computed(() => {
 // Add derive functionality
 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(
   [providerItems, loading],
@@ -158,11 +169,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 +181,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 +202,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

@@ -47,13 +47,19 @@ import { useDerive } from "../composables/useDerive";
 import { useProjection } from "../composables/useProjection";
 import { useDirtyValidation } from "../composables/useDirtyValidation";
 import { shouldAutoSelectMulti } from "../utils/autoSelect";
+import { resolvePlaceholder } from "../utils/placeholder";
 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: 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[] => {
@@ -119,7 +125,7 @@ const {
 } = useProvider(binding, {
   data: rootData,
   path: control.value.path,
-  dependsOnValues: depValues.value,
+  dependsOnValues: depValues,
 });
 
 const options = computed(() => {
@@ -134,7 +140,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,21 +151,24 @@ 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>(() => {
   if (loading.value) return "Loading…";
-  return (
-    (control.value.uischema as { options?: { placeholder?: string } })?.options
-      ?.placeholder ?? control.value.description
+  return resolvePlaceholder(
+    control.value.uischema,
+    projectedLabel.value,
+    "select",
   );
 });
 
@@ -190,17 +199,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 +221,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

@@ -42,15 +42,22 @@ import type { ControlProps } from "@jsonforms/vue";
 import { useJsonFormsControl } from "@jsonforms/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 { resolvePlaceholder } from "../utils/placeholder";
 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: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 const options = computed(
   () =>
@@ -58,13 +65,16 @@ const options = computed(
       ?.options ?? {},
 );
 
-const placeholder = computed<string | undefined>(
-  () => (options.value.placeholder as string) ?? control.value.description,
+const placeholder = computed<string | undefined>(() =>
+  resolvePlaceholder(control.value.uischema, projectedLabel.value, "input"),
 );
 
 // Add derive functionality
 useDerive({ control, handleChange, data: projectedData });
 
+// Add deriveInitialValue — async API-based initial value seeding
+useDeriveInitialValue({ control, handleChange });
+
 // Currency and decimal configuration
 const mode = computed(() => {
   if (options.value.currency) return "currency";
@@ -102,7 +112,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 +120,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 +140,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

@@ -43,8 +43,10 @@ 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 { resolvePlaceholder } from "../utils/placeholder";
 import InputText from "primevue/inputtext";
 import AutoComplete from "primevue/autocomplete";
 
@@ -52,7 +54,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(() => {
@@ -98,28 +105,38 @@ const { items, loading, error, reload } = useProvider(binding, {
   data: rootData,
   path: control.value.path,
   uiQuery: query.value,
-  dependsOnValues: depValues.value,
+  dependsOnValues: depValues,
 });
 
 watch(query, () => {
   if (binding.value?.load === "query") reload();
 });
 
+const isAutocomplete = computed(() => !!binding.value);
+
 const placeholder = computed<string | undefined>(() => {
   if (loading.value) return "Loading…";
-  return (
-    (control.value.uischema as { options?: { placeholder?: string } })?.options
-      ?.placeholder ?? control.value.description
+  const explicit = (
+    control.value.uischema as { options?: { placeholder?: string } }
+  )?.options?.placeholder;
+  if (explicit) return explicit;
+  // In autocomplete mode the input is really a search box — use matching UX.
+  if (isAutocomplete.value) return "Type to search…";
+  return resolvePlaceholder(
+    control.value.uischema,
+    projectedLabel.value,
+    "input",
   );
 });
 
-const isAutocomplete = computed(() => !!binding.value);
-
 // Add derive functionality
 useDerive({ control, handleChange, data: projectedData });
 
+// Add deriveInitialValue — async API-based initial value seeding
+useDeriveInitialValue({ control, handleChange });
+
 // 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 +167,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 +188,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 +200,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

@@ -43,22 +43,26 @@ import { useJsonFormsControl } from "@jsonforms/vue";
 import { computed, getCurrentInstance } from "vue";
 import { useProjection } from "../composables/useProjection";
 import { useDirtyValidation } from "../composables/useDirtyValidation";
+import { resolvePlaceholder } from "../utils/placeholder";
 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: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
-const placeholder = computed<string | undefined>(
-  () =>
-    (control.value.uischema as { options?: { placeholder?: string } })?.options
-      ?.placeholder ?? control.value.description,
+const placeholder = computed<string | undefined>(() =>
+  resolvePlaceholder(control.value.uischema, projectedLabel.value, "input"),
 );
 
 // 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 +83,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 +99,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>