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

package/src/vue/primevue/JfTextArea.vue

@@ -1,12 +1,48 @@
+<script lang="ts">
+export default {
+  name: "JfTextArea",
+  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 { computed } from "vue";
+import type { ControlProps } from "@jsonforms/vue";
+import { useJsonFormsControl } from "@jsonforms/vue";
+import { computed, ref, getCurrentInstance } from "vue";
 import Textarea from "primevue/textarea";
 
-defineOptions({ name: "JfTextArea" });
-
-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 placeholder = computed<string | undefined>(
@@ -15,12 +51,22 @@ const placeholder = computed<string | undefined>(
       ?.placeholder ?? control.value.description,
 );
 
+// Track user interaction
+const hasInteracted = ref(false);
+
+const showErrors = computed(() => hasInteracted.value && control.value.errors);
+
 function onInput(val: string | undefined) {
-  const newValue = val ?? "";
-  if ((control.value.data ?? "") !== newValue) {
+  // Convert empty strings to undefined for proper required field validation
+  const newValue = val && val.trim() !== "" ? val : undefined;
+  if (control.value.data !== newValue) {
     handleChange(control.value.path, newValue);
   }
 }
+
+function onBlur() {
+  hasInteracted.value = true;
+}
 </script>
 
 <template>
@@ -35,12 +81,13 @@ function onInput(val: string | undefined) {
       class="w-full"
       :model-value="control.data ?? ''"
       :disabled="!control.enabled"
-      :aria-invalid="!!control.errors || undefined"
+      :aria-invalid="!!showErrors || undefined"
       :placeholder="placeholder"
       :rows="4"
       :auto-resize="true"
       @update:model-value="onInput"
+      @blur="onBlur"
     />
-    <small v-if="control.errors" class="p-error">{{ control.errors }}</small>
+    <small v-if="showErrors" class="p-error">{{ control.errors }}</small>
   </div>
 </template>

package/src/vue/primevue/index.ts

@@ -33,17 +33,8 @@ const injectLayoutStyles = () => {
 // Inject styles when this module is imported
 injectLayoutStyles();
 
-import {
-  rankWith,
-  isStringControl,
-  or,
-  isNumberControl,
-  isIntegerControl,
-  and,
-  isControl,
-  schemaMatches,
-  isBooleanControl,
-} from "@jsonforms/core";
+// Import types only to avoid circular dependencies
+import type { JsonFormsRendererRegistryEntry } from "@jsonforms/core";
 
 // helpers for enum detection
 const isScalarEnum = (s?: object) => {
@@ -66,34 +57,54 @@ const isEnumArray = (s?: object) => {
   );
 };
 
-// helper for multiline detection
-const isMultilineString = (uischema: unknown, schema: unknown) => {
-  return (
-    isStringControl(uischema as never, schema as never, {} as never) &&
-    (uischema as { options?: { multi?: boolean } })?.options?.multi === true
-  );
-};
-
 // Give PrimeVue renderers a high base rank; vanilla commonly uses small ranks (2–5)
 const PRIME = 100;
 
-export const primevueRenderers = [
-  // 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 + 4, or(isNumberControl, isIntegerControl)),
-    renderer: JfNumber,
-  },
-  {
-    tester: rankWith(PRIME + 5, and(isControl, schemaMatches(isScalarEnum))),
-    renderer: JfEnum,
-  },
-  {
-    tester: rankWith(PRIME + 6, and(isControl, schemaMatches(isEnumArray))),
-    renderer: JfEnumArray,
-  },
-  { tester: rankWith(PRIME + 3, isBooleanControl), renderer: JfBoolean },
-];
+// Create empty array first, populate it after module initialization to avoid circular deps
+export const primevueRenderers: JsonFormsRendererRegistryEntry[] = [];
+
+// Populate the renderers array after a microtask delay to avoid circular dependency
+Promise.resolve().then(async () => {
+  const {
+    rankWith,
+    isStringControl,
+    or,
+    isNumberControl,
+    isIntegerControl,
+    and,
+    isControl,
+    schemaMatches,
+    isBooleanControl,
+  } = await import("@jsonforms/core");
+
+  // helper for multiline detection moved inside async block
+  const isMultilineString = (uischema: unknown, schema: unknown) => {
+    const controlUischema = uischema as { options?: { multi?: boolean } };
+    return and(isStringControl, () => controlUischema?.options?.multi === true)(
+      uischema as Parameters<typeof isStringControl>[0],
+      schema as Parameters<typeof isStringControl>[1],
+      {} as Parameters<typeof isStringControl>[2],
+    );
+  };
+
+  primevueRenderers.push(
+    // 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 + 4, or(isNumberControl, isIntegerControl)),
+      renderer: JfNumber,
+    },
+    {
+      tester: rankWith(PRIME + 5, and(isControl, schemaMatches(isScalarEnum))),
+      renderer: JfEnum,
+    },
+    {
+      tester: rankWith(PRIME + 6, and(isControl, schemaMatches(isEnumArray))),
+      renderer: JfEnumArray,
+    },
+    { tester: rankWith(PRIME + 3, isBooleanControl), renderer: JfBoolean },
+  );
+});
 
 export { JfText, JfTextArea, JfNumber, JfEnum, JfEnumArray, JfBoolean };

package/src/vue/styles.css

@@ -13,3 +13,8 @@
 .vertical-layout-item {
   width: 100%;
 }
+
+/* PrimeVue dropdown text alignment fix */
+.p-dropdown-label {
+  text-align: left !important;
+}