@schukai/monster 3.85.2 → 3.86.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 
 
+## [3.86.0] - 2024-11-13
+
+### Add Features
+
+- new classes for datatables and some css updates [#260](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/260)
+### Bug Fixes
+
+- some layout issues and add labels to small datatable [#260](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/260)
+
+
+
 ## [3.85.2] - 2024-11-12
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.12","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.85.2"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.12","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.86.0"}

package/source/components/datatable/datatable/header.mjs

@@ -56,7 +56,7 @@ const DIRECTION_NONE = "";
  * The Header component is a basic class for the datatable component.
  *
  * @copyright schukai GmbH
- * @summary A datatable
+ * @summary The Header component is a basic class for the datatable component.
  */
 class Header extends Base {
 	constructor() {
@@ -106,6 +106,8 @@ class Header extends Base {
 		};
 	}
 
+	/**
+	 */
 	changeDirection() {
 		let direction = this.getInternal("direction");
 		if (direction === DIRECTION_ASC) {
@@ -120,7 +122,7 @@ class Header extends Base {
 
 	/**
 	 *
-	 * @param direction
+	 * @param {string} direction
 	 */
 	setDirection(direction) {
 		this.setInternal("direction", direction);

package/source/components/datatable/datatable.mjs

@@ -118,6 +118,7 @@ const columnBarElementSymbol = Symbol("columnBarElement");
  * @example /examples/components/datatable/alignment
  * @example /examples/components/datatable/row-mode
  * @example /examples/components/datatable/grid-template
+ * @example /examples/components/datatable/overview-class
  *
  * @copyright schukai GmbH
  * @summary A beautiful and highly customizable data table. It can be used to display data from a data source.
@@ -536,7 +537,7 @@ function updateColumnBar() {
 
     const columns = [];
     for (const header of this.getOption("headers")) {
-        const mode = header.getInternal("mode");
+        const mode = header.getInternal("mode"); 
 
         if (mode === ATTRIBUTE_DATATABLE_MODE_FIXED) {
             continue;

package/source/components/datatable/style/datatable.pcss

@@ -12,6 +12,7 @@
 
 @import "../../style/mixin/button.pcss";
 @import "../../style/mixin/typography.pcss";
+@import "../../style/typography.pcss";
 @import "../../style/mixin/hover.pcss";
 @import "../../style/mixin/media.pcss";
 @import "../../style/theme.pcss";
@@ -33,9 +34,11 @@
 }
 
 [data-monster-role="table-container"] {
-    display: block;
+    display: flex;
+    flex-direction: column;
     width: 100%;
     overflow-x: auto;
+    overflow-y: visible;
     padding: 20px;
     box-sizing: border-box;
     min-width: fit-content;
@@ -95,10 +98,32 @@
         &.center {
             justify-content: center;
         }
+        
+        &.monospace {
+            font-family: var(--monster-font-family-monospace);
+        }
+        
+        &.ellipsis {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        &.wrap {
+            white-space: normal;
+            word-wrap: break-word;
+        }
 
-        /* &.hidden, &[data-monster-mode=hidden] {
-             display: none;
-         }*/
+        &.auto {
+            overflow: auto;
+            white-space: nowrap;
+            scrollbar-width: thin;
+            scrollbar-color: var(--monster-color-primary-1) var(--monster-bg-color-primary-1);
+        }
+        
+        &.visible {
+            overflow: visible;
+        }
 
         & input[type=checkbox] {
             accent-color: var(--monster-bg-color-primary-1);
@@ -107,6 +132,7 @@
 
     @for $i from 0 to 500 {
         &:has([data-monster-insert-reference$=row-$(i)]:hover) [data-monster-insert-reference$=row-$(i)
+
     ] {
         color: var(--monster-theme-control-hover-color);
         background-color: var(--monster-theme-control-hover-bg-color);
@@ -204,6 +230,11 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
 
 @mixin viewport-7 {
 
+
+    [data-monster-role="datatable-headers"] {
+        display: none;
+    }
+
     [data-monster-role="table-container"] {
 
         & .bar {
@@ -213,6 +244,12 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
             gap: 0.1rem;
         }
 
+        & [data-monster-head]:before {
+            font-weight: bold;
+            margin-right: 10px;
+            content: attr(data-monster-head);
+        }
+
         @for $i from 0 to 500 {
             &:has([data-monster-insert-reference=row-$(i)]:hover) [data-monster-insert-reference=row-$(i)
 
@@ -221,17 +258,13 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
             box-sizing: border-box;
         }
         }
-
-
     }
 
-
     ::slotted(.monster-button-group) {
         display: flex;
         flex-direction: column !important;
     }
 
-
 }
 
 
@@ -241,4 +274,3 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
 
 
 
-