mirror of
https://github.com/adoyle0/leptos-use.git
synced 2025-01-23 09:09:21 -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
|
|
@ -18,3 +18,6 @@ web-sys = { version = "0.3", features = ["ScrollToOptions", "ScrollBehavior", "C
|
||||||
wasm-bindgen = "0.2"
|
wasm-bindgen = "0.2"
|
||||||
js-sys = "0.3"
|
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)
|
dirs_exist_ok=True)
|
||||||
|
|
||||||
with open(os.path.join(target_path, "index.html"), "r") as f:
|
with open(os.path.join(target_path, "index.html"), "r") as f:
|
||||||
html = f.read().replace("./demo", f"./{name}/demo")
|
html = f.read().replace("/demo", f"./{name}/demo")
|
||||||
head = html.split("<head>")[1].split("</head>")[0]
|
demo_head = html.split("<head>")[1].split("</head>")[0]
|
||||||
body = html.split("<body>")[1].split("</body>")[0]
|
demo_body = html.split("<body>")[1].split("</body>")[0]
|
||||||
|
|
||||||
book_html_path = os.path.join("book", category, f"{name}.html")
|
book_html_path = os.path.join("book", category, f"{name}.html")
|
||||||
with open(book_html_path, "r") as f:
|
with open(book_html_path, "r") as f:
|
||||||
|
|
@ -46,11 +46,11 @@ def build_and_copy_demo(category, md_name):
|
||||||
f.write(
|
f.write(
|
||||||
f"""{head_split[0]}
|
f"""{head_split[0]}
|
||||||
<head>
|
<head>
|
||||||
{head}
|
{demo_head}
|
||||||
{target_head}
|
{target_head}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{body}
|
{demo_body}
|
||||||
{target_body}
|
{target_body}
|
||||||
</body>
|
</body>
|
||||||
{body_split[1]}""")
|
{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 {
|
.light {
|
||||||
--fg: #333;
|
--fg: #333;
|
||||||
|
--links: #c42f2f;
|
||||||
|
--sidebar-active: var(--links);
|
||||||
|
}
|
||||||
|
|
||||||
|
.coal {
|
||||||
|
--links: #ee6f6f;
|
||||||
|
--sidebar-active: var(--links);
|
||||||
}
|
}
|
||||||
|
|
||||||
pre > code {
|
pre > code {
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,3 @@
|
||||||
:root {
|
|
||||||
--brand-color: #EF3939;
|
|
||||||
--brand-color-dark: #9c2525;
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-container {
|
.demo-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
@ -29,6 +24,8 @@
|
||||||
|
|
||||||
.ayu .demo-container, .navy .demo-container, .coal .demo-container {
|
.ayu .demo-container, .navy .demo-container, .coal .demo-container {
|
||||||
background-color: #1d1f21;
|
background-color: #1d1f21;
|
||||||
|
--background-color: #1d1f21;
|
||||||
|
--text-color: #aaaaaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.demo-container button {
|
.demo-container button {
|
||||||
|
|
@ -64,3 +61,16 @@
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
font-size: 1.4rem;
|
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_error_panic_hook = "0.1"
|
||||||
console_log = "1"
|
console_log = "1"
|
||||||
log = "0.4"
|
log = "0.4"
|
||||||
leptos-use = { path = "../.." }
|
leptos-use = { path = "../..", features = ["docs"] }
|
||||||
web-sys = "0.3"
|
web-sys = "0.3"
|
||||||
|
|
||||||
[dev-dependencies]
|
[dev-dependencies]
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
[build]
|
[build]
|
||||||
public_url = "./demo/"
|
public_url = "/demo/"
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use leptos_use::use_debounce_fn_with_options;
|
use leptos_use::docs::demo_or_body;
|
||||||
use leptos_use::utils::{demo_or_body, DebounceOptions};
|
use leptos_use::{use_debounce_fn_with_options, DebounceOptions};
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
fn Demo(cx: Scope) -> impl IntoView {
|
fn Demo(cx: Scope) -> impl IntoView {
|
||||||
|
|
@ -10,9 +10,7 @@ fn Demo(cx: Scope) -> impl IntoView {
|
||||||
let debounced_fn = use_debounce_fn_with_options(
|
let debounced_fn = use_debounce_fn_with_options(
|
||||||
move || set_debounced_count(debounced_count() + 1),
|
move || set_debounced_count(debounced_count() + 1),
|
||||||
1000.0,
|
1000.0,
|
||||||
DebounceOptions {
|
DebounceOptions::default().max_wait(Some(5000.0)),
|
||||||
max_wait: Some(5000.0),
|
|
||||||
},
|
|
||||||
);
|
);
|
||||||
|
|
||||||
view! { cx,
|
view! { cx,
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ leptos = "0.3"
|
||||||
console_error_panic_hook = "0.1"
|
console_error_panic_hook = "0.1"
|
||||||
console_log = "1"
|
console_log = "1"
|
||||||
log = "0.4"
|
log = "0.4"
|
||||||
leptos-use = { path = "../.." }
|
leptos-use = { path = "../..", features = ["docs"] }
|
||||||
web-sys = "0.3"
|
web-sys = "0.3"
|
||||||
|
|
||||||
[dev-dependencies]
|
[dev-dependencies]
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ as well as the nightly toolchain for Rust and the wasm32-unknown-unknown target:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
cargo install trunk
|
cargo install trunk
|
||||||
npm install -D tailwindcss
|
npm install -D tailwindcss @tailwindcss/forms
|
||||||
rustup toolchain install nightly
|
rustup toolchain install nightly
|
||||||
rustup target add wasm32-unknown-unknown
|
rustup target add wasm32-unknown-unknown
|
||||||
```
|
```
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
[build]
|
[build]
|
||||||
public_url = "./demo/"
|
public_url = "/demo/"
|
||||||
|
|
@ -1,10 +1,143 @@
|
||||||
use leptos::*;
|
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]
|
#[component]
|
||||||
fn Demo(cx: Scope) -> impl IntoView {
|
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 {
|
*, ::before, ::after {
|
||||||
--tw-border-spacing-x: 0;
|
--tw-border-spacing-x: 0;
|
||||||
--tw-border-spacing-y: 0;
|
--tw-border-spacing-y: 0;
|
||||||
|
|
@ -12,6 +178,9 @@
|
||||||
--tw-pan-y: ;
|
--tw-pan-y: ;
|
||||||
--tw-pinch-zoom: ;
|
--tw-pinch-zoom: ;
|
||||||
--tw-scroll-snap-strictness: proximity;
|
--tw-scroll-snap-strictness: proximity;
|
||||||
|
--tw-gradient-from-position: ;
|
||||||
|
--tw-gradient-via-position: ;
|
||||||
|
--tw-gradient-to-position: ;
|
||||||
--tw-ordinal: ;
|
--tw-ordinal: ;
|
||||||
--tw-slashed-zero: ;
|
--tw-slashed-zero: ;
|
||||||
--tw-numeric-figure: ;
|
--tw-numeric-figure: ;
|
||||||
|
|
@ -42,7 +211,7 @@
|
||||||
--tw-backdrop-invert: ;
|
--tw-backdrop-invert: ;
|
||||||
--tw-backdrop-opacity: ;
|
--tw-backdrop-opacity: ;
|
||||||
--tw-backdrop-saturate: ;
|
--tw-backdrop-saturate: ;
|
||||||
--tw-backdrop-sepia:
|
--tw-backdrop-sepia: ;
|
||||||
}
|
}
|
||||||
|
|
||||||
::backdrop {
|
::backdrop {
|
||||||
|
|
@ -59,6 +228,9 @@
|
||||||
--tw-pan-y: ;
|
--tw-pan-y: ;
|
||||||
--tw-pinch-zoom: ;
|
--tw-pinch-zoom: ;
|
||||||
--tw-scroll-snap-strictness: proximity;
|
--tw-scroll-snap-strictness: proximity;
|
||||||
|
--tw-gradient-from-position: ;
|
||||||
|
--tw-gradient-via-position: ;
|
||||||
|
--tw-gradient-to-position: ;
|
||||||
--tw-ordinal: ;
|
--tw-ordinal: ;
|
||||||
--tw-slashed-zero: ;
|
--tw-slashed-zero: ;
|
||||||
--tw-numeric-figure: ;
|
--tw-numeric-figure: ;
|
||||||
|
|
@ -89,5 +261,186 @@
|
||||||
--tw-backdrop-invert: ;
|
--tw-backdrop-invert: ;
|
||||||
--tw-backdrop-opacity: ;
|
--tw-backdrop-opacity: ;
|
||||||
--tw-backdrop-saturate: ;
|
--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} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: {
|
content: {
|
||||||
files: ["*.html", "./src/**/*.rs"],
|
files: ["*.html", "./src/**/*.rs", "../../src/docs/**/*.rs"],
|
||||||
},
|
},
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {},
|
||||||
|
|
@ -9,5 +9,7 @@ module.exports = {
|
||||||
corePlugins: {
|
corePlugins: {
|
||||||
preflight: false,
|
preflight: false,
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [
|
||||||
|
require('@tailwindcss/forms'),
|
||||||
|
],
|
||||||
}
|
}
|
||||||
|
|
@ -8,7 +8,7 @@ leptos = "0.3"
|
||||||
console_error_panic_hook = "0.1"
|
console_error_panic_hook = "0.1"
|
||||||
console_log = "1"
|
console_log = "1"
|
||||||
log = "0.4"
|
log = "0.4"
|
||||||
leptos-use = { path = "../.." }
|
leptos-use = { path = "../..", features = ["docs"] }
|
||||||
web-sys = "0.3"
|
web-sys = "0.3"
|
||||||
|
|
||||||
[dev-dependencies]
|
[dev-dependencies]
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
[build]
|
[build]
|
||||||
public_url = "./demo/"
|
public_url = "/demo/"
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
|
use leptos_use::docs::demo_or_body;
|
||||||
use leptos_use::use_throttle_fn;
|
use leptos_use::use_throttle_fn;
|
||||||
use leptos_use::utils::demo_or_body;
|
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
fn Demo(cx: Scope) -> impl IntoView {
|
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;
|
mod use_throttle_fn;
|
||||||
pub mod utils;
|
pub mod utils;
|
||||||
|
|
||||||
|
#[cfg(feature = "docs")]
|
||||||
|
pub mod docs;
|
||||||
|
|
||||||
pub use use_debounce_fn::*;
|
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_scroll::*;
|
||||||
pub use use_throttle_fn::*;
|
pub use use_throttle_fn::*;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -235,7 +235,7 @@ where
|
||||||
|
|
||||||
let on_stop = options.on_stop.clone();
|
let on_stop = options.on_stop.clone();
|
||||||
let on_scroll_end = move |e| {
|
let on_scroll_end = move |e| {
|
||||||
if !is_scrolling.get() {
|
if !is_scrolling.get_untracked() {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -272,8 +272,8 @@ where
|
||||||
let scroll_left_abs = scroll_left.abs();
|
let scroll_left_abs = scroll_left.abs();
|
||||||
|
|
||||||
directions.update(|directions| {
|
directions.update(|directions| {
|
||||||
directions.left = scroll_left < internal_x.get();
|
directions.left = scroll_left < internal_x.get_untracked();
|
||||||
directions.right = scroll_left > internal_x.get();
|
directions.right = scroll_left > internal_x.get_untracked();
|
||||||
});
|
});
|
||||||
|
|
||||||
let left = scroll_left_abs <= offset.left;
|
let left = scroll_left_abs <= offset.left;
|
||||||
|
|
@ -301,8 +301,8 @@ where
|
||||||
let scroll_top_abs = scroll_top.abs();
|
let scroll_top_abs = scroll_top.abs();
|
||||||
|
|
||||||
directions.update(|directions| {
|
directions.update(|directions| {
|
||||||
directions.top = scroll_top < internal_y.get();
|
directions.top = scroll_top < internal_y.get_untracked();
|
||||||
directions.bottom = scroll_top > internal_y.get();
|
directions.bottom = scroll_top > internal_y.get_untracked();
|
||||||
});
|
});
|
||||||
|
|
||||||
let top = scroll_top_abs <= offset.top;
|
let top = scroll_top_abs <= offset.top;
|
||||||
|
|
@ -343,16 +343,19 @@ where
|
||||||
});
|
});
|
||||||
|
|
||||||
if throttle >= 0.0 {
|
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 handler = move |e: web_sys::Event| {
|
||||||
let _ = use_throttle_fn_with_arg_and_options(
|
throttled_scroll_handler.clone()(e);
|
||||||
on_scroll_handler.clone(),
|
|
||||||
throttle,
|
|
||||||
ThrottleOptions {
|
|
||||||
trailing: true,
|
|
||||||
leading: false,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
let _ = use_event_listener_with_options::<
|
let _ = use_event_listener_with_options::<
|
||||||
_,
|
_,
|
||||||
Signal<Option<web_sys::EventTarget>>,
|
Signal<Option<web_sys::EventTarget>>,
|
||||||
|
|
|
||||||
|
|
@ -67,7 +67,7 @@ pub use crate::utils::ThrottleOptions;
|
||||||
pub fn use_throttle_fn<F, R>(
|
pub fn use_throttle_fn<F, R>(
|
||||||
func: F,
|
func: F,
|
||||||
ms: impl Into<MaybeSignal<f64>>,
|
ms: impl Into<MaybeSignal<f64>>,
|
||||||
) -> impl Fn() -> Rc<RefCell<Option<R>>>
|
) -> impl Fn() -> Rc<RefCell<Option<R>>> + Clone
|
||||||
where
|
where
|
||||||
F: FnOnce() -> R + Clone + 'static,
|
F: FnOnce() -> R + Clone + 'static,
|
||||||
R: 'static,
|
R: 'static,
|
||||||
|
|
@ -80,7 +80,7 @@ pub fn use_throttle_fn_with_options<F, R>(
|
||||||
func: F,
|
func: F,
|
||||||
ms: impl Into<MaybeSignal<f64>>,
|
ms: impl Into<MaybeSignal<f64>>,
|
||||||
options: ThrottleOptions,
|
options: ThrottleOptions,
|
||||||
) -> impl Fn() -> Rc<RefCell<Option<R>>>
|
) -> impl Fn() -> Rc<RefCell<Option<R>>> + Clone
|
||||||
where
|
where
|
||||||
F: FnOnce() -> R + Clone + 'static,
|
F: FnOnce() -> R + Clone + 'static,
|
||||||
R: 'static,
|
R: 'static,
|
||||||
|
|
@ -92,7 +92,7 @@ where
|
||||||
pub fn use_throttle_fn_with_arg<F, Arg, R>(
|
pub fn use_throttle_fn_with_arg<F, Arg, R>(
|
||||||
func: F,
|
func: F,
|
||||||
ms: impl Into<MaybeSignal<f64>>,
|
ms: impl Into<MaybeSignal<f64>>,
|
||||||
) -> impl Fn(Arg) -> Rc<RefCell<Option<R>>>
|
) -> impl Fn(Arg) -> Rc<RefCell<Option<R>>> + Clone
|
||||||
where
|
where
|
||||||
F: FnOnce(Arg) -> R + Clone + 'static,
|
F: FnOnce(Arg) -> R + Clone + 'static,
|
||||||
Arg: Clone + 'static,
|
Arg: Clone + 'static,
|
||||||
|
|
@ -106,7 +106,7 @@ pub fn use_throttle_fn_with_arg_and_options<F, Arg, R>(
|
||||||
func: F,
|
func: F,
|
||||||
ms: impl Into<MaybeSignal<f64>>,
|
ms: impl Into<MaybeSignal<f64>>,
|
||||||
options: ThrottleOptions,
|
options: ThrottleOptions,
|
||||||
) -> impl Fn(Arg) -> Rc<RefCell<Option<R>>>
|
) -> impl Fn(Arg) -> Rc<RefCell<Option<R>>> + Clone
|
||||||
where
|
where
|
||||||
F: FnOnce(Arg) -> R + Clone + 'static,
|
F: FnOnce(Arg) -> R + Clone + 'static,
|
||||||
Arg: Clone + 'static,
|
Arg: Clone + 'static,
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
mod clonable_fn;
|
mod clonable_fn;
|
||||||
mod demo;
|
|
||||||
mod filters;
|
mod filters;
|
||||||
|
|
||||||
pub use clonable_fn::*;
|
pub use clonable_fn::*;
|
||||||
pub use demo::*;
|
|
||||||
pub use filters::*;
|
pub use filters::*;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue