x4js 2.2.52 → 2.2.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.52",
+  "version": "2.2.54",
   "type": "module",
   "main": "src/x4.ts",
   "module": "src/x4.ts",

package/src/components/base.scss

@@ -24,6 +24,10 @@
 	@extend %flex;
 }
 
+.x4stretch {
+	align-self: stretch;
+}
+
 .x4fit-h {
 	width: stretch;
 }

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

@@ -20,6 +20,7 @@
 	min-width: 0;
 	min-height: 0;
 	flex-shrink: 0;
+	align-self: stretch;
 }
 
 .x4hbox {

package/src/components/boxes/boxes.ts

@@ -26,19 +26,48 @@ export interface BoxProps extends ComponentProps {
 }
 
 /**
- * A generic container component for grouping and laying out child components.
- * The CSS class for this component is automatically generated as `x4box`.
+* A generic container component for grouping and laying out child components.
+ *
+ * The `refs` object is a typed directory of the children you need to reach
+ * again later. Assign a child to `refs` as you build the content: the
+ * assignment expression evaluates to the component itself, so it can be
+ * inlined directly in the content array.
+ * 
+ * @example
+ * using refs: in your code, you can type
+ * 
+ * class MyBox extends Box {
+ *   declare refs: {
+ *   	a: Combobox;
+ *      b: Input;
+ *   }
+ * 
+ *   constructor( props ) {
+ *      super( props );
+ *      
+ *      this.setContent( [
+ *          this.refs.a = new ComboBox( { ... } );
+ *          this.refs.b = new Input( { ... } );
+ *      ])
+ * 
+ * 	 onSomeEvent() {
+ *     this.refs.a.getValue();
+ *   }
+ * }
+ * 
+ * 
+ * 
  */
 
 @class_ns( "x4" )
 export class Box<P extends BoxProps=BoxProps,E extends ComponentEvents=ComponentEvents> extends Component<P,E> {
+	protected refs: Record<string,Component> = {};
 }
 
 
 /**
  * A horizontal box layout component.
  * Arranges child components in a horizontal line.
- * The CSS class for this component is automatically generated as `x4hbox`.
  */
 
 @class_ns( "x4" )

package/src/components/combobox/combobox.module.scss

@@ -28,7 +28,7 @@
 	--combobox-btn-color-hover: var( --text-primary );
 
 	--combo-tree-indent: 1em;
-}
+	}
 
 .x4dropdownlist {
 	@extend %shadow-xl;
@@ -36,7 +36,7 @@
 
 	max-height: 250px;
 	max-width: 50vw;
-	
+
 	position: absolute;
 	background-color: var( --dropdown-background );
 	border: 1px solid var( --dropdown-border );
@@ -51,7 +51,7 @@
 
 		.x4item {
 			white-space: nowrap;
-			
+
 			&.level-1 { padding-left: calc(var(--combo-tree-indent) * 1 ); }
 			&.level-2 { padding-left: calc(var(--combo-tree-indent) * 2 ); }
 			&.level-3 { padding-left: calc(var(--combo-tree-indent) * 3 ); }
@@ -60,47 +60,48 @@
 			&.level-6 { padding-left: calc(var(--combo-tree-indent) * 6 ); }
 			&.level-7 { padding-left: calc(var(--combo-tree-indent) * 7 ); }
 			&.level-8 { padding-left: calc(var(--combo-tree-indent) * 8 ); }
+			}
 		}
-	}
-}
-
+		}
+		
 .x4combobox {
 	@extend %hbox;
 	margin: 5px;
 	gap: 6px;
 
 	&> #label {
-		
+
 		&> .x4label {
 			padding: 0 6px 0 0;
 			border-bottom: 1px solid transparent;
-
+	
 			height: 100%;
 			font-weight: 500;
 			gap: 0px;
-					
+		
 			#text:not(.empty) {
 				&::after {
 					content: ":"
-				}
+	}
+			}
 			}
 		}
-	}
 
 	&>#edit {
 		@extend %flex;
 		border-bottom: 1px solid var( --combobox-border );
+
 		&:focus-within {
 			border-bottom-color: var( --combobox-border-focus );
 		}
