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

package/src/core/transforms.ts

@@ -14,30 +14,38 @@ export interface FlattenTransform extends Transform {
   labelFormat?: string; // Optional format string like "{parent.name} → {name}"
 }
 
+export type FilterOperator =
+  | "eq"
+  | "neq"
+  | "empty"
+  | "notEmpty"
+  | "gt"
+  | "gte"
+  | "lt"
+  | "lte"
+  | "contains";
+
+export interface FilterCondition {
+  key: string;
+  operator?: FilterOperator; // Defaults to "eq" when values is provided, "exists" behavior when neither
+  values?: unknown[];
+}
+
 export interface FilterTransform extends Transform {
   name: "filter";
-  key: string; // The key to check
-  values?: unknown[]; // Optional array of values to match against
+  key?: string; // Legacy: single key to check
+  values?: unknown[]; // Legacy: single values array
+  conditions?: FilterCondition[]; // Multi-condition filter (AND logic)
 }
 
 export type TransformStep = FlattenTransform | FilterTransform;
 
 export type TransformPipeline = TransformStep[];
 
-/**
- * Registry of transform functions
- */
 type TransformFunction = (items: unknown[], config: Transform) => unknown[];
 
 const transformRegistry: Record<string, TransformFunction> = {};
 
-/**
- * Register a transform function
- */
-export function registerTransform(name: string, fn: TransformFunction): void {
-  transformRegistry[name] = fn;
-}
-
 /**
  * Apply a pipeline of transforms to data
  */
@@ -124,29 +132,113 @@ function flattenTransform(items: unknown[], config: Transform): unknown[] {
   return flattened;
 }
 
+function isEmpty(value: unknown): boolean {
+  if (value === null || value === undefined) return true;
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === "string") return value.length === 0;
+  return false;
+}
+
+function evaluateCondition(
+  itemObj: Record<string, unknown>,
+  condition: FilterCondition,
+): boolean {
+  const value = itemObj[condition.key];
+  const operator = condition.operator ?? (condition.values ? "eq" : "eq");
+
+  switch (operator) {
+    case "eq":
+      if (!condition.values || condition.values.length === 0) {
+        return condition.key in itemObj;
+      }
+      return condition.values.includes(value);
+    case "neq":
+      if (!condition.values || condition.values.length === 0) {
+        return !(condition.key in itemObj);
+      }
+      return !condition.values.includes(value);
+    case "empty":
+      return isEmpty(value);
+    case "notEmpty":
+      return !isEmpty(value);
+    case "gt":
+      return (
+        typeof value === "number" &&
+        condition.values !== undefined &&
+        value > (condition.values[0] as number)
+      );
+    case "gte":
+      return (
+        typeof value === "number" &&
+        condition.values !== undefined &&
+        value >= (condition.values[0] as number)
+      );
+    case "lt":
+      return (
+        typeof value === "number" &&
+        condition.values !== undefined &&
+        value < (condition.values[0] as number)
+      );
+    case "lte":
+      return (
+        typeof value === "number" &&
+        condition.values !== undefined &&
+        value <= (condition.values[0] as number)
+      );
+    case "contains":
+      if (typeof value === "string" && condition.values) {
+        return condition.values.some((v) => value.includes(String(v)));
+      }
+      if (Array.isArray(value) && condition.values) {
+        return condition.values.some((v) => value.includes(v));
+      }
+      return false;
+    default:
+      return false;
+  }
+}
+
 /**
- * Filter transform - filters items based on a key and optional values
+ * Filter transform - filters items based on conditions
+ *
+ * Supports legacy single key/values syntax and new multi-condition syntax.
+ * When using conditions, all conditions must match (AND logic).
+ *
+ * Operators:
+ *   eq       - item[key] matches one of values (default)
+ *   neq      - item[key] does NOT match any of values
+ *   empty    - item[key] is null, undefined, empty array, or empty string
+ *   notEmpty - inverse of empty
+ *   gt       - item[key] > values[0]
+ *   gte      - item[key] >= values[0]
+ *   lt       - item[key] < values[0]
+ *   lte      - item[key] <= values[0]
+ *   contains - string includes substring, or array includes value
  */
 function filterTransform(items: unknown[], config: Transform): unknown[] {
   const filterConfig = config as FilterTransform;
-  const { key, values } = filterConfig;
+
+  // Build conditions array from either new or legacy syntax
+  let conditions: FilterCondition[];
+
+  if (filterConfig.conditions) {
+    conditions = filterConfig.conditions;
+  } else if (filterConfig.key) {
+    // Legacy single key/values syntax
+    conditions = [{ key: filterConfig.key, values: filterConfig.values }];
+  } else {
+    return items;
+  }
 
   return items.filter((item) => {
     if (typeof item !== "object" || item === null) return false;
-
     const itemObj = item as Record<string, unknown>;
-
-    // If no values array provided, just check if the key exists
-    if (!values || values.length === 0) {
-      return key in itemObj;
-    }
-
-    // If values array provided, check if item[key] matches any of the values
-    const itemValue = itemObj[key];
-    return values.includes(itemValue);
+    return conditions.every((condition) =>
+      evaluateCondition(itemObj, condition),
+    );
   });
 }
 
 // Register built-in transforms
