@narrative.io/jsonforms-provider-protocols 2.11.0 → 3.0.0-beta.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +101 -29
- package/dist/core/initFormData.d.ts +10 -0
- package/dist/core/initFormData.d.ts.map +1 -0
- package/dist/core/initFormData.js +99 -0
- package/dist/core/initFormData.js.map +1 -0
- package/dist/core/projection.d.ts +32 -0
- package/dist/core/projection.d.ts.map +1 -0
- package/dist/core/projection.js +74 -0
- package/dist/core/projection.js.map +1 -0
- package/dist/core/resolveScope.d.ts +11 -0
- package/dist/core/resolveScope.d.ts.map +1 -0
- package/dist/core/resolveScope.js +22 -0
- package/dist/core/resolveScope.js.map +1 -0
- package/dist/core/transforms.d.ts +8 -10
- package/dist/core/transforms.d.ts.map +1 -1
- package/dist/core/transforms.js +58 -13
- package/dist/core/transforms.js.map +1 -1
- package/dist/core/types.d.ts +8 -0
- package/dist/core/types.d.ts.map +1 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +14 -3
- package/dist/index.js.map +1 -1
- package/dist/jsonforms-provider-protocols.css +2 -2
- package/dist/vue/components/ProviderAutocomplete.vue.d.ts.map +1 -1
- package/dist/vue/components/ProviderAutocomplete.vue.js +10 -5
- package/dist/vue/components/ProviderAutocomplete.vue.js.map +1 -1
- package/dist/vue/components/ProviderMultiSelect.vue.d.ts.map +1 -1
- package/dist/vue/components/ProviderMultiSelect.vue.js +1 -1
- package/dist/vue/components/ProviderMultiSelect.vue2.js +12 -7
- package/dist/vue/components/ProviderMultiSelect.vue2.js.map +1 -1
- package/dist/vue/components/ProviderSelect.vue.d.ts.map +1 -1
- package/dist/vue/components/ProviderSelect.vue.js +1 -1
- package/dist/vue/components/ProviderSelect.vue2.js +13 -6
- package/dist/vue/components/ProviderSelect.vue2.js.map +1 -1
- package/dist/vue/composables/useDataLayer.d.ts +10 -0
- package/dist/vue/composables/useDataLayer.d.ts.map +1 -0
- package/dist/vue/composables/useDataLayer.js +26 -0
- package/dist/vue/composables/useDataLayer.js.map +1 -0
- package/dist/vue/composables/useDerive.d.ts +5 -2
- package/dist/vue/composables/useDerive.d.ts.map +1 -1
- package/dist/vue/composables/useDerive.js +29 -12
- package/dist/vue/composables/useDerive.js.map +1 -1
- package/dist/vue/composables/useDeriveInitialValue.d.ts +36 -0
- package/dist/vue/composables/useDeriveInitialValue.d.ts.map +1 -0
- package/dist/vue/composables/useDeriveInitialValue.js +125 -0
- package/dist/vue/composables/useDeriveInitialValue.js.map +1 -0
- package/dist/vue/composables/useDirtyValidation.d.ts +9 -0
- package/dist/vue/composables/useDirtyValidation.d.ts.map +1 -0
- package/dist/vue/composables/useDirtyValidation.js +15 -0
- package/dist/vue/composables/useDirtyValidation.js.map +1 -0
- package/dist/vue/composables/useProjection.d.ts +41 -0
- package/dist/vue/composables/useProjection.d.ts.map +1 -0
- package/dist/vue/composables/useProjection.js +84 -0
- package/dist/vue/composables/useProjection.js.map +1 -0
- package/dist/vue/index.d.ts +7 -0
- package/dist/vue/index.d.ts.map +1 -1
- package/dist/vue/index.js +35 -27
- package/dist/vue/index.js.map +1 -1
- package/dist/vue/primevue/JfBoolean.vue.d.ts +9 -0
- package/dist/vue/primevue/JfBoolean.vue.d.ts.map +1 -1
- package/dist/vue/primevue/JfBoolean.vue.js +35 -13
- package/dist/vue/primevue/JfBoolean.vue.js.map +1 -1
- package/dist/vue/primevue/JfEnum.vue.d.ts +9 -0
- package/dist/vue/primevue/JfEnum.vue.d.ts.map +1 -1
- package/dist/vue/primevue/JfEnum.vue.js +31 -22
- package/dist/vue/primevue/JfEnum.vue.js.map +1 -1
- package/dist/vue/primevue/JfEnumArray.vue.d.ts +9 -0
- package/dist/vue/primevue/JfEnumArray.vue.d.ts.map +1 -1
- package/dist/vue/primevue/JfEnumArray.vue.js +33 -18
- package/dist/vue/primevue/JfEnumArray.vue.js.map +1 -1
- package/dist/vue/primevue/JfNumber.vue.d.ts +9 -0
- package/dist/vue/primevue/JfNumber.vue.d.ts.map +1 -1
- package/dist/vue/primevue/JfNumber.vue.js +31 -22
- package/dist/vue/primevue/JfNumber.vue.js.map +1 -1
- package/dist/vue/primevue/JfText.vue.d.ts +9 -0
- package/dist/vue/primevue/JfText.vue.d.ts.map +1 -1
- package/dist/vue/primevue/JfText.vue.js +40 -32
- package/dist/vue/primevue/JfText.vue.js.map +1 -1
- package/dist/vue/primevue/JfTextArea.vue.d.ts +9 -0
- package/dist/vue/primevue/JfTextArea.vue.d.ts.map +1 -1
- package/dist/vue/primevue/JfTextArea.vue.js +32 -18
- package/dist/vue/primevue/JfTextArea.vue.js.map +1 -1
- package/dist/vue/primevue/index.d.ts.map +1 -1
- package/dist/vue/primevue/index.js +100 -8
- package/dist/vue/primevue/index.js.map +1 -1
- package/package.json +3 -1
- package/src/core/initFormData.ts +189 -0
- package/src/core/projection.ts +136 -0
- package/src/core/resolveScope.ts +39 -0
- package/src/core/transforms.ts +118 -26
- package/src/core/types.ts +9 -0
- package/src/index.ts +7 -1
- package/src/vue/components/ProviderAutocomplete.vue +10 -5
- package/src/vue/components/ProviderMultiSelect.vue +14 -7
- package/src/vue/components/ProviderSelect.vue +15 -6
- package/src/vue/composables/useDataLayer.ts +43 -0
- package/src/vue/composables/useDerive.ts +62 -16
- package/src/vue/composables/useDeriveInitialValue.ts +195 -0
- package/src/vue/composables/useDirtyValidation.ts +20 -0
- package/src/vue/composables/useProjection.ts +181 -0
- package/src/vue/index.ts +35 -41
- package/src/vue/primevue/JfBoolean.vue +25 -7
- package/src/vue/primevue/JfEnum.vue +29 -22
- package/src/vue/primevue/JfEnumArray.vue +31 -16
- package/src/vue/primevue/JfNumber.vue +29 -22
- package/src/vue/primevue/JfText.vue +34 -27
- package/src/vue/primevue/JfTextArea.vue +29 -17
- package/src/vue/primevue/index.ts +114 -8
- package/src/vue/styles.css +26 -1
|
@@ -1,15 +1,18 @@
|
|
|
1
|
-
import { defineComponent, getCurrentInstance, computed,
|
|
1
|
+
import { defineComponent, getCurrentInstance, computed, createElementBlock, openBlock, createCommentVNode, createVNode, unref, toDisplayString, normalizeClass } from "vue";
|
|
2
2
|
import { useJsonFormsControl } from "@jsonforms/vue";
|
|
3
3
|
import { useDerive } from "../composables/useDerive.js";
|
|
4
|
+
import { useDeriveInitialValue } from "../composables/useDeriveInitialValue.js";
|
|
5
|
+
import { useProjection } from "../composables/useProjection.js";
|
|
6
|
+
import { useDirtyValidation } from "../composables/useDirtyValidation.js";
|
|
4
7
|
import InputNumber from "primevue/inputnumber";
|
|
5
|
-
const _hoisted_1 = { class: "
|
|
8
|
+
const _hoisted_1 = { class: "jf-control" };
|
|
6
9
|
const _hoisted_2 = {
|
|
7
10
|
key: 0,
|
|
8
|
-
class: "
|
|
11
|
+
class: "jf-label"
|
|
9
12
|
};
|
|
10
13
|
const _hoisted_3 = {
|
|
11
14
|
key: 1,
|
|
12
|
-
class: "
|
|
15
|
+
class: "jf-description"
|
|
13
16
|
};
|
|
14
17
|
const _hoisted_4 = {
|
|
15
18
|
key: 2,
|
|
@@ -36,15 +39,18 @@ const __default__ = {
|
|
|
36
39
|
},
|
|
37
40
|
renderers: {
|
|
38
41
|
type: Array,
|
|
39
|
-
required: false
|
|
42
|
+
required: false,
|
|
43
|
+
default: void 0
|
|
40
44
|
},
|
|
41
45
|
cells: {
|
|
42
46
|
type: Array,
|
|
43
|
-
required: false
|
|
47
|
+
required: false,
|
|
48
|
+
default: void 0
|
|
44
49
|
},
|
|
45
50
|
config: {
|
|
46
51
|
type: Object,
|
|
47
|
-
required: false
|
|
52
|
+
required: false,
|
|
53
|
+
default: void 0
|
|
48
54
|
}
|
|
49
55
|
}
|
|
50
56
|
};
|
|
@@ -53,14 +59,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
53
59
|
setup(__props) {
|
|
54
60
|
const instance = getCurrentInstance();
|
|
55
61
|
const props = instance.props;
|
|
56
|
-
const { control, handleChange } = useJsonFormsControl(props);
|
|
62
|
+
const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
|
|
63
|
+
const {
|
|
64
|
+
projectedData,
|
|
65
|
+
handleProjectedChange: handleChange,
|
|
66
|
+
projectedErrors,
|
|
67
|
+
projectedLabel
|
|
68
|
+
} = useProjection(control, rawHandleChange);
|
|
57
69
|
const options = computed(
|
|
58
70
|
() => control.value.uischema?.options ?? {}
|
|
59
71
|
);
|
|
60
72
|
const placeholder = computed(
|
|
61
73
|
() => options.value.placeholder ?? control.value.description
|
|
62
74
|
);
|
|
63
|
-
useDerive({ control, handleChange });
|
|
75
|
+
useDerive({ control, handleChange, data: projectedData });
|
|
76
|
+
useDeriveInitialValue({ control, handleChange });
|
|
64
77
|
const mode = computed(() => {
|
|
65
78
|
if (options.value.currency) return "currency";
|
|
66
79
|
if (options.value.decimal || typeof options.value.precision === "number")
|
|
@@ -88,34 +101,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
88
101
|
if (mode.value === "currency") return true;
|
|
89
102
|
return options.value.useGrouping === true;
|
|
90
103
|
});
|
|
91
|
-
const
|
|
92
|
-
const showErrors = computed(() => hasInteracted.value && control.value.errors);
|
|
104
|
+
const { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);
|
|
93
105
|
const onNumber = (val) => {
|
|
94
106
|
handleChange(control.value.path, val ?? void 0);
|
|
95
107
|
};
|
|
96
|
-
const onBlur = () => {
|
|
97
|
-
hasInteracted.value = true;
|
|
98
|
-
};
|
|
99
108
|
return (_ctx, _cache) => {
|
|
100
109
|
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
101
|
-
unref(
|
|
110
|
+
unref(projectedLabel) ? (openBlock(), createElementBlock("label", _hoisted_2, toDisplayString(unref(projectedLabel)), 1)) : createCommentVNode("", true),
|
|
102
111
|
unref(control).description ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(unref(control).description), 1)) : createCommentVNode("", true),
|
|
103
112
|
createVNode(unref(InputNumber), {
|
|
104
|
-
class: "w-full!",
|
|
105
|
-
"input-class": "w-full!",
|
|
113
|
+
class: normalizeClass(["w-full!", { "p-invalid": unref(showErrors) }]),
|
|
114
|
+
"input-class": ["w-full!", { "p-invalid": unref(showErrors) }],
|
|
106
115
|
"use-grouping": useGrouping.value,
|
|
107
116
|
mode: mode.value,
|
|
108
117
|
currency: currency.value,
|
|
109
118
|
"min-fraction-digits": minFractionDigits.value,
|
|
110
119
|
"max-fraction-digits": maxFractionDigits.value,
|
|
111
|
-
"model-value": typeof unref(
|
|
120
|
+
"model-value": typeof unref(projectedData) === "number" ? unref(projectedData) : null,
|
|
112
121
|
placeholder: placeholder.value,
|
|
113
122
|
disabled: !unref(control).enabled,
|
|
114
|
-
"aria-invalid":
|
|
123
|
+
"aria-invalid": unref(showErrors) || void 0,
|
|
115
124
|
"onUpdate:modelValue": onNumber,
|
|
116
|
-
onBlur
|
|
117
|
-
}, null, 8, ["use-grouping", "mode", "currency", "min-fraction-digits", "max-fraction-digits", "model-value", "placeholder", "disabled", "aria-invalid"]),
|
|
118
|
-
showErrors
|
|
125
|
+
onBlur: unref(markDirty)
|
|
126
|
+
}, null, 8, ["class", "input-class", "use-grouping", "mode", "currency", "min-fraction-digits", "max-fraction-digits", "model-value", "placeholder", "disabled", "aria-invalid", "onBlur"]),
|
|
127
|
+
unref(showErrors) ? (openBlock(), createElementBlock("small", _hoisted_4, toDisplayString(unref(projectedErrors)), 1)) : createCommentVNode("", true)
|
|
119
128
|
]);
|
|
120
129
|
};
|
|
121
130
|
}
|
|
@@ -1 +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,
|
|
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 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 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 () => (options.value.placeholder as string) ?? control.value.description,\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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"}
|
|
@@ -18,14 +18,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
18
18
|
renderers: {
|
|
19
19
|
type: ArrayConstructor;
|
|
20
20
|
required: false;
|
|
21
|
+
default: undefined;
|
|
21
22
|
};
|
|
22
23
|
cells: {
|
|
23
24
|
type: ArrayConstructor;
|
|
24
25
|
required: false;
|
|
26
|
+
default: undefined;
|
|
25
27
|
};
|
|
26
28
|
config: {
|
|
27
29
|
type: ObjectConstructor;
|
|
28
30
|
required: false;
|
|
31
|
+
default: undefined;
|
|
29
32
|
};
|
|
30
33
|
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
31
34
|
uischema: {
|
|
@@ -47,17 +50,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
47
50
|
renderers: {
|
|
48
51
|
type: ArrayConstructor;
|
|
49
52
|
required: false;
|
|
53
|
+
default: undefined;
|
|
50
54
|
};
|
|
51
55
|
cells: {
|
|
52
56
|
type: ArrayConstructor;
|
|
53
57
|
required: false;
|
|
58
|
+
default: undefined;
|
|
54
59
|
};
|
|
55
60
|
config: {
|
|
56
61
|
type: ObjectConstructor;
|
|
57
62
|
required: false;
|
|
63
|
+
default: undefined;
|
|
58
64
|
};
|
|
59
65
|
}>> & Readonly<{}>, {
|
|
66
|
+
config: Record<string, any>;
|
|
60
67
|
enabled: boolean;
|
|
68
|
+
renderers: unknown[];
|
|
69
|
+
cells: unknown[];
|
|
61
70
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
62
71
|
export default _default;
|
|
63
72
|
//# sourceMappingURL=JfText.vue.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JfText.vue.d.ts","sourceRoot":"","sources":["../../../src/vue/primevue/JfText.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"JfText.vue.d.ts","sourceRoot":"","sources":["../../../src/vue/primevue/JfText.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmNA,wBA+WK"}
|
|
@@ -1,17 +1,20 @@
|
|
|
1
|
-
import { defineComponent, getCurrentInstance, computed, inject, ref, watch, createElementBlock, openBlock, createCommentVNode, createBlock, unref, toDisplayString } from "vue";
|
|
1
|
+
import { defineComponent, getCurrentInstance, computed, inject, ref, watch, createElementBlock, openBlock, createCommentVNode, createBlock, unref, toDisplayString, normalizeClass } from "vue";
|
|
2
2
|
import { useJsonFormsControl } from "@jsonforms/vue";
|
|
3
3
|
import { useProvider } from "../composables/useProvider.js";
|
|
4
4
|
import { useDerive } from "../composables/useDerive.js";
|
|
5
|
+
import { useDeriveInitialValue } from "../composables/useDeriveInitialValue.js";
|
|
6
|
+
import { useProjection } from "../composables/useProjection.js";
|
|
7
|
+
import { useDirtyValidation } from "../composables/useDirtyValidation.js";
|
|
5
8
|
import InputText from "primevue/inputtext";
|
|
6
9
|
import AutoComplete from "primevue/autocomplete";
|
|
7
|
-
const _hoisted_1 = { class: "
|
|
10
|
+
const _hoisted_1 = { class: "jf-control" };
|
|
8
11
|
const _hoisted_2 = {
|
|
9
12
|
key: 0,
|
|
10
|
-
class: "
|
|
13
|
+
class: "jf-label"
|
|
11
14
|
};
|
|
12
15
|
const _hoisted_3 = {
|
|
13
16
|
key: 1,
|
|
14
|
-
class: "
|
|
17
|
+
class: "jf-description"
|
|
15
18
|
};
|
|
16
19
|
const _hoisted_4 = {
|
|
17
20
|
key: 4,
|
|
@@ -43,15 +46,18 @@ const __default__ = {
|
|
|
43
46
|
},
|
|
44
47
|
renderers: {
|
|
45
48
|
type: Array,
|
|
46
|
-
required: false
|
|
49
|
+
required: false,
|
|
50
|
+
default: void 0
|
|
47
51
|
},
|
|
48
52
|
cells: {
|
|
49
53
|
type: Array,
|
|
50
|
-
required: false
|
|
54
|
+
required: false,
|
|
55
|
+
default: void 0
|
|
51
56
|
},
|
|
52
57
|
config: {
|
|
53
58
|
type: Object,
|
|
54
|
-
required: false
|
|
59
|
+
required: false,
|
|
60
|
+
default: void 0
|
|
55
61
|
}
|
|
56
62
|
}
|
|
57
63
|
};
|
|
@@ -60,7 +66,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
60
66
|
setup(__props) {
|
|
61
67
|
const instance = getCurrentInstance();
|
|
62
68
|
const props = instance.props;
|
|
63
|
-
const { control, handleChange } = useJsonFormsControl(props);
|
|
69
|
+
const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
|
|
70
|
+
const {
|
|
71
|
+
projectedData,
|
|
72
|
+
handleProjectedChange: handleChange,
|
|
73
|
+
projectedErrors,
|
|
74
|
+
projectedLabel
|
|
75
|
+
} = useProjection(control, rawHandleChange);
|
|
64
76
|
const binding = computed(() => {
|
|
65
77
|
const provider = control.value.uischema?.options?.provider;
|
|
66
78
|
if (provider && typeof provider === "object" && !provider.load) {
|
|
@@ -103,24 +115,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
103
115
|
return control.value.uischema?.options?.placeholder ?? control.value.description;
|
|
104
116
|
});
|
|
105
117
|
const isAutocomplete = computed(() => !!binding.value);
|
|
106
|
-
useDerive({ control, handleChange });
|
|
107
|
-
|
|
108
|
-
const
|
|
109
|
-
const showErrors = computed(() => hasInteracted.value && control.value.errors);
|
|
118
|
+
useDerive({ control, handleChange, data: projectedData });
|
|
119
|
+
useDeriveInitialValue({ control, handleChange });
|
|
120
|
+
const { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);
|
|
110
121
|
function onInput(val) {
|
|
111
122
|
const newValue = val && val.trim() !== "" ? val : void 0;
|
|
112
|
-
if (
|
|
123
|
+
if (projectedData.value !== newValue) {
|
|
113
124
|
handleChange(control.value.path, newValue);
|
|
114
125
|
}
|
|
115
126
|
}
|
|
116
127
|
function onBlur() {
|
|
117
|
-
|
|
118
|
-
|
|
128
|
+
markDirty();
|
|
129
|
+
const val = projectedData.value;
|
|
130
|
+
if (typeof val === "string" && val.trim() === "") {
|
|
131
|
+
handleChange(control.value.path, void 0);
|
|
119
132
|
}
|
|
120
133
|
}
|
|
121
|
-
function onFocus() {
|
|
122
|
-
hasFocused.value = true;
|
|
123
|
-
}
|
|
124
134
|
const onComplete = (event) => {
|
|
125
135
|
query.value = event.query;
|
|
126
136
|
};
|
|
@@ -130,37 +140,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
130
140
|
};
|
|
131
141
|
return (_ctx, _cache) => {
|
|
132
142
|
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
133
|
-
unref(
|
|
143
|
+
unref(projectedLabel) ? (openBlock(), createElementBlock("label", _hoisted_2, toDisplayString(unref(projectedLabel)), 1)) : createCommentVNode("", true),
|
|
134
144
|
unref(control).description ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(unref(control).description), 1)) : createCommentVNode("", true),
|
|
135
145
|
isAutocomplete.value ? (openBlock(), createBlock(unref(AutoComplete), {
|
|
136
146
|
key: 2,
|
|
137
|
-
class: "w-full!",
|
|
138
|
-
"model-value": unref(
|
|
147
|
+
class: normalizeClass(["w-full!", { "p-invalid": unref(showErrors) }]),
|
|
148
|
+
"model-value": unref(projectedData) ?? "",
|
|
139
149
|
suggestions: unref(items),
|
|
140
150
|
"option-label": "label",
|
|
141
151
|
placeholder: placeholder.value,
|
|
142
152
|
disabled: !unref(control).enabled,
|
|
143
|
-
"aria-invalid":
|
|
153
|
+
"aria-invalid": unref(showErrors) || void 0,
|
|
144
154
|
onComplete,
|
|
145
155
|
onItemSelect: onSelect,
|
|
146
156
|
"onUpdate:modelValue": onInput,
|
|
147
|
-
onBlur
|
|
148
|
-
|
|
149
|
-
}, null, 8, ["model-value", "suggestions", "placeholder", "disabled", "aria-invalid"])) : (openBlock(), createBlock(unref(InputText), {
|
|
157
|
+
onBlur
|
|
158
|
+
}, null, 8, ["class", "model-value", "suggestions", "placeholder", "disabled", "aria-invalid"])) : (openBlock(), createBlock(unref(InputText), {
|
|
150
159
|
key: 3,
|
|
151
|
-
class: "w-full!",
|
|
152
|
-
"model-value": unref(
|
|
160
|
+
class: normalizeClass(["w-full!", { "p-invalid": unref(showErrors) }]),
|
|
161
|
+
"model-value": unref(projectedData) ?? "",
|
|
153
162
|
disabled: !unref(control).enabled,
|
|
154
|
-
"aria-invalid":
|
|
163
|
+
"aria-invalid": unref(showErrors) || void 0,
|
|
155
164
|
placeholder: placeholder.value,
|
|
156
165
|
autocapitalize: "off",
|
|
157
166
|
autocomplete: "off",
|
|
158
167
|
spellcheck: "false",
|
|
159
168
|
"onUpdate:modelValue": onInput,
|
|
160
|
-
onBlur
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
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)
|
|
169
|
+
onBlur
|
|
170
|
+
}, null, 8, ["class", "model-value", "disabled", "aria-invalid", "placeholder"])),
|
|
171
|
+
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)
|
|
164
172
|
]);
|
|
165
173
|
};
|
|
166
174
|
}
|
|
@@ -1 +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//
|
|
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 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 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.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, 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;;;;AAgBA,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,UAAU;AAAA,IAAA,CAC5B;AAED,UAAM,OAAO,MAAM;AACjB,UAAI,QAAQ,OAAO,SAAS,QAAS,QAAA;AAAA,IACvC,CAAC;AAED,UAAM,cAAc,SAA6B,MAAM;AACrD,UAAI,QAAQ,MAAO,QAAO;AAC1B,aACG,QAAQ,MAAM,UAAqD,SAChE,eAAe,QAAQ,MAAM;AAAA,IAErC,CAAC;AAED,UAAM,iBAAiB,SAAS,MAAM,CAAC,CAAC,QAAQ,KAAK;AAGrD,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;;;;;"}
|
|
@@ -18,14 +18,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
18
18
|
renderers: {
|
|
19
19
|
type: ArrayConstructor;
|
|
20
20
|
required: false;
|
|
21
|
+
default: undefined;
|
|
21
22
|
};
|
|
22
23
|
cells: {
|
|
23
24
|
type: ArrayConstructor;
|
|
24
25
|
required: false;
|
|
26
|
+
default: undefined;
|
|
25
27
|
};
|
|
26
28
|
config: {
|
|
27
29
|
type: ObjectConstructor;
|
|
28
30
|
required: false;
|
|
31
|
+
default: undefined;
|
|
29
32
|
};
|
|
30
33
|
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
31
34
|
uischema: {
|
|
@@ -47,17 +50,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
47
50
|
renderers: {
|
|
48
51
|
type: ArrayConstructor;
|
|
49
52
|
required: false;
|
|
53
|
+
default: undefined;
|
|
50
54
|
};
|
|
51
55
|
cells: {
|
|
52
56
|
type: ArrayConstructor;
|
|
53
57
|
required: false;
|
|
58
|
+
default: undefined;
|
|
54
59
|
};
|
|
55
60
|
config: {
|
|
56
61
|
type: ObjectConstructor;
|
|
57
62
|
required: false;
|
|
63
|
+
default: undefined;
|
|
58
64
|
};
|
|
59
65
|
}>> & Readonly<{}>, {
|
|
66
|
+
config: Record<string, any>;
|
|
60
67
|
enabled: boolean;
|
|
68
|
+
renderers: unknown[];
|
|
69
|
+
cells: unknown[];
|
|
61
70
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
62
71
|
export default _default;
|
|
63
72
|
//# sourceMappingURL=JfTextArea.vue.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"JfTextArea.vue.d.ts","sourceRoot":"","sources":["../../../src/vue/primevue/JfTextArea.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"JfTextArea.vue.d.ts","sourceRoot":"","sources":["../../../src/vue/primevue/JfTextArea.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHA,wBA4NK"}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
import { defineComponent, getCurrentInstance, computed,
|
|
1
|
+
import { defineComponent, getCurrentInstance, computed, createElementBlock, openBlock, createCommentVNode, createVNode, unref, toDisplayString, normalizeClass } from "vue";
|
|
2
2
|
import { useJsonFormsControl } from "@jsonforms/vue";
|
|
3
|
+
import { useProjection } from "../composables/useProjection.js";
|
|
4
|
+
import { useDirtyValidation } from "../composables/useDirtyValidation.js";
|
|
3
5
|
import Textarea from "primevue/textarea";
|
|
4
|
-
const _hoisted_1 = { class: "
|
|
6
|
+
const _hoisted_1 = { class: "jf-control" };
|
|
5
7
|
const _hoisted_2 = {
|
|
6
8
|
key: 0,
|
|
7
|
-
class: "
|
|
9
|
+
class: "jf-label"
|
|
8
10
|
};
|
|
9
11
|
const _hoisted_3 = {
|
|
10
12
|
key: 1,
|
|
11
|
-
class: "
|
|
13
|
+
class: "jf-description"
|
|
12
14
|
};
|
|
13
15
|
const _hoisted_4 = {
|
|
14
16
|
key: 2,
|
|
@@ -35,15 +37,18 @@ const __default__ = {
|
|
|
35
37
|
},
|
|
36
38
|
renderers: {
|
|
37
39
|
type: Array,
|
|
38
|
-
required: false
|
|
40
|
+
required: false,
|
|
41
|
+
default: void 0
|
|
39
42
|
},
|
|
40
43
|
cells: {
|
|
41
44
|
type: Array,
|
|
42
|
-
required: false
|
|
45
|
+
required: false,
|
|
46
|
+
default: void 0
|
|
43
47
|
},
|
|
44
48
|
config: {
|
|
45
49
|
type: Object,
|
|
46
|
-
required: false
|
|
50
|
+
required: false,
|
|
51
|
+
default: void 0
|
|
47
52
|
}
|
|
48
53
|
}
|
|
49
54
|
};
|
|
@@ -52,37 +57,46 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
52
57
|
setup(__props) {
|
|
53
58
|
const instance = getCurrentInstance();
|
|
54
59
|
const props = instance.props;
|
|
55
|
-
const { control, handleChange } = useJsonFormsControl(props);
|
|
60
|
+
const { control, handleChange: rawHandleChange } = useJsonFormsControl(props);
|
|
61
|
+
const {
|
|
62
|
+
projectedData,
|
|
63
|
+
handleProjectedChange: handleChange,
|
|
64
|
+
projectedErrors,
|
|
65
|
+
projectedLabel
|
|
66
|
+
} = useProjection(control, rawHandleChange);
|
|
56
67
|
const placeholder = computed(
|
|
57
68
|
() => control.value.uischema?.options?.placeholder ?? control.value.description
|
|
58
69
|
);
|
|
59
|
-
const
|
|
60
|
-
const showErrors = computed(() => hasInteracted.value && control.value.errors);
|
|
70
|
+
const { showErrors, markDirty } = useDirtyValidation(control, projectedErrors);
|
|
61
71
|
function onInput(val) {
|
|
62
72
|
const newValue = val && val.trim() !== "" ? val : void 0;
|
|
63
|
-
if (
|
|
73
|
+
if (projectedData.value !== newValue) {
|
|
64
74
|
handleChange(control.value.path, newValue);
|
|
65
75
|
}
|
|
66
76
|
}
|
|
67
77
|
function onBlur() {
|
|
68
|
-
|
|
78
|
+
markDirty();
|
|
79
|
+
const val = projectedData.value;
|
|
80
|
+
if (typeof val === "string" && val.trim() === "") {
|
|
81
|
+
handleChange(control.value.path, void 0);
|
|
82
|
+
}
|
|
69
83
|
}
|
|
70
84
|
return (_ctx, _cache) => {
|
|
71
85
|
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
72
|
-
unref(
|
|
86
|
+
unref(projectedLabel) ? (openBlock(), createElementBlock("label", _hoisted_2, toDisplayString(unref(projectedLabel)), 1)) : createCommentVNode("", true),
|
|
73
87
|
unref(control).description ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(unref(control).description), 1)) : createCommentVNode("", true),
|
|
74
88
|
createVNode(unref(Textarea), {
|
|
75
|
-
class: "w-full!",
|
|
76
|
-
"model-value": unref(
|
|
89
|
+
class: normalizeClass(["w-full!", { "p-invalid": unref(showErrors) }]),
|
|
90
|
+
"model-value": unref(projectedData) ?? "",
|
|
77
91
|
disabled: !unref(control).enabled,
|
|
78
|
-
"aria-invalid":
|
|
92
|
+
"aria-invalid": unref(showErrors) || void 0,
|
|
79
93
|
placeholder: placeholder.value,
|
|
80
94
|
rows: 4,
|
|
81
95
|
"auto-resize": true,
|
|
82
96
|
"onUpdate:modelValue": onInput,
|
|
83
97
|
onBlur
|
|
84
|
-
}, null, 8, ["model-value", "disabled", "aria-invalid", "placeholder"]),
|
|
85
|
-
showErrors
|
|
98
|
+
}, null, 8, ["class", "model-value", "disabled", "aria-invalid", "placeholder"]),
|
|
99
|
+
unref(showErrors) ? (openBlock(), createElementBlock("small", _hoisted_4, toDisplayString(unref(projectedErrors)), 1)) : createCommentVNode("", true)
|
|
86
100
|
]);
|
|
87
101
|
};
|
|
88
102
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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,
|
|
1
|
+
{"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 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 { useProjection } from \"../composables/useProjection\";\nimport { useDirtyValidation } from \"../composables/useDirtyValidation\";\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: rawHandleChange } = useJsonFormsControl(props);\nconst {\n projectedData,\n handleProjectedChange: handleChange,\n projectedErrors,\n projectedLabel,\n} = useProjection(control, rawHandleChange);\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 — 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</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 <Textarea\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 :rows=\"4\"\n :auto-resize=\"true\"\n @update:model-value=\"onInput\"\n @blur=\"onBlur\"\n />\n <small v-if=\"showErrors\" class=\"p-error\">{{ projectedErrors }}</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,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;;;;AAYA,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;AAE1C,UAAM,cAAc;AAAA,MAClB,MACG,QAAQ,MAAM,UAAqD,SAChE,eAAe,QAAQ,MAAM;AAAA,IAAA;AAIrC,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;;AAIE,aAAAA,UAAA,GAAAC,mBAiBM,OAjBN,YAiBM;AAAA,QAhBSC,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;QAExBE,YAUEF,MAAA,QAAA,GAAA;AAAA,UATC,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,UACb,MAAM;AAAA,UACN,eAAa;AAAA,UACb,uBAAoB;AAAA,UACpB;AAAA,QAAA;QAEUA,MAAA,UAAA,kBAAbD,mBAAsE,SAAtE,YAAsEE,gBAA1BD,MAAA,eAAA,CAAe,GAAA,CAAA;;;;;"}
|
|
@@ -1 +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;
|
|
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;AA6DxC,eAAO,MAAM,iBAAiB,EAAE,OAAO,EAAO,CAAC;AAK/C,wBAAgB,yBAAyB,CAAC,aAAa,EAAE,GAAG,GAAG,OAAO,EAAE,CAoKvE;AAED,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC"}
|