x4js 1.4.11 → 1.4.14

package/lib/gridview.js

@@ -60,7 +60,7 @@ class ColHeader extends component_1.Component {
             }),
             new icon_js_1.Icon({
                 ref: 'sorter',
-                cls: '@hidden',
+                cls: '@hidden sort',
                 icon: 'var( --x4-icon-arrow-down )'
             })
         ]);
@@ -289,6 +289,7 @@ class GridView extends layout_1.VLayout {
             },
             content: this.m_container
         });
+        let flex = false;
         let cols = this.m_columns.map((col, index) => {
             let cls = '@cell';
             if (col.cls) {
@@ -325,9 +326,16 @@ class GridView extends layout_1.VLayout {
                 sens: 'right',
                 events: { resize: (e) => resizeCol(e) }
             });
-            col.$col = comp;
+            if (col.flex) {
+                flex = true;
+            }
+            col.$hdr = comp;
             return comp;
         });
+        cols.push(new component_1.Flex({
+            ref: 'flex',
+            cls: flex ? '@hidden' : ''
+        }));
         // compute full width
         let full_width = 0;
         this.m_columns.forEach((col) => {
@@ -357,8 +365,13 @@ class GridView extends layout_1.VLayout {
                         width: col.width
                     }
                 });
+                col.$ftr = comp;
                 return comp;
             });
