@narrative.io/jsonforms-provider-protocols 1.0.3 → 1.1.0-beta.1

package/src/vue/components/ProviderAutocomplete.vue

@@ -3,6 +3,7 @@ import type { ControlElement, JsonSchema } from "@jsonforms/core";
 import { useJsonFormsControl } from "@jsonforms/vue";
 import { computed, ref, watch } from "vue";
 import { useProvider } from "../composables/useProvider";
+import AutoComplete from "primevue/autocomplete";
 
 const props = defineProps<{
   uischema: ControlElement;
@@ -19,6 +20,7 @@ const binding = computed(() => {
   }
   return provider;
 });
+
 const query = ref("");
 const { items, loading, error, reload } = useProvider(binding, {
   data: control.value.data,
@@ -34,21 +36,38 @@ const value = computed({
   get: () => control.value.data,
   set: (v) => handleChange(control.value.path, v),
 });
+
+const placeholder = computed(() =>
+  loading.value ? "Loading…" : "Type to search…",
+);
+
+const onComplete = (event: { query: string }) => {
+  query.value = event.query;
+};
+
+const onSelect = (event: { value?: { value?: unknown } | unknown }) => {
+  value.value = (event.value as { value?: unknown })?.value ?? event.value;
+};
 </script>
 
 <template>
-  <div class="provider-autocomplete">
-    <label>{{ control.schema.title }}</label>
-    <input
-      v-model="query"
-      :placeholder="loading ? 'Loading…' : 'Type to search…'"
-      type="text"
+  <div class="flex flex-column gap-1">
+    <label v-if="control.schema.title" class="text-color text-left">{{
+      control.schema.title
+    }}</label>
+    <div v-if="control.description" class="text-color-secondary text-left">
+      {{ control.description }}
+    </div>
+    <AutoComplete
+      v-model="value"
+      class="w-full"
+      :suggestions="items"
+      option-label="label"
+      :placeholder="placeholder"
+      :disabled="!control.enabled"
+      @complete="onComplete"
+      @item-select="onSelect"
     />
-    <ul v-if="items.length">
-      <li v-for="it in items" :key="String(it.value)" @click="value = it.value">
-        {{ it.label }}
-      </li>
-    </ul>
-    <small v-if="error" role="alert">Failed: {{ error }}</small>
+    <small v-if="error" class="p-error" role="alert">Failed: {{ error }}</small>
   </div>
 </template>

package/src/vue/components/ProviderMultiSelect.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { ControlElement, JsonSchema } from "@jsonforms/core";
+import { useJsonFormsControl } from "@jsonforms/vue";
+import { computed, inject } from "vue";
+import { useProvider } from "../composables/useProvider";
+import MultiSelect from "primevue/multiselect";
+
+const props = defineProps<{
+  uischema: ControlElement;
+  schema: JsonSchema;
+  path: string;
+}>();
+const { control, handleChange } = useJsonFormsControl(props);
+
+const binding = computed(() => {
+  const provider = control.value.uischema?.options?.provider;
+  // Ensure load property is set to 'mount' by default
+  if (provider && typeof provider === "object" && !provider.load) {
+    return { ...provider, load: "mount" };
+  }
+  return provider;
+});
+
+const deps = computed(
+  () =>
+    ((
+      (control.value.schema as Record<string, unknown>)?.[
+        "x-provider"
+      ] as Record<string, unknown>
+    )?.dependsOn as string[]) ?? [],
+);
+const depValues = computed(() => deps.value.map(() => null)); // you can resolve actual values via control.value.data & pointers
+
+// Get the root form data from JSONForms context for template URL resolution
+const injectedFormData = inject<{ value: unknown }>("formData", { value: {} });
+const rootData = computed(() => injectedFormData.value || {});
+
+const { items, loading, error } = useProvider(binding, {
+  data: rootData, // Pass the reactive reference
+  path: control.value.path,
+  dependsOnValues: depValues.value,
+});
+
+// Provider will automatically reload when rootData changes due to reactive cache key
+
+// order-insensitive shallow equality for primitive arrays
+const sameSet = (a: unknown[], b: unknown[]) => {
+  if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length)
+    return false;
+  const s = new Set(b);
+  return a.every((v) => s.has(v));
+};
+
+// v-model with guard to avoid recursive updates
+const value = computed({
+  get() {
+    const curr = Array.isArray(control.value.data) ? control.value.data : [];
+    // return a fresh copy so MultiSelect 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 placeholder = computed(() => {
+  if (loading.value) return "Loading…";
+  // Check for placeholder in uischema options
+  const uischemaPlaceholder = (
+    control.value.uischema as { options?: { placeholder?: string } }
+  )?.options?.placeholder;
+  return uischemaPlaceholder || "Select…";
+});
+</script>
+
+<template>
+  <div class="flex flex-column gap-2">
+    <label v-if="control.schema.title" class="text-color text-left">{{
+      control.schema.title
+    }}</label>
+    <div v-if="control.description" class="text-color-secondary text-left">
+      {{ control.description }}
+    </div>
+    <MultiSelect
+      v-model="value"
+      class="w-full"
+      :options="items"
+      option-label="label"
+      option-value="value"
+      data-key="value"
+      display="chip"
+      :placeholder="placeholder"
+      :disabled="!control.enabled || loading"
+      :show-clear="true"
+    />
+    <small v-if="error" class="p-error" role="alert"
+      >Failed to load: {{ error }}</small
+    >
+  </div>
+</template>
+
+<style scoped>
+:deep(.p-multiselect-label) {
+  text-align: left;
+}
+</style>

package/src/vue/components/ProviderSelect.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { ControlElement, JsonSchema } from "@jsonforms/core";
 import { useJsonFormsControl } from "@jsonforms/vue";
-import { computed, watch } from "vue";
+import { computed, inject } from "vue";
 import { useProvider } from "../composables/useProvider";
+import Dropdown from "primevue/dropdown";
 
 const props = defineProps<{
   uischema: ControlElement;
@@ -30,41 +31,59 @@ const deps = computed(
 );
 const depValues = computed(() => deps.value.map(() => null)); // you can resolve actual values via control.value.data & pointers
 
-const { items, loading, error, reload } = useProvider(binding, {
-  data: control.value.data,
+// Get the root form data from JSONForms context for template URL resolution
+const injectedFormData = inject<{ value: unknown }>("formData", { value: {} });
+const rootData = computed(() => injectedFormData.value || {});
+
+const { items, loading, error } = useProvider(binding, {
+  data: rootData, // Pass the reactive reference
   path: control.value.path,
   dependsOnValues: depValues.value,
 });
 
-watch(
-  () => control.value.data,
-  () => {
-    // if dependsOn changed → reload
-    reload();
-  },
-);
+// Provider will automatically reload when rootData changes due to reactive cache key
 
 const value = computed({
   get: () => control.value.data,
   set: (v) => handleChange(control.value.path, v),
 });
+
+const placeholder = computed(() => {
+  if (loading.value) return "Loading…";
+  // Check for placeholder in uischema options
+  const uischemaPlaceholder = (
+    control.value.uischema as { options?: { placeholder?: string } }
+  )?.options?.placeholder;
+  return uischemaPlaceholder || "Select…";
+});
 </script>
 
 <template>
-  <div class="provider-select">
-    <label>{{ control.schema.title }}</label>
-    <select v-model="value">
-      <option value="" disabled>{{ loading ? "Loading…" : "Select…" }}</option>
-      <option v-for="it in items" :key="String(it.value)" :value="it.value">
-        {{ it.label }}
-      </option>
-    </select>
-    <small v-if="error" role="alert">Failed to load: {{ error }}</small>
+  <div class="flex flex-column gap-2">
+    <label v-if="control.schema.title" class="text-color text-left">{{
+      control.schema.title
+    }}</label>
+    <div v-if="control.description" class="text-color-secondary text-left">
+      {{ control.description }}
+    </div>
+    <Dropdown
+      v-model="value"
+      class="w-full"
+      :options="items"
+      option-label="label"
+      option-value="value"
+      :placeholder="placeholder"
+      :disabled="!control.enabled || loading"
+      :show-clear="true"
+    />
+    <small v-if="error" class="p-error" role="alert"
+      >Failed to load: {{ error }}</small
+    >
   </div>
 </template>
 
 <style scoped>
-.provider-select select {
-  min-width: 16rem;
+:deep(.p-dropdown-label) {
+  text-align: left;
 }
 </style>

package/src/vue/composables/useProvider.ts

@@ -23,7 +23,7 @@ export function useProvider(
     | Ref<ProviderBinding>
     | ComputedRef<ProviderBinding>,
   ctxBits: {
-    data: unknown;
+    data: unknown | Ref<unknown> | ComputedRef<unknown>;
     path: string;
     dependsOnValues?: unknown[];
     uiQuery?: string;
@@ -46,6 +46,7 @@ export function useProvider(
       b: unref(binding),
       d: ctxBits.dependsOnValues ?? [],
       q: ctxBits.uiQuery ?? "",
+      data: unref(ctxBits.data), // Include data in cache key for reactivity
     }),
   );
 
@@ -68,7 +69,7 @@ export function useProvider(
         );
       }
       const out = await driver.resolve(bindingValue.config ?? {}, {
-        data: ctxBits.data,
+        data: unref(ctxBits.data),
         path: ctxBits.path,
         ui: { query: ctxBits.uiQuery },
         signal: ac.signal,

package/src/vue/index.ts

@@ -9,6 +9,7 @@ import {
 } from "@jsonforms/core";
 import ProviderAutocomplete from "./components/ProviderAutocomplete.vue";
 import ProviderSelect from "./components/ProviderSelect.vue";
+import ProviderMultiSelect from "./components/ProviderMultiSelect.vue";
 
 // Custom tester that checks if provider option exists (as object or boolean)
 const hasProvider = (uischema: UISchemaElement) => {
@@ -17,7 +18,7 @@ const hasProvider = (uischema: UISchemaElement) => {
 
 // Create specific testers for each component type
 const providerSelectTester = rankWith(
-  6,
+  106, // Higher than PrimeVue base (100) to ensure providers take precedence
   and(
     or(isStringControl, isNumberControl, isIntegerControl),
     hasProvider,
@@ -26,7 +27,7 @@ const providerSelectTester = rankWith(
 );
 
 const providerAutocompleteTester = rankWith(
-  7,
+  107, // Higher than PrimeVue base (100) to ensure providers take precedence
   and(
     or(isStringControl, isNumberControl, isIntegerControl),
     hasProvider,
@@ -34,11 +35,39 @@ const providerAutocompleteTester = rankWith(
   ),
 );
 
+// Custom array tester - check both uischema control type and schema type
+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;
+  };
+
+  return propertySchema?.type === "array";
+};
+
+const providerMultiSelectTester = rankWith(
+  108, // Highest priority for array controls with providers
+  and(isArrayControl, hasProvider),
+);
+
 export const providerRenderers = [
-  { tester: providerSelectTester, renderer: ProviderSelect },
+  { tester: providerMultiSelectTester, renderer: ProviderMultiSelect },
   { tester: providerAutocompleteTester, renderer: ProviderAutocomplete },
+  { tester: providerSelectTester, renderer: ProviderSelect },
 ];
 
-export { ProviderAutocomplete, ProviderSelect };
+// Export PrimeVue renderers (styles are auto-injected)
+export { primevueRenderers } from "./primevue";
+
+// Export individual components
+export { ProviderAutocomplete, ProviderSelect, ProviderMultiSelect };
 export { useProvider } from "./composables/useProvider";
 export * from "./testers";
+export * from "./primevue";

package/src/vue/primevue/JfBoolean.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ControlElement } from "@jsonforms/core";
+import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
+import Checkbox from "primevue/checkbox";
+
+defineOptions({ name: "JfBoolean" });
+
+const props = defineProps(rendererProps<ControlElement>());
+const { control, handleChange } = useJsonFormsControl(props);
+
+const onToggle = (val: boolean) => handleChange(control.value.path, val);
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <Checkbox
+      :binary="true"
+      :model-value="!!control.data"
+      :disabled="!control.enabled"
+      :aria-invalid="!!control.errors || undefined"
+      @update:model-value="onToggle"
+    />
+    <label v-if="control.label">{{ control.label }}</label>
+    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+  </div>
+</template>

package/src/vue/primevue/JfEnum.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { ControlElement, JsonSchema } from "@jsonforms/core";
+import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
+import { computed } from "vue";
+import Dropdown from "primevue/dropdown";
+
+defineOptions({ name: "JfEnum" });
+
+const props = defineProps(rendererProps<ControlElement>());
+const { control, handleChange } = useJsonFormsControl(props);
+
+type Opt = { label: string; value: unknown };
+const toOptions = (schema?: JsonSchema): Opt[] => {
+  if (!schema) return [];
+  const s = schema as {
+    enum?: unknown[];
+    oneOf?: Array<{ title?: string; const: unknown }>;
+  };
+  if (Array.isArray(s.enum))
+    return s.enum.map((v: unknown) => ({ label: String(v), value: v }));
+  if (Array.isArray(s.oneOf))
+    return s.oneOf.map((o) => ({
+      label: o.title ?? String(o.const),
+      value: o.const,
+    }));
+  return [];
+};
+
+const placeholder = computed<string | undefined>(
+  () =>
+    (control.value.uischema as { options?: { placeholder?: string } })?.options
+      ?.placeholder ?? control.value.description,
+);
+
+const options = computed(() => toOptions(control.value.schema));
+const onSelect = (val: unknown) => handleChange(control.value.path, val);
+</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">
+      {{ control.description }}
+    </div>
+    <Dropdown
+      class="w-full"
+      :options="options"
+      option-label="label"
+      option-value="value"
+      :model-value="control.data ?? null"
+      :placeholder="placeholder"
+      :disabled="!control.enabled"
+      :aria-invalid="!!control.errors || undefined"
+      :show-clear="true"
+      @update:model-value="onSelect"
+    />
+    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+  </div>
+</template>
+
+<style scoped>
+:deep(.p-dropdown-label) {
+  text-align: left;
+}
+</style>

package/src/vue/primevue/JfEnumArray.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { ControlElement, JsonSchema } from "@jsonforms/core";
+import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
+import { computed } from "vue";
+import MultiSelect from "primevue/multiselect";
+
+defineOptions({ name: "JfEnumArray" });
+
+const props = defineProps(rendererProps<ControlElement>());
+const { control, handleChange } = useJsonFormsControl(props);
+
+type Opt = { label: string; value: unknown };
+const toOptions = (schema?: JsonSchema): Opt[] => {
+  if (!schema) return [];
+  const s = schema as {
+    enum?: unknown[];
+    oneOf?: Array<{ title?: string; const: unknown }>;
+  };
+  if (Array.isArray(s.enum))
+    return s.enum.map((v: unknown) => ({ label: String(v), value: v }));
+  if (Array.isArray(s.oneOf))
+    return s.oneOf.map((o) => ({
+      label: o.title ?? String(o.const),
+      value: o.const,
+    }));
+  return [];
+};
+
+const options = computed(() =>
+  toOptions((control.value.schema as { items?: JsonSchema })?.items),
+);
+const placeholder = computed<string | undefined>(
+  () =>
+    (control.value.uischema as { options?: { placeholder?: string } })?.options
+      ?.placeholder ?? control.value.description,
+);
+
+// order-insensitive shallow equality for primitive enums
+const sameSet = (a: unknown[], b: unknown[]) => {
+  if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length)
+    return false;
+  const s = new Set(b);
+  return a.every((v) => s.has(v));
+};
+
+// v-model with guard to avoid recursive updates
+const model = computed<unknown[]>({
+  get() {
+    const curr = Array.isArray(control.value.data) ? control.value.data : [];
+    // 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);
+  },
+});
+</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">
+      {{ control.description }}
+    </div>
+
+    <MultiSelect
+      v-model="model"
+      class="w-full"
+      :options="options"
+      option-label="label"
+      option-value="value"
+      data-key="value"
+      display="chip"
+      :disabled="!control.enabled"
+      :aria-invalid="!!control.errors || undefined"
+      :placeholder="placeholder"
+    />
+
+    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+  </div>
+</template>

package/src/vue/primevue/JfNumber.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { ControlElement } from "@jsonforms/core";
+import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
+import { computed } from "vue";
+import InputNumber from "primevue/inputnumber";
+
+defineOptions({ name: "JfNumber" });
+
+const props = defineProps(rendererProps<ControlElement>());
+const { control, handleChange } = useJsonFormsControl(props);
+
+const placeholder = computed<string | undefined>(
+  () =>
+    (control.value.uischema as { options?: { placeholder?: string } })?.options
+      ?.placeholder ?? control.value.description,
+);
+
+const onNumber = (val: number | null) =>
+  handleChange(control.value.path, val ?? undefined);
+</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">
+      {{ control.description }}
+    </div>
+    <InputNumber
+      class="w-full"
+      input-class="w-full"
+      :use-grouping="false"
+      :model-value="typeof control.data === 'number' ? control.data : null"
+      :placeholder="placeholder"
+      :disabled="!control.enabled"
+      :aria-invalid="!!control.errors || undefined"
+      @update:model-value="onNumber"
+    />
+    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+  </div>
+</template>

package/src/vue/primevue/JfText.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { ControlElement } from "@jsonforms/core";
+import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
+import { computed } from "vue";
+import InputText from "primevue/inputtext";
+
+defineOptions({ name: "JfText" });
+
+const props = defineProps(rendererProps<ControlElement>());
+const { control, handleChange } = useJsonFormsControl(props);
+
+const placeholder = computed<string | undefined>(
+  () =>
+    (control.value.uischema as { options?: { placeholder?: string } })?.options
+      ?.placeholder ?? control.value.description,
+);
+
+function onInput(val: string | undefined) {
+  const newValue = val ?? "";
+  if ((control.value.data ?? "") !== newValue) {
+    handleChange(control.value.path, newValue);
+  }
+}
+</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">
+      {{ control.description }}
+    </div>
+    <InputText
+      class="w-full"
+      :model-value="control.data ?? ''"
+      :disabled="!control.enabled"
+      :aria-invalid="!!control.errors || undefined"
+      :placeholder="placeholder"
+      autocapitalize="off"
+      autocomplete="off"
+      spellcheck="false"
+      @update:model-value="onInput"
+    />
+    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+  </div>
+</template>

package/src/vue/primevue/JfTextArea.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { ControlElement } from "@jsonforms/core";
+import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
+import { computed } from "vue";
+import Textarea from "primevue/textarea";
+
+defineOptions({ name: "JfTextArea" });
+
+const props = defineProps(rendererProps<ControlElement>());
+const { control, handleChange } = useJsonFormsControl(props);
+
+const placeholder = computed<string | undefined>(
+  () =>
+    (control.value.uischema as { options?: { placeholder?: string } })?.options
+      ?.placeholder ?? control.value.description,
+);
+
+function onInput(val: string | undefined) {
+  const newValue = val ?? "";
+  if ((control.value.data ?? "") !== newValue) {
+    handleChange(control.value.path, newValue);
+  }
+}
+</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">
+      {{ control.description }}
+    </div>
+    <Textarea
+      class="w-full"
+      :model-value="control.data ?? ''"
+      :disabled="!control.enabled"
+      :aria-invalid="!!control.errors || undefined"
+      :placeholder="placeholder"
+      :rows="4"
+      :auto-resize="true"
+      @update:model-value="onInput"
+    />
+    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+  </div>
+</template>