x4js 2.2.21 → 2.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.21",
+  "version": "2.2.24",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",
@@ -9,7 +9,7 @@
     ".": "./src/x4.ts"
   },
   "scripts": {
-    "build-publish": "tsx ./publish.ts",
+    "build-publish": "deno run --allow-all ./publish.ts",
     "build-doc": "typedoc",
     "build-types": "npx tsc --declaration --emitDeclarationOnly --outFile types/x4.d.ts"
   },
@@ -35,6 +35,7 @@
     "typescript": "^5.8.3"
   },
   "dependencies": {
+    "tsx": "^4.22.4",
     "typedoc": "^0.28.19",
     "typedoc-plugin-markdown": "^4.12.0"
   }

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

@@ -16,6 +16,11 @@
 
 @use "../shared.scss";
 
+.x4box {
+	min-width: 0;
+	min-height: 0;
+}
+
 .x4hbox {
 	@extend %hbox;
 	&.align-start {

package/src/components/dialog/dialog.ts

@@ -166,7 +166,7 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 	 */
 
 	override setContent(form: Form) {
-		this.dom.replaceChild(this.form.dom, form.dom);
+		this.dom.replaceChild(form.dom,this.form.dom);
 		this.form = form;
 	}
 

package/src/components/propgrid/progrid.module.scss

@@ -74,6 +74,10 @@
 		//border-left: 1px solid var(--color-primary-a50);
 		//border-right: 1px solid var(--color-primary-a50);
 
+		&.even {
+			background-color: var(--color-primary-a5);
+		}
+
 		&:has(:focus) {
 			background-color: var(--color-primary-a20);
 		}

package/src/components/propgrid/propgrid.ts

@@ -19,7 +19,7 @@ import { Button } from "../button/button"
 import { Component, ComponentProps, EvChange, EvFocus } from "../../core/component"
 import { HBox, VBox } from "../boxes/boxes"
 import { Input, InputProps } from "../input/input"
-import { ListItem } from "../listbox/listbox"
+import { ListboxID, ListItem } from "../listbox/listbox"
 import { Label, SimpleText } from "../label/label"
 import { class_ns, isFunction } from '../../core/core_tools';
 import { Icon } from '../components'
@@ -88,9 +88,14 @@ export class PropertyGrid extends VBox {
 
 		for( const g of this.groups ) {
 			items.push( this.makeGroupHeader(g) );
-			g.items.forEach( i => {
+			g.items.forEach( (i,idx) => {
 				if( i ) {
-					items.push( this.makePropertyRow(i) );
+					const row = this.makePropertyRow(i);
+					if( idx&1 ) {
+						row.addClass( "event" )
+					}
+
+					items.push( row );
 				}
 			});
 		}
@@ -106,6 +111,10 @@ export class PropertyGrid extends VBox {
 
 	makeGroupHeader( g: PropertyGroup ) {
 
+		if( g.title===null ) {
+			return null;
+		}
+
 		const toggle = (e: Component) => {
 
 			let visible: boolean;
@@ -175,7 +184,7 @@ export class PropertyGrid extends VBox {
 		}
 		else if (item.type === 'options') {
 			editor = new Select( {
-				value: value as string,
+				value: value as ListboxID,
 				id: item.name,
 				items: item.options,
 				name: item.name,
@@ -189,7 +198,7 @@ export class PropertyGrid extends VBox {
 				type: 'password',
 				id: item.name,
 				name: item.name, 
-				value: value as string, 
+				value: String(value), 
 				focus: ( e: EvFocus ) => {
 					if( e.focus_out ) {
 						item.callback?.( item.name, (editor as Input).getValue() );
@@ -202,7 +211,7 @@ export class PropertyGrid extends VBox {
 				type: 'number', 
 				id: item.name,
 				name: item.name, 
-				value: value as string,
+				value: String(value),
 				step: item.step,
 				focus: ( e: EvFocus ) => {
 					if( e.focus_out ) {
@@ -296,5 +305,11 @@ export class PropertyGrid extends VBox {
 			}
 		}
 	}
+
+	loadProperties( props: any ) {
+		for( const p in props ) {
+			this.setPropValue( p, props[p] );
+		}
+	}
 }
 

package/src/components/radio/radio.ts

@@ -21,9 +21,7 @@ import { EventCallback } from '../../core/core_events';
 import { Label } from '../label/label';
 import { Input } from '../input/input'
 import { HBox } from '../boxes/boxes';
-import { svgLoader } from '../components';
 
-import icon from "./radio.svg";
 import "./radio.module.scss";
 
 /**
@@ -86,10 +84,13 @@ export class Radio extends Component<RadioProps,RadioEvents> {
 			} ),
 		])
 
-		svgLoader.load( icon ).then( svg => {
-			this._check.dom.insertAdjacentHTML( "beforeend", svg );
-			// no error because intenral data image
-		});
+		const drawing = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 5 5" aria-hidden="true"><circle class="fa-primary" cx="2.5" cy="2.5" r="2.5" ></circle><circle class="fa-secondary" cx="2.5" cy="2.5" r="1.25"></circle></svg>`
+		this._check.dom.insertAdjacentHTML( "beforeend", drawing );
+
+		//svgLoader.load( icon ).then( svg => {
+		//	this._check.dom.insertAdjacentHTML( "beforeend", svg );
+		//	// no error because intenral data image
+		//});
 
 		this.addDOMEvent('click', (e) => this._on_click(e));	// for outside click
 	}

package/src/components/select/select.ts

@@ -19,7 +19,7 @@ import { EventCallback } from '../../core/core_events';
 import { Component, ComponentEvent, ComponentProps, EvChange, EvFocus  } from '../../core/component';
 import { class_ns } from '../../core/core_tools';
 
-import { ListItem } from '../components';
+import { ListboxID, ListItem } from '../components';
 
 import "./select.module.scss"
 
@@ -29,7 +29,7 @@ import "./select.module.scss"
 
 export interface SelectProps extends ComponentProps {
 	name?: string;
-	value: string;
+	value: ListboxID;
 	items: ListItem[];
 	multiple?: boolean;
 	change?: EventCallback<EvChange>;
@@ -49,6 +49,8 @@ interface SelectEvents extends ComponentEvent {
 @class_ns( "x4" )
 export class Select extends Component<SelectProps,SelectEvents> {
 
+	private _items: ListItem[];
+
 	constructor( props: SelectProps ) {
 		super( { tag: "select", ...props } );
 
@@ -104,6 +106,7 @@ export class Select extends Component<SelectProps,SelectEvents> {
  	 */
 
 	setItems( items: ListItem[] ) {
+		this._items = [...items];
 		this.setContent( items.map( x => {
 			return new Component( {
 				tag: "option",
@@ -117,17 +120,20 @@ export class Select extends Component<SelectProps,SelectEvents> {
 	 * @returns 
 	 */
 
-	public getValue( ) {
-		return (this.dom as HTMLSelectElement).value;
+	public getValue( ) : ListboxID {
+		const el = (this.dom as HTMLSelectElement);
+		const sel = this._items[el.selectedIndex];
+		return sel?.id;
 	}
 
 	/**
-	 * 
 	 * @param value 
 	 */
 	
-	public setValue( value: string ) {
-		(this.dom as HTMLSelectElement).value = value+"";
+	public setValue( value: ListboxID ) {
+		//(this.dom as HTMLSelectElement).value = value+"";
+		const el = (this.dom as HTMLSelectElement);
+		el.selectedIndex = this._items.findIndex( x => x.id===value );
 	}
 }