x4js 2.2.63 → 2.2.65

package/package.json

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

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

@@ -100,6 +100,11 @@
 		}
 	}
 
+    &.with-menu> #label::after {
+        content: '\25be';
+        margin-left: 2px;
+    }
+    
 	&:focus {
 		background-color: var( --button-background-focus );
 		color: var( --button-color-focus );

package/src/components/button/button.ts

@@ -136,6 +136,10 @@ export class Button extends Component<ButtonProps,ButtonEvents> {
 		if( props.tabindex!==false ) {
 			this.setAttribute( 'tabindex', props.tabindex );
 		}
+
+        if( props.menu ) {
+            this.addClass( "with-menu" );
+        }
 	}
 
 	/**

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

@@ -70,11 +70,13 @@
 
 		&> .x4button {
 			min-width: 80px;
+            #label {
+                white-space: nowrap;
+            }
 			
 			.x-simple-label {
 				text-align: center;
 			}
-
 		}
 	}
 }

package/src/components/form/form.module.scss

@@ -21,18 +21,18 @@
 }
 
 .x4form {
-	@extend %vbox;
+    @extend %vbox;
 	@extend %flex;
-
-	padding: 16px;
+    
+    padding: 16px;
 	background-color: var( --color-form );
+	
+    &.horizontal {
+        flex-direction: row;
+    }
 
 	&.no-flex {
 		flex-grow: 0;
 	}
-
-	&>.xcontainer {
-
-	}
 }
 

package/src/components/gridview/gridview.module.scss

@@ -304,6 +304,15 @@
 		}
 	}
 
+    .gadget-footer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: 0;
+        border-top: 1px solid var(--border);
+    }
+
 	.row-header {
 		position: absolute;
 		left: 0;

package/src/components/gridview/gridview.ts

@@ -74,7 +74,7 @@ export interface GridviewEvents extends ComponentEvents {
 }
 
 export interface GridviewProps extends ComponentProps {
-	footer?: boolean;
+	footer?: boolean | Component;
 	store: DataStore;
 	columns: GridColumn[];
 	emptyMsg?: string;
@@ -180,7 +180,11 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		this._vis_rows = new Map();
 		this._selection = new Set();
 		this._has_fixed = false;
-		this._has_footer = props.footer;
+		this._has_footer = props.footer===true;
+
+        if( props.footer instanceof Component ) {
+            props.footer.addClass( "gadget-footer packed" );
+        }
 
 		this._columns = props.columns.map(x => x);
 
@@ -559,41 +563,45 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 	 * 
 	 */
 
-	private _buildColFooter(fixed: boolean) {
-		// row header
-		const els: Component[] = [];
-
-		const count = this._getColCount();
-		for (let col = 0; col < count; col++) {
-			const cdata = this._getCol(col);
-			if ((!!cdata.fixed) != fixed) {
-				continue;
-			}
-
-			const cell = new Component({
-				cls: `cell`,
-				attrs: { "data-col": col },
-				style: { width: cdata.width ? cdata.width + "px" : undefined },
-				content: [
-					new SimpleText({ text: cdata.footer_val }),
-				]
-			});
-
-			cell.addDOMEvent("dblclick", () => {
-				this._sortCol(col);
-			});
-
-			els.push(cell);
-		}
-
-		if (fixed && els.length == 0) {
-			return null;
-		}
-
-		const header = new Box({ cls: "col-footer", content: els });
-		header.setClass("fixed", fixed);
-
-		return header;
+	private _buildColFooter(fixed: boolean): Box {
+
+        if( !this.props.footer ) {
+            return null;
+        }
+
+        // row footer
+        const els: Component[] = [];
+
+        const count = this._getColCount();
+        for (let col = 0; col < count; col++) {
+            const cdata = this._getCol(col);
+            if ((!!cdata.fixed) != fixed) {
+                continue;
+            }
+
+            const cell = new Component({
+                cls: `cell`,
+                attrs: { "data-col": col },
+                style: { width: cdata.width ? cdata.width + "px" : undefined },
+                content: [
+                    new SimpleText({ text: cdata.footer_val }),
+                ]
+            });
+
+            cell.addDOMEvent("dblclick", () => {
+                this._sortCol(col);
+            });
+
+            els.push(cell);
+        }
+
+        if (fixed && els.length == 0) {
+            return null;
+        }
+
+        const footer = new Box({ cls: "col-footer", content: els });
+        footer.setClass("fixed", fixed);
+        return footer;
 	}
 
 	/**
@@ -790,9 +798,8 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 			const extra: string[] = []
 			const content = this._renderCell(rec, cdata, extra );
 
-			let align = "start";
+			let align: string;
 			switch (cdata.align) {
-				default: align = "start"; break;
 				case "center": align = "center"; break;
 				case "right": align = "end"; break;
 			}
@@ -1128,12 +1135,16 @@ export class Gridview<P extends GridviewProps = GridviewProps, E extends Gridvie
 		this._hheader = this._buildColHeader(false);
 		this._vheader = new Box({ cls: "row-header" })
 
-		if (this._has_footer) {
+        let rfooter: Component = null;
+		if (this._has_footer===true ) {
 			this._ffooter = this._buildColFooter(true);
 			this._footer = this._buildColFooter(false);
 		}
+        else if( this.props.footer ) {
+            rfooter = this.props.footer as Component
+        }
 
-		this.setContent([this._viewport, this._fheader, this._hheader, this._ffooter, this._footer, this._vheader]);
+		this.setContent([this._viewport, this._fheader, this._hheader, this._ffooter, this._footer, rfooter, this._vheader]);
 
 		// compute misc variables
 		{

package/src/components/popup/popup.ts

@@ -431,8 +431,11 @@ class CMover {
 		this.self = ref ? true : false;
 
 		const mouseDown = ( e: PointerEvent ) => {
-			if( this.self && e.target && (e.target as HTMLElement).tagName!=="DIV" ) {
-				return;
+			if( this.self && e.target ) {
+                const clickable = (e.target as HTMLElement).closest('button, input, a, [role="button"]');
+                if( clickable ) {
+				    return;
+                }
 			}
 
 			x.setCapture( e.pointerId );

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

@@ -43,48 +43,66 @@
 	.group {
 		padding: 6px 4px 4px 4px;
 		min-height: 2em;
-		font-weight: bold;
-		background-color: white;
-		color: var(--color-primary-a50);
-
-		.x4box > .desc {
-			font-style: italic;
-			font-weight: normal;
-			font-size: 90%;
-			color: var( --text-ternary );
-		}
-
-		&:not(:first-child ) {
-			border-top: 1px solid var(--color-primary-a50);
-		}
-
-		&:not( :last-child ) {
-			border-bottom: 1px solid var(--color-primary-a50);
-			//box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
-		}
-		
-		display: flex;
+		background-color: var( --background-secondary );
+		margin-bottom: 8px;
+        box-shadow: 4px 3px 8px rgba(0, 0, 0, 0.4);
+        color: var(--color-primary-a50);
+        display: flex;
 		align-items: center;
-		padding-left: 8px;
+		padding: 8px;
 		gap: 8px;
 
-		&>.x4box {
-			flex-grow: 1;
-		}
+        &.sticky {
+            position: sticky;
+            top: 0;
+            z-index: 1;
+        }
+		
+        .hdr {
+            &>.gadgets {
+                gap: 8px;
+                &> .x4 {
+                    margin: 0;
+                    padding: 0;
+                }
+            }
 
-		&>.x4icon {
-			.fa-secondary,
-			.fa-primary {
-				fill: var( --color-primary-a50 );
-			}
+            .title {
+                font-weight: bold;
+            }
+            
+            &>.x4button {
+                background-color: transparent;
+                color: var(--color-primary-a50);
+            }
+         
+            &>.x4label {
+                .x4icon {
+                    .fa-secondary,
+                    .fa-primary {
+                        fill: var( --color-primary-a50 );
+                    }
+
+                    width: 1em;
+                    height: 1em;
+                }
+            }
+        }
 
-			width: 1em;
-			height: 1em;
+        &>.desc {
+            font-style: italic;
+            font-weight: normal;
+            font-size: 90%;
+            color: var( --text-ternary );
+        }
+
+		&:not(:first-child ) {
+			//border-top: 1px solid var(--color-primary-a50);
 		}
 
-		&>.x4button {
-			background-color: transparent;
-			color: var(--color-primary-a50);
+		&:not( :last-child ) {
+			border-bottom: 1px solid var(--color-primary-a50);
+			//box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
 		}
 	}
 

package/src/components/propgrid/propgrid.ts

@@ -50,10 +50,12 @@ export interface PropertyValue {
 export interface PropertyGroup {
 	title: string;
 	desc?: string;
+    name?: string;
 	icon?: string;
 	cls?: string;
 	collapsible?: boolean | number;  // -1 for collapsible+collapsed
 	items: PropertyValue[];
+    gadgets?: Component[];
 }
 
 export interface PropertyProps extends ComponentProps {
@@ -118,6 +120,9 @@ export class PropertyGrid extends VBox {
 				if( i ) {
 					const row = this.makePropertyRow(i);
 					row.addClass( idx&1 ? "even" : "odd" );
+                    if( g.name ) {
+                        row.setData( "group", g.name );
+                    }
 					
 					items.push( row );
 				}
@@ -163,13 +168,16 @@ export class PropertyGrid extends VBox {
 
 		const tr = new HBox({
 			cls,
+            flex: 1,
 			content: [
-				g.icon ? new Icon({ id: "icon", iconId: g.icon }) : null,
-				new VBox( { content: [
-					new SimpleText({ cls: "title", text: g.title }),
-					g.desc ? new SimpleText({ cls: "desc", text: g.desc }) : null,
-				]}),
-				g.collapsible? new Button({ icon: icons.updown, click: (e) => toggle(tr) }) : null,
+                new VBox( { flex: 1, content: [
+                    new HBox( { cls: 'hdr', content: [
+                        new Label({ flex:1, cls: "title", text: g.title, icon: g.icon }),
+                        g.gadgets ? new HBox( { cls: 'gadgets', content: g.gadgets } ) : null,
+				        g.collapsible? new Button({ icon: icons.updown, click: (e) => toggle(tr) }) : null,
+                    ]}),
+                    g.desc ? new SimpleText({ cls: "desc", text: g.desc }) : null,
+                ]}),    
 			]
 		});
 
@@ -352,5 +360,10 @@ export class PropertyGrid extends VBox {
 			this.setPropValue( p, props[p] );
 		}
 	}
+
+    enableGroup( group_name: string, ena = true ) {
+        const els = this.queryAll( `.row[data-group="${group_name}"]` );
+        els.forEach( x => x.enable( ena ) );
+    }
 }
 

package/src/components/tag/tag.module.scss

@@ -44,6 +44,8 @@
 
 	&> .x4simpletext {
 		padding: 0;
+        white-space: nowrap;
+        text-overflow: ellipsis;
 	}
 
 	&.alert {

package/src/components/viewport/viewport.ts

@@ -18,6 +18,7 @@ import { class_ns } from '../../core/core_tools';
 import { Component, ComponentProps } from "../../core/component"
 
 import "./viewport.module.scss"
+import { Box, BoxProps } from '../components';
 
 /**
  * 
@@ -35,8 +36,8 @@ export class Viewport extends Component {
  */
 
 @class_ns( "x4" )
-export class ScrollView extends Component {
-	constructor( props: ComponentProps ) {
+export class ScrollView extends Box {
+	constructor( props: BoxProps ) {
 		super( props );
 		this.setContent( new Viewport( {} ) );
 	}

package/src/core/component.ts

@@ -45,13 +45,12 @@ const RE_NUMBER = /^-?\d+(\.\d*)?$/;
 
 function genClassNames( x: any ): string[] {
 	
-	const classes = [];
 	let self = Object.getPrototypeOf(x);
-
 	if( self.constructor==Component ) {
-		return ["x4-comp"];
+		return ["x4-comp","x4"];
 	}
 
+    const classes = [];
 	while (self && self.constructor !== Component ) {
 		const clsname:string = self.constructor.name;
 		const clsns: string = Object.prototype.hasOwnProperty.call(self.constructor,x4_class_ns_sym) ? self.constructor[x4_class_ns_sym] :  "";
@@ -59,6 +58,7 @@ function genClassNames( x: any ): string[] {
 		self = Object.getPrototypeOf(self);
 	}
 
+    classes.push( "x4" );
 	return classes;
 }
 

package/src/core/core_tools.ts

@@ -113,6 +113,14 @@ export function unsafeHtml(x: string): UnsafeHtml {
 	return new UnsafeHtml(x);
 }
 
+/**
+ * you can use it recursively
+ * const value = "hello";
+ * const t = unsafe`<b>${ value }</b>`; // direct text
+ * const result = unsafe`<i> ${ t } ${ [t,t,t] } </i>`
+ * const result2 = unsafe`<i> ${ [t,t,t,"world"] } </i>`    // also mixes / array
+ */
+
 export function unsafe(strings: TemplateStringsArray, ...values: any[]): UnsafeHtml {
 
     const resolve = ( value: any ) : string | UnsafeHtml => {