fix: some layout issues and add labels to small datatable #260

development/issues/open/260.html

@@ -26,7 +26,7 @@
                         "city": "Berlin",
                         "zipcode": "10115",
                         "country": "Germany",
-                        "phone": "+49 30 123456",
+                        "phone": "+49 30 1234.56",
                         "email": "john.doe@example.com"
                     },
                     {
@@ -36,7 +36,7 @@
                         "city": "Munich",
                         "zipcode": "80331",
                         "country": "Germany",
-                        "phone": "+49 89 654321",
+                        "phone": "+49 89 6543.21",
                         "email": "jane.doe@example.com"
                     },
                     {
@@ -46,7 +46,7 @@
                         "city": "Hamburg",
                         "zipcode": "20095",
                         "country": "Germany",
-                        "phone": "+49 40 987654",
+                        "phone": "+49 40 1111.11",
                         "email": "max.mustermann@example.com"
                     }
                 ]
@@ -54,19 +54,66 @@
         </script>
     </monster-datasource-dom>
 
+    <div style="width:400px" class="">
+    <monster-button-bar>
+        <monster-button>click 1</monster-button>
+        <monster-button>click 2</monster-button>
+        <monster-button>click 3</monster-button>
+        <monster-button>click 4</monster-button>
+        <monster-button>click 6</monster-button>
+        <monster-button>click 7</monster-button>
+        <monster-button>click 8</monster-button>
+        <monster-button>click 9</monster-button>
+        <monster-button>click 10</monster-button>
+        <monster-button>click 11</monster-button>
+    </monster-button-bar>
+    </div>
+    
+    
     <monster-datatable data-monster-datasource-selector="#myDataSourceID">
         <template id="row">
-            <div data-monster-grid-template="1.2rem" data-monster-head="id" data-monster-replace="path:row.id"></div>
+            <div data-monster-mode="fixed" data-monster-grid-template="1.2rem" data-monster-head="id"
+                 data-monster-replace="path:row.id"></div>
             <div data-monster-grid-template="auto" data-monster-head="name" data-monster-replace="path:row.name"></div>
-            <div data-monster-grid-template="3fr" data-monster-head="street" data-monster-replace="path:row.street"></div>
-            <div data-monster-head="city" data-monster-replace="path:row.city"></div>
-            <div data-monster-head="zipcode" data-monster-replace="path:row.zipcode"></div>
-            <div data-monster-head="country" data-monster-replace="path:row.country"></div>
-            <div data-monster-head="phone" data-monster-replace="path:row.phone"></div>
-            <div data-monster-head="email" data-monster-replace="path:row.email"></div>
+            <div data-monster-grid-template="3fr" data-monster-head="street"
+                 data-monster-replace="path:row.street"></div>
+            <div data-monster-align="end" class="end" data-monster-head="city"
+                 data-monster-replace="path:row.city"></div>
+            <div data-monster-mode="hidden" data-monster-head="zipcode" data-monster-replace="path:row.zipcode"></div>
+            <div data-monster-mode="hidden" data-monster-head="country" data-monster-replace="path:row.country"></div>
+            <div data-monster-mode="hidden" data-monster-head="phone" data-monster-replace="path:row.phone"
+                 class="monospace"></div>
+            <div data-monster-mode="hidden" data-monster-head="email" data-monster-replace="path:row.email"></div>
+            <div data-monster-mode="fixed" data-monster-head="" style="overflow:visible">
+                <monster-button-bar>
+                    <monster-button>click 1</monster-button>
+                    <monster-button>click 2</monster-button>
+                    <monster-button>click 3</monster-button>
+                    <monster-button>click 4</monster-button>
+                    <monster-button>click 6</monster-button>
+                    <monster-button>click 7</monster-button>
+                    <monster-button>click 8</monster-button>
+                    <monster-button>click 9</monster-button>
+                    <monster-button>click 10</monster-button>
+                    <monster-button>click 11</monster-button>
+                </monster-button-bar>
+            </div>
         </template>
     </monster-datatable>
 
+    <div style="margin-top:120px;padding:20px">
+        <monster-button>button 1</monster-button>
+        <monster-confirm-button>
+            <div slot="button">button 1</div>
+        </monster-confirm-button>
+        <monster-state-button>
+            state 1
+        </monster-state-button>
+        <monster-popper-button>
+            <div slot="button">button 1</div>
+        </monster-popper-button>
+    </div>
+
 
 </main>
 </body>

development/issues/open/260.mjs

@@ -12,49 +12,9 @@ import "../../../source/components/style/theme.pcss";
 import "../../../source/components/style/normalize.pcss";
 import "../../../source/components/style/typography.pcss";
 import "../../../source/components/datatable/datatable.mjs";
+import "../../../source/components/form/button.mjs";
+import "../../../source/components/form/state-button.mjs";
+import "../../../source/components/form/confirm-button.mjs";
+import "../../../source/components/form/button-bar.mjs";
+import "../../../source/components/form/button-bar.mjs";
 
