jsonforms-nuxt-ui-renderers 0.2.1 → 0.2.2

package/dist/index.cjs

@@ -23,6 +23,7 @@ __export(index_exports, {
   controlDescription: () => controlDescription,
   createNuxtUiRenderers: () => createNuxtUiRenderers,
   defaultTheme: () => defaultTheme,
+  getDocsPathFromSchema: () => getDocsPathFromSchema,
   mergeTheme: () => mergeTheme,
   nuxtUiRenderers: () => nuxtUiRenderers
 });
@@ -30,15 +31,44 @@ module.exports = __toCommonJS(index_exports);
 
 // src/nuxtUiRenderers.ts
 var import_core3 = require("@jsonforms/core");
-var import_vue34 = require("vue");
+var import_vue35 = require("vue");
 
 // src/renderers/complex/NuxtUiArrayListRenderer.ts
 var import_core = require("@jsonforms/core");
-var import_vue2 = require("@jsonforms/vue");
-var import_vue3 = require("vue");
+var import_vue3 = require("@jsonforms/vue");
+var import_vue4 = require("vue");
 
 // src/renderers/util.ts
 var import_vue = require("vue");
+var import_vue2 = require("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 () => (0, import_vue.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`
+    },
+    () => (0, import_vue.h)(UIcon, { name: "i-heroicons-information-circle" })
+  );
+}
 function trimmedOrUndefined(input) {
   const v = input?.trim();
   return v ? v : void 0;
@@ -52,19 +82,19 @@ function controlDescription(control) {
 
 // src/renderers/complex/NuxtUiArrayListRenderer.ts
 function createNuxtUiArrayListRenderer(theme) {
-  return (0, import_vue3.defineComponent)({
+  return (0, import_vue4.defineComponent)({
     name: "NuxtUiArrayListRenderer",
-    components: { DispatchRenderer: import_vue2.DispatchRenderer },
-    props: (0, import_vue2.rendererProps)(),
+    components: { DispatchRenderer: import_vue3.DispatchRenderer },
+    props: (0, import_vue3.rendererProps)(),
     setup(props) {
-      const { control, addItem, removeItems, moveUp, moveDown } = (0, import_vue2.useJsonFormsArrayControl)(
+      const { control, addItem, removeItems, moveUp, moveDown } = (0, import_vue3.useJsonFormsArrayControl)(
         props
       );
-      const errorMessage = (0, import_vue3.computed)(() => trimmedOrUndefined(control.value.errors));
-      const items = (0, import_vue3.computed)(
+      const errorMessage = (0, import_vue4.computed)(() => trimmedOrUndefined(control.value.errors));
+      const items = (0, import_vue4.computed)(
         () => Array.isArray(control.value.data) ? control.value.data : []
       );
-      const arraySchema = (0, import_vue3.computed)(() => {
+      const arraySchema = (0, import_vue4.computed)(() => {
         try {
           return import_core.Resolve.schema(
             props.schema,
@@ -75,15 +105,15 @@ function createNuxtUiArrayListRenderer(theme) {
           return void 0;
         }
       });
-      const maxItemsReached = (0, import_vue3.computed)(() => {
+      const maxItemsReached = (0, import_vue4.computed)(() => {
         const max = arraySchema.value?.maxItems;
         return typeof max === "number" ? items.value.length >= max : false;
       });
-      const minItemsReached = (0, import_vue3.computed)(() => {
+      const minItemsReached = (0, import_vue4.computed)(() => {
         const min = arraySchema.value?.minItems;
         return typeof min === "number" ? items.value.length <= min : false;
       });
-      const childUiSchema = (0, import_vue3.computed)(
+      const childUiSchema = (0, import_vue4.computed)(
         () => (0, import_core.findUISchema)(
           control.value.uischemas,
           control.value.schema,
@@ -119,12 +149,12 @@ function createNuxtUiArrayListRenderer(theme) {
       }
       return () => {
         if (!control.value.visible) return null;
-        const UFormField = (0, import_vue3.resolveComponent)("UFormField");
-        const UButton = (0, import_vue3.resolveComponent)("UButton");
-        return (0, import_vue3.h)(
+        const UFormField = (0, import_vue4.resolveComponent)("UFormField");
+        const UButton = (0, import_vue4.resolveComponent)("UButton");
+        return (0, import_vue4.h)(
           "div",
           {},
-          (0, import_vue3.h)(
+          (0, import_vue4.h)(
             UFormField,
             {
               label: control.value.label,
@@ -133,14 +163,14 @@ function createNuxtUiArrayListRenderer(theme) {
               error: errorMessage.value
             },
             {
-              default: () => (0, import_vue3.h)("div", { class: theme.layoutVertical }, [
-                (0, import_vue3.h)("div", { class: theme.flexBetween }, [
-                  (0, import_vue3.h)(
+              default: () => (0, import_vue4.h)("div", { class: theme.layoutVertical }, [
+                (0, import_vue4.h)("div", { class: theme.flexBetween }, [
+                  (0, import_vue4.h)(
                     "div",
                     { class: theme.textMutedXs },
                     `${items.value.length} items`
                   ),
-                  (0, import_vue3.h)(
+                  (0, import_vue4.h)(
                     UButton,
                     {
                       type: "button",
@@ -153,26 +183,26 @@ function createNuxtUiArrayListRenderer(theme) {
                     { default: () => "Add" }
                   )
                 ]),
-                items.value.length === 0 ? (0, import_vue3.h)("div", { class: theme.textMuted }, "No items.") : null,
+                items.value.length === 0 ? (0, import_vue4.h)("div", { class: theme.textMuted }, "No items.") : null,
                 ...items.value.map(
-                  (_item, index) => (0, import_vue3.h)(
+                  (_item, index) => (0, import_vue4.h)(
                     "div",
                     {
                       key: `${control.value.path}-${index}`,
                       class: theme.panel
                     },
                     [
-                      (0, import_vue3.h)(
+                      (0, import_vue4.h)(
                         "div",
                         { class: theme.arrayItemToolbar },
                         [
-                          (0, import_vue3.h)("div", { class: "jf-min-w-0" }, [
-                            (0, import_vue3.h)(
+                          (0, import_vue4.h)("div", { class: "jf-min-w-0" }, [
+                            (0, import_vue4.h)(
                               "div",
                               { class: theme.textItemTitle },
                               [
                                 `Item ${index + 1}`,
-                                childLabelForIndex(index) ? (0, import_vue3.h)(
+                                childLabelForIndex(index) ? (0, import_vue4.h)(
                                   "span",
                                   { class: theme.textItemSuffix },
                                   ` \u2014 ${childLabelForIndex(index)}`
@@ -180,8 +210,8 @@ function createNuxtUiArrayListRenderer(theme) {
                               ]
                             )
                           ]),
-                          (0, import_vue3.h)("div", { class: theme.flexActions }, [
-                            (0, import_vue3.h)(
+                          (0, import_vue4.h)("div", { class: theme.flexActions }, [
+                            (0, import_vue4.h)(
                               UButton,
                               {
                                 type: "button",
@@ -193,7 +223,7 @@ function createNuxtUiArrayListRenderer(theme) {
                               },
                               { default: () => "Up" }
                             ),
-                            (0, import_vue3.h)(
+                            (0, import_vue4.h)(
                               UButton,
                               {
                                 type: "button",
@@ -205,7 +235,7 @@ function createNuxtUiArrayListRenderer(theme) {
                               },
                               { default: () => "Down" }
                             ),
-                            (0, import_vue3.h)(
+                            (0, import_vue4.h)(
                               UButton,
                               {
                                 type: "button",
@@ -222,7 +252,7 @@ function createNuxtUiArrayListRenderer(theme) {
                           ])
                         ]
                       ),
-                      (0, import_vue3.h)(import_vue2.DispatchRenderer, {
+                      (0, import_vue4.h)(import_vue3.DispatchRenderer, {
                         schema: control.value.schema,
                         uischema: childUiSchema.value,
                         path: (0, import_core.composePaths)(control.value.path, `${index}`),
@@ -244,17 +274,17 @@ function createNuxtUiArrayListRenderer(theme) {
 
 // src/renderers/complex/NuxtUiObjectRenderer.ts
 var import_core2 = require("@jsonforms/core");
-var import_vue4 = require("@jsonforms/vue");
-var import_vue5 = require("vue");
-var NuxtUiObjectRenderer = (0, import_vue5.defineComponent)({
+var import_vue5 = require("@jsonforms/vue");
+var import_vue6 = require("vue");
+var NuxtUiObjectRenderer = (0, import_vue6.defineComponent)({
   name: "NuxtUiObjectRenderer",
-  components: { DispatchRenderer: import_vue4.DispatchRenderer },
-  props: (0, import_vue4.rendererProps)(),
+  components: { DispatchRenderer: import_vue5.DispatchRenderer },
+  props: (0, import_vue5.rendererProps)(),
   setup(props) {
-    const { control } = (0, import_vue4.useJsonFormsControlWithDetail)(
+    const { control } = (0, import_vue5.useJsonFormsControlWithDetail)(
       props
     );
-    const detailUiSchema = (0, import_vue5.computed)(() => {
+    const detailUiSchema = (0, import_vue6.computed)(() => {
       const uiSchemaGenerator = () => {
         const uiSchema = import_core2.Generate.uiSchema(
           control.value.schema,
@@ -282,7 +312,7 @@ var NuxtUiObjectRenderer = (0, import_vue5.defineComponent)({
     });
     return () => {
       if (!control.value.visible) return null;
-      return (0, import_vue5.h)(import_vue4.DispatchRenderer, {
+      return (0, import_vue6.h)(import_vue5.DispatchRenderer, {
         visible: control.value.visible,
         enabled: control.value.enabled,
         schema: control.value.schema,
@@ -296,29 +326,29 @@ var NuxtUiObjectRenderer = (0, import_vue5.defineComponent)({
 });
 
 // src/renderers/controls/NuxtUiBooleanControl.ts
-var import_vue6 = require("@jsonforms/vue");
-var import_vue7 = require("vue");
+var import_vue7 = require("@jsonforms/vue");
+var import_vue8 = require("vue");
 function createNuxtUiBooleanControl(theme) {
-  return (0, import_vue7.defineComponent)({
+  return (0, import_vue8.defineComponent)({
     name: "NuxtUiBooleanControl",
-    props: (0, import_vue6.rendererProps)(),
+    props: (0, import_vue7.rendererProps)(),
     setup(props) {
-      const { control, handleChange } = (0, import_vue6.useJsonFormsControl)(
+      const { control, handleChange } = (0, import_vue7.useJsonFormsControl)(
         props
       );
-      const errorMessage = (0, import_vue7.computed)(() => trimmedOrUndefined(control.value.errors));
-      const modelValue = (0, import_vue7.computed)({
+      const errorMessage = (0, import_vue8.computed)(() => trimmedOrUndefined(control.value.errors));
+      const modelValue = (0, import_vue8.computed)({
         get: () => Boolean(control.value.data),
         set: (v) => handleChange(control.value.path, v)
       });
       return () => {
         if (!control.value.visible) return null;
-        const UFormField = (0, import_vue7.resolveComponent)("UFormField");
-        const USwitch = (0, import_vue7.resolveComponent)("USwitch");
-        return (0, import_vue7.h)(
+        const UFormField = (0, import_vue8.resolveComponent)("UFormField");
+        const USwitch = (0, import_vue8.resolveComponent)("USwitch");
+        return (0, import_vue8.h)(
           "div",
           {},
-          (0, import_vue7.h)(
+          (0, import_vue8.h)(
             UFormField,
             {
               label: control.value.label,
@@ -327,10 +357,10 @@ function createNuxtUiBooleanControl(theme) {
               error: errorMessage.value
             },
             {
-              default: () => (0, import_vue7.h)(
+              default: () => (0, import_vue8.h)(
                 "div",
                 { class: theme.flexBetween },
-                (0, import_vue7.h)(USwitch, {
+                (0, import_vue8.h)(USwitch, {
                   modelValue: modelValue.value,
                   disabled: !control.value.enabled,
                   "aria-invalid": Boolean(errorMessage.value),
@@ -348,8 +378,8 @@ function createNuxtUiBooleanControl(theme) {
 }
 
 // src/renderers/controls/NuxtUiEnumControl.ts
-var import_vue8 = require("@jsonforms/vue");
-var import_vue9 = require("vue");
+var import_vue9 = require("@jsonforms/vue");
+var import_vue10 = require("vue");
 function schemaEnumOptions(schema) {
   if (!schema) return [];
   if (Array.isArray(schema.enum)) {
@@ -369,27 +399,27 @@ function schemaEnumOptions(schema) {
   }
   return out;
 }
-var NuxtUiEnumControl = (0, import_vue9.defineComponent)({
+var NuxtUiEnumControl = (0, import_vue10.defineComponent)({
   name: "NuxtUiEnumControl",
-  props: (0, import_vue8.rendererProps)(),
+  props: (0, import_vue9.rendererProps)(),
   setup(props) {
-    const { control, handleChange } = (0, import_vue8.useJsonFormsControl)(
+    const { control, handleChange } = (0, import_vue9.useJsonFormsControl)(
       props
     );
-    const errorMessage = (0, import_vue9.computed)(() => trimmedOrUndefined(control.value.errors));
-    const options = (0, import_vue9.computed)(() => schemaEnumOptions(control.value.schema));
-    const selectedValue = (0, import_vue9.computed)({
+    const errorMessage = (0, import_vue10.computed)(() => trimmedOrUndefined(control.value.errors));
+    const options = (0, import_vue10.computed)(() => schemaEnumOptions(control.value.schema));
+    const selectedValue = (0, import_vue10.computed)({
       get: () => control.value.data,
       set: (v) => handleChange(control.value.path, v)
     });
     return () => {
       if (!control.value.visible) return null;
-      const UFormField = (0, import_vue9.resolveComponent)("UFormField");
-      const USelectMenu = (0, import_vue9.resolveComponent)("USelectMenu");
-      return (0, import_vue9.h)(
+      const UFormField = (0, import_vue10.resolveComponent)("UFormField");
+      const USelectMenu = (0, import_vue10.resolveComponent)("USelectMenu");
+      return (0, import_vue10.h)(
         "div",
         {},
-        (0, import_vue9.h)(
+        (0, import_vue10.h)(
           UFormField,
           {
             label: control.value.label,
@@ -398,7 +428,7 @@ var NuxtUiEnumControl = (0, import_vue9.defineComponent)({
             error: errorMessage.value
           },
           {
-            default: () => (0, import_vue9.h)(USelectMenu, {
+            default: () => (0, import_vue10.h)(USelectMenu, {
               modelValue: selectedValue.value,
               items: options.value,
               valueKey: "value",
@@ -419,17 +449,17 @@ var NuxtUiEnumControl = (0, import_vue9.defineComponent)({
 });
 
 // src/renderers/controls/NuxtUiIntegerControl.ts
-var import_vue10 = require("@jsonforms/vue");
-var import_vue11 = require("vue");
-var NuxtUiIntegerControl = (0, import_vue11.defineComponent)({
+var import_vue11 = require("@jsonforms/vue");
+var import_vue12 = require("vue");
+var NuxtUiIntegerControl = (0, import_vue12.defineComponent)({
   name: "NuxtUiIntegerControl",
-  props: (0, import_vue10.rendererProps)(),
+  props: (0, import_vue11.rendererProps)(),
   setup(props) {
-    const { control, handleChange } = (0, import_vue10.useJsonFormsControl)(
+    const { control, handleChange } = (0, import_vue11.useJsonFormsControl)(
       props
     );
-    const errorMessage = (0, import_vue11.computed)(() => trimmedOrUndefined(control.value.errors));
-    const modelValue = (0, import_vue11.computed)(() => {
+    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);
     });
@@ -444,12 +474,12 @@ var NuxtUiIntegerControl = (0, import_vue11.defineComponent)({
     }
     return () => {
       if (!control.value.visible) return null;
-      const UFormField = (0, import_vue11.resolveComponent)("UFormField");
-      const UInput = (0, import_vue11.resolveComponent)("UInput");
-      return (0, import_vue11.h)(
+      const UFormField = (0, import_vue12.resolveComponent)("UFormField");
+      const UInput = (0, import_vue12.resolveComponent)("UInput");
+      return (0, import_vue12.h)(
         "div",
         {},
-        (0, import_vue11.h)(
+        (0, import_vue12.h)(
           UFormField,
           {
             label: control.value.label,
@@ -458,7 +488,7 @@ var NuxtUiIntegerControl = (0, import_vue11.defineComponent)({
             error: errorMessage.value
           },
           {
-            default: () => (0, import_vue11.h)(UInput, {
+            default: () => (0, import_vue12.h)(UInput, {
               type: "number",
               inputmode: "numeric",
               step: "1",
@@ -476,8 +506,8 @@ var NuxtUiIntegerControl = (0, import_vue11.defineComponent)({
 });
 
 // src/renderers/controls/NuxtUiMultiEnumControl.ts
-var import_vue12 = require("@jsonforms/vue");
-var import_vue13 = require("vue");
+var import_vue13 = require("@jsonforms/vue");
+var import_vue14 = require("vue");
 function schemaEnumOptions2(schema) {
   if (!schema) return [];
   if (Array.isArray(schema.enum)) {
@@ -503,29 +533,29 @@ function arrayItemsSchema(schema) {
   if (typeof items !== "object" || items === null) return void 0;
   return items;
 }
-var NuxtUiMultiEnumControl = (0, import_vue13.defineComponent)({
+var NuxtUiMultiEnumControl = (0, import_vue14.defineComponent)({
   name: "NuxtUiMultiEnumControl",
-  props: (0, import_vue12.rendererProps)(),
+  props: (0, import_vue13.rendererProps)(),
   setup(props) {
-    const { control, handleChange } = (0, import_vue12.useJsonFormsControl)(
+    const { control, handleChange } = (0, import_vue13.useJsonFormsControl)(
       props
     );
-    const errorMessage = (0, import_vue13.computed)(() => trimmedOrUndefined(control.value.errors));
-    const options = (0, import_vue13.computed)(
+    const errorMessage = (0, import_vue14.computed)(() => trimmedOrUndefined(control.value.errors));
+    const options = (0, import_vue14.computed)(
       () => schemaEnumOptions2(arrayItemsSchema(control.value.schema))
     );
-    const selectedValues = (0, import_vue13.computed)({
+    const selectedValues = (0, import_vue14.computed)({
       get: () => Array.isArray(control.value.data) ? control.value.data : [],
       set: (v) => handleChange(control.value.path, v)
     });
     return () => {
       if (!control.value.visible) return null;
-      const UFormField = (0, import_vue13.resolveComponent)("UFormField");
-      const USelectMenu = (0, import_vue13.resolveComponent)("USelectMenu");
-      return (0, import_vue13.h)(
+      const UFormField = (0, import_vue14.resolveComponent)("UFormField");
+      const USelectMenu = (0, import_vue14.resolveComponent)("USelectMenu");
+      return (0, import_vue14.h)(
         "div",
         {},
-        (0, import_vue13.h)(
+        (0, import_vue14.h)(
           UFormField,
           {
             label: control.value.label,
@@ -534,7 +564,7 @@ var NuxtUiMultiEnumControl = (0, import_vue13.defineComponent)({
             error: errorMessage.value
           },
           {
-            default: () => (0, import_vue13.h)(USelectMenu, {
+            default: () => (0, import_vue14.h)(USelectMenu, {
               multiple: true,
               modelValue: selectedValues.value,
               items: options.value,
@@ -556,17 +586,17 @@ var NuxtUiMultiEnumControl = (0, import_vue13.defineComponent)({
 });
 
 // src/renderers/controls/NuxtUiNumberControl.ts
-var import_vue14 = require("@jsonforms/vue");
-var import_vue15 = require("vue");
-var NuxtUiNumberControl = (0, import_vue15.defineComponent)({
+var import_vue15 = require("@jsonforms/vue");
+var import_vue16 = require("vue");
+var NuxtUiNumberControl = (0, import_vue16.defineComponent)({
   name: "NuxtUiNumberControl",
-  props: (0, import_vue14.rendererProps)(),
+  props: (0, import_vue15.rendererProps)(),
   setup(props) {
-    const { control, handleChange } = (0, import_vue14.useJsonFormsControl)(
+    const { control, handleChange } = (0, import_vue15.useJsonFormsControl)(
       props
     );
-    const errorMessage = (0, import_vue15.computed)(() => trimmedOrUndefined(control.value.errors));
-    const modelValue = (0, import_vue15.computed)(() => {
+    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);
     });
@@ -581,12 +611,12 @@ var NuxtUiNumberControl = (0, import_vue15.defineComponent)({
     }
     return () => {
       if (!control.value.visible) return null;
-      const UFormField = (0, import_vue15.resolveComponent)("UFormField");
-      const UInput = (0, import_vue15.resolveComponent)("UInput");
-      return (0, import_vue15.h)(
+      const UFormField = (0, import_vue16.resolveComponent)("UFormField");
+      const UInput = (0, import_vue16.resolveComponent)("UInput");
+      return (0, import_vue16.h)(
         "div",
         {},
-        (0, import_vue15.h)(
+        (0, import_vue16.h)(
           UFormField,
           {
             label: control.value.label,
@@ -595,7 +625,7 @@ var NuxtUiNumberControl = (0, import_vue15.defineComponent)({
             error: errorMessage.value
           },
           {
-            default: () => (0, import_vue15.h)(UInput, {
+            default: () => (0, import_vue16.h)(UInput, {
               type: "number",
               inputmode: "decimal",
               modelValue: modelValue.value,
@@ -612,27 +642,27 @@ var NuxtUiNumberControl = (0, import_vue15.defineComponent)({
 });
 
 // src/renderers/controls/NuxtUiPasswordControl.ts
-var import_vue16 = require("@jsonforms/vue");
-var import_vue17 = require("vue");
-var NuxtUiPasswordControl = (0, import_vue17.defineComponent)({
+var import_vue17 = require("@jsonforms/vue");
+var import_vue18 = require("vue");
+var NuxtUiPasswordControl = (0, import_vue18.defineComponent)({
   name: "NuxtUiPasswordControl",
-  props: (0, import_vue16.rendererProps)(),
+  props: (0, import_vue17.rendererProps)(),
   setup(props) {
-    const { control, handleChange } = (0, import_vue16.useJsonFormsControl)(
+    const { control, handleChange } = (0, import_vue17.useJsonFormsControl)(
       props
     );
-    const errorMessage = (0, import_vue17.computed)(() => trimmedOrUndefined(control.value.errors));
-    const showPassword = (0, import_vue17.ref)(false);
-    const inputType = (0, import_vue17.computed)(() => showPassword.value ? "text" : "password");
+    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");
     return () => {
       if (!control.value.visible) return null;
-      const UFormField = (0, import_vue17.resolveComponent)("UFormField");
-      const UInput = (0, import_vue17.resolveComponent)("UInput");
-      const UButton = (0, import_vue17.resolveComponent)("UButton");
-      return (0, import_vue17.h)(
+      const UFormField = (0, import_vue18.resolveComponent)("UFormField");
+      const UInput = (0, import_vue18.resolveComponent)("UInput");
+      const UButton = (0, import_vue18.resolveComponent)("UButton");
+      return (0, import_vue18.h)(
         "div",
         {},
-        (0, import_vue17.h)(
+        (0, import_vue18.h)(
           UFormField,
           {
             label: control.value.label,
@@ -641,7 +671,7 @@ var NuxtUiPasswordControl = (0, import_vue17.defineComponent)({
             error: errorMessage.value
           },
           {
-            default: () => (0, import_vue17.h)(
+            default: () => (0, import_vue18.h)(
               UInput,
               {
                 modelValue: control.value.data ?? "",
@@ -654,7 +684,7 @@ var NuxtUiPasswordControl = (0, import_vue17.defineComponent)({
                 "onUpdate:modelValue": (v) => handleChange(control.value.path, v)
               },
               {
-                trailing: () => (0, import_vue17.h)(UButton, {
+                trailing: () => (0, import_vue18.h)(UButton, {
                   type: "button",
                   color: "neutral",
                   variant: "ghost",
@@ -677,66 +707,74 @@ var NuxtUiPasswordControl = (0, import_vue17.defineComponent)({
 });
 
 // src/renderers/controls/NuxtUiStringControl.ts
-var import_vue18 = require("@jsonforms/vue");
-var import_vue19 = require("vue");
-var NuxtUiStringControl = (0, import_vue19.defineComponent)({
-  name: "NuxtUiStringControl",
-  props: (0, import_vue18.rendererProps)(),
-  setup(props) {
-    const { control, handleChange } = (0, import_vue18.useJsonFormsControl)(
-      props
-    );
-    const errorMessage = (0, import_vue19.computed)(() => trimmedOrUndefined(control.value.errors));
-    return () => {
-      if (!control.value.visible) return null;
-      const UFormField = (0, import_vue19.resolveComponent)("UFormField");
-      const UInput = (0, import_vue19.resolveComponent)("UInput");
-      return (0, import_vue19.h)(
-        "div",
-        {},
-        (0, import_vue19.h)(
-          UFormField,
-          {
+var import_vue19 = require("@jsonforms/vue");
+var import_vue20 = require("vue");
+function createNuxtUiStringControl(docsUrl) {
+  return (0, import_vue20.defineComponent)({
+    name: "NuxtUiStringControl",
+    props: (0, import_vue19.rendererProps)(),
+    setup(props) {
+      const { control, handleChange } = (0, import_vue19.useJsonFormsControl)(
+        props
+      );
+      const errorMessage = (0, import_vue20.computed)(
+        () => trimmedOrUndefined(control.value.errors)
+      );
+      return () => {
+        if (!control.value.visible) return null;
+        const UFormField = (0, import_vue20.resolveComponent)("UFormField");
+        const UInput = (0, import_vue20.resolveComponent)("UInput");
+        const slots = {
+          default: () => (0, import_vue20.h)(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,
+          import_vue20.resolveComponent
+        );
+        if (hintSlot) slots.hint = hintSlot;
+        return (0, import_vue20.h)(
+          "div",
+          {},
+          (0, import_vue20.h)(UFormField, {
             label: control.value.label,
             description: controlDescription(control.value),
             required: control.value.required,
             error: errorMessage.value
-          },
-          {
-            default: () => (0, import_vue19.h)(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
-var import_vue20 = require("@jsonforms/vue");
-var import_vue21 = require("vue");
-var NuxtUiTextareaControl = (0, import_vue21.defineComponent)({
+var import_vue21 = require("@jsonforms/vue");
+var import_vue22 = require("vue");
+var NuxtUiTextareaControl = (0, import_vue22.defineComponent)({
   name: "NuxtUiTextareaControl",
-  props: (0, import_vue20.rendererProps)(),
+  props: (0, import_vue21.rendererProps)(),
   setup(props) {
-    const { control, handleChange } = (0, import_vue20.useJsonFormsControl)(
+    const { control, handleChange } = (0, import_vue21.useJsonFormsControl)(
       props
     );
-    const errorMessage = (0, import_vue21.computed)(() => trimmedOrUndefined(control.value.errors));
+    const errorMessage = (0, import_vue22.computed)(() => trimmedOrUndefined(control.value.errors));
     return () => {
       if (!control.value.visible) return null;
-      const UFormField = (0, import_vue21.resolveComponent)("UFormField");
-      const UTextarea = (0, import_vue21.resolveComponent)("UTextarea");
-      return (0, import_vue21.h)(
+      const UFormField = (0, import_vue22.resolveComponent)("UFormField");
+      const UTextarea = (0, import_vue22.resolveComponent)("UTextarea");
+      return (0, import_vue22.h)(
         "div",
         {},
-        (0, import_vue21.h)(
+        (0, import_vue22.h)(
           UFormField,
           {
             label: control.value.label,
@@ -745,7 +783,7 @@ var NuxtUiTextareaControl = (0, import_vue21.defineComponent)({
             error: errorMessage.value
           },
           {
-            default: () => (0, import_vue21.h)(UTextarea, {
+            default: () => (0, import_vue22.h)(UTextarea, {
               modelValue: control.value.data ?? "",
               class: "w-full",
               disabled: !control.value.enabled,
@@ -762,41 +800,41 @@ var NuxtUiTextareaControl = (0, import_vue21.defineComponent)({
 });
 
 // src/renderers/layouts/NuxtUiCategorizationRenderer.ts
-var import_vue22 = require("@jsonforms/vue");
-var import_vue23 = require("vue");
+var import_vue23 = require("@jsonforms/vue");
+var import_vue24 = require("vue");
 function createNuxtUiCategorizationRenderer(theme) {
-  return (0, import_vue23.defineComponent)({
+  return (0, import_vue24.defineComponent)({
     name: "NuxtUiCategorizationRenderer",
-    components: { DispatchRenderer: import_vue22.DispatchRenderer },
-    props: (0, import_vue22.rendererProps)(),
+    components: { DispatchRenderer: import_vue23.DispatchRenderer },
+    props: (0, import_vue23.rendererProps)(),
     setup(props) {
-      const { layout, categories } = (0, import_vue22.useJsonFormsCategorization)(
+      const { layout, categories } = (0, import_vue23.useJsonFormsCategorization)(
         props
       );
       return () => {
         if (!layout.value.visible) return null;
-        return (0, import_vue23.h)(
+        return (0, import_vue24.h)(
           "div",
           { class: theme.layoutVerticalWide },
           categories.map((categoryRef, catIndex) => {
             const category = categoryRef.value;
             const elements = category.uischema.elements ?? [];
-            return (0, import_vue23.h)(
+            return (0, import_vue24.h)(
               "div",
               {
                 key: `${layout.value.path}-cat-${catIndex}`,
                 class: theme.layoutVertical
               },
               [
-                category.label ? (0, import_vue23.h)("div", { class: theme.labelSection }, category.label) : null,
-                (0, import_vue23.h)(
+                category.label ? (0, import_vue24.h)("div", { class: theme.labelSection }, category.label) : null,
+                (0, import_vue24.h)(
                   "div",
                   { class: theme.layoutVertical },
                   elements.map(
-                    (element, index) => (0, import_vue23.h)(
+                    (element, index) => (0, import_vue24.h)(
                       "div",
                       { key: `${category.path}-${index}` },
-                      (0, import_vue23.h)(import_vue22.DispatchRenderer, {
+                      (0, import_vue24.h)(import_vue23.DispatchRenderer, {
                         schema: category.schema,
                         uischema: element,
                         path: category.path,
@@ -817,30 +855,30 @@ function createNuxtUiCategorizationRenderer(theme) {
 }
 
 // src/renderers/layouts/NuxtUiCategoryRenderer.ts
-var import_vue24 = require("@jsonforms/vue");
-var import_vue25 = require("vue");
+var import_vue25 = require("@jsonforms/vue");
+var import_vue26 = require("vue");
 function createNuxtUiCategoryRenderer(theme) {
-  return (0, import_vue25.defineComponent)({
+  return (0, import_vue26.defineComponent)({
     name: "NuxtUiCategoryRenderer",
-    components: { DispatchRenderer: import_vue24.DispatchRenderer },
-    props: (0, import_vue24.rendererProps)(),
+    components: { DispatchRenderer: import_vue25.DispatchRenderer },
+    props: (0, import_vue25.rendererProps)(),
     setup(props) {
-      const { layout } = (0, import_vue24.useJsonFormsLayout)(
+      const { layout } = (0, import_vue25.useJsonFormsLayout)(
         props
       );
       return () => {
         if (!layout.value.visible) return null;
         const elements = layout.value.uischema.elements ?? [];
-        return (0, import_vue25.h)("div", { class: theme.layoutVertical }, [
-          layout.value.label ? (0, import_vue25.h)("div", { class: theme.labelSection }, layout.value.label) : null,
-          (0, import_vue25.h)(
+        return (0, import_vue26.h)("div", { class: theme.layoutVertical }, [
+          layout.value.label ? (0, import_vue26.h)("div", { class: theme.labelSection }, layout.value.label) : null,
+          (0, import_vue26.h)(
             "div",
             { class: theme.layoutVertical },
             elements.map(
-              (element, index) => (0, import_vue25.h)(
+              (element, index) => (0, import_vue26.h)(
                 "div",
                 { key: `${layout.value.path}-${index}` },
-                (0, import_vue25.h)(import_vue24.DispatchRenderer, {
+                (0, import_vue26.h)(import_vue25.DispatchRenderer, {
                   schema: layout.value.schema,
                   uischema: element,
                   path: layout.value.path,
@@ -858,15 +896,15 @@ function createNuxtUiCategoryRenderer(theme) {
 }
 
 // src/renderers/layouts/NuxtUiGroupRenderer.ts
-var import_vue26 = require("@jsonforms/vue");
-var import_vue27 = require("vue");
+var import_vue27 = require("@jsonforms/vue");
+var import_vue28 = require("vue");
 function createNuxtUiGroupRenderer(theme) {
-  return (0, import_vue27.defineComponent)({
+  return (0, import_vue28.defineComponent)({
     name: "NuxtUiGroupRenderer",
-    components: { DispatchRenderer: import_vue26.DispatchRenderer },
-    props: (0, import_vue26.rendererProps)(),
+    components: { DispatchRenderer: import_vue27.DispatchRenderer },
+    props: (0, import_vue27.rendererProps)(),
     setup(props) {
-      const { layout } = (0, import_vue26.useJsonFormsLayout)(
+      const { layout } = (0, import_vue27.useJsonFormsLayout)(
         props
       );
       return () => {
@@ -874,19 +912,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 (0, import_vue27.h)(
+        return (0, import_vue28.h)(
           "div",
           { class: containerClass },
           [
-            layout.value.label ? (0, import_vue27.h)("div", { class: theme.labelSectionSpaced }, layout.value.label) : null,
-            (0, import_vue27.h)(
+            layout.value.label ? (0, import_vue28.h)("div", { class: theme.labelSectionSpaced }, layout.value.label) : null,
+            (0, import_vue28.h)(
               "div",
               { class: theme.layoutVertical },
               elements.map(
-                (element, index) => (0, import_vue27.h)(
+                (element, index) => (0, import_vue28.h)(
                   "div",
                   { key: `${layout.value.path}-${index}` },
-                  (0, import_vue27.h)(import_vue26.DispatchRenderer, {
+                  (0, import_vue28.h)(import_vue27.DispatchRenderer, {
                     schema: layout.value.schema,
                     uischema: element,
                     path: layout.value.path,
@@ -905,31 +943,31 @@ function createNuxtUiGroupRenderer(theme) {
 }
 
 // src/renderers/layouts/NuxtUiHorizontalLayoutRenderer.ts
-var import_vue28 = require("@jsonforms/vue");
-var import_vue29 = require("vue");
+var import_vue29 = require("@jsonforms/vue");
+var import_vue30 = require("vue");
 function createNuxtUiHorizontalLayoutRenderer(theme) {
-  return (0, import_vue29.defineComponent)({
+  return (0, import_vue30.defineComponent)({
     name: "NuxtUiHorizontalLayoutRenderer",
-    components: { DispatchRenderer: import_vue28.DispatchRenderer },
-    props: (0, import_vue28.rendererProps)(),
+    components: { DispatchRenderer: import_vue29.DispatchRenderer },
+    props: (0, import_vue29.rendererProps)(),
     setup(props) {
-      const { layout } = (0, import_vue28.useJsonFormsLayout)(
+      const { layout } = (0, import_vue29.useJsonFormsLayout)(
         props
       );
       return () => {
         if (!layout.value.visible) return null;
         const elements = layout.value.uischema.elements ?? [];
-        return (0, import_vue29.h)(
+        return (0, import_vue30.h)(
           "div",
           { class: theme.layoutHorizontal },
           elements.map(
-            (element, index) => (0, import_vue29.h)(
+            (element, index) => (0, import_vue30.h)(
               "div",
               {
                 key: `${layout.value.path}-${index}`,
                 class: theme.layoutHorizontalItem
               },
-              (0, import_vue29.h)(import_vue28.DispatchRenderer, {
+              (0, import_vue30.h)(import_vue29.DispatchRenderer, {
                 schema: layout.value.schema,
                 uischema: element,
                 path: layout.value.path,
@@ -946,47 +984,47 @@ function createNuxtUiHorizontalLayoutRenderer(theme) {
 }
 
 // src/renderers/layouts/NuxtUiLabelRenderer.ts
-var import_vue30 = require("@jsonforms/vue");
-var import_vue31 = require("vue");
+var import_vue31 = require("@jsonforms/vue");
+var import_vue32 = require("vue");
 function createNuxtUiLabelRenderer(theme) {
-  return (0, import_vue31.defineComponent)({
+  return (0, import_vue32.defineComponent)({
     name: "NuxtUiLabelRenderer",
-    props: (0, import_vue30.rendererProps)(),
+    props: (0, import_vue31.rendererProps)(),
     setup(props) {
-      const { label } = (0, import_vue30.useJsonFormsLabel)(
+      const { label } = (0, import_vue31.useJsonFormsLabel)(
         props
       );
       return () => {
         if (!label.value.visible) return null;
-        return (0, import_vue31.h)("div", { class: theme.textLabel }, label.value.text);
+        return (0, import_vue32.h)("div", { class: theme.textLabel }, label.value.text);
       };
     }
   });
 }
 
 // src/renderers/layouts/NuxtUiVerticalLayoutRenderer.ts
-var import_vue32 = require("@jsonforms/vue");
-var import_vue33 = require("vue");
+var import_vue33 = require("@jsonforms/vue");
+var import_vue34 = require("vue");
 function createNuxtUiVerticalLayoutRenderer(theme) {
-  return (0, import_vue33.defineComponent)({
+  return (0, import_vue34.defineComponent)({
     name: "NuxtUiVerticalLayoutRenderer",
-    components: { DispatchRenderer: import_vue32.DispatchRenderer },
-    props: (0, import_vue32.rendererProps)(),
+    components: { DispatchRenderer: import_vue33.DispatchRenderer },
+    props: (0, import_vue33.rendererProps)(),
     setup(props) {
-      const { layout } = (0, import_vue32.useJsonFormsLayout)(
+      const { layout } = (0, import_vue33.useJsonFormsLayout)(
         props
       );
       return () => {
         if (!layout.value.visible) return null;
         const elements = layout.value.uischema.elements ?? [];
-        return (0, import_vue33.h)(
+        return (0, import_vue34.h)(
           "div",
           { class: theme.layoutVertical },
           elements.map(
-            (element, index) => (0, import_vue33.h)(
+            (element, index) => (0, import_vue34.h)(
               "div",
               { key: `${layout.value.path}-${index}` },
-              (0, import_vue33.h)(import_vue32.DispatchRenderer, {
+              (0, import_vue34.h)(import_vue33.DispatchRenderer, {
                 schema: layout.value.schema,
                 uischema: element,
                 path: layout.value.path,
@@ -1074,81 +1112,82 @@ var isOneOfEnumControl = (uischema, schema, context) => {
 };
 function createNuxtUiRenderers(options) {
   const theme = mergeTheme(options?.theme);
+  const docsUrl = options?.docsUrl;
   return [
     // Layouts
     {
       tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("VerticalLayout")),
-      renderer: (0, import_vue34.markRaw)(createNuxtUiVerticalLayoutRenderer(theme))
+      renderer: (0, import_vue35.markRaw)(createNuxtUiVerticalLayoutRenderer(theme))
     },
     {
       tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("HorizontalLayout")),
-      renderer: (0, import_vue34.markRaw)(createNuxtUiHorizontalLayoutRenderer(theme))
+      renderer: (0, import_vue35.markRaw)(createNuxtUiHorizontalLayoutRenderer(theme))
     },
     {
       tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("Group")),
-      renderer: (0, import_vue34.markRaw)(createNuxtUiGroupRenderer(theme))
+      renderer: (0, import_vue35.markRaw)(createNuxtUiGroupRenderer(theme))
     },
     {
       tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("Categorization")),
-      renderer: (0, import_vue34.markRaw)(createNuxtUiCategorizationRenderer(theme))
+      renderer: (0, import_vue35.markRaw)(createNuxtUiCategorizationRenderer(theme))
     },
     {
       tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("Category")),
-      renderer: (0, import_vue34.markRaw)(createNuxtUiCategoryRenderer(theme))
+      renderer: (0, import_vue35.markRaw)(createNuxtUiCategoryRenderer(theme))
     },
     {
       tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("Label")),
-      renderer: (0, import_vue34.markRaw)(createNuxtUiLabelRenderer(theme))
+      renderer: (0, import_vue35.markRaw)(createNuxtUiLabelRenderer(theme))
     },
     // Complex schemas
     {
       tester: (0, import_core3.rankWith)(RANK, (0, import_core3.schemaTypeIs)("array")),
-      renderer: (0, import_vue34.markRaw)(createNuxtUiArrayListRenderer(theme))
+      renderer: (0, import_vue35.markRaw)(createNuxtUiArrayListRenderer(theme))
     },
     {
       tester: (0, import_core3.rankWith)(RANK, import_core3.isObjectControl),
-      renderer: (0, import_vue34.markRaw)(NuxtUiObjectRenderer)
+      renderer: (0, import_vue35.markRaw)(NuxtUiObjectRenderer)
     },
     // Primitive controls
     {
       tester: (0, import_core3.rankWith)(RANK, import_core3.isMultiLineControl),
-      renderer: (0, import_vue34.markRaw)(NuxtUiTextareaControl)
+      renderer: (0, import_vue35.markRaw)(NuxtUiTextareaControl)
     },
     {
       tester: (0, import_core3.rankWith)(RANK, import_core3.isNumberControl),
-      renderer: (0, import_vue34.markRaw)(NuxtUiNumberControl)
+      renderer: (0, import_vue35.markRaw)(NuxtUiNumberControl)
     },
     {
       tester: (0, import_core3.rankWith)(RANK, import_core3.isIntegerControl),
-      renderer: (0, import_vue34.markRaw)(NuxtUiIntegerControl)
+      renderer: (0, import_vue35.markRaw)(NuxtUiIntegerControl)
     },
     {
       tester: (0, import_core3.rankWith)(RANK, import_core3.isBooleanControl),
-      renderer: (0, import_vue34.markRaw)(createNuxtUiBooleanControl(theme))
+      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),
-      renderer: (0, import_vue34.markRaw)(NuxtUiMultiEnumControl)
+      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),
-      renderer: (0, import_vue34.markRaw)(NuxtUiEnumControl)
+      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),
-      renderer: (0, import_vue34.markRaw)(NuxtUiEnumControl)
+      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"))),
-      renderer: (0, import_vue34.markRaw)(NuxtUiPasswordControl)
+      renderer: (0, import_vue35.markRaw)(NuxtUiPasswordControl)
     },
     {
       tester: (0, import_core3.rankWith)(RANK, import_core3.isStringControl),
-      renderer: (0, import_vue34.markRaw)(NuxtUiStringControl)
+      renderer: (0, import_vue35.markRaw)(createNuxtUiStringControl(docsUrl))
     }
   ];
 }
@@ -1158,6 +1197,7 @@ var nuxtUiRenderers = createNuxtUiRenderers();
   controlDescription,
   createNuxtUiRenderers,
   defaultTheme,
+  getDocsPathFromSchema,
   mergeTheme,
   nuxtUiRenderers
 });