easy-layout 5.1.29 → 5.1.33

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "easy-layout",
   "author": "James Smith",
-  "version": "5.1.29",
+  "version": "5.1.33",
   "license": "MIT, Anti-996",
   "homepage": "https://github.com/djalbat/easy-layout",
   "description": "Layout elements that work with CSS flexbox.",
@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "easy": "^13.0.44",
-    "easy-drag-and-drop": "^1.2.77",
-    "easy-with-style": "^3.0.173"
+    "easy-drag-and-drop": "^1.2.81",
+    "easy-with-style": "^3.0.176"
   },
   "devDependencies": {
     "@swc/core": "^1.2.50",

package/src/example/div/column/middle.js

@@ -0,0 +1,17 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import { ColumnDiv } from "../../../index"; ///
+
+class MiddleColumnDiv extends ColumnDiv {
+  static defaultProperties = {
+    className: "middle"
+  };
+}
+
+export default withStyle(MiddleColumnDiv)`
+
+  position: relative;
+  
+`;

package/src/example/div/sizeable/bottom.js

@@ -13,6 +13,5 @@ class BottomSizeableDiv extends SizeableDiv {
 export default withStyle(BottomSizeableDiv)`
 
   height: 24rem;
-  min-height: 12rem;
 
 `;

package/src/example/section/text.js

@@ -0,0 +1,38 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+const TextSection = (properties) => {
+  const { className } = properties;
+
+  return (
+
+    <section className={`${className} text`}>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum mauris vitae sem ultrices commodo. Pellentesque dui justo, fermentum quis vestibulum id, molestie vel leo. Maecenas vel consequat sem. Sed a maximus enim. Aenean quis mi sit amet quam sodales consequat. Aliquam justo arcu, lacinia et ultrices sit amet, rutrum id nisi. Suspendisse nec consectetur ante, sed hendrerit augue. Morbi viverra metus id turpis porttitor pellentesque. Donec pretium ex eget urna molestie, eget semper lacus dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam pharetra nunc ac mauris tristique sagittis.
+      </p>
+      <p>
+        Curabitur blandit interdum dolor sed ultrices. Nunc pellentesque aliquet maximus. Suspendisse pellentesque dapibus accumsan. Sed at ipsum eget dolor consectetur vehicula. Quisque ornare eros id tincidunt interdum. Sed pulvinar, turpis sodales volutpat gravida, purus magna hendrerit purus, nec maximus arcu dui ac nisl. Quisque ac pellentesque risus.
+      </p>
+      <p>
+        Nulla ut justo ut nunc eleifend ultricies volutpat vel ex. Fusce quis velit lacus. Proin sagittis semper erat. Duis ut magna eget justo vulputate facilisis. Phasellus ultrices eleifend justo, ut faucibus lectus rutrum id. In pretium porta faucibus. Praesent vehicula ornare justo, sed mattis risus cursus at.
+      </p>
+      <p>
+        Fusce at bibendum nunc, eleifend consectetur sem. Fusce at elit augue. Sed lectus odio, pulvinar sed pharetra et, pharetra sed dolor. Morbi sodales sem odio, a venenatis odio commodo aliquam. Cras id volutpat metus, a maximus orci. Nullam ac rhoncus lorem. Nam scelerisque risus et elit egestas elementum. Fusce nec arcu at enim porttitor aliquam vel vitae est. Maecenas gravida, quam iaculis pellentesque vehicula, risus diam interdum nunc, vitae lobortis elit ante vitae turpis. Nam viverra, felis et faucibus luctus, ex sapien egestas lectus, vestibulum pulvinar turpis risus et nisi. Sed vitae suscipit libero, eu ultricies metus. Proin nibh arcu, blandit in sem vel, scelerisque vulputate arcu. Duis ultrices orci felis, maximus vulputate neque rutrum sit amet.
+      </p>
+      <p>
+        Ut lectus lacus, tempor ut pharetra eget, tempus eget dui. Nunc purus nisl, malesuada vel malesuada a, faucibus in dolor. Integer dictum lobortis est sed maximus. Aliquam ut lorem elementum velit consectetur commodo. Cras et est quis augue pellentesque iaculis. In tincidunt, arcu lobortis hendrerit ultricies, turpis orci vestibulum lacus, id dapibus sapien nibh vel urna. Nam blandit tellus id massa semper pharetra.
+      </p>
+    </section>
+
+  );
+};
+
+export default withStyle(TextSection)`
+
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  
+`;

package/src/example/view.js

@@ -5,8 +5,10 @@ import withStyle from "easy-with-style";  ///
 import { RowDiv, RowsDiv, ColumnDiv, ColumnsDiv } from "../index"; ///
 
 import BlueRowDiv from "./div/row/blue";
+import TextSection from "./section/text";
 import YellowRowDiv from "./div/row/yellow";
 import BottomLeftDiv from "./div/bottomLeft";
+import MiddleColumnDiv from "./div/column/middle";
 import LeftSizeableDiv from "./div/sizeable/left";
 import RightSizeableDiv from "./div/sizeable/right";
 import PseudoSplitterDiv from "./div/splitter/pseudo";
@@ -46,7 +48,9 @@ const View = (properties) => {
           <RowsDiv>
             <RowDiv>
               <ColumnsDiv>
-                <ColumnDiv/>
+                <MiddleColumnDiv>
+                  <TextSection/>
+                </MiddleColumnDiv>
                 <RightVerticalSplitterDiv/>
                 <RightSizeableDiv>
                   <RowsDiv>