x4js 2.2.13 → 2.2.14

package/README.md

@@ -11,7 +11,7 @@ If these components are not enough, you can create your in few lines.
 see [home](https://x4js.org)
 
 ## API Documentation
-see [API](https://x4js.org/api/)
+see [API](docs/index.html)
 
 ## Ideas
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.13",
+  "version": "2.2.14",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",
@@ -9,7 +9,9 @@
     ".": "./src/x4.ts"
   },
   "scripts": {
-    "build-publish": "tsx ./publish.ts"
+    "build-publish": "tsx ./publish.ts",
+    "docs": "typedoc",
+    "docs:watch": "typedoc --watch"
   },
   "files": [
     "src",
@@ -31,5 +33,8 @@
   ],
   "devDependencies": {
     "typescript": "^5.8.3"
+  },
+  "dependencies": {
+    "typedoc": "^0.28.19"
   }
 }

package/src/components/checkbox/checkbox.ts

@@ -78,6 +78,7 @@ export class Checkbox extends Component<CheckboxProps,CheckBoxEvents> {
 
 		svgLoader.load( icon ).then( svg => {
 			this.query<Label>( '.inner' ).dom.insertAdjacentHTML( "beforeend", svg );
+			// no error because intenral data image
 		});
 
 		this.addDOMEvent('click', (e) => this._on_click(e));	// for outside click

package/src/components/colorinput/colorinput.ts

@@ -60,6 +60,8 @@ export class ColorInput extends HBox<ColorInputProps> {
 				eyeDropper.open( ).then( ( result: any ) => {
 					color = new Color( result.sRGBHex );
 					updateColor( color );
+				}).catch( (_: any ) => {
+					/* silence */
 				});
 			} } ) : null
 		])

package/src/components/colorpicker/colorpicker.ts

@@ -427,7 +427,9 @@ export class ColorPicker extends VBox<ColorPickerProps,ColorPickerChangeEvents>
 					this._sat.updateBaseColor( hsv );
 					this._hue.updateHue( hsv );
 					updateColor( );
-				});
+				}).catch( (_: any )=> {
+					/* silence */
+				} );
 			})
 		}
 

package/src/components/combobox/combobox.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Component, ComponentEvents, ComponentProps, EvSelectionChange, makeUniqueComponentId } from '../../core/component';
-import { class_ns, IComponentInterface, IFormElement, kbNav } from '../../core/core_tools';
+import { class_ns, IComponentInterface, IFormElement, kbNav, safeText, sanitizeHtml, UnsafeHtml } from '../../core/core_tools';
 import { EventCallback } from '../../core/core_events';
 
 import { Listbox, ListboxID, ListItem } from '../listbox/listbox';
@@ -131,9 +131,7 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 				list.select( sel, false );
 			}
 
-			//TODO: unsafehtml
-			//@ts-ignore
-			this._input.setValue( itm ? itm.text : "" );
+			this._input.setValue( safeText(itm.text) );
 			
 			if( !this._prevent_close ) {
 				this._popup.show( false );
@@ -267,8 +265,7 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 				isValid: ( ) => { return this._input.isValid(); }
 			};
 
-			//@ts-ignore
-			return i as T;
+			return i as unknown as T;
 		}
 		
 		return super.queryInterface( name );

package/src/components/dialog/dialog.ts

@@ -101,6 +101,9 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 			})
 		]);
 