-		
+
 		.x4input {
 			@extend %flex;
-
-			&[readonly] {
-				cursor: pointer;
-			}
-		}
+			cursor: pointer;
+//			&[readonly] {
+//				cursor: pointer;
+//			}
+	}
 
 		.x4button {
 			margin: 0;
@@ -111,36 +112,39 @@
 
 			#icon {
 				color: var( --combobox-btn-color );
-			}
+		}
 
 			&:hover, &:hover #icon {
 				color: var( --combobox-btn-color-hover );
-			}
+		}
 
 			//&:focus {
 				//background-color: var( --color-30 );
 				//color: var( --color-10 );
 			//}
 		}
-	}
+		}
+
+	&[disabled],
+	&.readonly {
+		--label-color: var( --disabled-color-dark );
+		--input-color: var( --disabled-color-dark );
 
-	&[disabled] {
 		&, * {
 			cursor: not-allowed;
-		}
+	}
 
 		#label .x4label {
-			color: var( --disabled-color-dark );
 			pointer-events: none;
-		}
 	}
-	
+	}
+
 	&[required] {
 		& > #label > .x4label::before {
 			content: "*";
 			font-weight: bold;
 			color: var( --textedit-required );
 			margin-right: 2px;
-		}
 	}
+}
 }

package/src/components/combobox/combobox.ts

@@ -15,7 +15,7 @@
  **/
 
 import { Component, ComponentEvents, ComponentProps, EvClick, EvSelectionChange, makeUniqueComponentId } from '../../core/component';
-import { class_ns, IComponentInterface, IFormElement, kbNav, safeText, sanitizeHtml, UnsafeHtml } from '../../core/core_tools';
+import { class_ns, IComponentInterface, IFormElement, kbNav } from '../../core/core_tools';
 import { EventCallback } from '../../core/core_events';
 
 import { Listbox, ListboxID, ListItem } from '../listbox/listbox';