-import { domReady } from "../../../source/dom/ready.mjs";
-//
-// domReady.then(() => {
-//     const datatable = document.querySelector("monster-datatable");
-//     datatable.setOption('data', [
-//         {
-//             "id": "1",
-//             "name": "John Doe"
-//         },
-//         {
-//             "id": "2",
-//             "name": "Jane Doe"
-//         },
-//         {
-//             "id": "3",
-//             "name": "John Smith"
-//         },
-//         {
-//             "id": "4",
-//             "name": "Jane Smith"
-//         }
-//     ]);
-//    
-//     setTimeout(() => {
-//         datatable.setOption('data', [
-//             {
-//                 "id": "1",
-//                 "name": "John Doe2 "
-//             },
-//             {
-//                 "id": "2",
-//                 "name": "Jane Doe 2"
-//             },
-//             {
-//                 "id": "3",
-//                 "name": "John Smith3"
-//             },
-//             {
-//                 "id": "4",
-//                 "name": "Jane Smit4h"
-//             }
-//         ]);
-//     },2000)
-//    
-// });
\ No newline at end of file

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

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";
@@ -107,6 +108,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 +206,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 +220,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 +234,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 +250,3 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
 
 
 
-

source/components/form/button-bar.mjs

@@ -124,39 +124,6 @@ const switchElementSymbol = Symbol("switchElement");
  */
 const ATTRIBUTE_POPPER_POSITION = "data-monster-popper-position";
 
-/**
- * This CustomControl creates a button bar.
- *
- * <img src="./images/button-bar.png">
- *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library.
- *
- * You can create this control either by specifying the HTML tag `<monster-tabs />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-tabs');` method.
- *
- * ```html
- * <monster-tabs></monster-tabs>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import {ButtonBar} from '@schukai/component-form/source/tab.js';
- * document.createElement('monster-tabs');
- * ```
- *
- * @startuml button-bar.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- ButtonBar
- * @enduml
- *
- * @copyright schukai GmbH
- * @summary A configurable tab control
- * @fires monster-fetched
- */
-
 /**
  * A button bar control.
  *
@@ -164,9 +131,8 @@ const ATTRIBUTE_POPPER_POSITION = "data-monster-popper-position";
  *
  * @example /examples/components/form/button-bar-simple
  *
- * @since 3.19.0
  * @copyright schukai GmbH
- * @summary A button bar control
+ * @summary This is a button bar control that can be used to display a set of buttons.
  * @fires monster-fetched
  */
 class ButtonBar extends CustomElement {
@@ -198,7 +164,8 @@ class ButtonBar extends CustomElement {
 			},
 			labels: {},
 			popper: {
-				placement: "bottom",
+				placement: "left",
+				middleware: ["autoPlacement", "shift" ,"offset:5"],
 			},
 		});
 

source/components/form/button.mjs

@@ -47,7 +47,6 @@ export const buttonElementSymbol = Symbol("buttonElement");
  * @example /examples/components/form/button-simple
  * @example /examples/components/form/button-with-click-event
  *
- * @since 1.5.0
  * @copyright schukai GmbH
  * @summary A beautiful button that can make your life easier and also looks good.
  * @fires monster-button-clicked this event is triggered when the button is clicked. It contains the field {button} with the button instance.

source/components/form/style/button-bar.pcss

@@ -39,11 +39,12 @@ div[data-monster-role="control"] {
 
     & slot[name=popper] {
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
         flex-wrap: nowrap;
-        align-items: stretch;
+        align-items: center;
         align-content: center;
         justify-content: space-between;
+        gap: 0.4rem;
     }
 
 

source/components/form/style/button.pcss

 @import "../../style/control.pcss";
 @import "../../style/button.pcss";
 @import "../../style/border.pcss";
+@import "../../style/typography.pcss";
 
 :host(monster-button){display:flex;}
 
@@ -8,3 +9,7 @@
     display: flex;
     align-items: stretch;   
 }
+
+button {
+    width: max-content;
+}

source/components/form/style/confirm-button.pcss

@@ -6,7 +6,7 @@
 
 div[data-monster-role="decision"] {
     display: flex;
-    width: 100%;
+    width: max-content;
     align-items: center;
     justify-content: space-evenly;
     margin: 1rem 0 0.4rem 0;
@@ -14,4 +14,9 @@ div[data-monster-role="decision"] {
 
 div[data-monster-role="control"] {
     height: 100%;
+    width: max-content;
+}
+
+button {
+    width: max-content;
 }

source/components/form/style/message-state-button.pcss

-
+@import "../../style/typography.pcss";
 
 
 
@@ -8,3 +8,7 @@
         width: 100%;
     }
 }
+
+button {
+    width: max-content;
+}

source/components/form/style/popper-button.pcss

 @import "../../style/control.pcss";
 @import "../../style/floating-ui.pcss";
 @import "../../style/button.pcss";
+@import "../../style/typography.pcss";
 
 [data-monster-role=control] {
     position: relative;
@@ -8,9 +9,14 @@
 }
 
 [data-monster-role=button] {
-    width: fill-available;
+    width: max-content;
 }
 
 div[data-monster-role="control"] {
     height: 100%;
+    width: max-content;
+}
+
+button {
+    width: max-content;
 }

source/components/form/style/state-button.pcss

 @import "../../style/control.pcss";
 @import "../../style/border.pcss";
 @import "../../style/color.pcss";
+@import "../../style/typography.pcss";
 
 div[data-monster-role="control"] {
     height: 100%;
 }
 
-
+button {
+    width: max-content;
+}
 
 [data-monster-role=button] {
     display: flex;