jsonforms-nuxt-ui-renderers 0.2.2 → 0.2.4

package/README.md

@@ -40,8 +40,8 @@ This package is intentionally small and opinionated: it ships a **single** rende
 - **String**: JSON Schema `type: "string"` → `UInput`
 - **Multiline string**: JSONForms “multiline” control (e.g. `uischema.options.multi: true`) → `UTextarea`
 - **Password**: JSON Schema `type: "string"` + `format: "password"` → `UInput type="password"` with show/hide toggle button
-- **Number**: JSON Schema `type: "number"` → `UInput type="number"` (parses to `number`, empty becomes `undefined`)
-- **Integer**: JSON Schema `type: "integer"` → `UInput type="number" step="1"` (parses to `integer`, empty becomes `undefined`)
+- **Number**: JSON Schema `type: "number"` → **native** `<input type="number">` inside `UFormField` (parses to `number`, empty becomes `undefined`). Native inputs are used so each `input` event updates JsonForms core immediately; `UInput` alone could leave parent `:data` stale in some form-field setups.
+- **Integer**: JSON Schema `type: "integer"` → **native** `<input type="number" inputmode="numeric" step="1">` (parses to `integer`, empty becomes `undefined`). Same rationale as number.
 - **Boolean**: JSON Schema `type: "boolean"` → `USwitch`
 - **Enum (single-select)**: JSON Schema `enum: [...]` (or `oneOf: [{ const, title? }, ...]`) → `USelectMenu`
 - **Enum (multi-select)**: JSON Schema `type: "array"` with `items` being an enum schema (supports `$ref`’d `items`) → `USelectMenu multiple`

package/dist/index.cjs

@@ -30,15 +30,16 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/nuxtUiRenderers.ts
-var import_core3 = require("@jsonforms/core");
+var import_core4 = require("@jsonforms/core");
 var import_vue35 = require("vue");
 
 // src/renderers/complex/NuxtUiArrayListRenderer.ts
-var import_core = require("@jsonforms/core");
+var import_core2 = require("@jsonforms/core");
 var import_vue3 = require("@jsonforms/vue");
 var import_vue4 = require("vue");
 
 // src/renderers/util.ts
