header update, theme fix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/revogrid",
-  "version": "1.4.8",
+  "version": "1.4.9",
   "description": "Virtual reactive data grid component - RevoGrid.",
   "license": "MIT",
   "bugs": {

src/components/header/headerRenderer.tsx

@@ -15,7 +15,8 @@ const HeaderRenderer = ({column, data, onClick}: Props, _children: VNode[]): VNo
         style: { width: `${column.size}px`, transform: `translateX(${column.start}px)` },
         onClick: () => onClick(data)
     };
-    const headerChildren: VNode|string = data.columnTemplate ? data.columnTemplate(h.h, data) : data.name;
+    const headerChildren: VNode|string = data.columnTemplate ?
+        data.columnTemplate(h as unknown as RevoGrid.HyperFunc<VNode>, data) : data.name;
     return <div {...dataProps}>{headerChildren}</div>;
 };
 

src/components/revo-grid/revo-grid.default.scss

@@ -4,9 +4,11 @@ $header-size: 30px;
 $header-shadow: 0 1px 10px rgba(black, .2);
 $default-rows-size: 42px;
 
-revogr-viewport {
-	$shadow-top: 0 -1px 0 0 $header-border-color;
-	box-shadow: $shadow-top;
+revo-grid[theme="default"] {
+	revogr-viewport {
+		$shadow-top: 0 -1px 0 0 $header-border-color;
+		box-shadow: $shadow-top;
+	}
 
 	revogr-header {
 		text-align: center;

src/components/revo-grid/revo-grid.material.scss

@@ -7,69 +7,69 @@ $header-border-color: $cell-border-color;
 
 $cell-shadow-cell: 0 -1px 0 0 $cell-border-color inset;
 
-revo-grid {
+revo-grid[theme="material"] {
 	font-family: Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
-}
-
-revogr-viewport {
-
-	revogr-header {
-		line-height: $header-height;
-		font-weight: 600;
-		text-align: left;
-
-		.data-header-cell {
-			$shadow-bottom: 0 -1px 0 0 $header-border-color inset;
-			$shadow-top: 0 -1px 0 0 $header-border-color;
-			box-shadow: $shadow-top, $shadow-bottom;
-			padding: 0 15px;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-
-		.header-row {
-			height: $header-height;
+
+	revogr-viewport {
 
-			&.group {
+		revogr-header {
+			line-height: $header-height;
+			font-weight: 600;
+			text-align: left;
+
+			.data-header-cell {
 				$shadow-bottom: 0 -1px 0 0 $header-border-color inset;
-				box-shadow: $shadow-bottom;
+				$shadow-top: 0 -1px 0 0 $header-border-color;
+				box-shadow: $shadow-top, $shadow-bottom;
+				padding: 0 15px;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+
+			.header-row {
+				height: $header-height;
+
+				&.group {
+					$shadow-bottom: 0 -1px 0 0 $header-border-color inset;
+					box-shadow: $shadow-bottom;
+				}
 			}
 		}
-	}
-
-
-	.footer-wrapper revogr-data {
-		box-shadow: 0 -1px 0 $cell-border-color;
-	}
-
-	revogr-viewport-scroll {
-		&.colPinStart {
-			box-shadow: 1px 0 0 $cell-border-color;
-		}
-
-		&.colPinEnd {
-			box-shadow: -1px 0 0 $cell-border-color;
+
+
+		.footer-wrapper revogr-data {
+			box-shadow: 0 -1px 0 $cell-border-color;
 		}
-	}
-
-	revogr-data {
-		text-align: left;
-
-		.row {
-			line-height: $default-rows-size;
+
+		revogr-viewport-scroll {
+			&.colPinStart {
+				box-shadow: 1px 0 0 $cell-border-color;
+			}
+
+			&.colPinEnd {
+				box-shadow: -1px 0 0 $cell-border-color;
+			}
 		}
-
-		.data-cell {
-			box-shadow: $cell-shadow-cell;
-			padding: 0 15px;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			color: rgba(black, .87);
 
-			&.disabled {
-				background-color: $cell-disabled-bg;
+		revogr-data {
+			text-align: left;
+
+			.row {
+				line-height: $default-rows-size;
+			}
+
+			.data-cell {
+				box-shadow: $cell-shadow-cell;
+				padding: 0 15px;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				color: rgba(black, .87);
+
+				&.disabled {
+					background-color: $cell-disabled-bg;
+				}
 			}
 		}
 	}
-}
+}

src/components/revo-grid/revo-grid.tsx

@@ -73,7 +73,7 @@ export class RevoGridComponent {
 
 
   /** Theme name */
-  @Prop() theme: 'default'|'material' = 'default';
+  @Prop({ reflect: true }) theme: 'default'|'material' = 'default';
 
 
   // --------------------------------------------------------------------------
@@ -248,6 +248,7 @@ export class RevoGridComponent {
   }
 
   render() {
+    console.log(this.theme);
     return <revogr-viewport
         onSetDimensionSize={e => this.dimensionProvider.setDimensionSize(e.detail.type, e.detail.sizes)}
         onSetViewportCoordinate={e => this.dimensionProvider.setViewPortCoordinate(e.detail)}

src/global/global.ts

@@ -8,5 +8,12 @@ setMode(elm => {
     if (typeof theme === 'string') {
         theme = theme.trim();
     }
-    return  allowedThemes.indexOf(theme) > -1 ? theme : DEFAULT_THEME;
+
+    const isAllowed = allowedThemes.indexOf(theme) > -1;
+    console.log('set', isAllowed);
+    if (!isAllowed) {
+        elm.setAttribute('theme', DEFAULT_THEME);
+        console.log('set', DEFAULT_THEME);
+    }
+    return  isAllowed ? theme : DEFAULT_THEME;
 });