jsonforms-nuxt-ui-renderers 0.2.2 → 0.2.4

package/dist/index.js

@@ -29,6 +29,7 @@ import { DispatchRenderer, rendererProps, useJsonFormsArrayControl } from "@json
 import { computed as computed2, defineComponent, h as h2, resolveComponent } from "vue";
 
 // src/renderers/util.ts
+import { hasEnableRule } from "@jsonforms/core";
 import { h } from "vue";
 import { computed } from "vue";
 function getDocsPathFromSchema(schema) {
@@ -69,6 +70,37 @@ function controlDescription(control) {
   const sd = control.schema?.description;
   return typeof sd === "string" && sd.trim() ? sd.trim() : void 0;
 }
+function isSchemaReadOnly(schema) {
+  if (!schema || typeof schema !== "object" || Array.isArray(schema)) return false;
+  return schema.readOnly === true;
+}
+function controlTextInputAttrs(control, jsonforms) {
+  const schemaRO = isSchemaReadOnly(control.schema);
+  if (!schemaRO) {
+    return { readonly: false, disabled: !control.enabled };
+  }
+  if (jsonforms?.readonly === true) {
+    return { readonly: false, disabled: !control.enabled };
+  }
+  const ui = control.uischema;
+  if (typeof ui?.options?.readonly === "boolean" && ui.options.readonly) {
+    return { readonly: false, disabled: !control.enabled };
+  }
+  if (typeof ui?.options?.readOnly === "boolean" && ui.options.readOnly) {
+    return { readonly: false, disabled: !control.enabled };
+  }
+  const cfg = control.config;
+  if (typeof cfg?.readonly === "boolean" && cfg.readonly) {
+    return { readonly: false, disabled: !control.enabled };
+  }
+  if (typeof cfg?.readOnly === "boolean" && cfg.readOnly) {
+    return { readonly: false, disabled: !control.enabled };
+  }
+  if (ui && hasEnableRule(ui) && !control.enabled) {
+    return { readonly: false, disabled: true };
+  }
+  return { readonly: true, disabled: false };
+}
 
 // src/renderers/complex/NuxtUiArrayListRenderer.ts
 function createNuxtUiArrayListRenderer(theme) {
@@ -444,7 +476,7 @@ var NuxtUiEnumControl = defineComponent4({
 
 // src/renderers/controls/NuxtUiIntegerControl.ts
 import { rendererProps as rendererProps5, useJsonFormsControl as useJsonFormsControl3 } from "@jsonforms/vue";
-import { computed as computed6, defineComponent as defineComponent5, h as h6, resolveComponent as resolveComponent4 } from "vue";
+import { computed as computed6, defineComponent as defineComponent5, h as h6, inject, resolveComponent as resolveComponent4 } from "vue";
 var NuxtUiIntegerControl = defineComponent5({
   name: "NuxtUiIntegerControl",
   props: rendererProps5(),
@@ -452,13 +484,14 @@ var NuxtUiIntegerControl = defineComponent5({
     const { control, handleChange } = useJsonFormsControl3(
       props
     );
+    const jsonforms = inject("jsonforms");
     const errorMessage = computed6(() => trimmedOrUndefined(control.value.errors));
     const modelValue = computed6(() => {
       const v = control.value.data;
       return v === null || v === void 0 ? "" : String(v);
     });
-    function onUpdate(raw) {
-      const trimmed = String(raw ?? "").trim();
+    function applyRawString(raw) {
+      const trimmed = raw.trim();
       if (trimmed === "") {
         handleChange(control.value.path, void 0);
         return;
@@ -469,7 +502,7 @@ var NuxtUiIntegerControl = defineComponent5({
     return () => {
       if (!control.value.visible) return null;
       const UFormField = resolveComponent4("UFormField");
-      const UInput = resolveComponent4("UInput");
+      const { readonly, disabled } = controlTextInputAttrs(control.value, jsonforms);
       return h6(
         "div",
         {},
@@ -482,15 +515,21 @@ var NuxtUiIntegerControl = defineComponent5({
             error: errorMessage.value
           },
           {
-            default: () => h6(UInput, {
+            default: () => h6("input", {
               type: "number",
               inputmode: "numeric",
               step: "1",
-              modelValue: modelValue.value,
-              disabled: !control.value.enabled,
-              color: errorMessage.value ? "error" : void 0,
+              class: [
+                "jf-input-native",
+                errorMessage.value ? "jf-input-native--error" : ""
+              ].filter(Boolean).join(" "),
+              value: modelValue.value,
+              readonly,
+              disabled,
               "aria-invalid": Boolean(errorMessage.value),
-              "onUpdate:modelValue": onUpdate
+              onInput: (e) => {
+                applyRawString(e.target.value);
+              }
             })
           }
         )
@@ -581,7 +620,7 @@ var NuxtUiMultiEnumControl = defineComponent6({
 
 // src/renderers/controls/NuxtUiNumberControl.ts
 import { rendererProps as rendererProps7, useJsonFormsControl as useJsonFormsControl5 } from "@jsonforms/vue";
-import { computed as computed8, defineComponent as defineComponent7, h as h8, resolveComponent as resolveComponent6 } from "vue";
+import { computed as computed8, defineComponent as defineComponent7, h as h8, inject as inject2, resolveComponent as resolveComponent6 } from "vue";
 var NuxtUiNumberControl = defineComponent7({
   name: "NuxtUiNumberControl",
   props: rendererProps7(),
@@ -589,13 +628,14 @@ var NuxtUiNumberControl = defineComponent7({
     const { control, handleChange } = useJsonFormsControl5(
       props
     );
+    const jsonforms = inject2("jsonforms");
     const errorMessage = computed8(() => trimmedOrUndefined(control.value.errors));
     const modelValue = computed8(() => {
       const v = control.value.data;
       return v === null || v === void 0 ? "" : String(v);
     });
-    function onUpdate(raw) {
-      const trimmed = String(raw ?? "").trim();
+    function applyRawString(raw) {
+      const trimmed = raw.trim();
       if (trimmed === "") {
         handleChange(control.value.path, void 0);
         return;
@@ -606,7 +646,7 @@ var NuxtUiNumberControl = defineComponent7({
     return () => {
       if (!control.value.visible) return null;
       const UFormField = resolveComponent6("UFormField");
-      const UInput = resolveComponent6("UInput");
+      const { readonly, disabled } = controlTextInputAttrs(control.value, jsonforms);
       return h8(
         "div",
         {},
@@ -619,14 +659,20 @@ var NuxtUiNumberControl = defineComponent7({
             error: errorMessage.value
           },
           {
-            default: () => h8(UInput, {
+            default: () => h8("input", {
               type: "number",
               inputmode: "decimal",
-              modelValue: modelValue.value,
-              disabled: !control.value.enabled,
-              color: errorMessage.value ? "error" : void 0,
+              class: [
+                "jf-input-native",
+                errorMessage.value ? "jf-input-native--error" : ""
+              ].filter(Boolean).join(" "),
+              value: modelValue.value,
+              readonly,
+              disabled,
               "aria-invalid": Boolean(errorMessage.value),
-              "onUpdate:modelValue": onUpdate
+              onInput: (e) => {
+                applyRawString(e.target.value);
+              }
             })
           }
         )
@@ -637,7 +683,7 @@ var NuxtUiNumberControl = defineComponent7({
 
 // src/renderers/controls/NuxtUiPasswordControl.ts
 import { rendererProps as rendererProps8, useJsonFormsControl as useJsonFormsControl6 } from "@jsonforms/vue";
-import { computed as computed9, defineComponent as defineComponent8, h as h9, ref, resolveComponent as resolveComponent7 } from "vue";
+import { computed as computed9, defineComponent as defineComponent8, h as h9, inject as inject3, ref, resolveComponent as resolveComponent7 } from "vue";
 var NuxtUiPasswordControl = defineComponent8({
   name: "NuxtUiPasswordControl",
   props: rendererProps8(),
@@ -645,6 +691,7 @@ var NuxtUiPasswordControl = defineComponent8({
     const { control, handleChange } = useJsonFormsControl6(
       props
     );
+    const jsonforms = inject3("jsonforms");
     const errorMessage = computed9(() => trimmedOrUndefined(control.value.errors));
     const showPassword = ref(false);
     const inputType = computed9(() => showPassword.value ? "text" : "password");
@@ -653,6 +700,7 @@ var NuxtUiPasswordControl = defineComponent8({
       const UFormField = resolveComponent7("UFormField");
       const UInput = resolveComponent7("UInput");
       const UButton = resolveComponent7("UButton");
+      const { readonly, disabled } = controlTextInputAttrs(control.value, jsonforms);
       return h9(
         "div",
         {},
@@ -672,7 +720,8 @@ var NuxtUiPasswordControl = defineComponent8({
                 class: "w-full",
                 type: inputType.value,
                 autocomplete: "current-password",
-                disabled: !control.value.enabled,
+                readonly,
+                disabled,
                 color: errorMessage.value ? "error" : void 0,
                 "aria-invalid": Boolean(errorMessage.value),
                 "onUpdate:modelValue": (v) => handleChange(control.value.path, v)
@@ -686,7 +735,7 @@ var NuxtUiPasswordControl = defineComponent8({
                   icon: showPassword.value ? "i-heroicons-eye-slash" : "i-heroicons-eye",
                   "aria-pressed": showPassword.value,
                   "aria-label": showPassword.value ? "Hide password" : "Show password",
-                  disabled: !control.value.enabled,
+                  disabled,
                   onClick: () => {
                     showPassword.value = !showPassword.value;
                   }
@@ -706,6 +755,7 @@ import {
   computed as computed10,
   defineComponent as defineComponent9,
   h as h10,
+  inject as inject4,
   resolveComponent as resolveComponent8
 } from "vue";
 function createNuxtUiStringControl(docsUrl) {
@@ -716,6 +766,7 @@ function createNuxtUiStringControl(docsUrl) {
       const { control, handleChange } = useJsonFormsControl7(
         props
       );
+      const jsonforms = inject4("jsonforms");
       const errorMessage = computed10(
         () => trimmedOrUndefined(control.value.errors)
       );
@@ -723,11 +774,16 @@ function createNuxtUiStringControl(docsUrl) {
         if (!control.value.visible) return null;
         const UFormField = resolveComponent8("UFormField");
         const UInput = resolveComponent8("UInput");
+        const { readonly, disabled } = controlTextInputAttrs(
+          control.value,
+          jsonforms
+        );
         const slots = {
           default: () => h10(UInput, {
             modelValue: control.value.data ?? "",
             class: "w-full",
-            disabled: !control.value.enabled,
+            readonly,
+            disabled,
             color: errorMessage.value ? "error" : void 0,
             "aria-invalid": Boolean(errorMessage.value),
             "onUpdate:modelValue": (v) => handleChange(control.value.path, v)
@@ -757,7 +813,7 @@ function createNuxtUiStringControl(docsUrl) {
 
 // src/renderers/controls/NuxtUiTextareaControl.ts
 import { rendererProps as rendererProps10, useJsonFormsControl as useJsonFormsControl8 } from "@jsonforms/vue";
-import { computed as computed11, defineComponent as defineComponent10, h as h11, resolveComponent as resolveComponent9 } from "vue";
+import { computed as computed11, defineComponent as defineComponent10, h as h11, inject as inject5, resolveComponent as resolveComponent9 } from "vue";
 var NuxtUiTextareaControl = defineComponent10({
   name: "NuxtUiTextareaControl",
   props: rendererProps10(),
@@ -765,11 +821,13 @@ var NuxtUiTextareaControl = defineComponent10({
     const { control, handleChange } = useJsonFormsControl8(
       props
     );
+    const jsonforms = inject5("jsonforms");
     const errorMessage = computed11(() => trimmedOrUndefined(control.value.errors));
     return () => {
       if (!control.value.visible) return null;
       const UFormField = resolveComponent9("UFormField");
       const UTextarea = resolveComponent9("UTextarea");
+      const { readonly, disabled } = controlTextInputAttrs(control.value, jsonforms);
       return h11(
         "div",
         {},
@@ -785,7 +843,8 @@ var NuxtUiTextareaControl = defineComponent10({
             default: () => h11(UTextarea, {
               modelValue: control.value.data ?? "",
               class: "w-full",
-              disabled: !control.value.enabled,
+              readonly,
+              disabled,
               color: errorMessage.value ? "error" : void 0,
               "aria-invalid": Boolean(errorMessage.value),
               rows: 5,