@narrative.io/jsonforms-provider-protocols 1.1.0-beta.6 → 1.1.0-beta.8

package/dist/vue/primevue/JfTextArea.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"JfTextArea.vue.js","sources":["../../../src/vue/primevue/JfTextArea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ControlElement } from \"@jsonforms/core\";\nimport { rendererProps, useJsonFormsControl } from \"@jsonforms/vue\";\nimport { computed, ref } from \"vue\";\nimport Textarea from \"primevue/textarea\";\n\ndefineOptions({ name: \"JfTextArea\" });\n\nconst props = defineProps(rendererProps<ControlElement>());\nconst { control, handleChange } = useJsonFormsControl(props);\n\nconst placeholder = computed<string | undefined>(\n  () =>\n    (control.value.uischema as { options?: { placeholder?: string } })?.options\n      ?.placeholder ?? control.value.description,\n);\n\n// Track user interaction\nconst hasInteracted = ref(false);\n\nconst showErrors = computed(() => hasInteracted.value && control.value.errors);\n\nfunction onInput(val: string | undefined) {\n  // Convert empty strings to undefined for proper required field validation\n  const newValue = val && val.trim() !== \"\" ? val : undefined;\n  if (control.value.data !== newValue) {\n    handleChange(control.value.path, newValue);\n  }\n}\n\nfunction onBlur() {\n  hasInteracted.value = true;\n}\n</script>\n\n<template>\n  <div class=\"flex flex-column gap-2\">\n    <label v-if=\"control.label\" class=\"text-color text-left\">{{\n      control.label\n    }}</label>\n    <div v-if=\"control.description\" class=\"text-color-secondary text-left\">\n      {{ control.description }}\n    </div>\n    <Textarea\n      class=\"w-full\"\n      :model-value=\"control.data ?? ''\"\n      :disabled=\"!control.enabled\"\n      :aria-invalid=\"!!showErrors || undefined\"\n      :placeholder=\"placeholder\"\n      :rows=\"4\"\n      :auto-resize=\"true\"\n      @update:model-value=\"onInput\"\n      @blur=\"onBlur\"\n    />\n    <small v-if=\"showErrors\" class=\"p-error\">{{ control.errors }}</small>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_unref","_toDisplayString","_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAQA,UAAM,QAAQ;AACd,UAAM,EAAE,SAAS,iBAAiB,oBAAoB,KAAK;AAE3D,UAAM,cAAc;AAAA,MAClB,MACG,QAAQ,MAAM,UAAqD,SAChE,eAAe,QAAQ,MAAM;AAAA,IAAA;AAIrC,UAAM,gBAAgB,IAAI,KAAK;AAE/B,UAAM,aAAa,SAAS,MAAM,cAAc,SAAS,QAAQ,MAAM,MAAM;AAE7E,aAAS,QAAQ,KAAyB;AAExC,YAAM,WAAW,OAAO,IAAI,KAAA,MAAW,KAAK,MAAM;AAClD,UAAI,QAAQ,MAAM,SAAS,UAAU;AACnC,qBAAa,QAAQ,MAAM,MAAM,QAAQ;AAAA,MAC3C;AAAA,IACF;AAEA,aAAS,SAAS;AAChB,oBAAc,QAAQ;AAAA,IACxB;;AAIE,aAAAA,UAAA,GAAAC,mBAmBM,OAnBN,YAmBM;AAAA,QAlBSC,MAAA,OAAA,EAAQ,SAArBF,UAAA,GAAAC,mBAEU,SAFV,YAEUE,gBADRD,MAAA,OAAA,EAAQ,KAAK,GAAA,CAAA;QAEJA,MAAA,OAAA,EAAQ,eAAnBF,UAAA,GAAAC,mBAEM,OAFN,YAEME,gBADDD,MAAA,OAAA,EAAQ,WAAW,GAAA,CAAA;QAExBE,YAUEF,MAAA,QAAA,GAAA;AAAA,UATA,OAAM;AAAA,UACL,eAAaA,MAAA,OAAA,EAAQ,QAAI;AAAA,UACzB,UAAQ,CAAGA,MAAA,OAAA,EAAQ;AAAA,UACnB,gBAAY,CAAA,CAAI,WAAA,SAAc;AAAA,UAC9B,aAAa,YAAA;AAAA,UACb,MAAM;AAAA,UACN,eAAa;AAAA,UACb,uBAAoB;AAAA,UACpB;AAAA,QAAA;QAEU,WAAA,SAAbF,UAAA,GAAAC,mBAAqE,SAArE,YAAqEE,gBAAzBD,MAAA,OAAA,EAAQ,MAAM,GAAA,CAAA;;;;;"}
+{"version":3,"file":"JfTextArea.vue.js","sources":["../../../src/vue/primevue/JfTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"JfTextArea\",\n  props: {\n    uischema: {\n      type: Object,\n      required: true,\n    },\n    schema: {\n      type: Object,\n      required: true,\n    },\n    path: {\n      type: String,\n      required: true,\n    },\n    enabled: {\n      type: Boolean,\n      default: undefined,\n    },\n    renderers: {\n      type: Array,\n      required: false,\n    },\n    cells: {\n      type: Array,\n      required: false,\n    },\n    config: {\n      type: Object,\n      required: false,\n    },\n  },\n};\n</script>\n\n<script setup lang=\"ts\">\nimport type { ControlProps } from \"@jsonforms/vue\";\nimport { useJsonFormsControl } from \"@jsonforms/vue\";\nimport { computed, ref, getCurrentInstance } from \"vue\";\nimport Textarea from \"primevue/textarea\";\n\n// Access props from the component instance\nconst instance = getCurrentInstance()!;\nconst props = instance.props as unknown as ControlProps;\nconst { control, handleChange } = useJsonFormsControl(props);\n\nconst placeholder = computed<string | undefined>(\n  () =>\n    (control.value.uischema as { options?: { placeholder?: string } })?.options\n      ?.placeholder ?? control.value.description,\n);\n\n// Track user interaction\nconst hasInteracted = ref(false);\n\nconst showErrors = computed(() => hasInteracted.value && control.value.errors);\n\nfunction onInput(val: string | undefined) {\n  // Convert empty strings to undefined for proper required field validation\n  const newValue = val && val.trim() !== \"\" ? val : undefined;\n  if (control.value.data !== newValue) {\n    handleChange(control.value.path, newValue);\n  }\n}\n\nfunction onBlur() {\n  hasInteracted.value = true;\n}\n</script>\n\n<template>\n  <div class=\"flex flex-column gap-2\">\n    <label v-if=\"control.label\" class=\"text-color text-left\">{{\n      control.label\n    }}</label>\n    <div v-if=\"control.description\" class=\"text-color-secondary text-left\">\n      {{ control.description }}\n    </div>\n    <Textarea\n      class=\"w-full\"\n      :model-value=\"control.data ?? ''\"\n      :disabled=\"!control.enabled\"\n      :aria-invalid=\"!!showErrors || undefined\"\n      :placeholder=\"placeholder\"\n      :rows=\"4\"\n      :auto-resize=\"true\"\n      @update:model-value=\"onInput\"\n      @blur=\"onBlur\"\n    />\n    <small v-if=\"showErrors\" class=\"p-error\">{{ control.errors }}</small>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_unref","_toDisplayString","_createVNode"],"mappings":";;;;;;;;;;;;;;;;AACA,MAAA,cAAe;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA,IACL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,IAEZ,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,IAEZ,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,IAEZ,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,IAEX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,IAEZ,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,IAEZ,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ;AAEJ;;;;AAUA,UAAM,WAAW,mBAAA;AACjB,UAAM,QAAQ,SAAS;AACvB,UAAM,EAAE,SAAS,iBAAiB,oBAAoB,KAAK;AAE3D,UAAM,cAAc;AAAA,MAClB,MACG,QAAQ,MAAM,UAAqD,SAChE,eAAe,QAAQ,MAAM;AAAA,IAAA;AAIrC,UAAM,gBAAgB,IAAI,KAAK;AAE/B,UAAM,aAAa,SAAS,MAAM,cAAc,SAAS,QAAQ,MAAM,MAAM;AAE7E,aAAS,QAAQ,KAAyB;AAExC,YAAM,WAAW,OAAO,IAAI,KAAA,MAAW,KAAK,MAAM;AAClD,UAAI,QAAQ,MAAM,SAAS,UAAU;AACnC,qBAAa,QAAQ,MAAM,MAAM,QAAQ;AAAA,MAC3C;AAAA,IACF;AAEA,aAAS,SAAS;AAChB,oBAAc,QAAQ;AAAA,IACxB;;AAIE,aAAAA,UAAA,GAAAC,mBAmBM,OAnBN,YAmBM;AAAA,QAlBSC,MAAA,OAAA,EAAQ,SAArBF,UAAA,GAAAC,mBAEU,SAFV,YAEUE,gBADRD,MAAA,OAAA,EAAQ,KAAK,GAAA,CAAA;QAEJA,MAAA,OAAA,EAAQ,eAAnBF,UAAA,GAAAC,mBAEM,OAFN,YAEME,gBADDD,MAAA,OAAA,EAAQ,WAAW,GAAA,CAAA;QAExBE,YAUEF,MAAA,QAAA,GAAA;AAAA,UATA,OAAM;AAAA,UACL,eAAaA,MAAA,OAAA,EAAQ,QAAI;AAAA,UACzB,UAAQ,CAAGA,MAAA,OAAA,EAAQ;AAAA,UACnB,gBAAY,CAAA,CAAI,WAAA,SAAc;AAAA,UAC9B,aAAa,YAAA;AAAA,UACb,MAAM;AAAA,UACN,eAAa;AAAA,UACb,uBAAoB;AAAA,UACpB;AAAA,QAAA;QAEU,WAAA,SAAbF,UAAA,GAAAC,mBAAqE,SAArE,YAAqEE,gBAAzBD,MAAA,OAAA,EAAQ,MAAM,GAAA,CAAA;;;;;"}

