jsonforms-nuxt-ui-renderers 0.2.1 → 0.2.3

package/dist/index.js

@@ -26,10 +26,40 @@ import {
   getFirstPrimitiveProp
 } from "@jsonforms/core";
 import { DispatchRenderer, rendererProps, useJsonFormsArrayControl } from "@jsonforms/vue";
-import { computed as computed2, defineComponent, h, resolveComponent } from "vue";
+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) {
+  if (!schema || typeof schema !== "object" || Array.isArray(schema))
+    return null;
+  const s = schema;
+  const path = s["x-docs-path"];
+  if (typeof path === "string" && path.startsWith("/")) return path;
+  return null;
+}
+function renderDocsHintSlot(schema, label, docsUrl, resolveComponent10) {
+  const path = getDocsPathFromSchema(schema);
+  if (!path || !docsUrl) return void 0;
+  const ULink = resolveComponent10("ULink");
+  const UIcon = resolveComponent10("UIcon");
+  if (!ULink || !UIcon) return void 0;
+  const href = docsUrl(path);
+  return () => h(
+    ULink,
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      class: "inline-flex items-center text-muted hover:text-primary",
+      "aria-label": `${label} docs`,
+      title: `${label} docs`
+    },
+    () => h(UIcon, { name: "i-heroicons-information-circle" })
+  );
+}
 function trimmedOrUndefined(input) {
   const v = input?.trim();
   return v ? v : void 0;
@@ -40,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) {
@@ -112,10 +173,10 @@ function createNuxtUiArrayListRenderer(theme) {
         if (!control.value.visible) return null;
         const UFormField = resolveComponent("UFormField");
         const UButton = resolveComponent("UButton");
-        return h(
+        return h2(
           "div",
           {},
-          h(
+          h2(
             UFormField,
             {
               label: control.value.label,
@@ -124,14 +185,14 @@ function createNuxtUiArrayListRenderer(theme) {
               error: errorMessage.value
             },
             {
-              default: () => h("div", { class: theme.layoutVertical }, [
-                h("div", { class: theme.flexBetween }, [
-                  h(
+              default: () => h2("div", { class: theme.layoutVertical }, [
+                h2("div", { class: theme.flexBetween }, [
+                  h2(
                     "div",
                     { class: theme.textMutedXs },
                     `${items.value.length} items`
                   ),
-                  h(
+                  h2(
                     UButton,
                     {
                       type: "button",
@@ -144,26 +205,26 @@ function createNuxtUiArrayListRenderer(theme) {
                     { default: () => "Add" }
                   )
                 ]),
-                items.value.length === 0 ? h("div", { class: theme.textMuted }, "No items.") : null,
+                items.value.length === 0 ? h2("div", { class: theme.textMuted }, "No items.") : null,
                 ...items.value.map(
-                  (_item, index) => h(
+                  (_item, index) => h2(
                     "div",
                     {
                       key: `${control.value.path}-${index}`,
                       class: theme.panel
                     },
                     [
-                      h(
+                      h2(
                         "div",
                         { class: theme.arrayItemToolbar },
                         [
-                          h("div", { class: "jf-min-w-0" }, [
-                            h(
+                          h2("div", { class: "jf-min-w-0" }, [
+                            h2(
                               "div",
                               { class: theme.textItemTitle },
                               [
                                 `Item ${index + 1}`,
-                                childLabelForIndex(index) ? h(
+                                childLabelForIndex(index) ? h2(
                                   "span",
                                   { class: theme.textItemSuffix },
                                   ` \u2014 ${childLabelForIndex(index)}`
@@ -171,8 +232,8 @@ function createNuxtUiArrayListRenderer(theme) {
                               ]
                             )
                           ]),
-                          h("div", { class: theme.flexActions }, [
-                            h(
+                          h2("div", { class: theme.flexActions }, [
+                            h2(
                               UButton,
                               {
                                 type: "button",
@@ -184,7 +245,7 @@ function createNuxtUiArrayListRenderer(theme) {
                               },
                               { default: () => "Up" }
                             ),
-                            h(
+                            h2(
                               UButton,
                               {
                                 type: "button",
@@ -196,7 +257,7 @@ function createNuxtUiArrayListRenderer(theme) {
                               },
                               { default: () => "Down" }
                             ),
-                            h(
+                            h2(
                               UButton,
                               {
                                 type: "button",
@@ -213,7 +274,7 @@ function createNuxtUiArrayListRenderer(theme) {
                           ])
                         ]
                       ),
-                      h(DispatchRenderer, {
+                      h2(DispatchRenderer, {
                         schema: control.value.schema,
                         uischema: childUiSchema.value,
                         path: composePaths(control.value.path, `${index}`),
@@ -240,7 +301,7 @@ import {
   rendererProps as rendererProps2,
   useJsonFormsControlWithDetail
 } from "@jsonforms/vue";
-import { computed as computed3, defineComponent as defineComponent2, h as h2 } from "vue";
+import { computed as computed3, defineComponent as defineComponent2, h as h3 } from "vue";
 var NuxtUiObjectRenderer = defineComponent2({
   name: "NuxtUiObjectRenderer",
   components: { DispatchRenderer: DispatchRenderer2 },
@@ -277,7 +338,7 @@ var NuxtUiObjectRenderer = defineComponent2({
     });
     return () => {
       if (!control.value.visible) return null;
-      return h2(DispatchRenderer2, {
+      return h3(DispatchRenderer2, {
         visible: control.value.visible,
         enabled: control.value.enabled,
         schema: control.value.schema,
@@ -292,7 +353,7 @@ var NuxtUiObjectRenderer = defineComponent2({
 
 // src/renderers/controls/NuxtUiBooleanControl.ts
 import { rendererProps as rendererProps3, useJsonFormsControl } from "@jsonforms/vue";
-import { computed as computed4, defineComponent as defineComponent3, h as h3, resolveComponent as resolveComponent2 } from "vue";
+import { computed as computed4, defineComponent as defineComponent3, h as h4, resolveComponent as resolveComponent2 } from "vue";
 function createNuxtUiBooleanControl(theme) {
   return defineComponent3({
     name: "NuxtUiBooleanControl",
@@ -310,10 +371,10 @@ function createNuxtUiBooleanControl(theme) {
         if (!control.value.visible) return null;
         const UFormField = resolveComponent2("UFormField");
         const USwitch = resolveComponent2("USwitch");
-        return h3(
+        return h4(
           "div",
           {},
-          h3(
+          h4(
             UFormField,
             {
               label: control.value.label,
@@ -322,10 +383,10 @@ function createNuxtUiBooleanControl(theme) {
               error: errorMessage.value
             },
             {
-              default: () => h3(
+              default: () => h4(
                 "div",
                 { class: theme.flexBetween },
-                h3(USwitch, {
+                h4(USwitch, {
                   modelValue: modelValue.value,
                   disabled: !control.value.enabled,
                   "aria-invalid": Boolean(errorMessage.value),
@@ -344,7 +405,7 @@ function createNuxtUiBooleanControl(theme) {
 
 // src/renderers/controls/NuxtUiEnumControl.ts
 import { rendererProps as rendererProps4, useJsonFormsControl as useJsonFormsControl2 } from "@jsonforms/vue";
-import { computed as computed5, defineComponent as defineComponent4, h as h4, resolveComponent as resolveComponent3 } from "vue";
+import { computed as computed5, defineComponent as defineComponent4, h as h5, resolveComponent as resolveComponent3 } from "vue";
 function schemaEnumOptions(schema) {
   if (!schema) return [];
   if (Array.isArray(schema.enum)) {
@@ -381,10 +442,10 @@ var NuxtUiEnumControl = defineComponent4({
       if (!control.value.visible) return null;
       const UFormField = resolveComponent3("UFormField");
       const USelectMenu = resolveComponent3("USelectMenu");
-      return h4(
+      return h5(
         "div",
         {},
-        h4(
+        h5(
           UFormField,
           {
             label: control.value.label,
@@ -393,7 +454,7 @@ var NuxtUiEnumControl = defineComponent4({
             error: errorMessage.value
           },
           {
-            default: () => h4(USelectMenu, {
+            default: () => h5(USelectMenu, {
               modelValue: selectedValue.value,
               items: options.value,
               valueKey: "value",
@@ -415,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 h5, 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(),
@@ -423,6 +484,7 @@ 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;
@@ -441,10 +503,11 @@ var NuxtUiIntegerControl = defineComponent5({
       if (!control.value.visible) return null;
       const UFormField = resolveComponent4("UFormField");
       const UInput = resolveComponent4("UInput");
-      return h5(
+      const { readonly, disabled } = controlTextInputAttrs(control.value, jsonforms);
+      return h6(
         "div",
         {},
-        h5(
+        h6(
           UFormField,
           {
             label: control.value.label,
@@ -453,12 +516,13 @@ var NuxtUiIntegerControl = defineComponent5({
             error: errorMessage.value
           },
           {
-            default: () => h5(UInput, {
+            default: () => h6(UInput, {
               type: "number",
               inputmode: "numeric",
               step: "1",
               modelValue: modelValue.value,
-              disabled: !control.value.enabled,
+              readonly,
+              disabled,
               color: errorMessage.value ? "error" : void 0,
               "aria-invalid": Boolean(errorMessage.value),
               "onUpdate:modelValue": onUpdate
@@ -472,7 +536,7 @@ var NuxtUiIntegerControl = defineComponent5({
 
 // src/renderers/controls/NuxtUiMultiEnumControl.ts
 import { rendererProps as rendererProps6, useJsonFormsControl as useJsonFormsControl4 } from "@jsonforms/vue";
-import { computed as computed7, defineComponent as defineComponent6, h as h6, resolveComponent as resolveComponent5 } from "vue";
+import { computed as computed7, defineComponent as defineComponent6, h as h7, resolveComponent as resolveComponent5 } from "vue";
 function schemaEnumOptions2(schema) {
   if (!schema) return [];
   if (Array.isArray(schema.enum)) {
@@ -517,10 +581,10 @@ var NuxtUiMultiEnumControl = defineComponent6({
       if (!control.value.visible) return null;
       const UFormField = resolveComponent5("UFormField");
       const USelectMenu = resolveComponent5("USelectMenu");
-      return h6(
+      return h7(
         "div",
         {},
-        h6(
+        h7(
           UFormField,
           {
             label: control.value.label,
@@ -529,7 +593,7 @@ var NuxtUiMultiEnumControl = defineComponent6({
             error: errorMessage.value
           },
           {
-            default: () => h6(USelectMenu, {
+            default: () => h7(USelectMenu, {
               multiple: true,
               modelValue: selectedValues.value,
               items: options.value,
@@ -552,7 +616,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 h7, 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(),
@@ -560,6 +624,7 @@ 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;
@@ -578,10 +643,11 @@ var NuxtUiNumberControl = defineComponent7({
       if (!control.value.visible) return null;
       const UFormField = resolveComponent6("UFormField");
       const UInput = resolveComponent6("UInput");
-      return h7(
+      const { readonly, disabled } = controlTextInputAttrs(control.value, jsonforms);
+      return h8(
         "div",
         {},
-        h7(
+        h8(
           UFormField,
           {
             label: control.value.label,
@@ -590,11 +656,12 @@ var NuxtUiNumberControl = defineComponent7({
             error: errorMessage.value
           },
           {
-            default: () => h7(UInput, {
+            default: () => h8(UInput, {
               type: "number",
               inputmode: "decimal",
               modelValue: modelValue.value,
-              disabled: !control.value.enabled,
+              readonly,
+              disabled,
               color: errorMessage.value ? "error" : void 0,
               "aria-invalid": Boolean(errorMessage.value),
               "onUpdate:modelValue": onUpdate
@@ -608,7 +675,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 h8, 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(),
@@ -616,6 +683,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");
@@ -624,10 +692,11 @@ var NuxtUiPasswordControl = defineComponent8({
       const UFormField = resolveComponent7("UFormField");
       const UInput = resolveComponent7("UInput");
       const UButton = resolveComponent7("UButton");
-      return h8(
+      const { readonly, disabled } = controlTextInputAttrs(control.value, jsonforms);
+      return h9(
         "div",
         {},
-        h8(
+        h9(
           UFormField,
           {
             label: control.value.label,
@@ -636,20 +705,21 @@ var NuxtUiPasswordControl = defineComponent8({
             error: errorMessage.value
           },
           {
-            default: () => h8(
+            default: () => h9(
               UInput,
               {
                 modelValue: control.value.data ?? "",
                 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)
               },
               {
-                trailing: () => h8(UButton, {
+                trailing: () => h9(UButton, {
                   type: "button",
                   color: "neutral",
                   variant: "ghost",
@@ -657,7 +727,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;
                   }
@@ -676,51 +746,66 @@ import { rendererProps as rendererProps9, useJsonFormsControl as useJsonFormsCon
 import {
   computed as computed10,
   defineComponent as defineComponent9,
-  h as h9,
+  h as h10,
+  inject as inject4,
   resolveComponent as resolveComponent8
 } from "vue";
-var NuxtUiStringControl = defineComponent9({
-  name: "NuxtUiStringControl",
-  props: rendererProps9(),
-  setup(props) {
-    const { control, handleChange } = useJsonFormsControl7(
-      props
-    );
-    const errorMessage = computed10(() => trimmedOrUndefined(control.value.errors));
-    return () => {
-      if (!control.value.visible) return null;
-      const UFormField = resolveComponent8("UFormField");
-      const UInput = resolveComponent8("UInput");
-      return h9(
-        "div",
-        {},
-        h9(
-          UFormField,
-          {
+function createNuxtUiStringControl(docsUrl) {
+  return defineComponent9({
+    name: "NuxtUiStringControl",
+    props: rendererProps9(),
+    setup(props) {
+      const { control, handleChange } = useJsonFormsControl7(
+        props
+      );
+      const jsonforms = inject4("jsonforms");
+      const errorMessage = computed10(
+        () => trimmedOrUndefined(control.value.errors)
+      );
+      return () => {
+        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",
+            readonly,
+            disabled,
+            color: errorMessage.value ? "error" : void 0,
+            "aria-invalid": Boolean(errorMessage.value),
+            "onUpdate:modelValue": (v) => handleChange(control.value.path, v)
+          })
+        };
+        const hintSlot = renderDocsHintSlot(
+          control.value.schema,
+          control.value.label ?? "",
+          docsUrl,
+          resolveComponent8
+        );
+        if (hintSlot) slots.hint = hintSlot;
+        return h10(
+          "div",
+          {},
+          h10(UFormField, {
             label: control.value.label,
             description: controlDescription(control.value),
             required: control.value.required,
             error: errorMessage.value
-          },
-          {
-            default: () => h9(UInput, {
-              modelValue: control.value.data ?? "",
-              class: "w-full",
-              disabled: !control.value.enabled,
-              color: errorMessage.value ? "error" : void 0,
-              "aria-invalid": Boolean(errorMessage.value),
-              "onUpdate:modelValue": (v) => handleChange(control.value.path, v)
-            })
-          }
-        )
-      );
-    };
-  }
-});
+          }, slots)
+        );
+      };
+    }
+  });
+}
 
 // src/renderers/controls/NuxtUiTextareaControl.ts
 import { rendererProps as rendererProps10, useJsonFormsControl as useJsonFormsControl8 } from "@jsonforms/vue";
-import { computed as computed11, defineComponent as defineComponent10, h as h10, 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(),
@@ -728,15 +813,17 @@ 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");
-      return h10(
+      const { readonly, disabled } = controlTextInputAttrs(control.value, jsonforms);
+      return h11(
         "div",
         {},
-        h10(
+        h11(
           UFormField,
           {
             label: control.value.label,
@@ -745,10 +832,11 @@ var NuxtUiTextareaControl = defineComponent10({
             error: errorMessage.value
           },
           {
-            default: () => h10(UTextarea, {
+            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,
@@ -763,7 +851,7 @@ var NuxtUiTextareaControl = defineComponent10({
 
 // src/renderers/layouts/NuxtUiCategorizationRenderer.ts
 import { DispatchRenderer as DispatchRenderer3, rendererProps as rendererProps11, useJsonFormsCategorization } from "@jsonforms/vue";
-import { defineComponent as defineComponent11, h as h11 } from "vue";
+import { defineComponent as defineComponent11, h as h12 } from "vue";
 function createNuxtUiCategorizationRenderer(theme) {
   return defineComponent11({
     name: "NuxtUiCategorizationRenderer",
@@ -775,28 +863,28 @@ function createNuxtUiCategorizationRenderer(theme) {
       );
       return () => {
         if (!layout.value.visible) return null;
-        return h11(
+        return h12(
           "div",
           { class: theme.layoutVerticalWide },
           categories.map((categoryRef, catIndex) => {
             const category = categoryRef.value;
             const elements = category.uischema.elements ?? [];
-            return h11(
+            return h12(
               "div",
               {
                 key: `${layout.value.path}-cat-${catIndex}`,
                 class: theme.layoutVertical
               },
               [
-                category.label ? h11("div", { class: theme.labelSection }, category.label) : null,
-                h11(
+                category.label ? h12("div", { class: theme.labelSection }, category.label) : null,
+                h12(
                   "div",
                   { class: theme.layoutVertical },
                   elements.map(
-                    (element, index) => h11(
+                    (element, index) => h12(
                       "div",
                       { key: `${category.path}-${index}` },
-                      h11(DispatchRenderer3, {
+                      h12(DispatchRenderer3, {
                         schema: category.schema,
                         uischema: element,
                         path: category.path,
@@ -818,7 +906,7 @@ function createNuxtUiCategorizationRenderer(theme) {
 
 // src/renderers/layouts/NuxtUiCategoryRenderer.ts
 import { DispatchRenderer as DispatchRenderer4, rendererProps as rendererProps12, useJsonFormsLayout } from "@jsonforms/vue";
-import { defineComponent as defineComponent12, h as h12 } from "vue";
+import { defineComponent as defineComponent12, h as h13 } from "vue";
 function createNuxtUiCategoryRenderer(theme) {
   return defineComponent12({
     name: "NuxtUiCategoryRenderer",
@@ -831,16 +919,16 @@ function createNuxtUiCategoryRenderer(theme) {
       return () => {
         if (!layout.value.visible) return null;
         const elements = layout.value.uischema.elements ?? [];
-        return h12("div", { class: theme.layoutVertical }, [
-          layout.value.label ? h12("div", { class: theme.labelSection }, layout.value.label) : null,
-          h12(
+        return h13("div", { class: theme.layoutVertical }, [
+          layout.value.label ? h13("div", { class: theme.labelSection }, layout.value.label) : null,
+          h13(
             "div",
             { class: theme.layoutVertical },
             elements.map(
-              (element, index) => h12(
+              (element, index) => h13(
                 "div",
                 { key: `${layout.value.path}-${index}` },
-                h12(DispatchRenderer4, {
+                h13(DispatchRenderer4, {
                   schema: layout.value.schema,
                   uischema: element,
                   path: layout.value.path,
@@ -859,7 +947,7 @@ function createNuxtUiCategoryRenderer(theme) {
 
 // src/renderers/layouts/NuxtUiGroupRenderer.ts
 import { DispatchRenderer as DispatchRenderer5, rendererProps as rendererProps13, useJsonFormsLayout as useJsonFormsLayout2 } from "@jsonforms/vue";
-import { defineComponent as defineComponent13, h as h13 } from "vue";
+import { defineComponent as defineComponent13, h as h14 } from "vue";
 function createNuxtUiGroupRenderer(theme) {
   return defineComponent13({
     name: "NuxtUiGroupRenderer",
@@ -874,19 +962,19 @@ function createNuxtUiGroupRenderer(theme) {
         const elements = layout.value.uischema.elements ?? [];
         const isNested = layout.value.path?.includes(".") ?? false;
         const containerClass = isNested ? theme.groupNested : theme.panel;
-        return h13(
+        return h14(
           "div",
           { class: containerClass },
           [
-            layout.value.label ? h13("div", { class: theme.labelSectionSpaced }, layout.value.label) : null,
-            h13(
+            layout.value.label ? h14("div", { class: theme.labelSectionSpaced }, layout.value.label) : null,
+            h14(
               "div",
               { class: theme.layoutVertical },
               elements.map(
-                (element, index) => h13(
+                (element, index) => h14(
                   "div",
                   { key: `${layout.value.path}-${index}` },
-                  h13(DispatchRenderer5, {
+                  h14(DispatchRenderer5, {
                     schema: layout.value.schema,
                     uischema: element,
                     path: layout.value.path,
@@ -906,7 +994,7 @@ function createNuxtUiGroupRenderer(theme) {
 
 // src/renderers/layouts/NuxtUiHorizontalLayoutRenderer.ts
 import { DispatchRenderer as DispatchRenderer6, rendererProps as rendererProps14, useJsonFormsLayout as useJsonFormsLayout3 } from "@jsonforms/vue";
-import { defineComponent as defineComponent14, h as h14 } from "vue";
+import { defineComponent as defineComponent14, h as h15 } from "vue";
 function createNuxtUiHorizontalLayoutRenderer(theme) {
   return defineComponent14({
     name: "NuxtUiHorizontalLayoutRenderer",
@@ -919,17 +1007,17 @@ function createNuxtUiHorizontalLayoutRenderer(theme) {
       return () => {
         if (!layout.value.visible) return null;
         const elements = layout.value.uischema.elements ?? [];
-        return h14(
+        return h15(
           "div",
           { class: theme.layoutHorizontal },
           elements.map(
-            (element, index) => h14(
+            (element, index) => h15(
               "div",
               {
                 key: `${layout.value.path}-${index}`,
                 class: theme.layoutHorizontalItem
               },
-              h14(DispatchRenderer6, {
+              h15(DispatchRenderer6, {
                 schema: layout.value.schema,
                 uischema: element,
                 path: layout.value.path,
@@ -947,7 +1035,7 @@ function createNuxtUiHorizontalLayoutRenderer(theme) {
 
 // src/renderers/layouts/NuxtUiLabelRenderer.ts
 import { rendererProps as rendererProps15, useJsonFormsLabel } from "@jsonforms/vue";
-import { defineComponent as defineComponent15, h as h15 } from "vue";
+import { defineComponent as defineComponent15, h as h16 } from "vue";
 function createNuxtUiLabelRenderer(theme) {
   return defineComponent15({
     name: "NuxtUiLabelRenderer",
@@ -958,7 +1046,7 @@ function createNuxtUiLabelRenderer(theme) {
       );
       return () => {
         if (!label.value.visible) return null;
-        return h15("div", { class: theme.textLabel }, label.value.text);
+        return h16("div", { class: theme.textLabel }, label.value.text);
       };
     }
   });
@@ -966,7 +1054,7 @@ function createNuxtUiLabelRenderer(theme) {
 
 // src/renderers/layouts/NuxtUiVerticalLayoutRenderer.ts
 import { DispatchRenderer as DispatchRenderer7, rendererProps as rendererProps16, useJsonFormsLayout as useJsonFormsLayout4 } from "@jsonforms/vue";
-import { defineComponent as defineComponent16, h as h16 } from "vue";
+import { defineComponent as defineComponent16, h as h17 } from "vue";
 function createNuxtUiVerticalLayoutRenderer(theme) {
   return defineComponent16({
     name: "NuxtUiVerticalLayoutRenderer",
@@ -979,14 +1067,14 @@ function createNuxtUiVerticalLayoutRenderer(theme) {
       return () => {
         if (!layout.value.visible) return null;
         const elements = layout.value.uischema.elements ?? [];
-        return h16(
+        return h17(
           "div",
           { class: theme.layoutVertical },
           elements.map(
-            (element, index) => h16(
+            (element, index) => h17(
               "div",
               { key: `${layout.value.path}-${index}` },
-              h16(DispatchRenderer7, {
+              h17(DispatchRenderer7, {
                 schema: layout.value.schema,
                 uischema: element,
                 path: layout.value.path,
@@ -1074,6 +1162,7 @@ var isOneOfEnumControl = (uischema, schema, context) => {
 };
 function createNuxtUiRenderers(options) {
   const theme = mergeTheme(options?.theme);
+  const docsUrl = options?.docsUrl;
   return [
     // Layouts
     {
@@ -1148,7 +1237,7 @@ function createNuxtUiRenderers(options) {
     },
     {
       tester: rankWith(RANK, isStringControl),
-      renderer: markRaw(NuxtUiStringControl)
+      renderer: markRaw(createNuxtUiStringControl(docsUrl))
     }
   ];
 }
@@ -1157,6 +1246,7 @@ export {
   controlDescription,
   createNuxtUiRenderers,
   defaultTheme,
+  getDocsPathFromSchema,
   mergeTheme,
   nuxtUiRenderers
 };