x4js 2.0.1 → 2.0.3

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "x4js",
-	"version": "2.0.1",
+	"version": "2.0.3",
 	"description": "X4 framework",
 	"author": "etienne cochard",
-	"main": "main.js",
+	"main": "src/x4.js",
 	"types": "lib/types/x4.d.ts",
 	"license": "MIT",
 	"repository": {
@@ -23,21 +23,23 @@
 	],
 	"scripts": {
 		"build": "node scripts/build.mjs --watch --hmr --serve",
-		"build-release": "node scripts/build.mjs --release --serve",
-		"build-dts": "dts-generator --project . --out lib/types/x4.d.ts",
+		"build-release": "node scripts/build.mjs --release",
 		"prepack": "node scripts/prepack.mjs"
 	},
 	"homepage": "https://x4js.org",
 	"module": "lib/esm/x4js.js",
+	"files": [
+		"lib/x4.css"
+	],
 	"exports": {
 		".": {
 			"import": {
-				"types": "./lib/types/x4js.d.ts",
-				"default": "./lib/esm/x4js.mjs"
+				"types": "./lib/types/x4.d.ts",
+				"default": "./lib/esm/x4.mjs"
 			},
 			"require": {
-				"types": "./lib/types/x4js.d.ts",
-				"default": "./lib/cjs/x4js.js"
+				"types": "./lib/types/x4.d.ts",
+				"default": "./lib/cjs/x4.js"
 			}
 		}
 	},
