Thaw/v0.2

.github/workflows/ci.yml

@@ -1,9 +1,14 @@
 name: CI
 on:
+    workflow_dispatch:
     pull_request:
         paths: ["demo/**", "demo_markdown/**", "thaw/**"]
         branches:
             - main
+    push:
+        paths: ["demo/**", "demo_markdown/**", "thaw/**"]
+        branches:
+            - thaw/v0.2
 
 jobs:
     stable:
@@ -62,8 +67,11 @@ jobs:
               uses: jetli/[email protected]
               with:
                   version: "latest"
+            - name: Install Cargo BInstall
+              uses: cargo-bins/cargo-binstall@main
+            - name: Install Cargo Leptos
+              run: cargo binstall cargo-leptos -y
             - name: Build
               run: |
                   cd ./examples/ssr_axum
-                  cargo install --locked cargo-leptos
                   cargo leptos build --release

CHANGELOG.md

@@ -1,3 +1,30 @@
+## [0.2.0-beta](https://github.com/thaw-ui/thaw/compare/v0.2.0-alpha...v0.2.0-beta) (2024-02-07)
+
+### Breaking Changes
+
+* `ColorPicker` changes the value type to Color.
+* Remove re-export of chrono.
+
+### Features
+
+* `Drawer` adds z_index and mount prop.
+
+## [0.2.0-alpha](https://github.com/thaw-ui/thaw/compare/v0.1.10...v0.2.0-alpha) (2024-02-01)
+
+### Breaking Changes
+
+* Remove the default feature of csr.
+* `ButtonVariant::Solid` is changed to `ButtonVariant::Outlined`.
+* Change icondata to icondata_core.
+* Rewrite `Code` component.
+* Update leptos to v0.6.5.
+
+### Features
+
+* Change `RwSignal` to `Model`.
+* Change `#[prop(optional)] T` to `#[prop(optional)] OptionalProp<T>`.
+* `Checkbox` children can be empty.
+
 ## [0.1.10](https://github.com/thaw-ui/thaw/compare/v0.1.9...v0.1.10) (2024-01-31)
 
 ### Features

demo/Cargo.toml

@@ -7,20 +7,15 @@ edition = "2021"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-leptos = { version = "0.5.7" }
-leptos_meta = { version = "0.5.7" }
-leptos_router = { version = "0.5.7" }
-leptos_devtools = { version = "0.0.1", optional = true}
-thaw = { path = "../thaw", default-features = false }
-icondata = { version = "0.1.0", features = [
-    "AiCloseOutlined",
-    "AiCheckOutlined",
-    "AiGithubOutlined",
-    "AiUserOutlined",
-    "AiSearchOutlined",
-    "AiUnorderedListOutlined"
-] }
+leptos = { version = "0.6.5" }
+leptos_meta = { version = "0.6.5" }
+leptos_router = { version = "0.6.5" }
+leptos_devtools = { version = "0.0.1", optional = true }
+thaw = { path = "../thaw" }
 demo_markdown = { path = "../demo_markdown" }
+icondata = "0.3.0"
+palette = "0.7.4"
+chrono = "0.4.33"
 
 [features]
 default = ["csr"]
@@ -41,4 +36,4 @@ nightly = ["leptos/nightly", "leptos_meta/nightly", "leptos_router/nightly"]
 opt-level = 1
 
 [profile.dev.package."*"]
-opt-level = 3
+opt-level = 3

demo/src/components/demo.rs

@@ -42,7 +42,7 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
     let content_class = create_memo(move |_| {
         theme.with(|theme| {
             format!(
-                "thaw-demo__content color-scheme--{}",
+                "color-scheme--{}",
                 theme.common.color_scheme
             )
         })
@@ -66,21 +66,17 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
         </Style>
         <div style=move || style.get()>{children()}</div>
         <div style=move || code_style.get() class=move || content_class.get()>
-            <Code>
                 {
                     if is_highlight {
                         view! {
-                            <pre style="margin: 0" inner_html=html></pre>
+                            <Code inner_html=html />
                         }
                     } else {
                         view! {
-                            <pre style="margin: 0">
-                                {html}
-                            </pre>
+                            <Code text=html />
                         }
                     }
                 }
-            </Code>
         </div>
     }
 }