@@ -46,7 +46,7 @@ export class DropdownList extends Popup<DropdownProps,DropdownEvents> {
 
 	private _list: Listbox;
 
-	constructor( props: DropdownProps, content?: ListItem[] ) {
+	constructor( props: DropdownProps ) {
 		super( props );
 
 		this._list = new Listbox( { items: props.items } );
@@ -147,7 +147,7 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 				list.select( sel, false );
 			}
 
-			this._input.setValue( safeText(itm.text) );
+			this._input.setValue( itm.text as string );
 			
 			if( !this._prevent_close ) {
 				this._popup.show( false );
@@ -248,7 +248,9 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 	}
 
 	setItems( items: ListItem[] ) {
-		this._getList().setItems( items );		
+		const list = this._getList( );
+		list.setItems( items );
+		this.setValue( "" ); 
 	}
 
 	getValue( ) {
@@ -260,7 +262,12 @@ export class Combobox extends Component<ComboboxProps,ComboboxEvents> {
 	}
 
 	selectItem( index: ListboxID ) {
-		this._getList( ).select( index );
+		const list = this._getList( );
+		list.select( index );
+		const el = list.getItem( index );
+		if( el ) {
+			this.setValue( el.text as string );
+		}
 	}
 
 	getSelection( ) {

package/src/components/dialog/dialog.module.scss

@@ -29,6 +29,7 @@
 	background-color: white;
 	border: 1px solid var( --border-dark );
 	max-width: 99vw;
+	outline: none;
 	
 	&> .caption {
 		padding: 8px;

package/src/components/header/header.ts

@@ -7,7 +7,7 @@ import { CSizer } from '../sizers/sizer';
 import "./header.module.scss"
 
 interface HeaderItem {
-	name: string;
+	name?: string;	// default to ref-cx
 	title: string;
 	iconId?: string;
 	width?: number;	// <0 for flex
@@ -15,7 +15,7 @@ interface HeaderItem {
 
 interface HeaderProps extends Omit<ComponentProps,"content"> {
 	items: HeaderItem[]
-	target?: Component;	// target element to set header col variable width var( --hdr-item-{name}-width )
+	target?: Component;	// target element to set header col variable width var( --{name}-width ) parent element if not set
 }
 
 /**
@@ -38,7 +38,12 @@ export class Header extends HBox<HeaderProps> {
 	constructor( props: HeaderProps ) {
 		super( props );
 
-		this._els = props.items?.map( x => {
+		this._els = props.items?.map( (x,index) => {
+
+			if( !x.name ) {
+				x.name = `ref-c${index+1}`;
+			}
+
 			const cell = new Label( { cls: "cell", text: x.title, icon: x.iconId } );
 			const sizer = new CSizer( "right" );
 			
@@ -126,7 +131,13 @@ export class Header extends HBox<HeaderProps> {
 			c.setWidth( width );
 
 			const item = c.getInternalData<HeaderItem>( 'data' );
+
+			if( !this.props.target ) {
+				this.parentElement().setStyleVariable( `--${item.name}-width`, width + "px");
+			}
+			else {
 			this.props.target?.setStyleVariable( `--${item.name}-width`, width + "px");
+			}
 			
 			fullw += width;
 		} );

package/src/components/input/input.module.scss

@@ -23,6 +23,7 @@
 	--input-placeholder: var( --disabled-background );
 	--input-error: var( --alert-background );
 
+	--input-color-disabled: var( --disabled-color-dark );
 	--input-checkbox-color: var( --accent-background );
 }
 
@@ -68,8 +69,10 @@ input.x4input {
 		font-weight: bold;
 	}
 
-	&:disabled {
+	&:disabled,
+	&[disabled] {
 		background-color: transparent;
+		color: var( --input-color-disabled );
 	}
 
 	&:invalid {

package/src/components/label/label.module.scss

@@ -53,6 +53,16 @@
 		&:empty {
 			display: none;
 		}
+
+		code {
+			padding: 0.2em 0.4em;
+			margin: 0;
+			font-size: 95%;
+			white-space: break-spaces;
+			background-color: var(--background-ternary);
+			border-radius: 6px;
+			border: 1px solid var(--border);
+		}
 	}
 	
 	#icon {
@@ -81,6 +91,16 @@
 	text-align: left;
 	&.al-center { text-align: center; }
 	&.al-right { text-align: right; }
+
+	code {
+		padding: 0.2em 0.4em;
+		margin: 0;
+		font-size: 95%;
+		white-space: break-spaces;
+		background-color: var(--background-ternary);
+		border-radius: 6px;
+		border: 1px solid var(--border);
+	}
 }
 
 [disabled] .x4label,

package/src/components/listbox/listbox.ts

@@ -94,16 +94,11 @@ export interface ListboxProps extends Omit<ComponentProps,'content'> {
 @class_ns( "x4" )
 export class Listbox extends Component<ListboxProps,ListboxEvents> {
 
-	private _view: Viewport;
-	//private _selection: ListboxID;
-	//private _selitem: Component;
-	
+private _view: Viewport;
 	private _lastsel: ListboxID;
-	
 	private _multisel: Set<ListboxID>;
 	private _items: ListItem[];
-
-	preventFocus = false;
+	//<?? preventFocus = false;
 
 	constructor( props: ListboxProps ) {
 		super( { ...props } );
@@ -629,6 +624,11 @@ export class Listbox extends Component<ListboxProps,ListboxEvents> {
 		return Array.from( this._multisel );
 	}
 
+	getFirstSel( ) : ListItem {
+		const [first] = this.getSelection( );
+		return first ? this.getItem( first ) : null;
+	}
+
 	ensureSelectionVisible( ) {
 		const sels = Array.from( this._multisel.values() );
 		if( sels.length) {

package/src/components/panel/panel.module.scss

@@ -40,6 +40,8 @@
 	}
 
 	& > .body {
+		flex-grow: 1;
+
 		position: relative;
 		left: 0;
 		top: 0;

package/src/components/select/select.module.scss

@@ -12,6 +12,17 @@
 	background-color: white;
 }
 
+.x4select {
+	appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 6px center;
+    background-size: 12px 8px;
+    padding-right: 23px;
+}
+
 //-- global saddly
 option {
 	padding: 5px;

package/src/components/sizers/sizer.ts

@@ -112,6 +112,7 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 
 		let nr: any = {};
 		let horz = true;
+		let size = 0;
 
 		//const center = this._ref.hasClass("center");
 		//if( center ) {
@@ -124,38 +125,69 @@ export class CSizer extends Component<ComponentProps,CSizerEvent> {
 
 		if( this._type.includes("top") ) {
 			nr.top = pt.y,
-			nr.height = (rc.top+rc.height)-pt.y;
+			size = nr.height = (rc.top+rc.height)-pt.y;
 			horz = false;
 		}
 		
 		if( this._type=="vsize-next" ) {
-			nr.height = (rc.top+rc.height)-pt.y;
+			size = nr.height = (rc.top+rc.height)-pt.y;
 			horz = false;
 		}
 		
 		if( this._type.includes("bottom") || this._type=='vsize-prev' ) {
-			nr.height = (pt.y-rc.top);
+			size = nr.height = (pt.y-rc.top);
 			horz = false;
 		}
 		
 		if( this._type.includes("left") ) {
 			nr.left = pt.x;
-			nr.width = ((rc.left+rc.width)-pt.x);
+			size = nr.width = ((rc.left+rc.width)-pt.x);
 		}
 		
 		if( this._type=="hsize-next" ) {
-			nr.width = ((rc.left+rc.width)-pt.x);
+			size = nr.width = ((rc.left+rc.width)-pt.x);
 		}
 		
 		if( this._type.includes("right") || this._type=='hsize-prev' ) {
-			nr.width = (pt.x-rc.left);
+			size = nr.width = (pt.x-rc.left);
 		}
 
+		const isFlex = ( c : Component ) => {
+			if( !c ) {
+				return false;
+			}
+
+			if( c.hasClass( "x4flex" ) ) {
+				return true;
+			}
+
+			return c.getStyleValue( "flexGrow" )!==undefined;
+		}
+
+		if( this._type.includes("-prev") ) {
+			if(  isFlex(this.prevElement() ) ) {
+				this._ref.setStyleValue( "flex", `0 0 ${size}px` );	
+			}
+			else {
+				this._ref.setStyle( nr );
+			}
+		}
+		else if( this._type.includes("-next") ) {
+			if(  isFlex(this.nextElement() ) ) {
+				this._ref.setStyleValue( "flex", `0 0 ${size}px` );	
+			}
+			else {
+				this._ref.setStyle( nr );
+			}
+
+			return;
+		}
+		else {
 		this._ref.setStyle( nr );
-		//this._ref.setStyleValue( "flexGrow", 0 );
+		}
 
 		const nrc = this._ref.getBoundingRect( );
-		this.fire( "resize", { size: horz ? nrc.width : nrc.height, width: nrc.width, height: nrc.height })
+		this.fire( "resize", { size, width: nrc.width, height: nrc.height })
 
 		e.preventDefault( );
 		e.stopPropagation( );

package/src/components/textedit/textedit.module.scss

@@ -25,7 +25,7 @@
 	--textedit-btn-color: var( --text-secondary );
 	--textedit-btn-color-hover: var( --text-primary );
 
-	--textedit-color-disabled: var( --disabled-background );
+	--textedit-color-disabled: var( --disabled-color-dark );
 }
 
 .x4textedit {
@@ -103,8 +103,8 @@
 		}
 		
 		#label > .x4label #text,
-		#label > .x4label::before,
 		#label::after  {
+			--label-color: var( --textedit-color-disabled );
 			color: var( --textedit-color-disabled );
 		}
 

package/src/core/component.ts

@@ -109,6 +109,7 @@ export interface ComponentProps {
 	hidden?: boolean,
 	/** Enables flex layout (boolean) or sets flex-grow (number). */
 	flex?: boolean | number;
+	stretch?: boolean;
 	/** Tooltip text. */
 	tooltip?: string;
 	/** Existing DOM element to wrap. */
@@ -202,6 +203,10 @@ export class Component<P extends ComponentProps = ComponentProps, E extends Comp
 					});
 				}
 			}
+
+			if( props.stretch ) {
+				this.addClass( "x4stretch" );
+			}
 			
 			if( props.id!==undefined ) {
 				this.setAttribute( "id", props.id );