x4js 1.4.46 → 1.4.49

package/lib/autocomplete.d.ts

@@ -0,0 +1,58 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @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.
+**/
+import { TextEdit, TextEditProps } from './textedit';
+/**
+ *
+ */
+interface AutoCompleteProps extends TextEditProps {
+    enumValues: (filter: string) => string[];
+}
+/**
+ *
+ */
+export declare class AutoComplete extends TextEdit<AutoCompleteProps> {
+    private m_popup;
+    private m_popvis;
+    private m_needval;
+    private m_lockpop;
+    constructor(props: AutoCompleteProps);
+    _onKey(e: KeyboardEvent): void;
+    private _onChange;
+    componentDisposed(): void;
+    /**
+     * display the popup
+     */
+    showPopup(items: string[]): void;
+    protected _validate(value: string): boolean;
+    validate(): boolean;
+    private _checkFocus;
+    private _hidePopup;
+    private _onFocus;
+}
+export {};

package/lib/autocomplete.js

@@ -0,0 +1,158 @@
+"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 {
+    m_popup;
+    m_popvis;
+    m_needval;
+    m_lockpop;
+    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();
+                    }
+                },
+                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.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;

package/lib/index.d.ts

@@ -27,6 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 export * from "./application";
+export * from "./autocomplete";
 export * from "./base_component";
 export * from "./button";
 export * from "./calendar";

package/lib/index.js

@@ -43,6 +43,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./application"), exports);
+__exportStar(require("./autocomplete"), exports);
 __exportStar(require("./base_component"), exports);
 //export * from "./base64"
 __exportStar(require("./button"), exports);

package/lib/input.d.ts

@@ -48,6 +48,7 @@ export interface InputProps<P extends InputEventMap = InputEventMap> extends CPr
     value_hook?: ValueHook;
     min?: number;
     max?: number;
+    autosel?: boolean;
 }
 /**
  * base class for elements implementing an input

package/lib/input.js

@@ -56,9 +56,15 @@ class Input extends component_1.Component {
             max: props.max,
             ...props.attrs
         });
+        this.m_props.autosel = props.autosel ?? true;
         if (props.uppercase) {
             this.setStyleValue('textTransform', 'uppercase');
         }
+        if (this.m_props.autosel) {
+            this.setDomEvent("focus", () => {
+                this.selectAll();
+            });
+        }
     }
     getType() {
         return this.m_props.type;

package/lib/textedit.d.ts

@@ -46,6 +46,7 @@ export interface TextEditProps extends InputProps<TextEditEventMap> {
     pattern?: string;
     uppercase?: boolean;
     format?: string | 'native';
+    autosel?: boolean;
     gadgets?: Component[];
     validator?: ValidationFunction;
     change?: EventCallback<EvChange>;

package/lib/textedit.js

@@ -91,6 +91,7 @@ class TextEdit extends component_1.Component {
             attrs: props.attrs,
             min: props.min,
             max: props.max,
+            autosel: props.autosel,
         };
         // date is handled manually with popupcalendar
         if (props.type == 'date') {

package/lib/version.d.ts

@@ -1 +1,29 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file version.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.
+**/
 export declare const x4js_version = "1.4";

package/lib/version.js

@@ -1,4 +1,32 @@
 "use strict";
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file version.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.x4js_version = void 0;
 exports.x4js_version = "1.4";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "1.4.46",
+	"version": "1.4.49",
 	"description": "X4js core files",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",

package/src/autocomplete.ts

@@ -34,7 +34,7 @@ import { TextEdit, TextEditProps } from './textedit';
  * 
  */
 
-interface EditSugProps extends TextEditProps {
+interface AutoCompleteProps extends TextEditProps {
 	enumValues: ( filter: string ) => string[];
 }
 
@@ -42,14 +42,14 @@ interface EditSugProps extends TextEditProps {
  * 
  */
 
-export class EditSug extends TextEdit<EditSugProps> {
+export class AutoComplete extends TextEdit<AutoCompleteProps> {
 	
 	private m_popup: PopupListView;
 	private m_popvis: boolean;
 	private m_needval: boolean;
 	private m_lockpop: boolean;
 	
-	constructor( props: EditSugProps ) {
+	constructor( props: AutoCompleteProps ) {
 		super( props );
 
 		this.setDomEvent( "input", ( ) => this._onChange( ) );

package/src/index.ts

@@ -28,6 +28,7 @@
 **/
 
 export * from "./application"
+export * from "./autocomplete"
 export * from "./base_component"
 //export * from "./base64"
 export * from "./button"

package/src/input.ts

@@ -56,6 +56,7 @@ export interface InputProps<P extends InputEventMap = InputEventMap> extends CPr
 	value_hook?: ValueHook;
 	min?: number;
 	max?: number;
+	autosel?: boolean;
 }
 
 
@@ -91,9 +92,17 @@ export class Input extends Component<InputProps,InputEventMap>
 			...props.attrs
 		});
 
+		this.m_props.autosel = props.autosel ?? true;
+		
 		if( props.uppercase ) {
 			this.setStyleValue( 'textTransform', 'uppercase' );
 		}
+
+		if( this.m_props.autosel ) {
+			this.setDomEvent( "focus", ( ) => {
+				this.selectAll( );
+			});
+		}
 	}
 
 	public getType( ) {

package/src/textedit.ts

@@ -69,6 +69,8 @@ export interface TextEditProps extends InputProps<TextEditEventMap> {
 	pattern?: string;
 	uppercase?: boolean;
 	format?: string | 'native'; // default store format on type date. 
+	autosel?: boolean;	// select content on focus
+
 	// by default mysql format without time 'YYYY-MM-DD'
 	// use 'native' to work on real Date object (get/set value)
 
@@ -142,6 +144,7 @@ export class TextEdit<T extends TextEditProps = TextEditProps, E extends TextEdi
 			attrs: props.attrs,
 			min: props.min,
 			max: props.max,
+			autosel: props.autosel,
 		};
 
 		// date is handled manually with popupcalendar

package/src/version.ts

@@ -1 +1,30 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|  
+*  /__/ \__\   |_|
+*        
+* @file version.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.
+**/
+
 export const x4js_version = "1.4";