x4js 1.5.17 → 1.5.20

package/lib/src/x4react.ts

@@ -0,0 +1,90 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|  
+*  /__/ \__\   |_|
+*        
+* @file x4react.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.
+**/
+
+import { Component, ComponentContent, CProps, CEventMap } from './component';
+
+
+const createElement = ( clsOrTag, attrs, ...children ): ComponentContent => {
+
+	let comp: Component;
+
+	// fragment
+	if( clsOrTag==createFragment || clsOrTag==Fragment ) {
+		return children;
+	}
+	// class constructor, yes : dirty
+	else if( clsOrTag instanceof Function ) {
+		comp = new (clsOrTag as any)( attrs );
+	}
+	// basic tag
+	else {
+		comp = new Component( {
+			tag: clsOrTag,
+			...attrs,
+		});
+	}
+
+	if( children && children.length ) {
+		comp.setContent( children );
+	}
+
+	return comp;
+}
+
+const Fragment = Symbol( "fragment" );
+
+const createFragment = ( ): ComponentContent => {
+	return null;
+}
+
+export let React = {
+	createElement,
+	createFragment,
+	Fragment,
+}
+
+
+
+
+
+/**
+ * 
+ */
+
+ export abstract class TSXComponent<P extends CProps<CEventMap> = CProps<CEventMap>, E extends CEventMap = CEventMap> extends Component<P,E> {
+	public render(props: P) {
+		const tsx = this.renderTSX( props );
+		if( tsx ) {
+			this.setContent( tsx );
+		}
+	}
+
+	public abstract renderTSX( props: P ): Component | Component[];
+}
+

package/package.json

@@ -1,49 +1,52 @@
-{
-	"name": "x4js",
-	"version": "1.5.17",
-	"description": "X4js core files",
-	"main": "lib/cjs/index.js",
-	"types": "lib/types/index.d.ts",
-	"style": "lib/x4.css",
-	"files": [
-		"lib/**/*"
-	],
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/rlibre/x4js.git"
-	},
-	"keywords": [
-		"typescript",
-		"framework",
-		"sap",
-		"web",
-		"desktop",
-		"application"
-	],
-	"scripts": {
-		"build": "bash ./build.sh",
-		"mkdoc": "typedoc --tsconfig tsconfig.json --readme none",
-		"prepack": "bash ./build.sh"
-	},
-	"author": "etienne cochard",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/rlibre/x4js/issues"
-	},
-	"homepage": "https://x4js.org",
-	"exports": {
-		".": {
-			"import": {
-				"types": "./lib/types/index.d.ts",
-				"default": "./lib/esm/index.mjs"
-			},
-			"require": {
-				"types": "./lib/types/index.d.ts",
-				"default": "./lib/cjs/index.js"
-			}
-		}
-	},
-	"dependencies": {
-		"typescript": "^4.9.3"
-	}
-}
+{
+	"name": "x4js",
+	"version": "1.5.20",
+	"description": "X4js core files",
+	"main": "lib/cjs/index.js",
+	"types": "lib/types/index.d.ts",
+	"style": "lib/x4.css",
+	"files": [
+		"lib/**/*"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/rlibre/x4js.git"
+	},
+	"keywords": [
+		"typescript",
+		"framework",
+		"sap",
+		"web",
+		"desktop",
+		"application"
+	],
+	"scripts": {
+		"build": "node ./build.js",
+		"mkdoc": "typedoc --tsconfig tsconfig.json --readme none",
+		"prepack": "node ./build.js"
+	},
+	"author": "etienne cochard",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/rlibre/x4js/issues"
+	},
+	"homepage": "https://x4js.org",
+	"module": "lib/esm/index.js",
+	"exports": {
+		".": {
+			"import": {
+				"types": "./lib/types/index.d.ts",
+				"default": "./lib/esm/index.mjs"
+			},
+			"require": {
+				"types": "./lib/types/index.d.ts",
+				"default": "./lib/cjs/index.js"
+			}
+		}
+	},
+	"devDependencies": {
+		"esbuild": "^0.17.8",
+		"fs-extra": "^11.1.0",
+		"less": "^4.1.3"
+	}
+}

package/lib/cjs/action.js

@@ -1,58 +0,0 @@
-"use strict";
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file action.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.Action = exports.EvAction = void 0;
-const x4events_1 = require("./x4events");
-const base_component_1 = require("./base_component");
-function EvAction(source) {
-    return (0, x4events_1.BasicEvent)({ source });
-}
-exports.EvAction = EvAction;
-class Action extends base_component_1.BaseComponent {
-    constructor(props) {
-        super(props);
-        this.mapPropEvents(props, "run");
-    }
-    get props() {
-        return this.m_props;
-    }
-    set text(t) {
-        this.m_props.text = t;
-        this.emit("change", (0, x4events_1.EvChange)(this));
-    }
-    set icon(i) {
-        this.m_props.icon = i;
-        this.emit("change", (0, x4events_1.EvChange)(this));
-    }
-    fire() {
-        this.emit("run", EvAction(this));
-    }
-}
-exports.Action = Action;

