@schukai/monster 4.40.1 → 4.42.0

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

@@ -50,7 +50,6 @@
         align-items: center;
         gap: 2rem;
     }
-
 }
 
 :host {
@@ -58,6 +57,12 @@
     margin: 0;
 }
 
+
+:host(.is-resizing) {
+    cursor: col-resize;
+    user-select: none;
+}
+
 ::slotted(.monster-button-group) {
     margin: 0 !important;
     flex-grow: 2;
@@ -81,7 +86,6 @@
         line-height: 1.2;
         border-bottom: 1px dashed var(--monster-theme-control-border-color);
         box-sizing: border-box;
-
         min-width: 0;
         overflow: auto;
 
@@ -129,13 +133,11 @@
     }
 
     @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);
-        box-sizing: border-box;
-    }
+        &: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);
+            box-sizing: border-box;
+        }
     }
 
     & .monster-form {
@@ -143,7 +145,6 @@
         flex-direction: column;
         gap: 0.5rem;
     }
-
 }
 
 
@@ -162,7 +163,6 @@
             display: none;
         }
     }
-
 }
 
 [data-monster-role=datatable-headers] {
@@ -172,13 +172,19 @@
         @mixin text;
         font-weight: bold;
         padding: 0.3rem 0.2rem;
+        position: relative;
         display: flex;
         align-items: center;
-        justify-content: flex-start;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        max-width: 100%;
+        justify-content: flex-start; 
+        overflow: visible; 
+        padding-right: 28px;
+
+        & a[data-monster-sortable] {
+            flex-grow: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
 
         & a[data-monster-sortable]:after {
             content: "";
@@ -212,8 +218,38 @@
             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z'/%3E%3C/svg%3E");
             mask-size: cover;
         }
+        
+      & .resize-handle {
+      position: absolute;
+      right: 0;               
+      top: 0;
+      bottom: 0;
+      width: 20px;           
+      cursor: col-resize;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 10;
+      opacity: 1; 
+      transition: opacity 0.15s ease-in-out, transform 0.05s ease-in-out;
+      pointer-events: auto;
     }
 
+    & .resize-handle svg {
+      width: 14px;        
+      height: 20px;
+      pointer-events: none; 
+      transform: scale(1.4);
+    }
+
+    &:hover .resize-handle {
+      opacity: 1;
+    }
+
+    & .resize-handle:active {
+      transform: scale(1.05);
+    }
+    }
 
     & .flex-start {
         justify-content: flex-start;
@@ -226,7 +262,6 @@
     & .flex-center {
         justify-content: center;
     }
-
 }
 
 a[data-monster-role="copy-all"] {
@@ -271,7 +306,6 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
 
 [data-monster-role="control"].small {
 
-
     & [data-monster-role="datatable-headers"] {
         display: none;
     }
@@ -292,12 +326,10 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
         }
 
         @for $i from 0 to 500 {
-            &:has([data-monster-insert-reference=row-$(i)]:hover) [data-monster-insert-reference=row-$(i)
-
-        ] {
-            /*background-color: var(--monster-bg-color-selection-2);*/
-            box-sizing: border-box;
-        }
+            &:has([data-monster-insert-reference=row-$(i)]:hover) [data-monster-insert-reference=row-$(i)] {
+                /*background-color: var(--monster-bg-color-selection-2);*/
+                box-sizing: border-box;
+            }
         }
     }
 
@@ -305,10 +337,8 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
         display: flex;
         flex-direction: column !important;
     }
-
 }
 
-
 [data-monster-role=control].small {
 
     ::slotted(.monster-button-group) {
@@ -331,16 +361,5 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
         &.center {
             justify-content: flex-start;
         }
-
     }
-
-}
-
-
-
-
-
-
-
-
-
+}