Merge branch 'chore/update-winit-and-accesskit' into feat/ime-support

.github/workflows/rust.yml

@@ -11,7 +11,6 @@ env:
 
 jobs:
   build:
-
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
@@ -31,6 +30,8 @@ jobs:
       if: runner.os == 'Linux'
       run: |
         sudo apt update && sudo apt install build-essential libssl-dev pkg-config libglib2.0-dev libgtk-3-dev
+    - name: Check examples
+      run: cargo check --examples
     - name: Lint
       run: cargo clippy
     - name: Run Linux tests
@@ -39,20 +40,17 @@ jobs:
         export RUSTFLAGS="-Cinstrument-coverage"
         export LLVM_PROFILE_FILE='cargo-test-%p-%m.profraw'
         cargo nextest run --workspace --exclude examples
-        cargo check --examples
-        cargo test -p freya --doc
     - name: Run MacOS and Windows tests
       if: runner.os != 'Linux'
-      run: |
-        cargo nextest run --workspace --exclude examples
-        cargo check --examples
-        cargo test -p freya --doc
+      run: cargo nextest run --workspace --exclude examples
+    - name: Run doctests
+      run: cargo test --workspace --doc
     - name: Run coverage
       if: runner.os == 'Linux'
       run: |
         rustup component add llvm-tools-preview 
         curl -L https://github.com/mozilla/grcov/releases/latest/download/grcov-x86_64-unknown-linux-gnu.tar.bz2 | tar jxf -
-        ./grcov . --binary-path ./target/debug/deps -s . -t lcov --branch --ignore-not-existing --ignore "../*" --ignore "/*" -o cov.lcov 
+        ./grcov . --binary-path ./target/debug/deps -s . -t lcov --branch --ignore-not-existing --ignore "../*" --ignore "/*" -o cov.lcov
     - uses: codecov/codecov-action@v3
       if: runner.os == 'Linux'
       with:

book/src/guides/style.md

@@ -126,7 +126,7 @@ Compatible elements: [`rect`](/guides/elements.html#rect)
 The attributes that have colors as values can use the following syntax:
 
 #### Static colors
-- `rect`
+- `red`
 - `blue`
 - `green`
 - `yellow`

crates/components/src/button.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
-use freya_elements::events::MouseEvent;
+use freya_elements::events::{KeyboardEvent, MouseEvent};
 
 use freya_hooks::{use_applied_theme, use_focus, use_platform, ButtonTheme, ButtonThemeWith};
 use winit::window::CursorIcon;
@@ -15,7 +15,7 @@ pub struct ButtonProps<'a> {
     pub children: Element<'a>,
     /// Handler for the `onclick` event.
     #[props(optional)]
-    pub onclick: Option<EventHandler<'a, MouseEvent>>,
+    pub onclick: Option<EventHandler<'a, Option<MouseEvent>>>,
 }
 
 /// Identifies the current status of the Button.
@@ -57,12 +57,14 @@ pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
     let focus = use_focus(cx);
     let status = use_state(cx, ButtonStatus::default);
     let platform = use_platform(cx);
+
     let focus_id = focus.attribute(cx);
 
     let ButtonTheme {
         background,
         hover_background,
         border_fill,
+        focus_border_fill,
         padding,
         margin,
         corner_radius,
@@ -74,7 +76,7 @@ pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
     let onclick = move |ev| {
         focus.focus();
         if let Some(onclick) = &cx.props.onclick {
-            onclick.call(ev)
+            onclick.call(Some(ev))
         }
     };
 
@@ -100,16 +102,30 @@ pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
         status.set(ButtonStatus::default());
     };
 
+    let onkeydown = |e: KeyboardEvent| {
+        if focus.validate_keydown(e) {
+            if let Some(onclick) = &cx.props.onclick {
+                onclick.call(None)
+            }
+        }
+    };
+
     let background = match *status.get() {
         ButtonStatus::Hovering => hover_background,
         ButtonStatus::Idle => background,
     };