demo/src/components/site_header.rs

@@ -141,14 +141,14 @@ pub fn SiteHeader() -> impl IntoView {
                     comp_ref=auto_complete_ref
                 >
                     <AutoCompletePrefix slot>
-                        <Icon icon=icondata::Icon::from(icondata::AiIcon::AiSearchOutlined) style="font-size: 18px; color: var(--thaw-placeholder-color);"/>
+                        <Icon icon=icondata::AiSearchOutlined style="font-size: 18px; color: var(--thaw-placeholder-color);"/>
                     </AutoCompletePrefix>
                 </AutoComplete>
                 <Popover placement=PopoverPlacement::BottomEnd class="demo-header__menu-popover-mobile">
                     <PopoverTrigger slot class="demo-header__menu-mobile">
                         <Button
                             variant=ButtonVariant::Text
-                            icon=icondata::AiIcon::AiUnorderedListOutlined
+                            icon=icondata::AiUnorderedListOutlined
                             style="font-size: 22px; padding: 0px 6px;"
                         />
                     </PopoverTrigger>
@@ -192,7 +192,7 @@ pub fn SiteHeader() -> impl IntoView {
                     </Button>
                     <Button
                         variant=ButtonVariant::Text
-                        icon=icondata::AiIcon::AiGithubOutlined
+                        icon=icondata::AiGithubOutlined
                         round=true
                         style="font-size: 22px; padding: 0px 6px;"
                         on_click=move |_| {

demo/src/components/syntect-css.css

@@ -1,8 +1,3 @@
-.thaw-demo__content pre {
-    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
-        Liberation Mono, monospace;
-}
-
 /** https://github.com/AmjadHD/sublime_one_theme */
 
 /** light */

demo/src/pages/nav_bar/mod.rs

@@ -4,6 +4,7 @@ use leptos::*;
 use thaw::mobile::{NavBar, NavBarRight};
 use thaw::Icon;
 
+
 #[component]
 pub fn NavBarPage() -> impl IntoView {
     view! {
@@ -32,7 +33,7 @@ pub fn NavBarDemoPage() -> impl IntoView {
                 on_click_right=on_click_right
             >
                 <NavBarRight slot>
-                     <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined)/>
+                     <Icon icon=icondata::AiCloseOutlined/>
                 </NavBarRight>
             </NavBar>
             <div style="padding-top: 50px">{move || click_text.get()}</div>

demo/src/pages/tabbar/mod.rs

@@ -23,7 +23,7 @@ pub fn TabbarDemoPage() -> impl IntoView {
             {move || value.get()} <Tabbar value>
                 <TabbarItem key="a">"and"</TabbarItem>
                 <TabbarItem key="i">"if"</TabbarItem>
-                <TabbarItem key="o" icon=icondata::AiIcon::AiCloseOutlined>
+                <TabbarItem key="o" icon=icondata::AiCloseOutlined>
                     "or"
                 </TabbarItem>
             </Tabbar>

demo_markdown/Cargo.toml

@@ -10,8 +10,8 @@ edition = "2021"
 proc-macro = true
 
 [dependencies]
-quote = "1.0.33"
-comrak = "0.20.0"
-proc-macro2 = "1.0.71"
-syn = "2.0.43"
+quote = "1.0.35"
+comrak = "0.21.0"
+proc-macro2 = "1.0.78"
+syn = "2.0.48"
 syntect = "5.1.0"

demo_markdown/docs/_guide/installation.md

@@ -3,5 +3,5 @@
 Installation thaw
 
 ```shell
-cargo add thaw
+cargo add thaw --features=csr
 ```

demo_markdown/docs/_guide/server_sider_rendering.md

@@ -3,11 +3,11 @@
 To enable the ssr mode, the following configurations are required:
 
 ```toml
-thaw = { ..., default-features = false, features = ["ssr"] }
+thaw = { ..., features = ["ssr"] }
 ```
 
 To enable the hydrate mode, the following configurations are required:
 
 ```toml
-thaw = { ..., default-features = false, features = ["hydrate"] }
+thaw = { ..., features = ["hydrate"] }
 ```

demo_markdown/docs/_mobile/nav_bar/mod.md

@@ -17,7 +17,7 @@ view! {
             on_click_right=on_click_right
         >
             <NavBarRight slot>
-                 <Icon icon=icondata::Icon::from(icondata::AiIcon::AiCloseOutlined)/> 
+                 <Icon icon=icondata::AiCloseOutlined/>
             </NavBarRight>
         </NavBar>
         <div style="padding-top: 50px">{move || click_text.get()}</div>
@@ -29,16 +29,16 @@ view! {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the NavBar element. |
+| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the NavBar element. |
 | title | `MaybeSignal<String>` | `Default::default()` | NavBar title. |
 | left_arrow | `MaybeSignal<bool>` | `false` | Whether to show left arrow. |
-| left_text | `MaybeSignal<String>` | `Default::default()` | NavBar left text. |
+| left_text | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | NavBar left text. |
 | on_click_left | `Option<Callback<ev::MouseEvent>>` | `Default::default()` | NavBar left click. |
-| right_text | `MaybeSignal<String>` | `Default::default()` | NavBar right text. |
+| right_text | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | NavBar right text. |
 | on_click_right | `Option<Callback<ev::MouseEvent>>` | `Default::default()` | NavBar right click. |
 
 ### NavBarLeft and NavBarRight Props
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the element. |
+| Name  | Type                                | Default              | Description                        |
+| ----- | ----------------------------------- | -------------------- | ---------------------------------- |
+| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the element. |

demo_markdown/docs/_mobile/tabbar/mod.md

@@ -11,7 +11,7 @@ view! {
         <Tabbar value>
             <TabbarItem key="a">"and"</TabbarItem>
             <TabbarItem key="i">"if"</TabbarItem>
-            <TabbarItem key="o" icon=icondata::AiIcon::AiCloseOutlined>
+            <TabbarItem key="o" icon=icondata::AiCloseOutlined>
                 "or"
             </TabbarItem>
         </Tabbar>
@@ -21,10 +21,10 @@ view! {
 
 ### Tabbar Props
 
-| Name     | Type               | Default              | Description       |
-| -------- | ------------------ | -------------------- | ----------------- |
-| value    | `RwSignal<String>` | `Default::default()` | Tabbar's value.   |
-| children | `Children`         |                      | Tabbar's content. |
+| Name     | Type            | Default              | Description       |
+| -------- | --------------- | -------------------- | ----------------- |
+| value    | `Model<String>` | `Default::default()` | Tabbar's value.   |
+| children | `Children`      |                      | Tabbar's content. |
 
 ### TabbarItem Props
 

demo_markdown/docs/alert/mod.md

@@ -18,9 +18,9 @@ view! {
 
 ### Alert Props
 
-| Name     | Type                        | Default              | Description                               |
-| -------- | --------------------------- | -------------------- | ----------------------------------------- |
-| class    | `MaybeSignal<String>`       | `Default::default()` | Additional classes for the alert element. |
-| title    | `MaybeSignal<String>`       | `Default::default()` | Title of the alert.                       |
-| variant  | `MaybeSignal<AlertVariant>` |                      | Alert variant.                            |
-| children | `Children`                  |                      | The content of the alert.                 |
+| Name     | Type                                | Default              | Description                               |
+| -------- | ----------------------------------- | -------------------- | ----------------------------------------- |
+| class    | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes for the alert element. |
+| title    | `Option<MaybeSignal<String>>`       | `Default::default()` | Title of the alert.                       |
+| variant  | `MaybeSignal<AlertVariant>`         |                      | Alert variant.                            |
+| children | `Children`                          |                      | The content of the alert.                 |

demo_markdown/docs/auto_complete/mod.md

@@ -44,12 +44,12 @@ view! {
     <Space vertical=true>
         <AutoComplete>
             <AutoCompletePrefix slot>
-                <Icon icon=icondata::Icon::from(icondata::AiIcon::AiUserOutlined)/>
+                <Icon icon=icondata::AiUserOutlined/>
             </AutoCompletePrefix>
         </AutoComplete>
         <AutoComplete>
             <AutoCompleteSuffix slot>
-                <Icon icon=icondata::Icon::from(icondata::AiIcon::AiGithubOutlined)/>
+                <Icon icon=icondata::AiGithubOutlined/>
             </AutoCompleteSuffix>
         </AutoComplete>
     </Space>
@@ -60,9 +60,9 @@ view! {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| class | `MaybeSignal<String>` | `Default::default()` | Additional classes for the autocomplete element. |
-| value | `RwSignal<String>` | `Default::default()` | Input of autocomplete. |
-| placeholder | `RwSignal<String>` | `Default::default()` | Autocomplete's placeholder. |
+| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Additional classes for the autocomplete element. |
+| value | `Model<String>` | `Default::default()` | Input of autocomplete. |
+| placeholder | `OptionalProp<RwSignal<String>>` | `Default::default()` | Autocomplete's placeholder. |
 | options | `MaybeSignal<Vec<AutoCompleteOption>>` | `Default::default()` | Options to autocomplete from. |
 | disabled | `MaybeSignal<bool>` | `false` | Whether the input is disabled. |
 | invalid | `MaybeSignal<bool>` | `false` | Whether the input is invalid. |

demo_markdown/docs/avatar/mod.md

@@ -12,9 +12,9 @@ view! {
 
 ### Avatar Props
 
-| Name  | Type                  | Default              | Description                               |
-| ----- | --------------------- | -------------------- | ----------------------------------------- |
-| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the avatar element. |
-| src   | `MaybeSignal<String>` | `Default::default()` | Avatar's image source.                    |
-| round | `MaybeSignal<bool>`   | `false`              | Whether to display a rounded avatar.      |
-| size  | `MaybeSignal<u16>`    | `30`                 | Avatar's size.                            |
+| Name  | Type                                | Default              | Description                               |
+| ----- | ----------------------------------- | -------------------- | ----------------------------------------- |
+| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the avatar element. |
+| src   | `Option<MaybeSignal<String>>`       | `Default::default()` | Avatar's image source.                    |
+| round | `MaybeSignal<bool>`                 | `false`              | Whether to display a rounded avatar.      |
+| size  | `MaybeSignal<u16>`                  | `30`                 | Avatar's size.                            |

demo_markdown/docs/badge/mod.md

@@ -36,7 +36,7 @@ view! {
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the badge element. |
+| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the badge element. |
 | value | `MaybeSignal<u32>` | `0` | Badge's value. |
 | max | `MaybeSignal<u32>` | `u32::MAX` | The maximum number of the badge when its value overflows. |
 | variant | `MaybeSignal<BadgeVariant>` | `BadgeVariant::Error` | Badge variant. |

demo_markdown/docs/breadcrumb/mod.md

@@ -24,15 +24,15 @@ view! {
 
 ### Breadcrumb Props
 
-| Name      | Type                  | Default              | Description                                   |
-| --------- | --------------------- | -------------------- | --------------------------------------------- |
-| class     | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the breadcrumb element. |
-| separator | `MaybeSignal<String>` | `/`                  | Breadcrumb separator.                         |
-| children  | `Children`            |                      | Breadcrumb's content.                         |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the breadcrumb element. |
+| separator | `MaybeSignal<String>` | `/` | Breadcrumb separator. |
+| children | `Children` |  | Breadcrumb's content. |
 
 ### BreadcrumbItem Props
 
-| Name     | Type                  | Default              | Description                                        |
-| -------- | --------------------- | -------------------- | -------------------------------------------------- |
-| class    | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the breadcrumb link element. |
-| children | `Children`            |                      | BreadcrumbItem's content.                          |
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the breadcrumb link element. |
+| children | `Children` |  | BreadcrumbItem's content. |