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

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

@@ -18,14 +18,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     renderers: {
         type: ArrayConstructor;
         required: false;
+        default: undefined;
     };
     cells: {
         type: ArrayConstructor;
         required: false;
+        default: undefined;
     };
     config: {
         type: ObjectConstructor;
         required: false;
+        default: undefined;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     uischema: {
@@ -47,17 +50,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     renderers: {
         type: ArrayConstructor;
         required: false;
+        default: undefined;
     };
     cells: {
         type: ArrayConstructor;
         required: false;
+        default: undefined;
     };
     config: {
         type: ObjectConstructor;
         required: false;
+        default: undefined;
     };
 }>> & Readonly<{}>, {
+    config: Record<string, any>;
     enabled: boolean;
+    renderers: unknown[];
+    cells: unknown[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=JfNumber.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"JfNumber.vue.d.ts","sourceRoot":"","sources":["../../../src/vue/primevue/JfNumber.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkJA,wBAmQK"}
+{"version":3,"file":"JfNumber.vue.d.ts","sourceRoot":"","sources":["../../../src/vue/primevue/JfNumber.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8JA,wBA0QK"}

package/dist/vue/primevue/JfNumber.vue.js

@@ -1,15 +1,19 @@
-import { defineComponent, getCurrentInstance, computed, ref, createElementBlock, openBlock, createCommentVNode, createVNode, unref, toDisplayString } from "vue";
+import { defineComponent, getCurrentInstance, computed, createElementBlock, openBlock, createCommentVNode, createVNode, unref, toDisplayString, normalizeClass } from "vue";
 import { useJsonFormsControl } from "@jsonforms/vue";
 import { useDerive } from "../composables/useDerive.js";
+import { useDeriveInitialValue } from "../composables/useDeriveInitialValue.js";
+import { useProjection } from "../composables/useProjection.js";
+import { useDirtyValidation } from "../composables/useDirtyValidation.js";
+import { resolvePlaceholder } from "../utils/placeholder.js";
 import InputNumber from "primevue/inputnumber";
-const _hoisted_1 = { class: "flex flex-col gap-2" };
+const _hoisted_1 = { class: "jf-control" };
 const _hoisted_2 = {
   key: 0,
-  class: "text-color text-left"
+  class: "jf-label"
 };
 const _hoisted_3 = {
   key: 1,
-  class: "text-color-secondary text-left"
+  class: "jf-description"
 };
 const _hoisted_4 = {
   key: 2,
@@ -36,15 +40,18 @@ const __default__ = {
     },
     renderers: {
       type: Array,
-      required: false
+      required: false,
+      default: void 0
     },
     cells: {
       type: Array,
-      required: false
+      required: false,
+      default: void 0
     },
     config: {
       type: Object,
-      required: false
+      required: false,
+      default: void 0
     }
   }
 };
@@ -53,14 +60,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const instance = getCurrentInstance();
     const props = instance.props;
-    const { control, handleChange } = useJsonFormsControl(props);
+    const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
+    const {
+      projectedData,
+      handleProjectedChange: handleChange,
+      projectedErrors,
+      projectedLabel
+    } = useProjection(control, rawHandleChange);
     const options = computed(
       () => control.value.uischema?.options ?? {}
     );
     const placeholder = computed(
-      () => options.value.placeholder ?? control.value.description
+      () => resolvePlaceholder(control.value.uischema, projectedLabel.value, "input")
     );
-    useDerive({ control, handleChange });
+    useDerive({ control, handleChange, data: projectedData });
+    useDeriveInitialValue({ control, handleChange });
     const mode = computed(() => {
       if (options.value.currency) return "currency";
       if (options.value.decimal || typeof options.value.precision === "number")
@@ -88,34 +102,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (mode.value === "currency") return true;
       return options.value.useGrouping === true;
     });
-    const hasInteracted = ref(false);
-    const showErrors = computed(() => hasInteracted.value && control.value.errors);
+    const { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);
     const onNumber = (val) => {
       handleChange(control.value.path, val ?? void 0);
     };
-    const onBlur = () => {
-      hasInteracted.value = true;
-    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        unref(control).label ? (openBlock(), createElementBlock("label", _hoisted_2, toDisplayString(unref(control).label), 1)) : createCommentVNode("", true),
+        unref(projectedLabel) ? (openBlock(), createElementBlock("label", _hoisted_2, toDisplayString(unref(projectedLabel)), 1)) : createCommentVNode("", true),
         unref(control).description ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(unref(control).description), 1)) : createCommentVNode("", true),
         createVNode(unref(InputNumber), {
-          class: "w-full!",
-          "input-class": "w-full!",
+          class: normalizeClass(["w-full!", { "p-invalid": unref(showErrors) }]),
+          "input-class": ["w-full!", { "p-invalid": unref(showErrors) }],
           "use-grouping": useGrouping.value,
           mode: mode.value,
           currency: currency.value,
           "min-fraction-digits": minFractionDigits.value,
           "max-fraction-digits": maxFractionDigits.value,
-          "model-value": typeof unref(control).data === "number" ? unref(control).data : null,
+          "model-value": typeof unref(projectedData) === "number" ? unref(projectedData) : null,
           placeholder: placeholder.value,
           disabled: !unref(control).enabled,
-          "aria-invalid": !!showErrors.value || void 0,
+          "aria-invalid": unref(showErrors) || void 0,
           "onUpdate:modelValue": onNumber,
-          onBlur
-        }, null, 8, ["use-grouping", "mode", "currency", "min-fraction-digits", "max-fraction-digits", "model-value", "placeholder", "disabled", "aria-invalid"]),
-        showErrors.value ? (openBlock(), createElementBlock("small", _hoisted_4, toDisplayString(unref(control).errors), 1)) : createCommentVNode("", true)
+          onBlur: unref(markDirty)
+        }, null, 8, ["class", "input-class", "use-grouping", "mode", "currency", "min-fraction-digits", "max-fraction-digits", "model-value", "placeholder", "disabled", "aria-invalid", "onBlur"]),
+        unref(showErrors) ? (openBlock(), createElementBlock("small", _hoisted_4, toDisplayString(unref(projectedErrors)), 1)) : createCommentVNode("", true)
       ]);
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"JfNumber.vue.js","sources":["../../../src/vue/primevue/JfNumber.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"JfNumber\",\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 { useDerive } from \"../composables/useDerive\";\nimport InputNumber from \"primevue/inputnumber\";\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 options = computed(\n  () =>\n    (control.value.uischema as { options?: Record<string, unknown> })\n      ?.options ?? {},\n);\n\nconst placeholder = computed<string | undefined>(\n  () => (options.value.placeholder as string) ?? control.value.description,\n);\n\n// Add derive functionality\nuseDerive({ control, handleChange });\n\n// Currency and decimal configuration\nconst mode = computed(() => {\n  if (options.value.currency) return \"currency\";\n  if (options.value.decimal || typeof options.value.precision === \"number\")\n    return \"decimal\";\n  return undefined;\n});\n\nconst currency = computed(() =>\n  typeof options.value.currency === \"string\" ? options.value.currency : \"USD\",\n);\n\nconst minFractionDigits = computed(() => {\n  // For integer types, no fractional digits\n  if (control.value.schema?.type === \"integer\") return 0;\n  if (mode.value === \"currency\") return 2;\n  if (typeof options.value.precision === \"number\")\n    return options.value.precision;\n  return undefined;\n});\n\nconst maxFractionDigits = computed(() => {\n  // For integer types, no fractional digits\n  if (control.value.schema?.type === \"integer\") return 0;\n  if (mode.value === \"currency\") return 2;\n  if (typeof options.value.precision === \"number\")\n    return options.value.precision;\n  return undefined;\n});\n\nconst useGrouping = computed(() => {\n  // Enable grouping for currency by default, or if explicitly set\n  if (mode.value === \"currency\") return true;\n  return options.value.useGrouping === true;\n});\n\n// Track user interaction\nconst hasInteracted = ref(false);\n\nconst showErrors = computed(() => hasInteracted.value && control.value.errors);\n\nconst onNumber = (val: number | null) => {\n  handleChange(control.value.path, val ?? undefined);\n};\n\nconst onBlur = () => {\n  hasInteracted.value = true;\n};\n</script>\n\n<template>\n  <div class=\"flex flex-col 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    <InputNumber\n      class=\"w-full!\"\n      input-class=\"w-full!\"\n      :use-grouping=\"useGrouping\"\n      :mode=\"mode\"\n      :currency=\"currency\"\n      :min-fraction-digits=\"minFractionDigits\"\n      :max-fraction-digits=\"maxFractionDigits\"\n      :model-value=\"typeof control.data === 'number' ? control.data : null\"\n      :placeholder=\"placeholder\"\n      :disabled=\"!control.enabled\"\n      :aria-invalid=\"!!showErrors || undefined\"\n      @update:model-value=\"onNumber\"\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":"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"}
+{"version":3,"file":"JfNumber.vue.js","sources":["../../../src/vue/primevue/JfNumber.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"JfNumber\",\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      default: undefined,\n    },\n    cells: {\n      type: Array,\n      required: false,\n      default: undefined,\n    },\n    config: {\n      type: Object,\n      required: false,\n      default: undefined,\n    },\n  },\n};\n</script>\n\n<script setup lang=\"ts\">\nimport type { ControlProps } from \"@jsonforms/vue\";\nimport { useJsonFormsControl } from \"@jsonforms/vue\";\nimport { computed, getCurrentInstance } from \"vue\";\nimport { useDerive } from \"../composables/useDerive\";\nimport { useDeriveInitialValue } from \"../composables/useDeriveInitialValue\";\nimport { useProjection } from \"../composables/useProjection\";\nimport { useDirtyValidation } from \"../composables/useDirtyValidation\";\nimport { resolvePlaceholder } from \"../utils/placeholder\";\nimport InputNumber from \"primevue/inputnumber\";\n\n// Access props from the component instance\nconst instance = getCurrentInstance()!;\nconst props = instance.props as unknown as ControlProps;\nconst { control, handleChange: rawHandleChange } = useJsonFormsControl(props);\nconst {\n  projectedData,\n  handleProjectedChange: handleChange,\n  projectedErrors,\n  projectedLabel,\n} = useProjection(control, rawHandleChange);\n\nconst options = computed(\n  () =>\n    (control.value.uischema as { options?: Record<string, unknown> })\n      ?.options ?? {},\n);\n\nconst placeholder = computed<string | undefined>(() =>\n  resolvePlaceholder(control.value.uischema, projectedLabel.value, \"input\"),\n);\n\n// Add derive functionality\nuseDerive({ control, handleChange, data: projectedData });\n\n// Add deriveInitialValue — async API-based initial value seeding\nuseDeriveInitialValue({ control, handleChange });\n\n// Currency and decimal configuration\nconst mode = computed(() => {\n  if (options.value.currency) return \"currency\";\n  if (options.value.decimal || typeof options.value.precision === \"number\")\n    return \"decimal\";\n  return undefined;\n});\n\nconst currency = computed(() =>\n  typeof options.value.currency === \"string\" ? options.value.currency : \"USD\",\n);\n\nconst minFractionDigits = computed(() => {\n  // For integer types, no fractional digits\n  if (control.value.schema?.type === \"integer\") return 0;\n  if (mode.value === \"currency\") return 2;\n  if (typeof options.value.precision === \"number\")\n    return options.value.precision;\n  return undefined;\n});\n\nconst maxFractionDigits = computed(() => {\n  // For integer types, no fractional digits\n  if (control.value.schema?.type === \"integer\") return 0;\n  if (mode.value === \"currency\") return 2;\n  if (typeof options.value.precision === \"number\")\n    return options.value.precision;\n  return undefined;\n});\n\nconst useGrouping = computed(() => {\n  // Enable grouping for currency by default, or if explicitly set\n  if (mode.value === \"currency\") return true;\n  return options.value.useGrouping === true;\n});\n\n// Track user interaction — errors only show after blur\nconst { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);\n\nconst onNumber = (val: number | null) => {\n  handleChange(control.value.path, val ?? undefined);\n};\n</script>\n\n<template>\n  <div class=\"jf-control\">\n    <label v-if=\"projectedLabel\" class=\"jf-label\">{{ projectedLabel }}</label>\n    <div v-if=\"control.description\" class=\"jf-description\">\n      {{ control.description }}\n    </div>\n    <InputNumber\n      :class=\"['w-full!', { 'p-invalid': showErrors }]\"\n      :input-class=\"['w-full!', { 'p-invalid': showErrors }]\"\n      :use-grouping=\"useGrouping\"\n      :mode=\"mode\"\n      :currency=\"currency\"\n      :min-fraction-digits=\"minFractionDigits\"\n      :max-fraction-digits=\"maxFractionDigits\"\n      :model-value=\"typeof projectedData === 'number' ? projectedData : null\"\n      :placeholder=\"placeholder\"\n      :disabled=\"!control.enabled\"\n      :aria-invalid=\"showErrors || undefined\"\n      @update:model-value=\"onNumber\"\n      @blur=\"markDirty\"\n    />\n    <small v-if=\"showErrors\" class=\"p-error\">{{ projectedErrors }}</small>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_unref","_toDisplayString","_createVNode"],"mappings":"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"}

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

