jsonforms-nuxt-ui-renderers 0.2.0 → 0.2.2

package/dist/index.js

@@ -26,14 +26,49 @@ 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 { 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;
 }
+function controlDescription(control) {
+  const d = control.description?.trim();
+  if (d) return d;
+  const sd = control.schema?.description;
+  return typeof sd === "string" && sd.trim() ? sd.trim() : void 0;
+}
 
 // src/renderers/complex/NuxtUiArrayListRenderer.ts
 function createNuxtUiArrayListRenderer(theme) {
@@ -106,10 +141,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,
@@ -118,14 +153,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",
@@ -138,26 +173,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)}`
@@ -165,8 +200,8 @@ function createNuxtUiArrayListRenderer(theme) {
                               ]
                             )
                           ]),
-                          h("div", { class: theme.flexActions }, [
-                            h(
+                          h2("div", { class: theme.flexActions }, [
+                            h2(
                               UButton,
                               {
                                 type: "button",
@@ -178,7 +213,7 @@ function createNuxtUiArrayListRenderer(theme) {
                               },
                               { default: () => "Up" }
                             ),
-                            h(
+                            h2(
                               UButton,
                               {
                                 type: "button",
@@ -190,7 +225,7 @@ function createNuxtUiArrayListRenderer(theme) {
                               },
                               { default: () => "Down" }
                             ),
-                            h(
+                            h2(
                               UButton,
                               {
                                 type: "button",
@@ -207,7 +242,7 @@ function createNuxtUiArrayListRenderer(theme) {
                           ])
                         ]
                       ),
-                      h(DispatchRenderer, {
+                      h2(DispatchRenderer, {
                         schema: control.value.schema,
                         uischema: childUiSchema.value,
                         path: composePaths(control.value.path, `${index}`),
@@ -234,7 +269,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 },
@@ -271,7 +306,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,
@@ -286,7 +321,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",
@@ -304,22 +339,22 @@ 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,
-              description: control.value.description,
+              description: controlDescription(control.value),
               required: control.value.required,
               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),
@@ -338,7 +373,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)) {
@@ -375,19 +410,19 @@ 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,
-            description: control.value.description,
+            description: controlDescription(control.value),
             required: control.value.required,
             error: errorMessage.value
           },
           {
-            default: () => h4(USelectMenu, {
+            default: () => h5(USelectMenu, {
               modelValue: selectedValue.value,
               items: options.value,
               valueKey: "value",
@@ -409,7 +444,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, resolveComponent as resolveComponent4 } from "vue";
 var NuxtUiIntegerControl = defineComponent5({
   name: "NuxtUiIntegerControl",
   props: rendererProps5(),
@@ -435,19 +470,19 @@ var NuxtUiIntegerControl = defineComponent5({
       if (!control.value.visible) return null;
       const UFormField = resolveComponent4("UFormField");
       const UInput = resolveComponent4("UInput");
-      return h5(
+      return h6(
         "div",
         {},
-        h5(
+        h6(
           UFormField,
           {
             label: control.value.label,
-            description: control.value.description,
+            description: controlDescription(control.value),
             required: control.value.required,
             error: errorMessage.value
           },
           {
-            default: () => h5(UInput, {
+            default: () => h6(UInput, {
               type: "number",
               inputmode: "numeric",
               step: "1",
@@ -466,7 +501,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)) {
@@ -511,19 +546,19 @@ 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,
-            description: control.value.description,
+            description: controlDescription(control.value),
             required: control.value.required,
             error: errorMessage.value
           },
           {
-            default: () => h6(USelectMenu, {
+            default: () => h7(USelectMenu, {
               multiple: true,
               modelValue: selectedValues.value,
               items: options.value,
@@ -546,7 +581,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, resolveComponent as resolveComponent6 } from "vue";
 var NuxtUiNumberControl = defineComponent7({
   name: "NuxtUiNumberControl",
   props: rendererProps7(),
@@ -572,19 +607,19 @@ var NuxtUiNumberControl = defineComponent7({
       if (!control.value.visible) return null;
       const UFormField = resolveComponent6("UFormField");
       const UInput = resolveComponent6("UInput");
-      return h7(
+      return h8(
         "div",
         {},
-        h7(
+        h8(
           UFormField,
           {
             label: control.value.label,
-            description: control.value.description,
+            description: controlDescription(control.value),
             required: control.value.required,
             error: errorMessage.value
           },
           {
-            default: () => h7(UInput, {
+            default: () => h8(UInput, {
               type: "number",
               inputmode: "decimal",
               modelValue: modelValue.value,
@@ -602,7 +637,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, ref, resolveComponent as resolveComponent7 } from "vue";
 var NuxtUiPasswordControl = defineComponent8({
   name: "NuxtUiPasswordControl",
   props: rendererProps8(),
@@ -618,19 +653,19 @@ var NuxtUiPasswordControl = defineComponent8({
       const UFormField = resolveComponent7("UFormField");
       const UInput = resolveComponent7("UInput");
       const UButton = resolveComponent7("UButton");
-      return h8(
+      return h9(
         "div",
         {},
-        h8(
+        h9(
           UFormField,
           {
             label: control.value.label,
-            description: control.value.description,
+            description: controlDescription(control.value),
             required: control.value.required,
             error: errorMessage.value
           },
           {
-            default: () => h8(
+            default: () => h9(
               UInput,
               {
                 modelValue: control.value.data ?? "",
@@ -643,7 +678,7 @@ var NuxtUiPasswordControl = defineComponent8({
                 "onUpdate:modelValue": (v) => handleChange(control.value.path, v)
               },
               {
-                trailing: () => h8(UButton, {
+                trailing: () => h9(UButton, {
                   type: "button",
                   color: "neutral",
                   variant: "ghost",
@@ -670,51 +705,59 @@ import { rendererProps as rendererProps9, useJsonFormsControl as useJsonFormsCon
 import {
   computed as computed10,
   defineComponent as defineComponent9,
-  h as h9,
+  h as h10,
   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 errorMessage = computed10(
+        () => trimmedOrUndefined(control.value.errors)
+      );
+      return () => {
+        if (!control.value.visible) return null;
+        const UFormField = resolveComponent8("UFormField");
+        const UInput = resolveComponent8("UInput");
+        const slots = {
+          default: () => h10(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)
+          })
+        };
+        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: control.value.description,
+            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, resolveComponent as resolveComponent9 } from "vue";
 var NuxtUiTextareaControl = defineComponent10({
   name: "NuxtUiTextareaControl",
   props: rendererProps10(),
@@ -727,19 +770,19 @@ var NuxtUiTextareaControl = defineComponent10({
       if (!control.value.visible) return null;
       const UFormField = resolveComponent9("UFormField");
       const UTextarea = resolveComponent9("UTextarea");
-      return h10(
+      return h11(
         "div",
         {},
-        h10(
+        h11(
           UFormField,
           {
             label: control.value.label,
-            description: control.value.description,
+            description: controlDescription(control.value),
             required: control.value.required,
             error: errorMessage.value
           },
           {
-            default: () => h10(UTextarea, {
+            default: () => h11(UTextarea, {
               modelValue: control.value.data ?? "",
               class: "w-full",
               disabled: !control.value.enabled,
@@ -757,7 +800,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",
@@ -769,28 +812,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,
@@ -812,7 +855,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",
@@ -825,16 +868,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,
@@ -853,7 +896,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",
@@ -868,19 +911,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,
@@ -900,7 +943,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",
@@ -913,17 +956,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,
@@ -941,7 +984,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",
@@ -952,7 +995,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);
       };
     }
   });
@@ -960,7 +1003,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",
@@ -973,14 +1016,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,
@@ -1068,6 +1111,7 @@ var isOneOfEnumControl = (uischema, schema, context) => {
 };
 function createNuxtUiRenderers(options) {
   const theme = mergeTheme(options?.theme);
+  const docsUrl = options?.docsUrl;
   return [
     // Layouts
     {
@@ -1142,14 +1186,16 @@ function createNuxtUiRenderers(options) {
     },
     {
       tester: rankWith(RANK, isStringControl),
-      renderer: markRaw(NuxtUiStringControl)
+      renderer: markRaw(createNuxtUiStringControl(docsUrl))
     }
   ];
 }
 var nuxtUiRenderers = createNuxtUiRenderers();
 export {
+  controlDescription,
   createNuxtUiRenderers,
   defaultTheme,
+  getDocsPathFromSchema,
   mergeTheme,
   nuxtUiRenderers
 };