jsonforms-nuxt-ui-renderers 0.1.1

package/dist/index.js

@@ -0,0 +1,895 @@
+// src/nuxtUiRenderers.ts
+import {
+  isBooleanControl,
+  isEnumControl,
+  isIntegerControl,
+  isMultiLineControl,
+  isNumberControl,
+  isObjectControl,
+  isStringControl,
+  rankWith,
+  schemaTypeIs,
+  uiTypeIs
+} from "@jsonforms/core";
+import { markRaw } from "vue";
+
+// src/renderers/complex/NuxtUiArrayListRenderer.ts
+import {
+  Resolve,
+  composePaths,
+  createDefaultValue,
+  findUISchema,
+  getFirstPrimitiveProp
+} from "@jsonforms/core";
+import { DispatchRenderer, rendererProps, useJsonFormsArrayControl } from "@jsonforms/vue";
+import { computed as computed2, defineComponent, h, resolveComponent } from "vue";
+
+// src/renderers/util.ts
+import { computed } from "vue";
+function trimmedOrUndefined(input) {
+  const v = input?.trim();
+  return v ? v : void 0;
+}
+
+// src/renderers/complex/NuxtUiArrayListRenderer.ts
+var NuxtUiArrayListRenderer = defineComponent({
+  name: "NuxtUiArrayListRenderer",
+  components: { DispatchRenderer },
+  props: rendererProps(),
+  setup(props) {
+    const { control, addItem, removeItems, moveUp, moveDown } = useJsonFormsArrayControl(
+      props
+    );
+    const errorMessage = computed2(() => trimmedOrUndefined(control.value.errors));
+    const items = computed2(
+      () => Array.isArray(control.value.data) ? control.value.data : []
+    );
+    const arraySchema = computed2(() => {
+      try {
+        return Resolve.schema(
+          props.schema,
+          control.value.uischema.scope,
+          control.value.rootSchema
+        );
+      } catch {
+        return void 0;
+      }
+    });
+    const maxItemsReached = computed2(() => {
+      const max = arraySchema.value?.maxItems;
+      return typeof max === "number" ? items.value.length >= max : false;
+    });
+    const minItemsReached = computed2(() => {
+      const min = arraySchema.value?.minItems;
+      return typeof min === "number" ? items.value.length <= min : false;
+    });
+    const childUiSchema = computed2(
+      () => findUISchema(
+        control.value.uischemas,
+        control.value.schema,
+        control.value.uischema.scope,
+        control.value.path,
+        void 0,
+        control.value.uischema,
+        control.value.rootSchema
+      )
+    );
+    function childLabelForIndex(index) {
+      const childLabelProp = getChildLabelPropFromUiSchemaOptions(control.value.uischema.options) ?? getFirstPrimitiveProp(control.value.schema);
+      if (!childLabelProp) return `${index}`;
+      const labelValue = Resolve.data(
+        control.value.data,
+        composePaths(`${index}`, childLabelProp)
+      );
+      if (labelValue === void 0 || labelValue === null || Number.isNaN(labelValue)) {
+        return "";
+      }
+      return String(labelValue);
+    }
+    function getChildLabelPropFromUiSchemaOptions(options) {
+      if (!options || typeof options !== "object") return void 0;
+      const value = options.childLabelProp;
+      return typeof value === "string" ? value : void 0;
+    }
+    function addButtonClick() {
+      addItem(
+        control.value.path,
+        createDefaultValue(control.value.schema, control.value.rootSchema)
+      )();
+    }
+    return () => {
+      if (!control.value.visible) return null;
+      const UFormField = resolveComponent("UFormField");
+      const UButton = resolveComponent("UButton");
+      return h(
+        "div",
+        {},
+        h(
+          UFormField,
+          {
+            label: control.value.label,
+            description: control.value.description,
+            required: control.value.required,
+            error: errorMessage.value
+          },
+          {
+            default: () => h("div", { class: "flex flex-col gap-3" }, [
+              h("div", { class: "flex items-center justify-between gap-3" }, [
+                h(
+                  "div",
+                  { class: "text-xs text-gray-500" },
+                  `${items.value.length} items`
+                ),
+                h(
+                  UButton,
+                  {
+                    type: "button",
+                    size: "xs",
+                    variant: "soft",
+                    color: "neutral",
+                    disabled: !control.value.enabled || maxItemsReached.value,
+                    onClick: addButtonClick
+                  },
+                  { default: () => "Add" }
+                )
+              ]),
+              items.value.length === 0 ? h(
+                "div",
+                { class: "text-sm text-gray-500" },
+                "No items."
+              ) : null,
+              ...items.value.map(
+                (_item, index) => h(
+                  "div",
+                  { key: `${control.value.path}-${index}`, class: "rounded border p-3" },
+                  [
+                    h(
+                      "div",
+                      { class: "mb-3 flex items-start justify-between gap-3" },
+                      [
+                        h("div", { class: "min-w-0" }, [
+                          h(
+                            "div",
+                            {
+                              class: "text-xs font-semibold text-gray-700 dark:text-gray-200"
+                            },
+                            [
+                              `Item ${index + 1}`,
+                              childLabelForIndex(index) ? h(
+                                "span",
+                                {
+                                  class: "font-normal text-gray-500"
+                                },
+                                ` \u2014 ${childLabelForIndex(index)}`
+                              ) : null
+                            ]
+                          )
+                        ]),
+                        h("div", { class: "flex flex-none items-center gap-1" }, [
+                          h(
+                            UButton,
+                            {
+                              type: "button",
+                              size: "xs",
+                              variant: "ghost",
+                              color: "neutral",
+                              disabled: !control.value.enabled || index === 0,
+                              onClick: () => moveUp?.(control.value.path, index)()
+                            },
+                            { default: () => "Up" }
+                          ),
+                          h(
+                            UButton,
+                            {
+                              type: "button",
+                              size: "xs",
+                              variant: "ghost",
+                              color: "neutral",
+                              disabled: !control.value.enabled || index >= items.value.length - 1,
+                              onClick: () => moveDown?.(control.value.path, index)()
+                            },
+                            { default: () => "Down" }
+                          ),
+                          h(
+                            UButton,
+                            {
+                              type: "button",
+                              size: "xs",
+                              variant: "ghost",
+                              color: "error",
+                              disabled: !control.value.enabled || minItemsReached.value,
+                              onClick: () => removeItems?.(control.value.path, [index])()
+                            },
+                            { default: () => "Remove" }
+                          )
+                        ])
+                      ]
+                    ),
+                    h(DispatchRenderer, {
+                      schema: control.value.schema,
+                      uischema: childUiSchema.value,
+                      path: composePaths(control.value.path, `${index}`),
+                      enabled: control.value.enabled,
+                      renderers: control.value.renderers,
+                      cells: control.value.cells
+                    })
+                  ]
+                )
+              )
+            ])
+          }
+        )
+      );
+    };
+  }
+});
+
+// src/renderers/complex/NuxtUiObjectRenderer.ts
+import { Generate, findUISchema as findUISchema2 } from "@jsonforms/core";
+import {
+  DispatchRenderer as DispatchRenderer2,
+  rendererProps as rendererProps2,
+  useJsonFormsControlWithDetail
+} from "@jsonforms/vue";
+import { computed as computed3, defineComponent as defineComponent2, h as h2 } from "vue";
+var NuxtUiObjectRenderer = defineComponent2({
+  name: "NuxtUiObjectRenderer",
+  components: { DispatchRenderer: DispatchRenderer2 },
+  props: rendererProps2(),
+  setup(props) {
+    const { control } = useJsonFormsControlWithDetail(
+      props
+    );
+    const detailUiSchema = computed3(() => {
+      const uiSchemaGenerator = () => {
+        const uiSchema = Generate.uiSchema(
+          control.value.schema,
+          "Group",
+          void 0,
+          control.value.rootSchema
+        );
+        if (!control.value.path) {
+          uiSchema.type = "VerticalLayout";
+        } else {
+          ;
+          uiSchema.label = control.value.label;
+        }
+        return uiSchema;
+      };
+      return findUISchema2(
+        control.value.uischemas,
+        control.value.schema,
+        control.value.uischema.scope,
+        control.value.path,
+        uiSchemaGenerator,
+        control.value.uischema,
+        control.value.rootSchema
+      );
+    });
+    return () => {
+      if (!control.value.visible) return null;
+      return h2(DispatchRenderer2, {
+        visible: control.value.visible,
+        enabled: control.value.enabled,
+        schema: control.value.schema,
+        uischema: detailUiSchema.value,
+        path: control.value.path,
+        renderers: control.value.renderers,
+        cells: control.value.cells
+      });
+    };
+  }
+});
+
+// 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";
+var NuxtUiBooleanControl = defineComponent3({
+  name: "NuxtUiBooleanControl",
+  props: rendererProps3(),
+  setup(props) {
+    const { control, handleChange } = useJsonFormsControl(
+      props
+    );
+    const errorMessage = computed4(() => trimmedOrUndefined(control.value.errors));
+    const modelValue = computed4({
+      get: () => Boolean(control.value.data),
+      set: (v) => handleChange(control.value.path, v)
+    });
+    return () => {
+      if (!control.value.visible) return null;
+      const UFormField = resolveComponent2("UFormField");
+      const USwitch = resolveComponent2("USwitch");
+      return h3(
+        "div",
+        {},
+        h3(
+          UFormField,
+          {
+            label: control.value.label,
+            description: control.value.description,
+            required: control.value.required,
+            error: errorMessage.value
+          },
+          {
+            default: () => h3(
+              "div",
+              { class: "flex items-center justify-between gap-3" },
+              h3(USwitch, {
+                modelValue: modelValue.value,
+                disabled: !control.value.enabled,
+                "aria-invalid": Boolean(errorMessage.value),
+                "onUpdate:modelValue": (v) => {
+                  modelValue.value = v;
+                }
+              })
+            )
+          }
+        )
+      );
+    };
+  }
+});
+
+// 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";
+function schemaEnumOptions(schema) {
+  if (!schema) return [];
+  if (Array.isArray(schema.enum)) {
+    return schema.enum.map((v) => ({ label: String(v), value: v }));
+  }
+  const oneOf = schema.oneOf;
+  if (!Array.isArray(oneOf)) return [];
+  const out = [];
+  for (const entry of oneOf) {
+    if (typeof entry !== "object" || entry === null) continue;
+    const maybe = entry;
+    if (!("const" in maybe)) continue;
+    out.push({
+      value: maybe.const,
+      label: typeof maybe.title === "string" && maybe.title.trim() ? maybe.title : String(maybe.const)
+    });
+  }
+  return out;
+}
+var NuxtUiEnumControl = defineComponent4({
+  name: "NuxtUiEnumControl",
+  props: rendererProps4(),
+  setup(props) {
+    const { control, handleChange } = useJsonFormsControl2(
+      props
+    );
+    const errorMessage = computed5(() => trimmedOrUndefined(control.value.errors));
+    const options = computed5(() => schemaEnumOptions(control.value.schema));
+    const selectedValue = computed5({
+      get: () => control.value.data,
+      set: (v) => handleChange(control.value.path, v)
+    });
+    return () => {
+      if (!control.value.visible) return null;
+      const UFormField = resolveComponent3("UFormField");
+      const USelectMenu = resolveComponent3("USelectMenu");
+      return h4(
+        "div",
+        {},
+        h4(
+          UFormField,
+          {
+            label: control.value.label,
+            description: control.value.description,
+            required: control.value.required,
+            error: errorMessage.value
+          },
+          {
+            default: () => h4(USelectMenu, {
+              modelValue: selectedValue.value,
+              items: options.value,
+              valueKey: "value",
+              labelKey: "label",
+              disabled: !control.value.enabled,
+              color: errorMessage.value ? "error" : void 0,
+              "aria-invalid": Boolean(errorMessage.value),
+              placeholder: "Select...",
+              "onUpdate:modelValue": (v) => {
+                selectedValue.value = v;
+              }
+            })
+          }
+        )
+      );
+    };
+  }
+});
+
+// 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";
+var NuxtUiIntegerControl = defineComponent5({
+  name: "NuxtUiIntegerControl",
+  props: rendererProps5(),
+  setup(props) {
+    const { control, handleChange } = useJsonFormsControl3(
+      props
+    );
+    const errorMessage = computed6(() => trimmedOrUndefined(control.value.errors));
+    const modelValue = computed6(() => {
+      const v = control.value.data;
+      return v === null || v === void 0 ? "" : String(v);
+    });
+    function onUpdate(raw) {
+      const trimmed = raw.trim();
+      if (trimmed === "") {
+        handleChange(control.value.path, void 0);
+        return;
+      }
+      const parsed = Number.parseInt(trimmed, 10);
+      handleChange(control.value.path, Number.isFinite(parsed) ? parsed : void 0);
+    }
+    return () => {
+      if (!control.value.visible) return null;
+      const UFormField = resolveComponent4("UFormField");
+      const UInput = resolveComponent4("UInput");
+      return h5(
+        "div",
+        {},
+        h5(
+          UFormField,
+          {
+            label: control.value.label,
+            description: control.value.description,
+            required: control.value.required,
+            error: errorMessage.value
+          },
+          {
+            default: () => h5(UInput, {
+              type: "number",
+              inputmode: "numeric",
+              step: "1",
+              modelValue: modelValue.value,
+              disabled: !control.value.enabled,
+              color: errorMessage.value ? "error" : void 0,
+              "aria-invalid": Boolean(errorMessage.value),
+              "onUpdate:modelValue": onUpdate
+            })
+          }
+        )
+      );
+    };
+  }
+});
+
+// src/renderers/controls/NuxtUiNumberControl.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";
+var NuxtUiNumberControl = defineComponent6({
+  name: "NuxtUiNumberControl",
+  props: rendererProps6(),
+  setup(props) {
+    const { control, handleChange } = useJsonFormsControl4(
+      props
+    );
+    const errorMessage = computed7(() => trimmedOrUndefined(control.value.errors));
+    const modelValue = computed7(() => {
+      const v = control.value.data;
+      return v === null || v === void 0 ? "" : String(v);
+    });
+    function onUpdate(raw) {
+      const trimmed = raw.trim();
+      if (trimmed === "") {
+        handleChange(control.value.path, void 0);
+        return;
+      }
+      const parsed = Number(trimmed);
+      handleChange(control.value.path, Number.isFinite(parsed) ? parsed : void 0);
+    }
+    return () => {
+      if (!control.value.visible) return null;
+      const UFormField = resolveComponent5("UFormField");
+      const UInput = resolveComponent5("UInput");
+      return h6(
+        "div",
+        {},
+        h6(
+          UFormField,
+          {
+            label: control.value.label,
+            description: control.value.description,
+            required: control.value.required,
+            error: errorMessage.value
+          },
+          {
+            default: () => h6(UInput, {
+              type: "number",
+              inputmode: "decimal",
+              modelValue: modelValue.value,
+              disabled: !control.value.enabled,
+              color: errorMessage.value ? "error" : void 0,
+              "aria-invalid": Boolean(errorMessage.value),
+              "onUpdate:modelValue": onUpdate
+            })
+          }
+        )
+      );
+    };
+  }
+});
+
+// src/renderers/controls/NuxtUiStringControl.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";
+var NuxtUiStringControl = defineComponent7({
+  name: "NuxtUiStringControl",
+  props: rendererProps7(),
+  setup(props) {
+    const { control, handleChange } = useJsonFormsControl5(
+      props
+    );
+    const errorMessage = computed8(() => trimmedOrUndefined(control.value.errors));
+    return () => {
+      if (!control.value.visible) return null;
+      const UFormField = resolveComponent6("UFormField");
+      const UInput = resolveComponent6("UInput");
+      return h7(
+        "div",
+        {},
+        h7(
+          UFormField,
+          {
+            label: control.value.label,
+            description: control.value.description,
+            required: control.value.required,
+            error: errorMessage.value
+          },
+          {
+            default: () => h7(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)
+            })
+          }
+        )
+      );
+    };
+  }
+});
+
+// src/renderers/controls/NuxtUiTextareaControl.ts
+import { rendererProps as rendererProps8, useJsonFormsControl as useJsonFormsControl6 } from "@jsonforms/vue";
+import { computed as computed9, defineComponent as defineComponent8, h as h8, resolveComponent as resolveComponent7 } from "vue";
+var NuxtUiTextareaControl = defineComponent8({
+  name: "NuxtUiTextareaControl",
+  props: rendererProps8(),
+  setup(props) {
+    const { control, handleChange } = useJsonFormsControl6(
+      props
+    );
+    const errorMessage = computed9(() => trimmedOrUndefined(control.value.errors));
+    return () => {
+      if (!control.value.visible) return null;
+      const UFormField = resolveComponent7("UFormField");
+      const UTextarea = resolveComponent7("UTextarea");
+      return h8(
+        "div",
+        {},
+        h8(
+          UFormField,
+          {
+            label: control.value.label,
+            description: control.value.description,
+            required: control.value.required,
+            error: errorMessage.value
+          },
+          {
+            default: () => h8(UTextarea, {
+              modelValue: control.value.data ?? "",
+              class: "w-full",
+              disabled: !control.value.enabled,
+              color: errorMessage.value ? "error" : void 0,
+              "aria-invalid": Boolean(errorMessage.value),
+              rows: 5,
+              "onUpdate:modelValue": (v) => handleChange(control.value.path, v)
+            })
+          }
+        )
+      );
+    };
+  }
+});
+
+// src/renderers/layouts/NuxtUiCategorizationRenderer.ts
+import { DispatchRenderer as DispatchRenderer3, rendererProps as rendererProps9, useJsonFormsCategorization } from "@jsonforms/vue";
+import { defineComponent as defineComponent9, h as h9 } from "vue";
+var NuxtUiCategorizationRenderer = defineComponent9({
+  name: "NuxtUiCategorizationRenderer",
+  components: { DispatchRenderer: DispatchRenderer3 },
+  props: rendererProps9(),
+  setup(props) {
+    const { layout, categories } = useJsonFormsCategorization(
+      props
+    );
+    return () => {
+      if (!layout.value.visible) return null;
+      return h9(
+        "div",
+        { class: "flex flex-col gap-6" },
+        categories.map((categoryRef, catIndex) => {
+          const category = categoryRef.value;
+          const elements = category.uischema.elements ?? [];
+          return h9(
+            "div",
+            { key: `${layout.value.path}-cat-${catIndex}`, class: "flex flex-col gap-3" },
+            [
+              category.label ? h9("div", { class: "text-sm font-semibold" }, category.label) : null,
+              h9(
+                "div",
+                { class: "flex flex-col gap-3" },
+                elements.map(
+                  (element, index) => h9(
+                    "div",
+                    { key: `${category.path}-${index}` },
+                    h9(DispatchRenderer3, {
+                      schema: category.schema,
+                      uischema: element,
+                      path: category.path,
+                      enabled: category.enabled,
+                      renderers: category.renderers,
+                      cells: category.cells
+                    })
+                  )
+                )
+              )
+            ]
+          );
+        })
+      );
+    };
+  }
+});
+
+// src/renderers/layouts/NuxtUiCategoryRenderer.ts
+import { DispatchRenderer as DispatchRenderer4, rendererProps as rendererProps10, useJsonFormsLayout } from "@jsonforms/vue";
+import { defineComponent as defineComponent10, h as h10 } from "vue";
+var NuxtUiCategoryRenderer = defineComponent10({
+  name: "NuxtUiCategoryRenderer",
+  components: { DispatchRenderer: DispatchRenderer4 },
+  props: rendererProps10(),
+  setup(props) {
+    const { layout } = useJsonFormsLayout(
+      props
+    );
+    return () => {
+      if (!layout.value.visible) return null;
+      const elements = layout.value.uischema.elements ?? [];
+      return h10("div", { class: "flex flex-col gap-3" }, [
+        layout.value.label ? h10("div", { class: "text-sm font-semibold" }, layout.value.label) : null,
+        h10(
+          "div",
+          { class: "flex flex-col gap-3" },
+          elements.map(
+            (element, index) => h10(
+              "div",
+              { key: `${layout.value.path}-${index}` },
+              h10(DispatchRenderer4, {
+                schema: layout.value.schema,
+                uischema: element,
+                path: layout.value.path,
+                enabled: layout.value.enabled,
+                renderers: layout.value.renderers,
+                cells: layout.value.cells
+              })
+            )
+          )
+        )
+      ]);
+    };
+  }
+});
+
+// src/renderers/layouts/NuxtUiGroupRenderer.ts
+import { DispatchRenderer as DispatchRenderer5, rendererProps as rendererProps11, useJsonFormsLayout as useJsonFormsLayout2 } from "@jsonforms/vue";
+import { defineComponent as defineComponent11, h as h11 } from "vue";
+var NuxtUiGroupRenderer = defineComponent11({
+  name: "NuxtUiGroupRenderer",
+  components: { DispatchRenderer: DispatchRenderer5 },
+  props: rendererProps11(),
+  setup(props) {
+    const { layout } = useJsonFormsLayout2(
+      props
+    );
+    return () => {
+      if (!layout.value.visible) return null;
+      const elements = layout.value.uischema.elements ?? [];
+      return h11("div", { class: "rounded border p-3" }, [
+        layout.value.label ? h11("div", { class: "mb-3 text-sm font-semibold" }, layout.value.label) : null,
+        h11(
+          "div",
+          { class: "flex flex-col gap-3" },
+          elements.map(
+            (element, index) => h11(
+              "div",
+              { key: `${layout.value.path}-${index}` },
+              h11(DispatchRenderer5, {
+                schema: layout.value.schema,
+                uischema: element,
+                path: layout.value.path,
+                enabled: layout.value.enabled,
+                renderers: layout.value.renderers,
+                cells: layout.value.cells
+              })
+            )
+          )
+        )
+      ]);
+    };
+  }
+});
+
+// src/renderers/layouts/NuxtUiHorizontalLayoutRenderer.ts
+import { DispatchRenderer as DispatchRenderer6, rendererProps as rendererProps12, useJsonFormsLayout as useJsonFormsLayout3 } from "@jsonforms/vue";
+import { defineComponent as defineComponent12, h as h12 } from "vue";
+var NuxtUiHorizontalLayoutRenderer = defineComponent12({
+  name: "NuxtUiHorizontalLayoutRenderer",
+  components: { DispatchRenderer: DispatchRenderer6 },
+  props: rendererProps12(),
+  setup(props) {
+    const { layout } = useJsonFormsLayout3(
+      props
+    );
+    return () => {
+      if (!layout.value.visible) return null;
+      const elements = layout.value.uischema.elements ?? [];
+      return h12(
+        "div",
+        { class: "flex flex-col gap-3 md:flex-row md:flex-wrap" },
+        elements.map(
+          (element, index) => h12(
+            "div",
+            { key: `${layout.value.path}-${index}`, class: "min-w-0 flex-1" },
+            h12(DispatchRenderer6, {
+              schema: layout.value.schema,
+              uischema: element,
+              path: layout.value.path,
+              enabled: layout.value.enabled,
+              renderers: layout.value.renderers,
+              cells: layout.value.cells
+            })
+          )
+        )
+      );
+    };
+  }
+});
+
+// src/renderers/layouts/NuxtUiLabelRenderer.ts
+import { rendererProps as rendererProps13, useJsonFormsLabel } from "@jsonforms/vue";
+import { defineComponent as defineComponent13, h as h13 } from "vue";
+var NuxtUiLabelRenderer = defineComponent13({
+  name: "NuxtUiLabelRenderer",
+  props: rendererProps13(),
+  setup(props) {
+    const { label } = useJsonFormsLabel(
+      props
+    );
+    return () => {
+      if (!label.value.visible) return null;
+      return h13(
+        "div",
+        { class: "text-sm text-gray-600 dark:text-gray-300" },
+        label.value.text
+      );
+    };
+  }
+});
+
+// src/renderers/layouts/NuxtUiVerticalLayoutRenderer.ts
+import { DispatchRenderer as DispatchRenderer7, rendererProps as rendererProps14, useJsonFormsLayout as useJsonFormsLayout4 } from "@jsonforms/vue";
+import { defineComponent as defineComponent14, h as h14 } from "vue";
+var NuxtUiVerticalLayoutRenderer = defineComponent14({
+  name: "NuxtUiVerticalLayoutRenderer",
+  components: { DispatchRenderer: DispatchRenderer7 },
+  props: rendererProps14(),
+  setup(props) {
+    const { layout } = useJsonFormsLayout4(
+      props
+    );
+    return () => {
+      if (!layout.value.visible) return null;
+      const elements = layout.value.uischema.elements ?? [];
+      return h14(
+        "div",
+        { class: "flex flex-col gap-3" },
+        elements.map(
+          (element, index) => h14(
+            "div",
+            { key: `${layout.value.path}-${index}` },
+            h14(DispatchRenderer7, {
+              schema: layout.value.schema,
+              uischema: element,
+              path: layout.value.path,
+              enabled: layout.value.enabled,
+              renderers: layout.value.renderers,
+              cells: layout.value.cells
+            })
+          )
+        )
+      );
+    };
+  }
+});
+
+// src/nuxtUiRenderers.ts
+var RANK = 10;
+var nuxtUiRenderers = [
+  // Layouts
+  {
+    tester: rankWith(RANK, uiTypeIs("VerticalLayout")),
+    renderer: markRaw(NuxtUiVerticalLayoutRenderer)
+  },
+  {
+    tester: rankWith(RANK, uiTypeIs("HorizontalLayout")),
+    renderer: markRaw(NuxtUiHorizontalLayoutRenderer)
+  },
+  {
+    tester: rankWith(RANK, uiTypeIs("Group")),
+    renderer: markRaw(NuxtUiGroupRenderer)
+  },
+  {
+    tester: rankWith(RANK, uiTypeIs("Categorization")),
+    renderer: markRaw(NuxtUiCategorizationRenderer)
+  },
+  {
+    tester: rankWith(RANK, uiTypeIs("Category")),
+    renderer: markRaw(NuxtUiCategoryRenderer)
+  },
+  {
+    tester: rankWith(RANK, uiTypeIs("Label")),
+    renderer: markRaw(NuxtUiLabelRenderer)
+  },
+  // Complex schemas
+  {
+    tester: rankWith(RANK, schemaTypeIs("array")),
+    renderer: markRaw(NuxtUiArrayListRenderer)
+  },
+  {
+    tester: rankWith(RANK, isObjectControl),
+    renderer: markRaw(NuxtUiObjectRenderer)
+  },
+  // Primitive controls
+  {
+    tester: rankWith(RANK, isMultiLineControl),
+    renderer: markRaw(NuxtUiTextareaControl)
+  },
+  {
+    tester: rankWith(RANK, isStringControl),
+    renderer: markRaw(NuxtUiStringControl)
+  },
+  {
+    tester: rankWith(RANK, isNumberControl),
+    renderer: markRaw(NuxtUiNumberControl)
+  },
+  {
+    tester: rankWith(RANK, isIntegerControl),
+    renderer: markRaw(NuxtUiIntegerControl)
+  },
+  {
+    tester: rankWith(RANK, isBooleanControl),
+    renderer: markRaw(NuxtUiBooleanControl)
+  },
+  {
+    tester: rankWith(RANK, isEnumControl),
+    renderer: markRaw(NuxtUiEnumControl)
+  }
+];
+export {
+  nuxtUiRenderers
+};
+//# sourceMappingURL=index.js.map