x4js 1.6.5 → 2.0.2

package/lib/src/tabbar.ts

@@ -1,151 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|  
-*  /__/ \__\   |_|
-*        
-* @file tabbar.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 { Component, Container, ContainerEventMap, CProps, EventHandler } from './component';
-import { Button } from './button';
-import { EvChange } from './x4events';
-import { IconID } from './icon.js';
-
-interface TabBarEventMap extends ContainerEventMap {
-	change: EvChange;
-}
-
-interface TabBarProps extends CProps<TabBarEventMap> {
-	pages?: ITabPage[];
-	default?: string;
-	vertical?: boolean;
-	change: EventHandler<EvChange>;
-}
-
-export interface ITabPage {
-	id: string;
-	title?: string;
-	icon?: IconID;
-	page: Component;
-}
-
-interface TabPage extends ITabPage {
-	btn?: Component;
-}
-
-export class TabBar extends Container<TabBarProps,TabBarEventMap> {
-
-	private m_pages: TabPage[];
-	private m_curPage: TabPage;
-
-	constructor( props: TabBarProps ) {
-		super( props );
-
-		this.m_pages = [];
-		this.m_curPage = null;
-
-		this.mapPropEvents( props, 'change' );
-
-		if( props.vertical ) {
-			this.addClass( '@vlayout')
-		}
-		else {
-			this.addClass( '@hlayout')
-		}
-
-		this.m_props.pages?.forEach( p => this.addPage(p) );
-	}
-
-	componentCreated(): void {
-		if( this.m_props.default ) {
-			this.select( this.m_props.default, true );
-		}		
-	}
-
-	addPage( page: ITabPage ) {
-		this.m_pages.push( { ...page } );
-		this._updateContent( );
-	}
-
-	render( ) {
-		let buttons = [];
-		this.m_pages.forEach( p => {
-			p.btn = new Button( { cls: p===this.m_curPage ? 'selected' : '', text: p.title, icon: p.icon, click: () => this._select(p,true) } );
-			buttons.push( p.btn );
-		});
-
-		this.setContent( buttons );
-	}
-
-	select( id: string | null, notify = false ): boolean {
-		if( !id ) {
-			this._select( null, notify );
-			return true;
-		}
-		else {
-			let page = this.m_pages.find( x => x.id===id );
-			if( page ) {
-				this._select( page, notify );
-				return true;
-			}
-			return false;
-		}
-	}
-
-	private _select( p: TabPage, notify: boolean ) {
-
-		if( this.m_curPage==p ) {
-			return;
-		}
-
-		if( !this.dom ) {
-			this.m_props.default = p.id;
-			return;
-		}
-
-		if( this.m_curPage ) {
-			this.m_curPage.btn.removeClass( 'selected' );
-			if( this.m_curPage.page ) {
-				this.m_curPage.page.hide( );
-			}
-		}
-
-		this.m_curPage = p;
-
-		if( notify ) {
-			this.signal( 'change', EvChange(p ? p.id : null) );
-		}
-
-		if( this.m_curPage ) {
-			this.m_curPage.btn.addClass( 'selected' );
-			if( this.m_curPage.page ) {
-				this.m_curPage.page.show( );
-			}
-		}
-	}
-
-	get selection( ): Component {
-		return this.m_curPage?.page;
-	}
-}

package/lib/src/tabview.ts

@@ -1,110 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|  
-*  /__/ \__\   |_|
-*        
-* @file tabview.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 { Component, CProps } from './component'
-import { HLayout } from './layout'
-import { Button } from './button'
-import { CardView, CardViewProps, ICardViewItem } from './cardview'
-import { MenuItem } from './menu'
-
-interface TabProps extends CardViewProps
-{
-	tab_selector?: boolean;
-	menu?: MenuItem;
-}
-
-/**
- * Standard TabView class
- */
-
-export class TabView extends CardView<TabProps>
-{
-	protected m_tab_selector: boolean;
-	protected m_menu: MenuItem;
-	
-	constructor( props: TabProps ) {
-		super( props );
-
-		this.m_tab_selector = props.tab_selector ? true : false;
-		this.m_menu = props.menu;
-
-		this.addClass( '@vlayout' );
-	}
-	
-	/** @ignore */
-	render() {
-
-		let tabs = [];
-		let pages = [];
-
-		if( this.m_menu ) {
-			this.m_menu.addClass( '@button @tab-btn' );
-			this.m_menu.removeClass( '@menu-item' );
-			tabs.push( this.m_menu );
-		}
-
-		this.m_cards.forEach( (p) => {
-			tabs.push( p.selector );
-			if( !(p.page instanceof Function) ) {
-				pages.push( p.page );
-			}
-		} );
-
-		if( this.m_tab_selector ) {
-			pages.unshift( new HLayout( {
-				cls: '@tab-switch',
-				content: tabs
-			}) );
-		}
-
-		this.setContent( pages );
-	}
-
-	protected _updateSelector( ) {
-	
-	}
-
-	protected _prepareSelector( card: ICardViewItem ): Component {
-		
-		return new Button( {
-			cls: '@tab-btn',
-			text: card.title,
-			icon: card.icon,
-			click: ( ) => { this.switchTo(card.name); }
-		});
-	}
-
-	protected _preparePage( page: Component ) {
-		super._preparePage( page );
-
-		if( !page.dom ) {
-			this.appendChild( page );
-		}
-	}
-}

