@narrative.io/jsonforms-provider-protocols 2.11.0 → 2.12.0

package/src/vue/primevue/index.ts

@@ -4,6 +4,8 @@ import JfNumber from "./JfNumber.vue";
 import JfEnum from "./JfEnum.vue";
 import JfEnumArray from "./JfEnumArray.vue";
 import JfBoolean from "./JfBoolean.vue";
+import { getProjectedSchema } from "../../core/projection";
+import { resolveScopeSchema } from "../../core/resolveScope";
 
 // Auto-inject layout styles
 const injectLayoutStyles = () => {
@@ -17,13 +19,38 @@ const injectLayoutStyles = () => {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 1rem;
+  gap: 24px;
   width: 100%;
 }
 
 .vertical-layout-item {
   width: 100%;
 }
+
+/* Form control wrapper */
+.jf-control {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* Form control label typography */
+.jf-label {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 14px;
+  color: #031553;
+  text-align: left;
+}
+
+/* Form control description typography */
+.jf-description {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 14px;
+  color: #415290;
+  text-align: left;
+}
       `;
       document.head.appendChild(style);
     }
@@ -54,6 +81,7 @@ export function registerPrimevueRenderers(jsonformsCore: any): unknown[] {
     isNumberControl,
     isIntegerControl,
     and,
+    or,
     isControl,
     schemaMatches,
     isBooleanControl,
@@ -97,27 +125,105 @@ export function registerPrimevueRenderers(jsonformsCore: any): unknown[] {
     );
   };
 
+  // Projection-aware schema check: when options.projection is set,
+  // resolve the projected schema and test against it instead of the original
+
+  const projectedSchemaMatches =
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (check: (schema: any) => boolean) =>
+      (uischema: unknown, schema: unknown): boolean => {
+        const ui = uischema as {
+          type?: string;
+          scope?: string;
+          options?: { projection?: string };
+        };
+        const projection = ui?.options?.projection;
+        if (!projection || ui?.type !== "Control" || !ui?.scope) return false;
+
+        const propertySchema = resolveScopeSchema(
+          ui.scope,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          schema as Record<string, any>,
+        );
+        if (!propertySchema) return false;
+
+        return check(getProjectedSchema(propertySchema, projection));
+      };
+
+  const isMultilineProjection = (uischema: unknown, schema: unknown) => {
+    const ui = uischema as { options?: { multi?: boolean } };
+    return (
+      ui?.options?.multi === true &&
+      projectedSchemaMatches((s) => s?.type === "string")(uischema, schema)
+    );
+  };
+
   const renderers = [
     // Multiline text has higher priority than regular text
-    { tester: rankWith(PRIME + 4, isMultilineString), renderer: JfTextArea },
-    { tester: rankWith(PRIME + 3, isStringControl), renderer: JfText },
     {
-      tester: rankWith(PRIME + 6, isIntegerControl),
+      tester: rankWith(PRIME + 4, or(isMultilineString, isMultilineProjection)),
+      renderer: JfTextArea,
+    },
+    {
+      tester: rankWith(
+        PRIME + 3,
+        or(
+          isStringControl,
+          projectedSchemaMatches((s) => s?.type === "string"),
+        ),
+      ),
+      renderer: JfText,
+    },
+    {
+      tester: rankWith(
+        PRIME + 6,
+        or(
+          isIntegerControl,
+          projectedSchemaMatches((s) => s?.type === "integer"),
+        ),
+      ),
       renderer: JfNumber,
     },
     {
-      tester: rankWith(PRIME + 4, isNumberControl),
+      tester: rankWith(
+        PRIME + 4,
+        or(
+          isNumberControl,
+          projectedSchemaMatches((s) => s?.type === "number"),
+        ),
+      ),
       renderer: JfNumber,
     },
     {
-      tester: rankWith(PRIME + 7, and(isControl, schemaMatches(isScalarEnum))),
+      tester: rankWith(
+        PRIME + 7,
+        or(
+          and(isControl, schemaMatches(isScalarEnum)),
+          and(isControl, projectedSchemaMatches(isScalarEnum)),
+        ),
+      ),
       renderer: JfEnum,
     },
     {
-      tester: rankWith(PRIME + 8, and(isControl, schemaMatches(isEnumArray))),
+      tester: rankWith(
+        PRIME + 8,
+        or(
+          and(isControl, schemaMatches(isEnumArray)),
+          and(isControl, projectedSchemaMatches(isEnumArray)),
+        ),
+      ),
       renderer: JfEnumArray,
     },
-    { tester: rankWith(PRIME + 3, isBooleanControl), renderer: JfBoolean },
+    {
+      tester: rankWith(
+        PRIME + 3,
+        or(
+          isBooleanControl,
+          projectedSchemaMatches((s) => s?.type === "boolean"),
+        ),
+      ),
+      renderer: JfBoolean,
+    },
   ];
 
   // Update the exported array

package/src/vue/styles.css

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 1rem;
+  gap: 24px;
   width: 100%;
 }
 
@@ -14,6 +14,31 @@
   width: 100%;
 }
 
+/* Form control wrapper */
+.jf-control {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* Form control label typography */
+.jf-label {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 14px;
+  color: #031553;
+  text-align: left;
+}
+
+/* Form control description typography */
+.jf-description {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 14px;
+  color: #415290;
+  text-align: left;
+}
+
 /* PrimeVue dropdown text alignment fix */
 .p-dropdown-label {
   text-align: left !important;

package/src/vue/utils/objectMultiSelect.ts

@@ -0,0 +1,171 @@
+import { deref } from "../../core/refs";
+
+/**
+ * Helpers for `ProviderObjectMultiSelect`: bidirectional translation between
+ * the form-data shape (paired objects with consumer-named keys) and the
+ * MultiSelect model shape (`{ value, label }` matching the provider's `map`
+ * config), plus `objectKeys` inference when the consumer doesn't specify
+ * them on the uischema.
+ *
+ * Pure functions — no Vue, no rendering — so the renderer can compose them
+ * and tests can exercise the logic in isolation.
+ */
+
+export interface ObjectKeys {
+  /** Property name on the form-data object that holds the identifier. */
+  value: string;
+  /** Property name on the form-data object that holds the display string. */
+  label: string;
+}
+
+export interface MultiSelectOption {
+  value: unknown;
+  label: string;
+  [key: string]: unknown;
+}
+
+/**
+ * Translate form-data items (`[{ [valueKey]: v, [labelKey]: l }]`) into the
+ * shape PrimeVue's `<MultiSelect>` expects (`[{ value, label }]`). Items
+ * already in `{ value, label }` shape pass through; missing keys yield
+ * `undefined` / `""` so the renderer doesn't blow up on partial data.
+ */
+export function toMultiSelectShape(
+  formData: unknown,
+  keys: ObjectKeys,
+): MultiSelectOption[] {
+  if (!Array.isArray(formData)) return [];
+  return formData
+    .filter((item) => item !== null && typeof item === "object")
+    .map((item) => {
+      const obj = item as Record<string, unknown>;
+      // Tolerate already-translated items: if both `value` and `label` are
+      // present and the form-data keys aren't, assume MultiSelect shape.
+      if (
+        !(keys.value in obj) &&
+        !(keys.label in obj) &&
+        "value" in obj &&
+        "label" in obj
+      ) {
+        return obj as MultiSelectOption;
+      }
+      return {
+        value: obj[keys.value],
+        label: typeof obj[keys.label] === "string" ? (obj[keys.label] as string) : "",
+      };
+    });
+}
+
+/**
+ * Inverse of `toMultiSelectShape`. Translates `<MultiSelect>` model items
+ * back into form-data shape using the consumer-specified property names.
+ */
+export function fromMultiSelectShape(
+  modelData: unknown,
+  keys: ObjectKeys,
+): Record<string, unknown>[] {
+  if (!Array.isArray(modelData)) return [];
+  return modelData
+    .filter((item) => item !== null && typeof item === "object")
+    .map((item) => {
+      const obj = item as Record<string, unknown>;
+      return {
+        [keys.value]: obj.value,
+        [keys.label]: obj.label,
+      };
+    });
+}
+
+/**
+ * Order-insensitive equality of two object-shape selections by the
+ * identifier property. Used to short-circuit redundant `handleChange`
+ * calls when the model emits the same selection under reference inequality.
+ */
+export function sameObjectSet(
+  a: unknown,
+  b: unknown,
+  identifierKey: string,
+): boolean {
+  if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) {
+    return false;
+  }
+  const ids = new Set(
+    b
+      .filter((x) => x !== null && typeof x === "object")
+      .map((x) => (x as Record<string, unknown>)[identifierKey]),
+  );
+  return a.every((x) => {
+    if (x === null || typeof x !== "object") return false;
+    return ids.has((x as Record<string, unknown>)[identifierKey]);
+  });
+}
+
+/**
+ * Resolve the items schema of an array control, dereferencing `items.$ref`
+ * against the root if present. Returns `undefined` if no items schema exists.
+ */
+export function resolveItemsSchema(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  arraySchema: Record<string, any> | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  rootSchema: Record<string, any>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): Record<string, any> | undefined {
+  if (!arraySchema || typeof arraySchema !== "object") return undefined;
+  const items = arraySchema.items;
+  if (!items || typeof items !== "object" || Array.isArray(items)) {
+    return undefined;
+  }
+  return deref(items, rootSchema);
+}
+
+/**
+ * Infer `objectKeys` from a resolved items schema when the consumer hasn't
+ * specified them on the uischema.
+ *
+ * Strategy: look at `items.required`. If it has exactly two entries, the
+ * one whose property has `format: 'uuid'` becomes `value`; the other
+ * becomes `label`. If neither has a uuid format, the first entry is
+ * `value`, the second is `label`. Returns `undefined` (and the renderer
+ * throws at mount) for any other shape — explicit `objectKeys` is required.
+ */
+export function inferObjectKeys(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  itemsSchema: Record<string, any> | undefined,
+): ObjectKeys | undefined {
+  if (!itemsSchema || itemsSchema.type !== "object") return undefined;
+  const required = itemsSchema.required;
+  if (!Array.isArray(required) || required.length !== 2) return undefined;
+  const [a, b] = required as [string, string];
+  const props = (itemsSchema.properties ?? {}) as Record<
+    string,
+    { format?: string }
+  >;
+  const aIsUuid = props[a]?.format === "uuid";
+  const bIsUuid = props[b]?.format === "uuid";
+  if (aIsUuid && !bIsUuid) return { value: a, label: b };
+  if (bIsUuid && !aIsUuid) return { value: b, label: a };
+  return { value: a, label: b };
+}
+
+/**
+ * Resolve the active `objectKeys` for a control: prefer the explicit
+ * `uischema.options.objectKeys`, fall back to schema-driven inference.
+ * Returns `undefined` when neither is available; the renderer surfaces a
+ * runtime error in that case so the consumer knows to be explicit.
+ */
+export function resolveObjectKeys(
+  uischemaOptions: { objectKeys?: { value?: unknown; label?: unknown } } | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  itemsSchema: Record<string, any> | undefined,
+): ObjectKeys | undefined {
+  const explicit = uischemaOptions?.objectKeys;
+  if (
+    explicit &&
+    typeof explicit.value === "string" &&
+    typeof explicit.label === "string"
+  ) {
+    return { value: explicit.value, label: explicit.label };
+  }
+  return inferObjectKeys(itemsSchema);
+}

package/src/vue/utils/placeholder.ts

@@ -0,0 +1,42 @@
+/**
+ * Placeholder resolution for form controls.
+ *
+ * Precedence:
+ *   1. `uischema.options.placeholder` (explicit author intent — always wins)
+ *   2. `Select ${label}` or `Enter ${label}` when a label is resolvable
+ *   3. Kind-appropriate bare fallback
+ *
+ * Never falls back to `schema.description` — descriptions are rendered as
+ * prose above the field by our renderers, so re-using them as placeholder
+ * produces a duplicated, truncated string inside the input.
+ */
+
+export type PlaceholderKind = "select" | "input";
+
+/**
+ * Strip a trailing required-indicator asterisk (" *" or "*") that `resolveLabel`
+ * appends for required fields, so composed placeholders read naturally.
+ */
+function stripRequiredMarker(label: string): string {
+  return label.replace(/\s*\*\s*$/, "").trim();
+}
+
+export function resolvePlaceholder(
+  uischema: { options?: unknown } | undefined,
+  resolvedLabel: string | undefined,
+  kind: PlaceholderKind,
+): string | undefined {
+  const options = uischema?.options;
+  const explicit =
+    options && typeof options === "object"
+      ? (options as Record<string, unknown>).placeholder
+      : undefined;
+  if (typeof explicit === "string" && explicit.length > 0) return explicit;
+
+  const label = resolvedLabel ? stripRequiredMarker(resolvedLabel) : "";
+  if (label) {
+    return kind === "select" ? `Select ${label}` : `Enter ${label}`;
+  }
+
+  return kind === "select" ? "Select…" : undefined;
+}