-registerTransform("flatten", flattenTransform);
-registerTransform("filter", filterTransform);
+transformRegistry["flatten"] = flattenTransform;
+transformRegistry["filter"] = filterTransform;

package/src/core/types.ts

@@ -44,3 +44,12 @@ export interface AuthConfig {
   token?: string | (() => string); // Generic token auth
   [key: string]: unknown; // Custom auth fields
 }
+
+export interface ConnectorDataLayer {
+  dataset_name?: string;
+  dataset_description?: string;
+  dataset_id?: number;
+  profile_id?: string;
+  profile_name?: string;
+  datasetWriteMode?: "append" | "overwrite";
+}

package/src/index.ts

@@ -3,15 +3,18 @@ import { cache as globalCache } from "./core/cache";
 import { registry as globalRegistry } from "./core/registry";
 import type { Protocol, AuthConfig } from "./core/types";
 
-console.log("[jsonforms-provider-protocols] loaded v2.10.0");
+console.log("[jsonforms-provider-protocols] loaded v2.10.0 (symlink)");
 
 export { cache } from "./core/cache";
 export * from "./core/jsonpath";
 export { registry } from "./core/registry";
 export * from "./core/templating";
 export * from "./core/transforms";
+export * from "./core/projection";
+export * from "./core/resolveScope";
 // Core exports
 export * from "./core/types";
+export { initFormDataFromSchema } from "./core/initFormData";
 
 // Protocol exports
 export { RestApiProtocol } from "./protocols/rest_api";
