jedison 1.13.0 → 1.15.0

package/dist/esm/jedison.js

@@ -4644,6 +4644,59 @@ class EditorObjectHorizontal extends EditorObject {
     });
   }
 }
+class EditorObjectRadios extends Editor {
+  static resolves(schema) {
+    const format2 = getSchemaXOption(schema, "format");
+    return getSchemaType(schema) === "object" && (format2 === "radios" || format2 === "radios-inline") && isSet(getSchemaEnum(schema));
+  }
+  build() {
+    const enumValues = getSchemaEnum(this.instance.schema);
+    const enumTitles = getSchemaXOption(this.instance.schema, "enumTitles") || enumValues.map((v) => JSON.stringify(v));
+    const inline = getSchemaXOption(this.instance.schema, "format") === "radios-inline";
+    this.control = this.theme.getRadiosControl({
+      title: this.getTitle(),
+      description: this.getDescription(),
+      values: enumTitles,
+      titles: enumTitles,
+      id: this.getIdFromPath(this.instance.path),
+      titleHidden: getSchemaXOption(this.instance.schema, "titleHidden"),
+      inline,
+      info: this.getInfo()
+    });
+    this.control.radios.forEach((radio, index2) => {
+      radio._enumValue = enumValues[index2];
+    });
+  }
+  addEventListeners() {
+    this.control.radios.forEach((radio) => {
+      radio.addEventListener("change", () => {
+        this.instance.setValue(radio._enumValue, true, "user");
+      });
+    });
+  }
+  refreshUI() {
+    this.refreshDisabledState();
+    const currentValue = this.instance.getValue();
+    this.control.radios.forEach((radio) => {
+      radio.checked = equal(radio._enumValue, currentValue);
+    });
+  }
+  setAriaInvalid(invalid) {
+    this.control.radios.forEach((radio) => {
+      if (invalid) {
+        radio.setAttribute("aria-invalid", "true");
+      } else {
+        radio.removeAttribute("aria-invalid");
+      }
+    });
+  }
+  adaptForTable() {
+    this.theme.adaptForTableRadiosControl(this.control);
+  }
+  adaptForHorizontal(labelCol, inputCol) {
+    this.theme.adaptForHorizontalRadiosControl(this.control, labelCol, inputCol);
+  }
+}
 class EditorArray extends Editor {
   static resolves(schema) {
     return getSchemaType(schema) === "array";
@@ -5602,6 +5655,12 @@ class EditorMultiple extends Editor {
         });
       });
     }
+    if (this.switcherInput === "select-inline") {
+      this.control.switcher.input.addEventListener("change", () => {
+        const index2 = Number(this.control.switcher.input.value);
+        this.instance.switchInstance(index2, void 0, "user");
+      });
+    }
   }
   refreshUI() {
     var _a;
@@ -5619,7 +5678,7 @@ class EditorMultiple extends Editor {
         this.control.header.appendChild(this.control.switcher.container);
       }
     }
-    if (this.switcherInput === "modal") {
+    if (this.switcherInput === "modal" || this.switcherInput === "select-inline") {
       const childControl = this.instance.activeInstance.ui.control;
       const infoContainer = childControl.infoContainer;
       const titleEl = childControl.legendText || childControl.label;
@@ -5636,6 +5695,9 @@ class EditorMultiple extends Editor {
     if (this.switcherInput === "select") {
       this.control.switcher.input.value = this.instance.index;
     }
+    if (this.switcherInput === "select-inline") {
+      this.control.switcher.input.value = this.instance.index;
+    }
     if (this.switcherInput === "radios" || this.switcherInput === "radios-inline") {
       this.control.switcher.radios.forEach((radio) => {
         const radioIndex = Number(radio.value);
@@ -6597,6 +6659,7 @@ class UiResolver {
       EditorObjectNav,
       EditorObjectAccordion,
       EditorObjectHorizontal,
+      EditorObjectRadios,
       EditorObject,
       EditorArrayChoices,
       EditorArrayCheckboxes,
@@ -7855,6 +7918,7 @@ class Theme {
         config.propertiesContainer.close();
       } else {
         config.propertiesContainer.showModal();
+        config.propertiesContainer.focus();
       }
     });
     return toggle;
@@ -8033,6 +8097,11 @@ class Theme {
    * Group for property activators
    */
   getPropertiesGroup(config = {}) {
+    if (config.accordion && config.name) {
+      const id = "jedi-prop-group-" + config.name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+      const item = this.getAccordionItem({ title: config.name, id });
+      return { container: item.container, group: item.body, name: item.toggle };
+    }
     const container = document.createElement("div");
     container.classList.add("jedi-properties-group-container");
     const group = document.createElement("div");
@@ -8213,7 +8282,8 @@ class Theme {
     dialog.classList.add("jedi-modal-dialog");
     dialog.style.border = "1px solid #6c757d";
     dialog.style.borderRadius = "4px";
-    dialog.style.minWidth = "200px";
+    dialog.style.minWidth = "400px";
+    dialog.style.maxWidth = "90vw";
     return dialog;
   }
   /**
@@ -8790,7 +8860,7 @@ class Theme {
     const messages = this.getMessagesSlot();
     const childrenSlot = this.getChildrenSlot();
     const randomId = generateRandomID(5);
-    const knownSwitchers = ["select", "radios", "radios-inline", "modal"];
+    const knownSwitchers = ["select", "radios", "radios-inline", "modal", "select-inline"];
     const switcherType = knownSwitchers.includes(config.switcher) ? config.switcher : "select";
     let switcher;
     if (switcherType === "select") {
@@ -8826,6 +8896,14 @@ class Theme {
         readOnly: config.readOnly
       });
     }
+    if (switcherType === "select-inline") {
+      switcher = this.getSwitcherSelectInline({
+        values: config.switcherOptionValues,
+        titles: config.switcherOptionsLabels,
+        id: config.id + "-switcher-" + randomId,
+        readOnly: config.readOnly
+      });
+    }
     switcher.container.classList.add("jedi-switcher");
     container.appendChild(header);
     container.appendChild(body);
@@ -9343,6 +9421,31 @@ class Theme {
   setSwitcherOptionActive(btn, active) {
     btn.classList.toggle("jedi-switcher-option-active", active);
   }
+  /**
+   * Compact inline <select> to switch between multiple editors options (no dialog)
+   */
+  getSwitcherSelectInline(config) {
+    const container = document.createElement("span");
+    const input = document.createElement("select");
+    container.classList.add("jedi-switcher-select-inline");
+    container.style.display = "inline-block";
+    input.classList.add("jedi-switcher-select-inline-input");
+    input.style.width = "auto";
+    input.setAttribute("aria-label", "Switch type");
+    if (config.readOnly) {
+      input.setAttribute("disabled", "");
+    }
+    config.values.forEach((value, index2) => {
+      const option = document.createElement("option");
+      option.setAttribute("value", value);
+      if (config.titles && config.titles[index2]) {
+        option.textContent = config.titles[index2];
+      }
+      input.appendChild(option);
+    });
+    container.appendChild(input);
+    return { container, input };
+  }
   /**
    * Another type of error message container used for more complex editors like
    * object, array and multiple editors
@@ -9905,6 +10008,12 @@ class ThemeBootstrap3 extends Theme {
     control.input.classList.add("input-sm");
     return control;
   }
+  getSwitcherSelectInline(config) {
+    const control = super.getSwitcherSelectInline(config);
+    control.container.style.marginBottom = "5px";
+    control.input.classList.add("input-sm");
+    return control;
+  }
   getSwitcherModal(config) {
     const control = super.getSwitcherModal(config);
     control.trigger.classList.add("label", "label-primary");
@@ -10438,6 +10547,12 @@ class ThemeBootstrap4 extends Theme {
     control.input.classList.add("form-control-sm");
     return control;
   }
+  getSwitcherSelectInline(config) {
+    const control = super.getSwitcherSelectInline(config);
+    control.container.classList.add("mb-2");
+    control.input.classList.add("form-control", "form-control-sm");
+    return control;
+  }
   getSwitcherModal(config) {
     const control = super.getSwitcherModal(config);
     control.trigger.classList.add("badge", "badge-primary");
@@ -10983,6 +11098,12 @@ class ThemeBootstrap5 extends Theme {
     control.input.classList.add("form-select-sm");
     return control;
   }
+  getSwitcherSelectInline(config) {
+    const control = super.getSwitcherSelectInline(config);
+    control.container.classList.add("mb-1");
+    control.input.classList.add("form-select", "form-select-sm");
+    return control;
+  }
   getSwitcherModal(config) {
     const control = super.getSwitcherModal(config);
     control.trigger.classList.add("badge", "bg-primary");
@@ -11166,6 +11287,7 @@ const index = {
   EditorObjectNav,
   EditorObjectAccordion,
   EditorObjectHorizontal,
+  EditorObjectRadios,
   EditorObject,
   EditorArrayChoices,
   EditorArrayNav,