@@ -52,8 +54,9 @@
 	},
 	"x4build": {
 		"entryPoints": [
-			"src/main.tsx"
+			"src/x4.ts"
 		],
+		"outdir": "build",
 		"copy": [
 			{
 				"from": "src/assets",

package/lib/README.txt

@@ -1,15 +0,0 @@
-# x4 framework
-
-This is the x4 framework repository.
-
-X4 is a full typescript framework to develop Web or Desktop applications.
-Included more than 40 controls like grids, charts, etc. Everything needed to push the limits of your creativity.
-If these components are not enough, you can create your in few lines.
-
-## Home page
-see [home](https://x4js.org)
-
-## API Documentation
-see [API](https://x4js.org/api/)
-
-

package/lib/src/assets/house-light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M298.6 4c-6-5.3-15.1-5.3-21.2 0L5.4 244c-6.6 5.8-7.3 16-1.4 22.6s16 7.3 22.6 1.4L64 235l0 197c0 44.2 35.8 80 80 80l288 0c44.2 0 80-35.8 80-80l0-197 37.4 33c6.6 5.8 16.7 5.2 22.6-1.4s5.2-16.7-1.4-22.6L298.6 4zM96 432l0-225.3L288 37.3 480 206.7 480 432c0 26.5-21.5 48-48 48l-64 0 0-160c0-17.7-14.3-32-32-32l-96 0c-17.7 0-32 14.3-32 32l0 160-64 0c-26.5 0-48-21.5-48-48zm144 48l0-160 96 0 0 160-96 0z"/></svg>

package/lib/src/assets/radio.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 5 5" aria-hidden="true">
-	<circle cx="2.5" cy="2.5" r="2.5" fill="currentColor"></circle>
-	<circle cx="2.5" cy="2.5" r="1.25" fill="white"></circle>
-</svg>

package/lib/src/components/base.scss

@@ -1,26 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|.2
- * 
- * @file base.scss
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-@use "./shared.scss";
-
-.x4box {
-	@extend .box;
-}
-
-.x4flex {
-	@extend .flex;
-}
-

package/lib/src/components/boxes/boxes.module.scss

@@ -1,37 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file boxes.module.scss
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-@use "../shared.scss";
-
-.x4hbox {
-	@extend .hbox;
-}
-
-.x4vbox {
-	@extend .vbox;
-}
-
-.x4stackbox {
-	&>* {
-		@extend .fit;
-		position: relative !important;
-	}
-
-	&>*:not(.selected) {
-		display: none;
-	}
-}
-

package/lib/src/components/boxes/boxes.ts

@@ -1,125 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file boxes.ts
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-import { Component, ComponentEvents, ComponentProps } from "@core/component"
-
-import "./boxes.module.scss";
-
-export interface BoxProps extends ComponentProps {
-}
-
-/**
- * 
- */
-
-export class Box<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Component<P,E> {
-}
-
-
-/**
- * 
- */
-
-export class HBox<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
-}
-
-/**
- * 
- */
-
-export class VBox<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Box<P,E> {
-	constructor( p: P ) {
-		super( p );
-	}
-}
-
-
-/**
- * stack of widgets where only one widget is visible at a time
- */
-
-interface StackItem {
-	name: string;
-	content: Component;
-}
-
-interface StackedLayoutProps extends Omit<ComponentProps,"content"> {
-	default: string;
-	items: StackItem[];
-}
-
-interface _StackItem extends StackItem {
-	page: Component;
-}
-
-export class StackBox extends Box<StackedLayoutProps> {
-
-	private _items: _StackItem[];
-
-	constructor( props: StackedLayoutProps ) {
-		super( props );
-
-		this._items = props.items?.map( itm => {
-			return { ...itm, page: null };
-		});
-
-		if( props.default ) {
-			this.select( props.default );
-		}
-		else if( this._items.length ) {
-			this.select( this._items[0].name );
-		}
-	}
-
-	select( name: string ) {
-		let sel = this.query( `.selected` );
-		if( sel ) {
-			sel.setClass( "selected", false );
-		}
-
-		const pg = this._items.find( x => x.name==name );
-		if( pg ) {
-			if( !pg.page ) {
-				pg.page = this._createPage( pg );
-				this.appendContent( pg.page );
-			}
-
-			sel = pg.page;
-			if( sel ) {
-				sel.setClass( "selected", true );
-			}
-		}
-	}
-
-	/**
-	 * 
-	 */
-
-	private _createPage( page: _StackItem ) {
-		
-		let content: Component;
-		//if( page.content instanceof ComponentBuilder ) {
-		//	content = page.content.create( );
-		//}
-		//else {
-			content = page.content;
-		//}
-		
-		content?.setData( "stackname", page.name );
-		return content;
-	}
-}
-

package/lib/src/components/btngroup/btngroup.module.scss

@@ -1,29 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file btngroup.model.scss
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-.x4btngroup {
-	align-content: start;
-	margin: 5px;
-	gap: 4px;
-
-	&.align-right {
-		justify-content: end;
-	}
-
-	&.align-center {
-		justify-content: center;
-	}
-}

package/lib/src/components/btngroup/btngroup.ts

@@ -1,106 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file btngroup.ts
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-import { Component, ComponentEvent, ComponentEvents, ComponentProps, Flex } from '@core/component';
-import { EventCallback } from '@core/core_events.js';
-import { isString } from '@core/core_tools';
-import { _tr } from '@core/core_i18n'
-
-import { Button } from '../button/button';
-import { Box } from '../boxes/boxes.js';
-import { Label } from '../label/label.js';
-import { EvBtnClick } from '../dialog/dialog.js';
-
-import "./btngroup.module.scss"
-
-
-type predefined = "ok" | "cancel" | "yes" | "no" | "retry" | "abort" | "-";	// - = flex
-export type BtnGroupItem = predefined | Button | Label;
-
-interface BtnClickEvent extends ComponentEvent {
-	emitter: predefined;
-}
-
-interface BtnGroupEvents extends ComponentEvents {
-	btnclick: BtnClickEvent;
-}
-
-interface BtnGroupProps extends Omit<ComponentProps,"content"> {
-	align?: "left" | "center" | "right";	// left default
-	vertical?: boolean;					
-	items: BtnGroupItem[];
-	reverse?: boolean,
-	btnclick?: EventCallback<EvBtnClick>;
-}
-
-export class BtnGroup extends Box<BtnGroupProps,BtnGroupEvents> {
-
-	constructor( props: BtnGroupProps ) {
-		super( props );
-
-		if( props.align ) {
-			this.addClass( "align-"+props.align );
-		}
-
-		this.addClass( props.vertical ? "x4vbox" : "x4hbox" );
-
-		if( props.items ) {
-			this.setButtons( props.items );
-		}
-
-		this.mapPropEvents( props, "btnclick" );
-	}
-
-	/**
-	 * 
-	 * @param btns 
-	 */
-
-	setButtons( btns: BtnGroupItem[] ) {
-
-		this.clearContent( );
-
-		const childs: Component[] = [];
-
-		btns?.forEach( (b: string | Component) => {
-
-			if( b==="-" ) {
-				b = new Flex( {} );
-			}
-			else if( isString(b) ) {
-				let title: string;
-				const nm = b as predefined;
-
-				switch( b as predefined ) {
-					case "ok": 		title = _tr.global.ok; break;
-					case "cancel": 	title = _tr.global.cancel; break;
-					case "abort":	title = _tr.global.abort; break;
-					case "no":		title = _tr.global.no; break;
-					case "yes":		title = _tr.global.yes; break;
-					case "retry":	title = _tr.global.retry; break;
-				}
-
-				b = new Button( { label: title, click: ( ) => {
-					this.fire( "btnclick", {emitter:nm} )
-				} } );
-			}
-
-			childs.push( b );
-		});
-
-		super.setContent( childs );
-	}
-}

package/lib/src/components/button/button.module.scss

@@ -1,154 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file button.module.scss
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-@use "../shared.scss";
-
-:root {
-	--button-background: var( --accent-background );
-	--button-color: var( --accent-color );
-
-	--button-background-hover: var( --accent-background-hover );
-	--button-color-hover: var( --accent-color-hover );
-
-	--button-background-active: var( --accent-background-active );
-	--button-color-active: var( --accent-color-active );
-
-	--button-background-focus: var( --accent-background-focus );
-	--button-color-focus: var( --accent-color-focus );
-
-	--button-background-disabled: var( --disabled-background );
-	--button-color-disabled: var( --disabled-color );
-
-	--button-icon-color: rgb(255 255 255 / 64%);
-
-	// outline
-	--ol-button-background: var( --background-primary );
-	--ol-button-background-active: #eee;
-	--ol-button-color: var( --text-primary );
-	--ol-button-border: var( --border );
-	--ol-button-icon-color: var( --text-primary );
-
-	--ol-button-border-focus: var( --accent-background-focus );
-	--ol-button-color-focus: var( --accent-background );
-}
-
-.x4button {
-	@extend .hbox;
-	
-	margin: 5px;
-	gap: 4px;
-
-	font-size: inherit;
-	font-family: inherit;
-	
-	padding: 8px;
-	margin: 2px;
-	transition: background-color 0.3s, color 0.3s;
-	
-	border: none;
-	outline: none;
-	cursor: pointer;
-	
-	background-color: var( --button-background );
-	color: var( --button-color );
-
-	gap: 0.4em;
-		
-	&> #icon {
-		transition: color 0.3s;
-		width: 1em;
-		height: 1em;
-		//color: var( --button-icon-color );
-
-		&.empty {
-			display: none;
-		}
-	}
-
-	&> #label {
-		@extend .flex;
-
-		padding: 0;
-		color: inherit;
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	&:focus {
-		background-color: var( --button-background-focus );
-		color: var( --button-color-focus );
-		#icon {
-			color: var( --button-color-focus );
-		}
-
-		#label {
-			text-decoration: underline;
-		}
-	}
-
-	&:hover {
-		background-color: var( --button-background-hover );
-		color: var( --button-color-hover );
-	}
-
-	&:active{
-		background-color: var( --button-background-active );
-		color: var( --button-color-active );
-	}	
-
-	&[disabled] {
-		cursor: not-allowed;
-		background-color: var( --button-background-disabled );
-		color: var( --button-color-disabled );
-	}
-}
-
-.x4button.outline {
-	background-color: var( --ol-button-background );
-	border: 1px solid var( --ol-button-border );
-	color: var( --ol-button-color );
-
-	#icon {
-		color: var( --ol-button-icon-color );
-	}
-
-	&:focus{
-		border-color: var( --ol-button-border-focus );
-		color: var( --ol-button-color-focus );
-		#icon {
-			color: var( --ol-button-color-focus );
-		}
-	}
-
-	&:active{
-		background-color: var( --ol-button-background-active );
-		color: var( --button-color-active );
-		#icon {
-			color: var( --button-icon-color );
-		}
-	}	
-}
-
-.x4button.danger {
-	background-color: var( --alert-background );
-	color: var( --alert-color );
-
-	&:active {
-		background-color: var( --alert-background-active );
-	}
-}

