jsonforms-nuxt-ui-renderers 0.1.5 → 0.1.7

package/README.md

@@ -24,15 +24,42 @@ import { nuxtUiRenderers } from 'jsonforms-nuxt-ui-renderers'
 
 ### Important
 
-- These renderers **resolve Nuxt UI components by name** (e.g. `UInput`, `UFormField`, `UButton`).
+- These renderers **resolve Nuxt UI components by name** (e.g. `UFormField`, `UInput`, `UTextarea`, `USelectMenu`, `USwitch`, `UButton`).
   Your app must register Nuxt UI components globally (Nuxt does this when you use the `@nuxt/ui` module).
 - If you override component names or use a different UI library, these renderers will not work out of the box.
 
 ## Supported UI schema / schema constructs
 
-- **Controls**: string, multiline string, number, integer, boolean, enum
-- **Layouts**: `VerticalLayout`, `HorizontalLayout`, `Group`, `Label`, `Category`, `Categorization`
-- **Complex**: arrays (list UI), objects (delegates to generated/registered detail UI schema)
+This package is intentionally small and opinionated: it ships a **single** renderer registry (`nuxtUiRenderers`) covering the following UI schema elements / JSON Schema patterns.
+
+### Controls (field types)
+
+- **String**: JSON Schema `type: "string"` → `UInput`
+- **Multiline string**: JSONForms “multiline” control (e.g. `uischema.options.multi: true`) → `UTextarea`
+- **Password**: JSON Schema `type: "string"` + `format: "password"` → `UInput type="password"` with show/hide toggle button
+- **Number**: JSON Schema `type: "number"` → `UInput type="number"` (parses to `number`, empty becomes `undefined`)
+- **Integer**: JSON Schema `type: "integer"` → `UInput type="number" step="1"` (parses to `integer`, empty becomes `undefined`)
+- **Boolean**: JSON Schema `type: "boolean"` → `USwitch`
+- **Enum (single-select)**: JSON Schema `enum: [...]` (or `oneOf: [{ const, title? }, ...]`) → `USelectMenu`
+- **Enum (multi-select)**: JSON Schema `type: "array"` with `items` being an enum schema (supports `$ref`’d `items`) → `USelectMenu multiple`
+
+### Layouts
+
+- **`VerticalLayout`**
+- **`HorizontalLayout`** (responsive: stacks on small screens, wraps into columns on larger screens)
+- **`Group`**
+- **`Label`**
+- **`Categorization` / `Category`**
+
+### Complex types
+
+- **Arrays (list UI)**: any schema with `type: "array"` renders as a list with **Add / Remove / Up / Down**
+  - Respects `minItems` / `maxItems` (disables buttons accordingly)
+  - Item label can be customized via `uischema.options.childLabelProp`; otherwise it uses JSONForms’ first primitive property as a best-effort label
+  - “Add” uses JSONForms `createDefaultValue(...)` for the item value
+- **Objects**: object controls delegate to a **detail UI schema**
+  - If no matching detail UI schema is registered, a default one is generated via JSONForms `Generate.uiSchema(...)`
+  - The root object is rendered as a `VerticalLayout`; nested objects default to a `Group` using the control’s label
 
 ## Contributing
 

package/dist/index.cjs

@@ -26,7 +26,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/nuxtUiRenderers.ts
 var import_core3 = require("@jsonforms/core");
-var import_vue32 = require("vue");
+var import_vue34 = require("vue");
 
 // src/renderers/complex/NuxtUiArrayListRenderer.ts
 var import_core = require("@jsonforms/core");
@@ -600,21 +600,24 @@ var NuxtUiNumberControl = (0, import_vue15.defineComponent)({
   }
 });
 
-// src/renderers/controls/NuxtUiStringControl.ts
+// src/renderers/controls/NuxtUiPasswordControl.ts
 var import_vue16 = require("@jsonforms/vue");
 var import_vue17 = require("vue");