+		this.setAria( "role", "dialog" );
+		this.setAria( "aria-describedby", props.title );
+
 		this.addDOMEvent("keydown", (ev) => {
 
 			if (ev.key == 'Escape') {
@@ -206,8 +209,7 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 				focusNext: ( n: boolean ) => { return this.focusNext( n ); }
 			};
 
-			//@ts-ignore
-			return i as T;
+			return i as unknown as T;
 		}
 		
 		return super.queryInterface( name );
@@ -219,6 +221,7 @@ export class Dialog<P extends DialogProps = DialogProps, E extends DialogEvents
 
 	setTitle( title: string ) {
 		this._title.setText( title );
+		this.setAria( "aria-describedby", title );
 	}
 
 	/**

package/src/components/icon/icon.ts

@@ -14,8 +14,8 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { class_ns } from '../../core/core_tools.ts';
-import { Component, ComponentProps } from '../../core/component.ts';
+import { class_ns } from '../../core/core_tools';
+import { Component, ComponentProps } from '../../core/component';
 
 import "./icon.module.scss"
 
@@ -52,6 +52,10 @@ class SvgLoader {
 						const ww = this.waiters.get( file );
 						ww.forEach( cb => cb(data ) );
 					})
+					.catch( e => {
+						this.cache.set( file, null );
+						reject( e );
+					} )
 			}
 		});
 	}
@@ -61,6 +65,8 @@ class SvgLoader {
 		if( res.ok ) {
 			return res.text( );
 		}
+
+		throw new Error( `file not found: ${file}` );
 	}
 
 }
@@ -149,7 +155,9 @@ export class Icon extends Component<IconProps> {
 				svgLoader.load( iconId ).then( svg => {
 					this.clearContent( );
 					this.dom.insertAdjacentHTML('beforeend', svg );
-				});
+				}).catch( _ => {
+					/*silence*/
+				} );
 			}
 			else {
 				this.setContent( new Component( { tag: "img", attrs: { src: iconId } } ) );

package/src/components/input/input.ts

@@ -527,8 +527,7 @@ export class Input extends Component<InputProps,InputEvents> {
 				isValid: ( ) => { return this.isValid(); }
 			};
 
-			//@ts-ignore
-			return i as T;
+			return i as unknown as T;
 		}
 		
 		return super.queryInterface( name );

package/src/components/radio/radio.ts

