mirror of
https://github.com/adoyle0/leptos-use.git
synced 2025-01-22 16:49:22 -05:00
fixed example builds,
use_scroll demo finished, docs cosmetics
This commit is contained in:
Maccesch
parent
201df27f3a
commit
bd5d4ee3ff
23 changed files with 600 additions and 50 deletions
|
|
@ -17,4 +17,7 @@ leptos = "0.3"
|
|||
web-sys = { version = "0.3", features = ["ScrollToOptions", "ScrollBehavior", "CssStyleDeclaration"] }
|
||||
wasm-bindgen = "0.2"
|
||||
js-sys = "0.3"
|
||||
default-struct-builder = "0.1"
|
||||
default-struct-builder = "0.1"
|
||||
|
||||
[features]
|
||||
docs = []
|
||||
|
|
@ -30,9 +30,9 @@ def build_and_copy_demo(category, md_name):
|
|||
dirs_exist_ok=True)
|
||||
|
||||
with open(os.path.join(target_path, "index.html"), "r") as f:
|
||||
html = f.read().replace("./demo", f"./{name}/demo")
|
||||
head = html.split("<head>")[1].split("</head>")[0]
|
||||
body = html.split("<body>")[1].split("</body>")[0]
|
||||
html = f.read().replace("/demo", f"./{name}/demo")
|
||||
demo_head = html.split("<head>")[1].split("</head>")[0]
|
||||
demo_body = html.split("<body>")[1].split("</body>")[0]
|
||||
|
||||
book_html_path = os.path.join("book", category, f"{name}.html")
|
||||
with open(book_html_path, "r") as f:
|
||||
|
|
@ -46,11 +46,11 @@ def build_and_copy_demo(category, md_name):
|
|||
f.write(
|
||||
f"""{head_split[0]}
|
||||
<head>
|
||||
{head}
|
||||
{demo_head}
|
||||
{target_head}
|
||||
</head>
|
||||
<body>
|
||||
{body}
|
||||
{demo_body}
|
||||
{target_body}
|
||||
</body>
|
||||
{body_split[1]}""")
|
||||
|
|
|
|||
|
|
@ -1,5 +1,20 @@
|
|||
:root {
|
||||
--brand-color: #EF3939;
|
||||
--brand-color-dark: #9c2525;
|
||||
--background-color: #ffffff;
|
||||
--text-color: #856464;
|
||||
--devider-light-color: #bbb;
|
||||
}
|
||||
|
||||
.light {
|
||||
--fg: #333;
|
||||
--links: #c42f2f;
|
||||
--sidebar-active: var(--links);
|
||||
}
|
||||
|
||||
.coal {
|
||||
--links: #ee6f6f;
|
||||
--sidebar-active: var(--links);
|
||||
}
|
||||
|
||||
pre > code {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,3 @@
|
|||
:root {
|
||||
--brand-color: #EF3939;
|
||||
--brand-color-dark: #9c2525;
|
||||
}
|
||||
|
||||
.demo-container {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -29,6 +24,8 @@
|
|||
|
||||
.ayu .demo-container, .navy .demo-container, .coal .demo-container {
|
||||
background-color: #1d1f21;
|
||||
--background-color: #1d1f21;
|
||||
--text-color: #aaaaaa;
|
||||
}
|
||||
|
||||
.demo-container button {
|
||||
|
|
@ -63,4 +60,17 @@
|
|||
.demo-container .note {
|
||||
opacity: 0.7;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.demo-container input[type="text"], .demo-container input[type="search"], .demo-container input[type="number"] {
|
||||
display: block;
|
||||
font-size: 90%;
|
||||
padding: .5em 1em .4em;
|
||||
border: 1px solid var(--divider-light-color);
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
background: var(--background-color);
|
||||
color: var(--text-color);
|
||||
min-width: 20rem;
|
||||
margin: .5rem 0;
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ leptos = "0.3"
|
|||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
leptos-use = { path = "../.." }
|
||||
leptos-use = { path = "../..", features = ["docs"] }
|
||||
web-sys = "0.3"
|
||||
|
||||
[dev-dependencies]
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
[build]
|
||||
public_url = "./demo/"
|
||||
public_url = "/demo/"
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
use leptos::*;
|
||||
use leptos_use::use_debounce_fn_with_options;
|
||||
use leptos_use::utils::{demo_or_body, DebounceOptions};
|
||||
use leptos_use::docs::demo_or_body;
|
||||
use leptos_use::{use_debounce_fn_with_options, DebounceOptions};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
|
|
@ -10,9 +10,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
|||
let debounced_fn = use_debounce_fn_with_options(
|
||||
move || set_debounced_count(debounced_count() + 1),
|
||||
1000.0,
|
||||
DebounceOptions {
|
||||
max_wait: Some(5000.0),
|
||||
},
|
||||
DebounceOptions::default().max_wait(Some(5000.0)),
|
||||
);
|
||||
|
||||
view! { cx,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ leptos = "0.3"
|
|||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
leptos-use = { path = "../.." }
|
||||
leptos-use = { path = "../..", features = ["docs"] }
|
||||
web-sys = "0.3"
|
||||
|
||||
[dev-dependencies]
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target:
|
|||
|
||||
```bash
|
||||
cargo install trunk
|
||||
npm install -D tailwindcss
|
||||
npm install -D tailwindcss @tailwindcss/forms
|
||||
rustup toolchain install nightly
|
||||
rustup target add wasm32-unknown-unknown
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
[build]
|
||||
public_url = "./demo/"
|
||||
public_url = "/demo/"
|
||||
|
|
@ -1,10 +1,143 @@
|
|||
use leptos::*;
|
||||
use leptos_use::utils::demo_or_body;
|
||||
use leptos_use::docs::{demo_or_body, BooleanDisplay};
|
||||
use leptos_use::{use_scroll_with_options, ScrollBehavior, UseScrollOptions, UseScrollReturn};
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
view! { cx,
|
||||
let el = create_node_ref(cx);
|
||||
let (smooth, set_smooth) = create_signal(cx, false);
|
||||
let behavior = Signal::derive(cx, move || {
|
||||
if smooth() {
|
||||
ScrollBehavior::Smooth
|
||||
} else {
|
||||
ScrollBehavior::Auto
|
||||
}
|
||||
});
|
||||
|
||||
let UseScrollReturn {
|
||||
x,
|
||||
y,
|
||||
set_x,
|
||||
set_y,
|
||||
is_scrolling,
|
||||
arrived_state,
|
||||
directions,
|
||||
..
|
||||
} = use_scroll_with_options(cx, el, UseScrollOptions::default().behavior(behavior));
|
||||
|
||||
view! { cx,
|
||||
<div class="flex">
|
||||
<div node_ref=el class="w-[300px] h-[300px] m-auto overflow-scroll bg-gray-500/5 rounded">
|
||||
<div class="w-[500px] h-[400px] relative">
|
||||
<div class="absolute left-0 top-0 bg-gray-500/5 px-2 py-1">
|
||||
"top_left"
|
||||
</div>
|
||||
<div class="absolute left-0 bottom-0 bg-gray-500/5 px-2 py-1">
|
||||
"bottom_left"
|
||||
</div>
|
||||
<div class="absolute right-0 top-0 bg-gray-500/5 px-2 py-1">
|
||||
"top_right"
|
||||
</div>
|
||||
<div class="absolute right-0 bottom-0 bg-gray-500/5 px-2 py-1">
|
||||
"bottom_right"
|
||||
</div>
|
||||
|
||||
<div class="absolute left-1/3 top-1/3 bg-gray-500/5 px-2 py-1">
|
||||
"Scroll Me"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-auto w-280px pl-4">
|
||||
<div class="px-6 py-4 rounded grid grid-cols-[120px_auto] gap-4 bg-gray-500/5">
|
||||
<span class="text-right opacity-75 py-4">
|
||||
"X Position"
|
||||
</span>
|
||||
<div class="text-primary">
|
||||
<div>
|
||||
<input
|
||||
prop:value=move || format!("{:.1}", x())
|
||||
on:input=move |e| {
|
||||
if let Ok(num) = event_target_value(&e).parse::<f64>() {
|
||||
set_x(num);
|
||||
}
|
||||
}
|
||||
type="number"
|
||||
min="0"
|
||||
max="200"
|
||||
step="10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-right opacity-75 py-4">
|
||||
"Y Position"
|
||||
</span>
|
||||
<div class="text-primary">
|
||||
<div>
|
||||
<input
|
||||
prop:value=move || format!("{:.1}", y())
|
||||
on:input=move |e| {
|
||||
if let Ok(num) = event_target_value(&e).parse::<f64>() {
|
||||
set_y(num);
|
||||
}
|
||||
}
|
||||
type="number"
|
||||
min="0"
|
||||
max="200"
|
||||
step="10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<label for_="smooth-scrolling-option" class="text-right opacity-75">
|
||||
"Smooth scrolling"
|
||||
</label>
|
||||
<span>
|
||||
<input
|
||||
id="smooth-scrolling-option"
|
||||
prop:checked=smooth
|
||||
on:input=move |e| set_smooth(event_target_checked(&e))
|
||||
type="checkbox"
|
||||
/>
|
||||
</span>
|
||||
<span class="text-right opacity-75">
|
||||
"Is Scrolling"
|
||||
</span>
|
||||
<BooleanDisplay value=is_scrolling />
|
||||
<div class="text-right opacity-75">
|
||||
"Top Arrived"
|
||||
</div>
|
||||
<BooleanDisplay value=Signal::derive(cx, move || arrived_state().top) />
|
||||
<div class="text-right opacity-75">
|
||||
"Right Arrived"
|
||||
</div>
|
||||
<BooleanDisplay value=Signal::derive(cx, move || arrived_state().right) />
|
||||
<div class="text-right opacity-75">
|
||||
"Bottom Arrived"
|
||||
</div>
|
||||
<BooleanDisplay value=Signal::derive(cx, move || arrived_state().bottom) />
|
||||
<div class="text-right opacity-75">
|
||||
"Left Arrived"
|
||||
</div>
|
||||
<BooleanDisplay value=Signal::derive(cx, move || arrived_state().left) />
|
||||
<div class="text-right opacity-75">
|
||||
"Scrolling Up"
|
||||
</div>
|
||||
<BooleanDisplay value=Signal::derive(cx, move || directions().top) />
|
||||
<div class="text-right opacity-75">
|
||||
"Scrolling Right"
|
||||
</div>
|
||||
<BooleanDisplay value=Signal::derive(cx, move || directions().right) />
|
||||
<div class="text-right opacity-75">
|
||||
"Scrolling Down"
|
||||
</div>
|
||||
<BooleanDisplay value=Signal::derive(cx, move || directions().bottom) />
|
||||
<div class="text-right opacity-75">
|
||||
"Scrolling Left"
|
||||
</div>
|
||||
<BooleanDisplay value=Signal::derive(cx, move || directions().left) />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,169 @@
|
|||
[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-color: #fff;
|
||||
border-color: #6b7280;
|
||||
border-width: 1px;
|
||||
border-radius: 0px;
|
||||
padding-top: 0.5rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-left: 0.75rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
}
|
||||
|
||||
[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: #2563eb;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
border-color: #2563eb;
|
||||
}
|
||||
|
||||
input::-moz-placeholder, textarea::-moz-placeholder {
|
||||
color: #6b7280;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input::placeholder,textarea::placeholder {
|
||||
color: #6b7280;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
::-webkit-datetime-edit-fields-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::-webkit-date-and-time-value {
|
||||
min-height: 1.5em;
|
||||
}
|
||||
|
||||
::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
||||
background-position: right 0.5rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.5em 1.5em;
|
||||
padding-right: 2.5rem;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
[multiple] {
|
||||
background-image: initial;
|
||||
background-position: initial;
|
||||
background-repeat: unset;
|
||||
background-size: initial;
|
||||
padding-right: 0.75rem;
|
||||
-webkit-print-color-adjust: unset;
|
||||
print-color-adjust: unset;
|
||||
}
|
||||
|
||||
[type='checkbox'],[type='radio'] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background-origin: border-box;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
color: #2563eb;
|
||||
background-color: #fff;
|
||||
border-color: #6b7280;
|
||||
border-width: 1px;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
}
|
||||
|
||||
[type='checkbox'] {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
[type='radio'] {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
[type='checkbox']:focus,[type='radio']:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
|
||||
--tw-ring-offset-width: 2px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-color: #2563eb;
|
||||
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
||||
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
[type='checkbox']:checked,[type='radio']:checked {
|
||||
border-color: transparent;
|
||||
background-color: currentColor;
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
[type='checkbox']:checked {
|
||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
[type='radio']:checked {
|
||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
|
||||
border-color: transparent;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
[type='checkbox']:indeterminate {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
|
||||
border-color: transparent;
|
||||
background-color: currentColor;
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
|
||||
border-color: transparent;
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
[type='file'] {
|
||||
background: unset;
|
||||
border-color: inherit;
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
font-size: unset;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
[type='file']:focus {
|
||||
outline: 1px solid ButtonText;
|
||||
outline: 1px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
--tw-border-spacing-x: 0;
|
||||
--tw-border-spacing-y: 0;
|
||||
|
|
@ -12,6 +178,9 @@
|
|||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
|
|
@ -42,7 +211,7 @@
|
|||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia:
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
|
|
@ -59,6 +228,9 @@
|
|||
--tw-pan-y: ;
|
||||
--tw-pinch-zoom: ;
|
||||
--tw-scroll-snap-strictness: proximity;
|
||||
--tw-gradient-from-position: ;
|
||||
--tw-gradient-via-position: ;
|
||||
--tw-gradient-to-position: ;
|
||||
--tw-ordinal: ;
|
||||
--tw-slashed-zero: ;
|
||||
--tw-numeric-figure: ;
|
||||
|
|
@ -89,5 +261,186 @@
|
|||
--tw-backdrop-invert: ;
|
||||
--tw-backdrop-opacity: ;
|
||||
--tw-backdrop-saturate: ;
|
||||
--tw-backdrop-sepia:
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bottom-0 {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.left-0 {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.left-1\/3 {
|
||||
left: 33.333333%;
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.top-0 {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.top-1\/3 {
|
||||
top: 33.333333%;
|
||||
}
|
||||
|
||||
.m-auto {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.h-\[300px\] {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.h-\[400px\] {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.w-\[300px\] {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.w-\[500px\] {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.\!min-w-0 {
|
||||
min-width: 0px !important;
|
||||
}
|
||||
|
||||
.grid-cols-\[120px_auto\] {
|
||||
grid-template-columns: 120px auto;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-5 {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.overflow-scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.bg-gray-500\/5 {
|
||||
background-color: rgb(107 114 128 / 0.05);
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.px-6 {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.py-1 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pl-4 {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.text-orange-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(251 146 60 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-\[\] {
|
||||
color: ;
|
||||
}
|
||||
|
||||
.text-\[--\] {
|
||||
color: var(--);
|
||||
}
|
||||
|
||||
.text-\[--brand-color\] {
|
||||
color: var(--brand-color);
|
||||
}
|
||||
|
||||
.text-green-300 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(134 239 172 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-green-700 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(21 128 61 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-green-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(34 197 94 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-green-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(22 163 74 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.opacity-75 {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:text-orange-300 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(253 186 116 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-green-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(34 197 94 / var(--tw-text-opacity));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: {
|
||||
files: ["*.html", "./src/**/*.rs"],
|
||||
files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"],
|
||||
},
|
||||
theme: {
|
||||
extend: {},
|
||||
|
|
@ -9,5 +9,7 @@ module.exports = {
|
|||
corePlugins: {
|
||||
preflight: false,
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [
|
||||
require('@tailwindcss/forms'),
|
||||
],
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ leptos = "0.3"
|
|||
console_error_panic_hook = "0.1"
|
||||
console_log = "1"
|
||||
log = "0.4"
|
||||
leptos-use = { path = "../.." }
|
||||
leptos-use = { path = "../..", features = ["docs"] }
|
||||
web-sys = "0.3"
|
||||
|
||||
[dev-dependencies]
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
[build]
|
||||
public_url = "./demo/"
|
||||
public_url = "/demo/"
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
use leptos::*;
|
||||
use leptos_use::docs::demo_or_body;
|
||||
use leptos_use::use_throttle_fn;
|
||||
use leptos_use::utils::demo_or_body;
|
||||
|
||||
#[component]
|
||||
fn Demo(cx: Scope) -> impl IntoView {
|
||||
|
|
|
|||
27
src/docs/boolean_display.rs
Normal file
27
src/docs/boolean_display.rs
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
use leptos::*;
|
||||
|
||||
#[component]
|
||||
pub fn BooleanDisplay(
|
||||
cx: Scope,
|
||||
#[prop(into)] value: MaybeSignal<bool>,
|
||||
#[prop(optional)] class: String,
|
||||
) -> impl IntoView {
|
||||
let true_class = "text-green-600 dark:text-green-500";
|
||||
let false_class = "text-[--brand-color]";
|
||||
let true_str = "true";
|
||||
let false_str = "false";
|
||||
|
||||
let class = move || {
|
||||
format!(
|
||||
"{} {} opacity-75",
|
||||
if value.get() { true_class } else { false_class },
|
||||
class
|
||||
)
|
||||
};
|
||||
|
||||
view! { cx,
|
||||
<span class=class>
|
||||
{ move || if value() { true_str} else { false_str } }
|
||||
</span>
|
||||
}
|
||||
}
|
||||
5
src/docs/mod.rs
Normal file
5
src/docs/mod.rs
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
mod boolean_display;
|
||||
mod demo;
|
||||
|
||||
pub use boolean_display::*;
|
||||
pub use demo::*;
|
||||
|
|
@ -7,8 +7,11 @@ mod use_scroll;
|
|||
mod use_throttle_fn;
|
||||
pub mod utils;
|
||||
|
||||
#[cfg(feature = "docs")]
|
||||
pub mod docs;
|
||||
|
||||
pub use use_debounce_fn::*;
|
||||
pub use use_event_listener::use_event_listener;
|
||||
pub use use_event_listener::*;
|
||||
pub use use_scroll::*;
|
||||
pub use use_throttle_fn::*;
|
||||
|
||||
|
|
|
|||
|
|
@ -235,7 +235,7 @@ where
|
|||
|
||||
let on_stop = options.on_stop.clone();
|
||||
let on_scroll_end = move |e| {
|
||||
if !is_scrolling.get() {
|
||||
if !is_scrolling.get_untracked() {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -272,8 +272,8 @@ where
|
|||
let scroll_left_abs = scroll_left.abs();
|
||||
|
||||
directions.update(|directions| {
|
||||
directions.left = scroll_left < internal_x.get();
|
||||
directions.right = scroll_left > internal_x.get();
|
||||
directions.left = scroll_left < internal_x.get_untracked();
|
||||
directions.right = scroll_left > internal_x.get_untracked();
|
||||
});
|
||||
|
||||
let left = scroll_left_abs <= offset.left;
|
||||
|
|
@ -301,8 +301,8 @@ where
|
|||
let scroll_top_abs = scroll_top.abs();
|
||||
|
||||
directions.update(|directions| {
|
||||
directions.top = scroll_top < internal_y.get();
|
||||
directions.bottom = scroll_top > internal_y.get();
|
||||
directions.top = scroll_top < internal_y.get_untracked();
|
||||
directions.bottom = scroll_top > internal_y.get_untracked();
|
||||
});
|
||||
|
||||
let top = scroll_top_abs <= offset.top;
|
||||
|
|
@ -343,16 +343,19 @@ where
|
|||
});
|
||||
|
||||
if throttle >= 0.0 {
|
||||
let throttled_scroll_handler = use_throttle_fn_with_arg_and_options(
|
||||
on_scroll_handler.clone(),
|
||||
throttle,
|
||||
ThrottleOptions {
|
||||
trailing: true,
|
||||
leading: false,
|
||||
},
|
||||
);
|
||||
|
||||
let handler = move |e: web_sys::Event| {
|
||||
let _ = use_throttle_fn_with_arg_and_options(
|
||||
on_scroll_handler.clone(),
|
||||
throttle,
|
||||
ThrottleOptions {
|
||||
trailing: true,
|
||||
leading: false,
|
||||
},
|
||||
);
|
||||
throttled_scroll_handler.clone()(e);
|
||||
};
|
||||
|
||||
let _ = use_event_listener_with_options::<
|
||||
_,
|
||||
Signal<Option<web_sys::EventTarget>>,
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ pub use crate::utils::ThrottleOptions;
|
|||
pub fn use_throttle_fn<F, R>(
|
||||
func: F,
|
||||
ms: impl Into<MaybeSignal<f64>>,
|
||||
) -> impl Fn() -> Rc<RefCell<Option<R>>>
|
||||
) -> impl Fn() -> Rc<RefCell<Option<R>>> + Clone
|
||||
where
|
||||
F: FnOnce() -> R + Clone + 'static,
|
||||
R: 'static,
|
||||
|
|
@ -80,7 +80,7 @@ pub fn use_throttle_fn_with_options<F, R>(
|
|||
func: F,
|
||||
ms: impl Into<MaybeSignal<f64>>,
|
||||
options: ThrottleOptions,
|
||||
) -> impl Fn() -> Rc<RefCell<Option<R>>>
|
||||
) -> impl Fn() -> Rc<RefCell<Option<R>>> + Clone
|
||||
where
|
||||
F: FnOnce() -> R + Clone + 'static,
|
||||
R: 'static,
|
||||
|
|
@ -92,7 +92,7 @@ where
|
|||
pub fn use_throttle_fn_with_arg<F, Arg, R>(
|
||||
func: F,
|
||||
ms: impl Into<MaybeSignal<f64>>,
|
||||
) -> impl Fn(Arg) -> Rc<RefCell<Option<R>>>
|
||||
) -> impl Fn(Arg) -> Rc<RefCell<Option<R>>> + Clone
|
||||
where
|
||||
F: FnOnce(Arg) -> R + Clone + 'static,
|
||||
Arg: Clone + 'static,
|
||||
|
|
@ -106,7 +106,7 @@ pub fn use_throttle_fn_with_arg_and_options<F, Arg, R>(
|
|||
func: F,
|
||||
ms: impl Into<MaybeSignal<f64>>,
|
||||
options: ThrottleOptions,
|
||||
) -> impl Fn(Arg) -> Rc<RefCell<Option<R>>>
|
||||
) -> impl Fn(Arg) -> Rc<RefCell<Option<R>>> + Clone
|
||||
where
|
||||
F: FnOnce(Arg) -> R + Clone + 'static,
|
||||
Arg: Clone + 'static,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
mod clonable_fn;
|
||||
mod demo;
|
||||
mod filters;
|
||||
|
||||
pub use clonable_fn::*;
|
||||
pub use demo::*;
|
||||
pub use filters::*;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue