@narrative.io/jsonforms-provider-protocols 3.0.0-beta.3 → 3.0.0-beta.4

package/src/vue/primevue/JfEnumArray.vue

@@ -53,7 +53,12 @@ import MultiSelect from "primevue/multiselect";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange, projectedErrors, projectedLabel } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 type Opt = { label: string; value: unknown };
 const toOptions = (schema?: JsonSchema): Opt[] => {
@@ -145,14 +150,16 @@ watch(
         control.value.uischema?.options?.autoSelectSingle === true,
       isLoading,
       items,
-      currentValue: Array.isArray(projectedData.value) ? projectedData.value : [],
+      currentValue: Array.isArray(projectedData.value)
+        ? projectedData.value
+        : [],
     });
 
     if (valueToSelect !== null) {
       handleChange(control.value.path, valueToSelect);
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const placeholder = computed<string | undefined>(() => {
@@ -190,17 +197,15 @@ const model = computed<unknown[]>({
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="projectedLabel" class="text-color text-left">{{
-      projectedLabel
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
 
     <MultiSelect
       v-model="model"
-      :class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
       :options="options"
       option-label="label"
       option-value="value"
@@ -214,8 +219,6 @@ const model = computed<unknown[]>({
     <small v-if="error" class="p-error" role="alert"
       >Failed to load: {{ error }}</small
     >
-    <small v-else-if="showErrors" class="p-error">{{
-      projectedErrors
-    }}</small>
+    <small v-else-if="showErrors" class="p-error">{{ projectedErrors }}</small>
   </div>
 </template>

package/src/vue/primevue/JfNumber.vue

@@ -50,7 +50,12 @@ import InputNumber from "primevue/inputnumber";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange, projectedErrors, projectedLabel } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 const options = computed(
   () =>
@@ -110,16 +115,14 @@ const onNumber = (val: number | null) => {
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="projectedLabel" class="text-color text-left">{{
-      projectedLabel
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <InputNumber
-      :class="['w-full', { 'p-invalid': showErrors }]"
-      :input-class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
+      :input-class="['w-full!', { 'p-invalid': showErrors }]"
       :use-grouping="useGrouping"
       :mode="mode"
       :currency="currency"

package/src/vue/primevue/JfText.vue

@@ -52,7 +52,12 @@ import AutoComplete from "primevue/autocomplete";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange, projectedErrors, projectedLabel } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 // Provider support for autocomplete functionality
 const binding = computed(() => {
@@ -150,16 +155,14 @@ const onSelect = (event: { value?: { value?: unknown } | unknown }) => {
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="projectedLabel" class="text-color text-left">{{
-      projectedLabel
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <AutoComplete
       v-if="isAutocomplete"
-      :class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
       :model-value="projectedData ?? ''"
       :suggestions="items"
       option-label="label"
@@ -173,7 +176,7 @@ const onSelect = (event: { value?: { value?: unknown } | unknown }) => {
     />
     <InputText
       v-else
-      :class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
       :model-value="(projectedData as string) ?? ''"
       :disabled="!control.enabled"
       :aria-invalid="showErrors || undefined"

package/src/vue/primevue/JfTextArea.vue

@@ -49,7 +49,12 @@ import Textarea from "primevue/textarea";
 const instance = getCurrentInstance()!;
 const props = instance.props as unknown as ControlProps;
 const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
-const { projectedData, handleProjectedChange: handleChange, projectedErrors, projectedLabel } = useProjection(control, rawHandleChange);
+const {
+  projectedData,
+  handleProjectedChange: handleChange,
+  projectedErrors,
+  projectedLabel,
+} = useProjection(control, rawHandleChange);
 
 const placeholder = computed<string | undefined>(
   () =>
@@ -79,15 +84,13 @@ function onBlur() {
 </script>
 
 <template>
-  <div class="flex flex-column gap-2">
-    <label v-if="projectedLabel" class="text-color text-left">{{
-      projectedLabel
-    }}</label>
-    <div v-if="control.description" class="text-color-secondary text-left">
+  <div class="jf-control">
+    <label v-if="projectedLabel" class="jf-label">{{ projectedLabel }}</label>
+    <div v-if="control.description" class="jf-description">
       {{ control.description }}
     </div>
     <Textarea
-      :class="['w-full', { 'p-invalid': showErrors }]"
+      :class="['w-full!', { 'p-invalid': showErrors }]"
       :model-value="(projectedData as string) ?? ''"
       :disabled="!control.enabled"
       :aria-invalid="showErrors || undefined"

package/src/vue/primevue/index.ts

@@ -19,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);
     }
@@ -102,47 +127,103 @@ 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
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const projectedSchemaMatches = (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;
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const propertySchema = resolveScopeSchema(ui.scope, schema as Record<string, any>);
-      if (!propertySchema) return false;
-
-      return check(getProjectedSchema(propertySchema, projection));
-    };
+
+  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);
+    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, 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"))),
+      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, or(isNumberControl, projectedSchemaMatches((s) => s?.type === "number"))),
+      tester: rankWith(
+        PRIME + 4,
+        or(
+          isNumberControl,
+          projectedSchemaMatches((s) => s?.type === "number"),
+        ),
+      ),
       renderer: JfNumber,
     },
     {
-      tester: rankWith(PRIME + 7, or(and(isControl, schemaMatches(isScalarEnum)), and(isControl, projectedSchemaMatches(isScalarEnum)))),
+      tester: rankWith(
+        PRIME + 7,
+        or(
+          and(isControl, schemaMatches(isScalarEnum)),
+          and(isControl, projectedSchemaMatches(isScalarEnum)),
+        ),
+      ),
       renderer: JfEnum,
     },
     {
-      tester: rankWith(PRIME + 8, or(and(isControl, schemaMatches(isEnumArray)), and(isControl, projectedSchemaMatches(isEnumArray)))),
+      tester: rankWith(
+        PRIME + 8,
+        or(
+          and(isControl, schemaMatches(isEnumArray)),
+          and(isControl, projectedSchemaMatches(isEnumArray)),
+        ),
+      ),
       renderer: JfEnumArray,
     },
-    { tester: rankWith(PRIME + 3, or(isBooleanControl, projectedSchemaMatches((s) => s?.type === "boolean"))), 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/autoSelect.ts

@@ -57,7 +57,7 @@ export interface AutoSelectMultiParams {
  * - Current value is empty array OR current selection is not in the current options
  */
 export function shouldAutoSelectMulti(
-  params: AutoSelectMultiParams
+  params: AutoSelectMultiParams,
 ): unknown[] | null {
   const { autoSelectSingle, isLoading, items, currentValue } = params;
 
@@ -73,7 +73,7 @@ export function shouldAutoSelectMulti(
   const currentArray = Array.isArray(currentValue) ? currentValue : [];
   const isValueEmpty = currentArray.length === 0;
   const hasValidSelection = currentArray.some((val) =>
-    items.some((item) => item.value === val)
+    items.some((item) => item.value === val),
   );
 
   if (isValueEmpty || !hasValidSelection) {