nodality 1.0.17 → 1.0.18

package/layout/ulist.js

@@ -1,153 +1,154 @@
 /*!
- * nodality v1.0.17
+ * nodality v1.0.18
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */
 
 import {Animator} from "./animator.js";
 
+class UList extends Animator {
+    constructor() {
+        super();
+        this.res = null;
+        this.items = []; // unified storage
+        this.setup();
+    }
 
+    set(obj) {
+        obj.pad && this.pad(obj.pad);
+        obj.mar && this.mar(obj.mar);
+        return this;
+    }
+
+    setup() {
+        let el = document.createElement("ul");
+        this.res = el;
+        this.res.style.padding = 0;
+        this.res.style.margin = 0;
+        return this;
+    }
+
+    // unified method: accepts strings or components
+    setItems(itemsArray) {
+        this.items = itemsArray;
+
+        for (let item of itemsArray) {
+            if (typeof item === "string") {
+                let li = document.createElement("li");
+                li.textContent = item;
+                this.res.appendChild(li);
+            } else {
+                let rendered = item.render();
+                this.res.appendChild(rendered);
+            }
+        }
+        return this;
+    }
+
+    font(font) {
+        this.res.style.fontFamily = font;
+        return this;
+    }
+
+    size(s) {
+        this.res.style.fontSize = s;
+        return this;
+    }
+
+    em(e) {
+        this.res.style.fontSize = `${e}em`;
+        return this;
+    }
+
+    color(color) {
+        this.res.style.color = color;
+        return this;
+    }
+
+    align(direction) {
+        this.res.style.textAlign = `${direction}`;
+        return this;
+    }
+
+    weight(weight) {
+        this.res.style.fontWeight = weight;
+        return this;
+    }
+
+    bold() {
+        this.res.style.fontWeight = "bold";
+        return this;
+    }
+
+    italic() {
+        this.res.style.fontStyle = "italic";
+        return this;
+    }
+
+    margin(val) {
+        this.res.style.margin = val;
+        return this;
+    }
+
+    border(w, color) {
+        this.res.style.border = `${w}px solid ${color}`;
+        return this;
+    }
+
+    padding(T, L, R, B) {
+        this.res.style.paddingTop = T;
+        this.res.style.paddingLeft = L;
+        this.res.style.paddingRight = R;
+        this.res.style.paddingBottom = B;
+        return this;
+    }
+
+    headline() {
+        this.em(4);
+        this.font("Arial");
+        this.bold();
+        return this;
+    }
+
+    caption() {
+        this.bold();
+        this.res.style.fontFamily = "Arial";
+        this.res.style.color = "#3498db";
+        return this;
+    }
 
-// 13:28 07/04/2020 - BEGIN NOTHING GONNA STOP US NOW  Lets go!
-class UList extends Animator {
-	constructor(){
-		super();
-		this.res = null;
-		this.setup();
-	}
-
-
-	set(obj){
-		obj.pad && this.pad(obj.pad);
-		obj.mar && this.mar(obj.mar);
-		return this;
-	}
-	
-	setup(){
-		let el = document.createElement("ul");
-		this.res = el;
-		
-		this.res.style.padding = 0;
-		this.res.style.margin = 0;
-		return this;
-	}
-
-
-	newItems(items){
-		for (var i = 0; i < items.length; i++){
-			console.log(items[i]);
-			let rendered = items[i].render();
-			this.res.appendChild(rendered);
-		}
-		
-		return this;
-	}
-	
-	items(itemso){
-		for (var i = 0; i < itemso.length; i++){
-			let li = document.createElement("li");
-			let node = document.createTextNode(itemso[i]);
-			li.appendChild(node);
-			this.res.appendChild(li);
-		}
-		
-		return this;
-	}
-	
-	
-	font(font){
-		this.res.style.fontFamily = font;
-		return this;
-	}
-	
-	
-	size(s){
-		this.res.style.fontSize = s;
-		return this;
-	}
-	
-	em(e){
-		this.res.style.fontSize = `${e}em`;
-		return this;
-	}
-	
-	color(color){
-		this.res.style.color = color;
-		return this;
-	}
-	
-	align(direction){
-		this.res.style.textAlign = `${direction}`;
-		return this;
-	}
-	
-	weight(weight){
-		this.res.style.fontWeight = weight;
-		return this;
-	}
-	
-	bold(){
-		this.res.style.fontWeight = "bold";
-		return this;
-	}
-	
-	italic(){
-		this.res.style.fontStyle = "italic";
-		return this;
-	}
-	
-	/*padding(val){
-		this.res.style.padding = val;
-		return this;
-	}*/
-	
-	
-	margin(val){
-		this.res.style.margin = val;
-		return this;
-	}
-	
-	border(w, color){
-		this.res.style.border = `${w}px solid ${color}`;
-		return this;
-	}
-	
-	
-	
-	
-	padding(T, L, R, B){
-		this.res.style.paddingTop = T;
-		this.res.style.paddingLeft = L;
-		this.res.style.paddingRight = R;
-		this.res.style.paddingBottom = B;
-		return this;
-	}
-	
-	
-	
-	
-	headline(){
-		this.em(4)
-		this.font("Arial")
-		this.bold()
-		return this;
-	}
-	
-	
-	caption(){
-		this.bold();
-		this.res.style.fontFamily = "Arial";
-		this.res.style.color = "#3498db";
-		return this;
-	}
 	
-	render(div){
-		if (div){
-			document.querySelector(div).appendChild(this.res);
-		} else {
-			return this.res;
-		}	
-	}
+toCode(indent = 0) {
+        this.code = [];
+
+        if (this.excludeFromCodeTrue) {
+            return [""];
+        }
+
+        const pad = " ".repeat(indent);
+        let code = `${pad}new UList()`;
+
+        if (this.items && this.items.length) {
+            code += `\n${pad}  .setItems([\n` +
+                this.items.map(c =>
+                    typeof c === "string"
+                        ? `${" ".repeat(indent + 4)}"${c}"`
+                        : c.toCode(indent + 4)
+                ).join(",\n") +
+                `\n${pad}  ])`;
+        }
+
+        code += `\n${pad}`;
+        return [code];
+    }
+
+    render(div) {
+        if (div) {
+            document.querySelector(div).appendChild(this.res);
+        } else {
+            return this.res;
+        }
+    }
 }
-	 
+
 export { UList };

package/layout/video.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.17
+ * nodality v1.0.18
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/withoutNew.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.17
+ * nodality v1.0.18
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/wrap.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.17
+ * nodality v1.0.18
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/layout/zoomCard.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.17
+ * nodality v1.0.18
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/lib/AppleAnim.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.17
+ * nodality v1.0.18
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/lib/KeyframeAnimation.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.17
+ * nodality v1.0.18
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/lib/Stacker.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.17
+ * nodality v1.0.18
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/lib/TransformAnim.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.17
+ * nodality v1.0.18
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/lib/cardGetter.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.17
+ * nodality v1.0.18
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/lib/designer.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.17
+ * nodality v1.0.18
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */
@@ -39,6 +39,7 @@ import { /*Beta*/MobileBar } from "../layout/betaMobileBar.js";
 import { /*Beta*/DesktopBar } from "../layout/betaDesktopBar.js";
 import { SideNav } from "../layout/sideNavBar.js";
 import { Spacer } from "../layout/spacer.js";
+import { UList } from "../layout/ulist.js";
 
 
 // FORM COMPONENTS
@@ -1339,7 +1340,7 @@ new Slider(texts, {
         const layout = {
   Text, Image, Link, FlexRow, UINavBar, Free, Audio, Progress, Center, Code,
   Stack, Wrapper, MetaAdder, Table, Dropdown, Modal, TextField, Card,
-  Wrap, FlexGrid, ZoomCard, Switcher, MobileBar, DesktopBar, SideNav, Spacer, HScroller, Polygon, Circle
+  Wrap, FlexGrid, ZoomCard, Switcher, MobileBar, DesktopBar, SideNav, Spacer, HScroller, Polygon, Circle, UList
 };
 
 const formComponents = {

package/lib/elementMapper.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.17
+ * nodality v1.0.18
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */
@@ -43,6 +43,8 @@ import { LinkStyler } from "../lib/linkGetter.js";
 import { CardGen } from "../lib/cardGetter.js";
 import {AreaSwitcher} from "../layout/gridSwitcher.js";
 import {HScroller} from "../layout/horizontalScroller.js";
+import { UList } from "../layout/ulist.js";
+
 // SHAPES
 import { Polygon } from "../layout/polygon.js";
 import { Circle } from "../layout/circle.js";
@@ -119,6 +121,8 @@ class ElementMapper { // 22:09:58 04/11/2024
             return this.mapCode(obj);
          } else if (obj.el.type === "table"){
             return this.mapTable(obj);
+         } else if (obj.el.type === "ulist"){
+            return this.mapUList(obj);
          }
     }
 
@@ -1806,6 +1810,40 @@ return `new AreaSwitcher()
     }
 
 
+
+    static mapUList(obj) {
+        let el = obj.el;
+
+//console.log("GRQDOE"); // remove text flag from lin gradient when ding this on wrapper
+//console.log(obj.customOptions);
+
+        let kind = obj.el.kind ?? "";
+
+
+
+        return new UList(kind)
+            .set({
+                id: el.id,
+                class: el.class,
+                color: el.color,
+                size: this.getElType(el.type), // update 23/07/2025
+                font: el.font ?? "Arial",
+                keySet: el.keySet,
+               // keySet: {key: "border", value: "3px solid green"},
+                stroke: this.filtero("blast", el.id, obj.customOptions),
+                gradient: this.filtero("gradient", el.id, obj.customOptions),
+                animation: this.filtero("animation", el.id, obj.customOptions),
+                shadow: this.filtero("shadow", el.id, obj.customOptions),
+                transform: this.filtero("transform", el.id, obj.customOptions),
+                filtera: this.filtero("filter", el.id, obj.customOptions),
+            }).setItems([
+               new Text("Hello").set({}),
+               new Text("Hello").set({}),
+               new Text("Hello").set({})
+            ]);
+    }
+
+
 /*static base(){
     let res = class Appa extends Base {
         constructor(){

package/lib/linkGetter.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.17
+ * nodality v1.0.18
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/lib/scrollvideo.js

@@ -1,5 +1,5 @@
 /*!
- * nodality v1.0.17
+ * nodality v1.0.18
  * (c) 2025 Filip Vabrousek
  * License: MIT
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodality",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "A lightweight library for declarative UI elements.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",