package/lib/src/textarea.ts

@@ -1,235 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|  
-*  /__/ \__\   |_|
-*        
-* @file textarea.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 { Component, CProps, CEventMap } from './component'
-import { EvChange, EventCallback } from './x4events'
-import { asap } from './tools'
-
-interface TextAreaEventMap extends CEventMap {
-	change: EvChange;
-}
-
-interface Selection {
-	start: number;
-	end: number;
-}
-
-export interface TextAreaProps extends CProps {
-	text?: string;
-	readOnly?: boolean;
-	tabIndex?: number;
-	placeHolder?: string;
-	name?: string;
-	rows?: number;
-	autoGrow?: boolean;
-	autoFocus?: boolean;
-	spellcheck?: boolean;
-
-	change?: EventCallback<EvChange>;
-}
-
-export class TextArea extends Component<TextAreaProps, TextAreaEventMap> {
-
-	constructor(props: TextAreaProps) {
-		super(props);
-
-		this.mapPropEvents( props, 'change' );
-	}
-
-	
-	/** @ignore */
-	render(props: TextAreaProps) {
-
-		props.text = props.text ?? '';
-
-		this.setAttribute('tabindex', props.tabIndex ?? 0);
-		if( props.spellcheck===false ) {
-			this.setAttribute('spellcheck', 'false' );
-		}
-
-		if (props.readOnly !== undefined) {
-			this.setAttribute('readonly', props.readOnly);
-		}
-
-		if (props.rows) {
-			this.setAttribute('rows', props.rows);
-		}
-
-		if (props.placeHolder) {
-			this.setAttribute('placeholder', props.placeHolder);
-		}
-
-		if (props.autoFocus) {
-			this.setAttribute('autofocus', props.autoFocus);
-		}
-
-		if (props.name) {
-			this.setAttribute('name', props.name);
-		}
-
-		if (props.autoGrow) {
-			this.m_props.autoGrow = true;
-			this.setAttribute('rows', this._calcHeight(props.text));
-			this.setDomEvent('keydown', () => {
-				asap( ()=>this._updateHeight());
-			});
-		}
-
-		// avoid going to next element on enter
-		this.setDomEvent('keydown', (e: KeyboardEvent) => {
-			e.stopPropagation();
-		});
-
-		this.setTag( 'textarea');
-		this.setDomEvent('input', () => this._change());
-	}
-
-	private _change() {
-		this.emit('change', EvChange(this.value));
-	}
-
-	componentCreated() {
-		this.value = this.m_props.text;
-	}
-
-	get value(): string {
-
-		if (this.dom) {
-			return (<HTMLTextAreaElement>this.dom).value;
-		}
-
-		return this.m_props.text;
-	}
-
-	set value(t: string) {
-		this.m_props.text = t ?? '';
-
-		if (this.dom) {
-			(<HTMLTextAreaElement>this.dom).value = this.m_props.text;
-
-			if (this.m_props.autoGrow) {
-				this.setAttribute('rows', this._calcHeight(this.m_props.text));
-			}
-		}
-	}
-	
-	get text( ): string {
-		return this.value;
-	}
-
-	set text( text: string ) {
-		this.value = text;
-	}
-
-	private _calcHeight(text: string): number {
-		return 1 + (text.match(/\n/g) || []).length;
-	}
-
-	private _updateHeight() {
-		const text = this.value;
-		const lines = this._calcHeight(text);
-
-		if (this.getData('lines') != lines) {
-			this.setAttribute('rows', lines);
-			this.setData('lines', lines);
-		}
-	}
-
-	/**
-	 * @deprected use appendText
-	 * insert text at cursor position
-	 */
-
-	public insertText(text) {
-		this.appendText( text );
-	}
-
-	/**
-	 * append the text
-	 */
-
-	public appendText( text ) {
-		if (this.dom) {
-			let dom = (<HTMLTextAreaElement>this.dom);
-			let end = dom.selectionEnd;
-			dom.setRangeText(text,end,end,"end");
-		}
-	}
-
-	public replaceText( text ) {
-		if (this.dom) {
-			let dom = (<HTMLTextAreaElement>this.dom);
-			dom.setRangeText(text);
-		}
-	}
-
-	public getSelection( ) : Selection {
-		if (this.dom) {
-			let dom = (<HTMLTextAreaElement>this.dom);
-			return { start: dom.selectionStart, end: dom.selectionEnd };
-		}
-		else {
-			return {start: 0, end: 0 };
-		}
-	}
-
-	public setSelection( sel : Selection ) {
-		if (this.dom) {
-			let dom = (<HTMLTextAreaElement>this.dom);
-			if( sel.start!==undefined ) {
-				dom.selectionStart = sel.start;
-			}
-
-			if( sel.end!==undefined ) {
-				dom.selectionEnd = sel.end;
-			}
-		}
-	}
-	
-	public getStoreValue( ): any {
-		return this.value;
-	}
-
-	public setStoreValue( value: any ) {
-		this.value = value;
-	}
-}
-
-
-
-
-
-
-
-
-
-
-
-
-