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

Docs Updated

Browse Source
This commit is contained in:
natxocc
2026-04-03 01:41:07 +02:00
parent b0629ef3d0
commit 257107e198
42 changed files with 1529 additions and 6255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

299
docs/components/toast.md
View File

@@ -6,11 +6,11 @@ Toast notification utility for displaying temporary messages that automatically
`Toast(message, type = 'alert-info', duration = 3500)`
| Param | Type | Default | Description |
| :--------- | :--------------------------- | :--------------- | :----------------------------------------------- |
| `message` | `string \| VNode` | `-` | Message content to display |
| `type` | `string` | `'alert-info'` | Alert type: 'alert-info', 'alert-success', 'alert-warning', 'alert-error' |
| `duration` | `number` | `3500` | Auto-dismiss duration in milliseconds |
| Param | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `message` | `string \| VNode` | `-` | Message content to display |
| `type` | `string` | `'alert-info'` | Alert type: `'alert-info'`, `'alert-success'`, `'alert-warning'`, `'alert-error'` |
| `duration` | `number` | `3500` | Auto-dismiss duration in milliseconds |
## Live Examples
@@ -340,291 +340,4 @@ const MultipleDemo = () => {
]);
};
$mount(MultipleDemo, '#demo-multiple');
```
<script>
(function() {
const initToastExamples = () => {
// 1. Basic Toast
const basicTarget = document.querySelector('#demo-basic');
if (basicTarget && !basicTarget.hasChildNodes()) {
const BasicDemo = () => {
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({
class: 'btn btn-success',
onclick: () => Toast('Operation successful!', 'alert-success', 3000)
}, 'Success Toast'),
Button({
class: 'btn btn-warning',
onclick: () => Toast('Please check your input', 'alert-warning', 3000)
}, 'Warning Toast'),
Button({
class: 'btn btn-error',
onclick: () => Toast('An error occurred', 'alert-error', 3000)
}, 'Error Toast')
]);
};
$mount(BasicDemo, basicTarget);
}
// 2. Different Durations
const durationTarget = document.querySelector('#demo-duration');
if (durationTarget && !durationTarget.hasChildNodes()) {
const DurationDemo = () => {
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({
class: 'btn btn-sm',
onclick: () => Toast('Normal (3s)', 'alert-success', 3000)
}, '3 Seconds'),
Button({
class: 'btn btn-sm',
onclick: () => Toast('Long (5s)', 'alert-warning', 5000)
}, '5 Seconds'),
Button({
class: 'btn btn-sm',
onclick: () => Toast('Very Long (8s)', 'alert-error', 8000)
}, '8 Seconds')
]);
};
$mount(DurationDemo, durationTarget);
}
// 3. Interactive Toast
const interactiveTarget = document.querySelector('#demo-interactive');
if (interactiveTarget && !interactiveTarget.hasChildNodes()) {
const InteractiveDemo = () => {
const count = $(0);
const showRandomToast = () => {
const types = ['alert-info', 'alert-success', 'alert-warning', 'alert-error'];
const messages = [
'You clicked the button!',
'Action completed successfully',
'Processing your request...',
'Something interesting happened'
];
const randomType = types[Math.floor(Math.random() * types.length)];
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
count(count() + 1);
Toast(`${randomMessage} (${count()})`, randomType, 2000);
};
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()}`)
]);
};
$mount(InteractiveDemo, interactiveTarget);
}
// 4. Form Validation Toast
const formTarget = document.querySelector('#demo-form');
if (formTarget && !formTarget.hasChildNodes()) {
const FormToastDemo = () => {
const email = $('');
const password = $('');
const handleSubmit = () => {
if (!email()) {
Toast('Please enter your email', 'alert-warning', 3000);
return;
}
if (!email().includes('@')) {
Toast('Please enter a valid email address', 'alert-error', 3000);
return;
}
if (!password()) {
Toast('Please enter your password', 'alert-warning', 3000);
return;
}
if (password().length < 6) {
Toast('Password must be at least 6 characters', 'alert-error', 3000);
return;
}
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({
label: 'Email',
type: 'email',
value: email,
placeholder: 'user@example.com',
oninput: (e) => email(e.target.value)
}),
Input({
label: 'Password',
type: 'password',
value: password,
placeholder: 'Enter password',
oninput: (e) => password(e.target.value)
}),
Button({
class: 'btn btn-primary',
onclick: handleSubmit
}, 'Login')
]);
};
$mount(FormToastDemo, formTarget);
}
// 5. Success Feedback
const feedbackTarget = document.querySelector('#demo-feedback');
if (feedbackTarget && !feedbackTarget.hasChildNodes()) {
const FeedbackDemo = () => {
const items = $([
{ id: 1, name: 'Item 1', saved: false },
{ id: 2, name: 'Item 2', saved: false },
{ id: 3, name: 'Item 3', saved: false }
]);
const saveItem = (id) => {
items(items().map(item =>
item.id === id ? { ...item, saved: true } : item
));
Toast(`Item ${id} saved successfully!`, 'alert-success', 2000);
};
const saveAll = () => {
items(items().map(item => ({ ...item, saved: true })));
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({
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),
item.saved
? Span({ class: 'badge badge-success' }, '✓ Saved')
: Button({
class: 'btn btn-xs btn-primary',
onclick: () => saveItem(item.id)
}, 'Save')
])
))
]);
};
$mount(FeedbackDemo, feedbackTarget);
}
// 6. Error Handling
const errorTarget = document.querySelector('#demo-error');
if (errorTarget && !errorTarget.hasChildNodes()) {
const ErrorDemo = () => {
const simulateApiCall = () => {
const success = Math.random() > 0.3;
if (success) {
Toast('Data loaded successfully!', 'alert-success', 2000);
} else {
Toast('Failed to load data. Please try again.', 'alert-error', 3000);
}
};
const simulateNetworkError = () => {
Toast('Network error: Unable to connect to server', 'alert-error', 4000);
};
const simulateTimeout = () => {
Toast('Request timeout (5s). Please check your connection.', 'alert-warning', 4000);
};
return Div({ class: 'flex flex-wrap gap-3 justify-center' }, [
Button({
class: 'btn btn-primary',
onclick: simulateApiCall
}, 'Simulate API Call'),
Button({
class: 'btn btn-error',
onclick: simulateNetworkError
}, 'Network Error'),
Button({
class: 'btn btn-warning',
onclick: simulateTimeout
}, 'Timeout')
]);
};
$mount(ErrorDemo, errorTarget);
}
// 7. Custom Messages
const customTarget = document.querySelector('#demo-custom');
if (customTarget && !customTarget.hasChildNodes()) {
const CustomDemo = () => {
const showCustomToast = (type, message) => {
Toast(message, type, 3000);
};
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({
class: 'btn btn-success',
onclick: () => showCustomToast('alert-success', '💰 Payment of $49.99 completed')
}, 'Payment'),
Button({
class: 'btn btn-warning',
onclick: () => showCustomToast('alert-warning', '⚠️ Your session will expire in 5 minutes')
}, 'Session Warning'),
Button({
class: 'btn btn-error',
onclick: () => showCustomToast('alert-error', '🔒 Failed login attempt detected')
}, 'Security Alert')
]);
};
$mount(CustomDemo, customTarget);
}
// 8. Multiple Toasts
const multipleTarget = document.querySelector('#demo-multiple');
if (multipleTarget && !multipleTarget.hasChildNodes()) {
const MultipleDemo = () => {
const showMultipleToasts = () => {
Toast('First message', 'alert-info', 3000);
setTimeout(() => Toast('Second message', 'alert-success', 3000), 500);
setTimeout(() => Toast('Third message', 'alert-warning', 3000), 1000);
setTimeout(() => Toast('Fourth message', 'alert-error', 3000), 1500);
};
return Div({ class: 'flex justify-center' }, [
Button({
class: 'btn btn-primary',
onclick: showMultipleToasts
}, 'Show Multiple Toasts')
]);
};
$mount(MultipleDemo, multipleTarget);
}
};
initToastExamples();
if (window.$docsify) {
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
hook.doneEach(initToastExamples);
});
}
})();
</script>
```