@@ -24,6 +27,8 @@ export {
   ProviderSelect,
   ProviderMultiSelect,
   useProvider,
+  createDataLayer,
+  useDataLayer,
   JfText,
   JfTextArea,
   JfNumber,
@@ -31,6 +36,7 @@ export {
   JfEnumArray,
   JfBoolean,
 } from "./vue";
+export type { DataLayer } from "./vue";
 
 export interface ProviderConfig {
   protocols?: Protocol[];

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 { useProjection } from "../composables/useProjection";
 import AutoComplete from "primevue/autocomplete";
 
 const props = defineProps<{
@@ -10,7 +11,11 @@ const props = defineProps<{
   schema: JsonSchema;
   path: string;
 }>();
-const { control, handleChange } = useJsonFormsControl(props);
+const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
+const { projectedData, handleProjectedChange: handleChange } = useProjection(
+  control,
+  rawHandleChange,
+);
 
 const binding = computed(() => {
   const provider = control.value.uischema?.options?.provider;
@@ -33,7 +38,7 @@ watch(query, () => {
 });
 
 const value = computed({
-  get: () => control.value.data,
+  get: () => projectedData.value,
   set: (v) => handleChange(control.value.path, v),
 });
 
@@ -51,11 +56,11 @@ const onSelect = (event: { value?: { value?: unknown } | unknown }) => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-1">
-    <label v-if="control.schema.title" class="text-color text-left">{{
+  <div class="jf-control">
+    <label v-if="control.schema.title" class="jf-label">{{
       control.schema.title
     }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <AutoComplete

package/src/vue/components/ProviderMultiSelect.vue

@@ -3,6 +3,7 @@ import type { ControlElement, JsonSchema } from "@jsonforms/core";
 import { useJsonFormsControl } from "@jsonforms/vue";
 import { computed, inject, watch } from "vue";
 import { useProvider } from "../composables/useProvider";
+import { useProjection } from "../composables/useProjection";
 import { shouldAutoSelectMulti } from "../utils/autoSelect";
 import MultiSelect from "primevue/multiselect";
 
@@ -11,7 +12,11 @@ const props = defineProps<{
   schema: JsonSchema;
   path: string;
 }>();
-const { control, handleChange } = useJsonFormsControl(props);
+const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
+const { projectedData, handleProjectedChange: handleChange } = useProjection(
+  control,
+  rawHandleChange,
+);
 
 const binding = computed(() => {
   const provider = control.value.uischema?.options?.provider;
@@ -53,7 +58,9 @@ watch(
         control.value.uischema?.options?.autoSelectSingle === true,
       isLoading,
       items: newItems,
-      currentValue: Array.isArray(control.value.data) ? control.value.data : [],
+      currentValue: Array.isArray(projectedData.value)
+        ? projectedData.value
+        : [],
     });
 
     if (valueToSelect !== null) {
@@ -74,13 +81,13 @@ const sameSet = (a: unknown[], b: unknown[]) => {
 // v-model with guard to avoid recursive updates
 const value = computed({
   get() {
-    const curr = Array.isArray(control.value.data) ? control.value.data : [];
+    const curr = Array.isArray(projectedData.value) ? projectedData.value : [];
     // 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 : [];
+    const curr = Array.isArray(projectedData.value) ? projectedData.value : [];
     if (!sameSet(curr, next)) handleChange(control.value.path, next);
   },
 });
@@ -96,11 +103,11 @@ const placeholder = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-2">
-    <label v-if="control.schema.title" class="text-color text-left">{{
+  <div class="jf-control">
+    <label v-if="control.schema.title" class="jf-label">{{
       control.schema.title
     }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <MultiSelect

package/src/vue/components/ProviderSelect.vue

@@ -3,6 +3,8 @@ import type { ControlElement, JsonSchema } from "@jsonforms/core";
 import { useJsonFormsControl } from "@jsonforms/vue";
 import { computed, inject, watch } from "vue";
 import { useProvider } from "../composables/useProvider";
+import { useDeriveInitialValue } from "../composables/useDeriveInitialValue";
+import { useProjection } from "../composables/useProjection";
 import { shouldAutoSelect } from "../utils/autoSelect";
 import Dropdown from "primevue/dropdown";
 
@@ -11,7 +13,11 @@ const props = defineProps<{
   schema: JsonSchema;
   path: string;
 }>();
-const { control, handleChange } = useJsonFormsControl(props);
+const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
+const { projectedData, handleProjectedChange: handleChange } = useProjection(
+  control,
+  rawHandleChange,
+);
 
 const binding = computed(() => {
   const provider = control.value.uischema?.options?.provider;
@@ -44,6 +50,9 @@ const { items, loading, error } = useProvider(binding, {
 
 // Provider will automatically reload when rootData changes due to reactive cache key
 
+// deriveInitialValue — async API-based initial value seeding
+useDeriveInitialValue({ control, handleChange });
+
 // Auto-select when provider returns only one item (enabled by default)
 watch(
   [items, loading],
@@ -53,7 +62,7 @@ watch(
         control.value.uischema?.options?.autoSelectSingle !== false,
       isLoading,
       items: newItems,
-      currentValue: control.value.data,
+      currentValue: projectedData.value,
     });
 
     if (valueToSelect !== null) {
@@ -64,7 +73,7 @@ watch(
 );
 
 const value = computed({
-  get: () => control.value.data,
+  get: () => projectedData.value,
   set: (v) => handleChange(control.value.path, v),
 });
 
@@ -79,11 +88,11 @@ const placeholder = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-2">
-    <label v-if="control.schema.title" class="text-color text-left">{{
+  <div class="jf-control">
+    <label v-if="control.schema.title" class="jf-label">{{
       control.schema.title
     }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <Dropdown

package/src/vue/composables/useDataLayer.ts

@@ -0,0 +1,43 @@
+import {
+  ref,
+  provide,
+  inject,
+  readonly,
+  type DeepReadonly,
+  type Ref,
+} from "vue";
+import type { ConnectorDataLayer } from "../../core/types";
+
+export const DATA_LAYER_KEY = Symbol("dataLayer");
+
+export interface DataLayer {
+  push(data: Partial<ConnectorDataLayer>): void;
+  state: DeepReadonly<Ref<ConnectorDataLayer>>;
+}
+
+export function createDataLayer(): DataLayer {
+  const state = ref<ConnectorDataLayer>({});
+
+  const dataLayer: DataLayer = {
+    push(data: Partial<ConnectorDataLayer>) {
+      state.value = { ...state.value, ...data };
+    },
+    state: readonly(state) as DeepReadonly<Ref<ConnectorDataLayer>>,
+  };
+
+  provide(DATA_LAYER_KEY, dataLayer);
+
+  return dataLayer;
+}
+
+export function useDataLayer(): DeepReadonly<Ref<ConnectorDataLayer>> {
+  const dataLayer = inject<DataLayer | null>(DATA_LAYER_KEY, null);
+  if (dataLayer) {
+    return dataLayer.state;
+  }
+
+  // No dataLayer provided — return empty reactive ref
+  return readonly(ref<ConnectorDataLayer>({})) as DeepReadonly<
+    Ref<ConnectorDataLayer>
+  >;
+}

package/src/vue/composables/useDerive.ts

@@ -1,5 +1,14 @@
-import { computed, watch, inject, type Ref } from "vue";
+import {
+  computed,
+  ref,
+  watch,
+  unref,
+  inject,
+  type Ref,
+  type ComputedRef,
+} from "vue";
 import { type ControlElement } from "@jsonforms/core";
+import { useDataLayer } from "./useDataLayer";
 
 interface DeriveOptions {
   control: Ref<{
@@ -8,20 +17,25 @@ interface DeriveOptions {
     data: unknown;
   }>;
   handleChange: (path: string, value: unknown) => void;
+  /** When projection is active, pass projectedData so the comparison
+   *  matches the projected (unwrapped) value rather than raw scope data. */
+  data?: Ref<unknown> | ComputedRef<unknown>;
 }
 
-export function useDerive({ control, handleChange }: DeriveOptions) {
+export function useDerive({
+  control,
+  handleChange,
+  data: dataOverride,
+}: 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 || {});
+  // Get data from the dataLayer
+  const dataLayerState = useDataLayer();
+  const dataLayerData = computed(() => dataLayerState.value || {});
 
   // Extract derive configuration from uischema options
   const deriveConfig = computed(() => {
@@ -34,9 +48,17 @@ export function useDerive({ control, handleChange }: DeriveOptions) {
     };
   });
 
-  // Watch for changes in form data and external data and update derived field
+  // Track the last resolved source value so we only update the field
+  // when the source itself changes, not on every form data mutation.
+  const lastDerivedValue = ref<unknown>(undefined);
+  // First watch fire is special: a pre-populated field (edit flow seeded
+  // from a saved connection) must not be clobbered by whatever the source
+  // resolves to on mount. We record the source value but skip handleChange.
+  let isFirstRun = true;
+
+  // Watch for changes in form data and dataLayer and update derived field
   watch(
-    [rootData, externalData, deriveConfig],
+    [rootData, dataLayerData, deriveConfig],
     ([data, extData, config]) => {
       if (!config.expression || config.mode !== "follow") {
         return;
@@ -48,7 +70,31 @@ export function useDerive({ control, handleChange }: DeriveOptions) {
           data,
           extData,
         );
-        if (derivedValue !== control.value.data) {
+        const compareData = dataOverride
+          ? unref(dataOverride)
+          : control.value.data;
+
+        if (isFirstRun) {
+          isFirstRun = false;
+          lastDerivedValue.value = derivedValue;
+          // On mount, only populate the field if it's empty.
+          // A non-empty seed represents user intent (edit flow) and must
+          // be preserved. Subsequent source changes will still propagate.
+          const isFieldEmpty =
+            compareData === undefined ||
+            compareData === null ||
+            compareData === "";
+          if (isFieldEmpty && derivedValue !== compareData) {
+            handleChange(control.value.path, derivedValue);
+          }
+          return;
+        }
+
+        // Only update if the SOURCE value changed, not just the field value
+        if (derivedValue === lastDerivedValue.value) return;
+        lastDerivedValue.value = derivedValue;
+
+        if (derivedValue !== compareData) {
           handleChange(control.value.path, derivedValue);
         }
       } catch (error) {
@@ -65,12 +111,12 @@ export function useDerive({ control, handleChange }: DeriveOptions) {
 function resolveDeriveExpression(
   expression: string,
   data: unknown,
-  externalData?: unknown,
+  dataLayerData?: 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 dataLayer() syntax
+  if (expression.startsWith("dataLayer(") && expression.endsWith(")")) {
+    const propertyPath = expression.slice(10, -1); // Remove "dataLayer(" and ")"
+    return resolvePropertyPath(propertyPath, dataLayerData);
   }
 
   // Handle simple property paths like "country.name"
@@ -82,7 +128,7 @@ function resolveDeriveExpression(
     return resolvePropertyPath(expression, data);
   }
 
-  // For now, we'll only support simple property paths and externalData() calls
+  // For now, we'll only support simple property paths and dataLayer() calls
   // Complex expressions would require a safe expression evaluator
   return resolvePropertyPath(expression, data);
 }