+            foots.push(new component_1.Flex({
+                ref: 'flex',
+                cls: flex ? '@hidden' : ''
+            }));
             this.m_footer = new layout_1.HLayout({
                 cls: '@footer',
                 content: foots,
@@ -378,8 +391,33 @@ class GridView extends layout_1.VLayout {
         ]);
     }
     _on_col_resize(col, width) {
-        this.m_columns[col].width = width;
-        this.m_columns[col].flex = undefined;
+        const _col = this.m_columns[col];
+        let updateFlex = false;
+        if (width >= 0) {
+            _col.width = width;
+            if (_col.flex) {
+                _col.$hdr.removeClass('@flex');
+                _col.flex = undefined;
+                updateFlex = true;
+            }
+        }
+        else if (width < 0 && !_col.flex) {
+            _col.$hdr.addClass('@flex');
+            _col.flex = 1;
+            updateFlex = true;
+        }
+        if (updateFlex) {
+            let flex = false;
+            this.m_columns.forEach(c => {
+                if (c.flex) {
+                    flex = true;
+                }
+            });
+            this.m_header.itemWithRef('flex')?.show(flex ? false : true);
+            if (this.m_footer) {
+                this.m_footer.itemWithRef('flex')?.show(flex ? false : true);
+            }
+        }
         this._updateScroll(true);
     }
     /**
@@ -391,19 +429,19 @@ class GridView extends layout_1.VLayout {
         }
         this.m_columns.forEach((c) => {
             if (c !== col) {
-                c.$col.sorted = false;
+                c.$hdr.sorted = false;
             }
         });
-        const $col = col.$col;
-        if ($col.sorted) {
-            $col.toggleSens();
+        const $hdr = col.$hdr;
+        if ($hdr.sorted) {
+            $hdr.toggleSens();
         }
         else {
-            $col.sorted = true;
+            $hdr.sorted = true;
         }
         if (this.m_dataview) {
             this.m_dataview.sort([
-                { field: col.id, ascending: $col.sens == 'dn' ? false : true }
+                { field: col.id, ascending: $hdr.sens == 'dn' ? false : true }
             ]);
         }
     }
@@ -455,7 +493,7 @@ class GridView extends layout_1.VLayout {
         let cidx = 0;
         let index = this.m_topIndex;
         let count = this.m_dataview ? this.m_dataview.count : 0;
-        let full_width = 0;
+        let full_width = 0; // todo: +4 pixel of left border
         let even = this.m_topIndex & 1 ? true : false;
         // compute full width
         this.m_columns.forEach((col) => {
@@ -587,8 +625,8 @@ class GridView extends layout_1.VLayout {
             });
         }
         else {
-            this.m_header.setStyleValue('width', full_width);
-            this.m_footer?.setStyleValue('width', full_width);
+            this.m_header.setStyleValue('width', full_width + 1000);
+            this.m_footer?.setStyleValue('width', full_width + 1000);
             this.m_container.setStyle({
                 height: count * this.m_itemHeight,
                 width: full_width

package/lib/tooltips.js

@@ -47,7 +47,7 @@ class Tooltip extends component_1.Component {
     render() {
         this.setClass('@non-maskable', true);
         this.setContent([
-            new icon_1.Icon({ icon: 'var( --x4-icon-tip' }),
+            new icon_1.Icon({ icon: 'var( --x4-icon-tip )' }),
             this.m_text = new label_1.Label({ text: 'help' })
         ]);
     }

package/lib/x4.css

@@ -1113,20 +1113,9 @@ textarea::selection {
 .x-grid-view .x-footer .x-cell.sort,
 .x-spreadsheet .x-header .x-cell.sort,
 .x-grid-view .x-header .x-cell.sort {
-  background-image: var(--x4-icon-arrow-down-long);
-  background-repeat: no-repeat;
-  background-size: 1rem 1rem;
-  background-position: right 0 top 6px;
-  padding-right: calc(1rem + 4px);
   height: 0.7rem;
   opacity: 0.7;
 }
-.x-spreadsheet .x-footer .x-cell.sort.desc,
-.x-grid-view .x-footer .x-cell.sort.desc,
-.x-spreadsheet .x-header .x-cell.sort.desc,
-.x-grid-view .x-header .x-cell.sort.desc {
-  background-image: var(--x4-icon-arrow-up-long);
-}
 .x-spreadsheet .x-header .x-cell,
 .x-grid-view .x-header .x-cell {
   display: flex;
@@ -1135,7 +1124,7 @@ textarea::selection {
 .x-spreadsheet .x-row,
 .x-grid-view .x-row {
   position: absolute;
-  width: 100%;
+  width: calc(100% - 4px);
   border-bottom: 1px solid #f0f0f0;
   align-items: center;
   height: 2em;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "x4js",
-	"version": "1.4.11",
+	"version": "1.4.14",
 	"description": "X4js core files",
 	"main": "lib/index.js",
 	"types": "lib/index.d.ts",

package/src/gridview.ts

@@ -36,7 +36,7 @@ const T_UPDATE = Symbol('update');
 
 
 import { HLayout, VLayout } from './layout'
-import { Component, ContainerEventMap, EvSize, EvDblClick, CProps, flyWrap, html, HtmlString, SizerOverlay } from './component'
+import { Component, ContainerEventMap, EvSize, EvDblClick, CProps, flyWrap, html, HtmlString, SizerOverlay, Flex } from './component'
 import { Label } from './label'
 import { _tr } from './i18n'
 import * as Formatters from './formatters'
@@ -76,7 +76,8 @@ export interface GridColumn {
 }
 
 interface GridColumnInternal extends GridColumn {
-	$col: ColHeader;
+	$hdr: ColHeader;
+	$ftr: Component;
 }
 
 
@@ -122,7 +123,7 @@ class ColHeader extends Component {
 			}),
 			new Icon( {
 				ref: 'sorter',
-				cls: '@hidden',
+				cls: '@hidden sort',
 				icon: 'var( --x4-icon-arrow-down )'
 			})
 		]);
@@ -421,6 +422,7 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 			content: this.m_container
 		});
 
+		let flex = false;
 		let cols = this.m_columns.map((col, index) => {
 
 			let cls = '@cell';
@@ -463,10 +465,19 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 				events: {resize: ( e ) => resizeCol(e )}
 			});
 
-			(<any>col).$col = comp;
+			if( col.flex ) {
+				flex = true;
+			}
+
+			(<any>col).$hdr = comp;
 			return comp;
 		});
 
+		(cols as any).push( new Flex( {
+			ref: 'flex',
+			cls: flex ? '@hidden' : ''
+		} ) );
+		
 		// compute full width
 		let full_width = 0;
 		this.m_columns.forEach((col) => {
@@ -479,8 +490,7 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 			style: {
 				minWidth: full_width
 			}
-		});
-	
+		});	
 
 		if( this.m_props.hasFooter ) {
 			let foots = this.m_columns.map((col, index) => {
@@ -504,9 +514,15 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 					}
 				});
 
+				(col as GridColumnInternal).$ftr = comp;
 				return comp;
 			});
 
+			(foots as any).push( new Flex( {
+				ref: 'flex',
+				cls: flex ? '@hidden' : ''
+			} ) );
+			
 			this.m_footer = new HLayout({
 				cls: '@footer',
 				content: <any>foots,
@@ -528,9 +544,40 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 
 	}
 
-	private _on_col_resize(col, width) {
-		this.m_columns[col].width = width;
-		this.m_columns[col].flex = undefined;
+	private _on_col_resize(col: number, width: number) {
+
+		const _col = this.m_columns[col] as GridColumnInternal;
+
+		let updateFlex = false;
+				
+		if( width>=0 ) {
+			_col.width = width;
+			if( _col.flex ) {
+				_col.$hdr.removeClass( '@flex' );
+				_col.flex = undefined;
+				updateFlex = true;
+			}
+		}
+		else if( width<0 && !_col.flex ) {
+			_col.$hdr.addClass( '@flex' );
+			_col.flex = 1;
+			updateFlex = true;
+		}
+
+		if( updateFlex ) {
+			let flex = false;
+			this.m_columns.forEach( c => {
+				if( c.flex ) {
+					flex = true;
+				}
+			});
+				
+			this.m_header.itemWithRef( 'flex' )?.show( flex ? false : true );
+			if( this.m_footer ) {
+				this.m_footer.itemWithRef( 'flex' )?.show( flex ? false : true );
+			}
+		}
+
 		this._updateScroll(true);
 	}
 
@@ -546,22 +593,22 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 
 		this.m_columns.forEach((c) => {
 			if (c !== col) {
-				(c as GridColumnInternal).$col.sorted = false;
+				(c as GridColumnInternal).$hdr.sorted = false;
 			}
 		});
 
-		const $col = (col as GridColumnInternal).$col;
+		const $hdr = (col as GridColumnInternal).$hdr;
 
-		if ($col.sorted) {
-			$col.toggleSens( );
+		if ($hdr.sorted) {
+			$hdr.toggleSens( );
 		}
 		else {
-			$col.sorted = true;
+			$hdr.sorted = true;
 		}
 
 		if (this.m_dataview) {
 			this.m_dataview.sort([
-				{ field: col.id, ascending: $col.sens=='dn' ? false : true }
+				{ field: col.id, ascending: $hdr.sens=='dn' ? false : true }
 			]);
 		}
 	}
@@ -626,7 +673,8 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 		let cidx = 0;
 		let index = this.m_topIndex;
 		let count = this.m_dataview ? this.m_dataview.count : 0;
-		let full_width = 0;
+		
+		let full_width = 0; // todo: +4 pixel of left border
 		let even = this.m_topIndex & 1 ? true : false;
 
 		// compute full width
@@ -787,9 +835,8 @@ export class GridView extends VLayout<GridViewProps, GridViewEventMap> {
 			});
 		}
 		else {
-			this.m_header.setStyleValue('width', full_width);
-			this.m_footer?.setStyleValue('width', full_width);
-
+			this.m_header.setStyleValue('width', full_width + 1000 );
+			this.m_footer?.setStyleValue('width', full_width + 1000 );
 			this.m_container.setStyle({
 				height: count * this.m_itemHeight,
 				width: full_width

package/src/tooltips.ts

@@ -52,7 +52,7 @@ export class Tooltip extends Component {
 	render() {
 		this.setClass('@non-maskable', true);
 		this.setContent([
-			new Icon({ icon: 'var( --x4-icon-tip' }),
+			new Icon({ icon: 'var( --x4-icon-tip )' }),
 			this.m_text = new Label({ text: 'help' })
 		]);
 	}

package/src/x4.less

@@ -1312,12 +1312,13 @@ textarea {
 	}
 }
 
+@bwidth: 4px;
 
 .x-spreadsheet,
 .x-grid-view {
 	
 	@def-height: 2em;
-
+	
 	min-height: 0;
 	overflow: hidden;
 	background-color: white;
@@ -1355,18 +1356,9 @@ textarea {
 			}
 
 			&.sort {
-				background-image: var( --x4-icon-arrow-down-long );
-				background-repeat: no-repeat;
-				background-size: 1rem 1rem;
-				background-position: right 0 top 6px;
-				padding-right: calc( 1rem + 4px );
 				height: 0.7rem;
 				opacity: 0.7;
 			}
-
-			&.sort.desc {
-				background-image: var( --x4-icon-arrow-up-long );
-			}
 		}
 	}
 
@@ -1379,7 +1371,7 @@ textarea {
 
 	.x-row {
 		position: absolute;
-		width: 100%;
+		width: calc( 100% - @bwidth );	// todo: border of 1st col
 		border-bottom: 1px solid #f0f0f0;
 		align-items: center;
 		height: @def-height;
@@ -1409,11 +1401,11 @@ textarea {
 .x-grid-view {
 	.x-footer,
 	.x-header {
-		border-left: 4px solid #f0f0f0;
+		border-left: @bwidth solid #f0f0f0;
 	}
 
 	.x-row {
-		border-left: 4px solid transparent;
+		border-left: @bwidth solid transparent;
 
 		&:hover {
 			background-color: rgba(0,0,0,0.1);