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

30
docs/components/alert.md
View File

@@ -39,7 +39,7 @@ Alert supports all **daisyUI Alert classes**:
const { Alert, Div, mount } = window;
const BasicDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [
return div({ class: 'flex flex-col gap-3' }, [
Alert({ class: 'alert-info' }, 'This is an informational message.'),
Alert({ class: 'alert-success' }, 'Operation completed successfully!'),
Alert({ class: 'alert-warning' }, 'Please review your input before proceeding.'),
@@ -62,7 +62,7 @@ mount(BasicDemo, '#demo-basic');
const { Alert, Div, mount } = window;
const VariantsDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [
return div({ class: 'flex flex-col gap-3' }, [
Alert({ class: 'alert-info alert-soft' }, 'Soft info alert'),
Alert({ class: 'alert-info alert-solid' }, 'Solid info alert'),
Alert({ class: 'alert-success alert-soft' }, 'Soft success alert'),
@@ -104,14 +104,14 @@ const ActionsDemo = () => {
Toast(`Restored: ${deletedItem()}`, 'alert-success', 2000);
};
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'flex gap-2' }, [
Button({ class: 'btn btn-sm', onclick: () => deleteItem('Document A') }, 'Delete Document A'),
Button({ class: 'btn btn-sm', onclick: () => deleteItem('Document B') }, 'Delete Document B')
return div({ class: 'flex flex-col gap-4' }, [
div({ class: 'flex gap-2' }, [
button({ class: 'btn btn-sm', onclick: () => deleteItem('Document A') }, 'Delete Document A'),
button({ class: 'btn btn-sm', onclick: () => deleteItem('Document B') }, 'Delete Document B')
]),
() => showUndo() ? Alert({ class: 'alert-warning alert-soft flex justify-between items-center' }, [
Span({}, `Deleted: ${deletedItem()}`),
Button({ class: 'btn btn-sm btn-primary', onclick: undoDelete }, 'Undo')
span({}, `Deleted: ${deletedItem()}`),
button({ class: 'btn btn-sm btn-primary', onclick: undoDelete }, 'Undo')
]) : null
]);
};
@@ -133,12 +133,12 @@ const { Alert, Button, Div, mount } = window;
const DismissibleDemo = () => {
const visible = $(true);
return Div({ class: 'flex flex-col gap-3' }, [
return div({ class: 'flex flex-col gap-3' }, [
() => visible() ? Alert({ class: 'alert-info flex justify-between items-center' }, [
Span({}, 'This alert can be dismissed. Click the X button to close.'),
Button({ class: 'btn btn-xs btn-circle btn-ghost', onclick: () => visible(false) }, '✕')
span({}, 'This alert can be dismissed. Click the X button to close.'),
button({ class: 'btn btn-xs btn-circle btn-ghost', onclick: () => visible(false) }, '✕')
]) : null,
() => !visible() ? Button({ class: 'btn btn-sm btn-ghost', onclick: () => visible(true) }, 'Show Alert') : null
() => !visible() ? button({ class: 'btn btn-sm btn-ghost', onclick: () => visible(true) }, 'Show Alert') : null
]);
};
mount(DismissibleDemo, '#demo-dismissible');
@@ -169,8 +169,8 @@ const ReactiveDemo = () => {
}
};
return Div({ class: 'flex flex-col gap-4' }, [
Input({
return div({ class: 'flex flex-col gap-4' }, [
input({
class: 'input input-bordered',
placeholder: 'Enter your email',
value: email,
@@ -196,7 +196,7 @@ mount(ReactiveDemo, '#demo-reactive');
const { Alert, Div, mount } = window;
const AllTypesDemo = () => {
return Div({ class: 'flex flex-col gap-3' }, [
return div({ class: 'flex flex-col gap-3' }, [
Alert({ class: 'alert-info' }, 'ℹ️ This is an info alert'),
Alert({ class: 'alert-success' }, '✅ This is a success alert'),
Alert({ class: 'alert-warning' }, '⚠️ This is a warning alert'),