@narrative.io/jsonforms-provider-protocols 1.1.0-beta.0 → 1.1.0-beta.10

package/src/index.ts

@@ -13,8 +13,21 @@ export * from "./core/types";
 // Protocol exports
 export { RestApiProtocol } from "./protocols/rest_api";
 
-// Vue exports
-export * as vue from "./vue";
+// Vue exports - using named imports to avoid potential bundling issues
+export {
+  providerRenderers,
+  primevueRenderers,
+  ProviderAutocomplete,
+  ProviderSelect,
+  ProviderMultiSelect,
+  useProvider,
+  JfText,
+  JfTextArea,
+  JfNumber,
+  JfEnum,
+  JfEnumArray,
+  JfBoolean,
+} from "./vue";
 
 export interface ProviderConfig {
   protocols?: Protocol[];

package/src/protocols/rest_api.ts

@@ -17,6 +17,7 @@ export type RestApiCfg = {
   map: { label: string; value: string; meta?: Record<string, string> }; // relative to each item
   paginate?: { cursorPath: string; param: string; maxPages?: number };
   auth?: AuthConfig;
+  showError?: boolean; // Whether to show error messages, defaults to true
 };
 
 function buildAuthHeaders(
@@ -122,7 +123,13 @@ export const RestApiProtocol = (): Protocol<RestApiCfg> => ({
       }
 
       const res = await fetch(url.toString(), requestInit);
-      if (!res.ok) throw new Error(`REST ${res.status}`);
+      if (!res.ok) {
+        if (cfg.showError !== false) {
+          throw new Error(`REST ${res.status}`);
+        }
+        // If showError is false, return empty items instead of throwing
+        return { items: [], ttl: 0 };
+      }
       const json = await res.json();
       const items = jp(json, cfg.items);
       for (const it of items) {

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/composables/useDerive.ts

@@ -0,0 +1,105 @@
+import { computed, watch, inject, type Ref } from "vue";
+import { type ControlElement } from "@jsonforms/core";
+
+interface DeriveOptions {
+  control: Ref<{
+    uischema: ControlElement;
+    path: string;
+    data: unknown;
+  }>;
+  handleChange: (path: string, value: unknown) => void;
+}
+
+export function useDerive({ control, handleChange }: 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 || {});
+
+  // Extract derive configuration from uischema options
+  const deriveConfig = computed(() => {
+    const options = control.value.uischema?.options as
+      | { derive?: string; mode?: string }
+      | undefined;
+    return {
+      expression: options?.derive,
+      mode: options?.mode || "follow", // 'follow' = auto-update, 'manual' = user controlled
+    };
+  });
+
+  // Watch for changes in form data and external data and update derived field
+  watch(
+    [rootData, externalData, deriveConfig],
+    ([data, extData, config]) => {
+      if (!config.expression || config.mode !== "follow") {
+        return;
+      }
+
+      try {
+        const derivedValue = resolveDeriveExpression(
+          config.expression,
+          data,
+          extData,
+        );
+        if (derivedValue !== control.value.data) {
+          handleChange(control.value.path, derivedValue);
+        }
+      } catch (error) {
+        console.warn(
+          `Failed to derive value for ${control.value.path}:`,
+          error,
+        );
+      }
+    },
+    { deep: true, immediate: true },
+  );
+}
+
+function resolveDeriveExpression(
+  expression: string,
+  data: unknown,
+  externalData?: 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 simple property paths like "country.name"
+  if (
+    !expression.includes("(") &&
+    !expression.includes("+") &&
+    !expression.includes("?")
+  ) {
+    return resolvePropertyPath(expression, data);
+  }
+
+  // For now, we'll only support simple property paths and externalData() calls
+  // Complex expressions would require a safe expression evaluator
+  return resolvePropertyPath(expression, data);
+}
+
+function resolvePropertyPath(path: string, data: unknown): unknown {
+  if (!path || !data) return "";
+
+  const keys = path.split(".");
+  let value: unknown = data;
+
+  for (const key of keys) {
+    if (value && typeof value === "object" && key in value) {
+      value = (value as Record<string, unknown>)[key];
+    } else {
+      return null;
+    }
+  }
+
+  return value;
+}

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) => {
@@ -34,16 +35,48 @@ 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 PrimeVue renderers (styles are auto-injected)
 export { primevueRenderers } from "./primevue";
 
 // Export individual components
-export { ProviderAutocomplete, ProviderSelect };
+export { ProviderAutocomplete, ProviderSelect, ProviderMultiSelect };
 export { useProvider } from "./composables/useProvider";
 export * from "./testers";
-export * from "./primevue";
+
+// Export individual PrimeVue components using lazy evaluation to avoid circular deps
+export {
+  JfText,
+  JfTextArea,
+  JfNumber,
+  JfEnum,
+  JfEnumArray,
+  JfBoolean,
+} from "./primevue";

package/src/vue/primevue/JfBoolean.vue

@@ -1,11 +1,48 @@
+<script lang="ts">
+export default {
+  name: "JfBoolean",
+  props: {
+    uischema: {
+      type: Object,
+      required: true,
+    },
+    schema: {
+      type: Object,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+    enabled: {
+      type: Boolean,
+      default: undefined,
+    },
+    renderers: {
+      type: Array,
+      required: false,
+    },
+    cells: {
+      type: Array,
+      required: false,
+    },
+    config: {
+      type: Object,
+      required: false,
+    },
+  },
+};
+</script>
+
 <script setup lang="ts">
-import type { ControlElement } from "@jsonforms/core";
-import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
+import type { ControlProps } from "@jsonforms/vue";
+import { useJsonFormsControl } from "@jsonforms/vue";
+import { getCurrentInstance } from "vue";
 import Checkbox from "primevue/checkbox";
 
-defineOptions({ name: "JfBoolean" });
-
-const props = defineProps(rendererProps<ControlElement>());
+// Access props from the component instance
+const instance = getCurrentInstance()!;
+const props = instance.props as unknown as ControlProps;
 const { control, handleChange } = useJsonFormsControl(props);
 
 const onToggle = (val: boolean) => handleChange(control.value.path, val);

package/src/vue/primevue/JfEnum.vue

@@ -1,12 +1,52 @@
+<script lang="ts">
+// Define props manually to avoid any potential circular dependency issues
+export default {
+  name: "JfEnum",
+  props: {
+    uischema: {
+      type: Object,
+      required: true,
+    },
+    schema: {
+      type: Object,
+      required: true,
+    },
+    path: {
+      type: String,
+      required: true,
+    },
+    enabled: {
+      type: Boolean,
+      default: undefined,
+    },
+    renderers: {
+      type: Array,
+      required: false,
+    },
+    cells: {
+      type: Array,
+      required: false,
+    },
+    config: {
+      type: Object,
+      required: false,
+    },
+  },
+};
+</script>
+
 <script setup lang="ts">
-import type { ControlElement, JsonSchema } from "@jsonforms/core";
-import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
-import { computed } from "vue";
+import type { JsonSchema } from "@jsonforms/core";
+import type { ControlProps } from "@jsonforms/vue";
+import { useJsonFormsControl } from "@jsonforms/vue";
+import { computed, ref, inject, getCurrentInstance } from "vue";
+import { useProvider } from "../composables/useProvider";
+import { useDerive } from "../composables/useDerive";
 import Dropdown from "primevue/dropdown";
 
-defineOptions({ name: "JfEnum" });
-
-const props = defineProps(rendererProps<ControlElement>());
+// Access props from the component instance
+const instance = getCurrentInstance()!;
+const props = instance.props as unknown as ControlProps;
 const { control, handleChange } = useJsonFormsControl(props);
 
 type Opt = { label: string; value: unknown };
@@ -26,14 +66,87 @@ const toOptions = (schema?: JsonSchema): Opt[] => {
   return [];
 };
 
-const placeholder = computed<string | undefined>(
+// Provider support
+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.uischema as { options?: { placeholder?: string } })?.options
-      ?.placeholder ?? control.value.description,
+    ((
+      (control.value.schema as Record<string, unknown>)?.[
+        "x-provider"
+      ] as Record<string, unknown>
+    )?.dependsOn as string[]) ?? [],
 );
+const depValues = computed(() => {
+  return deps.value.map((dep) => {
+    // Resolve dependency value from form data using JSON pointer-like path
+    const path = dep.startsWith("#/") ? dep.slice(2) : dep;
+    const keys = path.replace(/\//g, ".").split(".");
+    let value: unknown = rootData.value;
+    for (const key of keys) {
+      if (value && typeof value === "object" && key in value) {
+        value = (value as Record<string, unknown>)[key];
+      } else {
+        return null;
+      }
+    }
+    return value;
+  });
+});
+
+// Get the root form data from JSONForms context for template URL resolution
+const injectedFormData = inject<{ value: unknown }>("formData", { value: {} });
+const rootData = computed(() => injectedFormData.value || {});
+
+// Use provider if available, otherwise fall back to schema enum/oneOf
+const {
+  items: providerItems,
+  loading,
+  error,
+} = useProvider(binding, {
+  data: rootData,
+  path: control.value.path,
+  dependsOnValues: depValues.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 options = computed(() => {
+  // Use provider items if available, otherwise fall back to schema enum/oneOf
+  if (binding.value && providerItems.value.length > 0) {
+    return providerItems.value;
+  }
+  return toOptions(control.value.schema);
+});
+
+// Add derive functionality
+useDerive({ control, handleChange });
+
+// Track user interaction
+const hasInteracted = ref(false);
+
+const showErrors = computed(() => hasInteracted.value && control.value.errors);
 
-const options = computed(() => toOptions(control.value.schema));
-const onSelect = (val: unknown) => handleChange(control.value.path, val);
+const onSelect = (val: unknown) => {
+  handleChange(control.value.path, val);
+};
+
+const onBlur = () => {
+  hasInteracted.value = true;
+};
 </script>
 
 <template>
@@ -51,17 +164,15 @@ const onSelect = (val: unknown) => handleChange(control.value.path, val);
       option-value="value"
       :model-value="control.data ?? null"
       :placeholder="placeholder"
-      :disabled="!control.enabled"
-      :aria-invalid="!!control.errors || undefined"
+      :disabled="!control.enabled || loading"
+      :aria-invalid="!!showErrors || undefined"
       :show-clear="true"
       @update:model-value="onSelect"
+      @blur="onBlur"
     />
-    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+    <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>
   </div>
 </template>
-
-<style scoped>
-:deep(.p-dropdown-label) {
-  text-align: left;
-}
-</style>