+    let border = if focus.is_selected() {
+        format!("2 solid {focus_border_fill}")
+    } else {
+        format!("1 solid {border_fill}")
+    };
 
     render!(
         rect {
             onclick: onclick,
             onmouseenter: onmouseenter,
             onmouseleave: onmouseleave,
+            onkeydown: onkeydown,
             focus_id: focus_id,
             width: "{width}",
             height: "{height}",
@@ -120,7 +136,7 @@ pub fn Button<'a>(cx: Scope<'a, ButtonProps<'a>>) -> Element {
             role: "button",
             color: "{font_theme.color}",
             shadow: "0 4 5 0 rgb(0, 0, 0, 0.1)",
-            border: "1 solid {border_fill}",
+            border: "{border}",
             corner_radius: "{corner_radius}",
             background: "{background}",
             text_align: "center",

crates/components/src/gesture_area.rs

@@ -43,7 +43,7 @@ type EventsQueue = VecDeque<(Instant, TouchEvent)>;
 ///
 /// # Example
 ///
-/// ```rust
+/// ```rust,no_run
 /// # use freya::prelude::*;
 /// fn app(cx: Scope) -> Element {
 ///    let gesture = use_state(cx, || "Tap here".to_string());

crates/components/src/input.rs

@@ -61,7 +61,7 @@ pub struct InputProps<'a> {
 ///
 /// # Example
 ///
-/// ```rust
+/// ```rust,no_run
 /// # use freya::prelude::*;
 /// fn app(cx: Scope) -> Element {
 ///     let value = use_state(cx, String::new);

crates/components/src/network_image.rs

@@ -49,7 +49,7 @@ pub enum ImageStatus {
 ///
 /// # Example
 ///  
-/// ```rust
+/// ```rust,no_run
 /// # use freya::prelude::*;
 /// fn app(cx: Scope) -> Element {
 ///     render!(

crates/components/src/slider.rs

@@ -2,7 +2,7 @@ use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::{MouseEvent, WheelEvent};
 
-use freya_hooks::{use_applied_theme, use_node_ref, use_platform, SliderThemeWith};
+use freya_hooks::{use_applied_theme, use_node, use_platform, SliderThemeWith};
 use tracing::info;
 use winit::window::CursorIcon;
 
@@ -14,7 +14,8 @@ pub struct SliderProps<'a> {
     /// Handler for the `onmoved` event.
     pub onmoved: EventHandler<'a, f64>,
     /// Width of the Slider.
-    pub width: f64,
+    #[props(into, default = "100%".to_string())]
+    pub width: String,
     /// Height of the Slider.
     pub value: f64,
 }
@@ -64,7 +65,7 @@ pub enum SliderStatus {
 ///             "Value: {percentage}"
 ///         }
 ///         Slider {
-///             width: 100.0,
+///             width: "50%",
 ///             value: *percentage.get(),
 ///             onmoved: |p| {
 ///                 percentage.set(p);
@@ -81,10 +82,8 @@ pub fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> {
     let platform = use_platform(cx);
 
     let value = ensure_correct_slider_range(cx.props.value);
-    let (node_reference, size) = use_node_ref(cx);
-    let width = cx.props.width + 14.0;
-
-    let progress = (value / 100.0) * cx.props.width + 0.5;
+    let (node_reference, size) = use_node(cx);
+    let width = &cx.props.width;
 
     use_on_destroy(cx, {
         to_owned![status, platform];
@@ -111,37 +110,38 @@ pub fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> {
     let onmouseover = move |e: MouseEvent| {
         if *clicking.get() {
             let coordinates = e.get_element_coordinates();
-            let mut x = coordinates.x - 7.5 - size.read().area.min_x() as f64;
-            x = x.clamp(0.0, width);
-
-            let mut percentage = x / cx.props.width * 100.0;
-            percentage = percentage.clamp(0.0, 100.0);
+            let x = coordinates.x - size.area.min_x() as f64 - 6.0;
+            let percentage = x / (size.area.width() as f64 - 15.0) * 100.0;
+            let percentage = percentage.clamp(0.0, 100.0);
 
             cx.props.onmoved.call(percentage);
         }
     };
 
-    let onmousedown = |_: MouseEvent| {
+    let onmousedown = move |e: MouseEvent| {
         clicking.set(true);
+        let coordinates = e.get_element_coordinates();
+        let x = coordinates.x - 6.0;
+        let percentage = x / (size.area.width() as f64 - 15.0) * 100.0;
+        let percentage = percentage.clamp(0.0, 100.0);
+
+        cx.props.onmoved.call(percentage);
     };
 
     let onclick = |_: MouseEvent| {
         clicking.set(false);
     };
 
     let onwheel = move |e: WheelEvent| {
-        let wheel_y = e.get_delta_y();
-        let progress_x = (value / 100.0) * cx.props.width;
-
-        let mut x = progress_x + (wheel_y / 4.0);
-        x = x.clamp(0.0, width);
-
-        let mut percentage = x / cx.props.width * 100.0;
-        percentage = percentage.clamp(0.0, 100.0);
+        let wheel_y = e.get_delta_y().clamp(-1.0, 1.0);
+        let percentage = value + (wheel_y * 2.0);
+        let percentage = percentage.clamp(0.0, 100.0);
 
         cx.props.onmoved.call(percentage);
     };
 
+    let inner_width = (size.area.width() - 15.0) * (value / 100.0) as f32;
+
     render!(
         rect {
             reference: node_reference,
@@ -155,7 +155,6 @@ pub fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> {
             onwheel: onwheel,
             main_align: "center",
             cross_align: "center",
-            padding: "1",
             rect {
                 background: "{theme.background}",
                 width: "100%",
@@ -164,21 +163,21 @@ pub fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> {
                 corner_radius: "50",
                 rect {
                     background: "{theme.thumb_inner_background}",
-                    width: "{progress}",
+                    width: "{inner_width}",
                     height: "100%",
                     corner_radius: "50"
                 }
                 rect {
-                    width: "{progress}",
+                    width: "fill",
                     height: "100%",
-                    offset_y: "-5",
-                    offset_x: "-2",
+                    offset_y: "-6",
+                    offset_x: "-3",
                     rect {
                         background: "{theme.thumb_background}",
-                        width: "17",
-                        height: "17",
+                        width: "18",
+                        height: "18",
                         corner_radius: "50",
-                        padding: "3",
+                        padding: "4",
                         rect {
                             height: "100%",
                             width: "100%",

crates/components/src/switch.rs

@@ -1,8 +1,10 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
-use freya_elements::events::MouseEvent;
+use freya_elements::events::{KeyboardEvent, MouseEvent};
 
-use freya_hooks::{use_animation, use_applied_theme, use_platform, Animation, SwitchThemeWith};
+use freya_hooks::{
+    use_animation, use_applied_theme, use_focus, use_platform, Animation, SwitchThemeWith,
+};
 use winit::window::CursorIcon;
 
 /// [`Switch`] component properties.
@@ -58,6 +60,9 @@ pub fn Switch<'a>(cx: Scope<'a, SwitchProps<'a>>) -> Element<'a> {
     let theme = use_applied_theme!(cx, &cx.props.theme, switch);
     let platform = use_platform(cx);
     let status = use_ref(cx, SwitchStatus::default);
+    let focus = use_focus(cx);
+
+    let focus_id = focus.attribute(cx);
 
     use_on_destroy(cx, {
         to_owned![status, platform];
@@ -82,10 +87,17 @@ pub fn Switch<'a>(cx: Scope<'a, SwitchProps<'a>>) -> Element<'a> {
     };
 
     let onclick = |_: MouseEvent| {
+        focus.focus();
         cx.props.ontoggled.call(());
     };
 
-    let (offset_x, border, circle) = {
+    let onkeydown = |e: KeyboardEvent| {
+        if focus.validate_keydown(e) {
+            cx.props.ontoggled.call(());
+        }
+    };
+
+    let (offset_x, background, circle) = {
         if cx.props.enabled {
             (
                 animation.value(),
@@ -96,6 +108,15 @@ pub fn Switch<'a>(cx: Scope<'a, SwitchProps<'a>>) -> Element<'a> {
             (animation.value(), theme.background, theme.thumb_background)
         }
     };
+    let border = if focus.is_selected() {
+        if cx.props.enabled {
+            format!("2 solid {}", theme.enabled_focus_border_fill)
+        } else {
+            format!("2 solid {}", theme.focus_border_fill)
+        }
+    } else {
+        "none".to_string()
+    };
 
     let _ = use_memo(cx, &cx.props.enabled, move |enabled| {
         if enabled {
@@ -112,11 +133,14 @@ pub fn Switch<'a>(cx: Scope<'a, SwitchProps<'a>>) -> Element<'a> {
             height: "25",
             padding: "1",
             corner_radius: "50",
-            background: "{border}",
+            background: "{background}",
+            border: "{border}",
             onmousedown: |_| {},
             onmouseenter: onmouseenter,
             onmouseleave: onmouseleave,
+            onkeydown: onkeydown,
             onclick: onclick,
+            focus_id: focus_id,
             rect {
                 width: "100%",
                 height: "100%",