x4js 2.2.63 → 2.2.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x4js",
-  "version": "2.2.63",
+  "version": "2.2.64",
   "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/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/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/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 => {