package/lib/src/components/button/button.ts

@@ -1,117 +0,0 @@
-/** 
- *  ___  ___ __
- *  \  \/  /  / _
- *   \    /  /_| |_
- *   /    \____   _|  
- *  /__/\__\   |_|
- * 
- * @file button.ts
- * @author Etienne Cochard 
- * 
- * @copyright (c) 2024 R-libre ingenierie
- *
- * Use of this source code is governed by an MIT-style license 
- * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
- **/
-
-import { Component, ComponentEvents, ComponentProps, EvClick } from "@core/component"
-import { EventCallback } from '@core/core_events.js';
-import { UnsafeHtml } from '@core/core_tools.js';
-
-import { Icon } from "../icon/icon"
-
-import "./button.module.scss";
-
-
-/**
- * Button events
- */
-
-interface ButtonEvents extends ComponentEvents {
-	click: EvClick;
-}
-
-/**
- * Button properties.
- */
-
-export interface ButtonProps extends ComponentProps {
-	label?: string;
-	icon?: string;
-	click?: EventCallback<EvClick>;
-}
-
-/**
- * Button component.
- */
-
-export class Button extends Component<ButtonProps,ButtonEvents> {
-
-	/**
-     * Creates an instance of Button.
-     * 
-     * @param props - The properties for the button component, including label and icon.
-     * @example
-     * const button = new Button({ label: 'Submit', icon: 'check-icon' });
-     */
-
-	constructor( props: ButtonProps ) {
-		super( { ...props, tag: 'button', content: null } );
-
-		this.mapPropEvents( props, 'click' );
-		this.addDOMEvent('click', (e) => this._on_click(e));
-
-		this.setContent( [
-			new Icon( { id: "icon", iconId: this.props.icon } ),
-			new Component( { id: "label", content: this.props.label } ),
-		] );
-	}
-
-	/**
-	 * called by the system on click event
-	 */
-
-	protected _on_click( ev: MouseEvent ) {
-
-		//if (this.m_props.menu) {
-		//	let menu = new Menu({
-		//		items: isFunction(this.m_props.menu) ? this.m_props.menu() : this.m_props.menu
-		//	});
-		//
-		//	let rc = this.getBoundingRect();
-		//	menu.displayAt(rc.left, rc.bottom, 'tl');
-		//}
-		//else {
-			this.fire('click', {} );
-		//}
-
-		ev.preventDefault();
-		ev.stopPropagation();
-	}
-
-	/**
-     * Sets the text content of the button's label.
-     * 
-     * @param text - The new text or HTML content for the label.
-     * @example
-     * button.setText('Click Me');
-     * button.setText(new UnsafeHtml('<b>Bold Text</b>'));
-     */
-
-	public setText( text: string | UnsafeHtml ) {
-		this.query( "#label" ).setContent( text );
-	}
-
-	/**
-     * Sets the icon of the button.
-     * 
-     * @param icon - The new icon ID to set on the button.
-     * @example
-     * button.setIcon('new-icon-id');
-     */
-
-	public setIcon( icon: string ) {
-		this.query<Icon>( "#icon" ).setIcon( icon );
-	}
-}
-

package/lib/src/components/calendar/calendar-check-sharp-light.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M128 16l0-16L96 0l0 16 0 48L32 64 0 64 0 96l0 64 0 32L0 480l0 32 32 0 384 0 32 0 0-32 0-288 0-32 0-64 0-32-32 0-64 0 0-48 0-16L320 0l0 16 0 48L128 64l0-48zM32 192l384 0 0 288L32 480l0-288zm0-96l384 0 0 64L32 160l0-64zM331.3 283.3L342.6 272 320 249.4l-11.3 11.3L208 361.4l-52.7-52.7L144 297.4 121.4 320l11.3 11.3 64 64L208 406.6l11.3-11.3 112-112z"/></svg>