refactor: enhance virtual list and form components with improved styling and data binding

Author: caperaven

app/form/form.html

@@ -1,8 +1,8 @@
 <template id="list-item">
       <li class="list-item">
-            <span>__name__</span>
-            <span>__age__</span>
-            <span>__email__</span>
+            <span class="name">__name__</span>
+            <span class="age">__age__</span>
+            <span class="email">__email__</span>
       </li>
 </template>
 

app/form/form.js

@@ -29,7 +29,8 @@ export default class FormView extends HTMLElement {
 		ComponentModule.on_ready({
 			element: virtualList,
 			callback: () => {
-				virtualList.load(data, template, 32, this.#inflate.bind(this));	
+				const listItemStyle = import.meta.url.replace("form.js", "list-items.css");
+				virtualList.load(data, template, 32, this.#inflate.bind(this), [listItemStyle]);	
 			}
 		})
 
@@ -41,7 +42,9 @@ export default class FormView extends HTMLElement {
 	}
 
 	#inflate(element, data) {
-
+		element.querySelector(".name").textContent = data.name;
+		element.querySelector(".age").textContent = data.age;
+		element.querySelector(".email").textContent = data.email;
 	}
 
 	async #click(event) {

app/form/list-items.css

@@ -0,0 +1,18 @@
+.list-item {
+    display: flex;
+    flex-direction: row;
+    height: 2rem;
+    align-items: center;
+    gap: var(--padding);
+    box-sizing: border-box;
+    padding: 0 var(--padding);
+}
+
+.list-item .name {
+    font-weight: bold;
+    width: 5rem;
+}
+
+.list-item .age {
+    flex: 1;
+}

components/virtual-list/virtual-list.html.js

@@ -1,5 +1,5 @@
 export const HTML = `
 <link rel="stylesheet" href="__css__" />
 
-<ul role="list"></ul>
+<ul id="container" role="list"></ul>
 `.replace("__css__", import.meta.url.replace(".html.js", ".css"));

components/virtual-list/virtual-list.js

@@ -45,13 +45,42 @@ export class VirtualList extends HTMLElement {
 
     #loadElements() {
         const height = this.offsetHeight;
+        const visibleRange = this.#sizeManager.getVisibleRange(0, height);
+        const totalHeight = this.#sizeManager.totalSize;
+
+        if (height <= totalHeight) {
+            this.#createElements(visibleRange);
+        }
+    }
+
+    #createElements(visibleRange) {
+        const fragment = document.createDocumentFragment();
+        const { start, end } = visibleRange;
+
+        for (let i = start; i <= end; i++) {
+            const item = this.#data[i];
+            const element = this.#template.content.cloneNode(true);
+            this.#inflateFn(element, item);
+            fragment.appendChild(element);
+        }
+
+        const container = this.shadowRoot.querySelector("#container");
+        container.innerHTML = "";
+        container.appendChild(fragment);
     }
 
     /**
      * Method to update the list items.
      * @param {Array} items - The list items to display.
      */
-    async load(items, template, height, inflateFn) {
+    async load(items, template, height, inflateFn, styles = []) {
+        for (const style of styles) {
+            const link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href= style;
+            this.shadowRoot.appendChild(link);
+        }
+
         this.#template = template;
         this.#inflateFn = inflateFn;