diff --git a/docs/components/toast.md b/docs/components/toast.md new file mode 100644 index 0000000..e9f2c77 --- /dev/null +++ b/docs/components/toast.md @@ -0,0 +1,630 @@ +# Toast + +Toast notification utility for displaying temporary messages that automatically dismiss after a specified duration. Can be used programmatically. + +## Function + +`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 | + +## Live Examples + +### Basic Toast + +
+
+

Live Demo

+
+
+
+ +```javascript +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, '#demo-basic'); +``` + +### Different Durations + +
+
+

Live Demo

+
+
+
+ +```javascript +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, '#demo-duration'); +``` + +### Interactive Toast + +
+
+

Live Demo

+
+
+
+ +```javascript +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, '#demo-interactive'); +``` + +### Form Validation Toast + +
+
+

Live Demo

+
+
+
+ +```javascript +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, '#demo-form'); +``` + +### Success Feedback + +
+
+

Live Demo

+
+
+
+ +```javascript +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, '#demo-feedback'); +``` + +### Error Handling + +
+
+

Live Demo

+
+
+
+ +```javascript +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, '#demo-error'); +``` + +### Custom Messages + +
+
+

Live Demo

+
+
+
+ +```javascript +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, '#demo-custom'); +``` + +### Multiple Toasts + +
+
+

Live Demo

+
+
+
+ +```javascript +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, '#demo-multiple'); +``` + +