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

perf: dead code

Browse source
This commit is contained in:
luoxiao 2024-06-03 11:27:29 +08:00
parent dd50d450ff
commit 01df9dfe20
11 changed files with 142 additions and 526 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
demo/src/app.rs
View file

@ -35,7 +35,7 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
view! {
<Routes>
<Route path="/" view=Home/>
<Route path="/guide" view=GuidePage>
<Route path="/guide" view=ComponentsPage>
<Route path="/installation" view=InstallationMdPage/>
<Route path="/usage" view=UsageMdPage/>
<Route path="/server-sider-rendering" view=ServerSiderRenderingMdPage/>
@ -67,10 +67,8 @@ fn TheRouter(is_routing: RwSignal<bool>) -> impl IntoView {
<Route path="/icon" view=IconMdPage/>
<Route path="/image" view=ImageMdPage/>
<Route path="/input" view=InputMdPage/>
<Route path="/input-number" view=InputNumberMdPage/>
<Route path="/layout" view=LayoutMdPage/>
<Route path="/loading-bar" view=LoadingBarMdPage/>
<Route path="/menu" view=MenuMdPage/>
<Route path="/message" view=MessageMdPage/>
<Route path="/modal" view=ModalMdPage/>
<Route path="/popover" view=PopoverMdPage/>

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

@ -76,7 +76,7 @@ pub fn SiteHeader() -> impl IntoView {
});
on_cleanup(move || handle.remove());
let menu_value = use_menu_value(change_theme);
// let menu_value = use_menu_value(change_theme);
view! {
<Style id="demo-header">
"
@ -159,40 +159,20 @@ pub fn SiteHeader() -> impl IntoView {
/>
</PopoverTrigger>
<div style="height: 70vh; overflow: auto;">
<Menu value=menu_value>
<MenuItem key=theme_name label=theme_name />
<MenuItem key="github" label="Github" />
// {
// use crate::pages::{gen_guide_menu_data, gen_menu_data};
// vec![
// gen_guide_menu_data().into_view(),
// gen_menu_data().into_view(),
// ]
// }
</Menu>
// <Menu value=menu_value>
// <MenuItem key=theme_name label=theme_name />
// <MenuItem key="github" label="Github" />
// // {
// // use crate::pages::{gen_guide_menu_data, gen_menu_data};
// // vec![
// // gen_guide_menu_data().into_view(),
// // gen_menu_data().into_view(),
// // ]
// // }
// </Menu>
</div>
</Popover>
<Space class="demo-header__right-btn" align=SpaceAlign::Center>
<Button
appearance=ButtonAppearance::Subtle
on_click=move |_| {
let navigate = use_navigate();
navigate("/guide/installation", Default::default());
}
>
"Guide"
</Button>
<Button
appearance=ButtonAppearance::Subtle
on_click=move |_| {
let navigate = use_navigate();
navigate("/components/button", Default::default());
}
>
"Components"
</Button>
<Button appearance=ButtonAppearance::Subtle on_click=Callback::new(move |_| change_theme.call(()))>
{move || theme_name.get()}
</Button>
@ -213,62 +193,57 @@ pub fn SiteHeader() -> impl IntoView {
}
fn gen_search_all_options() -> Vec<AutoCompleteOption> {
use crate::pages::{gen_guide_menu_data, gen_menu_data};
let mut options: Vec<_> = gen_menu_data()
use crate::pages::gen_menu_data;
gen_menu_data()
.into_iter()
.flat_map(|group| {
group.children.into_iter().map(|item| AutoCompleteOption {
value: format!("/components/{}", item.value),
value: item.value,
label: item.label,
})
})
.collect();
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,
})
}));
options
.collect()
}
fn use_menu_value(change_theme: Callback<()>) -> RwSignal<String> {
use crate::pages::gen_guide_menu_data;
let guide = store_value(gen_guide_menu_data());
let navigate = use_navigate();
let loaction = use_location();
let menu_value = create_rw_signal({
let mut pathname = loaction.pathname.get_untracked();
if pathname.starts_with("/components/") {
pathname.drain(12..).collect()
} else if pathname.starts_with("/guide/") {
pathname.drain(7..).collect()
} else {
String::new()
}
});
// TODO
// fn use_menu_value(change_theme: Callback<()>) -> RwSignal<String> {
// use crate::pages::gen_guide_menu_data;
// let guide = store_value(gen_guide_menu_data());
// let navigate = use_navigate();
// let loaction = use_location();
_ = menu_value.watch(move |name| {
if name == "Dark" || name == "Light" {
change_theme.call(());
return;
} else if name == "github" {
_ = window().open_with_url("http://github.com/thaw-ui/thaw");
return;
}
let pathname = loaction.pathname.get_untracked();
if guide.with_value(|menu| {
menu.iter()
.any(|group| group.children.iter().any(|item| &item.value == name))
}) {
if !pathname.eq(&format!("/guide/{name}")) {
navigate(&format!("/guide/{name}"), Default::default());
}
} else if !pathname.eq(&format!("/components/{name}")) {
navigate(&format!("/components/{name}"), Default::default());
}
});
// let menu_value = create_rw_signal({
// let mut pathname = loaction.pathname.get_untracked();
// if pathname.starts_with("/components/") {
// pathname.drain(12..).collect()
// } else if pathname.starts_with("/guide/") {
// pathname.drain(7..).collect()
// } else {
// String::new()
// }
// });
menu_value
}
// _ = menu_value.watch(move |name| {
// if name == "Dark" || name == "Light" {
// change_theme.call(());
// return;
// } else if name == "github" {
// _ = window().open_with_url("http://github.com/thaw-ui/thaw");
// return;
// }
// let pathname = loaction.pathname.get_untracked();
// if guide.with_value(|menu| {
// menu.iter()
// .any(|group| group.children.iter().any(|item| &item.value == name))
// }) {
// if !pathname.eq(&format!("/guide/{name}")) {
// navigate(&format!("/guide/{name}"), Default::default());
// }
// } else if !pathname.eq(&format!("/components/{name}")) {
// navigate(&format!("/components/{name}"), Default::default());
// }
// });
// menu_value
// }

