adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-23 06:19:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #20 from thaw-ui/docs/demo

Browse source 
Docs/demo
This commit is contained in:
luoxiaozero 2023-11-16 20:02:33 +08:00 • committed by GitHub
commit e74923b036
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 481 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
demo/Trunk.toml
View file

@ -2,12 +2,10 @@
target = "index.html"
public_url = "/thaw/"
# release = true
filehash = false
[watch]
watch = [
"../src",
"./src"
]
watch = ["../src", "./src"]
[serve]
address = "127.0.0.1"

1
demo/index.html
View file

@ -13,6 +13,7 @@
<link data-trunk rel="css" href="./src/assets/css/index.css" />
<link data-trunk rel="copy-file" href="./src/assets/svg/grid_dot.svg" />
<link data-trunk rel="copy-file" href="./src/assets/favicon.ico" />
<link data-trunk rel="copy-file" href="./src/assets/404.html" />
<link data-trunk rel="copy-file" href="../logo.svg" />
</head>
<body></body>

30
demo/src/assets/404.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Thaw UI</title>
<link
rel="shortcut icon"
href="/thaw/favicon.ico"
type="image/x-icon"
/>
<link rel="stylesheet" href="/thaw/index.css" />
<link
rel="preload"
href="/thaw/demo_bg.wasm"
as="fetch"
type="application/wasm"
crossorigin=""
/>
<link rel="modulepreload" href="/thaw/demo.js" />
</head>
<body>
<script type="module">
import init from "/thaw/demo.js";
init("/thaw/demo_bg.wasm");
</script>
</body>
</html>

25
demo/src/components/site_header.rs
View file

