Document widgets that were missing documentation

README.md

@@ -53,9 +53,9 @@ Click on the screenshot to see the WebAssembly simulation
 |---------|-------|-------|
 | ![Screenshot of the Gallery on Windows](resources/gallery_win_screenshot.png "Gallery") | ![Screenshot of the Gallery on macOS](resources/gallery_mac_screenshot.png "Gallery") | ![Screenshot of the Gallery on Linux](resources/gallery_linux_screenshot.png "Gallery") |
 
-## The .60 Mark-Up Language
+## The .60 Markup Language
 
-SixtyFPS comes with a mark-up language that is specifically designed for user interfaces. This language provides a
+SixtyFPS comes with a markup language that is specifically designed for user interfaces. This language provides a
 powerful way to describe graphical elements, their placement, and the flow of data through the different states. It is a familar syntax to describe the hierarchy of elements and property bindings. Here's the obligatory "Hello World":
 
 ```60

docs/langref.md

@@ -114,7 +114,7 @@ as color or dimensional properties. You can assign values or entire [expressions
 Example := Window {
     // Simple expression: ends with a semi colon
     width: 42lx;
-    // or a code block: (no semicolon needed)
+    // or a code block (no semicolon needed)
     height: { 42lx }
 }
 ```

docs/widgets.md

@@ -127,5 +127,133 @@ Example := Window {
 }
 ```
 
+## `LineEdit`
+
+### Properties
+
+* **`text`** (*string*): The test being edited
+* **`has_focus`**: (*bool*): Set to true when the line edit currently has the focus
+
+### Signals
+
+* **`accepted`**: Enter was pressed
+
+### Example
+
+```60
+import { LineEdit } from "sixtyfps_widgets.60";
+Example := Window {
+    width: 200lx;
+    height: 25lx;
+    LineEdit {
+        width: parent.width;
+        height: parent.height;
+        value: 42;
+    }
+}
+```
+
+
+## `ScrollView`
+
+A Scrollview contains a viewport that is bigger than the view and can be scrolled.
+It has scrollbar to interact with.
+
+### Properties
+
+* **`viewport_width`** and **`viewport_height`** (*lenght*): The `width` and `lenght` properties of the viewport
+* **`viewport_x`** and **`viewport_y`** (*lenght*): The `x` and `y` properties of the viewport. Usually these are negative
+
+
+### Example
+
+```60
+import { ScrollView } from "sixtyfps_widgets.60";
+Example := Window {
+    width: 200lx;
+    height: 200lx;
+    ScrollView {
+        width: 200lx;
+        height: 200lx;
+        viewport_width: 300lx;
+        viewport_height: 300lx;
+        Rectangle { width: 30lx; height: 30lx; x: 275lx; y: 50lx; color: blue; }
+        Rectangle { width: 30lx; height: 30lx; x: 175lx; y: 130lx; color: red; }
+        Rectangle { width: 30lx; height: 30lx; x: 25lx; y: 210lx; color: yellow; }
+        Rectangle { width: 30lx; height: 30lx; x: 98lx; y: 55lx; color: orange; }
+    }
+}
+```
+
+
+## `ListView`
+
+A ListView is like a Scrollview but it should have a `for` element, and the content are
+automatically layed out in a list.
+Elements are only instentiated if they are visible
+
+### Example
+
+```60
+import { ListView } from "sixtyfps_widgets.60";
+Example := Window {
+    width: 150lx;
+    height: 150lx;
+    ListView {
+        width: 150lx;
+        height: 150lx;
+        for data in [
+            { text: "Blue", color: #0000ff, bg: #eeeeee},
+            { text: "Red", color: #ff0000, bg: #eeeeee},
+            { text: "Green", color: #00ff00, bg: #eeeeee},
+            { text: "Yellow", color: #ffff00, bg: #222222 },
+            { text: "Black", color: #000000, bg: #eeeeee },
+            { text: "White", color: #ffffff, bg: #222222 },
+            { text: "Magenta", color: #ff00ff, bg: #eeeeee },
+            { text: "Cyan", color: #00ffff, bg: #222222 },
+        ] : Rectangle {
+            height: 30lx;
+            color: data.bg;
+            width: parent.width;
+            Text {
+                text: data.text;
+                color: data.color;
+            }
+        }
+    }
+}
+```
+
+
+## `StandardListView`
+
+Like ListView, but with a default delegate, and a `model` property which is a model of type
+`StandardListViewItem`
+
+The `StandardListViewItem` is equivalent to `{ text: string }` but will be improved in the future with `icon`, `checked` and so on (TODO)
+
+### Properties
+
+* **`model`** (*`[StandardListViewItem]`*): The model
+
+### Example
+
+```60
+import { StandardListView } from "sixtyfps_widgets.60";
+Example := Window {
+    width: 150lx;
+    height: 150lx;
+    StandardListView {
+        width: 150lx;
+        height: 150lx;
+        model: [ { text: "Blue"}, { text: "Red" }, { text: "Green" },
+            { text: "Yellow" }, { text: "Black"}, { text: "White"},
+            { text: "Magenta" }, { text: "Cyan" },
+        ];
+    }
+}
+```
+
+