mod(example/input): ellipse rendering with scrolling for text field contents

examples/elements/input.zig

@@ -166,17 +166,24 @@ const InputField = struct {
         const this: *@This() = @ptrCast(@alignCast(ctx));
         assert(cells.len == @as(usize, size.x) * @as(usize, size.y));
 
-        // TODO add configuration for coloring the text!
-        for (this.input.items, 0..) |cp, idx| {
-            cells[idx].style.fg = .black;
+        const offset = if (this.input.items.len - this.cursor_offset + 1 >= cells.len) this.input.items.len + 1 - cells.len else 0;
+        for (this.input.items[offset..], 0..) |cp, idx| {
+            cells[idx].style.fg = this.configuration.color;
             cells[idx].cp = cp;
+            // display ellipse at the beginning
+            if (offset > 0 and idx == 0) cells[idx].cp = '…';
 
             // NOTE do not write over the contents of this `Container`'s `Size`
-            if (idx == cells.len - 1) break;
+            if (idx == cells.len - 1) {
+                // display ellipse at the end
+                if (this.input.items.len >= cells.len and this.cursor_offset > 0) cells[idx].cp = '…';
+                break;
+            }
         }
-        // TODO show ellipse `..` (maybe with configuration where - start, middle, end)
-        // show cursor after text (if there is still space available)
-        if (this.input.items.len < cells.len) cells[this.input.items.len - this.cursor_offset].style.cursor = true;
+        if (this.input.items.len < cells.len)
+            cells[this.input.items.len - this.cursor_offset].style.cursor = true
+        else
+            cells[this.input.items.len - offset - this.cursor_offset].style.cursor = true;
     }
 };
 
@@ -247,7 +254,7 @@ pub fn main() !void {
         .rectangle = .{ .fill = .light_grey },
         .size = .{
             .grow = .horizontal,
-            .dim = .{ .y = 10 },
+            .dim = .{ .y = 1 },
         },
     }, input_field.element()));