jsonforms-nuxt-ui-renderers 0.1.5 → 0.1.7

package/dist/index.js

@@ -1,5 +1,7 @@
 // src/nuxtUiRenderers.ts
 import {
+  and,
+  formatIs,
   isBooleanControl,
   isEnumControl,
   isEnumSchema,
@@ -597,26 +599,24 @@ var NuxtUiNumberControl = defineComponent7({
   }
 });
 
-// src/renderers/controls/NuxtUiStringControl.ts
+// 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,
-  resolveComponent as resolveComponent7
-} from "vue";
-var NuxtUiStringControl = defineComponent8({
-  name: "NuxtUiStringControl",
+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",
         {},
@@ -629,7 +629,74 @@ var NuxtUiStringControl = defineComponent8({
             error: errorMessage.value
           },
           {
-            default: () => h8(UInput, {
+            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 rendererProps9, useJsonFormsControl as useJsonFormsControl7 } from "@jsonforms/vue";
+import {
+  computed as computed10,
+  defineComponent as defineComponent9,
+  h as h9,
+  resolveComponent as resolveComponent8
+} from "vue";
+var NuxtUiStringControl = defineComponent9({
+  name: "NuxtUiStringControl",
+  props: rendererProps9(),
+  setup(props) {
+    const { control, handleChange } = useJsonFormsControl7(
+      props
+    );
+    const errorMessage = computed10(() => trimmedOrUndefined(control.value.errors));
+    return () => {
+      if (!control.value.visible) return null;
+      const UFormField = resolveComponent8("UFormField");
+      const UInput = resolveComponent8("UInput");
+      return h9(
+        "div",
+        {},
+        h9(
+          UFormField,
+          {
+            label: control.value.label,
+            description: control.value.description,
+            required: control.value.required,
+            error: errorMessage.value
+          },
+          {
+            default: () => h9(UInput, {
               modelValue: control.value.data ?? "",
               class: "w-full",
               disabled: !control.value.enabled,
@@ -645,24 +712,24 @@ var NuxtUiStringControl = defineComponent8({
 });
 
 // src/renderers/controls/NuxtUiTextareaControl.ts
-import { rendererProps as rendererProps9, useJsonFormsControl as useJsonFormsControl7 } from "@jsonforms/vue";
-import { computed as computed10, defineComponent as defineComponent9, h as h9, resolveComponent as resolveComponent8 } from "vue";
-var NuxtUiTextareaControl = defineComponent9({
+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: rendererProps9(),
+  props: rendererProps10(),
   setup(props) {
-    const { control, handleChange } = useJsonFormsControl7(
+    const { control, handleChange } = useJsonFormsControl8(
       props
     );
-    const errorMessage = computed10(() => trimmedOrUndefined(control.value.errors));
+    const errorMessage = computed11(() => trimmedOrUndefined(control.value.errors));
     return () => {
       if (!control.value.visible) return null;
-      const UFormField = resolveComponent8("UFormField");
-      const UTextarea = resolveComponent8("UTextarea");
-      return h9(
+      const UFormField = resolveComponent9("UFormField");
+      const UTextarea = resolveComponent9("UTextarea");
+      return h10(
         "div",
         {},
-        h9(
+        h10(
           UFormField,
           {
             label: control.value.label,
@@ -671,7 +738,7 @@ var NuxtUiTextareaControl = defineComponent9({
             error: errorMessage.value
           },
           {
-            default: () => h9(UTextarea, {
+            default: () => h10(UTextarea, {
               modelValue: control.value.data ?? "",
               class: "w-full",
               disabled: !control.value.enabled,
@@ -688,37 +755,37 @@ var NuxtUiTextareaControl = defineComponent9({
 });
 
 // src/renderers/layouts/NuxtUiCategorizationRenderer.ts
-import { DispatchRenderer as DispatchRenderer3, rendererProps as rendererProps10, useJsonFormsCategorization } from "@jsonforms/vue";
-import { defineComponent as defineComponent10, h as h10 } from "vue";
-var NuxtUiCategorizationRenderer = defineComponent10({
+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: rendererProps10(),
+  props: rendererProps11(),
   setup(props) {
     const { layout, categories } = useJsonFormsCategorization(
       props
     );
     return () => {
       if (!layout.value.visible) return null;
-      return h10(
+      return h11(
         "div",
         { class: "flex flex-col gap-6" },
         categories.map((categoryRef, catIndex) => {
           const category = categoryRef.value;
           const elements = category.uischema.elements ?? [];
-          return h10(
+          return h11(
             "div",
             { key: `${layout.value.path}-cat-${catIndex}`, class: "flex flex-col gap-3" },
             [
-              category.label ? h10("div", { class: "text-sm font-semibold" }, category.label) : null,
-              h10(
+              category.label ? h11("div", { class: "text-sm font-semibold" }, category.label) : null,
+              h11(
                 "div",
                 { class: "flex flex-col gap-3" },
                 elements.map(
-                  (element, index) => h10(
+                  (element, index) => h11(
                     "div",
                     { key: `${category.path}-${index}` },
-                    h10(DispatchRenderer3, {
+                    h11(DispatchRenderer3, {
                       schema: category.schema,
                       uischema: element,
                       path: category.path,
@@ -738,12 +805,12 @@ var NuxtUiCategorizationRenderer = defineComponent10({
 });
 
 // src/renderers/layouts/NuxtUiCategoryRenderer.ts
-import { DispatchRenderer as DispatchRenderer4, rendererProps as rendererProps11, useJsonFormsLayout } from "@jsonforms/vue";
-import { defineComponent as defineComponent11, h as h11 } from "vue";
-var NuxtUiCategoryRenderer = defineComponent11({
+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: rendererProps11(),
+  props: rendererProps12(),
   setup(props) {
     const { layout } = useJsonFormsLayout(
       props
@@ -751,16 +818,16 @@ var NuxtUiCategoryRenderer = defineComponent11({
     return () => {
       if (!layout.value.visible) return null;
       const elements = layout.value.uischema.elements ?? [];
-      return h11("div", { class: "flex flex-col gap-3" }, [
-        layout.value.label ? h11("div", { class: "text-sm font-semibold" }, layout.value.label) : null,
-        h11(
+      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) => h11(
+            (element, index) => h12(
               "div",
               { key: `${layout.value.path}-${index}` },
-              h11(DispatchRenderer4, {
+              h12(DispatchRenderer4, {
                 schema: layout.value.schema,
                 uischema: element,
                 path: layout.value.path,
@@ -777,12 +844,12 @@ var NuxtUiCategoryRenderer = defineComponent11({
 });
 
 // src/renderers/layouts/NuxtUiGroupRenderer.ts
-import { DispatchRenderer as DispatchRenderer5, rendererProps as rendererProps12, useJsonFormsLayout as useJsonFormsLayout2 } from "@jsonforms/vue";
-import { defineComponent as defineComponent12, h as h12 } from "vue";
-var NuxtUiGroupRenderer = defineComponent12({
+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: rendererProps12(),
+  props: rendererProps13(),
   setup(props) {
     const { layout } = useJsonFormsLayout2(
       props
@@ -790,16 +857,16 @@ var NuxtUiGroupRenderer = defineComponent12({
     return () => {
       if (!layout.value.visible) return null;
       const elements = layout.value.uischema.elements ?? [];
-      return h12("div", { class: "rounded border p-3" }, [
-        layout.value.label ? h12("div", { class: "mb-3 text-sm font-semibold" }, layout.value.label) : null,
-        h12(
+      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) => h12(
+            (element, index) => h13(
               "div",
               { key: `${layout.value.path}-${index}` },
-              h12(DispatchRenderer5, {
+              h13(DispatchRenderer5, {
                 schema: layout.value.schema,
                 uischema: element,
                 path: layout.value.path,
@@ -816,12 +883,12 @@ var NuxtUiGroupRenderer = defineComponent12({
 });
 
 // src/renderers/layouts/NuxtUiHorizontalLayoutRenderer.ts
-import { DispatchRenderer as DispatchRenderer6, rendererProps as rendererProps13, useJsonFormsLayout as useJsonFormsLayout3 } from "@jsonforms/vue";
-import { defineComponent as defineComponent13, h as h13 } from "vue";
-var NuxtUiHorizontalLayoutRenderer = defineComponent13({
+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: rendererProps13(),
+  props: rendererProps14(),
   setup(props) {
     const { layout } = useJsonFormsLayout3(
       props
@@ -829,14 +896,14 @@ var NuxtUiHorizontalLayoutRenderer = defineComponent13({
     return () => {
       if (!layout.value.visible) return null;
       const elements = layout.value.uischema.elements ?? [];
-      return h13(
+      return h14(
         "div",
         { class: "flex flex-col gap-3 md:flex-row md:flex-wrap" },
         elements.map(
-          (element, index) => h13(
+          (element, index) => h14(
             "div",
             { key: `${layout.value.path}-${index}`, class: "min-w-0 flex-1" },
-            h13(DispatchRenderer6, {
+            h14(DispatchRenderer6, {
               schema: layout.value.schema,
               uischema: element,
               path: layout.value.path,
@@ -852,18 +919,18 @@ var NuxtUiHorizontalLayoutRenderer = defineComponent13({
 });
 
 // src/renderers/layouts/NuxtUiLabelRenderer.ts
-import { rendererProps as rendererProps14, useJsonFormsLabel } from "@jsonforms/vue";
-import { defineComponent as defineComponent14, h as h14 } from "vue";
-var NuxtUiLabelRenderer = defineComponent14({
+import { rendererProps as rendererProps15, useJsonFormsLabel } from "@jsonforms/vue";
+import { defineComponent as defineComponent15, h as h15 } from "vue";
+var NuxtUiLabelRenderer = defineComponent15({
   name: "NuxtUiLabelRenderer",
-  props: rendererProps14(),
+  props: rendererProps15(),
   setup(props) {
     const { label } = useJsonFormsLabel(
       props
     );
     return () => {
       if (!label.value.visible) return null;
-      return h14(
+      return h15(
         "div",
         { class: "text-sm text-gray-600 dark:text-gray-300" },
         label.value.text
@@ -873,12 +940,12 @@ var NuxtUiLabelRenderer = defineComponent14({
 });
 
 // src/renderers/layouts/NuxtUiVerticalLayoutRenderer.ts
-import { DispatchRenderer as DispatchRenderer7, rendererProps as rendererProps15, useJsonFormsLayout as useJsonFormsLayout4 } from "@jsonforms/vue";
-import { defineComponent as defineComponent15, h as h15 } from "vue";
-var NuxtUiVerticalLayoutRenderer = defineComponent15({
+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: rendererProps15(),
+  props: rendererProps16(),
   setup(props) {
     const { layout } = useJsonFormsLayout4(
       props
@@ -886,14 +953,14 @@ var NuxtUiVerticalLayoutRenderer = defineComponent15({
     return () => {
       if (!layout.value.visible) return null;
       const elements = layout.value.uischema.elements ?? [];
-      return h15(
+      return h16(
         "div",
         { class: "flex flex-col gap-3" },
         elements.map(
-          (element, index) => h15(
+          (element, index) => h16(
             "div",
             { key: `${layout.value.path}-${index}` },
-            h15(DispatchRenderer7, {
+            h16(DispatchRenderer7, {
               schema: layout.value.schema,
               uischema: element,
               path: layout.value.path,
@@ -911,6 +978,7 @@ var NuxtUiVerticalLayoutRenderer = defineComponent15({
 // 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;
@@ -932,6 +1000,27 @@ var isMultiEnumControl = (uischema, schema, context) => {
   const resolvedItems = "$ref" in items && typeof items.$ref === "string" ? Resolve2.schema(rootSchema, items.$ref, rootSchema) : items;
   return isEnumSchema(resolvedItems);
 };
+var isOneOfEnumControl = (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;
+  }
+  const oneOf = resolved?.oneOf;
+  if (!Array.isArray(oneOf) || oneOf.length === 0) return false;
+  for (const entry of oneOf) {
+    if (typeof entry !== "object" || entry === null) continue;
+    if (!("const" in entry)) return false;
+  }
+  return true;
+};
 var nuxtUiRenderers = [
   // Layouts
   {
@@ -989,12 +1078,21 @@ var nuxtUiRenderers = [
     tester: rankWith(ENUM_RANK, isMultiEnumControl),
     renderer: markRaw(NuxtUiMultiEnumControl)
   },
+  {
+    // oneOf with const+title (display labels) - same as enum for rendering.
+    tester: rankWith(ENUM_RANK, isOneOfEnumControl),
+    renderer: markRaw(NuxtUiEnumControl)
+  },
   {
     // 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)