x4js 1.6.5 → 2.0.2

package/lib/src/textedit.ts

@@ -1,533 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|  
-*  /__/ \__\   |_|
-*        
-* @file textedit.ts
-* @author Etienne Cochard 
-*
-* Copyright (c) 2019-2023 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 { x4document } from './x4dom'
-
-import { Component, EvFocus, HtmlString } from './component'
-import { Input, InputProps, InputEventMap, EditType } from './input'
-import { IconID } from './icon'
-import { Button } from './button'
-import { HLayout } from './layout'
-import { Label } from './label'
-import { PopupCalendar } from './calendar'
-import { sprintf, parseIntlDate, formatIntlDate } from './tools';
-import { Tooltip } from './tooltips'
-import { EvClick, EvChange, EventCallback } from './x4events';
-
-import { _tr } from './i18n'
-
-// throw in case of error
-// return the corrected
-type ValidationFunction = (value: string) => string;
-
-/** @ignore */
-const 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,}))$/;
-
-// ============================================================================
-// [TEXTEDIT]
-// ============================================================================
-
-interface TextEditEventMap extends InputEventMap  {
-	click: EvClick;
-	change: EvChange;
-	focus: EvFocus;
-}
-
-export interface TextEditProps extends InputProps<TextEditEventMap> {
-	label?: string | HtmlString;
-	labelWidth?: number;	// <0 for flex -> -3 mean flex: 3
-	labelAlign?: 'left' | 'right' | 'top';
-	required?: boolean;
-	spellcheck?: boolean;
-	icon?: IconID;
-	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)
-
-	gadgets?: Component[];
-
-	validator?: ValidationFunction;
-
-	change?: EventCallback<EvChange>;	// shortcut to events: { change: ... }
-	click?: EventCallback<EvClick>;		// shortcut to events: { click: ... }
-	focus?: EventCallback<EvFocus>;		// shortcut to events: { focus: ... }
-}
-
-
-
-/**
- * TextEdit is a single line editor, it can have a label and an error descriptor.
- */
-
-export class TextEdit<T extends TextEditProps = TextEditProps, E extends TextEditEventMap = TextEditEventMap > extends Component<T, E> {
-
-	private m_cal_popup: PopupCalendar;
-	protected m_ui_input: Input;
-	
-	constructor(props: T) {
-		super(props);
-		this.addClass( '@hlayout' );
-		this.mapPropEvents( props, 'change', 'click', 'focus' );
-	}
-
-	componentCreated() {
-		super.componentCreated( );
-
-		if (this.m_props.autoFocus) {
-			this.focus();
-		}
-	}
-
-	focus() {
-		this.m_ui_input.focus();
-	}
-
-	/** @ignore */
-	render(props: TextEditProps) {
-
-		let eprops: InputProps = {
-			flex: 1,
-			dom_events: {
-				focus: ( ) => this._focus( ),
-				focusout: ( ) => this._blur( ),
-				input: ( ) => this._change( )
-			},
-			value: props.value,
-			name: props.name,
-			type: props.type,
-			placeHolder: props.placeHolder,
-			autoFocus: props.autoFocus,
-			readOnly: props.readOnly,
-			value_hook: props.value_hook,
-			uppercase: props.uppercase,
-			spellcheck: props.spellcheck,
-			tabIndex: props.tabIndex === undefined ? true : props.tabIndex,
-			attrs: props.attrs,
-			min: props.min,
-			max: props.max,
-			autosel: props.autosel,
-		};
-
-		// date is handled manually with popupcalendar
-
-		if (props.type == 'date') {
-			props.format = props.format ?? 'Y-M-D';
-			eprops.type = 'text';
-
-			let def_hook = {
-				get: ( ) => this._date_get_hook(),
-				set: (e) => this._date_set_hook(e)
-			}
-
-			eprops.value_hook = props.value_hook ?? def_hook;
-		}
-
-		this.m_ui_input = new Input(eprops);
-
-		//	button
-		let button = undefined;
-		if (props.icon) {
-			button = new Button({
-				icon: props.icon,
-				click: () => this._btnClick(),
-				tabIndex: false
-			});
-		}
-		else if (props.type == 'date') {
-
-			button = new Button({
-				cls: 'gadget',
-				icon: 'var( --x4-icon-calendar-days )',
-				tabIndex: false,
-				click: () => this._showDatePicker(button)
-			});
-
-			if (!props.validator) {
-				props.validator = this._date_validator;
-			}
-		}
-
-		let ag = props.gadgets ?? [];
-		ag.forEach( b => {
-			b.addClass( 'gadget' );
-		});
-
-		let gadgets = [button, ...ag];
-
-		this.setClass('@required', props.required);
-		if (props.gadgets && props.gadgets.length) {
-			this.addClass('with-gadgets');
-		}
-
-		let width = undefined,
-			flex = undefined,
-			labelWidth = props.labelWidth;
-
-		if (labelWidth > 0) {
-			width = labelWidth;
-		}
-
-		if (labelWidth < 0) {
-			flex = -labelWidth;
-		}
-
-		let label = undefined;
-		let labelAlign = props.labelAlign;
-		let top = false;
-
-		if (props.label) {
-
-			if (labelAlign == 'top') {
-				labelAlign = 'left';
-				top = true;
-				flex = 1;
-			}
-
-			label = new Label({
-				ref: 'label',
-				tag: 'label',
-				cls: 'label1' + (props.label ? '' : ' @hidden'),	// todo: why 'label1' class name ?
-				text: props.label ?? '',
-				width,
-				flex,
-				align: labelAlign
-			});
-		}
-
-		if (top) {
-			this.removeClass('@hlayout');
-			this.addClass('@vlayout vertical');
-
-			this.setContent([
-				label,
-				new HLayout({ width, content: [this.m_ui_input, ...gadgets] })
-			]);
-		}
-		else {
-			this.addClass('@hlayout');
-			this.setContent([label, this.m_ui_input, ...gadgets]);
-		}
-	}
-
-	enable(ena?: boolean) {
-		if (ena === true) {
-			this.m_ui_input.enable();
-		}
-
-		super.enable(ena);
-	}
-
-	disable() {
-		this.m_ui_input.disable();
-		super.disable();
-	}
-
-	private _btnClick() {
-		this.emit('click', EvClick(this.value) );
-	}
-
-	/**
-	 * select the value format for input/output on textedit of type date
-	 * cf. formatIntlDate / parseIntlDate
-	 * @param fmt 
-	 */
-	public setDateStoreFormat(fmt: string) {
-		this.m_props.format = fmt;
-	}
-
-	public setStoreValue(value: any) {
-		this.m_ui_input.setStoreValue(value);
-	}
-
-	public getStoreValue(): any {
-		return this.m_ui_input.getStoreValue();
-	}
-
-	private _date_get_hook() {
-		let date = parseIntlDate(this.value);
-		let props = this.m_props;
-		if (props.format == 'native') {
-			return date;
-		}
-		else {
-			return date ? formatIntlDate(date, props.format) : null;
-		}
-	}
-
-	private _date_set_hook(dte) {
-		let props = this.m_props;
-
-		if (props.format == 'native') {
-			this.value = formatIntlDate(dte);
-		}
-		else if (dte) {
-			let date = parseIntlDate(dte, props.format);
-			this.value = formatIntlDate(date);
-		}
-		else {
-			this.value = '';
-		}
-	}
-
-	public showError(text: string) {
-		this.m_ui_input.showError( text );
-	}
-
-	public clearError() {
-		this.m_ui_input.clearError( );
-	}
-
-	public get value(): string {
-		return this.getValue( );
-	}
-
-	public getValue( ) : string {
-		if (this.m_ui_input) {
-			return this.m_ui_input.value;
-		}
-		else {
-			return this.m_props.value;
-		}
-	}
-
-	/**
-	 * 
-	 */
-
-	public set value(value: string) {
-		this.setValue( value );
-	}
-
-	public setValue( value: string ) {
-		if (this.m_ui_input) {
-			this.m_ui_input.value = value;
-		}
-		else {
-			this.m_props.value = value;
-		}
-	}
-
-	/**
-	 * select all the text
-	 */
-
-	public selectAll() {
-		this.m_ui_input.selectAll();
-	}
-
-	public select(start: number, length: number = 9999): void {
-		this.m_ui_input.select(start, length);
-	}
-
-	public getSelection() {
-		return this.m_ui_input.getSelection();
-	}
-
-	set readOnly(ro: boolean) {
-		this.m_ui_input.readOnly = ro;
-	}
-
-	get label() {
-		return this.itemWithRef<Label>('label')?.text;
-	}
-
-	set label(text) {
-		this.itemWithRef<Label>('label').text = text;
-	}
-
-	/**
-	 * content changed
-	 * todo: should move into Input
-	 */
-
-	private _change() {
-		let value = this.m_ui_input.value;
-		this.emit('change', EvChange(value));
-	}
-
-	/**
-	 * getting focus
-	 */
-
-	private _focus() {
-		this.clearError();
-		this.emit('focus', EvFocus(true));
-	}
-
-	/**
-	 * loosing focus
-	 * @param value 
-	 */
-
-	private _blur() {
-		this._validate(this.m_ui_input.value);
-		this.emit('focus', EvFocus(false));
-	}
-
-	/**
-	 * todo: should move into Input
-	 * @returns 
-	 */
-	public validate(): boolean {
-		return this._validate(this.value);
-	}
-
-	protected _validate(value: string): boolean {
-		let props = this.m_props;
-		let update = false;
-
-		if (props.required && value.length == 0) {
-			this.showError(_tr.global.required_field);
-			return false;
-		}
-
-		if (value != '') {
-			let pattern = this.getAttribute('pattern');
-			if (pattern) {
-				let re = new RegExp(pattern);
-				if (re && !re.test(value)) {
-					this.showError(_tr.global.invalid_format);
-					return false;
-				}
-			}
-
-			if (props.type == 'email') {
-				if (!reEmail.test(value.toLowerCase())) {
-					this.showError(_tr.global.invalid_email);
-					return false;
-				}
-			}
-			else if (props.type == 'number') {
-
-				const v = parseFloat(value);
-				if (isNaN(v)) {
-					this.showError(_tr.global.invalid_number);
-					return false;
-				}
-
-				let min = parseFloat(this.m_ui_input.getAttribute('min'));
-				if (min !== undefined && v < min) {
-					value = '' + min;
-					update = true;
-				}
-
-				let max = parseFloat(this.m_ui_input.getAttribute('max'));
-				if (max !== undefined && v > max) {
-					value = '' + max;
-					update = true;
-				}
-			}
-		}
-
-
-		if (props.validator) {
-			try {
-				this.value = props.validator(value);
-			}
-			catch (err) {
-				this.showError(err instanceof Error ? err.message : err as string);
-				return false;
-			}
-		}
-		else if (update) {
-			this.value = value;
-		}
-
-		return true;
-	}
-
-	_date_validator(value: string): string {
-
-		value = value.trim();
-		if (value == '') {
-			return '';
-		}
-
-		let date: Date;
-		if (value == '@') {
-			date = new Date();
-		}
-		else {
-			date = parseIntlDate(value);
-			if (!date) {
-				throw sprintf(_tr.global.invalid_date, _tr.global.date_format);
-			}
-		}
-
-		return formatIntlDate(date);
-	}
-
-
-	//onKeyDown( e ) {
-	//    if( this.readOnly ) {
-	//        if( this.type=='date' && (e.key==' ' || e.key=='Enter') ) {
-	//            this.showDatePicker( );
-	//            e.stopPropagation( );
-	//            e.preventDefault( );
-	//        }
-	//    }
-	//}
-
-	//onClick( e ) {
-	//    if( this.readOnly ) {
-	//        if( this.type=='date' ) {
-	//            this.showDatePicker( );
-	//            e.stopPropagation( );
-	//            e.preventDefault( );
-	//        }
-	//    }
-	//}
-
-	private _showDatePicker(btn: Component) {
-
-		if (!this.m_cal_popup) {
-			this.m_cal_popup = new PopupCalendar({
-				change: (ev: EvChange) => {
-					this.value = formatIntlDate(ev.value as Date);
-					this.m_cal_popup.close();
-				}
-			});
-		}
-
-		let rc = this.m_ui_input.getBoundingRect();
-		this.m_cal_popup.displayAt(rc.left, rc.bottom, 'top left');
-	}
-
-	get input() {
-		return this.m_ui_input;
-	}
-
-	get type(): EditType {
-		return this.m_props.type;
-	}
-}

