x4js 1.5.29 → 1.5.32

package/lib/esm/index.mjs

@@ -1921,7 +1921,8 @@ var _Component = class extends BaseComponent {
       classes: {},
       dom_events: {},
       uid: _Component.__comp_guid++,
-      inrender: false
+      inrender: false,
+      created: false
     };
     if (this.m_props.cls) {
       this.addClass(this.m_props.cls);
@@ -1976,6 +1977,17 @@ var _Component = class extends BaseComponent {
       append(content);
     }
   }
+  removeChild(item) {
+    if (this.m_props.content) {
+      if (!isArray(this.m_props.content)) {
+        this.m_props.content = [this.m_props.content];
+      }
+      this.m_props.content = this.m_props.content.filter((x) => x !== item);
+    }
+    if (this.dom && item.dom) {
+      this.dom.removeChild(item.dom);
+    }
+  }
   /**
    * 
    */
@@ -2169,10 +2181,10 @@ var _Component = class extends BaseComponent {
     if (this.m_dom) {
       return this.m_dom.getAttribute(name);
     } else {
-      if (!this.m_props.attrs) {
-        return void 0;
+      if (name == "id") {
+        return this.m_props.id;
       }
-      return this.m_props.attrs[name];
+      return this.m_props.attrs ? this.m_props.attrs[name] : void 0;
     }
   }
   /**
@@ -2403,7 +2415,7 @@ var _Component = class extends BaseComponent {
       for (let e in evt) {
         let handlers = evt[e];
         for (let h of handlers) {
-          this.createEvent(e, h);
+          this._createEvent(e, h.listener, h.passive);
         }
       }
     }
@@ -2579,22 +2591,22 @@ var _Component = class extends BaseComponent {
    * this.setDomEvent( 'drag drop', this._handleDrag, this );
    * this.setDomEvent( 'dblclick', this._handleDblClick, this );
    */
-  setDomEvent(type, listener) {
+  setDomEvent(type, listener, passive) {
     let _listener = listener;
-    this._setDomEvent(type, _listener);
+    this._setDomEvent(type, _listener, passive);
   }
-  _setDomEvent(type, listener) {
+  _setDomEvent(type, listener, passive) {
     if (!this.m_iprops.dom_events) {
       this.m_iprops.dom_events = {};
     }
     let listeners = this.m_iprops.dom_events[type];
     if (!listeners) {
-      listeners = this.m_iprops.dom_events[type] = [listener];
+      listeners = this.m_iprops.dom_events[type] = [{ listener, passive }];
     } else {
-      listeners.push(listener);
+      listeners.push({ listener, passive });
     }
     if (this.m_dom) {
-      this.createEvent(type, listener);
+      this._createEvent(type, listener, passive);
     }
   }
   /**
@@ -2618,7 +2630,7 @@ var _Component = class extends BaseComponent {
    * @param name 
    * @param handler 
    */
-  createEvent(name, handler) {
+  _createEvent(name, handler, passive) {
     let _dom = this.m_dom;
     let store = _dom[_x4_el_store];
     if (!store) {
@@ -2633,10 +2645,14 @@ var _Component = class extends BaseComponent {
       _dom["on" + name] = _Component._dispatchUnbubbleEvent;
     } else if (!_Component.__privateEvents[name]) {
       _Component.__privateEvents[name] = true;
-      if (passiveEvents[name]) {
-        x4document.addEventListener(name, _Component._dispatchEvent, { passive: false, capture: true });
+      if (passive === void 0) {
+        if (passiveEvents[name]) {
+          x4document.addEventListener(name, _Component._dispatchEvent, { passive: false, capture: true });
+        } else {
+          x4document.addEventListener(name, _Component._dispatchEvent, true);
+        }
       } else {
-        x4document.addEventListener(name, _Component._dispatchEvent, true);
+        x4document.addEventListener(name, _Component._dispatchEvent, { passive, capture: passive ? true : false });
       }
     }
     if (name === "sizechange") {
@@ -3542,7 +3558,7 @@ var Router = class extends EventSource {
   _getLocation() {
     return this.m_useHash ? "/" + x4document.location.hash.substring(1) : x4document.location.pathname;
   }
-  navigate(uri, notify = true) {
+  navigate(uri, notify = true, replace = false) {
     if (!uri.startsWith("/")) {
       uri = "/" + uri;
     }
@@ -3553,10 +3569,13 @@ var Router = class extends EventSource {
       return;
     }
     if (this.m_useHash) {
-      while (uri.startsWith("/")) {
+      while (uri.at(0) == "/") {
         uri = uri.substring(1);
       }
-      window.history.pushState({}, "", "#" + uri);
+      uri = "#" + uri;
+    }
+    if (replace) {
+      window.history.replaceState({}, "", uri);
     } else {
       window.history.pushState({}, "", uri);
     }
@@ -4780,7 +4799,7 @@ var MenuItem = class extends Component {
     }
     this.setTag("a");
     this.setContent([
-      icon < 0 ? null : new Icon({ icon }),
+      icon ? null : new Icon({ icon }),
       new Label({ flex: 1, text }),
       popIco
     ]);
@@ -5316,11 +5335,138 @@ var PopupListView = class extends Popup {
 };
 __name(PopupListView, "PopupListView");
 
+// src/tooltips.ts
+var tipTmo;
+var tooltip;
+var Tooltip = class extends Component {
+  m_text;
+  set text(text) {
+    this.m_text.text = text;
+  }
+  /** @ignore */
+  render() {
+    this.setClass("@non-maskable", true);
+    this.setContent([
+      new Icon({ icon: "var( --x4-icon-tip )" }),
+      this.m_text = new Label({ text: "help" })
+    ]);
+  }
+  /**
+  * display the menu at a specific position
+  * @param x 
+  * @param y 
+  */
+  displayAt(x, y, align = "top left") {
+    this.show();
+    let halign = "l", valign = "t";
+    if (align.indexOf("right") >= 0) {
+      halign = "r";
+    }
+    if (align.indexOf("bottom") >= 0) {
+      valign = "b";
+    }
+    let rc = x4document.body.getBoundingClientRect(), rm = this.getBoundingRect();
+    if (halign == "r") {
+      x -= rm.width;
+    }
+    if (valign == "b") {
+      y -= rm.height;
+    }
+    if (x + rm.width > rc.right) {
+      x = rc.right - rm.width;
+    }
+    if (y + rm.height > rc.bottom) {
+      y = rc.bottom - rm.height - 17;
+    }
+    this.setStyle({ left: x, top: y });
+  }
+};
+__name(Tooltip, "Tooltip");
+function initTooltips(cb) {
+  if (isTouchDevice()) {
+    return;
+  }
+  let tipTarget = {
+    target: null,
+    x: 0,
+    y: 0
+  };
+  function handle_mpos(event) {
+    tipTarget.x = event.pageX;
+    tipTarget.y = event.pageY;
+  }
+  __name(handle_mpos, "handle_mpos");
+  function handle_mouse(event) {
+    let target = event.target;
+    let tip = null;
+    tipTarget.x = event.pageX + 10;
+    tipTarget.y = event.pageY + 15;
+    while (target) {
+      tip = target.getAttribute("tip");
+      if (tip) {
+        break;
+      }
+      target = target.parentElement;
+    }
+    if (target == tipTarget.target || tooltip && target == tooltip.dom) {
+      return;
+    }
+    if (!target || !tip) {
+      tipTarget.target = null;
+      if (cb) {
+        cb(null);
+      } else {
+        _hideTip();
+      }
+      return;
+    }
+    tipTarget.target = target;
+    if (cb) {
+      cb(null);
+    } else {
+      _hideTip();
+    }
+    if (cb) {
+      cb(tip);
+    } else {
+      tipTmo = setTimeout(() => {
+        if (tooltip === void 0) {
+          tooltip = new Tooltip({});
+          x4document.body.appendChild(tooltip._build());
+        }
+        tooltip.text = tip;
+        tooltip.displayAt(tipTarget.x + 17, tipTarget.y + 17, "top left");
+      }, 700);
+    }
+  }
+  __name(handle_mouse, "handle_mouse");
+  function _hideTip() {
+    if (tipTmo) {
+      clearTimeout(tipTmo);
+    }
+    if (tooltip) {
+      tooltip.hide();
+    }
+  }
+  __name(_hideTip, "_hideTip");
+  x4document.body.addEventListener("mouseover", handle_mouse);
+  x4document.body.addEventListener("mouseout", handle_mouse);
+  x4document.body.addEventListener("mousemove", handle_mpos);
+}
+__name(initTooltips, "initTooltips");
+
 // src/input.ts
 var Input = class extends Component {
+  m_error_tip;
   constructor(props) {
     super(props);
   }
+  componentDisposed() {
+    if (this.m_error_tip) {
+      this.m_error_tip.dispose();
+    }
+    super.componentDisposed();
+  }
   /** @ignore */
   render(props) {
     this.setTag("input");
@@ -5350,6 +5496,22 @@ var Input = class extends Component {
       });
     }
   }
+  showError(text) {
+    if (!this.m_error_tip) {
+      this.m_error_tip = new Tooltip({ cls: "error" });
+      x4document.body.appendChild(this.m_error_tip._build());
+    }
+    let rc = this.getBoundingRect();
+    this.m_error_tip.text = text;
+    this.m_error_tip.displayAt(rc.right, rc.top - 8, "top right");
+    this.addClass("@error");
+  }
+  clearError() {
+    if (this.m_error_tip) {
+      this.m_error_tip.hide();
+      this.removeClass("@error");
+    }
+  }
   getType() {
     return this.m_props.type;
   }
@@ -5357,13 +5519,17 @@ var Input = class extends Component {
       * return the current editor value
       */
   get value() {
+    return this.getValue();
+  }
+  getValue() {
+    const dom = this.dom;
     if (this.dom) {
-      this.m_props.value = this.dom.value;
+      this.m_props.value = dom.value;
     }
     if (this.m_props.uppercase) {
       let upper = this.m_props.value.toUpperCase();
-      if (this.dom && upper != this.m_props.value) {
-        this.dom.value = upper;
+      if (dom && upper != this.m_props.value) {
+        dom.value = upper;
       }
       this.m_props.value = upper;
     }
@@ -5374,6 +5540,9 @@ var Input = class extends Component {
    * @param value - new value to set
    */
   set value(value) {
+    this.setValue(value);
+  }
+  setValue(value) {
     this.m_props.value = value;
     if (this.dom) {
       this.dom.value = value;
@@ -5387,7 +5556,8 @@ var Input = class extends Component {
       if (type) {
         type = type.toLowerCase();
       }
-      let value, dom = this.dom;
+      let value;
+      const dom = this.dom;
       if (type === "file") {
         value = [];
         let files = dom.files;
@@ -5406,6 +5576,11 @@ var Input = class extends Component {
         }
       } else if (type === "date") {
         debugger;
+      } else if (type == "number") {
+        value = this.value;
+        if (value.indexOf(",") >= 0) {
+          value = value.replace(",", ".");
+        }
       } else {
         value = this.value;
       }
@@ -5413,6 +5588,7 @@ var Input = class extends Component {
     }
   }
   setStoreValue(v) {
+    this.clearError();
     if (this.m_props.value_hook) {
       return this.m_props.value_hook.set(v);
     } else {
@@ -5813,7 +5989,7 @@ var Calendar = class extends VLayout {
     } else if (type == "year") {
       let min = this.m_props.minDate?.getFullYear() ?? 1900;
       let max = this.m_props.maxDate?.getFullYear() ?? 2037;
-      for (let m = min; m < max; m++) {
+      for (let m = max; m >= min; m--) {
         items.push(new MenuItem({
           text: "" + m,
           click: () => {
@@ -5879,132 +6055,11 @@ var PopupCalendar = class extends Popup {
 };
 __name(PopupCalendar, "PopupCalendar");
 
-// src/tooltips.ts
-var tipTmo;
-var tooltip;
-var Tooltip = class extends Component {
-  m_text;
-  set text(text) {
-    this.m_text.text = text;
-  }
-  /** @ignore */
-  render() {
-    this.setClass("@non-maskable", true);
-    this.setContent([
-      new Icon({ icon: "var( --x4-icon-tip )" }),
-      this.m_text = new Label({ text: "help" })
-    ]);
-  }
-  /**
-  * display the menu at a specific position
-  * @param x 
-  * @param y 
-  */
-  displayAt(x, y, align = "top left") {
-    this.show();
-    let halign = "l", valign = "t";
-    if (align.indexOf("right") >= 0) {
-      halign = "r";
-    }
-    if (align.indexOf("bottom") >= 0) {
-      valign = "b";
-    }
-    let rc = x4document.body.getBoundingClientRect(), rm = this.getBoundingRect();
-    if (halign == "r") {
-      x -= rm.width;
-    }
-    if (valign == "b") {
-      y -= rm.height;
-    }
-    if (x + rm.width > rc.right) {
-      x = rc.right - rm.width;
-    }
-    if (y + rm.height > rc.bottom) {
-      y = rc.bottom - rm.height - 17;
-    }
-    this.setStyle({ left: x, top: y });
-  }
-};
-__name(Tooltip, "Tooltip");
-function initTooltips(cb) {
-  if (isTouchDevice()) {
-    return;
-  }
-  let tipTarget = {
-    target: null,
-    x: 0,
-    y: 0
-  };
-  function handle_mpos(event) {
-    tipTarget.x = event.pageX;
-    tipTarget.y = event.pageY;
-  }
-  __name(handle_mpos, "handle_mpos");
-  function handle_mouse(event) {
-    let target = event.target;
-    let tip = null;
-    tipTarget.x = event.pageX + 10;
-    tipTarget.y = event.pageY + 15;
-    while (target) {
-      tip = target.getAttribute("tip");
-      if (tip) {
-        break;
-      }
-      target = target.parentElement;
-    }
-    if (target == tipTarget.target || tooltip && target == tooltip.dom) {
-      return;
-    }
-    if (!target || !tip) {
-      tipTarget.target = null;
-      if (cb) {
-        cb(null);
-      } else {
-        _hideTip();
-      }
-      return;
-    }
-    tipTarget.target = target;
-    if (cb) {
-      cb(null);
-    } else {
-      _hideTip();
-    }
-    if (cb) {
-      cb(tip);
-    } else {
-      tipTmo = setTimeout(() => {
-        if (tooltip === void 0) {
-          tooltip = new Tooltip({});
-          x4document.body.appendChild(tooltip._build());
-        }
-        tooltip.text = tip;
-        tooltip.displayAt(tipTarget.x + 17, tipTarget.y + 17, "top left");
-      }, 700);
-    }
-  }
-  __name(handle_mouse, "handle_mouse");
-  function _hideTip() {
-    if (tipTmo) {
-      clearTimeout(tipTmo);
-    }
-    if (tooltip) {
-      tooltip.hide();
-    }
-  }
-  __name(_hideTip, "_hideTip");
-  x4document.body.addEventListener("mouseover", handle_mouse);
-  x4document.body.addEventListener("mouseout", handle_mouse);
-  x4document.body.addEventListener("mousemove", handle_mpos);
-}
-__name(initTooltips, "initTooltips");
-
 // src/textedit.ts
 var reEmail = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 var TextEdit = class extends Component {
   m_cal_popup;
   m_ui_input;
-  m_error_tip;
   constructor(props) {
     super(props);
     this.addClass("@hlayout");
@@ -6016,12 +6071,6 @@ var TextEdit = class extends Component {
       this.focus();
     }
   }
-  componentDisposed() {
-    if (this.m_error_tip) {
-      this.m_error_tip.dispose();
-    }
-    super.componentDisposed();
-  }
   focus() {
     this.m_ui_input.focus();
   }
@@ -6173,29 +6222,28 @@ var TextEdit = class extends Component {
     }
   }
   showError(text) {
-    if (!this.m_error_tip) {
-      this.m_error_tip = new Tooltip({ cls: "error" });
-      x4document.body.appendChild(this.m_error_tip._build());
-    }
-    let rc = this.m_ui_input.getBoundingRect();
-    this.m_error_tip.text = text;
-    this.m_error_tip.displayAt(rc.right, rc.top - 8, "top right");
-    this.addClass("@error");
+    this.m_ui_input.showError(text);
   }
   clearError() {
-    if (this.m_error_tip) {
-      this.m_error_tip.hide();
-      this.removeClass("@error");
-    }
+    this.m_ui_input.clearError();
   }
   get value() {
+    return this.getValue();
+  }
+  getValue() {
     if (this.m_ui_input) {
       return this.m_ui_input.value;
     } else {
       return this.m_props.value;
     }
   }
+  /**
+   * 
+   */
   set value(value) {
+    this.setValue(value);
+  }
+  setValue(value) {
     if (this.m_ui_input) {
       this.m_ui_input.value = value;
     } else {
@@ -6411,8 +6459,12 @@ var AutoComplete = class extends TextEdit {
     }
     super.componentDisposed();
   }
-  showPopup() {
-    this._onChange();
+  showPopup(show = true) {
+    if (show) {
+      this._onChange();
+    } else {
+      this._hidePopup();
+    }
   }
   /** 
    * display the popup 
@@ -6445,7 +6497,8 @@ var AutoComplete = class extends TextEdit {
         style: {
           fontFamily,
           fontSize
-        }
+        },
+        renderItem: props.renderItem
       });
     }
     if (items) {
@@ -6490,6 +6543,9 @@ var AutoComplete = class extends TextEdit {
     }
     this.m_needval = true;
   }
+  isPopupVisible() {
+    return this.m_popvis;
+  }
 };
 __name(AutoComplete, "AutoComplete");
 
@@ -7822,7 +7878,7 @@ var data;
   data2.calc = calc;
   __name(calc, "calc");
   function array(ctor, props) {
-    return data2.field({ ...props, type: "array", model: new ctor() });
+    return data2.field({ ...props, type: "array", model: ctor ? new ctor() : null });
   }
   data2.array = array;
   __name(array, "array");
@@ -8059,32 +8115,23 @@ var DataProxy = class extends BaseComponent {
   constructor(props) {
     super(props);
   }
-  load(url) {
+  async load(url) {
     if (url) {
       this.m_props.url = url;
+    } else {
+      url = this.m_props.url;
     }
-    this._refresh();
-  }
-  _refresh(delay = 0) {
-    const load = /* @__PURE__ */ __name(async () => {
-      let url = this.m_props.url;
-      if (this.m_props.params) {
-        url += "?" + this.m_props.params.join("&");
-      }
-      const r = await fetch(url);
-      if (r.ok) {
-        const raw = await r.json();
-        let json = raw;
-        if (this.m_props.solver) {
-          json = this.m_props.solver(json);
-        }
-        this.emit("change", EvChange(json, raw));
+    if (this.m_props.params) {
+      url += "?" + this.m_props.params.join("&");
+    }
+    const r = await fetch(url);
+    if (r.ok) {
+      const raw = await r.json();
+      let json = raw;
+      if (this.m_props.solver) {
+        json = this.m_props.solver(json);
       }
-    }, "load");
-    if (delay) {
-      setTimeout(load, delay);
-    } else {
-      load();
+      this.emit("change", EvChange(json, raw));
     }
   }
 };
@@ -8112,18 +8159,20 @@ var DataStore = class extends EventSource {
           this.setData(ev.value);
         } }
       });
-      this.m_proxy.load();
+      if (props.autoload != false) {
+        this.m_proxy.load();
+      }
     }
   }
   /**
    * 
    * @param records 
    */
-  load(url) {
-    this.m_proxy.load(url);
+  async load(url) {
+    return this.m_proxy.load(url);
   }
-  reload() {
-    this.m_proxy.load();
+  async reload() {
+    return this.m_proxy.load();
   }
   /**
    * convert raw objects to real records from model
@@ -8577,7 +8626,6 @@ var DataView = class extends BaseComponent {
    * 
    */
   forEach(cb) {
-    debugger;
     this.m_index.some((index) => {
       let rec = this.m_store.getByIndex(index);
       if (rec) {
@@ -8599,7 +8647,6 @@ var ComboBox = class extends HLayout {
   m_lockchg;
   m_popvis;
   m_selection;
-  m_error_tip;
   constructor(props) {
     super(props);
     if (!props.editable) {
@@ -8725,9 +8772,6 @@ var ComboBox = class extends HLayout {
     }
   }
   componentDisposed() {
-    if (this.m_error_tip) {
-      this.m_error_tip.dispose();
-    }
     if (this.m_popup) {
       this.m_popup.close();
     }
@@ -8795,20 +8839,10 @@ var ComboBox = class extends HLayout {
     return true;
   }
   showError(text) {
-    if (!this.m_error_tip) {
-      this.m_error_tip = new Tooltip({ cls: "error" });
-      x4document.body.appendChild(this.m_error_tip._build());
-    }
-    let rc = this.m_ui_input.getBoundingRect();
-    this.m_error_tip.text = text;
-    this.m_error_tip.displayAt(rc.right, rc.top - 8, "top right");
-    this.addClass("@error");
+    this.m_ui_input.showError(text);
   }
   clearError() {
-    if (this.m_error_tip) {
-      this.m_error_tip.hide();
-      this.removeClass("@error");
-    }
+    this.m_ui_input.clearError();
   }
   /** @ignore
     */
@@ -14367,7 +14401,10 @@ var SideBarView = class extends CardView {
     this.m_sidebar.setContent(new VLayout({
       flex: 1,
       cls: "content",
-      content: tabs
+      content: [
+        this.m_props.logo,
+        ...tabs
+      ]
     }));
     this.setContent([
       this.m_sidebar,
@@ -14478,7 +14515,7 @@ var SVGItem = class {
   style(name, value) {
     if (value === void 0 || value === "" || value === void 0) {
       this.m_style.delete(name);
-      return;
+      return this;
     }
     if (!_x4_unitless[name] && (isNumber(value) || reNumber2.test(value))) {
       value = value + "px";
@@ -14539,18 +14576,22 @@ var SVGItem = class {
    */
   transform(tr) {
     this.attr("transform", tr);
+    return this;
   }
   /**
    * 
    */
   rotate(deg, cx, cy) {
     this.transform(`rotate( ${deg} ${cx} ${cy} )`);
+    return this;
   }
   translate(dx, dy) {
     this.transform(`translate( ${dx} ${dy} )`);
+    return this;
   }
   scale(x) {
     this.transform(`scale( ${x} )`);
+    return this;
   }
 };
 __name(SVGItem, "SVGItem");
@@ -14742,6 +14783,11 @@ var SVGGroup = class extends SVGItem {
     this.m_items.push(shape);
     return shape;
   }
+  group() {
+    const group = new SVGGroup();
+    this.m_items.push(group);
+    return group;
+  }
   /**
    * 
    * example
@@ -15658,7 +15704,7 @@ function setupWSMessaging(closeCB) {
 __name(setupWSMessaging, "setupWSMessaging");
 
 // src/version.ts
-var x4js_version = "1.5.29";
+var x4js_version = "1.5.32";
 export {
   AbsLayout,
   Application,