package/dist/vue/primevue/index.d.ts

@@ -7,76 +7,65 @@ import JfBoolean from "./JfBoolean.vue";
 export declare const primevueRenderers: {
     tester: (uischema: import("@jsonforms/core").UISchemaElement, schema: import("@jsonforms/core").JsonSchema, context: import("@jsonforms/core").TesterContext) => number;
     renderer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        schema: {
+        uischema: {
+            type: ObjectConstructor;
             required: true;
-            type: import("vue").PropType<import("@jsonforms/core").JsonSchema>;
         };
-        uischema: {
+        schema: {
+            type: ObjectConstructor;
             required: true;
-            type: import("vue").PropType<import("@jsonforms/core").ControlElement>;
         };
         path: {
-            required: true;
             type: StringConstructor;
+            required: true;
         };
         enabled: {
-            required: false;
             type: BooleanConstructor;
             default: undefined;
         };
         renderers: {
-            required: boolean;
-            type: import("vue").PropType<import("@jsonforms/core").JsonFormsRendererRegistryEntry[]>;
-            default: undefined;
+            type: ArrayConstructor;
+            required: false;
         };
         cells: {
-            required: boolean;
-            type: import("vue").PropType<import("@jsonforms/core").JsonFormsCellRendererRegistryEntry[]>;
-            default: undefined;
+            type: ArrayConstructor;
+            required: false;
         };
         config: {
-            required: boolean;
             type: ObjectConstructor;
-            default: undefined;
+            required: false;
         };
     }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        schema: {
+        uischema: {
+            type: ObjectConstructor;
             required: true;
-            type: import("vue").PropType<import("@jsonforms/core").JsonSchema>;
         };
-        uischema: {
+        schema: {
+            type: ObjectConstructor;
             required: true;
-            type: import("vue").PropType<import("@jsonforms/core").ControlElement>;
         };
         path: {
-            required: true;
             type: StringConstructor;
+            required: true;
         };
         enabled: {
-            required: false;
             type: BooleanConstructor;
             default: undefined;
         };
         renderers: {
-            required: boolean;
-            type: import("vue").PropType<import("@jsonforms/core").JsonFormsRendererRegistryEntry[]>;
-            default: undefined;
+            type: ArrayConstructor;
+            required: false;
         };
         cells: {
-            required: boolean;
-            type: import("vue").PropType<import("@jsonforms/core").JsonFormsCellRendererRegistryEntry[]>;
-            default: undefined;
+            type: ArrayConstructor;
+            required: false;
         };
         config: {
-            required: boolean;
             type: ObjectConstructor;
-            default: undefined;
+            required: false;
         };
     }>> & Readonly<{}>, {
-        config: Record<string, any>;
         enabled: boolean;
-        renderers: import("@jsonforms/core").JsonFormsRendererRegistryEntry[];
-        cells: import("@jsonforms/core").JsonFormsCellRendererRegistryEntry[];
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 }[];
 export { JfText, JfTextArea, JfNumber, JfEnum, JfEnumArray, JfBoolean };

package/dist/vue/primevue/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/vue/primevue/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,WAAW,MAAM,mBAAmB,CAAC;AAC5C,OAAO,SAAS,MAAM,iBAAiB,CAAC;AA0ExC,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiB7B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/vue/primevue/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,WAAW,MAAM,mBAAmB,CAAC;AAC5C,OAAO,SAAS,MAAM,iBAAiB,CAAC;AA0ExC,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiB7B,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@narrative.io/jsonforms-provider-protocols",
-	"version": "1.1.0-beta.6",
+	"version": "1.1.0-beta.8",
 	"description": "Dynamic data provider capabilities for JSONForms with Vue 3 integration",
 	"type": "module",
 	"author": "Narrative I/O",

package/src/index.ts

@@ -13,8 +13,21 @@ export * from "./core/types";
 // Protocol exports
 export { RestApiProtocol } from "./protocols/rest_api";
 
-// Vue exports
-export * as vue from "./vue";
+// Vue exports - using named imports to avoid potential bundling issues
+export {
+  providerRenderers,
+  primevueRenderers,
+  ProviderAutocomplete,
+  ProviderSelect,
+  ProviderMultiSelect,
+  useProvider,
+  JfText,
+  JfTextArea,
+  JfNumber,
+  JfEnum,
+  JfEnumArray,
+  JfBoolean,
+} from "./vue";
 
 export interface ProviderConfig {
   protocols?: Protocol[];

package/src/vue/index.ts

@@ -70,4 +70,13 @@ export { primevueRenderers } from "./primevue";
 export { ProviderAutocomplete, ProviderSelect, ProviderMultiSelect };
 export { useProvider } from "./composables/useProvider";
 export * from "./testers";
-export * from "./primevue";
+
+// Export individual PrimeVue components using lazy evaluation to avoid circular deps
+export {
+  JfText,
+  JfTextArea,
+  JfNumber,
+  JfEnum,
+  JfEnumArray,
+  JfBoolean,
+} from "./primevue";

package/src/vue/primevue/JfBoolean.vue

@@ -1,11 +1,48 @@
+<script lang="ts">
+export default {
+  name: "JfBoolean",
+  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 type { ControlProps } from "@jsonforms/vue";
+import { useJsonFormsControl } from "@jsonforms/vue";
+import { getCurrentInstance } from "vue";
 import Checkbox from "primevue/checkbox";
 
-defineOptions({ name: "JfBoolean" });
-
-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 onToggle = (val: boolean) => handleChange(control.value.path, val);

package/src/vue/primevue/JfEnum.vue

@@ -1,14 +1,52 @@
+<script lang="ts">
+// Define props manually to avoid any potential circular dependency issues
+export default {
+  name: "JfEnum",
+  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, JsonSchema } from "@jsonforms/core";
-import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
-import { computed, ref, inject } from "vue";
+import type { JsonSchema } from "@jsonforms/core";
+import type { ControlProps } from "@jsonforms/vue";
+import { useJsonFormsControl } from "@jsonforms/vue";
+import { computed, ref, inject, getCurrentInstance } from "vue";
 import { useProvider } from "../composables/useProvider";
 import { useDerive } from "../composables/useDerive";
 import Dropdown from "primevue/dropdown";
 
-defineOptions({ name: "JfEnum" });
-
-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);
 
 type Opt = { label: string; value: unknown };

package/src/vue/primevue/JfEnumArray.vue

@@ -1,14 +1,51 @@
+<script lang="ts">
+export default {
+  name: "JfEnumArray",
+  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, JsonSchema } from "@jsonforms/core";
-import { rendererProps, useJsonFormsControl } from "@jsonforms/vue";
-import { computed, inject } from "vue";
+import type { JsonSchema } from "@jsonforms/core";
+import type { ControlProps } from "@jsonforms/vue";
+import { useJsonFormsControl } from "@jsonforms/vue";
+import { computed, inject, getCurrentInstance } from "vue";
 import { useProvider } from "../composables/useProvider";
 import { useDerive } from "../composables/useDerive";
 import MultiSelect from "primevue/multiselect";
 
-defineOptions({ name: "JfEnumArray" });
-
-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);
 
 type Opt = { label: string; value: unknown };

package/src/vue/primevue/JfNumber.vue

@@ -1,13 +1,49 @@
+<script lang="ts">
+export default {
+  name: "JfNumber",
+  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, ref } from "vue";
+import type { ControlProps } from "@jsonforms/vue";
+import { useJsonFormsControl } from "@jsonforms/vue";
+import { computed, ref, getCurrentInstance } from "vue";
 import { useDerive } from "../composables/useDerive";
 import InputNumber from "primevue/inputnumber";
 
-defineOptions({ name: "JfNumber" });
-
-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 options = computed(

package/src/vue/primevue/JfText.vue

@@ -1,15 +1,51 @@
+<script lang="ts">
+export default {
+  name: "JfText",
+  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, ref, inject, watch } from "vue";
+import type { ControlProps } from "@jsonforms/vue";
+import { useJsonFormsControl } from "@jsonforms/vue";
+import { computed, ref, inject, watch, getCurrentInstance } from "vue";
 import { useProvider } from "../composables/useProvider";
 import { useDerive } from "../composables/useDerive";
 import InputText from "primevue/inputtext";
 import AutoComplete from "primevue/autocomplete";
 
-defineOptions({ name: "JfText" });
-
-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);
 
 // Provider support for autocomplete functionality

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, ref } 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>(