@@ -88,6 +88,7 @@ export class Radio extends Component<RadioProps,RadioEvents> {
 
 		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/slider/slider.ts

@@ -159,7 +159,7 @@ export class Slider extends Component<SliderProps,SliderEvents> {
 	}
 
 	private _on_key( ev: KeyboardEvent ) {
-		console.log( ev.key );
+		//console.log( ev.key );
 
 		let stp = this.props.step ?? 1;
 		let inc = 0;

package/src/components/spreadsheet/spreadsheet.ts

@@ -15,7 +15,7 @@
  **/
 
 
-import { Component, ComponentContent, ComponentEvents, ComponentProps, EvClick, EvContextMenu, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
+import { Component, ComponentContent, ComponentEvents, ComponentProps, EvChange, EvClick, EvContextMenu, EvDblClick, EvSelectionChange, componentFromDOM } from '../../core/component';
 import { GridColumn } from '../gridview/gridview'
 
 import { class_ns, isNumber, isString, UnsafeHtml } from '../../core/core_tools';
@@ -55,9 +55,6 @@ function mkid(row: number, col: number) {
  * 
  */
 
-export interface EvChange extends CoreEvent {
-}
-
 export interface StoreEvents extends EventMap {
 	changed: EvChange;
 }
@@ -157,7 +154,7 @@ export class Store extends CoreElement<StoreEvents> {
 
 	private _changed() {
 		if (!this._lock) {
-			this.fire("changed", {});
+			this.fire("changed", {value:null});
 			this._change = false;
 		}
 		else {

package/src/components/textarea/textarea.ts

@@ -80,8 +80,7 @@ class SimpleTextArea extends Component<TextAreaProps> {
 				isValid: ( ) => { return true; }
 			};
 
-			//@ts-ignore
-			return i as T;
+			return i as unknown as T;
 		}
 		
 		return super.queryInterface( name );
@@ -124,8 +123,7 @@ export class TextArea extends VBox {
 				isValid: ( ) => { return true; }
 			};
 
-			//@ts-ignore
-			return i as T;
+			return i as unknown as T;
 		}
 		
 		return super.queryInterface( name );

package/src/components/treeview/treeview.ts

@@ -287,7 +287,7 @@ export class Treeview extends Component<TreeviewProps,TreeviewEvents> {
 			}
 
 			default:
-				console.log( ev.key );
+				//console.log( "unhandled key:", ev.key );
 				return;
 		}
 

package/src/core/component.ts

@@ -16,7 +16,7 @@
 
 import { isArray, UnsafeHtml, isNumber, Rect, Constructor, class_ns, x4_class_ns_sym, IRect } from './core_tools';
 import { CoreElement } from './core_element';
-import { ariaValues, unitless } from './core_styles';
+import { AriaAttributes, unitless } from './core_styles';
 import { CoreEvent, EventMap } from './core_events';
 import { addEvent, DOMEventHandler, GlobalDOMEvents } from './core_dom';
 import { Application, EvMessage } from './core_application';
@@ -666,8 +666,8 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
      * @returns The component instance for chaining.
      */
 	
-	setAria( name: keyof ariaValues, value: string | number | boolean ): this {
-		this.setAttribute( name, value );
+	setAria( name: keyof AriaAttributes, value: string | number | boolean ): this {
+		this.setAttribute( name as string, value );
 		return this;
 	}
 

package/src/core/core_data.ts

@@ -517,16 +517,24 @@ export class DataProxy extends CoreElement<DataEventMap> {
 			url += '?' + this.m_props.params.join( '&' );
 		}
 
-		const r = await fetch( url );
-		if( r.ok ) {
-			const raw = await r.json( );
-			
-			let json = raw;
-			if( this.m_props.solver ) {
-				json = this.m_props.solver( json );
-			}
+		try {
+			const r = await fetch( url );
+			if( r.ok ) {
+				const raw = await r.json( );
+				
+				let json = raw;
+				if( this.m_props.solver ) {
+					json = this.m_props.solver( json );
+				}
 
-			this.fire( 'change', {value:json,context:raw} );
+				this.fire( 'change', {value:json,context:raw} );
+			}
+			else {
+				console.error( r.statusText );
+			}
+		}
+		catch( e ) {
+			console.error( e );
 		}
 	}
 }

package/src/core/core_dom.ts

@@ -116,7 +116,7 @@ export function dispatchEvent(ev: Event) {
 					callback( ev );
 				}
 
-				if (ev.stopPropagation || ev.defaultPrevented || noup) {
+				if ( ev.defaultPrevented || noup) {
 					break;
 				}
 			}

package/src/core/core_dragdrop.ts

@@ -98,12 +98,12 @@ class DragManager {
 
 		const dragEnter = (ev: DragEvent) => {
 			if( filterCB && !filterCB(this.dragSource,ev.dataTransfer) ) {
-				console.log( 'reject ', el );
+				//console.log( 'reject ', el );
 				ev.dataTransfer.dropEffect = 'none';	
 				return;
 			}
 
-			console.log( 'accepted ', el );
+			//console.log( 'accepted ', el );
 			ev.preventDefault();
 			ev.dataTransfer.dropEffect = 'copy';
 		};
@@ -112,7 +112,7 @@ class DragManager {
 			//console.log( "dragover", ev.target );
 			
 			if( filterCB && !filterCB(this.dragSource,ev.dataTransfer) ) {
-				console.log( 'reject ', el );
+				//console.log( 'reject ', el );
 				ev.dataTransfer.dropEffect = 'none';	
 				return;
 			}

package/src/core/core_state.ts

@@ -8,6 +8,10 @@
 type StateData = boolean | number | string | Date | any;
 type State = Record<string,StateData>;
 
+/**
+ * @experimental
+ */
+
 export class StateManager {
 	
 	private _state: StateData;

package/src/core/core_styles.ts

@@ -67,9 +67,54 @@ export const unitless: Record<string,1> = {
 	strokeWidth: 1
 }
 
-export type ariaValues = {
-	"aria-activedescendant": 1,
-	"role": 1,
+export type AriaAttributes = {
+	"role":                   1;
+	"aria-label":             1;
+	"aria-labelledby":        1;
+	"aria-describedby":       1;
+	"aria-details":           1;
+	"aria-roledescription":   1;
+	"aria-keyshortcuts":      1;
+	"aria-placeholder":       1;
+	"aria-activedescendant":  1;
+	"aria-controls":          1;
+	"aria-owns":              1;
+	"aria-flowto":            1;
+	"aria-errormessage":      1;
+	"aria-hidden":            1;
+	"aria-disabled":          1;
+	"aria-busy":              1;
+	"aria-modal":             1;
+	"aria-required":          1;
+	"aria-readonly":          1;
+	"aria-checked":           1;
+	"aria-pressed":           1;
+	"aria-selected":          1;
+	"aria-expanded":          1;
+	"aria-invalid":           1;
+	"aria-current":           1;
+	"aria-haspopup":          1;
+	"aria-multiselectable":   1;
+	"aria-multiline":         1;
+	"aria-atomic":            1;
+	"aria-live":              1;
+	"aria-relevant":          1;
+	"aria-orientation":       1;
+	"aria-sort":              1;
+	"aria-valuemin":          1;
+	"aria-valuemax":          1;
+	"aria-valuenow":          1;
+	"aria-valuetext":         1;
+	"aria-level":             1;
+	"aria-setsize":           1;
+	"aria-posinset":          1;
+	"aria-rowcount":          1;
+	"aria-colcount":          1;
+	"aria-rowindex":          1;
+	"aria-colindex":          1;
+	"aria-rowspan":           1;
+	"aria-colspan":           1;
+	"aria-autocomplete":      1;
 }
 
 export function isUnitLess( name: string ) {

package/src/core/core_svg.ts

@@ -17,7 +17,7 @@
 import { Component, ComponentProps } from './component';
 import { isUnitLess } from "./core_styles";
 import { DOMEventHandler, GlobalDOMEvents, addEvent } from './core_dom';
-import { isNumber, isString } from './core_tools';
+import { isNumber, isString, sanitizeHtml } from './core_tools';
 
 const SVG_NS = "http://www.w3.org/2000/svg"; 
 
@@ -526,7 +526,7 @@ export class SvgText extends SvgItem {
 		this.setAttr( 'x', num(x)+'' );
 		this.setAttr( 'y', num(y)+'' );
 
-		this._dom.innerHTML = txt;
+		this._dom.innerHTML = sanitizeHtml( txt );
 	}
 
 	/**

package/src/core/core_tools.ts

@@ -212,16 +212,6 @@ export class Rect implements IRect {
 	}
 }
 
-/**
- * generic size
- */
-
-export interface Size {
-	w: number;
-	h: number;
-}
-
-
 /**
  * generic Point 
  * TODO: name it IPoint
@@ -994,3 +984,38 @@ export enum kbNav {
 	right,
 }
 
+
+const _escapes: Record<string, string> = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+
+const _rx_escape = /[&<>"']/g;
+
+/**
+ * Sanitizes a user-provided string against XSS injection.
+ * Escapes HTML special characters so the string is safe to display as text content.
+ */
+
+export function sanitizeHtml( input: string ): string {
+	if( !_rx_escape.test( input ) ) {
+		return input;
+	}
+
+	_rx_escape.lastIndex = 0;
+    return input.replace( _rx_escape, ch => _escapes[ch] ) 
+}
+
+
+/**
+ * Returns a safe string from user content: UnsafeHtml passes through untouched
+ * plain strings are escaped.
+ */
+
+export function safeText( v: string | UnsafeHtml ): string {
+	if( !v ) { return ""; }
+    return v instanceof UnsafeHtml ? v.toString() : sanitizeHtml( v );
+}