@ -7,7 +7,7 @@ pub fn SiteHeader() -> impl IntoView {
let theme = use_rw_theme();
let theme_name = create_memo(move |_| {
theme.with(|theme| {
if theme.name == "light".to_string() {
if theme.name == *"light" {
"Dark"
} else {
"Light"
@ -46,10 +46,7 @@ pub fn SiteHeader() -> impl IntoView {
match_value(pattern, value.split_at(1).1.to_string())
}
search_all_options.with_value(|options| {
let search_value = search_value
.to_lowercase()
.replace(" ", "")
.replace("-", "");
let search_value = search_value.to_lowercase().replace([' ', '-'], "");
let search_value = if search_value.len() > 20 {
search_value.split_at(20).0
} else {
@ -58,11 +55,7 @@ pub fn SiteHeader() -> impl IntoView {
options
.iter()
.filter(|option| {
let label = option
.label
.to_lowercase()
.replace(" ", "")
.replace("-", "");
let label = option.label.to_lowercase().replace([' ', '-'], "");
match_value(search_value, label)
})
.cloned()
@ -140,24 +133,18 @@ fn gen_search_all_options() -> Vec<AutoCompleteOption> {
use crate::pages::{gen_guide_menu_data, gen_menu_data};
let mut options: Vec<_> = gen_menu_data()
.into_iter()
.map(|group| {
.flat_map(|group| {
group.children.into_iter().map(|item| AutoCompleteOption {
value: format!("/components/{}", item.value),
label: item.label,
})
})
.flatten()
.collect();
options.extend(
gen_guide_menu_data()
.into_iter()
.map(|group| {
options.extend(gen_guide_menu_data().into_iter().flat_map(|group| {
group.children.into_iter().map(|item| AutoCompleteOption {
value: format!("/guide/{}", item.value),
label: item.label,
})
})
.flatten(),
);
}));
options
}

2
demo/src/pages/alert/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn AlertPage() -> impl IntoView {

2
demo/src/pages/auto_complete/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn AutoCompletePage() -> impl IntoView {

37
demo/src/pages/layout/mod.rs
View file

@ -94,43 +94,6 @@ pub fn LayoutPage() -> impl IntoView {
</tr>
</tbody>
</Table>
<h3>"Layout Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"style"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Layout's style."</td>
</tr>
<tr>
<td>"position"</td>
<td>"LayoutPosition"</td>
<td>"LayoutPosition::Static"</td>
<td>"static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect."</td>
</tr>
<tr>
<td>"has_sider"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Whether the component has sider inside. If so it must be true."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Layout's content."</td>
</tr>
</tbody>
</Table>
<h3>"LayoutHeader, LayoutSider Props"</h3>
<Table single_column=true>
<thead>

6
demo/src/pages/loading_bar/mod.rs
View file

@ -69,17 +69,17 @@ pub fn LoadingBarPage() -> impl IntoView {
<tbody>
<tr>
<td>"start"</td>
<th>"fn(&self)"</th>
<td>"fn(&self)"</td>
<td>"Callback function for loading bar to start loading."</td>
</tr>
<tr>
<td>"finish"</td>
<th>"fn(&self)"</th>
<td>"fn(&self)"</td>
<td>"The callback function when the loading bar finishes loading."</td>
</tr>
<tr>
<td>"error"</td>
<th>"fn(&self)"</th>
<td>"fn(&self)"</td>
<td>"Callback function for loading bar error."</td>
</tr>
</tbody>

20
demo/src/pages/progress/mod.rs
View file

@ -14,9 +14,9 @@ pub fn ProgressPage() -> impl IntoView {
<Progress percentage show_indicator=false/>
<Progress percentage />
<Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
<Progress percentage variant=ProgressVariant::Success/>
<Progress percentage variant=ProgressVariant::Warning/>
<Progress percentage variant=ProgressVariant::Error/>
<Progress percentage color=ProgressColor::Success/>
<Progress percentage color=ProgressColor::Warning/>
<Progress percentage color=ProgressColor::Error/>
<Space>
<Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
"-10%"
@ -37,9 +37,9 @@ pub fn ProgressPage() -> impl IntoView {
<Progress percentage show_indicator=false/>
<Progress percentage />
<Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
<Progress percentage variant=ProgressVariant::Success/>
<Progress percentage variant=ProgressVariant::Warning/>
<Progress percentage variant=ProgressVariant::Error/>
<Progress percentage color=ProgressColor::Success/>
<Progress percentage color=ProgressColor::Warning/>
<Progress percentage color=ProgressColor::Error/>
<Space>
<Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
"-10%"
@ -76,10 +76,10 @@ pub fn ProgressPage() -> impl IntoView {
<td>"Percentage value."</td>
</tr>
<tr>
<td>"variant"</td>
<td>"MaybeSignal<ProgressVariant>"</td>
<td>"ProgressVariant::Primary"</td>
<td>"Progress variant."</td>
<td>"color"</td>
<td>"MaybeSignal<ProgressColor>"</td>
<td>"ProgressColor::Primary"</td>
<td>"Progress color."</td>
</tr>
<tr>
<td>"show_indicator"</td>

27
demo/src/pages/radio/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn RadioPage() -> impl IntoView {
@ -30,6 +30,31 @@ pub fn RadioPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Radio Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"value"</td>
<td>"RwSignal<bool>"</td>
<td>"false"</td>
<td>"Checked value."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Radio's content."</td>
</tr>
</tbody>
</Table>
</div>
}
}

27
demo/src/pages/select/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn SelectPage() -> impl IntoView {
@ -35,6 +35,31 @@ pub fn SelectPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Select Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"value"</td>
<td>"RwSignal<Option<T>>"</td>
<td>"None"</td>
<td>"Checked value."</td>
</tr>
<tr>
<td>"options"</td>
<td>"MaybeSignal<Vec<SelectOption<T>>>"</td>
<td>"vec![]"</td>
<td>"Options that can be selected."</td>
</tr>
</tbody>
</Table>
</div>
}
}

39
demo/src/pages/skeleton/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn SkeletonPage() -> impl IntoView {
@ -25,6 +25,43 @@ pub fn SkeletonPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Skeleton Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"repeat"</td>
<td>"MaybeSignal<u32>"</td>
<td>"1"</td>
<td>"Repeat frequency."</td>
</tr>
<tr>
<td>"text"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Text skeleton."</td>
</tr>
<tr>
<td>"width"</td>
<td>"Option<MaybeSignal<String>>"</td>
<td>"None"</td>
<td>"Skeleton width."</td>
</tr>
<tr>
<td>"height"</td>
<td>"Option<MaybeSignal<String>>"</td>
<td>"None"</td>
<td>"Text skeleton."</td>
</tr>
</tbody>
</Table>
</div>
}
}

27
demo/src/pages/slider/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn SliderPage() -> impl IntoView {
@ -27,6 +27,31 @@ pub fn SliderPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Slider Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"value"</td>
<td>"RwSignal<f64>"</td>
<td>"0"</td>
<td>"Value of the slider."</td>
</tr>
<tr>
<td>"max"</td>
<td>"MaybeSignal<f64>"</td>
<td>"100"</td>
<td>"Max value of the slider."</td>
</tr>
</tbody>
</Table>
</div>
}
}

33
demo/src/pages/space/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn SpacePage() -> impl IntoView {
@ -89,6 +89,37 @@ pub fn SpacePage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Space Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"gap"</td>
<td>"SpaceGap"</td>
<td>"SpaceGap::Medium"</td>
<td>"Space's gap."</td>
</tr>
<tr>
<td>"vertical"</td>
<td>"MaybeSignal<f64>"</td>
<td>"false"</td>
<td>"Whether to lay out vertically."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Space's content."</td>
</tr>
</tbody>
</Table>
</div>
}
}

21
demo/src/pages/switch/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn SwitchPage() -> impl IntoView {
@ -27,6 +27,25 @@ pub fn SwitchPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Swith Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"value"</td>
<td>"RwSignal<bool>"</td>
<td>"false"</td>
<td>"Swith's value."</td>
</tr>
</tbody>
</Table>
</div>
}
}

58
demo/src/pages/tabbar/mod.rs
View file

@ -3,8 +3,8 @@ use crate::{
pages::MobilePage,
};
use leptos::*;
use thaw::mobile::*;
use prisms::highlight_str;
use thaw::{mobile::*, Table};
#[component]
pub fn TabbarPage() -> impl IntoView {
@ -39,6 +39,62 @@ pub fn TabbarPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Tabbar Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"value"</td>
<td>"RwSignal<String>"</td>
<td>r#""""#</td>
<td>"Tabbar's value."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Tabbar's content."</td>
</tr>
</tbody>
</Table>
<h3>"TabbarItem Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"key"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"The indentifier of the tabbar item."</td>
</tr>
<tr>
<td>"icon"</td>
<td>"Option<Icon>"</td>
<td>"None"</td>
<td>"TabbarItem's icon."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"TabbarItem's content."</td>
</tr>
</tbody>
</Table>
</div>
<div>
<MobilePage path="/thaw?path=/mobile/tabbar"/>

14
demo/src/pages/table/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn TablePage() -> impl IntoView {
@ -86,6 +86,18 @@ pub fn TablePage() -> impl IntoView {
<td>"false"</td>
<td>""</td>
</tr>
<tr>
<td>"style"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Table's style."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Table's content."</td>
</tr>
</tbody>
</Table>
</div>

58
demo/src/pages/tabs/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn TabsPage() -> impl IntoView {
@ -39,6 +39,62 @@ pub fn TabsPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Tabs Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"value"</td>
<td>"RwSignal<String>"</td>
<td>r#""""#</td>
<td>"Tabs value."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Tabs content."</td>
</tr>
</tbody>
</Table>
<h3>"Tab Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"key"</td>
<td>"String"</td>
<td></td>
<td>"The indentifier of the tab."</td>
</tr>
<tr>
<td>"label"</td>
<td>"String"</td>
<td></td>
<td>"The label of the tab."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Tab's content."</td>
</tr>
</tbody>
</Table>
</div>
}
}

27
demo/src/pages/tag/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn TagPage() -> impl IntoView {
@ -49,6 +49,31 @@ pub fn TagPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Tag Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"variant"</td>
<td>"MaybeSignal<TagVariant>"</td>
<td>"TagVariant::Default"</td>
<td>"Tag's variant."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Tag's content."</td>
</tr>
</tbody>
</Table>
</div>
}
}

43
demo/src/pages/toast/mod.rs
View file

@ -3,10 +3,10 @@ use crate::{
pages::MobilePage,
};
use leptos::*;
use thaw::mobile::*;
use thaw::*;
use prisms::highlight_str;
use std::time::Duration;
use thaw::mobile::*;
use thaw::*;
#[component]
pub fn ToastPage() -> impl IntoView {
@ -36,6 +36,45 @@ pub fn ToastPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Toast Methods"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"show_toast"</td>
<td>"fn(options: ToastOptions))"</td>
<td>"Show toast."</td>
</tr>
</tbody>
</Table>
<h3>"ToastOptions Properties"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"message"</td>
<td>"String"</td>
<td>"message."</td>
</tr>
<tr>
<td>"duration"</td>
<td>"std::time::Duration"</td>
<td>"show duration."</td>
</tr>
</tbody>
</Table>
</div>
<div>
<MobilePage path="/thaw?path=/mobile/toast"/>

58
demo/src/pages/upload/mod.rs
View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn UploadPage() -> impl IntoView {
@ -83,6 +83,62 @@ pub fn UploadPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Upload Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"accept"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"The accept type of upload."</td>
</tr>
<tr>
<td>"multiple"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Allow multiple files to be selected."</td>
</tr>
<tr>
<td>"custom_request"</td>
<td>"Option<Callback<FileList, ()>>"</td>
<td>r#""""#</td>
<td>"Customize upload request."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Upload's content."</td>
</tr>
</tbody>
</Table>
<h3>"UploadDragger Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"UploadDragger's content."</td>
</tr>
</tbody>
</Table>
</div>
}
}

8
src/progress/mod.rs
View file

@ -23,7 +23,7 @@ impl ProgressIndicatorPlacement {
}
#[derive(Default, Clone)]
pub enum ProgressVariant {
pub enum ProgressColor {
#[default]
Primary,
Success,
@ -31,7 +31,7 @@ pub enum ProgressVariant {
Error,
}
impl ProgressVariant {
impl ProgressColor {
fn theme_background_color(&self, theme: &Theme) -> String {
match self {
Self::Primary => theme.common.color_primary.clone(),
@ -45,7 +45,7 @@ impl ProgressVariant {
#[component]
pub fn Progress(
#[prop(into, optional)] percentage: MaybeSignal<f32>,
#[prop(into, optional)] variant: MaybeSignal<ProgressVariant>,
#[prop(into, optional)] color: MaybeSignal<ProgressColor>,
#[prop(into, default = MaybeSignal::Static(true))] show_indicator: MaybeSignal<bool>,
#[prop(into, optional)] indicator_placement: MaybeSignal<ProgressIndicatorPlacement>,
) -> impl IntoView {
@ -60,7 +60,7 @@ pub fn Progress(
));
css_vars.push_str(&format!(
"--thaw-inner-background-color: {};",
variant.get().theme_background_color(theme)
color.get().theme_background_color(theme)
));
});
css_vars