commit 53910f99f8219ba117b1ce33944cb12b1c0a16b4
parent b2ee87f837d508102d39602a0c602ecdd8190d29
Author: triesap <triesap@radroots.dev>
Date: Thu, 22 Jan 2026 11:19:50 +0000
app: refresh ui demo list
- replace static rows with list view configuration
- add touch, input, and select examples
- wire demo signals for input and select
- keep sheet preview as secondary demo
Diffstat:
| M | app/src/ui_demo.rs | | | 179 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------- |
1 file changed, 165 insertions(+), 14 deletions(-)
diff --git a/app/src/ui_demo.rs b/app/src/ui_demo.rs
@@ -1,6 +1,29 @@
use leptos::prelude::*;
use radroots_app_ui_components::{
+ RadrootsAppUiList,
+ RadrootsAppUiListDisplay,
+ RadrootsAppUiListDisplayValue,
+ RadrootsAppUiListIcon,
+ RadrootsAppUiListInput,
+ RadrootsAppUiListInputAction,
+ RadrootsAppUiListInputField,
+ RadrootsAppUiListInputLineLabel,
+ RadrootsAppUiListItem,
+ RadrootsAppUiListItemKind,
+ RadrootsAppUiListLabel,
+ RadrootsAppUiListLabelText,
+ RadrootsAppUiListLabelValue,
+ RadrootsAppUiListLabelValueKind,
+ RadrootsAppUiListSelect,
+ RadrootsAppUiListSelectField,
+ RadrootsAppUiListSelectOption,
+ RadrootsAppUiListStyles,
+ RadrootsAppUiListTitle,
+ RadrootsAppUiListTitleValue,
+ RadrootsAppUiListTouch,
+ RadrootsAppUiListTouchEnd,
+ RadrootsAppUiListView,
RadrootsAppUiSheetClose,
RadrootsAppUiSheetContent,
RadrootsAppUiSheetDescription,
@@ -16,23 +39,151 @@ pub fn RadrootsAppUiDemoPage() -> impl IntoView {
let sheet_open = RwSignal::new(false);
let sheet_open_read = sheet_open.read_only();
let sheet_open_set = Callback::new(move |value| sheet_open.set(value));
+ let input_value = RwSignal::new(String::new());
+ let select_value = RwSignal::new("daily".to_string());
+ let on_input = Callback::new(move |value| input_value.set(value));
+ let on_select = Callback::new(move |value| select_value.set(value));
+ let text_label = |value: &str| RadrootsAppUiListLabelValue {
+ classes_wrap: None,
+ hide_truncate: false,
+ value: RadrootsAppUiListLabelValueKind::Text(RadrootsAppUiListLabelText {
+ value: value.to_string(),
+ classes: None,
+ }),
+ };
+ let list = RadrootsAppUiList {
+ id: Some("ui-demo-list".to_string()),
+ view: Some("ui-demo".to_string()),
+ classes: None,
+ title: Some(RadrootsAppUiListTitle {
+ value: RadrootsAppUiListTitleValue::Text("List Preview".to_string()),
+ classes: None,
+ mod_value: None,
+ link: None,
+ on_click: None,
+ }),
+ default_state: None,
+ list: Some(vec![
+ Some(RadrootsAppUiListItem {
+ kind: RadrootsAppUiListItemKind::Touch(RadrootsAppUiListTouch {
+ label: RadrootsAppUiListLabel {
+ left: vec![text_label("Notifications")],
+ right: Vec::new(),
+ },
+ display: Some(RadrootsAppUiListDisplay {
+ value: RadrootsAppUiListDisplayValue::Label(RadrootsAppUiListLabelText {
+ value: "Enabled".to_string(),
+ classes: None,
+ }),
+ loading: false,
+ on_click: None,
+ }),
+ end: Some(RadrootsAppUiListTouchEnd {
+ icon: RadrootsAppUiListIcon {
+ key: "chevron-right".to_string(),
+ class: None,
+ },
+ on_click: None,
+ }),
+ on_click: None,
+ }),
+ loading: false,
+ hide_active: false,
+ hide_field: false,
+ full_rounded: false,
+ offset: None,
+ }),
+ Some(RadrootsAppUiListItem {
+ kind: RadrootsAppUiListItemKind::Input(RadrootsAppUiListInput {
+ field: RadrootsAppUiListInputField {
+ value: input_value.get_untracked(),
+ placeholder: Some("Add a note".to_string()),
+ disabled: false,
+ classes: None,
+ id: Some("ui-demo-note".to_string()),
+ on_input: Some(on_input),
+ },
+ line_label: Some(RadrootsAppUiListInputLineLabel {
+ value: "Note".to_string(),
+ classes: None,
+ }),
+ action: Some(RadrootsAppUiListInputAction {
+ visible: true,
+ loading: false,
+ icon: Some(RadrootsAppUiListIcon {
+ key: "plus".to_string(),
+ class: None,
+ }),
+ on_click: None,
+ }),
+ }),
+ loading: false,
+ hide_active: true,
+ hide_field: false,
+ full_rounded: false,
+ offset: None,
+ }),
+ Some(RadrootsAppUiListItem {
+ kind: RadrootsAppUiListItemKind::Select(RadrootsAppUiListSelect {
+ field: RadrootsAppUiListSelectField {
+ value: select_value.get_untracked(),
+ options: vec![
+ RadrootsAppUiListSelectOption {
+ label: "Daily".to_string(),
+ value: "daily".to_string(),
+ classes: None,
+ },
+ RadrootsAppUiListSelectOption {
+ label: "Weekly".to_string(),
+ value: "weekly".to_string(),
+ classes: None,
+ },
+ RadrootsAppUiListSelectOption {
+ label: "Never".to_string(),
+ value: "never".to_string(),
+ classes: None,
+ },
+ ],
+ disabled: false,
+ classes: None,
+ id: Some("ui-demo-sync".to_string()),
+ on_change: Some(on_select),
+ },
+ label: RadrootsAppUiListLabel {
+ left: vec![text_label("Sync Frequency")],
+ right: Vec::new(),
+ },
+ display: None,
+ end: Some(RadrootsAppUiListTouchEnd {
+ icon: RadrootsAppUiListIcon {
+ key: "chevrons-up-down".to_string(),
+ class: None,
+ },
+ on_click: None,
+ }),
+ loading: false,
+ on_click: None,
+ }),
+ loading: false,
+ hide_active: false,
+ hide_field: false,
+ full_rounded: false,
+ offset: None,
+ }),
+ ]),
+ hide_offset: false,
+ styles: Some(RadrootsAppUiListStyles {
+ hide_border_top: None,
+ hide_border_bottom: None,
+ hide_rounded: None,
+ set_title_background: Some(true),
+ set_default_background: None,
+ }),
+ };
view! {
<main style="padding: 16px;">
<div style="font: var(--type-title2); margin-bottom: 12px;">"UI Demo"</div>
- <div data-ui="list-group">
- <div data-ui="list-row">
- <div data-ui="list-row-leading">"Wi-Fi"</div>
- <div data-ui="list-row-trailing">"On"</div>
- </div>
- <div data-ui="list-row">
- <div data-ui="list-row-leading">"Bluetooth"</div>
- <div data-ui="list-row-trailing">"On"</div>
- </div>
- <div data-ui="list-row">
- <div data-ui="list-row-leading">"Notifications"</div>
- <div data-ui="list-row-trailing">"Enabled"</div>
- </div>
- </div>
+ <RadrootsAppUiListView basis=list />
<RadrootsAppUiSheetRoot
open=Some(sheet_open_read)
