natxocc/sigpro-ui
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

adapt new Input
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-23 13:22:49 +02:00
parent 59e6d972a8
commit e842ed8041
61 changed files with 2553 additions and 2758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
docs/components/toast.md
View File

@@ -25,20 +25,20 @@ Toast notification utility for displaying temporary messages that automatically
```javascript
const BasicDemo = () => {
return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
Button({
return div({ class: 'flex flex-wrap gap-2 justify-center' }, [
button({
class: 'btn btn-info',
onclick: () => Toast('This is an info message', 'alert-info', 3000)
}, 'Info Toast'),
Button({
button({
class: 'btn btn-success',
onclick: () => Toast('Operation successful!', 'alert-success', 3000)
}, 'Success Toast'),
Button({
button({
class: 'btn btn-warning',
onclick: () => Toast('Please check your input', 'alert-warning', 3000)
}, 'Warning Toast'),
Button({
button({
class: 'btn btn-error',
onclick: () => Toast('An error occurred', 'alert-error', 3000)
}, 'Error Toast')
@@ -58,20 +58,20 @@ mount(BasicDemo, '#demo-basic');
```javascript
const DurationDemo = () => {
return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
Button({
return div({ class: 'flex flex-wrap gap-2 justify-center' }, [
button({
class: 'btn btn-sm',
onclick: () => Toast('Short (1s)', 'alert-info', 1000)
}, '1 Second'),
Button({
button({
class: 'btn btn-sm',
onclick: () => Toast('Normal (3s)', 'alert-success', 3000)
}, '3 Seconds'),
Button({
button({
class: 'btn btn-sm',
onclick: () => Toast('Long (5s)', 'alert-warning', 5000)
}, '5 Seconds'),
Button({
button({
class: 'btn btn-sm',
onclick: () => Toast('Very Long (8s)', 'alert-error', 8000)
}, '8 Seconds')
@@ -107,12 +107,12 @@ const InteractiveDemo = () => {
Toast(`${randomMessage} (${count()})`, randomType, 2000);
};
return Div({ class: 'flex flex-col gap-4 items-center' }, [
Button({
return div({ class: 'flex flex-col gap-4 items-center' }, [
button({
class: 'btn btn-primary',
onclick: showRandomToast
}, 'Show Random Toast'),
Div({ class: 'text-sm opacity-70' }, () => `Toasts shown: ${count()}`)
div({ class: 'text-sm opacity-70' }, () => `Toasts shown: ${count()}`)
]);
};
mount(InteractiveDemo, '#demo-interactive');
@@ -152,23 +152,23 @@ const FormToastDemo = () => {
Toast('Login successful! Redirecting...', 'alert-success', 2000);
};
return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
Div({ class: 'text-lg font-bold text-center' }, 'Login Form'),
Input({
return div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
div({ class: 'text-lg font-bold text-center' }, 'Login Form'),
input({
label: 'Email',
type: 'email',
value: email,
placeholder: 'user@example.com',
oninput: (e) => email(e.target.value)
}),
Input({
input({
label: 'Password',
type: 'password',
value: password,
placeholder: 'Enter password',
oninput: (e) => password(e.target.value)
}),
Button({
button({
class: 'btn btn-primary',
onclick: handleSubmit
}, 'Login')
@@ -206,20 +206,20 @@ const FeedbackDemo = () => {
Toast('All items saved!', 'alert-success', 2000);
};
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'flex justify-between items-center' }, [
Span({ class: 'font-bold' }, 'Items to Save'),
Button({
return div({ class: 'flex flex-col gap-4' }, [
div({ class: 'flex justify-between items-center' }, [
span({ class: 'font-bold' }, 'Items to Save'),
button({
class: 'btn btn-sm btn-primary',
onclick: saveAll
}, 'Save All')
]),
Div({ class: 'flex flex-col gap-2' }, items().map(item =>
Div({ class: 'flex justify-between items-center p-3 bg-base-200 rounded-lg' }, [
Span({}, item.name),
div({ class: 'flex flex-col gap-2' }, items().map(item =>
div({ class: 'flex justify-between items-center p-3 bg-base-200 rounded-lg' }, [
span({}, item.name),
item.saved
? Span({ class: 'badge badge-success' }, '✓ Saved')
: Button({
? span({ class: 'badge badge-success' }, '✓ Saved')
: button({
class: 'btn btn-xs btn-primary',
onclick: () => saveItem(item.id)
}, 'Save')
@@ -259,16 +259,16 @@ const ErrorDemo = () => {
Toast('Request timeout (5s). Please check your connection.', 'alert-warning', 4000);
};
return Div({ class: 'flex flex-wrap gap-3 justify-center' }, [
Button({
return div({ class: 'flex flex-wrap gap-3 justify-center' }, [
button({
class: 'btn btn-primary',
onclick: simulateApiCall
}, 'Simulate API Call'),
Button({
button({
class: 'btn btn-error',
onclick: simulateNetworkError
}, 'Network Error'),
Button({
button({
class: 'btn btn-warning',
onclick: simulateTimeout
}, 'Timeout')
@@ -292,20 +292,20 @@ const CustomDemo = () => {
Toast(message, type, 3000);
};
return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
Button({
return div({ class: 'flex flex-wrap gap-2 justify-center' }, [
button({
class: 'btn btn-info',
onclick: () => showCustomToast('alert-info', '📧 New email received from john@example.com')
}, 'Email'),
Button({
button({
class: 'btn btn-success',
onclick: () => showCustomToast('alert-success', '💰 Payment of $49.99 completed')
}, 'Payment'),
Button({
button({
class: 'btn btn-warning',
onclick: () => showCustomToast('alert-warning', '⚠️ Your session will expire in 5 minutes')
}, 'Session Warning'),
Button({
button({
class: 'btn btn-error',
onclick: () => showCustomToast('alert-error', '🔒 Failed login attempt detected')
}, 'Security Alert')
@@ -332,8 +332,8 @@ const MultipleDemo = () => {
setTimeout(() => Toast('Fourth message', 'alert-error', 3000), 1500);
};
return Div({ class: 'flex justify-center' }, [
Button({
return div({ class: 'flex justify-center' }, [
button({
class: 'btn btn-primary',
onclick: showMultipleToasts
}, 'Show Multiple Toasts')