package/lib/cjs/app_sockets.js

@@ -1,74 +0,0 @@
-"use strict";
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file app_sockets.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.setupWSMessaging = void 0;
-const application_1 = require("./application");
-/**
- * WEB SOCKETS
- *
- * les messages reçus par l'application sont retransmis au websocket.
- * comme ça, tous les clients connectés sur le serveur recevront une copie du message.
- * ca permet de mettre a jour les clients dynamiquement
- *
- */
-const msg_sent = Symbol('msg_sent');
-function setupWSMessaging(closeCB) {
-    const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
-    const sockets = new WebSocket(`${protocol}${window.location.hostname}:${window.location.port}`, 'messaging');
-    const app = application_1.Application.instance();
-    // pour tous les messages recus par l'application
-    //	on transmet aux autres
-    app.on('global', (e) => {
-        if (e[msg_sent]) {
-            return;
-        }
-        sockets.send(JSON.stringify({
-            msg: e.msg,
-            params: e.params,
-        }));
-    });
-    // reception d'un message
-    sockets.onmessage = (e) => {
-        if (e.data != 'ping') {
-            const message = JSON.parse(e.data);
-            message[msg_sent] = true;
-            app.signal('global', message);
-        }
-    };
-    // perte du socket
-    sockets.onclose = (ev) => {
-        console.log('websocket closed:', ev);
-        closeCB();
-    };
-    sockets.onerror = (ev) => {
-        console.log('websocket error:', ev);
-    };
-}
-exports.setupWSMessaging = setupWSMessaging;

package/lib/cjs/application.js

@@ -1,182 +0,0 @@
-"use strict";
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file application.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.Application = void 0;
-const x4dom_1 = require("./x4dom");
-const base_component_1 = require("./base_component");
-const component_1 = require("./component");
-const settings_1 = require("./settings");
-const _x4_touch_time = Symbol();
-/**
- * Represents an x4 application, which is typically a single page app.
- * You should inherit Application to define yours.
- * Application derives from BaseComponent so you can use that to implement a global messaging system.
- * @example ```ts
- *
- * // in yout main caode
- * let app = new Application( );
- *
- * app.events.close.on( ( ev ) => {
- * 	... do something
- * });
- *
- * // somewhere else in the source
- * function xxx( ) {
- * 	let app = Application.instance( );
- * 	app.events.close.emit( new Events.close() );
- * }
- */
-class Application extends base_component_1.BaseComponent {
-    /**
-     * the application singleton
-     */
-    static instance() {
-        return Application.self;
-    }
-    constructor(props) {
-        var _a, _b, _c;
-        console.assert(Application.self === null, 'application is a singleton');
-        super(props);
-        this.m_app_name = (_a = props.app_name) !== null && _a !== void 0 ? _a : 'application';
-        this.m_app_version = (_b = props.app_version) !== null && _b !== void 0 ? _b : '1.0';
-        this.m_app_uid = (_c = props.app_uid) !== null && _c !== void 0 ? _c : 'application';
-        let settings_name = `${this.m_app_name}.${this.m_app_version}.settings`;
-        this.m_local_storage = new settings_1.Settings(settings_name);
-        this.m_user_data = {};
-        this.m_touch_time = 0;
-        this.m_touch_count = 0;
-        Application.self = this;
-        if ('onload' in globalThis) {
-            globalThis.addEventListener('load', () => {
-                this.ApplicationCreated();
-            });
-        }
-        else {
-            this.ApplicationCreated();
-        }
-    }
-    ApplicationCreated() {
-        this.setTitle('');
-    }
-    get app_name() {
-        return this.m_app_name;
-    }
-    get app_uid() {
-        return this.m_app_uid;
-    }
-    get app_version() {
-        return this.m_app_version;
-    }
-    get local_storage() {
-        return this.m_local_storage;
-    }
-    get user_data() {
-        return this.m_user_data;
-    }
-    get history() {
-        //if( !this.m_history ) {
-        //	this.m_history = new NavigationHistory( );
-        //}
-        //
-        //return this.m_history;
-        debugger;
-        return null;
-    }
-    /**
-     * define the application root object (MainView)
-     * @example ```ts
-     *
-     * let myApp = new Application( ... );
-     * let mainView = new VLayout( ... );
-     * myApp.mainView = mainView;
-     */
-    setMainView(root, clearBefore) {
-        var _a;
-        const ddom = (_a = this.m_props.renderTo) !== null && _a !== void 0 ? _a : x4dom_1.x4document.body;
-        const dest = (0, component_1.flyWrap)(ddom);
-        if (!this.m_props.renderTo) {
-            dest.setStyleValue('position', 'absolute');
-        }
-        dest.addClass('x4-root-element');
-        if (clearBefore) {
-            dest._empty();
-        }
-        this.m_mainView = root;
-        root.setStyleValue('position', 'absolute');
-        root._build();
-        ddom.appendChild(root.dom);
-    }
-    set mainView(root) {
-        this.setMainView(root, false);
-    }
-    get mainView() {
-        return this.m_mainView;
-    }
-    setTitle(title) {
-        x4dom_1.x4document.title = this.m_app_name + (title ? (' > ' + title) : '');
-    }
-    disableZoomWheel() {
-        window.addEventListener('wheel', function (ev) {
-            if (ev.ctrlKey) {
-                ev.preventDefault();
-                //ev.stopPropagation( );
-            }
-        }, { passive: false, capture: true });
-    }
-    enterModal(enter) {
-    }
-    enableTouchDblClick() {
-        x4dom_1.x4document.addEventListener('touchstart', (ev) => {
-            let now = Date.now();
-            if ((now - this.m_touch_time) > 700) {
-                this.m_touch_count = 1;
-            }
-            else {
-                this.m_touch_count++;
-            }
-            this.m_touch_time = now;
-            if (this.m_touch_count == 2) {
-                this.m_touch_count = 0;
-                // dirty fake dblclick event
-                const tch = ev.touches[0];
-                let fake = { type: "dblclick" };
-                for (const n in tch) {
-                    fake[n] = tch[n];
-                }
-                // ignore -> private: dirty x2
-                component_1.Component._dispatchEvent(fake);
-                ev.stopPropagation();
-            }
-        });
-    }
-}
-exports.Application = Application;
-Application.self = null;
-;