@@ -18,14 +18,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     renderers: {
         type: ArrayConstructor;
         required: false;
+        default: undefined;
     };
     cells: {
         type: ArrayConstructor;
         required: false;
+        default: undefined;
     };
     config: {
         type: ObjectConstructor;
         required: false;
+        default: undefined;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     uischema: {
@@ -47,17 +50,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     renderers: {
         type: ArrayConstructor;
         required: false;
+        default: undefined;
     };
     cells: {
         type: ArrayConstructor;
         required: false;
+        default: undefined;
     };
     config: {
         type: ObjectConstructor;
         required: false;
+        default: undefined;
     };
 }>> & Readonly<{}>, {
+    config: Record<string, any>;
     enabled: boolean;
+    renderers: unknown[];
+    cells: unknown[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=JfText.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"JfText.vue.d.ts","sourceRoot":"","sources":["../../../src/vue/primevue/JfText.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyMA,wBAgXK"}
+{"version":3,"file":"JfText.vue.d.ts","sourceRoot":"","sources":["../../../src/vue/primevue/JfText.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4NA,wBAsXK"}

package/dist/vue/primevue/JfText.vue.js

@@ -1,17 +1,21 @@
-import { defineComponent, getCurrentInstance, computed, inject, ref, watch, createElementBlock, openBlock, createCommentVNode, createBlock, unref, toDisplayString } from "vue";
+import { defineComponent, getCurrentInstance, computed, inject, ref, watch, createElementBlock, openBlock, createCommentVNode, createBlock, unref, toDisplayString, normalizeClass } from "vue";
 import { useJsonFormsControl } from "@jsonforms/vue";
 import { useProvider } from "../composables/useProvider.js";
 import { useDerive } from "../composables/useDerive.js";
+import { useDeriveInitialValue } from "../composables/useDeriveInitialValue.js";
+import { useProjection } from "../composables/useProjection.js";
+import { useDirtyValidation } from "../composables/useDirtyValidation.js";
+import { resolvePlaceholder } from "../utils/placeholder.js";
 import InputText from "primevue/inputtext";
 import AutoComplete from "primevue/autocomplete";
-const _hoisted_1 = { class: "flex flex-col gap-2" };
+const _hoisted_1 = { class: "jf-control" };
 const _hoisted_2 = {
   key: 0,
-  class: "text-color text-left"
+  class: "jf-label"
 };
 const _hoisted_3 = {
   key: 1,
-  class: "text-color-secondary text-left"
+  class: "jf-description"
 };
 const _hoisted_4 = {
   key: 4,
@@ -43,15 +47,18 @@ const __default__ = {
     },
     renderers: {
       type: Array,
-      required: false
+      required: false,
+      default: void 0
     },
     cells: {
       type: Array,
-      required: false
+      required: false,
+      default: void 0
     },
     config: {
       type: Object,
-      required: false
+      required: false,
+      default: void 0
     }
   }
 };
@@ -60,7 +67,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const instance = getCurrentInstance();
     const props = instance.props;
-    const { control, handleChange } = useJsonFormsControl(props);
+    const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
+    const {
+      projectedData,
+      handleProjectedChange: handleChange,
+      projectedErrors,
+      projectedLabel
+    } = useProjection(control, rawHandleChange);
     const binding = computed(() => {
       const provider = control.value.uischema?.options?.provider;
       if (provider && typeof provider === "object" && !provider.load) {
@@ -93,34 +106,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       data: rootData,
       path: control.value.path,
       uiQuery: query.value,
-      dependsOnValues: depValues.value
+      dependsOnValues: depValues
     });
     watch(query, () => {
       if (binding.value?.load === "query") reload();
     });
+    const isAutocomplete = computed(() => !!binding.value);
     const placeholder = computed(() => {
       if (loading.value) return "Loading…";
-      return control.value.uischema?.options?.placeholder ?? control.value.description;
+      const explicit = control.value.uischema?.options?.placeholder;
+      if (explicit) return explicit;
+      if (isAutocomplete.value) return "Type to search…";
+      return resolvePlaceholder(
+        control.value.uischema,
+        projectedLabel.value,
+        "input"
+      );
     });
-    const isAutocomplete = computed(() => !!binding.value);
-    useDerive({ control, handleChange });
-    const hasInteracted = ref(false);
-    const hasFocused = ref(false);
-    const showErrors = computed(() => hasInteracted.value && control.value.errors);
+    useDerive({ control, handleChange, data: projectedData });
+    useDeriveInitialValue({ control, handleChange });
+    const { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);
     function onInput(val) {
       const newValue = val && val.trim() !== "" ? val : void 0;
-      if (control.value.data !== newValue) {
+      if (projectedData.value !== newValue) {
         handleChange(control.value.path, newValue);
       }
     }
     function onBlur() {
-      if (hasFocused.value) {
-        hasInteracted.value = true;
+      markDirty();
+      const val = projectedData.value;
+      if (typeof val === "string" && val.trim() === "") {
+        handleChange(control.value.path, void 0);
       }
     }
-    function onFocus() {
-      hasFocused.value = true;
-    }
     const onComplete = (event) => {
       query.value = event.query;
     };
@@ -130,37 +148,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        unref(control).label ? (openBlock(), createElementBlock("label", _hoisted_2, toDisplayString(unref(control).label), 1)) : createCommentVNode("", true),
+        unref(projectedLabel) ? (openBlock(), createElementBlock("label", _hoisted_2, toDisplayString(unref(projectedLabel)), 1)) : createCommentVNode("", true),
         unref(control).description ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(unref(control).description), 1)) : createCommentVNode("", true),
         isAutocomplete.value ? (openBlock(), createBlock(unref(AutoComplete), {
           key: 2,
-          class: "w-full!",
-          "model-value": unref(control).data ?? "",
+          class: normalizeClass(["w-full!", { "p-invalid": unref(showErrors) }]),
+          "model-value": unref(projectedData) ?? "",
           suggestions: unref(items),
           "option-label": "label",
           placeholder: placeholder.value,
           disabled: !unref(control).enabled,
-          "aria-invalid": !!showErrors.value || void 0,
+          "aria-invalid": unref(showErrors) || void 0,
           onComplete,
           onItemSelect: onSelect,
           "onUpdate:modelValue": onInput,
-          onBlur,
-          onFocus
-        }, null, 8, ["model-value", "suggestions", "placeholder", "disabled", "aria-invalid"])) : (openBlock(), createBlock(unref(InputText), {
+          onBlur
+        }, null, 8, ["class", "model-value", "suggestions", "placeholder", "disabled", "aria-invalid"])) : (openBlock(), createBlock(unref(InputText), {
           key: 3,
-          class: "w-full!",
-          "model-value": unref(control).data ?? "",
+          class: normalizeClass(["w-full!", { "p-invalid": unref(showErrors) }]),
+          "model-value": unref(projectedData) ?? "",
           disabled: !unref(control).enabled,
-          "aria-invalid": !!showErrors.value || void 0,
+          "aria-invalid": unref(showErrors) || void 0,
           placeholder: placeholder.value,
           autocapitalize: "off",
           autocomplete: "off",
           spellcheck: "false",
           "onUpdate:modelValue": onInput,
-          onBlur,
-          onFocus
-        }, null, 8, ["model-value", "disabled", "aria-invalid", "placeholder"])),
-        unref(error) ? (openBlock(), createElementBlock("small", _hoisted_4, "Failed: " + toDisplayString(unref(error)), 1)) : showErrors.value ? (openBlock(), createElementBlock("small", _hoisted_5, toDisplayString(unref(control).errors), 1)) : createCommentVNode("", true)
+          onBlur
+        }, null, 8, ["class", "model-value", "disabled", "aria-invalid", "placeholder"])),
+        unref(error) ? (openBlock(), createElementBlock("small", _hoisted_4, "Failed: " + toDisplayString(unref(error)), 1)) : unref(showErrors) ? (openBlock(), createElementBlock("small", _hoisted_5, toDisplayString(unref(projectedErrors)), 1)) : createCommentVNode("", true)
       ]);
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"JfText.vue.js","sources":["../../../src/vue/primevue/JfText.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"JfText\",\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, inject, watch, getCurrentInstance } from \"vue\";\nimport { useProvider } from \"../composables/useProvider\";\nimport { useDerive } from \"../composables/useDerive\";\nimport InputText from \"primevue/inputtext\";\nimport AutoComplete from \"primevue/autocomplete\";\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\n// Provider support for autocomplete functionality\nconst binding = computed(() => {\n  const provider = control.value.uischema?.options?.provider;\n  // Ensure load property is set to 'query' by default for autocomplete\n  if (provider && typeof provider === \"object\" && !provider.load) {\n    return { ...provider, load: \"query\" };\n  }\n  return provider;\n});\n\nconst deps = computed(\n  () =>\n    ((\n      (control.value.schema as Record<string, unknown>)?.[\n        \"x-provider\"\n      ] as Record<string, unknown>\n    )?.dependsOn as string[]) ?? [],\n);\nconst depValues = computed(() => {\n  return deps.value.map((dep) => {\n    // Resolve dependency value from form data using JSON pointer-like path\n    const path = dep.startsWith(\"#/\") ? dep.slice(2) : dep;\n    const keys = path.replace(/\\//g, \".\").split(\".\");\n    let value: unknown = rootData.value;\n    for (const key of keys) {\n      if (value && typeof value === \"object\" && key in value) {\n        value = (value as Record<string, unknown>)[key];\n      } else {\n        return null;\n      }\n    }\n    return value;\n  });\n});\n\n// Get the root form data from JSONForms context for template URL resolution\nconst injectedFormData = inject<{ value: unknown }>(\"formData\", { value: {} });\nconst rootData = computed(() => injectedFormData.value || {});\n\nconst query = ref(\"\");\nconst { items, loading, error, reload } = useProvider(binding, {\n  data: rootData,\n  path: control.value.path,\n  uiQuery: query.value,\n  dependsOnValues: depValues.value,\n});\n\nwatch(query, () => {\n  if (binding.value?.load === \"query\") reload();\n});\n\nconst placeholder = computed<string | undefined>(() => {\n  if (loading.value) return \"Loading…\";\n  return (\n    (control.value.uischema as { options?: { placeholder?: string } })?.options\n      ?.placeholder ?? control.value.description\n  );\n});\n\nconst isAutocomplete = computed(() => !!binding.value);\n\n// Add derive functionality\nuseDerive({ control, handleChange });\n\n// Track user interaction\nconst hasInteracted = ref(false);\nconst hasFocused = 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  if (hasFocused.value) {\n    hasInteracted.value = true;\n  }\n}\n\nfunction onFocus() {\n  hasFocused.value = true;\n}\n\n// Autocomplete specific handlers\nconst onComplete = (event: { query: string }) => {\n  query.value = event.query;\n};\n\nconst onSelect = (event: { value?: { value?: unknown } | unknown }) => {\n  const newValue = (event.value as { value?: unknown })?.value ?? event.value;\n  handleChange(control.value.path, newValue);\n};\n</script>\n\n<template>\n  <div class=\"flex flex-col 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    <AutoComplete\n      v-if=\"isAutocomplete\"\n      class=\"w-full!\"\n      :model-value=\"control.data ?? ''\"\n      :suggestions=\"items\"\n      option-label=\"label\"\n      :placeholder=\"placeholder\"\n      :disabled=\"!control.enabled\"\n      :aria-invalid=\"!!showErrors || undefined\"\n      @complete=\"onComplete\"\n      @item-select=\"onSelect\"\n      @update:model-value=\"onInput\"\n      @blur=\"onBlur\"\n      @focus=\"onFocus\"\n    />\n    <InputText\n      v-else\n      class=\"w-full!\"\n      :model-value=\"control.data ?? ''\"\n      :disabled=\"!control.enabled\"\n      :aria-invalid=\"!!showErrors || undefined\"\n      :placeholder=\"placeholder\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      @update:model-value=\"onInput\"\n      @blur=\"onBlur\"\n      @focus=\"onFocus\"\n    />\n    <small v-if=\"error\" class=\"p-error\" role=\"alert\">Failed: {{ error }}</small>\n    <small v-else-if=\"showErrors\" class=\"p-error\">{{ control.errors }}</small>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_unref","_toDisplayString","_createBlock"],"mappings":"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"}
+{"version":3,"file":"JfText.vue.js","sources":["../../../src/vue/primevue/JfText.vue"],"sourcesContent":["<script lang=\"ts\">\nexport default {\n  name: \"JfText\",\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      default: undefined,\n    },\n    cells: {\n      type: Array,\n      required: false,\n      default: undefined,\n    },\n    config: {\n      type: Object,\n      required: false,\n      default: undefined,\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, inject, watch, getCurrentInstance } from \"vue\";\nimport { useProvider } from \"../composables/useProvider\";\nimport { useDerive } from \"../composables/useDerive\";\nimport { useDeriveInitialValue } from \"../composables/useDeriveInitialValue\";\nimport { useProjection } from \"../composables/useProjection\";\nimport { useDirtyValidation } from \"../composables/useDirtyValidation\";\nimport { resolvePlaceholder } from \"../utils/placeholder\";\nimport InputText from \"primevue/inputtext\";\nimport AutoComplete from \"primevue/autocomplete\";\n\n// Access props from the component instance\nconst instance = getCurrentInstance()!;\nconst props = instance.props as unknown as ControlProps;\nconst { control, handleChange: rawHandleChange } = useJsonFormsControl(props);\nconst {\n  projectedData,\n  handleProjectedChange: handleChange,\n  projectedErrors,\n  projectedLabel,\n} = useProjection(control, rawHandleChange);\n\n// Provider support for autocomplete functionality\nconst binding = computed(() => {\n  const provider = control.value.uischema?.options?.provider;\n  // Ensure load property is set to 'query' by default for autocomplete\n  if (provider && typeof provider === \"object\" && !provider.load) {\n    return { ...provider, load: \"query\" };\n  }\n  return provider;\n});\n\nconst deps = computed(\n  () =>\n    ((\n      (control.value.schema as Record<string, unknown>)?.[\n        \"x-provider\"\n      ] as Record<string, unknown>\n    )?.dependsOn as string[]) ?? [],\n);\nconst depValues = computed(() => {\n  return deps.value.map((dep) => {\n    // Resolve dependency value from form data using JSON pointer-like path\n    const path = dep.startsWith(\"#/\") ? dep.slice(2) : dep;\n    const keys = path.replace(/\\//g, \".\").split(\".\");\n    let value: unknown = rootData.value;\n    for (const key of keys) {\n      if (value && typeof value === \"object\" && key in value) {\n        value = (value as Record<string, unknown>)[key];\n      } else {\n        return null;\n      }\n    }\n    return value;\n  });\n});\n\n// Get the root form data from JSONForms context for template URL resolution\nconst injectedFormData = inject<{ value: unknown }>(\"formData\", { value: {} });\nconst rootData = computed(() => injectedFormData.value || {});\n\nconst query = ref(\"\");\nconst { items, loading, error, reload } = useProvider(binding, {\n  data: rootData,\n  path: control.value.path,\n  uiQuery: query.value,\n  dependsOnValues: depValues,\n});\n\nwatch(query, () => {\n  if (binding.value?.load === \"query\") reload();\n});\n\nconst isAutocomplete = computed(() => !!binding.value);\n\nconst placeholder = computed<string | undefined>(() => {\n  if (loading.value) return \"Loading…\";\n  const explicit = (\n    control.value.uischema as { options?: { placeholder?: string } }\n  )?.options?.placeholder;\n  if (explicit) return explicit;\n  // In autocomplete mode the input is really a search box — use matching UX.\n  if (isAutocomplete.value) return \"Type to search…\";\n  return resolvePlaceholder(\n    control.value.uischema,\n    projectedLabel.value,\n    \"input\",\n  );\n});\n\n// Add derive functionality\nuseDerive({ control, handleChange, data: projectedData });\n\n// Add deriveInitialValue — async API-based initial value seeding\nuseDeriveInitialValue({ control, handleChange });\n\n// Track user interaction — errors only show after blur\nconst { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);\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 (projectedData.value !== newValue) {\n    handleChange(control.value.path, newValue);\n  }\n}\n\nfunction onBlur() {\n  markDirty();\n  // Normalize empty strings to undefined so required validation fires\n  const val = projectedData.value;\n  if (typeof val === \"string\" && val.trim() === \"\") {\n    handleChange(control.value.path, undefined);\n  }\n}\n\n// Autocomplete specific handlers\nconst onComplete = (event: { query: string }) => {\n  query.value = event.query;\n};\n\nconst onSelect = (event: { value?: { value?: unknown } | unknown }) => {\n  const newValue = (event.value as { value?: unknown })?.value ?? event.value;\n  handleChange(control.value.path, newValue);\n};\n</script>\n\n<template>\n  <div class=\"jf-control\">\n    <label v-if=\"projectedLabel\" class=\"jf-label\">{{ projectedLabel }}</label>\n    <div v-if=\"control.description\" class=\"jf-description\">\n      {{ control.description }}\n    </div>\n    <AutoComplete\n      v-if=\"isAutocomplete\"\n      :class=\"['w-full!', { 'p-invalid': showErrors }]\"\n      :model-value=\"projectedData ?? ''\"\n      :suggestions=\"items\"\n      option-label=\"label\"\n      :placeholder=\"placeholder\"\n      :disabled=\"!control.enabled\"\n      :aria-invalid=\"showErrors || undefined\"\n      @complete=\"onComplete\"\n      @item-select=\"onSelect\"\n      @update:model-value=\"onInput\"\n      @blur=\"onBlur\"\n    />\n    <InputText\n      v-else\n      :class=\"['w-full!', { 'p-invalid': showErrors }]\"\n      :model-value=\"(projectedData as string) ?? ''\"\n      :disabled=\"!control.enabled\"\n      :aria-invalid=\"showErrors || undefined\"\n      :placeholder=\"placeholder\"\n      autocapitalize=\"off\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      @update:model-value=\"onInput\"\n      @blur=\"onBlur\"\n    />\n    <small v-if=\"error\" class=\"p-error\" role=\"alert\">Failed: {{ error }}</small>\n    <small v-else-if=\"showErrors\" class=\"p-error\">{{ projectedErrors }}</small>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_unref","_toDisplayString","_createBlock"],"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,MACV,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,IAEX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;;;;AAiBA,UAAM,WAAW,mBAAA;AACjB,UAAM,QAAQ,SAAS;AACvB,UAAM,EAAE,SAAS,cAAc,gBAAA,IAAoB,oBAAoB,KAAK;AAC5E,UAAM;AAAA,MACJ;AAAA,MACA,uBAAuB;AAAA,MACvB;AAAA,MACA;AAAA,IAAA,IACE,cAAc,SAAS,eAAe;AAG1C,UAAM,UAAU,SAAS,MAAM;AAC7B,YAAM,WAAW,QAAQ,MAAM,UAAU,SAAS;AAElD,UAAI,YAAY,OAAO,aAAa,YAAY,CAAC,SAAS,MAAM;AAC9D,eAAO,EAAE,GAAG,UAAU,MAAM,QAAA;AAAA,MAC9B;AACA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,OAAO;AAAA,MACX,MAEK,QAAQ,MAAM,SACb,YACF,GACC,aAA0B,CAAA;AAAA,IAAC;AAElC,UAAM,YAAY,SAAS,MAAM;AAC/B,aAAO,KAAK,MAAM,IAAI,CAAC,QAAQ;AAE7B,cAAM,OAAO,IAAI,WAAW,IAAI,IAAI,IAAI,MAAM,CAAC,IAAI;AACnD,cAAM,OAAO,KAAK,QAAQ,OAAO,GAAG,EAAE,MAAM,GAAG;AAC/C,YAAI,QAAiB,SAAS;AAC9B,mBAAW,OAAO,MAAM;AACtB,cAAI,SAAS,OAAO,UAAU,YAAY,OAAO,OAAO;AACtD,oBAAS,MAAkC,GAAG;AAAA,UAChD,OAAO;AACL,mBAAO;AAAA,UACT;AAAA,QACF;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH,CAAC;AAGD,UAAM,mBAAmB,OAA2B,YAAY,EAAE,OAAO,CAAA,GAAI;AAC7E,UAAM,WAAW,SAAS,MAAM,iBAAiB,SAAS,CAAA,CAAE;AAE5D,UAAM,QAAQ,IAAI,EAAE;AACpB,UAAM,EAAE,OAAO,SAAS,OAAO,OAAA,IAAW,YAAY,SAAS;AAAA,MAC7D,MAAM;AAAA,MACN,MAAM,QAAQ,MAAM;AAAA,MACpB,SAAS,MAAM;AAAA,MACf,iBAAiB;AAAA,IAAA,CAClB;AAED,UAAM,OAAO,MAAM;AACjB,UAAI,QAAQ,OAAO,SAAS,QAAS,QAAA;AAAA,IACvC,CAAC;AAED,UAAM,iBAAiB,SAAS,MAAM,CAAC,CAAC,QAAQ,KAAK;AAErD,UAAM,cAAc,SAA6B,MAAM;AACrD,UAAI,QAAQ,MAAO,QAAO;AAC1B,YAAM,WACJ,QAAQ,MAAM,UACb,SAAS;AACZ,UAAI,SAAU,QAAO;AAErB,UAAI,eAAe,MAAO,QAAO;AACjC,aAAO;AAAA,QACL,QAAQ,MAAM;AAAA,QACd,eAAe;AAAA,QACf;AAAA,MAAA;AAAA,IAEJ,CAAC;AAGD,cAAU,EAAE,SAAS,cAAc,MAAM,eAAe;AAGxD,0BAAsB,EAAE,SAAS,cAAc;AAG/C,UAAM,EAAE,YAAY,UAAA,IAAc,mBAAmB,SAAS,eAAe;AAE7E,aAAS,QAAQ,KAAyB;AAExC,YAAM,WAAW,OAAO,IAAI,KAAA,MAAW,KAAK,MAAM;AAClD,UAAI,cAAc,UAAU,UAAU;AACpC,qBAAa,QAAQ,MAAM,MAAM,QAAQ;AAAA,MAC3C;AAAA,IACF;AAEA,aAAS,SAAS;AAChB,gBAAA;AAEA,YAAM,MAAM,cAAc;AAC1B,UAAI,OAAO,QAAQ,YAAY,IAAI,KAAA,MAAW,IAAI;AAChD,qBAAa,QAAQ,MAAM,MAAM,MAAS;AAAA,MAC5C;AAAA,IACF;AAGA,UAAM,aAAa,CAAC,UAA6B;AAC/C,YAAM,QAAQ,MAAM;AAAA,IACtB;AAEA,UAAM,WAAW,CAAC,UAAqD;AACrE,YAAM,WAAY,MAAM,OAA+B,SAAS,MAAM;AACtE,mBAAa,QAAQ,MAAM,MAAM,QAAQ;AAAA,IAC3C;;AAIE,aAAAA,UAAA,GAAAC,mBAkCM,OAlCN,YAkCM;AAAA,QAjCSC,MAAA,cAAA,kBAAbD,mBAA0E,SAA1E,YAA0EE,gBAAzBD,MAAA,cAAA,CAAc,GAAA,CAAA;QACpDA,MAAA,OAAA,EAAQ,eAAnBF,UAAA,GAAAC,mBAEM,OAFN,YAEME,gBADDD,MAAA,OAAA,EAAQ,WAAW,GAAA,CAAA;QAGhB,eAAA,sBADRE,YAaEF,MAAA,YAAA,GAAA;AAAA;UAXC,iDAAkCA,MAAA,UAAA,EAAA,CAAU,CAAA;AAAA,UAC5C,eAAaA,MAAA,aAAA,KAAa;AAAA,UAC1B,aAAaA,MAAA,KAAA;AAAA,UACd,gBAAa;AAAA,UACZ,aAAa,YAAA;AAAA,UACb,UAAQ,CAAGA,MAAA,OAAA,EAAQ;AAAA,UACnB,gBAAcA,MAAA,UAAA,KAAc;AAAA,UAC5B;AAAA,UACA,cAAa;AAAA,UACb,uBAAoB;AAAA,UACpB;AAAA,QAAA,iHAEHE,YAYEF,MAAA,SAAA,GAAA;AAAA;UAVC,iDAAkCA,MAAA,UAAA,EAAA,CAAU,CAAA;AAAA,UAC5C,eAAcA,MAAA,aAAA,KAAa;AAAA,UAC3B,UAAQ,CAAGA,MAAA,OAAA,EAAQ;AAAA,UACnB,gBAAcA,MAAA,UAAA,KAAc;AAAA,UAC5B,aAAa,YAAA;AAAA,UACd,gBAAe;AAAA,UACf,cAAa;AAAA,UACb,YAAW;AAAA,UACV,uBAAoB;AAAA,UACpB;AAAA,QAAA;QAEUA,MAAA,KAAA,KAAbF,UAAA,GAAAC,mBAA4E,SAA5E,YAAiD,6BAAWC,MAAA,KAAA,CAAK,GAAA,CAAA,KAC/CA,MAAA,UAAA,kBAAlBD,mBAA2E,SAA3E,YAA2EE,gBAA1BD,MAAA,eAAA,CAAe,GAAA,CAAA;;;;;"}

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

