jedison 1.9.0 → 1.10.0

package/dist/esm/jedison.js

@@ -116,11 +116,13 @@ function getType(value) {
   }
   return type2;
 }
+const UNSAFE_KEYS = /* @__PURE__ */ new Set(["__proto__", "constructor", "prototype"]);
 function mergeDeep(target, ...sources) {
   if (!sources.length) return target;
   const source = sources.shift();
   if (isObject(target) && isObject(source)) {
     Object.keys(source).forEach((key) => {
+      if (UNSAFE_KEYS.has(key)) return;
       if (isObject(source[key])) {
         if (!target[key]) {
           Object.assign(target, {
@@ -144,6 +146,7 @@ function combineDeep(target, ...sources) {
     target.push(...source);
   } else if (isObject(target) && isObject(source)) {
     Object.keys(source).forEach((key) => {
+      if (UNSAFE_KEYS.has(key)) return;
       if (isObject(source[key])) {
         if (!target[key]) {
           Object.assign(target, {
@@ -2478,6 +2481,7 @@ class Editor {
    * Destroys the editor
    */
   destroy() {
+    this.clearStoredEventListeners();
     if (this.control.container && this.control.container.parentNode) {
       this.control.container.parentNode.removeChild(this.control.container);
     }
@@ -2696,6 +2700,9 @@ class InstanceIfThenElse extends Instance {
     return this.activeInstance ? this.activeInstance.hasNestedValidationErrors() : false;
   }
   destroy() {
+    if (this.instanceWithoutIf) {
+      this.instanceWithoutIf.destroy();
+    }
     this.instances.forEach((instance) => {
       instance.destroy();
     });
@@ -4891,7 +4898,7 @@ class EditorArrayTable extends EditorArray {
           const infoContent = this.getInfo(schemaItems);
           const info = this.theme.getInfo(infoContent);
           if (schemaXInfo.variant === "modal") {
-            this.theme.infoAsModal(info, this.getIdFromPath(this.instance.path), infoContent);
+            this.theme.infoAsModal(info, this.getIdFromPath(this.instance.path) + "-item", infoContent);
           }
           thTitle.appendChild(info.container);
         }
@@ -5029,7 +5036,7 @@ class EditorArrayTableObject extends EditorArray {
       schemaItems = this.instance.jedison.refParser.expand(schemaItems);
     }
     const itemProperties = getSchemaProperties(schemaItems);
-    Object.values(itemProperties).forEach((propertySchema) => {
+    Object.entries(itemProperties).forEach(([propertyKey, propertySchema]) => {
       const th2 = this.theme.getTableHeader();
       if (propertySchema.title) {
         const fakeLabel = this.theme.getFakeLabel({
@@ -5042,7 +5049,7 @@ class EditorArrayTableObject extends EditorArray {
         const infoContent = this.getInfo(propertySchema);
         const info = this.theme.getInfo(infoContent);
         if (schemaXInfo.variant === "modal") {
-          this.theme.infoAsModal(info, this.getIdFromPath(this.instance.path), infoContent);
+          this.theme.infoAsModal(info, this.getIdFromPath(this.instance.path) + "-" + propertyKey, infoContent);
         }
         th2.appendChild(info.container);
       }
@@ -5629,6 +5636,69 @@ class EditorStringJodit extends EditorString {
     super.destroy();
   }
 }
+class EditorStringPickr extends EditorString {
+  static resolves(schema) {
+    const format2 = getSchemaXOption(schema, "format");
+    return isSet(format2) && format2 === "pickr" && window.Pickr && getSchemaType(schema) === "string";
+  }
+  build() {
+    this.control = this.theme.getPlaceholderControl({
+      title: this.getTitle(),
+      description: this.getDescription(),
+      id: this.getIdFromPath(this.instance.path),
+      titleIconClass: getSchemaXOption(this.instance.schema, "titleIconClass"),
+      titleHidden: getSchemaXOption(this.instance.schema, "titleHidden"),
+      info: this.getInfo()
+    });
+    const pickrOptions = getSchemaXOption(this.instance.schema, "pickr") ?? {};
+    try {
+      this.pickr = window.Pickr.create({
+        el: this.control.placeholder,
+        default: this.instance.getValue() || "#000000",
+        comparison: false,
+        ...pickrOptions
+      });
+      const updateValue = (color) => {
+        const value = color ? color.toHEXA().toString() : "";
+        this.updatingFromPickr = true;
+        this.instance.setValue(value, true, "user");
+        this.updatingFromPickr = false;
+      };
+      this.pickr.on("change", (color) => {
+        updateValue(color);
+        this.pickr.applyColor(true);
+      });
+      this.pickr.on("save", updateValue);
+      this.pickr.on("hide", () => updateValue(this.pickr.getColor()));
+      this.refreshUI();
+    } catch (e) {
+      console.error("Pickr is not available or not loaded correctly.", e);
+    }
+  }
+  addEventListeners() {
+  }
+  refreshUI() {
+    if (!this.pickr) return;
+    this.refreshTemplates();
+    if (this.disabled) {
+      this.pickr.disable();
+    } else {
+      this.pickr.enable();
+    }
+    if (!this.updatingFromPickr) {
+      const value = this.instance.getValue();
+      if (value) {
+        this.pickr.setColor(value, true);
+      }
+    }
+  }
+  destroy() {
+    if (this.pickr) {
+      this.pickr.destroyAndRemove();
+    }
+    super.destroy();
+  }
+}
 class EditorStringFlatpickr extends EditorString {
   static resolves(schema) {
     const format2 = getSchemaXOption(schema, "format");
@@ -6149,6 +6219,7 @@ class UiResolver {
       EditorStringSimpleMDE,
       EditorStringQuill,
       EditorStringJodit,
+      EditorStringPickr,
       EditorStringFlatpickr,
       EditorStringIMask,
       EditorStringAce,
@@ -6636,13 +6707,15 @@ class Jedison extends EventEmitter {
           }, 0);
         }
       });
-      document.addEventListener("focus", (event) => {
+      this._onFocus = (event) => {
         this.lastKeyEvent = null;
         this.lastFocusedId = event.target.id;
-      }, true);
-      document.addEventListener("keydown", (event) => {
+      };
+      this._onKeydown = (event) => {
         this.lastKeyEvent = event;
-      });
+      };
+      document.addEventListener("focus", this._onFocus, true);
+      document.addEventListener("keydown", this._onKeydown);
     }
   }
   updateInstancesWatchedData() {
@@ -6954,6 +7027,10 @@ class Jedison extends EventEmitter {
    * Destroy the root instance and it's children
    */
   destroy() {
+    if (this._onFocus) {
+      document.removeEventListener("focus", this._onFocus, true);
+      document.removeEventListener("keydown", this._onKeydown);
+    }
     this.root.destroy();
     if (this.options.container) {
       this.container.innerHTML = "";
@@ -7462,7 +7539,7 @@ class Theme {
     const html = document.createElement("dialog");
     html.classList.add("jedi-properties-slot");
     html.setAttribute("id", config.id);
-    window.addEventListener("click", (event) => {
+    html.addEventListener("click", (event) => {
       if (event.target === html) {
         html.close();
       }
@@ -7473,7 +7550,7 @@ class Theme {
     const html = document.createElement("dialog");
     html.classList.add("jedi-quick-add-property-slot");
     html.setAttribute("id", config.id);
-    window.addEventListener("click", (event) => {
+    html.addEventListener("click", (event) => {
       if (event.target === html) {
         html.close();
       }
@@ -7487,7 +7564,7 @@ class Theme {
     const dialog = document.createElement("dialog");
     dialog.classList.add("jedi-json-data");
     dialog.setAttribute("id", config.id);
-    window.addEventListener("click", (event) => {
+    dialog.addEventListener("click", (event) => {
       if (event.target === dialog) {
         dialog.close();
       }
@@ -7751,6 +7828,7 @@ class Theme {
       icon: "close"
     });
     dialog.classList.add("jedi-modal-dialog");
+    dialog.setAttribute("id", id + "-modal");
     title.classList.add("jedi-modal-title");
     if (isString(config.title)) {
       title.innerHTML = config.title;
@@ -7761,7 +7839,7 @@ class Theme {
     }
     closeBtn.classList.add("jedi-modal-close");
     closeBtn.setAttribute("always-enabled", "");
-    window.addEventListener("click", (event) => {
+    dialog.addEventListener("click", (event) => {
       if (event.target === dialog) {
         dialog.close();
       }
@@ -9907,6 +9985,7 @@ const index = {
   EditorStringSelect,
   EditorStringTextarea,
   EditorStringAwesomplete,
+  EditorStringPickr,
   EditorStringInput,
   EditorNumberRange,
   EditorNumber,