@schukai/monster 3.85.1 → 3.86.0

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) {
 
 
 
-