-var NuxtUiStringControl = (0, import_vue17.defineComponent)({
-  name: "NuxtUiStringControl",
+var NuxtUiPasswordControl = (0, import_vue17.defineComponent)({
+  name: "NuxtUiPasswordControl",
   props: (0, import_vue16.rendererProps)(),
   setup(props) {
     const { control, handleChange } = (0, import_vue16.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");
     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)(
         "div",
         {},
@@ -627,7 +630,69 @@ var NuxtUiStringControl = (0, import_vue17.defineComponent)({
             error: errorMessage.value
           },
           {
-            default: () => (0, import_vue17.h)(UInput, {
+            default: () => (0, import_vue17.h)(
+              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: () => (0, import_vue17.h)(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
+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,
+          {
+            label: control.value.label,
+            description: control.value.description,
+            required: control.value.required,
+            error: errorMessage.value
+          },
+          {
+            default: () => (0, import_vue19.h)(UInput, {
               modelValue: control.value.data ?? "",
               class: "w-full",
               disabled: !control.value.enabled,
@@ -643,24 +708,24 @@ var NuxtUiStringControl = (0, import_vue17.defineComponent)({
 });
 
 // src/renderers/controls/NuxtUiTextareaControl.ts
-var import_vue18 = require("@jsonforms/vue");
-var import_vue19 = require("vue");
-var NuxtUiTextareaControl = (0, import_vue19.defineComponent)({
+var import_vue20 = require("@jsonforms/vue");
+var import_vue21 = require("vue");
+var NuxtUiTextareaControl = (0, import_vue21.defineComponent)({
   name: "NuxtUiTextareaControl",
-  props: (0, import_vue18.rendererProps)(),
+  props: (0, import_vue20.rendererProps)(),
   setup(props) {
-    const { control, handleChange } = (0, import_vue18.useJsonFormsControl)(
+    const { control, handleChange } = (0, import_vue20.useJsonFormsControl)(
       props
     );
-    const errorMessage = (0, import_vue19.computed)(() => trimmedOrUndefined(control.value.errors));
+    const errorMessage = (0, import_vue21.computed)(() => trimmedOrUndefined(control.value.errors));
     return () => {
       if (!control.value.visible) return null;
-      const UFormField = (0, import_vue19.resolveComponent)("UFormField");
-      const UTextarea = (0, import_vue19.resolveComponent)("UTextarea");
-      return (0, import_vue19.h)(
+      const UFormField = (0, import_vue21.resolveComponent)("UFormField");
+      const UTextarea = (0, import_vue21.resolveComponent)("UTextarea");
+      return (0, import_vue21.h)(
         "div",
         {},
-        (0, import_vue19.h)(
+        (0, import_vue21.h)(
           UFormField,
           {
             label: control.value.label,
@@ -669,7 +734,7 @@ var NuxtUiTextareaControl = (0, import_vue19.defineComponent)({
             error: errorMessage.value
           },
           {
-            default: () => (0, import_vue19.h)(UTextarea, {
+            default: () => (0, import_vue21.h)(UTextarea, {
               modelValue: control.value.data ?? "",
               class: "w-full",
               disabled: !control.value.enabled,
@@ -686,37 +751,37 @@ var NuxtUiTextareaControl = (0, import_vue19.defineComponent)({
 });
 
 // src/renderers/layouts/NuxtUiCategorizationRenderer.ts
-var import_vue20 = require("@jsonforms/vue");
-var import_vue21 = require("vue");
-var NuxtUiCategorizationRenderer = (0, import_vue21.defineComponent)({
+var import_vue22 = require("@jsonforms/vue");
+var import_vue23 = require("vue");
+var NuxtUiCategorizationRenderer = (0, import_vue23.defineComponent)({
   name: "NuxtUiCategorizationRenderer",
-  components: { DispatchRenderer: import_vue20.DispatchRenderer },
-  props: (0, import_vue20.rendererProps)(),
+  components: { DispatchRenderer: import_vue22.DispatchRenderer },
+  props: (0, import_vue22.rendererProps)(),
   setup(props) {
-    const { layout, categories } = (0, import_vue20.useJsonFormsCategorization)(
+    const { layout, categories } = (0, import_vue22.useJsonFormsCategorization)(
       props
     );
     return () => {
       if (!layout.value.visible) return null;
-      return (0, import_vue21.h)(
+      return (0, import_vue23.h)(
         "div",
         { class: "flex flex-col gap-6" },
         categories.map((categoryRef, catIndex) => {
           const category = categoryRef.value;
           const elements = category.uischema.elements ?? [];
-          return (0, import_vue21.h)(
+          return (0, import_vue23.h)(
             "div",
             { key: `${layout.value.path}-cat-${catIndex}`, class: "flex flex-col gap-3" },
             [
-              category.label ? (0, import_vue21.h)("div", { class: "text-sm font-semibold" }, category.label) : null,
-              (0, import_vue21.h)(
+              category.label ? (0, import_vue23.h)("div", { class: "text-sm font-semibold" }, category.label) : null,
+              (0, import_vue23.h)(
                 "div",
                 { class: "flex flex-col gap-3" },
                 elements.map(
-                  (element, index) => (0, import_vue21.h)(
+                  (element, index) => (0, import_vue23.h)(
                     "div",
                     { key: `${category.path}-${index}` },
-                    (0, import_vue21.h)(import_vue20.DispatchRenderer, {
+                    (0, import_vue23.h)(import_vue22.DispatchRenderer, {
                       schema: category.schema,
                       uischema: element,
                       path: category.path,
@@ -736,29 +801,29 @@ var NuxtUiCategorizationRenderer = (0, import_vue21.defineComponent)({
 });
 
 // src/renderers/layouts/NuxtUiCategoryRenderer.ts
-var import_vue22 = require("@jsonforms/vue");
-var import_vue23 = require("vue");
-var NuxtUiCategoryRenderer = (0, import_vue23.defineComponent)({
+var import_vue24 = require("@jsonforms/vue");
+var import_vue25 = require("vue");
+var NuxtUiCategoryRenderer = (0, import_vue25.defineComponent)({
   name: "NuxtUiCategoryRenderer",
-  components: { DispatchRenderer: import_vue22.DispatchRenderer },
-  props: (0, import_vue22.rendererProps)(),
+  components: { DispatchRenderer: import_vue24.DispatchRenderer },
+  props: (0, import_vue24.rendererProps)(),
   setup(props) {
-    const { layout } = (0, import_vue22.useJsonFormsLayout)(
+    const { layout } = (0, import_vue24.useJsonFormsLayout)(
       props
     );
     return () => {
       if (!layout.value.visible) return null;
       const elements = layout.value.uischema.elements ?? [];
-      return (0, import_vue23.h)("div", { class: "flex flex-col gap-3" }, [
-        layout.value.label ? (0, import_vue23.h)("div", { class: "text-sm font-semibold" }, layout.value.label) : null,
-        (0, import_vue23.h)(
+      return (0, import_vue25.h)("div", { class: "flex flex-col gap-3" }, [
+        layout.value.label ? (0, import_vue25.h)("div", { class: "text-sm font-semibold" }, layout.value.label) : null,
+        (0, import_vue25.h)(
           "div",
           { class: "flex flex-col gap-3" },
           elements.map(
-            (element, index) => (0, import_vue23.h)(
+            (element, index) => (0, import_vue25.h)(
               "div",
               { key: `${layout.value.path}-${index}` },
-              (0, import_vue23.h)(import_vue22.DispatchRenderer, {
+              (0, import_vue25.h)(import_vue24.DispatchRenderer, {
                 schema: layout.value.schema,
                 uischema: element,
                 path: layout.value.path,
@@ -775,29 +840,29 @@ var NuxtUiCategoryRenderer = (0, import_vue23.defineComponent)({
 });
 
 // src/renderers/layouts/NuxtUiGroupRenderer.ts
-var import_vue24 = require("@jsonforms/vue");
-var import_vue25 = require("vue");
-var NuxtUiGroupRenderer = (0, import_vue25.defineComponent)({
+var import_vue26 = require("@jsonforms/vue");
+var import_vue27 = require("vue");
+var NuxtUiGroupRenderer = (0, import_vue27.defineComponent)({
   name: "NuxtUiGroupRenderer",
-  components: { DispatchRenderer: import_vue24.DispatchRenderer },
-  props: (0, import_vue24.rendererProps)(),
+  components: { DispatchRenderer: import_vue26.DispatchRenderer },
+  props: (0, import_vue26.rendererProps)(),
   setup(props) {
-    const { layout } = (0, import_vue24.useJsonFormsLayout)(
+    const { layout } = (0, import_vue26.useJsonFormsLayout)(
       props
     );
     return () => {
       if (!layout.value.visible) return null;
       const elements = layout.value.uischema.elements ?? [];
-      return (0, import_vue25.h)("div", { class: "rounded border p-3" }, [
-        layout.value.label ? (0, import_vue25.h)("div", { class: "mb-3 text-sm font-semibold" }, layout.value.label) : null,
-        (0, import_vue25.h)(
+      return (0, import_vue27.h)("div", { class: "rounded border p-3" }, [
+        layout.value.label ? (0, import_vue27.h)("div", { class: "mb-3 text-sm font-semibold" }, layout.value.label) : null,
+        (0, import_vue27.h)(
           "div",
           { class: "flex flex-col gap-3" },
           elements.map(
-            (element, index) => (0, import_vue25.h)(
+            (element, index) => (0, import_vue27.h)(
               "div",
               { key: `${layout.value.path}-${index}` },
-              (0, import_vue25.h)(import_vue24.DispatchRenderer, {
+              (0, import_vue27.h)(import_vue26.DispatchRenderer, {
                 schema: layout.value.schema,
                 uischema: element,
                 path: layout.value.path,
@@ -814,27 +879,27 @@ var NuxtUiGroupRenderer = (0, import_vue25.defineComponent)({
 });
 
 // src/renderers/layouts/NuxtUiHorizontalLayoutRenderer.ts
-var import_vue26 = require("@jsonforms/vue");
-var import_vue27 = require("vue");
-var NuxtUiHorizontalLayoutRenderer = (0, import_vue27.defineComponent)({
+var import_vue28 = require("@jsonforms/vue");
+var import_vue29 = require("vue");
+var NuxtUiHorizontalLayoutRenderer = (0, import_vue29.defineComponent)({
   name: "NuxtUiHorizontalLayoutRenderer",
-  components: { DispatchRenderer: import_vue26.DispatchRenderer },
-  props: (0, import_vue26.rendererProps)(),
+  components: { DispatchRenderer: import_vue28.DispatchRenderer },
+  props: (0, import_vue28.rendererProps)(),
   setup(props) {
-    const { layout } = (0, import_vue26.useJsonFormsLayout)(
+    const { layout } = (0, import_vue28.useJsonFormsLayout)(
       props
     );
     return () => {
       if (!layout.value.visible) return null;
       const elements = layout.value.uischema.elements ?? [];
-      return (0, import_vue27.h)(
+      return (0, import_vue29.h)(
         "div",
         { class: "flex flex-col gap-3 md:flex-row md:flex-wrap" },
         elements.map(
-          (element, index) => (0, import_vue27.h)(
+          (element, index) => (0, import_vue29.h)(
             "div",
             { key: `${layout.value.path}-${index}`, class: "min-w-0 flex-1" },
-            (0, import_vue27.h)(import_vue26.DispatchRenderer, {
+            (0, import_vue29.h)(import_vue28.DispatchRenderer, {
               schema: layout.value.schema,
               uischema: element,
               path: layout.value.path,
@@ -850,18 +915,18 @@ var NuxtUiHorizontalLayoutRenderer = (0, import_vue27.defineComponent)({
 });
 
 // src/renderers/layouts/NuxtUiLabelRenderer.ts
-var import_vue28 = require("@jsonforms/vue");
-var import_vue29 = require("vue");
-var NuxtUiLabelRenderer = (0, import_vue29.defineComponent)({
+var import_vue30 = require("@jsonforms/vue");
+var import_vue31 = require("vue");
+var NuxtUiLabelRenderer = (0, import_vue31.defineComponent)({
   name: "NuxtUiLabelRenderer",
-  props: (0, import_vue28.rendererProps)(),
+  props: (0, import_vue30.rendererProps)(),
   setup(props) {
-    const { label } = (0, import_vue28.useJsonFormsLabel)(
+    const { label } = (0, import_vue30.useJsonFormsLabel)(
       props
     );
     return () => {
       if (!label.value.visible) return null;
-      return (0, import_vue29.h)(
+      return (0, import_vue31.h)(
         "div",
         { class: "text-sm text-gray-600 dark:text-gray-300" },
         label.value.text
@@ -871,27 +936,27 @@ var NuxtUiLabelRenderer = (0, import_vue29.defineComponent)({
 });
 
 // src/renderers/layouts/NuxtUiVerticalLayoutRenderer.ts
-var import_vue30 = require("@jsonforms/vue");
-var import_vue31 = require("vue");
-var NuxtUiVerticalLayoutRenderer = (0, import_vue31.defineComponent)({
+var import_vue32 = require("@jsonforms/vue");
+var import_vue33 = require("vue");
+var NuxtUiVerticalLayoutRenderer = (0, import_vue33.defineComponent)({
   name: "NuxtUiVerticalLayoutRenderer",
-  components: { DispatchRenderer: import_vue30.DispatchRenderer },
-  props: (0, import_vue30.rendererProps)(),
+  components: { DispatchRenderer: import_vue32.DispatchRenderer },
+  props: (0, import_vue32.rendererProps)(),
   setup(props) {
-    const { layout } = (0, import_vue30.useJsonFormsLayout)(
+    const { layout } = (0, import_vue32.useJsonFormsLayout)(
       props
     );
     return () => {
       if (!layout.value.visible) return null;
       const elements = layout.value.uischema.elements ?? [];
-      return (0, import_vue31.h)(
+      return (0, import_vue33.h)(
         "div",
         { class: "flex flex-col gap-3" },
         elements.map(
-          (element, index) => (0, import_vue31.h)(
+          (element, index) => (0, import_vue33.h)(
             "div",
             { key: `${layout.value.path}-${index}` },
-            (0, import_vue31.h)(import_vue30.DispatchRenderer, {
+            (0, import_vue33.h)(import_vue32.DispatchRenderer, {
               schema: layout.value.schema,
               uischema: element,
               path: layout.value.path,
@@ -909,6 +974,7 @@ var NuxtUiVerticalLayoutRenderer = (0, import_vue31.defineComponent)({
 // src/nuxtUiRenderers.ts
 var RANK = 10;
 var ENUM_RANK = RANK + 1;
+var PASSWORD_RANK = ENUM_RANK + 1;
 var isMultiEnumControl = (uischema, schema, context) => {
   if (!(0, import_core3.uiTypeIs)("Control")(uischema, schema, context)) {
     return false;
@@ -930,72 +996,102 @@ var isMultiEnumControl = (uischema, schema, context) => {
   const resolvedItems = "$ref" in items && typeof items.$ref === "string" ? import_core3.Resolve.schema(rootSchema, items.$ref, rootSchema) : items;
   return (0, import_core3.isEnumSchema)(resolvedItems);
 };
+var isOneOfEnumControl = (uischema, schema, context) => {
+  if (!(0, import_core3.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 = import_core3.Resolve.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
   {
     tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("VerticalLayout")),
-    renderer: (0, import_vue32.markRaw)(NuxtUiVerticalLayoutRenderer)
+    renderer: (0, import_vue34.markRaw)(NuxtUiVerticalLayoutRenderer)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("HorizontalLayout")),
-    renderer: (0, import_vue32.markRaw)(NuxtUiHorizontalLayoutRenderer)
+    renderer: (0, import_vue34.markRaw)(NuxtUiHorizontalLayoutRenderer)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("Group")),
-    renderer: (0, import_vue32.markRaw)(NuxtUiGroupRenderer)
+    renderer: (0, import_vue34.markRaw)(NuxtUiGroupRenderer)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("Categorization")),
-    renderer: (0, import_vue32.markRaw)(NuxtUiCategorizationRenderer)
+    renderer: (0, import_vue34.markRaw)(NuxtUiCategorizationRenderer)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("Category")),
-    renderer: (0, import_vue32.markRaw)(NuxtUiCategoryRenderer)
+    renderer: (0, import_vue34.markRaw)(NuxtUiCategoryRenderer)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("Label")),
-    renderer: (0, import_vue32.markRaw)(NuxtUiLabelRenderer)
+    renderer: (0, import_vue34.markRaw)(NuxtUiLabelRenderer)
   },
   // Complex schemas
   {
     tester: (0, import_core3.rankWith)(RANK, (0, import_core3.schemaTypeIs)("array")),
-    renderer: (0, import_vue32.markRaw)(NuxtUiArrayListRenderer)
+    renderer: (0, import_vue34.markRaw)(NuxtUiArrayListRenderer)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, import_core3.isObjectControl),
-    renderer: (0, import_vue32.markRaw)(NuxtUiObjectRenderer)
+    renderer: (0, import_vue34.markRaw)(NuxtUiObjectRenderer)
   },
   // Primitive controls
   {
     tester: (0, import_core3.rankWith)(RANK, import_core3.isMultiLineControl),
-    renderer: (0, import_vue32.markRaw)(NuxtUiTextareaControl)
+    renderer: (0, import_vue34.markRaw)(NuxtUiTextareaControl)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, import_core3.isNumberControl),
-    renderer: (0, import_vue32.markRaw)(NuxtUiNumberControl)
+    renderer: (0, import_vue34.markRaw)(NuxtUiNumberControl)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, import_core3.isIntegerControl),
-    renderer: (0, import_vue32.markRaw)(NuxtUiIntegerControl)
+    renderer: (0, import_vue34.markRaw)(NuxtUiIntegerControl)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, import_core3.isBooleanControl),
-    renderer: (0, import_vue32.markRaw)(NuxtUiBooleanControl)
+    renderer: (0, import_vue34.markRaw)(NuxtUiBooleanControl)
   },
   {
     // Multi-enum must outrank generic array renderer and string renderer.
     tester: (0, import_core3.rankWith)(ENUM_RANK, isMultiEnumControl),
-    renderer: (0, import_vue32.markRaw)(NuxtUiMultiEnumControl)
+    renderer: (0, import_vue34.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)
   },
   {
     // Enum must outrank the generic string control, otherwise enums can render
     // as freeform text inputs.
     tester: (0, import_core3.rankWith)(ENUM_RANK, import_core3.isEnumControl),
-    renderer: (0, import_vue32.markRaw)(NuxtUiEnumControl)
+    renderer: (0, import_vue34.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)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, import_core3.isStringControl),
-    renderer: (0, import_vue32.markRaw)(NuxtUiStringControl)
+    renderer: (0, import_vue34.markRaw)(NuxtUiStringControl)
   }
 ];
 // Annotate the CommonJS export names for ESM import in node: