jsonforms-nuxt-ui-renderers 0.1.4 → 0.1.6

package/dist/index.js

@@ -1,13 +1,17 @@
 // src/nuxtUiRenderers.ts
 import {
+  and,
+  formatIs,
   isBooleanControl,
   isEnumControl,
+  isEnumSchema,
   isIntegerControl,
   isMultiLineControl,
   isNumberControl,
   isObjectControl,
   isStringControl,
   rankWith,
+  Resolve as Resolve2,
   schemaTypeIs,
   uiTypeIs
 } from "@jsonforms/core";
@@ -459,18 +463,98 @@ var NuxtUiIntegerControl = defineComponent5({
   }
 });
 
-// src/renderers/controls/NuxtUiNumberControl.ts
+// 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";
-var NuxtUiNumberControl = defineComponent6({
-  name: "NuxtUiNumberControl",
+function schemaEnumOptions2(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;
+}
+function arrayItemsSchema(schema) {
+  if (!schema) return void 0;
+  const items = schema.items;
+  if (typeof items !== "object" || items === null) return void 0;
+  return items;
+}
+var NuxtUiMultiEnumControl = defineComponent6({
+  name: "NuxtUiMultiEnumControl",
   props: rendererProps6(),
   setup(props) {
     const { control, handleChange } = useJsonFormsControl4(
       props
     );
     const errorMessage = computed7(() => trimmedOrUndefined(control.value.errors));
-    const modelValue = computed7(() => {
+    const options = computed7(
+      () => schemaEnumOptions2(arrayItemsSchema(control.value.schema))
+    );
+    const selectedValues = computed7({
+      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 = resolveComponent5("UFormField");
+      const USelectMenu = resolveComponent5("USelectMenu");
+      return h6(
+        "div",
+        {},
+        h6(
+          UFormField,
+          {
+            label: control.value.label,
+            description: control.value.description,
+            required: control.value.required,
+            error: errorMessage.value
+          },
+          {
+            default: () => h6(USelectMenu, {
+              multiple: true,
+              modelValue: selectedValues.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) => {
+                selectedValues.value = Array.isArray(v) ? v : [];
+              }
+            })
+          }
+        )
+      );
+    };
+  }
+});
+
+// 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";
+var NuxtUiNumberControl = defineComponent7({
+  name: "NuxtUiNumberControl",
+  props: rendererProps7(),
+  setup(props) {
+    const { control, handleChange } = useJsonFormsControl5(
+      props
+    );
+    const errorMessage = computed8(() => trimmedOrUndefined(control.value.errors));
+    const modelValue = computed8(() => {
       const v = control.value.data;
       return v === null || v === void 0 ? "" : String(v);
     });
@@ -485,12 +569,12 @@ var NuxtUiNumberControl = defineComponent6({
     }
     return () => {
       if (!control.value.visible) return null;
-      const UFormField = resolveComponent5("UFormField");
-      const UInput = resolveComponent5("UInput");
-      return h6(
+      const UFormField = resolveComponent6("UFormField");
+      const UInput = resolveComponent6("UInput");
+      return h7(
         "div",
         {},
-        h6(
+        h7(
           UFormField,
           {
             label: control.value.label,
@@ -499,7 +583,7 @@ var NuxtUiNumberControl = defineComponent6({
             error: errorMessage.value
           },
           {
-            default: () => h6(UInput, {
+            default: () => h7(UInput, {
               type: "number",
               inputmode: "decimal",
               modelValue: modelValue.value,
@@ -515,30 +599,95 @@ var NuxtUiNumberControl = defineComponent6({
   }
 });
 
+// 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";
+var NuxtUiPasswordControl = defineComponent8({
+  name: "NuxtUiPasswordControl",
+  props: rendererProps8(),
+  setup(props) {
+    const { control, handleChange } = useJsonFormsControl6(
+      props
+    );
+    const errorMessage = computed9(() => trimmedOrUndefined(control.value.errors));
+    const showPassword = ref(false);
+    const inputType = computed9(() => showPassword.value ? "text" : "password");
+    return () => {
+      if (!control.value.visible) return null;
+      const UFormField = resolveComponent7("UFormField");
+      const UInput = resolveComponent7("UInput");
+      const UButton = resolveComponent7("UButton");
+      return h8(
+        "div",
+        {},
+        h8(
+          UFormField,
+          {
+            label: control.value.label,
+            description: control.value.description,
+            required: control.value.required,
+            error: errorMessage.value
+          },
+          {
+            default: () => h8(
+              UInput,
+              {
+                modelValue: control.value.data ?? "",
+                class: "w-full",
+                type: inputType.value,
+                autocomplete: "current-password",
+                disabled: !control.value.enabled,
+                color: errorMessage.value ? "error" : void 0,
+                "aria-invalid": Boolean(errorMessage.value),
+                "onUpdate:modelValue": (v) => handleChange(control.value.path, v)
+              },
+              {
+                trailing: () => h8(UButton, {
+                  type: "button",
+                  color: "neutral",
+                  variant: "ghost",
+                  square: true,
+                  icon: showPassword.value ? "i-heroicons-eye-slash" : "i-heroicons-eye",
+                  "aria-pressed": showPassword.value,
+                  "aria-label": showPassword.value ? "Hide password" : "Show password",
+                  disabled: !control.value.enabled,
+                  onClick: () => {
+                    showPassword.value = !showPassword.value;
+                  }
+                })
+              }
+            )
+          }
+        )
+      );
+    };
+  }
+});
+
 // src/renderers/controls/NuxtUiStringControl.ts
-import { rendererProps as rendererProps7, useJsonFormsControl as useJsonFormsControl5 } from "@jsonforms/vue";
+import { rendererProps as rendererProps9, useJsonFormsControl as useJsonFormsControl7 } from "@jsonforms/vue";
 import {
-  computed as computed8,
-  defineComponent as defineComponent7,
-  h as h7,
-  resolveComponent as resolveComponent6
+  computed as computed10,
+  defineComponent as defineComponent9,
+  h as h9,
+  resolveComponent as resolveComponent8
 } from "vue";
-var NuxtUiStringControl = defineComponent7({
+var NuxtUiStringControl = defineComponent9({
   name: "NuxtUiStringControl",
-  props: rendererProps7(),
+  props: rendererProps9(),
   setup(props) {
-    const { control, handleChange } = useJsonFormsControl5(
+    const { control, handleChange } = useJsonFormsControl7(
       props
     );
-    const errorMessage = computed8(() => trimmedOrUndefined(control.value.errors));
+    const errorMessage = computed10(() => trimmedOrUndefined(control.value.errors));
     return () => {
       if (!control.value.visible) return null;
-      const UFormField = resolveComponent6("UFormField");
-      const UInput = resolveComponent6("UInput");
-      return h7(
+      const UFormField = resolveComponent8("UFormField");
+      const UInput = resolveComponent8("UInput");
+      return h9(
         "div",
         {},
-        h7(
+        h9(
           UFormField,
           {
             label: control.value.label,
@@ -547,7 +696,7 @@ var NuxtUiStringControl = defineComponent7({
             error: errorMessage.value
           },
           {
-            default: () => h7(UInput, {
+            default: () => h9(UInput, {
               modelValue: control.value.data ?? "",
               class: "w-full",
               disabled: !control.value.enabled,
@@ -563,24 +712,24 @@ var NuxtUiStringControl = defineComponent7({
 });
 
 // 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({
+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";
+var NuxtUiTextareaControl = defineComponent10({
   name: "NuxtUiTextareaControl",
-  props: rendererProps8(),
+  props: rendererProps10(),
   setup(props) {
-    const { control, handleChange } = useJsonFormsControl6(
+    const { control, handleChange } = useJsonFormsControl8(
       props
     );
-    const errorMessage = computed9(() => trimmedOrUndefined(control.value.errors));
+    const errorMessage = computed11(() => trimmedOrUndefined(control.value.errors));
     return () => {
       if (!control.value.visible) return null;
-      const UFormField = resolveComponent7("UFormField");
-      const UTextarea = resolveComponent7("UTextarea");
-      return h8(
+      const UFormField = resolveComponent9("UFormField");
+      const UTextarea = resolveComponent9("UTextarea");
+      return h10(
         "div",
         {},
-        h8(
+        h10(
           UFormField,
           {
             label: control.value.label,
@@ -589,7 +738,7 @@ var NuxtUiTextareaControl = defineComponent8({
             error: errorMessage.value
           },
           {
-            default: () => h8(UTextarea, {
+            default: () => h10(UTextarea, {
               modelValue: control.value.data ?? "",
               class: "w-full",
               disabled: !control.value.enabled,
@@ -606,37 +755,37 @@ var NuxtUiTextareaControl = defineComponent8({
 });
 
 // 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({
+import { DispatchRenderer as DispatchRenderer3, rendererProps as rendererProps11, useJsonFormsCategorization } from "@jsonforms/vue";
+import { defineComponent as defineComponent11, h as h11 } from "vue";
+var NuxtUiCategorizationRenderer = defineComponent11({
   name: "NuxtUiCategorizationRenderer",
   components: { DispatchRenderer: DispatchRenderer3 },
-  props: rendererProps9(),
+  props: rendererProps11(),
   setup(props) {
     const { layout, categories } = useJsonFormsCategorization(
       props
     );
     return () => {
       if (!layout.value.visible) return null;
-      return h9(
+      return h11(
         "div",
         { class: "flex flex-col gap-6" },
         categories.map((categoryRef, catIndex) => {
           const category = categoryRef.value;
           const elements = category.uischema.elements ?? [];
-          return h9(
+          return h11(
             "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(
+              category.label ? h11("div", { class: "text-sm font-semibold" }, category.label) : null,
+              h11(
                 "div",
                 { class: "flex flex-col gap-3" },
                 elements.map(
-                  (element, index) => h9(
+                  (element, index) => h11(
                     "div",
                     { key: `${category.path}-${index}` },
-                    h9(DispatchRenderer3, {
+                    h11(DispatchRenderer3, {
                       schema: category.schema,
                       uischema: element,
                       path: category.path,
@@ -656,12 +805,12 @@ var NuxtUiCategorizationRenderer = defineComponent9({
 });
 
 // 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({
+import { DispatchRenderer as DispatchRenderer4, rendererProps as rendererProps12, useJsonFormsLayout } from "@jsonforms/vue";
+import { defineComponent as defineComponent12, h as h12 } from "vue";
+var NuxtUiCategoryRenderer = defineComponent12({
   name: "NuxtUiCategoryRenderer",
   components: { DispatchRenderer: DispatchRenderer4 },
-  props: rendererProps10(),
+  props: rendererProps12(),
   setup(props) {
     const { layout } = useJsonFormsLayout(
       props
@@ -669,16 +818,16 @@ var NuxtUiCategoryRenderer = defineComponent10({
     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(
+      return h12("div", { class: "flex flex-col gap-3" }, [
+        layout.value.label ? h12("div", { class: "text-sm font-semibold" }, layout.value.label) : null,
+        h12(
           "div",
           { class: "flex flex-col gap-3" },
           elements.map(
-            (element, index) => h10(
+            (element, index) => h12(
               "div",
               { key: `${layout.value.path}-${index}` },
-              h10(DispatchRenderer4, {
+              h12(DispatchRenderer4, {
                 schema: layout.value.schema,
                 uischema: element,
                 path: layout.value.path,
@@ -695,12 +844,12 @@ var NuxtUiCategoryRenderer = defineComponent10({
 });
 
 // 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({
+import { DispatchRenderer as DispatchRenderer5, rendererProps as rendererProps13, useJsonFormsLayout as useJsonFormsLayout2 } from "@jsonforms/vue";
+import { defineComponent as defineComponent13, h as h13 } from "vue";
+var NuxtUiGroupRenderer = defineComponent13({
   name: "NuxtUiGroupRenderer",
   components: { DispatchRenderer: DispatchRenderer5 },
-  props: rendererProps11(),
+  props: rendererProps13(),
   setup(props) {
     const { layout } = useJsonFormsLayout2(
       props
@@ -708,16 +857,16 @@ var NuxtUiGroupRenderer = defineComponent11({
     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(
+      return h13("div", { class: "rounded border p-3" }, [
+        layout.value.label ? h13("div", { class: "mb-3 text-sm font-semibold" }, layout.value.label) : null,
+        h13(
           "div",
           { class: "flex flex-col gap-3" },
           elements.map(
-            (element, index) => h11(
+            (element, index) => h13(
               "div",
               { key: `${layout.value.path}-${index}` },
-              h11(DispatchRenderer5, {
+              h13(DispatchRenderer5, {
                 schema: layout.value.schema,
                 uischema: element,
                 path: layout.value.path,
@@ -734,12 +883,12 @@ var NuxtUiGroupRenderer = defineComponent11({
 });
 
 // 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({
+import { DispatchRenderer as DispatchRenderer6, rendererProps as rendererProps14, useJsonFormsLayout as useJsonFormsLayout3 } from "@jsonforms/vue";
+import { defineComponent as defineComponent14, h as h14 } from "vue";
+var NuxtUiHorizontalLayoutRenderer = defineComponent14({
   name: "NuxtUiHorizontalLayoutRenderer",
   components: { DispatchRenderer: DispatchRenderer6 },
-  props: rendererProps12(),
+  props: rendererProps14(),
   setup(props) {
     const { layout } = useJsonFormsLayout3(
       props
@@ -747,14 +896,14 @@ var NuxtUiHorizontalLayoutRenderer = defineComponent12({
     return () => {
       if (!layout.value.visible) return null;
       const elements = layout.value.uischema.elements ?? [];
-      return h12(
+      return h14(
         "div",
         { class: "flex flex-col gap-3 md:flex-row md:flex-wrap" },
         elements.map(
-          (element, index) => h12(
+          (element, index) => h14(
             "div",
             { key: `${layout.value.path}-${index}`, class: "min-w-0 flex-1" },
-            h12(DispatchRenderer6, {
+            h14(DispatchRenderer6, {
               schema: layout.value.schema,
               uischema: element,
               path: layout.value.path,
@@ -770,18 +919,18 @@ var NuxtUiHorizontalLayoutRenderer = defineComponent12({
 });
 
 // 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({
+import { rendererProps as rendererProps15, useJsonFormsLabel } from "@jsonforms/vue";
+import { defineComponent as defineComponent15, h as h15 } from "vue";
+var NuxtUiLabelRenderer = defineComponent15({
   name: "NuxtUiLabelRenderer",
-  props: rendererProps13(),
+  props: rendererProps15(),
   setup(props) {
     const { label } = useJsonFormsLabel(
       props
     );
     return () => {
       if (!label.value.visible) return null;
-      return h13(
+      return h15(
         "div",
         { class: "text-sm text-gray-600 dark:text-gray-300" },
         label.value.text
@@ -791,12 +940,12 @@ var NuxtUiLabelRenderer = defineComponent13({
 });
 
 // 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({
+import { DispatchRenderer as DispatchRenderer7, rendererProps as rendererProps16, useJsonFormsLayout as useJsonFormsLayout4 } from "@jsonforms/vue";
+import { defineComponent as defineComponent16, h as h16 } from "vue";
+var NuxtUiVerticalLayoutRenderer = defineComponent16({
   name: "NuxtUiVerticalLayoutRenderer",
   components: { DispatchRenderer: DispatchRenderer7 },
-  props: rendererProps14(),
+  props: rendererProps16(),
   setup(props) {
     const { layout } = useJsonFormsLayout4(
       props
@@ -804,14 +953,14 @@ var NuxtUiVerticalLayoutRenderer = defineComponent14({
     return () => {
       if (!layout.value.visible) return null;
       const elements = layout.value.uischema.elements ?? [];
-      return h14(
+      return h16(
         "div",
         { class: "flex flex-col gap-3" },
         elements.map(
-          (element, index) => h14(
+          (element, index) => h16(
             "div",
             { key: `${layout.value.path}-${index}` },
-            h14(DispatchRenderer7, {
+            h16(DispatchRenderer7, {
               schema: layout.value.schema,
               uischema: element,
               path: layout.value.path,
@@ -829,6 +978,28 @@ var NuxtUiVerticalLayoutRenderer = defineComponent14({
 // src/nuxtUiRenderers.ts
 var RANK = 10;
 var ENUM_RANK = RANK + 1;
+var PASSWORD_RANK = ENUM_RANK + 1;
+var isMultiEnumControl = (uischema, schema, context) => {
+  if (!uiTypeIs("Control")(uischema, schema, context)) {
+    return false;
+  }
+  const scope = uischema?.scope;
+  if (typeof scope !== "string") return false;
+  const rootSchema = context?.rootSchema ?? schema;
+  let resolved;
+  try {
+    resolved = Resolve2.schema(schema, scope, rootSchema);
+  } catch {
+    return false;
+  }
+  if (resolved?.type !== "array") return false;
+  const items = resolved?.items;
+  if (!items) return false;
+  if (Array.isArray(items)) return false;
+  if (typeof items !== "object" || items === null) return false;
+  const resolvedItems = "$ref" in items && typeof items.$ref === "string" ? Resolve2.schema(rootSchema, items.$ref, rootSchema) : items;
+  return isEnumSchema(resolvedItems);
+};
 var nuxtUiRenderers = [
   // Layouts
   {
@@ -881,12 +1052,21 @@ var nuxtUiRenderers = [
     tester: rankWith(RANK, isBooleanControl),
     renderer: markRaw(NuxtUiBooleanControl)
   },
+  {
+    // Multi-enum must outrank generic array renderer and string renderer.
+    tester: rankWith(ENUM_RANK, isMultiEnumControl),
+    renderer: markRaw(NuxtUiMultiEnumControl)
+  },
   {
     // Enum must outrank the generic string control, otherwise enums can render
     // as freeform text inputs.
     tester: rankWith(ENUM_RANK, isEnumControl),
     renderer: markRaw(NuxtUiEnumControl)
   },
+  {
+    tester: rankWith(PASSWORD_RANK, and(isStringControl, formatIs("password"))),
+    renderer: markRaw(NuxtUiPasswordControl)
+  },
   {
     tester: rankWith(RANK, isStringControl),
     renderer: markRaw(NuxtUiStringControl)