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

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;