package/lib/cjs/autocomplete.js

@@ -1,155 +0,0 @@
-"use strict";
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|
-*  /__/\__\   |_|
-*
-* @file autocomplete.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.AutoComplete = void 0;
-const listview_1 = require("./listview");
-const textedit_1 = require("./textedit");
-/**
- *
- */
-class AutoComplete extends textedit_1.TextEdit {
-    constructor(props) {
-        super(props);
-        this.setDomEvent("input", () => this._onChange());
-        this.setDomEvent("focusin", () => this._onFocus());
-        this.startTimer("focus-check", 100, true, () => this._checkFocus());
-        this.m_popvis = false;
-        this.m_needval = false;
-        this.m_lockpop = false;
-        this.setDomEvent("keydown", e => this._onKey(e));
-    }
-    _onKey(e) {
-        if (this.m_popvis) {
-            if (e.key == "ArrowUp" || e.key == "ArrowDown") {
-                this.m_lockpop = true;
-                this.m_popup.handleKey(e);
-                this.m_lockpop = false;
-                e.preventDefault();
-                e.stopPropagation();
-            }
-            else if (e.key == "Escape") {
-                this._hidePopup();
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        }
-        else if (e.key == "ArrowDown") {
-            this._onChange();
-            e.preventDefault();
-            e.stopPropagation();
-        }
-    }
-    _onChange() {
-        const items = this.m_props.enumValues(this.value);
-        this.showPopup(items);
-    }
-    componentDisposed() {
-        if (this.m_popup) {
-            this._hidePopup();
-        }
-        super.componentDisposed();
-    }
-    /**
-     * display the popup
-     */
-    showPopup(items) {
-        let props = this.m_props;
-        if (props.readOnly || this.hasClass("@disable")) {
-            return;
-        }
-        // need creation ?
-        if (!this.m_popup) {
-            let cstyle = this.getComputedStyle();
-            let fontFamily = cstyle.value('fontFamily');
-            let fontSize = cstyle.value('fontSize');
-            // prepare the combo listview
-            this.m_popup = new listview_1.PopupListView({
-                cls: '@combo-popup',
-                attrs: {
-                    tabindex: 0
-                },
-                selectionChange: (e) => {
-                    this.value = e.selection.id;
-                    if (!this.m_lockpop) {
-                        this._hidePopup();
-                        this.focus();
-                    }
-                },
-                style: {
-                    fontFamily,
-                    fontSize
-                }
-            });
-        }
-        this.m_popup.items = items.map(c => ({ id: c, text: c }));
-        let r1 = this.m_ui_input.getBoundingRect();
-        this.m_popup.setStyle({
-            minWidth: r1.width,
-        });
-        this.m_popup.displayAt(r1.left, r1.bottom);
-        this.m_popvis = true;
-        //if( this.value!==undefined ) {
-        //	this.m_popup.selection = this.value;
-        //}
-    }
-    _validate(value) {
-        return true;
-    }
-    validate() {
-        return super._validate(this.value);
-    }
-    _checkFocus() {
-        const focus = document.activeElement;
-        if (this.dom && this.dom.contains(focus)) {
-            return;
-        }
-        if (this.m_popup && this.m_popup.dom && this.m_popup.dom.contains(focus)) {
-            return;
-        }
-        this._hidePopup();
-    }
-    _hidePopup() {
-        if (this.m_popvis) {
-            this.m_popup.close();
-            this.m_popvis = false;
-        }
-        if (this.m_needval) {
-            this.validate();
-            this.m_needval = false;
-        }
-    }
-    _onFocus() {
-        if (this.value.length == 0) {
-            this._onChange();
-        }
-        this.m_needval = true;
-    }
-}
-exports.AutoComplete = AutoComplete;