jsonforms-nuxt-ui-renderers 0.1.3 → 0.1.5

package/dist/index.cjs

@@ -26,7 +26,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/nuxtUiRenderers.ts
 var import_core3 = require("@jsonforms/core");
-var import_vue30 = require("vue");
+var import_vue32 = require("vue");
 
 // src/renderers/complex/NuxtUiArrayListRenderer.ts
 var import_core = require("@jsonforms/core");
@@ -464,18 +464,98 @@ var NuxtUiIntegerControl = (0, import_vue11.defineComponent)({
   }
 });
 
-// src/renderers/controls/NuxtUiNumberControl.ts
+// src/renderers/controls/NuxtUiMultiEnumControl.ts
 var import_vue12 = require("@jsonforms/vue");
 var import_vue13 = require("vue");
-var NuxtUiNumberControl = (0, import_vue13.defineComponent)({
-  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 = (0, import_vue13.defineComponent)({
+  name: "NuxtUiMultiEnumControl",
   props: (0, import_vue12.rendererProps)(),
   setup(props) {
     const { control, handleChange } = (0, import_vue12.useJsonFormsControl)(
       props
     );
     const errorMessage = (0, import_vue13.computed)(() => trimmedOrUndefined(control.value.errors));
-    const modelValue = (0, import_vue13.computed)(() => {
+    const options = (0, import_vue13.computed)(
+      () => schemaEnumOptions2(arrayItemsSchema(control.value.schema))
+    );
+    const selectedValues = (0, import_vue13.computed)({
+      get: () => Array.isArray(control.value.data) ? control.value.data : [],
+      set: (v) => handleChange(control.value.path, v)
+    });
+    return () => {
+      if (!control.value.visible) return null;
+      const UFormField = (0, import_vue13.resolveComponent)("UFormField");
+      const USelectMenu = (0, import_vue13.resolveComponent)("USelectMenu");
+      return (0, import_vue13.h)(
+        "div",
+        {},
+        (0, import_vue13.h)(
+          UFormField,
+          {
+            label: control.value.label,
+            description: control.value.description,
+            required: control.value.required,
+            error: errorMessage.value
+          },
+          {
+            default: () => (0, import_vue13.h)(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
+var import_vue14 = require("@jsonforms/vue");
+var import_vue15 = require("vue");
+var NuxtUiNumberControl = (0, import_vue15.defineComponent)({
+  name: "NuxtUiNumberControl",
+  props: (0, import_vue14.rendererProps)(),
+  setup(props) {
+    const { control, handleChange } = (0, import_vue14.useJsonFormsControl)(
+      props
+    );
+    const errorMessage = (0, import_vue15.computed)(() => trimmedOrUndefined(control.value.errors));
+    const modelValue = (0, import_vue15.computed)(() => {
       const v = control.value.data;
       return v === null || v === void 0 ? "" : String(v);
     });
@@ -490,12 +570,12 @@ var NuxtUiNumberControl = (0, import_vue13.defineComponent)({
     }
     return () => {
       if (!control.value.visible) return null;
-      const UFormField = (0, import_vue13.resolveComponent)("UFormField");
-      const UInput = (0, import_vue13.resolveComponent)("UInput");
-      return (0, import_vue13.h)(
+      const UFormField = (0, import_vue15.resolveComponent)("UFormField");
+      const UInput = (0, import_vue15.resolveComponent)("UInput");
+      return (0, import_vue15.h)(
         "div",
         {},
-        (0, import_vue13.h)(
+        (0, import_vue15.h)(
           UFormField,
           {
             label: control.value.label,
@@ -504,7 +584,7 @@ var NuxtUiNumberControl = (0, import_vue13.defineComponent)({
             error: errorMessage.value
           },
           {
-            default: () => (0, import_vue13.h)(UInput, {
+            default: () => (0, import_vue15.h)(UInput, {
               type: "number",
               inputmode: "decimal",
               modelValue: modelValue.value,
@@ -521,24 +601,24 @@ var NuxtUiNumberControl = (0, import_vue13.defineComponent)({
 });
 
 // src/renderers/controls/NuxtUiStringControl.ts
-var import_vue14 = require("@jsonforms/vue");
-var import_vue15 = require("vue");
-var NuxtUiStringControl = (0, import_vue15.defineComponent)({
+var import_vue16 = require("@jsonforms/vue");
+var import_vue17 = require("vue");
+var NuxtUiStringControl = (0, import_vue17.defineComponent)({
   name: "NuxtUiStringControl",
-  props: (0, import_vue14.rendererProps)(),
+  props: (0, import_vue16.rendererProps)(),
   setup(props) {
-    const { control, handleChange } = (0, import_vue14.useJsonFormsControl)(
+    const { control, handleChange } = (0, import_vue16.useJsonFormsControl)(
       props
     );
-    const errorMessage = (0, import_vue15.computed)(() => trimmedOrUndefined(control.value.errors));
+    const errorMessage = (0, import_vue17.computed)(() => trimmedOrUndefined(control.value.errors));
     return () => {
       if (!control.value.visible) return null;
-      const UFormField = (0, import_vue15.resolveComponent)("UFormField");
-      const UInput = (0, import_vue15.resolveComponent)("UInput");
-      return (0, import_vue15.h)(
+      const UFormField = (0, import_vue17.resolveComponent)("UFormField");
+      const UInput = (0, import_vue17.resolveComponent)("UInput");
+      return (0, import_vue17.h)(
         "div",
         {},
-        (0, import_vue15.h)(
+        (0, import_vue17.h)(
           UFormField,
           {
             label: control.value.label,
@@ -547,7 +627,7 @@ var NuxtUiStringControl = (0, import_vue15.defineComponent)({
             error: errorMessage.value
           },
           {
-            default: () => (0, import_vue15.h)(UInput, {
+            default: () => (0, import_vue17.h)(UInput, {
               modelValue: control.value.data ?? "",
               class: "w-full",
               disabled: !control.value.enabled,
@@ -563,24 +643,24 @@ var NuxtUiStringControl = (0, import_vue15.defineComponent)({
 });
 
 // src/renderers/controls/NuxtUiTextareaControl.ts
-var import_vue16 = require("@jsonforms/vue");
-var import_vue17 = require("vue");
-var NuxtUiTextareaControl = (0, import_vue17.defineComponent)({
+var import_vue18 = require("@jsonforms/vue");
+var import_vue19 = require("vue");
+var NuxtUiTextareaControl = (0, import_vue19.defineComponent)({
   name: "NuxtUiTextareaControl",
-  props: (0, import_vue16.rendererProps)(),
+  props: (0, import_vue18.rendererProps)(),
   setup(props) {
-    const { control, handleChange } = (0, import_vue16.useJsonFormsControl)(
+    const { control, handleChange } = (0, import_vue18.useJsonFormsControl)(
       props
     );
-    const errorMessage = (0, import_vue17.computed)(() => trimmedOrUndefined(control.value.errors));
+    const errorMessage = (0, import_vue19.computed)(() => trimmedOrUndefined(control.value.errors));
     return () => {
       if (!control.value.visible) return null;
-      const UFormField = (0, import_vue17.resolveComponent)("UFormField");
-      const UTextarea = (0, import_vue17.resolveComponent)("UTextarea");
-      return (0, import_vue17.h)(
+      const UFormField = (0, import_vue19.resolveComponent)("UFormField");
+      const UTextarea = (0, import_vue19.resolveComponent)("UTextarea");
+      return (0, import_vue19.h)(
         "div",
         {},
-        (0, import_vue17.h)(
+        (0, import_vue19.h)(
           UFormField,
           {
             label: control.value.label,
@@ -589,7 +669,7 @@ var NuxtUiTextareaControl = (0, import_vue17.defineComponent)({
             error: errorMessage.value
           },
           {
-            default: () => (0, import_vue17.h)(UTextarea, {
+            default: () => (0, import_vue19.h)(UTextarea, {
               modelValue: control.value.data ?? "",
               class: "w-full",
               disabled: !control.value.enabled,
@@ -606,37 +686,37 @@ var NuxtUiTextareaControl = (0, import_vue17.defineComponent)({
 });
 
 // src/renderers/layouts/NuxtUiCategorizationRenderer.ts
-var import_vue18 = require("@jsonforms/vue");
-var import_vue19 = require("vue");
-var NuxtUiCategorizationRenderer = (0, import_vue19.defineComponent)({
+var import_vue20 = require("@jsonforms/vue");
+var import_vue21 = require("vue");
+var NuxtUiCategorizationRenderer = (0, import_vue21.defineComponent)({
   name: "NuxtUiCategorizationRenderer",
-  components: { DispatchRenderer: import_vue18.DispatchRenderer },
-  props: (0, import_vue18.rendererProps)(),
+  components: { DispatchRenderer: import_vue20.DispatchRenderer },
+  props: (0, import_vue20.rendererProps)(),
   setup(props) {
-    const { layout, categories } = (0, import_vue18.useJsonFormsCategorization)(
+    const { layout, categories } = (0, import_vue20.useJsonFormsCategorization)(
       props
     );
     return () => {
       if (!layout.value.visible) return null;
-      return (0, import_vue19.h)(
+      return (0, import_vue21.h)(
         "div",
         { class: "flex flex-col gap-6" },
         categories.map((categoryRef, catIndex) => {
           const category = categoryRef.value;
           const elements = category.uischema.elements ?? [];
-          return (0, import_vue19.h)(
+          return (0, import_vue21.h)(
             "div",
             { key: `${layout.value.path}-cat-${catIndex}`, class: "flex flex-col gap-3" },
             [
-              category.label ? (0, import_vue19.h)("div", { class: "text-sm font-semibold" }, category.label) : null,
-              (0, import_vue19.h)(
+              category.label ? (0, import_vue21.h)("div", { class: "text-sm font-semibold" }, category.label) : null,
+              (0, import_vue21.h)(
                 "div",
                 { class: "flex flex-col gap-3" },
                 elements.map(
-                  (element, index) => (0, import_vue19.h)(
+                  (element, index) => (0, import_vue21.h)(
                     "div",
                     { key: `${category.path}-${index}` },
-                    (0, import_vue19.h)(import_vue18.DispatchRenderer, {
+                    (0, import_vue21.h)(import_vue20.DispatchRenderer, {
                       schema: category.schema,
                       uischema: element,
                       path: category.path,
@@ -656,29 +736,29 @@ var NuxtUiCategorizationRenderer = (0, import_vue19.defineComponent)({
 });
 
 // src/renderers/layouts/NuxtUiCategoryRenderer.ts
-var import_vue20 = require("@jsonforms/vue");
-var import_vue21 = require("vue");
-var NuxtUiCategoryRenderer = (0, import_vue21.defineComponent)({
+var import_vue22 = require("@jsonforms/vue");
+var import_vue23 = require("vue");
+var NuxtUiCategoryRenderer = (0, import_vue23.defineComponent)({
   name: "NuxtUiCategoryRenderer",
-  components: { DispatchRenderer: import_vue20.DispatchRenderer },
-  props: (0, import_vue20.rendererProps)(),
+  components: { DispatchRenderer: import_vue22.DispatchRenderer },
+  props: (0, import_vue22.rendererProps)(),
   setup(props) {
-    const { layout } = (0, import_vue20.useJsonFormsLayout)(
+    const { layout } = (0, import_vue22.useJsonFormsLayout)(
       props
     );
     return () => {
       if (!layout.value.visible) return null;
       const elements = layout.value.uischema.elements ?? [];
-      return (0, import_vue21.h)("div", { class: "flex flex-col gap-3" }, [
-        layout.value.label ? (0, import_vue21.h)("div", { class: "text-sm font-semibold" }, layout.value.label) : null,
-        (0, import_vue21.h)(
+      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)(
           "div",
           { class: "flex flex-col gap-3" },
           elements.map(
-            (element, index) => (0, import_vue21.h)(
+            (element, index) => (0, import_vue23.h)(
               "div",
               { key: `${layout.value.path}-${index}` },
-              (0, import_vue21.h)(import_vue20.DispatchRenderer, {
+              (0, import_vue23.h)(import_vue22.DispatchRenderer, {
                 schema: layout.value.schema,
                 uischema: element,
                 path: layout.value.path,
@@ -695,29 +775,29 @@ var NuxtUiCategoryRenderer = (0, import_vue21.defineComponent)({
 });
 
 // src/renderers/layouts/NuxtUiGroupRenderer.ts
-var import_vue22 = require("@jsonforms/vue");
-var import_vue23 = require("vue");
-var NuxtUiGroupRenderer = (0, import_vue23.defineComponent)({
+var import_vue24 = require("@jsonforms/vue");
+var import_vue25 = require("vue");
+var NuxtUiGroupRenderer = (0, import_vue25.defineComponent)({
   name: "NuxtUiGroupRenderer",
-  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: "rounded border p-3" }, [
-        layout.value.label ? (0, import_vue23.h)("div", { class: "mb-3 text-sm font-semibold" }, layout.value.label) : null,
-        (0, import_vue23.h)(
+      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)(
           "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,
@@ -734,27 +814,27 @@ var NuxtUiGroupRenderer = (0, import_vue23.defineComponent)({
 });
 
 // src/renderers/layouts/NuxtUiHorizontalLayoutRenderer.ts
-var import_vue24 = require("@jsonforms/vue");
-var import_vue25 = require("vue");
-var NuxtUiHorizontalLayoutRenderer = (0, import_vue25.defineComponent)({
+var import_vue26 = require("@jsonforms/vue");
+var import_vue27 = require("vue");
+var NuxtUiHorizontalLayoutRenderer = (0, import_vue27.defineComponent)({
   name: "NuxtUiHorizontalLayoutRenderer",
-  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)(
+      return (0, import_vue27.h)(
         "div",
         { class: "flex flex-col gap-3 md:flex-row md:flex-wrap" },
         elements.map(
-          (element, index) => (0, import_vue25.h)(
+          (element, index) => (0, import_vue27.h)(
             "div",
             { key: `${layout.value.path}-${index}`, class: "min-w-0 flex-1" },
-            (0, import_vue25.h)(import_vue24.DispatchRenderer, {
+            (0, import_vue27.h)(import_vue26.DispatchRenderer, {
               schema: layout.value.schema,
               uischema: element,
               path: layout.value.path,
@@ -770,18 +850,18 @@ var NuxtUiHorizontalLayoutRenderer = (0, import_vue25.defineComponent)({
 });
 
 // src/renderers/layouts/NuxtUiLabelRenderer.ts
-var import_vue26 = require("@jsonforms/vue");
-var import_vue27 = require("vue");
-var NuxtUiLabelRenderer = (0, import_vue27.defineComponent)({
+var import_vue28 = require("@jsonforms/vue");
+var import_vue29 = require("vue");
+var NuxtUiLabelRenderer = (0, import_vue29.defineComponent)({
   name: "NuxtUiLabelRenderer",
-  props: (0, import_vue26.rendererProps)(),
+  props: (0, import_vue28.rendererProps)(),
   setup(props) {
-    const { label } = (0, import_vue26.useJsonFormsLabel)(
+    const { label } = (0, import_vue28.useJsonFormsLabel)(
       props
     );
     return () => {
       if (!label.value.visible) return null;
-      return (0, import_vue27.h)(
+      return (0, import_vue29.h)(
         "div",
         { class: "text-sm text-gray-600 dark:text-gray-300" },
         label.value.text
@@ -791,27 +871,27 @@ var NuxtUiLabelRenderer = (0, import_vue27.defineComponent)({
 });
 
 // src/renderers/layouts/NuxtUiVerticalLayoutRenderer.ts
-var import_vue28 = require("@jsonforms/vue");
-var import_vue29 = require("vue");
-var NuxtUiVerticalLayoutRenderer = (0, import_vue29.defineComponent)({
+var import_vue30 = require("@jsonforms/vue");
+var import_vue31 = require("vue");
+var NuxtUiVerticalLayoutRenderer = (0, import_vue31.defineComponent)({
   name: "NuxtUiVerticalLayoutRenderer",
-  components: { DispatchRenderer: import_vue28.DispatchRenderer },
-  props: (0, import_vue28.rendererProps)(),
+  components: { DispatchRenderer: import_vue30.DispatchRenderer },
+  props: (0, import_vue30.rendererProps)(),
   setup(props) {
-    const { layout } = (0, import_vue28.useJsonFormsLayout)(
+    const { layout } = (0, import_vue30.useJsonFormsLayout)(
       props
     );
     return () => {
       if (!layout.value.visible) return null;
       const elements = layout.value.uischema.elements ?? [];
-      return (0, import_vue29.h)(
+      return (0, import_vue31.h)(
         "div",
         { class: "flex flex-col gap-3" },
         elements.map(
-          (element, index) => (0, import_vue29.h)(
+          (element, index) => (0, import_vue31.h)(
             "div",
             { key: `${layout.value.path}-${index}` },
-            (0, import_vue29.h)(import_vue28.DispatchRenderer, {
+            (0, import_vue31.h)(import_vue30.DispatchRenderer, {
               schema: layout.value.schema,
               uischema: element,
               path: layout.value.path,
@@ -828,65 +908,94 @@ var NuxtUiVerticalLayoutRenderer = (0, import_vue29.defineComponent)({
 
 // src/nuxtUiRenderers.ts
 var RANK = 10;
+var ENUM_RANK = RANK + 1;
+var isMultiEnumControl = (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;
+  }
+  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" ? import_core3.Resolve.schema(rootSchema, items.$ref, rootSchema) : items;
+  return (0, import_core3.isEnumSchema)(resolvedItems);
+};
 var nuxtUiRenderers = [
   // Layouts
   {
     tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("VerticalLayout")),
-    renderer: (0, import_vue30.markRaw)(NuxtUiVerticalLayoutRenderer)
+    renderer: (0, import_vue32.markRaw)(NuxtUiVerticalLayoutRenderer)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("HorizontalLayout")),
-    renderer: (0, import_vue30.markRaw)(NuxtUiHorizontalLayoutRenderer)
+    renderer: (0, import_vue32.markRaw)(NuxtUiHorizontalLayoutRenderer)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("Group")),
-    renderer: (0, import_vue30.markRaw)(NuxtUiGroupRenderer)
+    renderer: (0, import_vue32.markRaw)(NuxtUiGroupRenderer)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("Categorization")),
-    renderer: (0, import_vue30.markRaw)(NuxtUiCategorizationRenderer)
+    renderer: (0, import_vue32.markRaw)(NuxtUiCategorizationRenderer)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("Category")),
-    renderer: (0, import_vue30.markRaw)(NuxtUiCategoryRenderer)
+    renderer: (0, import_vue32.markRaw)(NuxtUiCategoryRenderer)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, (0, import_core3.uiTypeIs)("Label")),
-    renderer: (0, import_vue30.markRaw)(NuxtUiLabelRenderer)
+    renderer: (0, import_vue32.markRaw)(NuxtUiLabelRenderer)
   },
   // Complex schemas
   {
     tester: (0, import_core3.rankWith)(RANK, (0, import_core3.schemaTypeIs)("array")),
-    renderer: (0, import_vue30.markRaw)(NuxtUiArrayListRenderer)
+    renderer: (0, import_vue32.markRaw)(NuxtUiArrayListRenderer)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, import_core3.isObjectControl),
-    renderer: (0, import_vue30.markRaw)(NuxtUiObjectRenderer)
+    renderer: (0, import_vue32.markRaw)(NuxtUiObjectRenderer)
   },
   // Primitive controls
   {
     tester: (0, import_core3.rankWith)(RANK, import_core3.isMultiLineControl),
-    renderer: (0, import_vue30.markRaw)(NuxtUiTextareaControl)
-  },
-  {
-    tester: (0, import_core3.rankWith)(RANK, import_core3.isStringControl),
-    renderer: (0, import_vue30.markRaw)(NuxtUiStringControl)
+    renderer: (0, import_vue32.markRaw)(NuxtUiTextareaControl)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, import_core3.isNumberControl),
-    renderer: (0, import_vue30.markRaw)(NuxtUiNumberControl)
+    renderer: (0, import_vue32.markRaw)(NuxtUiNumberControl)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, import_core3.isIntegerControl),
-    renderer: (0, import_vue30.markRaw)(NuxtUiIntegerControl)
+    renderer: (0, import_vue32.markRaw)(NuxtUiIntegerControl)
   },
   {
     tester: (0, import_core3.rankWith)(RANK, import_core3.isBooleanControl),
-    renderer: (0, import_vue30.markRaw)(NuxtUiBooleanControl)
+    renderer: (0, import_vue32.markRaw)(NuxtUiBooleanControl)
   },
   {
-    tester: (0, import_core3.rankWith)(RANK, import_core3.isEnumControl),
-    renderer: (0, import_vue30.markRaw)(NuxtUiEnumControl)
+    // Multi-enum must outrank generic array renderer and string renderer.
+    tester: (0, import_core3.rankWith)(ENUM_RANK, isMultiEnumControl),
+    renderer: (0, import_vue32.markRaw)(NuxtUiMultiEnumControl)
+  },
+  {
+    // 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)
+  },
+  {
+    tester: (0, import_core3.rankWith)(RANK, import_core3.isStringControl),
+    renderer: (0, import_vue32.markRaw)(NuxtUiStringControl)
   }
 ];
 // Annotate the CommonJS export names for ESM import in node: