jedison 0.3.21 → 0.3.23

package/dist/esm/jedison.js

@@ -1810,11 +1810,15 @@ class Instance extends EventEmitter {
    * Returns the data that will replace placeholders in titles, descriptions (e.g. "{{ i1 }} {{ value.title }}")
    */
   getTemplateData() {
-    return {
+    const templateData = {
       ...this.arrayTemplateData,
       value: this.getValue(),
       settings: this.jedison.options.settings
     };
+    if (this.parent) {
+      templateData.parent = this.parent.getTemplateData();
+    }
+    return templateData;
   }
   /**
    * Sets the instance value
@@ -1927,6 +1931,7 @@ class Editor {
     this.purifyEnabled = false;
     this.title = null;
     this.description = null;
+    this.storedEventListeners = [];
     this.init();
     this.build();
     this.setAttributes();
@@ -2035,6 +2040,20 @@ class Editor {
    */
   addEventListeners() {
   }
+  /**
+   * Clears any stored event listeners that might persist
+   * This method can be overridden by subclasses to provide custom cleanup logic
+   */
+  clearStoredEventListeners() {
+    if (this.storedEventListeners) {
+      this.storedEventListeners.forEach((listener) => {
+        if (listener.element && listener.handler) {
+          listener.element.removeEventListener(listener.eventType || "click", listener.handler);
+        }
+      });
+    }
+    this.storedEventListeners = [];
+  }
   /**
    * Shows validation error messages in the editor container.
    */
@@ -2191,6 +2210,29 @@ class Editor {
   sanitize(value) {
     return value;
   }
+  /**
+   * Refreshes the JSON data input size to match content
+   */
+  refreshJsonDataInputSize() {
+    if (this.control && this.control.jsonData && this.control.jsonData.input) {
+      const input = this.control.jsonData.input;
+      input.style.height = "auto";
+      input.style.height = input.scrollHeight + "px";
+      setTimeout(() => {
+        if (input) {
+          input.scrollTop = 0;
+        }
+      });
+    }
+  }
+  /**
+   * Refreshes the JSON data input with current instance value
+   */
+  refreshJsonData() {
+    if (this.control && this.control.jsonData && this.control.jsonData.input) {
+      this.control.jsonData.input.value = JSON.stringify(this.instance.getValue(), null, 2);
+    }
+  }
   /**
    * Destroys the editor
    */
@@ -3632,19 +3674,6 @@ class EditorObject extends Editor {
       });
     }
   }
-  refreshJsonDataInputSize() {
-    const input = this.control.jsonData.input;
-    input.style.height = "auto";
-    input.style.height = input.scrollHeight + "px";
-    setTimeout(() => {
-      if (input) {
-        input.scrollTop = 0;
-      }
-    });
-  }
-  refreshJsonData() {
-    this.control.jsonData.input.value = JSON.stringify(this.instance.getValue(), null, 2);
-  }
   refreshEditors() {
     while (this.control.childrenSlot.firstChild) {
       this.control.childrenSlot.removeChild(this.control.childrenSlot.firstChild);
@@ -3803,15 +3832,32 @@ class EditorArray extends Editor {
       startCollapsed: getSchemaXOption(this.instance.schema, "startCollapsed") ?? this.instance.jedison.options.startCollapsed,
       readOnly: this.instance.isReadOnly(),
       info: this.getInfo(),
+      editJsonData: getSchemaXOption(this.instance.schema, "editJsonData") ?? this.instance.jedison.options.editJsonData,
       arrayAdd: getSchemaXOption(this.instance.schema, "arrayAdd") ?? this.instance.jedison.options.arrayAdd,
       arrayAddContent: getSchemaXOption(this.instance.schema, "arrayAddContent") ?? this.instance.jedison.translator.translate("arrayAdd"),
       collapseToggleContent: getSchemaXOption(this.instance.schema, "collapseToggleContent") ?? this.instance.jedison.translator.translate("collapseToggle")
     });
+    this.control.jsonData.input.value = JSON.stringify(this.instance.getValue(), null, 2);
   }
   addEventListeners() {
     this.control.addBtn.addEventListener("click", () => {
       this.instance.addItem("user");
     });
+    this.addJsonDataEventListeners();
+  }
+  addJsonDataEventListeners() {
+    this.control.jsonData.saveBtn.addEventListener("click", () => {
+      try {
+        const inputValue = JSON.parse(this.control.jsonData.input.value);
+        this.instance.setValue(inputValue, true, "user");
+        this.control.jsonData.dialog.close();
+      } catch (error) {
+        alert("Invalid JSON");
+      }
+    });
+    this.control.jsonData.toggle.addEventListener("click", () => {
+      this.refreshJsonDataInputSize();
+    });
   }
   getErrorFeedback(config) {
     return this.theme.getAlert(config);
@@ -3897,6 +3943,7 @@ class EditorArray extends Editor {
     }
   }
   refreshUI() {
+    super.refreshUI();
     const minItems2 = getSchemaMinItems(this.instance.schema);
     const arrayDelete = getSchemaXOption(this.instance.schema, "arrayDelete") ?? this.instance.jedison.options.arrayDelete;
     const arrayMove = getSchemaXOption(this.instance.schema, "arrayMove") ?? this.instance.jedison.options.arrayMove;
@@ -3935,6 +3982,7 @@ class EditorArray extends Editor {
       child.ui.refreshUI();
     });
     this.refreshAddBtn();
+    this.refreshJsonData();
   }
 }
 class EditorArrayTable extends EditorArray {
@@ -3946,6 +3994,7 @@ class EditorArrayTable extends EditorArray {
       this.activeItemIndex = this.instance.value.length;
       this.instance.addItem("user");
     });
+    this.addJsonDataEventListeners();
   }
   isSortable() {
     return window.Sortable && isSet(getSchemaXOption(this.instance.schema, "sortable"));
@@ -4007,6 +4056,7 @@ class EditorArrayTable extends EditorArray {
     });
     this.refreshSortable(table.tbody);
     this.refreshAddBtn();
+    this.refreshJsonData();
     this.refreshDisabledState();
     this.refreshScrollPosition(table.container);
     table.container.addEventListener("scroll", () => {
@@ -4056,6 +4106,7 @@ class EditorArrayTableObject extends EditorArray {
       this.activeItemIndex = this.instance.value.length;
       this.instance.addItem("user");
     });
+    this.addJsonDataEventListeners();
   }
   isSortable() {
     return window.Sortable && isSet(getSchemaXOption(this.instance.schema, "sortable"));
@@ -4133,6 +4184,7 @@ class EditorArrayTableObject extends EditorArray {
     });
     this.refreshSortable(table.tbody);
     this.refreshAddBtn();
+    this.refreshJsonData();
     this.refreshDisabledState();
     this.refreshScrollPosition(table.container);
     table.container.addEventListener("scroll", () => {
@@ -4253,10 +4305,11 @@ class EditorArrayNav extends EditorArray {
       this.activeItemIndex = this.instance.value.length;
       this.instance.addItem("user");
     });
+    this.addJsonDataEventListeners();
   }
   refreshUI() {
-    this.refreshDisabledState();
     this.control.childrenSlot.innerHTML = "";
+    this.clearStoredEventListeners();
     const format2 = getSchemaXOption(this.instance.schema, "format");
     const formatParts = format2.split("-");
     const variant = formatParts[1];
@@ -4292,12 +4345,7 @@ class EditorArrayNav extends EditorArray {
       const schemaOptionTitleTemplate = getSchemaXOption(this.instance.schema, "titleTemplate");
       if (schemaOptionTitleTemplate) {
         const template = schemaOptionTitleTemplate;
-        const data = {
-          i0: index2,
-          i1: index2 + 1,
-          value: child.getValue(),
-          settings: this.instance.jedison.options.settings
-        };
+        const data = child.getTemplateData();
         titleTemplate = compileTemplate(template, data) ?? childTitle;
       }
       const active = index2 === this.activeItemIndex;
@@ -4309,8 +4357,14 @@ class EditorArrayNav extends EditorArray {
         active
       });
       arrayActions.appendChild(btnGroup);
-      list.addEventListener("click", () => {
+      const clickHandler = () => {
         this.activeItemIndex = index2;
+      };
+      list.addEventListener("click", clickHandler);
+      this.storedEventListeners.push({
+        element: list,
+        handler: clickHandler,
+        eventType: "click"
       });
       this.theme.setTabPaneAttributes(child.ui.control.container, active, id);
       tabList.appendChild(list);
@@ -4327,7 +4381,9 @@ class EditorArrayNav extends EditorArray {
         moveDownBtn.setAttribute("disabled", "");
       }
     });
+    this.refreshDisabledState();
     this.refreshAddBtn();
+    this.refreshJsonData();
   }
 }
 class EditorMultiple extends Editor {
@@ -6580,7 +6636,7 @@ class Theme {
     });
     const fieldset = this.getFieldset();
     const info = this.getInfo(config.info);
-    const { legend, legendText } = this.getLegend({
+    const { legend, legendText, infoContainer } = this.getLegend({
       content: config.title,
       id: config.id,
       titleHidden: config.titleHidden
@@ -6588,6 +6644,9 @@ class Theme {
     const description = this.getDescription({
       content: config.description
     });
+    const jsonData = this.getJsonData({
+      id: "json-data-" + config.id
+    });
     const collapse = this.getCollapse({
       id: collapseId,
       startCollapsed: config.startCollapsed
@@ -6604,9 +6663,12 @@ class Theme {
       this.infoAsModal(info, config.id, config.info);
     }
     container.appendChild(fieldset);
+    if (config.editJsonData) {
+      container.appendChild(jsonData.dialog);
+    }
     fieldset.appendChild(legend);
     if (isObject(config.info)) {
-      legendText.appendChild(info.container);
+      infoContainer.appendChild(info.container);
     }
     fieldset.appendChild(collapse);
     collapse.appendChild(body);
@@ -6616,6 +6678,9 @@ class Theme {
     body.appendChild(messages);
     legend.appendChild(actions);
     actions.appendChild(btnGroup);
+    if (config.editJsonData) {
+      btnGroup.appendChild(jsonData.toggle);
+    }
     if (isSet(config.arrayAdd) && config.arrayAdd === true) {
       btnGroup.appendChild(addBtn);
     }
@@ -6633,6 +6698,7 @@ class Theme {
       childrenSlot,
       btnGroup,
       addBtn,
+      jsonData,
       legend,
       legendText
     };
@@ -8394,6 +8460,7 @@ class ThemeBootstrap5 extends Theme {
 const index = {
   Schema,
   Utils,
+  Editor,
   EditorBoolean,
   EditorBooleanRadios: EditorRadios,
   EditorBooleanSelect,