Port more elements

docs/src/content/docs/elements/image.mdx

@@ -120,7 +120,7 @@ Use the `@image-url("...")` macro to specify the location of the image.
 <SlintProperty propName="source-clip-y" typeName="int"/>
 ### `source-clip-width`  
 <SlintProperty propName="source-clip-width" typeName="int" defaultValue="source.width - source.clip-x"/>
-### `source-clip-height`  ** (_in_ _int_): Properties in source
+### `source-clip-height`
 <SlintProperty propName="source-clip-height" typeName="int" defaultValue="source.height - source.clip-y"/>
 
 ### `vertical-alignment`

docs/src/content/docs/elements/timer.mdx

@@ -0,0 +1,66 @@
+---
+title: Timer
+description: Timer element api.
+---
+import SlintProperty  from '../../../components/SlintProperty.astro';
+import { Aside } from '@astrojs/starlight/components';
+
+This example shows a timer that counts down from 10 to 0 every second:
+
+```slint
+import { Button } from "std-widgets.slint";
+export component Example inherits Window {
+    property <int> value: 10;
+    timer := Timer {
+        interval: 1s;
+        running: true;
+        triggered() => {
+            value -= 1;
+            if (value == 0) {
+                self.running = false;
+            }
+        }
+    }
+    HorizontalLayout {
+        Text { text: value; }
+        Button {
+            text: "Reset";
+            clicked() => { value = 10; timer.running = true; }
+        }
+    }
+}
+```
+
+
+
+Use the Timer pseudo-element to schedule a callback at a given interval.
+The timer is only running when the `running` property is set to `true`. To stop or start the timer, set that property to `true` or `false`.
+It can be also set to a binding expression.
+When already running, the timer will be restarted if the `interval` property is changed.
+
+<Aside type="note" title="Note">
+The default value for `running` is `true`, so if you don't specify it, it will be running.
+</Aside>
+
+<Aside type="note" title="Note">
+Timer is not an actual element visible in the tree, therefore it doesn't have the common properties such as `x`, `y`, `width`, `height`, etc. It also doesn't take room in a layout and cannot have any children or be inherited from.
+</Aside>
+
+
+### `interval`
+<SlintProperty propName="interval" typeName="duration">
+The interval between timer ticks. This property is mandatory.
+</SlintProperty>
+
+### `running`
+<SlintProperty propName="running" typeName="bool" defaultValue="true">
+`true` if the timer is running. (default value: `true`)
+</SlintProperty>
+
+## Callbacks
+
+### `triggered()`
+Invoked every time the timer ticks (every `interval`).
+
+
+

docs/src/content/docs/elements/toucharea.mdx

@@ -0,0 +1,97 @@
+---
+title: TouchArea
+description: TouchArea element api.
+---
+import SlintProperty  from '../../../components/SlintProperty.astro';
+
+```slint
+export component Example inherits Window {
+    width: 200px;
+    height: 100px;
+    area := TouchArea {
+        width: parent.width;
+        height: parent.height;
+        clicked => {
+            rect2.background = #ff0;
+        }
+    }
+    Rectangle {
+        x:0;
+        width: parent.width / 2;
+        height: parent.height;
+        background: area.pressed ? blue: red;
+    }
+    rect2 := Rectangle {
+        x: parent.width / 2;
+        width: parent.width / 2;
+        height: parent.height;
+    }
+}
+```
+
+Use `TouchArea` to control what happens when the region it covers is touched or interacted with
+using the mouse.
+
+When not part of a layout, its width or height default to 100% of the parent element.
+
+### `has-hover`
+<SlintProperty propName="has-hover" typeName="bool" PropertyVisibility="out">
+Set to true when the mouse is over the `TouchArea` area.
+</SlintProperty>
+
+### `mouse-cursor`
+<SlintProperty propName="mouse-cursor" typeName="enum" enumName="MouseCursor">
+The mouse cursor type when the mouse is hovering the `TouchArea`.
+</SlintProperty>
+
+### `mouse-x`
+<SlintProperty propName="mouse-x" typeName="length" PropertyVisibility="out">
+Set by the `TouchArea` to the position of the mouse within it.
+</SlintProperty>
+
+### `mouse-y`
+<SlintProperty propName="mouse-y" typeName="length" PropertyVisibility="out">
+Set by the `TouchArea` to the position of the mouse within it.
+</SlintProperty>
+
+### `pressed-x`
+<SlintProperty propName="pressed-x" typeName="length" PropertyVisibility="out">
+Set by the `TouchArea` to the position of the mouse at the moment it was last pressed.
+</SlintProperty>
+
+### `pressed-y`
+<SlintProperty propName="pressed-y" typeName="length" PropertyVisibility="out">
+Set by the `TouchArea` to the position of the mouse at the moment it was last pressed.
+</SlintProperty>
+
+### `pressed`
+<SlintProperty propName="pressed" typeName="bool" PropertyVisibility="out">
+Set to `true` by the `TouchArea` when the mouse is pressed over it.
+</SlintProperty>
+
+
+### Callbacks
+
+### `clicked()`
+Invoked when clicked: A finger or the left mouse button is pressed, then released on this element.
+
+### `double-clicked()`
+Invoked when double-clicked. The left mouse button is pressed and released twice on this element in a short
+period of time, or the same is done with a finger. The `clicked()` callbacks will be triggered before the `double-clicked()` callback is triggered.
+
+### `moved()`
+The mouse or finger has been moved. This will only be called if the mouse is also pressed or the finger continues to touch
+the display. See also **pointer-event(PointerEvent)**.
+
+### `pointer-event(PointerEvent)`
+Invoked when a button was pressed or released, a finger touched, or the pointer moved.
+The [_`PointerEvent`_](language/builtins/structs.md#pointerevent) argument contains information such which button was pressed
+and any active keyboard modifiers.
+In the [_`PointerEventKind::Move`_](../language/builtins/structs.md#pointereventkind) case the `buttons` field will always
+be set to `PointerEventButton::Other`, independent of whether any button is pressed or not.
+
+### `scroll-event(PointerScrollEvent) -> EventResult`
+Invoked when the mouse wheel was rotated or another scroll gesture was made.
+The [_`PointerScrollEvent`_](../language/builtins/structs.md#pointerscrollevent) argument contains information about how much to scroll in what direction.
+The returned [`EventResult`](../language/builtins/enums.md#eventresult) indicates whether to accept or ignore the event. Ignored events are
+forwarded to the parent element.