package/lib/src/toaster.ts

@@ -1,80 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|  
-*  /__/ \__\   |_|
-*        
-* @file toaster.ts
-* @author Etienne Cochard 
-*
-* Copyright (c) 2019-2023 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 { IconID } from './icon';
-import { Label } from "./label";
-import { Popup, PopupProps} from './popup';
-
-
-export interface ToasterProps extends PopupProps {
-	message: string;
-	icon?: IconID;
-}
-
-export class Toaster extends Popup<ToasterProps> {
-
-	private m_message: string;
-	private m_icon: IconID;
-
-	constructor( props: ToasterProps ) {
-		super( props );
-
-		this.m_message = props.message;
-		this.m_icon = props.icon;
-		this.enableMask( false );
-		this.addClass( '@non-maskable' );
-	}
-
-	/** @ignore */	
-	render( ) {
-		this.addClass( '@hlayout' );
-		this.setContent( [
-			new Label( { icon: this.m_icon, text: this.m_message } )
-		]);
-	}
-
-	show( ) {
-		this.show = super.show;
-		this.displayAt( 9999, 9999, 'br', {x:0,y:-24} );
-
-		let opacity = 1.0;
-
-		this.startTimer( 'fadeout', 2000, false, ( ) => {
-			
-			this.startTimer( 'opacity', 100, true, ( ) => {
-				this.setStyleValue( 'opacity', opacity );
-				opacity -= 0.1;
-			
-				if( opacity<0 ) {
-					this.dispose( );
-				}
-			});
-		} );
-	}
-}