148
demo/src/pages/components.rs
View file

@ -10,20 +10,14 @@ pub fn ComponentsPage() -> impl IntoView {
let loaction = use_location();
let select_name = create_rw_signal(String::new());
create_effect(move |_| {
let mut pathname = loaction.pathname.get();
let name = if pathname.starts_with("/components/") {
pathname.drain(12..).collect()
} else {
String::new()
};
select_name.set(name);
Effect::new(move |_| {
select_name.set(loaction.pathname.get());
});
_ = select_name.watch(move |name| {
let pathname = loaction.pathname.get_untracked();
if !pathname.eq(&format!("/components/{name}")) {
navigate(&format!("/components/{name}"), Default::default());
if &pathname != name {
navigate(name, Default::default());
}
});
view! {
@ -87,7 +81,8 @@ impl IntoView for MenuGroupOption {
{format!("{label} ({children_len})")}
</Caption1Strong>
{children.into_iter().map(|v| v.into_view()).collect_view()}
}.into_view()
}
.into_view()
}
}
@ -105,47 +100,80 @@ impl IntoView for MenuItemOption {
pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
vec![
MenuGroupOption {
label: "Getting Started".into(),
children: vec![
MenuItemOption {
value: "/guide/installation".into(),
label: "Installation".into(),
},
MenuItemOption {
value: "/guide/usage".into(),
label: "Usage".into(),
},
],
},
MenuGroupOption {
label: "Guides".into(),
children: vec![MenuItemOption {
value: "/guide/server-sider-rendering".into(),
label: "Server Sider Rendering".into(),
}],
},
MenuGroupOption {
label: "Development".into(),
children: vec![
MenuItemOption {
value: "/guide/development/guide".into(),
label: "Guide".into(),
},
MenuItemOption {
value: "/guide/development/components".into(),
label: "Components".into(),
},
],
},
MenuGroupOption {
label: "Components".into(),
children: vec![
MenuItemOption {
value: "accordion".into(),
value: "/components/accordion".into(),
label: "Accordion".into(),
},
MenuItemOption {
value: "avatar".into(),
value: "/components/avatar".into(),
label: "Avatar".into(),
},
MenuItemOption {
value: "button".into(),
value: "/components/button".into(),
label: "Button".into(),
},
MenuItemOption {
value: "card".into(),
value: "/components/card".into(),
label: "Card".into(),
},
MenuItemOption {
value: "config-provider".into(),
value: "/components/config-provider".into(),
label: "Config Provider".into(),
},
MenuItemOption {
value: "divider".into(),
value: "/components/divider".into(),
label: "Divider".into(),
},
MenuItemOption {
value: "icon".into(),
value: "/components/icon".into(),
label: "Icon".into(),
},
MenuItemOption {
value: "tag".into(),
value: "/components/tag".into(),
label: "Tag".into(),
},
MenuItemOption {
value: "typography".into(),
value: "/components/typography".into(),
label: "Typography".into(),
},
MenuItemOption {
value: "spin-button".into(),
value: "/components/spin-button".into(),
label: "Spin Button".into(),
},
],
@ -154,51 +182,47 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
label: "Data Input Components".into(),
children: vec![
MenuItemOption {
value: "auto-complete".into(),
value: "/components/auto-complete".into(),
label: "Auto Complete".into(),
},
MenuItemOption {
value: "color-picker".into(),
value: "/components/color-picker".into(),
label: "Color Picker".into(),
},
MenuItemOption {
value: "checkbox".into(),
value: "/components/checkbox".into(),
label: "Checkbox".into(),
},
MenuItemOption {
value: "date-picker".into(),
value: "/components/date-picker".into(),
label: "Date Picker".into(),
},
MenuItemOption {
value: "input".into(),
value: "/components/input".into(),
label: "Input".into(),
},
MenuItemOption {
value: "input-number".into(),
label: "Input Number".into(),
},
MenuItemOption {
value: "radio".into(),
value: "/components/radio".into(),
label: "Radio".into(),
},
MenuItemOption {
value: "select".into(),
value: "/components/select".into(),
label: "Select".into(),
},
MenuItemOption {
value: "slider".into(),
value: "/components/slider".into(),
label: "Slider".into(),
},
MenuItemOption {
value: "switch".into(),
value: "/components/switch".into(),
label: "Switch".into(),
},
MenuItemOption {
value: "time-picker".into(),
value: "/components/time-picker".into(),
label: "Time Picker".into(),
},
MenuItemOption {
value: "upload".into(),
value: "/components/upload".into(),
label: "Upload".into(),
},
],
@ -207,15 +231,15 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
label: "Data Display Components".into(),
children: vec![
MenuItemOption {
value: "calendar".into(),
value: "/components/calendar".into(),
label: "Calendar".into(),
},
MenuItemOption {
value: "image".into(),
value: "/components/image".into(),
label: "Image".into(),
},
MenuItemOption {
value: "table".into(),
value: "/components/table".into(),
label: "Table".into(),
},
],
@ -224,27 +248,23 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
label: "Navigation Components".into(),
children: vec![
MenuItemOption {
value: "anchor".into(),
value: "/components/anchor".into(),
label: "Anchor".into(),
},
MenuItemOption {
value: "back-top".into(),
value: "/components/back-top".into(),
label: "Back Top".into(),
},
MenuItemOption {
value: "breadcrumb".into(),
value: "/components/breadcrumb".into(),
label: "Breadcrumb".into(),
},
MenuItemOption {
value: "loading-bar".into(),
value: "/components/loading-bar".into(),
label: "Loading Bar".into(),
},
MenuItemOption {
value: "menu".into(),
label: "Menu".into(),
},
MenuItemOption {
value: "tabs".into(),
value: "/components/tabs".into(),
label: "Tabs".into(),
},
],
@ -253,39 +273,39 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
label: "Feedback Components".into(),
children: vec![
MenuItemOption {
value: "alert".into(),
value: "/components/alert".into(),
label: "Alert".into(),
},
MenuItemOption {
value: "badge".into(),
value: "/components/badge".into(),
label: "Badge".into(),
},
MenuItemOption {
value: "drawer".into(),
value: "/components/drawer".into(),
label: "Drawer".into(),
},
MenuItemOption {
value: "message".into(),
value: "/components/message".into(),
label: "Message".into(),
},
MenuItemOption {
value: "modal".into(),
value: "/components/modal".into(),
label: "Modal".into(),
},
MenuItemOption {
value: "popover".into(),
value: "/components/popover".into(),
label: "Popover".into(),
},
MenuItemOption {
value: "progress".into(),
value: "/components/progress".into(),
label: "Progress".into(),
},
MenuItemOption {
value: "spinner".into(),
value: "/components/spinner".into(),
label: "Spinner".into(),
},
MenuItemOption {
value: "skeleton".into(),
value: "/components/skeleton".into(),
label: "Skeleton".into(),
},
],
@ -294,15 +314,15 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
label: "Layout Components".into(),
children: vec![
MenuItemOption {
value: "layout".into(),
value: "/components/layout".into(),
label: "Layout".into(),
},
MenuItemOption {
value: "grid".into(),
value: "/components/grid".into(),
label: "Grid".into(),
},
MenuItemOption {
value: "space".into(),
value: "/components/space".into(),
label: "Space".into(),
},
],
@ -310,7 +330,7 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
MenuGroupOption {
label: "Utility Components".into(),
children: vec![MenuItemOption {
value: "scrollbar".into(),
value: "/components/scrollbar".into(),
label: "Scrollbar".into(),
}],
},
@ -318,15 +338,15 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
label: "Mobile Components".into(),
children: vec![
MenuItemOption {
value: "nav-bar".into(),
value: "/components/nav-bar".into(),
label: "Nav Bar".into(),
},
MenuItemOption {
value: "tabbar".into(),
value: "/components/tabbar".into(),
label: "Tabbar".into(),
},
MenuItemOption {
value: "toast".into(),
value: "/components/toast".into(),
label: "Toast".into(),
},
],

141
demo/src/pages/guide.rs
View file

@ -1,141 +0,0 @@
use crate::components::SiteHeader;
use leptos::*;
use leptos_meta::Style;
use leptos_router::{use_location, use_navigate, Outlet};
use thaw::*;
#[component]
pub fn GuidePage() -> impl IntoView {
let navigate = use_navigate();
let selected = create_rw_signal({
let loaction = use_location();
let mut pathname = loaction.pathname.get_untracked();
if pathname.starts_with("/guide/") {
pathname.drain(7..).collect()
} else {
String::new()
}
});
create_effect(move |value| {
let selected = selected.get();
if value.is_some() {
navigate(&format!("/guide/{selected}"), Default::default());
}
selected
});
view! {
<Style>
"
.demo-components__component {
width: 896px;
margin: 0 auto;
}
.demo-components__toc {
width: 190px;
margin: 12px 2px 12px 12px;
}
.demo-components__toc > .thaw-anchor {
position: sticky;
top: 36px;
}
.demo-md-table-box {
overflow: auto;
}
@media screen and (max-width: 1200px) {
.demo-components__toc,
.demo-guide__sider {
display: none;
}
.demo-components__component {
width: 100%;
}
}
"
</Style>
<Layout position=LayoutPosition::Absolute>
<SiteHeader/>
<Layout has_sider=true position=LayoutPosition::Absolute style="top: 64px;">
<LayoutSider class="demo-guide__sider">
<Menu value=selected>
{gen_guide_menu_data().into_view()}
</Menu>
</LayoutSider>
<Layout content_style="padding: 8px 12px 28px; display: flex;" class="doc-content">
<Outlet/>
</Layout>
</Layout>
</Layout>
}
}
pub(crate) struct MenuGroupOption {
pub label: String,
pub children: Vec<MenuItemOption>,
}
impl IntoView for MenuGroupOption {
fn into_view(self) -> View {
let Self { label, children } = self;
view! {
<MenuGroup label=label>
{children.into_iter().map(|v| v.into_view()).collect_view()}
</MenuGroup>
}
}
}
pub(crate) struct MenuItemOption {
pub label: String,
pub value: String,
}
impl IntoView for MenuItemOption {
fn into_view(self) -> View {
let Self { label, value } = self;
view! { <MenuItem key=value label/> }
}
}
pub(crate) fn gen_guide_menu_data() -> Vec<MenuGroupOption> {
vec![
MenuGroupOption {
label: "Getting Started".into(),
children: vec![
MenuItemOption {
value: "installation".into(),
label: "Installation".into(),
},
MenuItemOption {
value: "usage".into(),
label: "Usage".into(),
},
],
},
MenuGroupOption {
label: "Guides".into(),
children: vec![MenuItemOption {
value: "server-sider-rendering".into(),
label: "Server Sider Rendering".into(),
}],
},
MenuGroupOption {
label: "Development".into(),
children: vec![
MenuItemOption {
value: "development/guide".into(),
label: "Guide".into(),
},
MenuItemOption {
value: "development/components".into(),
label: "Components".into(),
},
],
},
]
}

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

@ -1,5 +1,4 @@
mod components;
mod guide;
mod home;
mod markdown;
mod mobile;
@ -8,7 +7,6 @@ mod tabbar;
mod toast;
pub use components::*;
pub use guide::*;
pub use home::*;
pub use markdown::*;
pub use mobile::*;

68
demo_markdown/docs/input_number/mod.md
View file

@ -1,68 +0,0 @@
# Input Number
```rust demo
let value = create_rw_signal(0);
let value_f64 = create_rw_signal(0.0);
view! {
<Space vertical=true>
<InputNumber value step=1/>
<InputNumber value=value_f64 step=1.0/>
</Space>
}
```
### Min / Max
```rust demo
let value = create_rw_signal(0);
view! {
<InputNumber value step=1 min=-1 max=2/>
}
```
### Disabled
```rust demo
let value = create_rw_signal(0);
view! {
<InputNumber value step=1 disabled=true/>
}
```
### Invalid
```rust demo
let value = create_rw_signal(0);
view! {
<InputNumber value step=1 invalid=true/>
}
```
### InputNumber Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the input element. |
| value | `Model<T>` | `T::default()` | Set the input value. |
| placeholder | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Placeholder of input number. |
| step | `MaybeSignal<T>` | | The number which the current value is increased or decreased on key or button press. |
| min | `MaybeSignal<T>` | `T::min_value()` | The minimum number that the input value can take. |
| max | `MaybeSignal<T>` | `T::max_value()` | The maximum number that the input value can take. |
| disabled | `MaybeSignal<bool>` | `false` | Whether the input is disabled. |
| invalid | `MaybeSignal<bool>` | `false` | Whether the input is invalid. |
| attr: | `Vec<(&'static str, Attribute)>` | `Default::default()` | The dom attrs of the input element inside the component. |
#### T impl
`T: Add<Output = T> + Sub<Output = T> + PartialOrd + num::Bounded + Default + Clone + FromStr + ToString + 'static`
### InputNumber Ref
| Name | Type | Description |
| ----- | ----------- | ------------------------ |
| focus | `Fn(&self)` | Focus the input element. |
| blur | `Fn(&self)` | Blur the input element. |

36
demo_markdown/docs/menu/mod.md
View file

@ -1,36 +0,0 @@
# Menu
```rust demo
let value = create_rw_signal(String::from("o"));
view! {
<Menu value>
<MenuItem key="a" label="and"/>
<MenuItem key="o" label="or"/>
</Menu>
}
```
### Menu Props
| Name | Type | Default | Description |
| -------- | ----------------------------------- | -------------------- | --------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the menu element. |
| value | `Model<String>` | `Default::default()` | The selected item key of the menu. |
| children | `Children` | | Menu's content. |
### MenuGroup Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the menu group element. |
| label | `String` | | The label of the menu group. |
| children | `Children` | | MenuGroup's content. |
### MenuItem Props
| Name | Type | Default | Description |
| ----- | ----------------------------------- | -------------------- | -------------------------------------------- |
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the menu item element. |
| label | `MaybeSignal<String>` | `Default::default()` | The label of the menu item. |
| key | `MaybeSignal<String>` | `Default::default()` | The indentifier of the menu item. |

2
demo_markdown/src/lib.rs
View file

@ -49,10 +49,8 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
"IconMdPage" => "../docs/icon/mod.md",
"ImageMdPage" => "../docs/image/mod.md",
"InputMdPage" => "../docs/input/mod.md",
"InputNumberMdPage" => "../docs/input_number/mod.md",
"LayoutMdPage" => "../docs/layout/mod.md",
"LoadingBarMdPage" => "../docs/loading_bar/mod.md",
"MenuMdPage" => "../docs/menu/mod.md",
"MessageMdPage" => "../docs/message/mod.md",
"ModalMdPage" => "../docs/modal/mod.md",
"PopoverMdPage" => "../docs/popover/mod.md",

121
thaw/src/input_number/mod.rs
View file

@ -1,121 +0,0 @@
use crate::{Button, ButtonAppearance, ComponentRef, Icon, Input, InputRef, InputSuffix};
use leptos::*;
use num_traits::Bounded;
use std::ops::{Add, Sub};
use std::str::FromStr;
use thaw_utils::{Model, OptionalProp, StoredMaybeSignal};
#[component]
pub fn InputNumber<T>(
#[prop(optional, into)] value: Model<T>,
#[prop(optional, into)] placeholder: OptionalProp<MaybeSignal<String>>,
#[prop(into)] step: MaybeSignal<T>,
#[prop(optional, into)] disabled: MaybeSignal<bool>,
#[prop(optional, into)] invalid: MaybeSignal<bool>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
#[prop(optional)] comp_ref: ComponentRef<InputNumberRef>,
#[prop(attrs)] attrs: Vec<(&'static str, Attribute)>,
#[prop(default = MaybeSignal::Static(T::min_value()), into)] min: MaybeSignal<T>,
#[prop(default = MaybeSignal::Static(T::max_value()), into)] max: MaybeSignal<T>,
) -> impl IntoView
where
T: Add<Output = T> + Sub<Output = T> + PartialOrd + Bounded,
T: Default + Clone + FromStr + ToString + 'static,
{
let input_value = create_rw_signal(String::default());
Effect::new_isomorphic(move |prev| {
value.with(|value| {
let value = value.to_string();
if let Some(prev) = prev {
if value == prev {
return prev;
}
}
input_value.set(value.clone());
value
})
});
let allow_value = Callback::<String, bool>::new(move |v: String| {
let Ok(v) = v.parse::<T>() else { return false };
value.set(v);
true
});
let step: StoredMaybeSignal<_> = step.into();
let min: StoredMaybeSignal<_> = min.into();
let max: StoredMaybeSignal<_> = max.into();
let add = Callback::<ev::MouseEvent>::new(move |e: ev::MouseEvent| {
e.prevent_default();
value.set(value.get_untracked() + step.get_untracked());
});
let sub = Callback::<ev::MouseEvent>::new(move |e: ev::MouseEvent| {
e.prevent_default();
value.set(value.get_untracked() - step.get_untracked());
});
let input_ref = ComponentRef::<InputRef>::new();
input_ref.on_load(move |_| {
comp_ref.load(InputNumberRef { input_ref });
});
let set_within_range = Callback::<ev::FocusEvent>::new(move |_| {
let old_value = value.get_untracked();
let min = min.get_untracked();
let max = max.get_untracked();
if old_value < min {
value.set(min);
} else if old_value > max {
value.set(max);
}
});
let minus_disabled = create_memo(move |_| disabled.get() || value.get() <= min.get());
let plus_disabled = create_memo(move |_| disabled.get() || value.get() >= max.get());
let invalid = create_memo(move |_| {
let value = value.get();
invalid.get() || value < min.get() || value > max.get()
});
view! {
<Input
attrs
class
value=input_value
allow_value
placeholder
disabled
invalid
comp_ref=input_ref
on_blur=set_within_range
>
<InputSuffix slot>
<Button disabled=minus_disabled appearance=ButtonAppearance::Transparent on_click=sub>
<Icon icon=icondata_ai::AiMinusOutlined style="font-size: 18px"/>
</Button>
<Button disabled=plus_disabled appearance=ButtonAppearance::Transparent on_click=add>
<Icon icon=icondata_ai::AiPlusOutlined style="font-size: 18px"/>
</Button>
</InputSuffix>
</Input>
}
}
#[derive(Clone)]
pub struct InputNumberRef {
input_ref: ComponentRef<InputRef>,
}
impl InputNumberRef {
pub fn focus(&self) {
if let Some(input_ref) = self.input_ref.get_untracked() {
input_ref.focus();
}
}
pub fn blur(&self) {
if let Some(input_ref) = self.input_ref.get_untracked() {
input_ref.blur();
}
}
}

4
thaw/src/lib.rs
View file

@ -20,10 +20,8 @@ mod grid;
mod icon;
mod image;
mod input;
mod input_number;
mod layout;
mod loading_bar;
mod menu;
mod message;
pub mod mobile;
mod modal;
@ -69,10 +67,8 @@ pub use grid::*;
pub use icon::*;
pub use image::*;
pub use input::*;
pub use input_number::*;
pub use layout::*;
pub use loading_bar::*;
pub use menu::*;
pub use message::*;
pub use modal::*;
pub use nav::*;

7
thaw/src/theme/mod.rs
View file

@ -5,8 +5,8 @@ use self::common::CommonTheme;
use crate::{
mobile::{NavBarTheme, TabbarTheme},
AlertTheme, AnchorTheme, AutoCompleteTheme, BackTopTheme, BreadcrumbTheme, CalendarTheme,
ColorPickerTheme, DatePickerTheme, InputTheme, MenuTheme, MessageTheme, PopoverTheme,
ProgressTheme, ScrollbarTheme, SelectTheme, SkeletionTheme, SpinnerTheme, TableTheme, TagTheme,
ColorPickerTheme, DatePickerTheme, InputTheme, MessageTheme, PopoverTheme, ProgressTheme,
ScrollbarTheme, SelectTheme, SkeletionTheme, SpinnerTheme, TableTheme, TagTheme,
TimePickerTheme, UploadTheme,
};
pub use color::ColorTheme;
@ -23,7 +23,6 @@ pub struct Theme {
pub common: CommonTheme,
pub color: ColorTheme,
pub input: InputTheme,
pub menu: MenuTheme,
pub table: TableTheme,
pub alert: AlertTheme,
pub skeletion: SkeletionTheme,
@ -54,7 +53,6 @@ impl Theme {
common: CommonTheme::light(),
color: ColorTheme::light(),
input: InputTheme::light(),
menu: MenuTheme::light(),
table: TableTheme::light(),
alert: AlertTheme::light(),
skeletion: SkeletionTheme::light(),
@ -84,7 +82,6 @@ impl Theme {
common: CommonTheme::dark(),
color: ColorTheme::dark(),
input: InputTheme::dark(),
menu: MenuTheme::dark(),
table: TableTheme::dark(),
alert: AlertTheme::dark(),
skeletion: SkeletionTheme::dark(),