jedison 1.9.1 → 1.10.1

package/dist/esm/jedison.js

@@ -1821,8 +1821,6 @@ class Instance extends EventEmitter {
     this.children = [];
     this.ui = null;
     this.isDirty = false;
-    this.cachedErrors = null;
-    this.cachedErrorsValue = void 0;
     this.watched = {};
     this.key = this.path.split(this.jedison.pathSeparator).pop();
     this.arrayTemplateData = config.arrayTemplateData || {};
@@ -2034,7 +2032,6 @@ class Instance extends EventEmitter {
     }
     this.value = newValue;
     this.isDirty = true;
-    this.cachedErrors = null;
     this.emit("set-value", newValue, initiator);
     this.emit("change", initiator);
     this.jedison.emit("instance-change", this, initiator);
@@ -2055,15 +2052,9 @@ class Instance extends EventEmitter {
     if (!this.isActive) {
       return [];
     }
-    if (this.cachedErrorsValue === this.value && this.cachedErrors !== null) {
-      return this.cachedErrors;
-    }
-    const errors = removeDuplicatesFromArray(
+    return removeDuplicatesFromArray(
       this.jedison.validator.getErrors(this.getValueRaw(), this.originalSchema, this.getKey(), this.path)
     );
-    this.cachedErrorsValue = this.value;
-    this.cachedErrors = errors;
-    return errors;
   }
   /**
    * Returns true if any leaf descendant is showing validation errors.
@@ -2481,6 +2472,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);
     }
@@ -2699,6 +2691,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();
     });
@@ -2933,7 +2928,6 @@ class InstanceObject extends Instance {
       Object.keys(value).forEach((propertyName) => {
         const matchesPattern = compiledPatterns.some((re) => re.test(propertyName));
         if (!hasOwn(this.properties, propertyName) && !matchesPattern) {
-          console.warn("deleting", propertyName);
           delete value[propertyName];
         }
       });
@@ -4894,7 +4888,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);
         }
@@ -5032,7 +5026,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({
@@ -5045,7 +5039,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);
       }
@@ -5393,6 +5387,16 @@ class EditorMultiple extends Editor {
     if (this.embedSwitcher) {
       this.control.header.style.display = "none";
     }
+    this.instance.on("change", () => {
+      const jedison = this.instance.jedison;
+      const errors = jedison.getErrors(["error", "warning"]);
+      const prefix = this.instance.path + "/";
+      for (const inst of jedison.instances.values()) {
+        if (inst.ui && inst.path.startsWith(prefix)) {
+          inst.ui.showValidationErrors(errors);
+        }
+      }
+    });
   }
   adaptForTable(td) {
     this.theme.adaptForTableMultipleControl(this.control, td);
@@ -5632,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");
@@ -5775,16 +5842,20 @@ class EditorNumberRaty extends EditorNumber {
     });
     try {
       const ratyOptions = getSchemaXOption(this.instance.schema, "raty") ?? {};
-      this.raty = new Raty(this.control.placeholder, Object.assign({}, ratyOptions), {
+      this.raty = new Raty(this.control.placeholder, Object.assign({}, ratyOptions, {
         click: (score) => {
           this.instance.setValue(score, true, "user");
         }
-      });
+      }));
       this.raty.init();
     } catch (e) {
       console.error("Raty is not available or not loaded correctly.", e);
     }
   }
+  adaptForTable() {
+    this.theme.visuallyHidden(this.control.label);
+    this.theme.visuallyHidden(this.control.description);
+  }
   refreshDisabledState() {
     if (this.disabled || this.readOnly) {
       this.raty.readOnly(true);
@@ -6152,6 +6223,7 @@ class UiResolver {
       EditorStringSimpleMDE,
       EditorStringQuill,
       EditorStringJodit,
+      EditorStringPickr,
       EditorStringFlatpickr,
       EditorStringIMask,
       EditorStringAce,
@@ -6639,13 +6711,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() {
@@ -6957,6 +7031,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 = "";
@@ -7465,7 +7543,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();
       }
@@ -7476,7 +7554,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();
       }
@@ -7490,7 +7568,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();
       }
@@ -7754,6 +7832,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;
@@ -7764,7 +7843,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();
       }
@@ -9910,6 +9989,7 @@ const index = {
   EditorStringSelect,
   EditorStringTextarea,
   EditorStringAwesomplete,
+  EditorStringPickr,
   EditorStringInput,
   EditorNumberRange,
   EditorNumber,