@@ -18,14 +18,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     renderers: {
         type: ArrayConstructor;
         required: false;
+        default: undefined;
     };
     cells: {
         type: ArrayConstructor;
         required: false;
+        default: undefined;
     };
     config: {
         type: ObjectConstructor;
         required: false;
+        default: undefined;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     uischema: {
@@ -47,17 +50,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     renderers: {
         type: ArrayConstructor;
         required: false;
+        default: undefined;
     };
     cells: {
         type: ArrayConstructor;
         required: false;
+        default: undefined;
     };
     config: {
         type: ObjectConstructor;
         required: false;
+        default: undefined;
     };
 }>> & Readonly<{}>, {
+    config: Record<string, any>;
     enabled: boolean;
+    renderers: unknown[];
+    cells: unknown[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=JfTextArea.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"JfTextArea.vue.d.ts","sourceRoot":"","sources":["../../../src/vue/primevue/JfTextArea.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqGA,wBA+MK"}
+{"version":3,"file":"JfTextArea.vue.d.ts","sourceRoot":"","sources":["../../../src/vue/primevue/JfTextArea.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHA,wBA0NK"}

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

@@ -1,14 +1,17 @@
-import { defineComponent, getCurrentInstance, computed, ref, createElementBlock, openBlock, createCommentVNode, createVNode, unref, toDisplayString } from "vue";
+import { defineComponent, getCurrentInstance, computed, createElementBlock, openBlock, createCommentVNode, createVNode, unref, toDisplayString, normalizeClass } from "vue";
 import { useJsonFormsControl } from "@jsonforms/vue";
+import { useProjection } from "../composables/useProjection.js";
+import { useDirtyValidation } from "../composables/useDirtyValidation.js";
+import { resolvePlaceholder } from "../utils/placeholder.js";
 import Textarea from "primevue/textarea";
-const _hoisted_1 = { class: "flex flex-col gap-2" };
+const _hoisted_1 = { class: "jf-control" };
 const _hoisted_2 = {
   key: 0,
-  class: "text-color text-left"
+  class: "jf-label"
 };
 const _hoisted_3 = {
   key: 1,
-  class: "text-color-secondary text-left"
+  class: "jf-description"
 };
 const _hoisted_4 = {
   key: 2,
@@ -35,15 +38,18 @@ const __default__ = {
     },
     renderers: {
       type: Array,
-      required: false
+      required: false,
+      default: void 0
     },
     cells: {
       type: Array,
-      required: false
+      required: false,
+      default: void 0
     },
     config: {
       type: Object,
-      required: false
+      required: false,
+      default: void 0
     }
   }
 };
@@ -52,37 +58,46 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const instance = getCurrentInstance();
     const props = instance.props;
-    const { control, handleChange } = useJsonFormsControl(props);
+    const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
+    const {
+      projectedData,
+      handleProjectedChange: handleChange,
+      projectedErrors,
+      projectedLabel
+    } = useProjection(control, rawHandleChange);
     const placeholder = computed(
-      () => control.value.uischema?.options?.placeholder ?? control.value.description
+      () => resolvePlaceholder(control.value.uischema, projectedLabel.value, "input")
     );
-    const hasInteracted = ref(false);
-    const showErrors = computed(() => hasInteracted.value && control.value.errors);
+    const { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);
     function onInput(val) {
       const newValue = val && val.trim() !== "" ? val : void 0;
-      if (control.value.data !== newValue) {
+      if (projectedData.value !== newValue) {
         handleChange(control.value.path, newValue);
       }
     }
     function onBlur() {
-      hasInteracted.value = true;
+      markDirty();
+      const val = projectedData.value;
+      if (typeof val === "string" && val.trim() === "") {
+        handleChange(control.value.path, void 0);
+      }
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        unref(control).label ? (openBlock(), createElementBlock("label", _hoisted_2, toDisplayString(unref(control).label), 1)) : createCommentVNode("", true),
+        unref(projectedLabel) ? (openBlock(), createElementBlock("label", _hoisted_2, toDisplayString(unref(projectedLabel)), 1)) : createCommentVNode("", true),
         unref(control).description ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(unref(control).description), 1)) : createCommentVNode("", true),
         createVNode(unref(Textarea), {
-          class: "w-full!",
-          "model-value": unref(control).data ?? "",
+          class: normalizeClass(["w-full!", { "p-invalid": unref(showErrors) }]),
+          "model-value": unref(projectedData) ?? "",
           disabled: !unref(control).enabled,
-          "aria-invalid": !!showErrors.value || void 0,
+          "aria-invalid": unref(showErrors) || void 0,
           placeholder: placeholder.value,
           rows: 4,
           "auto-resize": true,
           "onUpdate:modelValue": onInput,
           onBlur
-        }, null, 8, ["model-value", "disabled", "aria-invalid", "placeholder"]),
-        showErrors.value ? (openBlock(), createElementBlock("small", _hoisted_4, toDisplayString(unref(control).errors), 1)) : createCommentVNode("", true)
+        }, null, 8, ["class", "model-value", "disabled", "aria-invalid", "placeholder"]),
+        unref(showErrors) ? (openBlock(), createElementBlock("small", _hoisted_4, toDisplayString(unref(projectedErrors)), 1)) : createCommentVNode("", true)
       ]);
     };
   }