x4js 1.4.16 → 1.4.20

package/lib/datastore.js

@@ -31,10 +31,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataView = exports.EvViewChange = exports.DataStore = exports.DataProxy = exports.AutoRecord = exports.Record = exports.data = void 0;
 const request_1 = require("./request");
 const tools_1 = require("./tools");
-const x4_events_1 = require("./x4_events");
+const x4events_1 = require("./x4events");
 const base_component_1 = require("./base_component");
 function EvDataChange(type, id) {
-    return (0, x4_events_1.BasicEvent)({ type, id });
+    return (0, x4events_1.BasicEvent)({ type, id });
 }
 /**
  *
@@ -448,7 +448,7 @@ class DataProxy extends base_component_1.BaseComponent {
                     method: 'GET',
                     params: this.m_props.params,
                     success: (data) => {
-                        this.emit('change', (0, x4_events_1.EvChange)(data));
+                        this.emit('change', (0, x4events_1.EvChange)(data));
                     }
                 });
             }, delay);
@@ -459,7 +459,7 @@ exports.DataProxy = DataProxy;
 /**
  *
  */
-class DataStore extends x4_events_1.EventSource {
+class DataStore extends x4events_1.EventSource {
     m_model;
     m_fields;
     m_records;
@@ -864,7 +864,7 @@ class DataStore extends x4_events_1.EventSource {
 }
 exports.DataStore = DataStore;
 function EvViewChange(action) {
-    return (0, x4_events_1.BasicEvent)({ action });
+    return (0, x4events_1.BasicEvent)({ action });
 }
 exports.EvViewChange = EvViewChange;
 /**

package/lib/dialog.d.ts

@@ -31,7 +31,7 @@ import { IconID } from './icon';
 import { Label } from './label';
 import { Form, FormButtons } from './form';
 import { Component, ComponentContent } from './component';
-import { BasicEvent, EventCallback } from './x4_events';
+import { BasicEvent, EventCallback } from './x4events';
 import { Rect, Size } from './tools';
 interface Geometry {
     left: number;

package/lib/dialog.js

@@ -29,16 +29,17 @@
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = exports.EvBtnClick = void 0;
+const x4dom_1 = require("./x4dom");
 const popup_1 = require("./popup");
 const icon_1 = require("./icon");
 const layout_1 = require("./layout");
 const label_1 = require("./label");
 const form_1 = require("./form");
 const component_1 = require("./component");
-const x4_events_1 = require("./x4_events");
+const x4events_1 = require("./x4events");
 const tools_1 = require("./tools");
 function EvBtnClick(button) {
-    return (0, x4_events_1.BasicEvent)({ button });
+    return (0, x4events_1.BasicEvent)({ button });
 }
 exports.EvBtnClick = EvBtnClick;
 /**
@@ -340,7 +341,7 @@ class Dialog extends popup_1.Popup {
      */
     _mouseDown(event) {
         let { x, y } = (0, tools_1.getMousePos)(event, true);
-        let wrc = (0, component_1.flyWrap)(document.body).getBoundingRect();
+        let wrc = (0, component_1.flyWrap)(x4dom_1.x4document.body).getBoundingRect();
         let rc = this.getBoundingRect(true);
         let trc = this.m_el_title.getBoundingRect();
         let dx = x - rc.left, dy = y - rc.top;

package/lib/drag_manager.js

@@ -1,6 +1,35 @@
 "use strict";
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file drag_manager.ts
+* @author Etienne Cochard
+*
+* Copyright (c) 2019-2022 R-libre ingenierie
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+* of the Software, and to permit persons to whom the Software is furnished to do so,
+* subject to the following conditions:
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+**/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dragManager = void 0;
+const x4dom_1 = require("./x4dom");
 const x_drag_cb = Symbol('x-drag-cb');
 /**
  *
@@ -19,7 +48,7 @@ class DragManager {
             this.dragSource = el;
             this.dragGhost = el.dom.cloneNode(true);
             this.dragGhost.classList.add('dragged');
-            document.body.appendChild(this.dragGhost);
+            x4dom_1.x4document.body.appendChild(this.dragGhost);
             el.addClass('dragging');
             ev.dataTransfer.setData('text/string', '1');
             ev.dataTransfer.setDragImage(new Image(), 0, 0);

package/lib/fileupload.js

@@ -29,6 +29,7 @@
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveFile = exports.openFile = exports.ImageUpload = exports.FileUpload = void 0;
+const x4dom_1 = require("./x4dom");
 const component_1 = require("./component");
 const layout_1 = require("./layout");
 const input_1 = require("./input");
@@ -125,7 +126,7 @@ function _createFileInput() {
             }
         });
         // ajoute un input type:file caché pour pouvoir choir un fichier a ouvrir
-        document.body.appendChild(g_file_input._build());
+        x4dom_1.x4document.body.appendChild(g_file_input._build());
     }
     g_file_input.clearDomEvent('change');
     return g_file_input;

package/lib/form.d.ts

@@ -30,7 +30,7 @@ import { Component, Container, CProps, ContainerEventMap, ComponentContent } fro
 import { HLayout, VLayout } from './layout';
 import { Button } from './button';
 import { RequestProps } from './request';
-import { EventCallback } from './x4_events';
+import { EventCallback } from './x4events';
 import { EvBtnClick } from './dialog';
 export declare type FormBtn = 'ok' | 'cancel' | 'ignore' | 'yes' | 'no' | 'close' | 'save' | 'dontsave';
 export declare type FormButtons = (FormBtn | Button | Component)[];

package/lib/gridview.d.ts

@@ -26,16 +26,12 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
-/**
- * todo: sizable column
- * todo: button in a column
- */
 import { VLayout } from './layout';
 import { Component, ContainerEventMap, EvDblClick, CProps, HtmlString } from './component';
 import { Label } from './label';
 import * as Formatters from './formatters';
 import { DataView, DataStore, Record } from './datastore';
-import { EvContextMenu, EvSelectionChange, BasicEvent, EventDisposer } from "./x4_events";
+import { EvContextMenu, EvSelectionChange, BasicEvent, EventDisposer } from "./x4events";
 export interface EvGridCheck extends BasicEvent {
     rec: Record;
     chk: boolean;

package/lib/gridview.js

@@ -34,16 +34,17 @@ const T_UPDATE = Symbol('update');
  * todo: sizable column
  * todo: button in a column
  */
+const x4dom_1 = require("./x4dom");
 const layout_1 = require("./layout");
 const component_1 = require("./component");
 const label_1 = require("./label");
 const i18n_1 = require("./i18n");
 const tools_1 = require("./tools");
 const datastore_1 = require("./datastore");
-const x4_events_1 = require("./x4_events");
+const x4events_1 = require("./x4events");
 const icon_js_1 = require("./icon.js");
 function EvGridCheck(rec, chk) {
-    return (0, x4_events_1.BasicEvent)({ rec, chk });
+    return (0, x4events_1.BasicEvent)({ rec, chk });
 }
 exports.EvGridCheck = EvGridCheck;
 class ColHeader extends component_1.Component {
@@ -449,9 +450,9 @@ class GridView extends layout_1.VLayout {
      *
      */
     _computeItemHeight() {
-        let gr = document.createElement('div');
+        let gr = x4dom_1.x4document.createElement('div');
         gr.classList.add('x-row');
-        let gv = document.createElement('div');
+        let gv = x4dom_1.x4document.createElement('div');
         gv.classList.add('x-grid-view');
         gv.style.position = 'absolute';
         gv.style.top = '-1000px';
@@ -743,17 +744,17 @@ class GridView extends layout_1.VLayout {
                 dom_item.addClass('@selected');
             }
             let rec = this.m_dataview.getById(item);
-            this.emit('selectionChange', (0, x4_events_1.EvSelectionChange)(rec));
+            this.emit('selectionChange', (0, x4events_1.EvSelectionChange)(rec));
         }
         else {
-            this.emit('selectionChange', (0, x4_events_1.EvSelectionChange)(null));
+            this.emit('selectionChange', (0, x4events_1.EvSelectionChange)(null));
         }
     }
     /**
      *
      */
     _showItemContextMenu(event, item) {
-        this.emit('contextMenu', (0, x4_events_1.EvContextMenu)(event, item));
+        this.emit('contextMenu', (0, x4events_1.EvContextMenu)(event, item));
     }
     /**
      *

package/lib/i18n.d.ts

@@ -27,45 +27,47 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 /**
- * current language
- * FR by default
- * @example ```typescript
- * console.log( _tr.global.ok );
+ * create a new language
+ * @param name language name (code)
+ * @param base base language (code)
+ * @example:
+ * ```js
+ * createLanguage( 'en', 'fr' );
+ * ```
  */
-export declare let _tr: any;
+export declare function createLanguage(name: string, base: string): void;
+/**
+ * check if the given language is known
+ * @param name language name (code)
+ */
+export declare function isLanguage(name: string): boolean;
 /**
- * check if the language is known
- * @param name - language name to test
- * @example ```typescript
- * if( isLanguage('fr') ) {
+ * build the language with given fragments
+ * @param name language name (code)
+ * @param parts misc elements that make the language
+ * @example:
+ * ```js
+ * createLanguage( 'en', 'fr' );
+ * const app = {
+ * 	clients: {
+ * 		translation1: "hello",
+ *  }
  * }
+ * addTranslation( 'en', app );
+ * ```
+  */
+export declare function addTranslation(name: any, ...parts: any[]): void;
+export declare let _tr: any;
+/**
+ * select the given language as current
+ * @param name laguage name (code)
  */
-export declare function isLanguage(name: any): boolean;
+export declare function selectLanguage(name: string): void;
 /**
- * select the current language
- * @param name - language name
- * @example ```typescript
- * selectLanguage( 'en' );
+ *
  */
-export declare function selectLanguage(name: any): void;
+export declare function getCurrentLanguage(): string;
 /**
- * define a translation
- * you can also patch 'global' elements witch are defined by x4
- * @param name - language name
- * @param definition - definition of the language
- * @example ```typescript
- * setTranslation( 'fr', {
- * 	this_is_an_example: 'ceci est un exemple',
- * 	this_is: {
- * 		another_example: 'ceci est un autre exemple'
- *  },
- *  global: {
- *    ok: 'O.K.'
- *  }
- * });
- * console.log( _tr.this_is_an_example ); // defined by the previous line
- * selectLanguage( 'en' );
- * console.log( _tr.this_is_an_example ); // 'en' do not define this, so we get 'fr' one
  *
  */
-export declare function extendTranslation(name: any, definition: any): void;
+export declare function getAvailableLanguages(): string[];

package/lib/i18n.js

@@ -28,7 +28,158 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.extendTranslation = exports.selectLanguage = exports.isLanguage = exports._tr = void 0;
+exports.getAvailableLanguages = exports.getCurrentLanguage = exports.selectLanguage = exports._tr = exports.addTranslation = exports.isLanguage = exports.createLanguage = void 0;
+const sym_lang = Symbol("i18n");
+let languages = {};
+/**
+ * create a new language
+ * @param name language name (code)
+ * @param base base language (code)
+ * @example:
+ * ```js
+ * createLanguage( 'en', 'fr' );
+ * ```
+ */
+function createLanguage(name, base) {
+    languages[name] = {
+        name,
+        base,
+        src_translations: {},
+        translations: {}
+    };
+}
+exports.createLanguage = createLanguage;
+/**
+ * check if the given language is known
+ * @param name language name (code)
+ */
+function isLanguage(name) {
+    return languages[name] !== undefined;
+}
+exports.isLanguage = isLanguage;
+/**
+ * build the language with given fragments
+ * @param name language name (code)
+ * @param parts misc elements that make the language
+ * @example:
+ * ```js
+ * createLanguage( 'en', 'fr' );
+ * const app = {
+ * 	clients: {
+ * 		translation1: "hello",
+ *  }
+ * }
+ * addTranslation( 'en', app );
+ * ```
+  */
+function addTranslation(name, ...parts) {
+    if (!isLanguage(name)) {
+        return;
+    }
+    const lang = languages[name];
+    parts.forEach(p => {
+        _patch(lang.src_translations, p, lang.base);
+    });
+    lang.translations = _mk_proxy(lang.src_translations, lang.base, true);
+}
+exports.addTranslation = addTranslation;
+/**
+ *
+ */
+function _patch(obj, by, def) {
+    for (let n in by) {
+        if (obj[n] instanceof Object) {
+            _patch(obj[n], by[n], def);
+        }
+        else {
+            obj[n] = by[n];
+            obj[n] = _mk_proxy(obj[n], def, false);
+        }
+    }
+    return obj;
+}
+/**
+ * when we ask for _tr.xxx
+ * reqpath is set to [xxx]
+ *
+ * then when we try to get _tr.xxx.yyy
+ * reqpath is [xxx,yyy]
+ * if yyy is not found, we try with base langage for the full reqpath
+ * until no base found
+ */
+let req_path;
+/**
+ *
+ */
+function _findBaseTrans(base) {
+    while (base) {
+        const lang = languages[base];
+        let trans = lang.translations;
+        let value;
+        for (const p of req_path) {
+            value = trans[p];
+            if (value === undefined) {
+                break;
+            }
+            trans = value;
+        }
+        if (value !== undefined) {
+            return trans;
+        }
+        base = lang.base;
+    }
+    console.error("I18N error: unable to find", '_tr.' + req_path.join('.'));
+    return undefined;
+}
+/**
+ *
+ */
+function _mk_proxy(obj, base, root) {
+    return new Proxy(obj, {
+        get: (target, prop) => {
+            if (root) {
+                req_path = [prop];
+            }
+            else {
+                req_path.push(prop);
+            }
+            let value = target[prop];
+            if (value === undefined && base) {
+                value = _findBaseTrans(base);
+                // keep it for later
+                target[prop] = value;
+            }
+            return value;
+        }
+    });
+}
+exports._tr = {};
+/**
+ * select the given language as current
+ * @param name laguage name (code)
+ */
+function selectLanguage(name) {
+    if (!isLanguage(name)) {
+        return;
+    }
+    exports._tr = languages[name].translations;
+    exports._tr[sym_lang] = name;
+}
+exports.selectLanguage = selectLanguage;
+/**
+ *
+ */
+function getCurrentLanguage() {
+    return exports._tr[sym_lang];
+}
+exports.getCurrentLanguage = getCurrentLanguage;
+/**
+ *
+ */
+function getAvailableLanguages() {
+    return Object.keys(languages);
+}
+exports.getAvailableLanguages = getAvailableLanguages;
 /**
  * language definition
  * x4 specific strings
@@ -51,9 +202,9 @@ let fr = {
         invalid_format: "format invalide",
         invalid_email: 'adresse mail invalide',
         invalid_number: 'valeur numérique invalide',
-        diff_date_seconds: '{0} seconds',
+        diff_date_seconds: '{0} secondes',
         diff_date_minutes: '{0} minutes',
-        diff_date_hours: '{0} hours',
+        diff_date_hours: '{0} heures',
         invalid_date: 'Date non reconnue ({0})',
         empty_list: 'Liste vide',
         date_input_formats: 'd/m/y|d.m.y|d m y|d-m-y|dmy',
@@ -78,102 +229,38 @@ let en = {
         ignore: 'Ignore',
         yes: 'Yes',
         no: 'No',
-        required_field: "required field",
+        open: 'Open',
+        new: 'New',
+        delete: 'Delete',
+        close: 'Close',
+        save: 'Save',
+        search: 'Search',
+        search_tip: 'Type in the text to search. <b>Enter</b> to start the search. <b>Esc</b> to cancel.',
+        required_field: "missing information",
         invalid_format: "invalid format",
+        invalid_email: 'invalid email address',
+        invalid_number: 'bad numeric value',
         diff_date_seconds: '{0} seconds',
         diff_date_minutes: '{0} minutes',
         diff_date_hours: '{0} hours',
-        invalid_date: 'Bad date format {0}',
+        invalid_date: 'Unrecognized date({0})',
+        empty_list: 'Empty list',
+        date_input_formats: 'm/d/y|m.d.y|m d y|m-d-y|mdy',
+        date_format: 'M/D/Y',
+        day_short: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
+        day_long: ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'],
+        month_short: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jui', 'aug', 'sep', 'oct', 'nov', 'dec'],
+        month_long: ['january', 'february', 'march', 'april', 'mau', 'june', 'jully', 'august', 'september', 'october', 'november', 'december'],
+        property: 'Property',
+        value: 'Value',
+        err_403: `You do not have sufficient rights to do that action`,
         copy: 'Copy',
         cut: 'Cut',
         paste: 'Paste'
     }
 };
-/** @ignore */
-let all_langs = {
-    'fr': fr,
-    'en': _mk_proxy(_patch({}, en))
-};
-/**
- * current language
- * FR by default
- * @example ```typescript
- * console.log( _tr.global.ok );
- */
-exports._tr = all_langs['fr'];
-/**
- * check if the language is known
- * @param name - language name to test
- * @example ```typescript
- * if( isLanguage('fr') ) {
- * }
- */
-function isLanguage(name) {
-    return all_langs[name] !== undefined;
-}
-exports.isLanguage = isLanguage;
-/**
- * select the current language
- * @param name - language name
- * @example ```typescript
- * selectLanguage( 'en' );
- */
-function selectLanguage(name) {
-    if (!isLanguage(name)) {
-        return;
-    }
-    exports._tr = all_langs[name];
-}
-exports.selectLanguage = selectLanguage;
-/**
- * define a translation
- * you can also patch 'global' elements witch are defined by x4
- * @param name - language name
- * @param definition - definition of the language
- * @example ```typescript
- * setTranslation( 'fr', {
- * 	this_is_an_example: 'ceci est un exemple',
- * 	this_is: {
- * 		another_example: 'ceci est un autre exemple'
- *  },
- *  global: {
- *    ok: 'O.K.'
- *  }
- * });
- * console.log( _tr.this_is_an_example ); // defined by the previous line
- * selectLanguage( 'en' );
- * console.log( _tr.this_is_an_example ); // 'en' do not define this, so we get 'fr' one
- *
- */
-function extendTranslation(name, definition) {
-    if (!isLanguage(name)) {
-        return;
-    }
-    _patch(all_langs[name], definition);
-}
-exports.extendTranslation = extendTranslation;
-function _patch(obj, by) {
-    for (let n in by) {
-        if (obj[n] instanceof Object) {
-            _patch(obj[n], by[n]);
-        }
-        else {
-            obj[n] = by[n];
-            if (obj[n] instanceof Object) {
-                obj[n] = _mk_proxy(obj[n]);
-            }
-        }
-    }
-    return obj;
-}
-function _mk_proxy(obj) {
-    return new Proxy(obj, {
-        get: function (target, prop, receiver) {
-            let value = target[prop];
-            if (value === undefined) {
-                return fr[prop];
-            }
-            return value;
-        }
-    });
-}
+createLanguage('fr', null);
+addTranslation('fr', fr);
+createLanguage('en', 'fr');
+addTranslation('en', en);
+selectLanguage('fr'); // by default

package/lib/icon.d.ts

@@ -27,7 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 import { Component, CProps } from './component';
-import { BasicEvent } from './x4_events';
+import { BasicEvent } from './x4events';
 export declare type IconID = string | number;
 export interface IconProps extends CProps {
     icon: IconID;