+var import_core = require("@jsonforms/core");
 var import_vue = require("vue");
 var import_vue2 = require("vue");
 function getDocsPathFromSchema(schema) {
@@ -79,6 +80,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 && (0, import_core.hasEnableRule)(ui) && !control.enabled) {
+    return { readonly: false, disabled: true };
+  }
+  return { readonly: true, disabled: false };
+}
 
 // src/renderers/complex/NuxtUiArrayListRenderer.ts
 function createNuxtUiArrayListRenderer(theme) {
@@ -96,7 +128,7 @@ function createNuxtUiArrayListRenderer(theme) {
       );
       const arraySchema = (0, import_vue4.computed)(() => {
         try {
-          return import_core.Resolve.schema(
+          return import_core2.Resolve.schema(
             props.schema,
             control.value.uischema.scope,
             control.value.rootSchema
@@ -114,7 +146,7 @@ function createNuxtUiArrayListRenderer(theme) {
         return typeof min === "number" ? items.value.length <= min : false;
       });
       const childUiSchema = (0, import_vue4.computed)(
-        () => (0, import_core.findUISchema)(
+        () => (0, import_core2.findUISchema)(
           control.value.uischemas,
           control.value.schema,
           control.value.uischema.scope,
@@ -125,11 +157,11 @@ function createNuxtUiArrayListRenderer(theme) {
         )
       );
       function childLabelForIndex(index) {
-        const childLabelProp = getChildLabelPropFromUiSchemaOptions(control.value.uischema.options) ?? (0, import_core.getFirstPrimitiveProp)(control.value.schema);
+        const childLabelProp = getChildLabelPropFromUiSchemaOptions(control.value.uischema.options) ?? (0, import_core2.getFirstPrimitiveProp)(control.value.schema);
         if (!childLabelProp) return `${index}`;
-        const labelValue = import_core.Resolve.data(
+        const labelValue = import_core2.Resolve.data(
           control.value.data,
-          (0, import_core.composePaths)(`${index}`, childLabelProp)
+          (0, import_core2.composePaths)(`${index}`, childLabelProp)
         );
         if (labelValue === void 0 || labelValue === null || Number.isNaN(labelValue)) {
           return "";
@@ -144,7 +176,7 @@ function createNuxtUiArrayListRenderer(theme) {
       function addButtonClick() {
         addItem(
           control.value.path,
-          (0, import_core.createDefaultValue)(control.value.schema, control.value.rootSchema)
+          (0, import_core2.createDefaultValue)(control.value.schema, control.value.rootSchema)
         )();
       }
       return () => {
@@ -255,7 +287,7 @@ function createNuxtUiArrayListRenderer(theme) {
                       (0, import_vue4.h)(import_vue3.DispatchRenderer, {
                         schema: control.value.schema,
                         uischema: childUiSchema.value,
-                        path: (0, import_core.composePaths)(control.value.path, `${index}`),
+                        path: (0, import_core2.composePaths)(control.value.path, `${index}`),
                         enabled: control.value.enabled,
                         renderers: control.value.renderers,
                         cells: control.value.cells
@@ -273,7 +305,7 @@ function createNuxtUiArrayListRenderer(theme) {
 }
 
 // src/renderers/complex/NuxtUiObjectRenderer.ts
-var import_core2 = require("@jsonforms/core");
+var import_core3 = require("@jsonforms/core");
 var import_vue5 = require("@jsonforms/vue");
 var import_vue6 = require("vue");
 var NuxtUiObjectRenderer = (0, import_vue6.defineComponent)({
@@ -286,7 +318,7 @@ var NuxtUiObjectRenderer = (0, import_vue6.defineComponent)({
     );
     const detailUiSchema = (0, import_vue6.computed)(() => {
       const uiSchemaGenerator = () => {
-        const uiSchema = import_core2.Generate.uiSchema(
+        const uiSchema = import_core3.Generate.uiSchema(
           control.value.schema,
           "Group",
           void 0,
@@ -300,7 +332,7 @@ var NuxtUiObjectRenderer = (0, import_vue6.defineComponent)({
         }
         return uiSchema;
       };
-      return (0, import_core2.findUISchema)(
+      return (0, import_core3.findUISchema)(
         control.value.uischemas,
         control.value.schema,
         control.value.uischema.scope,
@@ -458,13 +490,14 @@ var NuxtUiIntegerControl = (0, import_vue12.defineComponent)({
     const { control, handleChange } = (0, import_vue11.useJsonFormsControl)(
       props
     );
+    const jsonforms = (0, import_vue12.inject)("jsonforms");
     const errorMessage = (0, import_vue12.computed)(() => trimmedOrUndefined(control.value.errors));
     const modelValue = (0, import_vue12.computed)(() => {
       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;
@@ -475,7 +508,7 @@ var NuxtUiIntegerControl = (0, import_vue12.defineComponent)({
     return () => {
       if (!control.value.visible) return null;
       const UFormField = (0, import_vue12.resolveComponent)("UFormField");
-      const UInput = (0, import_vue12.resolveComponent)("UInput");
+      const { readonly, disabled } = controlTextInputAttrs(control.value, jsonforms);
       return (0, import_vue12.h)(
         "div",
         {},
@@ -488,15 +521,21 @@ var NuxtUiIntegerControl = (0, import_vue12.defineComponent)({
             error: errorMessage.value
           },
           {
-            default: () => (0, import_vue12.h)(UInput, {
+            default: () => (0, import_vue12.h)("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);
+              }
             })
           }
         )
@@ -595,13 +634,14 @@ var NuxtUiNumberControl = (0, import_vue16.defineComponent)({
     const { control, handleChange } = (0, import_vue15.useJsonFormsControl)(
       props
     );
+    const jsonforms = (0, import_vue16.inject)("jsonforms");
     const errorMessage = (0, import_vue16.computed)(() => trimmedOrUndefined(control.value.errors));
     const modelValue = (0, import_vue16.computed)(() => {
       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;
@@ -612,7 +652,7 @@ var NuxtUiNumberControl = (0, import_vue16.defineComponent)({
     return () => {
       if (!control.value.visible) return null;
       const UFormField = (0, import_vue16.resolveComponent)("UFormField");
-      const UInput = (0, import_vue16.resolveComponent)("UInput");
+      const { readonly, disabled } = controlTextInputAttrs(control.value, jsonforms);
       return (0, import_vue16.h)(
         "div",
         {},
@@ -625,14 +665,20 @@ var NuxtUiNumberControl = (0, import_vue16.defineComponent)({
             error: errorMessage.value
           },
           {
-            default: () => (0, import_vue16.h)(UInput, {
+            default: () => (0, import_vue16.h)("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);
+              }
             })
           }
         )
@@ -651,6 +697,7 @@ var NuxtUiPasswordControl = (0, import_vue18.defineComponent)({
     const { control, handleChange } = (0, import_vue17.useJsonFormsControl)(
       props
     );
+    const jsonforms = (0, import_vue18.inject)("jsonforms");
     const errorMessage = (0, import_vue18.computed)(() => trimmedOrUndefined(control.value.errors));
     const showPassword = (0, import_vue18.ref)(false);
     const inputType = (0, import_vue18.computed)(() => showPassword.value ? "text" : "password");
@@ -659,6 +706,7 @@ var NuxtUiPasswordControl = (0, import_vue18.defineComponent)({
       const UFormField = (0, import_vue18.resolveComponent)("UFormField");
       const UInput = (0, import_vue18.resolveComponent)("UInput");
       const UButton = (0, import_vue18.resolveComponent)("UButton");
+      const { readonly, disabled } = controlTextInputAttrs(control.value, jsonforms);
       return (0, import_vue18.h)(
         "div",
         {},
@@ -678,7 +726,8 @@ var NuxtUiPasswordControl = (0, import_vue18.defineComponent)({
                 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)
@@ -692,7 +741,7 @@ var NuxtUiPasswordControl = (0, import_vue18.defineComponent)({
                   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;
                   }
@@ -717,6 +766,7 @@ function createNuxtUiStringControl(docsUrl) {
       const { control, handleChange } = (0, import_vue19.useJsonFormsControl)(
         props
       );
+      const jsonforms = (0, import_vue20.inject)("jsonforms");
       const errorMessage = (0, import_vue20.computed)(
         () => trimmedOrUndefined(control.value.errors)
       );
@@ -724,11 +774,16 @@ function createNuxtUiStringControl(docsUrl) {
         if (!control.value.visible) return null;
         const UFormField = (0, import_vue20.resolveComponent)("UFormField");
         const UInput = (0, import_vue20.resolveComponent)("UInput");
+        const { readonly, disabled } = controlTextInputAttrs(
+          control.value,
+          jsonforms
+        );
         const slots = {
           default: () => (0, import_vue20.h)(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)
@@ -766,11 +821,13 @@ var NuxtUiTextareaControl = (0, import_vue22.defineComponent)({
     const { control, handleChange } = (0, import_vue21.useJsonFormsControl)(
       props
     );
+    const jsonforms = (0, import_vue22.inject)("jsonforms");
     const errorMessage = (0, import_vue22.computed)(() => trimmedOrUndefined(control.value.errors));
     return () => {
       if (!control.value.visible) return null;
       const UFormField = (0, import_vue22.resolveComponent)("UFormField");
       const UTextarea = (0, import_vue22.resolveComponent)("UTextarea");
+      const { readonly, disabled } = controlTextInputAttrs(control.value, jsonforms);
       return (0, import_vue22.h)(
         "div",
         {},
@@ -786,7 +843,8 @@ var NuxtUiTextareaControl = (0, import_vue22.defineComponent)({
             default: () => (0, import_vue22.h)(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,
@@ -1069,7 +1127,7 @@ var RANK = 10;
 var ENUM_RANK = RANK + 1;
 var PASSWORD_RANK = ENUM_RANK + 1;
 var isMultiEnumControl = (uischema, schema, context) => {
-  if (!(0, import_core3.uiTypeIs)("Control")(uischema, schema, context)) {
+  if (!(0, import_core4.uiTypeIs)("Control")(uischema, schema, context)) {
     return false;
   }
   const scope = uischema?.scope;
@@ -1077,7 +1135,7 @@ var isMultiEnumControl = (uischema, schema, context) => {
   const rootSchema = context?.rootSchema ?? schema;
   let resolved;
   try {
-    resolved = import_core3.Resolve.schema(schema, scope, rootSchema);
+    resolved = import_core4.Resolve.schema(schema, scope, rootSchema);
   } catch {
     return false;
   }
@@ -1086,11 +1144,11 @@ var isMultiEnumControl = (uischema, schema, context) => {
   if (!items) return false;
   if (Array.isArray(items)) return false;
   if (typeof items !== "object" || items === null) return false;
-  const resolvedItems = "$ref" in items && typeof items.$ref === "string" ? import_core3.Resolve.schema(rootSchema, items.$ref, rootSchema) : items;
-  return (0, import_core3.isEnumSchema)(resolvedItems);
+  const resolvedItems = "$ref" in items && typeof items.$ref === "string" ? import_core4.Resolve.schema(rootSchema, items.$ref, rootSchema) : items;
+  return (0, import_core4.isEnumSchema)(resolvedItems);
 };
 var isOneOfEnumControl = (uischema, schema, context) => {
-  if (!(0, import_core3.uiTypeIs)("Control")(uischema, schema, context)) {
+  if (!(0, import_core4.uiTypeIs)("Control")(uischema, schema, context)) {
     return false;
   }
   const scope = uischema?.scope;
@@ -1098,7 +1156,7 @@ var isOneOfEnumControl = (uischema, schema, context) => {
   const rootSchema = context?.rootSchema ?? schema;
   let resolved;
   try {
-    resolved = import_core3.Resolve.schema(schema, scope, rootSchema);
+    resolved = import_core4.Resolve.schema(schema, scope, rootSchema);
   } catch {
     return false;
   }
@@ -1116,77 +1174,77 @@ function createNuxtUiRenderers(options) {
   return [
     // Layouts
     {
-      tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("VerticalLayout")),
+      tester: (0, import_core4.rankWith)(RANK, (0, import_core4.uiTypeIs)("VerticalLayout")),
       renderer: (0, import_vue35.markRaw)(createNuxtUiVerticalLayoutRenderer(theme))
     },
     {
-      tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("HorizontalLayout")),
+      tester: (0, import_core4.rankWith)(RANK, (0, import_core4.uiTypeIs)("HorizontalLayout")),
       renderer: (0, import_vue35.markRaw)(createNuxtUiHorizontalLayoutRenderer(theme))
     },
     {
-      tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("Group")),
+      tester: (0, import_core4.rankWith)(RANK, (0, import_core4.uiTypeIs)("Group")),
       renderer: (0, import_vue35.markRaw)(createNuxtUiGroupRenderer(theme))
     },
     {
-      tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("Categorization")),
+      tester: (0, import_core4.rankWith)(RANK, (0, import_core4.uiTypeIs)("Categorization")),
       renderer: (0, import_vue35.markRaw)(createNuxtUiCategorizationRenderer(theme))
     },
     {
-      tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("Category")),
+      tester: (0, import_core4.rankWith)(RANK, (0, import_core4.uiTypeIs)("Category")),
       renderer: (0, import_vue35.markRaw)(createNuxtUiCategoryRenderer(theme))
     },
     {
-      tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("Label")),
+      tester: (0, import_core4.rankWith)(RANK, (0, import_core4.uiTypeIs)("Label")),
       renderer: (0, import_vue35.markRaw)(createNuxtUiLabelRenderer(theme))
     },
     // Complex schemas
     {
-      tester: (0, import_core3.rankWith)(RANK, (0, import_core3.schemaTypeIs)("array")),
+      tester: (0, import_core4.rankWith)(RANK, (0, import_core4.schemaTypeIs)("array")),
       renderer: (0, import_vue35.markRaw)(createNuxtUiArrayListRenderer(theme))
     },
     {
-      tester: (0, import_core3.rankWith)(RANK, import_core3.isObjectControl),
+      tester: (0, import_core4.rankWith)(RANK, import_core4.isObjectControl),
       renderer: (0, import_vue35.markRaw)(NuxtUiObjectRenderer)
     },
     // Primitive controls
     {
-      tester: (0, import_core3.rankWith)(RANK, import_core3.isMultiLineControl),
+      tester: (0, import_core4.rankWith)(RANK, import_core4.isMultiLineControl),
       renderer: (0, import_vue35.markRaw)(NuxtUiTextareaControl)
     },
     {
-      tester: (0, import_core3.rankWith)(RANK, import_core3.isNumberControl),
+      tester: (0, import_core4.rankWith)(RANK, import_core4.isNumberControl),
       renderer: (0, import_vue35.markRaw)(NuxtUiNumberControl)
     },
     {
-      tester: (0, import_core3.rankWith)(RANK, import_core3.isIntegerControl),
+      tester: (0, import_core4.rankWith)(RANK, import_core4.isIntegerControl),
       renderer: (0, import_vue35.markRaw)(NuxtUiIntegerControl)
     },
     {
-      tester: (0, import_core3.rankWith)(RANK, import_core3.isBooleanControl),
+      tester: (0, import_core4.rankWith)(RANK, import_core4.isBooleanControl),
       renderer: (0, import_vue35.markRaw)(createNuxtUiBooleanControl(theme))
     },
     {
       // Multi-enum must outrank generic array renderer and string renderer.
-      tester: (0, import_core3.rankWith)(ENUM_RANK, isMultiEnumControl),
+      tester: (0, import_core4.rankWith)(ENUM_RANK, isMultiEnumControl),
       renderer: (0, import_vue35.markRaw)(NuxtUiMultiEnumControl)
     },
     {
       // oneOf with const+title (display labels) - same as enum for rendering.
-      tester: (0, import_core3.rankWith)(ENUM_RANK, isOneOfEnumControl),
+      tester: (0, import_core4.rankWith)(ENUM_RANK, isOneOfEnumControl),
       renderer: (0, import_vue35.markRaw)(NuxtUiEnumControl)
     },
     {
       // Enum must outrank the generic string control, otherwise enums render
       // as freeform text inputs.
-      tester: (0, import_core3.rankWith)(ENUM_RANK, import_core3.isEnumControl),
+      tester: (0, import_core4.rankWith)(ENUM_RANK, import_core4.isEnumControl),
       renderer: (0, import_vue35.markRaw)(NuxtUiEnumControl)
     },
     {
-      tester: (0, import_core3.rankWith)(PASSWORD_RANK, (0, import_core3.and)(import_core3.isStringControl, (0, import_core3.formatIs)("password"))),
+      tester: (0, import_core4.rankWith)(PASSWORD_RANK, (0, import_core4.and)(import_core4.isStringControl, (0, import_core4.formatIs)("password"))),
       renderer: (0, import_vue35.markRaw)(NuxtUiPasswordControl)
     },
     {
-      tester: (0, import_core3.rankWith)(RANK, import_core3.isStringControl),
+      tester: (0, import_core4.rankWith)(RANK, import_core4.isStringControl),
       renderer: (0, import_vue35.markRaw)(createNuxtUiStringControl(docsUrl))
     }
   ];